/* ==========================================================================
   Base: tipografía, layout global, utilidades
   ========================================================================== */

@font-face {
  font-family: "Inter Var";
  src: url("../assets/fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  background: var(--color-background);
  /* Evita overflow horizontal sin romper position: sticky */
  overflow-x: clip;
}

body {
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  color: var(--color-text);
  background: var(--bg-body, var(--color-background));
  overflow-x: clip;
  font-feature-settings: "cv11", "ss01", "ss03";
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

::selection {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

/* ---- Tipografía ---- */
h1,
h2,
h3,
h4 {
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  color: var(--color-text);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: var(--tracking-snug); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); letter-spacing: -0.01em; line-height: var(--lh-snug); }

.display {
  font-size: var(--fs-display);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--color-muted);
  letter-spacing: -0.01em;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-muted);
}

.eyebrow::before {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}

.text-muted { color: var(--color-muted); }
.text-accent { color: var(--color-accent); }

.prose {
  max-width: 68ch;
}

.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: var(--fs-h3); margin-top: 2em; }
.prose h3 { font-size: var(--fs-h4); margin-top: 1.8em; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: 0.4em; }
.prose a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Layout ---- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: calc(var(--container-narrow) + var(--gutter) * 2);
}

.section {
  padding-block: var(--section-space);
  position: relative;
}

.section--surface { background: var(--bg-surface, var(--color-surface)); }

/* Modo oscuro: dentro de las secciones grises, tarjetas, campos y bordes
   pasan a grises neutros para no mezclar azul sobre gris. */
:root[data-theme="dark"] .section--surface {
  --color-background: #0b0b0b;
  --color-surface: #1e1e1e;
  --color-surface-2: #282828;
  --color-elevated: #1e1e1e;
  --color-text-soft: #dedede;
  --color-muted: #a8a8a8;
  --color-line: rgba(255, 255, 255, 0.1);
  --color-line-strong: rgba(255, 255, 255, 0.2);
  --glass-line: rgba(255, 255, 255, 0.1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .section--surface {
    --color-background: #0b0b0b;
    --color-surface: #1e1e1e;
    --color-surface-2: #282828;
    --color-elevated: #1e1e1e;
    --color-text-soft: #dedede;
    --color-muted: #a8a8a8;
    --color-line: rgba(255, 255, 255, 0.1);
    --color-line-strong: rgba(255, 255, 255, 0.2);
    --glass-line: rgba(255, 255, 255, 0.1);
  }
}

/* Lienzo degradado fijo de toda la página (modo oscuro). Inspirado en el
   fondo del logotipo: negro a la izquierda que se abre en azul noche.
   Capa fija en lugar de background-attachment: fixed (falla en iOS). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--bg-canvas, none);
}
.section--tight { padding-block: calc(var(--section-space) * 0.6); }

.stack > * + * { margin-top: var(--stack-space, var(--spacing-md)); }

/* ---- Full-bleed ----
   Hace que un elemento dentro de .container toque ambos bordes del
   viewport. Se usa margin negativo con el gutter (exacto, sin 100vw),
   evitando el desbordamiento causado por la barra de scroll. */
.full-bleed {
  width: auto;
  max-width: none;
  margin-inline: calc(var(--gutter) * -1);
}

/* Variante para elementos fuera de un contenedor con padding conocido */
.full-bleed-vw {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
}

.media {
  position: relative;
  overflow: hidden;
  background: var(--color-surface-2);
}

.media img,
.media picture {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
}

/* ---- Accesibilidad ---- */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: var(--z-skip);
  padding: 0.75rem 1.1rem;
  border-radius: var(--radius-pill);
  background: var(--color-text);
  color: var(--color-background);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  transform: translateY(-160%);
  transition: transform var(--transition-fast);
}

.skip-link:focus-visible { transform: none; }

:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---- Marcadores de contenido pendiente ---- */
.tag-pending {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.2em 0.65em;
  border-radius: var(--radius-pill);
  background: var(--color-accent-soft);
  color: var(--color-accent);
  font-size: 0.6875rem;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.6;
  vertical-align: middle;
  white-space: nowrap;
}

.tag-pending::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.is-placeholder { color: var(--color-muted); font-style: normal; }

.noscript-note {
  padding: 1rem var(--gutter);
  background: var(--color-surface);
  font-size: var(--fs-sm);
  text-align: center;
}

/* ==========================================================================
   Transición entre secciones (v1.8.0)
   Cada bloque principal termina con las esquinas inferiores redondeadas y
   se apoya sobre el siguiente, que se desliza por debajo (efecto de
   tarjetas apiladas). Sin cambios en los HTML: aplica a todo hijo directo
   <section>/<header> de <main> y al footer.
   ========================================================================== */
:root {
  --section-radius: clamp(28px, 1rem + 2.6vw, 56px);
  --section-edge-shadow: 0 30px 42px -34px rgba(10, 15, 30, 0.32);
}
:root[data-theme="dark"] { --section-edge-shadow: 0 34px 46px -30px rgba(0, 0, 0, 0.85); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { --section-edge-shadow: 0 34px 46px -30px rgba(0, 0, 0, 0.85); }
}

/* [class] sube la especificidad para que background-origin no lo pise el
   shorthand `background` de .section--surface / .scene-dark. */
main > :is(section, header)[class] {
  position: relative;
  border-bottom-left-radius: var(--section-radius);
  border-bottom-right-radius: var(--section-radius);
  overflow: clip;              /* recorta el contenido a la curva; no rompe sticky */
  box-shadow: var(--section-edge-shadow);
  background-origin: border-box;
}
/* Las secciones sin fondo propio necesitan uno opaco para que la curva se vea */
main > :is(section, header)[class]:not(.section--surface, .scene-dark, .faro) {
  background: var(--bg-canvas, var(--color-background));
}
/* La sección siguiente sube bajo la anterior; el borde transparente
   compensa el solapamiento sin alterar su padding. */
main > :is(section, header)[class] + :is(section, header)[class],
:root .site-footer {
  margin-top: calc(var(--section-radius) * -1);
  border-top: var(--section-radius) solid transparent;
  background-origin: border-box;
}
/* Cada sección se pinta sobre la que le sigue */
main > :nth-child(1)  { z-index: 16; }
main > :nth-child(2)  { z-index: 15; }
main > :nth-child(3)  { z-index: 14; }
main > :nth-child(4)  { z-index: 13; }
main > :nth-child(5)  { z-index: 12; }
main > :nth-child(6)  { z-index: 11; }
main > :nth-child(7)  { z-index: 10; }
main > :nth-child(8)  { z-index: 9; }
main > :nth-child(9)  { z-index: 8; }
main > :nth-child(10) { z-index: 7; }
main > :nth-child(11) { z-index: 6; }
main > :nth-child(12) { z-index: 5; }
main > :nth-child(13) { z-index: 4; }
main > :nth-child(n+14) { z-index: 3; }

@media print {
  main > :is(section, header)[class] { border-radius: 0; box-shadow: none; }
  main > :is(section, header)[class] + :is(section, header)[class],
  :root .site-footer { margin-top: 0; border-top: 0; }
}

/* ==========================================================================
   Barra de scroll (v1.12.0)
   Cápsula fina flotante sobre un carril transparente: toma el color del
   texto con transparencia (se adapta a claro/oscuro) y el acento al
   arrastrarla. Chrome/Edge/Safari usan ::-webkit-scrollbar; Firefox usa
   las propiedades estándar.
   ========================================================================== */
:root {
  --sb-thumb: rgba(var(--rgb-text), 0.26);
  --sb-thumb-hover: rgba(var(--rgb-text), 0.42);
  --sb-thumb-active: var(--color-accent);
}

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
  background-color: var(--sb-thumb);
  border: 3px solid transparent;          /* separa la cápsula del borde */
  border-radius: 999px;
  background-clip: padding-box;
  min-height: 48px;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--sb-thumb-hover); }
::-webkit-scrollbar-thumb:active { background-color: var(--sb-thumb-active); }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }

/* Firefox (y navegadores sin ::-webkit-scrollbar) */
@supports not selector(::-webkit-scrollbar) {
  html {
    scrollbar-width: thin;
    scrollbar-color: var(--sb-thumb) transparent;
  }
}

/* ==========================================================================
   Relieve leve en títulos (v1.15.0, reforzado en v1.15.1)
   Sombra interna simulada: una línea de luz debajo y una de sombra encima
   del trazo (efecto "letterpress"). Muy sutil y adaptada al fondo:
   - fondo claro: brillo blanco abajo, sombra oscura arriba
   - fondo oscuro: sombra negra arriba, brillo tenue abajo
   ========================================================================== */
:root {
  --title-relief:
    0 1px 0 rgba(255, 255, 255, 0.95),
    0 2px 1px rgba(255, 255, 255, 0.45),
    0 -1px 0 rgba(0, 0, 0, 0.16),
    0 -1px 3px rgba(0, 0, 0, 0.08);
}
:root[data-theme="dark"],
.scene-dark,
.faro {
  --title-relief:
    0 -1px 0 rgba(0, 0, 0, 0.85),
    0 -2px 2px rgba(0, 0, 0, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.16),
    0 2px 1px rgba(255, 255, 255, 0.06);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --title-relief:
      0 -1px 0 rgba(0, 0, 0, 0.85),
      0 -2px 2px rgba(0, 0, 0, 0.35),
      0 1px 0 rgba(255, 255, 255, 0.16),
      0 2px 1px rgba(255, 255, 255, 0.06);
  }
}
/* En tema claro, .scene-dark y .faro siguen siendo oscuros: ya cubiertos arriba */

h1, h2, .display, .statement, .faro__title {
  text-shadow: var(--title-relief);
}
/* .statement .hl suma el relieve a su halo en css/sections.css */
@media print { h1, h2, .display, .statement, .faro__title { text-shadow: none; } }