:root {

--main-font: "Baskervville", serif;
--display-font: "gyst-variable", sans-serif;


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

/* Colores */
--color-principal: #ee7eba;
--color-contraste: #901c4b;
--color-claro: #efefef;
--color-secundario: #fcc74e;
--azul: #90c6ec;
--azul-bg: #1f2246;
--verde: #3a913f;
--verde-bg: #1c4220;
--rojo: #A6192E;
--color-encabezados: #111;
--blanco: #fff;

/* Header */
--franja-header: #A588A4;
--texto-menu: var(--color-contraste);
--hover-menu: #A588A4;
--texto-hover-menu: #efefef;
--bg-submenu: #efefef;
--texto-submenu: #878181;

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

/* Botones */
--boton-1: var(--color-principal);
--texto-boton-1: var(--color-contraste);
--hover-boton-1: var(--color-contraste);
--texto-hover-boton-1: var(--color-principal);
--boton-2: var(--color-secundario);
--texto-boton-2: var(--color-contraste);
--hover-boton-2: var(--color-contraste);
--texto-hover-boton-2: var(--color-secundario);
--boton-3: #d6ccd7;
--texto-boton-3: #A588A4;
--hover-boton-3: #A588A4;
--texto-hover-boton-3: #efefef;
--boton-4: transparent;
--borde-boton-4: var(--color-contraste);
--texto-boton-4: var(--color-contraste);
--hover-boton-4: var(--color-contraste);
--texto-hover-boton-4: var(--color-principal); 

/* Backgrounds  */
--bg-portada: var(--color-principal);
--texto-portada: var(--color-secundario);
--bg-carrito: #efefef;
--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-newsletter: var(--color-principal);
--bg-newsletter-texto: var(--color-contraste);

--bg-footer: var(--color-contraste);
--texto-footer: var(--color-secundario);


/* Tamaños de letra */
--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: .8;}
.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.lucrecia {
background-color: hsla(335, 67%, 33%, 1);
    background-image:
        radial-gradient(at 0% 84%, hsla(327, 51%, 30%, 1) 0px, transparent 50%),
        radial-gradient(at 80% 100%, hsla(241, 0%, 0%, 1) 0px, transparent 50%),
        radial-gradient(at 6% 7%, hsla(326, 8%, 9%, 1) 0px, transparent 50%);
}
.deg.reves {transform:rotate(180deg);opacity: .85}


.deg.rad.inv {
background: #000;
background: radial-gradient(circle, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.25) 100%);
	opacity: .95
}

/* Loader */

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



.indicador span.activo::after {
  content: url('../img/INDICADOR.svg');
  width: 4rem;
  height: 4rem;
  display: block;
    position: absolute;
    top: -20px;
    left: 0;
    z-index: 33;
}

.indicador span.intermedio{
}

.indicador span.activo.bajo.medio::after,
.indicador span.activo.medio.bajo::after{
    left: 10%;
}

.indicador span.activo.medio.alto::after{
    left: 50%;
}


figure.texturafondo{
	background-size: 50vh;
	background-repeat: repeat;
	background-image: url('../img/lucrecia_ilustracion.svg');
}