@font-face {
    font-family: "DIN Neuzeit Grotesk Light";
    src:
        url("fonts/DINNeuzeitGroteskStd-Light.woff2") format("woff2"),
        url("fonts/DINNeuzeitGroteskStd-Light.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "DIN Neuzeit Grotesk Bold Condensed";
    src:
        url("fonts/DINNeuzeitGroteskStd-BdCond.woff2") format("woff2"),
        url("fonts/DINNeuzeitGroteskStd-BdCond.woff") format("woff");
    font-weight: 800;
    font-style: bold;
    font-display: swap;
}

:root {

    --main-font: "DIN Neuzeit Grotesk Light", sans-serif;
    --display-font: "DIN Neuzeit Grotesk Bold Condensed", sans-serif;


    --color-principal: #FB4E2A;
    --color-secundario: #16232B;
    --complemento: #BBB7AF;
    --color-contraste: #514D49;
    --highlight: #BEDEC5;

    --color-claro: #EEECE4;

    --texto-menu: #878181;
    --hover-menu: var(--color-principal);
    --texto-hover-menu: #efefef;
    --bg-submenu: #efefef;
    --texto-submenu: #878181;

    /* Iconos */
    --iconos-redes: var(--color-secundario);
    --icono-carrito: var(--color-contraste);
    --icono-wa: var(--complemento);

    /* Botones */
    --boton-1: var(--color-secundario);
    --texto-boton-1: var(--color-claro);
    --hover-boton-1: var(--color-principal);
    --texto-hover-boton-1: var(--color-claro);
    --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  */
    --body: var(--color-secundario);
    --bg-loader: var(--body);
    --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-secundario);
    --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.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;
}
.grayscale:hover {
	   filter: none;
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(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.brand {
    opacity: 1;
    background-color: var(--color-secundario);
    position: absolute;
    top: 0;
    left: 0;
    max-height: 100vh;
    width: 100%;
    z-index: 0;
    background-size: 120% 120%;
background-color: var(--color-secundario);
    background-image:
        radial-gradient(at 41% 46%, var(--color-principal) 0px, transparent 50%),
        radial-gradient(at 39% 5%, var(--color-principal) 0px, transparent 50%),
        radial-gradient(at 9% 11%,var(--color-secundario) 0px, transparent 50%),
        radial-gradient(at 97% 94%, var(--color-principal) 0px, transparent 50%),
        radial-gradient(at 2% 52%, var(--color-principal) 0px, transparent 50%);
}

.deg.brand.alt{
    background-color: var(--color-claro);
        background-image:
            radial-gradient(at 53% 38%, var(--color-complemento) 0px, transparent 50%),
            radial-gradient(at 39% 5%, var(--color-complemento) 0px, transparent 50%),
            radial-gradient(at 98% 2%, var(--color-claro) 0px, transparent 50%),
            radial-gradient(at 97% 94%, var(--color-complemento) 0px, transparent 50%),
            radial-gradient(at 57% 59%, var(--color-complemento) 0px, transparent 50%);
}

.noise {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background-image: url('../img/noisy-background.jpg');
    background-repeat: repeat;
    background-position: center;
    background-size: 4rem;
    mix-blend-mode: multiply;
}

@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%;
    }
}

.icon {
    background-image: url('../img/Anfiteatro_LogoSingleIcon_blanco.png');
    background-size: 6rem;
    background-position: center;
    min-height: 2rem;
    background-repeat: no-repeat;
}

/* Loader */

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-loader);
    /* 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;
}