/* /css/style.css */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=EB+Garamond&display=swap');

:root {
	--fondo: #121212;
	--texto: #f4f1ea;
	--dorado: #bfa980;
	--rojo-sirlon: #8b1e1e;
	--gris-suave: #2c2c2c;
	--font-principal: 'EB Garamond', serif;
	--font-titulos: 'Cinzel', serif;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-principal);
	background-color: var(--fondo);
	color: var(--texto);
	line-height: 1.6;
	padding-bottom: 5rem;
}

h1, h2, h3 {
	font-family: var(--font-titulos);
	color: var(--dorado);
	margin-bottom: 0.5rem;
	text-align: center;
}

p {
	text-align: center;
}

header.hero {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 2rem 1rem;
	background: var(--gris-suave);
	border-bottom: 2px solid var(--rojo-sirlon);
}

.logo {
	max-width: 100px;
	margin-bottom: 1rem;
}

.frase {
	font-style: italic;
	color: var(--dorado);
}

.nav-principal {
	background-color: var(--gris-suave);
	padding: 0.5rem 0;
	position: sticky;
	top: 0;
	z-index: 999;
}

.nav-principal ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	list-style: none;
}

.nav-principal a {
	color: var(--texto);
	text-decoration: none;
	font-weight: bold;
	padding: 0.5rem;
	transition: color 0.3s;
}

.nav-principal a:hover {
	color: var(--rojo-sirlon);
}

.nav-principal a.activo {
	color: var(--dorado);
	border-bottom: 2px solid var(--rojo-sirlon);
}

.cabecera {
	position: sticky;
	top: var(--altura-nav, 52px); /* usamos variable */
	z-index: 50;
	padding: 1rem;
	border-bottom: 1px solid var(--gris-suave);
    background-color:var(--fondo);
	transition:
		background-color 0.3s ease,
		box-shadow 0.3s ease;
	/* SIN background-color para permitir transparencia o heredar del padre */
}

/* opcional: para distinguir cabecera sticky si se desea */
.cabecera.stuck {
	background-color: rgba(18, 18, 18, 0.95);
	box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

section.seccion {
	/* ¡Ya no es botón! */
	transition: background-color 0.3s ease;
	border-bottom: 1px solid var(--gris-suave);
	padding: 1rem;
}

section.seccion:hover {
    text-decoration: none;
	/* background-color: #1e1e1e; */
}

section.seccion .contenido {
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transform: translateY(10px);
	transition:
		opacity 0.4s ease,
		transform 0.4s ease,
		max-height 0.5s ease;
}

/* Espaciado extra interno para el contenido visible */
section.seccion .contenido > * {
	margin-bottom: 0.75rem;
}

section.seccion.abierto .contenido {
	margin-top: 1rem;
	opacity: 1;
	transform: translateY(0);
}

footer {
	background-color: var(--gris-suave);
	text-align: center;
	padding: 1rem;
	font-size: 0.9rem;
	color: var(--dorado);
}

.whatsapp-sticky {
	position: fixed;
	bottom: 1rem;
	right: 1rem;
	z-index: 1000;
	width: 50px;
	height: 50px;
	background-color: #25D366;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
	transition: transform 0.3s;
	text-decoration: none;
}

.whatsapp-sticky:hover {
	transform: scale(1.1);
}

.whatsapp-sticky img,
.whatsapp-sticky i {
	width: 28px;
	height: 28px;
	filter: brightness(0) invert(1);
}


/* =========================
	MENÚ DEL REINO 🍖
========================= */

.menu-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1.5rem;
	padding: 1rem 0;
}

.menu-item {
	background-color: #1e1e1e;
	border: 1px solid var(--gris-suave);
	border-radius: 8px;
	padding: 1rem;
	text-align: center;
	transition: transform 0.3s ease;
}

/* .menu-item:hover {
	transform: scale(1.03);
} */

.menu-item h3 {
	font-family: var(--font-titulos);
	color: var(--dorado);
	margin-bottom: 0.5rem;
	font-size: 1.2rem;
}

.menu-item p {
	font-size: 0.95rem;
	color: var(--texto);
	margin-bottom: 0.5rem;
}

.menu-item .precio {
	display: block;
	color: var(--rojo-sirlon);
	font-weight: bold;
	font-size: 1rem;
}

/* /css/style.css */

.menu-item img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 0.5rem;
	margin: 0 auto 0.5rem;
}

/* 🌀 Permitir scroll suave dentro de la sección expandida */
section.seccion .contenido {
	overflow-y: auto;
	scroll-behavior: smooth;
	scrollbar-width: thin;
	scrollbar-color: var(--rojo-sirlon) transparent;
	padding-right: 0.5rem; /* para no tapar texto con la barra */
}

section.seccion .contenido::-webkit-scrollbar {
	width: 6px;
}

section.seccion .contenido::-webkit-scrollbar-thumb {
	background-color: var(--rojo-sirlon);
	border-radius: 3px;
}

/* /css/style.css */

.orden-galeria {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.5rem;
	margin-top: 1rem;
	padding-bottom: 1rem;
}

.grado {
	background-color: #1e1e1e;
	border: 1px solid var(--gris-suave);
	border-left: 4px solid var(--rojo-sirlon);
	border-radius: 0.5rem;
	padding: 1rem;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
	transition: transform 0.3s ease;
}

/* .grado:hover {
	transform: scale(1.03);
} */

.grado h3 {
	color: var(--dorado);
	font-family: var(--font-titulos);
	font-size: 1.1rem;
	margin-bottom: 0.5rem;
}

.grado p {
	font-size: 0.95rem;
	color: var(--texto);
}

.puntos-lista {
	margin-top: 1rem;
	padding-left: 1.5rem;
}

.puntos-lista li {
	margin-bottom: 0.5rem;
}

/* 🌄 Intersecciones épicas entre secciones */
section.parallax {
	position: relative;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	width: 100%;
	height: 100vh;
}
.parallax-overlay {
	width: 100%;
	height: 100%;
}
/* 🌌 Versión móvil (default) */
.parallax-batalla {
	background-image: image-set(
		url('/assets/batalla.avif') type("image/avif"),
		url('/assets/batalla.webp') type("image/webp"),
		url('/assets/batalla.png') type("image/png")
	);
}

.parallax-decreto {
	background-image: image-set(
		url('/assets/decreto.avif') type("image/avif"),
		url('/assets/decreto.webp') type("image/webp"),
		url('/assets/decreto.png') type("image/png")
	);
}

.parallax-hechicera {
	background-image: image-set(
		url('/assets/hechicera.avif') type("image/avif"),
		url('/assets/hechicera.webp') type("image/webp"),
		url('/assets/hechicera.png') type("image/png")
	);
}

.parallax-musculoso {
	background-image: image-set(
		url('/assets/musculoso.avif') type("image/avif"),
		url('/assets/musculoso.webp') type("image/webp"),
		url('/assets/musculoso.png') type("image/png")
	);
}

.parallax-unete {
	background-image: image-set(
		url('/assets/orden.avif') type("image/avif"),
		url('/assets/orden.webp') type("image/webp"),
		url('/assets/orden.png') type("image/png")
	);
}

.parallax-dragon {
	background-image: image-set(
		url('/assets/dragon-encerrado.avif') type("image/avif"),
		url('/assets/dragon-encerrado.webp') type("image/webp"),
		url('/assets/dragon-encerrado.png') type("image/png")
	);
}

.parallax-trono {
	background-image: image-set(
		url('/assets/trono.avif') type("image/avif"),
		url('/assets/trono.webp') type("image/webp"),
		url('/assets/trono.png') type("image/png")
	);
}

/* 💻 Versión tablet/desktop (≥768px) → usa las imágenes con “b” */
@media (min-width: 768px) {
	.parallax-batalla {
		background-image: image-set(
			url('/assets/batallab.avif') type("image/avif"),
			url('/assets/batallab.webp') type("image/webp"),
			url('/assets/batallab.png') type("image/png")
		);
	}

	.parallax-decreto {
		background-image: image-set(
			url('/assets/decretob.avif') type("image/avif"),
			url('/assets/decretob.webp') type("image/webp"),
			url('/assets/decretob.png') type("image/png")
		);
	}

	.parallax-hechicera {
		background-image: image-set(
			url('/assets/hechicerab.avif') type("image/avif"),
			url('/assets/hechicerab.webp') type("image/webp"),
			url('/assets/hechicerab.png') type("image/png")
		);
	}

	.parallax-musculoso {
		background-image: image-set(
			url('/assets/musculosob.avif') type("image/avif"),
			url('/assets/musculosob.webp') type("image/webp"),
			url('/assets/musculosob.png') type("image/png")
		);
	}

	.parallax-unete {
		background-image: image-set(
			url('/assets/ordenb.avif') type("image/avif"),
			url('/assets/ordenb.webp') type("image/webp"),
			url('/assets/ordenb.png') type("image/png")
		);
	}

	.parallax-dragon {
		background-image: image-set(
			url('/assets/dragon-encerradob.avif') type("image/avif"),
			url('/assets/dragon-encerradob.webp') type("image/webp"),
			url('/assets/dragon-encerradob.png') type("image/png")
		);
	}

	.parallax-trono {
		background-image: image-set(
			url('/assets/tronob.avif') type("image/avif"),
			url('/assets/tronob.webp') type("image/webp"),
			url('/assets/tronob.png') type("image/png")
		);
	}
}
/* === Estilo del formulario de afiliación Sirlonia === */

.formulario-sirlonia {
	max-width: 500px;
	margin: 0 auto;
	padding: 2rem;
	background-color: var(--gris-suave);
	border-radius: 1rem;
	box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
	font-family: var(--font-principal);
	color: var(--texto);
}

.formulario-sirlonia h3 {
	font-family: var(--font-titulos);
	font-size: 1.5rem;
	color: var(--dorado);
	text-align: center;
	margin-bottom: 1rem;
}

.formulario-sirlonia input {
	width: 100%;
	padding: 0.75rem 1rem;
	margin-top: 0.5rem;
	border-radius: 0.5rem;
	border: none;
	font-size: 1rem;
	font-family: var(--font-principal);
	background-color: #1f1f1f;
	color: var(--texto);
}

.formulario-sirlonia input::placeholder {
	color: #aaa;
}

.formulario-sirlonia .btn-genero {
	display: inline-block;
	background-color: var(--dorado);
	color: var(--fondo);
	border: none;
	padding: 0.75rem 1.5rem;
	margin: 1rem 0.5rem;
	font-size: 1rem;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 0.3s ease;
	font-family: var(--font-titulos);
}

.formulario-sirlonia .btn-genero:hover {
	background-color: #e0c596;
}

.formulario-sirlonia .btn-custom {
	background-color: var(--rojo-sirlon);
	color: var(--texto);
	border: none;
	padding: 0.75rem 1.5rem;
	margin-top: 1rem;
	font-size: 1rem;
	border-radius: 0.5rem;
	cursor: pointer;
	display: block;
	width: 100%;
	text-align: center;
	font-family: var(--font-titulos);
	transition: background-color 0.3s ease;
}

.formulario-sirlonia .btn-custom:hover {
	background-color: #a52525;
}

/* Estilo para radios dentro de #wizardSirlonia */
#wizardSirlonia .form-check {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0.75rem 0;
	font-size: 1.1rem;
	line-height: 1.5;
}

#wizardSirlonia .form-check-input {
	accent-color: var(--dorado);
	width: 1.2rem;
	height: 1.2rem;
	margin: 0;
	flex-shrink: 0;
}

#wizardSirlonia .form-check-label {
	flex: 1;
	cursor: pointer;
}

.pregunta-radio{
	color: var(--dorado);
	text-transform: capitalize;
}


#mensajeConsagracion {
	text-align: center;
	font-size: 1.2rem;
	line-height: 1.6;
	color: var(--dorado);
	background-color: #1a1a1a;
	padding: 1.5rem;
	border-radius: 1rem;
	margin-top: 1rem;
}

#canvasTitulo {
	margin: 1rem auto;
	display: block;
	max-width: 100%;
	border: 2px solid var(--dorado);
	border-radius: 0.5rem;
}

h3 a {
	color: var(--dorado);
}

.titulo-consagracion {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 20px auto;
	border: 3px solid var(--dorado);
	border-radius: 12px;
	box-shadow: 0 0 15px rgba(0,0,0,0.3);
}

/* Modal Sirlonia */
.modal-sirlonia {
	display: none;
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.8);
	justify-content: center;
	align-items: center;
}

.modal-contenido {
	background: var(--fondo);
	color: var(--texto);
	padding: 2rem;
	border: 3px solid var(--dorado);
	border-radius: 12px;
	max-width: 500px;
	width: 90%;
	box-shadow: 0 0 25px rgba(0,0,0,0.6);
	text-align: center;
	animation: aparecer 0.4s ease;
}

.modal-contenido h2 {
	font-family: var(--font-titulos);
	color: var(--dorado);
	margin-bottom: 1rem;
}

.modal-contenido ul {
	list-style: none;
	padding: 0;
	margin: 1rem 0;
}

.modal-contenido li {
	margin: 0.5rem 0;
	font-size: 1.1rem;
}

.modal-contenido s {
	color: #ff5555;
}

.modal-contenido .cerrar {
	position: absolute;
	top: 10px;
	right: 20px;
	font-size: 2rem;
	cursor: pointer;
	color: var(--dorado);
	transition: transform 0.2s ease;
}

.modal-contenido .cerrar:hover {
	transform: scale(1.2);
}

@keyframes aparecer {
	from { transform: scale(0.7); opacity: 0; }
	to { transform: scale(1); opacity: 1; }
}



.mapa-container {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 ratio */
	height: 0;
	overflow: hidden;
	border-radius: 1rem;
	box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.mapa-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* 📱 Redes Sociales */
.contenido-redes {
	display: flex;
	justify-content: center; /* Centrar en horizontal */
	gap: 1rem; /* Espacio entre botones */
	flex-wrap: wrap; /* Si no caben, que bajen en otra fila */
	margin-top: 1rem;
}

.btn-red {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--dorado);
	color: #111;
	padding: 0.6rem 1.2rem;
	border-radius: 50px; /* Redonditos */
	font-weight: bold;
	text-decoration: none;
	transition: transform 0.2s, background 0.3s;
}

.btn-red:hover {
	background: #fff;
	color: var(--dorado);
	transform: scale(1.05);
}