/*
 * Tokens de YébenesDev (yebenes.dev).
 *
 * Es la hoja de Kanso (public/kanso.css) con tres cambios y ninguno más:
 * el acento es índigo en vez de musgo, taupe y clay se oscurecen en claro
 * para pasar AA en texto, y se añaden los tokens de la baldosa. Los nombres
 * de rol son los mismos que en Kanso: en oscuro, --charcoal es un blanco
 * roto y --stone es casi negro.
 *
 * Contrastes recalculados el 26 de septiembre de 2026 (tabla en
 * docs/marca/sistema_visual.md §2): todo texto ≥ 4,5:1 en los dos temas; los
 * divisores y las capas están exentos y se dice en cada token.
 */

/* Fuentes variables, autoalojadas, subconjunto latino: la web no pide nada a
   Google Fonts. Las OFL-*.txt van junto a los woff2 en /fonts/. Solo dos
   ficheros: Newsreader itálica e IBM Plex Mono no se cargan en la primera
   versión; su bloque de fuente se añade el día que una página los use. */
@font-face {
  font-family: "Newsreader";
  src: url("/fonts/Newsreader-Variable.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Outfit";
  src: url("/fonts/Outfit-Variable.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* Respaldos con métricas ajustadas para que el salto al cargar sea mínimo.
   Una sola fuente local por bloque (Times New Roman, Arial): un size-adjust
   no puede valer para dos fuentes con métricas distintas. Los valores están
   medidos con fontpie (--fallback serif / sans-serif) el 27 de septiembre de
   2026 sobre los woff2 finales. */
@font-face {
  font-family: "Newsreader Fallback";
  src: local("Times New Roman");
  size-adjust: 102.11%;
  ascent-override: 71.98%;
  descent-override: 25.95%;
  line-gap-override: 0.00%;
}
@font-face {
  font-family: "Outfit Fallback";
  src: local("Arial");
  size-adjust: 100.06%;
  ascent-override: 99.94%;
  descent-override: 25.98%;
  line-gap-override: 0.00%;
}

:root {
  color-scheme: light dark;

  /* Paleta clara, por roles. Neutros de Kanso; taupe y clay corregidos. */
  --stone: #EBE9E1;        /* fondo de página */
  --rice: #FDFBF7;         /* superficie: tarjetas, documentos */
  --charcoal: #2C2C2C;     /* texto (11,49:1 sobre stone) */
  --taupe: #665F58;        /* texto secundario (5,17:1 sobre stone; Kanso usa #756F68, 4,08) */
  --warm-grey: #D6CFC7;    /* decorativo: filetes, bordes de tarjeta y el aro de .lang y .btn--quiet (adorno: el rótulo identifica el control); nunca texto (1,27:1, exento) */
  --indigo: #3F5063;       /* acento: enlaces, foco, botón principal, «Dev», baldosa (6,80:1 sobre stone) */
  --indigo-tint: #DEE3E9;  /* solo fondo: chips y resaltados; nunca texto, nunca bajo --clay */
  --on-indigo: #FDFBF7;    /* texto y Y sobre índigo (8,00:1) */
  --clay: #866043;         /* alerta en texto (4,58:1 sobre stone; Kanso usa #A67B5B, 3,08); nunca sobre --indigo-tint (4,32) */

  /* Derivados, como los getters de AppPalette. */
  --hairline: rgba(214, 207, 199, 0.55);   /* borde de tarjeta, decorativo */
  --indigo-line: rgba(63, 80, 99, 0.30);    /* separador de chip; el subrayado de los enlaces es currentColor, nunca esto */
  --clay-tint: rgba(134, 96, 67, 0.12);     /* fondo de callout de aviso; su texto va en --charcoal y --clay solo en el filete */
  --shadow: rgba(44, 44, 44, 0.06);         /* solo la píldora de idioma activa; las tarjetas no llevan sombra */

  /* Baldosa (símbolo). Los mismos valores que --indigo y --on-indigo, con
     nombre propio para que el componente no dependa del acento de la interfaz. */
  --tile: var(--indigo);
  --tile-mark: var(--on-indigo);
  --tile-mono: var(--charcoal);   /* variante monocroma: junto a apps y en sus webs */
  --tile-mono-mark: var(--rice);

  /* AppRadius, más el radio de la baldosa (20 % del lado, se aplica en el SVG). */
  --r-pointer: 4px;
  --r-small: 12px;
  --r-medium: 16px;
  --r-large: 20px;
  --r-pill: 999px;

  /* Espaciado: la escala de Kanso, extendida hacia arriba para el ritmo entre secciones. */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 48px;
  --s-10: 64px;
  --s-11: 96px;
  --s-12: 136px;
  --section-gap: clamp(64px, 12vh, 136px);
  --measure: 720px;      /* ancho de lectura, 60–70 caracteres */
  --wide: 1080px;        /* solo lista de apps y pósters de vídeo */
  --gutter: 16px;        /* móvil primero; 24px desde 600px (media query al final) */

  /* AppDurations / AppCurves: se decelera, nada rebota. */
  --t-press: 150ms;      /* pulsación, Copiar → Copiado */
  --t-screen: 320ms;     /* la baldosa se posa */
  --t-enter: 350ms;      /* entrada de contenido */
  --stagger: 120ms;      /* solo en la primera pantalla */
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* Tipografía. */
  --serif: "Newsreader", "Newsreader Fallback", Georgia, serif;
  --sans: "Outfit", "Outfit Fallback", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* Paleta oscura: no es el negativo del claro. Neutros y taupe y clay de Kanso
   sin cambios; el índigo se aclara para seguir cumpliendo sobre carbón. */
@media (prefers-color-scheme: dark) {
  :root {
    --stone: #1A1917;
    --rice: #24231F;
    --charcoal: #EDEAE3;     /* 14,62:1 sobre stone */
    --taupe: #A8A199;        /* 6,88:1 sobre stone, 6,16:1 sobre rice; el de Kanso */
    --warm-grey: #3E3B35;    /* decorativo; nunca texto (1,57:1, exento) */
    --indigo: #A8B9CC;       /* 8,76:1 sobre stone */
    --indigo-tint: #2A3038;  /* solo fondo; nunca texto */
    --on-indigo: #1A1917;    /* 8,76:1 sobre índigo */
    --clay: #C79A76;         /* 6,95:1 sobre stone; el de Kanso */

    --hairline: rgba(62, 59, 53, 0.9);
    --indigo-line: rgba(168, 185, 204, 0.35);
    --clay-tint: rgba(199, 154, 118, 0.14);
    --shadow: rgba(0, 0, 0, 0.35);   /* una sombra de color sobre casi negro no se ve */

    /* En oscuro la baldosa es clara con la Y oscura: misma forma, polaridad invertida. */
    --tile: var(--indigo);
    --tile-mark: var(--on-indigo);
    --tile-mono: var(--charcoal);
    --tile-mono-mark: var(--stone);
  }
}

/* Los dos temas a la vez (press kit, comparativas): mismas variables en un
   contenedor. Los tokens de la baldosa se repiten porque un var() dentro de
   una propiedad personalizada se resuelve donde se declara (:root), y sin
   repetirlos la baldosa heredaría el tema del sistema. */
.theme-light {
  color-scheme: light;
  --stone: #EBE9E1; --rice: #FDFBF7; --charcoal: #2C2C2C; --taupe: #665F58;
  --warm-grey: #D6CFC7; --indigo: #3F5063; --indigo-tint: #DEE3E9;
  --on-indigo: #FDFBF7; --clay: #866043;
  --hairline: rgba(214, 207, 199, 0.55); --indigo-line: rgba(63, 80, 99, 0.30);
  --clay-tint: rgba(134, 96, 67, 0.12); --shadow: rgba(44, 44, 44, 0.06);
  --tile: var(--indigo); --tile-mark: var(--on-indigo);
  --tile-mono: var(--charcoal); --tile-mono-mark: var(--rice);
}
.theme-dark {
  color-scheme: dark;
  --stone: #1A1917; --rice: #24231F; --charcoal: #EDEAE3; --taupe: #A8A199;
  --warm-grey: #3E3B35; --indigo: #A8B9CC; --indigo-tint: #2A3038;
  --on-indigo: #1A1917; --clay: #C79A76;
  --hairline: rgba(62, 59, 53, 0.9); --indigo-line: rgba(168, 185, 204, 0.35);
  --clay-tint: rgba(199, 154, 118, 0.14); --shadow: rgba(0, 0, 0, 0.35);
  --tile: var(--indigo); --tile-mark: var(--on-indigo);
  --tile-mono: var(--charcoal); --tile-mono-mark: var(--stone);
}

/* Base mínima que fija los tokens en la página. El resto de componentes
   (encabezado, lista de apps, pósters, pie) va en la hoja de componentes. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  /* Sin scroll-behavior: smooth. Los anclas saltan; es una página de cuatro pantallas. */
}

body {
  margin: 0;
  background: var(--stone);
  color: var(--charcoal);
  font-family: var(--sans);
  font-size: 1.0625rem;   /* 17px con el tamaño por defecto; escala con el ajuste del navegador */
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-optical-sizing: auto;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.75rem, 8vw, 5rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
}

p {
  margin: 0;
  text-wrap: pretty;
}

/* En una web tipográfica el subrayado es la única señal de enlace: siempre,
   y del color del enlace (currentColor); nunca --indigo-line. */
a {
  color: var(--indigo);
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 3px;
  border-radius: var(--r-pointer);
}

code,
pre {
  font-family: var(--mono);
  font-variant-ligatures: none;
  font-size: 0.9375rem;
}

/* ---------- Baldosa (BrandMark) ---------- */

/* El SVG inline dibuja la baldosa con estas variables; --size la escala. */
.tile {
  --size: 32px;
  display: inline-block;
  flex: none;
  width: var(--size);
  height: var(--size);
  color: var(--tile);            /* relleno del cuadrado (rx 20 %) */
  --mark: var(--tile-mark);       /* trazo de la Y, 12 % del lado */
}
.tile--mono {
  color: var(--tile-mono);
  --mark: var(--tile-mono-mark);
}
/* El único gesto propio: la baldosa se posa al cargar la cabecera, una vez. */
.tile--settle {
  opacity: 0;
  transform: scale(1.04);
  animation: tile-settle var(--t-screen) var(--ease) forwards;
}
@keyframes tile-settle {
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Movimiento ---------- */

/* Revelado: solo cuando site.js ha arrancado y ha puesto js-ready en <html>.
   Sin JavaScript, o con el script bloqueado o roto, nada se oculta.
   Escalonado solo en la primera pantalla (con --i); el resto entra con un
   solo fundido sin escalón. Una sola vez por bloque. */
.js-ready .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--t-enter) var(--ease),
    transform var(--t-enter) var(--ease);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
/* El h1 es el LCP: solo se desplaza, nunca pasa por opacidad 0. */
.js-ready .reveal--slide {
  opacity: 1;
}
.js-ready .is-visible .reveal,
.js-ready .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* La pulsación encoge, no salta; el hover solo baja la opacidad. */
.btn {
  transition: transform var(--t-press) var(--ease),
    opacity var(--t-press) var(--ease);
}
.btn:hover {
  opacity: 0.92;
}
.btn:active {
  transform: scale(0.97);
}

/* Copiar → Copiado: fundido de 150 ms, sin marca de verificación. */
.copy-label {
  transition: opacity var(--t-press) var(--ease);
}
.copy-label.is-swapping {
  opacity: 0;
}

/* El equivalente a MediaQuery.disableAnimationsOf: todo visible, nada se mueve.
   «.js-ready .reveal» se repite aquí porque pesa más que un «.reveal» suelto. */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .js-ready .reveal,
  .tile--settle {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }
  .btn,
  .copy-label {
    transition: none;
  }
}

/* Móvil primero: el gutter base es 16px; 24px desde 600px. */
@media (min-width: 600px) {
  :root {
    --gutter: 24px;
  }
}