/* ══════════════════════════════════════════════════════════════
   CRYSTAL — RESPONSIVE
   Breakpoints: tablet (≤1024px) e mobile (≤640px).
   Cada elemento se adapta preservando hierarquia e intenção.
   ══════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════
   TABLET — até 1024px
   Ajustes graduais: fontes menores, grids simplificados
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

   /* ─── NAV ─── */

   /* Pill compacto: paddings menores mantêm os 4 itens numa linha
     sem disputar espaço com o logo. Badge de localização volta a
     aparecer nessa faixa — logo à esquerda + pill central deixam
     espaço de sobra à direita para ele, sem overflow. */
   .nav-pill a {
      padding: 10px 13px;
      font-size: 13px;
   }

   .nav-cta {
      padding: 10px 16px !important;
   }

   /* ─── Hero ─── */
   .s-hero {
      padding-top: 140px;
   }

   /* padding:8% força a quebra de linha do título mais cedo, em
     harmonia com os demais elementos da seção nessa largura;
     gap:1px (~zero) só formaliza o espaçamento via flex gap em vez
     de depender só das margens dos filhos, sem somar respiro extra
     a mais (o que dobraria o espaçamento já dado por eles). */
   .s-hero__content {
      padding: 0 8%;
      gap: 1px;
   }

   .s-hero__title {
      font-size: 60px;
      letter-spacing: -0.028em;
   }

   .s-hero__subtitle {
      font-size: 17px;
      width: 70%;
      /* quebra o texto de forma harmônica nessa largura */
   }

   /* Mockup de browser: proporcional (98%), não mais um teto fixo.
     Antes (800px fixo) havia um salto de ~157px bem na fronteira
     com o tier acima — o container aqui nunca passa de ~976px,
     então 98% (~956px no máximo) já funciona como teto natural,
     sem precisar de um valor em px. */
   .s-hero__mockup {
      max-width: 98%;
   }

   .browser-content {
      padding: 36px 40px 48px;
      min-height: 300px;
   }

   /* Annotation: recuada para não sair da tela */
   .hero-annotation {
      right: -16px;
      max-width: 180px;
   }

   /* ─── Títulos de seção: fluidos — ver TIPOGRAFIA FLUIDA no fim do
     arquivo. Um único clamp() cobre <=1024px inteiro; por ordem de
     código aquele bloco vence qualquer valor fixo daqui. ─── */

   /* ─── §02 — Contraste ─── */
   /* width (não max-width): o breakpoint já tem teto de 1024px, um
     max-width fixo de 680px só encolhia os cards sem necessidade.
     Percentual preenche a tela de forma harmônica sem overflow. */
   .contrast-cards {
      grid-template-columns: 1fr;
      width: 90%;
   }

   /* ─── §03 — Como Decidem ─── */
   /* Menos gap entre os cards (mais próximos entre si) e mais padding
     lateral (mais distantes da borda) — o oposto do que a regra base
     (>=1025px) usa, calibrado para essa largura especificamente. */
   .criteria {
      padding: 0 48px;
      gap: 14px;
   }

   /* BUGFIX: a base (desktop) trava a altura dos cards em valores fixos
     (248.8px/218px, um escalonamento intencional de largura ampla).
     Em qualquer viewport <=1024px o texto quebra mais linhas e esses
     valores fixos cortavam/vazavam conteúdo (confirmado no inspetor:
     height:auto resolve em qualquer largura testada, do 3-colunas ao
     empilhado). Mesma especificidade dos seletores nth-child (0-2-0)
     — necessário para vencê-los. Cascata cobre todos os tiers
     menores também (nenhum precisa repetir). */
   .criterion:nth-child(1),
   .criterion:nth-child(2),
   .criterion:nth-child(3) {
      height: auto;
   }

   /* As duas pontas (1/3) precisam ter a MESMA altura entre si mesmo
     com quebras de linha diferentes — a base usa align-items:start
     (altura própria por card, sem esticar), que é exatamente o que
     quebrava a simetria: o card com texto mais longo ficava mais alto
     que o da outra ponta. stretch iguala 1 e 3 à altura da linha
     (a maior entre os três); o card do meio recebe align-self:start
     para manter sua altura própria e continuar mais baixo, como no
     desenho original. Em 1 coluna (tier <=640px) cada card ocupa sua
     própria linha do grid — stretch não tem efeito visível ali. */
   .criteria {
      align-items: stretch;
   }

   .criterion:nth-child(2) {
      align-self: start;
   }

   /* Desarmonia de quebra de linha lado a lado: numa faixa estreita
     do tier 3-colunas (~815-890px), o card 1 quebrava em 3 linhas
     enquanto 2/3 ficavam em 2 — a coluna de texto (padding 32px de
     cada lado, igual ao desktop) é just apertada o bastante para
     cortar de forma diferente em cada card, mesmo todos com a mesma
     largura. Reduz para 20px (ainda ≥ o border-radius de 20px, então
     não fica desproporcional) — dá ~24px a mais de coluna de texto,
     suficiente para a maioria dos textos convergirem em 2 linhas
     juntos. Escopado ao tier <=1024px (lado a lado); o tier <=640px
     abaixo já tem seu próprio padding (28px, empilhado) que vence
     por vir depois no arquivo. */
   .criterion {
      padding-left: 20px;
      padding-right: 20px;
   }

   /* ─── §04 — Processo: 2x2 ─── */
   .process-cards {
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
   }

   /* Linha conectora some em 2x2 (não faz sentido visual) */
   .process-connector {
      display: none;
   }

   /* ─── §05 — Confiabilidade ─── */
   /* width (não max-width): encolhe a coluna do título mesmo com
     bastante sobra de espaço no .col-wide.section-intro nessa faixa.
     margin:auto centraliza a caixa em si — text-align sozinho só
     centraliza as linhas de texto dentro dela, não a caixa. */
   .s-confianca .section-title--xl {
      width: 80%;
      margin-left: auto;
      margin-right: auto;
   }

   /* Título do card branco (.tflow--common — "A cada repasse..."):
     margin própria, movida para cá desde o título da seção acima. */
   .tflow--common .tflow__title {
      margin: 18px 0 32px;
   }

   /* ─── §06 — O Custo ─── */
   .cost-quote__text {
      font-size: 34px;
      width: 340px;
   }

   .s-custo__final-text {
      font-size: 56px;
   }

   /* ─── §07 — CTA Inline ─── */

   /* Menos borda lateral no glass (32px de raio, entre o 24px da
     regra base e o 34px das faixas 1025-1099px — combina com a
     moldura externa sem ficar tão arredondado quanto ela). */
   .s-cta__frame {
      width: calc(100% - 72px);
   }

   .cta-glass {
      border-radius: 32px;
   }

   /* ─── §08 — FAQ ─── */
   /* Accordion: fechado por padrão (JS inicia sem .is-open), abre com
     toque — main.js (módulo 08) alterna .is-open + aria-expanded no
     botão. Movido do tier <=640px para <=1024px inteiro (pedido);
     acima de 1024px este bloco não se aplica; a base em sections.css
     mantém as perguntas sempre abertas lá. .faq-question{font-size}
     continua exclusivo do tier <=640px — não faz parte da mecânica
     do accordion, só uma escolha tipográfica daquele tier.
     cursor:pointer no .faq-item (não só no botão): o card inteiro é
     a área de toque agora (JS ouve o clique nele), então o cursor
     precisa refletir isso em qualquer ponto do card, não só sobre
     o texto da pergunta. Repetido explicitamente no .faq-question:
     <button> tem cursor:default direto na folha de estilos do
     navegador — elementos de formulário não herdam cursor do pai,
     então sem isso o botão "voltava" pro cursor padrão mesmo com o
     .faq-item ao redor já como pointer. */
   .faq-item {
      cursor: pointer;
   }

   .faq-question {
      cursor: pointer;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
   }

   /* Indicador "+": gira 45° (vira "×") quando aberto. */
   .faq-question::after {
      content: '+';
      flex-shrink: 0;
      font-size: 20px;
      line-height: 1;
      color: var(--c-accent);
      transition: transform 0.3s ease;
   }

   .faq-item.is-open .faq-question::after {
      transform: rotate(45deg);
   }

   /* gap do .faq-body vira 0 — o espaçamento entre pergunta e resposta
     passa a ser o margin-top do .faq-answer abaixo, que também é o
     valor que anima no colapso (gap do flexbox não anima por item). */
   .faq-body {
      gap: 0;
   }

   /* grid-template-rows 0fr->1fr (não max-height:0->600px): anima até
     a altura REAL do conteúdo, não um teto arbitrário. Com max-height
     a caixa "vazia" ficava void 400px+ de sobra depois de já ter
     alcançado a altura real do texto (~74-176px) — o navegador
     terminava de interpolar até 600px sem efeito visual nenhum, e
     como a opacity tinha duração diferente (0.25s vs 0.35s), o texto
     ficava 100% opaco antes da caixa "terminar", lendo como um
     solavanco em 2 tempos. Todas as propriedades agora em 0.3s,
     encerrando juntas. */
   .faq-answer {
      display: grid;
      grid-template-rows: 0fr;
      margin-top: 0;
      opacity: 0;
      transition: grid-template-rows 0.3s ease, margin-top 0.3s ease, opacity 0.3s ease;
   }

   /* min-height:0 — item de grid por padrão não encolhe abaixo do seu
     conteúdo; sem isso 0fr não conseguiria colapsar a linha a zero.
     overflow:hidden clipa o texto durante o colapso/expansão. */
   .faq-answer__inner {
      display: block;
      min-height: 0;
      overflow: hidden;
   }

   .faq-item.is-open .faq-answer {
      grid-template-rows: 1fr;
      margin-top: 15px;
      opacity: 1;
   }
}


/* ══════════════════════════════════════════════════════════════
   §03 — COMO DECIDEM — título com coluna própria — 769 a 1024px
   Largura fixa quebra as linhas de forma mais harmônica nessa faixa;
   margin auto mantém o título centralizado dentro do .col-center
   (que já centraliza o texto, mas não a caixa de um width fixo).
   Termina em 769px porque o tier <=768px logo abaixo já tem
   tratamento próprio para o título (ver TIPOGRAFIA FLUIDA).
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
   .s-decisao .section-title {
      width: 540px;
      margin-left: auto;
      margin-right: auto;
   }

   .s-confianca {
      padding: 120px 0 80px;
   }

   .trust-compare {
      margin: 0 auto 84px;
   }

   .s-confianca__close-em {
      margin-top: 30px;
   }

   .s-final {
      padding: 140px 0 160px;
      border-radius: 100px;
      margin: 16px 21px;
   }

   .s-final__lead {
      margin: 0 auto 130px;
   }
}


/* ══════════════════════════════════════════════════════════════
   TABLET ESTREITO — até 900px
   Elementos largos ganham tratamento antes do redesenho mobile
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

   /* ─── Hero: annotation recolhe para dentro da moldura ─── */
   .hero-annotation {
      right: 12px;
   }

   /* padding/gap/width do hero NÃO fecham aqui — a faixa 900-768px
     também herda o tratamento do tier 1024-901px (ver fechamento
     real no tier <=768px, onde o nav muda para modo mobile). */

   /* Vale para 900-769px (lado a lado) — 1024-769px inteiro agora
     usa 48px (era 32/62px em degraus diferentes). O tier <=768px
     abaixo restaura o 62px que este intervalo já tinha para a faixa
     768-641px (empilhado), que não fazia parte deste pedido. */
   .criteria {
      padding: 0 48px;
      gap: 12px;
   }

   /* ─── §06 — Itens de custo: coluna única legível.
     Três colunas abaixo de 900px espremem o texto corrido;
     uma coluna centrada preserva a largura de leitura. ─── */
   .cost-items__grid {
      grid-template-columns: 1fr;
      width: 85%;
      max-width: 538px;
      margin: 0 auto;
      gap: 12px;
   }

   .cost-quote {
      max-width: 682px;
   }

   .s-custo__question-text {
      font-size: 15px;
   }

   .s-custo__final-text {
      font-size: 47px;
      line-height: 55px;
   }

   /* max-width:none — o teto de 252px era calibrado para a célula
     estreita da grade de 3 colunas; empilhado, o card deve acompanhar
     a largura do .cost-items__grid (630px) acima. */
   .cost-item {
      max-width: none;
      padding: 40px 32px 42px;
   }

   .cost-item__body {
      max-width: 424px;
   }

   .cost-item__title {
      font-size: 15px;
      letter-spacing: 0.2px;
      margin-bottom: 9px;
   }

   /* Bolinhas (.cost-item__dot) somem — informação redundante ao lado
     do título quando o card ganha mais respiro interno. */
   .cost-item__dot {
      display: none;
   }
}


/* Badge de localização: medido em devtools — pill e badge colidem
   a partir de ~781px (gap negativo), não em 768px como pareceria à
   primeira vista. 820px dá ~19px de folga segura antes do corte. */
@media (max-width: 820px) {
   .nav-location {
      display: none;
   }
}

/* NAV — CTA sai do pill — 820 a 769px
   Nessa faixa estreita o pill (Processo/Confiabilidade/FAQ) continua
   centralizado como sempre, mas o CTA "Quero meu site" sai de dentro
   dele e assume a mesma posição/estilo que já usa em <=768px (botão
   solto, canto direito) — .nav-mobile-cta já resolve isso sozinho,
   já que .nav é flex + justify-content:space-between. */
@media (min-width: 769px) and (max-width: 820px) {
   .nav-cta {
      display: none;
   }

   .nav-mobile-cta {
      display: inline-flex;
   }

   /* Padding base do pill (5px 6px 5px 20px) é assimétrico de propósito:
     o lado direito é menor porque o CTA (removido daqui) já trazia seu
     próprio respiro visual via margin-left. Sem o CTA dentro do pill,
     "FAQ" fica com menos ar que "Processo" do outro lado — mas um
     valor puramente simétrico (mesmo px dos dois lados) ainda parece
     errado, porque "FAQ" é visualmente mais curta que "Processo": o
     olho pede um pouco mais de respiro à direita para compensar essa
     ilusão de ótica. 26px esquerda / 30px direita. */
   .nav-pill {
      padding: 5px 30px 5px 24px;
   }
}


/* ══════════════════════════════════════════════════════════════
   NAV — vidro escuro no pill — tablet e desktop (>=769px)
   No mobile (<=768px) o nav inteiro vira o painel de vidro, então o
   .nav-pill fica com background:none (ver tier <=768px) para não
   duplicar o vidro. Aqui, do outro lado, é o .nav-pill que carrega o
   próprio vidro sozinho — então quando os textos trocam de cor
   (.is-dark/.is-card-dark/.is-ticker) o fundo dele precisa trocar
   junto, senão os textos claros ficam sem contraste sobre o mesmo
   vidro claro de sempre. Mesma receita escura do mobile (tokens -dk
   do .cta-glass, §07).

   O badge (.nav-location) recebe o mesmo vidro escuro do pill — fundo,
   borda e texto trocam juntos, para os três ficarem no mesmo tom.
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {

   .nav.is-dark .nav-pill,
   .nav.is-card-dark .nav-pill,
   .nav.is-ticker .nav-pill,
   .nav.is-dark .nav-location,
   .nav.is-card-dark .nav-location,
   .nav.is-ticker .nav-location {
      background: rgba(26, 22, 20, 0.55);
      border-color: var(--c-border-dk);
      box-shadow: var(--shadow-dk-md);
   }

   .nav.is-dark .nav-location,
   .nav.is-card-dark .nav-location,
   .nav.is-ticker .nav-location {
      color: #F5F5F5;
   }
}


/* ══════════════════════════════════════════════════════════════
   TABLET PORTRAIT — até 768px
   Nav muda para o modo mobile: pill centrado não cabe mais
   junto do logo sem colisão
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

   /* Fecha os ajustes do tier 1024-769px (herdados também em 900-769px)
     — sem isso, padding, gap e width vazariam para o mobile, que já
     tem tratamento próprio de hero mais abaixo (<=640px) calibrado
     sem essas propriedades. */
   .s-hero__content {
      padding: 0;
      gap: 0;
   }

   .s-hero__subtitle {
      width: auto;
   }

   /* ─── §01 — Antes da conversa ─── */
   .s-antes {
      padding: 160px 32px 140px;
   }

   .quote-cards {
      padding: 20px;
   }

   /* §02/§03: breakpoint que engloba 641px (641-768px) e todos os
     menores, já que nada os sobrescreve de volta mais abaixo. */
   .s-decisao {
      padding: 120px 24px 120px;
   }

   .s-diferenca {
      padding: 120px 8px 110px;
   }

   .col-wide {
      width: 530px;
      padding-left: 32px;
      padding-right: 32px;
   }

   /* .col-wide.trust-compare (§05): sem width fixo aqui — o
     dimensionamento do bloco de comparação fica a cargo do
     .tflow{width:96%} (tier <=1080px), que já cuida dos cards
     internos. As demais seções que usam .col-wide (§02, §04) mantêm
     o width:530px acima. */
   .col-wide.trust-compare {
      width: auto;
   }

   /* .col-wide de §06: sem width fixo — os elementos internos
     (.cost-items__grid, .cost-item__body) já têm largura/teto
     próprios (ver ajustes acima), não precisam mais do width:530px
     herdado para não estourar. */
   .s-custo .col-wide {
      width: auto;
   }

   /* .cost-item__body: teto próprio e mais estreito nessa faixa —
     taper em relação aos 424px do tier <=900px acima. */
   .cost-item__body {
      max-width: 314px;
   }

   /* BUGFIX: margin lateral fixa (24px) descentralizava a caixa de
     530px — margem fixa não centraliza, só desloca; o "recuo extra"
     nunca existiu de fato (não se estreita um width fixo via margin,
     só se empurra a caixa toda). margin:auto centraliza de verdade;
     56px embaixo continua antes do conteúdo seguinte (cards,
     comparação de fluxos). Afeta §02/§04/§05, as 3 seções que usam
     essa combinação de classes. */
   .col-wide.section-intro {
      margin: 0 auto 56px;
   }

   .s-diferenca__close-title {
      font-size: 44px;
   }

   .s-decisao .section-title {
      margin-bottom: 42px;
   }

   /* Coluna única — a base ainda usa repeat(3,1fr) até aqui; sem
     isso os 3 cards continuavam lado a lado entre 641-768px.
     padding:62px preserva o valor que esta faixa (768-641px,
     empilhado) já tinha antes do tier <=900px acima mudar para
     48px (que passou a valer só até 769px, lado a lado). */
   .criteria {
      grid-template-columns: repeat(1, 1fr);
      padding: 0 62px;
   }

   /* height:auto já vem do tier <=1024px acima e cobre esta faixa
     também (cascata) — nada a repetir aqui. */

   /* ─── §04 — Processo ─── */
   .s-processo {
      padding: 140px 24px 170px;
   }

   /* ─── §05 — Confiabilidade ─── */
   /* Valor único para todos os breakpoints <=768px (não repetido nos
     tiers menores — ver remoção do duplicado no tier <=640px). */
   .s-confianca {
      padding: 80px 0 68px;
   }

   .trust-compare {
      margin: 0 auto 70px;
   }

   .s-confianca__close-em {
      margin-top: 34px;
   }

   /* width fixo: risco de overflow em telas menores — reset em
     <=640px (ver final do arquivo). */
   .section-lead {
      width: 460px;
   }

   /* .section-lead dentro de .col-wide (§05/§06): o width:460px acima
     já quase preenche os 466px de conteúdo do .col-wide (32px de
     padding de cada lado), sobrando so ~3px por margin:auto. Trocar
     para margin fixo de 36px como pedido — mas width:auto + max-width
     no lugar do width:460px fixo, senão 460+72=532px estouraria os
     466px disponíveis. Fora do .col-wide (§01/§03, em .col-center) o
     .section-lead acima já tem folga de sobra e segue centralizado
     por margin:auto — não precisa deste ajuste.
     BUGFIX: margin fixo (36px) só centraliza por coincidência quando
     o container é o .col-wide FIXO de 530px deste tier — em qualquer
     container mais largo (ex: quando o .col-wide fica fluido em
     tiers menores) a caixa gruda a 36px da esquerda e o resto do
     espaço sobra só à direita. width:min() + margin:auto resolve
     nos dois cenários: capa em 460px quando sobra espaço (e centra
     de verdade), ou reserva exatamente 72px de gutter (36 cada lado)
     quando o container é mais estreito que 460+72px. */
   .col-wide .section-lead {
      width: min(460px, calc(100% - 32px));
      margin-left: auto;
      margin-right: auto;
   }

   .s-confianca__close {
      width: 480px;
   }

   /* ─── §06 — O Custo ─── */
   .s-custo {
      padding: 140px 0 80px;
   }

   .s-custo .section-intro {
      margin-bottom: 72px;
   }

   /* Tamanho/altura do título de §06: fluido — a curva da exceção
     (ver TIPOGRAFIA FLUIDA) passa por ~52px exatamente em 768px,
     preservando a calibragem que este tier tinha em px fixo. */
   .s-custo .section-title--xl {
      margin-bottom: 48px;
   }

   .s-custo .section-lead--light {
      font-size: 16px;
      line-height: 1.6;
      letter-spacing: -0.005em;
   }

   .s-custo__silence {
      font-size: 18px;
      line-height: 1.6;
      margin-top: 24px;
   }

   .cost-quote {
      margin: 0 auto 90px;
   }

   .cost-quote__text {
      font-size: 32px;
      line-height: 42px;
      letter-spacing: -0.0em;
      width: 340px;
      /* já era o valor global — mantido explícito aqui */
   }

   .cost-items {
      margin: 0 auto 102px;
      padding: 0 24px;
   }

   /* padding: mesmo valor do tier <=900px acima (900px pra baixo é
     uma faixa só, pedido) — sem repetir aqui, o tier <=768px (mesma
     especificidade, vem depois no arquivo) sobrescreveria de volta. */
   .cost-item {
      width: 100%;
      margin: 0 auto;
   }

   .s-custo__question-text {
      font-size: 14px;
      line-height: 1.75;
      margin: 0 auto 19px;
   }

   .s-custo__final-text {
      font-size: 44px;
      line-height: 44px;
      letter-spacing: -0.029em;
   }

   /* ─── §07 — CTA Inline ─── */
   .s-cta {
      padding: 40px 0 90px;
   }

   .s-cta__frame {
      width: calc(100% - 58px);
      padding: 110px 24px 115px;
   }

   .s-cta__subtitle {
      font-size: 18px;
      line-height: 1.65;
      margin: 0 auto 70px;
   }

   .cta-glass {
      border-radius: 52px;
   }

   .cta-glass__text {
      width: 94%;
      max-width: 350px;
   }

   /* ─── §08 — FAQ ─── */
   .s-faq {
      padding: 130px 0 160px;
   }

   /* width fixo: risco de overflow — reset em <=640px. */
   .s-faq .section-body {
      width: 430px;
   }

   .faq-list {
      padding: 0 44px;
   }

   /* ─── §09 — CTA Final ─── */
   .s-final {
      padding: 120px 0 130px;
      margin: 16px 0 0;
      border-radius: 100px 100px 0 0;
   }

   /* width fixo: risco de overflow — reset em <=640px. */
   .s-final__lead {
      font-size: 14px;
      line-height: 26px;
      margin: 0 auto 94px;
      width: 486px;
   }

   .s-final__title {
      margin: 0 auto 50px;
   }

   .s-final__subtitle {
      font-size: 16px;
      margin: 0 auto 52px;
   }

   .s-final__subtitle .serif-i {
      font-size: 19.4px;
      line-height: 31px;
   }

   .s-final__subtitle {
      width: 84%;
   }

   .s-final__badges {
      gap: 10px;
   }

   /* ─── Global ─── */
   .btn--lg {
      font-size: 16px;
   }

   .badge {
      gap: 9px;
      font-size: 12px;
   }

   /* Pill de links: oculto (a página é scroll único) */
   .nav-pill {
      display: none;
   }

   /* Botão mobile aparece no lugar */
   .nav-mobile-cta {
      display: inline-flex;
   }

   /* Transição suave só para o que ainda muda dinamicamente (o vidro
      entrando/saindo com .is-scrolled, e as trocas de cor de
      .is-dark/.is-card-dark/.is-ticker). */
   .nav {
      transition: background 0.3s ease, box-shadow 0.3s ease,
         border-color 0.3s ease;
   }

   /* ─── Forma/posição fixas (sempre, com ou sem scroll) ───
      Isso é só geometria — sem cor, sem vidro. Existe pra logo, menu
      e CTA já nascerem na posição final (recuada, 95%, cantos
      arredondados) e não pularem de lugar quando o scroll começa.
      Padding enxuto: só o respiro que logo (28.5px) e CTA (40.25px)
      realmente precisam.

      border: 1px solid transparent (não "sem borda") de propósito —
      border-style/width não transicionam (são valores discretos, só
      "pulam"); sem essa borda transparente já pronta, o .is-scrolled
      abaixo criava a borda do zero e a transição de border-color
      partia de currentColor (o texto escuro do nav), piscando preto
      antes de assentar na cor clara certa. Com a borda transparente
      sempre presente, só a COR anima — de transparente até
      var(--c-border), sem esse flash. */
   .nav {
      top: 6px;
      width: 95%;
      border-radius: 40px;
      padding: 10px 10px 9px 20px;
      border: 1px solid transparent;
   }

   /* ─── Vidro: só ativa com o scroll ───
      Mesma receita exata do .nav-pill (components.css) — cor, blur,
      borda e sombra idênticos — em vez de inventar um vidro próprio
      para o nav. Fica de fora da regra de geometria acima de propósito:
      a forma já existe em repouso (invisível, sem fundo), o vidro
      "materializa" só quando .is-scrolled é adicionado pelo JS. */
   .nav.is-scrolled {
      background: rgba(255, 253, 248, 0.72);
      backdrop-filter: blur(24px) saturate(1.4);
      -webkit-backdrop-filter: blur(24px) saturate(1.4);
      border: 1px solid var(--c-border);
      box-shadow: var(--shadow-sm);
   }

   /* Variante escura sobre seções/cards/ticker escuros — mesma família
      de tokens -dk do .cta-glass (§07), para o vidro continuar
      legível ali sem virar uma tarja clara cortando a imersão. O
      .is-ticker entrou aqui junto (deixou de usar mix-blend-mode —
      ver components.css): agora é só mais um fundo escuro sólido
      conhecido, não precisa mais desligar o vidro para não atrapalhar
      um cálculo de blend que não existe mais. */
   .nav.is-scrolled.is-dark,
   .nav.is-scrolled.is-card-dark,
   .nav.is-scrolled.is-ticker {
      background: rgba(26, 22, 20, 0.55);
      border: 1px solid var(--c-border-dk);
      box-shadow: var(--shadow-dk-md);
   }
}


/* ══════════════════════════════════════════════════════════════
   NAV — pill volta a aparecer — 768 a 570px
   Medido via Playwright: com font-size:12px e sem o CTA (que já
   existe à parte, no .nav-mobile-cta), o pill colide com o botão a
   partir de ~564px (gap vira negativo). 570px mantém ~3px de folga
   segura — abaixo disso o pill volta a sumir (ver tier <=640px, que
   já teria .nav-pill { display:none } como fallback herdado daqui
   caso essa faixa não feche sozinha).
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 570px) and (max-width: 768px) {
   .nav-pill {
      display: flex;
      gap: 4px;
      padding: 5px 37px 5px 24px;
      background: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border: none;
      border-radius: 0;
      box-shadow: none;
   }

   .nav-pill a {
      font-size: 12px;
      padding: 10px 10px;
   }

   /* O CTA continua fora do pill, no .nav-mobile-cta (já visível
      nessa faixa via regra do tier <=768px) — sem isso ele apareceria
      duplicado (uma vez dentro do pill, outra solto à direita). */
   .nav-cta {
      display: none;
   }
}


/* ══════════════════════════════════════════════════════════════
   MOBILE — até 640px
   Redesenho profundo para experiência vertical e touch-first
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

   /* ─── HERO ─── */
   .s-hero {
      padding: 150px 0 0;
   }

   /* ─── Palco do texto: título ancorado a 40.5svh (teste — era 44svh) ───
     O título deve cair no meio ÓPTICO da tela na primeira abertura
     em qualquer aparelho. Altura não acompanha largura, então nenhum
     padding fixo por faixa de largura resolve sozinho.
     Mecânica: grid 1fr/auto/1fr com min-height calc(81svh - 2*padTop)
     → o centro da linha do meio (título) fica em
     padTop + (81svh - 2*padTop)/2 = 40.5svh, para qualquer padTop.
     Eyebrow cola na base da linha de cima, subtítulo no topo da de
     baixo — gravitam ao redor do título. minmax(max-content,...)
     faz telas baixas degradarem para fluxo natural (título sobe até
     o piso do padding, nada sobrepõe). Os CTAs fluem depois do palco.

     IMPORTANTE — comportamento esperado, não bug: mudar o padding-top
     do hero NÃO move o título (a âncora o mantém em 40.5svh; o palco
     redistribui o espaço). O padding é só o piso/respiro do topo.
     Para mover o título, mude a âncora (o 81 no calc: 2x o percentual
     desejado). O "- 300px" espelha 2x o padding-top do tier (150px) —
     cada tier de hero abaixo redeclara o min-height com o dobro do
     seu próprio padding-top. */
   .s-hero__stage {
      display: grid;
      grid-template-rows: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
      justify-items: center;
      width: 100%;
      min-height: calc(81vh - 300px);
      /* fallback */
      min-height: calc(81svh - 300px);
      /* svh: ignora a barra de URL móvel */
   }

   .s-hero__stage .hero-eyebrow {
      align-self: end;
   }

   .s-hero__stage .s-hero__subtitle {
      align-self: start;
   }

   .s-hero__title {
      font-size: 52px;
      line-height: 1.08;
      letter-spacing: -0.024em;
      padding: 0 42px;
   }

   .s-hero__title .serif-i {
      font-size: 1.05em;
   }

   .s-hero__subtitle {
      font-size: 16px;
      margin-top: 38px;
      padding: 0 42px;
   }

   /* Hero eyebrow: fonte menor (11px acompanha a escala do título) e
     respiro mais curto até o título — nem encostado, nem longe. */
   .hero-eyebrow {
      margin-bottom: 12px;
   }

   .hero-eyebrow span {
      font-size: 11px;
   }

   /* CTAs: empilhados verticalmente. align-items:center (não stretch):
     os botões têm width própria abaixo — com stretch eles grudariam
     na borda esquerda. */
   .s-hero__cta-row {
      flex-direction: column;
      align-items: center;
      gap: 12px;
      margin-top: 100px;
      padding: 0 30px;
      width: 100%;
   }

   /* Regra global (outras seções dependem do width:100% aqui). Os
     botões do hero têm largura própria, escopada logo abaixo. */
   .btn,
   .btn-outline {
      justify-content: center;
      width: 100%;
   }

   /* Larguras proporcionais entre si (60/70%) harmonizam os dois
     botões; min-width:max-content impede que fiquem menores que o
     próprio texto nos breakpoints mais estreitos. Escopo .s-hero__cta-row
     (0-2-0) vence a regra global acima sem afetar §07/§09. */
   .s-hero__cta-row .btn-outline {
      width: 60%;
      min-width: max-content;
      border: 1px solid rgb(255 237 229 / 13%);
   }

   .s-hero__cta-row .btn {
      width: 70%;
      min-width: max-content;
   }

   /* Empilhados, a seta para baixo do "Ver como funciona" vira ruído
     — o caminho já é vertical e óbvio. */
   .s-hero__cta-row .btn-outline .btn-icon {
      display: none;
   }

   /* Trust strip: volta a ser fileira com wrap — width:71% força a
     quebra em 2 itens na primeira linha + 1 embaixo (centrado pelo
     flex do .s-hero__content). Abaixo de ~547px os itens passam a
     empilhar 1/1/1 naturalmente, sem regra extra. */
   .s-hero__trust {
      margin-top: 40px;
      padding: 0 20px;
   }

   .trust-strip {
      flex-direction: row;
      align-items: center;
      row-gap: 13px;
      column-gap: 26px;
      font-size: 11px;
      width: 71%;
      margin-bottom: 80px;
   }

   .trust-dot {
      display: none;
   }

   /* Annotation e mockup: ocultos no mobile */
   .s-hero__mockup {
      display: none;
   }

   .hero-annotation {
      display: none;
   }

   /* Diamantes do hero: menores */
   .s-hero__diamond-1 {
      width: 280px;
      height: 280px;
      top: 160px;
   }

   .s-hero__diamond-2 {
      width: 180px;
      height: 180px;
      top: 220px;
   }


   /* ─── SEÇÕES — espaçamento vertical reduzido ─── */
   /* .s-decisao e .s-diferenca: valores próprios já vêm do tier
     <=768px acima (cascata) — não repetir aqui. .s-confianca também
     já vem do tier <=768px acima (valor único pedido para toda a
     faixa <=768px) — não repetir aqui. */

   /* §08: 30px laterais na seção — a lista (.faq-list) já tem padding
     próprio, então os dois somam (30+20=50px de moldura total aqui). */
   .s-faq {
      padding: 80px 30px;
   }

   /* §01: 24px laterais tiram o conteúdo das bordas — os filhos
     (quote-cards, close) têm paddings próprios; ver compensação
     no tier <=383px para não espremer. */
   .s-antes {
      padding: 80px 24px;
   }

   .s-processo {
      padding: 80px 0 100px;
   }

   .s-custo {
      padding: 100px 0 60px;
   }

   .s-cta {
      padding: 80px 0 100px;
   }



   /* ─── TÍTULOS: fluidos — ver TIPOGRAFIA FLUIDA no fim do arquivo.
     A curva recalibrada passa pelos 44px aprovados exatamente em
     640px (âncora da harmonização global). ─── */

   /* width:auto — reseta o width:460px fixo do tier <=768px, que
     causaria overflow em telas menores que ~500px. Fonte: fluida. */
   .section-lead {
      width: auto;
   }

   /* .section-lead dentro de .col-wide (§05/§06): o .col-wide perde o
     width fixo nesse tier (vira largura de tela), então a margin de
     36px do tier <=768px não estoura mais — mas em telas ~400-560px
     ela já deixa a coluna de texto abaixo de ~320px de largura útil
     (limiar de "linha fragmentada"). Reduz para 24px aqui como o
     mesmo ajuste, com valor proporcional à faixa menor.
     BUGFIX (mesmo do tier <=768px acima): margin fixo descentraliza
     assim que o .col-wide (agora fluido, largura de tela) fica mais
     largo que 460+48px — visto em ~625-640px, onde a caixa colava
     à esquerda com toda a sobra do lado direito. width:min() +
     margin:auto centraliza sempre, com o mesmo gutter garantido. */
   .col-wide .section-lead {
      width: min(420px, calc(100% - 48px));
      margin-left: auto;
      margin-right: auto;
   }


   /* ─── §01 — Antes da Conversa ─── */

   /* Lead e body: escopados em .s-antes — .section-lead/.section-body
     servem também §03/§05/§06. Os percentuais calibram a quebra de
     linha; centralização vem do margin:auto que os dois já têm. */
   .s-antes .section-lead {
      font-size: 16px;
      width: 90%;
   }

   .s-antes .section-body {
      font-size: 14px;
      width: 70%;
   }

   /* Quote cards: seguem lado a lado (as 2 colunas vêm da base), sem
     rotação. grid-template-rows:1fr iguala a altura da fileira; os
     60px laterais estreitam o par em harmonia com a coluna central.
     O empilhamento só entra no tier <=560px abaixo, onde cada card
     ficaria com ~150px lado a lado. */
   .quote-cards {
      grid-template-rows: 1fr;
      gap: 16px;
      padding: 0 60px;
      margin-bottom: 40px;
   }

   .quote-card--left,
   .quote-card--right {
      transform: none;
   }

   .quote-card {
      padding: 24px;
   }

   .quote-card__text {
      font-size: 17px;
      width: 75%;
   }

   .s-antes__close {
      margin: 0 10px;
      padding: 44px 28px 42px;
   }

   /* 0-2-0 de propósito: a regra base de mesma especificidade fixa
     30px — a antiga versão de 1 classe aqui (24px) perdia sempre e
     nunca teve efeito. */
   .s-antes__close .s-antes__close-title {
      font-size: 28px;
      line-height: 1.18;
      margin-bottom: 22px;
   }

   .s-antes__close p {
      font-size: 14px;
      line-height: 1.65;
      max-width: 450px;
   }


   /* ─── §02 — A Diferença ─── */
   .s-diferenca {
      padding: 120px 8px 80px;
   }

   /* Intro de §02: coluna fixa de 480px. .section-intro no seletor
     (não só .s-diferenca .col-wide) porque §02 tem DOIS .col-wide —
     esta intro e o .s-diferenca__close mais abaixo; sem essa classe
     a regra vazava para o close também (viu no devtools: margin-bottom
     ficou 8px nos dois quando só o close deveria mudar). margin
     lateral auto (não os 24px do tier <=768px, que deixariam a caixa
     colada à esquerda); max-width:100% impede overflow abaixo de
     ~496px de viewport sem precisar de outro degrau. */
   .s-diferenca .col-wide.section-intro {
      width: 480px;
      max-width: 100%;
      margin: 0 auto 68px;
      padding-left: 20px;
      padding-right: 20px;
   }

   /* Close de §02 ("Isso é o que a Crystal constrói."): mesma coluna
     fixa de 480px e padding lateral da intro acima, mas com seu
     próprio margin — regra separada para não voltar a acoplar as
     duas (era o bug: um seletor só, dois elementos, um valor). */
   .col-wide.s-diferenca__close {
      width: 480px;
      max-width: 100%;
      margin-bottom: 8px;
      padding-left: 20px;
      padding-right: 20px;
   }

   .contrast-cards {
      grid-template-columns: 1fr;
      padding: 0 20px;
      margin-bottom: 56px;
   }

   .contrast-card {
      padding: 32px 28px;
      text-align: center;
   }

   .contrast-card__title {
      font-size: 26px;
   }

   .s-diferenca__close-title {
      font-size: 36px;
   }

   .s-diferenca__close {
      padding: 20px 20px 0;
   }


   /* ─── §03 — Como Decidem ─── */
   .criteria {
      grid-template-columns: 1fr;
      gap: 16px;
      padding: 0 20px;
   }

   .criterion {
      padding: 32px 28px 36px;
   }

   /* height:238.8px já vem do tier <=768px acima (cascata). */

   .s-decisao__close {
      padding: 0 20px;
   }


   /* ─── §04 — Processo ─── */
   .process-cards {
      grid-template-columns: 1fr;
      gap: 14px;
   }

   .s-processo .process-wrapper {
      padding: 0 32px;
   }

   /* Título de §04: padding lateral próprio, independente da moldura
     do .process-wrapper acima (elementos diferentes). */
   .s-processo .section-title {
      padding-left: 24px;
      padding-right: 24px;
   }

   .process-card {
      min-height: auto;
      gap: 14px;
   }


   /* ─── §05 — Confiabilidade ─── */
   .flow-comparisons {
      padding: 0 20px;
   }

   /* Nós do diagrama: menores */
   .flow__node--crystal-you,
   .flow__node--crystal {
      min-width: 48px;
      padding: 0 12px;
   }

   /* width:auto — reseta o width:480px fixo do tier <=768px. */
   .s-confianca__close {
      padding: 0 20px;
      width: auto;
   }

   /* Título do card escuro (.tflow--crystal): largura própria nessa
     faixa toda — 2 classes vence o .tflow__title genérico (1 classe)
     dos tiers 640-483/≤482px acima. */
   .tflow--crystal .tflow__title {
      width: calc(100% - 64px);
   }


   /* ─── §06 — O Custo ─── */
   .s-custo {
      padding: 100px 0 20px;
   }

   .cost-quote {
      margin: 0 20px 48px;
      padding: 40px 32px;
      border-radius: var(--r-lg);
   }

   /* width:auto + max-width preserva o "break" intencional da citação
     nas telas maiores (481-640px) mas deixa o card constranger o
     texto nas menores — o width:340px fixo global vazava abaixo de
     ~404px (card interno < 340px). */
   .cost-quote__text {
      font-size: 26px;
      letter-spacing: -0.016em;
      line-height: 34px;
      width: 80%;
      max-width: 252px;
   }

   .cost-quote__mark {
      font-size: 100px;
      top: 20px;
      left: 5%;
   }

   /* Itens de custo: empilhados */
   .cost-items {
      padding: 0 20px;
   }

   .cost-items__grid {
      grid-template-columns: 1fr;
      gap: 12px;
   }

   .s-custo__question {
      padding: 0 20px;
   }

   /* margin-bottom (não o margin:0 do tier <=768px acima, que zera
     só o padrão do parágrafo) — respiro antes do próximo elemento.
     margin-left/right:auto — .s-custo__close é flex-column sem
     align-items:center; sem os auto, um width/max-width menor que
     100% gruda na esquerda em vez de centralizar. */
   .s-custo__question-text {
      font-size: 14px;
      margin: 0 auto 20px;
      width: 60%;
      max-width: 230px;
   }

   .s-custo__final {
      margin-top: 72px;
      padding-top: 48px;
      padding-left: 20px;
      padding-right: 20px;
   }

   .s-custo__final-text {
      font-size: 34px;
      line-height: 42px;
      letter-spacing: -0.022em;
      width: 90%;
      margin-left: auto;
      margin-right: auto;
   }

   .s-custo__silence {
      font-size: 17px;
   }


   /* ─── §07 — CTA Inline ─── */
   .s-cta {
      padding: 80px 0 100px;
   }

   /* IMPORTANTE (bug de cascata): o override de .s-cta__frame do tier
     <=768px vive em responsive.css e, por ordem de carga (este arquivo
     depois de sections.css), vencia o tratamento <=640px que estava
     em sections.css — a moldura mantinha margem 58px + padding lateral
     24px do tablet, espremendo o glass a ~180px em telas de 320px.
     Repetido aqui para vencer o <=768px do mesmo arquivo. */
   .s-cta__frame {
      width: calc(100% - 28px);
      border-radius: 57px 57px 27px 27px;
      padding: 80px 0 41px;
   }

   .s-cta__subtitle {
      font-size: 16px;
      width: 90%;
      line-height: 1.65;
   }

   /* Sem margem própria: o .col-center já aplica 20px laterais
     e a moldura (.s-cta__frame) ficou mais estreita no mobile. */
   .cta-glass {
      margin: 0;
      padding: 40px 24px 36px;
      border-radius: var(--r-lg);
   }

   .cta-glass__text {
      font-size: 17px;
   }

   .cta-glass__text .serif-i {
      font-size: 21px;
      line-height: 26px;
   }

   /* Pergunta é um label pequeno (hierarquia do desktop preservada);
     só um respiro a mais de legibilidade em telas touch. */
   .cta-glass__question {
      font-size: 13px;
      line-height: 1.3;
   }

   /* Botão de CTA: largura total */
   .cta-glass .btn--light {
      width: auto;
      justify-content: center;
   }


   /* ─── §08 — FAQ ─── */
   /* .section-body width:auto reseta o 430px fixo do tier <=768px
     (risco de overflow). Título de §08: fluido (exceção menor) —
     ver TIPOGRAFIA FLUIDA no fim do arquivo. */
   .s-faq .section-body {
      width: auto;
   }

   /* Sem padding próprio — só a moldura da seção (.s-faq, 30px)
     enquadra a lista agora, ganhando espaço extra para os cards. */
   .faq-list {
      padding: 0;
   }

   /* Numeração ("01", "02"...) sai de cena — coluna única no lugar
     das duas (32px do número + 1fr do corpo), texto usa a largura
     toda do card. */
   .faq-num {
      display: none;
   }

   .faq-item {
      padding: 28px 32px;
      grid-template-columns: 1fr;
      gap: 14px;
   }

   /* Mecânica do accordion (cursor, indicador, colapso) mora agora no
     tier <=1024px inteiro — ver bloco lá em cima. Só a tipografia
     própria deste tier (mobile) fica aqui. */
   .faq-question {
      font-size: 16px;
   }

   .faq-answer {
      font-size: 14px;
      line-height: 1.8;
   }


   /* ─── §09 — CTA Final ─── */
   /* width:auto — reseta o width:486px fixo do tier <=768px. */
   .s-final__lead {
      font-size: 14px;
      padding: 0 20px;
      width: auto;
   }

   .s-final__title {
      padding: 0 20px;
      margin: 0 auto 39px;
   }

   /* sem padding lateral (removido a pedido) */
   .s-final__subtitle {
      font-size: 14px;
      line-height: 26px;
   }

   .s-final__subtitle .serif-i {
      font-size: 18px;
      line-height: 29px;
   }

   /* Fileira (não coluna): badges lado a lado, como no desktop. */
   .s-final__badges {
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 10px;
   }

   /* Diamantes: menores no mobile */
   .s-final__diamond-1 {
      width: 320px;
      height: 320px;
   }

   .s-final__diamond-2 {
      width: 200px;
      height: 200px;
   }

   .s-final__diamond-3 {
      display: none;
   }

   /* CTA: proporcional (não largura total) */
   .s-final .btn--lg {
      width: calc(80% - 40px);
      justify-content: center;
      padding-left: 24px;
      padding-right: 24px;
   }


   /* ─── FOOTER ─── */
   .footer {
      padding: 56px 0 40px;
   }

   .footer-inner {
      padding: 0 20px;
   }

   .footer-top {
      gap: 24px;
      padding-bottom: 36px;
      margin-bottom: 24px;
   }

   .footer-links {
      gap: 16px;
   }

   .footer-bottom {
      flex-direction: column;
      align-items: center;
      gap: 10px;
      text-align: center;
   }


   /* ─── TICKER ─── */
   .ticker-set {
      gap: 32px;
   }


   /* ─── WRAPPERS ─── */
   .col-center,
   .col-content,
   .col-wide {
      padding-left: 20px;
      padding-right: 20px;
   }

   /* width:auto — reseta o width:530px fixo do tier <=768px (§02/§04/
     §06), que causaria overflow em qualquer tela menor que ~570px.
     .col-wide.trust-compare (§05) já não tem width fixo desde o
     tier <=768px, então este reset não muda nada pra ela. */
   .col-wide {
      width: auto;
   }

   .section-intro {
      margin-bottom: var(--s-12);
   }
}


/* ══════════════════════════════════════════════════════════════
   §01 — QUOTE CARDS, RESPIRO INTERMEDIÁRIO — 615 a 561px
   Última faixa do lado a lado: a moldura de 60px começa a apertar
   os cards — 40px devolve a folga sem quebrar o par. (O tier <=560px
   abaixo vence por ordem de código quando o empilhamento entra.)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 615px) {
   .quote-cards {
      padding: 0 40px;
   }
}


/* ══════════════════════════════════════════════════════════════
   §01 — CLOSE — sem margem lateral — até 580px
   Abaixo de 580px os 10px do tier <=640px já não fazem diferença
   perceptível como moldura — zera para o card usar a largura toda.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 580px) {
   .s-antes__close {
      margin: 0;
   }
}


/* ══════════════════════════════════════════════════════════════
   §07 — CTA INLINE — moldura com respiro lateral — 450 a 640px
   Abaixo de 640px a moldura (.s-cta__frame) perde o padding lateral
   (vira 0, ver tier <=640px acima) para o glass ganhar largura
   máxima. Em 450-640px sobra espaço de sobra para um respiro sutil
   de 15px sem apertar o glass. Abaixo de 450px mantém 0 — cada
   pixel de largura do glass importa nessas telas.
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 450px) and (max-width: 640px) {
   .s-cta__frame {
      padding-left: 15px;
      padding-right: 15px;
   }
}


/* ══════════════════════════════════════════════════════════════
   §07 — S-CTA__FRAME — sem borda, respiro menor embaixo — até 449px
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 449px) {
   .s-cta__frame {
      border: none;
      padding: 80px 0 31px;
   }
}


/* ══════════════════════════════════════════════════════════════
   §05 — TÍTULO DOS CARDS (tflow) — largura própria — 640 a 483px
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 483px) and (max-width: 640px) {
   .tflow__title {
      width: calc(100% - 101px);
   }
}

/* ══════════════════════════════════════════════════════════════
   §05 — TÍTULO DOS CARDS (tflow) — largura própria — até 482px
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 482px) {
   .tflow__title {
      width: calc(100% - 42px);
   }
}


/* ══════════════════════════════════════════════════════════════
   §05 — CLOSE (.s-confianca__close) — largura própria — 640 a 521px
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 521px) and (max-width: 640px) {
   .s-confianca__close {
      width: 464px;
      padding: 0 35px;
   }
}

/* ══════════════════════════════════════════════════════════════
   §06 — CLOSE (.s-custo__question-text) — ajustes próprios —
   768 a 641px
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 641px) and (max-width: 768px) {

   /* margin: 0 auto 19px (não 0 0 19px) — mesmo motivo do ajuste
     anterior: .s-custo__close é flex-column sem align-items:center,
     então left/right:0 grudaria o texto na borda esquerda em vez de
     centralizar. auto preserva o "0 topo / 19px embaixo" pedido. */
   .s-custo__question-text {
      font-size: 15px;
      margin: 0 auto 19px;
      width: 59%;
   }

   .s-custo__final-text {
      font-size: 39px;
   }
}

/* ══════════════════════════════════════════════════════════════
   §06 — CLOSE (.s-custo__close) — ajustes próprios — 640 a 590px
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 590px) and (max-width: 640px) {
   .s-custo__close {
      align-items: center;
   }

   /* .s-custo__question-text e .s-custo__final-text removidas daqui —
     valores antigos (16px/15px/60% e 35px/42px) vinham depois no
     arquivo e venciam por especificidade igual, bloqueando os
     ajustes mais recentes do tier <=640px geral (14px/margin:0 auto
     9px/60%/max-width:230px e 34px/42px/width:80%/margin:auto).
     Essa faixa não precisa mais de valor próprio para nenhum dos
     dois — só o align-items:center continua sendo exclusivo dela. */
}

/* ══════════════════════════════════════════════════════════════
   §05 — CLOSE (.s-confianca__close) — largura própria — 520 a 384px
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 384px) and (max-width: 520px) {
   .s-confianca__close {
      width: 93%;
   }
}


/* ══════════════════════════════════════════════════════════════
   §02 — CONTRAST CARDS — largura própria — até 560px
   Abaixo de 560px a grade ganha uma largura percentual (96%) em vez
   de preencher os 100% da coluna — uma pequena moldura lateral
   própria, independente do padding do tier <=640px acima.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
   .contrast-cards {
      width: 96%;
      margin-left: auto;
      margin-right: auto;
   }
}


/* ══════════════════════════════════════════════════════════════
   §03 — COMO DECIDEM — padding vertical menor — até 540px
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 540px) {
   .s-decisao {
      padding: 110px 24px 110px;
   }
}


/* ══════════════════════════════════════════════════════════════
   §04 — PROCESSO — body com largura própria — até 569px
   !important necessário: o elemento tem max-width:var(--w-narrow)
   inline no HTML (style=""), que vence qualquer seletor de classe
   por especificidade — inline sempre bate CSS externo, não importa
   quantas classes o seletor tenha.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 569px) {
   .s-processo .section-body {
      max-width: 88% !important;
   }
}


/* ══════════════════════════════════════════════════════════════
   §01 — QUOTE CARDS EMPILHADOS — até 560px
   Lado a lado (tier <=640px acima) cada card ficaria com ~150px
   nessa faixa. Empilhados, a moldura lateral afrouxa de 60px para
   32px e o texto da citação usa a largura toda do card.
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 560px) {

   .quote-cards {
      grid-template-columns: 1fr;
      padding: 0 32px;
   }

   .quote-card__text {
      width: 100%;
   }
}


/* ══════════════════════════════════════════════════════════════
   HERO — DEGRAU INTERMEDIÁRIO — 384 a 530px
   Entre o mobile padrão (tier <=640px) e o mobile pequeno (<=383px
   abaixo): título e respiros recalibrados para essa faixa estreita
   sem cair no tratamento mais compacto do tier pequeno. Fecha sem
   lacuna nem sobreposição com o <=383px logo abaixo.
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 384px) and (max-width: 530px) {

   /* pad-top 120px (era 170): os 170px eram o mecanismo antigo de
     posicionamento vertical — empurrar o título com padding fixo.
     Com o palco ancorando o título, o padding é só folga do nav +
     piso em telas baixas. O min-height espelha 2x o padding-top
     deste tier (ver a nota no palco, tier <=640px). */
   .s-hero {
      padding: 120px 0 0;
   }

   .s-hero__stage {
      min-height: calc(81vh - 240px);
      /* fallback */
      min-height: calc(81svh - 240px);
   }

   .s-hero__title {
      font-size: 42px;
   }

   .s-hero__subtitle {
      font-size: 14px;
      margin-top: 26px;
   }

   .s-hero__cta-row {
      margin-top: 107px;
   }

   .s-hero__cta-row .btn-outline {
      width: 70%;
   }

   .s-hero__cta-row .btn {
      width: 86%;
   }
}


/* ══════════════════════════════════════════════════════════════
   HERO — TÍTULO — 384 a 410px
   Sub-faixa estreita do tier 384-530px acima: o título de 42px sem
   padding lateral quebra linhas menos harmônicas nessa largura
   específica. Vem depois no arquivo para vencer por ordem de código
   nessa faixa; 411-530px seguem com os valores do tier acima.
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 384px) and (max-width: 410px) {
   .s-hero__title {
      font-size: 38px;
      padding: 0 20px;
   }
}


/* ══════════════════════════════════════════════════════════════
   §06 — COST ITEMS GRID — desativa o width:85% — 500 a 320px
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 500px) {
   .cost-items__grid {
      width: auto;
   }
}


/* ══════════════════════════════════════════════════════════════
   MOBILE PEQUENO — até 383px
   Ajustes finos para telas muito estreitas (ex: iPhone SE).
   Limite em 383px (não 380) para fechar sem lacuna com o tier do
   hero logo abaixo (384-530px).
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 383px) {

   /* ─── HERO — título segue ancorado a 40.5svh (teste) pelo palco do
     tier <=640px; eyebrow e subtítulo gravitam ao redor dele. Teto de
     82px (calibrado no aparelho: mantém tudo na tela em 360x800 com
     respiro embaixo — os 64px de base); min-height espelha 2x o
     padding-top (ver nota no palco). CTAs fluem depois do palco. */
   .s-hero {
      padding: 82px 0 64px;
   }

   .s-hero__stage {
      min-height: calc(81vh - 164px);
      /* fallback */
      min-height: calc(81svh - 164px);
   }

   .hero-eyebrow {
      margin-bottom: 25px;
   }

   .hero-eyebrow span {
      font-size: 10px;
   }

   .s-hero__title {
      font-size: 36px;
      padding: 0 28px;
   }

   .s-hero__subtitle {
      font-size: 14px;
      padding: 0 28px;
      margin-top: 32px;
   }

   /* 44px aproxima os botões do bloco título+subtítulo — harmonia e
     hierarquia (o par de CTAs pertence à conversa do texto). */
   .s-hero__cta-row {
      margin-top: 44px;
      gap: 7px;
   }

   .s-hero__cta-row .btn-outline {
      width: 80%;
      border-radius: 22px;
   }

   .s-hero__cta-row .btn {
      width: 100%;
      border-radius: 25px;
      gap: 14px;
   }

   /* Trust strip sai de cena — a promessa tripla volta a aparecer nas
     seções; aqui ela roubava espaço da dobra. */
   .s-hero__trust {
      display: none;
   }

   /* ─── Títulos: fluidos — o piso de 36px da curva padrão chega
     exatamente em 380px (ver TIPOGRAFIA FLUIDA), mantendo o hero
     de 44px no topo da hierarquia. ─── */
   /* width:auto — reseta o width:80% do tier <=640px acima. */
   .s-custo__final-text {
      font-size: 30px;
      line-height: 38px;
      width: auto;
   }

   .s-custo__close {
      padding: 0 15px;
      gap: 9px;
   }

   /* §02 — close: mesma especificidade do tier <=640px acima (0-1-0);
     vence por vir depois no arquivo. */
   .s-diferenca__close-title {
      font-size: 32px;
      line-height: 1.07;
   }

   /* ─── §06 — citação: mais espaço interno para o texto ─── */
   .cost-quote {
      padding: 36px 24px;
   }

   .cost-quote__text {
      font-size: 23px;
      line-height: 1.4;
   }

   .cost-quote__mark {
      display: none;
   }

   /* ─── Redução do padding lateral global — nessas telas cada pixel
     conta; o design já respira, então recuar as bordas ganha área
     útil sem perder a moldura. ─── */
   .col-center,
   .col-content,
   .col-wide {
      padding-left: 16px;
      padding-right: 16px;
   }

   /* .section-lead dentro de .col-wide (§05/§06): último degrau do
     taper (36px em <=768px -> 24px em <=640px -> 16px aqui). Nessas
     larguras (320-383px) cada pixel de coluna útil importa. Mesmo
     formato width:min()+margin:auto dos tiers acima, pela mesma
     razão (centralizar de verdade, garantindo o gutter mínimo). */
   .col-wide .section-lead {
      width: min(420px, calc(100% - 32px));
      margin-left: auto;
      margin-right: auto;
   }

   .s-confianca__close {
      width: 283px;
      padding: 0 31px;
   }

   /* ─── §01 — compensações dos valores do tier <=640px ───
     Os 60px do quote-cards e os percentuais de lead/body/texto foram
     calibrados para 640px de largura; aqui espremeriam a coluna útil
     abaixo do legível (ex: cards de 212px a 380px de viewport). */
   .s-antes .section-lead {
      width: 100%;
   }

   .s-antes .section-body {
      width: 100%;
   }

   .quote-card__text {
      width: 100%;
   }

   /* .faq-list fora do grupo: fica em 0 (herdado do tier <=640px) —
     só a seção (.s-faq) enquadra a lista, do jeito pedido. .quote-cards,
     .contrast-cards, .criteria e .process-wrapper também fora: valores
     próprios logo abaixo. */
   .cost-items {
      padding-left: 16px;
      padding-right: 16px;
   }

   /* Percentual (não px): a moldura acompanha a largura da tela nessa
     faixa em vez de um recuo fixo. */
   .criteria {
      padding-left: 5%;
      padding-right: 5%;
   }

   .s-processo .process-wrapper {
      padding-left: 20px;
      padding-right: 20px;
   }

   /* Título de §04: reset do 24px do tier <=640px acima. */
   .s-processo .section-title {
      padding-left: 20px;
      padding-right: 20px;
   }

   .quote-cards {
      padding-left: 12px;
      padding-right: 12px;
   }

   /* width:100% reseta o 96% do tier <=560px acima — nessas larguras
     o padding lateral (16px) já é a moldura, sem precisar de mais um
     recuo percentual em cima. */
   .contrast-cards {
      width: 100%;
      padding-left: 16px;
      padding-right: 16px;
   }

   /* ─── §07 — CTA Inline ─── */
   .cta-glass {
      padding: 40px 17px 36px;
   }

   .cta-glass__text {
      font-size: 15px;
      line-height: 30px;
   }

   .cta-glass__text .serif-i {
      font-size: 19px;
      line-height: 24px;
   }

   /* .cta-glass__question já herda font-size:13px/line-height:1.3 do
     tier <=640px acima — mesmo valor pedido aqui, nada muda. */

   /* ─── Botões que apertam a ~320px (o glass do §07 tem muito
     aninhamento lateral): afina fonte, padding e gap e encolhe o
     ícone para o texto nunca cortar. O CTA final (§09) tem seu
     próprio taper em degraus abaixo, escopado a partir de 520px. */
   .btn--cta {
      padding: 12px 12%;
      gap: 12px;
      font-size: 13px;
   }
}


/* ══════════════════════════════════════════════════════════════
   §09 — CTA FINAL — botão encolhe proporcionalmente — até 520px
   O width (calc(80% - 40px), tier <=640px) já encolhe a caixa
   continuamente, mas fonte/padding/gap/ícone fixos faziam o texto
   TRANSBORDAR da caixa a partir de ~450px (a caixa encolhia, o
   conteúdo não). 4 degraus medidos empiricamente (Playwright: testei
   cada combinação em cada largura até achar a que não transborda)
   para o conteúdo sempre acompanhar o encolhimento da caixa.
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 521px) and (max-width: 640px) {
   .s-final .btn--lg {
      width: 333px;
      padding: 21px 24px;
   }
}

@media (max-width: 520px) {
   .s-final .btn--lg {
      font-size: 15px;
      gap: 10px;
      padding-left: 22px;
      padding-right: 22px;
      width: calc(80% - 50px);
      min-width: 318px;
   }

   .s-final .btn--lg .btn-icon {
      width: 24px;
      height: 24px;
      min-width: 24px;
   }
}

@media (max-width: 412px) {

   /* padding-top/bottom em % (não px): resolve contra a largura do
     container (comportamento padrão do CSS para padding vertical em
     %, não da própria altura do botão) — width agora fixo (273px),
     então a % aqui varia só com a largura do container ao redor,
     não do próprio botão. */
   /* min-width:0 — reseta o min-width:318px do tier <=520px acima,
     que sem isso "vazava" pra cá e travava o botão em 318px (maior
     que o formato pretendido nessa faixa, cortado pelo overflow:
     hidden da seção sem gerar overflow de página — bug silencioso). */
   .s-final .btn--lg {
      font-size: 14px;
      gap: 8px;
      padding-top: 6.3%;
      padding-bottom: 6.3%;
      padding-left: 18px;
      padding-right: 18px;
      width: 273px;
      min-width: 0;
   }

   .s-final .btn--lg .btn-icon {
      width: 22px;
      height: 22px;
      min-width: 22px;
   }

   /* já em 10px nesta faixa — o pedido idêntico na faixa 373-320px
     abaixo não muda nada, só reforça o mesmo valor. */
   .badge {
      font-size: 10px;
   }
}

@media (max-width: 373px) {
   .s-final__cta {
      gap: 14px;
      padding-top: 48px;
   }

   .s-final .btn--lg {
      font-size: 14px;
      gap: 12px;
      padding: 22px;
      width: 260px;
   }

   .s-final .btn--lg .btn-icon {
      width: 23px;
      height: 22px;
   }

   .badge {
      gap: 9px;
      font-size: 10px;
   }
}


/* ══════════════════════════════════════════════════════════════
   §09 — CTA FINAL — Ajustes finos de responsividade (.s-final)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 608px) {
   .s-final {
      margin: 16px 0 0;
      border-radius: 100px 100px 0 0;
      padding: 120px 0 110px;
   }
}

@media (max-width: 359px) {
   .s-final {
      margin: 16px 0 0;
      border-radius: 80px 80px 0 0;
      padding: 120px 0 80px;
   }
}


/* ══════════════════════════════════════════════════════════════
   HERO — TELAS ESTREITAS *E* BAIXAS (ex: iPhone SE1, 320x568)
   Complemento do tier <=383px acima: em viewports baixos o palco
   degrada para fluxo natural (minmax max-content) — aqui só se
   compactam teto e respiros para o conteúdo caber melhor na dobra.
   (Vem depois do bloco <=383px de propósito: mesma especificidade,
   vence por ordem de código quando as duas queries se aplicam.)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 383px) and (max-height: 620px) {

   /* teto herda os 82px do tier <=383px; título já é 36px lá — aqui
     só se compactam os respiros do subtítulo e dos CTAs. */
   .s-hero__subtitle {
      margin-top: 20px;
   }

   .s-hero__cta-row {
      margin-top: 24px;
   }
}


/* ══════════════════════════════════════════════════════════════
   TIPOGRAFIA FLUIDA — <=1024px
   Tamanhos de título/lead/body resolvidos por clamp(): uma curva
   contínua no lugar de degraus por breakpoint. Este bloco fica no
   FIM do arquivo de propósito — por ordem de código ele vence
   qualquer valor fixo dos tiers acima com a mesma especificidade.

   Curva padrão em DOIS segmentos (min() de duas retas), para passar
   pelas três âncoras aprovadas do design:
     36px @ 380px  ·  44px @ 640px  ·  48px @ 1024px
   — reta A (íngreme): 24.31px + 3.077vw  (380→640)
   — reta B (suave):   37.33px + 1.042vw  (640→1024)
   min(A,B) troca de reta exatamente em 640px; clamp trava o piso
   em 36px (alcançado em 380px) e o teto em 48px (em 1024px).

   Exceções intencionais que continuam vencendo por especificidade
   (0-2-0, definidas nos tiers acima): .s-antes .section-lead/.body
   (§01, 16/14px) e .s-custo .section-lead--light (§06, 16px).
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

   /* ── TÍTULO PADRÃO — mesma curva para todas as seções. Cobre
     §01 (.section-title/--xl), §07/§09 (classes próprias) e §03
     (seletor de 2 classes, para vencer o override escopado de
     desktop dela). §02/§04/§05 têm exceção própria logo abaixo. ── */
   .section-title,
   .section-title--xl,
   .s-cta__title,
   .s-final__title,
   .s-decisao .section-title {
      font-size: clamp(36px, min(24.31px + 3.077vw, 37.33px + 1.042vw), 48px);
      line-height: 1.07;
      letter-spacing: -0.025em;
   }

   /* ── EXCEÇÃO §02 — A Diferença: piso mais baixo (34px, não 36px).
     Reta A recalculada para o novo par de âncoras 34px@380/44px@640
     (mesma reta B de 640→1024 do grupo padrão, já que 44@640 e
     48@1024 não mudam — só o piso baixo muda). ── */
   .s-diferenca .section-title {
      font-size: clamp(34px, min(19.38px + 3.846vw, 37.33px + 1.042vw), 48px);
      line-height: 1.07;
      letter-spacing: -0.025em;
   }

   /* ── EXCEÇÃO §04 — Processo: mesmo piso de 34px (mesma reta de §02
     acima — os dois pedidos usaram o mesmo par de âncoras). ── */
   .s-processo .section-title--xl {
      font-size: clamp(34px, min(19.38px + 3.846vw, 37.33px + 1.042vw), 48px);
      line-height: 1.07;
      letter-spacing: -0.025em;
   }

   /* ── EXCEÇÃO §08 — FAQ: piso de 35px (não 36px). Reta A recalculada
     para o par de âncoras 35px@380/44px@640 (mesma reta B do grupo
     padrão). ── */
   .s-faq .section-title {
      font-size: clamp(35px, min(21.85px + 3.462vw, 37.33px + 1.042vw), 48px);
      line-height: 1.07;
      letter-spacing: -0.025em;
   }

   /* ── EXCEÇÃO §05 — Confiabilidade: piso de 38px (reta A própria,
     valor pedido diretamente — reta B segue igual ao grupo padrão). ── */
   .s-confianca .section-title--xl {
      font-size: clamp(38px, min(26.31px + 3.077vw, 37.33px + 1.042vw), 48px);
      line-height: 1.07;
      letter-spacing: -0.025em;
   }

   /* Acentos serif itálicos que fixavam px (§07 61.6px, §09 55px)
     destoavam quando o título encolhia — passam a escalar junto (em).
     Os demais títulos já usam serif-i relativo. */
   .s-cta__title .serif-i,
   .s-final__title .serif-i {
      font-size: 1.06em;
      line-height: 1.05;
      letter-spacing: -0.005em;
   }

   /* ── LEAD e BODY — fluidos e uniformes ── */
   .section-lead {
      font-size: clamp(16px, 14.4px + 0.452vw, 19px);
      line-height: 1.6;
   }

   .section-body {
      font-size: clamp(15px, 14.5px + 0.151vw, 16px);
      line-height: 1.75;
   }

   /* ── EXCEÇÃO §06 — O Custo: título MAIOR (impacto da seção escura).
     A curva passa por ~52px em 768px — o valor que o tier <=768px
     usava em px fixo — e liberta o mobile dos 52px travados
     (40.6px em 380px). ── */
   .s-custo .section-title--xl {
      font-size: clamp(39px, 29.2px + 3.012vw, 60px);
      line-height: 1.06;
      letter-spacing: -0.028em;
   }

   .s-custo .section-title--xl .serif-i {
      font-size: 1.06em;
      line-height: 1.15;
      letter-spacing: -0.005em;
   }
}


/* ══════════════════════════════════════════════════════════════
   §04 — TÍTULO — "com você," / "para você." não quebram entre si —
   até 433px
   Abaixo de 433px, se a quebra de linha natural cai bem em cima de
   "você", a palavra fica sozinha numa linha enquanto "com"/"para"
   ficam presos no fim da linha anterior — quebra o par visualmente.
   .title-nowrap envolve cada dupla (serif-i + "você") e vira uma
   unidade atômica: quebra inteira para a linha de baixo, nunca
   internamente. ══════════════════════════════════════════════════ */
@media (max-width: 433px) {
   .s-processo .title-nowrap {
      white-space: nowrap;
   }
}

@media (min-width: 413px) and (max-width: 768px) {
   .s-final__badges .badge {
      background: rgb(255 251 243 / 90%);
      color: #37312b;
   }
}

@media (max-width: 640px) {
   .s-final__subtitle {
      text-shadow: none;
   }
}

@media (min-width: 769px) and (max-width: 1024px) {
   .s-final__badges .badge {
      background: rgb(255 255 255 / 83%);
      color: #0c0c0c;
   }
}

@media (max-width: 412px) {
   .s-final__badges .badge {
      background: rgb(255 255 255 / 85%);
      color: #120e0e;
   }
}

@media (min-width: 374px) and (max-width: 412px) {
   .s-final__badges .badge {
      font-size: 11px;
   }
}