/*@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&display=swap');*/
 
        /*<link rel="preconnect" href="https://fonts.gstatic.com"> */
         @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@200&display=swap');
        :root {--letra: #140115; --fondo: #7ef144; --fondoSobre: #FDFBF1; --menuOscuro: rgb(14, 77, 10); --menuClaro: #e5e551;}
        
        /* ------------- HEADER & FOOTER ---------------- */
        header {position: fixed; top: 0px; left: 0px; width: 100%; text-align: center; background-color:var(--menuOscuro); opacity:none;}
        footer {color: white; background-color: var(--menuOscuro); width: 100%; text-align: center; padding: 10px}
        header nav a:hover {color: var(--letra);} 
        header nav ul { list-style-type: none;}
        header nav li { display: inline-block; padding: 4px 20px; color: white;border-radius: 2px;}
        header nav li .logo {display: inline-block;position: relative;align-self: flex-start;}
        header nav li#activo a, a#activo {color: var(--menuClaro);}
        header nav li:hover { display: inline-block; background-color: var(--menuClaro);border-radius:3px;border-color: blue;}
        header nav a { text-decoration: none; text-transform: uppercase; color: white;}
        footer { width: 100%; text-align: center;}
        footer a { text-decoration: none; text-transform: uppercase; color: white;}
        footer a:hover { color: var(--menuClaro);}
        
        /* ------------------ MAIN -------------------- */
        main {font-family: 'Roboto','Raleway','Helvetica' sans-serif; font-weight: 400; color: var(--letra); background-color: var(--fondo); width: 100%; min-width: 500px; margin: -10 auto;}
        h1, h2, h3 {font-family: 'Roboto', sans-serif; font-style: italic;}
        
        /* -------------- DESCRIPCION -------------------- */
        .intro_principal {text-align: center; vertical-align: middle; padding: 0px; color: var(--menuClaro); background-color: var(--menuOscuro); font-size: 1.4rem; width: 100%;}
        .intro_principal div p {padding: 0px 50px 30px 50px;}
        .intro_especifica {text-align: center; vertical-align: middle; padding: 0px; color: var(--menuClaro); background-color: var(--menuOscuro); font-size: 1.4rem; width: 100%;}
        .intro_especifica p {padding: 50px 30px 30px 30px;}
        
        /* ----------------- AGRUPAR --------------------- */
        .agrupar { text-align: center; vertical-align: top; padding: 40px; overflow:auto; box-sizing: border-box;}
        .agrupar article { font-size:1.1rem; text-align: center; vertical-align: top; display: inline-block; width: 22%; height: 400px; background-color: var(--fondoSobre); margin: 20px; padding: 10px;}
        .agrupar h3 {text-transform: uppercase;}
        .agrupar img {width: 80%; opacity: 1}
        .agrupar img:hover {width: 95%; opacity: 1; border: solid var(--menuClaro);}    
        
        /* ----------------- Productos / Calidad / Recetas --------------------- */
        .productos { text-align: center; vertical-align: top; padding: 10px;}
        .recetas { text-align: center; vertical-align: top; padding: 10px;}
        .productos,.recetas {background-color: var(--fondoSobre); margin: 30px;}
        .productos div { text-align: center; font-size: 1.1rem; padding: 30px; display: inline-block; width: 65%; }
        .productos div ul {font-size: 1rem;}
        .productos img {display: inline-block; vertical-align: top; padding: 60px 10px;width: 25%;}
        .recetas { text-align: center; font-size: 1.2rem; padding: 20px 50px;}
        .recetas div img {display: inline-block; vertical-align: top; padding: 60px 10px; width: 25%;}
        .recetas div img#solo_una {display: inline-block; vertical-align: top; padding: 60px 10px;width: 50%;}
        
        /* ------------------- FORMULARIO -------------------------- */
        form {text-align: left; width:50%; padding: 80px; margin-left: auto; margin-right:auto; background-color: var(--fondoSobre);}
        .formulario {background-color: var(--fondo); padding: 50px;}
        textarea::placeholder {color: var(--menuClaro);} 

        /* ===================== para moviles ======================== */
        @media only screen and (max-width: 768px) {
        /* ----------------- AGRUPAR --------------------- */
        .agrupar article { font-size: 1.1rem; text-align: center; vertical-align: top; width: 80%; background-color: var(--fondoSobre); margin: 10px; padding: 0px;}
        .agrupar h3 {text-transform: uppercase;}
        .agrupar img {width: 80%; opacity: 0.6}
        .agrupar img:hover {width: 95%; opacity: 1; border: solid var(--menuClaro);}    
        
        /* ----------------- PRODUCTOS / CALIDAD / RECETAS --------------------- */
        .productos { text-align: center; vertical-align: top; padding: 10px;}
        .recetas { text-align: center; vertical-align: top; padding: 10px;}
        .productos, .rutas {background-color: var(--fondoSobre); margin: 30px;}
        .productos div { text-align: center; font-size: 0.9rem; padding: 30px; display: inline-block; width: 65%; }
        .productos div ul {font-size: 0.8rem;}
        .productos img { vertical-align: top; padding: 60px 10px;width: 25%;}
        .recetas { text-align: center; font-size: 1.2rem; padding: 20px 50px;}
        .recetas div img { vertical-align: top; padding: 60px 10px; width: 25%;}
            
        }
         .politica button{
                background:rgba(255, 51, 0, 0.736);
                border-radius:5px;
                font-size: 1rem;
                padding: 20px;
                border:2px solid white;
                text-align: center; 
	display:table-row;
	align-content: center;
        margin: left 20%;
	width: 30%;
	padding: 20px;
	border-radius: 12px 12px;
	margin: 20px;
}
                }
                 .politica button:hover
                        
                        { 
                        color:rgba(243, 10, 80, 0.944);
                        cursor:pointer;
                        position: absolute;
                        z-index: 9999;
                }

 
/* CSS para la animación y localización de los DIV de cookies 
 
@keyframes desaparecer
{
0%		{bottom: 0px;}
80%		{bottom: 0px;}
100%		{bottom: -50px;}
}
 
@-webkit-keyframes desaparecer /* Safari and Chrome 
{
0%		{bottom: 0px;}
80%		{bottom: 0px;}
100%		{bottom: -50px;}
}
 
@keyframes aparecer
{
0%		{bottom: -38px;}
10%		{bottom: 0px;}
90%		{bottom: 0px;}
100%		{bottom: -38px;} 
}
 
/*@-webkit-keyframes aparecer /* Safari and Chrome */ /*
{
0%		{bottom: -38px;}
10%		{bottom: 0px;}
90%		{bottom: 0px;}
100%		{bottom: -38px;}
}
#cookiesms1:target {
    display: none;
}
.cookiesms{	
	width:100%;
	height:43px;
	margin:0 auto;
	padding-left:1%;
        padding-top:5px;
        font-size: 1.2em;
	clear:both;
        font-weight: strong;
color: #333;
bottom:0px;
position:fixed;
left: 0px;
background-color: #FFF;
opacity:0.7;
filter:alpha(opacity=70); /* For IE8 and earlier */ /*
transition: bottom 1s;
-webkit-transition:bottom 1s; /* Safari */ /*
-webkit-box-shadow: 3px -3px 1px rgba(50, 50, 50, 0.56);
-moz-box-shadow:    3px -3px 1px rgba(50, 50, 50, 0.56);
box-shadow:         3px -3px 1px rgba(50, 50, 50, 0.56);
z-index:999999999;
}
 
.cookiesms:hover{
bottom:0px;
}
.cookies2{
background-color: #FFF;
display:inline;
opacity:0.95;
filter:alpha(opacity=95);
position:absolute; 
left:1%; 
top:-30px;
font-size:15px;
height:30px;
padding-left:25px;
padding-right:25px;
-webkit-border-top-right-radius: 15px;
-webkit-border-top-left-radius: 15px;
-moz-border-radius-topright: 15px;
-moz-border-radius-topleft: 15px;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
-webkit-box-shadow: 3px -3px 1px rgba(50, 50, 50, 0.56);
-moz-box-shadow:    3px -3px 1px rgba(50, 50, 50, 0.56);
box-shadow:         3px -3px 1px rgba(50, 50, 50, 0.56);
}
 
/* Fin del CSS para cookies */