/* ============================================================================
   TINTA · el sistema visual de la web pública
   ----------------------------------------------------------------------------
   Dos suelos y diez colores.

   La 1.0 ya tenía la idea buena —oscuro para la portada, papel para leer— pero
   la aplicaba con DOS negros distintos que no se hablaban: la portada iba en un
   negro cálido y el resto de superficies oscuras en un azul marino. Aquí hay
   uno. No es capricho: la paleta de materias está calculada contra ese negro
   exacto (contraste >= 7:1) y contra este papel (>= 4,5:1). Cambiar el suelo
   invalidaría los diez colores de golpe.

   El color de materia IDENTIFICA, nunca indica estado, y NUNCA va solo: siempre
   con su marca de texto (PEN, CIV, MER...). Quien no distingue tonos también
   entra aquí, y en una impresión en blanco y negro el color no existe.
   ========================================================================== */

:root {
  /* ── Los dos suelos ───────────────────────────────────────────────────── */
  --tinta:        #0c0b09;   /* portada e inmersivo */
  --tinta-honda:  #060504;
  --papel:        #f7f4ef;   /* leer */
  --papel-bruma:  #ebe7e0;
  --papel-hueso:  #fffdf9;

  /* ── Texto ────────────────────────────────────────────────────────────── */
  --texto:        #23211d;   /* sobre papel */
  --texto-tenue:  #5f594f;
  --texto-claro:  #ece6da;   /* sobre tinta */
  --texto-claro-tenue: #b6ad9c;

  /* ── El oro de la casa ────────────────────────────────────────────────── */
  --oro:       #c2a06a;
  --oro-vivo:  #ddbd82;
  --oro-hondo: #8d6e3d;

  /* ── Líneas ───────────────────────────────────────────────────────────── */
  --linea:       rgba(35, 33, 29, 0.14);
  --linea-suave: rgba(35, 33, 29, 0.07);
  --linea-clara: rgba(194, 160, 106, 0.20);
  --linea-clara-fuerte: rgba(194, 160, 106, 0.42);

  /* ── Estado. Nunca comparte sitio con el color de materia. ────────────── */
  --bien:  #2f7d4f;
  --ojo:   #9a6b12;
  --mal:   #b0342c;

  /* ── Tipografía ───────────────────────────────────────────────────────── */
  --serif:  "Newsreader", Georgia, "Times New Roman", serif;
  --sello:  "Cormorant Garamond", Georgia, serif;
  --palo:   "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cifra:  ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, monospace;

  /* Escala. Un solo salto (1.25) para que la jerarquía se lea sin pensarla. */
  --t-micro: 0.75rem;
  --t-menor: 0.8125rem;
  --t-pie:   0.9375rem;
  --t-base:  1.0625rem;
  --t-guia:  1.1875rem;
  --t-h3:    clamp(1.25rem, 1rem + 0.9vw, 1.5rem);
  --t-h2:    clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem);
  --t-h1:    clamp(2rem, 1.4rem + 2.8vw, 3.25rem);
  --t-porta: clamp(2.5rem, 1.6rem + 4.2vw, 4.5rem);

  /* ── Retícula ─────────────────────────────────────────────────────────── */
  --ancho:      1200px;
  --ancho-leer: 42rem;   /* ~68 caracteres con el cuerpo a 17px */
  --margen:     clamp(1.25rem, 5vw, 4rem);
  --r:          10px;
  --r-grande:   18px;

  /* ── Materia. Se sobreescribe por página con [data-materia]. ──────────── */
  --materia:      var(--oro);
  --materia-tinta: var(--oro-vivo);
}

/* ── Los diez colores ──────────────────────────────────────────────────────
   Dos valores por materia: el primero se lee sobre papel, el segundo sobre
   tinta. Salen de `herramientas/paleta-materias.py`, que se niega a emitirlos
   si alguno baja del contraste exigido. No se tocan a mano. */
[data-materia="penal"]       { --materia: #416ac8; --materia-tinta: #7f9ada; }
[data-materia="civil"]       { --materia: #a45b1b; --materia-tinta: #df8537; }
[data-materia="mercantil"]   { --materia: #2c7d54; --materia-tinta: #3dae75; }
[data-materia="laboral"]     { --materia: #297a78; --materia-tinta: #39aaa6; }
[data-materia="contencioso"] { --materia: #805ac1; --materia-tinta: #a88ed4; }
[data-materia="familia"]     { --materia: #c23d69; --materia-tinta: #d7819e; }
[data-materia="fiscal"]      { --materia: #4e7a2e; --materia-tinta: #6daa41; }
[data-materia="extranjeria"] { --materia: #2a7792; --materia-tinta: #45a6c9; }
[data-materia="sucesiones"]  { --materia: #ab4998; --materia-tinta: #ca84bc; }
[data-materia="inmobiliario"]{ --materia: #a6593f; --materia-tinta: #cb8b76; }

/* ── Base ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Nada empuja la página de lado. En móvil, una palabra larga dentro de una
   rejilla —«Contencioso-administrativo»— ensancha su columna por encima del
   ancho de la pantalla, porque los hijos de grid tienen `min-width: auto`. Se
   corta el problema en la raíz y se deja que las palabras largas se partan. */
html, body { overflow-x: clip; }
h1, h2, h3, p, li, td, th, summary { overflow-wrap: break-word; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--texto);
  font-family: var(--palo);
  font-size: var(--t-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.15;
             letter-spacing: -0.015em; text-wrap: balance; margin: 0; }
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 600; letter-spacing: -0.005em; }
p  { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--materia);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Quien navega con teclado tiene que poder saltarse el menú. */
.saltar {
  position: absolute; left: 1rem; top: -6rem; z-index: 99;
  background: var(--tinta); color: var(--oro-vivo);
  padding: 0.7rem 1.1rem; border-radius: var(--r);
  text-decoration: none; font-size: var(--t-pie); font-weight: 600;
  transition: top 0.15s ease;
}
.saltar:focus { top: 1rem; }

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