/* Estilos por seção da landing e páginas internas. */

/* ---------- Marcador dourado (ênfase acessível em fundo claro) ---------- */
.marcador {
  font-style: normal;
  background-image: linear-gradient(transparent 64%, rgba(237, 165, 21, 0.4) 64%);
  background-repeat: no-repeat;
}

/* ---------- Hero (carrossel de fundo + texto fixo) ----------
   Fundo base navy sólido: se um slide falhar (404/rede), o texto continua
   legível sobre a cor da marca em vez de fundo branco. */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: var(--branco);
  padding-block: clamp(3.5rem, 8vw, 6rem) clamp(3.5rem, 8vw, 6rem);
}

.hero::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -120px;
  z-index: 1;
  width: 340px;
  height: 340px;
  border: 44px solid rgba(237, 165, 21, 0.16);
  border-radius: 50%;
}

/* Viewport do carrossel: absoluta sobre o hero, então a altura da seção
   continua vindo só do texto — as fotos nunca empurram layout (zero CLS). */
.hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* Véu navy sobre as fotos: forte na faixa do texto (esquerda, até ~60% da
   largura), aliviado à direita para a foto continuar visível. Os 0,84 do
   fim da zona de texto seguram >= 4,5:1 até para o kicker dourado sobre
   uma foto 100% branca — o pior caso possível. */
.hero-slides::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(2, 36, 67, 0.95) 0%, rgba(2, 36, 67, 0.9) 38%, rgba(2, 36, 67, 0.84) 60%, rgba(2, 36, 67, 0.48) 100%);
}

/* Abaixo do breakpoint do hero o texto ocupa a largura toda: o véu deixa de
   ser lateral e passa a cobrir a foto inteira. O anel dourado sai de cena —
   nessa largura ele cruza a coluna de texto e clareia o fundo do kicker
   abaixo do mínimo de 4,5:1. */
@media (max-width: 879px) {
  .hero-slides::after {
    background: linear-gradient(180deg, rgba(2, 36, 67, 0.92) 0%, rgba(2, 36, 67, 0.88) 100%);
  }

  .hero::before {
    display: none;
  }
}

/* O índice do slide vem do JS em --slide; sem JS a variável não existe e o
   fallback 0 deixa o primeiro slide enquadrado. */
.hero-track {
  display: flex;
  height: 100%;
  transform: translateX(calc(var(--slide, 0) * -100%));
  transition: transform 800ms var(--ease-fluida);
}

/* Salto do loop (clone -> slide 1 real) e troca com reduced-motion */
.hero-track.sem-transicao {
  transition: none;
}

.hero-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Acima do centro: mantém rostos no enquadramento quando o hero é mais
     baixo que o aspecto 16:9 das fotos. */
  object-position: center 32%;
}

/* Slide 6 (primeira infância): duas crianças horizontalmente ao centro da foto
   fonte, com bastante espaço à esquerda que o véu navy denso cobriria — a foto
   é deslocada para a direita para manter os rostos visíveis fora da zona do
   texto. Em mobile o véu cobre 100%; valor ligeiramente menos deslocado. */
.hero-slide:nth-child(6) {
  object-position: 72% 38%;
}

@media (max-width: 879px) {
  .hero-slide:nth-child(6) {
    object-position: 60% 36%;
  }
}

/* Sem JS o carrossel não existe: track travado no primeiro slide e
   controles fora da árvore (seriam botões inertes). */
html:not(.js) .hero-track {
  transform: none;
  transition: none;
}

html:not(.js) .hero-dots {
  display: none;
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(1.75rem, 4vw, 2.75rem);
  justify-items: start;
}

/* Composição assimétrica: texto ancorado à esquerda, foto respira à direita */
@media (min-width: 880px) {
  .hero-textos {
    max-width: 62%;
  }
}

/* Texto por slide: blocos empilhados na mesma célula do grid — a pilha mede
   a altura do bloco mais alto, então a troca de slide nunca desloca layout. */
.hero-textos {
  display: grid;
}

.hero-textos .hero-texto {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 500ms var(--ease-fluida), visibility 0s 500ms;
}

.hero-textos .hero-texto-ativo {
  opacity: 1;
  visibility: visible;
  transition: opacity 500ms var(--ease-fluida), visibility 0s;
}

/* Título do slide no porte do h1 (o h1 real do hero é único e fica oculto) */
.hero-titulo {
  font-size: var(--titulo-xl);
}

/* Sem JS não há rotação: só o primeiro bloco existe visualmente */
html:not(.js) .hero-textos .hero-texto:first-child {
  opacity: 1;
  visibility: visible;
}

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

.hero h1,
.hero .hero-titulo {
  color: var(--branco);
}

/* O marcador é uma marca-texto pensada para fundo claro; sobre o navy do
   hero a lavagem de 40% vira uma faixa oliva. Aqui ele vira traço dourado.
   A faixa fica em em, ancorada logo abaixo da baseline: a Baloo 2 tem
   0.527em de descent de caixa contra ~0.21em de descida real dos glifos
   (medido), então um traço no fundo da caixa flutua ~16px abaixo da
   palavra. 0.46em–0.34em do fundo = topo a ~0.07em da baseline, espessura
   0.12em (~6px no porte do hero), escalando com o título. */
.hero .marcador {
  background-image: linear-gradient(
    transparent calc(100% - 0.46em),
    var(--gold) calc(100% - 0.46em),
    var(--gold) calc(100% - 0.34em),
    transparent calc(100% - 0.34em)
  );
}

.hero .kicker {
  color: var(--gold);
}

.hero :focus-visible {
  outline-color: var(--gold);
}

/* CTA fantasma no navy: mesma inversão da .secao-navy */
.hero .btn-ghost {
  color: var(--branco);
}

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

.hero-tagline {
  font-size: var(--texto-lg);
  color: var(--ink-suave);
  margin-top: var(--esp-4);
}

.hero .hero-tagline {
  color: var(--cream);
}

/* Indicadores: barras alinhadas à esquerda do texto (não centralizadas),
   com área de toque de 44px vinda do padding. */
.hero-dots {
  display: flex;
  gap: var(--esp-2);
}

.hero-dot {
  width: 2.75rem;
  padding: 1rem 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.hero-dot::before {
  content: "";
  display: block;
  height: 3px;
  border-radius: var(--raio-pill);
  background: rgba(255, 255, 255, 0.5);
  transition: background-color var(--transicao), transform var(--transicao);
}

.hero-dot:hover::before {
  background: rgba(255, 255, 255, 0.8);
}

.hero-dot[aria-current="true"]::before {
  background: var(--gold);
  transform: scaleY(1.6);
}

.hero-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
  margin-top: var(--esp-6);
}

.pilares {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-5);
  list-style: none;
  padding: 0;
  margin-top: var(--esp-6);
  font-size: var(--texto-sm);
  font-weight: 800;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.hero .pilares {
  color: var(--branco);
}

.pilares li::before {
  content: "";
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: var(--gold);
}

/* ---------- Páginas de soluções: faixa CTA e resultados ---------- */
/* Frentes de atuação em blocos abertos, no padrão da metodologia */
.inclusao-grid {
  display: grid;
  gap: var(--esp-6);
}

.inclusao-grid article {
  border-top: 2px solid var(--linha);
  padding-top: var(--esp-4);
}

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

@media (min-width: 800px) {
  .inclusao-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--esp-7);
    row-gap: 0;
  }

  .inclusao-grid article {
    padding-bottom: var(--esp-6);
  }

  /* Modificador p/ blocos uniformes (ícone, título, parágrafo, lista):
     subgrid alinha as linhas entre colunas */
  .inclusao-alinhada article {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
  }
}

/* Modificador p/ blocos com listas longas (4 a 8 itens): empilhados em coluna
   única eles esticavam a seção e deixavam as duas colunas do grid muito
   desiguais, abrindo vazios. Os itens passam a ocupar duas colunas dentro do
   próprio bloco — só a partir de 1040px, abaixo disso a coluna é estreita
   demais e os rótulos longos quebram em três linhas. */
@media (min-width: 1040px) {
  .inclusao-densa ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--esp-5);
  }
}

.faixa-cta-linha {
  display: flex;
  align-items: center;
  gap: var(--esp-5);
}

.faixa-cta-icone {
  flex: none;
  width: 46px;
  height: 46px;
  color: var(--gold);
}

.faixa-cta-linha p {
  margin: 0;
  padding-left: var(--esp-5);
  border-left: 1px solid rgba(255, 255, 255, 0.28);
  font-size: var(--texto-lg);
  font-weight: 600;
}

.faixa-cta .btn {
  margin-top: var(--esp-6);
}

/* ---------- Quem Somos ---------- */
.quem-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

@media (min-width: 880px) {
  .quem-grid {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

.quem-grid h2 {
  margin-bottom: var(--esp-5);
}

.quem-grid p + p {
  margin-top: var(--esp-4);
}

.quem-lado img {
  border-radius: 110px 32px 110px 32px;
  box-shadow: var(--sombra-sm);
}

.quem-atendemos {
  margin-top: var(--esp-5);
  padding: var(--esp-5) var(--esp-6);
  background: var(--branco);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-sm);
}

.quem-atendemos h3 {
  font-size: 1.1rem;
  margin-bottom: var(--esp-3);
}

.quem-atendemos ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--esp-2);
  font-weight: 700;
}

.quem-atendemos li::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.6rem;
  border-radius: 50%;
  background: var(--gold);
}

.quem-diferenciais {
  margin-top: var(--esp-6);
  padding: var(--esp-5) var(--esp-6);
  background: var(--branco);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-sm);
}

.quem-diferenciais h3 {
  font-size: 1.1rem;
  margin-bottom: var(--esp-3);
}

/* Lista simples no mesmo desenho de "Atendemos": sem faixa de ícones */
.quem-diferenciais ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--esp-2);
  font-weight: 700;
}

.quem-diferenciais li::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.6rem;
  border-radius: 50%;
  background: var(--gold);
}

/* Sem barra lateral: o destaque fica por conta do em.marcador no texto */
.citacao {
  max-width: 26ch;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  font-family: var(--fonte-titulo);
  font-size: var(--titulo-md);
  font-weight: 600;
  line-height: 1.3;
  color: var(--navy);
}

/* Fecho de Quem Somos: em 26ch a frase quebrava em quatro linhas estreitas
   num canto da faixa */
@media (min-width: 640px) {
  .quem-citacao {
    max-width: 54ch;
  }
}

/* ---------- Atuação ---------- */
.atuacao-grid {
  gap: var(--esp-4);
}

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

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

.frente {
  padding: var(--esp-6) var(--esp-5);
  border: 1px solid var(--linha);
  border-radius: var(--raio-lg);
  background: var(--branco);
  /* mesma cadência de ~.25s dos demais cards (Impare §5) */
  transition: transform var(--transicao), box-shadow var(--transicao),
    border-color var(--transicao);
}

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

.frente-num {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gold-escuro);
  margin-bottom: var(--esp-2);
}

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

.frente p {
  font-size: var(--texto-sm);
  color: var(--ink-suave);
}

.frente-navy {
  background: linear-gradient(160deg, var(--navy), var(--navy-deep));
  border-color: var(--navy);
}

.frente-navy .frente-num {
  color: var(--gold);
}

.frente-navy h3 {
  color: var(--branco);
}

.frente-navy p {
  color: rgba(255, 255, 255, 0.85);
}

.atuacao-cta {
  margin-top: var(--esp-6);
  font-weight: 700;
}

.frente-link {
  display: inline-block;
  margin-top: var(--esp-3);
  font-size: var(--texto-sm);
  font-weight: 800;
  color: var(--gold-escuro);
  text-decoration: none;
  transition: color var(--transicao);
}

.frente-link:hover {
  color: var(--navy);
}

.frente-link::after {
  content: " →";
}

.frente-navy .frente-link {
  color: var(--gold);
}

.frente-navy .frente-link:hover {
  color: #f4b53a;
}

/* ---------- Caíque Incluir ---------- */
/* Home: apresentação da plataforma em duas colunas — texto com os módulos
   principais à esquerda, tela real do Painel Gestor à direita */
.incluir-home-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 940px) {
  .incluir-home-grid {
    grid-template-columns: 1.05fr 0.95fr;
  }
}

.incluir-home-modulos {
  list-style: none;
  padding: 0;
  margin: var(--esp-5) 0 0;
  display: grid;
  gap: var(--esp-3);
}

@media (min-width: 560px) {
  .incluir-home-modulos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.incluir-home-modulos li {
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--raio-md);
  font-size: var(--texto-sm);
  font-weight: 700;
}

.incluir-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 940px) {
  .incluir-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.incluir-sub {
  font-size: var(--texto-lg);
  margin: var(--esp-3) 0;
  color: var(--gold);
}

.incluir-subtitulo {
  margin-top: var(--esp-6);
  margin-bottom: var(--esp-3);
  font-size: 1.1rem;
}

.incluir-modulos {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--esp-6);
  display: grid;
  gap: var(--esp-3) var(--esp-6);
  font-size: var(--texto-sm);
  font-weight: 700;
}

@media (min-width: 560px) {
  .incluir-modulos {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mesmo disclosure das trilhas de formação (filete + marcador ▸ que gira),
   com a linha e o dourado ajustados ao fundo navy. */
.incluir-modulos .detalhe {
  margin-top: 0;
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  padding-top: var(--esp-3);
}

.incluir-modulos .detalhe summary {
  color: var(--branco);
  transition: color var(--transicao);
}

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

.incluir-modulos .detalhe summary::before {
  color: var(--gold);
}

.incluir-visual img {
  border-radius: var(--raio-md);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}

.incluir-visual figcaption {
  margin-top: var(--esp-3);
  font-size: var(--texto-sm);
  color: rgba(255, 255, 255, 0.82);
}

/* ---------- Formação (home) ----------
   Duas colunas: foto do formador à esquerda, conteúdo com formatos,
   públicos e CTA à direita. */
.formacao-home-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 880px) {
  .formacao-home-grid {
    grid-template-columns: 0.75fr 1.25fr;
  }
}

.formacao-home-visual img {
  border-radius: 110px 32px 110px 32px;
  box-shadow: var(--sombra-sm);
}

.formacao-home-formatos {
  list-style: none;
  padding: 0;
  margin: var(--esp-5) 0 0;
  display: grid;
  gap: var(--esp-3);
}

@media (min-width: 560px) {
  .formacao-home-formatos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.formacao-home-formatos li {
  display: grid;
  gap: var(--esp-1);
  padding: var(--esp-3) var(--esp-4);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--raio-md);
}

.formacao-home-formatos strong {
  font-size: var(--texto-sm);
  font-weight: 800;
  color: var(--navy);
}

.formacao-home-formatos span {
  font-size: var(--texto-sm);
  color: var(--ink-suave);
}

.formacao-home-publicos {
  list-style: none;
  padding: 0;
  margin-top: var(--esp-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
}

/* ---------- Formação ----------
   Abertura em duas colunas (imagem + texto); trilhas, passos, formatos e
   benefícios ocupam a largura do container. Antes tudo vivia na coluna de
   texto e empilhava ao lado de um vão vazio abaixo da foto. */
.formacao-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 880px) {
  .formacao-grid {
    grid-template-columns: 0.6fr 1.4fr;
  }
}

.formacao-bloco {
  margin-top: clamp(2.5rem, 6vw, 3.75rem);
}

.formacao-duo {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  margin-top: clamp(2.5rem, 6vw, 3.75rem);
}

@media (min-width: 900px) {
  .formacao-duo {
    grid-template-columns: 1.15fr 0.85fr;
  }
}

.formacao-visual {
  position: relative;
}

.formacao-visual img {
  width: 100%;
  border-radius: 32px 110px 32px 110px;
  box-shadow: var(--sombra-sm);
}

@media (max-width: 879px) {
  .formacao-visual {
    max-width: 320px;
  }
}

.formacao-lead {
  font-size: var(--texto-lg);
  font-weight: 700;
  color: var(--navy);
  margin: var(--esp-4) 0;
}

/* o ritmo vertical vem de .formacao-bloco/.formacao-duo */
.formacao-subtitulo {
  margin-bottom: var(--esp-4);
  font-size: 1.1rem;
}

.chips {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
}

.trilhas-grid {
  display: grid;
  gap: var(--esp-3) var(--esp-6);
}

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

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

.trilhas-grid .detalhe {
  margin-top: 0;
  border-top: 2px solid var(--linha);
  padding-top: var(--esp-3);
}

/* Trilhas abertas: o conteúdo das trilhas fica visível no primeiro scan,
   sem disclosure — colunas com filete no topo e temas em lista */
.trilhas-abertas {
  display: grid;
  gap: var(--esp-6);
}

@media (min-width: 640px) {
  .trilhas-abertas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

.trilha {
  border-top: 2px solid var(--linha);
  padding-top: var(--esp-4);
}

.trilha h3 {
  font-size: 1.05rem;
  margin-bottom: var(--esp-3);
}

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

.trilha li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: var(--texto-sm);
}

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

/* ---------- Catálogo e páginas de curso ---------- */
/* Curso em destaque: texto à esquerda, ficha rápida navy à direita */
.curso-destaque-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

@media (min-width: 940px) {
  .curso-destaque-grid {
    grid-template-columns: 1.15fr 0.85fr;
  }
}

.curso-destaque-grid h2 {
  margin-bottom: var(--esp-4);
}

.curso-destaque-grid p + p {
  margin-top: var(--esp-4);
}

.curso-destaque-fatos {
  list-style: none;
  padding: 0;
  margin: var(--esp-5) 0 0;
  display: grid;
  gap: var(--esp-3);
}

/* Bolinha no fluxo do texto (não flex): com flex, o <strong> e o texto
   viram itens separados e o rótulo quebra em coluna própria */
.curso-destaque-fatos li::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.6rem;
  border-radius: 50%;
  background: var(--gold);
}

.curso-destaque-fatos strong {
  color: var(--navy);
}

/* Ficha rápida: painel navy com pares rótulo/valor */
.ficha-curso {
  background: linear-gradient(160deg, var(--navy), var(--navy-deep));
  color: var(--branco);
  border-radius: var(--raio-lg);
  padding: var(--esp-6);
  box-shadow: var(--sombra-md);
}

.ficha-curso h3 {
  color: var(--branco);
  font-size: 1.1rem;
  margin-bottom: var(--esp-4);
}

.ficha-curso dl {
  margin: 0;
  display: grid;
  gap: var(--esp-3);
}

.ficha-curso dl div {
  display: grid;
  gap: 2px;
  padding-bottom: var(--esp-3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.ficha-curso dl div:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.ficha-curso dt {
  font-size: var(--texto-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold);
}

.ficha-curso dd {
  margin: 0;
  font-weight: 700;
}

/* Frentes de assessoria no catálogo: blocos abertos com filete, sem card */
.alem-cursos {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--esp-6);
}

@media (min-width: 800px) {
  .alem-cursos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--esp-7);
  }

  /* Variante com dois itens (produtos de uma frente) */
  .alem-cursos.alem-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.alem-cursos li {
  border-top: 2px solid var(--linha);
  padding-top: var(--esp-4);
}

.alem-cursos h3 {
  font-size: var(--titulo-sm);
  margin-bottom: var(--esp-2);
}

.alem-cursos p {
  font-size: var(--texto-sm);
  color: var(--ink-suave);
}

/* Eixos do curso: currículo aberto e numerado (a ordem é informação) */
.eixos-grid {
  list-style: none;
  counter-reset: eixo;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--esp-5) var(--esp-7);
}

@media (min-width: 720px) {
  .eixos-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.eixos-grid > li {
  counter-increment: eixo;
  border-top: 2px solid var(--linha);
  padding-top: var(--esp-3);
  display: grid;
  gap: var(--esp-1);
}

/* Etapas com lista de entregas (consultoria): bolinhas no padrão do site */
.eixos-grid ul {
  list-style: none;
  padding: 0;
  margin-top: var(--esp-2);
  display: grid;
  gap: var(--esp-2);
  align-content: start;
}

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

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

.eixos-grid h3 {
  display: flex;
  align-items: baseline;
  gap: var(--esp-2);
  font-size: 1.05rem;
}

.eixos-grid h3::before {
  content: counter(eixo, decimal-leading-zero);
  font-family: var(--fonte-titulo);
  font-weight: 700;
  color: var(--gold-escuro);
}

.eixo-carga {
  margin-left: auto;
  font-size: var(--texto-sm);
  font-weight: 800;
  color: var(--ink-suave);
  white-space: nowrap;
}

.eixos-grid p {
  margin: 0;
  font-size: var(--texto-sm);
  color: var(--ink-suave);
}

.passos {
  list-style: none;
  padding: 0;
  counter-reset: passo;
  display: grid;
  gap: var(--esp-3);
}

.passos li {
  position: relative;
  padding-left: var(--esp-6);
  font-weight: 700;
}

.passos li::before {
  counter-increment: passo;
  content: counter(passo);
  position: absolute;
  left: 0;
  top: -0.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  font-size: var(--texto-sm);
  font-weight: 800;
}

/* Etapas lado a lado, no mesmo vocabulário de filete + conteúdo das trilhas
   e dos formatos; abaixo de 900px seguem empilhadas com o número à esquerda. */
@media (min-width: 900px) {
  .passos-linha {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--esp-5);
  }

  .passos-linha li {
    padding-left: 0;
    padding-top: 3rem;
    border-top: 2px solid var(--linha);
    font-size: var(--texto-sm);
    line-height: 1.45;
  }

  .passos-linha li::before {
    top: var(--esp-4);
  }
}

.formacao-beneficios {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--esp-2);
  font-weight: 700;
}

.formacao-beneficios li::before {
  content: "";
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.6rem;
  border-radius: 50%;
  background: var(--gold);
}

.formatos {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--esp-4) var(--esp-6);
}

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

.formatos li {
  border-top: 2px solid var(--linha);
  padding-top: var(--esp-3);
}

.formatos h4 {
  font-size: 1rem;
  margin-bottom: 0.15rem;
}

.formatos p {
  font-size: var(--texto-sm);
  color: var(--ink-suave);
}

.formacao-citacao {
  max-width: 42ch;
}

/* ---------- Contato ---------- */
.contato-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

@media (min-width: 880px) {
  .contato-grid {
    grid-template-columns: 1fr 1.1fr;
  }
}

.contato-grid > * {
  min-width: 0;
}

.contato-grid h2 {
  margin-bottom: var(--esp-4);
}

/* Canais como lista simples na coluna de texto: rótulo em caps sobre o
   valor, sem recipiente — o cartão da direita agora é o formulário */
.canais {
  list-style: none;
  padding: 0;
  margin-top: var(--esp-6);
  display: grid;
  gap: var(--esp-4);
}

.canais li {
  display: grid;
  gap: var(--esp-1);
  justify-items: start;
}

.canal-rotulo {
  font-size: var(--texto-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-suave);
}

.canais a,
.canal-valor {
  font-weight: 700;
  color: var(--navy);
  overflow-wrap: anywhere;
}

.canais a {
  text-decoration: none;
  border-bottom: 3px solid transparent;
  transition: border-color var(--transicao);
}

.canais a:hover {
  border-bottom-color: var(--gold);
}

/* Formulário de contato: cartão branco na coluna direita. Sem backend no
   host, o envio real acontece via WhatsApp (js/main.js). */
.contato-form {
  background: var(--branco);
  border-radius: var(--raio-lg);
  box-shadow: var(--sombra-sm);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  display: grid;
  gap: var(--esp-4);
}

.campo {
  display: grid;
  gap: var(--esp-2);
}

.campo label {
  font-size: var(--texto-sm);
  font-weight: 800;
  color: var(--navy);
}

.campo-opcional {
  font-weight: 600;
  color: var(--ink-suave);
}

.campo input,
.campo textarea {
  width: 100%;
  padding: 0.7rem 0.95rem;
  border: 1px solid var(--linha);
  border-radius: var(--raio-sm);
  background: var(--bg);
  font: inherit;
  color: var(--ink);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}

.campo input:focus-visible,
.campo textarea:focus-visible {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(2, 36, 67, 0.14);
}

.campo textarea {
  resize: vertical;
  min-height: 8.5rem;
}

.campo-dica {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--ink-suave);
}

.contato-form-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
  margin-top: var(--esp-2);
}

/* ---------- Página Área do Aluno ---------- */
.aluno-secao {
  background: linear-gradient(180deg, var(--bg) 0%, var(--cream) 100%);
  min-height: calc(100vh - var(--header-altura) - 22rem);
}

.aluno-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 880px) {
  .aluno-grid {
    grid-template-columns: 1.2fr 0.8fr;
  }
}

.aluno-lead {
  font-size: var(--texto-lg);
  font-weight: 700;
  color: var(--navy);
  margin: var(--esp-4) 0;
}

.aluno-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
  margin-top: var(--esp-6);
}

.aluno-visual {
  justify-self: center;
  max-width: 300px;
  opacity: 0.92;
}

@media (max-width: 879px) {
  .aluno-visual {
    max-width: 180px;
  }
}

/* ---------- Página 404 ---------- */
.erro-secao {
  background: linear-gradient(180deg, var(--bg) 0%, var(--cream) 100%);
  min-height: calc(100vh - var(--header-altura) - 8rem);
  display: grid;
  align-items: center;
}

.erro-lead {
  font-size: var(--texto-lg);
  color: var(--ink-suave);
  margin-top: var(--esp-4);
}

.erro-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-3);
  margin-top: var(--esp-6);
}

/* ---------- Reveal progressivo (só com JS; sem JS tudo visível) ----------
   A primeira seção nunca inicia oculta: ela é o LCP da página e esconder
   above-the-fold atrasaria a renderização percebida.
   Usa animation (não transition) para não disputar a propriedade
   transition dos hovers de cards e botões. */
.js #conteudo section:not(:first-of-type) .container > * {
  opacity: 0;
}

/* fill backwards (não forwards): ao terminar, a animação "solta" o
   elemento e o estilo normal assume — hovers voltam a funcionar. */
.js #conteudo section.revelado .container > * {
  opacity: 1;
  animation: revelar 560ms var(--ease-fluida) backwards;
}

.js #conteudo section.revelado .container > *:nth-child(2) {
  animation-delay: 100ms;
}

.js #conteudo section.revelado .container > *:nth-child(n + 3) {
  animation-delay: 200ms;
}

/* Grades principais: o bloco não anima; cada card entra em cascata */
.js #conteudo section:not(:first-of-type) .container > .atuacao-grid {
  opacity: 1;
  animation: none;
}

.js #conteudo section:not(:first-of-type) .atuacao-grid > * {
  opacity: 0;
}

.js #conteudo section.revelado .atuacao-grid > * {
  opacity: 1;
  animation: revelar 620ms var(--ease-fluida) backwards;
}

.js #conteudo section.revelado .atuacao-grid > *:nth-child(1) { animation-delay: 120ms; }
.js #conteudo section.revelado .atuacao-grid > *:nth-child(2) { animation-delay: 200ms; }
.js #conteudo section.revelado .atuacao-grid > *:nth-child(3) { animation-delay: 280ms; }
.js #conteudo section.revelado .atuacao-grid > *:nth-child(4) { animation-delay: 360ms; }
.js #conteudo section.revelado .atuacao-grid > *:nth-child(5) { animation-delay: 440ms; }
.js #conteudo section.revelado .atuacao-grid > *:nth-child(6) { animation-delay: 520ms; }

@keyframes revelar {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js #conteudo section:not(:first-of-type) .container > *,
  .js #conteudo section:not(:first-of-type) .atuacao-grid > *,
  /* A regra de .revelado não exclui a primeira seção, então o hero também
     recebe a animação de entrada. Com reduced-motion o navegador zera a
     duração e a animação fica presa no quadro inicial (fill backwards,
     opacity 0) — o hero sumia de vez. Estes dois seletores empatam em
     especificidade com a regra de .revelado e, vindo depois, desligam a
     animação em TODAS as seções. */
  .js #conteudo section.revelado .container > *,
  .js #conteudo section.revelado .atuacao-grid > * {
    opacity: 1;
    animation: none;
  }
}

/* ---------- Abertura (logo + frases dos pilares) ----------
   Ativada pela classe .intro-ativa no <html>, definida por script inline
   no <head> apenas na primeira visita da sessão, com JS e sem
   prefers-reduced-motion. Sem a classe o overlay nem sequer é exibido.

   Superfície clara: a marca é feita de duas bolhas (uma navy, uma dourada) e
   wordmark navy — em fundo navy metade dela some. Dar fundo claro resolve o
   contraste sem recipiente nem tratamento no asset, e a cortina que sobe
   passa a revelar o hero navy: claro → escuro vira gesto. */
.intro {
  display: none;
}

.intro-ativa {
  overflow: hidden; /* trava o scroll enquanto a abertura roda */
}

.intro-ativa .intro {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 72% 16%, #fffdf9 0%, var(--cream) 52%, #efe6d7 100%);
}

/* Ornamentos circulares da marca */
.intro::before,
.intro::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

/* Em fundo claro os anéis precisam de mais corpo que os 0,14/0,05 que tinham
   sobre navy — abaixo disso somem. Dourado puro é decorativo aqui (nunca
   texto), então pode aparecer sem ferir a regra do tokens.css. */
.intro::before {
  top: -140px;
  right: -140px;
  width: 380px;
  height: 380px;
  border: 48px solid rgba(237, 165, 21, 0.3);
}

.intro::after {
  bottom: -110px;
  left: -110px;
  width: 270px;
  height: 270px;
  border: 38px solid rgba(2, 36, 67, 0.07);
}

.intro-conteudo {
  display: grid;
  justify-items: center;
  gap: var(--esp-5);
  padding: var(--esp-5);
  text-align: center;
}

.intro-logo {
  width: clamp(150px, 22vw, 210px);
  height: auto;
  opacity: 0;
  animation: intro-sobe 850ms var(--ease-fluida) 150ms forwards;
}

.intro-frases {
  display: grid;
  place-items: center;
  min-height: 2.8em;
  max-width: 24ch;
  font-family: var(--fonte-titulo);
  font-size: clamp(1.2rem, 1rem + 1.5vw, 1.7rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--navy);
}

.intro-frase {
  grid-area: 1 / 1;
  opacity: 0;
}

/* Dourado puro sobre creme dá 1,9:1 — abaixo até do mínimo de texto grande.
   O --gold-escuro leva a 5,1:1 (regra do tokens.css). */
.intro-frase em {
  font-style: normal;
  color: var(--gold-escuro);
}

.intro-frase:nth-child(1) {
  animation: intro-frase 880ms ease-in-out 700ms both;
}

.intro-frase:nth-child(2) {
  animation: intro-frase 880ms ease-in-out 1560ms both;
}

.intro-frase:nth-child(3) {
  animation: intro-sobe 700ms var(--ease-fluida) 2420ms both;
}

@keyframes intro-sobe {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes intro-frase {
  0% {
    opacity: 0;
    transform: translateY(14px);
  }
  22%,
  74% {
    opacity: 1;
    transform: none;
  }
  100% {
    opacity: 0;
    transform: translateY(-12px);
  }
}

/* Saída: cortina sobe com base arredondada (curva orgânica da marca) */
.intro-saindo .intro {
  animation: intro-cortina 720ms var(--ease-io) forwards;
}

.intro-saindo .intro-conteudo {
  animation: intro-esvai 300ms ease-out forwards;
}

@keyframes intro-cortina {
  to {
    transform: translateY(-100%);
    border-bottom-left-radius: 50% 110px;
    border-bottom-right-radius: 50% 110px;
  }
}

@keyframes intro-esvai {
  to {
    opacity: 0;
  }
}

/* Hero entra em cascata assim que a cortina começa a subir.
   O fundo do carrossel só esmaece (nunca desloca): .hero-slides é a camada
   absoluta inset-0 e um translateY revelaria o navy na borda inferior. */
.intro-ativa .hero-texto > *,
.intro-ativa .hero-dots,
.intro-ativa .hero-slides {
  opacity: 0;
}

.intro-saindo .hero-texto > *,
.intro-saindo .hero-dots {
  animation: hero-entra 800ms var(--ease-fluida) both;
}

.intro-saindo .hero-texto > *:nth-child(1) { animation-delay: 220ms; }
.intro-saindo .hero-texto > *:nth-child(2) { animation-delay: 320ms; }
.intro-saindo .hero-texto > *:nth-child(3) { animation-delay: 420ms; }
.intro-saindo .hero-texto > *:nth-child(4) { animation-delay: 520ms; }
.intro-saindo .hero-texto > *:nth-child(5) { animation-delay: 620ms; }
.intro-saindo .hero-dots { animation-delay: 720ms; }

.intro-saindo .hero-slides {
  animation: hero-fundo 900ms var(--ease-fluida) both;
}

@keyframes hero-fundo {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes hero-entra {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Seção Professoras (/cursos/) ----------
   Cards institucionais com foto redonda + bio integral. Spec exige 3 colunas
   em ≥ 880px (comparação visual imediata entre as 3 educadoras). `minmax(0,
   1fr)` permite comprimir para caber em 880-960px sem quebrar linha — em
   auto-fit(minmax(280px, 1fr)) o 3º card caía para uma segunda linha nessa
   faixa. Sobriedade sobre brilho: sem hover/scale — página de credenciais,
   não vitrine. */
.professoras-grid {
  display: grid;
  gap: var(--esp-5) var(--esp-4);
  grid-template-columns: 1fr;
}

.professora {
  display: grid;
  gap: var(--esp-3);
  align-content: start;
}

@media (min-width: 880px) {
  .professoras-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* Com subgrid o row-gap do container passa a ser o ritmo interno dos
       cards (só existe uma linha de cards nesta faixa). */
    row-gap: var(--esp-3);
  }

  /* subgrid alinha as quatro faixas do card (foto, nome/qualificação, resumo,
     disclosure) entre as três colunas — mesmo recurso de .inclusao-alinhada.
     Sem isso, a qualificação de 2 ou 3 linhas e os resumos de 4 a 6 linhas
     deixavam cada card começando e terminando numa altura diferente. */
  .professora {
    grid-template-rows: subgrid;
    grid-row: span 4;
  }

  /* Versão compacta (página do curso): só foto + credencial, sem bio nem
     disclosure — o card tem 2 faixas, não 4 */
  .professoras-compacta .professora {
    grid-row: span 2;
  }
}

/* Anel branco como border, não como outline: outline com offset negativo é
   desenhado POR CIMA dos pixels da foto e a curva recalculada pelo offset não
   coincide com o círculo do border-radius — sobravam falhas de antialias e
   frestas da foto no anel. border participa do box (box-sizing: border-box),
   acompanha o raio com precisão e a foto é recortada dentro dele. */
.professora-foto {
  width: clamp(140px, 22vw, 200px);
  aspect-ratio: 1;
  border: 6px solid var(--branco);
  border-radius: 50%;
  object-fit: cover;
  justify-self: center;
  background: var(--branco);
  box-shadow: 0 12px 28px rgba(2, 36, 67, 0.18);
}

.professora-nome {
  text-align: center;
  margin: 0;
}

/* Qualificação-síntese: dourado escuro como os rótulos do site, mas sem o
   caixa-alta + letter-spacing do .kicker — em coluna de ~340px as linhas de
   três títulos ("Mestre em Educação · Pedagoga · Pós em Neuropsicopedagogia")
   quebravam em três linhas e desalinhavam os cards. */
.professora-qualif {
  text-align: center;
  font-size: var(--texto-sm);
  font-weight: 700;
  color: var(--gold-escuro);
}

/* Filete de separação no padrão de .inclusao-grid article: separa credencial
   de trajetória sem transformar o card em caixa. */
.professora-bio {
  border-top: 2px solid var(--linha);
  padding-top: var(--esp-3);
  font-size: var(--texto-sm);
  line-height: 1.55;
}

.professora-bio p + p {
  margin-top: var(--esp-2);
}

/* Trajetória completa em disclosure: o texto integral do cliente tem de 2 a 4
   parágrafos por professora, e em três colunas de ~340px isso virava três
   paredes de altura muito diferente. O 1º parágrafo (as credenciais) fica
   visível e o resto abre no .detalhe — mesmo componente das trilhas de
   /formacao/. O conteúdo continua integral no HTML.
   Fora do .professora-bio para ocupar a 4ª faixa do subgrid: assim o summary
   das três colunas fica na mesma altura. */
.professora > .detalhe {
  margin-top: 0;
  align-self: start;
  font-size: var(--texto-sm);
  line-height: 1.55;
}

.professora > .detalhe p {
  margin-top: var(--esp-2);
}

/* ---------- Página do curso 180h (/cursos/apoio-educacao-especial-inclusiva/) ----------
   Dois ajustes de espaço; o resto da página é composto só com componentes já
   existentes (.frente, .eixos-grid, .quem-atendemos, .formacao-beneficios,
   .chips, .citacao). */

/* Segundo cabeçalho dentro da mesma seção (Objetivo, na abertura; os 10 eixos,
   na estrutura): .secao-intro e .formacao-subtitulo não têm margem superior
   porque nascem como primeiro filho do .container. */
.bloco-seguinte {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
}

/* .citacao nasceu em 26ch para frases de três a seis palavras. A frase de
   fecho do curso tem 27 palavras e caía em sete linhas estreitas de 470px.
   42ch resolve em quatro linhas sem esticar o corpo de display até a largura
   do container (54ch de Baloo 2 em --titulo-md daria 975px). */
@media (min-width: 640px) {
  .citacao-larga {
    max-width: 42ch;
  }
}