/* =====================================================================
   GERADO por scripts/converter-do-design.mjs a partir do export do
   Claude Design. Nao editar a mao: o desenho e a fonte da verdade, e
   qualquer ajuste manual aqui volta a divergir dele.
   Os estilos de layout moram inline no index.html, como o design gerou.
   ===================================================================== */

@font-face{font-family:'Rubik';src:url(rubik.woff2) format('woff2');font-weight:300 900;font-style:normal;font-display:swap}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:'Rubik',system-ui,sans-serif;background:#f4f4f4;color:#431517;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,p,ul,ol,li,figure,blockquote,dl,dd{margin:0}
ul,ol{list-style:none;padding:0}
img,svg{display:block;max-width:100%}
a{color:#046129;text-decoration:none}
a:hover{color:#0a7d3a}
button,input,select{font:inherit;color:inherit}
summary::-webkit-details-marker{display:none}
:focus-visible{outline:3px solid #046129;outline-offset:3px}
@keyframes desliza{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@keyframes anel{0%{transform:scale(.96);opacity:.75}70%{transform:scale(1.28);opacity:0}100%{opacity:0}}
@keyframes sobe{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important}}

/* ---- fonte reserva com as metricas da Rubik ----
   Enquanto a Rubik carrega o texto sai na fonte do sistema; se as metricas
   nao baterem, a troca reflui o paragrafo e conta como deslocamento. */
@font-face{font-family:'Rubik Fallback';src:local('Arial'),local('Helvetica');
  ascent-override:93.5%;descent-override:25.6%;line-gap-override:0%;size-adjust:100%}
body{font-family:'Rubik','Rubik Fallback',system-ui,sans-serif}

/* ---- a textura de pontos nao pode passar por baixo do texto ----
   Ela cobria a secao inteira, e a mancha que acende no cursor caia em cima
   do paragrafo e da microcopy, atrapalhando a leitura. No desktop ela fica
   restrita ao lado direito, onde ha respiro acima do bloco verde e nenhum
   texto. No celular ela some: ali o bloco verde ocupa toda a faixa de baixo
   e o unico lugar onde os pontos apareciam era justamente atras do texto.
   O !important e necessario porque a mascara vem inline, do desenho. */
@media(min-width:901px){
  [data-hero="textura"]{
    -webkit-mask-image:radial-gradient(280px circle at var(--mx,72%) var(--my,32%),#000 6%,rgb(0 0 0/.16) 52%,transparent 76%),linear-gradient(90deg,transparent 0 55%,#000 68%)!important;
    -webkit-mask-composite:source-in!important;
    mask-image:radial-gradient(280px circle at var(--mx,72%) var(--my,32%),#000 6%,rgb(0 0 0/.16) 52%,transparent 76%),linear-gradient(90deg,transparent 0 55%,#000 68%)!important;
    mask-composite:intersect!important}
}
@media(max-width:900px){
  [data-hero="textura"]{display:none!important}
}

/* =====================================================================
   Contraste. Medido com a formula da WCAG contra o fundo real de cada
   elemento; os valores abaixo sao os menores que passam no limite (4,5
   para texto corrido, 3 para texto grande). O desenho ficou com varios
   tons no limiar, que somem em tela de celular sob luz do dia.
   ===================================================================== */
/* "1 geracao", "2 geracoes"... nos botoes de parentesco: 3,62 -> 4,74 */
[data-lista="vias"] button span span:last-child{opacity:.78!important}
/* o "04" da secao de etapas, verde da marca sobre o verde-noite: 2,13 -> 3,45 */
[data-etapas="lado"] span[style*="font-size:clamp(3.4rem"]{color:#5c854b!important}
/* numeros das etapas: 2,85 -> 3,40 */
.etapa__n{color:rgb(244 244 244/.4)!important}
/* cargos na secao do time: 4,28 -> 4,98 */
[data-trilho="time"] em{color:rgb(244 244 244/.7)!important}
/* "avaliacao no Google" sob cada depoimento: 4,00 -> 6,08 */
[data-trilho="depos"] figcaption span span{opacity:.8!important}
/* titulos e aviso legal do rodape: 3,91 -> 5,78 e 4,08 -> 5,0 */
footer h4{color:rgb(244 244 244/.6)!important}
footer p[style*="opacity:.75"]{opacity:.88!important}
/* As estrelas sao decorativas (aria-hidden), entao a regra de texto nao se
   aplica a elas; mesmo assim 2,23 sobre branco apaga demais. 3,63 mantem o
   dourado e deixa a nota legivel. */
.estrelas,[aria-hidden="true"][style*="color:#e2a13c"]{color:#b8791f!important}

/* ---- "Fazemos diferente" ----
   O cartao verde da esquerda tem texto curto e a lista da direita ganhou um
   quarto item: o cartao terminava no meio da secao e deixava um vazio de
   quase 300px embaixo dele. Esticando, ele vira um painel da altura da
   lista, com o conteudo centrado no proprio bloco. */
@media(min-width:861px){
  [data-dif="grade"]{align-items:stretch!important}
  [data-dif="cartao"]{display:flex;flex-direction:column;justify-content:center}
}
/* O verde solido do cartao ficava piso demais perto do cartao de fundo claro
   ao lado. O V da marca em traco, bem grande e quase invisivel, no canto,
   da profundidade sem competir com o texto (fica atras dele). */
[data-dif="cartao"]{position:relative;overflow:hidden}
[data-dif="cartao"]::before{content:'';position:absolute;
  right:-18%;bottom:-16%;width:80%;aspect-ratio:1;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20d%3D%22M41.3%20100%2032.7%2099.6%2029.3%2098.8%2027%2097%207.6%2070.8%201.1%2060.5%200%2058.2%20.2%2056.9%206.1%2052.8%2011.4%2051.4%2016.5%2051.2%2022.3%2052.8%2024.8%2054.9%2037.2%2073.8%2039.3%2075.6%2040.1%2075.5%2074.3%202.9%2081.7%200%2091%200%2095.5%201.9%2097.9%203.9%2099.9%207.3%2099.9%2012.6%2099.2%2013%2091.5%2028.9%2056.3%2095.5%2054.9%2096.9%2050.7%2098.7Z%22%20fill%3D%22%2523f4f4f4%22%20fill-opacity%3D%22.12%22%2F%3E%3C%2Fsvg%3E");
  background-repeat:no-repeat;background-size:contain;
  pointer-events:none}
[data-dif="cartao"]>*{position:relative;z-index:1}
/* As linhas da coluna da direita iam ate a borda do conteudo, bem onde o
   botao flutuante do WhatsApp fica: ele cobria as ultimas palavras do
   quarto item. Encurtando a medida, a linha termina antes do botao.
   48ch, e nao 56ch: em Rubik o "ch" e largo e 56ch dava 557px, mais que a
   propria coluna (538px), entao nao surtia efeito nenhum.
   (Sem citar a frase da pagina aqui: o verificador de compliance varre o
   CSS tambem, e com razao — um content: pode injetar texto visivel.) */
[data-dif="lista"] p{max-width:48ch}

/* ---- alvo de toque ----
   Tres links de texto corrido ficavam com 16px de altura, metade do minimo
   confortavel no dedo: o "fale direto no WhatsApp" do formulario, o
   "WhatsApp" e a "Politica de privacidade" do rodape. */
[data-hs-embed]>p a,footer a{display:inline-block;padding-block:.9rem}

/* ---- imagem com proporcao declarada ----
   O desenho pede aspect-ratio no estilo, mas mantem o atributo height do
   HTML. O atributo vira altura fixa em CSS e o aspect-ratio so age quando
   uma das dimensoes e automatica, entao a proporcao era ignorada e a foto
   saia esticada (o retrato do depoimento em destaque ficava 0,8:1 em vez
   de 1,68:1 no celular). */
img[style*="aspect-ratio"]{height:auto}

/* ---- pulo para o conteudo (acessibilidade, fora do design) ---- */
.pula{position:absolute;left:-9999px;background:#426236;color:#fff;padding:.8rem 1.2rem;z-index:999;font-weight:700}
.pula:focus{left:.5rem;top:.5rem}

/* ---- etapas: o realce segue o cursor no desktop e o toque no celular ----
   Antes o realce era fixo na etapa 04. O respiro lateral ja vale para
   todas, entao destacar nao empurra nada de lugar. */
.etapa{transition:background-color .2s cubic-bezier(.2,0,0,1);cursor:default}
.etapa:hover,.etapa:focus-visible,.etapa.ativa{background:rgb(66 98 54/.28)}
/* o !important vai porque a cor do numero e inline, vinda do desenho */
.etapa:hover .etapa__n,.etapa:focus-visible .etapa__n,.etapa.ativa .etapa__n{color:#f4f4f4!important}
.etapa__n{transition:color .2s cubic-bezier(.2,0,0,1)}
@media(hover:none){.etapa{cursor:pointer}}

/* ---- popup de saida (pedido do cliente, nao esta no design) ---- */
.saida{position:fixed;inset:0;z-index:80;display:none;place-items:center;padding:1.2rem;
  background:rgb(29 44 24/.68)}
.saida.vis{display:grid;animation:surge .2s ease-out both}
.saida.vis>div{animation:sobe .32s cubic-bezier(.2,0,0,1) both}
@keyframes surge{from{opacity:0}to{opacity:1}}

/* ---- ancora sob cabecalho fixo ----
   O cabecalho e sticky e ocupa 68px. Sem isto o alvo da ancora encosta em
   y=0 e some justamente o olho da secao e o topo do titulo: quem clica em
   "Ver se tenho direito" chega na secao certa achando que chegou no meio
   dela. Medido nas duas LPs antes da correcao: 68px de conteudo cobertos. */
section[id]{scroll-margin-top:5rem}

/* ---- percepcao premium ----
   O anel do botao flutuante pulsava para sempre: depois do terceiro ciclo
   so grita. Tres ciclos chamam atencao e param. */
.flutua-anel{animation-iteration-count:3!important}
/* O balao abre ao lado do botao redondo, alinhado pela base, e nao
   empilhado em cima dele. No celular isso so cabe porque ele encolhe
   junto: as medidas menores estao no bloco @media do celular. */
[data-cond="balaoAberto"]{
  right:calc(100% + .6rem)!important;bottom:0!important;
  animation:entraLado .32s cubic-bezier(.2,0,0,1) both!important}
/* Acende o bloco que acabou de aparecer depois de o quiz rolar ate ele.
   Sem isto o unico retorno de ter tocado no parentesco era o botao trocar
   de cor, e no celular o que aparece nasce fora do campo de atencao. */
/* U6: media 42x42, abaixo do minimo de toque de 44x44. No celular o botao
   fica so com o icone, entao os 2px que faltam vem de padding. */
[data-cta-topo]{min-width:44px;min-height:44px}
@keyframes acende{0%{box-shadow:0 0 0 0 rgb(4 97 41/.32)}100%{box-shadow:0 0 0 14px rgb(4 97 41/0)}}
.acende{animation:acende .9s cubic-bezier(.2,0,0,1) 1}
@media(prefers-reduced-motion:reduce){.acende{animation:none}}
@keyframes entraLado{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
/* Tres pilulas verdes cheias na primeira dobra e densidade de varejo. O
   botao do cabecalho passa ao tom que a pagina ja usa no link do FAQ,
   deixando um unico botao cheio acima da dobra. */
@media(min-width:561px){
  header a[data-wa]{background:rgb(4 97 41/.09)!important;color:#046129!important;box-shadow:none!important}
}
/* A barra "33%" e gramatica de checkout no ponto em que o lead decide se
   fala com uma assessoria ou entra num funil. */
.hs-form-html .hsfc-ProgressBar{display:none!important}

/* ---- entrada das secoes ao rolar ----
   O export do Claude Design nao trouxe revelacao nenhuma: da metade para
   baixo a pagina voltava a parecer estatica. Só opacity e transform, que
   rodam no compositor, e nada de animar secao inteira. */
.js .rev{opacity:0;transform:translate3d(0,14px,0)}
.js .rev.vis{opacity:1;transform:none;
  transition:opacity .42s cubic-bezier(.2,0,0,1),transform .42s cubic-bezier(.2,0,0,1)}
.js .rev.vis[data-atraso="1"]{transition-delay:60ms}
.js .rev.vis[data-atraso="2"]{transition-delay:120ms}
@media(prefers-reduced-motion:reduce){.js .rev{opacity:1;transform:none}}

/* ---- FAQ: indicador de abrir e fechar ----
   O padding a direita do summary ja estava reservado, mas vazio. */
.faq-item summary{position:relative}
.faq-item summary::after{content:'';position:absolute;right:.5rem;top:50%;width:14px;height:2px;
  background:#046129;transform:translateY(-50%)}
.faq-item summary::before{content:'';position:absolute;right:.5rem;top:50%;width:14px;height:2px;
  background:#046129;transform:translateY(-50%) rotate(90deg);
  transition:transform .2s cubic-bezier(.2,0,0,1)}
.faq-item[open] summary::before{transform:translateY(-50%) rotate(0)}
/* a altura nao e animada: custaria layout por quadro. So o conteudo sobe. */
.faq-item[open]>div{animation:sobe .28s cubic-bezier(.2,0,0,1) both}

/* ---- faixa animada ----
   Rodava para sempre, mesmo fora da tela, e a 26s lia como letreiro de
   promocao. Mais lenta, pausada fora da viewport e no hover. */
.faixa-marquee div{animation-duration:52s!important}
.faixa-marquee.pausada div{animation-play-state:paused}
.faixa-marquee:hover div{animation-play-state:paused}

/* ---- correcao de celular estreito ----
   No cabecalho o desenho nao previu larguras pequenas: em 390px o logotipo
   e o botao nao cabem lado a lado e o rotulo quebra em tres linhas. Aqui o
   logotipo e o botao encolhem para caber numa linha so. Nada muda no
   desenho acima de 560px. O !important e necessario porque o desenho poe
   os estilos inline no elemento, e inline vence qualquer seletor sem ele. */
@media(max-width:560px){
  header img{height:26px!important}
  header a[data-wa]{padding:.7rem .95rem!important;font-size:.8rem!important;
    white-space:nowrap!important;gap:.4rem!important}
  header a[data-wa] svg{width:1em!important;height:1em!important}
}
/* Abaixo de 400px nem o rotulo encurtado cabe ao lado do logotipo. O botao
   fica so com o icone (o rotulo continua no aria-label, e o mesmo apelo
   aparece inteiro logo abaixo, na primeira dobra e no botao flutuante). */
@media(max-width:400px){
  header a[data-wa]{font-size:0!important;padding:.7rem!important;gap:0!important}
  header a[data-wa] svg{width:20px!important;height:20px!important}
}

/* ---- primeira dobra no celular ----
   Os dois depoimentos flutuam sobre a foto. No desktop sobra largura e eles
   ficam nas bordas; quando a coluna desce para a largura da tela os dois
   cobrem a Tammy, o de cima bem no rosto. Fica so o de baixo (a posicao
   dele esta no bloco de celular mais abaixo, junto do resto da dobra). */
@media(max-width:900px){
  section[data-screen-label="Hero A"] figure:first-of-type{display:none}
  section[data-screen-label="Hero A"] figure:last-of-type p{font-size:.8rem!important}
}
/* Os tres numeros empilhavam no celular e comiam uma tela inteira de
   rolagem antes da primeira secao. Em linha eles viram uma faixa de prova,
   que e como funcionam no desktop. */
@media(max-width:620px){
  [data-hero="nums"]{gap:.9rem!important}
  [data-hero="nums"]>div{flex:1 1 0!important;min-width:0}
  [data-hero="nums"] b{font-size:2.1rem!important;letter-spacing:-.05em!important}
  [data-hero="nums"] span{font-size:.75rem!important;
    letter-spacing:.1em!important;margin-top:.5rem!important;line-height:1.35}
}

/* =====================================================================
   CELULAR: composicao propria, nao a de desktop espremida
   ===================================================================== */
@media(max-width:900px){
  /* --- primeira dobra ---
     A dobra do desktop e uma composicao de DUAS colunas: a foto vive num
     bloco verde que sangra 14% para fora e so fecha ao lado do texto.
     Tentar trazer isso para uma coluna deu errado tres vezes: virou foto
     dentro de um quadrado; depois fundo verde solido, que derrubou o
     contraste do texto; depois fundo bege com o V atras, aprovado mas
     ainda "so uma pagina bege com marca-d'agua".
     A versao escolhida: a foto sai (fica so no desktop) e o fundo vira
     verde-noite com a textura de pontos e o V bem sutil, igual ao usado
     na secao de Contato. O texto mora num cartao bege elevado por cima —
     e o cartao, nao o fundo, que sustenta o contraste: por isso ele segue
     sendo verde sobre bege por dentro, so que agora com profundidade em
     volta. Escolhida entre 5 opcoes comparadas com o cliente. */
  section[data-screen-label="Hero A"]{
    background:
      radial-gradient(circle at 1.4px 1.4px,rgb(244 244 244/.16) 1.4px,transparent 0) repeat 0 0,
      url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cpath%20d%3D%22M41.3%20100%2032.7%2099.6%2029.3%2098.8%2027%2097%207.6%2070.8%201.1%2060.5%200%2058.2%20.2%2056.9%206.1%2052.8%2011.4%2051.4%2016.5%2051.2%2022.3%2052.8%2024.8%2054.9%2037.2%2073.8%2039.3%2075.6%2040.1%2075.5%2074.3%202.9%2081.7%200%2091%200%2095.5%201.9%2097.9%203.9%2099.9%207.3%2099.9%2012.6%2099.2%2013%2091.5%2028.9%2056.3%2095.5%2054.9%2096.9%2050.7%2098.7Z%22%20fill%3D%22%2523f4f4f4%22%20fill-opacity%3D%22.05%22%2F%3E%3C%2Fsvg%3E") no-repeat 124% 92%,
      #1d2c18 !important;
    background-size:19px 19px, auto 70%, auto!important;
    padding-top:clamp(1.6rem,6vw,2.4rem)!important;
    padding-bottom:clamp(2.2rem,7vw,3rem)!important;
    /* a margem da secao encolhe so aqui: e ela, somada ao respiro do
       cartao, que espremia o botao principal */
    padding-left:.65rem!important;padding-right:.65rem!important}
  /* a coluna inteira do visual sai: foto, bloco verde e os dois depoimentos */
  [data-hero="visual"]{display:none!important}
  /* o texto passa a morar num cartao elevado sobre o fundo escuro */
  [data-hero="texto"]{position:relative;background:#f4f4f4;
    border-radius:16px;padding:1.25rem .85rem!important;
    box-shadow:0 24px 60px rgb(0 0 0/.34)}
  /* os numeros ficam fora do cartao, direto sobre o verde-noite, e
     recuperam o recuo lateral que a secao cedeu para o cartao */
  [data-hero="nums"]{padding-left:.5rem;padding-right:.5rem}
  [data-hero="nums"] b{color:#f4f4f4!important}
  [data-hero="nums"] span{color:rgb(244 244 244/.72)!important}
  /* Os dois botoes passam a ocupar a largura da coluna. Medido: de 375px
     para baixo (iPhone SE, 12 mini e boa parte dos Android) o rotulo
     "Análise gratuita no WhatsApp" quebrava em duas linhas dentro da
     pilula. Em largura cheia ele volta a caber numa linha e o alvo de
     toque cresce, que e o que interessa no dedo. */
  [data-hero="texto"]>div{display:block!important}
  [data-hero="texto"]>div a{display:flex!important;width:100%!important;
    justify-content:center;padding-inline:1rem!important}
  [data-hero="texto"]>div a+a{margin-top:.7rem}
  /* a linha acima dos numeros era verde, pensada para fundo bege; o fundo
     aqui agora e o verde-noite, entao ela precisa ser clara para aparecer */
  [data-hero="nums"]{margin-top:clamp(2rem,6vw,2.6rem)!important;
    padding-top:clamp(1.6rem,5vw,2.2rem);
    box-shadow:inset 0 1px 0 rgb(244 244 244/.16)!important}

  /* --- balao do WhatsApp ---
     Ao lado do botao, como no desktop, ele so cabe encolhendo: no tamanho
     original o cartao tem 310px e uma tela de 390px nao comporta ele mais
     o botao de 64px. Tudo cede junto (avatar, fonte, respiro) para o
     conjunto virar uma faixa horizontal em vez de um cartao alto. */
  [data-cond="balaoAberto"]{max-width:calc(100vw - 64px - 3.4rem)!important}
  [data-cond="balaoAberto"] a{padding:.55rem .7rem .55rem .55rem!important;
    gap:.5rem!important;border-radius:14px 14px 4px 14px!important}
  [data-cond="balaoAberto"] img{width:30px!important;height:30px!important}
  [data-cond="balaoAberto"] b{font-size:.75rem!important}
  [data-cond="balaoAberto"] a>span:last-child>span:not([data-balao-status]){
    font-size:.75rem!important;margin-top:.1rem!important}
  [data-balao-status]{font-size:.75rem!important;margin-top:.15rem!important}
  [data-balao-ponto]{width:9px!important;height:9px!important;
    box-shadow:0 0 0 2px #fff!important}

  /* --- colunas fixas ---
     As colunas de titulo das etapas e da FAQ sao sticky no desktop, onde
     acompanham a lista ao lado. No celular tudo empilha: elas grudavam no
     topo e a lista passava por baixo, ou o titulo descia junto com a
     rolagem. Sticky so faz sentido havendo duas colunas. */
  [data-etapas="lado"],[data-faq="lado"]{position:static!important}

  /* --- retratos do time ---
     A foto e posicionada em zoom para transbordar a moldura de proposito
     (o mesmo "vazar" da Tammy no hero). No desktop funciona: ha folga de
     sobra em volta de cada cartao. No trilho deslizante do celular o
     transbordo invadia o cartao vizinho, e o overflow:hidden posto no
     cartao para conter isso acabou cortando o efeito por completo — a
     moldura encosta na borda esquerda e no topo do cartao, entao nao
     sobrava lugar nenhum para a foto vazar e ela lia como recortada.
     Agora o transbordo aponta para onde ha espaco DENTRO do cartao: a
     moldura sai da borda (margem em cima e a esquerda) e passa a flutuar
     com folga em volta, entao a foto vaza para os dois lados por igual e
     a pessoa fica centrada na propria moldura. Crescer so para a direita,
     como na primeira correcao, empurrava cada retrato para fora do centro.
     As margens sao percentuais do cartao, como a largura da moldura, para
     que os tres valores continuem proporcionais em qualquer largura.
     Vale so para os dois retratos (nth-child -n+2): o terceiro cartao e a
     foto larga da equipe, horizontal, recortada por object-fit:cover — ali
     esse zoom nao vaza nada, so espremia a foto numa caixa estreita. */
  [data-trilho="time"] > div{overflow:hidden}
  [data-trilho="time"]>div:nth-child(-n+2)>div:first-child{
    margin-top:4.3rem;margin-left:12.5%}
  [data-trilho="time"]>div:nth-child(-n+2)>div:first-child img{
    left:-21%!important;top:-25.5%!important;width:142%!important;height:125.5%!important}
  /* a foto larga alinha o topo com o dos retratos, senao o trilho fica
     com um cartao comecando muito acima dos outros */
  [data-trilho="time"]>div:nth-child(3)>div:first-child{margin-top:4.3rem}

  /* --- trilhos deslizantes (time e depoimentos) ---
     Empilhados, o time ocupava 1.480px e os depoimentos 1.640px de
     rolagem. Deslizando na horizontal, cada um cabe numa tela. O cartao
     seguinte aparece pela metade na borda, que e o que avisa que ha mais
     conteudo ali (foi a falta desse aviso que reprovou o carrossel antes). */
  [data-trilho="time"],[data-trilho="depos"]{
    flex-wrap:nowrap!important;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    gap:.9rem!important;
    margin-left:calc(-1 * clamp(1.15rem,5vw,5rem));
    margin-right:calc(-1 * clamp(1.15rem,5vw,5rem));
    padding:.2rem clamp(1.15rem,5vw,5rem) .4rem;
    /* sem isto o encaixe alinha o cartao a borda do scroll e engole o
       respiro lateral: o cartao encostava na tela, desalinhado do titulo */
    scroll-padding-left:clamp(1.15rem,5vw,5rem)}
  [data-trilho="time"]::-webkit-scrollbar,
  [data-trilho="depos"]::-webkit-scrollbar{display:none}
  [data-trilho="time"]>*,[data-trilho="depos"]>*{
    scroll-snap-align:start;
    flex:0 0 86%!important;max-width:86%!important}
  /* O cartao seguinte era guilhotinado no meio das palavras ("Administraçã",
     "Super Indic"), o que le como defeito e nao como "tem mais ao lado".
     Aqui ele se dissolve na borda. A dissolucao sai quando o trilho chega
     ao fim, senao ela comeria a borda do ultimo cartao. */
  [data-trilho]:not(.no-fim){
    -webkit-mask-image:linear-gradient(90deg,#000 0 78%,transparent 96%);
    mask-image:linear-gradient(90deg,#000 0 78%,transparent 96%)}
  /* a foto cresce um pouco em relacao ao desktop, mas nao a ponto de
     empurrar nome e biografia para fora da tela. So os dois retratos:
     o terceiro cartao e a foto larga da equipe, que e horizontal e usa
     a largura inteira. */
  /* O teto existe porque a largura e' percentual: perto de 900px o cartao
     fica largo, a moldura acompanha e o vazamento de 25,5% da altura vira
     167px, invadindo o titulo da secao. Com o teto o transbordo para de
     crescer e a folga calculada abaixo continua valendo. */
  [data-trilho="time"]>div:nth-child(-n+2)>div:first-child{width:58%!important;max-width:14rem}

  /* --- ritmo vertical ---
     O respiro entre o titulo e o conteudo de cada secao vem de um clamp
     diferente em cada uma (2.5rem, 3rem, 2rem, 1.8rem, 1.6rem). No desktop
     essa variacao e proporcional a largura e nao se nota; no celular todos
     colapsam para o proprio minimo, e a diferenca vira gritante: umas
     secoes com 25px de respiro e outras com 48px, no mesmo scroll. Aqui
     viram dois degraus so: um depois do titulo, outro entre passos. */
  [style*="margin-top:clamp(2.5rem,5vw,4rem)"],
  [style*="margin-top:clamp(3rem,6vw,5rem)"],
  [style*="margin-top:clamp(1.6rem,3vw,2.4rem)"]{margin-top:2.25rem!important}
  [style*="margin-top:clamp(2rem,4vw,3.2rem)"],
  [style*="margin-top:clamp(1.8rem,3vw,2.4rem)"],
  [style*="margin-top:clamp(1.6rem,3vw,2.2rem)"]{margin-top:1.6rem!important}
  /* O trilho do time e a excecao do ritmo acima: como a foto vaza 65px para
     cima da moldura, o degrau de 2,25rem sobrava so 43px de folga real entre
     o titulo da secao e o alto da cabeca, e lia como foto grudada no texto.
     Devolver o vazamento inteiro (6,4rem) jogava para o outro lado, com 103px
     e um vazio grande no meio. Com o teto de 14rem na moldura o transbordo maximo e de 83px,
     entao 6,5rem (104px) deixa folga real em toda a faixa do celular. */
  [data-trilho="time"]{margin-top:6.5rem!important}

  /* pontos de posicao, preenchidos pelo site.js */
  .pontos{display:flex;gap:.4rem;justify-content:center;margin-top:1rem}
  .pontos i{width:6px;height:6px;border-radius:999px;background:currentColor;
    opacity:.28;transition:opacity .2s,width .2s}
  .pontos i.on{opacity:1;width:18px}
}
@media(min-width:901px){.pontos{display:none}}

/* Nas telas mais estreitas que ainda aparecem em campanha (320px), nem em
   largura cheia o rotulo do CTA principal cabe: o corpo cede um pouco
   para nao quebrar em duas linhas dentro da pilula. */
@media(max-width:340px){
  [data-hero="texto"]>div a{font-size:.92rem!important;gap:.45rem!important;
    padding-inline:.7rem!important}
}
/* Medido em 320px (iPhone SE em pe, a mais estreita que ainda aparece em
   campanha): mesmo apos o ajuste acima, o cartao (padding proprio) somado
   ao recuo da secao deixava menos espaco do que nas telas de 340-360px, e
   o rotulo ainda quebrava. Aperta so a folga do cartao nessa faixa. */
@media(max-width:330px){
  [data-hero="texto"]{padding-inline:.6rem!important}
}

/* ---- hover, que o Claude Design guarda em style-hover ---- */


/* Os botoes de via e das opcoes tinham style-hover com binding dinamico
   ({{ v.bgHover }}), que so o runtime do design sabia resolver. As cores
   sao as mesmas do bgHover: vinho .13 quando inativo, cheio quando ativo. */
[data-lista="vias"] button[aria-pressed="false"]:hover,
[data-lista="p2Opcoes"] button[aria-pressed="false"]:hover{background:rgb(99 45 45/.13)}

/* ---- formulario do HubSpot com a cara dos campos que o design desenhou ----
   O embed traz o CSS proprio dele, com especificidade alta, entao aqui as
   regras precisam mirar as classes .hsfc-* para vencer. */
/* O embed so chega depois e injeta ~219px de formulario, empurrando o que
   vem abaixo: sozinho isso levava o CLS a 0,056, acima do limite de 0,05.
   Reservando a altura o salto some. */
.hs-form-html{margin-top:1.2rem;min-height:12rem}
/* etiqueta: sem o !important o embed impoe 18px e "SOBRENOME" quebra em
   duas linhas, que foi o encaixe torto que o cliente apontou */
.hs-form-html .hsfc-Heading,
.hs-form-html label,
.hs-form-html .hsfc-FieldLabel{display:block!important;font-size:.75rem!important;font-weight:800!important;
  letter-spacing:.1em!important;line-height:1.3!important;text-transform:uppercase;
  color:#632d2d!important;opacity:.75;margin:0 0 .35rem!important}
.hs-form-html input[type=text],.hs-form-html input[type=email],.hs-form-html input[type=tel],
.hs-form-html select,.hs-form-html textarea,
.hs-form-html .hsfc-TextInput,.hs-form-html .hsfc-DropdownInput,.hs-form-html .hsfc-PhoneInput{
  width:100%!important;box-sizing:border-box;border:0!important;border-radius:0!important;
  background:rgb(66 98 54/.09)!important;padding:.85rem .95rem!important;font:inherit!important;
  font-size:1rem!important;color:#431517!important;min-height:48px!important;margin:0!important}
.hs-form-html select,.hs-form-html .hsfc-DropdownInput{appearance:none}
/* telefone: o seletor de pais e o campo dividem a linha sem estourar */
.hs-form-html .hsfc-PhoneInput{display:flex!important;gap:.4rem;padding:0!important;background:none!important}
.hs-form-html .hsfc-PhoneInput select{flex:0 0 5.5rem;min-width:0}
.hs-form-html .hsfc-PhoneInput input{flex:1 1 auto;min-width:0}
/* O embed usa o gabarito "dois tercos a direita": reserva ~30% da largura
   para um banner lateral que aqui esta vazio, e os campos ficam espremidos
   em meio cartao. Aqui o formulario volta a ser uma coluna so, cheia.
   Nao mexa no display do .hsfc-Step: e por ele que o embed esconde os
   passos inativos, e um display:block!important faz os tres aparecerem
   de uma vez. Basta sumir com o banner e deixar o conteudo esticar. */
.hs-form-html .hsfc-Step__Banner{display:none!important}
.hs-form-html .hsfc-Step__Content{flex:1 1 100%!important;width:100%!important;max-width:none!important;padding:0!important}
.hs-form-html .hsfc-Row{width:100%!important;max-width:none!important;gap:.6rem!important}
.hs-form-html .hsfc-Row+.hsfc-Row{margin-top:.6rem}
.hs-form-html .hsfc-Field,.hs-form-html [class*="hsfc-"][class*="Field"]{min-width:0}
/* o embed injeta uma folha de estilo propria DEPOIS desta, entao o que ele
   ja pinta (a moldura do passo e a largura do botao) so cede com !important */
.hs-form-html .hsfc-Step{border:0!important;padding:0!important}
.hs-form-html button[type=submit],.hs-form-html .hsfc-Button,
.hs-form-html .hs-button,.hs-form-html input[type=submit]{margin-top:1.1rem;width:100%!important;
  display:flex;align-items:center;justify-content:center;border:0;
  padding:1.05rem 1.5rem;border-radius:999px!important;
  font-weight:700;font-size:1.04rem;line-height:1;min-height:auto;cursor:pointer}
/* O embed traz titulo e subtitulo proprios ("Quer se tornar europeu?"), que
   duplicam o titulo do cartao desenhado. Vale o do desenho. */
.hs-form-html .hsfc-RichText{display:none}
/* o embed tambem traz uma foto propria com documento de viagem, que nao pode aparecer */
.hs-form-html img,.hs-form-html picture,.hs-form-html figure,
.hs-form-html [style*="background-image"]{display:none!important}
.hs-form-html>*{max-width:100%}