/* theme: custom — Chicken Road Chile twilight arcade */
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@500;700;800;900&family=Outfit:wght@500;600;700;800&display=swap");

:root {
  --header-bg: #3D435B;
  --header-color: #FFFFFF;
  --header-hover: #C8D1FF;
  --header-border: #515A7A;

  --page-bg: #414968;
  --page-color: #F4F5FA;
  --body-bg: #171A2A;
  --ink: #F4F5FA;
  --ink-soft: rgba(244, 245, 250, 0.78);
  --ink-faint: rgba(244, 245, 250, 0.56);

  --footer-bg: #292E45;
  --footer-color: #DDE1EF;
  --footer-hover: #FFFFFF;

  --link-color: #AEBBEE;
  --list-mark: #6F7FBE;

  --brand: #AEBBEE;
  --brand-deep: #6F7FBE;
  --green: #6F7FBE;
  --gold: #C8D1FF;
  --line: rgba(81, 90, 122, 0.55);
  --surface: #2A3050;
  --surface-raised: #353C5C;
  --danger: #E07A8A;

  --easy: #7DDBB0;
  --mid: #C8D1FF;
  --hard: #AEBBEE;
  --hardcore: #E07A8A;
}

body {
  font-family: Nunito, Arial, Helvetica, sans-serif;
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 32%),
    radial-gradient(circle at 88% 6%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 26%),
    linear-gradient(180deg, #1c2034 0%, var(--body-bg) 42%);
}

h1, h2, h3 {
  font-family: Outfit, Nunito, sans-serif;
  font-weight: 800;
}

.topbar { position: sticky; }

.hero-copy h1 { max-width: 18ch; }

.pill-link {
  color: #171A2A;
  background: linear-gradient(145deg, #C8D1FF, var(--brand));
  box-shadow: 0 16px 38px color-mix(in srgb, var(--brand) 32%, transparent);
}

.solid-link {
  color: #171A2A;
  background: linear-gradient(145deg, #C8D1FF, var(--brand-deep));
  box-shadow: 0 16px 38px color-mix(in srgb, var(--brand) 24%, transparent);
}

.ghost-link {
  color: var(--ink);
  background: rgba(61, 67, 91, 0.55);
  border-color: var(--header-border);
}

.hero-stage {
  border-color: var(--header-border);
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--brand) 16%, transparent), transparent 38%),
    linear-gradient(145deg, #3D435B 0%, #252a42 52%, #171A2A 100%);
}

.hero-stage::before {
  background: radial-gradient(circle, color-mix(in srgb, var(--brand) 30%, transparent), transparent 64%);
}

.hero-stage::after {
  background: radial-gradient(circle, color-mix(in srgb, var(--gold) 16%, transparent), transparent 64%);
}

.small-label,
.tag {
  color: #C8D1FF;
  border-color: color-mix(in srgb, var(--brand) 40%, transparent);
  background: rgba(174, 187, 238, 0.12);
}

.small-label::before { background: var(--gold); box-shadow: 0 0 16px color-mix(in srgb, var(--gold) 70%, transparent); }

.brand-lockup__logo,
.brand-lockup__sign {
  box-shadow: 0 12px 32px color-mix(in srgb, var(--brand) 34%, transparent);
}

.cta-band {
  border-color: color-mix(in srgb, var(--brand) 32%, transparent);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--brand) 16%, transparent), color-mix(in srgb, var(--list-mark) 10%, transparent)),
    rgba(41, 46, 69, 0.72);
}

.dock-cta__panel {
  background: rgba(61, 67, 91, 0.94);
  border-color: var(--header-border);
}

.media-frame {
  border-color: var(--header-border);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--brand) 14%, transparent), color-mix(in srgb, var(--list-mark) 8%, transparent)),
    var(--surface);
}

.hero-visual {
  overflow: hidden;
  border: 1px solid var(--header-border);
  border-radius: 22px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.32);
}

.hero-visual img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--header-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
}

.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 4px auto;
  border-radius: 2px;
  background: var(--header-color);
}

.glass,
.info-card.glass,
.offer-ticket.glass {
  background: rgba(42, 48, 80, 0.78);
  backdrop-filter: blur(16px);
  border: 1px solid var(--header-border);
}

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.revealed {
  opacity: 1;
  transform: none;
}

.facts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.fact-card { padding: 16px 18px; }

.fact-label {
  display: block;
  margin-bottom: 6px;
  color: var(--ink-faint);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fact-value {
  color: var(--gold);
  font-size: 1.02rem;
  font-weight: 800;
}

.fact-card--wide { grid-column: 1 / -1; }

.stack-gap { margin-top: 28px; }

.steps {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: cr-step;
}

.steps li {
  position: relative;
  padding: 14px 14px 14px 54px;
  border: 1px solid var(--header-border);
  border-radius: 16px;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.04);
  counter-increment: cr-step;
}

.steps li::before {
  content: counter(cr-step);
  position: absolute;
  left: 16px;
  top: 14px;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  color: #171A2A;
  background: linear-gradient(145deg, var(--gold), var(--brand));
  font-size: 0.78rem;
  font-weight: 800;
}

.diff-grid {
  display: grid;
  gap: 12px;
  margin-top: 8px;
}

.diff-card {
  padding: 18px;
  border: 2px solid var(--header-border);
  border-radius: 20px;
  background: linear-gradient(145deg, var(--surface), var(--surface-raised));
}

.diff-card h3 { margin-bottom: 6px; }

.diff-holes {
  margin: 0 0 8px;
  color: var(--gold);
  font-size: 1.35rem;
  font-weight: 800;
}

.diff-card--easy { border-color: color-mix(in srgb, var(--easy) 55%, var(--header-border)); }
.diff-card--medio { border-color: color-mix(in srgb, var(--mid) 70%, var(--header-border)); }
.diff-card--dificil { border-color: color-mix(in srgb, var(--hard) 70%, var(--header-border)); }
.diff-card--hardcore { border-color: color-mix(in srgb, var(--hardcore) 70%, var(--header-border)); }

.diff-card--easy .tag { color: var(--easy); border-color: color-mix(in srgb, var(--easy) 40%, transparent); background: color-mix(in srgb, var(--easy) 12%, transparent); }
.diff-card--hardcore .tag { color: var(--hardcore); border-color: color-mix(in srgb, var(--hardcore) 40%, transparent); background: color-mix(in srgb, var(--hardcore) 12%, transparent); }

.casino-grid {
  display: grid;
  gap: 12px;
}

.casino-card h3 { margin-bottom: 8px; }

.eval-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.eval-card { padding: 16px; text-align: center; }

.eval-score {
  margin: 8px 0;
  color: var(--gold);
  font-size: 1.7rem;
  font-weight: 800;
}

.eval-crit { color: var(--ink-faint); font-size: 0.85rem; }
.eval-note { color: var(--brand); font-size: 0.82rem; }

.split-cards--duo { grid-template-columns: 1fr; }

.pros h3 { color: var(--easy); }
.cons h3 { color: var(--danger); }

.check-list,
.x-list,
.pros ul,
.cons ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.check-list li,
.x-list li,
.pros li,
.cons li {
  position: relative;
  padding: 8px 0 8px 22px;
  color: var(--ink-soft);
}

.check-list li::before,
.pros li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--easy);
  font-weight: 800;
}

.x-list li::before,
.cons li::before {
  content: "×";
  position: absolute;
  left: 0;
  color: var(--danger);
  font-weight: 800;
}

.trust-plaque {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--brand) 28%, transparent);
  border-radius: 16px;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--brand) 8%, transparent);
  font-size: 0.88rem;
}

.floating-cta {
  position: fixed;
  right: 20px;
  bottom: 88px;
  z-index: 45;
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px);
  transition: 0.3s ease;
}

.floating-cta.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.text-panel ol,
.text-panel ul { padding-left: 1.2rem; }
.text-panel li { margin-bottom: 0.35rem; }

.quick-table th {
  background: linear-gradient(145deg, rgba(174, 187, 238, 0.22), rgba(111, 127, 190, 0.14));
}

.section-nav {
  gap: 14px;
  font-size: 0.84rem;
}

.age-note {
  border-color: color-mix(in srgb, var(--gold) 28%, transparent);
  background: rgba(200, 209, 255, 0.08);
}

.faq-list details {
  border-color: var(--header-border);
}

@media (max-width: 899px) {
  .nav-toggle { display: block; }

  .section-nav {
    position: absolute;
    top: 76px;
    right: 16px;
    left: 16px;
    display: none;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--header-border);
    border-radius: 16px;
    background: rgba(61, 67, 91, 0.96);
    backdrop-filter: blur(16px);
  }

  .section-nav.is-open { display: flex; }
}

@media (min-width: 700px) {
  .split-cards--duo,
  .casino-grid { grid-template-columns: 1fr 1fr; }
  .diff-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eval-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .hero-stage {
    grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr);
  }

  .diff-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
  .section-nav { gap: 18px; font-size: 0.9rem; }
}