/* LegalMeet — sitio comercial (LM-510). Mundo Lex Vanguard (prototypes/web/DESIGN.md) en registro editorial:
   la página es el registro de actuaciones de un caso de ejemplo; un cabezal de latón recorre el raíl y sella cada entrada. */

@font-face { font-family: "Plus Jakarta Sans"; font-weight: 400; font-display: swap; src: url("/assets/fonts/plus-jakarta-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 500; font-display: swap; src: url("/assets/fonts/plus-jakarta-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 600; font-display: swap; src: url("/assets/fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 700; font-display: swap; src: url("/assets/fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-weight: 800; font-display: swap; src: url("/assets/fonts/plus-jakarta-sans-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url("/assets/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-display: swap; src: url("/assets/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); }

:root {
  /* Lex Vanguard */
  --ink: #0f172a;          /* midnight slate */
  --ink-2: #1e293b;
  --ink-3: #334155;
  --ink-4: #475569;
  --muted: #64748b;
  --faint: #94a3b8;
  --rule: #e2e8f0;
  --rule-strong: #cbd5e1;
  --canvas: #f8fafc;
  --sheet: #ffffff;
  --tint: #f1f5f9;
  --brass: #d97706;        /* significado: plazos, cabezal, conversión */
  --brass-ink: #b45309;    /* latón con texto blanco (AA) */
  --brass-deep: #92400e;
  --brass-wash: rgba(217, 119, 6, 0.14);
  --cite: #0284c7;
  --ok-bg: #ecfdf5; --ok-ink: #065f46; --ok-line: #a7f3d0;
  --warn-bg: #fffbeb; --warn-ink: #92400e; --warn-line: #fde68a;
  --crit-bg: #fef2f2; --crit-ink: #991b1b; --crit-line: #fecaca;
  --on-dark: #f8fafc;
  --on-dark-2: #cbd5e1;
  --on-dark-rule: rgba(203, 213, 225, 0.22);

  --sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --radius: 4px;
  --radius-lg: 8px;
  --elev-2: 0 8px 20px -4px rgba(15, 23, 42, 0.08), 0 4px 6px -2px rgba(15, 23, 42, 0.03);
  --focus: 0 0 0 2px var(--canvas), 0 0 0 4px var(--ink);

  /* Geometría del registro */
  --page: 1280px;
  --gutter: 40px;          /* margen exterior */
  --rail-x: 40px;          /* posición del raíl dentro del registro */
  --stamp: 152px;          /* columna de hora + estado */
  --col-gap: 56px;
  --entry-pad: 104px;
  --nav-h: 64px;

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 24px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 400 1rem/1.6 var(--sans);
  font-feature-settings: "ss01" on;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  caret-color: var(--brass);
  accent-color: var(--ink);
  scrollbar-color: var(--rule-strong) var(--canvas);
}
::selection { background: var(--brass-wash); color: var(--ink); }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--radius); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -48px; z-index: 50; padding: 8px 14px; background: var(--ink); color: var(--on-dark); border-radius: var(--radius); }
.skip:focus { top: 12px; }

/* ---------- Botones ---------- */
.btn {
  --h: 40px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--h); padding: 0 18px;
  border: 1px solid transparent; border-radius: var(--radius);
  font: 600 0.9375rem/1 var(--sans); letter-spacing: -0.005em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 160ms var(--ease-out), border-color 160ms var(--ease-out), color 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn--sm { --h: 36px; padding: 0 14px; font-size: 0.875rem; }
.btn--lg { --h: 52px; padding: 0 24px; font-size: 1rem; }
/* Conversión: latón (DESIGN.md, "Accent / Action"), con texto blanco en el tono que cumple AA. */
.btn--primary { background: var(--brass-ink); color: #fff; }
.btn--primary:hover { background: var(--brass-deep); }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: var(--ink-2); }
.btn--outline { background: var(--sheet); border-color: var(--rule-strong); color: var(--ink-3); }
.btn--outline:hover { border-color: var(--faint); background: var(--canvas); color: var(--ink); }
.btn--quiet { background: transparent; color: var(--ink-3); }
.btn--quiet:hover { background: var(--tint); color: var(--ink); }
.btn--quietDark { background: transparent; color: var(--on-dark-2); }
.btn--quietDark:hover { background: rgba(248, 250, 252, 0.08); color: var(--on-dark); }
.link { background: none; border: 0; padding: 0; font: inherit; color: var(--ink-3); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.link:hover { color: var(--ink); }

/* ---------- Navegación ---------- */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: var(--canvas);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.nav.is-scrolled { border-bottom-color: var(--rule); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
.nav__inner {
  max-width: var(--page); margin: 0 auto; height: var(--nav-h);
  padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 32px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand__mark { width: 28px; height: 28px; }
.brand__name { font-weight: 800; font-size: 1.125rem; letter-spacing: -0.03em; }
.nav__links { display: flex; gap: 4px; margin-left: 8px; }
.nav__links a, .link-signin {
  padding: 8px 12px; border-radius: var(--radius);
  font-size: 0.875rem; font-weight: 500; color: var(--ink-4); text-decoration: none;
  transition: color 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
.nav__links a:hover, .link-signin:hover { color: var(--ink); background: var(--tint); }
.nav__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.lang { display: inline-flex; border: 1px solid var(--rule-strong); border-radius: var(--radius); overflow: hidden; margin-right: 4px; }
.lang a {
  padding: 5px 9px; font: 500 0.75rem/1.2 var(--mono); color: var(--muted); text-decoration: none;
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.lang a + a { border-left: 1px solid var(--rule-strong); }
.lang a:hover { color: var(--ink); background: var(--tint); }
.lang a[aria-current="page"] { background: var(--ink); color: var(--on-dark); }

/* ---------- Registro y raíl ---------- */
.docket {
  position: relative;
  max-width: var(--page); margin: 0 auto;
  padding: 0 var(--gutter);
}
.rail { position: absolute; top: 0; bottom: 0; left: calc(var(--gutter) + var(--rail-x)); width: 0; z-index: 3; pointer-events: none; }
.rail__line { position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: var(--rule-strong); }
.rail__elapsed { position: absolute; top: 0; left: -0.5px; width: 2px; height: 0; background: var(--brass); }
.rail__head { position: absolute; top: 0; left: 0; width: 0; height: 0; opacity: 0; transition: opacity 300ms var(--ease-out); }
.rail__head::before { content: ""; position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; background: var(--brass); transform: rotate(45deg); }
.rail__head::after { content: ""; position: absolute; left: 9px; top: -0.5px; width: 10px; height: 1px; background: var(--brass); }
.js .rail__head { opacity: 1; }

/* Cabecera del expediente: la oferta */
.hero { position: relative; padding: 28px 0 72px; }
.hero + .entry { padding-top: 64px; }
.caseline {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 24px;
  margin-left: calc(var(--rail-x) + 24px);
  padding: 12px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule);
  font: 500 0.8125rem/1.3 var(--mono); color: var(--ink-3);
}
.caseline__ref { color: var(--ink); }
.caseline__note { margin-left: auto; color: var(--muted); font-family: var(--sans); font-size: 0.8125rem; }
.hero__body { margin-left: var(--stamp); padding-top: clamp(40px, 6vh, 72px); max-width: 1040px; }
.hero__title {
  font-weight: 800;
  font-size: clamp(3rem, 1.2rem + 5vw, 5.75rem);
  line-height: 0.98; letter-spacing: -0.04em;
  max-width: 14ch; text-wrap: balance;
}
.hero__lead { margin-top: 28px; max-width: 54ch; font-size: clamp(1.125rem, 1rem + 0.35vw, 1.3125rem); line-height: 1.55; color: var(--ink-3); text-wrap: pretty; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.hero__facts { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 24px; font-size: 0.875rem; color: var(--ink-4); }
.hero__facts li { display: inline-flex; align-items: center; gap: 10px; }
.hero__facts li::before { content: ""; width: 6px; height: 6px; background: var(--ink-3); }

/* Entradas */
.entry, .band, .close {
  position: relative;
  display: grid;
  grid-template-columns: var(--stamp) minmax(0, 5fr) minmax(0, 7fr);
  column-gap: var(--col-gap);
  align-items: start;
  padding: var(--entry-pad) 0;
  border-top: 1px solid var(--rule);
}
.entry::before { /* la regla de cada entrada arranca en el raíl, no en el borde */
  content: ""; position: absolute; top: -1px; left: 0; width: calc(var(--rail-x) + 1px); height: 1px; background: var(--canvas);
}
.entry__stamp { position: relative; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-left: calc(var(--rail-x) + 24px); padding-top: 6px; }
.entry__stamp::before { /* nodo en el raíl */
  content: ""; position: absolute; left: calc(var(--rail-x) - 4.5px); top: 13px;
  width: 9px; height: 9px; background: var(--ink); border: 1px solid var(--ink);
  transition: background-color 300ms var(--ease-out), border-color 300ms var(--ease-out);
}
.entry__time { font: 500 1.0625rem/1 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; transition: color 300ms var(--ease-out); }
.entry__time--word { font-size: 0.9375rem; letter-spacing: 0.02em; }
.entry__day { font-size: 0.75rem; color: var(--muted); margin-top: -4px; }
.entry__text { grid-column: 2; }
.entry__text h2 {
  font-weight: 700; font-size: clamp(1.75rem, 1.25rem + 1.3vw, 2.5rem);
  line-height: 1.12; letter-spacing: -0.03em; text-wrap: balance;
}
.entry__text p { margin-top: 18px; max-width: 46ch; color: var(--ink-3); font-size: 1.0625rem; text-wrap: pretty; }
.entry > .artifact, .entry > .plans, .entry > .faq { grid-column: 3; }
.entry--wide > .artifact, .entry--wide > .plans { grid-column: 2 / span 2; margin-top: 48px; }
.entry--wide .entry__text { grid-column: 2 / span 2; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--col-gap); align-items: end; }
.entry--wide .entry__text p { margin-top: 0; }

/* Estado del sello (solo con JS: sin JS todo aparece sellado) */
.chip {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px;
  border: 1px solid var(--ok-line); border-radius: var(--radius);
  background: var(--ok-bg); color: var(--ok-ink);
  font: 600 0.6875rem/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
}
.chip--brass { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-ink); }
.chip--onDark { background: transparent; border-color: var(--on-dark-rule); color: var(--on-dark-2); }
.chip--pending { border-style: dashed; }
.entry--significant .entry__stamp::before { background: var(--brass); border-color: var(--brass); }
.js .entry:not(.is-stamped) .entry__stamp::before,
.js .band:not(.is-stamped) .entry__stamp::before { background: var(--canvas); border-color: var(--rule-strong); }
.js .band:not(.is-stamped) .entry__stamp::before { background: var(--ink); border-color: var(--on-dark-rule); }
.js .entry:not(.is-stamped) .entry__time { color: var(--faint); }
.js .entry:not(.is-stamped) .chip,
.js .band:not(.is-stamped) .chip {
  background: transparent; border-style: dashed; border-color: var(--rule-strong); color: var(--faint);
}
.js .band:not(.is-stamped) .chip { border-color: var(--on-dark-rule); color: rgba(203, 213, 225, 0.55); }
@media (prefers-reduced-motion: no-preference) {
  .is-stamped .chip { animation: stamp 520ms var(--ease-out) both; }
}
@keyframes stamp {
  0% { transform: scale(1.18) rotate(-2deg); opacity: 0.2; }
  55% { transform: scale(0.97) rotate(0); opacity: 1; }
  100% { transform: scale(1); }
}

/* ---------- Artefactos (piezas del producto, con datos ilustrativos) ---------- */
.artifact {
  background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
  overflow: hidden;
}
.artifact__bar {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: 40px; padding: 10px 16px; border-bottom: 1px solid var(--rule); background: var(--canvas);
  font-size: 0.8125rem; font-weight: 600; color: var(--ink-3);
}
.artifact__bar .mono { font-size: 0.75rem; font-weight: 500; color: var(--muted); }
.artifact__foot { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 14px 16px; border-top: 1px solid var(--rule); font-size: 0.8125rem; color: var(--ink-4); }

.source { display: inline-flex; align-items: center; gap: 8px; }
.source__dot { width: 7px; height: 7px; background: var(--ink); }
.source__dot--queue { background: transparent; border: 1px dashed var(--ink-4); }

/* Forma de onda */
.wave { position: relative; padding: 40px 16px 30px; }
.wave__svg { width: 100%; height: 88px; }
.wave__played { fill: var(--ink); }
.wave__rest { fill: var(--rule-strong); }
.wave__pin { position: absolute; top: 18px; bottom: 22px; width: 2px; background: var(--brass); }
.wave__pin--a { left: calc(16px + (100% - 32px) * 0.307); }
.wave__pin--b { left: calc(16px + (100% - 32px) * 0.714); }
.wave__pin .mono { position: absolute; top: -2px; left: 6px; font-size: 0.6875rem; color: var(--brass-deep); background: var(--sheet); padding: 0 2px; }

/* Transcripción */
.transcript li { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 12px; padding: 16px; border-bottom: 1px solid var(--rule); }
.transcript li:last-child { border-bottom: 0; }
.transcript__t { grid-row: 1 / span 2; font-size: 0.75rem; color: var(--muted); padding-top: 3px; }
.transcript p { margin-top: 6px; font-size: 0.9375rem; line-height: 1.55; }
.transcript .is-cited { background: linear-gradient(var(--brass-wash), var(--brass-wash)); }
.speaker { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; font-weight: 600; color: var(--ink-3); }
.speaker__id { font: 500 0.6875rem/1 var(--mono); padding: 4px 6px; background: var(--tint); border: 1px solid var(--rule); border-radius: var(--radius); color: var(--ink); }

/* Puntos clave */
.points li { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 16px; border-bottom: 1px solid var(--rule); font-size: 0.9375rem; }
.points li:last-child { border-bottom: 0; }
.points li::before { content: ""; flex: none; align-self: center; width: 6px; height: 6px; background: var(--ink); margin-right: -8px; }
.points p { flex: 1; }
.cite { flex: none; font-size: 0.75rem; color: var(--cite); padding: 3px 6px; border: 1px solid rgba(2, 132, 199, 0.25); border-radius: var(--radius); background: rgba(2, 132, 199, 0.05); }

/* Página de documento */
.artifact--page { box-shadow: var(--elev-2); }
.page { padding: 28px 28px 24px; font-family: "Times New Roman", Times, Georgia, serif; font-size: 1.0625rem; line-height: 1.75; color: #1f2937; }
.page__line + .page__line { margin-top: 12px; }
.page__line--muted { color: #6b7280; }
.page mark { background: var(--brass-wash); color: inherit; box-shadow: inset 0 -2px 0 var(--brass); padding: 1px 2px; }
.finding { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; padding: 16px 20px; border-top: 1px solid var(--warn-line); background: var(--warn-bg); }
.finding__label { font-size: 0.8125rem; font-weight: 600; color: var(--warn-ink); }
.finding__value { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }
.finding__src { margin-left: auto; font-size: 0.75rem; color: var(--warn-ink); }

/* Tarea propuesta */
.task { padding: 20px; }
.task__what strong { display: block; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.015em; }
.task__meta { display: flex; gap: 28px; margin-top: 12px; }
.task__meta dt { font-size: 0.75rem; color: var(--muted); }
.task__meta dd { font-size: 0.9375rem; font-weight: 600; }
.task__actions { display: flex; gap: 8px; margin-top: 20px; }
.task__actions[hidden] { display: none; }
.task__actions .btn--primary { background: var(--ink); }
.task__actions .btn--primary:hover { background: var(--ink-2); }
.task__result { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; padding: 12px 14px; border-radius: var(--radius); background: var(--ok-bg); border: 1px solid var(--ok-line); color: var(--ok-ink); font-size: 0.9375rem; font-weight: 500; }
.task__result[hidden] { display: none; }
.task__result.is-dismissed { background: var(--tint); border-color: var(--rule); color: var(--ink-3); }
.task__result .link { margin-left: auto; color: inherit; }
.seal {
  --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3.5 9.5l3.5 3.5 7.5-8' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3C/svg%3E");
  width: 18px; height: 18px; flex: none; background: currentColor;
  -webkit-mask: var(--check) center / contain no-repeat; mask: var(--check) center / contain no-repeat;
}
.is-dismissed .seal { --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4.5 4.5l9 9M13.5 4.5l-9 9' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: no-preference) {
  .task__result:not([hidden]) { animation: rise 420ms var(--ease-out) both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Pregunta con citas */
.ask__q { padding: 20px 20px 0; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.015em; }
.ask__a { padding: 14px 20px 20px; font-size: 1rem; line-height: 1.7; color: var(--ink-2); max-width: 70ch; }
.ref {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px;
  vertical-align: 2px; font: 500 0.6875rem/1 var(--mono); color: var(--cite);
  border: 1px solid rgba(2, 132, 199, 0.35); border-radius: var(--radius); background: rgba(2, 132, 199, 0.06); text-decoration: none;
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out);
}
.ref:hover, .ref:focus-visible { background: #0369a1; color: #fff; }
.sources { border-top: 1px solid var(--rule); }
.sources li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 20px; border-bottom: 1px solid var(--rule); font-size: 0.875rem; color: var(--ink-3); transition: background-color 200ms var(--ease-out); }
.sources li:last-child { border-bottom: 0; }
.sources li .mono:last-child { font-size: 0.75rem; color: var(--muted); }
.sources__n { font-size: 0.75rem; color: var(--cite); }
.artifact--ask:has(.ref[data-ref="1"]:is(:hover, :focus-visible)) [data-source="1"],
.artifact--ask:has(.ref[data-ref="2"]:is(:hover, :focus-visible)) [data-source="2"],
.sources li:target { background: rgba(2, 132, 199, 0.07); }

/* Prioridades */
.brief__row { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px; border-bottom: 1px solid var(--rule); }
.brief__when { font-size: 0.8125rem; color: var(--ink-3); }
.brief__what { display: flex; flex-direction: column; gap: 2px; font-size: 0.875rem; color: var(--muted); }
.brief__what strong { font-size: 0.9375rem; color: var(--ink); font-weight: 600; }
.brief__row--urgent { background: linear-gradient(90deg, var(--brass-wash), transparent 70%); }
.brief__ask { padding: 14px 16px; font-size: 0.875rem; color: var(--ink-3); background: var(--canvas); }
.brief__ask .mono { color: var(--muted); margin-right: 6px; font-size: 0.75rem; }
.status { height: 20px; padding: 0 7px; display: inline-flex; align-items: center; border: 1px solid; border-radius: var(--radius); font: 600 0.6875rem/1 var(--sans); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.status--ok { background: var(--ok-bg); color: var(--ok-ink); border-color: var(--ok-line); }
.status--warn { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-line); }
.status--crit { background: var(--crit-bg); color: var(--crit-ink); border-color: var(--crit-line); }

/* Bilingüe */
.artifact--pair { display: grid; grid-template-columns: 1fr 1fr; }
.pair { padding: 20px; }
.pair + .pair { border-left: 1px solid var(--rule); }
.pair__tag { display: inline-block; font-size: 0.6875rem; color: var(--muted); margin-bottom: 10px; }
.pair p { font-size: 0.9375rem; line-height: 1.6; }

/* ---------- Banda de aislamiento (pizarra a sangre) ---------- */
.band, .close {
  border-top: 0;
  background: var(--ink); color: var(--on-dark);
  box-shadow: 0 0 0 100vmax var(--ink); clip-path: inset(0 -100vmax);
}
.band .entry__stamp::before, .close .entry__stamp::before { background: var(--brass); border-color: var(--brass); }
.band .entry__time, .close .entry__time { color: var(--on-dark); }
.band__body, .close__body { grid-column: 2 / span 2; }
.band__title, .close__title {
  font-weight: 800; font-size: clamp(2.25rem, 1.4rem + 2.6vw, 4rem);
  line-height: 1.02; letter-spacing: -0.038em; max-width: 16ch; text-wrap: balance;
}
.band__lead, .close__lead { margin-top: 24px; max-width: 56ch; font-size: 1.1875rem; color: var(--on-dark-2); text-wrap: pretty; }
.isolation { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 56px; }
.isolation__firm { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--on-dark-rule); border-radius: var(--radius-lg); }
.isolation__firm .mono { font-size: 0.75rem; color: var(--on-dark-2); margin-bottom: 4px; overflow-wrap: anywhere; }
.isolation__store { padding: 10px 12px; border: 1px solid var(--on-dark-rule); border-radius: var(--radius); font-size: 0.8125rem; color: var(--on-dark-2); }
.isolation__firm--yours { border-color: var(--brass); }
.isolation__firm--yours .mono { color: #fbbf24; }
.isolation__firm--yours .isolation__store { border-color: rgba(217, 119, 6, 0.55); color: var(--on-dark); }
.guarantees { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 40px; margin-top: 64px; }
.guarantees div { padding-top: 16px; border-top: 1px solid var(--on-dark-rule); }
.guarantees dt { font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.01em; }
.guarantees dd { margin-top: 8px; color: var(--on-dark-2); font-size: 0.9375rem; line-height: 1.6; }

/* ---------- Planes ---------- */
.plans { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--sheet); scrollbar-width: thin; }
.plans__table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 0.9375rem; }
.plans__table th, .plans__table td { padding: 14px 20px; text-align: left; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.plans__table tbody th { font-weight: 500; color: var(--ink-3); width: 34%; }
.plans__table thead th { vertical-align: bottom; padding-top: 24px; padding-bottom: 20px; }
.plans__table tfoot td { border-bottom: 0; padding-top: 20px; padding-bottom: 24px; }
.plans__table tfoot .btn { width: 100%; }
.plans__table .is-featured { background: var(--canvas); }
.plans__table thead .is-featured { box-shadow: inset 0 1px 0 var(--brass); }
.plans__name { display: block; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.plans__for { display: block; margin-top: 4px; font-size: 0.8125rem; font-weight: 400; color: var(--muted); }
.plans__flag { display: inline-block; margin-bottom: 8px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brass-deep); }
.yes, .no { display: inline-block; width: 18px; height: 18px; overflow: hidden; text-indent: 100%; white-space: nowrap; vertical-align: middle; background: center / contain no-repeat; }
.yes { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M3.5 9.5l3.5 3.5 7.5-8' fill='none' stroke='%230f172a' stroke-width='2'/%3E%3C/svg%3E"); }
.no { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9h8' stroke='%2394a3b8' stroke-width='1.5'/%3E%3C/svg%3E"); }
.plans__note { padding: 14px 20px; border-top: 1px solid var(--rule); font-size: 0.875rem; color: var(--ink-4); }

/* ---------- Preguntas ---------- */
.faq { border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 20px 0; cursor: pointer; list-style: none;
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 14px; height: 14px;
  background: linear-gradient(var(--ink-3), var(--ink-3)) center / 14px 1.5px no-repeat, linear-gradient(var(--ink-3), var(--ink-3)) center / 1.5px 14px no-repeat;
  transition: transform 240ms var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--ink-3); }
.faq details p { padding: 0 40px 24px 0; color: var(--ink-3); max-width: 64ch; }

/* ---------- Cierre ---------- */
.close { padding-bottom: calc(var(--entry-pad) + 24px); }
.close__title { max-width: 14ch; font-size: clamp(2.5rem, 1.4rem + 3.6vw, 5rem); }

/* ---------- Pie ---------- */
.footer { max-width: var(--page); margin: 0 auto; padding: 56px var(--gutter) 40px; }
.footer__inner { display: flex; flex-wrap: wrap; gap: 32px 56px; align-items: flex-start; padding-left: calc(var(--rail-x) + 24px); }
.footer__brand p { margin-top: 8px; max-width: 34ch; font-size: 0.875rem; color: var(--ink-4); }
.footer__links { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 0.875rem; }
.footer__links a { color: var(--ink-3); text-decoration: none; padding: 4px 0; }
.footer__links a:hover { color: var(--ink); text-decoration: underline; }
.lang--footer { margin-left: auto; }
.lang--footer a { font-family: var(--sans); font-size: 0.8125rem; padding: 6px 12px; }
.footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 40px; padding: 20px 0 0 calc(var(--rail-x) + 24px); border-top: 1px solid var(--rule); font-size: 0.8125rem; color: var(--muted); }

/* ---------- Tablet (768–1279) ---------- */
@media (max-width: 1279px) {
  :root { --gutter: 32px; --stamp: 128px; --col-gap: 40px; --entry-pad: 88px; }
  .entry, .band, .close { grid-template-columns: var(--stamp) minmax(0, 1fr); }
  .entry > .artifact, .entry > .plans, .entry > .faq,
  .entry--wide > .artifact, .entry--wide > .plans { grid-column: 2; margin-top: 40px; }
  .entry--wide .entry__text { grid-column: 2; display: block; }
  .entry--wide .entry__text p { margin-top: 18px; }
  .entry__text p { max-width: 60ch; }
  .band__body, .close__body { grid-column: 2; }
  .nav__links { display: none; }
}
@media (max-width: 1023px) {
  .guarantees { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Móvil (< 768): una columna, raíl fino a la izquierda ---------- */
@media (max-width: 767px) {
  :root { --gutter: 16px; --rail-x: 4px; --stamp: 0px; --entry-pad: 64px; --nav-h: 56px; }
  .nav__inner { gap: 12px; }
  .link-signin { display: none; }
  .brand__name { font-size: 1.0625rem; }
  .lang { margin-right: 0; }
  .nav__actions .btn--sm { padding: 0 12px; }
  .rail__head::after { display: none; }
  .caseline { margin-left: 20px; gap: 4px 16px; }
  .caseline__note { margin-left: 0; width: 100%; }
  .hero__body { margin-left: 20px; padding-top: 48px; }
  .hero__title { font-size: clamp(2.5rem, 11vw, 3.25rem); }
  .hero__actions .btn { flex: 1 1 100%; }
  .entry, .band, .close { display: block; padding-left: 20px; }
  .entry__stamp { flex-direction: row; align-items: center; gap: 12px; padding: 0 0 20px; }
  .entry__stamp::before { left: -20px; top: 5px; transform: translateX(calc(var(--rail-x) - 4.5px)); }
  .entry__day { margin-top: 0; }
  .entry > .artifact, .entry > .plans, .entry > .faq,
  .entry--wide > .artifact, .entry--wide > .plans { margin-top: 32px; }
  .entry__text p { font-size: 1rem; }
  .transcript li { grid-template-columns: 1fr; }
  .transcript__t { grid-row: auto; padding: 0 0 6px; }
  .wave { padding-inline: 12px; }
  .wave__pin--a { left: calc(12px + (100% - 24px) * 0.307); }
  .wave__pin--b { left: calc(12px + (100% - 24px) * 0.714); }
  .page { padding: 20px; font-size: 1rem; }
  .finding__src { margin-left: 0; width: 100%; }
  .brief__row { grid-template-columns: 1fr auto; }
  .brief__when { grid-column: 1 / -1; }
  .artifact--pair { grid-template-columns: 1fr; }
  .pair + .pair { border-left: 0; border-top: 1px solid var(--rule); }
  .isolation { grid-template-columns: 1fr; gap: 10px; margin-top: 40px; }
  .isolation__firm:not(.isolation__firm--yours) { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .isolation__firm:not(.isolation__firm--yours) .mono { width: 100%; }
  .guarantees { grid-template-columns: 1fr; gap: 24px; margin-top: 48px; }
  .faq details p { padding-right: 0; }
  /* Planes: la columna de filas queda fija y el borde derecho indica que la tabla se desplaza. */
  .plans__table { min-width: 600px; font-size: 0.875rem; }
  .plans__table th, .plans__table td { padding: 12px 14px; }
  .plans__table tbody th, .plans__table thead td, .plans__table tfoot td:first-child {
    position: sticky; left: 0; z-index: 1; width: 132px; min-width: 132px; background: var(--sheet);
    box-shadow: 1px 0 0 var(--rule);
  }
  .plans { background: linear-gradient(270deg, rgba(15, 23, 42, 0.1), transparent) right / 20px 100% no-repeat, var(--sheet); }
  .footer__inner, .footer__legal { padding-left: 20px; }
  .lang--footer { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}