/**
 * Témini — variables de diseño (:root)
 */

:root {
    /* Colores */
    --rec: #EA0909;

	--black: #0A0A0A;
    --dark-grey: #4A4A4A;
    --grey: #8F8F8F;
    --light-grey: #E9E9E9;
    --white: #FCFCFC;

    /* Tamaños de texto */
    --h1: 4rem;
    --h2: 3.5rem;
    --h3: 2.125rem;
    --h4: 1.75rem;
    --h5: 1.5rem;
    --h6: 1.25rem;

    --p-xl: 1.5rem;
    --p-l: 1.25rem;
    --p-m: 1rem;
    --p-s: 0.83rem;

    --a-nav: 1rem;
    --a-btn: 1.25rem;
    --p-eyebrow: 1.125rem;

    /* Fuentes*/
    --font-titles: 'Figtree', sans-serif;
    --font-text: 'Work Sans', sans-serif;
    --font-decorative: 'Syne', serif;

    /* Espaciados */
    --size-xxs: .25rem; /* 4px */
    --size-xs: 1rem; /* 16px */
    --size-s: 1.5rem; /* 24px */
    --size-m: 2.25rem; /* 36px */
    --size-l: 4rem; /* 64px */
    --size-xl: 8rem; /* 128px */

    --lateral-pad: 8rem; /* 128px */
    --lateral-pad-s: 1.5rem; /* 24px */
    --section-pad: 8rem; /* 128px */
    --section-pad-s: 4rem; /* 64px */

    /* Radius */
    --radius-s: 8px;
    --radius-m: 16px;
    --radius-l: 36px;

    /* Medidas útiles */
    --container-width: 1920px;
    --half-section: min(calc(var(--container-width) / 2), calc(50dvw - var(--lateral-pad)));
    --admin-bar-height: 0px;

    /* Otros */
    --cookie-button-size: 32px;
    --cookie-button-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
    --cookie-button-radius: 6px;
    --cookie-button-background: var(--dark-grey);
    --cookie-button-color: var(--light-grey);

    --cookie-button-gap: 6px;

    /* Responsive */
    @media only screen and (max-width: 1239px) {  
        --container-width: 940px;
    }
    
    @media only screen and (max-width: 959px) {
        --container-width: 708px;
    }
    
    @media only screen and (max-width: 767px) {
        --lateral-pad: 1.5rem;

        --container-width: 767px;

        --cookie-button-size: 24px;
    }

    /* Scrollbar */
    scrollbar-color: var(--white) var(--black);
    scrollbar-width: thin;
}