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

body {
	background: var(--bg-dark);
	color: var(--text-light);
	font-family: 'Rajdhani', sans-serif;
	overflow-x: hidden;
	min-height: 100vh;
}

/* ── STARS BACKGROUND ── */
.stars-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: url('../assets/img/background.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
}

/* ── HERO SECTION ── */
.hero {
	position: relative;
	z-index: 1;
	min-height: 100vh;
	overflow: hidden;
	display: grid;
	grid-template-rows: auto 1fr auto;
	grid-template-columns: 1fr;
	padding: 0;
}

/* ── TOP BAR ── */
.topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 48px;
	border-bottom: 1px solid rgba(201, 162, 39, 0.2);
	background: rgba(5, 5, 8, 0.6);
	backdrop-filter: blur(8px);
	animation: slideDown 0.8s ease forwards;
}
@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
.brand {
	display: flex;
	align-items: center;
	gap: 12px;
}
.brand-icon {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	border: 2px solid var(--gold);
	background-image: url('../assets/img/logo.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	box-shadow: 0 0 12px rgba(201, 162, 39, 0.4);
	animation: pulse-glow 3s ease-in-out infinite;
}
@keyframes pulse-glow {
	0%,
	100% {
		box-shadow: 0 0 12px rgba(201, 162, 39, 0.4);
	}
	50% {
		box-shadow:
			0 0 24px rgba(201, 162, 39, 0.8),
			0 0 40px rgba(201, 162, 39, 0.3);
	}
}
.brand-text {
	font-family: 'Cinzel', serif;
	font-size: 11px;
	letter-spacing: 2px;
	color: var(--gold);
	text-transform: uppercase;
	line-height: 1.4;
}
.brand-text span {
	display: block;
	font-size: 9px;
	color: rgba(201, 162, 39, 0.8);
	letter-spacing: 1.5px;
}
.nav-badge {
	font-family: 'Cinzel', serif;
	font-size: 10px;
	letter-spacing: 3px;
	color: var(--gold);
	text-transform: uppercase;
	border: 1px solid rgba(201, 162, 39, 0.4);
	padding: 6px 16px;
	border-radius: 2px;
	background: rgba(201, 162, 39, 0.05);
}

/* ── MAIN CONTENT GRID ── */
.main-content {
	display: grid;
	grid-template-columns: 1fr 1.4fr 1fr;
	grid-template-rows: 1fr;
	align-items: center;
	gap: 0;
	padding: 40px 48px;
	min-height: calc(100vh - 160px);
}

/* LEFT COLUMN */
.left-col {
	display: grid;
	grid-template-rows: auto auto auto;
	gap: 28px;
	animation: fadeInLeft 1s ease 0.3s both;
}
@keyframes fadeInLeft {
	from {
		opacity: 0;
		transform: translateX(-50px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}
.book-container {
	position: relative;
	width: 300px;
	height: 440px;
	margin: 0 auto;
}
.book-img {
	width: 100%;
	height: 100%;
	background-image: url('../assets/img/book.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 80px;
	position: relative;
	overflow: hidden;
	animation: float 6s ease-in-out infinite;
}
@keyframes float {
	0%,
	100% {
		transform: translateY(0) rotate(-2deg);
	}
	50% {
		transform: translateY(-12px) rotate(-1deg);
	}
}
.book-img::before {
	content: '';
	position: absolute;
	inset: 0;
}
.book-img::after {
	content: '✦';
	position: absolute;
	bottom: 20px;
	right: 20px;
	font-size: 28px;
	color: rgba(201, 162, 39, 0.3);
}
.compass-icon {
	font-size: 72px;
	filter: drop-shadow(0 0 10px rgba(201, 162, 39, 0.4));
}
.book-spine {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 14px;
	background: linear-gradient(180deg, #3d2800, #1a1000, #3d2800);
	border-radius: 4px 0 0 4px;
	border-right: 1px solid rgba(201, 162, 39, 0.2);
}

.feature-cards {
	display: grid;
	gap: 12px;
}
.feat-card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	background: rgba(201, 162, 39, 0.05);
	border: 1px solid rgba(201, 162, 39, 0.15);
	border-radius: 6px;
	transition: all 0.3s ease;
	cursor: default;
}
.feat-card:hover {
	background: rgba(201, 162, 39, 0.1);
	border-color: rgba(201, 162, 39, 0.4);
	transform: translateX(4px);
}
.feat-icon {
	font-size: 22px;
}
.feat-text {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1px;
	color: var(--text-light);
}
.feat-sub {
	font-size: 10px;
	color: rgba(240, 232, 208, 0.8);
	letter-spacing: 0.5px;
}

/* CENTER COLUMN */
.center-col {
	display: grid;
	grid-template-rows: auto auto auto auto auto;
	gap: 20px;
	align-items: center;
	justify-items: center;
	text-align: center;
	padding: 0 20px;
	animation: fadeInUp 1s ease 0.5s both;
}
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(60px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
.semana-label {
	font-family: 'Cinzel', serif;
	font-size: 13px;
	letter-spacing: 6px;
	color: var(--gold);
	text-transform: uppercase;
	position: relative;
}
.semana-label::before,
.semana-label::after {
	content: '──';
	margin: 0 10px;
	color: rgba(201, 162, 39, 0.4);
}

.title-block {
	position: relative;
}
.title-main {
	font-family: 'Bebas Neue', serif;
	font-size: clamp(64px, 8vw, 100px);
	font-weight: 900;
	line-height: 0.9;
	letter-spacing: 4px;
	background: linear-gradient(
		180deg,
		#f0c040 0%,
		#c9a227 40%,
		#8a6a00 80%,
		#c9a227 100%
	);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-shadow: none;
	filter: drop-shadow(0 0 20px rgba(201, 162, 39, 0.5));
	animation: shimmer 4s ease-in-out infinite;
}
@keyframes shimmer {
	0%,
	100% {
		filter: drop-shadow(0 0 20px rgba(201, 162, 39, 0.5));
	}
	50% {
		filter: drop-shadow(0 0 40px rgba(240, 192, 64, 0.9))
			drop-shadow(0 0 60px rgba(201, 162, 39, 0.4));
	}
}
.title-del {
	font-family: 'Cinzel', serif;
	font-size: clamp(22px, 3vw, 36px);
	font-weight: 400;
	letter-spacing: 12px;
	color: rgba(240, 232, 208, 0.7);
	margin: 4px 0;
}
.title-fin {
	font-family: 'Bebas Neue', serif;
	font-size: clamp(56px, 15vw, 200px);
	font-weight: 900;
	line-height: 0.85;
	letter-spacing: 8px;
	background: linear-gradient(
		180deg,
		#f5d060 0%,
		#c9a227 30%,
		#6b4e00 70%,
		#c9a227 100%
	);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	filter: drop-shadow(0 0 30px rgba(201, 162, 39, 0.6));
	animation: shimmer 4s ease-in-out infinite 1s;
}

.code-badge {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	align-items: center;
	gap: 10px;
	padding: 16px 20px;
	background: rgba(5, 5, 8, 0.7);
	border: 1px solid var(--gold);
	border-radius: 4px;
	font-family: 'Cinzel', serif;
	font-size: 14px;
	letter-spacing: 3px;
	color: var(--text-light);
	box-shadow:
		0 0 20px rgba(201, 162, 39, 0.2),
		inset 0 0 20px rgba(201, 162, 39, 0.05);
	position: relative;
	overflow: hidden;
}
.code-badge::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 60%;
	height: 100%;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(201, 162, 39, 0.15),
		transparent
	);
	animation: sweep 3s ease-in-out infinite;
}

.code-badge > p {
	text-align: center;
	font-family: 'Cinzel', serif;
	font-size: clamp(22px, 3vw, 20px);
	font-weight: 400;
	letter-spacing: 12px;
	color: rgba(240, 232, 208, 0.7);
	margin: 4px 0;
	grid-column: 1/-1;
}

@keyframes sweep {
	0% {
		left: -100%;
	}
	100% {
		left: 200%;
	}
}
.code-label {
	color: rgba(240, 232, 208, 0.5);
	font-size: 11px;
	letter-spacing: 4px;
}
.code-value {
	color: var(--gold-light);
	font-weight: 700;
}

.cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 40px;
	background: linear-gradient(
		135deg,
		var(--gold-dark),
		var(--gold),
		var(--gold-dark)
	);
	background-size: 200% 100%;
	border: none;
	border-radius: 4px;
	font-family: 'Cinzel', serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 3px;
	color: white;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: 0 4px 20px rgba(201, 162, 39, 0.4);
	animation: btn-pulse 3s ease-in-out infinite;
	text-decoration: none;
}
@keyframes btn-pulse {
	0%,
	100% {
		box-shadow: 0 4px 20px rgba(201, 162, 39, 0.4);
		background-position: 0% 50%;
	}
	50% {
		box-shadow:
			0 4px 40px rgba(201, 162, 39, 0.8),
			0 0 60px rgba(201, 162, 39, 0.3);
		background-position: 100% 50%;
	}
}
.cta-btn:hover {
	transform: translateY(-3px) scale(1.03);
	box-shadow: 0 8px 40px rgba(201, 162, 39, 0.7);
}

.tagline {
	font-size: 11px;
	letter-spacing: 4px;
	color: rgba(240, 232, 208, 0.8);
	text-transform: uppercase;
}
.tagline span {
	color: var(--gold);
}

/* MODAL */

.charge-modal {
	display: none;
	position: absolute;
}

.hide-modal {
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: auto;
	position: absolute;
	justify-self: center;
	align-self: center;
	z-index: -1;
	width: 100%;
	height: 140%;
	background: #050508b3;
	opacity: 0%;

	animation: hideModal 1s ease 0.3s both;
}

.hide-modal > div {
	opacity: 0%;
	animation: hideModal 1s ease 0.3s both;
}

@keyframes hideModal {
	0% {
		opacity: 100%;
		z-index: 1;
	}
	100% {
		opacity: 0%;
		z-index: -1;
	}
}

.modal {
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: auto;
	position: absolute;
	justify-self: center;
	align-self: center;
	z-index: 1;
	width: 100%;
	height: 140%;
	background: #050508b3;
	animation: showModal 1s ease 0.3s both;
}

.modal-content {
	text-align: center;
	position: relative;
	overflow: hidden;
	align-self: center;
	justify-self: center;
	width: 70%;
	background: radial-gradient(circle, #000000 25%, #05050800 70%);
	height: 70%;
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: auto;
	justify-items: center;
	align-items: center;
	border-radius: 8px;
}

@keyframes showModal {
	0% {
		opacity: 0%;
	}
	100% {
		opacity: 100%;
	}
}

/* RIGHT COLUMN */
.right-col {
	display: grid;
	grid-template-rows: auto auto auto;
	gap: 24px;
	animation: fadeInRight 1s ease 0.3s both;
}
@keyframes fadeInRight {
	from {
		opacity: 0;
		transform: translateX(50px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.date-card {
	background: rgba(5, 5, 8, 0.7);
	border: 1px solid rgba(201, 162, 39, 0.3);
	border-radius: 8px;
	padding: 20px 24px;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.date-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--gold), transparent);
	animation: scan 3s ease-in-out infinite;
}
@keyframes scan {
	0%,
	100% {
		opacity: 0.4;
	}
	50% {
		opacity: 1;
	}
}
.date-label {
	font-family: 'Cinzel', serif;
	font-size: 10px;
	letter-spacing: 3px;
	color: rgba(201, 162, 39, 0.8);
	text-transform: uppercase;
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
.date-range {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
}
.date-num {
	font-family: 'Cinzel Decorative', serif;
	font-size: 42px;
	font-weight: 900;
	color: var(--gold-light);
	line-height: 1;
	filter: drop-shadow(0 0 10px rgba(201, 162, 39, 0.5));
}
.date-month {
	font-family: 'Cinzel', serif;
	font-size: 11px;
	letter-spacing: 2px;
	color: rgba(240, 232, 208, 0.8);
	text-transform: uppercase;
}
.date-sep {
	font-size: 20px;
	color: rgba(201, 162, 39, 0.6);
	padding: 0 4px;
}

.inscripciones-badge {
	background: linear-gradient(
		135deg,
		rgba(201, 162, 39, 0.15),
		rgba(201, 162, 39, 0.05)
	);
	border: 1px solid rgba(201, 162, 39, 0.4);
	border-radius: 8px;
	padding: 18px 20px;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.inscripciones-badge::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		135deg,
		transparent 40%,
		rgba(201, 162, 39, 0.05) 100%
	);
}
.inscr-title {
	font-family: 'Cinzel Decorative', serif;
	font-size: 18px;
	font-weight: 700;
	color: var(--gold-light);
	letter-spacing: 2px;
	text-transform: uppercase;
	filter: drop-shadow(0 0 8px rgba(201, 162, 39, 0.5));
}
.inscr-sub {
	font-size: 11px;
	letter-spacing: 3px;
	color: rgba(240, 232, 208, 0.8);
	text-transform: uppercase;
	margin-top: 4px;
}
.dot-blink {
	display: inline-block;
	width: 8px;
	height: 8px;
	background: #4cff80;
	border-radius: 50%;
	margin-right: 6px;
	animation: blink 1.5s ease-in-out infinite;
	box-shadow: 0 0 8px #4cff80;
}
@keyframes blink {
	0%,
	100% {
		opacity: 1;
	}
	50% {
		opacity: 0.2;
	}
}

.info-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.info-item {
	background: rgba(201, 162, 39, 0.04);
	border: 1px solid rgba(201, 162, 39, 0.12);
	border-radius: 6px;
	padding: 14px 12px;
	text-align: center;
	transition: all 0.3s ease;
}
.info-item:hover {
	background: rgba(201, 162, 39, 0.1);
	border-color: rgba(201, 162, 39, 0.35);
	transform: translateY(-2px);
}
.info-icon {
	font-size: 24px;
	margin-bottom: 6px;
}
.info-title {
	font-family: 'Cinzel', serif;
	font-size: 10px;
	letter-spacing: 1.5px;
	color: var(--gold);
	text-transform: uppercase;
	font-weight: 600;
}
.info-desc {
	font-size: 10px;
	color: rgba(240, 232, 208, 0.8);
	margin-top: 3px;
	letter-spacing: 0.5px;
}

/* ── BOTTOM BAR ── */
.bottom-bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	padding: 16px 48px;
	border-top: 1px solid rgba(201, 162, 39, 0.15);
	background: rgba(5, 5, 8, 0.7);
	backdrop-filter: blur(8px);
	animation: slideUp 0.8s ease 0.8s both;
}
@keyframes slideUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
.bottom-left {
	font-size: 11px;
	letter-spacing: 2px;
	color: rgba(240, 232, 208, 0.8);
	text-transform: uppercase;
}
.bottom-center {
	display: flex;
	gap: 6px;
	align-items: center;
}
.dot-line {
	width: 30px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--gold));
}
.dot-line.rev {
	background: linear-gradient(90deg, var(--gold), transparent);
}
.center-dot {
	width: 6px;
	height: 6px;
	background: var(--gold);
	border-radius: 50%;
	box-shadow: 0 0 8px var(--gold);
}
.bottom-right {
	text-align: right;
	font-size: 11px;
	letter-spacing: 2px;
	color: rgba(240, 232, 208, 0.8);
	text-transform: uppercase;
}
.bottom-right span {
	color: var(--gold);
}

/* ── GLOBE DECORATION ── */
.globe-deco {
	position: fixed;
	right: -220px;
	top: 50%;
	width: 620px;
	height: 620px;
	border-radius: 50%;
	background-image: url('../assets/img/world.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	z-index: 0;
	animation: globe-rotate 100s linear infinite;
	overflow: hidden;
	pointer-events: none;
}

.form-input {
	height: 36px;
	padding: 8px;

	color: #ffffff;
	border: 1px solid #f0c040;
	border-radius: 4px;
	background-color: transparent;
}

@keyframes globe-rotate {
	from {
		transform: translateY(-50%) rotate(0deg);
	}
	to {
		transform: translateY(-50%) rotate(360deg);
	}
}

/* ── LIGHT RAYS ── */
.light-rays {
	position: fixed;
	top: -10%;
	left: 50%;
	transform: translateX(-50%);
	width: 600px;
	height: 500px;
	background: conic-gradient(
		from 260deg at 50% 0%,
		transparent 0deg,
		rgba(201, 162, 39, 0.03) 10deg,
		transparent 20deg,
		rgba(201, 162, 39, 0.05) 30deg,
		transparent 40deg,
		rgba(201, 162, 39, 0.03) 50deg,
		transparent 60deg
	);
	pointer-events: none;
	z-index: 0;
	animation: rays-pulse 6s ease-in-out infinite;
}
@keyframes rays-pulse {
	0%,
	100% {
		opacity: 0.5;
	}
	50% {
		opacity: 1;
	}
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
	html,
	body {
		min-height: 100%;
		background-color: var(--bg-dark, #050508);
	}

	.hero {
		position: relative;
		z-index: 1;
		min-height: 100dvh;
		overflow: visible;

		background-image:
			linear-gradient(rgba(5, 5, 8, 0.15), rgba(5, 5, 8, 0.15)),
			url('../assets/img/background.png');

		background-position: center top;
		background-repeat: repeat-y;
		background-size: cover;
		background-color: var(--bg-dark, #050508);
	}

	.stars-bg {
		display: none;
	}

	.main-content {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
		padding: 30px 24px;
		gap: 30px;
	}

	.left-col {
		order: 2;
	}

	.center-col {
		order: 1;
	}

	.right-col {
		order: 3;
	}

	.topbar,
	.bottom-bar {
		padding: 14px 24px;
	}

	.globe-deco {
		display: none;
	}

	.book-container {
		width: 140px;
		height: 170px;
	}

	.code-badge {
		grid-template-columns: 100%;
		font-size: 16px;
		letter-spacing: 3px;
	}

	.cta-btn {
		letter-spacing: 2px;
		font-size: 12px;
	}
}

@media (max-width: 480px) {
	.main-content {
		padding: 24px 16px;
		gap: 24px;
	}

	.title-main {
		font-size: clamp(54px, 18vw, 86px);
		letter-spacing: 2px;
	}

	.title-fin {
		font-size: clamp(50px, 20vw, 96px);
		letter-spacing: 3px;
	}

	.title-del {
		font-size: 18px;
		letter-spacing: 5px;
	}

	.semana-label {
		font-size: 11px;
		letter-spacing: 3px;
		color: #f9f3e0;
	}

	.code-badge > p {
		font-size: 18px;
		letter-spacing: 5px;
	}

	.topbar,
	.bottom-bar {
		padding: 12px 16px;
	}

	.nav-badge {
		display: none;
	}
}