/*
  Hero — vertical photo marquee
  Recreación del efecto original del template (Webflow IX2: "Members Loop Down" / "Members Loop Up").

  Estructura relevante:
    .vertical-loop            -> contenedor con overflow:hidden (ya definido en webflow.css)
      .vertical-loop_group    -> columna 1 (visible en todos los breakpoints)
      .vertical-loop_group.hide-mobile-landscape -> columna 2 (oculta en mobile)
        .loop_collection (x3) -> misma lista de fotos repetida 3 veces, apiladas en flex-column

  Efecto original (extraído de webflow.js):
    a-30 "Members Loop Down": .loop_collection va de translateY(-100.9%) a translateY(0%) en 60s
    a-31 "Members Loop Up":   .loop_collection va de translateY(0%) a translateY(-100.8%) en 60s
  Como cada columna repite la misma lista de fotos, el salto entre el 100% y el 0% del keyframe
  es invisible: el loop se ve continuo e infinito.
*/

.vertical-loop_group .loop_collection {
  animation: hero-loop-down 60s linear infinite;
  will-change: transform;
}

.vertical-loop_group.hide-mobile-landscape .loop_collection {
  animation: hero-loop-up 60s linear infinite;
}

@keyframes hero-loop-down {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0%);
  }
}

@keyframes hero-loop-up {
  from {
    transform: translateY(0%);
  }
  to {
    transform: translateY(-100%);
  }
}

/*
  Mobile (≤767px): webflow.css ya reorganiza el hero en fila (.vertical-loop,
  .vertical-loop_group y .vertical-loop_column pasan a flex-flow:row y las cards
  a un formato horizontal). El loop, sin embargo, seguía animando en vertical
  (translateY), lo que no correspondía al nuevo layout. Se activa aquí el
  carrusel horizontal real: las cards se desplazan en translateX.
*/
@media screen and (max-width: 767px) {
  .vertical-loop_group .loop_collection {
    animation: hero-loop-left 40s linear infinite;
  }

  .vertical-loop_group.hide-mobile-landscape .loop_collection {
    animation: hero-loop-right 40s linear infinite;
  }
}

@keyframes hero-loop-left {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes hero-loop-right {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0%);
  }
}

/* Respeta la preferencia de movimiento reducido del sistema operativo */
@media (prefers-reduced-motion: reduce) {
  .vertical-loop_group .loop_collection {
    animation: none;
  }
}

/* Botón "Agenda tu cita" del hero (todas las páginas): fondo dorado de marca, texto azul principal */
.section_hero .button_secondary {
  background-color: #ccc278;
  color: #01273d;
}

/* Ícono de WhatsApp dentro del botón "Agenda tu cita" del hero */
.section_hero .button_whatsapp-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
}

/* Etiqueta de cada foto del hero (member_content) y su punto (member_circle) */
.member_content {
  background-color: #01273d5f;
}

.member_circle {
  background-color: #ccc278;
}

/*
  El -100px de translateY en .hero_stats-grid está pensado para el layout desktop
  (grid de 2 columnas), donde ese desplazamiento hace que el bloque de stats se
  monte visualmente sobre la columna de fotos. En ≤767px .hero_wrapper pasa a
  flex-column (hero_left y hero_stats-grid apilados uno debajo del otro), así que
  ese mismo desplazamiento hace que las stats se encimen con el heading/botón.
*/
@media screen and (max-width: 767px) {
  .hero_stats-grid {
    transform: none;
    grid-template-columns: 1fr;
  }
}

/*
  Desktop: .hero_wrapper tenía "height:55rem" fijo además de
  "min-height:calc(100svh - 1.5rem)". Con ambos, el navegador usa el mayor de
  los dos — en ventanas con menos de ~904px de alto, el fijo de 55rem (880px)
  ganaba y la card quedaba más alta que el viewport, dejando su borde inferior
  fuera de pantalla hasta hacer scroll.

  Cambiar a "height:auto" (probado antes) fue peor: sin un alto explícito, la
  grid crece para caber el contenido interno (el marquee de fotos, que es muy
  alto por sus 3 copias apiladas), así que la card se volvió mucho más alta.

  La corrección correcta es un alto explícito y fijo, pero atado al viewport
  en vez de a un rem estático: así overflow:hidden sigue recortando el marquee
  como antes, y la card siempre mide exactamente el alto disponible en pantalla
  (menos el padding de .section_hero), enmarcada arriba, abajo, izquierda y
  derecha, sin scroll.
*/
@media screen and (min-width: 768px) {
  .hero_wrapper {
    height: calc(100svh - 1.5rem);
  }
}

/*
  Con el escalado fluido (css/scale.css) el contenido del hero crece con el
  ancho, pero el alto de la card depende del alto de la ventana. En ventanas
  anchas y bajas (p. ej. 1920x900 o 1536x730) ZEISS se encimaba con el botón.
  48rem es el alto mínimo en que el contenido cabe; en pantallas normales la
  card sigue midiendo exactamente el alto disponible.
*/
@media screen and (min-width: 1031px) {
  .hero_wrapper {
    height: max(calc(100svh - 1.5rem), 48rem);
  }
}

/*
  Mismo lineamiento de "encuadre" del hero de Home (card oscura que llena el
  alto disponible de pantalla, enmarcada por el padding de .section_hero) se
  aplica a los heroes que hoy se quedan cortos:

  - .service_wrapper.is-internal (páginas de detalle de servicio): webflow.css
    le pone min-height:auto, así que la card solo crece lo que ocupa su
    contenido y deja mucho fondo beige visible arriba/abajo en vez de llenar
    el encuadre como en Home/Servicios/Nosotros.
  - .blogs_wrapper (Recursos y Preguntas frecuentes): solo trae
    min-height:26rem, muy por debajo del alto de pantalla.
  - .about_wrapper (Nosotros): en desktop (≥992px) ya hereda el
    min-height:calc(100svh - 1.5rem) correcto desde webflow.css, pero en
    tablet (768–991px) ese mismo archivo lo resetea a min-height:auto, así
    que ahí sí se quedaba corto igual que los dos casos anteriores.

  Se usa min-height (no height fijo) porque estos heroes no tienen el marquee
  de fotos que sí necesita un alto exacto con overflow:hidden; con min-height
  el contenido puede seguir centrado (align-items/justify-content:center ya
  definidos en .is-internal) sin recortarse si llegara a crecer más que el
  viewport en pantallas muy bajas.
*/
@media screen and (min-width: 768px) {
  .service_wrapper.is-internal,
  .blogs_wrapper,
  .about_wrapper {
    min-height: calc(100svh - 1.5rem);
  }
}