/* zelwex.com — raíz mínima y política de privacidad.
   Paleta y letra de DESIGN.md (Hueso). Sin JS, sin cookies, sin servicios de terceros. */

@font-face { font-family: 'Marcellus SC'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fuentes/marcellus-sc-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fuentes/spectral-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Spectral'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fuentes/spectral-latin-600-normal.woff2') format('woff2'); }

:root {
  --fondo: #F1EFEA;
  --carta: #FAF9F6;
  --regla: #D6D3CB;
  --celeste: #5B93CC;
  --celeste-texto: #2E5F8F;
  --tinta: #1E242B;
  --suave: #545049;
  --acento-texto: #7E5C1E;
  --f-display: 'Marcellus SC', Georgia, serif;
  --f-texto: 'Spectral', Georgia, serif;
  color-scheme: light;
}

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

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

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: 19px;
  line-height: 1.6;
  font-variant-numeric: lining-nums;
}

/* Firma: franja celeste-blanco-celeste arriba y abajo */
.franja {
  height: 18px;
  background: linear-gradient(to bottom,
    var(--celeste) 0 33.33%, #FFFFFF 33.33% 66.66%, var(--celeste) 66.66% 100%);
}

.pagina {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 16px 72px;
}

.marca {
  font-family: var(--f-display);
  font-size: 17px;
  letter-spacing: 0.16em;
  color: var(--tinta);
  text-decoration: none;
}

h1, h2, h3 { font-family: var(--f-display); font-weight: 400; line-height: 1.12; margin: 0; }
h1 { font-size: clamp(40px, 7vw, 64px); line-height: 1.02; margin-top: 48px; }
h2 { font-size: clamp(26px, 3.4vw, 32px); margin-top: 56px; }
h3 { font-family: var(--f-texto); font-weight: 600; font-size: 19px; margin-top: 28px; }

p, ul, ol, dl, table { margin: 16px 0 0; max-width: 62ch; }
ul, ol { padding-left: 1.2em; }
li + li { margin-top: 6px; }

.entrada { font-size: clamp(20px, 2.4vw, 23px); line-height: 1.45; color: var(--tinta); margin-top: 20px; }
.suave { color: var(--suave); }
.rotulo { font-family: var(--f-display); font-size: 15px; letter-spacing: 0.16em; color: var(--acento-texto); }

a { color: var(--celeste-texto); text-underline-offset: 3px; }
a:hover { color: var(--tinta); }
a:focus-visible { outline: 2px solid var(--celeste-texto); outline-offset: 3px; }

.ficha {
  background: var(--carta);
  border: 1px solid var(--regla);
  padding: 24px;
  margin-top: 24px;
}
.ficha > :first-child { margin-top: 0; }

.tabla { width: 100%; border-collapse: collapse; font-size: 17px; max-width: none; }
.tabla th, .tabla td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--regla); }
.tabla th { font-weight: 600; }
.tabla-envoltura { overflow-x: auto; margin-top: 16px; }

.indice { columns: 2; column-gap: 32px; font-size: 17px; }
@media (max-width: 560px) { .indice { columns: 1; } }

.pie {
  margin-top: 72px;
  padding-top: 20px;
  border-top: 1px solid var(--regla);
  font-size: 16px;
  color: var(--suave);
}
.pie a { color: var(--suave); }
.pie p { margin-top: 6px; }