/* ==========================================================================
   Jonathan Mendez — landing page
   Design: Figma D9PIZvJaKrhTzyhyp80Qs7 / nó 37:155 (artboard 1920px)
   ========================================================================== */

/* Registrar o ângulo é o que torna o gradiente animável: variável não registrada
   é só texto para o navegador, e texto não interpola. */
@property --ang {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* Herda: o JS escreve na caixa e o ::after lê o mesmo valor. */
@property --ang-ponteiro {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: true;
}

:root {
  --bg:      #f8f7ff;
  --nav-bg:  #fbfaff;
  --ink:     #211a1d;
  --pink:    #ed558d;
  --indigo:  #261e74;
  --violet:  #6455ed;

  /* "efeito j" e "Drop Shadow" — os dois effect styles do arquivo Figma */
  --shadow-j:  drop-shadow(0 4px 17px rgba(33, 26, 29, .17));
  --shadow-lg: 0 44px 74px rgba(38, 31, 34, .2);

  --serif: 'Newsreader', Georgia, serif;
  /* Jost no lugar da Century Gothic do Figma: mesma linhagem geométrica (ambas
     derivam da Futura), mas variável — tem pesos intermediários de verdade, que
     a Century Gothic não tem (só Regular e Bold). */
  --body:  'Jost', 'Century Gothic', 'Futura', sans-serif;
  --btn:   'Arimo', 'Helvetica Neue', Arial, sans-serif;

  --gutter: clamp(24px, 8.33vw, 160px);
}

*, *::before, *::after { box-sizing: border-box; }

/* O menu é fixo, então os alvos das âncoras precisam parar abaixo dele */
:target, [id] { scroll-margin-top: 130px; }

html {
  scroll-behavior: smooth;
  scrollbar-color: #ed558d transparent;   /* Firefox */
}

/* Chrome / Edge / Safari.
   Hex literal de propósito: os pseudo-elementos ::-webkit-scrollbar não
   herdam custom properties de forma confiável, então var(--pink) aqui
   pode simplesmente não pintar. */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background-color: #ed558d;
  border-radius: 999px;
  border: 2px solid #f8f7ff;   /* respiro para o arredondado aparecer */
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: #e13d7c; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

/* h3 faltava aqui: o título dos cards é um <h3> e carregava a margem padrão do
   navegador (1em = 32px), que somava ao gap de 8px do container. */
h1, h2, h3, h4, h5, h6, p, blockquote, ul { margin: 0; }
ul { padding: 0; list-style: none; }

a { text-decoration: none; color: inherit; }

:focus-visible {
  outline: 3px solid var(--pink);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Desfoque do resto da página enquanto uma das seções está no palco.
   São dois focos possíveis (metodologia e contato), então cada um borra o outro
   mas nunca a si mesmo — daí duas variáveis em vez de uma.
   Aplicado por classe (e não sempre) para não deixar um filter permanente nessas
   seções grandes, o que custaria pintura à toa.
   O menu fica de fora de propósito: precisa continuar legível. */
body.is-desfocado .hero,
body.is-desfocado .about {
  filter: blur(max(var(--desfoque-m, 0px), var(--desfoque-c, 0px)));
}

body.is-desfocado .method-stage  { filter: blur(var(--desfoque-c, 0px)); }
body.is-desfocado .contact-stage { filter: blur(var(--desfoque-m, 0px)); }

/* ==========================================================================
   Halo do ponteiro — sombra circular discreta seguindo o cursor
   ========================================================================== */

.cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 160px;                /* dimensionado para o blur de 64 ter o que espalhar */
  height: 160px;
  border-radius: 50%;
  pointer-events: none;        /* nunca intercepta cliques */
  opacity: 0;                  /* só aparece depois do primeiro movimento */
  transition: opacity .3s ease;

  /* #F8F7FF em soft-light na página inteira, sem variação por seção. */
  background: #f8f7ff;
  filter: blur(64px);
  mix-blend-mode: soft-light;  /* clareia o escuro, quase não toca o claro */
  will-change: transform;
  transition: opacity .3s ease, background-color .25s ease;
}


/* Sem ponteiro (celular/tablet) não há o que seguir */
@media (hover: none), (pointer: coarse) {
  .cursor-glow { display: none; }
}

/* ==========================================================================
   Botão CTA — aparece 2x (hero e contato)
   ========================================================================== */

.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 8px;
  /* No Figma o gradiente vai até 416% — na prática o botão lê como rosa sólido */
  background: linear-gradient(180deg, var(--pink) 49.412%, var(--bg) 416.47%);
  filter: var(--shadow-j);
  font-family: var(--btn);
  font-weight: 700;
  font-size: 20px;
  color: var(--bg);
  text-align: center;
  transition: filter .3s ease;
}

/* Sem deslocamento: o botão acende a própria cor e espalha um halo rosa. */
.cta:hover,
.cta:focus-visible {
  filter: var(--shadow-j)
          drop-shadow(0 0 22px rgba(237, 85, 141, .75))
          saturate(1.25)
          brightness(1.12);
}

.cta__icon { width: 35px; height: 35px; flex: none; }

.cta--hero    { width: 361px; height: 78px; flex: none; }
.cta--contact { width: 100%;  height: 67px; }

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

.hero {
  position: relative;
  padding-top: 611px;          /* topo do card no Figma */
}

.hero__media {
  position: absolute;
  inset: 0 0 auto 0;
  height: 921px;
}

.hero__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 12%;
  outline: 1px solid var(--ink);   /* stroke de 1px por fora, como no Figma (37:156) */
}

/* --- cunhas claras (Vector 1 / Vector 5) --- */

.hero__wedge {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Effect style "Drop Shadow" do Figma — o mesmo dos dois vetores.
     Derivado da margem de rasterização: 74px de raio, deslocado 44px pra baixo. */
  filter: drop-shadow(0 44px 74px rgba(38, 31, 34, .2));
}

.hero__wedge i {
  display: block;
  position: absolute;
  inset: 0;
  background: var(--bg);
}

/* Vértices vindos direto da geometria do Group 1, convertidos para % do hero */
.hero__wedge--left  i { clip-path: polygon(0 0, 23.98% 0, 0 67.09%); }
.hero__wedge--right i { clip-path: polygon(75.29% 0, 100% 0, 100% 70.58%); }

/* --- nav --- */

.nav {
  position: fixed;
  top: 25px;                   /* Figma 37:181 */
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;                /* acompanha a rolagem, então fica acima de tudo */

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  /* Largura pelo conteúdo, não fixa: com o link "Serviços" são 5 filhos, e os
     518px de antes (medida do Figma quando eram 4) cortariam o último. No
     design novo o container é hug-content — o max-width só impede que ele
     encoste nas bordas da tela. */
  max-width: calc(100% - 2 * var(--gutter));
  padding: 16px 24px;
  background: var(--nav-bg);
  border: 1px solid rgba(33, 26, 29, .1);
}

.nav__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 89px;                 /* Figma 37:182 */
  padding: 10px;
}

.nav__logo-mark {
  display: block;
  width: 48.667px;
  height: 33.089px;
  color: var(--ink);           /* o fill do SVG embutido herda daqui */
  transition: color .25s ease, filter .25s ease;
}

.nav__logo:hover .nav__logo-mark,
.nav__logo:focus-visible .nav__logo-mark {
  color: var(--pink);
  filter: drop-shadow(0 0 10px rgba(237, 85, 141, .75));
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 48px;
}

.nav__links a {
  padding: 10px 0;
  font-size: 16px;
  line-height: 16px;
  white-space: nowrap;
  transition: color .18s ease;
}

.nav__links a:hover { color: var(--pink); }

/* --- card do hero --- */

.hero__card {
  position: relative;
  z-index: 2;
  width: min(1330px, 100% - 2 * var(--gutter));
  min-height: 311px;
  margin-inline: auto;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 24px 32px;

  border: 1px solid var(--ink);
  border-bottom: 0;
  background: radial-gradient(ellipse 51.72% 51.72% at 70.43% 46.59%,
                              rgba(248, 247, 255, .8), var(--bg));
}

.hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  max-width: 633px;
}

.hero__copy h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(32px, 2.5vw, 48px);
  line-height: 1.167;
}

.hero__copy p {
  font-weight: 500;            /* um passo acima do corpo — só possível com a Jost */
  font-size: 14px;             /* como no Figma */
  line-height: 21px;
}

/* ==========================================================================
   Bifurcação do funil duplo (só na variante A)
   ========================================================================== */

/* O .hero__card é uma linha (copy | CTA). A bifurcação seria um terceiro item
   nessa linha e espremeria os outros dois, então o wrap manda ela para uma
   linha própria embaixo. Escopado em .hero--a de propósito: a variante B não
   tem bifurcação e o controle dela precisa continuar intacto. */
.hero--a .hero__card { flex-wrap: wrap; }

.bifurcacao {
  flex-basis: 100%;            /* força a linha própria dentro do card */
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid rgba(33, 26, 29, .2);
}

.bifurcacao__pergunta {
  font-family: var(--btn);
  font-weight: 700;
  font-size: 15px;
}

/* Grid de duas colunas fixas, e não flex-wrap: as duas opções são uma escolha
   entre si, então precisam ficar lado a lado e do MESMO tamanho no desktop.
   Com flex-basis elas quebravam para linhas separadas assim que o card do hero
   apertava, e uma escolha empilhada lê como lista de dois links. */
.bifurcacao__opcoes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.bifurcacao__opcao {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  border: 1px solid var(--ink);
  background: var(--bg);
  color: inherit;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
  /* reset do <button>: uma das duas opções é <button> (abre o configurador) e a
     outra é <a> (rola até o card). Sem isto elas não pareceriam o mesmo par. */
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.bifurcacao__opcao strong {
  font-family: var(--btn);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
}

/* A linha de baixo diz para onde o clique leva. Em rosa porque é ela que
   carrega o nome do produto — sem isso a opção promete uma escolha e não
   entrega qual. */
.bifurcacao__opcao span {
  font-size: 12px;
  line-height: 1.4;
  color: var(--pink);
}

/* Preenchida, como o CTA principal: das duas opções esta é a que leva ao
   produto de maior ticket e abre o configurador na hora. O par continua
   equilibrado (mesmo tamanho, mesma posição), só o peso visual difere. */
.bifurcacao__opcao--destaque {
  background: var(--pink);
  border-color: var(--pink);
  color: var(--bg);
}

.bifurcacao__opcao--destaque span { color: var(--bg); }

.bifurcacao__opcao:hover,
.bifurcacao__opcao:focus-visible {
  transform: translateY(-2px);
  box-shadow: 4px 4px 0 var(--pink);
}

/* A sombra rosa sumiria contra o próprio fundo rosa. */
.bifurcacao__opcao--destaque:hover,
.bifurcacao__opcao--destaque:focus-visible {
  box-shadow: 4px 4px 0 var(--ink);
}

/* ==========================================================================
   Hero — variante B do teste A/B (Figma 37:88)

   Só sobrescreve o que difere da variante A; tudo o mais (.hero__media,
   .cta, tipografia base) vem das regras acima. As regras da variante A não
   podem ser tocadas: ela é o controle do teste.
   ========================================================================== */

/* O padrão esconde B. Se o script do <head> não rodar (JS desligado, erro),
   o visitante recebe o hero já validado em vez de uma página sem hero. */
.hero--b { display: none; }

[data-ab-hero="b"] .hero--a { display: none; }
[data-ab-hero="b"] .hero--b { display: block; }

/* 285px é onde o card começa no Figma, sobre uma foto de 922px.

   O min-height existe porque .hero__media é position:absolute e não entra na
   altura da seção: ela é padding-top + altura do card. Na variante A isso dá
   611+311 = 922, que casa com a foto por construção. Em B daria ~749 — 170px
   MENOS que a foto — e a seção seguinte (o blob) subia para cima da imagem.
   Igualando à altura da foto, o blob volta a começar na mesma distância da
   variante A. Repetido em cada breakpoint junto com a altura da .hero__media. */
.hero--b {
  padding-top: 285px;
  min-height: 921px;
}

/* a foto de B é ampliada além do "cover", então precisa de recorte */
.hero--b .hero__media { overflow: hidden; }

/* Ampliação e deslocamento exatos do Figma (node 37:117). Não é chute: a foto
   de B tem proporção 1.985, a mesma do elemento nessa medida, então o "cover"
   não distorce nada — e a cabeça cai em 1162-1570 contra 1167-1573 medidos no
   render do Figma: 5px de diferença.
   Sem stroke: no design novo a foto não tem contorno (37:117 vem com
   border-0), diferente da variante A. */
.hero--b .hero__photo {
  position: relative;
  left: -0.52%;
  top: -2.85%;
  width: 118.6%;
  /* o reset `img { max-width: 100% }` lá em cima capava a largura em 100% e
     matava a ampliação — aqui ela é intencional, e o overflow:hidden do
     .hero__media é quem contém o excedente */
  max-width: none;
  height: 124.68%;
  outline: 0;
}

/* As cunhas EXISTEM no design novo — eu tinha olhado só o node da foto
   (37:117) e concluído que não; elas são um node separado (37:90) desenhado
   por cima dela. Medidas no render do asset: 23.7% de largura por 620px de
   altura na esquerda, começando em 75.3% na direita — a mesma geometria da
   variante A, que por isso é herdada. Muda a cor (escuras, recortando a foto,
   em vez de claras dissolvendo no fundo) e cai a sombra.

   A sombra tem de sair: os 44px de deslocamento + 74px de borrão fazem
   sentido para a cunha CLARA da variante A, onde leem como profundidade sobre
   a foto. Com a cunha escura a mesma sombra vira uma mancha escura de ~118px
   avançando sobre a cabeça — em telas de 1280-1366px ela chegava no rosto. O
   node 37:90 não tem sombra nenhuma. */
.hero--b .hero__wedge {
  filter: none;
}

.hero--b .hero__wedge i { background: var(--ink); }

/* O card não ocupa mais a faixa inteira: são 788px encostados na BORDA
   ESQUERDA da mesma faixa de 1330px que a variante A usa — (1920-1330)/2 dá
   exatamente os 295px do Figma, então o alinhamento continua certo em
   qualquer largura em vez de depender de um valor fixo. */
.hero--b .hero__card {
  /* O 48vw não é enfeite: com largura fixa de 788px o card alcançaria o
     Jonathan por volta de 1550px de tela e o cobriria (o Figma só define o
     artboard de 1920). Acompanhando a largura da tela, sobra uma folga de
     ~30-45px entre a borda do card e ele em toda a faixa de desktop, e a
     composição "card à esquerda, foto respirando à direita" se mantém. */
  width: min(788px, 48vw, 100% - 2 * var(--gutter));
  margin-inline: max(var(--gutter), (100% - 1330px) / 2) auto;
  min-height: 0;

  flex-direction: column;
  align-items: flex-start;
  gap: 36px;
  padding: 32px;

  /* borda fechada e fundo chapado: em B o card flutua sobre a foto, não está
     grudado na base da página como o da variante A */
  border-bottom: 1px solid var(--ink);
  background: var(--bg);
}

.hero--b .hero__copy { max-width: 656px; }

/* 56px/64px no Figma; o vw intermediário mantém a proporção ao encolher */
.hero--b .hero__copy h1 {
  font-size: clamp(32px, 2.92vw, 56px);
  line-height: 1.143;
}

.hero--b .hero__copy p {
  font-size: 16px;
  line-height: 24px;
}

.hero--b .cta--hero {
  width: min(379px, 100%);
  height: 92px;
}

/* A cunha da direita avança para dentro conforme a tela estreita, enquanto a
   cabeça do Jonathan acompanha a largura mais devagar — medido, a folga entre
   as duas cai de 146px em 1920 para 8px em 1280 e vira sobreposição em 1200.
   Daqui pra baixo entra a diagonal mais suave que a própria variante A já usa
   em telas estreitas (≤900), que devolve 80-140px de folga. */
@media (max-width: 1400px) {
  .hero--b .hero__wedge--left  i { clip-path: polygon(0 0, 12% 0, 0 82%); }
  .hero--b .hero__wedge--right i { clip-path: polygon(88% 0, 100% 0, 100% 82%); }
}

/* ==========================================================================
   Sobre — blob + citação
   ========================================================================== */

.about {
  margin-top: 92px;
  padding-inline: var(--gutter);
}

.about__inner {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.about__card {
  width: 816px;
  height: 544px;
  flex: none;
  object-fit: cover;
  box-shadow: var(--shadow-lg);
}

.quote {
  position: relative;          /* pinta acima do card por vir depois no DOM */
  width: 1061px;
  flex: none;
  margin-left: -277px;         /* sobreposição sobre o card, como no Figma */
  margin-bottom: 13px;         /* ancora a base da citação 13px acima da base do card */

  display: flex;
  align-items: center;
  gap: 71px;
  padding: 32px;

  background: linear-gradient(270deg, var(--ink) 54.665%, rgba(33, 26, 29, .9) 117.15%);
  box-shadow: var(--shadow-lg);
  color: var(--bg);
}

.quote__title {
  flex: none;
  width: 400px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 2.3vw, 44px);
  line-height: .932;           /* Figma: 41px sobre fonte de 44px */
}

.quote__body {
  flex: 1;
  font-size: clamp(18px, 1.25vw, 24px);
  line-height: 1.458;
}

/* ==========================================================================
   Metodologia — os três pilares
   ========================================================================== */

/* Palco: altura do retângulo + uma tela de percurso. É a rolagem por dentro dele
   que dirige o crescimento e a entrada das três palavras.
   --alt-metodo é medido pelo JS: empilhado o retângulo deixa de ter os 468px do
   Figma, e fixar esse número desalinharia a centralização no mobile. */
.method-stage {
  position: relative;
  margin-top: 96px;
  height: calc(var(--alt-metodo, 468px) + 100vh);
}

.method {
  position: sticky;
  /* centraliza; em tela mais baixa que o retângulo, encosta no topo */
  top: max(0px, calc((100vh - var(--alt-metodo, 468px)) / 2));
  padding-inline: var(--gutter);
}

/* Quando o retângulo não cabe na tela, o palco não faz sentido: preso, ele
   encostaria nas bordas. O JS decide e marca aqui. */
.method-stage.sem-palco { height: auto; }
.method-stage.sem-palco .method { position: static; }
.method-stage.sem-palco .method__box { transform: none; }

.method__box {
  width: min(1058px, 100%);
  min-height: 468px;
  margin-inline: auto;        /* no Figma está 52px à direita do centro; centralizado fica mais limpo */

  /* Cresce conforme se aproxima. O transform-origin no centro faz ela vir "para
     frente" em vez de escorregar para um lado. */
  transform: scale(calc(.84 + var(--aproximar, 1) * .16));
  transform-origin: center;

  display: flex;
  align-items: center;
  /* As colunas do Figma somam 835 num conteúdo de 1008: sem isto, os 173px de
     sobra ficavam todos à direita e o par de textos escorava na esquerda. */
  justify-content: center;
  gap: 24px;
  padding: 24px;

  position: relative;
  /* O overflow contém o brilho: ele é interno, não vaza para fora do retângulo. */
  overflow: hidden;
  /* Stroke em gradiente vivo. Duas camadas: o fundo pinta a área interna
     (padding-box) e o gradiente só aparece na faixa da borda (border-box), que
     fica transparente.
     O ângulo soma duas fontes: --ang (oscilação lenta) e --ang-ponteiro (escrito
     pelo JS, já descontado de 180° para o rosa pousar sobre o cursor). Ambos
     registrados via @property — sem isso o navegador trata a variável como texto,
     e texto não interpola. */
  border: 1px solid transparent;
  background: linear-gradient(var(--bg), var(--bg)) padding-box,
              conic-gradient(from calc(var(--ang) + var(--ang-ponteiro, 0deg)),
                var(--indigo), var(--violet), var(--pink),
                var(--violet), var(--indigo)) border-box;
  box-shadow: var(--shadow-lg);
  animation: girar-stroke 11s ease-in-out infinite;
}

/* Brilho INTERNO do stroke: um anel do mesmo gradiente, borrado.

   As duas máscaras é que fazem dele um anel: sem elas o gradiente preencheria o
   elemento inteiro (background-clip é border-box por padrão) e inundaria a caixa.
   A de cima cobre o miolo (padding-box), a de baixo cobre tudo, e o `exclude`
   subtrai uma da outra — sobra só a faixa da borda.
   O inset negativo joga metade do borrão para fora; o overflow:hidden do pai
   corta essa metade, então o brilho só sangra para dentro. */
.method__box::after {
  content: '';
  position: absolute;
  inset: -14px;
  z-index: 0;
  border: 15px solid transparent;
  background: conic-gradient(from calc(var(--ang) + var(--ang-ponteiro, 0deg)),
              var(--indigo), var(--violet), var(--pink),
              var(--violet), var(--indigo)) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  filter: blur(8px);
  opacity: .5;                 /* discreto a pedido */
  pointer-events: none;
  animation: girar-stroke 11s ease-in-out infinite;
}

/* o conteúdo fica acima do brilho */
.method__copy,
.pillars { position: relative; z-index: 1; }

/* Oscila, e não dá a volta completa: uma rotação de 360° arrastaria o rosa para
   longe do ponteiro, que é justamente o que não pode acontecer. Assim o stroke
   continua vivo quando ninguém mexe, sem levar o rosa embora. */
@keyframes girar-stroke {
  0%, 100% { --ang: -18deg; }
  50%      { --ang: 18deg; }
}

.method__copy {
  width: 463px;        /* Figma 84:60 — colunas fixas, não flexíveis */
  flex: none;
  font-style: italic;
  font-size: 20px;
  line-height: 32px;
}

.method__lead {
  font-size: 20px;
  font-weight: 400;
  line-height: 32px;
}

.method__lead + p { margin-top: 32px; }

.method__accent {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(34px, 2.6vw, 50px);
  background: linear-gradient(180deg, var(--indigo), var(--pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pillars {
  width: 348px;        /* Figma 84:60 */
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 61px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 3.1vw, 60px);
  line-height: 32px;
}

.pillars__item--1 { --cor: var(--indigo); }
.pillars__item--2 { --cor: var(--violet); }
.pillars__item--3 { --cor: var(--pink); }

/* --brilho (0→1) é escrito pelo JS, uma palavra de cada vez conforme a rolagem.
   Em 0 a palavra é da cor do fundo (invisível); em 1, da própria cor — é assim
   que ela "aparece do branco".

   O padrão é 1, e não 0, de propósito: sem JS a palavra ficaria branca no fundo
   branco, ou seja, sumiria. Nascendo visível, o JS só assume depois. */
.pillars__item {
  --brilho: 1;
  color: var(--cor);   /* fallback p/ navegador sem color-mix: fica sempre visível */
  color: color-mix(in srgb, var(--cor) calc(var(--brilho) * 100%), var(--bg));
  transition: color .2s linear;
}

/* ==========================================================================
   Serviços — três cards (Figma 172:5 / 172:14 / 179:2)
   ========================================================================== */

.services {
  margin-top: 120px;
  padding-inline: var(--gutter);
}

.services__title {
  margin-bottom: 80px;   /* estava colado nos cards */
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 2.6vw, 40px);
  text-align: center;
}

/* O Figma desenhou 3 cards de 517px; agora são 4 (entrou o Diagnóstico
   Comportamental), e a largura por card cai para ~380px no mesmo container.
   Os quatro precisam ser vistos EM SEQUÊNCIA: é o encadeamento R$ 127 → R$ 1.200
   → R$ 497/mês → R$ 25.000 que faz a âncora de preço funcionar. Por isso a
   quebra é 4 → 2 → 1, e nunca 3, que deixaria um card órfão numa linha só. */
/* align-items fica no stretch padrão: os cards ficam da mesma altura, como no
   Figma (todos 644px), e o destacado apenas sobe. */
.services__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1599px;
  margin-inline: auto;
}

/* O card tem 3 linhas, como no Figma:
     [ imagem ocupando a linha inteira      ]
     [ título+descrição | incluso+preço     ]   ← duas colunas de 1fr
     [ botão                                ]

   Em grid, e não no flex-wrap que o Figma exporta: com flex, o max-width de 308px
   do botão entra no tamanho hipotético do item, ele cabia ao lado das colunas e
   não quebrava linha — as duas colunas espremiam para 45px. Em grid, quem manda
   na quebra é o grid-column, e o max-width só afeta o desenho. */
.card {
  display: grid;
  /* auto-fit + minmax em vez de "1fr 1fr" fixo: em telas médias os cards ficam
     com ~340px e duas colunas dariam 125px cada, ilegíveis. Assim elas só existem
     quando há espaço de verdade, e empilham sozinhas quando não há. */
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  align-content: center;
  gap: 32px 24px;
  padding: 40px 32px 10px;
  /* sem borda inferior: o card dissolve na página, como no Figma */
  border: 1px solid var(--ink);
  border-bottom: 0;
  /* Fundo do Figma: sólido até 96.817% e dissolvendo nos últimos 3% — é o que
     faz a base do card se desfazer na página em vez de cortar seco. */
  background: linear-gradient(to bottom, var(--bg) 96.817%, rgba(248, 247, 255, 0) 100%);
  box-shadow: 0 -86px 74px rgba(33, 26, 29, .03),
              inset 0 4px 144px rgba(245, 245, 245, .7);
}

/* Slot de imagem (Figma 172:114): 222px numa largura de 469 → mantido em
   aspect-ratio para acompanhar o card. O gradiente vai do transparente até a cor
   do card nos últimos 15%, dissolvendo a foto na base em vez de cortá-la. */
.card__media {
  grid-column: 1 / -1;     /* linha inteira */
  aspect-ratio: 469 / 222;
  background: linear-gradient(to bottom, rgba(249, 248, 255, 0) 84.992%, #f9f8ff 100%);
}

/* --- slot com mídia dentro (poster + vídeo) ---
   Aqui o gradiente deixa de ser background e passa a ser uma camada POR CIMA
   (::after): é ele que dissolve a base do vídeo na cor do card, e como
   background ele ficaria atrás da mídia, sem efeito nenhum. */
.card__media.video-lazy-wrap {
  position: relative;
  overflow: hidden;
  background: none;
}

.card__media.video-lazy-wrap > img,
.card__media.video-lazy-wrap > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* ancorado no topo: o slot é mais largo que o vídeo (2.11 contra 1.78), então
     o recorte tira altura — vindo de baixo, preserva o menu e o título da gravação */
  object-position: center top;
}

/* O vídeo entra sobre o poster e só aparece quando realmente começa a tocar.
   Se o autoplay for bloqueado ou o WEBM falhar, o poster continua à mostra. */
.card__media.video-lazy-wrap > video {
  opacity: 0;
  transition: opacity .4s ease;
}

.card__media.video-lazy-wrap > video.is-pronto { opacity: 1; }

.card__media.video-lazy-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(249, 248, 255, 0) 84.992%, #f9f8ff 100%);
}

.card--destaque .card__media.video-lazy-wrap::after {
  background: linear-gradient(to bottom, rgba(38, 30, 116, 0) 84.992%, var(--indigo) 100%);
}

/* Precisa desta especificidade: `.card--destaque .card__media` também tem duas
   classes e, vindo depois no arquivo, devolvia o gradiente para trás da mídia. */
.card--destaque .card__media.video-lazy-wrap { background: none; }

/* Auditoria de conversão: o vídeo já saiu do ffmpeg cropado no aspecto exato do
   slot (900x426 contra 469/222 do card — a mesma proporção, o corte foi feito
   na origem, simétrico, preservando o centro do quadro). "center top" seria
   inofensivo aqui na prática, mas declarar "center center" deixa explícito que a
   composição pretendida é o centro, e não depende de o cover não ter o que cortar. */
.card:not(.card--destaque) .card__media.video-lazy-wrap > img,
.card:not(.card--destaque) .card__media.video-lazy-wrap > video {
  object-position: center center;
}

/* coluna da esquerda — conteúdo ancorado no topo */
.card__topo {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card__titulo {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.1;
}

.card__titulo--menor { font-size: 28px; }

.card__desc {
  font-size: 12px;      /* Figma original — o +4px de antes ficou grande demais */
  line-height: 1.5;
}

/* Coluna da direita. Sem justify-content: a esquerda é a referência, e as duas
   começam no mesmo topo — centralizar aqui fazia a direita flutuar. */
.card__meio {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card__incluso {
  font-style: italic;
  font-size: 16px;      /* Figma 12px, +4 a pedido */
}

.card__lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;      /* Figma 10px, +4 a pedido */
  line-height: 1.4;
}

/* O check vem como data-URI, e não arquivo: em file:// cada arquivo é uma origem
   opaca e um SVG externo em mask/background pode ser bloqueado (foi o que já
   apagou o logo do menu antes). Inline no CSS não tem esse risco. */
/* items-center no Figma (172:121): o check fica centrado na altura do texto e se
   recentra sozinho quando ele passa para duas linhas. */
.card__lista li {
  display: flex;
  gap: 10px;
  align-items: center;
}

.card__lista li::before {
  content: '';
  flex: none;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Crect x='.25' y='.25' width='15.5' height='15.5' fill='%23ED558D' stroke='%23211A1D' stroke-width='.5'/%3E%3Cpath d='M3.139 7l4.222 3.75 5.5-5.5' stroke='%23F8F8FF' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* A consultoria lista em texto corrido, sem checks (179:8) */
.card__lista--simples { font-size: 18px; }   /* Figma 14px, +4 a pedido */
.card__lista--simples li::before { content: none; }

/* O divisor tem transparência no Figma: #211A1D a 20% (e #F8F7FF a 20% no card
   escuro). Em currentColor cheio ele saía pesado demais. */
.card__preco {
  /* sem margin-top: o pai (.card__meio) já dá 8px de gap; somar margin duplicava
     para 16px entre a lista e o preço */
  padding-top: 16px;
  border-top: 1px solid rgba(33, 26, 29, .2);
  max-width: 215px;
  font-size: 24px;
}

/* "A partir de R$ 25.000" pede ~228px em 24px e quebrava em duas linhas dentro
   dos 215px acima. Como este é o preço-âncora da tabela, partir o número ao
   meio é justamente o que não pode acontecer: ele precisa ser lido de uma vez.
   Só o teto cresce (o traço divisor fica ~25px mais largo que o dos vizinhos,
   diferença que não se nota) e o nowrap garante a linha única mesmo se a copy
   mudar. O corpo continua em 24px como os outros: encolher a fonte resolveria
   a quebra, mas enfraqueceria exatamente o número que ancora os demais. */
.card__preco--longo {
  max-width: 240px;
  white-space: nowrap;
}

/* O botão fica sozinho na última linha: flex-basis 100% força a quebra, e o
   max-width devolve a largura de 308px do Figma. */
.cta--card {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 308px;
  margin-inline: auto;
  padding: 16px 8px;
  font-size: 16px;
  gap: 8px;
  border: 0;              /* um dos três é <button> */
  cursor: pointer;
  font-family: var(--btn);
  font-weight: 700;
}

.cta--card .cta__icon { width: 28px; height: 28px; }

/* --- card destacado: Landing Pages --- */

.card--destaque {
  /* Sobe 42px no Figma (top 2442 contra 2484). As margens se anulam (-42 + 42),
     então ele mantém a mesma altura dos outros e só desloca. */
  margin-top: -42px;
  margin-bottom: 42px;
  padding-inline: 24px;
  /* o card destacado ancora o conteúdo no topo (content-start no Figma), ao
     contrário dos outros dois, que centralizam */
  align-content: start;
  gap: 32px 23px;
  color: var(--bg);
  border: 1px solid #fcfbff;
  background: linear-gradient(to bottom,
              var(--indigo) 94.876%, #928dbc 94.876%, var(--bg) 100%);
  /* 94px de blur (o Figma exporta 47 no filtro drop-shadow, que é metade) */
  box-shadow: 0 -46px 94px rgba(38, 30, 116, .2),
              inset 0 4px 154px var(--indigo);
}

/* no card escuro a foto dissolve no índigo, e o divisor inverte para claro */
.card--destaque .card__media {
  background: linear-gradient(to bottom, rgba(38, 30, 116, 0) 84.992%, var(--indigo) 100%);
}

.card--destaque .card__preco { border-top-color: rgba(248, 247, 255, .2); }

/* no fundo escuro o contorno do check inverte */
.card--destaque .card__lista li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Crect x='.25' y='.25' width='15.5' height='15.5' fill='%23ED558D' stroke='%23F8F7FF' stroke-width='.5'/%3E%3Cpath d='M3.139 7l4.222 3.75 5.5-5.5' stroke='%23F8F8FF' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
}

/* ==========================================================================
   FAQ (Figma 268:102 / 268:37)
   ========================================================================== */

.faq {
  /* Mesmo ritmo vertical do .services logo acima (também 120px).
     O respiro de baixo é padding DAQUI, não margin do .contact-stage (que
     agora é 0): assim o rosa do gradiente continua até encostar na seção de
     contato. Com o vão vindo de fora, aquele trecho era fundo neutro da
     página — uma faixa branca entre o rosa e o roxo, que é o "gap" que
     aparecia mesmo depois de eu zerar o padding duplicado. */
  margin-top: 120px;
  padding: 117px var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 42px;

  /* Gradiente do Figma: transparente em cima, rosa clarinho embaixo — a seção
     se dissolve a partir do fundo neutro em vez de começar com uma linha dura. */
  background: linear-gradient(to bottom, rgba(255, 239, 245, 0), #ffeff5 50%);
}

.faq__titulo {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(32px, 4.5vw, 70px);
  text-align: center;
}

.faq__lista {
  display: flex;
  flex-direction: column;
  gap: 19px;
  width: min(790px, 100%);
}

.faq__item {
  background: var(--bg);
  border: 1px solid var(--ink);
  filter: var(--shadow-j);
}

.faq__pergunta {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px;
  font-family: var(--btn);
  font-size: 20px;
  cursor: pointer;
  /* remove o marcador nativo (triângulo/seta) do <summary> nos dois motores */
  list-style: none;
}
.faq__pergunta::-webkit-details-marker { display: none; }

.faq__icone {
  flex: none;
  width: 44px;
  height: 32px;
}

/* O chevron gira; o traço divisor ao lado fica parado — mesma leitura do
   protótipo do Figma, só que aqui é CSS de verdade, não dois frames trocando. */
.faq__icone path:first-child {
  transform-origin: 11px 16px;
  transition: transform .25s ease;
}
.faq__item[open] .faq__icone path:first-child { transform: rotate(180deg); }

/* O <div> é quem o JS anima (altura de 0 até o scrollHeight) e por isso não
   pode ter padding: com box-sizing:border-box, um padding-bottom aqui vira um
   piso mínimo que a altura nunca consegue zerar, e a transição de fechar
   nunca dispara "transitionend". O padding de verdade mora no <p> de dentro,
   que não é o elemento medido/animado. */
.faq__resposta { overflow: hidden; }

.faq__resposta p {
  padding: 0 24px 24px calc(24px + 44px + 24px);   /* alinha com o texto da pergunta, não com o ícone */
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
}

@media (max-width: 640px) {
  .faq { padding: 64px var(--gutter); gap: 32px; }

  .faq__pergunta {
    align-items: flex-start;
    padding: 24px 18px;
    font-size: 18px;
    text-align: left;
  }

  /* no mobile a resposta acompanha a largura toda — não sobra espaço pra
     recuar embaixo do texto da pergunta como no desktop */
  .faq__resposta p { padding: 0 18px 24px; }
}

/* ==========================================================================
   Contato
   ========================================================================== */

/* O palco é o percurso de rolagem que dirige a animação: 757px do painel
   + uma tela inteira de curso. O JS lê o quanto dele já foi percorrido. */
/* margin-top: 0 porque quem dá o respiro antes desta seção agora é o
   padding-bottom do .faq. Com margin aqui, o vão ficava FORA das duas seções
   e aparecia como faixa de fundo neutro entre o rosa do FAQ e o roxo daqui. */
.contact-stage {
  position: relative;
  margin-top: 0;
  height: calc(757px + 100vh);
}

.contact {
  position: sticky;
  /* Centraliza na tela; em telas mais baixas que o painel, encosta no topo
     em vez de sair pra fora. */
  top: max(0px, calc((100vh - 757px) / 2));
  overflow: hidden;
  height: 757px;
  background: var(--ink);
}

/* Fundo do estado final (Figma 118:74): o blob 79:45 borrado a 427px.

   É <div> com background-image, e não <img>, por causa de custo: o Figma exibe a
   imagem a 5089x3393, e um <img> desse tamanho faria o navegador rasterizar uma
   camada de ~69 milhões de pixels (~276MB) — ainda por cima animada pelo ponteiro.
   Com background-position/-size o elemento tem o tamanho da faixa e o mesmo
   enquadramento sai de graça.

   O inset negativo evita que o blur crie vinheta nas bordas; o overflow:hidden
   do .contact corta o excedente. */
.contact__bg {
  position: absolute;
  inset: -160px;
  z-index: 1;
  background: url(assets/contact-bg.webp) no-repeat;
  background-size: 5089px 3393px;
  background-position: -867px -1157px;   /* Figma: -1027,-1317 + os 160 do inset */
  /* A imagem já vem pré-borrada e reduzida a 400px (a ampliação de 12.7x repõe a
     escala do blur). Este resto só apaga o facetamento da ampliação. */
  filter: blur(28px);
  opacity: var(--expulsar, 0);
  pointer-events: none;
  /* O ponteiro usa `translate` e a deriva usa `transform`: são propriedades
     separadas e se compõem, então as duas convivem sem uma sobrescrever a outra. */
  translate: var(--bg-dx, 0px) var(--bg-dy, 0px);
  animation: derivar-fundo 34s ease-in-out infinite;
  will-change: transform, translate;
}

/* Continua se mexendo mesmo com o usuário parado. Lento e sem simetria, para
   não dar a sensação de loop. */
@keyframes derivar-fundo {
  0%, 100% { transform: translate3d(-2%, -1.5%, 0) scale(1.06); }
  27%      { transform: translate3d(2.5%, 1.5%, 0) scale(1.13); }
  54%      { transform: translate3d(1%, -2.5%, 0) scale(1.08); }
  78%      { transform: translate3d(-1.5%, 2%, 0) scale(1.11); }
}

.contact__inner {
  position: relative;
  z-index: 2;
  min-height: 757px;
  padding: 281px var(--gutter) 64px;
}

/* Vira o card branco do 118:92 conforme --expulsar vai a 1. */
.contact__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  width: calc(361px + var(--card, 0) * 82px);   /* 361 → 443 */
  max-width: 100%;
  padding: calc(var(--card, 0) * 32px);
  /* sobe junto com o padding para o texto não descer: 281 → 249 no topo do card */
  margin-top: calc(var(--card, 0) * -32px);
  background: rgb(248 247 255 / var(--card, 0));
  filter: drop-shadow(0 4px calc(var(--card, 0) * 57px)
                      rgb(248 247 255 / calc(var(--card, 0) * .9)));
  /* --copy-dx é escrito pelo JS: distância até o centro horizontal da tela */
  transform: translateX(var(--copy-dx, 0px));
  will-change: transform;
}

/* Trocado no meio do percurso (p >= 0.5). text-align não é animável, então o
   corte é seco — fica mascarado porque o bloco está em movimento nesse ponto. */
.contact.is-centered .contact__copy   { align-items: center; }
.contact.is-centered .contact__text   { text-align: center; }
.contact.is-centered .contact__text p { margin-inline: auto; }

.contact__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

/* Figma 118:102 — no estado final o logo fica ABAIXO do card, centralizado.
   Aparece junto com o card. */
.contact__lockup {
  position: absolute;
  left: 50%;
  top: 615px;
  z-index: 2;
  width: 139px;
  height: auto;
  transform: translateX(-50%);
  opacity: var(--expulsar, 0);
  filter: drop-shadow(0 0 12px rgba(252, 251, 255, .35));
}

/* O texto inverte: branco sobre a faixa escura no começo, escuro sobre o card
   branco no fim (Figma 118:93). */
.contact__text h2 {
  font-family: var(--serif);
  font-weight: 400;            /* Figma pedia 600; aliviado a pedido */
  font-size: clamp(32px, 2.3vw, 44px);
  line-height: .932;           /* Figma: 41px sobre fonte de 44px */
  color: color-mix(in srgb, var(--ink) calc(var(--card, 0) * 100%), #fff);
}

.contact__text p {
  max-width: 334px;
  font-weight: 400;            /* Figma pedia bold; aliviado a pedido */
  font-size: 16px;
  line-height: 21px;
  color: color-mix(in srgb, var(--ink) calc(var(--card, 0) * 100%), var(--bg));
}

.contact__photo {
  position: absolute;
  top: 0;
  right: -136px;              /* sangra pela direita, como no Figma */
  z-index: 1;
  width: 1351px;
  height: 757px;
  object-fit: cover;
  object-position: center 12%;
  /* --expulsar (0→1) é escrito pelo JS conforme a seção entra na tela.
     A faixa escura já ocupa a largura toda; ao deslizar a foto para fora,
     ela vai sendo revelada horizontalmente. */
  transform: translateX(calc(var(--expulsar, 0) * 118%));
  will-change: transform;
}

/* ==========================================================================
   Rodapé legal (Figma 265:6)
   ========================================================================== */

.legal-bar {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px var(--gutter);
  background: var(--ink);
  color: var(--bg);
  font-family: var(--body);
  font-size: 16px;
  line-height: 21px;
  text-align: center;
}

.legal-bar__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 24px;
}

.legal-bar__links a,
.legal-bar__links button {
  font: inherit;
  color: var(--pink);
  text-decoration: underline;
  text-transform: uppercase;
  background: none;
  border: 0;
  padding: 4px;                /* só área de toque; não deve parecer botão */
  cursor: pointer;
}

.legal-bar__links a:hover,
.legal-bar__links button:hover { text-decoration: none; }

/* Selo assinado no canto: decorativo, então some antes de brigar por espaço
   com os links no mobile em vez de forçar quebra de linha estranha. */
.legal-bar__selo {
  position: absolute;
  top: 24px;
  right: var(--gutter);
  width: 111px;
  height: 39.8px;
}

@media (max-width: 900px) {
  .legal-bar__selo { display: none; }
}

@media (max-width: 640px) {
  /* Sem o selo (escondido acima) e sem nada mais disputando o topo, o padding
     original de 24px deixava o texto colado na borda de cima da faixa.
     padding-bottom extra por um motivo diferente: o .zap é fixed e fica por
     cima do fim da página. Sem esse respiro, no scroll máximo os links
     "Política de privacidade", "Política de uso da marca" e "Gerenciar
     cookies" ficam embaixo do botão do WhatsApp e o toque nunca chega neles
     — o espaço extra deixa o usuário rolar até os links saírem de baixo do
     FAB. 54px do botão (mobile) + 16px do bottom dele + folga. */
  .legal-bar { padding-top: 48px; padding-bottom: 96px; }
}

/* ==========================================================================
   Chat flutuante do WhatsApp
   ========================================================================== */

.zap {
  position: fixed;
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 32px);
  z-index: 200;
  /* transition em transform, não em bottom: bottom exige recalcular layout a
     cada frame (o Lighthouse reprova como "animação não composta") e ainda
     conta como mudança de esquema para o CLS. translateY só move a camada já
     pintada, sem re-layout. No desktop o banner de cookies fica à ESQUERDA —
     sem colisão — então aqui o transform fica parado; só o breakpoint de
     640px (onde o banner vira barra) declara um translateY de verdade. */
  transition: transform .3s ease;
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.zap__fab {
  flex: none;
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: linear-gradient(180deg, var(--pink) 49.412%, var(--bg) 416.47%);
  filter: var(--shadow-j);
  transition: filter .3s ease;
}

.zap__fab img { width: 32px; height: 32px; }

.zap__fab:hover,
.zap__fab:focus-visible {
  filter: var(--shadow-j) drop-shadow(0 0 22px rgba(237, 85, 141, .75))
          saturate(1.25) brightness(1.12);
}

/* A bolha de conversa. transform-origin no canto de baixo à direita para ela
   nascer do próprio botão ao abrir. */
.zap__chat {
  position: relative;
  /* 320px para o rótulo do botão caber numa linha */
  width: min(320px, calc(100vw - 2 * clamp(16px, 3vw, 32px) - 72px));
  padding: 16px 18px;
  background: var(--nav-bg);
  border: 1px solid rgba(33, 26, 29, .1);
  box-shadow: 0 18px 40px rgba(33, 26, 29, .14);
  transform-origin: 100% 100%;
  transition: opacity .25s ease, transform .25s ease;
}

/* rabinho apontando para o botão */
.zap__chat::after {
  content: '';
  position: absolute;
  right: -7px;
  bottom: 18px;
  width: 12px;
  height: 12px;
  background: var(--nav-bg);
  border-right: 1px solid rgba(33, 26, 29, .1);
  border-top: 1px solid rgba(33, 26, 29, .1);
  transform: rotate(45deg);
}

.zap--fechado .zap__chat {
  opacity: 0;
  transform: scale(.85) translateY(8px);
  pointer-events: none;
}

.zap__fechar {
  position: absolute;
  top: 2px;
  right: 6px;
  border: 0;
  background: none;
  font-size: 20px;
  line-height: 1;
  color: var(--ink);
  opacity: .45;
  cursor: pointer;
}

.zap__fechar:hover { opacity: 1; }

.zap__pergunta {
  margin-right: 14px;
  font-weight: 500;
  font-size: 15px;
  line-height: 1.35;
}

/* Três pontos rosas logo depois da última letra, como reticências.
   O padding grande é só área de toque — em elemento inline ele expande o clique
   sem empurrar a linha. As margens negativas devolvem o espaço lateral, então os
   pontos ficam encostados no "?" apesar dos 8px de padding. */
.zap__pontos {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  margin: -14px -4px -14px 1px;
  padding: 14px 8px;
  border: 0;
  background: none;
  cursor: pointer;
  vertical-align: middle;
}

.zap__pontos span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--pink);
  transition: transform .2s ease, opacity .2s ease;
}

.zap__pontos:hover span { transform: scale(1.25); }

/* expandido, os pontos recuam — já cumpriram o papel de "tem mais" */
.zap__pontos--ativo span { opacity: .45; }

.zap__detalhe {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(33, 26, 29, .1);
  font-size: 13px;
  line-height: 1.5;
}

/* O rótulo cabe numa linha só. O clamp encolhe a fonte nas telas estreitas em vez
   de deixar quebrar — com nowrap, quebrar não é opção: transbordaria a bolha.

   Prefixado com .zap para subir a especificidade: as regras `.cta` dentro dos
   media queries vêm depois no arquivo e, com a mesma especificidade, venciam este
   font-size — o rótulo ia para 15/17px e estourava a bolha. */
.zap .cta--zap {
  margin-top: 12px;
  width: 100%;
  padding: 14px 10px;
  gap: 10px;
  font-size: clamp(11.5px, 3.4vw, 13px);
  text-align: center;
  white-space: nowrap;
}

/* ícone proporcional ao texto, como nos CTAs grandes (~1.8x a altura da fonte) */
.cta--zap .cta__icon { width: 24px; height: 24px; }

/* ==========================================================================
   Configurador da Landing Page (<dialog>)
   ========================================================================== */

/* Mesma cor dos cards claros (#f8f7ff) e texto no preto da paleta (#211a1d),
   a pedido — antes era índigo com texto claro. */
.config {
  width: min(520px, calc(100vw - 32px));
  max-height: min(88vh, 780px);
  overflow-y: auto;
  padding: 32px;
  border: 1px solid var(--ink);
  color: var(--ink);
  background: var(--bg);
  box-shadow: 0 40px 90px rgba(33, 26, 29, .3);
}

.config::backdrop {
  background: rgba(33, 26, 29, .55);
  backdrop-filter: blur(3px);
}

.config__fechar-form { margin: 0; }

.config__fechar {
  position: absolute;
  top: 12px;
  right: 14px;
  border: 0;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: var(--ink);
  opacity: .5;
  cursor: pointer;
}

.config__fechar:hover { opacity: 1; }

.config__titulo {
  margin-bottom: 20px;
  padding-right: 24px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(26px, 4vw, 32px);
  line-height: 1.1;
}

.config__base { font-size: 14px; }

/* mesmo check do card, para o "já incluso" ler como continuação da seção */
.config__incluso {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.4;
}

.config__incluso li { display: flex; gap: 10px; align-items: center; }

/* contorno escuro: agora o fundo do diálogo é claro */
.config__incluso li::before {
  content: '';
  flex: none;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Crect x='.25' y='.25' width='15.5' height='15.5' fill='%23ED558D' stroke='%23211A1D' stroke-width='.5'/%3E%3Cpath d='M3.139 7l4.222 3.75 5.5-5.5' stroke='%23F8F8FF' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat center / contain;
}

.config__legenda {
  margin: 24px 0 12px;
  font-style: italic;
  font-size: 13px;
  opacity: .85;
}

.config__opcoes { display: flex; flex-direction: column; gap: 10px; }

/* --- a opção: checkbox do Figma 172:204, agora clicável --- */

.opcao {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  cursor: pointer;
  border: 1px solid rgba(33, 26, 29, .18);
  transition: border-color .2s ease, background .2s ease;
}

.opcao:hover { border-color: rgba(33, 26, 29, .45); }

/* Sem destaque rosa na linha inteira ao marcar — só o checkbox muda de cor
   (ver .opcao input:checked + .opcao__box abaixo). */

/* o input real fica invisível mas continua sendo ele quem recebe foco e teclado */
.opcao input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.opcao__box {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border: 1px solid rgba(33, 26, 29, .45);
  background: no-repeat center / contain;
}

.opcao input:checked + .opcao__box {
  border-color: var(--ink);
  background-color: var(--pink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3.139 7l4.222 3.75 5.5-5.5' stroke='%23F8F8FF' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
}

/* foco visível mesmo com o input escondido */
.opcao:has(input:focus-visible) {
  outline: 3px solid var(--pink);
  outline-offset: 3px;
}

.opcao__texto { display: flex; flex-direction: column; gap: 3px; }

.opcao__nome { font-size: 15px; }

.opcao__valor {
  color: var(--pink);
  font-weight: 700;
  white-space: nowrap;
}

.opcao__ajuda {
  font-size: 13px;
  line-height: 1.45;
  opacity: .72;
}

/* Mesma linguagem do divisor dos cards (.card__preco): uma linha acima, sem
   caixa. "Total estimado" centralizado com o valor, não na linha de base — em
   baseline os dois ficavam desalinhados por causa da diferença de tamanho. */
.config__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(33, 26, 29, .2);
  font-size: 14px;
}

.config__total strong {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(28px, 5vw, 34px);
  line-height: 1;
  color: var(--ink);
}

.cta--config {
  margin-top: 20px;
  width: 100%;
  padding: 14px 8px;
  gap: 12px;
  font-size: 15px;
}

.cta--config .cta__icon { width: 24px; height: 24px; }

/* --- FAQ compacto dentro do configurador (só na variante A) ---
   Escondido por padrão: na variante B o lead chega aqui pelo card de Serviços,
   depois de já ter passado pela seção de FAQ da página. Só na A a bifurcação
   pula a página inteira e traz ele direto para o configurador, e aí as dúvidas
   precisam estar à mão. */
.config__faq { display: none; }
[data-ab-hero="a"] .config__faq {
  display: block;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(33, 26, 29, .2);
}

.config__faq-titulo {
  margin-bottom: 8px;
  font-family: var(--btn);
  font-weight: 700;
  font-size: 13px;
  opacity: .72;
}

.config__faq-item { border-bottom: 1px solid rgba(33, 26, 29, .12); }
.config__faq-item:last-child { border-bottom: 0; }

/* Sem caixa e sem ícone, ao contrário do FAQ da página: aqui ele é apoio de
   decisão no rodapé do configurador, não uma seção. Se tivesse o mesmo peso
   visual das opções acima, competiria com elas pelo clique. */
.config__faq-item > summary {
  padding: 10px 20px 10px 0;
  position: relative;
  font-size: 13.5px;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}
.config__faq-item > summary::-webkit-details-marker { display: none; }

/* Chevron em CSS puro (uma borda girada), e não o SVG do FAQ grande: naquele
   tamanho o ícone de 44px do Figma dominaria a linha. */
.config__faq-item > summary::after {
  content: '';
  position: absolute;
  right: 4px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--pink);
  border-bottom: 2px solid var(--pink);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s ease;
}

.config__faq-item[open] > summary::after { transform: translateY(-20%) rotate(225deg); }

.config__faq-item > p {
  padding: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
  opacity: .78;
}

/* ==========================================================================
   Banner de cookies
   ========================================================================== */

/* Canto ESQUERDO: o direito é do FAB do WhatsApp. Mesmo clamp de afastamento
   das bordas que o .zap, para os dois lerem como um par.
   z-index acima do .zap (200) e bem abaixo do .cursor-glow (9999). */
.cookies {
  position: fixed;
  left: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 32px);
  z-index: 300;
  width: min(380px, calc(100vw - 2 * clamp(16px, 3vw, 32px)));
  padding: 16px 18px;
  /* mesmo tratamento do balão do WhatsApp: o banner é da mesma família visual.
     Cantos retos como todo o resto da página — não é esquecimento. */
  background: var(--nav-bg);
  border: 1px solid rgba(33, 26, 29, .1);
  box-shadow: 0 18px 40px rgba(33, 26, 29, .14);
  /* A animação move só o TRANSFORM, nunca a opacidade. Enquanto uma animação
     está ativa ela manda no estilo do elemento — então animar opacidade de 0
     faria a visibilidade do aviso depender de o motor de animação rodar. Numa
     aba suspensa o banner ficaria invisível e o consentimento nunca seria
     pedido. Deslizando só a posição, o pior caso é o banner nascer 12px mais
     baixo: visível de qualquer jeito. */
  animation: cookies-entra .3s ease;
}

/* Reforça o display:none do agente de usuário: o banner não pode reaparecer
   por engano depois da escolha, nem que ganhe display em algum breakpoint. */
.cookies[hidden] { display: none !important; }

@keyframes cookies-entra {
  from { transform: translateY(12px); }
  to   { transform: none; }
}

.cookies__texto {
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.35;
}

.cookies__link {
  display: inline-block;
  margin-left: 4px;
  /* --pink puro sobre --nav-bg dá só 3.22:1 — abaixo do mínimo de 4.5:1 do
     WCAG AA pra texto normal (o Lighthouse reprovava isto). Escurecido com
     25% de --ink chega a 4.81:1 e ainda lê como rosa, só um tom mais fechado. */
  color: color-mix(in srgb, var(--pink) 75%, var(--ink) 25%);
  text-decoration: underline;
  white-space: nowrap;
}

.cookies__link:hover { text-decoration: none; }

.cookies__acoes {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 14px;
}

.cookies__btn {
  height: 40px;
  padding: 0 20px;
  border: 0;
  cursor: pointer;
  font-family: var(--btn);
  font-weight: 700;
  font-size: 14px;
  transition: filter .3s ease, background-color .3s ease;
}

/* Mesmo gradiente e mesmo halo do .cta: aceitar é a ação principal e deve
   parecer com os outros botões de ação da página. */
.cookies__btn--aceitar {
  background: linear-gradient(180deg, var(--pink) 49.412%, var(--bg) 416.47%);
  filter: var(--shadow-j);
  color: var(--bg);
}

.cookies__btn--aceitar:hover,
.cookies__btn--aceitar:focus-visible {
  filter: var(--shadow-j) drop-shadow(0 0 22px rgba(237, 85, 141, .75))
          saturate(1.25) brightness(1.12);
}

/* Negar é discreto, mas não escondido: precisa ser tão clicável quanto o outro,
   só não compete visualmente. */
.cookies__btn--negar {
  background: none;
  border: 1px solid rgba(33, 26, 29, .2);
  color: var(--ink);
}

.cookies__btn--negar:hover,
.cookies__btn--negar:focus-visible {
  background-color: rgba(33, 26, 29, .06);
}

/* ==========================================================================
   Responsivo — o Figma só tem o artboard de 1920px, daqui pra baixo é adaptação
   ========================================================================== */

/* Larguras fluidas, não fixas: em px a linha do desktop soma 816 - 277 + 1061 =
   1600px, que só cabe perto de 1920. Em %, ela nunca passa de 100%.
   44 + 62 - 6 = 100% do .about__inner. O corte é 1700 (e não 1500) porque abaixo
   disso a linha fixa já vazava para fora da tela. */
@media (max-width: 1700px) {
  .about__card { width: 44%; height: auto; aspect-ratio: 816 / 544; }
  .quote { width: 62%; margin-left: -6%; gap: 40px; }
  .quote__title { width: 42%; }
}

/* A citação empilha aqui (e não a 900px): abaixo disso o lado a lado deixa o
   texto espremido em ~2 palavras por linha. */
@media (max-width: 1100px) {
  .about__inner { flex-direction: column; align-items: stretch; }
  .about__card {
    width: 100%;
    max-width: 620px;
    margin-inline: auto;
  }
  .quote {
    width: 100%;
    margin-left: 0;
    margin-bottom: 0;
    margin-top: -40px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .quote__title { width: auto; }

  /* As colunas do Figma (463 + 24 + 348 + 48 de padding = 883px) só cabem acima
     de ~1059px de tela: empilham aqui, antes de estourar.
     Empilhado o retângulo perde os 468px do Figma — mas continua cabendo preso na
     tela, então o palco segue de pé. Quem mede a altura nova é o JS (--alt-metodo),
     e é ele que desliga o palco se ela passar da tela. */
  .method__box { flex-direction: column; align-items: flex-start; gap: 32px; min-height: 0; }
  .method__copy { width: 100%; }
  .pillars { width: 100%; gap: 24px; }

  /* Quatro colunas não caberiam: viram uma, no mesmo limite do resto.
     O card destacado perde o avanço de 42px — empilhado ele só abriria um buraco. */
  .services__grid {
    grid-template-columns: 1fr;
    max-width: 517px;
    margin-inline: auto;
  }
  .card--destaque { margin-top: 0; }
}

/* Degrau intermediário, que não existia enquanto eram 3 cards: entre 1100 e
   1400px, quatro colunas dariam ~310px cada e o preço (24px) começaria a
   quebrar linha junto do título. Duas colunas mantêm os quatro cards na mesma
   ordem de leitura (esquerda→direita, cima→baixo), que é o que a âncora de
   preço precisa. O destacado também perde o avanço aqui: em 2x2 ele deslocaria
   a linha inteira de cima. */
@media (min-width: 1101px) and (max-width: 1400px) {
  .services__grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 1058px;   /* 517x2 + 24 de vão */
  }
  .card--destaque { margin-top: 0; margin-bottom: 0; }
}

@media (max-width: 1180px) {
  .hero { padding-top: 480px; }
  .hero__media { height: 700px; }

  .hero__card { flex-direction: column; align-items: flex-start; gap: 24px; }
  .hero__copy { max-width: none; }
  .cta--hero { width: 100%; max-width: 361px; }

  /* --- variante B --- */
  /* Daqui pra baixo a composição "card à esquerda, Jonathan à direita" não cabe
     mais: o card ocupa ~2/3 da largura e não sobra faixa livre à direita dele.
     Insistir nela deixava a cabeça INTEIRA atrás do card, com só a testa
     aparecendo por cima — pior que não ter composição.

     Então B converge para o padrão da variante A, que já está afinado para
     telas estreitas: card centralizado e mais abaixo, foto centralizada acima.
     O que identifica B continua (título maior, coluna, cunha escura, fundo
     chapado) — o que muda é só o arranjo, num tamanho que o Figma não define. */
  .hero--b { padding-top: 480px; min-height: 700px; }

  .hero--b .hero__photo {
    position: static;
    width: 100%;
    height: 100%;
  }

  .hero--b .hero__card {
    width: min(788px, 100% - 2 * var(--gutter));
    margin-inline: auto;
    gap: 28px;
  }
  .hero--b .hero__copy { max-width: none; }
  .hero--b .cta--hero { width: 100%; max-width: 379px; height: 78px; }
}

@media (max-width: 900px) {
  .hero { padding-top: 380px; }
  .hero__media { height: 560px; }
  /* diagonais mais suaves — no formato estreito o recorte original ficaria íngreme demais */
  .hero__wedge--left  i { clip-path: polygon(0 0, 12% 0, 0 82%); }
  .hero__wedge--right i { clip-path: polygon(88% 0, 100% 0, 100% 82%); }

  /* Botões começam a encolher a partir daqui. O desktop (>900px) fica intacto
     nos 78/67px de altura e 20px de texto que vieram do Figma. */
  .cta { gap: 12px; font-size: 17px; }
  .cta__icon { width: 28px; height: 28px; }
  .cta--hero { height: 64px; max-width: 320px; }
  .cta--contact { height: 58px; max-width: 320px; }

  /* --- variante B --- */
  .hero--b { padding-top: 173px; min-height: 560px; }
  .hero--b .hero__card { gap: 24px; }
  /* acompanha o encolhimento dos botões acima, senão o CTA de B ficaria com os
     92px do desktop numa tela estreita */
  .hero--b .cta--hero { height: 64px; max-width: 320px; }
}

@media (max-width: 640px) {
  .hero { padding-top: 300px; }
  .hero__media { height: 440px; }
  .hero__card { padding: 24px; }

  /* Compactada no celular: empilhada, as duas opções somavam ~232px e jogavam
     quase toda a bifurcação para fora da primeira tela — justamente o que ela
     não pode fazer, já que existe para ser a primeira escolha do visitante.
     Só o respiro encolhe; os textos continuam do mesmo tamanho, porque são
     eles que fazem a pessoa se reconhecer num dos dois caminhos. */
  .bifurcacao { gap: 8px; padding-top: 14px; }
  /* Empilha só aqui: a 375px duas colunas dariam ~150px cada e os rótulos
     quebrariam em 4 linhas. */
  .bifurcacao__opcoes { grid-template-columns: 1fr; gap: 8px; }
  .bifurcacao__opcao { padding: 10px 14px; }

  /* --- variante B --- */
  /* Mais alto que os 300px da variante A: o card de B é mais fechado (título
     maior, coluna), então começa antes para não empurrar o CTA para fora da
     primeira tela no celular. */
  .hero--b { padding-top: 268px; }
  .hero--b .hero__card { padding: 24px; gap: 20px; }
  /* mantém a assinatura de B (título maior que o da A, que aqui é 26px) sem
     estourar a largura do celular */
  .hero--b .hero__copy h1 { font-size: 30px; }
  .hero--b .hero__copy p { font-size: 15px; line-height: 22px; }
  .hero--b .cta--hero { height: auto; min-height: 58px; max-width: 100%; }

  /* Figma 131:7 — no mobile a metade de baixo da foto dissolve na cor de fundo.
     Camada sobre a foto (z acima dela, abaixo das cunhas e do card). Transparente
     até 50%, #f8f7ff opaco na base, exatamente como o gradiente do design. */
  .hero__media::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(248, 247, 255, 0) 50%, var(--bg) 100%);
  }

  /* Barra do menu inteira fora no celular, a pedido: os 4 links apertados numa
     tela estreita não ficavam bons, e sem eles a barra não se justifica. Some
     também o logo, e com ele a âncora de marca no topo — a primeira tela toda
     passa a ser do hero.

     Consequência assumida: no celular não há navegação por âncora; a pessoa
     rola a página. O FAB do WhatsApp continua como atalho de conversão, e as
     seções seguem com id, então links diretos (#servicos etc.) continuam
     funcionando se vierem de fora. */
  .nav { display: none; }

  /* Sem barra fixa não há o que compensar: os 130px de folga deixariam a seção
     parar baixa demais em quem chega por link direto com #ancora. */
  :target, [id] { scroll-margin-top: 16px; }

  /* Card vira barra colada na base: com 375px de largura não há espaço para o
     banner e o FAB lado a lado. Aqui a --altura-cookies passa a valer, e é ela
     que empurra o botão do WhatsApp para cima da barra. */
  .cookies {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    padding: 16px;
    border-width: 1px 0 0;
  }

  /* Metade da largura para cada: alvo de toque grande e sem hierarquia ambígua */
  .cookies__acoes { gap: 8px; }
  .cookies__btn { flex: 1; padding: 0; }

  /* Aqui, sim, o FAB precisa subir: a barra ocupa a largura toda e ficaria por
     cima dele. --altura-cookies é escrita pelo JS e volta a 0px na escolha;
     translateY (não bottom) para não disparar re-layout nem contar como
     mudança de esquema no CLS. */
  .zap {
    bottom: 16px;
    transform: translateY(calc(-1 * var(--altura-cookies, 0px)));
  }

  /* Três palavras centralizadas no mobile */
  .pillars { text-align: center; }

  /* Botões guiados por PADDING, não por altura fixa: o height: 52px de antes
     anulava o preenchimento e achatava o botão. Com height:auto o padding manda,
     e o min-height só garante o alvo de toque.
     Esta regra genérica vem ANTES das variantes de propósito — ela e as variantes
     têm a mesma especificidade, então quem vem depois ganha. */
  .cta { gap: 12px; font-size: 15px; padding: 18px 20px; }
  .cta__icon { width: 24px; height: 24px; }
  .cta--hero,
  .cta--contact {
    height: auto;
    min-height: 58px;
    max-width: 100%;
  }

  /* Sem a animação do retângulo no mobile — não funcionou bem no toque.
     A do contato continua (é a "tela final", que fica como está).
     Com .method estático, o JS já cai sozinho no estado de repouso: ele testa
     position !== 'sticky' e chama repousarMetodo(), que zera o desfoque e deixa
     as três palavras visíveis. Não precisa mexer no script. */
  .method-stage { height: auto; }
  .method { position: static; }
  .method__box { transform: none; }

  /* --- serviços: tudo centralizado no mobile --- */
  /* Sem align-items aqui: em grid ele alinha na VERTICAL e fazia as duas colunas
     se centrarem em alturas diferentes, desalinhando os topos. O centramento
     horizontal vem do text-align e do align-items das colunas (que são flex). */
  .card {
    padding: 28px 20px 16px;
    gap: 20px;
    text-align: center;
  }
  .card--destaque { padding-inline: 16px; }
  .card__titulo { font-size: 26px; }
  .card__titulo--menor { font-size: 23px; }
  /* (o auto-fit já empilha sozinho nesta largura; aqui só a centralização) */
  .card__topo { align-items: center; }

  /* .card__meio fica no padrão (stretch): o "frame" ocupa a largura toda e por
     isso lê como centralizado dentro do card, mas "Incluso:" e os checkboxes
     ficam alinhados à esquerda dentro dele — não mais cada linha se centrando
     sozinha, o que jogava cada checkbox numa posição horizontal diferente. */
  .card__incluso { text-align: left; }
  .card__lista li { justify-content: flex-start; text-align: left; }
  .card__lista--simples li { text-align: center; }
  .card__preco { font-size: 21px; margin-inline: auto; text-align: center; }
  .cta--card { padding: 18px 16px; font-size: 15px; }
  .cta--card .cta__icon { width: 22px; height: 22px; }

  /* --- chat: a bolha sobe para cima do botão em vez de ficar ao lado --- */
  .zap {
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
  }
  .zap__chat { width: min(300px, calc(100vw - 2 * 16px)); }
  /* o rabinho gira para apontar para baixo, na direção do botão */
  .zap__chat::after {
    right: 20px;
    bottom: -7px;
    border: 0;
    border-right: 1px solid rgba(33, 26, 29, .1);
    border-bottom: 1px solid rgba(33, 26, 29, .1);
  }
  .zap__fab { width: 54px; height: 54px; }
  .zap__fab img { width: 28px; height: 28px; }
  .zap .cta--zap { padding: 15px 10px; }
  .cta--zap .cta__icon { width: 22px; height: 22px; }

  /* --- configurador --- */
  .config { padding: 24px 20px; }

  .contact__lockup { width: 104px; }

  /* Título menor no mobile: em 32px ele ocupava 4 linhas e empurrava o card todo. */
  .hero__copy h1 { font-size: 26px; }

  /* Foto centralizada. Cortando ~51% da imagem nesta largura, cada 1% aqui move o
     enquadramento ~5px — daí o ajuste fino: 50% deixava à direita, 57% passava
     para a esquerda. */
  .hero__photo {
    object-position: 53% 12%;
    /* Sem stroke embaixo: ele cruzaria a dissolução do gradiente. Como outline é
       tudo-ou-nada, troco por bordas (só topo e laterais) só no mobile. */
    outline: none;
    border: 1px solid var(--ink);
    border-bottom: 0;
  }

  /* Respiro vertical crescente entre as seções.
     Estas margens moram nos PALCOS, não em .method/.contact — mirar as seções
     aqui não faria efeito nenhum (era o caso até agora). */
  .about          { margin-top: 88px; }
  .method-stage   { margin-top: 112px; }
  .services       { margin-top: 124px; }
  /* .contact-stage fica de fora do ritmo: o respiro antes dela é o
     padding-bottom do .faq, para o vão ser rosa e não uma faixa branca. */
}

/* Telas baixas: o painel de 757px do Figma não cabe, e o logo (que mora em y=615)
   ficaria para fora — 97px numa tela de 568. Não é caso raro: em celular a barra
   de URL come altura o tempo todo. Aqui o painel passa a ocupar a tela e o
   conteúdo se organiza em fluxo, com o logo depois do card em vez de posicionado. */
@media (max-height: 720px) {
  .contact {
    top: 0;
    height: 100vh;
  }
  .contact__inner {
    min-height: 100vh;
    padding-block: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(16px, 5vh, 56px);
  }
  .contact__copy { margin-top: 0; }
  .contact__lockup {
    position: static;
    transform: none;
    margin-inline: auto;
  }
}

/* Mobile: a última seção não anima mais — fica parada no estado final.
   Este bloco vem DEPOIS do de telas baixas de propósito: aquele impõe 100vh e
   centralização vertical, que valem para desktop deitado mas atrapalhariam aqui. */
@media (max-width: 640px) {
  /* os valores finais também no CSS, para a seção não nascer no estado inicial
     caso o JS demore ou não rode */
  .contact-stage {
    height: auto;
    --expulsar: 1;
    --card: 1;
    --copy-dx: 0px;
  }
  /* relative, e NÃO static: o .contact__bg é absolute com inset:-160px e depende
     deste elemento como bloco contenedor para o overflow:hidden recortá-lo.
     Em static ele escapava 160px para os lados e alargava a página inteira. */
  /* top: 0 é obrigatório aqui. O valor da regra base
     (top: max(0px, calc((100vh - 757px) / 2))) existe só para centralizar o
     painel STICKY no desktop; em position:relative ele não centraliza nada,
     só empurra a seção uns 70px para baixo (numa tela de 900px de altura) e
     ainda deixa esse espaço vago para trás, porque relative não tira o
     elemento do fluxo. Era o segundo pedaço do vão entre o FAQ e o contato. */
  .contact { position: relative; top: 0; height: auto; min-height: 0; }

  /* no estado final a foto já saiu de cena */
  .contact__photo { display: none; }

  .contact__inner {
    min-height: 0;
    padding: 56px var(--gutter) 64px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 40px;
  }

  /* centralização por CSS, sem depender da classe que o JS adiciona */
  .contact__copy {
    width: 100%;
    margin-top: 0;
    align-items: center;
  }
  .contact__text { text-align: center; }
  .contact__text p { margin-inline: auto; }

  .contact__lockup {
    position: static;
    transform: none;
    opacity: 1;
    margin: 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .zap__chat { transition: none; }
  .zap__pontos span { transition: none; }
  .zap { transition: none; }

  /* O banner ainda precisa aparecer — só chega sem deslizar */
  .cookies { animation: none; }

  .faq__icone path:first-child { transition: none; }

  /* A sombra no hover fica (é o retorno visual de que a opção é clicável);
     só o deslocamento sai. */
  .bifurcacao__opcao { transition: none; }
  .bifurcacao__opcao:hover,
  .bifurcacao__opcao:focus-visible { transform: none; }

  /* Sem os palcos: 1 tela de rolagem vazia não se justifica se nada anima */
  .contact-stage { height: auto; }
  .contact { position: static; height: auto; }
  .method-stage { height: auto; }
  .method { position: static; }
  .method__box { transform: none; }

  /* --expulsar fica 0, então o logo herdaria opacidade 0 e sumiria. */
  .contact__bg { display: none; }
  .contact__lockup {
    position: static;
    transform: none;
    opacity: 1;
    margin: 32px auto 0;
  }
}