/* ==========================================================================
   BioWay - Componentes
   Modalidades, pasos, chat, marquesina, aliados y cierre.
   ========================================================================== */

/* ── Modalidades (zigzag, una sección por modalidad) ── */
section{padding:84px 5vw}
.contenedor{max-width:1200px;margin:0 auto}
.kicker{font:700 12px var(--cuerpo);letter-spacing:3px;color:var(--medio)}
h2{font-family:var(--display);font-weight:800;font-size:clamp(30px,3.4vw,44px);letter-spacing:-1px;line-height:1.12;color:var(--tinta);margin:14px 0 18px}
.lede{color:var(--texto);font-size:16.5px;max-width:640px}
/* Sin `grid-template-columns` aquí (19-ago-2026): esta hoja carga DESPUÉS
   de bioway-base.css y esta regla —misma especificidad, sin media query—
   anulaba en silencio el `1fr` del breakpoint de 1040px. Resultado medido
   en un móvil de 390px: dos columnas de 147px, con las ilustraciones
   aplastadas a 147×83 y el chat de ejemplo estirado a 120×914. Es el mismo
   fallo que tenía `.escena`. Las columnas las fija base.css, que es quien
   tiene los breakpoints. */
.modalidad{display:grid;gap:56px;align-items:center;max-width:1200px;margin:0 auto}
/* La imagen se adelanta al texto SOLO cuando hay dos columnas: es lo que
   alterna el ritmo izquierda/derecha entre modalidades. En una sola columna
   ese `order:-1` ponía la foto de Trazabilidad ANTES de su título, al revés
   que las demás secciones: se veía la imagen sin saber de qué era. Con la
   consulta de ancho dentro de la propia regla no hace falta anularla luego
   en un media query de otra hoja, que es lo que fallaba. */
@media (min-width:1041px){
  .modalidad.invertida .mod-media{order:-1}
}
.mod-num{display:block;font:900 clamp(56px,7vw,92px) var(--display);line-height:.85;letter-spacing:-4px;
  color:transparent;-webkit-text-stroke:1.5px rgba(45,130,89,.32);margin-bottom:6px;user-select:none}
.modalidad h2{margin-top:16px}
.mod-lista{list-style:none;margin-top:20px;display:flex;flex-direction:column;gap:12px}
.mod-lista li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--texto)}
.mod-lista svg{flex:none;margin-top:3px}
.mod-cta{margin-top:26px}
.mod-media{position:relative;display:flex;align-items:center;justify-content:center;min-height:380px}
/* la atmósfera sustituye a la caja: luz de marca detrás del objeto */
/* onda de acento detrás del objeto: forma con borde, en el idioma de las láminas */
.mod-media::before{content:"";position:absolute;inset:8% 6%;z-index:0;
  background:linear-gradient(150deg,var(--menta) 0%,var(--cian) 100%);opacity:.42;
  border-radius:58% 42% 46% 54% / 44% 56% 44% 56%}
.mod-media::after{content:"";position:absolute;left:50%;bottom:6%;transform:translateX(-50%);
  width:52%;height:14px;border-radius:50%;background:rgba(45,130,89,.12)}
.mod-media .marco{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}
.mod-media img{position:relative;z-index:1;max-height:400px;width:auto;
  filter:drop-shadow(0 26px 44px rgba(13,69,44,.24))}
.m-traza .marco{align-items:stretch}
.m-traza img{max-height:none;width:100%}

/* Aquí vivían `.mini-pasos` y `.mini-paso`, los pasos de trazabilidad. Su
   marcado se perdió al trocear propuesta_v2.html y quedaron sólo estas
   reglas y el observador que las revelaba. Retiradas el 19-ago-2026:
   `.mini-paso` nacía en `opacity:0`, así que restaurar el marcado sin el
   JS habría dejado la sección invisible — una trampa esperando. */
.traza-sello{width:100%;position:relative;z-index:1;display:flex;align-items:center;gap:12px;
  padding:16px 4px 0;font-size:13.5px;color:var(--texto);border-top:1px solid rgba(45,130,89,.18);margin-top:18px}
.traza-sello b{color:var(--primary)}

/* ── Bot de WhatsApp: exclusivo de Iztapalapa, por eso no es una modalidad
   más de la red sino una sección con su propio aire y su propia cinta ── */
/* Sin `--papel-2`: mismo caso que #trazabilidad, la unión con la sección
   anterior no lleva onda y el cambio de tono se veía como un corte. */
.bot{position:relative;overflow:hidden}
/* `clamp()` en px y no `60%`: sobre un contenedor de altura variable el
   porcentaje crece con el contenido, y en móvil —donde la sección se apila
   y mide el triple— la cinta pasaba a ocupar 678px de puro adorno. Mismo
   criterio que `.onda-sep` en bioway-base.css. */
.bot-cinta{position:absolute;left:0;right:0;bottom:0;height:clamp(160px,26vw,340px);z-index:0}
.bot-cinta svg{width:100%;height:100%;display:block}
.bot-rejilla{position:relative;z-index:1}
.bot .kicker{color:var(--medio)}
/* el botón lleva el verde de WhatsApp, no el de marca: es un canal ajeno */
.btn-wa{display:inline-flex;align-items:center;gap:10px;text-decoration:none;background:#25D366;color:#0b3d22;
  box-shadow:0 8px 22px rgba(37,211,102,.32)}
.btn-wa:hover{background:#1fbb59;box-shadow:0 12px 28px rgba(37,211,102,.4)}
.bot-estado{display:block;margin-top:12px;font-size:13px;color:var(--texto);font-weight:600}
.bot-estado::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--amarillo);margin-right:8px;vertical-align:1px}

/* la conversación de ejemplo */
.bot-media .marco{width:100%;max-width:400px}
.chat{background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 20px 44px rgba(13,69,44,.16);
  border:1px solid #E4F1E7}
.chat-cabeza{display:flex;align-items:center;gap:11px;padding:13px 16px;background:var(--primary);color:#fff}
.chat-cabeza img{height:26px;width:auto;filter:brightness(0) invert(1)}
.chat-cabeza b{display:block;font:700 14px var(--cuerpo)}
.chat-cabeza span{font-size:11.5px;color:#A6D9BC}
.burbujas{padding:16px;display:flex;flex-direction:column;gap:10px;background:#F3F7F4}
.burbujas p{max-width:86%;padding:10px 13px;border-radius:14px;font-size:13.5px;line-height:1.45}
.burbujas .ellos{align-self:flex-end;background:#DCF8C6;color:#123d24;border-bottom-right-radius:4px}
.burbujas .nos{align-self:flex-start;background:#fff;color:var(--texto);border-bottom-left-radius:4px;
  box-shadow:0 1px 2px rgba(0,0,0,.06)}

/* --- Pie comun (partes/pie.php) ---------------------------------------
   Rediseno del 20-ago-2026. Lo que se corrigio:

   - Los enlaces legales («Aviso de privacidad», «Eliminar mi cuenta») se
     partian en dos lineas: las tres columnas de enlaces se repartian por
     igual sin mirar cuanto texto llevaba cada una.
   - El reparto 1.4/2/1.1 dejaba 240px muertos a la derecha y descuadraba
     las tres columnas entre si.
   - La linea de cierre no llegaba a los extremos del contenido.

   El criterio es minimalista: una sola familia de tamanos, un solo gris para
   el texto secundario, sin cajas ni sombras. Lo que separa los bloques es el
   espacio, no los bordes. */
.pie{position:relative;background:var(--menta-suave)}
.pie .onda-cierre{position:absolute;top:-1px;left:0;right:0;
  height:clamp(40px,5vw,80px);z-index:1}

/* `auto` en las columnas de enlaces: cada una ocupa lo que necesita su texto
   mas largo, en vez de un tercio fijo que partia «Aviso de privacidad».
   `minmax(0,1fr)` en la marca para que sea ella la que ceda el sobrante. */
/* El padding lateral lo pone la fila; el ancho maximo, su hijo. Las dos
   filas del pie (cuerpo y cierre) comparten el patron para que la linea
   divisoria coincida exactamente con el contenido de arriba. */
.pie-cuerpo{position:relative;padding:clamp(64px,7vw,92px) 5vw clamp(30px,4vw,44px)}
.pie-cuerpo-inner{max-width:1180px;margin:0 auto;
  display:grid;grid-template-columns:minmax(200px,1fr) auto auto;
  gap:clamp(32px,5vw,72px);align-items:start}

.pie-marca img{height:34px;width:auto;display:block}
.pie-marca p{margin:14px 0 0;font-size:14px;line-height:1.6;
  color:var(--texto);max-width:270px}

.pie-enlaces{display:grid;grid-auto-flow:column;grid-auto-columns:max-content;
  gap:clamp(28px,4vw,56px);align-items:start}
.pie h3{font:700 11px var(--cuerpo);letter-spacing:1.8px;text-transform:uppercase;
  color:var(--medio);margin:0 0 14px}

/* `width:max-content` evita que un enlace largo se parta cuando la columna
   se estrecha; el limite lo pone la rejilla, no la palabra. */
.pie-enlaces a,.pie-correo{display:block;width:max-content;max-width:100%;
  font-size:14px;line-height:1.5;color:var(--texto);text-decoration:none;
  padding:5px 0;transition:color .2s ease}
.pie-enlaces a:hover,.pie-correo:hover{color:var(--primary)}
.pie-correo{font-weight:600;word-break:break-word}

/* Redes: circulos discretos, sin caja blanca ni sombra. El hover es el unico
   momento en que aparece el color. */
.pie-redes{display:flex;gap:8px;margin-top:18px}
.pie-redes a{display:grid;place-items:center;width:34px;height:34px;
  border-radius:50%;color:var(--medio);text-decoration:none;font-size:14px;
  border:1px solid rgba(45,130,89,.22);background:transparent;
  transition:background .2s ease,color .2s ease,border-color .2s ease}
.pie-redes a:hover{background:var(--primary);color:#fff;border-color:var(--primary)}

/* La linea de cierre va sobre un envoltorio de ancho completo, para que
   arranque y termine donde lo hace el contenido de arriba. El borde se pinta
   en un hijo con el mismo `max-width` que `.pie-cuerpo`: asi los dos bloques
   comparten margen y la linea no queda ni corta ni pegada al filo. */
.pie-abajo{width:100%;padding:0 5vw 30px}
.pie-abajo-inner{box-sizing:content-box;max-width:1180px;margin:0 auto;padding-top:20px;
  border-top:1px solid rgba(45,130,89,.14);
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:8px 20px;font-size:12.5px;color:#7C9C8A}

@media (max-width:1040px){
  /* La marca arriba, y los dos bloques de abajo compartiendo fila. */
  .pie-cuerpo-inner{grid-template-columns:1fr auto;gap:34px 40px}
  .pie-marca{grid-column:1 / -1}
  .pie-marca p{max-width:420px}
}
@media (max-width:720px){
  /* El padding de arriba tiene que dejar sitio a la onda del pie, que es
     `position:absolute` sobre el borde superior y mide 24px a este ancho.
     Con 34px de padding solo quedaban 10px de aire real entre la curva y el
     logotipo, y el contenido se veia pegado al borde. 24 de onda + 26 de
     aire = 50. Antes no se notaba porque el padding era de 64px. */
  .pie-cuerpo{padding:50px 20px 24px}
  .pie-cuerpo-inner{grid-template-columns:1fr;gap:24px}
  /* Dos columnas de verdad, no dos columnas con una fila huerfana.
     Medido a 390px antes de tocar: los tres grupos daban 165.5+165.5 en la
     fila 1 —«Modalidades» 121px de alto y «Red» 90— y «Legal» caia sola a la
     fila 2 con 24px de row-gap. Resultado: 235px de alto, y a la derecha de
     «Legal» una columna entera vacia de 166px. Era la banda blanca mas
     grande de la pagina despues de la del final.
     Con «Modalidades» ocupando las dos filas de la izquierda, «Red» y
     «Legal» se apilan a la derecha y no sobra nada: 198px.
     OJO: depende de que «Modalidades» sea el PRIMER grupo y el mas alto en
     partes/pie.php. Si se reordenan los grupos hay que revisar esto. */
  .pie-enlaces{grid-auto-flow:row dense;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-columns:auto;gap:18px;align-content:start}
  .pie-enlaces>div:first-child{grid-row:span 2}
  /* La onda del pie se acorta como las demas. Su regla de la linea 108 no
     tiene consulta de medios y gana por especificidad al `.onda-cierre`
     movil, asi que computaba 40px cuando las otras miden 24-38. */
  .pie .onda-cierre{height:clamp(24px,3.4vh,38px)}
  /* Esto reservaba 84px «para despejar la barra de nav». Pero esa reserva ya
     la hace `body{padding-bottom:82px}` en bioway-nav.css:103, y las dos se
     suman: 166px de blanco al final de la pagina para una barra de 82.
     Verificado a 390px, ambos valores computaban a la vez. Aqui solo queda
     el aire propio del pie, mas el area segura del telefono. */
  .pie-abajo{padding-bottom:calc(20px + env(safe-area-inset-bottom))}
  .pie-abajo-inner{justify-content:center;text-align:center}
}

/* ══════════════════════════════════════════════════════════════════════
   TELÉFONO: UN DISEÑO PROPIO, NO EL DE ESCRITORIO APLASTADO (19-ago-2026)

   Hasta aquí el móvil heredaba las medidas de escritorio y sólo apilaba
   las columnas. Medido en un teléfono de 390px: **7.194px de alto**, unos
   nueve scrolls de pantalla completa, con `padding:84px` arriba y abajo de
   cada sección — 168px de aire entre bloque y bloque, que en una pantalla
   de 780px es una quinta parte del viaje.

   Lo que cambia aquí no es el tamaño de las cosas, es su ritmo:

   · El aire se reparte por proporción de pantalla, no en píxeles fijos.
     Una separación de 84px es generosa en un monitor y desmesurada en un
     teléfono; `clamp()` con `vh` la ata a la pantalla real.
   · La escala tipográfica se comprime: en escritorio el salto de titular a
     cuerpo puede ser de 3×, en un ancho de 390px eso obliga a cortar
     palabras. Aquí es de ~2×.
   · Los bloques de contenido pierden el marco y ganan el borde de la
     pantalla: en un teléfono el margen lateral ya lo pone el dispositivo.
   · Lo que se toca crece hasta 48px de alto —el mínimo cómodo para un
     pulgar— aunque en escritorio sea más chico.
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width:720px){
  /* ── el ritmo vertical ── */
  /* De `clamp(38px,7vh,60px)`. El 7vh de una ventana de 640 da 44.8, pero
     el tope de 60 mandaba, asi que entre dos secciones seguidas quedaban
     120px de blanco —45 abajo de una mas 45 arriba de la otra, medidos en
     el navegador— sin nada dentro. Con 40 de tope pasan a 60px, que se
     siguen leyendo como cambio de bloque; donde ademas hay onda separadora,
     la onda ya hace el trabajo. Afecta a las cinco paginas que comparten
     estas hojas, y ahi tambien es una mejora: se verifico una por una. */
  section{padding:clamp(30px,4.4vh,40px) 20px}
  /* Esto era `padding:96px 20px 0`, tres literales que pisaban en silencio
     todo el sistema de tokens del hero (`--nav-alto`/`--hero-aire`, definidos
     en bioway-base.css). Los 96px reservaban sitio para la barra SUPERIOR,
     pero a este ancho la barra está ABAJO —bioway-nav.css la baja a 760px—,
     así que eran 70px de vacío puro sobre el kicker. Medido a 390px: el hero
     computaba `padding-top:96px` cuando sus tokens pedían 26.
     Ahora usa los tokens, igual que el bloque de 380px de más abajo. */
  .hero{--hero-lat:20px;padding-top:var(--hero-aire);padding-bottom:var(--hero-cierre)}
  /* las ondas separadoras se acortan: a este ancho son un adorno que
     consume el mismo alto que un párrafo entero */
  .onda-sep{height:clamp(28px,4vh,44px)}
  .onda-suave,.onda-cierre{height:clamp(24px,3.4vh,38px)}
  .ola{height:clamp(52px,7vh,80px);margin-top:clamp(20px,3vh,34px)}

  /* ── la escala tipográfica, comprimida ── */
  h2{font-size:clamp(24px,6.4vw,30px);letter-spacing:-.7px;line-height:1.18}
  .lede{font-size:15px;line-height:1.6}
  .kicker{font-size:10.5px;letter-spacing:2px}

  /* ── los bloques respiran con el borde de la pantalla ── */
  .modalidad{gap:22px}
  /* `min-height:380px` es una medida de escritorio: en móvil reservaba ese
     alto aunque la ilustración midiera la mitad, y multiplicado por cuatro
     secciones son ~800px de vacío. Aquí la caja la define la imagen. */
  .mod-media{min-height:0}
  .mod-media img{max-height:min(34vh,300px);width:auto;max-width:100%}
  /* el marco decorativo sobra: en móvil la ilustración ya está sola */
  .mod-media .marco{padding:0;background:none;border:none;box-shadow:none}

  /* ── lo que se toca ── */
  .btn-primario,.btn-claro,.enlace-sec{min-height:48px;display:inline-flex;
    align-items:center;justify-content:center}
  .mod-cta{display:flex;flex-direction:column;align-items:stretch;gap:10px}
  .mod-cta .btn-primario{width:100%}
  .bot-estado{text-align:center}

  /* Aqui vivia `.pie-rejilla{grid-template-columns:1fr;gap:26px}`, del pie de
     cuatro columnas que hubo antes. Retirada el 20-ago-2026: ese selector no
     existe en partes/pie.php, que usa `.pie-cuerpo-inner`. Regla muerta. */
}

/* ── Teléfono chico: el contenido manda sobre el adorno ── */
@media (max-width:380px){
  section{padding:clamp(32px,6vh,48px) 16px}
  /* La barra está al pie a este ancho: el hero usa la ventana y deja aire
     abajo para no quedar bajo ella. Los tokens vienen de bioway-base.css;
     aquí sólo el lateral, más chico. `padding-bottom` con la barra flotante. */
  .hero{--hero-lat:16px;padding-top:var(--hero-aire);padding-bottom:var(--hero-cierre)}
  h1{font-size:clamp(27px,8vw,34px)}
  h2{font-size:22px}
  /* sin recuadro: la escena no lleva caja propia (20-ago-2026) */
  .escena-estelar{padding:0}
  /* el topónimo de fondo se retira: a este ancho compite con el titular
     en vez de acompañarlo */
  .estelar-marca{display:none}
}

/* ── El hero de teléfono cabe en la ventana (20-ago-2026) ─────────────
   Raúl pidió que el hero se vea entero sin scroll en un teléfono, contando
   la barra de URL del navegador. El presupuesto real es más corto de lo que
   parece: en un teléfono de 664px de alto, la barra del navegador se lleva
   ~85px y la barra inferior del sitio otros 82, así que quedan ~495px de
   ventana útil, no 664.

   Medido antes de tocar nada, a 390px: el texto ocupaba 422px, el hueco
   entre texto e imagen 52 y la ilustración 306 — 780px sólo de escena. La
   causa es que `gap` e imagen conservan su medida de escritorio cuando la
   rejilla ya cayó a una columna: en dos columnas el gap es horizontal y no
   cuesta alto, apilado sí.

   El recorte va al adorno, no al contenido: la ilustración sigue estando
   —es el axolotl de la campaña— pero a la medida que le toca apilada, y el
   aire entre piezas se aprieta. Ni el titular ni el contador ni el botón
   pierden tamaño: son lo que la persona vino a leer. */
@media (max-width:720px){
  /* El `min-height` es una reserva de escritorio: con la escena apilada el
     contenido ya define el alto, y esos 468px sólo añadían vacío. */
  .escenario{min-height:0}
  .escena{gap:22px}
  /* La ilustración, a medida de teléfono. `height` además de `max-height`
     porque el SVG escala por la caja, no por su lienzo. */
  .escena-media img,.escena-estelar .escena-media img{max-height:190px}
  /* Las dos llamadas a la acción, apiladas y juntas. */
  .hero-ctas{gap:10px}
  /* La firma de aliados cierra el hero: se aprieta sin encoger los logos,
     que son marcas de terceros y tienen su tamaño mínimo legible. */
  .firma{gap:10px}
  .firma-placa{padding:9px 14px}
}

/* El aire ENTRE las piezas del texto del hero. Medido a 390px sumaba 92px
   —28 bajo el kicker, 12, 18, 18 y 16—, calibrados para un titular de
   escritorio con mucho espacio alrededor. En una ventana de ~495px útiles
   son casi una quinta parte del presupuesto gastada en separación.
   Se reparten a la mitad: los bloques siguen leyéndose como bloques
   distintos, que es para lo que estaba el margen. */
@media (max-width:720px){
  .escena-texto h1{margin-top:8px;margin-bottom:6px}
  .escena-texto .cuenta{margin-top:10px}
  .escena-texto .hero-ctas{margin-top:10px}
  .escena-texto .firma{margin-top:10px}
}

/* ── Ventana baja: el último tramo (20-ago-2026) ──────────────────────
   Con la compresión de arriba el titular, el contador y el botón caben en
   cualquier teléfono —comprobado hasta una ventana de 480px—, pero la firma
   de aliados se salía por ~30px en pantallas cortas (un iPhone SE deja 472px
   útiles y la firma cerraba en 502).

   `max-height` en vez de `max-width`: el problema es de alto de ventana, no
   de ancho de pantalla — un teléfono apaisado y uno pequeño en vertical
   sufren lo mismo. Se recorta la ilustración y el aire, no las cifras del
   contador ni el botón: son la razón de ser del hero. */
@media (max-width:720px) and (max-height:600px){
  .escena-media img,.escena-estelar .escena-media img{max-height:140px}
  .escena{gap:16px}
  /* El subtítulo pasa a dos líneas en vez de tres: es la frase de apoyo,
     no el titular, y a esta altura de ventana cada línea cuesta 25px. */
  .escena-texto .hero-sub{margin-bottom:0;font-size:14.5px;line-height:1.45}
  /* El botón y el enlace secundario, apilados y pegados. El botón conserva
     sus 48px de alto: es el objetivo táctil mínimo y no se toca. */
  .escena-texto .hero-ctas{gap:6px}
  .escena-texto .enlace-sec{padding-top:2px;padding-bottom:2px}
  /* `margin-top` del titular: el bloque general pone 8px pero aquí gana
     la regla de 720px de base.css, que es más específica. */
  .escena-texto h1{margin-top:4px;margin-bottom:4px}
  .escena-texto .firma{margin-top:6px}
  .firma-placa{padding:7px 12px}
  .firma img{height:21px}
  .firma img[alt="ECOCE"]{height:17px}
  .firma img[alt="Recíclalo"]{height:14px}
}

/* ── El ritmo vertical del telefono (20-ago-2026) ─────────────────────
   Raul pidio una pasada para bajar altura y quitar los blancos, que es lo
   que peor se ve. Medida la portada a 390px con ventana de 640: 5749px de
   alto, con 918px repartidos en 14 bandas verticales SIN contenido —el 16%
   de la pagina—. Casi todas salian del mismo sitio: cada `section` ponia
   45px arriba y 45 abajo, asi que entre dos secciones seguidas habia 90px
   de blanco. Aqui se corrigen esas bandas y el ritmo interior de las
   modalidades, que conservaba los margenes calibrados para escritorio. */
@media (max-width:720px){
  /* Los numeros 01-04. Son `aria-hidden`, o sea que ya estaban declarados
     como adorno, y ocupan 48px de flujo cada uno: 192px en total para
     cuatro cifras decorativas. En escritorio acompanan al titular; en un
     telefono, apilados sobre el, solo empujan el contenido hacia abajo. */
  .mod-num{display:none}
  /* El `margin-top` del titulo existia para separarlo del numero. Sin
     numero, era un hueco sin causa. */
  .modalidad h2{margin-top:0;margin-bottom:12px}
  /* Los huecos entre las piezas de cada modalidad sumaban 94px (14+16+18+
     20+26), medidos identicos en las cuatro. Se reparten a la mitad: los
     bloques se siguen leyendo como bloques distintos, que es para lo que
     estaba el margen. */
  .mod-lista{margin-top:12px}
  .mod-cta{margin-top:16px}
  .traza-sello{margin-top:12px;padding-top:12px}
  .escenario-nav{margin-top:10px}
  /* El toponimo de fondo del hero. Se ocultaba solo por debajo de 380px;
     entre 381 y 720 seguia compitiendo con el titular. Es absoluto, no
     ahorra altura: es lectura. */
  .estelar-marca{display:none}
}

/* ── El hero de telefono, al minimo (20-ago-2026) ─────────────────────
   Raul pidio bajar mas la altura quitando lo que no aporte, manteniendo el
   minimalismo y el mensaje. Medido el hero a 390px: 807px, de los que 484
   eran texto. Se retiran las dos piezas que no llevan informacion nueva:

   · `.hero-sub` (77px, tres lineas) — «El despliegue mas grande de BioWay
     hasta hoy: contenedor fijo, circuito de flexibles y campana en calle».
     Enumera las modalidades que la pagina explica una por una mas abajo,
     con su propia seccion cada una.
   · `.firma` (78px) — «Un proyecto de» con los tres logotipos. Los mismos
     tres estan en la seccion de aliados, y ahi con su rotulo propio.

   Queda lo que la persona vino a ver: donde es, que pasa, cuando empieza y
   como sumarse. En escritorio siguen las dos: ahi el espacio sobra y la
   firma da respaldo institucional en el primer golpe de vista. */
@media (max-width:720px){
  .escena .hero-sub,
  .escena-estelar .firma{display:none}
  /* Y en las OTRAS dos escenas tambien. El carrusel reserva el alto de la
     escena mas alta —si no, la pagina daria un salto al cambiar de una a
     otra—, asi que recortar solo la activa no baja el hero ni un pixel:
     medido, la escena de la app se quedaba en 433px y seguia mandando.
     La lista de tres ventajas de esa escena se va por lo mismo que el
     subtitulo: es material que la seccion #app desarrolla entera. */
  .hero-claims{display:none}
}

/* ── Los mockups recortados de telefono (20-ago-2026) ─────────────────
   `.mod-media img{max-height:min(34vh,300px)}` se calibro para las
   composiciones HORIZONTALES de tres telefonos: ahi el tope de altura no
   estorba porque la imagen es ancha y baja. Los recortes de movil son
   VERTICALES (945x1518, proporcion 1:1.6), asi que topaban por el alto
   —217.6px con una ventana de 640— y su ancho se desplomaba a 135px. La
   imagen quedaba mas pequena que el problema que venia a resolver.
   Aqui el tope se quita y manda el ancho del contenedor. Eso solo funciona
   porque el recorte se hizo casi cuadrado (1:0.99): un recorte del telefono
   ENTERO era 1:1.6, y a 350px de ancho pedia 560 de alto —la pagina subia de
   4679 a 5430px, deshaciendo las dos tandas anteriores—. Se recorta el tramo
   superior, que es donde esta la informacion; el corte de abajo se lee como
   un telefono que asoma, no como una imagen mutilada. */
@media (max-width:720px){
  .marco picture img{max-height:none;width:100%;height:auto;display:block}
}


/* ══ Preguntas frecuentes (20-ago-2026) ══════════════════════════════
   Contenido real al final de la portada y de /flex. Son `<details>`: se
   leen plegadas, ocupan poco y quien quiera abre la que le interesa. El
   texto está en el HTML aunque estén cerradas, así que un buscador lo lee
   entero — a diferencia de un acordeón hecho con JavaScript.
   Sin cajas: filete arriba y espacio, como el resto del sitio. */
.faq{padding:clamp(30px,4.4vh,40px) 20px}
.faq h2{margin:6px 0 22px}
.faq-p{border-top:1px solid #E8F2EA;padding:0}
.faq-p:last-of-type{border-bottom:1px solid #E8F2EA}
.faq-p summary{
  cursor:pointer;list-style:none;padding:16px 34px 16px 0;position:relative;
  font:700 16px var(--cuerpo);color:var(--tinta);transition:color .16s}
.faq-p summary::-webkit-details-marker{display:none}
.faq-p summary:hover{color:var(--medio)}
/* El signo: una cruz que gira a menos al abrir. Dos trazos, sin icono. */
.faq-p summary::before,.faq-p summary::after{
  content:"";position:absolute;right:6px;top:50%;background:var(--medio);
  transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.faq-p summary::before{width:14px;height:2px;margin-top:-1px}
.faq-p summary::after{width:2px;height:14px;margin-top:-7px;right:12px}
.faq-p[open] summary::after{transform:rotate(90deg)}
.faq-p[open] summary{color:var(--medio)}
.faq-p p{margin:0 0 18px;padding-right:34px;
  font-size:15px;line-height:1.65;color:var(--texto)}
.faq-p p a{color:var(--medio);font-weight:600}
@media (max-width:720px){
  .faq-p summary{font-size:15px;padding:14px 30px 14px 0}
  .faq-p p{font-size:14.5px;padding-right:0}
}