/* ============================================================
   COMUNICAR MEJOR — Landing MVP (Hallazgos + Diagnóstico)
   Paleta idéntica a la del sitio (deploy): mismos tokens de color.
   Tipografía: Articulat CF (Typekit) + Arimo itálica para acentos.
   ============================================================ */
:root{
  --ink:        #242124;
  --ink-2:      #4f4d4e;
  --muted:      #8d8a88;
  --paper:      #f6f5f2;
  --paper-2:    #efedea;
  --white:      #ffffff;
  --naranja:    #ff6b47;
  --naranja-deep:#e2532f;
  --line:       rgba(36,33,36,0.13);
  --line-soft:  rgba(36,33,36,0.07);
  --on-dark:    #f3f1ee;
  --on-dark-mut:rgba(243,241,238,0.55);
  --dark-2:     #38363a;

  --gutter: clamp(20px, 6vw, 90px);
  --maxw: 1240px;

  --fs-hero:   clamp(30px, 3.6vw, 56px);
  --fs-h2:     clamp(24px, 2.9vw, 48px);
  --fs-h3:     clamp(19px, 1.7vw, 28px);
  --fs-lead:   clamp(15px, 1.15vw, 19px);
  --fs-body:   clamp(14px, 1vw, 16px);
}

*{ margin:0; padding:0; box-sizing:border-box; -webkit-font-smoothing:antialiased; }
html{ scroll-behavior:smooth; }
body{
  background: var(--paper);
  color: var(--ink);
  font-family: 'articulat-cf', 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.5;
}
em, i, .it{ font-family:'Arimo', Georgia, serif; font-style:italic; }
img{ display:block; max-width:100%; }
a{ color:inherit; }
::selection{ background: var(--naranja); color:#fff; }

/* Que ningún título o párrafo, en cualquier ancho de pantalla, termine
   con una sola palabra sola en la última línea. balance reparte líneas
   parejas en títulos (textos cortos); pretty evita la palabra huérfana
   en párrafos más largos sin reacomodar todo el bloque. Los navegadores
   que no soportan estas propiedades simplemente las ignoran, sin romper
   nada. */
h1, h2, h3, h4, h5, h6{ text-wrap: balance; }
p{ text-wrap: pretty; }

.shell{ width:100%; max-width: var(--maxw); margin-inline:auto; padding-inline: var(--gutter); }
.accent{ color: var(--naranja); }

/* ---------- LOGO (sin barra de header) ---------- */
.lp-brand{ display:inline-flex; align-items:center; gap:12px; text-decoration:none; }
.lp-brand img{ height:26px; width:auto; }
.lp-brand span{ font-weight:800; font-size:19px; letter-spacing:-0.02em; color: var(--ink); }
.lp-brand span b{ font-weight:800; }
.lp-brand .dot{ color: var(--naranja); }
/* ---------- FOOTER (minimal) ---------- */
.lp-footer{ border-top:1px solid var(--line-soft); padding: 22px 0; margin-top: 60px; }
.lp-footer .shell{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.lp-footer p{ font-size:13px; color: var(--muted); }
.lp-social{ display:flex; gap:10px; }
.lp-social a{ width:30px; height:30px; border-radius:50%; background: var(--naranja); color:#fff;
  display:flex; align-items:center; justify-content:center; text-decoration:none; }
.lp-social svg{ width:15px; height:15px; fill:#fff; }

.lp-disclaimer{ display:flex; gap:14px; align-items:flex-start; }
.lp-disclaimer .badge{ width:38px; height:38px; border-radius:10px; background: var(--ink); flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; }
.lp-disclaimer .badge img{ width:22px; }
.lp-disclaimer p{ font-size:14px; color: var(--muted); line-height:1.15; }

.lp-err{ font-size:12px; margin-top:6px; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; width:100%;
  font-family:inherit; font-size:15px; font-weight:700; letter-spacing:.01em;
  padding:16px 22px; border-radius:12px; text-decoration:none; cursor:pointer; border:none;
  transition: background .2s, transform .15s, opacity .2s; }
.btn:disabled{ opacity:.4; cursor:not-allowed; }
.btn-naranja{ background: var(--naranja); color:#fff; }
.btn-naranja:hover:not(:disabled){ background: var(--naranja-deep); }
.btn-naranja:active:not(:disabled){ transform: scale(.99); }

/* ============================================================
   FORMULARIO EXPERIENCIAL (index.html) — mismo lenguaje visual que
   resultado.html: una pantalla completa a la vez, con fundido entre cada
   una (@keyframes fs-enter, se reproduce solo cada vez que una pantalla
   pasa de display:none a block — no hace falta coordinar con JS) y el
   mismo ícono girando (.motif-*, definido más abajo junto al de
   resultado.html) apareciendo entre pasos. La funcionalidad (validaciones,
   envío) es idéntica a la del formulario anterior — ver initForm en
   landing.js. */
.fs-wrap{ min-height:100vh; }
.fs-screen{ display:none; }
.fs-screen.active{ display:block; animation: fs-enter .6s cubic-bezier(.16,1,.3,1) both; }
@keyframes fs-enter{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }

/* Cada pantalla ocupa al menos el alto completo: el header (logo) siempre
   arriba a la izquierda en su propia fila, sin importar qué tan centrado
   quede el resto; el bloque de pregunta se centra en el espacio que sobra
   (flex:1 1 auto + justify-content:center) — así el campo de "a quién le
   vendes" siempre queda centrado al alto de la página como se pidió. En la
   pantalla 1, las miniaturas quedan como último elemento del bloque, pegadas
   al borde de abajo de este primer alto de pantalla. */
/* min-height menor a 100vh + padding-bottom: las miniaturas quedan
   despegadas del borde real de la pantalla, y así se alcanza a ver un poco
   del bloque de abajo (checklist) — señal de que hay más para leer. */
.fs-viewport-block{ min-height:92vh; display:flex; flex-direction:column; padding-bottom: clamp(24px,4vh,44px); }
.fs-header-row{ flex:0 0 auto; padding-top: clamp(26px,4vh,42px); }
.fs-hero-mid{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:center;
  align-items:center; text-align:center; padding: clamp(24px,4vh,40px) var(--gutter); }

.fs-shell-wide{ max-width:1240px; }
.fs-shell-comprador{ max-width:820px; }
.fs-shell-narrow{ max-width:620px; text-align:center; }

.fs-brand{ display:flex; width:fit-content; }
.fs-brand span{ font-size: clamp(20px,2vw,26px); }

.fs-h1{ text-align:center; font-size: clamp(26px,4.4vw,60px); font-weight:800; letter-spacing:-0.03em; line-height:1.10; }
.fs-h1 em{ font-weight:700; }
.fs-h1 .fs-underline{ text-decoration:underline; text-decoration-color: var(--naranja);
  text-decoration-thickness:3px; text-underline-offset:7px; }
.fs-question{ margin-top: clamp(22px,3.4vh,34px); font-size: clamp(17px,1.5vw,21px); font-weight:700; text-align:center; }

/* Tarjeta blanca con el campo + selector/flecha — mismo trato que
   .faq-select/.qs-card: fondo blanco, sombra suave, sin depender de un
   contenedor oscuro como antes. */
.fs-card{ margin-top: clamp(16px,2.4vh,22px); width:100%; background:#fff; border-radius:20px;
  box-shadow: 0 14px 44px rgba(36,33,36,.09); text-align:left; overflow:hidden; }
/* En la pantalla 1, un poco más ancho que la pregunta de arriba — no el
   ancho completo del contenedor, que se veía exagerado. */
.fs-shell-wide .fs-card{ max-width:600px; margin-inline:auto; }
.fs-card textarea{ width:100%; display:block; border:none; resize:none; background:transparent;
  font-family:inherit; color: var(--ink); font-size: clamp(15px,1.25vw,17px); line-height:1.45;
  padding: clamp(18px,2vw,24px) clamp(20px,2.2vw,26px) 6px; }
.fs-card textarea:focus{ outline:none; }
.fs-card textarea::placeholder{ color: var(--muted); }
.fs-card-row{ display:flex; align-items:center; gap:12px; border-top:1px solid var(--line-soft);
  padding: 10px 10px 10px clamp(20px,2.2vw,26px); }
.fs-card-row-end{ justify-content:flex-end; }
.fs-select-wrap{ flex:1 1 auto; min-width:0; }
.fs-select-wrap select{ width:100%; border:none; background:transparent; font-family:inherit;
  color: var(--ink); font-size: clamp(14px,1.1vw,15.5px); font-weight:600; padding:10px 0;
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%238d8a88' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: right 4px center; padding-right:26px; }
.fs-select-wrap select:focus{ outline:none; }
.fs-arrow-btn{ flex:0 0 auto; width:46px; height:46px; border-radius:50%; background: var(--naranja);
  border:none; display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition: background .2s ease, transform .15s ease; }
.fs-arrow-btn:hover{ background: var(--naranja-deep); }
.fs-arrow-btn:active{ transform: scale(.96); }

/* Pantalla 2: tarjeta de un solo campo, más alta, con la flecha en su
   propia fila de abajo (como la 1) en vez de flotando encima del texto —
   así el texto largo nunca queda por debajo del botón. */
.fs-card-single textarea{ min-height: clamp(90px,14vh,130px); padding-bottom: clamp(14px,1.8vh,18px); }

.fs-err{ color: var(--naranja-deep); text-align:left; }

.fs-trust{ margin-top: clamp(14px,2vh,18px); text-align:center; font-size:14px; font-weight:600; color: var(--ink-2); }
.fs-trust strong{ font-weight:800; }

.fs-thumbs{ flex:0 0 auto; width:100%; max-width:600px; margin-inline:auto; padding-inline: var(--gutter);
  display:flex; justify-content:center; gap: clamp(8px,1vw,14px); }
.fs-thumb{ flex:1 1 0; aspect-ratio: 4/3; border-radius:10px; overflow:hidden;
  background: var(--paper-2); box-shadow: 0 8px 24px rgba(36,33,36,.1); }
.fs-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

.fs-checklist-section{ padding: clamp(48px,8vh,90px) var(--gutter) clamp(40px,6vh,64px); }
.fs-checklist-block{ text-align:center; }
.fs-checklist-block h3{ font-size: clamp(24px,3.6vw,46px); font-weight:800; letter-spacing:-0.02em; line-height:1.02; }
.fs-checklist{ list-style:none; margin-top:24px; display:inline-grid; gap:16px; text-align:left; }
.fs-checklist li{ display:flex; gap:14px; align-items:flex-start; font-size: clamp(17px,2vw,26px); line-height:1.2; color: var(--ink-2); }
.fs-checklist li svg{ width:20px; height:20px; margin-top:6px; flex:0 0 auto; }
/* En desktop, como en el PDF: titular a la izquierda, bullets a la derecha.
   En móvil se queda apilado y centrado (así ya había quedado bien). */
@media(min-width:900px){
  .fs-checklist-block{ display:flex; align-items:center; justify-content:space-between; gap:56px; text-align:left; max-width:1100px; margin-inline:auto; }
  .fs-checklist-block h3{ flex:0 0 auto; max-width:500px; text-align:left; }
  .fs-checklist{ margin-top:0; }
}

.fs-disclaimer{ margin-top: clamp(40px,6vh,64px); max-width:640px; margin-inline:auto; text-align:left; }

/* Pantallas 2/3: el mismo ícono girando de resultado.html, pero estático
   (no el fijo/compartido — acá no hay scroll, solo se muestra arriba de
   cada pregunta al entrar la pantalla). */
.fs-motif{ display:flex; justify-content:center; margin-bottom: clamp(40px,6vh,60px); }
.fs-fieldhint{ margin-top: clamp(14px,2vh,18px); font-size:13px; color: var(--muted); line-height:1.5; }
.fs-back{ margin-top: clamp(20px,3vh,28px); background:none; border:none; font-family:inherit;
  color: var(--muted); font-size:13px; cursor:pointer; }
.fs-back:hover{ color: var(--ink); }

.fs-fields{ margin-top: clamp(20px,3vh,26px); width:100%; display:flex; flex-direction:column; gap:14px; max-width:480px; margin-inline:auto; }
.fs-field{ text-align:left; }
.fs-field input{ width:100%; background:#fff; border:1.5px solid var(--line); border-radius:14px;
  padding: clamp(14px,1.5vw,17px) clamp(18px,1.8vw,22px); font-family:inherit; color: var(--ink);
  font-size: clamp(14px,1.1vw,16px); box-shadow: 0 10px 28px rgba(36,33,36,.05); transition: border-color .2s ease; }
.fs-field input:focus{ outline:none; border-color: var(--naranja); }
.fs-field input::placeholder{ color: var(--muted); }

.fs-cta{ margin: clamp(26px,3.6vh,32px) auto 0; display:flex; align-items:center; justify-content:center; gap:12px;
  background: var(--ink); color:#fff; font-family:inherit; font-weight:700; font-size: clamp(15px,1.2vw,17px);
  padding: 15px 30px; border-radius:999px; border:none; cursor:pointer; transition: background .2s ease, transform .12s ease; }
.fs-cta:hover{ background:#000; }
/* :active (no solo :hover) porque en móvil el toque no siempre dispara
   :hover de forma confiable — sin esto no había ninguna señal visual de
   que el botón registró el clic. */
.fs-cta:active{ transform: scale(.96); background:#000; }
.fs-cta-arrow{ width:26px; height:26px; border-radius:50%; background: var(--naranja);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto; }

/* ---------- SLIDE 2 · RESULTADO: hero oscuro con tabs de hallazgos ----------
   Layout de 3 zonas fijas (arriba / tabs / abajo) en columna flex de 100vh.
   Solo la zona central (título + columnas del hallazgo) cambia de tamaño al
   alternar tabs; arriba y abajo nunca se mueven.                            */
.lp-res-hero{ color:#fff; height:100%; overflow:hidden; }
.lp-res-hero .shell{ height:100%; display:flex; flex-direction:column; }

.lp-res-top{ flex:0 0 auto; display:flex; align-items:flex-start; justify-content:space-between;
  padding-top: clamp(22px,3.6vh,36px); }
.lp-res-who{ display:flex; align-items:flex-start; gap:12px; font-size: clamp(13px,.98vw,15px); font-weight:500;
  color: var(--on-dark); line-height:1.35; }
#lp-saludo{ max-width:320px; padding-top:7px; }
.lp-res-who .avatar{ width:36px; height:36px; border-radius:50%; background: var(--ink); border:1.5px solid rgba(255,255,255,.16);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.lp-res-who .avatar img{ width:19px; }
.lp-res-brand{ display:flex; align-items:center; gap:8px; font-weight:800; font-size:16px; flex:0 0 auto; }
.lp-res-brand img{ height:19px; }

.lp-tabs{ flex:0 0 auto; display:flex; justify-content:center; gap:12px; margin-top: clamp(22px,3.4vh,34px); flex-wrap:wrap; }
.lp-tab{ background:none; border:1.5px solid rgba(255,255,255,.18); color:#8f8c8c; font-family:inherit;
  font-size: clamp(13px,1.05vw,15px); font-weight:700; border-radius:999px; padding:9px 20px; cursor:pointer;
  transition: border-color .2s, color .2s, background .2s; }
.lp-tab:hover:not(.active){ border-color: var(--naranja); color:#fff; }
.lp-tab.active{ background: var(--naranja); border-color: var(--naranja); color:#fff; }
.lp-tab-label{ display:none; }

/* Dos zonas de alto RESERVADO (fijo), como en la guía: el título siempre se
   centra dentro de su zona (líneas amarillas) y las columnas siempre
   empiezan en el mismo punto (línea verde) dentro de su propia zona
   reservada — así ninguna de las dos se mueve al cambiar de tab, sin
   importar cuánto texto tenga cada hallazgo. El respiro hacia la franja
   naranja va después de esas dos zonas fijas. */
.lp-hallazgo{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; justify-content:center; overflow:auto;
  transition: opacity .22s ease, transform .22s ease; }
.lp-hallazgo.is-switching{ opacity:0; transform: translateY(8px); }
.lh-title-wrap{ flex:0 0 auto; height: clamp(130px,18vh,180px); display:flex; align-items:center; justify-content:center; }
.lh-title{ text-align:center; max-width:820px; margin-inline:auto;
  font-size: clamp(24px,2.75vw,34px); font-weight:400; font-style:normal; line-height:1.25; }
.lh-cols{ flex:0 0 auto; display:grid; grid-template-columns:1fr 1fr; gap: clamp(24px,3.6vw,56px);
  min-height: clamp(170px,22vh,210px); align-content:start;
  max-width:980px; margin-inline:auto; width:100%; }
.lh-col .lp-real{ font-size: clamp(15px,1.7vw,22px); color: var(--on-dark-mut); line-height:1.4; }
.lh-col .lp-conf-lbl{ font-size:13px; font-weight:700; letter-spacing:.08em; color: var(--naranja); margin-bottom:8px; }
.lh-col .lp-conf{ font-size: clamp(13.5px,1.3vw,17px); color: var(--on-dark-mut); line-height:1.4; }

.lp-res-bottom{ flex:0 0 auto; padding-bottom: clamp(18px,2.8vh,28px); }
.lp-oport{ display:flex; justify-content:center; }
.lo-inner{ position:relative; overflow:hidden; display:inline-flex; gap:12px; align-items:flex-start; background: var(--naranja); border-radius:14px;
  padding: clamp(12px,1.4vw,17px) clamp(16px,1.8vw,22px); max-width:min(680px,100%); }
/* Mismo brillo que las demás franjas naranjas (.recap-cta), reutiliza
   @keyframes cta-shine. */
.lo-inner::after{ content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.35), transparent);
  animation: cta-shine 4.5s ease-in-out infinite; pointer-events:none; }
@media (prefers-reduced-motion: reduce){ .lo-inner::after{ animation:none; display:none; } }
.lo-inner .badge{ position:relative; z-index:1; width:28px; height:28px; border-radius:8px; background: var(--ink); flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; margin-top:1px; }
.lo-inner .badge img{ width:16px; }
.lo-text{ position:relative; z-index:1; min-width:0; flex:1 1 auto; }
.lo-line1{ font-weight:800; white-space:nowrap; font-size: clamp(15px,1.25vw,17px); color:#fff; line-height:1.3; }
.lo-line2{ margin-top:3px; font-weight:600; font-size: clamp(13px,1.05vw,15.5px); color:#fff; line-height:1.35; max-width:52ch; }

.lp-scrollhint{ text-align:center; margin-top: clamp(16px,2.4vh,26px); font-size:11px; font-weight:600;
  letter-spacing:.1em; color: var(--muted); }

/* ---------- ESCENA 1 · Hallazgo 4 — 3 atributos ----------
   Vive como escena dentro de .stage (ver bloque ESCENARIO más abajo) — el
   fondo y el alto de pantalla completa ya los da .scene / .scene-content.
   Logo arriba a la izquierda (natural, sin flex:1), el resto centrado en
   el espacio que queda debajo. */
.lp-slide-body{ height:100%; display:flex; flex-direction:column; }
.lp-slide-light{ overflow:hidden; }
.h4-logo{ padding-top: clamp(20px,3vh,32px); }
.h4-logo img{ height: clamp(22px,2.4vw,32px); width:auto; display:block; }
.h4-center{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; }
.h4-eyebrow{ font-size: clamp(15px,1.4vw,19px); font-weight:700; color: var(--ink-2); }
.h4-title{ margin-top: clamp(10px,1.4vh,16px); font-size: clamp(24px,2.7vw,36px); font-weight:800;
  letter-spacing:-0.02em; line-height:1.3; max-width:46ch; }
/* Tarjetas más grandes y cuadradas a propósito — el contenido de cada
   atributo ES el gancho de esta escena, así que necesita respirar.
   min-height (no solo padding) para aprovechar el alto que sobra debajo
   del título. */
.h4-cards{ margin-top: clamp(32px,4.5vh,52px); display:grid; grid-template-columns:repeat(3,1fr);
  gap: clamp(16px,2vw,28px); max-width:1160px; width:100%; text-align:left; }
.h4-card{ background: var(--ink); color:#fff; border-radius:20px; padding: clamp(30px,3vw,44px);
  min-height: clamp(240px,32vh,340px); display:flex; flex-direction:column;
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease; }
.h4-card:hover{ transform: scale(1.035); box-shadow: 0 14px 36px rgba(0,0,0,.35); }
.h4-card h4{ font-weight:800; color: var(--naranja); font-size: clamp(19px,1.9vw,25px); line-height:1.3; }
.h4-card p{ margin-top: clamp(14px,2vh,20px); font-size: clamp(15px,1.35vw,18px); line-height:1.55; color: rgba(255,255,255,.82); }
.h4-banner{ position:relative; overflow:hidden; margin-top: clamp(24px,3.4vh,36px); display:flex; align-items:center; gap:18px; max-width:840px;
  background: var(--naranja); border-radius:16px; padding: clamp(18px,2vw,26px) clamp(22px,2.4vw,30px); }
/* Mismo brillo que las demás franjas naranjas (.recap-cta / .lo-inner),
   reutiliza @keyframes cta-shine. */
.h4-banner::after{ content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.35), transparent);
  animation: cta-shine 4.5s ease-in-out infinite; pointer-events:none; }
@media (prefers-reduced-motion: reduce){ .h4-banner::after{ animation:none; display:none; } }
.h4-banner .badge{ position:relative; z-index:1; width: clamp(34px,3vw,42px); height: clamp(34px,3vw,42px); border-radius:10px;
  background: var(--ink); flex:0 0 auto; display:flex; align-items:center; justify-content:center; }
.h4-banner .badge img{ width:56%; }
/* max-width en ch (no en el .h4-banner) para forzar 2 líneas sin importar
   el largo exacto del texto — a este tamaño de fuente, una sola línea
   pegaría contra el borde del banner. */
.h4-banner p{ position:relative; z-index:1; max-width:40ch; font-size: clamp(17px,1.7vw,21px); font-weight:700; color:#fff; line-height:1.4; text-align:left; }
.ls-scrollcue-text{ font-size: clamp(15px,1.5vw,20px); font-weight:700; color: var(--ink); }
.ls-scrollcue-btn{ width:48px; height:48px; border-radius:50%; background: var(--ink); color:#fff;
  font-size:20px; font-weight:700; display:flex; align-items:center; justify-content:center;
  animation: ls-bounce 1.6s ease-in-out infinite; }
@keyframes ls-bounce{ 0%,100%{ transform:translateY(0); opacity:.55; } 50%{ transform:translateY(8px); opacity:1; } }

/* ---------- ESCENARIO (scrollytelling de escenas fijas) ----------
   Cada "slide" es una escena de pantalla completa apilada dentro de .stage.
   El fondo (.scene-bg) y el contenido (.scene-content) de cada escena se
   animan por separado, en 2 tiempos: primero el contenido saliente se
   desvanece con transparencia, luego el fondo de la escena entrante hace
   crossfade (sin ningún desplazamiento — es opacidad pura, nada se mueve),
   y solo cuando el fondo ya terminó de cambiar entra el contenido nuevo.
   .stage queda "pegado" (sticky) mientras se recorre el alto de
   .scene-track, que es el que realmente genera el scroll — así todo está
   ligado al scroll (sin temporizadores) y con recorrido de sobra para que
   la coreografía no se sienta apurada. Ver initSceneTransitions en
   landing.js — el motor es genérico: cualquier escena nueva que se agregue
   con esta misma estructura hereda el mismo comportamiento.              */
.scene-track{ position:relative; }
.stage{ position:sticky; top:0; height:100vh; overflow:hidden; }
.scene{ position:absolute; inset:0; }
.scene-bg{ position:absolute; inset:0; z-index:0; }
.scene-content{ position:relative; z-index:1; height:100%; }


/* Ícono motivo persistente (punto girando) — mismo look del loading (Slide 1):
   siempre con el anillo circular, el color del anillo se adapta al tono de
   la escena de abajo (.tone-dark / .tone-light) para que se note en ambos
   fondos. Se mantiene fijo mientras se recorren varias escenas seguidas —
   ver MOTIF_SCENES en initSceneTransitions, landing.js — y además cubre el
   "ícono de pausa" durante el cruce de color entre escenas (ya no hace
   falta un ícono puente aparte). */
.motif-icon{ position:fixed; left:0; right:0; bottom: clamp(50px,8vh,92px); z-index:900; pointer-events:none;
  opacity:0; display:flex; justify-content:center; }
.motif-ring{ position:relative; width: clamp(50px,5.2vw,68px); height: clamp(50px,5.2vw,68px);
  border-radius:50%; border:1.5px solid rgba(36,33,36,.14); display:flex; align-items:center; justify-content:center;
  transition: border-color .3s ease; }
.motif-icon.tone-dark .motif-ring{ border-color: rgba(255,255,255,.16); }
.motif-badge{ width:56%; height:56%; border-radius:26%; }
.motif-orbit{ position:absolute; inset:0; animation: ll-spin 2.6s linear infinite; }
.motif-dot{ position:absolute; top:-1.5px; left:50%; width:8px; height:8px; margin-left:-4px; border-radius:50%;
  background: var(--naranja); box-shadow: 0 0 10px 3px rgba(255,107,71,.5); }

/* Flechas fijas a la izquierda para saltar entre secciones (ver
   initSectionNav en landing.js). Mismo lenguaje visual que .back-to-top
   (círculo sólido oscuro + ícono blanco) para que se lean igual de bien
   sobre escenas claras y oscuras, sin depender de cuál esté detrás. */
.scroll-rail{ position:fixed; left: clamp(16px,2.2vw,30px); top:50%; transform:translateY(-50%);
  z-index:850; display:flex; flex-direction:column; gap:10px;
  opacity:0; pointer-events:none; transition: opacity .4s ease; }
.scroll-rail.visible{ opacity:1; pointer-events:auto; }
.scroll-rail-arrow{ width:40px; height:40px; border-radius:50%; background: var(--ink); color:#fff;
  border:1.5px solid rgba(255,255,255,.25); cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 28px rgba(36,33,36,.35); transition: background .2s ease, transform .15s ease; }
.scroll-rail-arrow:hover{ background: var(--naranja); }
.scroll-rail-arrow:active{ transform: scale(.92); }

/* Volver al inicio: botón flotante, aparece pasado el primer tramo de
   scroll (ver initBackToTop en landing.js). */
.back-to-top{ position:fixed; right: clamp(16px,2.4vw,32px); bottom: clamp(16px,2.4vw,32px); width:48px; height:48px;
  border-radius:50%; background: var(--ink); color:#fff; border:none; font-size:20px; font-weight:700; cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow: 0 10px 28px rgba(36,33,36,.22);
  opacity:0; pointer-events:none; transform:translateY(10px); z-index:850;
  transition: opacity .3s ease, transform .3s ease, background .2s ease; }
.back-to-top.visible{ opacity:1; pointer-events:auto; transform:translateY(0); }
.back-to-top:hover{ background: var(--naranja); }

/* Overlay de cruce entre "momentos"/"sesiones" (solo móvil, ver
   landing-mobile.css e initMomentSessionFlow en landing.js). En desktop
   nunca recibe la clase .on, así que no hace falta ocultarlo aparte. */
.pp-transition-overlay{ position:fixed; inset:0; z-index:9999; background: var(--ink);
  opacity:0; pointer-events:none; transition: opacity .4s ease; }
.pp-transition-overlay.on{ opacity:1; pointer-events:auto; }

/* "Momentos" mobile-only (pantallas negras separadas de su escena de
   desktop — ver Escena 13 / #ppMomentD). En desktop no existen. */
.pp-moment{ display:none; }
.pp-moment-motif{ display:none; }

/* Franja naranja de atajo por sesión (solo móvil, ver
   landing-mobile.css e initMomentSessionFlow en landing.js). En desktop
   nunca se activa. */
.pp-session-cta{ display:none; }

/* Cortes de línea forzados que solo aplican en móvil (ver Escena 2 en
   resultado.html) — en desktop el titular ya envuelve solo, de forma
   natural, con su propio tamaño más grande. */
.mob-br{ display:none; }

/* Inverso de .mob-br: corte que solo aplica en desktop (ver hero de
   index.html) — en móvil el titular necesita cortes en otros puntos. */
.desk-br{ display:block; }

/* Pares/capturas de pantalla que solo se ven en las tarjetas del móvil
   (ver .cs-img-pair y .cs-img-mobile en landing-mobile.css) — en desktop
   se queda la ilustración propia de cada tarjeta (slide_N_*.jpg).
   Selector con .cs-img por delante para ganarle en especificidad a
   ".cs-img img{display:block}" de más abajo — sin esto, .cs-img-mobile
   (que es un <img> directo) se cuela visible también en desktop. */
.cs-img .cs-img-pair, .cs-img .cs-img-mobile{ display:none; }

/* Lo mismo para las 4 capturas de index.html (ver landing-mobile.css). */
.fs-thumb-mobonly{ display:none; }

/* Flecha propia de la Escena 1 en móvil (ver landing-mobile.css) — en
   desktop sigue el ícono de siempre. */
.cc-arrow-mobile{ display:none; }

/* Flecha hacia el ícono grande, solo Escena 4 en móvil (ver
   landing-mobile.css) — en desktop los cuadros se funden hacia el ícono
   con su propia animación, no hace falta. */
.mmd-down{ display:none; }

.cascade{ opacity:0; transform: translateY(18px); }

/* ---------- Bloques genéricos (secciones aún no convertidas a slide) ---------- */
.lp-block{ padding: clamp(56px,8vh,110px) 0; }
.lp-block.dark{ background: var(--ink); color:#fff; }
.lp-block h2{ font-size: var(--fs-h2); font-weight:800; letter-spacing:-0.03em; line-height:1.12; text-align:center; }
.lp-block .lp-lead{ margin-top:18px; font-size: var(--fs-lead); color: var(--ink-2); text-align:center; max-width:70ch; margin-inline:auto; }
.dark .lp-lead{ color: var(--on-dark-mut); }

/* .cc-arrow ya no lo usa esta escena (el comparativo LO QUE YA TIENES/
   OBTIENES que lo usaba se quitó al reemplazar el contenido por el
   Hallazgo 4) — se queda porque la sección de taps la sigue usando. */
.cc-arrow{ width: clamp(32px,3.4vw,52px); height: clamp(32px,3.4vw,52px); color: var(--naranja); flex:0 0 auto; }
.cc-arrow svg{ width:100%; height:100%; display:block; }

/* ---------- ESCENA 2 · Una señal muestra el problema / Un diagnóstico
   muestra el camino — título + 3 tarjetas naranjas con lo que cambia
   cuando hay dirección (antes era el carrusel de frases de dolor). ---------- */
.lp-quotes-scene{ display:flex; align-items:center; overflow:hidden; }
.lp-quotes-scene .shell{ width:100%; }
.qs-composition{ display:flex; flex-direction:column; align-items:center; }
.qs-title-block{ flex:0 0 auto; text-align:center; max-width:900px; }
.qs-title-block h2{ font-size: clamp(30px,4.1vw,52px); font-weight:800; letter-spacing:-0.025em; line-height:1.16; color: var(--ink); }
.qs-title-block h2 .accent{ text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 7px; }
.qs-title-block .lp-lead{ margin-top:18px; font-size: clamp(17px,1.75vw,22px); line-height:1.4; color: var(--ink-2); max-width:64ch; margin-inline:auto; }
.qs-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap: clamp(20px,2.4vw,34px);
  margin-top: clamp(48px,6.5vh,72px); max-width:1140px; width:100%; }
.qs-card{ background: var(--naranja); color:#fff; border-radius:20px; padding: clamp(28px,2.8vw,40px);
  min-height: clamp(200px,24vh,260px); display:flex; flex-direction:column; align-items:flex-start;
  justify-content:center; gap:16px; text-align:left;
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease; }
.qs-card:hover{ transform: scale(1.035); box-shadow: 0 14px 36px rgba(255,107,71,.35); }
.qs-num{ font-size: clamp(26px,2.8vw,36px); font-weight:800; color: var(--ink); line-height:1; }
.qs-card p{ font-size: clamp(17px,1.7vw,21px); line-height:1.3; font-weight:600; }

/* ---------- ESCENA 3 · ¿Alguno te sonó familiar? ---------- */
.lp-familiar-scene{ display:flex; align-items:center; justify-content:center; text-align:center; }
/* La Escena 8 ya no usa el ícono compartido de posición fija (está sola
   en su track, sin otra escena a la cual transicionar) — muestra su
   propio ícono estático en vez, igual que ya se ve en móvil. Vive dentro
   del mismo .cascade que el título, así que se funde junto con él sin
   necesitar ningún manejo aparte. */
#scene-8-content .pp-moment-motif{ display:flex; justify-content:center; margin-bottom: clamp(24px,3.4vh,36px); }
.fs-title{ font-size: clamp(26px,3.4vw,44px); font-weight:800; font-style:italic; letter-spacing:-0.02em; color:#fff; }
.fs-title.plain{ font-style:normal; line-height:1.3; }
.fs-sub{ margin-top: clamp(16px,2.2vh,26px); font-size: clamp(16px,1.5vw,20px); line-height:1.4; color: var(--on-dark);
  max-width:60ch; margin-inline:auto; }

/* ---------- ESCENA 4 · Mercado → Mensaje → Decisión de compra ---------- */
.lp-flow-scene{ display:flex; align-items:center; justify-content:center; text-align:center; }
.fs-lead-sm{ margin-top:6px; font-size: clamp(15px,1.4vw,19px); color: var(--on-dark-mut); line-height:1.4; }
.fs-lead-bold{ font-size: clamp(18px,1.9vw,25px); color:#fff; font-weight:800; line-height:1.35;
  max-width:640px; margin-inline:auto; text-wrap:balance; }
.mmd-row{ display:flex; align-items:center; justify-content:center; gap: clamp(14px,2vw,28px);
  margin-top: clamp(36px,5.5vh,64px); flex-wrap:wrap; }
.mmd-box{ width: clamp(130px,13vw,190px); height: clamp(130px,13vw,190px); border-radius:24px; border:1.5px solid rgba(255,255,255,.22);
  display:flex; align-items:center; justify-content:center; font-size: clamp(19px,1.9vw,27px); font-weight:800; color:#fff;
  line-height:1.2; text-align:center; will-change:transform; }
.mmd-arrow{ color: var(--naranja); font-size: clamp(22px,2vw,30px); font-weight:400; }

/* ---------- ESCENA 5 · Ícono grande ----------
   Los 3 cuadros de la escena anterior se "funden" hacia el centro y
   desaparecen (ver la lógica especial de la transición 4→5 en
   initSceneTransitions, landing.js) mientras este ícono aparece encima,
   ya en el nuevo color de fondo. */
.lp-bigicon-scene{ display:flex; align-items:center; justify-content:center; }
.bigicon-img{ display:block; margin-inline:auto; width: clamp(110px,13vw,170px); height:auto; }

/* ---------- Logo + 4 pantallazos (fuera del track, scroll normal) ----------
   Antes vivía dentro del escenario pineado; ahora es un tramo de scroll
   normal con revelado (.rv, ver initReveal en landing.js) para que la
   página respire distinto acá — no todo el recorrido se siente igual. */
.lp-lectura-section{ padding: clamp(64px,10vh,110px) 0 clamp(40px,6vh,72px); }
.lp-lectura-section .shell{ width:100%; display:flex; flex-direction:column; align-items:center; }
.lect-logo{ text-align:center; font-weight:800; font-size: clamp(28px,3.6vw,48px); color: var(--ink);
  margin-bottom: clamp(34px,5vh,52px); }
.lect-logo .accent{ color: var(--naranja); }
.lect-title{ text-align:center; font-size: clamp(24px,3.1vw,42px); font-weight:800; letter-spacing:-0.02em;
  line-height:1.22; color: var(--ink); }
.lect-title em{ font-style:italic; }
/* font-family:Arimo (no solo font-style:italic) — el titular de referencia
   ("muestra el camino.") usa <em>, que en este sitio cambia de tipografía
   a Arimo (ver "em, i, .it" arriba), no solo inclina la fuente normal. Sin
   esto se ve más liviano que la referencia aunque el peso (800) sea igual. */
.lect-title .accent{ font-family:'Arimo', Georgia, serif; font-style:italic; color: var(--naranja); text-decoration:underline;
  text-decoration-thickness:3px; text-underline-offset:7px; }
.lect-shots-wrap{ width:100%; padding-inline: var(--gutter); margin-top: clamp(56px,8.5vh,96px); }
.lect-shots{ display:flex; gap: clamp(8px,1vw,14px); max-width:720px; margin-inline:auto; width:100%; }
.lect-shot{ flex:1 1 0; aspect-ratio: 352/220; background: var(--paper-2); border-radius:10px; overflow:hidden; }
.lect-shot img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .35s cubic-bezier(.16,1,.3,1); }
.lect-shot:hover img{ transform: scale(1.08); }

/* ---------- Tarjetas de insight (fuera del track, apiladas con scroll normal) ----------
   Antes vivían en un slider (una a la vez, con flechas); ahora son bloques
   a todo lo ancho, uno debajo del otro, revelados con scroll normal
   (.rv) — alternan texto/imagen (.cs-reverse) para que no se sientan
   repetitivas. */
.lp-cardstack-section{ padding: clamp(56px,8.5vh,96px) 0; }
.cs-end-motif{ display:flex; justify-content:center; margin-top: clamp(40px,6vh,64px); }
.cardstack-wrap{ display:flex; flex-direction:column; align-items:center; width:100%; }
.cs-scene-title{ text-align:center; max-width:74ch; margin:0 auto clamp(56px,9vh,96px); padding-inline: var(--gutter);
  font-size: clamp(19px,2.1vw,27px); font-weight:800; line-height:1.4; color: var(--ink); text-wrap:balance; }
/* Genéricas — también las usa el slider de frases (.qs-slider). */
.cs-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%;
  background:#fff; border:1.5px solid var(--naranja); display:flex; align-items:center; justify-content:center;
  font-size:22px; line-height:1; color: var(--naranja); cursor:pointer; box-shadow:0 10px 28px rgba(36,33,36,.12);
  z-index:5; transition: background .2s ease, color .2s ease; }
.cs-arrow:hover{ background: var(--naranja); color:#fff; }
.cs-arrow-prev{ left:-84px; }
.cs-arrow-next{ right:-84px; }

.cs-stack{ display:flex; flex-direction:column; gap: clamp(20px,3vh,32px); width:min(1180px, 92vw); margin-inline:auto; }
.cs-card{ background:#fff; border-radius:20px; overflow:hidden; display:grid; grid-template-columns:1.1fr .9fr;
  min-height: clamp(380px,52vh,480px); }
.cs-card.cs-reverse{ grid-template-columns: .9fr 1.1fr; }
.cs-text{ display:flex; flex-direction:column; justify-content:center; padding: clamp(30px,3.4vw,52px); }
.cs-head{ flex:0 0 auto; }
.cs-num{ display:block; font-size:14px; font-weight:800; color: var(--naranja); letter-spacing:.05em; margin-bottom:12px; }
.cs-num i{ font-style:normal; color: var(--muted); font-weight:600; }
.cs-head h3{ margin:0; font-size: clamp(16px,1.35vw,19px); font-weight:800; color: var(--ink); line-height:1.3; }
.cs-body{ margin-top: clamp(16px,2.4vh,24px); }
.cs-body p{ margin:0; font-size: clamp(21px,2.15vw,28px); font-weight:500; line-height:1.42; color: var(--ink); max-width:34ch; }
.cs-foot{ flex:0 0 auto; padding-top: clamp(20px,2.8vh,28px); }
.cs-btn{ display:inline-block; background: var(--ink); color:#fff; font-weight:700; font-size: clamp(13px,1vw,15px);
  padding: 13px 24px; border-radius:999px; text-decoration:none; transition: background .2s ease, color .2s ease; }
.cs-btn:hover{ background:#000; }
/* Sobre las tarjetas blancas del diagnóstico, el over es naranja. */
.cs-foot .cs-btn:hover{ background: var(--naranja); }
/* Sobre las franjas naranjas (sticky y la del cierre en FAQ), el over es blanco. */
.recap-cta .cs-btn:hover{ background:#fff; color: var(--ink); }
.cs-img{ position:relative; background: var(--paper-2); }
.cs-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.cs-dots{ display:flex; justify-content:center; gap:9px; margin-top: clamp(18px,2.6vh,26px); }
.cs-dot{ width:8px; height:8px; padding:0; border-radius:50%; border:none; background: var(--line);
  cursor:pointer; transition: background .2s ease, transform .2s ease; }
.cs-dot:hover{ background: var(--muted); }
.cs-dot.active{ background: var(--naranja); transform: scale(1.35); }

/* ---------- ESCENA 9 · Del diagnóstico a la acción — scroll normal
   (antes vivía en un track pineado de 100vh completo: sin importar cómo
   se alineara el título, siempre quedaba un vacío grande en algún lado
   porque el hueco existía sí o no. Ahora ocupa solo el alto de su propio
   contenido, así que tapsSection queda pegado justo debajo). Padding-
   bottom chico a propósito: el recuadro negro de los taps es el
   contenido directo de este título, deben sentirse juntos. */
.lp-action-intro{ padding: clamp(64px,10vh,110px) 0 clamp(20px,3vh,32px); text-align:center; }
.da-title{ text-align:center; font-size: clamp(28px,3.6vw,46px); font-weight:800; letter-spacing:-0.02em; line-height:1.18; color: var(--ink); }
/* font-family:Arimo (no solo font-style:italic) — mismo motivo que
   .lect-title .accent arriba: iguala la tipografía real del titular de
   referencia ("muestra el camino.", que usa <em>), no solo la inclinación. */
.da-title .accent{ font-family:'Arimo', Georgia, serif; font-style:italic; color: var(--naranja); text-decoration:underline;
  text-decoration-thickness:3px; text-underline-offset:7px; }
/* Antes no tenía color propio (solo el color de la línea de abajo) — el
   texto se quedaba del color base del título en vez de naranja, por eso
   se veía "menos bold" que el resto de titulares con acento. */
.da-title .accent-line{ font-family:'Arimo', Georgia, serif; font-style:italic; color: var(--naranja); text-decoration:underline;
  text-decoration-color: var(--naranja); text-decoration-thickness:3px; text-underline-offset:7px; }
.da-lead{ margin-top:14px; font-size: clamp(15px,1.4vw,19px); color: var(--ink); line-height:1.4;
  max-width:52ch; margin-inline:auto; }
.da-note{ text-align:center; margin-top: clamp(24px,3.4vh,40px); font-size: clamp(15px,1.2vw,18px); font-weight:700; color: var(--ink);
  max-width:64ch; margin-inline:auto; text-wrap:balance; }
.da-note .accent{ color: var(--naranja); }

/* ---------- Barra CTA naranja reutilizable (.recap-cta / .recap-cta-left /
   .badge) — ya solo vive en el FAQ (.faq-cta-wrap), el bloque de recap y la
   barra sticky que la usaban en esta sección se quitaron por completo. */
.recap-cta-wrap{ flex:0 0 auto; width:100%; padding-inline: var(--gutter); padding-bottom: clamp(36px,5.6vh,64px); }
.recap-cta{ position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:20px; max-width:1080px; margin-inline:auto;
  background: var(--naranja); border-radius:16px; padding: clamp(16px,1.8vw,24px) clamp(20px,2.2vw,30px); }
/* Brillo que barre el fondo cada pocos segundos, para que la franja se
   sienta viva sin distraer del mensaje. */
.recap-cta::after{ content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.35), transparent);
  animation: cta-shine 4.5s ease-in-out infinite; pointer-events:none; }
@keyframes cta-shine{ 0%{ left:-60%; } 35%{ left:140%; } 100%{ left:140%; } }
@media (prefers-reduced-motion: reduce){ .recap-cta::after{ animation:none; display:none; } }
.recap-cta-left{ position:relative; z-index:1; display:flex; gap:14px; align-items:flex-start; flex:1 1 auto; min-width:0; }
.recap-cta .cs-btn{ position:relative; z-index:1; flex:0 0 auto; white-space:nowrap; }
.recap-cta-left .badge{ width:34px; height:34px; border-radius:10px; background: var(--ink); flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; }
.recap-cta-left .badge img{ width:18px; }
.recap-cta-left p{ font-size: clamp(14.5px,1.3vw,18px); font-weight:600; color:#fff; line-height:1.4; max-width:52ch; }
.recap-cta-left .rc-strong{ font-weight:800; }
.recap-cta-left .rc-sub{ margin-top:4px; font-weight:600; color:#fff; }

/* ---------- Del diagnóstico a la acción — taps (fuera del track, scroll
   normal). Padding-top chico a propósito: este bloque es el contexto
   directo del título/bajada de la Escena 9 justo arriba, así que debe
   sentirse pegado a ella, no como una sección nueva. Todo el nav+panel
   vive dentro de una caja oscura ancha (1440px, más ancha que el .shell
   normal de 1240 — "quiero que se vea más") con su propio contenedor
   .taps-shell; el da-note y el banner de cierre vuelven al .shell
   estándar. Nada de animación al cambiar de tap, solo swap de clase
   (initTapsDiagnostico, landing.js). */
.lp-taps-section{ padding: clamp(24px,3.5vh,40px) 0 clamp(72px,10vh,110px); }
.taps-shell{ width:100%; max-width:1440px; margin-inline:auto; padding-inline: var(--gutter); }
.taps-box{ background: var(--ink); border-radius:28px; padding: clamp(24px,3vw,44px) clamp(20px,3vw,48px) clamp(36px,4.5vw,56px); }

/* Nav tipo "pasos": el activo es una píldora naranja, los demás son
   texto plano separados por flechas — se lee como un stepper, no como
   pestañas sueltas. */
.taps-nav{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap: clamp(10px,1.4vw,14px);
  padding-bottom: clamp(20px,2.6vh,28px); border-bottom:1px solid rgba(255,255,255,.14); }
.taps-btn{ background:none; border:none; font-family:inherit; cursor:pointer; white-space:nowrap;
  font-size: clamp(12.5px,1vw,14px); font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  color: rgba(243,241,238,.55); padding:0; transition: color .15s ease; }
.taps-btn:hover{ color:#fff; }
.taps-btn.active{ background: var(--naranja); color:#fff; border-radius:999px;
  padding: clamp(10px,1.4vh,13px) clamp(18px,1.8vw,22px); }
.taps-sep{ color: var(--naranja); font-weight:800; font-size:14px; }

.taps-panels{ margin-top: clamp(28px,4vh,44px); }
.taps-panel{ display:none; grid-template-columns:1fr auto 1fr; align-items:center; gap: clamp(20px,2.4vw,32px); }
.taps-panel.active{ display:grid; }
/* Aparición escalonada al cambiar de tap: primero todo el lado de la X
   (foto, después su texto), y solo cuando ya terminó entra el lado del
   check (foto, después su texto) — 4 pasos en cadena, no los 2 lados a la
   vez. Ver initTapsDiagnostico en landing.js, que agrega .in en el frame
   siguiente a .active para que esto sí anime (display:none → grid no es
   animable por sí solo). */
.taps-panel .taps-col > img{ opacity:0; transform: translateY(14px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1); }
.taps-panel .taps-caption{ opacity:0; transform: translateY(14px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1); }
.taps-panel.in .taps-col:first-child > img{ transition-delay: 0s; }
.taps-panel.in .taps-col:first-child .taps-caption{ transition-delay: .35s; }
.taps-panel.in .taps-col:last-child > img{ transition-delay: .7s; }
.taps-panel.in .taps-col:last-child .taps-caption{ transition-delay: 1.05s; }
.taps-panel.in .taps-col > img,
.taps-panel.in .taps-caption{ opacity:1; transform:none; }
.taps-col-label{ font-size: clamp(14px,1.2vw,17px); font-weight:800; border-radius:10px;
  padding: clamp(12px,1.5vh,15px) clamp(14px,1.6vw,18px); margin-bottom: clamp(14px,2vh,18px); }
.taps-col:first-child .taps-col-label{ color:#fff; border:1px solid rgba(255,255,255,.35); }
.taps-col:last-child .taps-col-label{ color: var(--ink); background:#fff; }
/* > (no descendiente): esta regla es solo para la foto principal, para
   que no alcance también al ícono chico dentro de .taps-caption (ese
   ícono ya tiene su propio tamaño en .taps-icon — antes SÍ lo alcanzaba
   por ser más específica que .taps-icon, y el ícono se veía gigante). */
.taps-col > img{ display:block; width:100%; aspect-ratio: 480/350; object-fit:cover; border-radius:14px; }
/* Franja de color a todo el ancho (gris para la X, naranja para el
   check) — no solo el ícono suelto — así se lee de un vistazo cuál es
   la pieza sin dirección y cuál ya tiene el criterio del diagnóstico. */
.taps-caption{ display:flex; align-items:center; gap:12px; margin-top: clamp(14px,2vh,18px);
  border-radius:14px; padding: clamp(14px,1.8vh,18px) clamp(16px,1.8vw,20px); background: var(--dark-2); }
.taps-col:last-child .taps-caption{ background: var(--naranja); }
.taps-icon{ flex:0 0 auto; width: clamp(32px,2.6vw,40px); height: clamp(32px,2.6vw,40px); }
.taps-caption p{ font-size: clamp(13.5px,1.1vw,15.5px); line-height:1.4; color:#fff; font-weight:700; }

/* Banner de cierre — "esto no reemplaza a tu equipo" (reutiliza el
   patrón .badge del resto del sitio: cuadro negro con el logo). */
.taps-reassure{ position:relative; overflow:hidden; display:flex; gap:16px; align-items:center; max-width:900px; margin: clamp(28px,4vh,44px) auto 0;
  background: var(--naranja); border-radius:18px; padding: clamp(20px,2.4vw,28px) clamp(24px,2.8vw,34px); }
/* Mismo brillo que las demás franjas naranjas (.recap-cta / .lo-inner),
   reutiliza @keyframes cta-shine. */
.taps-reassure::after{ content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.35), transparent);
  animation: cta-shine 4.5s ease-in-out infinite; pointer-events:none; }
@media (prefers-reduced-motion: reduce){ .taps-reassure::after{ animation:none; display:none; } }
.taps-reassure .badge{ position:relative; z-index:1; width: clamp(38px,3.4vw,46px); height: clamp(38px,3.4vw,46px); border-radius:12px;
  background: var(--ink); flex:0 0 auto; display:flex; align-items:center; justify-content:center; }
.taps-reassure .badge img{ width:58%; }
.taps-reassure p{ position:relative; z-index:1; font-size: clamp(14px,1.2vw,17px); font-weight:700; color:#fff; line-height:1.4; }

/* ---------- Beneficios tangibles para el equipo del cliente (fuera del
   track, scroll normal) — tarjetas oscuras con título en itálica naranja
   en vez de número, mismo fondo/spacing que "Diagnóstico en 3 pasos". ---------- */
.lp-benefits-section{ padding: clamp(64px,10vh,110px) 0 clamp(28px,4vh,44px); text-align:center; }
.lp-benefits-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap: clamp(16px,2vw,24px);
  max-width:1140px; margin-inline:auto; margin-top: clamp(36px,5.5vh,56px); }
.lp-benefit-card{ background: var(--ink); color:#fff; border-radius:20px; padding: clamp(26px,2.6vw,38px);
  min-height: clamp(220px,26vh,280px); text-align:left; display:flex; flex-direction:column; gap:16px;
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease; }
.lp-benefit-card:hover{ transform: scale(1.035); box-shadow: 0 14px 36px rgba(0,0,0,.35); }
.lp-benefit-card h4{ font-style:italic; font-weight:800; color: var(--naranja); font-size: clamp(19px,1.9vw,24px); line-height:1.3; }
.lp-benefit-card p{ font-size: clamp(14.5px,1.3vw,17px); line-height:1.5; color: rgba(255,255,255,.82); }

/* ---------- Diagnóstico en 3 pasos (fuera del track, scroll normal) ----------
   padding-bottom simétrico al top: antes era chico a propósito porque el
   bloque de la brújula/obsequio venía justo después pegado a esta sección;
   ese bloque se quitó, así que ahora pagoSection sigue directo y este
   padding vuelve al mismo tamaño normal que usa el resto del sitio. */
.lp-steps-section{ padding: clamp(64px,10vh,110px) 0; text-align:center; }
.lp-steps-section .lp-steps3{ max-width:980px; margin-inline:auto; }

/* ---------- Criterio humano / Andrés (scroll normal) ----------
   Antes la foto era el elemento dominante (34% a todo lo alto de la
   pantalla) y le quitaba peso visual al mensaje. Ahora vive dentro de
   .shell como el resto de secciones, con una foto de apoyo moderada al
   lado del texto — el criterio manda, no el retrato. */
.lp-criterio-section{ padding: clamp(64px,10vh,110px) 0; background: var(--ink); }
.crit-shell{ display:flex; align-items:center; gap: clamp(40px,6vw,90px); }
.crit-photo{ flex:0 0 30%; max-width:320px; }
.crit-photo img{ display:block; width:100%; aspect-ratio: 3/4; object-fit:cover; filter:grayscale(1); border-radius:14px; }
.crit-content{ flex:1 1 auto; min-width:0; text-align:left; }
/* Un solo contenedor con ancho fijo para ícono + título + párrafos: así
   todos comparten el mismo borde izquierdo (antes cada uno tenía su propio
   max-width y se centraban por separado, por eso "se corrían"). */
.crit-inner{ width:100%; max-width:52ch; }
.crit-motif .motif-ring{ border-color: rgba(255,255,255,.16); }
.crit-content h2{ font-size: clamp(21px,2.5vw,33px); font-weight:800; line-height:1.28; color:#fff; }
.crit-lead{ margin-top: clamp(20px,3vh,32px); font-size: clamp(14.5px,1.2vw,17px); line-height:1.55; color: rgba(243,241,238,.78); }
.crit-stats{ margin-top: clamp(28px,4vh,44px); display:flex; align-items:center; gap: clamp(28px,3.6vw,52px); }
.crit-num{ font-size: clamp(26px,2.6vw,36px); font-weight:800; color: var(--naranja); }
.crit-num .plus{ font-style:italic; font-weight:800; font-size:.65em; margin-right:1px; }
.crit-label{ margin-top:6px; font-size: clamp(12px,1vw,14px); font-weight:600; color: rgba(243,241,238,.78); line-height:1.35; }

/* ---------- Precios (scroll normal) ----------
   La sección más importante: tarjetas blancas muy elevadas sobre el fondo
   oscuro (sombra fuerte, no sutil), azul exacto de Wompi en los botones,
   alineación cuidada en cada fila del resumen. Ya no vive en un track
   pineado (ver punto 10 de los ajustes intermedios) — con padding normal
   en vez de centrado a 100vh, así el contenido nunca se aprieta ni se
   corta sin importar cuánto crezca. */
.lp-pay-section{ padding: clamp(64px,10vh,110px) 0; background: var(--ink); }
.pay-grid{ display:grid; grid-template-columns:1fr 1fr; gap: clamp(40px,5vw,90px); align-items:center; }

/* Intro centrada arriba de las 2 tarjetas (punto 10 de los ajustes
   intermedios) — reemplaza la vieja columna de texto a la izquierda. */
.pay-intro{ text-align:center; max-width:760px; margin:0 auto clamp(36px,5.5vh,56px); }
.pay-intro .pay-lead{ max-width:64ch; margin-inline:auto; }

.pay-title{ font-size: clamp(26px,3vw,38px); font-weight:800; line-height:1.25; color:#fff; }
.pay-title em{ font-style:italic; color: var(--on-dark-mut); font-weight:800; }
/* --on-dark-mut (55% opacity) se sentía muy apagado para esta columna, y
   --on-dark (100%) muy fuerte — este tono intermedio (78%) es solo para
   .pay-info, sin tocar el --on-dark-mut que usa el resto del sitio. */
.pay-lead{ margin-top: clamp(14px,2vh,20px); font-size: clamp(14px,1.2vw,17px); line-height:1.5; color: rgba(243,241,238,.78); }

/* 2 tarjetas de precio lado a lado (reemplaza el viejo pay-info+pay-card
   de una sola tarjeta con checkbox). Reutilizan .pay-card/.pay-tag/etc,
   que ya existían para la columna derecha vieja. */
.pay-cards-grid{ display:grid; grid-template-columns:1fr 1fr; gap: clamp(20px,2.4vw,32px);
  max-width:980px; margin-inline:auto; align-items:stretch; }
/* min-height reserva 2 líneas siempre (aunque el texto de esta tarjeta
   quepa en 1), así el precio de las 2 tarjetas arranca a la misma
   altura — se sienten comparables en vez de desalineadas. */
.pay-card-title{ margin-top: clamp(10px,1.4vh,14px); font-size: clamp(20px,2vw,26px); font-weight:800;
  line-height:1.25; color: var(--ink); min-height:2.5em; }
.pay-card-title em{ font-style:italic; }
/* .pay-list ya existía para la columna oscura vieja (texto claro sobre
   fondo --ink) — acá vive dentro de una tarjeta clara, así que necesita
   su propio color oscuro. */
.pay-card .pay-list li{ color: var(--ink-2); }
/* La lista crece (flex:1) para que los 2 botones queden alineados en la
   misma fila, pero align-content:start evita que eso separe los ítems
   entre sí — quedan con su gap de 10px fijo, apretados arriba, y el
   espacio de sobra (cuando la tarjeta tiene menos ítems que la otra)
   cae DESPUÉS del último ítem, antes del botón. Así el botón nunca
   queda pegado al texto y las 2 tarjetas se sienten enfrentadas. */
.pay-card .pay-list{ flex:1 1 auto; }
.pay-card .pay-wompi-btn{ margin-top: clamp(22px,3vh,30px); }
.pay-sub{ margin-top: clamp(22px,3.2vh,32px); font-size: clamp(15px,1.25vw,18px); font-weight:800; color:#fff; }
.pay-list{ margin-top:12px; list-style:none; display:grid; gap:10px; align-content:start; }
.pay-list li{ font-size: clamp(13.5px,1.1vw,15.5px); line-height:1.45; padding-left:16px; position:relative; color: rgba(243,241,238,.78); }
.pay-list li::before{ content:"•"; position:absolute; left:0; color: var(--naranja); }
.pay-text{ margin-top:12px; font-size: clamp(13.5px,1.1vw,15.5px); line-height:1.5; color: rgba(243,241,238,.78); }
.pay-text.muted{ margin-top: clamp(18px,2.6vh,26px); }
.pay-highlight{ margin-top:10px; font-size: clamp(13.5px,1.1vw,15.5px); font-weight:700; color: var(--naranja); }

/* "Tu diagnóstico incluye" / "¿Quieres ir más a fondo?" como acordeón —
   abierto por defecto (así en desktop, sin JS, se ve idéntico a antes).
   Solo en móvil arrancan cerrados (ver initPayAccordions en landing.js),
   para que esta vista no se sienta un bloque enorme de texto. */
.pay-accordion{ margin-top: clamp(22px,3.2vh,32px); }
.pay-accordion .pay-sub{ margin-top:0; cursor:pointer; list-style:none;
  display:flex; align-items:center; justify-content:space-between; gap:12px; }
.pay-accordion .pay-sub::-webkit-details-marker{ display:none; }
.pay-accordion .pay-sub::after{ content:"+"; font-weight:400; color: var(--naranja);
  font-size:1.4em; line-height:1; flex:0 0 auto; }
.pay-accordion[open] .pay-sub::after{ content:"–"; }
.pay-accordion .pay-list, .pay-accordion .pay-text{ margin-top:12px; }
.pay-accordion .pay-text:first-of-type{ margin-top:12px; }

.pay-card{ display:flex; flex-direction:column; background:#fff; border-radius:20px; padding: clamp(28px,2.8vw,40px);
  box-shadow: 0 24px 64px rgba(0,0,0,.4), 0 4px 16px rgba(0,0,0,.2);
  transition: transform .3s cubic-bezier(.16,1,.3,1); }
/* La tarjeta entera crece al pasar el mouse sobre SU botón (no con
   cualquier hover en la tarjeta) — :has() detecta el hover del botón hijo. */
.pay-card:has(.pay-wompi-btn:hover){ transform: scale(1.025); }
.pay-card-basico{ background: #d9dde4; }
.pay-tag{ display:inline-block; align-self:flex-start; font-size: clamp(12px,1vw,14px); font-weight:800; letter-spacing:.04em;
  color:#fff; background: var(--ink); text-transform:uppercase; border-radius:999px;
  padding: clamp(7px,.9vh,9px) clamp(16px,1.6vw,20px); }
.pay-tag-accent{ background: var(--naranja); }
.pay-old{ display:block; margin-top:6px; font-size: clamp(13px,1.05vw,15px); font-weight:700; color: var(--muted);
  text-decoration:line-through; }
.pay-price{ margin-top:8px; display:flex; align-items:baseline; gap:8px; }
.pay-price-num{ font-size: clamp(34px,4vw,52px); font-weight:800; color: var(--naranja); letter-spacing:-0.01em; }
.pay-price-cur{ font-size: clamp(16px,1.6vw,22px); font-weight:800; color: var(--naranja); }
.pay-once{ margin-top:4px; font-size: clamp(15px,1.35vw,19px); font-weight:800; color: var(--ink); min-height:3em; }

.pay-divider{ height:1px; background: var(--line); margin: clamp(20px,2.6vh,28px) 0; }

.pay-summary-title{ font-size: clamp(15px,1.3vw,18px); font-weight:800; color: var(--ink); margin-bottom: clamp(12px,1.8vh,18px); }
.pay-row{ display:flex; justify-content:space-between; align-items:center; gap:12px; padding: clamp(10px,1.4vh,14px) 0;
  border-bottom:1px solid var(--line-soft); font-size: clamp(13px,1.1vw,15px); color: var(--ink); }
.pay-row span:first-child:not(.pay-checkbox){ flex:1 1 auto; }
.pay-row span:last-child{ flex:0 0 auto; font-weight:600; white-space:nowrap; }
/* <small>, no <span>: así no la alcanza ".pay-row span:last-child" (le
   pondría white-space:nowrap y rompería el ajuste de línea en móvil). */
.pay-row-sub{ display:block; margin-top:3px; font-size:0.85em; font-weight:400; color: var(--muted); }
.pay-check{ cursor:pointer; align-items:flex-start; }
.pay-checkbox{ position:relative; flex:0 0 20px; width:20px; height:20px; aspect-ratio:1/1; margin-top:2px; }
.pay-checkbox input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.pay-checkbox-box{ position:absolute; inset:0; background:#fff; border:2px solid var(--naranja); border-radius:6px;
  transition: background .15s ease; }
.pay-checkbox input:checked + .pay-checkbox-box{ background: var(--naranja); }
.pay-checkbox input:checked + .pay-checkbox-box::after{ content:""; position:absolute; left:6px; top:2px; width:5px; height:10px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.pay-check-label{ flex:1 1 auto; line-height:1.35; }
/* span.pay-check-body iguala la especificidad de ".pay-row span:last-child"
   (misma cuenta: 2 clases + 1 elemento) para poder pisarla — si no, ese
   selector genérico le gana y la deja con flex:0/white-space:nowrap,
   rompiendo el ajuste de línea del texto gris de abajo. */
.pay-check .pay-check-label{ font-weight:600; }
.pay-check span.pay-check-body{ flex:1 1 auto; white-space:normal; display:flex; flex-direction:column; gap:4px; }
/* .pay-check-desc también es ":last-child" dentro de .pay-check-body, así
   que ".pay-row span:last-child" lo alcanza igual y le pone
   white-space:nowrap — mismo problema que arriba, misma solución: igualar
   la especificidad (2 clases + 1 elemento) para poder pisarla. */
.pay-check span.pay-check-desc{ font-size: clamp(12.5px,1vw,14px); line-height:1.5; color: var(--ink-2); font-weight:400; white-space:normal; flex:1 1 auto; }
.pay-total{ border-bottom:none; padding-top: clamp(14px,2vh,18px); font-weight:800; font-size: clamp(15px,1.3vw,18px); }
.pay-total span:last-child{ color: var(--naranja); font-size: clamp(17px,1.5vw,21px); }

.pay-wompi-btn{ width:100%; margin-top: clamp(18px,2.6vh,26px); color:#fff; border:none;
  border-radius:16px; padding: clamp(15px,1.6vw,19px); font-size: clamp(15px,1.3vw,18px); font-weight:800;
  font-family:inherit; cursor:pointer; transition: background .2s ease, transform .2s ease; }
.pay-wompi-btn[disabled]{ opacity:.6; cursor:not-allowed; }
.pay-wompi-btn:active{ transform: scale(.98); }

.pay-card-basico .pay-wompi-btn{ background: var(--ink); }
.pay-card-basico .pay-wompi-btn:hover{ background:#38363a; transform: translateY(-1px); }
.pay-card-basico .pay-wompi-btn[disabled]:hover{ background: var(--ink); transform:none; }

.pay-card-marca .pay-wompi-btn{ background: var(--naranja); }
.pay-card-marca .pay-wompi-btn:hover{ background: var(--naranja-deep); transform: translateY(-1px); }
.pay-card-marca .pay-wompi-btn[disabled]:hover{ background: var(--naranja); transform:none; }

.pay-trust{ margin-top: clamp(14px,2vh,18px); display:flex; justify-content:center; gap: clamp(16px,2vw,26px); }
.pay-trust span{ font-size: clamp(11.5px,.95vw,13px); color: var(--muted); }

/* ---------- FAQ (fuera del sistema de escenas fijas) ----------
   A propósito NO vive dentro de .scene-track: aquí el scroll es normal
   (sin pin ni crossfade), para que esta última parte de la página tenga
   más cuerpo y espacio para distribuir la información.
   "¿Sobre qué tienes dudas?" es un selector real (ver initFaqPicker en
   landing.js) que despliega TODAS las preguntas de FAQ_DATA; afuera solo
   quedan 5 accesos directos (FAQ_QUICK_LINKS). Elegir cualquiera
   reemplaza los accesos directos por la respuesta. El logo va al final,
   chico y centrado, como un footer. */
.lp-faq-section{ padding: clamp(72px,11vh,120px) 0 clamp(48px,7vh,80px); }
.lp-faq-section .shell{ width:100%; max-width:1000px; }
.faq-head{ text-align:center; }
.faq-title{ font-size: clamp(32px,4.2vw,54px); font-weight:800; letter-spacing:-0.02em; line-height:1.15; color: var(--ink); }
/* font-family:Arimo + italic — misma tipografía real del titular de
   referencia ("muestra el camino.", que usa <em>), no solo el subrayado. */
.faq-title .accent{ font-family:'Arimo', Georgia, serif; font-style:italic; text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:7px; }

/* position+z-index explícitos: el desplegable debe pintar por encima de
   la franja CTA que viene después en el DOM. */
.faq-select-wrap{ position:relative; z-index:5; margin-top: clamp(28px,4vh,44px); }
.faq-select{ position:relative; margin-inline:auto; max-width:420px; }
.faq-select-trigger{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-family:inherit; background:#fff; border:1.5px solid var(--line); border-radius:14px;
  padding: clamp(14px,1.5vw,17px) clamp(18px,1.8vw,22px); font-size: clamp(14px,1.1vw,16px); color: var(--ink);
  cursor:pointer; box-shadow: 0 10px 28px rgba(36,33,36,.07); transition: border-color .2s ease; }
.faq-select-trigger:hover{ border-color: var(--naranja); }
.faq-select-arrow{ color: var(--naranja); font-size:15px; transition: transform .2s ease; }
.faq-select-trigger[aria-expanded="true"] .faq-select-arrow{ transform: rotate(180deg); }

.faq-dropdown{ position:absolute; left:0; right:0; top: calc(100% + 8px); background:#fff; border-radius:14px;
  box-shadow: 0 20px 50px rgba(36,33,36,.16); max-height:0; overflow:hidden; opacity:0; pointer-events:none;
  transition: max-height .25s ease, opacity .2s ease; z-index:20; }
.faq-dropdown.open{ max-height:320px; overflow-y:auto; opacity:1; pointer-events:auto; }
.faq-option{ display:block; width:100%; text-align:left; font-family:inherit; background:none; border:none;
  border-bottom:1px solid var(--line-soft); padding: 13px 20px; font-size: clamp(13px,1.05vw,14.5px);
  color: var(--ink); cursor:pointer; }
.faq-option:last-child{ border-bottom:none; }
.faq-option:hover{ background: var(--paper-2); color: var(--naranja); }

/* Alto reservado: quick-links y respuesta se alternan (uno visible a la
   vez) dentro de esta misma caja, centrados verticalmente entre el
   selector y el CTA, así el espacio no cambia al elegir una pregunta —
   sin brinco y sin que el contenido de la respuesta se vea apretado. */
.faq-content-zone{ margin-top: clamp(20px,3vh,30px); min-height: 280px; display:flex; flex-direction:column; justify-content:center; }
.faq-quick{ display:flex; flex-wrap:wrap; justify-content:center; gap:9px; }
.faq-chip{ font-family:inherit; background:none; border:1.5px solid var(--line); border-radius:999px; padding:11px 20px;
  font-size: clamp(12px,.95vw,13.5px); color: var(--ink); cursor:pointer; max-width:340px; text-align:center; line-height:1.3;
  transition: border-color .2s ease, background .2s ease; }
.faq-chip:hover{ border-color: var(--naranja); background: rgba(255,107,71,.06); }

.faq-answer{ display:none; text-align:center; max-width:640px; margin-inline:auto; }
.faq-answer.on{ display:block; }
.faq-answer h4{ font-size: clamp(18px,1.7vw,23px); font-weight:800; color: var(--ink); }
.faq-answer p{ margin-top:12px; font-size: clamp(14px,1.15vw,16.5px); line-height:1.55; color: var(--ink-2); }
.faq-back{ margin-top:18px; font-family:inherit; background:none; border:none; color: var(--naranja); font-weight:700;
  font-size:13px; cursor:pointer; }

/* Solo en el FAQ: la franja CTA baja más (más aire antes/después de la
   respuesta) y lleva un único mensaje, más grande. */
.faq-cta-wrap{ margin-top: clamp(40px,6vh,64px); }
.faq-cta-wrap .recap-cta-left{ align-items:center; }
.faq-cta-msg{ font-size: clamp(16px,1.5vw,20px); font-weight:700; color:#fff; }

.faq-footer-logo{ margin-top: clamp(36px,5.5vh,56px); text-align:center; font-weight:800;
  font-size: clamp(20px,2.2vw,28px); color: var(--ink); }
.faq-footer-logo .accent{ color: var(--naranja); }

.faq-fineprint{ margin-top: clamp(18px,2.6vh,24px); text-align:center; font-size:12px; color: var(--muted); line-height:1.5;
  max-width:92ch; margin-inline:auto; padding-top: clamp(18px,2.6vh,24px); border-top:1px solid var(--line-soft); }

/* Tarjetas de cita (carrusel con peek) */
.lp-quotes{ margin-top: clamp(36px,5vh,56px); }
.lp-quotes-track{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  padding: 4px 4px 6px; scrollbar-width:none; }
.lp-quotes-track::-webkit-scrollbar{ display:none; }
.lp-qcard{ flex:0 0 auto; width: 300px; scroll-snap-align:start; background: var(--paper-2); border-radius:16px;
  padding: clamp(20px,2vw,30px); }
.lp-qcard .qm{ font-size:34px; color: var(--naranja); font-weight:800; line-height:1; font-family:Georgia,serif; }
.lp-qcard p{ margin-top:10px; font-size: clamp(15px,1.1vw,18px); line-height:1.5; font-weight:500; }
.lp-dots{ display:flex; justify-content:center; gap:7px; margin-top:18px; }
.lp-dots i{ width:7px; height:7px; border-radius:50%; background: var(--line); }
.lp-dots i.on{ background: var(--naranja); }
@media(min-width:900px){ .lp-quotes-track{ overflow:visible; } .lp-qcard{ flex:1 1 0; width:auto; } .lp-dots{ display:none; } }

/* Mercado -> Mensaje -> Decisión */
.lp-flow{ display:flex; align-items:center; justify-content:center; gap: clamp(10px,1.6vw,22px); flex-wrap:wrap;
  margin-top: clamp(28px,4vh,44px); font-size: clamp(18px,2vw,32px); font-weight:800; }
.lp-flow span.arrow{ color: var(--naranja); font-weight:400; }
.lp-lockup{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top: clamp(34px,5vh,54px); }
.lp-lockup img{ height:22px; }
.lp-lockup span{ font-weight:800; font-size:19px; color:#fff; }

/* Carrusel de imágenes del diagnóstico con caption */
.lp-shots{ margin-top: clamp(36px,5vh,56px); max-width: 880px; margin-inline:auto; }
.lp-shots-frame{ position:relative; display:flex; align-items:center; gap: clamp(10px,1.4vw,22px); }
.lp-shots-box{ position:relative; flex:1; aspect-ratio: 8/5; border-radius:16px; overflow:hidden; background: var(--paper-2);
  display:flex; align-items:center; justify-content:center; }
.lp-shots-box img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .5s ease; }
.lp-shots-box img.on{ opacity:1; }
.lp-shots-box .ph-label{ color: var(--muted); font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.1em; }
.lp-shots-nav{ background:none; border:none; color: var(--naranja); font-size:30px; font-weight:700; cursor:pointer; flex:0 0 auto; padding:6px; }
.lp-shots-dots{ display:flex; justify-content:center; gap:7px; margin-top:16px; }
.lp-shots-dots i{ width:7px; height:7px; border-radius:50%; background: var(--line); }
.lp-shots-dots i.on{ background: var(--naranja); }
.lp-shots-cap{ margin-top: clamp(18px,2.4vw,30px); background: var(--white); border:1px solid var(--line); border-radius:14px;
  padding: clamp(18px,1.8vw,28px); display:flex; gap:14px; align-items:flex-start; }
.lp-shots-cap .badge{ width:32px; height:32px; border-radius:9px; background: var(--ink); flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; }
.lp-shots-cap .badge img{ width:18px; }
.lp-shots-cap h4{ font-size: clamp(15px,1.15vw,19px); font-weight:800; color: var(--naranja); margin-bottom:4px; }
.lp-shots-cap p{ font-size: clamp(13.5px,1vw,16px); color: var(--ink-2); line-height:1.5; }

/* Del diagnóstico a la acción: 2 columnas dark/orange */
.lp-2col{ display:grid; grid-template-columns:1fr 1fr; gap: clamp(2px,0.3vw,4px); margin-top: clamp(36px,5vh,56px);
  border-radius:16px; overflow:hidden; }
.lp-2col .c1{ background: var(--ink); color:#fff; padding: clamp(24px,2.4vw,36px); }
.lp-2col .c2{ background: var(--naranja); color:#fff; padding: clamp(24px,2.4vw,36px); }
.lp-2col h4{ font-size: clamp(16px,1.35vw,21px); font-weight:800; margin-bottom:16px; }
.lp-2col ul{ list-style:none; display:grid; gap:10px; }
.lp-2col ul li{ font-size: clamp(14px,1.05vw,17px); line-height:1.4; padding-left:16px; position:relative; }
.lp-2col ul li::before{ content:"•"; position:absolute; left:0; opacity:.7; }

/* Pasos (3 tarjetas naranjas / 3 tarjetas oscuras) — número arriba, título +
   texto agrupados y empujados hacia abajo (margin-top:auto), como en el PDF.
   Mismo hover de crecer + sombra a color que el resto de tarjetas del sitio. */
.lp-steps3{ display:grid; grid-template-columns:repeat(3,1fr); gap: clamp(12px,1.4vw,22px); margin-top: clamp(30px,4vh,44px); }
.lp-s3{ border-radius:14px; padding: clamp(24px,2.2vw,34px); min-height: clamp(260px,34vh,340px); text-align:left;
  display:flex; flex-direction:column; transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease; }
.lp-s3:hover{ transform: scale(1.035); }
.lp-s3.orange{ background: var(--naranja); color:#fff; }
.lp-s3.orange:hover{ box-shadow: 0 14px 36px rgba(255,107,71,.35); }
.lp-s3.black{ background: var(--ink); color:#fff; }
.lp-s3.black:hover{ box-shadow: 0 14px 36px rgba(0,0,0,.32); }
.lp-s3 .n{ flex:0 0 auto; font-size: clamp(26px,2.6vw,34px); font-weight:800; display:block; }
.lp-s3.orange .n{ color: var(--ink); }
.lp-s3.black .n{ color: var(--naranja); }
.lp-s3-body{ margin-top:auto; }
.lp-s3 h5{ font-size: clamp(20px,2.1vw,28px); font-weight:800; line-height:1.25; margin-bottom:10px; }
.lp-s3 p{ font-size: clamp(15px,1.35vw,18px); line-height:1.4; opacity:.92; }
.lp-steps-note{ text-align:center; font-weight:700; font-size: clamp(17px,1.5vw,22px); margin-top: clamp(24px,3vh,36px); }

/* Criterio humano + stats */
.lp-crit{ display:grid; grid-template-columns:1.2fr .85fr; gap: clamp(30px,4.5vw,80px); align-items:center; }
.lp-crit .stats{ display:flex; gap: clamp(24px,3vw,48px); margin-top: clamp(28px,4vh,40px); }
.lp-crit .stat b{ color: var(--naranja); font-size: clamp(26px,2.6vw,42px); font-weight:800; }
.lp-crit .stat span{ display:block; font-size:13px; color: var(--on-dark-mut); margin-top:4px; max-width:16ch; }
.lp-crit figure{ border-radius:16px; overflow:hidden; aspect-ratio:4/3.3; }
.lp-crit figure img{ width:100%; height:100%; object-fit:cover; object-position:50% 20%; }
.lp-crit .credit{ margin-top: clamp(20px,3vh,30px); font-size:14px; color: var(--muted); }

/* ---------- Checkout / precio ---------- */
.lp-checkout{ display:grid; grid-template-columns: 1fr .95fr; gap: clamp(30px,4vw,64px); align-items:start; }
.lp-checkout .lp-priceoffer{ background: var(--naranja); color:#fff; border-radius:14px; padding: clamp(18px,1.8vw,26px) clamp(20px,2vw,30px);
  margin-top: clamp(20px,2.6vh,32px); }
.lp-checkout .lp-priceoffer .tag{ font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.lp-checkout .lp-priceoffer .old{ font-size:15px; text-decoration:line-through; opacity:.7; display:block; margin-top:6px; }
.lp-checkout .lp-priceoffer .now{ font-size: clamp(32px,3.2vw,48px); font-weight:800; }
.lp-checkout .lp-priceoffer .now small{ font-size:16px; font-weight:600; }
.lp-checkout .lp-opt-title{ margin-top: clamp(22px,3vh,32px); font-weight:700; font-size:15px; }
.lp-checkout .lp-opt-title .accent{ font-weight:800; }
.lp-checkout ul.lp-opt-list{ list-style:none; margin-top:14px; display:grid; gap:10px; }
.lp-checkout ul.lp-opt-list li{ display:flex; gap:10px; font-size:15px; line-height:1.4; }
.lp-checkout ul.lp-opt-list li::before{ content:"•"; color: var(--naranja); font-weight:700; }
.lp-photo-ph{ margin-top: clamp(20px,2.6vh,30px); background: var(--paper-2); border-radius:14px; aspect-ratio:16/10;
  display:flex; align-items:center; justify-content:center; color: var(--muted); font-size:13px; }

.lp-summary{ background:#fff; border:1px solid var(--line); border-radius:18px; padding: clamp(22px,2.2vw,32px); box-shadow:0 8px 32px rgba(36,33,36,.06); }
.lp-summary h4{ font-size:19px; font-weight:800; margin-bottom:16px; }
.lp-sum-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:12px 0; border-bottom:1px solid var(--line-soft); font-size:14px; }
.lp-sum-row .lbl{ font-weight:600; }
.lp-sum-row .val{ font-weight:700; white-space:nowrap; }
.lp-sum-check{ display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--line-soft); cursor:pointer; }
.lp-sum-check input{ margin-top:3px; width:17px; height:17px; accent-color: var(--naranja); flex:0 0 auto; }
.lp-sum-check .txt strong{ font-size:14px; font-weight:700; display:block; }
.lp-sum-check .txt span{ font-size:12px; color: var(--muted); line-height:1.4; display:block; margin-top:3px; }
.lp-sum-check .txt .plus{ color: var(--naranja); font-weight:700; font-size:12px; display:block; margin-top:4px; }
.lp-sum-total{ padding: 16px 0; }
.lp-sum-total .lbl{ font-size:14px; font-weight:700; }
.lp-sum-total .big{ font-size: clamp(28px,2.8vw,38px); font-weight:800; color: var(--naranja); margin-top:6px; }
.lp-sum-total .big small{ font-size:15px; font-weight:600; }
.lp-sum-total .note{ font-size:12px; color: var(--muted); margin-top:4px; }
.lp-sum-includes{ margin: 14px 0 18px; padding-top:14px; border-top:1px solid var(--line-soft); }
.lp-sum-includes p.h{ font-size:13px; font-weight:700; margin-bottom:8px; }
.lp-sum-includes ul{ list-style:none; display:grid; gap:8px; }
.lp-sum-includes ul li{ font-size:12.5px; line-height:1.4; color: var(--ink-2); padding-left:18px; position:relative; }
.lp-sum-includes ul li::before{ content:"✓"; position:absolute; left:0; color: var(--naranja); font-weight:700; }
#wompi-btn-container{ margin-top:4px; min-height:52px; }
.lp-trust{ display:flex; gap:16px; justify-content:center; margin-top:12px; }
.lp-trust span{ font-size:11.5px; color: var(--muted); display:flex; align-items:center; gap:5px; }
.lp-fineprint{ font-size:11.5px; color: var(--muted); line-height:1.5; margin-top:14px; text-align:center; }

/* ---------- FAQ ---------- */
.lp-faq{ max-width:860px; margin-inline:auto; }
.lp-faq-item{ background:#fff; border:1px solid var(--line); border-radius:12px; margin-bottom:12px; overflow:hidden; }
.lp-faq-head{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:16px;
  background:none; border:none; padding: clamp(16px,1.6vw,22px) clamp(18px,1.8vw,24px); font-family:inherit;
  font-size: clamp(15px,1.15vw,18px); font-weight:700; text-align:left; cursor:pointer; color: var(--ink); }
.lp-faq-chev{ flex:0 0 auto; width:11px; height:11px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transform:rotate(45deg); transition:transform .25s; margin-top:-4px; }
.lp-faq-item.open .lp-faq-chev{ transform:rotate(-135deg); margin-top:4px; }
.lp-faq-body{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.lp-faq-item.open .lp-faq-body{ max-height:400px; }
.lp-faq-body p{ padding: 0 clamp(18px,1.8vw,24px) clamp(18px,1.8vw,22px); font-size: clamp(13.5px,1.02vw,16px); color: var(--ink-2); line-height:1.55; }

/* ===========================================================
   FONT GATE — pantalla de carga mientras terminan de descargar las
   fuentes de Adobe. Sin esto, el navegador pinta primero con la fuente
   de respaldo del sistema y "salta" a la real cuando termina de
   descargar (FOUT) — visible sobre todo en la primera visita. Se
   oculta apenas el navegador confirma que las fuentes están listas
   (document.fonts.ready, ver script al inicio del body de cada
   página), con un tope de 2.5s por si la conexión es lenta.
   =========================================================== */
.font-gate{
  position:fixed; inset:0; z-index:99999; background: var(--ink);
  display:flex; align-items:center; justify-content:center;
  opacity:1; transition: opacity .4s ease;
}
.font-gate-hidden{ opacity:0; pointer-events:none; }

/* ===========================================================
   SLIDE 1 · LOADING — pantalla completa mientras "el agente trabaja"
   =========================================================== */
.lp-loader{
  display:none; position:fixed; inset:0; z-index:999; background: var(--ink); color:#fff;
  flex-direction:column; align-items:center; justify-content:center; padding: 40px var(--gutter);
}
.lp-loader.active{ display:flex; }
.ll-center{ text-align:center; }

.ll-ring{ position:relative; width:112px; height:112px; margin:0 auto 34px;
  border-radius:50%; border:1.5px solid rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; }
.ll-badge{ width:60px; height:60px; border-radius:14px; }
.ll-orbit{ position:absolute; inset:0; animation: ll-spin 2.6s linear infinite; }
.ll-dot{ position:absolute; top:-2px; left:50%; width:11px; height:11px; margin-left:-5.5px; border-radius:50%;
  background: var(--naranja);
  box-shadow: 0 0 16px 5px rgba(255,107,71,.55), 0 0 34px 14px rgba(255,107,71,.22); }
@keyframes ll-spin{ to{ transform: rotate(360deg); } }

.ll-title{ font-size: clamp(20px,2vw,28px); font-weight:800; letter-spacing:-0.01em;
  animation: ll-fadein 1s ease both, ll-pulse 2.6s ease-in-out 1.1s infinite; }
.ll-sub{ margin-top:10px; font-size: clamp(14px,1.05vw,17px); color: var(--on-dark-mut);
  animation: ll-fadein 1s ease .15s both, ll-pulse 2.6s ease-in-out 1.1s infinite; }
@keyframes ll-fadein{ from{ opacity:0; filter: blur(6px); transform: translateY(6px); } to{ opacity:1; filter: blur(0); transform:none; } }
@keyframes ll-pulse{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }

.ll-foot{ position:absolute; left:0; right:0; bottom:0; padding: 0 var(--gutter) 26px; }
.ll-disclaimer{ max-width:900px; margin:0 auto 22px; text-align:center; font-size:13px; line-height:1.6; color: rgba(255,255,255,.28); }
.ll-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:13px; color: rgba(255,255,255,.3);
  border-top:1px solid rgba(255,255,255,.08); padding-top:18px; max-width: var(--maxw); margin-inline:auto; }

/* ===========================================================
   ANIMACIÓN DE ENTRADA (reveal) — igual patrón que el sitio rediseñado.
   Lo que ya está en pantalla al cargar se revela al instante (nunca
   depende del scroll); lo que está más abajo anima al aparecer.
   =========================================================== */
.rv{ opacity:0; transform: translateY(36px); transition: opacity .8s ease, transform .85s cubic-bezier(.16,1,.3,1); }
.rv.v{ opacity:1; transform:none; }
.rv.d1{ transition-delay:.08s; } .rv.d2{ transition-delay:.16s; }
.rv.d3{ transition-delay:.24s; } .rv.d4{ transition-delay:.32s; }
/* Si el JS no llega a correr, el contenido no debe quedar invisible */
html:not(.lp-js) .rv{ opacity:1 !important; transform:none !important; }
@media (prefers-reduced-motion: reduce){
  .rv{ transition:none !important; opacity:1 !important; transform:none !important; }
}