/* Componentes globais: botões, cards, chips, header/nav, footer, FAB WhatsApp. */

/* ---------- Botões ---------- */
.btn {
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding: 0.8rem 1.6rem;
  border: 2px solid transparent;
  border-radius: var(--raio-pill);
  font-family: var(--fonte-corpo);
  font-size: 1rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transicao), color var(--transicao),
    border-color var(--transicao), transform var(--transicao),
    box-shadow var(--transicao);
}

.btn:hover {
  transform: translateY(-3px);
}

.btn:active {
  transform: translateY(-1px);
  transition-duration: 90ms;
}

/* Brilho que atravessa o botão no hover; volta instantâneo (sem transição
   no estado base) para não repetir o trajeto ao tirar o mouse. */
.btn-gold::before,
.btn-navy::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 55%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.38), transparent);
  transform: translateX(-130%) skewX(-18deg);
  pointer-events: none;
}

.btn-gold:hover::before,
.btn-navy:hover::before {
  transform: translateX(300%) skewX(-18deg);
  transition: transform 700ms var(--ease-fluida);
}

.btn-gold {
  background: var(--gold);
  color: var(--navy);
}

.btn-gold:hover {
  background: #f4b53a;
  color: var(--navy);
  box-shadow: 0 10px 26px rgba(237, 165, 21, 0.38);
}

.btn-navy {
  background: var(--navy);
  color: var(--branco);
}

.btn-navy:hover {
  background: var(--navy-deep);
  color: var(--branco);
  box-shadow: 0 10px 26px rgba(2, 36, 67, 0.3);
}

.btn-ghost {
  border-color: currentColor;
  color: var(--navy);
  background: transparent;
}

.btn-ghost:hover {
  background: var(--navy);
  color: var(--branco);
  box-shadow: 0 10px 26px rgba(2, 36, 67, 0.22);
}

.secao-navy .btn-ghost {
  color: var(--branco);
}

.secao-navy .btn-ghost:hover {
  background: var(--branco);
  color: var(--navy);
}

/* ---------- Cards, chips e selos ---------- */
.card {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-lg);
  padding: var(--esp-6);
  box-shadow: var(--sombra-sm);
  /* ~.25s na elevação de hover (escala Impare §5, com a sombra tingida de
     navy da marca); antes eram 420ms, lentos demais para o toque de mouse */
  transition: transform var(--transicao), box-shadow var(--transicao),
    border-color var(--transicao);
}

.card:hover {
  transform: translateY(-6px);
  border-color: rgba(237, 165, 21, 0.45);
  box-shadow: var(--sombra-lg);
}

.card h3 {
  margin-bottom: var(--esp-2);
}

/* Listas dos cards e blocos abertos no padrão dos entregáveis (.detalhe) */
.card ul,
.inclusao-grid ul {
  list-style: none;
  padding: 0;
  margin-top: var(--esp-3);
  display: grid;
  gap: var(--esp-2);
}

.card ul li,
.inclusao-grid ul li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: var(--texto-sm);
}

.card ul li::before,
.inclusao-grid ul li::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.5em;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}

.chip {
  display: inline-block;
  padding: 0.45rem 1rem;
  border-radius: var(--raio-pill);
  background: var(--cream);
  border: 1px solid var(--linha);
  color: var(--navy);
  font-size: var(--texto-sm);
  font-weight: 700;
}

/* Sobre .secao-cream o fundo do chip empata com a seção e sobra só a borda
   (#e9e2d6 sobre #f8f3ec, ~1,1:1 — some). Branco devolve o limite do chip sem
   introduzir cor nova. */
.secao-cream .chip {
  background: var(--branco);
}

.icone-circulo {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
  margin-bottom: var(--esp-4);
}

.icone-circulo svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* ---------- Grades ---------- */
.grade {
  display: grid;
  gap: var(--esp-5);
}

@media (min-width: 640px) {
  .grade-2,
  .grade-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 980px) {
  .grade-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grade-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---------- Header / navegação ----------
   Cruzar o breakpoint troca layout, posicionamento e visibilidade do nav e
   do submenu de uma vez. Sem suspender as transições, o navegador ANIMA
   essa troca: o submenu sai de opacity 1/visible (grupo estático do mobile)
   para o estado fechado do desktop com 320ms de espera + fade, ou seja
   aparece sozinho por meio segundo a cada cruzamento. main.js liga a classe
   por dois quadros no evento change da media query. */
.sem-transicao-header .cabecalho-nav,
.sem-transicao-header .cabecalho-nav .menu > li,
.sem-transicao-header .menu a,
.sem-transicao-header .menu-sub-botao::after,
.sem-transicao-header .submenu {
  transition: none !important;
}

.cabecalho {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(253, 253, 253, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linha);
  transition: box-shadow var(--transicao);
}

/* Filete dourado no topo — o mesmo acento que o rodapé usa: a página abre
   e fecha com a assinatura dourada da marca. */
.cabecalho::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), rgba(237, 165, 21, 0) 60%);
}

/* Rolou, ganhou elevação (classe vem do main.js): parada sobre o conteúdo,
   a faixa branca sem sombra se mistura ao fundo claro das seções. */
.cabecalho.rolado {
  box-shadow: var(--sombra-sm);
}

.cabecalho-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  min-height: var(--header-altura);
  /* nowrap no desktop: sem isso, quando o menu horizontal não cabe ele
     quebra para uma segunda/terceira linha em vez de colapsar. O wrap
     volta só dentro do breakpoint mobile, onde o nav é a 2ª linha. */
  flex-wrap: nowrap;
}

.logo-link {
  display: inline-flex;
  align-items: center;
  /* Mantém a linha do logo com altura constante mesmo quando o nav
     mobile abre e vira uma segunda linha do flex (sem isso o logo
     perde o respiro vertical e salta para cima). */
  min-height: var(--header-altura);
}

.logo-link img {
  width: auto;
  /* --header-altura menos o respiro vertical de 20px */
  height: 4.75rem;
}

.menu-botao {
  display: none;
  border: 2px solid var(--navy);
  background: transparent;
  color: var(--navy);
  border-radius: var(--raio-sm);
  padding: 0.5rem 0.65rem;
  cursor: pointer;
}

.menu-botao svg {
  display: block;
  width: 1.4rem;
  height: 1.4rem;
}

.menu {
  display: flex;
  align-items: center;
  /* O gap comprime antes do breakpoint para o menu caber inteiro na
     faixa 1081–1180px, onde o container ainda não atingiu 1120px. */
  gap: clamp(0.7rem, 1.8vw, 1.9rem);
  /* 17px do corpo: com 4 grupos + pill a barra tem folga de sobra, e itens
     menores que o texto das seções faziam o menu parecer acanhado. */
  font-size: var(--texto-base);
  list-style: none;
  padding: 0;
  flex-wrap: nowrap;
}

/* Itens não encolhem nem quebram o rótulo em duas linhas */
.menu > li {
  flex: 0 0 auto;
}

.menu a {
  white-space: nowrap;
}

.menu a {
  position: relative;
  font-weight: 700;
  text-decoration: none;
  color: var(--navy);
  padding: 0.35rem 0.15rem;
  transition: color var(--transicao);
}

/* Sublinhado que cresce da esquerda e recolhe para a direita */
.menu a::after {
  content: "";
  position: absolute;
  left: 0.15rem;
  right: 0.15rem;
  bottom: -1px;
  height: 3px;
  border-radius: var(--raio-pill);
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 340ms var(--ease-fluida);
}

.menu a:hover::after,
.menu a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.menu a:hover {
  color: var(--navy-deep);
}

/* ---------- Acesso (Área do Aluno / Área de Professores) ----------
   O 4º item do menu segue sendo o CTA do header — mesmo pill dourado de
   antes — mas agora abre um grupo com os dois acessos. Todo o comportamento
   (aria-expanded, Esc, clique fora, :focus-within sem JS, empilhar no
   mobile) vem de .menu-sub; aqui é só a pele. */
/* Divisor entre a navegação institucional e o acesso restrito: dá à barra
   as duas zonas clássicas (navegar | entrar) sem elemento novo. */
.menu .menu-acesso {
  /* O painel ancora na caixa de padding deste li, então o recuo do divisor
     precisa entrar também no left do submenu — daí a variável. */
  --acesso-recuo: clamp(0.5rem, 1.2vw, 1.2rem);
  border-left: 1px solid var(--linha);
  padding-left: var(--acesso-recuo);
}

.menu .menu-acesso-botao {
  padding: 0.55rem 1.2rem;
  border-radius: var(--raio-pill);
  background: var(--gold);
  color: var(--navy);
  transition: background-color var(--transicao), box-shadow var(--transicao),
    transform var(--transicao);
}

.menu .menu-acesso:hover .menu-acesso-botao,
.menu .menu-acesso.aberto .menu-acesso-botao,
.menu .menu-acesso-botao:hover {
  background: #f4b53a;
  color: var(--navy);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(237, 165, 21, 0.35);
}

/* O painel alinha pela direita: o CTA é o último item da barra e um painel
   crescendo para a direita sairia da janela. */
/* .menu na frente para vencer o left: 0 de .submenu, que é declarado
   depois neste arquivo e tem a mesma especificidade. */
/* Abre para a direita a partir do botão, igual a "Soluções" e "A Caíque".
   .menu na frente para vencer .submenu, declarado depois neste arquivo. */
.menu .submenu-acesso {
  left: var(--acesso-recuo);
  right: auto;
  min-width: 262px;
}

/* Bico apontando para o pill: o painel é 2,4× mais largo que o botão, então
   sem ele a borda comum entre os dois não basta para indicar a origem.
   3,15rem = centro do pill (112px de largura) menos meia diagonal do bico. */
.menu .submenu-acesso::after {
  content: "";
  position: absolute;
  top: -6px;
  left: 3.15rem;
  width: 11px;
  height: 11px;
  background: var(--branco);
  border-left: 1px solid var(--linha);
  border-top: 1px solid var(--linha);
  border-top-left-radius: 3px;
  transform: rotate(45deg);
}

/* "Acessar" é o último item da barra: o painel cresce 150px além da largura
   do pill e, abaixo de 1400px, a margem da página não comporta isso — abrir
   para a direita geraria barra de rolagem horizontal. Aí ele vira pela outra
   âncora, como fazem os dropdowns de qualquer biblioteca. Medido: no limite
   do desktop (1081px) sobram 159,5px à direita da borda esquerda do botão,
   contra os 262px de painel. */
@media (max-width: 1400px) {
  .menu .submenu-acesso {
    left: auto;
    right: 0;
  }

  .menu .submenu-acesso::after {
    left: auto;
    right: 3.15rem;
  }
}

/* .menu na frente para vencer o display: block de .submenu li a, declarado
   depois neste arquivo e mais específico que .acesso-item sozinho. Sem isso
   o item não é flex: o SVG vira inline, apoia na linha de base do texto e
   ícone e rótulo saem desencontrados na vertical. */
.menu .acesso-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.acesso-icone {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  padding: 0.35rem;
  border-radius: var(--raio-sm);
  /* A cor identifica a área; o rótulo continua navy, porque dourado sobre
     fundo claro fica em 2,1:1 (regra do tokens.css). */
  color: var(--gold-escuro);
  background: rgba(237, 165, 21, 0.14);
  transition: background-color var(--transicao), color var(--transicao);
}

.acesso-professor .acesso-icone {
  color: var(--navy);
  background: rgba(2, 36, 67, 0.08);
}

.acesso-aluno:hover .acesso-icone,
.acesso-aluno:focus-visible .acesso-icone {
  background: rgba(237, 165, 21, 0.28);
}

.acesso-professor:hover .acesso-icone,
.acesso-professor:focus-visible .acesso-icone {
  background: rgba(2, 36, 67, 0.16);
}

/* Mobile: sem JS a lista fica visível (empilhada); com JS o botão colapsa.
   1080px é a largura mínima em que logo + 7 itens + CTA cabem em uma linha;
   abaixo disso o menu horizontal quebraria em duas/três linhas. */
@media (max-width: 1080px) {
  .cabecalho-inner {
    flex-wrap: wrap; /* o nav vira a segunda linha do header */
    row-gap: 0; /* o nav colapsado não pode somar gap à altura do header */
  }

  .cabecalho-nav {
    flex-basis: 100%;
  }

  .menu {
    flex-direction: column;
    /* nowrap: com wrap, durante a animação de altura o último item
       "não cabe" e quebra para uma segunda coluna ao lado do primeiro */
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--esp-1);
  }

  /* Respiro inferior no último item (padding no próprio .menu entraria
     no tamanho mínimo do track e impediria o colapso total a zero) */
  .menu > li:last-child {
    padding-bottom: var(--esp-3);
  }

  .menu a {
    display: block;
    padding: 0.65rem 0.5rem;
    border-radius: var(--raio-sm);
    transition: color var(--transicao), background-color var(--transicao);
  }

  .menu a::after {
    display: none;
  }

  .menu a:hover {
    background: var(--cream);
  }

  /* Empilhado não há pill nem painéis: cada grupo abre com o kicker do
     data-grupo e um filete — sem eles a lista vira um bloco único de links
     sem hierarquia. Tudo aqui é medido em altura: enquanto o main.js (defer)
     não chega, este menu fica aberto e cada pixel a mais vira deslocamento
     quando ele colapsa — por isso ícone menor e respiro mínimo. */
  .menu > li[data-grupo]::before {
    content: attr(data-grupo);
    display: block;
    padding: 0.55rem 0.5rem 0.15rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-escuro);
  }

  .menu > .menu-sub + li,
  .menu > li + .menu-sub {
    margin-top: var(--esp-2);
    border-top: 1px solid var(--linha);
  }

  /* Empilhado o divisor vertical do desktop não existe */
  .menu .menu-acesso {
    border-left: none;
    padding-left: 0;
  }

  .menu .submenu-acesso {
    min-width: 0;
  }

  /* Empilhado não há painel flutuante — nada para o bico apontar */
  .menu .submenu-acesso::after {
    display: none;
  }

  .menu .acesso-item {
    gap: 0.55rem;
  }

  .menu .acesso-icone {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0.2rem;
  }

  .js .menu-botao {
    display: inline-flex;
  }

  /* Abertura animada: o track do grid desliza de 0fr a 1fr; visibility
     tira os links do tab order enquanto o menu está fechado.
     Curva ease-out nos dois sentidos: o toque responde de imediato. */
  .js .cabecalho-nav {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows 360ms var(--ease-fluida), visibility 0s linear 360ms;
  }

  .js .cabecalho-nav .menu {
    overflow: hidden;
    min-height: 0;
  }

  .js .cabecalho-nav.aberto {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows 480ms var(--ease-fluida), visibility 0s;
  }

  /* Itens surgem em cascata suave na abertura; no fechamento saem
     juntos e rápido, enquanto o painel recolhe. */
  .js .cabecalho-nav .menu > li {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 240ms ease, transform 300ms var(--ease-fluida);
  }

  .js .cabecalho-nav.aberto .menu > li {
    opacity: 1;
    transform: none;
  }

  .js .cabecalho-nav.aberto .menu > li:nth-child(1) { transition-delay: 60ms; }
  .js .cabecalho-nav.aberto .menu > li:nth-child(2) { transition-delay: 100ms; }
  .js .cabecalho-nav.aberto .menu > li:nth-child(3) { transition-delay: 140ms; }
  .js .cabecalho-nav.aberto .menu > li:nth-child(4) { transition-delay: 180ms; }
  .js .cabecalho-nav.aberto .menu > li:nth-child(5) { transition-delay: 220ms; }
  .js .cabecalho-nav.aberto .menu > li:nth-child(6) { transition-delay: 260ms; }
  .js .cabecalho-nav.aberto .menu > li:nth-child(7) { transition-delay: 300ms; }
  .js .cabecalho-nav.aberto .menu > li:nth-child(8) { transition-delay: 340ms; }
}

/* Com preferência por menos movimento o menu abre/fecha sem animação */
@media (max-width: 1080px) and (prefers-reduced-motion: reduce) {
  .js .cabecalho-nav,
  .js .cabecalho-nav .menu > li {
    transition: none !important;
  }
}

/* ---------- Rodapé ----------
   Superfície clara, no mesmo gradiente de .secao-cream: a marca é feita de
   duas bolhas (uma navy, uma dourada) e wordmark navy — em fundo navy metade
   dela some, e aqui ela entra limpa, sem tratamento no asset.
   O filete dourado do topo continua sendo o acento, agora fechando o bloco
   claro contra a seção anterior em vez de abrir o bloco navy. */
.rodape {
  position: relative;
  background: linear-gradient(160deg, var(--bg), var(--cream));
  color: var(--ink);
  padding-block: clamp(2.25rem, 5vw, 3rem) var(--esp-4);
  font-size: var(--texto-sm);
  line-height: 1.5;
}

.rodape::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), rgba(237, 165, 21, 0) 60%);
}

/* Sem sublinhado: nenhum outro link do site sublinha; no rodapé, com 13 links
   próximos, o traço vira ruído. Estado de hover fica no dourado — escurecido,
   porque dourado puro sobre creme dá 1,9:1 (regra do tokens.css). */
.rodape a {
  color: var(--navy);
  text-decoration: none;
  transition: color var(--transicao);
}

.rodape a:hover {
  color: var(--gold-escuro);
}

.rodape [aria-current="page"] {
  color: var(--gold-escuro);
}

.rodape-grid {
  display: grid;
  gap: var(--esp-5);
  margin-bottom: var(--esp-5);
}

@media (min-width: 760px) {
  .rodape-grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.45fr) minmax(0, 1.05fr);
    gap: var(--esp-5) clamp(1.5rem, 4vw, 2.75rem);
  }
}

.rodape-logo {
  width: 148px;
  height: auto;
}

.rodape-marca p {
  max-width: 34ch;
  margin-top: var(--esp-3);
}

.rodape-slogan {
  margin-top: var(--esp-2);
  color: var(--gold-escuro);
  font-weight: 800;
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
}

/* Título de coluna no padrão .kicker das seções — que em fundo claro usa
   --gold-escuro, não o dourado puro. */
.rodape h2 {
  color: var(--gold-escuro);
  font-family: var(--fonte-corpo);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--esp-3);
}

.rodape ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

.rodape ul a {
  overflow-wrap: anywhere;
}

/* 9 itens em coluna única esticavam o rodapé. Multicoluna com largura mínima
   em vez de grid: abaixo de 160px por coluna o navegador volta sozinho para
   uma coluna, sem media query e sem rótulo espremido. */
.rodape ul.rodape-nav {
  display: block;
  columns: 2 160px;
  column-gap: var(--esp-4);
}

.rodape-nav li {
  break-inside: avoid;
}

.rodape-nav li + li {
  margin-top: 0.4rem;
}

/* Sem "Canoas – RS" à direita: o FAB do WhatsApp cobre esse canto.
   O filete de separação repete o gesto dourado do topo, mais discreto. */
.rodape-base {
  border-top: 1px solid rgba(237, 165, 21, 0.35);
  padding-top: var(--esp-4);
  padding-inline-end: 3.5rem;
  font-size: 0.8125rem;
  color: var(--ink-suave);
}

/* ---------- WhatsApp flutuante ----------
   Fica no fim do arquivo e usa seletor a.zap-flutuante para vencer
   .rodape a (o FAB vive dentro do footer por causa de landmarks). */
a.zap-flutuante {
  position: fixed;
  right: clamp(0.9rem, 3vw, 1.5rem);
  bottom: clamp(0.9rem, 3vw, 1.5rem);
  z-index: 70;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--navy);
  color: var(--branco);
  box-shadow: var(--sombra-md);
  transition: background-color var(--transicao-suave), color var(--transicao),
    transform var(--transicao-suave), box-shadow var(--transicao-suave);
}

a.zap-flutuante svg {
  width: 1.75rem;
  height: 1.75rem;
}

a.zap-flutuante:hover {
  background: var(--gold);
  color: var(--navy);
  transform: scale(1.1) rotate(6deg);
  box-shadow: 0 12px 32px rgba(237, 165, 21, 0.4);
}

/* ---------- Dropdown Soluções ----------
   Desktop: abre por :hover e :focus-within (sem JS); JS adiciona .aberto e aria.
   Mobile (≤1080px): botão oculto, submenu sempre visível como grupo estático. */
.menu-sub {
  position: relative;
}

.menu-sub-botao {
  background: none;
  border: none;
  padding: 0.35rem 0.15rem;
  font-family: var(--fonte-corpo);
  font-size: var(--texto-base);
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  transition: color var(--transicao);
}

/* Chevron desenhado (borda rotacionada): herda cor e espessura do rótulo.
   O glifo "▾" vinha da fonte do sistema, variava de máquina para máquina e
   destoava dos ícones SVG usados em todo o resto do site. */
.menu-sub-botao::after {
  content: "";
  width: 0.42em;
  height: 0.42em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-25%) rotate(45deg);
  transition: transform 240ms var(--ease-fluida);
}

.menu-sub-botao:hover,
.menu-sub:hover .menu-sub-botao,
.menu-sub:focus-within .menu-sub-botao {
  color: var(--navy-deep);
}

/* Página atual: o grupo que a contém mantém o sublinhado dourado aceso —
   mesma linguagem do hover dos links da barra. O aria-current já vem no
   HTML de cada página; o pill Acessar fica de fora (lá o estado vive no
   próprio item do painel). O right pula o chevron. */
.menu-sub:not(.menu-acesso):has(a[aria-current="page"]) > .menu-sub-botao {
  position: relative;
  color: var(--navy-deep);
}

/* Traço fino com as pontas esvanecendo, no mesmo idioma do filete dourado do
   cabeçalho e do rodapé. O pill de 3px com pontas duras pesava mais que o
   próprio rótulo; aqui a marcação é permanente, então precisa ser discreta.
   O right pula o chevron. */
.menu-sub:not(.menu-acesso):has(a[aria-current="page"]) > .menu-sub-botao::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  right: 0.9rem;
  bottom: -3px;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(237, 165, 21, 0) 0%,
    var(--gold) 20%,
    var(--gold) 80%,
    rgba(237, 165, 21, 0) 100%
  );
}

/* :focus-within só sem JS: com JS o estado de foco vira .aberto (main.js),
   permitindo que Esc feche de verdade mesmo com o foco de volta no botão. */
.menu-sub.aberto .menu-sub-botao::after,
.menu-sub:hover .menu-sub-botao::after,
html:not(.js) .menu-sub:focus-within .menu-sub-botao::after {
  transform: translateY(25%) rotate(225deg);
}

.submenu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  min-width: 220px;
  list-style: none;
  padding: var(--esp-2) 0;
  margin: 0;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-md);
  box-shadow: var(--sombra-md);
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  /* Fechamento com atraso (hover intent): o usuário tem ~320ms para
     alcançar o painel antes de ele sumir. visibility só vira hidden
     após o fade (320ms de espera + 160ms de fade). */
  transition:
    opacity 160ms var(--ease-fluida) 320ms,
    transform 160ms var(--ease-fluida) 320ms,
    visibility 0s linear 480ms;
}

/* Ponte invisível cobrindo o vão de 0.5rem entre botão e painel,
   para o :hover não quebrar no trajeto do cursor. */
.submenu::before {
  content: "";
  position: absolute;
  top: -0.5rem;
  left: 0;
  right: 0;
  height: 0.5rem;
}

.menu-sub:hover .submenu,
html:not(.js) .menu-sub:focus-within .submenu,
.menu-sub.aberto .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity 200ms var(--ease-fluida),
    transform 200ms var(--ease-fluida),
    visibility 0s linear;
}

/* Troca de grupo dentro da barra fecha o painel anterior na hora. O atraso
   de hover intent existe para o trajeto do cursor até o painel; na travessia
   horizontal entre botões ele deixava o painel antigo por ~480ms sobre o
   novo, e dois painéis abertos ao mesmo tempo leem como bug. Com o ponteiro
   fora de .menu (indo para o painel pelo vão) o atraso continua valendo. */
.menu:hover .submenu {
  transition-delay: 0s;
}

.submenu li a {
  display: block;
  padding: 0.55rem var(--esp-5);
  font-weight: 700;
  font-size: var(--texto-sm);
  color: var(--navy);
  text-decoration: none;
  transition: background-color var(--transicao), color var(--transicao);
}

.submenu li a::after {
  display: none;
}

.submenu li a:hover,
.submenu li a:focus-visible {
  background: var(--cream);
  color: var(--navy-deep);
}

/* Item da página atual fica marcado dentro do painel (desktop) e da lista
   empilhada (mobile) — o cream persistente é o mesmo retorno do hover. */
.submenu li a[aria-current="page"] {
  background: var(--cream);
}

/* ---------- Painel rico (Soluções / Formação) ----------
   Mesma linguagem dos acessos: ícone stroke em tile suave + rótulo navy,
   com descrição de uma linha e kicker no padrão das seções. Dourado puro
   nunca como texto em fundo claro (regra do tokens.css) — kicker e ícone
   em hover usam --gold-escuro. */
.submenu-painel {
  min-width: 370px;
  padding-top: var(--esp-3);
}

.submenu-painel li a {
  padding: 0.6rem var(--esp-4);
}

.painel-rotulo {
  padding: 0 var(--esp-4) var(--esp-2);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-escuro);
}

/* .menu na frente para vencer o display: block de .submenu li a, declarado
   depois neste arquivo e mais específico que .painel-item sozinho. Sem isso
   o item não é flex: o ícone cai numa linha e o texto na seguinte, e cada
   item do painel passa de ~57px para ~102px de altura. */
.menu .painel-item {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}

.painel-icone {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  padding: 0.4rem;
  margin-top: 0.1rem;
  border-radius: var(--raio-sm);
  color: var(--navy);
  background: rgba(2, 36, 67, 0.07);
  transition: background-color var(--transicao), color var(--transicao);
}

.painel-texto {
  display: block;
  flex: 1;
  min-width: 0;
}

.painel-nome {
  display: block;
}

.painel-desc {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink-suave);
  white-space: normal;
}

.painel-item:hover .painel-icone,
.painel-item:focus-visible .painel-icone {
  color: var(--gold-escuro);
  background: rgba(237, 165, 21, 0.18);
}

@media (max-width: 1080px) {
  .menu-sub-botao {
    display: none;
  }

  .submenu {
    display: block;
    position: static;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    min-width: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }

  .submenu::before {
    display: none;
  }

  .submenu li a {
    padding: 0.65rem 0.5rem;
    border-radius: var(--raio-sm);
    font-size: 1rem;
  }

  .submenu li a:hover {
    background: var(--cream);
  }

  /* Painéis viram itens de lista: kicker e descrição saem (o data-grupo
     já titula o grupo), ícone encolhe no mesmo passo dos acessos. */
  .painel-rotulo,
  .painel-desc {
    display: none;
  }

  .menu .painel-item {
    align-items: center;
    gap: 0.55rem;
  }

  .menu .painel-icone {
    width: 1.5rem;
    height: 1.5rem;
    padding: 0.2rem;
    margin-top: 0;
  }
}

/* ---------- Disclosure .detalhe (<details>/<summary>) ---------- */
.detalhe {
  margin-top: var(--esp-3);
  interpolate-size: allow-keywords; /* permite animar block-size até auto */
}

/* Abrir/fechar animado (altura + fade) via ::details-content.
   Navegador sem suporte ignora a regra e alterna instantâneo, como antes. */
.detalhe::details-content {
  block-size: 0;
  overflow-y: clip;
  opacity: 0;
  transition:
    block-size 280ms var(--ease-fluida),
    opacity 200ms var(--ease-fluida),
    content-visibility 280ms allow-discrete;
}

.detalhe[open]::details-content {
  block-size: auto;
  opacity: 1;
}

.detalhe summary {
  cursor: pointer;
  font-weight: 700;
  font-size: var(--texto-sm);
  color: var(--navy);
  padding: var(--esp-2) 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  user-select: none;
}

/* Resposta ao ponteiro nas trilhas/módulos: sem isto os disclosures em fundo
   claro não davam nenhum retorno de hover. Dourado escuro (nunca o --gold
   puro, que fica em 2,1:1 sobre fundo claro — regra do tokens.css). */
.detalhe summary {
  transition: color var(--transicao);
}

.detalhe summary:hover {
  color: var(--gold-escuro);
}

.detalhe summary::-webkit-details-marker {
  display: none;
}

.detalhe summary::before {
  content: "▸";
  font-size: 0.7rem;
  color: var(--gold-escuro);
  transition: transform 200ms var(--ease-fluida);
  flex-shrink: 0;
}

.detalhe[open] summary::before {
  transform: rotate(90deg);
}

.detalhe summary:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}

.detalhe ul {
  list-style: none;
  padding: var(--esp-2) 0 var(--esp-3) var(--esp-4);
  margin: 0;
  display: grid;
  gap: var(--esp-2);
}

.detalhe li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.detalhe li::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.55em; /* centro óptico da primeira linha; linhas quebradas mantêm o recuo */
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .detalhe summary::before {
    transition: none;
  }

  .detalhe::details-content {
    transition: none;
  }
}