/*
 * bloques/_base/tema.css
 *
 * Tema de PlaySpain para el sistema de bloques. Se carga ANTES de base.css.
 *
 * Los bloques vienen del CMS de Veridika y leen sus colores de las variables
 * --vk-*. Aquí se les da el valor de la marca PlaySpain (las de
 * web/public/css/veridika.css: --color-verde, --color-amarillo, --color-beige…)
 * para no tener que tocar el CSS de cada bloque. Equivalencias de los temas:
 *
 *   bl-tema-crema    → beige PlaySpain
 *   bl-tema-oscuro   → verde PlaySpain
 *   bl-tema-amarillo → amarillo PlaySpain
 */

:root {
    --vk-crema: #eeeee7;
    --vk-crema-2: #e7e7e0;
    --vk-oscuro: #005740;
    --vk-oscuro-2: #004a36;
    --vk-oscuro-3: #0d6a51;
    --vk-blanco: #fff;
    --vk-amarillo: #ffb200;
    --vk-amarillo-2: #e6a000;
    --vk-texto: #2c2c2c;
    --vk-texto-2: #5c615e;
    --vk-texto-inv: #fff;
    --vk-texto-inv-2: rgba(255, 255, 255, .75);
    --vk-linea: rgba(44, 44, 44, .14);
    --vk-linea-inv: rgba(255, 255, 255, .18);

    --fuente: "Manrope", sans-serif;
    --fuente-mono: "Manrope", sans-serif;

    --ancho: 1400px;
    --margen: clamp(20px, 4vw, 40px);
    --aire: clamp(56px, 7vw, 100px);
    --alto-cabecera: 120px;

    --color-negro: #2c2c2c;
    --bl-color-primario: #005740;
}

/*
 * La web de PlaySpain da estilo a cualquier <header> dentro de .home e
 * .interior (veridika.css: posición y fondo blanco), pensando en la cabecera
 * del sitio. La cabecera de sección de los bloques (<header class="bl-cab">,
 * de bloque_cabecera()) no debe heredarlo.
 */
.home header.bl-cab,
.interior header.bl-cab {
    position: static;
    background: none;
}

/*
 * Estilos de botón que usan los bloques y que la web de PlaySpain no tiene.
 * Parten de .boton (veridika.css de PlaySpain), así heredan tamaño, radio y
 * transición; aquí solo se fija el color.
 */
.boton.boton-primary,
.boton.boton-negro {
    color: #fff;
    border-color: var(--vk-oscuro);
    background-color: var(--vk-oscuro);
}
.boton.boton-primary:hover,
.boton.boton-negro:hover {
    background: #fff !important;
    border-color: var(--vk-oscuro) !important;
    color: var(--vk-oscuro) !important;
}

.boton.boton-secondary {
    color: #fff;
    border-color: var(--vk-amarillo);
    background-color: var(--vk-amarillo);
}
.boton.boton-secondary:hover {
    background: var(--vk-oscuro) !important;
    border-color: var(--vk-oscuro) !important;
    color: #fff !important;
}

.boton.boton-linea {
    color: var(--vk-oscuro);
    border-color: var(--vk-oscuro);
    background-color: transparent;
}

.boton.boton-beige {
    color: var(--vk-oscuro);
    border-color: var(--vk-crema);
    background-color: var(--vk-crema);
}