/* =========================================================
   MARISCO GAMES — estilo do blog (mesma identidade do Instagram)
   Fundo preto liso · destaque rosa · Anton nas manchetes · Inter no texto
   Este protótipo vira o tema do WordPress no servidor.
   ========================================================= */
:root{
  --fundo:#0a0a0c; --painel:#131317; --painel2:#1a1a20; --linha:rgba(255,255,255,.08);
  --texto:#f4f4f6; --suave:#b9b9c2; --cinza:#8b8b93;
  --destaque:#ff3d8b; --roxo:#6d4cff;
  --rumor:#ff5a5a; --oficial:#3ddc84; --curiosidade:#ffc145; --brasil:#3ddc84; --noticia:#ffffff;
  --raio:18px; --max:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--fundo);color-scheme:dark}
body{background:var(--fundo);color:var(--texto);font-family:Inter,system-ui,Arial,sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.anton{font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.3px}
em.rosa,.rosa{font-style:normal;color:var(--destaque)}

/* ---------- barra de contagem ---------- */
.contagem{background:linear-gradient(90deg,#3b2bd6,#a21caf 55%,#ff1f8e);font:700 14px/1 Inter,sans-serif;letter-spacing:2px;text-transform:uppercase}
.contagem .wrap{display:flex;align-items:center;justify-content:center;gap:12px;height:40px}
.contagem img{width:20px;height:20px}
.contagem b{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:20px;letter-spacing:1px}

/* ---------- cabeçalho ---------- */
header{position:sticky;top:0;z-index:10;background:rgba(10,10,12,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--linha)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;gap:24px}
.marca{display:flex;align-items:center;gap:12px}
.marca img{width:40px;height:40px}
.marca span{font-family:Anton,Impact,sans-serif;font-size:28px;letter-spacing:1px;text-transform:uppercase}
nav{display:flex;gap:28px;font:600 15px/1 Inter,sans-serif;color:var(--suave)}
nav a:hover,nav a.ativo{color:var(--texto)}
nav a.ativo{box-shadow:inset 0 -2px 0 var(--destaque);padding-bottom:6px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;border-radius:999px;background:var(--destaque);color:#fff;font:700 14px/1 Inter,sans-serif;letter-spacing:.5px}
.btn.fantasma{background:transparent;border:1px solid var(--linha);color:var(--texto)}

/* ---------- selos ---------- */
.selo{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 11px;border-radius:999px;background:rgba(0,0,0,.45);
  backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.16);font:600 12px/1 Inter,sans-serif;letter-spacing:1.6px;text-transform:uppercase}
.selo i{width:8px;height:8px;border-radius:50%;background:var(--cor,#fff)}
.selo.rumor{--cor:var(--rumor)} .selo.oficial{--cor:var(--oficial)} .selo.curiosidade{--cor:var(--curiosidade)}
.selo.brasil{--cor:var(--brasil)} .selo.noticia{--cor:var(--noticia)}

/* ---------- destaque principal ---------- */
.hero{position:relative;margin-top:32px;border-radius:var(--raio);overflow:hidden;min-height:540px;display:flex;align-items:flex-end}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,10,12,0) 30%,rgba(10,10,12,.88) 78%,var(--fundo))}
.hero .info{position:relative;z-index:1;padding:40px;max-width:900px}
.grito{display:flex;align-items:center;gap:10px;margin:18px 0 12px;font:700 14px/1 Inter,sans-serif;letter-spacing:3px;text-transform:uppercase;color:var(--destaque)}
.grito img{width:20px;height:20px}
.hero h1{font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:58px;line-height:1.08}
.hero p{margin-top:16px;color:var(--suave);font-size:18px;max-width:700px}
.meta{margin-top:18px;display:flex;gap:16px;align-items:center;color:var(--cinza);font-size:14px}
.meta img{width:28px;height:28px;border-radius:50%}

/* ---------- seções ---------- */
.secao{margin-top:64px}
.secao-topo{display:flex;align-items:baseline;justify-content:space-between;border-bottom:1px solid var(--linha);padding-bottom:14px;margin-bottom:28px}
.secao-topo h2{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:32px;text-transform:uppercase;letter-spacing:.5px}
.secao-topo h2 span{color:var(--destaque)}
.secao-topo a{color:var(--cinza);font-size:14px;font-weight:600}

/* ---------- cards de notícia ---------- */
.grade{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.card{display:flex;flex-direction:column;gap:14px}
.card .img{position:relative;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:var(--painel)}
.card .img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.card:hover .img img{transform:scale(1.04)}
.card .selo{position:absolute;left:14px;top:14px}
.card h3{font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:24px;line-height:1.15}
.card p{color:var(--suave);font-size:15px}
.card .meta{margin-top:0}

/* ---------- linha de rumores (lista compacta) ---------- */
.lista{display:flex;flex-direction:column}
.lista a{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:center;padding:18px 0;border-bottom:1px solid var(--linha)}
.lista img{width:150px;aspect-ratio:16/10;object-fit:cover;border-radius:10px}
.lista h4{font:700 18px/1.35 Inter,sans-serif}
.lista small{display:block;margin-top:6px;color:var(--cinza);font-size:13px}

/* ---------- colunas ---------- */
.colunas{display:grid;grid-template-columns:2fr 1fr;gap:48px}

/* ---------- ofertas (afiliados) ---------- */
.ofertas{display:flex;flex-direction:column;gap:14px}
.oferta{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;padding:14px;border-radius:14px;background:var(--painel);border:1px solid var(--linha)}
.oferta .ico{width:64px;height:64px;border-radius:10px;background:var(--painel2);display:grid;place-items:center;font-size:28px}
.oferta b{display:block;font-size:15px}
.oferta small{color:var(--cinza);font-size:13px}
.oferta .preco{font:700 15px/1 Inter,sans-serif;color:var(--destaque)}
.aviso{margin-top:10px;color:var(--cinza);font-size:12px}

/* ---------- chamada Instagram ---------- */
.cta{margin-top:72px;position:relative;border-radius:var(--raio);overflow:hidden;padding:56px 40px;text-align:center;background:var(--painel)}
.cta>img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.18}
.cta .contorno{position:absolute;right:-120px;top:50%;width:420px;transform:translateY(-50%);opacity:.9;filter:drop-shadow(0 0 10px rgba(255,61,139,.8)) drop-shadow(0 0 32px rgba(255,61,139,.45))}
.cta>*:not(img){position:relative}
.cta h2{font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:52px;line-height:1.08}
.cta p{margin:14px auto 28px;color:var(--suave);max-width:560px}

/* ---------- rodapé ---------- */
footer{margin-top:80px;border-top:1px solid var(--linha);padding:40px 0 56px;color:var(--cinza);font-size:14px}
footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer .marca span{font-size:22px;color:var(--texto)}
footer p{max-width:520px;margin-top:12px}

/* ---------- página de matéria ---------- */
.artigo{max-width:780px;margin:0 auto}
.artigo .topo{margin-top:40px}
.artigo h1{font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:52px;line-height:1.08;margin-top:16px}
.artigo .sub{margin-top:16px;font-size:20px;color:var(--suave)}
.artigo figure{margin:32px 0 8px;border-radius:var(--raio);overflow:hidden}
.artigo figcaption{color:var(--cinza);font-size:13px;margin-bottom:28px}
.corpo{font-size:19px;line-height:1.75;color:#dcdce2}
.corpo p+p{margin-top:22px}
.corpo h2{font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:30px;margin:40px 0 14px;color:var(--texto)}
.corpo strong{color:var(--texto)}
.corpo ul{margin:18px 0 0 0;list-style:none;display:flex;flex-direction:column;gap:12px}
.corpo li{position:relative;padding-left:28px}
.corpo li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:12px;border-radius:50%;background:var(--destaque)}
.destaque-num{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:32px 0}
.destaque-num div{background:var(--painel);border:1px solid var(--linha);border-radius:14px;padding:22px}
.destaque-num b{display:block;font-family:Anton,Impact,sans-serif;font-weight:400;font-size:38px;color:var(--destaque)}
.destaque-num span{color:var(--suave);font-size:14px}
.fonte-box{margin-top:40px;padding:20px 24px;border-left:4px solid var(--destaque);background:var(--painel);border-radius:0 14px 14px 0;font-size:15px;color:var(--suave)}
.fonte-box b{color:var(--texto)}
.pergunta{margin-top:32px;padding:28px;border-radius:var(--raio);background:var(--painel2);text-align:center}
.pergunta h3{font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;font-size:28px}

/* ---------- celular ---------- */
@media (max-width:860px){
  nav{display:none}
  /* no celular a foto fica em cima e o texto embaixo, sem um sobre o outro */
  .hero{min-height:0;display:block;margin-top:20px;background:transparent}
  .hero>img{position:static;width:100%;height:auto;aspect-ratio:4/3;border-radius:var(--raio)}
  .hero::after{display:none}
  .hero .info{padding:18px 2px 0}
  .hero .selo{position:static}
  .hero h1{font-size:36px}
  .contagem .data{display:none}
  .secao-topo h2{font-size:26px}
  .grade{grid-template-columns:1fr}
  .colunas{grid-template-columns:1fr}
  .lista a{grid-template-columns:110px 1fr}.lista img{width:110px}
  .cta{padding:44px 22px}.cta h2{font-size:36px}.cta .contorno{width:260px;right:-110px;opacity:.6}
  .artigo h1{font-size:36px}.corpo{font-size:17px}
  .destaque-num{grid-template-columns:1fr}
  header .btn{display:none}
}