/* ============================================================================
   Landing search-first + omnibox federado (§15.13).
   Consume los tokens/primitivos de seia-suite.css (body.seia-suite). Solo agrega
   el chrome propio del landing: hero, omnibox, cards de dominio.
   ============================================================================ */

/* La caja del topbar en móvil se resuelve entera en `omnibox.css` (§5.6): la
   portada y `/buscar` la esconden, las suites la colapsan a un botón. Vivía acá
   cuando solo la portada tenía respuesta, y `landing.css` no lo cargan las
   suites — la regla no podía alcanzarlas. */

.lp {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px 64px;
}

/* ---- Hero ---- */
.lp-hero {
  padding: 72px 0 8px;
  text-align: center;
}
.lp-title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 40px;
  line-height: 46px;
  letter-spacing: -0.025em;
  color: var(--ink-1);
  margin-bottom: 12px;
}
.lp-title em { font-style: italic; color: var(--teal-700); font-weight: 400; }
.lp-lead {
  font-size: 15px;
  line-height: 22px;
  color: var(--ink-3);
  max-width: 560px;
  margin: 0 auto 28px;
}

/* El omnibox (`.omni*`, `.sg-*`) se mudo a omnibox.css: lo montan tambien
   las suites y /buscar, que no cargan este archivo. */

/* ---- Cards de dominio + drill-down ---- */
.lp-domains { max-width: 900px; margin: 56px auto 0; }
.lp-domains-head {
  display: flex; align-items: center; gap: 12px; justify-content: center; margin-bottom: 18px;
}
.lp-domains-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-4); font-weight: 600;
}
.lp-domains-head::before, .lp-domains-head::after { content: ""; flex: 0 0 40px; height: 1px; background: var(--hairline); }

.lp-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.lp-card {
  display: flex; flex-direction: column; gap: 5px; text-align: left;
  padding: 18px; background: var(--surface);
  border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  transition: border-color var(--duration, 180ms), box-shadow var(--duration, 180ms), transform var(--duration, 180ms);
}
.lp-card:hover { border-color: var(--teal-600); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.lp-card[aria-expanded="true"] { border-color: var(--teal-600); box-shadow: var(--shadow-md); }
.lp-card:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.lp-card-eyebrow { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-4); }
.lp-card-name { font-size: 15px; font-weight: 600; color: var(--ink-1); letter-spacing: -0.01em; }
.lp-card-desc { font-size: 12px; color: var(--ink-3); line-height: 17px; flex: 1; }
.lp-card-count { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); font-feature-settings: "tnum" 1; margin-top: 2px; }

.lp-sub {
  margin-top: 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.lp-sub[hidden] { display: none; }  /* el atributo hidden lo pisa display:grid */
.lp-subcard {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 14px; font-size: 13px; color: var(--ink-2);
  background: var(--surface-muted); border: 1px solid var(--hairline);
  border-radius: var(--radius-md); transition: all var(--duration-fast, 120ms);
}
.lp-subcard:hover { border-color: var(--teal-600); color: var(--teal-700); background: var(--teal-50); }
.lp-subcard .c { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); }
.lp-subcard:hover .c { color: var(--teal-700); }

/* ============================================================================
   Página de resultados federados (/buscar). Reusa omnibox + tabla .ntable.
   ============================================================================ */
.lp--results { max-width: 1080px; padding-top: 24px; }

/* Omnibox compacto (arriba, alineado a la izquierda, sin hero) */

.res-summary { font-size: 13px; color: var(--ink-3); margin: 4px 0 24px; }
.res-summary strong { color: var(--ink-1); font-weight: 600; }

/* ---- Sección por categoría ---- */
/* scroll-margin-top: el jump-list del sidebar salta a #sec-*, sin esto el
   topbar sticky (48px) tapa el res-head — mismo fix que .entity-section
   en seia-suite.css para el mismo patrón. */
.res-sec { margin-bottom: 32px; scroll-margin-top: 64px; }
.res-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
/* Categoría + fuente juntas a la izquierda; "Ver todos" queda a la derecha. */
.res-head-main { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.res-title { font-size: 16px; font-weight: 600; color: var(--ink-1); letter-spacing: -0.01em; }
/* Fuente (SEIA / SNIFA / Centro Documental) como badge junto a la categoría. */
.res-src {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--ink-4); background: var(--surface-muted); border: 1px solid var(--hairline);
  border-radius: var(--radius-full); padding: 2px 8px; white-space: nowrap;
}
.res-src--seia { color: var(--teal-800); background: rgba(20, 184, 166, 0.08); border-color: rgba(20, 184, 166, 0.22); }
.res-count {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-4);
  background: var(--surface-muted); border: 1px solid var(--hairline);
  border-radius: var(--radius-full); padding: 1px 8px; font-feature-settings: "tnum" 1;
}
.res-all {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 500; color: var(--teal-700); white-space: nowrap;
}
.res-all:hover { color: var(--teal-800); }
.res-all svg { transition: transform var(--duration-fast, 120ms); }
.res-all:hover svg { transform: translateX(2px); }

/* Chips de ámbito (Todo / SEIA / SNIFA / Centro Documental) sobre los resultados.
   Reemplazan al grupo "Ámbito" que antes vivía en el sidebar. */
.scope-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 20px; }
/* En pantalla angosta la franja scrollea SOLA en vez de empujar la página.
   "Centro Documental 168" mide 154px y no se puede partir (`white-space:nowrap`,
   y con razón: un chip cortado en dos líneas deja de leerse como un control);
   con `wrap` el chip desbordaba su línea y el desborde subía hasta el documento
   — medido a 360px: 31px de scroll horizontal en /buscar. Un componente que
   scrollea adentro cumple 1.4.10; la página empujada, no. */
@media (max-width: 640px) {
  .scope-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    /* Los chips no declaran anillo propio: usan el `outline` del navegador, que
       se dibuja FUERA del borde y lo recortaría el contenedor de scroll. El
       margen negativo devuelve la franja a su posición original. */
    padding: 3px;
    margin: -1px -3px 17px;
  }
}
.scope-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  font-size: 13px; font-weight: 500; color: var(--ink-2); white-space: nowrap;
  background: var(--surface-muted); border: 1px solid var(--hairline);
  border-radius: var(--radius-full); transition: border-color 120ms, color 120ms, background 120ms;
}
.scope-chip:hover { color: var(--ink-1); border-color: var(--ink-4); }
.scope-chip.on { background: var(--teal-700); border-color: var(--teal-700); color: #fff; }
.scope-chip .c { font-family: var(--font-mono); font-size: 11px; opacity: 0.65; font-feature-settings: "tnum" 1; }
.scope-chip.on .c { opacity: 0.85; }

.res-more {
  display: inline-block; margin-top: 8px; font-size: 12.5px; font-weight: 500;
  color: var(--teal-700); padding: 4px 2px;
}
.res-more:hover { color: var(--teal-800); text-decoration: underline; }

/* ---- Sin resultados ---- */
.res-none { text-align: center; padding: 72px 24px; color: var(--ink-4); }
.res-none svg { color: var(--ink-5); margin-bottom: 12px; }
.res-none-t { font-size: 16px; color: var(--ink-2); margin-bottom: 6px; }
.res-none-t strong { color: var(--ink-1); }
.res-none-s { font-size: 13px; color: var(--ink-4); max-width: 440px; margin: 0 auto; }

@media (max-width: 640px) {
  .res-all { margin-left: 0; }
  .res-head { flex-wrap: wrap; }
}

/* ============================================================================
   Landing explicativa (§landing_explica) — Qué es / Qué hace / Colecciones.
   Extiende el sistema del landing; consume los mismos tokens de seia-suite.css.
   ============================================================================ */

/* ---- Qué es ambi: statement + riel de cifras ---- */
.lp-about { max-width: 820px; margin: 80px auto 0; text-align: center; }
.lp-sec-eyebrow {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--teal-700); margin-bottom: 16px;
}
.lp-about-statement {
  font-family: var(--font-serif); font-weight: 300; font-size: 26px; line-height: 38px;
  letter-spacing: -0.015em; color: var(--ink-2); max-width: 720px; margin: 0 auto;
}
.lp-about-statement strong { font-weight: 500; color: var(--ink-1); }
.lp-about-statement em { font-style: italic; color: var(--teal-700); font-weight: 400; }

.lp-stats {
  max-width: 900px; margin: 44px auto 0;
  display: grid; grid-template-columns: repeat(var(--lp-stat-cols, 5), 1fr);
  border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  background: var(--surface); overflow: hidden;
}
.lp-stat {
  display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: center;
  padding: 22px 12px; border-right: 1px solid var(--hairline);
  transition: background var(--duration-fast, 120ms);
}
.lp-stat:last-child { border-right: none; }
.lp-stat:hover { background: var(--surface-muted); }
.lp-stat-num {
  font-family: var(--font-mono); font-weight: 500; font-size: 24px; line-height: 1;
  color: var(--ink-1); font-feature-settings: "tnum" 1; letter-spacing: -0.02em;
}
.lp-stat-num .u { font-size: 14px; color: var(--ink-4); margin-left: 1px; }
.lp-stat-label { font-size: 11px; color: var(--ink-4); text-align: center; line-height: 14px; }
.lp-stat:hover .lp-stat-num { color: var(--teal-700); }
.lp-stat:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* ---- Qué hace ambi: pipeline Reúne → Conecta → Abre ---- */
.lp-does { max-width: 900px; margin: 72px auto 0; }
.lp-does-head { text-align: center; margin-bottom: 32px; }
.lp-does-title {
  font-family: var(--font-serif); font-weight: 300; font-size: 28px; line-height: 34px;
  letter-spacing: -0.02em; color: var(--ink-1);
}
.lp-does-title em { font-style: italic; color: var(--teal-700); font-weight: 400; }
.lp-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.lp-step { padding: 0 26px; position: relative; }
.lp-step + .lp-step::before {
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: var(--hairline);
}
.lp-step-tag { display: inline-flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.lp-step-num { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--teal-600); }
.lp-step-kind { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-5); font-weight: 600; }
.lp-step-name { font-family: var(--font-serif); font-size: 20px; font-weight: 500; color: var(--ink-1); margin-bottom: 8px; }
.lp-step-desc { font-size: 13px; line-height: 20px; color: var(--ink-3); }
.lp-step-desc strong { color: var(--ink-2); font-weight: 500; }

@media (max-width: 820px) {
  .lp-stats { grid-template-columns: repeat(2, 1fr); }
  .lp-stat { border-bottom: 1px solid var(--hairline); }
  /* Columna derecha (par) sin divisor contra el borde del contenedor, sea cual
     sea la cantidad de stats (4 con snifa off, 5 con snifa on). */
  .lp-stat:nth-child(even) { border-right: none; }
  /* Última fila sin border-bottom: el último ítem y, si la fila está completa,
     también el par de la izquierda (nth-last-child(2) en posición impar). */
  .lp-stat:last-child,
  .lp-stat:nth-last-child(2):nth-child(odd) { border-bottom: none; }
  .lp-flow { grid-template-columns: 1fr; gap: 0; }
  .lp-step { padding: 0; }
  .lp-step + .lp-step::before { display: none; }
  .lp-step + .lp-step { border-top: 1px solid var(--hairline); padding-top: 24px; margin-top: 24px; }
}
@media (max-width: 640px) {
  .lp-about-statement { font-size: 22px; line-height: 32px; }
  .lp-stats { grid-template-columns: 1fr; }
  .lp-stat { border-right: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-stat { transition: none; }
}

/* ---- Footer ---- */
.lp-footer {
  max-width: 960px; margin: 64px auto 0; padding: 20px 24px;
  border-top: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 12px; color: var(--ink-4);
}
.lp-foot-links { display: flex; gap: 4px; flex-wrap: wrap; }
.lp-foot-links a { padding: 4px 10px; color: var(--ink-3); border-radius: var(--radius-sm); }
.lp-foot-links a:hover { color: var(--ink-1); background: var(--surface-muted); }
.lp-foot-meta { font-family: var(--font-mono); font-size: 11px; }

/* ---- Responsive ---- */
@media (max-width: 980px) {
  .lp-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .lp-cards { grid-template-columns: 1fr; }
  .lp-sub { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .lp-hero { padding: 44px 0 8px; }
  .lp-title { font-size: 30px; line-height: 36px; }
  .lp-sub { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-card, .lp-subcard { transition: none; }
}

/* ============================================================================
   Tour de producto al scroll (flag landing_tour) — DS §15.16.
   Bloque nuevo: no reescribe nada de lo de arriba. Las clases .pn-* son
   MAQUETAS DECORATIVAS a escala de los primitivos reales (§15.1 shell, §15.4
   tabla, §15.3 timeline, §15.14 facet-card): no reusarlas en una superficie de
   trabajo. El markup que las consume vive en templates/landing/index.html y
   solo se sirve con el flag encendido.
   ============================================================================ */
/* Kicker de posicionamiento: la definición de ambi en una línea, arriba del
   fold, en vez de un statement de 5 líneas a mitad de scroll. */
.lp-kicker {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--teal-700); margin-bottom: 14px;
}
/* Riel de cifras en el cierre del tour: mismo ancho que los paneles (1200) en vez
   de los 900 que usaba bajo el statement de lp-about. */
.lp-stats--closing { margin: 72px auto 0; max-width: 1200px; }

/* ============================================================================
   §15.16 — Tour de producto al scroll
   Banda full-bleed que vive FUERA del contenedor .lp (960px), porque los paneles
   necesitan ~1200px. Todo consume tokens de seia-suite.css; cero valores sueltos.
   ============================================================================ */

.lp-tour {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.lp-tour-head {
  display: flex; align-items: center; gap: var(--space-4);
  padding: 88px 0 0;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-4);
}
.lp-tour-head::after { content: ""; flex: 1; height: 1px; background: var(--hairline); }

/* ---- Sección de función ---- */
.lp-feat {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 64px;
  align-items: center;
  padding: 80px 0;
  scroll-margin-top: 64px;
}
.lp-feat + .lp-feat { border-top: 1px solid var(--hairline); }
/* Invertida: hay que dar vuelta TAMBIÉN las columnas, no solo el order —
   si no, el panel cae en la pista angosta. */
.lp-feat--flip { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.lp-feat--flip .lp-feat-copy { order: 2; }
.lp-feat--flip .lp-feat-visual { order: 1; }

.lp-feat-copy { max-width: 460px; }
.lp-feat-eyebrow {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--teal-700);
}
.lp-feat-title {
  font-family: var(--font-serif); font-weight: 300; font-size: 34px; line-height: 42px;
  letter-spacing: -0.02em; color: var(--ink-1); margin: var(--space-3) 0 var(--space-4);
}
.lp-feat-lead { font-size: 16px; line-height: 26px; color: var(--ink-3); margin-bottom: var(--space-5); }
.lp-feat-links { display: flex; flex-wrap: wrap; gap: var(--space-5); }
/* Doble selector obligatorio: seia-suite.css scopea su reset bajo `.seia-suite a`
   (0,1,1), que le gana a un selector de una sola clase. Sin el `.seia-suite` de
   adelante el link sale en --ink-1 heredado en vez de teal. Misma razón en
   `.btn-on-chrome` (compite contra `.seia-suite .btn`). */
.seia-suite .lp-feat-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500; color: var(--teal-700);
}
.lp-feat-link svg { transition: transform var(--duration-fast) var(--ease-standard); }
.lp-feat-link:hover svg { transform: translateX(3px); }

/* ---- Panel de producto ---- */
.lp-feat-visual { position: relative; }
/* Sangra solo en vertical: con sangría horizontal (-6%) el resplandor asoma fuera
   del contenedor y le agrega scroll lateral a la página en viewports angostos
   (8px medidos a 390px). El `filter: blur(30px)` igual difunde el borde hacia los
   lados — el blur pinta fuera de la caja sin sumar overflow de layout. */
.lp-glow {
  position: absolute; inset: -8% 0; pointer-events: none; border-radius: 16px;
  background:
    radial-gradient(50% 60% at 20% 25%, rgba(45, 212, 191, 0.20), transparent 70%),
    radial-gradient(46% 56% at 82% 70%, rgba(154, 98, 64, 0.13), transparent 72%);
  filter: blur(30px);
}
.lp-panel {
  position: relative; background: var(--surface);
  border: 1px solid var(--hairline); border-radius: 12px;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12), 0 8px 16px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}

/* topbar del panel — eco del §15.1 real, a escala */
.pn-top { height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-bottom: 1px solid var(--hairline); }
.pn-burger { display: flex; flex-direction: column; gap: 3px; }
.pn-burger i { display: block; width: 13px; height: 1.5px; background: var(--ink-4); border-radius: 1px; }
.pn-brand { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); }
.pn-brand svg { width: 14px; height: 14px; }
.pn-search { flex: 1; max-width: 220px; height: 24px; border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--surface-muted); display: flex; align-items: center; gap: 6px; padding: 0 8px; font-size: 10px; color: var(--ink-4); }
.pn-avatar { width: 20px; height: 20px; border-radius: var(--radius-full); background: var(--teal-100); color: var(--teal-800); font-size: 9px; font-weight: 600; display: flex; align-items: center; justify-content: center; margin-left: auto; }

.pn-body { display: flex; min-height: 250px; }
.pn-side--wide { width: 205px; }
.pn-side--wide a { font-size: 11.5px; line-height: 16px; padding: 6px 9px; color: var(--ink-2); }
.pn-side--wide .pn-side-label { font-size: 9.5px; }
/* En el sidebar protagonista los nombres NO se truncan: son el contenido */
.pn-side.pn-side--wide a > :first-child { white-space: normal; overflow: visible; }
.pn-side { width: 138px; flex-shrink: 0; border-right: 1px solid var(--hairline); padding: 12px 8px; display: flex; flex-direction: column; gap: 2px; }
.pn-side-ctx { padding: 2px 8px 10px; border-bottom: 1px solid var(--hairline); margin-bottom: 8px; }
.pn-side-ctx-l { font-size: 8.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--teal-700); }
.pn-side-ctx-n { font-size: 10px; line-height: 14px; color: var(--ink-3); margin-top: 2px; }
.pn-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.pn-chip-qf { display: inline-flex; align-items: center; gap: 4px; height: 19px; padding: 0 8px;
  border: 1px solid var(--hairline-strong); border-radius: var(--radius-full); font-size: 9px; color: var(--ink-3); }
.pn-chip-qf.on { background: var(--teal-50); border-color: var(--teal-200); color: var(--teal-700); }
.pn-chip-qf .n { font-family: var(--font-mono); font-size: 8px; color: var(--ink-5); }
.pn-chip-qf.on .n { color: var(--teal-700); }
.pn-side-label { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-4); padding: 4px 8px 6px; }
.pn-side a { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 5px 8px; font-size: 11px; line-height: 15px; color: var(--ink-3); border-radius: var(--radius-sm); }
.pn-side a > :first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-side a .n { font-family: var(--font-mono); font-size: 9px; color: var(--ink-5); font-feature-settings: "tnum" 1; flex-shrink: 0; white-space: nowrap; }
.pn-side a.on { background: var(--teal-50); color: var(--teal-700); font-weight: 500; }
.pn-side a.on .n { color: var(--teal-700); }
.pn-main { flex: 1; min-width: 0; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; }

.pn-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.pn-eyebrow { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--teal-700); }
.pn-title { font-family: var(--font-serif); font-size: 17px; line-height: 22px; font-weight: 400; letter-spacing: -0.01em; color: var(--ink-1); }
.pn-pill { font-family: var(--font-mono); font-size: 9px; color: var(--ink-4); border: 1px solid var(--hairline); border-radius: var(--radius-full); padding: 2px 8px; font-feature-settings: "tnum" 1; white-space: nowrap; }

.pn-toolbar { display: flex; align-items: center; gap: 6px; }
.pn-searchbox { flex: 1; min-width: 0; height: 24px; border: 1px solid var(--hairline-strong); border-radius: var(--radius-md); display: flex; align-items: center; gap: 6px; padding: 0 8px; font-size: 10px; color: var(--ink-4); }
.pn-addcols { height: 24px; border: 1px dashed var(--hairline-strong); border-radius: var(--radius-md); padding: 0 8px; font-size: 10px; color: var(--ink-4); display: flex; align-items: center; white-space: nowrap; }

/* tabla §15.4 a escala de panel */
.pn-table { border: 1px solid var(--hairline); border-radius: var(--radius-md); overflow: hidden; font-size: 10.5px; }
.pn-th, .pn-tr { display: grid; align-items: center; gap: 8px; padding: 0 10px; }
.pn-th { background: var(--surface-muted); border-bottom: 1px solid var(--hairline); min-height: 26px;
  padding-top: 4px; padding-bottom: 4px; font-size: 9px; line-height: 11px; font-weight: 600;
  color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.06em; align-items: end; }
.pn-th span { display: flex; align-items: center; gap: 4px; }
.pn-th span.pn-right { justify-self: end; }
.pn-th span.on { color: var(--teal-700); }
.pn-tr { height: 30px; border-bottom: 1px solid var(--hairline); color: var(--ink-2); }
.pn-tr:last-child { border-bottom: none; }
.pn-tr:hover { background: var(--surface-muted); }
.pn-name { font-weight: 500; color: var(--ink-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-tr:hover .pn-name { text-decoration: underline; text-decoration-color: var(--teal-600); text-underline-offset: 2px; }
.pn-mono { font-family: var(--font-mono); font-size: 9.5px; font-feature-settings: "tnum" 1; color: var(--ink-3); white-space: nowrap; }
.pn-muted { color: var(--ink-4); }
.pn-right { justify-self: end; text-align: right; }
.pn-trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* chips §14.1 */
.pn-chip { display: inline-flex; align-items: center; gap: 4px; height: 17px; padding: 0 7px; border-radius: var(--radius-full); font-size: 9px; font-weight: 500; white-space: nowrap; }
.pn-chip i { width: 5px; height: 5px; border-radius: var(--radius-full); background: currentColor; flex-shrink: 0; }
.c-ok { background: var(--success-50); color: var(--success-600); }
.c-run { background: var(--info-50); color: var(--info-700); }
.c-warn { background: var(--warning-50); color: var(--warning-700); }
.c-bad { background: var(--danger-50); color: var(--danger-700); }
.c-neu { background: var(--surface-muted); color: var(--ink-3); border: 1px solid var(--hairline); }
.c-eia { background: var(--surface); color: var(--teal-700); border: 1px solid var(--teal-200); }
.c-dia { background: var(--surface); color: var(--ink-3); border: 1px solid var(--hairline-strong); }

/* Hitos de la ficha de proyecto — patrón real: rail con check, nombre,
   fecha mono y "· N docs". Reemplaza el timeline de dots del mockup v1. */
.pn-hito { display: grid; grid-template-columns: 16px 1fr; gap: 10px; align-items: start; }
.pn-hito-rail { display: flex; flex-direction: column; align-items: center; align-self: stretch; }
.pn-hito-dot { width: 14px; height: 14px; border-radius: var(--radius-full); background: var(--teal-600);
  color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.pn-hito-dot.next { background: var(--surface); border: 1.5px dashed var(--ink-5); }
.pn-hito-line { flex: 1; width: 2px; background: var(--teal-200); min-height: 12px; }
.pn-hito-line.next { background: var(--hairline); }
.pn-hito-body { padding-bottom: 12px; display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.pn-hito-n { font-size: 11px; font-weight: 600; color: var(--ink-1); }
.pn-hito-n.next { color: var(--ink-4); font-weight: 500; }
.pn-hito-m { font-family: var(--font-mono); font-size: 9px; color: var(--ink-4); font-feature-settings: "tnum" 1; }
.pn-chev { color: var(--ink-5); flex-shrink: 0; }

/* Hito expandido: tabla de documentos anidada bajo el hito (patrón real) */
.pn-hito-rail--span { grid-row: 1 / 3; }
.pn-hito-exp { grid-column: 2; margin: -4px 0 12px; }
/* identity card §15.7 a escala */
.pn-id { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px;
  border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: 11px 12px; }
.pn-id-row { display: flex; gap: 6px; font-size: 10px; line-height: 15px; min-width: 0; }
.pn-id-k { color: var(--ink-3); flex-shrink: 0; font-weight: 500; }
.pn-id-v { color: var(--ink-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-id-v.mono { font-family: var(--font-mono); font-size: 9.5px; font-feature-settings: "tnum" 1; }
.pn-acts { display: flex; gap: 5px; }
.pn-act { display: inline-flex; align-items: center; gap: 4px; height: 21px; padding: 0 8px;
  border: 1px solid var(--hairline-strong); border-radius: var(--radius-md); font-size: 9.5px; color: var(--ink-3); }
.pn-crumb { font-size: 9px; color: var(--ink-4); }

/* timeline §15.3 a escala */
.pn-box { border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: 11px 12px; }
.pn-box-label { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-4); margin-bottom: 9px; }
.pn-tl-node { display: grid; grid-template-columns: 14px 1fr; gap: 9px; }
.pn-tl-rail { display: flex; flex-direction: column; align-items: center; }
.pn-tl-dot { width: 9px; height: 9px; border-radius: var(--radius-full); flex-shrink: 0; margin-top: 4px; }
.pn-tl-dot.done { background: var(--teal-600); }
.pn-tl-dot.now { background: var(--orange-700); box-shadow: 0 0 0 3px var(--orange-50); }
.pn-tl-dot.next { background: var(--surface); border: 1.5px dashed var(--ink-5); }
.pn-tl-line { flex: 1; width: 1.5px; background: var(--hairline); margin: 3px 0; }
.pn-tl-line.done { background: var(--teal-200); }
.pn-tl-body { padding-bottom: 11px; }
.pn-tl-t { font-size: 11px; font-weight: 600; color: var(--ink-1); display: flex; align-items: center; gap: 6px; }
.pn-tl-t.now { color: var(--orange-700); }
.pn-tl-s { font-family: var(--font-mono); font-size: 9px; color: var(--ink-4); font-feature-settings: "tnum" 1; margin-top: 1px; }

/* cadena procesal §3.17 a escala */
.pn-cad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--hairline); border-radius: var(--radius-md); overflow: hidden; }
.pn-cad-step { min-width: 0; padding: 9px 10px; border-right: 1px solid var(--hairline); }
.pn-cad-step:last-child { border-right: none; }
.pn-cad-step.on { background: var(--teal-50); }
.pn-cad-k { font-size: 8px; line-height: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-4); margin-bottom: 4px; min-height: 22px; }
.pn-cad-step.on .pn-cad-k { color: var(--teal-700); }
.pn-cad-v { font-size: 10.5px; font-weight: 500; color: var(--ink-1); line-height: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-cad-d { font-family: var(--font-mono); font-size: 8.5px; color: var(--ink-4); margin-top: 2px; font-feature-settings: "tnum" 1; }

/* facet-cards §15.14 a escala */
.pn-facets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pn-facet { border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: 9px 10px; }
.pn-facet.on { border-color: var(--teal-600); background: var(--teal-50); }
.pn-facet-n { font-family: var(--font-mono); font-size: 15px; line-height: 18px; color: var(--ink-1); font-feature-settings: "tnum" 1; }
.pn-facet.on .pn-facet-n { color: var(--teal-700); }
.pn-facet-l { font-size: 9.5px; color: var(--ink-4); margin-top: 1px; }

/* kind chips de biblioteca §2.1 — paleta canónica, no reinventar */
.pn-kind { display: inline-flex; align-items: center; height: 16px; padding: 0 6px; border-radius: var(--radius-sm); font-size: 8.5px; font-weight: 500; white-space: nowrap; }
.k-proyecto { background: #dbeafe; color: #1e3a8a; }
.k-uf { background: #fef3c7; color: #854d0e; }
.k-sancionatorio { background: #fee2e2; color: #991b1b; }
.k-guia { background: #d1fae5; color: #065f46; }
.k-pertinencia { background: #fae8ff; color: #86198f; }

.pn-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.pn-card { border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: 10px; }
.pn-card-t { font-size: 11px; font-weight: 600; display: flex; align-items: center; gap: 5px; color: var(--ink-1); }
.pn-card-m { font-family: var(--font-mono); font-size: 8.5px; color: var(--ink-4); margin-top: 3px; font-feature-settings: "tnum" 1; }
.pn-bars { display: flex; gap: 3px; margin-top: 7px; }
.pn-bars i { display: block; height: 3px; border-radius: 2px; background: var(--hairline-strong); }
.pn-alert { border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: 10px; display: flex; gap: 9px; align-items: flex-start; }
.pn-alert > div { flex: 1; min-width: 0; }
.pn-alert-ico { width: 22px; height: 22px; border-radius: var(--radius-md); background: var(--teal-50); color: var(--teal-700); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pn-alert-t { font-size: 11px; font-weight: 600; line-height: 15px; color: var(--ink-1); }
.pn-alert-s { font-size: 10px; color: var(--ink-3); line-height: 15px; margin-top: 2px; }
.pn-alert-time { font-family: var(--font-mono); font-size: 8.5px; color: var(--ink-4); flex-shrink: 0; white-space: nowrap; }

/* Dos paneles escalonados: listado atrás, ficha adelante. No van en el mismo
   canvas porque en la app son dos pantallas distintas. */
.lp-stack { display: grid; }
/* El margen derecho negativo se topea en el padding de .lp-tour (24px): con -5%
   puro, entre ~1010px y ~1265px de viewport el panel asoma fuera del contenedor y
   la página gana scroll lateral. max() con negativos elige el MENOS negativo. */
.lp-panel--front { margin: -52px max(-24px, -5%) 0 16%; z-index: 2;
  box-shadow: 0 28px 56px rgba(15, 23, 42, 0.16), 0 10px 20px rgba(15, 23, 42, 0.10); }
@media (max-width: 1000px) {
  .lp-panel--front { margin: 16px 0 0; }
}

/* Ficha de colección publicada: título editorial, descripción escrita por el
   usuario y estado de publicación. */
.pn-coll-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pn-coll-t { font-family: var(--font-serif); font-size: 16px; line-height: 21px; font-weight: 500; color: var(--ink-1); }
.pn-badge-pub { display: inline-flex; align-items: center; gap: 4px; height: 17px; padding: 0 7px;
  border-radius: var(--radius-full); font-size: 8.5px; font-weight: 600; letter-spacing: 0.04em;
  background: var(--teal-50); color: var(--teal-700); border: 1px solid var(--teal-200); }
.pn-coll-desc { font-size: 10.5px; line-height: 16px; color: var(--ink-3); }
.pn-coll-desc em { font-style: italic; }
.pn-coll-meta { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono);
  font-size: 8.5px; color: var(--ink-4); font-feature-settings: "tnum" 1; }
.pn-tag { display: inline-flex; align-items: center; height: 16px; padding: 0 6px;
  border-radius: var(--radius-sm); font-size: 8.5px; background: rgba(15,118,110,0.13); color: var(--teal-800); }

/* ---- CTA de cierre ---- */
.lp-cta { position: relative; background: var(--chrome); color: var(--surface); overflow: hidden; margin-top: 88px; }
.lp-cta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(45,212,191,0.045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(45,212,191,0.045) 1px, transparent 1px);
  background-size: 24px 24px;
}
.lp-cta::after {
  content: ""; position: absolute; inset: auto -10% -60% -10%; height: 520px; pointer-events: none;
  background: radial-gradient(50% 60% at 50% 50%, rgba(45,212,191,0.16), transparent 72%);
}
.lp-cta-inner { position: relative; max-width: 700px; margin: 0 auto; padding: 96px var(--space-6); text-align: center; }
.lp-cta-title { font-family: var(--font-serif); font-weight: 300; font-size: 40px; line-height: 48px; letter-spacing: -0.02em; margin-bottom: var(--space-4); }
.lp-cta-title em { font-style: italic; color: var(--teal-300); font-weight: 400; }
.lp-cta-lead { font-size: 16px; line-height: 26px; color: var(--ink-6); max-width: 520px; margin: 0 auto var(--space-8); }
.lp-cta-actions { display: flex; gap: var(--space-2); justify-content: center; flex-wrap: wrap; }
.seia-suite .btn-on-chrome { background: var(--surface); color: var(--ink-1); border-color: var(--surface); height: 44px; padding: 0 20px; font-size: 14px; }
.seia-suite .btn-on-chrome:hover { background: var(--teal-100); border-color: var(--teal-100); }

/* ---- Reveal al scroll (IntersectionObserver, sin librerías) ---- */
.rv { opacity: 0; transform: translateY(18px); transition: opacity 520ms var(--ease-standard), transform 520ms var(--ease-standard); }
.rv.in { opacity: 1; transform: none; }
.rv-1 { transition-delay: 80ms; }
.rv-2 { transition-delay: 160ms; }
.rv-3 { transition-delay: 240ms; }

/* ---- Responsive ---- */
@media (max-width: 1000px) {
  .lp-feat, .lp-feat--flip { grid-template-columns: 1fr; gap: 40px; }
  .lp-feat--flip .lp-feat-copy { order: 1; }
  .lp-feat--flip .lp-feat-visual { order: 2; }
  .lp-feat-copy { max-width: none; }
}
@media (max-width: 768px) {
  .lp-tour { padding: 0 var(--space-5); }
  .lp-tour-head { padding-top: 56px; }
  .lp-feat { padding: 48px 0; }
  .lp-feat-title { font-size: 27px; line-height: 34px; }
  .lp-feat-lead { font-size: 15px; line-height: 24px; }
  .lp-cta-inner { padding: 64px var(--space-5); }
  .lp-cta-title { font-size: 30px; line-height: 38px; }
  .pn-side { display: none; }
  /* Excepción SNIFA: el listado de registros ES el argumento de la sección */
  .pn-body--col { flex-direction: column; }
  .pn-side--keep { display: flex; width: 100%; border-right: none;
    border-bottom: 1px solid var(--hairline); padding-bottom: 10px; }
  .pn-facets { grid-template-columns: 1fr; }
  .pn-cad { grid-template-columns: 1fr; }
  .pn-cad-step { border-right: none; border-bottom: 1px solid var(--hairline); }
  .pn-cad-step:last-child { border-bottom: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  .lp-feat-link svg { transition: none; }
}