/* Base y tokens */
:root {
	--navigarza-bg: #17090a;
	--navigarza-bg-soft: #240e10;
	--navigarza-primary: #d3262a;
	--navigarza-accent: #ffd166;
	--navigarza-text: #ffffff;
	--navigarza-text-dim: #676767;
	--navigarza-surface: #2e1316;
	--navigarza-radius: 18px;
	--navigarza-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

html {
	scroll-behavior: smooth;
}
.navigarza_body {
	margin: 0;
	font-family: Outfit, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu,
		'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
	background: linear-gradient(180deg, #2b0f12 0%, #16080a 100%);
	color: var(--navigarza-text);
}

/* ============================================
   SECCIÓN: Canvas nieve
   ============================================ */
#navigarza_snow_canvas {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 10;
}
#navigarza_snow_pile {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: 0;
	z-index: 9;
	pointer-events: none;
	/* mound base (se reemplaza por SVG si lo deseas) */
	background: radial-gradient(
			120% 60% at 50% -10%,
			rgba(255, 255, 255, 0.4) 0%,
			transparent 60%
		),
		linear-gradient(#fff, #f2f6ff);
	border-top-left-radius: 35% 18%;
	border-top-right-radius: 35% 18%;
	box-shadow: 0 -10px 40px rgba(255, 255, 255, 0.2) inset;
	transition: height 0.8s ease;
}

/* ============================================
   SECCIÓN: Header & Hero
   ============================================ */
.navigarza_header {
	position: sticky;
	top: 0;
	z-index: 20;
	backdrop-filter: blur(8px);
	background: linear-gradient(
		180deg,
		rgba(23, 9, 10, 0.9),
		rgba(23, 9, 10, 0.6)
	);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.navigarza_header_inner {
	max-width: 1100px;
	margin: auto;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 18px;
	justify-content: center;
}
.navigarza_logo {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--navigarza-text);
}
.navigarza_logo:hover {
	color: #fff;
}
.navigarza_brand {
	font-weight: 700;
	letter-spacing: 0.2px;
}
.navigarza_nav_toggle {
	display: none;
}

.navigarza_nav_menu {
	display: flex;
	gap: 25px;
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 16px;
}
.navigarza_nav_menu a {
	color: #fff;
	text-decoration: none;
}
.navigarza_nav_menu a:hover {
	color: #9a9a9a;
}

.navigarza_hero {
	max-width: 1100px;
	margin: 24px auto;
	padding: 18px;
	display: grid;
	gap: 24px;
	grid-template-columns: 1fr;
	/*! background: #700d0d; */
	/*! background-image: linear-gradient(180deg, #ebedee 100%, #fff 0%); */
}
.navigarza_hero_media img {
	width: 100%;
	height: auto;
	border-radius: var(--navigarza-radius);
	box-shadow: var(--navigarza-shadow);
	object-fit: cover;
}
.navigarza_overline {
	color: var(--navigarza-accent);
	margin: 0.25rem 0 0.5rem;
	font-weight: 600;
}
.navigarza_hero h1 {
	font-size: clamp(28px, 5vw, 56px);
	margin: 0.2rem 0;
	text-align: left;
}
.navigarza_hero h1 span {
	color: var(--navigarza-accent);
	font-weight: 800;
}
.navigarza_subtitle {
	font-size: clamp(16px, 2.2vw, 20px);
	color: var(--navigarza-text-dim);
}

.navigarza_cta_group {
	display: flex;
	gap: 12px;
	margin: 18px 0 8px;
}
.navigarza_btn_primary,
.navigarza_btn_secondary {
	padding: 12px 16px;
	border-radius: 12px;
	text-decoration: none;
	font-weight: 700;
	display: inline-block;
}
.navigarza_btn_primary {
	background: #aa0d0d;
	color: #fff;
	box-shadow: var(--navigarza-shadow);
}
.navigarza_btn_primary:hover {
	background: #fff;
	color: #000;
	box-shadow: var(--navigarza-shadow);
	text-decoration: none;
	transform: scale(1.1);
	border: 1px solid rgba(0, 0, 0, 0.85);
}
.navigarza_btn_secondary {
	border: 1px solid rgba(0, 0, 0, 0.85);
	color: #000;
}
.navigarza_btn_secondary:hover {
	background: #381f21;
	color: #fff;
	box-shadow: var(--navigarza-shadow);
	text-decoration: none;
}

.navigarza_badges {
	display: flex;
	gap: 8px;
	list-style: none;
	padding: 0;
	margin: 10px 0 0;
}
.navigarza_badges li {
	background: rgba(255, 211, 109, 0.5);
	padding: 6px 15px;
	border-radius: 999px;
}

/* ============================================
   SECCIÓN: Section base
   ============================================ */
.navigarza_section {
	max-width: 1100px;
	margin: 56px auto;
	padding: 0 18px;
}
.navigarza_section_alt {
	background: rgba(255, 255, 255, 0.03);
	border-radius: var(--navigarza-radius);
	padding: 24px 18px;
}
.navigarza_section_header h2 {
	font-size: clamp(22px, 3vw, 32px);
	margin: 0 0 6px;
}
.navigarza_section_header p {
	color: var(--navigarza-text-dim);
	margin: 0;
	text-align: center;
	font-size: 2rem;
}

/* ============================================
   SECCIÓN: Funciones
   ============================================ */
.navigarza_schedule {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin-top: 16px;
}
.navigarza_day {
	background: var(--navigarza-surface);
	border-radius: 14px;
	padding: 14px;
	box-shadow: var(--navigarza-shadow);
}
.navigarza_day h3 {
	margin: 0 0 8px;
	color: var(--navigarza-accent);
}
.navigarza_day ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.navigarza_day li {
	color: #ffffff; /* <-- forzado a blanco */
	background: rgba(255, 255, 255, 0.1);
	padding: 6px 10px;
	border-radius: 999px;
	font-weight: 600;
}
.navigarza_note {
	color: #ffffff;
	opacity: 0.85;
	font-weight: 400;
}

/* ============================================
   SECCIÓN: Cuotas
   ============================================ */
.navigarza_pricing {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin-top: 16px;
}
.navigarza_price_card {
	background: linear-gradient(180deg, #3a1619, #2a1012);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	padding: 16px;
	text-align: center;
}
.navigarza_price_card h3 {
	margin: 0 0 8px;
	color: #fff;
	font-weight: bold;
}
.navigarza_price {
	font-size: clamp(26px, 5vw, 42px);
	margin: 6px 0;
	color: var(--navigarza-accent);
	font-weight: 800;
}
.navigarza_disclaimer {
	color: var(--navigarza-text-dim);
	font-size: 1.45rem;
	margin-top: 15px;
}

/* ============================================
   SECCIÓN: Sede
   ============================================ */
.navigarza_venue {
	display: grid;
	gap: 16px;
	grid-template-columns: 1fr;
}
.navigarza_venue img {
	width: 100%;
	height: auto;
	border-radius: 14px;
}
.navigarza_venue_map iframe {
	width: 100%;
	height: 410px;
	border: 0;
	border-radius: 14px;
}

/* ============================================
   SECCIÓN: Boletos
   ============================================ */
.navigarza_ticket_cta {
	display: grid;
	place-items: center;
	gap: 12px;
	margin-top: 12px;
}
.navigarza_ticket_logo {
	width: 120px;
	height: 120px;
	object-fit: contain;
	image-rendering: auto;
	filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
}
@media (min-width: 860px) {
	.navigarza_ticket_logo {
		width: 250px;
		height: 250px;
	}
}

/* ============================================
   SECCIÓN: FAQ
   ============================================ */
.navigarza_faq details {
	background: var(--navigarza-surface);
	border-radius: 12px;
	padding: 12px 14px;
	margin: 10px 0;
	color: #ffffff;
}
.navigarza_faq summary {
	cursor: pointer;
	font-weight: 700;
	color: #ffffff;
}
.navigarza_small {
	opacity: 0.75;
	font-size: 0.9rem;
}
.navigarza_faq p {
	color: #ffffff;
	margin-top: 15px;
}

/* ============================================
   SECCIÓN: Footer
   ============================================ */
.navigarza_footer {
	padding: 28px 18px;
	color: var(--navigarza-text-dim);
	text-align: center;
}

/* Responsive */
@media (min-width: 860px) {
	.navigarza_hero {
		grid-template-columns: 0.9fr 1.1fr;
		align-items: center;
	}
	.navigarza_schedule {
		grid-template-columns: repeat(3, 1fr);
	}
	.navigarza_pricing {
		grid-template-columns: repeat(3, 1fr);
	}
	.navigarza_venue {
		grid-template-columns: 1.2fr 0.8fr;
	}
	.navigarza_nav_toggle {
		display: none;
	}
}
@media (prefers-reduced-motion: reduce) {
	#navigarza_snow_canvas {
		display: none;
	}
	#navigarza_snow_pile {
		transition: none;
	}
}
/* ============================================
   SECCIÓN: Micro-interacciones on-scroll
   ============================================ */
.navigarza_reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.6s ease, transform 0.6s ease;
	will-change: opacity, transform;
}
.navigarza_reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* Parallax sutil del hero media (no rompe accesibilidad) */
.navigarza_hero_media {
	transform: translateY(0);
	transition: transform 0.2s linear;
	will-change: transform;
}
.navigarza_btn_mini {
	margin-left: 8px;
	padding: 6px 10px;
	font-size: 0.85rem;
	border-radius: 10px;
	line-height: 1;
	vertical-align: middle;
}

/* ============================================
   B.3 SECCIÓN: Nieve acumulada con SVG (3 olas) — data-URI CORREGIDAS
   ============================================ */
:root {
	/* 1440 × 300 */
	/* --navigarza-snow-svg-1440: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1440' height='300' viewBox='0 0 1440 300' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' x2='0' y1='0' y2='1'><stop offset='0%25' stop-color='%23ffffff'/><stop offset='100%25' stop-color='%23f3f7ff'/></linearGradient></defs><rect width='1440' height='300' fill='url(%23g)'/><path d='M0,180 C240,140 360,190 540,170 C720,150 840,210 1050,180 C1230,155 1320,175 1440,160 L1440,300 L0,300Z' fill='%23ffffff' opacity='.9' stroke='%230a1229' stroke-opacity='0.10' stroke-width='2' vector-effect='non-scaling-stroke'/><path d='M0,210 C220,190 420,210 640,190 C860,170 1060,210 1200,200 C1320,192 1380,188 1440,185 L1440,300 L0,300Z' fill='%23ffffff' opacity='.75' stroke='%230a1229' stroke-opacity='0.08' stroke-width='2' vector-effect='non-scaling-stroke'/><path d='M0,235 C260,230 420,240 700,232 C980,224 1180,246 1440,238 L1440,300 L0,300Z' fill='%23ffffff' opacity='.6' stroke='%230a1229' stroke-opacity='0.06' stroke-width='2' vector-effect='non-scaling-stroke'/></svg>"); */

	/* 1920 × 320 */
	/* --navigarza-snow-svg-1920: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1920' height='320' viewBox='0 0 1920 320' preserveAspectRatio='none'><defs><linearGradient id='g2' x1='0' x2='0' y1='0' y2='1'><stop offset='0%25' stop-color='%23ffffff'/><stop offset='100%25' stop-color='%23eef4ff'/></linearGradient></defs><rect width='1920' height='320' fill='url(%23g2)'/><path d='M0,190 C320,160 520,210 760,185 C1000,160 1200,220 1480,195 C1680,178 1800,190 1920,175 L1920,320 L0,320Z' fill='%23ffffff' opacity='.9' stroke='%230a1229' stroke-opacity='0.10' stroke-width='2' vector-effect='non-scaling-stroke'/><path d='M0,220 C280,205 560,228 880,208 C1200,188 1460,230 1680,215 C1800,206 1870,202 1920,200 L1920,320 L0,320Z' fill='%23ffffff' opacity='.72' stroke='%230a1229' stroke-opacity='0.08' stroke-width='2' vector-effect='non-scaling-stroke'/><path d='M0,245 C360,240 640,250 980,242 C1320,234 1600,256 1920,248 L1920,320 L0,320Z' fill='%23ffffff' opacity='.58' stroke='%230a1229' stroke-opacity='0.06' stroke-width='2' vector-effect='non-scaling-stroke'/></svg>"); */

	/* 2560 × 360 */
	/* --navigarza-snow-svg-2560: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='2560' height='360' viewBox='0 0 2560 360' preserveAspectRatio='none'><defs><linearGradient id='g3' x1='0' x2='0' y1='0' y2='1'><stop offset='0%25' stop-color='%23ffffff'/><stop offset='100%25' stop-color='%23eaf2ff'/></linearGradient></defs><rect width='2560' height='360' fill='url(%23g3)'/><path d='M0,210 C420,180 720,230 1040,200 C1360,170 1680,235 2080,205 C2320,186 2460,195 2560,185 L2560,360 L0,360Z' fill='%23ffffff' opacity='.9' stroke='%230a1229' stroke-opacity='0.10' stroke-width='2' vector-effect='non-scaling-stroke'/><path d='M0,240 C400,225 820,248 1160,228 C1500,208 1860,250 2200,230 C2400,218 2480,214 2560,212 L2560,360 L0,360Z' fill='%23ffffff' opacity='.72' stroke='%230a1229' stroke-opacity='0.08' stroke-width='2' vector-effect='non-scaling-stroke'/><path d='M0,270 C520,265 900,275 1320,268 C1740,260 2100,282 2560,274 L2560,360 L0,360Z' fill='%23ffffff' opacity='.56' stroke='%230a1229' stroke-opacity='0.06' stroke-width='2' vector-effect='non-scaling-stroke'/></svg>"); */

	/* --navigarza-snow-svg-1440: url('../images/nieve1.svg');
	--navigarza-snow-svg-1920: url('../images/nieve2.svg');
	--navigarza-snow-svg-2560: url('../images/nieve3.svg'); */

	/* ============================================
     OLA 1440 × 300 — forma A (ondas marcadas)
     ============================================ */
	--navigarza-snow-svg-1440: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1440' height='300' viewBox='0 0 1440 300' preserveAspectRatio='none'><defs><linearGradient id='bgA' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%23ffffff'/><stop offset='100%25' stop-color='%23eef3ff'/></linearGradient><linearGradient id='crestA1' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%23ffffff'/><stop offset='100%25' stop-color='%23f0f5ff'/></linearGradient><linearGradient id='crestA2' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%23fbfdff'/><stop offset='100%25' stop-color='%23e9f1ff'/></linearGradient><linearGradient id='crestA3' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%23f7fbff'/><stop offset='100%25' stop-color='%23e6f0ff'/></linearGradient></defs><rect width='1440' height='300' fill='none'/><path d='M0,172 C200,120 360,210 560,168 C760,126 940,226 1150,182 C1280,156 1360,170 1440,160 L1440,300 L0,300 Z' fill='url(%23crestA1)' opacity='0.92'/><path d='M0,205 C240,186 460,222 720,198 C980,174 1180,230 1360,212 C1400,208 1420,206 1440,205 L1440,300 L0,300 Z' fill='url(%23crestA2)' opacity='0.86'/><path d='M0,237 C260,232 500,246 820,236 C1140,226 1320,254 1440,246 L1440,300 L0,300 Z' fill='url(%23crestA3)' opacity='0.78'/></svg>");

	/* ============================================
     OLA 1920 × 320 — forma B (crestas más amplias)
     ============================================ */
	--navigarza-snow-svg-1920: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1920' height='320' viewBox='0 0 1920 320' preserveAspectRatio='none'><defs><linearGradient id='bgB' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%23ffffff'/><stop offset='100%25' stop-color='%23ecf3ff'/></linearGradient><linearGradient id='crestB1' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%23ffffff'/><stop offset='100%25' stop-color='%23eef4ff'/></linearGradient><linearGradient id='crestB2' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%23fbfdff'/><stop offset='100%25' stop-color='%23eaf1ff'/></linearGradient><linearGradient id='crestB3' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%23f6fbff'/><stop offset='100%25' stop-color='%23e7f0ff'/></linearGradient></defs><rect width='1920' height='320' fill='none'/><path d='M0,188 C320,130 560,228 840,178 C1120,128 1360,236 1640,190 C1780,168 1860,182 1920,170 L1920,320 L0,320 Z' fill='url(%23crestB1)' opacity='0.92'/><path d='M0,222 C300,204 640,236 980,210 C1320,184 1580,234 1800,216 C1860,211 1890,208 1920,206 L1920,320 L0,320 Z' fill='url(%23crestB2)' opacity='0.84'/><path d='M0,250 C360,244 720,258 1120,246 C1520,234 1760,262 1920,254 L1920,320 L0,320 Z' fill='url(%23crestB3)' opacity='0.76'/></svg>");

	/* ============================================
     OLA 2560 × 360 — forma C (olas largas y profundas)
     ============================================ */
	--navigarza-snow-svg-2560: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='2560' height='360' viewBox='0 0 2560 360' preserveAspectRatio='none'><defs><linearGradient id='bgC' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%23ffffff'/><stop offset='100%25' stop-color='%23eaf2ff'/></linearGradient><linearGradient id='crestC1' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%23ffffff'/><stop offset='100%25' stop-color='%23eef4ff'/></linearGradient><linearGradient id='crestC2' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%23fbfdff'/><stop offset='100%25' stop-color='%23e9f2ff'/></linearGradient><linearGradient id='crestC3' x1='0' y1='0' x2='0' y2='1'><stop offset='0%25' stop-color='%23f6faff'/><stop offset='100%25' stop-color='%23e5efff'/></linearGradient></defs><rect width='2560' height='360' fill='url(%23bgC)'/><path d='M0,206 C420,140 780,242 1120,184 C1460,126 1820,244 2220,194 C2400,172 2500,186 2560,176 L2560,360 L0,360 Z' fill='none' opacity='0.92'/><path d='M0,242 C400,226 880,252 1280,224 C1680,196 2060,248 2360,226 C2460,218 2510,214 2560,212 L2560,360 L0,360 Z' fill='url(%23crestC2)' opacity='0.83'/><path d='M0,272 C520,266 980,280 1440,268 C1900,256 2240,286 2560,278 L2560,360 L0,360 Z' fill='url(%23crestC3)' opacity='0.74'/></svg>");
}

/* Aplicación al montículo (sobrescribe fondo anterior con SVG + degradados) */
#navigarza_snow_pile {
	background-image: var(--navigarza-snow-svg-1440),
		radial-gradient(
			120% 60% at 50% -10%,
			rgba(251, 251, 251, 0.35) 0%,
			transparent 60%
		),
		linear-gradient(
			180deg,
			rgba(251, 251, 251, 0.5) 0%,
			rgba(161, 174, 255, 0.28) 40%,
			rgba(147, 152, 182, 0.44) 75%
		),
		linear-gradient(#fff, #f2f6ff); /* base clara al fondo */
	background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
	background-repeat: no-repeat;
}

/* Switch según ancho de viewport */
@media (min-width: 1200px) {
	#navigarza_snow_pile {
		background-image: var(--navigarza-snow-svg-1920),
			radial-gradient(
				120% 60% at 50% -10%,
				rgba(251, 251, 251, 0.35) 0%,
				transparent 60%
			),
			linear-gradient(
				180deg,
				rgba(251, 251, 251, 0.5) 0%,
				rgba(161, 174, 255, 0.28) 40%,
				rgba(147, 152, 182, 0.44) 75%
			),
			linear-gradient(#fff, #f2f6ff);
	}
}
@media (min-width: 1800px) {
	#navigarza_snow_pile {
		background-image: var(--navigarza-snow-svg-2560),
			radial-gradient(
				120% 60% at 50% -10%,
				rgba(251, 251, 251, 0.35) 0%,
				transparent 60%
			),
			linear-gradient(
				180deg,
				rgba(251, 251, 251, 0.5) 0%,
				rgba(161, 174, 255, 0.28) 40%,
				rgba(147, 152, 182, 0.44) 75%
			),
			linear-gradient(#fff, #f2f6ff);
	}
}

/* ============================================
   B.4 SECCIÓN: Cascanueces SVG (overlay en Hero)
   ============================================ */

/* El contenedor de la imagen del hero será el referente del absolute */
.navigarza_hero_media {
	position: relative;
}

/* Estilos base (mobile-first) */
.navigarza_nutcracker {
	position: absolute;
	z-index: 5;
	pointer-events: none;
	opacity: 0.98;
	transform-origin: 50% 100%;
	filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.45));
	/* Valores solicitados para < 860px: queda sobre la imagen */
	left: 8px;
	bottom: 250px;
	width: 220px;
	height: auto;
}

/* Ajuste fluido opcional en móviles pequeños: 
   se adapta entre 160px y 220px según el ancho de la pantalla */
@media (max-width: 859px) {
	.navigarza_nutcracker {
		width: clamp(30px, 25vw, 220px);
		bottom: 260px; /* un poco menos para pantallas muy bajas */
	}
}

/* Escritorio (>= 860px): tamaño fijo 120px y al lado izquierdo */
@media (min-width: 860px) {
	.navigarza_nutcracker {
		width: 120px; /* tamaño fijo solicitado */
		left: 8px; /* lado izquierdo */
		right: auto;
		bottom: 12px; /* pegado a la base de la imagen; ajusta si quieres más separación */
	}
}
.navigarza_nav {
	color: #fff;
}