@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Caveat:wght@600&display=swap');

.bauca-form {
	max-width: 960px;
	margin: 3rem auto;
	background: linear-gradient(180deg, #fff9f4 0%, #fff 100%);
	padding: 3rem;
	border-radius: 40px;
	box-shadow: 0 32px 90px rgba(57, 31, 16, 0.12);
	color: #2f1209;
	font-family: "Nunito", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	border: 1px solid rgba(255, 170, 162, 0.35);
}

.cabecera-form {
	display: flex;
	justify-content: space-between;
	gap: 2rem;
	align-items: center;
	margin-bottom: 2rem;
}

.cabecera-form h1 {
	font-size: 2.25rem;
	margin: .35rem 0 0;
}

.cabecera-form .intro {
	margin: .35rem 0 0;
	color: #7c4b3c;
}

.layout-grid {
	display: grid;
	gap: 1rem;
	margin-bottom: 1.25rem;
}

.layout-grid.columnas-2 {
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

.layout-grid.columnas-3 {
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 900px) {
	.layout-grid.columnas-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.layout-grid.columnas-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.full-span {
	grid-column: 1 / -1;
}

.etiqueta {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .15em;
	color: #c9184a;
}

.chip-fecha {
	background: #fff;
	border-radius: 999px;
	padding: .65rem 1.25rem;
	border: 1px solid #ffdfe8;
	font-weight: 600;
	color: #b30047;
}

.bauca-form h2 {
	font-size: 1.6rem;
	margin-bottom: 1rem;
	color: #7a1034;
}

.alerta-error {
	background: #ffe4e8;
	border: 1px solid #f98ea5;
	color: #a4161a;
	border-radius: 20px;
	padding: .9rem 1.25rem;
	font-weight: 600;
	margin-bottom: 1.5rem;
}

.pasos {
	display: flex;
	justify-content: space-between;
	gap: .5rem;
	margin-bottom: 2.5rem;
	position: relative;
}

.pasos::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 4px;
	background: #f0f0f0;
	z-index: 0;
	transform: translateY(-50%);
	border-radius: 4px;
}

.pasos button {
	border: none;
	background: #fff;
	color: #a0a0a0;
	font-weight: 700;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .25rem;
	padding: .5rem;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	position: relative;
	z-index: 1;
	cursor: pointer;
	transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 4px 12px rgba(0,0,0,0.05);
	border: 2px solid #fff;
}

.pasos button:hover {
	transform: translateY(-2px);
	color: #7c4b3c;
}

.pasos button.activo {
	background: #c9184a;
	color: #fff;
	transform: scale(1.15);
	box-shadow: 0 8px 20px rgba(201, 24, 74, 0.3);
	border-color: #fff;
}

.paso-icono {
	font-size: 1.5rem;
	line-height: 1;
}

.paso-texto {
	font-size: 0.65rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 800;
}

@media (max-width: 600px) {
	.pasos button {
		width: 50px;
		height: 50px;
		border-radius: 12px;
	}
	.paso-texto {
		display: none;
	}
	.paso-icono {
		font-size: 1.25rem;
	}
}

section[data-step] {
	display: none;
	opacity: 0;
}

section[data-step].activo {
	display: block;
	animation: fadeInSlide .5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

section[data-step].salida {
	display: block;
	animation: fadeOutSlide .3s ease-in forwards;
	pointer-events: none;
}

@keyframes fadeInSlide {
	from { opacity: 0; transform: translateY(20px) scale(0.98); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes fadeOutSlide {
	from { opacity: 1; transform: translateY(0) scale(1); }
	to { opacity: 0; transform: translateY(-20px) scale(0.98); }
}


.campo {
	margin-bottom: 1rem;
	display: flex;
	flex-direction: column;
	gap: .35rem;
}

.campo input,
fieldset input,
.fecha-actual input,
.resumen button,
.firmar input {
	width: 100%;
	border: 2px solid #f1d4bf;
	border-radius: 16px;
	padding: .85rem 1rem;
	font-size: 1rem;
	background: #fff;
	transition: border-color .2s ease, box-shadow .2s ease;
}

input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: #ff6f61;
	box-shadow: 0 0 0 3px rgba(255, 111, 97, 0.25);
}

.grid-2,
.grid-3 {
	display: grid;
	gap: 1rem;
}

.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

fieldset {
	border: 2px dashed #ffd5c4;
	border-radius: 24px;
	padding: 1.5rem;
	margin-top: 1rem;
	background: #fff;
}

legend {
	padding: 0 .5rem;
	font-weight: 700;
}

.toggle {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 1rem;
	padding: .85rem 1rem;
	border: 2px solid #f1d4bf;
	border-radius: 18px;
	background: #fff;
}

.toggle input[type="checkbox"] {
	appearance: none;
	width: 54px;
	height: 28px;
	background: #ecd5ff;
	border-radius: 999px;
	position: relative;
	cursor: pointer;
	transition: background .2s ease;
}

.toggle input[type="checkbox"]::after {
	content: '';
	position: absolute;
	top: 2px;
	left: 3px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 3px 8px rgba(0,0,0,.15);
	transition: transform .2s ease;
}

.toggle input[type="checkbox"]:checked {
	background: #5c3beb;
}

.toggle input[type="checkbox"]:checked::after {
	transform: translateX(26px);
}

.nota-opcional,
.nota {
	background: #fff0e5;
	border-left: 4px solid #ff8fa3;
	padding: .85rem 1rem;
	border-radius: 16px;
	color: #8c3d2b;
	margin-bottom: 1.5rem;
}

.habitaciones {
	display: grid;
	gap: 1rem;
}

.habitacion-card {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1rem;
	padding: 1.25rem;
	border: 2px solid #f1d4bf;
	border-radius: 24px;
	background: #fff;
	cursor: pointer;
	transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.habitacion-card:hover {
	border-color: #ff8fa3;
	transform: translateY(-2px);
	box-shadow: 0 10px 25px rgba(255, 159, 163, 0.25);
}

.habitacion-card input {
	display: none;
}

.habitacion-card input:checked + .icono-cabana,
.habitacion-card input:checked ~ div .titulo {
	color: #c9184a;
}

.campo--error .titulo,
.campo--error span,
.campo--error label {
	color: #a4161a;
}

.campo--error input,
.campo--error select,
.campo--error textarea,
.input-error {
	border-color: #e63946 !important;
	box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.15);
}

.mensaje-error {
	color: #d00000;
	font-size: .85rem;
	font-weight: 600;
}

.habitacion-card input:checked ~ div .precio {
	color: #0a8f5b;
	font-weight: 700;
}

.icono-cabana {
	width: 52px;
	height: 52px;
	border-radius: 16px;
	background: linear-gradient(135deg, #ffafcc, #ffc8dd);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.8rem;
}

.icono-cabana::before {
	content: '\1F6CC';
}

.resumen {
	display: grid;
	gap: 1.25rem;
	margin-bottom: 2rem;
}

@media (min-width: 920px) {
	.resumen {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.resumen-bloque {
	border: 1px solid #f1d4bf;
	border-radius: 24px;
	padding: 1.25rem 1.5rem;
	background: #fff;
	box-shadow: 0 8px 30px rgba(96, 15, 57, 0.06);
}

.resumen-bloque__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}

.resumen-bloque__header h3 {
	margin: 0;
	font-size: 1.15rem;
	color: #7a1034;
}

.resumen-bloque__header button {
	border: 1px solid #ffcad4;
	border-radius: 999px;
	padding: .4rem 1.1rem;
	background: #fff5f5;
	font-weight: 600;
	color: #c9184a;
	cursor: pointer;
	transition: background .2s ease;
}

.resumen-bloque__header button:hover {
	background: #ffe5ec;
}

.resumen-bloque dl {
	margin: 1rem 0 0;
	display: grid;
	gap: .65rem;
}

.resumen-row {
	display: grid;
	grid-template-columns: 45% 55%;
	gap: .5rem;
	padding-bottom: .4rem;
	border-bottom: 1px dashed #f3c6a6;
}

.resumen-row dt {
	font-weight: 600;
	color: #7a1034;
}

.resumen-row dd {
	margin: 0;
	color: #5d2a42;
	font-weight: 600;
}

.firma {
	margin-top: 1.5rem;
}

#firma-canvas {
	width: 100%;
	border: 2px dashed #cdeffd;
	border-radius: 24px;
	background: #fff;
	display: block;
	min-height: 150px;
	cursor: crosshair;
	touch-action: none;
}

.nota-firma {
	font-size: .9rem;
	color: #6b2d1a;
	margin: .5rem 0 0;
}

.limpiar-firma {
	margin-top: .75rem;
	border: none;
	background: #ffd6e0;
	color: #af125a;
	font-weight: 600;
	padding: .65rem 1.25rem;
	border-radius: 999px;
	cursor: pointer;
}

.navegacion {
	display: flex;
	justify-content: flex-end;
	gap: 1rem;
	margin-top: 2.5rem;
	align-items: center;
}

.btn-nav,
.confirmar {
	border: none;
	padding: 1rem 2rem;
	border-radius: 999px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	cursor: pointer;
	transition: all .3s ease;
	font-size: 1rem;
}

.btn-nav.anterior {
	background: #fff;
	color: #a4161a;
	border: 2px solid #ffe6e6;
}

.btn-nav.anterior:hover {
	background: #ffe6e6;
	transform: translateY(-2px);
}

.btn-nav.siguiente,
.confirmar {
	background: linear-gradient(135deg, #ff4d6d, #c9184a);
	color: #fff;
	box-shadow: 0 8px 20px rgba(201, 24, 74, 0.3);
}

.btn-nav.siguiente:hover,
.confirmar:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 25px rgba(201, 24, 74, 0.4);
	background: linear-gradient(135deg, #ff2e55, #a6103a);
}

.btn-nav:disabled {
	opacity: .4;
	cursor: not-allowed;
}

.share-block {
	margin-top: 2rem;
	text-align: center;
}

.share-block .titulo-share {
	font-family: 'Caveat', 'Comic Sans MS', cursive;
	font-size: 1.7rem;
	color: #c9184a;
}

.share-buttons {
	display: flex;
	justify-content: center;
	gap: .65rem;
	margin-top: .5rem;
}

.share-buttons a,
.share-buttons button {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 1.25rem;
	text-decoration: none;
	box-shadow: 0 10px 25px rgba(0,0,0,0.15);
	border: none;
	cursor: pointer;
}

.share-facebook { background: #1877f2; }
.share-x { background: #111; }
.share-pinterest { background: #e60023; }
.share-linkedin { background: #0a66c2; }
.share-email { background: #6c757d; }
.share-whatsapp { background: #25d366; }
.share-copy { background: #2f9e44; }
.share-copy.copied {
	background: #0a8f5b;
}

.share-buttons button:focus-visible,
.share-buttons a:focus-visible,
.btn-nav:focus-visible,
.confirmar:focus-visible {
	outline: 3px solid rgba(16, 24, 92, 0.4);
	outline-offset: 3px;
}

@keyframes fade {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
	.bauca-form {
		padding: 1.5rem;
		border-radius: 24px;
	}
	.cabecera-form {
		flex-direction: column;
		align-items: flex-start;
	}
	.pasos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.grid-3 {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}
}