/* ===========================================================
   VULPO CLASS — landing page

   Um único :root com os três eixos: cor, tipografia e espaço.
   Nenhum valor literal fora deste bloco — a paleta é provisória.

   Só existe o tema escuro. O claro, o botão de tema e o bloco escuro
   repetido em dois seletores foram removidos a pedido do Elizeu: cada
   cor mora num lugar só, aqui.
   =========================================================== */

:root {
  /* ---------- Eixo 1: cor ---------- */

  /* marca */
  --cor-ciano: #22D3EE;
  --cor-azul: #1E5BFF;

  /* superfícies */
  --cor-fundo: #0A0A0A;
  --cor-fundo-2: #0E1626;
  --cor-fundo-3: #16223A;
  --cor-brilho: rgb(34 211 238 / 8%);

  /* texto */
  /* Tom de branco único dos textos e títulos (pedido do Elizeu): o
     #F2F2EF que era o fundo do Ambiente. Vale também para --curso-texto,
     --cartao-texto e --curso-foto-texto; os níveis mais apagados saem
     deles por color-mix e mantêm a opacidade. Era #FFFFFF aqui e
     #CBD5E9 nos outros três. */
  --cor-texto: #F2F2EF;
  /* Os dois cinzas de apoio também saem do tom único, no nível de 60%
     dos rótulos. Eram #9AA4B2 e #7D8896, azulados. O -3 carrega
     informação (parcelamento, legenda): a 60% dá ~6,6:1 sobre o fundo. */
  --cor-texto-2: color-mix(in srgb, var(--cor-texto) 60%, transparent);
  --cor-texto-3: color-mix(in srgb, var(--cor-texto) 60%, transparent);

  /* linhas */
  --cor-borda: #1E2A40;
  --cor-borda-forte: #2E3D57;

  /* papéis */
  --cor-destaque: var(--cor-ciano);
  --cor-link: var(--cor-ciano);
  --cor-link-hover: #A5EEFA;
  --cor-foco: var(--cor-ciano);

  /* botões */
  --cor-botao: var(--cor-ciano);
  --cor-botao-texto: #05070D;
  --cor-botao-hover: #67E3F7;

  /* Tom das bandas "alt" (cursos e FAQ). Hoje igual ao fundo: o Elizeu
     pediu #0A0A0A em todas as seções. */
  --cor-fundo-alt: #0A0A0A;
  --cor-fundo-2-alt: #131C2E;

  --sombra: 0 1px 2px rgb(0 0 0 / 40%), 0 16px 40px rgb(0 0 0 / 36%);

  /* Cards de ementa com imagem de fundo. */
  --cartao-texto: #F2F2EF;
  --cartao-borda: rgb(34 211 238 / 20%);
  --cartao-fundo: #05070D;
  --cartao-altura: 675px;          /* card aberto */
  --cartao-altura-fechada: 320px;  /* card fechado */
  /* Distância do topo da tela onde as peças grudam (pilha dos módulos,
     palco do Ambiente, coluna do FAQ). Era 5.5rem, para passar abaixo do
     cabeçalho fixo; o cabeçalho deixou de ser fixo e sobra só o respiro. */
  --cartao-empilha-topo: 1.5rem;
  --cartao-empilha-passo: 20px;    /* degrau: quanto cada card gruda abaixo do anterior */
  /* Vão entre um card e o seguinte na rolagem, só onde empilham. Grande
     de propósito (referência do Elizeu): o card de cima fica parado no
     alto por um trecho de rolagem antes de o próximo chegar e cobri-lo. */
  --cartao-empilha-vao: clamp(7rem, 22vh, 14rem);

  /* Padrão de texto das seções (nasceu nos cursos). Os níveis de 80% e
     60% saem de --curso-texto por color-mix. */
  --curso-texto: #F2F2EF;
  --curso-borda: rgb(255 255 255 / 10%);
  --curso-fundo-aberto: rgb(217 217 217 / 4%);
  /* Seção do Ambiente: fundo preto (pedido do Elizeu) e, por ter fundo
     próprio, o espaço entre seções vale inteiro dentro da faixa. */
  /* Versão clara (pedido do Elizeu), como as referências SWAPP e Cyber
     Monday: fundo claro, tinta escura. O ciano da página não lê sobre
     claro (1,6:1), então o destaque da seção é um ciano escuro. */
  /* #F2F2EF, o mesmo tom dos textos da página. Testado #CBD5E9 e
     recusado pelo Elizeu. */
  --ambiente-fundo: #F2F2EF;
  --ambiente-tinta: #0A0A0A;
  --ambiente-destaque: #0E7490;  /* 4,8:1 sobre o fundo */
  --ambiente-borda: rgb(10 10 10 / 12%);
  /* Superfície de cartão nas bandas claras (FAQ): o branco a 4% das
     escuras some sobre o claro, então é tinta a 4%. */
  --clara-superficie: rgb(10 10 10 / 4%);
  --ambiente-respiro: var(--espaco-banda);
  /* Comprimento da rolagem do roteiro e respiro da cena em volta do
     título gigante, onde a poeira flutua. */
  --ambiente-trilho: 260vh;
  --ambiente-cena-respiro: clamp(2.5rem, 6vw, 5rem);
  /* Mural de prints dos depoimentos: altura recolhido e véu do visor. */
  --prints-recolhido: clamp(34rem, 85vh, 52rem);
  --visor-veu: rgb(0 0 0 / 82%);
  /* Quanto "CLASS" afunda na faixa da base da seção da escola. */
  --escola-mergulho: 4.5vw;
  --curso-foto-texto: #F2F2EF;       /* texto sobre foto */
  --curso-foto-borda: rgb(255 255 255 / 10%); /* fios sobre a foto */
  /* Véu dos banners do topo no celular, onde o texto cobre a foto. */
  --slide-veu: linear-gradient(to top, rgb(5 7 13 / 94%) 45%, rgb(5 7 13 / 55%));
  --curso-ficha-fundo: rgb(34 211 238 / 10%);
  --curso-botao-fundo: linear-gradient(to right, rgb(255 255 255 / 5%), rgb(10 10 10 / 5%));
  --curso-botao-hover-texto: #0A0A0A;
  /* As três fases da abertura. O main.js lê estes valores, então
     mudar aqui muda o ritmo inteiro. */
  --curso-sumir: 1500ms;
  --curso-transformar: 800ms;
  --curso-revelar: 600ms;
  /* Preloader (~3s no total): cada aresta do "V" leva --preloader-traco
     para se desenhar, e a seguinte começa --preloader-passo depois. São
     23 arestas: 150 + 22 × 70 + 550 ≈ 2,24s de desenho. Depois o V
     acende e a tela some a partir de --preloader-saida. */
  --preloader-traco: 550ms;
  --preloader-passo: 70ms;
  --preloader-saida: 2550ms;
  /* Quanto tempo cada banner do topo fica na tela antes de passar. */
  --banner-tempo: 8s;
  /* Player próprio dos vídeos. A interface do YouTube fica desligada
     (controls=0) e estes são os tons da nossa, desenhada por cima. Não
     mudam com a seção: o quadro do vídeo é escuro em qualquer banda. */
  --player-fundo: #05070D;
  --player-veu: linear-gradient(to top, rgb(5 7 13 / 92%), rgb(5 7 13 / 0%));
  --player-trilho: rgb(242 242 239 / 22%);
  --player-carregado: rgb(242 242 239 / 34%);

  /* Cartões de vidro da seção da escola, por cima da marca. */
  /* Único consumidor: .escola__vidro. Chegou a ficar escuro e opaco,
     quando o nome gigante passava por trás dos cartões e o
     backdrop-filter o desfocava num borrão. Desde que nada mais passa
     por trás deles, voltou ao branco a 6%: sobre o fundo da página é o
     que dá corpo ao cartão — escuro, ele sumiria, porque 74% de #0A0A0A
     sobre #0A0A0A é #0A0A0A. */
  --vidro-fundo: rgb(255 255 255 / 6%);
  --vidro-borda: rgb(255 255 255 / 14%);
  --vidro-desfoque: 18px;

  /* ---------- Eixo 2: tipografia ---------- */
  --fonte-titulo: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --fonte-corpo: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --fonte-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;

  --texto-xs: 0.6875rem;
  --texto-sm: 0.8125rem;
  --texto-base: 0.9375rem;
  --texto-md: clamp(1rem, 0.3vw + 0.94rem, 1.125rem);
  --texto-lg: clamp(1.125rem, 0.7vw + 0.95rem, 1.375rem);
  --texto-xl: clamp(1.375rem, 1.6vw + 1rem, 2rem);
  --texto-2xl: clamp(1.75rem, 3.4vw + 1rem, 3rem);
  --texto-3xl: clamp(2.25rem, 6vw + 0.6rem, 4.5rem);
  /* O mínimo é baixo de propósito: o título do topo vem do JSON e o
     cliente vai editá-lo. Num celular de 320px com um título mais
     longo, um mínimo alto força quebra em lugar ruim. */
  --texto-4xl: clamp(2.25rem, 10.5vw, 9rem);

  /* Nome gigante da escola. Em cqi: o palco é o contêiner, então o
     nome acompanha a largura do conteúdo, não a da tela.
     Eram 30cqi e 25cqi, do tempo em que o nome atravessava o retrato.
     O cliente pediu (2026-09-21) que nada ficasse sobreposto à marca, e
     com o nome no tamanho antigo a seção ficava alta demais. */
  --texto-nome-escola: 24cqi;
  --texto-nome-escola-largo: 20cqi;
  /* Título gigante do Ambiente: "AMBIENTE" enche a largura da cena. O
     teto em vh garante que o palco grudado caiba na tela. */
  --texto-ambiente-gigante: min(22cqi, 34vh);

  --peso-normal: 400;
  --peso-medio: 500;
  --peso-forte: 600;
  --peso-titulo: 700;
  --peso-maximo: 800;

  /* Archivo é variável no eixo de largura: é isso que dá o título
     condensado sem trocar de família. */
  --largura-display: 76%;
  --largura-titulo: 84%;

  --altura-display: 0.92;
  --altura-titulo: 1.06;
  --altura-media: 1.35;
  --altura-texto: 1.62;

  --letras-display: -0.035em;
  --letras-titulo: -0.02em;
  --letras-rotulo: 0.16em;

  /* ---------- Eixo 3: espaço ---------- */
  --espaco-3xs: 0.25rem;
  --espaco-2xs: 0.5rem;
  --espaco-xs: 0.75rem;
  --espaco-sm: 1rem;
  --espaco-md: 1.5rem;
  --espaco-lg: 2rem;
  --espaco-xl: 3rem;
  --espaco-2xl: 4.5rem;
  --espaco-banda: clamp(4.5rem, 10vw, 9rem);

  --largura-container: 110rem; /* 1760px */
  /* Banners do topo: mais largos que o container (1880px) e a 20px das
     bordas da tela — em cima e dos lados. As abas e o texto de dentro
     do banner continuam na margem do container. */
  --largura-banner: 117.5rem; /* 1880px */
  --banner-margem: 20px;
  --largura-texto: 60ch;
  /* Vídeo sozinho: na abertura do curso ele divide a linha com a ficha,
     e é esta medida que decide onde a ficha começa. */
  --largura-video: 44rem; /* 704px */
  --respiro: clamp(1.25rem, 5vw, 3.5rem);

  --raio-sm: 4px;
  --raio-md: 8px;
  --raio-lg: 20px;
  --curso-respiro: 2.25rem; /* margem interna dos cards de curso */
  --raio-pill: 999px;

  --borda: 1px;
  --transicao: 200ms cubic-bezier(0.22, 1, 0.36, 1);
  --transicao-lenta: 520ms cubic-bezier(0.22, 1, 0.36, 1);
  /* Abertura dos cards: mais longa e com desaceleração mais macia. */
  --transicao-cartao: 680ms cubic-bezier(0.33, 1, 0.68, 1);

  /* Permite animar altura até `auto`. É o caso dos cards no celular,
     onde o aberto não tem altura fixa. Onde não houver suporte, a
     abertura simplesmente acontece de uma vez. */
  interpolate-size: allow-keywords;


  color-scheme: dark;
}


/* ===========================================================
   Base
   =========================================================== */

body {
  background-color: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--fonte-corpo);
  font-size: var(--texto-md);
  line-height: var(--altura-texto);
  /* clip, não hidden: hidden faz do body um contêiner de rolagem e
     quebra o position: sticky dos cards empilhados. A primeira linha
     é reserva para navegador antigo sem suporte a clip. */
  overflow-x: hidden;
  overflow-x: clip;
  touch-action: manipulation;
}

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  font-stretch: var(--largura-titulo);
  line-height: var(--altura-titulo);
  letter-spacing: var(--letras-titulo);
  color: var(--cor-texto);
}

a { color: var(--cor-link); transition: color var(--transicao); }
a:hover { color: var(--cor-link-hover); }

:focus-visible {
  outline: 2px solid var(--cor-foco);
  outline-offset: 3px;
  border-radius: var(--raio-sm);
  scroll-margin-top: var(--cartao-empilha-topo);
}

/* Rolagem suave (Lenis, ligada no main.js). Regras que a biblioteca
   pede. O scroll-behavior: smooth do reset.css tem de sair quando ela
   está ativa: com os dois, cada quadro que a Lenis rola viraria uma
   animação do navegador por cima da dela. */
html.lenis,
html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
/* Só enquanto ela está rolando: um iframe (vídeo do YouTube) sob o
   ponteiro engoliria a roda do mouse. Parado, o vídeo recebe o clique. */
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Qualquer display declarado pelo autor vence o display:none que o
   navegador dá ao atributo hidden. Sem este !important os banners
   inativos continuam na tela, empilhados. */
[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pular-para-conteudo {
  position: absolute;
  left: var(--espaco-sm);
  top: -6rem;
  z-index: 300;
  padding: var(--espaco-2xs) var(--espaco-sm);
  background: var(--cor-botao);
  color: var(--cor-botao-texto);
  border-radius: var(--raio-sm);
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-forte);
  font-stretch: 100%;
  transition: top var(--transicao);
}
.pular-para-conteudo:focus { top: var(--espaco-sm); }


/* ===========================================================
   Preloader

   O "V" da Vulpo em arame se desenha aresta por aresta (contorno, bordas
   de cima e depois as facetas), acende num brilho ciano e a tela some.
   Cada <line> tem pathLength="1": o traço vai de dashoffset 1 a 0,
   qualquer que seja o comprimento.

   Tudo em CSS de propósito: a saída (opacity + visibility no fim) não
   depende do main.js, então a página nunca fica presa atrás dele. O
   script só remove o elemento depois. Com movimento reduzido ele nem
   aparece.
   =========================================================== */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: var(--cor-fundo);
  pointer-events: none;
  animation: preloader-sair 450ms ease var(--preloader-saida) forwards;
}

.preloader__v {
  width: min(52vw, 18rem);
  height: auto;
  overflow: visible;
  animation:
    preloader-acender 500ms ease-out calc(var(--preloader-saida) - 400ms) forwards,
    preloader-afastar 450ms cubic-bezier(0.55, 0, 0.75, 0) var(--preloader-saida) forwards;
}

.preloader__linha {
  stroke: var(--cor-ciano);
  /* Em unidades do viewBox (660 de largura): ~2px na tela. */
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: preloader-traco var(--preloader-traco) cubic-bezier(0.65, 0, 0.35, 1)
    calc(150ms + var(--i) * var(--preloader-passo)) forwards;
}

@keyframes preloader-traco { to { stroke-dashoffset: 0; } }

@keyframes preloader-acender {
  50%  { filter: drop-shadow(0 0 10px var(--cor-ciano)) brightness(1.4); }
  100% { filter: drop-shadow(0 0 4px var(--cor-ciano)); }
}

@keyframes preloader-afastar {
  to { transform: scale(1.12); opacity: 0; }
}

@keyframes preloader-sair {
  to { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .preloader { display: none; }
}


/* ===========================================================
   Bandas — o ritmo da página

   Cada seção é uma banda de largura total. A banda `--alt` muda só o
   tom do fundo, dentro do mesmo tema, para separar o catálogo do resto
   sem inverter as cores.
   =========================================================== */

/* Espaço entre seções: --espaco-banda (144px na tela cheia), medido do
   fim do conteúdo de uma ao começo da seguinte. Cada banda leva METADE
   em cima e metade embaixo: duas vizinhas somam o espaço inteiro, e a
   banda de fundo alternado fica com respiro igual nos dois lados.
   Pedido do Elizeu: o mesmo espaço entre todas as seções. */
.banda {
  position: relative;
  padding-block: calc(var(--espaco-banda) / 2);
  background: var(--cor-fundo);
  color: var(--cor-texto);
}

.banda--escura { background: var(--cor-fundo); }

/* Banda de tom alternativo: fica um degrau diferente do fundo base,
   dentro do mesmo tema. Hoje o tom é igual ao fundo (#0A0A0A em todas
   as seções, pedido do Elizeu); a classe fica para quando quiserem variar. */
.banda--alt {
  --cor-fundo: var(--cor-fundo-alt);
  --cor-fundo-2: var(--cor-fundo-2-alt);
  --cor-brilho: transparent;
  background: var(--cor-fundo);
  color: var(--cor-texto);
}

/* Banda clara (Ambiente e FAQ, pedido do Elizeu): fundo #F2F2EF e tinta
   escura. A seção troca os tokens de texto, borda, superfície e
   destaque, e todo o resto (os níveis de 80%, 60% e 55% por color-mix)
   acompanha. O canvas do Ambiente lê esses mesmos tokens na seção, e as
   partículas saem em tinta escura. Contraste: 60% da tinta sobre o
   fundo dá 5,1:1; o destaque, 4,8:1.

   Por ter fundo próprio, o espaço entre seções vale inteiro dentro da
   faixa (padding) e inteiro fora (as vizinhas dobram o lado que encosta
   nela; ver cada seção). */
.banda--clara {
  --curso-texto: var(--ambiente-tinta);
  --curso-borda: var(--ambiente-borda);
  --curso-fundo-aberto: var(--clara-superficie);
  --cor-destaque: var(--ambiente-destaque);
  --cor-foco: var(--ambiente-destaque);
  color: var(--ambiente-tinta);
}

.banda.banda--clara {
  padding-block: var(--ambiente-respiro);
  background: var(--ambiente-fundo);
}

/* Botão primário em tinta escura: o ciano some sobre o claro. */
.banda--clara .botao--primario {
  background: var(--ambiente-tinta);
  color: var(--ambiente-fundo);
}

.banda--clara .botao--primario:hover {
  background: var(--ambiente-destaque);
  color: var(--ambiente-fundo);
}

.banda__interno {
  width: 100%;
  max-width: var(--largura-container);
  margin-inline: auto;
  padding-inline: var(--respiro);
}

/* ---------- Cabeçalho de seção: o padrão da página ----------
   Nasceu na seção de cursos e vale para todas: rótulo em Archivo
   itálico com o traço (iconsubtopico), título em Archivo Bold sem caixa
   alta e sem condensar, texto de apoio em Archivo 18px. As cores saem de
   --curso-texto; 80% e 60% por color-mix. */
.sobrancelha {
  display: flex;
  align-items: center;
  gap: var(--espaco-xs);
  margin-bottom: var(--espaco-2xs);
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-size: 1rem;
  font-stretch: 100%;
  color: color-mix(in srgb, var(--curso-texto) 60%, transparent);
  text-transform: uppercase;
}

.sobrancelha__traco {
  flex: none;
  width: 9px;
  height: 1px;
  background: url('../svg/iconsubtopico.svg?v=202610011458') center / contain no-repeat;
}

.secao__cabecalho { margin-bottom: var(--espaco-xl); }

.secao__titulo {
  font-family: var(--fonte-titulo);
  font-size: clamp(3rem, 5.6vw, 6.6875rem); /* 107px na largura cheia */
  font-weight: var(--peso-titulo);
  font-stretch: 100%;
  line-height: 1;
  letter-spacing: var(--letras-titulo);
  text-transform: none;
  text-wrap: balance;
  color: var(--curso-texto);
}

.secao__texto {
  margin-top: var(--espaco-md);
  max-width: var(--largura-texto);
  font-family: var(--fonte-titulo);
  font-size: 1.125rem;
  font-stretch: 100%;
  color: color-mix(in srgb, var(--curso-texto) 80%, transparent);
}


/* ===========================================================
   Botões
   =========================================================== */

/* Padrão único de botão da página (revisão de consistência): Archivo
   16px, peso normal, caixa alta, 44px de altura, pílula. As seções não
   redefinem fonte, altura nem canto; só posição e largura.
     primário    ciano, texto escuro
     secundário  (--fio) fundo em degradê, fio fino, texto a 60%; no
                 hover fica ciano. O "Ver conteúdo" dos cursos segue ele.
   Exceção de cor, não de forma: o Ambiente é claro e o botão de lá é
   tinta escura. */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: var(--espaco-xs) var(--espaco-lg);
  border: var(--borda) solid transparent;
  border-radius: var(--raio-pill);
  font-family: var(--fonte-titulo);
  font-size: 1rem;
  font-weight: var(--peso-normal);
  font-stretch: 100%;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  transition: background-color var(--transicao-lenta), color var(--transicao-lenta),
              border-color var(--transicao-lenta);
}

.botao > span { display: block; }

.botao--primario {
  background: var(--cor-ciano);
  color: var(--curso-botao-hover-texto);
}
.botao--primario:hover { background: var(--cor-botao-hover); color: var(--curso-botao-hover-texto); }

.botao--secundario,
.botao--fio {
  border-color: var(--curso-borda);
  background: var(--curso-botao-fundo);
  color: color-mix(in srgb, var(--curso-texto) 60%, transparent);
}
.botao--secundario:hover,
.botao--fio:hover {
  border-color: transparent;
  background: var(--cor-ciano);
  color: var(--curso-botao-hover-texto);
}

.botao-icone {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: var(--borda) solid var(--cor-borda);
  border-radius: var(--raio-pill);
  background: transparent;
  color: var(--cor-texto-2);
  font-size: var(--texto-base);
  transition: border-color var(--transicao), color var(--transicao);
}
.botao-icone:hover { border-color: var(--cor-destaque); color: var(--cor-texto); }


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

   Só os banners e as abas. A faixa de rótulos e a frase "O SAP por
   dentro" saíram a pedido do Elizeu; o h1 ficou, invisível (sr-only).
   =========================================================== */

.hero {
  /* Em cima, 20px do alto da tela (pedido do Elizeu; colado ele não
     gostou). Embaixo, a metade do espaço entre seções, como toda banda. */
  padding-block: var(--banner-margem) calc(var(--espaco-banda) / 2);
  overflow: hidden;
}

/* Banner até 1880px, a 20px das laterais da tela. */
.hero__palco {
  width: 100%;
  max-width: calc(var(--largura-banner) + 2 * var(--banner-margem));
  margin-inline: auto;
  padding-inline: var(--banner-margem);
}

/* As abas continuam na largura do container, como as outras seções. */
.hero__abas {
  width: 100%;
  max-width: var(--largura-container);
  margin-inline: auto;
  padding-inline: var(--respiro);
}


/* ---------- Palco e slides ----------
   Cada banner é uma foto de fundo (img/banner-*.webp, já escurecida à
   esquerda) com o texto por cima. A tipografia e as cores são as da
   seção de cursos. Como a foto é escura, o texto é sempre claro
   (--curso-foto-texto).

   Mesma altura nos quatro: os slides ocupam a mesma célula da grade, e
   os inativos continuam no layout, só invisíveis. A altura do palco é a
   do banner mais alto, e nenhum deles muda de tamanho na troca. */

.hero__palco {
  position: relative;
  display: grid;
}

.slide {
  position: relative;
  isolation: isolate;
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(34rem, 36vw, 40rem);
  padding-block: clamp(1.5rem, 4vw, 3.5rem);
  /* O texto fica na margem do conteúdo da página (a das abas), não na
     borda do banner: a sobra entre o banner e a largura útil do
     container, dividida pelos dois lados. Abaixo de 1760px de tela, a
     sobra é o respiro menos os 20px do banner. 1.5rem é o piso do
     celular, onde o respiro e a margem do banner se igualam. Menos o
     fio de 1px da borda, que também empurra o texto. */
  padding-inline: calc(max(
    1.5rem,
    calc(var(--respiro) - var(--banner-margem)),
    calc((100% - var(--largura-container)) / 2 + var(--respiro))
  ) - var(--borda));
  border: var(--borda) solid var(--curso-borda);
  border-radius: var(--raio-lg);
  overflow: hidden;
  background: var(--cartao-fundo); /* enquanto a foto carrega */
  color: var(--curso-foto-texto);
}

/* O inativo sai da tela e da leitura (visibility tira do leitor de tela
   e do Tab), mas guarda o espaço. Precisa vencer o [hidden] global. */
.hero__palco > .slide[hidden] {
  display: flex !important;
  visibility: hidden;
}

.slide:focus-visible { outline-offset: -3px; }

.slide__foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* A pessoa está à direita em todas as fotos: o recorte preserva ela. */
  object-position: 75% center;
}

/* 48rem cabe a faixa de fatos mais longa numa linha só (a da Formação
   pede 711px). Os 60% (do espaço interno do banner) mantêm isso até
   ~1366px de tela; abaixo, a faixa volta a quebrar linha em vez de
   cortar. */
.slide__texto { max-width: min(48rem, 60%); }

/* Três grupos, com o espaço entre eles maior que o espaço dentro deles:
   o que é o produto (formato, nome, chamada), o que ele tem (faixa de
   fatos) e a decisão (preço e botões na mesma linha). */

.slide__formato {
  display: flex;
  align-items: center;
  gap: var(--espaco-xs);
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-size: 1rem;
  font-stretch: 100%;
  color: color-mix(in srgb, var(--curso-foto-texto) 60%, transparent);
  text-transform: uppercase;
}

.slide__formato::before {
  content: '';
  flex: none;
  width: 9px;
  height: 1px;
  background: url('../svg/iconsubtopico.svg?v=202610011458') center / contain no-repeat;
}

.slide__nome {
  margin-top: var(--espaco-xs);
  font-family: var(--fonte-titulo);
  font-size: clamp(2.25rem, 3.8vw, 4.25rem);
  font-weight: var(--peso-titulo);
  font-stretch: 100%;
  line-height: 1.08;
  letter-spacing: var(--letras-titulo);
  text-transform: none;
  text-wrap: balance;
  color: inherit;
}

.slide__chamada {
  margin-top: var(--espaco-sm);
  max-width: 46ch;
  font-family: var(--fonte-titulo);
  font-size: 1.125rem;
  font-stretch: 100%;
  line-height: var(--altura-media);
  color: color-mix(in srgb, var(--curso-foto-texto) 80%, transparent);
}

/* Faixa de fatos entre dois fios: separa "o que é" de "quanto custa". */
.slide__fatos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-2xs) var(--espaco-lg);
  margin-top: var(--espaco-xl);
  padding-block: var(--espaco-sm);
  border-block: var(--borda) solid var(--curso-foto-borda);
}

.slide__fatos li {
  position: relative;
  padding-left: 26px;
  font-family: var(--fonte-titulo);
  font-size: 1.125rem;
  font-stretch: 100%;
  line-height: 1.45;
  color: color-mix(in srgb, var(--curso-foto-texto) 80%, transparent);
}

.slide__fatos li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 10px;
  height: 10px;
  background: url('../svg/icontopico.svg?v=202610011458') center / contain no-repeat;
}

.slide__decisao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-md) var(--espaco-xl);
  margin-top: var(--espaco-lg);
}

.slide__preco {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-3xs);
}

.slide__valor {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.75rem, 2.4vw, 2.5rem);
  font-weight: var(--peso-titulo);
  font-stretch: 100%;
  line-height: 1.1;
  color: var(--cor-ciano);
  font-variant-numeric: tabular-nums;
}

.slide__parcela {
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-size: 1rem;
  font-stretch: 100%;
  color: color-mix(in srgb, var(--curso-foto-texto) 60%, transparent);
}

.slide__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espaco-xs);
}

/* Botões no feitio dos da seção de cursos: o principal é o ciano do
   bloco de compra; o secundário é o degradê do "Ver conteúdo", com um
   fio para não sumir sobre a foto. O ciano do hover vem de uma camada
   que acende, porque degradê não transiciona para cor sólida. */
/* Fonte, altura e cores vêm do .botao. Aqui só a largura mínima e o
   preenchimento animado do secundário. */
.slide__acoes .botao {
  position: relative;
  isolation: isolate;
  min-width: 13rem;
}

.slide__acoes .botao--fio {
  border-color: var(--curso-foto-borda);
  background: var(--curso-botao-fundo);
  color: color-mix(in srgb, var(--curso-foto-texto) 60%, transparent);
}

.slide__acoes .botao--fio::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--cor-ciano);
  opacity: 0;
  transition: opacity var(--transicao-lenta);
}

.slide__acoes .botao--fio:hover {
  border-color: transparent;
  background: var(--curso-botao-fundo);
  color: var(--curso-botao-hover-texto);
}

.slide__acoes .botao--fio:hover::before { opacity: 1; }


/* ---------- Navegação nomeada ----------
   O cliente quis um banner por curso; a referência usava bolinhas
   anônimas, que escondem o catálogo. Aqui cada controle carrega nome
   e preço, então os quatro produtos estão visíveis o tempo todo. */

.hero__abas {
  display: grid;
  gap: var(--espaco-2xs);
  margin-top: var(--espaco-sm);
}

.aba {
  display: grid;
  gap: var(--espaco-3xs);
  padding: var(--espaco-xs) var(--espaco-sm);
  text-align: left;
  border: var(--borda) solid var(--cor-borda);
  border-radius: var(--raio-sm);
  background: transparent;
  color: var(--cor-texto-2);
  /* Lenta de propósito: a borda e o texto trocam de aba junto com a
     varredura do banner, não num estalo. */
  transition: border-color var(--transicao-lenta), background-color var(--transicao-lenta),
              color var(--transicao-lenta);
}

.aba:hover {
  border-color: var(--cor-borda-forte);
  color: var(--cor-texto);
}

.aba[aria-selected="true"] {
  border-color: var(--cor-destaque);
  color: var(--cor-texto);
}

/* ---------- Troca automática ----------
   O fundo da aba ativa se enche da esquerda para a direita em
   --banner-tempo. Quando termina, o main.js (evento animationend)
   passa para o próximo banner. É a própria animação que marca o tempo:
   pausar a animação pausa a troca, sem relógio separado para sincronizar.

   Sem JavaScript, ou com a troca desligada, a aba ativa aparece cheia. */
.aba {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.aba::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--cor-destaque) 10%, transparent);
  transform: scaleX(0);
  transform-origin: left;
}

.aba[aria-selected="true"]::before {
  animation: aba-preencher var(--banner-tempo) linear forwards;
}

.hero[data-pausado] .aba::before { animation-play-state: paused; }

.hero[data-sem-troca] .aba[aria-selected="true"]::before {
  animation: none;
  transform: none;
}

/* A foto do banner ativo cresce devagar enquanto a aba enche: mesmo
   tempo, mesma pausa. Troca de banner reinicia os dois juntos, porque
   a animação só existe no slide visível. O animationend dela também
   chega ao .hero, mas o main.js só escuta o aba-preencher. */
.hero__palco > .slide:not([hidden]) .slide__foto {
  animation: banner-aproximar var(--banner-tempo) linear forwards;
  will-change: transform;
}

/* Mesma forma de seletor da regra acima e um atributo a mais: mais
   curto, perderia para o `animation` dela, que religa o running. */
.hero[data-pausado] .hero__palco > .slide:not([hidden]) .slide__foto {
  animation-play-state: paused;
}
.hero[data-sem-troca] .hero__palco > .slide:not([hidden]) .slide__foto {
  animation: none;
}

@keyframes banner-aproximar {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

/* Rastro da aba que saiu: o main.js cria e anima (esvaziarAba). */
.aba__rastro {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--cor-destaque) 10%, transparent);
  transform-origin: left;
  pointer-events: none;
}

/* Fio de luz na borda da varredura diagonal (trocarBanner). O recorte
   em diagonal vem do JS; aqui só a cor, que some nas pontas. */
.slide__fio {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  /* Invisível por padrão: sem o recorte da animação ele cobriria o
     banner inteiro. Só a animação o acende. */
  opacity: 0;
  background: linear-gradient(to bottom,
    transparent, var(--cor-ciano) 25%, var(--cor-ciano) 75%, transparent);
}

@keyframes aba-preencher {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Pausar e continuar. Fica no canto do banner, fora da lista de abas:
   dentro de um role="tablist" só pode haver abas. */
.hero__pausa {
  grid-area: 1 / 1;
  align-self: end;
  justify-self: end;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: var(--espaco-md);
  border: var(--borda) solid var(--curso-foto-borda);
  border-radius: var(--raio-pill);
  background: color-mix(in srgb, var(--cartao-fundo) 70%, transparent);
  backdrop-filter: blur(6px);
  color: var(--curso-foto-texto);
  cursor: pointer;
  transition: border-color var(--transicao);
}

.hero__pausa:hover { border-color: var(--cor-ciano); }

/* Duas barras: pausar. */
.hero__pausa::before {
  content: '';
  width: 10px;
  height: 12px;
  border-inline: 3px solid currentColor;
}

/* Triângulo: continuar. */
.hero__pausa[data-parado]::before {
  width: 11px;
  height: 12px;
  margin-left: 3px;
  border: 0;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.aba__nome {
  font-family: var(--fonte-titulo);
  font-size: var(--texto-base);
  font-weight: var(--peso-titulo);
  font-stretch: var(--largura-titulo);
  line-height: var(--altura-titulo);
}

.aba__preco {
  font-family: var(--fonte-mono);
  font-size: var(--texto-xs);
  color: var(--cor-texto-3);
  font-variant-numeric: tabular-nums;
  transition: color var(--transicao-lenta);
}

.aba[aria-selected="true"] .aba__preco { color: var(--cor-destaque); }


/* ---------- Larguras ---------- */

@media (max-width: 55.9375rem) {
  /* No celular o texto ocupa a largura toda e cai sobre a pessoa da
     foto: um véu escuro por baixo do texto garante a leitura. */
  .slide {
    justify-content: flex-end;
    min-height: 0;
  }
  .slide::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--slide-veu);
  }
  .slide__texto { max-width: none; }
  .slide__acoes .botao { flex: 1 1 12rem; }
  /* No pé ele cairia em cima dos botões do banner. */
  .hero__pausa { align-self: start; }

  .hero__abas {
    grid-auto-flow: column;
    grid-auto-columns: minmax(13rem, 62%);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* Sem o scroll-padding o encaixe alinha a primeira aba no início
       do conteúdo e come o respiro lateral: ela fica colada na borda. */
    scroll-padding-inline: var(--respiro);
    margin-inline: 0;
    padding-inline: var(--respiro);
    padding-bottom: var(--espaco-2xs);
    scrollbar-width: none;
  }
  /* Desconta o respiro da faixa de abas: sem isso o topo ficaria 8px
     mais longe da faixa de logos do que o espaço entre seções. */
  .hero { padding-bottom: calc(var(--espaco-banda) / 2 - var(--espaco-2xs)); }
  .hero__abas::-webkit-scrollbar { display: none; }
  .aba { scroll-snap-align: start; }
}

/* Quatro abas por vez, sempre — não "quatro no total".

   Era `repeat(4, 1fr)`, do tempo em que os produtos eram quatro fixos.
   Desde que o painel passou a criar produto (2026-09-22), a faixa
   precisou aguentar cinco, seis ou mais sem espremer o nome de cada
   um. Agora cada aba tem UM QUARTO da faixa e o que passa disso rola
   para o lado, com as setas aparecendo. */
@media (min-width: 56rem) {
  .hero__faixa {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
  }

  .hero__abas {
    grid-auto-flow: column;
    /* O -0.75 das folgas: quatro abas com três vãos entre elas. */
    grid-auto-columns: calc((100% - var(--espaco-sm) * 3) / 4);
    grid-template-columns: none;
    overflow-x: auto;
    /* proximity, e NÃO mandatory. Com o obrigatório o navegador força
       a faixa a pousar sempre num ponto de encaixe e ela não descansa
       no zero: medido, ficava presa em 56px, e aí a seta "anterior"
       aparecia logo de cara dizendo que havia algo à esquerda quando
       não havia. Quem pagina aqui são as setas; o encaixe é só para
       arrumar a parada de quem rola com o trackpad. */
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    scrollbar-width: none;
    /* Tem de casar com o padding-inline da regra base (--respiro, o
       recuo que alinha as abas com o resto da página). Sem isto o
       snapport começa na borda e o ponto de encaixe da primeira aba
       cai em 56px em vez de 0: medido, a faixa não descansava no
       começo e a seta "anterior" aparecia dizendo que havia algo à
       esquerda quando não havia. */
    scroll-padding-inline: var(--respiro);
  }

  .hero__abas::-webkit-scrollbar { display: none; }
  .hero__abas > .aba { scroll-snap-align: start; }

  /* As setas ficam POR CIMA das pontas da faixa, e não ao lado: ao
     lado elas comeriam largura das abas, que é justamente o que se
     está tentando preservar. O main.js as revela só quando sobra
     conteúdo para rolar. */
  .hero__seta {
    position: absolute;
    z-index: 2;
    top: 50%;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    transform: translateY(-50%);
    border: var(--borda) solid var(--curso-borda);
    border-radius: 50%;
    background: var(--cor-fundo);
    color: var(--cor-texto-2);
    cursor: pointer;
    transition: border-color var(--transicao), color var(--transicao);
  }

  .hero__seta:hover { border-color: var(--cor-ciano); color: var(--cor-ciano); }

  /* Centradas na margem lateral da faixa (--respiro, 56px), e não por
     cima das abas: ali elas não cobrem o nome de produto nenhum. */
  .hero__seta--antes { left: calc((var(--respiro) - 2.25rem) / 2); }
  .hero__seta--depois { right: calc((var(--respiro) - 2.25rem) / 2); }

  /* A ponta é desenhada com borda girada: dois fios, sem arquivo. */
  .hero__seta::before {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
  }

  .hero__seta--antes::before { transform: translateX(2px) rotate(-135deg); }
  .hero__seta--depois::before { transform: translateX(-2px) rotate(45deg); }
}


/* ===========================================================
   Faixa de módulos — a assinatura da página

   Rolagem contínua de siglas reais do SAP. Duas cópias da lista
   deslocadas em 50% dão o laço sem emenda.
   =========================================================== */

.faixa {
  padding-block: 0;
  border-block: var(--borda) solid var(--cor-borda);
  overflow: hidden;
}

.faixa__trilho {
  display: flex;
  width: max-content;
  animation: correr 38s linear infinite;
}

.faixa__lista {
  display: flex;
  align-items: center;
}

.faixa__lista li {
  padding: var(--espaco-md) var(--espaco-lg);
  border-inline-end: var(--borda) solid var(--cor-borda);
  font-family: var(--fonte-mono);
  font-size: var(--texto-sm);
  color: var(--cor-texto-2);
  text-transform: uppercase;
  letter-spacing: var(--letras-rotulo);
  white-space: nowrap;
}

.faixa__lista li:nth-child(3n) { color: var(--cor-destaque); }

/* As regras .faixa__lista acima estão SEM USO desde que a faixa virou
   logos. Ficaram de propósito: as siglas do SAP podem voltar em outro
   ponto da página e não há histórico de versão para recuperá-las. */


/* ---------- Faixa de logos de clientes e parcerias ----------
   Os arquivos em img/logos/ entram como MÁSCARA, não como imagem: o
   elemento é pintado com currentColor e o SVG só recorta a forma.
   Assim a faixa fica de uma cor só nos dois temas, sem precisar de
   dois arquivos por marca. Petrobras e Transpetro trazem máscara
   interna para o miolo branco virar furo, não mancha.

   O url() mora aqui na folha de estilo — caminho relativo a
   assets/css/ — e não em custom property, que resolveria errado. */

/* A faixa tem fios em cima e embaixo: o espaço entre seções conta a
   partir deles. Por isso a metade vai para fora, como margem. */
.faixa--logos {
  padding-block: var(--espaco-lg);
  margin-block: calc(var(--espaco-banda) / 2);
}

.faixa__logos {
  display: flex;
  align-items: center;
  gap: var(--espaco-2xl);
  padding-inline: calc(var(--espaco-2xl) / 2);
}

.logo {
  display: block;
  flex: none;
  height: var(--logo-altura, 2rem);
  aspect-ratio: var(--logo-proporcao, 4);
  background-color: currentColor;
  color: var(--cor-texto-2);
  opacity: 0.85;
  /* O arquivo, a proporção e a altura vêm de custom properties escritas
     no style inline de cada <span>, no index.html. Eram dez regras
     .logo--nome aqui, uma por marca.

     Mudou porque o painel passou a acrescentar e apagar logo (pedido do
     cliente, 2026-09-21), e o painel não escreve CSS: ele só reescreve
     trechos marcados do HTML. Com os valores no HTML, marca nova não
     precisa de regra nova.

     O ARQUIVO é a exceção: ele vai como `mask-image` de verdade no
     style inline, não como custom property. Foi tentado com
     --logo-arquivo e NÃO funciona — medido no Chrome, o url() de dentro
     de uma custom property resolve contra a folha que USA a
     propriedade, não contra quem a declara: virava
     /assets/css/img/logos/deloitte.svg e dava 404. É a mesma armadilha
     já registrada nos ícones de tópico. No atributo style, o url()
     resolve contra o index.html, que é onde queremos. */
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

@media (max-width: 40rem) {
  .faixa__logos { gap: var(--espaco-xl); }
  /* Propriedade PRÓPRIA para o celular, e não um --logo-altura menor
     aqui: o valor do style inline venceria qualquer regra de folha,
     por mais específica que fosse. Quem não declara a mini cai nos
     1.5rem, que servem a oito das dez marcas de hoje. */
  .logo { height: var(--logo-altura-mini, 1.5rem); }
}

@keyframes correr {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}



/* ===========================================================
   Cursos — três cards lado a lado

   Fechado: foto, formato, nome e preço, com o botão "Ver conteúdo"
   embaixo. Ao abrir, os outros dois cursos e a foto somem, o card vira
   uma faixa de largura total com o preço à direita e o conteúdo aparece
   embaixo. Fechar faz o mesmo caminho, ao contrário.

   Cada fase é um atributo que o main.js põe no .curso:
     data-apagado   a foto sumiu
     data-aberto    o card virou faixa e o conteúdo entrou no layout
     data-revelado  o conteúdo apareceu
   Os outros dois recebem data-escondido (somem) e depois hidden.

   Sem JavaScript nada disso existe: os cursos ficam um embaixo do
   outro, com o conteúdo inteiro à mostra.
   =========================================================== */

/* O cabeçalho da seção segue o padrão geral (.sobrancelha, .secao__titulo,
   .secao__texto, no início da folha). */

/* A quebra depois da primeira frase só vale onde as duas cabem. */
@media (max-width: 40rem) {
  .cursos .secao__texto br { display: none; }
}


/* ---------- Lista ---------- */

.lista-cursos {
  display: grid;
  gap: var(--espaco-xl);
}

.curso {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--espaco-sm);
  scroll-margin-top: var(--cartao-empilha-topo);
  transition: opacity var(--curso-sumir) ease;
}

.curso[data-escondido] { opacity: 0; }

/* Abertura direta, vinda de um link do topo: o estado final aparece de
   uma vez, sem a foto apagando por trás da faixa já aberta. */
.lista-cursos[data-instantaneo] *,
.lista-cursos[data-instantaneo] *::after { transition: none !important; }

@media (min-width: 62rem) {
  .js .lista-cursos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--espaco-md);
  }
  .js .curso[data-aberto] { grid-column: 1 / -1; }
}


/* ---------- Card ---------- */

.curso__cartao {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--espaco-md);
  padding: var(--curso-respiro);
  border: var(--borda) solid var(--curso-borda);
  border-radius: var(--raio-lg);
  background-color: transparent;
  color: var(--curso-foto-texto);
  /* O tamanho das letras acompanha a largura do card (cqi), para ele
     encolher inteiro, como uma imagem, quando a tela é menor. */
  container-type: inline-size;
  transition:
    color var(--curso-sumir) ease,
    background-color var(--curso-transformar) ease;
}

/* Sem JavaScript o card fica largo, no alto da própria ementa: a
   proporção da foto deixaria ele alto demais. */
.js .curso__cartao { aspect-ratio: 571 / 540; }
html:not(.js) .curso__cartao { min-height: 20rem; }

.curso__foto {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity var(--curso-sumir) ease;
}

.curso[data-apagado] .curso__foto { opacity: 0; }

/* Foto em partículas (main.js, initFotosParticulas): o canvas ocupa o
   lugar da foto e some junto com ela na abertura do curso. A foto só é
   escondida quando o canvas conseguiu ler a imagem (data-particulas);
   sem isso, ela continua aparecendo. */
.curso__particulas {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: opacity var(--curso-sumir) ease;
  /* O brilho da foto é esticado no JS, e isso clareia também as áreas
     que a arte escurecia para o texto. A máscara devolve esse escuro no
     alto (formato e nome) e no pé (preço e parcelamento). */
  -webkit-mask-image: linear-gradient(to bottom, transparent -12%, currentColor 32%, currentColor 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent -12%, currentColor 32%, currentColor 55%, transparent 100%);
}

.curso[data-apagado] .curso__particulas { opacity: 0; }
.curso__cartao[data-particulas] .curso__foto { visibility: hidden; }


.curso__chamada {
  display: flex;
  align-items: center;
  gap: var(--espaco-xs);
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-size: clamp(0.8125rem, 2.8cqi, 1rem);
  font-stretch: 100%;
  line-height: 1.3;
  text-transform: uppercase;
  color: color-mix(in srgb, currentColor 60%, transparent);
}

.curso__chamada::before {
  content: '';
  flex: none;
  width: 9px;
  height: 1px;
  background: url('../svg/iconsubtopico.svg?v=202610011458') center / contain no-repeat;
}

.curso__nome {
  margin-top: var(--espaco-xs);
  font-family: var(--fonte-titulo);
  font-size: clamp(1.5rem, 7.9cqi, 2.8125rem); /* 45px no card de 571 */
  font-weight: var(--peso-titulo);
  font-stretch: 100%;
  line-height: 1.1;
  letter-spacing: normal;
  text-transform: none;
  color: inherit;
}

.curso__preco {
  display: flex;
  flex: none;
  flex-direction: column;
  font-variant-numeric: tabular-nums;
}

.curso__valor {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.375rem, 7cqi, 2.5rem); /* 40px no card de 571 */
  font-weight: var(--peso-titulo);
  font-stretch: 100%;
  line-height: 1.1;
  color: var(--cor-ciano);
  white-space: nowrap;
  transition: color var(--curso-sumir) ease;
}


.curso__parcelamento {
  margin-top: var(--espaco-3xs);
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-size: clamp(0.8125rem, 2.8cqi, 1rem);
  font-stretch: 100%;
  color: color-mix(in srgb, currentColor 60%, transparent);
  white-space: nowrap;
}


/* ---------- Botão ---------- */

.curso__alternar { display: none; }

.js .curso__alternar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* Secundário do padrão .botao: mesma altura e o mesmo fio fino. */
  min-height: 2.75rem;
  padding: var(--espaco-xs) var(--espaco-lg);
  border: var(--borda) solid var(--curso-borda);
  border-radius: var(--raio-pill);
  background: var(--curso-botao-fundo);
  color: color-mix(in srgb, var(--curso-texto) 60%, transparent);
  font-family: var(--fonte-titulo);
  font-size: 1rem;
  font-stretch: 100%;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  transition: color var(--transicao-lenta);
}

/* Degradê não transiciona para cor sólida: trocar o background faria o
   ciano aparecer de uma vez. O ciano mora numa camada por baixo do
   texto, e o que anima é a opacidade dela. */
.js .curso__alternar::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--cor-ciano);
  opacity: 0;
  transition: opacity var(--transicao-lenta);
}

.js .curso__alternar:hover { color: var(--curso-botao-hover-texto); }
.js .curso__alternar:hover::before { opacity: 1; }

/* Segundo "Fechar conteúdo", no pé do curso: quem chegou ao fim da
   ementa não precisa subir tudo para fechar. Fica colado no bloco de
   compra, mais perto que o espaço normal entre as partes. */
.curso__fechar-final { margin-top: calc(var(--espaco-sm) - var(--espaco-lg)); }

.curso__alternar-fechar { display: none; }
.curso[data-aberto] .curso__alternar-abrir { display: none; }
.curso[data-aberto] .curso__alternar-fechar { display: inline; }


/* ---------- Aberto ----------
   O .curso vira uma grade de duas colunas: a faixa em cima, descrição
   e botão lado a lado, e o resto do conteúdo embaixo em largura cheia.
   O display: contents solta os filhos do conteúdo nessa grade. */

.curso[data-aberto] {
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--espaco-2xl);
  row-gap: var(--espaco-lg);
}

.curso[data-aberto] .curso__cartao {
  grid-row: 1;
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  aspect-ratio: auto;
  background-color: var(--curso-fundo-aberto);
}

/* O nome ocupa o espaço que sobra e quebra sozinho.

   Antes era `flex: none` com `white-space: nowrap`, e a quebra vinha
   de um <br> escrito à mão no HTML. O <br> saiu quando o título virou
   campo único do painel (decisão do Elizeu), e aí o nome comprido do
   Dominando passou a empurrar o preço para fora do card: medido em
   1100px, o "R$ 750,00" ficava cortado pela borda.

   O `min-width: 0` é o que permite o encolhimento: sem ele, um item
   de flex não passa do tamanho do próprio conteúdo. */
.curso[data-aberto] .curso__identificacao { flex: 1; min-width: 0; }
.curso[data-aberto] .curso__preco { flex: none; }

.curso[data-aberto] .curso__preco { align-items: flex-end; text-align: right; }

.curso[data-aberto] .curso__conteudo { display: contents; }

.curso[data-aberto] .curso__sumario { grid-row: 2; grid-column: 1; }

.curso[data-aberto] > .curso__alternar {
  grid-row: 2;
  grid-column: 2;
  align-self: center;
  width: 19.5rem;
}

.curso[data-aberto] .curso__conteudo > :not(.curso__sumario) { grid-column: 1 / -1; }

/* O conteúdo entra no layout invisível e aparece depois da faixa pronta. */
.curso[data-aberto] .curso__conteudo > * {
  transition:
    opacity var(--curso-revelar) ease,
    transform var(--curso-revelar) ease;
}

.curso[data-aberto]:not([data-revelado]) .curso__conteudo > * {
  opacity: 0;
  transform: translateY(12px);
}

.curso__descricao {
  font-family: var(--fonte-titulo);
  font-size: 1.125rem;
  font-stretch: 100%;
  color: color-mix(in srgb, var(--curso-texto) 80%, transparent);
}

/* Ficha técnica em faixas: rótulo à esquerda, valor à direita. */
.curso .ficha {
  gap: var(--espaco-xs);
  border-top: 0;
}

.curso .ficha__linha {
  align-items: center;
  padding: var(--espaco-3xs) var(--espaco-sm);
  border-bottom: 0;
  border-radius: var(--raio-sm);
  background: var(--curso-ficha-fundo);
}

.curso .ficha dt,
.curso .ficha dd {
  font-family: var(--fonte-titulo);
  font-size: 1rem;
  font-stretch: 100%;
  letter-spacing: normal;
  text-transform: uppercase;
}

.curso .ficha dt {
  font-weight: var(--peso-normal);
  color: color-mix(in srgb, var(--curso-texto) 60%, transparent);
}

.curso .ficha dd {
  font-weight: var(--peso-titulo);
  color: var(--curso-texto);
}

/* Abertura do curso: o vídeo e a ficha na mesma linha, no computador
   (pedido do Elizeu). Aqui é sempre UM vídeo só, então a ficha ocupa a
   outra metade em vez de ficar sozinha embaixo dele. */
.curso__abertura {
  display: grid;
  gap: var(--espaco-lg);
}

/* O espaço em volta vem do gap: aqui os dois têm de começar na mesma
   linha de cima, e a margem própria de cada um desalinharia. */
.curso__abertura .videos,
.curso__abertura .ficha { margin-top: 0; }

/* 80rem, e não os 62rem do resto da página: a linha mais longa da ficha
   é "CERTIFICADO DE CONCLUSÃO VULPO CLASS", que pede ~34rem para caber
   de uma vez. Abaixo disso a coluna fica estreita demais e o rótulo
   quebra em duas linhas — medido em 1100px. Aí os dois empilham, o
   vídeo em cima, como estava. */
@media (min-width: 80rem) {
  .curso__abertura {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--espaco-2xl);
    align-items: start;
  }

  /* Dividindo a linha, o vídeo enche a coluna. O teto de --largura-video
     vale para quando ele fica empilhado, em largura cheia. */
  .curso__abertura .videos { grid-template-columns: minmax(0, 1fr); }
}

/* Bloco de compra no fim do curso: mesma caixa da faixa aberta, preço
   à esquerda, botão e observação à direita. O .acao do Ambiente SAP
   não entra aqui. */
.curso .acao {
  /* O espaço acima vem só do row-gap da grade do curso aberto. */
  margin-top: 0;
  align-items: center;
  padding: var(--espaco-xl) var(--curso-respiro);
  border: var(--borda) solid var(--curso-borda);
  border-radius: var(--raio-lg);
  background: var(--curso-fundo-aberto);
}

.curso .acao__preco {
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-size: 1rem;
  font-stretch: 100%;
  color: color-mix(in srgb, var(--curso-texto) 60%, transparent);
}

.curso .acao__valor {
  margin-bottom: var(--espaco-3xs);
  font-style: normal;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: var(--peso-titulo);
  font-stretch: 100%;
  letter-spacing: normal;
  color: var(--cor-destaque);
}

.curso .acao__botao {
  gap: var(--espaco-sm);
  width: min(100%, 22rem);
}

/* Era mais baixo que os outros (36px, padding de 8px); agora segue o
   .botao. Só a largura é daqui. */
.curso .acao__botao .botao { width: min(100%, 20.75rem); }

.curso .acao__observacao {
  max-width: none;
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-size: 1rem;
  font-stretch: 100%;
  line-height: 1.3;
  color: color-mix(in srgb, var(--curso-texto) 60%, transparent);
}

@media (max-width: 48rem) {
  .curso .acao { padding: var(--espaco-lg) var(--curso-respiro); }
  .curso .acao__botao,
  .curso .acao__botao .botao { width: 100%; }
}

@media (max-width: 61.9375rem) {
  /* Um card por linha: a largura é a do card, não mais um terço. */
  .js .curso__cartao { max-height: 34rem; }
}

@media (max-width: 48rem) {
  .curso__cartao { --curso-respiro: var(--espaco-md); }

  /* Na faixa estreita o preço desce para baixo do nome, e o botão
     para baixo da descrição. */
  .curso[data-aberto] { grid-template-columns: minmax(0, 1fr); }
  .curso[data-aberto] .curso__cartao {
    flex-direction: column;
    align-items: flex-start;
  }
  .curso[data-aberto] .curso__nome { white-space: normal; }
  .curso[data-aberto] .curso__identificacao { flex: initial; }
  .curso[data-aberto] .curso__preco { align-items: flex-start; text-align: left; }
  .curso[data-aberto] > .curso__alternar { grid-row: 3; grid-column: 1; width: 100%; }
  .curso__nome br { display: none; }
}


/* ---------- Ficha técnica ---------- */

.ficha,
.especificacoes {
  display: grid;
  gap: 0;
  margin-top: var(--espaco-xl);
  border-top: var(--borda) solid var(--cor-borda);
}

.ficha__linha,
.especificacoes__linha {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--espaco-md);
  padding-block: var(--espaco-xs);
  border-bottom: var(--borda) solid var(--cor-borda);
}

.ficha dt,
.especificacoes dt {
  font-family: var(--fonte-mono);
  font-size: var(--texto-xs);
  color: var(--cor-texto-3);
  text-transform: uppercase;
  letter-spacing: var(--letras-rotulo);
}

.ficha dd,
.especificacoes dd {
  font-size: var(--texto-base);
  font-weight: var(--peso-medio);
  text-align: right;
}


/* A linha do tempo dos módulos (.linha-tempo / .modulo) foi removida: os
   três cursos usam os cards de ementa. Não sobrou marcação que a usasse. */


/* ---------- Vídeos ---------- */

/* Cada curso tem UM vídeo, o da abertura. A faixa de quatro que ficava
   depois da ementa do Dominando saiu (decisão do cliente, 2026-09-20):
   não há mais vídeo depois dos módulos em nenhum curso.

   A largura é presa em --largura-video porque a linha é larga: no curso
   aberto são 1760px, e um 16/9 aí teria 990px de altura. */
.videos {
  display: grid;
  grid-template-columns: minmax(0, var(--largura-video));
  gap: var(--espaco-md);
  margin-top: var(--espaco-2xl);
}

/* ---------- O quadro e o player próprio ----------

   A interface do YouTube fica desligada (controls=0, fs=0,
   iv_load_policy=3) e o iframe não recebe ponteiro nem foco: tudo o que
   se clica é nosso, desenhado por cima. O iframe só nasce no primeiro
   clique — antes disso a página não faz nenhum pedido ao YouTube, e o
   peso da abertura é só o da capa em WebP.

   Sem JavaScript a capa continua sendo o que ela é no HTML: um link
   para o vídeo no YouTube. O main.js é que a transforma em botão.

   As camadas, de baixo para cima: palco (o iframe), toque (clique para
   pausar), barra (os controles) e capa. */

.video__moldura {
  position: relative;
  aspect-ratio: 16 / 9;
  border: var(--borda) solid var(--cor-borda);
  border-radius: var(--raio-md);
  overflow: hidden;
  background: var(--player-fundo);
  /* Os controles encolhem conforme a largura do próprio quadro, não a
     da tela: os quatro vídeos do pé do Dominando ficam estreitos mesmo
     num monitor grande. */
  container-type: inline-size;
}

.player__palco { position: absolute; inset: 0; z-index: 0; }

.player__palco iframe {
  width: 100%;
  height: 100%;
  border: 0;
  /* O iframe é só imagem. Sem isto o YouTube mostra a própria barra no
     hover e engole a roda do mouse. */
  pointer-events: none;
}

/* Camada de clique para pausar e voltar. É um <div> de propósito: quem
   responde ao teclado e ao leitor de tela é o botão da barra, e dois
   controles iguais no foco só atrapalhariam. */
.player__toque {
  position: absolute;
  inset: 0;
  z-index: 1;
  cursor: pointer;
}

.player__capa {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  transition: opacity var(--transicao-lenta);
}

.player__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.player__play {
  position: absolute;
  display: grid;
  place-items: center;
  /* Em cqi para acompanhar o quadro: os quatro do pé do Dominando têm
     um terço da largura do de abertura. O teto evita que ele fique
     enorme no quadro grande, e o piso, pequeno demais para o dedo. */
  width: 14cqi;
  min-width: 2.75rem;
  max-width: 5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--cor-ciano);
  color: var(--cor-botao-texto);
  box-shadow: var(--sombra);
  transition: transform var(--transicao), background-color var(--transicao);
}

.player__capa:hover .player__play,
.player__capa:focus-visible .player__play {
  transform: scale(1.08);
  background: var(--cor-botao-hover);
}

.player__play svg { width: 38%; }

/* Enquanto a capa está no ar, a barra não existe. */
.video__moldura:not([data-iniciado]) .player__barra,
.video__moldura:not([data-iniciado]) .player__toque { display: none; }

.video__moldura[data-iniciado] .player__capa {
  opacity: 0;
  pointer-events: none;
}

.player__barra {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--espaco-2xs);
  padding: var(--espaco-2xl) var(--espaco-sm) var(--espaco-xs);
  background: var(--player-veu);
  color: var(--curso-foto-texto);
  opacity: 0;
  transition: opacity var(--transicao);
}

/* Aparece com o ponteiro em cima, com o foco do teclado dentro, e fica
   de pé enquanto o vídeo está parado. */
.video__moldura:hover .player__barra,
.video__moldura:focus-within .player__barra,
.video__moldura[data-parado] .player__barra { opacity: 1; }

.player__botao {
  display: grid;
  place-items: center;
  flex: none;
  width: 2rem;
  aspect-ratio: 1;
  border-radius: var(--raio-sm);
  color: inherit;
  transition: color var(--transicao);
}

.player__botao:hover { color: var(--cor-ciano); }
.player__botao svg { width: 1.125rem; }

/* Legenda ligada: o botão fica aceso, como um interruptor. Só ele — no
   botão de som o estado já se lê no próprio ícone, e acender o "mudo"
   passaria a impressão contrária. */
.player__legendas[aria-pressed='true'] { color: var(--cor-ciano); }

.player__tempo {
  flex: none;
  font-family: var(--fonte-mono);
  font-size: var(--texto-xs);
  letter-spacing: var(--letras-rotulo);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* A linha do tempo. O preenchimento é um degradê que para em
   --progresso, que o main.js atualiza. Os seletores de trilho e botão
   do WebKit e do Firefox vão em regras separadas: numa lista só, o
   navegador que não conhece um deles joga a regra inteira fora. */
.player__linha {
  flex: 1;
  min-width: 2rem;
  height: 1.25rem;
  margin: 0;
  appearance: none;
  background: none;
  cursor: pointer;
}

.player__linha::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 999px;
  background:
    linear-gradient(to right, var(--cor-ciano) var(--progresso, 0%), rgb(0 0 0 / 0%) 0),
    linear-gradient(to right, var(--player-carregado) var(--carregado, 0%), rgb(0 0 0 / 0%) 0),
    var(--player-trilho);
}

.player__linha::-webkit-slider-thumb {
  appearance: none;
  width: 0.75rem;
  height: 0.75rem;
  margin-top: -0.28rem;
  border-radius: 50%;
  background: var(--cor-ciano);
}

.player__linha::-moz-range-track {
  height: 3px;
  border-radius: 999px;
  background:
    linear-gradient(to right, var(--player-carregado) var(--carregado, 0%), rgb(0 0 0 / 0%) 0),
    var(--player-trilho);
}

.player__linha::-moz-range-progress {
  height: 3px;
  border-radius: 999px;
  background: var(--cor-ciano);
}

.player__linha::-moz-range-thumb {
  width: 0.75rem;
  height: 0.75rem;
  border: 0;
  border-radius: 50%;
  background: var(--cor-ciano);
}

/* Quadro estreito (os quatro do pé do Dominando, ou o celular): o tempo
   e o som saem, e fica o essencial — tocar, avançar e tela cheia. */
@container (max-width: 24rem) {
  .player__barra { padding-inline: var(--espaco-2xs); }
  .player__tempo,
  .player__som { display: none; }
}

/* Em tela cheia o quadro larga a proporção e a moldura. */
.video__moldura:fullscreen {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
}

.video figcaption {
  margin-top: var(--espaco-2xs);
  font-family: var(--fonte-mono);
  font-size: var(--texto-xs);
  color: var(--cor-texto-3);
  text-transform: uppercase;
  letter-spacing: var(--letras-rotulo);
}


/* ---------- Bloco de preço e botão ---------- */

.acao {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--espaco-lg);
  margin-top: var(--espaco-2xl);
  padding-top: var(--espaco-lg);
  border-top: var(--borda) solid var(--cor-borda-forte);
}

.acao--empilhada { flex-direction: column; align-items: stretch; }

.acao__preco {
  display: flex;
  flex-direction: column;
  font-size: var(--texto-sm);
  color: var(--cor-texto-2);
  font-variant-numeric: tabular-nums;
}

.acao__valor {
  font-family: var(--fonte-titulo);
  font-size: var(--texto-2xl);
  font-weight: var(--peso-maximo);
  font-stretch: var(--largura-display);
  line-height: 1.1;
  color: var(--cor-destaque);
}

.acao__botao { display: flex; flex-direction: column; gap: var(--espaco-2xs); }
.acao--empilhada .acao__botao .botao { width: 100%; }

.acao__observacao {
  max-width: 38ch;
  font-size: var(--texto-sm);
  color: var(--cor-texto-3);
}


/* ===========================================================
   Ambiente SAP — o servidor de partículas

   Recriada a partir de cinco referências do Elizeu (SWAPP, Cyber
   Monday, Colab, a mão pontilhada e Acquire). No alto, o título gigante
   "Ambiente / SAP®" em duas linhas, e na frente dele um servidor
   desenhado em partículas num <canvas> (main.js, initAmbiente). A
   silhueta preta do servidor corta as letras, como o objeto das
   referências. Embaixo, a frase grande em dois tons, a compra e as
   colunas de especificação.

   Com .ambiente--roteiro (o main.js decide: computador com altura
   suficiente, sem movimento reduzido), o trilho fica alto e o palco
   gruda na tela: a rolagem junta a poeira no servidor e depois acende os
   30 LEDs das gavetas, um por dia. Sem a classe, a montagem roda sozinha
   quando a cena entra na tela.
   =========================================================== */

/* Cores, fundo e padding vêm da .banda--clara. As vizinhas dobram do
   lado que encosta na faixa clara: a borda dela fica com o espaço
   inteiro dos dois lados. */
.cursos.banda { padding-bottom: var(--ambiente-respiro); }
/* O mesmo em volta do FAQ, a outra banda clara. */
.depoimentos.banda { padding-bottom: var(--ambiente-respiro); }
.rodape.banda { padding-top: var(--ambiente-respiro); }
.escola.banda { padding-top: var(--ambiente-respiro); }

/* O trilho é o comprimento da rolagem; o palco anda grudado nele. */
.ambiente--roteiro .ambiente__trilho { height: var(--ambiente-trilho); }

/* O palco gruda com a própria altura, alinhado no topo. Centralizado
   numa tela inteira, ele abria vão extra e quebrava o espaço entre
   seções. */
.ambiente--roteiro .ambiente__palco {
  position: sticky;
  top: var(--cartao-empilha-topo);
}

.ambiente__rotulo { justify-content: center; margin: 0; }


/* ---------- Cena: título gigante + partículas ---------- */

.ambiente__cena {
  container-type: inline-size;
  position: relative;
  padding-block: var(--ambiente-cena-respiro);
}

.ambiente__gigante {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  font-family: var(--fonte-titulo);
  font-size: var(--texto-ambiente-gigante);
  font-weight: var(--peso-maximo);
  font-stretch: var(--largura-display);
  line-height: 0.8;
  letter-spacing: var(--letras-display);
  text-transform: uppercase;
  color: var(--curso-texto);
}

.ambiente__gigante-linha { display: block; text-align: center; }

/* "SAP" encosta à direita: o servidor fica à esquerda dele, sem cobrir
   nenhuma letra da sigla. */
.ambiente__gigante-linha--2 { align-self: flex-end; }

.ambiente__gigante sup {
  margin-left: 0.04em;
  font-size: 0.16em;
  font-weight: var(--peso-titulo);
  vertical-align: 4.2em;
}

/* O canvas cobre a cena inteira, com o respiro, para a poeira ter onde
   flutuar. Sem JavaScript ele não teria desenho: sai de cena. */
.ambiente__particulas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

html:not(.js) .ambiente__particulas,
html:not(.js) .ambiente__contador { display: none; }

/* Contador e legenda: no pé da cena, como a linha de baixo da
   referência SWAPP. */
.ambiente__contador,
.ambiente__legenda {
  position: absolute;
  bottom: 0;
  z-index: 2;
}

.ambiente__contador {
  left: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espaco-3xs);
}

.ambiente__dia {
  font-family: var(--fonte-mono);
  font-size: 1.25rem;
  font-weight: var(--peso-medio);
  line-height: 1;
  color: var(--cor-destaque);
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}

.ambiente__estado,
.ambiente__legenda {
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-size: 1rem;
  font-stretch: 100%;
  color: color-mix(in srgb, var(--curso-texto) 60%, transparent);
}

.ambiente__legenda { right: 0; text-align: right; }


/* ---------- Corpo: frase, compra e colunas ----------
   A linha da referência Acquire: frase grande em cinza com o trecho que
   importa aceso, botão à direita, colunas com título em mono. */

.ambiente__corpo { margin-top: var(--espaco-2xl); }

.ambiente__chamada {
  display: grid;
  gap: var(--espaco-lg);
  align-items: start;
}

/* Duas linhas no computador (pedido do Elizeu), quebradas à mão na
   vírgula; três no máximo nas larguras intermediárias. A fonte acompanha
   a largura da tela para isso valer. */
.ambiente__frase {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.75rem, 2.5vw, 3rem);
  font-weight: var(--peso-normal);
  font-stretch: 100%;
  line-height: 1.08;
  letter-spacing: var(--letras-titulo);
  text-wrap: balance;
  color: color-mix(in srgb, var(--curso-texto) 55%, transparent);
}

/* A quebra manual só vale onde as duas linhas cabem. */
.ambiente__quebra { display: none; }
@media (min-width: 85rem) {
  .ambiente__quebra { display: inline; }
}

.ambiente__frase em {
  font-style: italic;
  color: var(--curso-texto);
}

.ambiente__compra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espaco-md) var(--espaco-lg);
}

.ambiente__preco {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-3xs);
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-size: 1rem;
  font-stretch: 100%;
  color: color-mix(in srgb, var(--curso-texto) 60%, transparent);
  font-variant-numeric: tabular-nums;
}

.ambiente__valor {
  font-style: normal;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: var(--peso-titulo);
  line-height: 1.1;
  color: var(--cor-destaque);
}

/* Mesma forma do .botao (pílula; era retângulo), em tinta escura: o
   ciano da página some sobre o fundo claro. */
.ambiente__botao {
  background: var(--ambiente-tinta);
  color: var(--ambiente-fundo);
}

.ambiente__botao:hover {
  background: var(--ambiente-destaque);
  color: var(--ambiente-fundo);
}

.ambiente__texto {
  max-width: var(--largura-texto);
  margin-top: var(--espaco-lg);
  font-family: var(--fonte-titulo);
  font-size: 1.125rem;
  font-stretch: 100%;
  color: color-mix(in srgb, var(--curso-texto) 80%, transparent);
}

.ambiente__colunas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--espaco-lg) var(--espaco-md);
  margin-top: var(--espaco-2xl);
  padding-top: var(--espaco-lg);
  border-top: var(--borda) solid var(--curso-borda);
}

.ambiente__coluna { display: grid; align-content: start; gap: var(--espaco-2xs); }

/* Rótulo no padrão da página (Archivo itálico 16px, caixa alta). Era
   JetBrains Mono 12px; a mono ficou só no contador da cena. */
.ambiente__coluna dt {
  margin-bottom: var(--espaco-2xs);
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-size: 1rem;
  font-stretch: 100%;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--curso-texto) 60%, transparent);
}

.ambiente__coluna dd {
  font-family: var(--fonte-titulo);
  font-size: 1rem;
  font-stretch: 100%;
  line-height: 1.45;
  color: var(--curso-texto);
}

@media (min-width: 62rem) {
  .ambiente__chamada {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
  .ambiente__compra { justify-content: flex-end; }
}

/* Celular: o contador e a legenda saem do pé da cena e vão para baixo
   dela, em fluxo, senão encostariam no título. */
/* No computador "Ambiente" é uma palavra só: o hífen só existe no celular. */
.ambiente__hifen { display: none; }

@media (max-width: 48rem) {
  .ambiente__cena { padding-bottom: var(--espaco-sm); }
  /* Três linhas, "AMBI- / ENTE / SAP®", encostadas à esquerda: inteira,
     "AMBIENTE" obrigava a letra a ficar pequena demais (pedido do
     Elizeu). O servidor fica à direita, na altura das três (main.js). */
  .ambiente__gigante {
    --texto-ambiente-gigante: 33cqi;
    margin-bottom: var(--espaco-xl);
  }
  .ambiente__gigante-linha { text-align: left; }
  .ambiente__gigante-linha--2 { align-self: flex-start; }
  .ambiente__hifen { display: inline; }
  .ambiente__gigante-resto { display: block; }

  /* Colunas de especificação viram uma ficha (pedido do Elizeu: empilhadas
     ficavam cruas). Uma caixa com o fundo e a borda dos cartões; cada
     grupo é uma linha, rótulo à esquerda e valores à direita, com um fio
     entre as linhas. */
  .ambiente__colunas {
    gap: 0;
    padding: 0 var(--espaco-md);
    border: var(--borda) solid var(--curso-borda);
    border-radius: var(--raio-lg);
    background: var(--clara-superficie);
  }
  .ambiente__coluna {
    grid-template-columns: 6.5rem minmax(0, 1fr);
    column-gap: var(--espaco-sm);
    row-gap: var(--espaco-3xs);
    padding-block: var(--espaco-md);
  }
  .ambiente__coluna + .ambiente__coluna { border-top: var(--borda) solid var(--curso-borda); }
  .ambiente__coluna dt {
    grid-row: 1 / span 3;
    margin-bottom: 0;
    font-size: 0.875rem;
  }
  .ambiente__coluna dd { grid-column: 2; }
  .ambiente__contador,
  .ambiente__legenda { position: static; margin-top: var(--espaco-sm); text-align: left; }
}


/* ===========================================================
   Padrão de texto das seções

   O mesmo dos cursos: texto corrido em Archivo 18px a 80%, rótulos em
   Archivo itálico 16px a 60%, listas com o losango (icontopico) ou o
   traço (iconsubtopico), etiquetas nas faixas de ciano a 10% da ficha,
   caixas com o fundo e a borda da faixa aberta. Cores de --curso-texto,
   que segue o padrão das seções.
   =========================================================== */

/* Rótulo pequeno: o mesmo feitio da .sobrancelha, sem a margem dela. */
.rodape__titulo {
  display: flex;
  align-items: center;
  gap: var(--espaco-xs);
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-size: 1rem;
  font-weight: var(--peso-normal);
  font-stretch: 100%;
  letter-spacing: normal;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--curso-texto) 60%, transparent);
}

.rodape__titulo::before {
  content: '';
  flex: none;
  width: 9px;
  height: 1px;
  background: url('../svg/iconsubtopico.svg?v=202610011458') center / contain no-repeat;
}

/* ===========================================================
   A escola
   =========================================================== */

/* Composição editorial (três referências do Elizeu: NESH, ELYSIUM e
   Measured Existence). O nome vem gigante em duas linhas desencontradas,
   com a marca entre elas: "VULPO" encostado à esquerda em cima, o "V"
   de vidro no meio e "CLASS" encostado à direita embaixo — a diagonal
   que dá o desencontro.

   Era a seção da instrutora, com o retrato da Bruna. O cliente pediu
   (2026-09-21) que virasse a seção da empresa: a marca no lugar do
   retrato, os dois números ficam e as credenciais dela saem.

   **Nada se sobrepõe.** Com o retrato, o nome atravessava as bordas
   esmaecidas dele; o "V" é um objeto inteiro, com forma própria, e o
   cliente pediu o nome menor justamente para não ficar por cima. Por
   isso saíram todas as margens negativas do palco, e por isso o
   --texto-nome-escola encolheu.

   Na tela larga são três blocos de quatro colunas na mesma linha:
   números (1 a 4), marca (5 a 8, o meio exato da grade de 12) e
   "O que fazemos" (9 a 12).

   No celular é uma coluna só, na mesma ordem de leitura do HTML. */

.escola__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--espaco-2xs) var(--espaco-lg);
  margin-bottom: var(--espaco-lg);
  padding-bottom: var(--espaco-sm);
  border-bottom: var(--borda) solid var(--curso-borda);
}

.escola__meta .sobrancelha { margin: 0; }

/* Celular: os três rótulos não cabem numa linha e a quebra do flex saía
   torta (dois em cima, um sobrando embaixo). Fica "A escola" sozinho,
   como rótulo da seção, e os outros dois na linha de baixo, um em cada
   ponta. */
@media (max-width: 48rem) {
  .escola__meta { row-gap: var(--espaco-xs); }
  .escola__meta .sobrancelha { flex-basis: 100%; }
  /* Sem quebra dentro do rótulo: em tela muito estreita, eles descem
     inteiros, um por linha, em vez de partir "Quem / ensina". */
  .escola__papel { white-space: nowrap; }
}

/* Rótulo: o mesmo feitio da .sobrancelha ao lado (caixa alta). */
.escola__papel {
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-size: 1rem;
  font-stretch: 100%;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--curso-texto) 60%, transparent);
}

.escola__palco {
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  position: relative;
}

/* O h2 some da caixa: as duas linhas viram peças da grade do palco. */
.escola__nome { display: contents; }

.escola__nome-linha {
  position: relative;
  display: block;
  font-family: var(--fonte-titulo);
  font-size: var(--texto-nome-escola);
  font-weight: var(--peso-maximo);
  font-stretch: var(--largura-display);
  line-height: 0.8;
  letter-spacing: var(--letras-display);
  text-transform: uppercase;
  color: var(--curso-texto);
  pointer-events: none;
}

.escola__nome-linha--1 { grid-row: 1; justify-self: start; z-index: 1; }

/* As PONTAS do "V" encostam no nome, e o "V" fica ATRÁS das duas
   linhas (z 0, contra 1 delas — pedido do Elizeu, 2026-09-21). Os
   cartões de vidro seguem na frente de tudo, em z 3.

   O z-index das linhas precisa ser explícito: se ficassem no 0 junto
   com a marca, empatariam, e aí quem decide é a ordem do HTML — onde
   as duas linhas vêm ANTES da marca, que então pintaria por cima.

   Isto é o meio-termo entre as duas versões anteriores, e as duas
   foram recusadas: primeiro o nome atravessava o desenho inteiro (com
   o retrato da Bruna funcionava, com um objeto de forma própria não);
   depois nada se tocava, e ficou solto. O Elizeu pediu encosto —
   "mas não muito".

   A margem negativa é fração do tamanho do nome, não px: assim o
   encosto é o mesmo em qualquer largura, já que o nome é medido em
   cqi do palco.

   O -0.16 não foi escolhido a olho. O Elizeu montou o alvo no
   inspecionar e mandou o print; as duas imagens foram medidas pixel a
   pixel, e o tamanho das letras e do vidro já batia (VULPO 879×231,
   CLASS 843×232, vidro 296 de altura nas duas). O que faltava era só o
   encosto: no alvo o vidro entra 25px em "VULPO" e "CLASS" sobe até 3px
   dentro do pé dele; com -0.1 dava 5px de encosto em cima e ainda
   sobravam 17px de folga embaixo. */
.escola__marca {
  position: relative;
  z-index: 0;
  grid-row: 2;
  justify-self: center;
  width: min(100%, 20rem);
  margin-block: calc(var(--texto-nome-escola) * -0.16);
}

.escola__marca img {
  width: 100%;
  /* Sem isto o height do HTML vale como altura real e o desenho estica
     na vertical. O atributo fica para reservar a proporção. */
  height: auto;
  /* Halo ciano por trás do vidro: o recorte tirou o fundo do estúdio e,
     com ele, a luz que separava o V da cena. O drop-shadow segue o
     alfa, então o brilho acompanha a silhueta do vidro, não uma caixa. */
  filter: drop-shadow(0 0 clamp(1.5rem, 3vw, 3.5rem)
                      color-mix(in srgb, var(--cor-ciano) 34%, transparent));
}

.escola__nome-linha--2 {
  grid-row: 3;
  justify-self: end;
  z-index: 1;
  /* O encosto de baixo tem de vir daqui, e não da marca, e NÃO do margin-bottom negativo
     da marca. Numa grade, margem negativa em item não puxa os outros:
     ela só encolhe a caixa externa dele, e a altura da linha 2 é ditada
     pelo item mais alto — que é o cartão "O que fazemos" (245px), não a
     marca (222px de caixa externa). Medido: com o -0.16 só na marca, o
     "V" subiu os 20px esperados e "CLASS" não saiu do lugar. */
  margin-top: calc(var(--texto-nome-escola) * -0.12);
}

/* Cartão de vidro: desfoca o que está atrás (a marca, nas bordas). */
.escola__vidro {
  position: relative;
  z-index: 3;
  padding: var(--espaco-md);
  border: var(--borda) solid var(--vidro-borda);
  border-radius: var(--raio-lg);
  background: var(--vidro-fundo);
  -webkit-backdrop-filter: blur(var(--vidro-desfoque));
  backdrop-filter: blur(var(--vidro-desfoque));
}

.escola__vidro-titulo {
  margin-bottom: var(--espaco-sm);
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-size: 1rem;
  font-weight: var(--peso-normal);
  font-stretch: 100%;
  letter-spacing: normal;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--curso-texto) 60%, transparent);
}

.escola__oferta { margin-top: var(--espaco-md); }
.escola__oferta .escola__lista { margin-top: 0; }

/* ---------- Base da seção ----------
   A parte de baixo (frase e texto) ganha faixa própria, de ponta a
   ponta: fundo um pouco mais claro e fios em cima e embaixo. "CLASS"
   fica apoiado na borda de cima dela, como num piso: é isso que mostra
   que ainda é a mesma seção. Dentro, o ritmo muda: a frase do cliente
   vem grande e em dois tons (o mesmo recurso do Ambiente) e sai da
   coluna estreita; o resto do texto fica embaixo dela, em corpo normal.

   A faixa sobe por baixo do palco até a base das letras de "CLASS" (o
   palco fica por cima, z-index 1). O deslocamento acompanha o tamanho
   do nome, que é proporcional à largura. */
.escola__palco { z-index: 1; }

.escola__base {
  position: relative;
  z-index: 0;
  /* No celular a última peça do palco é o cartão do que a escola faz,
     não o nome: a faixa precisa de respiro antes dela. */
  margin-top: var(--espaco-xl);
  padding-block: var(--espaco-2xl);
  border-block: var(--borda) solid var(--curso-borda);
  background: var(--curso-fundo-aberto);
}

.escola__base-grade {
  display: grid;
  gap: var(--espaco-lg);
  align-items: start;
}

.escola__frase {
  font-family: var(--fonte-titulo);
  font-size: clamp(1.375rem, 2vw, 2.125rem);
  font-stretch: 100%;
  line-height: 1.25;
  letter-spacing: var(--letras-titulo);
  text-wrap: pretty;
  color: color-mix(in srgb, var(--curso-texto) 60%, transparent);
}

.escola__frase em {
  font-style: italic;
  color: var(--curso-texto);
}

/* Os dois parágrafos que vêm abaixo da frase grande: texto corrido do
   padrão da página (Archivo 18px a 80%). */
.escola__corpo {
  display: grid;
  gap: var(--espaco-sm);
  margin-top: var(--espaco-md);
  font-family: var(--fonte-titulo);
  font-size: 1.125rem;
  font-stretch: 100%;
  line-height: 1.6;
  text-wrap: pretty;
  color: color-mix(in srgb, var(--curso-texto) 80%, transparent);
}

/* Frase curta ao lado da frase grande, no feitio de rótulo: traço e
   itálico. */
.escola__assinatura {
  position: relative;
  padding-left: var(--espaco-md);
  border-left: var(--borda) solid var(--cor-destaque);
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-size: 1rem;
  font-stretch: 100%;
  line-height: 1.5;
  color: color-mix(in srgb, var(--curso-texto) 80%, transparent);
}

@media (min-width: 62rem) {
  /* As mesmas 12 colunas do palco: a frase curta fica sob os números
     (colunas 1 a 3) e o texto começa na coluna 4. */
  .escola__base-grade {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--espaco-md);
  }
  /* -1.4vw encosta a faixa na base das letras; o mergulho sobe mais,
     para "CLASS" ficar claramente por cima dela (pedido do Elizeu). O
     padding cresce o mesmo tanto, para o texto não encostar nas letras. */
  .escola__base {
    margin-top: calc(-1.4vw - var(--escola-mergulho));
    padding-top: calc(var(--espaco-2xl) + var(--escola-mergulho));
  }
  .escola__assinatura { grid-column: 1 / 4; margin-top: 0.4em; }
  /* Começa na coluna 4, logo depois da frase curta: na 5 a frase grande
     quebrava em quatro linhas, e o Elizeu pediu três. */
  .escola__texto { grid-column: 4 / 13; }
  /* Os parágrafos não acompanham a largura da frase grande: em 1920px
     a linha passaria de 110 caracteres. A frase acima pode, porque é
     grande e tem poucas palavras por linha. */
  .escola__corpo { max-width: 68ch; }
}

.numeros {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--espaco-sm);
  margin-top: var(--espaco-lg);
}

.numero { display: flex; flex-direction: column; gap: var(--espaco-3xs); }
.escola .numero__valor { white-space: nowrap; }

.numero__valor {
  display: block;
  font-family: var(--fonte-titulo);
  font-size: clamp(2rem, 3vw, 2.8125rem); /* 45px, o nome dos cards de curso */
  font-weight: var(--peso-titulo);
  font-stretch: 100%;
  line-height: 1.1;
  color: var(--cor-destaque);
  font-variant-numeric: tabular-nums;
}

.numero__rotulo {
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-size: 1rem;
  font-stretch: 100%;
  color: color-mix(in srgb, var(--curso-texto) 60%, transparent);
}

/* Credenciais: tópicos, com o losango dos cards de ementa. */
.escola__lista { display: grid; gap: var(--espaco-2xs); margin-top: var(--espaco-xl); }

.escola__lista li {
  position: relative;
  padding-left: 26px;
  font-family: var(--fonte-titulo);
  font-size: 1.125rem;
  font-stretch: 100%;
  line-height: 1.45;
  color: color-mix(in srgb, var(--curso-texto) 80%, transparent);
}

.escola__lista li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 10px;
  height: 10px;
  background: url('../svg/icontopico.svg?v=202610011458') center / contain no-repeat;
}

/* Tela larga: grade de 12 colunas. A marca ocupa as colunas 4 a 9 e
   atravessa as três primeiras linhas; os cartões invadem uma coluna
   dela de cada lado. */
@media (min-width: 62rem) {
  .escola__palco {
    --texto-nome-escola: var(--texto-nome-escola-largo);
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--espaco-md);
  }

  .escola__nome-linha--1 { grid-column: 1 / -1; }

  /* Uma linha com três blocos: números (1 a 3), marca (4 a 9, o meio
     exato da grade de 12) e "O que fazemos" (10 a 12).

     A marca **não enche** as seis colunas: ela é centrada nelas com
     teto de 23rem. Chegou a ocupar as seis inteiras (813px) e o Elizeu
     recusou — quem manda na altura da seção é ela, e com 813px de
     largura o desenho ficava com 724px de altura e a seção chegava a
     1941px, contra os 1485px de quando o nome atravessava o retrato.
     As seis colunas ficam como respiro em volta.

     De quebra, 368px sai de um arquivo de 633px: é redução, não
     ampliação, então o vidro fica nítido. */
  .escola__marca {
    grid-column: 4 / 10;
    grid-row: 2;
    justify-self: center;
    width: min(100%, 23rem);
  }

  /* Três colunas não comportam os dois números lado a lado: "10.000+"
     pede ~185px em Archivo Bold 45px e sobrariam ~140px de miolo por
     cartão. Empilhados, cada um fica com os 393px inteiros. */
  .numeros {
    grid-column: 1 / 4;
    grid-row: 2;
    grid-template-columns: minmax(0, 1fr);
    align-self: center;
    margin-top: 0;
  }

  .escola__oferta {
    grid-column: 10 / 13;
    grid-row: 2;
    align-self: center;
    margin-top: 0;
  }

  /* Encostada no fim da linha, como a segunda linha da referência, e não
     recuada a partir da coluna 3 (pedido do Elizeu, 2026-09-21). É o
     mesmo `end` que vale no celular. Sem margem negativa — ela existia
     para "Paes" atravessar a foto. */
  .escola__nome-linha--2 { grid-column: 3 / -1; justify-self: end; }

}


/* ===========================================================
   Depoimentos — mural de prints

   Pedido do cliente: os prints das mensagens, não texto transcrito.
   Mesmo desenho do FAQ (cabeçalho grudado à esquerda, o mural à
   direita), para a seção conversar com o resto da página. O tom é o da
   lista de avaliações da Steam: organizada. Os filtros por origem e a
   legenda de origem embaixo de cada print saíram a pedido do Elizeu.

   O mural nasce recolhido (initPrints põe data-recolhido quando o
   conteúdo passa da altura), com um degradê no pé e o botão "Ver todas
   as mensagens". Sem JavaScript, tudo aparece aberto.
   =========================================================== */

.depoimentos__grade {
  display: grid;
  gap: var(--espaco-xl);
  align-items: start;
}

.depoimentos .secao__cabecalho { margin-bottom: 0; }

@media (min-width: 62rem) {
  .depoimentos__grade {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    column-gap: var(--espaco-2xl);
  }
  .depoimentos__lado {
    position: sticky;
    top: calc(var(--cartao-empilha-topo) + var(--espaco-lg));
  }
}

/* ---------- Mural ----------
   Colunas de CSS: os prints têm alturas muito diferentes (de um
   comentário de três linhas a um post inteiro), e as colunas os
   encaixam sem buracos. */
.prints {
  columns: 2 16rem;
  column-gap: var(--espaco-md);
}

.print {
  break-inside: avoid;
  margin-bottom: var(--espaco-md);
}

.print__abrir {
  display: block;
  overflow: hidden;
  border: var(--borda) solid var(--curso-borda);
  border-radius: var(--raio-lg);
  background: var(--curso-fundo-aberto);
  transition: border-color var(--transicao-lenta), transform var(--transicao-lenta);
}

.print__abrir:hover,
.print__abrir:focus-visible {
  border-color: var(--cor-ciano);
  transform: translateY(-3px);
}

.print__abrir img {
  display: block;
  width: 100%;
  height: auto;
}

/* Recolhido: corta na altura e esmaece o pé, para o mural não virar
   uma parede. O botão aparece logo abaixo. O corte fica na moldura
   (.prints__janela), NÃO na lista: numa lista em colunas de CSS com
   altura limitada, o que sobra abre colunas novas para o lado em vez
   de descer, e nada é cortado. */
.prints__area { position: relative; }

.prints__janela[data-recolhido] {
  max-height: var(--prints-recolhido);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, currentColor 70%, transparent);
  mask-image: linear-gradient(to bottom, currentColor 70%, transparent);
}

.prints__mais { width: 100%; margin-top: var(--espaco-md); }


/* ---------- Visor ----------
   O print ampliado, na altura da tela, para dar para ler. */
.visor {
  width: min(100vw - 2rem, 56rem);
  max-width: none;
  height: calc(100dvh - 2rem);
  max-height: none;
  margin: auto;
  padding: 0;
  border: var(--borda) solid var(--curso-borda);
  border-radius: var(--raio-lg);
  background: var(--cor-fundo);
  color: var(--curso-texto);
}

.visor[open] { display: flex; flex-direction: column; }

.visor::backdrop { background: var(--visor-veu); backdrop-filter: blur(6px); }

.visor__barra {
  display: flex;
  align-items: center;
  gap: var(--espaco-md);
  padding: var(--espaco-sm) var(--espaco-md);
  border-bottom: var(--borda) solid var(--curso-borda);
}

.visor__posicao {
  margin-left: auto;
  font-family: var(--fonte-mono);
  font-size: 0.8125rem;
  color: color-mix(in srgb, var(--curso-texto) 60%, transparent);
  font-variant-numeric: tabular-nums;
}

.visor__fechar,
.visor__seta {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border: var(--borda) solid var(--curso-borda);
  border-radius: var(--raio-pill);
  background: var(--curso-botao-fundo);
  color: var(--curso-texto);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--transicao-lenta), color var(--transicao-lenta), border-color var(--transicao-lenta);
}

.visor__fechar:hover,
.visor__seta:hover {
  border-color: transparent;
  background: var(--cor-ciano);
  color: var(--curso-botao-hover-texto);
}

.visor__palco {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--espaco-sm);
  padding: var(--espaco-md);
}

.visor__img {
  justify-self: center;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: var(--raio-md);
  object-fit: contain;
}

/* No celular as setas descem para o pé, e a imagem fica com a largura
   inteira. */
@media (max-width: 48rem) {
  .visor__palco { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .visor__img { grid-column: 1 / -1; grid-row: 1; }
  .visor__seta--anterior { grid-row: 2; justify-self: start; }
  .visor__seta--proximo { grid-row: 2; justify-self: end; }
}


/* ===========================================================
   FAQ e tabela salarial
   =========================================================== */

/* Duas colunas no computador: à esquerda o cabeçalho e a saída para
   quem não achou a dúvida, grudados na tela enquanto a pessoa percorre
   as perguntas; à direita, as perguntas em cartões. */
.faq__grade {
  display: grid;
  gap: var(--espaco-xl);
  align-items: start;
}

@media (min-width: 62rem) {
  .faq__grade {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    column-gap: var(--espaco-2xl);
  }
  .faq__lado {
    position: sticky;
    top: calc(var(--cartao-empilha-topo) + var(--espaco-lg));
  }
}

.faq__contato {
  display: grid;
  justify-items: start;
  gap: var(--espaco-2xs);
  padding: var(--espaco-lg) var(--curso-respiro);
  border: var(--borda) solid var(--curso-borda);
  border-radius: var(--raio-lg);
  background: var(--curso-fundo-aberto);
}

/* 24px, o mesmo das perguntas ao lado (era 22px). */
.faq__contato-titulo {
  font-family: var(--fonte-titulo);
  font-size: 1.5rem;
  font-weight: var(--peso-titulo);
  font-stretch: 100%;
  color: var(--curso-texto);
}

.faq__contato-texto {
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-size: 1rem;
  font-stretch: 100%;
  color: color-mix(in srgb, var(--curso-texto) 60%, transparent);
}

/* O botão no feitio do bloco de compra dos cursos. */
.faq__contato .botao {
  margin-top: var(--espaco-sm);
  min-width: 15rem;
}

/* ---------- Perguntas ---------- */

.faq__lista {
  display: grid;
  gap: var(--espaco-xs);
}

.faq__item {
  border: var(--borda) solid var(--curso-borda);
  border-radius: var(--raio-lg);
  transition:
    background-color var(--transicao-lenta),
    border-color var(--transicao-lenta);
}

.faq__item[open] {
  border-color: color-mix(in srgb, var(--cor-destaque) 40%, transparent);
  background: var(--curso-fundo-aberto);
}

.faq__item summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--espaco-md);
  row-gap: var(--espaco-3xs);
  padding: var(--espaco-md) var(--curso-respiro);
  cursor: pointer;
  list-style: none;
}

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

.faq__tema {
  display: flex;
  align-items: center;
  gap: var(--espaco-xs);
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-size: 1rem;
  font-stretch: 100%;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--curso-texto) 60%, transparent);
}

.faq__tema::before {
  content: '';
  flex: none;
  width: 9px;
  height: 1px;
  background: url('../svg/iconsubtopico.svg?v=202610011458') center / contain no-repeat;
}

.faq__pergunta {
  grid-column: 1;
  font-family: var(--fonte-titulo);
  font-size: clamp(1.125rem, 1.5vw, 1.5rem);
  font-weight: var(--peso-titulo);
  font-stretch: 100%;
  line-height: 1.25;
  color: var(--curso-texto);
  transition: color var(--transicao-lenta);
}

.faq__item summary:hover .faq__pergunta { color: var(--cor-destaque); }

/* "+" num círculo; aberto, gira 45° e vira "×". */
.faq__sinal {
  grid-column: 2;
  grid-row: 1 / span 2;
  position: relative;
  width: 2.5rem;
  height: 2.5rem;
  border: var(--borda) solid var(--curso-borda);
  border-radius: var(--raio-pill);
  transition:
    transform var(--transicao-lenta),
    border-color var(--transicao-lenta),
    background-color var(--transicao-lenta);
}

.faq__sinal::before,
.faq__sinal::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.5px;
  background: var(--cor-destaque);
  transform: translate(-50%, -50%);
}

.faq__sinal::after { transform: translate(-50%, -50%) rotate(90deg); }

.faq__item summary:hover .faq__sinal { border-color: var(--cor-destaque); }

.faq__item[open] .faq__sinal {
  transform: rotate(45deg);
  border-color: var(--cor-destaque);
  background: color-mix(in srgb, var(--cor-destaque) 10%, transparent);
}

/* A resposta abre deslizando onde o navegador anima o conteúdo do
   <details> (::details-content + interpolate-size, já ligado no :root).
   Onde não anima, abre de uma vez, como antes. */
.faq__item::details-content {
  block-size: 0;
  overflow: hidden;
  transition:
    block-size var(--transicao-lenta),
    content-visibility var(--transicao-lenta) allow-discrete;
}

.faq__item[open]::details-content { block-size: auto; }

.faq__resposta {
  padding: 0 var(--curso-respiro) var(--espaco-lg);
  font-family: var(--fonte-titulo);
  font-size: 1.125rem;
  font-stretch: 100%;
  color: color-mix(in srgb, var(--curso-texto) 80%, transparent);
}

.faq__resposta > p { max-width: var(--largura-texto); }

/* Salários: tabela e avisos lado a lado — os avisos sempre à vista
   junto da tabela, como a regra de tom exige. */
.faq__salarios {
  display: grid;
  gap: var(--espaco-md);
  align-items: start;
  margin-top: var(--espaco-lg);
}

.faq__salarios .tabela-envolvente,
.faq__salarios .avisos { margin-top: 0; }

@media (min-width: 80rem) {
  .faq__salarios { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
}

/* A tabela no feitio da ficha dos cursos: cada linha é uma faixa de
   ciano a 10%, rótulo à esquerda, valor em negrito à direita. */
.tabela-envolvente {
  margin-top: var(--espaco-lg);
  overflow-x: auto;
}

.tabela-salarios {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 var(--espaco-xs);
  font-family: var(--fonte-titulo);
  font-size: 1rem;
  font-stretch: 100%;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.tabela-salarios th,
.tabela-salarios td {
  padding: var(--espaco-2xs) var(--espaco-sm);
  text-align: left;
}

.tabela-salarios thead th {
  padding-block: 0;
  font-style: italic;
  font-weight: var(--peso-normal);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--curso-texto) 60%, transparent);
}

.tabela-salarios thead th:last-child,
.tabela-salarios tbody td { text-align: right; }

.tabela-salarios tbody th,
.tabela-salarios tbody td { background: var(--curso-ficha-fundo); }

.tabela-salarios tbody th {
  border-radius: var(--raio-sm) 0 0 var(--raio-sm);
  font-weight: var(--peso-normal);
  color: color-mix(in srgb, var(--curso-texto) 80%, transparent);
}

.tabela-salarios tbody td {
  border-radius: 0 var(--raio-sm) var(--raio-sm) 0;
  font-weight: var(--peso-titulo);
  color: var(--curso-texto);
}

/* Os avisos sustentam a regra de tom: sem eles a tabela vira promessa.
   Ficam legíveis, não em letra miúda. */
.avisos {
  display: grid;
  gap: var(--espaco-2xs);
  margin-top: var(--espaco-md);
  padding: var(--espaco-md) var(--curso-respiro);
  border: var(--borda) solid var(--curso-borda);
  border-left: 2px solid var(--cor-destaque);
  border-radius: var(--raio-sm);
  background: var(--curso-fundo-aberto);
}

.avisos li {
  position: relative;
  padding-left: 22px;
  font-family: var(--fonte-titulo);
  font-size: 1rem;
  font-stretch: 100%;
  line-height: 1.45;
  color: color-mix(in srgb, var(--curso-texto) 80%, transparent);
}

.avisos li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 9px;
  height: 1px;
  background: url('../svg/iconsubtopico.svg?v=202610011458') center / contain no-repeat;
}


/* ===========================================================
   Rodapé
   =========================================================== */

.rodape { border-top: var(--borda) solid var(--curso-borda); }

.rodape__grade {
  display: grid;
  gap: var(--espaco-2xl);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.rodape__sobre p {
  max-width: 34ch;
  font-family: var(--fonte-titulo);
  font-size: 1.125rem;
  font-stretch: 100%;
  color: color-mix(in srgb, var(--curso-texto) 80%, transparent);
}

.rodape__titulo { margin-bottom: var(--espaco-sm); }

.rodape__contato ul,
.rodape__nav ul,
.redes { display: grid; gap: var(--espaco-2xs); }

.redes { margin-top: var(--espaco-lg); }

.rodape a {
  font-family: var(--fonte-titulo);
  font-size: 1.125rem;
  font-stretch: 100%;
  color: var(--curso-texto);
}

.rodape a:hover { color: var(--cor-destaque); }

.rede { display: inline-flex; align-items: center; gap: var(--espaco-2xs); }

/* A mask-image vem do atributo style, no próprio elemento, e não de
   uma custom property: um url() dentro de custom property é resolvido
   contra a folha de estilo onde o var() é consumido — assets/css/ —
   e o ícone dava 404. Só as longhands aqui: a shorthand `mask`
   zeraria a mask-image. */
.rede__icone {
  width: 1.1rem; height: 1.1rem;
  background: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.rodape__rotulo {
  display: block;
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-size: 1rem;
  font-stretch: 100%;
  color: color-mix(in srgb, var(--curso-texto) 60%, transparent);
}

.rodape__prazo {
  margin-top: var(--espaco-md);
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-size: 1rem;
  font-stretch: 100%;
  color: color-mix(in srgb, var(--curso-texto) 60%, transparent);
}

/* Wordmark gigante fecha a página, sangrando na largura toda. No feitio
   do título das seções: Archivo Bold, sem caixa alta, sem condensar. */
.rodape__wordmark {
  margin-top: var(--espaco-2xl);
  font-family: var(--fonte-titulo);
  font-size: clamp(3rem, 14vw, 12rem);
  font-weight: var(--peso-titulo);
  font-stretch: 100%;
  line-height: 0.9;
  letter-spacing: var(--letras-titulo);
  color: var(--curso-texto);
  opacity: 0.09;
  user-select: none;
  white-space: nowrap;
}

.rodape__legal {
  margin-top: var(--espaco-lg);
  padding-top: var(--espaco-md);
  border-top: var(--borda) solid var(--curso-borda);
}

.rodape__marca,
.rodape__copyright {
  max-width: var(--largura-texto);
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-size: 0.875rem;
  font-stretch: 100%;
  color: color-mix(in srgb, var(--curso-texto) 60%, transparent);
}

.rodape__copyright { margin-top: var(--espaco-2xs); }


/* ===========================================================
   Cards de ementa — Academia SAP

   Cada card é a própria imagem (1760×675, já escurecida à esquerda
   pelo ilustrador) com o texto por cima. A altura é fixa no desktop,
   medida pelo módulo com mais conteúdo, para todos ficarem iguais.
   No celular a coluna estreita multiplica as linhas, então lá o card
   cresce e a imagem vira fundo atrás do texto.
   =========================================================== */

.cartoes {
  display: grid;
  gap: var(--cartao-empilha-passo);
  margin-top: var(--espaco-xl);
}

/* Onde os cards empilham, o vão na rolagem é o grande: o de cima gruda
   e fica parado enquanto o seguinte ainda vem subindo. */
@media (min-width: 62rem) {
  .cartoes { gap: var(--cartao-empilha-vao); }
}

.cartao {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--cartao-borda);
  border-radius: var(--raio-md);
  background: var(--cartao-fundo);
  transition: height var(--transicao-cartao);
}

.js .cartao { height: var(--cartao-altura-fechada); }
.cartao[data-aberto] { height: auto; }

.cartao__fundo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Centralizada: fechada mostra o miolo da arte, aberta mostra tudo. */
  object-position: center;
}

/* Desvanecimento no pé do card fechado: avisa que há mais conteúdo e
   evita a linha cortada ao meio. Some quando o card abre. */
.cartao::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 140px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--cartao-fundo) 60%);
  /* opacidade, não display: display não anima. */
  transition: opacity var(--transicao-cartao);
}

.cartao[data-aberto]::after { opacity: 0; }

/* Módulo ainda sem arte. O painel deixa criar o módulo antes de a
   imagem chegar, e sem isto o card ficaria transparente, com o texto
   sobre o fundo da página. O fio ciano dá a ele a mesma borda dos
   outros, já que não há arte para delimitá-lo. */
.cartao--sem-arte {
  background:
    linear-gradient(to bottom right, var(--cor-fundo-2), var(--cartao-fundo));
}

/* Fechamento automático durante a rolagem: sem transição, porque o
   card já está coberto pelo seguinte e a altura é compensada no mesmo
   quadro. Com transição, a compensação de rolagem não acompanharia. */
/* Durante o fechamento automático quem controla a altura é o JS, quadro
   a quadro, porque a compensação de rolagem tem de andar junto. A
   transição de altura sai do caminho — mas a do ::after fica, para o
   desvanecimento do pé voltar no mesmo ritmo. */
.cartao--fechando { transition: none; }

/* Botão "Ler mais". É o <summary> do <details>, então abre e fecha sem
   JavaScript; o script só serve para fechar os outros cards. */
.cartao__ler {
  position: absolute;
  left: var(--espaco-xl);
  bottom: var(--espaco-lg);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-2xs);
  border: 1px solid var(--cartao-borda);
  border-radius: var(--raio-pill);
  background: color-mix(in srgb, var(--cartao-fundo) 70%, transparent);
  backdrop-filter: blur(6px);
  color: var(--cartao-texto);
  /* Tipografia e altura do padrão .botao; o fundo escuro translúcido
     fica, porque o botão está sobre a arte do módulo. */
  min-height: 2.75rem;
  padding: var(--espaco-xs) var(--espaco-lg);
  font-family: var(--fonte-titulo);
  font-size: 1rem;
  font-stretch: 100%;
  font-weight: var(--peso-normal);
  line-height: 1.2;
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
  transition: border-color var(--transicao), background-color var(--transicao);
}

.cartao__ler:hover { border-color: var(--cor-ciano); }

.cartao__ler-menos { display: none; }
.cartao[data-aberto] .cartao__ler-mais { display: none; }
.cartao[data-aberto] .cartao__ler-menos { display: inline; }

.cartao__corpo {
  position: relative;
  padding: var(--espaco-xl);
}

/* Contagem em fração, encostada na direita e centrada na altura.
   Fica fora do fluxo do texto para não empurrar a ementa. */
.cartao__contagem {
  position: absolute;
  right: var(--espaco-xl);
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  justify-items: center;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-normal);
  font-size: 36px;
  font-stretch: 100%;
  line-height: 1.15;
  color: var(--cartao-texto);
  font-variant-numeric: tabular-nums;
}

.cartao__contagem-atual {
  padding-bottom: 4px;
  border-bottom: 1px solid currentColor;
}

.cartao__contagem-total { padding-top: 4px; }

.cartao__texto { min-width: 0; }

.cartao__titulo {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: 38px;
  font-stretch: 100%;
  line-height: 1.22;
  letter-spacing: normal;
  text-transform: none;
  color: var(--cartao-texto);
}

.cartao__topicos {
  margin-top: var(--espaco-md);
  color: var(--cartao-texto);
}

/* Nível 1: losango. Nível 2: traço. Os dois vêm dos SVGs enviados,
   referenciados daqui — o caminho é relativo a esta folha de estilo. */
.cartao__topicos > li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-normal);
  font-size: 18px;
  font-stretch: 100%;
  line-height: 1.45;
  opacity: 0.8;
}

.cartao__topicos > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 10px;
  height: 10px;
  background: url('../svg/icontopico.svg?v=202610011458') center / contain no-repeat;
}

.cartao__topicos ul {
  margin-top: 8px;
  margin-bottom: 12px;
}

.cartao__topicos ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
  font-family: var(--fonte-titulo);
  font-style: italic;
  font-weight: var(--peso-normal);
  font-size: 16px;
  font-stretch: 100%;
  line-height: 1.45;
  opacity: 0.75; /* 0.8 do pai x 0.75 = 60% do total */
}

.cartao__topicos ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 9px;
  height: 1px;
  background: url('../svg/iconsubtopico.svg?v=202610011458') center / contain no-repeat;
}

@media (min-width: 62rem) {
  .cartao[data-aberto] { height: var(--cartao-altura); }
  .cartao__corpo { height: 100%; align-content: start; }

  /* ---------- Empilhamento na rolagem ----------
     Cada card gruda um pouco mais abaixo que o anterior, então o
     seguinte sobe por cima e deixa só uma faixa do anterior à mostra.
     É CSS puro: funciona com os efeitos de entrada desligados e sem
     depender de JavaScript. */
  /* Quem gruda é o <li>; o card é o <details> dentro dele. O passo de
     20px é o espaço que fica entre um card e o de baixo na pilha. */
  /* O degrau vem do --i que o painel escreve em cada <li>, e não mais
     de uma fila de `:nth-child()`. Aquela fila parava no 14 e tinha de
     crescer à mão sempre que uma ementa ganhasse módulo — agora o
     cliente pode criar quantos quiser pelo painel e a conta fecha
     sozinha. O `--i: 0` do primeiro deixa o `top` no valor base. */
  .cartoes > li {
    position: sticky;
    top: calc(var(--cartao-empilha-topo) + var(--cartao-empilha-passo) * var(--i, 0));
  }

  /* O texto não passa da metade escurecida da arte: além daí ele cai
     sobre a parte clara da foto e fica ilegível. */
  .cartao__texto { max-width: 46%; }

  /* Botão no canto inferior DIREITO, sobre a arte, fora da coluna de
     texto. À esquerda ele encostava na última linha das ementas mais
     longas (a "Contas a receber" da Academia: 0px de folga em 1920 e
     -38px em 1024, medido) depois que o botão ganhou os 44px do padrão. */
  .cartao__ler { left: auto; right: var(--espaco-xl); }

  /* Como a coluna encolhe junto com a tela, o título acompanha — em
     38px fixos ele quebraria em três linhas abaixo de ~1500px.
     Os 38px pedidos valem na largura cheia, onde o clamp satura. */
  .cartao__titulo { font-size: clamp(1.5rem, 2.5vw, 38px); }
}

@media (max-width: 61.9375rem) {
  /* Sem altura travada: a coluna estreita multiplica as linhas e o
     conteúdo seria cortado. A imagem fica como fundo. */
  .cartao__fundo { opacity: 0.35; object-position: center; }
  /* O botão "Ler mais / Ler menos" fica solto no pé do card. Aqui o card
     aberto cresce com o conteúdo, então o conteúdo reserva embaixo a
     altura do botão (2.75rem) mais o respiro: sem isso o botão caía em
     cima das últimas linhas (bug relatado pelo Elizeu). */
  .cartao__corpo {
    padding: var(--espaco-lg) var(--espaco-lg) calc(var(--espaco-lg) * 2 + 2.75rem);
  }
  /* Na mesma margem do texto (era --espaco-xl, desalinhado). */
  .cartao__ler { left: var(--espaco-lg); bottom: var(--espaco-lg); }
  /* Card alto e texto de largura cheia: centrada na altura, a fração
     cairia no meio da ementa. Vai para o alto, ao lado do título. */
  .cartao__contagem {
    top: var(--espaco-lg);
    right: var(--espaco-lg);
    transform: none;
    font-size: 26px;
  }
  .cartao__titulo { padding-right: 4rem; }
  .cartao__titulo { font-size: clamp(1.5rem, 5.5vw, 2.375rem); }
  /* A quebra escolhida à mão só vale onde há largura para ela. */
  .cartao__titulo br { display: none; }
}


/* ===========================================================
   Movimento

   Os efeitos de entrada estão desligados (ANIMAR_ENTRADA no main.js).
   Por isso não há mais regra de CSS escondendo conteúdo antes da
   animação: a página nasce inteira e visível. Ao religar, o próprio
   GSAP define o estado inicial com gsap.set().
   =========================================================== */

/* ---------- Peças dos efeitos de entrada (initEntradas no main.js) ---------- */

/* Scanner: o fio de luz que desce pelo card revelando-o. */
.revelar__fio {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 5;
  height: 2px;
  transform: translateY(-100%);
  background: linear-gradient(90deg, transparent, var(--cor-ciano) 20%, var(--cor-ciano) 80%, transparent);
  box-shadow: 0 0 16px 2px color-mix(in srgb, var(--cor-ciano) 60%, transparent);
  pointer-events: none;
}

/* Decode: a largura fica presa no tamanho do texto final enquanto os
   caracteres sorteados passam, senão o rótulo tremeria. */
.decode {
  display: inline-block;
  white-space: nowrap;
}

/* Letras do wordmark, viradas de pé uma a uma. */
.rodape__wordmark .letra {
  display: inline-block;
  white-space: pre;
}

@media (prefers-reduced-motion: reduce) {
  .faixa__trilho { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}