/* KaosMC · base.css — reset, tipografía, layout y utilidades */

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

/* Transición de color al cambiar de tema (200ms) */
* {
  transition: background-color var(--dur) ease, border-color var(--dur) ease,
    color var(--dur) ease, fill var(--dur) ease;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 80px);
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body.no-scroll { overflow: hidden; }
main { flex: 1 0 auto; display: block; }
svg { display: block; max-width: 100%; }

h1, h2, h3, h4 {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-title);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: 800; }
h2 { font-size: var(--fs-h2); font-weight: 800; }
h3 { font-size: var(--fs-h3); }
p { margin: 0 0 var(--sp-4); }
ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.25em; }

a { color: var(--accent-ink); text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }

code, kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92em; }
kbd {
  display: inline-block; min-width: 1.6em; padding: 0 6px; text-align: center;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px;
}
mark { background: var(--mark-bg); color: var(--mark-text); border-radius: 3px; padding: 0 2px; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 200;
  padding: var(--sp-3) var(--sp-4); background: var(--accent); color: var(--on-accent);
  font-weight: 700; border-radius: var(--r-btn); text-decoration: none;
}
.skip-link:focus { top: var(--sp-4); color: var(--on-accent); }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Iconos SVG propios (trazo 1.75) */
.icon {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}
.icon--fill { fill: currentColor; stroke: none; }
.icon--lg { width: 22px; height: 22px; }

/* Microetiqueta pixel */
.pixel-label {
  display: block; margin: 0 0 var(--sp-3);
  font-family: var(--font-pixel); font-size: 12px; font-weight: 400;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-ink);
}

/* Layout */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--sp-12); }
@media (min-width: 1024px) { .section { padding-block: var(--sp-24); } }
.section-head { margin-bottom: var(--sp-8); }
.section-head p { margin: 0; color: var(--text-muted); max-width: 60ch; }
.muted { color: var(--text-muted); }
.small { font-size: 0.875rem; }
.lead { font-size: clamp(1.0625rem, 1rem + 0.5vw, 1.25rem); color: var(--text-muted); max-width: 58ch; margin: 0; }

.js .reveal { opacity: 0; transform: translateY(8px); transition: opacity 400ms ease, transform 400ms ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal.is-instant { transition: none; } /* ya estaba en pantalla al cargar: sin animación */

/* Transiciones más suaves (token --dur de tokens.css) y fundido único y corto del contenido al cargar (sin transform) */
:root { --dur: 250ms; }
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
main { animation: page-in 200ms ease both; }

/* Enlace de Modalidades oculto desde el primer pintado si el módulo está desactivado (la clase la pone boot.js / nav.js) */
.mod-off [data-module="modalities"] { display: none; }

@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}


/* Sin View Transitions: el cambio de página es un fundido corto del contenido (ver page-in) */
html { background: var(--bg); overflow-y: scroll; } /* la barra no aparece/desaparece entre páginas: evita que la navbar "salte" de lado */

/* Contenedores a la espera de datos de la API: ocultos (visibility conserva el hueco) para no pintar dos veces. Si estan vacios reservan altura. */
.is-loading { visibility: hidden; }
.is-loading:empty { min-height: 240px; }