@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('colores.css');
@import url('sistema-grid.css');
header, nav, section, article, aside, footer, form, figure{
    display: block;
    margin: 0;
    padding: 0;
}
* {
    box-sizing:border-box;
}
*:focus{
    border: none;
    outline: none;
}
img{
    display: block;
}
body {
   margin:0;
   font-family: 'Roboto', sans-serif;
   font-size: 14px;
   background: var(--blanco);
}
h1, h2, h3, h4, p{
    margin: 6px;
}
h1{ font-size: 36px; }
h2{ font-size: 32px; }
h3{ font-size: 24px; }
h4{ font-size: 18px; }
p{
    font-size: 14px;
    line-height: 23px;
}
a{
    text-decoration: none;
    color: var(--negro);
}
#cuerpomodal{
    padding: 4%;
}
#cuerpomodal h2{
    text-align: center;
    font-size: 24px;
    margin: 30px 0;
}
#cuerpomodal p{
    text-align: justify;
}
#cuerpomodal img{
    display: block;
    margin: 15px auto;
}
/*********************************************************************/
/***************************  CABECERA   *****************************/
/*********************************************************************/
#cabeceraweb{
    width: 100%;
}
#cabecera{
    background: var(--secundario);
    padding: 4px 15px 0 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
#cajatabs{
    display: flex;
}
#cajatabs a{
    display: block;
    color: var(--blanco);
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    margin-right: 4px;
}
#cajatabs a:hover, #cajatabs a.activo{
    background: var(--grisclaro);
    color: var(--secundario);
    border-radius: 6px 6px 0 0;
}
#cajatelefonos{
    display: flex;
    justify-content: end;
    align-items: center;
}
#cajatelefonos a{
    display: flex;
    align-items: center;
    color: var(--blanco);
    font-size: 14px;
    margin-left: 6px;
}
#cajatelefonos a i.wats{
    display: block;
    width: 34px;
    height: 34px;
    color: var(--blanco);
    background: #55cd6c;
    border-radius: 34px;
    text-align: center;
    line-height: 34px;
    font-size: 20px;
    margin-right: 5px;
}
#cajatelefonos a i.tef{
    display: block;
    width: 34px;
    height: 34px;
    color: var(--blanco);
    background: var(--primario);
    border-radius: 34px;
    text-align: center;
    line-height: 34px;
    font-size: 20px;
    margin-right: 5px;
}
#cajatelefonos a i.cart{
    display: block;
    width: 34px;
    height: 34px;
    color: var(--blanco);
    background: var(--primario);
    border-radius: 34px;
    text-align: center;
    line-height: 34px;
    font-size: 20px;
    margin-right: 5px;
}
#cajatelefonos a.cajcarrito{
    position: relative;
}
#cajatelefonos a.cajcarrito span{
    width: 20px;
    height: 20px;
    display: block;
    font-size: 10px;
    background: var(--blanco);
    text-align: center;
    line-height: 20px;
    border-radius: 30px;
    color: var(--grisoscuro);
    position: absolute;
    left: 20px;
    top: -5px;
}
/*********************************************************************/
/***************************  BANNER PRINCIPAL  **********************/
/*********************************************************************/
#banner{
    width: 100%;
    overflow: hidden;
}
/*********************************************************************/
/***************************  TITULOS Y CARRUSEL *********************/
/*********************************************************************/
#zonadestacados{
    background: var(--blanco);
    padding-bottom: 30px;
}
.zonacentro{
    width: 100%;
    max-width: 1280px;
    margin: auto;
}
.productos{
    padding: 4%;
}
.productos a{
    display: block;
    background: var(--blanco);
    border: 1px solid var(--blanco);
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    padding: 5% 3%;
    border-radius: 10px;
    transition: all 0.5s;
}
.productos a:hover{
    border: 1px solid var(--primario);
}
.productos img{
    width: 100%;
    display: block;
}
.productos a h2{
    display: block;
    width: 100%;
    height: 60px;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    color: var(--grisoscuro);
    margin: 0;
}
.productos a p{
    text-align: center;
    color: var(--gris);
}
.productos a h3{
    font-size: 20px;
    font-weight: 500;
    text-align: center;
    color: var(--grisoscuro);
}
.productos a:hover h2{
    text-decoration: underline;
}
.productos a .detpro{
    width: 100%;
    background: var(--secundario);
    text-align: center;
    font-size: 14px;
    color: var(--blanco);
    border-radius: 6px;
    padding: 12px 0;
    margin-top: 20px;
    transition: all 0.5s;
}
.productos a:hover .detpro{
    background: var(--primario);
}
.titfondonaranja{
    width: 100%;
    padding: 10px 0;
    background: var(--primario);
}
.titfondonaranja h2{
    font-size: 26px;
    text-align: center;
    line-height: 60px;
    color: var(--blanco);
}
.titfondonaranja div{
    width: 100px;
    height: 6px;
    background: var(--blanco);
    border-radius: 6px;
    margin: 15px auto;
}
.titulonaranja{
    width: 100%;
    padding: 10px 0;
}
.titulonaranja h2{
    font-size: 26px;
    text-align: center;
    line-height: 60px;
    color: var(--primario);
}
.titulonaranja div{
    width: 100px;
    height: 6px;
    background: var(--secundario);
    border-radius: 6px;
    margin: 15px auto;
}
.fonogris{
    background: var(--grisclaro);
    margin-bottom: 30px
}
.tituloblanco{
    width: 100%;
    padding: 10px 0;
}
.tituloblanco h2{
    font-size: 26px;
    text-align: center;
    line-height: 60px;
    color: var(--blanco);
}
.tituloblanco div{
    width: 100px;
    height: 6px;
    background: var(--primario);
    border-radius: 6px;
    margin: 15px auto;
}
.control-carrusel{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 30px 0;
}
.control-carrusel button{
    display: block;
    height: 45px;
    margin: 0 3px 0 0;
    line-height: 45px;
    background: var(--primario);
    text-align: center;
    color: var(--blanco);
    padding: 0 30px;
    font-weight: 600;
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: all 0.5s;
}
.control-carrusel button:hover{
    background: var(--secundario);
}
.control-carrusel button i{
    font-size: 35px;
}
.control-carrusel button:first-child{
    border-radius: 30px 0 0 30px;
}
.control-carrusel button:last-child{
    border-radius: 0 30px 30px 0;
}
/*********************************************************************/
/***************************  ZONA RECOMENDACION *********************/
/*********************************************************************/
#zonarecomendaciones{
    background: var(--blanco);
}
.contenedorrecomen{
    padding: 40px 0 0 0;
}
.cajarecomendacion{
    padding: 4%;
}
.cajarecomendacion a{
    display: block;
    background: var(--blanco);
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    padding: 5% 3%;
    border-radius: 10px;
}
.cajarecomendacion a img{
    width: 50%;
    display: block;
    margin: auto;
}
.cajarecomendacion a p{
    display: block;
    text-align: center;
}
/*********************************************************************/
/***************************  ZONA BEMEFICIOS    *********************/
/*********************************************************************/
#zonabeneficios{
    width: 100%;
    background: var(--secundario);
}
.martopbot{
    padding: 30px 0;
}
.marbot{
    padding: 0 0 30px 0;
}
.martop{
    padding: 30px 0 0 0;
}
#benef a img{
    width: 100%;
    display: block;
    margin: auto;
}
#benef a h3{
    text-align: center;
    color: var(--blanco);
    font-size: 16px;
    font-weight: 400;
}
#benef a span{
    width: 150px;
    height: 45px;
    display: block;
    margin: auto;
    background: var(--primario);
    color: var(--blanco);
    text-align: center;
    line-height: 45px;
    border-radius: 30px;
    font-weight: 600;  
}
#benef a span:hover{
    background: var(--grisclaro);
    color: var(--secundario);
}
/*********************************************************************/
/***************************   ZONA CLIENTES     *********************/
/*********************************************************************/
#zonaclientes{
    width: 100%;
    background: var(--blanco);
    position: relative;
}
.fondonaranja{
    width: 100%;
    height: 140px;
    background: var(--primario);
    position: absolute;
    left: 0;
    bottom: 0;
}
.cajarecliente{
    padding: 4%;
}
.cliente{
    display: flex;
    justify-content: space-between;
    background: var(--blanco) url('../imagenes/comillas.png') no-repeat left bottom;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    padding: 6% 5% 15% 5%;
    border-radius: 10px;
}
.cliente figure{
    width: 30%;
}
.cliente div{
    width: 68%;
}
.cliente figure img{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 100%;
}
.cliente div p{
    color: var(--grisoscuro);
}
.cliente div h3{
    font-size: 16px;
    color: var(--secundario);
    font-weight: 600;
}
.cliente div h4{
    font-size: 14px;
    color: var(--primario);
    font-weight: 600;
}
/*********************************************************************/
/***************************   ZONA CLIENTES     *********************/
/*********************************************************************/
#zonaempresas{
    background: var(--primario);
}
.logos{
    padding: 5%;
}
.logos img{
    width: 70%;
    height: auto;
    display: block;
    margin: auto;
}
.control-logos{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 30px 0;
}
.control-logos button{
    display: block;
    height: 45px;
    margin: 0 3px 0 0;
    line-height: 45px;
    background: var(--secundario);
    text-align: center;
    color: var(--blanco);
    padding: 0 30px;
    font-weight: 600;
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: all 0.5s;
}
.control-logos button:hover{
    background: var(--grisclaro);
    color: var(--secundario);
}
.control-logos button i{
    font-size: 35px;
}
.control-logos button:first-child{
    border-radius: 30px 0 0 30px;
}
.control-logos button:last-child{
    border-radius: 0 30px 30px 0;
}
/*********************************************************************/
/***************************   ZONA HERRAMIENTAS    ******************/
/*********************************************************************/
#zonaherramientas{
    background: var(--blanco);
}
.cajaherra{
    padding: 5%;
}
.cajaherra a{
    display: block;
}
.cajaherra a img{
    width: 200px;
    height: 200px;
    display: block; 
    margin: 15px auto;
    border-radius: 100%;
}
.cajaherra a i{
    width: 200px;
    height: 200px;
    display: block;
    background: var(--secundario);
    text-align: center;
    color: var(--blanco);
    font-size: 110px;
    margin: 15px auto;
    border-radius: 100%;
    line-height: 200px;
}
.cajaherra a p{
    text-align: center;
    font-size: 16px;
    font-weight: 600;
}
.cajaherra a h3{
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--gris);
}
.cajaherra a:hover i{
    background: var(--primario);
}
.cajaherra a:hover p{
    color: var(--primario);
}
/*********************************************************************/
/***************************     PIE PAGINA WEB     ******************/
/*********************************************************************/
#piepagina{
    min-height: 500px;
    background: var(--secundario) url('../imagenes/fondo-pie.png') no-repeat center bottom;
    padding: 30px 0 150px 0;
}
.titulpie h2{
    color: var(--blanco);
    font-size: 18px;
    font-weight: 600;
    margin: 6px 0;
}
.titulpie div{
    width: 100px;
    height: 4px;
    border-radius: 20px;
    background: var(--primario);
    margin: 6px 0 15px 0;
}
#piepagina ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.opcionespie li a{
    display: block;
    padding: 6px 0;
    color: var(--blanco);
}
.opcionespie li a:hover{
    text-decoration: underline;
    color: var(--primario);
}
.listacontact li a{
    display: block;
    color: var(--blanco);
    display: flex;
    align-items: center;
    padding: 6px 0;
}
.listacontact a i{
    width: 28px;
    height: 28px;
    background: var(--primario);
    color: var(--blanco);
    text-align: center;
    line-height: 28px;
    font-size: 18px;
    border-radius: 20px;
    margin-right: 6px;
}
.listacontact li a:hover{
    text-decoration: underline;
}
.sociales{
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sociales li{
    margin-right: 6px;
}
.sociales li a{
    width: 50px;
    height: 50px;
    display: block;
    text-align: center;
    line-height: 50px;
    background: var(--grisclaro);
    color: var(--grisoscuro);
    border-radius: 30px;
    font-size: 18px;
}
.sociales li a:hover{
    background: var(--primario);
    color: var(--blanco);
}
.reclamos{
    display: flex;
    margin: 15px 0;
}
.libro{
    display: block;
    text-align: center;
    color: var(--blanco);
}
.libro i{
    width: 100px;
    height: 100px;
    display: block;
    font-size: 60px;
    text-align: center;
    line-height: 100px;
    color: var(--blanco);
    margin: auto;
}
.whats{
    display: block;
    text-align: center;
    color: #55cd6c;
}
.whats i{
    width: 100px;
    height: 100px;
    display: block;
    color: #55cd6c;
    font-size: 60px;
    text-align: center;
    line-height: 100px;
    margin: auto;
}
#txtpie{
    width: 100%;
    background: var(--primario);
    padding: 5px;
    position: relative;
}
#txtpie p{
    text-align: center;
    color: var(--blanco);
}
.movil{
    width: 220px;
    height: auto;
    display: block;
    position: absolute;
    left: 50%;
    bottom: 100%;
    margin-left: -110px;
}
/***************************************************/
/********    	   ACERCA NOSOTROS          ********/
/***************************************************/
#zonanosotros{
    padding: 50px 0;
}
#txtnos figure img{
    width: 100%;
    height: auto;
    display: block;
    border-top: 10px solid var(--primario);
    border-bottom: 30px solid var(--secundario);
}
.titulosinterno{
    margin-bottom: 30px;
}
.titulosinterno h2{
    color: var(--gris);
    font-size: 16px;
    font-weight: 600;
}
.titulosinterno h3{
    color: var(--secundario) !important;
    font-size: 30px;
    font-weight: 600;
}
.titulosinterno div{
    width: 100px;
    height: 6px;
    background: var(--primario);
    border-radius: 20px;
    margin: 10px 6px;
}
#txtnos h3{
    font-size: 18px;
    color: var(--grisoscuro);
}
#txtnos p, #txtnos ul, #txtnos ol{
    text-align: justify;
    color: var(--grisoscuro);
    line-height: 26px;
}
.enlaces{
    width: 150px;
    height: 45px;
    background: var(--primario);
    display: block;
    text-align: center;
    line-height: 45px;
    color: var(--blanco);
    font-weight: 600;
    margin: 30px 6px;
    border-radius: 50px;
}
#zonaestadistica{
    min-height: 500px;
    background: url('../imagenes/fondo-datos.jpg') no-repeat center top;
    background-attachment: fixed;
}
#cajastadis{
    margin-top: 70px;
}
.datesta{
    width: 80%;
    margin: auto;
}
.datesta p{
    font-size: 40px;
    color: var(--primario);
    text-align: center;
    line-height: normal;
    font-weight: 600;
}
.datesta h2{
    font-size: 16px;
    color: var(--blanco);
    text-align: center;
    font-weight: 600;
}

/***************************************************/
/********    	   CONTACTENOS              ********/
/***************************************************/
#banner-top{
    min-height: 520px;
    background: var(--secundario) url('../imagenes/fondo-contacto.jpg') no-repeat center bottom;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#banner-top h1{
    color: var(--blanco);
    font-size: 35px;
    text-align: center;
    font-weight: 500;
}
.navegador{
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: center;
}
.navegador li{
    margin-right: 6px;
}
.navegador li a{
    color: var(--blanco);
}
.navegador li:first-child a{
    color: var(--primario);
}
.navegador li a i{
    font-size: 20px;
}
#zonacontacto{
    padding: 50px 0;
}
.lineaempre{
	display: flex;
	flex-direction: row;
	margin-bottom: 15px;
}
.lineaempre i{
	height: 60px;
	display: block;
	background: var(--primario);
	color: var(--blanco);
	font-size: 30px;
	margin-right: 10px;
	text-align: center;
	line-height: 60px;
    padding: 0 10px;
    border-radius: 6px;
}
.lineaempre p{
	color: var(--grisoscuro);
}
.lineaempre p span:first-child{
	color: var(--negro);
	font-weight: 600;
	display: block;
	font-size: 16px;
}
.campos{
	width: 100%;
	height: 45px;
	line-height: 43px;
	border: 1px solid var(--gris);
    padding: 0 10px;
    font-family: 'Roboto', sans-serif;
    border-radius: 4px;
}
.comentarios{
	width: 100%;
	height: 150px;
	border: 1px solid var(--gris);
	padding: 10px;
	font-family: 'Roboto', sans-serif;
}
.benviar{
	width: 300px;
	height: 60px;
	background: var(--primario);
	display: block;
	color: var(--blanco);
	text-align: center;
	line-height: 60px;
	font-size: 16px;
	font-weight: 600;
	transition: all 0.5s;
	border: none;
	border-radius: 6px;
	margin: 25px 0;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
}
.benviar:hover{
	background: var(--secundario);
}
#ubicanos{
    background: var(--secundario);
}
#mapa{
    min-height: 600px;
}
#cajarespuesta{
    width: 100%;
    padding: 15% 10%;
    background: var(--secundario);
    border-radius: 10px;
}
#cajarespuesta i{
    font-size: 60px;
    text-align: center;
    color: var(--blanco);
}
#cajarespuesta p, #cajarespuesta h2{
    text-align: center;
    color: var(--blanco);
}
#cajarespuesta h2{
    font-size: 18px;
}
#cajarespuestanaranja{
    width: 100%;
    padding: 15% 10%;
    background: var(--primario);
    border-radius: 10px;
}
#cajarespuestanaranja i{
    font-size: 60px;
    text-align: center;
    color: var(--blanco);
}
#cajarespuestanaranja p, #cajarespuestanaranja h2{
    text-align: center;
    color: var(--blanco);
}
#cajarespuestanaranja h2{
    font-size: 18px;
}
/************************************************/
/************       NOTICIAS        *************/
/************************************************/
#colnoticias{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
    flex-wrap: wrap;
    padding: 30px 0;
}
#noticiaizq{
	width: 68%;
}
#noticiader{
	width: 28%;
}
.unanoticia{
	margin-bottom: 30px;
}
.unanoticia img{
	width: 100%;
	height: auto;
}
.unanoticia p{
	color: var(--grisoscuro);
	font-size: 16px;
	font-weight: 600;
	text-align: center;
}
.unanoticia h2{
	font-size: 36px;
	color: var(--negro);
	text-align: center;
	font-weight: 500;
}
.linknoticia:hover h2{
	text-decoration: underline;
}
.dosnoticias{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-bottom: 20px;
}
.noticia{
	width: 49%;
	margin-bottom: 20px;
}
.noticia figure{
	position: relative;
	margin: 0;
	padding: 0;
}
.noticia figure img{
	width: 100%;
	height: auto;
}
.noticia figure figcaption{
	width: 190px;
	height: 30px;
	line-height: 30px;
	display: block;
	background: var(--primario);
	color: var(--blanco);
	text-align: center;
	font-size: 14px;
	font-weight: bold;
	position: absolute;
	left: 0;
	bottom: 0;
}
.noticia p{
	color: var(--grisoscuro);
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	margin: 10px 0 0 0;
}
.noticia h2{
	font-size: 16px;
	color: var(--grisoscuro);
	text-align: center;
	font-weight: normal;
}
.fecha{
	margin: 0 0 10px 0;
	color: var(--gris);
	font-size: 13px;
	text-align: center;
}

#cajatituazul{	
	background: var(--secundario);
	padding: 10px;
	margin-bottom: 20px;
}
#cajatituazul h2{
	color: var(--blanco);
	text-align: center;
	font-weight: 500;
	font-size: 22px;
}
#cajatituazul a{
	width: 80%;
	display: block;
	margin: auto;
	background: var(--primario);
	text-align: center;
	color: var(--blanco);
	padding: 10px 0;
	font-weight: 600;
	font-size: 16px;
}
#cajatop{
	padding: 20px 0;
	border-top: 4px solid var(--secundario);
}
#cajatop h2{
	color: var(--grisoscuro);
	text-align: center;
	font-size: 30px;
}
#cajalistader{
	border: 1px solid #e5e5e5;
	position: relative;
	padding: 25px 20px;
}
.masleido{
	width: 150px;
    background: #fff;
    font-size: 22px;
	text-align: center;
	color: var(--negro);
	position: absolute;
	left: 50%;
	top: -20px;
	transform: translateX(-50%);
}
.listanot{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 10px 0;
	border-bottom: 1px solid #e5e5e5;
}
.listanot figure{
	width: 90px;
	height: 90px;
	display: block;
	position: relative;
	overflow: hidden;
}
.listanot figure img{
	height: 90px;
	width: auto;
	position: absolute;
	left: 0;
	top: 0;
	transform: translateX(-25%);
}
.listanot figure span{
	width: 30px;
	height: 30px;
	background: #F7F6F6;
	display: block;
	text-align: center;
	line-height: 30px;
	font-size: 13px;
	position: absolute;
	left: 0;
	top: 0;
}
.listanot div{
	width: 70%;
	padding: 0 10px;
}
.listanot div p{
	color: var(--negro);
	font-size: 13px;
	font-weight: 600;
}
.listanot h2{
	color: var(--grisoscuro);
	font-size: 16px;
	font-weight: normal;
}
.listanot:hover h2{
	text-decoration: underline;	
}
/************************************************/
/************   Estilos Productores  ************/
/************************************************/
.zonaproductores{
    background: #f2f2f2;
    border-radius: 6px;
    padding: 6% 4%;
}
.zonaproductores h3{
    font-size: 18px;
    color: var(--grisoscuro);
    text-align: center;
}
.zonaproductores p{
    color: var(--grisoscuro);
}
.zonaproductores h2{
    font-size: 15px;
    font-weight: 600;
}
.zonaproductores .olvidocontra{
    width: 180px;
    display: block;
    margin: 30px auto;
    color: var(--grisoscuro);
    text-align: center;
    border-bottom: 1px dashed var(--grisoscuro);
    padding: 15px 0;
}
.zonaproductores .olvidocontra:hover{
    color: var(--primario);
}
.botoncentrado{
    margin: auto;
}
.zonaproductores form{
    margin: 20px 0;
}
.bannerproduc img{
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
}
#fingreso{
    background: var(--blanco);
    padding: 30px 15px;
    border-radius: 6px;
    margin: 15px 0;
}
#cajagalpro{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}
#cajagalpro a{
    width: 12%;
    display: block;
    padding: 1%;
}
#cajagalpro a img{
    width: 100%;
    height: auto;
    display: block;
}
.camarita{
    position: relative;
}
.camarita span{
    width: 24px;
    height: 24px;
    background: var(--grisoscuro);
    color: var(--blanco);
    position: absolute;
    right: -15px;
    top: -20px;
    text-align: center;
    line-height: 24px;
    border-radius: 30px;
    font-size: 13px;
}
/************************************************/
/******   Estilos para Productores   ************/
/************************************************/
.productores{
    padding: 50px 0;
}
#cajatab{
	margin-bottom:10px;
	overflow:hidden;
}
.titulosinternos{
    width: 100%;
    padding: 20px 0;
    margin-bottom: 30px;
}
.titulosinternos h2{
    color: var(--grisoscuro);
    font-size: 24px;
}
.titulosinternos h2 i{
    font-size: 34px;
}
.titulosinternos div{
    width: 100px;
    height: 4px;
    border-radius: 10px;
    background: var(--primario);
    margin: 15px 0;
}
/************************************************/
/************   Estilos Herramientas  ************/
/************************************************/
.bherramientas{
    margin: 28px 0 0 0;
    padding: 0;
    list-style: none;
}
.bherramientas li{
    margin-bottom: 10px;
}
.bherramientas li a{
    display: flex;
    background: var(--primario);
    border-radius: 6px;
    padding: 10px 30px;
    align-items: center;
    color: var(--blanco);
    font-size: 16px;
    font-weight: 600;
    transition: all 0.5s;
}
.bherramientas li a i{
    width: 80px;
    height: 80px;
    display: block;
    border-radius: 100%;
    text-align: center;
    line-height: 80px;
    text-align: center;
    background: var(--secundario);
    font-size: 45px;
    margin-right: 10px;
}
.bherramientas li a:hover{
    background: var(--secundario);
}
.bherramientas li a:hover i{
    background: var(--primario); 
}
.bherramientas li a.vip{
    background: #FFCE49;
    color: var(--negro);
}
.bherramientas li a.vip i{
    color: #FFCE49;
    font-size: 40px;
}
/********************************************************/
/********************** CALCULAR ************************/
/********************************************************/
.formulario{

}
.formulario h2{
    font-size: 15px;
    font-weight: 600;
}
.campos{
    width: 100%;
    height: 45px;
    background: var(--blanco);
    border: 1px solid #cccccc;
    line-height: 43px;
    padding: 0 10px;
    font-size: 14px;
    border-radius: 4px;
}
.txtarea{
    width: 100%;
    height: 100px;
    background: var(--blanco);
    border: 1px solid #cccccc;
    padding: 10px;
    font-size: 14px;
    border-radius: 4px;
}
#sobre, #caja{
    display: none;
}
.radioscal label{
    display: block;
    text-align: center;
    font-size: 14px;
    padding: 5px;
}
.radioscal label:hover{
    background: var(--primario);
    color: var(--blanco);
    border-radius: 6px;
}

.radioscal input[type="radio"]:checked+label {
    background: var(--primario);
    color: var(--blanco);
    border-radius: 6px;
}
.radioscal label img, .imgs{
    width: 85%;
    height: auto;
    display: block;
    margin: 10px auto;
}
.imgs1, .imgs2{
    width: 50% !important;
    height: auto !important;
    display: block !important;
    margin: 10px auto !important;
}
.bnaranja{
    width: 100%;
    height: 50px;
    display: block;
    background: var(--primario);
    text-align: center;
    color: var(--blanco);
    font-size: 16px;
    font-weight: bold;
    line-height: 50px;
    border-radius: 6px;
    cursor: pointer;
    margin-bottom: 10px;
}
.bnaranja:hover{
    background: var(--secundario);
}
.bazul{
    width: 100%;
    height: 50px;
    display: block;
    background: var(--secundario);
    text-align: center;
    color: var(--blanco);
    font-size: 16px;
    font-weight: bold;
    line-height: 50px;
    border-radius: 6px;
    cursor: pointer;
    margin-bottom: 10px;
}
.bazul:hover{
    background: var(--primario);
}
.anchoboton{
    width: 100%;
}
.resultadocalculo{
    width: 98%;
    padding: 20px;
    margin: 10px auto 0 auto;
    background: var(--secundario);
    border-radius: 6px;
    border: 1px solid var(--gris);
    margin-bottom: 15px;
}
.resultadocalculo h4{
    font-size: 16px;
    font-weight: 600;
    margin: 10px 6px;
    color: var(--blanco);
}
.resultadocalculo p{
    color: var(--blanco);
}
/********************************************************/
/****************** REGISTRO ENVIO **********************/
/********************************************************/
#botregenvio{
    display: flex;
    flex-direction: row;
}
.bregenv{
    width: 33.3%;
}
.bregenv p{
    font-size: 13px;
    text-align: center;
    font-weight: bold;
}
.cicon{
    width: 100%;
    position: relative;
    height: 50px;
}
.cicon i{
    width: 50px;
    height: 50px;
    display: block;
    background: var(--gris);
    border-radius: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 22px;
    color: var(--blanco);
    margin: 5px auto;
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -25px;
}
.cicon i.iconactivo{
    background: var(--primario);
}
.lineactivo{
    width: 100%;
    height: 2px;
    background: var(--primario);
    position: absolute;
    left: 0;
    top: 50%;
}
.linegris{
    width: 100%;
    height: 2px;
    background: var(--gris);
    position: absolute;
    left: 0;
    top: 50%;
}
.txtenvactivo{
    color: var(--primario);
}
.txtgris{
    color: var(--grisoscuro);
}
.ok{
    width: 90%;
    max-width: 268px;
    height: auto;
    display: block;
    margin: 30px auto;
}
.iconosfinal{
    display: flex;
    padding: 6px 0;
    border-bottom: 1px solid var(--gris);
}
.iconosfinal i{
    display: block;
    font-size: 24px;
    color: var(--secundario);
    margin-right: 6px;
}
.iconosfinal p{
    margin: 0;
}
.iconosfinal p a{
    font-weight: 600;
    color: var(--primario);
}
.iconosfinal p span{
    font-weight: 600;
    color: var(--primario);
}
.contenedorsecciones{
    width: 100%;
}
.envio1{
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    transition: all 0.5s;
}
.envio2, .envio3, .envio4{
    width: 100%;
    position: absolute;
    left: 110%;
    top: 0;
    transition: all 0.5s;
}
#cajaprocesar{
    width: 100%;
    background: var(--secundario);
    padding: 10px;
    border-radius: 6px;
    margin: 15px 0;
}
#cajaprocesar p{
    text-align: center;
    color: var(--blanco);
    font-size: 18px;
}
.txtresumen p{
    text-align: left;
}
/********************************************************/
/******************  SEGUIMIENTOS  **********************/
/********************************************************/
.tablas{
	border-collapse: collapse;
    margin: 0 0 15px 0;
    border: 1px solid #C7C7C7;
    background: var(--blanco);
}
.tablas td{
	padding: 6px;
	font-size: 14px;
    color: #333333;
    border-bottom: 1px solid #C7C7C7;
}
.tablas th{
	padding: 6px;
	border: 1px solid #C7C7C7;
	font-size: 14px;
	color: #333333;
	font-weight: normal;
}
.tablas td:nth-child(1) {
    background-color: #eee;
}
#mapa{
    width: 100%;
    height: 500px;
}
.enlacelocal{
    font-weight: 700;
    color: var(--primario);
}
.enlacelocal i{
    font-size: 20px;
}
#cajarespuesta{
    width: 100%;
    padding: 15% 10%;
    background: var(--primario);
    border-radius: 10px;
}
#cajarespuesta i{
    font-size: 60px;
    text-align: center;
    color: var(--blanco);
}
#cajarespuesta p, #cajarespuesta h2{
    text-align: center;
    color: var(--blanco);
}
/***************************************************/
/****************       ICONOS      ****************/
/***************************************************/
.iconoazul{
	font-size: 22px;
	color: var(--secundario);
	cursor: pointer;
}
.iconorojo{
	font-size: 22px;
	color: red;
	cursor: pointer;
}
.borrar{
	width: 100px;
	height: 40px;
	background: red;
	display: block;
	border-radius: 6px;
	text-align: center;
	line-height: 40px;
	cursor: pointer;
	color: #fff;
	font-size: 13px;
	margin: 10px 0;
	border: none;
	font-weight: 600;
}
.borrar i{
	font-size: 18px;	
}
.borrar:hover{
	background: var(--secundario);	
}
.tablaslista{
	border-collapse: collapse;
	margin: 0;
}
.tablaslista td{
	padding: 8px;
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	color: #333333;
}
.tablaslista th{
	padding: 8px;
	border: 1px solid #C7C7C7;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	color: #333333;
	font-weight: normal;
}
#centro-top{
	width: 100%;
	margin: auto;
	padding: 10px 0;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
#centro-top h4{
	display: block;
	width: 60%;
	font-size: 20px;
	color: var(--negro);
	margin: 0;
	line-height: 45px;
}
#centro-top div{
	width: 40%;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}
#centro-top div a{
	width: 200px;
	height: 45px;
	line-height: 45px;
	display: block;
	background: var(--primario);
	text-align: center;
	border-radius: 6px;
	color: #FFFFFF;
	font-size: 14px;
	margin-left: 6px;
}
#centro-top div a i{
	font-size: 20px;
}
.fondofila{
	background: #005AA6;
}
.fondofila h2{
	color: #fff;
	margin: 6px;
}
.fondofilarojo{
	background: red;
}
.fondofilarojo h2{
	color: #fff;
}
.aliderecha{
	text-align: right;
}
.camposform{
	border: 1px solid #ccc;
	padding: 10px;
}
.camposform:focus{
	border: 1px solid #ccc;
}
.botones{
	width: 250px;
	height: 45px;
	background: var(--secundario);
	display: block;
	border-radius: 6px;
	text-align: center;
	line-height: 45px;
	border: none;
	cursor: pointer;
	color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
	margin-bottom: 10px;
}
/************************************************/
/************   Estilos Seguimiento  ************/
/************************************************/
#mapa{
    width: 100%;
    height: 500px;
    margin: auto;
    background: #f2f2f2;
    border-radius: 6px;
    border: 15px solid #e6e6e6;
}
.nohaylocal{
    width: 100%;
    background: var(--primario);
    padding: 5%;
    border-radius: 6px;
    margin: 20px 0;
}
.nohaylocal h2{
    text-align: center;
    font-size: 20px;
    color: var(--blanco);
}
.procesarmapa{
    width: 100%;
    margin: 20px 0;
}
.procesarmapa p{
    text-align: center;
    font-size: 16px;
    color:var(--primario)
}
.procesarmapa p i{
    font-size: 100px;
    display: block;
}
/************************************************/
/************   Estilos para Productos  *********/
/************************************************/
.navegadorinterno{
    width: 100%;
    padding: 20px;
    background: var(--primario);
}
.navegadorinterno a{
    color: var(--blanco);
    margin-right: 6px;
}
.navegadorinterno a:hover{
    text-decoration: underline;
    color: var(--secundario);
}
#zonaproductos{
    padding: 0 0 30px 0;
}
.cproductos{
    padding: 1%;
}
.cproductos a{
    display: block;
    background: var(--blanco);
    border: 1px solid var(--blanco);
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    padding: 5% 3%;
    border-radius: 10px;
    transition: all 0.5s;
}
.cproductos a:hover{
    border: 1px solid var(--primario);
}
.cproductos img{
    width: 100%;
    display: block;
}
.cproductos a h2{
    display: block;
    width: 100%;
    height: 60px;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    color: var(--grisoscuro);
    margin: 0;
}
.cproductos a p{
    text-align: center;
    color: var(--gris);
}
.cproductos a h3{
    font-size: 20px;
    font-weight: 500;
    text-align: center;
    color: var(--grisoscuro);
}
.cproductos a:hover h2{
    text-decoration: underline;
}
.cproductos a .detpro{
    width: 100%;
    background: var(--secundario);
    text-align: center;
    font-size: 14px;
    color: var(--blanco);
    border-radius: 6px;
    padding: 12px 0;
    margin-top: 20px;
    transition: all 0.5s;
}
.cproductos a:hover .detpro{
    background: var(--primario);
}
.colcategorias{
    padding: 2% 0 1% 0;
}
.colcategorias h2{
    width: 100%;
    background: var(--grisoscuro);
    text-align: center;
    padding: 14px;
    color: var(--blanco);
    font-size: 14px;
    margin: 0;
    border-radius: 6px 6px 0 0;
}
/***************************************************/
/********      DISEÑO CHECK FILTROS         ********/
/***************************************************/
.formufiltro{
    padding: 10px 20px;
    border: 1px solid var(--gris);
    border-radius: 0 0 6px 6px;
}
.acordion{
	padding: 0;
}
.acordion dt {
	cursor: pointer;
}
.acordion dt:hover .accordion_icon{
	color: var(--secundario);
}
.accordion_icon {
	color: #ccc;
	margin-top: 4px;
}
.accordion_content {
	margin: 0;
	padding: 5px 0;       
} 
.titufiltro{
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	border-bottom: 2px solid var(--grisclaro);
	padding: 10px 0;
	margin-bottom: 15px;
	font-size: 16px;
	font-weight: 600;
	color: var(--grisoscuro);
}
.titufiltro span{
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	font-weight: 500;
}
.formufiltro .checkbox label {
	width: 100%;
	display: inline-block;
	cursor: pointer;
	color: var(--grisoscuro);
	position: relative;
	padding: 5px 15px 5px 30px;
	font-size: 1em;
	border-radius: 5px;
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	margin-bottom: 5px;
}
.formufiltro .checkbox label:before {
  content: "";
  display: inline-block;
  width: 17px;
  height: 17px;
  position: absolute;
  left: 0;
  border-radius: 50%;
  background: none;
  border: 2px solid var(--secundario); 
}
.formufiltro .checkbox label:before {
	border-radius: 3px;
}

.formufiltro .checkbox input[type="checkbox"] {
	display: none;
}

.formufiltro .checkbox input[type="checkbox"]:checked + label:before {
	display: none;
}
.formufiltro .checkbox input[type="checkbox"]:checked + label {
	background: var(--secundario);
    color: var(--blanco);
    padding: 5px 15px;
}
.camposfiltro{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
    align-items: center;
    padding: 10px 0 15px 0;
}
.camposfiltro input{
	width: 40%;
	height: 40px;
	border: 2px solid var(--grisclaro);
	line-height: 40px;
	padding: 0 10px;
	color: var(--gris);
	border-radius: 4px;
}
.camposfiltro p{
	width: 20%;
	display: block;
	text-align: center;	
}
#bfiltrar{
	background: var(--primario);
	width: 100%;
	height: 40px;
	line-height: 40px;
	border: none;
	text-align: center;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	border-radius: 6px;
	margin: 20px 0 15px 0;
	cursor: pointer;
}
#bfiltrar:hover{
	background: var(--secundario);
}
/***************************************************/
/********      DETALLE DE PRODUCTOS         ********/
/***************************************************/
#zonanombreproducto{
	margin-bottom: 10px;
}
#zonanombreproducto h1{
	font-size: 27px;
    font-weight: 600;
    padding: 20px 0;
}
#zonanombreproducto section{
	display: flex;
	align-items: center;
}
#zonanombreproducto section p{
	line-height: 26px;
	display: block;
	border-right: 1px solid #ccc;
	padding: 0 10px;
	margin: 0;
	color : var(--grisoscuro);
}
#zonanombreproducto section p:last-child{
	border-right: none;
}
#secciondetalle{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: wrap;
}
#imgproducto{
	width: 50%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-content: flex-start;
	position: relative;
}
#detalleproducto{
	width: 50%;
	padding: 0 5%;
}
.navgaleria{
	width: 13%;
	display: flex;
	flex-direction:column;
}
#galeriaproductos{
	width: 85%;
}
#cajagaleria{
	border: 1px solid var(--gris);
}
.navgaleria a{
	display: block;
	border: 1px solid var(--primario);
	margin-bottom: 6px;
}
.navgaleria a img{
	width: 100%;
	height: auto;
}
.navgaleria a:hover{
	border: 1px solid var(--secundario);	
}

#preciomarca{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.txtprecios{
	width: 60%;
}
.logomarca{
	width: 60%;
}
.logomarca img{
	width: 80%;
	height: auto;
}
.pprecio{
	font-size: 18px;
	color: var(--rojo);
	margin: 0 6px;
}
.pprecio span{
	font-size: 40px;
	font-weight: 600;
	color: var(--rojo);
}
.pnormal{
	font-size: 16px;
	font-weight: 600;
	color: var(--gris);
}
.nstock{
	font-size: 16px;
	font-weight: 600;
	color: var(--rojo);
}
#txtcaracteristicas{
	border-bottom: 1px solid var(--gris);
	column-count: 2;
	padding: 10px 0;
}
#txtcaracteristicas ul{
	color : var(--grisoscuro);
	list-style-type: square;
	margin: 0;
	padding: 0 0 0 14px;
	font-size: 13px;
	line-height: 20px;
}
#botonesdetalle{
	border-bottom: 1px solid var(--gris);
	padding: 10px 0;
}
#cajabotones{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
#botonesdetalle p{
	color : var(--grisoscuro);
}
.agregar, .milista{
	display: block;
	padding: 10px;
	background: var(--secundario);
	color: #fff;
	transition: all 0.5s;
    text-align: center;
    cursor: pointer;
    position: relative;
}
.agregar:hover, .milista:hover{
	background: var(--primario);
}
.valores span{
	display:flex;
	flex-direction:row;	
}
.cantidad{
	display:block;
	width:60px;
	height:40px;
	line-height:38px;
	text-align:center;
	border:1px solid #CCCCCC;
	background:#FFFFFF;	
}
#min{
	display:block;
	width:40px;
	height:40px;
	line-height:38px;
	text-align:center;
	border-top:1px solid #CCCCCC;
	border-left:1px solid #CCCCCC;
	border-bottom:1px solid #CCCCCC;
	background:#FFFFFF;
	cursor:pointer;	
	font-size:16px;
	box-sizing:border-box;
}
#plus{
	display:block;
	width:40px;
	height:40px;
	line-height:38px;
	text-align:center;
	border-top:1px solid #CCCCCC;
	border-right:1px solid #CCCCCC;
	border-bottom:1px solid #CCCCCC;
	background:#FFFFFF;
	cursor:pointer;
	font-size:18px;	
}
#cajacompartir{
	border-bottom: 1px solid var(--gris);
	padding: 10px 0;
}
#cajacompartir h2{
	font-size: 16px;
	font-weight: 600;
}
.linetiendas{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin: 0 6px;
	color : var(--grisoscuro);
}
.despacho{
	display: flex;
	align-items: center;
}
.despacho i{
	font-size: 24px;
	margin-right: 10px;
}
.vercaracteristicas{
	display: block;
	background: var(--secundario);
	color: var(--blanco);
	text-align: center;
	font-weight: 600;
	padding: 12px 10px;
	margin: 20px 0;
	border: 2px solid var(--secundario);
}
.vercaracteristicas:hover{
	border: 2px solid #ccc;
	background: #ECECEC;
	color: var(--secundario)
}
.owl-carousel .owl-nav button.owl-prev{
	background: none;
	border: none;
	padding: 0 !important;
	font: inherit;
	position: absolute;
	top: 50%;
	left: -5px;
	transform: translateY(-50%);
	width: 40px;
	height: 80px;
	display: block;
	background-color: var(--secundario) !important;
	color: var(--blanco) !important;
	border-radius: 0;
}
.owl-carousel .owl-nav button.owl-next{
	background: none;
	border: none;
	padding: 0 !important;
	font: inherit;
	position: absolute;
	top: 50%;
	right: -5px;
	transform: translateY(-50%);
	width: 40px;
	height: 80px;
	display: block;
	background-color: var(--secundario) !important;
	color: var(--blanco) !important;
	border-radius: 0;
}
.owl-carousel .owl-nav button.owl-prev:hover, .owl-carousel .owl-nav button.owl-next:hover{
	background-color: var(--primario) !important;
	color: var(--blanco);
}
.owl-carousel .owl-nav button.owl-next span, .owl-carousel .owl-nav button.owl-prev span{
	width: 40px;
	height: 40px;
	display: block;
	font-size: 30px;
}
/***************************************************/
/********        CARRITO DE COMPRAS         ********/
/***************************************************/
#carritocompras{
	min-height: 600px;
    background: var(--fondocarrito);
    padding-bottom: 40px;
}
#navegacioncarrito{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	padding: 30px 0;
}
#navegacioncarrito ul{
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
}
#navegacioncarrito li:first-child a{
	color: var(--secundario);
	border-right: 1px solid var(--grisclaro);
		
}
#navegacioncarrito li a{
	display: block;	
	padding: 0 5px;
}
#botonesavance{
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}
#botonesavance a{
	display: flex;
	color: var(--grisoscuro);
	align-items: center;
	padding: 0 60px 0 5px;
	background: url(../imagenes/linea.png) no-repeat right;
}
#botonesavance a:last-child{
	padding: 0 0 0 5px;
	background: none;
}
#botonesavance a.txtactivo{
	color: var(--negro);
	font-weight: 500;
	font-size: 14px;
}
#botonesavance a .circuloactivo{
	width: 40px;
	height: 40px;
	display: block;
	background: var(--primario);
	color: var(--blanco);
	border-radius: 50px;
	text-align: center;
	line-height: 40px;
	font-size: 24px;
	margin-right: 5px;
}
#botonesavance a span{
	width: 26px;
	height: 26px;
	display: block;
	background: var(--grisoscuro);
	color: var(--blanco);
	border-radius: 50px;
	text-align: center;
	line-height: 26px;
	font-size: 18px;
	margin-right: 5px;
}
.filacarrito{
	background: var(--blanco);
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	padding: 5px;
	border-radius: 10px;
	margin-bottom: 15px;
}
.imgcarrito{
	width: 13%;
	padding: 0 10px;
}
.datospro{
	width: 52%;
}
.txtcantprecio{
	width: 15%;
}
.txtprecionum{
	width: 15%;
}
.cajaborrar{
	width: 5%;
}
#fcarrito h2{
	margin: 24px 0;
    font-weight: 500;
    font-size: 20px;
}
#fcarrito p{
	color: var(--gris);
	font-size: 14px;
	font-weight: 500;
}
#fcarrito h3{
	font-weight: 600;
	font-size: 16px;
}
#fcarrito p.preciounit{
	font-size: 16px;
	font-weight: 600;
}
#fcarrito p.preciotot{
	font-size: 16px;
	font-weight: 600;
	color: var(--primario);
}
.imgcarrito{
	position: relative;	
}
.imgcarrito img{
	width: 100%;
	height: auto;
	display: block;
}
.imgcarrito span{
	width: 26px;
	height: 26px;
	display: block;
	background: var(--primario);
	text-align: center;
	line-height: 26px;
	color: var(--blanco);
	position: absolute;
	right: 10px;
	top: 10px;
	font-family: roboto;
	font-size: 13px;
}
.addplus{
	display: flex;
	flex-direction: row;
}
.rest, .agre{
	width: 35px;
	height: 35px;
	display: block;
	border: 1px solid var(--grisclaro);
	text-align: center;
	line-height: 33px;
	border-radius: 6px;
	margin: 0 5px;
	cursor: pointer;
}
.cantcar{
	width: 35px;
	height: 35px;
	display: block;
	border: 1px solid var(--grisclaro);
	text-align: center;
	line-height: 33px;
	border-radius: 6px;
}
.titdat{
	display: block;
	line-height: 35px;
	font-size: 15px;
}
.cajaborrar a{
	font-size: 30px;
	color: var(--gris);
    transition: all 0.5s;
    cursor: pointer;
}
.cajaborrar a:hover{
	color: var(--secundario);	
}
.filatotales{
	background: var(--blanco);
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	padding: 10px;
	border-radius: 10px;
	margin-bottom: 15px;
}
.cajacupon{
	width: 65%;
	display: flex;
	flex-direction: row;
	align-items: center;
}
#cupon{
	width: 100%;
	max-width: 350px;
	height: 50px;
	border: 1px solid var(--grisclaro);
	line-height: 48px;
	padding: 0 10px;
	background: var(--blanco);
	border-radius: 10px;
	margin-right: 10px;
}
.cajacupon a{
	width: 26px;
	height: 26px;
	display: block;
	background: var(--grisoscuro);
	line-height: 26px;
	text-align: center;
	color: var(--blanco);
	border-radius: 50px;
	transition: all 0.5s;
}
.cajacupon a:hover{
	background: var(--secundario);	
}
.subrayado{
	border-bottom: 1px solid var(--grisclaro);
	padding: 5px 0;
}
.cajaresumen{
	background: var(--blanco);
	padding: 20px 10px;
	border-radius: 10px;
	margin-bottom: 15px;
}
.resumen{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
.txtresumen{
	width: 33.3%;
}
.cajalugares{
	width: 33.3%;
}
.bcontinuar{
	width: 33.3%;
}
.cajaresumen h2{
	margin: 10px 6px !important;	
}
#cod_tienda{
	display: block;
	border: 1px solid var(--grisclaro);
	color: var(--grisoscuro);
	padding: 5px 15px;
	margin-bottom: 6px;
}
.cajalugares a{
	width: 205px;
	display: block;
	padding: 10px;
	background: var(--secundario);
	color: var(--blanco);
	border-radius: 6px;
	text-align: center;
	transition: all 0.5s;
}
.cajalugares a:hover{
	background: var(--grisoscuro);	
}
#bcomprar{
	width: 300px;
	height: 60px;
	display: block;
	background: var(--primario);
	text-align: center;
	color: var(--blanco);
	font-size: 16px;
	font-weight: 600;
	border-radius: 6px;
	line-height: 60px;
	border: none;
	margin-bottom: 15px;
	cursor: pointer;
	transition: all 0.5s;
}
#bcomprar:hover{
	background: var(--secundario);	
}
.bcontinuar a{
	display: block;
	padding: 10px 0;
	width: 300px;
	color: var(--grisoscuro);
	text-align: center;
	border-bottom: 2px dotted var(--grisoscuro);
	font-size: 16px;
	font-weight: 500;
	transition: all 0.5s;
}
.bcontinuar a:hover{
	color: var(--secundario);	
}
.cajafonocompras{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin: 30px 0;
}
.cajafonocompras p{
	color: var(--grisoscuro);
	font-weight: 500;
	font-size: 15px;
}
.cajafonocompras ul{
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	align-items: center;
	color: var(--grisoscuro);
}
.cajafonocompras ul li{
	margin-right: 6px;	
}
.cajafonocompras ul li a img{
	border-radius: 4px;
}
.numcar{
	width: 25px;
	height: 25px;
	display: block;
	background: black;
	color: white;
	text-align: center;
	line-height: 25px;
	font-size: 12px;
	border-radius: 100px;
	position: absolute;
	top: -10px;
	right: -10px;
}
.bolsavacia{
    padding: 100px 0;
    background: var(--blanco);
    border-radius: 6px;
}
.bolsavacia i{
	display: block;
	margin: auto;
	font-size: 80px;
	text-align: center;
	color: var(--grisclaro);
}
.bolsavacia h4{
	text-align: center;
	color: var(--gris);
}
.bolsavacia a{
	display: block;
	width: 240px;
	text-align: center;
	border-bottom: 1px dashed var(--gris);
	border-top: 1px dashed var(--gris);
	padding: 10px 0;
	margin: 20px auto;
	color: var(--gris);
	font-size: 16px;
	font-weight: 600;
}
.bolsavacia a:hover{
	color: var(--azulclaro);
}
#frmVisaNet button{
    display: block;
    margin: auto;
}
.cajaterm{
    margin: 15px 0;
}
.cajaterm p{
    text-align: center;
    font-size: 16px;
    font-weight: 500;
}
.linkterm{
    color: var(--secundario);
    text-decoration: underline;
}
/************************************************/
/********   Estilos Envio y Recojo    ***********/
/************************************************/
#titulos-checkout{
	width:100%;
	margin:20px auto;
	padding:30px 20px;
	background:var(--primario);
	border-radius:6px;	
}
#titulos-checkout h2{
	font-size:24px;
	margin:0;
    color: var(--blanco);
    text-align: center;
}
#titulos-checkout p{
	margin:0;
    color: var(--blanco);
    text-align: center;
}
#titulos-checkout-gra{
	width:100%;
	margin:20px auto;
	padding:30px 20px;
	background: #40c367;
	border-radius:6px;	
}
#titulos-checkout-gra h2{
	font-size:24px;
	margin:0;
    color: var(--blanco);
    text-align: center;
}
#titulos-checkout-gra p{
	margin:0;
    color: var(--blanco);
    text-align: center;
}
.datoscliente{
	background:var(--blanco);
	border-radius:6px;
	position:relative;
}
.datostarjeta{
	background:var(--blanco);
	border-radius:6px;
}
.cabeceratarjeta{
	padding:20px 20px;
	border-bottom:1px solid var(--gris);
	margin-bottom:20px;
}
.cabeceratarjeta h2{
    font-size: 18px;
}
.cabeceratarjeta p{	
	color:var(--grisoscuro);
}
.cajacamposchec{
	padding:15px 30px;	
}
.cajacamposchec .campos{
	width:100%;
	height:45px;
	line-height:43px;
	border:1px solid #E6E0EB;
	border-radius:4px;
	padding:0 10px;
	color:#666;
}
.bcheckout{
	width:100%;
	height:50px;
	line-height:50px;
	background:var(--primario);
	text-align:center;
	font-size:16px;
	font-weight: 600;
	border:none;
	border-radius:4px;
	transition:all 0.5s;
	margin:25px 0 15px 0;
	cursor:pointer;
	color:#FFFFFF;
}
.bcheckout:hover{
	background:var(--secundario);		
}
.bpagarahora{
	width:100%;
	height:50px;
	line-height:50px;
	background:#40c367;
	text-align:center;
	font-size:16px;
	font-weight: 600;
	border:none;
	border-radius:4px;
	transition:all 0.5s;
	margin:25px 0 15px 0;
	cursor:pointer;
	color:#FFFFFF;
}
.bcheckoutdes{
	background:#CFCFCF;	
}
.cproenvio{
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	align-items:flex-start;
	margin-bottom:10px;
}
.cproenvio .img{
	width:25%;	
}
.cproenvio .deta{
	width:55%;
	padding:0 5px;	
}
.cproenvio .prec{
	width:20%;	
}
.cproenvio .img img{
	width:100%;
	height:auto;
	display:block;
	border:1px solid #E6E0EB;
}
.cproenvio .deta h2{
	font-size:14px;
	margin:0 6px;	
}
.cproenvio .deta p{
	font-size:13px;	
	line-height:16px;
	color: var(--grisoscuro);
}
.cproenvio .prec p{
	text-align:right;
    margin:0 6px;
    color: var(--grisoscuro);
}
.cajtotal{
	border-bottom:4px solid #E5E5E5;
	border-top:4px solid #E5E5E5;
	padding:15px 0;
	display:flex;
	justify-content:space-between;
    margin-top:20px;
    flex-wrap: wrap;
}
.tttext{
    width: 50%;
}
.ttnum{
    width: 50%;
}
.cajtotal p{
    font-size:14px;
    color: var(--grisoscuro);
}
.ttnum p{
    text-align: right;
    font-weight: 600;
}
.volvercarrito{
	display:block;
	margin:10px 6px;
    font-size:16px;
    font-weight: 600;
    color:var(--primario);
    display: block;
    text-align: center;
    border-bottom: 1px dashed var(--gris);
    padding: 10px 0;
}
.volvercarrito:hover{
    text-decoration: underline;
}
.radios{
	padding: 10px 10px;
	display: flex;
	align-items: center;
}
.radios label {
	cursor: pointer;
	color: var(--grisoscuro);
	position: relative;
	padding: 10px 10px 10px 29px;
	font-size: 13px;
	border-radius: 6px;
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	margin-right: 6px;
}
.radios label:hover {
	color: var(--primario);
}
.radios label:before{
	content: "";
	display: inline-block;
	width: 17px;
	height: 17px;
	position: absolute;
	left: 0;
	top:6px;
	border-radius: 50%;
	background: none;
	border: 2px solid var(--primario);;
}
.radios input[type="radio"] {
	display: none;
}
.radios input[type="radio"]:checked+label:before {
	display: none;
}
.radios input[type="radio"]:checked+label {
	padding: 10px;
	background: var(--primario);
	border-radius: 6px;
	color: var(--blanco);
}
.zonadatospago{
	padding:15px 0;	
}
#zonalocales{
	padding:15px 0;	
}
#zonalocales h3{
	font-size: 16px;
}
#zonadatos{
	padding:15px 0;	
}
#zonadatos h3{
	font-size: 16px;
}
.zonadatospago h3{
	display: flex;
    align-items: center;
    font-size: 16px;
}
.zonadatospago h3 span{
	width: 40px;
	height: 40px;
	display: block;
	background: var(--secundario);
	text-align: center;
	line-height: 40px;
	color: white;
	font-size: 18px;
	border-radius: 50px;
	margin-right: 6px;
}
.cajadatoscompra{
	width:100%;
	max-width:1280px;
	margin:20px auto;
	padding:40px 30px;
	border:1px solid #E6E0EB;
	background:#FCFCFD;
	border-radius:4px;	
}
.cajadatoscompra h2{
    font-size: 18px;
}
#advertencia{
	color:#A5F0E3;
	font-size:16px;
	font-family: 'Roboto', sans-serif;
}
#advertencia i{
	font-size:20px;	
}
.cajabotonesfin{
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.cajabotonesfin a{
    display: block;
    padding: 15px 25px;
    background: var(--primario);
    color: var(--blanco);
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    border-radius: 30px;
    transition: all 0.5s;
    margin-right: 6px;
}
.cajabotonesfin a:hover{
    background: var(--secundario);
}
/************************************************/
/************    Estilos Clientes    ************/
/************************************************/
.cajapreveedores{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.cajapreveedores div{
    width: 25%;
    padding: 1%;
}
.cajapreveedores div a{
    display: block;
    padding: 40px 20px;
    background: var(--blanco);
    border-radius: 10px;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    border: 1px solid #fff;
    transition: all 0.5s;
}
.cajapreveedores div a:hover{
    border: 1px solid var(--primario);
}
.cajapreveedores div a img{
    width: 100%;
    height: auto;
    display: block;
}
.cajapreveedores div a h2{
    text-align: center;
    font-size: 16px;
    font-weight: 500;
}
/***************************************************/
/********       DISEÑO PAGINADOR            ********/
/***************************************************/
.cajapaginador{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-bottom: 30px;
	flex-wrap: wrap;
}
.cajapaginador div:first-child{
	width: 40%;
}
.cajapaginador div:last-child{
	width: 60%;
}
#ordenar{
	padding: 5px;
}
.pagination{
	height: 36px;
	margin: 15px 0;
}
.pagination ul{
	margin: 0;
	padding: 0;
	border-radius: 6px;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	list-style: none;
	margin-bottom: 10px;
}
.pagination a{
	border-color: #ddd;
	border-style: solid;
	border-width: 1px 1px 1px 0;
	float: left;
	line-height: 30px;
	padding: 0 10px;
	cursor: pointer;
}
.pagination a:hover, .pagination .active a{
	color: #005aa6;
	outline: 0;
}
.pagination .active a{
	color: #005aa6;
	cursor: default;
}
.pagination li:first-child a{
	border-left-width: 1px;
	border-radius: 3px 0 0 3px;
}
.pagination li:last-child a{
	border-radius: 0 3px 3px 0;
}
.cajaproceso{
	display: block;
	padding: 8% 2%;
}
.cajaproceso h3{
	text-align: center;
	color: #005aa6;
	letter-spacing: 4px;
}
/************************************************/
/************   Estilos para 1024px  ************/
/************************************************/
@media only screen and (max-width: 1024px){

}
/************************************************/
/************   Estilos para 800px  *************/
/************************************************/
@media only screen and (max-width: 800px){
    /*********************************************************************/
    /***************************  TITULOS Y CARRUSEL *********************/
    /*********************************************************************/
    .zonacentro{
        width: 95%;
    }
    .titulonaranja h2{
        font-size: 22px;
        line-height: normal;
    }
    .tituloblanco h2{
        font-size: 22px;
        line-height: normal;
    }
    /***********************************************************/
	/********************** CONTENIDO HOME  ********************/
	/***********************************************************/
	#noticiaizq{
		width: 90%;
		margin: auto;
		margin-bottom: 15px;
	}
	#noticiader{
		width: 90%;
		margin: auto;
	}
	.noticia{
		width: 49%;
		margin-bottom: 20px;
	}
}
/************************************************/
/************   Estilos para 603px  *************/
/************************************************/
@media only screen and (max-width: 603px){
    #cajatelefonos{
        display: none;
    }
}
/************************************************/
/************   Estilos para 480px  *************/
/************************************************/
@media only screen and (max-width: 480px){
    /*********************************************************************/
    /***************************  TITULOS Y CARRUSEL *********************/
    /*********************************************************************/
    .zonacentro{
        width: 95%;
    }
    .titulonaranja h2{
        font-size: 18px;
        line-height: normal;
    }
    .tituloblanco h2{
        font-size: 18px;
        line-height: normal;
    }
    .movil{
        width: 160px;
        margin-left: -80px;
    }
    /*********************************************************************/
    /***************************     PIE PAGINA WEB     ******************/
    /*********************************************************************/
    #piepagina{
        min-height: 500px;
        background: var(--secundario) url('../imagenes/fondo-pie.png') no-repeat center bottom;
        background-size: 1000px;
        padding: 30px 0 150px 0;
    }
    /***************************************************/
    /********    	   CONTACTENOS              ********/
    /***************************************************/
    #banner-top{
        min-height: 350px;
        background: #2d4d8e url('../imagenes/fondo-contacto.jpg') no-repeat center bottom;
        background-size: 750px;
    }
    #banner-top h1{
        font-size: 26px;
    }
    /***********************************************************/
	/********************** CONTENIDO HOME  ********************/
	/***********************************************************/
	.noticia{
		width: 95%;
		margin: auto;
		margin-bottom: 20px;
	}
	.unanoticia h2{
		font-size: 26px;
	}
}