@import url( 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,700;1,500&display=swap' );
@import url( 'general.css?v=3' );
body {
	margin: 0;
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	color: var( --texto );
}
header { padding: 10px; }
.logoImg { width: 300px; }
.filaFlex {
	width: 100%;
	display: flex;
	align-items: center;
}
.filaFlex.top { align-items: flex-start; }
.filaFlex .dos { width: 50%; box-sizing: border-box; }
.filaFlex .cuatro {
	width: 25%;
	padding: 1%;
	box-sizing: border-box;
	border: 1px solid #87A8E3;
	min-height: 73px;
	text-align: center;
	font-size: 18px;
}
.filaFlex .cuatro.identifica { text-transform: uppercase; }
.filaFlex .cuatro a { color: #87A8E3; }
.filaFlex .cuatro.masPTop { padding-top: 20px; }
.mainTitle { margin: 20px 0 5px; text-align: center; text-transform: uppercase; }
.mainSubtitle { margin-top: 0; text-align: center; font-weight: 300; }
.modeloElige {
	width: 100%;
	overflow: hidden;
	border-radius: 8px;
	border: 1px solid #eee;
	-webkit-box-shadow: 5px 4px 6px -5px rgba( 0, 0, 0, 0.4 );
	box-shadow: 5px 4px 6px -5px rgba( 0, 0, 0, 0.4 );
}
.modeloElige img { width: 100%; margin: 0; height: auto; }
.modeloElige .detalleModelo { box-sizing: border-box; padding: 15px; }
.modeloElige .detalleModelo h3 { text-align: center; font-size: 30px; text-transform: uppercase; margin-top: 5px; }
.modeloElige .detalleModelo h4 { text-align: center; font-size: 18px; }
.modeloElige .detalleModelo h4 span { color: #0276b3; font-size: 20px; display: block; }
.modeloElige .detalleModelo .listaModelo {
	list-style: none;
	width: 100%;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
	box-sizing: border-box;
	padding: 15px 5px;
}
.modeloElige .detalleModelo .listaModelo li { padding: 8px; border-bottom: 1px solid #eee; }
.modeloElige .detalleModelo .listaModelo li:last-child { border-bottom: none; }
.modeloElige .listaModelo li i { color: #0276b3; }
.modeloElige .detalleModelo .boton { display: block; text-transform: uppercase; width: 150px; margin: 15px auto; }
.cotizador .head { border-bottom: 1px solid #eee; }
.cotizador .cuerpo { position: relative; overflow: hidden; margin-top: -1px; }
.cotizador .menuPlegable { width: 385px; min-width: 385px; max-height: 700px; overflow-y: auto; margin-top: -5px; }
.cotizador .identifica { min-width: 385px; }
.menuHead {
	background-color: #87A8E3;
	color: #fff;
	text-transform: uppercase;
	font-weight: 300px;
	padding: 25px;
	font-size: 20px;
	box-sizing: border-box;
	width: 100%;
	text-align: center;
	margin: 0;
}
dl { padding-left: 0; width: 100%; list-style: none; margin: 0; }
dt, .divBoton {
	position: relative;
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
	border: 1px solid #87A8E3;
	background-color: #EFEFEE;
	color: #62656A;
	cursor: pointer;
	transition: all 0.4s;
	font-size: 18px;
}
dt:after {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f078";
	float: right;
}
dt i { position: absolute; right: 45px; }
dt[disponible="N"] { color: #ccc; }
dt[disponible="N"] i { display: none; }
dt[disponible="N"]:after { content: ""; }
dt.doble i { margin-top: -30px; }
dt.doble:after { margin-top: -30px; }
dt.abierto:after { content: "\f077"; }
dt:hover, dt.abierto { background-color: #62656A; color: #fff; }
dt[disponible="N"]:hover { background-color: #EFEFEE; color: #ccc; }
dt span { display: block; width: 100%; font-size: 12px; }
dd {
	display: none;
	border-left: 1px solid #87A8E3;
	border-right: 1px solid #87A8E3;
	margin-left: 0;
	position: relative;
	width: 100%;
    overflow: auto;
    background-color: #B9BBBB;
    color: #fff;
}
dl dd:last-child { border-bottom: 1px solid #87A8E3; }
dl dd .opcionItem {
	width: 100%;
	box-sizing: border-box;
	padding: 15px;
	text-align: left;
	border-bottom: 1px solid #87A8E3;
	transition: all 0.4s;
	cursor: pointer;
}
dl dd .opcionItem:last-child { border-bottom: none; }
dl dd .opcionItem:hover, dl dd .opcionItem.activo { background-color: #fff; color: #000; }
.mainContent { position: relative; width: 100%; }
.mainContent .slideDiv { width: 100%; position: absolute; height: 100%; }
.iconWhats {
	position: fixed;
	right: 70px;
    bottom: 45px;
	border-radius: 50%;
	height: 50px;
	width: 50px;
	text-align: center;
	background-color: #0dbc42;
	color: #fff;
	box-sizing: border-box;
	padding: 10px;
	padding-top: 5px;
    font-size: 35px;
	display: block;
	z-index: 10;
}
.checkcrossItem { display: none; }
/*.toggle {
	position: relative;
	display: inline-block;
	width: 100%;
	text-align: center;
}
.toggle *:before, .toggle *:after {
    content: "";
    position: absolute;
}
.toggle input {
    height: 40px;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 40px;
}
label.toggle-item {
	width: 7em;
	background: #62656A;
	height: 3em;
	display: inline-block;
	border-radius: 50px;
	margin: 10px;
	position: relative;
	transition: all 0.3s ease;
	transform-origin: 20% center;
	cursor: pointer;
}
label.toggle-item:before {
	display: block;
	transition: all 0.2s ease;
	width: 2.3em;
	height: 2.3em;
	top: 0.25em;
	left: 0.25em;
	border-radius: 2em;
	border: 2px solid #88cf8f;
	transition: 0.3s ease;
}
.checkcross label:before { content: none; }
.checkcross .check {
	border-radius: 50%;
	width: 2.5em;
	height: 2.5em;
	position: absolute;
	background: #8BC34A;
	transition: 0.4s ease;
	top: 4.5px;
	left: 4.5px;
}
.checkcross .check:before, .checkcross .check:after {
	height: 4px;
	border-radius: 10px;
	background: #fff;
	transition: 0.4s ease;
	margin-left: -20px;
}
.checkcross .check:before {
	width: 25px;
	transform: rotate(-45deg) translate(-6px, 20px);
}
.checkcross .check:after {
	width: 10px;
	transform: rotate(45deg) translate(20px, 11px);
}
.checkcrossItem:checked + label .check {
	left: 68px;
	transform: rotate(360deg);
	background: #c34a4a;
}
.checkcrossItem:checked + label .check:before {
	width: 27px;
	transform: rotate(-45deg) translate(-8px, 18px);
}
.checkcrossItem:checked + label .check:after {
	width: 27px;
	transform: rotate(45deg) translate(18px, 8px);
}*/
/*.levels, .cajones { text-align: center; }
.levels .nivelSelect, .cajones .cajonSelect {
	display: inline-block;
	width: 50px;
	height: 50px;
	text-align: center;
	box-sizing: border-box;
	padding: 10px;
	font-size: 15px;
	border: 1px solid #CBCBC6;
	background-color: #fff;
	color: #87A8E3;
	transition: all 0.4s;
	font-size: 18px;
}
.levels .nivelSelect:hover, .levels .nivelSelect.elegido,
.cajones .cajonSelect:hover, .cajones .cajonSelect.eligeCajon {
	background-color: #87A8E3;
	color: #fff;
}*/
.cajonInput {
	width: 110px;
	border: 1px solid #ccc;
	display: none;
}
.divBoton { text-align: center; }
.divBoton .boton {
	border: 1px solid #CBCBC6;
	background-color: transparent;
	color: #87A8E3;
	margin: 0 auto;
	text-align: center;
	border-radius: 5px;
	font-size: 18px;
}
.divBoton .boton:hover { background-color: #87A8E3; color: #fff; }
#progressbar {
	background-image: url( '../images/progressbar.jpg' );
	background-position: center center;
	background-size: contain;
}
.ui-progressbar-value { background-color: transparent; border-right: 3px solid #000 }
.calculaDiv {
	display: none;
	width: 100%;
	box-sizing: border-box;
	padding: 50px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	overflow-scrolling: touch;
}
.calculadora { width: 100%; }
.calculadora td { width: 33.3%; box-sizing: border-box; padding: 8px; min-width: 250px; }
.calculadora td:not(:empty) { border: 1px solid #87A8E3; }
.campoIngresa {
	box-sizing: border-box;
	width: 100%;
	border-bottom: 1px solid #87A8E3;
	font-size: 16px;
	background-color: #eee;
}
.campoIngresa.porcentaje:after {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f295";
	float: right;
}
@media screen and ( max-width: 1000px ) {
	.homeList .filaFlex, .cuerpo .filaFlex { display: block; }
	.homeList .filaFlex .cuatro { max-width: 94%; margin: 3% auto; width: 600px; }
	.cotizador .identifica { min-width: initial; }
	.cotizador .menuPlegable, .cotizador .mainContent { max-width: 100%; margin: 0 auto 25px; width: 700px; min-width: 0; }
	header { text-align: center; }
	.iconWhats { right: 10px; bottom: 10px; }
}
@media screen and ( max-width: 700px ) {
	.cotizador .head .filaFlex { display: inline-block; }
	.cotizador .head .filaFlex .cuatro { width: 50%; text-align: center; float: left; }
}
@media screen and ( max-width: 380px ) {
	.cotizador .head .filaFlex { display: block; }
	.cotizador .head .filaFlex .cuatro { width: 100%; text-align: center; float: none; }
}
@media screen and ( max-height: 765px ) {
	.cotizador .menuPlegable { max-height: 550px }
}