/**
 * Archivo: assets/css/variables.css
 * Módulo: shop-core — variables de diseño generales.
 *
 * Sistema de variables propio (independiente del Personalizador de
 * Astra), pensado para las plantillas a medida del plugin (como la
 * portada) que sustituyen por completo la cabecera/pie de Astra en
 * vez de vivir dentro de su maquetación.
 *
 * Este archivo es EL sitio para cambiar colores, fuentes y tamaños en
 * cualquier plantilla a medida del proyecto — no hay que tocar PHP ni
 * buscar el valor repetido en varios archivos.
 */
:root {
    /* ===== Colores =====
       Ahora leen directamente de la paleta global de Astra
       (--ast-global-color-N, los mismos círculos del Personalizador,
       Apariencia -> Personalizar -> Colores). Así, cambiar un color
       ahí actualiza también esta portada — un único sitio real donde
       tocar los colores de toda la web.
       El valor después de la coma es el respaldo (fallback): solo se
       usa si por lo que sea la variable de Astra no estuviera
       disponible, nunca se ve en condiciones normales. */
    --sc-gold:    var(--ast-global-color-0, #C9A84C);   /* Dorado principal (acento) */
    /* Mismo dorado, como terna R,G,B suelta (23/9/2026) — para
       rgba(var(--sc-gold-rgb), 0.2) y similares, donde hace falta el
       color CON TRANSPARENCIA: rgba() no puede tomar directamente
       --sc-gold (una función CSS no puede "abrir" un color ya resuelto
       en sus tres componentes; hace falta la terna aparte).
       OJO — LIMITACIÓN REAL: a diferencia de --sc-gold (que si el
       dorado se cambia desde el Personalizador de Astra, todo lo que
       use var(--sc-gold) sigue ese cambio solo), este valor NO seria
       ese cambio — es un número fijo, no una referencia a
       --ast-global-color-0 (Astra no expone ese color como terna
       R,G,B, solo como color ya resuelto, comprobado contra su CSS
       real). Sirve para que los ~170 rgba(201, 168, 76, …) sueltos que
       había repartidos por el CSS pasen a depender de UN solo sitio en
       vez de estar copiados por todas partes — pero si algún día se
       cambia el dorado desde el Personalizador, este valor hay que
       actualizarlo aquí a mano para que seguir combinando. */
    --sc-gold-rgb: 201, 168, 76;
    --sc-bg:      var(--ast-global-color-8, #111111);   /* Fondo negro (usado en toda la web) */
    --sc-surface: var(--ast-global-color-8, #111111);   /* Igual que --sc-bg: fondos unificados */
    --sc-text:    var(--ast-global-color-2, #F5F0E8);   /* Texto principal */
    --sc-muted:   var(--ast-global-color-3, #D0C8B8);   /* Texto secundario */
    --sc-subtle:  #887060;   /* Texto discreto (sin equivalente directo en Astra) */

    /* ===== Tipografías ===== */
    --sc-font-title: 'Cinzel', serif;
    --sc-font-body:  'Raleway', sans-serif;

    /* ===== Tamaños de letra — fluidos (16/9/2026, a petición de
       Javier: "en pantallas 2560x1440 el 100%... si te encuentras una
       pantalla de 1366x768 que baje un 20%... proporcional").
       clamp(mínimo, preferido, máximo): el "preferido" interpola en
       línea recta según el ancho de la ventana (100vw) entre estos dos
       puntos de referencia —
         2560px de ancho -> 100% (el valor de siempre, el que se ve en
                             el monitor de Javier al diseñar)
         1366px de ancho -> 80% (portátil normal, la resolución más
                             común — mismo criterio ya usado en
                             producto-single.css para la ficha de
                             producto, aquí se generaliza a TODA la
                             tipografía del sitio de una vez, al vivir
                             centralizada aquí)
       Por debajo de 1366px o por encima de 2560px, clamp() se queda
       fijo en el mínimo/máximo — no sigue encogiendo en el móvil (ahí
       ya hay sus propios ajustes por pantalla) ni sigue creciendo en
       monitores todavía más grandes.
       Los tres números de cada clamp() se recalcularon con esta
       fórmula estándar de "tipografía fluida" (mínimo = valor*0.8;
       máximo = valor de siempre; el término intermedio, en calc(), es
       la recta que une ambos extremos) — no son valores a ojo. */
    /* SUBIDA GENERAL DE LETRA (19/9/2026, a petición de Javier: "todo lo que
       se lee está muy pequeño y hay que esforzarse mucho"). Se subieron los
       cinco tamaños de lectura (card/caption/nav/small/label): máximos
       antes 14/12/11/13/10px, ahora 17/16/14.5/17/14px (mismo criterio
       fluido 80%/100%). En un monitor de 1920px el texto "small" pasaba
       de 11,6px a 15,2px. Los títulos (hero/title/logo) no se tocan. Las
       reglas con tamaños propios repartidas por los CSS se subieron con
       la misma escala. Para revertir de golpe la mayor parte, bastaría con
       devolver aquí esos cinco valores. */
    --sc-fs-hero:    clamp(38.40px, calc(27.417px + 0.8040vw), 48px);
    --sc-fs-title:   clamp(20.80px, calc(14.851px + 0.4355vw), 26px);
    --sc-fs-logo:    clamp(12.80px, calc(9.139px + 0.2680vw), 16px);
    --sc-fs-card:    clamp(13.60px, calc(9.710px + 0.2848vw), 17px);
    --sc-fs-caption: clamp(12.80px, calc(9.139px + 0.2680vw), 16px);
    --sc-fs-nav:     clamp(11.60px, calc(8.282px + 0.2429vw), 14.5px);
    --sc-fs-small:   clamp(13.60px, calc(9.710px + 0.2848vw), 17px);
    --sc-fs-label:   clamp(11.20px, calc(7.997px + 0.2345vw), 14px);
    /* --sc-fs-form (18/9/2026, a petición de Javier): campos de
       formulario (inputs/select/textarea de "Mi cuenta") se veían muy
       pequeños comparados con el desplegable de Provincia (Select2),
       que al no tener font-size propio hereda el tamaño base del texto
       normal del sitio (~17px en un monitor de referencia) — un
       contraste que se nota mucho al lado de --sc-fs-small (13px como
       mucho). Este token iguala ambos: máximo 17px (el tamaño que a
       Javier le gustó), mismo criterio de fluidez 80%/100% que el
       resto. */
    --sc-fs-form:    clamp(13.60px, calc(9.709px + 0.2848vw), 17px);

    /* ===== Botones ===== */
    --sc-btn-primary-bg:     var(--sc-gold);
    --sc-btn-primary-text:   var(--sc-bg);
    --sc-btn-primary-hover:  #E0BC60;
    --sc-btn-secondary-border: #555555;
    --sc-btn-radius:         10px;
}

/* ===== Pantallas pequeñas (25/9/2026, a petición de Javier: "para pantallas
   pequeñas reduce el tamaño de la letra; la cabecera se junta en dos líneas,
   no se ven los destacados, es ilegible"). Por debajo de 1366px la fórmula
   fluida de arriba se quedaba clavada en el 80% del tamaño grande, que en un
   portátil pequeño o una ventana estrecha seguía siendo demasiado. Aquí se
   baja un escalón más en dos tramos (≈ -10 % y ≈ -18 % sobre el mínimo
   anterior). Solo cambian los tokens --sc-fs-*; para ajustar, se toca aquí. */
/* Título de cada pantalla (h1: categoría, Nuestra historia, historias,
   legales, 404, pantallas de gestión) — 30/9/2026, a petición de Javier:
   más pequeño que --sc-fs-hero (que queda solo para la portada) para que el
   contenido suba. 24px en pantallas estrechas. */
:root { --sc-fs-page-title: clamp(25.60px, calc(18.278px + 0.5360vw), 32px); }
@media (max-width: 900px) {
    :root { --sc-fs-page-title: 24px; }
}
@media (max-width: 1280px) {
    :root {
        --sc-fs-hero: 34px;
        --sc-fs-title: 19px;
        --sc-fs-logo: 12px;
        --sc-fs-card: 12.6px;
        --sc-fs-caption: 12px;
        --sc-fs-nav: 11px;
        --sc-fs-small: 12.6px;
        --sc-fs-label: 10.6px;
        --sc-fs-form: 12.6px;
    }
}
@media (max-width: 1100px) {
    :root {
        --sc-fs-hero: 30px;
        --sc-fs-title: 17.5px;
        --sc-fs-logo: 11.5px;
        --sc-fs-card: 12px;
        --sc-fs-caption: 11.5px;
        --sc-fs-nav: 10.5px;
        --sc-fs-small: 12px;
        --sc-fs-label: 10px;
        --sc-fs-form: 12px;
    }
}
/* Ventanas BAJAS (portátil 1366x768 = ~650px útiles): el título de la portada
   baja un poco más para que quepan botones y bloques sin tapar nada. */
@media (max-height: 720px) {
    :root { --sc-fs-hero: 32px; }
}
@media (max-height: 640px) {
    :root { --sc-fs-hero: 28px; }
}

/* ===== Barra de scroll dorada para toda la web (25/9/2026, Javier: "pon la
   barra de scroll para todos con los colores dorados"). Fina, con el pulgar
   dorado sobre el fondo oscuro. Las barras que ya tienen colores propios en
   algún sitio concreto (p. ej. ventanas de traducción) los conservan porque su
   regla es más específica. ===== */
/* Más discreta (25/9/2026: "no tan gorda"): 6px, pulgar dorado algo
   transparente y fondo invisible; se enciende al pasar el ratón. */
html {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--sc-gold-rgb), 0.55) transparent;
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(var(--sc-gold-rgb), 0.55);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--sc-gold); }

/* ===== Enlaces al pasar el ratón, en toda la web (29/9/2026, Javier: "cuando
   se pasa el ratón por un texto que te manda a alguna parte, te lo deja en
   negro y no se ve"). El Personalizador de Astra pone a TODOS los enlaces
   `a:hover, a:focus { color: var(--ast-global-color-4) }` = #111111, casi el
   mismo color que el fondo. Aquí se sustituye por un dorado claro.
   - Misma especificidad que la de Astra (a:hover) y este archivo se carga
     después, así que gana; cualquier regla con clase (.sc-x:hover) sigue
     mandando sobre esta.
   - :where(:not(...)) deja fuera los enlaces con forma de botón (clases con
     btn/boton/button), que suelen ser texto oscuro sobre dorado, sin subir
     la especificidad.
   Antes se había parcheado caso a caso (destacados-banner.css, categoria.css). */
a:where(:not([class*="btn"], [class*="boton"], [class*="button"])):hover,
a:where(:not([class*="btn"], [class*="boton"], [class*="button"])):focus {
    color: #E8CC7A;
}