/* O Xerife Notícias — tema
   Medidas tiradas da arte de referência (899 px de largura) em escala 1,6 (página de 1438 px). */

:root {
  --ouro: #fccc4d;
  --ouro-esc: #e0ae36;
  --ouro-fio: #a8874d;
  --creme: #f3ebdc;
  --creme-2: #d9d0c0;
  --preto: #080605;
  --cafe: #2a1a0e;
  --tinta: #1f160e;
  --f-slab: 'Roboto Slab', Georgia, serif;
  --f-cond: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --f-texto: 'Barlow', Arial, sans-serif;
  --larg: 1355px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--preto); color: var(--creme); font: 400 16px/1.5 var(--f-texto); }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
svg { width: 1em; height: 1em; flex: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
button, input { font: inherit; }
.wrap { width: min(var(--larg), 100% - 48px); margin-inline: auto; }
.pular { position: absolute; left: -9999px; }
/* Serifada de faroeste: a Roboto Slab pesada comprimida na horizontal. A caixa fica 1/c mais larga antes de
   comprimir, então o texto quebra linha no lugar certo em títulos de qualquer tamanho. */
.estreita { display: block; width: calc(100% / var(--c, .7)); transform: scaleX(var(--c, .7)); transform-origin: left top; }
.estreita--centro { margin-left: calc(50% * (1 - 1 / var(--c, .7))); transform-origin: center top; }
.pular:focus { left: 12px; top: 12px; z-index: 100; background: var(--ouro); color: #000; padding: 8px 14px; }

/* corda (borda trançada entre seções) */
.corda {
  height: 11px; position: relative; z-index: 2;
  background:
    linear-gradient(#0000 0 30%, #0005 100%),
    repeating-linear-gradient(118deg, #4a321b 0 3px, #b08a58 3px 5.5px, #7b5a35 5.5px 8px, #3b2715 8px 10px);
  box-shadow: 0 -1px 0 #0a0603, 0 1px 0 #0a0603, 0 2px 4px #000a;
}

/* ================= CABEÇALHO ================= */
.topo { background: #0b0704 url(../img/madeira-escura.webp) center/cover; position: relative; }
.topo__linha { position: relative; height: 261px; display: flex; }
.menu { position: absolute; left: 0; top: 88px; width: 42px; height: 33px; padding: 0; border: 0; background: none; color: #e6b75a; cursor: pointer; }
.menu svg { width: 42px; height: 33px; }
.logo { position: absolute; left: 110px; top: 10px; z-index: 5; width: 332px; filter: drop-shadow(0 6px 10px #000c); }
.logo img { width: 100%; height: auto; }
.topo__dir { margin-left: auto; width: 852px; display: flex; flex-direction: column; }
.topo__acoes { height: 122px; display: flex; align-items: center; justify-content: flex-end; gap: 36px; border-bottom: 1.5px solid #8e7347; padding-bottom: 6px; }
.busca { width: 312px; height: 49px; display: flex; align-items: center; border: 2px solid #c9a24a; border-radius: 30px; background: #0c0805e6; padding: 0 16px 0 22px; }
.busca input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--creme); font: 500 17px var(--f-texto); }
.busca input::placeholder { color: #cfc6b4; }
.busca button { border: 0; background: none; color: var(--creme); padding: 0; display: grid; cursor: pointer; }
.busca button svg { width: 25px; height: 25px; }
.redes { display: flex; gap: 22px; color: #edd18a; }
.redes svg { width: 30px; height: 30px; display: block; }
.redes a:hover { color: var(--ouro); }
.nav { flex: 1; display: flex; justify-content: space-between; align-items: center; padding: 0 0 4px 34px; }
.nav a { display: flex; flex-direction: column; align-items: center; gap: 15px; font: 700 21px/1 var(--f-cond); text-transform: uppercase; color: #e4ded2; }
.nav a svg { width: 32px; height: 32px; color: #ddd5c4; }
.nav a.ativo, .nav a.ativo svg { color: var(--ouro); }
.nav a:hover, .nav a:hover svg { color: var(--ouro); }
/* editoria com subcategorias (Cidades > Camaçari): as filhas abrem embaixo dela */
.nav__grupo { position: relative; }
.nav__grupo > a::after { content: '▾'; position: absolute; right: -14px; bottom: 0; font-size: 14px; color: #c9a24a; }
.nav__filhas { position: absolute; z-index: 50; top: calc(100% + 10px); left: 50%; translate: -50% 0; min-width: 200px; padding: 8px; border-radius: 8px; background: #120c08; border: 1.5px solid #6e5838; box-shadow: 0 10px 24px #000b; display: none; }
.nav__filhas::before { content: ''; position: absolute; inset: -14px 0 auto; height: 14px; } /* ponte: o mouse não perde o menu no caminho */
.nav__grupo:hover .nav__filhas, .nav__grupo:focus-within .nav__filhas { display: block; }
.nav__filhas a { flex-direction: row; gap: 10px; padding: 10px 12px; border-radius: 6px; font-size: 19px; white-space: nowrap; }
.nav__filhas a svg { width: 20px; height: 20px; }
.nav__filhas a:hover { background: #2a1d10; }
.gaveta > a.gaveta__filha { padding-left: 34px; font-size: 18px; color: #cfc6b4; }

.lema { height: 58px; display: flex; align-items: center; justify-content: center; gap: 22px; background: #1d140c url(../img/madeira-faixa.webp) center/cover; }
.lema p { font: 600 23px/1 var(--f-cond); letter-spacing: .37em; text-transform: uppercase; color: #e3d9c6; }
.lema__chapeu { width: 32px; height: 20px; color: #e3b44f; }
.lema__fio { width: 128px; height: 2px; background: linear-gradient(90deg, #0000, #c9a24a 25%, #c9a24a 75%, #0000); }
.lema__fio:first-child { width: 170px; margin-right: 106px; }
.lema__fio:last-child { margin-left: 4px; width: 168px; }

/* ================= MANCHETE ================= */
.hero { position: relative; height: 710px; background: #000; overflow: hidden; display: flex; }
.hero__foto { position: absolute; inset: 0 390px 0 0; overflow: hidden; /* vai até a coluna Últimas notícias, em qualquer largura de tela */
  background:
    radial-gradient(60% 18% at 72% 62%, #ffb04a 0%, #e0782a 30%, #0000 75%),
    radial-gradient(70% 40% at 70% 52%, #8a4c1c 0%, #0000 70%),
    linear-gradient(180deg, #2a2420 0%, #6b4a2c 45%, #3a2a1c 62%, #161210 100%); }
/* a foto aparece INTEIRA (contain); a sobra é a própria foto desfocada e escura (::before) */
.hero__foto::before { content: ''; position: absolute; inset: -40px; background: var(--foto, none) center / cover; filter: blur(30px) brightness(.45) saturate(1.15); }
.hero__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: right center; }
.hero__foto::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, #000 0%, #000e 18%, #000a 34%, #0004 52%, #0000 70%), linear-gradient(0deg, #000a 0%, #0000 22%); }
.hero__texto { position: relative; z-index: 1; width: 1048px; padding: 50px 0 0 56px; }

.fita { position: relative; display: inline-flex; align-items: center; height: 52px; padding: 0 44px 0 76px; margin-left: -8px;
  font: 700 31px/1 var(--f-cond); text-transform: uppercase; color: #2a1404;
  background: linear-gradient(90deg, #f8c54a, #fcd567 60%, #e8b23c);
  clip-path: polygon(16px 0, 100% 0, calc(100% - 14px) 100%, 16px 100%, 0 50%); }
.fita__selo { position: absolute; left: 24px; top: 50%; translate: 0 -50%; width: 30px; height: 30px; display: grid; place-items: center; color: #2a1404; }
.fita__selo svg { width: 30px; height: 30px; }
.fita__raio { width: 24px; height: 40px; color: #f2c04a; margin-left: 8px; vertical-align: -4px; }
.hero__titulo { margin-top: 18px; font-family: var(--f-slab); font-weight: 900; text-transform: uppercase; line-height: .86; }
.hero__titulo .l1 { --c: .76; font-size: 134px; color: #fbf6ee; }
.hero__titulo .l2 { --c: .745; font-size: 113px; color: var(--ouro); margin-top: 10px; }
.hero__linha-fina { margin-top: 26px; width: 480px; font: 500 31px/40px var(--f-texto); color: #f1ece3; }
.botao { display: inline-flex; align-items: center; gap: 18px; height: 56px; padding: 0 34px; border-radius: 30px; margin-top: 40px;
  background: var(--ouro); color: #2a1604; font: 700 26px/1 var(--f-cond); text-transform: uppercase; box-shadow: 0 3px 0 #b8892a; }
.botao svg { width: 26px; height: 26px; }
.botao:hover { background: #ffd968; }
.meta { display: flex; align-items: center; gap: 22px; font: 500 15px/1 var(--f-texto); color: #3b342c; }
.meta span { display: inline-flex; align-items: center; gap: 9px; }
.meta span + span { padding-left: 22px; border-left: 1px solid #0003; }
.meta svg { width: 19px; height: 19px; color: #8a6a2a; }
.meta--clara { color: #ddd6ca; font-size: 18px; }
.meta--clara span + span { border-color: #fff3; }
.meta--clara svg { width: 22px; height: 22px; color: #e2b24a; }
.hero .meta { margin-top: 36px; }
.hero__pontos { display: flex; gap: 0; margin-top: 28px; }
.hero__pontos i { width: 120px; height: 4px; background: #3b3328; }
.hero__pontos i.ativo { width: 52px; background: var(--ouro); }

/* últimas notícias */
.ultimas { position: relative; z-index: 1; margin-left: auto; width: 390px; padding: 26px 26px 0 22px; background: linear-gradient(90deg, #0d0a08, #080605 30%); border-left: 3px solid #241a10; box-shadow: -8px 0 16px #000c; }
.tabua { display: flex; align-items: center; gap: 22px; height: 58px; padding: 0 20px; margin-left: 4px;
  background: #8a6638 url(../img/tabua-titulo.webp) center/cover; border-radius: 3px;
  box-shadow: inset 0 0 0 1px #c49a5c55, inset 0 -3px 0 #0004, 0 3px 6px #000a;
  font: 800 35px/1 var(--f-slab); text-transform: uppercase; color: #fbf3e2; text-shadow: 0 2px 2px #0008; overflow: hidden; }
.tabua .estreita { --c: .64; flex: none; white-space: nowrap; width: auto; }
.tabua svg { width: 34px; height: 34px; color: var(--ouro); filter: drop-shadow(0 1px 1px #0008); }
.ultimas ol { margin-top: 22px; }
.ultimas li { padding: 9px 4px 9px 22px; border-bottom: 1px solid #3a3128; }
.ultimas time { display: block; font: 700 19px/1 var(--f-cond); color: var(--ouro); }
.ultimas li a { display: block; margin-top: 5px; font: 500 21px/27px var(--f-texto); color: #f0eadf; }
.ultimas li a:hover { color: var(--ouro); }
.ver-todas { display: inline-flex; align-items: center; gap: 12px; margin: 20px 0 0 22px; font: 700 22px/1 var(--f-cond); text-transform: uppercase; color: var(--ouro); }
.ver-todas svg { width: 24px; height: 24px; }

/* ================= EDITORIAS ================= */
.editorias { background: #3a1d0b url(../img/tabuas.webp) center/cover; padding: 26px 0 24px; box-shadow: inset 0 8px 10px #000a, inset 0 -8px 10px #000a; }
.editorias__grade { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.editoria { position: relative; height: 358px; overflow: hidden; border: 1.5px solid #7c6440; border-radius: 3px; background: #0b0807; box-shadow: 0 4px 10px #000a; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 0 20px 26px; }
.editoria img { position: absolute; inset: 0 0 auto; width: 100%; height: 236px; object-fit: cover; object-position: top; -webkit-mask-image: linear-gradient(#000 62%, #0000); mask-image: linear-gradient(#000 62%, #0000); }
.editoria::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #0000 0%, #0000 35%, #0b0807b0 62%, #0b0807 82%); }
.editoria > * { position: relative; }
.editoria > svg { width: 44px; height: 44px; color: #efe1c2; margin-bottom: 14px; }
.editoria b { font: 800 34px/1 var(--f-slab); text-transform: uppercase; color: #f6ead2; white-space: nowrap; }
.editoria b .estreita { --c: .67; }
.editoria > span { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; font: 600 20px/1 var(--f-cond); text-transform: uppercase; color: #ece3d2; }
.editoria > span svg { width: 22px; height: 22px; color: var(--ouro); }
.editoria:hover b { color: var(--ouro); }

/* ================= PAPEL ================= */
.papel { background: #f6e4cc url(../img/papel.webp) center/100% 100%; padding: 26px 0 22px; color: var(--tinta); box-shadow: inset 0 6px 8px #0007; }
.papel__grade { display: grid; grid-template-columns: 714px 1fr; gap: 36px; }
.destaque { position: relative; height: 552px; border-radius: 4px; overflow: hidden; background: #000; box-shadow: 0 6px 14px #0007; color: #fff; }
.destaque__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.destaque::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #0000 25%, #000a 52%, #000e 78%), linear-gradient(90deg, #0008, #0000 60%); }
.destaque__texto { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 0 28px 28px 30px; }
.fita--peq { height: 38px; padding: 0 20px 0 56px; font-size: 23px; }
.fita--peq .fita__selo { left: 19px; width: 22px; height: 22px; }
.fita--peq .fita__selo svg { width: 22px; height: 22px; }
.fita__raio--peq { width: 18px; height: 32px; }
.destaque h2 { --c: .83; width: calc(545px / var(--c)); margin-top: 16px; font: 800 58px/57px var(--f-slab); color: #fbf7ef; }
.destaque h2 em { font-style: normal; color: var(--ouro); }
.destaque__texto > p { margin-top: 8px; font: 500 23px/34px var(--f-texto); color: #f1ece3; max-width: 540px; }
.destaque__pe { margin-top: 22px; display: flex; align-items: center; justify-content: space-between; }
.destaque .meta--clara { font-size: 16px; }
.botao--peq { height: 48px; margin: 0; padding: 0 22px 0 26px; font-size: 22px; border-radius: 6px; gap: 14px; }
.botao--peq svg { width: 22px; height: 22px; }

.lista { display: flex; flex-direction: column; }
.item { display: flex; gap: 24px; padding: 0 0 6px; }
.item + .item { padding-top: 7px; border-top: 1px solid #0002; }
.item img { width: 224px; height: 172px; object-fit: cover; border-radius: 3px; box-shadow: 0 3px 8px #0005; flex: none; }
.item > div { padding-top: 12px; }
.selo { display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 13px 0 11px; border-radius: 13px; background: #22170e; color: #efc355; font: 700 17px/1 var(--f-cond); text-transform: uppercase; letter-spacing: .03em; }
.selo svg { width: 15px; height: 15px; }
.item h3 { margin-top: 8px; max-width: 262px; font: 700 28px/31px 'Roboto Condensed', var(--f-cond); color: #1b130c; letter-spacing: -.005em; }
.item h3 a:hover { color: #8a5c12; }
.item .meta { margin-top: 10px; font-size: 17px; font-weight: 600; color: #3a2f24; }
.item .meta span:last-child svg { color: #2a2018; }

/* ================= FAIXA ================= */
.faixa { position: relative; height: 197px; overflow: hidden;
  background: radial-gradient(60% 140% at 48% 45%, #f7d9a4 0%, #e8b878 40%, #b98146 72%, #6e4520 100%), url(../img/papel.webp) center/100% 100%; background-blend-mode: multiply;
  box-shadow: inset 0 10px 12px -6px #3a200c, inset 0 -10px 12px -6px #3a200c; display: flex; align-items: center; justify-content: center; }
.faixa__cenario { position: absolute; inset: 0; width: 100%; height: 100%; }
.faixa__vaqueiro { position: absolute; left: 110px; top: 22px; height: 168px; width: auto; }
.faixa__texto { position: relative; width: 700px; text-align: center; font: 900 57px/1.04 var(--f-slab); text-transform: uppercase; color: #22150a; text-shadow: 0 1px 0 #f6dcae; margin-left: -116px; }
.faixa__texto .estreita { --c: .68; }
.faixa__l2 { font-size: 66px; }
.faixa__logo { position: absolute; right: 132px; top: 4px; width: 236px; height: auto; filter: drop-shadow(0 4px 6px #0009); }

/* ================= RODAPÉ ================= */
.rodape { background: #0a0908; }
.rodape__grade { display: grid; grid-template-columns: 250px 1fr 300px 420px; align-items: center; height: 206px; }
.rodape__logo { width: 232px; height: auto; }
.rodape__sobre { align-self: stretch; display: flex; align-items: center; padding: 0 40px 0 34px; border-left: 1px solid #5a4630; font: 500 16px/25px var(--f-texto); color: #e6e0d4; margin-left: 10px; }
.rodape__redes { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding-left: 22px; border-left: 1px solid #5a4630; border-right: 1px solid #5a4630; }
.rodape__redes h2 { font: 700 21px/1 var(--f-cond); text-transform: uppercase; letter-spacing: .06em; color: #e8b84a; }
.rodape__redes ul { display: flex; gap: 17px; margin-top: 22px; }
.rodape__redes a { width: 52px; height: 52px; border: 2px solid #c9a24a; border-radius: 50%; display: grid; place-items: center; color: #e8c06a; }
.rodape__redes a:hover { background: #c9a24a22; }
.rodape__redes svg { width: 24px; height: 24px; }
.rodape__redes p { align-self: stretch; text-align: center; padding-right: 22px; margin-top: 18px; font: 600 26px/1 var(--f-cond); color: #f0e9dc; }
.news { margin-left: 22px; padding: 0 16px 16px; border: 1px solid #3c3125; border-radius: 4px; background: #0d0b09; }
.fita-reta { margin: -1px -16px 0 -10px; height: 42px; display: flex; align-items: center; padding: 0 24px; font: 700 20px/1 var(--f-cond); text-transform: uppercase; color: #2a1404;
  background: linear-gradient(90deg, #f6c64c, #fcd567 60%, #e8b23c); clip-path: polygon(12px 0, 100% 0, calc(100% - 10px) 50%, 100% 100%, 12px 100%, 0 50%); }
.news p { margin-top: 14px; font: 500 15px/23px var(--f-texto); color: #e8e1d4; max-width: 330px; }
.news div { display: flex; gap: 10px; margin-top: 16px; }
.news input { flex: 1; min-width: 0; height: 45px; border: 0; border-radius: 4px; padding: 0 14px; background: #f3f0ea; color: #222; }
.news button { height: 45px; padding: 0 18px; border: 0; border-radius: 4px; background: var(--ouro); color: #2a1604; font: 700 19px/1 var(--f-cond); text-transform: uppercase; cursor: pointer; }
.barra { background: #1c1109 url(../img/tabuas.webp) center/cover; }
.barra__linha { height: 77px; display: flex; align-items: center; justify-content: space-between; }
.barra p { display: flex; align-items: center; gap: 20px; font: 600 16px/1 var(--f-cond); text-transform: uppercase; letter-spacing: .14em; color: #e6dccb; }
.barra p svg { width: 22px; height: 22px; color: var(--ouro); }
.barra i { font-style: normal; color: #a8874d; margin: 0 26px; }
.barra__lema svg { color: #c9a24a !important; width: 26px !important; }
.barra__lema .lema__fio { width: 270px; margin: 0 6px 0 0; }

/* ================= GAVETA (menu) ================= */
.busca-mob { display: none; }
body.travado { overflow: hidden; }
.gaveta-fundo { position: fixed; inset: 0; z-index: 60; background: #000a; }
.gaveta { position: fixed; z-index: 61; inset: 0 auto 0 0; width: min(360px, 88vw); overflow-y: auto; padding: 22px 22px 30px;
  background: #0d0906 url(../img/madeira-escura.webp) center/cover; border-right: 2px solid #7c6440; box-shadow: 8px 0 24px #000c;
  display: flex; flex-direction: column; gap: 4px; }
.gaveta[hidden], .gaveta-fundo[hidden] { display: none; }
.gaveta__fechar { align-self: flex-end; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #ffffff14; color: var(--creme); font-size: 20px; cursor: pointer; }
.gaveta .busca { width: 100%; margin: 6px 0 14px; }
.gaveta > a { display: flex; align-items: center; gap: 16px; padding: 12px 8px; border-bottom: 1px solid #ffffff12; font: 700 22px/1 var(--f-cond); text-transform: uppercase; color: #ece6d9; }
.gaveta > a svg { width: 24px; height: 24px; color: #e3b44f; }
.gaveta > a:hover { color: var(--ouro); }
.gaveta .redes { margin-top: 20px; justify-content: center; }

/* ================= TELAS MENORES ================= */
/* até 1400 px: o cabeçalho encolhe um pouco */
@media (max-width: 1400px) {
  .logo { left: 70px; width: 300px; }
  .topo__dir { width: auto; flex: 1; margin-left: 400px; }
  .nav a { font-size: 19px; }
  .ultimas { width: 360px; }
  .hero__foto { right: 360px; }
}
/* até 1180 px: as editorias do topo passam para a gaveta; manchete e colunas se empilham */
@media (max-width: 1180px) {
  .topo__linha { height: 190px; }
  .logo { left: 50%; translate: -50% 0; width: 240px; top: 8px; }
  .topo__dir { margin-left: 0; }
  .topo__acoes { border: 0; height: 90px; }
  .nav { display: none; }
  .hero { height: auto; flex-direction: column; }
  /* tela estreita: a foto INTEIRA em cima, na largura toda, e a manchete embaixo */
  .hero__foto { position: relative; inset: auto; width: 100%; }
  .hero__foto::before { display: none; }
  .hero__foto img { position: relative; inset: auto; width: 100%; height: auto; max-height: 70vh; object-fit: contain; background: #000; }
  .hero__foto::after { background: linear-gradient(0deg, #000 0%, #0000 28%); }
  .hero__texto { width: 100%; padding: 50px 40px 50px; }
  .ultimas { width: auto; margin: 0; border-left: 0; border-top: 3px solid #241a10; padding: 26px 40px 30px; box-shadow: none; }
  .editorias__grade { grid-template-columns: repeat(5, 230px); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .editoria { scroll-snap-align: start; }
  .papel__grade { grid-template-columns: 1fr; }
  .destaque { height: 520px; }
  .faixa__logo { display: none; }
  .faixa__texto { margin-left: 120px; }
  .rodape__grade { grid-template-columns: 1fr 1fr; height: auto; gap: 30px; padding: 30px 0; }
  .rodape__logo { justify-self: center; }
  .rodape__sobre { border: 0; padding: 0; margin: 0; }
  .rodape__redes { border: 0; align-items: center; padding: 0; }
  .rodape__redes p { padding: 0; }
  .news { margin: 0; }
}
/* tablet (701 a 960 px): a busca vira a lupa, como no celular, para não encostar no logo; o lema cabe numa linha */
@media (max-width: 960px) {
  .topo__acoes { display: none; }
  .busca-mob { display: grid; place-items: center; position: absolute; right: 0; top: 70px; width: 44px; height: 44px; color: #edd18a; }
  .busca-mob svg { width: 30px; height: 30px; }
  .lema p { font-size: 16px; letter-spacing: .24em; white-space: nowrap; }
  .barra__linha { height: auto; padding: 16px 0; flex-direction: column; gap: 12px; }
}
/* a manchete usa caixa larga comprimida (.estreita): a sobra invisível não pode virar rolagem para o lado */
html, body { overflow-x: clip; }
/* celular */
@media (max-width: 700px) {
  body { font-size: 15px; }
  .wrap { width: calc(100% - 32px); }
  .topo__linha { height: 112px; }
  .menu { top: 39px; width: 34px; height: 27px; }
  .menu svg { width: 34px; height: 27px; }
  .logo { width: 150px; top: 6px; }
  .topo__acoes { display: none; }
  .busca-mob { display: grid; place-items: center; position: absolute; right: 0; top: 34px; width: 40px; height: 40px; color: #edd18a; }
  .busca-mob svg { width: 28px; height: 28px; }
  .lema { height: 44px; gap: 10px; }
  .lema p { font-size: 13px; letter-spacing: .2em; }
  .lema__fio { display: none; }
  .lema__chapeu { width: 24px; height: 15px; }
  .hero__texto { padding: 32px 16px 34px; }
  .fita { height: 40px; padding: 0 26px 0 56px; font-size: 21px; margin-left: -4px; }
  .fita__selo { left: 18px; width: 22px; height: 22px; }
  .fita__selo svg { width: 22px; height: 22px; }
  .hero__titulo .l1 { font-size: 68px; }
  .hero__titulo .l2 { font-size: 50px; margin-top: 6px; }
  .meta { gap: 14px; }
  .meta span + span { padding-left: 14px; }
  .hero__linha-fina { width: auto; margin-top: 18px; font-size: 19px; line-height: 27px; }
  .botao { margin-top: 24px; height: 48px; padding: 0 24px; font-size: 20px; }
  .hero .meta { margin-top: 24px; }
  .meta--clara { font-size: 15px; }
  .ultimas { padding: 22px 16px 26px; }
  .tabua { font-size: 28px; height: 50px; }
  .ultimas li { padding-left: 8px; }
  .ultimas li a { font-size: 18px; line-height: 25px; }
  .ver-todas { margin-left: 8px; font-size: 19px; }
  .editorias { padding: 18px 0; }
  .editorias__grade { grid-template-columns: repeat(5, 200px); gap: 12px; }
  .editoria { height: 290px; padding: 0 0 18px 20px; }
  .editoria img { height: 190px; }
  .editoria > svg { width: 34px; height: 34px; margin-bottom: 10px; }
  .editoria b { font-size: 30px; }
  .papel { padding: 18px 0; }
  .papel__grade { gap: 22px; }
  .destaque { height: 460px; }
  .destaque__texto { padding: 0 16px 20px; }
  .fita--peq { height: 32px; font-size: 18px; padding: 0 16px 0 44px; }
  .destaque h2 { --c: .83; width: calc(100% / var(--c)); font-size: 38px; line-height: 39px; }
  .destaque__texto > p { font-size: 17px; line-height: 25px; }
  .destaque__pe { flex-wrap: wrap; gap: 14px; }
  .item { gap: 14px; }
  .item img { width: 120px; height: 110px; }
  .item > div { padding-top: 2px; }
  .selo { height: 22px; font-size: 14px; }
  .item h3 { max-width: none; font-size: 20px; line-height: 23px; }
  .item .meta { font-size: 13px; gap: 12px; }
  .item .meta span + span { padding-left: 12px; }
  .faixa { height: 120px; }
  .faixa__vaqueiro { left: 8px; top: 18px; height: 98px; }
  .faixa__texto { width: auto; margin-left: 90px; font-size: 26px; }
  .faixa__l2 { font-size: 32px; }
  .rodape__grade { grid-template-columns: 1fr; text-align: center; }
  .rodape__logo { width: 180px; }
  .rodape__sobre { justify-content: center; }
  .rodape__redes h2 { align-self: center; }
  .barra__linha { height: auto; padding: 16px 0; flex-direction: column; gap: 12px; }
  .barra p { font-size: 13px; gap: 10px; letter-spacing: .1em; }
  .barra i { margin: 0 6px; }
  .barra__lema .lema__fio { display: none; }
}

/* ================= TEMA WORDPRESS: peças que a arte não mostra ================= */
.isca { position: absolute; left: -9999px; width: 1px; height: 1px; }
.news__aviso { margin-top: 10px !important; font-size: 14px !important; color: var(--ouro) !important; }
.gaveta__extra { display: contents; }
.gaveta__extra a { display: block; padding: 12px 8px; border-bottom: 1px solid #ffffff12; font: 600 19px/1 var(--f-cond); text-transform: uppercase; color: #d8d0c0; }
.redes:empty, .rodape__redes ul:empty { display: none; }

/* manchete: letra menor quando o título é longo (a arte tem 3 palavras; notícia real costuma ter 10) */
.hero__titulo.tam-m .l1 { font-size: 96px; }
.hero__titulo.tam-m .l2 { font-size: 82px; }
.hero__titulo.tam-p .l1 { font-size: 72px; line-height: .95; }
.hero__titulo.tam-p .l2 { font-size: 66px; line-height: .95; }
.hero__titulo a:hover .l1 { color: #fff; text-decoration: underline 3px; text-underline-offset: 8px; }


/* título de seção com tábua (Mais notícias, listagens) */
.titulo-secao { display: flex; align-items: center; gap: 16px; margin: 0 0 22px; font: 800 40px/1 var(--f-slab); text-transform: uppercase; color: #f6ead2; overflow: hidden; }
.titulo-secao svg { width: 34px; height: 34px; color: var(--ouro); flex: none; }
.titulo-secao .estreita { --c: .7; flex: none; width: auto; white-space: nowrap; }
.titulo-secao--escuro { color: #22150a; }
.titulo-secao--escuro svg { color: #8a5c12; }

/* Mais notícias (fundo de tábuas, cartões escuros) */
.mais { background: #2a150a url(../img/tabuas.webp) center/cover; padding: 40px 0 44px; box-shadow: inset 0 8px 10px #000a; }
.grade-cartoes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.cartao { display: flex; flex-direction: column; background: #0d0a08; border: 1.5px solid #6e5838; border-radius: 4px; overflow: hidden; box-shadow: 0 4px 10px #0009; }
.cartao__foto { display: block; aspect-ratio: 16 / 11; overflow: hidden; background: #1a120b; }
.cartao__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.cartao:hover .cartao__foto img { transform: scale(1.04); }
.cartao__texto { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; flex: 1; }
.cartao .selo { align-self: flex-start; }
.cartao h3 { font: 700 22px/1.18 'Roboto Condensed', var(--f-cond); color: #f3ebdc; }
.cartao h3 a:hover { color: var(--ouro); }
.cartao .meta { margin-top: auto; color: #b9b0a2; font-size: 14px; }
.cartao .meta span + span { border-color: #fff2; }
.cartao .meta svg { color: #c9a24a; }
.mais__rodape { text-align: center; margin-top: 30px; }
.mais__rodape .botao { margin: 0; }
.botao.carregando { opacity: .6; pointer-events: none; }

/* listagens em papel (categoria, busca, autor) */
.subcategorias { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 22px; }
.subcategorias .selo { height: 32px; font-size: 18px; padding: 0 16px 0 12px; }
.papel--lista { padding: 34px 0 50px; min-height: 60vh; }
.grade-cartoes--papel .cartao { background: #fffaf1; border-color: #d9c4a0; box-shadow: 0 3px 8px #0002; }
.grade-cartoes--papel .cartao h3 { color: #1b130c; }
.grade-cartoes--papel .cartao h3 a:hover { color: #8a5c12; }
.grade-cartoes--papel .cartao .meta { color: #5a4c3e; }
.grade-cartoes--papel .cartao .meta span + span { border-color: #0002; }
.descricao { margin: -8px 0 22px; max-width: 760px; font-size: 18px; color: #3a2f24; }
.vazio { font-size: 20px; color: #3a2f24; margin-bottom: 20px; }
.paginacao { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 34px; }
.paginacao .page-numbers { min-width: 44px; height: 44px; padding: 0 14px; display: inline-grid; place-items: center; border-radius: 6px; background: #22170e; color: #efc355; font: 700 19px/1 var(--f-cond); }
.paginacao .current { background: var(--ouro); color: #2a1604; }
.rodape__links ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; padding: 0 0 18px; }
.rodape__links a { font: 600 15px/1 var(--f-cond); text-transform: uppercase; letter-spacing: .08em; color: #cfc6b4; }
.rodape__links a:hover { color: var(--ouro); }

@media (max-width: 1180px) { .grade-cartoes { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .grade-cartoes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) {
  .hero__titulo.tam-m .l1, .hero__titulo.tam-p .l1 { font-size: 44px; }
  .hero__titulo.tam-m .l2, .hero__titulo.tam-p .l2 { font-size: 40px; }
  .grade-cartoes { grid-template-columns: 1fr; gap: 14px; }
  .cartao { flex-direction: row; }
  .cartao__foto { width: 130px; flex: none; aspect-ratio: auto; }
  .cartao__texto { padding: 10px 12px; gap: 6px; }
  .cartao h3 { font-size: 18px; }
  .titulo-secao { font-size: 30px; }
  .mais { padding: 26px 0 30px; }
}

/* manchete de verdade é longa: no máximo 3 linhas nas listas e cartões (o título inteiro fica no link e no Google) */
.item h3 a, .cartao h3 a { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }

/* ================= MATÉRIA ================= */
.progresso { position: fixed; inset: 0 0 auto; height: 4px; z-index: 60; pointer-events: none; }
.progresso i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #c98a1c, var(--ouro)); transform: scaleX(0); transform-origin: left; }
.papel--materia { padding: 30px 0 50px; }
.materia__grade { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: start; }
.materia { min-width: 0; }
.materia--pagina { max-width: 860px; margin-inline: auto; }
.trilha ol { display: flex; flex-wrap: wrap; gap: 4px 0; margin-bottom: 18px; font: 600 15px/1.3 var(--f-cond); text-transform: uppercase; letter-spacing: .04em; color: #6b5a45; }
.trilha li + li::before { content: '›'; margin: 0 9px; color: #a8874d; }
.trilha a { color: #8a5c12; }
.trilha a:hover { text-decoration: underline; }
.materia .selo { margin-bottom: 16px; }
.materia__titulo { font: 800 50px/1.08 var(--f-slab); letter-spacing: -.015em; color: #1b130c; text-wrap: balance; }
.materia__titulo em { font-style: normal; color: #a86f0e; }
.materia__linha-fina { margin-top: 16px; font: 500 22px/1.42 var(--f-texto); color: #4a3d2f; }
.materia__info { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin: 24px 0 22px; padding: 16px 0; border-block: 1px solid #0000001f; }
.materia__info .meta { flex-wrap: wrap; row-gap: 10px; }
.materia__atualizada { flex-basis: 100%; order: 3; margin-top: -6px; font-size: 14px; color: #6b5a45; }
.compartilhar { display: flex; align-items: center; gap: 8px; }
.compartilhar > span { margin-right: 4px; font: 700 15px/1 var(--f-cond); text-transform: uppercase; letter-spacing: .06em; color: #5a4c3e; }
.compartilhar a, .compartilhar button { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #22170e; color: #efc355; cursor: pointer; transition: transform .15s, background .15s; }
.compartilhar svg { width: 19px; height: 19px; }
.compartilhar a:hover, .compartilhar button:hover { transform: translateY(-2px); background: #3b2814; }
.compartilhar .compartilhar--whatsapp { background: #1f8f4c; color: #fff; }
.compartilhar--copiar.copiado { background: var(--ouro); color: #2a1604; }
.materia__foto { margin: 0 0 28px; }
.materia__foto img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; box-shadow: 0 6px 18px #0004; }
.materia__foto figcaption { margin-top: 8px; font-size: 14px; color: #6b5a45; }
.materia__texto { font: 400 20px/1.7 var(--f-texto); color: #241a12; overflow-wrap: anywhere; }
.materia__texto > * + * { margin-top: 1.1em; }
.materia__texto h2, .materia__texto h3 { font: 800 30px/1.2 var(--f-slab); color: #1b130c; margin-top: 1.5em; }
.materia__texto h3 { font-size: 24px; }
.materia__texto a { color: #8a5c12; text-decoration: underline; text-underline-offset: 3px; }
.materia__texto strong { color: #120c07; }
.materia__texto ul, .materia__texto ol { padding-left: 1.3em; list-style: revert; }
.materia__texto blockquote { margin-inline: 0; padding: 6px 0 6px 22px; border-left: 4px solid var(--ouro-esc); font: 600 23px/1.5 var(--f-texto); color: #3a2c1c; }
.materia__texto img { height: auto; border-radius: 4px; }
.materia__texto figure { margin-inline: 0; }
.materia__texto iframe { max-width: 100%; }
.materia__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.materia__tags a { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 1.5px solid #c9b08a; border-radius: 18px; font: 600 16px/1 var(--f-cond); text-transform: uppercase; color: #4a3826; }
.materia__tags svg { width: 14px; height: 14px; color: #a8874d; }
.materia__tags a:hover { background: #22170e; border-color: #22170e; color: #efc355; }
.materia__fim { display: flex; justify-content: center; margin-top: 28px; padding-top: 22px; border-top: 1px solid #0000001f; }
.chamada-zap { display: flex; align-items: center; gap: 18px; margin-top: 26px; padding: 18px 22px; border-radius: 8px; background: #11633a; color: #fff; box-shadow: 0 4px 12px #0003; }
.chamada-zap svg { width: 42px; height: 42px; }
.chamada-zap b { display: block; font: 800 22px/1.2 var(--f-slab); }
.chamada-zap span { font-size: 16px; }
.chamada-zap:hover { background: #0d5531; }
.materia__lado { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 22px; }
.ultimas--lado { width: auto; margin: 0; padding: 22px 20px 10px; border: 0; border-radius: 6px; box-shadow: 0 6px 16px #0005; }
.ultimas--lado .tabua { font-size: 32px; height: 52px; margin-left: 0; }
.ultimas--lado li { padding-left: 6px; }
.ultimas--lado li a { font-size: 18px; line-height: 24px; }

.mais-lidas li { display: flex; gap: 12px; align-items: baseline; }
.mais-lidas__n { flex: none; font: 800 26px/1 var(--f-slab); color: var(--ouro); min-width: 22px; }
.mais-lidas li a { margin-top: 0; }

/* formulário de contato (plugin) */
.xr-contato { margin-top: 30px; padding: 22px; border-radius: 8px; background: #fffaf1; border: 1.5px solid #d9c4a0; }
.xr-contato p { margin-top: 12px; }
.xr-contato label { display: block; margin-bottom: 4px; font: 700 16px/1.2 var(--f-cond); text-transform: uppercase; color: #4a3826; }
.xr-contato label small { font: 400 13px/1.3 var(--f-texto); text-transform: none; color: #6b5a45; }
.xr-contato input[type=text], .xr-contato input[type=email], .xr-contato input[type=tel], .xr-contato select, .xr-contato textarea { width: 100%; padding: 12px 14px; border: 1.5px solid #c9b08a; border-radius: 6px; background: #fff; color: #1b130c; font: 17px/1.4 var(--f-texto); }
.xr-contato input:focus, .xr-contato select:focus, .xr-contato textarea:focus { outline: 2px solid var(--ouro-esc); border-color: transparent; }
.xr-contato__lgpd label { display: flex; gap: 8px; align-items: flex-start; font: 400 15px/1.4 var(--f-texto); text-transform: none; }
.xr-contato__lgpd input { margin-top: 3px; }
.xr-contato__lgpd a { color: #8a5c12; text-decoration: underline; }
.xr-contato .botao { border: 0; cursor: pointer; }
.xr-contato__ok, .xr-contato__erro { margin: 0 !important; padding: 12px 14px; border-radius: 6px; font-size: 17px; }
.xr-contato__ok { background: #dff3e4; color: #0d4d24; }
.xr-contato__erro { background: #fde4e1; color: #7d1b10; margin-bottom: 8px !important; }

/* comentários */
.comentarios { margin-top: 40px; padding-top: 28px; border-top: 3px solid #22170e; }
.comentarios__titulo { display: flex; align-items: center; gap: 12px; font: 800 30px/1 var(--f-slab); color: #1b130c; }
.comentarios__titulo svg { width: 28px; height: 28px; color: #8a5c12; }
.comentarios__lista { margin-top: 22px; }
.comentarios__lista li { padding: 16px 0; border-bottom: 1px solid #0000001a; }
.comentarios__lista .children { margin-left: 28px; }
.comentarios__lista .comment-author { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.comentarios__lista .avatar { border-radius: 50%; }
.comentarios__lista .says { display: none; }
.comentarios__lista .comment-metadata { font-size: 13px; color: #6b5a45; margin: 4px 0 8px; }
.comment-respond { margin-top: 26px; }
.comment-reply-title { font: 800 24px/1.2 var(--f-slab); color: #1b130c; }
.comentarios__nota { margin: 8px 0 14px; font-size: 15px; color: #5a4c3e; }
.comment-form p { margin-top: 12px; }
.comment-form label { display: block; margin-bottom: 4px; font: 700 16px/1 var(--f-cond); text-transform: uppercase; color: #4a3826; }
.comment-form input[type=text], .comment-form input[type=email], .comment-form input[type=url], .comment-form textarea { width: 100%; padding: 12px 14px; border: 1.5px solid #c9b08a; border-radius: 6px; background: #fffaf1; color: #1b130c; font: inherit; }
.comment-form input:focus, .comment-form textarea:focus { outline: 2px solid var(--ouro-esc); border-color: transparent; }
.comment-form .comment-form-cookies-consent { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; }
.comment-form .comment-form-cookies-consent label { font: inherit; text-transform: none; }
.comment-form .botao { border: 0; cursor: pointer; }

/* 404 */
.nao-achou { max-width: 720px; text-align: center; padding: 40px 0 20px; }
.nao-achou__estrela { width: 90px; height: 90px; margin: 0 auto 16px; color: #a86f0e; }
.nao-achou h1 { font: 800 46px/1.1 var(--f-slab); color: #1b130c; }
.nao-achou p { margin: 16px 0 20px; font-size: 20px; color: #3a2f24; }
.nao-achou form { max-width: 460px; margin: 0 auto; }

@media (max-width: 1180px) { .materia__grade { grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; } }
@media (max-width: 900px) {
  .materia__grade { grid-template-columns: 1fr; }
  .materia__lado { position: static; }
}
@media (max-width: 700px) {
  .papel--materia { padding: 18px 0 30px; }
  .materia__titulo { font-size: 31px; }
  .materia__linha-fina { font-size: 18px; }
  .materia__texto { font-size: 18px; }
  .materia__texto h2 { font-size: 24px; }
  .materia__info { margin: 18px 0; }
  .materia__info .meta { font-size: 14px; }
  .compartilhar a, .compartilhar button { width: 38px; height: 38px; }
  .chamada-zap b { font-size: 18px; }
  .nao-achou h1 { font-size: 32px; }
}