/* ==========================================================================
   CETEFE — Novo site institucional
   Design system: verde institucional, alto contraste, mobile-first
   ========================================================================== */

:root {
  --verde: #048c34;
  --verde-escuro: #036427;
  --verde-claro: #e6f4ec;
  --rosa: #cc3366;
  --ink: #1c2321;
  --ink-suave: #4a5551;
  --grafite: #3c4448;
  --branco: #ffffff;
  --cinza-bg: #f5f7f6;
  --borda: #dde4e1;
  --sombra: 0 2px 12px rgba(28, 35, 33, 0.08);
  --raio: 12px;
  --largura-max: 1140px;
  --fonte: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  font-family: var(--fonte);
  color: var(--ink);
  background: var(--branco);
  line-height: 1.6;
  font-size: 1rem;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--verde-escuro); }

.container {
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* Link "pular para o conteúdo" — acessibilidade por teclado */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink);
  color: var(--branco);
  padding: 0.75rem 1.25rem;
  z-index: 200;
  border-radius: 0 0 var(--raio) 0;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--rosa);
  outline-offset: 2px;
}

/* Texto visível apenas para leitores de tela */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Cabeçalho e navegação
   ========================================================================== */


/* ---- Barra de gratuidade (grafite) ---- */

.barra-gratuidade {
  background: var(--grafite);
  color: var(--branco);
  padding: 0.55rem 1rem;
  text-align: center;
}

.barra-gratuidade p {
  margin: 0;
  max-width: var(--largura-max);
  margin-inline: auto;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  /* O HTML guarda o texto em caixa normal; a maiúscula é só visual. */
  text-transform: uppercase;
}

.barra-gratuidade a {
  color: var(--branco);
  text-underline-offset: 3px;
}
.barra-gratuidade a:hover { text-decoration: none; }

/* ---- Aviso de abertura (modal) ---- */

.aviso-modal {
  border: none;
  border-radius: var(--raio);
  padding: 0;
  max-width: 34rem;
  width: calc(100% - 2rem);
  /* Em telas baixas o aviso é mais alto que a janela; rola por dentro em vez
     de vazar para fora e deixar o botão "Entendi" inalcançável. */
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(28, 35, 33, 0.35);
  color: var(--ink);
}

.aviso-modal::backdrop {
  background: rgba(28, 35, 33, 0.6);
}

.aviso-modal-arte {
  display: block;
  width: 100%;
  height: auto;
  background: var(--verde-claro);
  border-radius: var(--raio) var(--raio) 0 0;
}

.aviso-modal-texto { padding: 1.5rem; }

.aviso-modal-texto h2 {
  font-size: 1.15rem;
  color: var(--verde-escuro);
  margin-bottom: 0.75rem;
}

.aviso-modal-texto p {
  font-size: 0.92rem;
  margin-bottom: 0.75rem;
  color: var(--ink-suave);
}

.aviso-modal-docs a {
  font-weight: 700;
  color: var(--verde-escuro);
}

.aviso-modal-ok {
  display: block;
  width: 100%;
  margin-top: 1rem;
  text-align: center;
  border: none;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}

.aviso-modal-fechar {
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--borda);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
}
.aviso-modal-fechar:hover { background: var(--branco); }

.site-header {
  background: var(--verde);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--sombra);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 1.25rem;
  max-width: var(--largura-max);
  margin: 0 auto;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--branco);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.03em;
}

.logo-img {
  height: 52px;
  width: auto;
  flex-shrink: 0;
}

.logo small {
  display: block;
  font-size: 0.62rem;
  font-weight: 400;
  line-height: 1.25;
  max-width: 240px;
}

/* Botão hambúrguer (mobile) */
.menu-toggle {
  display: none;
  background: none;
  border: 2px solid var(--branco);
  border-radius: 8px;
  color: var(--branco);
  padding: 0.45rem 0.7rem;
  font-size: 1.25rem;
  cursor: pointer;
  line-height: 1;
}

.nav-principal ul {
  display: flex;
  gap: 0.25rem;
  list-style: none;
  align-items: center;
}

.nav-principal a,
.nav-principal button.submenu-toggle {
  display: block;
  color: var(--branco);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.7rem 0.9rem;
  border-radius: 8px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.nav-principal a:hover,
.nav-principal a:focus-visible,
.nav-principal button.submenu-toggle:hover,
.nav-principal button.submenu-toggle:focus-visible {
  background: var(--verde-escuro);
}

.nav-principal .destaque-denuncia > a {
  background: var(--rosa);
  font-weight: 700;
}
.nav-principal .destaque-denuncia > a:hover,
.nav-principal .destaque-denuncia > a:focus-visible {
  background: #a82753;
}

/* Submenu (Institucional) */
.tem-submenu { position: relative; }

.submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--branco);
  /* Largura ditada pelo item mais longo — "Plano de Ação — Mundo do Trabalho":
     258px de texto + 28,8px de recuo do item + 16px de recuo do menu.
     Com menos que isso ele quebra em duas linhas e o menu fica irregular. */
  min-width: 310px;
  border-radius: var(--raio);
  box-shadow: 0 8px 24px rgba(28, 35, 33, 0.18);
  padding: 0.5rem;
  flex-direction: column;
  gap: 0;
}

.tem-submenu[data-aberto="true"] .submenu { display: flex; }

.submenu a {
  color: var(--ink);
  font-weight: 500;
  border-radius: 8px;
}
.submenu a:hover,
.submenu a:focus-visible {
  background: var(--verde-claro);
  color: var(--verde-escuro);
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  background: linear-gradient(135deg, var(--verde-escuro) 0%, var(--verde) 60%, #06a844 100%);
  background-size: 200% 200%;
  animation: hero-gradiente 14s ease-in-out infinite alternate;
  color: var(--branco);
  padding: 3.5rem 0 1.5rem;
  position: relative;
  overflow: hidden;
}

@keyframes hero-gradiente {
  from { background-position: 0% 0%; }
  to   { background-position: 100% 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero { animation: none; }
}

.hero-titulo {
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 1rem;
  text-wrap: balance;
}

/* Nomes de serviço são longos: um degrau abaixo para não dominarem o slide */
.hero-titulo.longo {
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  line-height: 1.2;
}

/* Etiqueta acima do título do slide */
.slide-etiqueta {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #cdeeda;
  margin-bottom: 0.5rem;
}

.hero p.lead {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  max-width: 34em;
  margin-bottom: 2rem;
  color: #eafaf0;
}

.btn {
  display: inline-block;
  padding: 0.85rem 1.6rem;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  font-size: 1rem;
  border: 2px solid transparent;
}

.btn-primario { background: var(--branco); color: var(--verde-escuro); }
.btn-primario:hover { background: var(--verde-claro); }

.btn-secundario { border-color: var(--branco); color: var(--branco); }
.btn-secundario:hover { background: rgba(255, 255, 255, 0.15); }

/* Cabeçalho de página interna (hero compacto, sem carrossel) */
.pagina-topo {
  padding: 3rem 0 3.5rem;
}
.pagina-topo .lead {
  font-size: clamp(1rem, 2vw, 1.15rem);
  max-width: 38em;
  color: #eafaf0;
}

/* ---- banner com ilustração ao lado ---- */

.hero-com-arte {
  display: grid;
  gap: 2rem;
  align-items: center;
}

/* Uma coluna só até 860px: lado a lado, o texto ficaria estreito demais e o
   título longo quebraria em palavras soltas. */
@media (min-width: 860px) {
  .hero-com-arte { grid-template-columns: 1.15fr 0.85fr; }
}

.hero-arte {
  width: 100%;
  height: auto;
  /* A ilustração tem fundo claro próprio. Sem o arredondamento ela vira um
     retângulo cru sobre o gradiente; com ele lê-se como cartão, do mesmo
     jeito que na página inicial. */
  border-radius: var(--raio);
  box-shadow: 0 10px 28px rgba(2, 40, 18, 0.22);
}

/* ==========================================================================
   Seções gerais
   ========================================================================== */

.secao { padding: 4rem 0; }
.secao.alt { background: var(--cinza-bg); }

.secao-titulo {
  text-align: center;
  max-width: 42em;
  margin: 0 auto 2.75rem;
}

.secao-titulo h2 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  color: var(--verde-escuro);
  margin-bottom: 0.5rem;
}

.secao-titulo p { color: var(--ink-suave); }

/* ==========================================================================
   Faixa de acesso — Acontece na CETEFE
   Substituiu os três botões 3D, que repetiam os cartões de Serviços.
   ========================================================================== */

.faixa-acesso {
  /* Verde escuro, e não --verde: branco sobre --verde dá 4,37:1 e reprova no
     mínimo AA de 4,5:1. Sobre --verde-escuro sobe para 7,35:1. */
  background: var(--verde-escuro);
  color: var(--branco);
  padding: 1.75rem 0;
}

.faixa-acesso-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.faixa-acesso h2 {
  font-size: 1.35rem;
  margin-bottom: 0.15rem;
  color: var(--branco);
}

.faixa-acesso p {
  margin: 0;
  /* 0.9 de opacidade derrubaria o contraste de novo; branco cheio. */
  color: var(--branco);
}

/* O botão já é branco vazado (.btn-secundario) e cai bem sobre o verde. */

/* Cards de programas */
.grade-programas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.card {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 2rem 1.75rem;
  box-shadow: var(--sombra);
  display: flex;
  flex-direction: column;
}

.card .icone {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--verde-claro);
  display: grid;
  place-items: center;
  font-size: 1.8rem;
  margin-bottom: 1.1rem;
}

.card h3 { font-size: 1.2rem; margin-bottom: 0.6rem; color: var(--verde-escuro); }

/* ---- Cartões de Ações Socioassistenciais ---- */

/* São dois serviços: duas colunas mais largas acomodam os nomes longos */
.grade-servicos {
  grid-template-columns: repeat(2, 1fr);
  max-width: 62rem;
  margin: 0 auto;
}

/* Os cartões de serviço usam a mesma ilustração dos botões 3D, e não um ícone.
   A arte é larga (cerca de 1536x820), então ocupa uma faixa no topo do cartão em
   vez do quadrado de 56px do .icone — nele a cena ficaria ilegível.
   As margens negativas anulam o padding do .card para a faixa sangrar até a borda. */
.card-servico-arte {
  margin: -2rem -1.75rem 1.25rem;
  background: var(--verde-claro);
  border-radius: var(--raio) var(--raio) 0 0;
  padding: 0.75rem;
  display: grid;
  place-items: center;
}

.card-servico-arte img {
  width: 100%;
  max-height: 11rem;
  object-fit: contain;
  display: block;
}

.card-etiqueta {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--verde);
  margin-bottom: 0.35rem;
  flex-grow: 0;
}

.card-servico h3 {
  font-size: 1.3rem;
  line-height: 1.25;
  text-wrap: balance;
  margin-bottom: 0.75rem;
}
.card p { color: var(--ink-suave); flex-grow: 1; margin-bottom: 1.25rem; }

.card .link-card {
  font-weight: 700;
  text-decoration: none;
  color: var(--verde-escuro);
}
.card .link-card:hover { text-decoration: underline; }

/* Notícias */
/* ---- Carrossel de notícias (página inicial) ---- */

.carrossel-noticias {
  position: relative;
}

/* A trilha é uma faixa que rola na horizontal, com encaixe por cartão.
   Rolagem nativa em vez de transform: funciona no toque, na roda do mouse e
   com o teclado sem nenhum código, e o navegador cuida da inércia. */
.grade-noticias {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* espaço para a sombra dos cartões não ser cortada */
  padding: 0.5rem 0.25rem 1rem;
  scrollbar-width: thin;
}

.grade-noticias .noticia {
  flex: 0 0 calc((100% - 3rem) / 3);
  scroll-snap-align: start;
}

@media (prefers-reduced-motion: reduce) {
  .grade-noticias { scroll-behavior: auto; }
}

/* Setas: ficam fora da faixa para não cobrir o conteúdo dos cartões. */
.nav-noticia {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--borda);
  background: var(--branco);
  color: var(--verde-escuro);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--sombra);
}
.nav-noticia:hover { background: var(--verde-claro); }
.nav-noticia-ant { left: -21px; }
.nav-noticia-prox { right: -21px; }

/* Sem espaço nas laterais em telas estreitas: aí as setas somem e a pessoa
   arrasta a faixa com o dedo, que é o gesto natural no celular. */
@media (max-width: 1180px) {
  .nav-noticia { display: none; }
}

.noticias-controles {
  text-align: center;
  margin-top: 0.25rem;
}

.noticias-todas {
  text-align: center;
  margin-top: 1rem;
  color: var(--ink-suave);
}
.noticias-todas a { font-weight: 700; }

.noticia { overflow: hidden; padding: 0; }

.noticia .thumb {
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--verde-claro), #c8e8d4);
  display: grid;
  place-items: center;
  font-size: 2.5rem;
  /* A capa é uma foto real; sem isto ela vazaria dos cantos arredondados. */
  overflow: hidden;
  position: relative;
}

/* As fotos vêm em retrato e paisagem; 'cover' preenche o 16/9 sem distorcer.
   Posição absoluta porque o 'place-items: center' do .thumb (herdado de quando
   ali só havia um emoji) dimensiona o item pelo conteúdo, e aí height:100%
   voltaria a 'auto' e a foto vazaria para fora do recorte. */
.noticia .thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.25s ease;
}

.noticia:hover .thumb img { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .noticia:hover .thumb img { transform: none; }
}

.noticia .corpo { padding: 1.4rem 1.5rem 1.6rem; }
.noticia time { font-size: 0.85rem; color: var(--ink-suave); }
.noticia h3 { font-size: 1.05rem; margin: 0.4rem 0 0.6rem; }
.noticia h3 a { color: var(--ink); text-decoration: none; }
.noticia h3 a:hover { color: var(--verde-escuro); text-decoration: underline; }

/* Parceiros */
/* ---- Carrossel de parceiros institucionais ---- */

.parceiros-area {
  position: relative;
}

/* Agora quem rola é o próprio contêiner, não uma animação de transform.
   Isso é o que permite arrastar com o mouse, usar a roda e o toque — o
   navegador cuida da inércia e dos limites sem uma linha de código. */
.parceiros-carrossel {
  overflow-x: auto;
  overflow-y: hidden;
  /* Esmaece as pontas para os cartões não aparecerem cortados na borda */
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  /* A barra de rolagem some: a navegação é pelas setas, pelo arrasto ou pela roda */
  scrollbar-width: none;
  cursor: grab;
}
.parceiros-carrossel::-webkit-scrollbar { display: none; }
.parceiros-carrossel.arrastando { cursor: grabbing; }

.parceiros-trilha {
  display: flex;
  width: max-content;
}

.parceiros-grupo {
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0 0.5rem;
  list-style: none;
}

.parceiro {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 0.9rem 1rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 13.5rem;
  height: 9.5rem;
}

.parceiro img {
  max-width: 100%;
  /* Limite em rem, e não em porcentagem: a altura do cartão é automática para
     o item centralizado, então max-height:100% seria ignorado e a logomarca
     transbordava. */
  max-height: 7rem;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  /* Sem isto, arrastar sobre a logomarca dispara o arrasto nativo de imagem
     do navegador em vez de rolar a faixa. */
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

/* Setas: fora da faixa, para não cobrir os cartões. */
.nav-parceiro {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--borda);
  background: var(--branco);
  color: var(--verde-escuro);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--sombra);
}
.nav-parceiro:hover { background: var(--verde-claro); }
.nav-parceiro-ant { left: -21px; }
.nav-parceiro-prox { right: -21px; }

/* Sem espaço nas laterais em telas estreitas: ali o gesto natural é arrastar. */
@media (max-width: 1180px) {
  .nav-parceiro { display: none; }
}

.parceiros-acoes {
  text-align: center;
  margin-top: 1.25rem;
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* Giro acelerado: só a duração muda, então a faixa não dá salto ao trocar de
   ritmo — o navegador reposiciona a animação proporcionalmente. */
.parceiros-trilha.rapida {
  animation-duration: 14s;
}

.parceiros-pausa {
  background: var(--branco);
  border: 1.5px solid var(--borda);
  border-radius: 999px;
  padding: 0.4rem 1rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink-suave);
  cursor: pointer;
}
.parceiros-pausa:hover { border-color: var(--verde); color: var(--verde-escuro); }


/* Transparência / CTA */
.cta-faixa {
  background: var(--verde-escuro);
  color: var(--branco);
  border-radius: var(--raio);
  padding: 2.5rem 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.cta-faixa h2 { font-size: 1.5rem; margin-bottom: 0.35rem; }
.cta-faixa p { color: #d8f2e2; max-width: 38em; }

/* ==========================================================================
   Contato + rodapé
   ========================================================================== */

.grade-contato {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 2.5rem;
  align-items: start;
}

.bloco-contato address {
  font-style: normal;
  color: var(--ink-suave);
  margin-bottom: 1.25rem;
}

.bloco-contato h3 { color: var(--verde-escuro); margin-bottom: 0.75rem; }

.form-contato { display: grid; gap: 1rem; }

.form-contato label {
  font-weight: 600;
  display: block;
  margin-bottom: 0.3rem;
}

.form-contato input,
.form-contato select,
.form-contato textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1.5px solid var(--borda);
  border-radius: 8px;
  font: inherit;
  background: var(--branco);
  color: var(--ink);
}

/* Só na vertical: arrastar na horizontal estoura o formulário. */
.form-contato textarea {
  min-height: 9rem;
  resize: vertical;
  line-height: 1.5;
}

.form-contato input:focus,
.form-contato select:focus,
.form-contato textarea:focus {
  border-color: var(--verde);
  outline: 3px solid var(--verde-claro);
}

.opcional {
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--ink-suave);
}

.dica-campo {
  font-size: 0.85rem;
  color: var(--ink-suave);
  margin-top: 0.3rem;
}

.form-contato button {
  justify-self: start;
  background: var(--verde);
  color: var(--branco);
  border: none;
  padding: 0.85rem 2rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
}
.form-contato button:hover { background: var(--verde-escuro); }

.site-footer {
  background: var(--ink);
  color: #cfd8d4;
  padding: 3rem 0 2rem;
  font-size: 0.95rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

.site-footer h3 { color: var(--branco); font-size: 1rem; margin-bottom: 0.8rem; }
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: 0.45rem; }
.site-footer a { color: #9fe3b8; text-decoration: none; }
.site-footer a:hover, .site-footer a:focus-visible { text-decoration: underline; }

.footer-legal {
  border-top: 1px solid #3a443f;
  padding-top: 1.25rem;
  text-align: center;
  font-size: 0.85rem;
  color: #93a09a;
}

/* ==========================================================================
   Texto legal (Política de Privacidade e similares)
   ========================================================================== */

.selo-vigencia {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  font-size: 0.9rem;
}

.texto-legal {
  max-width: 44em;
  margin: 0 auto;
}

.texto-legal h2 {
  color: var(--verde-escuro);
  font-size: clamp(1.35rem, 2.5vw, 1.7rem);
  margin: 2.75rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--verde-claro);
  scroll-margin-top: 5.5rem; /* compensa o cabeçalho fixo ao pular por âncora */
}

.texto-legal h3 {
  color: var(--ink);
  font-size: 1.1rem;
  margin: 1.75rem 0 0.6rem;
}

.texto-legal p {
  margin-bottom: 1rem;
  color: var(--ink-suave);
}

.texto-legal a { color: var(--verde-escuro); }

/* Sumário navegável */
.sumario {
  background: var(--cinza-bg);
  border: 1px solid var(--borda);
  border-left: 4px solid var(--verde);
  border-radius: var(--raio);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
}

.sumario h2 {
  font-size: 1rem;
  margin: 0 0 0.6rem;
  border: none;
  padding: 0;
  color: var(--ink);
}

.sumario ol {
  margin: 0;
  padding-left: 1.2rem;
}

.sumario li { margin-bottom: 0.3rem; }
.sumario a { color: var(--verde-escuro); }

/* Lista de tipos de cookie */
.lista-cookies,
.lista-hipoteses { margin: 1rem 0; }

.lista-cookies dt,
.lista-hipoteses dt {
  font-weight: 700;
  color: var(--verde-escuro);
  margin-top: 1.25rem;
}

.lista-cookies dd,
.lista-hipoteses dd {
  margin: 0.35rem 0 0;
  color: var(--ink-suave);
  padding-left: 1rem;
  border-left: 2px solid var(--borda);
}

/* Referência do inciso, ao lado do nome da hipótese legal */
.art-ref {
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--ink-suave);
  background: var(--cinza-bg);
  border: 1px solid var(--borda);
  border-radius: 3px;
  padding: 0.05rem 0.4rem;
  margin-left: 0.4rem;
  white-space: nowrap;
}

.lista-compromisso {
  padding-left: 1.5rem;
  color: var(--ink-suave);
}
.lista-compromisso li { margin-bottom: 0.75rem; }

/* Aviso de texto em revisão — remover quando o Comitê aprovar */
.aviso-revisao {
  background: #8a5a10;
  color: #ffffff;
  padding: 0.85rem 0;
  font-size: 0.95rem;
}
.aviso-revisao strong { color: #ffe6b8; }

/* Trecho pendente de preenchimento antes da publicação */
.preencher {
  background: #ffe9a8;
  color: #5c3c05;
  border-bottom: 2px dotted #8a5a10;
  padding: 0.1em 0.35em;
  border-radius: 3px;
  font-weight: 600;
}
p.preencher {
  display: block;
  border-bottom: none;
  border-left: 4px solid #8a5a10;
  border-radius: 0 6px 6px 0;
  padding: 0.9rem 1.2rem;
  font-weight: 400;
}
p.preencher::before {
  content: "A preencher — ";
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.8em;
  letter-spacing: 0.05em;
}

.bloco-contato-dpo {
  background: var(--cinza-bg);
  border-left: 4px solid var(--verde);
  border-radius: 0 6px 6px 0;
  padding: 1rem 1.25rem;
}

/* Referência ao dispositivo legal, ao fim do parágrafo */
.ref-legal {
  display: inline-block;
  font-size: 0.78rem;
  color: var(--ink-suave);
  background: var(--cinza-bg);
  border: 1px solid var(--borda);
  border-radius: 3px;
  padding: 0.05rem 0.4rem;
  margin-left: 0.35rem;
  white-space: nowrap;
}

/* Quadro de finalidades e bases legais */
.rolagem { overflow-x: auto; margin-bottom: 1.25rem; }

.tabela-bases {
  border-collapse: collapse;
  width: 100%;
  min-width: 38rem;
  font-size: 0.93rem;
}
.tabela-bases caption {
  text-align: left;
  font-size: 0.82rem;
  color: var(--ink-suave);
  padding-bottom: 0.5rem;
}
.tabela-bases th,
.tabela-bases td {
  text-align: left;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--borda);
  vertical-align: top;
}
.tabela-bases thead th {
  color: var(--verde-escuro);
  border-bottom: 2px solid var(--verde-claro);
  white-space: nowrap;
}
.tabela-bases tbody tr:last-child td { border-bottom: none; }
.tabela-bases .art {
  display: block;
  font-size: 0.8rem;
  color: var(--ink-suave);
}

/* Lista dos direitos do titular */
.direitos {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.direitos li {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 0.8rem;
  background: var(--cinza-bg);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin: 0;
  align-items: baseline;
  color: var(--ink-suave);
}
.direitos .letra {
  font-weight: 700;
  color: var(--verde-escuro);
}

.nota-vigencia {
  margin-top: 2rem;
  padding: 1rem 1.25rem;
  background: var(--verde-claro);
  border-radius: var(--raio);
  color: var(--verde-escuro) !important;
}

/* ==========================================================================
   Lista de documentos (página institucional)
   ========================================================================== */

.grade-docs {
  list-style: none;
  display: grid;
  /* min(300px, 100%) e não 300px puro: em telas mais estreitas que isso, o
     mínimo fixo faria o cartão ultrapassar a largura da tela. */
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 1rem;
}

.doc-link {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 1rem 1.25rem;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  box-shadow: var(--sombra);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.doc-link:hover,
.doc-link:focus-visible {
  transform: translateY(-3px);
  border-color: var(--verde);
  box-shadow: 0 8px 24px rgba(4, 140, 52, 0.18);
  color: var(--verde-escuro);
}

.doc-icone {
  font-size: 1.5rem;
  flex-shrink: 0;
}

/* ---- Atalhos do Portal da Transparência ---- */
.secao-atalhos { padding: 2rem 0 0; }

/* O cabeçalho é sticky: sem esta folga o topo da seção alvo para atrás dele
   e o visitante cai já dentro do texto, sem ver o título. */
.secao[id] { scroll-margin-top: 5.5rem; }

.atalhos-transparencia {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  /* Espaçamento apertado o suficiente para os cinco atalhos caberem numa
     linha só no container de 1100px — com 1,25rem de padding o quinto
     descia sozinho para a segunda linha. */
  gap: 0.65rem;
  justify-content: center;
}

.atalhos-transparencia a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--cinza-bg);
  border: 1px solid var(--borda);
  border-radius: 999px;
  padding: 0.6rem 1.05rem;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.95rem;
}
.atalhos-transparencia a:hover,
.atalhos-transparencia a:focus-visible {
  background: var(--verde-claro);
  border-color: var(--verde);
  color: var(--verde-escuro);
}

/* Observação dentro de uma sanfona, antes da lista */
.nota-acordeao {
  margin: 0 1.25rem 0.5rem;
  padding: 0.6rem 0.9rem;
  background: var(--verde-claro);
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--verde-escuro);
}

.subtitulo-docs {
  color: var(--verde-escuro);
  margin-bottom: 1rem;
  font-size: 1.15rem;
}

/* Sanfonas de Normas Técnicas e Resoluções */
.lista-acordeoes {
  display: grid;
  gap: 1rem;
}

.acordeao-docs {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  overflow: hidden;
}

.acordeao-docs summary {
  cursor: pointer;
  padding: 1.1rem 1.4rem;
  font-weight: 700;
  color: var(--verde-escuro);
  font-size: 1.1rem;
  list-style: none;
}
.acordeao-docs summary::-webkit-details-marker { display: none; }
.acordeao-docs summary::before {
  content: "▸ ";
  transition: none;
}
.acordeao-docs[open] summary::before { content: "▾ "; }
.acordeao-docs summary:hover { background: var(--verde-claro); }

.qtd-docs {
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--ink-suave);
}

.acordeao-docs .grade-docs {
  padding: 0 1.25rem 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
  .doc-link:hover, .doc-link:focus-visible { transform: none; }
}

/* ==========================================================================
   Aviso de consentimento de cookies
   ========================================================================== */

.aviso-cookies {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 300; /* acima do cabeçalho fixo */
  background: var(--ink);
  color: #eef2f0;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
  /* Sem animação de entrada de propósito: um aviso de consentimento preso no
     primeiro quadro de uma animação ficaria invisível. */
}
.aviso-cookies[hidden] { display: none; }

.aviso-cookies-inner {
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: 1.1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.aviso-cookies-texto {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  flex: 1 1 26rem;
}
.aviso-cookies-texto strong { color: var(--branco); }
.aviso-cookies-texto a { color: #9fe3b8; }

.aviso-cookies-acoes {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}

/* Recusar e Aceitar têm o mesmo tamanho e peso: a recusa não pode ser
   mais difícil que o aceite. */
.btn-cookie {
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.7rem 1.6rem;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  min-width: 8.5rem;
}

.btn-cookie-recusar {
  background: var(--branco);
  color: var(--ink);
}
.btn-cookie-recusar:hover { background: #dfe6e2; }

.btn-cookie-aceitar {
  background: var(--verde-escuro);
  color: var(--branco);
}
.btn-cookie-aceitar:hover { background: var(--verde); }

.btn-cookie:focus-visible {
  outline: 3px solid #9fe3b8;
  outline-offset: 2px;
}

@media (max-width: 680px) {
  .aviso-cookies-inner { padding: 1rem; gap: 0.9rem; }
  .aviso-cookies-acoes { width: 100%; }
  .btn-cookie { flex: 1; min-width: 0; padding: 0.7rem 0.5rem; }
}

/* ==========================================================================
   Assistente virtual (IARAG)
   ========================================================================== */

.assistente-abrir {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 150;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  background: var(--verde);
  color: var(--branco);
  font-size: 1.7rem;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(3, 100, 39, 0.4);
  display: grid;
  place-items: center;
  transition: transform 0.2s ease, background 0.2s ease;
}
.assistente-abrir:hover { background: var(--verde-escuro); transform: scale(1.06); }

.assistente-painel {
  position: fixed;
  bottom: 6.5rem;
  right: 1.5rem;
  z-index: 150;
  width: min(380px, calc(100vw - 2rem));
  height: min(540px, calc(100vh - 9rem));
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(28, 35, 33, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.assistente-painel[hidden] { display: none; }

.assistente-topo {
  background: var(--verde);
  color: var(--branco);
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.assistente-titulo { font-weight: 700; }

.assistente-fechar {
  background: none;
  border: none;
  color: var(--branco);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
}
.assistente-fechar:hover { background: rgba(255, 255, 255, 0.2); }

.assistente-mensagens {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: var(--cinza-bg);
}

.msg {
  max-width: 85%;
  padding: 0.65rem 0.9rem;
  border-radius: 14px;
  font-size: 0.93rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.msg-bot {
  background: var(--branco);
  border: 1px solid var(--borda);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}

.msg-usuario {
  background: var(--verde);
  color: var(--branco);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}

.msg-aguardando { color: var(--ink-suave); font-style: italic; }

.msg-fontes {
  align-self: flex-start;
  font-size: 0.8rem;
  color: var(--ink-suave);
  max-width: 85%;
}
.msg-fontes a { color: var(--verde-escuro); }

.assistente-form {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem;
  border-top: 1px solid var(--borda);
  background: var(--branco);
}

.assistente-form input {
  flex: 1;
  padding: 0.65rem 0.9rem;
  border: 1.5px solid var(--borda);
  border-radius: 999px;
  font: inherit;
  min-width: 0;
}
.assistente-form input:focus {
  border-color: var(--verde);
  outline: 3px solid var(--verde-claro);
}

.assistente-form button {
  background: var(--verde);
  color: var(--branco);
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.1rem;
  cursor: pointer;
  flex-shrink: 0;
}
.assistente-form button:hover { background: var(--verde-escuro); }
.assistente-form button:disabled { opacity: 0.5; cursor: default; }

.assistente-aviso {
  font-size: 0.72rem;
  color: var(--ink-suave);
  text-align: center;
  padding: 0 0.75rem 0.6rem;
  background: var(--branco);
}

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

@media (max-width: 900px) {
  .grade-programas { grid-template-columns: 1fr 1fr; }
  /* dois cartões por vez na faixa de notícias */
  .grade-noticias .noticia { flex-basis: calc((100% - 1.5rem) / 2); }
  .grade-servicos { grid-template-columns: 1fr; max-width: 34rem; }
  /* Na faixa estreita o botão vai para baixo do texto, alinhado à esquerda. */
  .faixa-acesso-inner { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .grade-contato { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 680px) {
  .menu-toggle { display: block; }

  .nav-principal {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--verde-escuro);
    box-shadow: var(--sombra);
    padding: 0.75rem;
  }
  .nav-principal[data-aberto="true"] { display: block; }

  .nav-principal ul { flex-direction: column; align-items: stretch; gap: 0.15rem; }
  .nav-principal a, .nav-principal button.submenu-toggle { width: 100%; text-align: left; }

  .submenu {
    position: static;
    box-shadow: none;
    background: rgba(255, 255, 255, 0.08);
    min-width: 0;
  }
  .submenu a { color: var(--branco); }
  .submenu a:hover, .submenu a:focus-visible { background: rgba(255, 255, 255, 0.15); color: var(--branco); }

  .grade-programas, .footer-grid { grid-template-columns: 1fr; }
  /* um cartão por vez, arrastando com o dedo */
  .grade-noticias .noticia { flex-basis: 100%; }
  .secao { padding: 3rem 0; }
  .hero { padding: 2.5rem 0 0.75rem; }
  }

/* ==========================================================================
   Notícias — Acontece na CETEFE
   ========================================================================== */

.noticia-completa {
  max-width: 48rem;
  margin: 0 auto 3.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--borda);
}
.noticia-completa:last-child { border-bottom: none; }

.noticia-data {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--verde);
  margin-bottom: 0.35rem;
}

.noticia-completa h2 {
  font-size: 1.5rem;
  color: var(--verde-escuro);
  line-height: 1.25;
  text-wrap: balance;
  margin-bottom: 1rem;
}

.noticia-completa p { margin-bottom: 1rem; }

.galeria-noticia {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.6rem;
  margin-top: 1.5rem;
  padding: 0;
}

.galeria-noticia img {
  width: 100%;
  /* Recorte uniforme: as fotos vêm em retrato e paisagem misturados, e sem
     isto a grade fica com alturas irregulares. */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--borda);
  transition: transform 0.2s ease;
}

.galeria-noticia a:hover img,
.galeria-noticia a:focus-visible img {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .galeria-noticia a:hover img,
  .galeria-noticia a:focus-visible img { transform: none; }
}

/* ==========================================================================
   Entrada da home — grid em blocos (bento)
   ========================================================================== */

.entrada-grid {
  /* Fundo branco: quem carrega cor e relevo são os blocos. */
  background: var(--branco);
  padding: 3rem 0 3.5rem;
}

/* Três colunas: o bloco principal ocupa duas delas e duas linhas; os dois
   serviços empilham na terceira; a linha de baixo leva três blocos menores. */
.grade-entrada {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  grid-template-areas:
    "principal principal trabalho"
    "principal principal paradesporto"
    "anos      noticia   transparencia";
}

.bloco-principal    { grid-area: principal; }
.bloco-trabalho     { grid-area: trabalho; }
.bloco-paradesporto { grid-area: paradesporto; }
.bloco-anos         { grid-area: anos; }
.bloco-noticia      { grid-area: noticia; }
.bloco-transparencia{ grid-area: transparencia; }

.bloco-entrada {
  border-radius: var(--raio);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: var(--branco);
  border: 1px solid var(--borda);
  color: var(--ink);
  /* Relevo: sombra em três camadas, a mais distante puxando o verde
     institucional. É o mesmo recurso dos antigos botões 3D. */
  box-shadow:
    0 1px 2px rgba(28, 35, 33, 0.07),
    0 8px 18px rgba(28, 35, 33, 0.10),
    0 20px 40px rgba(4, 140, 52, 0.09);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

a.bloco-entrada:hover,
a.bloco-entrada:focus-visible {
  transform: translateY(-6px);
  box-shadow:
    0 2px 4px rgba(28, 35, 33, 0.09),
    0 16px 30px rgba(28, 35, 33, 0.14),
    0 34px 60px rgba(4, 140, 52, 0.16);
}

@media (prefers-reduced-motion: reduce) {
  a.bloco-entrada:hover,
  a.bloco-entrada:focus-visible { transform: none; }
}

.bloco-etiqueta {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  /* Verde escuro, não --verde: a etiqueta é pequena e em negrito, então vale o
     mínimo de texto normal (4,5:1). Sobre branco, --verde dá só 4,37:1. */
  color: var(--verde-escuro);
}

.bloco-entrada h2 {
  font-size: 1.15rem;
  line-height: 1.25;
  color: var(--verde-escuro);
  text-wrap: balance;
}

.bloco-apoio {
  font-size: 0.9rem;
  margin-top: 0.4rem;
  color: var(--ink-suave);
}

/* ---- bloco principal ---- */

.bloco-principal {
  justify-content: center;
  padding: 2.25rem 2rem;
  /* Único bloco colorido: ancora a marca e cria o ponto de entrada do olhar.
     As duas pontas do gradiente são escuras de propósito — terminar em --verde
     deixava o parágrafo em 4,37:1, abaixo do mínimo AA. */
  background: linear-gradient(135deg, var(--verde-escuro), #04702c);
  border-color: var(--verde-escuro);
  color: var(--branco);
}

.bloco-principal h1,
.bloco-principal .bloco-etiqueta { color: var(--branco); }

/* ---- citação de abertura ---- */

.citacao-principal {
  margin-bottom: 1.25rem;
}

.citacao-principal p {
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  line-height: 1.28;
  font-weight: 600;
  text-wrap: balance;
  /* Aspas tipográficas pelo CSS: no HTML o texto fica limpo, o que evita
     aspas duplicadas se alguém copiar o trecho. Delimitador simples de
     propósito — assim as aspas entram literais, sem escape. */
  quotes: '“' '”';
}
.citacao-principal p::before { content: open-quote; }
.citacao-principal p::after  { content: close-quote; }

.citacao-principal footer {
  margin-top: 0.9rem;
  font-size: 0.9rem;
  line-height: 1.35;
}

.citacao-principal cite {
  display: block;
  font-style: normal;
  font-weight: 700;
}

.citacao-principal footer span {
  display: block;
  opacity: 0.92;
}

.bloco-principal .lead {
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
  opacity: 0.95;
}

/* ---- chamadas de ação do bloco principal ---- */

.acoes-principal {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  /* Sem margin-top:auto: o bloco é flex centrado, e uma margem automática
     venceria o justify-content e desmontaria a composição já aprovada. */
  margin-top: 0.25rem;
}

.btn-entrada {
  display: block;
  padding: 0.85rem 2.6rem 0.85rem 1.1rem;
  border-radius: var(--raio);
  border: 2px solid transparent;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  text-wrap: pretty;
  position: relative;
  transition: transform 0.15s ease, background-color 0.15s ease;
}

/* A seta é decorativa: o texto do link já diz para onde se vai. Fica no
   padding reservado à direita para não colidir com a última linha. */
.btn-entrada::after {
  content: "→";
  position: absolute;
  right: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.15rem;
}

.btn-entrada:hover,
.btn-entrada:focus-visible { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .btn-entrada { transition: none; }
  .btn-entrada:hover,
  .btn-entrada:focus-visible { transform: none; }
}

.btn-entrada-primario {
  background: var(--branco);
  color: var(--verde-escuro);
}
.btn-entrada-primario:hover,
.btn-entrada-primario:focus-visible { background: #eaf5ee; }

/* Contornado, e não um segundo botão branco: dois blocos brancos iguais
   disputariam a atenção. Branco sobre o gradiente dá 6,2:1, acima do AA. */
.btn-entrada-secundario {
  background: transparent;
  border-color: var(--branco);
  color: var(--branco);
}
.btn-entrada-secundario:hover,
.btn-entrada-secundario:focus-visible { background: rgba(255, 255, 255, 0.14); }

/* ---- blocos de serviço: a ilustração fecha o bloco por baixo ---- */

.bloco-servico {
  justify-content: flex-start;
  overflow: hidden;
  padding-bottom: 0;
}

.bloco-servico img {
  width: calc(100% + 3rem);
  /* A regra global img{max-width:100%} prenderia a imagem à caixa de conteúdo
     e a sangria pelas margens negativas não aconteceria. */
  max-width: none;
  /* margin-top:auto encosta a arte no rodapé do bloco; as laterais negativas
     fazem a sangria. Embaixo fica zero: o bloco já tem padding-bottom 0, e
     repetir aqui cortaria 24px da ilustração. */
  margin: auto -1.5rem 0;
  max-height: 9rem;
  object-fit: cover;
  object-position: center 40%;
  border-radius: 0 0 calc(var(--raio) - 1px) calc(var(--raio) - 1px);
}

/* ---- 30+ anos ---- */

.bloco-anos {
  align-items: center;
  text-align: center;
  justify-content: center;
}

.bloco-anos img {
  width: 100%;
  max-width: 8.5rem;
  height: auto;
  margin-bottom: 0.5rem;
}

.anos-numero {
  font-weight: 800;
  line-height: 1;
}
.anos-numero span {
  font-size: 2.4rem;
  display: inline-block;
}

.anos-texto {
  font-size: 0.82rem;
  margin-top: 0.35rem;
  color: var(--ink-suave);
}

/* ---- responsivo ---- */

@media (max-width: 900px) {
  /* Duas colunas: o principal ocupa a largura toda, o resto emparelha. */
  .grade-entrada {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "principal principal"
      "trabalho  paradesporto"
      "anos      noticia"
      "transparencia transparencia";
  }
}

@media (max-width: 560px) {
  .grade-entrada {
    grid-template-columns: 1fr;
    grid-template-areas:
      "principal"
      "trabalho"
      "paradesporto"
      "anos"
      "noticia"
      "transparencia";
  }
  .bloco-principal { padding: 1.75rem 1.4rem; }
}

/* ==========================================================================
   Plano de Ação
   ========================================================================== */

/* <details> nativo: já vem com teclado, foco e leitura por leitor de tela.
   Uma sanfona feita à mão precisaria reimplementar tudo isso. */
.acao-plano {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  margin-bottom: 0.75rem;
  background: var(--branco);
}

.acao-plano summary {
  padding: 1rem 1.25rem;
  font-weight: 700;
  color: var(--verde-escuro);
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  border-radius: var(--raio);
  list-style: none;
}
.acao-plano summary::-webkit-details-marker { display: none; }

/* Seta própria, girando ao abrir — o marcador padrão varia entre navegadores */
.acao-plano summary::after {
  content: "▾";
  margin-left: auto;
  transition: transform 0.2s ease;
  color: var(--verde);
}
.acao-plano[open] summary::after { transform: rotate(180deg); }

.acao-plano summary:hover { background: var(--verde-claro); }

.acao-numero {
  background: var(--verde-escuro);
  color: var(--branco);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  flex-shrink: 0;
}

.acao-corpo {
  padding: 0 1.25rem 1.25rem;
  border-top: 1px solid var(--borda);
  padding-top: 1rem;
}

.acao-corpo h3 {
  font-size: 0.95rem;
  color: var(--verde-escuro);
  margin: 1.1rem 0 0.4rem;
}
.acao-corpo h3:first-child { margin-top: 0; }

.acao-corpo p, .acao-corpo ul { margin-bottom: 0.75rem; }
.acao-corpo ul { padding-left: 1.25rem; }
.acao-corpo li { margin-bottom: 0.35rem; }

@media (prefers-reduced-motion: reduce) {
  .acao-plano summary::after { transition: none; }
}

/* A tabela da equipe é larga; rola por dentro em vez de esticar a página. */
.tabela-rolante {
  overflow-x: auto;
  margin-bottom: 1.25rem;
}

.tabela-plano {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  min-width: 34rem;
}

.tabela-plano th,
.tabela-plano td {
  text-align: left;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--borda);
  vertical-align: top;
}

.tabela-plano thead th {
  background: var(--verde-claro);
  color: var(--verde-escuro);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tabela-plano tbody tr:hover { background: var(--cinza-bg); }

.lista-objetivos { padding-left: 1.4rem; }
.lista-objetivos li { margin-bottom: 0.6rem; }

/* Aviso de prazo na página do Paradesporto — a espera pode chegar a 3 meses,
   e é melhor a pessoa saber disso antes de preencher do que depois. */
.aviso-prazo {
  background: #fdf6e3;
  border-left: 4px solid #d9a520;
  border-radius: 0 8px 8px 0;
  padding: 0.9rem 1.1rem;
  margin: 1.25rem 0;
}

/* Logomarca clicável: o link ocupa o cartão inteiro, para a área de clique
   ser o quadro todo e não só o desenho. */
.parceiro-link {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.parceiro:has(.parceiro-link):hover {
  border-color: var(--verde);
}

.parceiro-link:focus-visible {
  outline: 3px solid var(--rosa);
  outline-offset: 4px;
  border-radius: 6px;
}

/* Usada no rodape de secoes de chamada. */
.texto-centralizado { text-align: center; margin-top: 1.5rem; }

/* ==========================================================================
   Retorno do Fale Conosco
   As classes .aviso-erro/.aviso-sucesso também existem no curriculo.css, que
   a home não carrega — por isso a repetição aqui, restrita ao #retorno-contato
   para não competir com aquelas nas páginas de formulário.
   ========================================================================== */

#retorno-contato {
  margin: 0 0 1rem;
  padding: 1rem 1.2rem;
  border-radius: var(--raio);
}
#retorno-contato h3 { font-size: 1.05rem; margin-bottom: 0.35rem; }
#retorno-contato ul { margin: 0; padding-left: 1.2rem; }
#retorno-contato li { margin-bottom: 0.25rem; }

#retorno-contato.aviso-sucesso {
  background: var(--verde-claro);
  border-left: 4px solid var(--verde);
}
#retorno-contato.aviso-sucesso h3 { color: var(--verde-escuro); }

#retorno-contato.aviso-erro {
  background: #fdecef;
  border-left: 4px solid var(--rosa);
}
#retorno-contato.aviso-erro h3 { color: #a82753; }

/* ==========================================================================
   Barra de denúncia de assédio — entre as seções da home
   Vermelho da família do --rosa, que já identifica a denúncia no menu.
   Branco sobre #a82753 dá 6,82:1, acima do mínimo AA de 4,5:1.
   ========================================================================== */

.barra-denuncia {
  background: #a82753;
  color: var(--branco);
  padding: 1.1rem 0;
}

.barra-denuncia-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.barra-denuncia p {
  margin: 0;
  font-size: 1rem;
  max-width: 46em;
}

.barra-denuncia strong { font-weight: 700; }

.btn-denuncia {
  flex-shrink: 0;
  background: var(--branco);
  color: #a82753;
  font-weight: 700;
  text-decoration: none;
  padding: 0.7rem 1.5rem;
  border-radius: 999px;
  white-space: nowrap;
}
.btn-denuncia:hover,
.btn-denuncia:focus-visible { background: #ffe8ef; }

/* Barra vermelha seguida da faixa verde: as duas encostadas viram um bloco
   colorido único e nenhuma se destaca. A folga é do fundo branco da página,
   que separa sem introduzir mais uma cor. */
.barra-denuncia + .faixa-acesso { margin-top: 2.5rem; }