:root{
    --primario: #9C27B0;
    --primarioSecundario: #082C4C;
    --secundario: #dddbd1;
    --secundarioOscuro: rgb(233,287,2);
    --blanco: #FFF;
    --negro: #000;
    
    --fuentePrincipal: 'Montserrat', sans-serif;
}
/*===GLOBALES===*/

html {
    box-sizing: border-box;
    font-size: 62.5%;
  }
  *, *:before, *:after {
    box-sizing: inherit;
  }

body{
    background-color: var(--blanco);
    font-size: 1.6rem;
    line-height: 1.5;
}
p{
    font-size: 2.5rem;
    font-family: var(--fuentePrincipal);
    color:var(--negro)
}
a{
    font-family: var(--fuentePrincipal);
}

*{
    text-decoration:none;
}
img{
    max-width: 100%;
}
.contenedor{
    max-width: 120rem;
    margin: 0 auto;
}
h1,h2,h3{
    text-align: center;
    color: var(--negro);
    font-family: var(--fuentePrincipal);
    margin: 0;
}

h1{
    font-size: 4rem;
}
h2{
    font-size: 3.2rem;
}
h3{
    font-size: 2.4rem;
}

li{
    color: var(--negro);
    font-family: var(--fuentePrincipal);
    margin: 0;
    font-size: 2.4rem;
}

.no-margin-abajo{
    margin-bottom: 0;
}

.no-margin{
    margin: 0;
}

.si-centrar{
    text-align: center;
}

.si-izquierda{
    text-align: left;
}

.margin-arriba_bloque{
    margin-top: 5rem;
}

.margin-arriba{
    margin-top: 2rem;
}

.margin-izquierda{
    margin-left: 2rem;
}
/*===HEADER====*/
.header{
    display: flex;
    justify-content: center;
}
.header__logo{
    margin: 0 0;
}

/*===NAVEGACION===*/
.navegacion{
    background-color: var(--primarioSecundario);
    padding: 1rem 0;
    display: flex;
    justify-content: center;
    gap: 2rem;
}
.navegacion__enlace{
    font-family: var(--fuentePrincipal);
    color: var(--secundario);
    font-size: 1.6rem;
    font-weight: bold;
    text-transform: uppercase;
}

.navegacion__enlace:hover,.navegacion__enlace--activo{
    color:var(--blanco)
}

/*===NAVEGACION HISTORIAL===*/

.navegacion_historial{
    background-color: #EBEBEB;
    padding: 1rem 0;
    display: flex;
    justify-content: center;
    gap: 1rem;
}
.navegacion_historial__enlace{
    font-family: var(--fuentePrincipal);
    color: var(--primarioSecundario);
    font-size: 1.1rem;
    
}

.navegacion_historial__enlace--activo{
    font-weight: bold;
}

.p__navegación_historial{
    font-size: 1.2rem;
}

/*===NAVEGACION RESPONSIVE===*/

.margin--btn_menu{
    margin-top: 1.5rem;
    margin-right: 1.5rem;
}

.btn-menu label{
    color: var(--negro);
    font-size: 25px;
    cursor: pointer;

}

.btn-menu--esconder{
    visibility: hidden;
}

#btn-menu{
    display: none;
}
.container-menu{
    position: absolute;
    background: rgba(0,0,0,0.5);
    width: 100%;
    height: 100vh;
    top: 0;left: 0;
    transition: all 500ms ease;
    opacity: 0;
    visibility: hidden;
}
#btn-menu:checked ~ .container-menu{
    opacity: 1;
    visibility: visible;
}
.cont-menu{
    width: 100%;
    max-width: 250px;
    background: #1c1c1c;
    height: 100vh;
    position: relative;
    transition: all 500ms ease;
    transform: translateX(-100%);
}
#btn-menu:checked ~ .container-menu .cont-menu{
    transform: translateX(0%);
}
.cont-menu nav{
    transform: translateY(15%);
}
.cont-menu nav a{
    display:block;
    text-decoration: none;
    padding: 20px;
    color: #c7c7c7;
    border-left: 5px solid transparent;
    transition: all 400ms ease;
}
.cont-menu nav a:hover{
    border-left: 5px solid #c7c7c7;
    background: #1f1f1f;
}
.cont-menu label{
    position: absolute;
    right: 5px;
    top: 10px;
    color: #fff;
    cursor: pointer;
    font-size: 18px;
}

/*===========================HOME========================================*/

/*===Slider===*/

.contenedor__slider{
   overflow: hidden;
    position: relative;
}

.slider{
    display: flex;
    width: 400%;
    margin-left: -100%;
}

.slider__section{
    width: 100%;
}

.slider__img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slider__btn{
    position:absolute;
    width: 4rem;
    height: 4rem;
    background: rgba(255,255,255,0.5);
    top: 50%;
    transform: translateY(-50%);
    font-size: 3rem;
    font-family:var(--fuentePrincipal);
    font-weight: bold;
    text-align: center;
    border-radius: 50%;
    cursor:pointer
}
.slider__btn:hover{
    background: var(--blanco);
    transition: background .6s ease;
}

.slider__btn--left{
    left: 1rem;
}

.slider__btn--right{
    right: 1rem;
}

/*===Slider_RESPONSIVE===*/
.contenedor__slider_responsive{
    overflow: hidden;
     position: inherit;
     display: none;
     visibility: hidden;
 }
 
 .slider_responsive{
     display: flex;
     width: 400%;
     margin-left: -100%;
 }
 
 .slider__section_responsive{
     width: 100%;
 }
 
 .slider__img_responsive{
     display: block;
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 /* .slider__btn_responsive{
     position:absolute;
     width: 4rem;
     height: 4rem;
     background: rgba(255,255,255,0.5);
     top: 50%;
     transform: translateY(-50%);
     font-size: 3rem;
     font-family:var(--fuentePrincipal);
     font-weight: bold;
     text-align: center;
     border-radius: 50%;
     cursor:pointer
 }
 .slider__btn_responsive:hover{
     background: var(--blanco);
     transition: background .6s ease;
 }
 
 .slider__btn--left_responsive{
     left: 1rem;
 }
 
 .slider__btn--right_responsive{
     right: 1rem;
 } */

/*===CARD===*/

.contenedor__servicios{
   overflow: hidden;
    position: relative;
}

.slider__servicios{
    display: flex;
    width: 500%;
    margin-left: -100%;
}

.slider__section_servicios{
    width: 100%;
}

.slider__img_servicios{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*===CARD_RESPONSIVE_TABLET===*/

.contenedor__servicios_responsive_tablet{
    overflow: hidden;
    position: inherit;
    display: none;
    visibility: hidden;
 }
 
 .slider__servicios_responsive_tablet{
     display: flex;
     width: 500%;
     margin-left: -100%;
 }
 
 .slider__section_servicios_responsive_tablet{
     width: 100%;
 }
 
 .slider__img_servicios_responsive_tablet{
     display: block;
     width: 100%;
     height: 100%;
     object-fit: cover;
 }
 

/*===CARD_RESPONSIVE_CELL===*/

.contenedor__servicios_responsive_cell{
    overflow: hidden;
    position:inherit;
    display: none;
    visibility: hidden;
 }
 
 .slider__servicios_responsive_cell{
     display: flex;
     width: 500%;
     margin-left: -100%;
 }
 
 .slider__section_servicios_responsive_cell{
     width: 100%;
 }
 
 .slider__img_servicios_responsive_cell{
     display: block;
     width: 100%;
     height: 100%;
     object-fit: cover;
 }
 
 .catalogo_titulo{
    font-size: 4rem;
    
}

/*===GRID===*/
.grid{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 2rem;
    justify-content: center;
}

/*===Catalago===*/

.catalago__imagen{
    border-radius: 2rem;
}

.catalago__imagen:hover{
    -webkit-box-shadow: 0px 5px 15px 3px rgba(0,0,0,0.34);
    -moz-box-shadow: 0px 5px 15px 3px rgba(0,0,0,0.34);
    box-shadow: 0px 5px 15px 3px rgba(0,0,0,0.34);
    transition: box-shadow .5s ease;
}




/*===========================FOOTER========================================*/
.footer{
    background-color: #c0dcf4;
    padding: 2rem;
}

.footer__grid{
   
    margin:2rem 0 0 0;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    column-gap: 2rem;

}

.footer--p{
    font-size: 1.2rem;
}

.footer__contacto__a{
    text-transform: uppercase;
    font-size: 1.2rem;
}

.footer__contacto__a:hover, .footer__telefonos--a:hover,.footer__telefonos--a--email:hover, .footer__redes--a:hover{
    text-decoration: underline;
}

.footer__telefonos--h3,.footer__redes--h3{
    text-align: left;
    font-size: 1.6rem;
}

.footer__telefonos--a, .footer__redes--a{
    font-size: 1.5rem;
}

.footer__telefonos--a--email{
    font-size: 1.2rem;
}

.footer__redes--posicion{
    vertical-align:top;
}

.footer--margin{
    margin: 0 0 .5rem 0;
}


/**===========================REDES SOCIALES BARRA========================================**/

.social-bar {
	position: fixed;
	right: 0;
	top: 30%;
	font-size: 1.5rem;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	z-index: 100;
}

.icon__redes {
	color: white;
	text-decoration: none;
	padding: .7rem;
	display: flex;
	transition: all .5s;
}

.icon-facebook {
	background: #2E406E;
}

.icon-instagram {
	background: #eb88dd;
}

.icon-whatsapp {
	background: #16f516	;
}

.icon__redes:first-child {
	border-radius: 1rem 0 0 0;
}

.icon__redes:last-child {
	border-radius: 0 0 0 1rem;
}

.icon__redes:hover {
	padding-right: 3rem;
	border-radius: 1rem 0 0 1rem;
	box-shadow: 0 0 .5rem rgba(0, 0, 0, 0.42);
}


/*===========================NOSOTROS========================================*/

/*===GRID===*/
.nosotros__grid{
    display: grid;
    grid-template-columns: repeat(2,2fr);
    gap:2rem;
    text-align: center;
}

.nosotros__descripcion{
    grid-column: 1/3;
}

.nosotros--p, .nosotros--h2{
    text-align: left;
}

/*===========================RECETAS-NOTICIAS========================================*/

.recetas__grid,.noticias__grid{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 2rem;
}

.recetas__nombre,.noticias__nombre{
    text-align: left;
}

.recetas__contenido, .noticias__contenido{
    font-size: 1.3rem;
}

/*===========================RECETAS_POST========================================*/

.post--h3{
    margin-top: 2rem;
    font-size: 1.2rem;
}

.post__grid{
    
    display: grid;
    grid-template-columns: repeat(1,1fr);
}

.titulo--post{
    text-align: left;
}

.post__p{
    line-height: 1.2;
}

/*===========================CONTACTO========================================*/

.contacto__grid{
    display: grid;
    grid-template-columns: repeat(2,1fr);
}

.contacto--margin_bloque{
    margin-top: 5rem;
}

.contacto-bg {
    background-color: #2E406E;
    height: 100%;
}

.contacto__contenido--h3{
    margin-top: 2rem;
    margin-left: 2rem;
    margin-bottom: 1.5rem;
    text-align:left;
    color: var(--blanco);

}

.contacto--color{
    color: var(--blanco);
}

.conctato--margin_contenido{
    margin-left: 2rem;
}

.formulario {
    background-color: var(--blanco);
    font-family: var(--fuentePrincipal);
    margin: 2rem auto 0 auto;
    width: 95%;
    padding: 0;
}

.campo {
    display: flex;
    margin-bottom: 2rem;
}
.campo__label {
    flex: 0 0 9rem;
    text-align: right;
    padding-right: 2rem;
}
.campo__field {
    flex: 1;
    border: 1px solid var(--negro);
    border-radius: 0.5rem;
}
.campo__field--textarea {
    height: 20rem;
}

.campo--boton{
    justify-content: end;
}

.boton {
    display: inline-block;
    font-family: var(--fuentePrincipal);
    color: var(--blanco);
    text-align: center;
    padding: 1rem 3rem;
    font-size: 1.8rem;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 2rem;
    border: none;
}

.boton:hover {
    cursor: pointer;
}
.boton--primario {
    background-color: var(--negro);
}
.boton--secundario {
    background-color: var(--primario);
}


/*===========================PRODUCTOS-CATALOGO========================================*/

.productos__grid{
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 2rem;
}

.productos__nombre{
    font-size: 2rem;
}

.productos__contenido{
    font-size: 2rem;
    font-weight: bold;
    color: #2081c3;
}

.productos_tamaño_texto{
    font-size: 1.4rem;
}

/*===========================PRODUCTOS-DESCRIPCION========================================*/

.productos_descripcion__grid{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 10rem;
}

.productos_descripcion_titulo{
    font-size: 5rem;
    font-weight: bold;
}

.productos_descripcion_subtitulo,.detalles_tamaño_texto,.adjuntos_tamaño{
    color: var(--negro);
    font-family: var(--fuentePrincipal);
    text-transform: uppercase;
}

.productos_descripcion_texto{
    font-size: 1.7rem;
}

.codigo__producto--texto{
    margin-top: 1rem;
    font-size: 1.5rem;
}

.zoom__descripcion__productos{
    transition: transform 3s;
}

.zoom__descripcion__productos:hover{
    transform: scale(1.10);
}

.boton_producto{
    font-family: var(--fuentePrincipal);
    background-color: var(--blanco);
    color: var(--primarioSecundario);
    font-size: 1.6rem;
    border-radius: 3px;
    border-width: 1px;
    border-color: #B9B9B9;
    height: 4rem;
    width: 7rem;
    margin-left: 0.3rem;
    
}

.boton_producto:hover{
    cursor: pointer;
    background: var(--blanco);
    color: var(--primarioSecundario);
    transition: background .6s ease; 
    transition: color .6s ease; 
    font-weight: bold;

}

.productos__precio{
    font-size: 3rem;
    font-weight: bold;
    color: #2081c3;
}


.productos_detalles__grid{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 2rem;
}

.contenido__texto-posicion{
   grid-column: 2/4;
}


.detalles_producto--tamaño{
    font-size: 1.5rem;
}

.codigo-bg{
    background-color: var(--blanco);
    height: 40px;
    border-width: 0.1rem;
    border-style:solid;
    border-color: var(--secundario);
}

.detalles-bg{
    background-color: var(--blanco);
    height: 100px;
    border-width: 0.1rem;
    border-style:solid;
    border-color: var(--secundario);
}

.adjunto-bg{
    background-color: var(--blanco);
    height: 80px;
    border-width: 0.1rem;
    border-style:solid;
    border-color: var(--secundario);
}


@media (max-width: 768px){
   /* .navegacion{
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
   } */
   .navegacion{
    visibility: hidden;
    display: none;
}

.btn-menu--esconder{
    visibility: visible;
}

   .margin--lados_bloques{
    margin-right: 2rem;
    margin-left: 2rem;
   }

   .boton{
    display: block;
   }
   /*===========================HOME========================================*/

   .contenedor__slider{
     position: inherit;
 }

   .slider__btn {
    visibility: hidden;
}

   .grid{
    grid-template-columns: repeat(2,1fr);
   }

   .contenedor__servicios{
    display: none;
    visibility: hidden;
}

   .contenedor__servicios_responsive_tablet{
    display: block;
    visibility: visible;
}
    /*===========================NOSOTROS========================================*/
    .nosotros__grid{    
        grid-template-columns: repeat(1,1fr);
    }
    .nosotros__descripcion{
        grid-column: 1/2;
        text-align: center;
    }

    
    /*===========================PRODUCTOS-CATALOGO========================================*/

    .productos__grid{
        grid-template-columns: repeat(2,1fr);
}

    /*===========================PRODUCTOS-DESCRIPCION========================================*/


    .productos_descripcion__grid{
        grid-template-columns: repeat(1,1fr);
        row-gap: 2rem;
        
}

    .img__descripcion__productos{
        max-width: 70%;
        max-height: 100%;
}

    .productos_detalles__grid{
        grid-template-columns: repeat(1,1fr);
        row-gap: 0;
}

     /*===========================FOOTER========================================*/
     .footer__grid{
        grid-template-columns: repeat(2,1fr);
    }

     /*===========================RECETAS-NOTICIAS========================================*/
    .recetas__grid, .noticias__grid{
        grid-template-columns: repeat(2,1fr);
    }

     /*===========================CONTACTO========================================*/
    .contacto__grid{
        grid-template-columns: repeat(1,1fr);
    }
    .contacto-bg{
        height: 40rem;
    }
}

@media (max-width: 480px){
    
    /*===========================HOME========================================*/
    
    /*slider*/
    .contenedor__slider{
        display: none;
        visibility: hidden;
    }

    .contenedor__slider_responsive{
        display: block;
        visibility:visible;
    }

    .contenedor__servicios{
        display: none;
        visibility: hidden;
    }

    .contenedor__servicios_responsive_tablet{
        display: none;
        visibility: hidden;
     }

    .contenedor__servicios_responsive_cell{
        display: block;
        visibility: visible;
    }

    .grid{
     grid-template-columns: repeat(1,1fr);
    }
/*===========================PRODUCTOS-CATALOGO========================================*/

    .productos__grid{
        grid-template-columns: repeat(1,1fr);
}

    /*===========================PRODUCTOS-DESCRIPCION========================================*/

    .productos_descripcion_titulo{
        font-size: 3rem;
    }

    .productos_descripcion__grid{
        grid-template-columns: repeat(1,1fr);
        row-gap: 2rem;
        
}

    .img__descripcion__productos{
        max-width: 70%;
        max-height: 100%;
}

    .productos_detalles__grid{
        grid-template-columns: repeat(1,1fr);
        row-gap: 0;
}

    .contenido__texto-posicion{
        grid-row: 2/3;
        grid-column: 1/2;
 }

    .detalles-bg{
        height: 170px;
}

    .adjunto-bg{
    height: 110px;
}
    /*===========================FOOTER========================================*/
    .footer__grid{
        grid-template-columns: repeat(1,1fr);
    }

    /*===========================RECETAS-NOTICIAS========================================*/
    .recetas__grid,.noticias__grid{
        grid-template-columns: repeat(1,1fr);
    }



 }