/* ============================================================
   FUTAGO — Sistema de tokens v2
   Fase 0 · 2026-08-05
   Todo valor del sitio sale de aquí. Cero hardcodeo aguas abajo.
   El motivo de marca (el gemelo) vive en el sistema, no en una
   sección: la paleta es un par, y el primitivo .twin lo estructura.
   ============================================================ */

/* ---------- 1 · Fuentes self-hosted (ITF Free Font License) ---------- */

@font-face {
  font-family: 'Zodiak';
  src: url('fonts/Zodiak-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('fonts/Switzer-Variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('fonts/Switzer-VariableItalic.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {

  /* ---------- 2 · Color ----------
     La paleta es un par, no una lista. Mitad clara = el espacio que
     se construye (yeso, resina, caliza). Mitad oscura = su lectura
     (grafito, aluminio). El ocre es materia, no oro: máx 5–12% del
     cuadro. Contraste medido, no estimado — cifras al final de línea. */

  --ink:        #0B0C0E;   /* fondo mitad oscura                        */
  --graphite:   #191C1F;   /* superficie sobre ink                      */
  --seam:       #2A2E33;   /* la costura: línea entre las dos mitades   */
  --satin:      #8A9099;   /* aluminio satinado · texto sec. sobre ink  6.08:1 */
  --paper:      #F4F2ED;   /* fondo mitad clara · texto sobre ink      17.49:1 */
  --plaster:    #E4DFD5;   /* yeso perla · superficie sobre paper       */
  --stone:      #5C6167;   /* texto secundario sobre paper              5.59:1 */

  --ochre:      #B4762C;   /* acento canónico · sobre ink               5.19:1 */
  --ochre-deep: #8A5518;   /* mismo acento, sobre paper                 5.53:1 */

  --line-dark:  rgba(244, 242, 237, .16);
  --line-light: rgba(11, 12, 14, .14);

  /* Roles semánticos — se usan estos, no los crudos de arriba.
     Cada mitad redefine el bloque completo (ver §8). */
  --bg:         var(--ink);
  --surface:    var(--graphite);
  --fg:         var(--paper);
  --fg-muted:   var(--satin);
  --accent:     var(--ochre);
  --hairline:   var(--line-dark);

  /* ---------- 3 · Tipografía ----------
     Dos familias, techo de web-punch. Zodiak = voz (antigua moderna,
     registro de monografía de arquitectura). Switzer = precisión
     (grotesca suiza, el polo técnico). Prohibidas y quemadas en el
     portafolio: Inter, DM Sans, Playfair, Fraunces, Cormorant,
     Petrona, Courier Prime, Public Sans, Instrument Serif. */

  --font-display: 'Zodiak', Georgia, 'Times New Roman', serif;
  --font-body:    'Switzer', system-ui, -apple-system, sans-serif;

  /* 7 pasos. Fluidos de 390px a 1440px. */
  --t-d1: clamp(2.75rem, 1.20rem + 6.36vw, 6.50rem);  /*  44 → 104  hero        */
  --t-d2: clamp(2.00rem, 1.24rem + 3.12vw, 4.00rem);  /*  32 →  64  sección     */
  --t-d3: clamp(1.50rem, 1.21rem + 1.17vw, 2.25rem);  /*  24 →  36  subsección  */
  --t-b1: clamp(1.125rem, 1.05rem + 0.30vw, 1.3125rem);/* 18 →  21  entrada     */
  --t-b2: clamp(1.00rem, 0.97rem + 0.12vw, 1.0625rem); /* 16 →  17  cuerpo      */
  --t-b3: 0.875rem;                                    /*      14  nota         */
  --t-b4: 0.75rem;                                     /*      12  etiqueta/dato*/

  --lh-tight:   0.96;   /* d1        */
  --lh-display: 1.06;   /* d2 · d3   */
  --lh-lead:    1.45;   /* b1        */
  --lh-body:    1.58;   /* b2 · b3   */
  --lh-label:   1.20;   /* b4        */

  --tr-d1:    -0.025em;   /* piso de calidad: nunca más apretado que -0.04em */
  --tr-d2:    -0.018em;
  --tr-d3:    -0.012em;
  --tr-body:   0;
  --tr-label:  0.14em;

  --wt-display: 400;   /* Zodiak carga peso por sí sola; 700 la vuelve editorial genérica */
  --wt-body:    400;
  --wt-medium:  500;
  --wt-bold:    600;

  --measure:    68ch;  /* medida de lectura · piso 45–75ch */
  --measure-sm: 48ch;

  /* ---------- 4 · Ritmo vertical y espacio ---------- */

  --s-1:  0.25rem;   /*   4 */
  --s-2:  0.50rem;   /*   8 */
  --s-3:  0.75rem;   /*  12 */
  --s-4:  1.00rem;   /*  16 */
  --s-5:  1.50rem;   /*  24 */
  --s-6:  2.00rem;   /*  32 */
  --s-7:  3.00rem;   /*  48 */
  --s-8:  4.00rem;   /*  64 */
  --s-9:  6.00rem;   /*  96 */
  --s-10: 8.00rem;   /* 128 */
  --s-11: 12.0rem;   /* 192 */

  /* La densidad es una decisión, no un default: tres ritmos de
     sección distintos. Nunca el mismo padding en todas. */
  --pad-dense:  clamp(3rem, 6vw, 5rem);
  --pad-normal: clamp(4.5rem, 9vw, 8rem);
  --pad-air:    clamp(6rem, 13vw, 12rem);

  /* ---------- 5 · Retícula ---------- */

  --grid-max:    1440px;
  --grid-cols:   4;                          /* móvil primero */
  --grid-gutter: clamp(1rem, 3vw, 1.5rem);
  --grid-pad:    clamp(1.25rem, 5vw, 6rem);

  /* ---------- 6 · Forma ----------
     Lock afilado/editorial. Sin pills, sin cards redondeadas
     (Continuity Bible). */

  --r-0: 0px;
  --r-1: 2px;
  --r-2: 4px;
  --border: 1px;

  /* ---------- 7 · Motion ----------
     Un vocabulario. Pesado y viscoso, de baja amplitud
     (Continuity Bible §6). Prohibido: bounce, rebote elástico. */

  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-in:   cubic-bezier(.55, .06, .68, .19);
  --d-state:   160ms;   /* foco, activo                       */
  --d-hover:   240ms;   /* cambio de estilo completo           */
  --d-enter:   420ms;   /* entrada de sección                  */
  --d-sig:     900ms;   /* el momento firma, uno solo por página */

  --z-canvas: 0;
  --z-page:   10;
  --z-nav:    100;
  --z-over:   1000;
}

/* ---------- 8 · Las dos mitades ----------
   El gemelo como primitivo: cualquier bloque declara su mitad y
   todo el sistema semántico se voltea. No es un tema claro/oscuro:
   son las dos caras del mismo cuadro y coexisten en pantalla. */

/* Declarar una mitad la pinta. Sin esto los tokens se voltean pero
   nada los aplica, y el motivo de marca desaparece en silencio. */
[data-half] { background: var(--bg); color: var(--fg); }

[data-half="light"] {
  --bg:       var(--paper);
  --surface:  var(--plaster);
  --fg:       var(--ink);
  --fg-muted: var(--stone);
  --accent:   var(--ochre-deep);
  --hairline: var(--line-light);
}
[data-half="dark"] {
  --bg:       var(--ink);
  --surface:  var(--graphite);
  --fg:       var(--paper);
  --fg-muted: var(--satin);
  --accent:   var(--ochre);
  --hairline: var(--line-dark);
}

@media (min-width: 768px)  { :root { --grid-cols: 8;  } }
@media (min-width: 1080px) { :root { --grid-cols: 12; } }

/* ---------- 9 · Base ---------- */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--t-b2);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  font-weight: var(--wt-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--wt-display);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--t-d1); line-height: var(--lh-tight);   letter-spacing: var(--tr-d1); }
h2 { font-size: var(--t-d2); line-height: var(--lh-display); letter-spacing: var(--tr-d2); }
h3 { font-size: var(--t-d3); line-height: var(--lh-display); letter-spacing: var(--tr-d3); }

p  { margin: 0; max-width: var(--measure); text-wrap: pretty; }

.lead  { font-size: var(--t-b1); line-height: var(--lh-lead); color: var(--fg); }
.note  { font-size: var(--t-b3); color: var(--fg-muted); }
.label {
  font-family: var(--font-body);
  font-size: var(--t-b4);
  font-weight: var(--wt-medium);
  line-height: var(--lh-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.data {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'ss01' 1;
}

/* ---------- 10 · Estados ----------
   Regla dura: hover cambia el estilo completo (fondo, borde, color
   de etiqueta), nunca solo un lift. Un lift solo = plantilla. */

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 48px;                 /* piso de target táctil: 44px */
  padding: var(--s-3) var(--s-5);
  border: var(--border) solid var(--accent);
  border-radius: var(--r-1);
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-weight: var(--wt-medium);
  cursor: pointer;
  transition:
    background-color var(--d-hover) var(--ease),
    color            var(--d-hover) var(--ease),
    border-color     var(--d-hover) var(--ease);
}
.btn:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.btn:active { transform: translateY(1px); transition-duration: var(--d-state); }

.btn--ghost { border-color: var(--hairline); color: var(--fg-muted); }
.btn--ghost:hover { background: transparent; border-color: var(--fg); color: var(--fg); }

/* ---------- 11 · Layout ---------- */

.wrap {
  width: 100%;
  max-width: var(--grid-max);
  margin-inline: auto;
  padding-inline: var(--grid-pad);
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  gap: var(--grid-gutter);
}

section { background: var(--bg); color: var(--fg); }

/* El primitivo del gemelo. En móvil apila y la costura se vuelve
   horizontal: se re-rankea, no se encoge. */
.twin {
  display: grid;
  grid-template-columns: 1fr;
  border-block: var(--border) solid var(--seam);
}
.twin > * { padding: var(--pad-dense) var(--grid-pad); }
.twin > * + * { border-top: var(--border) solid var(--seam); }

@media (min-width: 900px) {
  .twin { grid-template-columns: 1fr 1fr; }
  .twin > * + * { border-top: 0; border-left: var(--border) solid var(--seam); }
}

/* ---------- 12 · Movimiento reducido ---------- */

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