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

/* botão primário: teal sólido (tom executivo, sóbrio — não gradiente guru) */
.btn-teal {
  background: var(--teal);
  color: #04101f;
  font-weight: 600;
  border: none;
  box-shadow: 0 0 30px -10px rgba(91, 192, 190, 0.7);
}
.btn-teal:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px -12px rgba(91, 192, 190, 0.7);
  background: #6fd0ce;
}

/* 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: "Maven Pro", sans-serif;
}
.ph b {
  color: var(--teal);
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 11.5px;
}

/* ================= HERO ================= */
/* ===== HERO: composição Figma (Versão 2). Fundo achatado (palco + Manoel) num
   único PNG; por cima, só o texto à esquerda e o selo no ombro. Stage 16:9. ===== */
.lp-hero {
  position: relative;
  width: 100%;
  height: 56.25vw; /* 16:9, igual ao frame do Figma (1920x1080) */
  min-height: 620px;
  max-height: 1080px;
  overflow: hidden;
  background: #04071d;
  text-align: left;
  isolation: isolate;
}

/* fundo: composição achatada do Figma (palco + Manoel), sem blend nem blur */
.lp-hero .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.lp-hero .hero-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% center;
  display: block;
}

/* selo no ombro direito do Manoel (símbolo + legenda em órbita), posição do Figma */
.lp-hero .hero-seal {
  position: absolute;
  left: 79.43%;
  top: 41.57%;
  width: 9%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 3;
  pointer-events: none;
}
.lp-hero .hero-seal img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
}

/* scrim leve: reforça o lado esquerdo (legibilidade do texto) e funde a base */
.lp-hero .hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 70%, var(--bg) 100%),
    linear-gradient(90deg, rgba(4, 7, 29, 0.72) 0%, rgba(4, 7, 29, 0.32) 30%, transparent 52%);
}

.lp-hero .wrap {
  position: relative;
  z-index: 4;
  height: 100%;
}

/* bloco de texto à esquerda, verticalmente centrado (posição do Figma) */
.lp-hero .hero-copy {
  position: absolute;
  top: 50%;
  transform: translateY(-60%);
  left: 0;
  width: min(560px, 46%);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(16px, 1.8vw, 30px);
}
/* textos de apoio (eyebrows): glow teal em vez do azul/roxo padrão */
.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;
}
.lp-hero .badge-pill {
  margin: 0;
  background: linear-gradient(180deg, rgba(91, 192, 190, 0.1), rgba(91, 192, 190, 0.04));
  border: 1px solid 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;
  font-size: clamp(11px, 0.72vw, 13.5px);
  padding: 10px 28px;
  letter-spacing: -0.02em;
}
.lp-hero h1 {
  font-size: clamp(32px, 3.44vw, 60px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.04;
  margin: 0;
  color: #fff;
  text-wrap: balance;
}
.lp-hero h1 em {
  font-style: normal;
  color: var(--teal);
}
.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;
  }
}
.lp-hero .sub {
  font-size: clamp(15px, 1.15vw, 21px);
  color: #d6dbef;
  max-width: 510px;
  margin: 0;
  line-height: 1.5;
  letter-spacing: -0.01em;
}
.lp-hero .sub b {
  color: #fff;
  font-weight: 600;
}
.lp-hero-cta {
  display: flex;
  gap: 14px;
  margin: 0;
  flex-wrap: wrap;
}

/* tópicos: faixa horizontal animada (marquee), full-width na borda inferior da hero */
.hero-marquee {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  width: 100%;
  overflow: hidden;
  padding: 26px 0;
  background: rgba(4, 7, 29, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.hero-marquee .hm-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: hmScroll 26s linear infinite;
}
.hero-marquee:hover .hm-track {
  animation-play-state: paused;
}
.hero-marquee .hm-item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0 30px;
  font-size: 16px;
  line-height: 1;
  color: #c4cae0;
  white-space: nowrap;
}
.hero-marquee .hm-item b {
  color: #fff;
  font-weight: 600;
}
.hero-marquee .hm-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex: none;
  background: var(--teal);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--teal) 22%, transparent);
}
@keyframes hmScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-marquee .hm-track {
    animation: none;
  }
}

@media (max-width: 820px) {
  /* layout do Figma mobile: foto retrato no topo, texto à esquerda sobre o fade */
  .lp-hero {
    height: auto;
    min-height: auto;
    max-height: none;
    text-align: left;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  .lp-hero .hero-bg {
    position: relative;
    order: -1;
    inset: auto;
    width: 100%;
  }
  .lp-hero .hero-bg picture {
    display: block;
  }
  .lp-hero .hero-bg img {
    position: static;
    width: 100%;
    height: auto;
    object-fit: contain;
    opacity: 1;
  }
  .lp-hero .hero-seal {
    display: none;
  }
  .lp-hero .hero-scrim {
    display: none;
  }
  .lp-hero .wrap {
    height: auto;
    position: relative;
    z-index: 4;
    margin-top: -68vw; /* puxa o texto pra cima, sobrepondo o braço/tórax do Manoel */
  }
  .lp-hero .hero-copy {
    position: static;
    transform: none;
    width: auto;
    max-width: none;
    margin: 0;
    align-items: center;
    text-align: center;
    gap: 18px;
  }
  .lp-hero .badge-pill {
    font-size: 10px;
    /* preenchimento 70% do azul escuro (legibilidade sobre a foto) */
    background: rgba(4, 7, 29, 0.7);
    border-color: rgba(91, 192, 190, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  .lp-hero h1 {
    font-size: clamp(34px, 9.4vw, 44px);
  }
  .lp-hero .sub {
    font-size: 15px;
  }
  /* CTAs lado a lado, ocupando a largura */
  .lp-hero-cta {
    justify-content: center;
    flex-wrap: nowrap;
    width: 100%;
    gap: 10px;
  }
  .lp-hero-cta .btn {
    flex: 1 1 0;
    padding: 13px 10px;
    font-size: 13.5px;
    text-align: center;
    justify-content: center;
    white-space: nowrap;
  }
  .hero-marquee {
    position: static;
    margin-top: 44px; /* desce um pouco, separando das CTAs */
    width: 100%;
    padding: 13px 0; /* faixa mais baixa no mobile */
  }
  .hero-marquee .hm-item {
    font-size: 13px;
    padding: 0 20px;
  }
  .hero-marquee .hm-dot {
    width: 8px;
    height: 8px;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--teal) 22%, transparent);
  }
}

/* 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(57, 114, 253, 0.35);
}
.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: "Maven Pro", sans-serif;
  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: "Maven Pro", sans-serif;
  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;
  }
}

/* ================= TESE (statement) ================= */
.tese {
  text-align: center;
  position: relative;
}
.tese .anchor {
  font-family: "Maven Pro", sans-serif;
  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: "Maven Pro", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 10px;
}
.virada-foot .anchor {
  font-family: "Maven Pro", sans-serif;
  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: "Maven Pro", sans-serif;
  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(57, 114, 253, 0.05));
  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: "Maven Pro", sans-serif;
  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: "Maven Pro", sans-serif;
  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: "Maven Pro", sans-serif;
  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: "Maven Pro", sans-serif;
  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: "Maven Pro", sans-serif;
  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: "Maven Pro", sans-serif;
  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: "Maven Pro", sans-serif;
  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: "Maven Pro", sans-serif;
  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) */
}
.founder-card {
  position: relative;
  width: 100%;
  aspect-ratio: 1212 / 558;
  background: #0a0f26;
  border: 1px solid rgba(58, 80, 107, 0.2);
  border-radius: 30px;
}
/* marca d'água: símbolo Marvee transparente, aparece em volta do recorte do Manoel */
.founder-card .fc-watermark {
  position: absolute;
  left: 36%;
  top: -8%;
  width: 62%;
  height: 96%;
  object-fit: contain;
  pointer-events: none;
  z-index: 1;
}
/* recorte do Manoel (fundo transparente), vaza pelo topo e cola na base do card */
.founder-card .fc-photo {
  position: absolute;
  left: 47.6%;
  bottom: 0;
  width: 50.99%;
  height: 115.41%;
  object-fit: cover;
  object-position: 50% 38%;
  z-index: 2;
}
/* badge do símbolo: sobre o ombro esquerdo do Manoel (posição do Figma) */
.founder-card .fc-badge {
  position: absolute;
  left: 52.6%;
  top: 37.4%;
  width: 7.47%;
  height: auto;
  z-index: 3;
  pointer-events: none;
}
.founder-card .fc-copy {
  position: absolute;
  left: 6.1%;
  top: 50%;
  transform: translateY(-50%);
  width: 42.1%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.founder-card .fc-eyebrow {
  margin: 0 0 clamp(18px, 2.4vw, 30px);
}
.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;
}
/* PNG composto (símbolo + Manoel + badge) usado só no mobile */
.founder-card .fc-photo-mobile {
  display: none;
}
@media (max-width: 820px) {
  .founder {
    margin-top: 40px;
  }
  .founder-card {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #04071d; /* casa com o fundo do PNG composto */
  }
  /* mobile usa o PNG composto (símbolo + Manoel + badge) numa imagem só;
     esconde as 3 camadas separadas (resolve o bug de sobreposição/símbolo) */
  .founder-card .fc-watermark,
  .founder-card .fc-photo,
  .founder-card .fc-badge {
    display: none;
  }
  .founder-card .fc-photo-mobile {
    display: block;
    order: 1; /* imagem abaixo do texto */
    width: 100%;
    height: auto;
  }
  .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: "Maven Pro", sans-serif;
  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%;
  margin: 0;
  border-radius: 22px;
  padding: 36px;
  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 .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  text-align: left;
}
.field.full {
  grid-column: 1 / -1;
}
.field label {
  font-family: "Maven Pro", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #c9cee6;
}
.field label .req {
  color: var(--teal);
}
.field input,
.field select,
.field textarea {
  font-family: "Maven Pro", sans-serif;
  font-size: 15px;
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 13px 14px;
  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: 84px;
}
.field select {
  appearance: none;
  cursor: pointer;
}
.booking .btn {
  width: 100%;
  margin-top: 6px;
  font-size: 16px;
  padding: 16px;
}
.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: 24px;
  }
  .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: "Maven Pro", sans-serif;
  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: "Maven Pro", sans-serif;
  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: "Maven Pro", sans-serif;
  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: "Maven Pro", sans-serif;
  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: "Maven Pro", sans-serif;
  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: "Maven Pro", sans-serif;
  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: "Maven Pro", sans-serif;
  font-size: clamp(20px, 2.2vw, 27px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #fff;
  line-height: 1.1;
}
.statband .l {
  font-family: "Maven Pro", sans-serif;
  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: "Maven Pro", sans-serif;
  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) ----- */
.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: "Maven Pro", sans-serif;
  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: "Maven Pro", sans-serif;
  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: "Maven Pro", sans-serif;
  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: "Maven Pro", sans-serif;
  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: "Maven Pro", sans-serif;
  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: "Maven Pro", sans-serif;
  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);
  max-width: 1000px;
  margin: 52px auto 0;
  text-align: left;
}
.day2row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
/* foto do dia */
.day2-media {
  width: 100%;
}
.day2-media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  border-radius: 18px;
  border: 1px solid var(--line-2);
  box-shadow: 0 30px 70px -44px rgba(0, 0, 0, 0.85);
}
/* rótulo do dia: ícone sutil + "Dia X" em fonte menor */
.day2-label {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 14px;
}
.day2-ic {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--teal);
  background: rgba(91, 192, 190, 0.1);
  border: 1px solid rgba(91, 192, 190, 0.28);
}
.day2-ic svg {
  width: 18px;
  height: 18px;
}
.day2-num {
  font-family: "Maven Pro", sans-serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--teal);
}
.day2-copy h3 {
  font-size: clamp(21px, 2.4vw, 28px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: #fff;
  margin: 0 0 18px;
}
/* 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: "Maven Pro", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 4px;
}
@media (max-width: 820px) {
  .day2row {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  /* no mobile, imagem sempre no topo de cada dia */
  .day2row .day2-media {
    order: -1;
  }
}

/* ----- "Quem conduz": carrossel full-bleed (fade nas bordas) + card que revela o bio ----- */
.experts-rail {
  --app: var(--teal); /* cor de área da imersão (o carrossel usa var(--app), igual ao Scale) */
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 48px;
}
.experts-rail::before,
.experts-rail::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(48px, 10vw, 170px);
  z-index: 3;
  pointer-events: none;
}
.experts-rail::before {
  left: 0;
  background: linear-gradient(to right, var(--bg) 14%, transparent);
}
.experts-rail::after {
  right: 0;
  background: linear-gradient(to left, var(--bg) 14%, transparent);
}
.experts {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  padding: 12px 0;
  text-align: left;
  cursor: grab;
}
.experts::-webkit-scrollbar {
  display: none;
}
.experts.drag {
  cursor: grabbing;
}
.experts-track {
  display: flex;
  width: max-content;
}
.ex {
  position: relative;
  flex: 0 0 290px;
  margin-right: 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  background: #0d1330;
  aspect-ratio: 3 / 4;
  cursor: pointer;
  transition: border-color 0.25s ease;
}
.ex:hover {
  border-color: color-mix(in srgb, var(--app) 45%, var(--line));
}
.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: "Maven Pro", sans-serif;
  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;
  display: block;
  transition: transform 0.45s ease;
}
.ex:hover .ph img,
.ex.show .ph img {
  transform: scale(1.05);
}
.ex::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(7, 11, 30, 0) 40%, rgba(7, 11, 30, 0.92) 100%);
  transition: background 0.35s ease;
}
.ex:hover::after,
.ex.show::after {
  background: linear-gradient(180deg, rgba(7, 11, 30, 0.5) 0%, rgba(7, 11, 30, 0.94) 64%);
}
.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: 18px;
  font-weight: 600;
  font-family: "Maven Pro", sans-serif;
  letter-spacing: -0.02em;
  line-height: 1.18;
}
.ex .role {
  font-size: 12.5px;
  color: var(--app);
  font-weight: 600;
  margin-top: 4px;
}
.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:hover .bio,
.ex.show .bio {
  max-height: 260px;
  opacity: 1;
  margin-top: 11px;
}
@media (max-width: 820px) {
  .experts-rail {
    margin-top: 34px;
  }
  .experts {
    padding: 10px 0;
  }
  .experts .ex {
    flex: 0 0 250px;
    margin-right: 14px;
  }
  .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: "Maven Pro", sans-serif;
  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: "Maven Pro", sans-serif;
  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: "Maven Pro", sans-serif;
  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: "Maven Pro", sans-serif;
  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,
  .day2-copy h3 {
    text-align: center;
  }
  .day2-label {
    justify-content: 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) ===== */
.cta-final {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  padding: clamp(34px, 5vw, 56px) clamp(24px, 5vw, 56px);
  border-radius: 24px;
  border: 1px solid color-mix(in srgb, var(--teal) 30%, var(--line));
  background:
    radial-gradient(110% 120% at 0% 0%, color-mix(in srgb, var(--teal) 12%, transparent), transparent 56%),
    rgba(255, 255, 255, 0.012);
  animation: ctaFinalPulse 3.6s ease-in-out infinite;
  will-change: box-shadow, border-color;
}
/* 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;
  }
}
@keyframes ctaFinalPulse {
  0%,
  100% {
    border-color: color-mix(in srgb, var(--teal) 26%, var(--line));
    box-shadow:
      0 0 16px -10px rgba(91, 192, 190, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.04);
  }
  50% {
    border-color: color-mix(in srgb, var(--teal) 52%, var(--line));
    box-shadow:
      0 0 28px -6px rgba(91, 192, 190, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
}
@media (max-width: 560px) {
  .cta-final {
    padding: 30px 20px;
    border-radius: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cta-final {
    animation: none;
  }
}

/* ===== 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;
  }
}