:root{
    /*COLOR CUERPO*/
    --color-body: rgb(240,242,245);

    /*COLOR BARRA LATERAL*/
    --color-barra-lateral:rgb(255,255,255);
    --color-scroll-aside:rgb(192,192,192);
    --color-scroll-aside-hover:rgb(134,134,134);
    --color-texto-aside: rgb(101,103,107);
    --color-fondo-texto-aside-hover:rgb(238,238,238);
    --color-texto-aside-hover:rgb(0,0,0);
    
    /*COLOR ENCABEZADO*/
    /*menu_navegacion*/
    --color-menu_navegacion:rgb(255,255,255);
    --color-texto-menu_navegacion: rgb(101,103,107);
    /*Color modo oscuro*/
    --color-base-modo_oscuro:rgb(201,202,206);
    --color-circulo-modo_oscuro:rgb(241,241,241);
    /*menu_buscador*/
    --color-icono-texto-buscador: rgb(132,132,132);
    --color-fondo-icono-buscador: rgb(228,230,235);
    --color-icono-menu-buscador: rgb(5,5,5);
    --color-fondo-hover-icono-buscador: rgb(216,218,223);
    /*menu_extra*/
    --color-texto-menu_extra: rgb(5,5,5);
    /*opciones usuario*/
    --color-fondo-opciones-usuario: rgb(252,252,252);
    --color-texto-opciones-usuario: rgb(61,61,62);
    --color-fondo-texto-opciones-usuario: rgb(242,242,242);

    /*ESTILOS CAROUSEL*/
    --color-carrousel-topic: rgb(0,0,0);
    --color-carrousel-des: rgba(85,85,85,0.6);
    --color-carrousel-title: rgb(5,5,29);
    --color-carrousel-boton: rgb(5,5,29);
    --color-carrousel-boton_hover: rgb(238,238,238);
    --color-fondo-carrousel-boton: rgb(216,218,223);
    /*estilo del item1*/
    --item1-transform: translateX(-100%) translateY(-5%) scale(1.5);
    --item1-filter: blur(30px);
    --item1-zIndex: 11;
    --item1-opacity: 0;
    /*estilo del item2*/
    --item2-transform: translateX(0);
    --item2-filter: blur(0px);
    --item2-zIndex: 10;
    --item2-opacity: 1;
    /*estilo del item3*/
    --item3-transform: translate(50%,10%) scale(0.8);
    --item3-filter: blur(10px);
    --item3-zIndex: 9;
    --item3-opacity: 1;
    /*estilo del item4*/
    --item4-transform: translate(90%,20%) scale(0.5);
    --item4-filter: blur(30px);
    --item4-zIndex: 8;
    --item4-opacity: 1;
    /*estilo del item5*/
    --item5-transform: translate(120%,30%) scale(0.3);
    --item5-filter: blur(40px);
    --item5-zIndex: 7;
    --item5-opacity: 0;

    /*ESTILO SECCIONES DE LA PAGINA PRINCIPAL*/
    --color-contenido: rgb(255,255,255);
    --color-titulo-contenido: rgb(5,5,29);
    --color-parrafo-contenido: rgb(58,59,60);

    /*FOOTER*/
    --color-contenido-footer: rgb(97,97,96);

    /*COLOR ENCABEZADO SIMPLE*/
    --color-fondo-icono: rgb(228,230,235);
    --color-icono-volver: rgb(5,5,5);
    --color-fondo-hover-icono: rgb(216,218,223);

    /*ESTILOS DE LA PAGINA DE INICIAR SESION*/
    /*estilo cuerpo total*/
    --color-body: rgb(240,242,245);
    --color-contenido: rgb(255,255,255);
    --color-titulo-contenido: rgb(5,5,29);
    --color-parrafo-contenido: rgb(58,59,60);
    --color-fondo-icono: rgb(228,230,235);
    --color-icono-volver: rgb(5,5,5);
    --color-fondo-hover-icono: rgb(216,218,223);
    --color-icono: rgb(132,132,132);
    --color-fondo-form: rgb(132,132,132);
    --color-titulo-form: rgb(228,230,223);
    --color-borde-boton: 2px solid rgb(132,132,132);
    --color-fondo-boton: rgb(132,132,132);
    --color-icono-mostrar-contraseña: rgb(132,132,132);
    /*estilos encabezado*/
    --color-fondo-hero_1:rgb(255,255,255);
    --color-fondo-hover-carrito_favoritos: rgba(0,0,0,0.15);
    /*Estilo switch*/
    --color-switch-base :rgb(201,202,206);
    --color-switch-circulo:rgb(241,241,241);
    /*alarma*/
    --exito: #3ab65c;
	--error: #bf333b;
	--info: #1898c0;
	--warning: #bc8c12;
	--exito-hover: #2d8a46;
	--error-hover: #962a31;
	--info-hover: #147fa0;
	--warning-hover: #9b7512;

    /*ESTILOS DE LA PÁGINA SOBRE_NOSOTROS*/
    --color-parrafo-form: rgb(228,230,223);

    /*ESTILOS DE LA PÁGINA PREGUNTAS_FRECUENTES*/
    --color-preguntas: rgb(5,5,29);

    /*Estilo de productos*/
    --color-titulo-producto: rgb(97,97,112);




    --color-fondo-producto: rgb(255,255,255);
    --color-fondo-icono-producto: rgb(228,230,235);
    --color-icono-producto: rgb(5,5,5);
    /*--color-borde-producto: rgb(225,225,225);*/
    --color-sombreado-producto: 0 4px 8px rgba(0, 0, 0, 0.2);
    --color-borde-icono-producto: rgb(5,5,5);
    --color-texto-informacion_producto: rgb(5,5,5);
}
.dark-mode{
    /*COLOR CUERPO*/
    --color-body: rgb(24,25,26);

    /*COLOR BARRA LATERAL*/
    --color-barra-lateral:rgb(44,45,49);
    --color-scroll-aside: rgb(68,69,74);
    --color-scroll-aside-hover: rgb(85,85,85);
    --color-texto-aside: rgb(110,110,117);
    --color-fondo-texto-aside-hover:rgb(0,0,0);
    --color-texto-aside-hover:rgb(238,238,238);

    /*COLOR ENCABEZADO*/
    /*menu_navegacion*/
    --color-menu_navegacion:rgb(36,37,38);
    --color-texto-menu_navegacion: rgb(176,179,184);
    /*Color modo oscuro*/
    --color-base-modo_oscuro:rgb(39,205,64);
    --color-circulo-modo_oscuro:rgb(255,255,255);
    /*menu_buscador*/
    --color-fondo-icono-buscador: rgb(58,59,60);
    --color-icono-menu-buscador: rgb(228,230,235);
    --color-fondo-hover-icono-buscador: rgb(78,79,80);
    /*menu_extra*/
    --color-texto-menu_extra: rgb(228,230,235);
    /*opciones usuario*/
    --color-fondo-opciones-usuario: rgb(37,39,40);
    --color-texto-opciones-usuario: rgb(222,224,228);
    --color-fondo-texto-opciones-usuario: rgb(59,61,62);

    /*ESTILOS CAROUSEL*/
    --color-carrousel-topic: rgb(255,255,255);
    --color-carrousel-des: rgb(176,179,184);
    --color-carrousel-title: rgb(228,230,223);
    --color-carrousel-boton: rgb(228,230,223);
    --color-carrousel-boton_hover: rgb(238,238,238);
    --color-fondo-carrousel-boton: rgb(78,79,80);

    /*ESTILO SECCIONES DE LA PAGINA PRINCIPAL*/
    --color-contenido: rgb(36,37,38);
    --color-titulo-contenido: rgb(228,230,223);
    --color-parrafo-contenido: rgb(212,212,212);

    /*FOOTER*/
    --color-contenido-footer: rgb(36,37,38);

    /*COLOR ENCABEZADO SIMPLE*/
    --color-fondo-icono: rgb(58,59,60);
    --color-icono-volver: rgb(228,230,235);
    --color-fondo-hover-icono: rgb(78,79,80);

    /*ESTILOS DE LA PAGINA DE INICIAR SESION*/
    /*estilo cuerpo total*/
    --color-body: rgb(24,25,26);
    --color-contenido: rgb(36,37,38);
    --color-titulo-contenido: rgb(228,230,223);
    --color-parrafo-contenido: rgb(212,212,212);
    --color-fondo-icono: rgb(58,59,60);
    --color-icono: rgb(132,132,132);
    --color-fondo-hover-icono: rgb(78,79,80);
    --color-icono-volver: rgb(228,230,235);
    --color-fondo-form: rgb(255,255,255);
    --color-titulo-form: rgb(5,5,29);
    --color-borde-boton: 2px solid rgb(255,255,255);
    --color-fondo-boton: rgb(255,255,255);
    --color-icono-mostrar-contraseña: rgb(36,37,38);
    /*estilos encabezado*/
    --color-fondo-hero_1:rgb(36,37,38);
    --color-fondo-hover-carrito_favoritos: rgba(255,255,255,0.15);
    /*Estilo switch*/
    --color-switch-base :rgb(39,205,64);
    --color-switch-circulo:rgb(255,255,255);

    /*ESTILOS DE LA PÁGINA SOBRE_NOSOTROS*/
    --color-parrafo-form: rgb(5,5,29);

    /*ESTILOS DE LA PÁGINA PREGUNTAS_FRECUENTES*/
    --color-preguntas: rgb(228,230,223);

    /*Estilo de productos*/
    --color-titulo-producto: rgb(228,230,223);



    --color-fondo-producto: rgb(36,37,38);
    /*--color-fondo-producto: rgb(255,255,255);*/
    --color-fondo-icono-producto: rgb(58,59,60);
    --color-icono-producto: rgb(228,230,235);
    /*--color-borde-producto: rgb(24,25,26);*/
    --color-sombreado-producto: 0 4px 8px rgba(200, 200, 200, 0.2);
    --color-borde-icono-producto: rgb(228,230,235);
    --color-texto-informacion_producto: rgb(228,230,235);
}
*{
    margin: 0;
    padding: 0;
    outline: 0;
    border: 0;
    text-decoration: none;
    box-sizing: border-box;
}
body{
    height: 100vh;
    width: 100%;
    font-family: "Oswald", sans-serif;
    font-weight: 300;
    font-style: normal;
    background-color: var(--color-body);
}
html{
    font-size: 16px;
}
li{
    list-style-type: none;/*elimina los marcadores como puntos*/
}

/*ESTILOS DE LAS SECCIONES DE LA PAGINA PRINCIPAL*/
.titulo_secciones{
    width: 95%;
    max-width: 1250px;
    font-size: 1.5rem;
    color: var(--color-titulo-contenido);
    margin: 0 auto;
}
.contenido_secciones{
    max-width: 1250px;
    margin: 0 auto;
    width: 95%;
    background-color: var(--color-contenido);
    border-radius: 20px;
}
@media (max-width: 800px) {
    .titulo_secciones{
        font-size: 1.2rem;
    }
}