/* =====================================================================
   ZENÓN PEREYRA · Sistema visual · v4 CÍVICO MODERNO
   ---------------------------------------------------------------------
   Dirección: municipal moderno, estilo gov nórdico.
   Fondo marfil + azul institucional sobrio + sans-serif limpia.
   No tech-y, no "editorial indie". Autoridad cívica, calidez oficial.
   El "33" es un sello heráldico chiquito, no una ventana tipográfica.
   ===================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Color — cívico moderno, muestreado de la familia del azul institucional
     y el marfil de papel oficial. Sin terracotta saturada (default AI). */
  --paper:      #F6F2E8;  /* marfil — fondo principal (papel oficial) */
  --paper-2:    #FBF8F0;  /* marfil más claro (cards, bloques elevados) */
  --paper-3:    #EFE9D9;  /* marfil más oscuro (banda alterna) */

  --ink:        #14202A;  /* texto principal sobre claro — tinta */
  --ink-2:      #2B3942;  /* texto secundario */
  --slate:      #5A6B75;  /* muted, captions */

  --civic:      #1B3A5C;  /* azul institucional primario — botones, links, acentos */
  --civic-dark: #102740;  /* hover, footer */
  --civic-soft: #E5ECF3;  /* fondo azul muy suave para bloques */

  --gold:       #B68A2E;  /* dorado sobrio del sello — uso MUY restringido */

  --brick:      #9B3A1F;  /* rojo ladrillo — solo alertas/avisos */
  --sage:       #4F6F4A;  /* verde de la reserva — sostenibilidad */

  /* Tipografía — institucional limpia. Sin Fraunces/Inter/Manrope (ubicuos).
     Familia: IBM Plex Sans (cuerpo, autoridad cívica tipo gov)
              + IBM Plex Serif para títulos (misma familia, autoridad editorial
                pero NO "wedding serif")
              + IBM Plex Mono solo para datos. */
  --font-body:    'IBM Plex Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-display: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;
  --font-mono:    'IBM Plex Mono', 'SF Mono', Menlo, monospace;

  /* Escala tipográfica · ratio 1.250 */
  --fs-cap: 0.78rem;
  --fs-sm:  0.88rem;
  --fs-body:1rem;
  --fs-lead:1.25rem;
  --fs-h4:  1.25rem;
  --fs-h3:  1.56rem;
  --fs-h2:  2rem;
  --fs-h1:  2.44rem;
  --fs-hero:3.05rem;
  --fs-mega:7.45rem;

  @media (min-width: 64rem) {
    --fs-cap: 0.83rem;
    --fs-sm:  0.94rem;
    --fs-body:1.0625rem;
    --fs-lead:1.375rem;
    --fs-h4:  1.5rem;
    --fs-h3:  1.95rem;
    --fs-h2:  2.44rem;
    --fs-h1:  3.05rem;
    --fs-hero:4.5rem;
  }

  /* Ritmo vertical */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
  --space-7: 8rem;
  --space-8: 5rem;

  /* Layout */
  --container-max: 76rem;
  --container-prose: 44rem;

  --ease-out: cubic-bezier(.2,.6,.2,1);

  /* Radios: muy sutiles, casi rectos, cívico */
  --radius: 2px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body { min-height: 100svh; background: var(--paper); }
img, picture, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; }
ul, ol { list-style: none; }
::selection { background: var(--civic); color: var(--paper); }

/* ---------- Layout utils ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media (min-width: 48rem) { .container { padding-inline: 2rem; } }
@media (min-width: 64rem) { .container { padding-inline: 2.5rem; } }

.prose { max-width: var(--container-prose); }

/* Eyebrow — sans uppercase con_kerning, cívico (no mono tech-y) */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-cap);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--civic);
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 1.75rem;
  height: 2px;
  background: var(--civic);
}
.eyebrow--center::before { display: none; }

/* Sello 33 — heráldico, chiquito, sutil. Aparece donde hace falta. */
.sello-33 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  width: 2.25rem;
  height: 2.25rem;
  font-size: 0.9rem;
  letter-spacing: 0;
  line-height: 1;
}

.section { padding-block: var(--space-6); }
@media (min-width: 64rem) { .section { padding-block: var(--space-7); } }

.section--paper  { background: var(--paper); }
.section--paper2 { background: var(--paper-2); }
.section--paper3 { background: var(--paper-3); }
.section--civic  { background: var(--civic); color: var(--paper); }
.section--civic-soft { background: var(--civic-soft); }

/* ---------- Tipografía ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.h-hero { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-hero); line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); }
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); }
.h4 { font-size: var(--fs-h4); }

.lead { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); }
.muted { color: var(--slate); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.italic { font-style: italic; }

/* Divisores sutiles — hairlines institucionales */
.rule { height: 1px; background: rgba(20,32,42,0.12); border: 0; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.75rem 1.5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  border-radius: var(--radius);
  transition: background 200ms var(--ease-out), color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.btn--primary { background: var(--civic); color: var(--paper); }
.btn--primary:hover { background: var(--civic-dark); }
.btn--ghost { background: transparent; color: var(--civic); border: 1.5px solid var(--civic); }
.btn--ghost:hover { background: var(--civic); color: var(--paper); }
.btn--on-dark { background: var(--paper); color: var(--civic); }
.btn--on-dark:hover { background: var(--paper-3); }
.btn--ghost-on-dark { background: transparent; color: var(--paper); border-color: var(--paper); }
.btn--ghost-on-dark:hover { background: var(--paper); color: var(--civic); }

/* ---------- Links ---------- */
.link {
  color: var(--civic);
  text-decoration: underline;
  text-decoration-color: rgba(27,58,92,0.35);
  text-underline-offset: 3px;
  transition: color 200ms var(--ease-out);
}
.link:hover { color: var(--civic-dark); text-decoration-color: var(--civic-dark); }

/* ---------- Accesibilidad ---------- */
:focus-visible {
  outline: 3px solid var(--civic);
  outline-offset: 2px;
}
.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  background: var(--civic);
  color: var(--paper);
  padding: 0.75rem 1.25rem;
  z-index: 100;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: top 200ms var(--ease-out);
}
.skip-link:focus { top: 1rem; }

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