/* ============================================================
APEX — LANDING (rediseño completo)
Esta hoja es la piel del recorrido público de APEX. Se carga la
ÚLTIMA de la lista de de index.html y TODA regla suya cuelga
de `#landingView` o del prefijo `.lp-`, así que:
· no puede alterar ni un selector de la app autenticada, y
· el resto de hojas (base, components, app…) siguen mandando
dentro de #appShell exactamente igual que antes.
Es la misma garantía de no regresión que max.css consigue con
html[data-tier="max"]. Si añades estilos aquí, mantén el prefijo.
TRES REGLAS DE DISEÑO que definen esta landing:
1. NO SE INVENTA UNA PALETA — y aquí eso significa algo muy
concreto: **cada token de color de esta hoja se DERIVA de un
token de base.css**, no se copia su valor. Fondo, superficies,
texto, apagados, filetes y el carmesí de marca son literalmente
los de la app, en claro y en oscuro.
La primera versión sí copió los valores, y con un gris frío
(#0C0E12/#111318) que no es el oscuro de APEX: el de APEX es
CÁLIDO (#150d0a sobre crema). El resultado era otra aplicación
pegada a la misma URL — exactamente lo que este proyecto ya
rechazó una vez con la paleta obsidiana de Max. Derivando de
los tokens, un cambio de tema en base.css llega aquí solo y la
landing no puede volver a divergir.
El carmesí aparece en dosis mínimas (un filo, un punto, una
palabra); nunca como relleno de fondo.
2. EL TEMA ES DEL USUARIO. La landing se ve igual de intencionada
en claro y en oscuro. No fuerza ninguno (theme-boot.js decide, y
el botón del menú móvil sigue funcionando).
3. LA JERARQUÍA LA HACE LA TIPOGRAFÍA Y EL AIRE, no la decoración.
Sin sombras pesadas, sin degradados de relleno, sin "glass" más
allá del desenfoque de la barra superior. Los separadores son
filetes de 1px.
Y una regla de contenido: `[aria-hidden="true"]` está PROHIBIDO de
facto (base.css trae una regla global que le pone display:none, ver
la nota en CLAUDE.md). Los adornos de esta landing son elementos
VACÍOS, así que no necesitan el atributo: un lector de pantalla no
anuncia un sin contenido.
============================================================ */
/* ============================================================
TOKENS — capa propia, derivada de la identidad de APEX.
No se redefine ningún token global: todo lleva el prefijo --lp-.
============================================================ */
/* ============================================================
ALCANCE DE ESTA HOJA — #landingView Y .lp-page
La portada sigue siendo #landingView (una vista dentro del SPA de
index.html). Las páginas del sitio multipágina (site/pages.js →
scripts/build-site.js) son documentos HTML propios y llevan la
clase .lp-page en su .
Los cuatro selectores que NO cuelgan del prefijo .lp- nombran los
dos, dentro de :where() para que pesen CERO. Eso último importa:
`#landingView button{font:inherit}` pesa (1,0,1) y ya se comió una
vez el tamaño de un botón del pie. Un reset con especificidad de id
gana a cualquier componente que venga después, así que aquí todo
reset va envuelto.
Las otras 407 reglas de esta hoja ya llevan prefijo .lp-, así que
funcionan igual en los dos contextos sin tocar una línea — y
siguen siendo inertes dentro de #appShell.
============================================================ */
:where(#landingView,.lp-page){
/* ---- Color: TODO derivado de base.css ----
Ni un valor propio. --bg/--surface/--text/--muted/--blue ya cambian
solos con html[data-theme], así que esta capa no necesita su propia
versión oscura: hereda la de APEX, que es cálida por identidad. */
--lp-canvas:var(--bg);
--lp-canvas-alt:var(--surface2);
--lp-surface:var(--surface);
--lp-surface-2:var(--surface2);
--lp-ink:var(--text);
--lp-ink-2:var(--muted);
--lp-ink-3:var(--muted2);
/* El cuarto nivel de apagado no existe en base.css: es el más tenue
(rótulos de procedencia, notas al pie) y se saca del propio --muted2
para que siga al tema en vez de fijar un gris. */
--lp-ink-4:color-mix(in srgb,var(--muted2) 72%,transparent);
--lp-line:var(--border);
--lp-line-2:color-mix(in srgb,var(--text) 22%,transparent);
--lp-accent:var(--blue);
--lp-accent-ink:var(--blue);
--lp-accent-soft:var(--blue-soft);
--lp-accent-line:var(--blue-soft-border);
/* Blanco puro, igual que .btn en components.css: el relleno carmesí
es el mismo en los dos temas, así que su texto también. */
--lp-on-accent:#fff;
--lp-ok:var(--green);
--lp-warn:var(--amber);
--lp-bad:var(--red);
--lp-grid:color-mix(in srgb,var(--text) 5%,transparent);
--lp-field:radial-gradient(1100px 520px at 72% -10%,color-mix(in srgb,var(--blue) 8%,transparent),transparent 62%);
/* Escala editorial. clamp() en todo lo grande: el salto de móvil a
escritorio es una COMPOSICIÓN distinta, no el mismo texto encogido. */
--lp-display:clamp(42px,8.4vw,104px);
--lp-h2:clamp(30px,4.6vw,60px);
--lp-h3:clamp(19px,1.7vw,24px);
--lp-lede:clamp(16.5px,1.45vw,20px);
--lp-body:16px;
--lp-small:13.5px;
--lp-micro:11px;
--lp-gutter:clamp(20px,5vw,72px);
--lp-max:1200px;
--lp-pad:clamp(84px,11vw,176px);
--lp-r:14px;
--lp-r-lg:22px;
--lp-ease:cubic-bezier(.2,.7,.25,1);
--lp-ease-soft:cubic-bezier(.4,0,.2,1);
}
/* Lo ÚNICO que el tema oscuro necesita aparte: el resplandor del hero y
del cierre. En claro es un velo casi invisible sobre crema; en oscuro,
sobre #150d0a, ese mismo 8% no se ve — hace falta más cuerpo para que
el carmesí se intuya sin encender la pantalla. Es intensidad, no un
color nuevo. */
html[data-theme="dark"] :where(#landingView,.lp-page){
--lp-field:radial-gradient(1100px 540px at 72% -12%,color-mix(in srgb,var(--blue) 22%,transparent),transparent 64%);
}
/* ------------------------------------------------------------
BASE
------------------------------------------------------------ */
:where(#landingView,.lp-page){
background:var(--lp-canvas);
color:var(--lp-ink);
font-family:var(--font-body);
font-size:var(--lp-body);
line-height:1.6;
-webkit-font-smoothing:antialiased;
}
/* El reset va dentro de :where() a propósito: así su especificidad es
CERO y cualquier regla de componente de más abajo le gana con una
sola clase. Escrito como `#landingView button{font:inherit}` pesaba
(1,0,1) y se comía el font-size de .lp-footer-btn sin que nada
fallara — se vio en una captura, no en el código. */
:where(#landingView,.lp-page) *{box-sizing:border-box;}
:where(#landingView,.lp-page) p{margin:0;}
:where(#landingView,.lp-page) h1,:where(#landingView,.lp-page) h2,
:where(#landingView,.lp-page) h3,:where(#landingView,.lp-page) h4{margin:0;font-family:var(--font-display);}
:where(#landingView,.lp-page) ul,:where(#landingView,.lp-page) ol{margin:0;padding:0;list-style:none;}
:where(#landingView,.lp-page) a{color:inherit;text-decoration:none;}
:where(#landingView,.lp-page) button{font:inherit;color:inherit;}
:where(#landingView,.lp-page) :focus-visible{outline:2px solid var(--lp-accent);outline-offset:3px;border-radius:4px;}
.lp-skip{
position:absolute;left:-9999px;top:0;z-index:90;
padding:12px 18px;border-radius:0 0 var(--lp-r) 0;
background:var(--lp-ink);color:var(--lp-canvas);font-size:var(--lp-small);font-weight:600;
}
.lp-skip:focus{left:0;}
.lp-wrap{width:min(var(--lp-max),100%);margin:0 auto;padding-inline:var(--lp-gutter);}
.lp-wrap.is-narrow{width:min(820px,100%);}
.lp-section{padding-block:var(--lp-pad);position:relative;}
/* El filete superior es el ÚNICO separador entre secciones: ni fondos
alternos, ni tarjetas contenedoras. El ritmo lo hace el aire. */
.lp-section + .lp-section{border-top:1px solid var(--lp-line);}
.lp-eyebrow{
font:600 var(--lp-micro)/1 var(--font-mono);
letter-spacing:.18em;text-transform:uppercase;color:var(--lp-accent-ink);
margin-bottom:22px;
}
.lp-h2{
font-size:var(--lp-h2);font-weight:700;line-height:1.02;letter-spacing:-.035em;
color:var(--lp-ink);text-wrap:balance;
}
.lp-lede{
margin-top:26px;max-width:62ch;
font-size:var(--lp-lede);line-height:1.55;color:var(--lp-ink-2);letter-spacing:-.011em;
}
.lp-lede em{color:var(--lp-ink);font-style:italic;}
.lp-lede strong{color:var(--lp-ink);font-weight:600;}
.lp-kicker-en{
margin-top:20px;font:400 var(--lp-lede)/1.4 var(--font-display);
letter-spacing:-.02em;color:var(--lp-ink-3);font-style:italic;
}
.lp-head{max-width:900px;margin:0 auto clamp(52px,6vw,86px);text-align:center;}
.lp-head.is-left{max-width:none;margin:0;text-align:left;}
.lp-head.is-left .lp-lede{margin-inline:0;}
.lp-head .lp-lede{margin-inline:auto;}
.lp-col-label{
font:600 var(--lp-micro)/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;
color:var(--lp-ink-3);margin-bottom:24px;
}
/* La afirmación de cierre de una sección: dos líneas, la segunda en
gris. Es la voz de APEX, y por eso nunca lleva caja ni fondo. */
.lp-statement{
font-family:var(--font-display);font-size:clamp(22px,2.9vw,38px);font-weight:600;
line-height:1.2;letter-spacing:-.028em;color:var(--lp-ink);text-wrap:balance;
}
.lp-statement span{color:var(--lp-ink-3);}
.lp-statement-wide{margin-top:clamp(56px,6vw,92px);text-align:center;}
/* ------------------------------------------------------------
BOTONES — dos formas y nada más: sólido (una sola acción primaria
por pantalla) y filete. Radio pequeño a propósito: la píldora de
la app es el lenguaje del producto; aquí manda lo editorial.
------------------------------------------------------------ */
.lp-btn{
display:inline-flex;align-items:center;justify-content:center;gap:9px;
padding:12px 22px;border-radius:999px;border:1px solid transparent;
font-size:var(--lp-small);font-weight:600;letter-spacing:-.01em;
cursor:pointer;background:transparent;white-space:nowrap;
transition:background .22s var(--lp-ease),border-color .22s var(--lp-ease),color .22s var(--lp-ease),transform .22s var(--lp-ease);
}
.lp-btn-lg{padding:15px 30px;font-size:15px;}
.lp-btn-solid{background:var(--lp-accent);color:var(--lp-on-accent);border-color:var(--lp-accent);}
.lp-btn-solid:hover{background:color-mix(in srgb,var(--lp-accent) 86%,var(--lp-ink));border-color:transparent;}
.lp-btn-solid:active{transform:scale(.982);}
.lp-btn-line{border-color:var(--lp-line-2);color:var(--lp-ink);}
.lp-btn-line:hover{border-color:var(--lp-ink);background:var(--lp-accent-soft);}
.lp-btn-line:active{transform:scale(.982);}
.lp-btn-quiet{color:var(--lp-ink-2);padding-inline:14px;}
.lp-btn-quiet:hover{color:var(--lp-ink);}
/* ============================================================
BARRA SUPERIOR
============================================================ */
.lp-nav{
position:sticky;top:0;z-index:40;
background:color-mix(in srgb,var(--lp-canvas) 72%,transparent);
backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
border-bottom:1px solid transparent;
transition:border-color .3s var(--lp-ease),background .3s var(--lp-ease);
}
.lp-nav.is-scrolled{
background:color-mix(in srgb,var(--lp-canvas) 92%,transparent);
border-bottom-color:var(--lp-line);
}
.lp-nav-inner{
width:min(var(--lp-max),100%);margin:0 auto;padding:16px var(--lp-gutter);
display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,3vw,48px);
}
.lp-brand{display:flex;align-items:center;gap:11px;flex-shrink:0;}
.lp-brand-mark{width:28px;height:28px;object-fit:contain;display:block;}
.lp-brand-text{display:flex;flex-direction:column;line-height:1.05;}
.lp-brand-name{font-family:var(--font-display);font-weight:700;font-size:16.5px;letter-spacing:-.02em;}
.lp-brand-sub{font:500 9.5px/1.3 var(--font-mono);letter-spacing:.11em;text-transform:uppercase;color:var(--lp-ink-3);margin-top:3px;}
.lp-nav-links{display:flex;align-items:center;gap:clamp(14px,1.8vw,28px);}
.lp-nav-links a{
font-size:var(--lp-small);font-weight:500;color:var(--lp-ink-2);
padding-block:6px;position:relative;transition:color .2s var(--lp-ease);
/* Un enlace de dos palabras partido en dos líneas descuadra la barra
entera: antes que eso, la barra se queda sin enlaces (hay drawer). */
white-space:nowrap;
}
.lp-nav-links a:hover{color:var(--lp-ink);}
/* La sección visible se marca con un punto, no con un subrayado: un
subrayado compite con los enlaces del propio contenido. */
.lp-nav-links a.is-current{color:var(--lp-ink);}
.lp-nav-links a.is-current::after{
content:"";position:absolute;left:50%;bottom:-2px;width:4px;height:4px;margin-left:-2px;
border-radius:50%;background:var(--lp-accent);
}
.lp-nav-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;}
/* Progreso de lectura: 1px en el borde inferior de la barra. Es la
única "métrica" de la página y no pide atención. */
.lp-nav-progress{
display:block;height:1.5px;width:0%;background:var(--lp-accent);
transition:width .12s linear;
}
.lp-burger{
display:none;width:42px;height:42px;padding:0;flex-shrink:0;cursor:pointer;
border:1px solid var(--lp-line-2);border-radius:11px;background:transparent;
flex-direction:column;align-items:center;justify-content:center;gap:4px;
}
.lp-burger span{width:15px;height:1.5px;border-radius:1px;background:var(--lp-ink);transition:transform .2s var(--lp-ease),opacity .2s var(--lp-ease);}
.lp-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg);}
.lp-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.lp-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);}
/* ============================================================
1 · HERO
============================================================ */
.lp-hero{
position:relative;overflow:hidden;
padding:clamp(72px,11vh,132px) 0 clamp(64px,9vh,104px);
}
/* Campo de fondo: un resplandor carmesí muy bajo + retícula fina. Es
un elemento VACÍO (ver la nota sobre aria-hidden arriba). */
.lp-hero-field{
position:absolute;inset:0;pointer-events:none;
background:
var(--lp-field),
repeating-linear-gradient(to right,var(--lp-grid) 0 1px,transparent 1px 112px),
repeating-linear-gradient(to bottom,var(--lp-grid) 0 1px,transparent 1px 112px);
/* La máscara llega hasta el 100% (antes cortaba en 78% y el propio
corte se veía como una línea horizontal a media pantalla). */
mask-image:radial-gradient(125% 100% at 50% -10%,#000 12%,rgba(0,0,0,.45) 55%,transparent 100%);
-webkit-mask-image:radial-gradient(125% 100% at 50% -10%,#000 12%,rgba(0,0,0,.45) 55%,transparent 100%);
}
.lp-hero-inner{position:relative;width:min(var(--lp-max),100%);margin:0 auto;padding-inline:var(--lp-gutter);}
.lp-hero-eyebrow{
font:600 var(--lp-micro)/1 var(--font-mono);letter-spacing:.24em;text-transform:uppercase;
color:var(--lp-ink-3);
}
.lp-hero-title{
margin-top:26px;
font-size:var(--lp-display);font-weight:700;line-height:.96;letter-spacing:-.045em;
}
.lp-hero-line{display:block;}
.lp-hero-line-accent{color:var(--lp-ink-2);}
.lp-hero-lede{
margin-top:clamp(26px,3vw,38px);max-width:56ch;
font-size:var(--lp-lede);line-height:1.55;color:var(--lp-ink-2);letter-spacing:-.011em;
}
.lp-hero-lede strong{color:var(--lp-ink);font-weight:600;}
.lp-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(30px,3.4vw,42px);}
.lp-hero-note{
margin-top:20px;font:400 var(--lp-small)/1.6 var(--font-body);color:var(--lp-ink-3);
}
/* El objeto de marca: pensamiento → pregunta. */
.lp-hero-object{
position:relative;width:min(var(--lp-max),100%);margin:clamp(52px,6vw,84px) auto 0;
padding-inline:var(--lp-gutter);
display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1.15fr);align-items:center;
}
.lp-thought{
padding:clamp(22px,2.4vw,32px);border:1px solid var(--lp-line);border-radius:var(--lp-r-lg);
background:color-mix(in srgb,var(--lp-surface) 55%,transparent);
}
.lp-thought-tag,.lp-answer-tag{
display:inline-flex;align-items:center;gap:7px;
font:600 var(--lp-micro)/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--lp-ink-3);
}
.lp-thought-text{
margin-top:16px;font-family:var(--font-display);font-size:clamp(17px,1.6vw,21px);
line-height:1.45;letter-spacing:-.018em;color:var(--lp-ink-2);font-style:italic;
}
.lp-hero-link{
height:1px;background:linear-gradient(to right,var(--lp-line),var(--lp-accent-line));
}
.lp-answer{
padding:clamp(24px,2.6vw,36px);border:1px solid var(--lp-line-2);border-radius:var(--lp-r-lg);
background:var(--lp-surface);
/* El filo carmesí de la izquierda es el único sitio del hero donde
el color de marca toca una superficie. */
box-shadow:inset 3px 0 0 var(--lp-accent);
}
.lp-answer-tag{color:var(--lp-accent-ink);}
.lp-answer-dot{width:6px;height:6px;border-radius:50%;background:var(--lp-accent);animation:lpPulse 2.6s var(--lp-ease-soft) infinite;}
@keyframes lpPulse{0%,100%{opacity:1;}50%{opacity:.35;}}
.lp-answer-text{
margin-top:16px;min-height:2.9em;
font-family:var(--font-display);font-size:clamp(18px,1.8vw,24px);font-weight:600;
line-height:1.35;letter-spacing:-.025em;color:var(--lp-ink);
}
.lp-caret{
display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-.12em;
background:var(--lp-accent);animation:lpCaret 1s step-end infinite;
}
.lp-caret.is-done{display:none;}
@keyframes lpCaret{0%,100%{opacity:1;}50%{opacity:0;}}
.lp-answer-meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:22px;padding-top:18px;border-top:1px solid var(--lp-line);}
.lp-answer-meta li{
font:400 12.5px/1.4 var(--font-body);color:var(--lp-ink-3);
display:flex;align-items:center;gap:7px;
}
.lp-answer-meta li::before{content:"";width:3px;height:3px;border-radius:50%;background:var(--lp-ink-4);}
.lp-scrollcue{
display:flex;flex-direction:column;align-items:center;gap:10px;
width:fit-content;margin:clamp(48px,6vw,80px) auto 0;
font:600 var(--lp-micro)/1 var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--lp-ink-4);
}
.lp-scrollcue-rail{position:relative;display:block;width:1px;height:46px;background:var(--lp-line-2);overflow:hidden;}
.lp-scrollcue-dot{position:absolute;left:-1.5px;top:0;width:4px;height:12px;border-radius:2px;background:var(--lp-accent);animation:lpCue 2.4s var(--lp-ease-soft) infinite;}
@keyframes lpCue{0%{transform:translateY(-14px);opacity:0;}30%{opacity:1;}100%{transform:translateY(46px);opacity:0;}}
.lp-scrollcue:hover{color:var(--lp-ink-2);}
/* ============================================================
2 · LA SECUENCIA (sticky, sin scroll hijacking)
La sección mide tres pantallas de alto; el panel se queda quieto y
solo cambia su contenido. El scroll NUNCA se intercepta: la página
se mueve a la velocidad del usuario.
============================================================ */
.lp-sequence{position:relative;border-top:1px solid var(--lp-line);}
.lp-sequence-stage{
position:sticky;top:0;height:100vh;height:100svh;
display:grid;place-items:center;
width:min(var(--lp-max),100%);margin:0 auto;padding-inline:var(--lp-gutter);
}
.lp-sequence-slot{position:relative;width:100%;max-width:840px;min-height:340px;display:grid;}
.lp-seq-step{
grid-area:1/1;align-self:center;
opacity:0;transform:translateY(16px);pointer-events:none;
transition:opacity .55s var(--lp-ease),transform .55s var(--lp-ease);
}
.lp-seq-step.is-active{opacity:1;transform:none;pointer-events:auto;}
.lp-seq-index{font:600 var(--lp-micro)/1 var(--font-mono);letter-spacing:.2em;color:var(--lp-accent-ink);margin-bottom:26px;}
.lp-seq-title{
font-size:clamp(28px,4.4vw,58px);font-weight:700;line-height:1.04;letter-spacing:-.038em;text-wrap:balance;
}
.lp-seq-body{margin-top:26px;max-width:52ch;font-size:var(--lp-lede);line-height:1.55;color:var(--lp-ink-2);}
.lp-seq-link{
display:inline-flex;align-items:center;gap:8px;margin-top:32px;
font-size:var(--lp-small);font-weight:600;color:var(--lp-accent-ink);
border-bottom:1px solid var(--lp-accent-line);padding-bottom:3px;
}
.lp-seq-link::after{content:"↓";}
.lp-seq-link:hover{border-bottom-color:var(--lp-accent);}
/* El ruido: doce fuentes de información que aparecen y, en el paso 2,
se apagan casi del todo. Es la idea de la sección, contada sin texto. */
.lp-noise{display:flex;flex-wrap:wrap;gap:10px;margin-top:38px;max-width:680px;}
.lp-noise span{
padding:8px 15px;border:1px solid var(--lp-line);border-radius:999px;
font-size:12.5px;color:var(--lp-ink-2);
opacity:0;transform:translateY(8px);
animation:lpNoiseIn .5s var(--lp-ease) forwards;
}
.lp-noise span:nth-child(1){animation-delay:.05s;}
.lp-noise span:nth-child(2){animation-delay:.1s;}
.lp-noise span:nth-child(3){animation-delay:.15s;}
.lp-noise span:nth-child(4){animation-delay:.2s;}
.lp-noise span:nth-child(5){animation-delay:.25s;}
.lp-noise span:nth-child(6){animation-delay:.3s;}
.lp-noise span:nth-child(7){animation-delay:.35s;}
.lp-noise span:nth-child(8){animation-delay:.4s;}
.lp-noise span:nth-child(9){animation-delay:.45s;}
.lp-noise span:nth-child(10){animation-delay:.5s;}
.lp-noise span:nth-child(11){animation-delay:.55s;}
.lp-noise span:nth-child(12){animation-delay:.6s;}
@keyframes lpNoiseIn{to{opacity:1;transform:none;}}
.lp-sequence-rail{
position:absolute;right:var(--lp-gutter);top:50%;transform:translateY(-50%);
display:flex;flex-direction:column;gap:10px;
}
.lp-sequence-tick{width:2px;height:22px;border-radius:2px;background:var(--lp-line-2);transition:background .4s var(--lp-ease),height .4s var(--lp-ease);}
.lp-sequence-tick.is-active{background:var(--lp-accent);height:34px;}
/* Los marcadores solo existen para que el observador sepa en qué tramo
está el scroll. No pintan nada. 85vh y no 100: con tres tramos de
pantalla entera la sección pedía cuatro pantallas de scroll para
contar tres frases, y eso se siente como una página que no avanza. */
.lp-sequence-marker{display:block;height:85vh;height:85svh;}
/* ============================================================
3 · EL PROBLEMA — los diez segundos
============================================================ */
.lp-tenseconds{margin-top:clamp(16px,2vw,28px);}
.lp-tenseconds-track{
display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;
border-top:1px solid var(--lp-line);
}
.lp-ts-step{position:relative;display:flex;flex-direction:column;padding:30px 22px 34px 0;}
.lp-ts-step::before{
content:"";position:absolute;left:0;top:-4px;width:7px;height:7px;border-radius:50%;
background:var(--lp-ink-4);
}
.lp-ts-step.is-final::before{background:var(--lp-accent);box-shadow:0 0 0 5px var(--lp-accent-soft);}
.lp-ts-time{font:500 var(--lp-micro)/1 var(--font-mono);letter-spacing:.1em;color:var(--lp-ink-4);}
.lp-ts-text{margin-top:14px;font-size:clamp(15px,1.3vw,18px);font-weight:500;line-height:1.35;letter-spacing:-.015em;color:var(--lp-ink);}
.lp-ts-note{
/* margin-top:auto — los cinco rótulos se alinean por abajo aunque el
texto de encima ocupe una o dos líneas. */
align-self:flex-start;margin-top:auto;padding:4px 10px;border-radius:999px;
border:1px solid var(--lp-line);font:500 11px/1.5 var(--font-body);color:var(--lp-ink-3);
}
.lp-ts-text + .lp-ts-note{margin-top:16px;}
.lp-ts-note.is-final{border-color:var(--lp-accent-line);color:var(--lp-accent-ink);background:var(--lp-accent-soft);}
.lp-problem-close{margin-top:clamp(64px,7vw,104px);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:end;}
.lp-problem-note{color:var(--lp-ink-3);font-size:var(--lp-body);line-height:1.65;max-width:46ch;}
/* ============================================================
4 · QUÉ ES APEX
============================================================ */
.lp-what-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(36px,5vw,90px);}
.lp-do li{
display:grid;grid-template-columns:44px minmax(0,1fr);gap:0 14px;align-items:baseline;
padding:20px 0;border-top:1px solid var(--lp-line);
font-size:var(--lp-body);line-height:1.6;color:var(--lp-ink-2);
}
.lp-do li:last-child{border-bottom:1px solid var(--lp-line);}
.lp-do-n{font:500 var(--lp-micro)/1 var(--font-mono);letter-spacing:.08em;color:var(--lp-ink-4);}
.lp-do-t{display:block;min-width:0;}
.lp-do strong{color:var(--lp-ink);font-weight:600;display:block;margin-bottom:4px;letter-spacing:-.018em;}
.lp-what-col.is-not{
padding:clamp(26px,2.6vw,36px);border:1px solid var(--lp-line);border-radius:var(--lp-r-lg);
background:color-mix(in srgb,var(--lp-surface) 50%,transparent);align-self:start;
}
.lp-dont li{
position:relative;padding:12px 0 12px 26px;font-size:var(--lp-small);line-height:1.55;color:var(--lp-ink-2);
border-bottom:1px solid var(--lp-line);
}
.lp-dont li:last-child{border-bottom:none;}
.lp-dont li::before{
content:"";position:absolute;left:0;top:19px;width:11px;height:1px;background:var(--lp-accent);
}
.lp-dont-close{margin-top:22px;padding-top:18px;border-top:1px solid var(--lp-line);font-size:12.5px;line-height:1.6;color:var(--lp-ink-3);}
/* ============================================================
5 · ADAPTIVE — la cadena de siete capas
============================================================ */
.lp-chain{display:grid;grid-template-columns:minmax(230px,300px) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start;}
.lp-chain-nodes{position:relative;}
/* La línea vertical que une las siete capas: es la "cadena". */
.lp-chain-nodes::before{
content:"";position:absolute;left:5px;top:16px;bottom:16px;width:1px;background:var(--lp-line);
}
.lp-chain-node{
display:flex;align-items:center;gap:16px;width:100%;padding:11px 0;
background:none;border:none;cursor:pointer;text-align:left;
color:var(--lp-ink-3);font-size:15px;font-weight:500;letter-spacing:-.012em;
transition:color .25s var(--lp-ease);
}
.lp-chain-node:hover{color:var(--lp-ink-2);}
.lp-chain-node.is-active{color:var(--lp-ink);}
.lp-chain-dot{
position:relative;z-index:1;width:11px;height:11px;flex-shrink:0;border-radius:50%;
background:var(--lp-canvas);border:1px solid var(--lp-line-2);
transition:background .25s var(--lp-ease),border-color .25s var(--lp-ease),box-shadow .25s var(--lp-ease);
}
.lp-chain-node.is-active .lp-chain-dot{background:var(--lp-accent);border-color:var(--lp-accent);box-shadow:0 0 0 4px var(--lp-accent-soft);}
.lp-chain-panel{position:relative;min-height:330px;display:grid;}
.lp-chain-card{
grid-area:1/1;
padding:clamp(28px,3vw,44px);border:1px solid var(--lp-line);border-radius:var(--lp-r-lg);
background:var(--lp-surface);
opacity:0;transform:translateY(12px);pointer-events:none;
transition:opacity .4s var(--lp-ease),transform .4s var(--lp-ease);
}
.lp-chain-card.is-active{opacity:1;transform:none;pointer-events:auto;}
.lp-chain-step{font:500 var(--lp-micro)/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--lp-ink-4);}
.lp-chain-card h3{margin-top:16px;font-size:var(--lp-h3);font-weight:700;letter-spacing:-.028em;}
.lp-chain-card p{margin-top:16px;font-size:var(--lp-body);line-height:1.65;color:var(--lp-ink-2);max-width:56ch;}
/* La cita es lo que APEX diría de verdad en esa capa: enseña el TONO,
que es la mitad del producto. */
.lp-chain-quote{
margin-top:26px !important;padding:16px 20px;border-left:2px solid var(--lp-accent);
background:var(--lp-accent-soft);border-radius:0 var(--lp-r) var(--lp-r) 0;
font-family:var(--font-display);font-style:italic;font-size:15.5px !important;
line-height:1.5 !important;color:var(--lp-ink) !important;
}
.lp-adaptive-foot{
margin-top:clamp(44px,5vw,68px);padding-top:26px;border-top:1px solid var(--lp-line);
max-width:72ch;font-size:var(--lp-small);line-height:1.7;color:var(--lp-ink-3);
}
.lp-adaptive-foot strong{color:var(--lp-ink-2);font-weight:600;}
/* ============================================================
6 · LA ESCALERA información → inteligencia
============================================================ */
.lp-ladder-steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(12px,1.6vw,24px);align-items:start;}
/* La primera fila es FIJA (200px) y la barra se apoya en su base: así
las seis barras comparten suelo Y los seis textos comparten techo.
Con un flex bottom-aligned, un peldaño con una línea menos de texto
se descolgaba hacia abajo respecto a los demás. */
.lp-ladder-step{display:grid;grid-template-rows:200px auto auto auto;}
/* La barra crece con el peldaño, y su intensidad también: la idea se
lee antes que el texto. */
.lp-ladder-bar{
display:block;width:100%;align-self:end;border-radius:3px 3px 0 0;margin-bottom:22px;
}
.lp-ladder-step:nth-child(1) .lp-ladder-bar{height:22px;background:color-mix(in srgb,var(--lp-ink) 9%,transparent);}
.lp-ladder-step:nth-child(2) .lp-ladder-bar{height:44px;background:color-mix(in srgb,var(--lp-ink) 13%,transparent);}
.lp-ladder-step:nth-child(3) .lp-ladder-bar{height:70px;background:color-mix(in srgb,var(--lp-ink) 18%,transparent);}
.lp-ladder-step:nth-child(4) .lp-ladder-bar{height:100px;background:color-mix(in srgb,var(--lp-ink) 24%,transparent);}
.lp-ladder-step:nth-child(5) .lp-ladder-bar{height:134px;background:color-mix(in srgb,var(--lp-ink) 32%,transparent);}
.lp-ladder-step.is-top .lp-ladder-bar{height:172px;background:var(--lp-accent);}
.lp-ladder-n{font:500 var(--lp-micro)/1 var(--font-mono);letter-spacing:.1em;color:var(--lp-ink-4);}
.lp-ladder-step h3{margin-top:10px;font-size:17px;font-weight:600;letter-spacing:-.022em;}
.lp-ladder-step.is-top h3{color:var(--lp-accent-ink);}
.lp-ladder-step p{margin-top:8px;font-size:12.5px;line-height:1.55;color:var(--lp-ink-3);}
/* ============================================================
7 · EL CICLO — el anillo
============================================================ */
.lp-loop-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,5vw,84px);align-items:center;}
.lp-loop-ring{position:relative;width:min(440px,100%);aspect-ratio:1;margin-inline:auto;}
.lp-loop-svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);}
.lp-loop-track{fill:none;stroke:var(--lp-line);stroke-width:1;}
.lp-loop-run{
fill:none;stroke:var(--lp-accent);stroke-width:2;stroke-linecap:round;
stroke-dasharray:942;stroke-dashoffset:942;
transition:stroke-dashoffset .6s var(--lp-ease);
}
.lp-loop-center{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:46%;text-align:center;display:flex;flex-direction:column;gap:9px;
}
.lp-loop-center-label{font:600 var(--lp-micro)/1 var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--lp-ink-4);}
.lp-loop-center-step{font-family:var(--font-display);font-size:clamp(19px,2.1vw,26px);font-weight:700;letter-spacing:-.03em;line-height:1.15;}
.lp-loop-center-count{font:500 12px/1 var(--font-mono);color:var(--lp-ink-4);}
/* Cada nodo declara --lp-x/--lp-y como PORCENTAJE del anillo (los
ocho puntos del círculo de radio 37,5%, calculados en el HTML). Con
porcentajes el anillo escala solo: antes el desplazamiento iba en
píxeles y en escritorio los nodos se salían de su columna y pisaban
el texto de al lado. */
.lp-loop-node{
position:absolute;left:var(--lp-x);top:var(--lp-y);padding:0;border:none;background:none;cursor:pointer;
transform:translate(-50%,-50%);
display:flex;flex-direction:column;align-items:center;gap:7px;width:96px;margin:0;
}
.lp-loop-node-dot{
width:10px;height:10px;border-radius:50%;background:var(--lp-canvas);
border:1px solid var(--lp-line-2);transition:all .3s var(--lp-ease);
}
.lp-loop-node-label{
font-size:11.5px;font-weight:500;letter-spacing:-.008em;color:var(--lp-ink-3);
text-align:center;line-height:1.25;transition:color .3s var(--lp-ease);
}
.lp-loop-node:hover .lp-loop-node-label{color:var(--lp-ink-2);}
.lp-loop-node.is-active .lp-loop-node-dot{background:var(--lp-accent);border-color:var(--lp-accent);box-shadow:0 0 0 5px var(--lp-accent-soft);}
.lp-loop-node.is-active .lp-loop-node-label{color:var(--lp-ink);font-weight:600;}
/* Dos filas: las ocho tarjetas comparten la primera (solo se ve la
activa) y el pie ocupa la segunda. Antes el pie también vivía en 1/1
y se separaba con un margin-top enorme — funcionaba de milagro. */
.lp-loop-copy{position:relative;display:grid;grid-template-rows:minmax(210px,auto) auto;}
.lp-loop-card{
grid-row:1;grid-column:1;align-self:start;
opacity:0;transform:translateY(10px);pointer-events:none;
transition:opacity .38s var(--lp-ease),transform .38s var(--lp-ease);
}
.lp-loop-card.is-active{opacity:1;transform:none;pointer-events:auto;}
.lp-loop-card h3{font-size:clamp(24px,2.8vw,34px);font-weight:700;letter-spacing:-.032em;}
.lp-loop-card p{margin-top:18px;font-size:var(--lp-lede);line-height:1.55;color:var(--lp-ink-2);max-width:46ch;}
.lp-loop-foot{
grid-row:2;grid-column:1;margin-top:30px;
padding-top:22px;border-top:1px solid var(--lp-line);
font-size:12.5px;line-height:1.6;color:var(--lp-ink-4);max-width:40ch;
}
/* ============================================================
8 · EL PRODUCTO — raíl + escenario con la interfaz reconstruida
============================================================ */
.lp-rail{display:grid;grid-template-columns:minmax(240px,300px) minmax(0,1fr);gap:clamp(28px,3.4vw,56px);align-items:start;}
.lp-rail-item{
display:flex;align-items:flex-start;gap:16px;width:100%;padding:18px 16px 18px 0;
background:none;border:none;border-top:1px solid var(--lp-line);cursor:pointer;text-align:left;
position:relative;transition:padding-left .3s var(--lp-ease);
}
.lp-rail-list li:last-child .lp-rail-item{border-bottom:1px solid var(--lp-line);}
.lp-rail-item::before{
content:"";position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--lp-accent);
transition:width .4s var(--lp-ease);
}
.lp-rail-item.is-active::before{width:100%;}
.lp-rail-n{font:500 var(--lp-micro)/1.6 var(--font-mono);letter-spacing:.08em;color:var(--lp-ink-4);flex-shrink:0;}
.lp-rail-item.is-active .lp-rail-n{color:var(--lp-accent-ink);}
.lp-rail-text{display:flex;flex-direction:column;gap:4px;min-width:0;}
.lp-rail-text strong{font-size:16.5px;font-weight:600;letter-spacing:-.022em;color:var(--lp-ink-3);transition:color .25s var(--lp-ease);}
.lp-rail-text small{font-size:12.5px;line-height:1.45;color:var(--lp-ink-4);}
.lp-rail-item:hover .lp-rail-text strong{color:var(--lp-ink-2);}
.lp-rail-item.is-active .lp-rail-text strong{color:var(--lp-ink);}
.lp-rail-item.is-active .lp-rail-text small{color:var(--lp-ink-3);}
.lp-rail-stage{position:relative;display:grid;min-height:520px;}
.lp-stage{
grid-area:1/1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(26px,3vw,48px);
align-items:start;
opacity:0;transform:translateY(12px);pointer-events:none;
transition:opacity .42s var(--lp-ease),transform .42s var(--lp-ease);
}
.lp-stage.is-active{opacity:1;transform:none;pointer-events:auto;}
.lp-stage-why{font:600 var(--lp-micro)/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--lp-accent-ink);}
.lp-stage-answer{
margin-top:18px;font-family:var(--font-display);font-size:clamp(18px,1.5vw,22px);font-weight:600;
line-height:1.35;letter-spacing:-.026em;color:var(--lp-ink);
}
.lp-stage-body{margin-top:20px;font-size:var(--lp-small);line-height:1.75;color:var(--lp-ink-2);}
/* --- Interfaz reconstruida. NO es una captura: es HTML, así que se
ve nítida en cualquier pantalla y respeta el tema del usuario. --- */
.lp-ui{
border:1px solid var(--lp-line-2);border-radius:var(--lp-r-lg);overflow:hidden;
background:var(--lp-surface);box-shadow:0 30px 70px -40px rgba(0,0,0,.45);
}
.lp-ui-bar{
display:flex;align-items:center;gap:7px;padding:12px 16px;
border-bottom:1px solid var(--lp-line);background:var(--lp-surface-2);
}
.lp-ui-dot{width:7px;height:7px;border-radius:50%;background:var(--lp-ink-4);}
.lp-ui-title{margin-left:10px;font:500 11.5px/1 var(--font-mono);letter-spacing:.04em;color:var(--lp-ink-3);}
.lp-ui-body{padding:clamp(18px,2vw,26px);display:flex;flex-direction:column;gap:18px;}
.lp-ui-verdict{padding:18px;border:1px solid var(--lp-accent-line);border-radius:var(--lp-r);background:var(--lp-accent-soft);}
.lp-ui-verdict-label{font:600 var(--lp-micro)/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--lp-accent-ink);}
.lp-ui-verdict strong{display:block;margin-top:10px;font-family:var(--font-display);font-size:24px;font-weight:700;letter-spacing:-.03em;}
.lp-ui-verdict p{margin-top:8px;font-size:13px;line-height:1.55;color:var(--lp-ink-2);}
.lp-ui-rows{display:flex;flex-direction:column;}
.lp-ui-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 0;border-top:1px solid var(--lp-line);font-size:13px;color:var(--lp-ink-2);}
.lp-ui-row em{font-style:normal;font-weight:600;font-size:12px;}
.lp-ui-row .is-bad{color:var(--lp-bad);}
.lp-ui-row .is-warn{color:var(--lp-warn);}
.lp-ui-row .is-ok{color:var(--lp-ok);}
.lp-ui-note{padding-top:16px;border-top:1px solid var(--lp-line);}
.lp-ui-note-label,.lp-ui-mini-k,.lp-ui-gap-k,.lp-ui-change-k,.lp-ui-quote-k,.lp-ui-axis-k{
font:600 var(--lp-micro)/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--lp-ink-4);
}
.lp-ui-note p{margin-top:10px;font-family:var(--font-display);font-style:italic;font-size:14.5px;line-height:1.55;color:var(--lp-ink);}
.lp-ui-quote{display:flex;flex-direction:column;gap:6px;}
.lp-ui-quote-v{font:600 34px/1 var(--font-mono);letter-spacing:-.03em;color:var(--lp-ink);}
.lp-ui-quote-v small{font-size:14px;color:var(--lp-ink-3);margin-left:4px;}
.lp-ui-quote-src{font-size:11.5px;color:var(--lp-ink-4);}
.lp-ui-chips{display:flex;flex-wrap:wrap;gap:7px;}
.lp-ui-chips span{padding:5px 11px;border:1px solid var(--lp-line);border-radius:999px;font-size:11.5px;color:var(--lp-ink-2);}
.lp-ui-mini,.lp-ui-gap{padding-top:16px;border-top:1px solid var(--lp-line);}
.lp-ui-mini p,.lp-ui-gap p{margin-top:9px;font-size:13px;line-height:1.5;color:var(--lp-ink-2);}
.lp-ui-gap p{color:var(--lp-ink-3);}
.lp-ui-gap-k{color:var(--lp-warn);}
.lp-ui-life{display:flex;flex-direction:column;}
.lp-ui-life li{position:relative;padding:0 0 26px 26px;}
.lp-ui-life li:last-child{padding-bottom:0;}
.lp-ui-life li::before{content:"";position:absolute;left:4px;top:14px;bottom:-4px;width:1px;background:var(--lp-line);}
.lp-ui-life li:last-child::before{display:none;}
.lp-ui-life-dot{position:absolute;left:0;top:5px;width:9px;height:9px;border-radius:50%;border:1px solid var(--lp-line-2);background:var(--lp-surface);}
.lp-ui-life li.is-final .lp-ui-life-dot{background:var(--lp-accent);border-color:var(--lp-accent);}
.lp-ui-life strong{display:block;font-size:14px;font-weight:600;letter-spacing:-.015em;}
.lp-ui-life small{display:block;margin-top:4px;font-size:12.5px;color:var(--lp-ink-3);}
.lp-ui-life li.is-final strong{color:var(--lp-accent-ink);}
.lp-ui-axes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.lp-ui-axis{padding:14px;border:1px solid var(--lp-line);border-radius:var(--lp-r);display:flex;flex-direction:column;gap:7px;}
.lp-ui-axis strong{font:600 13.5px/1.2 var(--font-mono);letter-spacing:.02em;color:var(--lp-ink);}
.lp-ui-axis-c{font-size:11px;color:var(--lp-ink-4);}
.lp-ui-change{padding-top:16px;border-top:1px solid var(--lp-line);}
.lp-ui-change p{margin-top:9px;font-size:13px;color:var(--lp-ink-2);}
.lp-ui-change em{font-style:normal;font-weight:600;font-family:var(--font-mono);color:var(--lp-accent-ink);}
.lp-ui-guard{font-size:11.5px;line-height:1.55;color:var(--lp-ink-4);padding-top:14px;border-top:1px solid var(--lp-line);}
.lp-ui-insight{padding:16px;border:1px solid var(--lp-line);border-radius:var(--lp-r);}
.lp-ui-insight.is-quiet{opacity:.66;}
.lp-ui-insight-tag{font:600 var(--lp-micro)/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--lp-accent-ink);}
.lp-ui-insight.is-quiet .lp-ui-insight-tag{color:var(--lp-ink-4);}
.lp-ui-insight p{margin-top:11px;font-size:13.5px;line-height:1.55;color:var(--lp-ink);}
.lp-ui-evidence{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px;font:500 11.5px/1 var(--font-mono);color:var(--lp-ink-3);}
.lp-ui-meter{height:3px;margin-top:11px;border-radius:2px;background:var(--lp-line);overflow:hidden;}
.lp-ui-meter span{display:block;height:100%;background:var(--lp-accent);}
.lp-ui-dims{display:flex;flex-direction:column;gap:13px;}
.lp-ui-dim{display:grid;grid-template-columns:86px minmax(0,1fr) 42px;gap:12px;align-items:center;font-size:12.5px;color:var(--lp-ink-2);}
.lp-ui-dim-bar{height:4px;border-radius:2px;background:var(--lp-line);overflow:hidden;}
.lp-ui-dim-bar i{display:block;height:100%;background:var(--lp-ink-2);}
.lp-ui-dim em{font:600 11.5px/1 var(--font-mono);font-style:normal;color:var(--lp-ok);text-align:right;}
.lp-ui-dim em.is-down{color:var(--lp-bad);}
.lp-product-note{margin-top:clamp(36px,4vw,56px);font-size:12px;color:var(--lp-ink-4);text-align:center;}
/* ============================================================
9 · APEX EN ACCIÓN — la conversación
============================================================ */
.lp-convo{max-width:960px;margin-inline:auto;}
.lp-convo-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
.lp-convo-pick{
padding:16px 18px;border:1px solid var(--lp-line);border-radius:var(--lp-r);
background:transparent;cursor:pointer;text-align:left;
font-family:var(--font-display);font-style:italic;font-size:13.5px;line-height:1.45;
color:var(--lp-ink-3);transition:all .25s var(--lp-ease);
}
.lp-convo-pick:hover{border-color:var(--lp-line-2);color:var(--lp-ink-2);}
.lp-convo-pick.is-active{border-color:var(--lp-ink);color:var(--lp-ink);background:var(--lp-surface);}
.lp-convo-panel{position:relative;display:grid;margin-top:26px;min-height:420px;}
.lp-convo-thread{
grid-area:1/1;display:flex;flex-direction:column;gap:16px;
opacity:0;pointer-events:none;transition:opacity .35s var(--lp-ease);
}
.lp-convo-thread.is-active{opacity:1;pointer-events:auto;}
.lp-msg{padding:clamp(20px,2.2vw,28px);border-radius:var(--lp-r-lg);border:1px solid var(--lp-line);}
.lp-msg.is-you{background:transparent;max-width:min(560px,86%);}
.lp-msg.is-apex{background:var(--lp-surface);border-color:var(--lp-line-2);box-shadow:inset 3px 0 0 var(--lp-accent);}
/* La respuesta entra un instante DESPUÉS del pensamiento: eso es lo
que se siente como "APEX está pensando", sin spinner falso. */
.lp-convo-thread.is-active .lp-msg.is-apex{animation:lpRise .55s var(--lp-ease) .18s both;}
@keyframes lpRise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.lp-msg-who{
display:inline-flex;align-items:center;gap:7px;
font:600 var(--lp-micro)/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--lp-ink-3);
}
.lp-msg.is-apex .lp-msg-who{color:var(--lp-accent-ink);}
.lp-msg-dot{width:6px;height:6px;border-radius:50%;background:var(--lp-accent);}
.lp-msg.is-you p{margin-top:13px;font-family:var(--font-display);font-style:italic;font-size:clamp(16px,1.6vw,20px);line-height:1.45;color:var(--lp-ink-2);}
.lp-msg-lead{
margin-top:15px;font-family:var(--font-display);font-size:clamp(17px,1.8vw,23px);font-weight:600;
line-height:1.38;letter-spacing:-.026em;color:var(--lp-ink);max-width:54ch;
}
.lp-msg-facts{display:flex;flex-direction:column;gap:15px;margin-top:24px;padding-top:20px;border-top:1px solid var(--lp-line);}
.lp-msg-facts li{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px;font-size:13.5px;line-height:1.55;color:var(--lp-ink-2);}
.lp-tag{
flex-shrink:0;margin-top:2px;padding:3px 9px;border-radius:999px;border:1px solid var(--lp-line);
font:600 10px/1.4 var(--font-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--lp-ink-3);
}
.lp-tag.is-mem{border-color:var(--lp-accent-line);color:var(--lp-accent-ink);}
.lp-tag.is-gap{border-color:var(--lp-line-2);}
.lp-msg-close{margin-top:22px;padding-top:18px;border-top:1px solid var(--lp-line);font-size:13.5px;line-height:1.6;color:var(--lp-ink-3);}
.lp-convo-foot{
margin-top:32px;padding-top:24px;border-top:1px solid var(--lp-line);
font-size:var(--lp-lede);line-height:1.5;color:var(--lp-ink-3);text-align:center;letter-spacing:-.015em;
}
.lp-convo-foot strong{color:var(--lp-ink);font-weight:600;}
/* ============================================================
10 · CONTEXTO
============================================================ */
.lp-context-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(36px,5vw,96px);align-items:start;}
.lp-context-note{margin-top:20px;font-size:var(--lp-small);color:var(--lp-ink-4);}
.lp-context-note em{font-style:italic;color:var(--lp-ink-3);}
.lp-context-list li{
padding:24px 0;border-top:1px solid var(--lp-line);
display:grid;grid-template-columns:minmax(150px,210px) minmax(0,1fr);gap:8px 28px;align-items:baseline;
}
.lp-context-list li:last-child{border-bottom:1px solid var(--lp-line);}
.lp-context-list strong{font-size:15.5px;font-weight:600;letter-spacing:-.02em;}
.lp-context-list span{font-size:var(--lp-small);line-height:1.65;color:var(--lp-ink-2);}
.lp-context-list li.is-gap strong{color:var(--lp-warn);}
.lp-context-list li.is-gap span{color:var(--lp-ink-3);}
/* ============================================================
11 · TU RECORRIDO
============================================================ */
.lp-journey-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,36px);}
.lp-journey-step{position:relative;padding-top:30px;border-top:1px solid var(--lp-line);}
.lp-journey-step::before{content:"";position:absolute;left:0;top:-4px;width:7px;height:7px;border-radius:50%;background:var(--lp-ink-4);}
.lp-journey-step:last-child::before{background:var(--lp-accent);}
.lp-journey-when{font:500 var(--lp-micro)/1 var(--font-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--lp-ink-4);}
.lp-journey-step h3{margin-top:14px;font-size:18px;font-weight:600;letter-spacing:-.025em;}
.lp-journey-step p{margin-top:12px;font-size:13.5px;line-height:1.65;color:var(--lp-ink-2);}
.lp-journey-foot{margin-top:clamp(44px,5vw,68px);font-size:var(--lp-small);color:var(--lp-ink-3);text-align:center;max-width:60ch;margin-inline:auto;}
/* ============================================================
12 · EXPERIENCIAS REALES (reseñas)
Solo se refinan los contenedores de la landing. Las .review-card
las sigue pintando landing.css, compartidas con la app.
============================================================ */
.lp-voices .reviews-public-feedback{
display:flex;align-items:center;justify-content:center;gap:10px;
font-size:var(--lp-small);color:var(--lp-ink-3);padding-block:12px;
}
/* reviews.js oculta este aviso con el atributo `hidden` en cuanto la
carga termina. Un `display:flex` suelto lo anula (hidden solo aporta
display:none del UA), así que el "Cargando reseñas reales…" se
quedaba en pantalla encima del estado vacío. */
.lp-voices .reviews-public-feedback[hidden]{display:none;}
.lp-voices .reviews-public-controls{margin-top:26px;color:var(--lp-ink-4);}
/* Las tarjetas y los controles los pinta landing.css con los tokens de
la APP (superficie cálida, botón relleno). Dentro de la landing se
reencuadran en su lenguaje — solo aquí: la vista de reseñas de la app
los sigue viendo exactamente igual. */
.lp-voices .review-card{
background:color-mix(in srgb,var(--lp-surface) 55%,transparent);
border-color:var(--lp-line);border-radius:var(--lp-r-lg);box-shadow:none;
}
.lp-voices .review-card-text{color:var(--lp-ink-2);font-size:14.5px;line-height:1.7;}
.lp-voices .review-card-sub,.lp-voices .review-details{color:var(--lp-ink-4);}
.lp-voices .review-category{background:transparent;border:1px solid var(--lp-line);color:var(--lp-ink-3);}
.lp-voices .review-avatar{background:var(--lp-accent-soft);color:var(--lp-accent-ink);}
.lp-voices .reviews-public-controls .btn{
width:auto;min-width:40px;margin-top:0;padding:8px 14px;
background:transparent;color:var(--lp-ink-2);border:1px solid var(--lp-line-2);
border-radius:999px;font-size:14px;box-shadow:none;
}
.lp-voices .reviews-public-controls .btn:hover{background:var(--lp-accent-soft);border-color:var(--lp-ink);color:var(--lp-ink);}
.lp-voices-empty{
max-width:560px;margin-inline:auto;text-align:center;
padding:clamp(34px,4vw,54px);border:1px dashed var(--lp-line-2);border-radius:var(--lp-r-lg);
}
.lp-voices-mark{display:block;width:30px;height:1px;margin:0 auto 24px;background:var(--lp-accent);}
.lp-voices-empty strong{display:block;font-family:var(--font-display);font-size:20px;font-weight:600;letter-spacing:-.025em;}
.lp-voices-empty p{margin-top:14px;font-size:var(--lp-small);line-height:1.65;color:var(--lp-ink-2);}
.lp-voices-empty .lp-btn{margin-top:26px;}
/* ============================================================
13 · SOBRE APEX
============================================================ */
.lp-about-body{max-width:760px;margin-inline:auto;display:flex;flex-direction:column;gap:22px;}
.lp-about-body p{font-size:var(--lp-body);line-height:1.8;color:var(--lp-ink-2);}
.lp-about-body strong{color:var(--lp-ink);font-weight:600;}
.lp-about-lead{
font-family:var(--font-display) !important;font-size:clamp(19px,2.1vw,26px) !important;
font-weight:500 !important;line-height:1.45 !important;letter-spacing:-.025em;color:var(--lp-ink) !important;
}
.lp-beliefs{margin-top:clamp(56px,6vw,90px);display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0;}
.lp-beliefs li{
padding:26px clamp(18px,2vw,30px) 26px 0;border-top:1px solid var(--lp-line);
display:flex;flex-direction:column;gap:9px;
}
.lp-belief-n{font:500 var(--lp-micro)/1 var(--font-mono);letter-spacing:.1em;color:var(--lp-accent-ink);}
.lp-beliefs strong{font-size:15px;font-weight:600;letter-spacing:-.02em;line-height:1.35;}
.lp-beliefs span{font-size:12.5px;line-height:1.6;color:var(--lp-ink-3);}
/* ============================================================
14 · LA HISTORIA DEL FUNDADOR
============================================================ */
.lp-founder-card{
max-width:820px;margin-inline:auto;padding:clamp(32px,4.5vw,72px);
border:1px solid var(--lp-line);border-radius:var(--lp-r-lg);
background:color-mix(in srgb,var(--lp-surface) 55%,transparent);
}
.lp-founder-quote{
margin:0;font-family:var(--font-display);font-size:clamp(23px,3.2vw,40px);font-weight:600;
line-height:1.2;letter-spacing:-.034em;color:var(--lp-ink);text-wrap:balance;
}
.lp-founder-quote::before{content:"“";}
.lp-founder-quote::after{content:"”";}
.lp-founder-body{margin-top:32px;display:flex;flex-direction:column;gap:18px;}
.lp-founder-body p{font-size:var(--lp-body);line-height:1.8;color:var(--lp-ink-2);}
.lp-founder-body em{color:var(--lp-ink);font-style:italic;}
.lp-founder-sign{display:flex;align-items:center;gap:12px;margin-top:38px;padding-top:24px;border-top:1px solid var(--lp-line);}
.lp-founder-mark{width:26px;height:1px;background:var(--lp-accent);}
.lp-founder-name{font-family:var(--font-display);font-size:16px;font-weight:600;letter-spacing:-.02em;}
.lp-founder-role{font:500 var(--lp-micro)/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--lp-ink-4);}
/* ============================================================
15 · LA VISIÓN
============================================================ */
.lp-vision-formula{
display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 14px;
padding-block:clamp(10px,2vw,26px);
}
.lp-vf-item{
padding:11px 20px;border:1px solid var(--lp-line-2);border-radius:999px;
font-size:14px;font-weight:500;letter-spacing:-.012em;color:var(--lp-ink-2);
}
.lp-vf-op{font:500 18px/1 var(--font-mono);color:var(--lp-ink-4);}
.lp-vf-result{
padding:11px 22px;border-radius:999px;border:1px solid var(--lp-accent);
background:var(--lp-accent-soft);color:var(--lp-accent-ink);
font-size:14px;font-weight:600;letter-spacing:-.012em;
}
.lp-vision-cols{
margin-top:clamp(52px,6vw,84px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:clamp(28px,4vw,72px);
}
.lp-vision-col ul{display:flex;flex-direction:column;}
.lp-vision-col li{
padding:16px 0;border-top:1px solid var(--lp-line);font-size:var(--lp-small);line-height:1.6;color:var(--lp-ink-2);
}
.lp-vision-col li:last-child{border-bottom:1px solid var(--lp-line);}
.lp-vision-col.is-next li{color:var(--lp-ink-3);}
.lp-vision-col.is-next .lp-col-label{color:var(--lp-accent-ink);}
/* ============================================================
CAMPAÑA — se conserva el módulo de siempre; aquí solo se ajusta
para que respire dentro de la composición nueva.
============================================================ */
.lp-campaign{
padding:clamp(48px,6vw,84px) var(--lp-gutter) !important;border-top:1px solid var(--lp-line);
}
.lp-campaign .campaign-banner-inner{width:min(var(--lp-max),100%);margin-inline:auto;}
.lp-campaign .campaign-eyebrow{color:var(--lp-accent-ink);}
.lp-campaign .campaign-pulse{background:var(--lp-accent);box-shadow:0 0 0 4px var(--lp-accent-soft);}
.lp-campaign h2{font-family:var(--font-display);font-size:clamp(24px,2.8vw,36px);font-weight:700;letter-spacing:-.03em;line-height:1.15;margin-top:18px;}
.lp-campaign p{margin-top:14px;font-size:var(--lp-small);line-height:1.65;color:var(--lp-ink-2);max-width:56ch;}
.lp-campaign .campaign-disclaimer{color:var(--lp-ink-4) !important;font-size:11.5px !important;}
.lp-campaign .campaign-countdown{border-left-color:var(--lp-line);}
/* ============================================================
PLANES — mismas tarjetas que la app (.pricing-card), reajustadas
al lenguaje de superficie de la landing. Las CIFRAS no se tocan
nunca desde aquí: viven en el HTML y deben coincidir con lib/plans.js.
============================================================ */
.lp-plans .pricing-grid{margin-top:0;}
.lp-plans .pricing-card{
background:color-mix(in srgb,var(--lp-surface) 55%,transparent);
border-color:var(--lp-line);border-radius:var(--lp-r-lg);box-shadow:none;
}
.lp-plans .pricing-card.is-recommended{border-color:var(--lp-accent-line);background:var(--lp-surface);}
.lp-plans .pricing-name{color:var(--lp-ink);}
.lp-plans .pricing-tagline{color:var(--lp-ink-3);}
.lp-plans .pricing-features li{color:var(--lp-ink-2);}
.lp-plans .pricing-features svg{color:var(--lp-accent-ink);}
.lp-plans .pricing-card:hover{transform:none;box-shadow:none;}
/* "Precio pendiente" no es una cifra, y a tamaño de cifra ($0 a 40px)
se partía en dos líneas y descuadraba las tres tarjetas. Solo aquí y
solo para esas dos: la vista de planes de la app no se toca. */
#landingPlanPro .pricing-price .amount,
#landingPlanMax .pricing-price .amount{
font-family:var(--font-body);font-size:19px;font-weight:600;letter-spacing:-.02em;
color:var(--lp-ink-3);white-space:nowrap;
}
/* UNA sola acción rellena en la fila de planes — la recomendada. Con
tres botones sólidos compitiendo, ninguno es la acción principal.
Es también por lo que Max deja aquí el violeta de la app: dentro de
la landing el único color es el carmesí de marca. */
.lp-plans .pricing-card:not(.is-recommended) .pricing-cta,
.lp-plans .pricing-card.is-max .pricing-cta{
background:transparent;color:var(--lp-ink);border:1px solid var(--lp-line-2);font-weight:600;
}
.lp-plans .pricing-card:not(.is-recommended) .pricing-cta:hover,
.lp-plans .pricing-card.is-max .pricing-cta:hover{
background:var(--lp-accent-soft);border-color:var(--lp-ink);filter:none;
}
.lp-plans .pricing-card.is-max{border-color:var(--lp-line);}
.lp-plans .pricing-card.is-max .pricing-features li svg{color:var(--lp-accent-ink);}
.lp-plans .pricing-badge{
color:var(--lp-accent-ink);border:1px solid var(--lp-accent-line);background:var(--lp-accent-soft);
font:600 10px/1.4 var(--font-mono);letter-spacing:.12em;padding:5px 11px;border-radius:999px;box-shadow:none;
}
.lp-plans .pricing-badge-max{color:var(--lp-ink-3);border-color:var(--lp-line-2);background:transparent;}
/* El recomendado pesa un poco más, SOLO en la landing (la vista de
planes de la app no cambia de tamaño porque esta hoja se cargue).
Vivía en landing.css como `#landingView .pricing-card…`, una regla
con especificidad de id que ganaba a todo lo de aquí; se mudó para
que el bloque de planes tenga un único dueño. */
@media(min-width:641px){
.lp-plans .pricing-card.is-recommended{transform:translateY(-8px);}
}
/* ============================================================
FAQ
============================================================ */
.lp-faq-item{border-top:1px solid var(--lp-line);}
.lp-faq-list .lp-faq-item:last-child{border-bottom:1px solid var(--lp-line);}
.lp-faq-item summary{
display:flex;align-items:center;justify-content:space-between;gap:20px;
padding:24px 0;cursor:pointer;list-style:none;
font-size:clamp(16px,1.5vw,19px);font-weight:600;letter-spacing:-.022em;color:var(--lp-ink);
}
.lp-faq-item summary::-webkit-details-marker{display:none;}
.lp-faq-chev{
position:relative;width:12px;height:12px;flex-shrink:0;
transition:transform .3s var(--lp-ease);
}
.lp-faq-chev::before,.lp-faq-chev::after{content:"";position:absolute;background:var(--lp-ink-3);}
.lp-faq-chev::before{left:0;top:5.5px;width:12px;height:1px;}
.lp-faq-chev::after{left:5.5px;top:0;width:1px;height:12px;transition:opacity .3s var(--lp-ease);}
.lp-faq-item[open] .lp-faq-chev{transform:rotate(90deg);}
.lp-faq-item[open] .lp-faq-chev::after{opacity:0;}
.lp-faq-a{padding-bottom:26px;max-width:66ch;}
.lp-faq-a p{font-size:var(--lp-small);line-height:1.8;color:var(--lp-ink-2);}
/* ============================================================
16 · CIERRE
============================================================ */
.lp-close{
position:relative;overflow:hidden;text-align:center;
padding:clamp(100px,13vw,190px) var(--lp-gutter);
border-top:1px solid var(--lp-line);
}
.lp-close-field{
position:absolute;inset:0;pointer-events:none;
background:
radial-gradient(760px 420px at 50% 120%, var(--lp-accent-soft), transparent 70%),
repeating-linear-gradient(to right,var(--lp-grid) 0 1px,transparent 1px 112px);
mask-image:radial-gradient(110% 120% at 50% 110%,#000 10%,rgba(0,0,0,.4) 60%,transparent 100%);
-webkit-mask-image:radial-gradient(110% 120% at 50% 110%,#000 10%,rgba(0,0,0,.4) 60%,transparent 100%);
}
.lp-close-inner{position:relative;max-width:760px;margin-inline:auto;}
.lp-close-title{
margin-top:8px;font-size:clamp(34px,5.6vw,72px);font-weight:700;line-height:1.02;letter-spacing:-.042em;
text-wrap:balance;
}
.lp-close-lede{margin-top:26px;font-size:var(--lp-lede);line-height:1.55;color:var(--lp-ink-2);max-width:52ch;margin-inline:auto;}
.lp-close-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:36px;}
.lp-close-sign{
margin-top:clamp(52px,6vw,84px);padding-top:26px;border-top:1px solid var(--lp-line);
font-family:var(--font-display);font-size:15px;font-style:italic;letter-spacing:-.02em;color:var(--lp-ink-4);
}
/* ============================================================
PIE
============================================================ */
.lp-footer{border-top:1px solid var(--lp-line);padding-block:clamp(56px,6vw,88px) 40px;background:var(--lp-canvas-alt);}
.lp-footer-top{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:26px;padding-bottom:40px;border-bottom:1px solid var(--lp-line);}
.lp-footer-brand{display:flex;align-items:center;gap:11px;flex-wrap:wrap;}
.lp-footer-brand img{display:block;}
.lp-footer-name{font-family:var(--font-display);font-size:17px;font-weight:700;letter-spacing:-.02em;}
.lp-footer-tag{font:500 10px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--lp-ink-4);padding-left:11px;border-left:1px solid var(--lp-line);}
.lp-footer-legalnote{max-width:46ch;font-size:12px;line-height:1.65;color:var(--lp-ink-4);}
.lp-footer-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;padding-block:40px;}
.lp-footer-label{display:block;font:600 var(--lp-micro)/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--lp-ink-3);margin-bottom:18px;}
.lp-footer-col li{margin-bottom:11px;}
.lp-footer-col a,.lp-footer-btn{font-size:13px;color:var(--lp-ink-2);transition:color .2s var(--lp-ease);}
.lp-footer-col a:hover,.lp-footer-btn:hover{color:var(--lp-ink);}
.lp-footer-btn{background:none;border:none;padding:0;cursor:pointer;text-align:left;}
.lp-footer-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding-top:28px;border-top:1px solid var(--lp-line);font-size:12px;color:var(--lp-ink-4);}
.lp-footer-motto{font-family:var(--font-display);font-style:italic;letter-spacing:-.015em;}
/* ============================================================
RESPONSIVE — cada corte es una COMPOSICIÓN, no el escritorio
encogido. Lo que cambia en cada uno está anotado.
============================================================ */
/* Portátil: el raíl de producto y la cadena pierden su segunda columna
antes que nada, porque son las dos rejillas más anchas. */
@media(max-width:1080px){
.lp-brand-sub{display:none;}
.lp-nav-links{gap:16px;}
.lp-stage{grid-template-columns:minmax(0,1fr);gap:26px;}
.lp-rail-stage{min-height:0;}
.lp-loop-stage{grid-template-columns:minmax(0,1fr);gap:44px;}
.lp-loop-copy{display:block;text-align:center;}
.lp-loop-card p{margin-inline:auto;}
.lp-loop-card{display:none;}
.lp-loop-card.is-active{display:block;}
.lp-loop-foot{margin-top:34px;margin-inline:auto;text-align:center;}
}
/* Tablet: se acaban las rejillas de más de dos columnas. */
@media(max-width:900px){
.lp-nav-links-wrap{display:none;}
.lp-burger{display:flex;}
.lp-btn-quiet{display:none;}
.lp-hero-object{grid-template-columns:minmax(0,1fr);gap:0;}
.lp-hero-link{width:1px;height:34px;margin:0 auto;background:linear-gradient(to bottom,var(--lp-line),var(--lp-accent-line));}
.lp-tenseconds-track{grid-template-columns:repeat(2,minmax(0,1fr));}
.lp-ts-step{padding-right:16px;}
.lp-problem-close{grid-template-columns:minmax(0,1fr);gap:24px;align-items:start;}
.lp-what-grid{grid-template-columns:minmax(0,1fr);}
.lp-chain{grid-template-columns:minmax(0,1fr);gap:30px;}
.lp-chain-panel{min-height:0;}
.lp-chain-card{display:none;}
.lp-chain-card.is-active{display:block;}
/* La cadena vertical pasa a ser una fila desplazable: mantiene la
idea de secuencia sin comerse media pantalla. Sangra hasta el borde
de la pantalla (margen negativo + padding del mismo tamaño) para
que la última pastilla se corte EN el borde y se lea como "hay
más a la derecha", no como un recorte accidental. */
.lp-chain-nodes{
display:flex;gap:8px;overflow-x:auto;padding-bottom:10px;scrollbar-width:none;
margin-inline:calc(var(--lp-gutter) * -1);padding-inline:var(--lp-gutter);
scroll-snap-type:x proximity;
}
.lp-chain-node{scroll-snap-align:start;}
.lp-chain-nodes::-webkit-scrollbar{display:none;}
.lp-chain-nodes::before{display:none;}
.lp-chain-node{
width:auto;white-space:nowrap;padding:9px 15px;border:1px solid var(--lp-line);border-radius:999px;
font-size:13px;gap:9px;
}
.lp-chain-node.is-active{border-color:var(--lp-accent-line);background:var(--lp-accent-soft);}
.lp-chain-dot{width:7px;height:7px;}
.lp-ladder-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 16px;}
.lp-ladder-step{grid-template-rows:150px auto auto auto;}
.lp-rail{grid-template-columns:minmax(0,1fr);gap:26px;}
.lp-rail-list{
display:flex;gap:8px;overflow-x:auto;padding-bottom:10px;scrollbar-width:none;
margin-inline:calc(var(--lp-gutter) * -1);padding-inline:var(--lp-gutter);
scroll-snap-type:x proximity;
}
.lp-rail-item{scroll-snap-align:start;}
.lp-rail-list::-webkit-scrollbar{display:none;}
.lp-rail-item{
width:auto;white-space:nowrap;border:1px solid var(--lp-line);border-top:1px solid var(--lp-line);
border-radius:999px;padding:9px 15px;gap:9px;align-items:center;
}
.lp-rail-list li:last-child .lp-rail-item{border-bottom:1px solid var(--lp-line);}
.lp-rail-item::before{display:none;}
.lp-rail-item.is-active{border-color:var(--lp-accent-line);background:var(--lp-accent-soft);}
.lp-rail-text small{display:none;}
.lp-rail-text strong{font-size:13.5px;}
.lp-stage{display:none;}
.lp-stage.is-active{display:grid;}
.lp-convo-picker{grid-template-columns:minmax(0,1fr);}
.lp-convo-panel{min-height:0;}
.lp-convo-thread{display:none;}
.lp-convo-thread.is-active{display:flex;}
.lp-msg.is-you{max-width:100%;}
.lp-context-grid{grid-template-columns:minmax(0,1fr);gap:36px;}
.lp-context-list li{grid-template-columns:minmax(0,1fr);gap:6px;}
.lp-journey-track{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;}
.lp-vision-cols{grid-template-columns:minmax(0,1fr);gap:32px;}
.lp-footer-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;}
.lp-ui-axes{grid-template-columns:minmax(0,1fr);}
.lp-sequence-rail{right:12px;}
}
/* Móvil: el hero deja de ser una composición y pasa a ser una
declaración; la secuencia sticky se convierte en tres bloques
normales, porque 100vh de sticky en un móvil con barra de
navegación variable es exactamente donde ese patrón falla. */
@media(max-width:640px){
#landingView{--lp-pad:clamp(64px,13vw,92px);}
.lp-nav-inner{padding-block:12px;}
.lp-hero{padding-top:clamp(44px,8vh,72px);}
.lp-hero-title{letter-spacing:-.04em;}
.lp-hero-actions .lp-btn{flex:1 1 100%;}
.lp-answer-text{min-height:0;}
.lp-answer-meta{flex-direction:column;gap:9px;}
.lp-sequence-stage{position:static;height:auto;display:block;padding-block:var(--lp-pad);}
.lp-sequence-slot{max-width:none;min-height:0;display:flex;flex-direction:column;gap:64px;}
.lp-seq-step{grid-area:auto;opacity:1;transform:none;pointer-events:auto;}
.lp-sequence-rail{display:none;}
.lp-sequence-marker{display:none;}
.lp-noise{margin-top:26px;}
.lp-tenseconds-track{grid-template-columns:minmax(0,1fr);border-top:none;}
.lp-ts-step{padding:18px 0 18px 22px;border-left:1px solid var(--lp-line);}
.lp-ts-step::before{left:-4px;top:22px;}
.lp-ts-text{margin-top:8px;}
.lp-ts-note{margin-top:10px;}
.lp-ladder-steps{grid-template-columns:minmax(0,1fr);gap:0;}
.lp-ladder-step{
display:grid;grid-template-columns:34px minmax(0,1fr);grid-template-rows:auto auto;
gap:4px 16px;align-items:center;
padding:16px 0;border-top:1px solid var(--lp-line);
}
/* En vertical la barra deja de medir altura y pasa a ser un número
grande: la escalera se lee igual, ocupando cinco veces menos. */
.lp-ladder-bar{display:none;}
.lp-ladder-n{grid-row:1/3;font-size:15px;color:var(--lp-ink-3);align-self:start;padding-top:2px;}
.lp-ladder-step.is-top .lp-ladder-n{color:var(--lp-accent-ink);}
.lp-ladder-step h3{margin-top:0;}
.lp-ladder-step p{margin-top:3px;}
/* En móvil el anillo se queda, pero solo se rotula el nodo activo:
ocho etiquetas de 11px en 320px se pisan entre ellas. */
.lp-loop-ring{width:min(300px,100%);}
.lp-loop-node{width:72px;}
.lp-loop-node-label{font-size:10px;}
.lp-loop-node:not(.is-active) .lp-loop-node-label{opacity:0;}
.lp-journey-track{grid-template-columns:minmax(0,1fr);gap:0;}
.lp-journey-step{padding:26px 0;}
.lp-journey-step:last-child{padding-bottom:0;}
.lp-beliefs{grid-template-columns:minmax(0,1fr);}
.lp-vision-formula{flex-direction:column;align-items:stretch;text-align:center;}
.lp-vf-op{display:none;}
.lp-footer-cols{grid-template-columns:minmax(0,1fr);gap:26px;}
.lp-footer-top{flex-direction:column;}
.lp-close-actions .lp-btn{flex:1 1 100%;}
}
@media(max-width:420px){
#landingView{--lp-gutter:18px;}
.lp-ui-dim{grid-template-columns:70px minmax(0,1fr) 38px;}
.lp-ui-quote-v{font-size:28px;}
}
/* ------------------------------------------------------------
MOVIMIENTO REDUCIDO — base.css ya corta animaciones y
transiciones globalmente. Aquí solo hay que asegurar que nada se
quede invisible o desplazado cuando eso ocurre: los estados que
dependen de una transición pasan a ser estados finales.
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
.lp-noise span{opacity:1;transform:none;animation:none;}
.lp-caret{display:none;}
.lp-scrollcue-dot{animation:none;top:16px;}
.lp-answer-dot{animation:none;}
.lp-sequence-stage{position:static;height:auto;display:block;padding-block:var(--lp-pad);}
.lp-sequence-slot{min-height:0;display:flex;flex-direction:column;gap:64px;}
.lp-seq-step{grid-area:auto;opacity:1;transform:none;pointer-events:auto;}
.lp-sequence-rail,.lp-sequence-marker{display:none;}
}