/* ═══ Design system v2 — tokens (R-31) ═══════════════════════════════
   Única fuente de colores, tipografía, espacios, radios, sombras y capas
   del sitio nuevo. Ningún otro CSS escribe un color o una medida a mano:
   todo sale de acá. Referencia visual: maqueta R-30 variante D (D-16) con
   la piel "Corte imperial" de la marca (D-19, R-37): granate, oro viejo
   y rubí (maquetas/rebranding/sitio-b/corte-imperial.css).
   Documentación: .claude/docs/design-system.md

   Dos niveles:
   1. Paleta (--palette-*): los valores crudos. Solo se usan en este archivo.
   2. Roles (--color-*, --font-*, --space-*…): lo que usan los componentes.
      Cambiar un rol cambia todo el sitio de forma coherente.

   Literales permitidos fuera de este archivo (no son decisiones de diseño):
   0, bordes finos de 1px, la técnica de .visually-hidden (1px, clip),
   porcentajes, fr, auto y 100vh/dvh de estructura, y proporciones relativas
   al propio componente en em (1em del indicador de carga). */

:root {
  /* ── 1. Paleta ─────────────────────────────────────────────── */

  /* Noche de ébano: fondo y superficies, del más oscuro al más claro. Casi
     negro con un dejo cálido (no rojo): el granate queda para la banda del
     header, los estandartes, las gemas y el brillo de arriba de la página,
     así el rojo no satura (paleta "Ébano y granate", 2026-10-07).
     Contrastes medidos en design-system.md §3. */
  --palette-night-950: #060405;
  --palette-night-900: #0b0809;
  --palette-night-850: #151112;
  --palette-night-800: #1e191a;
  --palette-night-700: #3a2e2e;
  --palette-night-600: #574546;
  --palette-night-500: #8e7c78;   /* borde de campos: 4,7:1 contra el panel */
  --palette-ink-100: #f4e8d4;     /* texto pergamino */
  --palette-ink-400: #bdae9f;     /* texto secundario: beige, no rosado */

  /* Oro viejo (menos amarillo que el oro de MuPGA). El 100, el 350 y el 500
     solo arman el bisel del oro metálico (--brand-mark-gold-gradient). */
  --palette-gold-100: #f7e6bb;
  --palette-gold-300: #efd59e;
  --palette-gold-350: #dfb975;
  --palette-gold-400: #d8b06a;
  --palette-gold-500: #b88c4a;
  --palette-gold-600: #a9803f;
  --palette-gold-800: #7a5626;
  --palette-gold-ink: #1f1206;

  /* Rareza: los colores del tooltip de los ítems del juego, retocados para
     convivir con el granate. Mismo significado (D-16). */
  --palette-green-400: #93d68a;
  --palette-green-ink: #0b1a06;
  --palette-blue-400: #a9bdf0;
  --palette-blue-ink: #0b1020;
  --palette-orange-400: #ffa65c;
  --palette-orange-950: #24120a;
  --palette-red-400: #ff7a70;     /* error: más claro que el rubí de la marca */
  --palette-red-950: #2a0a0e;

  /* Rubí y granate del logo de la marca (solo los usan los roles --color-brand-*) */
  --palette-ruby-500: #d01e2a;
  --palette-ruby-900: #52040b;
  --palette-garnet-800: #5a0f1c;

  /* ── 2. Roles de color ─────────────────────────────────────── */

  /* Superficies */
  --color-bg: var(--palette-night-900);
  --color-surface: var(--palette-night-850);
  --color-surface-raised: var(--palette-night-800);
  --color-surface-sunken: var(--palette-night-950);
  /* Header y bandas fijas: la noche con un toque de granate, translúcida */
  --color-chrome: color-mix(in srgb, color-mix(in srgb, var(--palette-garnet-800) 11%, var(--palette-night-900)) 94%, transparent);
  --color-backdrop: rgba(0, 0, 0, 0.65);
  /* Casillas tenues detrás de la vitrina de componentes (/_ui/); el sitio
     usa el damasco (--page-damask) */
  --color-grid-line-strong: color-mix(in srgb, var(--palette-gold-400) 6%, transparent);

  /* Marca (D-19): el rubí y el granate del logo. SOLO decoración (gemas,
     brillos, fondos, estandartes, adornos): NUNCA texto ni estado. El rubí da
     ~3,5:1 contra los paneles (no se lee como texto) y se confundiría con el
     rojo de error, que es --color-danger. */
  --color-brand-ruby: var(--palette-ruby-500);
  --color-brand-ruby-dark: var(--palette-ruby-900);
  --color-brand-garnet: var(--palette-garnet-800);
  --color-brand-glow: color-mix(in srgb, var(--color-brand-ruby) 22%, transparent);

  /* Bordes. --color-border-control llega a 3:1 contra el panel (WCAG 1.4.11):
     es el borde de los campos de formulario, que sin él no se distinguen. */
  --color-border: var(--palette-night-700);
  --color-border-strong: var(--palette-night-600);
  --color-border-control: var(--palette-night-500);

  /* Texto */
  --color-text: var(--palette-ink-100);
  --color-text-muted: var(--palette-ink-400);

  /* Rareza con significado fijo (D-16). Nunca se usan como decoración:
     cada color dice algo. Ver la tabla en design-system.md. */
  --color-valuable: var(--palette-gold-400);       /* dorado: lo valioso, el 1.° */
  --color-valuable-strong: var(--palette-gold-300);
  --color-valuable-deep: var(--palette-gold-600);
  --color-valuable-border: var(--palette-gold-800);
  --color-valuable-tint: color-mix(in srgb, var(--palette-gold-400) 8%, transparent);
  --color-on-valuable: var(--palette-gold-ink);
  --color-success: var(--palette-green-400);       /* verde: lo bueno, el podio */
  --color-on-success: var(--palette-green-ink);
  --color-data: var(--palette-blue-400);           /* azul: datos, links, top 10 */
  --color-on-data: var(--palette-blue-ink);
  --color-attention: var(--palette-orange-400);    /* naranja: lo tuyo pendiente o que te bloquea */
  --color-attention-surface: var(--palette-orange-950);
  --color-attention-border: color-mix(in srgb, var(--palette-orange-400) 55%, transparent);
  --color-danger: var(--palette-red-400);          /* rojo: no alcanza, error */
  --color-danger-surface: var(--palette-red-950);
  --color-danger-border: color-mix(in srgb, var(--palette-red-400) 55%, transparent);

  /* Foco del teclado: dorado, se ve sobre cualquier superficie */
  --color-focus: var(--palette-gold-400);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* Esqueletos de carga */
  --color-skeleton: var(--palette-night-800);
  --color-skeleton-shine: var(--palette-night-700);

  /* ── 3. Tipografía ─────────────────────────────────────────── */

  /* Heading (serif romana como las letras del logo, D-19) para los títulos de
     componente; display para números y datos; texto para todo lo demás. Las
     fuentes de emoji van en el stack porque los degradados y Windows pintaban
     los emoji (lección de MuPGA). */
  --font-heading: 'Cinzel', 'Trajan Pro', Georgia, 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', serif;
  --font-display: 'Big Shoulders Display', 'Arial Narrow', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
  --font-body: 'Public Sans', 'Segoe UI', system-ui, -apple-system, 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;

  /* Monoespaciada: solo para editar JSON y texto técnico en el ControlPanel */
  --font-mono: ui-monospace, 'Cascadia Mono', 'Consolas', 'Liberation Mono', monospace;

  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-heavy: 800;
  --font-weight-black: 900;

  /* Texto (Public Sans) */
  --font-size-xs: 0.75rem;    /* 12 px: etiquetas de datos, chips */
  --font-size-sm: 0.8125rem;  /* 13 px: notas, subtítulos de fila */
  --font-size-md: 0.9375rem;  /* 15 px: texto secundario, botones chicos */
  --font-size-base: 1rem;     /* 16 px: texto normal, inputs (evita el zoom de iOS) */
  --font-size-lg: 1.0625rem;  /* 17 px: links del menú */

  /* Títulos y números. Los grandes son fluidos: se achican en el celular */
  --font-size-heading-sm: 1.25rem;                              /* título de ítem, valor de fila */
  --font-size-heading-md: 1.5rem;                               /* título de noticia, números */
  --font-size-heading-lg: 1.75rem;                              /* título de tarjeta, de hoja */
  --font-size-heading-xl: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem); /* título de sección */
  --font-size-title: clamp(2.1rem, 10vw, 3.5rem);               /* título de página (h1): Cinzel es ancha */
  --font-size-hero: clamp(4rem, 22vw, 8rem);                    /* cuenta regresiva */

  --line-height-countdown: 0.85; /* números gigantes pegados */
  --line-height-tight: 0.9;
  --line-height-none: 1;         /* títulos y números de una línea */
  --line-height-title: 1.05;     /* título de página en Cinzel (con 0.9 se pisan las líneas) */
  --line-height-heading: 1.1;
  --line-height-control: 1.2;    /* texto de botones */
  --line-height-label: 1.3;      /* distintivos */
  --line-height-compact: 1.35;
  --line-height-body: 1.55;

  --letter-spacing-label: 0.04em;  /* mayúsculas chicas (distintivos) */
  --letter-spacing-brand: 0.04em;  /* nombre de la marca en el header (mayúsculas romanas) */
  --letter-spacing-heading: 0.03em;    /* títulos en Cinzel */
  --letter-spacing-heading-sm: 0.02em; /* títulos chicos en Cinzel (noticias): es ancha */
  --letter-spacing-tab: 0.04em;        /* pestañas */
  --letter-spacing-wide: 0.06em;       /* botón principal y marca del pie */
  --font-size-countdown-unit: 0.32em; /* la "d", "h", "m" al lado de los números */

  /* ── 4. Espacios (múltiplos de 4 px) ───────────────────────── */
  --space-3xs: 0.125rem;  /* 2 */
  --space-2xs: 0.25rem;   /* 4 */
  --space-xs: 0.5rem;     /* 8 */
  --space-sm: 0.75rem;    /* 12 */
  --space-md: 1rem;       /* 16 */
  --space-lg: 1.5rem;     /* 24 */
  --space-xl: 2rem;       /* 32 */
  --space-2xl: 3rem;      /* 48 */
  --space-3xl: 4rem;      /* 64 */

  /* ── 5. Medidas de la estructura ───────────────────────────── */
  --page-max-width: 1160px;
  --page-narrow-width: 760px;
  --page-gutter: 1rem;               /* 16 px a cada lado en el celular */
  --header-height: 56px;
  --header-height-desktop: 64px;
  --bottom-nav-height: 64px;
  --touch-target: 44px;              /* mínimo tocable (WCAG 2.5.5) */
  --control-height: 46px;            /* botones e inputs */
  --control-height-sm: 38px;         /* botones chicos */
  --portrait-size: 40px;
  --portrait-size-sm: 36px;
  --portrait-size-lg: 72px;          /* retrato o emblema del encabezado de un perfil */
  --news-thumb-width: 96px;          /* miniatura de una noticia compacta en el celular */
  --news-thumb-width-lg: 200px;      /* la misma miniatura desde 700 px */
  --shop-item-icon-size: 64px;       /* casilla del ícono de un ítem en la tienda (los GIF del CashShop miden distinto) */
  --shop-pending-icon-size: 32px;    /* ícono de una compra sin reclamar */
  --status-dot-size: 8px;
  --icon-size: 24px;
  --flag-width: 20px;
  --flag-height: 15px;
  --sheet-max-width: 460px;
  --modal-max-width: 560px;
  --drawer-width: min(320px, 86vw);
  --dropdown-width: 230px;
  --race-bar-height: 6px;
  --ranking-bar-height: 2px;
  --race-position-width: 22px;
  --ranking-position-width: 30px;
  --ranking-position-width-desktop: 52px;
  --ranking-number-width: 80px;      /* columna "Nivel" en escritorio */
  --ranking-value-width: 110px;      /* columna del valor en escritorio */
  --chip-height: 28px;
  --checkbox-size: 20px;
  --stepper-input-width: 64px;
  --textarea-min-height: 7.5rem;
  --skeleton-block-height: 104px;
  --ticket-preview-size: 96px;       /* miniatura de una captura elegida para un reclamo */
  --ticket-image-size: 160px;        /* captura dentro del hilo de un reclamo */
  --capacity-bar-height: 6px;        /* barra de cupo de un evento */
  --post-image-max-height: 360px;    /* imagen dentro de un mensaje del foro: no tapa la pantalla */
  --wiki-sidebar-width: 220px;       /* columna del listado de la wiki (desde 900 px) */
  --wiki-toc-width: 200px;           /* columna "En esta página" de la wiki (desde 1100 px) */
  --upload-preview-max-height: 140px; /* vista previa de la imagen que sube el staff (ControlPanel) */
  --json-editor-min-height: 24rem;   /* campo del JSON de Info del servidor (ControlPanel) */
  --sheet-max-height: 90dvh;
  --chevron-size: 8px;               /* flecha del select */
  --chevron-size-sm: 6px;            /* flecha del "Más" */
  --chevron-stroke: 2px;
  --spinner-stroke: 2px;
  --chrome-blur: 6px;                /* desenfoque detrás del header */
  /* Borde de acento de avisos y eventos, y la rayita de la sección actual */
  --accent-border-width: 3px;
  --header-emblem-size: 36px;        /* escudo de la marca al lado del nombre, en el header */

  /* ── 6. Radios ─────────────────────────────────────────────── */
  /* Esquinas casi rectas, de piedra y metal (D-19); la hoja inferior y las
     píldoras siguen redondeadas porque son del celular, no de la marca */
  --radius-xs: 2px;     /* banderas */
  --radius-sm: 2px;     /* botones, inputs, retratos */
  --radius-md: 2px;     /* tarjetas, tablas */
  --radius-lg: 12px;    /* hoja inferior */
  --radius-pill: 999px; /* chips, puntos de estado */

  /* ── 7. Sombras ────────────────────────────────────────────── */
  --shadow-card: inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 10px 30px rgba(0, 0, 0, 0.4);
  --shadow-float: 0 16px 40px rgba(0, 0, 0, 0.5);
  --shadow-sticky-top: 0 8px 20px rgba(0, 0, 0, 0.5);
  --shadow-sticky-bottom: 0 -8px 28px rgba(0, 0, 0, 0.6);

  /* ── 7b. Opacidades ────────────────────────────────────────── */
  --opacity-disabled: 0.4;          /* botón deshabilitado */
  --opacity-disabled-control: 0.5;  /* campo deshabilitado (el texto se tiene que poder leer) */
  --opacity-busy: 0.75;             /* botón cargando */
  --opacity-secondary-bar: 0.7;     /* barras del 4.° al 10.° */
  --hover-brightness: 1.08;         /* el oro (botón principal, marca del header) se aclara al pasar */

  /* ── 8. Capas (z-index) ────────────────────────────────────── */
  /* Los <dialog> abiertos con showModal() van a la capa superior del
     navegador y quedan arriba de todo sin z-index. */
  --z-backdrop: -1;    /* decorado detrás del contenido de su contexto: personajes y brasas
                          detrás de la página, destello detrás del texto del botón */
  --z-sticky: 20;      /* saldo fijo, pestañas fijas, tu fila */
  --z-header: 30;
  --z-bottom-nav: 35;
  --z-toast: 50;

  /* ── 9. Breakpoints (documentados) ─────────────────────────── */
  /* CSS no permite variables dentro de @media: los @media escriben el número
     a mano, y tiene que ser uno de estos tres. Las variables quedan para JS
     (matchMedia) y como referencia.
       md  700 px — grillas de 2 a 3 columnas
       lg  900 px — escritorio: header con nav, sin barra inferior
       xl 1100 px — grillas de 4 columnas */
  --breakpoint-md: 700px;
  --breakpoint-lg: 900px;
  --breakpoint-xl: 1100px;

  /* ── 10. Movimiento (R-32) ─────────────────────────────────── */
  /* Corto y con propósito: lo que se mueve explica de dónde viene algo
     (la hoja sube desde abajo) o cuánto vale (la barra se llena). */
  --duration-instant: 90ms;   /* apretar un botón */
  --duration-fast: 150ms;     /* cambio de color al pasar el mouse */
  --duration-base: 220ms;     /* hojas, menús, avisos, cambio de página */
  --duration-slow: 480ms;     /* aparición al bajar */
  --duration-fill: 900ms;     /* barras del ranking */
  --duration-spin: 800ms;     /* vuelta del indicador de carga */
  --duration-shimmer: 1400ms; /* brillo de los esqueletos */

  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);   /* entra rápido y frena: lo que aparece */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);        /* arranca lento y acelera: lo que se va */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --stagger-step: 70ms;       /* demora entre elementos de una lista */
  --reveal-distance: 16px;    /* cuánto sube lo que aparece al bajar */
  --press-scale: 0.97;        /* cuánto se achica un botón al apretarlo */
  --pop-scale: 0.96;          /* tamaño del que parte el modal al aparecer */

  /* "Un poco de vida" (maquetas/animaciones/, aprobada por Franco 2026-10-06).
     Efectos de ambiente: son ciclos que se repiten, por eso pasan del segundo,
     pero lo que se mueve en cada uno dura una fracción y el resto está quieto.
     Todos se apagan con movimiento reducido (base.css §17i). */
  --fx-shine: color-mix(in srgb, white 75%, transparent);  /* reflejo del logo y del botón principal */
  --fx-shine-cycle: 6s;       /* cada cuánto cruza el reflejo el logo y el título del inicio */
  --fx-cta-cycle: 5s;         /* cada cuánto destella el botón principal */
  --fx-alive-cycle: 4s;       /* medio ciclo de la "respiración" de los personajes (va y vuelve) */
  --fx-alive-brightness: 1.25; /* brillo máximo de los personajes al respirar */
  --fx-alive-saturation: 1.3;  /* saturación máxima de los personajes al respirar */
  /* Luz al pasar el mouse (o al tocar): dorada tenue, nunca pisa un color con significado */
  --fx-glow: color-mix(in srgb, var(--color-valuable) 45%, transparent);
  --fx-glow-soft: color-mix(in srgb, var(--color-valuable) 8%, transparent);
  --fx-light-row: inset 0 0 0 1px var(--fx-glow);                            /* fila de ranking y carrera */
  --fx-light-card: 0 0 var(--space-lg) var(--fx-glow-soft), 0 0 0 1px var(--fx-glow); /* tarjeta */
  --fx-light-card-touch: 0 0 0 1px var(--fx-glow);                           /* tarjeta mientras se toca */
  --fx-light-button: 0 0 var(--space-md) var(--fx-glow);                     /* botón */
  /* Brasas del fondo (js/v2/embers.js lee estos tokens del canvas) */
  --fx-ember-count: 22;       /* cuántas hay a la vez en el celular (desde 700 px: abajo) */
  /* Polvo de oro y alguna chispa de rubí (decorativas, no son rareza) */
  --fx-ember-fire: var(--palette-gold-400);
  --fx-ember-flame: var(--palette-gold-300);
  --fx-ember-rune: var(--color-brand-ruby);

  /* ── 11. Visualización de datos (M-06) ─────────────────────── */
  /* Gráficos, heatmap de retención y embudo del panel de Métricas. Los tonos
     se mezclan desde --color-data (azul = datos): cambiar el azul del sitio
     cambia también los gráficos. El tono más fuerte del heatmap queda en
     6,2:1 con --color-text (AA); el número siempre va escrito en la celda. */
  --chart-line-width: 2px;    /* línea del gráfico y borde de sus puntos */
  --chart-bar-radius: 2px;    /* esquinas de las barras */
  --chart-dash: 4 4;          /* punteado del día en curso (todavía no cerró) */
  --color-data-tint: color-mix(in srgb, var(--color-data) 14%, transparent);  /* área bajo la línea */
  --color-heat-1: color-mix(in srgb, var(--color-data) 8%, var(--color-surface));
  --color-heat-2: color-mix(in srgb, var(--color-data) 16%, var(--color-surface));
  --color-heat-3: color-mix(in srgb, var(--color-data) 24%, var(--color-surface));
  --color-heat-4: color-mix(in srgb, var(--color-data) 32%, var(--color-surface));
  --color-heat-5: color-mix(in srgb, var(--color-data) 40%, var(--color-surface));
  --heat-swatch-size: 14px;          /* cuadradito de la escala del heatmap */
  --funnel-bar-height: 4px;          /* barrita "pasó del paso anterior" del embudo */
  --funnel-campaign-width: 200px;    /* columna de la campaña en la tabla del embudo (desde 900 px) */

  /* ── 12. Fondo del inicio: arte del trono y videos ─────────── */
  /* El arte del trono es el respaldo: se ve mientras carga el video, si el
     navegador no lo deja reproducir, con movimiento reducido y con "Pausar
     animaciones". El primer video arranca desde ese mismo encuadre, así que el
     fundido no salta. Los videos se suman tirándolos en assets/video/hero/
     (ver hero-slider.md). Rutas relativas a este archivo. */
  --home-backdrop-image: url("../../img/hero/trono-1536.webp");
  --home-backdrop-image-mobile: url("../../img/hero/trono-movil.webp");  /* 576 x 1024, recorte centrado */
  /* Cuánto se oscurece el fondo para que el texto se lea: fuerte del lado del
     texto, más claro hacia el personaje. En el celular el texto va arriba y a
     todo el ancho (se oscurece de arriba hacia abajo); desde 900 px va a la
     izquierda (de izquierda a derecha, ver el @media de abajo). */
  --backdrop-overlay-direction: to bottom;
  --backdrop-overlay-strong: color-mix(in srgb, var(--color-bg) 88%, transparent);
  --backdrop-overlay-light: color-mix(in srgb, var(--color-bg) 30%, transparent);
  --backdrop-overlay-reach: 75%;     /* dónde termina de aclararse (alto o ancho de pantalla) */
  --backdrop-overlay-content: color-mix(in srgb, var(--color-bg) 70%, transparent);  /* bajo noticias y eventos */
  /* Recorte del video y del arte: el emperador está en el centro del cuadro */
  --backdrop-position: center;
  --home-hero-min-height: 80vh;      /* el inicio ocupa casi toda la primera pantalla */
  --home-hero-intro-width: 36rem;    /* ancho del texto del inicio */

  /* ── 13. Personajes a los costados ─────────────────────────── */
  /* Arte fijo en los márgenes libres de las pantallas anchas (desde 1100 px),
     en todas las páginas menos el inicio (que tiene el video). Para cambiar un
     personaje se edita solo su línea; la ruta es relativa a este archivo.
     Imágenes verticales (768 x 1376): se estiran al alto de la ventana. */
  --side-art-left: url("../../img/side-art/knight.webp");   /* izquierda: caballero */
  --side-art-right: url("../../img/side-art/elf.webp");     /* derecha: elfa */
  --side-art-overlap: 140px;  /* cuánto se mete la imagen debajo del borde del contenido */
  --side-art-fade: 45%;       /* desde dónde se funde hacia el centro (del ancho de la imagen) */
  --side-art-opacity: 0.85;
  --side-art-mask-solid: black; /* en una máscara solo cuenta la opacidad: negro = se ve entera */
  /* Provisorio hasta tener personajes nuevos: los actuales tienen violeta y
     turquesa, y un filtro cálido los acerca al granate. Va en el contenedor y
     no en las figuras porque la "respiración" (base.css §17l) ya anima el
     filter de cada figura. Sin personajes nuevos, "none" los deja como son. */
  --side-art-filter: grayscale(1) sepia(1) hue-rotate(-28deg) saturate(1.6) brightness(0.8);

  /* ── 14. Logo de la marca ──────────────────────────────────── */
  /* El escudo de la marca (assets/img/brand/, derivadas de R-37). Cambiar
     de logo es cambiar estas dos líneas. El chico va en el header; el grande,
     en el encabezado de cada página (templates/brand_mark.php), arriba de la
     edición (brand.edition de site.json). Decorativo: la marca ya está en el
     header del sitio. Rutas relativas a este archivo. */
  --logo-emblem-small: url("../../img/brand/logo-240.webp");
  --logo-emblem: url("../../img/brand/logo-480.webp");
  --logo-emblem-aspect-ratio: 1;                   /* el escudo es cuadrado */
  --brand-mark-size: clamp(5rem, 28vw, 7rem);      /* ancho del escudo en el celular: arriba del título */
  --brand-mark-size-desktop: 7.5rem;               /* desde 900 px: a la derecha del título */
  --brand-mark-edition-letter-spacing: 0.3em;      /* "SEASON 6", espaciado */
  --brand-mark-line-width: var(--space-xl);        /* rayitas doradas a los costados de la edición */
  --brand-mark-glow-radius: var(--space-md);
  --brand-mark-glow: var(--color-brand-glow);      /* halo de rubí detrás del escudo */
  /* Oro metálico gastado, con bisel de bronce: el nombre en el header y el pie,
     el título del inicio y el botón principal */
  --brand-mark-gold-gradient: linear-gradient(180deg, var(--palette-gold-100) 0%, var(--palette-gold-350) 42%, var(--palette-gold-500) 72%, var(--palette-gold-400) 100%);

  /* ── 15. Adornos de la marca (D-19) ────────────────────────── */
  /* Marco heráldico, estandartes y texturas. Son decoración: cambiar uno de
     estos tokens cambia el adorno en todo el sitio. Los SVG en línea llevan
     sus colores escritos (un data-URI no lee variables): son el oro viejo
     (--palette-gold-400 / -600) y el rubí (--palette-ruby-500). */
  --frame-inset: 3px;                        /* hueco entre los dos ribetes del marco de las tarjetas */
  --frame-line-mix: 45%;                     /* cuánto oro tiene el ribete interior del marco */
  --pennant-notch: 82%;                      /* dónde termina la punta del estandarte del podio */
  --ornament-flourish-width: 180px;          /* filigrana bajo los títulos de sección */
  --ornament-flourish-height: 14px;
  --chip-gem-size: 6px;                      /* rubí chico de los chips dorados */
  --page-glow-size: 90% 50%;                 /* terciopelo granate arriba de la página */
  --card-glow-shape: 120% 80% at 50% 0%;     /* luz suave de arriba en el fondo de las tarjetas */
  /* Ribete doble bajo el header: una línea oscura y, debajo, una dorada */
  --header-ribbon: 0 3px 0 -1px var(--color-surface-sunken), 0 4px 0 -1px var(--color-valuable-deep);
  --page-glow-mix: 28%;                      /* tenue: el granate acompaña, no tiñe la página */
  --button-bevel-light: color-mix(in srgb, white 45%, transparent);   /* luz del bisel del botón principal */
  --button-bevel-shade: color-mix(in srgb, black 30%, transparent);   /* sombra del bisel */
  --button-bevel: inset 0 1px 0 var(--button-bevel-light), inset 0 -2px 0 var(--button-bevel-shade);  /* bisel del botón principal */
  --texture-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --ornament-flourish: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 14'%3E%3Cg fill='none' stroke='%23a9803f' stroke-width='1'%3E%3Cpath d='M0 7h70M110 7h70'/%3E%3Cpath d='M70 7c6-6 12-6 14 0-2 6-8 6-14 0zM110 7c-6-6-12-6-14 0 2 6 8 6 14 0z'/%3E%3C/g%3E%3Cpath d='M90 1l6 6-6 6-6-6z' fill='%23d01e2a' stroke='%23d8b06a'/%3E%3C/svg%3E");
  --page-damask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M24 4l8 20-8 20-8-20z' fill='none' stroke='%23d8b06a' stroke-opacity='.05'/%3E%3Ccircle cx='24' cy='24' r='2' fill='%23d8b06a' fill-opacity='.06'/%3E%3C/svg%3E");
}

@media (min-width: 700px) {
  :root { --fx-ember-count: 60; }  /* brasas en pantallas anchas (en el celular, 22) */
}

@media (min-width: 900px) {
  :root { --backdrop-overlay-direction: to right; }  /* el texto del inicio va a la izquierda */
}

/* Movimiento reducido (ajuste del sistema operativo): nada se desplaza.
   Los colores siguen cambiando (no es movimiento) y lo demás pasa al
   instante. base.css además apaga cada animación por nombre. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
    --duration-fill: 0ms;
    --stagger-step: 0ms;
    --reveal-distance: 0px;
    --press-scale: 1;
    --pop-scale: 1;
  }
}