/* ============================================================
   COMUNICAR MEJOR — Estilos de móvil/tablet, aparte de landing.css.

   Por qué existe este archivo: todas las reglas de acá abajo son
   @media(max-width:...). Antes vivían mezcladas dentro de landing.css,
   compartiendo los mismos nombres de clase que las reglas de desktop —
   y cuando dos reglas con la misma especificidad apuntan al mismo
   selector, gana la que esté más abajo en el archivo, sin importar el
   media query. Eso nos mordió más de una vez (el alto de la Escena 0,
   la opacidad de .cascade) porque una regla de desktop, escrita más
   abajo por casualidad, terminaba ganándole a un ajuste de móvil escrito
   más arriba.

   Este archivo se carga DESPUÉS de landing.css en el <link> de cada
   página. Así, no importa el orden interno: para cualquier selector que
   aparezca acá, esta es siempre la última palabra en pantallas chicas.

   Se organiza seguendo el mismo orden de escenas/secciones que
   landing.css, para que sea fácil encontrar el equivalente de cada
   bloque. ============================================================ */

/* ---------- Formulario (index.html) — 3 capturas en una sola fila, más
   chicas, en vez de las 4 en cuadrícula 2x2 (se veían muy grandes). ---------- */
@media(max-width:640px){
  .fs-thumb-desktoponly{ display:none; }
  .fs-thumb-mobonly{ display:block; }
  .fs-thumbs{ flex-wrap:nowrap; }
  .fs-thumb{ flex:1 1 0; }
}

/* ---------- Escena 0 · Hallazgos (columnas del hallazgo) ---------- */
@media(max-width:760px){ .lh-cols{ grid-template-columns:1fr; gap:22px; min-height:0; } }

/* ---------- ESCENA 0 EN MÓVIL — fluye con scroll normal (sin clavar a
   100vh ni franjas fijas): logo arriba, saludo debajo, pestañas solo con
   el número (con "Hallazgo N" aparte como rótulo), contenido centrado con
   más aire entre el titular y el texto del hallazgo, y al final la franja
   de oportunidad como parte normal del flujo — la persona sigue bajando
   con scroll normal para verla. ---------- */
@media(max-width:760px){
  /* Portada que se desvanece al elegir "Hallazgo 4" o al primer intento
     de scroll (ver initHallazgoIntroTransition en landing.js) — no se
     anima ningún scroll, solo aparece/desaparece con fundido. */
  #scene-0{ transition: opacity .4s ease; }
  #scene-0.lp-intro-exit{ opacity:0; pointer-events:none; }

  /* Alto mínimo de una pantalla completa: el fondo negro de esta primera
     vista nunca deja ver la escena siguiente por debajo hasta que la
     persona de verdad haga scroll (si el hallazgo es largo, crece más). */
  .lp-res-hero{ height:auto; min-height:100vh; overflow:visible; padding: clamp(28px,7vh,44px) 0 clamp(40px,8vh,56px); }
  .lp-res-hero .shell{ height:auto; }

  .lp-res-top{ flex-direction:column-reverse; align-items:center; gap:14px; text-align:center; }
  .lp-res-who{ align-items:center; }
  #lp-saludo{ max-width:280px; padding-top:0; text-align:left; }

  .lp-tab-prefix{ display:none; }
  .lp-tab{ padding:9px 18px; font-size:15px; }
  .lp-tab-label{ display:block; text-align:center; margin-top:14px; font-size:13px; font-weight:600; color: var(--on-dark-mut); }

  .lp-hallazgo{ overflow:visible; margin-top: clamp(24px,4.5vh,36px); }
  .lh-title-wrap{ height:auto; }
  .lh-title{ font-size: clamp(24px,6.5vw,30px); }
  /* Más separación entre el titular del hallazgo y el texto de abajo. */
  .lh-cols{ text-align:center; margin-top: clamp(28px,5vh,40px); }
  .lh-col .lp-conf-lbl{ text-align:center; }

  /* Fija abajo desde el inicio (para que el cambio de pestaña nunca la
     mueva) y desaparece con un fundido apenas la persona hace scroll (ver
     initOportRevealMobile en landing.js). */
  .lp-oport{ position:fixed; left:0; right:0; bottom:0; z-index:40; margin:0;
    opacity:1; transition:opacity .4s ease; }
  .lp-oport.lo-hidden{ opacity:0; pointer-events:none; }
  .lo-inner{ display:flex; flex-direction:row; align-items:center; text-align:left;
    max-width:none; width:100%; border-radius:0; gap:14px; padding: 16px var(--gutter); }
  .lo-inner .badge{ width:46px; height:46px; border-radius:12px; margin-top:0; }
  .lo-inner .badge img{ width:25px; }
  .lo-line1{ white-space:normal; font-size:14.5px; }
  .lo-line2{ display:none; }

  .lp-scrollhint{ display:none; }
}

/* ---------- ESCENARIO (scrollytelling) EN MÓVIL — no hay scroll-jacking
   (ver initSceneTransitions en landing.js): cada escena fluye en el orden
   normal del documento, con su propio alto de contenido en vez de quedar
   clavada a 100vh. El contenido ya no se anima por escena (cascade
   escalonado); en su lugar, cada bloque .cascade se trata igual que un
   .rv genérico — aparece con un fundido simple al entrar en pantalla (ver
   initReveal en landing.js). ---------- */
@media(max-width:760px){
  .stage{ position:static; height:auto; overflow:visible; }
  .scene{ position:relative; opacity:1 !important; }
  .scene-content{ height:auto; }
  /* Sin el pin a 100vh, cada escena ya no trae aire propio arriba/abajo —
     quedaban pegadas unas a otras. Se le da un respiro parejo a todas
     (la Escena 0 ya tiene su propio padding especial, por eso se excluye). */
  .scene-content:not(.lp-res-hero){ padding-block: clamp(56px,10vh,88px); }
  .cascade{ transition: opacity .8s ease, transform .85s cubic-bezier(.16,1,.3,1); }
  .cascade.v{ opacity:1; transform:none; }
}

/* ---------- "MOMENTOS" (pantallas negras de una sola frase, ver
   initMomentSessionFlow en landing.js) — cada uno ocupa una pantalla
   completa con el mismo ícono girando de la Escena 0, y no tiene scroll
   propio: el primer intento de bajar dispara el fundido hacia la
   siguiente sesión. ---------- */
@media(max-width:760px){
  .pp-moment{ display:flex; align-items:center; justify-content:center; text-align:center;
    min-height:100vh; background: var(--ink); padding-block: clamp(72px,13vh,110px); }
  .pp-moment-motif{ display:flex; justify-content:center; margin-bottom: clamp(32px,5.5vh,50px); }

  /* Escena 3 y Escena 8 también son "momentos" (ver blocks[] en
     initMomentSessionFlow, landing.js): aunque son .scene normales del
     scene-track y no .pp-moment, deben llenar una pantalla completa y
     centrarse igual — .lp-familiar-scene ya las centra con flex, acá solo
     falta el alto mínimo. Tamaños de las páginas 3, 5 y 7 del PDF "4
     momentos", proporcionales y anclados a su diseño de 360px de ancho
     (a 360px dan el valor exacto del PDF; en teléfonos más anchos crecen
     con la pantalla, con un tope antes del corte a desktop). El texto de
     apoyo (fs-sub) se subió de 15 a 16pt para que se lea mejor. */
  #scene-3-content, #scene-8-content{ min-height:100vh; }
  #scene-3-content .fs-title{ font-size: clamp(24px, 6.667vw, 28px); }
  #scene-3-content .fs-sub{ font-size: clamp(16px, 4.444vw, 18px); line-height:1.3; margin-top: clamp(28px, 7.778vw, 32px); }
  #scene-8-content .fs-title{ font-size: clamp(24px, 6.667vw, 28px); }
  #ppMomentD .fs-title{ font-size: clamp(22px, 6.111vw, 26px); }
}

/* Franja naranja de atajo por sesión (ver initMomentSessionFlow en
   landing.js): fija abajo mientras la sesión activa tenga un siguiente
   momento, con fundido de entrada/salida en vez de aparecer/desaparecer
   en seco. El botón dispara el mismo fundido a negro que ya usa el
   scroll — es un atajo, no hace falta bajar hasta el final. */
@media(max-width:760px){
  .pp-session-cta{ display:flex; align-items:center; justify-content:space-between; gap:14px;
    position:fixed; left:0; right:0; bottom:0; z-index:40; background: var(--naranja);
    padding: 14px var(--gutter); opacity:0; pointer-events:none; transition: opacity .4s ease; }
  .pp-session-cta.on{ opacity:1; pointer-events:auto; }
  .pp-session-cta-inner{ display:flex; align-items:center; gap:12px; min-width:0; flex:1 1 auto; }
  .pp-session-cta .badge{ width:28px; height:28px; border-radius:8px; background: var(--ink); flex:0 0 auto;
    display:flex; align-items:center; justify-content:center; }
  .pp-session-cta .badge img{ width:16px; }
  .pp-session-cta-inner p{ font-size:14.5px; font-weight:700; color:#fff; line-height:1.3; }
  .pp-session-cta .cs-btn{ flex:0 0 auto; font-size:14px; padding:11px 18px; white-space:nowrap; }
}

/* ---------- Guía "ascensor" — no aporta nada útil en pantallas chicas. ---------- */
@media(max-width:760px){ .scroll-rail{ display:none; } }

/* flecha-salide2.svg ya viene ancha y apuntando hacia abajo (99.25 x
   45.62) — se queda porque .cc-arrow la sigue usando la sección de taps. */
@media(max-width:760px){
  .cc-arrow{ width:auto; height:auto; margin:2px auto; }
  .cc-arrow .cc-arrow-desktop{ display:none; }
  .cc-arrow-mobile{ display:block; width: clamp(60px, 16vw, 76px); height:auto; }
}

/* ---------- Escena 1 · Hallazgo 4 — 3 atributos: tarjetas apiladas. ---------- */
@media(max-width:760px){
  .h4-title{ font-size: clamp(22px, 6.111vw, 26px); }
  .h4-cards{ grid-template-columns:1fr; gap: clamp(14px, 3.889vw, 18px); }
  .h4-banner{ flex-direction:column; align-items:flex-start; text-align:left; }
}

/* ---------- Escena 2 · Una señal muestra el problema / Un diagnóstico
   muestra el camino — título, texto y las 3 tarjetas naranjas apiladas,
   tamaños de la página 2 del PDF "4 momentos". ---------- */
@media(max-width:760px){
  /* Tamaño proporcional, anclado al diseño de 360px de ancho del PDF: a
     360px da exactamente los 24px medidos, y en teléfonos más anchos
     crece con la pantalla en vez de quedarse fijo (con un tope para que
     no se pase en tabletas justo antes del corte a desktop). Los <br
     class="mob-br"> del HTML fuerzan las 4 líneas del gancho. */
  .mob-br{ display:block; }
  .desk-br{ display:none; }
  .qs-title-block h2{ font-size: clamp(24px, 6.667vw, 28px); }
  .qs-title-block .lp-lead{ font-size: clamp(16px, 4.444vw, 18px); }
  .qs-cards{ grid-template-columns:1fr; gap: clamp(18px, 5vw, 21px); }
  .qs-card p{ font-size: clamp(20px, 5.556vw, 23px); }
}

/* ---------- Escena 4 · Mercado → Mensaje → Decisión de compra — página 4
   del PDF "4 momentos", tamaños proporcionales anclados a 360px. ---------- */
@media(max-width:760px){
  .fs-lead-bold{ font-size: clamp(18px, 5vw, 21px); }
  .fs-lead-sm{ font-size: clamp(15px, 4.167vw, 17px); }
}
/* Sin flechas entre cuadros — se superponen un poco, como en el PDF
   (ahí cabe hacerlos más grandes). El borde pasa de blanco casi invisible
   a un gris más oscuro y definido (color medido del PDF). */
@media(max-width:760px){
  .mmd-row{ gap:0; }
  .mmd-arrow{ display:none; }
  .mmd-box{ width: clamp(112px, 30vw, 136px); height: clamp(112px, 30vw, 136px);
    font-size: clamp(18px, 5vw, 21px); border-color: rgba(178,178,181,.6); }
  /* Los <span class="mmd-arrow"> (ocultos) siguen entre los cuadros en el
     DOM, así que el hermano-adyacente (+) no los alcanzaría — se usa ~
     para que la superposición aplique igual. */
  .mmd-box ~ .mmd-box{ margin-left: clamp(-14px, -3.5vw, -10px); }
  /* El de en medio queda encima de los otros dos para que se vea el
     mismo orden de superposición del PDF. */
  #mmdMensaje{ z-index:1; }
}

/* Aparecen uno detrás de otro (Mercado → Mensaje → Decisión → flecha),
   no todos de golpe. Reutiliza el mismo fundido de .cascade, solo
   escalona cuándo empieza cada uno. */
@media(max-width:760px){
  .mmd-row .cascade:nth-child(1){ transition-delay:0s; }
  .mmd-row .cascade:nth-child(3){ transition-delay:.15s; }
  .mmd-row .cascade:nth-child(5){ transition-delay:.3s; }
  .mmd-down{ transition-delay:.45s; }
}

/* Flecha hacia el ícono grande de la Escena 5 (ver #mmdRow más arriba). */
@media(max-width:760px){
  .mmd-down{ display:flex; justify-content:center; margin-top: clamp(28px,4.5vh,40px); color: var(--naranja); }
  .mmd-down svg{ width:24px; height:60px; }
}

/* ---------- Escena 5 · Ícono grande — en vez del fundido genérico de
   .cascade (que sube 18px), este arranca más arriba y "cae" un poco,
   como si viniera bajando desde la flecha de la Escena 4. Menos separado
   de "Logo + 4 pantallazos" de lo que quedaba con el padding genérico de
   escena, pero sin llegar a sentirse pegado. ---------- */
@media(max-width:760px){
  /* Recorrido más largo (antes -56px), arranca con un pequeño respiro
     (transition-delay) para que se sienta que baja después de la flecha,
     y más lento que el fundido genérico (.85s) para que se note el
     recorrido en vez de sentirse un salto. */
  .bigicon-img.cascade{ transform: translateY(-130px);
    transition: opacity 1.6s ease .2s, transform 1.8s cubic-bezier(.16,1,.3,1) .2s; }
  /* .cascade.v{transform:none} (misma especificidad, 2 clases) no le
     ganaría a esta por orden de archivo — hace falta una regla más
     específica para el estado ya revelado. */
  .bigicon-img.cascade.v{ transform:none; }
  #scene-5-content{ padding-bottom: clamp(24px,4vh,36px); }
}

/* ---------- Logo + 4 pantallazos ---------- */
@media(max-width:900px){ .lect-shots{ flex-wrap:wrap; } .lect-shot{ flex:1 1 40%; } }
@media(max-width:760px){
  .lp-lectura-section{ padding-top: clamp(28px,5vh,44px); }
  .lect-title{ font-size: clamp(24px, 6.667vw, 28px); }
  /* Esta franja de 4 capturas no está en el PDF para móvil — cada
     tarjeta de abajo ya trae su propia captura. */
  .lect-shots-wrap{ display:none; }
}

/* ---------- Flechas del carrusel de tarjetas / frases ---------- */
@media(max-width:900px){ .cs-arrow-prev{ left:-50px; } .cs-arrow-next{ right:-50px; } }
@media(max-width:760px){ .cs-arrow-prev{ left:6px; } .cs-arrow-next{ right:6px; } }

/* ---------- Tarjetas de insight (imagen + texto) — apiladas, imagen
   arriba (ver page4_part2/3 del PDF: la captura siempre va antes del
   texto, no solo en las "reverse"), tamaños de la página 4. ---------- */
@media(max-width:760px){
  .cs-scene-title{ font-size: clamp(17.5px, 4.8vw, 20px); margin-bottom: clamp(30px,6vh,46px); }
  .cs-card, .cs-card.cs-reverse{ grid-template-columns:1fr; }
  .cs-card{ min-height:0; }
  .cs-img{ order:-1; }
  .cs-img .cs-img-desktop{ display:none; }
  .cs-img .cs-img-pair{ display:flex; }
  .cs-img-pair img{ width:50%; height:100%; object-fit:cover; display:block; }
  .cs-img .cs-img-mobile{ display:block; width:100%; height:100%; object-fit:cover; }
  .cs-head h3{ font-size: clamp(15px, 4.167vw, 17px); }
  .cs-body p{ font-size: clamp(18px, 5vw, 21px); max-width:none; }
  .cs-btn{ font-size: clamp(16px, 4.444vw, 18px); }
}

/* ---------- Escena 9 · Del diagnóstico a la acción — página 6 del PDF
   "4 momentos", tamaños proporcionales anclados a 360px. ---------- */
@media(max-width:760px){
  .da-title{ font-size: clamp(24px, 6.667vw, 28px); }
  .da-lead{ font-size: clamp(17px, 4.722vw, 19px); }
  .da-note{ font-size: clamp(18px, 5vw, 21px); }
}

/* ---------- Del diagnóstico a la acción — taps: en desktop es un
   recuadro negro con margen a los lados; en móvil ese margen le resta
   espacio útil al contenido, así que el fondo va de borde a borde (sin
   .taps-shell) y ya no como una tarjeta con esquinas redondeadas — el
   padding que antes ponía el .shell/.taps-shell ahora lo pone .taps-box
   directamente. Nav con scroll horizontal si no caben los 4 (nowrap, no
   wrap: si no, los botones se apilan en vez de deslizarse), panel
   apilado (X arriba, check abajo). ---------- */
@media(max-width:760px){
  .taps-shell{ padding-inline:0; }
  .taps-box{ padding: clamp(20px,5vw,26px) clamp(18px,5vw,24px) clamp(28px,6vw,34px); border-radius:0; }
  .taps-nav{ flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; gap: clamp(10px,3vw,14px); }
  .taps-btn{ flex:0 0 auto; }
  .taps-col-label{ font-size: clamp(13.5px,3.6vw,15px); }
  .taps-panel{ grid-template-columns:1fr; gap: clamp(24px,6vw,32px); }
}

/* .recap-cta-wrap ahora solo vive en el FAQ (.faq-cta-wrap) — en móvil esa
   franja no va porque la de abajo (.pp-session-cta, ver
   initMomentSessionFlow en landing.js) cumple ese rol con su propio
   mensaje ("Activa tu diagnóstico con precio de lanzamiento") durante
   toda la Sesión 3, botón que manda directo al precio. */
@media(max-width:760px){
  .recap-cta-wrap{ display:none; }
}

/* ---------- Diagnóstico en 3 pasos — mismos tamaños grandes de la página
   6 del PDF para número, título y texto de cada tarjeta. ---------- */
@media(max-width:760px){
  .lp-s3 .n{ font-size: clamp(30px, 8.333vw, 34px); }
  .lp-s3 h5{ font-size: clamp(30px, 8.333vw, 34px); }
  .lp-s3 p{ font-size: clamp(18px, 5vw, 21px); }
}

/* ---------- ESCENA 13 · Criterio humano — foto compacta arriba,
   contenido y cifras debajo (apilado). Con la foto ya reducida en
   desktop (ajustes de precios/foto), en mobile basta con apilar en
   vez de repetir el layout lado a lado. ---------- */
@media(max-width:820px){
  .crit-shell{ flex-direction:column; gap: clamp(24px,5vh,36px); }
  .crit-photo{ max-width:220px; }
}
@media(max-width:760px){
  .crit-num{ font-size: clamp(30px, 8.333vw, 34px); }
  .crit-label{ font-size: clamp(13px, 3.6vw, 15px); line-height:1.15; }
  .crit-lead{ font-size: clamp(16px, 4.444vw, 18px); line-height:1.35; }
}

/* ---------- ESCENA 14 · Pago — apilado ---------- */
@media(max-width:900px){ .pay-grid{ grid-template-columns:1fr; } .pay-cards-grid{ grid-template-columns:1fr; } }

/* ---------- FAQ ---------- */
@media(max-width:760px){ .faq-content-zone{ min-height:0; } }

/* ---------- Del diagnóstico a la acción: 2 columnas dark/orange — apilado ---------- */
@media(max-width:760px){ .lp-2col{ grid-template-columns:1fr; } }

/* ---------- Pasos (3 tarjetas) — apilado ---------- */
@media(max-width:760px){ .lp-steps3{ grid-template-columns:1fr; } .lp-s3{ min-height:220px; } }

/* ---------- Beneficios tangibles (3 tarjetas) — apilado ---------- */
@media(max-width:760px){ .lp-benefits-grid{ grid-template-columns:1fr; } .lp-benefit-card{ min-height:auto; } }

/* ---------- Criterio humano + stats (bloque genérico, no el de escena) ---------- */
@media(max-width:820px){ .lp-crit{ grid-template-columns:1fr; } }

/* ---------- Checkout / precio — apilado ---------- */
@media(max-width:900px){ .lp-checkout{ grid-template-columns:1fr; } }

/* ---------- Loading (Slide 1) — sin disclaimer en pantallas muy chicas ---------- */
@media(max-width:680px){ .ll-disclaimer{ display:none; } }

/* ---------- Bloque genérico de grilla (legado) ---------- */
@media(max-width:900px){ .lp-grid{ grid-template-columns:1fr; } }