/* firma · macro: Cinematic / Scroll Stage · theme: Vigencia · direction: dark-tecnico · critique: P5J4E4F5H5V4 */
/* Hard rule 7 justification (conic rim on two surfaces only): the engine re-verifies every
   answer against the XML on disk before it cites, so the border sweeping the frame IS that
   sweep, and it appears only on the two surfaces that display a verified answer. Swap test:
   rewritten for any other client the sentence stops being true, because no other client
   re-reads its own source before answering. */

@property --rim-a { syntax: "<angle>"; inherits: false; initial-value: 115deg; }

/* ---------------------------------------------------------------- tokens */

:root {
  /* paper and ink: mismo sistema del producto (docs/diseno-chat/README.md).
   * Por defecto la página es el cuerpo de contenido, CLARO. Las tres zonas que
   * son barra o héroe (cabecera, héroe, cierre) llevan la clase .dark, que
   * redefine este mismo set de variables con los valores oscuros de abajo.
   * Así ningún componente (.cand, .stat, .mcp-card...) necesita dos versiones:
   * lee el token que esté vigente en su contenedor. */
  --bg:            #ffffff;
  --bg-raise:      #fafaf8;
  --bg-card:       #fafaf8;
  --bg-card-2:     #f3f1ec;
  --line:          #ede9e2;
  --line-strong:   #e8e4dd;
  --line-lit:      #cfc9bf;
  --line-hi:       #cfc9bf;

  --ink:           #292827;
  --ink-2:         #4f4c48;
  /* Grises y dorado de la capa clara bajados el 29-09-2026 (auditoría UX,
   * C6): --ink-4 #9a9794 medía 2,78:1 sobre --bg-raise y el dorado #a5853b
   * 3,49:1 sobre blanco. Ahora todo texto pasa 4,5:1 sobre #ffffff, #fafaf8
   * y #f3f1ec; ver la tabla de color en landing/design.md. La zona .dark
   * conserva el dorado original, que ahí mide 5,77:1. */
  --ink-3:         #625f5b;
  --ink-4:         #6d6964;

  --accent:        #856a2f;
  --accent-soft:   #6f5826;

  /* type */
  --font-display: "Baskervville", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --fs-display: 64px;
  --fs-h2: 44px;
  --fs-h3: 24px;
  --fs-lead: 17px;
  --fs-body: 15px;
  --fs-small: 13px;
  --fs-micro: 12px;
  --fs-mono: 13px;
  --fs-mono-sm: 11.5px;

  --lh-display: 1.06;
  --lh-h2: 1.02;
  --lh-body: 1.74;
  --lh-tight: 1.34;

  --tr-display: -0.64px;
  --tr-h2: -0.44px;
  --tr-body: -0.02em;
  --tr-label: 0.14em;

  /* space (4pt) */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 128px;

  /* shape */
  --r-pill: 999px;
  --r-card: 28px;
  --r-sub: 14px;
  --r-chip: 8px;

  /* motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-cam: cubic-bezier(.16, 1, .3, 1);
  --dur-1: .18s;
  --dur-2: .45s;
  --dur-3: .95s;

  --shell: 1180px;
}

/* Zona oscura: cabecera, héroe y cierre. Mismos nombres de variable que
 * :root, mismos valores que tenía el :root viejo (era una landing oscura
 * completa): así ningún componente compartido necesita una segunda regla,
 * solo hereda el token vigente en el contenedor .dark más cercano. */
.dark {
  --bg:            #080706;
  --bg-raise:      #13110e;
  --bg-card:       #161310;
  --bg-card-2:     #1b1a18;
  --line:          #23211f;
  --line-strong:   #2d2a27;
  --line-lit:      #47423d;
  --line-hi:       #5a544e;

  --ink:           #f4efe6;
  --ink-2:         #c9c2b8;
  --ink-3:         #9a9288;
  /* Subido de #746D66 el 31-08-2026: fallaba WCAG AA en sus dos superficies
   * (3,81:1 sobre --bg y 3,63:1 sobre --bg-card, contra el mínimo de 4,5:1).
   * Dos auditorías independientes, SEO y UX, lo encontraron por separado.
   * Este valor mide 5,02:1 y 4,78:1. */
  --ink-4:         #8b8074;

  --accent:        #a5853b;
  --accent-soft:   #948a68;

  background: var(--bg);
  color: var(--ink);
}

/* ---------------------------------------------------------------- reset */

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

html, body {
  overflow-x: clip;
  max-width: 100%;
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}

h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; display: block; }
table { border-collapse: collapse; width: 100%; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  background: var(--bg-card);
  color: var(--ink);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--r-chip);
  font-size: var(--fs-small);
}
.skip:focus { left: var(--space-md); top: var(--space-md); }

/* ---------------------------------------------------------------- type */

.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  word-break: break-word;
}

.h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--tr-h2);
}

.h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 46ch;
}

.body { color: var(--ink-2); }

.label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-4);
}

.pill-tag {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-xs);
  max-width: 100%;
  min-height: 28px;
  padding: 4px 12px;
  line-height: 1.35;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--bg-raise) 80%, transparent);
  backdrop-filter: blur(10px);
  font-size: var(--fs-micro);
  color: var(--ink-3);
  letter-spacing: var(--tr-body);
}
@media (max-width: 480px) { .pill-tag { border-radius: var(--r-chip); } }
.pill-tag::before {
  content: "";
  flex: none;
  margin-top: 0.5em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--space-lg);
}

.section {
  padding-block: var(--space-5xl);
  border-top: 1px solid var(--line);
}

.section-head { max-width: 62ch; }
.section-head .h2 { margin-bottom: var(--space-md); }

/* ---------------------------------------------------------------- rim */

.rim { position: relative; }
.rim::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--rim-a),
    color-mix(in srgb, var(--ink) 10%, transparent) 0deg,
    color-mix(in srgb, var(--ink) 20%, transparent) 75deg,
    color-mix(in srgb, var(--accent) 45%, transparent) 96deg,
    color-mix(in srgb, var(--ink) 4%, transparent) 200deg,
    color-mix(in srgb, var(--ink) 10%, transparent) 360deg);
  -webkit-mask: linear-gradient(var(--ink) 0 0) content-box, linear-gradient(var(--ink) 0 0);
  mask: linear-gradient(var(--ink) 0 0) content-box, linear-gradient(var(--ink) 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
  animation: rim-spin 3s linear infinite;
}

@keyframes rim-spin {
  0%   { --rim-a: 115deg; animation-timing-function: ease-in-out; }
  50%  { --rim-a: 475deg; }
  to   { --rim-a: 475deg; }
}

/* ---------------------------------------------------------------- header */

.head {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  padding: 22px 0 14px;
}
.head::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 92%, transparent), transparent);
  backdrop-filter: blur(calc(14px * var(--scroll-p, 0)));
  opacity: var(--scroll-p, 0);
  pointer-events: none;
}
.head-in {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  transform: translateY(calc(-8px * var(--scroll-p, 0)));
}
.mark {
  font-family: var(--font-display);
  font-size: 21px;
  letter-spacing: 0.02em;
}
.head-nav { display: flex; align-items: center; gap: var(--space-lg); }
.head-meta {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink-3);
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--dur-1) var(--ease-out);
}
.head-meta:hover { color: var(--ink); }
.head .btn { height: 38px; padding: 0 18px; font-size: 14px; }

/* ---------------------------------------------------------------- hero */

.hero {
  padding-top: 168px;
  padding-bottom: var(--space-3xl);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr);
  align-items: start;
  gap: var(--space-3xl);
}
/* the line breaks are authored in the markup: the column has to be wide enough
   that the browser never adds a break of its own. */
.hero-title { margin-block: var(--space-lg) var(--space-lg); }
.hero-sub { margin-bottom: var(--space-xl); }

/* bottom-aligned on purpose: the spec list sits on the CTA baseline, so the empty
   space lands beside the title as composition instead of as a gap under the column. */
.hero-side {
  align-self: end;
  border-left: 1px solid var(--line);
  padding-left: var(--space-lg);
  padding-bottom: var(--space-xs);
}
.hero-side dl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--space-lg);
  row-gap: var(--space-sm);
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
}
.hero-side dt { color: var(--ink-4); }
.hero-side dd { color: var(--ink-2); margin: 0; }

/* palabra rotatoria del h1: fade de salida y de entrada con --ease-out y --dur-2. */
.hero-rota-anim { transition: opacity var(--dur-2) var(--ease-out); }
.hero-rota-anim.is-saliendo { opacity: 0; }
.hero-rota-anim.is-entrando { opacity: 0; transition: none; }

/* panel de producto del héroe: cámara propia (--hp, 0 a 1). Justificación: el producto ES un chat
   que devuelve una card verbatim, así que lo que entra inclinado y se asienta es la respuesta real,
   no una ilustración. Sin sombra: la elevación es hairline y tono, como en el resto de la página. */
.hero-stage { perspective: 1200px; margin-top: var(--space-3xl); }
.hero-panel {
  --hp: 1;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  background: var(--bg-raise);
  overflow: hidden;
  transform-origin: 50% 0;
  transform: rotateX(calc((1 - var(--hp)) * 12deg)) translateY(calc((1 - var(--hp)) * -16px)) scale(calc(.97 + var(--hp) * .03));
  will-change: transform;
}
.hp-side { display: flex; flex-direction: column; gap: var(--space-2xs); padding: var(--space-md); border-right: 1px solid var(--line); background: var(--bg); font-size: var(--fs-small); color: var(--ink-3); }
.hp-btn { border: 1px solid var(--line-strong); border-radius: var(--r-chip); padding: var(--space-xs) var(--space-sm); color: var(--ink); }
.hp-label { font-size: var(--fs-small); color: var(--ink-4); padding: var(--space-sm) var(--space-xs) var(--space-2xs); }
.hp-chat { padding: var(--space-xs) var(--space-sm); border-radius: var(--r-chip); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-chat.is-activo { background: var(--bg-card); color: var(--ink); }
.hp-main { display: flex; flex-direction: column; gap: var(--space-md); padding: var(--space-xl) var(--space-2xl); min-width: 0; }
.hp-user { align-self: flex-end; max-width: 460px; background: var(--bg-card-2); border: 1px solid var(--line-strong); border-radius: var(--r-sub); padding: var(--space-xs) var(--space-md); font-size: var(--fs-small); color: var(--ink); }
.hp-answer { display: flex; flex-direction: column; gap: var(--space-xs); max-width: 640px; }
.hp-card { border: 1px solid var(--line-strong); border-radius: var(--r-sub); background: var(--bg-card); overflow: hidden; }
.hp-card-head, .hp-card-foot { display: flex; justify-content: space-between; gap: var(--space-md); padding: var(--space-xs) var(--space-md); font-family: var(--font-mono); font-size: var(--fs-mono-sm); color: var(--ink-3); }
.hp-card-head { background: var(--bg-raise); border-bottom: 1px solid var(--line); }
.hp-card-foot { border-top: 1px solid var(--line); }
.hp-card-foot a { color: var(--accent); }
.hp-verbatim { margin: 0; padding: var(--space-md); font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .hero-rota-anim { transition: none; }
  .hero-panel { transform: none; }
}

/* Botones: rectángulo de 8 px, 44 px de alto en la landing, mismas familias que
 * el producto (docs/diseno-chat/README.md). Primario tinta sobre claro y claro
 * sobre oscuro; secundario, hairline peso 500. Sin dorado en botones: el
 * acento queda para "verificado", "ver en BCN" y el foco. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  height: 44px;
  padding: 0 20px;
  border-radius: var(--r-chip);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  border: 1px solid transparent;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out),
    color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.btn:active { transform: scale(.98); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* primario: tinta sobre claro. Solo se usa fuera de .dark, así que #292827/#ffffff
   son literales explícitos, no var(--ink)/var(--bg): ese par cambiaría de sentido
   si algún día el botón entrara en un contenedor .dark, y un botón primario no
   se invierte solo por herencia. */
.btn-tinta { background: #292827; color: #ffffff; }
.btn-tinta:hover { opacity: .88; }

/* primario en superficie oscura: claro sobre oscuro (invertido). Este SÍ vive
   siempre dentro de .dark (cabecera, héroe, cierre), así que lee el token
   ambiente en vez de repetir el literal. */
.btn-luz { background: var(--ink); color: var(--bg); }
.btn-luz:hover { opacity: .88; }

/* secundario sobre claro: hairline, peso 500 */
.btn-linea { border-color: var(--line-strong); color: var(--ink); font-weight: 500; }
.btn-linea:hover { border-color: var(--line-lit); }

/* secundario sobre oscuro: hairline, peso 500. También vive siempre dentro de .dark. */
.btn-linea-oscura { border-color: var(--line-lit); color: var(--ink); font-weight: 500; }
.btn-linea-oscura:hover { border-color: var(--line-hi); }

/* ---------------------------------------------------------------- ticker */

.ticker {
  margin-top: var(--space-4xl);
  border-block: 1px solid var(--line);
  padding-block: var(--space-md);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, var(--ink) 10%, var(--ink) 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, var(--ink) 10%, var(--ink) 90%, transparent 100%);
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker-scroll 78s linear infinite;
  animation-play-state: paused;
  will-change: transform;
}
.ticker-track.is-running { animation-play-state: running; }
.ticker:hover .ticker-track, .ticker:focus-within .ticker-track { animation-play-state: paused; }
.ticker-group {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
  padding-right: var(--space-2xl);
}
.ticker-item {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  color: var(--ink-3);
  white-space: nowrap;
}
.ticker-item b { font-weight: 400; color: var(--ink-4); }

@keyframes ticker-scroll {
  0% { transform: translate(0); }
  to { transform: translate(-50%); }
}

/* ---------------------------------------------------------------- stage */

.stage-wrap { position: relative; border-top: 1px solid var(--line); }
.stage {
  padding-block: var(--space-4xl);
  overflow: clip;
  isolation: isolate;
}
.stage-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: var(--space-2xl);
  margin-bottom: var(--space-lg);
}
.stage-head .h2 { max-width: 20ch; }
.stage-head .body { max-width: 56ch; }

/* the camera track: a scrubber that shows how far into the decision the scroll is */
.rail {
  position: relative;
  height: 2px;
  width: 100%;
  background: var(--line);
  border-radius: var(--r-pill);
  margin-bottom: var(--space-2xl);
  overflow: hidden;
}
.rail::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  transform: scaleX(var(--p, 0));
  transform-origin: left;
  background: var(--accent);
  border-radius: inherit;
}

.cases { display: flex; flex-direction: column; gap: var(--space-4xl); }
.case { position: relative; }

.q {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sub);
  background: var(--bg-raise);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--ink);
  margin-bottom: var(--space-lg);
}
.q-tag { color: var(--ink-4); }
.q-caret {
  width: 2px;
  height: 14px;
  background: var(--accent);
  animation: caret 1.05s step-end infinite;
  flex: none;
}
@keyframes caret { 0%, 49% { opacity: 1; } 50%, to { opacity: 0; } }

.cands {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  align-items: start;
}
.cands.is-six { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.cand {
  border: 1px solid var(--line);
  border-radius: var(--r-sub);
  background: var(--bg-card);
  padding: var(--space-lg);
  transition: opacity var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.cand-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.cand-id {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  color: var(--ink-3);
}
.cand-text {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: var(--space-md);
}
.cand-why {
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--ink-3);
  border-top: 1px solid var(--line);
  padding-top: var(--space-sm);
}
.cand-name { font-size: var(--fs-small); color: var(--ink-2); margin-bottom: var(--space-xs); }

.flag {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--r-chip);
  border: 1px solid var(--line-strong);
  color: var(--ink-4);
  white-space: nowrap;
}
.flag-win { border-color: var(--accent); color: var(--accent); }
.flag-out { border-color: var(--line-strong); color: var(--ink-4); }

/* Descartado: tinta tenue y tachado en vez de opacity .42, que dejaba el
 * texto en 1,8:1 (auditoría UX 29-09-2026, C6). Sigue leyéndose como
 * descartado y pasa 4,5:1. */
.cand.is-out :is(.cand-id, .cand-name, .cand-why) { color: var(--ink-4); }
.cand.is-out .cand-name { text-decoration: line-through; text-decoration-color: var(--line-lit); }
.cand.is-win { border-color: var(--line-lit); background: var(--bg-card-2); }

.verdict {
  margin-top: var(--space-lg);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sub);
  background: var(--bg-raise);
  padding: var(--space-lg);
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: start;
}
.verdict-k {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-4);
}
.verdict-v { font-size: var(--fs-body); line-height: 1.6; color: var(--ink-2); }
.verdict-v strong { font-weight: 400; color: var(--ink); }
.verdict.is-stop { border-color: var(--line-lit); }
.verdict-reason {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  line-height: 1.7;
  color: var(--ink-2);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-chip);
  padding: var(--space-sm) var(--space-md);
  margin-top: var(--space-sm);
}

/* camera mode: only when JS runs, pointer-fine width, and motion is allowed */
html.cam .stage-wrap { height: 420svh; }
html.cam .stage {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* the header is fixed, so the pinned stage reserves its height or the title lands under it */
  padding-top: 92px;
  padding-bottom: var(--space-lg);
}

/* pinned mode is tighter than flow mode: the whole world has to fit one viewport */
html.cam .stage-head { margin-bottom: var(--space-md); }
html.cam .stage-head .h2 { font-size: 34px; max-width: 24ch; }
html.cam .stage-head .body { font-size: var(--fs-small); }
html.cam .rail { margin-bottom: var(--space-lg); }
html.cam .q { padding: var(--space-sm) var(--space-md); margin-bottom: var(--space-md); }
html.cam .cand { padding: var(--space-md); }
html.cam .cand-text { font-size: 16px; margin-bottom: var(--space-sm); }
html.cam .cand-why { font-size: var(--fs-micro); }
html.cam .verdict { margin-top: var(--space-md); padding: var(--space-md) var(--space-lg); }
html.cam .cands.is-six .cand { padding: var(--space-sm) var(--space-md); }

/* Short laptops (1280x680 and similar): without this tier the pinned stage does not
   fit, the JS safety drops the camera, and the signature section silently degrades to
   plain flow on a very common screen. Height query, not width. */
@media (max-height: 820px) {
  html.cam .stage { padding-top: 78px; }
  html.cam .stage-head { margin-bottom: var(--space-sm); }
  html.cam .stage-head .h2 { font-size: 27px; }
  html.cam .stage-head .body { font-size: var(--fs-micro); line-height: 1.6; }
  html.cam .rail { margin-bottom: var(--space-md); }
  html.cam .q { padding: var(--space-xs) var(--space-md); margin-bottom: var(--space-sm); }
  html.cam .cand { padding: var(--space-sm) var(--space-md); }
  html.cam .cand-name { margin-bottom: 2px; }
  html.cam .cand-text { font-size: 15px; margin-bottom: var(--space-xs); }
  html.cam .cand-why { padding-top: var(--space-xs); }
  html.cam .verdict { margin-top: var(--space-sm); padding: var(--space-sm) var(--space-md); }
}
html.cam .cases {
  display: grid;
  transform: translate3d(0, calc(var(--p, 0) * -2.4vh), 0);
}
html.cam .case {
  grid-area: 1 / 1;
  transition: opacity var(--dur-3) var(--ease-cam), transform var(--dur-3) var(--ease-cam);
}
html.cam .case-2 { opacity: 0; transform: translate3d(0, 40px, 0); pointer-events: none; }
html.cam .stage.is-b4 .case-1 { opacity: 0; transform: translate3d(0, -40px, 0); pointer-events: none; }
html.cam .stage.is-b4 .case-2 { opacity: 1; transform: none; pointer-events: auto; }

html.cam .case-1 .cand { opacity: 0; transform: translate3d(0, 22px, 0); }
html.cam .case-1 .cand {
  transition: opacity var(--dur-3) var(--ease-cam), transform var(--dur-3) var(--ease-cam),
              border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
html.cam .stage.is-b1 .case-1 .cand { opacity: 1; transform: none; }
html.cam .stage.is-b2 .case-1 .cand.is-out { opacity: 1; }
html.cam .case-1 .flag,
html.cam .case-1 .cand-why { opacity: 0; transition: opacity var(--dur-2) var(--ease-out); }
html.cam .stage.is-b2 .case-1 .flag,
html.cam .stage.is-b2 .case-1 .cand-why { opacity: 1; }

html.cam .case-1 .verdict { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
html.cam .stage.is-b3 .case-1 .verdict { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- anatomia */

.answer {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  background: var(--bg-card);
  overflow: hidden;
  margin-top: var(--space-2xl);
}
.answer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--line);
  background: var(--bg-raise);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  color: var(--ink-3);
  flex-wrap: wrap;
}
.answer-body { padding: var(--space-xl) var(--space-lg); }
.answer-quote {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.42;
  color: var(--ink);
  max-width: 34ch;
  margin-bottom: var(--space-xl);
}
.fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-sub);
  overflow: hidden;
}
.field {
  background: var(--bg-card);
  padding: var(--space-md) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  min-width: 0;
}
.field dt {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-4);
}
.field dd {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--ink);
  margin: 0;
  overflow-wrap: anywhere;
}
.field dd a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.field dd a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.field-note { color: var(--ink-3); font-size: var(--fs-mono-sm); }

.answer-foot {
  border-top: 1px solid var(--line);
  padding: var(--space-md) var(--space-lg);
  font-size: var(--fs-small);
  color: var(--ink-3);
  background: var(--bg-raise);
}

.derog {
  margin-top: var(--space-lg);
  border: 1px solid var(--line);
  border-radius: var(--r-sub);
  padding: var(--space-lg);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-lg);
  align-items: center;
  background: var(--bg-raise);
}
.derog-q { font-family: var(--font-mono); font-size: var(--fs-mono-sm); color: var(--ink-4); margin-bottom: var(--space-2xs); }
.derog-t { font-family: var(--font-display); font-size: 19px; color: var(--ink); }
.derog-meta { font-family: var(--font-mono); font-size: var(--fs-mono-sm); color: var(--ink-3); text-align: right; }
.derog-meta b { color: var(--accent); font-weight: 400; }

/* ---------------------------------------------------------------- numeros */

.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-sub);
  overflow: hidden;
  margin-top: var(--space-2xl);
}
.stat {
  background: var(--bg-card);
  padding: var(--space-xl) var(--space-lg);
  min-height: 178px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-md);
}
.stat-n {
  font-family: var(--font-display);
  font-size: 52px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat-n small { font-size: 26px; color: var(--ink-3); }
.stat-t { font-size: var(--fs-small); line-height: 1.6; color: var(--ink-3); }
.stat-t b { color: var(--ink-2); font-weight: 400; }
.stat.is-zero .stat-n { color: var(--accent); }

.stats-note {
  margin-top: var(--space-lg);
  font-size: var(--fs-small);
  color: var(--ink-4);
  max-width: 72ch;
}

/* ---------------------------------------------------------------- cobertura */

.cover-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--space-3xl);
  margin-top: var(--space-2xl);
  align-items: start;
}
.norms { border-top: 1px solid var(--line); }
.norm {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px 78px;
  gap: var(--space-md);
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-small);
}
.norm-n { color: var(--ink-2); }
.norm-id, .norm-a {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  color: var(--ink-4);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.norm-head { color: var(--ink-4); border-bottom-color: var(--line-strong); }
.norm-head .norm-n, .norm-head .norm-id, .norm-head .norm-a {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--ink-4);
}
.norm.is-fuente { grid-template-columns: minmax(0, 1fr) 168px; }

.cover-details { margin-top: var(--space-lg); }
.cover-details summary {
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink-3);
  padding: var(--space-sm) 0;
}
.cover-details summary:hover { color: var(--ink); }
.cover-details .norms { margin-top: var(--space-sm); }

.inside {
  border: 1px solid var(--line);
  border-radius: var(--r-sub);
  background: var(--bg-card);
  padding: var(--space-lg);
}
.inside h3 { margin-bottom: var(--space-sm); }
.inside ul { margin-top: var(--space-md); display: flex; flex-direction: column; gap: var(--space-xs); }
.inside li {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  color: var(--ink-3);
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--space-xs);
}
.inside li span:last-child { color: var(--ink-4); white-space: nowrap; }

.gap {
  margin-top: var(--space-lg);
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--accent-soft);
  border-radius: var(--r-chip);
  padding: var(--space-md) var(--space-lg);
  background: var(--bg-raise);
}
.gap p { font-size: var(--fs-small); color: var(--ink-3); }
.gap .label { display: block; margin-bottom: var(--space-2xs); }

/* ---------------------------------------------------------------- faq */

.faq-list { margin-top: var(--space-2xl); border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); padding-block: var(--space-xl); }
.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: var(--space-3xl);
  align-items: start;
}
.faq-q { font-family: var(--font-display); font-size: 22px; line-height: 1.3; color: var(--ink); max-width: 24ch; }
.faq-a { color: var(--ink-2); max-width: 62ch; }
.faq-a code {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  color: var(--ink);
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 5px;
}

/* ---------------------------------------------------------------- precio */

.price-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}
.price-col {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sub);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.price-col.is-destacado { border-color: var(--line-lit); background: var(--bg-card); }
.price-name { font-size: var(--fs-body); color: var(--ink-2); }
.price-n {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.15;
  color: var(--ink);
}
.price-n small { font-family: var(--font-sans); font-size: var(--fs-small); color: var(--ink-3); }
.price-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  color: var(--ink-3);
}
.price-list li::before { content: "· "; color: var(--ink-4); }
.price-nota { margin-top: var(--space-xl); }
.price-nota a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.price-nota a:hover { color: var(--ink); }

/* ---------------------------------------------------------------- cierre */

.close-card {
  position: relative;
  border-radius: var(--r-card);
  background: var(--bg-card);
  padding: var(--space-5xl) var(--space-xl);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  overflow: hidden;
}
.close-card .h2 { max-width: 20ch; }
.close-card .lead { text-align: center; }
.close-note {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  color: var(--ink-4);
  border: 1px dashed var(--line-lit);
  border-radius: var(--r-chip);
  padding: var(--space-xs) var(--space-sm);
}

/* ---------------------------------------------------------------- footer */

.foot {
  border-top: 1px solid var(--line);
  padding-block: var(--space-xl);
}
.foot-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  color: var(--ink-4);
}
.foot-in a { color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.foot-in a:hover { color: var(--ink); }

/* ---------------------------------------------------------------- responsive */

@media (max-width: 1127.98px) {
  :root {
    --fs-display: 48px;
    --fs-h2: 36px;
    --space-5xl: 96px;
  }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
  .hero-side { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; padding-top: var(--space-lg); }
  .hero-panel { grid-template-columns: minmax(0, 1fr); transform: none; }
  .hp-side { display: none; }
  .hp-main { padding: var(--space-md); }
  .hp-card-head { flex-direction: column; gap: var(--space-2xs); }
  .cover-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
  .faq-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 809.98px) {
  :root {
    --fs-display: 40px;
    --fs-h2: 30px;
    --space-5xl: 72px;
    --space-4xl: 64px;
  }
  .hero { padding-top: 132px; }
  .hero-title { max-width: none; }
  .cands, .cands.is-six { grid-template-columns: minmax(0, 1fr); }
  .verdict { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .fields { grid-template-columns: minmax(0, 1fr); }
  .answer-quote { font-size: 21px; max-width: none; }
  .derog { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .derog-meta { text-align: left; }
  .stage-head { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); align-items: start; }
  .price-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 639.98px) {
  :root { --fs-display: 34px; --fs-h2: 26px; }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .stat { min-height: 0; }
  .norm { grid-template-columns: minmax(0, 1fr) 74px; }
  .norm .norm-a { display: none; }
  .norm.is-fuente { grid-template-columns: minmax(0, 1fr) 128px; }
  .norm.is-fuente .norm-a { display: block; }
  .head-meta { display: none; }
  .close-card { padding-inline: var(--space-lg); }
}

/* ---------------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  .rim::after { animation: none; }
  .ticker-track { animation: none; width: 100%; will-change: auto; }
  .ticker-group[aria-hidden] { display: none; }
  .ticker-group { flex: 1; flex-wrap: wrap; justify-content: space-between; row-gap: var(--space-sm); }
  .q-caret { animation: none; opacity: 1; }
  .cand, .case, .verdict, .btn { transition: none; }
}

/* --- 4 · conectarlo ------------------------------------------------------ */

.cmd {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--bg-card-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sub);
  padding: var(--space-sm) var(--space-md);
  margin: 0 0 var(--space-lg);
  overflow-x: auto;
  white-space: pre;
}

.cmd-p {
  color: var(--accent);
  user-select: none;
  margin-right: var(--space-xs);
}

.pending { color: var(--ink-3); }

.note-cta {
  margin-top: var(--space-lg);
  color: var(--ink-3);
  max-width: 62ch;
}

/* --- 4.5 · integraciones -------------------------------------------------- */

.integra-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-sub);
  overflow: hidden;
  margin-top: var(--space-2xl);
}
.integra {
  background: var(--bg-card);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.integra-mark {
  height: 32px;
  display: flex;
  align-items: center;
  margin-bottom: var(--space-2xs);
}
.integra-mark img {
  height: 100%;
  width: auto;
  /* logos oficiales, sin recolorear el archivo: el filtro solo los desatura
     para que lean como tinta sobre esta superficie clara, sin sumar un
     segundo color cromático a la página (ver design.md, don't 4). */
  filter: grayscale(1);
  opacity: .7;
}
.integra-mark-text {
  width: 40px;
  height: 32px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-chip);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: var(--tr-label);
  color: var(--ink-3);
}
.integra-name { font-size: var(--fs-small); color: var(--ink); }
.integra-detail { font-size: var(--fs-small); line-height: 1.6; color: var(--ink-3); }
.integra-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  color: var(--ink-4);
  border-top: 1px solid var(--line);
  padding-top: var(--space-sm);
  margin-top: var(--space-2xs);
  overflow-wrap: anywhere;
}

.integra-pending { margin-top: var(--space-lg); }

@media (max-width: 809.98px) {
  .integra-grid { grid-template-columns: minmax(0, 1fr); }
}

/* --- 4 · conectarlo, tarjetas por cliente MCP ----------------------------- */

.mcp-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-sub);
  overflow: hidden;
  margin-top: var(--space-2xl);
}
.mcp-card {
  background: var(--bg-card);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.mcp-head {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}
.mcp-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.mcp-logo img {
  width: 22px;
  height: 22px;
  /* mismos logos oficiales que .integra-mark, sin recolorear: el filtro solo
     los desatura para que lean como tinta sobre esta superficie clara, sin
     sumar un segundo color cromático (design.md, don't 4). Identifican el
     cliente, no un respaldo de esas marcas. */
  filter: grayscale(1);
  opacity: .7;
}
.mcp-name { font-weight: 700; font-size: var(--fs-body); color: var(--ink); }
.mcp-detail { font-size: var(--fs-small); line-height: 1.6; color: var(--ink-3); flex-grow: 1; }
.mcp-cmd {
  font-size: var(--fs-mono-sm);
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}
.mcp-acts { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.mcp-act {
  appearance: none;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  padding: 6px var(--space-sm);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.mcp-act:hover { border-color: var(--line-hi); color: var(--ink); }
.mcp-act.is-hecho { border-color: var(--accent); color: var(--accent); }
.mcp-act.is-falla { border-color: var(--line-lit); color: var(--ink-4); }

@media (max-width: 1023.98px) {
  .mcp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 539.98px) {
  .mcp-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .mcp-act { transition: none; }
}

/* Sujeto rotatorio del título del hero.
 *
 * Se le reserva el ancho por JS (la frase más larga) para que la línea no
 * reflowee letra por letra. El cursor es un borde, no un carácter: así nunca
 * entra al texto que un lector de pantalla o un copiar-pegar recogerían. */
.hero-rota {
  /* inline, no inline-block: un inline-block no se parte entre renglones, y
     una frase larga tiene que poder fluir como cualquier texto. Por eso el
     cambio de fuente es un fade (opacity): transform no aplica a un inline. */
  display: inline;
}

/* Símbolo junto al nombre en la cabecera.
 *
 * Va inline en el HTML y no como <img> para que herede currentColor: así
 * acompaña al texto en cualquier estado (hover, foco) sin una segunda copia
 * del archivo que se pueda desincronizar del original. */
.mark { display: inline-flex; align-items: center; gap: .48em; }
.mark-simbolo { width: .92em; height: .92em; flex: none; }

/* Video de la demo.
 *
 * preload="none" a propósito: el video pesa medio mega y no puede competir con
 * el texto por el ancho de banda de la primera carga. Con el póster puesto, el
 * bloque se ve completo antes de descargar un solo byte de video.
 *
 * Sin autoplay: un video que arranca solo en una landing de trabajo molesta, y
 * en móvil se lo come el ahorro de datos igual. */
.video-caja {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--bg-card);
}
.video-demo {
  display: block;
  width: 100%;
  height: auto;
  background: var(--bg);
}
.video-pie {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  line-height: var(--lh-body);
  color: var(--ink-3);
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--line);
}

/* --- rediseño 01-10-2026 (brief de clientes) ------------------------------
   Solo composición y densidad sobre los tokens existentes; ningún token nuevo.
   Cada bloque nace de un patrón del brief: la línea de vigencia (1), el enlace
   al plan Estudiante visible en el héroe (6), la lista de capacidades (5) y el
   plegable "cómo funciona por dentro" (4). */

.hero-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-lg); }
.hero-est {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-small);
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: var(--line-lit);
  text-underline-offset: 4px;
}
.hero-est:hover { color: var(--ink); text-decoration-color: var(--ink); }

/* Línea de vigencia: el dato que más buscan los abogados va en su propia línea, antes de la grilla de campos. */
.vigencia {
  margin: calc(-1 * var(--space-md)) 0 var(--space-xl);
  padding-left: var(--space-md);
  border-left: 2px solid var(--accent);
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--ink);
}
.vigencia a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.vigencia a:hover { color: var(--ink); }

/* Capacidades: filas con nombre y detalle, sin tarjetas ni tiles. */
.caps { margin: var(--space-xl) 0 0; border-top: 1px solid var(--ink); }
.cap {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--space-xl);
  align-items: start;
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--line);
}
.cap dt { font-size: var(--fs-body); font-weight: 700; color: var(--ink); line-height: var(--lh-tight); }
.cap dd { margin: 0; font-size: var(--fs-small); line-height: 1.6; color: var(--ink-2); max-width: 62ch; }

/* Plegable técnico. */
.adentro { margin-top: var(--space-2xl); border-top: 1px solid var(--line); }
.adentro > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  min-height: 56px;
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--ink);
}
.adentro > summary::-webkit-details-marker { display: none; }
.adentro > summary::before {
  content: "+";
  display: inline-flex;
  justify-content: center;
  width: 28px;
  font-family: var(--font-mono);
  color: var(--accent);
}
.adentro[open] > summary::before { content: "−"; }
.adentro > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.adentro-intro { max-width: 62ch; margin: 0 0 var(--space-xl); }
.adentro-sub { margin-top: var(--space-3xl); }

@media (max-width: 809.98px) {
  .cap { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .vigencia { margin-top: calc(-1 * var(--space-sm)); }
}
@media (max-width: 639.98px) {
  .head-meta[href="/planes"] { display: inline-flex; align-items: center; min-height: 44px; }
  .hero-acts .btn { flex: 1 1 100%; justify-content: center; }
}