@charset "utf-8";
/* CSS Document */

/*////// GENERAL ///////*/

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body{
	
	height: 100vh;
	
}

a{
	font-family: "condor", sans-serif;
    font-weight: 500;
    font-style: normal;
	font-size: 13pt;
	color: #272E66;
	text-decoration: none;
}

.submenu::-webkit-scrollbar {
	width: 10px;
	background: #A3A3A3;
	
	
}

.submenu::-webkit-scrollbar-thumb{
	border: 1px solid #272E66;
	background: #272E66;
	border-radius: 10px;
}

/*/////////////////// ENCABEZADO ///////////////////*/


.cabecera{
	
	background: #E4E4E4;
	display: flex;
	justify-content:space-between;
	align-items: center;
	height: 70px;
	z-index: 200;
	position: fixed;
	width: 100%;
	border-bottom: solid 1px #035494;
	
}

.logotipo{
	background: url("../images/logo_comainsa.png");
	width: 298px;
	height: 56px; 
	margin-left: 30px;
	background-repeat: no-repeat;
	
}

.redes_menu{
	display: flex;
	align-items: center;
	
}

.iconos_redes{
	display: flex;
	justify-content: center;
	margin-right: 15px;
	width: 110px;
	
	gap:7px;
}

.redf {
	background: url("../images/icono_facebook.png");
	width: 30px;
	height: 30px;
	background-repeat: no-repeat;
	background-position: center 2px;
	background-size: contain;
	border: 2px solid #272E66;
	border-radius: 6px;
}

.redins {
	background: url("../images/icono_instagram.png");
	width: 30px;
	height: 30px;
	background-repeat: no-repeat;
	background-position: center 2px;
	background-size: contain;
	border: 2px solid #272E66;
	border-radius: 6px;
}

.redlin {
	background: url("../images/icono_linkedin.png");
	width: 30px;
	height: 30px;
	background-repeat: no-repeat;
	background-position: center 2px;
	background-size: contain;
	border: 2px solid #272E66;
	border-radius: 6px;
}

  .redf a, .redins a, .redlin a {
    display: inline-block;
    width: 30px;
	height: 30px;   
	transition: 0.3s;
	
} 

 .redf a:hover {
	transform: scale(110%);
	
}

/*#icono_menu{
	width: 50px;
	height: 50px;
	cursor: pointer;
	padding: 10px;
	margin-right: 50px;
} */

.icono_menu{
		position: relative;
		width: 30px;
		height: 50px;
		cursor: pointer;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 50px;
	}

.icono_menu::before {
		content: '';	
		position: absolute;
		width: 100%;
		height: 6px;
		background:#272E66;
		transform: translateY(-12px);
	    box-shadow: 0 12px #272E66;
		transition: 0.5s;
		border-radius: 5px;
	}
	
.icono_menu::after {
		content: '';	
		position: absolute;
		left: 0;
		width: 70%;
		height: 6px;
		background: #272E66;
		transform: translateY(12px);
		transition: 0.5s;
		border-radius: 5px;
	
	}

.slidebar.mostrar .icono_menu::before {
		transform: rotate(45deg);
		box-shadow: 0 0px #fff;
	}
	
.slidebar.mostrar .icono_menu::after {
		transform: rotate(315deg);
		width: 100%;
	}


/*/////////////////// NAVEGADOR ///////////////////*/


.slidebar{
	position: fixed;
	height: 100%;
	width: 260px;
	background: #E4E4E4;
	margin-left: -300px;
	margin-top: 50px;
	transition: all .6s;
	z-index: 9;
}

.slidebar.mostrar{
	margin-left: 0px;
	z-index: 9150;
	border-right:  solid 1px #035494;
}

.cont_menu{
	position: relative;
	width: 100%;
	height: 85%;
	margin-top: 40px;
	overflow-y: scroll;
}

.cont_menu::-webkit-scrollbar {
	display: none;
}

.items_menu{
	width: 100%;
	height: 100%;
	list-style: none;
	transition: all 0.4s ease;
}

.submenu-active .items_menu{
	transform: translateX( -56%);
}

.item a, .submenu_item {
	padding: 20px;
	border-bottom: dashed 1px #494949;
	display: inline-block;
	width: 100%;
/*	border-radius: 12px; */
	
}

.item a:hover, .submenu_item:hover, .submenu .menu-title:hover {
	background: rgba(3,10,62,0.2);
	color:#fff;
}

.submenu_item{
	
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #272E66;
	cursor: pointer;
	font-family: "condor", sans-serif;
    font-weight: 500;
    font-style: normal;
	font-size: 13pt;
	
}

.submenu{
	position: absolute;
	width: 100%;
	height: 100%; 
	top: 0px;
	background: #E4E4E4;
	right: calc(-100% - 26px);
/*	height: calc(100% + 100vh); */
	display: none;
	overflow-y: scroll;
	
}

.show-submenu ~ .submenu{
	display: block;
}

.menu-title{
	
	font-size: 13pt;
	padding: 15px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #272E66;
	cursor: pointer;
	font-family: "condor", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.submenu .menu-title{
	
	cursor: pointer;
}

.producto_categorias{
	width: 100%;
	
	color: #272E66;
	text-align: center;
	padding: 15px;
}


/*/////////////////// INFO COMAINSA ///////////////////*/


.info_comainsa{
	width: 100%;
	height:500px;	
	display: flex;
	align-items: center;
	justify-content: center;
	background-attachment: fixed;
}

.cuadro_info_comainsa{
	width: 500px;
	height: 200px;
	font-size: 15pt;
	text-align: center;
	
	
}

.contenedor_datos ul{
	background:  #272E66;
	font-size: 15pt;
}

.contenedor_datos ul li{
	
}

.cuadro_info_comainsa2{
	width: 250px;
	height: 550px;
	border: 1px solid #272E66;
	border-radius: 20px;
	background: url("../images/tabla_envio.png");
	background-repeat: no-repeat;
	
}

.cuadro_info_comainsa3{
	width: 250px;
	height: 550px;
	border: 1px solid #272E66;
	border-radius: 20px;
	background: url("../images/tabla_pago.png");
	background-repeat: no-repeat;
	
}

.cuadro_info_comainsa1 p{
	color: #272E66;
}

.cuadro_info_comainsa img{
	border: 1px solid #272E66;
}


/*/////////////////// LO MAS RECOMENDADOS ///////////////////*/


.contenido_nuevo{
	width: 100%;
	height: auto;
	background-color: #0C0F20;
	display: flex;
	flex-direction: column;
    justify-content: center;
	align-items: center;
	padding: 10px 30px 50px;
}

.contenido_nuevo h2{
	
	margin: 10px auto 30px;
}

.list_nuevo{
	width: 90%;
	display: flex;
    justify-content: space-between;
    align-items: center;
	flex-wrap: wrap;
	gap: 20px;
	
}

.list_nuevo .item img{
    width: 100%;
    height: 100%;
    border-radius: 20px;
    object-fit: cover;
    transition: 0.5s;
	border: 1px solid #fff;
}

.list_nuevo .item:hover img{
    transform: scale(1.2);
}

.list_nuevo .item{
	width: 250px;
	height: 300px;
    color: #c7c3c3;
    font-family: Poppins;
    position: relative;
    transition: 0.5s;
	border: 1px solid #fff;
	border-radius: 20px;
}

.list_nuevo .item .content{
    position: absolute;
    bottom: 0;
    color: #fff;
    padding: 20px;
    transform: translateY(100px);
    opacity: 0;
    transition: 0.5s;
}

.list_nuevo .item:hover .content{
    opacity: 1;
    transform: translateY(0);
}

.list_nuevo:hover .item:not(:hover){
    filter: blur(8px);
}

/*/////////////////// GALERIA ///////////////////*/


.contenedor_galeria{
	width: 1400px;
	margin: 20px auto;
	columns: 4;
	column-gap: 20px;
	
}

.contenedor_galeria .caja_galeria{
	width: 100%;
	break-inside: avoid;
	margin: 0px auto 10px;
}

.contenedor_galeria .caja_galeria img{
	max-width: 100%;
	border-radius: 15px;
	
}


/*////// PIE DE PAGINA ///////*/

footer{
	
width: 100%;
	height: auto;
	border: 1px solid #000000;
	background: #E4E4E4;
	position: sticky;
	top: 100%;	
	display: flex;
	justify-content: center;
	padding: 10px 0;
}

.contenedor_info{
	
	width: 769px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	
	
}

.cuadro_info{
	border-right: 1px dashed #000000;
	border-left: 1px dashed #000000;
	width: 250px;
	height:auto;
		
}

.cuadro_info:nth-child(2) {
	border-left: none;
}

.cuadro_info:nth-child(3) {
	border-left: none;
}

.cuadro_info ul {
	height: auto;
	list-style: none;
	margin: auto;
	font-size: 11pt;
	font-family: "condor", sans-serif;
    font-weight: 800;
    font-style: normal;
	text-align: center;
	color:  #272E66;
	
}

.cuadro_info ul li {
	font-size: 11pt;
	font-family: "condor", sans-serif;
    font-weight: 500;
    font-style: normal;
	text-align: center;
	padding: 3px;
	 color:  #272E66;
}

.cuadro_info ul li a {
	font-size: 11pt;
	font-family: "condor", sans-serif;
    font-weight: 500;
    font-style: normal;
	text-align: center;
	color:  #272E66;
}

.cuadro_info ul li a:hover{
	color:  #1F2553;
	font-weight: 600;
}

.cuadro_info p{
	font-size: 11pt;
	font-family: "condor", sans-serif;
    font-weight: 800;
    font-style: normal;
	text-align: center;
	color:  #272E66;
}

.marcas_contenedor_1{
	background: url("../images/logotipo_iapsa.png");
	width: 100%;
	
	height: 40px;
	background-repeat: no-repeat;
	background-position: center;
}

.marcas_contenedor_2{
	background: url("../images/logo_comainsa_footer.png");
	width: 100%;
	
	height: 40px;
	background-repeat: no-repeat;
	background-position: center;
}

.marcas_contenedor_1 a , .marcas_contenedor_2 a{
	display: inline-block;
	width: 100%;
	height: 40px;
	
	
}

.icono_mapa{
	display: flex;
	justify-content: center;
}

.icono_mapa a{
	display: flex;
	justify-content: center;
	border: 2px solid #272E66;
	width: 40px;
	height: 40px;
	padding: 5px;
	border-radius: 10px;
	margin-left: 5px;
}

.btnWhatsapp{
	
	right: 10px;
	position: fixed;
	bottom: 15px;
	z-index: 4;
}


/* CAMBIO DE GALERIA A 3 COLUMNAS */

@media (max-width:1200px){
	
	.contenedor_galeria{
		width: calc(100% - 40px);
		columns: 3;
	}
}


/* DISEÑO PARA TABLET */

@media (min-width:270px) and (max-width:768px){


.logotipo {
    margin-left: 10px;
	max-width: 40%;
	background-size: contain;
}	
	
.icono_menu {
   
    margin-right: 10px;
}	
	
.iconos_redes a {
    
    width: 25px;
    height: 25px;
    margin-left: 8px;
}	
	
.contenedor_info {
    width: 250px;
   
}
	
.cuadro_info{
	border-right: none;
	border-left: none;
	border-bottom: 1px dashed #000000;
	width: 250px;
	height:auto;
	padding: 10px;
		
  }	
	
.contenedor_galeria{
		width: calc(100% - 40px);
		columns: 2;
	}	
	
.list_nuevo{
	width: 90%;
	
    justify-content: center;
   
	
}	
	
}

/* DISEÑO PARA MOVIL */

@media (min-width:250px) and (max-width:481px){

	.contenedor_galeria{
		
		columns: 1;
	}
	
	
/*	
	.logotipo {
    margin-left: 10px;
	max-width: 40%;
}
	
	
    .iconos_redes a {
        width: 25px;
        height: 25px;
        margin-left: 8px;
    }	
	
	
	    #icono_menu {
        margin-right: 5px;
    }
	
	
	    .contenedor_info {
        width: 250px;
    }
	
	    .cuadro_info {
        border-right: none;
        border-left: none;
        border-bottom: 1px dashed #000000;
        width: 250px;
        height: auto;
        padding: 10px;
    }*/
	
}