:root {
  --marinho: #0B2D5B;
  --marinho-fundo: #082246;
  --laranja: #F5A01A;
  --couro: #8B4A1E;
  --areia: #F6EFE2;
  --papel: #FFFBF3;
  --tinta: #1D1A16;
  --apagado: #5E554B;
  --linha: #E3D6C0;
  --zap: #1F8F4E;

  --f-titulo: "Archivo", "Arial Narrow", Arial, sans-serif;
  --f-texto: "Source Serif 4", Georgia, serif;

  --t-xs: 0.8125rem;
  --t-sm: 0.9375rem;
  --t-md: 1.125rem;
  --t-lg: 1.375rem;
  --t-xl: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
  --t-xxl: clamp(2rem, 1.2rem + 3.6vw, 3.75rem);

  --largura: 1240px;
  --gutter: 16px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--areia); color: var(--tinta); font-family: var(--f-titulo); font-size: 1rem; line-height: 1.5; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--laranja); outline-offset: 2px; }
.pular { position: absolute; left: -9999px; }
.pular:focus { left: 16px; top: 16px; z-index: 10; background: var(--papel); padding: 8px 12px; }

/* ---------- topo ---------- */
.topo { background: var(--marinho); color: #fff; border-bottom: 4px solid var(--laranja); }
.topo-faixa { max-width: var(--largura); margin: 0 auto; padding: 8px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.marca img { height: 88px; width: auto; }
.insta { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-size: var(--t-sm); font-weight: 600; padding: 8px 10px; border-radius: 6px; position: relative; }
.insta:hover { background: rgba(255,255,255,.1); }
.editorias { background: var(--marinho-fundo); }
.editorias-trilho { max-width: var(--largura); margin: 0 auto; padding: 0 var(--gutter); display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.editorias-trilho::-webkit-scrollbar { display: none; }
.editorias a { flex: none; padding: 12px 12px; font-size: var(--t-sm); font-weight: 700; font-stretch: 87.5%; text-decoration: none; color: #E8EEF7; border-bottom: 3px solid transparent; }
.editorias a:hover { color: #fff; border-bottom-color: rgba(245,160,26,.5); }
.editorias a[aria-current="page"] { color: #fff; border-bottom-color: var(--laranja); }

@media (max-width: 599px) {
  .marca img { height: 64px; }
}

main { max-width: var(--largura); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- comuns ---------- */
.rotulo { display: inline-block; font-size: var(--t-xs); font-weight: 800; color: var(--couro); text-decoration: none; letter-spacing: .02em; margin-bottom: 6px; }
.rotulo:hover { text-decoration: underline; }
/* rótulo com cidade: dois links (editoria · cidade) no mesmo visual do rótulo simples */
span.rotulo a { color: inherit; text-decoration: none; }
span.rotulo a:hover, span.rotulo a:focus-visible { text-decoration: underline; }
span.rotulo:hover { text-decoration: none; }
time, .materia-meta { display: block; font-size: var(--t-xs); color: var(--apagado); }
.secao-titulo { font-size: var(--t-lg); font-weight: 900; font-stretch: 87.5%; color: var(--marinho); margin: 0 0 16px; padding-top: 10px; border-top: 4px solid var(--marinho); }
.linha-fina { font-family: var(--f-texto); font-size: var(--t-md); color: var(--apagado); margin: 8px 0 10px; max-width: 62ch; }
.bloco { padding: 32px 0; }

/* ---------- manchete ---------- */
.destaque { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 24px 0 8px; }
.manchete-foto img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; margin-bottom: 14px; }
.manchete-titulo { font-size: var(--t-xxl); line-height: 1.02; font-weight: 900; font-stretch: 80%; letter-spacing: -0.01em; color: var(--marinho); margin: 0; text-wrap: balance; }
.manchete-titulo a, .cartao-titulo a, .ultimas-titulo { text-decoration: none; }
.manchete-titulo a:hover, .cartao-titulo a:hover, .ultimas-titulo:hover { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--laranja); }
.ultimas ol { list-style: none; margin: 0; padding: 0; }
.ultimas li { padding: 14px 0; border-bottom: 1px solid var(--linha); }
.ultimas li:first-child { padding-top: 0; }
.ultimas-titulo { display: block; font-size: var(--t-md); font-weight: 800; font-stretch: 87.5%; line-height: 1.2; margin-bottom: 6px; }
@media (min-width: 1024px) {
  .destaque { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 40px; }
}

/* ---------- grade ---------- */
.grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px 24px; }
@media (min-width: 600px) { .grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cartao-foto img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; margin-bottom: 10px; }
.cartao-titulo { font-size: var(--t-md); font-weight: 800; font-stretch: 87.5%; line-height: 1.2; margin: 0 0 8px; color: var(--tinta); overflow-wrap: anywhere; }

/* ---------- matéria ---------- */
.materia { max-width: 760px; margin: 0 auto; padding: 20px 0 8px; }
.materia-titulo { font-size: var(--t-xl); line-height: 1.06; font-weight: 900; font-stretch: 82%; color: var(--marinho); margin: 0 0 4px; text-wrap: balance; overflow-wrap: anywhere; }
.materia-meta { margin: 6px 0 14px; }
.materia-foto { margin: 18px 0 22px; }
.materia-foto img { width: 100%; border-radius: 4px; }
.materia-foto figcaption { font-size: var(--t-xs); color: var(--apagado); margin-top: 6px; }
/* Reel do Instagram no lugar da foto: largura cheia até 540px, altura pela proporção do embed (vídeo 9:16 + cabeçalho) */
.materia-reel { margin: 18px 0 22px; }
.materia-reel iframe { display: block; width: 100%; max-width: 540px; aspect-ratio: 9 / 18.5; margin: 0 auto; border: 0; border-radius: 4px; background: #fff; }
.materia-texto { font-family: var(--f-texto); font-size: var(--t-md); line-height: 1.7; }
.materia-texto p { margin: 0 0 1.1em; max-width: 68ch; }
/* páginas de texto (contato, privacidade): subtítulo e lista na mesma régua do parágrafo */
.materia-texto h2 { font-family: var(--f-titulo); font-size: var(--t-lg); line-height: 1.25; margin: 1.4em 0 0.5em; }
.materia-texto ul { margin: 0 0 1.1em; padding-left: 1.2em; max-width: 68ch; }
.materia-texto p, .materia-texto li { overflow-wrap: anywhere; }
.fonte { font-family: var(--f-titulo); font-size: var(--t-sm); color: var(--apagado); border-top: 1px solid var(--linha); padding-top: 12px; }
.aviso-exemplo { background: #FCE7C2; border-left: 4px solid var(--laranja); padding: 8px 12px; font-size: var(--t-sm); font-weight: 600; margin: 10px 0 14px; }

.voltar { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t-sm); font-weight: 700; color: var(--marinho); text-decoration: none; padding: 6px 8px 6px 2px; margin: 0 0 12px; }
.voltar:hover { text-decoration: underline; }

.compartilhar { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.bt { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--linha); background: var(--papel); color: var(--tinta); font: 700 var(--t-sm) var(--f-titulo); text-decoration: none; cursor: pointer; }
.bt:hover { border-color: var(--marinho); }
.bt-zap { background: var(--zap); border-color: var(--zap); color: #fff; }
.bt-zap:hover { background: #18773F; border-color: #18773F; }
.bt-cheio { background: var(--marinho); border-color: var(--marinho); color: #fff; }

.editoria-titulo { font-size: var(--t-xl); font-weight: 900; font-stretch: 82%; color: var(--marinho); margin: 0 0 20px; padding-bottom: 10px; border-bottom: 4px solid var(--laranja); }
.cidade-sobre { font-family: var(--f-texto); font-size: var(--t-md); color: var(--apagado); max-width: 65ch; margin: 0 0 16px; }
.regiao-cidades { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 28px; font-size: var(--t-sm); font-weight: 700; }
.regiao-cidades li { border: 1px solid var(--linha); border-radius: 999px; color: var(--apagado); }
.regiao-cidades li > * { display: block; padding: 8px 14px; }
.regiao-cidades li:has(a) { border-color: var(--marinho); }
.regiao-cidades a { color: var(--marinho); text-decoration: none; }
.regiao-cidades a:hover, .regiao-cidades a:focus-visible { text-decoration: underline; }

/* ---------- erro ---------- */
.erro { padding: 24px 0 8px; max-width: 640px; }
.erro .erro-codigo { font-size: clamp(4rem, 3rem + 6vw, 7rem); font-weight: 900; font-stretch: 75%; color: var(--laranja); line-height: 1; margin: 8px 0 0; }
.erro h1 { font-size: var(--t-xl); font-weight: 900; font-stretch: 82%; color: var(--marinho); margin: 4px 0 8px; }
.erro p { font-size: var(--t-md); }
.vazio { padding: 64px 0; }

/* ---------- rodapé ---------- */
.rodape { background: var(--marinho); color: #E8EEF7; margin-top: 40px; border-top: 4px solid var(--laranja); }
.rodape-dentro { max-width: var(--largura); margin: 0 auto; padding: 28px var(--gutter) 12px; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
.rodape-dentro img { height: 96px; width: auto; }
.rodape p { margin: 0 0 8px; font-size: var(--t-sm); }
.rodape a { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 700; }
.rodape .rodape-fim { max-width: var(--largura); margin: 0 auto; padding: 12px var(--gutter) 24px; color: #B9C6D8; }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* paginação: ← Mais recentes · Página X de Y · Mais antigas → */
.paginacao { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-top: 32px; }
.paginacao > :first-child { justify-self: start; }
.paginacao > :last-child { justify-self: end; }
.paginacao-conta { font-size: var(--t-sm); color: var(--tinta); white-space: nowrap; }
@media (max-width: 480px) {
  .paginacao { grid-template-columns: 1fr 1fr; }
  .paginacao-conta { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
}