/* Landing de anúncio — visual próprio, mais vendável que o portal. */
:root {
  --bg: #0b100e;
  --panel: #131a17;
  --card: #1a221e;
  --line: #27332b;
  --text: #edf3ee;
  --soft: #aebdaf;
  --mute: #7b8b7d;
  --neon: #00e676;
  --neon-lt: #75ff9e;
  --mint: #87fac5;
  --amber: #ffd23f;
  --red: #ff5c5c;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  line-height: 1.55; -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* ── topo ─────────────────────────────────────── */
.nav { padding: 22px 0; }
.nav .wrap { display: flex; align-items: center; gap: 12px; }
.nav img { width: 40px; height: 40px; border-radius: 11px; background: var(--panel);
  padding: 3px; }
.nav b { font-size: 1.08rem; letter-spacing: -.01em; }
.nav span { display: block; font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--neon); font-weight: 700; }

/* ── hero ─────────────────────────────────────── */
.hero { position: relative; overflow: hidden; padding: 56px 0 44px; }
.hero::before {
  content: ""; position: absolute; top: -280px; left: 50%;
  transform: translateX(-50%); width: 900px; height: 560px;
  background: radial-gradient(closest-side, rgba(0,230,118,.16), transparent 70%);
  pointer-events: none;
}
.hero .wrap { position: relative; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .68rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--neon);
  background: rgba(0,230,118,.09); border: 1px solid rgba(0,230,118,.22);
  padding: 7px 14px; border-radius: 99px; margin-bottom: 22px;
}
h1 {
  font-size: clamp(1.85rem, 5.2vw, 3.5rem); line-height: 1.1;
  letter-spacing: -.035em; margin: 0 0 18px; max-width: 16ch;
  /* nome proprio comprido nao pode furar a coluna */
  overflow-wrap: break-word;
}
h1 em { font-style: normal; color: var(--neon); }
.sub { font-size: clamp(1rem, 1.9vw, 1.22rem); color: var(--soft);
  max-width: 56ch; margin: 0 0 30px; }

.cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--neon); color: #042915; font-weight: 800;
  font-size: 1.04rem; padding: 17px 34px; border-radius: 14px;
  box-shadow: 0 10px 34px rgba(0,230,118,.24);
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.cta:hover { transform: translateY(-2px); filter: brightness(1.06);
  box-shadow: 0 14px 40px rgba(0,230,118,.32); }
.cta.lg { font-size: 1.12rem; padding: 19px 40px; }
.after-cta { font-size: .85rem; color: var(--mute); margin-top: 14px; }

/* ── bloco ao vivo ────────────────────────────── */
.live { padding: 20px 0 64px; }
.sec-head { text-align: center; margin-bottom: 26px; }
.sec-head .tag { font-size: .66rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--mute); }
.sec-head h2 { font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: -.025em;
  margin: 8px 0 6px; }
.sec-head p { color: var(--soft); margin: 0; }

.panel {
  background: linear-gradient(180deg, var(--panel), #101613);
  border: 1px solid var(--line); border-radius: 22px;
  padding: 26px; box-shadow: 0 24px 70px rgba(0,0,0,.45);
}

.live-top { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--neon);
  box-shadow: 0 0 0 4px rgba(0,230,118,.16); animation: pulse 1.9s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 9px rgba(0,230,118,0); } }
.live-top span { font-size: .7rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--neon); }
.live-top .when { margin-left: auto; font-size: .78rem; color: var(--mute); }

/* confronto */
.match { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 18px; padding: 8px 0 24px; }
.side { text-align: center; min-width: 0; }
.side img { width: 76px; height: 76px; object-fit: contain; margin: 0 auto 12px;
  background: var(--card); border-radius: 18px; padding: 8px; }
.side .nm { font-weight: 800; font-size: 1.08rem; letter-spacing: -.01em;
  overflow-wrap: anywhere; }
.side .role { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mute); margin-top: 3px; }
.vs { text-align: center; min-width: 0; }
.vs .h { font-size: 1.9rem; font-weight: 800; color: var(--neon); line-height: 1;
  font-variant-numeric: tabular-nums; }
.vs .lg { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--mute); margin-top: 6px; }

/* cards de estatística */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stat {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 18px 12px; text-align: center; transition: .18s;
}
.stat:hover { border-color: rgba(0,230,118,.4); transform: translateY(-3px); }
.stat .ic { width: 42px; height: 42px; margin: 0 auto 10px; border-radius: 12px;
  background: rgba(0,230,118,.08); display: grid; place-items: center; }
.stat .v { font-size: 1.85rem; font-weight: 800; color: var(--neon);
  line-height: 1; font-variant-numeric: tabular-nums; }
.stat .k { font-size: .74rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--soft); margin-top: 7px; }
.stat .hint { font-size: .72rem; color: var(--mute); margin-top: 4px; }

.panel-cta { margin-top: 24px; text-align: center; }
.panel-note { font-size: .78rem; color: var(--mute); margin-top: 12px; }

/* ── como funciona ────────────────────────────── */
.how { padding: 60px 0; border-top: 1px solid var(--line); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin-top: 34px; }
.step { background: var(--panel); border: 1px solid var(--line);
  border-radius: 18px; padding: 26px 24px; }
.step .n { width: 34px; height: 34px; border-radius: 10px; background: var(--neon);
  color: #042915; font-weight: 800; display: grid; place-items: center;
  margin-bottom: 14px; }
.step h3 { margin: 0 0 7px; font-size: 1.04rem; letter-spacing: -.01em; }
.step p { margin: 0; color: var(--soft); font-size: .93rem; }

/* ── ligas ────────────────────────────────────── */
.leagues { padding: 54px 0; border-top: 1px solid var(--line); text-align: center; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px;
  margin-top: 26px; }
.chip { background: var(--panel); border: 1px solid var(--line);
  border-radius: 99px; padding: 9px 17px; font-size: .86rem; color: var(--soft); }

/* ── fechamento ───────────────────────────────── */
.close { padding: 66px 0 74px; text-align: center; border-top: 1px solid var(--line); }
.close h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); letter-spacing: -.03em;
  margin: 0 0 14px; }
.close p { color: var(--soft); max-width: 50ch; margin: 0 auto 30px; }

footer { border-top: 1px solid var(--line); padding: 26px 0 40px;
  color: var(--mute); font-size: .82rem; text-align: center; }
/* padding generoso: como link, isto e alvo de toque — 20px de altura, que
   era o que dava so com a linha do texto, o dedo erra. */
footer a { color: var(--soft); display: inline-block; padding: 11px 12px; }
footer p { margin: 14px 0 0; }

.skeleton { background: linear-gradient(90deg, var(--card) 25%, #222c26 50%, var(--card) 75%);
  background-size: 200% 100%; animation: sh 1.3s infinite; border-radius: 12px;
  color: transparent !important; }
@keyframes sh { to { background-position: -200% 0; } }


/* ── entenda os numeros ───────────────────────── */
.explain { padding: 56px 0; border-top: 1px solid var(--line); }
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
  margin-top: 30px; }
.grid2 article { background: var(--panel); border: 1px solid var(--line);
  border-radius: 18px; padding: 24px; }
.grid2 h3 { margin: 0 0 8px; font-size: 1.02rem; letter-spacing: -.01em;
  color: var(--neon-lt); }
.grid2 p { margin: 0; color: var(--soft); font-size: .93rem; }

/* ── FAQ ──────────────────────────────────────── */
.faq { padding: 56px 0; border-top: 1px solid var(--line); }
.qa { max-width: 780px; margin: 30px auto 0; }
.qa details { background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; margin-bottom: 10px; overflow: hidden; }
.qa summary { cursor: pointer; padding: 17px 48px 17px 20px; font-weight: 700;
  font-size: .97rem; list-style: none; position: relative; }
.qa summary::-webkit-details-marker { display: none; }
/* seta propria: o marker nativo muda de forma entre navegadores */
.qa summary::after { content: ""; position: absolute; right: 20px; top: 50%;
  width: 9px; height: 9px; margin-top: -6px; border-right: 2px solid var(--neon);
  border-bottom: 2px solid var(--neon); transform: rotate(45deg);
  transition: transform .18s; }
.qa details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.qa details p { margin: 0; padding: 0 20px 18px; color: var(--soft);
  font-size: .92rem; }


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVO
   A landing virou a raiz do dominio, entao ela deixou de receber so
   trafego de desktop: quem digita futpalpites.com no celular cai aqui.
   ═══════════════════════════════════════════════════════════════ */

/* Rede de seguranca: nada justifica barra de rolagem lateral numa landing.
   As causas estao corrigidas abaixo (min-width:0 nas celulas de grid), isto
   aqui so garante que um texto novo no futuro nao estrague a pagina. */
body { overflow-x: hidden; }

/* ── tablet / notebook pequeno ─────────────────── */
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; gap: 14px; }
  .grid2 { grid-template-columns: 1fr; gap: 14px; }
  .hero { padding: 40px 0 36px; }
  .explain, .faq { padding: 46px 0; }
  .how { padding: 48px 0; }
  .leagues { padding: 44px 0; }
  .close { padding: 52px 0 58px; }
}

/* ── celular ───────────────────────────────────── */
@media (max-width: 620px) {
  .wrap { padding: 0 18px; }

  .nav { padding: 16px 0; }
  .nav img { width: 34px; height: 34px; }

  /* CTA acima da dobra: no celular, hero alto empurra o botao pra fora da
     tela e o visitante de anuncio some antes de ver o que fazer. */
  .hero { padding: 26px 0 32px; }
  .eyebrow { margin-bottom: 16px; padding: 7px 13px; font-size: .7rem; }
  h1 { max-width: none; margin-bottom: 14px; }
  .sub { margin-bottom: 24px; }

  .cta { width: 100%; justify-content: center; padding: 16px 20px; }
  .cta.lg { font-size: 1.04rem; padding: 17px 22px; }

  .live { padding: 12px 0 44px; }
  .panel { padding: 18px 14px; border-radius: 18px; }
  .live-top { margin-bottom: 14px; }
  .live-top .when { font-size: .72rem; }

  .match { gap: 8px; padding: 4px 0 18px; }
  .side img { width: 56px; height: 56px; border-radius: 14px; padding: 6px; }
  .side .nm { font-size: .9rem; }
  .side .role { font-size: .66rem; }
  .vs .h { font-size: 1.4rem; }
  /* nome de competicao e comprido ("UEFA Nations League"); sem limite ele
     alarga a coluna do meio e espreme os dois times. */
  .vs .lg { max-width: 92px; margin: 6px auto 0; font-size: .66rem; }

  .cards { grid-template-columns: repeat(2, 1fr); gap: 9px; }
  .stat { padding: 14px 8px; border-radius: 14px; }
  .stat .ic { width: 34px; height: 34px; margin-bottom: 7px; }
  .stat .ic svg { width: 18px; height: 18px; }
  .stat .v { font-size: 1.5rem; }
  .stat .k { font-size: .72rem; letter-spacing: .03em; margin-top: 5px; }
  .stat .hint { display: none; }

  .panel-cta { margin-top: 18px; }
  .sec-head { margin-bottom: 20px; }

  .step { padding: 20px 18px; border-radius: 16px; }
  .grid2 article { padding: 20px 18px; border-radius: 16px; }

  .chips { gap: 7px; margin-top: 20px; }
  .chip { padding: 7px 13px; font-size: .8rem; }

  .qa { margin-top: 22px; }
  .qa summary { padding: 15px 42px 15px 16px; font-size: .92rem; }
  .qa summary::after { right: 16px; }
  .qa details p { padding: 0 16px 16px; font-size: .88rem; }

  footer { padding: 22px 0 32px; }
  footer a { padding: 12px 10px; }
}

/* ── celular estreito (360px e abaixo) ─────────── */
@media (max-width: 380px) {
  .wrap { padding: 0 14px; }
  .side img { width: 46px; height: 46px; }
  .side .nm { font-size: .82rem; }
  .vs .h { font-size: 1.2rem; }
  .vs .lg { max-width: 76px; }
  .stat .v { font-size: 1.32rem; }
  .chip { padding: 6px 11px; font-size: .76rem; }
}

/* Celular deitado: tela baixa, entao corta o respiro vertical pra o
   conteudo principal continuar cabendo. */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { padding: 14px 0 20px; }
  .hero::before { display: none; }
  h1 { font-size: 1.7rem; margin-bottom: 10px; max-width: none; }
  .eyebrow { margin-bottom: 10px; }
  .sub { font-size: .95rem; margin-bottom: 16px; }
  .nav { padding: 10px 0; }
}

/* Quem liga "reduzir movimento" no sistema nao quer o pulso do ponto
   verde nem o brilho do skeleton. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}