/* ============ MURO · Cara pública de la plataforma ============
   Portada, paquetes y quiénes somos. Se apoya en `tokens.css` (colores,
   tipografía, radios, tema claro/oscuro) y reutiliza los componentes de
   `ui.css` (.btn, .input, .field, .modal, .badge, .promo-*).

   Sin tipografía web y sin Tailwind a propósito: es la página que recibe
   el tráfico de anuncios y no puede permitirse una petición que bloquee
   el render.

   Reglas de movimiento (docs/05 §5):
   · Una sola variable por sección, `--sec-shift`, la escribe landing.js.
     Cada capa saca su ritmo de ella aquí.
   · Nunca `background-attachment: fixed`: en iOS no se mueve y en móvil
     repinta la pantalla entera.
   · Todo se apaga con `prefers-reduced-motion`.
   ============================================================ */

/* ---------------------------------------------- Tokens de la landing */
body.lp {
  background: var(--surface-page);
  color: var(--text-body);
  font: 400 var(--text-base)/var(--leading-body) var(--font-body);
  margin: 0;
  /* `clip`, no `hidden`: `hidden` convierte a body en su propio
     contenedor de scroll y eso rompe `position: sticky` de todo lo que
     haya adentro (el navegador calcula el punto de fijación contra el
     contenedor equivocado). `clip` recorta igual de bien sin ese efecto
     secundario — verificado con Playwright: con `hidden` el stage de
     «Cómo funciona» nunca se quedaba fijo, con `clip` sí. */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.lp {
  --lp-nav-h: 64px;
  --lp-gap: clamp(28px, 4vw, 56px);
  --lp-pad: clamp(18px, 5vw, 48px);
  --lp-max: 1220px;
  --lp-card: 1px solid var(--border-subtle);
  --lp-glass: color-mix(in srgb, var(--surface-page) 82%, transparent);
}
/* `color-mix` es reciente; sin él la barra queda opaca y se ve igual de bien. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .lp { --lp-glass: var(--surface-page); }
}

.lp *, .lp *::before, .lp *::after { box-sizing: border-box; }

.lp-wrap {
  width: 100%;
  max-width: var(--lp-max);
  margin: 0 auto;
  padding-inline: var(--lp-pad);
}
.lp-sec { padding-block: clamp(64px, 9vw, 132px); position: relative; }

/* Accesibilidad: saltar al contenido y textos sólo para lectores. */
.lp-skip {
  position: fixed; top: 10px; left: 10px; z-index: 300;
  transform: translateY(-160%);
  background: var(--surface-card); color: var(--text-heading);
  border: 1.5px solid var(--accent); border-radius: var(--radius-pill);
  padding: 12px 20px; font: 600 var(--text-sm) var(--font-body); text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-out);
}
.lp-skip:focus { transform: none; }
.lp-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.lp :focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Barra de avance de lectura. */
.lp-progress {
  position: fixed; inset: 0 0 auto; height: 2px; z-index: 120; pointer-events: none;
}
.lp-progress i {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--accent), var(--detail));
  transform: scaleX(var(--lp-read, 0)); transform-origin: 0 50%;
}

/* ---------------------------------------------------- Tipografía */
.lp h1, .lp h2, .lp h3 {
  color: var(--text-heading);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.032em;
  margin: 0;
  overflow-wrap: break-word;
  text-wrap: balance;
}
.lp h1 { font-size: var(--text-4xl); letter-spacing: -0.042em; }
.lp h2 { font-size: var(--text-3xl); }
.lp h3 { font-size: var(--text-lg); letter-spacing: -0.02em; }
.lp p { margin: 0; }

/* El eyebrow de cada sección: tipografía brutal a todo el ancho, que
   landing.js convierte en una marquesina infinita. Sin JavaScript (o con
   `prefers-reduced-motion`) se queda como el texto simple de siempre —
   mismo tamaño, sin desplazarse. */
.lp-eyebrow {
  display: block;
  width: 100%;
  overflow: hidden;
  margin-bottom: clamp(10px, 2vw, 22px);
}
.lp-eyebrow, .lp-eyebrow-word {
  font: 800 clamp(2rem, 1rem + 4.6vw, 4.8rem) var(--font-body);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--detail);
  line-height: 0.96;
}
.lp-eyebrow-track { display: flex; width: max-content; }
.lp-eyebrow-group { display: flex; align-items: baseline; flex: none; gap: clamp(18px, 2.8vw, 40px); }
.lp-eyebrow-dash {
  font: 800 clamp(2rem, 1rem + 4.6vw, 4.8rem) var(--font-body);
  color: var(--border-strong);
  line-height: 0.96;
}
/* El difuminado en los bordes vende que el texto sigue fuera de pantalla. */
.lp-eyebrow:has(.lp-eyebrow-track) {
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.lp-lede {
  font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.35rem);
  line-height: 1.5;
  color: var(--text-body);
}
.lp-sub { color: var(--text-muted); font-size: var(--text-lg); line-height: 1.45; }
/* En `ch` un encabezado de 48px se partía en cuatro líneas de tres
   palabras: la medida se toma de la fuente del contenedor (17px), no de
   la del titular. Por eso va en píxeles. */
.lp-head { max-width: min(100%, 720px); margin: 0 auto clamp(34px, 4vw, 60px); text-align: center; }
.lp-head--left { max-width: min(100%, 480px); margin-inline: 0; text-align: left; }
.lp-head .lp-sub { margin-top: 14px; max-width: 58ch; margin-inline: auto; }
.lp-head--left .lp-sub { margin-inline: 0; }

.lp-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--link); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1.5px;
}
.lp-link:hover { color: var(--link-hover); }
.lp-opt { color: var(--text-muted); font-weight: 400; }
.lp-trap { position: absolute; left: -9999px; width: 1px; height: 1px; }

/* ------------------------------------------------------ Movimiento */
/* Entradas: la clase `in` la pone landing.js al entrar en pantalla.
   Esconderlas cuelga de `html.js`, que se marca antes de pintar: sin
   JavaScript nadie pondría `in` y la página entera se quedaría en blanco. */
@media (prefers-reduced-motion: no-preference) {
  html.js .lp .reveal {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    transition:
      opacity var(--dur-slow) var(--ease-out) calc(var(--i, 0) * 90ms),
      transform var(--dur-slow) var(--ease-out) calc(var(--i, 0) * 90ms);
    will-change: opacity, transform;
  }
  html.js .lp .reveal.in { opacity: 1; transform: none; will-change: auto; }
}

/* ------------------------------------------------------------ Marca */
.lg { display: inline-flex; align-items: center; gap: 9px; }
.lg-mark { display: block; flex: none; color: var(--text-heading); }
.lg-word {
  font: 800 1.32rem/1 var(--font-body);
  letter-spacing: -0.055em;
  color: var(--text-heading);
}
/* El aparejo se levanta bloque a bloque cuando aparece y al pasar el
   cursor: son seis rectángulos, así que sale gratis. */
@media (prefers-reduced-motion: no-preference) {
  .lg-mark rect { transform-box: fill-box; transform-origin: 0 50%; }
  .lg.is-in rect { animation: lg-lay 520ms var(--ease-out) backwards; }
  .lg.is-in rect:nth-child(1) { animation-delay: 0ms; }
  .lg.is-in rect:nth-child(2) { animation-delay: 70ms; }
  .lg.is-in rect:nth-child(3) { animation-delay: 140ms; }
  .lg.is-in rect:nth-child(4) { animation-delay: 210ms; }
  .lg.is-in rect:nth-child(5) { animation-delay: 280ms; }
  .lg.is-in rect:nth-child(6) { animation-delay: 350ms; }
  @keyframes lg-lay {
    from { opacity: 0; transform: translateX(-9px) scaleX(0.4); }
    to   { opacity: inherit; transform: none; }
  }
}

/* ------------------------------------------------------------- Barra */
.lp-nav {
  position: sticky; top: 0; z-index: 110;
  background: transparent;
  transition: background var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.lp-nav.is-tight {
  background: var(--lp-glass);
  backdrop-filter: saturate(1.7) blur(14px);
  -webkit-backdrop-filter: saturate(1.7) blur(14px);
  box-shadow: 0 1px 0 var(--border-subtle);
}
.lp-nav-in {
  display: flex; align-items: center; gap: var(--space-4);
  min-height: var(--lp-nav-h);
  padding-block: 10px;
}
.lp-brand { text-decoration: none; flex: none; }
.lp-nav-links {
  display: none; align-items: center; gap: 4px;
  flex: 1 1 auto; min-width: 0; margin-inline: var(--space-3);
}
.lp-nav-links a {
  padding: 9px 13px; border-radius: var(--radius-pill);
  font: 600 var(--text-sm) var(--font-body);
  color: var(--text-body); text-decoration: none; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.lp-nav-links a:hover { background: var(--surface-raised); color: var(--text-heading); }
.lp-nav-acts { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.lp-icon {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; flex: none;
  border-radius: 50%; cursor: pointer;
  background: transparent; color: var(--text-body);
  border: 1.5px solid var(--border-subtle);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.lp-icon:hover { background: var(--surface-raised); color: var(--text-heading); }

.lp-menu {
  display: grid; gap: 2px;
  padding: 10px var(--lp-pad) 18px;
  background: var(--lp-glass);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-md);
}
.lp-menu a {
  padding: 13px 14px; border-radius: var(--radius-md);
  font: 600 var(--text-base) var(--font-body);
  color: var(--text-heading); text-decoration: none;
  min-height: var(--hit-target); display: flex; align-items: center;
}
.lp-menu a:hover, .lp-menu button:hover { background: var(--surface-raised); }
.lp-menu button {
  padding: 13px 14px; border: 0; border-radius: var(--radius-md); cursor: pointer;
  background: none; text-align: left;
  font: 600 var(--text-base) var(--font-body); color: var(--text-heading);
  min-height: var(--hit-target); display: flex; align-items: center; gap: 10px;
}
@media (min-width: 401px) { .lp-menu .lp-menu-theme { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .lp-menu a { animation: lp-drop 280ms var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 35ms); }
  @keyframes lp-drop { from { opacity: 0; transform: translateY(-8px); } }
}

.lp-only-sm { display: inline-grid; }
.lp-hide-sm { display: none; }
/* En 320px la barra no da para todo: el botón de tema se muda al panel,
   donde además se lee qué hace. Mismo patrón que el menú de un muro. */
@media (max-width: 400px) {
  .lp-nav-in { gap: 8px; }
  .lp-nav-acts { gap: 6px; }
  .lp-nav-acts > .lp-icon:first-child { display: none; }
  .lp-nav-acts .btn-sm { padding: 0 13px; }
}
@media (min-width: 900px) {
  .lp-nav-links { display: flex; }
  .lp-only-sm { display: none; }
  .lp-hide-sm { display: inline-flex; }
  .lp-menu { display: none !important; }
}

/* ----------------------------------------------------------- Portada */
.lp-hero {
  position: relative;
  padding-top: clamp(40px, 7vw, 90px);
  padding-bottom: clamp(56px, 8vw, 110px);
  margin-top: calc(var(--lp-nav-h) * -1 - 10px);
  padding-block-start: calc(var(--lp-nav-h) + clamp(40px, 7vw, 90px));
  isolation: isolate;
  overflow: hidden;
}
.lp-hero-bg { position: absolute; inset: -12% 0 auto; height: 124%; z-index: -2; }
.lp-hero-bg img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0.20;
  /* El ritmo lento de la capa de fondo. `will-change` la sube a su propia
     capa desde el primer fotograma: sin esto, el navegador la ascendía
     recién al primer cambio y ese primer paso se sentía a saltos. */
  transform: translate3d(0, calc(var(--sec-shift, 0px) * 0.55), 0) scale(1.06);
  will-change: transform;
}
[data-theme="dark"] .lp-hero-bg img { opacity: 0.30; }
.lp-hero-glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(58% 46% at 78% 8%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%),
    radial-gradient(52% 44% at 6% 82%, color-mix(in srgb, var(--detail) 20%, transparent), transparent 70%),
    linear-gradient(180deg, transparent 42%, var(--surface-page) 96%);
  transform: translate3d(0, calc(var(--sec-shift, 0px) * 0.2), 0);
  will-change: transform;
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .lp-hero-glow { background: linear-gradient(180deg, var(--accent-soft) 0%, transparent 46%, var(--surface-page) 96%); }
}

.lp-hero-in { display: grid; gap: clamp(38px, 6vw, 64px); align-items: center; }
.lp-hero-copy { max-width: 34ch; }
.lp-hero-copy h1 { margin-bottom: 20px; }

.lp-kicker {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 15px 7px 11px; margin-bottom: 22px;
  border-radius: var(--radius-pill);
  background: var(--surface-card); border: var(--lp-card);
  font: 600 var(--text-xs) var(--font-body); color: var(--text-body);
  box-shadow: var(--shadow-sm);
}
.lp-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--success);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 55%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .lp-dot { animation: lp-pulse 2.4s var(--ease-out) infinite; }
  @keyframes lp-pulse {
    50%  { box-shadow: 0 0 0 6px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
  }
}

.lp-hero-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.lp-hero-trust { margin-top: 20px; font-size: var(--text-sm); color: var(--text-muted); }
.lp-hero-trust b { color: var(--text-heading); }

/* Los tres muros flotando. La inclinación sólo donde hay cursor. */
.lp-hero-walls {
  position: relative;
  display: grid;
  justify-items: end;
  min-height: min(62vw, 400px);
  perspective: 1400px;
}
.lp-hero-wall {
  grid-area: 1 / 1;
  width: min(100%, 460px);
  transform:
    translate3d(calc(var(--i) * -9%), calc(var(--i) * 8% - 5%), 0)
    scale(calc(1 - var(--i) * 0.06));
  z-index: calc(3 - var(--i));
  /* Los de atrás se apagan un poco: da profundidad y quita ruido. */
  opacity: calc(1 - var(--i) * 0.22);
  filter: drop-shadow(0 18px 44px rgba(23, 20, 18, 0.22));
  transition: transform var(--dur-slow) var(--ease-out);
}
[data-theme="dark"] .lp-hero-wall { filter: drop-shadow(0 18px 44px rgba(0, 0, 0, 0.5)); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .lp-hero-walls[data-tilt] {
    transform: rotateX(calc(var(--ty, 0) * -5deg)) rotateY(calc(var(--tx, 0) * 7deg));
    transform-style: preserve-3d;
    transition: transform 420ms var(--ease-out);
  }
  .lp-hero-wall { transform: translate3d(calc(var(--i) * -9%), calc(var(--i) * 8% - 5%), calc(var(--i) * -60px)) scale(1); }
}

.lp-scroll {
  display: none; position: absolute; left: 50%; bottom: 22px;
  width: 26px; height: 42px; margin-left: -13px;
  border: 1.5px solid var(--border-strong); border-radius: 999px;
}
.lp-scroll span {
  position: absolute; left: 50%; top: 9px; width: 3px; height: 7px; margin-left: -1.5px;
  border-radius: 2px; background: var(--text-muted);
}
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .lp-scroll { display: block; }
  .lp-scroll span { animation: lp-wheel 1.9s var(--ease-out) infinite; }
  @keyframes lp-wheel { 60% { transform: translateY(15px); opacity: 0; } 61%, 100% { opacity: 0; } }
}

/* En el celular sobra la baraja: el de delante ya cuenta la historia, y
   los de atrás asomaban por el borde y costaban dos fotos más. */
@media (max-width: 699px) {
  .lp-hero-walls { justify-items: stretch; min-height: 0; }
  .lp-hero-wall { width: 100%; transform: none; opacity: 1; }
  .lp-hero-wall + .lp-hero-wall { display: none; }
}
@media (min-width: 980px) {
  .lp-hero-in { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }
  .lp-hero-copy { max-width: none; }
}

/* -------------------------------------------- Muro de ejemplo (HTML) */
.wall {
  --wt: var(--accent);
  --wi: var(--neutral-950);
  display: block; margin: 0;
  border-radius: clamp(12px, 1.4vw, 18px);
  overflow: hidden;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-md);
  container-type: inline-size;
}
.wall-top {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border-subtle);
}
.wall-dots { display: flex; gap: 4px; flex: none; }
.wall-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); }
.wall-url {
  font: 500 10px/1 var(--font-body); color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wall-page { padding: 10px; display: grid; gap: 9px; }
.wall-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wall-bar b {
  font: 700 clamp(10px, 3.2cqi, 13px)/1 var(--font-body);
  letter-spacing: -0.02em; color: var(--text-heading);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wall-links { display: flex; gap: 5px; flex: none; }
.wall-links i { width: 14px; height: 3px; border-radius: 2px; background: var(--border-strong); }

.wall-hero {
  position: relative; border-radius: 10px; overflow: hidden;
  aspect-ratio: 16 / 9; background: var(--wi);
}
.wall-hero img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.72; }
.wall-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, var(--wi) 6%, color-mix(in srgb, var(--wt) 62%, transparent) 58%, transparent 100%);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .wall-hero::after { background: linear-gradient(105deg, var(--wi) 10%, transparent 90%); }
}
.wall-hero-copy {
  position: absolute; inset: auto 34% 8px 9px; z-index: 1;
  display: grid; gap: 3px;
}
.wall-hero-copy span {
  font: 700 clamp(6px, 2cqi, 8px)/1 var(--font-body);
  letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72);
}
.wall-hero-copy strong {
  font: 700 clamp(9px, 3.4cqi, 15px)/1.14 var(--font-body);
  letter-spacing: -0.025em; color: #fff;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.wall-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.wall-tile { display: grid; gap: 4px; min-width: 0; }
.wall-tile i {
  display: block; aspect-ratio: 1; border-radius: 7px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--wt) 55%, var(--surface-raised)), color-mix(in srgb, var(--wt) 14%, var(--surface-raised)));
}
.wall-tile em {
  font: 500 clamp(6px, 2.1cqi, 9px)/1.25 var(--font-body); font-style: normal;
  color: var(--text-muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.wall-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.wall-rows li {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 8px; border-radius: 7px;
  background: var(--surface-raised);
  font: 500 clamp(6px, 2.2cqi, 10px)/1 var(--font-body); color: var(--text-body);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wall-rows i { width: 6px; height: 6px; border-radius: 50%; background: var(--wt); flex: none; }

.wall-form { display: grid; gap: 5px; }
.wall-input {
  padding: 7px 9px; border-radius: 7px;
  border: 1px solid var(--border-subtle); background: var(--surface-raised);
  font: 500 clamp(6px, 2.2cqi, 10px)/1 var(--font-body); color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.wall-cta {
  justify-self: start;
  padding: 6px 13px; border-radius: 999px;
  background: var(--wt); color: #fff;
  font: 700 clamp(6px, 2.2cqi, 10px)/1 var(--font-body);
  white-space: nowrap;
}

/* ------------------------------------------------- Banda de oficios */
.lp-trades {
  padding-block: clamp(26px, 3vw, 42px);
  border-block: 1px solid var(--border-subtle);
  background: var(--surface-card);
  overflow: hidden;
}
.lp-trades-lead {
  text-align: center; margin-bottom: 16px;
  font: 700 var(--text-xs) var(--font-body);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted);
}
.lp-marquee { display: flex; width: max-content; gap: 0; }
.lp-marquee-row {
  display: flex; align-items: center; gap: 10px;
  list-style: none; margin: 0; padding: 0 5px;
}
.lp-marquee-row li {
  padding: 9px 17px; border-radius: var(--radius-pill);
  background: var(--surface-raised); border: 1px solid var(--border-subtle);
  font: 600 var(--text-sm) var(--font-body); color: var(--text-body);
  white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
  .lp-marquee { animation: lp-slide 46s linear infinite; }
  .lp-trades:hover .lp-marquee { animation-play-state: paused; }
  @keyframes lp-slide { to { transform: translate3d(-50%, 0, 0); } }
}
@media (prefers-reduced-motion: reduce) {
  .lp-marquee { width: 100%; overflow-x: auto; }
  .lp-marquee-row + .lp-marquee-row { display: none; }
}

/* -------------------------------------------------- Antes / después */
.lp-contrast-grid {
  display: grid; gap: clamp(16px, 2.4vw, 26px);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 820px) { .lp-contrast-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.lp-panel {
  padding: clamp(22px, 3vw, 34px);
  border-radius: var(--radius-lg);
  border: var(--lp-card);
  background: var(--surface-card);
}
.lp-panel--before { background: var(--surface-raised); }
.lp-panel--after {
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
  box-shadow: var(--shadow-md);
}
.lp-panel-tag {
  display: inline-block; margin-bottom: 18px;
  font: 700 var(--text-xs) var(--font-body);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
}
.lp-panel--before .lp-panel-tag { color: var(--text-muted); }
.lp-panel--after .lp-panel-tag { color: var(--accent); }
.lp-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.lp-panel li {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 11px;
  align-items: start; font-size: var(--text-base); line-height: 1.4;
}
.lp-panel li svg { margin-top: 3px; }
.lp-panel--before li { color: var(--text-muted); }
.lp-panel--before li svg { color: var(--danger); }
.lp-panel--after li { color: var(--text-body); }
.lp-panel--after li svg { color: var(--success); }
@media (prefers-reduced-motion: no-preference) {
  .lp-panel.in li { animation: lp-rise 460ms var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 70ms + 160ms); }
  @keyframes lp-rise { from { opacity: 0; transform: translateX(-10px); } }
}

/* --------------------------------------------------- Cómo funciona */
.lp-steps-grid { display: grid; gap: clamp(24px, 4vw, 52px); }
.lp-steps-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(20px, 3vw, 34px); }
.lp-step {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 18px;
  padding: clamp(20px, 2.6vw, 30px);
  border-radius: var(--radius-lg); border: var(--lp-card);
  background: var(--surface-card);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.lp-step-n {
  font: 800 var(--text-sm) var(--font-body);
  letter-spacing: 0.08em; font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  padding-top: 3px;
}
.lp-step-copy h3 { margin-bottom: 8px; }
.lp-step-copy p { color: var(--text-muted); }
.lp-step-shot {
  grid-column: 1 / -1; width: 100%; height: auto;
  border-radius: var(--radius-md); display: block;
}
/* `landing.js` los clona dentro del stage en cuanto hay movimiento
   permitido, sin importar el ancho de pantalla: escondidos por defecto
   para que en escritorio no aparezcan sueltos dentro del grid del stage
   (que ya tiene su propio `.lp-stage-shot` con `grid-area: 1 / 1`). Sólo
   el modo fijado de móvil, más abajo, los enseña. */
.lp-stage-text, .lp-stage-scrim { display: none; }

@media (min-width: 1000px) {
  .lp-steps-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; }
  .lp-step-shot { display: none; }
  .lp-step { opacity: 0.5; transition: opacity var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
  .lp-step.is-on { opacity: 1; border-color: color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: var(--shadow-md); }
  .lp-step.is-on .lp-step-n { color: var(--accent); }

  .lp-steps-stage {
    display: grid; position: sticky; top: calc(var(--lp-nav-h) + 40px);
    border-radius: var(--radius-lg); overflow: hidden;
    aspect-ratio: 1000 / 760; background: var(--surface-raised);
    box-shadow: var(--shadow-lg);
  }
  .lp-stage-shot {
    grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transform: scale(1.04);
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  }
  .lp-stage-shot.is-on { opacity: 1; transform: none; }
}

/* Móvil: un único stage se fija a pantalla completa durante todo el
   recorrido de los tres pasos (no uno por paso — así la foto que se va
   y la que entra pueden solaparse de verdad, como pide el efecto). Cada
   `<li data-pin>` es el «carril» de un paso; `landing.js` sube su avance
   agregado a un progreso continuo `g` (0 al entrar al primer paso, 3 al
   salir del último) y de ahí saca, por índice de paso `i` con
   `d = g - i`:
   - `--op` en cada `.lp-stage-shot`: 0→1→0 según `d`, con el tramo de
     subida empezando ANTES de que `d` llegue a 0 (mientras el paso
     anterior está en su tramo final) — el solape «casi al mismo
     tiempo» que se pidió.
   - `--txt`/`--scrim` en el texto clonado (`.lp-stage-text`, uno por
     paso, construido por JS con el número/título/texto de cada
     `.lp-step`): entra deslizando de abajo hacia arriba, se sostiene,
     se degrada, y la mezcla de degradado + `--scrim` es lo que oscurece
     la foto según cuánto texto hay encima.
   Todo es función pura de la posición de scroll — sube y baja igual en
   los dos sentidos — y sólo con `prefers-reduced-motion: no-preference`;
   si no, cada paso se lee seguido con su propia foto y sin carril extra
   (ver docs/10-landing.md §6). */
@media (max-width: 999px) and (prefers-reduced-motion: no-preference) {
  /* Lista y stage van en la MISMA celda del grid (superpuestos, no uno
     debajo del otro): así la fila toma la altura de la lista —la suma
     de los carriles— y el stage, sticky dentro de esa misma fila, tiene
     de verdad todo ese recorrido para quedarse fijo. Apilados en filas
     distintas el stage se fijaba dentro de su propia fila de 100vh, muy
     lejos —y sin relación— del recorrido real de los pasos. */
  .lp-steps-grid { display: grid; }
  .lp-steps-list, .lp-steps-stage { grid-area: 1 / 1; }
  .lp-steps-list { gap: 0; }
  .lp-step {
    /* El recorrido «sticky» de cada paso es `min-height - 100vh`: con
       150vh daba sólo 50vh, tan corto que un scroll normal lo cruzaba
       entero antes de que se notara el texto o el oscurecido. Con 220vh
       el paso tiene tiempo real de leerse. */
    display: block; min-height: 220vh;
    padding: 0; border: 0; background: none;
  }
  .lp-step-n, .lp-step-copy, .lp-step-shot {
    /* El contenido real de cada paso se clona en el stage; aquí sólo se
       queda —fuera de vista— para lectores de pantalla y para cuando no
       hay JS (`.lp-step-pin` ya no existe: sin JS este bloque nunca se
       activa y el paso se ve con su foto normal, como el resto). */
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }

  .lp-steps-stage {
    display: block; position: sticky; top: 0;
    width: 100vw; margin-inline: calc(50% - 50vw);
    height: 100vh; height: 100dvh;
    aspect-ratio: auto; border-radius: 0; box-shadow: none;
    background: var(--surface-page);
    overflow: hidden;
    /* Sin transform propio: comparte celda de grid con `.lp-steps-list`
       (`grid-area: 1 / 1`), así que el `position: sticky` ya se suelta
       solo en cuanto se acaba el alto de esa celda —no hace falta
       empujarlo a mano— y sube con el scroll como cualquier elemento
       normal, con su foto de fondo todavía entera gracias a
       `holdPhase` en landing.js. */
  }
  .lp-stage-shot {
    position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%; object-fit: cover;
    opacity: var(--op, 0);
    /* Estilo «close up»: entra grande y baja a tamaño normal, luego
       vuelve a crecer al disolverse hacia la siguiente —el detalle de
       la foto es secundario al texto, así que el rango es discreto. */
    transform: scale(var(--zoom, 1)); transition: none;
  }
  /* `display: block` explícito: la regla de arriba (`display: none`)
     los esconde por defecto para que no aparezcan sueltos en escritorio,
     y esta media query nunca la revertía — el `opacity`/`--txt` se
     calculaba bien pero el elemento no se pintaba nunca, con `display`
     ganándole a `opacity` sin que hiciera falta ninguna otra pelea de
     especificidad. */
  .lp-stage-scrim {
    display: block;
    position: absolute; inset: 0; z-index: 1;
    /* Pareja en toda la foto —no sólo abajo—: el texto la recorre
       entera (`--p`), así que necesita contraste parejo en todo el
       recorrido, no sólo cerca del borde inferior. */
    background: rgb(8, 6, 5);
    opacity: var(--scrim, 0.22);
  }
  .lp-stage-text {
    display: block;
    position: absolute; inset: auto 0 0 0; z-index: 2;
    padding: 0 var(--lp-pad) calc(34px + env(safe-area-inset-bottom));
    /* `--p` (0-1, todo el tramo del paso, sin ventanas) es quien mueve
       el bloque entero: nace pegado abajo y recorre casi toda la
       pantalla hasta terminar justo debajo del nav —sin importar cuánto
       texto traiga cada paso—. La cuenta usa `100%` (el alto propio de
       este bloque, con todo y su padding) en vez de un `vh` fijo: un
       párrafo largo (el del paso 1 es varias líneas más que los otros
       dos) ya nace más arriba por estar anclado abajo, así que necesita
       MENOS recorrido para llegar al mismo punto; con un `vh` fijo
       calibrado para un bloque corto, uno largo se pasaba de largo y
       quedaba tapado por el nav todavía opaco, antes de que `stagger`
       (en landing.js) alcanzara a apagarlo. Con `100%` el destino final
       (72px bajo la punta) da igual sin importar cuántas líneas traiga
       el párrafo de cada paso. */
    transform: translateY(calc(var(--p, 0) * (100% - 100dvh + 72px)));
  }
  .lp-stage-n {
    display: block; margin-bottom: 12px;
    font: 800 var(--text-xs) var(--font-body);
    letter-spacing: 0.16em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    opacity: var(--n, 0);
    transform: translateY(calc((1 - var(--n, 0)) * 14px));
  }
  /* Brutal, tapa de revista: el título es lo primero que se lee.
     `.lp-steps-stage .lp-stage-title` (dos clases) y no sólo la clase
     sola: `.lp h3 { font-size: var(--text-lg) }` pesa más que una
     clase suelta y se comía el tamaño grande. */
  .lp-steps-stage .lp-stage-title {
    font: 800 clamp(2.9rem, 14vw, 5rem) var(--font-body);
    letter-spacing: -0.04em; line-height: 0.92;
    color: #fff; text-wrap: balance;
    margin-bottom: 16px;
    opacity: var(--title, 0);
    transform: translateY(calc((1 - var(--title, 0)) * 18px));
  }
  .lp-stage-body {
    font: 600 clamp(2.15rem, 6.6vw, 3.4rem) / 1.35 var(--font-body);
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.9); max-width: 30ch;
    opacity: var(--body, 0);
    transform: translateY(calc((1 - var(--body, 0)) * 18px));
  }
}

/* ------------------------------------------------- Carrusel 3D (base) */
/* Un solo motor para «lo que hace tu muro» y «por qué MURO»: track con
   scroll nativo (swipe continuo en táctil), arrastre con el ratón,
   botones de flecha y autoplay — todo en `landing.js`. Las tarjetas de
   los lados giran en 3D hacia afuera y se encogen; la central no tapa la
   pantalla completa a propósito, para que se note que hay más para ver.
   Las flechas flotan sobre el viewport (no le quitan ancho): en móvil es
   lo que deja que la tarjeta central se vea del tamaño de la referencia,
   con las vecinas asomando de verdad a los lados. */
.lp-carousel { position: relative; }
.lp-car-viewport {
  width: 100%;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  cursor: grab;
}
.lp-car-viewport::-webkit-scrollbar { display: none; }
.lp-car-viewport.is-dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.lp-car-track {
  display: flex;
  width: max-content;
  gap: clamp(14px, 2.2vw, 22px);
  padding-block: 16px;
  /* Deja hueco antes de la primera tarjeta y después de la última para
     que también ellas puedan centrarse con su vecina asomando al lado. */
  padding-inline: calc(50% - clamp(120px, 39vw, 160px));
}
.lp-car-item {
  scroll-snap-align: center;
  /* La perspectiva va en el propio `transform` de cada tarjeta, no como
     propiedad en un ancestro: dentro de un contenedor con scroll
     (`overflow-x: auto`) los navegadores actuales no aplican la
     perspectiva del padre a lo que rota más abajo — el giro se veía
     como un simple achicado, sin la profundidad de un giro en 3D. La
     rotación va siempre hacia afuera del centro: el borde de cada
     tarjeta que mira al centro se adelanta y el que mira al final del
     carrusel se hunde; `translateZ` remata la profundidad. */
  transform:
    perspective(700px)
    rotateY(calc(var(--d, 0) * -36deg))
    translateZ(calc(min(abs(var(--d, 0)), 1) * -58px))
    scale(calc(1 - min(abs(var(--d, 0)), 1) * 0.09));
  opacity: calc(1 - min(abs(var(--d, 0)), 1) * 0.5);
  /* Ni el giro ni el desvanecido llevan transición **a propósito**: `--d`
     se recalcula en cada fotograma con el propio scroll, así que una
     transición encima no suaviza nada —persigue un destino que ya cambió—
     y es lo que hacía que la tarjeta llegara tarde y rebotara al frenar.
     Sin ella el giro va pegado al dedo, fotograma a fotograma. */
  transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
  will-change: transform, opacity;
}
.lp-car-nav {
  position: absolute; top: 50%; z-index: 4;
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--border-subtle);
  background: var(--lp-glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--shadow-sm);
  color: var(--text-body); cursor: pointer; padding: 0;
  transform: translateY(-50%);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.lp-car-nav:hover { background: var(--surface-raised); border-color: var(--border-strong); color: var(--text-heading); }
.lp-car-nav[data-carousel-prev] { left: 2px; }
.lp-car-nav[data-carousel-next] { right: 2px; }
@media (max-width: 560px) {
  .lp-car-nav { width: 34px; height: 34px; }
  .lp-car-nav[data-carousel-prev] { left: -2px; }
  .lp-car-nav[data-carousel-next] { right: -2px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-car-item { transform: none !important; opacity: 1 !important; transition: none; }
  .lp-car-viewport { scroll-snap-type: none; }
}

/* ---------------------------------------------------------- Módulos */
.lp-mod {
  flex: 0 0 clamp(240px, 78vw, 320px);
  padding: clamp(20px, 2.4vw, 28px);
  border-radius: var(--radius-lg); border: var(--lp-card);
  background: var(--surface-card);
  display: grid; gap: 10px; align-content: start;
}
@media (hover: hover) {
  .lp-mod:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }
}
.lp-mod-ico {
  display: inline-grid; place-items: center; width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: var(--accent-soft); color: var(--accent);
}
.lp-mod p { color: var(--text-muted); font-size: var(--text-sm); }
.lp-mod-price { font-size: var(--text-xs); color: var(--text-muted); }
.lp-mod-price b { color: var(--text-heading); font-weight: 700; }
.lp-mod-price s { color: var(--text-muted); }

/* --------------------------------------------------------- Galería */
.lp-showcase { background: var(--surface-card); border-block: 1px solid var(--border-subtle); }
.lp-showcase-grid {
  display: grid; gap: clamp(18px, 2.6vw, 30px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.lp-show { position: relative; display: grid; gap: 12px; }
.lp-show-wall {
  /* Cada tarjeta se mueve a su propio ritmo dentro de la misma sección. */
  transform: translate3d(0, calc(var(--sec-shift, 0px) * var(--lag, 0)), 0);
  transition: transform var(--dur-base) var(--ease-out);
  will-change: transform;
}
@media (hover: hover) {
  .lp-show:hover .lp-show-wall { transform: translate3d(0, calc(var(--sec-shift, 0px) * var(--lag, 0) - 6px), 0); }
  .lp-show:hover .wall { box-shadow: var(--shadow-lg); }
}
/* Abrir el demo: un botón de verdad —con su nombre completo para quien
   navega a oídas— que además se estira por toda la tarjeta con su
   `::after`, así se abre tocando el muro sin meterlo dentro del botón. */
.lp-show-play {
  /* Sin `position` propia a propósito: así su `::after` se mide contra
     `.lp-show` —la tarjeta entera— y no contra el botón. */
  display: inline-flex; align-items: center; justify-self: start; gap: 7px;
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  background: var(--surface-raised); border: 1px solid var(--border-subtle);
  font: 700 var(--text-xs) var(--font-body); color: var(--text-heading);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}
.lp-show-play::after {
  content: ""; position: absolute; inset: 0;
  border-radius: clamp(12px, 1.4vw, 18px);
}
.lp-show-play:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (hover: hover) {
  .lp-show-play:hover { background: var(--accent); border-color: transparent; color: var(--on-accent); }
}
.lp-show-meta { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; padding-inline: 4px; }
.lp-show-meta b { font: 700 var(--text-base) var(--font-body); color: var(--text-heading); letter-spacing: -0.02em; }
.lp-show-meta span { font-size: var(--text-sm); color: var(--text-muted); }
.lp-showcase-note {
  margin-top: clamp(26px, 3vw, 40px); text-align: center;
  font-size: var(--text-sm); color: var(--text-muted);
}

/* --------------------------------------------------------- Paquetes */
.lp-season {
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  padding: var(--space-4) var(--space-5); margin-bottom: clamp(22px, 3vw, 34px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--accent); background: var(--accent-soft);
}
.lp-season-copy { min-width: 0; flex: 1 1 220px; display: grid; gap: 3px; }
.lp-season-copy b { color: var(--text-heading); font-size: var(--text-base); }
.lp-season-copy span { font-size: var(--text-sm); color: var(--text-muted); }

.lp-plans {
  display: grid; gap: clamp(14px, 1.8vw, 20px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 248px), 1fr));
  align-items: start;
}
.lp-plan {
  position: relative;
  display: grid; gap: 12px; align-content: start;
  padding: clamp(22px, 2.6vw, 30px);
  border-radius: var(--radius-lg); border: var(--lp-card);
  background: var(--surface-card);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
@media (hover: hover) { .lp-plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } }
.lp-plan.is-featured {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}
.lp-plan-flag {
  position: absolute; top: -12px; left: clamp(22px, 2.6vw, 30px);
  padding: 5px 13px; border-radius: var(--radius-pill);
  background: var(--accent); color: var(--on-accent);
  font: 700 var(--text-xs) var(--font-body); white-space: nowrap;
}
.lp-plan-name { font-size: var(--text-xl); }
.lp-plan-price { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.lp-plan-price b {
  font: 800 clamp(2rem, 1.5rem + 1.6vw, 2.6rem)/1 var(--font-body);
  letter-spacing: -0.04em; color: var(--text-heading);
  font-variant-numeric: tabular-nums;
}
.lp-plan-price s { color: var(--text-muted); font-size: var(--text-base); }
.lp-plan-price span { font-size: var(--text-sm); color: var(--text-muted); }
.lp-plan-for {
  font-size: var(--text-sm); color: var(--text-body);
  padding: 10px 14px; border-radius: var(--radius-md);
  background: var(--surface-raised);
}
.lp-plan-desc { font-size: var(--text-sm); color: var(--text-muted); }
.lp-plan-has { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.lp-plan-has li {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 9px; align-items: start;
  font-size: var(--text-sm); color: var(--text-body);
}
.lp-plan-has svg { margin-top: 3px; color: var(--success); }
.lp-plan .btn { margin-top: 4px; justify-self: stretch; }

.lp-pricing-note { margin-top: clamp(22px, 3vw, 34px); text-align: center; color: var(--text-muted); font-size: var(--text-sm); }

/* La puerta al catálogo completo. */
.lp-catalog {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  margin-top: clamp(24px, 3vw, 38px);
  padding: clamp(22px, 3vw, 30px) clamp(22px, 3vw, 34px);
  border-radius: var(--radius-lg);
  background: var(--surface-band); color: var(--on-band);
  text-decoration: none; isolation: isolate;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.lp-catalog-glow {
  position: absolute; inset: -60% -20% auto; height: 220%; z-index: -1;
  background: radial-gradient(45% 55% at 82% 50%, color-mix(in srgb, var(--detail) 62%, transparent), transparent 72%);
  transform: translate3d(0, 0, 0);
  transition: transform var(--dur-slow) var(--ease-out);
}
.lp-catalog-copy { display: grid; gap: 5px; min-width: 0; flex: 1 1 260px; }
.lp-catalog-copy b { font: 700 var(--text-xl) var(--font-body); letter-spacing: -0.03em; }
.lp-catalog-copy span { font-size: var(--text-sm); opacity: 0.72; }
.lp-catalog-go {
  display: grid; place-items: center; flex: none;
  width: 52px; height: 52px; border-radius: 50%;
  background: color-mix(in srgb, var(--on-band) 14%, transparent);
  transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
@media (hover: hover) {
  .lp-catalog:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
  .lp-catalog:hover .lp-catalog-go { transform: translateX(5px); background: color-mix(in srgb, var(--on-band) 24%, transparent); }
  .lp-catalog:hover .lp-catalog-glow { transform: translateX(-8%); }
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .lp-catalog-glow { background: none; }
  .lp-catalog-go { background: rgba(255, 255, 255, 0.14); }
}

/* ----------------------------------------------------------- Extras */
.lp-addons { background: var(--surface-card); border-block: 1px solid var(--border-subtle); }
.lp-addons-grid {
  display: grid; gap: clamp(12px, 1.6vw, 18px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
}
.lp-addon {
  display: grid; gap: 10px; align-content: start;
  padding: clamp(20px, 2.4vw, 26px);
  border-radius: var(--radius-lg); border: var(--lp-card);
  background: var(--surface-page);
}
.lp-addon-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.lp-addon-price { font-size: var(--text-sm); color: var(--text-muted); white-space: nowrap; }
.lp-addon-price b { font: 700 var(--text-lg) var(--font-body); color: var(--text-heading); font-variant-numeric: tabular-nums; }
.lp-addon-price s { color: var(--text-muted); margin-right: 3px; }
.lp-addon p { font-size: var(--text-sm); color: var(--text-muted); }
.lp-addon .btn { justify-self: start; }

/* ------------------------------------------------------ Comparativa */
.lp-compare-pick {
  display: flex; gap: 7px; margin-bottom: 18px;
  overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: none;
}
.lp-compare-pick::-webkit-scrollbar { display: none; }
.lp-pick {
  flex: none; cursor: pointer;
  padding: 10px 16px; min-height: var(--hit-target);
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-subtle); background: var(--surface-card);
  font: 600 var(--text-sm) var(--font-body); color: var(--text-body);
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.lp-pick.is-on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

.lp-compare-vs {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-bottom: 14px;
  font: 700 var(--text-sm) var(--font-body); color: var(--text-muted);
}
.lp-compare-vs b { color: var(--text-heading); }
.lp-compare-vs-tag {
  display: inline-grid; place-items: center; flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent);
  font: 800 10px/1 var(--font-body);
}

.lp-compare-wrap {
  border: var(--lp-card); border-radius: var(--radius-lg);
  background: var(--surface-card);
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.lp-compare-table { width: 100%; border-collapse: collapse; }
.lp-compare-table th, .lp-compare-table td {
  padding: 13px 14px; text-align: left; vertical-align: middle;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-sm);
}
.lp-compare-table tbody tr:last-child th, .lp-compare-table tbody tr:last-child td { border-bottom: 0; }
.lp-compare-table thead th {
  background: var(--surface-raised); color: var(--text-heading);
  position: sticky; top: 0; z-index: 1;
}
.lp-compare-table thead th span { display: block; font: 700 var(--text-sm) var(--font-body); letter-spacing: -0.02em; }
.lp-compare-table thead th b { display: block; font: 600 var(--text-xs) var(--font-body); color: var(--text-muted); margin-top: 2px; }
.lp-compare-table tbody th { font-weight: 600; color: var(--text-heading); }
.lp-compare-table td { color: var(--text-muted); }
.lp-compare-table td span { font-size: var(--text-xs); }
.lp-compare-table td.is-si { color: var(--text-body); }
.lp-compare-table td.is-si svg { color: var(--success); vertical-align: -2px; margin-right: 5px; }
.lp-compare-table td.is-no { color: var(--text-muted); opacity: 0.55; }

/* Móvil: una o dos columnas —modo VS— entre las que elige arriba. */
@media (max-width: 899px) {
  .lp-compare-table [data-compare-col] { display: none; }
  .lp-compare-table [data-compare-col].is-on { display: table-cell; }
  .lp-compare-table th, .lp-compare-table td { padding: 12px 12px; }
  .lp-compare-wrap.is-vs .lp-compare-table { table-layout: fixed; }
  .lp-compare-wrap.is-vs .lp-compare-table tbody th { width: 40%; }
  .lp-compare-wrap.is-vs .lp-compare-table [data-compare-col] { width: 30%; }
  .lp-compare-wrap.is-vs .lp-compare-table th, .lp-compare-wrap.is-vs .lp-compare-table td {
    padding: 10px 8px; font-size: var(--text-xs);
  }
  .lp-compare-wrap.is-vs .lp-compare-table tbody th { font-size: var(--text-sm); }
  .lp-compare-wrap.is-vs .lp-compare-table td.is-si svg { margin: 0 auto 3px; display: block; }
  .lp-compare-wrap.is-vs .lp-compare-table td span { display: block; }
}
@media (min-width: 900px) {
  .lp-compare-pick, .lp-compare-vs { display: none; }
  .lp-compare-table th, .lp-compare-table td { text-align: center; }
  .lp-compare-table tbody th, .lp-compare-table thead th:first-child { text-align: left; }
  .lp-compare-table td.is-si svg { margin: 0 auto 3px; display: block; }
  .lp-compare-table td span { display: block; }
  /* La tabla ya no se corta en pantallas angostas: se desplaza, y la
     primera columna se queda fija para leer siempre de qué fila se trata. */
  .lp-compare-table tbody th, .lp-compare-table thead th:first-child {
    position: sticky; left: 0; z-index: 2;
    background: var(--surface-card);
  }
  .lp-compare-table thead th:first-child { background: var(--surface-raised); z-index: 3; }
}
.lp-compare-acts td { padding-block: 16px; }

/* ---------------------------------------------------------- Razones */
.lp-reason {
  flex: 0 0 clamp(240px, 78vw, 320px);
  display: grid; gap: 9px; align-content: start;
  padding: clamp(20px, 2.4vw, 26px);
  border-radius: var(--radius-lg); border: var(--lp-card);
  background: var(--surface-card);
}
.lp-reason-ico {
  display: inline-grid; place-items: center; width: 42px; height: 42px;
  border-radius: var(--radius-md);
  background: var(--surface-raised); color: var(--accent);
  border: 1px solid var(--border-subtle);
}
.lp-reason p { color: var(--text-muted); font-size: var(--text-sm); }

/* -------------------------------------------------------- Preguntas */
/* Sin `grid-template-columns` la columna es implícita (`auto`): su pista
   se mide por el contenido que no puede encoger —la pregunta larga sin
   partir— y ESA pista se sale del propio `.lp-faq-in`, que se queda con
   el ancho correcto pero deja que la lista se desborde por su derecha.
   `minmax(0, 1fr)` explícito es una pista normal, ligada de verdad al
   ancho del contenedor: con mínimo 0 la deja encoger y partir en líneas. */
.lp-faq-in { display: grid; gap: clamp(22px, 4vw, 54px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) {
  .lp-faq-in { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr); align-items: start; }
  .lp-faq .lp-head { position: sticky; top: calc(var(--lp-nav-h) + 40px); margin-bottom: 0; }
}
.lp-faq-list { display: grid; gap: 9px; min-width: 0; }
.lp-q {
  border: var(--lp-card); border-radius: var(--radius-md);
  background: var(--surface-card);
  transition: border-color var(--dur-fast) var(--ease-out);
  min-width: 0;
}
.lp-q[open] { border-color: var(--border-strong); }
.lp-q summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 17px 20px; cursor: pointer; min-height: var(--hit-target);
  font: 600 var(--text-base) var(--font-body); color: var(--text-heading);
  letter-spacing: -0.015em; list-style: none;
}
.lp-q summary::-webkit-details-marker { display: none; }
/* La pregunta es texto sin envolver dentro del flex de `summary`: sin su
   propio `min-width: 0` una pregunta larga no se encoge —crece el flex y
   se corre la página entera— en vez de partirse en líneas. */
.lp-q summary span { flex: 1 1 auto; min-width: 0; }
.lp-q summary svg { flex: none; color: var(--text-muted); transition: transform var(--dur-base) var(--ease-out); }
.lp-q[open] summary svg { transform: rotate(45deg); }
.lp-q p { padding: 0 20px 19px; color: var(--text-muted); font-size: var(--text-sm); line-height: 1.6; max-width: 62ch; }
@media (prefers-reduced-motion: no-preference) {
  .lp-q[open] p { animation: lp-open 320ms var(--ease-out); }
  @keyframes lp-open { from { opacity: 0; transform: translateY(-6px); } }
}

/* ----------------------------------------------------------- Cierre */
.lp-close {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(72px, 11vw, 150px);
  background: var(--surface-band); color: var(--on-band);
  text-align: center;
}
.lp-close-bg { position: absolute; inset: -14% 0 auto; height: 128%; z-index: -1; }
.lp-close-bg img {
  width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.32;
  transform: translate3d(0, calc(var(--sec-shift, 0px) * 0.5), 0) scale(1.08);
  will-change: transform;
}
.lp-close-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--surface-band) 0%, transparent 34%, transparent 62%, var(--surface-band) 100%);
}
.lp-close-in { position: relative; display: grid; gap: 20px; justify-items: center; }
.lp-close h2 { font-size: var(--text-4xl); color: var(--on-band); letter-spacing: -0.042em; }
.lp-close-sub { max-width: 46ch; color: var(--on-band); opacity: 0.78; font-size: var(--text-lg); line-height: 1.45; }
.lp-close-acts { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; }
.lp-close-alt {
  background: transparent !important;
  border-color: color-mix(in srgb, var(--on-band) 42%, transparent);
  color: var(--on-band) !important;
}
.lp-close-alt:hover { border-color: var(--on-band); background: color-mix(in srgb, var(--on-band) 10%, transparent) !important; }
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .lp-close-alt { border-color: rgba(255, 255, 255, 0.42); }
}

/* -------------------------------------------------------------- Pie */
.lp-foot { background: var(--surface-card); border-top: 1px solid var(--border-subtle); }
.lp-foot-in {
  display: grid; gap: clamp(28px, 4vw, 48px);
  padding-block: clamp(44px, 6vw, 72px);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 760px) { .lp-foot-in { grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); } }
.lp-foot-brand { display: grid; gap: 12px; align-content: start; max-width: 40ch; }
.lp-foot-claim { font: 700 var(--text-lg) var(--font-body); color: var(--text-heading); letter-spacing: -0.03em; }
.lp-foot-note { font-size: var(--text-sm); color: var(--text-muted); }
.lp-foot-col { display: grid; gap: 10px; align-content: start; }
.lp-foot-col h3 {
  font: 700 var(--text-xs) var(--font-body);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted);
  margin-bottom: 2px;
}
.lp-foot-col a, .lp-foot-ask {
  font: 500 var(--text-sm) var(--font-body); color: var(--text-body);
  text-decoration: none; justify-self: start; text-align: left;
  background: none; border: 0; padding: 0; cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.lp-foot-col a:hover, .lp-foot-ask:hover { color: var(--accent); }
.lp-foot-ask { font-weight: 700; color: var(--accent); }
.lp-foot-legal {
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between;
  padding-block: 20px; border-top: 1px solid var(--border-subtle);
  font-size: var(--text-xs); color: var(--text-muted);
}

/* --------------------------------------------- Demos: el muro vivo */
/* El muro demo a pantalla casi completa. El `<iframe>` lo crea y lo
   destruye `landing.js`: aquí sólo está el marco donde vive. */
.lp-demo-box {
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(100%, 1180px); height: min(94dvh, 900px);
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.lp-demo-head {
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  padding: 14px clamp(14px, 2vw, 22px);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-raised);
}
.lp-demo-id { display: grid; gap: 2px; min-width: 0; margin-right: auto; }
.lp-demo-id b {
  font: 700 var(--text-base) var(--font-body); color: var(--text-heading); letter-spacing: -0.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lp-demo-id span { font-size: var(--text-xs); color: var(--text-muted); }
.lp-demo-tools { display: flex; align-items: center; gap: 10px; }
.lp-demo-seg {
  display: flex; gap: 2px; padding: 3px; border-radius: 999px;
  background: var(--surface-card); border: 1px solid var(--border-subtle);
}
.lp-demo-seg button {
  border: 0; background: none; cursor: pointer; padding: 7px 14px; border-radius: 999px;
  font: 600 var(--text-xs) var(--font-body); color: var(--text-muted);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.lp-demo-seg button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.lp-demo-out {
  display: inline-flex; align-items: center; gap: 7px;
  font: 600 var(--text-xs) var(--font-body); color: var(--text-body); text-decoration: none;
}
.lp-demo-out:hover { color: var(--accent); }
.lp-demo .lp-ask-x { position: static; width: 34px; height: 34px; }

.lp-demo-stage {
  display: grid; place-items: center; min-height: 0;
  padding: clamp(10px, 2vw, 22px);
  /* Un fondo un punto más oscuro que la página: es lo que hace que el
     muro de dentro se lea como una pantalla y no como más página. */
  background:
    radial-gradient(120% 100% at 50% 0%, var(--accent-soft) 0%, transparent 62%),
    color-mix(in srgb, var(--text-heading) 9%, var(--surface-page));
}
/* El marco: el alto manda (es lo que hay), y el ancho sale de él. */
.lp-demo-frame {
  position: relative; display: grid; place-items: center;
  width: 100%; height: 100%;
  border-radius: var(--radius-md); overflow: hidden;
  background: var(--surface-card); border: 1px solid var(--border-subtle);
}
[data-view="phone"] .lp-demo-frame {
  width: auto; aspect-ratio: 390 / 780;
  height: 100%; max-width: 100%;
  border-radius: 30px; border: 9px solid var(--neutral-950, #171412);
  box-shadow: var(--shadow-lg);
}
.lp-demo-frame iframe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}
.lp-demo-frame.is-ready iframe { opacity: 1; }
.lp-demo-frame.is-ready .mload { display: none; }

.lp-demo-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  flex-wrap: wrap;
  padding: 14px clamp(14px, 2vw, 22px);
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-raised);
}
.lp-demo-foot p { margin: 0; font-size: var(--text-xs); color: var(--text-muted); max-width: 52ch; }

@media (max-width: 760px) {
  /* En el celular el marco ya es un celular: sobra elegir cómo verlo, y
     cada píxel de alto es del muro. */
  .lp-demo-seg { display: none; }
  .lp-demo-box { width: 100%; height: 100dvh; border-radius: 0; }
  .lp-demo-out span { display: none; }
  [data-view="phone"] .lp-demo-frame { width: 100%; aspect-ratio: auto; border-width: 1px; border-radius: var(--radius-md); }
  .lp-demo-stage { padding: 8px; }
  .lp-demo-foot { padding: 10px 14px; }
  .lp-demo-foot p { display: none; }
  .lp-demo-foot .btn { flex: 1 1 auto; }
}

/* ------------------------------------------------- Pedir: el modal */
.lp-ask-box { position: relative; width: min(100%, 520px); max-height: 92dvh; overflow-y: auto; }
.lp-ask-x {
  position: absolute; top: 14px; right: 14px;
  display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 50%; border: 0; cursor: pointer;
  background: var(--surface-raised); color: var(--text-body);
}
.lp-ask-x:hover { background: var(--border-subtle); }
.lp-ask-step { display: grid; gap: var(--space-3); }
.lp-ask-step[hidden] { display: none; }
.lp-ask-what {
  justify-self: start;
  padding: 4px 12px; border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--accent);
  font: 700 var(--text-xs) var(--font-body);
}
.lp-ask-sub { color: var(--text-muted); font-size: var(--text-sm); }

.lp-ways { display: grid; gap: 10px; margin-top: 4px; }
.lp-way {
  display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 4px 14px;
  padding: 16px 18px; text-align: left; cursor: pointer;
  border: 1.5px solid var(--border-subtle); border-radius: var(--radius-md);
  background: var(--surface-card); color: inherit; text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.lp-way:hover { border-color: var(--accent); background: var(--surface-raised); }
.lp-way:active { transform: scale(0.99); }
.lp-way-ico {
  grid-row: 1 / 3; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: var(--radius-md);
  background: var(--accent-soft); color: var(--accent);
}
.lp-way-ico--wa { background: #E3F3E7; color: #1F7A3D; }
[data-theme="dark"] .lp-way-ico--wa { background: #1B2C20; color: #63C283; }
.lp-way b { font: 700 var(--text-base) var(--font-body); color: var(--text-heading); align-self: end; }
.lp-way span { font-size: var(--text-sm); color: var(--text-muted); align-self: start; }

.lp-ask-acts { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; }
.lp-ask-acts .btn { flex: 1 1 auto; }
@media (min-width: 520px) { .lp-ask-acts .btn { flex: 0 0 auto; } }
.lp-ask-legal { font-size: var(--text-xs); color: var(--text-muted); text-align: center; }

/* ------------------------------------- Cabecera de página interior */
.lp-page-head { padding-bottom: clamp(20px, 3vw, 34px); }
/* Tras una cabecera de página no hace falta el aire completo de sección:
   sumados dejaban un hueco de 166px entre el título y lo primero. */
.lp-page-head + .lp-sec { padding-block-start: clamp(24px, 3vw, 44px); }
.lp-page-head h1 { margin-bottom: 18px; }
.lp-page-head .lp-lede { max-width: 56ch; }
.lp-crumbs { display: flex; gap: 8px; margin-bottom: 20px; font-size: var(--text-sm); color: var(--text-muted); }
.lp-crumbs a { color: var(--text-muted); text-decoration: none; }
.lp-crumbs a:hover { color: var(--accent); }

.lp-terms-in { max-width: 62ch; }
.lp-terms-in h2 { margin-bottom: 18px; }
.lp-terms-in ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.lp-terms-in li {
  padding-left: 22px; position: relative;
  font-size: var(--text-sm); color: var(--text-muted); line-height: 1.6;
}
.lp-terms-in li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 7px; height: 7px; border-radius: 2px; background: var(--detail);
}
.lp-terms-in b { color: var(--text-heading); }

/* --------------------------------------------------- Quiénes somos */
.lp-about-grid { display: grid; gap: clamp(26px, 4vw, 56px); align-items: center; }
@media (min-width: 900px) { .lp-about-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); } }
.lp-about-copy { display: grid; gap: 16px; max-width: 56ch; }
.lp-about-copy p { color: var(--text-body); }
.lp-about-shot {
  margin: 0; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg); aspect-ratio: 14 / 9;
}
.lp-about-shot img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: translate3d(0, calc(var(--sec-shift, 0px) * 0.4), 0) scale(1.07);
  will-change: transform;
}

.lp-beliefs { background: var(--surface-card); border-block: 1px solid var(--border-subtle); }
.lp-beliefs-grid {
  display: grid; gap: clamp(18px, 2.6vw, 30px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.lp-belief { display: grid; gap: 8px; align-content: start; }
.lp-belief-n {
  font: 800 var(--text-sm) var(--font-body); letter-spacing: 0.08em;
  color: var(--detail); font-variant-numeric: tabular-nums;
}
.lp-belief p { color: var(--text-muted); font-size: var(--text-sm); }

/* --------------------------------------------------------- Impresión */
@media print {
  .lp-nav, .lp-progress, .lp-skip, .lp-close, .lp-hero-bg, .lp-hero-walls, .lp-trades { display: none !important; }
  .lp { --lp-glass: #fff; }
  body.lp { background: #fff; color: #000; }
}

/* -------------------------------------------- Anclas y desplazamiento */
/* Con la barra pegada arriba, un ancla dejaba el título debajo de ella. */
.lp [id] { scroll-margin-top: calc(var(--lp-nav-h) + 18px); }
@media (prefers-reduced-motion: no-preference) {
  html:has(body.lp) { scroll-behavior: smooth; }
}
/* Red de seguridad: si algo se desborda (una pregunta larga, una tabla),
   que se recorte y no vuelva scrollable la página entera de lado — en
   iOS eso basta para que el swipe vertical se sienta atorado a medio
   camino, peleándose con el navegador por decidir el eje del gesto.
   `clip`, no `hidden`, por la misma razón que en `body.lp`: `hidden`
   rompe el `position: sticky` de todo lo que cuelga de `html`. */
html:has(body.lp) { overflow-x: clip; }
/* Red de seguridad para navegadores sin <dialog>: sin la regla del
   navegador, el contenido del modal se vería suelto en la página. */
.lp-ask:not([open]), .lp-demo:not([open]) { display: none; }