/* ====================================================================
   UMANUT - camada de graduacao
   Folha das paginas de /graduacoes/<curso>/. Carrega DEPOIS do base.css,
   que traz tokens, reset, tipografia, botoes, grao e rodape.
   Aqui fica so o que e proprio de uma pagina de graduacao.

   Uma pagina de curso nova nao redefine nada disto: ela carrega as duas
   folhas, escreve o HTML das secoes e so acrescenta o que for dela.
   Alterou aqui, alterou em todos os cursos - confira mais de uma pagina
   antes de dar por pronto.

   Ordem no <head>: base.css -> graduacao.css -> nav.css
   ==================================================================== */

/* Titulos de duas partes: a linha escura prepara, a italica azul entrega.
   Sem isto o text-wrap:balance parte o <em> no meio ("Esse assunto se /
   trata de perto") e as duas cores se misturam na mesma linha. Mesma
   convencao ja usada em .tl-copy h3 em na pagina Sobre nos.

   NEM TODO titulo entra aqui. Esta e a lista dos que empilham; quem fica
   de fora corre em uma linha so, com a italica azul emendada na mesma
   linha. Sairam em 10/09/2026, a pedido do Marcelo: #matriz-title ("A
   matriz curricular" mede 480px num container de 1200 - empilhar era
   inventar uma quebra que a falta de espaco nao pediu) e #trilha-title,
   que ja nasceu fora da lista. Se um titulo novo precisar empilhar, o
   lugar de dizer isso e aqui. */
#sobre-curso-title em,
#publico-title em,
#diferenciais-title em,
#atuacao-title em,
#docentes-title em,
#depoimentos-title em,
#investimento-title em,
#processo-title em,
#faq-title em,
#interesse-title em,
#cta-title em { display: block; }

/* ====================================================
   PAGE HERO - mesma estrutura das demais páginas internas
==================================================== */
.page-hero {
  position: relative;
  min-height: 70svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: linear-gradient(180deg, var(--azul-nevoa) 0%, var(--areia-papel) 100%);
  padding-block: 10rem 4.5rem;
}
/* Duas correcoes contra o corte seco do azul nas bordas do hero:

   1. O blur fica em cada mancha, nao na camada. Com filter na camada (que
      tem inset:0, o retangulo exato do hero) o navegador recorta o que
      alimenta o desfoque na moldura da camada, e a parte das manchas que
      nasce fora dela some de um pixel para o outro - o que aparecia como
      um risco vertical perto da margem esquerda.
   2. A mascara apaga a camada antes do rodape da secao. Sem ela a mancha
      azul da esquerda ainda esta em forca total quando o hero termina, e o
      overflow:hidden corta ela a seco no canto de baixo. So no eixo
      vertical: mascarar tambem as laterais tirava metade do azul, e ali
      nao ha corte a resolver depois da correcao 1. */
.aurora-light {
  position: absolute;
  inset: 0;
  z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 97%);
  mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 97%);
}
.aurora-light i { position: absolute; border-radius: 50%; filter: blur(70px); }
.aurora-light i:nth-child(1) {
  width: 55vmax; height: 55vmax;
  right: -18vmax; top: -24vmax;
  background: radial-gradient(circle at 45% 45%, rgba(190,210,240,0.95) 0%, transparent 62%);
}
.aurora-light i:nth-child(2) {
  width: 44vmax; height: 44vmax;
  left: -14vmax; top: 6vmax;
  background: radial-gradient(circle at 55% 45%, rgba(80,150,190,0.45) 0%, transparent 62%);
}
.aurora-light i:nth-child(3) {
  width: 40vmax; height: 40vmax;
  right: 14vmax; bottom: -22vmax;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.9) 0%, transparent 60%);
}
@media (prefers-reduced-motion: no-preference) {
  .aurora-light i:nth-child(1) { animation: auroraDrift1 18s ease-in-out infinite alternate; }
  .aurora-light i:nth-child(2) { animation: auroraDrift2 22s ease-in-out infinite alternate; }
  .aurora-light i:nth-child(3) { animation: auroraDrift3 15s ease-in-out infinite alternate; }
}
@keyframes auroraDrift1 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(10vmax, 6vmax) scale(1.18); }
}
@keyframes auroraDrift2 {
  from { transform: translate(0, 0) scale(1.1); }
  to   { transform: translate(-8vmax, 8vmax) scale(0.92); }
}
@keyframes auroraDrift3 {
  from { transform: translate(0, 0) scale(0.95); }
  to   { transform: translate(6vmax, -10vmax) scale(1.22); }
}
/* O "U" tem que caber inteiro dentro do hero. Cortado embaixo (era
   bottom:-7rem com 36vw) ele perde a curva, que e a unica parte que
   identifica a letra - sobram dois tracos verticais que leem como
   retangulos partindo o fundo azul. Dai o corpo menor, o line-height
   apertado e o afastamento positivo do rodape da secao. */
.page-hero-monogram {
  position: absolute;
  right: clamp(-2rem, -1.5vw, -0.5rem);
  bottom: 1.5rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(11rem, 26vw, 20rem);
  line-height: 0.72;
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(20,60,140,0.1);
  z-index: 1;
  pointer-events: none;
  user-select: none;
}
.page-hero-content {
  position: relative;
  z-index: 2;
  width: min(var(--max-w), 100% - 3rem);
  margin-inline: auto;
  text-align: left;
}
.breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--azul-umanut);
  margin-bottom: 1.75rem;
  padding: 0.55rem 1.4rem;
  border: 1px solid rgba(20,60,140,0.22);
  border-radius: 50px;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(8px);
  flex-wrap: wrap;
}
.breadcrumb a { transition: opacity 200ms; opacity: 0.75; }
.breadcrumb a:hover { opacity: 1; }
.breadcrumb .sep { opacity: 0.45; }

/* No mobile os 36 caracteres com 0.2em de entreletra nao cabiam nos 265px
   uteis: quebrava em duas linhas, deixando um separador solto no fim da
   primeira e esticando a pilula. Entreletra e respiro menores resolvem
   sem cortar nenhum nivel da trilha. */
@media (max-width: 768px) {
  .breadcrumb {
    letter-spacing: 0.05em;
    padding: 0.5rem 0.9rem;
    gap: 0.4rem;
    font-size: 0.63rem;
  }
}
.page-hero h1 {
  color: var(--tinta-profunda);
  /* 10vw e nao 8.4vw: o titulo desta pagina e curto e cabe em uma linha,
     entao ha folga para o tipo crescer no mobile. A 360px isso da 36px de
     fonte para 288px de texto num container de 312px. */
  font-size: clamp(2rem, 10vw, 7.6rem);
  line-height: 1.05;
}
.page-hero h1 .line {
  display: block;
  overflow: hidden;
  padding-block: 0.08em;
}
.page-hero h1 .line > span {
  display: inline-block;
  /* sem white-space:nowrap: se um titulo futuro nao couber, ele quebra em
     vez de ser cortado em silencio pelo overflow:hidden do hero */
}
@media (prefers-reduced-motion: no-preference) {
  /* O deslocamento inicial do titulo vive AQUI DENTRO, e nao no bloco
     base. Fora do media query, quem pede movimento reduzido nao recebe a
     animacao que o desfaz - e o h1 fica preso 115% abaixo, invisivel sob
     o overflow:hidden da .line. O titulo da pagina sumia por completo. */
  .page-hero h1 .line > span { transform: translateY(115%); }
  /* Delays recalibrados em 14/08/2026, quando o preloader saiu desta
     pagina. Eram 1.35s / 1.5s / 1.65s / 1.95s: o hero comecava junto com
     a cortina subindo. Sem cortina, aquilo virava tela parada por quase
     dois segundos. Subtrai-se 1.3s de cada um, entao o ritmo entre os
     quatro continua o mesmo (0.15s, 0.15s, 0.30s) - so saiu a espera.
     A HOME NAO: la a cortina continua, e os delays de la seguem em
     1.35s+ de proposito. Nao "uniformizar" os dois. */
  .breadcrumb { animation: heroRise 0.9s var(--ease-out-expo) 0.05s both; }
  .page-hero h1 .line:nth-child(1) > span { animation: heroLine 1.1s var(--ease-out-expo) 0.2s both; }
  .page-hero h1 .line:nth-child(2) > span { animation: heroLine 1.1s var(--ease-out-expo) 0.35s both; }
  .page-hero-tagline, .page-hero-meta, .page-hero-actions { animation: heroRise 1s var(--ease-out-expo) 0.65s both; }
}
@keyframes heroLine { to { transform: translateY(0); } }
@keyframes heroRise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-hero h1 em {
  font-style: italic;
  color: var(--azul-umanut);
}
.page-hero-tagline {
  font-size: clamp(1rem, 1.9vw, 1.3rem);
  font-weight: 300;
  color: var(--texto-muted);
  max-width: 62ch;
  margin-top: 1.75rem;
  line-height: 1.8;
}
/* O trecho que da o recado. A tagline corre em 300 e cor muted: subir so
   o peso deixaria o bold cinza e sem presenca, entao o <strong> tambem
   troca a cor pela tinta cheia. Declaro font-style e as duas coisas de
   forma explicita porque o <strong> da plataforma vem com o bold do
   Bootstrap (700), que aqui pesaria demais em 1,3rem. */
.page-hero-tagline strong {
  font-weight: 500;
  font-style: normal;
  color: var(--tinta-profunda);
}
.page-hero-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2.25rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /* Azul Umanut pelo mesmo motivo do .kicker no base.css: 11,2px sobre o
     gradiente do hero dava 4,18:1 no topo e 4,38:1 embaixo, e a WCAG
     pede 4,5:1 nesse corpo. O ::before herda por currentColor. */
  color: var(--azul-umanut);
}
.page-hero-meta::before {
  content: '';
  flex: 0 0 auto;
  width: 44px; height: 1px;
  background: currentColor;
  opacity: 0.5;
}
/* No mobile a linha quebrava em tres, com o traco centralizado ao lado da
   linha do meio e "2 / ANOS" partido. Sem o traco e com entreletra menor
   ela fecha em duas linhas inteiras. */
@media (max-width: 768px) {
  .page-hero-meta { letter-spacing: 0.1em; gap: 0; }
  .page-hero-meta::before { display: none; }
}
.page-hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
}

/* ====================================================
   QUEM FICA NO TOPO DEPENDE DA LARGURA.

   Desktop: o menu do site sai de cena e a barra de seções assume o topo.
   Dois menus fixos empilhados comeriam ~140px e competiriam entre si.

   Mobile (até 768px, onde o nav.css troca o menu pelo hambúrguer): manda
   o padrão da plataforma - menu do site fixo, retraindo ao descer e
   voltando ao subir, e a barra de seções rolando junto com a página. Em
   tela pequena o hambúrguer precisa estar sempre a um toque, e 64px
   permanentes de barra secundária custam caro.

   O seletor leva "body" na frente de proposito: o nav.css e carregado
   DEPOIS deste bloco, entao com a mesma especificidade ele venceria.
==================================================== */
@media (min-width: 769px) {
  body .site-header { position: absolute; }
  body .site-header.hidden { transform: none; }
}

/* ====================================================
   BARRA DE SEÇÕES - navegação interna do curso
==================================================== */
.curso-nav {
  position: static;
  z-index: 90;
  padding-block: 0;
  background: rgba(247,244,236,0.88);
  backdrop-filter: blur(12px);
  border-block: 1px solid rgba(20,60,140,0.12);
  transition: background 250ms, box-shadow 250ms, border-color 250ms;
}
/* Depois da regra base de propósito: a media query não acrescenta
   especificidade, então declarada antes ela seria sobrescrita pelo
   position:static acima. */
@media (min-width: 769px) {
  .curso-nav { position: sticky; top: 0; }
}
@media (prefers-reduced-motion: reduce) { .curso-nav { transition: none; } }
/* Quebra em vez de rolar na horizontal. Rolando, o ultimo item aparecia
   cortado no meio da palavra ("Matriz curricula") sem nenhum sinal de que
   havia mais - e uma fileira que rola sem afordancia nao se le como menu.
   Quebrando, todos os destinos ficam visiveis em qualquer largura. */
.curso-nav-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding-block: 0.7rem;
}
.curso-nav-rotulo {
  flex: 0 0 100%;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--texto-muted);
  margin-bottom: 0.15rem;
}
/* No desktop a barra gruda no topo e se explica sozinha; o rotulo so
   serve na versao que rola junto com a pagina. */
@media (min-width: 769px) { .curso-nav-rotulo { display: none; } }
.curso-nav.fixa .curso-nav-rotulo { color: rgba(255,255,255,0.62); }

/* No mobile as pilulas quebravam em fileiras desiguais (2, 2, 3, 1) e
   liam como um amontoado. Duas colunas alinhadas leem como menu; sem a
   pilula, "Matriz curricular" cabe na coluna de 152px. */
@media (max-width: 768px) {
  .curso-nav-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.1rem 1rem;
    padding-block: 0.9rem 1.1rem;
  }
  .curso-nav-rotulo { grid-column: 1 / -1; margin-bottom: 0.45rem; }
  .curso-nav a {
    justify-self: start;
    padding: 0.42rem 0;
    border-radius: 0;
    background: none;
  }
  .curso-nav a:hover { background: none; }
  .curso-nav a.ativo {
    background: none;
    color: var(--azul-umanut);
    border-bottom: 2px solid currentColor;
  }
}
.curso-nav a {
  flex: 0 0 auto;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--texto-muted);
  padding: 0.5rem 0.95rem;
  border-radius: 50px;
  white-space: nowrap;
  transition: color 220ms, background 220ms;
}
.curso-nav a:hover { color: var(--azul-umanut); background: rgba(20,60,140,0.07); }
.curso-nav a.ativo { color: var(--azul-umanut); background: var(--azul-nevoa); }
.curso-nav a:focus-visible { outline: 2px solid var(--azul-umanut); outline-offset: 2px; }

/* Estado grudado: em repouso a barra vive sobre o areia-papel e some nele.
   Assim que gruda no topo, ela precisa se separar do conteudo que passa
   por baixo - e a pagina tem seis fundos diferentes (branco, areia,
   areia-quente, nevoa, gradiente escuro, tinta), entao nenhum tom claro
   serve para todos. O escuro serve, e ainda casa com o header. */
.curso-nav.fixa {
  background: rgba(10,21,48,0.92);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-block-color: rgba(190,210,240,0.16);
  box-shadow: 0 8px 28px rgba(10,21,48,0.22);
}
.curso-nav.fixa a { color: rgba(255,255,255,0.78); }
.curso-nav.fixa a:hover { color: var(--branco); background: rgba(255,255,255,0.12); }
.curso-nav.fixa a.ativo { color: var(--tinta-profunda); background: var(--azul-manha); }
.curso-nav.fixa a:focus-visible { outline-color: var(--azul-manha); }
.curso-nav.fixa a.curso-nav-cta { background: var(--branco); color: var(--azul-umanut); }
.curso-nav.fixa a.curso-nav-cta:hover { background: var(--azul-manha); color: var(--tinta-profunda); }
.curso-nav a.curso-nav-cta {
  margin-left: auto;
  color: var(--branco);
  background: var(--azul-umanut);
  padding: 0.55rem 1.35rem;
  box-shadow: 0 3px 12px rgba(20,60,140,0.24);
}
.curso-nav a.curso-nav-cta:hover { color: var(--branco); background: var(--azul-horizonte); }
/* abaixo disso a fileira de seções já ocupa a largura toda:
   o CTA sai daqui e continua disponível no fim da página.
   Era 1100px, de quando a barra tinha nove destinos; com "Diferenciais"
   os links passaram a somar 1142px e o CTA caia para uma segunda fileira
   sozinho entre 1101px e 1249px. */
@media (max-width: 1249px) { .curso-nav a.curso-nav-cta { display: none; } }

/* âncoras param abaixo da barra de seções (64px) e não do header,
   que aqui já saiu de cena quando qualquer âncora é acionada */
:target, [id] { scroll-margin-top: 84px; }

/* ====================================================
   FICHA - dados objetivos do curso, logo abaixo do hero
==================================================== */
/* Sem margem negativa. A sobreposicao com o hero era de apenas 13px -
   nem card flutuante nem card separado, so um meio-termo que deixava o
   card colado nos botoes (31px). Agora ele assenta inteiro na faixa
   clara, com respiro proprio. */
/* Topo zerado e base igual à cauda do hero (4.5rem, o mesmo respiro que
   ele já dá abaixo dos botões). O espaço acima do card não vem daqui: vem
   do padding-bottom do hero, que esta regra não enxerga. Somando os dois
   dava 108px acima contra 48 abaixo no desktop, e o card lia como
   descentralizado. Agora fica 72/72 em qualquer largura. */
.ficha {
  padding-block: 0 4.5rem;
}
.ficha-inner {
  background: var(--branco);
  border: 1px solid rgba(20,60,140,0.1);
  border-radius: 20px;
  box-shadow: 0 18px 48px rgba(10,21,48,0.09);
  /* Correção óptica de 2px. A primeira linha é "GRAU", caixa alta, que
     deixa 5,7px de vazio entre o topo da caixa de linha e o topo dos
     glifos; a última é a linha de apoio, em corpo menor, que deixa bem
     menos. Com padding geométrico igual (28/28) o card lê como se o
     conteúdo estivesse alto - 36,7px ópticos acima contra 32,5 abaixo. */
  padding-inline: clamp(1.5rem, 4vw, 3rem);
  padding-block: calc(clamp(1.75rem, 4vw, 2.5rem) - 2px)
                 calc(clamp(1.75rem, 4vw, 2.5rem) + 2px);
  display: grid;
  /* Eram cinco colunas ate 10/09/2026, quando o item "Calendario / Segue
     o luach" saiu da ficha. Com quatro itens a conta folga: a 1200px cada
     coluna fica com 252px. Abaixo de 1024px cai para duas colunas, que
     agora fecham 2x2 certinho - nao sobra item orfao na ultima fila. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.ficha-item { position: relative; }
/* filete separador entre as colunas (nunca na primeira) */
.ficha-item + .ficha-item::before {
  content: '';
  position: absolute;
  left: calc(clamp(1.5rem, 3vw, 2.5rem) / -2);
  top: 0.15rem; bottom: 0.15rem;
  width: 1px;
  background: rgba(20,60,140,0.12);
}
.ficha-item dt {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /* Sobre o cartao branco o Azul Horizonte dava 4,82:1 e PASSAVA em AA,
     por 0,32 de folga. Trocado assim mesmo em 10/09/2026: e o mesmo
     rotulo micro em caixa alta do .kicker e do .semestre h3, e um
     sistema de rotulos com duas cores diferentes pela metade nao e
     sistema. Aqui vai a 10,2:1.

     Eu avisei o Marcelo de que este era o unico dos quatro que ja
     passava, e ofereci reverter so ele. Ele mandou manter o Azul Umanut
     em 10/09/2026. Entao a unidade do sistema de rotulos e decisao
     tomada, nao efeito colateral da varredura de contraste. */
  color: var(--azul-umanut);
  margin-bottom: 0.45rem;
}
.ficha-item dd {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--tinta-profunda);
  letter-spacing: -0.01em;
}
.ficha-item dd small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--texto-muted);
  letter-spacing: 0;
  margin-top: 0.15rem;
}
@media (max-width: 1023px) {
  .ficha-inner { grid-template-columns: 1fr 1fr; }
  /* quatro itens fecham 2x2: nao ha item orfao para esticar. A regra
     .ficha-item:nth-child(5) que morava aqui saiu com o quinto item. */
  .ficha-item:nth-child(odd)::before { display: none; }
  .ficha-item:nth-child(n+3)::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    /* +2px pela mesma razão do padding do card: acima do filete termina um
       texto com descendente, abaixo começa um rótulo em caixa alta. */
    top: calc(clamp(1.5rem, 3vw, 2.5rem) / -2 + 2px);
    height: 1px;
    background: rgba(20,60,140,0.12);
  }
}
@media (max-width: 440px) {
  .ficha-inner { grid-template-columns: 1fr; }
  .ficha-item::before { display: none; }
  .ficha-item:nth-child(n+2)::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    /* +2px pela mesma razão do padding do card: acima do filete termina um
       texto com descendente, abaixo começa um rótulo em caixa alta. */
    top: calc(clamp(1.5rem, 3vw, 2.5rem) / -2 + 2px);
    height: 1px;
    background: rgba(20,60,140,0.12);
  }
}

/* ====================================================
   SOBRE O CURSO
==================================================== */
.sobre-curso-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.sobre-curso-copy p {
  color: var(--texto-muted);
  max-width: 62ch;
}
.sobre-curso-copy p + p { margin-top: 1.1rem; }
.sobre-curso-copy h2 { margin-bottom: 1.5rem; }
.sobre-curso-copy h2 em { font-style: italic; color: var(--azul-horizonte); }
.sobre-curso-media {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 16px 44px rgba(10,21,48,0.2);
  aspect-ratio: 4/5;
  position: sticky;
  top: 7rem;
}
.sobre-curso-media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-smooth), filter 400ms;
}
.sobre-curso-media:hover img { transform: scale(1.05); filter: saturate(1.1); }
.sobre-curso-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,21,48,0.3) 0%, transparent 45%);
  pointer-events: none;
}

/* competências: lista tipográfica, sem caixa */
.competencias { margin-top: 2.75rem; }
.competencias h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 1rem;
}
.competencias ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 0 2.5rem;
}
.competencias li {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  padding-block: 0.85rem;
  border-top: 1px solid rgba(20,60,140,0.12);
  font-size: 0.95rem;
  color: var(--texto-muted);
  line-height: 1.6;
}
/* Icone em pastilha, nao check solto (22/09/2026): a pastilha e o que
   faz o icone ler como "tema do item" e nao como "item concluido". */
.competencia-icone {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--azul-nevoa);
}
.competencia-icone svg {
  width: 19px; height: 19px;
  stroke: var(--azul-umanut);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 900px) {
  .sobre-curso-grid { grid-template-columns: 1fr; }
  .sobre-curso-media { position: relative; top: auto; aspect-ratio: 16/10; order: -1; }
}

/* ====================================================
   MATRIZ CURRICULAR - duas colunas tipográficas, 2x2

   Era quatro colunas tipograficas lado a lado, sem container. Reprovado
   pelo Marcelo em 10/09/2026: "esse layout ta bem confuso". Tres coisas
   somavam a confusao, e as tres eram a mesma decisao de fundo:

   1. Sem caixa, as quatro colunas de filetes liam como UMA tabela
      ragged. Nao dava para ver onde um periodo terminava e o outro
      comecava.
   2. Os periodos 1 e 2 tem quatro componentes e os 3 e 4 tem seis. Com
      os totais alinhados no rodape, sobravam ~180px de vazio no meio das
      duas primeiras colunas - a coisa mais alta da secao era um buraco.
   3. Coluna de 320px quebrava nome de componente em tres e quatro
      linhas, e a carga horaria alinhada a direita virava um rio de
      numeros soltos no meio do vazio.

   O 2x2 resolve os tres de uma vez: a largura dobra para ~586px e so
   dois dos vinte componentes ainda quebram em duas linhas (eram quatro
   linhas no pior deles); os pares caem certos - fila de cima com os dois
   periodos de quatro itens, fila de baixo com os dois de seis - entao as
   alturas se equilibram sozinhas e o vazio some; e com so duas colunas o
   vao entre elas pode dobrar, o que ja separa um periodo do outro.

   A primeira tentativa poe cada periodo num cartao branco com sombra,
   como a .ficha-inner. Reprovado pelo Marcelo no mesmo dia: "quero mais
   sutil/minimalista, achei o branco bem forte". Sobre o areia-quente o
   branco solido virava o assunto da secao. Entao nao ha caixa: o que
   agrupa e o filete azul no topo, o vao largo ao lado e o TOTAL fechando
   embaixo - a mesma linguagem tipografica de antes, so que em duas
   colunas em vez de quatro.
==================================================== */
.matriz { background: var(--areia-quente); }
/* O 62ch morava no bloco inteiro e prendia as duas coisas na mesma
   medida. Agora cada uma tem a sua, porque elas querem coisas opostas:

   - o h2 cabe em UMA linha e e assim que ele fica, a pedido do Marcelo
     em 10/09/2026. "A matriz curricular" mede ~480px em 3,4rem contra os
     1200px do container: nao ha nada para segurar, e o max-width que
     morava aqui era o unico motivo de ela vir em duas linhas.
   - o paragrafo NAO quer quebrar. Ele pede 805px em uma linha e o
     container tem 1200: cabia, e quebrava so porque estava presos aos
     624px do bloco. Pedido do Marcelo em 10/09/2026. Os 84ch dao os
     ~845px de folga; abaixo disso ele reflowa sozinho, sem <br>. */
.matriz-header { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.matriz-header h2 em { font-style: italic; color: var(--azul-horizonte); }
.matriz-header p { color: var(--texto-muted); margin-top: 1rem; max-width: 84ch; }
.matriz-grid {
  display: grid;
  /* Fixo em dois, nao auto-fit: com auto-fit e minimo de 230px a secao
     voltava a quatro colunas ja a 1024px, que e onde ela ficava pior. A
     troca para uma coluna esta no @media de 1023px, no fim da secao. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* vao largo: sem caixa, e o vazio que separa uma coluna da outra.
     Com quatro colunas nao havia largura sobrando para isso. */
  gap: clamp(2rem, 4.5vw, 4rem);
}
/* coluna em flex + lista com flex:1: os totais ficam alinhados entre as
   duas colunas da fila mesmo quando um nome de componente quebra */
.semestre {
  border-top: 2px solid var(--azul-umanut);
  padding-top: 1.25rem;
  display: flex;
  flex-direction: column;
}
.semestre h3 {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--azul-umanut);
  margin-bottom: 1.1rem;
}
.semestre ul { display: flex; flex-direction: column; flex: 1; }
.semestre li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.9rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--tinta-profunda);
  padding-block: 0.7rem;
  border-bottom: 1px solid rgba(20,60,140,0.13);
}
/* O ultimo filete da lista sairia colado no filete do total: dois riscos
   paralelos a 15px um do outro. Fica so o do total. */
.semestre li:last-child { border-bottom: none; }
.semestre li .ch {
  /* largura fixa + tabular-nums: "80h", "30h" e "120h" alinham pela
     direita em vez de cada um parar onde o texto deixou */
  flex: 0 0 auto;
  min-width: 3.2em;
  text-align: right;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--texto-muted);
  font-variant-numeric: tabular-nums;
}
.semestre-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.9rem;
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(20,60,140,0.22);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--azul-umanut);
}
/* Uma coluna a partir de 1023px, o mesmo ponto em que a ficha do topo
   cai para duas. Dois cartoes lado a lado em 1023px dariam 410px cada,
   menos padding = 360px de texto: "Gestao Inteligente: Ferramentas
   Gerenciais, IA e Diagnostico Empresarial" volta a quebrar em tres
   linhas, que e exatamente o que esta troca veio consertar. */
@media (max-width: 1023px) {
  .matriz-grid { grid-template-columns: minmax(0, 1fr); }
  /* Em uma coluna a lista pegaria os 842px inteiros do container e a
     carga horaria, alinhada a direita, ficaria a meia tela do nome do
     componente: "Aprendizagem para a vida 1" e o "30h" separados por
     600px de nada. Preso em 62ch (~620px) o par volta a ser legivel de
     uma olhada, e o filete do periodo acompanha a lista em vez de
     atravessar a secao sozinho. */
  .semestre { max-width: 62ch; }
}
/* Faixa-resumo das 1.600 horas. Ocupa a largura toda de proposito: o que
   estava aqui era um paragrafo de 70ch encostado na esquerda embaixo de
   uma grade de 4 colunas, e a metade direita ficava vazia. */
.matriz-resumo {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: grid;
  /* auto | 1fr: o total ocupa so o que o rotulo dele pede, as quatro
     parcelas dividem o resto. */
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--areia-papel);
  border: 1px solid rgba(20,60,140,0.13);
  border-radius: 14px;
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
/* Quatro parcelas em 4 / 2 / 1 colunas - os tres unicos numeros que
   dividem 4 sem sobra. Nao usar auto-fit aqui: ele passa por 3 colunas
   no caminho e deixa a quarta celula orfa sozinha na segunda fila
   (medido a 600px). Divisao exata precisa ser declarada. */
.matriz-resumo-partes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
@media (max-width: 620px) {
  .matriz-resumo-partes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 400px) {
  .matriz-resumo-partes { grid-template-columns: minmax(0, 1fr); }
}
.matriz-resumo-total,
.matriz-resumo-item { display: flex; flex-direction: column; gap: 0.35rem; }
/* O total se distingue por um filete, nao por corpo maior: cinco numeros
   em tamanhos diferentes na mesma faixa viram ruido. */
.matriz-resumo-total {
  border-left: 2px solid var(--azul-umanut);
  padding-left: clamp(0.9rem, 1.6vw, 1.15rem);
}
@media (max-width: 900px) {
  .matriz-resumo { grid-template-columns: 1fr; align-items: stretch; }
}
.matriz-resumo .numero {
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--azul-umanut);
  font-variant-numeric: tabular-nums;
}
.matriz-resumo .rotulo {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.45;
  color: var(--texto-muted);
}
/* Duas colunas para as notas de rodape: uma so voltaria a encostar na
   esquerda. Cada coluna fica com medida de leitura confortavel. */
.matriz-notas {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(1rem, 3vw, 2.5rem);
}
.matriz-notas p {
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--texto-muted);
  max-width: 58ch;
}

/* ====================================================
   ATUAÇÃO - banda escura, quebra o ritmo das seções claras
==================================================== */
.atuacao { background: var(--areia-papel); }
.atuacao-band {
  border-radius: 24px;
  background: linear-gradient(135deg, var(--azul-umanut) 0%, var(--azul-abissal) 55%, var(--tinta-profunda) 100%);
  padding: clamp(2.5rem, 6vw, 4.5rem);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.atuacao-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 85% at 88% 115%, rgba(80,150,190,0.4) 0%, transparent 65%);
  pointer-events: none;
}
.atuacao-mark {
  position: absolute;
  right: -1.5rem; top: -3.5rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 13rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(190,210,240,0.14);
  pointer-events: none;
  user-select: none;
}
.atuacao-band > div { position: relative; z-index: 1; }
.atuacao-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--azul-manha);
  margin-bottom: 1rem;
}
.atuacao-tag::before {
  content: '';
  width: 28px; height: 1px;
  background: currentColor;
  opacity: 0.6;
}
.atuacao-band h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  color: var(--branco);
  line-height: 1.25;
}
.atuacao-band h2 em { font-style: italic; color: var(--azul-manha); }
.atuacao-band > div > p {
  color: rgba(255,255,255,0.82);
  font-size: 0.95rem;
  margin-top: 1rem;
  max-width: 40ch;
}
/* Grade de duas colunas em vez de flex-wrap: com larguras irregulares o
   wrap fechava em 3/2/2/1, sobrando um chip orfao na ultima fileira e um
   vazio grande a direita. Oito itens em 2x4 fecham o bloco. */
.atuacao-lista {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 0.6rem;
  justify-content: start;
}
@media (max-width: 520px) { .atuacao-lista { grid-template-columns: 1fr; } }
.atuacao-lista li {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--branco);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(190,210,240,0.24);
  padding: 0.6rem 1.25rem;
  border-radius: 50px;
  transition: background 250ms, border-color 250ms;
}
.atuacao-lista li:hover { background: rgba(255,255,255,0.15); border-color: rgba(190,210,240,0.5); }
@media (max-width: 860px) {
  .atuacao-band { grid-template-columns: 1fr; }
  .atuacao-mark { font-size: 9rem; right: -2rem; top: -2.5rem; }
  .atuacao-band > div > p { max-width: none; }
}

/* ====================================================
   CORPO DOCENTE
==================================================== */
.docentes-header { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.docentes-header h2 em { font-style: italic; color: var(--azul-horizonte); }
.docentes-header p { color: var(--texto-muted); margin-top: 1rem; }
.docentes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(1.5rem, 3vw, 2rem);
}
/* Quatro docentes (Gestao Comercial). Grade fixa, nao auto-fit: com
   auto-fit sobrava um card orfao na faixa de tablet (tres em cima, um
   embaixo). Quatro lado a lado no desktop, 2x2 no tablet, um por linha
   no celular - mesma conta de .processo-etapas.quatro. */
.docentes-grid.quatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) {
  .docentes-grid.quatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .docentes-grid.quatro { grid-template-columns: minmax(0, 1fr); }
}
/* O cartao do sistema, o mesmo .dc-docente do corpo docente (aprovado
   pelo Marcelo): caixa branca, borda de 1px, 18px de raio,
   overflow:hidden, retrato 1:1 sangrando ate a borda. Ate 22/09/2026 esta
   coluna era so tipografica, com filete no topo e um circulo de 46px com
   as iniciais - saiu a pedido do Marcelo ("melhora os cards dos profs e
   deixa foto deles"). */
.docente {
  display: flex;
  flex-direction: column;
  background: var(--branco);
  border: 1px solid rgba(20,60,140,0.12);
  border-radius: 18px;
  overflow: hidden;
}
/* Mesma moldura nos dois estados, com foto e sem. Sem foto, a
   profundidade radial e o aro interno evitam o retangulo chapado que
   parece moldura vazia (mesma solucao do .dc-retrato). */
.docente-retrato {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  container-type: inline-size;
  display: grid;
  place-items: center;
  background: radial-gradient(118% 88% at 50% 8%, #F2F7FD 0%, var(--azul-nevoa) 52%, #CBDDF1 100%);
  box-shadow: inset 0 0 0 1px rgba(20,60,140,0.10);
  color: var(--azul-umanut);
}
/* A pessoa entra com a cor que o professor mandou; o FUNDO de cada foto
   foi trocado pelo mesmo gradiente desta moldura (padronizar-retratos.py,
   22/09/2026). Os arquivos ja sao 1:1; o object-fit e so rede de
   seguranca. */
.docente-retrato img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 19cqw: marca de espera, nao cartaz - maior que isso disputa com o
   nome logo abaixo. */
.docente-iniciais {
  font-family: var(--font-display);
  font-size: 19cqw;
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1;
}
.docente-corpo { padding: 1.35rem 1.4rem 1.5rem; }
.docente h3 { font-size: 1.15rem; margin-bottom: 0.3rem; }
.docente .docente-cargo {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* azul-umanut, o mesmo do .dc-cargo do corpo docente. Ficou quando o
     card voltou a ter caixa branca (22/09/2026): e o rotulo de disciplina
     do sistema, e passa folgado de 4.5:1 no branco. */
  color: var(--azul-umanut);
  display: block;
  margin-bottom: 0.9rem;
}
/* Sem bio, o rotulo e o ultimo elemento do card e o 0.9rem viraria um vao
   morto no rodape da coluna. Enquanto os minicurriculos nao chegam, os
   cards de Gestao Comercial caem neste caso. */
.docente .docente-cargo:last-child { margin-bottom: 0; }
.docente p {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--texto-muted);
}

/* ====================================================
   PERGUNTAS FREQUENTES
==================================================== */
.faq { background: var(--azul-nevoa); }
.faq-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.faq-header h2 em { font-style: italic; color: var(--azul-horizonte); }
.faq-header p { color: var(--texto-muted); margin-top: 1rem; max-width: 34ch; }
.faq-header .btn { margin-top: 1.75rem; }
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid rgba(20,60,140,0.16); }
.faq-item:first-child { border-top: 1px solid rgba(20,60,140,0.16); }
.faq-item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.4rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--tinta-profunda);
  transition: color 250ms;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--azul-umanut); }
.faq-item summary:focus-visible { outline: 2px solid var(--azul-umanut); outline-offset: 3px; border-radius: 4px; }
.faq-item summary .faq-sinal {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  margin-top: 0.18rem;
  position: relative;
}
.faq-item summary .faq-sinal::before,
.faq-item summary .faq-sinal::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  background: var(--azul-umanut);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform 300ms var(--ease-smooth), opacity 250ms;
}
.faq-item summary .faq-sinal::before { width: 13px; height: 2px; }
.faq-item summary .faq-sinal::after  { width: 2px; height: 13px; }
.faq-item[open] summary .faq-sinal::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.faq-item .faq-resposta {
  padding-bottom: 1.5rem;
  font-size: 0.95rem;
  color: var(--texto-muted);
  max-width: 68ch;
}
@media (prefers-reduced-motion: no-preference) {
  .faq-item[open] .faq-resposta { animation: faqAbre 400ms var(--ease-out-expo) both; }
}
@keyframes faqAbre {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 860px) {
  .faq-grid { grid-template-columns: 1fr; }
  .faq-header p { max-width: none; }
}

/* ====================================================
   PÚBLICO-ALVO
==================================================== */
.publico { background: var(--branco); }
.publico-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.publico-header h2 em { font-style: italic; color: var(--azul-horizonte); }
.publico-header p { color: var(--texto-muted); margin-top: 1rem; max-width: 36ch; }
.publico-lista li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  padding-block: 1.35rem;
  border-top: 1px solid rgba(20,60,140,0.13);
}
.publico-lista li:last-child { border-bottom: 1px solid rgba(20,60,140,0.13); }
.publico-lista .publico-icone {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--azul-nevoa);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.15rem;
}
.publico-lista .publico-icone svg {
  width: 19px; height: 19px;
  stroke: var(--azul-umanut);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.publico-lista h3 { font-size: 1.02rem; margin-bottom: 0.3rem; }
.publico-lista p { font-size: 0.92rem; color: var(--texto-muted); line-height: 1.65; }
@media (max-width: 860px) {
  .publico-grid { grid-template-columns: 1fr; }
  .publico-header p { max-width: none; }
}

/* ====================================================
   TRILHA - do tecnologo ao bacharelado

   Faixa em areia-quente entre o "Uma graduacao presencial" (areia-papel)
   e os diferenciais (azul-nevoa): papel, quente, nevoa. Ela precisa ler
   como um momento proprio da pagina, nao como continuacao do texto de
   cima - se ficasse no mesmo areia-papel, viraria mais um paragrafo.

   Sem cartao e sem fundo branco de proposito: o branco solido foi
   reprovado na matriz em 10/09/2026 ("achei o branco bem forte"). O que
   marca cada passo e o filete azul no topo, igual a matriz.

   O peso da faixa esta no "2 anos" / "+ 2 anos" em corpo de display: sao
   eles que contam a historia de relance, antes de qualquer leitura. O
   "+" do segundo e o que diz que os prazos SOMAM em vez de competir.
==================================================== */
.trilha { background: var(--areia-quente); }
/* Mesma separacao do cabecalho da matriz, e pela mesma razao: o titulo e
   o paragrafo querem medidas opostas.

   - o h2 cabe em UMA linha e e assim que ele fica, a pedido do Marcelo
     em 10/09/2026. Em 3,4rem a frase mede 1100px e o container tem 1200:
     cabia, e as tres linhas de antes vinham so do 62ch que prendia o
     bloco inteiro. Fora o max-width, sobra o problema do meio da faixa
     de larguras: com o 4.5vw original a frase e o container encolhem em
     ritmos diferentes e entre 1000px e 1210px a folga cai para 1%, entao
     a linha quebraria em algum lugar dessa faixa sem aviso. Baixando o
     coeficiente para 3.9vw a folga fica em 15% nesse trecho, e o teto de
     3,4rem continua igual ao dos outros h2 da pagina - onde os dois
     aparecem, aparecem do mesmo tamanho. Abaixo de ~650px ela quebra
     mesmo, que e o certo.
   - o texto NAO quer ficar preso. Em 62ch ele era um paragrafo unico
     quebrado em quatro linhas curtas encostadas na esquerda, com 576px de
     container vazio ao lado. Reprovado pelo Marcelo em 10/09/2026: "esta
     mt quebrado para a esquerda, nao faz sentido ja que temos espaco de
     sobra". Ele mesmo mandou a versao em dois paragrafos, e eles caem
     bem em duas colunas: cada um descreve um dos passos e fica em cima
     dele. O vazio some sem que a medida de leitura estique. */
.trilha-copy { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.trilha-copy h2 { font-size: clamp(1.9rem, 3.9vw, 3.4rem); }
.trilha-copy h2 em { font-style: italic; color: var(--azul-horizonte); }
/* O gap tem que ser identico ao do .trilha-passos: e o alinhamento entre
   as duas grades que faz o paragrafo pertencer ao passo debaixo dele. */
.trilha-intro {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4.5vw, 4rem);
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.trilha-intro p { color: var(--texto-muted); }
/* O segundo paragrafo em bold, a pedido do Marcelo em 10/09/2026: e nele
   que esta o recado da faixa. Peso 600 contra os 400 do corpo, e tinta
   cheia no lugar do muted - so o peso, na cor apagada, daria um bold
   cinza sem presenca. font-style declarado porque o <strong> herdaria o
   italico de qualquer <em> que venha a entrar aqui. */
.trilha-intro strong {
  font-weight: 600;
  font-style: normal;
  color: var(--tinta-profunda);
}
.trilha-passos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4.5vw, 4rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.trilha-passo {
  border-top: 2px solid var(--azul-umanut);
  padding-top: 1.25rem;
}
.trilha-rotulo {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--azul-umanut);
}
.trilha-tempo {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--tinta-profunda);
  margin-top: 0.7rem;
}
.trilha-nome {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--azul-umanut);
  margin-top: 0.3rem;
}
.trilha-nota {
  display: block;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--texto-muted);
  margin-top: 0.9rem;
  max-width: 42ch;
}
/* Uma coluna no tablet: dois passos lado a lado abaixo de 860px deixam o
   "Tecnologo em Gestao Comercial" em tres linhas e o par perde a leitura
   de relance, que e a unica razao de a faixa existir. */
@media (max-width: 860px) {
  .trilha-passos { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  /* empilhados, os dois paragrafos voltam a ser dois paragrafos seguidos:
     o vao de 4rem entre colunas viraria um buraco entre eles */
  .trilha-intro { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}

/* ====================================================
   DIFERENCIAIS
   Fica entre a trilha (areia quente) e a matriz (areia quente), entao usa
   o azul nevoa: sao tres faixas claras diferentes em sequencia.
   Sem moldura de card de proposito - publico, docentes e processo ja usam
   cartao, e mais um deixaria a pagina inteira com a mesma textura. Aqui a
   coluna e aberta e so o filete superior separa.
==================================================== */
.diferenciais { background: var(--azul-nevoa); }
.diferenciais-header { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.diferenciais-header h2 em { font-style: italic; color: var(--azul-horizonte); }
.diferenciais-header p { color: var(--texto-muted); margin-top: 1rem; }
.diferenciais-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.25rem);
}
/* Variante de quatro itens (Gestao Comercial). Em tres colunas o quarto
   ficaria orfao numa segunda fila, com dois vaos vazios ao lado; 2x2 fecha
   o retangulo. Entre 900px e 620px vale a mesma logica, entao a quebra
   para uma coluna continua vindo do @media de 900px la embaixo. */
.diferenciais-grid.quatro { grid-template-columns: repeat(2, 1fr); }
.diferenciais-item {
  border-top: 2px solid var(--azul-umanut);
  padding-top: 1.4rem;
}
/* O icone e parte da linha do TITULO, nao uma coluna do cartao.

   A versao anterior punha o SVG numa coluna propria valendo pelas duas
   linhas, e o Marcelo reprovou: "ta bem feinho". Ele estava certo - com
   um icone de 26px e um paragrafo de duas linhas, a coluna da esquerda
   ficava vazia da segunda linha para baixo e o texto inteiro aparecia
   deslocado 42px para dentro, um degrau que le como erro de alinhamento.
   Aqui o paragrafo volta a comecar na margem do cartao, embaixo do
   icone, e o unico deslocamento que sobra e o do proprio titulo - que e
   intencional e obvio, porque o icone esta ali. */
.diferenciais-item h3 {
  display: flex;
  align-items: start;
  gap: 0.6rem;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  color: var(--tinta-profunda);
  margin-bottom: 0.55rem;
}
/* 22px casa com a altura dos glifos do titulo (21,6px). O margin-top de
   3px alinha o desenho pela ALTURA DE X: casar as caixas geometricas
   deixaria o icone visivelmente alto, porque a caixa de linha do h3 tem
   folga acima dos glifos. O flex:0 0 auto impede que o icone encolha
   quando o titulo quebra em duas linhas no celular. */
.diferenciais-item h3 svg {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 3px;
  stroke: var(--azul-umanut);
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.diferenciais-item p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--texto-muted);
}
@media (max-width: 900px) {
  /* uma coluna so: com gap zero os filetes se encostam e as tres viram
     uma lista pautada, em vez de tres blocos soltos */
  /* .quatro repetido: a variante tem especificidade 0,2,0 e venceria este
     bloco se aqui ficasse so .diferenciais-grid (0,1,0). */
  .diferenciais-grid,
  .diferenciais-grid.quatro { grid-template-columns: 1fr; gap: 0; }
  .diferenciais-item { padding-block: 1.4rem; }
}

/* ----------------------------------------------------
   BENTO (Gestao Comercial, desde 22/09/2026)
   Substitui a .diferenciais-grid.quatro nesta pagina; a grade antiga
   continua aqui porque a regra base e generica. Tres colunas, duas
   filas em zigue-zague: largo+estreito em cima, estreito+largo embaixo.
   Nao ha hover: os blocos nao sao links, e hover em coisa que nao se
   clica promete uma acao que nao existe.
---------------------------------------------------- */
.bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(330px, auto);
  gap: clamp(1rem, 2vw, 1.25rem);
}
.bento-largo { grid-column: span 2; }
.bento-item {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: 18px;
  overflow: hidden;
}
/* O unico bloco sem foto vai na cor da marca: e ele que da o contraste
   que faz a grade ler como bento, e nao como quatro fotos seguidas. */
.bento-cartao {
  background: linear-gradient(160deg, var(--azul-umanut) 0%, var(--azul-horizonte) 100%);
}
.bento-foto { background: var(--tinta-profunda); }
.bento-foto img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Veu so na metade de baixo, onde fica o texto: branco sobre foto sem
   veu nao passa de 4.5:1 em foto clara (a sala de convivencia e quase
   toda branca). */
.bento-foto::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(10,21,48,0.9) 0%, rgba(10,21,48,0.6) 40%, rgba(10,21,48,0) 72%);
}
.bento-texto { padding: clamp(1.4rem, 2.6vw, 2rem); max-width: 46ch; }
.bento-item h3 {
  display: flex;
  align-items: start;
  gap: 0.6rem;
  padding: 0;
  margin: 0 0 0.5rem;
  text-align: left;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  color: var(--branco);
}
.bento-item h3 svg {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 3px;
  stroke: var(--azul-manha);
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bento-item p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(255,255,255,0.84);
}
@media (max-width: 900px) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(290px, auto);
  }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(300px, auto); }
  .bento-largo { grid-column: auto; }
}

/* ====================================================
   COORDENAÇÃO
==================================================== */
/* So texto desde 22/09/2026: o avatar com as iniciais saiu a pedido do
   Marcelo e a coordenadora nao tera foto. Uma coluna so, sem media query. */
.coordenacao-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--branco);
  border: 1px solid rgba(20,60,140,0.1);
  border-radius: 20px;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  box-shadow: 0 14px 40px rgba(10,21,48,0.07);
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.coordenacao-band .coordenacao-tag {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /* mesmo rotulo micro, mesma cor - ver .ficha-item dt */
  color: var(--azul-umanut);
  display: block;
  margin-bottom: 0.5rem;
}
.coordenacao-band h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); margin-bottom: 0.6rem; }
.coordenacao-band p { font-size: 0.94rem; color: var(--texto-muted); max-width: 62ch; }

/* ====================================================
   DEPOIMENTOS
==================================================== */
.depoimentos { background: var(--areia-quente); }
.depoimentos-header { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.depoimentos-header h2 em { font-style: italic; color: var(--azul-horizonte); }
.depoimentos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(1.5rem, 3vw, 2rem);
}
.depoimento {
  background: var(--areia-papel);
  border: 1px solid rgba(20,60,140,0.1);
  border-radius: 18px;
  padding: clamp(1.75rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.depoimento-aspas {
  font-family: var(--font-display);
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 0.6;
  color: var(--azul-manha);
  height: 1.4rem;
}
.depoimento blockquote {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--tinta-profunda);
  flex: 1;
}
.depoimento figcaption {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  border-top: 1px solid rgba(20,60,140,0.13);
  padding-top: 1.25rem;
}
.depoimento figcaption .depoimento-avatar {
  width: 42px; height: 42px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--branco);
  background: linear-gradient(135deg, var(--azul-umanut), var(--azul-horizonte));
}
.depoimento figcaption b {
  display: block;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
}
.depoimento figcaption span {
  font-size: 0.8rem;
  color: var(--texto-muted);
}

/* ====================================================
   INVESTIMENTO + PROCESSO SELETIVO
==================================================== */
.investimento { background: var(--areia-papel); }
.investimento-grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  /* center e nao start: a coluna da esquerda e curta e o card e alto -
     alinhados pelo topo sobrava um vazio de ~300px sob o texto */
  align-items: center;
}
.investimento-header h2 em { font-style: italic; color: var(--azul-horizonte); }
.investimento-header p { color: var(--texto-muted); margin-top: 1rem; max-width: 36ch; }

.valores {
  background: var(--branco);
  border: 1px solid rgba(20,60,140,0.1);
  border-radius: 20px;
  box-shadow: 0 14px 40px rgba(10,21,48,0.07);
  overflow: hidden;
}
.valores-texto { padding: clamp(1.75rem, 3.5vw, 2.5rem); }
.valores-texto p { color: var(--texto-muted); }
.valores-texto p + p { margin-top: 1rem; }
.valores-texto .btn { margin-top: 1.75rem; }
.valores-nota {
  padding: 1.15rem clamp(1.5rem, 3vw, 2.25rem);
  background: rgba(20,60,140,0.04);
  font-size: 0.82rem;
  color: var(--texto-muted);
  line-height: 1.6;
}

/* etapas do processo seletivo: a numeração É a informação */
.processo { background: var(--branco); }
.processo-header { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.processo-header h2 em { font-style: italic; color: var(--azul-horizonte); }
.processo-header p { color: var(--texto-muted); margin-top: 1rem; }
.processo-etapas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: clamp(1.5rem, 3vw, 2.25rem);
  counter-reset: etapa;
}
/* Quatro etapas (Gestao Comercial, desde 22/09/2026, quando "Documentos"
   saiu). O auto-fit sozinho deixava a quarta etapa orfa entre ~800px e
   ~1000px (tres em cima, uma embaixo). Com quatro, a conta fecha melhor
   em grade fixa: 4 lado a lado, 2x2 no tablet, uma por linha no celular.
   .quatro repetido nos @media nao e preciso: mesma especificidade, e a
   regra de baixo vence. */
.processo-etapas.quatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) {
  .processo-etapas.quatro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .processo-etapas.quatro { grid-template-columns: minmax(0, 1fr); }
}
/* Mesma coluna com filete no topo que .semestre usa na matriz: a pagina
   passa a ter uma linguagem unica para "colunas ordenadas", em vez de um
   circulo flutuante com conector aqui e um filete ali. O conector tambem
   sai - ele so existia para amarrar circulos soltos, e precisava de media
   query para nao ficar pendurado quando a grade quebrava. */
.etapa { border-top: 2px solid var(--azul-umanut); padding-top: 1.25rem; }
.etapa::before {
  counter-increment: etapa;
  content: "Etapa " counter(etapa);
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--azul-umanut);
  margin-bottom: 0.85rem;
}
.etapa h3 { font-size: 1.05rem; margin-bottom: 0.55rem; }
.etapa p { font-size: 0.92rem; color: var(--texto-muted); line-height: 1.65; }
@media (max-width: 900px) {
  .investimento-grid { grid-template-columns: 1fr; }
  .investimento-header p { max-width: none; }
}

/* ====================================================
   FORMULÁRIO DE INTERESSE
==================================================== */
.interesse {
  background: linear-gradient(135deg, var(--azul-umanut) 0%, var(--azul-abissal) 55%, var(--tinta-profunda) 100%);
  position: relative;
  overflow: hidden;
}
.interesse::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 80% at 85% 110%, rgba(80,150,190,0.38) 0%, transparent 65%);
  pointer-events: none;
}
.interesse .container { position: relative; z-index: 1; }
.interesse-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}
.interesse-copy h2 { color: var(--branco); }
.interesse-copy h2 em { font-style: italic; color: var(--azul-manha); }
.interesse-copy p {
  color: rgba(255,255,255,0.8);
  margin-top: 1rem;
  max-width: 38ch;
  font-size: 0.95rem;
}
.interesse-copy .kicker { color: var(--azul-manha); }
.interesse-contatos {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.interesse-contatos a {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.82);
  transition: color 200ms;
  width: fit-content;
}
.interesse-contatos a:hover { color: var(--branco); }
.interesse-contatos svg {
  width: 16px; height: 16px;
  stroke: var(--azul-manha);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.form-interesse {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(190,210,240,0.22);
  border-radius: 20px;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  /* sem backdrop-filter: o painel assenta sobre um gradiente liso, entao o
     blur nao produzia efeito visivel - so custava composicao por frame */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}
.campo { display: flex; flex-direction: column; gap: 0.5rem; }
.campo.largo { grid-column: 1 / -1; }
.campo label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--azul-manha);
}
/* O <textarea> entra em TODAS as regras do input, uma por uma. Deixar
   qualquer uma de fora nao o torna neutro: entra o estilo do Bootstrap
   da plataforma (M2 do AGENTS.md) e o campo nasce branco com borda
   cinza no meio do formulario escuro. */
.campo input,
.campo select,
.campo textarea {
  font-family: inherit;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--branco);
  background: rgba(10,21,48,0.35);
  border: 1px solid rgba(190,210,240,0.28);
  border-radius: 10px;
  padding: 0.8rem 1rem;
  transition: border-color 220ms, background 220ms;
  width: 100%;
}
/* So na vertical: arrastar na horizontal estoura a coluna da grade. */
.campo textarea { resize: vertical; min-height: 5.5rem; display: block; }
/* 0.62 e nao menos: abaixo disso o placeholder cai de 4.5:1 sobre o campo */
.campo input::placeholder,
.campo textarea::placeholder { color: rgba(255,255,255,0.62); }
.campo select option { color: var(--tinta-profunda); background: var(--branco); }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: rgba(190,210,240,0.5); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--azul-manha);
  background: rgba(10,21,48,0.55);
}
.campo input:focus-visible, .campo select:focus-visible, .campo textarea:focus-visible {
  outline: 2px solid var(--azul-manha);
  outline-offset: 2px;
}
/* O label e caixa alta com tracking; o "(opcional)" volta ao caixa baixa
   para nao competir com o nome do campo. */
.campo label .campo-opcional {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: rgba(255,255,255,0.62);
}
.form-interesse .form-nota {
  grid-column: 1 / -1;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.74);
  line-height: 1.6;
}
.form-interesse .btn { grid-column: 1 / -1; justify-content: center; }
@media (max-width: 860px) {
  .interesse-grid { grid-template-columns: 1fr; }
  .interesse-copy p { max-width: none; }
}
@media (max-width: 520px) {
  .form-interesse { grid-template-columns: 1fr; }
}

/* ==== CTA FINAL ==== */
.cta-final {
  background: var(--tinta-profunda);
  text-align: center;
  /* acompanha o --section-py reduzido: com 12vw o vao antes do
     fechamento era de 282px contra os 166px do resto da pagina */
  padding-block: clamp(4.5rem, 8vw, 7rem);
  position: relative;
  overflow: hidden;
}
.cta-aurora {
  position: absolute;
  inset: 0;
  filter: blur(80px);
  pointer-events: none;
}
.cta-aurora i {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
}
.cta-aurora i:nth-child(1) {
  width: 56vmax; height: 40vmax;
  left: -10vmax; bottom: -22vmax;
  background: radial-gradient(ellipse at center, #143C8C 0%, transparent 60%);
}
.cta-aurora i:nth-child(2) {
  width: 48vmax; height: 36vmax;
  right: -12vmax; bottom: -18vmax;
  background: radial-gradient(ellipse at center, #2878AA 0%, transparent 60%);
  opacity: 0.8;
}
@media (prefers-reduced-motion: no-preference) {
  .cta-aurora i:nth-child(1) { animation: auroraDrift1 18s ease-in-out infinite alternate; }
  .cta-aurora i:nth-child(2) { animation: auroraDrift2 22s ease-in-out infinite alternate; }
}
.cta-final .container { position: relative; z-index: 1; }
.cta-final .kicker { color: var(--azul-manha); justify-content: center; }
.cta-final .kicker::after { content: ''; display: block; width: 28px; height: 1px; background: currentColor; opacity: 0.6; }
.cta-final h2 {
  color: var(--branco);
  font-size: clamp(2.2rem, 5.5vw, 4.2rem);
  max-width: 26ch;
  margin-inline: auto;
  margin-bottom: 1.25rem;
  line-height: 1.15;
  text-align: center !important;
}
.cta-final h2 em {
  font-style: italic;
  color: #BED2F0;
}
.cta-final p {
  color: rgba(255,255,255,0.72);
  max-width: 46ch;
  margin-inline: auto;
  margin-bottom: 2.75rem;
}
.cta-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}