/* ===== Tá Sabendo MT ===================================== */
/* Cores da marca: azul-marinho escuro, verde e amarelo      */
/* Layout inspirado em portais de notícias de MT             */

:root {
  --azul: #0c1a3c;
  --azul-claro: #16295e;
  --verde: #1f8a44;
  --amarelo: #f5c518;
  --salvo: #3b82f6;
  --cinza-texto: #333;
  --cinza-claro: #e9e9e9;
  --cinza-tag: #ececec;
  --cinza-tag-texto: #666;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: #fff;
  color: var(--cinza-texto);
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  line-height: 1.6;
}

/* ===== Cabeçalho ===== */

.topo-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 8px 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
}

.logo { height: 88px; display: block; }

/* ===== Barra de busca (maior, ocupa o meio do cabeçalho) ===== */

.busca-box {
  flex: 1;
  max-width: 560px;
  display: flex;
  align-items: center;
  border: 1px solid #d5d5d5;
  border-radius: 999px;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}

.busca-box:focus-within {
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(12,26,60,.08);
}

.busca-box input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  padding: 13px 20px;
  font-size: .95rem;
  background: transparent;
}

.busca-box button {
  border: none;
  background: #f5f5f5;
  padding: 0 18px;
  align-self: stretch;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--azul);
  transition: background .15s, color .15s;
}

.busca-box button:hover { background: #ececec; }
.busca-box:focus-within button { color: var(--azul); }

/* ===== Filtro por tema (empurrado para a direita) ===== */

/* margin-left: auto joga o filtro e o ícone de perfil para o canto direito */
.filtro-box { position: relative; margin-left: auto; }

.btn-filtro {
  width: 42px;
  height: 42px;
  border: 1px solid #d5d5d5;
  border-radius: 10px;
  background: #fff;
  color: var(--azul);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s;
}

.btn-filtro:hover {
  background: #f5f6fa;
  border-color: var(--azul);
}

/* o botão de 3 linhas fica azul quando há filtro ativo */
.btn-filtro.ativo {
  background: var(--azul);
  border-color: var(--azul);
  color: #fff;
}

.filtro-painel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 60;
  width: 320px;
  background: #fff;
  border: 1px solid #e4e6ee;
  border-radius: 12px;
  box-shadow: 0 14px 38px rgba(0,0,0,.16);
  padding: 16px;
}

.filtro-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

/* ===== Ícone de perfil (cadastro) ===== */

.bn-avatar {
  position: relative;
  flex-shrink: 0;
  border: none;
  background: none;
  padding: 0;
  margin: 0 4px 0 2px;
  cursor: pointer;
}

.bn-avatar-circulo {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #d5d5d5;
  color: var(--azul);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  font-weight: 700;
  overflow: hidden;
  transition: background .15s, border-color .15s, color .15s;
}

.bn-avatar:hover .bn-avatar-circulo {
  background: var(--azul);
  border-color: var(--azul);
  color: #fff;
}

/* avatar com a inicial do nome depois do cadastro */
.bn-avatar-circulo.logado {
  background: var(--verde);
  border-color: var(--verde);
  color: #fff;
}

.bn-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #b9c0d4;
  border: 2px solid #fff;
}

.bn-badge.online { background: #a3e635; }

.filtro-titulo {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #999;
}

/* X vermelho que remove o filtro ativo */
.filtro-limpar {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: #e23b3b;
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, transform .15s;
}

.filtro-limpar:hover {
  background: #c22525;
  transform: scale(1.08);
}

.filtro-temas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filtro-tema {
  border: 1px solid #dfe3ee;
  background: #f7f8fb;
  color: var(--azul);
  font-size: .82rem;
  font-weight: 600;
  font-family: inherit;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}

.filtro-tema:hover {
  background: var(--azul);
  border-color: var(--azul);
  color: #fff;
}

/* tema selecionado */
.filtro-tema.ativo {
  background: var(--azul);
  border-color: var(--azul);
  color: #fff;
}

/* ===== Menu (navegação tubelight, fundo claro) ===== */

.tubelight-wrap {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-start;
  padding: 22px 20px 16px;
}

.tubelight {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px;
  border-radius: 999px;
  border: 1px solid #e4e6ee;
  background: #f7f8fb;
  box-shadow: 0 2px 12px rgba(12,26,60,.08);
}

.tubelight button {
  position: relative;
  background: none;
  border: none;
  color: #5a6275;
  font-size: .88rem;
  font-weight: 600;
  font-family: inherit;
  padding: 9px 22px;
  border-radius: 999px;
  cursor: pointer;
  transition: color .2s, background .2s;
}

.tubelight button:hover { color: var(--azul); }

.tubelight button.ativo {
  background: rgba(12,26,60,.08);
  color: var(--azul);
}

/* borrão suave acima do item ativo */
.tubelight button.ativo::after {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 22px;
  background: rgba(12,26,60,.14);
  border-radius: 50%;
  filter: blur(8px);
  pointer-events: none;
}

/* ===== Botão "Ouvir notícias com IA" (ao lado dos menus) ===== */

.tubelight-wrap { align-items: center; gap: 14px; }

/* botão "Ouvir notícias com IA" — destaque sólido com selo de plano */
.btn-ouvir-ia {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: none;
  border-radius: 999px;
  background: linear-gradient(180deg, #1e3a6e 0%, var(--azul) 100%);
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  font-family: inherit;
  padding: 12px 22px;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    0 4px 14px rgba(12, 26, 60, .35);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.btn-ouvir-ia:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 6px 20px rgba(12, 26, 60, .45);
}

.btn-ouvir-ia:active { transform: translateY(0); filter: brightness(.95); }

.selo-plano {
  background: var(--amarelo);
  color: var(--azul);
  font-size: .62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 2px 8px;
  border-radius: 999px;
}

/* ===== Janela da IA de voz ===== */

.ia-caixa {
  position: relative;
  background: #fff;
  border-radius: 14px;
  width: min(420px, 100%);
  padding: 34px 28px 26px;
  text-align: center;
  box-shadow: 0 24px 70px rgba(0,0,0,.45);
  animation: modalEntra .25s cubic-bezier(.34,1.3,.64,1);
}

.ia-icone {
  font-size: 2.6rem;
  margin-bottom: 8px;
}

.ia-caixa h2 {
  color: var(--azul);
  font-size: 1.35rem;
  margin-bottom: 6px;
}

.ia-caixa .btn-cadastrar {
  width: 100%;
  margin-top: 18px;
}

.ia-controles {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 22px 0 6px;
}

.ia-botao {
  width: 58px;
  height: 58px;
  border: none;
  border-radius: 50%;
  background: var(--verde);
  color: #fff;
  font-size: 1.3rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, transform .15s;
}

.ia-botao:hover { background: #19743a; transform: scale(1.06); }

.ia-botao.ia-parar { background: #e23b3b; }
.ia-botao.ia-parar:hover { background: #c22525; }

/* play pulsando enquanto fala */
.ia-botao.falando {
  animation: pulsoIA 1.2s ease-in-out infinite;
}

@keyframes pulsoIA {
  0%, 100% { box-shadow: 0 0 0 0 rgba(31,138,68,.45); }
  50%      { box-shadow: 0 0 0 14px rgba(31,138,68,0); }
}

.ia-aviso {
  font-size: .72rem;
  color: #aaa;
  margin-top: 14px;
}

/* Barra de data (abaixo do menu) — alinhada à esquerda */
.barra-data {
  border-bottom: 1px solid var(--cinza-claro);
  font-size: .78rem;
  color: #888;
  text-transform: capitalize;
}

.data-linha {
  max-width: 1280px;
  margin: 0 auto;
  padding: 7px 20px 8px;
  display: flex;
  align-items: center;
  gap: 9px;
}

/* Ícone de calendário com o dia de hoje */
.mini-cal {
  width: 24px;
  height: 26px;
  border: 1.5px solid #b9c0d4;
  border-radius: 5px;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
}

.mini-cal-topo {
  height: 7px;
  background: var(--azul);
  position: relative;
}

/* "argolinhas" do calendário */
.mini-cal-topo::before,
.mini-cal-topo::after {
  content: "";
  position: absolute;
  top: 2px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
}

.mini-cal-topo::before { left: 5px; }
.mini-cal-topo::after { right: 5px; }

.mini-cal-dia {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .68rem;
  font-weight: 700;
  color: var(--azul);
  line-height: 1;
}

/* ===== Layout principal ===== */

/* ===== Publicidade de topo (abaixo do calendário) ===== */

.banners-topo-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 20px 0;
  display: flex;
  gap: 20px;
  align-items: stretch;
}

.banner-topo {
  display: block;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 1px 6px rgba(0,0,0,.12);
}

.banner-topo-largo { flex: 1 1 0; min-width: 0; }

.banner-topo-estreito {
  width: 300px;
  flex-shrink: 0;
}

.banner-topo img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  display: block;
}

/* ===== Carrossel de banners do topo (slides deslizam da direita) ===== */
.banner-carrossel {
  position: relative;
  width: 100%;
  height: 110px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(0,0,0,.12);
}

.banner-track {
  display: flex;
  height: 100%;
  /* a transição é controlada pelo JS (transform) para permitir o loop contínuo */
}

.banner-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: block;
}

.banner-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.conteudo {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 20px 50px;
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

.coluna-noticias { flex: 1; min-width: 0; }

.titulo-secao {
  color: var(--azul);
  font-size: 1.3rem;
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--cinza-claro);
}

/* barra de cotações (TradingView) no topo do menu Investimentos */
.ticker-tape {
  margin-bottom: 18px;
  border: 1px solid var(--cinza-claro);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

/* título acima do carrossel de principais notícias */
.titulo-principais {
  color: var(--azul);
  font-size: 1.3rem;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--amarelo);
}

/* ===== Manchete principal ===== */

.manchete {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  display: block;
}

.manchete img.foto {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
  transition: transform .25s;
}

.manchete:hover img.foto { transform: scale(1.02); }

.manchete-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.82) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 26px 28px;
}

.manchete-overlay .tag { background: rgba(255,255,255,.88); }

.manchete-titulo {
  color: #fff;
  font-size: 1.8rem;
  line-height: 1.25;
  margin-top: 8px;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
}

.manchete-data {
  color: #ddd;
  font-size: .78rem;
  margin-top: 6px;
}

/* ===== Carrossel de manchetes ===== */

.carrossel {
  position: relative;
  height: 420px;
  border-radius: 10px;
  overflow: hidden;
}

.carrossel .manchete {
  position: absolute;
  inset: 0;
  border-radius: 0;
  opacity: 0;
  transition: opacity .7s ease;
  pointer-events: none;
}

.carrossel .manchete.ativo {
  opacity: 1;
  pointer-events: auto;
}

.carrossel .manchete img.foto { height: 100%; }

.carrossel-seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,.45);
  color: #fff;
  font-size: 1.05rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}

.carrossel-seta:hover { background: rgba(0,0,0,.75); }
.carrossel-seta.esq { left: 14px; }
.carrossel-seta.dir { right: 14px; }

.carrossel-dots {
  position: absolute;
  bottom: 14px;
  right: 16px;
  z-index: 6;
  display: flex;
  gap: 8px;
}

.carrossel-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.45);
  cursor: pointer;
  transition: background .2s, transform .2s;
}

.carrossel-dot:hover { background: rgba(255,255,255,.8); }

.carrossel-dot.ativo {
  background: var(--amarelo);
  transform: scale(1.25);
}

/* ===== Blocos "destaque + lista" (modelo da imagem de referência) ===== */

.bloco-misto {
  display: grid;
  grid-template-columns: 1fr 1.2fr;   /* lista (menores) | destaque (maior) */
  gap: 26px;
  margin: 24px 0;
  align-items: stretch;               /* as duas colunas com a mesma altura */
}

/* invertido: imagem grande à esquerda, menores à direita */
.bloco-misto.invertido { grid-template-columns: 1.2fr 1fr; }
.bloco-misto .misto-lista     { order: 1; }
.bloco-misto .misto-destaque  { order: 2; }
.bloco-misto.invertido .misto-destaque { order: 1; }
.bloco-misto.invertido .misto-lista    { order: 2; }

/* rótulo da categoria em vermelho, com bolinha (igual à referência) */
.misto-rotulo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #d6231f;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.misto-rotulo::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d6231f;
  flex-shrink: 0;
}

/* notícia em destaque (imagem grande + título embaixo).
   Vira uma coluna flex: a imagem cresce p/ preencher a altura do bloco
   e o título fica embaixo, fazendo a base alinhar com a lista ao lado. */
.misto-destaque {
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
}
.misto-destaque img.foto {
  width: 100%;
  flex: 1;
  min-height: 230px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  transition: transform .25s;
}
.misto-destaque:hover img.foto { transform: scale(1.01); }
.misto-destaque .misto-rotulo { margin: 8px 0 4px; }
.misto-destaque-titulo {
  color: var(--azul);
  font-size: 1.08rem;
  line-height: 1.22;
  margin: 0;
}

/* lista de notícias menores (miniatura + título).
   space-between distribui os 3 itens para preencher a mesma altura
   da notícia em destaque, alinhando topo e base. */
.misto-lista {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;   /* agrupa no topo: evita vazio branco quando há poucas */
  gap: 16px;
}
.misto-item {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 14px;
  cursor: pointer;
  align-items: center;
}
.misto-item img {
  width: 116px;
  height: 80px;
  object-fit: cover;
  border-radius: 7px;
  display: block;
  transition: opacity .15s;
}
.misto-item:hover img { opacity: .9; }
.misto-item-info .misto-rotulo { margin-bottom: 5px; }
.misto-item-titulo {
  color: var(--azul);
  font-size: .92rem;
  line-height: 1.3;
}
.misto-item:hover .misto-item-titulo { text-decoration: underline; }

/* anúncio horizontal entre os blocos */
.banner-bloco {
  display: block;
  margin: 24px 0;
  border-radius: 8px;
  overflow: hidden;
}
.banner-bloco img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
}

/* ===== Destaques secundários ===== */

.grade-destaques {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 18px;
}

.card {
  position: relative;
  border: 1px solid var(--cinza-claro);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  background: #fff;
  display: flex;
  flex-direction: column;
  transition: box-shadow .15s, transform .15s;
}

.card:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  transform: translateY(-2px);
}

.card img.foto {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
}

.card-corpo { padding: 12px 14px 14px; flex: 1; }

/* Tag discreta: circular cinza */
.tag {
  display: inline-block;
  background: var(--cinza-tag);
  color: var(--cinza-tag-texto);
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 3px 12px;
  border-radius: 999px;
  margin-bottom: 8px;
}

.card-titulo {
  color: var(--azul);
  font-size: .98rem;
  line-height: 1.35;
}

.card-data {
  font-size: .72rem;
  color: #999;
  margin-top: 8px;
}

/* ===== Lista compacta (últimas notícias) ===== */

.lista-compacta { display: flex; flex-direction: column; }

.item-compacto {
  position: relative;
  display: flex;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
}

.item-compacto:hover .item-titulo { color: var(--verde); }

.item-compacto img.foto {
  width: 180px;
  height: 110px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}

.item-info { min-width: 0; padding-right: 12px; }

.item-titulo {
  color: var(--azul);
  font-size: 1.05rem;
  line-height: 1.35;
  margin: 4px 0 4px;
  transition: color .15s;
}

.item-resumo {
  font-size: .85rem;
  color: #777;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.item-data { font-size: .72rem; color: #999; margin-top: 6px; }

.sem-resultado { color: #888; padding: 20px 0; }

.ver-mais-aviso {
  margin-top: 18px;
  padding: 16px 18px;
  background: #f4f6f9;
  border-left: 3px solid var(--azul);
  border-radius: 6px;
  color: #555;
  font-size: .95rem;
  line-height: 1.5;
}

/* ===== Botão de salvar (bookmark) ===== */

.btn-bookmark {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(.85);
  transition: opacity .18s, transform .18s cubic-bezier(.34,1.56,.64,1);
}

.manchete:hover .btn-bookmark,
.card:hover .btn-bookmark,
.item-compacto:hover .btn-bookmark,
.btn-bookmark.salvo,
.btn-bookmark:focus-visible {
  opacity: 1;
  transform: scale(1);
}

.item-compacto .btn-bookmark { top: 16px; right: 0; }

.bm-inner {
  position: relative;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}

.btn-bookmark:active .bm-inner { transform: scale(.85) rotate(-10deg); }
.btn-bookmark.salvo .bm-inner { transform: scale(1.1); }
.btn-bookmark.salvo:active .bm-inner { transform: scale(1); }

.bm-icone { position: absolute; inset: 0; }
.bm-icone.contorno { opacity: .6; }
.bm-icone.cheio {
  opacity: 0;
  color: var(--salvo);
  transition: opacity .3s;
}
.btn-bookmark.salvo .bm-icone.cheio { opacity: 1; }

/* explosão radial ao salvar */
.bm-burst {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59,130,246,.4) 0%, rgba(59,130,246,0) 80%);
  opacity: 0;
  pointer-events: none;
}

.btn-bookmark.salvo .bm-burst { animation: bmBurst .7s ease-out; }

@keyframes bmBurst {
  0%   { transform: scale(0);   opacity: 0; }
  50%  { transform: scale(1.4); opacity: .4; }
  100% { transform: scale(1);   opacity: 0; }
}

.bm-particula {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  background: var(--salvo);
  filter: blur(1px);
  pointer-events: none;
}

/* ===== Janela flutuante da notícia ===== */

.oculto { display: none !important; }

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(8, 13, 30, .68);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 20px;
  animation: modalFundo .2s ease-out;
}

@keyframes modalFundo {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal-caixa {
  position: relative;
  background: #fff;
  border-radius: 12px;
  width: min(1100px, 100%);
  max-height: 88vh;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,.45);
  animation: modalEntra .25s cubic-bezier(.34,1.3,.64,1);
}

@keyframes modalEntra {
  from { opacity: 0; transform: translateY(24px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-fechar {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: rgba(12,26,60,.85);
  color: #fff;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}

.modal-fechar:hover { background: var(--verde); }

.modal-grid {
  display: flex;
  max-height: 88vh;
}

.modal-artigo {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 26px 30px 32px;
}

/* Coluna lateral "Outras notícias" */
.modal-lateral {
  width: 300px;
  flex-shrink: 0;
  overflow-y: auto;
  border-left: 1px solid var(--cinza-claro);
  background: #f7f8fc;
  padding: 22px 18px;
}

.modal-lateral-titulo {
  color: var(--azul);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding-bottom: 10px;
  margin-bottom: 6px;
  border-bottom: 2px solid var(--amarelo);
}

.outra-noticia {
  display: flex;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid #e7e9f0;
  cursor: pointer;
}

.outra-noticia img {
  width: 86px;
  height: 62px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}

.outra-noticia h4 {
  color: var(--azul);
  font-size: .84rem;
  font-weight: 600;
  line-height: 1.3;
  transition: color .15s;
}

.outra-noticia:hover h4 { color: var(--verde); }

.outra-noticia .outra-data {
  display: block;
  font-size: .7rem;
  color: #999;
  margin-top: 4px;
}

.sem-outras { font-size: .84rem; color: #888; padding: 12px 0; }

.artigo-imagem {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

.credito-foto {
  font-size: .78rem;
  color: #999;
  margin: 8px 0 22px;
}

.artigo-titulo {
  color: var(--azul);
  font-size: 1.9rem;
  line-height: 1.25;
  margin-bottom: 8px;
}

.artigo-data { font-size: .8rem; color: #999; margin-bottom: 18px; }

.artigo-texto p {
  margin-bottom: 16px;
  font-size: 1.02rem;
}

.artigo-autor {
  margin-top: 26px;
  padding-top: 14px;
  border-top: 1px solid var(--cinza-claro);
  font-size: .85rem;
  color: #888;
  font-style: italic;
}

/* ===== Janela de conta (entrar / criar conta) ===== */

.auth-caixa {
  position: relative;
  background: #fff;
  border-radius: 14px;
  width: min(420px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  padding: 30px 28px 26px;
  text-align: center;
  box-shadow: 0 24px 70px rgba(0,0,0,.45);
  animation: modalEntra .25s cubic-bezier(.34,1.3,.64,1);
}

.cadastro-logo {
  height: 64px;
  display: block;
  margin: 0 auto 6px;
}

.auth-caixa h2 {
  color: var(--azul);
  font-size: 1.4rem;
  margin-bottom: 4px;
}

.cadastro-sub {
  font-size: .87rem;
  color: #777;
  line-height: 1.45;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-top: 18px;
  text-align: left;
}

.auth-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: .78rem;
  font-weight: 600;
  color: #555;
}

.auth-form input {
  border: 1px solid #d5d5d5;
  border-radius: 10px;
  padding: 11px 13px;
  font-size: .9rem;
  font-family: inherit;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

.auth-form input:focus {
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(12,26,60,.08);
}

.btn-cadastrar {
  margin-top: 6px;
  border: none;
  border-radius: 10px;
  background: var(--verde);
  color: #fff;
  font-size: .95rem;
  font-weight: 700;
  font-family: inherit;
  padding: 13px;
  cursor: pointer;
  transition: background .15s;
}

.btn-cadastrar:hover { background: #19743a; }

/* botão "entrar / cadastrar com Google" */
.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid #d5d5d5;
  border-radius: 10px;
  background: #fff;
  color: #444;
  font-size: .9rem;
  font-weight: 600;
  font-family: inherit;
  padding: 12px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.btn-google:hover { background: #f5f6fa; border-color: #c2c6d4; }

/* link que alterna entre entrar e criar conta */
.auth-troca {
  text-align: center;
  font-size: .85rem;
  color: #777;
  margin-top: 4px;
}

.auth-troca a {
  color: var(--azul);
  font-weight: 700;
  text-decoration: none;
}

.auth-troca a:hover { text-decoration: underline; }

/* "Agora não" (usado na janela da IA) */
.btn-agora-nao {
  border: none;
  background: none;
  color: #888;
  font-size: .84rem;
  font-family: inherit;
  padding: 6px;
  cursor: pointer;
}

.btn-agora-nao:hover { color: var(--azul); text-decoration: underline; }

/* ===== Publicidade ===== */

.coluna-publicidade {
  width: 300px;
  flex-shrink: 0;
  /* acompanha o scroll: fica "grudada" no topo e desce junto com a página */
  position: sticky;
  top: 20px;
  align-self: flex-start;
}

.anuncio-link { display: block; margin-bottom: 18px; }
.anuncio-link:last-child { margin-bottom: 0; }

.anuncio-img {
  width: 100%;
  display: block;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 1px 6px rgba(0,0,0,.12);
  transition: transform .15s, box-shadow .15s;
}

.anuncio-link:hover .anuncio-img {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,.2);
}

/* Alturas dos blocos da lateral (largura sempre 300px) */
.anuncio-pequeno .anuncio-img { height: 100px; }  /* solar horizontal 3:1 */
.anuncio-grande  .anuncio-img { height: 600px; }  /* legado 300 × 600 */
.anuncio-media   .anuncio-img { height: 250px; }  /* legado 300 × 250 */

/* Flowops vertical: mostra a arte inteira, sem cortar */
.anuncio-flowops .anuncio-img { height: auto; }

/* Solar "Economize" (quase-quadrada): mostra a arte inteira, sem cortar */
.anuncio-solar .anuncio-img { height: auto; }

/* Vídeo quadrado (1:1) */
.anuncio-video-el {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
  border-radius: 8px;
  box-shadow: 0 1px 6px rgba(0,0,0,.12);
  background: #000;
  transition: transform .15s, box-shadow .15s;
}
.anuncio-link:hover .anuncio-video-el {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,.2);
}

/* publicidade horizontal inserida no meio da lista (a cada 6 notícias) */
.banner-lista {
  display: block;
  margin: 8px 0 18px;
}

.banner-lista img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
  border-radius: 8px;
  box-shadow: 0 1px 6px rgba(0,0,0,.12);
}

/* Banner horizontal no meio do conteúdo:
   largura total da coluna, mas com altura reduzida */
.banner-meio { margin: 26px 0 28px; }

/* Banner institucional "Ser Família Capacita" (Governo de MT) — recriado
   a partir da arte de referência, no formato 6:1 do slot. */
.capacita-banner {
  position: relative;
  height: 150px;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  background: linear-gradient(110deg, #0c3d22 0%, #176336 58%, #1f8a44 100%);
  box-shadow: 0 1px 6px rgba(0,0,0,.12);
}

.capacita-texto {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 0 16px 0 24px;
  z-index: 2;
}

.capacita-tag {
  font-size: .64rem;
  letter-spacing: 1.4px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--amarelo);
}

.capacita-titulo {
  font-size: 1.18rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
}

.capacita-titulo b { color: var(--amarelo); }

.capacita-sub {
  font-size: .8rem;
  color: rgba(255,255,255,.85);
  line-height: 1.2;
}

.capacita-foto {
  flex: 0 0 235px;
  width: 235px;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  /* esmaece a borda esquerda da foto pro verde, emendando sem corte duro */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 46px);
  mask-image: linear-gradient(90deg, transparent 0, #000 46px);
}

.capacita-logo {
  position: absolute;
  right: 14px;
  bottom: 12px;
  height: 34px;
  width: auto;
  border-radius: 6px;
  z-index: 3;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}

/* Banner institucional "Fila Zero na Cirurgia" (Governo de MT) — substitui o
   IA no slot entre blocos. Texto puro, fundo azul-marinho (diferencia do
   Capacita, que é verde). */
.banner-bloco.gov-saude {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 26px;
  background: linear-gradient(110deg, #0a2547 0%, #0c1a3c 55%, #163e6b 100%);
}

.gov-saude-texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  min-width: 0;
}

.gov-saude-tag {
  font-size: .66rem;
  letter-spacing: 1.4px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--amarelo);
}

.gov-saude-titulo {
  font-size: 1.12rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
}

.gov-saude-titulo b { color: var(--amarelo); }

.gov-saude-sub {
  font-size: .82rem;
  color: rgba(255,255,255,.85);
  line-height: 1.2;
}

.gov-saude-logo {
  flex: 0 0 auto;
  text-align: right;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .5px;
  line-height: 1.05;
  border-left: 2px solid rgba(255,255,255,.22);
  padding-left: 18px;
}

.gov-saude-logo span {
  display: block;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  margin-top: 3px;
}

/* ===== Banners compostos do feed (lista de notícias) ===== */
.feed-banner {
  display: block;
  margin: 8px 0 18px;
  text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}
.feed-banner:hover { transform: translateY(-2px); }

.feed-texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  min-width: 0;
}
.feed-tag {
  font-size: .66rem;
  letter-spacing: 1.4px;
  font-weight: 700;
  text-transform: uppercase;
}
.feed-titulo {
  font-size: 1.14rem;
  font-weight: 700;
  line-height: 1.15;
}
.feed-sub {
  font-size: .82rem;
  line-height: 1.2;
}

/* Banner IA na agricultura de precisão (foto de fundo + headline) */
.banner-agro {
  position: relative;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: #0b2c18 url("publicidades/agro-campo.jpg") center/cover no-repeat;
  box-shadow: 0 1px 6px rgba(0,0,0,.12);
}
.banner-agro::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(5,33,18,.95) 0%, rgba(5,33,18,.72) 40%, rgba(5,33,18,.18) 70%, rgba(5,33,18,0) 100%);
}
.banner-agro .feed-texto {
  position: relative;
  z-index: 1;
  padding: 0 24px;
  max-width: 72%;
}
.banner-agro .feed-tag { color: var(--amarelo); }
.banner-agro .feed-titulo { color: #fff; }
.banner-agro .feed-sub { color: rgba(255,255,255,.85); }

/* Banner Connect Energia Solar (fundo claro + foto dos painéis) */
.banner-solar {
  position: relative;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: stretch;
  background: linear-gradient(120deg, #ffffff 0%, #eef1f4 100%);
  border: 1px solid var(--cinza-claro);
}
.banner-solar .feed-texto {
  flex: 1 1 auto;
  padding: 0 16px 0 22px;
}
.banner-solar .connect-logo {
  height: 22px;
  width: auto;
  align-self: flex-start;
  margin-bottom: 3px;
}
.banner-solar .feed-titulo { color: var(--azul); }
.banner-solar .feed-titulo b { color: #f26f21; }
.banner-solar .feed-sub { color: #5b6472; }
.banner-solar-foto {
  flex: 0 0 240px;
  width: 240px;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 54px);
  mask-image: linear-gradient(90deg, transparent 0, #000 54px);
}

/* ===== Rodapé ===== */
/* Área clara para o logo sem fundo (texto azul-marinho) ficar legível */

.rodape {
  background: #f4f6fb;
  border-top: 1px solid var(--cinza-claro);
  font-size: .88rem;
}

.rodape-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 38px 20px 32px;
  display: flex;
  justify-content: center;
}

.rodape-marca {
  max-width: 560px;
  text-align: center;
}

.logo-rodape {
  height: 150px;
  display: block;
  margin: 0 auto 16px;
}

.rodape-marca p { font-size: .88rem; line-height: 1.6; color: #5b6480; }

/* Faixa azul: copyright + links institucionais */
.rodape-base {
  background: var(--azul);
  font-size: .8rem;
  color: #cfd6e8;
}

.rodape-base-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 24px;
}

.rodape-base-inner p { font-size: .76rem; }

.rodape-links {
  display: flex;
  gap: 26px;
}

.rodape-links a {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: color .15s;
}

.rodape-links a:hover { color: var(--amarelo); }

/* ===== Responsivo ===== */

@media (max-width: 900px) {
  .conteudo { flex-direction: column; }
  .coluna-publicidade { width: 100%; position: static; }
  .banners-topo-inner { flex-direction: column; gap: 14px; }
  .banner-topo-estreito { width: 100%; }
  .logo { height: 56px; }
  /* no celular a barra de busca passa para a linha de baixo, ocupando tudo */
  .topo-inner { gap: 10px 12px; flex-wrap: wrap; }
  .busca-box { order: 3; flex-basis: 100%; max-width: none; }
  .filtro-box { margin-left: auto; }
  .busca-box input { padding: 11px 16px; font-size: .9rem; }
  .tubelight-wrap { flex-wrap: wrap; gap: 10px; }
  .btn-ouvir-ia { padding: 9px 16px; font-size: .78rem; }
  .grade-destaques { grid-template-columns: 1fr; }
  /* blocos destaque+lista empilham no celular */
  .bloco-misto,
  .bloco-misto.invertido { grid-template-columns: 1fr; gap: 18px; }
  .bloco-misto .misto-destaque,
  .bloco-misto.invertido .misto-destaque { order: 1; }
  .bloco-misto .misto-lista,
  .bloco-misto.invertido .misto-lista { order: 2; }
  .misto-destaque img.foto { height: 220px; }
  .misto-destaque-titulo { font-size: 1.02rem; }
  .banner-bloco img { height: 100px; }
  .banner-bloco.gov-saude { height: 104px; padding: 0 16px; gap: 12px; }
  .gov-saude-titulo { font-size: .95rem; }
  .gov-saude-tag { font-size: .58rem; }
  .gov-saude-sub { font-size: .74rem; }
  .gov-saude-logo { font-size: .9rem; padding-left: 12px; }
  .gov-saude-logo span { font-size: .54rem; }
  .banner-agro, .banner-solar { height: 104px; }
  .banner-agro .feed-texto { max-width: 80%; padding: 0 16px; }
  .banner-solar .feed-texto { padding: 0 12px 0 16px; }
  .banner-solar-foto { flex-basis: 150px; width: 150px; }
  .feed-titulo { font-size: .98rem; }
  .feed-tag { font-size: .58rem; }
  .feed-sub { font-size: .74rem; }
  .banner-solar .connect-logo { height: 18px; }
  .manchete img.foto { height: 230px; }
  .carrossel { height: 230px; }
  .carrossel-seta { width: 34px; height: 34px; }
  .capacita-banner { height: 116px; }
  .capacita-foto { flex-basis: 150px; width: 150px; }
  .capacita-titulo { font-size: 1rem; }
  .capacita-tag { font-size: .58rem; }
  .capacita-sub { font-size: .72rem; }
  .capacita-logo { height: 28px; right: 10px; bottom: 8px; }
  .manchete-titulo { font-size: 1.25rem; }
  .item-compacto img.foto { width: 110px; height: 80px; }
  .item-info { padding-right: 0; }
  .item-compacto .btn-bookmark { top: 16px; right: 6px; }
  .artigo-imagem { height: 220px; }
  .artigo-titulo { font-size: 1.4rem; }
  .tubelight button { padding: 8px 13px; font-size: .78rem; }
  .modal-overlay { padding: 14px 10px; }
  .modal-grid { flex-direction: column; overflow-y: auto; }
  .modal-artigo { overflow-y: visible; padding: 20px 18px 24px; }
  .modal-lateral {
    width: 100%;
    overflow-y: visible;
    border-left: none;
    border-top: 1px solid var(--cinza-claro);
  }
  .logo-rodape { height: 92px; }
}