/* ============================================================================
   TOKENS.CSS — Sistema de diseño · Aposento Alto Espíritu Santo y Fuego
   Dirección visual: paleta del logotipo — azul real, dorado metálico, naranja llama y blanco.
   Estilo editorial: barra lateral fija, bordes de tinta, sombras duras,
   tipografía grande y asimétrica. 
   ============================================================================ */

:root {
  /* ---- Color ---- */
  --paper:      #F5F8FE;  /* fondo principal (blanco con matiz azul) */
  --paper-deep: #E4EBF8;  /* superficies alternas */
  --white:      #FFFFFF;  /* tarjetas y paneles */
  --ink:        #0B1740;  /* texto y bordes (azul noche) */
  --ink-soft:   #36426B;  /* texto secundario (>7:1 sobre papel) */
  --char:       #0B1B56;  /* superficies oscuras (azul real profundo) */
  --char-2:     #14297A;  /* oscuro secundario */
  --ember:      #1D3E9C;  /* azul real del logotipo: fondos de color (blanco encima 9:1) */
  --ember-ink:  #17348A;  /* azul real para TEXTO sobre claro */
  --flame:      #F47B20;  /* naranja llama: acento sobre oscuro */
  --saffron:    #F0D77B;  /* dorado claro: destellos y texto sobre oscuro */
  --gold:       #D4AF37;  /* dorado metálico del logotipo: botones primarios */
  --gold-hover: #E3C15A;
  --flame-hot:  #E8481E;  /* rojo-naranja del degradado de la llama */
  --line:       rgba(11, 23, 64, 0.16);
  --field-border: #4A5580;
  --focus-ring: #1D3E9C;
  --ok:   #2F6B43;
  --warn: #9A5A12;
  --err:  #A3372B;
  --err-bg: rgba(163, 55, 43, 0.08);

  /* ---- Tipografía ---- */
  --font-display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --font-script:  "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-body:    "DM Sans", -apple-system, "Segoe UI", system-ui, sans-serif;

  /* ---- Escala ---- */
  --step-1: clamp(3rem, 1.2rem + 7.4vw, 7.4rem);
  --step-2: clamp(2.1rem, 1.3rem + 3vw, 3.9rem);
  --step-3: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
  --step-0: 1.05rem;

  /* ---- 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: 4.5rem;
  --section-y: clamp(3.5rem, 2.4rem + 4.5vw, 6.5rem);

  /* ---- Layout ---- */
  --rail-w: 264px;           /* ancho de la barra lateral (escritorio) */
  --radius-s: 4px;
  --radius-m: 6px;
  --radius-l: 10px;
  --max-w: 1120px;
  --header-h: 0px;           /* en escritorio no hay barra superior */
  --tap: 44px;

  /* ---- Elevación: sombras DURAS de tinta (sin difuminar) ---- */
  --shadow-soft: 4px 4px 0 var(--ink);
  --shadow-lift: 8px 8px 0 var(--ink);
  --shadow-flame: 4px 4px 0 var(--flame);

  /* ---- Movimiento ---- */
  --ease-out: cubic-bezier(0.2, 0.9, 0.25, 1);
  --dur-1: 140ms;
  --dur-2: 240ms;
  --dur-3: 700ms;
}

@media (max-width: 1080px) {
  :root { --rail-w: 0px; --header-h: 64px; }
}

/* ---- Reset base ---- */
* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  padding-left: var(--rail-w);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  margin: 0 0 0.5em 0;
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

p { line-height: 1.65; margin: 0 0 1em 0; text-wrap: pretty; }

/* Etiqueta de sección: mayúsculas pequeñas con una línea de brasa delante */
.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ember-ink);
  margin: 0 0 0.7rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.eyebrow::before {
  content: "";
  width: 1.8rem; height: 3px; flex-shrink: 0;
  background: currentColor;
}

/* Voz "de firma": serif cursiva */
.script {
  font-family: var(--font-script);
  font-style: italic;
  font-weight: 400;
}

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 2px;
}
.site-header, .section-dark, .site-footer, .detail-hero { --focus-ring: var(--saffron); }

.wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, 2.25rem);
}
.wrap-prose {
  max-width: min(100%, calc(72ch + 4.5rem));
  margin-left: max(0px, calc((100% - var(--max-w)) / 2));
  margin-right: auto;
  padding: 0 clamp(1.25rem, 3vw, 2.25rem);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.skip-link:focus, .skip-link:focus-visible {
  position: fixed; z-index: 1000;
  top: 0.75rem; left: 0.75rem;
  width: auto; height: auto; overflow: visible; clip: auto;
  padding: 0.7rem 1.1rem; border-radius: var(--radius-s);
  background: var(--saffron); color: var(--ink);
  border: 2px solid var(--ink);
  font-weight: 700; font-size: 0.9rem;
  box-shadow: var(--shadow-soft);
}