/*
 * Valores DERIVADOS (v2 Mangahaus): estilo-SKILL.md no los define tal cual. Cada uno sale de un
 * token existente y está declarado en la tabla "Adaptaciones y derivaciones" del archivo de estilo.
 */

/* Fuentes alojadas en local (sin Google Fonts). Archivo Black y Inter: OFL. Special Elite: Apache 2.0. */
@font-face {
  font-family: 'Archivo Black';
  src: url('../fonts/archivo-black-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Special Elite';
  src: url('../fonts/special-elite-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin-var.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Rojo profundo: el rojo de marca da 3,83:1 sobre crema (no pasa AA en texto pequeño).
     #A82F22 da 5,86:1 sobre crema y crema sobre él da 5,86:1. No usar sobre amarillo en texto pequeño (4,33:1). */
  --color-red-deep: #A82F22;

  /* Texto secundario sobre crema: la plantilla no lo define. Tinta al 65 % sobre crema = #63605a, 5,41:1. */
  --color-ink-muted: #63605a;

  /* Titulares fluidos: en un móvil de 360px no caben 60–72px. Mismo interlineado y tracking. */
  --text-hero-fluid: clamp(34px, 9.5vw, var(--text-display-hero));
  --text-section-fluid: clamp(30px, 7vw, var(--text-display-section));

  /* Títulos y cifras del panel de administración: entre el título de tarjeta (24px) y el de sección (60px). */
  --text-metric: 32px;

  /* Inputs a 16px: con menos, Safari en iOS hace zoom al enfocar. Coincide con --text-body. */
  --text-input: 16px;

  /* Escala de espaciado intermedia (múltiplos de la unidad de 4px): 12 = 3, 20 = 5, 40 = 10. */
  --spacing-12: calc(var(--spacing-unit) * 3);
  --spacing-20: calc(var(--spacing-unit) * 5);
  --spacing-40: calc(var(--spacing-unit) * 10);

  /* Margen lateral en móvil (el archivo fija 32px, que en 360px deja 296px de contenido). */
  --page-gutter-mobile: var(--spacing-16);

  /* Foco visible: la plantilla no lo define. Tinta sobre claro; amarillo sobre tinta (ver .on-ink). */
  --focus-ring: 3px solid var(--color-ink);
  --focus-ring-on-ink: 3px solid var(--color-yellow);
  --focus-offset: 3px;

  /* Estado deshabilitado: relleno crema con texto y borde atenuados, sin sombra. */
  --color-disabled: var(--color-ink-muted);

  /* Área táctil mínima (UI/UX Pro Max: 44×44px). */
  --touch-min: 44px;

  /* Entrada "panel que golpea" (GSAP): duración y rebote leve. Derivado del wiggle de la plantilla. */
  --motion-enter: 0.6s;
  --motion-stagger: 0.12s;

  /* Logo sobre fondo claro: solo existe en blanco, se oscurece a tinta. */
  --logo-on-light: brightness(0);

  /* Foto con tratamiento de imprenta: grises + contraste (plantilla: grayscale + contrast-125). */
  --photo-filter: grayscale(1) contrast(1.25);
}