/* ============================================================
   YO SOY GOLEADOR — Landing Page Styles
   Stack: HTML5 + CSS3 Vanilla · Mobile-first
   ============================================================ */

/* ============================================================
   0. TIPOGRAFÍAS DE TITULAR (autoalojadas)
   ------------------------------------------------------------
   Anton y Bungee, las dos con licencia SIL Open Font — libres
   también para uso comercial. Se sirven desde nuestro dominio en
   vez de la CDN de Google: una petición menos a un tercero, sin
   depender de que gstatic responda, y sin ceder la IP de cada
   visitante a otro dominio.
   Son los subconjuntos latin y latin-ext que sirve Google, no la
   fuente entera: 75 KB las cuatro. El unicode-range hace que el
   navegador se baje latin-ext solo si la página usa tildes o ñ.
   font-display:swap para que el texto se lea desde el primer
   momento con la fuente de respaldo y no haya hueco en blanco.
   ============================================================ */
@font-face {
  font-family: 'Anton';
  src: url('../fonts/anton-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Anton';
  src: url('../fonts/anton-latin-ext.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bungee';
  src: url('../fonts/bungee-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bungee';
  src: url('../fonts/bungee-latin-ext.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   1. VARIABLES & RESET
   ============================================================ */
:root {
  /* Brand colors — alineados al estilo de ventas.yosoygoleador.com */
  --navy:        #0a1428;
  --navy-deep:   #050b1c;
  --navy-mid:    #0d1a33;
  --navy-light:  #14264f;
  --gold:        #F5C451;
  --gold-bright: #FFD97A;
  --gold-dark:   #C99A30;
  --white:       #FFFFFF;
  --white-dim:   rgba(255, 255, 255, 0.72);
  --white-faint: rgba(255, 255, 255, 0.12);

  /* Ecuadorian tricolor */
  --ec-yellow: #FFD100;
  --ec-blue:   #0030A0;
  --ec-red:    #CC0000;

  /* Typography — Sora (títulos) + Inter (cuerpo), como la página de ventas */
  --font-impact: 'Sora', sans-serif;
  --font-cond:   'Sora', sans-serif;
  --font-body:   'Inter', sans-serif;

  /* Spacing */
  --section-gap: clamp(64px, 10vw, 120px);
  --container:   1200px;

  /* Misc */
  --radius:      8px;
  --radius-lg:   16px;
  --transition:  0.3s ease;
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  background-color: var(--navy-deep);
  color: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, video, svg {
  display: block;
  max-width: 100%;
}

a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
ul { list-style: none; }

/* ============================================================
   2. UTILITIES
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
}

/* ============================================================
   3. TRICOLOR STRIPE
   ============================================================ */
.tricolor-stripe {
  display: flex;
  height: 4px;
  width: 100%;
}
.stripe-yellow { flex: 1; background: var(--ec-yellow); }
.stripe-blue   { flex: 1; background: var(--ec-blue); }
.stripe-red    { flex: 1; background: var(--ec-red); }

/* ============================================================
   4. BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-cond);
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: var(--radius);
  transition: var(--transition);
  white-space: nowrap;
}

.btn-gold {
  background: var(--gold);
  color: var(--navy-deep);
  padding: 10px 22px;
  font-size: 0.85rem;
  text-transform: uppercase;
}
.btn-gold:hover {
  background: var(--gold-bright);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(232, 160, 32, 0.4);
}

.btn-lg {
  padding: 16px 36px;
  font-size: 1.1rem;
  border-radius: var(--radius-lg);
}

.btn-xl {
  padding: 20px 48px;
  font-size: 1.25rem;
  border-radius: var(--radius-lg);
  letter-spacing: 0.1em;
}
.btn-xl:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(232, 160, 32, 0.5);
}

.btn-arrow {
  width: 20px;
  height: 20px;
  transition: transform var(--transition);
}
.btn:hover .btn-arrow { transform: translateX(4px); }

.btn-ball-icon {
  width: 22px;
  height: 22px;
}

/* ============================================================
   5. ANIMATIONS — FADE-UP ON LOAD
   ============================================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse-ring {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(1.8); opacity: 0; }
}

@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(8px); }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

.fade-up          { opacity: 0; animation: fadeUp 0.8s ease forwards; }
.delay-1          { animation-delay: 0.15s; }
.delay-2          { animation-delay: 0.3s; }
.delay-3          { animation-delay: 0.45s; }
.delay-4          { animation-delay: 0.6s; }

/* Scroll-triggered reveal */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.delay-1 { transition-delay: 0.12s; }
.reveal.delay-2 { transition-delay: 0.24s; }
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Variante "desde el fondo": en vez de subir, el elemento llega de lejos y se
   acerca. Sustituye el transform de .reveal, no se suma — por eso va con doble
   clase, para ganarle en especificidad sin recurrir a !important.
   La curva se pasa de 1 a propósito (rebasa el 100% y vuelve): sin ese rebote
   el zoom se lee como un simple fundido. */
.reveal.zoom {
  transform: scale(0.55);
  transition: opacity 0.7s ease, transform 0.85s cubic-bezier(0.22, 1.2, 0.36, 1);
}
.reveal.zoom.is-visible { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
  .reveal.zoom { transform: none; transition: opacity 0.4s ease; }
}

/* ============================================================
   6. HEADER / NAV
   ============================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
  transition: background 0.4s ease, box-shadow 0.4s ease;
}

.site-header.scrolled {
  background: rgba(6, 18, 46, 0.96);
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 40px rgba(0, 0, 0, 0.4);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 14px;
  gap: 16px;
}

.logo {
  display: flex;
  flex-direction: column;
  line-height: 1;
  text-decoration: none;
}
.logo-yo {
  font-family: var(--font-cond);
  font-weight: 300;
  font-size: clamp(0.55rem, 1.2vw, 0.75rem);
  letter-spacing: 0.25em;
  color: var(--white-dim);
  text-transform: uppercase;
}
.logo-goleador {
  font-family: var(--font-impact);
  font-size: clamp(1.1rem, 2.5vw, 1.6rem);
  color: var(--white);
  letter-spacing: 0.04em;
}

/* Logo YSG (imagen) — header y footer */
.ysg-logo {
  height: clamp(42px, 6vw, 60px);
  width: auto;
  display: block;
}
.ysg-logo--footer {
  height: clamp(52px, 8vw, 80px);
}

.header-nav {
  display: flex;
  align-items: center;
  gap: clamp(12px, 3vw, 28px);
}

.tc-logo {
  height: clamp(28px, 4vw, 42px);
  width: auto;
  display: block;
}
.tc-logo--footer {
  height: clamp(24px, 3vw, 34px);
  opacity: 0.75;
}

/* ============================================================
   7. HERO SECTION — IMAGEN FULL + OVERLAY
   ============================================================ */
.hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(6,18,46,0.25) 0%,
    rgba(6,18,46,0.05) 30%,
    rgba(6,18,46,0.55) 65%,
    rgba(6,18,46,0.92) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 2;
  padding-bottom: clamp(64px, 8vw, 96px);
  text-align: center;
}

.mundial-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(232,160,32,0.35);
  border-radius: 30px;
  padding: 8px 18px;
  background: rgba(232,160,32,0.08);
  margin-bottom: 20px;
}
.badge-ball {
  width: 14px;
  height: 14px;
  color: var(--gold);
}

/* Badge reubicado en el centro-arriba del hero */
.hero-topbar {
  position: absolute;
  top: clamp(88px, 13vw, 118px);
  left: 0;
  right: 0;
  z-index: 2;
  text-align: center;
  pointer-events: none;
}
.mundial-badge--top {
  margin-bottom: 0;
  background: rgba(6, 18, 46, 0.6);
  backdrop-filter: blur(4px);
}


.hero-tagline {
  font-family: var(--font-cond);
  font-weight: 300;
  font-size: clamp(0.9rem, 2.5vw, 1.3rem);
  letter-spacing: 0.35em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 24px;
}

/* ============================================================
   VIDEO SECTION
   ============================================================ */
.video-section {
  position: relative;
  background: linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 100%);
  padding-block: var(--section-gap);
}
.video-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--white-faint), transparent);
}
.video-section-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--white-faint);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
  aspect-ratio: 16 / 9;
  background: var(--navy);
}
.programa-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* — Scroll indicator — */
.scroll-indicator {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--white-faint);
  border-radius: 50%;
  animation: scroll-bounce 2s ease-in-out infinite;
  transition: var(--transition);
}
.scroll-indicator:hover { border-color: var(--gold); }
.scroll-arrow {
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--white-dim);
  border-bottom: 2px solid var(--white-dim);
  transform: rotate(45deg) translateY(-2px);
}

/* ============================================================
   8. SECTION SHARED STYLES
   ============================================================ */
.section-eyebrow {
  font-family: var(--font-cond);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}

.section-title {
  font-family: var(--font-cond);
  font-weight: 300;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.1;
  color: var(--white);
  margin-bottom: 28px;
}
.section-title strong {
  font-weight: 800;
  display: block;
}

/* ============================================================
   9. PROGRAMA SECTION
   ============================================================ */
.programa {
  padding-block: var(--section-gap);
  background: linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 100%);
  position: relative;
}
.programa::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--white-faint), transparent);
}

.programa-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  margin-top: 40px;
}

.programa-text {
  font-size: clamp(0.95rem, 2vw, 1.05rem);
  color: var(--white-dim);
  line-height: 1.75;
  margin-bottom: 18px;
}
.programa-text strong { color: var(--white); }

/* — Posiciones — */
.posiciones {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--white-faint);
}

.posiciones-eyebrow {
  font-family: var(--font-cond);
  font-size: clamp(1rem, 3vw, 1.4rem);
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--white);
  margin-bottom: 20px;
}

.posiciones-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.posicion-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 16px;
  border: 1px solid var(--white-faint);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.03);
  transition: var(--transition);
  text-align: center;
}
.posicion-card:hover {
  border-color: rgba(232,160,32,0.3);
  background: rgba(232,160,32,0.05);
  transform: translateY(-3px);
}

.posicion-card--gold {
  border-color: rgba(232,160,32,0.4);
  background: rgba(232,160,32,0.06);
}

.posicion-icon {
  width: 40px;
  height: 40px;
  color: var(--gold);
}
.posicion-icon svg {
  width: 100%;
  height: 100%;
}

.posicion-nombre {
  font-family: var(--font-cond);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--white-dim);
  text-transform: uppercase;
}
.posicion-card--gold .posicion-nombre { color: var(--gold); }

/* — Premio card — */
.premio-card {
  position: relative;
  background: linear-gradient(145deg, rgba(27,58,138,0.5) 0%, rgba(11,30,74,0.9) 100%);
  border: 1px solid rgba(232,160,32,0.25);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 5vw, 48px);
  overflow: hidden;
}

.premio-glow {
  position: absolute;
  top: -80px;
  right: -80px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(232,160,32,0.15) 0%, transparent 70%);
  pointer-events: none;
}

.premio-header {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 16px;
}

.premio-numero {
  font-family: var(--font-impact);
  font-size: clamp(4rem, 10vw, 7rem);
  color: var(--gold);
  line-height: 1;
  text-shadow: 0 0 40px rgba(232,160,32,0.4);
}

.premio-label-group {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.premio-solo {
  font-family: var(--font-cond);
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0.3em;
  color: var(--white-dim);
  text-transform: uppercase;
}
.premio-ganador {
  font-family: var(--font-impact);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  color: var(--white);
  letter-spacing: 0.05em;
}

.premio-desc {
  font-size: 0.95rem;
  color: var(--white-dim);
  margin-bottom: 24px;
  font-style: italic;
}

.tricolor-divider {
  display: flex;
  height: 3px;
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 28px;
}
.tricolor-divider span:nth-child(1) { flex: 1; background: var(--ec-yellow); }
.tricolor-divider span:nth-child(2) { flex: 1; background: var(--ec-blue); }
.tricolor-divider span:nth-child(3) { flex: 1; background: var(--ec-red); }

.beneficios-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 32px;
}

.beneficio-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.beneficio-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  background: rgba(232,160,32,0.1);
  border: 1px solid rgba(232,160,32,0.2);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  padding: 8px;
}
.beneficio-icon svg { width: 100%; height: 100%; }

.beneficio-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.beneficio-text strong {
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  color: var(--white);
}
.beneficio-text span {
  font-size: 0.82rem;
  color: var(--white-dim);
}

.premio-footer {
  font-family: var(--font-cond);
  font-size: 1rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  color: var(--white-dim);
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid var(--white-faint);
  text-transform: uppercase;
}
.premio-footer strong { color: var(--gold); font-weight: 700; }

/* ============================================================
   10. REGISTRO SECTION (FORM)
   ============================================================ */
.registro {
  position: relative;
  padding-block: var(--section-gap);
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  overflow: hidden;
}
.registro::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232,160,32,0.3), transparent);
}

.registro-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
/* La capa de fondo solo se funde: no sube como el resto de .reveal, que en un
   elemento a sangre dejaría una franja vacía arriba mientras entra. */
.registro-bg.reveal { transform: none; }

/* ── Cancha de fondo, la del formulario de registro.yosoygoleador.com ────────
   Cada trazo lleva pathLength="1", así que el dash y su desplazamiento valen 1
   y todos tardan lo mismo en dibujarse sin importar su longitud real: el círculo
   central y la línea de medio campo terminan a la vez.
   El orden de los nth-child es el del SVG, de fuera hacia dentro — perímetro,
   medio campo, círculo, las dos áreas grandes y las dos chicas — para que se
   lea como si alguien estuviera pintando la cancha.                          */
.pitch {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-8deg);
  width: min(1400px, 150vw);
  height: auto;
  opacity: 0.16;
}
.pitch .line {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
/* El trazado espera a que la sección entre en pantalla: el observador de
   .reveal es quien pone is-visible en .registro-bg. */
.registro-bg.is-visible .pitch .line {
  animation: pitch-draw 2.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.registro-bg.is-visible .pitch .line:nth-child(2) { animation-delay: 0.15s; }
.registro-bg.is-visible .pitch .line:nth-child(3) { animation-delay: 0.3s; }
.registro-bg.is-visible .pitch .line:nth-child(4) { animation-delay: 0.45s; }
.registro-bg.is-visible .pitch .line:nth-child(5) { animation-delay: 0.6s; }
.registro-bg.is-visible .pitch .line:nth-child(6) { animation-delay: 0.75s; }
.registro-bg.is-visible .pitch .line:nth-child(7) { animation-delay: 0.9s; }
@keyframes pitch-draw { to { stroke-dashoffset: 0; } }

.pitch .ball { fill: var(--gold); opacity: 0.5; }

@media (prefers-reduced-motion: reduce) {
  /* La cancha aparece ya dibujada. El balón se retira del todo: su recorrido es
     un <animateMotion> de SMIL y `animation: none` no lo detiene, solo pararía
     una animación CSS que aquí no existe. */
  .registro-bg.is-visible .pitch .line {
    animation: none;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
  .pitch .ball { display: none; }
}

.registro .container { position: relative; z-index: 1; }

.registro-header {
  text-align: center;
  margin-bottom: 48px;
}

/* ── Tipografía de impacto, solo en la sección de registro ──────────────────
   Anton y Bungee se aplican aquí y no en todo el sitio a propósito: esta es la
   sección que convierte, y cambiar los titulares de las demás a menos de una
   hora del lanzamiento no compensa el riesgo. Extenderlo después es trivial.
   Ojo con Anton: tiene un solo grosor. El estilo de titulares del sitio se
   apoyaba en el contraste 300 vs 800, que aquí desaparece — se sustituye por
   contraste de color, con el <strong> en dorado.                             */
.registro-title {
  font-family: 'Anton', var(--font-cond);
  font-weight: 400;
  font-size: clamp(2.7rem, 8.5vw, 5.4rem);
  letter-spacing: 0.005em;
  line-height: 0.98;
  text-transform: uppercase;
}
.registro-title strong { font-weight: 400; color: var(--gold); }

/* Bungee solo en las etiquetas cortas en versales: ahí aporta el carácter de
   barrio. En frases largas es ilegible, por eso no sale de aquí.
   Va con #registro por delante para ganar en especificidad: más abajo hay dos
   reglas que vuelven a fijar font-family y font-weight en estos mismos
   selectores, y por orden de aparición ganaban ellas.
   Bungee solo trae un grosor, así que el 600/800 de esas reglas haría que el
   navegador lo simulara engordando los trazos, y se ve sucio. */
#registro .section-eyebrow,
#registro .convocatoria-title {
  font-family: 'Bungee', var(--font-cond);
  font-weight: 400;
  letter-spacing: 0.12em;
}

/* Los fragmentos destacados saltan a Anton; la frase que los sostiene se queda
   en Sora. Una línea entera en Anton se lee mal — es fuente de titular. */
.registro-sub strong,
.btn-anillos {
  font-family: 'Anton', var(--font-cond);
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* Misma familia y mismo contraste de pesos que los titulares de sección: el
   texto fino sostiene y el <strong> es el que pega. Antes iba en la tipografía
   de párrafo y a 1.2rem, así que se leía como pie de foto y no como promesa. */
/* Son dos frases cortas, no un párrafo: aguantan Anton entero y ganan mucho.
   En versales porque Anton está dibujada para titular en caja alta; en caja
   baja las minúsculas quedan estrechas y pierde la contundencia. */
.registro-sub {
  font-family: 'Anton', var(--font-cond);
  font-weight: 400;
  font-size: clamp(1.25rem, 3.6vw, 2.1rem);
  line-height: 1.18;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: var(--white);
  max-width: 700px;
  margin-inline: auto;
}
/* Anton tiene un solo grosor, así que el énfasis va por color, no por peso. */
.registro-sub strong { color: var(--gold); font-weight: 400; }

/* — Bloque "El próximo 9" — */
.nueve-card {
  display: flex;
  align-items: center;
  gap: clamp(18px, 4vw, 32px);
  padding: clamp(20px, 4vw, 32px);
  background: linear-gradient(160deg, rgba(232,160,32,0.1), rgba(255,255,255,0.02));
  border: 1px solid rgba(232,160,32,0.4);
  border-radius: 16px;
}

.nueve-num {
  font-family: var(--font-impact);
  font-size: clamp(4.5rem, 12vw, 7rem);
  line-height: 0.9;
  color: var(--gold);
  flex-shrink: 0;
  text-shadow: 0 6px 30px rgba(232,160,32,0.35);
}

.nueve-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nueve-title {
  font-family: var(--font-cond);
  font-weight: 800;
  font-size: clamp(1.2rem, 3vw, 1.7rem);
  letter-spacing: 0.08em;
  color: var(--white);
}

.nueve-desc {
  font-size: clamp(0.9rem, 2vw, 1rem);
  color: var(--white-dim);
  line-height: 1.6;
}

/* — Countdown (apertura 7 de agosto) — */
.countdown {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(10px, 3vw, 24px);
  margin-bottom: 44px;
}
.countdown[hidden] { display: none; }

/* Botón que ocupa el sitio de la cuenta atrás al abrir las inscripciones.
   Hereda el mismo margen inferior que el contador para que el bloque de la
   convocatoria no dé un salto al hacerse el cambio. */
.registro-cta {
  text-align: center;
  margin-bottom: 44px;
}
.registro-cta[hidden] { display: none; }
/* ── Banner del auspiciante, por capas ──────────────────────────────────────
   El aspect-ratio reserva el hueco exacto desde el primer momento, así que el
   botón de abajo no salta cuando cargan las imágenes.
   Las animaciones arrancan con .is-visible, que es la clase que pone el reveal:
   si empezaran al cargar la página, el banner habría terminado de animarse
   antes de que nadie llegue a mirarlo.                                       */
.kao-banner {
  position: relative;
  width: min(100%, 720px);
  aspect-ratio: 1672 / 740;
  margin: 0 auto 22px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #061024;
  /* Sin esto el banner iba a tirones. El contenedor recorta con esquinas
     redondeadas tres capas que se mueven; si no tiene capa de composición
     propia, el navegador rehace ese recorte en el hilo principal en cada
     fotograma. translateZ(0) le da la suya y el recorte pasa a ser barato. */
  transform: translateZ(0);
  isolation: isolate;
}
.kao-capa {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* `translate` va declarado aparte a propósito: es una propiedad independiente
     de `transform`, y un will-change:transform a secas NO la cubre. Sin esto la
     capa de las letras no se promocionaba, el navegador redondeaba su posición a
     píxeles enteros y el flotar —que recorre 5 px en 2,5 s— solo se movía una
     vez cada treinta fotogramas. De ahí la sensación de ir a trompicones. */
  will-change: transform, translate;
  backface-visibility: hidden;
}

/* El fondo solo hace zoom: entra ampliado, se cierra, y luego sigue respirando
   muy despacio en bucle para que el banner no quede como una foto muerta.
   No se mueve de lado — es el plano fijo contra el que se leen los otros dos. */
.registro-cta.is-visible .kao-fondo {
  animation: kaoFondoEntra 1.6s cubic-bezier(0.16, 0.8, 0.3, 1) both,
             kaoFondoRespira 20s ease-in-out 1.6s infinite;
}
@keyframes kaoFondoEntra   { from { transform: scale(1.22); } to { transform: scale(1.04); } }
@keyframes kaoFondoRespira { 0%, 100% { transform: scale(1.04); } 50% { transform: scale(1.10); } }

/* Jugadores y letras entran desde la derecha hasta su posición.
   Los jugadores viajan más (están al otro extremo del banner) y salen antes;
   las letras los siguen. Ese desfase es el que crea la profundidad: si los dos
   planos llegaran a la vez se leerían como una sola imagen deslizándose. */
.registro-cta.is-visible .kao-jugadores {
  animation: kaoDesdeDerecha 1.15s cubic-bezier(0.16, 0.85, 0.28, 1) 0.1s both;
}
/* Las letras, además, se quedan flotando cuando terminan de entrar.
   El flotar usa `translate` y no `transform`: las dos animaciones corren a la
   vez —la de entrada conserva su estado final por el `both`— y si ambas tocaran
   `transform`, la segunda pisaría a la primera y las letras saltarían de golpe
   a su sitio. `translate` es una propiedad independiente y se compone encima. */
.registro-cta.is-visible .kao-letras {
  animation: kaoDesdeDerecha 1s cubic-bezier(0.16, 0.85, 0.28, 1) 0.42s both,
             kaoFlota 5s ease-in-out 1.5s infinite;
}
@keyframes kaoDesdeDerecha {
  from { opacity: 0; transform: translateX(38%); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes kaoFlota {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -1.6%; }
}

@media (prefers-reduced-motion: reduce) {
  .registro-cta.is-visible .kao-fondo,
  .registro-cta.is-visible .kao-jugadores,
  .registro-cta.is-visible .kao-letras { animation: none; }
}
/* Beneficio de inscribirse en tienda. Va pegado al arte del auspiciante, antes
   del botón: primero se lee de quién viene la ventaja y luego se decide.
   Sin recuadro a propósito: encajonarlo lo convertía en una nota al pie, y esto
   es un argumento de venta, no una advertencia legal. */
.registro-beneficio {
  max-width: 800px;
  margin: 0 auto 30px;
  font-family: var(--font-cond);
  font-weight: 300;
  font-size: clamp(1.05rem, 2.7vw, 1.6rem);
  line-height: 1.35;
  color: var(--white);
}
/* El destello recorre el degradado por debajo del texto (background-clip), no
   la opacidad: así solo brilla la letra y el fondo no parpadea. */
.registro-beneficio strong {
  font-weight: 800;
  background: linear-gradient(100deg,
              var(--gold) 0%, var(--gold) 35%,
              #fff4cf 50%,
              var(--gold) 65%, var(--gold) 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: destelloOro 3.4s ease-in-out infinite;
}
@keyframes destelloOro {
  0%, 100% { background-position: 160% 0; }
  50%      { background-position: -60% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .registro-beneficio strong {
    animation: none;
    background: none;
    color: var(--gold);
  }
}

/* ── Botón de anillos ────────────────────────────────────────────────────────
   Basado en "tall-robin-16" de Dashrath-Sharma (uiverse.io, licencia MIT).
   Los anillos no son un degradado: son box-shadow inset apilados sobre un
   ::before ovalado y enorme (150% x 300%) que asoma por detrás del botón. Al
   pasar por encima el óvalo se desplaza y cambia de gama, y por eso el efecto
   se ve como un barrido en vez de un simple cambio de color.
   Adaptado de <button> a <a>: hace falta text-decoration e inline-grid, que el
   botón original daba por hechos.                                            */
.btn-anillos {
  display: inline-grid;
  place-items: center;
  position: relative;
  z-index: 1;
  overflow: hidden;
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-cond);
  font-weight: 800;
  letter-spacing: 0.04em;
  font-size: 17px;
  padding: 1em 2em;
  border-radius: 8px;
  /* Azul sobre amarillo, con los colores de la bandera. Al pasar por encima
     se invierte a amarillo sobre azul: los anillos ya hacían ese barrido, así
     que ahora arrastran también el color del texto. */
  background: var(--ec-yellow);
  color: var(--ec-blue);
  transition: color .2s;
  box-shadow: 2px 2px 0 #333, 2px 2px 200px var(--gold-bright) inset;
}
.btn-anillos::before {
  content: '';
  position: absolute;
  left: -41%;
  width: 150%;
  height: 300%;
  border-radius: 50%;
  z-index: -1;
  transition: 0.2s;
  box-shadow: 2px 2px 0 #333,
              0 0 0 8px  #C99A30 inset,
              0 0 0 16px #E0B23F inset,
              0 0 0 24px #F5C451 inset,
              0 0 0 32px #FFD100 inset,
              0 0 0 40px #FFE066 inset;
}
.btn-anillos:hover { color: var(--ec-yellow); box-shadow: 2px 2px 0 #333, 2px 2px 200px #001F6B inset; }
.btn-anillos:hover::before {
  left: -9%;
  box-shadow: 2px 2px 0 #333,
              0 0 0 8px  #4B7BE0 inset,
              0 0 0 16px #2A5AD0 inset,
              0 0 0 24px #0F41BC inset,
              0 0 0 32px #0030A0 inset,
              0 0 0 40px #002480 inset;
}
.btn-anillos:active { transform: scale(0.98); }
.btn-anillos:active::before {
  opacity: 0.001;
  box-shadow: 2px 2px 200px #001A5C inset;
}
.btn-anillos:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* El efecto entero es movimiento; sin él, al menos que no salte al pulsar. */
@media (prefers-reduced-motion: reduce) {
  .btn-anillos::before { transition: none; }
  .btn-anillos:active { transform: none; }
}
.registro-cta-nota {
  margin-top: 14px;
  font-size: 13px;
  color: var(--white-dim);
}

.countdown-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: clamp(64px, 16vw, 110px);
  padding: clamp(14px, 3vw, 24px) clamp(8px, 2vw, 16px);
  background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
  border: 1px solid rgba(232,160,32,0.3);
  border-radius: 14px;
}

.countdown-num {
  font-family: var(--font-impact);
  font-size: clamp(2rem, 8vw, 3.6rem);
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.countdown-label {
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: clamp(0.65rem, 1.6vw, 0.8rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white-dim);
}

.countdown-sep {
  font-family: var(--font-impact);
  font-size: clamp(1.6rem, 6vw, 3rem);
  color: rgba(232,160,32,0.5);
  padding-top: clamp(16px, 3.5vw, 30px);
}

/* — Primera convocatoria — */
.convocatoria {
  max-width: 760px;
  margin-inline: auto;
  margin-bottom: 44px;
  text-align: center;
}
.convocatoria-title {
  font-family: var(--font-cond);
  font-weight: 800;
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  letter-spacing: 0.25em;
  color: var(--gold);
  margin-bottom: 20px;
}
.convocatoria-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 640px) {
  .convocatoria-grid { grid-template-columns: 1fr; }
}
.convocatoria-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 14px;
  background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
}
.convocatoria-item svg {
  width: 26px;
  height: 26px;
  color: var(--gold);
  margin-bottom: 4px;
}
.convocatoria-label {
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white-dim);
}
.convocatorias {
  max-width: 980px;
  margin-inline: auto;
  margin-bottom: 44px;
  text-align: center;
}
.convocatorias-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 4px;
}
@media (max-width: 640px) {
  .convocatorias-grid { grid-template-columns: 1fr; }
}
.convocatoria-card {
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 18px;
  padding: 20px 16px 22px;
  background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
}
.convocatoria-city {
  display: block;
  font-family: var(--font-cond);
  font-weight: 800;
  font-size: clamp(1.05rem, 3vw, 1.3rem);
  letter-spacing: 0.14em;
  color: var(--gold);
  margin-bottom: 16px;
}
.convocatoria-card .convocatoria-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.convocatoria-card .convocatoria-item {
  background: transparent;
  border: none;
  padding: 4px;
}
.convocatoria-valor {
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--white);
  text-wrap: balance;
  line-height: 1.3;
}

/* — Sección "Sé parte del proyecto" (marcas → ventas) — */
.proyecto {
  position: relative;
  padding-block: clamp(64px, 9vw, 110px);
  background: linear-gradient(180deg, var(--navy-deep) 0%, #050b1c 100%);
  text-align: center;
  overflow: hidden;
}
.proyecto::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232,160,32,0.3), transparent);
}
.proyecto-inner { position: relative; z-index: 1; }
.proyecto-title { margin-bottom: 14px; }
.proyecto-sub {
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  color: var(--white-dim);
  max-width: 520px;
  margin-inline: auto;
  margin-bottom: 28px;
}
.proyecto-btn { margin-bottom: 48px; }
.proyecto .redes { margin-bottom: 0; }

/* — Redes sociales — */
.redes {
  text-align: center;
  margin-bottom: 8px;
}
.redes-text {
  font-family: var(--font-cond);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--white-dim);
  margin-bottom: 16px;
}
.redes-btns {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}
.redes-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-cond);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--white);
  text-decoration: none;
  /* Relleno propio, que antes no tenía ninguno: la cancha del fondo se colaba
     por dentro de la píldora y los trazos dorados cruzaban el texto. El navy
     va con alfa para que el degradado de la sección siga leyéndose debajo. */
  background: rgba(10, 20, 40, 0.66);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 30px;
  padding: 10px 20px;
  transition: border-color var(--transition, 0.25s), background var(--transition, 0.25s), transform var(--transition, 0.25s);
}
/* El tinte dorado se superpone al relleno en vez de reemplazarlo. Si se cambiara
   solo el color de fondo, el botón se volvería traslúcido justo al pasar por
   encima y la cancha reaparecería por dentro. */
.redes-btn:hover {
  border-color: var(--gold);
  background: linear-gradient(rgba(232,160,32,0.14), rgba(232,160,32,0.14)),
              rgba(10, 20, 40, 0.72);
  transform: translateY(-2px);
}
.redes-btn svg {
  width: 18px;
  height: 18px;
}

/* — Form — */
.registro-form {
  max-width: 800px;
  margin-inline: auto;
}
.registro-form[hidden] { display: none; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 36px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group--full { grid-column: 1 / -1; }

label {
  font-family: var(--font-cond);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--white-dim);
}

input, select, textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--white);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--white-faint);
  border-radius: var(--radius);
  padding: 14px 18px;
  width: 100%;
  outline: none;
  transition: var(--transition);
  -webkit-appearance: none;
  appearance: none;
}

input::placeholder, textarea::placeholder {
  color: rgba(255,255,255,0.25);
}

input:focus, select:focus, textarea:focus {
  border-color: var(--gold);
  background: rgba(232,160,32,0.06);
  box-shadow: 0 0 0 3px rgba(232,160,32,0.12);
}

input.error, select.error, textarea.error {
  border-color: var(--ec-red);
}

select {
  background-image: none;
  cursor: pointer;
}
select option {
  background: var(--navy-deep);
  color: var(--white);
}

textarea { resize: vertical; min-height: 120px; }

.select-wrapper {
  position: relative;
}
.select-arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--white-dim);
  pointer-events: none;
}

.form-submit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

.form-note {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.35);
  max-width: 480px;
  line-height: 1.5;
}

/* Form success state */
.form-success {
  text-align: center;
  padding: 48px 24px;
}
.form-success svg {
  width: 56px;
  height: 56px;
  color: var(--gold);
  margin: 0 auto 20px;
}
.form-success h3 {
  font-family: var(--font-cond);
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 8px;
}
.form-success p {
  color: var(--white-dim);
}

/* ============================================================
   11. FOOTER
   ============================================================ */
.site-footer {
  background: var(--navy-deep);
  border-top: 1px solid var(--white-faint);
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-block: 40px;
  text-align: center;
}

.footer-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.footer-logo-yo {
  font-family: var(--font-cond);
  font-weight: 300;
  font-size: 0.6rem;
  letter-spacing: 0.3em;
  color: var(--white-dim);
  text-transform: uppercase;
}
.footer-logo-goleador {
  font-family: var(--font-impact);
  font-size: 1.5rem;
  letter-spacing: 0.04em;
}

.footer-tagline {
  font-family: var(--font-cond);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  color: var(--gold);
  text-transform: uppercase;
}

.footer-copy {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.3);
}

.footer-tc {
  display: flex;
  align-items: center;
}

/* ============================================================
   12. RESPONSIVE — TABLET (≥ 640px)
   ============================================================ */
@media (min-width: 640px) {
  .posiciones-grid { grid-template-columns: repeat(4, 1fr); }
  .form-grid       { grid-template-columns: repeat(2, 1fr); }
  .footer-inner    { flex-direction: row; justify-content: space-between; text-align: left; }
  .footer-center   { text-align: center; }
}

/* ============================================================
   13. RESPONSIVE — DESKTOP (≥ 960px)
   ============================================================ */
@media (min-width: 960px) {
  .programa-grid {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
  }
}

/* ============================================================
   14. REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   ADAPTACIÓN AL ESTILO DE ventas.yosoygoleador.com
   (Sora + Inter · fondo #050b1c · botones píldora · oro #F5C451)
   ============================================================ */

/* Sora pesada donde antes iba Anton (una sola weight) */
.section-title,
.premio-numero,
.premio-ganador,
.countdown-num,
.countdown-sep,
.nueve-num {
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Titulares un poco más contenidos (Sora es más ancha que Anton) */
.section-title { font-size: clamp(1.7rem, 4.2vw, 3rem); line-height: 1.1; }
.registro-title { font-size: clamp(1.8rem, 5.5vw, 3.6rem); }
.countdown-num { font-size: clamp(1.7rem, 6.5vw, 3rem); }
.premio-numero { font-size: clamp(3.2rem, 8vw, 4.6rem); }
.nueve-num { font-size: clamp(3.4rem, 9vw, 5.2rem); }

/* Botones píldora, como "Agenda tu reunión" */
.btn {
  border-radius: 9999px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* Etiquetas y eyebrows en Sora semibold con tracking moderado */
.section-eyebrow,
.posiciones-eyebrow,
.convocatoria-title,
.redes-text,
.countdown-label,
.convocatoria-label {
  font-weight: 600;
  letter-spacing: 0.18em;
}

/* Labels del formulario e ítems con Sora */
label { font-weight: 600; letter-spacing: 0.1em; }

/* Tarjetas con radio más generoso y bordes sutiles */
.premio-card,
.nueve-card,
.countdown-item,
.convocatoria-item,
.posicion-card {
  border-radius: 18px;
}
input, select, textarea { border-radius: 12px; }

/* Badge del hero en oro nuevo */
.mundial-badge {
  border-color: rgba(245, 196, 81, 0.4);
  background: rgba(245, 196, 81, 0.08);
}
.mundial-badge--top { background: rgba(5, 11, 28, 0.65); }

/* ============================================================
   PREMIO — 24 elegidos, 1 campeón
   ============================================================ */
.premio-numero { line-height: 0.95; }

.premio-solo {
  font-weight: 600;
  letter-spacing: 0.22em;
}
.premio-ganador {
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  letter-spacing: 0.02em;
}

.beneficios-eyebrow {
  font-family: var(--font-cond);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--white-dim);
  margin-bottom: 16px;
}

.premio-campeon {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  margin-bottom: 20px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(245,196,81,0.16), rgba(245,196,81,0.04));
  border: 1px solid rgba(245,196,81,0.35);
}
.premio-campeon-label {
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--gold);
}
.premio-campeon-texto {
  font-size: 0.95rem;
  color: var(--white);
  line-height: 1.5;
}

/* ============================================================
   HERO — logo sobre la foto
   ============================================================ */
.hero-logo {
  width: min(620px, 78vw);
  height: auto;
  margin: 0 auto clamp(20px, 3vw, 32px);
  filter: drop-shadow(0 8px 40px rgba(0, 0, 0, 0.65));
}

/* ============================================================
   VIDEO DE YOUTUBE — facade click-to-play
   ============================================================ */
.yt-facade,
.yt-iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 18px;
  overflow: hidden;
}

.yt-facade {
  position: relative;
  padding: 0;
  cursor: pointer;
  background: var(--navy);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

.yt-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease, opacity 0.3s ease;
}
.yt-facade:hover .yt-thumb { transform: scale(1.03); opacity: 0.85; }

.yt-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(64px, 9vw, 92px);
  height: clamp(64px, 9vw, 92px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy-deep);
  box-shadow: 0 10px 40px rgba(245, 196, 81, 0.45);
  transition: transform 0.3s ease, background 0.3s ease;
}
.yt-facade:hover .yt-play {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--gold-bright);
}
.yt-play svg {
  width: 45%;
  height: 45%;
  margin-left: 8%;
}

/* Hero con la foto nueva: logo elevado para no tapar al protagonista */
.hero-bg-img { object-position: center 42%; }

.hero-overlay {
  background:
    linear-gradient(to bottom,
      rgba(5,11,28,0.55) 0%,
      rgba(5,11,28,0.20) 28%,
      rgba(5,11,28,0.45) 62%,
      rgba(5,11,28,0.94) 100%);
}

.hero-content { padding-bottom: clamp(40px, 6vw, 64px); }

.hero-logo {
  width: min(430px, 66vw);
  margin-bottom: clamp(180px, 26vh, 300px);
}

@media (max-width: 640px) {
  .hero-logo { margin-bottom: clamp(150px, 22vh, 220px); }
}

/* Logo dentro del bloque superior del hero */
.hero-topbar { display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 2.5vw, 24px); }
.hero-logo { width: min(430px, 68vw); margin: 0; }
@media (max-width: 640px) { .hero-logo { margin: 0; } }

/* ============================================================
   BOTÓN DORADO DE CONTORNO — "Quiero ser auspiciante" en el header
   ============================================================ */
.btn-gold-outline {
  background: transparent;
  color: var(--gold);
  border: 1.5px solid var(--gold);
  padding: 9px 20px;
  font-size: 0.85rem;
  text-transform: uppercase;
}
.btn-gold-outline:hover {
  background: rgba(245, 196, 81, 0.14);
  border-color: var(--gold-bright);
  color: var(--gold-bright);
  transform: translateY(-2px);
}

/* Header más compacto para que quepan los dos botones */
.header-nav { gap: clamp(8px, 1.6vw, 18px); }

@media (max-width: 900px) {
  .btn-gold-outline, .header-nav .btn-gold { padding: 8px 14px; font-size: 0.75rem; }
}

/* En móvil se oculta el logo de TC (ya aparece en el footer) para dar aire */
@media (max-width: 600px) {
  .header-nav .tc-logo { display: none; }
  .btn-gold-outline, .header-nav .btn-gold {
    padding: 8px 12px;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
  }
  .ysg-logo { height: 38px; }
}

/* ============================================================
   HEADER SÓLIDO — sin transparencia sobre el hero
   ============================================================ */
.site-header {
  background: var(--navy-deep);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}
.site-header.scrolled {
  background: var(--navy-deep);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.55);
}

/* ============================================================
   HERO — dos CTAs (jugadores / marcas)
   ============================================================ */
.hero-ctas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* El botón de marcas, en dorado de contorno y con fondo para leerse sobre la foto */
.hero-ctas .btn-gold-outline {
  background: rgba(5, 11, 28, 0.55);
  backdrop-filter: blur(6px);
  font-size: 0.95rem;
  padding: 13px 30px;
}
.hero-ctas .btn-gold-outline:hover {
  background: rgba(245, 196, 81, 0.18);
}

@media (min-width: 720px) {
  .hero-ctas { flex-direction: row; justify-content: center; gap: 16px; }
}

/* Header vuelve a su versión simple (logo + TC + Regístrate) */
.header-nav { gap: clamp(12px, 3vw, 28px); }
@media (max-width: 600px) {
  .header-nav .tc-logo { display: block; }
  .header-nav .btn-gold { padding: 9px 18px; font-size: 0.78rem; letter-spacing: 0.06em; }
  .ysg-logo { height: 42px; }
}

/* ── Aviso de privacidad de entrada ───────────────────────────────────
   Informativo, no un muro: no bloquea el contenido ni oscurece la página.
   Se acepta una vez y no vuelve (localStorage). Entra desde abajo con un
   retardo corto para no competir con la carga del hero. */
.aviso-privacidad{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  padding:0 clamp(12px,3vw,24px) clamp(12px,3vw,24px);
  padding-bottom:calc(clamp(12px,3vw,24px) + env(safe-area-inset-bottom));
  animation:avisoEntra .45s cubic-bezier(.2,.8,.3,1) both;
}
.aviso-privacidad[hidden]{display:none}
@keyframes avisoEntra{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.aviso-inner{
  max-width:920px;margin:0 auto;display:flex;align-items:center;gap:clamp(12px,3vw,26px);
  background:rgba(10,20,40,.96);border:1px solid rgba(245,196,81,.30);
  border-radius:14px;padding:clamp(14px,2.4vw,18px) clamp(16px,3vw,22px);
  box-shadow:0 18px 50px rgba(0,0,0,.5);
  backdrop-filter:blur(8px);
}
.aviso-texto strong{
  display:block;color:var(--gold);font-family:var(--font-cond);font-weight:800;
  font-size:15px;letter-spacing:.02em;margin-bottom:3px;
}
.aviso-texto p{color:var(--white-dim);font-size:14px;line-height:1.55;margin:0}
.aviso-texto a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}
.aviso-btn{
  flex:0 0 auto;cursor:pointer;border:none;border-radius:99px;
  font-family:var(--font-cond);font-weight:800;font-size:14px;letter-spacing:.03em;
  padding:12px 26px;background:var(--ec-yellow);color:var(--ec-blue);
  transition:background .2s,color .2s;
}
.aviso-btn:hover{background:var(--ec-blue);color:var(--ec-yellow)}
.aviso-btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media (max-width:640px){
  .aviso-inner{flex-direction:column;align-items:stretch;text-align:left;gap:12px}
  .aviso-btn{width:100%}
}
@media (prefers-reduced-motion:reduce){ .aviso-privacidad{animation:none} }

/* Enlace legal del pie. Discreto pero alcanzable: la política tiene que poder
   consultarse desde cualquier punto del sitio, no solo desde el aviso de
   entrada, que se acepta una vez y no vuelve a salir. */
.footer-legal{margin-top:8px;font-size:13px}
.footer-legal a{color:var(--white-dim);text-decoration:underline;text-underline-offset:3px;transition:color .2s}
.footer-legal a:hover{color:var(--gold)}
/* El aviso va fijo abajo y tapaba el pie: hasta aceptarlo no se podía pulsar
   el enlace a la política que vive justo ahí. Se reserva el hueco mientras
   está visible. */
body.con-aviso{padding-bottom:170px}
@media (max-width:640px){ body.con-aviso{padding-bottom:230px} }