@font-face {
    font-family: "Bricolage Grotesque";
    src:
        url("fonts/BricolageGrotesque_36pt-Regular.woff2") format("woff2"),
        url("fonts/BricolageGrotesque_36pt-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Unbounded";
    src:
        url("fonts/Unbounded-VariableFont_wght.woff2") format("woff2"),
        url("fonts/Unbounded-VariableFont_wght.woff") format("woff");
    font-weight: 700;
    font-style: bold;
    font-display: swap;
}

:root {

    --main-font: "Bricolage Grotesque", sans-serif;
    --display-font: "Unbounded", sans-serif;


    --color-principal: #00ce7c;
    --color-contraste: #535386;
    --color-secundario: #;
    --complemento: #;
    --color-claro: #dcdae9;
    --neutro: ;
    --highlight: #dcdae9;


    --texto-menu: var(--color-principal);
    --hover-menu: var(--color-principal);
    --hover-menu-texto: var(--color-contraste);

    /* Iconos */
    --iconos-redes: var(--color-principal);
    --icono-wa: var(--complemento);

    /* Botones */
    --boton-1: var(--color-contraste);
    --texto-boton-1: var(--color-principal);
    --hover-boton-1: var(--color-claro);
    --texto-hover-boton-1: var(--color-contraste);

    --boton-2: transparent;
    --texto-boton-2: var(--color-principal);
    --hover-boton-2: var(--color-contraste);
    --texto-hover-boton-2: var(--color-principal);

    /* Backgrounds  */
    --bg-body: #000;
    --bg-footer: transparent;
    --blanco: #fff;
    --g1: #ccc;


    --texto-footer: var(--color-principal);


    /* Tamaños de letra */
    --size-menu: 15pt;
    --size-footer: 12pt;
    --texto-precio: 16pt;
    --texto-desc: 14pt;
    --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;
}

/* 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;
}