:root {
	--verde:#00b398;
	--cremita:#ddd5c3;
	--anchofranja:160px;
	--raiz2:1.4142135623730950488;
}
.verde {color: var(--verde);}
html {
	scroll-behavior: smooth;
	font-family: 'Montserrat Alternates', sans-serif;
}
button {
  user-select: none;
}
body {
	margin: 0;
	padding: 0;
	background: var(--cremita);
	height: 100vh;
	width: 100vw;
	overflow-x: hidden;
	overflow-y: visible;
}
body.listo {
	height: auto;
	overflow-y: visible;
}
h3 {
	font-size: 2em;
	font-weight: 600;
	margin: 0;
}
#menu {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	display: flex;
	justify-content: space-between;
	width: 90vw;
	padding: 0 5vw;
	background: #ddd5c3ad;
}
#menu ul#ulmenu.es li.es,
#menu ul#ulmenu.en li.en {
	display: none;
}
#menu ul#ulmenu li a {
	color: black;
	text-decoration: none;
	padding-bottom: 8px;
}
#menu ul#ulmenu li a:hover {
	color: var(--verde);
}
#menu ul#ulmenu li.active a {
	color: var(--verde);
	border-bottom: 2px solid;
}
#menu ul#ulmenu li {
	list-style: none;
	padding-left: 20px;
}
#menu #btlogo {
	display: block;
	transform: translateX(-100vw);
	-webkit-transition: all .25s ease-out;
	   -moz-transition: all .25s ease-out;
	    -ms-transition: all .25s ease-out;
	     -o-transition: all .25s ease-out;
	        transition: all .25s ease-out;
}
#menu #btlogo:hover {
	opacity: .7;
}
#menu #btlogo img {
	width: 130px;
	height: 60px;
}

#menu .menuint ul {
	display: flex;
}
#menu .menuint ul li {
	list-style: none;
	transform: translateX(-100vw);
}
#menu.completo .menuint ul li {
	animation: entrada-derecha .3s forwards;
}
#menu.completo .menuint ul li:nth-child(1) {
	animation-delay: 0.1s;
}
#menu.completo .menuint ul li:nth-child(2) {
	animation-delay: 0.2s;
}
#menu.completo .menuint ul li:nth-child(3) {
	animation-delay: 0.3s;
}
#menu.completo .menuint ul li:nth-child(4) {
	animation-delay: 0.4s;
}
#menu .menuint ul li a {
	color: black;
	padding: 10px 30px;
	margin: 0 5px;
	text-decoration: none;
	border-radius: 90px;
	transition: all .5s;
}
#menu .menuint ul li a:hover {
	background: var(--verde);
	color: white;
}
.loader {
	position: absolute;
	left: 50vw;
	transform: translate(-24px, -24px);
	width: 48px;
	height: 48px;
	border: 5px solid #000000;
	border-bottom-color: transparent;
	border-radius: 50%;
	display: inline-block;
	box-sizing: border-box;
	animation: rotation 1s linear infinite;
}
@keyframes rotation {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
body.listo .loader {
	display: none;
}
.container {
	width: 90vw;
	margin: 0 auto;
}
#home {
	height: 100vh;
	width: 100vw;
}
#home .int {
	height: 100vh;
	width: 100vw;
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 0;
	z-index: 1;
}
#home .content {
	width: 90vw;
}
#home #logo {
	max-width: 900px;
	margin: auto;
	-webkit-transition: all .25s ease-out;
	   -moz-transition: all .25s ease-out;
	    -ms-transition: all .25s ease-out;
	     -o-transition: all .25s ease-out;
	        transition: all .25s ease-out;
}
#home #tag {
	text-align: center;
	font-family: 'Oswald', sans-serif;
	-webkit-transition: all .25s ease-out;
	   -moz-transition: all .25s ease-out;
	    -ms-transition: all .25s ease-out;
	     -o-transition: all .25s ease-out;
	        transition: all .25s ease-out;
}
.btwa {
	position: sticky;
	top: calc(100vh - 270px);
	left: calc(100% - 80px);
	width: 60px;
	z-index: 9999;
	padding: 10px;
}
.btwa a {
	display: inline-block;
	text-align: center;
	border-radius: 50%;
	box-shadow: 3px 3px 13px 0px #000000a8;

	background: black;
	color: var(--cremita);

	font-size: 2em;
	line-height: 60px;
	width: 60px;
	margin-bottom: 5px;
}
.btwa a.whats {
	background: var(--verde);
	color: white;
}
.txttipoexp p {
	font-weight: 300;
	margin: 0;
}
.txttipoexp h3 {
    font-size: 2.5em;
}
#btconf {
	position: fixed;
	top: 100vh;
	width: 100vw;
	height: 0;
	background: var(--verde);
	z-index: 7;
	text-align: center;
	overflow: hidden;
	display: none;
}
#btconf a {
	color: white;
	text-decoration: none;
	line-height: 60px;
}
.timeline .texto {
	width: 35vw;
}
.timeline .texto .int {
	padding: 0 5vw;
	border-bottom: 1px solid #ffffff4a;
}
.timeline .foto {
	width: 65vw;
}
.timeline .foto img {
	width: 100%;
	height: auto;
	box-shadow: 5px -4px 12px #0000006e;
}
.timeline .texto h4 {
	margin: 0;
	color: white;
}
.dato {
	font-size: 2em;
	font-weight: 600;
}
.km {
	font-size: 1em;
	font-weight: 600;
}
.aclaracion {
	font-size: .8em;
}
#otros h4 {
	font-size: 2em;
	font-weight: 300;
}
ul.colores li {
	list-style: none;
	padding: 0 10px;
	font-size: 1.25em;
	font-weight: 600;
	color: #666;
}
#col_ruedas img {
	max-width: 100%;
	max-height: calc(100vh - 190px);
	top: calc(50% + 20px);
}
#col_ruedas h3 {
	padding-top: 70px;
}
.txtresumen {
	display: flex;
    flex-wrap: wrap;
}
.txtresumen p {
	width: calc((100% /3) - 20px);
	margin: 10px;
	text-align: center;
}
.txtresumen p:nth-child(3n) {
	text-align: left;
}
.txtresumen p:nth-child(3n - 2) {
	text-align: right;
}
#resumen {
	position: relative;
	z-index: 3;
}
#resumen .medios {
	display: flex;
	flex-wrap: wrap;
	text-align: center;
	justify-content: center;
	margin-bottom: 200px;
}
#resumen h3 {
	width: 100%;
	margin: 60px 0 20px;
	text-align: center;
}
#resumen h3.medios  {
	margin: 240px 0 40px;
}
#resumen .medios p {
	width: calc((100% /3) - 20px);
	margin: 10px;
}
#resumen .medios p img {
	max-width: 100%;
	height: auto;
}
.configurar #contenedor {
	position: relative;
	z-index: 999;
}
.configurar .imagenes {
	display: flex;
	align-items: center;
	height: 100vh;
	width: 100vw;
	justify-content: space-around;
	position: fixed;
	top: 0;
	left: 0;
}
.configurar .imagenes .imgcont {
	opacity: 0;
	position: absolute;
	transform: translateX(-25%);
  transition: transform 0.5s ease-out, opacity 0.3s ease-out;
}
.configurar .imagenes .imgcont .numero {
	position: absolute;
	top: 54.6%;
	left: 49.5%;
	font-size: 3.6vw;
	font-weight: 600;
	color: #423c38;
	width: 4.2%;
	height: 8.3%;
	border-radius: 50px;
	background: #dfdad3;
	display: flex;
	align-items: center;
	justify-content: center;
}
@media (min-width: 1125px) {
  .configurar .imagenes .imgcont .numero {
    font-size: 45px;
  }
}
.configurar .imagenes .imgcont.mostrar.visible {
	opacity: 1;
}
.configurar .imagenes .imgcont.mostrar.visible {
  transform: translateX(-50%);
}
.configurar .imagenes .imgcont.salir {
	transform: translateX(-75%); /* La imagen sale del lado izquierdo */
}
.configurar #contenedor.sel_cuero:not(.iniciado) .imagenes .imgcont {
	left: 200vw !important;
}
/*
.configurar #contenedor.sel_cuero .imagenes .imgcont.cch {
	left: 20vw;
}
.configurar #contenedor.sel_cuero .imagenes .imgcont.cro {
	left: 40vw;
}
.configurar #contenedor.sel_cuero .imagenes .imgcont.cne {
	left: 60vw;
}
.configurar #contenedor.sel_cuero .imagenes .imgcont.caz {
	left: 80vw;
}

.configurar #contenedor.sel_ruedas .imagenes .imgcont.rne {
	left: 25vw;
}
.configurar #contenedor.sel_ruedas .imagenes .imgcont.rca {
	left: 50vw;
}
.configurar #contenedor.sel_ruedas .imagenes .imgcont.rcr {
	left: 75vw;
}
*/
.configurar #contenedor.iniciado .imagenes .imgcont {
	left: 50vw;
}
.configurar .seccion.mostrar {
	display: flex;
	align-items: center;
}
.configurar .seccion.mostrarNumero {
	display: block;
}
.configurar button {
	background: transparent;
	border: none;
	font-family: 'Montserrat Alternates', sans-serif;
}
.configurar .btseccion {
	padding: 8px 20px;
	border: 1px solid var(--verde);
	border-radius: 50px;
	font-size: 1.1rem;
	width: 250px;
	text-align: left;
}
.configurar .btseccion.titulo {
	border: none;
	margin-bottom: 5px;
	color: var(--verde);

}
.configurar form button {
	padding: 0 20px;
	font-size: 35px;
	color: var(--verde);
}
.configurar button:disabled {
	opacity: 0.2;
	cursor: not-allowed;
}
.configurar form {
	width: calc(100vw - 10vw);
	justify-content: center;
	padding: 0 5vw 20px;
	font-size: 30px;
	z-index: 1;
}
.configurar form label {
	cursor: pointer;
	color: #00000099;
	transition: color .25s;
	padding: 8px 15px;
	font-size: 1.1rem;
	border: 1px solid var(--verde);
	border-radius: 50px;
	margin-left: 5px;
}
.configurar form label:has(input[name="cuero"])::before,
.configurar form label:has(input[name="ruedas"])::before {
	content: "";
	width: 20px;
	height: 20px;
	display: inline-block;
	border-radius: 10px;
}
.configurar form label:has(input[value="cch"])::before {
	background: #c1713f;
}
.configurar form label:has(input[value="cro"])::before {
	background: #c53a42;
}
.configurar form label:has(input[value="cne"])::before {
	background: #2e2d2c;
}
.configurar form label:has(input[value="caz"])::before {
	background: #292f54;
}
.configurar form label:has(input[value="rne"])::before {
	background: #2e2d2c;
}
.configurar form label:has(input[value="rca"])::before {
	background: #823a19;
}
.configurar form label:has(input[value="rcr"])::before {
	background: #bdb39d;
}
.configurar form label:hover {
	color: #000000;
}
.configurar form label input {
	display: none;
}
.configurar form input[type="number"] {
	background: #e0dbd6;
	border: none;
	text-align: center;
	height: 43px;
	width: 43px;
	border-radius: 50%;
	font-family: 'Montserrat Alternates', sans-serif;
	font-size: 30px;
	font-weight: 500;
}
.configurar input[type="number"]::-webkit-inner-spin-button,
.configurar input[type="number"]::-webkit-outer-spin-button,
.configurar input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.configurar input[type="number"] {
	-moz-appearance: textfield;
}
.configurar .controln {
	width: 25px;
	height: 35px;
	padding: 0 10px;
	border-radius: 50%;
	cursor: pointer;
	background: #ddd5c4bd;
	display: flex;
	align-items: center;
}
.disabled {
  pointer-events: none;
	cursor: not-allowed;
}
.configurar a#reservar {
	display: block;
	width: 208px;
	color: var(--verde);
}
.configurar a#reservar.disabled {
	color: black;
	opacity: .25;
	background: #686868;
	border-color: #686868;
}
.configurar a#reservar:hover {
	color: black;
	border-color: black;
}
.migasdepan {
	position: fixed;
	top: 90px;
	width: 100vw;
	z-index: 99;
	color: rgba(0, 0, 0, 0.7);
	display: flex;
	justify-content: center;
	align-items: center;
}
.migasdepan button:disabled {
	color: black;
	opacity: .25;
	background: #686868;
	border-color: #686868;
}
.migasdepan button {
	transition: all .25s;
	cursor: pointer;
}
.migasdepan button#retroceder,
.migasdepan button#avanzar {
	font-size: 1.7rem;
	vertical-align: sub;
	font-weight: 600;
}
.migasdepan button#retroceder svg ,
.migasdepan button#avanzar svg {
	display: none;
}
.migasdepan button:hover:not(:disabled, .activo) {
	border-color: black;
	color: black;
}
.migasdepan button.activo {
	background: var(--verde);
	color: white;
}

.pulso {
  animation: pulse 2s infinite;
}

/* Definición de la animación de pulso */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  60% {
    transform: scale(1.07);
  }
  100% {
    transform: scale(1);
  }
}