/* ============================================================================
   BASE.CSS — Reset moderno, tipografía base, accesibilidad, utilidades
   ----------------------------------------------------------------------------
   Depende de: tokens.css (cargalo antes)
   No contiene ningún componente. Solo cimientos.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. RESET
   ------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Compensa el header sticky al saltar a un ancla */
  scroll-padding-top: 6rem;
}

body {
  background-color: var(--c-base);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 300;
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
}

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

/* ---------------------------------------------------------------------------
   2. TIPOGRAFÍA BASE
   Serif para títulos. Sans para todo lo demás. Sin excepciones ad hoc.
   ------------------------------------------------------------------------- */
h1,
h2,
h3,
h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-wrap: balance; /* evita huérfanas en títulos */
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-lg); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-md); line-height: var(--lh-snug); }

/* Título de display extra grande — se usa en el 404 y disponible para
   cualquier portada futura */
.display { font-size: var(--fs-4xl); letter-spacing: var(--ls-tight); }

p {
  max-width: var(--measure);
  line-height: var(--lh-normal);
  text-wrap: pretty;
}

/* Párrafos largos de lectura corrida respiran más */
.prose p { line-height: var(--lh-relaxed); }

strong { font-weight: 500; }

/* Itálica con acento: el recurso de énfasis de la marca.
   En el HTML se usa como <em> dentro de un título. */
em {
  color: var(--c-accent-300);
  font-style: italic;
}

blockquote {
  font-style: italic;
  color: var(--c-accent-300);
}

/* Números en serif con figuras antiguas — el detalle que da el aire editorial */
.num-display {
  font-family: var(--font-serif);
  font-variant-numeric: oldstyle-nums;
  color: var(--c-accent-300);
  line-height: 1;
}

/* ---------------------------------------------------------------------------
   3. ACCESIBILIDAD
   ------------------------------------------------------------------------- */

/* Skip link: primer elemento tabulable de la página */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--sp-sm);
  z-index: var(--z-modal);
  padding: var(--sp-xs) var(--sp-md);
  background: var(--c-accent-500);
  color: var(--c-text-on-accent);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus { top: var(--sp-sm); }

/* Anillo de foco visible y consistente en todo el sitio.
   Nunca uses outline:none sin reemplazo. */
:focus-visible {
  outline: 2px solid var(--c-focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

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

/* Objetivos táctiles mínimos de 44px en mobile (WCAG 2.5.5) */
@media (pointer: coarse) {
  a,
  button,
  [role='button'] {
    min-height: 44px;
  }
}

/* ---------------------------------------------------------------------------
   4. MOVIMIENTO REDUCIDO
   Una sola regla apaga toda la animación del sitio. Por eso todas las
   duraciones viven en tokens.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-reveal: 0ms;
  }
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* Elementos que entran con reveal quedan visibles de entrada */
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------------------------------------------------------------------------
   5. LAYOUT PRIMITIVO
   ------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section {
  padding-block: var(--section-py);
  border-bottom: 1px solid var(--c-border);
  container-type: inline-size; /* habilita container queries internas */
}
.section--tint { background: var(--c-base-tint); }
.section--flush { border-bottom: none; }

/* Split de 2 columnas. Colapsa por CONTAINER query, no por viewport:
   así funciona igual si algún día lo metés dentro de un sidebar. */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--split-gap);
  align-items: center;
}
@container (min-width: 800px) {
  .split { grid-template-columns: var(--split-cols, 1.05fr 0.95fr); }
  .split--top { align-items: start; }
}
/* Fallback para navegadores sin container queries */
@supports not (container-type: inline-size) {
  @media (min-width: 860px) {
    .split { grid-template-columns: var(--split-cols, 1.05fr 0.95fr); }
  }
}

/* Grid auto-responsivo: nunca declares cuántas columnas, declará el ancho
   mínimo de cada item y dejá que el navegador decida. Esto es lo que hace
   que el layout sea dinámico y no rígido. */
.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--item-min, 240px), 100%), 1fr));
  gap: var(--sp-md);
}

/* Stack vertical con espaciado consistente */
.stack > * + * { margin-top: var(--stack-gap, var(--sp-sm)); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cluster-gap, var(--sp-sm));
  align-items: center;
}

/* Separador de bloque mayor entre grupos temáticos dentro de una sección */
.gap-block { margin-top: var(--sp-3xl); }

/* ---------------------------------------------------------------------------
   6. REVEAL AL SCROLL
   La clase la activa app.js vía IntersectionObserver. Sin JS, el contenido
   se ve igual (progressive enhancement): ver la regla .no-js más abajo.
   ------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
/* Si JS no corre, mostramos todo */
.no-js [data-reveal] {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------------------------
   7. UTILIDADES
   Pocas y con propósito. No es Tailwind.
   ------------------------------------------------------------------------- */
.text-muted     { color: var(--c-text-muted); }
.text-secondary { color: var(--c-text-secondary); }
.text-accent      { color: var(--c-accent-300); }
.text-center    { text-align: center; }
.measure        { max-width: var(--measure); }
.measure-narrow { max-width: var(--measure-narrow); }
.mx-auto        { margin-inline: auto; }
.italic         { font-style: italic; }
.serif          { font-family: var(--font-serif); }
.mono           { font-family: var(--font-mono); }
.hidden         { display: none !important; }

/* Impresión: el sitio tiene que poder imprimirse legible.
   Caso real: un CEO imprime la propuesta o la guarda en PDF para pasársela
   al board. Si sale todo negro, no la comparte. */
@media print {
  body {
    background: var(--c-print-bg);
    color: var(--c-print-text);
  }
  .site-header,
  .wa-float,
  .hero__media,
  .nav-toggle,
  .ticker,
  form { display: none; }
  .section {
    border-bottom: 1px solid var(--c-print-border);
    page-break-inside: avoid;
    padding-block: var(--sp-lg);
  }
  em, .text-accent, h1, h2, h3 { color: var(--c-print-text); }
  a::after { content: ' (' attr(href) ')'; font-size: 0.8em; }
}