/* Região personalizável da home: abaixo do banner central e acima do rodapé. */
.pagina-inicial { padding: 12px 0 8px; }
.pagina-inicial-secao { padding-top: 25px; padding-bottom: 6px; }
/* Proporcao unica das imagens de destaque (16/9). Todo bloco com foto grande
   usa esta medida: a altura passa a ser sempre largura / proporcao, entao a
   foto e cortada (object-fit: cover) em vez de esticar ou encolher o bloco. */
.pagina-inicial { --pi-proporcao-destaque: 16 / 9; }
.pi-bloco { min-width: 0; height: 100%; container-type: inline-size; --cor-bloco: var(--vermelho); }
.pi-coluna-blocos { display: flex; min-width: 0; height: 100%; flex-direction: column; gap: 1.5rem; }
.pi-grade-compacta { display: flex; flex-direction: column; gap: 1.5rem; }
.pi-grade-compacta > .pi-item-grade { width: 100%; }
.pi-grade-compacta .pi-coluna-blocos,
.pi-grade-compacta .pi-bloco { height: auto; }
.pi-layout-com-sidebar .pi-coluna-blocos,
.pi-layout-com-sidebar .pi-bloco { height: auto; }
.pi-sidebar-sticky { position: sticky; top: 72px; }

/* Cor de fundo escolhida por bloco no construtor da home. */
.pi-bloco-fundo { padding: 16px; background: var(--pi-fundo); border-radius: 10px; }

/* Bloco full width: rompe a caixa de 1280px e ocupa a tela inteira. O
   --pi-largura-tela e medido por JS porque 100vw conta a barra de rolagem
   e sobraria alguns pixels de rolagem horizontal. */
.pi-bloco-full {
  width: var(--pi-largura-tela, 100vw);
  max-width: none;
  margin-right: calc(50% - var(--pi-largura-tela, 100vw) / 2);
  margin-left: calc(50% - var(--pi-largura-tela, 100vw) / 2);
}
.pi-bloco-full.pi-bloco-fundo { padding-right: 15px; padding-left: 15px; border-radius: 0; }

@media (min-width: 992px) {
  .pi-grade-compacta {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-flow: row;
    column-gap: 1.5rem;
    row-gap: 1rem;
    align-items: start;
  }
  .pi-grade-compacta.pi-grade-pronta { grid-auto-flow: dense; grid-auto-rows: 8px; }
  .pi-grade-compacta > .pi-item-grade { width: auto !important; max-width: none; padding: 0; align-self: start; }
  .pi-grade-compacta > .col-lg-4 { grid-column: span 4; }
  .pi-grade-compacta > .col-lg-6 { grid-column: span 6; }
  .pi-grade-compacta > .col-lg-8 { grid-column: span 8; }
  .pi-grade-compacta > .col-lg-12 { grid-column: span 12; }

  /* Blocos da area de conteudo (8/12) respeitam a largura definida no construtor. */
  .pi-coluna-grade {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    column-gap: 1.5rem;
    row-gap: 1.5rem;
    align-items: start;
  }
  .pi-coluna-grade > .pi-bloco { grid-column: span var(--pi-span, 8); }
}

/* Cabecalho do bloco: titulo grande na cor da editoria com um traco da
   mesma cor logo abaixo dele. A linha fina e clara segue ate a ponta
   direita, ligando o titulo ao botao "Ver todas". */
.pi-titulo { position: relative; display: flex; min-width: 0; align-items: flex-end; flex-wrap: wrap; gap: 0 12px; margin-bottom: 19px; border-bottom: 1px solid var(--borda); }
.pi-titulo h2 { position: relative; min-width: 0; margin: 0; padding: 0 18px 10px 0; color: var(--cor-bloco); font-family: var(--fonte-titulo); font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; overflow-wrap: anywhere; }
/* O traco cobre so a largura do titulo e fica por cima da linha clara. */
.pi-titulo h2::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 3px; content: ''; background: var(--cor-bloco); }
.pi-titulo a { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 7px; margin-bottom: 9px; margin-left: auto; padding: 6px 14px; color: var(--cor-bloco); border: 1.5px solid var(--cor-bloco); border-radius: 999px; font-family: var(--fonte-menu); font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; transition: color .2s, background .2s; }
.pi-titulo a:hover { color: #fff; background: var(--cor-bloco); }
.pi-titulo a i { font-size: .62rem; transition: transform .2s; }.pi-titulo a:hover i { transform: translateX(3px); }

/* Cabecalho com a arte da editoria (categoria.imagem_topo_bloco): a arte
   entra no lugar do titulo escrito, encostada na esquerda do bloco, e a
   linha fina sai de cena. Na outra ponta fica o "Ver todas" discreto, sem
   a pilula contornada. */
.pi-titulo-arte { align-items: flex-end; gap: 8px 12px; margin-bottom: 17px; border-bottom: 0; }
/* height: auto vence o atributo height do <img>: a arte aparece na propria
   proporcao, so limitada pela largura do bloco e pelo teto de altura. */
.pi-titulo-imagem { display: block; width: auto; height: auto; max-width: 100%; max-height: 78px; object-fit: contain; }
.pi-titulo-arte a { margin: 0 0 4px auto; padding: 0; color: var(--cinza-fraco, #7c8792); border: 0; border-radius: 0; font-size: .66rem; font-weight: 700; letter-spacing: .05em; transition: color .2s; }
.pi-titulo-arte a:hover { color: var(--cor-bloco); background: transparent; }

/* Uma materia pode carregar mais de uma etiqueta (as subcategorias dela),
   entao elas vivem dentro de um agrupador que quebra linha quando falta
   espaco. Cada etiqueta pinta na cor da propria editoria. */
.pi-categorias { display: flex; min-width: 0; flex-wrap: wrap; gap: 5px; }
.pi-categoria { display: inline-flex; width: max-content; max-width: 100%; align-items: center; padding: 4px 9px; overflow: hidden; color: #fff; background: var(--cor-bloco); border-radius: 4px; font-size: .64rem; font-weight: 800; letter-spacing: .055em; line-height: 1.2; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.pi-noticia-imagem { position: relative; display: block; overflow: hidden; background-color: var(--skeleton-base); border-radius: 9px; }
.pi-noticia-imagem img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.2,.7,.2,1), filter .3s; }
.pi-noticia-imagem:hover img, .pi-noticia-card:hover img { transform: scale(1.055); filter: saturate(1.08); }

/* Notícias em destaque + lista */
.pi-destaque-lista { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(220px, .85fr); gap: 21px; }
.pi-noticia-destaque { min-width: 0; }
.pi-noticia-destaque .pi-noticia-imagem { height: auto; aspect-ratio: var(--pi-proporcao-destaque); box-shadow: 0 10px 27px rgba(14,25,38,.11); }
.pi-noticia-sombra { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,13,20,.02) 20%, rgba(6,13,20,.9) 100%); }
.pi-noticia-conteudo { position: absolute; z-index: 1; right: 22px; bottom: 22px; left: 22px; color: #fff; }
.pi-noticia-conteudo time { display: block; margin: 9px 0 6px; color: rgba(255,255,255,.78); font-size: .7rem; font-weight: 600; }
.pi-noticia-conteudo h3 { display: -webkit-box; margin: 0; overflow: hidden; color: #fff; font-size: clamp(1.18rem, 2.1vw, 1.7rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.2; text-shadow: 0 2px 13px rgba(0,0,0,.3); transition: color .2s; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
/* Igual aos demais estilos: ao passar o mouse o titulo assume a cor da categoria. */
.pi-noticia-destaque:hover .pi-noticia-conteudo h3 { color: var(--cor-bloco); }

/* Notícia em destaque com lista vertical abaixo */
.pi-destaque-vertical { display: flex; min-width: 0; flex-direction: column; }
.pi-destaque-vertical .pi-noticia-destaque { width: 100%; }
.pi-lista-vertical { margin-top: 8px; }
.pi-lista-vertical .pi-noticia-linha { gap: 15px; padding: 14px 0; }
.pi-lista-vertical .pi-noticia-linha:first-child { padding-top: 14px; }
.pi-lista-vertical .pi-noticia-linha > img { width: 150px; height: 95px; flex-basis: 150px; }
.pi-lista-vertical .pi-noticia-linha strong { font-size: .96rem; -webkit-line-clamp: 3; }
.pi-lista-vertical .pi-noticia-linha time { margin-bottom: 6px; }

.pi-noticias-lista { display: flex; flex-direction: column; }
.pi-noticia-linha { display: flex; min-width: 0; gap: 11px; padding: 11px 0; color: var(--azul-escuro); border-bottom: 1px solid var(--borda); }
.pi-noticia-linha:first-child { padding-top: 0; }.pi-noticia-linha:last-child { border-bottom: 0; }
.pi-noticia-linha > img { width: 92px; height: 66px; flex: 0 0 92px; object-fit: cover; border-radius: 6px; transition: transform .25s, box-shadow .25s; }
.pi-noticia-linha > span { display: flex; min-width: 0; flex-direction: column; justify-content: center; }
.pi-noticia-linha strong { display: -webkit-box; overflow: hidden; font-size: .85rem; font-weight: 750; line-height: 1.3; transition: color .2s; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.pi-noticia-linha time { order: -1; margin-bottom: 4px; color: #8b96a2; font-size: .65rem; }.pi-noticia-linha:hover { color: var(--cor-bloco); }.pi-noticia-linha:hover img { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0,0,0,.13); }

/* Grade de notícias
   O numero de colunas acompanha a largura real do bloco: 12/12 (~1280px)
   chega a 5 cartoes por linha, 8/12 fica em 3 e 6/12 (~630px) cai para 2
   pelas regras de max-width mais abaixo. */
.pi-noticias-grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 18px; }
@container (min-width: 1000px) { .pi-noticias-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container (min-width: 1180px) {
  .pi-noticias-grade { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px 16px; }
  /* Cartao mais estreito: o titulo desce um ponto para nao virar uma coluna
     de palavras quebradas. */
  .pi-noticias-grade .pi-noticia-card h3 { font-size: .9rem; }
}
.pi-noticia-card .pi-noticia-imagem { aspect-ratio: 16 / 10; margin-bottom: 10px; }
.pi-noticia-card .pi-categorias { position: absolute; right: 10px; bottom: 10px; left: 10px; }
.pi-noticia-card time { display: block; margin-bottom: 5px; color: #8a949f; font-size: .67rem; }
.pi-noticia-card h3 { margin: 0; font-size: .97rem; font-weight: 780; line-height: 1.35; }.pi-noticia-card h3 a { color: var(--azul-escuro); }.pi-noticia-card:hover h3 a { color: var(--cor-bloco); }

/* Lista ampla */
.pi-lista-ampla .pi-noticia-linha { gap: 16px; padding: 14px 0; }
.pi-lista-ampla .pi-noticia-linha:first-child { padding-top: 0; }
.pi-lista-ampla .pi-noticia-linha > img { width: 155px; height: 100px; flex-basis: 155px; }
.pi-lista-ampla .pi-noticia-linha .pi-categorias { margin-bottom: 6px; }
.pi-lista-ampla .pi-noticia-linha .pi-categoria { font-size: .57rem; }
.pi-lista-ampla .pi-noticia-linha strong { font-size: 1rem; -webkit-line-clamp: 2; }
.pi-lista-ampla .pi-noticia-linha small { display: -webkit-box; margin-top: 4px; overflow: hidden; color: var(--cinza-fraco); font-size: .75rem; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.pi-lista-ampla .pi-noticia-linha time { order: initial; margin: 5px 0 0; }

/* ---------------------------------------------------------------------------
   Estilos premium (mosaico, capas, carrossel, manchete e plantao).
   Todos vivem sob a propria classe raiz para nao interferir nos estilos
   classicos, e respondem ao container do bloco (4/12, 6/12, 8/12, 12/12).
--------------------------------------------------------------------------- */

/* Cartao de capa: base compartilhada por mosaico, capas e carrossel. */
.pi-capa { position: relative; min-width: 0; }
.pi-capa .pi-noticia-imagem { height: 100%; box-shadow: 0 9px 24px rgba(14,25,38,.13); }
.pi-capa .pi-noticia-sombra { background: linear-gradient(180deg, rgba(6,13,20,0) 32%, rgba(6,13,20,.88) 100%); transition: opacity .3s; }
.pi-capa .pi-noticia-conteudo { right: 15px; bottom: 14px; left: 15px; }
.pi-capa .pi-noticia-conteudo time { margin: 7px 0 5px; font-size: .66rem; }
.pi-capa .pi-noticia-conteudo h3 { font-size: .97rem; font-weight: 800; letter-spacing: -.012em; line-height: 1.28; -webkit-line-clamp: 3; }
.pi-capa .pi-categoria { padding: 3px 8px; font-size: .58rem; }
.pi-capa:hover .pi-noticia-conteudo h3 { color: var(--cor-bloco); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Mosaico: uma capa grande e as demais ao redor, como as vitrines dos portais. */
.pi-mosaico { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 15px; }
.pi-mosaico > .pi-capa { grid-column: span 2; }
/* height: auto vence o height: 100% da base: sem isso, quando a coluna do
   bloco estica para acompanhar o bloco vizinho, a altura vira definida e a
   proporcao declarada e ignorada (a foto cresce e desalinha a home). */
.pi-mosaico > .pi-capa .pi-noticia-imagem { height: auto; aspect-ratio: 16 / 11; }
.pi-mosaico > .pi-capa:first-child { grid-column: span 4; grid-row: span 2; }
.pi-mosaico > .pi-capa:first-child .pi-noticia-imagem { aspect-ratio: auto; min-height: 340px; }
.pi-mosaico > .pi-capa:first-child .pi-noticia-conteudo { right: 22px; bottom: 20px; left: 22px; }
.pi-mosaico > .pi-capa:first-child .pi-noticia-conteudo h3 { font-size: clamp(1.15rem, 2.1vw, 1.6rem); -webkit-line-clamp: 3; }
.pi-mosaico > .pi-capa:first-child .pi-categoria { padding: 4px 9px; font-size: .64rem; }

/* Capas: cartazes verticais que se acomodam sozinhos em qualquer largura. */
.pi-capas { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); gap: 16px; }
.pi-capas > .pi-capa .pi-noticia-imagem { height: auto; aspect-ratio: 3 / 4; }

/* Carrossel: rolagem horizontal com encaixe, sem biblioteca externa. */
.pi-carrossel { position: relative; }
.pi-carrossel-trilho { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 32px) / 3); gap: 16px; padding: 4px 2px 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.pi-carrossel-trilho::-webkit-scrollbar { display: none; }
.pi-carrossel-trilho > .pi-capa { scroll-snap-align: start; }
.pi-carrossel-trilho > .pi-capa .pi-noticia-imagem { height: auto; aspect-ratio: 4 / 5; }
.pi-carrossel-seta { position: absolute; top: 50%; z-index: 2; display: flex; width: 40px; height: 40px; align-items: center; justify-content: center; padding: 0; color: var(--cor-bloco); background: #fff; border: 1px solid var(--borda); border-radius: 50%; box-shadow: 0 6px 16px rgba(15,29,43,.16); cursor: pointer; transform: translateY(-50%); transition: opacity .2s, background .2s, color .2s; }
.pi-carrossel-seta:hover { color: #fff; background: var(--cor-bloco); border-color: var(--cor-bloco); }
.pi-carrossel-anterior { left: -6px; }
.pi-carrossel-proximo { right: -6px; }
.pi-carrossel-fixo .pi-carrossel-seta,
.pi-carrossel-inicio .pi-carrossel-anterior,
.pi-carrossel-fim .pi-carrossel-proximo { opacity: 0; pointer-events: none; }

/* Manchete: chamada principal em duas colunas e desdobramentos com filete. */
.pi-manchete-principal { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.pi-manchete-principal .pi-noticia-imagem { aspect-ratio: var(--pi-proporcao-destaque); box-shadow: 0 10px 26px rgba(14,25,38,.12); }
.pi-manchete-texto { min-width: 0; }
.pi-manchete-texto h3 { margin: 11px 0 0; font-size: clamp(1.2rem, 2.3vw, 1.8rem); font-weight: 850; letter-spacing: -.03em; line-height: 1.16; }
.pi-manchete-texto h3 a { color: var(--azul-escuro); }
.pi-manchete-principal:hover h3 a { color: var(--cor-bloco); }
.pi-manchete-texto p { display: -webkit-box; margin: 10px 0 0; overflow: hidden; color: var(--cinza-fraco); font-size: .86rem; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.pi-manchete-texto time { display: block; margin-top: 11px; color: #8a949f; font-size: .68rem; font-weight: 600; }
.pi-manchete-colunas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 20px; padding-top: 20px; border-top: 2px solid var(--borda); column-gap: 0; row-gap: 20px; }
.pi-manchete-colunas > article { min-width: 0; padding: 0 18px; border-left: 1px solid var(--borda); }
.pi-manchete-colunas > article:nth-child(3n+1) { padding-left: 0; border-left: 0; }
.pi-manchete-colunas > article:nth-child(3n) { padding-right: 0; }
.pi-manchete-colunas .pi-noticia-imagem { aspect-ratio: 16 / 10; margin-bottom: 9px; }
.pi-manchete-colunas h4 { display: -webkit-box; margin: 0; overflow: hidden; font-size: .9rem; font-weight: 780; line-height: 1.32; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.pi-manchete-colunas h4 a { color: var(--azul-escuro); }
.pi-manchete-colunas > article:hover h4 a { color: var(--cor-bloco); }
.pi-manchete-colunas time { display: block; margin-top: 6px; color: #8a949f; font-size: .66rem; }

/* Plantao: linha do tempo das ultimas horas, ideal para colunas estreitas. */
.pi-plantao { position: relative; padding: 4px 0; }
.pi-plantao::before { position: absolute; top: 14px; bottom: 14px; left: 49px; width: 2px; content: ''; background: var(--borda); border-radius: 2px; }
.pi-plantao-item { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start; gap: 22px; padding: 11px 0; color: var(--azul-escuro); }
.pi-plantao-hora { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.pi-plantao-hora b { color: var(--cor-bloco); font-size: .82rem; font-weight: 850; letter-spacing: -.02em; }
.pi-plantao-hora small { margin-top: 2px; color: #9aa3ad; font-size: .6rem; font-weight: 600; }
.pi-plantao-item::before { position: absolute; top: 15px; left: 44px; z-index: 1; width: 8px; height: 8px; content: ''; background: #fff; border: 2px solid var(--cor-bloco); border-radius: 50%; transition: transform .2s, background .2s; }
.pi-plantao-texto { display: flex; min-width: 0; flex-direction: column; }
.pi-plantao-texto small { margin-bottom: 3px; color: var(--cor-bloco); font-size: .59rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.pi-plantao-texto strong { display: -webkit-box; overflow: hidden; font-size: .88rem; font-weight: 750; line-height: 1.34; transition: color .2s; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.pi-plantao-item:hover { color: var(--cor-bloco); }
.pi-plantao-item:hover::before { background: var(--cor-bloco); transform: scale(1.25); }

/* Ranking */
.pi-ranking { height: 100%; padding: 18px 19px 9px; background: #fff; border: 1px solid var(--borda); border-top: 4px solid var(--cor-bloco); border-radius: 10px; box-shadow: 0 7px 22px rgba(15,29,43,.06); }
.pi-ranking .pi-titulo { margin-bottom: 5px; }.pi-ranking-item { display: flex; gap: 13px; align-items: center; padding: 14px 2px; color: var(--azul-escuro); border-bottom: 1px solid var(--borda); }.pi-ranking-item:last-child { border-bottom: 0; }
.pi-ranking-numero { width: 38px; flex: 0 0 38px; color: transparent; font-size: 1.75rem; font-weight: 900; line-height: 1; -webkit-text-stroke: 1.5px var(--cor-bloco); transition: color .2s, transform .2s; }
.pi-ranking-item > span:last-child { display: flex; min-width: 0; flex-direction: column; }.pi-ranking-item strong { display: -webkit-box; overflow: hidden; font-size: .82rem; font-weight: 750; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }.pi-ranking-item small { margin-top: 5px; color: #99a2ab; font-size: .65rem; }
.pi-ranking-item:hover { color: var(--cor-bloco); }.pi-ranking-item:hover .pi-ranking-numero { color: var(--cor-bloco); transform: translateX(3px); }

/* Banners */
.pi-banner { display: block; width: 100%; max-width: 100%; height: auto; min-height: 0; text-align: center; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.pi-banner .carousel-inner, .pi-banner .carousel-item { width: 100%; height: auto; }.pi-banner .carousel-item { text-align: center; }
.pi-banner img { display: block; width: auto; height: auto; max-width: 100%; margin: 0 auto; background: transparent; border: 0; box-shadow: none; transition: transform .3s; }.pi-banner a:hover img { transform: scale(1.01); }
.pi-banner-central { max-width: 100%; margin: 0 auto; }
.pi-banner-topo, .pi-banner-bloco_banner_1, .pi-banner-bloco_banner_2 { max-width: 100%; margin: 0 auto; }
.pi-banner-sidebar { display: flex; width: 100%; max-width: 100%; min-height: 0; flex-direction: column; gap: 18px; margin: 0 auto; overflow: visible; background: transparent; border: 0; border-radius: 0; }
.pi-banner-sidebar-item { display: flex; width: 100%; align-items: center; justify-content: center; background: transparent; border: 0; box-shadow: none; }
.pi-banner-sidebar-item img { width: auto; height: auto; max-width: 100%; max-height: none; object-fit: contain; object-position: center; }
.pi-banner-sidebar a:hover img { transform: none; }

/* Clima */
.pi-clima { position: relative; height: 100%; min-height: 310px; overflow: hidden; padding: 20px; color: #fff; background: linear-gradient(145deg, #289be8, #0a477d); background: linear-gradient(145deg, color-mix(in srgb, var(--cor-bloco) 88%, #168ce2), color-mix(in srgb, var(--cor-bloco) 68%, #0a477d)); border-radius: 12px; box-shadow: 0 12px 28px rgba(10,71,125,.2); box-shadow: 0 12px 28px color-mix(in srgb, var(--cor-bloco) 24%, transparent); }
.pi-clima::before { position: absolute; top: -65px; right: -45px; width: 175px; height: 175px; content: ''; background: rgba(255,255,255,.09); border-radius: 50%; }
.pi-clima-topo { position: relative; z-index: 1; display: flex; justify-content: space-between; font-size: .82rem; font-weight: 800; text-transform: uppercase; }.pi-clima-topo i { opacity: .75; }
.pi-clima-atual { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 20px; padding: 23px 0 10px; }.pi-clima-icone { min-width: 65px; color: #fff; font-size: 4.2rem; filter: drop-shadow(0 5px 12px rgba(0,0,0,.1)); }.pi-clima-atual > div { display: flex; flex-direction: column; }.pi-clima-temperatura { font-size: 3rem; font-weight: 800; letter-spacing: -.07em; line-height: .95; }.pi-clima-descricao { margin-top: 7px; font-size: .75rem; opacity: .84; }
.pi-clima h3 { position: relative; z-index: 1; margin: 4px 0 7px; text-align: center; color: #fff; font-size: 1.35rem; font-weight: 800; }.pi-clima-detalhes { position: relative; z-index: 1; display: flex; justify-content: center; gap: 19px; margin-bottom: 18px; font-size: .68rem; }.pi-clima-detalhes b { font-weight: 650; }
.pi-clima-dias { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.22); }.pi-clima-dias > span { display: flex; min-width: 0; flex-direction: column; align-items: center; gap: 5px; }.pi-clima-dias b { font-size: .63rem; text-transform: uppercase; }.pi-clima-dias i { font-size: 1rem; }.pi-clima-dias small { font-size: .63rem; font-weight: 700; white-space: nowrap; }.pi-clima-dias em { font-style: normal; opacity: .62; }.pi-clima-erro { position: relative; z-index: 1; display: block; margin-top: 10px; text-align: center; color: rgba(255,255,255,.8); }

/* Os componentes respondem ao espaco real do bloco (4/12, 6/12, 8/12,
   12/12 ou sidebar), e nao apenas a largura total da janela. */
@container (max-width: 739px) {
  .pi-destaque-lista { grid-template-columns: 1fr; }
  .pi-noticias-lista:not(.pi-lista-ampla):not(.pi-lista-vertical) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
  .pi-noticias-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pi-lista-vertical .pi-noticia-linha > img { width: 125px; height: 85px; flex-basis: 125px; }
  .pi-lista-ampla .pi-noticia-linha > img { width: 125px; height: 85px; flex-basis: 125px; }
  .pi-lista-ampla .pi-noticia-linha small { display: none; }

  .pi-mosaico { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pi-mosaico > .pi-capa:first-child { grid-column: span 4; grid-row: span 1; }
  .pi-mosaico > .pi-capa:first-child .pi-noticia-imagem { aspect-ratio: 16 / 10; min-height: 0; }
  .pi-capas { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .pi-carrossel-trilho { grid-auto-columns: calc((100% - 16px) / 2); }
  .pi-manchete-principal { grid-template-columns: 1fr; gap: 14px; }
  .pi-manchete-texto h3 { margin-top: 0; }
  .pi-manchete-colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pi-manchete-colunas > article:nth-child(3n+1) { padding-left: 18px; border-left: 1px solid var(--borda); }
  .pi-manchete-colunas > article:nth-child(3n) { padding-right: 18px; }
  .pi-manchete-colunas > article:nth-child(2n+1) { padding-left: 0; border-left: 0; }
  .pi-manchete-colunas > article:nth-child(2n) { padding-right: 0; }
}

@container (max-width: 519px) {
  .pi-titulo h2 { font-size: 1.28rem; }
  .pi-titulo a { padding: 5px 12px; font-size: .66rem; }
  .pi-titulo-arte a { padding: 0; font-size: .64rem; }
  .pi-titulo-imagem { max-height: 62px; }
  .pi-noticia-conteudo { right: 16px; bottom: 16px; left: 16px; }
  .pi-noticias-lista:not(.pi-lista-ampla):not(.pi-lista-vertical) { display: flex; }
  .pi-noticias-grade { grid-template-columns: 1fr; }
  .pi-lista-ampla .pi-noticia-linha { gap: 11px; padding: 11px 0; }
  .pi-lista-vertical .pi-noticia-linha { gap: 11px; padding: 11px 0; }
  .pi-lista-vertical .pi-noticia-linha:first-child { padding-top: 11px; }
  .pi-lista-vertical .pi-noticia-linha > img { width: 105px; height: 75px; flex-basis: 105px; }
  .pi-lista-vertical .pi-noticia-linha strong { font-size: .87rem; }
  .pi-lista-ampla .pi-noticia-linha > img { width: 105px; height: 75px; flex-basis: 105px; }
  .pi-lista-ampla .pi-noticia-linha strong { font-size: .87rem; }
  .pi-ranking { padding-right: 14px; padding-left: 14px; }
  .pi-clima { min-height: 295px; padding: 18px 15px; }

  .pi-mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .pi-mosaico > .pi-capa { grid-column: span 1; }
  .pi-mosaico > .pi-capa:first-child { grid-column: span 2; }
  .pi-capa .pi-noticia-conteudo h3 { font-size: .88rem; -webkit-line-clamp: 2; }
  .pi-capas { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: 12px; }
  .pi-carrossel-trilho { grid-auto-columns: 78%; }
  .pi-carrossel-anterior { left: 4px; }
  .pi-carrossel-proximo { right: 4px; }
  .pi-manchete-colunas { grid-template-columns: 1fr; row-gap: 0; }
  .pi-manchete-colunas > article { display: grid; grid-template-columns: 118px minmax(0, 1fr); align-content: center; gap: 0 12px; padding: 12px 0 !important; border-left: 0 !important; border-bottom: 1px solid var(--borda); }
  .pi-manchete-colunas > article:last-child { border-bottom: 0; }
  .pi-manchete-colunas .pi-noticia-imagem { grid-row: span 2; align-self: center; margin-bottom: 0; }
  .pi-manchete-colunas h4 { align-self: end; }
  .pi-manchete-colunas time { align-self: start; margin-top: 5px; }
  .pi-plantao-item { gap: 16px; }
}

@container (max-width: 359px) {
  .pi-titulo h2 { padding-right: 14px; font-size: 1.12rem; }
  .pi-titulo a { padding: 4px 11px; font-size: .62rem; }
  .pi-titulo-arte a { padding: 0; font-size: .6rem; }
  .pi-titulo-imagem { max-height: 52px; }
  .pi-noticia-linha > img,
  .pi-lista-vertical .pi-noticia-linha > img,
  .pi-lista-ampla .pi-noticia-linha > img { width: 88px; height: 66px; flex-basis: 88px; }
  .pi-ranking-numero { width: 31px; flex-basis: 31px; font-size: 1.5rem; }
  .pi-clima-atual { gap: 12px; }
  .pi-clima-icone { min-width: 54px; font-size: 3.5rem; }
  .pi-clima-temperatura { font-size: 2.6rem; }
  .pi-clima-detalhes { gap: 12px; }
  .pi-clima-dias { gap: 2px; }
  .pi-clima-dias small { font-size: .58rem; }

  .pi-mosaico { grid-template-columns: 1fr; }
  .pi-mosaico > .pi-capa,
  .pi-mosaico > .pi-capa:first-child { grid-column: span 1; }
  .pi-capas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pi-carrossel-trilho { grid-auto-columns: 88%; }
  .pi-manchete-colunas > article { grid-template-columns: 96px minmax(0, 1fr); }
  .pi-plantao::before { left: 41px; }
  .pi-plantao-item { grid-template-columns: 36px minmax(0, 1fr); gap: 14px; }
  .pi-plantao-item::before { left: 36px; }
  .pi-plantao-hora b { font-size: .76rem; }
}

@media (max-width: 991px) { .pagina-inicial-secao { padding-top: 22px; }.pi-sidebar-sticky { position: static; } }
@media (max-width: 575px) { .pagina-inicial { padding-top: 4px; }.pagina-inicial-secao { padding-top: 20px; } }