/* ==========================================================================
   Tour Estudiantil — Demo Home
   Paleta e identidad: ver CLAUDE.md sección 4 (colores extraídos del logo)
   ========================================================================== */

:root {
  --bg: #0C0E12;
  --bg-alt: #12151b;
  --surface: #171b22;
  --surface-2: #1d222b;
  --border: rgba(255,255,255,0.09);

  --orange: #F2621B;
  --yellow: #F5B01A;
  --cyan: #19C1F3;
  --pink: #FF3D8E;
  --white: #FFFFFF;
  --light: #F7F8FA;

  --text: #F7F8FA;
  --text-muted: #9AA1AE;

  --gradient-cta: linear-gradient(90deg, var(--orange), var(--yellow));
  --gradient-text: linear-gradient(90deg, var(--yellow) 0%, var(--orange) 32%, var(--pink) 64%, var(--cyan) 100%);

  --font-display: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 28px;

  --ease: cubic-bezier(.22,1,.36,1);
  --header-h: 76px;
  --quicknav-h: 0px;
}

@media (max-width: 960px) {
  :root { --quicknav-h: 54px; }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--quicknav-h)); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0 0 .5em; line-height: 1.18; }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 1000;
  background: var(--yellow); color: #14161a; padding: 10px 16px;
  border-radius: 8px; font-weight: 600; transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }

.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; }

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: 999px; cursor: pointer;
  font-weight: 600; font-size: 15px; padding: 13px 24px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
  white-space: nowrap;
}
.btn[disabled] { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn svg { transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: scale(.97); }
.btn--gradient { background: var(--gradient-cta); color: #17110a; box-shadow: 0 8px 24px -8px rgba(242,98,27,.55); }
.btn--gradient:hover { box-shadow: 0 12px 32px -8px rgba(242,98,27,.75); transform: translateY(-2px); }
.btn--ghost { background: rgba(255,255,255,.08); color: var(--white); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.16); }
.btn--ghost:hover { background: rgba(255,255,255,.15); transform: translateY(-2px); }
.btn--outline { background: transparent; color: var(--text); border: 1.5px solid var(--border); }
.btn--outline:hover { border-color: var(--cyan); color: var(--cyan); }
.btn--dark { background: #0C0E12; color: var(--white); }
.btn--dark:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -8px rgba(0,0,0,.5); }
.btn--sm { padding: 10px 18px; font-size: 13.5px; }
.btn--lg { padding: 16px 30px; font-size: 16px; }

.link-cta {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: none;
  color: var(--cyan); font-weight: 600; font-size: 14px; cursor: pointer; padding: 0;
  transition: gap .2s var(--ease), color .2s var(--ease);
}
.link-cta svg { transition: transform .2s var(--ease); }
.link-cta:hover { gap: 10px; }
.link-cta:hover svg { transform: translateX(2px); }

.text-gradient {
  background: var(--gradient-text);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradientShift 7s ease-in-out infinite;
}
@keyframes gradientShift {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}

.eyebrow {
  display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--orange); margin-bottom: 12px;
}
.eyebrow--light { color: #ffd9a8; }

.tag {
  display: inline-block; font-size: 12px; font-weight: 700; padding: 5px 12px;
  border-radius: 999px; letter-spacing: .02em;
}
.tag--orange { background: rgba(242,98,27,.16); color: #ff9455; }
.tag--yellow { background: rgba(245,176,26,.16); color: #ffcc55; }
.tag--cyan   { background: rgba(25,193,243,.14); color: #56d4fb; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 200; height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(12,14,18,.55);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.site-header.is-scrolled { background: rgba(12,14,18,.88); border-color: var(--border); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand__logo { height: 46px; width: auto; }

.nav__list { display: flex; align-items: center; gap: 26px; flex-wrap: nowrap; }
.nav__link {
  position: relative; font-size: 14px; font-weight: 500; color: var(--text-muted);
  padding: 6px 2px; white-space: nowrap; transition: color .2s var(--ease);
}
.nav__link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--gradient-cta); transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease);
}
.nav__link:hover { color: var(--white); }
.nav__link.is-active { color: var(--orange); font-weight: 700; }
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }

/* Barra de secciones deslizable (solo mobile, ver media query) */
.mobile-quicknav {
  display: none;
  position: fixed; left: 0; right: 0; top: var(--header-h); z-index: 190;
  height: var(--quicknav-h);
  align-items: center; gap: 10px;
  padding: 0 16px;
  background: rgba(12,14,18,.92); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.mobile-quicknav::-webkit-scrollbar { display: none; }
.mobile-quicknav__item {
  flex: 0 0 auto; scroll-snap-align: start;
  padding: 8px 16px; border-radius: 999px; white-space: nowrap;
  background: rgba(255,255,255,.06); border: 1px solid var(--border);
  color: var(--text-muted); font-size: 13.5px; font-weight: 600;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.mobile-quicknav__item.is-active {
  background: var(--gradient-cta); color: #17110a; border-color: transparent;
}

/* ---------- Hero ---------- */
.hero {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start; overflow: hidden;
  /* El despeje del header+quicknav ahora lo da el banner superior global (.ad-slot--global-top),
     que queda justo antes de .hero en el flujo — ya no hace falta repetirlo aquí.
     Tampoco fuerza min-height:100svh: el alto lo da su propio contenido, así la sección
     de Noticias sube en vez de dejar un vacío grande de video de fondo sin nada encima. */
}
/* fixed (no absolute): el video/canvas queda anclado al viewport y sigue visible detrás
   del contenido mientras se hace scroll, en vez de desaparecer junto con el hero */
.hero__media { position: fixed; inset: 0; z-index: -1; background: #0C0E12; }
.hero__video, .hero__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.hero__video { opacity: .55; }
.hero__canvas { z-index: -1; }
.hero__overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 55% at 50% 20%, rgba(242,98,27,.22), transparent 65%),
    radial-gradient(45% 45% at 85% 75%, rgba(25,193,243,.18), transparent 65%),
    linear-gradient(180deg, rgba(12,14,18,.35) 0%, rgba(12,14,18,.65) 55%, #0C0E12 100%);
}

.hero__content {
  position: relative; z-index: 2; text-align: center; padding: 70px 24px 40px;
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%;
}
.badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 12px;
  border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(8px); font-size: 13px; font-weight: 600; color: var(--light); margin-bottom: 26px;
}
.badge__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 0 rgba(245,176,26,.6); animation: pulse 2s infinite; }
a.badge { text-decoration: none; transition: background .2s var(--ease), border-color .2s var(--ease); }
a.badge:hover { background: rgba(255,255,255,.14); border-color: rgba(245,176,26,.5); }
.badge--premio {
  position: relative; padding: 6px 40px 6px 6px; gap: 20px; max-width: 760px;
  font-size: 17px; font-weight: 700; line-height: 1.35; overflow: visible;
}
.badge__premio-icon { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
/* Cinta de la bandera colombiana atravesando la esquina superior derecha de la insignia,
   como una banda de "condecoración" — no es un ícono chico en la fila, es un adorno de
   esquina posicionado aparte del flujo (position:absolute) */
.badge__premio-flag {
  position: absolute; top: -16px; right: -14px; z-index: 2;
  width: 100px; height: 64px; border-radius: 6px; overflow: hidden;
  display: flex; flex-direction: column; transform: rotate(40deg);
  box-shadow: 0 4px 12px rgba(0,0,0,.5); border: 2px solid rgba(255,255,255,.35);
}
.badge__premio-flag span:nth-child(1) { background: #FCD116; flex: 2; }
.badge__premio-flag span:nth-child(2) { background: #003893; flex: 1; }
.badge__premio-flag span:nth-child(3) { background: #CE1126; flex: 1; }
@media (max-width: 640px) {
  .badge--premio { padding: 5px 44px 5px 5px; gap: 14px; font-size: 14px; max-width: 100%; }
  .badge__premio-icon { width: 92px; height: 92px; }
  .badge__premio-flag { width: 56px; height: 36px; top: -8px; right: -10px; }
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(245,176,26,.55); }
  70% { box-shadow: 0 0 0 9px rgba(245,176,26,0); }
  100% { box-shadow: 0 0 0 0 rgba(245,176,26,0); }
}

.hero__title {
  font-size: clamp(2.6rem, 7vw, 5rem); font-weight: 800; letter-spacing: -.03em;
  color: var(--white); max-width: 16ch; margin-inline: auto;
  text-shadow: 0 0 50px rgba(242,98,27,.35), 0 0 90px rgba(255,61,142,.2);
}
.hero__subtitle {
  font-size: clamp(1rem, 1.6vw, 1.2rem); color: var(--text-muted);
  max-width: 52ch; margin: 22px auto 34px;
}
.hero__actions { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; margin-bottom: 56px; }

.hero__stats { display: flex; justify-content: center; gap: clamp(20px, 5vw, 56px); flex-wrap: wrap; }
.hero__stats--section { gap: clamp(28px, 6vw, 72px); }
.hero__stats--section .stat__value, .hero__stats--section .stat__suffix { font-size: clamp(2rem, 4vw, 3rem); }
.stat { display: flex; flex-direction: column; align-items: center; min-width: 90px; }
.stat__value, .stat__suffix {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--white);
}
.stat__label { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; letter-spacing: .02em; }

/* ---------- Sections ---------- */
/* fondo sólido explícito: el hero usa un video de fondo con position:fixed que sigue
   visible al hacer scroll, así que cada sección necesita su propio fondo opaco para taparlo */
.section { padding: 108px 0; background: var(--bg); }

/* Secciones donde el video del hero debe seguir viéndose de fondo mientras se hace scroll
   (Noticias, Artistas, Para artistas) — se tapa recién a partir de "Redes del Tour". */
.section--video-bg { background: transparent; position: relative; }
.section--video-bg::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(12,14,18,.35), rgba(12,14,18,.55));
}
.section--video-bg > .container { position: relative; z-index: 1; }
.section--muted { background: var(--bg-alt); }
.section__head { max-width: 640px; margin: 0 auto 52px; text-align: center; }
.section__head h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); color: var(--white); }
.section__head p { color: var(--text-muted); font-size: 1.02rem; }
.section__foot { text-align: center; margin-top: 44px; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--delay, 0ms); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Cards ---------- */
.grid { display: grid; gap: 26px; }
.grid--news { grid-template-columns: repeat(3, 1fr); }

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.card:hover { transform: translateY(-6px); border-color: rgba(255,255,255,.18); box-shadow: 0 20px 40px -18px rgba(0,0,0,.55); }

/* ---------- Event list (fila simple, sin espacio de imagen) ---------- */
.event-list { display: flex; flex-direction: column; gap: 14px; }
.event-row {
  display: flex; align-items: center; gap: 20px; padding: 18px 22px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.event-row:hover { transform: translateX(4px); border-color: rgba(255,255,255,.18); }
.event-row__date {
  flex-shrink: 0; width: 62px; text-align: center; display: flex; flex-direction: column;
  background: var(--surface-2); border-radius: 10px; padding: 8px 0;
}
.event-row__day { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: var(--white); line-height: 1; }
.event-row__month { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.event-row__info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.event-row__title { font-weight: 700; color: var(--white); font-size: 1rem; }
.event-row__venue { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 13.5px; white-space: nowrap; }
.event-row__venue svg { flex-shrink: 0; }
.event-row__cta { flex-shrink: 0; display: flex; align-items: center; gap: 6px; color: var(--cyan); font-weight: 600; font-size: 14px; white-space: nowrap; }

.card--news { padding: 22px; }
.card--news h3 { font-size: 1.05rem; color: var(--white); margin: 12px 0; }
.card--news__img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
  border-radius: var(--radius); margin-bottom: 18px;
}
.card--news__meta { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--text-muted); }

.card--guide { padding: 22px; display: flex; flex-direction: column; align-items: flex-start; }
.card--guide h3 { font-size: 1.02rem; color: var(--white); margin: 12px 0 8px; }
.card--guide__resumen { color: var(--text-muted); font-size: 13.5px; margin: 0 0 18px; }
.grid--guides { grid-template-columns: repeat(4, 1fr); margin-top: 44px; }
/* Página Marcas: solo 3 guías — con 4 columnas quedaba un hueco vacío a la derecha. Los
   breakpoints de abajo (2 y 1 columna) siguen aplicando igual, vienen después en el archivo. */
.grid--guides-3 { grid-template-columns: repeat(3, 1fr); }

/* ---------- Artists ---------- */
.artist-chip__avatar {
  width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 22px; color: #17110a;
  background: var(--gradient-cta); overflow: hidden;
}
.artist-chip__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* ---------- Coverflow de artistas (home + página Artistas) ----------
   El artista activo se ve grande y a color; los vecinos quedan chicos, en escala de
   grises y "en sombra"; avanza solo cada 5s (ver main.js) o con las flechas/puntos. */
.coverflow { position: relative; }
.coverflow__viewport { position: relative; overflow: hidden; padding: 10px 0 8px; }
.coverflow__track { display: flex; align-items: center; transition: transform .6s var(--ease); will-change: transform; }
.coverflow__item {
  flex: 0 0 auto; width: 240px; margin: 0 14px;
  transform: scale(.78); opacity: .4; filter: grayscale(1) brightness(.5);
  transition: transform .6s var(--ease), opacity .6s var(--ease), filter .6s var(--ease);
}
.coverflow__item.is-adjacent { transform: scale(.88); opacity: .65; filter: grayscale(.75) brightness(.65); }
.coverflow__item.is-active { transform: scale(1.12); opacity: 1; filter: none; z-index: 2; }
/* Tarjetas con más contenido de texto (noticias) necesitan un poco más de ancho que las de artista */
.coverflow__item--wide { width: 320px; }

.coverflow__arrow {
  position: absolute; top: 42%; transform: translateY(-50%); z-index: 5;
  width: 44px; height: 44px; border-radius: 50%; background: var(--gradient-cta); color: #17110a;
  display: flex; align-items: center; justify-content: center; border: none; cursor: pointer;
  box-shadow: 0 8px 24px -8px rgba(242,98,27,.6); transition: transform .2s var(--ease);
}
.coverflow__arrow:hover { transform: translateY(-50%) scale(1.08); }
.coverflow__arrow--prev { left: 4px; }
.coverflow__arrow--next { right: 4px; }

.coverflow__dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.coverflow__dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--border); border: none; padding: 0; cursor: pointer;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.coverflow__dot.is-active { background: var(--orange); transform: scale(1.35); }

@media (max-width: 640px) {
  .coverflow__item { width: 190px; margin: 0 10px; }
  .coverflow__item--wide { width: 250px; }
}

.artist-showcase-card {
  overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.artist-showcase-card__media {
  position: relative; display: block; aspect-ratio: 3 / 4; background: #0C0E12; overflow: hidden;
}
.artist-showcase-card__media img,
.artist-showcase-card__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.artist-showcase-card__fallback {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; color: #17110a; background: var(--gradient-cta);
}
.artist-showcase-card__badge {
  position: absolute; top: 10px; right: 10px; z-index: 1; display: flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px; background: rgba(6,7,10,.65); backdrop-filter: blur(4px);
  color: var(--white); font-size: 11px; font-weight: 700;
}
.artist-showcase-card__body { padding: 16px 18px 18px; }
.artist-showcase-card__body h3 { margin: 0 0 12px; font-size: 1.05rem; }
.artist-showcase-card__body h3 a { color: var(--white); text-decoration: none; }
.artist-showcase-card__body h3 a:hover { color: var(--orange); }
.artist-showcase-card__socials { display: flex; gap: 8px; flex-wrap: wrap; }
.artist-showcase-card__socials a {
  width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.artist-showcase-card__socials a:hover { color: var(--cyan); border-color: var(--cyan); }

/* ---------- Artist intro (lista "imagina esto") ---------- */
.artist-intro { max-width: 560px; margin: 0 auto 48px; }
.artist-intro p { color: var(--white); font-weight: 700; margin-bottom: 14px; }
.artist-intro .brand-pitch__list { margin-bottom: 0; }

/* ---------- Artist CTA (postúlate) ---------- */
.artist-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(242,98,27,.12), rgba(25,193,243,.10)), var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 40px; margin-bottom: 48px;
}
.artist-cta h3 { color: var(--white); font-size: 1.35rem; }
.artist-cta p { color: var(--text-muted); max-width: 46ch; margin: 0; }

/* ---------- Brand pitch (marcas aliadas) ---------- */
.brand-pitch {
  margin-top: 56px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 44px;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center;
}
.brand-pitch__text h3 { color: var(--white); font-size: 1.5rem; margin-top: 8px; }
.brand-pitch__text p { color: var(--text-muted); margin-bottom: 24px; }
.brand-pitch__list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 26px; }
.brand-pitch__list li {
  display: flex; align-items: flex-start; gap: 10px; color: var(--text); font-size: 14.5px;
}
.brand-pitch__list svg { flex-shrink: 0; color: var(--cyan); margin-top: 2px; }

/* ---------- Lead forms (marcas / instituciones / artistas) ---------- */
.lead-form input,
.lead-form select,
.lead-form textarea {
  width: 100%; margin-bottom: 12px; padding: 12px 16px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--bg); color: var(--white);
  font-family: inherit; font-size: 14.5px;
}
.lead-form select:invalid { color: var(--text-muted); }
.lead-form textarea { min-height: 100px; resize: vertical; }
.lead-form__actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 6px; }
.lead-form__whatsapp {
  display: inline-flex; align-items: center; gap: 8px; color: var(--cyan); font-weight: 600; font-size: 14px;
}
.lead-form__whatsapp svg { flex-shrink: 0; }
.lead-form__whatsapp:hover { text-decoration: underline; }
.lead-form__success {
  background: rgba(43,217,124,.08); border: 1px solid rgba(43,217,124,.35); border-radius: var(--radius);
  padding: 22px;
}
.lead-form__success p { color: var(--text); font-size: 14.5px; margin: 0 0 14px; }
.lead-form__success .lead-form__whatsapp { font-size: 15px; }

/* ---------- Bloque destacado de WhatsApp (instituciones) ---------- */
.whatsapp-highlight {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 22px; padding: 20px 22px; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(37,211,102,.16), rgba(37,211,102,.05));
  border: 1.5px solid rgba(37,211,102,.4);
  text-decoration: none; transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.whatsapp-highlight:hover { transform: translateY(-3px); box-shadow: 0 14px 34px -12px rgba(37,211,102,.5); }
.whatsapp-highlight__icon {
  flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #25D366; color: #06210f;
}
.whatsapp-highlight__text { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 200px; }
.whatsapp-highlight__text strong { color: var(--white); font-size: 1.05rem; }
.whatsapp-highlight__text span { color: var(--text-muted); font-size: 13.5px; }
.whatsapp-highlight__cta {
  flex-shrink: 0; padding: 12px 20px; border-radius: 999px; font-weight: 700; font-size: 14.5px;
  background: #25D366; color: #06210f; white-space: nowrap;
}

/* ---------- Media partner badge (La Mega) ---------- */
.media-partner {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 auto 36px; padding: 10px 20px;
  background: rgba(25,193,243,.1); border: 1px solid rgba(25,193,243,.3); border-radius: 999px;
  color: var(--text); font-size: 14px; max-width: 100%;
}
.media-partner svg { flex-shrink: 0; color: var(--cyan); }
.media-partner strong { color: var(--cyan); }

/* ---------- Contest banner ---------- */
.contest-banner {
  background: var(--gradient-cta); margin: 0;
}
.contest-banner__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 30px;
  padding: 66px 24px; flex-wrap: wrap; color: #1b1408;
}
.contest-banner h2 { color: #17110a; font-size: clamp(1.5rem, 3vw, 2.1rem); max-width: 20ch; }
.contest-banner p { color: rgba(23,17,10,.75); max-width: 46ch; margin: 0; }

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 26px 0; margin-top: 40px; }
.marquee__track { display: flex; gap: 60px; width: max-content; animation: marquee 28s linear infinite; }
.marquee__item {
  font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--text-muted);
  white-space: nowrap; opacity: .7; display: flex; align-items: center; transition: opacity .2s var(--ease);
}
.marquee__item:hover { opacity: 1; }
/* Logos con fondo blanco (la mayoría no vienen transparentes) en una "placa" clara, igual que
   el patrón ya usado para logos de marca en otras partes del sitio — se ve como insignia
   intencional en vez de un recorte raro sobre el fondo oscuro. */
.marquee__logo { height: 68px; width: auto; max-width: 220px; object-fit: contain; background: #fff; border-radius: 10px; padding: 8px 14px; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Split ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.split__col {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 42px;
}
.split__col h2 { color: var(--white); font-size: 1.6rem; }
.split__col p { color: var(--text-muted); margin-bottom: 26px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--bg-alt); padding-top: 90px; border-top: 1px solid var(--border); }
.footer-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 44px; margin-bottom: 80px;
}
.footer-cta h2 { color: var(--white); font-size: 1.6rem; max-width: 18ch; }
.footer-cta p { color: var(--text-muted); max-width: 46ch; margin: 0; }
.footer-cta__form { display: flex; gap: 10px; flex-wrap: wrap; }
.footer-cta__form input {
  background: var(--bg); border: 1px solid var(--border); border-radius: 999px;
  padding: 13px 20px; color: var(--white); font-size: 14.5px; min-width: 240px;
}
.footer-cta__form input:focus { outline: none; border-color: var(--cyan); }

.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 50px; }
.footer-logo { height: 40px; margin-bottom: 16px; }
.footer-col p { color: var(--text-muted); font-size: 14px; max-width: 32ch; }
.footer-col h4 { color: var(--white); font-size: 14px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 18px; }
.footer-col ul { display: flex; flex-direction: column; gap: 12px; }
.footer-col a { color: var(--text-muted); font-size: 14.5px; transition: color .2s var(--ease); }
.footer-col a:hover { color: var(--cyan); }

.social-row { display: flex; gap: 12px; margin-top: 20px; }
.social-row a {
  width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted);
  transition: color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.social-row a:hover { color: var(--cyan); border-color: var(--cyan); transform: translateY(-3px); }

.footer-bottom {
  border-top: 1px solid var(--border); padding: 24px 0 34px;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 13px; color: var(--text-muted);
}
.demo-tag {
  background: rgba(245,176,26,.14); color: #ffcc55; padding: 3px 10px; border-radius: 999px;
  font-weight: 600; margin-left: 8px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
}
.footer-bottom .credits { font-size: 11.5px; }
.footer-bottom .credits a { color: var(--cyan); font-weight: 600; }

/* ---------- WhatsApp FAB ---------- */
.whatsapp-fab {
  position: fixed; right: 20px; bottom: 22px; z-index: 220;
  display: flex; align-items: center; gap: 8px;
  background: #25D366; color: #06210f; padding: 11px 16px 11px 11px;
  border-radius: 999px; font-weight: 700; font-size: 13px;
  box-shadow: 0 10px 28px -8px rgba(37,211,102,.65);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.whatsapp-fab:hover { transform: translateY(-3px); box-shadow: 0 14px 34px -8px rgba(37,211,102,.8); }
.whatsapp-fab__icon {
  position: relative; z-index: 1; flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: rgba(6,33,15,.12);
}
.whatsapp-fab__pulse {
  position: absolute; left: 11px; top: 11px; width: 26px; height: 26px; border-radius: 50%;
  background: #25D366; animation: whatsappPulse 2.4s ease-out infinite;
}
@keyframes whatsappPulse {
  0% { transform: scale(1); opacity: .55; }
  100% { transform: scale(2.1); opacity: 0; }
}
.whatsapp-fab__label { white-space: nowrap; }

/* ---------- Modal ---------- */
.modal[hidden] { display: none; }
.modal { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(6,7,10,.72); backdrop-filter: blur(6px); animation: fadeIn .25s var(--ease); }
.modal__panel {
  position: relative; z-index: 1; width: 100%; max-width: 400px; text-align: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 40px 32px 32px; animation: popIn .3s var(--ease);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.modal__close {
  position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.06); border: 1px solid var(--border); color: var(--text-muted);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.modal__close:hover { color: var(--white); border-color: var(--cyan); }
.modal__icon {
  width: 60px; height: 60px; border-radius: 50%; margin: 0 auto 18px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gradient-cta); color: #17110a;
}
.modal__panel h3 { color: var(--white); font-size: 1.3rem; }
.modal__panel p { color: var(--text-muted); font-size: 14.5px; margin-bottom: 26px; }
.modal__panel .btn { width: 100%; }

/* ---------- Flash messages ---------- */
.flash-message {
  max-width: 1240px; margin: 0 auto 24px; padding: 14px 20px; border-radius: var(--radius-sm);
  font-size: 14.5px; font-weight: 600;
}
.flash-message--success { background: rgba(37,211,102,.12); color: #4fe08a; border: 1px solid rgba(37,211,102,.3); }
.flash-message--error { background: rgba(242,98,27,.12); color: #ff9455; border: 1px solid rgba(242,98,27,.3); }

/* ---------- Ad banners (patrocinio) ---------- */
.ad-slot { margin-top: 40px; }
.ad-banner { display: block; border-radius: var(--radius); overflow: hidden; }
.ad-banner img { width: 100%; height: auto; display: block; border-radius: var(--radius); }
/* Los banners "intermedios" (home_after_noticias, marcas_page, noticias_page, artistas_page —
   cualquier .ad-slot simple, sin modificador) antes no tenían tope de alto: una imagen subida
   con proporciones más cuadradas/verticales se veía enorme comparada con el banner superior.
   Mismo alto máximo que .ad-slot--hero-full para que se vean del mismo tamaño. No afecta a
   .ad-slot--sidebar ni .ad-slot--hero(-full), que ya traen su propia regla más específica. */
.ad-slot .ad-banner img { max-height: 150px; object-fit: contain; }
.ad-banner--house {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  padding: 28px; border: 1.5px dashed var(--border); background: var(--surface);
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.ad-banner--house:hover { border-color: var(--cyan); transform: translateY(-2px); }
.ad-banner--house__label {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted);
}
.ad-banner--house__title { font-family: var(--font-display); font-weight: 700; color: var(--white); font-size: 1.1rem; }
.ad-banner--house__cta { color: var(--cyan); font-weight: 600; font-size: 14px; }

/* Banner "arriba" dentro del hero — necesita fondo propio porque va sobre el video */
.ad-slot--hero { margin-top: 0; margin-bottom: 28px; }
.ad-slot--hero .ad-banner--house {
  background: rgba(12,14,18,.55); backdrop-filter: blur(6px); padding: 18px 28px;
}
.ad-slot--hero .ad-banner img { max-height: 140px; width: auto; margin: 0 auto; }

/* Banner "arriba" a todo lo ancho de la pantalla (edge-to-edge), no limitado al .container.
   .hero ya tiene su propio padding-top que despeja el header fijo, así que aquí solo
   necesitamos un pequeño respiro, no sumar el offset del header otra vez. */
.ad-slot--hero-full {
  position: relative; z-index: 2; align-self: stretch; width: 100%;
  margin-top: 0; margin-bottom: 20px;
}
/* Ahora es el primer elemento del flujo en TODAS las páginas (antes solo vivía dentro
   del .hero del home) — necesita despejar el header fijo + la barra deslizable de mobile. */
.ad-slot--global-top { margin-top: calc(var(--header-h) + var(--quicknav-h)); }
.ad-slot--hero-full .ad-banner {
  border-radius: 0; background: #0C0E12;
  border-bottom: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 12px 28px -12px rgba(0,0,0,.55);
}
.ad-slot--hero-full .ad-banner img {
  width: 100%; max-height: 150px; object-fit: contain; display: block; border-radius: 0;
}
.ad-slot--hero-full .ad-banner--house {
  border-radius: 0; background: rgba(12,14,18,.55); backdrop-filter: blur(6px); padding: 16px 24px; border: none;
  border-top: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1);
}

/* Banners laterales (pautas/campañas) — ver .page-rails en partials/header y footer del
   layout público. Antes eran position:fixed superpuestos sobre el contenido, y solo cabían
   sin encimarse desde anchos muy específicos (~1560px+): en la práctica, cualquier laptop con
   escalado de Windows (125%/150%, muy común) reportaba un ancho efectivo por debajo de ese
   umbral y los banners simplemente no aparecían nunca. Ahora .page-rails es un layout de
   verdad (flex de 3 columnas: banner | contenido | banner), así que el contenido central
   (.container, max-width 1240px dentro de <main>) SIEMPRE deja el espacio real que los
   banners necesitan — se angostan en vez de taparse — y los banners se ven siempre en
   escritorio, en cualquier ancho, sin importar el zoom. */
.page-rails { display: block; }
.ad-slot--sidebar-col { display: none; }

@media (min-width: 961px) {
  .page-rails { display: flex; align-items: flex-start; gap: 20px; padding: 0 20px; }
  .page-rails > main { flex: 1 1 0; min-width: 0; }

  .ad-slot--sidebar-col {
    /* flex-direction:column sin forzar height al viewport: cada banner ocupa solo su alto
       natural (según su propia imagen), así los dos quedan pegados en vez de separados por
       un hueco vacío — antes flex:1 1 0 repartía TODO el alto de pantalla entre los dos,
       dejando la imagen "flotando" (contain) con espacio en blanco arriba/abajo. */
    display: flex; flex: 0 0 200px; width: 200px; flex-direction: column; gap: 16px;
    position: sticky; top: calc(var(--header-h) + 20px);
    max-height: calc(100vh - var(--header-h) - 40px); overflow: hidden;
  }
}
.ad-slot--sidebar { flex: 0 0 auto; border-radius: var(--radius-lg); }
.ad-slot--sidebar .ad-banner--house { padding: 22px 18px; }
.ad-slot--sidebar .ad-banner--house__title { font-size: 1.05rem; }
.ad-slot--sidebar .ad-banner img { border-radius: var(--radius); }

/* El contenido (1240px de container) queda chico en relación a la pantalla en cualquier
   laptop/monitor normal — comparado con sitios aliados (ej. lamega.com.co) el texto se ve
   visiblemente más chico. Ya no hay conflicto con los banners laterales (son layout real,
   arriba), así que el zoom puede subir de forma simple y pareja en toda la página. */
@media (min-width: 1280px) {
  body { zoom: 1.10; }
}
@media (min-width: 1440px) {
  body { zoom: 1.14; }
}
@media (min-width: 1600px) {
  body { zoom: 1.18; }
}
@media (min-width: 1800px) {
  body { zoom: 1.22; }
}
@media (min-width: 2200px) {
  body { zoom: 1.35; }
}

/* Banner invasivo — overlay de pantalla completa, se muestra una vez por sesión */
.ad-interstitial[hidden] { display: none; }
.ad-interstitial { position: fixed; inset: 0; z-index: 600; display: flex; align-items: center; justify-content: center; padding: 20px; }
.ad-interstitial__backdrop { position: absolute; inset: 0; background: rgba(6,7,10,.8); backdrop-filter: blur(6px); }
.ad-interstitial__panel {
  position: relative; z-index: 1; max-width: 480px; width: 100%;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 20px; animation: popIn .3s var(--ease);
}
.ad-interstitial__close {
  position: absolute; top: -14px; right: -14px; width: 36px; height: 36px; border-radius: 50%;
  background: var(--white); color: #14171d; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.ad-banner--interstitial-img img { width: 100%; border-radius: var(--radius); }

/* ---------- Redes del Tour ---------- */
.redes-profile {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 20px 24px; margin-bottom: 32px;
}
.redes-profile__avatar {
  width: 52px; height: 52px; border-radius: 50%; object-fit: cover;
  background: var(--white); border: 2px solid var(--border); flex-shrink: 0;
}
.redes-profile__info { display: flex; flex-direction: column; gap: 4px; margin-right: auto; }
.redes-profile__name { font-family: var(--font-display); font-weight: 700; color: var(--white); font-size: 1.05rem; }
.redes-profile__handles { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; color: var(--text-muted); font-size: 13.5px; }
.redes-profile__handles a { display: inline-flex; align-items: center; gap: 5px; color: var(--text); font-weight: 600; transition: color .2s var(--ease); }
.redes-profile__handles a:hover { color: var(--cyan); }
.redes-profile__extra { display: flex; align-items: center; gap: 10px; }
.redes-profile__follow-label { font-weight: 700; color: var(--white); font-size: 14px; margin-right: 2px; }
.redes-profile__extra a {
  width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-muted);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.redes-profile__extra a:hover { color: var(--cyan); border-color: var(--cyan); }

.video-carousel { display: flex; gap: 16px; overflow-x: auto; padding: 6px 2px 14px; scrollbar-width: thin; }
/* Igual que .video-carousel pero en cuadrícula que se ajusta sola — para la página dedicada
   /redes, donde se muestran muchos más videos a la vez en vez de una sola fila con scroll. */
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; padding: 6px 2px 14px; }
.video-grid .video-card { width: 100%; }
.video-card {
  position: relative; flex: 0 0 auto; width: 190px; aspect-ratio: 9 / 16; border-radius: var(--radius);
  overflow: hidden; background: linear-gradient(160deg, rgba(242,98,27,.55), rgba(25,193,243,.45)), var(--surface-2);
  border: 1px solid var(--border); color: var(--white);
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.video-card:hover { transform: translateY(-5px); border-color: var(--cyan); }
.video-card__badge {
  position: absolute; top: 10px; left: 10px; z-index: 1;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: 4px 9px; border-radius: 999px; background: rgba(12,14,18,.55); backdrop-filter: blur(4px);
}
.video-card__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.92); color: #14171d;
  display: flex; align-items: center; justify-content: center;
}
.video-card__caption {
  position: absolute; left: 0; right: 0; bottom: 34px; z-index: 1; padding: 0 12px;
  font-size: 12.5px; font-weight: 700; line-height: 1.3;
  text-shadow: 0 2px 6px rgba(0,0,0,.6);
}
.video-card__source {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: flex; align-items: center; gap: 6px; padding: 8px 12px;
  font-size: 11px; font-weight: 600; color: var(--light);
  background: linear-gradient(0deg, rgba(0,0,0,.75), transparent);
}

/* ---------- Embed de reel/video en noticias ---------- */
.social-embed { max-width: 360px; margin: 0 auto; }
/* TikTok/YouTube Shorts: iframe simple, se le fuerza proporción 9:16 a mano.
   Instagram (.social-embed--instagram) NO entra aquí: su propio embed.js ya calcula el
   tamaño real del video — forzarle una proporción por fuera es justo lo que lo hacía ver
   mal (video chico con franjas negras a los lados). */
.social-embed:not(.social-embed--instagram) iframe { width: 100%; aspect-ratio: 9 / 16; border-radius: var(--radius); border: none; }
.social-embed--instagram { overflow: hidden; border-radius: var(--radius); }
.social-embed--instagram iframe { border-radius: var(--radius) !important; }

/* ---------- Spotify embed ---------- */
.spotify-embed { border-radius: var(--radius-lg); overflow: hidden; }
.spotify-embed iframe { display: block; border-radius: var(--radius-lg); }

/* ---------- Casos de marca (página Marcas) — carrusel de reels, mismo patrón que
   Artistas/Noticias (.coverflow), con el reel de Instagram/TikTok/YouTube Shorts como
   protagonista y foto/inicial como respaldo si aún no hay reel cargado ---------- */
.brand-showcase-card {
  overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.brand-showcase-card .social-embed { max-width: none; margin: 0; }
.brand-showcase-card .social-embed:not(.social-embed--instagram) iframe { border-radius: 0; }
.brand-showcase-card .social-embed--instagram iframe { border-radius: 0 !important; }
.brand-showcase-card__media { position: relative; aspect-ratio: 9 / 16; background: #0C0E12; overflow: hidden; }
.brand-showcase-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand-showcase-card__body { padding: 16px 18px 18px; }
.brand-showcase-card__body h3 { margin: 0 0 8px; font-size: 1.05rem; color: var(--white); }
.brand-showcase-card__body p { margin: 0; font-size: 13.5px; color: var(--text-muted); line-height: 1.6; }

/* ---------- Video institucional (16:9, YouTube) ---------- */
.video-embed-16-9 { max-width: 800px; margin: 0 auto; border-radius: var(--radius-lg); overflow: hidden; background: #000; }
.video-embed-16-9 iframe { width: 100%; aspect-ratio: 16 / 9; border: none; display: block; }

/* ---------- Media de columna dividida (página Nosotros: foto de cofundadores / video) ---------- */
.split__media {
  border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); border: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.split__media > img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; display: block; }
.split__media-placeholder {
  flex: 1; min-height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; color: var(--text-muted); padding: 40px; text-align: center;
}
.split__media-caption { color: var(--white); font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; margin: 22px 22px 0; }
.split__media .video-embed-16-9 { margin: 16px 0 0; max-width: none; border-radius: 0; }

/* ---------- Pase VIP (página Concursos) ---------- */
.vip-pass__title {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 4vw, 2.1rem);
  text-align: center; color: var(--white); margin: 0 0 12px;
}
.vip-pass__subtitle { text-align: center; color: var(--text-muted); font-size: 14.5px; line-height: 1.6; margin: 0 0 28px; }

.vip-progress {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 16px 18px; margin-bottom: 24px;
}
.vip-progress__top { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--white); margin-bottom: 10px; }
.vip-progress__top span:last-child { color: var(--yellow); }
.vip-progress__track { height: 12px; border-radius: 20px; background: rgba(0,0,0,.35); overflow: hidden; }
.vip-progress__fill { height: 100%; width: 0; border-radius: 20px; background: var(--gradient-cta); transition: width .5s var(--ease); }

.vip-step-group { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: 20px 2px 8px; }
.vip-step {
  display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px; transition: background .25s var(--ease), border-color .25s var(--ease);
}
.vip-step__num {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.08); border: 1px solid var(--border); font-family: var(--font-display); font-weight: 800; color: var(--yellow);
}
.vip-step__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.vip-step__body strong { color: var(--white); font-size: 14.5px; }
.vip-step__body small { color: var(--text-muted); font-size: 12px; }
.vip-step__action { flex: 0 0 auto; }
.vip-step.is-done { background: rgba(43,217,124,.08); border-color: rgba(43,217,124,.35); }
.vip-step.is-done .vip-step__num { background: #2BD97C; border-color: #2BD97C; color: #17110a; }

/* Paso de "reseña de Google": no es una marca ni un artista, así que en vez del look
   "seguir esta cuenta" lleva un acento dorado con estrellas — se lee como un favor a Tour
   Estudiantil, no como un perfil social más de la lista. */
.vip-step--review {
  background: linear-gradient(135deg, rgba(245,176,26,.12), rgba(255,255,255,.02));
  border-color: rgba(245,176,26,.4);
}
.vip-step--review.is-done { background: rgba(43,217,124,.08); border-color: rgba(43,217,124,.35); }
.vip-step__num--stars { background: var(--gradient-cta); border-color: transparent; color: #17110a; font-size: 15px; }
.vip-step__stars { color: var(--yellow) !important; letter-spacing: .05em; }

.vip-wa-box {
  margin: 30px 0 20px; padding: 20px 18px; border-radius: var(--radius-lg); text-align: center;
  border: 2px dashed rgba(37,211,102,.5); background: rgba(37,211,102,.06);
}
.vip-wa-box__heading { font-family: var(--font-display); font-weight: 800; font-size: 14px; letter-spacing: .03em; color: #25D366; text-transform: uppercase; margin-bottom: 4px; }
.vip-wa-box__sub { font-size: 12.5px; color: var(--text-muted); margin: 0 0 16px; }
.vip-wa-btn {
  display: block; padding: 15px 18px; border-radius: 999px; font-family: var(--font-display); font-weight: 800;
  font-size: 14px; text-decoration: none; text-align: center; background: rgba(255,255,255,.08); color: var(--text-muted);
  pointer-events: none; transition: all .3s var(--ease);
}
.vip-wa-btn.is-enabled { background: #25D366; color: #06210f; pointer-events: all; animation: vipWaPulse 1.6s infinite; }
@keyframes vipWaPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }

.vip-pass__extra { display: flex; flex-direction: column; gap: 10px; align-items: center; margin-top: 8px; }

/* ---------- Registro por QR (campañas ocultas, /registro/{token}) ---------- */
.qr-steps { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.qr-form { margin-top: 4px; }
.qr-video { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 8px; }
.qr-video > * { width: 100%; }
.qr-video .social-embed { width: 100%; }
.qr-video__cta { justify-content: center; text-align: center; }
.qr-video__hint { color: var(--text-muted); font-size: 12px; line-height: 1.5; text-align: center; }
.lead-form .qr-check { display: flex; align-items: flex-start; gap: 10px; margin: 2px 0 14px; font-size: 13px; line-height: 1.5; color: var(--text-muted); cursor: pointer; }
.lead-form .qr-check input { width: auto; flex: 0 0 auto; margin: 3px 0 0; padding: 0; accent-color: var(--orange); }
.qr-success {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px;
  background: var(--surface); border: 1px solid rgba(43,217,124,.35); border-radius: var(--radius-lg); padding: 32px 22px;
}
.qr-success__icon {
  width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: #2BD97C; color: #17110a; font-size: 26px; font-weight: 800;
}
.qr-success h2 { margin: 0; font-family: var(--font-display); font-size: 1.4rem; color: var(--white); }
.qr-success p { margin: 0; color: var(--text-muted); font-size: 14.5px; line-height: 1.6; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .grid--guides { grid-template-columns: repeat(2, 1fr); }
  .brand-pitch { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .nav { display: none; }
  .mobile-quicknav { display: flex; }
  .split { grid-template-columns: 1fr; }
  .grid--news { grid-template-columns: 1fr; }
  .artist-cta { padding: 30px; }
  .brand-pitch { padding: 30px; }

  /* En Concursos, en mobile, el banner superior estorba antes de llegar al Pase VIP (lo
     primero que debe ver el visitante en esta página) */
  body.is-concursos .ad-slot--global-top { display: none !important; }
}
@media (max-width: 640px) {
  .grid--guides { grid-template-columns: 1fr; }
  .event-row { flex-wrap: wrap; }
  .event-row__cta { margin-left: 82px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-col--brand { grid-column: 1 / -1; }
  .footer-cta { flex-direction: column; align-items: flex-start; }
  .footer-cta__form { width: 100%; }
  .footer-cta__form input { flex: 1; min-width: 0; }
  .contest-banner__inner { text-align: center; justify-content: center; flex-direction: column; }
  .artist-cta { flex-direction: column; align-items: flex-start; }
  .hero__stats { gap: 24px 32px; }
  .whatsapp-fab { right: 14px; bottom: 18px; padding: 14px; }
  .whatsapp-fab__label { display: none; }
  .whatsapp-fab__pulse { left: 14px; top: 14px; }
}
@media (max-width: 420px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ---------- Juega y Participa (runner) ---------- */
.game-shell {
  background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px; margin-top: 28px;
}
.game-register p { color: var(--text-muted); margin: 0 0 14px; }
.game-register .field-row { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.game-register .field-row input {
  flex: 1; min-width: 180px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border);
  background: rgba(255,255,255,.04); color: var(--text); font-size: 14px;
}
.game-register__error { color: #ff6b6b; font-size: 13.5px; margin-top: 10px; }

.game-hud {
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; color: var(--text-muted); font-size: 13px;
  margin: 0 auto 10px; max-width: 420px; font-family: var(--font-display); font-weight: 600;
}
.game-hud strong { color: var(--white); font-size: 16px; }
.game-canvas-wrap { position: relative; max-width: 420px; margin: 0 auto; }
.game-canvas {
  width: 100%; height: auto; display: block; border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  border: 1px solid var(--border); touch-action: none;
}
/* El botón vive DEBAJO del canvas (nunca sobre la pista/personaje): .game-controls es del
   tamaño natural del texto de instrucciones, y el overlay lo cubre exactamente a él, no al
   canvas — así en celular no tapa al personaje ni la pista. */
.game-controls { position: relative; max-width: 420px; margin: 10px auto 0; min-height: 34px; }
.game-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: var(--bg); border-radius: 10px; pointer-events: none;
}
.game-overlay .btn { pointer-events: auto; }
.game-hint { text-align: center; color: var(--text-muted); font-size: 13px; margin: 0; }

.game-leaderboard { margin-top: 32px; }
.game-leaderboard h3 { color: var(--white); font-family: var(--font-display); margin-bottom: 4px; }
.game-leaderboard__range { color: var(--text-muted); font-size: 13px; margin: 0 0 14px; }
.game-leaderboard ol { list-style: none; margin: 0; padding: 0; }
.game-leaderboard li {
  display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-radius: 10px;
  background: rgba(255,255,255,.03); border: 1px solid var(--border); margin-bottom: 8px;
  color: var(--text); font-size: 14px;
}
.game-leaderboard li strong { color: var(--yellow); }
.game-leaderboard__empty { justify-content: center; color: var(--text-muted); }
.game-leaderboard__school { display: block; color: var(--text-muted); font-size: 11.5px; font-weight: 400; margin-top: 2px; }

.game-guide {
  margin-top: 32px; background: rgba(255,255,255,.03); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px;
}
.game-guide h3 { color: var(--white); font-family: var(--font-display); margin-bottom: 10px; }
.game-guide > p { color: var(--text-muted); font-size: 14px; line-height: 1.7; margin-bottom: 20px; }
.game-guide > p strong { color: var(--text); }
.game-guide__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.game-guide__col h4 { font-size: 14px; margin-bottom: 12px; }
.game-guide__col--bad h4 { color: #ff6b6b; }
.game-guide__col--good h4 { color: #4ade80; }
.game-guide__col ul { list-style: none; margin: 0; padding: 0; }
.game-guide__col li {
  display: flex; align-items: center; gap: 10px; padding: 7px 0; color: var(--text); font-size: 13.5px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.game-guide__col li strong { margin-left: auto; color: var(--yellow); font-family: var(--font-display); }
.game-guide__swatch {
  width: 16px; height: 16px; border-radius: 5px; flex-shrink: 0;
  box-shadow: 0 0 6px rgba(0,0,0,.4);
}
.game-guide__swatch--logo {
  background: linear-gradient(135deg, var(--orange), var(--cyan), var(--yellow));
}
.game-guide__foot { color: var(--text-muted); font-size: 13px; margin: 18px 0 0; }
.game-guide__foot strong { color: var(--text); }

@media (max-width: 640px) {
  .game-shell { padding: 18px; }
  .game-guide__cols { grid-template-columns: 1fr; }
}