:root {

--main-font: "Onest", sans-serif;
--display-font: "Playfair Display", serif;
--condensed: "Barlow Condensed", sans-serif;


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

/* Colores */
--color-encabezados: #111;
--blanco: #fff; 

/* Base */
--color-principal: #fbfaea;
--color-secundario: #fdf7c7;
--color-contraste: #878181;
--color-claro: #efefef;
--color-claro-alt: #fbfbfb;

/*Header */
--franja-header: var(--color-principal);
--texto-menu: var(--color-contraste);
--hover-menu: var(--color-secundario);
--texto-hover-menu: var(--color-contraste);
--bg-submenu: var(--color-principal);
--texto-submenu: var(--color-contraste);

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

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

--boton-2: var(--color-secundario);
--texto-boton-2: var(--color-contraste);
--hover-boton-2: var(--color-contraste);
--texto-hover-boton-2: var(--color-claro);

--boton-3: #fcf29d;
--texto-boton-3: var(--color-contraste);
--hover-boton-3: var(--color-secundario);
--texto-hover-boton-3: var(--color-contraste);

--boton-4: transparent;
--borde-boton-4: var(--blanco);
--texto-boton-4: var(--blanco);
--hover-boton-4: var(--color-principal);
--texto-hover-boton-4: var(--color-contraste); 

--disabled: #eee;


/* Backgrounds  */
--bg-carrito: var(--color-principal);
--texto-carrito: var(--color-contraste);
--hover-input: var(--color-secundario);
--texto-hover-input: var(--color-claro);
--texto-simple: var(--color-contraste);
--bg-tarjeta: var(--color-secundario);
--texto-tarjeta: var(--color-contraste);
--bg-best-seller: #ffffff;
--bg-tarjeta-producto: var(--color-secundario);
--hover-bg-tarjeta: var(--color-principal);
--bg-colecciones: #ffffff;
--bg-ocasiones: #ffffff;
--hover-ocasiones: var(--color-secundario);
--hover-ocasiones-texto: var(--color-contraste);
--bg-newsletter: var(--color-secundario);
--bg-footer: var(--color-secundario);
--texto-footer: var(--color-contraste);



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

}



/* 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: scale(1.5) rotate(180deg); opacity: .5;}
.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;
}