/* 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:#fff;color:var(--texto);font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5} 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} /* No h1 do hub de guias a palavra de contraste vai em laranja (mockup do Jose, 14/08). A regra mora aqui, e nao no guias.css, porque aquele arquivo e GERADO (scripts/exportar-css-guias.mjs) e este template ja veste toda pagina de guia. */ .guia h1 .fonte-contraste{color:var(--laranja)} /* Icone e 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 */ .preview-bar{background:#000;color:#fff;font-size:12px;padding:6px 20px;text-align:center} .preview-bar b{color:#FFD27A} .preview-bar a{color:#FFD27A;border-bottom:1px dotted #FFD27A} .brand-bar{height:8px;background:linear-gradient(90deg,var(--azul-claro) 0%,var(--azul) 55%,var(--azul-escuro) 100%)} /* Topo */ /* 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} .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:6px;background:#fff;border:1px solid var(--linha);border-radius:999px;padding:5px 11px 5px 9px;color:var(--terra);font-weight:700;font-size:12px;text-decoration:none;transition:all .2s} .temp-pill:hover{background:var(--bg);color:var(--terra);transform:translateY(-1px)} .temp-pill .material-icons{font-size:15px;color:#FFC857} .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} /* HEADER em 1 linha — hide on scroll */ 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} .logo .logo-negativa{display:none} .menu{display:flex;font-family:'Poppins',sans-serif;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;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="cotidiano"]{color:var(--c-cotidiano);border-color:var(--c-cotidiano)} .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). Mesma regra do 1-preview-home.html: globo, borda em --suave (a antiga dava 1,24:1 contra os 3:1 que contorno de componente pede) e 44px de alvo de toque. Sem chevron, porque no site publicado ele ja e link direto. */ /* 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} /* 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), mesma regra do 1-preview-home. */ .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} } /* ── Navbar de PILULAS (mockup do Jose, 14/08 — substitui a barra navy da secao 5 item 0 do 17). Mesmo desenho do 1-preview-home; aqui nenhuma pilula nasce ativa. */ .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)} /* Selo (i) do credito da foto — a versao visivel e SO da materia imersiva, dentro do media query pg-materia mais abaixo. Base escondida aqui garante que ele nao apareca como link solto nas outras paginas que usam este mesmo cabecalho (guia, ficha, agenda, categoria...), nem no desktop de materia nenhuma. */ .cover-info-pill{display:none} .hamburger:hover{border-color:var(--azul);color:var(--azul)} .hamburger .material-icons{font-size:24px} .hamburger .ham-ico{display:inline-flex} .hamburger .ham-fechar{display:none} .hamburger[aria-expanded="true"] .ham-abrir{display:none} .hamburger[aria-expanded="true"] .ham-fechar{display:inline-flex} @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} .lang-btn{padding:0;font-size:12px} .lang-seg{padding:0 11px} .logo img{height:26px} } /* Breadcrumb */ .crumbs{padding:18px 0 8px;font-size:12px;color:#6E7689;font-weight:600;text-transform:uppercase;letter-spacing:.06em;display:flex;gap:10px;align-items:center;flex-wrap:wrap} .crumbs a{color:#6E7689} .crumbs a:hover{color:var(--azul)} .crumbs .sep{opacity:.5} /* === ARTICLE MASTHEAD === */ /* GEOMETRIA REVERTIDA por ordem do Jose (01/09). A D167 ("uma borda esquerda so") tirou a centralizacao (`margin:0 auto` virou so `margin-right:auto`, ou seja, encostado na borda esquerda do `.wrap`, x=100) e a D160 ("76 caracteres") estreitou a coluna pra 660px atras de `body.pg-leitura`/`pg-materia`. No ar, ele rejeitou o resultado: quer de volta o padrao antigo, coluna de 840px CENTRADA (`margin:0 auto`) — que na tela pousa por volta de x=300, o que ele descreve como "alinhado a esquerda mas um pouco mais a direita" (nao colado no cabecalho, mas tambem nao e texto centralizado — so a CAIXA de 840px que centraliza dentro do wrap). A reclamacao e literal: o padrao restaurado aqui e byte a byte o que existia ANTES da D160 tocar este arquivo, sem interpretacao. E um reverte PARCIAL das duas decisoes, so na geometria de titulo/corpo desta pagina — o resto de cada uma continua valendo: idioma segmentado e Fronteira Viva por Historia (D167), os dois contrastes AA (D160, nao mexem neste arquivo). Ver D168 em DECISIONS.md. A GRADE unificada de x=100 nas outras 12 paginas (guia, agenda, cambio, feriados, sobre, eleicoes...) NAO foi tocada aqui — fica pra quando o padrao da materia virar referencia do site (proxima etapa, com levantamento antes de mudar em massa). */ .article-masthead{padding:14px 0 28px;max-width:840px;margin:0 auto} .article-cat{display:inline-flex;align-items:center;gap:8px;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;background:var(--c-cotidiano);margin-bottom:18px} .article-cat::before{content:"";width:6px;height:6px;background:#fff;border-radius:50%} .article-headline{font-family:'Poppins',sans-serif;font-size:48px;line-height:1.0;color:var(--terra);font-weight:700;letter-spacing:-.04em} @media(min-width:780px){ .article-headline{font-size:56px} } .article-dek{margin-top:18px;font-family:'Poppins',sans-serif;font-size:20px;line-height:1.45;color:#3a3a3a;font-weight:600} /* Byline */ .byline{margin-top:24px;padding:16px 0;border-top:1px solid var(--linha);border-bottom:1px solid var(--linha);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap} .byline-author{display:flex;align-items:center;gap:12px} /* A marca no lugar das iniciais (item 2 do Jose, 13/08). O fundo claro fica porque o simbolo tem cor propria; gradiente atras dele suja o desenho. */ .author-avatar{width:44px;height:44px;border-radius:50%;background:var(--bg);border:1px solid var(--linha);display:block;padding:7px;object-fit:contain;flex-shrink:0} .author-info{font-size:13px;line-height:1.3} .author-info b{display:block;font-weight:800;color:var(--terra);font-size:14px} .author-info span{color:#6E7689} .byline-meta{display:flex;gap:18px;align-items:center;font-size:12px;color:var(--suave);font-weight:600} .byline-meta .material-icons{font-size:15px;margin-right:4px;vertical-align:-2px} /* Cover */ /* A capa esta dentro do
, mas no desktop ela continua DEPOIS do texto: o header vira coluna flex e o order poe cada um no lugar. Sem isso a foto subiria pro topo em toda largura, o que so vale no mobile. */ header.wrap{display:flex;flex-direction:column} header.wrap > .article-masthead{order:1} header.wrap > .article-cover{order:2} .article-cover{margin:32px 0 8px;max-width:1100px;margin-left:auto;margin-right:auto} .article-cover img{width:100%;height:auto;max-height:600px;object-fit:cover;border-radius:6px} .article-cover figcaption{font-size:12.5px;color:#6E7689;margin-top:10px;padding:0 4px;line-height:1.4;font-style:italic} .article-cover figcaption b{font-weight:700;font-style:normal} /* Escondido no DESKTOP de propósito (01/09, pedido do José): o crédito da foto já aparece certo no
logo acima, embaixo da própria imagem. Este parágrafo (`.article-cover-credito`) só existe pra reaparecer na materia imersiva do celular — ver a regra `.pg-materia .article-cover-credito` no media query de 780px, que devolve `display:block`. Sem este `display:none` de base, o parágrafo saía sem estilo nenhum no desktop, duplicando o crédito logo abaixo da linha fina — o "sub sub" que o José reclamou no print da pesquisa-senado. */ .article-cover-credito{display:none} /* === BODY === */ /* Coluna unica desde 13/08: o share-rail saiu do topo (virou fileira no fim da materia, depois do corpo — ver .share-rail abaixo) e a trilha de 60px que existia so pra ele ficou sem uso. Antes disso o grid era 60px+1fr em desktop e so colapsava pra 1 coluna abaixo de 780px; a `.article-body{grid-column:2}` daquela era existia pra pagina sem rail (institucional) nao cair sozinha na trilha errada — com o rail fora do grid pra todo mundo, a trilha extra nem existe mais. */ /* COLUNA REVERTIDA (01/09) — mesma ordem do comentario da D167 em `.article-masthead`, acima. A D160 estreitava esta grade pra 660px atras de `body.pg-leitura`/`pg-materia` (medida de 76 caracteres por linha); sem esse seletor aqui, o corpo volta a herdar os 840px centrados de sempre, na mesma largura do masthead. A capa continua FORA desta grade (`.article-cover`, 1100px) e segue larga. */ .article-grid{max-width:840px;margin:30px auto 0} /* ===== Materia no celular (item 14, referencia do Jose) ===== Foto sangrando na largura toda, e o texto num cartao branco de cantos arredondados logo abaixo. O recuo negativo cancela EXATAMENTE os 20px do .wrap do pai mais os 20px do proprio .wrap da figura, entao ninguem precisa de 100vw (que soma a barra de rolagem e cria rolagem lateral). */ @media(max-width:780px){ header.wrap > .article-cover{order:0} .article-cover{margin:0;padding:0;max-width:none;margin-left:-20px;margin-right:-20px;position:relative} .article-cover img{border-radius:0;max-height:none;aspect-ratio:4/3;height:auto;display:block} /* Credito vira legenda SOBRE a propria foto (pedido do Jose, 13/08 — revoga o "cartao sobe sobre a faixa, nao sobre a foto" de antes): canto superior direito, bem pequena, com scrim escuro atras pra garantir contraste em foto clara ou escura. Continua
no DOM, associada a
— leitor de tela enxerga igual, so a posicao visual mudou. */ .article-cover figcaption{ position:absolute; top:12px; right:12px; max-width:64%; margin:0; padding:5px 10px; font-size:10.5px; line-height:1.35; font-style:normal; text-align:right; color:#fff; background:rgba(15,20,40,.62); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); border-radius:7px; } .article-cover figcaption b{font-weight:700} /* O cartao agora sobe sobre a FOTO (nao sobre uma faixa atras dela — essa faixa saiu junto com o credito). -34px de recuo negativo faz o canto arredondado aparecer visivelmente por cima da imagem. */ .article-masthead{ position:relative; z-index:1; margin:-34px -20px 0; padding:26px 20px 4px; background:#fff; border-radius:18px 18px 0 0; } .article-cat{margin-bottom:14px} .article-headline{font-size:33px;line-height:1.0;letter-spacing:-.04em} .article-dek{margin-top:14px;font-size:17px;line-height:1.5} .byline{margin-top:20px;padding:14px 0;gap:12px} /* Corpo com mais ar: a referencia respira, a nossa media de linha estava apertada. */ .article-body{font-size:16px;line-height:1.6} } /* ===== Materia IMERSIVA no celular (spec do Jose, 14/08) ===== So vale na pagina de MATERIA: o buildPost poe pg-materia no body (cuidado: escrever a tag literal neste comentario ja quebrou o replace uma vez), e guia, ficha, agenda e institucional (que usam este mesmo template, varias sem foto de capa) continuam com o cabecalho normal de cima. A primeira dobra vira foto + noticia: ticker, breadcrumb e billboard do topo saem, e o cabecalho fica so logo + sanduiche, flutuando SOBRE a foto sem ocupar linha propria. */ @media(max-width:780px){ body.pg-materia{background:#F6F7FA} .pg-materia .brand-bar, .pg-materia .top-strip, .pg-materia .navbar, .pg-materia .crumbs, .pg-materia .ad-billboard{display:none} .pg-materia header.main{position:absolute;top:0;left:0;right:0;background:transparent;border-bottom:none;box-shadow:none;z-index:20} /* O hide-on-scroll do header nao faz sentido num cabecalho absoluto: ele ja sai de cena rolando junto com a foto. */ .pg-materia header.main.is-hidden{transform:none} .pg-materia .head{padding:10px 16px;gap:12px} .pg-materia .logo img:first-child{display:none} .pg-materia .logo .logo-negativa{display:block;height:28px} .pg-materia .lang-btn{display:none} .pg-materia .hamburger{background:rgba(10,27,61,.30);border-color:rgba(255,255,255,.38);color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)} /* Selo (i) do credito da foto (pedido do Jose, 14/08 — revoga o badge de canto que existia aqui: credito comprido quebrava em 3-4 linhas sobre a imagem e virava parede). 14px de circulo visual, na QUINA de verdade — nao colado no hamburguer, ancorado em position:absolute no proprio .head (que ja tem position:relative neste breakpoint), com o MESMO right padding do .head, pra ficar rente a borda igual o resto do layout. O alvo de toque real fica maior (44px) via pseudo-elemento invisivel, porque um circulo de 14px sozinho fica pequeno demais pro dedo (regra de alvo minimo, mesma logica do .lang-btn em min-height:44px). So existe na materia (escondido nas outras paginas que usam este template — ver a regra base de .cover-info-pill mais abaixo — e o proprio buildPost remove a tag inteira quando a materia nao tem legenda de capa: nada de selo levando a lugar nenhum). */ .pg-materia .cover-info-pill{ position:absolute;top:50%;right:16px;transform:translateY(-50%); display:inline-flex;align-items:center;justify-content:center; width:14px;height:14px;border-radius:999px;flex-shrink:0; background:rgba(10,27,61,.34);border:1px solid rgba(255,255,255,.42); color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px); text-decoration:none; } .pg-materia .cover-info-pill::before{content:"";position:absolute;inset:-15px} .pg-materia .cover-info-pill .material-icons{font-size:9px} /* A foto abre a pagina na largura toda. O gradiente do topo existe pra logo branca nao sumir em foto clara; nos ~120px finais a imagem perde nitidez (backdrop-filter) e se dissolve no fundo da pagina (mask), em vez de terminar em corte seco. */ .pg-materia .article-cover{margin:0 -20px} /* Altura em svh (D126): o 432px fixo jogava o titulo pra fora da primeira dobra em aparelho baixo. svh nao se mexe com a barra de endereco; o px e a reserva. */ .pg-materia .article-cover img{aspect-ratio:auto;height:432px;height:min(432px,55svh);object-fit:cover} /* O dissolve mora no QUADRO: preso na foto, viajaria junto com a deriva. */ .pg-materia .article-cover{ -webkit-mask-image:linear-gradient(180deg,#000 60%,rgba(0,0,0,.5) 84%,rgba(0,0,0,0) 100%); mask-image:linear-gradient(180deg,#000 60%,rgba(0,0,0,.5) 84%,rgba(0,0,0,0) 100%)} .pg-materia .article-cover::before{content:"";position:absolute;left:0;right:0;top:0;height:120px;background:linear-gradient(180deg,rgba(10,27,61,.52),rgba(10,27,61,0));z-index:1;pointer-events:none} .pg-materia .article-cover::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); -webkit-mask-image:linear-gradient(180deg,transparent,#000 78%);mask-image:linear-gradient(180deg,transparent,#000 78%);pointer-events:none} /* A foto fica limpa: o figcaption original some (o texto dele reaparece, INTEIRO, no .article-cover-credito dentro do cartao branco — ver a regra logo abaixo). */ .pg-materia .article-cover figcaption{display:none} /* Cartao da materia na LARGURA TODA (pedido do Jose, 14/08 — revoga a margem lateral de 16px que existia aqui): em celular pequeno a margem comia coluna de texto. O -20px cancela exatamente o padding do .wrap (nada de 100vw, que soma a barra de rolagem); o canto de 30px continua aparecendo por cima da foto, que a essa altura ja esta desfocada pelo dissolve do ::after. */ /* A capa FICA e o cartao branco sobe por cima dela (D126). O pai delimita o sticky, entao ela desgruda sozinha quando o
acaba. */ .pg-materia header.wrap{position:relative} .pg-materia .article-cover{position:sticky;top:0;z-index:0;overflow:hidden} .pg-materia .article-masthead{position:relative;z-index:2} /* A foto AFASTA dentro do quadro travado, em vez de deslizar: deslizar dava tres velocidades na mesma cena e lia como vidro (D126). A escala nunca desce de 1. */ @media (prefers-reduced-motion: no-preference){ @supports (animation-timeline: scroll()){ .pg-materia .article-cover img{ animation:capa-afasta linear both; animation-timeline:scroll(root block); animation-range:0 400px; } @keyframes capa-afasta{ from{scale:1.22} to{scale:1.05} } /* O logo pousa JUNTO da capa (Jose, 22/08 - opcao A da bancada bora-logo-devagar): o header absoluto de hoje sobe 1:1 com o scroll e some antes da foto. Aqui ele passa a pertencer a cena da capa: preso na tela (fixed = fora do fluxo, CLS zero por construcao) e se dissolve no MESMO trecho de 400px em que a foto assenta (capa-afasta). No fim do trecho, visibility:hidden - nada de logo fantasma clicavel nem reaparecendo por cima do corpo la embaixo, porque corpo e rodape nao criam stacking context. z-index 1 = acima da foto (0), abaixo do cartao branco (2). Fora deste bloco (sem suporte a animation-timeline, ou com movimento reduzido) vale o comportamento de hoje: header absoluto que sai rolando com a pagina. So a materia - a home manchete (D127) tem cena propria e nao muda. */ .pg-materia header.main{ position:fixed; z-index:1; animation:logo-junto-da-capa linear both; animation-timeline:scroll(root block); animation-range:0 400px; } @keyframes logo-junto-da-capa{ from{opacity:1} to{opacity:0;visibility:hidden} } } } .pg-materia .article-masthead{margin:-64px -20px 0;padding:28px 24px 10px;border-radius:30px 30px 0 0;background:#fff;box-shadow:0 -10px 30px rgba(10,27,61,.06)} /* Pilula da editoria comendo espaco demais no celular (pedido do Jose, 14/08): era um retangulo solido de 11px com padding generoso, empurrando o titulo pra baixo. Vira chip glass — fundo bem claro na cor da editoria (nao a cor solida: o texto passa a SER a cor, herdando o mesmo contraste AA ja calibrado contra branco nos --c-* do topo do arquivo) com blur, menor em fonte e em padding. */ .pg-materia .article-cat{gap:6px;padding:4px 10px 4px 8px;font-size:9.5px;letter-spacing:.11em;border-radius:999px;margin-bottom:10px;color:var(--c-cotidiano);background:color-mix(in srgb, var(--c-cotidiano) 10%, #fff);border:1px solid color-mix(in srgb, var(--c-cotidiano) 28%, transparent);-webkit-backdrop-filter:blur(6px) saturate(160%);backdrop-filter:blur(6px) saturate(160%)} .pg-materia .article-cat::before{width:4px;height:4px;background:currentColor} /* Titulo grande demais no celular (pedido do Jose, 14/08 — revoga o clamp de 32-42px): num aparelho comum de 375-414px o 10.5vw batia 39-41px, e um titulo de uma linha virava 6-7 linhas, empurrando o subtitulo pra fora da primeira dobra. Reduzido pra 26-36px; a manchete continua grande, so nao domina a tela toda. */ .pg-materia .article-headline{font-size:clamp(26px,8vw,36px);line-height:1.08} .pg-materia .article-dek{margin-top:14px;font-size:17px;line-height:1.5} /* Credito da foto, discreto, DEPOIS da caixa de autoria (pedido do Jose, 14/08; reposicionado em 01/09 — morava logo apos a linha fina, e ele rejeitou: lia como um "sub sub" interrompendo titulo->linha fina->autoria). So o buildPost escreve este paragrafo, e so quando a materia tem legenda de capa — texto corrido no papel branco quebra a vontade, sem a parede que o credito comprido virava em cima da foto. `display:block` porque a regra base (fora deste media query) esconde este paragrafo no desktop — ver `.article-cover-credito` acima. */ .pg-materia .article-cover-credito{display:block;margin:12px 0 0;font-size:11.5px;line-height:1.45;color:var(--suave);font-style:italic} .pg-materia .article-cover-credito b{font-weight:700;font-style:normal} /* Identidade Bora depois do subtitulo: a autoria vira uma caixa arredondada com o avatar da marca, em vez de duas linhas de fio aberto. */ .pg-materia .byline{margin-top:20px;padding:12px 14px;background:#F6F7FA;border-top:none;border-bottom:none;border-radius:14px;gap:10px} .pg-materia .byline-meta{font-size:11.5px} /* O corpo continua no MESMO papel branco do cartao (mesmos -20px), sem cartao novo: ele so escorre do masthead e fecha embaixo com canto arredondado. */ .pg-materia .article-grid{max-width:none;margin:0 -20px;background:#fff;border-radius:0 0 26px 26px;padding:2px 24px 22px} .pg-materia .article-body{font-size:18px;line-height:1.62} } /* Fileira, nao mais coluna sticky: o rail saiu do topo e foi pro fim da materia (depois do corpo, antes do aviso editorial — pedido do Jose, 13/08). Ninguem compartilha antes de ler; no topo ficou so a linha de tempo de leitura. */ .share-rail{display:flex;flex-direction:row;align-items:center;gap:10px;margin:36px 0 8px;padding-top:28px;border-top:1px solid var(--linha)} .share-rail span.lbl{font-family:'Poppins',sans-serif;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--suave)} /* Os botões de compartilhar NÃO são link de texto: a regra de link do corpo (.article-body a:not(.btn), cor + sublinhado) ganhava por especificidade e pintava o ícone da MESMA cor do fundo de hover — ícone sumia no mouse (José, 14/08, duas vezes). Estas duas regras têm especificidade maior que qualquer regra de link do corpo, de propósito: repouso grafite no branco, hover ícone BRANCO. */ .article-body .share-rail a.share-btn{color:var(--grafite);text-decoration:none;border-bottom:none} .article-body .share-rail a.share-btn:hover{background:var(--azul);color:#fff;border-color:var(--azul)} .share-btn{width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid var(--linha);display:inline-flex;align-items:center;justify-content:center;color:var(--grafite);transition:all .2s} .share-btn:hover{background:var(--azul);color:#fff;border-color:var(--azul)} /* Preferred Sources (Google): so espaçamento — o botão em si é desenhado e traduzido pelo script do Google (motor/render/blocos.mjs, renderPreferredSource), nada aqui redesenha nada. */ .preferred-source-rail{margin:14px 0 8px} .article-body{font-size:18px;line-height:1.6;color:#1a1a1a} .article-body p{margin-bottom:24px} .article-body p strong{color:var(--terra);font-weight:700} /* A capitular e do PRIMEIRO paragrafo da materia, e so dele. Sem o `>` o seletor casava tambem o primeiro

de QUALQUER descendente: o aviso editorial do fim virava "E ssa materia e sobre voce" com um E de 74px flutuando, e a bio do autor virava "S obre o Bora Fronteira". Os dois estavam assim no ar. */ .article-body > p:first-of-type::first-letter{font-family:'Poppins',sans-serif;font-size:74px;font-weight:900;line-height:.85;float:left;color:var(--c-cotidiano);margin:6px 12px 0 0;padding-top:2px} .article-body h2{font-family:'Poppins',sans-serif;font-size:32px;line-height:1.15;color:var(--terra);font-weight:700;margin:42px 0 16px;letter-spacing:-.03em} .article-body h3{font-family:'Poppins',sans-serif;font-size:22px;color:var(--terra);font-weight:700;margin:32px 0 12px} .article-body ul,.article-body ol{margin:0 0 24px 24px} .article-body li{margin-bottom:10px} .article-body a:not(.btn){color:var(--azul);font-weight:600;text-decoration:underline;text-decoration-color:rgba(42,82,212,.35);text-underline-offset:3px} .article-body a:not(.btn):hover{text-decoration-color:var(--azul)} /* Pullquote */ .pullquote{margin:36px 0;padding:24px 28px;background:var(--cinza);border-left:4px solid var(--teal);border-radius:0 8px 8px 0;position:relative} .pullquote::before{content:"\201C";position:absolute;top:-12px;left:14px;font-family:'Poppins',sans-serif;font-size:90px;color:var(--teal);opacity:.3;line-height:1} .pullquote p{font-family:'Poppins',sans-serif;font-size:22px;line-height:1.4;color:var(--terra);font-style:italic;margin-bottom:14px;font-weight:600;letter-spacing:-.01em} .pullquote cite{font-style:normal;font-size:13px;color:#6E7689;font-weight:700;text-transform:uppercase;letter-spacing:.06em} /* Inline image */ .inline-fig{margin:32px 0} .inline-fig img{width:100%;border-radius:6px;height:auto;max-height:480px;object-fit:cover} .inline-fig figcaption{font-size:13px;color:#6E7689;margin-top:10px;line-height:1.4;font-style:italic} /* Video (YouTube) — fachada de clique. O iframe SO nasce depois que o leitor toca: antes disso a pagina nao chama o Google, nao grava cookie de terceiro e nao paga o peso do player. O cartaz e hospedado aqui, como toda imagem do site (nada de hotlink no thumb do YouTube). */ .video-embed{margin:32px 0} .video-embed .video-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:var(--navy,#0A1B3D)} .video-embed[data-vertical="1"] .video-frame{aspect-ratio:9/16;max-width:340px;margin:0 auto} .video-embed .video-frame img,.video-embed .video-frame video{width:100%;height:100%;object-fit:cover;display:block} .video-embed .video-play{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center} .video-embed .video-play::before{content:"";width:84px;height:84px;border-radius:50%;background:rgba(10,27,61,.82);box-shadow:0 6px 26px rgba(0,0,0,.35)} .video-embed .video-play::after{content:"";position:absolute;border-style:solid;border-width:16px 0 16px 27px;border-color:transparent transparent transparent #fff;margin-left:8px} .video-embed .video-play:hover::before{background:rgba(10,27,61,.94)} .video-embed .video-play:focus-visible{outline:3px solid var(--teal,#00807F);outline-offset:3px} .video-embed iframe{width:100%;height:100%;border:0;display:block} .video-embed figcaption{font-size:13px;color:#6E7689;margin-top:10px;line-height:1.4;font-style:italic} .video-embed .video-nota{font-size:12px;color:#6E7689;margin-top:6px;line-height:1.4} /* Ad inline */ .ad-inline{margin:36px 0;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;height:130px} .ad-inline::before{content:"Publicidade";position:absolute;top:-9px;left:14px;background:#fff;padding:0 6px;color:#9099A8;font-size:9px} /* Banner generico (topo) */ .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-billboard{height:280px;margin:28px 0} /* Source / fonte */ .article-source{margin:30px 0;padding:16px 18px;background:var(--bg);border-radius:8px;font-size:13.5px;color:#3a3a3a} .article-source b{color:var(--terra);font-weight:700} /* Tags */ /* Ponte noticia -> guia (regra 8.3). Caixa discreta no fim do corpo. */ .guias-da-materia{margin:28px 0 8px;padding:16px 18px;background:var(--bg);border-left:3px solid transparent;border-image:linear-gradient(180deg,#A4D3BC,#00ABAA) 1;border-radius:0 10px 10px 0} .guias-da-materia h4,.guias-da-materia h3{font-family:'Poppins',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--suave);margin:0 0 8px} .guias-da-materia a{display:block;font-family:'Poppins',sans-serif;font-weight:700;font-size:15.5px;color:var(--teal-tinta);text-decoration:none;padding:3px 0} .guias-da-materia a:hover{text-decoration:underline} .article-tags{display:flex;flex-wrap:wrap;gap:8px;margin:30px 0;padding-top:24px;border-top:1px solid var(--linha)} .tag{display:inline-block;padding:6px 12px;background:#F0F2F6;color:var(--grafite);font-size:12px;font-weight:700;border-radius:999px;text-transform:lowercase;letter-spacing:.02em} .tag:hover{background:var(--azul);color:#fff} /* Caixa "Apoie o Bora Fronteira" / CTA */ .cta-box{margin:32px 0;padding:24px;background:linear-gradient(135deg,#FAF8F2 0%,#F4ECDE 100%);border-radius:10px;border:1px solid #E8E0CE;display:flex;gap:18px;align-items:center;flex-wrap:wrap} .cta-box .cta-icon{width:48px;height:48px;border-radius:50%;background:var(--teal-tinta);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0} .cta-box .cta-icon .material-icons{font-size:24px} .cta-box .cta-text{flex:1;min-width:200px} .cta-box h4,.cta-box h3{font-family:'Poppins',sans-serif;font-size:18px;font-weight:600;color:var(--teal-tinta);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px} .cta-box p{font-size:14.5px;color:var(--terra);line-height:1.4;font-weight:500} /* A caixa de autoria do fim da materia saiu a pedido do Jose (13/08). O CSS dela foi junto: regra orfa em 121 paginas e o proximo que ler o arquivo nao sabe se pode mexer. */ /* Leia também */ .related-section{max-width:1100px;margin:60px auto 80px;padding:0 20px} .section-title{display:flex;align-items:center;gap:10px;margin:0 0 22px} .section-title h2{font-size:18px;line-height:1.2;color:var(--terra);font-weight:800;letter-spacing:-.02em} .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)} .related-grid{display:grid;grid-template-columns:1fr;gap:18px} @media(min-width:680px){ .related-grid{grid-template-columns:repeat(3,1fr)} } .related-card{background:#fff;border:1px solid var(--linha);border-radius:10px;overflow:hidden;box-shadow:var(--sombra);transition:all .2s;display:flex;flex-direction:column} .related-card:hover{transform:translateY(-2px);box-shadow:var(--sombra-hover)} .related-card img{width:100%;height:180px;object-fit:cover} .related-card .body{padding:16px 18px 20px} .related-card .ic{font-family:'Poppins',sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px} .related-card h3{font-family:'Poppins',sans-serif;font-size:18px;font-weight:600;line-height:1.25;color:var(--terra)} .related-card time{display:block;margin-top:8px;font-size:11px;color:var(--suave);text-transform:uppercase;letter-spacing:.06em} /* Foto do "leia tambem" com parallax no scroll (D125), irmao do card da home. */ @media (prefers-reduced-motion: no-preference){ @supports (animation-timeline: view()){ .related-card{view-timeline-name:--foto-card;view-timeline-axis:block} /* Sem quadro proprio aqui: o corpo sobe uma camada e cobre o excedente. */ .related-card .body{position:relative;z-index:1;background:#fff} .related-card 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="fronteira-viva"]{color:var(--c-fronteira-viva)} .ic[data-c="cotidiano"]{color:var(--c-cotidiano)} .ic[data-c="gastronomia"]{color:var(--c-gastronomia)} .ic[data-c="esporte"]{color:var(--c-esporte)} /* Faixa patrocinada */ .sponsored-band{background:linear-gradient(180deg,#FAFAFB 0%,#fff 100%);padding:36px 0 44px;margin:50px 0 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} /* Manifesto: banda navy entre o conteudo e o rodape (mockup do Jose, 14/08). Mesmo desenho do 1-preview-home: chamada institucional do manual (doc 20), "Bora" em Crimson Pro teal (teal/navy 5,99:1) e fio com 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} } /* Footer */ footer{margin-top:0;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}} /* Mosaico de famílias de guia: o hub /guias/ usa o MESMO desenho da home desde 14/08 (pedido do José, identidade única). O CSS vive nos dois templates porque eles são arquivos separados — quem mexer num, mexe no outro. */ /* 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} } /* No hub /guias/ o mosaico não cabe na coluna de leitura: `.guia` tem max-width 760px porque texto longo se lê em 65-75 caracteres, e dentro dela os cards esticam e o título quebra em três linhas. O mosaico escapa da coluna e volta pra largura do site, mantendo o centro — a coluna continua valendo pro texto, que é quem precisa. */ header.wrap > .faixa-guias{ width:min(1240px, 100%); margin:26px auto 8px; } /* Grade da página de família: os guias DA família nos cards da identidade da home. Reusa todo o visual de .faixa-guias, só troca o mosaico de áreas fixas por uma grade uniforme — aqui a quantidade de cards varia por família (1 a 8). */ .faixa-guias.grade-familia{ display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); grid-template-areas:none; height:auto; width:min(1240px, 100%); margin:26px auto 8px; } .faixa-guias.grade-familia .card-familia{grid-area:auto;min-height:0} /* Card LEGÍVEL da página de família (pedido do José, 14/08: "menos gradiente e texto embaixo, tá muito ruim de ler"). A foto fica limpa em cima, com um véu leve da cor só pra segurar o ícone; o título desce pra área branca, em tinta escura, sem sombra de texto. A identidade continua na cor da família (véu, linha, ícone), mas quem manda aqui é a leitura. */ .faixa-guias.grade-familia .caixa-familia{position:relative;height:172px;border-radius:18px 18px 0 0} .faixa-guias.grade-familia .card-familia{background:#fff;border:1px solid var(--linha);border-radius:18px;overflow:hidden;display:flex;flex-direction:column} .faixa-guias.grade-familia img.foto{-webkit-mask-image:none;mask-image:none;object-position:50% 40%} .faixa-guias.grade-familia .fundo-familia{background:color-mix(in srgb, var(--cor-familia) 20%, transparent);z-index:1} .faixa-guias.grade-familia .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.grade-familia .conteudo-familia{position:static;height:auto;flex:1;padding:16px 18px 18px} .faixa-guias.grade-familia .selo-ico-familia{position:absolute;top:14px;left:14px;z-index:2} .faixa-guias.grade-familia .texto-familia{margin-top:0} .faixa-guias.grade-familia .tit-familia{color:var(--terra);text-shadow:none;font-size:19px} .faixa-guias.grade-familia .linha-familia{background:var(--cor-familia)} .faixa-guias.grade-familia .conteudo-familia p{color:var(--grafite)} /* Sombra e hover do card branco (José, 14/08: "sombra muito forte... quando mexe a imagem sai do lugar"). A sombra colorida era do card cheio de cor; no card branco vira mancha. E o hover de escala era na caixa da foto — agora que ela é só o topo, escalar move a imagem sozinha. Aqui: sombra neutra leve, hover só aprofunda a sombra e acende a borda na cor da família. NADA se move. */ .faixa-guias.grade-familia .caixa-familia{box-shadow:none;border-radius:0} .faixa-guias.grade-familia .card-familia{box-shadow:0 6px 16px -12px rgba(15,23,42,.22);transition:box-shadow .3s, border-color .3s} .faixa-guias.grade-familia:hover .card-familia:hover .caixa-familia, .faixa-guias.grade-familia:hover .card-familia:not(:hover) .caixa-familia{transform:none;filter:none;box-shadow:none} .faixa-guias.grade-familia .card-familia:hover{box-shadow:0 14px 28px -14px rgba(15,23,42,.30);border-color:color-mix(in srgb, var(--cor-familia) 45%, var(--linha))} /* Breadcrumb no celular (opção A, 15/08 — a v1 de 14/08 cortava palavra no meio da trilha inteira; o José escolheu entre A/B e A venceu): a trilha completa some e sobra só o ÚLTIMO passo, como link de "voltar" numa pílula com alvo de dedo confortável (44px) — o título logo abaixo (nível 1) já diz onde a pessoa está, a trilha inteira era redundante nesse tamanho de tela. Puro CSS: esconde os elos do meio via nth-last-child, sem tocar nos três renders que emitem .crumbs (guia, matéria, ficha). No desktop a trilha completa continua como estava. */ @media(max-width:780px){ .crumbs{flex-wrap:nowrap;gap:6px;padding:14px 0 6px} .crumbs > a:not(:nth-last-child(3)), .crumbs > .sep:not(:last-of-type){display:none} .crumbs > a:nth-last-child(3){ display:inline-flex;align-items:center;gap:7px;min-height:40px; padding:8px 14px 8px 10px;margin:-8px 0; background:var(--bg,#F6F7FA);border:1px solid var(--linha);border-radius:999px; font-size:13.5px;font-weight:600;text-transform:none;letter-spacing:0; color:var(--teal-tinta,#00ABAA);max-width:none } .crumbs > a:nth-last-child(3)::before{ content:"";width:7px;height:7px;flex-shrink:0; border-left:2px solid currentColor;border-bottom:2px solid currentColor; transform:rotate(45deg) translate(1px,-1px) } .crumbs > span:last-child{display:none} } /* Caixa de serviço: valor nunca vaza (URL longa quebra dentro da caixa), e no celular o par rótulo/valor empilha com o valor à esquerda. */ .serv-box .linha{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid var(--linha);font-size:13.5px} .serv-box .linha .rotulo{color:#6E7689;font-weight:600;flex-shrink:0} .serv-box .linha .valor{color:var(--terra);font-weight:700;text-align:right;min-width:0;overflow-wrap:anywhere} .serv-box .linha .valor a{color:var(--teal-tinta, #00ABAA)} @media(max-width:780px){ .serv-box .linha{flex-direction:column;gap:2px} .serv-box .linha .valor{text-align:left} } /* ====== 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{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. */ 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} }