/* ============================================================
   APEX — SITIO PÚBLICO MULTIPÁGINA

   Se carga la ÚLTIMA, después de landing-v2.css, y TODA regla suya
   lleva el prefijo .lp- o cuelga de .lp-page. Esa es la misma
   garantía de no regresión que max.css consigue con
   [data-tier="max"] y landing-v2.css con #landingView: dentro de
   #appShell esta hoja es inerte.

   NI UN COLOR NUEVO. Igual que landing-v2.css, todo se DERIVA de los
   tokens --lp-* (que a su vez derivan de base.css). No se copia un
   valor hexadecimal ni se declara una paleta propia: si mañana
   cambia --bg en base.css, estas veintiuna páginas cambian solas.
   Ese fue el incidente que ya costó una landing entera, y la
   sección de paleta de tests/e2e-site.mjs lo vigila comparando los
   píxeles pintados contra los tokens.

   [aria-hidden="true"] sigue PROHIBIDO de facto (base.css trae una
   regla global que le pone display:none). Los adornos de aquí son
   elementos VACÍOS y los SVG decorativos llevan role="presentation".
   ============================================================ */

.lp-page{margin:0;}

/* ============================================================
   BETA BANNER — global, primera fila del documento, por encima de la
   barra. La barra es sticky y este banner NO: se lee una vez y se va
   con el scroll, porque un aviso permanente en un sitio de veintiuna
   páginas deja de leerse a la tercera.
   ============================================================ */
.lp-beta{
  /* z-index POR DEBAJO de la barra (.lp-nav va a 40), y esto no es
     un detalle estético: con 50 el banner se pinta ENCIMA de una
     barra que es position:sticky y le come los clics.

     Se rompe en la PORTADA, no en las páginas generadas. En éstas el
     banner sale de la pantalla justo cuando la barra se pega, así que
     nunca coinciden (medido en seis posiciones de scroll, en
     escritorio y en móvil). Dentro de #landingView sí conviven, y con
     50 el botón del menú móvil dejaba de abrirse — sin error en
     consola y sin que ninguna comprobación estática lo notara.

     Lo encontró tests/e2e-landing.mjs pulsando el botón de verdad en
     un navegador de verdad, y esa prueba vuelve a fallar si alguien
     sube este número. Misma lección que la regla global de
     [aria-hidden]: esto solo se ve pinchando. */
  position:relative;z-index:30;
  background:var(--lp-accent-soft);
  border-bottom:1px solid var(--lp-accent-line);
}
.lp-beta[hidden]{display:none;}
.lp-beta-inner{
  width:min(var(--lp-max),100%);margin:0 auto;
  padding:9px var(--lp-gutter);
  display:flex;align-items:center;gap:12px;
}
/* Elemento VACÍO: no lleva aria-hidden (ver la nota de arriba) y un
   lector de pantalla no anuncia un <span> sin contenido. */
.lp-beta-dot{
  flex:0 0 auto;width:6px;height:6px;border-radius:50%;
  background:var(--lp-accent);
}
.lp-beta-text{
  flex:1 1 auto;min-width:0;
  font-size:var(--lp-small);line-height:1.45;color:var(--lp-ink-2);
}
.lp-beta-text strong{
  color:var(--lp-accent-ink);font-weight:700;
  font-size:var(--lp-micro);font-family:var(--font-mono);
  letter-spacing:.14em;text-transform:uppercase;
  margin-right:10px;
}
.lp-beta-cta{
  flex:0 0 auto;font-size:var(--lp-small);font-weight:600;
  color:var(--lp-accent-ink);border-bottom:1px solid var(--lp-accent-line);
  padding-bottom:1px;transition:border-color .2s var(--lp-ease);
}
.lp-beta-cta:hover{border-bottom-color:var(--lp-accent);}
.lp-beta-close{
  flex:0 0 auto;display:grid;place-items:center;
  width:24px;height:24px;border:0;border-radius:50%;
  background:transparent;color:var(--lp-ink-3);cursor:pointer;
  transition:color .2s var(--lp-ease),background .2s var(--lp-ease);
}
.lp-beta-close:hover{color:var(--lp-ink);background:var(--lp-surface);}
@media (max-width:720px){
  .lp-beta-inner{gap:9px;}
  /* El texto largo se retira antes que la llamada a la acción: en un
     móvil, "Private Beta" + el enlace ya cuentan lo necesario. */
  .lp-beta-text span{display:none;}
  .lp-beta-text strong{margin-right:0;}
}

/* ============================================================
   BARRA — es la .lp-nav de la landing (landing-v2.css la define
   entera). Aquí solo se añade lo que el multipágina necesita y la
   landing no tenía: desplegables.
   ============================================================ */
.lp-nav-item{position:relative;}
.lp-nav-trigger,.lp-nav-flat{
  /* position:relative aquí y no solo en .lp-nav-item: el punto de
     "sección visible" se ancla con bottom:-2px, y colgando del item
     (que es más alto que el botón) quedaba flotando suelto varios
     píxeles por debajo del texto, como una errata. */
  position:relative;
  display:inline-flex;align-items:center;gap:5px;
  font-size:var(--lp-small);font-weight:500;color:var(--lp-ink-2);
  padding-block:6px;border:0;background:transparent;cursor:pointer;
  white-space:nowrap;transition:color .2s var(--lp-ease);
}
.lp-nav-trigger:hover,.lp-nav-flat:hover{color:var(--lp-ink);}
.lp-nav-item.is-current > .lp-nav-trigger,.lp-nav-flat.is-current{color:var(--lp-ink);}
/* La sección visible se marca con un punto, no con un subrayado —
   misma decisión que la landing: un subrayado compite con los
   enlaces del propio contenido. */
.lp-nav-item.is-current > .lp-nav-trigger::after,.lp-nav-flat.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-flat{position:relative;}
.lp-nav-chev{transition:transform .2s var(--lp-ease);opacity:.6;}
.lp-nav-trigger[aria-expanded="true"] .lp-nav-chev{transform:rotate(180deg);}

.lp-menu{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);
  width:min(420px,calc(100vw - 32px));
  background:var(--lp-surface);
  border:1px solid var(--lp-line);border-radius:var(--lp-r-lg);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.45);
  padding:10px;
}
/* `hidden` solo aporta el display:none del navegador, y cualquier
   display propio lo anularía en silencio — la trampa que ya dejó un
   "Cargando reseñas…" pegado sobre el estado vacío de la landing. */
.lp-menu[hidden]{display:none;}
.lp-menu-list{display:flex;flex-direction:column;gap:2px;}
.lp-menu-list a{
  display:block;padding:11px 13px;border-radius:var(--lp-r);
  transition:background .18s var(--lp-ease);
}
.lp-menu-list a:hover{background:var(--lp-surface-2);}
.lp-menu-list a[aria-current="page"]{background:var(--lp-accent-soft);}
.lp-menu-t{display:block;font-size:14px;font-weight:600;color:var(--lp-ink);letter-spacing:-.011em;}
.lp-menu-d{display:block;margin-top:3px;font-size:12.5px;line-height:1.45;color:var(--lp-ink-3);}

/* ============================================================
   DRAWER MÓVIL — mismo patrón que el de la landing (clip-path desde
   el origen del toque no hace falta aquí: son páginas, no vistas).
   ============================================================ */
.lp-drawer-backdrop{
  position:fixed;inset:0;z-index:60;
  background:color-mix(in srgb,var(--lp-ink) 38%,transparent);
  opacity:0;pointer-events:none;transition:opacity .25s var(--lp-ease);
}
.lp-drawer-backdrop.is-open{opacity:1;pointer-events:auto;}
.lp-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:61;
  width:min(360px,88vw);
  background:var(--lp-canvas);border-left:1px solid var(--lp-line);
  display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .3s var(--lp-ease);
}
.lp-drawer[hidden]{display:none;}
.lp-drawer.is-open{transform:translateX(0);}
.lp-drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px;border-bottom:1px solid var(--lp-line);
}
.lp-drawer-close{
  display:grid;place-items:center;width:34px;height:34px;
  border:1px solid var(--lp-line);border-radius:50%;
  background:transparent;color:var(--lp-ink-2);cursor:pointer;
}
.lp-drawer-body{flex:1 1 auto;overflow-y:auto;padding:22px 20px 28px;}
.lp-drawer-label{
  display:block;margin:22px 0 10px;
  font:600 var(--lp-micro)/1 var(--font-mono);
  letter-spacing:.16em;text-transform:uppercase;color:var(--lp-ink-3);
}
.lp-drawer-body > .lp-drawer-label:first-child{margin-top:0;}
.lp-drawer-list{display:flex;flex-direction:column;}
.lp-drawer-list a{
  display:block;padding:10px 0;font-size:15px;font-weight:500;color:var(--lp-ink-2);
  border-bottom:1px solid var(--lp-line);
}
.lp-drawer-list a[aria-current="page"]{color:var(--lp-accent-ink);}
.lp-drawer-foot{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  padding:16px 20px;border-top:1px solid var(--lp-line);
}
.lp-drawer-foot .lp-btn{width:100%;}

/* ============================================================
   CABECERA DE PÁGINA — el equivalente sobrio del hero de la
   portada. Deliberadamente SIN el resplandor del hero ni la máquina
   de escribir: una página de producto se lee, no se presencia.
   ============================================================ */
.lp-pagehero{padding-block:clamp(38px,5vw,68px) clamp(34px,4.5vw,56px);}
.lp-pagehero-title{
  margin-top:14px;
  font-size:clamp(34px,5.6vw,68px);font-weight:700;line-height:1.03;
  letter-spacing:-.038em;color:var(--lp-ink);text-wrap:balance;max-width:17ch;
}
.lp-pagehero .lp-lede{margin-top:24px;}
.lp-pagehero .lp-eyebrow{margin-bottom:0;}

/* MIGAS DE PAN — el mismo rastro que declara el JSON-LD. */
.lp-crumbs{margin-bottom:26px;}
.lp-crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.lp-crumbs li{
  display:flex;align-items:center;gap:8px;
  font:500 12px/1.4 var(--font-mono);letter-spacing:.03em;color:var(--lp-ink-3);
}
.lp-crumbs li + li::before{content:"/";color:var(--lp-ink-4);}
.lp-crumbs a{color:var(--lp-ink-3);transition:color .2s var(--lp-ease);}
.lp-crumbs a:hover{color:var(--lp-ink);}
.lp-crumbs [aria-current="page"]{color:var(--lp-ink-2);}

/* La primera sección tras la cabecera no lleva filete: la cabecera ya
   separa. El filete es el único separador del sistema y duplicarlo
   ahí se lee como una línea suelta. */
.lp-pagehero + .lp-section{border-top:1px solid var(--lp-line);padding-top:clamp(56px,7vw,104px);}

/* ============================================================
   COMPONENTES DE CONTENIDO
   Seis, y ninguno más. Cada página responde las mismas seis
   preguntas (qué es · por qué importa · cómo funciona · cuándo usarlo
   · con qué conecta · empezar), así que el sistema necesita seis
   formas, no veintiuna.
   ============================================================ */

/* 1 · REJILLA DE TARJETAS */
.lp-cards{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.lp-cards.is-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));}
.lp-card{
  padding:clamp(22px,2.4vw,30px);
  border:1px solid var(--lp-line);border-radius:var(--lp-r-lg);
  background:var(--lp-surface);
  display:flex;flex-direction:column;gap:12px;
}
.lp-card-k{
  font:600 var(--lp-micro)/1 var(--font-mono);
  letter-spacing:.15em;text-transform:uppercase;color:var(--lp-ink-4);
}
.lp-card-t{font-size:var(--lp-h3);font-weight:650;letter-spacing:-.022em;color:var(--lp-ink);}
.lp-card p{font-size:var(--lp-small);line-height:1.75;color:var(--lp-ink-2);}
.lp-card strong{color:var(--lp-ink);font-weight:600;}

/* 2 · FICHA TÉCNICA — qué necesita, qué devuelve, cuánto tarda.
   Es una <dl> de verdad: el par término/definición ES la semántica
   de este bloque, y un lector de pantalla lo anuncia como tal. */
.lp-spec{
  border-top:1px solid var(--lp-line);
}
.lp-spec > div{
  display:grid;grid-template-columns:minmax(140px,220px) 1fr;gap:clamp(16px,3vw,48px);
  padding:20px 0;border-bottom:1px solid var(--lp-line);
}
.lp-spec dt{
  font:600 var(--lp-micro)/1.5 var(--font-mono);
  letter-spacing:.14em;text-transform:uppercase;color:var(--lp-ink-3);
}
.lp-spec dd{margin:0;font-size:var(--lp-body);line-height:1.7;color:var(--lp-ink-2);}
.lp-spec dd strong{color:var(--lp-ink);font-weight:600;}
.lp-spec dd code{
  font:500 13px/1 var(--font-mono);color:var(--lp-ink);
  background:var(--lp-surface-2);border-radius:var(--r-2xs);padding:2px 6px;
}
@media (max-width:640px){
  .lp-spec > div{grid-template-columns:1fr;gap:8px;}
}

/* 3 · PASOS NUMERADOS */
.lp-steps{display:flex;flex-direction:column;}
.lp-step{
  display:grid;grid-template-columns:44px 1fr;gap:clamp(16px,2.4vw,34px);
  padding:26px 0;border-top:1px solid var(--lp-line);
}
.lp-step:last-child{border-bottom:1px solid var(--lp-line);}
.lp-step-n{
  font:600 13px/1 var(--font-mono);color:var(--lp-accent-ink);padding-top:5px;
}
/* El texto va SIEMPRE envuelto: un nodo de texto suelto dentro de un
   grid es un elemento más de la rejilla, y acaba en la columna de
   44px partido a una palabra por línea. Pasó de verdad. */
.lp-step-b{display:flex;flex-direction:column;gap:9px;}
.lp-step-t{font-size:var(--lp-h3);font-weight:650;letter-spacing:-.022em;color:var(--lp-ink);}
.lp-step-b p{font-size:var(--lp-small);line-height:1.75;color:var(--lp-ink-2);max-width:68ch;}

/* 4 · CUÁNDO SÍ / CUÁNDO NO */
.lp-when{display:grid;gap:clamp(20px,3vw,44px);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.lp-when ul{display:flex;flex-direction:column;gap:13px;}
.lp-when li{
  display:grid;grid-template-columns:18px 1fr;gap:12px;align-items:start;
  font-size:var(--lp-small);line-height:1.7;color:var(--lp-ink-2);
}
.lp-when svg{margin-top:4px;}
.lp-when .is-yes svg{color:var(--lp-ok);}
.lp-when .is-no svg{color:var(--lp-ink-4);}

/* 5 · EL SISTEMA — el diagrama de cómo se conectan las herramientas.
   Es HTML, no una imagen: se lee en los dos temas, escala sin
   pixelarse y un lector de pantalla recorre sus nodos en orden. */
.lp-flow{display:flex;flex-direction:column;align-items:center;gap:0;}
.lp-flow-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;}
.lp-flow-node{
  padding:13px 20px;border:1px solid var(--lp-line-2);border-radius:999px;
  background:var(--lp-surface);
  font:600 12.5px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--lp-ink-2);white-space:nowrap;
  transition:border-color .2s var(--lp-ease),color .2s var(--lp-ease);
}
a.lp-flow-node:hover{border-color:var(--lp-accent);color:var(--lp-accent-ink);}
.lp-flow-node.is-key{border-color:var(--lp-accent-line);color:var(--lp-accent-ink);background:var(--lp-accent-soft);}
/* Conector: elemento VACÍO, sin aria-hidden. */
.lp-flow-link{width:1px;height:26px;background:var(--lp-line-2);}
.lp-flow-foot{
  margin-top:30px;text-align:center;
  font-size:var(--lp-small);line-height:1.7;color:var(--lp-ink-3);max-width:60ch;
}

/* 6 · NOTA DE HUECO DECLARADO — "esto APEX no lo tiene".
   Existe como componente porque es una regla del producto, no una
   excepción: lo que no hay se DICE, nunca se rellena con una
   estimación. */
.lp-gap{
  margin-top:clamp(30px,4vw,52px);
  padding:22px 24px;border:1px dashed var(--lp-line-2);border-radius:var(--lp-r);
  background:transparent;
}
.lp-gap-k{
  font:600 var(--lp-micro)/1 var(--font-mono);
  letter-spacing:.15em;text-transform:uppercase;color:var(--lp-ink-4);
}
.lp-gap p{margin-top:11px;font-size:var(--lp-small);line-height:1.75;color:var(--lp-ink-2);}

/* CITA / FRASE DE CIERRE de una sección */
.lp-quote{
  margin-top:clamp(30px,4vw,52px);padding-left:22px;
  border-left:2px solid var(--lp-accent-line);
}
.lp-quote p{
  font-family:var(--font-display);font-style:italic;
  font-size:clamp(17px,1.7vw,21px);line-height:1.5;letter-spacing:-.018em;color:var(--lp-ink);
}

/* PROSA suelta dentro de una sección */
.lp-prose{max-width:68ch;display:flex;flex-direction:column;gap:18px;}
.lp-prose p{font-size:var(--lp-body);line-height:1.8;color:var(--lp-ink-2);}
.lp-prose strong{color:var(--lp-ink);font-weight:600;}
.lp-prose code{
  font:500 13.5px/1 var(--font-mono);color:var(--lp-ink);
  background:var(--lp-surface-2);border-radius:var(--r-2xs);padding:2px 6px;
}

/* ============================================================
   PLANES — la tabla de /pricing. Las cifras son las de lib/plans.js
   y el propio contenido lo dice; si un límite cambia allí, cambia
   aquí (y hay una prueba que compara las dos).
   ============================================================ */
.lp-plans-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));}
.lp-plan{
  padding:clamp(24px,2.6vw,34px);
  border:1px solid var(--lp-line);border-radius:var(--lp-r-lg);
  background:var(--lp-surface);display:flex;flex-direction:column;gap:16px;
}
.lp-plan.is-featured{border-color:var(--lp-accent-line);}
.lp-plan-n{font-size:var(--lp-h3);font-weight:700;letter-spacing:-.025em;color:var(--lp-ink);}
.lp-plan-d{font-size:var(--lp-small);line-height:1.7;color:var(--lp-ink-2);}
.lp-plan ul{display:flex;flex-direction:column;gap:11px;margin-top:4px;}
.lp-plan li{
  display:grid;grid-template-columns:16px 1fr;gap:11px;align-items:start;
  font-size:var(--lp-small);line-height:1.65;color:var(--lp-ink-2);
}
.lp-plan li svg{margin-top:3px;color:var(--lp-accent-ink);}
.lp-plan .lp-btn{margin-top:auto;width:100%;}

/* ============================================================
   SIGUE POR AQUÍ — el internal linking del pie de cada página.
   ============================================================ */
.lp-next-sec{padding-block:clamp(56px,7vw,96px);}
.lp-next{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));}
.lp-next-card{
  display:flex;flex-direction:column;gap:9px;
  padding:24px;border:1px solid var(--lp-line);border-radius:var(--lp-r-lg);
  background:var(--lp-surface);
  transition:border-color .2s var(--lp-ease),transform .2s var(--lp-ease);
}
.lp-next-card:hover{border-color:var(--lp-line-2);transform:translateY(-2px);}
.lp-next-k{font:600 var(--lp-micro)/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--lp-accent-ink);}
.lp-next-t{font-size:16.5px;font-weight:650;letter-spacing:-.02em;color:var(--lp-ink);}
.lp-next-d{font-size:13px;line-height:1.6;color:var(--lp-ink-3);}

/* CIERRE con llamada a la acción */
.lp-cta{text-align:center;}
.lp-cta-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:32px;}
.lp-cta-note{margin-top:20px;font-size:12.5px;color:var(--lp-ink-3);}

/* ============================================================
   RESPONSIVE — tres composiciones deliberadas, no una encogida.
   ============================================================ */
@media (max-width:900px){
  /* La barra cambia por el drawer, igual que la landing. */
  .lp-nav-links-wrap{display:none;}
  .lp-burger{display:inline-flex;}
}
@media (min-width:901px){
  .lp-burger{display:none;}
  .lp-drawer,.lp-drawer-backdrop{display:none !important;}
}
@media (max-width:640px){
  .lp-pagehero-title{max-width:none;}
  .lp-cta-actions .lp-btn{width:100%;}
  .lp-drawer-foot{grid-template-columns:1fr;}
}

/* Con prefers-reduced-motion, los estados que dependían de una
   transición pasan a ser estados finales: nada se queda invisible por
   no animarse. El drawer sigue abriendo y cerrando, sin deslizar. */
@media (prefers-reduced-motion: reduce){
  .lp-drawer{transition:none;}
  .lp-next-card:hover{transform:none;}
}