/* Hoja compartida por las tres páginas legales estáticas.
 *
 * Están FUERA del bundle de React a propósito (ver el docstring de cada HTML),
 * así que no pueden leer los tokens de `index.css` ni las tipografías
 * self-hosted, cuyos archivos llevan un hash por build. Los valores se repiten
 * acá con su nombre de origen al lado; si la paleta de la vitrina cambia, este
 * archivo hay que actualizarlo a mano. Es el costo de no depender del bundle.
 *
 * La familia es la del sistema y no Space Grotesk: referenciar la fuente del
 * build exige el nombre hasheado, y traerla de un CDN rompería la CSP
 * (`default-src 'self'`, ver deploy/README.md §5). */
:root {
  --tinta:   #0B0B0C;
  --grafito: #16171A;
  --humo:    #7D8087;
  --hueso:   #F2F1E4;
  --voltaje: #BCFF1E;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--tinta);
  color: var(--hueso);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}

.envoltorio {
  /* Ancho de lectura, no de layout: pasado el ~75ch el ojo pierde el renglón
     al volver. */
  max-width: 46rem;
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
}

header { border-bottom: 1px solid #2A2C31; padding-bottom: 2rem; margin-bottom: 2.5rem; }

.marca {
  display: inline-block;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--hueso);
  text-decoration: none;
  font-size: 1.125rem;
}
.marca:hover { color: var(--voltaje); }

h1 {
  font-size: clamp(1.75rem, 5vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin: 1.5rem 0 0.75rem;
}

h2 {
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  margin: 2.75rem 0 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid #2A2C31;
}

h3 { font-size: 1rem; margin: 1.75rem 0 0.5rem; }

/* La fecha de vigencia y los metadatos: son datos duros, van en la voz
   secundaria para que no compitan con el título. */
.vigencia { color: var(--humo); font-size: 0.875rem; margin: 0; }

p, li { color: #D8D7CC; }
ul, ol { padding-left: 1.25rem; }
li { margin-bottom: 0.5rem; }

a { color: var(--voltaje); text-underline-offset: 3px; }
a:hover { text-decoration: none; }

strong { color: var(--hueso); }

/* El bloque que hay que leer sí o sí: el mail de contacto, el plazo. Se
   distingue por superficie elevada, sin borde de color — el voltaje ya está
   gastado en los enlaces. */
.destacado {
  background: var(--grafito);
  border-left: 3px solid var(--voltaje);
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
}
.destacado p:first-child { margin-top: 0; }
.destacado p:last-child { margin-bottom: 0; }

table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.9375rem; }
th, td { text-align: left; padding: 0.625rem 0.75rem; border-bottom: 1px solid #2A2C31; vertical-align: top; }
th { color: var(--hueso); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.06em; }
td { color: #D8D7CC; }
/* Una tabla no puede desbordar la página: scrollea dentro de su propia caja. */
.tabla-scroll { overflow-x: auto; }

footer {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid #2A2C31;
  color: var(--humo);
  font-size: 0.875rem;
}
footer a { color: var(--humo); }
footer a:hover { color: var(--voltaje); }
.pie-links { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-bottom: 1rem; }