@font-face {
    font-family: "CY Grotesk";
    src:
        url("fonts/CyGrotesk-WideHeavy.woff2") format("woff2"),
        url("fonts/CyGrotesk-WideHeavy.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}



:root {

    --main-font: "atyp-bl-variable", sans-serif;
    --display-font: "CY Grotesk", sans-serif;

    --rojo-claro: #ffa7a6;
    --rojo: #e00201;
    --rojo-bg: #ba0200;

    --cremita: #f7eedc;
    --cremita-med: #ffdf8e;
    --terra: #a84b3d;

    --naranja-claro: #fcb8a6;
    --naranja: #fe3f00;
    --naranja-bg: #cf3400;
    
    --turquesa: #01edba;
    --turquesa-med: #06ac7f;
    --verde-bg: #01540d;
    
    --rosita-claro: #f5a8d6;
    --rosita: #fe43bc;
    --rosita-bg: #8c1463;
    
    --verde-claro: #e8fcae;
    --limon: #c1fd1d;
    --limon-bg: #729410;
    
    --color-claro: #ECF4E5;
    --neutro: #b7b6b6;
    --negro: #1e1c1d;


    --iconos-redes: var(--cremita);
    --icono-carrito: var(--color-contraste);
    --icono-wa: var(--complemento);


    --color-menu: var(--rojo);
    --bg-menu: var(--cremita);
    --color-hover-menu: var(--rojo-bg);
    
    /* Botones */
    --boton-1: var(--color-contraste);
    --texto-boton-1: #efefef;
    --hover-boton-1: var(--color-claro);
    --texto-hover-boton-1: var(--color-contraste);
    --boton-2: var(--color-contraste);
    --texto-boton-2: var(--color-claro);
    --hover-boton-2: var(--color-claro);
    --texto-hover-boton-2: var(--color-contraste);
    --boton-3: #d6ccd7;
    --texto-boton-3: #A588A4;
    --hover-boton-3: #A588A4;
    --texto-hover-boton-3: #efefef;
    --boton-4: transparent;
    --borde-boton-4: #ffffff;
    --texto-boton-4: #ffffff;
    --hover-boton-4: #d6ccd7;
    --texto-hover-boton-4: #A588A4;


    /* Backgrounds  */
    --icono-carrito: #878181;
    --bg-carrito: var(--color-claro);
    --texto-carrito: #878181;
    --hover-input: #d6ccd7;
    --texto-hover-input: #A588A4;
    --texto-simple: #878181;
    --bg-best-seller: #ffffff;
    --bg-tarjeta-producto: #fbfbfb;
    --hover-bg-tarjeta: #efefef;
    --bg-colecciones: #ffffff;
    --bg-ocasiones: #ffffff;
    --hover-ocasiones: #A588A4;
    --bg-newsletter: #efefef;
    --bg-footer: var(--color-contraste);
    --texto-footer: var(--color-claro);


    --blanco: #fff;
    --g1: #ccc;


    /* Tamaños de letra */
    --texto-precio: 16pt;
    --texto-desc: 14pt;
    --texto-menu: 16px;
    --texto-detalle: 10pt;
    --iconos: 18pt;

    /* Padding */
    --pad-sec: 80px 40px;
    --pad-boton: 10px 20px;
    --pad-caja: 20px;


}



/* Filtros */

.deg {
    background: rgb(0, 0, 0);
    background: -moz-linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.758140756302521) 99%);
    background: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.758140756302521) 99%);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.758140756302521) 99%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="var(--color-contraste)000", endColorstr="var(--color-contraste)000", GradientType=1);
    opacity: .7;
    z-index: 1;
    width: 100%;
    min-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
}

.deg.reves {
    transform: rotate(180deg);
    opacity: .45
}

.deg.rad {
    background: #1c1626;
    background: radial-gradient(circle, rgba(28, 22, 38, 1) 0%, rgba(20, 13, 23, 0) 100%);
    opacity: .5;
}

.grayscale {
    filter: none;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    -webkit-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
}

.deg.bh {
    opacity: 1;
    background-color: hsla(185, 48%, 62%, 1);
    position: absolute;
    top: 0;
    left: 0;
    max-height: 100vh;
    width: 100%;
    z-index: 0;
    background-size: 120% 120%;
    background-image:
        radial-gradient(at 94% 50%, hsla(29, 95%, 47%, 1) 0px, transparent 50%),
        radial-gradient(at 72% 34%, hsla(101, 68%, 71%, 1) 0px, transparent 50%),
        radial-gradient(at 74% 6%, hsla(189, 100%, 56%, 1) 0px, transparent 50%),
        radial-gradient(at 49% 51%, hsla(42, 100%, 50%, 1) 0px, transparent 50%),
        radial-gradient(at 65% 56%, hsla(29, 95%, 47%, 1) 0px, transparent 50%),
        radial-gradient(at 25% 83%, hsla(29, 95%, 47%, 1) 0px, transparent 50%),
        radial-gradient(at 86% 33%, hsla(29, 95%, 47%, 1) 0px, transparent 50%),
        radial-gradient(at 86% 89%, hsla(185, 48%, 62%, 1) 0px, transparent 50%),
        radial-gradient(at 67% 31%, hsla(42, 100%, 50%, 1) 0px, transparent 50%);
    animation: gradient-animation 4s ease infinite;
}

@keyframes gradient-animation {
    0% {
        background-position: 0% 50%;
        background-size: 100% 100%;
    }

    50% {
        background-position: 100% 50%;
        background-size: 140% 140%;
    }

    100% {
        background-position: 0% 50%;
        background-size: 100% 100%;
    }
}

/* Loader */

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f0f0f0;
    /* change if the mask should be a color other than white */
    z-index: 99;
    /* makes sure it stays on top */
}

#status {
    width: 240px;
    height: 240px;
    position: absolute;
    left: 50%;
    /* centers the loading animation horizontally on the screen */
    top: 50%;
    /* centers the loading animation vertically on the screen */
    background-image: url(img/loading.gif);
    /* path to your loading animation */
    background-size: 100px;
    background-repeat: no-repeat;
    background-position: center;
    margin: -100px 0 0 -100px;
}


footer a,
footer h4,
footer nav.menu a {
    color: var(--texto-footer);
    font-weight: 400;
}