/* ================================================================
   QUINIELA MUNDIAL 2026 — Landing Design System
   Token-based · Mobile First
   Naming convention matches /play/css/styles.css
   ================================================================ */

/* ─── DESIGN TOKENS ─────────────────────────────────────────────
   Edit these to retheme the entire landing.
   Organized into layers: color → type → space → layout → motion
   ──────────────────────────────────────────────────────────────── */
:root {

  /* Backgrounds — dark navy scale */
  --bg:          #07101f;
  --bg2:         #0c1a32;
  --bg3:         #112040;
  --bg4:         #1a3166;

  /* Gold / accent */
  --gold:        #b8860b;
  --gold2:       #d4a017;
  --gold3:       #f5c842;
  --gold-pale:   rgba(245, 200, 66, 0.10);
  --gold-border: rgba(212, 160, 23, 0.25);

  /* Text scale */
  --text:        #eef3ff;
  --text2:       #c8d4f0;
  --text3:       #7a8fb8;
  --text4:       #324060;

  /* System */
  --border:      rgba(238, 243, 255, 0.08);
  --success:     #5de8a0;
  --success-bg:  rgba(10, 171, 94, 0.10);
  --success-bd:  rgba(10, 171, 94, 0.30);
  --error:       #fc8181;
  --error-bg:    rgba(229, 62, 62, 0.10);
  --error-bd:    rgba(229, 62, 62, 0.30);

  /* Type — families */
  --font:        'Barlow', sans-serif;
  --font-d:      'Bebas Neue', sans-serif;      /* display headings */
  --font-c:      'Barlow Condensed', sans-serif; /* condensed labels */

  /* Type — scale (rem, same naming as /play) */
  --fs-2xs:  0.62rem;   /* ~10px  micro: badges, pills, footnotes */
  --fs-xs:   0.70rem;   /* ~11px  captions, secondary labels */
  --fs-sm:   0.80rem;   /* ~13px  nav, small body, form labels */
  --fs-base: 0.95rem;   /* ~15px  primary body, buttons */
  --fs-md:   1rem;      /* 16px   larger body, FAQ */
  --fs-lg:   1.2rem;    /* ~19px  card titles */
  --fs-xl:   1.5rem;    /* 24px   stripe headings */
  --fs-2xl:  2.8rem;    /* display numbers (countdown) */

  /* Type — line-height */
  --lh-tight:   1;
  --lh-heading: 1.1;
  --lh-body:    1.6;
  --lh-loose:   1.75;

  /* Type — letter-spacing */
  --ls-sm:   0.05em;
  --ls:      0.08em;
  --ls-md:   0.10em;
  --ls-lg:   0.15em;
  --ls-xl:   0.20em;
  --ls-2xl:  0.40em;

  /* Spacing — 8px base grid */
  --sp-1:   0.5rem;   /*  8px */
  --sp-2:   1rem;     /* 16px */
  --sp-3:   1.5rem;   /* 24px */
  --sp-4:   2rem;     /* 32px */
  --sp-5:   2.5rem;   /* 40px */
  --sp-6:   3rem;     /* 48px */
  --sp-8:   4rem;     /* 64px */
  --sp-10:  5rem;     /* 80px */
  --sp-12:  6rem;     /* 96px */

  /* Layout */
  --container:  1200px;
  --pad-x:      1.25rem;   /* section horiz pad — mobile */
  --pad-x-lg:   3rem;      /* section horiz pad — desktop */
  --pad-y:      5rem;      /* section vert pad  — mobile */
  --pad-y-lg:   8rem;      /* section vert pad  — desktop */
  --col-gap:    1.5rem;
  --col-gap-sm: 1.25rem;

  /* Border radius (same as /play, extended) */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius:      8px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-full: 100px;

  /* Shadows */
  --shadow-gold:    0 12px 35px rgba(212, 160, 23, 0.45);
  --shadow-gold-sm: 0 8px  20px rgba(212, 160, 23, 0.25);
  --shadow-gold-lg: 0 0    60px rgba(212, 160, 23, 0.10);

  /* Transitions */
  --ease:      0.2s ease;
  --ease-slow: 0.35s ease;
  --ease-nav:  0.4s ease;

  /* Z-index */
  --z-nav: 1000;

  /* ── Legacy aliases — keep old names working in HTML/inline styles */
  --navy:   var(--bg);
  --navy-2: var(--bg2);
  --navy-3: var(--bg3);
  --navy-4: var(--bg4);
  --gold-2: var(--gold2);
  --gold-3: var(--gold3);
  --white:  var(--text);
  --gray-1: var(--text2);
  --gray-2: var(--text3);
  --gray-3: var(--text4);
}

/* ─── RESET ──────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html  { scroll-behavior: smooth; font-size: 16px; }
body  {
  font-family:  var(--font);
  background:   var(--bg);
  color:        var(--text);
  overflow-x:   hidden;
  line-height:  var(--lh-body);
}
a   { text-decoration: none; }
img { display: block; max-width: 100%; }

/* ─── LAYOUT UTILITIES ───────────────────────────────────────── */
.container   { max-width: var(--container); margin: 0 auto; }
.text-center { text-align: center; }
.mx-auto     { margin-inline: auto; }

/* Grid system */
.grid      { display: grid; gap: var(--col-gap); }
.grid-2    { grid-template-columns: repeat(2, 1fr); }
.grid-3    { grid-template-columns: repeat(3, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
@media (max-width: 767px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* ─── NAVIGATION ─────────────────────────────────────────────── */
.nav {
  position:   fixed;
  inset:      0 0 auto 0;
  z-index:    var(--z-nav);
  display:    flex;
  align-items: center;
  justify-content: space-between;
  padding:    1.1rem var(--pad-x);
  transition: background var(--ease-nav), backdrop-filter var(--ease-nav), border-color var(--ease-nav);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background:         rgba(7, 16, 31, 0.96);
  backdrop-filter:    blur(16px);
  border-bottom-color: var(--gold-border);
}
.nav-logo               { display: flex; align-items: center; }
.nav-logo .logo-img     { height: 50px; width: auto; display: block; }
.nav-links              { display: none; list-style: none; gap: var(--sp-5); }
.nav-links a {
  color:          var(--text2);
  font-size:      var(--fs-sm);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: var(--ls-md);
  transition:     color var(--ease);
}
.nav-links a:hover { color: var(--gold3); }
.nav-cta {
  background:     var(--gold2);
  color:          var(--bg);
  padding:        0.55rem 1.3rem;
  border-radius:  var(--radius-xs);
  font-weight:    700;
  font-size:      var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--ls);
  transition:     background var(--ease), transform var(--ease);
}
.nav-cta:hover { background: var(--gold3); transform: translateY(-1px); }
@media (min-width: 768px) {
  .nav        { padding: 1.25rem var(--pad-x-lg); }
  .nav-links  { display: flex; }
}

/* ─── HERO ───────────────────────────────────────────────────── */
.hero {
  position:            relative;
  min-height:          100svh;
  display:             flex;
  flex-direction:      column;
  align-items:         center;
  justify-content:     center;
  text-align:          center;
  padding:             7rem var(--pad-x) var(--sp-10);
  overflow:            hidden;
  background-image:    url('../img/fondo-wc2026.jpg');
  background-size:     cover;
  background-position: center;
  background-attachment: fixed;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to bottom, var(--bg) 0%, rgba(7,16,31,.8) 50%, var(--bg) 100%),
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 100% 100%, 64px 64px, 64px 64px;
  z-index: 1;
}
.hero::after {
  content: '';
  position:   absolute;
  bottom:     -10%;
  left:       50%;
  transform:  translateX(-50%);
  width:      140%;
  height:     60%;
  background: radial-gradient(ellipse at center, rgba(26,49,102,.7) 0%, transparent 70%);
  pointer-events: none;
}
.hero-rings {
  position:       absolute;
  inset:          0;
  display:        flex;
  align-items:    center;
  justify-content: center;
  pointer-events: none;
}
.hero-ring { position: absolute; border-radius: 50%; border: 1px solid var(--gold-border); }
.hero-ring:nth-child(1) { width: 520px; height: 520px; opacity: .60; }
.hero-ring:nth-child(2) { width: 700px; height: 700px; opacity: .35; }
.hero-ring:nth-child(3) { width: 900px; height: 900px; opacity: .18; }
.hero-bg-glow {
  position:   absolute;
  top:        30%;
  left:       50%;
  transform:  translate(-50%, -50%);
  width:      600px;
  height:     300px;
  background: radial-gradient(ellipse, rgba(212,160,23,.06) 0%, transparent 70%);
  pointer-events: none;
}
.hero-content {
  position:    relative;
  z-index:     2;
  max-width:   960px;
  will-change: transform, opacity;
}
.hero-badge {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--sp-1);
  background:     var(--gold-pale);
  border:         1px solid var(--gold-border);
  color:          var(--gold3);
  padding:        0.45rem 1.1rem;
  border-radius:  var(--radius-full);
  font-size:      var(--fs-2xs);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom:  1.75rem;
}
.hero-title {
  font-family:   var(--font-d);
  font-size:     clamp(4rem, 14vw, 10rem);
  line-height:   var(--lh-tight);
  letter-spacing: 3px;
  margin-bottom: 0.4rem;
}
.hero-title .gold { color: var(--gold3); }
.hero-subtitle {
  font-family:    var(--font-c);
  font-size:      clamp(0.9rem, 2.5vw, 1.4rem);
  font-weight:    700;
  letter-spacing: var(--ls-2xl);
  text-transform: uppercase;
  color:          var(--text3);
  margin-bottom:  var(--sp-4);
}
.hero-desc {
  font-size:     clamp(1rem, 1.8vw, 1.1rem);
  color:         var(--text2);
  max-width:     580px;
  margin:        0 auto var(--sp-5);
  font-weight:   300;
  line-height:   var(--lh-loose);
}
.hero-actions {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            0.9rem;
  margin-bottom:  3.5rem;
}
@media (min-width: 480px) {
  .hero-actions { flex-direction: row; justify-content: center; }
}

/* Countdown */
.countdown-label-top {
  font-size:      var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-xl);
  color:          var(--text3);
  font-weight:    700;
  margin-bottom:  0.9rem;
}
.countdown {
  display:       inline-flex;
  gap:           var(--sp-1);
  align-items:   center;
  background:    rgba(255,255,255,.03);
  border:        1px solid var(--border);
  border-radius: var(--radius-md);
  padding:       var(--sp-2) var(--sp-3);
}
.cd-item { display: flex; flex-direction: column; align-items: center; min-width: 54px; }
.cd-num  {
  font-family: var(--font-d);
  font-size:   clamp(2rem, 5vw, 2.8rem);
  color:       var(--gold3);
  line-height: var(--lh-tight);
}
.cd-lbl {
  font-size:      var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color:          var(--text3);
  font-weight:    700;
  margin-top:     0.2rem;
}
.cd-sep {
  font-family:   var(--font-d);
  font-size:     var(--fs-2xl);
  color:         var(--text4);
  margin-bottom: var(--sp-1);
}

/* Scroll indicator */
.scroll-ind {
  position:    absolute;
  bottom:      var(--sp-4);
  left:        50%;
  transform:   translateX(-50%);
  display:     flex;
  flex-direction: column;
  align-items: center;
  gap:         var(--sp-1);
  color:       var(--text4);
  font-size:   var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-xl);
  font-weight: 700;
  animation:   scrollBounce 2s ease-in-out infinite;
}
.scroll-line { width: 1px; height: 36px; background: linear-gradient(var(--gold2), transparent); }
@keyframes scrollBounce {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50%     { transform: translateX(-50%) translateY(7px); }
}

/* ─── BUTTONS ────────────────────────────────────────────────── */
.btn-primary {
  display:        inline-block;
  background:     linear-gradient(135deg, var(--gold2) 0%, var(--gold3) 100%);
  color:          var(--bg);
  padding:        0.9rem var(--sp-5);
  border-radius:  var(--radius-sm);
  font-weight:    700;
  font-size:      var(--fs-base);
  text-transform: uppercase;
  letter-spacing: var(--ls-md);
  transition:     transform var(--ease), box-shadow var(--ease);
  border:         none;
  cursor:         pointer;
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: var(--shadow-gold); }

.btn-outline {
  display:        inline-block;
  background:     transparent;
  color:          var(--text);
  border:         1px solid var(--border);
  padding:        0.9rem var(--sp-5);
  border-radius:  var(--radius-sm);
  font-weight:    600;
  font-size:      var(--fs-base);
  text-transform: uppercase;
  letter-spacing: var(--ls);
  transition:     border-color var(--ease), color var(--ease);
  cursor:         pointer;
}
.btn-outline:hover { border-color: var(--gold-border); color: var(--gold3); }

/* ─── SECTION BASE ───────────────────────────────────────────── */
.section { padding: var(--pad-y) var(--pad-x); }
@media (min-width: 768px) { .section { padding: var(--pad-y-lg) var(--pad-x-lg); } }

.sec-label {
  font-size:      var(--fs-sm);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: var(--ls-2xl);
  color:          var(--gold2);
  margin-bottom:  0.65rem;
}
.sec-title {
  font-family:   var(--font-d);
  font-size:     clamp(2.5rem, 7vw, 4.5rem);
  line-height:   var(--lh-tight);
  letter-spacing: 1.5px;
  margin-bottom: var(--sp-2);
}
.sec-desc {
  color:       var(--text2);
  font-size:   var(--fs-md);
  font-weight: 300;
  line-height: var(--lh-loose);
}

/* ─── FEATURES ───────────────────────────────────────────────── */
.features-grid {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--col-gap-sm);
  margin-top: 3.5rem;
}
.feat-card {
  flex:          1 1 100%;
  background:    var(--bg2);
  border:        1px solid var(--border);
  border-radius: var(--radius-md);
  padding:       var(--sp-4) 1.75rem;
  transition:    border-color var(--ease-slow), transform var(--ease-slow);
}
@media (min-width: 600px)  { .feat-card { flex: 1 1 calc(50%  - 0.625rem); } }
@media (min-width: 1024px) { .feat-card { flex: 1 1 calc(33.33% - 0.835rem); } }
.feat-card:hover { border-color: var(--gold-border); transform: translateY(-5px); }
.feat-icon  { font-size: 2.2rem; margin-bottom: var(--sp-2); }
.feat-title {
  font-family:    var(--font-c);
  font-size:      var(--fs-xl);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: var(--ls-sm);
  color:          var(--gold3);
  margin-bottom:  var(--sp-1);
  line-height:    1.2;
}
.feat-desc { color: var(--text2); font-size: var(--fs-md); font-weight: 300; line-height: var(--lh-body); }

/* ─── DIVIDER ────────────────────────────────────────────────── */
.divider {
  height:     1px;
  background: linear-gradient(90deg, transparent, var(--gold-border), transparent);
  max-width:  900px;
  margin:     0 auto;
}

/* ─── HOW IT WORKS ───────────────────────────────────────────── */
.steps-row {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-5);
  margin-top:     var(--sp-8);
}
@media (min-width: 768px) {
  .steps-row { flex-direction: row; align-items: flex-start; gap: var(--sp-3); }
  .step      { flex: 1; }
}
.step {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  position:       relative;
}
.step-bubble {
  width:          80px;
  height:         80px;
  border-radius:  50%;
  background:     var(--bg3);
  border:         1px solid var(--gold-border);
  display:        flex;
  align-items:    center;
  justify-content: center;
  font-size:      1.6rem;
  margin-bottom:  1.25rem;
  position:       relative;
  z-index:        1;
}
.step-num-bg {
  font-family:    var(--font-d);
  font-size:      5.5rem;
  color:          rgba(212,160,23,.06);
  position:       absolute;
  top:            -0.8rem;
  left:           50%;
  transform:      translateX(-50%);
  line-height:    1;
  pointer-events: none;
}
.step-title {
  font-family:    var(--font-c);
  font-size:      var(--fs-lg);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: var(--ls-sm);
  margin-bottom:  var(--sp-1);
}
.step-desc { color: var(--text2); font-size: var(--fs-md); font-weight: 300; max-width: 220px; line-height: var(--lh-body); }
.step-connector { display: none; }
@media (min-width: 768px) {
  .step-connector {
    display:    block;
    flex:       0 0 40px;
    height:     1px;
    background: var(--gold-border);
    margin-top: 34px;
  }
}

/* ─── PRICING ────────────────────────────────────────────────── */
.pricing-section {
  background: var(--bg2);
  position:   relative;
  overflow:   hidden;
}
.pricing-section::before,
.pricing-section::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-border), transparent);
}
.pricing-section::before { top: 0; }
.pricing-section::after  { bottom: 0; }

.pricing-ghost {
  position:       absolute;
  font-family:    var(--font-d);
  font-size:      clamp(8rem, 20vw, 18rem);
  color:          rgba(255,255,255,.02);
  top:            50%;
  left:           50%;
  transform:      translate(-50%, -50%);
  white-space:    nowrap;
  pointer-events: none;
  letter-spacing: 0.1em;
  user-select:    none;
}
.pricing-grid {
  display:        flex;
  flex-direction: column;
  gap:            var(--col-gap);
  margin-top:     3.5rem;
}
@media (min-width: 900px) {
  .pricing-grid { flex-direction: row; align-items: center; }
  .pricing-card { flex: 1; }
}
.pricing-card {
  position:      relative;
  background:    var(--bg);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       var(--sp-5) var(--sp-4);
  transition:    transform var(--ease-slow), border-color var(--ease-slow), box-shadow var(--ease-slow);
}
.pricing-card:hover { transform: translateY(-6px); border-color: var(--gold-border); }
.pricing-card.featured {
  border-color: var(--gold2);
  background:   linear-gradient(175deg, var(--bg3) 0%, var(--bg) 100%);
  box-shadow:   var(--shadow-gold-lg);
}
@media (min-width: 900px) {
  .pricing-card.featured       { transform: scale(1.05); }
  .pricing-card.featured:hover { transform: scale(1.05) translateY(-6px); }
}
.pricing-badge {
  position:       absolute;
  top:            -14px;
  left:           50%;
  transform:      translateX(-50%);
  background:     linear-gradient(135deg, var(--gold), var(--gold3));
  color:          var(--bg);
  padding:        0.28rem 1.2rem;
  border-radius:  var(--radius-full);
  font-size:      var(--fs-2xs);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: var(--ls-md);
  white-space:    nowrap;
}
.plan-tag {
  font-size:      var(--fs-sm);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: var(--ls-xl);
  color:          var(--gold2);
  margin-bottom:  0.3rem;
}
.plan-name {
  font-family:   var(--font-d);
  font-size:     2.8rem;
  letter-spacing: 2px;
  margin-bottom: 0.2rem;
}
.plan-tagline {
  color:         var(--text3);
  font-size:     var(--fs-md);
  font-weight:   300;
  margin-bottom: var(--sp-3);
  min-height:    2.6rem;
}
.plan-price-row {
  display:     flex;
  align-items: baseline;
  gap:         0.2rem;
  margin-bottom: 0.2rem;
}
.plan-cur    { font-size: 1.3rem; font-weight: 700; color: var(--gold2); }
.plan-amount { font-family: var(--font-d); font-size: 4.5rem; line-height: 1; color: var(--text); }
.plan-note   { font-size: var(--fs-xs); color: var(--text3); margin-bottom: var(--sp-3); }
.plan-limit  {
  display:       flex;
  align-items:   center;
  gap:           var(--sp-1);
  font-size:     var(--fs-md);
  color:         var(--text2);
  background:    rgba(255,255,255,.04);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       0.65rem 0.85rem;
  margin-bottom: var(--sp-3);
}
.plan-limit strong { color: var(--gold3); font-weight: 700; }
.plan-features {
  list-style:    none;
  display:       flex;
  flex-direction: column;
  gap:           0.8rem;
  margin-bottom: var(--sp-4);
}
.plan-features li {
  display:     flex;
  align-items: flex-start;
  gap:         0.7rem;
  font-size:   var(--fs-md);
  color:       var(--text2);
  font-weight: 300;
  line-height: var(--lh-body);
}
.feat-check { color: var(--gold3); font-size: 0.9rem; flex-shrink: 0; margin-top: 0.15rem; }
.feat-new {
  font-size:      var(--fs-2xs);
  font-weight:    700;
  background:     var(--gold-pale);
  color:          var(--gold3);
  padding:        0.08rem 0.4rem;
  border-radius:  var(--radius-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-sm);
  vertical-align: middle;
  margin-left:    0.25rem;
}
.plan-divider { height: 1px; background: var(--border); margin: var(--sp-3) 0; }

.btn-plan {
  display:        block;
  width:          100%;
  padding:        0.95rem;
  border-radius:  var(--radius);
  font-family:    var(--font);
  font-weight:    700;
  font-size:      0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  cursor:         pointer;
  border:         none;
  transition:     all var(--ease);
  text-align:     center;
}
.btn-plan-gold {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold3) 100%);
  color:      var(--bg);
}
.btn-plan-gold:hover { box-shadow: var(--shadow-gold-sm); transform: translateY(-2px); }
.btn-plan-ghost {
  background: transparent;
  border:     1px solid var(--gold-border) !important;
  color:      var(--gold3);
}
.btn-plan-ghost:hover { background: var(--gold-pale); }

.secure-note {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             0.4rem;
  margin-top:      0.75rem;
  font-size:       var(--fs-xs);
  color:           var(--text4);
}
.stripe-footer {
  display:         flex;
  flex-wrap:       wrap;
  align-items:     center;
  justify-content: center;
  gap:             0.75rem;
  margin-top:      var(--sp-6);
}
.stripe-pill {
  display:       inline-flex;
  align-items:   center;
  gap:           0.4rem;
  background:    rgba(255,255,255,.04);
  border:        1px solid var(--border);
  border-radius: var(--radius-full);
  padding:       0.4rem 0.9rem;
  font-size:     var(--fs-2xs);
  color:         var(--text3);
  font-weight:   600;
}

/* ─── STRIPE EXPLAINER ───────────────────────────────────────── */
.stripe-explainer {
  background:    var(--bg3);
  border:        1px solid var(--gold-border);
  border-radius: var(--radius-md);
  padding:       var(--sp-4);
  max-width:     760px;
  margin:        var(--sp-6) auto 0;
}
.stripe-explainer h3 {
  font-family:    var(--font-c);
  font-size:      var(--fs-xl);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: var(--ls);
  color:          var(--gold3);
  margin-bottom:  var(--sp-2);
}
.stripe-steps { display: flex; flex-direction: column; gap: 0.75rem; }
.stripe-step  {
  display:     flex;
  align-items: flex-start;
  gap:         0.75rem;
  font-size:   var(--fs-md);
  color:       var(--text2);
  font-weight: 300;
}
.ss-num {
  width:          30px;
  height:         30px;
  border-radius:  50%;
  background:     var(--gold-pale);
  border:         1px solid var(--gold-border);
  color:          var(--gold3);
  font-size:      var(--fs-xs);
  font-weight:    700;
  display:        flex;
  align-items:    center;
  justify-content: center;
  flex-shrink:    0;
  margin-top:     0.1rem;
}

/* ─── FAQ ────────────────────────────────────────────────────── */
.faq-list {
  max-width:      780px;
  margin:         3.5rem auto 0;
  display:        flex;
  flex-direction: column;
  gap:            0.9rem;
}
.faq-item {
  background:    var(--bg2);
  border:        1px solid var(--border);
  border-radius: var(--radius-md);
  overflow:      hidden;
  transition:    border-color var(--ease);
}
.faq-item.open { border-color: var(--gold-border); }
.faq-q {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             var(--sp-2);
  padding:         1.25rem var(--sp-3);
  cursor:          pointer;
  font-weight:     600;
  font-size:       var(--fs-md);
  user-select:     none;
  transition:      color var(--ease);
}
.faq-q:hover             { color: var(--gold3); }
.faq-arrow               { color: var(--gold2); font-size: var(--fs-md); transition: transform var(--ease-slow); flex-shrink: 0; }
.faq-item.open .faq-arrow { transform: rotate(180deg); }
.faq-a {
  max-height:  0;
  overflow:    hidden;
  color:       var(--text2);
  font-size:   var(--fs-base);
  font-weight: 300;
  line-height: var(--lh-loose);
  transition:  max-height var(--ease-slow), padding var(--ease-slow);
}
.faq-item.open .faq-a { max-height: 260px; padding: 0 var(--sp-3) 1.35rem; }

/* ─── CONTACT ────────────────────────────────────────────────── */
.contact-section {
  background: var(--bg2);
  position:   relative;
  overflow:   hidden;
}
.contact-section::before,
.contact-section::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-border), transparent);
}
.contact-section::before { top: 0; }
.contact-section::after  { bottom: 0; }

.contact-grid {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-6);
  margin-top:     3.5rem;
}
@media (min-width: 900px) {
  .contact-grid     { flex-direction: row; align-items: flex-start; gap: var(--sp-8); }
  .contact-info     { flex: 0 0 300px; }
  .contact-form-wrap { flex: 1; }
}
.contact-info-item {
  display:       flex;
  align-items:   flex-start;
  gap:           var(--sp-2);
  margin-bottom: 1.75rem;
}
.ci-icon {
  width:          44px;
  height:         44px;
  border-radius:  var(--radius-md);
  background:     var(--gold-pale);
  border:         1px solid var(--gold-border);
  display:        flex;
  align-items:    center;
  justify-content: center;
  font-size:      1.2rem;
  flex-shrink:    0;
}
.ci-label {
  font-size:      var(--fs-xs);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: var(--ls-lg);
  color:          var(--gold2);
  margin-bottom:  0.25rem;
}
.ci-value           { font-size: var(--fs-md); color: var(--text2); font-weight: 300; line-height: var(--lh-body); }
.ci-value a         { color: var(--text2); transition: color var(--ease); }
.ci-value a:hover   { color: var(--gold3); }
.contact-social     { display: flex; gap: 0.75rem; margin-top: var(--sp-1); }
.social-btn {
  display:       inline-flex;
  align-items:   center;
  gap:           0.4rem;
  background:    rgba(255,255,255,.04);
  border:        1px solid var(--border);
  color:         var(--text2);
  padding:       0.5rem 0.9rem;
  border-radius: var(--radius);
  font-size:     var(--fs-sm);
  font-weight:   600;
  transition:    border-color var(--ease), color var(--ease);
}
.social-btn:hover { border-color: var(--gold-border); color: var(--gold3); }

/* Contact form */
.cf-row { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-2); }
@media (min-width: 600px) {
  .cf-row-2        { flex-direction: row; }
  .cf-row-2 .cf-field { flex: 1; }
}
.cf-field { display: flex; flex-direction: column; gap: 0.45rem; }
.cf-label {
  font-size:      var(--fs-sm);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color:          var(--text3);
}
.cf-label span { color: var(--gold3); margin-left: 2px; }

.cf-input,
.cf-select,
.cf-textarea {
  background:   rgba(255,255,255,.04);
  border:       1px solid var(--border);
  border-radius: var(--radius);
  padding:      0.85rem var(--sp-2);
  color:        var(--text);
  font-family:  var(--font);
  font-size:    var(--fs-base);
  font-weight:  300;
  transition:   border-color var(--ease), background var(--ease);
  outline:      none;
  width:        100%;
  -webkit-appearance: none;
  appearance:   none;
}
.cf-input::placeholder,
.cf-textarea::placeholder { color: var(--text4); }
.cf-input:focus,
.cf-select:focus,
.cf-textarea:focus {
  border-color: var(--gold-border);
  background:   rgba(212,160,23,.05);
}
.cf-select {
  cursor:              pointer;
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a8fb8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right var(--sp-2) center;
  padding-right:       2.5rem;
}
.cf-select option { background: var(--bg2); color: var(--text); }
.cf-textarea { resize: vertical; min-height: 140px; line-height: var(--lh-body); }

.cf-check-row {
  display:     flex;
  align-items: flex-start;
  gap:         0.75rem;
  margin-top:  var(--sp-1);
}
.cf-checkbox {
  width:        18px;
  height:       18px;
  border:       1px solid var(--border);
  border-radius: var(--radius-xs);
  background:   rgba(255,255,255,.04);
  flex-shrink:  0;
  margin-top:   2px;
  cursor:       pointer;
  accent-color: var(--gold2);
}
.cf-check-label { font-size: var(--fs-sm); color: var(--text3); font-weight: 300; line-height: 1.55; }
.cf-check-label a { color: var(--gold2); text-decoration: underline; text-underline-offset: 3px; }

.btn-submit {
  display:        inline-flex;
  align-items:    center;
  gap:            0.6rem;
  background:     linear-gradient(135deg, var(--gold) 0%, var(--gold3) 100%);
  color:          var(--bg);
  border:         none;
  padding:        var(--sp-2) var(--sp-5);
  border-radius:  var(--radius);
  font-family:    var(--font);
  font-weight:    700;
  font-size:      var(--fs-base);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  cursor:         pointer;
  transition:     transform var(--ease), box-shadow var(--ease), opacity var(--ease);
  margin-top:     1.25rem;
}
.btn-submit:hover     { transform: translateY(-2px); box-shadow: var(--shadow-gold-sm); }
.btn-submit:disabled  { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-submit .btn-spinner       { display: none; }
.btn-submit.loading .btn-spinner { display: inline-block; }
.btn-submit.loading .btn-text   { display: none; }

@keyframes spin { to { transform: rotate(360deg); } }
.spinner-ring {
  width:        16px;
  height:       16px;
  border:       2px solid rgba(7,16,31,.3);
  border-top-color: var(--bg);
  border-radius: 50%;
  animation:    spin 0.7s linear infinite;
  display:      inline-block;
}

.cf-msg {
  display:     none;
  align-items: center;
  gap:         0.75rem;
  padding:     var(--sp-2) 1.25rem;
  border-radius: var(--radius);
  font-size:   var(--fs-base);
  font-weight: 400;
  margin-top:  var(--sp-2);
}
.cf-msg.show    { display: flex; }
.cf-msg-ok  { background: var(--success-bg); border: 1px solid var(--success-bd); color: var(--success); }
.cf-msg-err { background: var(--error-bg);   border: 1px solid var(--error-bd);   color: var(--error); }

/* ─── FINAL CTA ──────────────────────────────────────────────── */
.final-cta {
  position:   relative;
  text-align: center;
  padding:    var(--sp-12) var(--pad-x);
  overflow:   hidden;
}
.final-cta::before {
  content:        'MUNDIAL 2026';
  position:       absolute;
  font-family:    var(--font-d);
  font-size:      clamp(4rem, 12vw, 11rem);
  color:          rgba(255,255,255,.025);
  top:            50%;
  left:           50%;
  transform:      translate(-50%, -50%);
  white-space:    nowrap;
  pointer-events: none;
  letter-spacing: 0.08em;
}
.final-cta-inner { position: relative; z-index: 1; }

/* ─── FOOTER ─────────────────────────────────────────────────── */
footer {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding:    3.5rem var(--pad-x) var(--sp-4);
}
.footer-grid {
  max-width:      var(--container);
  margin:         0 auto;
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-5);
}
@media (min-width: 768px) {
  .footer-grid { flex-direction: row; justify-content: space-between; }
}
.footer-brand .f-logo {
  font-family:   var(--font-d);
  font-size:     1.4rem;
  letter-spacing: 2px;
  color:         var(--gold3);
  margin-bottom: 0.6rem;
}
.footer-brand p  { font-size: var(--fs-sm); color: var(--text3); font-weight: 300; max-width: 260px; line-height: var(--lh-body); }
.footer-col h4   {
  font-size:      var(--fs-2xs);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: var(--ls-xl);
  color:          var(--text3);
  margin-bottom:  var(--sp-2);
}
.footer-col ul   { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; }
.footer-col a    { color: var(--text2); font-size: var(--fs-sm); font-weight: 300; transition: color var(--ease); }
.footer-col a:hover { color: var(--gold3); }
.footer-bottom {
  max-width:       var(--container);
  margin:          var(--sp-5) auto 0;
  padding-top:     var(--sp-3);
  border-top:      1px solid var(--border);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             0.75rem;
  font-size:       var(--fs-xs);
  color:           var(--text4);
  text-align:      center;
}
@media (min-width: 768px) { .footer-bottom { flex-direction: row; justify-content: space-between; } }
.footer-legal       { display: flex; gap: 1.25rem; }
.footer-legal a     { color: var(--text4); transition: color var(--ease); }
.footer-legal a:hover { color: var(--text3); }

/* ─── REGLAMENTO (landing) ───────────────────────────────────── */
.rules-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--col-gap);
  margin-top:            3.5rem;
}
@media (min-width: 768px) {
  .rules-grid { grid-template-columns: repeat(3, 1fr); }
}

.rcl-card {
  position:       relative;
  background:     var(--bg2);
  border:         1px solid var(--border);
  border-radius:  var(--radius-lg);
  padding:        var(--sp-4) 1.75rem;
  display:        flex;
  flex-direction: column;
  gap:            var(--col-gap-sm);
  transition:     border-color var(--ease-slow), transform var(--ease-slow);
}
.rcl-card:hover { border-color: var(--gold-border); transform: translateY(-5px); }
.rcl-card.rcl-featured {
  border-color: var(--gold-border);
  background:   linear-gradient(160deg, var(--bg3) 0%, var(--bg2) 100%);
  box-shadow:   var(--shadow-gold-lg);
}
.rcl-badge-top {
  position:       absolute;
  top:            -1px;
  right:          1.25rem;
  background:     linear-gradient(135deg, var(--gold2), var(--gold3));
  color:          var(--bg);
  font-size:      var(--fs-2xs);
  font-weight:    800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding:        0.3rem 0.85rem;
  border-radius:  0 0 var(--radius) var(--radius);
}
.rcl-header { display: flex; align-items: center; gap: var(--sp-2); }
.rcl-icon   { font-size: 2rem; line-height: 1; flex-shrink: 0; }
.rcl-phase  {
  font-size:      var(--fs-sm);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: var(--ls-xl);
  color:          var(--gold2);
  margin-bottom:  0.2rem;
}
.rcl-title {
  font-family:    var(--font-c);
  font-size:      var(--fs-lg);
  font-weight:    800;
  text-transform: uppercase;
  letter-spacing: var(--ls-sm);
  color:          var(--text);
  line-height:    var(--lh-heading);
}
.rcl-body { display: flex; flex-direction: column; gap: 0.75rem; flex: 1; }
.rcl-note {
  font-size:   var(--fs-sm);
  color:       var(--text3);
  font-style:  italic;
  line-height: 1.55;
  padding:     0.65rem 0.85rem;
  background:  rgba(255,255,255,.03);
  border-left: 2px solid var(--gold-border);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.rcl-row   { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.rcl-desc  { display: flex; flex-direction: column; gap: 0.15rem; }
.rcl-desc strong { font-size: var(--fs-md); color: var(--text);  font-weight: 700; }
.rcl-desc span   { font-size: var(--fs-md); color: var(--text3); font-weight: 300; }
.rcl-sep   { height: 1px; background: var(--border); margin: 0.1rem 0; }
.rcl-alert {
  margin-top:    var(--sp-1);
  padding:       0.7rem 0.9rem;
  background:    rgba(255,100,80,.07);
  border:        1px solid rgba(255,100,80,.20);
  border-radius: var(--radius);
  font-size:     var(--fs-md);
  color:         var(--text2);
  line-height:   1.55;
}
.rcl-alert strong { color: #ff8070; }

/* Points badges */
.pts-badge {
  flex-shrink:    0;
  display:        inline-flex;
  align-items:    center;
  justify-content: center;
  padding:        0.35rem 0.75rem;
  border-radius:  var(--radius-full);
  font-family:    var(--font-c);
  font-size:      var(--fs-sm);
  font-weight:    800;
  text-transform: uppercase;
  letter-spacing: var(--ls-sm);
  white-space:    nowrap;
  background:     rgba(255,255,255,.06);
  border:         1px solid var(--border);
  color:          var(--text2);
}
.pts-badge.pts-gold   { background: var(--gold-pale); border-color: var(--gold-border); color: var(--gold3); }
.pts-badge.pts-bonus  { background: rgba(100,200,120,.08); border-color: rgba(100,200,120,.3); color: #80e09a; }
.pts-badge.pts-xl     {
  background:    linear-gradient(135deg, rgba(212,160,23,.2), rgba(245,200,66,.15));
  border-color:  var(--gold2);
  color:         var(--gold3);
  font-size:     var(--fs-md);
  padding:       0.4rem 0.9rem;
}

/* Points summary strip */
.pts-summary {
  margin-top:    var(--sp-5);
  background:    var(--bg2);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       1.75rem var(--sp-4);
  text-align:    center;
}
.pts-summary-label {
  font-size:      var(--fs-xs);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: var(--ls-xl);
  color:          var(--text3);
  margin-bottom:  var(--sp-3);
}
.pts-summary-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 1.25rem; }
.psr-item  { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }
.psr-num   { font-family: var(--font-d); font-size: 2.8rem; color: var(--gold3); line-height: 1; }
.psr-txt   {
  font-size:      var(--fs-2xs);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: var(--ls-md);
  color:          var(--text3);
  text-align:     center;
  line-height:    1.4;
}
.psr-bonus .psr-num { color: #80e09a; font-size: 2.4rem; }
.psr-star  .psr-num {
  font-size:  3.2rem;
  background: linear-gradient(135deg, var(--gold2), var(--gold3));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.psr-sep { font-family: var(--font-d); font-size: var(--fs-xl); color: var(--text4); padding-bottom: 1.2rem; }

/* Deadlines banner */
.rule-deadlines {
  margin-top:  var(--sp-4);
  display:     flex;
  align-items: flex-start;
  gap:         var(--col-gap-sm);
  background:  var(--bg3);
  border:      1px solid var(--gold-border);
  border-radius: var(--radius-md);
  padding:     var(--sp-3) 1.75rem;
}
.rdl-icon  { font-size: 1.8rem; flex-shrink: 0; line-height: 1; margin-top: 0.1rem; }
.rdl-body  { display: flex; flex-direction: column; gap: 0.4rem; }
.rdl-title {
  font-family:    var(--font-c);
  font-size:      var(--fs-md);
  font-weight:    800;
  text-transform: uppercase;
  letter-spacing: var(--ls-sm);
  color:          var(--gold3);
  margin-bottom:  0.25rem;
}
.rdl-body p          { font-size: var(--fs-sm); color: var(--text2); line-height: var(--lh-body); }
.rdl-body p strong   { color: var(--text); }

/* ─── ANIMATIONS & REVEAL ────────────────────────────────────── */
.reveal {
  opacity:    0;
  transform:  translateY(24px);
  transition: opacity var(--ease-slow), transform var(--ease-slow);
}
.reveal.visible    { opacity: 1; transform: translateY(0); }
.reveal-delay-1    { transition-delay: 0.10s; }
.reveal-delay-2    { transition-delay: 0.20s; }
.reveal-delay-3    { transition-delay: 0.30s; }