/* =========================================================================
   HOPE & MISSION — ANIMACIONES
   -------------------------------------------------------------------------
   Corrige el recorrido y la curva de las animaciones de entrada nativas de
   Elementor, y reproduce las animaciones de la maqueta que Elementor no
   puede dar con sus controles.

   Reglas de este fichero:
   - Ningun selector global. Todos parten de una clase .hm-* o de un widget
     concreto, de modo que nada de aqui puede alcanzar otra pagina.
   - Ningun efecto :hover ni :focus. Los estados de raton viven en
     hope-mission.css y no se tocan.
   - Dentro de pestanas y carruseles NO se usa la animacion nativa: se
     engancha a .e-active y .swiper-slide-active, que es lo mismo que hace
     el JavaScript de la maqueta al mostrar un panel.
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. REVEAL AL SCROLL
   Elementor aporta el estado inicial oculto (.elementor-invisible), el
   observador de viewport y el retardo. Aqui solo se corrige el recorrido
   (100% de la altura -> 28px) y la duracion (1,25s -> 0,75s) para igualar
   la maqueta. La clase .hm-anim la lleva unicamente cada elemento auditado.
   ------------------------------------------------------------------------- */
@keyframes hm-in{
  from{opacity:0;transform:translateY(28px);}
  to{opacity:1;transform:none;}
}

/* .hm-in la pone hope-mission-animations.js al entrar el elemento en pantalla.
   Se acepta tambien .animated por si el observador de Elementor se adelanta:
   en ese caso la animacion es exactamente la misma y no hay doble movimiento. */
.hm-anim.hm-in,
.hm-anim.animated{
  animation-name:hm-in;
  animation-duration:.75s;
  animation-timing-function:cubic-bezier(.2,.7,.3,1);
  animation-fill-mode:both;
}


/* -------------------------------------------------------------------------
   2. HERO — contenido del slide activo
   La maqueta anima por separado titulo, texto y boton (heroIn, 22px, 0,8s,
   escalonado 0 / 120 / 240 ms). Elementor solo sabe animar el bloque
   entero, asi que se neutraliza el bloque y se reparte en los tres hijos.
   Se reinicia solo en cada cambio de slide porque Swiper conmuta la clase
   .swiper-slide-active.
   ------------------------------------------------------------------------- */
@keyframes hm-hero-in{
  from{opacity:0;transform:translateY(22px);}
  to{opacity:1;transform:none;}
}

.hm-hero .swiper-slide-contents{animation:none !important;}

.hm-hero .swiper-slide-active .elementor-slide-heading,
.hm-hero .swiper-slide-active .elementor-slide-description,
.hm-hero .swiper-slide-active .elementor-slide-button{
  animation:hm-hero-in .8s both;
}
.hm-hero .swiper-slide-active .elementor-slide-description{animation-delay:.12s;}
.hm-hero .swiper-slide-active .elementor-slide-button{animation-delay:.24s;}


/* -------------------------------------------------------------------------
   2 bis. HERO — el contenido del slide activo no puede quedarse oculto

   El manejador de Slides de Elementor hace esto en cada cambio:

     slideChangeTransitionStart -> $contenido.hide()   (display:none en linea)
     slideChangeTransitionEnd   -> $contenido.show()

   Es decir, oculta el contenido al empezar la transicion y solo lo devuelve
   al terminarla. Si ese segundo evento no llega —pestana en segundo plano
   durante la transicion, pantalla que se bloquea, dispositivo muy cargado—
   el titulo, el texto y el boton se quedan ocultos para siempre. Es un
   estado reproducible y se comprobo en pantalla.

   Esta regla lo hace imposible: el contenido del slide activo esta siempre
   visible, gane quien gane. El !important es imprescindible porque compite
   contra un display:none en linea puesto por jQuery.

   Los slides inactivos siguen pudiendo estar ocultos, que es justo lo que
   Elementor necesita para encadenar la animacion de entrada. Solo se
   protege el que se esta viendo. Con el bucle activado Swiper marca a veces
   un clon como activo, de ahi el segundo selector.
   ------------------------------------------------------------------------- */
.hm-hero .swiper-slide-active .swiper-slide-contents,
.hm-hero .swiper-slide-duplicate-active .swiper-slide-contents{
  display:block !important;
}


/* -------------------------------------------------------------------------
   3. HERO — parallax del fondo

   Historial del fallo, para que no se repita: aqui habia una reserva de
   altura (top:-14%; height:128%). No funcionaba, porque Elementor deja
   .swiper-slide-bg con position:static y sobre un elemento no posicionado
   la propiedad top se ignora por completo. Solo se aplicaba el height, de
   modo que TODA la reserva quedaba abajo y arriba no habia ninguna: en
   cuanto la capa se desplazaba hacia abajo se destapaba su borde superior
   y asomaba el gris #BBB que Elementor pinta en ese mismo elemento. Esa
   era la linea gris del borde superior del banner.

   Ahora la geometria no se toca en absoluto: la capa sigue cubriendo
   exactamente el hero y la altura visual del banner no cambia. La holgura
   para moverse la da un escalado minimo de la propia capa, que reserva un
   4% por arriba y otro 4% por abajo. El desplazamiento se limita al 3%,
   asi que el borde de la imagen no puede aparecer en ningun caso.

   El valor lo escribe hope-mission-animations.js en --hm-hero-shift sobre
   .hm-hero. Vale exactamente 0px mientras no se hace scroll, de modo que
   la imagen esta completamente quieta al cargar la pagina.

   Los tres fondos de los tres slides heredan la variable, clones de Swiper
   incluidos, sin que el JavaScript tenga que tocarlos uno a uno.
   ------------------------------------------------------------------------- */
.hm-hero .swiper-slide-bg{
  transform:translate3d(0,var(--hm-hero-shift,0px),0) scale(1.08);
  transform-origin:center center;
  will-change:transform;
  backface-visibility:hidden;
}


/* -------------------------------------------------------------------------
   3 bis. PARALLAX DENTRO DEL RECORTE ("Sobre Hope and Mission")

   La imagen de la banda ya tiene object-fit:cover con un sobrante vertical
   de unos 310px que antes no se usaba: object-position estaba en 50% 50%,
   centrado, y por eso los rostros quedaban cortados.

   Antes el movimiento lo hacia el Motion FX de Pro Elements, que desplaza
   el contenedor del widget. Ese contenedor mide exactamente lo mismo que
   .hm-band, que recorta con overflow:hidden, asi que cualquier movimiento
   dejaba hueco arriba y abajo. Esas eran las lineas y los espacios vacios.

   Ahora no se mueve ninguna caja: se mueve la ventana de recorte sobre la
   propia imagen. Como cover garantiza que la imagen siempre cubre la caja,
   es imposible que aparezca un borde, una linea o un hueco, se desplace lo
   que se desplace.

   ENCUADRE ANCLADO ARRIBA (top center), no centrado.
   En escritorio la imagen (1440x1028) se recorta a 1310x426, de modo que
   cover deja unos 509px de sobrante vertical: cada 1% de object-position son
   ~5px de recorrido. Con el 34% de partida el borde superior del recorte caia
   a la altura de los ojos de los tres ninos de la fila de atras y les cortaba
   la cara; se comprobo en pantalla a 0 / 6 / 10 / 14 / 18 / 34%.

   El valor de reserva es ahora 7%, el centro del rango 0%-14% que recorre el
   JavaScript, para que el encuadre siga siendo correcto aunque el JS no llegue
   a ejecutarse. En todo ese rango las cabezas de arriba quedan completas.
   ------------------------------------------------------------------------- */
.hm-band .hm-cover-parallax img{
  object-position:50% var(--hm-cover-y,7%);
  will-change:object-position;
}


/* -------------------------------------------------------------------------
   4. BLOG — escalonado de las tarjetas
   El widget Posts renderiza las tarjetas como un solo widget, de modo que
   Elementor no puede escalonarlas. Se anula la animacion del widget y se
   reparte en los articulos, con el 0 / 110 / 220 ms de la maqueta.
   ------------------------------------------------------------------------- */
.hm-blog-grid.hm-in,
.hm-blog-grid.animated{animation:none;}

.hm-blog-grid.hm-in .elementor-post,
.hm-blog-grid.animated .elementor-post{
  animation:hm-in .75s cubic-bezier(.2,.7,.3,1) both;
}
.hm-blog-grid.hm-in .elementor-post:nth-child(3n+2),
.hm-blog-grid.animated .elementor-post:nth-child(3n+2){animation-delay:.11s;}
.hm-blog-grid.hm-in .elementor-post:nth-child(3n+3),
.hm-blog-grid.animated .elementor-post:nth-child(3n+3){animation-delay:.22s;}


/* -------------------------------------------------------------------------
   5. MAPA — transicion del pais activo
   El shortcode [hm_map] pinta el pais en el servidor y cada pestana lleva
   su propia copia del SVG, asi que la regla transition:fill del CSS base
   nunca llega a dispararse. Elementor oculta los paneles inactivos con
   display:none, de modo que un keyframe sobre el panel activo se reinicia
   en cada cambio de pais y tambien en la carga inicial.

   No se toca el SVG ni ninguno de sus paths: solo se anima el color de
   relleno del pais que ya viene marcado como .is-active.
   ------------------------------------------------------------------------- */
@keyframes hm-map-in{
  from{fill:#DCDCDC;}
  to{fill:#FF5A02;}
}

.hm-country-tabs .e-n-tabs-content > .e-active .hm-map svg path.is-active{
  animation:hm-map-in .25s ease both;
}


/* -------------------------------------------------------------------------
   6. PESTANAS DE PAIS — contenido del panel activo
   Equivale al activate() de la maqueta, que vuelve a disparar fadeImg
   sobre las imagenes del panel que se muestra.
   ------------------------------------------------------------------------- */
@keyframes hm-fade-img{
  from{opacity:0;transform:scale(1.02);}
  to{opacity:1;transform:none;}
}

/* Impacto — fotografia de cabecera de cada pais */
.hm-country-tabs .e-n-tabs-content > .e-active .hm-country-photo img{
  animation:hm-fade-img .6s ease both;
}

/* Proyecto Familia — galeria de cada pais */
.hm-country-tabs .e-n-tabs-content > .e-active .hm-family-gallery img{
  animation:hm-fade-img .6s ease both;
}

/* Impacto — las tres estadisticas, escalonadas 0 / 90 / 180 ms */
.hm-country-tabs .e-n-tabs-content > .e-active .hm-stats > .e-con{
  animation:hm-in .75s cubic-bezier(.2,.7,.3,1) both;
}
.hm-country-tabs .e-n-tabs-content > .e-active .hm-stats > .e-con:nth-child(2){animation-delay:.09s;}
.hm-country-tabs .e-n-tabs-content > .e-active .hm-stats > .e-con:nth-child(3){animation-delay:.18s;}


/* -------------------------------------------------------------------------
   7. TESTIMONIOS — escalonado dentro del carrusel
   Los slides del carrusel no pueden llevar animacion nativa sin riesgo de
   quedarse invisibles, asi que se engancha al slide activo.
   ------------------------------------------------------------------------- */
.hm-testi-carousel .swiper-slide-active .hm-testimonial{
  animation:hm-in .75s cubic-bezier(.2,.7,.3,1) both;
}
.hm-testi-carousel .swiper-slide-active > .e-con > .e-con:nth-child(2) .hm-testimonial{animation-delay:.11s;}
.hm-testi-carousel .swiper-slide-active > .e-con > .e-con:nth-child(3) .hm-testimonial{animation-delay:.22s;}


/* -------------------------------------------------------------------------
   8. CABECERA — icono hamburguesa
   La maqueta transforma tres barras en una X en 0,25s. Elementor intercambia
   dos SVG de golpe. Se ocultan los SVG y se dibujan las tres barras sobre el
   propio boton: las exteriores con ::before y ::after, la central con un
   degradado de fondo. El estado ya lo conmuta Elementor en aria-expanded,
   asi que no hace falta JavaScript.
   ------------------------------------------------------------------------- */
.hm-header .elementor-menu-toggle{
  position:relative;
  width:42px;
  height:42px;
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;
  background-position:center center;
  background-size:26px 2px;
  transition:background-size .25s ease;
}
.hm-header .elementor-menu-toggle svg{
  opacity:0;
  pointer-events:none;
}
.hm-header .elementor-menu-toggle::before,
.hm-header .elementor-menu-toggle::after{
  content:"";
  position:absolute;
  left:50%;
  width:26px;
  height:2px;
  margin-left:-13px;
  background:currentColor;
  transition:transform .25s ease;
}
.hm-header .elementor-menu-toggle::before{top:calc(50% - 8px);}
.hm-header .elementor-menu-toggle::after{top:calc(50% + 6px);}

.hm-header .elementor-menu-toggle[aria-expanded="true"]{background-size:26px 0;}
.hm-header .elementor-menu-toggle[aria-expanded="true"]::before{transform:translateY(7px) rotate(45deg);}
.hm-header .elementor-menu-toggle[aria-expanded="true"]::after{transform:translateY(-7px) rotate(-45deg);}


/* -------------------------------------------------------------------------
   9. POPUPS DE BIOGRAFIA
   Elementor ya aplica fadeInUp y la duracion se ha bajado a 0,3s desde el
   propio popup. Aqui solo se corrige el recorrido para igualar el modalIn
   de la maqueta: 24px de subida y una entrada desde scale(.98).
   ------------------------------------------------------------------------- */
@keyframes hm-modal-in{
  from{opacity:0;transform:translateY(24px) scale(.98);}
  to{opacity:1;transform:none;}
}

.elementor-popup-modal .dialog-widget-content.animated{
  animation-name:hm-modal-in;
  animation-timing-function:cubic-bezier(.2,.7,.3,1);
  animation-fill-mode:both;
}


/* -------------------------------------------------------------------------
   9 bis. ESCRITORIO — ritmo de TODAS las animaciones de entrada

   En escritorio la ventana es alta y cada gesto de scroll recorre mucha
   pagina: con los 0,75s de la maqueta la entrada terminaba antes de que el
   elemento llegase a una posicion comoda de lectura, asi que no llegaba a
   apreciarse. Aqui se reescribe el ritmo de las seis familias de entrada del
   sitio, sin tocar nada mas: mismos recorridos, mismas curvas, mismos
   elementos, mismo orden. Solo cambian duracion y retardo.

   El factor es x1,6 en todo, para que el desfase entre piezas se siga
   notando igual de repartido dentro del nuevo recorrido:

     reveals al scroll (.hm-anim)     0,75s -> 1,2s
     tarjetas del blog                0,75s -> 1,2s   0/110/220 -> 0/180/350
     contenido del hero               0,8s  -> 1,25s  0/120/240 -> 0/190/380
     fotos de pestana (hm-fade-img)   0,6s  -> 0,95s
     estadisticas de Impacto          0,75s -> 1,2s   0/90/180  -> 0/140/290
     carrusel de testimonios          0,75s -> 1,2s   0/110/220 -> 0/180/350

   El disparo de los reveals tambien se retrasa, pero eso no se puede hacer
   desde CSS: lo hace hope-mission-animations.js, que en escritorio amplia el
   rootMargin del observador de -12% a -20% y escala por el mismo x1,6 el
   retardo que se configura en Elementor (ese retardo viaja como estilo en
   linea y solo se puede tocar desde alli).

   Solo escritorio: 1025px es el corte de Elementor en este sitio
   (tablet: 1024). Movil y tablet conservan los tiempos de la maqueta, donde
   el recorrido de scroll por gesto es corto y 0,75s si se aprecia.

   Quedan fuera a proposito las tres animaciones que NO son entradas de
   contenido, sino respuesta inmediata a un clic: el relleno del pais en el
   mapa (0,25s), el icono hamburguesa (0,25s) y la apertura de los popups de
   biografia (0,3s). Alargarlas no las haria mas apreciables —ya se disparan
   con el elemento a la vista—, solo volveria la interfaz lenta de usar.
   ------------------------------------------------------------------------- */
@media (min-width:1025px){

  /* 1. Entradas al scroll. Cubre los 109 elementos .hm-anim del sitio: las
     22 paginas de las dos versiones de idioma, los dos pies y la plantilla
     de entrada del blog. */
  .hm-anim.hm-in,
  .hm-anim.animated{
    animation-duration:1.2s;
  }

  /* 2. Tarjetas del blog. Arriba usan la forma abreviada, asi que basta con
     reescribir la duracion y los dos retardos del escalonado. */
  .hm-blog-grid.hm-in .elementor-post,
  .hm-blog-grid.animated .elementor-post{
    animation-duration:1.2s;
  }
  .hm-blog-grid.hm-in .elementor-post:nth-child(3n+2),
  .hm-blog-grid.animated .elementor-post:nth-child(3n+2){animation-delay:.18s;}
  .hm-blog-grid.hm-in .elementor-post:nth-child(3n+3),
  .hm-blog-grid.animated .elementor-post:nth-child(3n+3){animation-delay:.35s;}

  /* 3. Hero: titulo, texto y boton del slide activo.
     Cabe de sobra en el ciclo del carrusel, que va a 6500ms de autoplay con
     900ms de fundido: 1,25s de entrada mas 0,38s de retardo son 1,63s. */
  .hm-hero .swiper-slide-active .elementor-slide-heading,
  .hm-hero .swiper-slide-active .elementor-slide-description,
  .hm-hero .swiper-slide-active .elementor-slide-button{
    animation-duration:1.25s;
  }
  .hm-hero .swiper-slide-active .elementor-slide-description{animation-delay:.19s;}
  .hm-hero .swiper-slide-active .elementor-slide-button{animation-delay:.38s;}

  /* 4. Pestanas de pais: foto de cabecera de Impacto y galeria de Proyecto
     Familia. */
  .hm-country-tabs .e-n-tabs-content > .e-active .hm-country-photo img,
  .hm-country-tabs .e-n-tabs-content > .e-active .hm-family-gallery img{
    animation-duration:.95s;
  }

  /* 5. Impacto: las tres estadisticas del pais activo. */
  .hm-country-tabs .e-n-tabs-content > .e-active .hm-stats > .e-con{
    animation-duration:1.2s;
  }
  .hm-country-tabs .e-n-tabs-content > .e-active .hm-stats > .e-con:nth-child(2){animation-delay:.14s;}
  .hm-country-tabs .e-n-tabs-content > .e-active .hm-stats > .e-con:nth-child(3){animation-delay:.29s;}

  /* 6. Carrusel de testimonios. */
  .hm-testi-carousel .swiper-slide-active .hm-testimonial{
    animation-duration:1.2s;
  }
  .hm-testi-carousel .swiper-slide-active > .e-con > .e-con:nth-child(2) .hm-testimonial{animation-delay:.18s;}
  .hm-testi-carousel .swiper-slide-active > .e-con > .e-con:nth-child(3) .hm-testimonial{animation-delay:.35s;}
}


/* -------------------------------------------------------------------------
   10. MOVIMIENTO REDUCIDO
   Cubre todo lo que introduce este fichero. Elementor ya neutraliza sus
   propias animaciones por separado, y el JavaScript del hero ni siquiera
   se registra cuando la preferencia esta activa.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .hm-anim,
  .hm-anim.hm-in,
  .hm-anim.animated,
  .hm-blog-grid.hm-in .elementor-post,
  .hm-blog-grid.animated .elementor-post,
  .hm-hero .swiper-slide-active .elementor-slide-heading,
  .hm-hero .swiper-slide-active .elementor-slide-description,
  .hm-hero .swiper-slide-active .elementor-slide-button,
  .hm-country-tabs .e-n-tabs-content > .e-active .hm-map svg path.is-active,
  .hm-country-tabs .e-n-tabs-content > .e-active .hm-country-photo img,
  .hm-country-tabs .e-n-tabs-content > .e-active .hm-family-gallery img,
  .hm-country-tabs .e-n-tabs-content > .e-active .hm-stats > .e-con,
  .hm-testi-carousel .swiper-slide-active .hm-testimonial,
  .elementor-popup-modal .dialog-widget-content.animated{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }

  .hm-header .elementor-menu-toggle,
  .hm-header .elementor-menu-toggle::before,
  .hm-header .elementor-menu-toggle::after{
    transition:none !important;
  }

  .hm-hero .swiper-slide-bg{
    transform:none !important;
  }

  .hm-band .hm-cover-parallax img{
    object-position:50% 7% !important;
  }
}