@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo+Black&display=swap');


* {	padding: 0; margin: 0; font-family:  'Quicksand', sans-serif; }
body { height: 100vh; display: grid; grid-template-rows: auto 1fr auto; }
.menu__espacio { width: 100%; height: 100px; }

.logo { 
	position: absolute; 
	width: 300px; 
	height: 100px;
	display: grid;
	place-items: center; 
	margin-left: 30px;
	z-index: 99;
}
.logo img {	width: 100%;}
header {
	position: fixed;
	top: 0px;
	width: 100%;
	height: 100px; 
	background-color: #24517B;
	z-index: 999;
}
header .nav_bar { display: none; }
header .menu {
	position: absolute;
	width: 100%; 
	height: 100%;
	margin: auto;
	padding-right: 30px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	list-style: none;
}
header .menu li { text-align: center; height: 100%;}
header .menu a { 
	height: 100%;
	box-sizing: border-box;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: 0.3s;
}
header .menu_link:hover { background-color: #2196f3; }
header .menu_link { display: block; padding: 0 15px; color: black; text-decoration: none; }

@media (max-width:830px) {
	header { z-index: 10;}
	header .nav_bar {
		display: block;
		position: absolute;
		right: 30px;
		top: 30px;
		padding: 10px;
		box-sizing: border-box;
		border-top: 1px solid white;
		border-bottom: 1px solid white;
		color: white;
	}
	header .menu {
		height: 600px;
		border-radius: 0 !important;
		position: absolute;
		margin-top: 100px !important;
		width: 100%;
		flex-direction: column;
		background-color: #14253F;
		text-align: right !important;		
		border-bottom: 8px solid gray !important;
		margin-left: -100% !important;
		transition: all 0.4s;
	}
	header .menu li { width: 100%; text-align: right !important; border-bottom: 1px solid lightgray;}
	header .menu a { justify-content: flex-end;}
	header .mostrar { margin-left: 0 !important;}
	
}

@media (max-width:431px) {
	.logo { width: 200px !important; }
}

.colum_02 {width: 90%; max-width: 2000px; margin: 50px auto; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 20px; }
.colum_03 {width: 90%; max-width: 2000px; margin: 50px auto; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; }
.colum_04 {width: 90%; max-width: 2000px; margin: 50px auto; display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 20px; }
.colum_04f {width: 70%; margin: 50px auto; display: grid; grid-template-columns: repeat(4, 1fr); place-items: center;}





.down { text-align: center;}
.down p { width: 100%; height: 80px; display: flex; flex-direction: column; justify-content: center; background-color: #24517B; }
.down span { color: white; font-weight: bolder;}
.down a { width: 100%; text-decoration: none; color: white; }
.down a:hover { color: red; }

.textABC { 
	width: 90%; max-width: 2000px;
	margin: 0 auto 30px auto;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}
.textABC h2 {padding: 15px 0;  }
.textABC p {text-align: justify; padding: 10px 0; box-sizing: border-box;}
.textABC iframe {width: 100%; height: 450px;}

.wt {
	position: fixed;
	bottom: 20px;
	right: 0px;
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	place-content: center;
	gap: 10px;
	z-index: 9;
	border-radius: 20px 0 0 20px;
	border: 1px solid white;	
	border-right: 5px solid #2196f3;
	overflow: hidden;
	background: #F34F33; background: linear-gradient(20deg, #bf360c  45%, #ff6f00 100%);
}
.wt div { width: 55px; height: 60px; transition: 0.5s; }
.wt a { 
	width: 100%; 
	height: 100%; 
	display: grid; 
	place-items: center;
	box-shadow: 0 0 5px 3px rgba(0,0,0,0.15);
	transition: 0.5s;
 }
.wt a:hover { background-color: rgba(0,0,0,0.30);}

.footer { width: 100%; background-color: #24517B; color: white;}
footer { width: 90%; max-width: 2000px; margin: auto; display: grid; grid-template-columns: repeat(4, 1fr); place-items: center;}
footer figure { width: 35px; height: 35px; }
footer img { width: 100%; }
footer a {color: white; text-decoration: none; transition: 0.5s;}
footer a:hover {color: yellow;}


@media (max-width:820px) {
	.colum_03 { grid-template-columns: 1fr;}
	.textABC { grid-template-columns: 1fr;}
}

@media (max-width:768px) {
	.textABC iframe { height: 350px;}
	footer { grid-template-columns: 1fr; margin: 10px auto;}
	footer div { padding: 15px; box-sizing: border-box;}
}



.contenedor { width: 90%; max-width: 1800px; margin: 20px auto; display: grid; grid-template-columns: 1fr 3fr; gap: 20px; }

.contenedor h2 { width: 100%;
	font-size: 1em; 
	font-weight: 100; 
	padding-bottom: 10px;
    margin: 5px 0; 
	box-sizing: border-box; 
	text-align: center;
    color: #24517B;
    font-family: "Archivo Black", sans-serif;
	border-bottom: 1px solid lightgray;
 }
 .contenedor h3 { width: 100%;
	 font-size: 0.8em; 
	 font-weight: 100; 
	 padding: 5px 0;
	 box-sizing: border-box; 
	 text-align: center;
  }


  .contenedor .fil_cont button {
	width: 100%;
    height: 40px;
	margin: 15px 0;
	color: white;
	background-color: #ff6f00;
	cursor: pointer;
	transition: 0.5s;
	border: 0px;
}
.contenedor .fil_cont button:hover { background-color: #2196f3; color: white;}

.contenedor .fil_cont button label { 
    width: 100% !important; height: 40px !important; 
    cursor: pointer; 
    display: grid;
    place-items: center;
}


 .contenedor .fil_cont {
    width: 100%; 
    margin-bottom: 15px;
    padding: 10px; 
    box-sizing: border-box; 

    border: 1px solid lightgray;
}
.contenedor .fil_cont ul {list-style: none; padding: 10px; box-sizing: border-box;}

.contenedor .colores { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; place-items: center; }
.contenedor .colores a { width: 100%; padding-top: 5px; box-sizing: border-box; text-decoration: none; color: black; transition: 0.5s; border: 2px solid white;}
.contenedor .colores a:hover { box-shadow: 0px 0px 5px 3px red; border-radius: 7px;}
.contenedor .colores .visited { border: 2px solid red; border-radius: 7px; }
.contenedor .colores p { width: 90%; margin: auto; height: 60px; border-radius: 5px; overflow: hidden; display: grid; place-content: center;}
.contenedor .colores p img { width: 100% !important; object-fit: cover; }
.contenedor .colores .ajimg_pa { height: 100% !important;}

.borrar_filtros { width: 100%; height: 40px; margin-bottom: 30px; background-color: #0f4c81; color: white; border: 0px solid white; cursor: pointer; transition: 0.5s; }
.borrar_filtros:hover { background-color: #2196f3;}

.borrar_filtros_formatos { width: 100%; height: 40px; background-color: #0f4c81;}
.borrar_filtros_formatos a { width: 100%; height: 40px; color: white; text-decoration: none; display: grid; place-items: center; transition: 0.5s;}
.borrar_filtros_formatos a:hover { background-color: #0c9bc7;}

.secc_prod { width: 100% !important;}
.secc_prod div { position: relative; border: 1px solid gray;}
.secc_prod figure { width: 100%; height: 200px; overflow: hidden;}
.secc_prod figcaption {
	width: 100%; 
	text-align: center;
	padding: 10px 0;
	box-sizing: border-box;
}
.secc_prod a { 
	width: 100%; 
	height: 100%; 
	display: grid; 
	text-align: center; 
	font-size: 0.9em; 
	text-decoration: none; 
	color: black; 
	padding: 5px; 
	box-sizing: border-box; 
	transition: 0.5s;
	background-color: #e1e1e1;
}
.secc_prod a:hover { background-color: #2196f3; color: white;}
.secc_prod p { 
	display: none;
	line-height: 25px; 
	text-align: center; 
	width: 100%; 
	margin: 0px auto !important; 
	gap: 1px;
	border-bottom: 1px solid white;
}
.secc_prod_formatos img {width: 100%;}

.secc_prod img {width: 200%;}

.caravista {
    width: 100%; 
    max-width: 1400px; 
    margin: 0px auto 40px auto; 
}

.caravista .catalogo { 
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.caravista .catalogo div {background-color: white; }
.caravista .catalogo div figure:hover { cursor: zoom-in !important; }

.caravista .catalogo div h3 {
    width: 100%;
	font-weight: 100;
	color: white;
	background-color: gray;
	padding: 10px 5px;
    box-sizing: border-box;
	text-align: center;
    display: grid; 
    place-items: center; 
    height: 55px; 
    cursor: zoom-in !important;
}
.caravista .catalogo div h3:hover { cursor: zoom-in !important; }


@media (min-width:768px) and (max-width:1024px) { 
    .contenedor { grid-template-columns: 2fr 3fr; }

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

@media (max-width:460px) {

    .contenedor { grid-template-columns: 1fr;}

    .ficha_tec .datos { grid-template-columns: 1fr;}

    .caravista { grid-template-columns: 1fr;}
    
    .caravista .catalogo { grid-template-columns: 1fr;}
}


.natural { background-color: #C27341;}
.terracota { background-color: #A75F33;}
.rojoi { background-color: #884E38;}
.habano { background-color: #7C5846;}
.marron { background-color: #68584D;}
.arena { background-color: #CBB39A;}
.gris { background-color: #6F6661;}
.esmaltado { background-color: #ECECEC;}
.stampa { background-color: #A4895C;}

.open { background-color: #2196f3; border-bottom: 5px solid darkorange;}