/* =========================================================
   Base Maestra · base.css
   Fundamentos: escalas, reinicio, tipografía y utilidades.
   Orden de carga: fuentes.css → temas.css (generado) → base.css → componentes.css → piezas.css

   Escala z-index (única, documentada; nada fuera de ella):
     fondo vivo 0 · contenido 1 · capas vivas 2 · vidrio sobre capas 3 · navegación 50
     grano 55 · franja legal 60 · menú 70 · umbral 90 · «saltar al contenido» 100
   ========================================================= */

:root {
  /* Valores por defecto. La personalidad de cada marca los reemplaza desde temas.css
     (generado por sistema.py con proyecto.json → tipografia y personalidad). */
  --f-display: Georgia, "Times New Roman", serif;
  --f-texto: system-ui, -apple-system, "Segoe UI", sans-serif;
  --display-peso: 400; --tracking-display: -.025em; --escala: 1;
  --display-transform: none; --em-estilo: italic; --em-peso: inherit;
  --grano: .055;

  /* Retícula */
  --gutter: clamp(1rem, 4vw, 3.5rem);
  --max: 1560px;
  --lectura: 65ch;
  --nav-h: 68px;
  --legal-h: 0px;                       /* la publica nucleo.js si hay franja legal */

  /* Espacio: grupos apretados, separación generosa */
  --e-1: .25rem; --e-2: .5rem; --e-3: .75rem; --e-4: 1rem; --e-5: 1.5rem;
  --e-6: clamp(2rem, 3vw, 2.75rem); --e-7: clamp(3rem, 6vw, 5rem);
  --e-8: clamp(4.5rem, 10vw, 8rem); --e-9: clamp(6rem, 16vh, 12rem);
  --seccion-y: var(--e-9);

  /* Radios: la forma de firma (--r-forma) y las esquinas (--r-2, --r-boton) salen de la personalidad */
  --r-1: 4px;
  --r-2: clamp(1.1rem, 1.5vw, 1.75rem);
  --r-boton: 999px;
  --r-forma: 999px 999px var(--r-1) var(--r-1);
  --r-banda: 999px;

  /* Movimiento (ver 2 Sistema de diseño/4 Movimiento.md); la curva y el tempo salen de la personalidad */
  --ease: cubic-bezier(.16, 1, .3, 1);          /* salida exponencial: entradas y respuestas */
  --ease-io: cubic-bezier(.65, 0, .35, 1);      /* cambios en pantalla */
  --d-1: .18s;  --d-2: .35s;  --d-3: .7s;  --d-4: 1.2s;

  /* Vidrio: el desenfoque es global; el tinte lo trae cada tema (temas.css) */
  --g-blur: 26px;
}
@media (min-width: 900px) { :root { --g-blur: 28px; } }
@media (max-width: 899px) { :root { --g-blur: 18px; --nav-h: 60px; } }

/* Derivados: se recalculan donde vive un tema (body para el tema global, [data-local] para los fijos).
   Una custom property se resuelve donde se declara, no donde se usa. */
:root, body, [data-local] {
  --muted: color-mix(in oklab, var(--fg) var(--muted-p, 74%), var(--bg));
  --linea: color-mix(in oklab, var(--fg) 22%, transparent);
}
[data-local] { color: var(--fg); }

/* ---------- Reinicio ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; hanging-punctuation: first last; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
body {
  margin: 0; min-height: 100svh; overflow-x: clip;
  background: var(--bg); color: var(--fg);
  font-family: var(--f-texto); font-size: 1.0625rem; line-height: 1.6;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  /* texto y fondo cambian juntos (--bg y --fg están registradas con @property en temas.css) */
  transition: --bg .8s var(--ease-io), --fg .8s var(--ease-io), --acento .8s var(--ease-io);
}
body.bloqueado { overflow: hidden; }
img, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
video { object-fit: cover; }
p, figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
em { font-style: italic; }
ol, ul { padding: 0; margin: 0; }

/* ---------- Superficies del navegador (la señal más barata de que la página fue construida) ---------- */
::selection { background: var(--acento); color: var(--bg); }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 4px; border-radius: 2px; }
input, textarea { caret-color: var(--acento); }
html { scrollbar-color: color-mix(in oklab, var(--fg) 35%, transparent) transparent; scrollbar-width: thin; }

/* ---------- Tipografía ----------
   Una sola voz display por proyecto. La jerarquía se hace con peso, color y tamaño, en ese orden.
   .t-heroe solo existe una vez por página (el héroe) y nunca pasa de 2 líneas en escritorio. */
.t-heroe, .t-display, .t-titulo, .t-declaracion, .t-subtitulo, .t-cifra {
  font-family: var(--f-display); font-weight: var(--display-peso); font-optical-sizing: auto; text-transform: var(--display-transform);
}
.t-declaracion, .t-subtitulo { text-transform: none; }
.t-heroe      { font-size: calc(clamp(3.2rem, 11.5vw, 13rem) * var(--escala)); line-height: .86; letter-spacing: calc(var(--tracking-display) - .01em); }
.t-display    { font-size: calc(clamp(2.6rem, 7vw, 7.4rem) * var(--escala));   line-height: .94; letter-spacing: var(--tracking-display); }
.t-titulo     { font-size: calc(clamp(2.1rem, 4.6vw, 4.8rem) * var(--escala)); line-height: 1;   letter-spacing: calc(var(--tracking-display) + .005em); }
.t-declaracion{ font-size: clamp(1.8rem, 3.9vw, 4.3rem); line-height: 1.1; letter-spacing: calc(var(--tracking-display) + .01em); }
.t-subtitulo  { font-size: clamp(1.45rem, 2.4vw, 2.4rem); line-height: 1.15; letter-spacing: calc(var(--tracking-display) + .015em); }
.t-cifra      { font-size: calc(clamp(3.4rem, 8vw, 8.5rem) * var(--escala)); line-height: .85; letter-spacing: calc(var(--tracking-display) - .015em); font-variant-numeric: lining-nums tabular-nums; }
.t-entrada    { font-size: clamp(1.05rem, 1.3vw, 1.3rem); line-height: 1.5; color: var(--muted); max-width: 40ch; }
.t-nota       { font-size: .875rem; line-height: 1.5; color: var(--muted); }
/* Rótulo: mayúsculas con tracking. Uso restringido (marca en la nav, etiquetas de datos, pie).
   Nunca como «eyebrow» sobre titulares más de 1 vez cada 3 secciones. */
.t-rotulo     { font-family: var(--f-texto); font-size: .75rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; line-height: 1.3; }
.t-heroe em, .t-display em, .t-titulo em, .t-declaracion em, .t-subtitulo em { color: var(--acento); }
em, .enfasis { font-style: var(--em-estilo); font-weight: var(--em-peso); }
.numeros { font-variant-numeric: lining-nums tabular-nums; }

/* ---------- Utilidades ---------- */
.marco { width: min(100% - var(--gutter) * 2, var(--max)); margin-inline: auto; }
.lectura { max-width: var(--lectura); }
.oculto-visual {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.saltar {
  position: fixed; left: 1rem; top: 1rem; z-index: 100; padding: .7rem 1rem;
  background: var(--fg); color: var(--bg); transform: translateY(-160%); transition: transform .3s var(--ease);
}
.saltar:focus { transform: none; }
.seccion { position: relative; padding: var(--seccion-y) 0; }
.linea-split { overflow: clip; padding-bottom: .06em; margin-bottom: -.06em; }   /* máscara de SplitText */
[data-opcional].falta { display: none; }                                        /* recursos del cliente que aún no llegan */

/* Sin JS: todo visible, sin umbral animado */
.sin-js .umbral { display: none; }

/* Movimiento reducido: sin loops ni pines; se muestran los pósters */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}