/*
 * Página inicial. Só é carregado na home (ver inc/enqueue.php).
 */

/* ------------------------------------------------------------------ *
 * Variações de botão usadas aqui
 * ------------------------------------------------------------------ */

.cap-botao--claro {
  background: var(--cor-branco);
  border-color: var(--cor-branco);
  color: var(--cor-azul-escuro);
}

.cap-botao--claro:hover {
  background: var(--cor-amarelo);
  border-color: var(--cor-amarelo);
  color: var(--cor-preto);
}

.cap-botao--vazado {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.75);
  color: var(--cor-branco);
}

.cap-botao--vazado:hover {
  background: var(--cor-branco);
  border-color: var(--cor-branco);
  color: var(--cor-azul-escuro);
}

/* ------------------------------------------------------------------ *
 * Herói
 * ------------------------------------------------------------------ */

.cap-hero {
  position: relative;
  overflow: hidden;
  background: var(--cor-azul-escuro);
  color: var(--cor-branco);
}

/*
 * O símbolo da cidade em marca d'água, ampliado para cobrir todo o fundo e mais
 * escuro que a cor da seção, como no manual de aplicações. É uma máscara: o
 * desenho vem do alfa de simbolo-mascara.webp e a cor é a do `background`.
 * Navegador sem máscara simplesmente não mostra a marca d'água.
 */
.cap-hero__marca-dagua {
  display: none;
}

@supports ((-webkit-mask-image: url("x.webp")) or (mask-image: url("x.webp"))) {
  .cap-hero__marca-dagua {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(8, 14, 60, 0.3);
    -webkit-mask: url("../img/elementos/simbolo-mascara.webp") no-repeat center bottom / cover;
    mask: url("../img/elementos/simbolo-mascara.webp") no-repeat center bottom / cover;
    pointer-events: none;
  }
}

.cap-hero__in {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--esp-4);
  padding-top: var(--esp-5);
}

.cap-hero__texto {
  padding-bottom: var(--esp-2);
}

.cap-hero__kicker {
  margin: 0 0 var(--esp-2);
  color: var(--cor-amarelo);
  font-family: var(--f-titulo);
  font-weight: var(--fw-sub);
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.cap-hero__titulo {
  margin: 0 0 var(--esp-3);
  color: var(--cor-branco);
  font-family: var(--f-titulo);
  font-weight: var(--fw-titulo);
  font-size: clamp(2.5rem, 1.5rem + 4.6vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.cap-hero__titulo em {
  display: block;
  font-style: italic;
}

.cap-hero__sub {
  margin: 0 0 var(--esp-4);
  max-width: 28rem;
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--f-titulo);
  font-weight: var(--fw-sub);
  font-size: 1.2rem;
  line-height: 1.5;
}

.cap-hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-3);
  margin: 0;
}

.cap-hero__arte {
  position: relative;
  min-height: 19rem;
  align-self: stretch;
}

.cap-hero__pilares {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 44rem;
  height: auto;
}

.cap-hero__pessoa {
  position: absolute;
  bottom: 0;
  left: 50%;
  height: 112%;
  width: auto;
  max-width: none;
  transform: translateX(-52%);
}

/* A faixa de ícones fecha o herói e cobre a base da pessoa, como no mockup. */
.cap-hero .cap-faixa {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  height: 2.75rem;
}

@media (min-width: 48em) {
  .cap-hero .cap-faixa {
    height: 3.5rem;
  }
}

/* Espaço para a faixa não cobrir o texto. */
.cap-hero__in {
  padding-bottom: 3.5rem;
}

@media (min-width: 48em) {
  .cap-hero__in {
    padding-top: var(--esp-6);
    padding-bottom: 4.5rem;
  }

  .cap-hero__arte {
    min-height: 24rem;
  }
}

@media (min-width: 64em) {
  .cap-hero__in {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: center;
    gap: var(--esp-5);
    min-height: 36rem;
    padding-top: var(--esp-6);
  }

  .cap-hero__arte {
    min-height: 31rem;
    align-self: end;
  }

  .cap-hero__pessoa {
    height: 118%;
  }
}

/* ------------------------------------------------------------------ *
 * Atalhos
 * ------------------------------------------------------------------ */

.cap-atalhos {
  padding: var(--esp-6) 0 var(--esp-6);
}

.cap-atalhos__lista {
  display: grid;
  gap: var(--esp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.cap-atalho {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  height: 100%;
  padding: 0.9rem 1rem;
  border-radius: var(--raio);
  color: #181818;
  text-decoration: none;
  transition: transform var(--transicao), box-shadow var(--transicao);
}

.cap-atalho:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-2);
  color: #181818;
}

.cap-atalho__icone {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.9rem;
  height: 2.9rem;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 50%;
}

.cap-atalho__icone .cap-icone {
  width: 1.5rem;
  height: 1.5rem;
}

.cap-atalho__texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.cap-atalho__texto strong {
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: 1rem;
}

.cap-atalho__texto span {
  font-size: 0.85rem;
}

.cap-atalho--azul { background: var(--cor-azul-claro); }
.cap-atalho--verde { background: var(--cor-verde); }
.cap-atalho--amarelo { background: var(--cor-amarelo); }
.cap-atalho--laranja { background: var(--cor-laranja); }

.cap-atalho--escuro {
  background: var(--cor-azul-escuro);
  color: var(--cor-branco);
}

.cap-atalho--escuro:hover {
  color: var(--cor-branco);
}

.cap-atalho--escuro .cap-atalho__icone {
  background: rgba(255, 255, 255, 0.18);
}

/* ------------------------------------------------------------------ *
 * Blocos e títulos de seção
 * ------------------------------------------------------------------ */

.cap-bloco {
  padding: var(--esp-6) 0;
}

.cap-bloco--bege {
  background: var(--c-fundo-alt);
}

.cap-secao-titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  margin: 0 0 var(--esp-4);
  padding-bottom: 0.9rem;
  border-bottom: 2px solid rgba(115, 198, 121, 0.6);
}

.cap-secao-titulo__selo {
  flex: none;
  width: 3rem;
  height: auto;
}

.cap-secao-titulo__texto {
  margin: 0;
  font-size: var(--fs-h2);
}

.cap-secao-titulo__acao {
  margin-left: auto;
  font-size: 0.95rem;
}

/* O módulo de monitoramento usa a classe de título do tema anterior. */
.monitor-home .more-news-title {
  margin: 0 0 var(--esp-3);
  padding: 0 0 0.9rem;
  border-bottom: 2px solid rgba(115, 198, 121, 0.6);
  color: var(--c-titulo);
  font-family: var(--f-titulo);
  font-weight: var(--fw-titulo);
  font-size: var(--fs-h2);
}

/* ...e a de botão. */
.carregar-mais {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1.2rem;
  background: transparent;
  color: var(--c-acao);
  border: 2px solid var(--c-acao);
  border-radius: var(--raio-p);
  font-family: var(--f-titulo);
  text-decoration: none;
}

.carregar-mais:hover {
  background: var(--c-acao);
  color: var(--c-acao-texto);
}

/* Monitoramento nas cores da marca. */
.monitor-home {
  --monitor-blue: var(--cor-azul-escuro);
  --monitor-blue-dark: var(--cor-azul-escuro-700);
  --monitor-blue-soft: var(--cor-azul-escuro-100);
}

/* ------------------------------------------------------------------ *
 * Notícias
 * ------------------------------------------------------------------ */

.cap-noticias {
  display: grid;
  gap: var(--esp-4);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 40em) {
  .cap-noticias {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cap-noticias .cap-card--destaque {
    grid-column: 1 / -1;
  }
}

@media (min-width: 64em) {
  .cap-noticias {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .cap-noticias .cap-card {
    grid-column: span 4;
  }

  .cap-noticias .cap-card--destaque {
    grid-column: span 6;
  }

  .cap-noticias .cap-card:nth-child(2),
  .cap-noticias .cap-card:nth-child(3) {
    grid-column: span 3;
  }
}

/* As três notícias seguintes, abaixo do carrossel: três colunas iguais. */
.cap-noticias--abaixo {
  margin-top: var(--esp-4);
}

@media (min-width: 64em) {
  .cap-noticias--abaixo .cap-card,
  .cap-noticias--abaixo .cap-card:nth-child(2),
  .cap-noticias--abaixo .cap-card:nth-child(3) {
    grid-column: span 4;
  }
}

/* ------------------------------------------------------------------ *
 * Carrossel das cinco notícias mais recentes (baixo, metade do antigo destaque)
 * ------------------------------------------------------------------ */

.cap-nc {
  position: relative;
  background: var(--c-fundo);
  border: 1px solid var(--c-borda);
  border-radius: var(--raio);
  overflow: hidden;
}

.cap-nc__trilho {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Com JavaScript só o slide ativo aparece; sem ele, os cinco ficam empilhados. */
.cap-nc.is-pronto .cap-nc__item:not(.is-ativo) {
  display: none;
}

.cap-nc.is-pronto .cap-nc__item.is-ativo {
  animation: cap-nc-entra 0.45s ease both;
}

@keyframes cap-nc-entra {
  from { opacity: 0; }
  to { opacity: 1; }
}

.cap-nc__slide {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100%;
}

.cap-nc__midia {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--cor-azul-claro-100);
  overflow: hidden;
}

.cap-nc__midia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cap-nc__corpo {
  display: flex;
  flex-direction: column;
  padding: var(--esp-3) var(--esp-3) 3.5rem;
}

.cap-nc__titulo {
  margin: 0 0 var(--esp-2);
  font-family: var(--f-titulo);
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem);
  line-height: 1.25;
}

.cap-nc__titulo a {
  color: var(--c-titulo);
  text-decoration: none;
}

/* O slide inteiro é clicável; os botões ficam acima. */
.cap-nc__titulo a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.cap-nc__titulo a:focus-visible {
  outline: none;
}

.cap-nc__titulo a:focus-visible::after {
  outline: 3px solid var(--c-foco-anel);
  outline-offset: -3px;
}

.cap-nc__resumo {
  margin: var(--esp-2) 0 0;
  color: var(--c-texto-suave);
  font-size: 0.95rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cap-nc__barra {
  position: absolute;
  right: var(--esp-3);
  bottom: var(--esp-3);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.cap-nc:not(.is-pronto) .cap-nc__barra {
  display: none;
}

.cap-nc__pontos {
  display: inline-flex;
  gap: 0.4rem;
  margin-left: 0.6rem;
}

.cap-nc__ponto {
  width: 0.6rem;
  height: 0.6rem;
  padding: 0;
  background: var(--cor-cinza-200);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.cap-nc__ponto.is-ativo {
  background: var(--cor-azul-escuro);
}

@media (min-width: 48em) {
  .cap-nc__slide {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    height: 22rem;
  }

  .cap-nc__midia {
    aspect-ratio: auto;
    height: 100%;
  }

  .cap-nc__corpo {
    justify-content: center;
    padding: var(--esp-4) var(--esp-4) 4rem var(--esp-5);
  }

  .cap-nc__titulo {
    font-size: clamp(1.25rem, 1rem + 0.7vw, 1.6rem);
  }

  .cap-nc__resumo {
    -webkit-line-clamp: 3;
  }
}

html[data-contraste="alto"] .cap-nc {
  background: #000000;
  border: 2px solid #ffffff;
}

html[data-contraste="alto"] .cap-nc__titulo a {
  color: #ffff00;
}

html[data-contraste="alto"] .cap-nc__ponto {
  background: #ffffff;
}

html[data-contraste="alto"] .cap-nc__ponto.is-ativo {
  background: #ffff00;
}

@media (prefers-reduced-motion: reduce) {
  .cap-nc.is-pronto .cap-nc__item.is-ativo {
    animation: none;
  }
}

.cap-card--destaque .cap-card__midia {
  aspect-ratio: 16 / 10;
}

.cap-card--destaque .cap-card__titulo {
  font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.7rem);
}

.cap-card--destaque .cap-card__resumo {
  font-size: 1rem;
}

/* ------------------------------------------------------------------ *
 * Destaques editoriais
 * ------------------------------------------------------------------ */

.cap-destaques {
  display: grid;
  gap: var(--esp-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.cap-destaque {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  min-height: 12rem;
  overflow: hidden;
  background: var(--cor-azul-escuro);
  border-radius: var(--raio);
  color: var(--cor-branco);
  text-decoration: none;
  transition: transform var(--transicao), box-shadow var(--transicao);
}

.cap-destaque:hover {
  transform: translateY(-3px);
  box-shadow: var(--sombra-2);
  color: var(--cor-branco);
}

.cap-destaque__midia,
.cap-destaque__midia img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cap-destaque__texto {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 2.5rem var(--esp-3) var(--esp-3);
  background: linear-gradient(to top, rgba(28, 38, 92, 0.94), rgba(28, 38, 92, 0));
  line-height: 1.3;
}

.cap-destaque__texto strong {
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: 1.1rem;
}

.cap-destaque__texto span {
  font-size: 0.9rem;
}

/* ------------------------------------------------------------------ *
 * Licitações
 * ------------------------------------------------------------------ */

.cap-licitacoes {
  display: grid;
  gap: var(--esp-4);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 64em) {
  .cap-licitacoes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }
}

.cap-licit-coluna {
  display: flex;
  flex-direction: column;
  padding: var(--esp-3);
  background: var(--c-fundo);
  border-top: 5px solid var(--cor-cinza-500);
  border-radius: var(--raio);
  box-shadow: var(--sombra-1);
}

.cap-licit-coluna--verde { border-top-color: var(--cor-verde); }
.cap-licit-coluna--laranja { border-top-color: var(--cor-laranja); }
.cap-licit-coluna--azul { border-top-color: var(--cor-azul-claro); }

.cap-licit-coluna__titulo {
  margin: 0 0 var(--esp-3);
  font-size: 1.15rem;
}

.cap-licit-coluna__aviso,
.cap-licit-coluna__vazio {
  margin: 0 0 var(--esp-3);
  color: var(--c-texto-suave);
  font-size: 0.9rem;
  font-style: italic;
}

.cap-licit-lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cap-licit-lista li {
  margin: 0;
  border-bottom: 1px solid var(--c-borda);
}

.cap-licit-lista li:last-child {
  border-bottom: 0;
}

.cap-licit {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.85rem 0.25rem;
  color: var(--c-texto);
  text-decoration: none;
}

.cap-licit:hover {
  background: var(--c-fundo-alt);
  color: var(--c-texto);
}

.cap-licit__topo,
.cap-licit__rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
}

.cap-licit__modalidade {
  color: var(--c-titulo);
  font-family: var(--f-titulo);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cap-licit__ano {
  color: var(--c-texto-suave);
  font-size: 0.85rem;
}

.cap-licit__processo {
  font-size: 0.85rem;
  font-weight: var(--fw-corpo-forte);
}

.cap-licit__objeto {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-size: 0.92rem;
  line-height: 1.45;
}

.cap-licit__situacao {
  padding: 0.1rem 0.7rem;
  background: var(--cor-cinza-200);
  color: #2a2a2a;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: var(--fw-corpo-forte);
}

.cap-licit__situacao.is-aberta {
  background: #d6f0da;
  color: #12571f;
}

.cap-licit__data {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--c-texto-suave);
  font-size: 0.82rem;
}

.cap-licit__data .cap-icone {
  width: 0.95rem;
  height: 0.95rem;
}

.cap-licit-coluna__rodape {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: var(--esp-3) 0 0;
}

/* ------------------------------------------------------------------ *
 * Esportes
 * ------------------------------------------------------------------ */

.cap-campeonato {
  --cap-esporte: var(--cor-cinza-500);
  display: flex;
  flex-direction: column;
  background: var(--c-fundo);
  border: 1px solid var(--c-borda);
  border-top: 5px solid var(--cap-esporte);
  border-radius: var(--raio);
  overflow: hidden;
}

.cap-campeonato--futebol { --cap-esporte: var(--cor-verde); }
.cap-campeonato--futsal { --cap-esporte: var(--cor-laranja); }
.cap-campeonato--volei-quadra { --cap-esporte: var(--cor-azul-claro); }
.cap-campeonato--volei-areia { --cap-esporte: var(--cor-amarelo); }

.cap-campeonato__cabeca {
  padding: var(--esp-3) var(--esp-3) 0;
}

.cap-campeonato__modalidade {
  display: inline-block;
  margin: 0 0 0.4rem;
  padding: 0.1rem 0.7rem;
  background: var(--cap-esporte);
  color: #141414;
  border-radius: 999px;
  font-family: var(--f-titulo);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cap-campeonato__titulo {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.3;
}

.cap-campeonato__corpo {
  flex: 1;
  padding: var(--esp-2) var(--esp-3) var(--esp-3);
}

.cap-campeonato__status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 var(--esp-2);
  color: var(--c-texto-suave);
  font-size: 0.8rem;
  font-weight: var(--fw-corpo-forte);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.cap-campeonato__status.is-campeao {
  color: #7a4d00;
}

.cap-jogo {
  margin: 0 0 var(--esp-3);
}

.cap-jogo__rotulo {
  margin: 0 0 0.3rem;
  color: var(--c-texto-suave);
  font-size: 0.78rem;
}

.cap-jogo__vazio {
  margin: 0;
  color: var(--c-texto-suave);
  font-size: 0.9rem;
  font-style: italic;
}

.cap-jogo__times {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem;
}

.cap-jogo__time {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  font-size: 0.85rem;
  line-height: 1.2;
}

.cap-jogo__time--fora {
  justify-content: flex-end;
  text-align: right;
}

.cap-jogo__time img {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  object-fit: contain;
}

.cap-jogo__placar {
  padding: 0.25rem 0.6rem;
  background: var(--cor-azul-escuro);
  color: var(--cor-branco);
  border-radius: var(--raio-p);
  font-family: var(--f-titulo);
  font-size: 0.9rem;
  white-space: nowrap;
}

.cap-jogo__placar.is-futuro {
  background: var(--c-fundo-alt);
  color: var(--c-texto);
  border: 1px solid var(--c-borda);
}

.cap-campeao {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 var(--esp-2);
}

.cap-campeao img {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
}

.cap-campeao strong {
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: 1.15rem;
}

.cap-campeonato__numeros {
  margin: 0;
  color: var(--c-texto-suave);
  font-size: 0.85rem;
}

.cap-campeonato__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem var(--esp-3);
  background: var(--c-fundo-alt);
  border-top: 1px solid var(--c-borda);
  color: var(--c-link);
  font-family: var(--f-titulo);
  text-decoration: none;
}

.cap-campeonato__link:hover {
  background: var(--cor-azul-escuro);
  color: var(--cor-branco);
}

/* ------------------------------------------------------------------ *
 * Campanha
 * ------------------------------------------------------------------ */

.cap-campanha {
  padding: var(--esp-5) 0 var(--esp-5);
}

.cap-campanha a {
  display: block;
}

.cap-campanha img {
  width: 100%;
  max-width: 1200px;
  height: auto;
  margin: 0 auto;
  border-radius: var(--raio);
}