@charset "UTF-8";
/*RESET CSS*/
* {margin:0;padding:0;font-family:'Nunito', Arial, sans-serif;}
input,textarea,select {font-family:'Nunito', Arial, sans-serif;}
input[type='radio'],
input[type='checkbox'] {margin:0;display:inline-block;}
textarea {font-family:'Nunito', Arial, sans-serif;border:0;}

button {cursor:pointer;}

.clear {clear:both;}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;	padding: 0;	border: 0;	outline: 0;	font-size: 100%;vertical-align:top;background: transparent;background-repeat:no-repeat;}
input,button {background-repeat:no-repeat;padding:0;border:0;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,q:before, q:after {content: '';	content: none;}
:focus {outline: 0;}
ins {text-decoration: none;}
del {text-decoration: line-through;}
table {	border-collapse: collapse;border-spacing: 0;}
h1,h2{font-weight:normal;font-size: 100%}



body a {text-decoration:none;color:#392c20;}

body {font-family:'Nunito', Arial, sans-serif;font-size:14px;line-height:20px; background-color:#ffffff;color:#3e3e3e; letter-spacing:0px}


.container{width:100%; max-width:1090px; background-color:#ffffff; margin:0 auto; }

#footer{width:100%; background-color:#212529; margin-top:0px}

#footer .inner{font-size:12px; color:#ffffff; padding-left:40px; padding-right:40px; padding-top:5px; padding-bottom:5px; background-color:inherit; width:auto}
#footer .inner a{padding-left:10px; padding-right:10px; color:#ffffff;}

.montaje{width:100%; max-width: 900px; height:900px; background-image: url(../files/productos/background.jpg); background-size: 100% auto; position: relative}
.montaje .item{width:100%; max-width: 900px; position: absolute; background-size: 100% auto; }
.montaje_export{width:100%; max-width: 1256px; height:1256px; background-image: url(../files/productos/background.jpg); background-size: 100% auto;}
.montaje_export .item{width:100%; max-width: 1256px; position: absolute; background-size: 100% auto;}


.montaje .item.encimera, .montaje .item.espejo, .montaje_export .item.encimera, .montaje_export .item.espejo{z-index: 99;}


.sticky-sidebar {
	position: sticky;
	top: 20;
	
	overflow-y: auto;
}
.opcion{white-space:initial}
.opcion li{cursor: pointer; display: inline-block; width:49%; font-size: 14px; color:#707070; margin-bottom: 20px; padding: 10px; border: 1px solid #ffffff; border-radius: 5px; position: relative;}
.opcion li:hover, .opcion li.selected{border-color:#707070}

.opcion li .medidas_box{position: absolute; width:90%; top:0px; display: none; text-align: center; background-color: rgba(255,255,255,0.75);
  padding-top: 15px;  margin-top: 10px;  padding-bottom: 10px;  height: 76%;  max-width: 200px;  max-height: 200px; color:#000000}
.opcion li .medidas_box .selecciona{font-weight: 700; font-size:16px; padding-bottom: 6px;}
.opcion li .medidas_box .medida{border:1px solid #ffffff; padding: 3px; border-radius: 5px; width:46%; display: inline-block;margin:2px; margin-top:5px}

.opcion li .medidas_box .medida:hover, .opcion li .medidas_box .medida.selected{border:1px solid transparent;background-color: #333399;color: #fff;}

.opcion li .medidas_box .medida.medida_120{width:75%}

.opcion_modelo{white-space:initial}
.opcion_modelo li{cursor: pointer; display: inline-block; width:49%; font-size: 14px; color:#707070; margin-bottom: 20px; padding: 10px; border: 1px solid #ffffff; border-radius: 5px;}
.opcion_modelo li:hover, .opcion_modelo li.selected{border-color:#707070}

.opcion_tipo{white-space:initial}
.opcion_tipo li{cursor: pointer; display: inline-flex; width:45%; font-size: 14px; color:#707070; margin: 20px 9px; padding: 10px; border: 1px solid #ffffff; border-radius: 5px; height: 200px; align-items:center; border-color:#a8a8a8}
.opcion_tipo li:hover, .opcion li.selected{border-color:#707070}


.descargar{display:inline-flex; padding:10px 25px; background-color:#000000; color:#ffffff; cursor: pointer; margin-top: 40px; border-radius: 4px; align-items:center}
.descargar.siguiente i{padding-left: 20px;}
.descargar.anterior i{padding-right: 20px;}
.title{font-size:24px; line-height: 1.1em;}
.configurador {overflow: hidden; padding-top: 30px;white-space: nowrap;}


.nueva_composicion{display:inline-flex; padding:10px 25px; background-color:#ffffff; color:#000000; border:1px solid #000000; cursor: pointer; margin-top: 40px; border-radius: 4px; align-items:center}
.nueva_composicion:hover{ background-color:#000000; color:#ffffff; border:1px solid #ffffff; }

.opcion li h1{font-weight: 600;color:#000000; padding-top: 5px;}
.opcion li h2{font-size:12px}

.opcion_modelo li h1{font-weight: 600;color:#000000; padding-top: 5px;}
.opcion_modelo li h2{font-size:12px}


.resumen h1{font-weight: 600; color:#000000; padding-bottom: 10px;}
.resumen .item{ margin-bottom: 20px;  padding-bottom:20px; padding-left:20px; border-bottom: 1px solid #707070;}
.resumen .item .referencia{border-radius:10px; padding: 5px 10px; margin:5px 0px; background-color: #D9E2FF; color:#707070; display: inline-block;}
.resumen .item i{font-size: 20px;}
.resumen .item i:first-of-type{padding-right: 10px;}


.pagina{ position: fixed; bottom:100vh; width:1256px; max-width: 1256px; min-height:1256px;text-align: center;left:0px}
.pagina .logo{padding: 30px 0px; margin: 0 auto;}
.pagina .resumen{padding-top: 40px; width: 90%; margin: 0 auto;}
.pagina .resumen h1{text-align: left;}
.pagina .resumen .item{padding-left: 0px; border:0px; margin-bottom: 0px;}
.pagina .resumen .item .referencia{padding: 0px; background-color: transparent;}


.configurador{white-space: nowrap;}
.configurador .level1, .configurador .level2{transition:all 0.5s ease; position: relative; width: 100%;display: inline-block;}
.configurador .level2 {transform: translateX(20%);}
.configurador .level2 .opcion{display: none;}
.configurador .level2 .volver{padding-left: 20px; padding-bottom: 10px; cursor: pointer;}
.configurador .level2 .volver::before{font-family: "FontAwesome"; font-weight: 400; content:"\f060"; left:0px; position: absolute; padding-left: 0px;}


.categorias_nombre{background-color:#ffffff; padding: 10px; font-size: 17px;  text-align: left;}

.categorias_nombre.collapsed .fa-chevron-down {
  transform: rotate(0deg);
  transition: transform 0.2s ease;
}

.categorias_nombre .fa-chevron-down {
  transform: rotate(-90deg);
  transition: transform 0.2s ease;
  display: inline-block;
  width: 20px;
}


@media (max-width:991px) {
.container{max-width: 600px;}
.sticky-sidebar {height: inherit;}
.opcion li .medidas_box .selecciona{font-size:14px}
.categorias_nombre{font-size:15px}
}


@media (max-height:760px) {
	.montaje{max-width: 450px; height:450px; margin: 0 auto;}
	.montaje .item{max-width: 450px;}
}

.mt-lg-5{margin-top: 0px!important;}


.txt_input{border:1px solid #000000; padding: 10px; border-radius: 5px;}
.errors{color: #ca2727; font-weight: 700;}


#escenario-configurador {
  
    position: relative;
    width: 100%;
    min-height: 600px;
}

/* --- HACIA ADELANTE --- */
.animar-salida {
    animation: deslizarFuera 0.5s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}
@keyframes deslizarFuera {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

.animar-entrada {
    animation: deslizarDentro 0.5s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}
@keyframes deslizarDentro {
    0% { transform: translateX(100%) scale(0.95); }
    100% { transform: translateX(0) scale(1); }
}

/* --- HACIA ATRÁS --- */
.animar-salida-atras {
    animation: deslizarFueraAtras 0.5s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}
@keyframes deslizarFueraAtras {
    0% { transform: translateX(0); }
    100% { transform: translateX(100%); }
}

.animar-entrada-atras {
    animation: deslizarDentroAtras 0.5s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}
@keyframes deslizarDentroAtras {
    0% { transform: translateX(-100%) scale(0.95); }
    100% { transform: translateX(0) scale(1); }
}



.progreso-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 20px auto 40px auto;
    padding: 0 10px;
}

/* La línea gris de fondo */
.progreso-container::before {
    content: '';
    position: absolute;
    background-color: #cccccc;
    height: 4px;
    width: calc(100% - 20px);
    top: 50%;
    transform: translateY(-50%);
    left: 10px;
    z-index: 1;
}

/* La línea de color activa que se moverá */
.linea-progreso {
    position: absolute;
    background-color: #333399; /* Color azul de progreso */
    height: 4px;
    top: 50%;
    transform: translateY(-50%);
    left: 10px;
    z-index: 2;
    transition: width 0.6s ease-in-out; /* Sincronizado con la transición de la página */
}

/* Cada uno de los nodos individuales */
.paso {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.paso span {
    background-color: #fff;
    border: 3px solid #cccccc;
    border-radius: 50%;
    width: 15px;
    height: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: #999;
    transition: all 0.4s ease;
}

.paso label {
    position: absolute;
    top: 20px;
    white-space: nowrap;
    font-size: 12px;
    color: #999;
    font-weight: 500;
}

/* ESTADO: PASO ACTIVO */
.paso.activo span {
    border-color: #333399;
    color: #000000;
    background-color: #333399;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.paso.activo label {
    color: #000000;
    font-weight: bold;
}

/* ESTADO: PASO COMPLETADO */
.paso.completado span {
    background-color: #333399;
    border-color: #333399;
    color: #fff;
}
.paso.completado label {
    color: #333;
}



@media (max-width:991px) {
.progreso-container{width: 90%;}
}