/* ============================================================
   LANDING — CURSO DE BENZIMENTO
   Só o que a página precisa além do Sistema Raízes.
   Nenhum valor cru: tudo sai dos tokens do sistema.
   ============================================================ */

/* ---------- HEADER ------------------------------------------ */

.cabecalho {
  position: sticky; top: 0; z-index: 50;
  padding: var(--esp-4) 0;
  background: color-mix(in srgb, var(--bg-primary) 92%, transparent);
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--dur-hover) var(--ease-hover),
    border-color var(--dur-hover) var(--ease-hover),
    padding var(--dur-menu) var(--ease-out);
}
.cabecalho[data-encolhido] {
  padding: var(--esp-2) 0;
  background: var(--bg-primary);
  border-bottom-color: var(--border-light);
}
.cabecalho__barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--esp-6);
}
.cabecalho__marca {
  display: inline-flex; align-items: center; gap: var(--esp-3);
  text-decoration: none; color: var(--text-primary); flex: none;
}
.cabecalho__marca svg { color: var(--terra-700); flex: none; }
.cabecalho__nome {
  font-family: var(--fonte-display);
  font-weight: var(--w-display);
  font-size: .8125rem; line-height: 1.1;
  letter-spacing: .015em; text-transform: uppercase;
}
.cabecalho__assinatura {
  display: block;
  font-family: var(--fonte-texto);
  font-weight: var(--w-corpo);
  font-size: .625rem; letter-spacing: .16em;
  color: var(--text-muted); margin-top: 2px;
}
.cabecalho__nav { display: flex; align-items: center; gap: var(--esp-1); list-style: none; margin: 0; padding: 0; }
.cabecalho__acoes { display: flex; align-items: center; gap: var(--esp-3); flex: none; }
.cabecalho__botao { min-height: 2.625rem; padding-inline: var(--esp-5); }

.abrir-menu {
  display: none;
  width: 2.75rem; height: 2.75rem;
  align-items: center; justify-content: center;
  border: 1px solid var(--border-light);
  border-radius: var(--raio-pill);
  background: transparent; color: var(--text-primary);
  cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease-hover);
}
.abrir-menu:focus-visible { outline: var(--traco-grosso) solid var(--foco-anel); outline-offset: 2px; }

/* O botão de menu entra exatamente onde a pílula sai (1080px).
   Antes eles estavam em pontos diferentes e sobrava uma faixa
   sem navegação nenhuma. */
@media (max-width: 1080px) {
  .cabecalho__nav { display: none; }
  .abrir-menu { display: inline-flex; }
}
@media (max-width: 760px) {
  .cabecalho__botao span { display: none; }
  .cabecalho__botao { width: 2.75rem; padding: 0; }
}
@media (max-width: 620px) {
  /* Dois botões de 44px exigem largura: a assinatura sai, o nome encolhe. */
  .cabecalho__barra { gap: var(--esp-3); }
  .cabecalho__marca { min-width: 0; }
  .cabecalho__marca svg { width: 32px; height: 32px; }
  .cabecalho__assinatura { display: none; }
  .cabecalho__nome { font-size: .75rem; }
}

/* Menu mobile — painel que desce, não sobreposição da página inteira */
.menu-movel {
  position: fixed; inset: 0; z-index: 60;
  display: grid; grid-template-rows: auto 1fr;
  visibility: hidden;
}
.menu-movel[data-aberto] { visibility: visible; }
.menu-movel__veu {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--marrom-900) 55%, transparent);
  opacity: 0;
  transition: opacity var(--dur-painel) var(--ease-out);
}
.menu-movel[data-aberto] .menu-movel__veu { opacity: 1; }
.menu-movel__painel {
  position: relative;
  background: var(--bg-deep);
  color: var(--text-on-dark);
  padding: var(--esp-5) var(--margem-externa) var(--esp-8);
  border-radius: 0 0 var(--raio-lg) var(--raio-lg);
  transform: translateY(-100%);
  transition: transform var(--dur-painel) var(--ease-drawer);
}
.menu-movel[data-aberto] .menu-movel__painel { transform: translateY(0); }
.menu-movel__topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--esp-7); }
.menu-movel__lista { list-style: none; margin: 0 0 var(--esp-7); padding: 0; display: flex; flex-direction: column; }
.menu-movel__lista a {
  display: block;
  padding: var(--esp-4) 0;
  border-bottom: 1px solid var(--border-on-dark);
  font-family: var(--fonte-display);
  font-size: 1.5rem; font-weight: var(--w-titulo);
  letter-spacing: -.01em;
  color: var(--creme-300); text-decoration: none;
}
.menu-movel__lista a:focus-visible { outline: 2px solid var(--foco-anel); outline-offset: 2px; }
.fechar-menu {
  width: 2.75rem; height: 2.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-on-dark);
  border-radius: var(--raio-pill);
  background: transparent; color: var(--creme-100); cursor: pointer;
}
.fechar-menu:focus-visible { outline: var(--traco-grosso) solid var(--foco-anel); outline-offset: 2px; }

/* ---------- HERO EM TELA CHEIA ------------------------------
   Fotografia sangrando por trás de tudo, cabeçalho e conteúdo
   por cima. O cabeçalho passa a ser fixo — sticky ocuparia
   espaço no fluxo e empurraria a imagem para baixo dele.
   ------------------------------------------------------------ */

.hero-full {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-block: clamp(7rem, 14vh, 11rem) clamp(3rem, 7vh, 5.5rem);
  overflow: hidden;
}
.hero-full__midia { position: absolute; inset: 0; z-index: -2; }
.hero-full__midia img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 42%; }

/* Véu: escurece da esquerda para a direita e no topo, onde ficam
   o texto e o cabeçalho. Medido — creme sobre a parede clara da
   foto fica em 9,9:1. */
.hero-full__veu {
  position: absolute; inset: 0; z-index: -1;
  background:
    /* Dimensionado a partir da extensão real dos textos: o título
       chega a 52% da largura, o parágrafo a 44%. Até lá o véu
       precisa segurar mesmo sobre os pontos mais claros da foto —
       há um branco quase puro na camisa dela dentro dessa faixa. */
    linear-gradient(100deg,
      color-mix(in srgb, var(--marrom-900) 86%, transparent) 0%,
      color-mix(in srgb, var(--marrom-900) 78%, transparent) 32%,
      color-mix(in srgb, var(--marrom-900) 70%, transparent) 48%,
      color-mix(in srgb, var(--marrom-900) 38%, transparent) 62%,
      transparent 84%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--marrom-900) 38%, transparent) 0%,
      transparent 24%),
    linear-gradient(0deg,
      color-mix(in srgb, var(--marrom-900) 30%, transparent) 0%,
      transparent 26%);
}

.hero-full__conteudo { position: relative; z-index: 1; width: 100%; }
.hero-full__eyebrow { color: var(--ouro-400); }
.hero-full__titulo {
  margin-top: var(--esp-5);
  font-size: clamp(2.75rem, 1.2rem + 5.6vw, 6rem);
  color: var(--creme-100);
  max-width: 16ch;
}
.hero-full__sub {
  margin: var(--gap-titulo-texto) 0 0;
  font-size: var(--t-body-lg);
  font-weight: var(--w-medio);
  color: var(--creme-100);
  max-width: 34ch;
}
.hero-full__apoio {
  margin: var(--esp-4) 0 0;
  font-size: var(--t-body);
  line-height: var(--lh-corpo);
  color: color-mix(in srgb, var(--creme-100) 86%, var(--marrom-900));
  max-width: 46ch;
}
.hero-full__acoes { margin-top: var(--gap-texto-cta); }

/* Notas em pastilhas de vidro, como as fichas da referência */
.hero-full__notas {
  list-style: none; margin: var(--esp-7) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--esp-3);
}
.hero-full__notas li {
  display: inline-flex; align-items: center; gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-5);
  border-radius: var(--raio-pill);
  font-size: var(--t-small);
  color: var(--creme-100);
  background: color-mix(in srgb, var(--marrom-900) 46%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
          backdrop-filter: blur(16px) saturate(170%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #FFFFFF 26%, transparent),
    0 8px 22px -16px color-mix(in srgb, var(--marrom-900) 70%, transparent);
}
.hero-full__notas .ico { color: var(--ouro-400); flex: none; }

@media (max-width: 760px) {
  .hero-full { min-height: 94svh; align-items: flex-end; }
  .hero-full__midia img { object-position: 50% 38%; }
  .hero-full__veu {
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--marrom-900) 58%, transparent) 0%,
        color-mix(in srgb, var(--marrom-900) 20%, transparent) 28%,
        color-mix(in srgb, var(--marrom-900) 72%, transparent) 62%,
        color-mix(in srgb, var(--marrom-900) 90%, transparent) 100%);
  }
  .hero-full__notas li { width: 100%; }
}

/* ---------- O CURSO — eixos editoriais ---------------------- */

.eixos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--border-light);
}
.eixo {
  display: flex; flex-direction: column; gap: var(--esp-4);
  padding: var(--esp-7) var(--esp-6) var(--esp-7) 0;
  border-right: 1px solid var(--border-light);
}
.eixo:last-child { border-right: 0; padding-right: 0; }
.eixo:not(:first-child) { padding-left: var(--esp-6); }
.eixo__ord {
  font-family: var(--fonte-display);
  font-size: var(--t-caption);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-accent);
  margin: 0;
}
.eixo__titulo {
  font-family: var(--fonte-display);
  font-size: var(--t-h3); line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3); font-weight: var(--w-titulo);
  color: var(--title-primary); margin: 0;
}
@media (max-width: 860px) {
  .eixos { grid-template-columns: 1fr; }
  .eixo, .eixo:not(:first-child) {
    border-right: 0; border-bottom: 1px solid var(--border-light);
    padding: var(--esp-6) 0;
  }
  .eixo:last-child { border-bottom: 0; }
}

/* ---------- CONTRAPARTIDA -----------------------------------
   Vidro de verdade, não só desfoque.

   Desfoque com tinta por cima dá o "Blur" chapado. O que faz ler
   como vidro são quatro camadas somadas:
     1. matéria atrás  — padrão de folhas + manchas de cor, para
                         o vidro ter o que refratar;
     2. corpo          — backdrop blur + saturação + brilho;
     3. especular      — clarão suave no topo e no canto superior;
     4. aro            — filete de 1px que varia de luz ao redor,
                         claro em cima-esquerda, apagado embaixo.
   ------------------------------------------------------------ */

:root { --raio-vidro: clamp(1.25rem, 2.4vw, 2.125rem); }

.contrapartida {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--raio-vidro);
  background: var(--bg-terra);
  padding: clamp(1.5rem, 3.2vw, 3.25rem);
}

/* 1a. Manchas de cor da paleta — é delas que vem o brilho vivo
       dentro do vidro. Sem isso o painel fica morto. */
.contrapartida::before {
  content: "";
  position: absolute; inset: -25%;
  z-index: 0;
  background:
    radial-gradient(34% 42% at 16% 10%, color-mix(in srgb, var(--ouro-400) 45%, transparent), transparent 70%),
    radial-gradient(40% 48% at 92% 88%, color-mix(in srgb, var(--mata-900) 62%, transparent), transparent 74%),
    radial-gradient(32% 40% at 74% 6%,  color-mix(in srgb, var(--terra-500) 75%, transparent), transparent 74%),
    radial-gradient(30% 38% at 8% 86%,  color-mix(in srgb, var(--verde-600) 55%, transparent), transparent 74%);
  filter: blur(14px);
}

/* 1b. Padrão de folhas da identidade por cima das manchas */
.contrapartida.tex-vegetal::after {
  opacity: .26;
  background-size: 190px 270px;
  border-radius: inherit;
}

/* 2. Corpo do vidro */
.contrapartida__painel {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: start;
  padding: clamp(1.75rem, 3.4vw, 3.5rem);
  border-radius: var(--raio-vidro);

  background: color-mix(in srgb, var(--marrom-900) 52%, transparent);
  -webkit-backdrop-filter: blur(30px) saturate(190%) brightness(1.06);
          backdrop-filter: blur(30px) saturate(190%) brightness(1.06);

  box-shadow:
    /* espessura interna: luz que entra por cima, sombra que assenta embaixo */
    inset 0 22px 44px -30px color-mix(in srgb, #FFFFFF 60%, transparent),
    inset 0 -26px 48px -36px color-mix(in srgb, var(--marrom-900) 72%, #000),
    /* ambiente: largo e fraco, nunca sombra dura */
    0 28px 64px -34px color-mix(in srgb, var(--marrom-900) 85%, #000);
}
@media (max-width: 900px) {
  .contrapartida__painel { grid-template-columns: 1fr; gap: var(--esp-8); }
}

/* 3. Especular: clarão no topo e no canto superior esquerdo */
.contrapartida__painel::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, color-mix(in srgb, #FFFFFF 22%, transparent) 0%, transparent 24%),
    radial-gradient(130% 78% at 10% -14%, color-mix(in srgb, #FFFFFF 26%, transparent), transparent 62%);
}

/* 4. Aro de 1px com luz variável — o detalhe que separa vidro de
      painel fosco. Borda pintada em gradiente e recortada por máscara. */
.contrapartida__painel::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  padding: 1px;
  background: linear-gradient(140deg,
    color-mix(in srgb, #FFFFFF 62%, transparent) 0%,
    color-mix(in srgb, #FFFFFF 14%, transparent) 28%,
    transparent 52%,
    color-mix(in srgb, #FFFFFF 10%, transparent) 76%,
    color-mix(in srgb, #FFFFFF 34%, transparent) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

/* O conteúdo fica acima das camadas de vidro */
.contrapartida__texto, .contrapartida__incluido { position: relative; z-index: 1; }

.contrapartida__texto > .t-eyebrow + .t-h2 { margin-top: var(--esp-4); }
.contrapartida__texto > .t-h2 + p { margin-top: var(--gap-titulo-texto); }
.contrapartida__texto .destaque-calmo { margin-top: var(--esp-6); }
.contrapartida__incluido > .t-eyebrow { margin-bottom: var(--esp-2); }

/* Sobre vidro, texto apagado perde contraste: a mancha dourada atrás
   clareia o fundo e o corpo em Text/Secondary cairia para 3,4:1.
   Aqui o corpo vai quase em creme cheio. */
.contrapartida__texto p.t-body { color: color-mix(in srgb, var(--creme-100) 92%, var(--marrom-900)); }

/* Lista enxuta: sete linhas, filete entre elas. A altura passa a
   bater com a da coluna de texto — era esse desencontro que abria
   o vão nas versões anteriores. */
.incluido { list-style: none; margin: 0; padding: 0; }
.incluido__item {
  display: flex; align-items: center; gap: var(--esp-4);
  padding-block: var(--esp-4);
  border-top: 1px solid color-mix(in srgb, #FFFFFF 16%, transparent);
  font-family: var(--fonte-display);
  font-size: 1.0625rem;
  font-weight: var(--w-medio);
  line-height: 1.3;
  color: var(--title-primary);
}
.incluido__item:last-child { border-bottom: 1px solid color-mix(in srgb, #FFFFFF 16%, transparent); }
.incluido__ico { flex: none; color: var(--ouro-400); }

@media (max-width: 560px) {
  .incluido__item { font-size: 1rem; gap: var(--esp-3); }
}

/* Sem vidro no navegador, ou transparência reduzida: painel sólido.
   As camadas decorativas saem junto — sem desfoque elas só sujam. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .contrapartida__painel { background: var(--bg-deep); box-shadow: none; }
  .contrapartida__painel::before { display: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .contrapartida__painel {
    background: var(--bg-deep);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .contrapartida__painel::before { display: none; }
  .contrapartida::before { display: none; }
}

/* ---------- YASMIN ------------------------------------------ */

.mentora-bloco {
  display: grid;
  grid-template-columns: 0.9fr 1fr;
  gap: clamp(2.5rem, 5vw, 5.5rem);
  align-items: center;
}
@media (max-width: 900px) { .mentora-bloco { grid-template-columns: 1fr; } }
.mentora-bloco__retrato .foto { border-radius: var(--raio-arco); }
.mentora-bloco__texto { display: flex; flex-direction: column; }
.mentora-bloco__texto > .t-eyebrow + .t-h1 { margin-top: var(--esp-4); }
.mentora-bloco__texto > .t-h1 + p { margin-top: var(--gap-titulo-texto); }
.mentora-bloco__texto > .acoes { margin-top: var(--gap-texto-cta); }

/* ---------- GALERIA ----------------------------------------- */

/* ---------- GALERIA EM MOSAICO -----------------------------
   O título deixa de ser cabeçalho acima da grade e vira uma peça
   dentro dela, como na referência. Duas colunas de alturas iguais;
   a foto da coluna curta cresce para absorver a diferença, então
   nenhuma imagem precisa de recorte arbitrário para a grade fechar.
   ------------------------------------------------------------ */

.mosaico {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--gap-grid);
  align-items: stretch;
}
.mosaico__coluna {
  display: flex; flex-direction: column;
  gap: var(--gap-grid);
  min-width: 0;
}

/* Bloco de título: superfície cheia, mesmo raio das fotos */
.mosaico__titulo {
  position: relative;
  display: flex; flex-direction: column; gap: var(--esp-3);
  padding: clamp(1.5rem, 2.4vw, 2.25rem);
  border-radius: var(--raio-midia-grande);
  background: var(--bg-deep);
  color: var(--text-on-dark);
}
.mosaico__titulo .t-h2 { margin: 0; }
.mosaico__titulo .t-small { max-width: 30ch; }
.mosaico__selo {
  position: absolute;
  top: clamp(1.5rem, 2.4vw, 2.25rem);
  right: clamp(1.5rem, 2.4vw, 2.25rem);
  height: 2.5rem;
  opacity: .9;
}

/* Peças: herdam o hover e o raio da galeria */
.mosaico__peca {
  position: relative;
  padding: 0; border: 0; background: none; cursor: zoom-in;
  border-radius: var(--raio-midia-grande);
  overflow: hidden;
  transition: transform var(--dur-hover) var(--ease-out);
}
.mosaico__peca:focus-visible { outline: var(--traco-grosso) solid var(--foco-anel); outline-offset: 3px; }
.mosaico__peca .foto { position: absolute; inset: 0; border-radius: inherit; }
/* Na coluna curta a foto estica para as duas colunas fecharem juntas */
.mosaico__peca--flex { flex: 1; min-height: 16rem; }

.mosaico__peca img { transition: transform var(--dur-painel) var(--ease-out); will-change: transform; }
@media (hover: hover) and (pointer: fine) {
  .mosaico__peca:hover img { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .mosaico__peca img { transition: none; }
  .mosaico__peca:hover img { transform: none; }
}

@media (max-width: 860px) {
  .mosaico { grid-template-columns: 1fr; }
  .mosaico__peca--flex { flex: none; aspect-ratio: 3 / 2; min-height: 0; }
  .mosaico__selo { height: 2rem; }
}

/* Lightbox — leitura da imagem, sem galeria dentro da galeria */
.visor {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center;
  padding: var(--esp-5);
  visibility: hidden;
}
.visor[data-aberto] { visibility: visible; }
.visor__veu {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--marrom-900) 90%, #000);
  opacity: 0;
  transition: opacity var(--dur-painel) var(--ease-out);
}
.visor[data-aberto] .visor__veu { opacity: 1; }
.visor__quadro {
  position: relative;
  max-width: min(60rem, 100%); max-height: 100%;
  opacity: 0; transform: scale(.96);
  transition: opacity var(--dur-painel) var(--ease-out), transform var(--dur-painel) var(--ease-out);
}
.visor[data-aberto] .visor__quadro { opacity: 1; transform: scale(1); }
.visor__quadro img {
  max-width: 100%; max-height: 80vh;
  width: auto; height: auto;
  border-radius: var(--raio-md);
}
.visor__controles {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--esp-4); margin-top: var(--esp-5);
}
.visor__conta { font-size: var(--t-caption); letter-spacing: .14em; color: var(--text-on-dark-sec); }
.visor__btn {
  width: 2.75rem; height: 2.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-on-dark);
  border-radius: var(--raio-pill);
  background: transparent; color: var(--creme-100); cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease-hover);
}
.visor__btn:focus-visible { outline: var(--traco-grosso) solid var(--foco-anel); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .visor__btn:hover { background: color-mix(in srgb, var(--creme-100) 14%, transparent); }
}
.visor__fechar { position: absolute; top: var(--esp-5); right: var(--esp-5); z-index: 2; }

/* ---------- COMO FUNCIONA · LINHA DO TEMPO ------------------
   Uma régua contínua atravessa os três passos; cada passo é um
   card de vidro assentado nela, com um nó marcando a posição.
   O primeiro vem elevado e em terracota — é o passo que a pessoa
   dá agora, e é o que leva ao WhatsApp.

   A seção fica clara de propósito: a página já tem blocos escuros
   suficientes. Para o vidro ter o que refratar, o fundo recebe
   manchas de cor muito suaves em vez de virar mais uma faixa densa.
   ------------------------------------------------------------ */

#como-funciona { position: relative; isolation: isolate; overflow: hidden; }

.linha-tempo__campo {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(38% 52% at 12% 78%, color-mix(in srgb, var(--ouro-400) 26%, transparent), transparent 72%),
    radial-gradient(34% 46% at 88% 22%, color-mix(in srgb, var(--verde-400) 24%, transparent), transparent 74%),
    radial-gradient(30% 42% at 58% 92%, color-mix(in srgb, var(--terra-500) 18%, transparent), transparent 74%);
  filter: blur(8px);
}

.linha-tempo { position: relative; margin-top: var(--esp-6); }

.linha-tempo__lista {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-grid);
  align-items: start;
}

.etapa {
  /* A régua é construída a partir destas duas medidas, não de
     números soltos: o cabeçalho tem altura fixa e o filete nasce
     na base dele, então tudo alinha sozinho. */
  --pad-etapa: clamp(1.25rem, 2vw, 1.75rem);
  --alt-cabeca: 11rem;

  position: relative;
  display: flex; flex-direction: column;
  padding: var(--pad-etapa);
  border-radius: var(--raio-midia-grande);

  background: color-mix(in srgb, var(--creme-100) 58%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(185%);
          backdrop-filter: blur(22px) saturate(185%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #FFFFFF 75%, transparent),
    0 16px 36px -26px color-mix(in srgb, var(--marrom-900) 55%, transparent);
}

.etapa::after {
  content: "";
  position: absolute; inset: 0; z-index: 3;
  border-radius: inherit; pointer-events: none; padding: 1px;
  background: linear-gradient(150deg,
    color-mix(in srgb, #FFFFFF 80%, transparent) 0%,
    color-mix(in srgb, #FFFFFF 20%, transparent) 34%,
    transparent 58%,
    color-mix(in srgb, #FFFFFF 30%, transparent) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

/* Cabeçalho de altura fixa, conteúdo alinhado pela base.
   As margens negativas levam o filete até as bordas do card,
   para o trecho que atravessa o vão encostar certinho. */
.etapa__cabeca {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: var(--esp-2);
  height: var(--alt-cabeca);
  margin-inline: calc(var(--pad-etapa) * -1);
  padding-inline: var(--pad-etapa);
  border-bottom: 1px solid color-mix(in srgb, var(--terra-500) 48%, transparent);
}

/* Trecho da régua que atravessa o vão até o próximo passo */
.etapa:not(:last-child) .etapa__cabeca::before {
  content: "";
  position: absolute;
  left: 100%; bottom: -1px;
  width: var(--gap-grid); height: 1px;
  background: color-mix(in srgb, var(--terra-500) 48%, transparent);
}

/* Nó assentado sobre a régua */
.etapa__cabeca::after {
  content: "";
  position: absolute;
  left: var(--pad-etapa); bottom: -0.4375rem;
  width: 0.875rem; height: 0.875rem;
  border-radius: 50%;
  background: var(--surface-light);
  border: 2px solid var(--terra-500);
}

.etapa__rotulo {
  margin: 0;
  font-size: var(--t-caption);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.etapa__num {
  margin: 0;
  font-family: var(--fonte-display);
  font-size: clamp(2.75rem, 1.8rem + 3vw, 4.25rem);
  line-height: .86;
  letter-spacing: -.04em;
  font-weight: var(--w-display);
  color: color-mix(in srgb, var(--terra-500) 38%, transparent);
}
.etapa__titulo {
  margin: 0;
  display: flex; align-items: center; gap: var(--esp-3);
  font-family: var(--fonte-display);
  font-size: var(--t-h3); line-height: var(--lh-h3);
  font-weight: var(--w-titulo);
  color: var(--title-primary);
}
.etapa__ico { color: var(--text-accent); flex: none; }
.etapa__texto {
  margin: var(--esp-6) 0 0;
  font-size: var(--t-small);
  color: var(--text-secondary);
}

/* O passo de agora: em terracota e mais alto, não deslocado —
   deslocar quebraria o alinhamento da régua. Ele cresce para
   baixo e ganha sombra, como o card ativo da referência. */
.etapa--agora {
  padding-bottom: calc(var(--pad-etapa) + var(--esp-6));
  /* 96%: a mancha dourada atrás clareia o card e a 90% o texto
     de apoio caía para 4,2:1. */
  background: color-mix(in srgb, var(--terra-700) 96%, transparent);
  color: var(--text-on-dark);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #FFFFFF 40%, transparent),
    0 30px 56px -32px color-mix(in srgb, var(--marrom-900) 85%, transparent);
}
.etapa--agora .etapa__cabeca { border-bottom-color: color-mix(in srgb, var(--ouro-400) 55%, transparent); }
.etapa--agora .etapa__cabeca::before { background: color-mix(in srgb, var(--terra-500) 48%, transparent); }
.etapa--agora .etapa__cabeca::after  { background: var(--ouro-400); border-color: var(--ouro-600); }
.etapa--agora .etapa__rotulo { color: var(--ouro-400); }
.etapa--agora .etapa__num    { color: color-mix(in srgb, var(--creme-100) 42%, transparent); }
.etapa--agora .etapa__titulo { color: var(--creme-100); }
.etapa--agora .etapa__ico    { color: var(--ouro-400); }
.etapa--agora .etapa__texto  { color: var(--creme-100); }
.etapa--agora::after {
  background: linear-gradient(150deg,
    color-mix(in srgb, #FFFFFF 55%, transparent) 0%,
    color-mix(in srgb, #FFFFFF 14%, transparent) 34%,
    transparent 58%,
    color-mix(in srgb, #FFFFFF 22%, transparent) 100%);
}

@media (max-width: 860px) {
  /* No telefone a régua vira vertical, à esquerda — a leitura de
     linha do tempo fica mais natural empilhada. */
  .linha-tempo__lista { grid-template-columns: 1fr; gap: var(--esp-5); }
  .linha-tempo__lista::before {
    /* A régua horizontal do desktop é feita de filetes nos cabeçalhos.
       No telefone ela vira uma linha única, absoluta, alinhada com o
       centro dos nós: card recuado 3,25rem, nó a -2,75rem da borda
       dele, mais 0,4375rem até o centro. */
    content: "";
    position: absolute;
    left: 0.9375rem; right: auto; top: 1.5rem; bottom: 1.5rem;
    width: 1px; height: auto;
    background: linear-gradient(180deg,
      transparent 0%,
      color-mix(in srgb, var(--terra-500) 55%, transparent) 8%,
      color-mix(in srgb, var(--terra-500) 55%, transparent) 92%,
      transparent 100%);
  }
  .etapa { margin-left: 3.25rem; }
  .etapa--agora { padding-bottom: var(--pad-etapa); }
  .etapa__cabeca { height: auto; padding-bottom: var(--esp-4); border-bottom: 0; }
  .etapa:not(:last-child) .etapa__cabeca::before { display: none; }
  .etapa__cabeca::after { left: -2.75rem; top: 1.75rem; bottom: auto; }
  .etapa__texto { margin-top: var(--esp-4); }
  .etapa__num { font-size: 2.75rem; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .etapa { background: var(--surface-light); }
  .etapa--agora { background: var(--terra-700); }
}
@media (prefers-reduced-transparency: reduce) {
  .etapa { background: var(--surface-light); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .etapa--agora { background: var(--terra-700); }
  .linha-tempo__campo { display: none; }
}

/* ---------- INVESTIMENTO ------------------------------------ */

.investimento {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--gap-img-conteudo);
  align-items: stretch;
}
@media (max-width: 860px) { .investimento { grid-template-columns: 1fr; } }
.investimento__valor {
  display: flex; flex-direction: column; gap: var(--esp-5);
  padding: var(--pad-card);
  border-radius: var(--raio-lg);
  background: var(--bg-deep);
  color: var(--text-on-dark);
}
.investimento__preco {
  font-family: var(--fonte-display);
  font-size: clamp(2.75rem, 2rem + 3vw, 4rem);
  line-height: 1; letter-spacing: var(--ls-h1);
  font-weight: var(--w-display);
  color: var(--ouro-400); margin: 0;
  display: flex; align-items: baseline; gap: .375rem;
}
.investimento__moeda { font-size: .4em; font-weight: var(--w-titulo); opacity: .85; }

/* ---------- CTA FINAL --------------------------------------- */

.fechamento {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: var(--gap-titulo-texto);
  padding-block: clamp(4.5rem, 8vw, 9rem);
}
.fechamento .t-display { max-width: 16ch; }
.fechamento .acoes { margin-top: var(--esp-5); justify-content: center; }

/* ---------- VAGA DE CONTEÚDO --------------------------------
   Área preparada para o conteúdo real do curso.
   Marcada de propósito: some ao receber o texto definitivo.   */

.vaga {
  border: 1.5px dashed var(--border-medium);
  border-radius: var(--raio-sm);
  padding: var(--esp-4) var(--esp-5);
  color: var(--text-muted);
  font-size: var(--t-small);
  line-height: var(--lh-curto);
}
.vaga::before {
  content: "a preencher";
  display: block;
  font-size: .625rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--terra-500);
  margin-bottom: var(--esp-2);
}
.ctx-escuro .vaga::before { color: var(--ouro-600); }

/* ---------- RODAPÉ ------------------------------------------ */

.rodape-curso__grade {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: var(--gap-img-conteudo);
  align-items: start;
}
@media (max-width: 860px) { .rodape-curso__grade { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .rodape-curso__grade { grid-template-columns: 1fr; } }

/* Voltar ao topo — aparece só depois da primeira dobra */
.ao-topo {
  position: fixed; right: var(--margem-externa); bottom: var(--esp-5); z-index: 40;
  width: 2.75rem; height: 2.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--raio-pill);
  border: 1px solid var(--border-light);
  background: var(--surface-light);
  color: var(--text-primary);
  cursor: pointer;
  opacity: 0; transform: translateY(8px);
  pointer-events: none;
  transition: opacity var(--dur-menu) var(--ease-out), transform var(--dur-menu) var(--ease-out);
}
.ao-topo[data-visivel] { opacity: 1; transform: translateY(0); pointer-events: auto; }
.ao-topo:focus-visible { outline: var(--traco-grosso) solid var(--foco-anel); outline-offset: 2px; }
@media (max-width: 560px) { .ao-topo { display: none; } }

/* Pular para o conteúdo */
.pular {
  position: absolute; left: var(--esp-4); top: var(--esp-4); z-index: 100;
  transform: translateY(-200%);
  transition: transform var(--dur-menu) var(--ease-out);
}
.pular:focus { transform: translateY(0); }

/* Âncoras não param sob o header fixo */
:target { scroll-margin-top: 6rem; }

@media (prefers-reduced-motion: reduce) {
  .menu-movel__painel, .visor__quadro { transition-duration: 1ms; }
  .galeria-curso__item:hover { transform: none; }
}

/* Canal ainda não configurado.
   O botão continua com a força visual final — o pendente é anunciado
   uma única vez, no aviso de configuração, e não enfraquece a página. */
[data-pendente] { cursor: not-allowed; }

.aviso-config {
  position: fixed; left: var(--margem-externa); bottom: var(--esp-5); z-index: 45;
  max-width: 26rem;
  display: flex; align-items: flex-start; gap: var(--esp-3);
  padding: var(--esp-4) var(--esp-5);
  border-radius: var(--raio-md);
  background: var(--marrom-900);
  color: var(--creme-100);
  border-left: var(--traco-grosso) solid var(--vermelho);
  font-size: var(--t-small);
  line-height: var(--lh-curto);
  box-shadow: none;
}
.aviso-config code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .75rem; color: var(--ouro-400);
}
.aviso-config button {
  margin-left: auto; flex: none;
  width: 1.75rem; height: 1.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--raio-pill);
  background: transparent; color: var(--creme-300); cursor: pointer;
}
.aviso-config button:focus-visible { outline: 2px solid var(--foco-anel); outline-offset: 2px; }
@media (max-width: 720px) { .aviso-config { left: var(--esp-4); right: var(--esp-4); max-width: none; } }



/* Em tela estreita o rótulo do CTA já ocupa a linha: a seta sai de cena */
@media (max-width: 430px) {
  .btn--bloco .ico--seta { display: none; }
}

/* ---------- PARA QUEM É ------------------------------------- */

.para-quem {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: var(--gap-img-conteudo);
  align-items: start;
  margin-top: var(--secao-y-densa);
  padding-top: var(--secao-y-densa);
  border-top: 1px solid var(--border-light);
}
@media (max-width: 860px) { .para-quem { grid-template-columns: 1fr; } }

/* Afirmação que desarma uma objeção. Peso vem do filete, não de cor de alerta. */
.destaque-calmo {
  margin: var(--esp-6) 0 0;
  padding-left: var(--esp-5);
  border-left: var(--traco-grosso) solid var(--terra-500);
  font-family: var(--fonte-display);
  font-size: 1.125rem;
  line-height: 1.45;
  font-weight: var(--w-medio);
  color: var(--title-primary);
  max-width: 44ch;
}
.ctx-escuro .destaque-calmo { border-left-color: var(--ouro-600); }

/* ---------- TEMAS DO PERCURSO -------------------------------- */

.temas {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--border-light);
}
.tema {
  display: flex; flex-direction: column; gap: var(--esp-3);
  padding: var(--esp-6) var(--esp-5) var(--esp-7) 0;
  border-bottom: 1px solid var(--border-light);
  border-right: 1px solid var(--border-light);
}
.tema:nth-child(4n) { border-right: 0; padding-right: 0; }
.tema:not(:nth-child(4n + 1)) { padding-left: var(--esp-5); }
.tema__ord {
  font-family: var(--fonte-display);
  font-size: var(--t-caption);
  letter-spacing: var(--ls-eyebrow);
  color: var(--text-accent);
}
.tema__titulo {
  font-family: var(--fonte-display);
  font-size: 1.125rem; line-height: 1.28;
  letter-spacing: -.005em; font-weight: var(--w-titulo);
  color: var(--title-primary); margin: 0;
  text-wrap: balance;
}
@media (max-width: 980px) {
  .temas { grid-template-columns: repeat(2, 1fr); }
  .tema:nth-child(4n) { border-right: 1px solid var(--border-light); padding-right: var(--esp-5); }
  .tema:not(:nth-child(4n + 1)) { padding-left: 0; }
  .tema:nth-child(2n) { border-right: 0; padding-right: 0; }
  .tema:nth-child(2n) { padding-left: var(--esp-5); }
}
@media (max-width: 560px) {
  .temas { grid-template-columns: 1fr; }
  .tema, .tema:nth-child(2n), .tema:nth-child(4n) {
    border-right: 0; padding-inline: 0;
  }
}

/* ---------- MENTORA: alcunha e credenciais ------------------- */

.mentora-bloco__alcunha {
  font-family: var(--fonte-display);
  font-size: 1.125rem;
  font-weight: var(--w-medio);
  letter-spacing: .01em;
  color: var(--ouro-400);
  margin: var(--esp-2) 0 0;
}
.mentora-bloco__texto .mentora__creds { margin-top: var(--esp-5); }
.mentora-bloco__texto .tag { border-color: var(--border-on-dark); color: var(--text-on-dark-sec); }
.mentora-bloco__texto .citacao { border-left-color: var(--ouro-600); }

/* ---------- CTA FINAL: citação de abertura ------------------- */

.fechamento__citacao { margin: 0; max-width: 46ch; }
.fechamento__citacao p {
  font-family: var(--fonte-display);
  font-size: clamp(1.125rem, 1rem + .6vw, 1.375rem);
  line-height: 1.4;
  font-weight: var(--w-corpo);
  font-style: italic;
  color: var(--text-on-dark-sec);
  margin: 0;
}
.fechamento__citacao footer {
  margin-top: var(--esp-3);
  font-size: var(--t-caption);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ouro-600);
}

/* "Benzimento" é uma palavra longa: o hero pede um teto menor que o do sistema */
.hero-curso .t-display { font-size: clamp(2.75rem, 1.5rem + 4.8vw, 5rem); }

/* Bloco da mentora: ritmo entre parágrafos e citação que não briga com a biografia */
.mentora-bloco__texto > p + p { margin-top: var(--esp-4); }
.mentora-bloco__texto .citacao p {
  font-size: clamp(1.0625rem, 1rem + .5vw, 1.25rem);
  line-height: 1.45;
  font-weight: var(--w-corpo);
  font-style: italic;
  color: var(--creme-300);
}

/* ============================================================
   MARCA — variante à prova de file://
   O sistema pinta a marca com `mask-image` + currentColor. Funciona
   servido por http, mas o Chrome trata cada arquivo file:// como
   origem opaca e recusa a máscara — a marca some ao abrir o index
   direto do disco. Aqui a cor já vem embutida no arquivo e entra
   como background-image, que nenhuma origem bloqueia.
   ============================================================ */

.marca--terra, .marca--ouro, .marca--creme {
  -webkit-mask-image: none; mask-image: none;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.marca--simbolo.marca--terra { background-image: url("../img/marca-simbolo-terra.png"); }
.marca--simbolo.marca--ouro  { background-image: url("../img/marca-simbolo-ouro.png"); }
.marca--completo.marca--creme { background-image: url("../img/marca-completo-creme.png"); }

/* ============================================================
   VIDRO
   Só na camada que flutua sobre o conteúdo — cabeçalho, menu,
   visor, selo e botões soltos. Nunca em card, seção ou bloco de
   texto: ali o vidro vira ruído e come contraste.
   O tinte sai da paleta da Casa, não do cinza neutro de sistema.
   ============================================================ */

:root {
  --vidro-desfoque: 18px;
  --vidro-satura: 170%;

  --vidro-claro:       color-mix(in srgb, var(--creme-100) 58%, transparent);
  --vidro-claro-denso: color-mix(in srgb, var(--creme-100) 84%, transparent);
  --vidro-escuro:      color-mix(in srgb, var(--marrom-900) 62%, transparent);
  --vidro-mata:        color-mix(in srgb, var(--mata-900) 58%, transparent);

  --vidro-borda:        color-mix(in srgb, #FFFFFF 42%, transparent);
  --vidro-borda-escura: color-mix(in srgb, var(--creme-100) 18%, transparent);

  /* Realce especular: a linha de luz no topo é o que faz ler como vidro */
  --vidro-brilho:        inset 0 1px 0 color-mix(in srgb, #FFFFFF 46%, transparent);
  --vidro-brilho-escuro: inset 0 1px 0 color-mix(in srgb, var(--creme-100) 22%, transparent);
  --vidro-assento:       0 10px 30px -20px color-mix(in srgb, var(--marrom-900) 60%, transparent);
}

.vidro {
  -webkit-backdrop-filter: blur(var(--vidro-desfoque)) saturate(var(--vidro-satura));
          backdrop-filter: blur(var(--vidro-desfoque)) saturate(var(--vidro-satura));
  background: var(--vidro-claro);
  border: 1px solid var(--vidro-borda);
  box-shadow: var(--vidro-brilho), var(--vidro-assento);
}
.vidro--escuro {
  background: var(--vidro-escuro);
  border-color: var(--vidro-borda-escura);
  box-shadow: var(--vidro-brilho-escuro), var(--vidro-assento);
}

/* ---------- Cabeçalho -------------------------------------- */

.cabecalho {
  background: transparent;
  border-bottom: 0;
  isolation: isolate;
}
/* O desfoque mora num pseudo-elemento para poder dissolver na borda
   de baixo sem levar junto o logo e os botões. */
.cabecalho::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: var(--vidro-claro);
  -webkit-backdrop-filter: blur(var(--vidro-desfoque)) saturate(var(--vidro-satura));
          backdrop-filter: blur(var(--vidro-desfoque)) saturate(var(--vidro-satura));
  -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent);
          mask-image: linear-gradient(to bottom, #000 68%, transparent);
  box-shadow: var(--vidro-brilho);
  transition: background-color var(--dur-hover) var(--ease-hover);
}
/* Depois da primeira rolagem o vidro adensa: o cabeçalho passa a
   cruzar seções escuras e o texto precisa do contraste de volta. */
.cabecalho[data-encolhido]::before {
  background: var(--vidro-claro-denso);
  -webkit-mask-image: none; mask-image: none;
}
.cabecalho[data-encolhido] { border-bottom: 1px solid var(--vidro-borda); }

.abrir-menu {
  background: var(--vidro-claro);
  border-color: var(--vidro-borda);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
          backdrop-filter: blur(10px) saturate(150%);
  box-shadow: var(--vidro-brilho);
}

/* ---------- Selo da marca sobre a fotografia ---------------- */

.marca-selo {
  background: var(--vidro-claro-denso);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
          backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid var(--vidro-borda);
  box-shadow: var(--vidro-brilho), var(--vidro-assento);
}

/* ---------- Menu mobile ------------------------------------- */

.menu-movel__veu {
  background: color-mix(in srgb, var(--marrom-900) 38%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
          backdrop-filter: blur(10px) saturate(120%);
}
.menu-movel__painel {
  background: var(--vidro-escuro);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
          backdrop-filter: blur(26px) saturate(170%);
  border-bottom: 1px solid var(--vidro-borda-escura);
  box-shadow: var(--vidro-brilho-escuro), 0 20px 50px -30px #000;
}
.fechar-menu {
  background: color-mix(in srgb, var(--creme-100) 10%, transparent);
  border-color: var(--vidro-borda-escura);
  box-shadow: var(--vidro-brilho-escuro);
}

/* ---------- Visor da galeria -------------------------------- */

.visor__veu {
  /* 84%: no pior caso — galeria clara desfocada atrás — o contador
     e os botões ainda passam AA sobre o véu. */
  background: color-mix(in srgb, var(--marrom-900) 84%, transparent);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
          backdrop-filter: blur(28px) saturate(140%);
}
.visor__btn {
  background: color-mix(in srgb, var(--creme-100) 14%, transparent);
  border-color: var(--vidro-borda-escura);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
          backdrop-filter: blur(12px) saturate(150%);
  box-shadow: var(--vidro-brilho-escuro);
}

/* ---------- Botões soltos ----------------------------------- */

.ao-topo {
  background: var(--vidro-claro-denso);
  border-color: var(--vidro-borda);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
          backdrop-filter: blur(12px) saturate(160%);
  box-shadow: var(--vidro-brilho), var(--vidro-assento);
}
.aviso-config {
  background: var(--vidro-escuro);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
          backdrop-filter: blur(20px) saturate(160%);
  box-shadow: var(--vidro-brilho-escuro), var(--vidro-assento);
}

/* ---------- Sem vidro: opacidade de volta -------------------
   Navegador sem backdrop-filter, ou quem pediu menos
   transparência no sistema. A página não pode depender do efeito. */

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cabecalho::before { background: var(--bg-primary); }
  .marca-selo, .ao-topo, .abrir-menu { background: var(--bg-primary); }
  .menu-movel__painel, .aviso-config { background: var(--bg-deep); }
  .menu-movel__veu { background: color-mix(in srgb, var(--marrom-900) 60%, transparent); }
  .visor__veu { background: color-mix(in srgb, var(--marrom-900) 94%, #000); }
  .visor__btn, .fechar-menu { background: color-mix(in srgb, var(--creme-100) 14%, transparent); }
}

@media (prefers-reduced-transparency: reduce) {
  .cabecalho::before { background: var(--bg-primary); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .marca-selo, .ao-topo, .abrir-menu { background: var(--bg-primary); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .menu-movel__painel, .aviso-config { background: var(--bg-deep); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .menu-movel__veu { background: color-mix(in srgb, var(--marrom-900) 72%, transparent); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .visor__veu { background: color-mix(in srgb, var(--marrom-900) 94%, #000); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ============================================================
   FOTOGRAFIA — revisão
   O arco é a forma da marca. Sobre fotografia real ele vira
   moldura de álbum e envelhece a página: aqui a foto é um
   retângulo de cantos suaves, do mesmo raio em toda parte.
   O arco continua onde nasceu — no símbolo e no selo.
   ============================================================ */

:root {
  --raio-midia:        clamp(1rem, 1.4vw, 1.375rem);   /* 16 → 22px */
  --raio-midia-grande: clamp(1.25rem, 2.2vw, 2rem);    /* 20 → 32px */
}

.hero-curso__midia .foto,
.mentora-bloco__retrato .foto,
.bloco-img--arco .foto,
.bloco-img--seixo .foto,
.galeria-curso__item,
.galeria-curso__item:nth-child(1) {
  border-radius: var(--raio-midia-grande);
}
.texto-foto .foto { border-radius: var(--raio-midia-grande); }

/* Aresta definida sem contorno visível — a foto não "flutua" sobre o creme */
.foto {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--marrom-900) 7%, transparent);
}

/* Tratamento: o véu de terracota e o grão eram o que dava ar de impressão
   antiga. A fotografia da Yasmim já chega quente — só precisa de ar. */
.foto--tratada > img { filter: saturate(1.03) contrast(1.02); }
.foto::before { display: none; }
.foto::after  { display: none; }

/* Hover da galeria: a imagem respira dentro do quadro, o quadro não se move.
   Mais contido que deslocar o card inteiro. */
.galeria-curso__item { overflow: hidden; }
.galeria-curso__item img {
  transition: transform var(--dur-painel) var(--ease-out);
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .galeria-curso__item:hover { transform: none; }
  .galeria-curso__item:hover img { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .galeria-curso__item img { transition: none; }
  .galeria-curso__item:hover img { transform: none; }
}

/* O selo da marca acompanha: quadrado de cantos suaves, não arco sobre arco */
.marca-selo { border-radius: var(--raio-midia); }

/* Visor: a imagem ampliada segue o mesmo raio */
.visor__quadro img { border-radius: var(--raio-midia-grande); }

/* ============================================================
   CTAs EM VIDRO
   Mesmo material do painel, em escala de botão: corpo com
   desfoque e saturação, especular no topo, aro de luz variável.

   O preenchimento continua forte (88–92%). Botão de conversão
   translúcido demais perde presença e legibilidade — o vidro
   aqui aparece na borda e no brilho, não na transparência.
   ============================================================ */

.btn {
  position: relative;
  isolation: isolate;
  -webkit-backdrop-filter: blur(12px) saturate(180%);
          backdrop-filter: blur(12px) saturate(180%);
}
/* O link de pular é um .btn e a regra acima o tirou do absoluto,
   fazendo-o empurrar a página inteira 48px para baixo. */
.btn.pular { position: absolute; }

/* Especular: acima do fundo, abaixo do rótulo */
.btn::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, color-mix(in srgb, #FFFFFF 30%, transparent) 0%, transparent 48%),
    radial-gradient(130% 100% at 20% -40%, color-mix(in srgb, #FFFFFF 24%, transparent), transparent 66%);
}

/* Aro de 1px com luz variável */
.btn::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  padding: 1px;
  background: linear-gradient(150deg,
    color-mix(in srgb, #FFFFFF 68%, transparent) 0%,
    color-mix(in srgb, #FFFFFF 16%, transparent) 34%,
    transparent 58%,
    color-mix(in srgb, #FFFFFF 24%, transparent) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

/* Preenchimentos translúcidos — o suficiente para o desfoque aparecer
   sem tirar peso do botão */
.btn--primario   { --btn-bg: color-mix(in srgb, var(--ouro-600) 90%, transparent); --btn-borda: transparent; }
.btn--secundario { --btn-bg: color-mix(in srgb, var(--terra-700) 90%, transparent); --btn-borda: transparent; }

/* WhatsApp: o Verde Folha puro dava 3,45:1 com texto creme — abaixo do
   mínimo AA, e este é o botão de conversão da página. Escurecido em
   direção ao Verde Mata, continua sendo o verde da marca e passa. */
.btn--whats {
  --btn-bg: color-mix(in srgb, color-mix(in srgb, var(--verde-600) 56%, var(--mata-900)) 94%, transparent);
  --btn-borda: transparent;
}

/* Outline e discreto podem ser vidro de verdade: são ações de apoio */
.btn--outline  { --btn-bg: color-mix(in srgb, #FFFFFF 10%, transparent); }
.ctx-escuro .btn--outline { --btn-bg: color-mix(in srgb, var(--creme-100) 12%, transparent); }
.btn--discreto { --btn-bg: transparent; }
.btn--discreto::before, .btn--discreto::after { display: none; }

@media (hover: hover) and (pointer: fine) {
  .btn--primario:hover   { --btn-bg: color-mix(in srgb, var(--ouro-400) 92%, transparent); }
  .btn--secundario:hover { --btn-bg: color-mix(in srgb, var(--terra-500) 92%, transparent); }
  /* hover escurece: clarear derrubaria o contraste do texto creme */
  .btn--whats:hover      { --btn-bg: color-mix(in srgb, color-mix(in srgb, var(--verde-600) 44%, var(--mata-900)) 96%, transparent); }
  .btn--outline:hover    { --btn-bg: color-mix(in srgb, #FFFFFF 18%, transparent); }
  .ctx-escuro .btn--outline:hover { --btn-bg: color-mix(in srgb, var(--creme-100) 20%, transparent); }
}

/* Ao pressionar, o especular recua junto com a escala: o vidro
   "assenta" em vez de só encolher */
.btn::before { transition: opacity var(--dur-toque) var(--ease-out); }
.btn:active::before { opacity: .45; }

.btn[disabled]::before, .btn[disabled]::after,
.btn.is-disabled::before, .btn.is-disabled::after { opacity: .3; }

/* Sem backdrop-filter, ou com transparência reduzida: opaco */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .btn--primario   { --btn-bg: var(--ouro-600); }
  .btn--secundario { --btn-bg: var(--terra-700); }
  .btn--whats      { --btn-bg: color-mix(in srgb, var(--verde-600) 56%, var(--mata-900)); }
}
@media (prefers-reduced-transparency: reduce) {
  .btn { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .btn--primario   { --btn-bg: var(--ouro-600); }
  .btn--secundario { --btn-bg: var(--terra-700); }
  .btn--whats      { --btn-bg: color-mix(in srgb, var(--verde-600) 56%, var(--mata-900)); }
  .btn::before     { display: none; }
}

/* ============================================================
   CABEÇALHO FLUTUANTE
   Deixa de ser barra colada no topo e passa a flutuar: marca
   solta à esquerda, pílula de vidro com a navegação no centro,
   ações à direita. Um chip desliza para a seção em que se está.

   A pílula é de vidro ESCURO. Sobre o creme da página, uma pílula
   clara simplesmente some — a referência funciona porque está sobre
   fotografia. Invertida, ela destaca sobre o creme e continua
   funcionando quando cruza a fotografia do hero e as seções escuras.
   ============================================================ */

.cabecalho {
  position: fixed; top: 0; left: 0; right: 0;
  padding: clamp(0.625rem, 1.4vw, 1.125rem) 0;
  background: transparent;
  border-bottom: 0;
}
.cabecalho::before { display: none; }          /* o vidro agora é das peças, não da barra */
.cabecalho[data-encolhido] { border-bottom: 0; }
.cabecalho[data-encolhido]::before { display: none; }

.cabecalho__barra {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--esp-4);
}
.cabecalho__acoes { justify-self: end; }

/* Pílula da navegação */
.navpill {
  position: relative;
  justify-self: center;
  padding: 5px;
  border-radius: var(--raio-pill);
  /* 82%: abaixo disso o rótulo inativo cai para 3,8:1 sobre o creme */
  background: color-mix(in srgb, var(--marrom-900) 82%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(185%);
          backdrop-filter: blur(22px) saturate(185%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #FFFFFF 26%, transparent),
    0 14px 34px -20px color-mix(in srgb, var(--marrom-900) 75%, transparent);
}
/* Aro de luz variável, igual ao dos CTAs */
.navpill::after {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  border-radius: inherit; pointer-events: none; padding: 1px;
  background: linear-gradient(150deg,
    color-mix(in srgb, #FFFFFF 46%, transparent) 0%,
    color-mix(in srgb, #FFFFFF 12%, transparent) 34%,
    transparent 58%,
    color-mix(in srgb, #FFFFFF 18%, transparent) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

/* Chip que marca a seção em que se está.
   Posição por transform; a largura acompanha porque cada rótulo
   tem um tamanho. É um único elemento fora do fluxo, então o
   custo de leiaute é desprezível. */
.navpill__chip {
  position: absolute;
  top: 5px; left: 0;
  height: calc(100% - 10px);
  border-radius: var(--raio-pill);
  background: color-mix(in srgb, var(--creme-100) 92%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #FFFFFF 90%, transparent),
    0 3px 10px -5px color-mix(in srgb, var(--marrom-900) 55%, transparent);
  opacity: 0;
  transform: translateX(0);
  transition:
    transform var(--dur-painel) var(--ease-out),
    width var(--dur-painel) var(--ease-out),
    opacity var(--dur-menu) var(--ease-out);
  pointer-events: none;
  z-index: 0;
}
.navpill[data-ativo] .navpill__chip { opacity: 1; }

.cabecalho__nav { position: relative; z-index: 1; gap: 0; }
.cabecalho__nav .nav__link {
  padding: var(--esp-3) var(--esp-5);
  color: color-mix(in srgb, var(--creme-100) 88%, var(--marrom-900));
  white-space: nowrap;
  transition: color var(--dur-menu) var(--ease-hover);
}
/* Sobre o chip claro o rótulo inverte para o marrom */
.cabecalho__nav .nav__link.is-selected {
  background: transparent;                      /* quem marca é o chip */
  color: var(--marrom-900);
}
@media (hover: hover) and (pointer: fine) {
  .cabecalho__nav .nav__link:hover { background: transparent; color: var(--marrom-900); }
}

/* A marca também flutua, sem caixa */
.cabecalho__marca { justify-self: start; }

@media (max-width: 1080px) {
  .cabecalho__barra { grid-template-columns: auto 1fr; }
  .navpill { display: none; }
  .cabecalho__acoes { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .navpill__chip { transition: opacity var(--dur-menu) var(--ease-out); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .navpill { background: var(--bg-deep); }
}

/* ---------- MARCA NO CABEÇALHO -----------------------------
   O cabeçalho agora flutua sobre a fotografia do hero e depois
   sobre seções creme. Marca em terracota sumia sobre a foto;
   numa pastilha de vidro escuro ela lê sempre igual, e o
   cabeçalho passa a ser três peças flutuantes coerentes.
   ------------------------------------------------------------ */

.marca--simbolo.marca--creme { background-image: url("../img/marca-simbolo-creme.png"); }

.cabecalho__marca {
  padding: var(--esp-2) var(--esp-5) var(--esp-2) var(--esp-3);
  border-radius: var(--raio-pill);
  background: color-mix(in srgb, var(--marrom-900) 82%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(185%);
          backdrop-filter: blur(22px) saturate(185%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #FFFFFF 26%, transparent),
    0 14px 34px -20px color-mix(in srgb, var(--marrom-900) 75%, transparent);
  color: var(--creme-100);
}
.cabecalho__marca .cabecalho__assinatura {
  color: color-mix(in srgb, var(--creme-100) 62%, var(--marrom-900));
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cabecalho__marca { background: var(--bg-deep); }
}

/* ============================================================
   ABERTURA · TRÊS CENAS
   Cada cena tem a sua entrada, no fundo e no texto:
     1. raízes crescendo de baixo   · escala vertical
     2. ondas abrindo do centro     · escala + desvanecer
     3. o arco da marca assentando  · escala suave
   As cenas nascem `display:none`; ao ficarem ativas, as animações
   CSS começam sozinhas — nada de truque de reflow.

   Três regras que valem mais que o efeito:
     1. Oculta por padrão — sem JS, ninguém vê cortina nenhuma.
     2. Pulável por clique, tecla, rolagem ou botão.
     3. Uma vez por sessão; fora com prefers-reduced-motion.
   ============================================================ */

.abertura { display: none; }

html[data-abertura] .abertura {
  display: grid;
  grid-template-rows: 1fr auto;
  position: fixed; inset: 0; z-index: 200;
  background: var(--bg-deep);
  overflow: hidden;
  transition:
    opacity 700ms var(--ease-out),
    transform 700ms var(--ease-out);
}
html[data-abertura] body { overflow: hidden; }

.abertura__fundo {
  position: absolute; inset: 0;
  background:
    radial-gradient(46% 56% at 50% 40%, color-mix(in srgb, var(--terra-700) 52%, transparent), transparent 76%),
    radial-gradient(34% 44% at 14% 86%, color-mix(in srgb, var(--ouro-400) 18%, transparent), transparent 78%);
}
.abertura__fundo.tex-vegetal::after { opacity: .12; background-size: 220px 314px; }

.abertura__palco {
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--esp-8) var(--margem-externa);
  min-height: 0;
}

/* ---------- Cenas ------------------------------------------- */

.cena {
  display: none;
  grid-area: 1 / 1;
  position: relative;
  flex-direction: column; align-items: center;
  text-align: center;
  width: 100%;
}
.cena[data-ativa] { display: flex; }
.cena__fundo { position: absolute; inset: -20% -10%; z-index: 0; pointer-events: none; }
.cena > :not(.cena__fundo) { position: relative; z-index: 1; }

.cena__texto {
  margin: 0;
  font-family: var(--fonte-display);
  font-size: clamp(1.75rem, 1rem + 3.4vw, 3.75rem);
  line-height: 1.16;
  letter-spacing: -.022em;
  font-weight: var(--w-titulo);
  color: var(--creme-100);
  max-width: 18ch;
}
.palavra--destaque { color: var(--ouro-400); }

.cena__fichas {
  list-style: none; margin: var(--esp-7) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--esp-3);
}
.cena__fichas li {
  padding: var(--esp-2) var(--esp-5);
  border-radius: var(--raio-pill);
  border: 1px solid color-mix(in srgb, var(--creme-100) 24%, transparent);
  background: color-mix(in srgb, var(--creme-100) 8%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
          backdrop-filter: blur(14px) saturate(160%);
  font-size: var(--t-small);
  color: color-mix(in srgb, var(--creme-100) 88%, var(--marrom-900));
  opacity: 0;
  animation: abreSobe 460ms var(--ease-out) forwards;
}
.cena__fichas li:nth-child(1) { animation-delay: 620ms; }
.cena__fichas li:nth-child(2) { animation-delay: 700ms; }
.cena__fichas li:nth-child(3) { animation-delay: 780ms; }

/* Cena 1 · as palavras sobem em sequência, as raízes crescem */
.cena--raizes .palavra {
  display: inline-block;
  opacity: 0;
  animation: abreSobe 520ms var(--ease-out) forwards;
}
.cena--raizes .palavra:nth-child(1) { animation-delay: 80ms; }
.cena--raizes .palavra:nth-child(2) { animation-delay: 170ms; }
.cena--raizes .palavra:nth-child(3) { animation-delay: 260ms; }
.cena--raizes .palavra:nth-child(4) { animation-delay: 350ms; }
.cena--raizes .palavra:nth-child(5) { animation-delay: 440ms; }

.raiz-traco {
  position: absolute; bottom: 0;
  width: 1px; height: 62%;
  transform-origin: bottom center;
  transform: scaleY(0);
  background: linear-gradient(to top,
    color-mix(in srgb, var(--ouro-400) 55%, transparent),
    transparent);
  animation: cresceRaiz 1400ms var(--ease-out) forwards;
}
.raiz-traco:nth-child(1) { left: 12%; height: 46%; animation-delay: 60ms; }
.raiz-traco:nth-child(2) { left: 24%; height: 68%; animation-delay: 180ms; }
.raiz-traco:nth-child(3) { left: 37%; height: 54%; animation-delay: 120ms; }
.raiz-traco:nth-child(4) { left: 50%; height: 76%; animation-delay: 0ms; }
.raiz-traco:nth-child(5) { left: 63%; height: 52%; animation-delay: 220ms; }
.raiz-traco:nth-child(6) { left: 76%; height: 66%; animation-delay: 100ms; }
.raiz-traco:nth-child(7) { left: 88%; height: 44%; animation-delay: 260ms; }

/* Cena 2 · o texto abre por corte horizontal, as ondas se expandem */
.cena__texto--corte {
  clip-path: inset(0 100% 0 0);
  animation: abreCorte 760ms var(--ease-out) 120ms forwards;
}
.onda {
  position: absolute; top: 50%; left: 50%;
  width: 34vmin; height: 34vmin;
  margin: -17vmin 0 0 -17vmin;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--creme-100) 30%, transparent);
  opacity: 0;
  transform: scale(.35);
  animation: abreOnda 2200ms var(--ease-out) forwards;
}
.onda:nth-child(1) { animation-delay: 0ms; }
.onda:nth-child(2) { animation-delay: 260ms; }
.onda:nth-child(3) { animation-delay: 520ms; }
.onda:nth-child(4) { animation-delay: 780ms; }

/* Cena 3 · o arco assenta e a marca aparece */
.arco {
  position: absolute; top: 50%; left: 50%;
  width: 46vmin; height: 52vmin;
  margin: -30vmin 0 0 -23vmin;
  border: 1px solid color-mix(in srgb, var(--ouro-400) 34%, transparent);
  border-radius: var(--raio-arco);
  opacity: 0;
  transform: scale(.9);
  animation: abreArco 1500ms var(--ease-out) forwards;
}
.brilho {
  position: absolute; top: 50%; left: 50%;
  width: 60vmin; height: 60vmin;
  margin: -30vmin 0 0 -30vmin;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--ouro-400) 22%, transparent), transparent 62%);
  opacity: 0;
  transform: scale(.7);
  animation: abreBrilho 1700ms var(--ease-out) forwards;
}
.cena__simbolo { height: 4.25rem; opacity: 0; animation: abreMarca 680ms var(--ease-out) 180ms forwards; }
.cena__casa {
  margin: var(--esp-5) 0 0;
  font-family: var(--fonte-display);
  font-size: clamp(1.125rem, 0.9rem + 1vw, 1.5rem);
  font-weight: var(--w-titulo);
  letter-spacing: .02em; text-transform: uppercase;
  color: var(--creme-300);
  opacity: 0; animation: abreSobe 560ms var(--ease-out) 420ms forwards;
}
.cena__assinatura {
  margin: var(--esp-2) 0 0;
  font-size: var(--t-caption);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  color: color-mix(in srgb, var(--creme-100) 76%, var(--marrom-900));
  opacity: 0; animation: abreSobe 560ms var(--ease-out) 560ms forwards;
}

/* ---------- Barra inferior ---------------------------------- */

.abertura__barra {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--esp-5);
  padding: var(--esp-5) var(--margem-externa) var(--esp-7);
  border-top: 1px solid color-mix(in srgb, var(--creme-100) 12%, transparent);
}
.abertura__legenda {
  margin: 0;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase;
  color: color-mix(in srgb, var(--creme-100) 72%, var(--marrom-900));
}
.abertura__progresso { display: flex; gap: var(--esp-3); }
.abertura__progresso span {
  position: relative;
  width: clamp(2.5rem, 7vw, 5rem); height: 2px;
  border-radius: var(--raio-pill);
  background: color-mix(in srgb, var(--creme-100) 18%, transparent);
  overflow: hidden;
}
.abertura__progresso span::after {
  content: ""; position: absolute; inset: 0;
  background: var(--ouro-400);
  transform: scaleX(0); transform-origin: left;
}
.abertura__progresso span[data-cheia]::after { transform: scaleX(1); }
.abertura__progresso span[data-correndo]::after {
  animation: enchePasso var(--dur-cena, 2600ms) linear forwards;
}
.abertura__controles { display: flex; justify-content: flex-end; align-items: center; gap: var(--esp-3); }
.abertura__acao {
  display: inline-flex; align-items: center; gap: var(--esp-2);
  min-height: 2.75rem; padding: var(--esp-2) var(--esp-5);
  border: 1px solid color-mix(in srgb, var(--creme-100) 22%, transparent);
  border-radius: var(--raio-pill);
  background: transparent;
  color: color-mix(in srgb, var(--creme-100) 78%, var(--marrom-900));
  font-size: var(--t-small);
  cursor: pointer;
  transition: color var(--dur-hover) var(--ease-hover), border-color var(--dur-hover) var(--ease-hover);
}
.abertura__acao .ico { color: var(--ouro-600); }
.abertura__acao--forte {
  background: color-mix(in srgb, var(--creme-100) 10%, transparent);
  color: var(--creme-100);
}
.abertura__acao:focus-visible { outline: var(--traco-grosso) solid var(--ouro-400); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .abertura__acao:hover { color: var(--creme-100); border-color: color-mix(in srgb, var(--creme-100) 48%, transparent); }
}

/* Saída: a cortina sobe e some enquanto a fotografia do hero
   assenta de 1,05 para 1 — as duas coisas lidas como um gesto só. */
html[data-abertura="saindo"] .abertura {
  opacity: 0;
  transform: translateY(-2%) scale(1.03);
  pointer-events: none;
}
html[data-abertura] .hero-full__midia img { transform: scale(1.05); }
.hero-full__midia img { transition: transform 1100ms var(--ease-out); }

@keyframes abreSobe   { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes abreMarca  { from { opacity: 0; transform: scale(.9); }        to { opacity: 1; transform: none; } }
@keyframes abreCorte  { from { clip-path: inset(0 100% 0 0); }            to { clip-path: inset(0 0 0 0); } }
@keyframes cresceRaiz { from { transform: scaleY(0); }                    to { transform: scaleY(1); } }
@keyframes abreOnda   { 0% { opacity: 0; transform: scale(.35); } 22% { opacity: .9; } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes abreArco   { from { opacity: 0; transform: scale(.9); }        to { opacity: 1; transform: scale(1); } }
@keyframes abreBrilho { from { opacity: 0; transform: scale(.7); }        to { opacity: 1; transform: scale(1); } }
@keyframes enchePasso { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 640px) {
  .abertura__barra { grid-template-columns: 1fr; justify-items: center; gap: var(--esp-4); text-align: center; }
  .abertura__controles { justify-content: center; }
  .cena__fichas { gap: var(--esp-2); }
  .cena__fichas li { padding: var(--esp-2) var(--esp-4); }
}

/* Botão para rever a abertura. Nasce oculto: só aparece quando o
   script confirma que consegue remontar a cortina. */
.rever { display: none; }
html[data-abertura-ok] .rever {
  display: inline-flex; align-items: center; gap: var(--esp-2);
  min-height: 2.75rem;                    /* alvo de toque confortável */
  padding: var(--esp-2) var(--esp-5);
  border: 1px solid var(--border-on-dark);
  border-radius: var(--raio-pill);
  background: transparent;
  color: var(--text-on-dark-sec);
  font-size: var(--t-caption);
  letter-spacing: .04em;
  cursor: pointer;
  transition: color var(--dur-hover) var(--ease-hover), border-color var(--dur-hover) var(--ease-hover);
}
.rever .ico { color: var(--ouro-600); }
.rever:focus-visible { outline: var(--traco-grosso) solid var(--foco-anel); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  html[data-abertura-ok] .rever:hover { color: var(--creme-100); border-color: color-mix(in srgb, var(--creme-100) 45%, transparent); }
}