/* ============================================================================
   BASE.CSS - Reset, tipografía, layout y utilidades
   ----------------------------------------------------------------------------
   Consume las variables de tokens.css. NO define colores ni fuentes propias:
   todo sale de los design tokens de la marca. Mobile-first.
   ============================================================================ */

/* ---- Reset moderno y sensato ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-base);
  line-height: var(--interlineado-cuerpo);
  color: var(--color-tinta);
  background: var(--color-fondo);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

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

a { color: inherit; }

ul { list-style: none; }

/* Evita saltos de layout en imágenes que aún cargan */
img { background: var(--color-gris-150); }

/* ---- Foco visible para navegación por teclado (accesibilidad) ---- */
:focus-visible {
  outline: 3px solid var(--color-foco);
  outline-offset: 2px;
}

/* ============================================================
   LAYOUT
   ============================================================ */

/* Contenedor central con ancho máximo */
.contenedor {
  width: 100%;
  max-width: var(--ancho-contenido);
  margin-inline: auto;
  padding-inline: var(--espacio-md);
}

/* El <main> crece para empujar el footer abajo (sticky footer) */
main { flex: 1 0 auto; }

/* Separación vertical estándar de secciones */
.seccion { padding-block: var(--espacio-2xl); }
@media (min-width: 48rem) {
  .seccion { padding-block: var(--espacio-3xl); }
}

/* Sección con fondo de superficie (para alternar ritmo visual) */
.seccion--superficie { background: var(--color-superficie); }

/* ============================================================
   TIPOGRAFÍA
   ============================================================ */

/* Escala tipográfica FLUIDA (móvil ↔ escritorio).
   No modifica tokens.css: cada clamp toma el token de la marca como TOPE de
   escritorio y baja de forma proporcional en pantallas pequeñas, para que los
   títulos no se vean gigantes en móvil. En escritorio quedan igual que antes. */
:root {
  --fluido-3xl: clamp(2rem,     1.30rem + 3.4vw, var(--texto-3xl)); /* 32 → 49px */
  --fluido-2xl: clamp(1.65rem,  1.15rem + 2.5vw, var(--texto-2xl)); /* 26 → 39px */
  --fluido-xl:  clamp(1.45rem,  1.15rem + 1.6vw, var(--texto-xl));  /* 23 → 31px */
  --fluido-lg:  clamp(1.25rem,  1.05rem + 1.05vw, var(--texto-lg)); /* 20 → 25px */
  --fluido-md:  clamp(1.05rem,  1.00rem + 0.45vw, var(--texto-md)); /* 17 → 20px */
}

h1, h2, h3, h4 {
  font-family: var(--fuente-titulo);
  font-weight: var(--peso-titulo);
  line-height: var(--interlineado-titulo);
  text-transform: var(--transformacion-titulo);
  letter-spacing: var(--tracking-titulo);
}

h1 { font-size: var(--fluido-3xl); }
h2 { font-size: var(--fluido-2xl); }
h3 { font-size: var(--fluido-xl); }
h4 { font-size: var(--fluido-lg); }

p { max-width: 68ch; } /* medida de lectura cómoda */

/* Título de sección sin barra decorativa */
.titulo-seccion {
  font-family: var(--fuente-titulo);
  font-size: var(--fluido-2xl);
  font-weight: var(--peso-titulo);
  line-height: var(--interlineado-titulo);
  text-transform: var(--transformacion-titulo);
  letter-spacing: var(--tracking-titulo);
  color: var(--color-tinta);
  display: block;
  margin-bottom: var(--espacio-md);
}

.subtitulo {
  font-family: var(--fuente-titulo);
  font-size: var(--fluido-md);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-gris-700);
  margin-bottom: var(--espacio-sm);
}

.plomo {
  font-size: var(--fluido-md);
  color: var(--color-gris-700);
  max-width: 70ch;          /* medida más ancha, aún cómoda de leer (antes 60ch) */
  line-height: 1.7;         /* más aire entre líneas: menos "amontonado" */
}

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

.centro-texto { text-align: center; }
.centro-texto .titulo-seccion { justify-content: center; }
.centro-texto .plomo { margin-inline: auto; }

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

/* Enlace "saltar al contenido" (accesibilidad) */
.saltar {
  position: absolute;
  left: var(--espacio-sm);
  top: -3rem;
  z-index: 200;
  background: var(--color-accion);
  color: var(--color-accion-texto);
  padding: var(--espacio-2xs) var(--espacio-sm);
  border-radius: var(--radio-boton);
  transition: top var(--transicion-rapida);
}
.saltar:focus { top: var(--espacio-sm); }

/* Etiqueta "temporal / pendiente" para marcar contenido a completar.
   Se ve solo mientras el sitio esté en construcción; fácil de quitar luego. */
.pendiente {
  display: inline-block;
  font-family: var(--fuente-cuerpo);
  font-size: var(--texto-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-advertencia);
  border: 1px dashed var(--color-advertencia);
  border-radius: var(--radio-xs);
  padding: 0.1em 0.5em;
  text-transform: none;
}

/* Rejilla reutilizable (se adapta sola al ancho) */
.rejilla {
  display: grid;
  gap: var(--espacio-md);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

/* Reduce el movimiento si el usuario lo pide en su sistema */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}