/* ==========================================================================
   BioWay - Base
   Reset, tipografia, botones y enlaces. Depende de bioway-tokens.css.
   ========================================================================== */

/* ── Hero: BioWay en general ── */
/* El padding lateral pasa a una variable propia para que la ola de cierre
   pueda cancelarlo exactamente. Con `5vw` no bastaba: `vw` incluye el ancho
   de la barra de scroll y la ola se quedaba corta por la derecha. */
/* Alto del hero (20-ago-2026). Antes: `padding:150px 5vw 0` y sin `min-height`,
   así que el hero medía lo que midiera su contenido (1015-1293px) y se salía de
   la pantalla, y el 150px de arriba no contaba la barra —fija, 98px en
   escritorio— así que el contenido nacía tapado por ella.

   `--nav-alto` es la altura real de la barra en cada breakpoint. El hero se
   ata a la ventana MENOS esa barra, y el padding superior deja de ser un
   número a ojo: es la barra más un respiro. `100svh` y no `100vh` para que la
   barra del navegador móvil no descuadre el cálculo. */
/* El hero deja de reclamar la ventana entera (20-ago-2026). Con `100svh` el
   carrusel empujaba todo lo demás fuera de la primera pantalla y había que
   bajar para intuir que la página seguía. Ahora se ata al contenido con un
   mínimo cómodo: en pantallas altas no se estira de más, y en las bajas
   sigue cabiendo sin recortarse. */
/* `--hero-aire` hacía dos trabajos: era el respiro bajo la barra Y el
   `padding-bottom`, que `.ola` cancela con margen negativo más abajo. Por eso
   estaba clavado en 14px: subirlo para dar aire arriba movía también el
   cierre de abajo. Medido a 1440px: la isla flotante acaba en y=80 y el kicker
   empezaba en y=114 — 34px, de los que sólo 14 eran aire declarado.
   Ahora son dos variables: `--hero-aire` arriba, `--hero-cierre` abajo. */
.hero{--hero-lat:5vw;--nav-alto:98px;--hero-aire:40px;--hero-cierre:14px;
  position:relative;box-sizing:border-box;
  min-height:min(600px,84svh);
  padding:calc(var(--nav-alto) + var(--hero-aire)) var(--hero-lat) var(--hero-cierre);
  overflow:hidden;background:var(--papel);
  display:flex;flex-direction:column;justify-content:center}

/* ══ SISTEMA DE FORMA ORGÁNICA ══
   La curva suave es el rasgo de marca, no un adorno del header. Se repite en
   tres papeles —cenefa, veta y recorte— y su hoja es bioway-formas.css.
   (Este comentario estaba sin cerrar: se comía en silencio el comentario
   siguiente y la frase quedó a medias. Corregido el 19-ago-2026.) */

/* piso de contacto plano, sin nube difuminada */
.escena-media::after{content:"";position:absolute;left:50%;bottom:2%;transform:translateX(-50%);
  width:54%;height:13px;border-radius:50%;background:rgba(45,130,89,.13)}
/* la entrada escalonada da el aire de anuncio, no un salto seco */
.escena.activa .escena-texto>*{animation:entra .6s cubic-bezier(.2,.8,.2,1) backwards}
.escena.activa .escena-texto>*:nth-child(1){animation-delay:.02s}
.escena.activa .escena-texto>*:nth-child(2){animation-delay:.08s}
.escena.activa .escena-texto>*:nth-child(3){animation-delay:.14s}
.escena.activa .escena-texto>*:nth-child(4){animation-delay:.2s}
.escena.activa .escena-texto>*:nth-child(5){animation-delay:.26s}
.escena.activa .escena-media img{animation:entra .7s cubic-bezier(.2,.8,.2,1) .06s backwards}
@keyframes entra{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ── Escena estelar: el anuncio del proyecto en curso ──
   Comparte el fondo claro de las otras dos escenas; lo que la distingue es la
   estructura (hitos, firma de aliados, topónimo de fondo), no el color. */
/* Sin el fondo verde ya no hay recuadro que redondear, y el radio de 28px
   con `overflow:hidden` recortaba las esquinas del contenido: la «U» de «UN
   PROYECTO DE» aparecía cortada por la izquierda.

   El `overflow:hidden` también se fue, el 20-ago-2026. Estaba aquí por el
   topónimo de fondo, que sangra a propósito — pero el topónimo ya vive
   dentro de `.estelar-fondo`, que tiene su propio `overflow:hidden` (más
   abajo, línea ~79). Era una segunda jaula para el mismo pájaro, y esa
   segunda recortaba lo que no debía: la sombra difuminada de las imágenes
   de las tres escenas. `.escena-media img` la declara con 26px de
   desplazamiento y 40 de desenfoque, así que necesita 66px de aire
   alrededor; medido, la escena de la app tenía 0px por la derecha y la de
   Punto BioWay 45 por abajo. La sombra se cortaba en seco contra un borde
   invisible. */
.escenario{border-radius:0}
/* Las columnas de las escenas viven en esta hoja y no en bioway-formas.css,
   que carga después y anulaba el breakpoint móvil sin que se notara. Aquí,
   junto a su media query, se ven las dos reglas de un vistazo. */
.escena{grid-template-columns:1.05fr .95fr}
/* Las columnas de las modalidades viven aquí por el mismo motivo: su hoja
   (bioway-componentes.css) carga después y anulaba este breakpoint. */
.modalidad{grid-template-columns:1fr 1fr}
.escena-estelar{grid-template-columns:1.15fr .85fr;gap:36px;position:relative;padding:0}
/* El anuncio de Iztapalapa va sobre el mismo fondo claro que las otras dos
   escenas (20-ago-2026). Antes pintaba un degradado verde oscuro a toda la
   ventana con un `::before` sobre `.hero`, y el hero cambiaba de color según
   qué escena estuviera activa: el carrusel parpadeaba de claro a oscuro en
   cada giro. Ahora las tres escenas comparten fondo y sólo cambia el
   contenido, que es lo que debe cambiar. */
.hero:has(.escena-estelar.activa) .hero-inner{position:relative;z-index:1}
.estelar-fondo{position:absolute;inset:0;overflow:hidden;z-index:0}
/* el topónimo como textura tipográfica: da escala sin añadir un objeto más.
   `max-width` + `overflow:hidden`: con `nowrap` y anclado a la derecha, entre
   720 y 900px la palabra salía por la izquierda y se veía cortada a la mitad. */
.estelar-marca{position:absolute;right:3%;bottom:4%;font:900 clamp(54px,7.6vw,116px) var(--display);
  letter-spacing:-5px;color:transparent;-webkit-text-stroke:1.5px rgba(45,130,89,.16);
  white-space:nowrap;user-select:none;line-height:1;max-width:94%;overflow:hidden}
/* La portada ya no dibuja esta onda —sobre el fondo claro sólo dejaba una
   mancha verdosa bajo la firma de aliados y se retiró el 20-ago-2026—, pero
   la regla se queda: `propuesta_v2.html` sigue usándola y el comentario de
   `.cierre-cinta` en bioway-formas.css remite a este criterio.

   `height` en px y no en %: esto era `height:62%` y provocaba la asimetría
   móvil/escritorio del 19-ago-2026. En escritorio la escena va a dos
   columnas, el contenido se comprime y ese 62% se calculaba sobre un
   contenedor corto, así que la onda quedaba aplastada; en móvil, a una sola
   columna, la misma regla daba una onda amplia. Con `clamp()` mide igual
   pase lo que pase con el alto del contenedor. */
.estelar-onda{position:absolute;left:0;right:0;bottom:0;width:100%;height:clamp(90px,14vw,190px)}
.escena-estelar>*:not(.estelar-fondo){position:relative;z-index:1}

.estelar-kicker{display:inline-flex;align-items:center;gap:10px;font:800 11.5px var(--cuerpo);
  letter-spacing:3px;text-transform:uppercase;color:var(--medio);margin-bottom:14px}
.estelar-kicker i{width:8px;height:8px;border-radius:50%;background:var(--medio);
  animation:latido 2.4s ease-in-out infinite}

/* Sobre fondo claro los textos vuelven a la paleta normal del sitio. El
   kicker y los acentos siguen en verde de marca, que sobre blanco se lee
   mejor que el verde claro que se usaba contra el degradado oscuro. */
.escena-estelar h1{color:var(--tinta)}
.escena-estelar h1 em{background:var(--grad-marca);-webkit-background-clip:text;background-clip:text;color:transparent}
.escena-estelar .hero-sub{color:var(--texto)}
.escena-estelar .hitos b{color:var(--primary)}
.escena-estelar .hitos span{color:var(--texto)}
.escena-estelar .hitos li::before{background:var(--medio);box-shadow:0 0 0 4px rgba(45,130,89,.14)}
.escena-estelar .hitos li::after{background:linear-gradient(90deg,rgba(45,130,89,.45),rgba(45,130,89,.1))}
/* `.btn-claro` era inerte: pintaba el mismo verde primario y el mismo
   blanco que `.btn-primario` y solo cambiaba la sombra 4px. Residuo de
   cuando el hero tenia fondo verde oscuro.
   Ahora es el CTA de la escena estelar, en ambar. El motivo no es
   decorativo: el hero es todo verdes y papel, y a 40px por encima del
   boton hay cuatro cifras de 42px en casi el mismo verde. El ojo leia la
   cuenta atras, no la llamada. `--amarillo` es el unico token calido del
   sistema y el unico que no se usa en el hero.
   El texto va en `--tinta`, no en blanco: ambar con blanco da 2.1:1
   —ilegible—; con tinta, 9.4:1, que cumple AAA. */
.btn-claro{background:var(--amarillo);color:var(--tinta);
  box-shadow:0 6px 18px rgba(180,120,10,.28), inset 0 1px 0 rgba(255,255,255,.5)}
.btn-claro:hover{background:#FFD264;color:var(--tinta);
  box-shadow:0 12px 30px rgba(180,120,10,.4), inset 0 1px 0 rgba(255,255,255,.6)}
.escena-estelar .enlace-sec{color:var(--primary);border-bottom-color:var(--medio)}
.escena-estelar .enlace-sec:hover{color:var(--medio)}

/* firma de cierre: los tres logos, como créditos de cartel */
.firma{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:22px;
  padding-top:16px;border-top:1px solid rgba(14,79,48,.12)}
.firma span{font:700 10.5px var(--cuerpo);letter-spacing:2.2px;text-transform:uppercase;color:#7C9C8A}
/* Sobre fondo claro la placa deja de ser un rectángulo blanco flotando: los
   logos van directos, que es como se ven en el resto de la página. */
.firma-placa{display:flex;align-items:center;gap:22px;background:transparent;border-radius:0;
  padding:0;box-shadow:none}
.firma img{height:30px;width:auto;display:block}
.firma img[alt="ECOCE"]{height:23px}
.firma img[alt="Recíclalo"]{height:19px}

/* La escena estelar apila seis bloques (kicker, titular, bajada, hitos,
   botones y firma) y era la que estiraba el hero. Aquí van juntos sus
   espacios, para poder ajustar el alto en un solo sitio. */
.escena-estelar .hero-sub{font-size:17px;line-height:1.5;max-width:600px}
.escena-estelar .hitos{margin:16px 0 0}

/* ── Cuenta atras del arranque (20-ago-2026) ──
   Sustituye a la linea de tiempo de tres hitos. El criterio es el mismo del
   resto del hero: sin cajas ni sombras, la jerarquia la dan el tamano y el
   peso. Las cifras van en la display y en `tabular-nums` para que no bailen
   de ancho al cambiar cada segundo. */
.cuenta{margin:18px 0 0}
.cuenta-rotulo{margin:0 0 12px;font-size:14px;color:var(--texto)}
.cuenta-rotulo b{color:var(--primary);font-weight:700}
.cuenta-cifras{list-style:none;display:flex;gap:clamp(18px,2.4vw,30px);
  margin:0;padding:0}
.cuenta-cifras li{display:flex;flex-direction:column;gap:2px;
  /* ancho minimo para que el bloque no se mueva cuando los dias pasan de
     dos cifras a una */
  min-width:52px}
.cuenta-cifras b{font:900 clamp(30px,3.4vw,42px)/1 var(--display);
  color:var(--tinta);letter-spacing:-1px;font-variant-numeric:tabular-nums}
.cuenta-cifras span{font:700 10.5px var(--cuerpo);letter-spacing:2px;
  text-transform:uppercase;color:#7C9C8A}
/* separador entre cifras: una linea fina, no dos puntos parpadeantes */
.cuenta-cifras li+li{position:relative}
.cuenta-cifras li+li::before{content:"";position:absolute;
  left:calc(-1 * clamp(9px,1.2vw,15px));top:6px;bottom:16px;width:1px;
  background:rgba(45,130,89,.16)}

/* al llegar la fecha el bloque se convierte en el aviso de arranque */
.cuenta-arranque{font-size:15px;margin:0}
.cuenta-arranque b{color:var(--primary)}

@media (max-width:560px){
  .cuenta-cifras{gap:16px}
  .cuenta-cifras li{min-width:44px}
  .cuenta-cifras b{font-size:28px}
}
.escena-estelar .hero-ctas{margin:18px 0 0}
.escena-estelar .firma{margin-top:16px;padding-top:12px}


/* rótulo del proyecto estrella: punto latiente */
.rotulo-vivo{color:var(--primary)}
.rotulo-vivo::before{background:var(--grad-marca)}
.rotulo-vivo::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--medio);
  animation:latido 2.4s ease-in-out infinite}

/* los tres hitos: línea de tiempo horizontal */
.hitos{list-style:none;display:flex;gap:0;margin:20px 0 2px;width:100%;max-width:560px}
/* `min-width:0`: sin esto el hito de texto más largo («Inicio de
   septiembre») impone el ancho mínimo del flex-item y empuja la fila más
   allá del max-width, sobre todo entre 1040 y 1200px. */
.hitos li{flex:1;min-width:0;position:relative;padding-top:20px;font-size:12.5px;line-height:1.4;padding-right:14px}
.hitos li::before{content:"";position:absolute;top:0;left:0;width:11px;height:11px;border-radius:50%;
  background:var(--medio);z-index:1;box-shadow:0 0 0 4px rgba(45,130,89,.14)}
.hitos li::after{content:"";position:absolute;top:5px;left:11px;width:calc(100% - 11px);height:1.5px;
  background:linear-gradient(90deg,rgba(45,130,89,.35),rgba(45,130,89,.1))}
.hitos li:last-child::after{display:none}
.hitos b{display:block;color:var(--primary);font-weight:800;font-size:13.5px;margin-bottom:1px}
.hitos span{color:var(--texto)}
@keyframes latido{0%,100%{box-shadow:0 0 0 0 rgba(45,130,89,.5)}70%{box-shadow:0 0 0 8px rgba(45,130,89,0)}}

/* navegación del escenario: barras que se llenan con el tiempo del anuncio */
.escenario-nav{display:flex;justify-content:flex-start;margin-top:18px}
.anuncios-dots{display:flex;gap:10px}
.anuncios-dots button{position:relative;width:74px;height:4px;border-radius:100px;border:none;cursor:pointer;
  background:rgba(45,130,89,.18);padding:0;overflow:hidden}
.anuncios-dots button:hover{background:rgba(45,130,89,.3)}
.anuncios-dots button::after{content:"";position:absolute;inset:0;width:0;background:var(--primary);border-radius:100px}
.anuncios-dots button.activo::after{animation:llenar var(--dur,7s) linear forwards}
@keyframes llenar{from{width:0}to{width:100%}}
/* rótulo tipográfico: una línea con filete, no una píldora */
.rotulo{display:flex;align-items:center;gap:14px;font:700 11.5px var(--cuerpo);letter-spacing:3.2px;
  color:var(--medio);text-transform:uppercase}
.rotulo::before{content:"";width:54px;height:2px;border-radius:2px;background:var(--grad-marca)}
/* El titular baja de 68px a 56px y pierde márgenes (20-ago-2026): a 68 ocupaba
   143px él solo y era lo que más estiraba el hero. A 56 sigue mandando en la
   página y el bloque entra sin que haya que bajar para ver el resto. */
h1{font-family:var(--display);font-weight:900;font-size:clamp(38px,4.2vw,56px);line-height:1.06;
  letter-spacing:-1.6px;color:var(--tinta);margin:14px 0 12px;max-width:900px}
h1 em{font-style:normal;background:var(--grad-marca);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{font-size:18px;color:var(--texto);max-width:660px}
.hero-claims{display:flex;gap:26px;flex-wrap:wrap;margin-top:26px}
.claim{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--tinta)}
.claim svg{flex:none}
.hero-ctas{display:flex;align-items:center;gap:22px;margin:24px 0 6px;flex-wrap:wrap}
/* `text-decoration:none` y el `inline-flex` son de cuando los botones dejaron
   de ser `<button>` y pasaron a ser `<a>` con destino real (20-ago-2026).
   Un enlace subraya por defecto, asi que aparecia una linea blanca bajo el
   texto de cada boton; y sin `inline-flex` el texto se alineaba a la base de
   la linea en vez de al centro de la pildora. Un `<button>` no necesitaba
   ninguna de las dos cosas, por eso la regla original no las traia. */
.btn-primario{background:var(--primary);color:#fff;font:800 15.5px var(--cuerpo);border:none;cursor:pointer;
  text-decoration:none;display:inline-flex;align-items:center;justify-content:center;
  padding:17px 34px;border-radius:100px;min-height:48px;transition:transform .15s ease, box-shadow .15s ease;
  box-shadow:0 8px 22px rgba(14,79,48,.22)}
.btn-primario:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(14,79,48,.3)}
.enlace-sec{color:var(--primary);font-weight:700;font-size:15px;text-decoration:none;border-bottom:2px solid var(--light);padding-bottom:3px}
/* La ola cierra el hero de borde a borde. `.hero` tiene `padding:0 5vw`, así
   que un `width:100%` a secas la dejaba al 90% del ancho: se veía una franja
   verde con dos cortes rectos a los lados, justo debajo del cartel. Los
   márgenes negativos cancelan ese padding — el `calc` es el mismo 5vw. */
/* `width:calc(100% + 2*lat)` con desplazamiento a la izquierda, en vez de
   márgenes negativos a los dos lados: con `margin` negativo el navegador
   resuelve el ancho contra el bloque contenedor y la ola se quedaba ~96px
   corta por la derecha (medido a 1440px). Así el ancho es explícito. */
/* Más baja y más pegada (20-ago-2026): entre alto y margen sumaba 166px de
   puro adorno al final del hero. */
/* La ola cierra el hero, así que tiene que quedar PEGADA a la sección que
   sigue. El `margin-bottom` negativo cancela el `padding-bottom` del hero:
   sin él, ese padding se colaba por debajo de la ola y dejaba una franja de
   papel entre el hero y la cinta de materiales —14px en escritorio y 98px en
   teléfono, donde el padding crece para despejar la barra de navegación—.
   Es el hueco que se veía bajo «RECIBIMOS».

   El `-1px` extra evita el hairline por redondeo en zooms no enteros, el
   mismo criterio que ya usaban `.onda-sep` y `.onda-cierre`. */
.ola{display:block;height:72px;position:relative;z-index:2;
  width:calc(100% + var(--hero-lat) * 2);
  margin:26px 0 calc(-1 * var(--hero-cierre) - 1px) calc(-1 * var(--hero-lat))}
.onda-sep{display:block;width:100%;height:clamp(56px,7vw,110px);margin-bottom:-1px}
.onda-suave{height:clamp(40px,4.6vw,70px);margin-bottom:0;background:var(--papel)}
.onda-cierre{height:clamp(44px,5vw,80px);background:var(--papel);margin:0 0 -1px}
/* El degradado iba de menta a papel para fundirse con `.bot`, que no tiene
   fondo propio. Pero el `clip-path` de bioway-formas.css recorta la seccion
   por abajo, asi que el tramo final del degradado —el que llega a papel— se
   perdia en el recorte: el menta se cortaba en seco a media seccion y volvia
   despues. Medido en la captura del usuario a 1938px: banda de papel de 23px
   entre dos tramos de menta, mas ancha en los bordes que en el centro, que es
   justo la firma de la elipse del clip-path.
   Ahora el degradado termina en menta y el paso a papel lo hace la onda de
   cierre, que es quien tiene esa tarea en todas las demas uniones. */
.franja-menta{background:var(--menta-suave)}

/* --- Responsive --- */
/* ══ Tablet ══ */
@media (max-width:1040px){
  /* La barra encoge a 1040px pero sigue arriba: 68px + respiro. */
  /* 84px, no 68: la barra de este rango mide 84 medidos en el navegador
     —12+12 de padding de la envoltura mas 60 de la isla—. Con 68 el hero
     reservaba 16px de menos y el aire real caia a 18. */
  .hero{--nav-alto:84px;--hero-aire:34px;--hero-cierre:26px}
  .escena,.escena-estelar{grid-template-columns:1fr;gap:32px}
  .escena-media{order:-1}
  .escena-estelar .escena-media{order:0}
  .modalidad{grid-template-columns:1fr;gap:34px}
  .modalidad.invertida .mod-media{order:0}
  .hitos{max-width:none}
  /* las cenefas se afinan: en pantalla estrecha comen demasiado ancho */
  .cenefa{width:clamp(46px,7vw,90px)}
  .veta-app,.veta-traza{opacity:.3}
  /* Con una sola columna la imagen conserva `width:auto` y su `max-height`
     de hasta 430px, así que se salía por la derecha del cartel. En columna
     única manda el ancho, no el alto. */
  /* `calc(100% - 48px)`: la sombra de `.escena-media img` pide 42px de aire
     alrededor —16 de desplazamiento mas 26 de desenfoque—. Con el ancho al
     100% la composicion de la app, que mide 665px en una ventana de 753,
     llegaba al borde y su sombra se cortaba contra el `overflow:hidden` del
     `.hero`, que ese si hace falta: contiene las cenefas y la ola. */
  .escena-media img,.escena-estelar .escena-media img{
    max-width:calc(100% - 48px);width:auto;height:auto;max-height:min(38vh,340px)}
  .escena-media{min-width:0}
}

/* ══ Móvil ══ */
@media (max-width:720px){
  /* La barra ya está al pie desde 820px (ver esa media query). Aquí no se
     vuelve a tocar el hero: sólo lo específico de este ancho. */
  /* en móvil la escena estelar es el único sitio con cenefa: se quitan para
     que el cartel verde respire (aquí sí es un problema de espacio real) */
  .cenefa{display:none}
  .escenario{border-radius:20px}
  .escena-estelar{padding:0}
  .estelar-marca{font-size:clamp(40px,13vw,64px);bottom:2%;right:2%}
  h1{font-size:clamp(31px,8.4vw,42px);letter-spacing:-1.2px}
  .hero-sub{font-size:16px}
  /* los hitos dejan de ser línea horizontal: apilados se leen mejor */
  .hitos{flex-direction:column;gap:14px}
  .hitos li{padding:0 0 0 26px}
  .hitos li::before{top:4px;left:0}
  .hitos li::after{top:14px;left:5px;width:1.5px;height:calc(100% + 14px);
    background:linear-gradient(180deg,rgba(45,130,89,.35),rgba(45,130,89,.08))}
  .escena-estelar .hitos li::after{background:linear-gradient(180deg,rgba(144,238,144,.5),rgba(144,238,144,.12))}
  .hero-ctas{flex-direction:column;align-items:stretch;gap:14px}
  .hero-ctas .btn-primario{width:100%}
  .hero-ctas .enlace-sec{text-align:center}
  .firma{flex-direction:column;align-items:flex-start;gap:12px}
  .firma-placa{gap:16px;padding:11px 16px}
  .firma img{height:24px}
  .firma img[alt="ECOCE"]{height:19px}
  .firma img[alt="Recíclalo"]{height:16px}
  section{padding:56px 5vw}
  .mod-num{font-size:clamp(44px,13vw,64px)}
  .mod-media{min-height:0}
  .mod-media img{max-height:280px}
  /* `gap` y `padding` se fueron a bioway-formas.css el 20-ago-2026: esa hoja
     carga DESPUES que esta y los declaraba sin consulta de medios, asi que
     los de aqui no llegaban a aplicarse nunca (computaban 56px, no 34/26).
     `flex-direction` y `align-items` si ganan —formas.css no los toca— y por
     eso se quedan. Lo mismo con `.aliados .contenedor{gap}`, que perdia
     entero contra el `gap:44px` de formas.css. */
  .cierre{flex-direction:column;align-items:flex-start}
  .aliados .reconocimiento{font-size:13px}
  .anuncios-dots button{width:52px}
  .bot-media .marco{max-width:none}
}

/* ══ Navegación móvil ══
   Antes el menú simplemente desaparecía y no había forma de navegar.
   Ahora la isla se convierte en barra inferior, al alcance del pulgar. */
/* La barra baja al pie a 760px (bioway-nav.css gana por orden de carga). El
   hero deja de restar barra arriba y añade aire abajo para no quedar bajo
   ella. Este ancho, no 820: base mueve la barra a 820 pero nav.css la mantiene
   arriba hasta 760, y ese desajuste dejaba el título tapado entre 760 y 820. */
@media (max-width:760px){
  /* Sin `padding-bottom` extra por la barra: la reserva la hace
     `body{padding-bottom}` en bioway-nav.css, y ahi si queda al final
     de la pagina. Aqui dejaba una franja entre el hero y la cinta. */
  .hero{--nav-alto:0px;--hero-aire:26px;--hero-cierre:26px}
}
/* Aquí vivía un segundo diseño de barra inferior (tira de enlaces
   desplazable con máscara de degradado), a 820px. Retirado el 20-ago-2026:
   `bioway-nav.css` trae el diseño vigente —rejilla de cinco iconos, a 760px—
   y tener dos dejaba el rango 761-820 con el diseño abandonado Y sin la
   reserva de espacio de `body`, así que la barra tapaba el final de la
   página. El propio bioway-nav.css explica por qué se abandonó. */
/* Aquí había un bloque de 420px que ocultaba `.logo` y ajustaba el padding de
   los enlaces de la barra. Retirado el 20-ago-2026: no llegaba a aplicarse
   nunca. `bioway-nav.css` oculta el logo desde 760px y redefine esos enlaces
   como rejilla de iconos, y carga después, así que ganaba siempre.
   Comprobado con `herramientas/quien_gana.js` a 390px. */
/* `prefers-reduced-motion` (20-ago-2026)
   Antes esto era `*{animation:none!important;transition:none!important}`, que
   apagaba TODO el movimiento del sitio. Windows manda esa preferencia con sólo
   desactivar los efectos visuales del sistema —una opción de rendimiento que
   mucha gente tiene puesta sin saberlo— y con ella el carrusel no giraba y la
   cinta de materiales se quedaba quieta. Parecía que las animaciones estaban
   rotas, y sólo estaban obedeciendo.

   Ahora se reduce el movimiento en vez de eliminarlo, que es lo que pide la
   pauta: se conservan la rotación del carrusel y el desplazamiento de la
   cinta —lentos, continuos y predecibles, sin parpadeos ni rebotes— y se
   apaga lo que sí puede molestar: los latidos que pulsan y las entradas que
   desplazan el contenido de golpe. */
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
  html{scroll-behavior:auto}
  .mini-paso{opacity:1;transform:none}
  /* nada de pulsos ni de entradas que saltan */
  .estelar-kicker i,.rotulo-vivo::after{animation:none!important}
  .escena.activa .escena-texto>*,.escena.activa .escena-media img{animation:none!important}
  /* la cinta sigue rodando, a la mitad de velocidad */
  .cinta{animation-duration:60s!important}
}

/* La capa de diseño para teléfono vive al final de bioway-componentes.css,
   que es la ÚLTIMA hoja que carga. Puesta aquí, sus reglas las pisaba
   `section{padding:84px}` y `.mod-media{min-height:380px}` de esa hoja
   posterior — el mismo empalme por orden de carga que ya mordió con
   `.escena` y `.modalidad`. */

/* ══ El call to action del hero (20-ago-2026) ═════════════════════════
   Raúl pidió que destacara más. El botón estaba a la misma altura visual
   que todo lo demás: verde primario sobre fondo claro, sin animación —
   medido, el elemento más animado del hero eran los puntos del carrusel,
   no la llamada a la acción.

   El acento es `--amarillo` (#F5C043), el único token cálido del sistema y
   el único que no se usa en el hero. Sobre un fondo que es todo verdes y
   papel, es la única palanca de contraste que existe sin inventar color.
   Va como filete y como halo, no como fondo: un botón amarillo entero
   rompería la marca. */
/* `.hero-ctas .btn-claro` y no `.btn-claro` a secas: el bloque de abajo
   usa `.hero-ctas .btn-primario` —dos clases— y aplastaba al ambar, que
   iba con una sola. Mismo nivel de especificidad, gana el que va despues. */
.hero-ctas .btn-claro{background:var(--amarillo);color:var(--tinta);
  box-shadow:0 6px 18px rgba(180,120,10,.28), inset 0 1px 0 rgba(255,255,255,.5)}
.hero-ctas .btn-claro:hover{background:#FFD264;color:var(--tinta);
  box-shadow:0 12px 30px rgba(180,120,10,.4), inset 0 1px 0 rgba(255,255,255,.6)}
.hero-ctas .btn-primario{
  font-size:16.5px;padding:18px 38px;
  transition:transform .18s cubic-bezier(.2,.8,.2,1),
             box-shadow .18s ease, background-color .18s ease}
.hero-ctas .btn-primario:hover{transform:translateY(-3px)}
.hero-ctas .btn-primario:active{transform:translateY(-1px)}
.hero-ctas .btn-primario:focus-visible{
  outline:3px solid var(--amarillo);outline-offset:3px}

/* Sin animacion de atencion, y es deliberado: el hero ya tiene tres
   fuentes de movimiento —el punto latiente del kicker, la cuenta atras
   que cambia cada segundo y la barra del carrusel—. Un cuarto pulso no
   suma atencion, la reparte. Y la cuenta atras ya es urgencia real: el
   boton no necesita fingirla teniendo un reloj encima. */


/* ── El trío de flexibles: la imagen de la escena de Iztapalapa ──────
   Sustituye a la ilustración del ciclo. Son los tres envases que el piloto
   recoge, así que la escena enseña el material del que habla en vez de un
   diagrama del proceso.
   Escalonados con la del centro adelantada, y solapados: se leen como un
   grupo posando, no como tres iconos en fila. */
/* El trio se dimensiona por ANCHO, no por alto. Antes cada imagen llevaba
   solo `max-height`, asi que las tres sumaban 719px dentro de un contenedor
   de 488 y se salian 173px por los lados: el `overflow:hidden` de
   `.escenario` —que existe para que las escenas inactivas no asomen durante
   el cruce del carrusel— cortaba en seco a la mascota de la derecha, y se
   veia como recortada contra una pared invisible.
   Con `flex` proporcional cada una toma su parte del ancho disponible y la
   altura sale de la proporcion. `min-width:0` porque un item flex no baja
   de su tamano de contenido si no se le dice. */
/* El `padding` lateral es el aire que necesitan las esquinas giradas: sin
   el, la rotacion saca ~6px fuera de la caja y la mascota de la derecha
   rozaba el borde del escenario. */
.hero-trio{display:flex;align-items:flex-end;justify-content:center;
  width:100%;gap:0;padding:14px 42px 0;box-sizing:border-box;
  overflow:visible}
/* La sombra va en cada IMAGEN, no en el contenedor. Un `filter` crea
   contexto de composicion y recorta a la caja del elemento, asi que con
   `drop-shadow` en el `.trio` todo lo que el hover sacaba fuera se cortaba
   —medido: 20px por la izquierda, 18 por la derecha y 13 por arriba a
   1440px— aunque el `overflow` fuese `visible`. Cada imagen con su sombra
   propia se compone por separado y el giro deja de recortarse.
   El `padding` sube a 24px para dar sitio al recorrido del hover. */
.hero-trio img{display:block;height:auto;min-width:0;filter:drop-shadow(0 18px 26px rgba(13,69,44,.2));
  max-height:clamp(190px,30vh,290px);
  transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.hero-trio img:nth-child(1){flex:0 1 30%;margin-right:-5%;
  transform:rotate(-5deg) translateY(6%);transform-origin:bottom center}
.hero-trio img:nth-child(2){flex:0 1 40%;z-index:1;position:relative}
.hero-trio img:nth-child(3){flex:0 1 35%;margin-left:-5%;
  transform:rotate(5deg) translateY(4%);transform-origin:bottom center}
/* Al pasar por encima el trío se separa un poco, como si se enderezara. */
.escena-media:hover .hero-trio img:nth-child(1){transform:rotate(-9deg) translate(-6px,-6px)}
.escena-media:hover .hero-trio img:nth-child(2){transform:translateY(-9px)}
.escena-media:hover .hero-trio img:nth-child(3){transform:rotate(9deg) translate(6px,-6px)}

/* ── Un solo `<h1>` por página (20-ago-2026) ─────────────────────────
   El carrusel del hero tenía TRES `<h1>`, uno por escena. Visualmente cada
   una es un titular, pero para un buscador la portada declaraba tres temas
   principales compitiendo y ninguno ganaba —y el que coincidía con el
   `<title>` era el segundo, no el primero—. Ahora el `<h1>` es el de la
   escena activa y los otros dos son `<h2>` con el mismo aspecto: cambia la
   semántica, no el diseño. */
.escena h2.h1-visual{font:900 clamp(34px,4.2vw,56px)/1.04 var(--display);
  letter-spacing:-2px;color:var(--tinta);margin:14px 0 12px}
.escena h2.h1-visual em{font-style:normal;color:var(--medio)}