/* Portugueses Pelo Mundo — folha de estilo do jornal.
   Regra de casa: o texto manda. Fios finos, muito branco, nada de caixas pesadas. */

@font-face{font-family:Archivo;src:url(/assets/fonts/archivo-400.woff2)format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Archivo;src:url(/assets/fonts/archivo-600.woff2)format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Archivo;src:url(/assets/fonts/archivo-800.woff2)format("woff2");font-weight:800;font-display:swap}

:root{
  --tinta:#15171a;        /* texto */
  --tinta-2:#5b6066;      /* secundário */
  --fio:#e3e5e8;          /* fio fino */
  --fio-forte:#c9ccd1;
  --vermelho:#d5121a;
  --verde:#046a38;
  --amarelo:#ffc700;
  --papel:#fff;
  --larg:1120px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);
  font:400 16px/1.6 Archivo,"Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.env{max-width:var(--larg);margin:0 auto;padding:0 20px}

/* Cabeçalho ------------------------------------------------------------- */
.topo{padding:18px 0 14px}
.topo-linha{display:flex;align-items:baseline;gap:18px}
.marca{font-weight:800;font-size:clamp(20px,3vw,26px);letter-spacing:-.025em;line-height:1}
.marca b{color:var(--vermelho);font-weight:800}
.marca i{display:inline-block;width:6px;height:6px;background:var(--verde);border-radius:50%;margin-left:3px;font-style:normal;vertical-align:middle}
.topo-nota{margin-left:auto;font-size:12px;color:var(--tinta-2);letter-spacing:.08em;text-transform:uppercase}
@media(max-width:640px){.topo-nota{display:none}}

/* Navegação ------------------------------------------------------------- */
.nav{border-top:1px solid var(--fio);border-bottom:1px solid var(--fio);position:relative;z-index:30;background:var(--papel)}
.nav-linha{display:flex;align-items:stretch;gap:4px}
.nav-botao{appearance:none;background:none;border:0;padding:13px 14px;cursor:pointer;color:var(--tinta);
  font:600 14px/1 Archivo,Arial,sans-serif;letter-spacing:.04em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:6px;border-bottom:2px solid transparent;margin-bottom:-1px}
.nav-botao:hover{color:var(--vermelho)}
.nav-botao[aria-expanded=true]{color:var(--vermelho);border-bottom-color:var(--vermelho)}
.nav-botao svg{width:9px;height:9px;fill:currentColor;opacity:.55;transition:transform .18s ease}
.nav-botao[aria-expanded=true] svg{transform:rotate(180deg);opacity:1}
.nav-18{margin-left:auto;display:inline-flex;align-items:center;gap:7px;padding:13px 2px 13px 14px;
  font:600 13px/1 Archivo,Arial,sans-serif;letter-spacing:.05em;text-transform:uppercase;color:var(--tinta-2)}
.nav-18 em{font-style:normal;background:var(--tinta);color:#fff;font-weight:800;font-size:11px;padding:3px 6px;letter-spacing:.04em}
.nav-18:hover{color:var(--vermelho)}
@media(max-width:700px){
  .nav-linha{gap:0;flex-wrap:wrap}
  .nav-botao{padding:12px 10px;font-size:12.5px}
  .nav-18{padding:12px 0 12px 10px;font-size:12px}
}
@media(max-width:430px){
  .nav-linha{justify-content:space-between}
  .nav-18{margin-left:0;width:100%;padding:0 0 11px;border-top:1px solid var(--fio);padding-top:10px}
}

.submenu{display:none;padding:18px 0 22px;border-bottom:1px solid var(--fio);background:var(--papel)}
.submenu.aberto{display:block}
.submenu ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:2px 26px;margin:0;padding:0;list-style:none}
.submenu a{display:block;padding:7px 0;font-size:15px;font-weight:600;color:var(--tinta);border-bottom:1px solid var(--fio)}
.submenu a:hover{color:var(--vermelho)}

/* Manchete -------------------------------------------------------------- */
.abre{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:42px;padding:34px 0 30px}
@media(max-width:840px){.abre{grid-template-columns:1fr;gap:26px;padding:26px 0 22px}}
.chapeu{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--vermelho);display:block;margin-bottom:10px}
.chapeu.verde{color:var(--verde)}
.abre h1{margin:0 0 14px;font-size:clamp(31px,4.6vw,47px);line-height:1.04;letter-spacing:-.03em;font-weight:800}
.abre .entrada{margin:0;font-size:18px;line-height:1.5;color:#33383d;max-width:36em}
.abre .assinatura{margin:18px 0 0;font-size:13px;color:var(--tinta-2)}
.coluna{border-top:2px solid var(--tinta);padding-top:12px}
@media(min-width:841px){.coluna{border-top:0;border-left:1px solid var(--fio);padding:2px 0 0 34px}}
.coluna h2{margin:0 0 4px;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta-2)}
.coluna ul{margin:0;padding:0;list-style:none}
.coluna li{padding:13px 0;border-bottom:1px solid var(--fio)}
.coluna li:last-child{border-bottom:0}
.coluna li span{display:block;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--vermelho);margin-bottom:3px}
.coluna li p{margin:0;font-size:15.5px;font-weight:600;line-height:1.35}

/* Secções --------------------------------------------------------------- */
.seccao{padding:30px 0 6px;border-top:1px solid var(--fio)}
.seccao-topo{display:flex;align-items:baseline;gap:12px;margin-bottom:20px}
.seccao-topo h2{margin:0;font-size:20px;font-weight:800;letter-spacing:-.02em}
.seccao-topo h2 em{font-style:normal;color:var(--vermelho)}
.seccao-topo .nota{margin-left:auto;font-size:12.5px;color:var(--tinta-2)}
.seccao-topo .nota a{color:var(--vermelho);font-weight:600}
.seccao-topo .nota a:hover{text-decoration:underline}

.entradas{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:0 32px}
.entradas a{display:block;padding:15px 0;border-top:1px solid var(--fio)}
.entradas a:first-child,.entradas a:nth-child(2),.entradas a:nth-child(3),.entradas a:nth-child(4){border-top:0}
@media(max-width:900px){.entradas a:nth-child(3),.entradas a:nth-child(4){border-top:1px solid var(--fio)}}
@media(max-width:620px){.entradas a:nth-child(2){border-top:1px solid var(--fio)}}
.entradas h3{margin:0 0 5px;font-size:17.5px;font-weight:800;letter-spacing:-.015em}
.entradas a:hover h3{color:var(--vermelho)}
.entradas p{margin:0;font-size:14.5px;line-height:1.45;color:var(--tinta-2)}

/* Blocos de pé de página ------------------------------------------------ */
.bloco{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;
  padding:26px 0;border-top:1px solid var(--fio)}
@media(max-width:700px){.bloco{grid-template-columns:1fr;gap:16px}}
.bloco h2{margin:0 0 7px;font-size:21px;font-weight:800;letter-spacing:-.02em}
.bloco p{margin:0;color:var(--tinta-2);font-size:15.5px;max-width:58ch}
.botao{display:inline-block;padding:13px 22px;font:600 14px/1 Archivo,Arial,sans-serif;letter-spacing:.05em;
  text-transform:uppercase;background:var(--verde);color:#fff;white-space:nowrap}
.botao:hover{background:#03512b}
.botao.escuro{background:var(--tinta)}
.botao.escuro:hover{background:#000}
.botao.linha{background:none;color:var(--tinta);border:1px solid var(--fio-forte)}
.botao.linha:hover{border-color:var(--tinta);background:none}

/* Artigo ---------------------------------------------------------------- */
.artigo{max-width:680px;margin:0 auto;padding:34px 0 20px}
.artigo h1{margin:0 0 16px;font-size:clamp(29px,4.4vw,42px);line-height:1.06;letter-spacing:-.03em;font-weight:800}
.artigo .entrada{margin:0 0 22px;padding-bottom:22px;border-bottom:1px solid var(--fio);
  font-size:18.5px;line-height:1.5;color:#33383d}
.artigo h2{margin:32px 0 10px;font-size:20px;font-weight:800;letter-spacing:-.015em}
.artigo p{margin:0 0 16px;font-size:17px;line-height:1.68}
.artigo ul{margin:0 0 18px;padding-left:18px}
.artigo li{margin-bottom:9px;line-height:1.55}
.artigo .fecho{margin-top:28px;padding-top:22px;border-top:1px solid var(--fio)}

/* Secção sem artigos ---------------------------------------------------- */
.espera{max-width:600px;padding:46px 0 40px}
.espera h1{margin:0 0 12px;font-size:clamp(27px,4vw,36px);line-height:1.1;letter-spacing:-.025em;font-weight:800}
.espera p{margin:0 0 20px;font-size:17px;color:var(--tinta-2);line-height:1.6}

/* Rodapé ---------------------------------------------------------------- */
.rodape{margin-top:48px;border-top:3px solid var(--tinta);padding:22px 0 40px;font-size:13.5px;color:var(--tinta-2)}
.rodape nav{display:flex;flex-wrap:wrap;gap:8px 20px;margin-bottom:16px}
.rodape nav a{font-weight:600;color:var(--tinta);font-size:13.5px}
.rodape nav a:hover{color:var(--vermelho)}
.rodape p{margin:0 0 8px;line-height:1.55;max-width:74ch}