/* =======================================================================
   LP "A Quarta Revolução" — contratar a palestra
   Camada sobre site.css do Hub (reusa tokens + componentes). Navy #04081F + teal.
   ======================================================================= */

/* Botão primário: mantém o relevo curto do CTA original, agora no teal da
   marca. O fio claro e a sombra inferior dão volume sem virar neon. */
.btn-teal {
  color: #031b22;
  font-weight: 600;
  background: linear-gradient(180deg, #79ddd7 0%, #50c2bd 68%, #3ca49f 100%);
  border: 1px solid rgba(218, 255, 252, 0.25);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -2px 0 rgba(13, 84, 84, 0.42),
    0 0 24px -8px rgba(91, 192, 190, 0.54),
    0 12px 30px -14px rgba(91, 192, 190, 0.56);
  transition: transform 0.25s ease, filter 0.25s ease, box-shadow 0.25s ease;
}
.btn-teal:hover {
  transform: translateY(-2px);
  filter: brightness(1.07);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -2px 0 rgba(13, 84, 84, 0.4),
    0 0 28px -8px rgba(91, 192, 190, 0.62),
    0 17px 36px -15px rgba(91, 192, 190, 0.62);
}
.btn-teal:active {
  transform: translateY(1px);
  filter: brightness(0.98);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(13, 84, 84, 0.46),
    0 0 18px -8px rgba(91, 192, 190, 0.48),
    0 6px 16px -9px rgba(91, 192, 190, 0.46);
}

/* CTA fixo do nav */
.nav-cta {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nav-ig {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  color: var(--muted);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  transition:
    color 0.18s,
    border-color 0.18s,
    background 0.18s;
}
.nav-ig:hover {
  color: var(--teal);
  border-color: rgba(91, 192, 190, 0.45);
  background: rgba(91, 192, 190, 0.1);
}
.nav-ig svg {
  width: 19px;
  height: 19px;
}
@media (max-width: 560px) {
  /* barra de menu compacta: logo menor e CTA sem quebra de linha */
  .nav-in {
    padding: 13px 18px;
  }
  .logo {
    gap: 7px;
  }
  .logo img {
    width: 22px !important;
  }
  .logo .wordmark {
    font-size: 16px;
    line-height: 1.05;
    white-space: nowrap;
  }
  .nav-cta .btn {
    font-size: 12px;
    padding: 9px 15px;
    white-space: nowrap;
  }
}

/* placeholder de asset pendente (foto/vídeo/depoimento) */
.ph {
  border: 1.5px dashed rgba(91, 192, 190, 0.35);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(91, 192, 190, 0.05), rgba(255, 255, 255, 0.01));
  display: grid;
  place-items: center;
  text-align: center;
  padding: 32px 24px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  font-family:var(--font);
}
.ph b {
  color: var(--teal);
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 11.5px;
}

/* ================= NAV + HERO =================
   A hero é um painel arredondado que ocupa a janela, com um shader WebGL2 no
   fundo nas cores da marca, e a barra vive sobre ele: solta e larga no topo,
   compactada numa pílula de vidro assim que a página rola. A anatomia inteira
   (painel, ilha, vidro irmão, espaçadores, gaveta) vem da home v2 (PR #312).
   O prefixo .im- existe porque .hero, .nav e .logo já são do site.css.
   Aqui a página é navy do começo ao fim, então a barra tem dois momentos, e
   não os três do site: não existe o estado sobre fundo claro. */
.im-hero {
  --im-inset: clamp(6px, 0.9vw, 12px); /* o respiro dos quatro lados */
  --im-r: clamp(20px, 2.2vw, 30px); /* raio do painel */
  --im-bc: rgba(255, 255, 255, 0.16);
  --im-pad: clamp(24px, 4vw, 58px); /* respiro interno do painel */
  /* Os valores neutros ficam aqui, e não em `none`, para a ida e a volta
     interpolarem: backdrop-filter não transiciona de `none` para `blur()`. */
  --im-navblur: 0px;
  --im-navsat: 100%;
  --im-navop: 0;
  --im-navpl: 19px;
  --im-navpr: 19px;
  --im-navpy: 8px;
  --im-navh: 72px;
  --im-navr: 36px; /* pílula plena: metade da altura da barra */
  --im-navdotopo: clamp(20px, 1.8vw, 24px);
  --im-navtop: calc(var(--im-inset) + var(--im-navdotopo));
  --im-navmax: 100%; /* solta no topo; compacta ao rolar */
  --im-gapw: clamp(16px, 2.2vw, 30px);
  --im-navtx: rgba(255, 255, 255, 0.84);
  --im-navtxh: var(--white);
  --im-navhov: rgba(255, 255, 255, 0.12);
  --im-ease: 0.55s var(--ease-soft);
  position: relative;
  padding: var(--im-inset);
  isolation: isolate;
  /* o site.css dá z-index 1 a toda section: sem subir aqui, a barra fixa ficaria
     presa no contexto da hero e as seções seguintes passariam por cima dela */
  z-index: 60;
}
/* rolando: a barra vira caixa de vidro com o navy translúcido por trás, porque
   é o H1 claro que passa por baixo dela */
.im-hero.is-boxed {
  --im-navblur: 24px;
  --im-navsat: 145%;
  --im-navop: 1;
  --im-navmax: var(--im-natw, max-content);
}
/* Os espaçadores fazem a distribuição do estado solto: crescem e empurram os
   links para o centro. O da esquerda leva ainda a diferença de largura entre a
   CTA e o logo, que é o que centra os links de verdade. Quando a barra compacta
   eles voltam a ser um vão fixo, e como os dois estados são centrados no mesmo
   eixo, os links não saem do lugar: a caixa é que muda em volta deles. */
.im-hero .im-sp {
  flex-basis: 0;
  flex-grow: 1;
}
.im-hero .im-sp-e {
  flex-basis: var(--im-navdelta, 0px);
  flex-grow: 1;
}
.im-hero.is-boxed .im-sp,
.im-hero.im-medindo .im-sp {
  flex-basis: var(--im-gapw);
  flex-grow: 0;
}
.im-hero.is-boxed .im-sp-e,
.im-hero.im-medindo .im-sp-e {
  flex-basis: calc(var(--im-gapw) + var(--im-navdelta, 0px));
  flex-grow: 0;
}
.im-cue {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 44px;
  pointer-events: none;
}

/* ---- o painel ----
   O traço é sombra interna, e não `border`: assim ele não tira 1px de cada lado
   da caixa. A altura desconta os dois respiros, então respiro + painel fecha a
   janela inteira e a página não salta. */
.im-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: calc(100dvh - var(--im-inset) * 2);
  padding: calc(var(--im-navdotopo) + var(--im-navh)) var(--im-pad)
    clamp(22px, 2.8vw, 34px);
  border-radius: var(--im-r);
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #0a1440 0%, var(--bg) 62%);
  box-shadow:
    inset 0 0 0 1px var(--im-bc),
    0 26px 60px -46px rgba(16, 24, 40, 0.5);
}
/* a caixa existe só para recortar o canvas nos cantos do painel */
.im-bgclip {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}
.im-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s var(--ease-soft);
}
.im-hero.tem-fundo .im-bg {
  opacity: 1;
}
/* enquanto o shader não sobe (sem WebGL2), o que se vê é este brilho; quando
   ele sobe, o brilho sai de cena, porque somar as duas coisas vira ruído */
.im-glow {
  position: absolute;
  left: 50%;
  top: -34%;
  width: 130%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    closest-side,
    rgba(91, 192, 190, 0.16),
    rgba(91, 192, 190, 0.06) 62%,
    transparent 72%
  );
}
.im-hero.tem-fundo .im-glow {
  display: none;
}
/* ---- a barra ---- */
.im-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: transparent;
  backdrop-filter: none;
  border-bottom: 0;
  padding: var(--im-navtop) calc(var(--im-inset) + var(--im-pad) - var(--im-navpl));
}
.im-island {
  position: relative;
  display: flex;
  align-items: center;
  margin-inline: auto;
  width: 100%;
  max-width: var(--im-navmax);
  min-height: var(--im-navh);
  padding: var(--im-navpy) var(--im-navpr) var(--im-navpy) var(--im-navpl);
  border-radius: var(--im-navr);
  border: 0;
  background: transparent;
  isolation: isolate;
  transition: max-width var(--im-ease);
}
/* O vidro é IRMÃO do conteúdo da barra, nunca ancestral do submenu: com o
   backdrop-filter no próprio .im-island, ele vira o backdrop root e o painel do
   submenu passa a desfocar a pílula em vez da página. */
.im-glass {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  backdrop-filter: blur(var(--im-navblur)) saturate(var(--im-navsat));
  -webkit-backdrop-filter: blur(var(--im-navblur)) saturate(var(--im-navsat));
}
.im-glass::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--im-navop);
  background: rgba(6, 12, 34, 0.62);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    0 24px 54px -34px rgba(4, 8, 31, 0.88);
  transition: opacity 0.3s var(--ease-soft);
}
.im-logo {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 0;
}
.im-logo img {
  width: 26px;
  height: auto;
  display: block;
}
/* O wordmark desta barra é a Manrope, e não a Maven Pro do wordmark global:
   pedido da autora em 28/08, escopado nesta página. A Manrope entra como fonte
   variável de 400 a 800 no Base.astro, então o 700 aqui é peso real, e não
   engorda sintética. */
.im-wordmark {
  font-family: var(--font);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: #fff;
  white-space: nowrap;
}
.im-wordmark span {
  color: var(--muted);
  font-weight: 400;
}
.im-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
}
.im-links > a,
.im-links .mm-trigger {
  color: var(--im-navtx);
  padding: 9px 13px;
  border-radius: 99px;
  white-space: nowrap;
  transition:
    background 0.2s,
    color 0.2s;
}
.im-links > a:hover,
.im-links .mm-trigger:hover,
.im-links .mm-trigger[aria-expanded="true"] {
  color: var(--im-navtxh);
  background: var(--im-navhov);
}
.im-links > a:focus-visible,
.im-links .mm-trigger:focus-visible,
.im-cta:focus-visible {
  outline: 2px solid var(--im-navtxh);
  outline-offset: 3px;
}
/* o submenu é o mega-menu do site.css; o que se ajusta aqui é o que o global
   crava e não serve nesta barra: a família e a cor do gatilho */
.im-links .mm-item {
  position: relative;
}
.im-links .mm-trigger {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  opacity: 1;
}
.im-links .mm-caret {
  width: 14px;
  height: 14px;
}
.im-links .mm-trigger[aria-expanded="true"] .mm-caret {
  transform: rotate(180deg);
}
.im-links .mm-panel {
  top: calc(100% + 14px);
  transform: translateX(-50%) translateY(6px);
  background: rgba(6, 12, 34, 0.88);
  border-color: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(24px) saturate(1.35);
  -webkit-backdrop-filter: blur(24px) saturate(1.35);
  box-shadow:
    0 30px 72px -28px rgba(0, 0, 0, 0.76),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition:
    opacity 0.28s var(--ease-soft),
    transform 0.28s var(--ease-soft);
}
.im-links .mm-panel.open {
  transform: translateX(-50%) translateY(0);
}
.im-links .mm-panel a {
  font-family: var(--font);
  color: rgba(255, 255, 255, 0.82);
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.im-links .mm-panel a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}
.im-links .mm-lbl {
  font-family: var(--font);
}
/* a seta diagonal marca o link que sai desta página; quem não tem seta é âncora
   daqui mesmo */
.im-fora {
  width: 12px;
  height: 12px;
  flex: none;
  opacity: 0.5;
}
/* a CTA da barra é o bloco sólido: ela precisa vencer o fundo animado nos dois
   momentos, e é o único elemento com fundo próprio na barra */
.im-cta {
  flex: none;
  font-weight: 600;
  white-space: nowrap;
  min-height: 46px;
  padding: 12px clamp(18px, 1.53vw, 22px);
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  /* a mesma pele teal 3D do .btn-teal, na pílula do nav */
  color: #031b22;
  background: linear-gradient(180deg, #79ddd7 0%, #50c2bd 68%, #3ca49f 100%);
  border: 1px solid rgba(218, 255, 252, 0.25);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -2px 0 rgba(13, 84, 84, 0.42),
    0 0 20px -8px rgba(91, 192, 190, 0.52);
  transition:
    transform 0.2s,
    filter 0.25s ease,
    box-shadow 0.25s ease;
}
.im-cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.07);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -2px 0 rgba(13, 84, 84, 0.4),
    0 0 26px -8px rgba(91, 192, 190, 0.6);
}
.im-burger {
  display: none;
  flex: none;
}

/* ---- o conteúdo da hero: coluna única, centrada ---- */
.im-body {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* O vão do miolo escala pela ALTURA, e não pela largura: é a altura que
     aperta a hero, e um vão em vw abria em tela larga e baixa justamente onde
     faltava espaço. O ritmo não é uniforme: o símbolo fica perto do título (é
     acessório dele), e o respiro cresce até as ações. */
  gap: clamp(16px, 2.4vh, 30px);
  padding-bottom: clamp(24px, 4.4vh, 54px);
}
.im-body > .im-mark {
  margin-bottom: clamp(-4px, -0.6vh, 0px);
}
.im-body > .im-sub {
  margin-top: clamp(2px, 0.8vh, 10px);
}
.im-body > .im-acoes {
  margin-top: clamp(6px, 1.6vh, 20px);
}
.im-mark img {
  width: clamp(42px, 4vw, 56px);
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 30px rgba(91, 192, 190, 0.35));
}
.im-t {
  margin: 0;
  display: flex;
  flex-direction: column;
  /* O título escala pelo lado que aperta, e não só pela largura: em notebook
     (1440 a 1600 de largura com 650 a 750 de altura, o que dá o Windows a 125%)
     a medida em vw batia no teto de 86px e o título sozinho comia um terço do
     painel, espremendo apoio, ações e a régua contra a borda. O termo em vh é o
     que segura isso; em tela alta ele nunca é o menor e nada muda. */
  font-size: clamp(38px, min(6.1vw, 11vh), 86px);
  /* Os pesos são invertidos por pedido da autora: a primeira linha em médio e a
     segunda em bold, e não o contrário. Quem carrega a frase passa a ser a área
     do negócio, que é o que muda a cada giro. A Manrope entra variável de 400 a
     800, então 500 e 700 são pesos reais. */
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.im-t-a {
  color: #fff;
}
/* A segunda linha é a área do negócio que muda a cada giro, e é ela que a
   autora pediu em destaque: teal sólido com um halo curto. O brilho é
   text-shadow, nunca gradiente em texto, e nasce da mesma cor do token. */
.im-t-b {
  color: var(--teal);
  font-weight: 700;
  /* halo curto e discreto: ele marca a linha sem acender o fundo em volta */
  text-shadow:
    0 0 18px rgba(91, 192, 190, 0.12),
    0 0 42px rgba(91, 192, 190, 0.045);
}
/* a palavra que gira vem num <em>, que o navegador inclina por padrão: aqui ela
   é a segunda linha do título, e título não é ênfase tipográfica */
.im-t-b em,
.im-t-b .rotate-word {
  font-style: normal;
}
.im-ponto {
  font-style: normal;
  color: inherit;
}
/* Duas linhas, por pedido da autora: a medida cresce até caber a frase inteira
   em dois versos, e o `balance` reparte as palavras entre eles em vez de deixar
   a segunda linha curta. O `min(...,100%)` é o que impede a medida larga de
   passar do respiro do painel nas telas em que ela não cabe. Em tela estreita a
   frase volta a quebrar quantas vezes precisar: ali duas linhas é impossível. */
.im-sub {
  max-width: min(88ch, 100%);
  margin: 0;
  font-size: clamp(15px, 1.15vw, 19px);
  line-height: 1.55;
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: #c4cae0;
}
.im-acoes {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 22px);
  flex-wrap: wrap;
  justify-content: center;
}
.im-acao {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 99px;
  padding: 15px 26px;
}
.im-seta {
  width: 15px;
  height: 15px;
  flex: none;
  opacity: 0.72;
}
/* a ação secundária é traço de vidro, e não bloco: ela não disputa com a vaga */
.im-acao-alt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 99px;
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s;
}
.im-acao-alt:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}

/* ---- os dois dados nos cantos da base do painel ---- */
.im-foot {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  padding-top: clamp(4px, 1vh, 12px);
}
.im-onde {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.im-onde svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--teal);
}
.im-quando {
  color: rgba(255, 255, 255, 0.78);
}

/* Abaixo de 1180px os cinco itens e a CTA deixam de caber com o respiro da
   pílula: a barra passa a mostrar o logotipo e o botão de menu, e os links vão
   para a gaveta (o .nav-drawer do site.css, montado no lp.js a partir destes
   mesmos elementos, sem duplicar markup). */
@media (max-width: 1180px) {
  .im-hero,
  .im-hero.is-boxed,
  .im-hero.im-medindo {
    --im-navpl: 15px;
    --im-navpr: 15px;
    --im-gapw: 16px;
    --im-navmax: 100vw;
  }
  .im-island {
    flex-wrap: nowrap;
  }
  .im-sp,
  .im-sp-e {
    flex-basis: 0;
    flex-grow: 1;
  }
  .im-links,
  .im-cta {
    display: none;
  }
  .im-burger {
    display: flex;
  }
}
/* A gaveta reusa o componente global (.nav-drawer, .nd-backdrop, .nd-panel,
   .nd-back, .nd-cta): ele já entra da direita, já desfoca o fundo e já trata
   movimento reduzido. Aqui só se ajusta o que o global não cobre. */
#imGaveta .nd-panel {
  font-family: var(--font);
  color: #fff;
  background: rgba(6, 12, 34, 0.9);
  border-left-color: rgba(255, 255, 255, 0.15);
  box-shadow: -28px 0 72px -34px rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
}
#imGaveta .nd-panel a:not(.nd-cta) {
  font-family: var(--font);
  font-weight: 600;
}
#imGaveta .nd-cta {
  background: var(--teal);
  border: 1px solid var(--teal);
  color: #04122a;
  font-weight: 600;
  border-radius: 99px;
  padding: 13px 20px;
}
#imGaveta .nd-cta:hover {
  opacity: 0.92;
}

/* Com a barra fixa, toda âncora precisa parar abaixo dela: a conta é a altura
   da barra mais a distância dela ao topo, mais um respiro. As seções vivem fora
   da .im-hero e não herdam as variáveis dela, por isso a conta se repete. */
:root {
  --im-navtop: calc(clamp(6px, 0.9vw, 12px) + clamp(20px, 1.8vw, 24px));
  --im-navh: 72px;
}
#top,
#a-imersao,
#dois-dias,
#quem-conduz,
#inscricao,
#faq {
  scroll-margin-top: calc(var(--im-navtop) + var(--im-navh) + 18px);
}

/* Sem movimento: os dois estados da barra continuam corretos, o que sai é a
   interpolação entre eles. */
@media (prefers-reduced-motion: reduce) {
  .im-panel,
  .im-nav,
  .im-island,
  .im-glass::before,
  .im-sp,
  .im-cta,
  .im-bg {
    transition: none;
  }
}
/* enquanto o JS mede a barra (e no primeiro quadro da página) nada anima */
.im-hero.im-sem-transicao,
.im-hero.im-sem-transicao * {
  transition: none !important;
}

/* o eyebrow de vidro teal continua servindo o resto da página (à mesa com o
   fundador), e por isso não saiu junto com a hero antiga */
.badge-pill {
  background: linear-gradient(180deg, rgba(91, 192, 190, 0.1), rgba(91, 192, 190, 0.04));
  border-color: rgba(91, 192, 190, 0.22);
  box-shadow:
    0 0 22px rgba(91, 192, 190, 0.12),
    0 0 30px rgba(0, 237, 232, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color: #fff;
}
/* a fila de botões do fecho da página */
.lp-hero-cta {
  display: flex;
  gap: 14px;
  margin: 0;
  flex-wrap: wrap;
}
.rotate-word {
  display: inline-block;
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}
.rotate-word.swap {
  opacity: 0;
  transform: translateY(6px);
}
@media (prefers-reduced-motion: reduce) {
  .rotate-word {
    transition: none;
  }
}

/* ---- a régua de destaques, solta na base do painel ----
   Sem moldura, por pedido da autora em 28/08: o conteúdo passa direto sobre o
   painel, sem borda, sem fundo e sem caixa. Da referência da Human Academy
   ficam o rótulo miúdo por cima e o tom baixo do conteúdo.
   Como o texto encosta no shader, ele não pode ser tão apagado quanto lá: o
   véu que segurava o contraste saiu junto com a caixa, então quem sustenta a
   leitura agora é a opacidade do próprio texto (medida abaixo do piso AA com
   os valores da referência, e recalibrada aqui). */
/* O vão daqui é o que separa a régua da linha de data e local, e como a régua
   está travada na base do painel, aumentá-lo é o que sobe os dois dados. */
.im-regua {
  position: relative;
  z-index: 2;
  margin-top: clamp(30px, 4.6vh, 56px);
  padding-top: clamp(6px, 1vh, 12px);
}
.hero-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* o corte nas pontas é máscara, e não uma sombra por cima: assim ele funciona
     sobre o shader, que muda de cor o tempo todo */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.hero-marquee .hm-track {
  display: flex;
  align-items: center;
  width: max-content;
  /* O passo é a largura de UMA sequência de itens, que o JS mede e escreve
     aqui: o -50% fixo do bloco duplicado abria um buraco no fim da volta em
     tela larga. Os valores abaixo são o que vale sem JS. */
  --hm-passo: 50%;
  --hm-tempo: 40s;
  animation: hmScroll var(--hm-tempo) linear infinite;
}
.hero-marquee:hover .hm-track {
  animation-play-state: paused;
}
.hero-marquee .hm-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 26px;
  font-size: 14px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.74);
  white-space: nowrap;
}
.hero-marquee .hm-item b {
  color: rgba(255, 255, 255, 0.94);
  font-weight: 600;
}
/* o ponto perdeu o halo e virou um sinal de 5px: ele separa os itens, não
   compete com eles */
.hero-marquee .hm-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex: none;
  background: var(--teal);
  opacity: 0.72;
}
@keyframes hmScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-1 * var(--hm-passo)));
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-marquee .hm-track {
    animation: none;
  }
}

@media (max-width: 820px) {
  /* No toque a barra encolhe e volta a ocupar a faixa inteira: com dois
     elementos só, a largura de conteúdo deixaria uma pílula boiando no meio da
     tela. O logotipo fica na ponta esquerda e o menu na direita. */
  .im-hero {
    --im-navpl: 14px;
    --im-navpr: 10px;
    --im-navpy: 9px;
    --im-navh: 60px;
    --im-navr: 30px;
    --im-navmax: 100vw;
  }
  :root {
    --im-navh: 60px;
  }
  .im-panel {
    min-height: calc(100svh - var(--im-inset) * 2);
    padding-left: clamp(18px, 5vw, 28px);
    padding-right: clamp(18px, 5vw, 28px);
  }
  .im-t {
    /* no toque o título é a peça: um degrau acima dos 38px do clamp */
    font-size: clamp(44px, 12vw, 52px);
    letter-spacing: -0.03em;
    line-height: 1.06;
  }
  /* as ações empilham centradas e mais estreitas: pílula, não faixa */
  .im-acoes {
    width: 100%;
    flex-direction: column;
  }
  .im-acao,
  .im-acao-alt {
    flex: 0 1 auto;
    width: min(100%, 250px);
    justify-content: center;
  }
  /* o miolo deixa de ocupar a sobra: a data e o local sobem para logo abaixo
     das ações, e quem desce até a base do painel é só a régua */
  .im-body {
    flex: 0 0 auto;
    margin-top: auto;
  }
  .im-foot {
    gap: 10px;
    margin-top: clamp(18px, 3.4vh, 30px);
    font-size: 11px;
    letter-spacing: 0.08em;
  }
  .im-regua {
    margin-top: auto;
    padding-top: 6px;
  }
  /* a tarja cresce: é ela que fecha o painel */
  .hero-marquee .hm-item {
    font-size: 14.5px;
    padding: 0 22px;
  }
}
@media (max-width: 520px) {
  .im-wordmark {
    font-size: 15px;
  }
  .im-foot {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 10px;
  }
  /* na tela estreita o rodapé continua em uma linha só, e quem sai é o nome da
     casa: a cidade é o dado que importa ali */
  .im-onde-casa {
    display: none;
  }
}

/* foto da plateia (prova social) */
.proof-photo {
  position: relative;
  max-width: 1000px;
  margin: 40px auto 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow:
    0 40px 90px -50px rgba(0, 0, 0, 0.8),
    0 0 90px -34px rgba(91, 192, 190, 0.28);
}
.proof-photo img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 8.2;
  object-fit: cover;
  object-position: center;
}

/* ================= FAIXA DE CREDIBILIDADE ================= */
.cred {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  padding: 46px 0;
}
.cred .c {
  text-align: center;
}
.cred .n {
  font-family:var(--font);
  font-size: clamp(38px, 4.4vw, 58px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  color: #fff;
  text-shadow: 0 0 50px rgba(91, 192, 190, 0.3);
}
.cred .n.word {
  font-size: clamp(22px, 2.4vw, 30px);
  color: var(--teal);
}
.cred .l {
  font-size: 13.5px;
  color: var(--muted);
  margin-top: 12px;
  line-height: 1.45;
  max-width: 200px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 760px) {
  .cred {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
}

/* ================= PROBLEMA (dois extremos × o meio) ================= */
.extremes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 48px;
}
.extreme {
  border-radius: 18px;
  padding: 28px 24px;
  text-align: left;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
  border: 1px solid var(--line-2);
}
.extreme .tag {
  font-family:var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.extreme h3 {
  font-size: 19px;
  font-weight: 600;
  margin: 10px 0 8px;
  letter-spacing: -0.02em;
  color: #fff;
}
.extreme p {
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.6;
}
.middle {
  margin-top: 28px;
  text-align: center;
}
/* traço teal centralizado entre o subtítulo e a frase */
.middle::before {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  border-radius: 2px;
  background: var(--teal);
  margin: 0 auto 22px;
}
.middle p {
  font-size: clamp(18px, 2.1vw, 24px);
  color: #fff;
  line-height: 1.5;
  letter-spacing: -0.02em;
  max-width: 820px;
  margin: 0 auto;
  font-weight: 400;
}
.middle b {
  color: var(--teal);
  font-weight: 600;
}
@media (max-width: 760px) {
  .extremes {
    grid-template-columns: 1fr;
  }
}

/* ================= DOBRA DE DUAS COLUNAS (título esq., texto dir.) =================
   O pedido é literal: título na coluna da esquerda, texto na da direita, e o
   canto inferior esquerdo guardado para a peça visual que ainda vai entrar.
   O título é o que preenche a coluna esquerda (na primeira tentativa ele
   atravessava a largura toda e deixava metade da dobra vazia sem motivo). */
.im-dobra {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(32px, 5vw, 78px);
  row-gap: clamp(24px, 3vh, 36px);
  align-items: start;
  text-align: left;
}
.im-dobra-lado {
  display: flex;
  flex-direction: column;
}
/* O texto de apoio é a pílula de vidro do PR #312 (a home v2), na veste
   escura: translúcida, borda clara e a faísca na cor da área. O desfoque de
   fundo pode não pegar quando um ancestral anima com transform (o .reveal), e
   por isso o fundo translúcido segura o desenho sozinho. */
.im-dobra-kick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin: 0 0 clamp(14px, 1.6vw, 20px);
  padding: 9px 16px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 10px 28px -14px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
}
.im-dobra-kick svg {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--teal);
}
.im-dobra .im-dobra-t {
  margin: 0;
  max-width: 15ch;
  /* um degrau abaixo do .h2 global: aqui ele divide a linha com o texto, e no
     tamanho cheio empurrava a coluna da direita para baixo */
  font-size: clamp(30px, 3.4vw, 50px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-align: left;
}
/* a segunda linha sustenta a frase sem competir com a primeira: no azul opaco
   do corpo de texto, o mesmo da coluna da direita (o branco apagado parecia
   cinza, por ordem da autora em 01/09) */
.im-dobra-t2 {
  color: var(--muted);
}
/* o vão guardado: ele não desenha nada, só reserva a área da peça futura, e
   agora vive embaixo do título, que é o canto pedido */
/* As duas dobras de duas colunas são as mais curtas da página, e com o padding
   de 88px das seções o vão embaixo delas virava meia tela vazia. Aqui a seção
   que contém uma delas fecha mais cedo. */
.pad:has(.im-dobra) {
  padding-bottom: clamp(28px, 4vh, 48px);
}
/* o espaço guardado é um respiro, e não meia dobra vazia: na primeira medida
   ele deixava 400px de nada embaixo do título */
.im-dobra-slot {
  min-height: clamp(24px, 5vh, 64px);
  margin-top: clamp(14px, 2vh, 24px);
}
.im-dobra-tx {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 24px);
  /* o texto fica no meio da altura da dobra, e não colado no topo: por pedido
     da autora, ele lê centrado em relação ao título ao lado */
  align-self: center;
}
.im-dobra-tx .lede {
  margin: 0;
  max-width: 50ch;
  text-align: left;
  /* as linhas da coluna liam com comprimentos muito desiguais (ordem da autora,
     01/09): o pretty evita a última linha curta e o órfão no fim da linha */
  text-wrap: pretty;
}
/* o segundo parágrafo segue o tom do lede acima (a mistura de branco com teal
   quebrava a leitura da coluna, por ordem da autora em 01/09): o corpo no azul
   opaco e só os destaques em branco */
.im-dobra-p2 {
  margin: 0;
  max-width: 48ch;
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.55;
  letter-spacing: -0.015em;
  color: var(--muted);
}
.im-dobra-p2 b {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
}
@media (max-width: 860px) {
  .im-dobra {
    grid-template-columns: 1fr;
    row-gap: 20px;
  }
  .im-dobra .im-dobra-t {
    max-width: none;
  }
  /* no toque o espaço guardado sai do meio da dobra: ali ele só empurraria o
     texto para baixo */
  .im-dobra-slot {
    display: none;
  }
  .im-dobra-tx {
    padding-top: 0;
  }
}

/* ================= TESE (statement) ================= */
.tese {
  text-align: center;
  position: relative;
}
.tese .anchor {
  font-family:var(--font);
  font-size: clamp(24px, 3.2vw, 40px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.25;
  max-width: 920px;
  margin: 30px auto 0;
  color: #fff;
}
.tese .anchor b {
  color: var(--teal);
  font-weight: 700;
}
/* "A virada": pirâmide da adoção (esquerda) + título/subtítulo (direita) */
.virada-grid {
  display: grid;
  grid-template-columns: minmax(0, 400px) 1fr; /* box (animação) compacto à esquerda, texto à direita */
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
  text-align: left;
}
.virada-box {
  order: 1;
}
.virada-copy {
  order: 2;
}
.virada-copy .h2 {
  text-align: left;
  margin: 14px 0 0;
}
.virada-copy .lede {
  text-align: left;
  max-width: none;
  margin: 18px 0 0;
}
.virada-copy .anchor {
  font-size: clamp(18px, 2vw, 24px);
  margin: 20px 0 0;
  max-width: none;
  text-align: left;
}
/* box da "virada": a animação + a frase-âncora dentro do mesmo card */
.virada-box {
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.008));
  border: 1px solid var(--line-2);
}
/* rede do líder nutrindo os colaboradores (luz sai do centro pra todos ao mesmo tempo) */
.leader-net {
  position: relative;
  width: 100%;
  aspect-ratio: 600 / 480;
  overflow: hidden;
  background: radial-gradient(58% 50% at 50% 42%, rgba(91, 192, 190, 0.12), transparent 70%);
}
/* rodapé do box: texto de apoio + frase-âncora */
.virada-foot {
  padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.6vw, 32px) clamp(22px, 2.8vw, 30px);
  border-top: 1px solid var(--line);
  text-align: left;
}
.vf-kicker {
  display: inline-block;
  font-family:var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 10px;
}
.virada-foot .anchor {
  font-family:var(--font);
  font-size: clamp(18px, 1.9vw, 23px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.32;
  color: #fff;
  margin: 0;
  max-width: none;
}
.virada-foot .anchor b {
  color: var(--teal);
  font-weight: 700;
}
.ln-circuit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.ln-circuit .ln-trace {
  stroke: rgba(91, 192, 190, 0.16);
  stroke-width: 2;
  fill: none;
}
.ln-circuit .ln-flow {
  stroke: #8defe9;
  stroke-width: 2.5;
  stroke-linecap: round;
  fill: none;
  stroke-dasharray: 8 100;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 4px rgba(91, 192, 190, 0.9));
  animation: lnFlow 2.8s linear infinite;
}
@keyframes lnFlow {
  to {
    stroke-dashoffset: -100;
  }
}
.ln-node {
  position: absolute;
  width: 11.5%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #aeb6d6;
  background: linear-gradient(180deg, #121a3a, #0c1230);
  border: 1px solid var(--line);
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  /* o traçado fica teal suavemente quando a luz do líder chega (~fim do ciclo do flow) */
  animation: lnFeed 2.8s linear infinite;
}
.ln-node svg {
  width: 46%;
  height: 46%;
}
@keyframes lnFeed {
  0%, 80% {
    border-color: var(--line);
    color: #aeb6d6;
    box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }
  94% {
    border-color: rgba(91, 192, 190, 0.6);
    color: #cfeeeb;
    box-shadow: 0 0 16px -2px rgba(91, 192, 190, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }
  100% {
    border-color: var(--line);
    color: #aeb6d6;
    box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }
}
.n-tl { left: 18.3%; top: 22.9%; }
.n-ml { left: 13.3%; top: 50%; }
.n-bl { left: 18.3%; top: 77.1%; }
.n-tr { left: 81.7%; top: 22.9%; }
.n-mr { left: 86.7%; top: 50%; }
.n-br { left: 81.7%; top: 77.1%; }
.ln-leader {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 22%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 20px;
  color: #fff;
  background: radial-gradient(circle at 50% 40%, rgba(91, 192, 190, 0.26), transparent 72%), #0b1126;
  border: 1px solid rgba(91, 192, 190, 0.45);
  box-shadow: 0 0 28px -12px rgba(91, 192, 190, 0.4); /* glow mais suave */
  z-index: 2;
  animation: lnPulse 2.8s ease-in-out infinite;
}
/* box translúcido que pulsa dentro/atrás do box do líder */
.ln-leader::before {
  content: "";
  position: absolute;
  inset: -16%;
  border-radius: 24px;
  background: rgba(91, 192, 190, 0.06);
  border: 1px solid rgba(91, 192, 190, 0.16);
  z-index: -1;
  animation: lnAura 2.8s ease-in-out infinite;
}
@keyframes lnAura {
  0%, 100% {
    transform: scale(1);
    opacity: 0.45;
  }
  50% {
    transform: scale(1.12);
    opacity: 0.85;
  }
}
.ln-leader svg {
  width: 44%;
  height: 44%;
}
@keyframes lnPulse {
  0%, 100% {
    box-shadow: 0 0 24px -12px rgba(91, 192, 190, 0.35);
  }
  50% {
    box-shadow: 0 0 36px -8px rgba(91, 192, 190, 0.6);
  }
}
@media (max-width: 820px) {
  .virada-grid {
    grid-template-columns: 1fr;
  }
  .virada-copy {
    order: -1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ln-flow,
  .ln-leader,
  .ln-leader::before,
  .ln-node {
    animation: none !important;
  }
}
.timeline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 36px;
  flex-wrap: wrap;
  font-family:var(--font);
  font-size: 14px;
  color: var(--muted);
}
.timeline span {
  padding: 8px 16px;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}
.timeline span.now {
  color: #04101f;
  background: var(--teal);
  border-color: var(--teal);
  font-weight: 700;
}
.timeline .arr {
  color: var(--slate);
}

/* ================= O QUE A PLATEIA LEVA ================= */
.leva {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 52px;
}
.leva .card {
  border-radius: 18px;
  padding: 26px 22px;
  text-align: left;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
  border: 1px solid var(--line-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: transform 0.25s;
}
.leva .card:hover {
  transform: translateY(-4px);
}
.leva .ic {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(150deg, #6fd6cf 0%, #2f8f8c 100%);
  border: 1px solid rgba(127, 224, 207, 0.5);
  box-shadow:
    0 10px 24px -8px rgba(91, 192, 190, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  margin-bottom: 18px;
}
.leva .ic svg {
  width: 24px;
  height: 24px;
}
.leva h3 {
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  color: #fff;
  line-height: 1.3;
}
.leva p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.55;
}
@media (max-width: 900px) {
  .leva {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .leva {
    grid-template-columns: 1fr;
  }
}

/* ================= DEMO (o diferencial) ================= */
.demo-hl {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 36px;
  align-items: center;
  margin-top: 48px;
  border-radius: 24px;
  padding: 40px;
  background: linear-gradient(135deg, rgba(91, 192, 190, 0.1), rgba(91, 192, 190, 0.035));
  border: 1px solid rgba(91, 192, 190, 0.28);
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.8);
}
.demo-hl .eyebrow {
  font-family:var(--font);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
}
.demo-hl h2 {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 14px 0 16px;
  color: #fff;
}
.demo-hl p {
  font-size: 15.5px;
  color: #c9cee6;
  line-height: 1.65;
}
.demo-hl .ph {
  min-height: 280px;
}
@media (max-width: 860px) {
  .demo-hl {
    grid-template-columns: 1fr;
    padding: 28px;
  }
}

/* ----- "A sala": texto à esquerda + foto dos empresários à direita com tópicos (chips) sobrepondo ----- */
.sala {
  display: grid;
  grid-template-columns: 1fr 1.04fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  margin-top: 48px;
}
.sala-copy .eyebrow {
  font-family:var(--font);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
}
.sala-copy h2 {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 14px 0 16px;
  color: #fff;
}
.sala-copy p {
  font-size: 15.5px;
  color: #c9cee6;
  line-height: 1.65;
  max-width: 520px;
}
.sala-media {
  position: relative;
}
.sala-photo {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--line-2);
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.85);
}
.sala-photo img {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 11;
  object-fit: cover;
}
/* tópicos em retângulos com ícone, abaixo do texto */
.sala-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
.sala-chip {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 9px 15px 9px 10px;
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
  border: 1px solid var(--line-2);
  font-family:var(--font);
  font-size: 13.5px;
  color: #c9cee6;
}
.sala-chip b {
  color: #fff;
  font-weight: 600;
}
.sala-chip .ci {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  color: var(--teal);
  background: rgba(91, 192, 190, 0.12);
  border: 1px solid rgba(91, 192, 190, 0.3);
}
.sala-chip .ci svg {
  width: 16px;
  height: 16px;
}
@media (max-width: 860px) {
  .sala {
    grid-template-columns: 1fr;
  }
}

/* mock de chat da demo ao vivo (estilo Hub) */
.demo-chat {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: #0b141a;
  border: 1px solid var(--line);
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.85);
}
.dc-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 14px;
  background: #1f2c33;
}
.dc-bar .d {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.dc-bar .t {
  font-family:var(--font);
  font-size: 12.5px;
  color: #8fa0a8;
  margin-left: 6px;
}
.dc-bar .live {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family:var(--font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ff5f57;
}
.dc-bar .live::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff5f57;
  animation: pulseDot 1.2s ease-in-out infinite;
}
.dc-body {
  padding: 24px 18px;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.dc-msg {
  align-self: flex-start;
  max-width: 94%;
  background: #202c33;
  color: #e9edef;
  border-radius: 13px;
  border-top-left-radius: 4px;
  padding: 15px 17px;
  font-family:var(--font);
  font-size: 14px;
  line-height: 1.65;
}
.dc-msg b {
  color: #fff;
  font-weight: 600;
}
.dc-msg .up {
  color: var(--green);
  font-weight: 600;
}
.dc-msg .warn {
  color: #f6c945;
  font-weight: 600;
}
.dc-msg .time {
  display: block;
  text-align: right;
  font-size: 11px;
  color: #8fa0a8;
  margin-top: 10px;
}
.dc-cursor {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  background: var(--teal);
  vertical-align: text-bottom;
  animation: cursorBlink 1s steps(1) infinite;
}

/* ================= FORMATOS ================= */
.fmts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 48px;
}
.fmt {
  border-radius: 18px;
  padding: 30px 24px;
  text-align: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
  border: 1px solid var(--line-2);
  transition:
    transform 0.25s,
    border-color 0.25s;
}
.fmt:hover {
  transform: translateY(-4px);
  border-color: rgba(91, 192, 190, 0.4);
}
.fmt.base {
  border-color: rgba(91, 192, 190, 0.4);
  background: linear-gradient(180deg, rgba(91, 192, 190, 0.08), rgba(255, 255, 255, 0.01));
}
.fmt .t {
  font-family:var(--font);
  font-size: 40px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.03em;
}
.fmt .t small {
  font-size: 18px;
  color: var(--muted);
  font-weight: 500;
}
.fmt .d {
  font-size: 14px;
  color: var(--muted);
  margin-top: 10px;
  line-height: 1.5;
}
.fmt .badge {
  display: inline-block;
  margin-top: 14px;
  font-family:var(--font);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  background: rgba(91, 192, 190, 0.1);
  border: 1px solid rgba(91, 192, 190, 0.3);
  padding: 4px 10px;
  border-radius: 7px;
}
.fmts-note {
  text-align: center;
  margin-top: 26px;
  font-size: 15px;
  color: var(--muted);
}
.fmts-note b {
  color: rgba(255, 255, 255, 0.9);
}
@media (max-width: 760px) {
  .fmts {
    grid-template-columns: 1fr;
  }
}

/* ================= À MESA COM O FUNDADOR (card do Figma) ================= */
.founder {
  margin-top: clamp(20px, 3.5vw, 44px); /* folga menor: sobe a seção (a foto ainda vaza pelo topo) */
}
/* O card mantém a moldura e a profundidade da composição. Apenas o rótulo
   "À mesa com o fundador" fica solto, sem pílula ou halo. */
.founder-card {
  position: relative;
  width: 100%;
  aspect-ratio: 1212 / 558;
  border-radius: 30px;
  background:
    linear-gradient(142deg, rgba(255, 255, 255, 0.135) 0%, rgba(255, 255, 255, 0.055) 46%, rgba(255, 255, 255, 0.085) 100%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28),
    0 20px 44px -30px rgba(0, 0, 0, 0.85);
}
/* marca d'água: símbolo Marvee transparente, atrás do recorte do Manoel */
.founder-card .fc-watermark {
  position: absolute;
  right: 4%;
  top: -6%;
  width: 58%;
  height: 94%;
  object-fit: contain;
  /* atrás do recorte ela é textura, não desenho: mais clara, as duas asas do
     símbolo deixam de ler como dois círculos soltos */
  opacity: 0.45;
  pointer-events: none;
  z-index: 1;
}
/* o recorte e o selo andam juntos: o selo é posicionado em cima da foto, e não
   do card, para não se soltar do ombro quando a largura muda */
.founder-card .fc-fig {
  position: absolute;
  /* a mesma presença do recorte anterior: figura grande, colada na direita, e o
     corte na base em vez do topo (o retrato novo é de corpo inteiro). A 190% de
     altura a cabeça dele mede o mesmo que media antes. */
  right: 4%;
  bottom: -73%;
  height: 188%;
  /* a cabeça sai por cima do card, como saía no recorte anterior. Quem corta a
     base já não é o overflow do card (ele voltou a ser visível, senão o topo
     seria cortado também): é esta máscara, que termina exatamente na linha de
     baixo do card. 61,2% = (15% que vaza + 100% do card) / 188% da figura. */
  mask-image: linear-gradient(to bottom, #000 0 61.2%, transparent 61.2%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0 61.2%, transparent 61.2%);
  z-index: 2;
  display: block;
}
.founder-card .fc-photo {
  display: block;
  height: 100%;
  width: auto;
}
.founder-card .fc-badge {
  position: absolute;
  /* na quina alta do ombro direito dele, cruzando a borda do corpo: metade do
     selo pousa na camiseta e metade fica no fundo do card */
  left: 24%;
  top: 28%;
  width: 20%;
  height: auto;
  z-index: 3;
  pointer-events: none;
}
.founder-card .fc-copy {
  position: absolute;
  left: 6.1%;
  top: 50%;
  transform: translateY(-50%);
  /* para a última linha do parágrafo nunca alcançar o recorte da direita: o
     texto termina em 46% e o ombro dele só começa depois de 50% */
  width: 40%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.founder-card .fc-eyebrow {
  margin: 0 0 clamp(18px, 2.4vw, 30px);
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--teal);
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.founder-card .fc-name {
  font-size: clamp(30px, 4.35vw, 52px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1;
  color: #fff;
  margin: 0 0 clamp(10px, 1.4vw, 16px);
}
.founder-card .fc-role {
  font-size: clamp(16px, 1.85vw, 22px);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 clamp(16px, 2vw, 24px);
}
.founder-card .fc-text {
  font-size: clamp(15px, 1.78vw, 21px);
  line-height: 1.4;
  color: #7e83a6;
  margin: 0;
}
@media (max-width: 820px) {
  .founder {
    margin-top: 40px;
  }
  .founder-card {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  /* no toque o mesmo recorte desce para baixo do texto, centrado, e a marca
     d'água vai atrás dele, como no desktop */
  .founder-card .fc-watermark {
    left: 50%;
    right: auto;
    top: auto;
    bottom: -2%;
    width: 125%;
    height: 58%;
    transform: translateX(-50%);
    opacity: 0.8;
  }
  .founder-card .fc-fig {
    position: relative;
    right: auto;
    bottom: auto;
    z-index: 2;
    mask-image: none;
    -webkit-mask-image: none;
    /* a mesma presença do desktop: a figura grande, cortada na altura da
       cintura pela base da janela (o overflow corta o que passa) */
    width: min(92%, 360px);
    height: min(106vw, 420px);
    overflow: hidden;
    margin: 0 auto;
    order: 1;
  }
  .founder-card .fc-photo {
    width: 100%;
    height: auto;
  }
  /* a janela mudou de medida, e o ombro mudou de lugar dentro dela */
  .founder-card .fc-badge {
    top: 46%;
    left: 16%;
  }
  .founder-card .fc-copy {
    position: static;
    top: auto;
    transform: none; /* reseta o translateY(-50%) do desktop (evitava o vão) */
    width: auto;
    order: -1; /* texto acima da imagem */
    align-items: flex-start; /* Figma mobile: texto alinhado à esquerda */
    text-align: left;
    padding: 40px 30px 20px;
  }
  /* nome um pouco menor no mobile, como no Figma */
  .founder-card .fc-name {
    font-size: 27px;
  }
}

/* ================= COMO FUNCIONA ================= */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 48px;
}
.step {
  text-align: left;
  padding: 28px 24px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01));
  border: 1px solid var(--line-2);
}
.step .num {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-family:var(--font);
  font-weight: 700;
  font-size: 18px;
  color: var(--teal);
  background: rgba(91, 192, 190, 0.1);
  border: 1px solid rgba(91, 192, 190, 0.3);
  margin-bottom: 18px;
}
.step h3 {
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.step p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
}
@media (max-width: 760px) {
  .steps {
    grid-template-columns: 1fr;
  }
}

/* ================= BOOKING ================= */
/* inscrição: texto à esquerda, formulário à direita */
.enroll-grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
  text-align: left;
  margin-top: 8px;
}
.enroll-copy .h2 {
  text-align: left;
  margin-top: 14px;
}
.enroll-copy .lede {
  text-align: left;
  max-width: none;
  margin: 14px 0 0;
}
.booking {
  width: 100%;
  /* mais estreito por ordem da autora (01/09): o formulário largo espalhava
     os campos e cansava a leitura */
  max-width: 640px;
  justify-self: end;
  margin: 0;
  border-radius: 20px;
  padding: clamp(24px, 2.4vw, 30px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
  border: 1px solid rgba(91, 192, 190, 0.28);
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.7);
}
@media (max-width: 820px) {
  .enroll-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .booking {
    justify-self: center;
  }
}
.booking .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  text-align: left;
}
.field.full {
  grid-column: 1 / -1;
}
.field label {
  font-family:var(--font);
  font-size: 13px;
  font-weight: 500;
  color: #c9cee6;
}
.field label .req {
  color: var(--teal);
}
.field input,
.field select,
.field textarea {
  font-family:var(--font);
  font-size: 15px;
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 11px 13px;
  outline: none;
  transition: border-color 0.2s;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--teal);
}
.field textarea {
  resize: vertical;
  min-height: 72px;
}
.field select {
  appearance: none;
  cursor: pointer;
}
.booking .btn {
  width: 100%;
  /* o botão 3D tem relevo pra cima: com 6px ele encostava na caixa de texto */
  margin-top: 18px;
  font-size: 16px;
  padding: 14px;
}
.booking .formfoot {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 14px;
  text-align: center;
}
.booking .alt {
  text-align: center;
  margin-top: 16px;
  font-size: 14px;
  color: var(--muted);
}
.booking .alt a {
  color: var(--teal);
  font-weight: 600;
}
@media (max-width: 560px) {
  .booking {
    padding: 22px 18px;
  }
  .booking .grid {
    grid-template-columns: 1fr;
  }
}

/* ===== formulário de inscrição (form próprio, sem embed do HubSpot) =====
   Reaproveita .field/.grid/.booking/.btn-teal do restante do site. Aqui só
   cobrimos o que o CSS do HubSpot cobria antes: seta nos selects (o
   appearance:none de .field select tira a nativa), cor das opções no Windows
   e o feedback de erro do envio. */
#imersaoForm select {
  background-color: rgba(255, 255, 255, 0.04);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235bc0be' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 15px;
  padding-right: 38px;
}
/* fundo/texto explícitos nas opções: sem isso o Windows renderiza texto branco em fundo branco (opções invisíveis) */
#imersaoForm select option {
  background: var(--card);
  color: #fff;
}
#imersaoForm select option[disabled] {
  color: var(--muted);
}
#imersaoForm .feedback {
  min-height: 0;
  margin: 10px 0 0;
  font-size: 12.5px;
  text-align: center;
}
#imersaoForm .feedback.err {
  color: #ff8a8a;
}
/* autocomplete de Cidade/Estado: dropdown no tema escuro */
#imersaoForm .city-ac {
  position: relative;
}
#imersaoForm .city-ac-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: #0a1030;
  border: 1px solid color-mix(in srgb, var(--teal) 35%, var(--line));
  border-radius: 12px;
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.85);
  max-height: 256px;
  overflow-y: auto;
  display: none;
}
#imersaoForm .city-ac-menu.open {
  display: block;
}
#imersaoForm .city-ac-item {
  padding: 9px 12px;
  border-radius: 8px;
  font-family:var(--font);
  font-size: 14px;
  color: #c9cee6;
  cursor: pointer;
}
#imersaoForm .city-ac-item:hover,
#imersaoForm .city-ac-item.active {
  background: color-mix(in srgb, var(--teal) 16%, transparent);
  color: #fff;
}

/* faixa de logos deslizando (prova social) — reusa @keyframes tmMove do site.css */
.logos {
  position: relative;
  max-width: 940px;
  margin: 44px auto 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.logos .track {
  display: flex;
  width: max-content;
  animation: tmMove 28s linear infinite;
}
.logos .grp {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-right: 24px;
}
.logo-ph {
  flex: none;
  width: 158px;
  height: 64px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  border: 1.5px dashed rgba(91, 192, 190, 0.3);
  background: linear-gradient(180deg, rgba(91, 192, 190, 0.05), rgba(255, 255, 255, 0.01));
  font-family:var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.logos-note {
  text-align: center;
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--muted);
}

/* horizonte do fecho — tint teal (sobrescreve o roxo do site.css) */
.final-arc {
  margin-top: 4px;
  height: 150px;
  overflow: hidden;
}
.final-arc .aglow {
  background: radial-gradient(circle at 50% 105%, rgba(91, 192, 190, 0.5), transparent 68%);
}
.final-arc .planet {
  box-shadow: 0 -30px 80px -20px rgba(91, 192, 190, 0.28);
  /* trava a altura da caixa do planet (o site.css usa aspect-ratio que gera ~2352px) */
  aspect-ratio: auto;
  height: 300px;
}

/* ================= AUTORIDADE (citação WEF) ================= */
.authority {
  max-width: 760px;
  margin: 40px auto 0;
  text-align: left;
  border-left: 3px solid var(--teal);
  border-radius: 0 16px 16px 0;
  padding: 26px 30px;
  background: linear-gradient(180deg, rgba(91, 192, 190, 0.07), rgba(255, 255, 255, 0.012));
}
.authority .auth-logo {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  display: block;
  margin-bottom: 16px;
  box-shadow: 0 8px 24px -10px rgba(44, 105, 171, 0.7);
}
.authority .auth-lead {
  font-family:var(--font);
  font-size: clamp(17px, 1.9vw, 21px);
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1.4;
  margin-bottom: 12px;
}
.authority p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.65;
}
.authority p i {
  color: #c9cee6;
  font-style: italic;
}
.authority cite {
  display: block;
  margin-top: 16px;
  font-family:var(--font);
  font-size: 12.5px;
  font-style: normal;
  letter-spacing: 0.02em;
  color: var(--muted-2);
}
.authority cite a {
  color: var(--teal);
  text-decoration: none;
  border-bottom: 1px solid rgba(91, 192, 190, 0.3);
}
.authority cite a:hover {
  border-bottom-color: var(--teal);
}

/* ================= CASE METRICS (somos o nosso próprio case) ================= */
.case-metrics {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cm-row {
  display: flex;
  align-items: center;
  gap: 18px;
  border-radius: 14px;
  padding: 20px 22px;
  background: rgba(4, 8, 31, 0.5);
  border: 1px solid var(--line);
}
.cm-n {
  flex: none;
  min-width: 132px;
  font-family:var(--font);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--teal);
  text-shadow: 0 0 40px rgba(91, 192, 190, 0.3);
}
.cm-n small {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
}
.cm-l {
  font-family:var(--font);
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}
.cm-l b {
  color: #fff;
  font-weight: 600;
}
@media (max-width: 860px) {
  .cm-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .cm-n {
    display: flex;
    align-items: baseline;
    gap: 8px;
  }
  .cm-n small {
    margin-top: 0;
  }
}

/* foco visível (acessibilidade) já vem do site.css */

/* =======================================================================
   IMERSÃO MARVEE GESTÃO & IA — componentes próprios (sobre a base da palestra)
   ======================================================================= */

/* ----- faixa de formato (logística premium em 1 segundo) ----- */
.statband {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-radius: 18px;
  overflow: hidden;
}
.statband .sb {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.008));
  padding: 30px 18px;
  text-align: center;
}
.statband .n {
  font-family:var(--font);
  font-size: clamp(20px, 2.2vw, 27px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #fff;
  line-height: 1.1;
}
.statband .l {
  font-family:var(--font);
  font-size: 13px;
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.4;
}
@media (max-width: 900px) {
  .statband {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .statband {
    grid-template-columns: 1fr;
  }
}

/* ----- a fundação que você constrói (lista numerada) ----- */
/* grid: animação do Marvin à esquerda + cards à direita */
.build-grid {
  display: grid;
  grid-template-columns: 0.72fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  max-width: 1000px;
  margin: 44px auto 0;
  text-align: left;
}
.buildlist {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.buildlist .bl-item {
  display: flex;
  align-items: center;
  gap: 20px;
  border-radius: 16px;
  padding: 22px 24px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01));
  border: 1px solid var(--line-2);
}
/* número à esquerda do card */
.buildlist .bl-item p {
  flex: 1;
  order: 1;
}
.buildlist .bl-item .bl-num {
  order: 0;
}

/* box que segura a animação (compartilhado) */
.build-anim {
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(16px, 3.5%, 30px) 0;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
  border: 1px solid var(--line-2);
}

/* =======================================================================
   PRESERVADO (OFF NO PR): animação do "Marvin alimentado" (.marvin-circuit/.mc-*).
   Não é mais usada na página (substituída pela sequência .bn-* abaixo).
   Mantida para promover ao design system quando solicitado.
   ======================================================================= */
.build-anim .marvin-circuit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* o respiro das bordas vem do viewBox (-52 -52 464 464), não de transform:scale
     (independe do transform-origin do SVG, que varia entre navegadores mobile) */
}
.marvin-circuit .mc-trace {
  stroke: rgba(91, 192, 190, 0.16);
  stroke-width: 2;
  fill: none;
}
.marvin-circuit .mc-pad {
  fill: rgba(91, 192, 190, 0.4);
}
.marvin-circuit .mc-flow {
  stroke: #8defe9;
  stroke-width: 2.5;
  stroke-linecap: round;
  fill: none;
  stroke-dasharray: 7 100;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 4px rgba(91, 192, 190, 0.9));
  animation: mcFlow 4.2s linear infinite;
}
@keyframes mcFlow {
  to {
    stroke-dashoffset: -100;
  }
}
.mc-core {
  position: relative;
  z-index: 2;
  width: 33%;
  aspect-ratio: 1;
  border-radius: 26px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 42%, rgba(91, 192, 190, 0.28), transparent 72%), #0b1126;
  border: 1px solid rgba(91, 192, 190, 0.45);
  box-shadow: 0 0 40px -8px rgba(91, 192, 190, 0.5);
  animation: marvinPulse 3.6s ease-in-out infinite;
}
.mc-core img {
  width: 76%;
  height: 76%;
  object-fit: contain;
}
/* pulso bem suave, quase imperceptível */
@keyframes marvinPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 30px -10px rgba(91, 192, 190, 0.4);
  }
  50% {
    transform: scale(1.015);
    box-shadow: 0 0 40px -8px rgba(91, 192, 190, 0.55);
  }
}
/* box teal transparente atrás do Marvin, expande e volta (suave) */
.mc-aura {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 33%;
  aspect-ratio: 1;
  border-radius: 30px;
  background: rgba(91, 192, 190, 0.06);
  border: 1px solid rgba(91, 192, 190, 0.2);
  z-index: 1;
  transform: translate(-50%, -50%) scale(1);
  animation: mcAura 3.6s ease-in-out infinite;
}
@keyframes mcAura {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.4;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.3);
    opacity: 0.85;
  }
}

/* ----- "o que você constrói": workflow vertical (gatilho -> prompt -> enviar) que "roda" ----- */
.build-anim > .wf {
  position: relative;
  width: 100%;
  padding: 0 clamp(16px, 7%, 36px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
/* linha contínua atrás de toda a pilha (some atrás das boxes opacas, aparece nos vãos) */
.build-anim > .wf::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 34px;
  bottom: 34px;
  width: 2px;
  transform: translateX(-50%);
  background: var(--line);
  z-index: 0;
}
/* a luz que desce por trás da pilha */
.build-anim > .wf::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -12%;
  width: 2px;
  height: 64px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, #8defe9 50%, transparent);
  z-index: 0;
  animation: wfBeam 4.2s linear infinite;
}
@keyframes wfBeam {
  0% { top: -12%; opacity: 0; }
  8% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
.wf-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border-radius: 15px;
  background: linear-gradient(180deg, #141d3a, #0e1430); /* preenchido (opaco): a luz passa por trás */
  border: 1px solid var(--line);
  box-shadow: 0 10px 28px -22px rgba(0, 0, 0, 0.8);
  animation: wfRow 4.2s ease-in-out infinite;
}
/* tile do ícone: quadrado escuro com borda sutil e ícone claro */
.wf-ic {
  flex: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #eef1fa;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.wf-ic svg {
  width: 21px;
  height: 21px;
}
.wf-label {
  font-family:var(--font);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #eef1fa;
}
/* a linha (row) acende rápido (ataque seco) bem quando a luz encosta nela */
@keyframes wfRow {
  0%, 10%, 32%, 100% {
    border-color: var(--line);
  }
  13%, 18% {
    border-color: rgba(91, 192, 190, 0.7);
  }
}
/* vão entre as boxes (a linha/luz contínua de .wf aparece aqui) */
.wf-link {
  position: relative;
  height: clamp(42px, 5vw, 52px);
}
.wf-plus {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #0a0f24;
  border: 1px solid var(--line);
  color: var(--muted);
  box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.8);
  z-index: 2;
  animation: wfPlusLit 4.2s linear infinite;
}
.wf-plus svg {
  width: 13px;
  height: 13px;
}
/* o "+" preenche em teal quando a luz do conector conecta nele */
@keyframes wfPlusLit {
  0%, 6%, 24%, 100% {
    background: #0a0f24;
    border-color: var(--line);
    color: var(--muted);
  }
  14% {
    background: var(--teal);
    border-color: var(--teal);
    color: #04101f;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wf-row,
  .wf-plus,
  .build-anim > .wf::after {
    animation: none !important;
  }
}

/* frase grande abaixo do card 3: traço teal à esquerda + texto à direita */
.build-note {
  display: flex;
  gap: 16px;
  align-items: stretch;
  margin-top: 8px;
  padding: 4px 0;
}
.build-note::before {
  content: "";
  flex: none;
  width: 3px;
  border-radius: 2px;
  background: var(--teal);
}
.build-note p {
  font-size: 16px;
  line-height: 1.6;
  color: #c9cee6;
  margin: 0;
}
.build-note b {
  color: var(--teal);
  font-weight: 600;
}
@media (max-width: 820px) {
  .build-grid {
    grid-template-columns: 1fr;
  }
  .build-anim {
    max-width: 330px;
    margin: 0 auto;
    width: 100%;
  }
}

/* ----- vagas e datas: ingresso (portado do Scale, adaptado pro teal) -----
   [STANDBY] O ingresso saiu do ar em 28/08 por pedido da autora: o que ele
   dizia (data, local e formato) foi para o card do evento, no bento. O CSS
   fica aqui inteiro, para a peça voltar sem ser redesenhada. */
.encontro {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
  position: relative;
  background: linear-gradient(110deg, color-mix(in srgb, var(--teal) 22%, transparent), rgba(255, 255, 255, 0.02) 64%), #0a1030;
  border: 1.5px solid color-mix(in srgb, var(--teal) 40%, var(--line));
  border-radius: 22px;
  padding: 36px 40px;
  max-width: 720px;
  margin: 40px auto 0;
  text-align: left;
  box-shadow: 0 26px 64px -36px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.encontro .ticket-perf {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 212px;
  width: 0;
  border-left: 2px dashed color-mix(in srgb, var(--teal) 55%, var(--line));
  pointer-events: none;
  z-index: 1;
}
.encontro .ticket-perf::before,
.encontro .ticket-perf::after {
  content: "";
  position: absolute;
  left: -1px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg);
  transform: translateX(-50%);
}
.encontro .ticket-perf::before {
  top: -15px;
}
.encontro .ticket-perf::after {
  bottom: -15px;
}
.encontro .tx .tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family:var(--font);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 9px;
}
.encontro .tx .tag svg {
  width: 13px;
  height: 13px;
  flex: none;
}
.encontro .tx h3,
.encontro-alt h3 {
  font-family:var(--font);
  font-size: clamp(18px, 2vw, 23px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.16;
  color: #fff;
  margin: 0 0 9px;
}
.encontro .tx .when {
  margin-top: 16px;
}
.encontro .tx .when-date {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family:var(--font);
  font-size: clamp(26px, 3.4vw, 36px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: #fff;
}
.encontro .tx .when-date svg {
  width: 24px;
  height: 24px;
  color: var(--teal);
  flex: none;
}
.encontro .tx .when-place {
  font-size: 14px;
  color: var(--muted);
  margin-top: 8px;
}
.encontro .where {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex: none;
  width: 170px;
  padding-left: 24px;
}
/* desktop: legenda e serial rotacionados na vertical, acompanhando o barcode */
.encontro .where .cap,
.encontro .where .serial {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}
.encontro .where .cap {
  font-size: 10.5px;
  color: var(--teal);
  font-weight: 600;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.04em;
}
/* desktop: código de barras na vertical (barras horizontais empilhadas) */
.encontro .where .barcode {
  width: 42px;
  height: 124px;
  border-radius: 3px;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.9) 0 2px, transparent 2px 4px, rgba(255, 255, 255, 0.9) 4px 7px, transparent 7px 9px, rgba(255, 255, 255, 0.9) 9px 10px, transparent 10px 13px, rgba(255, 255, 255, 0.9) 13px 16px, transparent 16px 18px, rgba(255, 255, 255, 0.9) 18px 19px, transparent 19px 22px);
}
.encontro .where .serial {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  color: var(--muted);
}
@media (max-width: 820px) {
  .encontro {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 32px 26px;
    text-align: center;
  }
  .encontro .ticket-perf {
    display: none;
  }
  .encontro .tx .tag {
    justify-content: center;
  }
  .encontro .tx .when-date {
    justify-content: center;
  }
  .encontro .where {
    position: relative;
    flex-direction: column;
    width: auto;
    margin-top: 24px;
    padding: 24px 0 0;
    border-top: 2px dashed color-mix(in srgb, var(--teal) 55%, var(--line));
  }
  /* mobile: legenda/serial voltam a horizontal */
  .encontro .where .cap,
  .encontro .where .serial {
    writing-mode: horizontal-tb;
  }
  /* mobile: código de barras volta a horizontal */
  .encontro .where .barcode {
    width: 100%;
    height: 34px;
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0 2px, transparent 2px 4px, rgba(255, 255, 255, 0.9) 4px 7px, transparent 7px 9px, rgba(255, 255, 255, 0.9) 9px 10px, transparent 10px 13px, rgba(255, 255, 255, 0.9) 13px 16px, transparent 16px 18px, rgba(255, 255, 255, 0.9) 18px 19px, transparent 19px 22px);
  }
  /* bolinhas laterais (recortes do ingresso) nas pontas do picote horizontal */
  .encontro .where::before,
  .encontro .where::after {
    content: "";
    position: absolute;
    top: -15px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--bg);
  }
  .encontro .where::before {
    left: -41px;
  }
  .encontro .where::after {
    right: -41px;
  }
}
/* Segunda opção, logo abaixo do ingresso: a Marvee vai até a empresa
   (/imersao-in-company). Faixa discreta na mesma largura do .encontro (720px),
   em vidro neutro e tipografia menor: existe pra quem não pode vir, sem roubar a
   atenção da data do grupo presencial (o ingresso teal segue sendo o destaque). */
.encontro-alt {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 720px;
  margin: 16px auto 0;
  padding: 16px 22px;
  text-align: left;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.025);
  transition: border-color 0.25s;
}
.encontro-alt:hover {
  border-color: color-mix(in srgb, var(--teal) 34%, var(--line));
}
.encontro-alt .ea-tx {
  flex: 1 1 auto;
}
/* menor que o h3 do ingresso: herda família, peso e cor do .encontro .tx h3 */
.encontro-alt h3 {
  font-size: 16px;
  letter-spacing: -0.015em;
  margin-bottom: 3px;
}
.encontro-alt p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
.encontro-alt .btn {
  flex: none;
  white-space: nowrap; /* o rótulo nunca quebra em duas linhas */
}
@media (max-width: 820px) {
  .encontro-alt {
    flex-direction: column;
    text-align: center;
    gap: 14px;
    padding: 18px 20px;
  }
  .encontro-alt .btn {
    width: 100%;
  }
}

.buildlist .bl-num {
  flex: none;
  font-family:var(--font);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--teal);
  width: 44px;
}
.buildlist p {
  font-size: 16px;
  color: #c9cee6;
  line-height: 1.6;
}
.buildlist b {
  color: #fff;
  font-weight: 600;
}

/* ----- os dois dias ----- */
.days {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 52px;
  text-align: left;
}
.day {
  border-radius: 20px;
  padding: 32px 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
  border: 1px solid var(--line-2);
  display: flex;
  flex-direction: column;
}
.day-h {
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 18px;
  margin-bottom: 20px;
}
.day-k {
  display: inline-block;
  font-family:var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  background: rgba(91, 192, 190, 0.1);
  border: 1px solid rgba(91, 192, 190, 0.3);
  padding: 4px 12px;
  border-radius: 7px;
}
.day-h h3 {
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: #fff;
  margin-top: 14px;
}
.day ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
  flex: 1;
}
.day li {
  position: relative;
  padding-left: 24px;
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.55;
}
.day li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 10px rgba(91, 192, 190, 0.6);
}
.day-out {
  margin-top: 24px;
  border-radius: 13px;
  padding: 16px 18px;
  background: linear-gradient(180deg, rgba(91, 192, 190, 0.1), rgba(91, 192, 190, 0.02));
  border: 1px solid rgba(91, 192, 190, 0.3);
  font-size: 14.5px;
  color: #fff;
  line-height: 1.5;
}
.day-out span {
  display: block;
  font-family:var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 6px;
}
@media (max-width: 760px) {
  .days {
    grid-template-columns: 1fr;
  }
}

/* ----- os dois dias: layout fluído alternado (imagem + texto, zig-zag) ----- */
.days2 {
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 5vw, 72px);
  /* o card é um só e ocupa a calha inteira, por pedido da autora: em 1000px ele
     ficava menor que as outras dobras da página */
  margin: 52px auto 0;
  text-align: left;
}
/* ----- cada dia é um card só (anatomia do card da referência) -----
   A foto ocupa a coluna da esquerda dentro da caixa, com o número por cima, a
   etiqueta do arco no topo e a sede no rodapé; o conteúdo do dia fica na coluna
   da direita, na mesma caixa. Os dois cards têm a foto do mesmo lado, como na
   referência: o zigue-zague saiu com a mudança. */
.d2-card {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: stretch;
  border-radius: clamp(18px, 2vw, 26px);
  overflow: hidden;
  text-align: left;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.008));
  border: 1px solid var(--line-2);
  box-shadow: 0 34px 80px -52px rgba(0, 0, 0, 0.85);
}
.d2-foto {
  position: relative;
  isolation: isolate;
  min-height: clamp(260px, 30vw, 420px);
}
.d2-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* o laço de fotos: elas ocupam o mesmo quadro e trocam por fade */
.d2-slides {
  position: absolute;
  inset: 0;
}
.d2-slide {
  opacity: 0;
  transition: opacity 1.1s var(--ease-soft, ease);
}
.d2-slide.on {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  /* sem movimento, fica a primeira foto e nada troca */
  .d2-slide {
    transition: none;
  }
}
.d2-conteudo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: clamp(24px, 3vw, 40px) clamp(22px, 3vw, 42px);
  border-left: 1px solid var(--line-2);
}
.d2-conteudo h3 {
  font-size: clamp(24px, 2.8vw, 35px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: #fff;
  margin: 0;
}
.d2-conteudo .day2-tl {
  margin: 0;
}
/* ----- o card único dos dois dias -----
   Os dois cards viraram um só, maior, na anatomia da referência: a foto manda na
   coluna da esquerda, e a direita empilha pílulas, título, resumo, a linha de
   dados em três colunas e as ações. */
.d2-uno {
  /* a divisão da referência nova: o texto à esquerda e a foto à direita */
  grid-template-columns: minmax(0, 54fr) minmax(0, 46fr);
  /* o card é a peça da dobra, e não uma faixa: a altura vem da foto, abaixo */
  position: relative;
  border-color: rgba(255, 255, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015) 42%, rgba(255, 255, 255, 0.03));
  /* o "levemente 3D": luz na borda de cima, sombra funda embaixo e um segundo
     plano mais escuro atrás, para o card descolar do fundo da página */
  /* sem sombra projetada, por pedido da autora: atrás do card fica só o halo
     teal. O que sobra aqui é o relevo da própria borda. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 2px 0 rgba(255, 255, 255, 0.04);
}
/* A altura do card sai da foto, e não de um número solto: ela é quase quadrada
   (a proporção da referência), o que dá ao card inteiro os mesmos 2,3:1 de lá.
   O espaçador é um piso: se o conteúdo ao lado for mais alto, a linha estica e
   a foto acompanha, sem achatar. */
.d2-uno .d2-foto {
  min-height: 0;
}
.d2-uno .d2-foto::before {
  content: "";
  display: block;
  /* o teto em px segura o card em tela larga: sem ele a calha cresce, a foto
     puxa a altura e a coluna de texto vira vão (ordem da autora, 01/09) */
  padding-top: min(92%, 540px);
}

/* a foto é a segunda coluna: a borda que separava as duas troca de lado */
.d2-uno .d2-foto {
  order: 2;
}
.d2-uno .d2-conteudo {
  order: 1;
  border-left: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  isolation: isolate;
  /* o miolo fica agrupado no centro, com ritmo fixo entre os blocos: a sobra
     repartida (space-evenly) espalhava tudo em tela larga e a autora reprovou
     (01/09) */
  justify-content: center;
  gap: clamp(22px, 2.4vw, 30px);
  padding: clamp(24px, 2.6vw, 40px);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  /* o vidro: a camada translúcida deixa o glow teal de baixo atravessar, e o
     brilho diagonal faz a superfície ter direção de luz. Sem backdrop-filter de
     propósito: o card anima com transform na entrada, e transform em ancestral
     mata o desfoque do fundo. */
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.015) 34%, transparent 62%),
    linear-gradient(180deg, rgba(9, 15, 40, 0.6), rgba(6, 10, 30, 0.78));
}
/* A luz teal fica ATRÁS do card e só vaza pelas bordas, como na referência: por
   dentro o painel continua sendo vidro escuro. */
.days2 {
  position: relative;
}
.d2-glow {
  position: absolute;
  z-index: 0;
  inset: 18% -7% -16%;
  pointer-events: none;
  background: radial-gradient(56% 64% at 44% 66%, rgba(91, 192, 190, 0.44), rgba(91, 192, 190, 0.13) 52%, transparent 76%);
  filter: blur(76px);
}
.days2 .d2-card {
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: no-preference) {
  /* nada anima aqui: a nota existe para lembrar que o halo é estático */
}
/* A legenda da foto segue a do vídeo da sede: rótulo miúdo, a frase grande e a
   linha de apoio, tudo no canto inferior esquerdo. */
.d2-legenda {
  position: absolute;
  z-index: 2;
  left: clamp(18px, 2vw, 30px);
  right: clamp(18px, 2vw, 30px);
  bottom: clamp(18px, 2vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.d2-onde,
.d2-apoio {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.68);
}
.d2-frase {
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: #fff;
  max-width: 14ch;
}
.d2-apoio {
  max-width: 30ch;
}

/* Os dois arcos no acordeão da /hub, aqui em navy: título sempre à vista, o
   texto abre só no ativo, e o divisor de baixo é onde a barra do timer corre.
   Não há linha em cima do primeiro: a régua separa um do outro, não abre o
   bloco.
   O prefixo é .d2-ac porque .d2-arco já é a etiqueta no alto da foto: o nome
   curto colidia com ela, e o JS chegou a tratar a etiqueta como um item. */
.d2-acc {
  display: flex;
  flex-direction: column;
}
.d2-ac-item {
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.d2-ac-prog {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: left;
}
.d2-ac-prog.run {
  transform: scaleX(1);
  transition: transform 9s linear;
}
.d2-ac-h {
  margin: 0;
}
.d2-ac-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  width: 100%;
  padding: clamp(12px, 1.2vw, 16px) 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font);
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.52);
  transition: color 0.3s var(--ease-soft);
}
.d2-ac-head:hover {
  color: rgba(255, 255, 255, 0.78);
}
.d2-ac-item.is-open .d2-ac-head {
  color: #fff;
}
.d2-ac-head:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 4px;
  border-radius: 6px;
}
.d2-ac-n {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--teal);
}
.d2-ac-t {
  display: block;
  line-height: 1.25;
}
.d2-ac-body {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    max-height 0.5s var(--ease-soft),
    opacity 0.4s var(--ease-soft),
    visibility 0.5s;
}
.d2-ac-item.is-open .d2-ac-body {
  max-height: 220px;
  opacity: 1;
  visibility: visible;
}
.d2-ac-body p {
  margin: 0;
  padding-bottom: clamp(12px, 1.2vw, 16px);
  max-width: 46ch;
  font-size: clamp(14.5px, 1.15vw, 16px);
  line-height: 1.6;
  color: var(--muted);
}
.d2-ac-body b {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
  white-space: nowrap;
}

/* a grade 2x2 de dados da referência: ícone e nome na mesma linha, descrição
   embaixo */
.d2-feats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* o vão entre as linhas é menor que o entre as colunas: os subtítulos leem
     compactos, cada par título e texto como um bloco só */
  gap: 22px clamp(16px, 1.8vw, 26px);
}
.d2-feat-h {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 6px;
  font-size: clamp(15px, 1.25vw, 17px);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #fff;
}
.d2-feat-ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  color: var(--teal);
  background: linear-gradient(180deg, rgba(91, 192, 190, 0.22), rgba(91, 192, 190, 0.07));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 5px 10px -5px rgba(0, 0, 0, 0.75);
}
.d2-feat-ic svg {
  width: 15px;
  height: 15px;
}
.d2-feat-d {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
  /* as duas linhas repartem por igual: sem isso a primeira ia longa e a
     segunda ficava numa palavra (ordem da autora, 01/09) */
  text-wrap: balance;
}
.d2-feat-d b {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .d2-feats {
    grid-template-columns: 1fr;
  }
}

/* [STANDBY] a saída dos dois dias, do card anterior */
.d2-saida {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0;
  /* sem caixa, por pedido da autora: fica o traço na cor da área, à esquerda */
  padding: 2px 0 2px clamp(14px, 1.4vw, 18px);
  border-left: 2px solid var(--teal);
  font-size: clamp(14.5px, 1.15vw, 16px);
  line-height: 1.45;
  color: #fff;
}
/* Abaixo de 1600px a coluna de conteúdo é estreita, o texto quebra em mais
   linhas e é ele que passa a mandar na altura: aqui o miolo compacta, para o
   card não virar um bloco alto com a foto esticada. */
@media (max-width: 1600px) {
  .d2-uno .d2-conteudo {
    gap: 22px;
    padding: clamp(24px, 2.6vw, 36px);
  }
  .d2-uno .d2-conteudo h3 {
    font-size: clamp(24px, 2.4vw, 31px);
  }
  .d2-ac-head {
    padding: 11px 0;
    font-size: clamp(16px, 1.3vw, 18px);
  }
  .d2-ac-body p {
    font-size: 14.5px;
  }
  .d2-saida {
    padding: 2px 0 2px 14px;
    font-size: 14.5px;
  }
}
/* no celular a coluna é estreita: o título volta a poder quebrar, senão ele
   estoura a linha e a página ganha rolagem lateral */
@media (max-width: 700px) {
  .d2-uno .d2-conteudo h3 {
    text-wrap: balance;
  }
}
.d2-saida span {
  flex: none;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
}
.d2-uno .d2-conteudo h3 {
  font-size: clamp(23px, 2.2vw, 31px);
  /* uma linha só, por pedido da autora: sem teto de largura, ele só quebra se a
     coluna não der conta (celular) */
  max-width: none;
  text-wrap: nowrap;
}
/* o algarismo desce um pouco no card único: a foto é mais alta, e no 60% ele
   caía em cima dos rostos */
.d2-uno .d2-selo {
  top: 66%;
}
.d2-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.d2-pill {
  padding: 7px 14px;
  border-radius: 99px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.03);
}
.d2-p {
  margin: 0;
  max-width: 54ch;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.6;
  color: var(--muted);
}
.d2-p b {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
}
/* a linha de dados: rótulo miúdo em cima, conteúdo embaixo, como na referência */
.d2-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  margin: 0;
  padding-top: clamp(16px, 1.8vw, 22px);
  border-top: 1px solid var(--line-2);
}
.d2-cols > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.d2-cols dt {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
}
.d2-cols dd {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}
.d2-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
}
.d2-acoes .btn svg {
  width: 14px;
  height: 14px;
  opacity: 0.72;
}
.d2-link {
  /* mesmo corpo do .btn ao lado: as duas ações falam no mesmo tamanho
     (ordem da autora, 01/09; o botão também perdeu o btn-sm) */
  font-size: 15.5px;
  color: var(--muted);
  transition: color 0.2s;
}
.d2-link:hover {
  color: #fff;
}
/* [STANDBY] .d2-acoes e .d2-link ficaram sem uso em 01/09: a autora tirou as
   duas ações de dentro do card e pôs uma só embaixo dele, no lugar da nota
   "O percurso é ajustado a cada grupo". O CSS delas segue aqui caso voltem.
   A ação de baixo mora no vão que era da nota, com o mesmo respiro dela; e a
   grade 2x2 ganhou o respiro que a linha de ações ocupava lá dentro. */
.d2-uno .d2-feats {
  margin-top: clamp(10px, 1.4vw, 22px);
}
.d2-rod {
  display: flex;
  justify-content: center;
  margin-top: 26px;
}
.d2-rod .btn svg {
  width: 14px;
  height: 14px;
  opacity: 0.72;
}
/* a pílula do estado da turma, na ponta direita da foto */
.d2-vagas {
  position: absolute;
  right: clamp(14px, 1.6vw, 22px);
  top: clamp(14px, 1.6vw, 20px);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(6, 12, 34, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* a linha miúda embaixo do algarismo, com o que já está afirmado na página */
.d2-nota {
  /* o selo é column-reverse, então a menor ordem é a que fica por último na
     tela: é aqui que a nota pousa, embaixo da unidade */
  order: -1;
  max-width: 24ch;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.66);
}

/* a etiqueta do arco, no alto da foto */
.d2-arco {
  position: absolute;
  left: clamp(14px, 1.6vw, 22px);
  top: clamp(14px, 1.6vw, 20px);
  z-index: 2;
  padding: 7px 13px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(6, 12, 34, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* ----- foto do dia, com o número por cima -----
   Anatomia do card da Human Academy, que a autora mandou como referência para
   os dois dias: o algarismo grande assentado sobre a imagem, a unidade em
   maiúsculas miúdas embaixo dele e o lugar no rodapé. O que não veio de lá é o
   que não é verdade aqui: as pílulas de turma, horário e vagas ficam de fora
   enquanto esses dados não estiverem fechados. */
/* o véu existe para o número e o lugar lerem sobre qualquer parte da foto:
   ele escurece o centro e a base, que é onde os dois pousam */
.d2-scrim {
  position: absolute;
  inset: 0;
  /* sem raio próprio: o 18px fixo deixava as quinas da foto sem véu, e no canto
     de cima aparecia uma mordida clara */
  pointer-events: none;
  /* sem o algarismo no meio, o escuro do centro saiu: fica o topo, para as
     pílulas, e a base, onde a legenda pousa */
  background: linear-gradient(
    180deg,
    rgba(4, 8, 31, 0.42) 0%,
    transparent 26%,
    rgba(4, 8, 31, 0.5) 62%,
    rgba(4, 8, 31, 0.88) 100%
  );
}
.d2-selo {
  position: absolute;
  left: 50%;
  width: min(86%, 340px);
  /* 60% e não o centro geométrico: nas duas fotos as pessoas ocupam o terço de
     cima, e o algarismo centrado caía em cima dos rostos */
  top: 60%;
  transform: translate(-50%, -50%);
  margin: 0;
  display: flex;
  /* a ordem visual inverte a do DOM: o algarismo em cima, a palavra embaixo */
  flex-direction: column-reverse;
  align-items: center;
  gap: 6px;
  text-align: center;
  pointer-events: none;
}
.d2-n {
  font-size: clamp(58px, 7.4vw, 116px);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: #fff;
}
.d2-l {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}
.d2-lugar {
  position: absolute;
  left: clamp(16px, 2vw, 24px);
  bottom: clamp(14px, 1.8vw, 20px);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  pointer-events: none;
}
/* bullets como linha do tempo vertical (traço teal conectando) */
.day2-tl {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.day2-tl li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  color: var(--muted);
  line-height: 1.5;
}
/* ponto */
.day2-tl li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--teal) 13%, transparent);
  z-index: 1;
}
/* traço conectando cada ponto ao próximo — não existe no último item (para no check) */
.day2-tl li:not(.day2-end)::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 11px;
  width: 2px;
  height: calc(100% + 16px);
  background: color-mix(in srgb, var(--teal) 30%, var(--line));
  z-index: 0;
}
/* frase final destacada (sem box): check no fim da linha + resultado em branco */
.day2-tl .day2-end {
  margin-top: 6px;
  padding-left: 26px;
  color: #fff;
  font-weight: 500;
  font-size: 15.5px;
  line-height: 1.45;
}
.day2-tl .day2-end::before {
  display: none;
}
.day2-tl .day2-end .ek-check {
  position: absolute;
  left: -3px;
  top: 1px;
  width: 16px;
  height: 16px;
  padding: 3px;
  border-radius: 50%;
  background: var(--teal);
  color: #04101f;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--teal) 16%, transparent);
  z-index: 2;
}
.day2-tl .day2-end .ek {
  display: block;
  font-family:var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 4px;
}
@media (max-width: 860px) {
  /* no toque o card vira uma coluna: a foto em cima, o conteúdo embaixo, e a
     divisória troca de lado para continuar separando os dois */
  .d2-card {
    grid-template-columns: 1fr;
  }
  .d2-foto {
    min-height: clamp(220px, 52vw, 320px);
  }
  /* a foto vem primeiro, por pedido da autora: cena em cima, dados embaixo */
  .d2-uno .d2-foto {
    order: -1;
  }
  .d2-uno .d2-conteudo {
    order: 0;
  }
  /* no celular o card fala pela foto: o título e a chamada saem de cena, por
     ordem da autora (a legenda "2 dias presenciais" e as features seguram o
     contexto) */
  .d2-uno .d2-conteudo h3,
  .d2-uno .d2-conteudo > .d2-p {
    display: none;
  }
  .d2-conteudo {
    border-left: 0;
    border-top: 1px solid var(--line-2);
  }
}

/* ================= O QUE VOCÊ LEVA: BENTO + INVESTIMENTO =================
   As duas dobras que existiam aqui viraram uma grade só, na anatomia da
   referência: cards de tamanhos diferentes à esquerda, cada um um benefício, e
   o painel do investimento fechando à direita. */
/* A dobra do bento chegou a passar da calha da página; a autora reverteu em
   28/08: ela lê alinhada com as dobras de cima, e a calha é a mesma de todas. */
/* Uma grade só, de três colunas: o card da vaga é uma célula como as outras, do
   mesmo tamanho, por ordem da autora. As duas colunas de antes (a grade e o
   painel alto ao lado) deixaram de existir. */
.bento {
  display: grid;
  /* O card da vaga tem a MESMA largura de um card da esquerda, por pedido da
     autora: com dois cards e um vão na coluna da esquerda, a razão que resolve
     isso é 2,06 para 1 (o vão entre as colunas entra na conta do grid). */
  grid-template-columns: minmax(0, 2.06fr) minmax(0, 1fr);
  gap: clamp(14px, 1.4vw, 20px);
  margin-top: clamp(32px, 4vh, 52px);
  text-align: left;
}
.bn-grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.4vw, 20px);
  /* as linhas repartem a altura da dobra: sem isso os cards ficavam no topo e o
     último terminava ~80px acima da base do card da vaga */
  align-content: stretch;
  grid-auto-rows: 1fr;
}
/* Os cards são de vidro: mais claros que o fundo, com a luz vindo do alto à
   esquerda, fio claro na borda e sombra funda embaixo. O desfoque de fundo vai
   junto, mas quem sustenta o efeito são as camadas: o `.bento` anima com
   transform na entrada, e transform em ancestral mata o backdrop-filter. */
.bn {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(20px, 2.2vw, 28px);
  border-radius: clamp(16px, 1.6vw, 22px);
  background:
    linear-gradient(142deg, rgba(255, 255, 255, 0.135) 0%, rgba(255, 255, 255, 0.055) 46%, rgba(255, 255, 255, 0.085) 100%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28),
    0 20px 44px -30px rgba(0, 0, 0, 0.85);
  transition:
    border-color 0.3s var(--ease-soft),
    box-shadow 0.3s var(--ease-soft);
}
.bn:hover {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28),
    0 26px 52px -30px rgba(0, 0, 0, 0.9);
}
.bn h3 {
  margin: 0;
  font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
}
.bn p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  /* o card clareou, e o cinza do resto da página caía para 3,9:1 sobre ele:
     aqui o corpo é branco rebaixado, que volta a passar de 4,5:1 */
  color: rgba(255, 255, 255, 0.74);
}
.bn p b {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
}
/* a caixa do ícone tem relevo: luz na aresta de cima, sombra projetada embaixo e
   um degradê que dá volume ao quadrado */
.bn-ic {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--teal);
  background: linear-gradient(180deg, rgba(91, 192, 190, 0.22), rgba(91, 192, 190, 0.07));
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.26),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 8px 16px -8px rgba(0, 0, 0, 0.8),
    0 2px 5px -2px rgba(0, 0, 0, 0.6);
  transition: transform 0.3s var(--ease-soft), box-shadow 0.3s var(--ease-soft);
  /* o ícone é um bloco em relevo, não uma linha de texto: com o gap de 10px do
     card ele encostava no título. O respiro extra vale só embaixo dele. */
  margin-bottom: clamp(8px, 1vw, 14px);
}
.bn:hover .bn-ic {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 12px 22px -10px rgba(0, 0, 0, 0.85),
    0 3px 6px -2px rgba(0, 0, 0, 0.6);
}
.bn-ic svg {
  width: 19px;
  height: 19px;
}
.bn-larga {
  grid-column: span 2;
}
/* O card de abertura do bento: sem foto (ela saiu em 28/08), ele se destaca
   pelo tamanho do título e pelo fundo um grau mais claro que os irmãos. */
.bn-destaque {
  gap: 12px;
  padding: clamp(24px, 2.6vw, 34px);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(91, 192, 190, 0.09), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
}
.bn-destaque h3 {
  font-size: clamp(20px, 2.1vw, 27px);
  line-height: 1.18;
}
.bn-destaque p {
  max-width: 62ch;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.72);
}

/* [STANDBY] o card com foto de fundo, que era o de abertura do bento */
.bn-foto {
  position: relative;
  grid-column: span 2;
  min-height: clamp(240px, 26vw, 340px);
  padding: 0;
  overflow: hidden;
  justify-content: flex-end;
  isolation: isolate;
}
.bn-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.bn-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(4, 8, 31, 0.92) 8%, rgba(4, 8, 31, 0.55) 44%, rgba(4, 8, 31, 0.12) 100%);
}
.bn-foto-tx {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(20px, 2.2vw, 28px);
}
.bn-foto-tx h3 {
  font-size: clamp(19px, 2vw, 25px);
  line-height: 1.2;
}
.bn-foto-tx p {
  max-width: 62ch;
  color: rgba(255, 255, 255, 0.72);
}
.bn-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.bn-chip {
  padding: 7px 12px;
  border-radius: 99px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(6, 12, 34, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.bn-chip b {
  color: #fff;
  font-weight: 600;
}

/* ---- a coluna da direita: o card da vaga e, embaixo dele, o do evento ---- */
.bn-lado {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.4vw, 20px);
}
.bn-lado .bn-oferta {
  /* o card acompanha a altura da grade ao lado: sem isso as duas colunas
     terminavam em linhas diferentes */
  flex: 1 1 auto;
  min-height: 0;
}

/* ---- o card do evento: o que o ingresso dizia ----
   Os dados ficam numa lista de definição, e não em parágrafo: quando, onde,
   formato e quem senta na sala são dado, e é assim que eles leem. */
.bn-evento {
  gap: clamp(16px, 1.8vw, 22px);
}
.bn-evento-topo {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.bn-evento-topo > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bn-evento-topo .bn-ic {
  flex: 0 0 auto;
}
.bn-dados {
  display: grid;
  margin-top: 2px;
  /* a mesma lista serve a coluna estreita e a linha larga: o número de colunas
     sai da largura que ela tiver */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
  margin: 0;
  padding-top: clamp(14px, 1.6vw, 18px);
  border-top: 1px solid var(--line-2);
}
.bn-dados > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.bn-dados dt {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.bn-dados dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 500;
  color: #fff;
}

/* ---- o painel do investimento ----
   O card da vaga é da mesma família dos cards do bento: mesmo vidro, mesma luz
   do alto à esquerda, mesmo fio de borda. O que o distingue é o motion no topo
   e o CTA teal, não uma casca diferente. */
.bn-oferta {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  border-radius: clamp(16px, 1.6vw, 22px);
  overflow: hidden;
  background:
    linear-gradient(142deg, rgba(255, 255, 255, 0.135) 0%, rgba(255, 255, 255, 0.055) 46%, rgba(255, 255, 255, 0.085) 100%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28),
    0 20px 44px -30px rgba(0, 0, 0, 0.85);
}
/* O topo do card é o vídeo, e o selo e a data pousam sobre ele: é o desenho da
   referência que a autora mandou (mídia em cima, preço logo abaixo). */
.bn-oferta-topo {
  position: relative;
  display: flex;
  /* a sobra da coluna vai para o vídeo, e não para um vazio embaixo do texto */
  flex: 1 1 auto;
  min-height: 0;
  border-bottom: 1px solid var(--line-2);
  background: var(--card);
  isolation: isolate;
}
/* [STANDBY] o quadro do vídeo, que o fundo animado substituiu */
.bn-oferta-video {
  width: 100%;
  flex: 1 1 auto;
  aspect-ratio: 16 / 9;
}
/* o véu existe só para o selo e a data se sustentarem sobre qualquer quadro */
.bn-oferta-veu {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4, 8, 31, 0.55) 0%, transparent 30%),
    linear-gradient(0deg, rgba(4, 8, 31, 0.82) 0%, transparent 46%);
}
.bn-selo {
  position: absolute;
  left: 16px;
  top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 99px;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(6, 12, 34, 0.5);
}
.bn-marca {
  width: clamp(44px, 4vw, 58px);
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 26px rgba(91, 192, 190, 0.3));
}
.bn-oferta-rod {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(12px, 1.4vw, 18px);
  text-align: center;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
/* O fundo animado da hero ocupa o quadro do topo do card, no lugar do vídeo. */
.bn-bgclip {
  position: relative;
  display: block;
  width: 100%;
  flex: 1 1 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg);
}
.bn-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.bn-oferta-corpo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(22px, 2.4vw, 30px);
}
/* a data entrou no lugar do valor e herdou o peso dele: mesmo corpo, mesma
   prumada, com o mês num degrau abaixo para a linha caber inteira */
.bn-data {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  font-size: clamp(34px, 3.4vw, 46px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: #fff;
}
.bn-data-mes {
  /* mesmo corpo dos algarismos, por pedido da autora: o que o diferencia é só
     o peso e o tom */
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
}
/* [STANDBY] o título do card, de quando os dados vinham em quatro colunas */
.bn-oferta-t {
  margin: 0;
  font-size: clamp(19px, 1.7vw, 23px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #fff;
}
/* [STANDBY] o bloco do preço saiu do card em 28/08, por ordem da autora: a LP
   volta a não exibir valor. O CSS fica para a peça voltar sem ser redesenhada. */
.bn-preco-lbl {
  margin: 0;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.bn-preco {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  font-size: clamp(38px, 4vw, 52px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  color: #fff;
}
.bn-cifra {
  font-size: 0.42em;
  font-weight: 500;
  color: var(--muted);
}
.bn-preco-nota {
  margin: 0;
  font-size: 13.5px;
  color: var(--muted);
}
.bn-inclui {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.bn-inclui li {
  position: relative;
  padding-left: 24px;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}
/* o traço do item é desenhado no ::before, e não com ícone repetido no HTML */
.bn-inclui li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 7px;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--teal);
  border-bottom: 2px solid var(--teal);
  transform: rotate(-45deg);
}
.bn-cta {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 22px;
  border-radius: 99px;
  font-size: 15px;
}
.bn-cta svg {
  width: 15px;
  height: 15px;
  opacity: 0.72;
}
.bn-duvida {
  align-self: center;
  font-size: 13.5px;
  color: var(--muted);
  transition: color 0.2s;
}
.bn-duvida:hover {
  color: #fff;
}
.bn-fine {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted-2);
}
@media (max-width: 980px) {
  .bento {
    grid-template-columns: 1fr;
  }
  .bn-lado {
    order: -1;
  }
}
@media (max-width: 640px) {
  .bn-grade {
    grid-template-columns: 1fr;
  }
  .bn-larga,
  .bn-foto {
    grid-column: auto;
  }
}

/* ================= A SEDE, EM VÍDEO =================
   Dobra da referência: o vídeo ocupa a largura útil, com a etiqueta discreta no
   topo, a legenda no canto inferior esquerdo e o botão de parar no direito. O
   véu existe só onde os textos pousam, e o quadro tem o mesmo raio e o mesmo
   traço das outras imagens desta página. */
/* A dobra sai da largura útil e ocupa quase a tela inteira, como na
   referência: o vídeo é a peça, e não uma ilustração dentro do texto. O
   recorte fica na cena, e não no quadro, porque o card precisa transbordar
   para fora da borda de baixo. */
/* A dobra vive na calha da página, como as outras: ela sangrava até a borda da
   tela e o vídeo ficava gigante. Na referência ele respeita a mesma margem do
   resto do conteúdo. */
.sede .wrap {
  max-width: var(--maxw);
}
/* O vídeo vive dentro de uma moldura de vidro, com a luz teal atrás. O vidro é
   feito por camadas (fundo translúcido, fio claro na borda e brilho no topo) e
   não por backdrop-filter: o quadro é o elemento que anima na entrada, e
   transform mata o desfoque de fundo. */
.sede-quadro {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(8px, 0.9vw, 14px);
  border-radius: clamp(24px, 2.8vw, 38px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02) 46%, rgba(255, 255, 255, 0.05));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35);
}
.sede-glow {
  position: absolute;
  z-index: -1;
  inset: 12% -5% -14%;
  pointer-events: none;
  background: radial-gradient(56% 62% at 50% 64%, rgba(91, 192, 190, 0.4), rgba(91, 192, 190, 0.12) 52%, transparent 76%);
  filter: blur(72px);
}
/* a cena guarda o vídeo e tudo o que pousa sobre ele; o card é irmão dela, e é
   isso que deixa o card sair para o fluxo no celular sem arrastar a legenda e o
   botão de parar para fora da imagem */
.sede-cena {
  position: relative;
  isolation: isolate;
  border-radius: clamp(18px, 2vw, 28px);
  overflow: hidden;
  border: 1px solid var(--line-2);
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, 0.85);
}
/* ---- o vídeo da sede, como peça de cena ----
   O arquivo é servido daqui (tour.mp4): a capa vem depois dele no DOM e segura
   o quadro até o vídeo rodar de verdade, e o object-fit cobre a área inteira,
   sem tarja preta. O vídeo é ambiente (mudo, em repetição, sem controles),
   então ele não recebe clique: quem manda é o botão da cena. */
.yt {
  position: relative;
  overflow: hidden;
  background: var(--card);
}
.yt video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.yt-capa {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.6s ease;
}
.yt.yt-on .yt-capa {
  opacity: 0;
}
.sede-yt {
  display: block;
  width: 100%;
  /* dentro da calha, quem manda é a proporção do vídeo; o teto em vh evita que
     ele passe da tela em monitor estreito e alto */
  aspect-ratio: 16 / 9;
  max-height: 78vh;
}
.sede-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* a base escurece mais desde que a frase cresceu: ela pousa sobre um quadro
     que muda o tempo todo, e o claro do vídeo comia o branco do texto */
  background:
    linear-gradient(180deg, rgba(4, 8, 31, 0.5) 0%, transparent 26%),
    linear-gradient(0deg, rgba(4, 8, 31, 0.88) 0%, rgba(4, 8, 31, 0.5) 28%, transparent 54%);
}
.sede-tag {
  position: absolute;
  left: clamp(16px, 2vw, 26px);
  top: clamp(16px, 2vw, 24px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 99px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(6, 12, 34, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.sede-legenda {
  position: absolute;
  left: clamp(16px, 2.4vw, 32px);
  bottom: clamp(16px, 2.4vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(56%, 760px);
}
.sede-onde {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.66);
}
.sede-frase {
  /* o limite vive AQUI, e não na caixa: `ch` na caixa vale a fonte dela (16px),
     e a conta saía cinco vezes menor do que parecia */
  max-width: 16ch;
  font-size: clamp(28px, 3.4vw, 50px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: #fff;
}
/* ---- o card do formato, sobreposto na base do quadro ----
   Ele fica preso ao vídeo, e não solto embaixo: é o que a referência faz para
   a peça não virar mais um bloco de texto na página. A barra da inscrição é a
   base do card, na cor da área. */
.sede-card {
  position: absolute;
  left: 50%;
  bottom: 0;
  /* metade dentro da cena, metade fora, como na referência */
  transform: translate(-50%, 50%);
  /* a conta reserva o que fica dos dois lados: a legenda à esquerda e o botão
     de parar à direita. Sem ela o card centrado cobria a legenda. */
  width: min(560px, calc(100% - 460px));
  border-radius: 16px;
  overflow: hidden;
  background: rgba(6, 12, 34, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 26px 60px -34px rgba(0, 0, 0, 0.9);
}
.sede-card-topo {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
}
.sede-dias {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  line-height: 1;
}
.sede-dias b {
  font-size: 19px;
  font-weight: 600;
  color: #fff;
}
.sede-dias small {
  margin-top: 3px;
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.sede-card-tx {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.sede-card-kick {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.sede-card-t {
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #fff;
}
.sede-vagas {
  flex: none;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 99px;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(91, 192, 190, 0.4);
  background: rgba(91, 192, 190, 0.08);
}
.sede-card-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #04122a;
  background: var(--teal);
  transition: filter 0.2s;
}
.sede-card-cta:hover {
  filter: brightness(1.06);
}
.sede-card-cta svg {
  width: 15px;
  height: 15px;
  flex: none;
}
@media (max-width: 1100px) {
  /* daqui para baixo o card não cabe mais sobre o vídeo sem cobrir a legenda:
     ele sai de cima da cena e vira o rodapé do quadro */
  /* a classe do quadro mudou quando o vídeo passou a vir do YouTube */
  .sede-yt {
    max-height: 70vh;
  }

  .sede-quadro {
    margin-bottom: 0;
  }
  .sede-card {
    position: static;
    transform: none;
    width: 100%;
    margin-top: -1px;
    border-radius: 0 0 clamp(18px, 2vw, 26px) clamp(18px, 2vw, 26px);
    border-width: 1px 0 0;
  }
  .sede-card-topo {
    flex-wrap: wrap;
  }
  .sede-vagas {
    margin-left: 0;
  }
  .sede-legenda {
    bottom: clamp(14px, 2vw, 22px);
  }
}
.sede-pausa {
  position: absolute;
  right: clamp(14px, 2vw, 24px);
  bottom: clamp(14px, 2vw, 24px);
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(6, 12, 34, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.2s, border-color 0.2s;
}
.sede-pausa:hover {
  background: rgba(6, 12, 34, 0.72);
  border-color: rgba(255, 255, 255, 0.32);
}
.sede-pausa svg {
  grid-area: 1/1;
  width: 16px;
  height: 16px;
}
/* um ícone por estado: tocando mostra a pausa, parado mostra o play */
.sede-pausa .sede-ic-play {
  display: none;
}
.sede-pausa[aria-pressed="true"] .sede-ic-pausa {
  display: none;
}
.sede-pausa[aria-pressed="true"] .sede-ic-play {
  display: block;
}
@media (max-width: 640px) {
  .sede-yt {
    /* no celular o 16:9 vira uma faixa: aqui o quadro volta a ter altura */
    aspect-ratio: 4 / 3;
  }
  .sede-frase {
    font-size: 24px;
    max-width: 14ch;
  }
  .sede-legenda {
    max-width: 76%;
  }
}

/* ================= DEPOIMENTOS EM REELS =================
   Vídeo vertical (9:16) no card, na mesma trilha lateral dos especialistas. O
   quadro tem o raio e o traço das outras imagens da página, e o botão do canto
   é o controle de quem não quer movimento. Sem o arquivo no lugar, o que fica é
   o quadro vazio: nada quebra e nada finge conteúdo. */
.dep-trilha {
  display: flex;
  gap: clamp(16px, 2vw, 26px);
  margin-top: clamp(28px, 4vh, 48px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;
  scrollbar-width: none;
}
.dep-trilha::-webkit-scrollbar {
  display: none;
}
.dep-card {
  flex: 0 0 auto;
  width: clamp(220px, 24vw, 300px);
  margin: 0;
  scroll-snap-align: start;
  text-align: left;
}
.dep-quadro {
  position: relative;
  border-radius: clamp(16px, 1.6vw, 22px);
  overflow: hidden;
  border: 1px solid var(--line-2);
  background: var(--card);
  isolation: isolate;
}
.dep-video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: var(--card);
}
.dep-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(4, 8, 31, 0.55) 0%, transparent 38%);
}
.dep-play {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(6, 12, 34, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.2s, border-color 0.2s;
}
.dep-play:hover {
  background: rgba(6, 12, 34, 0.72);
  border-color: rgba(255, 255, 255, 0.32);
}
.dep-play svg {
  grid-area: 1/1;
  width: 15px;
  height: 15px;
}
/* um ícone por estado, como no vídeo da sede */
.dep-play .dep-ic-pausa {
  display: none;
}
.dep-play[aria-pressed="true"] .dep-ic-play {
  display: none;
}
.dep-play[aria-pressed="true"] .dep-ic-pausa {
  display: block;
}
.dep-quem {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 14px;
}
.dep-nome {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
}
.dep-cargo {
  font-size: 13px;
  color: var(--muted);
}
@media (max-width: 640px) {
  .dep-card {
    width: min(74vw, 300px);
  }
}

/* ================= O CRONOGRAMA =================
   Diagramação do PR #312 (a dobra de Tecnologia da home v2): a lista dos dias
   fica ao lado, na coluna da esquerda, com um traço marcando o ativo, e a grade
   de horários troca na coluna da direita. Não é acordeão nem aba em cima: a
   escolha e o conteúdo dividem a mesma linha do olho. */
.cr {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  column-gap: clamp(32px, 5vw, 80px);
  row-gap: clamp(24px, 3vh, 40px);
  align-items: start;
  text-align: left;
}
.cr-t {
  margin: 0;
  max-width: 16ch;
  text-align: left;
}
.cr-sub {
  margin: 18px 0 0;
  max-width: 40ch;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.6;
  color: var(--muted);
}
/* a lista dos dias: o traço à esquerda é o indicador, e o ativo é o único em
   branco cheio (os outros ficam no tom de apoio) */
.cr-abas {
  display: flex;
  flex-direction: column;
  margin-top: clamp(26px, 3.4vh, 40px);
  border-left: 1px solid var(--line);
}
.cr-aba {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 0 16px 22px;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  color: var(--muted);
  font-family: var(--font);
  transition: color 0.25s var(--ease-soft);
}
.cr-aba::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: var(--teal);
  opacity: 0;
  transform: scaleY(0.4);
  transform-origin: center;
  transition: opacity 0.25s var(--ease-soft), transform 0.25s var(--ease-soft);
}
.cr-aba.ativa::before {
  opacity: 1;
  transform: scaleY(1);
}
.cr-aba:hover,
.cr-aba:focus-visible {
  color: rgba(255, 255, 255, 0.86);
}
.cr-aba.ativa {
  color: #fff;
}
.cr-aba-n {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.cr-aba.ativa .cr-aba-n {
  color: var(--teal);
}
.cr-aba-tx {
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
/* a grade de horários */
.cr-painel[hidden] {
  display: none;
}
.cr-painel-t {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 clamp(18px, 2.4vh, 28px);
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
}
.cr-painel-n {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal);
}
.cr-periodo + .cr-periodo {
  margin-top: clamp(22px, 3vh, 34px);
}
.cr-per-lbl {
  margin: 0 0 10px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.cr-itens {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cr-itens li {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 14px 0;
  border-top: 1px solid var(--line-2);
}
.cr-itens li:last-child {
  border-bottom: 1px solid var(--line-2);
}
.cr-h {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--teal);
  font-variant-numeric: tabular-nums;
}
.cr-tx {
  font-size: clamp(14.5px, 1.15vw, 16.5px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
}
@media (max-width: 860px) {
  .cr {
    grid-template-columns: 1fr;
  }
  .cr-t {
    max-width: none;
  }
  /* no toque a lista dos dias vira uma fila de duas colunas: o traço passa para
     baixo, que é onde ele continua indicando sem virar coluna vazia */
  .cr-abas {
    flex-direction: row;
    gap: 10px;
    border-left: 0;
    border-bottom: 1px solid var(--line);
  }
  .cr-aba {
    flex: 1;
    padding: 12px 0 14px;
  }
  .cr-aba::before {
    left: 0;
    right: 0;
    top: auto;
    bottom: -1px;
    width: auto;
    height: 2px;
    transform: scaleX(0.4);
  }
  .cr-aba.ativa::before {
    transform: scaleX(1);
  }
  .cr-itens li {
    grid-template-columns: 58px 1fr;
    gap: 12px;
  }
}

/* ----- "Quem conduz": a fila dentro da calha da página ----- */
/* As setas da fila ficam acima da trilha, alinhadas à direita, como na
   referência, e apagam quando a fila chega na ponta. Elas existem porque a
   fila deixou de ser infinita: sem elas, em telas sem toque, só sobraria o
   arraste. */
/* O cabeçalho da fila é o da referência: rótulo e título grande à esquerda,
   texto de apoio à direita e as setas logo abaixo dele, na mesma prumada. */
/* O cabeçalho é uma grade de três linhas com os wrappers transparentes
   (`display: contents`): o rótulo ocupa a primeira sozinho, e o título e o texto
   de apoio dividem a segunda. É isso que faz a primeira linha dos dois casar,
   em vez de o texto subir até a altura do rótulo. */
.ex-topo {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  column-gap: clamp(24px, 5vw, 80px);
  row-gap: 0;
  align-items: start;
  margin-top: 56px;
  text-align: left;
}
.ex-topo-t,
.ex-topo-lado {
  display: contents;
}
.ex-topo .im-dobra-kick {
  grid-column: 1;
  grid-row: 1;
}
.ex-topo .h2 {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  /* duas linhas no máximo, por pedido da autora */
  max-width: 26ch;
  text-wrap: balance;
}
.ex-topo .lede {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  max-width: 46ch;
}
.ex-topo .ex-nav {
  grid-column: 2;
  grid-row: 3;
}
.ex-nav {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: clamp(22px, 3vw, 40px);
}
.ex-seta {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  transition:
    background 0.2s,
    border-color 0.2s,
    opacity 0.2s;
}
.ex-seta:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.09);
  border-color: color-mix(in srgb, var(--teal) 45%, var(--line));
}
.ex-seta:disabled {
  opacity: 0.35;
  cursor: default;
}
.ex-seta svg {
  width: 17px;
  height: 17px;
}
.ex-seta:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

.experts-rail {
  --app: var(--teal); /* cor de área da imersão (o carrossel usa var(--app), igual ao Scale) */
  /* Na referência os cards são colunas estreitas e altas, e só o ativo se
     abre em largura para caber o nome grande e a bio. */
  --ex-vao: 14px;
  --ex-h: clamp(440px, 62vh, 620px);
  --ex-w-aberto: calc(var(--ex-h) * 0.63);
  /* A fila termina no limite do conteúdo, e não na borda da tela: o que a
     página mostra é o card aberto e mais três fechados (o quarto colaborador é
     o último visível), e o resto entra pelas setas. Por isso a largura do card
     fechado não é um número solto: ela é a sobra da calha, repartida em três.
     O piso mantém a coluna estreita da referência quando a calha é curta. */
  /* quantos cards fechados cabem ao lado do aberto: em monitor grande entra
     mais um, senão os quatro engordam e o card deixa de ser a coluna estreita
     e alta da referência */
  --ex-n: 3;
  --ex-w: max(
    calc(var(--ex-h) * 0.31),
    calc((100cqw - var(--ex-w-aberto) - var(--ex-n) * var(--ex-vao)) / var(--ex-n))
  );
  container-type: inline-size;
  position: relative;
  /* vão curto: quem separa a fila do subtítulo é a linha das setas, logo acima */
  margin-top: 22px;
}
.experts {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  /* a calha vem do wrap que envolve a fila: aqui só a folga de cima e de baixo,
     para o card aberto não encostar no corte */
  padding: 12px 0;
  scroll-padding-left: 0;
  scroll-snap-type: x proximity;
  text-align: left;
  cursor: grab;
}
.experts::-webkit-scrollbar {
  display: none;
}
.experts.drag {
  cursor: grabbing;
}
.experts-track {
  display: flex;
  width: max-content;
}
/* O card abre em LARGURA, como na referência: fechado ele é uma coluna estreita
   com número, nome e área; aberto, ganha espaço para o nome grande e a bio. A
   altura não muda, então a fila não salta quando um card abre. */
.ex {
  position: relative;
  /* o multiply do véu mistura com a foto do próprio card, e não com a página */
  isolation: isolate;
  flex: 0 0 var(--ex-w);
  height: var(--ex-h);
  scroll-snap-align: start;
  margin-right: var(--ex-vao);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  background: #0d1330;
  cursor: pointer;
  transition:
    flex-basis 0.55s var(--ease-soft),
    border-color 0.25s ease;
}
/* o último não leva vão: senão a fila termina num vazio de 16px e a seta da
   direita continua acesa sem ter o que mostrar */
.ex:last-child {
  margin-right: 0;
}
/* sem contorno na cor da área, por ordem da autora: o destaque é um fio claro */
.ex:hover {
  border-color: rgba(255, 255, 255, 0.18);
}
.ex:focus-visible {
  outline: 2px solid var(--app);
  outline-offset: 3px;
}
.ex.show {
  flex-basis: var(--ex-w-aberto);
  border-color: rgba(255, 255, 255, 0.22);
}
/* a contagem fica nos cards fechados (03 / 08, como na referência) e sai do
   aberto, onde quem manda é o nome grande */
.ex-n {
  display: block;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.62);
  transition: opacity 0.3s ease;
}
.ex.show .ex-n {
  opacity: 0;
}
.ex .ph {
  position: absolute;
  inset: 0;
  /* neutraliza a classe global .ph (placeholder pontilhado) da imersão */
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  display: block;
}
.ex .ph .ph-ph {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-family:var(--font);
  font-weight: 700;
  font-size: 30px;
  color: #fff;
  background: linear-gradient(135deg, var(--app), #6a2fd0);
}
.ex .ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* o retrato é enquadrado pelo alto: ao alargar o card, o corte tem que
     continuar no rosto, e não no meio do corpo */
  object-position: 50% 18%;
  display: block;
  transition: transform 0.45s ease;
}
.ex.show .ph img {
  transform: scale(1.03);
}
/* O escuro é só de baixo para cima, onde o texto pousa: por ordem da autora o
   card não leva véu inteiro. Ele multiplica em vez de cobrir, então o azul do
   retrato continua sendo azul (mais fundo), e não vira cinza por cima. */
.ex::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: multiply;
  background: linear-gradient(180deg, rgba(7, 11, 30, 0) 46%, rgba(7, 11, 30, 0.94) 100%);
  transition: background 0.35s ease;
}
.ex:hover::after,
.ex.show::after {
  /* o card aberto tem mais texto embaixo, então o escuro começa um pouco antes
     e fecha mais fundo; o topo do retrato continua limpo */
  background: linear-gradient(180deg, rgba(7, 11, 30, 0) 34%, rgba(7, 11, 30, 0.55) 58%, rgba(7, 11, 30, 0.97) 88%);
}
.ex .info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 18px 20px 20px;
}
.ex b {
  display: block;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  font-family:var(--font);
  letter-spacing: -0.02em;
  line-height: 1.18;
  transition: font-size 0.45s var(--ease-soft);
}
/* nome longo (Leonardo Pandolfo) ocupa duas linhas na coluna estreita: a
   caixa reserva as duas para todo mundo, senão a contagem de um card sobe e
   quebra a linha de base da fila inteira */
.ex:not(.show) b {
  display: flex;
  align-items: flex-end;
  min-height: 2.36em;
}
.ex.show b {
  font-size: clamp(24px, 2.2vw, 30px);
}
/* na coluna estreita o cargo é uma linha só: quebrar em três empilhava texto
   sobre o rosto */
.ex .role {
  font-size: 12.5px;
  color: var(--app);
  font-weight: 600;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ex.show .role {
  white-space: normal;
  overflow: visible;
  margin-top: 7px;
}
.ex .bio {
  /* neutraliza a classe global .bio (container grid do fundador) da imersão */
  display: block;
  grid-template-columns: none;
  margin: 0;
  font-size: 13px;
  color: #cfd3e6;
  line-height: 1.6;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height 0.45s ease,
    opacity 0.3s ease,
    margin-top 0.35s ease;
  text-wrap: pretty;
}
.ex.show .bio {
  max-height: 320px;
  opacity: 1;
  margin-top: 14px;
}
@media (max-width: 900px) {
  /* no celular o cabeçalho empilha e as setas vão para a esquerda, embaixo do
     texto de apoio */
  .ex-topo {
    grid-template-columns: 1fr;
    row-gap: 18px;
  }
  .ex-topo .im-dobra-kick,
  .ex-topo .h2,
  .ex-topo .lede,
  .ex-topo .ex-nav {
    grid-column: 1;
    grid-row: auto;
  }
  .ex-topo .h2,
  .ex-topo .lede {
    max-width: none;
  }
  .ex-nav {
    justify-content: flex-start;
    margin-top: 22px;
  }
}
@media (max-width: 820px) {
  .experts-rail {
    margin-top: 34px;
    /* a coluna estreita da referência não cabe num celular: aqui o card fechado
       é largo o bastante para o retrato, e o aberto ocupa quase a tela */
    --ex-h: clamp(400px, 64vh, 500px);
    --ex-w: min(56vw, 220px);
    /* o aberto deixa uns 70px do vizinho na tela: uma lasca de card cortado
       lia como defeito, e a espiada é o convite pra arrastar */
    --ex-w-aberto: min(72vw, 285px);
  }
  .experts {
    padding: 10px 0;
  }
  .experts .ex {
    margin-right: 12px;
  }
  .ex .bio {
    font-size: 14px;
  }
  .ex .info {
    text-align: center;
  }
}

/* ----- o que você leva (checklist) ----- */
.takeaways {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 960px;
  margin: 48px auto 0;
  text-align: left;
}
.takeaways .tk {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  border-radius: 16px;
  padding: 24px 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
  border: 1px solid var(--line-2);
}
@media (max-width: 860px) {
  .takeaways {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .takeaways {
    grid-template-columns: 1fr;
  }
}
.takeaways .tk svg {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--teal);
}
.takeaways .tk p {
  font-size: 15.5px;
  color: #c9cee6;
  line-height: 1.5;
}
.takeaways .tk b {
  color: #fff;
  font-weight: 600;
}

/* ----- "o que você leva": fluxo de etapas (bolinha + título + descrição), estilo "stages of work" ----- */
.steps-flow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 24px;
  max-width: 1120px;
  margin: 52px auto 0;
  text-align: left;
}
.sf-step {
  position: relative;
}
/* bullet do fluxo (marcador no topo / timeline) */
.sf-dot {
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--teal) 15%, transparent), 0 0 16px -2px rgba(91, 192, 190, 0.6);
  margin-bottom: 22px;
  position: relative;
  z-index: 2;
}
/* check num box, acima do título */
.sf-check {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: var(--teal);
  background: rgba(91, 192, 190, 0.12);
  border: 1px solid rgba(91, 192, 190, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  margin-bottom: 13px;
}
.sf-check svg {
  width: 18px;
  height: 18px;
}
.sf-title {
  font-family:var(--font);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 9px;
}
.sf-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
  padding-right: 10px;
}
.sf-desc b {
  color: #fff;
  font-weight: 600;
}
/* conector: só a linha, conectando os bullets (centro a centro), atrás dos dots */
.sf-step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 6.5px;
  left: 7px;
  right: -32px;
  height: 2px;
  background: color-mix(in srgb, var(--teal) 30%, var(--line));
  z-index: 0;
}
/* mobile: timeline vertical (bullet à esquerda, corpo com check + título + descrição à direita) */
@media (max-width: 820px) {
  .steps-flow {
    grid-template-columns: 1fr;
    column-gap: 0;
    max-width: 480px;
  }
  .sf-step {
    display: grid;
    grid-template-columns: 15px 1fr;
    column-gap: 18px;
    align-items: start;
    padding-bottom: 32px;
  }
  .sf-dot {
    grid-column: 1;
    grid-row: 1;
    margin: 11px 0 0;
  }
  .sf-body {
    grid-column: 2;
    grid-row: 1;
  }
  .sf-step:not(:last-child)::before {
    top: 18px;
    left: 7px;
    right: auto;
    bottom: -18px;
    width: 2px;
    height: auto;
  }
}

/* ----- investimento ----- */
.invest {
  max-width: 460px;
  margin: 44px auto 0;
  border-radius: 26px;
  padding: 40px 36px 36px;
  text-align: center;
  background: linear-gradient(180deg, rgba(91, 192, 190, 0.1), rgba(255, 255, 255, 0.012));
  border: 1px solid rgba(91, 192, 190, 0.3);
  box-shadow: 0 40px 100px -50px rgba(0, 0, 0, 0.8), 0 0 80px -40px rgba(91, 192, 190, 0.4);
}
/* logo + símbolo da Imersão Marvee no topo */
.invest .inv-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family:var(--font);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
}
.invest .inv-logo img {
  width: 24px;
  height: auto;
}
.invest .inv-logo .dim {
  color: #7e84a6;
  font-weight: 400;
}
.invest .inv-head {
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.28;
  color: #d6dbef;
  margin: 24px auto 26px;
  max-width: 340px;
  letter-spacing: -0.02em;
}
.invest .inv-head b {
  color: var(--teal);
  font-weight: 600;
}
.invest .price {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  font-family:var(--font);
  letter-spacing: -0.04em;
  line-height: 1;
}
.invest .cur {
  font-size: 26px;
  font-weight: 600;
  margin-top: 12px;
  color: var(--muted);
}
.invest .val {
  font-size: clamp(48px, 9vw, 76px);
  font-weight: 800;
  color: #7fe0cf;
  text-shadow: 0 0 60px rgba(91, 192, 190, 0.5);
}
.invest .cents {
  font-size: 26px;
  font-weight: 600;
  margin-top: 12px;
  color: var(--muted);
}
.invest .price-l {
  font-family:var(--font);
  font-size: 15px;
  color: #c9cee6;
  margin-top: 8px;
}
.invest .price-l b {
  color: #fff;
  font-weight: 600;
}
/* checklist no lugar do texto longo */
.invest .inv-checks {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
.invest .inv-checks li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 14.5px;
  line-height: 1.4;
  color: #c9cee6;
}
.invest .inv-checks svg {
  flex: none;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  padding: 2px;
  border-radius: 50%;
  color: var(--teal);
  background: rgba(91, 192, 190, 0.12);
}
.invest .anchoring {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.6;
  margin: 22px auto 26px;
}
.invest .inv-cta {
  width: 100%;
  font-size: 16px;
  padding: 17px;
  box-shadow: 0 0 34px -4px rgba(91, 192, 190, 0.6);
}
.invest .formfoot {
  font-size: 12.5px;
  color: #c9cee6;
  margin-top: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 560px) {
  .invest {
    padding: 32px 22px 28px;
  }
}

/* =======================================================================
   DIAGRAMAÇÃO & POLISH — alinhado às páginas Hub e Scale AI
   Mesma régua de respiro, equilíbrio de linhas e vida nos cards.
   ======================================================================= */

/* --- ritmo tipográfico: nenhuma linha órfã em títulos e textos corridos --- */
.h2 {
  text-wrap: balance;
}
.lede,
.leva p,
.day li,
.buildlist p,
.takeaways .tk p,
.demo-hl p,
.bio p,
.cm-l,
.invest .anchoring,
.faq-a p,
.fmts-note,
.step p {
  text-wrap: pretty;
}

/* "+" dos FAQs em teal (base e estados hover/aberto), desktop e mobile */
.faq-q .pm {
  color: var(--teal);
}
.faq-item:hover .pm,
.faq-item.open .pm {
  color: var(--teal);
}

/* --- cabeçalho de seção e respiro vertical proporcional no desktop --- */
@media (min-width: 821px) {
  .pad {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  /* "O investimento" sobe, encostando no arco do ingresso (cobre a parte escura vazia) */
  #vaga {
    margin-top: -120px;
  }
  .center .h2 {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
  }
  /* "O problema": cabe a 1a frase numa linha só (título em 2 linhas) */
  .center .h2.prob-title {
    max-width: 1100px;
  }
  .h2 {
    line-height: 1.3;
    margin-top: 34px;
  }
  .lede {
    margin-top: 34px;
    line-height: 1.78;
    max-width: 1040px;
  }
  .badge-pill {
    margin-bottom: 8px;
  }
}

/* --- cards glow (já animam a borda multicolor): só ganham o lift no hover --- */
.leva .card,
.day {
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}
.leva .card:hover,
.day:hover {
  transform: translateY(-4px);
}

/* --- cards planos: sobem + borda/brilho teal no hover (vida, como no Scale) --- */
.buildlist .bl-item,
.takeaways .tk,
.step,
.extreme {
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}
.buildlist .bl-item:hover,
.takeaways .tk:hover,
.step:hover,
.extreme:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--teal) 34%, var(--line));
  box-shadow:
    0 18px 44px -28px rgba(0, 0, 0, 0.85),
    0 0 30px -16px rgba(91, 192, 190, 0.45);
}

/* --- número da fundação: vira selo glassy teal (em vez de só um dígito solto) --- */
.buildlist .bl-num {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  font-size: 19px;
  border-radius: 13px;
  color: var(--teal);
  background: rgba(91, 192, 190, 0.1);
  border: 1px solid rgba(91, 192, 190, 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  font-variant-numeric: tabular-nums;
  transition:
    color 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease;
}
.buildlist .bl-item:hover .bl-num {
  color: #04101f;
  background: var(--teal);
  border-color: var(--teal);
}

/* --- check do "o que você leva": selo arredondado (em vez de svg solto) --- */
.takeaways .tk svg {
  width: 38px;
  height: 38px;
  padding: 9px;
  border-radius: 11px;
  color: var(--teal);
  background: rgba(91, 192, 190, 0.1);
  border: 1px solid rgba(91, 192, 190, 0.28);
  box-sizing: border-box;
  transition:
    color 0.25s ease,
    background 0.25s ease;
}
.takeaways .tk:hover svg {
  color: #04101f;
  background: var(--teal);
}

/* =======================================================================
   DINAMISMO (lote 1): cards "O que é" com vida + guard de movimento
   ======================================================================= */

/* glow teal sutil no hover (estilo dos cards do Scale, sem o traço no topo) */
.leva .card:hover {
  border-color: color-mix(in srgb, var(--teal) 30%, var(--line-2));
  box-shadow:
    0 18px 44px -28px rgba(0, 0, 0, 0.85),
    0 0 32px -14px rgba(91, 192, 190, 0.5);
}
/* ícone-tile reage no hover (leve scale + glow mais forte), mantendo o gradiente */
.leva .ic {
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease;
}
.leva .card:hover .ic {
  transform: scale(1.06) rotate(-3deg);
  box-shadow:
    0 14px 30px -8px rgba(91, 192, 190, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

/* acessibilidade: neutraliza animações/transições novas com movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  .daystl .tl-line i,
  .daystl .tl-ic,
  .daystl .tl-end,
  .daystl .tl-c.c2 {
    transition: none !important;
  }
  .marvin-circuit .mc-flow,
  .mc-core,
  .mc-aura {
    animation: none !important;
  }
  .leva .card,
  .leva .ic,
  .leva .card::before,
  .buildlist .bl-item,
  .takeaways .tk,
  .takeaways .tk svg,
  .ex .ph img,
  .ex .bio,
  .ex::after {
    transition: none !important;
  }
}

/* =======================================================================
   MOBILE: diagramação de texto centralizada + cards empilhados
   ======================================================================= */
@media (max-width: 820px) {
  /* quebras de linha exclusivas do desktop não aparecem no mobile */
  .br-d {
    display: none;
  }

  /* texto de apoio (eyebrows) um pouco menor no mobile, em todas as seções */
  .badge-pill {
    font-size: 10.5px;
  }

  /* "O que é": cards empilhados com efeito de deck (sticky stack no scroll) */
  .leva {
    display: block;
  }
  .leva .card {
    position: sticky;
    top: 84px;
    margin-bottom: 18px;
    background: #0a0f26; /* opaco: esconde os cards empilhados abaixo */
    box-shadow:
      0 -8px 22px -14px rgba(0, 0, 0, 0.6),
      0 16px 34px -20px rgba(0, 0, 0, 0.85);
  }
  .leva .card:nth-child(2) {
    top: 100px;
  }
  .leva .card:nth-child(3) {
    top: 116px;
  }
  .leva .card:nth-child(4) {
    top: 132px;
  }
  .leva .card:last-child {
    margin-bottom: 0;
  }

  /* intros de seção centralizadas no mobile (badge + h2 + lede) */
  .virada-grid,
  .virada-copy .h2,
  .virada-copy .lede,
  .enroll-grid,
  .enroll-copy,
  .enroll-copy .h2,
  .enroll-copy .lede,
  .days2 {
    text-align: center;
  }
  /* o timeline dos dias permanece alinhado à esquerda (trilho + bolinhas) */
  .day2-tl,
  .day2-tl li,
  .day2-tl .day2-end {
    text-align: left;
  }
  /* cards e box: diagramação à esquerda (não centralizar conteúdo de card) */
  .build-grid,
  .buildlist .bl-item p,
  .build-note,
  .demo-hl,
  .demo-hl h2,
  .demo-hl p,
  .virada-foot {
    text-align: left;
  }

  /* gaps entre seções proporcionais no mobile */
  .pad {
    padding: 48px 0;
  }
  /* "O investimento" sobe pra encostar no arco do ingresso (cobre o vão escuro) */
  #vaga {
    margin-top: -120px;
  }
}

/* ===== CTA final "Última chamada": frase numa box com glow suave do canto
   superior esquerdo e traço teal com glow pulsante (estilo ingresso, suavizado) ===== */
/* O fecho é um card da mesma família de vidro do bento, com o motion da hero
   rodando no fundo: o canvas e o véu vivem em camadas negativas (o card é um
   contexto isolado), e a frase fica por cima. O pulso teal saiu junto com a
   borda teal: quem acende o card agora é o próprio fundo. */
.cta-final {
  position: relative;
  isolation: isolate;
  max-width: 960px;
  margin: 0 auto;
  padding: clamp(34px, 5vw, 56px) clamp(24px, 5vw, 56px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background:
    linear-gradient(142deg, rgba(255, 255, 255, 0.135) 0%, rgba(255, 255, 255, 0.055) 46%, rgba(255, 255, 255, 0.085) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28),
    0 20px 44px -30px rgba(0, 0, 0, 0.85);
}
.cf-bgclip {
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg);
}
.cf-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* o véu segura a leitura sobre um fundo que muda de cor o tempo todo */
.cf-veu {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4, 8, 31, 0.5), rgba(4, 8, 31, 0.66));
}
/* título do CTA final: fonte um pouco menor pra caber em 2 linhas
   (1a frase numa linha, "Com a IA operando..." unida na 2a) */
.cta-final .h2 {
  font-size: clamp(24px, 2.9vw, 35px);
  max-width: none;
  line-height: 1.22;
}
/* "IA operando" em teal sólido com glow teal pulsante (sem gradiente em texto:
   respeita a regra de ouro; o brilho é text-shadow, não background-clip) */
.cta-final .ia-glow {
  color: var(--teal);
  animation: iaGlow 3.6s ease-in-out infinite;
}
@keyframes iaGlow {
  0%,
  100% {
    text-shadow: 0 0 6px rgba(91, 192, 190, 0.08);
  }
  50% {
    text-shadow: 0 0 12px rgba(91, 192, 190, 0.22);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cta-final .ia-glow {
    animation: none;
  }
}
@media (max-width: 560px) {
  .cta-final {
    padding: 30px 20px;
    border-radius: 20px;
  }
}

/* ===== ajustes de espaçamento no mobile ===== */
@media (max-width: 820px) {
  /* "Os dois dias": mais respiro entre o dia 1 e o dia 2 */
  .days2 {
    gap: 60px;
  }
  /* "Vagas e datas" → "Inscrição": encurta o arco e aproxima a inscrição */
  .final-arc {
    height: 70px;
  }
  #inscricao {
    margin-top: -28px;
  }
}

/* ================= PARA QUEM É (filtro de fit) ================= */
.fit2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  max-width: 980px;
  margin: 44px auto 0;
  text-align: left;
}
.fit2 .b {
  border-radius: 20px;
  padding: 28px 26px;
  border: 1px solid var(--line-2);
  background: var(--card);
}
.fit2 .b.yes {
  border-color: color-mix(in srgb, var(--teal) 30%, var(--line));
  box-shadow: 0 0 32px -14px color-mix(in srgb, var(--teal) 45%, transparent);
}
.fit2 .b.no {
  border-color: color-mix(in srgb, #e2585e 28%, var(--line));
  box-shadow: 0 0 32px -14px color-mix(in srgb, #e2585e 40%, transparent);
}
.fit2 h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 16px;
}
.fit2 .fit-ic {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex: none;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}
.fit2 .yes .fit-ic {
  background: var(--teal);
}
.fit2 .no .fit-ic {
  background: #e2585e;
}
.fit2 ul {
  list-style: none;
  display: grid;
  gap: 12px;
}
.fit2 li {
  display: flex;
  gap: 10px;
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.5;
}
.fit2 .yes li::before {
  content: "✓";
  color: var(--teal);
  font-weight: 800;
  flex: none;
}
.fit2 .no li::before {
  content: "✕";
  color: #e2585e;
  font-weight: 800;
  flex: none;
}
@media (max-width: 820px) {
  .fit2 {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   PÁGINAS DE CONFIRMAÇÃO (.ty-*): a casa única do padrão das páginas de
   agradecimento do tema Imersão (/imersao-recebido, /imersao-obrigado,
   /imersao-in-company-recebido). Antes esse mesmo bloco vivia copiado no
   <style> de cada uma delas. Receita: selo redondo com o check em teal,
   respiro de topo maior (a página é curta, não tem hero) e a lista de
   próximos passos centrada numa coluna estreita.
   ========================================================================== */
.ty-section {
  padding-top: clamp(40px, 9vw, 96px);
}
.ty-check {
  width: 72px;
  height: 72px;
  margin: 0 auto 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--teal);
  background: color-mix(in srgb, var(--teal) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--teal) 38%, var(--line));
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--teal) 8%, transparent);
}
.ty-check svg {
  width: 34px;
  height: 34px;
}
.ty-steps {
  max-width: 660px;
  margin: 34px auto 0;
  text-align: left;
}
.ty-foot {
  margin-top: 26px;
  color: var(--muted);
}
@media (max-width: 640px) {
  .ty-check {
    width: 60px;
    height: 60px;
    margin-bottom: 18px;
  }
  .ty-check svg {
    width: 28px;
    height: 28px;
  }
  .ty-steps .bl-item {
    padding: 18px 18px;
    gap: 14px;
  }
}


/* =======================================================================
   TELAS LARGAS: A PÁGINA CRESCE COM O MONITOR
   Em monitor grande a calha de 1180px deixava faixas vazias enormes nos dois
   lados, e o texto parecia uma coluna estreita no meio da tela. Aqui a calha,
   a tipografia e o respiro sobem em degraus, por pedido da autora.
   O escopo é só esta página: o `:has(.im-hero)` existe porque o lp.css também
   veste as páginas irmãs (in company, obrigado, recebido), e elas não foram
   olhadas nesta rodada.
   ======================================================================= */
@media (min-width: 1500px) {
  body:has(.im-hero) {
    --maxw: 1360px;
  }
  body:has(.im-hero) .h2 {
    font-size: 52px;
  }
  body:has(.im-hero) .lede {
    font-size: 22px;
    max-width: 1000px;
  }
  body:has(.im-hero) .im-dobra .im-dobra-t {
    font-size: 54px;
  }
  body:has(.im-hero) .im-dobra-p2 {
    font-size: 21px;
  }
  /* o corpo dos cards acompanha, um degrau só: eles ficam ao lado de títulos
     que cresceram */
  body:has(.im-hero) .bn p,
  body:has(.im-hero) .bn-inclui li,
  body:has(.im-hero) .bn-dados dd,
  body:has(.im-hero) .d2-cols dd,
  body:has(.im-hero) .ex .bio,
  body:has(.im-hero) .cr-itens li {
    font-size: 15.5px;
  }
  body:has(.im-hero) .d2-p {
    font-size: 18px;
  }
  body:has(.im-hero) .bn h3 {
    font-size: 21px;
  }
  /* respiro vertical proporcional: com a calha maior, os 60px de seção viravam
     linhas coladas */
  body:has(.im-hero) .pad {
    padding-top: 76px;
    padding-bottom: 76px;
  }
  body:has(.im-hero) .bn-grade,
  body:has(.im-hero) .bento {
    gap: 22px;
  }
  /* a fila mostra cinco colaboradores (o aberto e mais quatro) e o card fica
     mais alto: é o que devolve a proporção estreita da referência na calha
     maior */
  body:has(.im-hero) .experts-rail {
    --ex-n: 4;
    --ex-h: clamp(440px, 62vh, 700px);
  }
}
/* O upscale de tela larga pede ALTURA junto: um monitor 1080p tem 1920 de
   largura e não é um telão. Sem o gate, a página crescia nele e a autora
   reprovou (01/09): "gigante e desproporcionou". */
@media (min-width: 1760px) and (min-height: 1150px) {
  body:has(.im-hero) {
    --maxw: 1500px;
  }
  body:has(.im-hero) .h2 {
    font-size: 58px;
  }
  body:has(.im-hero) .lede {
    font-size: 23px;
    max-width: 1080px;
  }
  body:has(.im-hero) .im-dobra .im-dobra-t {
    font-size: 60px;
  }
  body:has(.im-hero) .pad {
    padding-top: 88px;
    padding-bottom: 88px;
  }
}
@media (min-width: 2100px) and (min-height: 1150px) {
  body:has(.im-hero) {
    --maxw: 1680px;
  }
  body:has(.im-hero) .experts-rail {
    --ex-h: clamp(440px, 62vh, 760px);
  }
  body:has(.im-hero) .h2 {
    font-size: 62px;
  }
  body:has(.im-hero) .lede {
    font-size: 24px;
    max-width: 1160px;
  }
}
@media (min-width: 2400px) and (min-height: 1150px) {
  body:has(.im-hero) {
    --maxw: 1800px;
  }
}
/* Larga e baixa (1920x1080 e as ultrawide baixas): um degrau MENOR que o
   padrão e mais respiro nas laterais, por ordem da autora (01/09). */
@media (min-width: 1760px) and (max-height: 1149px) {
  body:has(.im-hero) {
    --maxw: 1280px;
  }
  .im-t {
    font-size: clamp(38px, 4vw, 76px);
  }
  body:has(.im-hero) .h2 {
    font-size: 48px;
  }
}
/* o card do fundador é todo proporcional ao próprio card, menos a tipografia,
   que trava nos tetos: em monitor grande o texto virava uma nota no canto */
@media (min-width: 1500px) {
  body:has(.im-hero) .founder-card .fc-name {
    font-size: 60px;
  }
  body:has(.im-hero) .founder-card .fc-role {
    font-size: 24px;
  }
  body:has(.im-hero) .founder-card .fc-text {
    font-size: 22px;
  }
}
@media (min-width: 2100px) {
  body:has(.im-hero) .founder-card .fc-name {
    font-size: 68px;
  }
  body:has(.im-hero) .founder-card .fc-text {
    font-size: 24px;
  }
}


/* ================= [STANDBY] O CARROSSEL DAS FOTOS =================
   Ficou fora do ar em 31/08: a autora pediu a grade em bento (a .gal, logo
   abaixo) no lugar da trilha que andava. O CSS segue aqui, e volta a valer se o
   markup .ftc voltar ao imersao.html.
   Carrossel em bento de dois andares: as colunas alternam uma foto larga (que
   ocupa os dois andares) e duas empilhadas, e a trilha anda sozinha para o
   lado. As larguras saem da altura do trilho, para o bento não mudar de
   proporção de tela para tela. */
.ftc {
  /* maior e de ponta a ponta, por pedido da autora: a trilha sai da calha e
     ocupa a janela inteira, sem desbotar nas pontas */
  --ftc-h: clamp(360px, 58vh, 640px);
  --ftc-vao: clamp(10px, 1vw, 14px);
  position: relative;
  overflow: hidden;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.ftc-trilha {
  display: flex;
  gap: var(--ftc-vao);
  width: max-content;
  /* o passo e o tempo saem do JS: é a largura real de UMA sequência mais o vão
     (a conta em % erra por causa dos vãos entre as colunas) */
  --ftc-passo: 50%;
  --ftc-tempo: 78s;
  animation: ftcAnda var(--ftc-tempo) linear infinite;
}
.ftc-seq {
  display: flex;
  gap: var(--ftc-vao);
}
/* quem para para olhar, para a trilha */
.ftc:hover .ftc-trilha {
  animation-play-state: paused;
}
.ftc-col {
  display: flex;
  flex-direction: column;
  gap: var(--ftc-vao);
  height: var(--ftc-h);
  /* a coluna de duas fotos: cada uma é 4:3, e a largura sai da metade da altura */
  width: calc((var(--ftc-h) - var(--ftc-vao)) / 2 * 4 / 3);
}
.ftc-col-g {
  /* a foto larga ocupa os dois andares, em 16:9 */
  width: calc(var(--ftc-h) * 16 / 9);
}
.ftc-f {
  position: relative;
  margin: 0;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  border-radius: clamp(12px, 1.2vw, 18px);
  border: 1px solid var(--line-2);
  background: var(--card);
}
.ftc-f img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@keyframes ftcAnda {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-1 * var(--ftc-passo)));
  }
}
@media (prefers-reduced-motion: reduce) {
  /* sem movimento a trilha para e a pessoa rola com o dedo ou o trackpad */
  .ftc {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .ftc::-webkit-scrollbar {
    display: none;
  }
  .ftc-trilha {
    animation: none;
  }
}
@media (max-width: 820px) {
  .ftc {
    --ftc-h: clamp(280px, 44vh, 400px);
  }
}

/* ================= A GRADE DAS FOTOS =================
   Bento de moodboard, no molde que a autora mandou: peças de tamanhos
   diferentes numa grade de 12 colunas, cantos bem arredondados e a legenda
   dentro da foto, sobre um véu que só escurece o pé da imagem.
   A peça alta (.gal-c) atravessa as duas fileiras, e é ela que dá o ritmo do
   conjunto: sem ela a grade vira duas faixas iguais. */
.gal {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: clamp(190px, 21vw, 320px);
  gap: clamp(10px, 1vw, 14px);
}
.gal-a {
  grid-column: span 5;
}
.gal-b {
  grid-column: span 4;
}
.gal-c {
  grid-column: span 3;
  grid-row: span 2;
}
.gal-d {
  grid-column: span 4;
}
.gal-e {
  grid-column: span 5;
}
.gal-f {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: clamp(16px, 1.7vw, 24px);
  background: var(--card);
  border: 1px solid rgba(255, 255, 255, 0.08);
  isolation: isolate;
}
.gal-f img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease-soft);
}
.gal-f:hover img {
  transform: scale(1.03);
}
/* o véu vive no ::after para não pedir um elemento a mais, e só cobre o pé da
   foto: a legenda precisa de fundo, a imagem não */
.gal-f::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(4, 8, 31, 0.82) 0%, rgba(4, 8, 31, 0.34) 44%, transparent 100%);
}
.gal-f figcaption {
  position: absolute;
  left: clamp(14px, 1.4vw, 20px);
  right: clamp(14px, 1.4vw, 20px);
  bottom: clamp(12px, 1.2vw, 18px);
  z-index: 1;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 12px rgba(4, 8, 31, 0.7);
}
@media (prefers-reduced-motion: reduce) {
  .gal-f img,
  .gal-f:hover img {
    transition: none;
    transform: none;
  }
}
/* No celular a grade vira duas colunas e nenhuma foto some: as duas largas
   ocupam a linha inteira, e a peça alta segue atravessando duas fileiras. */
@media (max-width: 820px) {
  .gal {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: clamp(140px, 34vw, 220px);
  }
  .gal-a,
  .gal-e {
    grid-column: span 2;
  }
  .gal-b,
  .gal-d {
    grid-column: span 1;
  }
  .gal-c {
    grid-column: span 1;
    grid-row: span 2;
  }
  .gal-f figcaption {
    font-size: 9.5px;
    letter-spacing: 0.13em;
  }
}

/* ================= A BARRA FLUTUANTE =================
   Ela é uma pílula, irmã da barra do topo desta página, e não a caixa com faixa
   na base da referência: mesmo vidro (o véu é irmão do conteúdo, nunca
   ancestral), mesmo raio de ilha e o CTA como botão pill na ponta. Só aparece
   nas dobras sem CTA na tela (as marcadas com `data-fx`); quem liga e desliga é
   o lp.js. */
.fx {
  position: fixed;
  left: 50%;
  bottom: clamp(14px, 2vh, 26px);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.1vw, 15px);
  width: max-content;
  max-width: calc(100vw - 28px);
  padding: 8px 8px 8px clamp(14px, 1.3vw, 18px);
  border-radius: 999px;
  isolation: isolate;
  /* fechada por padrão: quem abre é a classe .on */
  opacity: 0;
  translate: -50% 16px;
  pointer-events: none;
  transition:
    opacity 0.35s ease,
    translate 0.35s var(--ease-soft, ease);
}
.fx.on {
  opacity: 1;
  translate: -50% 0;
  pointer-events: auto;
}
.fx-glass {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: rgba(6, 12, 34, 0.68);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    0 28px 60px -34px rgba(4, 8, 31, 0.9);
}
/* "02 dias" fala no mesmo corpo do texto ao lado, por ordem da autora (01/09):
   o algarismo gigante saiu, e o traço à direita separa o dado das outras
   infos da ilha */
.fx-n {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.fx-n b {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
}
.fx-n small {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.25;
  color: #fff;
}
.fx-tx {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding-left: clamp(10px, 1.1vw, 15px);
  border-left: 1px solid rgba(255, 255, 255, 0.22);
}
.fx-kick {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.fx-t {
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  line-height: 1.25;
  white-space: nowrap;
}
.fx-t b {
  font-weight: 700;
}
/* o CTA é a pílula da casa, na ponta da ilha */
.fx-cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 99px;
  font-size: 14px;
  white-space: nowrap;
}
.fx-cta svg {
  width: 14px;
  height: 14px;
  opacity: 0.65;
}
/* a mesma linha em duas medidas: a curta entra quando a ilha encolhe */
.fx-t-curta {
  display: none;
}
@media (max-width: 860px) {
  /* no toque a ilha encolhe: ficam o dado da turma e o botão */
  .fx-kick {
    display: none;
  }
  .fx-t-longa {
    display: none;
  }
  .fx-t-curta {
    display: inline;
  }
  .fx {
    gap: 10px;
    padding: 8px 8px 8px 12px;
    border-radius: 26px;
  }
  .fx-t {
    font-size: 13.5px;
    white-space: normal;
  }
  .fx-n b,
  .fx-n small {
    font-size: 13.5px;
  }
  .fx-cta {
    padding: 11px 16px;
    font-size: 13px;
  }
}
@media (max-width: 560px) {
  .fx-n {
    display: none;
  }
  /* sem o dado dos dias, o traço não separa nada */
  .fx-tx {
    padding-left: 0;
    border-left: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fx {
    transition: opacity 0.2s ease;
    translate: -50% 0;
  }
}


/* ================= O QUE OS DOIS DIAS INCLUEM =================
   A anatomia é a da grade "Não é uma coleção de apps" da /hub, trazida para o
   navy desta página: célula sem caixa, fio entre elas, ícone no quadrado, a
   barra que cresce ao lado do título e o glow que sobe do divisor no hover. */
.xp-grade {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(38px, 4.6vw, 60px);
  border-bottom: 1px solid var(--line-2);
  text-align: left;
}
.xp {
  --xp-c: var(--teal);
  position: relative;
  overflow: hidden;
  padding: clamp(22px, 2.2vw, 32px);
}
.xp:not(:last-child) {
  border-right: 1px solid var(--line-2);
}
/* o glow do hover sobe do fio de baixo, na cor da área */
.xp::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 72%;
  pointer-events: none;
  background: linear-gradient(to top, color-mix(in srgb, var(--xp-c) 14%, transparent), transparent);
  opacity: 0;
  transition: opacity 0.3s var(--ease-soft);
}
.xp:hover::before {
  opacity: 1;
}
.xp-ic {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: var(--xp-c);
  /* mesmo relevo dos ícones do bento */
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--xp-c) 22%, transparent),
    color-mix(in srgb, var(--xp-c) 7%, transparent)
  );
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    0 8px 16px -8px rgba(0, 0, 0, 0.8);
}
.xp-ic svg {
  width: 21px;
  height: 21px;
}
.xp-t {
  position: relative;
  z-index: 1;
  margin: clamp(16px, 1.8vw, 22px) 0 0;
  padding-left: 14px;
  font-size: clamp(16px, 1.3vw, 18px);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: #fff;
  transition: transform 0.28s var(--ease-soft);
}
/* a barra vertical que cresce na borda esquerda do título */
.xp-t::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: 0;
  border-radius: 2px;
  transform: translateY(-50%);
  background: var(--line-2);
  transition:
    height 0.28s var(--ease-soft),
    background 0.28s var(--ease-soft);
}
.xp:hover .xp-t {
  transform: translateX(6px);
}
.xp:hover .xp-t::before {
  height: 78%;
  background: var(--xp-c);
}
.xp-d {
  position: relative;
  z-index: 1;
  margin: 10px 0 0;
  padding-left: 14px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--muted);
}
.xp-rod {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: clamp(20px, 2.4vw, 30px);
}
.xp-rod-tx {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.xp-rod-tx svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--teal);
}
.xp-rod-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
  transition: color 0.2s;
}
.xp-rod-link:hover {
  color: #fff;
}
.xp-rod-link svg {
  width: 14px;
  height: 14px;
  opacity: 0.7;
}
@media (max-width: 980px) {
  .xp-grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .xp:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line-2);
  }
  .xp:nth-child(odd) {
    border-right: 1px solid var(--line-2);
  }
  .xp:nth-child(even) {
    border-right: 0;
  }
}
@media (max-width: 640px) {
  /* No celular a dobra inteira é diagramada à esquerda, como os cards. O
     seletor mira o título e o texto porque o site.css centraliza os dois
     direto (section .h2 / section .lede), e herança não vence regra própria. */
  #experiencia .h2,
  #experiencia .lede {
    text-align: left;
    margin-left: 0;
  }
}
@media (max-width: 560px) {
  .xp-grade {
    grid-template-columns: 1fr;
  }
  .xp {
    border-right: 0 !important;
  }
  .xp:not(:last-child) {
    border-bottom: 1px solid var(--line-2);
  }
  /* na coluna estreita o rodapé deixa de ser uma linha com dois extremos: o
     horário e o link empilham centrados, e o ícone para de puxar o texto para
     um canto */
  .xp-rod {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 14px;
  }
  .xp-rod-tx {
    gap: 10px;
    line-height: 1.6;
  }
}


/* Linhas sem viúva: o parágrafo não termina numa palavra sozinha. O balance
   dos títulos já reparte os versos; aqui o pretty cuida do corpo de texto.
   (Letra única no fim de linha se resolve no HTML, com espaço sem quebra.) */
body:has(.im-hero) .lede,
body:has(.im-hero) .d2-p,
body:has(.im-hero) .fc-text,
body:has(.im-hero) .xp-d,
body:has(.im-hero) .bn p {
  text-wrap: pretty;
}
/* Os dois textos curtos e centrados da página (o apoio da hero e o fecho da
   dobra do problema) têm duas linhas só, e o pretty do grupo acima levava a
   primeira até a borda e deixava a segunda num toco. Aqui o balance reparte as
   duas (ordem da autora, 01/09). Eles já pediam balance na regra base; o que
   faltava era vencer a especificidade do `body:has(.im-hero)`. */
body:has(.im-hero) .im-sub,
body:has(.im-hero) .im-dobra-p2 {
  text-wrap: balance;
}
body:has(.im-hero) .h2 {
  text-wrap: balance;
}

/* =======================================================================
   REVISÃO DE QUALIDADE (28/08)
   Correções de acessibilidade e de layout encontradas na auditoria da página.
   ======================================================================= */

/* As luzes de fundo (.bg-lights, globais) e o glow da hero passam da borda por
   desenho, e no celular isso virava 7px de rolagem lateral. `clip` corta sem
   criar caixa de rolagem, então nada aqui vira scroll. */
html:has(.im-hero),
body:has(.im-hero) {
  overflow-x: clip;
}

/* Alvo de toque: o mínimo é 44px, e estes ficavam abaixo disso.
   (Apple HIG 44pt / Material 48dp.) */
.sede-pausa {
  width: 44px;
  height: 44px;
}
.im-burger {
  min-height: 44px;
}
/* o critério é o ponteiro, e não a largura: um tablet de 1024px também é toque */
@media (pointer: coarse) {
  .d2-link,
  .xp-rod-link,
  .bn-duvida,
  .im-links a,
  .foot-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .btn-sm,
  .d2-acoes .btn,
  .im-cta,
  .fx-cta {
    min-height: 44px;
  }
  /* o wordmark do nav também é um link (leva ao topo) e media 23px de altura */
  .im-nav .im-logo {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}


/* O vídeo é a continuação da dobra de texto que vem antes dele, e a dobra da
   tese é a continuação do vídeo. O vazio de ~155px vinha do espaço guardado
   pra uma peça visual que nunca chegou; sem ele, as três dobras respiram no
   ritmo padrão da página (as .pad de 76px), sem buraco e sem grudar. */
.sede {
  padding-top: 0;
  padding-bottom: 0;
}
body:has(.im-hero) .sede {
  padding-top: 0;
  padding-bottom: 0;
}

/* No celular o quadro do vídeo vira reels: vertical, com o vídeo cobrindo o
   quadro (o recorte é o mesmo cover do componente .yt, só muda a moldura). */
@media (max-width: 700px) {
  .sede-yt {
    aspect-ratio: 9 / 16;
    max-height: 76svh;
  }
}

/* ================= AS FOTOS NO TOQUE: CARROSSEL =================
   No celular a grade vira uma trilha infinita, com as mesmas fotos e as mesmas
   legendas. O lp.js monta duas sequências (a segunda é a cópia que fecha a
   volta) e escreve o passo e o tempo, medidos, nas variáveis. */
.gal-trilha {
  display: none;
}
@media (max-width: 820px) {
  .gal {
    display: block;
    overflow: hidden;
  }
  .gal > .gal-f {
    display: none;
  }
  .gal-trilha {
    display: flex;
    width: max-content;
    --gal-passo: 50%;
    --gal-tempo: 40s;
    animation: galScroll var(--gal-tempo) linear infinite;
  }
  .gal-seq {
    display: flex;
    align-items: stretch;
    gap: 12px;
    padding-right: 12px;
  }
  /* todas as fotos viram retrato, maiores e mais altas: o quadro é fixo e o
     cover recorta cada uma no centro */
  .gal-seq .gal-f {
    display: block;
    flex: none;
    width: min(70vw, 290px);
    height: min(112vw, 460px);
  }
  .gal-seq .gal-f img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
@keyframes galScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-1 * var(--gal-passo)));
  }
}
@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
  /* sem movimento a trilha para e a pessoa rola com o dedo */
  .gal {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .gal::-webkit-scrollbar {
    display: none;
  }
  .gal-trilha {
    animation: none;
  }
}

/* O fecho segura as três linhas: as duas frases do título e o apoio embaixo.
   A regra fica no fim e mais específica porque a escala de telas largas
   (body:has(.im-hero) .h2) empurraria o título para 52px e quebraria a
   primeira frase em duas. */
body:has(.im-hero) .cta-final .h2 {
  font-size: clamp(24px, 2.9vw, 35px);
}

/* O fundo global .bg-lights (site.css) segue animando mesmo com movimento
   reduzido; nesta página ele para junto com todo o resto. */
@media (prefers-reduced-motion: reduce) {
  body:has(.im-hero) .bg-lights span {
    animation: none;
  }
}

/* No toque o card da vaga centraliza: título, data, dados, CTA e a letra miúda
   na mesma prumada do botão. */
@media (max-width: 860px) {
  .bn-oferta-corpo {
    align-items: center;
    text-align: center;
  }
  .bn-data {
    justify-content: center;
  }
  .bn-dados {
    width: 100%;
  }
  .bn-dados > div {
    align-items: center;
  }
}

/* =======================================================================
   REFINAMENTO VISUAL — profundidade, vidro e movimento editorial
   A página continua escura e sóbria. A luz passa a ter direção, as caixas
   ganham planos distintos e as entradas de scroll ficam mais naturais.
   ======================================================================= */

body:has(.im-hero) {
  --bg: #03071b;
  --bg-2: #050a20;
  --card: #080e25;
  --card-2: #0b122c;
  --line: rgba(255, 255, 255, 0.105);
  --line-2: rgba(255, 255, 255, 0.065);
  --im-surface: rgba(10, 17, 43, 0.76);
  --im-surface-strong: rgba(12, 20, 48, 0.9);
  --im-edge: rgba(255, 255, 255, 0.14);
  --im-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.36),
    0 1px 0 rgba(255, 255, 255, 0.025),
    0 30px 76px -46px rgba(0, 0, 0, 0.96);
  background:
    radial-gradient(circle at 14% 18%, rgba(91, 192, 190, 0.05), transparent 27rem),
    radial-gradient(circle at 87% 44%, rgba(91, 192, 190, 0.045), transparent 30rem),
    radial-gradient(circle at 42% 78%, rgba(91, 192, 190, 0.028), transparent 34rem),
    var(--bg);
}

/* Uma granulação quase imperceptível tira o aspecto digital liso sem competir
   com foto, texto ou shader. */
body:has(.im-hero)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.045;
  background-image: radial-gradient(rgba(255, 255, 255, 0.13) 0.45px, transparent 0.65px);
  background-size: 6px 6px;
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}

body:has(.im-hero) .bg-lights span {
  width: min(1080px, 86vw);
  height: min(860px, 70vw);
  opacity: 0.82;
  filter: blur(10px);
  animation-duration: 34s;
  animation-timing-function: var(--ease-soft);
}
body:has(.im-hero) .bg-lights span:nth-child(2n) {
  animation-duration: 41s;
}
body:has(.im-hero) .bg-lights span:nth-child(3n) {
  animation-duration: 48s;
}

/* Hero com borda iluminada no alto, base mais funda e vinheta sobre o shader. */
body:has(.im-hero) .im-panel {
  background: radial-gradient(120% 92% at 52% -4%, #0a1640 0%, #04091d 59%, #020617 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 34px 90px -54px rgba(0, 0, 0, 0.94);
}
body:has(.im-hero) .im-bgclip::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 41%, transparent 18%, rgba(2, 6, 23, 0.08) 58%, rgba(2, 6, 23, 0.28) 100%),
    linear-gradient(180deg, rgba(2, 6, 23, 0.025), rgba(2, 6, 23, 0.12));
}
body:has(.im-hero) .im-mark {
  filter: drop-shadow(0 12px 28px rgba(91, 192, 190, 0.2));
}

/* O vidro da navegação usa dois planos: reflexo superior e sombra inferior. */
body:has(.im-hero) .im-hero.is-boxed {
  --im-navblur: 30px;
  --im-navsat: 132%;
}
body:has(.im-hero) .im-glass::before {
  background: linear-gradient(180deg, rgba(10, 18, 45, 0.82), rgba(4, 9, 27, 0.76));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.17),
    inset 0 -1px 0 rgba(0, 0, 0, 0.46),
    0 24px 60px -34px rgba(0, 0, 0, 0.94),
    0 0 34px -26px rgba(91, 192, 190, 0.38);
}

/* Botões com volume curto, sem aumentar o neon. */
body:has(.im-hero) .btn-teal {
  color: #031b22;
  background: linear-gradient(180deg, #79ddd7 0%, #50c2bd 68%, #3ca49f 100%);
  border-color: rgba(218, 255, 252, 0.25);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -2px 0 rgba(13, 84, 84, 0.42),
    0 0 24px -8px rgba(91, 192, 190, 0.54),
    0 14px 30px -16px rgba(91, 192, 190, 0.58);
  transition:
    transform 0.42s var(--ease-soft),
    filter 0.35s ease,
    box-shadow 0.42s var(--ease-soft);
}
body:has(.im-hero) .btn-teal:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -2px 0 rgba(13, 84, 84, 0.4),
    0 0 28px -8px rgba(91, 192, 190, 0.62),
    0 19px 38px -18px rgba(91, 192, 190, 0.64);
}

body:has(.im-hero) .im-cta,
#imGaveta .nd-cta {
  color: #031b22;
  background: linear-gradient(180deg, #79ddd7 0%, #50c2bd 68%, #3ca49f 100%);
  border-color: rgba(218, 255, 252, 0.25);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -2px 0 rgba(13, 84, 84, 0.42),
    0 0 20px -8px rgba(91, 192, 190, 0.52),
    0 12px 28px -16px rgba(91, 192, 190, 0.52);
}

/* Superfícies principais: vidro mais escuro, relevo direcional e sombra longa. */
body:has(.im-hero) .bn,
body:has(.im-hero) .bn-oferta,
body:has(.im-hero) .booking,
body:has(.im-hero) .cta-final {
  border-color: var(--im-edge);
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 255, 255, 0.075), transparent 36%),
    linear-gradient(145deg, rgba(15, 24, 55, 0.88), rgba(6, 11, 31, 0.76));
  box-shadow: var(--im-shadow);
  backdrop-filter: blur(20px) saturate(1.16);
  -webkit-backdrop-filter: blur(20px) saturate(1.16);
}
body:has(.im-hero) .bn-destaque {
  background:
    radial-gradient(circle at 5% 0%, rgba(91, 192, 190, 0.12), transparent 38%),
    linear-gradient(145deg, rgba(15, 27, 56, 0.92), rgba(7, 12, 33, 0.8));
}
body:has(.im-hero) .booking {
  background:
    radial-gradient(circle at 100% 0%, rgba(91, 192, 190, 0.075), transparent 38%),
    radial-gradient(circle at 0% 100%, rgba(91, 192, 190, 0.055), transparent 34%),
    linear-gradient(145deg, rgba(13, 21, 49, 0.94), rgba(6, 11, 31, 0.88));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.13),
    inset 0 -1px 0 rgba(0, 0, 0, 0.42),
    0 38px 90px -48px rgba(0, 0, 0, 0.98),
    0 0 62px -48px rgba(91, 192, 190, 0.46);
}

body:has(.im-hero) .d2-card,
body:has(.im-hero) .sede-quadro {
  border-color: rgba(255, 255, 255, 0.14);
  background: linear-gradient(145deg, rgba(12, 20, 47, 0.95), rgba(5, 10, 28, 0.92));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.48),
    0 36px 90px -48px rgba(0, 0, 0, 0.98),
    0 0 54px -42px rgba(91, 192, 190, 0.4);
}

/* A fundação deixa de parecer duas listas soltas e passa a ter planos. */
body:has(.im-hero) .build-grid {
  position: relative;
  isolation: isolate;
}
body:has(.im-hero) .build-grid::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 10%;
  right: 8%;
  top: 12%;
  bottom: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91, 192, 190, 0.06), transparent 68%);
  filter: blur(28px);
}
body:has(.im-hero) .build-anim,
body:has(.im-hero) .buildlist .bl-item {
  border-color: rgba(255, 255, 255, 0.11);
  background: linear-gradient(145deg, rgba(13, 21, 49, 0.82), rgba(6, 11, 31, 0.72));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.32),
    0 22px 52px -38px rgba(0, 0, 0, 0.96);
}

/* Fotos e especialistas levantam pouco no hover, como objetos apoiados sobre
   a página, não como botões saltando. */
body:has(.im-hero) .gal-f,
body:has(.im-hero) .ex {
  border-color: rgba(255, 255, 255, 0.11);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 24px 58px -40px rgba(0, 0, 0, 0.96);
  transition:
    transform 0.55s var(--ease-soft),
    border-color 0.4s ease,
    box-shadow 0.55s var(--ease-soft),
    flex-basis 0.55s var(--ease-soft);
}
body:has(.im-hero) .gal-f:hover,
body:has(.im-hero) .ex:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 30px 66px -40px rgba(0, 0, 0, 0.98);
}

/* Bento com alturas semelhantes pede variação de luz, não mais contorno. */
body:has(.im-hero) .bn,
body:has(.im-hero) .bn-oferta,
body:has(.im-hero) .buildlist .bl-item {
  transition:
    transform 0.5s var(--ease-soft),
    border-color 0.4s ease,
    box-shadow 0.5s var(--ease-soft);
}
body:has(.im-hero) .bn:hover,
body:has(.im-hero) .bn-oferta:hover,
body:has(.im-hero) .buildlist .bl-item:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.19);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(0, 0, 0, 0.38),
    0 34px 74px -44px rgba(0, 0, 0, 0.98),
    0 0 34px -28px rgba(91, 192, 190, 0.36);
}

/* Campos com contraste e foco mais claros, sem virar uma grade de caixas
   brilhantes quando ninguém está preenchendo o formulário. */
body:has(.im-hero) .field input,
body:has(.im-hero) .field select,
body:has(.im-hero) .field textarea {
  background: rgba(3, 8, 25, 0.62);
  border-color: rgba(255, 255, 255, 0.095);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    inset 0 2px 8px rgba(0, 0, 0, 0.18);
  transition:
    background 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.35s var(--ease-soft);
}
body:has(.im-hero) .field input:focus,
body:has(.im-hero) .field select:focus,
body:has(.im-hero) .field textarea:focus {
  transform: translateY(-1px);
  background: rgba(5, 12, 34, 0.84);
  border-color: rgba(91, 192, 190, 0.64);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 0 0 3px rgba(91, 192, 190, 0.08),
    0 12px 28px -20px rgba(91, 192, 190, 0.54);
}

/* As dúvidas permanecem como linhas editoriais, sem contêiner externo. */
body:has(.im-hero) .faq-q {
  transition:
    color 0.35s ease,
    padding-left 0.45s var(--ease-soft);
}
body:has(.im-hero) .faq-item:hover .faq-q,
body:has(.im-hero) .faq-item.open .faq-q {
  padding-left: 8px;
  color: #fff;
}
body:has(.im-hero) .faq-a {
  transition: max-height 0.58s var(--ease-soft);
}

/* Ritmo único: seções, títulos e blocos passam a usar a mesma escala de
   respiro. A inscrição agora vem direto depois das fotos, sem a antiga dobra
   intermediária. */
body:has(.im-hero) {
  --im-section-space: clamp(56px, 5vw, 80px);
  --im-stack-space: clamp(30px, 3vw, 44px);
  --im-grid-gap: clamp(14px, 1.4vw, 20px);
}
body:has(.im-hero) .pad,
body:has(.im-hero) .pad:has(.im-dobra) {
  padding-top: var(--im-section-space);
  padding-bottom: var(--im-section-space);
}
body:has(.im-hero) .h2 + .lede {
  margin-top: clamp(16px, 1.6vw, 22px);
}
body:has(.im-hero) .build-grid,
body:has(.im-hero) .xp-grade,
body:has(.im-hero) .bento,
body:has(.im-hero) .faq {
  margin-top: var(--im-stack-space);
}
body:has(.im-hero) .days2,
body:has(.im-hero) .founder,
body:has(.im-hero) .enroll-grid {
  margin-top: 0;
}
body:has(.im-hero) .ex-topo {
  margin-top: var(--im-stack-space);
}
body:has(.im-hero) .buildlist,
body:has(.im-hero) .bn-grade,
body:has(.im-hero) .bento,
body:has(.im-hero) .d2-feats {
  gap: var(--im-grid-gap);
}
body:has(.im-hero) .rotate-word {
  transition:
    opacity 0.48s var(--ease-soft),
    transform 0.52s var(--ease-soft);
}

/* Entrada editorial: o JS aplica a classe apenas quando há suporte e mantém
   o conteúdo visível sem script ou com movimento reduzido. */
@media (prefers-reduced-motion: no-preference) {
  html.im-motion body:has(.im-hero) .im-enter {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(0.994);
    filter: blur(3px);
    transition:
      opacity 0.78s var(--ease-soft),
      transform 0.92s var(--ease-soft),
      filter 0.72s var(--ease-soft);
    transition-delay: var(--im-enter-delay, 0ms);
    will-change: opacity, transform, filter;
  }
  html.im-motion body:has(.im-hero) .im-enter.is-visible {
    opacity: 1;
    transform: none;
    filter: none;
    will-change: auto;
  }
  body:has(.im-hero) .reveal {
    transform: translateY(18px) scale(0.996);
    filter: blur(3px);
    transition:
      opacity 0.82s var(--ease-soft),
      transform 0.96s var(--ease-soft),
      filter 0.76s var(--ease-soft);
  }
  body:has(.im-hero) .reveal.in {
    transform: none;
    filter: none;
  }
}

@media (max-width: 820px) {
  body:has(.im-hero)::before {
    opacity: 0.035;
  }
  body:has(.im-hero) .booking {
    border-radius: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.im-motion body:has(.im-hero) .im-enter,
  html.im-motion body:has(.im-hero) .im-enter.is-visible {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}