/* ==========================================================
   PLACAR DA VIRADA — SBPNL · Sistema visual "Copa Retrô BR"
   Verde bandeira · Amarelo · Azul royal · Creme · Tinta
   Display: Passion One · UI/Texto: Archivo
   ========================================================== */

:root{
  --creme:        #FAF3E1;
  --creme-2:      #F2E7CC;
  --tinta:        #1A2B23;
  --verde:        #0A5C46;
  --verde-escuro: #07372B;
  --verde-noite:  #052A21;
  --amarelo:      #FFC627;
  --amarelo-2:    #FFDD66;
  --azul:         #1A4FA8;
  --azul-claro:   #3E74D6;
  --vermelho:     #C8401F;
  --linha:        rgba(26,43,35,.18);
  --shadow-hard:  4px 4px 0 var(--tinta);
  --shadow-soft:  0 10px 30px rgba(26,43,35,.12);
  --radius:       14px;
  --font-display: "Passion One", "Archivo Black", sans-serif;
  --font-ui:      "Archivo", "Helvetica Neue", Helvetica, sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-ui);
  background:var(--creme);
  color:var(--tinta);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:inherit; }

/* ---------- Tipografia ---------- */
.display{
  font-family:var(--font-display);
  font-weight:700;
  text-transform:uppercase;
  line-height:.92;
  letter-spacing:.005em;
}
.kicker{
  font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:.18em;
}
.section-title{
  font-family:var(--font-display);
  font-weight:700; text-transform:uppercase;
  font-size:clamp(34px,4.5vw,52px);
  line-height:.95;
}
.lead{ font-size:clamp(16px,1.6vw,19px); line-height:1.55; }

/* ---------- Botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-ui); font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; font-size:14px; text-decoration:none;
  padding:16px 28px; border-radius:999px; cursor:pointer;
  border:2px solid var(--tinta);
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn-primary{
  background:var(--amarelo); color:var(--tinta);
  box-shadow:var(--shadow-hard);
}
.btn-primary:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--tinta); }
.btn-primary:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--tinta); }
.btn-ghost{
  background:transparent; color:var(--tinta);
}
.btn-ghost:hover{ background:rgba(26,43,35,.07); }
.btn-dark{
  background:var(--tinta); color:var(--creme); border-color:var(--tinta);
  box-shadow:4px 4px 0 rgba(26,43,35,.25);
}
.btn-dark:hover{ transform:translate(-2px,-2px); }
.btn-sm{ padding:10px 18px; font-size:12px; }
.btn-block{ width:100%; }

/* sobre fundo escuro */
.on-dark .btn-primary{ border-color:var(--tinta); box-shadow:4px 4px 0 rgba(0,0,0,.45); }
.on-dark .btn-ghost{ color:var(--creme); border-color:var(--creme); }
.on-dark .btn-ghost:hover{ background:rgba(250,243,225,.1); }

/* ---------- Navbar ---------- */
.pv-nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:28px;
  padding:14px clamp(18px,4vw,48px);
  background:var(--creme);
  border-bottom:2px solid var(--tinta);
}
.pv-nav.nav-dark{ background:var(--verde-noite); border-bottom-color:rgba(250,243,225,.25); color:var(--creme); }
.pv-brand{ display:flex; align-items:center; gap:14px; text-decoration:none; }
.pv-brand img{ height:26px; width:auto; }
.pv-brand .camp{
  font-family:var(--font-display); text-transform:uppercase;
  font-size:20px; line-height:1; letter-spacing:.02em;
  border-left:2px solid currentColor; padding-left:14px;
}
.pv-links{ display:flex; align-items:center; gap:6px; margin-left:auto; }
.pv-links a{
  text-decoration:none; font-weight:700; font-size:13px;
  text-transform:uppercase; letter-spacing:.08em;
  padding:9px 14px; border-radius:999px;
}
.pv-links a:hover{ background:rgba(26,43,35,.08); }
.nav-dark .pv-links a:hover{ background:rgba(250,243,225,.12); }
.pv-links a.active{ background:var(--tinta); color:var(--creme); }
.nav-dark .pv-links a.active{ background:var(--amarelo); color:var(--tinta); }
.pv-links .btn{ margin-left:8px; }
@media (max-width:860px){
  .pv-links a:not(.btn){ display:none; }
  .pv-brand .camp{ font-size:17px; }
}

/* ---------- Bandeiras genéricas ---------- */
.flag{
  --c1:#1A4FA8; --c2:#FFC627;
  width:56px; height:56px; border-radius:50%;
  border:2px solid var(--tinta);
  background:linear-gradient(135deg,var(--c1) 0 50%,var(--c2) 50% 100%);
  display:grid; place-items:center;
  color:#fff; font-weight:900; font-size:14px; letter-spacing:.05em;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
  flex-shrink:0;
}
.flag-sm{ width:40px; height:40px; font-size:11px; }
.flag-lg{ width:72px; height:72px; font-size:17px; }

/* ---------- Chips e selos ---------- */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.1em;
  padding:5px 12px; border-radius:999px; border:1.5px solid var(--tinta);
  background:var(--creme);
}
.chip-amarelo{ background:var(--amarelo); }
.chip-verde{ background:var(--verde); color:var(--creme); border-color:var(--verde-escuro); }
.chip-azul{ background:var(--azul); color:#fff; border-color:var(--tinta); }
.chip-soft{ background:var(--creme-2); border-color:var(--linha); }
.mult{
  display:inline-grid; place-items:center;
  min-width:44px; height:44px; padding:0 8px; border-radius:10px;
  background:var(--tinta); color:var(--amarelo);
  font-family:var(--font-display); font-size:24px; line-height:1;
}

/* ---------- Cartões ---------- */
.card{
  background:#FFFDF6;
  border:2px solid var(--tinta);
  border-radius:var(--radius);
  box-shadow:var(--shadow-hard);
}
.card-flat{ box-shadow:none; }

/* ---------- Texturas ---------- */
.stripes{
  background-image:repeating-linear-gradient(
    -45deg, transparent 0 14px, rgba(26,43,35,.05) 14px 28px);
}
.sunburst{
  background:
    repeating-conic-gradient(from 0deg at 50% 58%,
      rgba(255,198,39,.16) 0deg 9deg, transparent 9deg 18deg),
    var(--creme);
}
.sunburst-verde{
  background:
    repeating-conic-gradient(from 0deg at 50% 50%,
      rgba(250,243,225,.05) 0deg 9deg, transparent 9deg 18deg),
    var(--verde-noite);
}

/* ---------- Placar (dígitos) ---------- */
.scorebox{
  display:inline-grid; place-items:center;
  width:64px; height:76px; border-radius:10px;
  background:var(--verde-noite); color:var(--amarelo);
  font-family:var(--font-display); font-size:48px; line-height:1;
  border:2px solid var(--tinta);
  box-shadow:inset 0 -10px 0 rgba(0,0,0,.3);
}
.scorebox-sm{ width:46px; height:56px; font-size:34px; border-radius:8px; }

/* ---------- Inputs ---------- */
.field label{
  display:block; font-size:12px; font-weight:800;
  text-transform:uppercase; letter-spacing:.1em; margin-bottom:6px;
}
.field input{
  width:100%; padding:14px 16px; font-size:16px; font-family:var(--font-ui);
  border:2px solid var(--tinta); border-radius:10px;
  background:#FFFDF6; color:var(--tinta); outline:none;
}
.field input:focus{ box-shadow:3px 3px 0 var(--amarelo); }
.field{ margin-bottom:18px; }

/* stepper de gols */
.golstep{
  display:flex; align-items:center; gap:0;
  border:2px solid var(--tinta); border-radius:12px; overflow:hidden;
  background:#FFFDF6;
}
.golstep button{
  width:40px; height:56px; border:none; cursor:pointer;
  background:var(--creme-2); font-size:20px; font-weight:900; color:var(--tinta);
}
.golstep button:hover{ background:var(--amarelo); }
.golstep .gval{
  width:52px; height:56px; display:grid; place-items:center;
  font-family:var(--font-display); font-size:34px;
  border-left:2px solid var(--tinta); border-right:2px solid var(--tinta);
}

/* ---------- Tabela ---------- */
.pv-table{ width:100%; border-collapse:collapse; font-size:15px; }
.pv-table th{
  text-align:left; font-size:11px; text-transform:uppercase;
  letter-spacing:.12em; font-weight:800; color:rgba(26,43,35,.6);
  padding:12px 14px; border-bottom:2px solid var(--tinta);
}
.pv-table td{ padding:14px; border-bottom:1px solid var(--linha); }
.pv-table tr:last-child td{ border-bottom:none; }
.pv-table .num{ text-align:right; font-variant-numeric:tabular-nums; }
.pv-table th.num{ text-align:right; }

/* ---------- Footer ---------- */
.pv-footer{
  background:var(--verde-noite); color:var(--creme);
  padding:56px clamp(18px,4vw,48px) 40px;
}
.pv-footer .foot-grid{
  max-width:1100px; margin:0 auto;
  display:grid; grid-template-columns:1.2fr 1fr; gap:48px;
}
.pv-footer img{ height:24px; margin-bottom:18px; }
.pv-footer .legal{
  font-size:12.5px; line-height:1.65; color:rgba(250,243,225,.72);
  margin-bottom:14px;
}
.pv-footer .foot-links{ display:flex; flex-direction:column; gap:10px; }
.pv-footer .foot-links a{
  color:var(--creme); text-decoration:none; font-weight:700; font-size:14px;
}
.pv-footer .foot-links a:hover{ color:var(--amarelo); }
.pv-footer .foot-bottom{
  max-width:1100px; margin:40px auto 0; padding-top:20px;
  border-top:1px solid rgba(250,243,225,.2);
  font-size:12px; color:rgba(250,243,225,.55);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
@media (max-width:760px){ .pv-footer .foot-grid{ grid-template-columns:1fr; } }

/* ---------- Seletor de variação ---------- */
.var-switch{
  position:fixed; left:18px; bottom:18px; z-index:90;
  display:flex; align-items:center; gap:4px;
  background:var(--tinta); color:var(--creme);
  padding:6px 8px 6px 14px; border-radius:999px;
  font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.1em;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.var-switch a{
  width:28px; height:28px; display:grid; place-items:center;
  border-radius:50%; text-decoration:none; color:var(--creme);
  font-size:12px;
}
.var-switch a:hover{ background:rgba(250,243,225,.18); }
.var-switch a.cur{ background:var(--amarelo); color:var(--tinta); }

/* ---------- Util ---------- */
.wrap{ max-width:1100px; margin:0 auto; padding:0 clamp(18px,4vw,48px); }
.center{ text-align:center; }
.muted{ color:rgba(26,43,35,.62); }
.on-dark .muted{ color:rgba(250,243,225,.65); }
.mt-8{ margin-top:8px; } .mt-16{ margin-top:16px; } .mt-24{ margin-top:24px; }
.mt-40{ margin-top:40px; } .mt-64{ margin-top:64px; }