/* ==========================================================================
   Base · reset, tipografía y layout. Solo usa variables de tokens.css.
   ========================================================================== */

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

/* El atributo hidden siempre gana, aunque un componente defina display */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px; /* el foco y los anclas no quedan bajo el menú fijo */
  scroll-padding-bottom: 96px; /* ni bajo los botones flotantes (WCAG 2.4.11) */
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente-texto);
  font-size: var(--texto-base);
  line-height: var(--interlineado-texto);
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--fuente-titulos);
  font-weight: var(--peso-titulo);
  line-height: var(--interlineado-titulos);
  letter-spacing: var(--tracking-titulos);
  text-wrap: balance;
}
h1 { font-size: var(--texto-display); }
h2 { font-size: var(--texto-h2); }
h3 { font-size: var(--texto-h3); font-weight: var(--peso-subtitulo); }
h4 { font-size: var(--texto-grande); font-weight: var(--peso-subtitulo); letter-spacing: 0; }

p { margin: 0 0 var(--esp-4); max-width: var(--ancho-lectura); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
.texto-grande { font-size: var(--texto-grande); }
.texto-suave { color: var(--color-texto-suave); }

strong, b { font-weight: 700; }

a {
  color: var(--color-enlace);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-thickness var(--dur-rapida) var(--curva-salida);
}
a:hover { text-decoration-thickness: 2px; }

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

ul, ol { margin: 0; padding-left: 1.25em; }
hr { border: 0; border-top: var(--borde-ancho) solid var(--color-borde); margin: var(--esp-6) 0; }

code, kbd, samp { font-family: var(--fuente-mono); font-size: .9em; }
code {
  background: var(--color-chip-fondo);
  color: var(--color-chip-texto);
  padding: .1em .4em;
  border-radius: 4px;
}

/* ---------- Etiqueta mono (EXPERIMENTO 03, FÓRMULA, PASO 01) ---------- */
.etiqueta {
  font-family: var(--fuente-mono);
  font-weight: 500;
  font-size: var(--texto-chico);
  letter-spacing: var(--tracking-etiquetas);
  text-transform: uppercase;
  line-height: 1.3;
}
.dato { font-family: var(--fuente-mono); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---------- Foco visible (WCAG 2.2 · 2.4.7 y 2.4.11) ---------- */
:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

/* ---------- Layout ---------- */
.contenedor {
  width: 100%;
  max-width: calc(var(--ancho-contenido) + var(--margen-lateral) * 2);
  margin-inline: auto;
  padding-inline: var(--margen-lateral);
}
.seccion { padding-block: var(--esp-8); }
@media (min-width: 768px) { .seccion { padding-block: var(--esp-9); } }

.pila > * + * { margin-top: var(--esp-4); }
.pila-grande > * + * { margin-top: var(--esp-6); }
.fila { display: flex; flex-wrap: wrap; gap: var(--esp-3); align-items: center; }
.fila--grande { gap: var(--esp-5); }

.cuadricula { display: grid; gap: var(--esp-4); }
@media (min-width: 640px)  { .cuadricula--2, .cuadricula--3, .cuadricula--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px)  { .cuadricula--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
                             .cuadricula--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Accesibilidad auxiliar ---------- */
.solo-lectores {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.saltar {
  position: absolute;
  left: var(--esp-4);
  top: -100px;
  z-index: 1000;
  background: var(--tinta);
  color: var(--blanco);
  padding: var(--esp-3) var(--esp-5);
  border-radius: var(--radio-medio);
  font-weight: 700;
}
.saltar:focus { top: var(--esp-4); }

/* ---------- Logo claro/oscuro según tema ---------- */
.logo { display: block; height: 32px; width: auto; min-width: 128px; flex-shrink: 0; } /* el manual pide 120 px o más */
.logo--oscuro { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .logo--claro { display: none; }
  :root:not([data-tema="claro"]) .logo--oscuro { display: block; }
}
:root[data-tema="oscuro"] .logo--claro { display: none; }
:root[data-tema="oscuro"] .logo--oscuro { display: block; }

/* ---------- Transiciones entre páginas (View Transitions entre documentos) ---------- */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------- Revelado suave al entrar (JS agrega .visible) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .revelar {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--dur-lenta) var(--curva-salida), transform var(--dur-lenta) var(--curva-salida);
  }
  .js .revelar.visible { opacity: 1; transform: none; }
}