/* Estádios.com.br — paleta extraída do logo: navy #07182B + verde #068D2F.
   Os nomes das variáveis vêm da paleta verde-gramado inicial; os valores
   passaram a seguir o logo fornecido, que é a referência de marca real. */
:root{
  --verde:#0E2039; --verde2:#16304F; --vivo:#068D2F; --claro:#E4EFE8;
  --fundo:#fff; --papel:#F4F7F5; --texto:#141C26; --suave:#5B6675;
  --linha:#DDE3E0; --destaque:#F2B705;
  --wrap:1160px; --r:14px;
  --sombra:0 1px 2px rgba(11,61,46,.06),0 8px 24px rgba(11,61,46,.07);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fundo);color:var(--texto);
  font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
img{max-width:100%;height:auto;display:block}
a{color:var(--verde2)}
h1,h2,h3{line-height:1.22;margin:0 0 .5em;letter-spacing:-.015em}
h1{font-size:clamp(1.85rem,1.2rem + 2.4vw,2.9rem)}
h2{font-size:clamp(1.35rem,1.1rem + 1.1vw,1.9rem);margin-top:2.2rem}
h3{font-size:1.08rem}
p{margin:0 0 1rem}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.sr,.pular{position:absolute;left:-9999px}
.pular:focus{left:8px;top:8px;z-index:99;background:#fff;padding:10px 16px;
  border-radius:8px;position:fixed}

/* topo */
.topo{background:var(--verde);color:#fff;position:sticky;top:0;z-index:50}
.topo-in{display:flex;align-items:center;gap:16px;min-height:66px}
.marca{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;
  font-weight:800;font-size:1.16rem;letter-spacing:-.02em}
/* O ícone é navy sobre transparente e sumiria no header navy — vai num chip
   branco para manter o contraste. */
.marca-ico{width:36px;height:36px;flex:0 0 auto;object-fit:contain;
  background:#fff;border-radius:9px;padding:3px}
.marca-txt span{color:var(--claro);font-weight:500;opacity:.75}
.nav{margin-left:auto}
.menu{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.menu>li{position:relative}
.menu a{color:#fff;text-decoration:none;padding:10px 13px;display:block;
  border-radius:9px;font-size:.95rem;font-weight:500}
.menu a:hover,.menu a:focus{background:rgba(255,255,255,.14)}
.seta{font-size:.7em;opacity:.8}
.sub{position:absolute;left:0;top:100%;min-width:248px;background:#fff;
  border:1px solid var(--linha);border-radius:12px;box-shadow:var(--sombra);
  list-style:none;margin:6px 0 0;padding:7px;display:none;z-index:60}
.tem-sub.aberto .sub{display:block}
/* Ponte invisível sobre o vão de 6px entre o item e o submenu. Sem ela, o
   mouse deixa o <li> ao atravessar o vão, dispara mouseleave e o submenu
   fecha antes de a pessoa alcançar o link. */
.sub::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}
.sub a{color:var(--texto);font-size:.92rem;padding:9px 12px}
.sub a:hover{background:var(--claro)}
.menu-btn{display:none;margin-left:auto;background:none;border:0;cursor:pointer;
  padding:10px;flex-direction:column;gap:5px}
.menu-btn span{width:23px;height:2px;background:#fff;border-radius:2px;display:block}

/* trilha */
.trilha{padding-top:16px;padding-bottom:2px;font-size:.85rem;color:var(--suave)}
.trilha a{color:var(--suave)}
.sep{margin:0 7px;opacity:.5}

/* hero */
.hero{background:linear-gradient(150deg,var(--verde),#0a5138 70%,#0e6a44);
  color:#fff;padding:58px 0 62px;position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;inset:auto 0 0;height:5px;
  background:repeating-linear-gradient(90deg,var(--vivo) 0 44px,transparent 44px 88px);
  opacity:.5}
.hero h1{margin-bottom:.35em}
.hero p{color:var(--claro);font-size:1.09rem;max-width:62ch;margin:0 auto;opacity:.95}
.hero .wrap{text-align:center}
.hero-num{display:flex;gap:34px;justify-content:center;margin-top:30px;flex-wrap:wrap}
.hero-num div{text-align:center}
.hero-num b{display:block;font-size:1.75rem;color:#fff;line-height:1.1}
.hero-num span{font-size:.83rem;color:var(--claro);opacity:.85}

/* estádio: capa */
.capa{position:relative;background:var(--verde)}
.capa img{width:100%;max-height:460px;object-fit:cover;opacity:.92}
.capa-cred{position:absolute;right:0;bottom:0;background:rgba(0,0,0,.62);
  color:#fff;font-size:.71rem;padding:5px 11px;border-radius:8px 0 0 0;max-width:90%}
.capa-cred a{color:#fff}
.sem-capa{height:180px;background:
  linear-gradient(150deg,var(--verde),#0e6a44)}

.titulo{padding:26px 0 4px}
.titulo .apelido{color:var(--suave);font-size:1rem;margin:-.2rem 0 0}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 0;padding:0;list-style:none}
.tags li{background:var(--claro);color:var(--verde2);font-size:.82rem;
  padding:5px 12px;border-radius:99px;font-weight:600}
.tags .ouro{background:#FFF4D1;color:#7a5c00}

/* conteúdo */
main{padding-bottom:56px}
.col{max-width:820px}
.destaque-num{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  gap:14px;margin:26px 0 8px}
.destaque-num div{background:var(--papel);border:1px solid var(--linha);
  border-radius:var(--r);padding:16px 18px}
.destaque-num b{display:block;font-size:1.42rem;color:var(--verde);line-height:1.2}
.destaque-num span{font-size:.82rem;color:var(--suave)}

.ficha{width:100%;border-collapse:collapse;margin:14px 0 8px;font-size:.96rem}
.ficha th,.ficha td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--linha);
  vertical-align:top}
.ficha th{width:38%;color:var(--suave);font-weight:600}
.ficha tr:nth-child(odd){background:var(--papel)}

.nota{background:var(--claro);border-left:4px solid var(--vivo);
  border-radius:0 var(--r) var(--r) 0;padding:16px 20px;margin:22px 0}
.nota p:last-child{margin:0}

.faq{margin-top:10px}
.faq-item{border:1px solid var(--linha);border-radius:var(--r);margin-bottom:10px;
  background:var(--fundo);overflow:hidden}
.faq-item summary{cursor:pointer;padding:15px 18px;font-weight:600;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:after{content:"+";float:right;color:var(--vivo);font-size:1.3em;
  line-height:1}
.faq-item[open] summary:after{content:"–"}
.faq-item .resp{padding:0 18px 15px;color:#2c3a33}
.faq-item .resp p:last-child{margin:0}

/* cards */
.grade{display:grid;gap:18px;margin:22px 0;
  grid-template-columns:repeat(auto-fill,minmax(252px,1fr))}
.card{background:var(--fundo);border:1px solid var(--linha);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--sombra);transition:transform .16s,box-shadow .16s}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(11,61,46,.13)}
.card a{text-decoration:none;color:inherit;display:block;height:100%}
.card-img{position:relative;aspect-ratio:5/3;background:var(--claro)}
.card-img img{width:100%;height:100%;object-fit:cover}
.sem-foto{width:100%;height:100%;
  background:linear-gradient(150deg,var(--verde2),var(--vivo));opacity:.85}
.rank{position:absolute;left:10px;top:10px;background:rgba(11,61,46,.9);color:#fff;
  font-size:.78rem;font-weight:700;padding:3px 9px;border-radius:99px}
.card-txt{padding:14px 16px 16px}
.card-txt h3{margin:0 0 3px;font-size:1.03rem;color:var(--verde)}
.card-loc{margin:0;font-size:.85rem;color:var(--suave)}
.card-clube{margin:5px 0 0;font-size:.83rem;color:var(--verde2);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-cap{margin:9px 0 0;font-size:.87rem;color:var(--texto)}
.card-cap strong{color:var(--verde);font-size:1.05rem}

/* busca */
.busca{margin:22px 0 6px;position:relative}
.busca input{width:100%;padding:14px 18px;border:2px solid var(--linha);
  border-radius:99px;font-size:1rem;font-family:inherit;background:var(--papel)}
.busca input:focus{outline:0;border-color:var(--vivo);background:#fff}
.busca-vazio{margin:14px 0 0;color:var(--suave)}

/* listas / tabelas de ranking */
.rank-tab{width:100%;border-collapse:collapse;margin:20px 0;font-size:.95rem}
.rank-tab th,.rank-tab td{padding:11px 12px;border-bottom:1px solid var(--linha);
  text-align:left}
.rank-tab th{background:var(--verde);color:#fff;font-weight:600;font-size:.85rem;
  position:sticky;top:66px}
.rank-tab td:first-child{color:var(--suave);width:52px}
.rank-tab tr:nth-child(even) td{background:var(--papel)}
.rank-tab a{font-weight:600;text-decoration:none}
.rank-tab a:hover{text-decoration:underline}
.tab-rolagem{overflow-x:auto;-webkit-overflow-scrolling:touch}

.grupo{margin-top:34px}
.grupo h2{border-bottom:3px solid var(--claro);padding-bottom:8px}
.lista-uf{columns:3 210px;gap:24px;list-style:none;padding:0;margin:14px 0}
.lista-uf li{margin-bottom:7px;break-inside:avoid}

/* autor / fontes */
.autor,.fontes{background:var(--papel);border:1px solid var(--linha);
  border-radius:var(--r);padding:18px 20px;margin:30px 0 0}
.autor{display:flex;gap:14px;align-items:flex-start}
.autor-ico{width:44px;height:44px;border-radius:50%;flex:0 0 auto;
  background:linear-gradient(160deg,var(--vivo),var(--verde))}
.autor p,.fontes p{margin:4px 0 0;font-size:.88rem;color:var(--suave)}
.fontes h2{margin:0 0 4px;font-size:1rem}

/* rodapé */
.rodape{background:var(--verde);color:var(--claro);margin-top:52px;padding:44px 0 26px}
.rodape-in{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(178px,1fr))}
.rodape h3{color:#fff;font-size:.93rem;margin:0 0 10px}
.rodape ul{list-style:none;margin:0;padding:0}
.rodape li{margin-bottom:7px}
.rodape a{color:var(--claro);text-decoration:none;font-size:.9rem;opacity:.9}
.rodape a:hover{text-decoration:underline;opacity:1}
.rodape-fim{margin-top:30px;padding-top:18px;border-top:1px solid rgba(255,255,255,.16);
  font-size:.85rem;opacity:.8}
.rodape-fim p{margin:0 0 5px}
.mini{font-size:.79rem;opacity:.75}

@media (max-width:860px){
  .menu-btn{display:flex}
  .nav{position:fixed;inset:66px 0 auto;background:var(--verde2);display:none;
    max-height:calc(100vh - 66px);overflow:auto;padding:10px 0 18px}
  .nav.aberto{display:block}
  .menu{flex-direction:column;gap:0;padding:0 12px}
  .menu>li{border-bottom:1px solid rgba(255,255,255,.09)}
  .menu a{padding:14px 8px}
  .sub{position:static;display:none;box-shadow:none;border:0;background:transparent;
    margin:0 0 8px;padding:0 0 0 14px}
  .tem-sub.aberto .sub{display:block}
  .sub a{color:var(--claro);font-size:.9rem;padding:9px 8px}
  .sub a:hover{background:rgba(255,255,255,.1)}
  .rank-tab th{position:static}
  .hero{padding:40px 0 44px}
  .hero-num{gap:22px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* páginas de pergunta */
.resposta{background:var(--claro);border-left:4px solid var(--vivo);
  border-radius:0 var(--r) var(--r) 0;padding:18px 22px;margin:18px 0 26px;
  font-size:1.09rem;line-height:1.6}
.resposta p{margin:0}
.resposta strong{color:var(--verde)}
.lista-perg{list-style:none;padding:0;margin:14px 0}
.lista-perg li{border-bottom:1px solid var(--linha)}
.lista-perg li:last-child{border-bottom:0}
.lista-perg a{display:block;padding:12px 4px;text-decoration:none;font-weight:600}
.lista-perg a:hover{color:var(--vivo)}
.lista-perg a:before{content:"›";color:var(--vivo);margin-right:9px;font-weight:700}

/* rodapé de conteúdo: só data de revisão, sem assinar cada página */
.revisao{border-top:1px solid var(--linha);margin:30px 0 0;padding:14px 0 0}
.revisao p{margin:0;font-size:.85rem;color:var(--suave)}

/* convite para o leitor mandar foto */
.cta-foto{background:linear-gradient(140deg,var(--claro),#fff);
  border:1px solid var(--vivo);border-radius:var(--r);padding:22px 24px;margin:30px 0}
.cta-foto h2{margin:0 0 .5em;font-size:1.22rem;color:var(--verde)}
.cta-foto p{margin:0 0 .7rem}
.cta-foto p:last-of-type{margin-bottom:0}
.cta-foto.discreta{background:var(--papel);border:1px solid var(--linha);
  border-left:3px solid var(--vivo);padding:14px 18px;font-size:.92rem}
.cta-termos{margin-top:14px;border-top:1px solid var(--linha);padding-top:12px}
.cta-termos summary{cursor:pointer;font-weight:600;font-size:.9rem;
  color:var(--verde2);list-style:none}
.cta-termos summary::-webkit-details-marker{display:none}
.cta-termos summary:before{content:"▸ ";color:var(--vivo)}
.cta-termos[open] summary:before{content:"▾ "}
.cta-termos ul{margin:10px 0 0;padding-left:20px;font-size:.88rem;
  color:var(--suave);line-height:1.55}
.cta-termos li{margin-bottom:7px}

/* recordes de estádios antecessores, no mesmo terreno */
.rank-tab tr.antigo td{background:#FFFBEC}
.rank-tab tr.antigo small{color:var(--suave);font-size:.8em;font-weight:400}
.asterisco{color:var(--destaque);font-weight:700}
.legenda{font-size:.86rem;color:var(--suave);margin:-6px 0 22px}
