/* ==========================================================================
   Accesibilidad Real — hoja de estilos compartida
   Sistema editorial: serif de autoridad (títulos) + sans humanista (cuerpo),
   sin dependencias de fuentes externas.

   Estrategia de color: RESTRINGIDA, no "todo teñido de un color". Una base
   neutra real (grafito frío, sin tinte rosado) para fondo/superficie/texto,
   y el oxblood como acento único y deliberado — solo en enlaces, foco,
   iconos y la banda del masthead. No se usa para teñir fondos ni el footer;
   si estuviera en todas partes dejaría de leerse como una decisión y
   volvería a ser "wallpaper". Ambas escalas validadas con el MCP de paleta
   accesible (WCAG 2.2 AA); ver manifiesto de contraste abajo.
   ========================================================================== */

/*
 * WCAG AA PAIRING MANIFEST — source: #33363b (grafito neutro)
 * Cada shade lista su valor claro y oscuro juntos; light-dark() abajo
 * elige uno u otro según color-scheme. Un valor, un solo lugar — si
 * cambia, se edita una vez, no dos.
 *
 * BODY TEXT (any font size, ≥4.5:1):
 *   shade-100 (#f3f4f5 claro · #121315 oscuro) → 900, 800, 700
 *   shade-300 (#c7cacf claro · #303237 oscuro) → 900, 800
 *   shade-600 (#818b96 claro · #5f646e oscuro) → 900
 *   shade-700 (#686e79 claro · #787f8a oscuro) → superficie, 100
 *   shade-800 (#383d43 claro · #b8bcc2 oscuro) → superficie, 100, 300
 *   shade-900 (#202225 claro · #e1e3e5 oscuro) → superficie, 100, 300, 600
 *
 * LARGE TEXT ONLY (≥24px or ≥18.67px bold, 3:1–4.5:1):
 *   These pairings are PROHIBITED for body text at any size.
 *   shade-100 → 600
 *   shade-300 → 700
 *   shade-600 → 100, 800, superficie
 *   shade-700 → 300, 900
 *   shade-800 → 600
 *   shade-900 → 700
 */
:root {
  /* light dark = por defecto manda el sistema, sin necesitar JS. El botón
     de la cabecera pisa esto con light|dark más abajo — con eso alcanza
     para que light-dark() ignore al sistema, en cualquier dirección. */
  color-scheme: light dark;

  --gray-100: light-dark(#f3f4f5, #121315); /* ✅ text→900·800·700  ⚠️ lg→600 */
  --gray-300: light-dark(#c7cacf, #303237); /* ✅ text→900·800  ⚠️ lg→700 */
  --gray-600: light-dark(#818b96, #5f646e); /* ✅ text→900  ⚠️ lg→100·800·superficie */
  --gray-700: light-dark(#686e79, #787f8a); /* ✅ text→superficie·100  ⚠️ lg→300·900 */
  --gray-800: light-dark(#383d43, #b8bcc2); /* ✅ text→superficie·100·300  ⚠️ lg→600 */
  --gray-900: light-dark(#202225, #e1e3e5); /* ✅ text→superficie·100·300·600  ⚠️ lg→700 */

  /* Alias semánticos (derivados del manifiesto de arriba, no lo sustituyen) */
  --color-page-bg: var(--gray-100);
  --color-surface: light-dark(#ffffff, #000000);
  --color-border: var(--gray-300);
  --color-border-soft: color-mix(in srgb, var(--gray-300) 55%, transparent);
  --color-text: var(--gray-900);
  --color-text-muted: var(--gray-700);
  --color-footer-bg: var(--gray-900);
  --color-footer-text: var(--gray-100);
  --color-footer-muted: var(--gray-300);
  --color-footer-link: var(--gray-300);
  --color-button-bg: var(--gray-900);
  --color-button-text: var(--gray-100);

  /* Acento oxblood — fuera de la escala neutra, validado aparte con
     check_contrast (no lo cubre validate_pairings por no ser un shade):
     claro:  #6b2438 sobre blanco = 10.85:1 · sobre gray-100 = 9.86:1
             gray-100 sobre #6b2438 = 9.86:1 · gray-300 sobre #6b2438 = 6.60:1
     oscuro: #d98aa0 sobre negro = 8.09:1 · sobre gray-100 = 7.16:1
             gray-100 sobre #d98aa0 = 7.16:1 · gray-300 sobre #d98aa0 = 4.94:1 */
  --color-accent: light-dark(#6b2438, #d98aa0);
  --color-link: var(--color-accent);
  --color-masthead-bg: var(--color-accent);
  --color-masthead-text: var(--gray-100);
  --color-masthead-text-muted: var(--gray-300);

  /* Acento de acierto ("esto sí cumple"): fuera de la escala, validado
     aparte con check_contrast.
     claro:  #256e40 sobre blanco = 6.21:1 · sobre gray-100 = 5.64:1
     oscuro: #7fbf8e sobre negro = 9.75:1 · sobre gray-100 = 8.63:1 */
  --color-success: light-dark(#256e40, #7fbf8e);
  --color-success-soft: light-dark(
    color-mix(in srgb, var(--color-success) 12%, var(--color-surface)),
    color-mix(in srgb, var(--color-success) 14%, var(--color-surface))
  );

  /* Tipografía: pareja de contraste deliberada — serif editorial para
     títulos (autoridad, "publicación técnica seria") + sans humanista de
     sistema para cuerpo e interfaz (máxima legibilidad, cero peticiones a
     terceros: el propio contenido del sitio exige no depender de nada
     externo). Georgia se diseñó específicamente para pantalla; los stacks
     de sistema usan la fuente nativa de cada SO, ya optimizada por Apple/
     Microsoft/Google para legibilidad en su propia plataforma. */
  --font-display: Georgia, "Iowan Old Style", "Palatino Linotype", "URW Palladio L", "Book Antiqua", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace;

  /* Espaciado */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Layout */
  --measure: 44rem;
  --container: 76rem;
  --frame: 82rem;
  --radius: 0;
  --radius-sm: 0;
  --border-w: 1px;

  /* Marco tipo "documento técnico": esquinas + retícula de papel
     cuadriculado, prestadas del lenguaje visual de un pliego de
     especificaciones/anexo legal — coherente con un sitio sobre
     cumplimiento normativo. Sombra siempre en tinta (--color-text),
     nunca del color del elemento: es un "golpe" duro, no un glow. */
  --grid-cell: 28px;
  --grid-line: color-mix(in srgb, var(--color-text) 7%, transparent);
  --shadow-punch: 4px 4px 0 0 var(--color-text);

  /* Movimiento: curvas de salida exponenciales, sin rebote */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 0.15s;
  --duration-base: 0.25s;
  --duration-slow: 0.5s;
}

/* ==========================================================================
   Selección manual de tema — el botón de la cabecera pisa color-scheme
   con light|dark (persistido en localStorage por js/theme-toggle.js).
   light-dark() de arriba resuelve según color-scheme, no según
   prefers-color-scheme: alcanza con esto para ganarle al sistema en
   cualquier dirección, sin redeclarar un solo valor de color.
   ========================================================================== */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* ==========================================================================
   Reset base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { min-width: 0; }
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* El fondo exterior (fuera del marco) queda en tinta, no en el bg de
     página: así el marco del documento se percibe como una hoja sobre
     una mesa, no como el borde de un widget. */
  background: var(--color-text);
}
body {
  position: relative;
  margin: 0 auto;
  max-width: var(--frame);
  background: var(--color-page-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.65;
  border-inline: var(--border-w) solid var(--color-text);
  /* Retícula de papel cuadriculado — motivo de "documento técnico",
     no decoración genérica: refuerza que el sitio trata de precisión
     normativa (WCAG, plazos, sanciones), no de estética "AI cream". */
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-cell) var(--grid-cell);
}
body::before, body::after,
.corner-bl, .corner-br {
  content: "+";
  position: absolute;
  width: 14px;
  height: 14px;
  font-size: 15px;
  line-height: 14px;
  text-align: center;
  color: var(--color-text);
  pointer-events: none;
  z-index: 5;
}
body::before { top: -7px; left: -7px; }
body::after  { top: -7px; right: -7px; }
.corner-bl   { bottom: -7px; left: -7px; }
.corner-br   { bottom: -7px; right: -7px; }

img, svg { max-width: 100%; display: block; }
[id] { scroll-margin-top: 1.5rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Tipografía
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-text);
  text-wrap: balance;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem); margin: 0 0 var(--space-4); }
h2 { font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2rem); margin: var(--space-8) 0 var(--space-4); }
h3 { font-size: 1.35rem; margin: var(--space-6) 0 var(--space-3); }
h4 { font-size: 1.05rem; font-family: var(--font-body); margin: var(--space-5) 0 var(--space-2); }

.prose h2 {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding-top: var(--space-6);
}
.prose h2::before {
  counter-increment: section;
  content: "§" counter(section, decimal-leading-zero);
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-accent);
}
.prose h2::after {
  content: "";
  flex: 1 1 auto;
  align-self: center;
  height: 1px;
  min-width: var(--space-5);
  background: var(--color-border);
}
.page { counter-reset: section; }
.sources-section h2::before,
.sources-section h2::after { content: none; }

p { margin: 0 0 var(--space-5); max-width: var(--measure); text-wrap: pretty; }
.prose ul, .prose ol { max-width: var(--measure); padding-left: var(--space-6); margin: 0 0 var(--space-5); }
.prose li { margin-bottom: var(--space-2); }
.prose li::marker { color: var(--color-accent); font-weight: 700; }
strong { font-weight: 700; }

a { color: var(--color-link); text-decoration-thickness: 1.5px; text-underline-offset: 0.15em; transition: color var(--duration-fast) var(--ease-out-quart); }
a:hover { color: var(--color-accent); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}
.prose a, .source-list a, .site-footer a { text-decoration: underline; }

code, pre, kbd { font-family: var(--font-mono); font-size: 0.85em; }
code, kbd {
  background: var(--gray-100);
  color: var(--color-text);
  padding: 0.1em 0.4em;
}
pre {
  background: var(--color-surface);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-4);
  overflow-x: auto;
  max-width: var(--measure);
}
pre code { background: none; padding: 0; }

/* Cita/analogía editorial: comilla decorativa de gran tamaño en vez de
   borde lateral de color (patrón evitado deliberadamente). */
blockquote.analogy {
  position: relative;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.4rem;
  line-height: 1.5;
  color: var(--color-text);
  margin: var(--space-8) 0;
  padding: var(--space-2) var(--space-5) var(--space-2) var(--space-8);
  max-width: var(--measure);
}
blockquote.analogy::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: -0.3rem;
  font-size: 3.5rem;
  line-height: 1;
  font-style: normal;
  color: color-mix(in srgb, var(--color-accent) 45%, transparent);
  font-family: var(--font-display);
}
blockquote.analogy footer {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-top: var(--space-3);
}

.lede {
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.55;
  max-width: var(--measure);
  color: var(--color-text-muted);
}

/* ==========================================================================
   Utilidades
   ========================================================================== */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.icon {
  width: 1.2em;
  height: 1.2em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ==========================================================================
   Saltar al contenido
   ========================================================================== */

.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -4rem;
  background: var(--color-text);
  color: var(--color-page-bg);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  z-index: 200;
  font-weight: 700;
  text-decoration: none;
  transition: top var(--duration-fast) var(--ease-out-quart);
}
.skip-link:focus-visible { top: var(--space-3); }

/* ==========================================================================
   Cabecera
   ========================================================================== */

.site-header {
  background: var(--color-page-bg);
  border-bottom: var(--border-w) solid var(--color-text);
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
}
.site-header__brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.375rem;
  color: var(--color-text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: color var(--duration-fast) var(--ease-out-quart);
}
.site-header__brand:hover, .site-header__brand:focus-visible { color: var(--color-accent); }
.site-header__mark { color: var(--color-accent); font-size: 1.6rem; line-height: 1; }
.site-header__meta-group {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.site-header__meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

.site-nav { display: none; }
.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  position: relative;
  display: inline-block;
  color: var(--color-text-muted);
  text-decoration: none;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: var(--space-2) var(--space-1);
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: var(--space-1);
  right: var(--space-1);
  bottom: 0;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-base) var(--ease-out-quart);
}
.site-nav a:hover { color: var(--color-accent); }
.site-nav a:hover::after { transform: scaleX(1); }
.site-nav a[aria-current="page"] { color: var(--color-accent); }
.site-nav a[aria-current="page"]::after { transform: scaleX(1); }

.menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.25rem;
  padding: 0 var(--space-3);
  border: var(--border-w) solid var(--color-text);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out-quart), border-color var(--duration-fast) var(--ease-out-quart);
}
.menu-trigger:hover { color: var(--color-accent); border-color: var(--color-accent); }

/* [popover] trae su propio position:fixed/inset:0/margin:auto de la UA
   stylesheet; lo pisamos entero para que se comporte como un panel que
   cuelga del borde superior en vez de una caja centrada en pantalla. */
.mobile-menu {
  position: fixed;
  inset: 0 0 auto 0;
  width: auto;
  height: auto;
  max-height: 100dvh;
  margin: 0;
  padding: var(--space-5);
  border: none;
  border-bottom: var(--border-w) solid var(--color-text);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-punch);
  overflow-y: auto;
}
.mobile-menu::backdrop {
  background: color-mix(in srgb, var(--color-text) 40%, transparent);
}
.mobile-menu__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.mobile-menu__title {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.mobile-menu__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: var(--border-w) solid var(--color-text);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out-quart), border-color var(--duration-fast) var(--ease-out-quart);
}
.mobile-menu__close:hover { color: var(--color-accent); border-color: var(--color-accent); }
.mobile-menu__nav ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--border-w) solid var(--grid-line);
}
.mobile-menu__nav a {
  display: block;
  padding: var(--space-4) var(--space-1);
  border-bottom: var(--border-w) solid var(--grid-line);
  color: var(--color-text-muted);
  text-decoration: none;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.mobile-menu__nav a:hover,
.mobile-menu__nav a:focus-visible { color: var(--color-accent); }
.mobile-menu__nav a[aria-current="page"] { color: var(--color-accent); }

@media (min-width: 700px) {
  .site-nav { display: block; }
  .menu-trigger { display: none; }
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: var(--border-w) solid var(--color-text);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out-quart), border-color var(--duration-fast) var(--ease-out-quart);
}
.theme-toggle:hover { color: var(--color-accent); border-color: var(--color-accent); }

/* Qué icono se ve depende del tema EFECTIVO: si no hay data-theme manual,
   lo decide prefers-color-scheme; si lo hay, lo decide el atributo. Así el
   icono nunca queda desincronizado del tema real, sin tocar JS. */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  .theme-toggle .icon-sun { display: block; }
  .theme-toggle .icon-moon { display: none; }
}
:root[data-theme="light"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ==========================================================================
   Contenido principal
   ========================================================================== */

main { display: block; }
.page { padding-block: 0 var(--space-9); }

/* Masthead: banda a sangre dentro del marco (no del viewport). Al ser
   .frame quien ahora acota el ancho real, basta con márgenes negativos
   que cancelan el padding del .container — más robusto que el viejo
   truco de pseudo-elemento a 100vw, y correctamente contenido dentro
   de las esquinas del documento. */
.page__intro {
  position: relative;
  margin-inline: calc(-1 * var(--space-5));
  padding: var(--space-8) var(--space-5) var(--space-7);
  margin-bottom: var(--space-8);
  background: var(--color-masthead-bg);
  border-bottom: var(--border-w) solid var(--color-text);
}
.page__intro-mark {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 2.75rem;
  line-height: 1;
  color: var(--color-masthead-text-muted);
  margin-bottom: var(--space-3);
}
.page__intro-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin: 0 0 var(--space-5);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--color-masthead-text-muted);
}
.page__intro-meta span:not(:last-child)::after { content: "/"; margin-left: var(--space-3); opacity: 0.6; }
.page__intro h1 { color: var(--color-masthead-text); max-width: 24ch; }
.page__intro .lede { color: var(--color-masthead-text-muted); }

@media (prefers-reduced-motion: no-preference) {
  .page__intro > * { animation: fade-up var(--duration-slow) var(--ease-out-quart) both; }
  .page__intro > *:nth-child(2) { animation-delay: 0.08s; }
  .page__intro > *:nth-child(3) { animation-delay: 0.16s; }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.prose { max-width: var(--measure); }
.prose--wide { max-width: none; }

/* Resumen destacado: caja de énfasis con fondo tintado en vez del doble
   borde original (patrón demasiado "formulario administrativo"). */
.summary-box {
  background: var(--gray-100);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-6);
  margin: 0 0 var(--space-7);
  font-size: 1.05rem;
  max-width: var(--measure);
}
.summary-box p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Callouts (avisos, advertencias, aciertos)
   ========================================================================== */

.callout {
  border: var(--border-w) solid var(--color-border);
  background: var(--color-surface);
  padding: var(--space-5);
  border-radius: var(--radius);
  margin: var(--space-6) 0;
  max-width: var(--measure);
}
.callout__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0 0 var(--space-3);
}
.callout__title .icon {
  width: 1.9rem;
  height: 1.9rem;
  padding: 0.4rem;
  flex-shrink: 0;
  stroke-width: 2;
}
.callout p:last-child { margin-bottom: 0; }

.callout--danger { background: color-mix(in srgb, var(--color-accent) 6%, var(--color-surface)); border-color: color-mix(in srgb, var(--color-accent) 30%, var(--color-border)); }
.callout--danger .callout__title { color: var(--color-accent); }
.callout--danger .icon { background: var(--color-accent); color: var(--gray-100); }

.callout--success { background: var(--color-success-soft); border-color: color-mix(in srgb, var(--color-success) 30%, var(--color-border)); }
.callout--success .callout__title { color: var(--color-success); }
.callout--success .icon { background: var(--color-success); color: var(--color-surface); }

.callout--note { background: var(--gray-100); border-color: var(--color-border); }
.callout--note .callout__title { color: var(--color-text-muted); }
.callout--note .icon { background: var(--color-text-muted); color: var(--gray-100); }

/* Sello/etiqueta de estado — plano, sin rotación ni gimmick de "sticker".
   gray-100 sobre el acento oxblood: validado con check_contrast arriba. */
.stamp {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-accent);
  color: var(--gray-100);
  border: var(--border-w) solid var(--color-text);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--space-2) var(--space-4);
}

.stat { display: inline-flex; flex-direction: column; gap: var(--space-1); margin: var(--space-2) var(--space-7) var(--space-2) 0; }
.stat__figure {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.9rem + 2.8vw, 3.75rem);
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1;
}
.stat__label { font-size: 0.95rem; color: var(--color-text-muted); max-width: 24ch; }
.stat-group { display: flex; flex-wrap: wrap; margin: var(--space-6) 0; }

/* ==========================================================================
   Lista de opciones (puertas de entrada, alternativas a comparar)
   Caja con borde duro completo + inversión de color al pasar el ratón
   (préstamo deliberado del lenguaje "ficha técnica" del resto del sitio:
   mismo tratamiento que .button/.recipe-like, no una tarjeta blanda con
   sombra e icono). Grid auto-fit: sin breakpoints manuales.
   ========================================================================== */

.choice-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0;
  list-style: none;
  margin: var(--space-6) 0 var(--space-7);
  padding: 0;
  border: var(--border-w) solid var(--color-text);
}
.choice {
  padding: var(--space-6);
  border-right: var(--border-w) solid var(--color-text);
  border-bottom: var(--border-w) solid var(--color-text);
  transition: background var(--duration-fast) var(--ease-out-quart),
              color var(--duration-fast) var(--ease-out-quart);
}
.choice:last-child { border-right: none; }
/* La inversión al pasar el ratón/foco solo aplica cuando la ficha es
   realmente una puerta de navegación (.choice__link presente); las
   fichas puramente comparativas (sin destino) quedan como caja fija,
   sin afirmar una interactividad que no existe. */
.choice:has(.choice__link):hover,
.choice:has(.choice__link):focus-within {
  background: var(--color-text);
  color: var(--color-page-bg);
}
.choice:has(.choice__link):hover .choice__title,
.choice:has(.choice__link):focus-within .choice__title,
.choice:has(.choice__link):hover .choice__body li::marker,
.choice:has(.choice__link):focus-within .choice__body li::marker,
.choice:has(.choice__link):hover .choice__link,
.choice:has(.choice__link):focus-within .choice__link { color: inherit; }
.choice__title { margin: 0 0 var(--space-3); font-size: 1.3rem; }
.choice__title--quote { font-style: italic; }
.choice__body p, .choice__body ul { max-width: none; }
.choice__body ul { padding-left: var(--space-6); margin: 0 0 var(--space-4); }
.choice__body li { margin-bottom: var(--space-2); }
.choice__body li::marker { color: var(--color-accent); font-weight: 700; }
.choice__body > :last-child { margin-bottom: 0; }
.choice__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-weight: 700;
  text-decoration: none;
  color: var(--color-link);
}
.choice__link::after { content: ""; position: absolute; inset: 0; }
.choice__link { position: static; }
.choice { position: relative; }
.choice__link span { display: inline-block; transition: transform var(--duration-base) var(--ease-out-quart); }
.choice:hover .choice__link span, .choice:focus-within .choice__link span { transform: translateX(4px); }
.choice__link:hover span, .choice__link:focus-visible span { transform: translateX(4px); }

/* ==========================================================================
   Índice del artículo (generado por js/toc.js en páginas largas)
   ========================================================================== */

.toc {
  counter-reset: toc;
  max-width: none;
  margin: 0 0 var(--space-8);
  padding-block: var(--space-6);
  border-top: var(--border-w) solid var(--color-border);
  border-bottom: var(--border-w) solid var(--color-border);
}
.toc__title {
  margin: 0 0 var(--space-4);
  font-family: var(--font-mono);
  font-weight: 700;
  font-style: normal;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 1;
  column-gap: var(--space-7);
}
@media (min-width: 700px) {
  .toc ol { columns: 2; }
}
.toc li { break-inside: avoid; margin-bottom: var(--space-2); counter-increment: toc; }
.toc a {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-1) 0;
  color: var(--color-text);
  font-weight: 600;
  text-decoration: none;
}
.toc a::before {
  content: "§" counter(toc, decimal-leading-zero);
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}
.toc a:hover, .toc a:focus-visible { color: var(--color-accent); text-decoration: underline; }

/* ==========================================================================
   Listas de pasos numerados
   ========================================================================== */

.steps {
  list-style: none;
  margin: var(--space-6) 0;
  padding: 0;
  counter-reset: step;
  display: grid;
  gap: var(--space-6);
  max-width: var(--measure);
}
.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: var(--space-8);
}
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gray-100);
  background: var(--color-accent);
  border: var(--border-w) solid var(--color-text);
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.steps h3 { margin-top: 0; }

/* Secuencia de pasos hecha con encabezados reales (h2), no <li>: cada paso
   trae contenido rico propio (h3, listas, callouts) y necesita ser
   navegable como sección, no como ítem de lista. */
.steps-wrap { counter-reset: pasonum -1; }
.step-heading {
  counter-increment: pasonum;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.step-heading::before {
  content: counter(pasonum, decimal-leading-zero);
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gray-100);
  background: var(--color-accent);
  border: var(--border-w) solid var(--color-text);
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
   Banderas rojas / verdes
   ========================================================================== */

.flags {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  margin: var(--space-6) 0;
  max-width: none;
}
@media (min-width: 700px) {
  .flags { grid-template-columns: repeat(2, 1fr); }
}
.flags > div {
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-5);
  background: var(--color-surface);
}
.flags h3 { margin-top: 0; display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); }
.flags ul { list-style: none; margin: 0; padding: 0; }
.flags li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: var(--border-w) solid var(--color-border-soft);
}
.flags li:last-child { border-bottom: none; }
.flags--bad { background: color-mix(in srgb, var(--color-accent) 4%, var(--color-surface)); }
.flags--bad h3 { color: var(--color-accent); }
.flags--bad .icon { color: var(--color-accent); }
.flags--good { background: var(--color-success-soft); }
.flags--good h3 { color: var(--color-success); }
.flags--good .icon { color: var(--color-success); }

/* ==========================================================================
   Tablas
   ========================================================================== */

.table-wrap {
  overflow-x: auto;
  margin: var(--space-6) 0;
  border: var(--border-w) solid var(--color-text);
  max-width: 100%;
}
table { width: 100%; border-collapse: collapse; font-size: 0.95rem; min-width: 30rem; }
caption {
  text-align: left;
  font-family: var(--font-display);
  font-weight: 700;
  padding: var(--space-3) var(--space-4);
  background: var(--gray-100);
  border-bottom: var(--border-w) solid var(--color-text);
  caption-side: top;
}
th, td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: var(--border-w) solid var(--color-border); vertical-align: top; }
thead th {
  background: var(--color-text);
  color: var(--gray-100);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:nth-child(even) { background: color-mix(in srgb, var(--color-border) 25%, transparent); }

/* ==========================================================================
   Preguntas frecuentes (details/summary nativo, sin JS)
   ========================================================================== */

.faq-group { margin: var(--space-7) 0; max-width: var(--measure); }
.faq-item { border-bottom: var(--border-w) solid var(--color-border); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: var(--space-4) var(--space-8) var(--space-4) var(--space-1);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  position: relative;
  transition: color var(--duration-fast) var(--ease-out-quart);
}
.faq-item summary:hover { color: var(--color-accent); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: var(--space-1);
  top: var(--space-4);
  font-size: 1.4rem;
  color: var(--color-accent);
  transition: transform var(--duration-base) var(--ease-out-quart);
  transform-origin: center;
}
.faq-item[open] summary::after { transform: rotate(135deg); }
.faq-item__answer { padding: 0 var(--space-1) var(--space-5); max-width: var(--measure); }
.faq-item__answer > *:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: no-preference) {
  .faq-item__answer { animation: fade-up var(--duration-base) var(--ease-out-quart) both; }
}

/* ==========================================================================
   Botones
   ========================================================================== */

.button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none !important;
  padding: var(--space-3) var(--space-5);
  border: var(--border-w) solid var(--color-text);
  background: var(--color-button-bg);
  color: var(--color-button-text) !important;
  min-height: 2.75rem;
  transition: transform var(--duration-fast) var(--ease-out-quart),
              box-shadow var(--duration-fast) var(--ease-out-quart),
              background var(--duration-fast) var(--ease-out-quart),
              color var(--duration-fast) var(--ease-out-quart);
}
.button:hover {
  background: var(--color-page-bg);
  color: var(--color-text) !important;
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-punch);
}
.button--ghost {
  background: transparent;
  color: var(--color-accent) !important;
  border-color: var(--color-accent);
}
.button--ghost:hover { background: var(--color-accent); color: var(--gray-100) !important; box-shadow: 4px 4px 0 0 var(--color-accent); }

.placeholder-box {
  border: 2px dashed var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-5);
  max-width: var(--measure);
  margin: var(--space-5) 0;
}
.placeholder-box__tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.15em 0.6em;
  margin-bottom: var(--space-3);
}
.button-like {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 700;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  border: 2px dashed var(--color-text-muted);
  color: var(--color-text-muted);
}

/* ==========================================================================
   Listas de fuentes
   ========================================================================== */

.source-list {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  max-width: var(--measure);
}
.source-list li { margin-bottom: var(--space-2); }
.source-list a { color: inherit; }
.sources-section {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: var(--border-w) solid var(--color-border);
}
.sources-section h2 { margin-top: 0; border-top: none; padding-top: 0; }

.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: var(--border-w) solid currentColor;
  border-radius: var(--radius-sm);
  padding: 0.15em 0.6em;
  margin: 0 0 var(--space-2);
}
.tag--bad { color: var(--color-accent); }
.tag--neutral { color: var(--color-text-muted); }

.sc-ref {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.8em;
  border: var(--border-w) solid var(--color-border);
  padding: 0.05em 0.45em;
  white-space: nowrap;
}

/* ==========================================================================
   Ilustración de widget (homepage)
   ========================================================================== */

.widget-demo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
  background: color-mix(in srgb, var(--color-accent) 5%, var(--color-surface));
  border: var(--border-w) solid color-mix(in srgb, var(--color-accent) 25%, var(--color-border));
  border-radius: var(--radius);
  padding: var(--space-6);
  margin: var(--space-6) 0;
  width: fit-content;
}
.widget-demo__figure { flex-shrink: 0; width: 6rem; height: 6rem; }
.widget-demo__button {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--gray-100);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--gray-900) 50%, transparent);
}
.widget-demo__button svg { width: 100%; height: 100%; }
.widget-demo__caption { flex: 1 1 16rem; margin: 0; max-width: 32rem; }

/* ==========================================================================
   Pie de página — siempre "invertido" respecto de la página
   ========================================================================== */

.site-footer {
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
  margin-top: var(--space-9);
  border-top: var(--border-w) solid var(--color-text);
}
.site-footer__inner {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1fr;
  padding-block: var(--space-8);
}
@media (min-width: 760px) {
  .site-footer__inner { grid-template-columns: minmax(16rem, 22rem) 1fr; }
}
.site-footer__brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  margin: 0 0 var(--space-3);
}
.site-footer__about p { max-width: 32rem; color: var(--color-footer-muted); }
.site-footer a { color: var(--color-footer-link); }
.site-footer a:focus-visible { outline-color: currentColor; }
.site-footer h2 {
  color: var(--color-footer-text);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 var(--space-4);
}
.site-footer__sitemap ol {
  list-style: none;
  columns: 1;
  margin: 0;
  padding-left: 0;
}
@media (min-width: 500px) {
  .site-footer__sitemap ol { columns: 2; column-gap: var(--space-6); }
}
.site-footer__sitemap li { margin-bottom: var(--space-2); break-inside: avoid; }
.site-footer__legal {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-4) var(--space-5) var(--space-6);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--color-footer-muted);
  border-top: var(--border-w) solid color-mix(in srgb, var(--color-footer-text) 20%, transparent);
}

/* ==========================================================================
   Impresión
   ========================================================================== */

@media print {
  .skip-link, .site-nav, .menu-trigger, .mobile-menu, .site-footer__sitemap, .widget-demo__stamp { display: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
  body { background: #fff; color: #000; }
}