/* 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): a largura do construtor e fracao do
     proprio conteudo, numa grade de 12 (4 = 1/3, 6 = 1/2, 8 = 2/3, 12 = tudo). */
  .pi-coluna-grade {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 1.5rem;
    row-gap: 1.5rem;
    /* stretch (07/11/2026): blocos lado a lado ficam com a mesma altura. */
    align-items: stretch;
  }
  .pi-coluna-grade > .pi-bloco { grid-column: span var(--pi-span, 12); }

  /* Blocos de noticias lado a lado: alem do bloco, os cards tambem esticam
     ate a altura da linha (o .pi-card ja tem height: 100%). Vale na grade
     do conteudo com sidebar e no modo "Grade por linhas"; o modo "Colunas
     compactas" (masonry) continua com a altura de cada um. */
  .pi-coluna-grade > .pi-bloco-noticias,
  .pi-modo-linhas .row > .pi-item-grade > .pi-coluna-blocos > .pi-bloco-noticias { display: flex; flex-direction: column; }
  .pi-coluna-grade > .pi-bloco-noticias > .pi-cards,
  .pi-modo-linhas .row > .pi-item-grade > .pi-coluna-blocos > .pi-bloco-noticias > .pi-cards { flex: 1 1 auto; }
}

/* Cabecalho do bloco: icone + titulo em caixa alta na cor da editoria. A
   linha fina e clara segue ate a ponta direita, ligando o titulo ao botao
   "Ver todas", com um traco inclinado da cor do bloco sobre ela. */
.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 12px 0; color: var(--cor-bloco); font-family: var(--fonte-titulo); font-size: 1.32rem; font-weight: 800; letter-spacing: .02em; line-height: 1.15; text-transform: uppercase; overflow-wrap: anywhere; }
/* Traco curto e inclinado (paralelogramo) centrado na linha clara. */
.pi-titulo h2::after { position: absolute; bottom: -3px; left: 4px; width: 46px; height: 5px; content: ''; background: var(--cor-bloco); transform: skewX(-28deg); }
.pi-titulo h2.pi-titulo-com-icone { display: flex; align-items: center; gap: 12px; }
/* Icone da editoria: selo em degrade da cor do bloco (claro em cima,
   escuro embaixo), brilho interno, sombra colorida e um halo suave.
   O fundo chapado vem antes para navegadores sem color-mix(). */
.pi-titulo-icone { position: relative; display: grid; width: 38px; height: 38px; flex: 0 0 38px; overflow: hidden; color: #fff; background: var(--cor-bloco); background: linear-gradient(150deg, color-mix(in srgb, var(--cor-bloco) 72%, #fff) 0%, var(--cor-bloco) 48%, color-mix(in srgb, var(--cor-bloco) 72%, #000) 100%); border-radius: 11px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), inset 0 -2px 0 rgba(0, 0, 0, .18), 0 6px 14px -5px color-mix(in srgb, var(--cor-bloco) 75%, transparent), 0 0 0 3px color-mix(in srgb, var(--cor-bloco) 13%, transparent); font-size: 1rem; place-items: center; }
/* Reflexo na metade de cima, como uma peca esmaltada. */
.pi-titulo-icone::before { position: absolute; top: 0; right: 0; left: 0; height: 50%; content: ''; background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0)); pointer-events: none; }
.pi-titulo-icone i { position: relative; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .25)); }
.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; }

/* =====================================================================
   CARD DE NOTICIA (includes/site/card_noticia.php)
   Base de TODOS os estilos de bloco de noticias: fundo branco, cantos
   arredondados, cabecalho com o quadrado da editoria (icone branco sobre
   a cor dela) e o nome, foto, data, titulo e resumo.
   --cor-card: cor da editoria do card, escrita pelo PHP.
   ===================================================================== */
.pi-card {
  --cor-card: var(--cor-bloco);
  min-width: 0;
  height: 100%;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .06);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 26px -16px rgba(15, 23, 42, .28);
  transition: transform .35s cubic-bezier(.22, .75, .18, 1), box-shadow .35s;
}
.pi-card:hover {
  box-shadow: 0 2px 4px rgba(15, 23, 42, .05), 0 22px 40px -18px rgba(15, 23, 42, .38);
  transform: translateY(-4px);
}

.pi-card-link {
  display: flex;
  height: 100%;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  color: inherit;
}
.pi-card-link:hover { color: inherit; }
.pi-card-link:focus-visible { outline: 2px solid var(--cor-card); outline-offset: 3px; border-radius: 16px; }

/* Cabecalho: quadrado da editoria + nome. */
.pi-card-editoria { grid-area: editoria; display: flex; min-width: 0; align-items: center; gap: 10px; }
.pi-card-icone {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  color: #fff;
  background: var(--cor-card);
  border-radius: 9px;
  box-shadow: 0 6px 14px -6px var(--cor-card), inset 0 -2px 0 rgba(0, 0, 0, .12);
  font-size: .9rem;
  place-items: center;
  transition: transform .35s cubic-bezier(.22, .75, .18, 1);
}
.pi-card:hover .pi-card-icone { transform: rotate(-6deg) scale(1.06); }
.pi-card-categoria {
  min-width: 0;
  overflow: hidden;
  color: #1f2733;
  font-family: var(--fonte-menu);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Foto: moldura arredondada com o esqueleto cinza enquanto carrega. */
.pi-card-foto {
  grid-area: foto;
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background-color: var(--skeleton-base);
  border-radius: 12px;
}
.pi-card-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1), filter .3s;
}
.pi-card:hover .pi-card-foto img { filter: saturate(1.08); transform: scale(1.05); }

.pi-card-corpo { grid-area: corpo; display: flex; min-width: 0; flex-direction: column; gap: 6px; }
.pi-card-corpo time { color: #8a94a3; font-size: .72rem; font-weight: 600; }
.pi-card-corpo time i { margin-right: 2px; color: var(--cor-card); }
.pi-card-titulo {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: #111827;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.3;
  transition: color .2s;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.pi-card:hover .pi-card-titulo { color: var(--cor-bloco); }
.pi-card-resumo {
  display: -webkit-box;
  overflow: hidden;
  color: #6b7280;
  font-size: .86rem;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* ---------------- variantes ---------------- */

/* Grade: sem resumo e sem cabecalho; a editoria vira um selo no topo da
   foto, com a cor dela de fundo. */
.pi-card-selo { position: absolute; top: 10px; left: 10px; z-index: 1; max-width: calc(100% - 20px); overflow: hidden; padding: 5px 10px; color: #fff; background: var(--cor-card); border-radius: 6px; box-shadow: 0 3px 10px rgba(0, 0, 0, .22); font-family: var(--fonte-menu); font-size: .66rem; font-weight: 800; letter-spacing: .07em; line-height: 1.2; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }

/* Destaque: a manchete do bloco. */
.pi-card-destaque .pi-card-link { gap: 14px; padding: 16px; }
.pi-card-destaque .pi-card-foto { aspect-ratio: 16 / 9; border-radius: 14px; }
.pi-card-destaque .pi-card-titulo { font-size: clamp(1.15rem, 2vw, 1.55rem); letter-spacing: -.02em; line-height: 1.22; }
.pi-card-destaque .pi-card-resumo { font-size: .92rem; }

/* Horizontal e compacto: cabecalho em cima, foto a esquerda do texto. */
.pi-card-horizontal .pi-card-link,
.pi-card-compacto .pi-card-link {
  display: grid;
  grid-template-areas: "editoria editoria" "foto corpo";
  grid-template-columns: minmax(150px, 36%) minmax(0, 1fr);
  align-items: start;
  gap: 12px 16px;
}
.pi-card-horizontal .pi-card-foto { aspect-ratio: 4 / 3; }
.pi-card-horizontal .pi-card-titulo { font-size: 1.08rem; -webkit-line-clamp: 2; }
.pi-card-horizontal .pi-card-resumo { -webkit-line-clamp: 2; }

.pi-card-compacto .pi-card-link { grid-template-columns: 108px minmax(0, 1fr); gap: 10px 12px; padding: 12px; }
.pi-card-compacto .pi-card-icone { width: 28px; height: 28px; flex-basis: 28px; border-radius: 8px; font-size: .75rem; }
.pi-card-compacto .pi-card-categoria { font-size: .7rem; }
.pi-card-compacto .pi-card-foto { aspect-ratio: 4 / 3; border-radius: 10px; }
.pi-card-compacto .pi-card-titulo { font-size: .9rem; }

/* Capa: foto alta, para cartazes e carrossel. */
.pi-card-capa .pi-card-foto { aspect-ratio: 3 / 4; }

/* Texto: sem foto (plantao). */
.pi-card-texto .pi-card-link { gap: 10px; }
.pi-card-texto .pi-card-titulo { font-size: .96rem; }
.pi-card-texto .pi-card-resumo { -webkit-line-clamp: 2; }

/* ---------------- arranjos (estilo do bloco) ---------------- */
.pi-cards { display: grid; gap: 18px; }
.pi-cards-principal,
.pi-cards-resto { min-width: 0; }

/* Grade: 3 por linha; 4 em bloco largo; 2 e 1 conforme estreita. */
.pi-cards-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@container (min-width: 1000px) { .pi-cards-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Lista: um card horizontal por linha. */
.pi-cards-lista { grid-template-columns: minmax(0, 1fr); gap: 14px; }

/* Cartazes: quantos couberem. */
.pi-cards-capas { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

/* Plantao: cards so de texto, em duas colunas quando ha espaco. */
.pi-cards-plantao { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

/* Destaque + lista lateral: manchete a esquerda, compactos empilhados. */
.pi-cards-destaque_lista { grid-template-columns: minmax(0, 1.45fr) minmax(250px, 1fr); }
.pi-cards-destaque_lista .pi-cards-resto { display: flex; flex-direction: column; gap: 14px; }
.pi-cards-destaque_lista .pi-cards-resto .pi-card { height: auto; }

/* Destaque + lista vertical: manchete em cima, compactos em duas colunas. */
.pi-cards-destaque_vertical .pi-cards-resto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

/* Os dois "destaque + lista" viram um card unico: o painel branco envolve
   todas as noticias, separadas por linhas finas; a editoria vai para a
   foto e o titulo sai na cor dela, escurecendo no hover. */
.pi-cards-destaque_lista,
.pi-cards-destaque_vertical {
  gap: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .06);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 26px -16px rgba(15, 23, 42, .28);
}
.pi-cards-destaque_lista .pi-card,
.pi-cards-destaque_vertical .pi-card { height: auto; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.pi-cards-destaque_lista .pi-card:hover,
.pi-cards-destaque_vertical .pi-card:hover { box-shadow: none; transform: none; }
.pi-cards-destaque_lista .pi-cards-resto,
.pi-cards-destaque_vertical .pi-cards-resto { gap: 0; }
.pi-cards-destaque_lista .pi-cards-resto { border-left: 1px solid var(--borda); }
.pi-cards-destaque_lista .pi-cards-resto .pi-card + .pi-card,
.pi-cards-destaque_vertical .pi-cards-resto .pi-card { border-top: 1px solid var(--borda); }
.pi-cards-destaque_vertical .pi-cards-resto .pi-card:nth-child(even) { border-left: 1px solid var(--borda); }
.pi-cards-destaque_lista .pi-card-titulo,
.pi-cards-destaque_vertical .pi-card-titulo { color: var(--cor-bloco); }
.pi-cards-destaque_lista .pi-card:hover .pi-card-titulo,
.pi-cards-destaque_vertical .pi-card:hover .pi-card-titulo { color: color-mix(in srgb, var(--cor-bloco) 72%, #000); }

/* Editoria na foto: sem a linha do cabecalho; na miniatura o selo encolhe. */
.pi-card-editoria-foto .pi-card-link { grid-template-areas: "foto corpo"; }
.pi-card-compacto .pi-card-selo { top: 6px; left: 6px; max-width: calc(100% - 12px); padding: 3px 6px; border-radius: 5px; font-size: .56rem; }

/* Manchete e mosaico: a manchete ocupa 2x2 e os demais cards fluem ao
   redor (o agrupador some da grade com display: contents). */
.pi-cards-manchete { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pi-cards-mosaico { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row dense; }
.pi-cards-manchete .pi-cards-principal,
.pi-cards-mosaico .pi-cards-principal { grid-column: span 2; grid-row: span 2; }
.pi-cards-manchete .pi-cards-resto,
.pi-cards-mosaico .pi-cards-resto { display: contents; }
/* A manchete tem a altura de duas linhas de cards: a foto cresce para
   preencher, em vez de sobrar um vao branco embaixo do texto. */
.pi-cards-manchete .pi-cards-principal .pi-card-foto,
.pi-cards-mosaico .pi-cards-principal .pi-card-foto { flex: 1 1 auto; min-height: 260px; aspect-ratio: auto; }

/* Carrossel: rolagem lateral com encaixe, cards de capa. */
.pi-carrossel { position: relative; }
.pi-carrossel-trilho {
  display: grid;
  grid-auto-columns: calc((100% - 36px) / 3);
  grid-auto-flow: column;
  gap: 18px;
  padding: 4px 2px 14px;
  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-card { scroll-snap-align: start; }
.pi-carrossel-trilho > .pi-card:hover { transform: none; }
.pi-carrossel-seta { position: absolute; top: 45%; z-index: 2; display: grid; width: 42px; height: 42px; padding: 0; color: var(--cor-bloco); background: #fff; border: 1px solid var(--borda); border-radius: 50%; box-shadow: 0 8px 20px rgba(15, 29, 43, .18); cursor: pointer; place-items: center; 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: -8px; }
.pi-carrossel-proximo { right: -8px; }
.pi-carrossel-fixo .pi-carrossel-seta,
.pi-carrossel-inicio .pi-carrossel-anterior,
.pi-carrossel-fim .pi-carrossel-proximo { opacity: 0; pointer-events: none; }

/* Ranking "Mais lidas": cabecalho com chama + grade de cards com foto.
   auto-fit faz os cards de cada linha dividirem a largura toda. */
.pi-ranking { height: 100%; padding: 22px 22px 24px; background: linear-gradient(180deg, color-mix(in srgb, var(--cor-bloco) 7%, #fff), #fff 140px); border: 1px solid var(--borda); border-radius: 16px; box-shadow: 0 14px 34px rgba(15,29,43,.08); }
.pi-ranking-topo { position: relative; display: flex; align-items: center; gap: 14px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--borda); }
.pi-ranking-topo::after { position: absolute; bottom: -1px; left: 0; width: 120px; height: 3px; content: ''; background: linear-gradient(90deg, #ff3d00, #ffb300); border-radius: 3px; }
.pi-ranking-chama { display: grid; width: 48px; height: 48px; flex: 0 0 48px; color: #fff; background: linear-gradient(145deg, #ffb300, #ff5722 55%, #d50000); border-radius: 14px; box-shadow: 0 8px 20px rgba(255,87,34,.38), inset 0 1px 0 rgba(255,255,255,.35); font-size: 1.35rem; place-items: center; }
.pi-ranking-chama i { animation: pi-chama 1.8s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes pi-chama { 0%, 100% { transform: scale(1) rotate(0); } 30% { transform: scale(1.08, .95) rotate(-4deg); } 60% { transform: scale(.96, 1.06) rotate(3deg); } }
.pi-ranking-cabecalho { min-width: 0; }
.pi-ranking-cabecalho small { display: block; margin-bottom: 2px; color: #ff5722; font-family: var(--fonte-menu); font-size: .66rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.pi-ranking-cabecalho h2 { margin: 0; color: var(--azul-escuro); font-family: var(--fonte-titulo); font-size: 1.6rem; font-weight: 800; letter-spacing: -.025em; line-height: 1.1; overflow-wrap: anywhere; }
/* No maximo 3 por linha: a largura minima de cada card nunca fica abaixo
   de um terco da linha; abaixo de 250px o card desce para a linha de baixo. */
.pi-ranking-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(250px, (100% - 28px) / 3)), 1fr)); gap: 14px; }
.pi-ranking-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; color: var(--azul-escuro); background: #fff; border: 1px solid var(--borda); border-radius: 12px; box-shadow: 0 4px 14px rgba(15,29,43,.05); transition: transform .25s, box-shadow .25s, border-color .25s; }
.pi-ranking-card:hover { color: var(--azul-escuro); border-color: color-mix(in srgb, var(--cor-card) 45%, var(--borda)); box-shadow: 0 12px 24px rgba(15,29,43,.12); transform: translateY(-3px); }
.pi-ranking-foto { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; background: #eef1f4; }
.pi-ranking-foto::after { position: absolute; inset: 0; content: ''; background: linear-gradient(180deg, rgba(0,0,0,.22), transparent 40%); pointer-events: none; }
.pi-ranking-foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.pi-ranking-card:hover .pi-ranking-foto img { transform: scale(1.08); }
/* Editoria no topo da foto, a esquerda; a colocacao (opcional) a direita. */
.pi-ranking-categoria { position: absolute; top: 10px; left: 10px; z-index: 1; max-width: calc(100% - 58px); overflow: hidden; padding: 4px 10px; color: #fff; background: var(--cor-card, var(--cor-bloco)); border-radius: 6px; box-shadow: 0 3px 8px rgba(0,0,0,.2); font-family: var(--fonte-menu); font-size: .62rem; font-weight: 800; letter-spacing: .07em; line-height: 1.3; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.pi-ranking-numero { position: absolute; top: 8px; right: 8px; z-index: 1; display: grid; width: 30px; height: 30px; color: #fff; background: linear-gradient(145deg, #ffb300, #ff5722 60%, #d50000); border: 2px solid rgba(255,255,255,.9); border-radius: 50%; box-shadow: 0 4px 10px rgba(0,0,0,.25); font-family: var(--fonte-titulo); font-size: .85rem; font-weight: 900; line-height: 1; place-items: center; }
.pi-ranking-corpo { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 6px; padding: 12px 14px 14px; }
.pi-ranking-corpo time { color: #8a949e; font-size: .68rem; font-weight: 600; }
.pi-ranking-corpo h3 { display: -webkit-box; margin: 0; overflow: hidden; font-size: .9rem; font-weight: 750; line-height: 1.32; -webkit-box-orient: vertical; -webkit-line-clamp: 3; transition: color .2s; }
.pi-ranking-card:hover h3 { color: var(--cor-card, var(--cor-bloco)); }

/* 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; }
/* Empilhados (opcao do painel): todos os banners do grupo, um abaixo do
   outro, na ordem das Propagandas, com respiro entre eles. */
.pi-banner-empilhado { display: flex; width: 100%; max-width: 100%; min-height: 0; flex-direction: column; gap: 18px; margin: 0 auto; overflow: visible; }
.pi-banner-item { display: flex; width: 100%; align-items: center; justify-content: center; background: transparent; border: 0; box-shadow: none; }
.pi-banner-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; }

/* Alinhamento "Automatico", so no desktop e so na sidebar: banner mais
   estreito que a coluna encosta no lado do conteudo, em vez de centralizar
   e abrir um vao entre as colunas. */
@media (min-width: 992px) {
  .pi-sidebar-direita .pi-area-sidebar .pi-alinhar-auto .pi-banner-item { justify-content: flex-start; }
  .pi-sidebar-direita .pi-area-sidebar .pi-alinhar-auto img { margin-left: 0; }
  .pi-sidebar-esquerda .pi-area-sidebar .pi-alinhar-auto .pi-banner-item { justify-content: flex-end; }
  .pi-sidebar-esquerda .pi-area-sidebar .pi-alinhar-auto img { margin-right: 0; }
}

/* Alinhamento escolhido no painel: vale para empilhados e rotativos. */
.pi-banner.pi-alinhar-esquerda .pi-banner-item { justify-content: flex-start; }
.pi-banner.pi-alinhar-centro .pi-banner-item { justify-content: center; }
.pi-banner.pi-alinhar-direita .pi-banner-item { justify-content: flex-end; }
.pi-banner.pi-alinhar-esquerda img { margin-right: auto; margin-left: 0; }
.pi-banner.pi-alinhar-centro img { margin-right: auto; margin-left: auto; }
.pi-banner.pi-alinhar-direita img { margin-right: 0; margin-left: auto; }

/* 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); }

/* Clima compacto: metade da altura. Atual a esquerda, cidade e detalhes ao
   lado e a previsao numa faixa abaixo (ou a direita, em blocos largos). */
.pi-clima-compacto { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "topo topo" "atual cidade" "atual detalhes" "dias dias"; align-content: start; column-gap: 14px; min-height: 155px; padding: 12px 16px; }
.pi-clima-compacto::before { top: -45px; right: -35px; width: 115px; height: 115px; }
.pi-clima-compacto .pi-clima-topo { grid-area: topo; margin-bottom: 6px; font-size: .7rem; }
.pi-clima-compacto .pi-clima-atual { grid-area: atual; justify-content: flex-start; gap: 10px; padding: 0; }
.pi-clima-compacto .pi-clima-icone { min-width: 40px; font-size: 2.4rem; }
.pi-clima-compacto .pi-clima-temperatura { font-size: 2rem; }
.pi-clima-compacto .pi-clima-descricao { margin-top: 3px; font-size: .66rem; }
.pi-clima-compacto h3 { grid-area: cidade; align-self: end; margin: 0; overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; font-size: .95rem; }
.pi-clima-compacto .pi-clima-detalhes { grid-area: detalhes; justify-content: flex-end; gap: 10px; margin: 3px 0 0; font-size: .62rem; }
.pi-clima-compacto .pi-clima-dias { grid-area: dias; gap: 2px; margin-top: 8px; padding-top: 7px; }
.pi-clima-compacto .pi-clima-dias > span { gap: 2px; }
.pi-clima-compacto .pi-clima-dias b,
.pi-clima-compacto .pi-clima-dias small { font-size: .58rem; }
.pi-clima-compacto .pi-clima-dias i { font-size: .8rem; }
.pi-clima-compacto .pi-clima-erro { grid-column: 1 / -1; margin-top: 4px; font-size: .62rem; }

@container (min-width: 560px) {
  .pi-clima-compacto { grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "topo topo topo" "atual cidade dias" "atual detalhes dias"; column-gap: 18px; }
  .pi-clima-compacto h3 { text-align: left; }
  .pi-clima-compacto .pi-clima-detalhes { justify-content: flex-start; }
  .pi-clima-compacto .pi-clima-dias { align-self: center; margin-top: 0; padding: 0 0 0 16px; border-top: 0; border-left: 1px solid rgba(255,255,255,.22); }
}

/* 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-cards-grade,
  .pi-cards-manchete,
  .pi-cards-mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pi-cards-manchete .pi-cards-principal,
  .pi-cards-mosaico .pi-cards-principal { grid-row: span 1; }
  .pi-cards-manchete .pi-cards-principal .pi-card-foto,
  .pi-cards-mosaico .pi-cards-principal .pi-card-foto { flex: 0 0 auto; min-height: 0; aspect-ratio: 16 / 9; }
  .pi-cards-destaque_lista { grid-template-columns: minmax(0, 1fr); }
  .pi-cards-destaque_lista .pi-cards-resto { border-top: 1px solid var(--borda); border-left: 0; }
  .pi-cards-plantao { grid-template-columns: minmax(0, 1fr); }
  .pi-cards-capas { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .pi-carrossel-trilho { grid-auto-columns: calc((100% - 18px) / 2); }
}

@container (max-width: 519px) {
  .pi-titulo h2 { font-size: 1.14rem; }
  .pi-titulo h2.pi-titulo-com-icone { gap: 10px; }
  .pi-titulo-icone { width: 32px; height: 32px; flex-basis: 32px; border-radius: 9px; font-size: .85rem; }
  .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-ranking { padding: 18px 14px; }
  .pi-ranking-cabecalho h2 { font-size: 1.3rem; }
  .pi-ranking-grade { grid-template-columns: minmax(0, 1fr); gap: 12px; }  .pi-clima { min-height: 295px; padding: 18px 15px; }
  .pi-clima-compacto { min-height: 150px; padding: 12px 14px; }

  .pi-cards { gap: 14px; }
  .pi-cards-grade,
  .pi-cards-manchete,
  .pi-cards-mosaico,
  .pi-cards-destaque_vertical .pi-cards-resto { grid-template-columns: minmax(0, 1fr); }
  .pi-cards-destaque_vertical .pi-cards-resto .pi-card:nth-child(even) { border-left: 0; }
  .pi-cards-manchete .pi-cards-principal,
  .pi-cards-mosaico .pi-cards-principal { grid-column: auto; }
  .pi-cards-capas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pi-card-link { padding: 12px; }
  .pi-card-horizontal .pi-card-link { grid-template-columns: 120px minmax(0, 1fr); gap: 10px 12px; }
  .pi-card-horizontal .pi-card-titulo { font-size: .95rem; }
  .pi-card-horizontal .pi-card-resumo { display: none; }
  .pi-card-compacto .pi-card-link { grid-template-columns: 96px minmax(0, 1fr); }
  .pi-carrossel-trilho { grid-auto-columns: 78%; }
  .pi-carrossel-anterior { left: 4px; }
  .pi-carrossel-proximo { right: 4px; }
}

@container (max-width: 359px) {
  .pi-titulo h2 { padding-right: 14px; font-size: 1rem; }
  .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-ranking-chama { width: 42px; height: 42px; flex-basis: 42px; font-size: 1.15rem; }
  .pi-ranking-cabecalho h2 { font-size: 1.15rem; }
  .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-cards-capas { grid-template-columns: minmax(0, 1fr); }
  .pi-card-horizontal .pi-card-link,
  .pi-card-compacto .pi-card-link { grid-template-columns: 88px minmax(0, 1fr); }
  .pi-carrossel-trilho { grid-auto-columns: 88%; }
}

@media (prefers-reduced-motion: reduce) {
  .pi-card,
  .pi-card-icone,
  .pi-card-foto img,
  .pi-ranking-card,
  .pi-ranking-foto img { transition: none; }
  .pi-card:hover,
  .pi-ranking-card:hover { transform: none; }
  .pi-ranking-chama i { animation: none; }
}

@media (max-width: 991px) { .pagina-inicial-secao { padding-top: 22px; }.pi-sidebar-sticky { position: static; } }
@media (max-width: 575px) { .pi-ranking-grade { grid-template-columns: minmax(0, 1fr); }.pagina-inicial { padding-top: 4px; }.pagina-inicial-secao { padding-top: 20px; } }

/* =====================================================================
   BANNER SLIDER (tipo "slider")
   Uma noticia por vez, foto inteira de canto arredondado, setas redondas
   escuras nas laterais e pontos no rodape - o ativo na cor do bloco.
   A altura sai da proporcao escolhida no painel; a foto e cortada
   (object-fit: cover), nunca esticada.
   ===================================================================== */
.pi-slider {
  --pi-slider-proporcao: 21 / 9;
  --pi-slider-fade: 1.1s;
  position: relative;
  overflow: hidden;
  background: #1f2937;
  border-radius: 14px;
  box-shadow: 0 14px 34px -18px rgba(15, 29, 43, .55);
  isolation: isolate;
}
.pi-slider-larga    { --pi-slider-proporcao: 16 / 7; }
.pi-slider-classica { --pi-slider-proporcao: 16 / 9; }

/* Fade: os slides ficam empilhados na mesma celula da grade. */
.pi-slider-trilho {
  display: grid;
  touch-action: pan-y;
}

/* O slide que sai fica opaco por baixo ate o novo terminar de surgir (por
   isso o atraso): se os dois desbotassem juntos, o fundo escuro apareceria
   no meio da troca e a imagem piscaria. */
.pi-slider-item {
  position: relative;
  grid-area: 1 / 1;
  min-width: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0s linear var(--pi-slider-fade);
}
.pi-slider-item.ativo {
  z-index: 1;
  opacity: 1;
  pointer-events: auto;
  transition: opacity var(--pi-slider-fade) ease-in-out;
}

.pi-slider-link { position: relative; display: block; color: #fff; aspect-ratio: var(--pi-slider-proporcao); }
.pi-slider-link:hover { color: #fff; }

.pi-slider-link img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  /* Volta ao zoom inicial so depois de escondida, sem mexer durante o fade. */
  transition: transform 0s linear var(--pi-slider-fade);
}
/* Zoom lento na foto ativa: da vida a vitrine sem distrair. */
.pi-slider-item.ativo .pi-slider-link img { transform: scale(1); transition: transform 6s ease-out; }

.pi-slider-sombra {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, .35) 62%, rgba(0, 0, 0, .82) 100%);
}

.pi-slider-texto {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  justify-items: start;
  gap: 8px;
  padding: 0 clamp(18px, 7%, 80px) 46px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .35s ease, transform 0s linear .35s;
}
/* O texto novo entra depois de o antigo sumir: os dois nunca se misturam. */
.pi-slider-item.ativo .pi-slider-texto {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease .4s, transform .7s cubic-bezier(.22, .75, .18, 1) .4s;
}

.pi-slider-texto h3 {
  max-width: 900px;
  margin: 0;
  color: #fff;
  font-size: clamp(1.15rem, 2.4vw, 2rem);
  font-weight: 800;
  line-height: 1.15;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}
.pi-slider-resumo { max-width: 760px; color: rgba(255, 255, 255, .88); font-size: .95rem; line-height: 1.45; }
.pi-slider-texto time { color: rgba(255, 255, 255, .8); font-size: .78rem; font-weight: 600; }

.pi-slider-seta {
  position: absolute;
  z-index: 2;
  top: 50%;
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  color: #fff;
  background: rgba(17, 24, 39, .55);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  font-size: .95rem;
  place-items: center;
  transform: translateY(-50%);
  transition: background .25s, transform .3s cubic-bezier(.22, .75, .18, 1);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.pi-slider-anterior { left: 16px; }
.pi-slider-proximo { right: 16px; }
.pi-slider-seta:hover,
.pi-slider-seta:focus-visible { background: rgba(17, 24, 39, .82); transform: translateY(-50%) scale(1.08); }
.pi-slider-seta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.pi-slider-pontos {
  position: absolute;
  z-index: 2;
  bottom: 16px;
  left: 50%;
  display: flex;
  gap: 8px;
  transform: translateX(-50%);
}
.pi-slider-ponto {
  width: 10px;
  height: 10px;
  padding: 0;
  background: rgba(255, 255, 255, .7);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
  transition: background .25s, transform .25s;
}
.pi-slider-ponto:hover { background: #fff; }
.pi-slider-ponto.ativo { background: var(--cor-bloco); transform: scale(1.2); }
.pi-slider-ponto:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Slider estreito (sidebar, 4/12) ou celular: mais alto, texto menor. */
@container (max-width: 519px) {
  .pi-slider { --pi-slider-proporcao: 4 / 3; border-radius: 12px; }
  .pi-slider-texto { padding: 0 16px 38px; gap: 6px; }
  .pi-slider-texto h3 { font-size: 1.05rem; }
  .pi-slider-resumo { display: none; }
  /* Estreito, as setas cobririam o texto: ficam o arrasto e os pontos. */
  .pi-slider-seta { display: none; }
  .pi-slider-pontos { bottom: 12px; gap: 6px; }
  .pi-slider-ponto { width: 8px; height: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .pi-slider { --pi-slider-fade: 0s; }
  .pi-slider-link img,
  .pi-slider-item.ativo .pi-slider-link img,
  .pi-slider-texto,
  .pi-slider-item.ativo .pi-slider-texto { transform: none; transition: none; }
}

/* =====================================================================
   BLOCO HTML
   ===================================================================== */
.pi-html { min-width: 0; overflow-wrap: anywhere; }
.pi-html img,
.pi-html iframe,
.pi-html video { max-width: 100%; }

/* =====================================================================
   BLOCO STREAMING

   Cartao escuro no mesmo tom do topo (#242424), com o selo "Ao vivo"
   da TV. Os players vem em iframes (srcdoc) de fundo transparente. No
   audio a altura inicial so reserva o espaco - o topo.js ajusta ao player
   real. No video vale sempre o 16:9 daqui (o topo.js explica o porque).
   ===================================================================== */
.pi-streaming {
  min-width: 0;
  padding: 16px;
  color: #fff;
  background: radial-gradient(130% 120% at 0% 0%, #363636 0%, #222 55%, #181818 100%);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 18px;
  box-shadow: 0 24px 48px -30px rgba(0, 0, 0, .6);
}

.pi-streaming-topo {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.pi-streaming-selo {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  color: #fff;
  background: linear-gradient(135deg, var(--aovivo-tema, var(--aovivo-laranja)), var(--aovivo-tema-escuro, var(--aovivo-laranja-escuro)));
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.pi-streaming-topo h2 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: #fff;
  font-family: var(--fonte-titulo);
  font-size: 1.05rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pi-streaming-itens { display: grid; gap: 14px; }

.pi-streaming-rotulo {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 7px;
  color: #a3a3a3;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.pi-streaming-quadro {
  display: block;
  width: 100%;
  height: 48px;
  border: 0;
  background: transparent;
}

/* So o audio: faixa de vidro escura, como o player do cabecalho. */
.pi-streaming-so-audio {
  padding: 3px;
  background: linear-gradient(135deg, #2e2e2e, #242424);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 12px 26px -16px rgba(0, 0, 0, .8);
}

/* Video: sempre 16:9; preto com cantos redondos. */
.pi-streaming-quadro-video {
  height: auto;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 12px;
}

/* =====================================================================
   INDICADORES
   Cartao branco com a cor do indicador no icone e no fio de cima.
   Fonte e data sempre no rodape do cartao. Estilo "faixa": linha unica
   compacta, que rola de lado quando nao cabe.
   ===================================================================== */
.pi-indicadores { position: relative; }
.pi-indicadores-atualizando .pi-indicador-rodape { opacity: .55; }

.pi-indicadores-cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}

.pi-indicador {
  --cor-indicador: var(--azul);
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
  padding: 16px 16px 12px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: 12px;
  box-shadow: 0 6px 18px -12px rgba(15, 29, 43, .3);
  transition: transform .3s cubic-bezier(.22, .75, .18, 1), box-shadow .3s;
}
.pi-indicador::before {
  position: absolute;
  height: 3px;
  background: var(--cor-indicador);
  content: "";
  inset: 0 0 auto;
}
.pi-indicador:hover { box-shadow: 0 14px 28px -16px rgba(15, 29, 43, .4); transform: translateY(-2px); }

.pi-indicador-topo { display: flex; min-width: 0; align-items: center; gap: 10px; }

.pi-indicador-icone {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  color: var(--cor-indicador);
  background: color-mix(in srgb, var(--cor-indicador) 13%, #fff);
  border-radius: 10px;
  font-size: .95rem;
  place-items: center;
}

.pi-indicador-nome {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--azul-escuro);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Selo da fonte ao lado do nome do produto (C.Vale). */
.pi-indicador-selo {
  display: inline-block;
  flex: 0 0 auto;
  padding: 1px 6px;
  color: #1f2937;
  background: #f3f4f6;
  border: 1px solid var(--cor-indicador);
  border-radius: 999px;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: none;
  vertical-align: 1px;
  white-space: nowrap;
}

.pi-indicador-variacao {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pi-indicador-variacao.alta  { color: #15803d; background: #dcfce7; }
.pi-indicador-variacao.baixa { color: #b91c1c; background: #fee2e2; }

.pi-indicador-valor {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 5px;
  margin: 2px 0 0;
  color: #111827;
  line-height: 1.1;
}
.pi-indicador-valor small { color: #6b7280; font-size: .8rem; font-weight: 700; }
.pi-indicador-valor strong { font-size: 1.55rem; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.pi-indicador-valor .pi-indicador-unidade { font-weight: 600; }
.pi-indicador-vazio { color: #9ca3af; font-size: .9rem; font-weight: 600; }

.pi-indicador-detalhe { margin: 0; color: #4b5563; font-size: .78rem; line-height: 1.35; }
.pi-indicador-acumulou { color: var(--cor-indicador); font-weight: 800; }

.pi-indicador-concurso { margin: 0; color: #111827; font-size: .95rem; font-weight: 800; }
.pi-indicador-dezenas { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.pi-indicador-dezenas li {
  display: grid;
  width: 30px;
  height: 30px;
  color: #fff;
  background: var(--cor-indicador);
  border-radius: 50%;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
  font-size: .78rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  place-items: center;
}

.pi-indicador-rodape {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  margin-top: auto;
  padding-top: 8px;
  color: #9ca3af;
  border-top: 1px dashed var(--borda);
  font-size: .66rem;
  line-height: 1.3;
  transition: opacity .3s;
}
.pi-indicador-alerta { color: #b45309; font-weight: 700; }

/* Estilo faixa: tudo numa linha, cartoes enxutos lado a lado. */
.pi-indicadores-faixa {
  display: flex;
  gap: 10px;
  padding-bottom: 4px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.pi-indicadores-faixa .pi-indicador { flex: 1 0 200px; gap: 6px; padding: 12px 14px 10px; scroll-snap-align: start; }
.pi-indicadores-faixa .pi-indicador-valor strong { font-size: 1.25rem; }
.pi-indicadores-faixa .pi-indicador-dezenas li { width: 25px; height: 25px; font-size: .7rem; }
.pi-indicadores-faixa .pi-indicador-detalhe { display: none; }
.pi-indicadores-faixa .pi-indicador-megasena .pi-indicador-detalhe,
.pi-indicadores-faixa .pi-indicador-cvale .pi-indicador-detalhe { display: block; }

/* Estilo lista: uma linha por indicador em tres colunas (nome, valor,
   variacao), sem fonte nem data. A cor do indicador fica so no icone. */
.pi-indicadores-lista {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: 12px;
}
.pi-indicador-linhas { margin: 0; padding: 0; list-style: none; }
.pi-indicador-linha {
  --cor-indicador: var(--azul);
  display: grid;
  min-height: 52px;
  grid-template-columns: 34px minmax(0, 1fr) auto 84px;
  align-items: center;
  gap: 0 12px;
  padding: 8px 14px;
}
.pi-indicador-linha + .pi-indicador-linha { border-top: 1px solid var(--borda); }
.pi-indicador-linha-icone { color: var(--cor-indicador); font-size: 1.35rem; line-height: 1; text-align: center; }
.pi-indicador-linha-nome {
  overflow: hidden;
  color: #111827;
  font-size: .95rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pi-indicador-linha-cidade {
  display: block;
  overflow: hidden;
  color: #6b7280;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-overflow: ellipsis;
}
.pi-indicador-linha-valor {
  color: #111827;
  font-size: .95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.pi-indicador-linha-valor .pi-indicador-alerta { margin-left: 4px; font-size: .75rem; }
.pi-indicador-linha-dezenas { letter-spacing: .04em; }
.pi-indicador-linha-variacao {
  padding-left: 12px;
  border-left: 1px solid var(--borda);
  font-size: .88rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.pi-indicador-linha-variacao .alta  { color: #15803d; }
.pi-indicador-linha-variacao .baixa { color: #dc2626; }
.pi-indicador-linha-variacao i { margin-right: 2px; font-size: .75rem; }

/* Bloco estreito (celular, sidebar): dois cartoes por linha, mais
   enxutos; a Mega-Sena ocupa a linha inteira por causa das dezenas. */
@container (max-width: 519px) {
  .pi-indicadores-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pi-indicadores-cartoes .pi-indicador { gap: 6px; padding: 13px 12px 10px; }
  .pi-indicadores-cartoes .pi-indicador-megasena { grid-column: 1 / -1; }
  .pi-indicadores-cartoes .pi-indicador-icone { width: 30px; height: 30px; flex-basis: 30px; font-size: .8rem; }
  .pi-indicadores-cartoes .pi-indicador-nome { font-size: .7rem; }
  .pi-indicadores-cartoes .pi-indicador-valor strong { font-size: 1.2rem; }
  .pi-indicadores-cartoes .pi-indicador-variacao { padding: 1px 5px; font-size: .64rem; }
  .pi-indicadores-cartoes .pi-indicador-topo { flex-wrap: wrap; gap: 6px 8px; }
}
@container (max-width: 299px) {
  .pi-indicadores-cartoes { grid-template-columns: 1fr; }
  .pi-indicador-linha { grid-template-columns: 26px minmax(0, 1fr) auto 70px; gap: 0 8px; padding: 8px 10px; }
  .pi-indicador-linha-icone { font-size: 1.1rem; }
  .pi-indicador-linha-nome,
  .pi-indicador-linha-valor { font-size: .85rem; }
  .pi-indicador-linha-variacao { padding-left: 8px; font-size: .78rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pi-slider-trilho,
  .pi-slider-link img,
  .pi-slider-texto,
  .pi-indicador { transition: none; }
}

/* ---------------------------------------------------------------------
   DESTAQUE PREMIUM: banner editorial de uma noticia.
   Camadas, de baixo para cima (o z-index de cada uma e fixo):
     0 arte de fundo · 1 foto da noticia · 2 degrade de leitura
     3 textos · 4 botao "Ver todas" (fora do link do banner).
   A foto se funde na arte por mascara, sem borda reta. As cores e medidas
   chegam do painel como --pm-* no style do bloco; sem cor escolhida, tudo
   nasce da cor da categoria (--cor-bloco). O layout segue a largura real
   do bloco, nao a da janela.
   --------------------------------------------------------------------- */
.pi-premium {
  --pm-base-real: var(--pm-base, color-mix(in srgb, var(--cor-bloco) 42%, #05110c));
  --pm-destaque-real: var(--pm-destaque, color-mix(in srgb, var(--cor-bloco) 45%, #fff));
  position: relative;
  display: flex;
  height: 100%;
  min-height: var(--pm-altura, 240px);
  overflow: hidden;
  color: var(--pm-texto, #fff);
  background: linear-gradient(120deg, var(--pm-base-real), color-mix(in srgb, var(--pm-base-real) 72%, #000));
  border-radius: var(--pm-raio, 14px);
  box-shadow: 0 14px 32px rgba(15, 23, 42, .16);
  isolation: isolate;
}
.pi-premium-link {
  position: relative;
  display: flex;
  width: 100%;
  min-height: inherit;
  align-items: center;
  color: inherit;
  text-decoration: none;
}
.pi-premium-link:hover,
.pi-premium-link:focus { color: inherit; text-decoration: none; }
.pi-premium-link:focus-visible { outline: 3px solid var(--pm-destaque-real); outline-offset: -6px; border-radius: var(--pm-raio, 14px); }

.pi-premium-fundo { position: absolute; inset: 0; z-index: 0; }
.pi-premium-fundo picture { display: contents; }
.pi-premium-fundo img { display: block; width: 100%; height: 100%; object-fit: cover; }

.pi-premium-foto { position: absolute; top: 0; right: 0; bottom: 0; z-index: 1; width: var(--pm-foto-largura, 58%); overflow: hidden; }
.pi-premium-foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pm-foco, center);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--pm-transicao, 45%));
  mask-image: linear-gradient(to right, transparent 0, #000 var(--pm-transicao, 45%));
}
.pi-premium-foto-esquerda .pi-premium-foto { right: auto; left: 0; }
.pi-premium-foto-esquerda .pi-premium-foto img {
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 var(--pm-transicao, 45%));
  mask-image: linear-gradient(to left, transparent 0, #000 var(--pm-transicao, 45%));
}

/* Escurece so o lado do texto: a foto continua limpa. */
.pi-premium-degrade {
  --pm-sombra: color-mix(in srgb, var(--pm-base-real) var(--pm-escurecer, 70%), transparent);
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to right, var(--pm-sombra) 0, var(--pm-sombra) 28%, transparent 72%);
  pointer-events: none;
}
.pi-premium-foto-esquerda .pi-premium-degrade { background: linear-gradient(to left, var(--pm-sombra) 0, var(--pm-sombra) 28%, transparent 72%); }

.pi-premium-conteudo {
  position: relative;
  z-index: 3;
  display: flex;
  width: calc(100% - var(--pm-foto-largura, 58%) + 14%);
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: clamp(18px, 4cqi, 38px);
}
.pi-premium-foto-esquerda .pi-premium-conteudo { margin-left: auto; padding-top: 52px; }
.pi-premium-sem-foto .pi-premium-conteudo { width: min(100%, 720px); }
.pi-premium-sem-foto.pi-premium-foto-esquerda .pi-premium-conteudo { margin-left: 0; }

.pi-premium-sobretitulo {
  color: var(--pm-destaque-real);
  font-family: var(--fonte-menu);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1.2;
  text-transform: uppercase;
}
.pi-premium .pi-premium-titulo {
  margin: 0;
  color: var(--pm-titulo, inherit);
  font-family: var(--fonte-titulo);
  font-size: clamp(1.55rem, 5.2cqi, 2.8rem);
  font-weight: 900;
  letter-spacing: -.01em;
  line-height: 1.04;
  text-transform: uppercase;
}
.pi-premium-titulo em { color: var(--pm-destaque-real); font-style: normal; }
.pi-premium .pi-premium-noticia {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: inherit;
  font-family: var(--fonte-titulo);
  font-size: clamp(1rem, 2.4cqi, 1.32rem);
  font-weight: 700;
  line-height: 1.28;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.pi-premium-descricao {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: .9rem;
  line-height: 1.4;
  opacity: .9;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.pi-premium-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 8px 16px;
  color: var(--pm-cta-texto, var(--pm-base-real));
  background: var(--pm-destaque-real);
  border-radius: 999px;
  font-family: var(--fonte-menu);
  font-size: .8rem;
  font-weight: 800;
  line-height: 1.2;
}
.pi-premium-todas {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  color: #fff;
  background: rgba(10, 14, 18, .58);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  font-family: var(--fonte-menu);
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.pi-premium-todas:hover,
.pi-premium-todas:focus-visible { color: var(--pm-cta-texto, var(--pm-base-real)); background: var(--pm-destaque-real); text-decoration: none; }
.pi-premium-todas:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* Microinteracoes: desligaveis no painel e por quem pede menos movimento. */
.pi-premium-animado .pi-premium-foto img { transition: transform .7s ease; }
.pi-premium-animado .pi-premium-cta i { transition: transform .25s ease; }
.pi-premium-animado .pi-premium-link:hover .pi-premium-foto img { transform: scale(1.04); }
.pi-premium-animado .pi-premium-link:hover .pi-premium-cta i { transform: translateX(4px); }
.pi-premium-animado::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  z-index: 3;
  width: 30%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .16), transparent);
  content: "";
  pointer-events: none;
  transform: skewX(-16deg);
  transition: left .9s ease;
}
.pi-premium-animado:hover::after { left: 115%; }

/* Bloco estreito: celular, sidebar e 4/12. */
@container (max-width: 559px) {
  .pi-premium { min-height: var(--pm-altura-mobile, 340px); }
  .pi-premium-link { align-items: flex-end; }
  .pi-premium-conteudo,
  .pi-premium-foto-esquerda .pi-premium-conteudo { width: 100%; margin-left: 0; padding: 20px; }
  .pi-premium .pi-premium-noticia { font-size: 1.04rem; }
  .pi-premium-todas { top: 10px; right: 10px; }

  /* Foto em cima, esmaecendo para o texto embaixo. */
  .pi-premium-mobile-topo .pi-premium-foto,
  .pi-premium-foto-esquerda.pi-premium-mobile-topo .pi-premium-foto { top: 0; right: 0; bottom: auto; left: 0; width: 100%; height: 60%; }
  .pi-premium-mobile-topo .pi-premium-foto img,
  .pi-premium-foto-esquerda.pi-premium-mobile-topo .pi-premium-foto img {
    -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 45%, transparent 100%);
  }
  /* Vale para qualquer foto no mobile: o texto ocupa a largura toda. */
  .pi-premium .pi-premium-degrade,
  .pi-premium-foto-esquerda .pi-premium-degrade { background: linear-gradient(to top, var(--pm-sombra) 0, var(--pm-sombra) 34%, transparent 74%); }

  .pi-premium-mobile-direita .pi-premium-foto,
  .pi-premium-foto-esquerda.pi-premium-mobile-direita .pi-premium-foto { right: 0; left: auto; width: 74%; }
  .pi-premium-mobile-direita .pi-premium-foto img,
  .pi-premium-foto-esquerda.pi-premium-mobile-direita .pi-premium-foto img {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 55%);
    mask-image: linear-gradient(to right, transparent 0, #000 55%);
  }
  /* Aqui o texto fica por cima da foto: o degrade sobe mais e pesa mais. */
  .pi-premium-mobile-direita .pi-premium-degrade {
    --pm-sombra: color-mix(in srgb, var(--pm-base-real) min(100%, calc(var(--pm-escurecer, 70%) + 22%)), transparent);
    background: linear-gradient(to top, var(--pm-sombra) 0, var(--pm-sombra) 60%, transparent 92%);
  }
  .pi-premium-mobile-oculta .pi-premium-foto { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pi-premium-animado .pi-premium-foto img,
  .pi-premium-animado .pi-premium-cta i { transition: none; }
  .pi-premium-animado .pi-premium-link:hover .pi-premium-foto img,
  .pi-premium-animado .pi-premium-link:hover .pi-premium-cta i { transform: none; }
  .pi-premium-animado::after { display: none; }
}

/* Prioridade no celular (07/11/2026): bloco da sidebar marcado no construtor
   sobe para o topo da secao, antes do conteudo; o resto da sidebar vem
   depois. A coluna da sidebar "some" (display: contents) e os blocos dela
   viram itens da propria .row, onde o order consegue intercala-los com o
   conteudo. O margin repete o gutter que a coluna dava. Desktop intacto. */
@media (max-width: 991px) {
  .pi-prioridade-mobile-ativa > .pi-area-sidebar,
  .pi-prioridade-mobile-ativa > .pi-area-sidebar > .pi-coluna-blocos { display: contents; }
  .pi-prioridade-mobile-ativa > .pi-area-conteudo { order: 2; }
  .pi-prioridade-mobile-ativa > .pi-area-sidebar > .pi-coluna-blocos > .pi-bloco {
    order: 3;
    flex: 0 0 auto;
    width: calc(100% - var(--bs-gutter-x));
    margin: var(--bs-gutter-y) calc(var(--bs-gutter-x) * .5) 0;
  }
  .pi-prioridade-mobile-ativa > .pi-area-sidebar > .pi-coluna-blocos > .pi-bloco.pi-prioridade-mobile { order: 1; }
}