/*
Theme Name: PP/News
Theme URI: https://puropagodao.com.br
Description: Tema do PP/News. Linguagem visual de portal, no molde do globo.com, adaptada para games. Filho do GeneratePress.
Author: PP/News
Version: 2.0.0
Template: generatepress
Text Domain: pp-news
*/

/* ---------------------------------------------------------------
   1. Fontes
   O globo usa a Globotipo e cai na Inter quando ela não carrega.
   Como a Globotipo é licenciada, ficamos com a Inter, que é a
   própria escolha de reserva deles.
   --------------------------------------------------------------- */
@font-face{
  font-family:'InterVar';
  src:url(assets/fonts/inter-var.woff2) format('woff2');
  font-weight:100 900;font-style:normal;font-display:optional;
}

/* ---------------------------------------------------------------
   2. Tokens (escala de espaço e de tipo do próprio globo.com)
   --------------------------------------------------------------- */
:root{
  --sp-10:4px; --sp-20:8px; --sp-30:16px; --sp-40:24px; --sp-50:40px; --sp-60:64px;

  --bg:#ebedef;
  --card:#ffffff;
  --ink:#2f3134;
  --ink-2:#6e727a;
  --ink-3:#9da3ae;
  --line:#e0e0e0;
  --line-2:#d3d6da;
  --soft:#f5f6f7;
  --brand:#0b36f5;
  --theme:#2f3134;

  --lh-compact:1.2;
  --lh-spaced:1.5;

  --shell:1180px;
  --top:60px;

  --sans:'InterVar',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

/* Cor de cada editoria, no espírito das marcas do portal */
.pp-t-noticias{--theme:#c4170c}
.pp-t-free-fire{--theme:#ff6700}
.pp-t-roblox{--theme:#0031ff}
.pp-t-codigos{--theme:#06aa48}
.pp-t-dicas{--theme:#a5147d}
.pp-t-jogos{--theme:#5001b3}
.pp-t-atualizacoes{--theme:#006b71}
.pp-t-aplicativos{--theme:#0669de}
.pp-t-novidades{--theme:#f50234}

/* ---------------------------------------------------------------
   3. Base
   --------------------------------------------------------------- */
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:var(--lh-spaced);
  -webkit-font-smoothing:antialiased;
}
/* As páginas do Elementor continuam brancas, como sempre foram */
body.page{background:#fff}
body.pp-noscroll{overflow:hidden}

h1,h2,h3,h4{margin:0;font-family:var(--sans);font-weight:700;line-height:var(--lh-compact);text-wrap:balance}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* Sobras do tema pai */
.site-header,.site-info,.site-footer .footer-widgets{display:none}
body:not(.page) .site-content{display:block;padding:0}
body:not(.page) #page{padding:0;max-width:none}

.pp-shell{max-width:var(--shell);margin:0 auto;padding:0 var(--sp-30)}

/* ---------------------------------------------------------------
   4. Cabeçalho
   --------------------------------------------------------------- */
.pp-top{position:sticky;top:0;z-index:60;background:var(--card);border-bottom:1px solid var(--line)}
.pp-top-in{
  max-width:var(--shell);margin:0 auto;padding:0 var(--sp-30);height:var(--top);
  display:flex;align-items:center;gap:var(--sp-40);
}
.pp-logo{
  font-size:22px;font-weight:800;letter-spacing:-.05em;color:var(--ink);
  display:inline-flex;align-items:center;line-height:1;flex:0 0 auto;
}
.pp-logo s{text-decoration:none;color:var(--brand)}
.pp-logo img{max-height:30px;width:auto}

.pp-nav{display:flex;gap:var(--sp-40);overflow-x:auto;scrollbar-width:none;flex:1 1 auto}
.pp-nav::-webkit-scrollbar{display:none}
.pp-nav a{
  font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--ink-2);
  padding:20px 0;border-bottom:3px solid transparent;white-space:nowrap;
}
.pp-nav a:hover{color:var(--theme,var(--ink))}
.pp-nav a.is-on{color:var(--ink);border-bottom-color:var(--theme)}

.pp-top-acts{margin-left:auto;display:flex;gap:var(--sp-10);align-items:center}
.pp-iconbtn{
  width:38px;height:38px;border:0;background:transparent;border-radius:4px;color:var(--ink-2);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
}
.pp-iconbtn:hover{background:var(--soft);color:var(--ink)}
.pp-iconbtn svg{width:20px;height:20px}
.pp-burger{display:none}

/* Fita de últimas */
.pp-ultimas{background:var(--card);border-bottom:1px solid var(--line);font-size:13px}
.pp-ultimas-in{
  max-width:var(--shell);margin:0 auto;padding:var(--sp-20) var(--sp-30);
  display:flex;gap:var(--sp-30);align-items:center;overflow-x:auto;white-space:nowrap;
  scrollbar-width:none;
}
.pp-ultimas-in::-webkit-scrollbar{display:none}
.pp-ultimas b{
  color:var(--brand);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;flex:0 0 auto;
}
.pp-ultimas a{color:var(--ink);flex:0 0 auto;letter-spacing:-.01em}
.pp-ultimas a:hover{color:var(--brand)}
.pp-ultimas i{color:var(--line-2);flex:0 0 auto;font-style:normal}

/* ---------------------------------------------------------------
   5. Cartão de matéria
   --------------------------------------------------------------- */
.pp-post{background:var(--card);display:flex;flex-direction:column;height:100%}
.pp-post__fig{display:block;background:var(--soft);aspect-ratio:16/9;overflow:hidden}
.pp-post__fig img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease}
.pp-post:hover .pp-post__fig img{transform:scale(1.03)}
@media (prefers-reduced-motion:reduce){.pp-post__fig img{transition:none}.pp-post:hover .pp-post__fig img{transform:none}}
.pp-post__body{padding:var(--sp-30);display:flex;flex-direction:column;gap:var(--sp-20);flex:1}
.pp-hat{
  font-size:12px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;color:var(--theme);
  line-height:1;
}
.pp-post__title{font-size:18px;letter-spacing:-.025em}
.pp-post:hover .pp-post__title{color:var(--theme)}
.pp-post__ex{font-size:14px;color:var(--ink-2);line-height:var(--lh-spaced);margin:0}
.pp-post__meta{font-size:12px;color:var(--ink-3);margin-top:auto;letter-spacing:0}

/* Manchete */
.pp-lead{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:1px;background:var(--line);margin-top:var(--sp-40)}
.pp-lead > *{background:var(--card)}
.pp-lead__main .pp-post__body{padding:var(--sp-40)}
.pp-lead__main .pp-post__title{font-size:clamp(28px,3.6vw,42px);letter-spacing:-.045em}
.pp-lead__main .pp-post__ex{font-size:16px}
.pp-lead__side{padding:var(--sp-40) var(--sp-30);display:flex;flex-direction:column;gap:var(--sp-30)}
.pp-lead__side h2{
  font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
}
.pp-bullets{display:flex;flex-direction:column}
.pp-bullets a{
  display:grid;grid-template-columns:8px minmax(0,1fr);gap:var(--sp-20);align-items:start;
  padding:var(--sp-20) 0;border-bottom:1px solid var(--line);
  font-size:15px;font-weight:600;letter-spacing:-.02em;line-height:1.3;
}
.pp-bullets a:last-child{border-bottom:0}
.pp-bullets a::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--theme);margin-top:7px}
.pp-bullets a:hover{color:var(--theme)}

/* Mais lidas */
.pp-lidas{background:var(--card);margin-top:1px;padding:var(--sp-30) var(--sp-40) var(--sp-40);border-top:3px solid var(--brand)}
.pp-lidas h2{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--brand);margin-bottom:var(--sp-30)}
.pp-lidas__lista{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp-40)}
.pp-lidas__lista a{display:flex;gap:var(--sp-20);align-items:flex-start}
.pp-lidas__lista b{font-size:24px;font-weight:800;color:var(--line-2);line-height:.9;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.pp-lidas__lista span{font-size:15px;font-weight:700;letter-spacing:-.025em;line-height:1.25}
.pp-lidas__lista a:hover span{color:var(--brand)}
.pp-lidas__lista a:hover b{color:var(--brand)}

/* ---------------------------------------------------------------
   6. Faixa por editoria
   --------------------------------------------------------------- */
.pp-band{margin-top:var(--sp-50)}
.pp-band__head{display:flex;align-items:baseline;gap:var(--sp-30);margin-bottom:var(--sp-30)}
.pp-band__head h2{font-size:22px;letter-spacing:-.03em;color:var(--theme)}
.pp-band__head a{
  font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);
  margin-left:auto;white-space:nowrap;
}
.pp-band__head a:hover{color:var(--theme)}
.pp-band__head span{flex:1;height:3px;background:var(--theme);opacity:.15;border-radius:2px}

.pp-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line)}
.pp-grid > *{background:var(--card)}
/* Na capa, a primeira matéria da faixa vem com chamada maior */
.pp-grid--3 .pp-post:first-child .pp-post__title{font-size:22px;letter-spacing:-.035em}
.pp-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* Lista compacta no fim da faixa */
.pp-band__more{
  background:var(--card);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  margin-top:1px;
}
.pp-band__more a{
  background:var(--card);padding:var(--sp-30);font-size:15px;font-weight:600;letter-spacing:-.02em;
  line-height:1.3;border-top:3px solid var(--theme);
}
.pp-band__more a:hover{color:var(--theme)}

/* ---------------------------------------------------------------
   7. Arquivo, busca e paginação
   --------------------------------------------------------------- */
.pp-main{padding-bottom:var(--sp-60)}
.pp-pagehead{padding:var(--sp-50) 0 var(--sp-30)}
.pp-pagehead .pp-hat{font-size:13px;margin-bottom:var(--sp-20)}
.pp-pagehead h1{font-size:clamp(28px,4vw,40px);letter-spacing:-.045em}
.pp-pagehead p{color:var(--ink-2);font-size:15px;margin:var(--sp-20) 0 0}

.pp-more{margin-top:var(--sp-40);text-align:center}
.pp-more button{
  font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:-.01em;
  background:var(--card);color:var(--ink);border:1px solid var(--line-2);
  padding:14px 34px;cursor:pointer;
}
.pp-more button:hover{border-color:var(--ink);}
.pp-more button[disabled]{opacity:.5;cursor:default}
.pp-nav-fallback{display:block;margin-top:var(--sp-20);font-size:13px;color:var(--ink-2)}

/* ---------------------------------------------------------------
   8. Matéria
   --------------------------------------------------------------- */
.pp-progress{position:fixed;top:0;left:0;height:3px;background:var(--theme);width:0;z-index:80;transition:width .1s linear}
.pp-artwrap{background:var(--card);margin-top:var(--sp-40);padding:var(--sp-50) var(--sp-40) var(--sp-40)}
.pp-article{max-width:720px;margin:0 auto}
.pp-crumbs{font-size:12px;color:var(--ink-3);margin-bottom:var(--sp-30)}
.pp-crumbs a:hover{color:var(--theme)}
.pp-article h1{font-size:clamp(30px,5vw,46px);letter-spacing:-.05em;margin-top:var(--sp-20)}
.pp-article__sub{font-size:19px;color:var(--ink-2);line-height:1.45;margin:var(--sp-30) 0 0;letter-spacing:-.02em}
.pp-article__meta{
  display:flex;gap:var(--sp-30);align-items:center;flex-wrap:wrap;
  margin-top:var(--sp-40);padding:var(--sp-20) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-size:13px;color:var(--ink-2);
}
.pp-article__meta .pp-save{margin-left:auto}
.pp-article__hero{margin:var(--sp-40) 0}
.pp-article__hero img{width:100%}

.pp-content{font-size:18px;line-height:1.65;color:var(--ink)}
.pp-content > *{margin:0 0 var(--sp-40)}
.pp-content h2{font-size:26px;letter-spacing:-.035em;margin-top:var(--sp-50)}
.pp-content h3{font-size:21px;letter-spacing:-.03em;margin-top:var(--sp-40)}
.pp-content a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
.pp-content ul,.pp-content ol{padding-left:22px}
.pp-content li{margin-bottom:var(--sp-20)}
.pp-content img{margin-inline:auto}
.pp-content blockquote{
  border-left:4px solid var(--theme);margin:0 0 var(--sp-40);padding:var(--sp-20) 0 var(--sp-20) var(--sp-30);
  font-size:20px;letter-spacing:-.02em;color:var(--ink);
}
.pp-content table{width:100%;border-collapse:collapse;font-size:15px}
.pp-content th,.pp-content td{border:1px solid var(--line);padding:10px 12px;text-align:left}
.pp-content th{background:var(--soft);font-weight:700}
.pp-tablewrap{overflow-x:auto}

.pp-next{display:flex;gap:var(--sp-30);align-items:center;border-top:3px solid var(--theme);padding-top:var(--sp-30);margin-top:var(--sp-50)}
.pp-next img{width:120px;aspect-ratio:16/9;object-fit:cover;flex:0 0 120px}
.pp-next .pp-hat{display:block;margin-bottom:var(--sp-10)}
.pp-next strong{font-size:18px;letter-spacing:-.03em;line-height:1.25;display:block}
.pp-next:hover strong{color:var(--theme)}

/* Botão salvar */
.pp-save{
  border:0;background:transparent;padding:4px;cursor:pointer;color:var(--ink-3);
  display:inline-flex;align-items:center;
}
.pp-save:hover{color:var(--theme)}
.pp-save svg{width:17px;height:17px}
.pp-save[aria-pressed="true"]{color:var(--theme)}
.pp-save[aria-pressed="true"] svg{fill:currentColor}

/* ---------------------------------------------------------------
   9. Painéis
   --------------------------------------------------------------- */
.pp-sheet{position:fixed;inset:0;z-index:90;display:none;background:rgba(47,49,52,.5)}
.pp-sheet.is-open{display:block}
.pp-sheet__box{
  position:absolute;inset:0 0 0 auto;width:min(420px,92vw);background:var(--card);
  padding:var(--sp-40) var(--sp-30);overflow-y:auto;animation:pp-in .2s ease-out;
}
@keyframes pp-in{from{transform:translateX(24px);opacity:.5}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.pp-sheet__box{animation:none}}
.pp-sheet__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-30)}
.pp-sheet__head h2{font-size:16px;letter-spacing:-.02em}
.pp-sheet form{display:flex;gap:var(--sp-20);margin-bottom:var(--sp-40)}
.pp-sheet input[type=search]{
  flex:1;border:1px solid var(--line-2);padding:12px var(--sp-30);font-size:16px;font-family:var(--sans);
  color:var(--ink);background:var(--card);border-radius:0;
}
.pp-sheet input[type=search]:focus{border-color:var(--brand);outline:none}
.pp-sheet button[type=submit]{background:var(--brand);color:#fff;border:0;padding:0 var(--sp-30);cursor:pointer;font-weight:700;font-family:var(--sans)}
.pp-sheet__list a{
  display:flex;justify-content:space-between;align-items:center;gap:var(--sp-20);
  padding:14px 0;border-bottom:1px solid var(--line);font-size:17px;font-weight:700;letter-spacing:-.03em;
  border-left:4px solid var(--theme);padding-left:var(--sp-30);
}
.pp-sheet__list a:hover{color:var(--theme)}
.pp-sheet__list i{font-style:normal;font-size:12px;color:var(--ink-3);font-weight:500;padding-right:var(--sp-20)}
.pp-sheet h3{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:var(--sp-40) 0 var(--sp-20)}
.pp-saved a{display:block;padding:12px 0;border-bottom:1px solid var(--line);font-size:15px;font-weight:600;letter-spacing:-.02em}
.pp-saved a:hover{color:var(--brand)}
.pp-saved__empty{color:var(--ink-2);font-size:14px}

/* ---------------------------------------------------------------
   10. Rodapé
   --------------------------------------------------------------- */
.pp-foot{background:var(--ink);color:#fff;margin-top:var(--sp-60)}
.pp-foot-in{max-width:var(--shell);margin:0 auto;padding:var(--sp-50) var(--sp-30);display:flex;gap:var(--sp-50);flex-wrap:wrap}
.pp-foot__brand{flex:1 1 240px}
.pp-foot .pp-logo{color:#fff}
.pp-foot__brand p{color:#9da3ae;font-size:13px;margin:var(--sp-20) 0 0;max-width:42ch}
.pp-foot nav{display:flex;flex-direction:column;gap:var(--sp-20)}
.pp-foot nav b{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#9da3ae}
.pp-foot nav a{font-size:14px;color:#ebedef}
.pp-foot nav a:hover{color:#fff;text-decoration:underline}
.pp-foot__legal{border-top:1px solid #45484c;padding:var(--sp-30);text-align:center;font-size:12px;color:#9da3ae}

/* ---------------------------------------------------------------
   11. Celular
   --------------------------------------------------------------- */
@media (max-width:980px){
  .pp-nav{display:none}
  .pp-burger{display:inline-flex}
  .pp-top-in{gap:var(--sp-20);height:56px}
  .pp-logo{font-size:20px}

  .pp-lead{grid-template-columns:minmax(0,1fr);margin-top:var(--sp-30)}
  .pp-lead__main .pp-post__body{padding:var(--sp-30)}
  .pp-lead__side{padding:var(--sp-30)}

  .pp-lidas{padding:var(--sp-30) var(--sp-30) var(--sp-20)}
  .pp-lidas__lista{grid-template-columns:minmax(0,1fr);gap:0}
  .pp-lidas__lista a{padding:var(--sp-20) 0;border-bottom:1px solid var(--line)}
  .pp-lidas__lista a:last-child{border-bottom:0}

  .pp-grid{grid-template-columns:minmax(0,1fr)}
  .pp-grid--3 .pp-post:first-child .pp-post__title{font-size:21px}
  .pp-band__more{grid-template-columns:minmax(0,1fr)}
  .pp-band__more a{border-top:1px solid var(--line)}
  .pp-band__more a:first-child{border-top:3px solid var(--theme)}

  /* Da segunda em diante, a matéria vira linha com miniatura à direita */
  .pp-grid .pp-post:not(:first-child){display:grid;grid-template-columns:minmax(0,1fr) 116px;gap:var(--sp-30);padding:var(--sp-30);align-items:start}
  .pp-grid .pp-post:not(:first-child) .pp-post__fig{order:2;width:116px}
  .pp-grid .pp-post:not(:first-child) .pp-post__body{padding:0}
  .pp-grid .pp-post:not(:first-child) .pp-post__title{font-size:16px}
  .pp-grid .pp-post:not(:first-child) .pp-post__ex{display:none}

  .pp-artwrap{padding:var(--sp-40) var(--sp-30) var(--sp-30);margin-top:var(--sp-30)}
  .pp-content{font-size:17px}
  .pp-foot-in{gap:var(--sp-40)}
}

@media (max-width:560px){
  .pp-shell{padding:0 var(--sp-20)}
  .pp-artwrap{padding:var(--sp-30) var(--sp-20)}
  .pp-lead__main .pp-post__body{padding:var(--sp-30) var(--sp-20)}
}

/* O botão de menu no desktop fica ao lado da busca; no celular vira o da esquerda */
@media (max-width:980px){.pp-so-desktop{display:none}}