/* ==========================================================================
   MARCA — único lugar para cambiar logos y colores de marca.
   - Logo vigente (2026-10-04): MILLO GAMES (controlador cromado + texto), PNG con fondo TRANSPARENTE
     (assets/img/brand/millo-games-logo-header.png, 2x). Se muestra directo sobre el tema oscuro, sin placa.
   - Logo anterior archivado fuera del sitio (archivo-imagenes-viejas/ en el repositorio) (rollback: volver a poner
     --brand-logo en ese archivo, --brand-logo-w/h 404/194 y --brand-plate #ffffff; o restaurar brand.css.bak-20261004r).
   - Slot "Millo Games" (--games-*) sigue APAGADO: el logo principal ya es Millo Games.
   - OJO: las rutas url() de estas variables se resuelven respecto de assets/css/styles.css (donde se usan),
     por eso empiezan con "../img/..." (igual que hoy).
   ========================================================================== */
:root {
  --brand-blue: #0066FF;                       /* azul de marca (oficial) */
  --brand-logo: url("../img/brand/millo-games-logo-header.png");
  --brand-logo-w: 326;                         /* proporción del archivo: ancho */
  --brand-logo-h: 112;                         /* proporción del archivo: alto  */
  --brand-logo-height: 42px;                   /* alto visible en el encabezado */
  --brand-plate: transparent;                  /* sin placa: el logo nuevo es transparente */
  --brand-plate-radius: 12px;

  /* Slot de Millo Games (apagado) */
  --games-slot: none;                          /* "none" = oculto · "block" = visible */
  --games-logo: none;                          /* p. ej. url("../img/brand/millo-games.svg") */
  --games-logo-w: 120px;
  --games-accent: #FF7A00;                     /* (slot Millo Games: sigue apagado; el naranjo ya se usa como acento del portal, ver abajo) */
}

/* ==========================================================================
   PALETA 2026-10 — todo el color de marca vive aquí (styles.css solo la consume).
   Fondo oscuro futurista + azul de marca + ACENTO NARANJO del logo + tonos PLATEADOS/metalizados.
   Contraste: el texto sobre naranjo usa --accent-ink (oscuro, ≥ 8:1); el naranjo como texto sobre fondo
   oscuro usa --accent-text (≥ 7:1). Los metales se hacen con gradientes CSS (cero imágenes).
   ========================================================================== */
:root {
  /* Contraste medido (WCAG): --accent-text sobre #070514/#181340 = 10,1 / 8,7 · --accent sobre #070514 = 7,7 ·
     --accent-ink sobre --accent = 7,4 (sobre --accent-lo 5,9) · textos de categoría (--cat-X-t) ≥ 8,0 · --silver-3 ≥ 5,6 · blanco sobre azul de marca = 4,8.
     Regla: un color de relleno (--cat-X, --accent) NO se usa como texto pequeño; para texto usa su variante -t / --accent-text. */
  /* --- Acento naranjo (logo) --- */
  --accent: #FF7A00;                           /* naranjo oficial del logo */
  --accent-hi: #FFA24D;                        /* claro: brillos, hover */
  --accent-lo: #E86A00;                        /* oscuro: degradados */
  --accent-text: #FFA24D;                      /* naranjo legible como TEXTO sobre fondo oscuro (AA+) */
  --accent-ink: #1A0B00;                       /* texto sobre fondo naranjo (AA+) */
  --accent-soft: rgba(255, 122, 0, .14);       /* relleno suave (chips/estados) */
  --accent-line: rgba(255, 122, 0, .55);       /* bordes y líneas */
  --accent-glow: rgba(255, 122, 0, .38);       /* resplandor moderado */
  --accent-grad: linear-gradient(135deg, #FFB067 0%, #FF7A00 48%, #E86A00 100%);

  /* --- Plata / acero (metal) --- */
  --silver-1: #F4F7FB;                         /* destello */
  --silver-2: #C9D1DC;                         /* plata */
  --silver-3: #8F9AAB;                         /* acero claro */
  --steel: #5B6678;                            /* acero */
  --steel-dark: #2A3142;                       /* acero oscuro */
  --metal-edge: linear-gradient(135deg, #F4F7FB 0%, #AEB8C6 22%, #69758A 46%, #CBD3DE 68%, #7D8899 100%);          /* marco metálico brillante */
  --metal-edge-soft: linear-gradient(135deg, rgba(244,247,251,.62) 0%, rgba(143,154,171,.34) 30%, rgba(91,102,120,.30) 55%, rgba(201,209,220,.46) 78%, rgba(125,136,153,.30) 100%); /* marco en reposo */
  --metal-sheen: linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.04) 38%, rgba(255,255,255,0) 52%);  /* reflejo superior de botones/tarjetas */
  --chrome-text: linear-gradient(180deg, #FFFFFF 0%, #E4EAF3 42%, #A7B2C3 54%, #EEF2F8 100%);                           /* títulos cromados */
  --silver-line: linear-gradient(90deg, transparent, rgba(201,209,220,.75) 20%, rgba(255,255,255,.95) 50%, rgba(201,209,220,.75) 80%, transparent); /* separador plateado */
  --header-line: linear-gradient(90deg, transparent, var(--brand-blue) 14%, var(--silver-2) 40%, var(--accent) 62%, var(--violet, #8b5cff) 86%, transparent);

  /* --- Profundidad (sombras) --- */
  --depth-1: 0 1px 0 rgba(255,255,255,.07) inset, 0 8px 22px rgba(2, 1, 12, .5);
  --depth-2: 0 1px 0 rgba(255,255,255,.10) inset, 0 16px 44px rgba(2, 1, 12, .62), 0 0 30px rgba(0, 102, 255, .16);
  --glow-blue: 0 0 22px rgba(0, 102, 255, .35);
  --glow-orange: 0 0 20px var(--accent-glow);

  /* --- Color propio por categoría (--cat-X = relleno/línea · --cat-X-t = texto sobre oscuro, AA) --- */
  --cat-arcade: #22E6FF;      --cat-arcade-t: #7DF0FF;
  --cat-cartas: #FF4FD0;      --cat-cartas-t: #FF9BE6;
  --cat-puzzles: #8B5CFF;     --cat-puzzles-t: #C7B2FF;
  --cat-deportes: #3CF0A0;    --cat-deportes-t: #8FFFCB;
  --cat-estrategia: #FFCF4A;  --cat-estrategia-t: #FFE08A;
  --cat-accion: #FF6B4A;      --cat-accion-t: #FF9F88;
}
[data-cat="arcade"]     { --cat: var(--cat-arcade);     --cat-t: var(--cat-arcade-t); }
[data-cat="cartas"]     { --cat: var(--cat-cartas);     --cat-t: var(--cat-cartas-t); }
[data-cat="puzzles"]    { --cat: var(--cat-puzzles);    --cat-t: var(--cat-puzzles-t); }
[data-cat="deportes"]   { --cat: var(--cat-deportes);   --cat-t: var(--cat-deportes-t); }
[data-cat="estrategia"] { --cat: var(--cat-estrategia); --cat-t: var(--cat-estrategia-t); }
[data-cat="accion"]     { --cat: var(--cat-accion);     --cat-t: var(--cat-accion-t); }