/**
 * Expo Tequila & Mezcal - Estilos globales
 * Tipografía: Montserrat (cuerpo), Playfair Display (títulos)
 * Paleta: blanco, acentos turquesa/rosado, dorado
 */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&family=Rye&display=swap');

/* Smooth scroll y evitar barra blanca en móvil */
html {
	scroll-behavior: smooth;
	width: 100%;
	overflow-x: hidden;
}

.extm-root,
.extm-root * {
	box-sizing: border-box;
}

.extm-root {
	width: 100%;
	overflow-x: hidden;
	--extm-font-sans: 'Montserrat', sans-serif;
	--extm-font-serif: 'Playfair Display', serif;
	--extm-white: #ffffff;
	--extm-dark: #0f0f14;
	--extm-dark-soft: #1a1a24;
	--extm-accent-pink: #e8b4bc;
	--extm-accent-teal: #5ec8c4;
	--extm-rosa-mexicano: #E4007C; /* Botones de compra (boletos) */
	--extm-gold: #c9a962;
	--extm-gradient-accent: linear-gradient(135deg, var(--extm-accent-teal) 0%, var(--extm-accent-pink) 100%);
	font-family: var(--extm-font-sans);
	color: var(--extm-white);
}

.extm-root .extm-font-serif {
	font-family: var(--extm-font-serif);
}

/* Early Bird urgency banner (hero top) - usado en otras secciones */
.extm-early-bird-banner {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
	text-align: center;
	padding: 0.5rem 1rem;
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	background: linear-gradient(90deg, var(--extm-rosa-mexicano) 0%, #c4006b 100%);
	color: #fff;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
@media (max-width: 480px) {
	.extm-early-bird-banner {
		font-size: 0.8rem;
		padding: 0.45rem 0.75rem;
	}
}

/* Early Bird + countdown debajo de botones en hero */
.extm-early-bird-hero {
	position: relative;
	z-index: 1;
	text-align: center;
	margin-top: 2rem;
}
.extm-early-bird-hero__text {
	margin: 0 0 0.5rem;
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--extm-white);
}
.extm-early-bird-hero__highlight {
	color: #ffd93d;
	text-shadow: 0 0 12px rgba(255, 217, 61, 0.5);
}
.extm-early-bird-hero__countdown {
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--extm-rosa-mexicano);
	text-shadow: 0 0 10px rgba(228, 0, 124, 0.4);
}
.extm-early-bird-hero__countdown .extm-countdown__days,
.extm-early-bird-hero__countdown .extm-countdown__hours,
.extm-early-bird-hero__countdown .extm-countdown__mins,
.extm-early-bird-hero__countdown .extm-countdown__secs {
	color: var(--extm-rosa-mexicano);
}
.extm-early-bird-hero__countdown .extm-countdown__sep {
	margin: 0 0.35rem;
	opacity: 0.8;
	color: var(--extm-white);
}
.extm-early-bird-hero__countdown .extm-countdown__label-days,
.extm-early-bird-hero__countdown .extm-countdown__label-hours,
.extm-early-bird-hero__countdown .extm-countdown__label-mins,
.extm-early-bird-hero__countdown .extm-countdown__label-secs {
	opacity: 0.9;
}
@media (max-width: 480px) {
	.extm-early-bird-hero { margin-top: 1.5rem; }
	.extm-early-bird-hero__text { font-size: 0.82rem; }
	.extm-early-bird-hero__countdown { font-size: 0.85rem; }
}

/* Sticky CTA Bar */
.extm-cta-bar {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 9999;
	background: rgba(15, 15, 20, 0.97);
	backdrop-filter: blur(12px);
	border-top: 1px solid rgba(255,255,255,0.1);
	padding: 0.75rem 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translateY(100%);
	transition: transform 0.3s ease;
}

.extm-cta-bar.is-visible {
	transform: translateY(0);
}

@media (min-width: 769px) {
	.extm-cta-bar {
		bottom: 0;
		border-top: 1px solid rgba(255,255,255,0.1);
	}
}

.extm-cta-bar__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--extm-font-sans);
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0.05em;
	text-decoration: none;
	padding: 0.875rem 2rem;
	border-radius: 8px;
	border: none;
	cursor: pointer;
	transition: opacity 0.2s, transform 0.15s ease-out;
	background: var(--extm-rosa-mexicano);
	color: var(--extm-white);
	transform: translateZ(0);
}

.extm-cta-bar__btn:hover {
	opacity: 0.95;
	transform: translateZ(0) scale(1.02);
	color: var(--extm-white);
}

/* Language switcher - banderas México 🇲🇽 y USA 🇺🇸 - siempre habilitados */
.extm-lang-switcher {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-size: 1.25rem;
	line-height: 1;
	pointer-events: auto;
}
.extm-lang-switcher .extm-lang-link {
	color: inherit;
	opacity: 0.8;
	text-decoration: none;
	pointer-events: auto;
	cursor: pointer;
}
.extm-lang-switcher .extm-lang-link:hover {
	opacity: 1;
	text-decoration: underline;
}
.extm-lang-switcher .extm-lang-current {
	opacity: 1;
}
.extm-header__lang {
	margin-right: 1rem;
	pointer-events: auto;
}

/* ==========================================================================
   Dallas / Houston — Z-index y hover (evitar que se queden "pegados")
   ========================================================================== */

.extm-dallas-root,
.extm-houston-root {
	position: relative;
	z-index: 1;
	isolation: isolate;
}

/* Hero: contenido encima del fondo */
.extm-city-hero {
	isolation: isolate;
}
.extm-city-hero__title,
.extm-city-hero__meta,
.extm-city-hero__cta {
	position: relative;
	z-index: 2;
}

/* Hero fijo al scroll: por debajo del sticky bar (9999) y header (1000) */
.extm-city-hero--fixed {
	z-index: 100;
	pointer-events: auto;
}

/* Secciones de contenido: debajo del hero cuando está fijo */
.extm-city-section {
	position: relative;
	z-index: 1;
}

/* CTAs y enlaces: contexto limpio para evitar hover stuck */
.extm-city-hero__cta,
.extm-city-final__cta,
.extm-venue__link,
.extm-catrina__cta {
	position: relative;
	z-index: 1;
	display: inline-flex;
	transform: translateZ(0); /* capa GPU estable */
}
/* Hover sin scale exagerado — reduce el efecto "stuck" */
.extm-city-hero__cta:hover,
.extm-city-final__cta:hover {
	transform: translateZ(0) scale(1.02);
}
.extm-cta-bar__btn:hover {
	transform: translateZ(0) scale(1.02);
}