@import url(normalize.css);

*{
box-sizing: border-box;
}

a:link,
a:visited,
a:hover,
a:active{
text-decoration: none;
outline: none;
color: inherit;
}


ul,
ol{
list-style: none; 
padding: 0;
margin: 0;
}

images{
width: 100%;
}

figure{
margin: 0;
line-height: 0;
}


header{
background: rgba(255,255,255,1);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(217,218,222,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(217,218,222,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(217,218,222,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(217,218,222,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(217,218,222,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(217,218,222,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d9dade', GradientType=0 );
}


main{
margin: auto;
width: 100%;
font-family:'Lato', sans-serif;
color: #515151;
}


.logo{
width: 231px;
margin: 0px  auto  0px;
padding-top:5px;
overflow: hidden;
}


.toggle-button{
width: 45px;
background-color: #DB0000;
padding: 10px;
border-radius: 5px;
margin: auto;
display: block;
margin-right:2%;
margin-bottom:5px;
float:right;
}


.toggle-button span{
display: block;
height: 25px;
border-top: 2px solid #fff;
border-bottom: 2px solid #fff;
position: relative;
}



.toggle-button span:after{



content: '';



width: 100%;



height: 2px;



background-color: #fff;



position: absolute;



left: 0;



top: 50%;



margin-top: -1px;



}



.nav-bar{



	margin-top: 10px;



	display: none;



	font-size:16px;



	color:#FFF;



	padding-top:10px;



	padding-top:40px;

}


.nav-bar a{



	background-color:#DDDDDD;



	display: block;



	border-bottom: 1px solid #fff; 



	padding: 1em 1em 1em 3em;



	color: #545454;



	font-size:16px;



	font-family: 'Exo', sans-serif;


}



.nav-bar a:hover{



	background-color:#DB0000;



	color:#FFF;



}


.dropdown-content{



		display: none;

}



.fa fa-caret-down i{



	display:block;

}



.dropdown-content  a{



	padding-left: 60px;



	background-color:#9B9B9B;



	color: #FFF;

}



.fa fa-circle i{



	font-size:0.2px;

}


.lin{



	border-top: 1px solid #CCCCCC;



	margin-top:0px;



	clear:both;

}



.clear{



	clear:both;



	padding:0;



	line-height: 0px;



	height: 0;

}	


.dire {
max-width:1200px;
color:#878787;
font-size:14px;
padding: 5px 5px 0px 0;
width:100%;
	overflow:hidden;
	display:block;
}

.direcc {
float:right;
	overflow:hidden;
display:block;
margin:0;
padding: 5px 5px 9px 0;


}

.seguinos {
float:right;
display:block;
	overflow:hidden;
	height: 50px;
margin:0;
padding: 17px 5px 0px 7px;
font-style:oblique;
	
}

.redes {
float:right;
display:block;
	overflow:hidden;
height: 50px;
margin:0;
padding:0;	
}

.logoface{
margin:0;
padding-right:4px;
}

.logoins{
margin:0;
}




.icodire	{
text-align:right;


	float:right;



	width:45px;



	padding-left:10px;



	margin-right:2%;



	clear:none;

}


.now{
white-space:nowrap;

}



.bothome{

background-color:#FFF;



max-width:1200px;



	display:block;



	width:100%;



	margin-top:1.5%;



clear:both;



color:#515151;



font-size:18px;



text-align:center;

}



.bothome a:hover {



color:#DB0000;



font-size:18px;



text-align:center;

}


.box1, .box2, .box3{



	width:90%;



	margin: auto;



	padding:4% 0px 4% 0px;



	max-width: 520px;



	line-height:23px;

}


.box1:hover{



		line-height:23px;

}



.tebox1, .tebox2, .tebox3{



font-size:18px;



width:100%;



padding-left:4%;

}



.bothome p {



border:0px;



margin:0px;



padding:0px;



display:block;



width:66%;



margin:auto;

}


.box123{



float:left;



	width:55%;

}



.icobox{



	float:left;



	width:70px;

}


.icobox2{



	float:left;



	width:90px;

}



img.img1  {



	width:90%;


}


.foot1{



clear:both;



width:100%;



height:92px;



display:inline-block;



margin-top:2%;



background: rgba(160,0,0,1);



background: -moz-linear-gradient(top, rgba(160,0,0,1) 0%, rgba(160,0,0,1) 16%, rgba(217,0,0,1) 88%, rgba(217,0,0,1) 100%);



background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(160,0,0,1)), color-stop(16%, rgba(160,0,0,1)), color-stop(88%, rgba(217,0,0,1)), color-stop(100%, rgba(217,0,0,1)));



background: -webkit-linear-gradient(top, rgba(160,0,0,1) 0%, rgba(160,0,0,1) 16%, rgba(217,0,0,1) 88%, rgba(217,0,0,1) 100%);



background: -o-linear-gradient(top, rgba(160,0,0,1) 0%, rgba(160,0,0,1) 16%, rgba(217,0,0,1) 88%, rgba(217,0,0,1) 100%);



background: -ms-linear-gradient(top, rgba(160,0,0,1) 0%, rgba(160,0,0,1) 16%, rgba(217,0,0,1) 88%, rgba(217,0,0,1) 100%);



background: linear-gradient(to bottom, rgba(160,0,0,1) 0%, rgba(160,0,0,1) 16%, rgba(217,0,0,1) 88%, rgba(217,0,0,1) 100%);



filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a00000', endColorstr='#d90000', GradientType=0 );

}



.marketing, .marketing a, .marketing a:visited{



	text-align:right;



	padding:20px 20px 0 0;



	font-family:Arial, Helvetica, sans-serif;



	font-size:10px;



	color:#666;



}



.marketing a:hover{



	color:#FFF;


}



/*INTERIORES*/ /*INTERIORES*//*INTERIORES*//*INTERIORES*//*INTERIORES*//*INTERIORES*//*INTERIORES*//*INTERIORES*//*INTERIORES*//*INTERIORES*//*INTERIORES*//*INTERIORES*//*INTERIORES*//*INTERIORES*/


.maxprin2{



	padding-left:5%;



	padding-right:5%;


}


.headint{



	width:100%;



background: rgba(247,247,248,1);



background: rgba(217,218,222,1);



background: -moz-linear-gradient(top, rgba(217,218,222,1) 0%, rgba(247,247,248,1) 100%);



background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(217,218,222,1)), color-stop(100%, rgba(247,247,248,1)));



background: -webkit-linear-gradient(top, rgba(217,218,222,1) 0%, rgba(247,247,248,1) 100%);



background: -o-linear-gradient(top, rgba(217,218,222,1) 0%, rgba(247,247,248,1) 100%);



background: -ms-linear-gradient(top, rgba(217,218,222,1) 0%, rgba(247,247,248,1) 100%);



background: linear-gradient(to bottom, rgba(217,218,222,1) 0%, rgba(247,247,248,1) 100%);



filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d9dade', endColorstr='#f7f7f8', GradientType=0 );



overflow:hidden;


}


.maxheadint{



	max-width:1200px;



	margin:auto;



padding: 0.1% 5% 3% 5%;



 background-image: url(../images/f2.png);



    background-repeat: no-repeat;



	background-size:85%;



    background-position: bottom right; 

}


.titint{



width:92%;



background-image:url(../images/t1.png);



background-repeat:no-repeat;



background-size:cover;



background-position:right;



padding:1.8% 0% 1.8% 5%; 


}


.largo{



width:300px;

}


.titintex{



	color: #FFF;



	font-size:28px;



	font-family: 'Exo', sans-serif;



	font-weight:normal;



	text-align:left;



	padding-left:0%;

}


.contenido{



	width:100%;



	margin:0;



	padding:0 5% 0 0%;

}


.subtitint {



width:73%;



min-width:300px;



background-image:url(../images/t4.png);



background-repeat:no-repeat;



background-size:cover;



background-position:right;



margin:14% 0 1% 0;



text-align:left;



padding:1.8% 0% 1.8% 5%; 

}



.subtitint:first-of-type {
	margin-top:0;



}



.subtitintex{



	color: #FFF;



	font-size:20px;



	font-family: 'Exo', sans-serif;



	font-weight:normal;



	text-align:center;



	padding-left:0%;

}


.subtitint2 {



width:83%;

}


.subtitintex2{



	padding-left:0%;



	display:block;



	text-align:left;

}


.ptex p{



font-size:18px;



color: #515151;



line-height:1.3;



padding-top:0px!important;



margin-top:0;

}


p.ptex, ul.ptex{



font-size:18px;



color: #515151;



line-height:1.3;



padding-top:0px!important;



margin: 5px 0 10px 0;

}


ul.ulptex{

padding-top:0px!important;



margin-top:0;



line-height:1.8;


}



.astint {



	width:100%;



	margin:auto;



	display:block;



margin:auto;
}


.imgas {



	display:block;



margin:auto;

}


 .astint  img.fotbot1 {



	margin:auto;



	width:90%;



	text-align:center;



	display:block;

}


 .astint  img.fotbot2{



	margin:auto;



	width:80%;



	text-align:center;



	display:block;

}

.texas {



	color: #DB0000;



	font-size:16px;



	font-weight:normal;



	text-align:center;



	padding-left:0%;



	margin:auto;



	display:block;



padding:0 5% 0 5%;

}



.formulariodos{



	width: 100%;



	margin:auto;



	color:#353535;



	font-family:'Roboto', sans-serif;



	font-weight:normal;



	font-size:16px;



	text-align:left;



	padding-top:0%;



	clear:both;

}	


.form-basicdos{



	width:100%;



    margin: 0 auto;



    box-sizing: border-box;



color:#FFF;



        text-align: center;

}



.form-basicdos .form-rowdos{



    text-align: left;



    margin-bottom: 2%;

}


.form-basicdos .form-rowdos > label span{



	display: inline-block;



	box-sizing: border-box;



color:#353535;



	font-family:'Roboto', sans-serif;



	font-weight:normal;



	font-size:16px;



	text-align:left;



	width: 100%;



	text-align: left;



	vertical-align: top;



	padding: 0% 2%;

}


.form-basicdos input{



    color:  #5f5f5f;



    box-sizing: border-box;



    width: 100%;



    box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);



    padding: 12px;



    border: 1px solid #dbdbdb;



	border-radius: 5px;

}



.form-basicdos textarea{



    color:  #5f5f5f;



    box-sizing: border-box;



    width: 100%;



    height: 150px;



    box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);



	padding: 12px;



    border: 1px solid #dbdbdb;



    resize: vertical;



	border-radius: 5px;



	font-family:'Roboto', sans-serif;



	font-weight:normal;



	font-size:16px;



	text-align:left;

}


.form-basicdos button{



    display: block;



     background-color:  #D90000;



    color: #ffffff;



    font-weight: normal;



    box-shadow: none;



    padding: 14px 22px;



    margin: 3% 0px ;



	border:none;



	font-family:'Oswald', sans-serif;



	font-size:32px;

}


.form-basicdos button:hover{
background-color:  #A00000;	
}


 .saludiz{

	width:100%;
}



 .saluddercel{



width:100%;



margin:auto;



display:block;



margin-top:-2.5%;


}


 .saluddercel img{



	width:70%;



	display:block;

}


 .saludder{



display:none;



}


.navsalud a{



	color:#515151;



	font-size:17px;



	border-bottom:#7F7F7F 3px solid;



	width:70%;



	height: 48px;



	text-align:left;



	margin: 10px 0 10px 0%;



	padding: 10px  0 10px 0;



	display:block;

}


.navsalud a:hover{



	color:#D90000;



	font-size:19px;



	border-bottom:#D90000 6px solid;



	width:70%;



	height: 48px;



	text-align:left;



	margin: 10px 0 10px 0%;



	padding: 10px  0 10px 0;



	text-align:left;
}


.actual a{



	color:#D90000!important;



	font-size:19px!important;



	border-bottom:#D90000 6px solid!important;



	width:70%!important;



	height: 48px!important;



	text-align:left!important;



	margin: 10px 0 10px 0%!important;



	padding: 10px  0 10px 0!important;
}



.navhor  a{



	color:#D90000;



	font-size:17px;



	height: 48px;



	text-align:left;



	margin: 10px 0% 10px 0%;



	padding: 10px  5% 10px 0%;



	display:block;
}



.navhor2 a{



		color:#252B45!important;
}		


.horfoto a{



	margin: 10px 0% 0px 0%;

}


.navhor a:hover{



	color:#252B45;



	font-weight:bold;
}



.horactual a{



	font-weight:bold;



	color:#999;
}


 a.ver{



    background-color:  #D90000;



    color: #ffffff;



	height:48px;



	width:48px;



   	font-family:'Oswald', sans-serif;



	font-size:20px;



	padding: 8px  50px 8px 50px;



	line-height:normal;

}



 a.vlargo{



 	width:80%;



   	font-size:17px;



	padding: 10px  10px 70px 10px;



	display:block;

}



a.ver2{



	color: #ffffff;



	font-family:'Oswald', sans-serif;



	font-size:18px;



	background-color:  #D90000;



	text-align:center;



	width:120px;



	display:block;



	padding:9px 0 9px 0;

}



a.ver:hover, a.ver2:hover{
background-color:  #A00000;	


}



 a.gralink{



    color: #D90000;



	padding:30px  0 30px 0;



	height:48px;



	width:48px;



   	font-size:17px;

}


a.gralink:hover{



  color:  #252B45;	


}




.bral{



	margin-top:5%;

}



.contenido2{



	width:100%;



padding:0 5% 0 0%;



margin-top:-2%;



line-height:1.3;

}

.astint2{



	width:100%;



}


.ptex2{



padding: 0.1% 0% 0 0%;



margin-bottom:-2%;

}


.fotsa {



	display:none;


}



.fotsa img{



	width:100%;



	max-width:902px;



	padding-bottom:3%;


}


.fotsa2 img{



	width:100%;



	max-width:466px;



	padding-bottom:3%;



	







}











.fa-caret-right {



		color:#252B45;



		font-size:28px !important;



		



}







.dropdown-content .fa-caret-right {



		color:#fff;



		font-size:20px !important;



		



}



















.fa-chevron-circle-right{



			font-size:20px !important;



		padding-right:3px;



		



}







.fa-circle{



		color:#252B45;



		font-size:10px !important;



		padding-right:3px;



		



}



.actual .fa-caret-right {



		color:#D90000;



		font-size:19px !important;



		



}







 .cri{



	padding-bottom:45px;



	display:block;



}











 .tilarg{



	 padding-right: 50px;







}











img.asphe {



	width:100%;



	max-width:404px;







}







img.imgral {



	width:100%;







}







.video {



	position:relative;



	padding-top:56%;



}







.video iframe{



	border: none;



	width:100%;



	height:100%;



	position:absolute;



	left:0;



	top:0;



		



}











.largosub{



	padding-right:30px;







}



.largosub{



	padding-right:30px;



	width:100%;



}





.imgcentradas{

	margin:auto;

	text-align:center;





}	



/*ACA EMPIEZA popup*/



.white_content {

	display: hide;

	position: absolute;

	width: 100%;

	height: 100%;

	margin:auto;

	z-index:1002;

	overflow: auto;

	display:block;

	left: 4px;

	top: 25%;

	text-align:center;

}



#contenedor2 {

width: 100%;

margin: auto;

clear: both;

float: none;

z-index:5;

background-color:none;

text-align:center;

}



#popup

{position: static;

width: 100%;

max-width:600px;

z-index:5;

margin-top:3%;

margin:auto;

text-align:center;

}



#botcerrar{

width: 147px;

height: 45px;

display: block;

border: 0;

margin:0;

float:right;

z-index:5;

}





#popup img {

width:100%;

max-width:741px;

}



/*ACA termina popup*/





/*estilos para pagina hotsale*/
.iconosserv{
 width:100%;
     overflow:hidden;
  text-align:center;
  margin:auto;
}

.iconosserv img{
  max-width:199px;
  width:49%;
}

.iconosserv a:hover{
opacity: 0.6;
}
/*fin estilos para pagina hotsale*/



.principal{
width:100%;
background: #E6E7E8;
height:auto;
}

.maximo{
  max-width:1300px;
  margin:auto;
  overflow:hidden;
 }

.homebox1{
	width:0%;
   height:0px;
   float:none;
 }

.homebox2{
	width:100%;
  float:none;
 }
 
.homebox3{
  width:100%;
 	 background-image: url(../images/receta-cel.png);
    background-repeat: no-repeat;
background-size:contain;
    background-position: top center; 
 height:180px;
	 float:none;
 } 
 
 
.fnredhome{
  background-color:#DB0000;
  -webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
overflow:hidden;
margin:0px 8% 0px 8%;
padding:10px 0px 4px 0px;
 }  
 
 
.titred{
 	color: #fff;
	font-size:23px;
	font-family: 'Blinker', sans-serif;
	text-align:center;
	font-weight:normal;
}


.subtiho{
	color: #373F44;
	font-size: 25px;
	font-family: 'Blinker', sans-serif;
	text-align: center;
	font-weight: 500;
	overflow: hidden;
}

a.linkshop
{
	color: #DB0000;
	font-family: 'Blinker', sans-serif;
	font-weight: bold;
	overflow: hidden;
	text-decoration:underline;
}

a.linkshop:hover
{
	color: #ff362c;
	font-weight: black;
}


.subtitu-nosotros{
	color: #384b75;
	border-bottom:#e6e8ed solid 3px;
	margin-top:50px;
	padding-bottom:8px;
}

.supnuestro {
    width: 100%;
    height: 170px; /* Altura fija también en móvil */
    background-image: url(../images/fn-nos.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover ;
    overflow: hidden;
    background-color: #d8d8d8;

    /* Activar Flexbox para las columnas en móvil */
    display: flex;
    align-items: flex-end; /* Alinea los ítems de las columnas en la parte inferior */
}

/* Anchos de columna para celulares (aproximadamente 40%, 59%, 1%) */
.supnuestro-izq {
    flex-basis: 49%;
    flex-grow: 0; /* No crece */
    flex-shrink: 0; /* No se encoge */
    height: 100%;
    position: relative;
}

.supnuestro-cent {
    flex-basis: 50%;
    flex-grow: 0;
    flex-shrink: 0;
    height: 100%;
    /* Convertir esta columna en flex para centrar su contenido */
    display: flex;
    justify-content: center; /* Centra horizontalmente el .cilindro-red */
    align-items: center;     /* Centra verticalmente el .cilindro-red */
}

.supnuestro-der {
    flex-basis: 1%;
    flex-grow: 0;
    flex-shrink: 0;
    height: 100%;
}

/* Estilos de la imagen en la columna izquierda para móviles */
.supnuestro-izq img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom; /* Alinea la imagen en el centro horizontal y abajo vertical */
    display: block;
}

/* Estilos del cilindro rojo para móviles */
.cilindro-red {
    background-color: #dc3824;
    color: white;
    padding: 5px 25px 10px 25px; /* Menos padding horizontal en móvil */
    display: inline-block;
    text-align: center;
    border-radius: 9999px;
    max-width: 90%; /* Asegura que no se desborde en pantallas muy pequeñas */
}

.cilindro-red h1 {
    font-family: "open sans", sans-serif;
    font-weight: normal !important; /* Mantenemos !important si sigue siendo necesario */
    font-size: 17px; /* Tamaño de fuente para móviles */
    line-height: 1.2;
}


.footnew{
	 font-family: "open sans", sans-serif;
    background-color: #dc3824;
    color: white;
	text-align:center;
	font-weight:normal;
	 font-size: 16px; 
	 padding: 20px 20px;
    
}

.footcont{
font-weight:bold;
 font-size: 22px; 
    
}

.social-icons-container {
      display: flex; 
    justify-content: center; 
    align-items: center; 
    margin: 20px 0; 
}

.social-icon {
    width: 40px;
    margin: 0 10px; 
    transition: transform 0.3s ease-in-out;
}

.social-icon:hover {
    transform: scale(1.1); 
}

.redmarkhome{
    background-color: #dc3824!important;
	border-top: 2px groove #ff3939;
 padding-bottom:10px;
}

.redmarkhome a {
  color: #fff!important;
  
 
}




@media (min-width: 425px){

.box1, .box2, .box3{



	width:80%;


}


/*INTERIORES*/

.titint{



width:88%;


}



.largo{



width:365px;


}



.titintex{



	font-size:30px;


}



.subtitint {



margin:8% 0 1% 0;


}



.subtitintex{



	font-size:21px;


}



 .tilarg{



	 padding-right: 0px;


}


.largosub{



	padding-right:30px;



	width:100%;



}









}
@media (min-width: 550px){
.prog {



width:73%;



padding:1.8% 5% 1.8% 5%; 


}



.largosub{



	padding-right:30px;



	width:100%;



}

}	
@media (min-width: 580px){

.maxprin2{



	padding-left:8%;



	padding-right:8%;



	



}



.icobox2{



	padding-left:5%;



}



/*INTERIORES*/


.maxheadint{



padding: 0.1% 0% 1% 8%;



}


.contenido{



	padding:0 8% 0 0%;



}



.titint{



width:60%;







}







.largo{



width:500px;







}







.subtitint{



width:53%;



}







.subtitint2 {



width:73%;







}



.astint  img.fotbot1 {



	width:80%;



}


 .astint  img.fotbot2{



	width:70%;


}	


.texas {



padding:0 8% 0 8%;

}



.navsalud a{



	margin: 10px 0 10px 0%;


}



.navsalud a:hover{



	margin: 10px 0 10px 0%;



}







.actual a{



	margin: 10px 0 10px 0%!important;



}


.navhor a{



			padding: 10px  5% 10px 0%;

}


.navhor a:hover{



	padding: 10px  5% 10px 0%;



	text-align:left;
}



.contenido2{



padding:0 8% 0 0%;







}







.ptex2{



padding: 0.1% 0% 0 0%;



margin-bottom:0%;



}



 a.vlargo{



 	width:400px;



   	font-size:20px;



	padding: 10px  10px 50px 30px;

}



.largosub{



	padding-right:30px;



	width:100%;

}


}	
@media (min-width: 640px){
.dire {
padding: 5px 5px 15px 0;
}	
	
.direcc {
padding: 17px 5px 0px 0;
}
	
	
	
}	
@media (min-width: 768px){

.bothome a:hover {



font-size:20px;



}



.box1 a:hover{



	width:31.5%;



float:left;



	margin: 0px  2.75% 0px 0px;



	padding:0px;



}


.box1, .box2, .box3{



	width:31.5%;



float:left;



	margin: 0px  2.75% 0px 0px;



	padding:0px;



}



.box3{



	margin: 0px  0% 0px 0px;


}



.tebox1, .tebox2, .tebox3{



	font-size:19px;



	padding:0;



	margin:0;



}



.bothome p {



width:100%;







}




.box123{



	width:100%;



}







.icobox,.icobox2{



	width:100%;



	height:56px;



	padding-left:0;



}



img.img1  {



	width:100%;



}



	



/*INTERIORES*/


.maxprin2{



	padding-left:3%;



	padding-right:3%;


}


.maxheadint{



padding: 0.1% 0% 1% 3%;


}


.titint{



width:50%;	



padding-left:3%;



}







.largo{



width:500px;



}


.contenido{



width:63%;



float:left;



padding:0 3% 0 0%;







}


.contenido2{



	width:76%;



	float:left;



padding:0 3% 0 0%;



}



.saludiz{



	width:50%;



	float:left;





}







.largosalud{



	width:90%;



	padding: 4% 0 4% 6%;



}


 .saludder{



width:50%;



margin:auto;



float:left;



display:block;


}



 .saludder img{



	width:100%;



	display:block;



	margin:auto;



	margin-top:12%;



}


.saluddercel{



display: none;


}



.navhor a {



	float:left;



margin: 1% 0% 3% 0%;
}



.horfoto a{



	margin: 0% 0% 0% 0%;



}		


.navhor a:hover {



	float:left;
}		

.subtitint{



width:73%;



margin:50px 0 1% 0%;



padding-left:3%;



}



.subtitint2 {



width:98%;

}



.subtitintex{



	font-size:23px;


}



.astint{



	width:37%;



	float:left;


}



 .astint  img.fotbot1 {



	width:95%;



	margin-top:25%;



}


 .astint  img.fotbot2{



	width:90%;


}	



.texas {



padding:7% 5% 0 5%;



}



.astint2{



	width:24%;



	float:left;


}


.ptex2{



padding: 0.1% 0% 0 0%;



margin-bottom:-1%;



}




.fotsa {



	display:block;

}


.fotsa img{



	width:100%;



	max-width:902px;



	padding-bottom:3%;

}

.fotsa2 {



	display:none;

}


.cri{



	padding-bottom:45px;



	float:left;



	width:48.5%;

}


.cri:nth-of-type(2n+0){



	margin-left:3%;



	width:48.5%;



padding-bottom:45px;



}





/*ACA EMPIEZA popup*/

.white_content {

	top: 70px;

}

/*ACA termina popup*/



    .supnuestro {
        /* No necesitamos cambiar display: flex o align-items: flex-end aquí,
           ya que queremos que se mantengan iguales que en móvil. */
	    height: 220px; /* Altura fija también en móvil */
	   
    }

    /* Anchos de columna para desktop (3 columnas iguales, 33.3%) */
    .supnuestro-izq,
    .supnuestro-cent,
    .supnuestro-der {
        flex-basis: 0; /* Resetea la base */
        flex-grow: 1;  /* Permite que crezcan equitativamente */
        /* Esto es equivalente a flex: 1; */
    }

    /* La columna central ya está centrada por los estilos móviles.
       Si quieres un ajuste específico para desktop, lo harías aquí. */
    .supnuestro-cent {
        /* justify-content: center; */ /* Ya definidos en estilos base para móviles */
        /* align-items: center; */    /* Ya definidos en estilos base para móviles */
    }

    /* La imagen izquierda se mantiene con object-fit: contain y object-position: center bottom */
    .supnuestro-izq img {
        /* object-position: center bottom; se mantiene, no necesita redefinirse */
    }

    /* Estilos del cilindro rojo para desktop */
    .cilindro-red {
        padding: 5px 30px 10px 30px; /* Vuelve al padding original para desktop */
        max-width: 500px; /* Límite de ancho para desktop */
    }

    .cilindro-red h1 {
        font-size: 21px; /* Tamaño de fuente para desktop */
    }
	
}
@media (min-width: 930px){


.tebox1, .tebox2, .tebox3{



	font-size:20px;



	padding:0px 1% 0px 1%;



	margin:0;



}



.bothome p {



width:66%;



}


.box123{



width:55%;



}



.icobox{



width:90px;

}



.icobox2{



	float:left;



	width:25%;


}



.icobox2 img {



width:93%;


}



/*INTERIORES*/


.ptex{



font-size:18px;



}



.formulariodos{



	width: 85%;



	margin:0;



	}	


 .saludder img{



	margin-top:8%;



}



.largosub{



	padding-right:30px;



	width:100%;



}



.principal{
height:340px;
}

.homebox1{
	width:33.33%;
	 height:340px;
	float: left;
	 background-image: url(../images/receta.png);
    background-repeat: no-repeat;
background-size:cover;
    background-position: bottom right; 
   overflow:hidden;
   }

.homebox2{
	width:33.33%;
	float: left;
  overflow:hidden;
 }
 
.homebox3{
  width:33.33%;
  height:340px;
  float:left;
	 background-image: url(../images/sol.png);
    background-repeat: no-repeat;
background-size:cover;
    background-position: bottom left; 
		  overflow:hidden;
 } 
 
 
.fnredhome{
margin:0% 7% 0% 7%;
padding:7% 0% 4% 0%;
 }  
  
.titred{
 	font-size:26px;
}


.subtiho{
	font-size: 28px;
}


}
@media (min-width: 1024px){


.maxprin{



	max-width:1200px;



	margin:auto;



}



.logo{



	margin: 0px  0px 0px 3%;



	padding: 10px 0 0px 0px;



	float:left;



}



.redtog  { width:700px;



float:right;



}



.tog  { width:900px;


}



.toggle-button{



		display: none;



}




nav{float: left;

position: relative;


}



.nav-bar{



		display: block !important;



		margin:auto;



	float: right;



		text-align:center;



		margin-top:35px;



		margin-right: 3%;



		margin-bottom:-10px;



		padding:0;



		



}



.nav-bar li{



		float: left;



	margin: 0 0;



	padding: 0 0 0 15px;



	height:60px;



}


.nav-bar a{



	padding: 0 0px 0 25px;



	margin:0;



	text-align: center;



	display: block;



	background-color:151C1C;	



	background-color:transparent;



	border-bottom:none;



	text-decoration:none;



}



.nav-bar a:hover{



color:#DB0000;



background-color:transparent;


}	



li a, .dropbtn {



    display: inline-block;



    color: #FFF;



    text-align: center;



    padding: 14px 16px;



    text-decoration: none;



	z-index:1;



}



li a:hover, .dropdown:hover .dropbtn {



    background-color: transparent;



}



li.dropdown {



    display: inline-block;



}




.dropdown-content {



    display: none;



    position: absolute;



    background-color: #D90000;



    min-width: 160px;



    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);



	z-index:1;



	margin-top:10px;



}



.dropdown-content a {



    color: #FFF;



    padding: 12px 16px;



    text-decoration: none;



    display: block;



    text-align: left;



	border-bottom:#C4C4C4 solid 1px;



	z-index:1;



}



.dropdown-content a:hover {background-color: #A00000;



color:#FFF;}



.dropdown:hover .dropdown-content {



    display: block;



}



/*INTERIORES*/



 .saludder img{



	margin-top:5%;



}



.contenido{



	width:63%;



	float:left;



}




.astint{



	width:37%;



	float:left;



}




.subtitint{



width:63%;



}


.subtitint2{



background-size: 80% 100%;



background-position:left;



width:100%;



height:40px;



display:block;



padding-top:8px;



}



.subtitintex{



	font-size:23px;


}



.subtitintex2{



	font-size:17px;



}







.texas {



	font-size:18px;


}



.navsalud a{



	width:50%;



	height:40px;



	padding: 10px  0 0px 0;



}







.navsalud a:hover{



	width:50%;



	display:block;



	height:40px;



	padding: 10px  0 0px 0;


}



.actual a{



	width:50%!important;
}


.cri{



	padding-bottom:45px;



	padding-top:20px;



	float:left;



	width:22.7%;



	margin-left:3%;



	display:block;



}







.cri:nth-of-type(2n+0){



	margin-left:3%;



	width:22.7%;



	padding-bottom:45px;



	padding-top:20px;



display:block;



}


.cri:first-of-type{



	margin-left:0%;



	width:22.7%;



padding-bottom:45px;



padding-top:20px;



display:block;



}




a.ver2{



	margin:auto;




}







.contvideo {



		width:70%;


}



.video {



	position:relative;



	padding-top:56%;



		background-color:#09C;



}



.video iframe{



		width:100%;



	height:100%;

	



}



img.imgral {



	width:70%;



}



.largosub{



	padding-right:30px;



	width:90%;



}



/*estilos para pagina hotsale*/
.iconosserv{
width:95%;
max-width: 1480px;
}
 .iconosserv img{
min-width:199px;
max-width:199px;
}
/*fin estilos para pagina hotsale*/

.logoins{
	margin: 0px 27px 0px 0px;
}


.margen-nosotros{
margin: 0px 50px 0px 29px;
}


}
@media (min-width: 1200px){

/*INTERIORES*/



.maxheadint{



padding: 0% 0 2% 3%;



background-size:60%;



}



.maxprin2{



	padding-left:3%;



	padding-right:3%;



	max-width:1200px;



	margin:auto;



}







.titint{



margin:0;



width:470px;



}







.largo{



width:650px;



}







.titintex{



	font-size:41px;



}



 .saludder img{



	margin-top:0%;



}



.subtitint{



width:53%;



}




.subtitint2{



	background-size: 93% 100%;



	height:67px;



	padding-top:10px;



}




.subtitintex2{



	font-size:20px;



	margin:auto;



	margin-left:15%;



	width:50%;



	text-align:center;


}



.largosub{



	padding-right:30px;



	width:90%;

}


.margen-nosotros{
margin: 0px 85px 0px 33px;
}


}	
@media (min-width: 1250px){


.logo{



	margin: 0px  0px 0px 0%;




}



/*INTERIORES*/







.maxprin2{



	padding-left:0%;



	padding-right:0%;







}




.maxheadint{



padding: 0% 0 2% 0;



background-size:60%;



}



.navsalud a{



	margin: 10px 0 10px 0%;



}







.navsalud a:hover{



margin: 10px 0 10px 0%;



}







.actual a{



	margin: 10px 0 10px 0%!important;
}




.contenido{



	padding:0 0% 0 0%;




}



.titint{







margin:0;







}







.titintex{



margin-left:0%;



}







.contenido2{



	padding:0 0% 0 0%;







}







.navhor  {



	margin-left:0%;



	}



	



.navhor a{



	margin: 1% 3% 3% 0%;



}


.horfoto a{



	margin: 0% 3% 0% 0%;



}		



	



.ptex2{



padding: 0.1% 0% 0 0%;



margin-bottom:-1%;



}







.largosub{



	padding-right:30px;



	width:70%;



}

}	



/* ========================================= */
/* --- ESTILOS DEL CARRUSEL DE IMÁGENES --- */
/* ========================================= */
/* Nuevo contenedor para el fondo gris */
.fn-carousel {
    background-color: #ebeced;
   width: 100%; 
   margin: 0 auto;
    padding: 20px 20px 35px 20px;
    box-sizing: border-box; 
}


.carousel-container {
    position: relative;
    width: 100%; /* Ocupa el 100% del .fn-carousel */
    /* Ya no necesitas max-width aquí si .fn-carousel lo tiene,
       pero mantenerlo no hará daño si el .fn-carousel es más grande */
    /* max-width: 1200px;  */ /* Puedes comentarlo o quitarlo si .fn-carousel ya lo limita */
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    margin: 0 auto; /* Centra el carrusel dentro del .fn-carousel si este fuera más grande */
    margin-bottom: 30px; /* Esto afecta el espacio debajo del carrusel, dentro del fondo gris */
    /* Ya no necesitas text-align: center; aquí, ya que margin: auto lo centra */
}

/* El resto de tu CSS para el carrusel (carousel-slide, carousel-btn, carousel-dots) se mantiene igual. */

/* Media Queries para responsividad (asegúrate de que no haya overrides indeseados) */
@media (max-width: 768px) {
    .fn-carousel {
        padding: 20px 20px; /* Reduce el padding en pantallas pequeñas */
    }

    .carousel-container {
        border-radius: 0;
        /* etc. */
    }
}

.carousel-container {
    position: relative;
    width: 100%;
    max-width: 1080px; /* Ancho máximo para computadoras */
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    margin-bottom: 30px; /* Espacio entre el carrusel y lo que pueda haber debajo */
	text-align:center;
	margin:auto;
}

.carousel-slide {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.carousel-slide a {
    display: block; /* Asegura que el enlace se comporte como un bloque y ocupe el espacio completo */
    flex-shrink: 0; /* Asegura que no se encoja */
    width: 100%; /* El <a> debe ocupar el 100% del ancho del slide en su posición */
}

.carousel-slide img {
    width: 100%;
    display: block;
    flex-shrink: 0; /* Evita que las imágenes se encojan */
    height: auto; /* Mantiene la proporción de la imagen */
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 2em;
    color: white;
    cursor: pointer;
    padding: 10px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra negra para las flechas */
    z-index: 1; /* Asegura que las flechas estén por encima de las imágenes */
}

.prev-btn {
    left: 10px;
}

.next-btn {
    right: 10px;
}

.carousel-dots {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 1;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.6); /* Color blanco semi-transparente para los puntos */
    border: 1px solid white; /* Borde blanco para los puntos inactivos */
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.dot.active {
    background-color: white; /* Punto blanco sólido para la imagen activa */
}


/* Media Queries para responsividad */
@media (max-width: 768px) {
    .carousel-container {
        border-radius: 0; /* Sin bordes redondeados en pantallas pequeñas */
    }

    .carousel-btn {
        font-size: 1.5em; /* Flechas un poco más pequeñas en pantallas pequeñas */
        padding: 5px;
    }

    .prev-btn {
        left: 5px;
    }

    .next-btn {
        right: 5px;
    }

    .carousel-dots {
        bottom: 10px;
    }

    .dot {
        width: 10px;
        height: 10px;
    }
}

/* ========================================= */
/* --- FIN ESTILOS DEL CARRUSEL DE IMÁGENES --- */
/* ========================================= */