/* ==========================================================================
   AMFECO 2027 — Banner hero interactivo
   CSS autocontenido, sin dependencias, sin webfonts.
   Todas las clases/keyframes con prefijo `amf-` para no colisionar con
   Elementor / el tema. Nada de estilos globales fuera del scope `.amf-hero`.
   ========================================================================== */

/* ---------- 1. Contenedor ------------------------------------------------ */
/* La raíz NO lleva el prefijo de aislamiento; el resto de reglas sí, para
   ganar al CSS global del tema y de Elementor Kit sin usar !important. */
.amf-hero {
  --amf-px: 0;              /* puntero X normalizado (-1 → 1) */
  --amf-py: 0;              /* puntero Y normalizado (-1 → 1) */
  --amf-ink: #ffffff;
  --amf-ink-dim: rgba(255, 255, 255, .82);
  --amf-a1: #ffd23f;         /* amarillo marca */
  --amf-a2: #00c2ff;         /* cian marca */
  --amf-a3: #0a2a8f;         /* azul profundo */
  --amf-glass: rgba(6, 22, 60, .42);
  --amf-glass-line: rgba(255, 255, 255, .28);
  --amf-radius: 18px;
  --amf-ease: cubic-bezier(.22, .68, .28, 1);
  --amf-wave-1: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='288' height='40' viewBox='0 0 288 40' preserveAspectRatio='none'><path d='M0,14.0C18,14 18,18.4 36,18.4C54,18.4 54,18 72,18C90,18 90,15.2 108,15.2C126,15.2 126,14 144,14C162,14 162,12.8 180,12.8C198,12.8 198,10 216,10C234,10 234,9.6 252,9.6C270,9.6 270,14 288,14L288,40L0,40Z'/></svg>");
  --amf-wave-2: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='288' height='40' viewBox='0 0 288 40' preserveAspectRatio='none'><path d='M0,26.2C18,26.2 18,24 36,24C54,24 54,20.7 72,20.7C90,20.7 90,19.9 108,19.9C126,19.9 126,20.2 144,20.2C162,20.2 162,19.9 180,19.9C198,19.9 198,20.9 216,20.9C234,20.9 234,24.2 252,24.2C270,24.2 270,26.2 288,26.2L288,40L0,40Z'/></svg>");
  --amf-wave-3: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='288' height='40' viewBox='0 0 288 40' preserveAspectRatio='none'><path d='M0,14.7C18,14.7 18,17.9 36,17.9C54,17.9 54,13.6 72,13.6C90,13.6 90,9.1 108,9.1C126,9.1 126,8 144,8C162,8 162,6.1 180,6.1C198,6.1 198,3.7 216,3.7C234,3.7 234,6.9 252,6.9C270,6.9 270,14.7 288,14.7L288,40L0,40Z'/></svg>");

  /* Proporción real del archivo. build.py la sobreescribe leyendo las
     dimensiones reales de la imagen, para que cambiar el banner no rompa
     la garantía de "cero recorte". El plugin de WordPress además las inyecta
     en línea desde PHP (class-amf-hero-shortcode.php), así que estos valores
     sólo actúan de respaldo si el CSS se carga suelto. */
  --amf-img-w: 1835;
  --amf-img-h: 1007;

  /* --- Presupuesto de recorte ---------------------------------------------
     La caja útil del arte (los cuatro logos con sus textos) medida sobre
     banner-original.png ocupa:

         x   8,5 % .. 92 %   ->  márgenes de 8,5 % (izq.) y 8 % (der.)
         y  29   % .. 62 %   ->  márgenes de 29 % (sup.) y 38 % (inf.)

     El margen más estrecho es el derecho: 8 %. La capa de fondo se amplía
     para que el paralaje no destape los bordes, y el Ken Burns la acerca,
     así que las dos cosas recortan. El reparto por lado es:

         sobre-encuadre 2,2 %  +  zoom 2,4 %  +  paralaje 1,2 %  =  5,8 %

     Con lo que quedan 2,2 puntos de holgura sobre el 8 % disponible.
     Si tocas --amf-over, --amf-shift o el zoom de `amf-ken`, vuelve a
     cuadrar la suma: `qa.py` la comprueba y avisa si te pasas.
     ---------------------------------------------------------------------- */
  --amf-over: 2.2%;          /* sobre-encuadre: margen para el paralaje */
  --amf-shift: 9px;          /* desplazamiento máximo del paralaje */

  /* --- Alto fijo en escritorio --------------------------------------------
     A partir de 1100px el banner mide --amf-frame-h en vez de seguir la
     proporción del archivo. El motivo de que sea seguro está en el reparto
     de márgenes de arriba: en cuanto la caja es MÁS ANCHA que la imagen
     (1835/1007 = 1,8222), `cover` recorta por ARRIBA y por ABAJO, donde el
     arte tiene 31,6 % y 40,3 % libres. Por debajo de 1100px la caja sería
     más angosta que la imagen y el recorte pasaría a los LADOS, que es
     justo donde están los logos, así que ahí manda la proporción natural.

     A 1100px la proporción natural da 603,6px de alto: el cambio de un
     régimen al otro es prácticamente invisible. El límite superior está
     sobre los 2400px de ancho, donde el recorte vertical agotaría el
     margen del arte; si publicas en pantallas más anchas, baja el alto.
     ---------------------------------------------------------------------- */
  --amf-frame-h: 600px;

  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  border-radius: var(--amf-radius);
  background: #0a2a8f;                     /* color de respaldo mientras carga */
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-align: left;
  line-height: 1.35;
}

.amf-hero *,
.amf-hero *::before,
.amf-hero *::after { box-sizing: border-box; }

.amf-hero a { color: inherit; }

/* El frame usa EXACTAMENTE la proporción de la imagen. Como
   `object-fit: cover` sólo recorta cuando la caja no coincide con el
   archivo, mantener la razón exacta garantiza que ningún logo se corte.
   Por eso NO lleva min-height aquí: cualquier mínimo rompería la proporción
   por debajo de 1100px y empezaría a recortar por los lados. El alto fijo
   de --amf-frame-h se aplica sólo a partir de 1100px (ver más abajo). */
.amf-hero .amf-hero__frame {
  position: relative;
  width: 100%;
  aspect-ratio: var(--amf-img-w) / var(--amf-img-h);
  overflow: hidden;
}

/* Alto fijo de escritorio. Sólo desde 1100px: a partir de ahí la caja es más
   ancha que la imagen y `cover` recorta arriba/abajo, que es la franja sin
   información del arte. Por debajo, la proporción natural.
   ------------------------------------------------------------------------
   El recorte vertical NO se reparte a medias: `object-position: 50% 65%` lo
   carga sobre todo en la parte de arriba (cielo), de modo que el arte sube y
   queda sitio abajo para el panel centrado. Con el 50% 50% anterior, la
   cuenta regresiva se montaba encima de "Febrero 25 al 27 de 2027" y la
   píldora de la fecha pisaba el titular del arte.
   Además se recorta el relleno inferior: en una caja de 600px cada píxel
   cuenta para que el panel no invada la franja de los logos. */
@media (min-width: 1100px) {
  .amf-hero .amf-hero__frame {
    aspect-ratio: auto;
    height: var(--amf-frame-h);
  }
  /* Especificidad extra repitiendo la clase en el MISMO elemento (no anidando
     `.amf-hero .amf-hero`, que exigiría dos contenedores y no casaría con
     nada) para ganarle a la regla base `.amf-hero .amf-hero__pic img`, que
     aparece más abajo en este archivo. */
  .amf-hero.amf-hero .amf-hero__pic img { object-position: 50% 65%; }
  .amf-hero .amf-hero__content { padding-bottom: clamp(14px, 1.6vw, 24px); }
  .amf-hero .amf-hero__panel { gap: 12px; }
  .amf-hero .amf-hero__group { gap: 10px; }
  /* La fecha ya va impresa en el arte ("Febrero 25 al 27 de 2027 · Cancún
     Center"), y en una caja de 600px la píldora superior es justo lo que
     hacía que el panel invadiera la franja de los logos. En móvil sí se
     muestra: allí la imagen es pequeña y ese texto no se lee. */
  .amf-hero .amf-hero__eyebrow { display: none; }
}

/* ---------- 2. Imagen de fondo ------------------------------------------ */
/* La capa se amplía un --amf-over por cada lado. Ese sobrante es lo que
   permite mover la imagen con el paralaje sin que asome el borde, y es
   también lo primero que se recorta. El total está presupuestado para no
   alcanzar nunca la caja útil del arte (ver arriba). */
.amf-hero .amf-hero__bg {
  position: absolute;
  inset: calc(-1 * var(--amf-over));
  z-index: 0;
  transform: translate3d(
    calc(-1 * var(--amf-px) * var(--amf-shift)),
    calc(-.6 * var(--amf-py) * var(--amf-shift)),
    0
  );
  transition: transform .5s var(--amf-ease);
  will-change: transform;
}

/* Capa interna: aquí vive el Ken Burns (no se pisa con el parallax de JS) */
.amf-hero .amf-hero__ken {
  width: 100%;
  height: 100%;
  animation: amf-ken 26s ease-in-out infinite alternate;
  /* Centrado a propósito: así el zoom recorta lo mismo por la izquierda que
     por la derecha. Con el origen descentrado al 58 % que había antes, todo
     el recorte se acumulaba en el lado izquierdo y se comía el logo del
     Simposio de Lentes de Contacto. */
  transform-origin: 50% 50%;
}

.amf-hero__pic,
.amf-hero .amf-hero__pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* Salvaguarda para WordPress: si el contenedor del tema o de Elementor
   deforma la caja del banner, `cover` recortaría los logos. El JS lo detecta
   y marca `.amf-hero--contain`; entonces la imagen se ajusta entera y
   aparecen bandas del azul de marca, pero no se corta nada. */
.amf-hero.amf-hero--contain .amf-hero__pic img {
  object-fit: contain;
}

/* El zoom máximo (1,05) forma parte del presupuesto de recorte de arriba:
   no lo subas sin volver a cuadrar la suma. Tampoco lleve `translate`: un
   desplazamiento aquí descuadra el recorte hacia un lado. */
@keyframes amf-ken {
  0%   { transform: scale(1); }
  100% { transform: scale(1.05); }
}

/* ---------- 3. Luz que sigue al cursor ---------------------------------- */
.amf-hero .amf-hero__light {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(38vmax 38vmax at
      calc(50% + var(--amf-px) * 22%)
      calc(46% + var(--amf-py) * 22%),
      rgba(255, 255, 255, .30), rgba(120, 220, 255, .10) 45%, transparent 68%);
  mix-blend-mode: soft-light;
  transition: opacity .45s var(--amf-ease);
}

/* Sólo se enciende si hay puntero real (JS añade `.amf-hero--pointer`) */
.amf-hero--pointer .amf-hero__light { opacity: .85; }

/* Barrido de sol sobre el mar */
.amf-hero .amf-hero__glint {
  position: absolute;
  z-index: 1;
  top: 12%;
  left: -45%;
  width: 45%;
  height: 120%;
  pointer-events: none;
  background: linear-gradient(100deg,
    transparent, rgba(255, 255, 255, .22) 45%, rgba(255, 255, 255, .32) 50%, transparent);
  transform: skewX(-14deg);
  animation: amf-glint 11s var(--amf-ease) infinite;
  mix-blend-mode: overlay;
}

@keyframes amf-glint {
  0%, 62%  { left: -50%; opacity: 0; }
  70%      { opacity: .9; }
  100%     { left: 115%; opacity: 0; }
}

/* ---------- 4. Destellos (chispas de sol) -------------------------------- */
.amf-hero .amf-hero__sparkles {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.amf-hero .amf-hero__sparkles i {
  position: absolute;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px 2px rgba(255, 255, 255, .85);
  opacity: 0;
  animation: amf-twinkle var(--amf-dur, 4s) ease-in-out infinite;
  animation-delay: var(--amf-delay, 0s);
}

@keyframes amf-twinkle {
  0%, 100% { opacity: 0; transform: scale(.4); }
  45%      { opacity: var(--amf-max, .9); transform: scale(1); }
}

/* ---------- 5. Olas animadas -------------------------------------------- */
.amf-hero .amf-hero__waves {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  pointer-events: none;
}

.amf-hero .amf-hero__waves i {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 200%;                       /* dos copias del tile: loop sin salto */
  height: 62px;
  background-repeat: repeat-x;
  background-size: 288px 100%;
  background-position: 0 100%;
  transform: translate3d(
    calc(var(--amf-px) * -8px),
    calc(var(--amf-py) * -4px),
    0
  );
  will-change: transform;
}

.amf-hero .amf-hero__waves i:nth-child(1) {
  height: 74px; opacity: .40;
  background-image: var(--amf-wave-3);
  animation: amf-drift 17s linear infinite;
}
.amf-hero .amf-hero__waves i:nth-child(2) {
  height: 58px; opacity: .55;
  background-image: var(--amf-wave-1);
  animation: amf-drift 12s linear infinite reverse;
}
.amf-hero .amf-hero__waves i:nth-child(3) {
  height: 44px; opacity: .75;
  background-image: var(--amf-wave-2);
  animation: amf-drift 8s linear infinite;
}

@keyframes amf-drift {
  from { translate: 0 0; }
  to   { translate: -288px 0; }        /* = exactamente 1 tile */
}

/* ---------- 6. Scrims para legibilidad ---------------------------------- */
.amf-hero .amf-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(to top,
      rgba(3, 20, 60, .72) 0%,
      rgba(3, 20, 60, .40) 18%,
      rgba(3, 20, 60, .08) 42%,
      rgba(3, 20, 60, 0) 60%),
    linear-gradient(to bottom,
      rgba(3, 20, 60, .42) 0%,
      rgba(3, 20, 60, 0) 26%);
}

/* ---------- 7. Contenido / CTA ------------------------------------------ */
/* El panel se ancla abajo (align-items: flex-end) y se centra en horizontal:
   cuenta regresiva primero, botón debajo. Así no pisa la franja de los logos,
   que queda en el tercio medio central del arte. */
.amf-hero .amf-hero__content {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
  padding: clamp(16px, 3.2vw, 46px);
}

.amf-hero .amf-hero__panel {
  width: 100%;
  /* Sin esto, un hijo con `white-space: nowrap` (la fecha) fija el ancho
     mínimo del flex item y el panel se desborda en pantallas estrechas. */
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}

.amf-hero .amf-hero__group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.amf-hero .amf-hero__group--cta {
  align-items: center;
}

/* El título sólo aparece donde la imagen se recorta y su texto no se lee */
.amf-hero .amf-hero__title { display: none; }

.amf-hero .amf-hero__eyebrow {
  align-self: center;
  margin: 0;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--amf-glass);
  border: 1px solid var(--amf-glass-line);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--amf-ink);
  font-size: clamp(11px, 1.15vw, 13px);
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .22);
}

.amf-hero .amf-hero__title {
  margin: 0;
  color: var(--amf-ink);
  font-size: clamp(19px, 2.6vw, 30px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.015em;
  text-shadow: 0 3px 18px rgba(0, 0, 0, .45);
}

/* ---------- 8. Cuenta regresiva ----------------------------------------- */
/* Es el elemento protagonista del panel: cifras grandes y cajas holgadas,
   centradas bajo la fecha y por encima del botón. */
.amf-hero .amf-count {
  display: flex;
  margin-inline: auto;
  gap: clamp(8px, 1vw, 14px);
  margin-block: 0;
  padding: 0;
  list-style: none;
}

.amf-hero .amf-count li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: clamp(74px, 7.5vw, 104px);
  padding: clamp(9px, 1vw, 14px) clamp(10px, 1.2vw, 18px) clamp(8px, .9vw, 12px);
  border-radius: 14px;
  background: var(--amf-glass);
  border: 1px solid var(--amf-glass-line);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--amf-ink);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .22);
}

.amf-hero .amf-count b {
  font-size: clamp(26px, 3.4vw, 44px);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;   /* evita "salto" de ancho al contar */
  letter-spacing: -.02em;
}

.amf-hero .amf-count span {
  margin-top: 5px;
  font-size: clamp(9px, .8vw, 11px);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--amf-ink-dim);
}

.amf-hero .amf-count__note {
  align-self: center;
  font-size: clamp(11px, 1.1vw, 13px);
  font-weight: 600;
  color: var(--amf-ink-dim);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
}

/* ---------- 9. Botón CTA -------------------------------------------------- */
.amf-hero .amf-btn {
  --amf-mx: 0px;
  --amf-my: 0px;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  align-self: center;
  margin-inline: auto;
  min-height: 58px;
  padding: 0 clamp(24px, 3vw, 34px);
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background:
    linear-gradient(135deg, var(--amf-a1) 0%, #ffb020 38%, #ff8a3d 100%);
  color: #23140a;
  font-family: inherit;
  font-size: clamp(15px, 1.55vw, 18px);
  font-weight: 800;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  transform: translate3d(var(--amf-mx), var(--amf-my), 0);
  transition: transform .28s var(--amf-ease), box-shadow .28s var(--amf-ease),
              filter .28s var(--amf-ease);
  box-shadow:
    0 14px 34px rgba(255, 138, 61, .42),
    0 3px 0 rgba(120, 62, 0, .28),
    inset 0 1px 0 rgba(255, 255, 255, .55);
  -webkit-tap-highlight-color: transparent;
}

/* Halo pulsante (pseudo-elemento, sin nodos extra) */
.amf-hero .amf-btn::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -2;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--amf-a1), #ff8a3d);
  opacity: .55;
  animation: amf-pulse 2.6s ease-out infinite;
  pointer-events: none;
}

@keyframes amf-pulse {
  0%   { transform: scale(1);    opacity: .50; }
  70%  { transform: scale(1.18); opacity: 0; }
  100% { transform: scale(1.18); opacity: 0; }
}

/* Brillo que cruza el botón */
.amf-hero .amf-btn::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -35%;
  z-index: -1;
  width: 30%;
  height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent);
  transform: rotate(18deg);
  animation: amf-shine 3.4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes amf-shine {
  0%, 62% { left: -40%; }
  100%     { left: 115%; }
}

.amf-hero .amf-btn:hover,
.amf-hero .amf-btn:focus-visible {
  filter: saturate(1.12) brightness(1.04);
  box-shadow:
    0 20px 44px rgba(255, 138, 61, .55),
    0 3px 0 rgba(120, 62, 0, .28),
    inset 0 1px 0 rgba(255, 255, 255, .6);
}

.amf-hero .amf-btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.amf-hero .amf-btn__label { position: relative; z-index: 1; }

.amf-hero .amf-btn__arrow {
  position: relative;
  z-index: 1;
  width: 18px;
  height: 18px;
  flex: none;
  transition: transform .3s var(--amf-ease);
}

.amf-hero .amf-btn:hover .amf-btn__arrow,
.amf-hero .amf-btn:focus-visible .amf-btn__arrow { transform: translateX(5px); }

/* Ondas del clic (inyectadas por JS) */
.amf-hero .amf-btn .amf-ripple {
  position: absolute;
  z-index: 0;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  pointer-events: none;
  animation: amf-ripple .6s ease-out forwards;
}

@keyframes amf-ripple {
  to { transform: scale(26); opacity: 0; }
}

.amf-hero .amf-hero__note {
  margin: 0;
  text-align: center;
  font-size: clamp(11px, 1.05vw, 12.5px);
  font-weight: 600;
  color: var(--amf-ink-dim);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .55);
}

.amf-hero .amf-hero__note b { color: var(--amf-a1); }

/* ---------- 10. Animación de entrada ------------------------------------ */
/* El estado inicial sólo se aplica si JS está activo (`.amf-js`), así el
   banner es 100% visible y funcional aunque JS falle o esté bloqueado. */
.amf-hero.amf-js .amf-hero__eyebrow,
.amf-hero.amf-js .amf-hero__title,
.amf-hero.amf-js .amf-count,
.amf-hero.amf-js .amf-btn,
.amf-hero.amf-js .amf-hero__note {
  opacity: 0;
  transform: translateY(16px);
}

.amf-hero.amf-js.is-in .amf-hero__eyebrow,
.amf-hero.amf-js.is-in .amf-hero__title,
.amf-hero.amf-js.is-in .amf-count,
.amf-hero.amf-js.is-in .amf-btn,
.amf-hero.amf-js.is-in .amf-hero__note {
  opacity: 1;
  transform: none;
  transition: opacity .7s var(--amf-ease), transform .7s var(--amf-ease);
}

.amf-hero.amf-js.is-in .amf-hero__eyebrow { transition-delay: .05s; }
.amf-hero.amf-js.is-in .amf-hero__title { transition-delay: .13s; }
.amf-hero.amf-js.is-in .amf-count { transition-delay: .21s; }
.amf-hero.amf-js.is-in .amf-btn { transition-delay: .29s; }
.amf-hero.amf-js.is-in .amf-hero__note { transition-delay: .37s; }

/* ---------- 11. Responsive ----------------------------------------------- */
@media (max-width: 1024px) {
  .amf-hero .amf-hero__waves i:nth-child(1) { height: 58px; }
  .amf-hero .amf-hero__waves i:nth-child(2) { height: 46px; }
  .amf-hero .amf-hero__waves i:nth-child(3) { height: 34px; }
}

/* ======================================================================
   MÓVIL (<= 767px) — la imagen NO se recorta
   ----------------------------------------------------------------------
   A esta anchura no cabe un overlay sobre el banner sin tapar los logos:
   la imagen completa tiene la razón del archivo, o sea 182px de alto a 390px de ancho.
   La solución es apilar: la imagen se ve ENTERA (los cuatro logos
   completos) y el panel se coloca debajo, solapado unos píxeles sobre la
   franja de olas — que es la única zona sin información.
   ====================================================================== */
@media (max-width: 767px) {
  /* El frame deja de ser una caja: sus hijos pasan al flujo del hero. */
  .amf-hero .amf-hero__frame { display: contents; }

  /* Caja de la imagen con la MISMA razón que el archivo → cover no recorta.
     El valor viene de --amf-img-w / --amf-img-h (los inyecta build.py). */
  .amf-hero .amf-hero__bg {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: var(--amf-img-w) / var(--amf-img-h);
    overflow: hidden;
    border-radius: var(--amf-radius) var(--amf-radius) 0 0;
    transform: none;
  }

  /* Sin Ken Burns: escalar la imagen la volvería a recortar. */
  .amf-hero .amf-hero__ken { animation: none; transform: none; }
  .amf-hero .amf-hero__pic img { object-position: 50% 50%; }

  /* Decorado que sólo cobra sentido sobre la imagen a pantalla completa. */
  .amf-hero .amf-hero__sparkles,
  .amf-hero .amf-hero__glint,
  .amf-hero .amf-hero__waves,
  .amf-hero .amf-hero__scrim,
  .amf-hero .amf-hero__light { display: none; }

  .amf-hero .amf-hero__content {
    position: relative;
    z-index: 5;
    height: auto;
    align-items: stretch;
    margin-top: -42px;      /* el panel se solapa sólo sobre el mar */
    padding: 0 12px;
  }

  /* Tarjeta de cristal: el texto queda legible sobre el borde de la imagen */
  .amf-hero .amf-hero__panel {
    width: 100%;            /* la tarjeta ocupa todo el ancho en móvil */
    flex-direction: column;
    align-items: stretch;
    gap: 11px;
    padding: 14px 14px 13px;
    border-radius: 18px;
    background: linear-gradient(180deg,
      rgba(4, 22, 62, .72) 0%, rgba(4, 22, 62, .88) 100%);
    border: 1px solid rgba(255, 255, 255, .18);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    box-shadow: 0 14px 38px rgba(0, 16, 50, .45);
  }
  .amf-hero .amf-hero__group { gap: 9px; }
  .amf-hero .amf-hero__group--cta { align-items: stretch; margin-left: 0; }
  /* La fecha sí puede partirse en varias líneas: en nowrap empujaba el
     panel fuera de pantalla por debajo de ~360px. */
  .amf-hero .amf-hero__eyebrow {
    align-self: stretch;
    white-space: normal;
    text-align: center;
    font-size: 10.5px;
    letter-spacing: .06em;
    padding: 6px 12px;
  }
  .amf-hero .amf-hero__title {
    display: block;
    font-size: clamp(15px, 4.4vw, 20px);
    overflow-wrap: break-word;
  }
  .amf-hero .amf-count li {
    min-width: 0;
    flex: 1 1 0;
    padding: 8px 5px 7px;
    border-radius: 12px;
  }
  /* El contador también crece en móvil, pero el ancho lo fija la tarjeta:
     cuatro cajas a `flex: 1` con cifras algo mayores siguen cabiendo a 320px. */
  .amf-hero .amf-count b { font-size: clamp(19px, 5.4vw, 25px); }
  .amf-hero .amf-count span { letter-spacing: .08em; }
  .amf-hero .amf-btn { align-self: stretch; min-height: 54px; }
  .amf-hero .amf-hero__note { text-align: center; }
}

/* En pantallas muy bajas el solape se reduce para no comerse el mar */
@media (max-width: 359px) {
  .amf-hero .amf-hero__content { margin-top: -28px; }
}

@media (max-width: 380px) {
  .amf-hero .amf-count { gap: 5px; }
  .amf-hero .amf-count span { font-size: 8px; letter-spacing: .06em; }
}

/* ---------- 12. Accesibilidad: movimiento reducido ----------------------- */
@media (prefers-reduced-motion: reduce) {
  .amf-hero *,
  .amf-hero *::before,
  .amf-hero *::after {
    animation: none !important;
    transition: none !important;
  }
  .amf-hero .amf-hero__ken { transform: scale(1.02); }
  .amf-hero .amf-hero__waves { display: none; }
  .amf-hero--pointer .amf-hero__light { opacity: 0; }
  .amf-hero .amf-hero__bg { transform: none; }
}

/* Impresión: limpio y legible */
@media print {
  .amf-hero__waves,
  .amf-hero__light,
  .amf-hero__glint,
  .amf-hero .amf-hero__sparkles { display: none; }
  .amf-hero .amf-hero__scrim { display: none; }
}