/* ───────────────────────────────────────────────────────────────────────
   Vitrine 2 — a gramatica visual da Agencia Brasil aplicada ao portal.
   O que foi copiado de la': fundo branco, foto retangular sem canto
   arredondado, chapeu de editoria em pastilha, barra escura com risco
   colorido separando as secoes, grade de quatro colunas, lista de ultimas
   com miniatura a esquerda. O que NAO foi copiado: a faixa da logo, que
   la' e' azul-marinho. A marca do Portal Pacatuba tem azul no proprio
   desenho e sumiria no marinho — por isso a faixa da logo ficou branca e
   so' a barra das editorias e' escura.
   ─────────────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:#15161A;
  font-family:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;letter-spacing:-.008em;text-wrap:pretty}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5{margin:0;font-weight:700;letter-spacing:-.018em}
p{margin:0}
img{max-width:100%;display:block}
.env{max-width:1240px;margin:0 auto;padding:0 26px}
.serif{font-family:inherit;letter-spacing:-.008em}
.sup{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}
/* o desenho novo e' plano: nada de sombra. A classe fica porque muitas
   paginas ainda a citam — apagar o efeito aqui vale por todas elas. */
.sombra{box-shadow:none}
.meta{font-size:12.5px;color:#6A6D75;letter-spacing:0}

/* pastilha de editoria — o chapeu */
.pill{display:inline-block;background:#C8DB2E;color:#0C2454;font-size:11.5px;font-weight:700;
  letter-spacing:.02em;padding:4px 9px;border-radius:3px;align-self:flex-start;white-space:nowrap}
.pill.cinza{background:#EDEFF2;color:#3A3D45}

/* ─────────────────────────────────────────────────────────── cabecalho */
nav.topo{position:sticky;top:0;z-index:30;background:#fff}
nav.topo .alto{border-bottom:1px solid #E4E6EA;background:#fff}
nav.topo .alto .env{display:flex;align-items:center;justify-content:space-between;
  height:70px;gap:20px}
nav.topo .marca{display:flex;align-items:center}
.logo{height:38px;width:auto;flex:0 0 auto;align-self:flex-start;
  object-fit:contain;image-rendering:-webkit-optimize-contrast}
nav.topo .dir{display:flex;align-items:center;gap:8px}
nav.topo .dir .lupa{width:38px;height:38px;display:grid;place-items:center;border-radius:4px;
  transition:background .15s}
nav.topo .dir .lupa:hover{background:#EDEFF2}
nav.topo .dir .news{font-size:13px;font-weight:700;color:#0C2454;background:#C8DB2E;
  padding:10px 18px;border-radius:4px;letter-spacing:.01em;transition:filter .15s}
nav.topo .dir .news:hover{filter:brightness(.94)}
nav.topo .faixa{background:#0C2454}
nav.topo .eds{display:flex;align-items:stretch;height:44px;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none}
nav.topo .eds::-webkit-scrollbar{display:none}
nav.topo .eds a{display:flex;align-items:center;white-space:nowrap;color:#fff;
  font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:0 15px;border-bottom:3px solid transparent;transition:color .15s}
nav.topo .eds a:hover{color:#C8DB2E}
nav.topo .eds a.on{color:#C8DB2E;border-bottom-color:#C8DB2E}
nav.topo .eds a.ult{color:#C8DB2E}
nav.topo .eds i{width:1px;height:17px;background:rgba(255,255,255,.28);flex:0 0 auto;
  align-self:center;margin:0 5px}
.abrir{display:none;width:40px;height:40px;align-items:center;justify-content:center;border-radius:4px}

/* barra fina de servico logo abaixo do menu */
.plantao{display:flex;align-items:center;justify-content:center;gap:11px;background:#F4F5F7;
  border-bottom:1px solid #E4E6EA;min-height:40px;padding:9px 20px;color:#3A3D45;
  font-size:13px;font-weight:500;text-align:center}
.plantao b{width:7px;height:7px;border-radius:50%;background:#D61F1F;flex:0 0 auto}
.plantao.urgente{background:#0C2454;color:#fff;border-bottom-color:#0C2454}

/* ─────────────────────────────────────────────────────────── manchete */
.manchete{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;
  padding-top:30px;align-items:start}
.foto{position:relative;background:#E7E9ED;overflow:hidden}
/* lugar da foto que nao existe. Listra diagonal discreta + a marca em cinza:
   le-se como "sem foto", nao como imagem quebrada. */
.semfoto{display:grid;place-items:center;width:100%;height:100%;min-height:100%;
  background:repeating-linear-gradient(-45deg,#EDEFF2,#EDEFF2 9px,#E7E9ED 9px,#E7E9ED 18px)}
.semfoto>span{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#A9ACB4;text-align:center;padding:0 10px;line-height:1.3}
.capa.semfoto{aspect-ratio:16/10}
.mchfoto .semfoto{aspect-ratio:4/3}
.foto img{width:100%;height:100%;object-fit:cover;display:block}
.mchfoto .foto{aspect-ratio:4/3;border-bottom:5px solid #C8DB2E}
.mchtxt{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.mchfoto{display:block}
.mch{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.dupla{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:30px;align-items:start}
.mch h1{font-size:38px;line-height:1.1;letter-spacing:-.022em}
.mch:hover h1{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.mch .olho{font-size:17px;line-height:1.5;color:#5A5D66}
/* credito da foto, sobre a imagem, como no modelo */
.credito-foto{position:absolute;right:0;bottom:0;z-index:2;font-size:10px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:#fff;background:rgba(12,36,84,.72);
  padding:5px 10px;max-width:80%;text-align:right;line-height:1.3}
/* selo de foto que NAO e' da cidade — a honestidade vem antes da estetica */
.selo{position:absolute;left:0;top:0;z-index:2;font-size:10px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:#fff;background:rgba(12,36,84,.88);padding:5px 10px}

/* caixa da newsletter — painel marinho, alinhado a esquerda como o resto */
.news-caixa{background:#0C2454;color:#fff;padding:38px 36px;display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:34px;align-items:center}
.news-caixa h2{font-size:27px;line-height:1.16;margin:10px 0 10px;max-width:20ch}
.news-caixa p{font-size:15px;line-height:1.55;color:rgba(255,255,255,.78);max-width:46ch}
.news-caixa form{display:flex;gap:9px;flex-wrap:wrap}
.news-caixa input{flex:1 1 240px;font:inherit;font-size:15px;color:#15161A;background:#fff;
  border:0;border-radius:4px;padding:14px 16px;min-width:0}
.news-caixa button{border:0;cursor:pointer;font-family:inherit}
.news-caixa .aviso{display:block;padding-top:11px;font-size:12px;color:rgba(255,255,255,.6)}
.news-caixa .aviso a{color:#C8DB2E}
.veja{border-top:1px solid #D9DBE0;padding-top:14px;margin-top:4px;
  display:flex;flex-direction:column;gap:9px;width:100%}
.veja .rot{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:700;color:#15161A}
.veja .rot::before{content:"";width:4px;height:15px;background:#C8DB2E;display:block}
.veja a{display:flex;gap:9px;font-size:14.5px;line-height:1.42;color:#2A2D35}
.veja a::before{content:"+";color:#0C2454;font-weight:700;flex:0 0 auto}
.veja a:hover{color:#0C2454;text-decoration:underline;text-underline-offset:3px}

/* ─────────────────────────────────────────────────── barra de secao */
.barra{background:#0C2454;display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:12px 18px;margin-bottom:24px}
.barra h2{color:#fff;font-size:18px;font-weight:700;letter-spacing:-.01em;
  display:flex;align-items:center;gap:11px}
.barra h2::before{content:"";width:5px;height:19px;background:#C8DB2E;display:block;flex:0 0 auto}
.barra a{color:rgba(255,255,255,.82);font-size:13px;font-weight:500;white-space:nowrap}
.barra a b{font-weight:700}
.barra a:hover{color:#C8DB2E}
.barra.clara{background:#F4F5F7}
.barra.clara h2{color:#15161A}
.barra.clara a{color:#5A5D66}

/* cabecalho de secao sem barra (paginas internas) */
.cabsec{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:8px;
  border-top:3px solid #0C2454;padding-top:16px;margin-bottom:24px}
.cabsec h2{font-size:30px;line-height:1.1}

/* ─────────────────────────────────────────────────────────── cartoes */
.cartao{background:transparent;border-radius:0;overflow:visible;display:flex;flex-direction:column}
.capa{aspect-ratio:16/10;background:#E7E9ED;object-fit:cover;width:100%;border-radius:0}
.cartao .txt{padding:13px 0 18px;display:flex;flex-direction:column;gap:9px;
  align-items:flex-start;flex-grow:1;border-bottom:1px solid #D9DBE0}
.cartao h3{font-size:19px;line-height:1.28;letter-spacing:-.014em}
.cartao:hover h3{text-decoration:underline;text-underline-offset:3px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.sec{padding-top:44px}

/* ────────────────────────────────────────── lista de ultimas com foto */
.linha-foto{display:grid;grid-template-columns:186px minmax(0,1fr);gap:20px;align-items:start;
  padding:16px 0;border-top:1px solid #D9DBE0}
.linha-foto:hover h4{text-decoration:underline;text-underline-offset:3px}
.linha-foto .mini{width:186px;height:106px;object-fit:cover;background:#E7E9ED;display:block}
.linha-foto .corpo-linha{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.linha-foto h4{font-size:18px;line-height:1.3;letter-spacing:-.012em}
.linha-foto .quando{font-size:12.5px;color:#6A6D75}

/* lista simples, sem foto (busca, arquivo) */
.linha{display:flex;align-items:baseline;gap:22px;padding:15px 0;border-top:1px solid #D9DBE0}
.linha .h{flex:0 0 52px;font-size:12.5px;font-weight:700;color:#6A6D75}
.linha .h.q{color:#D61F1F}
.linha h4{flex-grow:1;font-size:17.5px;line-height:1.32;font-weight:600;letter-spacing:-.012em}
.linha:hover h4{text-decoration:underline;text-underline-offset:3px}
.linha .ed{flex:0 0 auto;font-size:12.5px;color:#6A6D75}

.botao{display:inline-block;font-size:13.5px;font-weight:700;color:#0C2454;background:#C8DB2E;
  padding:13px 26px;border-radius:4px;letter-spacing:.01em}
.botao.azul{background:#0C2454;color:#fff}
.centro{display:flex;justify-content:center}
.pilula{font-size:13px;font-weight:600;color:#0C2454;background:#EDEFF2;border-radius:4px;padding:9px 14px}

.publi{display:flex;flex-direction:column;align-items:center;gap:10px}
.publi .caixa{background:#F0F1F4;border:1px solid #E4E6EA;width:100%;max-width:970px;height:250px}

/* ─────────────────────────────────────────── capa das paginas internas */
.cap{padding:46px 26px 0;display:flex;flex-direction:column;align-items:flex-start;
  text-align:left;gap:16px}
.cap h1{font-size:44px;line-height:1.08;letter-spacing:-.024em;max-width:22ch}
.cap .olho{font-size:19px;line-height:1.5;color:#5A5D66;max-width:60ch}
.assina{display:flex;align-items:center;gap:11px;font-size:13px;color:#6A6D75;flex-wrap:wrap}
.assina .pt{width:3px;height:3px;border-radius:50%;background:#C5C8CE}
.figura{overflow:hidden;background:#E7E9ED;aspect-ratio:16/9;position:relative;
  border-bottom:5px solid #C8DB2E}
.figura .selo{left:0;top:0}
.legenda{font-size:12.5px;color:#6A6D75;padding-top:12px;max-width:900px}

/* ─────────────────────────────────────────────────── corpo da materia */
/* o corpo alinha pela mesma margem esquerda do resto da pagina; a medida de
   leitura fica no texto, nao no container — assim o titulo, a foto e o
   primeiro paragrafo comecam todos na mesma linha vertical. */
.corpo{max-width:1240px;margin:0 auto;padding:30px 26px 0}
.corpo>*{max-width:740px}
.cx-figura{max-width:900px;padding-top:26px}
.ficha{display:flex;align-items:center;gap:14px;max-width:900px;margin-top:22px;
  padding:16px 0;border-top:1px solid #D9DBE0;border-bottom:1px solid #D9DBE0;flex-wrap:wrap}
.rosto{width:40px;height:40px;border-radius:50%;background:#0C2454;display:grid;
  place-items:center;font-size:13px;font-weight:700;color:#fff;flex:0 0 auto}
.proc{max-width:740px;background:#F4F5F7;border-left:5px solid #C8DB2E;padding:18px 22px;
  display:flex;flex-direction:column;gap:7px}
.proc a{color:#0C2454;font-weight:600}
.corpo p{font-size:18.5px;line-height:1.68;color:#2A2D35;margin:0 0 24px}
.corpo h2{font-size:27px;line-height:1.16;margin:40px 0 18px}
.corpo h3{font-size:22px;line-height:1.22;margin:32px 0 14px}
.corpo a{color:#0C2454;border-bottom:1px solid #A9B7D0}
.corpo img{margin:30px 0}
.corpo blockquote{margin:36px 0;padding-left:22px;border-left:5px solid #C8DB2E;
  font-size:22px;line-height:1.4;font-weight:600;color:#15161A}
.corpo ul,.corpo ol{font-size:18.5px;line-height:1.68;color:#2A2D35;margin:0 0 24px;padding-left:24px}
.corpo li{margin-bottom:9px}

/* ────────────────────────────────────────────────────── regua do dia */
.escuro{background:#0C2454;color:#fff}
.escuro h2{color:#fff}
.escuro .cabsec{border-top-color:#C8DB2E}
.regua{position:relative;height:132px;margin-bottom:8px}
.regua .eixo{position:absolute;left:0;right:0;bottom:38px;height:1px;background:rgba(255,255,255,.22)}
.regua .pt{position:absolute;width:11px;height:11px;border-radius:50%}
.regua .horas{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;
  font-size:12px;font-weight:600;color:rgba(255,255,255,.6)}
.legenda-cores{display:flex;align-items:center;justify-content:center;gap:30px;
  font-size:13px;font-weight:500;color:rgba(255,255,255,.72);flex-wrap:wrap}
.legenda-cores span{display:flex;align-items:center;gap:8px}
.legenda-cores i{width:9px;height:9px;border-radius:50%;display:block}

/* ─────────────────────────────────────────────────────────── rodape */
footer{padding-top:56px;background:#fff}
footer .cols{border-top:3px solid #0C2454;padding-top:36px;
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
footer .cols a,footer .cols p{font-size:13.5px;color:#5A5D66;line-height:1.62}
footer .cols a:hover{color:#0C2454;text-decoration:underline;text-underline-offset:3px}
footer .col{display:flex;flex-direction:column;gap:11px}
footer .fim{border-top:1px solid #D9DBE0;margin-top:36px;padding:20px 0 40px;
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:12px;color:#7A7D85}

/* ─────────────────────────────────────────────────────────── busca */
/* Os ajustes do "sem foto" vem depois dos componentes de proposito: e' a
   ordem no arquivo que decide quando a especificidade empata. */
.linha-foto .mini.semfoto{display:grid;place-items:center}
.linha-foto .mini.semfoto>span{font-size:8px;letter-spacing:.08em}
.cartao .capa.semfoto,.mchfoto .semfoto{display:grid;place-items:center}

.busca-campo{max-width:640px;margin:0;position:relative}
.busca-campo input{width:100%;font:inherit;font-size:16px;color:#15161A;background:#fff;
  border:1px solid #C5C8CE;border-radius:4px;padding:15px 22px 15px 48px;outline:none}
.busca-campo input:focus{border-color:#0C2454;box-shadow:0 0 0 3px rgba(12,36,84,.12)}
.busca-campo svg{position:absolute;left:18px;top:50%;transform:translateY(-50%)}
.busca-estado{font-size:13px;color:#6A6D75;padding-top:14px;min-height:20px}
.busca-lista{max-width:1240px;margin:0 auto;padding:0 26px}
.busca-lista .linha:last-child{border-bottom:1px solid #D9DBE0}
.busca-vazio{font-size:17px;color:#6A6D75;padding:48px 0}

@media (max-width:1000px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .manchete{grid-template-columns:1fr;gap:18px;padding-top:16px}
  .mch h1{font-size:30px}
  .dupla{grid-template-columns:1fr;gap:24px}
}
@media (max-width:720px){
  .env,.busca-lista{padding:0 18px}
  nav.topo .alto .env{height:58px}
  .logo{height:30px}
  nav.topo .dir .news{font-size:12px;padding:8px 13px}
  nav.topo .eds{height:40px}
  nav.topo .eds a{font-size:11.5px;padding:0 11px}
  .abrir{display:flex}
  .mch h1{font-size:26px;line-height:1.14}
  .mch .olho{font-size:16px}
  .mchfoto .foto{aspect-ratio:16/10}
  .g3,.g4{grid-template-columns:1fr;gap:0}
  .dupla{grid-template-columns:1fr;gap:18px}
  .cartao .txt{padding:12px 0 16px}
  .barra{padding:11px 14px;margin-bottom:16px}
  .barra h2{font-size:16px}
  .cabsec{margin-bottom:18px;padding-top:13px}
  .cabsec h2{font-size:24px}
  .sec{padding-top:32px}
  .news-caixa{grid-template-columns:1fr;gap:20px;padding:26px 20px}
  .news-caixa h2{font-size:22px}
  .linha-foto{grid-template-columns:118px minmax(0,1fr);gap:14px;padding:14px 0}
  .linha-foto .mini{width:118px;height:74px}
  .linha-foto h4{font-size:16px}
  .figura{aspect-ratio:4/3}
  .cap{padding:26px 18px 0;gap:12px}
  .cap h1{font-size:28px;line-height:1.14}
  .cap .olho{font-size:16.5px}
  .corpo{padding:26px 18px 0}
  .corpo p,.corpo ul,.corpo ol{font-size:17.5px;line-height:1.66}
  .corpo h2{font-size:23px;margin:32px 0 15px}
  .corpo blockquote{font-size:19px;margin:28px 0}
  .linha{gap:14px;flex-wrap:wrap}
  .linha .ed{display:none}
  .linha h4{font-size:16.5px;flex:1 1 100%;order:2}
  .linha .h{order:1}
  footer .cols{grid-template-columns:1fr 1fr;gap:24px}
  .publi .caixa{height:250px;max-width:100%}
}