/* ============================================================================
   BASE — reset, tipografía, primitivas de disposición y utilidades.
   Consume únicamente tokens de tokens.css.
   ========================================================================= */

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

html {
  background: var(--color-lienzo);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  /* Sin overflow-x:hidden. Ocultar el desbordamiento no lo arregla: corta el
     contenido y deja a quien navega sin manera de llegar a él. Lo ancho se
     desplaza dentro de su propio contenedor (.desliza-x). */
  background: var(--color-lienzo);
  color: var(--color-texto);
  font-family: var(--fuente-texto);
  font-size: var(--txt-300);
  line-height: var(--alto-texto);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--fuente-titulo);
  color: var(--color-texto-fuerte);
  line-height: var(--alto-titulo);
  letter-spacing: var(--espaciado-letra-titulo);
  font-weight: var(--peso-fuerte);
  text-wrap: balance;
}

h1 { font-size: var(--txt-800); }
h2 { font-size: var(--txt-700); }
h3 { font-size: var(--txt-500); line-height: var(--alto-subtitulo); }
h4 { font-size: var(--txt-400); line-height: var(--alto-subtitulo); }

p { margin: 0; }
p + p { margin-top: var(--esp-4); }

ul, ol { margin: 0; padding: 0; list-style: none; }

a {
  color: var(--color-acento-claro);
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset: 0.18em;
}
a:hover { text-decoration-color: currentColor; }

button { font: inherit; color: inherit; cursor: pointer; }

img, svg, video, iframe { display: block; max-width: 100%; }
img, video { height: auto; }

table { border-collapse: collapse; width: 100%; }

strong, b { font-weight: var(--peso-semi); color: var(--color-texto-fuerte); }

::selection {
  background: var(--color-acento);
  color: var(--color-texto-sobre-acento);
}

/* El atributo hidden tiene que ganar SIEMPRE.
   La regla del navegador para [hidden] es de especificidad 0-1-0, así que
   cualquier clase que fije display (display:flex, display:grid…) la anula en
   silencio y el elemento se ve aunque esté marcado como oculto. Pasó con la
   caja de «precio vencido»: se mostraba al mismo tiempo que la cuenta atrás. */
[hidden] { display: none !important; }

/* --- Foco visible: nunca outline:none a secas -------------------------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--color-foco);
  outline-offset: 3px;
  border-radius: var(--radio-xs);
}

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

/* ============================================================================
   PRIMITIVAS DE DISPOSICIÓN
   ========================================================================= */

.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.seccion {
  position: relative;
  z-index: var(--plano-contenido);
  padding-block: var(--ritmo-seccion);
  scroll-margin-top: calc(var(--alto-barra) + var(--esp-4));
}

/* El espacio agrupa: una pila reparte separación desde el contenedor en vez
   de acumular márgenes elemento a elemento, que se suman o se anulan sin
   que se vea. */
.pila      { display: flex; flex-direction: column; gap: var(--esp-4); }
.pila-2    { display: flex; flex-direction: column; gap: var(--esp-2); }
.pila-6    { display: flex; flex-direction: column; gap: var(--esp-6); }
.pila-8    { display: flex; flex-direction: column; gap: var(--esp-8); }
.pila-12   { display: flex; flex-direction: column; gap: var(--esp-12); }

.fila { display: flex; align-items: center; gap: var(--esp-3); flex-wrap: wrap; }

/* Rejilla automática: nunca fuerza una columna más estrecha que su contenido
   mínimo, que es la causa habitual del desbordamiento horizontal. */
.rejilla {
  display: grid;
  gap: var(--esp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}

/* Un contenedor de una rejilla o flex debe poder encogerse por debajo de su
   contenido; sin esto, una tabla o un texto largo empuja toda la página. */
.rejilla > *,
.fila > * { min-width: 0; }

/* Lo ancho se desplaza dentro de su propia caja, no en la página. */
.desliza-x {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--color-borde-fuerte) transparent;
}
.desliza-x::-webkit-scrollbar { height: 6px; }
.desliza-x::-webkit-scrollbar-thumb {
  background: var(--color-borde-fuerte);
  border-radius: var(--radio-pildora);
}

.medida       { max-width: var(--medida-lectura); }
.medida-corta { max-width: var(--medida-corta); }
.centrado     { margin-inline: auto; text-align: center; }

/* ============================================================================
   UTILIDADES
   ========================================================================= */

/* Solo para lectores de pantalla. */
.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Salto al contenido: primera parada del tabulador. */
.salto-contenido {
  position: absolute;
  left: var(--esp-4);
  top: var(--esp-4);
  z-index: var(--plano-capa);
  padding: var(--esp-3) var(--esp-5);
  border-radius: var(--radio-sm);
  background: var(--color-acento);
  color: var(--color-texto-sobre-acento);
  font-weight: var(--peso-semi);
  transform: translateY(calc(-100% - var(--esp-8)));
  transition: transform var(--dur-rapida) var(--curva-suave);
}
.salto-contenido:focus-visible { transform: translateY(0); }

/* Cifras en columna: sin figuras tabulares una tabla de números no se puede
   comparar de un vistazo. */
.cifra {
  font-family: var(--fuente-dato);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.dato {
  font-family: var(--fuente-dato);
  font-size: var(--txt-100);
  letter-spacing: var(--espaciado-letra-dato);
  text-transform: uppercase;
  color: var(--color-texto-dato);
}

.texto-debil   { color: var(--color-texto-debil); }
.texto-fuerte  { color: var(--color-texto-fuerte); }
.texto-acento2 { color: var(--color-acento-2-texto); }

/* ============================================================================
   FONDO — halos, rejilla y grano. Decorativo y sin capturar el puntero.
   ========================================================================= */
.fondo {
  position: fixed;
  inset: 0;
  z-index: var(--plano-fondo);
  pointer-events: none;
  background:
    radial-gradient(70rem 39rem at 82% -8%, var(--halo-1), transparent 60%),
    radial-gradient(56rem 35rem at 8% 18%, var(--halo-2), transparent 60%),
    var(--color-lienzo);
}
.fondo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--rejilla) var(--trazo), transparent var(--trazo)),
    linear-gradient(90deg, var(--rejilla) var(--trazo), transparent var(--trazo));
  background-size: 4.5rem 4.5rem;
  mask-image: radial-gradient(circle at 50% 22%, #000, transparent 78%);
  -webkit-mask-image: radial-gradient(circle at 50% 22%, #000, transparent 78%);
}

/* ============================================================================
   APARICIÓN AL DESPLAZAR
   El estado visible es el predeterminado; el oculto solo se aplica cuando el
   guion confirma que hay IntersectionObserver y que no se pidió movimiento
   reducido. Así, si el guion falla, el contenido se ve igual.
   ========================================================================= */
.js-aparicion .aparece {
  opacity: 0;
  transform: translateY(var(--esp-5));
  transition:
    opacity var(--dur-lenta) var(--curva),
    transform var(--dur-lenta) var(--curva);
  will-change: opacity, transform;
}
.js-aparicion .aparece.es-visible {
  opacity: 1;
  transform: none;
}