/* Capa de modernización: transiciones, hovers y revelados suaves.
   Se carga después de los estilos de Divi y no cambia la paleta ni el layout. */

:root {
  --amarillo: #ffdf48;
  --amarillo-oscuro: #e5c848;
  --tinta: #3c3950;
  --noche: #212331;
  --gris: #99a9b5;
  --curva: cubic-bezier(.22, .61, .36, 1);
  --rapido: .25s;
  --medio: .45s;
  --sombra: 0 14px 34px rgba(33, 35, 49, .14);
}

/* ---------- Global ---------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--amarillo);
  color: var(--tinta);
}

a,
button,
input,
textarea {
  transition: color var(--rapido) var(--curva), background-color var(--rapido) var(--curva),
    border-color var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva);
}

:focus-visible {
  outline: 2px solid var(--amarillo);
  outline-offset: 3px;
}

/* ---------- Header ---------- */
#main-header {
  transition: background-color var(--medio) var(--curva), box-shadow var(--medio) var(--curva),
    padding var(--medio) var(--curva);
}

#main-header.et-fixed-header,
#main-header.moderno-scroll {
  background-color: rgba(33, 35, 49, .88) !important;
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .18) !important;
}

#top-menu > li > a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 26px;
  height: 2px;
  background: var(--amarillo);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--medio) var(--curva);
}

.et-fixed-header #top-menu > li > a::after {
  bottom: 14px;
}

#top-menu > li > a:hover {
  opacity: 1 !important;
  color: var(--amarillo) !important;
}

#top-menu > li > a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

#top-menu > li.moderno-activo > a {
  color: var(--amarillo) !important;
}

#top-menu > li.moderno-activo > a::after {
  transform: scaleX(1);
}

/* ---------- Saltar al contenido / volver arriba ---------- */
.moderno-saltar {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100000;
  padding: 10px 16px;
  border-radius: 6px;
  background: var(--amarillo);
  color: var(--tinta);
  font-weight: 700;
  transform: translateY(-160%);
  transition: transform var(--rapido) var(--curva);
}

.moderno-saltar:focus {
  transform: none;
}

#main-content:focus {
  outline: none;
}

.moderno-arriba {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--noche);
  color: var(--amarillo);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .25);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--medio) var(--curva), transform var(--medio) var(--curva),
    visibility var(--medio), background-color var(--rapido) var(--curva), color var(--rapido) var(--curva);
}

.moderno-arriba.visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.moderno-arriba:hover {
  background: var(--amarillo);
  color: var(--noche);
  transform: translateY(-3px);
}

@media (max-width: 767px) {
  .moderno-arriba {
    right: 14px;
    bottom: 14px;
    width: 42px;
    height: 42px;
  }
}

#logo {
  transition: transform var(--medio) var(--curva), max-height .4s ease-in-out;
}

.logo_container a:hover #logo {
  transform: scale(1.03);
}

.et_mobile_menu {
  border-radius: 0 0 10px 10px;
  box-shadow: var(--sombra);
}

/* ---------- Slider principal ---------- */
#SliderTOP .et_pb_slide {
  overflow: hidden;
}

/* Imagen con zoom lento (Ken Burns) en un pseudo-elemento para no mover el texto */
#SliderTOP .et_pb_slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  background-size: cover;
  background-position: center;
  transform: scale(1);
  z-index: 0;
}

/* Solo después de la animación de entrada de Divi: su perspectiva final deforma los hijos escalados */
#SliderTOP.moderno-listo .et-pb-active-slide::before {
  animation: moderno-kenburns 9s ease-out forwards;
}

/* Velo oscuro suave para que el título amarillo se lea mejor sobre la foto */
#SliderTOP .et_pb_slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(33, 35, 49, .35) 0%, rgba(33, 35, 49, .15) 45%, rgba(33, 35, 49, .55) 100%);
  z-index: 1;
  pointer-events: none;
}

#SliderTOP .et_pb_slide .et_pb_container {
  z-index: 2;
}

#SliderTOP .et-pb-active-slide .et_pb_slide_title {
  animation: moderno-subir .55s var(--curva) both;
}

#SliderTOP .et-pb-active-slide .et_pb_slide_content {
  animation: moderno-subir .55s var(--curva) .1s both;
}

#SliderTOP .et_pb_slide_description {
  animation-name: none !important;
}

#SliderTOP .et_pb_slide_title {
  letter-spacing: .02em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}

#SliderTOP .et_pb_slide_content {
  text-shadow: 0 1px 8px rgba(0, 0, 0, .4);
}

#SliderTOP .et-pb-controllers a {
  transition: background-color var(--rapido) var(--curva), width var(--medio) var(--curva);
}

#SliderTOP .et-pb-controllers .et-pb-active-control {
  width: 24px;
  border-radius: 7px;
  background-color: var(--amarillo);
}

#SliderTOP .et-pb-slider-arrows a {
  transition: opacity var(--medio) var(--curva), left var(--medio) var(--curva),
    right var(--medio) var(--curva), color var(--rapido) var(--curva);
}

#SliderTOP .et-pb-slider-arrows a:hover {
  color: var(--amarillo);
}

/* ---------- Nosotr@s ---------- */
.ru-about .et-pb-icon {
  display: inline-block;
  transition: transform var(--medio) var(--curva);
}

.ru-about:hover .et-pb-icon {
  transform: translateY(-4px) scale(1.08);
}

/* ---------- Servicios ---------- */
.ru-services-icon .et-pb-icon-circle,
.ru-services-icon .et_pb_main_blurb_image {
  transition: background-color var(--medio) var(--curva), color var(--medio) var(--curva),
    transform var(--medio) var(--curva), box-shadow var(--medio) var(--curva);
}

.ru-services-icon:hover .et_pb_main_blurb_image {
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(51, 51, 51, .25);
}

.ru-services-icon .et_pb_module_header a {
  background-image: linear-gradient(var(--amarillo), var(--amarillo));
  background-size: 0 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--medio) var(--curva), color var(--rapido) var(--curva);
}

.ru-services-icon:hover .et_pb_module_header a {
  background-size: 100% 2px;
}

/* ---------- Contadores circulares ---------- */
.ru-circle-counter .percent p {
  transition: transform var(--medio) var(--curva);
}

.ru-circle-counter:hover .percent p {
  transform: scale(1.06);
}

/* ---------- Trabajos realizados ---------- */
.et_pb_image_0 .et_pb_image_wrap {
  overflow: hidden;
  display: block;
}

.et_pb_image_0 img {
  transition: transform .6s var(--curva);
}

.et_pb_image_0:hover img {
  transform: scale(1.03);
}

/* ---------- Fortalezas (barras) ---------- */
.et_pb_counters .et_pb_counter_container,
.et_pb_counters .et_pb_counter_amount {
  border-radius: 999px;
}

.et_pb_counters .et_pb_counter_container {
  overflow: hidden;
}

/* Divi anima las barras y los íconos en 1 s: se acortan para no demorar la lectura */
.et-animated li span .et_pb_counter_amount {
  animation-duration: .8s !important;
}

.et_pb_animation_top.et-animated {
  animation-duration: .5s !important;
  animation-timing-function: var(--curva) !important;
}

/* ---------- Equipo ---------- */
.ru-person .et_pb_main_blurb_image img {
  box-shadow: 0 0 0 0 rgba(255, 223, 72, 0);
  transition: transform var(--medio) var(--curva), box-shadow var(--medio) var(--curva);
}

.ru-person:hover .et_pb_main_blurb_image img {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 0 0 5px var(--amarillo), 0 16px 30px rgba(33, 35, 49, .2);
}

/* ---------- Blog ---------- */
.ru-blog .et_pb_post {
  border-radius: 10px;
  overflow: hidden;
  transition: transform var(--medio) var(--curva), box-shadow var(--medio) var(--curva);
}

.ru-blog .et_pb_post:has(.more-link):hover {
  transform: translateY(-6px);
  box-shadow: var(--sombra);
}

.ru-blog .et_pb_image_container {
  overflow: hidden;
  border-radius: 6px;
}

.ru-blog .et_pb_image_container img {
  transition: transform .8s var(--curva);
}

.ru-blog .et_pb_post:has(.more-link):hover .et_pb_image_container img {
  transform: scale(1.06);
}

.ru-blog .entry-title a {
  transition: color var(--medio) var(--curva) !important;
}

.ru-blog .more-link {
  display: inline-block;
  transition: background-color var(--rapido) var(--curva), color var(--rapido) var(--curva),
    box-shadow var(--rapido) var(--curva), transform var(--rapido) var(--curva);
}

.ru-blog .post-content a.more-link:hover {
  transform: translateY(-2px);
}

/* ---------- Contacto ---------- */
/* El fondo de mapa original ya no existe: el texto blanco quedaba invisible sobre blanco */
#contact .et_pb_text_12.et_pb_text,
#contact .et_pb_text_12 h3 {
  color: var(--tinta) !important;
}

#contact .et_pb_text_12 h3 a {
  color: var(--tinta) !important;
  background: linear-gradient(transparent 62%, rgba(255, 223, 72, .7) 62%);
}

#contact .et_pb_text_12 h3 a:hover {
  background-color: var(--amarillo);
}

.ru-contact-form .input {
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px transparent;
}

.ru-contact-form .input:hover {
  box-shadow: inset 0 0 0 1px rgba(153, 169, 181, .35);
}

.ru-contact-form .input:focus {
  box-shadow: inset 0 0 0 2px var(--amarillo);
  outline: none;
}

.ru-contact-form .et_pb_button {
  transition: background-color var(--rapido) var(--curva), color var(--rapido) var(--curva),
    transform var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva) !important;
}

.ru-contact-form .et_pb_button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(229, 200, 72, .35);
}

.ru-contact-form .et_pb_button:active {
  transform: translateY(0);
  box-shadow: none;
}

.et-pb-contact-message {
  animation: moderno-subir .5s var(--curva) both;
}

/* ---------- Footer ---------- */
.suscripcion-mensaje:empty {
  display: none;
}

.suscripcion-mensaje {
  margin-top: 10px;
  padding: 10px 14px;
  border-left: 3px solid var(--amarillo);
  border-radius: 4px;
  background: rgba(255, 255, 255, .06);
  animation: moderno-subir .5s var(--curva) both;
}

.jetpack_subscription_widget input[type="submit"]:disabled {
  opacity: .6;
  cursor: wait;
}

.et_pb_social_media_follow li a.icon {
  transition: transform var(--rapido) var(--curva), box-shadow var(--rapido) var(--curva),
    opacity var(--rapido) var(--curva);
}

.et_pb_social_media_follow li a.icon:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 18px rgba(0, 0, 0, .25);
}

.jetpack_subscription_widget input[type="email"],
.jetpack_subscription_widget input[type="submit"] {
  border-radius: 6px;
}

/* ---------- Micro-interacciones ---------- */
/* Progreso de lectura (lo crea js/moderno.js) */
.moderno-progreso {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 100001;
  background: linear-gradient(90deg, var(--amarillo-oscuro), var(--amarillo));
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

/* Clic con leve "presión" */
.et_pb_button:active,
.ru-blog .more-link:active,
.jetpack_subscription_widget input[type="submit"]:active,
.moderno-arriba:active {
  transform: scale(.97) !important;
  transition-duration: .08s !important;
}

/* "Leer más" con flecha que avanza */
.ru-blog .more-link::after {
  content: '\2192';
  display: inline-block;
  margin-left: 6px;
  transition: transform var(--rapido) var(--curva);
}

.ru-blog .more-link:hover::after {
  transform: translateX(3px);
}

/* Íconos con un pequeño balanceo al pasar el mouse */
.ru-about:hover .et-pb-icon {
  animation: moderno-balanceo .5s var(--curva);
}

.ru-services-icon:hover .et-pb-icon {
  animation: moderno-balanceo .5s var(--curva);
}

/* Links del pie con subrayado que crece */
#main-footer .et_pb_blurb_description a {
  background-image: linear-gradient(var(--amarillo), var(--amarillo));
  background-size: 0 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--rapido) var(--curva), color var(--rapido) var(--curva);
}

#main-footer .et_pb_blurb_description a:hover {
  background-size: 100% 1px;
}

/* El placeholder se atenúa al escribir */
.ru-contact-form .input::placeholder,
.jetpack_subscription_widget input[type="email"]::placeholder {
  transition: opacity var(--rapido) var(--curva);
}

.ru-contact-form .input:focus::placeholder,
.jetpack_subscription_widget input[type="email"]:focus::placeholder {
  opacity: .45;
}

/* Brillo en el botón mientras se envía */
.ru-contact-form .et_pb_button:disabled,
.jetpack_subscription_widget input[type="submit"]:disabled {
  cursor: wait;
  background-image: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%) !important;
  background-size: 220% 100% !important;
  animation: moderno-brillo 1s linear infinite;
}

/* ---------- Revelado al hacer scroll (lo activa js/moderno.js) ---------- */
.moderno-js .moderno-revelar {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .45s var(--curva), transform .45s var(--curva);
  transition-delay: var(--retraso, 0s);
}

.moderno-js .moderno-revelar.revelado {
  opacity: 1;
  transform: none;
}

/* ---------- Animaciones ---------- */
@keyframes moderno-kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}

@keyframes moderno-balanceo {
  0%, 100% { rotate: 0deg; }
  35% { rotate: -7deg; }
  70% { rotate: 4deg; }
}

@keyframes moderno-brillo {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}

@keyframes moderno-subir {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .moderno-js .moderno-revelar {
    opacity: 1;
    transform: none;
  }
}