/* Cookie consent banner — LGPD. Era uma tira de borda a borda; virou um cartao glass
     no canto inferior ESQUERDO, com no maximo metade da pagina de largura (pedido do
     Jose, 14/08: "mais disfarcada"). Pode ser discreto porque a base legal e legitimo
     interesse (D043): isto e um aviso com saida, nao uma porteira de consentimento. */
  .cookie-banner{position:fixed;left:14px;right:auto;bottom:14px;z-index:9999;max-width:min(50%,540px);background:rgba(37,45,92,.55);-webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px);border:1px solid rgba(255,255,255,.18);border-radius:16px;box-shadow:0 10px 30px rgba(10,27,61,.25);color:#dbe2f7;padding:10px 12px 10px 16px;display:flex;align-items:center;gap:14px;font-size:12px;line-height:1.45;font-family:'Inter',sans-serif}
  .cookie-banner[hidden]{display:none}
  .cookie-banner .cookie-text{flex:1;min-width:0}
  .cookie-banner .cookie-text a{color:var(--mint,#A4D3BC);text-decoration:underline;text-underline-offset:2px}
  .cookie-banner .cookie-actions{display:flex;gap:8px;flex-shrink:0}
  .cookie-banner .cookie-btn{border-radius:999px;font-size:12px;font-weight:700;cursor:pointer;border:1px solid;font-family:inherit;letter-spacing:.02em;line-height:1.4}
  /* Desenho de portal (D046): o banner e um aviso com um botao so. A recusa e um botao
     de verdade dentro de /privacidade, pra onde o "Saber mais" aponta. O botao tambem
     ficou glass: no cartao translucido, o pill mint solido era o que mais gritava. */
  .cookie-banner .cookie-accept{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.32);color:#fff;padding:10px 20px;min-height:40px}
  .cookie-banner .cookie-accept:hover{background:var(--mint,#A4D3BC);border-color:var(--mint,#A4D3BC);color:var(--navy,#252D5C)}
  /* A recusa (v3, so aparece com AdSense ligado) e o botao secundario: mesma altura e
     mesmo raio do aceite, sem preenchimento. Sem esta regra ela herda o botao cru do
     sistema — cinza, quadrado, sem respiro — e vira o elemento mais gritante do cartao,
     que e o oposto do que o desenho quer dizer. */
  .cookie-banner .cookie-recusar{background:transparent;border-color:rgba(255,255,255,.32);color:#fff;padding:10px 18px;min-height:40px}
  .cookie-banner .cookie-recusar:hover{background:rgba(255,255,255,.14)}
  /* O "Saber mais" partia em duas linhas na variante de anuncio, deixando "mais." sozinho
     — viuva, regra da casa. O seletor pende de [data-txt-ads], que so existe com o AdSense
     ligado: assim o texto do aviso de hoje nao muda um byte. NBSP no dicionario resolveria
     igual, mas a chave e COMPARTILHADA com o aviso da D043 e mexeria nas 165 paginas. */
  .cookie-banner[data-txt-ads] .cookie-text a{white-space:nowrap}
  .consent-toggle{margin:18px 0;padding:16px 18px;background:#F5F3FB;border:1px solid #E2DEF2;border-radius:12px}
  .consent-toggle p{margin:0 0 10px;font-size:14px;color:#3A3560}
  .consent-toggle button{background:var(--navy,#252D5C);color:#fff;border:none;border-radius:999px;padding:12px 22px;min-height:44px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}
  .consent-toggle button:hover{background:#323C74}
  /* Botao fora de uso precisa PARECER fora de uso: sem isto o de anuncios fica navy e
     com cursor de mao enquanto o clique nao faz nada (a medicao esta desligada). */
  .consent-toggle button:disabled{background:#C9C5DC;color:#5B5878;cursor:not-allowed}
  .consent-toggle button:disabled:hover{background:#C9C5DC}
  /* No celular metade da pagina nao cabe (texto viraria coluna de 6 linhas): o cartao
     cresce ate ~340px mas segue flutuando a esquerda, glass, sem tomar a tela. Texto e
     botao na mesma linha, alvo de toque de 38px preservado. */
  @media(max-width:600px){
    .cookie-banner{left:10px;bottom:10px;max-width:min(88%,340px);gap:10px;padding:9px 10px 9px 12px;font-size:11.5px;line-height:1.35;text-align:left;flex-wrap:nowrap;align-items:center}
    .cookie-banner .cookie-text{flex:1 1 auto;min-width:0}
    .cookie-banner .cookie-actions{flex-shrink:0}
    .cookie-banner .cookie-accept{padding:8px 14px;font-size:11.5px;min-height:38px;white-space:nowrap}
    .cookie-banner .cookie-recusar{padding:8px 12px;font-size:11.5px;min-height:38px;white-space:nowrap}
  }
  /* Com DOIS botoes (v3) e tela estreita, texto e botoes na mesma linha espremem a frase
     numa coluna de tres palavras por linha — medido em 390px e pior ainda em 320px. Aqui
     os botoes descem pra baixo do texto e ocupam a largura do cartao. */
  @media(max-width:430px){
    .cookie-banner{flex-wrap:wrap;gap:8px}
    .cookie-banner .cookie-text{flex:1 1 100%}
    .cookie-banner .cookie-actions{flex:1 1 100%;justify-content:flex-end}
  }
  :root{
    /* ── Identidade Bora: FONTE UNICA da paleta (17-handoff-ux-cx.md, secao 2) ──
       Todo par de cor abaixo foi medido e passa WCAG AA. Site e guias usam estes
       mesmos valores; o `_materias-seo/gerar-previews.py` carrega a tabela irma em
       `MUDANCA-ID-VISUAL.md`, que aponta pra ca.

       Regra de manutencao: cor nova entra AQUI, com o contraste medido no comentario.
       Cor crava da no meio do CSS e o proximo que mexer nao acha. */
    /* Marinho da PRANCHA de identidade, e nao do arquivo do Illustrator. O README do
       pacote registrava a divergencia como decisao em aberto: a prancha dizia
       #0A1B3D e o arquivo #252D5C, e o sistema seguiu o arquivo "porque e a arte que
       existe". O Jose decidiu pela prancha em 11/08.

       O motivo tem numero: o navy do MaisCha era #0B1F5C (matiz 225, saturacao 79%) e
       o #252D5C e matiz 231 com saturacao 43% — o MESMO azul, 36 pontos mais lavado.
       Por isso lia como a marca antiga, so que apagado. O #0A1B3D sai dessa faixa.

       Todos os pares MELHORARAM: branco 13,06 -> 16,98; mint 7,85 -> 10,2; dim do
       strip 9,03 -> 11,75. Nenhum caiu. */
    --navy:#0A1B3D;         /* faixa do topo, rodape, aviso de cookie, banda Fronteira Viva */
    --ink:#1B2445;          /* corpo e titulos — 15,2:1 sobre o cinza */
    --suave:#5C6787;        /* timestamp, credito, rotulo de patrocinado — 5,6:1 */
    --teal:#00ABAA;         /* fios, hover, icone de 3px pra cima. NUNCA texto em fundo claro (2,8:1) */
    --teal-tinta:#007A79;   /* link, botao primario, nav ativa, foco — 5,2:1 */
    --mint:#A4D3BC;         /* botao secundario e acento sobre o navy — par mint/navy 7,9:1 */
    --cinza:#F1F3F8;        /* fundo da pagina */
    --fita:linear-gradient(90deg,#A4D3BC,#00ABAA);  /* barra de secao, sublinhado da nav ativa.
                               No Bora Bonito vira #A6D9EF→#17C6F4 */

    /* ── Editorias: a MESMA cor serve de texto no claro e de fundo de selo com branco ── */
    --c-compras:#167A41;         /* era #1F9D55 — 3,5:1 subiu pra 5,4:1 */
    --c-cotidiano:#2A66B8;       /* era #4A90E2 — 3,3:1 subiu pra 5,7:1 */
    --c-gastronomia:#C22A5B;     /* era #E94B7A — 3,7:1 subiu pra 5,6:1 */
    --c-esporte:#B54708;         /* laranja-queimado, 5,4:1 — categoria nova de 01/09 */
    --c-fronteira-viva:#5B2D8A;  /* 9,6:1, so escureceu do #6B3FA0 pra fechar com o navy */

    /* Acento quente dos mockups do Jose (14/08): a palavra em Crimson Pro nos titulos
       especiais e o ponto do fio do manifesto. Medido: 3,63:1 sobre o cinza da pagina e
       4,21:1 sobre o navy — passa AA SO em texto grande (>=24px). NUNCA em texto corrido,
       rotulo pequeno ou fundo de selo. */
    --laranja:#D9531E;

    /* ── Nomes herdados do preview aprovado (D001) ──
       Eles APONTAM pros tokens acima em vez de carregar cor propria. E o que faz a
       paleta ter um lugar so: o CSS antigo continua funcionando sem ter sido reescrito,
       e quem mexer amanha mexe em cima. */
    --azul:var(--teal-tinta);
    --azul-escuro:#005E5D;
    --azul-claro:var(--teal);
    --azul-deep:var(--navy);
    --terra:var(--ink);
    --texto:var(--ink);
    --bg:var(--cinza);
    --grafite:#2E2E2E;
    --linha:#E3E7F0;
    --linha-2:#EDEFF3;
    --bg-card:#FFFFFF;
    --sombra:0 2px 10px rgba(37,45,92,.06);
    --sombra-hover:0 6px 22px rgba(37,45,92,.10);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  html,body{background:var(--bg);color:var(--texto);font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.4}
  a{color:inherit;text-decoration:none}
  img{display:block;max-width:100%}
  .serif,h1,h2,h3,h4{font-family:'Poppins',system-ui,sans-serif;font-weight:700;letter-spacing:-0.03em}
  /* Crimson Pro (D0xx, manual de tipografia e estilo, 13/08/2026): fonte de CONTRASTE, so
     pra uma palavra, expressao ou citacao dentro de titulo institucional, especial ou de
     campanha (ex. /sobre/). PROIBIDA em manchete de noticia, titulo de card e texto
     corrido -- o contraste e pontual, nao um estilo de uso geral. */
  .fonte-contraste{font-family:'Crimson Pro',serif;font-style:italic;font-weight:600}
  /* Icone e <svg> do sprite proprio, nao mais ligadura de fonte (D163). O 1em faz
     toda regra de `font-size` que ja existia continuar dimensionando o icone. */
  .material-icons{display:inline-block;width:1em;height:1em;fill:currentColor;font-size:18px;vertical-align:middle}

  .wrap{max-width:1280px;margin:0 auto;padding:0 20px}

  .preview-bar{background:#000;color:#fff;font-size:12px;padding:6px 20px;text-align:center}
  .preview-bar b{color:#FFD27A}

  .brand-bar{height:8px;background:linear-gradient(90deg,var(--azul-claro) 0%,var(--azul) 55%,var(--azul-escuro) 100%)}

  /* TOPO ticker */
  /* Selo das cidades (17, secao 5b — decisao do Jose). Emoji de bandeira saiu: ele
     renderiza diferente por sistema (no Windows vira "BR PY" em letras) e briga com a
     faixa tipografica. Bandeira e SVG chapado, o MESMO desenho do guia e do mock. */
  .relogio-cidade{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
  .relogio-cidade .bandeirinha{display:block;flex:0 0 auto}
  .relogio-cidade b{color:var(--terra);font-weight:800;letter-spacing:.01em}
  .relogio-cidade .dim{color:var(--grafite);font-weight:500}
  .sep-relogio{color:#CDD6F5;opacity:.5}
  .top-strip{background:var(--bg);border-bottom:1px solid var(--linha);color:var(--grafite);font-size:12px;padding:8px 0;font-weight:500}
  .top-strip .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
  @media(max-width:780px){
    .top-strip{font-size:10.5px;padding:5px 0}
    .top-strip .wrap{justify-content:center;gap:10px;flex-wrap:wrap}
    .ticker{gap:10px;font-size:10.5px;justify-content:center;flex-wrap:wrap}
    .ticker-item{gap:4px}
    .top-date{display:none}
  }
  @media(max-width:480px){
    .city-pill span:not(.flag){display:none}
    .ticker{gap:8px}
    .ticker .ticker-item:nth-child(3){display:none}
  }
  .ticker{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
  .ticker-item{display:flex;gap:6px;align-items:center}
  .ticker-item b{color:var(--terra);font-weight:700}
  .ticker-item .up{color:#0F7A48}
  .ticker-item .dn{color:#C0392B}
  .top-meta{display:flex;gap:10px;align-items:center;font-size:11px;color:#9AA6D4;text-transform:uppercase;letter-spacing:.06em;flex-wrap:wrap}
  .city-pill{display:inline-flex;gap:8px;align-items:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:5px 12px;color:#fff;font-weight:500;text-transform:none;letter-spacing:0;font-size:12px}
  .city-pill .flag{font-size:14px;line-height:1}
  .city-pill b{font-weight:700}
  .city-pill .sep{opacity:.4;margin:0 2px}
  .temp-pill{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--linha);border-radius:999px;padding:5px 11px 5px 8px;color:var(--terra);font-weight:700;font-size:12px;text-decoration:none;transition:all .2s;cursor:pointer}
  .temp-pill:hover{background:var(--bg);color:var(--terra);transform:translateY(-1px)}
  .temp-pill svg{width:18px;height:18px;filter:drop-shadow(0 0 6px rgba(255,200,87,.35))}
  .temp-pill .arrow{opacity:.55;font-size:10px;margin-left:1px}
  .top-date{margin-left:4px;font-size:11px;color:var(--grafite);font-weight:600}
  /* Âncora do clima — espaço pro header sticky */
  #clima{scroll-margin-top:130px}

  /* HEADER em uma linha só: logo + menu + busca + idioma; some no scroll down */
  header.main{background:#fff;border-bottom:1px solid var(--linha);position:sticky;top:0;z-index:30;box-shadow:0 1px 0 rgba(20,30,80,.04);transition:transform .3s ease}
  header.main.is-hidden{transform:translateY(-100%)}
  /* O padding lateral de 20px e o mesmo de todo `.wrap` do site. O `.head` era o
     UNICO sem ele (`padding:14px 0`), entao o cabecalho ficava 20px fora do
     alinhamento do conteudo em qualquer largura, e no celular a logo encostava na
     borda da tela: medido, comecava em 0px. */
  .head{display:flex;align-items:center;gap:24px;padding:14px 20px}
  .logo{display:inline-flex;align-items:center;line-height:1;flex-shrink:0}
  .logo img{height:30px;width:auto;display:block}
  .menu{display:flex;gap:0;font-family:'Poppins',sans-serif;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;overflow-x:auto;flex:1;justify-content:center}
  .menu a{position:relative;padding:14px 18px;color:var(--grafite);white-space:nowrap;border-bottom:3px solid transparent;transition:all .2s}
  .menu a:hover{color:var(--terra)}
  .menu a[data-c="compras"]:hover{color:var(--c-compras);border-color:var(--c-compras)}
  .menu a[data-c="gastronomia"]:hover{color:var(--c-gastronomia);border-color:var(--c-gastronomia)}
  .menu a[data-c="cotidiano"]:hover{color:var(--c-cotidiano);border-color:var(--c-cotidiano)}
  .menu a[data-c="esporte"]:hover{color:var(--c-esporte);border-color:var(--c-esporte)}
  .menu a[data-c="fronteira-viva"]:hover{color:var(--c-fronteira-viva);border-color:var(--c-fronteira-viva)}
  .menu-search{display:flex;align-items:center;flex-shrink:0}
  .menu-search input{background:var(--bg);border:1px solid var(--linha);border-right:none;border-radius:999px 0 0 999px;padding:9px 14px;font-size:13px;width:180px;color:var(--terra);font-family:inherit}
  .menu-search input:focus{outline:none;border-color:var(--azul)}
  .menu-search button{background:var(--azul);border:1px solid var(--azul);color:#fff;width:38px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:0 999px 999px 0;cursor:pointer}
  .menu-search button:hover{background:var(--azul-escuro);border-color:var(--azul-escuro)}
  /* Seletor de idioma (item 9, 13/08). Ganhou globo e virou pilula de contorno visivel.
     A borda era --linha, que da 1,24:1 no branco: contorno de componente pede 3:1, entao
     passou pra --suave (5,61:1). E o alvo de toque tinha 36px de altura contra os 44 que
     o resto do header usa. NAO tem chevron: no site publicado o botao ja e um link direto
     pra outra lingua (motor/seo/meta.mjs), entao seta pra baixo prometeria uma gaveta que
     nao existe. */
  /* SELETOR DE IDIOMA SEGMENTADO (decisao de 11/08, feita em 01/09).
     Era um botao unico que mostrava a OUTRA lingua: em portugues aparecia "ES", em
     espanhol aparecia "PT". Quem chega sem saber onde esta le "ES" e nao tem como
     dizer se isso significa "voce esta em espanhol" ou "clique pra ir pro espanhol".
     Segmentado resolve sem texto de ajuda: as duas linguas ficam visiveis, a de agora
     preenchida e a outra clicavel.
     A casca continua com a classe `.lang-btn` de proposito — as regras que a escondem
     na materia, a pintam de branco na barra escura e a encolhem no celular continuam
     valendo sem uma linha mudada. */
  .lang-btn{display:inline-flex;align-items:center;gap:0;min-height:44px;padding:0;overflow:hidden;border:1px solid var(--suave);border-radius:999px;color:var(--grafite);font-weight:600;background:#fff;font-family:'Poppins',sans-serif;font-size:13px;flex:none}
  .lang-seg{display:inline-flex;align-items:center;gap:7px;align-self:stretch;padding:0 14px;color:inherit;text-decoration:none;font-weight:600}
  .lang-seg + .lang-seg{border-left:1px solid var(--suave)}
  .lang-seg[aria-current]{background:var(--azul);color:#fff;font-weight:700}
  .lang-btn svg{width:18px;height:13px;flex:none;border-radius:2px}
  .lang-code{font-family:'Poppins',sans-serif;font-weight:700;letter-spacing:.02em}
  a.lang-seg:hover{color:var(--azul)}
  a.lang-seg:focus-visible{outline:2px solid var(--azul);outline-offset:-2px}
  /* Hamburger (mobile/tablet) */
  /* Busca do menu mobile (F0). O CSS de `.menu.is-open .menu-search-inline` existia
     desde maio e o ELEMENTO nunca foi escrito, entao abaixo de 640px o site ficava sem
     busca em lugar nenhum: a `.menu-search` do topo some nessa largura e nao havia
     substituta. Base escondida; so o menu aberto no mobile mostra. */
  .menu-search-inline{display:none}
  .menu-search-inline input{flex:1;background:var(--bg);border:1px solid var(--linha);border-right:none;border-radius:999px 0 0 999px;padding:11px 14px;font-size:14px;color:var(--terra);font-family:inherit;min-height:44px}
  .menu-search-inline input:focus{outline:none;border-color:var(--azul)}
  .menu-search-inline button{background:var(--azul);border:1px solid var(--azul);color:#fff;width:48px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:0 999px 999px 0;cursor:pointer}
  /* ── Header em DUAS LINHAS (17, secao 5 item 0 — o de linha unica foi vetado) ──
     Linha branca com logo, busca larga e idioma; abaixo, barra navy full-width com as
     editorias em branco e a ativa sublinhada pela fita.

     Por que a barra e full-width e o conteudo dela nao: a cor precisa sangrar de ponta a
     ponta pra funcionar como faixa, mas os links tem que alinhar com o resto da pagina.
     Por isso o `.navbar` pinta e o `.navbar .wrap` alinha.

     `white-space:nowrap` nos rotulos e regra do doc: "Fronteira Viva" nunca quebra em
     duas linhas. */
  /* O menu antigo do header vira EXCLUSIVO do mobile: no desktop quem manda e a
     navbar de pilulas. Sem isso as editorias apareceriam duas vezes na mesma tela. */
  @media(min-width:1025px){
    .menu{display:none}
    /* Busca central e larga (mockup do Jose, 14/08): com o menu fora desta linha, a
       busca vira a peca do meio do cabecalho em vez de um campo encolhido no canto. */
    .menu-search{flex:1;justify-content:center}
    .menu-search input{width:100%;max-width:480px;padding:11px 18px;font-size:14px}
    .menu-search button{width:48px;height:40px}
  }
  /* House ad de 64px (17, secao 5 item 1). Ele nao e enfeite: a etapa 1 colapsou os
     slots vazios porque caixa tracejada e pior que nada, e este bloco e o que ocupa o
     lugar com algo REAL enquanto nao ha anunciante. Altura fixa reservada, entao no dia
     em que o AdSense entrar o layout nao se mexe (D034, cerca 1). */
  /* Hero de 390px com o texto SOBRE a foto (17, secao 5 item 2). Antes o texto ficava
     ABAIXO da imagem, o que empurrava tudo pra baixo e desperdicava a foto grande — no
     celular a manchete comecava depois de 390px de imagem.

     O gradiente navy por tras do texto nao e estetica: sem ele o branco sobre foto clara
     reprova contraste em qualquer medicao. Com ele, o texto tem fundo garantido. */
  /* Banda Fronteira Viva em navy com kicker mint (17, secao 5 item 6). A editoria e o
     acervo evergreen do portal; a banda escura a separa do fluxo de noticia sem precisar
     de titulo maior. O kicker vai em mint porque o par mint/navy mede 7,85:1 (D064). */
  .banda-viva{background:var(--navy);margin:34px 0 0;padding:26px 0 30px;border-radius:14px}
  .banda-viva .section-title{margin:0 0 18px;padding:0 24px}
  .banda-viva .section-title h2{color:#fff}
  .banda-viva .section-title .meta{color:#CDD6F5}
  .banda-viva .micro-row{padding:0 24px}
  .banda-viva .micro-card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
  .banda-viva .micro-card h4 a,.banda-viva .micro-card h3 a{color:#fff}
  .banda-viva .micro-card h4 a:hover,.banda-viva .micro-card h3 a:hover{color:var(--mint)}
  /* CONTRASTE (01/09). Era var(--mint) #A4D3BC sobre branco: 1,66:1 num rotulo de 10px,
     ou seja, praticamente invisivel. A regra da casa (AGENTS.md) ja diz que teal claro
     nao e cor de texto, e o mint e mais claro ainda. --teal-tinta #007A79 da 5,17:1. */
  .banda-viva .micro-card .ic{color:var(--teal-tinta)}
  @media(max-width:640px){
    .banda-viva{border-radius:0;margin-left:-20px;margin-right:-20px;padding:22px 0 24px}
    .banda-viva .section-title,.banda-viva .micro-row{padding:0 20px}
  }
  .featured{position:relative}
  .featured a.cover{display:block;position:relative}
  /* A foto volta aos 390px fixos, o tamanho de antes da 8586798.
     Aquele commit trocou 390 fixos por "preenche o bloco" pra consertar o texto que caia
     embaixo da foto. So que quem manda na altura da linha do grid e a coluna vizinha
     (528px), entao a capa passou a ser AMPLIADA em 138px e cortada nas laterais pelo
     object-fit. Em capa que e arte de 1200x630 com texto embutido, isso decepa o texto
     da propria peca: sobrava "DE", "R DE", "HA".
     O texto do hero continua sobre a foto sem precisar esticar a imagem, porque o
     alinhamento do grid virou start e a coluna da direita passou a medir os mesmos
     390px (regra no fim do bloco do hero). */
  .featured a.cover img{height:390px;object-fit:cover;border-radius:10px;display:block;width:100%}
  .featured .body{position:absolute;left:0;right:0;bottom:0;padding:26px 26px 22px;border-radius:0 0 10px 10px;background:linear-gradient(180deg,rgba(37,45,92,0) 0%,rgba(27,36,69,.62) 42%,rgba(20,26,54,.93) 100%);color:#fff}
  .featured .body h1 a{color:#fff}
  .featured .body h1 a:hover{color:var(--mint)}
  .featured .body p.dek{color:#E4E9F7;margin-top:8px;max-width:52ch}
  .featured .body .by{color:#CDD6F5;margin-top:10px}
  .featured .cat-pill{background:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(4px)}
  @media(max-width:640px){
    /* Esta regra pedia 300px e nunca valeu: o min-height:390px da regra base anulava.
       Na pratica o mobile sempre renderizou 390px. Com o min-height fora, 300px passaria
       a valer de verdade e o texto do hero vazaria por cima do topo da foto, porque o
       .body e absoluto e cresce pra cima. Fica em 390px, que e o que sempre esteve no ar. */
    .featured a.cover img{height:390px}
    .featured .body{padding:18px 16px 16px}
  }

  /* A foto da manchete AFASTA enquanto a home rola, como a capa da materia (D127). O
     quadro passa a cortar, e o raio muda de lugar pra ele. Razoes no DECISIONS.md. */
  @media(max-width:640px){
    .featured a.cover{overflow:hidden;border-radius:10px}
    .featured a.cover img{border-radius:0}
    @media (prefers-reduced-motion: no-preference){
      @supports (animation-timeline:scroll()){
        .featured a.cover img{
          animation:manchete-afasta linear both;
          animation-timeline:scroll(root block);
          animation-range:0 450px;
        }
        @keyframes manchete-afasta{
          from{scale:1.22}
          to{scale:1.05}
        }
      }
    }
  }
  /* O padding de baixo e o respiro entre a faixa branca da publicidade e o comeco do
     conteudo (pedido do Jose, 14/08: o bloco terminava colado na cor das noticias). */
  .housead{background:var(--bg-card);padding:14px 0 24px}
  .housead .rotulo{font-family:'Poppins',sans-serif;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--suave);margin-bottom:6px}
  .housead .box{height:64px;border-radius:12px;background:var(--cinza);border:1px solid var(--linha);color:var(--ink);display:flex;align-items:center;gap:14px;padding:0 18px 0 22px;position:relative;overflow:hidden;text-decoration:none}
  .housead .box::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--fita)}
  .housead b{font-family:'Poppins',sans-serif;font-size:18px;font-weight:700}
  .housead span.sub{font-size:12.5px;color:var(--suave)}
  .housead .cta{margin-left:auto;background:var(--navy);color:#fff;font-family:'Poppins',sans-serif;font-size:12.5px;font-weight:600;padding:8px 15px;border-radius:8px;white-space:nowrap}
  .housead .box:hover .cta{background:var(--teal-tinta)}
  @media(max-width:640px){
    .housead .box{height:auto;padding:14px 16px;flex-wrap:wrap;gap:8px}
    .housead span.sub{display:none}
    .housead .cta{margin-left:0}
  }
  /* ── Navbar de PILULAS (mockup do Jose, 14/08 — substitui a barra navy da secao 5
     item 0 do 17). Cada editoria vira um botao branco de contorno com icone; a ativa
     ganha fundo mint claro. A faixa continua full-width branca e o conteudo alinha
     pelo .wrap, como antes. `white-space:nowrap` segue: "Fronteira Viva" nunca quebra. */
  .navbar{background:#fff;border-bottom:1px solid var(--linha)}
  .navbar .wrap{display:flex;align-items:center;gap:10px;padding:12px 20px 16px}
  .navbar a{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 18px;border:1px solid var(--linha);border-radius:13px;background:#fff;color:var(--ink);font-family:'Poppins',sans-serif;font-size:13.5px;font-weight:600;white-space:nowrap;text-decoration:none;transition:border-color .18s,color .18s,background .18s}
  .navbar a .material-icons{font-size:19px;color:var(--suave);transition:color .18s}
  .navbar a:hover{border-color:var(--teal);color:var(--teal-tinta)}
  .navbar a:hover .material-icons{color:var(--teal-tinta)}
  .navbar a.is-ativo{background:#E9F6F0;border-color:#BFE3D2;color:var(--teal-tinta)}
  .navbar a.is-ativo .material-icons{color:var(--teal-tinta)}
  .navbar a.pill-inicio{padding:0 14px}
  .navbar .slogan-nav{margin-left:auto;display:inline-flex;align-items:center;gap:2px;height:46px;padding:0 10px 0 16px;border:1px solid var(--linha);border-radius:13px;font-family:'Poppins',sans-serif;font-size:13px;font-weight:700;color:var(--teal-tinta);white-space:nowrap}
  .navbar .slogan-nav .material-icons{font-size:18px;color:var(--teal-tinta)}
  .navbar .slogan-nav:hover{border-color:var(--teal)}
  @media(max-width:1024px){
    .navbar{display:none}
  }
  .hamburger{display:none;width:42px;height:42px;border:1px solid var(--linha);border-radius:10px;background:#fff;cursor:pointer;align-items:center;justify-content:center;flex-shrink:0;color:var(--grafite)}
  .hamburger:hover{border-color:var(--azul);color:var(--azul)}
  .hamburger .material-icons{font-size:24px}
  @media(max-width:1024px){
    .hamburger{display:inline-flex}
    .menu{display:none}
    .menu.is-open{
      display:flex;flex-direction:column;
      position:absolute;top:100%;left:0;right:0;
      background:#fff;border-top:1px solid var(--linha);
      box-shadow:0 12px 24px rgba(0,0,0,.10);
      padding:8px 0;z-index:25;
    }
    .menu.is-open a{padding:14px 24px;border-bottom:1px solid var(--linha-2);width:100%;text-align:left;font-size:14px}
    .menu.is-open a:last-child{border-bottom:none}
    .menu-search input{width:140px}
    .head{padding:12px 20px;gap:14px;position:relative}
  }
  @media(max-width:640px){
    .menu-search{display:none}
    .menu.is-open .menu-search-inline{display:flex;padding:10px 20px;border-bottom:1px solid var(--linha-2)}
    .lang-btn{padding:0;font-size:12px}
    .lang-seg{padding:0 11px}
    .logo img{height:26px}
  }
  .menu a{position:relative;padding:14px 18px;color:var(--grafite);white-space:nowrap;border-bottom:3px solid transparent;transition:all .2s}
  .menu a:hover{color:var(--terra)}
  .menu a[data-c="conquistas"]:hover{color:var(--c-conquistas);border-color:var(--c-conquistas)}
  .menu a[data-c="economia"]:hover{color:var(--c-economia);border-color:var(--c-economia)}
  .menu a[data-c="cultura"]:hover{color:var(--c-cultura);border-color:var(--c-cultura)}
  .menu a[data-c="educacao"]:hover{color:var(--c-educacao);border-color:var(--c-educacao)}
  .menu a[data-c="saude"]:hover{color:var(--c-saude);border-color:var(--c-saude)}
  .menu a[data-c="fronteira"]:hover{color:var(--c-fronteira);border-color:var(--c-fronteira)}
  .menu a[data-c="compras"]:hover{color:var(--c-compras);border-color:var(--c-compras)}
  .menu a[data-c="gastronomia"]:hover{color:var(--c-gastronomia);border-color:var(--c-gastronomia)}
  .menu a[data-c="cotidiano"]:hover{color:var(--c-cotidiano);border-color:var(--c-cotidiano)}
  .menu a[data-c="esporte"]:hover{color:var(--c-esporte);border-color:var(--c-esporte)}
  .menu a[data-c="fronteira-viva"]:hover{color:var(--c-fronteira-viva);border-color:var(--c-fronteira-viva)}

  /* Ad */
  .ad{display:flex;align-items:center;justify-content:center;background:#fff;border:1px dashed #C9CFD8;color:#7A8294;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;border-radius:4px;position:relative}
  .ad::before{content:"Publicidade";position:absolute;top:-9px;left:14px;background:var(--bg);padding:0 6px;color:#9099A8;font-size:9px}
  .ad-leaderboard{height:110px;margin:22px 0}
  .ad-billboard{height:280px;margin:28px 0}
  .ad-rectangle{height:250px}
  .ad-native{height:130px}

  /* Section title */
  /* Widget de cambio da barra lateral. O numero de USD/BRL e o protagonista, a variacao
     entra com seta em SVG (regra de 01/09: zero emoji na interface) e a minisserie e
     desenhada no build por motor/render/cambio-home.mjs, entao nao pisca nem empurra
     layout. O CTA principal aponta pra /cambio/, que e a pagina com o grafico; o guia de
     lojistas virou link de apoio. */
  .cambio-widget .cambio-topo{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
  .cambio-widget .cambio-topo h4{margin:0}
  .cambio-widget .cambio-fonte{font-size:11.5px;font-weight:600;color:var(--suave);white-space:nowrap}
  .cambio-widget .cambio-destaque{display:block;text-decoration:none;color:inherit;padding:2px 0 6px;border-radius:8px}
  .cambio-widget .cambio-destaque:hover .cambio-linha-valor strong{color:var(--teal-tinta)}
  .cambio-widget .cambio-par{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--suave)}
  .cambio-widget .cambio-linha-valor{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
  .cambio-widget .cambio-linha-valor strong{font-family:'Inter',sans-serif;font-weight:800;font-size:30px;line-height:1.15;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;transition:color .15s ease}
  .cambio-widget .cambio-var{display:inline-flex;align-items:center;gap:3px;font-family:'Inter',sans-serif;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;padding:2px 7px;border-radius:999px}
  .cambio-widget .cambio-var.sobe{color:var(--c-compras);background:rgba(22,122,65,.10)}
  .cambio-widget .cambio-var.cai{color:var(--c-gastronomia);background:rgba(194,42,91,.10)}
  .cambio-widget .cambio-spark{display:block;width:100%;height:56px;margin:2px 0 14px;overflow:visible}
  .cambio-widget .spark-linha{fill:none;stroke:var(--teal-tinta);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
  .cambio-widget .spark-area{fill:rgba(0,122,121,.09);stroke:none}
  .cambio-widget .spark-fim{fill:var(--teal-tinta);stroke:#fff;stroke-width:2;vector-effect:non-scaling-stroke}
  .cambio-widget .cambio-lista{list-style:none;margin:0 0 12px;padding:0;border-top:1px solid var(--linha-2)}
  .cambio-widget .cambio-lista li{display:flex;justify-content:space-between;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--linha-2);font-size:13px}
  .cambio-widget .cambio-lista li:last-child{border-bottom:none}
  .cambio-widget .cambio-lista span{color:var(--suave);font-weight:600;letter-spacing:.04em}
  .cambio-widget .cambio-lista b{font-family:'Inter',sans-serif;font-weight:800;font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums}
  .cambio-widget .cambio-cta{display:inline-block;font-size:12.5px;font-weight:700;color:var(--teal-tinta);text-decoration:none}
  .cambio-widget .cambio-cta:hover{text-decoration:underline}
  .cambio-widget .cambio-ctas{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
  .cambio-widget .cambio-cta-apoio{font-size:12px;font-weight:600;color:var(--suave);text-decoration:none}
  .cambio-widget .cambio-cta-apoio:hover{color:var(--teal-tinta);text-decoration:underline}
  /* Faixa de guias da home, mosaico (D0xx, 14/08). Um card por familia, levando ao
     indice dela — o tamanho de cada caixa segue o volume real (motor/render/home.mjs,
     papelDoMosaico), nao e decoracao: a familia com mais lugares vira o destaque largo,
     as duas do meio ganham coluna propria, as duas menores dividem a ultima coluna. */
  .faixa-guias{
    display:grid;
    grid-template-columns:1.55fr 1fr 1fr 1fr;
    grid-template-areas:
      "destaque solo-1 solo-2 par-cima"
      "destaque solo-1 solo-2 par-baixo";
    gap:20px;
    height:520px;
    margin-bottom:8px;
  }
  .faixa-guias .card-familia{position:relative;border-radius:18px;color:#fff;text-decoration:none;display:block;z-index:1;
    /* O crescimento do hover mora AQUI, no cartao inteiro, e nao na caixa da imagem.
       Quando estava na .caixa-familia, so a imagem crescia: o texto (que e irmao dela,
       nao filho) ficava parado, e a caixa escalada vazava por baixo do card mostrando
       um retangulo de canto vivo. Era isso que o José via como "contorno quadrado da
       imagem" ao passar o mouse. */
    transform-origin:50% 0;
    transition:transform .45s cubic-bezier(.22,.9,.35,1), filter .45s cubic-bezier(.22,.9,.35,1);
  }
  .faixa-guias .card-familia.papel-destaque{grid-area:destaque}
  .faixa-guias .card-familia.papel-solo-1{grid-area:solo-1}
  .faixa-guias .card-familia.papel-solo-2{grid-area:solo-2}
  .faixa-guias .card-familia.papel-par-cima{grid-area:par-cima}
  .faixa-guias .card-familia.papel-par-baixo{grid-area:par-baixo}
  .faixa-guias .caixa-familia{
    position:absolute;inset:0;border-radius:18px;overflow:hidden;
    box-shadow:0 14px 20px -14px color-mix(in srgb, var(--cor-familia) 55%, transparent),
               0 26px 44px -20px color-mix(in srgb, var(--cor-familia) 48%, transparent);
    transition:box-shadow .45s cubic-bezier(.22,.9,.35,1);
  }
  .faixa-guias .fundo-familia{position:absolute;inset:0;background:var(--cor-familia)}
  .faixa-guias img.foto{
    position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
    object-position:var(--foco, 50% 28%);
    -webkit-mask-image:linear-gradient(115deg, transparent 0%, transparent 10%, #000 42%);
    mask-image:linear-gradient(115deg, transparent 0%, transparent 10%, #000 42%);
  }
  /* Sem foto (nenhuma familia hoje, ver comentario no FAMILIA_META — fica pronto pra
     quando uma 6a familia entrar sem ilustracao ainda): so o gradiente da cor, mais
     forte no canto onde a foto entraria, e o selo avisa que falta curadoria. */
  .faixa-guias .card-familia.sem-foto .fundo-familia{
    background:radial-gradient(140% 120% at 100% 100%, color-mix(in srgb, var(--cor-familia) 68%, #000 18%) 0%, var(--cor-familia) 62%);
  }
  .faixa-guias .conteudo-familia{position:relative;height:100%;display:flex;flex-direction:column;padding:20px;
    /* Veu sob o texto. As ilustracoes de CENA tinham o canto de baixo escuro por acaso da
       foto; as de OBJETO tem o objeto claro no meio do quadro, e nos cards baixos (160px)
       a imagem so pode deslizar 36px, entao o objeto cai exatamente onde o titulo vive.
       O degrade garante o fundo em vez de depender do que a imagem tem ali. */
    /* O veu e da COR DA FAMILIA, nao preto: preto sobre vinho/dourado suja o card e
       aparece como mancha cinza. Com a propria cor ele le como o fundo do card subindo
       por tras do objeto, que e o que o card ja faz na parte de cima. */
    /* Diagonal, e nao reto de baixo pra cima: o texto mora no canto INFERIOR ESQUERDO e
       o objeto no centro-direita. Veu reto cobria a largura toda e apagava o objeto
       junto; ancorado no canto do texto ele cobre o que precisa e deixa o objeto
       respirar do outro lado. */
    background:radial-gradient(92% 88% at 0% 100%,
      color-mix(in srgb, var(--cor-familia) 88%, #000 22%) 0%,
      color-mix(in srgb, var(--cor-familia) 74%, #000 10%) 36%,
      color-mix(in srgb, var(--cor-familia) 34%, transparent) 62%,
      transparent 86%)}
  /* Nos cards baixos o texto nao fica na base: ele ocupa quase toda a altura pela
     esquerda, entao veu que sobe da base passa por baixo dele e nao resolve nada. Ali o
     veu vem da ESQUERDA, cobrindo a coluna do titulo e deixando o objeto limpo na
     direita. Foi o que faltava no Cassino e no Morar, onde titulo branco caia em cima
     de objeto creme claro. */
  .faixa-guias .papel-solo-3 .conteudo-familia,
  .faixa-guias .papel-solo-4 .conteudo-familia,
  .faixa-guias .papel-solo-5 .conteudo-familia,
  .faixa-guias .papel-par-cima .conteudo-familia,
  .faixa-guias .papel-par-baixo .conteudo-familia{
    background:linear-gradient(100deg,
      color-mix(in srgb, var(--cor-familia) 90%, #000 24%) 0%,
      color-mix(in srgb, var(--cor-familia) 78%, #000 12%) 38%,
      color-mix(in srgb, var(--cor-familia) 38%, transparent) 66%,
      transparent 88%)}
  .faixa-guias .selo-ico-familia{width:46px;height:46px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 10px rgba(0,0,0,.14)}
  .faixa-guias .selo-ico-familia .material-icons{color:var(--cor-familia);font-size:22px}
  .faixa-guias .texto-familia{margin-top:auto}
  .faixa-guias .tit-familia{font-family:'Poppins',sans-serif;font-weight:700;font-size:23px;line-height:1.15;letter-spacing:-.01em;margin:0 0 9px;text-shadow:0 1px 2px rgba(0,0,0,.58),0 2px 15px rgba(0,0,0,.45)}
  .faixa-guias .papel-destaque .tit-familia{font-size:31px}
  .faixa-guias .linha-familia{width:26px;height:2px;background:rgba(255,255,255,.55);margin:0 0 9px;border-radius:2px}
  .faixa-guias .conteudo-familia p{font-family:'Inter',sans-serif;font-weight:400;font-size:13px;color:rgba(255,255,255,.94);margin:0;text-shadow:0 1px 2px rgba(0,0,0,.55),0 2px 10px rgba(0,0,0,.4)}
  .faixa-guias .conteudo-familia p b{font-family:'Poppins',sans-serif;font-weight:700;font-size:14px}
  .faixa-guias .pendente{position:absolute;top:16px;right:16px;z-index:2;font-family:'Poppins',sans-serif;font-weight:700;font-size:9px;letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.94);color:var(--cor-familia);padding:4px 9px;border-radius:999px}
  /* Grupo: passar o mouse cresce o card sob o cursor e recua os outros junto, suave dos
     dois lados — nao e so o card sob o cursor reagindo sozinho. */
  .faixa-guias:hover .card-familia:hover{z-index:5;transform:scale(1.045)}
  .faixa-guias:hover .card-familia:hover .caixa-familia{
    box-shadow:0 20px 26px -14px color-mix(in srgb, var(--cor-familia) 62%, transparent), 0 38px 64px -22px color-mix(in srgb, var(--cor-familia) 55%, transparent);
  }
  .faixa-guias:hover .card-familia:not(:hover){transform:scale(.965);filter:saturate(.9) brightness(.96)}
  .faixa-guias:hover .card-familia:not(:hover) .caixa-familia{
    box-shadow:0 10px 16px -14px color-mix(in srgb, var(--cor-familia) 40%, transparent), 0 18px 30px -20px color-mix(in srgb, var(--cor-familia) 32%, transparent);
  }
  @media(prefers-reduced-motion:reduce){
    .faixa-guias .caixa-familia,
    .faixa-guias .card-familia{transition:none}
    .faixa-guias:hover .card-familia:hover,
    .faixa-guias:hover .card-familia:not(:hover){transform:none;filter:none}
  }
  @media(max-width:780px){
    .faixa-guias{display:flex;flex-direction:column;gap:16px;height:auto}
    .faixa-guias .card-familia{aspect-ratio:16/10}
    .faixa-guias .papel-destaque .tit-familia{font-size:20px}
  }
  /* Títulos-editoria: Guias e Agenda usam a mesma régua visual — Poppins de 46px no
     máximo e a última palavra em Crimson Pro laranja compensada a 1,25em. */
  .titulo-guias-home{margin:46px 0 22px}
  .titulo-guias-home h2{font-family:'Poppins',sans-serif;font-weight:900;font-size:clamp(29px,4vw,46px);letter-spacing:-.055em;color:var(--navy);line-height:.96}
  .titulo-guias-home h2 .fonte-contraste{color:var(--laranja);font-size:1.25em;font-weight:700;letter-spacing:-.065em}
  .titulo-guias-home .meta{display:block;margin-top:7px;font-size:14px;color:var(--suave)}
  @media(max-width:700px){.titulo-guias-home h2{font-size:32px}}

  /* Manifesto: banda navy entre o conteudo e o rodape (mockup do Jose, 14/08). A
     chamada institucional e a do manual (doc 20, "Chamada institucional"); "Bora" vai
     em Crimson Pro teal (teal/navy medido: 5,99:1) e o fio termina no ponto laranja. */
  .manifesto{background:var(--navy);margin-top:50px;padding:64px 0 68px}
  .manifesto + footer{margin-top:0;border-top:1px solid rgba(255,255,255,.10)}
  .manifesto-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;align-items:center}
  .manifesto-titulo{font-family:'Poppins',sans-serif;font-weight:800;font-size:clamp(34px,4.4vw,56px);line-height:1.04;letter-spacing:-.035em;color:#fff;margin:0}
  /* O 1.22em compensa o olho da Crimson, menor que o da Poppins no mesmo corpo: sem
     ele o "Bora" encolhia perto do resto da frase e nao correspondia ao wordmark. */
  .manifesto-titulo .manifesto-bora{color:var(--teal);font-weight:600;font-size:1.22em;line-height:1}
  .manifesto-apoio p{color:#E4E9F7;font-size:16px;line-height:1.6;margin:0 0 30px;max-width:52ch}
  @media(max-width:900px){
    .manifesto{padding:44px 0 48px;margin-top:40px}
    .manifesto-grid{grid-template-columns:1fr;gap:26px}
    .manifesto-apoio p{margin-bottom:22px}
  }

  /* Títulos de faixa: uma única escala em toda a capa. O destaque vem do selo, não
     de uma barra decorativa solta à esquerda. */
  .section-title{display:flex;align-items:center;gap:10px;margin:40px 0 20px}
  .section-title h2{font-size:18px;line-height:1.2;color:var(--terra);font-weight:800;letter-spacing:-.02em}
  .section-title .meta{margin-left:auto;font-size:12px;color:var(--suave);text-transform:uppercase;letter-spacing:.06em}
  /* Selos editoriais: dão a cada faixa uma assinatura visual, sem disputar com o conteúdo. */
  .section-title.section-title-pill{gap:10px}
  .section-title.section-title-pill h2{display:inline-flex;align-items:center;width:max-content;padding:6px 15px;border:1px solid var(--linha);border-radius:999px;background:#fff;color:var(--ink);font-weight:800;box-shadow:0 5px 14px -13px rgba(10,27,61,.55)}
  .banda-viva .section-title.section-title-pill h2{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.24);color:#fff;box-shadow:none}

  /* ====== HERO ESTILO G1/WSJ ====== */
  .hero{display:grid;grid-template-columns:1fr;gap:20px;padding:18px 0 14px}
  @media(min-width:1024px){ .hero{grid-template-columns:1.75fr 1fr} }

  /* Featured card: image full top + heavy headline below (estilo G1) */
  .featured{background:#fff;border:1px solid var(--linha);border-radius:10px;overflow:hidden;box-shadow:var(--sombra);transition:box-shadow .25s;display:flex;flex-direction:column}
  .featured:hover{box-shadow:var(--sombra-hover)}
  .featured a.cover{display:block;position:relative;overflow:hidden}
  .featured img{width:100%;height:520px;object-fit:cover;transition:transform .8s}
  .featured a.cover:hover img{transform:scale(1.03)}
  .featured .body{padding:26px 30px 30px}
  .cat-pill{display:inline-flex;align-items:center;gap:6px;font-family:'Poppins',sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;border-radius:3px;color:#fff}
  .cat-pill.compras{background:var(--c-compras)}
  .cat-pill.cotidiano{background:var(--c-cotidiano)}
  .cat-pill.gastronomia{background:var(--c-gastronomia)}
  .cat-pill.esporte{background:var(--c-esporte)}
  .cat-pill.fronteira-viva{background:var(--c-fronteira-viva)}
  .featured h1{font-size:clamp(28px,6.4vw,48px);line-height:1.0;color:var(--terra);font-weight:700;margin-top:14px;letter-spacing:-.04em}
  .featured h1 a:hover{color:var(--azul)}
  /* Degrau por comprimento do titulo (ver heroTitleTier em motor/render/home.mjs). O
     card tem 390px fixos em toda largura de tela (nao so mobile), entao sem isso uma
     manchete longa cresce mais alta que o card e o overflow:hidden do .featured corta
     a primeira linha por cima. tit-cheio fica com o clamp de cima (nenhum titulo do
     site cai nela hoje — o mais curto tem 67 char — mas fica pronta). */
  .featured h1.tit-medio{font-size:clamp(22px,5.2vw,34px)}
  .featured h1.tit-curto{font-size:clamp(19px,4.4vw,28px)}
  /* Titulo >60 char (tit-medio e tit-curto — na pratica, quase todo titulo real: o mais
     curto do site hoje tem 67) sozinho ja cabe no card (D085), mas cabe DEMAIS: com o
     dek junto sobrava 15-22% de foto visivel em desktop — o Jose pediu de volta a foto
     como contexto. O dek some nesses dois degraus; titulo + byline contam a historia
     sozinhos. Só tit-cheio (≤60 char, nenhum titulo real hoje) mantém o dek. */
  .featured h1.tit-medio ~ p.dek,
  .featured h1.tit-curto ~ p.dek{display:none}
  .featured p.dek{margin-top:14px;font-family:'Poppins',sans-serif;font-weight:600;font-size:18px;color:#3a3a3a;max-width:64ch;line-height:1.5}
  .featured .by{margin-top:16px;font-size:12px;color:#777;text-transform:uppercase;letter-spacing:.06em;display:flex;gap:10px;align-items:center}
  .featured .by .live{display:inline-flex;align-items:center;gap:5px;color:var(--c-saude);font-weight:800}
  .featured .by .live::before{content:"";width:8px;height:8px;background:var(--c-saude);border-radius:50%;animation:pulse 1.5s infinite}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

  /* Side image-overlay cards (estilo da sua referência) */
  .side-stack{display:grid;grid-template-rows:1fr 1fr;gap:18px;height:100%}
  .img-overlay{position:relative;border-radius:10px;overflow:hidden;box-shadow:var(--sombra);min-height:255px;display:block;transition:box-shadow .25s}
  .img-overlay:hover{box-shadow:var(--sombra-hover)}
  /* Hero de duas colunas: a linha do grid para de esticar e as duas colunas medem os
     mesmos 540px da foto. Precisa vir DEPOIS de .side-stack e .img-overlay, senao o
     height:100% e o min-height:255px de cima ganham por ordem.
     540px (nao mais 390px) e pedido do Jose comparando com o G1: o destaque ficava
     pequeno demais em desktop, e os cards da direita — refens do mesmo numero via
     side-stack — junto. Só ≥1024px; mobile continua 390px (aprovado, intocado). */
  @media(min-width:1024px){
    .hero{align-items:start}
    .featured a.cover img{height:540px}
    .side-stack{height:540px}
    .side-stack .img-overlay{min-height:0}
    /* Degrau de fonte recalibrado pro card maior (mesmo motivo do height acima). Os
       clamps de linha 350-351 dao conta do mobile/tablet; aqui, com o card maior,
       cabe subir pra ~46/40px sem repetir o erro da D085 (cabia, mas cabia DEMAIS —
       o dek ja saiu daqueles dois degraus e continua fora aqui). Calibrado contra o
       titulo mais longo (129 char, ACEPP) e o mais curto (67, Centro Juan Pablo II)
       do site. */
    .featured h1.tit-medio{font-size:46px}
    .featured h1.tit-curto{font-size:40px}
  }
  .img-overlay img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s}
  .img-overlay:hover img{transform:scale(1.04)}
  .img-overlay::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.30) 60%,rgba(0,0,0,.85) 100%);pointer-events:none}
  .img-overlay .ov-body{position:absolute;left:20px;right:20px;bottom:18px;color:#fff;z-index:2}
  .img-overlay .ov-cat{font-family:'Poppins',sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;opacity:.92;margin-bottom:8px}
  .img-overlay h3,.img-overlay h2{font-family:'Poppins',sans-serif;font-weight:700;font-size:22px;line-height:1.18;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.4)}
  .img-overlay .ov-cat .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#fff;margin-right:6px;vertical-align:middle}

  /* Titulares de la frontera (faixa de 4 micro abaixo do hero) */
  .micro-row{display:grid;grid-template-columns:1fr;gap:14px;margin-top:12px}
  @media(min-width:680px){ .micro-row{grid-template-columns:repeat(2,1fr)} }
  @media(min-width:1024px){ .micro-row{grid-template-columns:repeat(4,1fr)} }
  /* Equilibrio fonte × imagem (pedido do Jose, 14/08): o titulo de 18px sobre uma foto
     de 110×82 fazia o card ler como texto com um selo perdido do lado. Titulo desce um
     degrau (manual doc 20: card fica na faixa 15-18px) e a foto cresce e cobre a altura
     do card, entao os dois lados pesam parecido. */
  .micro-card{background:#fff;border:1px solid var(--linha);border-radius:10px;padding:12px;display:grid;grid-template-columns:1fr 122px;gap:14px;align-items:center;box-shadow:var(--sombra);transition:box-shadow .2s}
  .micro-card:hover{box-shadow:var(--sombra-hover)}
  .micro-card > div:first-child{padding:4px 0 4px 4px}
  .micro-card .ic{font-family:'Poppins',sans-serif;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px}
  .micro-card h4,.micro-card h3{font-family:'Poppins',sans-serif;font-weight:600;font-size:15.5px;line-height:1.3;color:var(--terra)}
  .micro-card h4 a:hover,.micro-card h3 a:hover{color:var(--azul)}
  .micro-card img{width:122px;height:110px;object-fit:cover;border-radius:8px}
  .micro-card.is-publi{background:var(--cinza);border-color:var(--linha);border-left:3px solid var(--suave)}
  .micro-card.is-publi .publi-tag{margin-bottom:6px}

  /* ====== CLIMA estilo iOS — 1 card grande + 1 contextual ====== */
  /* ── Secao 0 do 17-handoff-ux-cx.md: clima + horoscopo NAO MUDAM ──
     O Jose reforcou duas vezes que "A fronteira agora", "Hoje na fronteira" e o
     horoscopo ficam exatamente como estao em producao. O bloco do clima consome seis
     tokens globais (--azul, --azul-escuro, --terra, --bg, --linha, --sombra), entao a
     troca de paleta da etapa 2 respingaria nele: o titulo iria de azul pra teal e a
     tinta dos numeros mudaria de matiz.

     Em vez de reescrever regra por regra, o contentor REDECLARA os tokens com os
     valores de antes. Propriedade customizada cascateia, entao todo descendente volta
     a resolver pro valor antigo sem que nenhuma regra tenha sido tocada — e o dia em
     que a secao for liberada, some este bloco e ela adota a paleta sozinha.

     O horoscopo nao precisa de override: o renderizador dele nao usa um var() sequer
     (conferido, zero ocorrencia), a paleta dele e literal e ja estava isolada. */
  .climate-row{
    --azul:#2A52D4;
    --azul-escuro:#142E80;
    --terra:#0F0F12;
    --bg:#F4F6FA;
    --linha:#E3E5EA;
    --sombra:0 2px 10px rgba(20,30,80,.06);
  }
  .climate-row{display:grid;grid-template-columns:1fr;gap:18px;margin:20px 0 10px}
  @media(min-width:980px){ .climate-row{grid-template-columns:1.4fr 1fr} }

  /* Card grande estilo iOS */
  .weather-hero{position:relative;border-radius:22px;padding:24px 26px;color:#fff;overflow:hidden;box-shadow:var(--sombra);min-height:220px;font-family:'Inter',sans-serif;backdrop-filter:saturate(1.1)}
  .weather-bg{position:absolute;inset:0;z-index:0;transition:background 1s}
  /* Backgrounds por condição */
  .weather-hero[data-w="clear"] .weather-bg{background:linear-gradient(160deg,#2E7BD7 0%,#1A4FA8 55%,#0E2D6E 100%)}
  .weather-hero[data-w="partly"] .weather-bg{background:linear-gradient(160deg,#5A8FD8 0%,#2E5DAE 60%,#1A3F84 100%)}
  .weather-hero[data-w="cloudy"] .weather-bg{background:linear-gradient(160deg,#6B7A92 0%,#3F4D66 60%,#222B3D 100%)}
  .weather-hero[data-w="rainy"] .weather-bg{background:linear-gradient(160deg,#3A4459 0%,#1F2536 60%,#0E1320 100%)}
  .weather-hero[data-w="storm"] .weather-bg{background:linear-gradient(160deg,#222B3D 0%,#0E1320 60%,#000 100%)}
  .weather-hero[data-w="fog"] .weather-bg{background:linear-gradient(160deg,#8A95A8 0%,#5C6678 60%,#3D4659 100%)}
  /* Halo de luz */
  .weather-hero::before{content:"";position:absolute;top:-60px;right:-40px;width:280px;height:280px;background:radial-gradient(circle,rgba(255,236,180,.18) 0%,transparent 65%);pointer-events:none;z-index:1}
  .weather-hero[data-w="rainy"]::before,
  .weather-hero[data-w="storm"]::before{background:radial-gradient(circle,rgba(255,255,255,.05) 0%,transparent 65%)}

  /* FX layer (animações) */
  .weather-fx{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}

  /* Chuva */
  .drop{position:absolute;top:-20px;width:2px;height:14px;background:linear-gradient(180deg,transparent,rgba(170,210,255,.7));border-radius:2px;animation:rain-fall linear infinite}
  @keyframes rain-fall{
    0%{transform:translateY(-30px);opacity:0}
    15%{opacity:1}
    100%{transform:translateY(280px);opacity:0}
  }

  /* Nuvem flutuante (cloudy) */
  .cloud{position:absolute;width:90px;height:30px;background:rgba(255,255,255,.08);border-radius:50px;filter:blur(2px);animation:cloud-drift linear infinite}
  .cloud::before,.cloud::after{content:"";position:absolute;background:rgba(255,255,255,.08);border-radius:50%;filter:blur(2px)}
  .cloud::before{width:38px;height:38px;top:-16px;left:14px}
  .cloud::after{width:30px;height:30px;top:-10px;right:18px}
  @keyframes cloud-drift{
    from{transform:translateX(-120px)}
    to{transform:translateX(120%)}
  }

  /* Sol brilho */
  .sun-glow{position:absolute;top:18px;right:24px;width:80px;height:80px;border-radius:50%;background:radial-gradient(circle,#FFE066 0%,rgba(255,224,102,.6) 30%,transparent 70%);animation:sun-pulse 3.5s ease-in-out infinite;z-index:1}
  @keyframes sun-pulse{
    0%,100%{transform:scale(1);opacity:.85}
    50%{transform:scale(1.15);opacity:1}
  }

  /* Flash da tempestade */
  .flash{position:absolute;inset:0;background:rgba(255,255,255,.9);opacity:0;mix-blend-mode:overlay;animation:storm-flash 7s infinite}
  @keyframes storm-flash{
    0%,93%,97%,100%{opacity:0}
    94%{opacity:.7}
    96%{opacity:.4}
  }

  /* Conteúdo do card */
  .weather-content{position:relative;z-index:3;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr auto;gap:8px 16px;height:100%;min-height:180px}
  .w-info{grid-column:1;grid-row:1}
  .w-info h3{font-family:'Inter',sans-serif;font-size:24px;font-weight:700;letter-spacing:-.01em;color:#fff;margin:0}
  .w-info p{font-size:13px;opacity:.78;margin-top:2px;display:flex;gap:6px;align-items:center}
  .w-info p svg{width:13px;height:13px;opacity:.85}
  .w-temp{grid-column:2;grid-row:1;font-family:'Inter',sans-serif;font-size:88px;font-weight:200;line-height:1;letter-spacing:-.04em;text-align:right;color:#fff}
  .w-temp .deg{font-weight:300}
  .w-condition{grid-column:1;grid-row:3;display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500;color:#fff}
  .w-condition svg{width:24px;height:24px}
  .w-stats{grid-column:2;grid-row:3;text-align:right;font-size:13px;opacity:.92;display:flex;gap:14px;justify-content:flex-end;align-items:center}
  .w-stats b{font-weight:600;color:#fff}

  /* Card contextual (Hoje na fronteira) */
  .weather-context{background:#fff;border:1px solid var(--linha);border-radius:14px;padding:20px;box-shadow:var(--sombra);display:flex;flex-direction:column;gap:14px}
  .weather-context h4{font-family:'Inter',sans-serif;font-size:13px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--azul-escuro);padding-bottom:10px;border-bottom:3px solid var(--azul);margin:0}
  .weather-context h4 .clima-lbl-dia{font-family:'Inter',sans-serif;font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:#5C6787}
  .hourly{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
  .hour{text-align:center;padding:8px 4px;background:var(--bg);border-radius:8px;display:flex;flex-direction:column;align-items:center;gap:4px}
  .hour .h{font-size:11px;color:#6E7689;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
  .hour svg{width:30px;height:30px}
  .hour b{font-family:'Inter',sans-serif;font-size:15px;font-weight:700;color:var(--terra)}
  /* Duas informacoes, nao quatro. Indice UV e Vento sairam a pedido do Jose (13/08).
     Vieram icone e caixa unica com divisoria no lugar dos quatro quadradinhos.
     O rotulo perdeu o text-transform: em caixa alta "Probabilidad de lluvia" quebrava em duas
     linhas na coluna de 1fr e desalinhava os dois valores. */
  .extras{display:grid;grid-template-columns:1fr 1fr;background:var(--bg);border-radius:8px;overflow:hidden}
  .extra{display:flex;align-items:center;gap:11px;padding:12px 14px;min-width:0}
  .extra + .extra{border-left:1px solid var(--linha)}
  .extra > svg{width:32px;height:32px;flex:none}
  .extra .txt{display:flex;flex-direction:column;gap:1px;min-width:0}
  .extra .lbl{color:#6E7689;font-size:12px;font-weight:600}
  .extra .val{font-weight:700;color:var(--terra);font-size:16px;line-height:1.2}

  /* Cards box */
  .cards-row{display:grid;grid-template-columns:repeat(1,1fr);gap:28px}
  @media(min-width:680px){.cards-row{grid-template-columns:repeat(2,1fr)}}
  @media(min-width:1024px){.cards-row{grid-template-columns:repeat(3,1fr)}}
  /* "Más recientes" leva 4 posts (home-regras.json) e a grade era de 3: sobrava um card
     orfao na segunda linha, 3/1 (o que o Jose apontou em 14/08). A variante .quatro
     existe SO pra essa fileira da home — categoria e ficha continuam na grade de 3. */
  @media(min-width:1024px){
    .cards-row.quatro{grid-template-columns:repeat(4,1fr);gap:22px}
    .cards-row.quatro .card img{height:185px}
    .cards-row.quatro .card h3{font-size:17px}
    .cards-row.quatro .card p.dek{font-size:13.5px}
  }
  .cards-row.two{grid-template-columns:repeat(1,1fr)}
  @media(min-width:680px){.cards-row.two{grid-template-columns:repeat(2,1fr)}}
  /* Fallback se o ad-native for bloqueado: garante respiro entre as duas linhas */
  .cards-row.two ~ .cards-row.two{margin-top:48px}

  .card{background:#fff;border:1px solid var(--linha);border-radius:10px;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sombra);transition:transform .2s,box-shadow .25s}
  .card:hover{transform:translateY(-2px);box-shadow:var(--sombra-hover)}
  .card a.cover{display:block;overflow:hidden}
  .card img{width:100%;height:240px;object-fit:cover;transition:transform .6s}
  .card a.cover:hover img{transform:scale(1.04)}
  .card .body{padding:18px 18px 22px;display:flex;flex-direction:column;flex:1}
  /* line-height fixo aqui e no .publi-tag abaixo: os dois rotulos de card tem que
     ocupar a MESMA caixa (16px + 8px de margem), senao a manchete do card Publi
     desce ~4px em relacao a do card editorial ao lado e o par da secao "Fronteira
     em pauta" fica visivelmente torto. O .ic e 11px sem padding; o .publi-tag e
     9.5px com 2px de padding em cima e embaixo, e era isso que desencontrava. */
  .card .ic{font-family:'Poppins',sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px;line-height:16px}
  .card .ic .label-cidade{font-weight:600;color:var(--suave);letter-spacing:.05em;margin-left:6px}
  .card h3,.card h2{font-family:'Poppins',sans-serif;font-weight:700;font-size:20px;line-height:1.22;color:var(--terra)}
  .card h3 a:hover,.card h2 a:hover{color:var(--azul)}
  .card p.dek{margin-top:10px;font-size:14px;color:#555;line-height:1.55;flex:1}
  .card time{display:block;margin-top:12px;font-size:11px;color:var(--suave);text-transform:uppercase;letter-spacing:.06em}
  .card.is-large img{height:300px}
  .card.is-large h3{font-size:24px}
  .card.is-publi-card{border-left:3px solid var(--suave);background:var(--cinza)}

  /* Foto do card com parallax no scroll (D125). Timeline NOMEADA no .card: um
     view() solto elegeria o .cover como scroller, e ele nunca rola. Movimento em
     translate/scale, que compoe com o hover em transform acima. Razoes e medidas
     no DECISIONS.md. */
  @media (prefers-reduced-motion: no-preference){
    @supports (animation-timeline: view()){
      .card{view-timeline-name:--foto-card;view-timeline-axis:block}
      .card a.cover img{
        scale:1.10;
        animation:foto-card-parallax linear both;
        animation-timeline:--foto-card;
        animation-range:cover 0% cover 100%;
      }
      @keyframes foto-card-parallax{
        from{translate:0 -4%}
        to{translate:0 4%}
      }
    }
  }

  .ic[data-c="compras"]{color:var(--c-compras)}
  .ic[data-c="cotidiano"]{color:var(--c-cotidiano)}
  .ic[data-c="gastronomia"]{color:var(--c-gastronomia)}
  .ic[data-c="esporte"]{color:var(--c-esporte)}
  .ic[data-c="fronteira-viva"]{color:var(--c-fronteira-viva)}

  /* Patrocinado — mais discreto */
  .sponsored-band{background:linear-gradient(180deg,#FAFAFB 0%,#fff 100%);padding:28px 0 36px;margin:36px 0;border-top:1px solid var(--linha);border-bottom:1px solid var(--linha)}
  .publi-tag{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#9099A8;background:#F0F2F6;padding:2px 7px;border-radius:2px;margin-bottom:10px}
  /* dentro de card, a caixa do rotulo casa com a do .ic: 12 de linha + 4 de padding = 16 */
  .card .publi-tag{line-height:12px;margin-bottom:8px}

  /* 2 col */
  /* Respiro antes desta secao (pedido do Jose, 14/08): o "De la semana" da lateral nascia
     colado no mosaico de guias, porque so o section-title da coluna esquerda tinha os
     40px de margem. O padding sobe no contentor e a lateral ganha o MESMO recuo do
     titulo, entao o topo do widget alinha com o topo de "Frontera en foco". */
  .two-col{display:grid;grid-template-columns:1fr;gap:28px;padding:26px 0 10px}
  @media(min-width:1024px){
    .two-col{grid-template-columns:repeat(3,1fr)}
    .two-col > *:first-child{grid-column:span 2;min-width:0}
    .two-col > .sidebar{min-width:0;padding-top:40px}
  }

  .sidebar > *{margin-bottom:28px}
  .widget{background:#fff;border:1px solid var(--linha);border-radius:10px;padding:20px;box-shadow:var(--sombra)}
  .widget h4{font-family:'Poppins',sans-serif;font-size:18px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--azul-escuro);margin-bottom:14px;padding-bottom:10px;border-bottom:3px solid var(--azul)}

  .event-item{padding:12px 0;border-bottom:1px solid var(--linha-2);display:grid;grid-template-columns:54px 1fr;gap:12px;align-items:center}
  .event-item:last-child{border-bottom:none}
  .event-date{background:var(--azul-escuro);color:#fff;text-align:center;border-radius:6px;padding:8px 0}
  .event-date .d{font-size:20px;font-weight:900;line-height:1}
  .event-date .m{font-size:9px;letter-spacing:.12em;text-transform:uppercase;margin-top:3px}
  .event-title{font-size:14px;font-weight:700;line-height:1.3}
  .event-where{font-size:11px;color:var(--suave);margin-top:2px}

  .newsletter{background:var(--navy);color:#fff;border:none;box-shadow:var(--sombra);position:relative;overflow:hidden}
  .newsletter::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--fita)}
  .newsletter h4{color:#fff;border-bottom-color:rgba(255,255,255,.3)}
  .newsletter p{font-size:13.5px;line-height:1.45;margin-bottom:14px;opacity:.97}
  .newsletter input{width:100%;padding:11px 14px;border:none;border-radius:5px;font-size:13px;color:var(--terra);margin-bottom:8px;font-family:inherit}
  .newsletter button{width:100%;padding:11px;background:var(--mint);color:var(--navy);border:none;border-radius:5px;font-family:'Poppins',sans-serif;font-size:13px;font-weight:600;cursor:pointer;text-transform:uppercase;letter-spacing:.08em}

  .ranking li{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--linha-2);list-style:none}
  .ranking li:last-child{border-bottom:none}
  .ranking .num{font-family:'Poppins',sans-serif;font-size:28px;font-weight:900;color:var(--azul);line-height:1}
  .ranking a{font-size:13.5px;line-height:1.35;color:var(--terra);font-weight:700}
  .ranking a:hover{color:var(--azul)}

  footer{margin-top:50px;background:var(--azul-deep);color:#a7b2d4;padding:60px 0 24px;border-top:6px solid var(--azul)}
  .foot-grid{display:grid;grid-template-columns:1fr;gap:30px}
  @media(min-width:780px){.foot-grid{grid-template-columns:2.4fr 1fr 1fr 1fr}}
  footer .foot-title{color:#fff;font-family:'Poppins',sans-serif;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px}
  footer .logo img{height:34px}
  footer p.tagline{font-size:14px;color:#a7b2d4;margin-top:10px;max-width:380px;line-height:1.55}
  /* Redes sociais no rodape (Jose, 24/08). Facebook fica de fora por decisao dele,
     mesmo existindo e estando conectado no Metricool. Alvo de toque de 44px: a D098
     cobra 24 como minimo, mas link de icone num rodape escuro merece folga. */
  .foot-social{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
  .foot-social a{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid rgba(255,255,255,.18);border-radius:999px;color:#fff;font-family:'Poppins',sans-serif;font-size:13px;font-weight:600;text-decoration:none;transition:border-color .18s,background .18s}
  .foot-social a:hover{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.06)}
  .foot-social svg{width:17px;height:17px;fill:currentColor;flex-shrink:0}
  /* O slogan saiu do rodape em 14/08 (Jose, emenda a D059): com o manifesto logo acima
     e a pilula "Bora pra fronteira!" na navbar, aqui ele repetia — e o mint dele batia
     com o teal do manifesto como dois verdes diferentes lado a lado. Fica o descritivo
     geografico. */
  footer ul{list-style:none}
  footer ul li{padding:5px 0;font-size:13.5px}
  footer ul li a:hover{color:#fff}
  .foot-bottom{margin-top:36px;padding-top:24px;border-top:1px solid #1c2e6e;display:flex;justify-content:space-between;font-size:12px;color:#7E8BBA;flex-wrap:wrap;gap:10px}

  .skeleton{display:inline-block;background:linear-gradient(90deg,rgba(255,255,255,.1),rgba(255,255,255,.25),rgba(255,255,255,.1));background-size:200% 100%;animation:shimmer 1.2s infinite;color:transparent;border-radius:3px;min-width:50px}
  @keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
  /* ====== Acessibilidade (auditoria 14/08) ====== */
  /* Pular direto pro conteudo: primeiro Tab da pagina. Fora da tela ate receber foco. */
  .skip-link{position:absolute;left:-9999px;top:0;z-index:10000;background:var(--navy);color:#fff;font-family:'Poppins',sans-serif;font-size:14px;font-weight:700;padding:12px 20px;border-radius:0 0 10px 0;text-decoration:none}
  .skip-link:focus{left:0}
  /* Anel de foco do teclado em TODO interativo, nao so no botao de idioma. No rodape
     navy o teal-tinta some, entao la o anel vira mint. */
  a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--azul);outline-offset:2px}
  footer a:focus-visible,.banda-viva a:focus-visible{outline-color:var(--mint)}
  /* Alvo de toque >=24px (WCAG 2.5.8) nos links soltos de navegacao, sem mexer no
     desenho: padding compensado por margem negativa nao desloca nada em volta. */
  .agenda-head a,.cambio-widget .cambio-cta,.cambio-widget .cambio-cta-apoio,.section-title .meta a,footer .foot-grid li a{display:inline-block;padding:6px 0;margin:-6px 0}

  .brand-bar{display:none}
  header.main{background:var(--navy);border:0;box-shadow:none}
  .frontier-mainbar{background:linear-gradient(112deg,var(--navy),#0D3277)}
  .frontier-mainbar .head{min-height:82px;padding:18px 20px;gap:18px}
  .frontier-mainbar .logo{flex:1}
  .frontier-mainbar .logo img{height:34px}
  .frontier-mainbar .menu,.frontier-mainbar .menu-search{display:none}
  .frontier-mainbar .hamburger{display:inline-flex;width:44px;height:44px;background:transparent;border-color:rgba(255,255,255,.45);color:#fff}
  .frontier-mainbar .hamburger:hover{border-color:var(--mint);color:#fff}
  .frontier-mainbar .lang-btn{min-height:44px;background:transparent;border-color:rgba(255,255,255,.45);color:#fff}
  .frontier-mainbar .lang-seg + .lang-seg{border-left-color:rgba(255,255,255,.45)}
  /* Na barra escura o preenchimento tem que ser CLARO pra se distinguir do fundo: com
     rgba(255,255,255,.16) os dois segmentos ficavam quase iguais e o seletor voltava a
     nao dizer onde voce esta, que e o defeito que ele veio consertar. */
  .frontier-mainbar .lang-seg[aria-current]{background:#fff;color:var(--terra);font-weight:700}
  .frontier-mainbar .lang-btn:hover{border-color:var(--mint);color:#fff}
  .frontier-mainbar .menu.is-open{display:flex;position:absolute;top:100%;left:0;right:0;z-index:40;flex-direction:column;padding:8px 0;background:#fff;border-top:1px solid #dce4f1;box-shadow:0 12px 22px rgba(4,24,63,.14)}
  .frontier-mainbar .menu.is-open a{width:100%;padding:14px 24px;border-bottom:1px solid #e8edf5;text-align:left;font-size:14px}
  .frontier-mainbar .menu.is-open a:last-child{border-bottom:0}
  .frontier-mainbar .menu.is-open .menu-search-inline{display:flex;padding:10px 20px;border-bottom:1px solid var(--linha-2)}
  .frontier-strip{background:linear-gradient(112deg,#0C2C69,#082255);border-top:1px solid rgba(255,255,255,.14);color:#fff}
  .frontier-services{display:grid;grid-template-columns:1.45fr 1fr 1.2fr;gap:8px;padding:8px 20px}
  .frontier-services.sem-cambio{grid-template-columns:1.45fr 1fr}
  .frontier-services.sem-clima{grid-template-columns:1.45fr 1.2fr}
  .frontier-services.sem-cambio.sem-clima{grid-template-columns:1fr}
  .frontier-card{min-height:70px;display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid rgba(255,255,255,.25);border-radius:10px;color:#fff}
  .frontier-card[hidden]{display:none}
  .frontier-label{margin:0 0 4px;color:#A6E3E0;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;flex-basis:100%}
  .frontier-clock-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
  .frontier-clock-grid > div{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px}
  .frontier-clock-grid > div + div{border-left:1px solid rgba(255,255,255,.18);padding-left:10px}
  .frontier-clock-grid b,.frontier-value{display:block;font-family:'Poppins',sans-serif;font-size:20px;font-weight:700;line-height:1}
  .frontier-clock-grid span,.frontier-note{display:block;margin-top:0;color:#D8E1F4;font-size:10px}
  .frontier-city{display:inline-flex!important;align-items:center;gap:5px;white-space:nowrap}
  .frontier-clima > span,.frontier-cambio > span{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px}
  .frontier-city-full,.frontier-city-short{display:inline!important;margin:0!important}
  .frontier-city-short{display:none!important}
  .frontier-txt-full,.frontier-txt-short{display:inline}
  .frontier-txt-short{display:none}
  .frontier-flag{display:block;flex:none}
  .frontier-weather-icon{width:28px;height:28px;display:block;flex:none;color:#FFD44E}
  .frontier-cambio-coin{width:30px;height:30px;display:flex;align-items:center;justify-content:center;flex:none;border-radius:50%;background:#18AF3B;color:#fff;font-family:'Poppins',sans-serif;font-size:20px;font-weight:700}
  .frontier-action{color:#A6E3E0!important;font-weight:700}
  .frontier-services-lite{display:none}
  .frontier-fx[hidden]{display:none}
  .frontier-card:focus-visible{outline:3px solid #F5C518;outline-offset:3px}
  .navbar{display:block;background:var(--cinza);border-bottom:1px solid var(--linha)}
  .navbar .wrap{min-height:60px;padding:8px 20px;gap:26px;overflow-x:auto}
  .navbar a{height:44px;padding:0;border:0;background:transparent;color:var(--ink);border-radius:999px;font-size:14px}
  .navbar a .material-icons{display:none}
  .navbar a.pill-inicio{padding:0 14px}
  .navbar a.is-ativo{background:#E2F4EF;border:0;color:var(--teal-tinta)}
  .navbar .slogan-nav{display:none}
  #clima{scroll-margin-top:285px}

  section.hero-carousel{display:grid;grid-template-columns:1.75fr 1fr;gap:18px;align-items:stretch;padding:28px 0 38px}
  .hero-main-carousel{position:relative;min-height:510px;overflow:hidden;border-radius:16px;background:#07142F}
  .hero-slide{display:none;position:absolute;inset:0;color:#fff}
  .hero-slide.is-active{display:block}
  .hero-slide-cover{position:absolute;inset:0;display:block}
  .hero-slide-cover img{width:100%;height:100%;object-fit:cover}
  .hero-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,20,47,.96) 0%,rgba(7,20,47,.82) 46%,rgba(7,20,47,.06) 100%);pointer-events:none}
  .hero-slide-copy{position:absolute;z-index:1;right:38px;bottom:36px;left:42px}
  .hero-slide-copy .cat-pill{margin:0 0 12px;background:transparent;color:#7CE4DF;padding:0;border-radius:0}
  .hero-slide-copy h1,.hero-slide-copy h2{max-width:20ch;margin:0;color:#fff;font-family:'Poppins',sans-serif;font-size:36px;font-weight:800;line-height:1.08;letter-spacing:-.045em;text-wrap:balance}
  .hero-slide-copy h1.tit-medio,.hero-slide-copy h2.tit-medio{font-size:32px}
  .hero-slide-copy h1.tit-curto,.hero-slide-copy h2.tit-curto{font-size:28px;line-height:1.1}
  .hero-slide-copy h1 a,.hero-slide-copy h2 a{color:#fff}
  .hero-slide-copy .by{margin:18px 0 0;color:#D2DCF0;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
  .hero-carousel-controls{position:absolute;z-index:2;right:24px;bottom:21px;display:none;align-items:center;gap:8px}
  .hero-carousel-arrow{width:44px;height:44px;border:1px solid rgba(255,255,255,.62);border-radius:50%;background:rgba(6,17,42,.52);color:#fff;font-size:25px;line-height:1}
  .hero-carousel-dots{display:flex;gap:2px}
  .hero-carousel-dot{position:relative;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:transparent}
  .hero-carousel-dot::before{content:"";position:absolute;top:8px;left:8px;width:8px;height:8px;border-radius:99px;background:#9AA7C4}
  .hero-carousel-dot[aria-current="true"]::before{left:1px;width:22px;background:var(--teal)}
  .hero-carousel-arrow:focus-visible,.hero-carousel-dot:focus-visible{outline:3px solid #F5C518;outline-offset:2px}
  .hero-side-rail{display:grid;grid-template-rows:1fr 1fr;gap:18px}
  .hero-side-story{position:relative;min-height:246px;overflow:hidden;border-radius:16px;background:#07142F;color:#fff}
  .hero-side-story img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .hero-side-story::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,20,47,.94),rgba(7,20,47,.05) 75%);pointer-events:none}
  .hero-side-story-copy{position:absolute;z-index:1;right:20px;bottom:18px;left:20px}
  .hero-side-story .cat-pill{margin:0 0 7px;background:transparent;color:#7CE4DF;padding:0;border-radius:0;font-size:10px}
  .hero-side-story h3{margin:0;color:#fff;font-family:'Poppins',sans-serif;font-size:20px;font-weight:700;line-height:1.16;letter-spacing:-.035em;text-wrap:balance}
  .hero-side-story:focus-visible{outline:3px solid #F5C518;outline-offset:3px}
  @media(max-width:780px){
    .frontier-mainbar .head{min-height:66px;padding:11px 20px;gap:12px}
    .frontier-mainbar .logo{justify-content:center}
    .frontier-mainbar .logo img{height:28px}
    .frontier-mainbar .lang-btn{min-width:44px;width:auto;padding:0 12px;justify-content:center;gap:6px}
    .frontier-mainbar .lang-btn svg{width:19px;height:14px}
    .frontier-services{display:grid;grid-template-columns:1.26fr 1fr 1fr;gap:6px;overflow:visible;padding:6px 12px}
    .frontier-services.sem-cambio{grid-template-columns:1.26fr 1fr}
    .frontier-services.sem-clima{grid-template-columns:1.26fr 1fr}
    .frontier-services.sem-cambio.sem-clima{grid-template-columns:1fr}
    .frontier-card{min-width:0;min-height:60px;padding:7px 8px}
    .frontier-clima,.frontier-cambio{position:relative;min-width:0;gap:0}
    .frontier-clima > span:last-child,.frontier-cambio > span:last-child{width:100%;padding-right:20px;box-sizing:border-box}
    .frontier-label{font-size:9px}
    .frontier-clock-grid{gap:7px}
    .frontier-clock-grid > div + div{padding-left:7px}
    .frontier-clock-grid b,.frontier-value{font-size:16px}
    .frontier-clock-grid span,.frontier-note{margin-top:2px;font-size:9px}
    .frontier-city-full{display:none!important}
    .frontier-city-short{display:inline!important}
    .frontier-txt-full{display:none}
    .frontier-txt-short{display:inline}
    .frontier-weather-icon,.frontier-cambio-coin{position:absolute;top:7px;right:7px;width:20px;height:20px}
    .frontier-cambio-coin{font-size:14px}
    .frontier-services{display:none}
    .frontier-services-lite{display:flex;align-items:stretch;padding:0 8px}
    .frontier-fx{display:flex;align-items:center;gap:3px;text-decoration:none;color:#fff;position:relative;padding:9px 5px;min-width:0}
    .frontier-fx+.frontier-fx::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:18px;background:rgba(255,255,255,.16)}
    .frontier-fx-val{font-family:'Poppins',sans-serif;font-weight:700;font-size:12.5px;white-space:nowrap;color:#fff;display:inline-block;max-width:72px;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;flex-shrink:0}
    .frontier-fx-link{flex-shrink:0}
    .frontier-fx-sep{color:rgba(255,255,255,.35);font-size:11px;margin:0 1px}
    .frontier-fx-link{color:#A6E3E0;font-size:9.5px;font-weight:700;white-space:nowrap;margin-left:2px}
    .frontier-fx-clocks{flex:1.22;min-width:0}
    .frontier-fx-clima,.frontier-fx-cambio{flex:1;min-width:0}
    .frontier-fx-coin{width:13px;height:13px;border-radius:50%;background:#18AF3B;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;flex:none;color:#fff}
    .frontier-fx-flag{flex:none;border-radius:2px}
    .frontier-fx-weather{width:14px;height:14px;flex:none;color:#FFD44E}
    .frontier-fx:focus-visible{outline:2px solid #F5C518;outline-offset:2px;border-radius:4px}
    .navbar .wrap{gap:22px;min-height:58px}
    .navbar a{font-size:13px}
    section.hero-carousel{display:block;padding:16px 0 22px}
    .hero-main-carousel{min-height:420px;border-radius:14px}
    .hero-slide-copy{right:18px;bottom:68px;left:18px}
    .hero-slide-copy h1,.hero-slide-copy h2{font-size:25px}
    .hero-slide-copy h1.tit-medio,.hero-slide-copy h2.tit-medio{font-size:23px}
    .hero-slide-copy h1.tit-curto,.hero-slide-copy h2.tit-curto{font-size:21px;line-height:1.12}
    .hero-slide-copy .by{margin-top:12px;font-size:10px}
    .hero-carousel-controls{display:flex;right:12px;bottom:11px;gap:4px}
    .hero-carousel-arrow{width:40px;height:40px}
    .hero-side-rail{grid-template-columns:1fr 1fr;grid-template-rows:none;gap:10px;margin-top:12px}
    .hero-side-story{min-height:150px;border-radius:12px}
    .hero-side-story-copy{right:12px;bottom:11px;left:12px}
    .hero-side-story h3{font-size:14px}
    .hero-side-story .cat-pill{font-size:8px}
  }
  @media(max-width:780px){
    .pg-materia .frontier-mainbar{background:transparent}
    .pg-materia .frontier-strip,.pg-materia .navbar{display:none}
  }