/* ============================================================================
   FutebolNinja.Site — estilo editorial "Warm Paper · Deep Ink · Emerald".
   Adaptado do design system do Stitch (DESIGN.md) para os tokens do app.
   Fontes: Bebas Neue (títulos) · Inter (texto) · JetBrains Mono (números).
   Carregado DEPOIS de tokens.css — sobrescreve o que precisa.
   ============================================================================ */

:root {
  /* Paleta do site (mesmo hex do design system — nomes claros p/ marketing) */
  --c-bg:           #f1f0eb;   /* off-white quente (papel) */
  --c-card:         #ffffff;
  --c-card-2:       #fafaf7;
  --c-card-3:       #f5f4ef;
  --c-border:       #e3e1d9;
  --c-ink:          #15140f;   /* texto principal */
  --c-ink-2:        #3a3a36;   /* secundário */
  --c-muted:        #6e6c61;   /* suave */
  --c-accent:       #10b981;   /* esmeralda */
  --c-accent-strong:#059669;
  --c-accent-soft:  #d1fae5;
  --c-accent-ink:   #022c22;
  --c-slab:         #1b1c19;   /* "tinta" — cards escuros sobre papel */
  --c-win:  #22c55e; --c-draw: #f59e0b; --c-loss: #ef4444; --c-live: #ff3355;

  --shadow-sm:  0 1px 2px rgba(20,18,12,.05), 0 1px 3px rgba(20,18,12,.04);
  --shadow-md:  0 8px 24px rgba(20,18,12,.07);
  --shadow-lg:  0 24px 48px -12px rgba(20,18,12,.16);

  --maxw: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-sans, "Inter", system-ui, sans-serif);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
main { display: block; }

a { color: var(--c-accent-strong); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { font-family: var(--font-display, "Bebas Neue", sans-serif); font-weight: 400; letter-spacing: .02em; margin: 0; line-height: 1.04; }

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle; line-height: 1;
}

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.mono { font-family: var(--font-mono, "JetBrains Mono", monospace); }
.muted { color: var(--c-muted); }

/* ── Botões ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: var(--r-sm, 8px);
  font-family: var(--font-sans); font-weight: 700; font-size: .9rem;
  letter-spacing: .04em; text-transform: uppercase;
  cursor: pointer; border: 2px solid transparent; transition: all .15s ease;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--c-accent); color: var(--c-accent-ink); }
.btn-primary:hover { background: var(--c-accent-strong); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-outline { background: transparent; color: var(--c-ink); border-color: var(--c-border); }
.btn-outline:hover { border-color: var(--c-accent); color: var(--c-accent-strong); }
.btn-lg { padding: 16px 30px; font-size: 1rem; border-radius: var(--r-md, 12px); }
.btn-block { width: 100%; }
.btn-white { background: #fff; color: var(--c-ink); }
.btn-white:hover { background: var(--c-card-3); }

/* ── Header ─────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250,249,244,.88); backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--c-border);
}
.site-header__inner { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand:hover { text-decoration: none; }
.brand__mark { object-fit: contain; }
.brand__word { font-family: var(--font-display); font-size: 1.6rem; letter-spacing: .04em; color: var(--c-ink); }
.brand__accent { color: var(--c-accent); }

.site-nav { display: flex; gap: 26px; margin-left: 8px; }
.site-nav__link {
  font-family: var(--font-mono); font-size: .82rem; font-weight: 600; letter-spacing: -.01em;
  color: var(--c-ink-2); padding: 4px 0; border-bottom: 2px solid transparent; text-transform: uppercase;
}
.site-nav__link:hover { color: var(--c-accent-strong); text-decoration: none; }
.site-nav__link.is-active { color: var(--c-ink); border-bottom-color: var(--c-accent); font-weight: 700; }
.site-header__cta { margin-left: auto; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero { padding: 64px 0 48px; }
.hero__eyebrow {
  font-family: var(--font-mono); font-size: .8rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--c-accent-strong); margin-bottom: 14px;
}
.hero h1 { font-size: clamp(3rem, 8vw, 5.2rem); color: var(--c-ink); margin-bottom: 16px; }
.hero h1 .em { color: var(--c-accent); }
.hero__lead { font-size: 1.2rem; color: var(--c-ink-2); max-width: 560px; margin: 0 0 28px; }

/* Hero com imagem/vídeo de fundo (home) */
.hero--media { position: relative; overflow: hidden; padding: 0; min-height: 580px; display: flex; align-items: flex-end; }
.hero--media .hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.hero--media .hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(10,13,10,.86) 0%, rgba(10,13,10,.50) 42%, rgba(10,13,10,.12) 100%);
}
.hero--media .hero__content { position: relative; z-index: 2; width: 100%; padding-top: 96px; padding-bottom: 52px; }
.hero--media .hero__eyebrow { color: #6ee7b7; }
.hero--media h1 { color: #fff; }
.hero--media .hero__lead { color: rgba(255,255,255,.9); }
@media (max-width: 640px) {
  .hero--media { min-height: 480px; }
  .hero--media .hero__content { padding-top: 64px; }
}

/* ── Barra de busca de quadras ──────────────────────────────────────────── */
.search-card {
  background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--r-xl, 28px);
  box-shadow: var(--shadow-md); padding: 14px; display: flex; gap: 10px; flex-wrap: wrap;
  align-items: center; max-width: 680px;
}
.search-card .field { display: flex; align-items: center; gap: 8px; flex: 1 1 220px; padding: 0 12px; }
.search-card .field .material-symbols-outlined { color: var(--c-muted); }
.search-card input[type="text"] {
  flex: 1; border: none; outline: none; background: transparent;
  font: inherit; color: var(--c-ink); padding: 12px 0; min-width: 0;
}
.search-card .btn { white-space: nowrap; }
.search-hint { margin-top: 12px; font-size: .9rem; color: var(--c-muted); }
.geo-error { color: var(--c-loss); }

/* ── Seções ─────────────────────────────────────────────────────────────── */
.section { padding: 44px 0; }
.section--alt { background: var(--c-card-2); border-block: 1px solid var(--c-border); }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.section h2 { font-size: clamp(2rem, 4vw, 2.6rem); color: var(--c-ink); }
.section__sub { color: var(--c-muted); max-width: 620px; }
.section__link { font-family: var(--font-mono); font-size: .82rem; font-weight: 600; text-transform: uppercase; }

.page-title { font-size: clamp(2.2rem, 5vw, 3.2rem); color: var(--c-ink); margin: 4px 0 10px; }
.breadcrumbs { font-family: var(--font-mono); font-size: .78rem; color: var(--c-muted); margin: 4px 0 12px; text-transform: uppercase; letter-spacing: .03em; }
.breadcrumbs a { color: var(--c-muted); }

/* ── Cards / grids ──────────────────────────────────────────────────────── */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.card {
  background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--r-md, 12px);
  padding: 22px; box-shadow: var(--shadow-sm); transition: box-shadow .18s ease, transform .18s ease;
}
.card-link { display: block; }
.card-link:hover { text-decoration: none; box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card h3 { font-size: 1.4rem; color: var(--c-ink); margin-bottom: 6px; letter-spacing: .03em; }
.card p { margin: 0; color: var(--c-muted); font-size: .95rem; }

/* Feature card (o que dá pra fazer) */
.feature { padding: 26px; }
.feature__icon {
  width: 52px; height: 52px; border-radius: var(--r-md, 12px); display: grid; place-items: center;
  background: var(--c-accent-soft); color: var(--c-accent-ink); margin-bottom: 14px;
}
.feature__icon .material-symbols-outlined { font-size: 28px; }
.feature h3 { margin-bottom: 8px; }

/* City card */
.city-card { display: flex; align-items: center; justify-content: space-between; }
.city-card .material-symbols-outlined { color: var(--c-accent); }

/* Venue card */
.venue-card { padding: 0; overflow: hidden; }
.venue-card__cover { width: 100%; height: 168px; object-fit: cover; background: var(--c-card-3); display: block; }
.venue-card__body { padding: 16px 18px; }
.venue-card__body h3 { margin-bottom: 4px; }
.venue-meta { display: flex; align-items: center; gap: 6px; color: var(--c-muted); font-size: .9rem; margin: 4px 0; }
.venue-meta .material-symbols-outlined { font-size: 16px; }
.venue-price { font-family: var(--font-mono); font-weight: 600; color: var(--c-accent-strong); }

/* ── Pills / badges ─────────────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 11px; border-radius: var(--r-xs, 4px);
  font-family: var(--font-mono); font-size: .72rem; font-weight: 600; letter-spacing: .02em;
  background: var(--c-card-3); color: var(--c-ink-2); text-transform: uppercase;
}
.pill--free { background: var(--c-accent-soft); color: var(--c-accent-ink); }
.pill--paid { background: #fef3c7; color: #92400e; }
.pill--live { background: var(--c-live); color: #fff; }
.pill--verified { background: var(--c-accent); color: var(--c-accent-ink); }

/* ── Tabela limpa ───────────────────────────────────────────────────────── */
.table-clean { border-collapse: collapse; width: 100%; }
.table-clean th, .table-clean td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--c-border); }
.table-clean th { font-family: var(--font-mono); font-size: .74rem; font-weight: 600; color: var(--c-muted); text-transform: uppercase; }
.table-clean td { font-size: .95rem; }
.table-clean td.num, .table-clean td .num { font-family: var(--font-mono); }

/* ── Card escuro (funcionamento / slab editorial) ───────────────────────── */
.card-dark { background: var(--c-slab); color: #fff; border: none; }
.card-dark h3 { color: var(--c-accent); }
.card-dark .row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.card-dark .row:last-child { border-bottom: none; }
.card-dark .row span:first-child { color: rgba(255,255,255,.7); font-size: .9rem; }
.card-dark .row span:last-child { font-family: var(--font-mono); }

/* ── Mockup do app (prints) ─────────────────────────────────────────────── */
.showcase { display: grid; grid-template-columns: 1fr 1.15fr; gap: 44px; align-items: center; }

/* Janela de app (paisagem) — moldura para prints de desktop */
.window-mock {
  border-radius: var(--r-md, 12px); overflow: hidden; background: var(--c-card);
  border: 1px solid var(--c-border); box-shadow: var(--shadow-lg);
  transform: perspective(1400px) rotateY(-4deg) rotateX(2deg);
  transition: transform .3s ease;
}
.window-mock:hover { transform: perspective(1400px) rotateY(0) rotateX(0); }
.window-mock__bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: var(--c-card-3); border-bottom: 1px solid var(--c-border); }
.window-mock__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--c-border); display: inline-block; }
.window-mock__bar i:nth-child(1) { background: #ff5f57; }
.window-mock__bar i:nth-child(2) { background: #febc2e; }
.window-mock__bar i:nth-child(3) { background: #28c840; }
.window-mock img { display: block; width: 100%; height: auto; }
.window-mock--placeholder { aspect-ratio: 16/10; display: grid; place-items: center; color: var(--c-muted); font-family: var(--font-mono); font-size: .8rem; text-align: center; }

/* Frame de celular (caso usemos prints de mobile no futuro) */
.phone {
  width: 220px; max-width: 42vw; border-radius: 28px; border: 8px solid var(--c-slab);
  box-shadow: var(--shadow-lg); background: var(--c-card-3); aspect-ratio: 9/19; object-fit: cover;
}

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq details { background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--r-md, 12px); padding: 16px 20px; margin-bottom: 10px; }
.faq details[open] { box-shadow: var(--shadow-sm); }
.faq summary { font-weight: 700; cursor: pointer; color: var(--c-ink); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "add"; font-family: 'Material Symbols Outlined'; color: var(--c-accent); }
.faq details[open] summary::after { content: "remove"; }
.faq p { margin: 12px 0 0; color: var(--c-ink-2); }

/* ── CTA strip ──────────────────────────────────────────────────────────── */
.cta-strip { background: var(--c-slab); color: #fff; border-radius: var(--r-lg, 18px); padding: 40px; text-align: center; }
.cta-strip h2 { color: #fff; font-size: clamp(2rem, 5vw, 3rem); }
.cta-strip p { color: rgba(255,255,255,.75); max-width: 520px; margin: 10px auto 22px; }

/* ── Alerts ─────────────────────────────────────────────────────────────── */
.alert { padding: 12px 16px; border-radius: var(--r-sm, 8px); margin: 12px 0; font-weight: 600; }
.alert-ok { background: var(--c-accent-soft); color: var(--c-accent-ink); }
.alert-err { background: #fee2e2; color: #991b1b; }

/* ── Formulários de participação ────────────────────────────────────────── */
.join-block { background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--r-md, 12px); padding: 14px 18px; margin-bottom: 10px; }
.join-block summary { font-weight: 700; cursor: pointer; color: var(--c-ink); }
.join-form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; max-width: 440px; }
.join-form label { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; color: var(--c-ink-2); }
.join-form input, .join-form select {
  padding: 11px 13px; border: 1px solid var(--c-border); border-radius: var(--r-sm, 8px);
  font: inherit; background: var(--c-card-2); color: var(--c-ink);
}
.join-form input:focus, .join-form select:focus { outline: none; border-color: var(--c-accent); }

/* ── Guest list / elenco ────────────────────────────────────────────────── */
.guest-list { list-style: none; padding: 0; margin: 0; }
.guest-list li { padding: 10px 0; border-bottom: 1px solid var(--c-border); }

/* ── Scoreboard (jogo público) ──────────────────────────────────────────── */
.scoreboard { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--r-lg, 18px);
  padding: 28px; box-shadow: var(--shadow-sm); text-align: center; }
.scoreboard-team { display: flex; flex-direction: column; align-items: center; gap: 8px; font-weight: 700; }
.scoreboard-team img { width: 64px; height: 64px; object-fit: contain; }
.scoreboard-score .score { display: block; font-family: var(--font-display); font-size: 3rem; color: var(--c-ink); }

/* ── Detalhe de quadra ──────────────────────────────────────────────────── */
.venue-hero { width: 100%; max-height: 380px; object-fit: cover; border-radius: var(--r-lg, 18px); }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.photo-grid img { width: 100%; height: 130px; object-fit: cover; border-radius: var(--r-sm, 8px); }
.event-logo { width: 84px; height: 84px; object-fit: cover; border-radius: var(--r-md, 12px); }
.pix-qr { width: 180px; height: 180px; object-fit: contain; }
.avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: 6px; }
.rich-text { background: var(--c-card); border: 1px solid var(--c-border); border-radius: var(--r-md, 12px); padding: 16px 20px; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer { margin-top: 56px; background: var(--c-card-2); border-top: 1px solid var(--c-border); }
.site-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 28px; padding: 44px 20px 28px; }
.site-footer__brand p { color: var(--c-muted); font-size: .92rem; max-width: 380px; margin: 12px 0 0; }
.site-social { display: flex; gap: 10px; margin-top: 16px; }
.site-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--r-sm, 8px);
  background: var(--c-card); color: var(--c-ink-2); border: 1px solid var(--c-border);
  transition: all .15s ease;
}
.site-social a:hover { color: var(--c-accent-strong); border-color: var(--c-accent); text-decoration: none; transform: translateY(-1px); }
.site-footer__col { display: flex; flex-direction: column; gap: 8px; }
.site-footer__col h5 { font-family: var(--font-mono); font-size: .76rem; text-transform: uppercase; color: var(--c-ink); margin: 0 0 6px; letter-spacing: .04em; }
.site-footer__col a { color: var(--c-muted); font-size: .92rem; }
.site-footer__base { padding: 16px 20px 28px; color: var(--c-muted); font-size: .82rem; border-top: 1px solid var(--c-border); }

/* ── Barra inferior mobile ──────────────────────────────────────────────── */
.mobile-nav { display: none; }

@media (max-width: 860px) {
  .site-nav { display: none; }
  .site-header__cta { margin-left: auto; }
  .showcase { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }

  .mobile-nav {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
    background: rgba(250,249,244,.95); backdrop-filter: blur(8px);
    border-top: 1px solid var(--c-border); padding: 6px 4px; justify-content: space-around;
  }
  .mobile-nav a {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .02em;
    color: var(--c-muted); padding: 4px 8px; flex: 1; text-align: center;
  }
  .mobile-nav a.is-active { color: var(--c-accent-strong); }
  .mobile-nav a:hover { text-decoration: none; }
  .mobile-nav__cta { color: var(--c-accent-strong) !important; }
  .mobile-nav .material-symbols-outlined { font-size: 22px; }
  main { padding-bottom: 64px; } /* espaço p/ a barra fixa */
}

@media (max-width: 560px) {
  .site-footer__grid { grid-template-columns: 1fr; }
  .search-card { border-radius: var(--r-lg, 18px); }
}

/* ============================================================================
   COMPAT — classes usadas por páginas ainda não redesenhadas (quadras-lista,
   campos/detalhe, páginas públicas). Serão removidas conforme cada página for
   migrada para as classes novas, página a página.
   ============================================================================ */
.search-bar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 16px 0; }
.search-bar input[type="text"] {
  flex: 1 1 240px; max-width: 380px; padding: 12px 14px;
  border: 1px solid var(--c-border); border-radius: var(--r-sm, 8px);
  font: inherit; background: var(--c-card); color: var(--c-ink);
}
.search-bar input[type="text"]:focus { outline: none; border-color: var(--c-accent); }

.pill-free { background: var(--c-accent-soft); color: var(--c-accent-ink); }
.pill-paid { background: #fef3c7; color: #92400e; }
.badge-verified { color: var(--c-accent-strong); font-size: .85rem; margin-left: 4px; }
.btn-sm { padding: 7px 14px; font-size: .8rem; }

/* Páginas legais (Termos / Privacidade) — coluna de leitura confortável. */
.legal { max-width: 760px; }
.legal h3 { margin: 26px 0 6px; font-size: 1.15rem; color: var(--c-ink); }
.legal p, .legal li { color: var(--c-ink-2, var(--c-ink)); line-height: 1.7; }
.legal ul { padding-left: 20px; margin: 8px 0; }
.legal li { margin: 6px 0; }
.legal__stamp {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--c-muted); margin: 4px 0 18px;
}
.legal__related {
  margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--c-border);
  font-size: .92rem; color: var(--c-muted);
}