/*
 * ESCALA RESPONSIVA — regra padrão (Acredity)
 * ------------------------------------------------------------------
 * 1rem = 16px sempre que o viewport tem exatamente 1440px de largura —
 * a mesma largura do frame no Figma. Todo valor extraído do Figma vive
 * em rem (px ÷ 16), não px, pra respeitar o zoom de fonte do navegador.
 *
 * IMPORTANTE — por que cada token tem seu PRÓPRIO clamp() (não existe
 * "1 proporção única pra tudo"): já tentamos isso (root font-size fluido
 * escalando o documento inteiro como 1 bloco só) e QUEBROU o mobile —
 * o motivo é que padding/gap precisam encolher MUITO mais que texto.
 * Ex: --hero-pad-inline vai de 110px (desktop) pra 20px (mobile) = -82%,
 * enquanto --hero-title-size vai de 72px pra 36px = -50%. Uma escala
 * única (ex: 87.5%) deixa o padding grande demais (~96px em vez de 20px)
 * em TODAS as seções que o reusam (audience/rates/steps/faq/footer), e
 * ao mesmo tempo deixa o título maior que o desenhado. Por isso cada
 * variável abaixo tem seu próprio clamp(mobile, fluido, desktop) — os
 * valores mobile/desktop batendo com o que o Figma realmente define em
 * cada extremo, não uma fração arbitrária do valor desktop.
 *
 * O clamp() de cada token já interpola suavemente entre mobile (375px)
 * e desktop (1440px) — cobre tablet nesse meio sem precisar de um
 * breakpoint dedicado, IGUAL fazia antes desta rodada de mudanças. Se no
 * futuro você criar frames de Tablet separados no Figma (com proporções
 * que não sejam só "meio termo" entre mobile e desktop), aí sim vale
 * adicionar um @media (min-width/max-width) dedicado pra esse token
 * específico usando os valores reais do frame de Tablet.
 *
 * Acima de 1440px (monitores grandes) não existe frame de Figma pra
 * seguir — aí sim usamos 1 regra única no <html>, deixando TUDO crescer
 * junto proporcionalmente até 1920px (não trava seco em 1440).
 *
 * Regra para novas páginas no Figma: pra cada token, pegue o valor em px
 * no frame Mobile (ou o menor breakpoint que você tiver) e no frame
 * Desktop 1440, divida os dois por 16, e monte
 * clamp(valor_mobile_rem, INTERSECÇÃO + INCLINAÇÃOvw, valor_desktop_rem)
 * — mesma fórmula da calculadora do Utopia (utopia.fyi), só que em rem.
 *
 * Exceções propositais que continuam em px (não convertidas pra rem):
 * - Hairlines de 1px (bordas/divisórias) — em rem, ficariam sub-pixel em
 *   telas pequenas e borradas pelo antialiasing.
 * - border-radius: 9999px (pílula/círculo) — valor-sentinela "maior que
 *   qualquer elemento", não é uma medida real do Figma.
 * - Breakpoints de layout (@media min-width/max-width) — decidem quando a
 *   ESTRUTURA muda (nav vira menu mobile etc.), não fazem parte da escala
 *   fluida de tamanho.
 */
html {
  /* Fixo até 1440px — cada token abaixo já cuida da própria fluidez
     mobile→desktop com seu clamp() individual. */
  font-size: 16px;
}

@media (min-width: 1440px) {
  html {
    /* Só aqui faz sentido 1 proporção única: não há frame de Figma além
       de 1440, então extrapolamos o documento inteiro crescendo junto
       até 1920px (monitor grande) em vez de travar seco em 1440px. */
    font-size: clamp(16px, 10px + 0.4167vw, 18px);
  }
}

:root {
  /* Escala de espaçamento genérica (gaps de menu mobile etc.) — Utopia
     fluid space scale, c=320,16,1.2,1440,18,1.25,5,2. Não vem de um
     token específico do Figma, por isso mantém o piso 320px original
     (em vez de 375px como os tokens abaixo, extraídos de nós reais). */
  --space-3xs: clamp(0.25rem, 0.2321rem + 0.0893vw, 0.3125rem);
  --space-2xs: clamp(0.5rem, 0.4821rem + 0.0893vw, 0.5625rem);
  --space-xs: clamp(0.75rem, 0.7143rem + 0.1786vw, 0.875rem);
  --space-s: clamp(1rem, 0.9643rem + 0.1786vw, 1.125rem);
  --space-m: clamp(1.5rem, 1.4464rem + 0.2679vw, 1.6875rem);
  --space-l: clamp(2rem, 1.9286rem + 0.3571vw, 2.25rem);
  --space-xl: clamp(3rem, 2.8929rem + 0.5357vw, 3.375rem);
  --space-2xl: clamp(4rem, 3.8571rem + 0.7143vw, 4.5rem);

  /* Cores da marca (extraídas do Figma) */
  --color-primary: #15131c;
  --color-amber: #C199F8;
  --color-coral: #6d5a9e;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-error-bg: #f3edff;

  /*
   * Valores extraídos do Figma (node 4159:259, frame HERO, 1416x954 @ viewport 1440px)
   * via get_metadata/get_design_context — cada clamp() usa o rem exato do Figma como
   * teto (1440px) e o rem correspondente ao piso mobile real (375px) como piso.
   */
  --hero-title-size: clamp(2.25rem, 1.4575rem + 3.38vw, 4.5rem); /* Figma: 36–72px */
  --hero-subtitle-size: clamp(1.125rem, 0.816875rem + 1.31vw, 2rem); /* Figma: 18–32px */
  --hero-bar-text-size: clamp(1rem, 0.735625rem + 1.13vw, 1.75rem); /* Figma: 16–28px */
  --hero-ui-text-size: clamp(0.8125rem, 0.76875rem + 0.19vw, 0.9375rem); /* Figma: 13–15px (nav links, botões) */
  /* Só usados na página CLT (node 4049:2196) — piso mobile na mesma escala
     2:1 do resto do bloco do hero (ver --hero-title-size acima). */
  --hero-eyebrow-gap: clamp(1.1875rem, 0.769rem + 0.1115vw, 2.375rem); /* Figma: 19–38px */
  --hero-title-subtitle-gap: clamp(0.6875rem, 0.4454rem + 0.0646vw, 1.375rem); /* Figma: 11–22px */
  /* Só usados na página INSS (Figma nodes 4548:921/4548:923). Sem frame
     mobile desse hero — piso mobile igual ao --hero-title-size (36px) e
     ao --audience-text-size (16px). */
  --hero-inss-title-size: clamp(2.25rem, 1.017625rem + 5.2582vw, 5.75rem); /* Figma: 36–92px */
  --hero-inss-desc-size: clamp(1rem, 0.911969rem + 0.3756vw, 1.25rem); /* Figma: 16–20px */
  /* Aliases genéricos (design-system.html é geral, não da página INSS) —
     mesmos valores, nomes sem página. Usar estes em páginas novas. */
  --display-size: var(--hero-inss-title-size); /* 36–92px */
  --lead-size: var(--hero-inss-desc-size); /* 16–20px */

  /* Piso subiu de 20px (medida literal do Figma) pra 32px — 20px deixava
     TODAS as seções (audience/connect/rates/steps/faq/footer usam essa
     mesma variável como gutter lateral) coladas na borda da tela no
     mobile, sensação "claustrofóbica" apontada pelo usuário. Como
     --section-gap é derivado desta variável (metade dela), a folga
     vertical entre seções cresce junto — mantém a mesma proporção
     validada antes entre margem lateral e vão vertical. */
  /* Piso mobile baixado de 32px pra 24px a pedido do usuário ("pode ser um
     pouquinho menor, pra não parecer tão apertado") — desktop continua
     110px. Recalculado pela fórmula da seção 1.1 do design system. */
  --hero-pad-inline: clamp(1.5rem, -0.3926rem + 8.0751vw, 6.875rem); /* 24–110px */

  /* Linha da 2ª coluna do grid (desktop) — a pedido do usuário, textos de
     seções diferentes precisam começar EXATAMENTE na mesma vertical
     (Figma: 614px de 1204px de conteúdo = 51%). Em cqw: só funciona dentro
     de um __inner com container-type: inline-size (ver .tips__inner /
     .opportunity__inner), e aí 51cqw = 51% da largura do grid daquela
     seção, independente de quantos paddings/cards tenha no caminho. Cada
     elemento desconta o próprio padding acumulado pra cair nessa linha.
     Ver DESIGN-SYSTEM.md seção 6.1. */
  --grid-col2: 51cqw;
  --hero-pad-top: clamp(1rem, 0.49375rem + 2.16vw, 2.4375rem); /* Figma: 16–39px */
  --hero-pad-bottom: clamp(1rem, 0.95625rem + 0.19vw, 1.125rem); /* Figma: 16–18px */

  /* Vão vertical entre seções (padding-top/bottom de cada seção — duas
     seções vizinhas somam 2x isso). DERIVADO de --hero-pad-inline (metade
     dele) em vez de ser uma escala independente: antes usava uma escala
     genérica (Utopia --space-3xl) que só ia até 96px no piso mobile,
     enquanto --hero-pad-inline ia até 20px — a margem lateral encolhia
     MUITO mais que o vão vertical no mobile, e a proporção entre os dois
     ficava bem diferente da do desktop, dando sensação de desalinhado.
     Amarrando os dois no mesmo clamp() (só dividido por 2), o vão
     vertical e a margem lateral sempre mantêm a mesma proporção relativa
     entre si em qualquer largura de tela. */
  --section-gap: calc(var(--hero-pad-inline) * 0.65); /* +30% sobre a proporção original (0.5x) — 13–71.5px por lado */

  --cta-gap: clamp(0.75rem, 0.35375rem + 1.69vw, 1.875rem); /* Figma: 12–30px entre os botões */
  /* Menu mais baixo a pedido do usuário — era clamp(0.75rem, 0.62875rem +
     0.52vw, 1.09375rem) (Figma: nav com até 107px de altura). */
  --nav-pad-block: clamp(0.625rem, 0.537rem + 0.376vw, 0.875rem);
  --nav-pad-inline: clamp(0.875rem, 0.655rem + 0.94vw, 1.5rem); /* Figma: até ~24px de respiro interno do menu */
  /* 1.35x o valor do Figma (era clamp(0.625rem, 0.490625rem + 0.57vw,
     1.0069rem), botões com até 54.5px de altura) — botões mais "gordinhos"
     a pedido do usuário, em TODOS os botões do site (13.5–21.75px). */
  /* Piso mobile subido de 13.5px pra 18px (a pedido do usuário: botão
     "muito fininho" no mobile, ~43px de altura contra ~60px no desktop —
     agora ~52px). Desktop continua 21.75px. */
  /* = padding do botão do menu (.nav .nav__cta, 14px) — TODOS os botões do
     site com a altura do botão do menu, a pedido do usuário (era
     clamp(1.125rem, 1.0425rem + 0.3521vw, 1.3593rem), 18–22px). */
  --btn-pad-block: 0.875rem;
  --btn-pad-inline: clamp(0.75rem, 0.485625rem + 1.13vw, 1.5rem);

  /*
   * Valores extraídos do Figma (node 4191:315, "Group 16275") via get_metadata.
   */
  --badge-text-size: clamp(0.6875rem, 0.665625rem + 0.09vw, 0.75rem); /* Figma: 11–12px */
  --audience-title-size: clamp(1.25rem, 1.07375rem + 0.75vw, 1.75rem); /* Figma: 20–28px */
  --audience-text-size: clamp(0.875rem, 0.83125rem + 0.19vw, 1rem); /* Figma: 14–16px */
  --audience-link-size: clamp(0.9375rem, 0.87125rem + 0.28vw, 1.125rem); /* Figma: 15–18px */
  --audience-card-gap: clamp(0.875rem, 0.655rem + 0.94vw, 1.5rem); /* Figma: 14–24px entre os 2 cards */
  /* Raios padronizados com a página INSS (a pedido do usuário: "muito
     arredondados") — card 0.875rem/14px fixo, o padrão do site. Eram
     clamp() do Figma: card 16–28px, overlay 14–22px. Overlay (caixa de
     vidro DENTRO do card) um pouco menor pra acompanhar o canto de fora. */
  --audience-card-radius: 0.875rem; /* 14px — padrão do site */
  --audience-overlay-radius: 0.625rem; /* 10px */
  --audience-overlay-inset: clamp(0.75rem, 0.563125rem + 0.8vw, 1.28125rem); /* Figma: 12–~20.5px de margem do overlay até a borda do card */
  --audience-overlay-pad: clamp(1.125rem, 0.816875rem + 1.32vw, 2rem); /* Figma: 18–32px */

  /*
   * Valores extraídos do Figma (node 4049:2161/4049:2185, cards "Pra quem
   * é / Qual o limite? / Como é pago?" — página CLT) via get_metadata.
   */
  --condition-icon-size: min(4.125rem, 12.8vw); /* Figma: até 66px — min() sem piso, mesma regra de .steps__icon/--benefit-icon-size (ícone precisa continuar encolhendo abaixo da referência mobile) */
  --condition-title-top: clamp(2.625rem, 2.009rem + 2.629vw, 4.375rem); /* Figma: 42–70px */
  --condition-rule-top: clamp(5.875rem, 4.489rem + 5.915vw, 9.8125rem); /* Figma: 94–157px */
  --condition-desc-top: clamp(6.6rem, 5.051rem + 6.61vw, 11rem); /* Figma: 105.6–176px */

  /*
   * Valores extraídos do Figma (node 4049:1996, seção "CONDIÇÕES" —
   * página CLT) via get_design_context/get_metadata. --terms-title-size
   * reaproveita --connect-title-size (56px bate exato) e --terms-list-text
   * reaproveita --rates-row-label-size (20px bate exato) — só o que não
   * tinha token parecido ganhou variável nova.
   */
  --terms-list-icon-size: clamp(1.25rem, 1.14rem + 0.469vw, 1.5625rem); /* Figma: 20–25px */
  --terms-notification-icon-size: clamp(3.343rem, 2.98rem + 1.55vw, 4.375rem); /* Figma: 53.5–70px (mobile medido no node 4447:856) */
  --terms-notification-radius: 0.875rem; /* 14px — padrão do site (era clamp 14–24px do Figma) */

  /*
   * Padding medido nos 4 cards do Figma (node 4049:1941, seção "COMO
   * FAZ?" — página CLT), não estimado a partir de tokens genéricos.
   */
  --process-card-pad-left: clamp(1.5rem, -0.283rem + 7.606vw, 6.5625rem); /* Figma: 24–105px */
  --process-card-pad-top: clamp(2rem, 1.098rem + 3.849vw, 4.5625rem); /* Figma: 32–73px */
  --process-card-pad-right: clamp(1rem, 0.824rem + 0.751vw, 1.5rem); /* Figma: ~16–24px */
  --process-icon-inset: clamp(1rem, 0.824rem + 0.751vw, 1.5rem); /* Figma: 24px */

  /*
   * Valores extraídos do Figma (node 4061:936, "three-scroll(bg-video)") via get_metadata.
   */
  --connect-title-size: clamp(2rem, 1.471875rem + 2.25vw, 3.5rem); /* Figma: 32–56px */
  --connect-radius: 0.875rem; /* 14px — padrão do site, igual INSS (era clamp 20–41px do Figma) */

  /*
   * Valores extraídos do Figma (node 4061:598, "scroll-3_menos juros") via get_metadata.
   */
  --rates-row-label-size: clamp(1rem, 0.911875rem + 0.38vw, 1.25rem); /* Figma: 16–20px */
  --rates-row-value-size: clamp(1.25rem, 1.118125rem + 0.56vw, 1.625rem); /* Figma: 20–26px */

  /*
   * Valores extraídos do Figma (node 4061:638, "Group 16250") via get_metadata.
   */
  --steps-text-size: clamp(1.125rem, 0.993125rem + 0.56vw, 1.5rem); /* Figma: 18–24px */
  /* Card 591x179 (node 4061:649): padding e gaps ASSIMÉTRICOS reais, não a
     escala genérica de --space-*. Esquerda 71px, direita 56px, gap
     texto->divisória 49px, gap divisória->ícone 45px, divisória 88px alto
     (valores de mobile proporcionalmente reduzidos, mesma lógica). */
  --steps-card-pad-left: clamp(1.5rem, 0.465625rem + 4.41vw, 4.4375rem);
  --steps-card-pad-right: clamp(1.25rem, 0.4575rem + 3.38vw, 3.5rem);
  --steps-card-pad-block: clamp(1.25rem, 0.68875rem + 2.39vw, 2.84375rem);
  --steps-text-divider-gap: clamp(1rem, 0.27375rem + 3.1vw, 3.0625rem);
  --steps-divider-icon-gap: clamp(0.875rem, 0.1925rem + 2.91vw, 2.8125rem);
  --steps-divider-height: clamp(3rem, 2.119375rem + 3.76vw, 5.5rem);
  /* Pedido do usuário: dobrar o vão entre os cards da lista (estava
     reusando --space-l, 32–36px, e ficou "muito colado" com o sticky ao
     lado). Dobro do --space-l original (64–72px), não o token genérico
     em si — ele é usado em muitos outros lugares do arquivo. */
  --steps-card-gap: clamp(4rem, 3.857rem + 0.7143vw, 4.5rem);

  /*
   * Valores extraídos do Figma (node 4061:910, "Group 16230" / atualizado node 4267:524
   * — usuário reduziu cards/fontes/ícones no Figma) via get_metadata.
   */
  --benefit-title-size: clamp(1.125rem, 0.993125rem + 0.56vw, 1.5rem); /* Figma: 18–24px */
  --benefit-desc-size: clamp(0.8125rem, 0.790625rem + 0.09vw, 0.875rem); /* Figma: 13–14px */
  /* min() (não clamp()) — mesmo motivo do .steps__icon: clamp() tinha um
     piso fixo (18px) que não encolhia mais abaixo de 375px, "não modular"
     pro padrão que o usuário quer (ícone sempre proporcional ao card). */
  --benefit-icon-size: min(1.5rem, 4.8vw); /* Figma: até 24px */
  /* Valores acima do Figma (24–83px / 20–49px) a pedido do usuário — a
     seção ficava "muito colada" com a medida original do frame. Depois
     ampliado de novo (130px→220px no desktop) — a referência era o pin
     horizontal do nubank.com.br, onde a transição de um card pro outro
     percorre um espaço enorme (lá cada "card" é praticamente a viewport
     inteira). Aqui os cards continuam do tamanho do Figma, então o gap
     é o único jeito de aproximar essa sensação de "percurso grande". */
  --benefit-card-gap: clamp(4.375rem, 1.0738rem + 14.085vw, 13.75rem); /* 70–220px entre cards */
  --benefit-text-image-gap: clamp(2rem, 0.9437rem + 4.507vw, 5rem); /* 32–80px texto→imagem */
  --benefit-card-height: clamp(16rem, 13.35875rem + 11.27vw, 23.5rem); /* Figma: 256–376px */
  /* Teste inspirado no card do nubank.com.br ("Fique por dentro das
     novidades"): lá o respiro vem de padding interno generoso (32–40px)
     em vez de gap entre cards — aqui não tem "caixa" pra dar padding, então
     o equivalente é abrir o gap vertical entre ícone/título/régua/descrição,
     que antes reusava --space-s (16–18px, pensado pra coisas bem menores
     como gap de menu mobile) e ficava "colado" numa coluna de texto alta. */
  --benefit-text-gap: clamp(1.25rem, 0.9859rem + 1.127vw, 2rem); /* 20–32px */

  /*
   * Valores extraídos do Figma (node 4251:519, "Group 16291" — FAQ) via get_metadata.
   */
  --faq-number-size: clamp(1.375rem, 1.155rem + 0.94vw, 2rem); /* Figma: 22–32px */

  /*
   * Valores extraídos do Figma (node 4257:521, "footer") via get_metadata.
   */
  --footer-tagline-size: clamp(1.25rem, 1.03rem + 0.94vw, 1.875rem); /* Figma: 20–30px */

  color-scheme: light dark;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ajustes do .steps__card ("como faz?") pedidos só pro mobile — errei da
   primeira vez e mudei os tokens base (linha ~161 acima), o que também
   inflava o padding em telas grandes (card ficava com um vão vazio
   enorme na esquerda). Escopado aqui em vez de mudar a regra base. */
@media (max-width: 1023px) {
  :root {
    --steps-card-pad-left: clamp(3rem, 0.93125rem + 8.82vw, 8.875rem); /* dobrado */
    --steps-card-pad-right: clamp(2.5rem, 0.915rem + 6.76vw, 7rem); /* dobrado */
    --steps-card-pad-block: clamp(2.5rem, 1.3775rem + 4.78vw, 5.6875rem); /* dobrado */
    --steps-divider-icon-gap: clamp(1.75rem, 0.385rem + 5.82vw, 5.625rem); /* dobrado */
  }
}

/* Vão vertical entre seções (topo/base de cada seção) ~4x maior no
   mobile, a pedido do usuário — só o vertical, a margem lateral
   (--hero-pad-inline) não muda. --section-gap normalmente deriva dela
   (0.65x, ver comentário acima) — destravado aqui só pro mobile pra não
   afetar a lateral junto. Fixo (não fluido) pelo mesmo motivo de antes:
   pedido era por algo "padronizado", não variando dentro da faixa mobile. */
@media (max-width: 1023px) {
  :root {
    /* Era 5.2rem (4x) — reduzido pela metade a pedido do usuário depois
       de ver na prática que 4x ficou grande demais. Agora 2x o valor
       original (~20.8px), não mais 4x. */
    --section-gap: 2.6rem; /* ~41.6px */
  }
}

/* Cards de "Por que a Acredity é diferentes" precisam de reforço PRÓPRIO
   aqui além do crescimento geral do root (+12.5% até 1920px não é
   suficiente pra esses tokens específicos). Card, gap e título ficam
   "travados" no teto do clamp() de cada token (1440px) e, como a seção é
   fixada em 100dvh e centralizada verticalmente (.benefits-scroll__sticky,
   justify-content:center), o conteúdo pequeno sobra um vão enorme
   acima/abaixo do título em monitores grandes — exatamente o motivo dessa
   mesma regra ter existido aqui antes da conversão pra rem. Continua
   crescendo em vw (não só via o root) até ~1920px de referência, igual
   valia antes. Precisa vir DEPOIS do :root principal acima — mesma
   especificidade (:root), então a ordem no arquivo decide quem vence. */
@media (min-width: 1440px) {
  :root {
    --benefit-card-height: clamp(23.5rem, 26.11vw, 31rem); /* Figma: 376px a 1440 → 26.11vw */
    --benefit-text-image-gap: clamp(5rem, 5.556vw, 6.625rem); /* continua a partir do 80px acima */
    --benefit-card-gap: clamp(13.75rem, 15.278vw, 18.331rem); /* continua a partir do 220px acima */
    --benefit-title-size: clamp(1.5rem, 1.67vw, 2rem);
    --benefit-desc-size: clamp(0.875rem, 0.97vw, 1.125rem);
    --benefit-icon-size: clamp(1.5rem, 1.67vw, 2rem);
    --benefit-text-gap: clamp(2rem, 2.222vw, 2.667rem); /* continua a partir do 32px acima */
  }
  /* .benefit-card e .benefit-card__text NÃO entram aqui — são propriedade
     direta (width), não variável. Especificidade igual à regra base delas
     lá embaixo (.benefit-card{width}/.benefit-card__text{width}), e essa
     base vem DEPOIS no arquivo — então "vencia" essa sobrescrita aqui e
     ela nunca fazia efeito nenhum em tela grande (bug real: telas >1440px
     ficavam sempre presas no teto da regra base). Motivo de ficarem juntas
     com as regras base delas, ao final do arquivo, e não aqui. */
}

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

body {
  margin: 0;
  background: var(--color-white);
  font-family: 'Geist', system-ui, 'Segoe UI', Roboto, sans-serif;
}

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

button {
  font: inherit;
  border: none;
  cursor: pointer;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

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

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---------- Scroll Reveal ---------- */

/* Fade + leve deslocamento vertical conforme o elemento entra na viewport
   (ver initScrollReveal em js/script.js) — mesmo efeito de referência do
   site thinkwise-consulting-template.webflow.io (lá é GSAP+ScrollTrigger
   fazendo opacity 0→1 + translateY ~40px→0 por elemento; aqui é o mesmo
   resultado visual com IntersectionObserver + transition CSS pura, sem
   adicionar nenhuma biblioteca nova — o resto do script.js já é 100%
   vanilla). `--reveal-delay` é um número (não tempo) setado via JS por
   item dentro de um `[data-reveal-group]`, pra escalonar a entrada de
   grupos (cards, linhas de lista) em vez de todos aparecerem juntos. */
[data-reveal] {
  --reveal-delay: 0;
  opacity: 0;
  transform: translateY(2.5rem);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--reveal-delay) * 90ms),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--reveal-delay) * 90ms);
}

[data-reveal].is-inview {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Hero ---------- */

.hero {
  width: 100%;
  height: 100vh;
  /* fallback pra navegadores sem dvh — em mobile (Chrome/Safari), 100vh
     inclui a área da barra de endereço, então o conteúdo (nav+CTAs) podia
     ficar cortado ou pular de altura quando a barra esconde/aparece no
     scroll. 100dvh acompanha a altura visível de verdade. */
  height: 100dvh;
  /* Era padding: var(--space-xs) (moldura branca em volta do card) — a
     pedido do usuário o hero agora ocupa 100% da largura/altura, sem
     margem branca nos cantos. */
  padding: 0;
  /* Vão hero->próxima seção igual ao respiro usado entre as outras
     seções. */
  margin-bottom: var(--section-gap);
}

.hero__card {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /* Era 0.875rem — sem cantos arredondados agora que o hero encosta nas
     bordas da tela (a pedido do usuário). */
  border-radius: 0;
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  /* Parallax sutil do hero (initHeroParallax em js/script.js) anima só
     o transform — avisa o navegador pra manter a foto numa camada própria. */
  will-change: transform;
}

/* sobre-nos.html: casal no CENTRO da foto ficava embaixo do título (à
   esquerda). Desktop: caixa da foto 135% da largura, ancorada à esquerda
   → zoom + casal empurrado pra direita, o título fica sobre o cenário
   rosa; corta só a borda direita do cenário. Sem transform/scale (o
   parallax do hero já anima o transform deste <img>). */
@media (min-width: 1024px) {
  .hero__bg--shift-right {
    right: auto;
    width: 125%; /* 135% cortava o rapaz na borda direita em telas largas */
    max-width: none; /* o reset global img { max-width:100% } travava em 100% */
    object-position: center 20%; /* zoom corta em cima/embaixo — mantém os rostos */
  }
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.7),
    rgba(0, 0, 0, 0.25) 50%,
    rgba(0, 0, 0, 0.05)
  );
}

.hero__content {
  position: relative;
  width: 100%;
  max-width: 90rem; /* Figma: 1440px */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  padding: var(--hero-pad-top) var(--hero-pad-inline) var(--hero-pad-bottom);
  /* .nav virou position:fixed (abaixo) — saiu do fluxo, então .hero__main
     (título/subtítulo/CTAs) subiria pro topo do hero, ficando embaixo do
     nav flutuante. Esse padding extra no topo compensa a altura que o nav
     ocupava antes (aproximação — nav tem altura fluida própria, não dá
     pra calcular exato só com CSS sem medir ao vivo; ajustar se sobrar/
     faltar respiro). */
  padding-top: calc(var(--hero-pad-top) + var(--space-2xl) + 5rem);
}

/* ---------- Nav em pílula (TESTE, página INSS — Figma node 4545:589) ----
   Pílula de vidro flutuante, com a MESMA largura do grid das seções
   (DESIGN-SYSTEM.md seção 6: calc(min(90rem, 100%) − 2 × gutter), NÃO
   min(90rem, calc(…)) — ver seção 9.3). Centralizada com left/right 0 +
   margin auto (sem transform — seção 9.1). O .nav antigo continua no HTML
   só oculto via [hidden] (ver abaixo).
   Figma (1440px): pílula 1204x88 a 54px do topo, vidro rgba(255,255,255,
   .04) + blur 22.75px, logo branco a 31px da borda, links brancos 12px em
   caixa alta, botão rosa 224x69 encaixado a ~9.5px das bordas da pílula.
   Texto branco sobre vidro quase transparente some em cima das seções
   brancas — por isso o estado .is-scrolled (JS, js/script.js), ativado
   quando o hero sai de trás do menu: vidro mais branco + texto/logo escuros
   + cola mais perto do topo. */
.nav[hidden],
.nav-pill[hidden] {
  display: none;
}

.nav-pill {
  --nav-pill-height: 5.5rem; /* Figma: 88px */
  --nav-pill-inset: 0.59375rem; /* Figma: ~9.5px do botão até a borda */
  position: fixed;
  top: 3.375rem; /* Figma: 54px */
  left: 0;
  right: 0;
  z-index: 50;
  width: calc(min(90rem, 100%) - 2 * var(--hero-pad-inline));
  height: var(--nav-pill-height);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--space-l);
  /* Direita: 0.875rem (era o inset de 9.5px do Figma, pensado pro botão
     esticado de 69px) — com o botão no tamanho padrão (~60px, centralizado
     na pílula de 88px), sobra ~14px em cima/embaixo, então a direita
     acompanha pra ficar equilibrado. */
  padding: var(--nav-pill-inset) 0.875rem var(--nav-pill-inset) 1.9375rem; /* Figma: logo a 31px */
  background-color: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(1.421875rem); /* Figma: 22.75px */
  backdrop-filter: blur(1.421875rem);
  border-radius: 9999px;
  color: var(--color-white);
  transition: background-color 0.3s ease, color 0.3s ease, top 0.3s ease;
}

/* Dois estados independentes (JS em js/script.js, initNavPillScroll):
   - .is-scrolled = POSIÇÃO: depois que o hero passa, cola mais perto do
     topo.
   - .is-light = COR: sobre seção clara, vidro mais branco + texto/logo
     escuros. Sobre seção escura (hero, card rosa de Vantagens, Benefícios,
     rodapé — ver lista no JS), fica sem a classe e volta ao visual do
     hero (vidro transparente, logo/texto brancos), a pedido do usuário. */
.nav-pill.is-scrolled {
  top: var(--space-s);
}

.nav-pill.is-light {
  background-color: rgba(255, 255, 255, 0.7);
  color: #171717;
}

.nav-pill__logo-link {
  flex-shrink: 0;
  display: block;
}

.nav-pill__logo {
  display: block;
  width: clamp(6.25rem, 5.84rem + 1.75vw, 7rem); /* Figma: 112px */
  height: auto;
}

.nav-pill__logo--dark,
.nav-pill.is-light .nav-pill__logo--light {
  display: none;
}

.nav-pill.is-light .nav-pill__logo--dark {
  display: block;
}

.nav-pill__links {
  display: none;
  list-style: none;
  margin: 0 0 0 auto;
  padding: 0;
  font-size: 0.75rem; /* Figma: 12px */
  line-height: 1.82; /* Figma: 21.8px */
  text-transform: uppercase;
}

.nav-pill__links a {
  color: inherit;
  text-decoration: none;
}

.nav-pill__links a:hover {
  opacity: 0.8;
}

.nav-pill__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: var(--space-2xs);
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
}

.nav-pill__toggle-icon {
  width: 1.5rem;
  height: 1.5rem;
}

/* Botão padrão do site (a pedido do usuário: "do tamanho dos demais
   botões" + ícone) — .btn .btn--clt no HTML, mesma altura/padding/fonte
   dos outros CTAs (--btn-pad-block/inline), com o ícone de calculadora.
   Era um botão próprio esticado na altura da pílula (Figma: 224x69, bold
   14px, sem ícone). Centralizado na altura da pílula pelo align-items do
   .nav-pill. */
.btn.nav-pill__cta {
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .nav-pill__links {
    display: flex;
    gap: 2.25rem; /* Figma: ~36px entre os links */
  }

  .nav-pill__toggle {
    display: none;
  }

  .btn.nav-pill__cta {
    margin-left: var(--space-l); /* Figma: ~65px entre o último link e o botão (somado ao gap) */
  }
}

/* Mobile: sem frame no Figma — pílula mais baixa e mais perto do topo,
   links viram dropdown do hambúrguer (mesmo JS do menu antigo). */
@media (max-width: 1023px) {
  .nav-pill {
    --nav-pill-height: 4rem;
    top: var(--space-s);
    gap: var(--space-2xs);
    padding-left: 1.25rem;
    padding-right: 0.5rem;
  }

  /* Bug reportado pelo usuário ("menu quebrado no mobile"): o botão com
     texto (~137px) não cabia ao lado do logo + hambúrguer e vazava pra
     fora da pílula, e o hambúrguer ficava no meio. Agora: logo | (espaço)
     | botão só com ícone | hambúrguer na ponta — mesmo padrão do menu
     antigo (.nav__cta-text escondido no mobile). */
  .btn.nav-pill__cta {
    order: 1;
    margin-left: auto;
    padding: 0.9375rem; /* glifo 1.375rem na pastilha de 3.25rem */
  }

  .nav-pill__cta .btn__label {
    display: none;
  }

  .nav-pill__toggle {
    order: 2;
    margin-left: 0;
  }

  .nav-pill__links.is-open {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    position: absolute;
    top: calc(100% + var(--space-2xs));
    left: 0;
    right: 0;
    margin: 0;
    padding: var(--space-m);
    background: var(--color-white);
    border-radius: 1rem;
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.08);
    color: #171717;
  }
}

/* ---------- Nav ---------- */

/* Barra full-width, fundo branco sólido, sempre no mesmo estilo (pedido
   do usuário: "tipo o nav do inter.co") — substituiu o pill flutuante
   translúcido que trocava de aparência conforme a seção por trás
   (hero escuro vs. seção clara). Texto/ícone/logo ficam sempre na
   variante escura (não precisa mais de JS pra trocar cor conforme
   scroll, ver initStickyNav removido de js/script.js). */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  /* Era var(--color-white) sólido — virou vidro translúcido (a pedido do
     usuário): branco com opacidade + blur do que passa por baixo. Branco
     a 70% ainda garante contraste pro texto/logo escuros mesmo sobre a
     foto escura do hero. -webkit- pro Safari. */
  /* Era 0.7 — mais transparente a pedido do usuário ("não tá elegante no
     topo"). Blur um pouco maior (era 0.75rem) compensa: o fundo fica mais
     desfocado, então o texto escuro continua legível mesmo com menos
     branco por trás. */
  /* Branco sólido 100% (a pedido do usuário) — era vidro translúcido
     (branco 50% + blur). */
  background: var(--color-white);
  /* Sem borda inferior (a pedido do usuário) — era 1px branca translúcida,
     lia como uma linha branca "sobrando" embaixo do vidro. */
  border-bottom: none;
  /* Fundo de vidro ocupa a tela inteira, mas o CONTEÚDO (logo/links/
     botões) alinha exatamente com o grid das seções (max-width 90rem
     centralizado + --hero-pad-inline, ver DESIGN-SYSTEM.md seção 6).
     Antes era só padding-inline: var(--hero-pad-inline) — igual até
     1440px, mas acima disso o conteúdo das seções trava em 90rem e o do
     nav continuava abrindo até as bordas da tela. (100% − 90rem)/2 é a
     sobra de cada lado quando a tela passa do teto do grid; max() mantém
     só o gutter padrão abaixo disso. % em padding = largura do
     containing block (viewport, já que é position:fixed). */
  padding-block: var(--nav-pad-block);
  padding-inline: max(var(--hero-pad-inline), calc((100% - 90rem) / 2 + var(--hero-pad-inline)));
}

.nav__logo {
  /* era um width fixo (141px) — a única coisa não-fluida do nav. Em telas
     estreitas isso, somado ao botão "Simule Agora" + hambúrguer, não cabia
     numa linha só e o nav (border-radius:9999px, pensado pra 1 linha)
     quebrava em 2 linhas e virava um blob torto. */
  width: clamp(6.25rem, 5.34375rem + 3.85vw, 8.8125rem); /* Figma: 100–141px */
  height: auto;
  object-fit: contain;
  flex-shrink: 0;
}

.nav__links {
  display: none;
  align-items: center;
  /* Era --space-l — aumentado a pedido do usuário (menu em caixa alta
     precisa de mais respiro entre os itens, senão as letras maiúsculas +
     tracking ficam com os links "colados" visualmente). */
  gap: var(--space-xl);
  color: #171717;
  /* --hero-ui-text-size é compartilhado com os botões (.btn) — reduzido
     só aqui (não no token) a pedido do usuário, pra não encolher os CTAs
     junto. */
  font-size: calc(var(--hero-ui-text-size) * 0.85);
  /* Caixa alta + tracking maior entre letras, a pedido do usuário. */
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.nav__links a:hover {
  opacity: 0.8;
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}

.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #171717;
  padding: var(--space-2xs);
}

.nav__toggle-icon {
  width: 1.5rem;
  height: 1.5rem;
}

@media (min-width: 1024px) {
  .nav__links {
    display: flex;
    position: static;
    background: none;
    padding: 0;
  }

  .nav__toggle {
    display: none;
  }
}

@media (max-width: 1023px) {
  /* respiro mais apertado só pra ajudar tudo a caber numa linha só nas
     telas mais estreitas — acima de 1024px os links de texto somem
     completamente (nav__links vira flex só no desktop) então esse gap
     nem se aplica lá. */
  .nav {
    gap: var(--space-2xs);
  }

  .nav__actions {
    gap: var(--space-2xs);
  }

  /* "Simule Agora" some (só o ícone fica) no nav compacto do mobile — o
     texto some porque, mesmo com a logo já fluida e os gaps apertados, o
     botão inteiro (ícone+texto) não cabia numa linha com a logo e o
     hambúrguer, quebrando o pill em 2 linhas tortas. O CTA em si não
     desaparece do mobile: os botões "Consignado CLT/INSS" já ficam bem
     visíveis logo abaixo, no corpo do hero, então não é uma ação que só
     existia aqui. */
  .nav__cta-text {
    display: none;
  }

  .nav__cta {
    padding: 0.625rem;
  }

  .nav__links.is-open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-s);
    position: absolute;
    top: calc(100% + var(--space-xs));
    left: 0;
    right: 0;
    background: var(--color-white);
    border: 1px solid #eee;
    border-radius: 1rem;
    padding: var(--space-m);
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.08);
    z-index: 20;
  }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  gap: var(--space-xs);
  border-radius: 9999px;
  font-weight: 500;
  font-size: var(--hero-ui-text-size);
}

.btn__icon {
  width: 1.2em;
  height: 1.2em;
  flex-shrink: 0;
}

.btn__icon--lg {
  width: 1.4em;
  height: 1.4em;
  /* Mesmo tamanho visual, mas ocupa a altura do ícone normal (1.2em) —
     senão os botões com ícone grande ficavam ~3px mais altos que o do
     menu (que usa o ícone normal). */
  margin-block: -0.1em;
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: 400;
  /* Era --btn-primary-pad-block/inline (~72px de altura no teto) — essa
     variante só é usada no nav__cta ("Simule Agora"), e ficava bem mais
     alta que os outros CTAs do site (.btn--clt/.btn--inss, ~54.5px),
     "estufando" o menu inteiro (a altura do nav acompanha o filho mais
     alto). Padronizado com --btn-pad-block/inline, a pedido do usuário. */
  padding: var(--btn-pad-block) var(--btn-pad-inline);
}

/* Botão do menu mais baixo que os CTAs das seções (a pedido do usuário,
   junto com o menu) — só o padding vertical; era --btn-pad-block (18–22px).
   Fica depois do .btn--primary pra vencer com a mesma especificidade. */
.nav .nav__cta {
  padding-block: 0.875rem;
}

.btn--clt {
  background: var(--color-primary);
  color: var(--color-white);
  padding: var(--btn-pad-block) var(--btn-pad-inline);
}

/* .btn--inverse = alias genérico de .btn--inss (mesma regra; usar o genérico
   em páginas novas — ver design-system.html). */
.btn--inss,
.btn--inverse {
  /* Era var(--color-amber) com texto preto — branco com texto/ícones rosa
     a pedido do usuário (todos os botões amarelos). Ícones do sprite usam
     currentColor, então acompanham o color. */
  background: var(--color-white);
  color: var(--color-primary);
  padding: var(--btn-pad-block) var(--btn-pad-inline);
  /* Hover simples (a pedido do usuário — era a varredura preta entrando
     dos dois lados): só o fundo muda, com uma transição curta. */
  transition: background-color 0.2s ease;
}

/* Hover dos botões brancos: cinza bem suave, texto continua rosa. */
.btn--inss:hover,
.btn--inverse:hover {
  background: #f2f2f2;
}

/* Hover dos botões rosa: "acende" pro coral claro #2a2433. */
.btn--primary,
.btn--clt {
  transition: background-color 0.2s ease;
}

.btn--primary:hover,
.btn--clt:hover {
  background: #2a2433;
}

/* position/overflow continuam (a varredura saiu, mas os filhos ainda
   usam z-index e o recorte nos cantos segue útil). */
.btn {
  position: relative;
  overflow: hidden;
}
.btn__icon,
.btn__label,
.nav__cta-text {
  position: relative;
  z-index: 1;
}

/* ---------- Hero main content ---------- */

.hero__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-m);
  max-width: 46.625rem; /* Figma: 746px */
}

/* Página CLT (.hero--clt) tem espaçamentos verticais diferentes entre
   eyebrow/título/subtítulo do que a home — ver --hero-eyebrow-gap acima.
   Escopado só nessa página pra não alterar o hero da home, que reaproveita
   as mesmas classes .hero__main/.hero__title/.hero__subtitle. */
.hero--clt .hero__main {
  gap: 0;
}

.hero--clt .hero__eyebrow {
  margin-bottom: var(--hero-eyebrow-gap);
}

.hero--clt .hero__title {
  margin-bottom: var(--hero-title-subtitle-gap);
}

.hero--clt .hero__subtitle {
  margin-bottom: var(--space-m);
}

/* Página INSS (.hero--inss, Figma nodes 4548:917/921/923 + 4545:685) —
   título maior (92px) quebrado em 2 linhas manuais ("A mudança chegou" /
   "na Acredity", via .hero__title-line), eyebrow virou pílula e o
   parágrafo ficou maior/mais largo. Espaçamentos verticais do Figma:
   pílula→título 11px, título→parágrafo 19px, parágrafo→botão 35px. */
.hero--inss .hero__main {
  gap: 0;
  /* Figma: título ocupa 887px — o teto padrão (746px) quebraria
     "A mudança chegou" em duas linhas. */
  max-width: 56rem;
}

.hero--inss .hero__eyebrow {
  margin-bottom: 0.6875rem; /* Figma: 11px */
}

.hero--inss .hero__title {
  margin-bottom: 1.1875rem; /* Figma: 19px */
}

.hero--inss .hero__desc {
  margin-bottom: 2.1875rem; /* Figma: 35px */
  max-width: 32.55em; /* Figma: 651px sobre 20px */
  font-size: var(--hero-inss-desc-size);
  line-height: 1.5; /* Figma: 30px */
  letter-spacing: -0.0135em; /* Figma: -0.27px */
}

/* Mobile: pílula do eyebrow menor (a pedido do usuário) — ~12px de texto
   numa pílula de ~26px de altura. Desktop segue o Figma do INSS (14px,
   pílula de 35px, ver .hero__eyebrow). */
@media (max-width: 1023px) {
  .hero__eyebrow {
    padding: 0.0625rem 1rem;
    font-size: 0.75rem;
    line-height: 2;
  }
}

/* Parágrafo abaixo do título (Figma node 4061:1296) — mesma tipografia do
   .hero__eyebrow (16px/400/#fdfdfd/-0.27px), só que mais largo (360px) e
   posicionado depois do título em vez de antes. */
.hero__desc {
  margin: 0;
  max-width: 22.5em; /* Figma: 360px sobre 16px */
  color: #fdfdfd;
  font-weight: 400;
  font-size: var(--audience-text-size);
  line-height: 1.875;
  letter-spacing: -0.017em;
}

/* Eyebrow em pílula, padrão da página INSS (Figma node 4548:917) —
   aplicado a todos os heroes (a pedido do usuário: fontes iguais ao
   INSS). Era texto solto 16px/1.875 só no CLT. Pílula 230x35px no Figma. */
.hero__eyebrow {
  display: inline-block;
  margin: 0;
  padding: 0.15625rem 1.25rem;
  background: rgba(243, 237, 255, 0.09);
  border-radius: 9999px;
  color: #fdfdfd;
  font-weight: 400;
  font-size: 0.875rem; /* Figma: 14px */
  line-height: 2.143; /* Figma: 30px */
  letter-spacing: -0.019em; /* Figma: -0.27px */
  text-transform: uppercase;
}

/* Título do hero no tamanho do INSS (--display-size = --hero-inss-title-size,
   36–92px) em todas as páginas. Era --hero-title-size (72px no teto),
   line-height 1.05 e tracking -0.03em. */
.hero__title {
  margin: 0;
  color: var(--color-white);
  font-weight: 400;
  font-size: var(--hero-inss-title-size);
  line-height: 1; /* Figma: 92px */
  letter-spacing: 0; /* Figma: sem tracking */
}

/* Só usado na página CLT — título quebrado em 3 linhas manuais, igual ao
   Figma (node 4049:2202: "Empréstimo " / "Consignado " / "para CLT"), não
   depende do wrap natural do navegador. */
.hero__title-line {
  display: block;
}

.hero__title-line--soft {
  color: #f8f8f8;
}

.hero__subtitle {
  margin: 0;
  font-size: var(--hero-subtitle-size);
  line-height: 1.1;
}

/* Só usado na página CLT — subtítulo quebrado em 2 linhas manuais, igual
   ao Figma (node 4049:2204: "Acredite em você. " / "A gente já acreditou"). */
.hero__subtitle-line {
  display: block;
}

.hero__subtitle--light {
  color: #fdfdfd;
}

.hero__subtitle--muted {
  color: #cacaca;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cta-gap);
}

/* ---------- Bottom CTA bar ---------- */

/* Barra fixa "Simule seu empréstimo" — mesma aparência de antes (quando
   vivia dentro do Hero), agora position:fixed e escondida/mostrada via
   .is-visible (ver initFloatingCta em js/script.js). Fundo virou o mesmo
   gradiente animado (shader WebGL) da seção "Conectamos você..." — ver
   initGradientCanvas em js/script.js — em vez de cor sólida com blur de
   vidro. Estrutura em camadas igual .connect__visual/.connect__content:
   gradiente/canvas absolutos preenchendo o pill inteiro (overflow:hidden
   recorta nos cantos arredondados), conteúdo (texto+botões) por cima. */
.floating-cta {
  position: fixed;
  left: 50%;
  bottom: var(--space-l);
  z-index: 40;
  width: min(75.375rem, calc(100% - 2 * var(--hero-pad-inline))); /* Figma: 1206px */
  /* 9999px em vez de um valor fixo (era 2.75rem/44px, Figma) — a pedido
     do usuário, pra ficar 100% arredondado (pílula completa) sempre,
     não importa a altura real da barra (que varia com o conteúdo). Um
     valor fixo só vira pílula se coincidir com metade da altura. */
  border-radius: 9999px;
  overflow: hidden;
  background: var(--color-primary); /* base sólida visível só no instante antes do fallback/canvas entrarem */
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.18); /* Figma: 0 12px 32px */
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 1rem); /* Figma: 16px */
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.floating-cta.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

/* Oculta em TODAS as telas (a pedido do usuário — primeiro no desktop,
   depois também no mobile). Continua existindo/rodando no HTML/JS
   (initFloatingCta/initGradientCanvas em js/script.js não mudam), só não
   aparece. Pra voltar: apagar esta regra (ou pôr num @media pra ocultar só
   num tamanho de tela). Os estilos mobile abaixo continuam prontos. */
.floating-cta {
  display: none;
}

/* Frame mobile real do Figma (node 4372:265, canvas de referência 393px):
   NÃO é o mesmo visual do desktop — fundo é cor sólida + blur de vidro
   (sem o gradiente animado), cantos são retângulo arredondado (16px, não
   pílula), margem de 16px da borda da tela. Sobrepõe o bloco acima
   (que continua valendo pro desktop, ≥1024px). */
@media (max-width: 1023px) {
  .floating-cta {
    /* Colado nas 3 bordas (esquerda/direita/baixo), sem respiro nenhum —
       a pedido do usuário, substitui o cartão flutuante com margem que
       tinha antes. */
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    border-radius: 0;
    background: #6d5a9e; /* Colours-Acredity/brand/primary-coral */
    backdrop-filter: blur(0.5125rem); /* Figma: 8.2px */
    transform: translateY(1rem);
  }

  .floating-cta.is-visible {
    transform: translateY(0);
  }
}

.floating-cta__content {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-s);
}

@media (min-width: 1024px) {
  .floating-cta__content {
    flex-wrap: nowrap;
    /* Texto na esquerda, botões na direita (space-between) — a pedido do
       usuário. padding-inline é simétrico (calc(--space-l)*1.3 dos dois
       lados), então a distância botões→borda direita já bate igual com
       texto→borda esquerda. */
    justify-content: space-between;
    gap: var(--space-m);
    padding: var(--space-m) calc(var(--space-l) * 1.3);
  }

  .floating-cta__content .hero__ctas {
    flex-wrap: nowrap;
  }
}

.floating-cta__text {
  width: 100%;
  margin: 0;
  color: var(--color-white);
  font-size: var(--hero-bar-text-size);
  line-height: 1.1;
}

@media (min-width: 1024px) {
  .floating-cta__text {
    width: auto;
  }
}

/* Quebra a linha exatamente antes de "É GRÁTIS..." (em vez de deixar o
   navegador quebrar onde achar melhor, que dependendo da largura ficava
   no meio da frase) — a pedido do usuário, garantido em qualquer tela
   (não só desktop). display:block no <strong> força ele pra linha de
   baixo, sem precisar de <br> fixo no HTML. */
.floating-cta__text strong {
  display: block;
  font-weight: 400;
}

/* Medidas exatas do Figma (node 4372:265, frame mobile 393px de
   referência) — texto numa linha só e os 2 CTAs lado a lado embaixo.
   Ícones dos botões removidos e fonte aumentada nesse breakpoint a
   pedido do usuário (ver .floating-cta .btn__icon abaixo). Isso é só
   dentro da barra — os mesmos botões no hero continuam com o
   padding/fonte/ícones cheios deles. */
@media (max-width: 1023px) {
  .floating-cta__content {
    flex-direction: column;
    /* Centralizado a pedido do usuário — era flex-start, então a linha
       dos 2 botões (que não tem width:100% como o texto) ficava colada
       na esquerda em vez de centralizada junto com o texto. */
    align-items: center;
    /* Explícito (a regra base tem justify-content:space-between, feito
       pro layout em linha do desktop — em coluna aqui isso empurra o
       texto pro topo e os botões pro fim do container, sobrando espaço
       vazio embaixo. center evita depender de herdar da regra base). */
    justify-content: center;
    flex-wrap: nowrap;
    /* Era 0.375rem (6px, medida do Figma) — aumentado bastante a pedido
       do usuário, o texto e a linha de botões estavam grudados. */
    gap: 1rem;
    /* Uniforme nos 4 lados a pedido do usuário — antes tinha base (0.75rem)
       diferente do topo/laterais (1.75rem), sem padrão nenhum. */
    padding: 1.75rem;
  }

  .floating-cta__text {
    font-size: 1rem; /* Figma (node 4372:265, atualizado): 13px → 16px */
    text-align: center;
  }

  .floating-cta .hero__ctas {
    /* width:fit-content + justify-content:center — reforço direto pra
       garantir que a LINHA dos botões fique centralizada mesmo se algo
       fizer ela esticar 100% (nesse caso o align-items:center do pai
       sozinho não centraliza nada, já que não sobraria espaço extra pra
       "centralizar" dentro de uma linha que já ocupa a largura toda). */
    width: fit-content;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 1.0625rem; /* Figma: 17px entre os 2 botões */
  }

  .floating-cta .btn--clt,
  .floating-cta .btn--inss {
    flex: none;
    width: 9.0625rem; /* Figma: 145px */
    /* Aumentada a pedido do usuário — 8.42px (medida do Figma) era ilegível.
       Cabe mais agora que os ícones (abaixo) somem nesse breakpoint. */
    font-size: 0.875rem; /* 14px */
    padding-block: 0.5625rem;
    padding-inline: 0.75rem;
    /* .btn é inline-flex sem justify-content (padrão flex-start) — com
       ícone+texto+ícone normalmente isso nem aparecia (ocupava a largura
       toda), mas com os ícones escondidos abaixo só sobra o texto, que
       ficava colado numa ponta da largura fixa (145px) do botão em vez
       de centralizado. */
    justify-content: center;
  }

  /* Ícones escondidos só na barra flutuante do mobile, a pedido do
     usuário — os mesmos botões no hero (.btn--clt/.btn--inss fora do
     .floating-cta) continuam com os dois ícones normalmente. */
  .floating-cta .btn__icon {
    display: none;
  }

  /* Página CLT: só 1 botão na barra (não 2 como a home) — a pedido do
     usuário, bem mais largo (90% do card) em vez da largura fixa de
     145px pensada pra caber os 2 botões lado a lado da home. width:100%
     no .hero__ctas porque ele é fit-content (regra acima) — sem isso o
     90% do botão calcularia sobre um pai que já encolheu pro tamanho
     do próprio botão, virando um círculo (90% de nada de sobra). */
  .floating-cta .hero__ctas:has(.btn:only-child) {
    width: 100%;
  }

  .floating-cta .hero__ctas .btn:only-child {
    width: 90%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .floating-cta {
    transition: none;
  }

  
}

/* ---------- Badge (pílula "eyebrow") ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  white-space: nowrap;
  /* V3: amarelo da marca (#C199F8) translúcido + texto grafite (#494949,
     cinza de título escuro do site). Era --color-error-bg rosa clarinho
     com texto rosa. Opacidade: testados 0.18/0.3/0.24 — ficou 0.2. Sobre
     fundo rosa (.badge--glass, .benefits-scroll .badge) NÃO muda — o
     usuário preferiu manter as pílulas brancas translúcidas lá. */
  background: rgba(193, 153, 248, 0.1); /* testados 0.2 e 0.15 com o texto rosa */
  color: var(--color-primary); /* rosa (era grafite #494949, a pedido do usuário) */
  border-radius: 9999px;
  font-weight: 300;
  font-size: var(--badge-text-size);
  line-height: 1.5rem; /* Figma: 24px */
  padding: 0.375rem 1rem; /* Figma: 6px 16px */
}

/* ---------- Audience (Trabalhador CLT / Aposentados) ---------- */

.audience {
  width: 100%;
  background: var(--color-white);
}

.audience__inner {
  max-width: 90rem;
  margin: 0 auto;
  padding: var(--section-gap) var(--hero-pad-inline);
}

/* Grid real do Figma: coluna do badge (206px) + coluna dos cards (1000px),
   206+1000=1206=largura total do grupo, sem gap entre as colunas. */
.audience__grid {
  display: grid;
  grid-template-columns: 1fr;
  /* justify-items:stretch é o padrão do grid — sem isso, o badge (item da
     1ª coluna) estica pra preencher a largura toda da coluna em vez de
     ficar do tamanho do próprio conteúdo */
  justify-items: start;
  gap: var(--space-l);
}

@media (min-width: 1024px) {
  .audience__grid {
    grid-template-columns: 206fr 1000fr;
    align-items: start;
    gap: 0;
  }

  /* Escopado ao .audience__grid — a regra era ".badge" pura (sem
     escopo), então vazava esse margin-top de 9px pra TODO badge do site
     (MENOR JUROS, BENEFÍCIOS, DICAS etc.), que é exatamente o que
     desalinhava a nota em relação ao título nesses cabeçalhos (ver
     .rates__header/.benefits__intro/.tips__notes abaixo). */
  .audience__grid .badge {
    margin-top: 0.5rem; /* Figma: badge 8px abaixo do topo da linha dos cards */
  }
}

.audience__cards {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--audience-card-gap);
}

@media (min-width: 1024px) {
  .audience__cards {
    flex-direction: row;
  }
}

/* ---------- Cards "Trabalhador CLT" / "Aposentado e pensionista" (home,
   Figma nodes 4595:844 / 4595:842). Substituíram o .audience-card antigo
   (foto de fundo inteira + overlay de vidro). Card cinza 782x395 (raio 30
   no Figma, aqui o padrão 14px),
   texto à esquerda (título, pontilhado padrão, texto, botão-seta rosa) e
   foto 236x323 à direita. Sem frame mobile no Figma — pisos mobile
   escolhidos pra caber em 375px mantendo as 2 colunas. */
.audience__cards--panels {
  --audience-panel-inset: clamp(1rem, 0.56rem + 1.878vw, 2.25rem); /* 16–36px: borda do card até a foto */
  --audience-panel-pad-left: clamp(1.25rem, 0.414rem + 3.568vw, 3.625rem); /* 20–58px */
  --audience-panel-gap: clamp(1rem, 0.648rem + 1.502vw, 2rem); /* 16–32px: título→linha→texto */
  /* 136–272px. Era 236px no teto (Figma) — ~15% maior a pedido do
     usuário; piso mobile mantido (o texto já fica estreito em 375px). A
     altura acompanha (aspect-ratio da foto), então o card cresce junto. */
  --audience-panel-photo-w: clamp(8.5rem, 5.507rem + 12.77vw, 17rem);
  /* Altura da foto (e portanto do card) = a da proporção 236x323 do Figma
     sobre --audience-panel-photo-w acima (aprovada pelo usuário). A
     LARGURA da foto é esse valor x --audience-panel-photo-wide: mais
     larga sem mudar a altura (a pedido do usuário) — object-fit:cover
     recorta. Só no desktop: no mobile a coluna de texto já é estreita. */
  --audience-panel-photo-h: calc(var(--audience-panel-photo-w) * 323 / 236);
  --audience-panel-photo-wide: 1;
  gap: clamp(0.875rem, 0.347rem + 2.254vw, 2.375rem); /* 14–38px entre os 2 cards */
}

@media (min-width: 1024px) {
  /* Um card embaixo do outro (não lado a lado como o antigo), encostados
     na direita do grid, largura do Figma. */
  .audience__cards--panels {
    flex-direction: column;
    align-items: flex-end;
    --audience-panel-photo-wide: 1.3; /* 272px → ~354px de largura, mesma altura */
  }
}

.audience-panel {
  position: relative; /* referência do link esticado (.audience-panel__link::after) */
  width: 100%;
  max-width: 48.875rem; /* Figma: 782px */
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr calc(var(--audience-panel-photo-w) * var(--audience-panel-photo-wide));
  column-gap: var(--space-s);
  padding: var(--audience-panel-inset) var(--audience-panel-inset) var(--audience-panel-inset)
    var(--audience-panel-pad-left);
  background-color: #ffffff; /* Figma: #ffffff = fundo de card neutro do site */
  /* Raio padrão de card do site (14px, DESIGN-SYSTEM 7.5) — o Figma tinha
     30px, reduzido a pedido do usuário. */
  border-radius: var(--audience-card-radius);
  transition: background-color 0.3s ease;
}

/* Hover (a pedido do usuário): rosa clarinho do site (--color-error-bg,
   #f3edff). Testado antes o amarelo das pílulas (#f3edff). */
.audience-panel:hover,
.audience-panel:has(.audience-panel__link:focus-visible) {
  background-color: var(--color-error-bg);
}

.audience-panel__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 18rem; /* Figma: linha/texto de 285px */
  /* Figma: título 36px abaixo do topo da foto; botão 20px acima do fim dela. */
  padding: var(--audience-panel-inset) 0 calc(var(--audience-panel-inset) * 0.55);
}

.audience-panel__title {
  margin: 0;
  color: #5e5e5e; /* Figma */
  font-weight: 400;
  font-size: var(--audience-title-size); /* Figma: 28px */
  line-height: 1.04; /* Figma: 29px */
  letter-spacing: -0.01em; /* Figma: -0.27px */
}

.audience-panel__text {
  margin: 0;
  color: #3d3d3d; /* Figma */
  font-size: var(--audience-text-size); /* Figma: 16px */
  line-height: 1.5; /* Figma: 24px */
  /* Respiro leve à direita (a pedido do usuário) — só o texto quebra
     antes; a linha pontilhada (::before) desconta pra manter a largura. */
  padding-right: var(--space-l);
}

/* Linha pontilhada padrão entre título e texto (Figma: linha de 285px) —
   o desenho vem da regra agrupada (ver .rates__divider). */
.audience-panel__text::before {
  content: '';
  display: block;
  width: calc(100% + var(--space-l)); /* ignora o padding-right do texto */
  height: 1px;
  margin: var(--audience-panel-gap) 0;
  background-position: top left;
}

.audience-panel__link {
  display: block;
  margin-top: auto;
  padding-top: var(--audience-panel-gap);
}

/* Card inteiro clicável: o link se estica por cima do card. */
.audience-panel__link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.audience-panel__link:focus-visible {
  outline: none;
}

.audience-panel:has(.audience-panel__link:focus-visible) {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* Botão-seta exportado do Figma (círculo rosa 53px + seta branca). */
.audience-panel__arrow {
  display: block;
  width: min(3.3125rem, 2.552rem + 0.845vw); /* 44–53px — min(), não clamp: ícone em card que encolhe (DESIGN-SYSTEM 1.4) */
  height: auto;
  aspect-ratio: 1;
  transition: transform 0.2s ease;
}

.audience-panel:hover .audience-panel__arrow {
  transform: translateX(0.25rem);
}

.audience-panel__photo {
  display: block;
  width: 100%;
  height: var(--audience-panel-photo-h); /* ver --audience-panel-photo-wide */
  object-fit: cover;
  object-position: center 30%; /* recorte mais largo corta em cima/embaixo — preserva os rostos */
  border-radius: 0.875rem; /* Figma: 13.5px ≈ raio padrão de card (14px) */
}

@media (prefers-reduced-motion: reduce) {
  .audience-panel,
  .audience-panel__arrow {
    transition: none;
  }
}

/* Sobre fundo rosa/escuro continua a pílula de vidro (o usuário testou a
   amarela aqui e preferiu manter esta). */
.badge--glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(0.31875rem); /* Figma: 5.1px */
  color: var(--color-white);
}

/* TESTE (a pedido do usuário, só "NOVA REGRA" no inss.html): pílula
   branca com borda e texto no amarelo da marca. Borda via box-shadow
   inset (não border) pra não mudar a altura da pílula. Pra desfazer:
   apagar esta regra e o badge--amber do HTML. */
.badge--amber {
  background: var(--color-white);
  box-shadow: inset 0 0 0 1px var(--color-amber);
  color: var(--color-amber);
}

/* ---------- Condition cards (página CLT: "Pra quem é" / "Qual o limite?" /
   "Como é pago?", Figma node 4049:2161/4049:2185) — reaproveita
   .audience/.audience__grid/.audience__cards como wrapper, mas o item em si
   precisa de uma classe nova porque .audience-card é uma foto com overlay
   (aspect-ratio fixo, fundo de imagem) e esses cards são só texto sobre
   fundo cinza claro. Layout copiado 1:1 do Figma: ícone ancorado no canto
   superior direito (fora do fluxo do texto), bloco de texto (título/
   divisória/descrição) alinhado à esquerda, cada um com sua própria
   distância do topo do card — não é uma pilha vertical simples. */
.condition-card {
  position: relative;
  flex: 1;
  /* No mobile os cards empilham em coluna cheia (ver .audience__cards) —
     a proporção 283/312 do Figma (pensada pra 3 cards lado a lado)
     esticava a altura muito além do necessário pro conteúdo, deixando um
     vazio enorme embaixo do texto. Só trava a proporção do Figma a
     partir do breakpoint onde os cards voltam a ficar lado a lado. */
  min-height: 14rem;
  background: #ffffff; /* Colours-Acredity/neutral/50 */
  border-radius: var(--audience-card-radius);
}

@media (min-width: 1024px) {
  .condition-card {
    min-height: 0;
    aspect-ratio: 283 / 312; /* Figma: 283x312 */
  }
}

.condition-card__icon-bg {
  position: absolute;
  top: var(--audience-overlay-pad); /* Figma: 30px */
  right: var(--audience-overlay-pad); /* Figma: 30px */
  width: var(--condition-icon-size);
  height: var(--condition-icon-size);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  /* Quadrado arredondado igual às caixas de ícone do resto do site
     (.process-list__icon-bg / .steps__icon: raio 10px na caixa de 68px),
     a pedido do usuário — era círculo (50%). Em % pra acompanhar a caixa,
     que encolhe via min() em --condition-icon-size (~10px a 66px, ~7px a 48px). */
  border-radius: 15%;
}

/* Ícones Solar (24x24, quadrados) — ~36% da caixa de 66px dá os mesmos
   24px dos ícones das outras seções. % (não clamp) acompanha a caixa,
   que já encolhe via min() em --condition-icon-size. */
.condition-card__icon {
  width: 36%;
  height: 36%;
}

.condition-card__title {
  position: absolute;
  top: var(--condition-title-top); /* Figma: 70px */
  left: var(--audience-overlay-pad);
  margin: 0;
  color: #494949;
  font-weight: 400;
  font-size: var(--audience-title-size); /* Figma: 28px */
  line-height: 1;
  letter-spacing: -0.01em;
}

.condition-card__title span {
  display: block;
  color: var(--color-primary);
  font-weight: 400; /* era 500 — destaque só por cor, igual .process-list__title span (INSS) */
}

.condition-card__rule {
  position: absolute;
  top: var(--condition-rule-top); /* Figma: 157px */
  left: var(--audience-overlay-pad);
  right: var(--audience-overlay-pad);
  height: 1px;
  /* Era #d9d9d9 sólido — linha pontilhada padrão (ver .rates__divider),
     igual à página INSS. */
  background-position: top left;
}

.condition-card__desc {
  position: absolute;
  top: var(--condition-desc-top); /* Figma: 176px */
  left: var(--audience-overlay-pad);
  right: var(--audience-overlay-pad);
  margin: 0;
  color: #767676; /* era #494949 — texto de apoio padrão, igual .process-list__desc (INSS) */
  font-size: var(--audience-text-size);
  line-height: 1.5;
}

/* ---------- Terms (página CLT: seção "CONDIÇÕES", Figma node 4049:1996)
   ---------- Coluna de texto (badge+título+lista) ao lado de um card com
   gradiente animado + 3 cards de notificação flutuantes por cima — a
   pedido do usuário, o gradiente reaproveita a MESMA animação já usada em
   .connect__visual/.floating-cta (.breath-bg — 
   canvas, ver initGradientCanvas em js/script.js), em vez do PNG estático
   do Figma. */
.terms {
  width: 100%;
  background: var(--color-white);
  /* os cards de notificação transbordam a borda esquerda do card de
     gradiente de propósito (ver .terms__notification--1/--3) — sem isso
     um card muito estreito poderia empurrar a página pra rolar na
     horizontal. */
  overflow-x: hidden;
}

.terms__inner {
  max-width: 90rem;
  margin: 0 auto;
  padding: var(--section-gap) var(--hero-pad-inline);
}

.terms__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}

@media (min-width: 1024px) {
  .terms__grid {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2xl);
  }
}

.terms__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-l);
}

@media (min-width: 1024px) {
  .terms__content {
    flex: 1;
  }
}

.terms__heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-m);
}

.terms-list {
  /* Figma: a linha (386px) é mais estreita que a coluna de texto inteira
     (477px, badge+título) — 100% esticava a lista pra largura da coluna
     inteira, empurrando o ícone longe do texto. */
  width: 81%; /* 386/477 */
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Mesmo padrão de .rates__row (linha com divisória fina, sem divisória no
   último item), só trocando a cor da linha (#b3b3b3, igual ao Figma desta
   seção) e o conteúdo (texto+ícone em vez de rótulo+valor). */
.terms-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding: var(--space-s) 0;
  /* Era border-bottom sólida — linha pontilhada padrão (ver
     .rates__divider; o último item fica sem, via :not(:last-child)). */
  background-position: bottom left;
}

.terms-list__text {
  margin: 0;
  color: #767676;
  font-size: var(--rates-row-label-size); /* Figma: 20px no teto, bate exato */
  line-height: 1.3;
}

.terms-list__icon {
  flex-shrink: 0;
  width: var(--terms-list-icon-size);
  height: var(--terms-list-icon-size);
}

.terms__visual {
  position: relative;
  width: 100%;
  aspect-ratio: 306 / 459; /* Figma mobile (node 4447:856): card de gradiente 306x459 */
}

@media (min-width: 1024px) {
  .terms__visual {
    width: 42%;
    flex-shrink: 0;
    aspect-ratio: 488 / 688; /* Figma desktop: 488x688 */
    /* Figma tem um vão de ~20% da largura da seção entre a coluna de
       texto e o card de gradiente (bem mais que var(--space-2xl)) — é
       esse respiro que dá espaço pro card "Solicitação Recebida"
       (.terms__notification--1) transbordar sem invadir a lista ao lado. */
    margin-left: 10%;
  }
}

.terms__gradient-card {
  position: absolute;
  inset: 0;
  border-radius: var(--connect-radius);
  overflow: hidden;
  contain: paint;
  transform: translateZ(0);
  background: #15131c;
}

.terms__notification {
  position: absolute;
  width: 79%; /* Figma: 385px num card de 488px = ~79% */
  display: flex;
  align-items: center;
  gap: var(--space-m);
  background-image: linear-gradient(109deg, rgba(255, 255, 255, 0.18) 12.9%, rgba(153, 153, 153, 0.18) 79.4%);
  backdrop-filter: blur(0.35625rem); /* Figma: 5.7px */
  border: 1px solid rgba(245, 245, 245, 0.23);
  border-radius: var(--terms-notification-radius);
  padding: var(--space-m);
  box-shadow: -0.3125rem 0.5rem 0.575rem rgba(0, 0, 0, 0.06); /* Figma: -5px 8px 9.2px */
  /* flutuação sutil e contínua, pedida pelo usuário — duração/atraso
     diferentes por card (ver modificadores abaixo) pra não ficarem todos
     subindo/descendo em sincronia perfeita. */
  animation: terms-notification-float 5s ease-in-out infinite;
}

@keyframes terms-notification-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.75rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .terms__notification {
    animation: none;
  }
}

/* Posições em % relativas a .terms__visual (node 4049:2026/4049:2019/
   4049:2032) — os 3 cards se alternam, transbordando ora a esquerda ora
   ficando mais pra dentro, igual ao Figma. */
.terms__notification--1 {
  animation-duration: 4.6s;
  animation-delay: 0s;
}

.terms__notification--2 {
  animation-duration: 5.4s;
  animation-delay: 0.6s;
}

.terms__notification--3 {
  animation-duration: 5s;
  animation-delay: 1.2s;
}

/* Mobile (Figma node 4447:856, mockup do usuário) — cards transbordando
   a esquerda/direita do card de gradiente, igual ao Figma. A causa real
   da sobreposição não era a posição em si: era a fonte em rem fixo
   (0.76rem) não encolher em telas mais estreitas que a referência de
   393px — o texto quebrava em mais linhas do que cabia no vão entre os
   cards. Corrigido usando um tamanho que escala com a tela (mesma regra
   de --audience-text-size), igual a todo o resto do site. */
@media (max-width: 1023px) {
  .terms__notification {
    width: 96%;
    padding: var(--space-xs) var(--space-s);
    gap: var(--space-xs);
  }

  .terms__notification--1 {
    left: 14%;
    top: 38%;
  }

  .terms__notification--2 {
    left: -14.4%;
    top: 9%;
  }

  .terms__notification--3 {
    left: -8.8%;
    top: 67%;
  }

  .terms__notification-title,
  .terms__notification-desc {
    font-size: calc(var(--audience-text-size) * 0.82); /* Figma: 12.2px no teto */
  }

  .terms__notification-title {
    line-height: 1.25;
  }

  .terms__notification-desc {
    line-height: 1.45;
  }
}

/* Desktop (Figma node 4049:1996) — os 3 cards se alternam, transbordando
   ora a esquerda ora ficando mais pra dentro, igual ao Figma. */
@media (min-width: 1024px) {
  .terms__notification--1 {
    left: -20.75%;
    top: 13.4%;
  }

  .terms__notification--2 {
    left: 20.9%;
    top: 39.8%;
  }

  .terms__notification--3 {
    left: -20.9%;
    top: 66%;
  }
}

.terms__notification-icon {
  flex-shrink: 0;
  width: var(--terms-notification-icon-size);
  height: var(--terms-notification-icon-size);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.6875rem; /* Figma: 11px */
  background-image: linear-gradient(52deg, #d71a85 54.4%, #C199F8 118.9%);
}

/* Ícones Solar vêm rosa — força branco sobre o gradiente. */
.terms__notification-icon img {
  width: 45%;
  height: 45%;
  filter: brightness(0) invert(1);
}

.terms__notification-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.terms__notification-title {
  margin: 0;
  color: var(--color-white);
  font-weight: 700;
  font-size: var(--audience-text-size);
  letter-spacing: -0.02em;
}

.terms__notification-desc {
  margin: 0;
  color: var(--color-white);
  font-size: var(--audience-text-size);
  line-height: 1.4;
}

/* ---------- Showcase (página CLT: seção "VANTAGENS", Figma node
   4434:849) — mesmo texto/copy do badge "VANTAGENS" do .connect da home
   ("Conectamos você às melhores opções de crédito..."), mas layout
   diferente: foto ao lado (não gradiente) e parágrafo com 3 trechos em
   negrito rosa (a home não tem esse destaque) — por isso não reaproveita
   .connect__title/.connect__paragraph, só os tokens de tamanho que batem
   exato (--connect-title-size, --rates-row-label-size). */
.showcase {
  width: 100%;
  background: var(--color-white);
}

.showcase__inner {
  max-width: 90rem;
  margin: 0 auto;
  padding: var(--section-gap) var(--hero-pad-inline);
}

.showcase__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}

@media (min-width: 1024px) {
  .showcase__grid {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2xl);
  }
}

.showcase__photo-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 590 / 712; /* Figma: 590x712 */
  border-radius: var(--audience-card-radius);
  overflow: hidden;
}

@media (min-width: 1024px) {
  .showcase__photo-frame {
    width: 49%;
    flex-shrink: 0;
  }
}

.showcase__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%; /* Figma: object-bottom (recorte focado nos rostos, no topo da foto) */
}

.showcase__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-m);
}

@media (min-width: 1024px) {
  .showcase__content {
    flex: 1;
    /* respiro extra pedido pelo usuário — o texto ficava colado na foto,
       só o gap do .showcase__grid não era suficiente. */
    padding-right: var(--space-2xl);
  }
}

.showcase__title {
  margin: 0;
  font-weight: 400;
  font-size: var(--connect-title-size); /* Figma: 56px, bate exato */
  line-height: 1;
  letter-spacing: -0.05em;
}

.showcase__title--muted {
  color: #858585; /* era #979797 — mesmo cinza do .section-title--muted */
}

.showcase__title--dark {
  color: #212121; /* Colours-Acredity/neutral/900 */
}

.showcase__text {
  margin: 0;
  /* Mesma tipografia do .rule-change__text (INSS, mesmo layout foto +
     texto) — era #212121 com line-height 1.65. */
  color: #767676;
  font-size: var(--rates-row-label-size); /* Figma: 20px no teto, bate exato */
  line-height: 1.3;
  letter-spacing: -0.036em;
}

/* ---------- Process (página CLT: seção "COMO FAZ?", Figma node
   4049:1941) — diferente do .steps da home (lista numerada horizontal):
   aqui é coluna de texto + pilha vertical de 4 cards cinza, cada um com
   ícone (já vem com o círculo branco embutido no SVG, não precisa de
   wrapper) ancorado no canto superior direito. */
.process {
  width: 100%;
  background: var(--color-white);
}

.process__inner {
  max-width: 90rem;
  margin: 0 auto;
  padding: var(--section-gap) var(--hero-pad-inline);
}

.process__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}

@media (min-width: 1024px) {
  .process__grid {
    flex-direction: row;
    gap: var(--space-2xl);
  }
}

.process__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-m);
}

/* position:sticky só faz sentido no layout de 2 colunas do desktop (texto
   fixo na coluna esquerda enquanto os cards passam na direita) — mesmo
   padrão de .steps__intro na home. No mobile o .process__grid empilha em
   coluna única, então sticky ali grudaria o texto por cima dos cards. */
@media (min-width: 1024px) {
  .process__content {
    flex: 1;
    position: sticky;
    /* Mesmo ajuste do .steps__intro (era var(--space-xl), curto demais —
       ver comentário lá): sobe pra 9rem pra nunca ficar preso embaixo do
       .nav fixo enquanto os cards passam por baixo. */
    top: 9rem;
    align-self: flex-start;
  }
}

.process__note {
  margin: 0;
  color: var(--color-black);
  font-size: var(--audience-text-size);
  line-height: 1.5;
}

.process-list {
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  /* Era var(--space-m) (~24-27px) — bem menor que o gap entre os cards
     do .steps__list (var(--steps-card-gap), ~64-72px) na home, mesmo
     padrão visual de "lista de cards verticais". Padronizado pro mesmo
     token a pedido do usuário. */
  gap: var(--steps-card-gap);
}

@media (min-width: 1024px) {
  .process-list {
    width: 50%;
    flex-shrink: 0;
  }
}

.process-list__item {
  position: relative;
  background: #ffffff;
  border-radius: 0.875rem; /* Figma: 14px */
  /* Padding medido nos 4 cards do Figma (node 4049:1941): esquerda 105px
     / topo 73px / direita ~24px / baixo 42px de um card de 591x244 — mais
     que os tokens genéricos de "respiro" do resto do site
     (--audience-overlay-pad, 18–32px), por isso token dedicado. Baixo
     igualado ao topo (--process-card-pad-top nos dois) a pedido do
     usuário — no Figma o baixo era menor (42px vs 73px), ficava com mais
     respiro em cima do que embaixo do texto. */
  padding: var(--process-card-pad-top) var(--process-card-pad-right)
    var(--process-card-pad-top) var(--process-card-pad-left);
  display: flex;
  flex-direction: column;
}

/* Caixa do ícone: mesma caixa padrão de "Vantagens"/"Benefícios" (ver
   .opportunity-card__icon — tamanho/raio/borda vêm de lá, regra
   compartilhada), a pedido do usuário. Aqui só muda: borda cinza (fundo
   do card é claro) e ícone mantém o rosa original (sem o filtro branco).
   Era um círculo branco de min(4.1875rem, 12.8vw). */
.process-list__icon-bg {
  position: absolute;
  top: var(--process-icon-inset); /* Figma: 24px */
  right: var(--process-icon-inset);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Exceções à caixa padrão — seletor com 2 classes de propósito: a regra
   compartilhada (.opportunity-card__icon, …) vem DEPOIS no arquivo, então
   com a mesma especificidade ela venceria e voltaria borda/ícone branco. */
.process-list__item .process-list__icon-bg {
  /* Mais clarinho e menos arredondado só nesta seção (a pedido do
     usuário) — era #b3b3b3 e o raio padrão 0.875rem. */
  /* Sem borda (a pedido do usuário) — só o quadrado branco sobre o card
     cinza. Era 1px solid #d9d9d9. */
  border: none;
  border-radius: 0.625rem; /* 10px */
  background: var(--color-white); /* fundo branco sobre o card cinza (a pedido do usuário) */
  filter: none;
  /* Ícone menor só nesta seção (a pedido do usuário): caixa continua
     4.25rem/68px, ícone Solar 1.5rem/24px (4.25 − 2 × 1.375). */
  padding: 1.375rem;
}

/* Mobile (bug reportado pelo usuário: ícones grandes demais) — a caixa de
   68px foi pensada pro card largo do desktop; no card estreito do
   celular ela dominava o card e encostava no título. Caixa 3rem/48px,
   ícone 1.25rem/20px (3 − 2 × 0.875), mesma proporção visual. */
@media (max-width: 1023px) {
  /* 3 classes de propósito — precisa vencer a regra de 2 classes acima
     (padding 1.375rem), senão o ícone ficaria com ~4px. */
  .process-list .process-list__item .process-list__icon-bg {
    width: 3rem;
    height: 3rem;
    padding: 0.875rem;
    border-radius: 0.5rem;
  }
}

/* (Histórico) Os SVGs vieram do Figma com o círculo branco já embutido;
   separei o glifo num arquivo à parte (sem o círculo) pra poder reduzir
   só ele, mantendo o círculo no
   tamanho original. */
.process-list__icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Ícone da carteira (icon-receive-credit.svg) veio do Figma recortado
   rente ao desenho (sem a folga em volta que os outros 3 SVGs têm
   dentro do próprio viewBox) — nos mesmos 65% ele fica visivelmente
   maior que os demais dentro do círculo. Encolhido só esse pra igualar
   o tamanho aparente do glifo, não o "% da caixa". */
.process-list__icon--tight {
  /* Recortado rente ao desenho (sem margem interna, ver acima) — tamanho
     do glifo igualado aos outros 3 (~22px). */
  width: 1.375rem;
  height: 1.375rem;
}

.process-list__title {
  /* mesmo respiro dos dois lados da linha (pedido do usuário) — era 9px
     aqui contra 16px depois da linha, ficava desproporcional. */
  margin: 0 0 var(--space-s);
  /* Figma: título/divisória/descrição não ocupam a caixa toda — a
     divisória mede 345.9px dentro de um conteúdo útil de 462px (card
     591px menos os paddings esquerda/direita), ou seja, ~75% do
     conteúdo. Sem isso a linha ia até quase embaixo do ícone (que fica
     fora do fluxo, ancorado no canto), ficando com uma sobra visual
     esquisita. */
  max-width: 75%;
  color: #494949;
  font-weight: 400;
  font-size: var(--steps-text-size); /* Figma: 24px, bate no teto */
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.process-list__title span {
  color: var(--color-primary);
  font-weight: 400;
}

.process-list__rule {
  display: block;
  width: 75%; /* Figma: 345.9px de 462px de conteúdo útil */
  height: 1px;
  margin-bottom: var(--space-s); /* Figma: 16px até a descrição */
  /* Era background:#b3b3b3 sólido — agora linha pontilhada padrão (ver
     .rates__divider), a pedido do usuário. */
  background-position: top left;
}

.process-list__desc {
  margin: 0;
  max-width: 75%; /* Figma: 347.9px de 462px de conteúdo útil */
  color: #767676;
  font-size: var(--audience-text-size); /* Figma: 16px, bate no teto */
  line-height: 1.5;
}

/* ---------- Connect (gradiente animado no lugar do vídeo do Figma) ---------- */

.connect {
  width: 100%;
  background: var(--color-white);
}

.connect__inner {
  max-width: 90rem;
  margin: 0 auto;
  padding: var(--section-gap) var(--hero-pad-inline);
}

.connect__visual {
  position: relative;
  width: 100%;
  border-radius: var(--connect-radius);
  overflow: hidden;
  /* Força o recorte de verdade: sem isso, um filho com filter:blur() maior
     que o container pode vazar pra fora do border-radius em vez de ser
     recortado (bug conhecido de Chrome/Safari com overflow:hidden+filter). */
  contain: paint;
  transform: translateZ(0);
  /* Cor de base já é uma das 2 cores certas — se o gradiente não cobrir um
     pixel por algum motivo, o pior caso ainda é a cor certa, nunca uma zona
     "morta" estranha. */
  background: #15131c;
}

@media (min-width: 1024px) {
  .connect__visual {
    /* proporção larga/baixa real do Figma (1204x623) — só faz sentido em
       telas largas. No mobile, empilhado (badge+título+parágrafo) precisa
       de bem mais altura que essa proporção permite; forçá-la lá cortava
       o texto, já que o container tem overflow:hidden. */
    aspect-ratio: 1204 / 623;
  }
}

.connect__content {
  /* mobile: fica no fluxo normal (não absolute) — o conteúdo dita a altura
     do card em vez de ficar espremido/cortado numa aspect-ratio de banner
     largo. As camadas de fundo (gradiente/canvas) continuam absolute
     inset:0 preenchendo essa altura normalmente. */
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  /* 1.5x (metade a mais) o padding padrão de seção, a pedido do usuário —
     só nesse card, por isso multiplicado aqui em vez de mudar
     --hero-pad-top/--hero-pad-inline (reusados em várias outras seções).
     Mesmo valor nos 4 lados (baseado só em --hero-pad-inline) — usar
     --hero-pad-top pro vertical deixava topo/base bem menor que as
     laterais (são tokens de escalas bem diferentes, 16–39px vs 32–110px). */
  padding: calc(var(--hero-pad-inline) * 1.5);
}

@media (min-width: 1024px) {
  .connect__content {
    position: absolute;
    inset: 0;
  }
}

.connect__text-row {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

@media (min-width: 1024px) {
  .connect__text-row {
    flex-direction: row;
    /* Era center — como o parágrafo é bem mais curto que o título (4
       linhas grandes), centralizar os dois deixava o parágrafo com o
       topo mais alto que o do título. flex-start alinha os dois pelo
       topo, a pedido do usuário. */
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2xl);
  }
}

/* Badge "VANTAGENS" + título agrupados (Figma node 4061:943 + 4061:941).
   No mobile ficam à esquerda, junto com o texto — só no desktop viram
   os dois alinhados à direita (igual ao Figma original), ver
   @media(min-width:1024px) abaixo. */
.connect__heading {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-m);
}

.connect__title {
  flex: 1;
  margin: 0;
  color: var(--color-white);
  font-weight: 400;
  font-size: var(--connect-title-size);
  line-height: 1;
  letter-spacing: -0.02em;
}

@media (min-width: 1024px) {
  .connect__heading {
    align-items: flex-end;
  }

  .connect__title {
    text-align: right;
  }
}

.connect__paragraph {
  flex: 1;
  margin: 0;
  color: var(--color-white);
  font-size: var(--audience-text-size);
  /* 2.4375 (extraído do Figma) só faz sentido no card curto/largo do
     desktop (aspect-ratio fixo, poucas linhas) — no mobile o texto quebra
     em bem mais linhas e esse espaçamento vira um vão gigante entre elas,
     inflando a seção toda sem necessidade. */
  line-height: 1.6;
}

@media (min-width: 1024px) {
  .connect__paragraph {
    line-height: 2.4375;
    /* Esquerda a pedido do usuário (tinha ficado direita antes, imitando
       o .section-note da seção "Menor juros" — mas aqui não era o que
       queria). */
    text-align: left;
    /* .connect__text-row usa align-items:flex-start (alinha pelo topo do
       .connect__heading, que é o badge "VANTAGENS", não o título). Esse
       respiro empurra o parágrafo pra baixo até o TOPO DO TÍTULO —
       altura do badge (2.25rem: line-height 1.5rem + padding 0.375rem
       de cada lado) + o gap entre badge/título (--space-m). */
    margin-top: calc(2.25rem + var(--space-m));
  }
}

/* ---------- Rates ("Um crédito que respeita você e o seu bolso") ---------- */

.rates {
  width: 100%;
  background: var(--color-white);
}

.rates__inner {
  max-width: 90rem;
  margin: 0 auto;
  padding: var(--section-gap) var(--hero-pad-inline);
}

.rates__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}

@media (min-width: 1024px) {
  .rates__header {
    flex-direction: row;
    justify-content: space-between;
    /* Topo alinhado com o topo do título (era flex-end) — a pedido do
       usuário: a nota à direita precisa começar exatamente na mesma
       linha da primeira linha do título à esquerda, não colada na base. */
    align-items: flex-start;
    gap: var(--space-2xl);
  }
}

.rates__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-m);
}

/* Título/nota em duas cores reaproveitados em qualquer seção nesse mesmo
   padrão (Menos juros, Benefícios etc.) — não duplicar por seção. */
.section-title {
  margin: 0;
  color: var(--color-black);
  font-weight: 400;
  font-size: var(--connect-title-size);
  line-height: 1;
  letter-spacing: -0.05em;
}

.section-title--muted {
  color: #858585;
}

.section-title--dark {
  color: #212121;
}

.section-note {
  flex-shrink: 0;
  max-width: 20rem;
  margin: 0;
  color: var(--color-black);
  font-size: var(--audience-text-size);
  line-height: 1.5;
}

@media (min-width: 1024px) {
  .section-note {
    text-align: right;
  }

  /* align-items:flex-start no .rates__header/.benefits__intro só alinha
     o TOPO do bloco badge+título (a nota fica no nível do badge, que vem
     antes do título) — o usuário quer a nota alinhada com o TÍTULO em
     si, não com o badge. Empurra a nota pra baixo pela altura do badge
     (.badge: line-height 1.5rem + padding 0.375rem*2 = 2.25rem, fixo,
     não depende de clamp) + o gap entre badge e título de cada bloco. */
  .rates__header .section-note {
    margin-top: calc(2.25rem + var(--space-m)); /* gap: .rates__intro */
  }

  .benefits__intro .section-note {
    margin-top: calc(2.25rem + var(--space-xs)); /* gap: .benefits__heading */
  }
}

/* Era .rates__note strong — essa classe não existe no HTML (o parágrafo
   usa .section-note, compartilhado com "Benefícios"), então a regra
   nunca batia com nada e o bold saía preto (herdado) em vez de rosa. */
/* Palavra destacada em texto corrido: só a cor muda, peso continua 400
   (padrão da página INSS — .rule-change__text/.tips__card-text strong).
   O <strong> vinha em negrito (700 do navegador) nas outras páginas. */
.section-note strong,
.rates__source strong,
.terms-list__text strong,
.showcase__text strong,
.steps__text strong {
  color: var(--color-primary);
  font-weight: 400;
}

/* ---------- Linha pontilhada padrão (a pedido do usuário: padronizar em
   todas as seções) — traço 3px / vão 3px, 1px de altura, desenhada via
   background (não border-style:dotted, que vira bolinha redonda e muda
   de navegador pra navegador). Cor via --dotted-line-color, lida no
   PRÓPRIO elemento (fallback cinza Colours-Acredity/neutral/200), então
   cada uso sobrescreve só a variável (ex.: branco sobre fundo escuro).
   background-position fica por conta de cada elemento (top/bottom). Em
   px (hairline, seção 1.3 do design system). */
.rates__divider,
.benefits__divider,
.margin-table__head,
.rates__table--pill .rates__table-head,
.opportunity-card__item + .opportunity-card__item,
.tips__card + .tips__card,
.tips__card-text::before,
.opportunity-card__desc::before,
.about__text::before,
.audience-panel__text::before,
.blog-date,
.blog-highlights__title,
.mag-label,
.mag-topbar,
.mag-list__item:not(:last-child),
.mag-feat__item:not(:last-child),
.mag-row:not(:last-child),
.blog-highlights__item:not(:last-child),
.post__meta,
.post-checklist li:not(:last-child),
.process-list__rule,
.faq__item,
.condition-card__rule,
.benefit-card__rule,
.terms-list__item:not(:last-child),
.rates__row:not(:last-child) {
  background-image: repeating-linear-gradient(
    to right,
    var(--dotted-line-color, #b3b3b3) 0,
    var(--dotted-line-color, #b3b3b3) 3px,
    transparent 3px,
    transparent 6px
  );
  background-size: 100% 1px;
  background-repeat: repeat-x;
}

.rates__divider {
  margin: var(--space-l) 0 0;
  border: none;
  height: 1px; /* hr sem borda — a altura é a própria linha pontilhada */
  background-position: top left;
}

.rates__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  margin-top: var(--space-l);
}

@media (min-width: 1024px) {
  .rates__body {
    flex-direction: row;
    /* a tabela é mais baixa que a imagem — centraliza os dois em vez de
       colar tudo no topo e sobrar espaço vazio embaixo da tabela */
    align-items: center;
    gap: var(--space-2xl);
  }
}

/* Moldura separada da <img> (mesmo padrão do .hero__card/.hero__bg e do
   .audience-card/.audience-card__bg): quem reserva o espaço no
   .rates__body, tem o overflow:hidden e o border-radius é o frame — a
   <img> dentro dele é quem vira position:fixed via initPinnedImage() pro
   efeito "foto parada no scroll". */
.rates__image-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 567 / 666; /* Figma (node 4301:550): recorte mais fechado */
  border-radius: var(--audience-card-radius);
  overflow: hidden;
}

@media (min-width: 1024px) {
  .rates__image-frame {
    width: 40%;
  }
}

.rates__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rates__table {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

@media (min-width: 1024px) {
  .rates__table {
    flex: 1;
  }
}

/* Grid de 2 colunas (rótulo | valor) compartilhado pelas linhas e pelas
   caixas "Taxa de juros"/"Fonte" — no Figma nenhuma das duas caixas ocupa
   a largura toda: "Taxa de juros" fica só na coluna direita (acima dos
   valores), "Fonte" só na coluna esquerda (abaixo dos rótulos). */
.rates__table-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-m);
}

.rates__table-grid--head .rates__table-head {
  grid-column: 2;
  width: 100%;
}

.rates__table-grid--foot .rates__source {
  grid-column: 1;
}

.rates__table-head {
  background: #ffffff;
  border-radius: 0.875rem; /* Figma: 14px */
  padding: var(--space-s) var(--space-m);
  text-align: center;
}

.rates__table-head-title {
  margin: 0;
  color: var(--color-primary);
  font-weight: 700;
  font-size: var(--rates-row-label-size);
}

.rates__table-head-sub {
  margin: 0;
  color: #767676;
  font-weight: 300;
  font-size: var(--audience-text-size);
}

.rates__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rates__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-m);
  padding: var(--space-s) 0;
  /* Era border-bottom #d9d9d9 sólida — linha pontilhada padrão (ver
     .rates__divider; o último item fica sem, via :not(:last-child)). */
  background-position: bottom left;
}

.rates__row-label {
  color: #979797;
  font-size: var(--rates-row-label-size);
}

.rates__row-value {
  color: #494949;
  font-weight: 700;
  font-size: var(--rates-row-value-size);
  letter-spacing: -0.01em;
  /* centralizado sob "Taxa de juros" acima, não colado na borda direita */
  text-align: center;
}

.rates__row--highlight .rates__row-label,
.rates__row--highlight .rates__row-value {
  color: var(--color-primary);
}

.rates__source {
  background: #ffffff;
  border-radius: 0.875rem; /* Figma: 14px */
  padding: var(--space-s) var(--space-m);
}

.rates__source p {
  margin: 0;
  color: #858585;
  font-size: var(--audience-text-size);
  line-height: 1.5;
}

/* Variação com a identidade da tabela do INSS (.margin-table), a pedido
   do usuário — aplicada na página CLT (mesmo conteúdo, só muda o visual):
   linhas viram pílulas cinza de 14px com 9px entre elas, cabeçalho sem
   caixa (texto rosa Light + linha pontilhada embaixo), valores sem
   negrito. Cabeçalho, linhas e fonte usam o MESMO padding lateral da
   pílula (--margin-table-pad do INSS, 31px) pra colunas alinharem. */
.rates__table--pill {
  --rates-pill-pad: 1.9375rem; /* = --margin-table-pad */
}

.rates__table--pill .rates__table-grid {
  padding-inline: var(--rates-pill-pad);
}

.rates__table--pill .rates__table-head {
  background-color: transparent;
  background-position: bottom left;
  border-radius: 0;
  padding: 0 0 0.5rem;
}

.rates__table--pill .rates__table-head-title {
  font-weight: 300; /* igual .margin-table__head (era bold) */
  line-height: 0.95;
  letter-spacing: -0.008em;
}

.rates__table--pill .rates__table-head-sub {
  font-weight: 400;
  font-size: 0.625rem; /* igual .margin-table__head-sub */
  line-height: 1.9;
}

.rates__table--pill .rates__list {
  display: flex;
  flex-direction: column;
  gap: 0.5625rem; /* 9px, igual .margin-table__table */
}

.rates__table--pill .rates__row {
  background: #ffffff; /* troca a linha pontilhada pela pílula */
  border-radius: 0.875rem;
  padding: 1.25rem var(--rates-pill-pad);
}

.rates__table--pill .rates__row-value {
  color: #1d1d1d; /* igual .margin-table__cell--result */
  font-weight: 400; /* sem negrito, a pedido do usuário */
}

.rates__table--pill .rates__row--highlight .rates__row-value {
  color: var(--color-primary);
}

.rates__table--pill .rates__source {
  background: none;
  padding: 0;
}

/* ---------- Steps ("Veja como é fácil contratar na Acredity") ---------- */

.steps {
  width: 100%;
  background: var(--color-white);
}

.steps__inner {
  max-width: 90rem;
  margin: 0 auto;
  padding: var(--section-gap) var(--hero-pad-inline);
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}

@media (min-width: 1024px) {
  .steps__inner {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-2xl);
  }
}

/* Coluna da esquerda gruda no topo da viewport enquanto os cards da
   direita rolam por baixo dela — pedido explícito: "todo texto a
   esquerda é sticky" (mesmo comportamento do protótipo no Figma,
   que já vinha com sticky top-0 nos elementos dessa coluna). */
.steps__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-m);
}

/* position:sticky só faz sentido no layout de 2 colunas do desktop (intro
   fixo na coluna esquerda enquanto os cards passam na direita). No mobile
   o .steps__inner empilha em coluna única — aplicar sticky ali gruda o
   título no topo por cima dos cards que rolam por baixo, sobrepondo os
   dois (bug real visto testando em 375px). */
@media (min-width: 1024px) {
  .steps__intro {
    width: 40%;
    position: sticky;
    /* Era var(--space-xl) (~3.375rem/54px) — bem menos que a altura do
       .nav fixo (~8.1rem, medido: 146px do topo da viewport) — a pedido
       do usuário, sobe o "top" da fixação pra 9rem (mesma folga usada em
       .benefits-scroll__sticky) pra esse título nunca ficar preso embaixo
       do menu enquanto o resto da seção rola por baixo dele. */
    top: 9rem;
    align-self: flex-start;
  }
}

.steps__title {
  margin: 0;
  color: #858585;
  font-weight: 400;
  font-size: var(--connect-title-size);
  line-height: 1;
  letter-spacing: -0.05em;
}

.steps__title-strong {
  color: var(--color-black);
}

.steps__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--steps-card-gap);
}

@media (min-width: 1024px) {
  .steps__list {
    flex: 1;
  }
}

.steps__card {
  display: flex;
  align-items: center;
  background: #ffffff;
  border-radius: 0.875rem; /* Figma: 14px */
  /* padding assimétrico real do Figma — não usar var(--space-l) simétrico */
  padding-block: var(--steps-card-pad-block);
  padding-left: var(--steps-card-pad-left);
  padding-right: var(--steps-card-pad-right);
}

/* Base = left só no mobile, a pedido do usuário — no desktop continua
   simétrico (padding-block acima cobre topo e base igual). */
@media (max-width: 1023px) {
  .steps__card {
    padding-bottom: var(--steps-card-pad-left);
  }
}

.steps__text {
  flex: 1;
  margin: 0;
  margin-right: var(--steps-text-divider-gap);
  color: #767676;
  font-size: var(--steps-text-size);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

/* Padding-right pra forçar a quebra em 3 linhas e fonte fixa em 16px —
   só no mobile (era global por engano, e no desktop o texto ficava preso
   em 16px em vez de crescer com --steps-text-size normal). */
@media (max-width: 1023px) {
  .steps__text {
    padding-right: 1.75rem;
    /* Fixo (não var(--steps-text-size), compartilhado com .faq__question)
       a pedido do usuário. */
    font-size: 1rem;
  }
}

/* No desktop, tamanho/cor iguais aos rótulos da tabela "Menor juros"
   (.rates__row-label) — a pedido do usuário, que considerou aquele o
   padrão ideal. Só desktop; o mobile mantém o ajuste próprio acima. */
@media (min-width: 1024px) {
  .steps__text {
    color: #979797;
    font-size: var(--rates-row-label-size);
    /* Mesma ideia do padding-right do mobile (força quebra em mais
       linhas em vez do texto esticar numa linha só) — a pedido do
       usuário, agora também no desktop. */
    padding-right: 6rem;
  }
}

.steps__divider {
  flex-shrink: 0;
  align-self: center;
  width: 1px;
  height: var(--steps-divider-height);
  margin-right: var(--steps-divider-icon-gap);
  /* Era #d9d9d9 sólido — mesmo pontilhado padrão (ver .rates__divider),
     só que na vertical (única divisória em pé do site). */
  background-image: repeating-linear-gradient(to bottom, #b3b3b3 0, #b3b3b3 3px, transparent 3px, transparent 6px);
  background-size: 1px 100%;
  background-repeat: repeat-y;
}

.steps__icon {
  flex-shrink: 0;
  box-sizing: border-box;
  /* Quadrado arredondado branco com o ícone Solar dentro — mesma caixa do
     "Como faz?" da página INSS (.process-list__item .process-list__icon-bg):
     68px, raio 10px, ícone 24px (4.25 − 2 × 1.375). Era um círculo. */
  width: 4.25rem;
  height: 4.25rem;
  padding: 1.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.625rem; /* 10px */
  background: var(--color-white);
}

.steps__icon img {
  width: 100%;
  height: 100%;
}

/* Mobile — mesma redução do INSS: caixa 48px, raio 8px, ícone 20px. */
@media (max-width: 1023px) {
  .steps__icon {
    width: 3rem;
    height: 3rem;
    padding: 0.875rem;
    border-radius: 0.5rem;
  }
}

/* ---------- Benefits intro ("Por que a Acredity é diferentes") ----------
   Fica dentro do container sticky (junto com os cards) — ver
   .benefits-scroll__sticky — pra preencher os 100vh inteiros sem sobrar
   espaço em branco embaixo do título quando a seção prende o scroll. */

.benefits__intro {
  /* position:relative (a pedido do usuário — título/nota tinham
     "sumido"): .breath-bg dentro de .benefits-scroll__
     sticky são position:absolute, e elemento posicionado pinta por cima
     de conteúdo em fluxo normal SEM position, não importa a ordem no
     DOM (mesmo motivo documentado em .opportunity__content). Sem isso
     aqui, o gradiente cobria o título/badge/nota inteiros. */
  position: relative;
  max-width: 90rem;
  width: 100%;
  margin: 0 auto;
  padding-inline: var(--hero-pad-inline);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-m);
}

@media (min-width: 1024px) {
  .benefits__intro {
    flex-direction: row;
    justify-content: space-between;
    /* Topo alinhado com o topo do título (era flex-end, que colava a
       nota na base — pedido anterior do usuário) — agora, a pedido
       explícito do usuário, a nota à direita tem que começar exatamente
       na mesma linha da 1ª linha do título à esquerda, igual o
       .rates__header (seção "Menor juros") e o .tips__header (seção
       "DICAS"), que já usam flex-start. As 3 seções devem ficar
       idênticas nesse padrão. */
    align-items: flex-start;
  }
}

/* Badge + título ficam agrupados (badge em cima, título embaixo) como uma
   unidade só — no Figma são o mesmo grupo (Group 16288), não itens soltos
   de uma linha flex ao lado da nota. */
.benefits__heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
}

/* TESTE do usuário (reversível, ver .benefits-scroll acima): título/nota
   brancos por cima do fundo rosa — sobrescreve só aqui as classes
   compartilhadas .section-title/--muted/--dark/.section-note, que nas
   outras seções continuam pretas/cinzas (fundo branco). */
.benefits-scroll .section-title,
.benefits-scroll .section-title--muted,
.benefits-scroll .section-title--dark {
  color: var(--color-white);
}

.benefits-scroll .section-note {
  color: rgba(255, 255, 255, 0.85);
}

/* Sobre o rosa: pílula branca translúcida (não a amarela do .badge). */
.benefits-scroll .badge {
  background: rgba(255, 255, 255, 0.16);
  color: var(--color-white);
}

.benefits__divider {
  /* Precisa reproduzir o mesmo box do .benefits__intro (max-width 90rem
     centralizado + padding-inline hero-pad-inline por dentro), já que hr
     não tem padding "visível" — border-top desenha na borda do border-box
     inteiro, então o inset em relação à borda tem que vir de width/margin,
     não de padding-inline (que não move a linha). */
  max-width: calc(90rem - 2 * var(--hero-pad-inline));
  width: calc(100% - 2 * var(--hero-pad-inline));
  margin-inline: auto;
  border: none;
  height: 1px; /* linha pontilhada padrão, ver .rates__divider */
  background-position: top left;
  /* position:relative — mesmo motivo do .benefits__intro acima (fica
     por cima do gradiente animado, que é position:absolute). */
  position: relative;
}

/* TESTE do usuário (reversível, ver .benefits-scroll acima) — linha cinza
   ficaria com pouquíssimo contraste sobre o fundo rosa sólido. */
.benefits-scroll .benefits__divider {
  --dotted-line-color: rgba(255, 255, 255, 0.3);
}

/* ---------- Benefits horizontal scroll ---------- */

/* Altura real é definida via JS (js/script.js) proporcional à largura do
   trilho de cards, pra converter scroll vertical em deslocamento horizontal. */
.benefits-scroll {
  position: relative;
  /* TESTE do usuário (reversível) — era #ffffff (cinza claro). Rosa =
     mesma cor sólida usada como base do gradiente animado da barra
     flutuante (.floating-cta) logo abaixo, var(--color-primary)/#15131c.
     Título/nota/badge/divisória/barra de progresso abaixo têm overrides
     escopados só pra esta seção (não mexem nas classes compartilhadas
     .section-title etc., usadas em fundo branco nas outras seções). */
  background: var(--color-primary);
  /* Diferente das outras seções (padding-top/bottom var(--section-gap) no
     wrapper interno), esta usa height:100dvh + centralização vertical pro
     efeito de scroll-jack, então não tinha NENHUM respiro antes/depois —
     ficava colada em "steps" e no "FAQ" enquanto todo o resto do site tem
     216px (108+108) de vão entre seções. Mesmo recurso que o .hero já usa
     (margin em vez de padding, já que aqui a altura é 100dvh controlada
     via JS) pra igualar o mesmo respiro do resto do site. */
  margin-block: var(--section-gap);
}

.benefits-scroll__sticky {
  position: sticky;
  top: 0;
  /* A barra fixa "Simule seu empréstimo" (.floating-cta) agora SOME
     enquanto esta seção está na tela (ver initFloatingCta em
     js/script.js) — a pedido do usuário, em vez de reservar espaço pra
     ela, então não precisa mais descontar altura nenhuma dela aqui. */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Era justify-content:center — com o conteúdo centralizado, o título
     ficava perto/embaixo da barra flutuante do menu (.nav, position:
     fixed, ~8.1rem de altura+respiro do topo) em telas mais baixas.
     flex-start + padding-top empurra o conteúdo pra baixo de forma
     previsível (a pedido do usuário — "abaixar o conteúdo"), sem
     depender de sobrar espaço suficiente pra centralização "afastar"
     o título da barra sozinha. */
  justify-content: flex-start;
  padding-top: 9rem; /* Figma/medido: .nav termina em ~8.1rem do topo */
  /* Era --space-2xl (~4rem, pensado pro respiro do desktop bem alto) —
     reduzido pra --space-m: em telas mais baixas (mobile OU notebook),
     título+2 gaps+card não cabiam nos 100dvh, sobrando pouquíssimo
     espaço visível pro card. */
  gap: var(--space-m);
}

.benefits-scroll__track {
  /* position:relative — mesmo motivo do .benefits__intro acima (fica
     por cima do gradiente animado, que é position:absolute). */
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--benefit-card-gap);
  /* Mesmo recuo esquerdo do título (.benefits__intro: max-width:90rem +
     margin:auto + padding-inline), mas via padding-left calculado em vez
     de max-width/margin-inline:auto — o track tem conteúdo (4 cards)
     mais largo que 90rem, então com flex-shrink:0 nos cards ele sempre
     TRANSBORDA seu próprio max-width; margin-inline:auto nesse cenário
     ainda assim reserva a margem "auto" de cada lado (baseada no
     max-width, não no conteúdo real), deslocando a caixa toda pra
     direita — e o cálculo de distance no JS (scrollWidth - stickyWidth)
     não sabe dessa margem extra, cortando o ÚLTIMO card pra fora da tela
     no fim do scroll (~462px, mesmo valor da margem). padding-left puro
     não tem esse problema: conta certinho dentro de scrollWidth. */
  padding-left: calc((100% - min(90rem, 100%)) / 2 + var(--hero-pad-inline));
  will-change: transform;
}

/* Grudada na base da tela inteira (largura 100%, sem max-width nem
   padding lateral) e bem mais grossa — a pedido do usuário, mesmo
   padrão da barra de progresso do Nubank (referência enviada). Antes
   era uma barrinha fina (2px) e estreita, centralizada dentro do
   conteúdo — position:absolute tira ela do fluxo flex do
   .benefits-scroll__sticky (que é position:sticky, já serve de
   containing block) pra ela colar na borda inferior da viewport sem
   empurrar/afetar o espaçamento do título e dos cards acima. */
.benefits-scroll__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  /* Filete fino e elegante a pedido do usuário — era 1.125rem (~18px),
     antes disso 0.375rem (~6px). Em px de propósito (hairline, seção 1.3
     do design system). */
  height: 4px; /* era 3px — um pouquinho mais, a pedido do usuário */
  background: #f5f5f5; /* Mesma cor do fundo da seção (.benefits-scroll) — a pedido do usuário, sem cinza escuro de contraste */
  /* Era 999px (pílula) — reto a pedido do usuário. */
  border-radius: 0;
  overflow: hidden;
}

/* TESTE do usuário (reversível, ver .benefits-scroll acima) — trilho e
   preenchimento eram a MESMA cor do fundo/primary; sobre o fundo rosa
   sólido isso somaria tudo na mesma cor e a barra ficaria invisível.
   Trilho opaco (não translúcido) — um branco translúcido por cima do
   fundo rosa sólido ainda lê como rosa claro; a pedido do usuário o
   "loadzinho" (preenchimento) virou âmbar em vez de rosa. */
.benefits-scroll .benefits-scroll__progress {
  background: var(--color-white);
}

.benefits-scroll .benefits-scroll__progress-fill {
  background: var(--color-amber);
}

.benefits-scroll__progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--color-primary);
  /* Era 999px (pílula) — reto a pedido do usuário, igual o trilho acima. */
  border-radius: 0;
}

/* Fallback pra quem prefere menos movimento: sem pin, vira uma faixa com
   scroll horizontal nativo (arrastar/trackpad), sem o efeito de scroll-jack. */
.benefits-scroll--static {
  height: auto !important;
}

.benefits-scroll--static .benefits-scroll__sticky {
  position: static;
  height: auto;
}

.benefits-scroll--static .benefits-scroll__track {
  overflow-x: auto;
  padding-bottom: var(--space-m);
  /* scroll-snap dá o "encaixe" de carrossel — sem isso o usuário só via
     uma faixa comum de overflow-x sem nenhuma resposta clara ao gesto,
     lia como "a animação não funciona" (era só o pin do desktop que não
     roda aqui de propósito, mas sem feedback nenhum no lugar dele). */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.benefits-scroll--static .benefit-card {
  scroll-snap-align: start;
}

.benefits-scroll--static .benefits-scroll__progress {
  display: none;
}

.benefit-card {
  flex-shrink: 0;
  display: flex;
  /* Desktop continua centralizado — o topo (flex-start) é só no mobile,
     ver @media(max-width:1023px) mais abaixo. */
  align-items: center;
  /* Figma (node 4267:524, atualizado): 745px → 950px — usuário alargou as
     fotos do card. Imagem em si não tem token próprio, cresce sozinha via
     flex:1 (largura do card menos texto e gap).
     74.219vw (não 65.972vw = 950/1440) — bate o teto de 950px já em
     1280px de viewport, não só em 1440px: com a taxa "chega exatamente
     em 1440" a imagem ficava visivelmente menor que o Figma em qualquer
     notebook comum (1280/1366px), que é a maioria das telas reais. */
  width: min(59.375rem, 74.219vw); /* Figma: 950px, atinge o teto a partir de 1280px */
  /* altura explícita é necessária: um <img flex:1> sem altura definida
     não consegue calcular a largura certa (vira 100% do card, estourando
     pra fora) — é um caso conhecido de flex-basis:0 com elemento
     substituído (img) sem cross-size definido. */
  height: var(--benefit-card-height);
  gap: var(--benefit-text-image-gap);
}

.benefit-card__text {
  flex-shrink: 0;
  width: min(12.5rem, 28vw); /* Figma: 200px */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--benefit-text-gap);
}

/* Sobrescrita de tela grande — precisa vir DEPOIS das regras base acima
   (.benefit-card/.benefit-card__text), mesma especificidade, ordem no
   arquivo decide quem vence. Ficava lá em cima perto do :root antes e por
   isso nunca aplicava (a regra base, sem media query, vinha depois no
   arquivo e vencia sempre — telas >1440px ficavam travadas no teto de
   950px/200px mesmo crescendo). */
@media (min-width: 1440px) {
  .benefit-card {
    /* 950px→1249px: continua a partir do 950px da regra base acima
       (node 4267:524 atualizado — usuário alargou as fotos no Figma).
       Teto reduzido em ~1/3 a pedido do usuário (era 1689px — a imagem
       ficava grande demais em telas maiores). Como .benefit-card__text
       e --benefit-text-image-gap não mudam, toda a redução sai da
       imagem (flex:1), que é o que o usuário pediu.
       Precisa do intercepto (35.35rem + ...) — um "Xvw" puro (era
       65.972vw, sem intercepto) é uma reta que passa pela origem, então
       fixar o valor em 1440px (950px) já fixa sozinho o valor em
       2560px também, sem deixar reduzir só o teto. */
    width: clamp(59.375rem, 35.35rem + 26.7vw, 78.0625rem);
  }

  .benefit-card__text {
    width: clamp(12.5rem, 13.89vw, 16.5rem);
  }
}

.benefit-card__icon {
  height: var(--benefit-icon-size);
  width: auto;
}

.benefit-card__title {
  margin: 0;
  /* Preto (era #767676, cinza) a pedido do usuário — desktop e mobile. */
  color: var(--color-black);
  font-weight: 400;
  font-size: var(--benefit-title-size);
  /* Era 1.2 — reduzido a pedido do usuário, o vão entre "Taxa justa" e
     "de verdade" (2 linhas dentro do mesmo título) ficou enorme depois
     do aumento de fonte. 1.05 bate com o padrão do resto do site pra
     título grande (.hero__title usa 1.05, .connect__title usa 1). */
  line-height: 1.05;
  letter-spacing: -0.01em;
}

/* Teste do usuário — título maior só no desktop (1.5x o tamanho normal,
   que já escala em 2 camadas — base + reforço 1440px+ — então multiplica
   o que estiver ativo em vez de mexer nos tokens base). */
@media (min-width: 1024px) {
  .benefit-card__title {
    font-size: calc(var(--benefit-title-size) * 1.5);
  }
}

/* Título um pouco maior no mobile, a pedido do usuário (independente do
   aumento de desktop acima — 1.2x aqui, não 1.5x, pra não repetir o
   mesmo exagero relativo do teste de desktop num espaço bem mais
   apertado). */
@media (max-width: 1023px) {
  .benefit-card__title {
    font-size: calc(var(--benefit-title-size) * 1.2);
  }
}

.benefit-card__title span {
  display: block;
  color: var(--color-primary);
  font-weight: 400;
}

/* Nenhum filho do bloco de texto encolhe: o card tem altura FIXA
   (--benefit-card-height) e, quando o conteúdo apertava, o flexbox
   espremia a linha de 1px até 0 — ela sumia (bug real, medido em
   1024–1920px). */
.benefit-card__text > * {
  flex-shrink: 0;
}

.benefit-card__rule {
  width: 2.875rem; /* Figma: 46px */
  height: 1px;
  /* Era #b3b3b3 sólido — linha pontilhada padrão (ver .rates__divider). */
  background-position: top left;
}

.benefit-card__desc {
  margin: 0;
  color: var(--color-black);
  font-size: var(--benefit-desc-size);
  line-height: 1.6;
}

/* ---------- Variante "cartão branco" (teste do usuário, Figma node
   4484:1075) — só na home por enquanto ("deixa nas outras de backup, e
   quando decidir padronizamos tudo"). Em vez do texto ficar solto no
   fundo da seção do lado da foto, ele fica dentro de um cartão branco
   arredondado próprio, com as fontes voltando pro tamanho real do Figma
   (24px título / 14px descrição) — o card__title normal tem um
   multiplicador de 1.2-1.5x de um teste anterior; aqui isso é
   sobrescrito de volta pro tamanho de --benefit-title-size puro, sem o
   multiplicador (a pedido do usuário: "remaneja as fontes menores"). */
.benefit-card.benefit-card--boxed {
  /* Cartão e foto colados, sem vão entre eles (era
     var(--benefit-text-image-gap), pensado pro texto solto no fundo da
     seção) — a pedido do usuário. */
  gap: 0;
}

.benefit-card--boxed .benefit-card__text {
  /* Era 45vw, depois 58vw — ainda "muito apertado" no mobile a pedido do
     usuário ("boa aumentada da largura pra ter um padding e espaçamento
     bonito"). 70vw dá bem mais respiro; teto de 20.5rem/328px passa a
     bater a partir de ~469px de viewport (era ~566px com 58vw), sem
     mudar nada acima disso. */
  /* Era min(20.5rem,70vw)/328px — aumentado um pouco (~10%) a pedido do
     usuário. */
  width: min(22.5rem, 70vw);
  /* Era var(--color-white) sólido — virou vidro/espelhado (a pedido do
     usuário, mesma receita do .opportunity-card em "Vantagens") agora
     que a seção tem fundo rosa sólido atrás (.benefits-scroll) pra
     esse efeito de translucidez fazer sentido. */
  position: relative; /* referência da borda de vidro (::before, regra compartilhada) */
  /* Sem borda no lado direito, onde o card encosta na foto — uma linha
     ali separaria as duas peças que devem parecer uma só. */
  --glass-border-sides: 1px 0 1px 1px;
  /* Era 0.5/0.3, depois 0.22/0.12 — opacidade reduzida de novo (a pedido
     do usuário: "muito branco"). Mais transparente que o .opportunity-card
     de Vantagens (0.18/0.18). */
  background-image: linear-gradient(108deg, rgba(255, 255, 255, 0.14) 12.9%, rgba(153, 153, 153, 0.08) 79.4%);
  backdrop-filter: blur(0.35625rem); /* Figma: 5.7px, igual .opportunity-card */
  /* Cantos da direita zerados (a pedido do usuário) — cartão e foto
     ficam colados (gap:0, ver acima) e cada um só arredonda o lado de
     fora, pra parecerem uma peça única em vez de duas com uma "lente"
     arredondada no meio. Ver .benefit-card--boxed .benefit-card__image
     abaixo pro espelho (lado esquerdo da foto). */
  /* Era 2.0625rem/33px — reduzido a pedido do usuário, igual ao card
     "Possibilidade de crédito" (0.875rem). */
  border-radius: 0.875rem 0 0 0.875rem;
  /* Sobrepõe 1px por cima da foto (que desenha DEPOIS no DOM, logo por
     cima) — sem isso, arredondamento de subpixel entre a largura do
     cartão (min()/clamp()) e a da foto (flex:1, resto do espaço) podia
     deixar uma frincha de 1px do fundo da SEÇÃO aparecendo na costura
     (por ex. uma linha rosa, a pedido do usuário pra tirar). */
  margin-right: -1px;
  /* Figma (referência com medida: 220x250 de área de conteúdo): 54px de
     respiro em cima/esquerda/direita no desktop — era 36px (36px em
     todos os lados), pouco e ficava com o conteúdo colado nas bordas.
     Só que 54px FIXO no mobile (card com só ~45-58vw de largura) sobrava
     pouquíssima área útil pro texto — o título quebrava palavra por
     palavra (bug real, reportado no celular). Por isso agora é fluido
     (mesmo padrão clamp mobile→1440px do resto do site): ~20px no
     mobile (375px) até 54px no desktop (1440px), onde empalma com o
     clamp(3.375rem,3vw,4.5rem) do media query abaixo (ambos começam
     exatamente em 54px aos 1440px). */
  padding: clamp(1.25rem, 0.502rem + 3.1925vw, 3.375rem);
  box-sizing: border-box;
  /* Volta a acompanhar a altura da foto ao lado (--benefit-card-height,
     mesmo token do .benefit-card__image) — a pedido do usuário, card e
     foto sempre com a MESMA altura. O espaço sobrando embaixo do texto
     (quando o card fica mais alto que o conteúdo precisa) é esperado —
     o próprio Figma já tem esse respiro sobrando embaixo. O que causava
     o "desproporcional" antes não era a altura em si, e sim as FONTES
     ainda serem fluidas (cresciam junto com a tela) — isso já foi
     corrigido abaixo (título/desc/ícone com tamanho fixo). */
  height: var(--benefit-card-height);
}

@media (min-width: 1440px) {
  .benefit-card--boxed .benefit-card__text {
    /* Crescimento maior pra telas grandes (era clamp(20.5rem,15vw,23rem)
       — pedido do usuário: "pode aumentar mais... apenas nas resoluções
       maiores"). Continua a partir do mesmo 328px em 1440px (18vw=259px
       fica abaixo do mínimo aqui) até um teto de 26rem/416px em telas
       bem largas. Base e teto aumentados ~10% (era 20.5rem/26rem) junto
       com a largura padrão acima, a pedido do usuário. */
    width: clamp(22.5rem, 18vw, 28rem);
    /* Padding topo/esquerda/direita cresce nas telas grandes (mesmo
       espírito da largura acima) — a pedido do usuário, pro conteúdo
       ficar mais distante das bordas num card maior. Direita agora
       igual à esquerda (a pedido do usuário, pra linha .benefit-card__rule
       de 100% ficar com o mesmo respiro nos dois lados) — só o baixo
       continua nos 54px fixos. Era 54px fixo sempre; agora vai até 72px
       nas telas mais largas. */
    padding-top: clamp(3.375rem, 3vw, 4.5rem);
    padding-left: clamp(3.375rem, 3vw, 4.5rem);
    padding-right: clamp(3.375rem, 3vw, 4.5rem);
  }
}

/* ---------- Borda de vidro padrão — UMA regra só, compartilhada pelos
   cards de vidro de "Benefícios" (.benefit-card--boxed .benefit-card__text)
   e "Vantagens" (.opportunity-card), a pedido do usuário (mesmo código).
   Borda branca em degradê, bem levinha — "reflexo" de vidro: mais visível
   no canto superior esquerdo, sumindo na diagonal. border normal não
   aceita degradê com border-radius, então é um pseudo-elemento com o
   degradê de fundo + máscara que recorta o miolo, sobrando só o anel de
   1px (padding). Quais lados têm borda: --glass-border-sides (padrão os
   4). border-radius:inherit acompanha os cantos de cada card (inclusive
   variações mobile). O card precisa de position:relative. */
.benefit-card--boxed .benefit-card__text::before,
.opportunity-card::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: var(--glass-border-sides, 1px);
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0.08) 45%,
    rgba(255, 255, 255, 0.02) 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}

.benefit-card--boxed .benefit-card__title {
  /* Fixo (não var(--benefit-title-size)) — esse token é FLUIDO, pensado
     pro texto solto do layout antigo que cresce junto com a tela (chega
     a 32px em telas grandes). Esse cartão agora é um componente de
     tamanho FIXO (328px, ver .benefit-card__text acima), então a fonte
     também tem que ser fixa — sem isso ela crescia mais que o cartão em
     telas largas, sobrando cada vez menos espaço/padding visualmente
     "livre" pro texto (a pedido do usuário: "fontes grandes demais...
     sem padding e apertado"). Era 1.5rem/24px (Figma); aumentado a
     pedido do usuário. */
  font-size: 1.75rem;
  /* Era var(--color-black) (herdado) — branco a pedido do usuário, já
     que o cartão virou vidro sobre o gradiente animado da seção (ver
     .benefits-scroll__sticky), não mais um fundo branco opaco. */
  color: var(--color-white);
}

/* Título sempre com altura de 2 linhas — a linha pontilhada e o texto
   começam na MESMA altura em todos os cards, mesmo se algum título
   tiver 1 linha (2 é o padrão: palavra + <span> em bloco). */
.benefit-card--boxed .benefit-card__title {
  min-height: 2.1em; /* 2 × line-height 1.05 */
}

@media (max-width: 1023px) {
  .benefit-card--boxed .benefit-card__title {
    min-height: 2.5em; /* 2 × line-height 1.25 do mobile */
  }
}

.benefit-card--boxed .benefit-card__title span {
  /* Era var(--color-primary) (rosa, herdado) — sobre o vidro/gradiente
     rosa isso lia fraco/washed out; branco a pedido do usuário, igual o
     resto do título. */
  color: var(--color-white);
}

.benefit-card--boxed .benefit-card__desc {
  /* Mesmo motivo do título acima — var(--benefit-desc-size) chega a
     18px em telas largas; Figma: 14px fixo. */
  font-size: 0.875rem;
  /* Era var(--color-black) (herdado) — branco a pedido do usuário. */
  color: var(--color-white);
}

.benefit-card--boxed .benefit-card__rule {
  /* Era 2.875rem/46px fixo (herdado) — 100% a pedido do usuário, cobre
     toda a largura útil do card (o inset nas bordas já vem do padding
     do .benefit-card__text pai, que agora é simétrico esquerda/direita
     — ver ajuste em 1440px+ acima). */
  width: 100%;
  /* Era #b3b3b3 sólido (herdado, pensado pro fundo branco opaco) —
     pontilhado a pedido do usuário, copiado de
     .opportunity-card__item + .opportunity-card__item (mesmo padrão do
     card "Vantagens" acima, pra ficar tudo padronizado). Precisa zerar
     o background-color sólido herdado da regra padrão (#b3b3b3) — senão
     ele aparece atrás, preenchendo os vãos "transparent" do gradiente e
     anulando o efeito pontilhado. */
  background-color: transparent;
  background-image: repeating-linear-gradient(
    to right,
    rgba(255, 255, 255, 0.6) 0,
    rgba(255, 255, 255, 0.6) 3px,
    transparent 3px,
    transparent 6px
  );
}

/* Ajustes só no mobile (a pedido do usuário) — as fontes fixas acima
   (24px/14px) foram pensadas pro card de ~328px do desktop; no card
   estreito do mobile (~58vw, ver .benefit-card__text) ficam grandes
   demais proporcionalmente. Também: border-radius do card branco agora
   acompanha o mesmo token fluido da foto ao lado (--audience-card-radius)
   em vez do valor fixo de 33px (que só fazia sentido no card grande do
   desktop) — os dois cantos precisam bater visualmente. E o line-height
   do título (1.05, ver .benefit-card__title) foi puxado pra baixo pensando
   no font-size fluido antigo; com a fonte menor do mobile ele fica
   apertado demais entre as 2 linhas — sobe pra 1.25 aqui. */
@media (max-width: 1023px) {
  .benefit-card--boxed .benefit-card__text {
    /* Mesmo espelhamento do card branco desktop (ver regra base acima) —
       cantos da direita zerados pra ficar colado com a foto. Era
       var(--audience-card-radius) — reduzido a pedido do usuário, igual
       ao card "Possibilidade de crédito" (0.875rem). */
    border-radius: 0.875rem 0 0 0.875rem;
    /* Padding topo/esquerda/direita maior que o base (só o baixo continua
       no padding do clamp) — mesmo espírito do ajuste desktop 1440+ (ver
       acima), a pedido do usuário: conteúdo mais afastado das bordas em
       relação à caixa branca. Era ~20.5px (clamp base) nos 4 lados; agora
       28px fixos nesses 3 lados. */
    padding-top: 1.75rem;
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }

  .benefit-card--boxed .benefit-card__title {
    font-size: 1.125rem; /* 18px, era 24px */
    line-height: 1.25; /* era 1.05 (herdado) */
  }

  .benefit-card--boxed .benefit-card__desc {
    font-size: 0.6875rem; /* 11px, era 13px — a pedido do usuário */
  }

  /* "aumentadinha" na altura a pedido do usuário — --benefit-card-height
     é o mesmo token do .benefit-card (linha) e da foto ao lado, então
     sobe aqui pra ambos (card e foto) crescerem juntos, continuando a
     bater no card boxed. Piso de 18rem (era 16rem, +32px) só até ~426px
     de viewport (onde a fórmula original já ultrapassa esse piso
     sozinha) — a partir daí seguem a MESMA curva de antes até o teto
     original de 23.5rem em 1023px (não muda o breakpoint desktop). */
  :root {
    --benefit-card-height: clamp(18rem, 15rem + 11.27vw, 23.5rem);
  }

  /* Linha divisória (46x1px) ficava quase invisível em alguns cards no
     mobile (sumia em compressão/telas de menor densidade) — 1.5px em vez
     de 1px, mais robusta sem virar uma barra grossa. */
  .benefit-card--boxed .benefit-card__rule {
    height: 1.5px;
  }
}

/* ---------- Opportunity (página INSS: seção "VANTAGENS", Figma node
   4457:926) — mesmo card de gradiente animado do .connect da home
   (reaproveita .breath-bg, só troca o
   id do canvas), mas com layout de 2 colunas (intro à esquerda + 3
   cards de vidro à direita) em vez do badge+parágrafo do .connect. */
.opportunity {
  width: 100%;
  background: var(--color-white);
}

.opportunity__inner {
  max-width: 90rem;
  margin: 0 auto;
  padding: var(--section-gap) var(--hero-pad-inline);
}

/* SEM aspect-ratio fixo (era 1204/814, igual ao Figma) — travava a
   altura do card e, com overflow:hidden, cortava o 3º card sempre que o
   conteúdo empilhado (3 cards + intro) precisasse de mais altura do que
   essa proporção permite num dado width (ex: título quebrando em 4
   linhas). A altura agora acompanha o conteúdo, como o resto do site já
   faz pra card com texto que pode variar de tamanho. */
.opportunity__visual {
  position: relative;
  width: 100%;
  /* Era var(--connect-radius) — reduzido a pedido do usuário, igual ao
     card "Possibilidade de crédito" (0.875rem). */
  border-radius: 0.875rem;
  /* clip (não hidden) — overflow:hidden transforma o card num "scroll
     container", e aí o position:sticky do .opportunity__intro (desktop)
     grudaria relativo ao próprio card (que nunca rola) em vez da página,
     ou seja, não grudaria nunca. clip recorta igual (cantos arredondados +
     gradiente animado) sem criar scroll container. hidden fica como
     fallback pra navegador sem suporte a clip (só perde o sticky). */
  overflow: hidden;
  overflow: clip;
  contain: paint;
  transform: translateZ(0);
  background: #15131c;
}

.opportunity__content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  /* Mobile (o desktop sobrescreve abaixo). Era calc(--hero-pad-inline *
     1.5) nos 4 lados = 48px de cada lado — somado aos 32px da seção e aos
     56px do card de vidro, sobravam ~100px de largura pro texto numa tela
     de 375px (quebras de linha a cada 1-2 palavras, pedido do usuário pra
     corrigir). Lateral agora bem menor, pro card de vidro ocupar quase
     toda a largura do bloco rosa. */
  padding: var(--space-xl) var(--space-s);
}

@media (min-width: 1024px) {
  .opportunity__content {
    /* NÃO position:absolute — precisa ficar no fluxo normal pra o card
       crescer em altura junto com o conteúdo (ver comentário acima). */
    flex-direction: row;
    /* Figma (node 4457:926, container 1204x814): título mais curto (409
       de altura) centralizado verticalmente ao lado da coluna de 3 cards
       (616 de altura) — não os dois "colados" no topo. */
    align-items: center;
    justify-content: space-between;
    /* Padding e gap medidos direto do Figma (não o padrão de seção
       --hero-pad-inline*1.5, que sobrava rosa e apertava demais os
       cards, ficando bem mais estreitos que os 488px do Figma): topo/
       baixo ~99px (metade da sobra entre os 616px da coluna de cards e
       os 814px do container), esquerda 80px, direita 100px, gap entre
       colunas 127px. */
    padding: 6.1875rem 6.25rem 6.1875rem 5rem;
    gap: 7.9375rem;
  }

  /* Alinhamento no grid (ver --grid-col2 no :root) — o TEXTO dos cards
     precisa começar na mesma vertical do texto das outras seções (Dicas).
     Vira grid: a coluna 1 (intro) tem exatamente a largura que falta pra
     coluna 2 começar em --grid-col2 menos os paddings acumulados até o
     texto: 5rem do .opportunity__content + 3.5rem do .opportunity-card.
     Substitui o flex/gap acima (o flex: dos filhos é ignorado em grid). */
  .opportunity__inner {
    container-type: inline-size;
  }

  .opportunity__content {
    display: grid;
    grid-template-columns: calc(var(--grid-col2) - 5rem - 3.5rem) minmax(0, 1fr);
    column-gap: 0;
  }

  .opportunity__intro {
    /* Respiro entre o título (alinhado à direita) e a coluna dos cards —
       antes era o gap do flex. */
    padding-right: var(--space-2xl);
  }
}

.opportunity__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-m);
}

/* Mobile: bloco do título (badge, título, subtítulo, botão) centralizado,
   a pedido do usuário. Desktop continua alinhado à direita (regras
   abaixo). */
@media (max-width: 1023px) {
  .opportunity__intro {
    align-items: center;
    text-align: center;
  }
}

@media (min-width: 1024px) {
  .opportunity__intro {
    align-items: flex-end;
    /* flex-basis no tamanho do Figma (409px). shrink baixo (0.4, contra
       1.6 dos cards abaixo) — entre os dois lados encolherem, é bem pior
       o título (56px) quebrar em várias linhas tortas do que os cards
       (texto pequeno) ficarem um pouco mais estreitos. min-width trava
       um piso de 3 linhas de quebra decente pro título, nunca menos. */
    flex: 0 0.4 25.5625rem;
    min-width: 17rem;
    /* Sticky (a pedido do usuário) — título/CTA ficam parados enquanto a
       coluna de cards (mais alta) rola ao lado. align-self:flex-start
       porque o .opportunity__content centraliza verticalmente
       (align-items:center), e item centralizado não tem "sobra" pra
       grudar. top: abaixo do nav fixo (~8.1rem, mesmo valor usado em
       outras seções que compensam o nav). */
    position: sticky;
    top: 9rem;
    align-self: flex-start;
  }
}

.opportunity__title {
  margin: 0;
  color: var(--color-white);
  font-weight: 400;
  font-size: var(--connect-title-size); /* Figma: 56px, bate exato */
  line-height: 1;
  letter-spacing: -0.02em;
}

.opportunity__subtitle {
  margin: 0;
  color: var(--color-white);
  font-size: var(--audience-text-size); /* Figma: 16px, bate exato */
  line-height: 1.6;
}

@media (min-width: 1024px) {
  .opportunity__title,
  .opportunity__subtitle {
    text-align: right;
  }

  .opportunity__subtitle {
    line-height: 2.4375; /* Figma: 39px sobre 16px */
  }
}

/* Só ajusta o tamanho da fonte (20px no Figma, maior que o padrão de
   --hero-ui-text-size) — cor/hover/ícone vêm de .btn--inss, igual. */
/* Sem font-size próprio agora — a pedido do usuário, herda o tamanho
   padrão do .btn (--hero-ui-text-size) igual aos outros CTAs do site
   (era --rates-row-label-size/20px, maior que o padrão geral). */

.opportunity__cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  width: 100%;
}

@media (min-width: 1024px) {
  .opportunity__cards {
    width: auto;
    /* Prioridade invertida do .opportunity__intro acima: cresce pra
       ocupar a sobra (grow:1) e encolhe bem mais fácil (shrink:1.6) —
       é essa coluna que deve absorver o aperto do espaço, não o
       título. min-width evita só o colapso total. */
    flex: 1 1.6 30.5rem; /* Figma: 488px */
    min-width: 14rem;
  }
}

/* Era 3 cards de vidro separados (um por vantagem) — a pedido do
   usuário, virou 1 fundo espelhado só (mesma receita visual do
   .terms__notification: fundo/borda/blur) contendo os 3 itens
   empilhados dentro, cada um com ícone (.opportunity-card__item), em vez
   de 3 cards soltos. */
.opportunity-card {
  position: relative; /* referência da borda de vidro (::before, regra compartilhada — ver .benefit-card--boxed .benefit-card__text::before) */
  width: 100%;
  /* Era 2.125rem 2.5rem/34px/40px — aumentado a pedido do usuário. */
  padding: 3rem 3.5rem;
  background-image: linear-gradient(108deg, rgba(255, 255, 255, 0.18) 12.9%, rgba(153, 153, 153, 0.18) 79.4%);
  backdrop-filter: blur(0.35625rem); /* Figma: 5.7px */
  /* Era border: 1px solid rgba(245,245,245,.23) — lia como uma borda
     branca sólida (a pedido do usuário, removida). */
  /* Era 1.5rem/24px — reduzido a pedido do usuário, igual ao card
     "Possibilidade de crédito" (0.875rem). */
  border-radius: 0.875rem;
  display: flex;
  flex-direction: column;
}

/* Mobile: o padding de 3rem/3.5rem acima foi pensado pro card de 488px do
   desktop — no celular comia metade da largura. Menor aqui só no mobile. */
@media (max-width: 1023px) {
  .opportunity-card {
    padding: var(--space-l) var(--space-m);
  }
}

.opportunity-card__item + .opportunity-card__item {
  /* Era var(--space-l) — aumentado a pedido do usuário, junto com o
     padding geral do card acima. */
  margin-top: var(--space-xl);
  padding-top: var(--space-xl);
  /* Era border-top dotted — trocado por um repeating-linear-gradient (a
     pedido do usuário: "retangulinhos"). Era 0.5rem/0.75rem (traço/vão)
     — espaço grande demais; reduzido pro tamanho da referência (case
     study de thinkwise-consulting-template.webflow.io: traços e vãos
     bem pequenos e próximos, tipo um dotted fino, não um tracejado
     espaçado). Padrão agora compartilhado com o resto do site (ver
     .rates__divider) — aqui só troca a cor pra branco (fundo escuro). */
  --dotted-line-color: rgba(255, 255, 255, 0.6);
  background-position: top left;
}

/* ---------- Caixa de ícone padrão (fundo escuro/vidro) — UMA regra só,
   compartilhada pelos cards de "Vantagens" (.opportunity-card__icon) e de
   "Benefícios" (.benefit-card--boxed .benefit-card__icon), a pedido do
   usuário (mesmo código, não cópia). Qualquer ajuste de tamanho aqui vale
   pros dois (e pro "Como faz?"). Tamanhos: ver comentário na regra. */
.opportunity-card__icon,
.benefit-card--boxed .benefit-card__icon,
.process-list__icon-bg {
  /* Aumentado a pedido do usuário (era caixa 3.25rem/52px com ícone de
     1.5rem/24px): caixa 4.25rem/68px, ícone mantido em 1.875rem/30px
     (4.25 − 2 × 1.1875 de padding). Raio acompanha a proporção (era
     0.875rem). */
  width: 4.25rem;
  height: 4.25rem;
  padding: 1.1875rem;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 1.125rem;
  /* Os ícones desse set não são perfeitamente quadrados (ex.: 34x36) —
     sem contain, largura+altura fixas esticariam o desenho. */
  object-fit: contain;
  /* Os SVGs vêm com fill próprio (rosa/escuro, pensados pra fundo claro)
     — força branco pra ler bem sobre o fundo escuro/vidro. */
  filter: brightness(0) invert(1);
}

/* Mobile: caixa e ícone menores em Vantagens e Benefícios (a pedido do
   usuário) — caixa 3.25rem/52px, ícone 1.375rem/22px (3.25 − 2 ×
   0.9375). Vem DEPOIS da regra compartilhada acima de propósito (mesma
   especificidade). O "Como faz?" tem o próprio ajuste mobile. */
@media (max-width: 1023px) {
  .opportunity-card__icon,
  .benefit-card--boxed .benefit-card__icon {
    width: 3.25rem;
    height: 3.25rem;
    padding: 0.9375rem;
    border-radius: 0.875rem;
  }
}

.opportunity-card__icon {
  display: block;
  /* Era var(--space-2xs) — aumentado a pedido do usuário. */
  margin-bottom: var(--space-m);
}

.opportunity-card__title {
  /* Era margin-bottom: var(--space-2xs) — o respiro até o texto agora é
     da linha pontilhada (ver .opportunity-card__desc::before). */
  margin: 0;
  color: var(--color-white);
  font-weight: 400;
  /* 1.2x o tamanho do Figma (20px → 24px no desktop), a pedido do
     usuário — multiplicado aqui, sem mexer no token compartilhado. */
  font-size: calc(var(--rates-row-label-size) * 1.2);
  /* Era 1.5 (30px sobre 20px, pensado pra 1 linha só) — com o <br /> de
     2 linhas (a pedido do usuário) ficava com vão enorme entre elas;
     mais colado agora. */
  line-height: 1.15;
}

.opportunity-card__desc {
  margin: 0;
  color: var(--color-white);
  font-size: var(--audience-text-size); /* Figma: 16px, bate exato */
  line-height: 1.5; /* Figma: 24px sobre 16px */
}

/* Linha pontilhada curta entre título e texto (a pedido do usuário, ideia
   do Figma node 4566:1420) — padrão único do site (ver .rates__divider),
   branca translúcida como os separadores entre itens deste card. Largura =
   quadrado do ícone (4.25rem, ver .opportunity-card__icon), pra alinhar
   visualmente com ele; respiro generoso em cima e embaixo. */
.opportunity-card__desc::before,
.about__text::before {
  --dotted-line-color: rgba(255, 255, 255, 0.6);
  content: '';
  display: block;
  width: 4.25rem;
  height: 1px;
  margin: var(--space-m) 0;
  background-position: top left;
}

@media (max-width: 1023px) {
  .opportunity-card__desc::before,
  .about__text::before {
    width: 3.25rem; /* acompanha o quadrado do ícone no mobile */
  }
}

/* ---------- Tips (página INSS: seção "DICAS", Figma nodes 4061:1415 +
   4550:998) — título+2 parágrafos no topo, divisória, depois uma pilha
   de 4 cards sticky (ver .tips__stack). Reaproveita .rates__divider e
   .section-title/--muted/--dark (cores batem exato: #858585 e #212121). */
.tips {
  width: 100%;
  background: var(--color-white);
}

.tips__inner {
  max-width: 90rem;
  margin: 0 auto;
  padding: var(--section-gap) var(--hero-pad-inline);
}

.tips__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}

@media (min-width: 1024px) {
  /* Alinhamento no grid (ver --grid-col2 no :root): as notas começam
     exatamente na linha da 2ª coluna — era flex com space-between, que
     deixava a posição das notas depender da largura delas. */
  .tips__inner {
    container-type: inline-size;
  }

  .tips__header {
    display: grid;
    grid-template-columns: var(--grid-col2) minmax(0, 1fr);
    align-items: start;
    gap: 0;
  }

  .tips__heading {
    /* Figma: título de 590px numa coluna de 614px → ~24px de respiro.
       Com --space-2xl (64px) o título quebrava em 3 linhas. */
    padding-right: var(--space-m);
  }
}

.tips__heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-m);
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .tips__heading {
    max-width: 36.875rem; /* Figma: 590px */
  }
}

.tips__notes {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

@media (min-width: 1024px) {
  .tips__notes {
    flex-direction: row;
    gap: var(--space-2xl);
    /* Mesmo ajuste do .rates__header/.benefits__intro: align-items:
       flex-start no .tips__header só alinha o topo do bloco badge+título
       (.tips__heading), então as notas ficavam no nível do badge, não do
       título. Empurra pela altura do badge (2.25rem, fixo) + o gap entre
       badge e título do .tips__heading. */
    margin-top: calc(2.25rem + var(--space-m));
  }
}

.tips__note {
  margin: 0;
  max-width: 16.8125rem; /* Figma: 269px */
  color: var(--color-black);
  font-size: var(--audience-text-size);
  line-height: 1.5;
}

/* Pilha de cards "sticky" (Figma node 4550:998; comportamento inspirado
   na seção "Mais facilidades" de nubank.com.br/nu/conta, a pedido do
   usuário) — cada dica é um card completo (título + foto + texto) que
   gruda no topo ao rolar; o próximo card sobe por cima dele e cobre tudo
   menos a faixa do título. Resultado: as dicas já vistas viram uma lista
   só de títulos empilhados no topo. 100% CSS (position:sticky com top
   crescente por card via --i no HTML), sem JS.
   ⚠️ Nenhum ancestral pode ter overflow:hidden/auto (anula o sticky —
   mesmo problema documentado no .opportunity__visual). */
.tips__stack {
  /* Figma: 69px de respiro lateral do card no desktop, 24px no mobile
     (sem frame mobile — piso = --space-m). */
  --tips-card-pad-inline: clamp(1.5rem, 0.5097rem + 4.2254vw, 4.3125rem); /* 24–69px */
  --tips-card-pad-top: 2rem; /* Figma: 32px da linha até o título */
  /* Faixa que continua visível de cada card coberto: respiro do topo +
     1 linha de título + um respiro abaixo dele. */
  --tips-card-peek: calc(var(--tips-card-pad-top) + var(--hero-subtitle-size) + var(--space-m));
  /* Abaixo do .nav fixo (~5.6rem de altura no desktop) + folga. */
  --tips-stack-top: 7rem;
  list-style: none;
  margin: var(--space-l) 0 0;
  padding: 0;
  /* Sem fundo próprio — o cinza é de cada card (.tips__card). Era
     #ffffff aqui; tirado porque o espaçador de rolagem que o JS adiciona
     no fim (.tips__stack-spacer, ver initTipsStack) apareceria como uma
     área cinza vazia embaixo dos títulos quando o último card recolhe.
     Os cantos arredondados ficam no 1º card (topo) e no último (base). */
}

/* Espaçador invisível adicionado pelo JS depois do último card — só dá
   rolagem extra pro último card recolher até sobrar o título. */
.tips__stack-spacer {
  pointer-events: none;
}

.tips__card {
  position: sticky;
  top: calc(var(--tips-stack-top) + var(--i, 0) * var(--tips-card-peek));
  /* Fundo opaco (mesma cor da pilha) — é ele que cobre o card de baixo.
     background-color (não o shorthand) pra não apagar o background-image
     da linha pontilhada (.tips__card + .tips__card, ver .rates__divider). */
  background-color: #ffffff;
  /* Baixo = topo (a pedido do usuário) — era var(--space-2xl), ~64px, que
     deixava um vão grande entre o parágrafo e a linha divisória do card
     seguinte. Agora o card é simétrico: mesmo respiro da linha até o
     título e do parágrafo até a próxima linha. */
  padding: var(--tips-card-pad-top) var(--tips-card-pad-inline);
  background-position: top left; /* linha pontilhada entre cards (ver .rates__divider) */
}

.tips__card:first-child {
  border-radius: 0.875rem 0.875rem 0 0;
  /* Respiro maior no topo do 1º card = o mesmo do padding lateral (a
     pedido do usuário). */
  padding-top: var(--tips-card-pad-inline);
}

/* Como o 1º card ficou mais alto em cima, o título dele desce essa
   diferença — os cards seguintes travam essa mesma diferença mais abaixo,
   senão cobririam parte do título do 1º na pilha. max(0px) porque no
   mobile o padding lateral (24px) é menor que o do topo (32px). */
.tips__card + .tips__card {
  top: calc(
    var(--tips-stack-top) +
      max(0px, var(--tips-card-pad-inline) - var(--tips-card-pad-top)) +
      var(--i, 0) * var(--tips-card-peek)
  );
}

.tips__card:last-child {
  border-radius: 0 0 0.875rem 0.875rem;
}

.tips__card-title {
  /* Era var(--space-2xl) (~64px, Figma: título até a FOTO) — sem a foto,
     ficava um vão grande até a linha pontilhada; reduzido a pedido do
     usuário. */
  margin: 0 0 var(--space-m);
  color: #858585; /* Colours-Acredity/neutral/400 */
  font-weight: 400;
  font-size: var(--hero-subtitle-size); /* Figma: 32px, bate exato */
  line-height: 1;
  letter-spacing: -0.05em; /* Figma: -1.6px */
}

.tips__card-title--dark {
  color: var(--color-black);
}

.tips__card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

@media (min-width: 1024px) {
  /* Cards SEM foto agora (a pedido do usuário) — linha pontilhada +
     parágrafo à esquerda, no padding do card, ocupando a largura toda
     (a linha vai até o padding direito, ver .tips__card-text::before).
     Antes era grid foto | respiro | texto, com o texto na --grid-col2. */
  .tips__card-body {
    display: block;
  }
}

.tips__card-text {
  position: relative; /* referência da linha pontilhada (::before) */
  margin: 0;
  /* Texto corrido na largura toda do card (a pedido do usuário — sem a
     foto, o limite de 271px do Figma deixava um vão enorme à direita).
     A linha pontilhada (::before) acompanha a mesma largura. */
  padding: 1.6875rem 0 0; /* topo: Figma 27px da linha até o texto */
  color: #767676; /* Colours-Acredity/neutral/600 */
  font-size: var(--audience-text-size); /* Figma: 16px */
  line-height: 1.5; /* Figma: 24px */
}

/* Linha pontilhada em cima do texto (Figma node 4566:1420, a pedido do
   usuário) — padrão único do site (ver .rates__divider). Vai do início do
   texto até o fim da coluna de texto do card (100%, a pedido do usuário;
   era 216px no Figma) — e a coluna termina no padding interno do card,
   então sobra à direita exatamente o mesmo respiro que o card tem à
   esquerda (--tips-card-pad-inline). Absoluta dentro do <p> (que ocupa a
   coluna inteira, ver padding-right acima). Como o texto está alinhado ao
   topo da foto, a linha fica na altura do topo da foto. */
.tips__card-text::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-position: top left;
}

/* Variante com foto (sobre-nos.html, "Nossos diferenciais"): foto abaixo
   do título à esquerda, texto à direita. No desktop o texto começa na
   --grid-col2 (mesma vertical das notas do topo da seção, ver 6.1 do
   DESIGN-SYSTEM) — 1ª coluna = col2 menos o padding do card. Mobile:
   foto em cima, texto embaixo (flex column do .tips__card-body). */
.tips__card-image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  height: auto;
  object-fit: cover;
  border-radius: 0.875rem; /* raio padrão de card */
}

@media (min-width: 1024px) {
  .tips__card-body--media {
    display: grid;
    grid-template-columns: calc(var(--grid-col2) - var(--tips-card-pad-inline)) minmax(0, 1fr);
    align-items: start;
    /* O gap do .tips__card-body base (vão foto→texto empilhados no
       mobile) viraria vão ENTRE colunas aqui e tiraria o texto da col2. */
    column-gap: 0;
  }

  /* Respiro entre foto e texto = o padding direito da 1ª coluna (a
     coluna termina na col2, a foto para antes). */
  .tips__card-body--media .tips__card-image {
    width: calc(100% - var(--space-2xl));
  }

  /* Parágrafo mais estreito (a pedido do usuário, "mais elegante") —
     só o texto quebra antes. A linha pontilhada em cima (::before,
     right:0 = borda do <p>) termina no padding interno do card: mesma
     distância da borda que a foto tem à esquerda (--tips-card-pad-inline). */
  .tips__card-body--media .tips__card-text {
    padding-right: calc(var(--space-2xl) * 2);
  }
}

/* Palavras de destaque em rosa (a pedido do usuário) — mesmo padrão do
   .rule-change__text strong: só a cor muda, peso continua regular. */
.tips__card-text strong {
  color: var(--color-primary);
  font-weight: 400;
}

/* ---------- Feature gallery (sobre-nos.html: "Nossos diferenciais") —
   painéis de foto lado a lado que expandem (referência:
   nubank.com.br/nu/cartao, "Um app para tudo. E tudo no app"). O ativo
   cresce (flex-grow) e mostra título+texto embaixo; os outros ficam
   estreitos e escurecidos. Troca automática controlada pela animação da
   bolinha ativa (initFeatureGallery no JS ouve o animationend) — pausar
   = animation-play-state, então barra e troca ficam sempre em sincronia.
   Cabeçalho reaproveita .rates__header/.rates__divider. */
.feature-gallery {
  width: 100%;
  background: var(--color-white);
}

.feature-gallery__inner {
  max-width: 90rem;
  margin: 0 auto;
  padding: var(--section-gap) var(--hero-pad-inline);
}

.feature-gallery__panels {
  --feature-gallery-h: clamp(15rem, 11.04rem + 16.9vw, 26.25rem); /* 240–420px */
  display: flex;
  gap: var(--space-xs);
  margin-top: var(--space-l);
}

.feature-gallery__panel {
  flex: 1 1 0;
  min-width: 0;
  transition: flex-grow 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.feature-gallery__panel.is-active {
  flex-grow: 4;
}

.feature-gallery__media {
  position: relative;
  display: block;
  width: 100%;
  height: var(--feature-gallery-h);
  padding: 0;
  border: 0;
  overflow: hidden;
  border-radius: var(--audience-card-radius); /* 14px padrão */
  background: #ffffff;
  cursor: pointer;
}

.feature-gallery__panel.is-active .feature-gallery__media {
  cursor: default;
}

.feature-gallery__media:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.feature-gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Inativos escurecidos (como na referência). */
.feature-gallery__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  transition: opacity 0.4s ease;
}

.feature-gallery__panel.is-active .feature-gallery__media::after {
  opacity: 0;
}

.feature-gallery__media:hover::after {
  opacity: 0.6;
}

/* Legenda só no ativo. min-height reserva espaço (2 linhas de título +
   3 de texto) pra seção não pular de altura a cada troca. */
.feature-gallery__caption {
  display: none;
  max-width: 28rem;
  padding-top: var(--space-s);
  min-height: 8.5rem;
}

.feature-gallery__panel.is-active .feature-gallery__caption {
  display: block;
  animation: feature-gallery-caption-in 0.5s ease both;
}

@keyframes feature-gallery-caption-in {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
}

.feature-gallery__title {
  margin: 0 0 var(--space-2xs);
  color: #494949;
  font-weight: 400;
  font-size: var(--rates-row-label-size);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

/* Destaque só por cor (padrão do site, ver .process-list__title span). */
.feature-gallery__title span {
  color: var(--color-primary);
}

.feature-gallery__text {
  margin: 0;
  color: #767676;
  font-size: var(--audience-text-size);
  line-height: 1.5;
}

/* Controles: bolinhas (a ativa vira pílula com progresso) + pausa. */
.feature-gallery__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-s);
  margin-top: var(--space-m);
}

.feature-gallery__dots {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

.feature-gallery__dot {
  position: relative;
  width: 0.5rem;
  height: 0.5rem;
  overflow: hidden;
  border-radius: 9999px;
  background: #d9d9d9;
  transition: width 0.4s ease;
}

.feature-gallery__dot.is-active {
  width: 2rem;
}

.feature-gallery__dot-fill {
  position: absolute;
  inset: 0;
  width: 0;
  background: var(--color-primary);
}

.feature-gallery__dot.is-active .feature-gallery__dot-fill {
  animation: feature-gallery-progress var(--feature-gallery-interval, 5s) linear forwards;
}

.feature-gallery.is-paused .feature-gallery__dot-fill {
  animation-play-state: paused;
}

@keyframes feature-gallery-progress {
  to {
    width: 100%;
  }
}

.feature-gallery__pause {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--color-primary);
  border-radius: 9999px;
  background: transparent;
  color: var(--color-primary);
  cursor: pointer;
}

.feature-gallery__pause-icon {
  width: 1rem;
  height: 1rem;
}

.feature-gallery__pause-icon--play,
.feature-gallery.is-user-paused .feature-gallery__pause-icon--pause {
  display: none;
}

.feature-gallery.is-user-paused .feature-gallery__pause-icon--play {
  display: block;
}

/* Mobile: o ativo ocupa bem mais (inativos viram tiras finas). */
@media (max-width: 1023px) {
  .feature-gallery__panels {
    gap: var(--space-2xs);
  }

  .feature-gallery__panel.is-active {
    flex-grow: 6;
  }
}

/* Sem animação: sem troca automática (o JS também não liga), bolinhas e
   painéis mudam sem transição; os controles de progresso somem. */
@media (prefers-reduced-motion: reduce) {
  .feature-gallery__panel,
  .feature-gallery__dot,
  .feature-gallery__media::after {
    transition: none;
  }

  .feature-gallery__panel.is-active .feature-gallery__caption,
  .feature-gallery__dot.is-active .feature-gallery__dot-fill {
    animation: none;
  }

  .feature-gallery__pause {
    display: none;
  }
}

/* ---------- Rule change (página INSS: seção "O que mudou no consignado
   INSS", Figma node 4061:1193) — foto + texto, mesmo layout base do
   .showcase da página CLT (proporção de colunas, breakpoint 1024px),
   mas classes próprias porque o conteúdo (badge/cores/CTA) é diferente e
   a foto tem outra proporção (590x688, não 590x712). Título reaproveita
   .section-title/--muted direto (cores batem exato: #858585 e preto). */
.rule-change {
  width: 100%;
  background: var(--color-white);
}

.rule-change__inner {
  max-width: 90rem;
  margin: 0 auto;
  padding: var(--section-gap) var(--hero-pad-inline);
}

.rule-change__grid {
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-l);
}

@media (min-width: 1024px) {
  .rule-change__grid {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2xl);
  }

  /* 2º bloco do sobre-nos.html ("Onde queremos chegar"): foto à
     esquerda, texto à direita. */
  .rule-change__grid--reverse {
    flex-direction: row-reverse;
  }
}

/* Blocos seguidos na mesma seção (sobre-nos.html). */
.rule-change__grid + .rule-change__grid {
  margin-top: var(--space-2xl);
}

/* sobre-nos.html ("O que nos move" / "Onde queremos chegar"): títulos são
   .section-title (cinza + grafite, igual "Nossa origem" acima) e o
   parágrafo no mesmo tamanho do texto dos cards de lá (16px, era 20px). */
.rule-change--compact .rule-change__text {
  font-size: var(--audience-text-size);
  line-height: 1.5;
  letter-spacing: 0;
}

/* Mesmo respiro à direita dos parágrafos de "Nossa origem" (2x --space-2xl;
   a regra base aqui dava 1x). Só desktop. */
@media (min-width: 1024px) {
  .rule-change--compact .rule-change__paragraphs {
    padding-right: calc(var(--space-2xl) * 2);
  }
}

.rule-change__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-m);
}

@media (min-width: 1024px) {
  .rule-change__content {
    flex: 1;
  }
}

.rule-change__paragraphs {
  display: flex;
  flex-direction: column;
  gap: 1.3em; /* Figma: linha em branco entre parágrafos, ~26px sobre 20px */
}

/* Mais respiro à direita dos parágrafos (a pedido do usuário) — só no
   desktop, onde o texto fica ao lado da foto; no mobile (empilhado) o
   gutter lateral padrão já basta. */
@media (min-width: 1024px) {
  .rule-change__paragraphs {
    padding-right: var(--space-2xl);
  }
}

.rule-change__text {
  margin: 0;
  color: #767676; /* Colours-Acredity/neutral/500 */
  font-size: var(--rates-row-label-size); /* Figma: 20px, bate exato */
  line-height: 1.3; /* Figma: 26px sobre 20px */
  letter-spacing: -0.036em; /* Figma: -0.72px */
}

.rule-change__text strong {
  color: var(--color-primary);
  font-weight: 400;
}

.rule-change__text--highlight {
  color: var(--color-primary);
  font-weight: 400;
}

/* Botão "Veja se você tem crédito disponível" (Figma node 4061:1302) —
   variante própria: rosa sólido + ícone de olho, maior que os CTAs
   padrão do site (89% da altura do "Simule Agora" — próximo o
   suficiente pra reaproveitar os mesmos tokens de padding). */
/* Padronizado com o resto dos CTAs do site (.btn--clt/.btn--inss no
   hero/barra fixa) — fonte, peso e padding eram maiores que o padrão
   geral (usava --rates-row-label-size/20px + --btn-primary-pad-*,
   pensado pro botão "Simule Agora" bem maior do nav, não pra um CTA de
   seção comum). Só a cor (rosa/branco) continua própria dessa seção. */
.rule-change__cta {
  background: var(--color-primary);
  color: var(--color-white);
  padding: var(--btn-pad-block) var(--btn-pad-inline);
}

.rule-change__photo-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 590 / 688; /* Figma: 590x688 */
  /* Era var(--audience-card-radius) — reduzido a pedido do usuário,
     igual ao card "Possibilidade de crédito" (0.875rem). */
  border-radius: 0.875rem;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .rule-change__photo-frame {
    width: 49%;
    flex-shrink: 0;
  }
}

.rule-change__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

/* Card de vidro sobre a foto (Figma node 4564:1380) — 179x172 no Figma
   (escalado via --badge-scale), ancorado no canto inferior esquerdo da
   foto (ver --badge-offset). Vidro
   cinza translúcido + blur leve, ícone Solar (eye) branco, traço branco
   de 32px e texto branco. z-index:1 pra ficar acima da camada da foto,
   que o initPinnedImage (js/script.js) deixa position:fixed. */
.rule-change__badge {
  /* Escala do card inteiro em relação às medidas do Figma (a pedido do
     usuário: "é maior") — mudar só este número aumenta/diminui tudo
     junto (largura, respiros, ícone, traço, texto), sem distorcer. */
  --badge-scale: 1.4;
  /* Distância até as bordas da foto — a pedido do usuário: ancorado
     embaixo (era top 29.36%, Figma), recuo da esquerda dobrado (Figma:
     15px → 30px) e o mesmo valor embaixo. Um token só pros dois lados,
     pra ficarem sempre iguais. */
  --badge-offset: 2.5rem; /* era 1.875rem — aumentado a pedido do usuário */
  /* Respiro interno próprio (a pedido do usuário: "um padding legal"),
     igual nos 4 lados — separado do --badge-scale pra o card crescer
     pelo respiro sem aumentar ícone/texto. */
  --badge-pad: 2.75rem;
  position: absolute;
  bottom: var(--badge-offset);
  left: var(--badge-offset);
  z-index: 1;
  /* Largura = coluna de texto do Figma (131px, escalada) + respiro dos
     dois lados — o card cresce junto com o padding. */
  width: calc(8.1875rem * var(--badge-scale) + 2 * var(--badge-pad));
  padding: var(--badge-pad);
  /* Mais opaco e mais desfocado que o Figma (era 0.32 de opacidade e blur
     de 2.25px) — a pedido do usuário, o texto branco tinha pouca leitura
     sobre as partes claras da foto. 0.55 ficou pesado demais; meio-termo. */
  /* Mesmo vidro dos cards "A ACREDITY" da home (.audience-card__overlay),
     a pedido do usuário — era rgba(70, 70, 70, 0.42) + blur(0.5rem). */
  background: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(0.80625rem);
  backdrop-filter: blur(0.80625rem); /* Figma: 12.9px */
  border-radius: 0.875rem; /* Figma: 7px — padronizado com as outras seções */
  color: var(--color-white);
}

.rule-change__badge-icon {
  display: block;
  width: calc(1.6875rem * var(--badge-scale)); /* Figma: 27px */
  height: calc(1.6875rem * var(--badge-scale));
  filter: brightness(0) invert(1); /* SVG vem rosa — força branco */
}

.rule-change__badge-rule {
  display: block;
  width: calc(2rem * var(--badge-scale)); /* Figma: 32px */
  height: 1px;
  margin: calc(0.8125rem * var(--badge-scale)) 0 calc(0.9375rem * var(--badge-scale)); /* Figma: 13px do ícone, 15px até o texto */
  background: var(--color-white);
}

.rule-change__badge-text {
  margin: 0;
  font-size: calc(1rem * var(--badge-scale)); /* Figma: 16px */
  line-height: 1.08;
}

/* Mobile: foto bem mais estreita — card volta perto do tamanho do Figma
   pra não cobrir a pessoa. */
@media (max-width: 1023px) {
  .rule-change__badge {
    --badge-scale: 1;
    --badge-offset: var(--space-s);
    --badge-pad: 1.5rem;
  }
}

/* ---------- About (página INSS, entre "Como faz?" e FAQ — Figma node
   4577:1534, "Conectamos você às melhores opções de crédito"). Bloco rosa
   com o MESMO fundo animado do site (.breath-bg
   #aboutGradientCanvas) e o MESMO card de vidro de Vantagens
   (.opportunity-card: fundo, blur, borda de reflexo compartilhada) —
   só o layout interno é daqui. Figma (1204x774): card 466x601 a 68px da
   borda, foto 603x606 colada ao lado (6px de vão). */
.about {
  width: 100%;
  background: var(--color-white);
}

.about__inner {
  max-width: 90rem;
  margin: 0 auto;
  padding: var(--section-gap) var(--hero-pad-inline);
}

.about__visual {
  position: relative;
  border-radius: 0.875rem; /* Figma: 41px — padrão do site */
  overflow: hidden;
  contain: paint;
  transform: translateZ(0);
  background: var(--color-primary);
}

.about__content {
  position: relative; /* acima das camadas do gradiente (absolute) */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-s);
  padding: var(--space-m);
}

@media (min-width: 1024px) {
  .about__content {
    /* Figma: card 466 | vão 6 | foto 603, com ~68px de respiro em volta */
    grid-template-columns: minmax(0, 466fr) minmax(0, 603fr);
    gap: 0.375rem;
    padding: 4.25rem;
    align-items: stretch;
  }
}

.about__card {
  /* .opportunity-card já traz vidro/blur/borda e padding; aqui só o
     alinhamento do conteúdo — bloco (título, linha, texto e botão)
     centralizado na VERTICAL e alinhado à ESQUERDA, a pedido do usuário. */
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-l);
  text-align: left;
}

.about__title {
  margin: 0;
  color: var(--color-white);
  font-weight: 400;
  /* 0.8x do Figma (56px → ~45px no desktop), a pedido do usuário. */
  font-size: calc(var(--connect-title-size) * 0.8);
  line-height: 1;
  letter-spacing: -0.05em; /* Figma: -2.8px */
}

.about__text {
  margin: 0;
  max-width: 21rem; /* Figma: ~336px */
  color: #f3edff; /* Figma: status/error/bg */
  font-size: var(--audience-text-size); /* Figma: 16px */
  line-height: 1.5; /* Figma: 24px */
}

.about__photo {
  display: block;
  width: 100%;
  aspect-ratio: 603 / 606; /* Figma: máscara 603x606 */
  object-fit: cover;
  object-position: center 20%;
  border-radius: 0.875rem; /* Figma: 36px — padrão do site */
}

@media (min-width: 1024px) {
  .about__photo {
    /* Estica na altura da linha do grid (card e foto sempre da mesma
       altura, como no Figma). */
    height: 100%;
  }
}

/* ---------- Reveal band (todas as páginas, logo depois da 2ª seção:
   INSS entre "Nova regra" e "Menor juros"; home/CLT depois de "A
   Acredity") — referência: nubank.com.br/home2 ("O melhor cartão de crédito
   para o seu perfil"). Faixa de 100% da altura da tela com fundo animado
   e título gigante FIXOS (position:fixed); a seção funciona como uma
   janela que rola por cima dessa camada: ao entrar, vai revelando o
   título parado no centro; ao sair, a próxima seção cobre ele.
   clip-path: inset(0) na seção é o que recorta a camada fixa no formato
   da janela — overflow:hidden NÃO serve (não recorta filho fixo de forma
   confiável, DESIGN-SYSTEM.md 9.4). Nenhum ancestral pode ter transform/
   filter (viraria o containing block do fixed) — a seção fica direto no
   <body>. Gradiente: mesmo fallback CSS + shader WebGL do resto do site
   (#revealGradientCanvas, js/script.js). */
.reveal-band {
  position: relative;
  height: 100vh;
  height: 100dvh;
  clip-path: inset(0);
  background: var(--color-primary); /* base antes do gradiente entrar */
}

/* Faixa logo depois do hero (sobre-nos.html): sem o vão branco do
   margin-bottom do .hero — a faixa rosa encosta direto na foto. */
.hero:has(+ .reveal-band) {
  margin-bottom: 0;
}

.reveal-band__layer {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* só pro fallback CSS (inset -15%) não gerar scroll */
  background: var(--color-primary);
  pointer-events: none;
}

.reveal-band__title {
  position: relative; /* acima do gradiente (absolute) */
  margin: 0;
  max-width: 11ch; /* quebra em ~3 linhas, como a referência */
  padding-inline: var(--hero-pad-inline);
  box-sizing: content-box;
  color: var(--color-white);
  font-weight: 400; /* era 500 — mais leve a pedido do usuário, igual aos outros títulos */
  font-size: clamp(3rem, 1.5rem + 6.4vw, 9rem); /* 48–144px */
  line-height: 0.95;
  letter-spacing: -0.04em;
  text-align: center;
}

/* Frase mais longa (sobre-nos.html: "A Acredity nasceu do simples ato de
   acreditar.") — fonte menor e linha mais larga pra caber na altura da
   tela sem virar 6+ linhas. 40–104px. */
.reveal-band__title--long {
  max-width: 14ch;
  font-size: clamp(2.5rem, 1.0915rem + 6.009vw, 6.5rem);
}

/* Palavras de destaque da faixa no amarelo da marca. */
.reveal-band__accent {
  color: var(--color-amber);
}

/* ---------- Margin table (página INSS: comparação "Benefício atual" x
   "Nova Margem", Figma node 4578:1682) — cada linha é UMA pílula cinza
   com as 4 colunas de valor ligadas por círculos brancos com seta rosa
   (3 por linha). Cliente reclamou que títulos não ficavam alinhados aos
   valores: agora cabeçalho e linhas usam EXATAMENTE o mesmo template de
   grid (--margin-table-cols) e o mesmo padding lateral, então cada título
   cai obrigatoriamente em cima da sua coluna. Sem frame mobile no Figma:
   em telas estreitas vira scroll horizontal com largura mínima. */
.margin-table {
  width: 100%;
  background: var(--color-white);
  /* 7 colunas: texto | seta | texto | seta | texto | seta | resultado.
     Calculado do Figma (pílula de 1204px): colunas de texto ~196px, setas
     de 48px com 24px de respiro de cada lado, resultado ~1.35x mais
     largo — as colunas começam em 31/323/615/907px (Figma: 31/327/616/909). */
  --margin-table-cols: minmax(0, 1fr) 3rem minmax(0, 1fr) 3rem minmax(0, 1fr) 3rem minmax(0, 1.35fr);
  --margin-table-gap: 1.5rem;
  --margin-table-pad: 1.9375rem; /* Figma: 31px da borda da pílula até o texto */
}

.margin-table__inner {
  max-width: 90rem;
  margin: 0 auto;
  padding: var(--section-gap) var(--hero-pad-inline);
}

.margin-table__scroll {
  overflow-x: auto;
  /* overflow-x:auto sozinho já converte overflow-y pra "auto" também —
     trava em hidden pra nunca criar barra de scroll vertical fantasma. */
  overflow-y: hidden;
  margin-top: var(--space-l);
}

.margin-table__table {
  display: flex;
  flex-direction: column;
  gap: 0.5625rem; /* Figma: 9px entre as linhas */
  /* Abaixo disso as colunas esmagam os valores — vira scroll horizontal. */
  min-width: 50rem;
}

/* Cabeçalho e linhas: MESMO grid e MESMO padding lateral. */
.margin-table__head-row,
.margin-table__row {
  display: grid;
  grid-template-columns: var(--margin-table-cols);
  column-gap: var(--margin-table-gap);
  align-items: center;
  padding-inline: var(--margin-table-pad);
}

/* ---------- Cabeçalho ---------- */
.margin-table__head-row {
  align-items: stretch; /* bordas-inferiores na mesma altura nas 4 colunas */
  /* Figma: 19px da linha do cabeçalho até a 1ª pílula (somado ao gap de
     9px do .margin-table__table). */
  margin-bottom: 0.625rem;
}

/* Títulos nas colunas de texto (1, 3, 5, 7) — as de seta ficam vazias. */
.margin-table__head:nth-child(1) { grid-column: 1; }
.margin-table__head:nth-child(2) { grid-column: 3; }
.margin-table__head:nth-child(3) { grid-column: 5; }
.margin-table__head:nth-child(4) { grid-column: 7; }

.margin-table__head {
  width: min(11.5625rem, 100%); /* Figma: linha de 185px, não a coluna inteira */
  margin: 0;
  padding-bottom: 0.5rem;
  /* Linha pontilhada padrão (ver .rates__divider) embaixo do título. */
  background-position: bottom left;
  color: var(--color-primary);
  font-weight: 300; /* Figma: Rubik Light (era bold) */
  font-size: var(--rates-row-label-size); /* Figma: 20px */
  line-height: 0.95; /* Figma: 19px */
  letter-spacing: -0.008em; /* Figma: -0.16px */
}

.margin-table__head-sub {
  display: block;
  font-weight: 400;
  font-size: 0.625rem; /* Figma: 10px */
  line-height: 1.9; /* Figma: 19px */
  letter-spacing: 0;
}

/* ---------- Linhas ---------- */
.margin-table__row {
  background: #ffffff;
  border-radius: 0.875rem; /* Figma: 14px */
}

.margin-table__cell {
  margin: 0;
  /* Figma: pílula de 71px de altura, texto de 24px de line-height */
  padding-block: 1.46875rem;
  color: #979797; /* Colours-Acredity/neutral/300 */
  font-size: var(--rates-row-label-size); /* Figma: 20px */
  line-height: 1.2;
  letter-spacing: -0.008em;
  white-space: nowrap;
}

/* Círculo branco com seta rosa entre as colunas (Figma: 48px). */
.margin-table__arrow {
  display: block;
  width: 3rem;
  height: 3rem;
}

/* Resultado ("Possibilidade de crédito"): número grande escuro com "R$"
   rosa e menor, alinhado com o topo do número (Figma: 26px / 16px). */
.margin-table__cell--result {
  padding-block: 1.25rem;
  color: #1d1d1d;
  font-size: 1.625rem; /* Figma: 26px */
  line-height: 1.15;
  letter-spacing: -0.0104em; /* Figma: -0.27px */
}

.margin-table__result-currency {
  color: var(--color-primary);
  font-size: 1rem;
  vertical-align: text-top;
}

.margin-table__note {
  margin: var(--space-2xs) 0 0; /* Figma: 8px abaixo da última linha */
  max-width: 45.5rem; /* Figma: 728px */
  color: #858585; /* Figma: Colours-Acredity/neutral/400 */
  font-size: 0.6875rem; /* Figma: 11px */
  line-height: 2.7; /* Figma: 30px */
}

/* Mobile: texto e imagem continuam lado-a-lado (não empilhados, ver
   comentário de commit anterior), mas cada um agora ocupa a largura
   inteira da tela (menos a margem lateral padrão) em vez de espremer os
   dois lado a lado numa faixa estreita — ficava "extremamente apertado"
   (texto quebrando em 6-7 linhas, imagem cortada numa tira fina). Sem
   problema o card ficar bem mais largo que a tela: é um scroll
   horizontal, a pessoa já vai arrastar mesmo — primeiro aparece o
   texto/ícone ocupando a tela toda, continuando o arrasto aparece a
   foto ocupando a tela toda. flex-shrink:0 nos dois garante que nenhum
   encolhe pra "ajudar" o outro a caber — cada um É o próprio slide. */
@media (max-width: 1023px) {
  .benefit-card {
    width: auto; /* definida pelos filhos (texto + gap + imagem), não pelo clamp() fluido de desktop */
    /* Conteúdo (ícone/título/texto) colado no topo, a pedido do usuário
       — só no mobile, desktop continua centralizado (align-items:center
       na regra base acima). */
    align-items: flex-start;
  }

  .benefit-card__text {
    flex-shrink: 0;
    width: calc(100vw - 2 * var(--hero-pad-inline));
    /* box-sizing:border-box (global) — o padding entra DENTRO da largura
       acima, não soma a ela. Sem isso o texto ficava colado na borda do
       próprio slide (e visualmente "colado" no próximo slide, a foto). */
    padding: 1em;
  }

  .benefit-card__image {
    flex: none;
    width: calc(100vw - 2 * var(--hero-pad-inline));
  }
}

.benefit-card__image {
  flex: 1;
  /* sem isso, o default flexbox (min-width:auto) deixa o item recusar
     encolher abaixo do próprio "min-content" — numa <img> isso volta a
     ser guiado pela proporção intrínseca da foto, estourando a largura
     pra muito além da sobra real (~94px) e invadindo o próximo card
     lateralmente. Só reproduzia no fallback mobile (scroll nativo, sem
     o pin) porque lá o container vira overflow-x:auto, que dá margem
     pro item "vazar" em vez de ficar contido. */
  min-width: 0;
  align-self: stretch;
  height: 100%;
  object-fit: cover;
  border-radius: var(--audience-card-radius);
}

/* Cantos da esquerda zerados só na variante "cartão branco" (a pedido do
   usuário) — espelha .benefit-card--boxed .benefit-card__text (cantos da
   direita zerados lá), pra foto e cartão ficarem colados como uma peça
   só. Escopado a --boxed pra não afetar o card "solto" (sem caixa
   branca) usado de backup nas outras páginas. */
.benefit-card--boxed .benefit-card__image {
  /* Era var(--audience-card-radius) — reduzido a pedido do usuário,
     igual ao card "Possibilidade de crédito" (0.875rem). */
  border-radius: 0 0.875rem 0.875rem 0;
}

/* ---------- FAQ ---------- */

.faq {
  width: 100%;
  background: var(--color-white);
}

.faq__inner {
  max-width: 90rem;
  margin: 0 auto;
  padding: var(--section-gap) var(--hero-pad-inline);
}

.faq__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.faq__title {
  text-align: center;
}

.faq__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.faq__item {
  /* Era border-bottom: 1px solid #d9d9d9 — agora linha pontilhada padrão
     (ver .rates__divider), a pedido do usuário. */
  background-position: bottom left;
}

.faq__item--last {
  background-image: none;
}

/* Cabeçalho clicável (pergunta) — vira <button> ao inteiro em vez de só o
   ícone "+", pra área de clique maior e semântica correta de acordeão
   (aria-expanded/aria-controls, ver js/script.js initFaqAccordion). */
.faq__row {
  display: flex;
  align-items: center;
  width: 100%;
  gap: var(--space-m);
  /* Era var(--space-l) (32–36px) — menor junto com a fonte das perguntas,
     a pedido do usuário. */
  padding-block: var(--space-m);
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.faq__number {
  flex-shrink: 0;
  color: var(--color-primary);
  font-weight: 400;
  /* 0.8x (a pedido do usuário: perguntas menores) — multiplicado aqui,
     sem mexer nos tokens compartilhados. */
  font-size: calc(var(--faq-number-size) * 0.8); /* ~18–26px */
  letter-spacing: -0.05em;
}

.faq__question {
  flex: 1;
  color: #383838;
  font-size: calc(var(--steps-text-size) * 0.8); /* ~14–19px */
  letter-spacing: -0.02em;
}

.faq__toggle {
  /* Novo visual a pedido do usuário (Figma node 4476:967, "ico-acordeon"):
     fundo rosa claro (mesmo --color-error-bg dos badges) com o "+" na
     cor primária, em vez do quadrado rosa sólido com "+" branco de antes. */
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Era clamp(2rem, …, 2.5rem)/32–40px (Figma) — menor junto com o texto
     das perguntas. */
  width: clamp(1.75rem, 1.6rem + 0.6vw, 2rem); /* 28–32px */
  height: clamp(1.75rem, 1.6rem + 0.6vw, 2rem);
  border-radius: 0.375rem; /* Figma: 6px */
  background: var(--color-error-bg);
  color: var(--color-primary);
  transition: opacity 0.2s ease;
}

.faq__row:hover .faq__toggle {
  opacity: 0.85;
}

.faq__toggle-icon {
  width: 55%;
  height: 55%;
  transition: transform 0.3s ease;
}

/* "+" gira 45° e vira "×" quando aberto — sem precisar de um ícone novo. */
.faq__item.is-open .faq__toggle-icon {
  transform: rotate(45deg);
}

/* Animação de altura sem JS medindo pixels: grid-template-rows anima de
   0fr (fechado, sem altura) pra 1fr (altura real do conteúdo) — truque
   moderno que funciona com "height:auto" de verdade, ao contrário de
   max-height (que precisa de um valor arbitrário grande demais/de menos)
   ou de JS lendo scrollHeight (recalcula errado se o conteúdo mudar de
   tamanho, ex: reflow de fonte). overflow:hidden no filho corta o
   conteúdo enquanto a altura ainda está animando. */
.faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}

.faq__item.is-open .faq__answer {
  grid-template-rows: 1fr;
}

.faq__answer-inner {
  display: flex;
  gap: var(--space-m);
  overflow: hidden;
}

/* Espaçador do mesmo "peso" visual do número — alinha o texto da resposta
   embaixo da pergunta, não da margem esquerda inteira da lista. */
.faq__answer-spacer {
  flex-shrink: 0;
  width: var(--faq-number-size);
}

.faq__answer-text {
  flex: 1;
  margin: 0;
  padding-bottom: var(--space-l);
  color: #767676;
  font-size: var(--audience-text-size);
  line-height: 1.6;
}

.faq__answer-steps {
  flex: 1;
  margin: 0;
  padding: 0 0 var(--space-l);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  color: #767676;
  font-size: var(--audience-text-size);
  line-height: 1.5;
  counter-reset: faq-step;
}

.faq__answer-steps li {
  display: flex;
  gap: var(--space-2xs);
}

.faq__answer-steps li::before {
  counter-increment: faq-step;
  content: counter(faq-step) '.';
  flex-shrink: 0;
  color: var(--color-primary);
  font-weight: 700;
}

/* ---------- Footer ---------- */

.site-footer__bar {
  width: 100%;
  background: var(--color-amber);
  padding: var(--space-l) 0;
}

.site-footer__tagline {
  max-width: 90rem;
  margin: 0 auto;
  padding-inline: var(--hero-pad-inline);
  /* Era var(--color-white) — preto a pedido do usuário (mais contraste
     sobre a faixa âmbar). */
  color: var(--color-black);
  font-size: var(--footer-tagline-size);
  line-height: 1.2;
}

.site-footer__tagline strong {
  font-weight: 400;
}

.site-footer__tagline-light {
  font-weight: 500;
}

.site-footer__main {
  width: 100%;
  /* Era gradiente rosa (#15131c -> #2a2433, ver histórico) — trocado por
     cor sólida a pedido do usuário. */
  background: #303030;
}

.site-footer__inner {
  max-width: 90rem;
  margin: 0 auto;
  padding: var(--section-gap) var(--hero-pad-inline);
}

.site-footer__columns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xl) var(--space-2xl);
}

.footer-col__title {
  margin: 0 0 var(--space-m);
  color: var(--color-amber);
  font-weight: 400;
  font-size: var(--rates-row-label-size);
  text-transform: capitalize;
}

.footer-col__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.footer-col__list a {
  color: var(--color-white);
  font-size: var(--audience-text-size);
}

.footer-col__list a:hover {
  text-decoration: underline;
}

.site-footer__divider {
  margin: var(--space-2xl) 0;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.site-footer__brand-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-l);
  margin-bottom: var(--space-2xl);
}

@media (min-width: 1024px) {
  .site-footer__brand-row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.site-footer__logo {
  width: clamp(6.25rem, 3.75rem + 8vw, 8.3125rem); /* Figma: 100–133px */
  height: auto;
}

.site-footer__social {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-s);
}

.site-footer__social-label {
  color: var(--color-amber);
  font-weight: 400;
  font-size: var(--audience-text-size);
}

.site-footer__social-icons {
  display: flex;
  gap: var(--space-s);
}

.site-footer__social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem; /* Figma: 32px */
  height: 2rem;
  color: var(--color-white);
  transition: opacity 0.2s ease;
}

.site-footer__social-icons a:hover {
  opacity: 0.75;
}

.site-footer__social-icon {
  width: 100%;
  height: 100%;
}

.site-footer__legal {
  margin: 0;
  color: var(--color-white);
  font-size: var(--badge-text-size);
  line-height: 1.6;
  letter-spacing: 0.01em;
}

/* Crédito dos ícones Solar (licença CC BY 4.0) — discreto, logo abaixo
   do texto legal. */
.site-footer__credits {
  margin-top: var(--space-s);
  opacity: 0.6;
}

.site-footer__credits a {
  color: inherit;
  text-decoration: underline;
}

/* ==========================================================================
   BLOG (blog.html, blog-noticias.html, blog-post.html) — inspirado nos
   frames do Figma "Blog" (4601:1144), "Blog/Noticias" (4601:1516) e
   "Blog/Detalhe" (4601:831), adaptado ao guia da V3: fonte Rubik, peso
   400 com destaque só por cor, raio de card 14px, linha pontilhada
   padrão (ver .rates__divider), tokens de espaçamento do site, nav e
   rodapé padrão. Fotos baixadas do próprio Figma (images/blog-*.jpg).
   ========================================================================== */

/* Páginas sem hero: o conteúdo começa abaixo do .nav fixo (altura medida
   ~5.6rem no desktop; sobra um respiro). */
.blog-page {
  padding-top: clamp(4.5rem, 3.95rem + 2.35vw, 6.25rem);
}

/* ---------- Faixa de alerta "Proteja-se de golpes" (Figma: BarraAlerta)
   — rosa da marca, texto branco, link e botão de fechar (JS). */
.blog-alert {
  background: var(--color-primary);
  color: var(--color-white);
}

.blog-alert__inner {
  max-width: 90rem;
  margin: 0 auto;
  padding: var(--space-2xs) var(--hero-pad-inline);
  display: flex;
  align-items: center;
  gap: var(--space-s);
  font-size: var(--hero-ui-text-size);
  line-height: 1.4;
}

.blog-alert__icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  filter: brightness(0) invert(1); /* SVG Solar vem rosa — força branco */
}

.blog-alert__text {
  flex: 1;
  margin: 0;
}

.blog-alert__text strong {
  font-weight: 500;
}

.blog-alert__link {
  flex-shrink: 0;
  color: var(--color-white);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.blog-alert__close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: var(--color-white);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.blog-alert__close:hover {
  background: rgba(255, 255, 255, 0.15);
}

@media (max-width: 767px) {
  .blog-alert__link {
    display: none; /* sem espaço no celular — o texto principal fica */
  }
}

/* ---------- Cabeçalho do blog: título + Filtros + Busca, linha embaixo. */
.blog-head__inner {
  max-width: 90rem;
  margin: 0 auto;
  padding: var(--section-gap) var(--hero-pad-inline) 0;
}

.blog-head__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

@media (min-width: 1024px) {
  .blog-head__row {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.blog-head__title {
  margin: 0;
  color: #212121;
  font-weight: 400;
  font-size: var(--connect-title-size);
  line-height: 1;
  letter-spacing: -0.05em;
}

.blog-head__tools {
  display: flex;
  gap: var(--space-s);
  flex-wrap: wrap;
}

/* Botão "Filtros" (cinza, ícone de lista) + lista de categorias. */
.blog-filter {
  position: relative;
}

.blog-filter__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-s);
  height: 3.5rem;
  padding: 0 var(--space-m);
  border: 0;
  border-radius: 0.875rem;
  background: #ffffff;
  color: var(--color-primary);
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
}

.blog-filter__toggle svg {
  width: 1.25rem;
  height: 1.25rem;
}

.blog-filter__list {
  position: absolute;
  top: calc(100% + var(--space-2xs));
  left: 0;
  z-index: 5;
  min-width: 14rem;
  margin: 0;
  padding: var(--space-2xs);
  list-style: none;
  background: var(--color-white);
  border-radius: 0.875rem;
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.12);
}

.blog-filter__option {
  display: block;
  width: 100%;
  padding: var(--space-2xs) var(--space-s);
  border: 0;
  border-radius: 0.625rem;
  background: transparent;
  color: #494949;
  font: inherit;
  font-size: 0.9375rem;
  text-align: left;
  cursor: pointer;
}

.blog-filter__option:hover,
.blog-filter__option.is-active {
  background: var(--color-error-bg);
  color: var(--color-primary);
}

/* Busca: campo com contorno + botão quadrado rosa com lupa. */
.blog-search {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  flex: 1 1 18rem;
  height: 3.5rem;
  padding: 0 0.25rem 0 var(--space-s);
  border: 1px solid #cdcdcd;
  border-radius: 0.875rem;
  background: var(--color-white);
}

@media (min-width: 1024px) {
  .blog-search {
    flex: 0 0 27.6875rem; /* Figma: 443px */
  }
}

.blog-search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #212121;
  font: inherit;
  font-size: 1rem;
  outline: none;
}

.blog-search__input::placeholder {
  color: #767676;
}

.blog-search:focus-within {
  border-color: var(--color-primary);
}

.blog-search__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.9375rem; /* Figma: 47px */
  height: 2.9375rem;
  padding: 0;
  border: 0;
  border-radius: 0.625rem;
  background: var(--color-primary);
  cursor: pointer;
}

.blog-search__btn img {
  width: 1.25rem;
  height: 1.25rem;
  filter: brightness(0) invert(1);
}

/* Aviso quando o filtro/busca não encontra nada. */
.blog-empty {
  margin: var(--space-l) 0 0;
  color: #767676;
  font-size: var(--audience-text-size);
}

/* ---------- Seção genérica do blog (grid do site). */
.blog-section__inner {
  max-width: 90rem;
  margin: 0 auto;
  padding: var(--section-gap) var(--hero-pad-inline);
}

.blog-section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-m);
  margin-bottom: var(--space-l);
}

.blog-section__title {
  margin: 0;
  color: #212121;
  font-weight: 400;
  font-size: var(--hero-subtitle-size);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.blog-section__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--color-primary);
  font-size: var(--hero-ui-text-size);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.blog-section__more svg {
  width: 1.1em;
  height: 1.1em;
}

/* ---------- Etiqueta de categoria (Figma: pílulas pastel por categoria). */
.blog-tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 0.5rem 0.75rem;
  border-radius: 9999px;
  background: #ececec;
  color: #212121;
  font-size: 0.75rem;
  font-weight: 300;
  line-height: 1;
  white-space: nowrap;
}

.blog-tag--inss { background: #d2ffce; }
.blog-tag--clt { background: #d6ecff; }
.blog-tag--edu { background: #fffcce; }
.blog-tag--beneficio { background: #eadcff; }

/* ---------- Data com ícone de calendário (linha pontilhada em cima). */
.blog-date {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin: 0;
  padding-top: var(--space-s);
  color: #8e8e8e;
  font-size: 0.8125rem;
  background-position: top left;
}

.blog-date img {
  width: 1.25rem;
  height: 1.25rem;
}

/* ---------- Card de notícia (Figma: cardNoticias 01, 260x471): foto em
   cima, corpo cinza com etiqueta encostada na foto, título rosa, texto,
   pontilhado e data. O card inteiro é o link. */
.blog-card {
  display: flex;
}

.blog-card[hidden] {
  display: none;
}

.blog-card__link {
  display: flex;
  flex-direction: column;
  width: 100%;
  color: inherit;
  text-decoration: none;
  border-radius: 0.875rem;
  overflow: hidden;
  background: #ffffff;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.blog-card__link:hover {
  transform: translateY(-0.25rem);
  box-shadow: 0 0.75rem 1.75rem rgba(0, 0, 0, 0.08);
}

.blog-card__link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.blog-card__media {
  aspect-ratio: 260 / 171; /* Figma */
  overflow: hidden;
}

.blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blog-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: 0 var(--space-m) var(--space-m);
}

/* Etiqueta meio em cima da foto (Figma: 15px pra fora do corpo). */
.blog-card__body .blog-tag {
  margin-top: -1rem;
  position: relative;
}

.blog-card__title {
  margin: var(--space-2xs) 0 0;
  color: var(--color-primary);
  font-weight: 400;
  font-size: clamp(1.125rem, 1.037rem + 0.376vw, 1.3125rem); /* Figma: 21px */
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.blog-card__text {
  margin: 0;
  color: #494949;
  font-size: var(--audience-text-size);
  line-height: 1.5;
  /* Resumo sempre com 3 linhas — os cards da fileira ficam alinhados. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card .blog-date {
  margin-top: auto;
}

/* Grade de cards: 4 colunas no desktop (Figma: 260px + 24px), 2 no
   tablet, 1 no celular. */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-m);
}

@media (min-width: 1024px) {
  .blog-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------- Destaque principal + lista "Destaques" ao lado. */
.blog-top {
  display: grid;
  gap: var(--space-m);
}

@media (min-width: 1024px) {
  .blog-top {
    grid-template-columns: 637fr 448fr; /* Figma */
    align-items: stretch;
  }
}

.blog-feature .blog-card__media {
  aspect-ratio: 637 / 426; /* Figma */
}

.blog-feature .blog-card__body {
  gap: var(--space-s);
  padding: var(--space-l) var(--space-xl) var(--space-l);
}

.blog-feature .blog-card__title {
  margin: 0;
  font-size: clamp(1.5rem, 1.148rem + 1.502vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.blog-feature .blog-card__text {
  -webkit-line-clamp: 4;
}

.blog-highlights {
  padding: var(--space-l) var(--space-xl);
  border-radius: 0.875rem;
  background: #ffffff;
}

.blog-highlights__title {
  margin: 0;
  padding-bottom: var(--space-s);
  color: #494949;
  font-weight: 400;
  font-size: var(--rates-row-label-size);
  background-position: bottom left;
}

.blog-highlights__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.blog-highlights__item {
  background-position: bottom left;
}

.blog-highlights__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-m) 0;
  color: inherit;
  text-decoration: none;
}

.blog-highlights__link:hover .blog-highlights__item-title {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.blog-highlights__item-title {
  margin: 0;
  color: var(--color-primary);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.3;
}

.blog-highlights__item-text {
  margin: 0;
  color: #494949;
  font-size: 0.9375rem;
  line-height: 1.45;
}

.blog-highlights__item-date {
  align-self: flex-end;
  color: #8e8e8e;
  font-size: 0.8125rem;
}

/* ---------- Card horizontal ("Mais lidas" da home): foto à esquerda,
   texto à direita (Figma: 260x263 + coluna de 258px). */
.blog-mini-grid {
  display: grid;
  gap: var(--space-l) var(--space-m);
}

@media (min-width: 1024px) {
  .blog-mini-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.blog-mini__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-m);
  color: inherit;
  text-decoration: none;
}

.blog-mini__link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 0.875rem;
}

.blog-mini__media {
  aspect-ratio: 260 / 263; /* Figma */
  border-radius: 0.875rem;
  overflow: hidden;
}

.blog-mini__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.blog-mini__link:hover .blog-mini__media img {
  transform: scale(1.04);
}

.blog-mini__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.blog-mini__body .blog-card__title {
  margin: 0;
}

.blog-mini__body .blog-date {
  margin-top: auto;
}

/* ---------- Botão "Carregar mais notícias" (centralizado). */
.blog-more {
  display: flex;
  justify-content: center;
  margin-top: var(--space-xl);
}

.blog-more .btn {
  justify-content: center;
}

/* ---------- Newsletter. No Figma é amarela, mas aqui ficaria colada na
   faixa amarela do rodapé da V3 (viravam um bloco só) — rosa da marca com
   texto branco (contraste ok) e botão branco (.btn--inverse). */
.newsletter {
  background: var(--color-primary);
}

.newsletter__inner {
  max-width: 90rem;
  margin: 0 auto;
  padding: calc(var(--section-gap) * 2) var(--hero-pad-inline);
}

.newsletter__title {
  margin: 0;
  color: var(--color-white);
  font-weight: 400;
  font-size: var(--connect-title-size);
  line-height: 1;
  letter-spacing: -0.05em;
}

.newsletter__subtitle {
  margin: var(--space-xs) 0 var(--space-l);
  color: var(--color-white);
  font-size: var(--rates-row-label-size);
}

.newsletter__fields {
  display: grid;
  gap: var(--space-s);
}

@media (min-width: 768px) {
  .newsletter__fields {
    grid-template-columns: 1fr 1fr;
  }
}

.newsletter__input {
  width: 100%;
  height: 3.75rem; /* Figma: 60px */
  padding: 0 var(--space-m);
  border: 1px solid transparent;
  border-radius: 0.875rem;
  background: var(--color-white);
  color: #212121;
  font: inherit;
  font-size: 1rem;
}

.newsletter__input::placeholder {
  color: #767676;
}

.newsletter__input:focus {
  outline: 2px solid var(--color-amber);
  outline-offset: 2px;
}

.newsletter__legal {
  margin: var(--space-s) 0 var(--space-l);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.875rem;
  line-height: 1.5;
}

.newsletter__legal a {
  color: inherit;
  text-decoration: underline;
}

.newsletter__ok {
  margin: var(--space-s) 0 0;
  color: var(--color-white);
  font-weight: 500;
}

/* ---------- Página do artigo ---------- */

/* Banner: foto com degradê escuro da esquerda e o título branco. */
.post-banner {
  position: relative;
  overflow: hidden;
  height: clamp(17.5rem, 12.25rem + 22.4vw, 32.5rem); /* 280–520px */
}

.post-banner__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.post-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.75) 6%, rgba(0, 0, 0, 0) 80%);
}

.post-banner__inner {
  position: relative;
  z-index: 1;
  height: 100%;
  max-width: 90rem;
  margin: 0 auto;
  padding: 0 var(--hero-pad-inline);
  display: flex;
  align-items: center;
}

.post-banner__title {
  margin: 0;
  max-width: 16em;
  color: var(--color-white);
  font-weight: 400;
  font-size: var(--connect-title-size);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

/* Corpo: coluna centralizada (Figma: 921px). */
.post {
  max-width: calc(57.5rem + 2 * var(--hero-pad-inline));
  margin: 0 auto;
  padding: var(--space-l) var(--hero-pad-inline) var(--section-gap);
}

.post__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding-bottom: var(--space-s);
  color: #767676;
  font-size: var(--hero-ui-text-size);
  background-position: bottom left;
}

.post__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  color: #212121;
  font-weight: 500;
}

.post__back svg {
  width: 1.1em;
  height: 1.1em;
  transform: rotate(180deg); /* chevron "voltar" */
}

.post__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  margin: var(--space-l) 0;
}

/* Caixa "Compartilhar" (Figma: cinza arredondado com 4 ícones). */
.post-share {
  display: inline-flex;
  align-items: center;
  gap: var(--space-s);
  padding: 0.375rem var(--space-xs) 0.375rem var(--space-m);
  border-radius: 9999px;
  background: #ffffff;
  color: #494949;
  font-size: 0.875rem;
}

.post-share__icons {
  display: flex;
  gap: 0.25rem;
}

.post-share__icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  color: var(--color-primary);
  transition: background-color 0.2s ease;
}

.post-share__icons a:hover {
  background: var(--color-error-bg);
}

.post-share__icons svg,
.post-share__icons img {
  width: 1.375rem;
  height: 1.375rem;
}

.post-share--end {
  display: flex;
  width: fit-content;
  margin: var(--space-xl) 0 0 auto;
}

/* Tipografia do texto. */
.post__lead {
  margin: 0 0 var(--space-xl);
  color: var(--color-primary);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.148rem + 1.502vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.post__h2 {
  margin: var(--space-xl) 0 var(--space-s);
  color: #212121;
  font-weight: 400;
  font-size: var(--hero-subtitle-size);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.post__p {
  margin: 0 0 var(--space-s);
  color: #494949;
  font-size: clamp(1rem, 0.956rem + 0.188vw, 1.125rem); /* Figma: 18px */
  line-height: 1.6;
}

.post__p strong {
  color: var(--color-primary);
  font-weight: 400;
}

/* Bloco foto + texto lado a lado (Figma: foto 448x358 + texto 450). */
.post-media {
  display: grid;
  gap: var(--space-m);
  margin: var(--space-l) 0;
  align-items: start;
}

@media (min-width: 768px) {
  .post-media {
    grid-template-columns: 1fr 1fr;
  }
}

.post-media__img {
  width: 100%;
  aspect-ratio: 448 / 358;
  object-fit: cover;
  border-radius: 0.875rem;
  display: block;
}

/* Caixa de exemplo (fundo rosa clarinho, destaque em rosa). */
.post-example {
  padding: var(--space-m);
  border-radius: 0.875rem;
  background: var(--color-error-bg);
}

.post-example__title {
  margin: 0 0 var(--space-2xs);
  color: var(--color-primary);
  font-size: var(--rates-row-label-size);
  font-weight: 400;
}

.post-example .post__p:last-child {
  margin-bottom: 0;
}

/* Vídeo (capa com botão de play — sem player ainda). */
.post-video {
  position: relative;
  margin: var(--space-l) 0;
  border-radius: 0.875rem;
  overflow: hidden;
}

.post-video img {
  display: block;
  width: 100%;
  aspect-ratio: 921 / 491; /* Figma */
  object-fit: cover;
}

.post-video__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: clamp(4rem, 3.12rem + 3.756vw, 6.5rem);
  height: clamp(4rem, 3.12rem + 3.756vw, 6.5rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 3px solid var(--color-white);
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.15);
  color: var(--color-white);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.post-video__play:hover {
  background: var(--color-primary);
  transform: scale(1.05);
}

.post-video__play svg {
  width: 40%;
  height: 40%;
  margin-left: 8%;
}

/* Lista com check (Figma: "Quem tem direito"). */
.post-checklist {
  margin: var(--space-m) 0 0;
  padding: 0;
  list-style: none;
}

.post-checklist li {
  display: flex;
  gap: var(--space-s);
  align-items: flex-start;
  padding: var(--space-s) 0;
  color: #494949;
  font-size: clamp(1rem, 0.956rem + 0.188vw, 1.125rem);
  line-height: 1.5;
}

.post-checklist li:not(:last-child) {
  background-position: bottom left;
}

.post-checklist img {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.05em;
}

/* "Mais lidas" no fim do artigo: faixa cinza. */
.blog-related {
  background: var(--color-surface-soft, #f8f8f8);
}

.blog-related .blog-card__link {
  background: var(--color-white);
}

@media (prefers-reduced-motion: reduce) {
  .blog-card__link,
  .blog-mini__media img,
  .post-video__play {
    transition: none;
  }
}

/* O desenho do icon-whatsapp2.svg ocupa só ~39% da própria caixa (26 de
   67px) — a imagem precisa ser maior que o botão pra o símbolo ficar do
   tamanho dos outros ícones (~1.35rem). Sobra transparente, não aparece. */
.post-share__icons img {
  width: 3.5rem;
  height: 3.5rem;
  max-width: none;
}

/* Artigo: o cabeçalho do blog não tem a linha embaixo, então precisa de
   respiro antes do banner. */
.blog-head + .post-banner {
  margin-top: var(--section-gap);
}
/* ==========================================================================
   BLOG — HOME EDITORIAL (blog.html), inspirada em grist.org até o 4º
   scroll: cabeçalho de revista (data | temas | todos os temas), abertura
   em 3 colunas (manchete+foto | Últimas | Destaques), lista "Recentes"
   (texto | foto), frase-manifesto com os temas grifados + blocos por tema,
   e "Escolhas da equipe". Adaptado ao guia da V3: Rubik, rosa/amarelo da
   marca no lugar do verde-limão, divisórias pontilhadas, raio 14px.
   ========================================================================== */

.mag {
  max-width: 90rem;
  margin: 0 auto;
  padding: 0 var(--hero-pad-inline);
}

/* Meta pequena (autor · tema · data) usada em todo lugar. */
.mag-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  margin: 0;
  color: #767676;
  font-size: 0.8125rem;
  line-height: 1.3;
}

.mag-meta__sep::before {
  content: '·';
}

.mag-meta__topic {
  color: var(--color-primary);
}

/* Tema como etiqueta colorida (.blog-tag, a mesma dos cards) dentro da
   linha de meta — um pouco mais compacta pra caber ao lado da data. */
.mag-meta .blog-tag {
  padding: 0.375rem 0.625rem;
  font-size: 0.6875rem;
}

.mag-byline {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin: 0;
  color: #494949;
  font-size: 0.875rem;
}

.mag-byline img {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0.3rem;
  border-radius: 9999px;
  background: var(--color-error-bg);
}

/* Links de título: sem sublinhado, sublinha no hover (padrão de revista). */
.mag-link {
  color: inherit;
  text-decoration: none;
}

.mag-link:hover .mag-hover,
.mag-link:focus-visible .mag-hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

.mag-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 0.25rem;
}

/* Rótulo de seção ("Últimas", "Recentes"...) com pontilhado embaixo. */
.mag-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-s);
  margin: 0 0 var(--space-s);
  padding-bottom: var(--space-2xs);
  color: #212121;
  font-weight: 400;
  font-size: 0.9375rem;
  background-position: bottom left;
}

.mag-label--big {
  font-size: var(--rates-row-label-size);
}

.mag-label a {
  color: var(--color-primary);
  font-size: 0.8125rem;
}

/* ---------- 1. Cabeçalho de revista: título à esquerda, Filtros + busca
   à direita (mesmos componentes do .blog-head das outras páginas). ---- */
.mag-masthead {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  padding: var(--space-l) 0 var(--space-m);
}

@media (min-width: 1024px) {
  .mag-masthead {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.mag-masthead__title {
  margin: 0;
  color: #212121;
  font-weight: 400;
  /* 24–40px — era --connect-title-size (32–56px), menor a pedido do usuário. */
  font-size: clamp(1.5rem, 1.148rem + 1.502vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.05em;
}

.mag-masthead__title span {
  color: var(--color-primary);
}
/* Linha: data | temas | todos os temas. */
.mag-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-m);
  padding: var(--space-2xs) 0;
  color: #212121;
  font-size: 0.8125rem;
  background-position: bottom left;
}

.mag-topbar__topics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mag-topbar__topics li + li::before {
  content: '·';
  margin-right: 0.75rem;
  color: #b3b3b3;
}

.mag-topbar a {
  color: inherit;
}

.mag-topbar a:hover {
  color: var(--color-primary);
}

/* ---------- 2. Abertura em 3 colunas ---------- */
.mag-open {
  display: grid;
  gap: var(--space-xl) var(--space-l);
  padding: var(--space-l) 0 var(--space-xl);
}

@media (min-width: 1024px) {
  .mag-open {
    /* Manchete | Destaques. Era 7fr | 2fr | 2fr com a coluna "Últimas" no
       meio — ela saiu a pedido do usuário e as duas colunas cresceram. */
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    gap: var(--space-xl) var(--space-2xl);
  }
}

/* Manchete maior (era 28–52px) e Destaques com título maior (era 17px). */
.mag-open .mag-lead__title {
  font-size: clamp(1.875rem, 1.215rem + 2.817vw, 3.75rem); /* 30–60px */
}

.mag-open .mag-feat__item .mag-list__title {
  font-size: clamp(1.125rem, 1.081rem + 0.188vw, 1.25rem); /* 18–20px */
}

.mag-lead__title {
  margin: 0 0 var(--space-s);
  color: #212121;
  font-weight: 400;
  font-size: clamp(1.75rem, 1.222rem + 2.254vw, 3.25rem); /* 28–52px */
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.mag-lead__dek {
  max-width: 40rem;
  margin: 0 0 var(--space-s);
  color: #494949;
  font-size: var(--rates-row-label-size);
  line-height: 1.45;
}

.mag-lead__media {
  margin: var(--space-m) 0 0;
  border-radius: 0.875rem;
  overflow: hidden;
}

.mag-lead__media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.mag-link:hover .mag-lead__media img {
  transform: scale(1.02);
}

/* Faixa "Newsletters" embaixo da manchete. */
.mag-letters {
  margin-top: var(--space-xl);
}

.mag-letters__list {
  display: grid;
  gap: var(--space-s);
}

@media (min-width: 768px) {
  .mag-letters__list {
    grid-template-columns: 1fr 1fr;
  }

  .mag-letters__item + .mag-letters__item {
    padding-left: var(--space-s);
    border-left: 1px solid #d9d9d9;
  }
}

.mag-letters__item {
  display: flex;
  gap: var(--space-s);
  align-items: flex-start;
}

.mag-letters__tile {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.625rem;
  background: var(--color-amber);
  color: #212121;
  font-size: 1.5rem;
  line-height: 1;
}

.mag-letters__tile--pink {
  background: var(--color-primary);
  color: var(--color-white);
}

.mag-letters__name {
  margin: 0 0 0.125rem;
  color: #212121;
  font-size: 0.8125rem;
}

.mag-letters__desc {
  margin: 0;
  color: #494949;
  font-size: 0.9375rem;
  line-height: 1.4;
}

/* Coluna "Últimas": só texto, separado por pontilhado. */
.mag-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mag-list__item {
  padding: var(--space-s) 0;
}

.mag-list__item:not(:last-child) {
  background-position: bottom left;
}

.mag-list__item:first-child {
  padding-top: 0;
}

.mag-list__title {
  margin: 0 0 var(--space-2xs);
  color: #212121;
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.3;
}

/* Coluna "Destaques": foto + título. */
.mag-feat__item {
  padding: var(--space-s) 0;
}

.mag-feat__item:first-child {
  padding-top: 0;
}

.mag-feat__item:not(:last-child) {
  background-position: bottom left;
}

.mag-feat__media {
  margin-bottom: var(--space-2xs);
  border-radius: 0.625rem;
  overflow: hidden;
}

.mag-feat__media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ---------- 3. Recentes: linhas texto | foto ---------- */
.mag-recent {
  padding: var(--space-xl) 0;
}

.mag-row {
  padding: var(--space-l) 0;
}

.mag-row:not(:last-child) {
  background-position: bottom left;
}

.mag-row__link {
  display: grid;
  gap: var(--space-m);
  align-items: start;
}

@media (min-width: 768px) {
  .mag-row__link {
    grid-template-columns: minmax(0, 1fr) minmax(0, 18.75rem); /* foto ~300px */
    gap: var(--space-2xl);
  }
}

.mag-row__title {
  margin: 0 0 var(--space-xs);
  color: #212121;
  font-weight: 400;
  font-size: var(--hero-subtitle-size);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.mag-row__dek {
  max-width: 34rem;
  margin: 0 0 var(--space-s);
  color: #494949;
  font-size: var(--audience-text-size);
  line-height: 1.5;
}

.mag-row__media {
  border-radius: 0.875rem;
  overflow: hidden;
}

.mag-row__media img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.mag-link:hover .mag-row__media img {
  transform: scale(1.03);
}

@media (max-width: 767px) {
  .mag-row__media {
    order: -1; /* celular: foto em cima */
  }
}

/* ---------- 4. Temas: frase-manifesto + blocos por tema ---------- */
.mag-topics {
  padding: var(--space-xl) 0;
}

.mag-manifesto {
  margin: var(--space-l) 0 var(--space-2xl);
  color: #9a9a9a;
  font-weight: 400;
  font-size: clamp(2rem, 1.12rem + 3.756vw, 4.5rem); /* 32–72px */
  line-height: 1.12;
  letter-spacing: -0.04em;
}

/* Temas grifados com marca-texto amarelo (Grist: verde-limão). */
.mag-manifesto a {
  color: #212121;
  background: linear-gradient(transparent 12%, var(--color-amber) 12%, var(--color-amber) 92%, transparent 92%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0 0.08em;
  text-decoration: none;
  transition: background-size 0.2s ease, color 0.2s ease;
}

.mag-manifesto a:hover {
  color: var(--color-white);
  background: linear-gradient(transparent 12%, var(--color-primary) 12%, var(--color-primary) 92%, transparent 92%);
}

.mag-topic-grid {
  display: grid;
  gap: var(--space-xl) var(--space-l);
}

@media (min-width: 1024px) {
  .mag-topic-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.mag-topic__body {
  display: grid;
  gap: var(--space-m);
}

@media (min-width: 768px) {
  .mag-topic__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.mag-topic__main .mag-feat__media img {
  aspect-ratio: 4 / 3;
}

.mag-topic__main-title {
  margin: 0 0 var(--space-2xs);
  color: #212121;
  font-weight: 400;
  font-size: 1.1875rem;
  line-height: 1.25;
}

/* ---------- 5. Escolhas da equipe ---------- */
.mag-picks {
  padding: var(--space-xl) 0 var(--section-gap);
}

.mag-pick-main__link {
  display: grid;
  gap: var(--space-m);
  align-items: center;
}

@media (min-width: 1024px) {
  .mag-pick-main__link {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-xl);
  }
}

.mag-pick-main__media {
  border-radius: 0.875rem;
  overflow: hidden;
  background: var(--color-primary);
}

.mag-pick-main__media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.mag-link:hover .mag-pick-main__media img {
  transform: scale(1.02);
}

.mag-pick-main__title {
  margin: 0 0 var(--space-s);
  color: #212121;
  font-weight: 400;
  font-size: var(--connect-title-size);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.mag-picks__row {
  display: grid;
  gap: var(--space-l) var(--space-m);
  margin-top: var(--space-xl);
}

@media (min-width: 768px) {
  .mag-picks__row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .mag-lead__media img,
  .mag-row__media img,
  .mag-pick-main__media img,
  .mag-manifesto a {
    transition: none;
  }
}

/* Fileira de "Escolhas da equipe": cards lado a lado — sem o pontilhado
   de lista vertical do .mag-feat__item (ficava em 2 dos 3). */
.mag-picks__row .mag-feat__item {
  padding: 0;
  background-image: none;
}

/* Texto só pra leitor de tela/SEO (ex.: o h1 "Blog Acredity"). */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   BLOG HOME — "primeira tela" (a pedido do usuário: ao abrir, tem que
   aparecer título + resumo + a foto inteira da manchete).
   ========================================================================== */

/* Topo: o conteúdo começa logo abaixo do .nav fixo (sem respiro extra). */
.blog-page:has(.mag) {
  padding-top: var(--blog-nav-offset, 4.75rem);
}

/* Faixa única data | temas | Filtros + busca (compactos). */
.mag-topbar {
  padding: var(--space-xs) 0;
}

.mag-topbar__tools {
  margin-left: auto;
  flex-wrap: nowrap;
}

.mag-topbar .blog-filter__toggle,
.mag-topbar .blog-search {
  height: 2.75rem;
}

.mag-topbar .blog-search {
  flex: 0 1 18rem;
}

.mag-topbar .blog-search__btn {
  width: 2.25rem;
  height: 2.25rem;
}

@media (max-width: 1023px) {
  .mag-topbar__tools {
    width: 100%;
    margin-left: 0;
  }

  .mag-topbar .blog-search {
    flex: 1 1 auto;
  }
}

/* Abertura mais compacta. */
.mag-open {
  padding-top: var(--space-m);
}

.mag-open .mag-lead__title {
  font-size: clamp(1.625rem, 1.273rem + 1.502vw, 2.625rem); /* 26–42px */
  margin-bottom: var(--space-xs);
}

/* "Mais vistos": foto do destaque mais baixa (era 16:10) a pedido do
   usuário — o recorte puxa um pouco pra cima pra manter os rostos. */
.mag-pick-main__media img {
  aspect-ratio: 2 / 1;
  object-position: center 30%;
}

/* "Mais vistos": título do destaque grande no MESMO tamanho da manchete
   da abertura (a pedido do usuário; era --connect-title-size, 32–56px). */
.mag-pick-main__title {
  font-size: clamp(1.625rem, 1.273rem + 1.502vw, 2.625rem); /* 26–42px */
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.mag-open .mag-lead__dek {
  font-size: var(--audience-text-size);
  margin-bottom: var(--space-xs);
}

.mag-open .mag-lead__media {
  margin-top: var(--space-s);
}

/* Desktop: a foto da manchete tem altura pela TELA — sempre cabe inteira
   no primeiro scroll (100svh menos menu + faixa + título/resumo ≈ 25rem).
   E a coluna Destaques se ajusta a essa altura (as fotos dela encolhem),
   então a base das duas colunas continua alinhada. */
@media (min-width: 1024px) {
  .mag-open .mag-lead__media img {
    height: clamp(15rem, calc(100svh - 25rem), 34rem);
    aspect-ratio: auto;
  }

  .mag-open > section {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .mag-open .mag-feat__item {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .mag-open .mag-feat__item:last-child {
    padding-bottom: 0;
  }

  .mag-open .mag-feat__item > .mag-link {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .mag-open .mag-feat__media {
    flex: 1 1 0;
    min-height: 3.5rem;
  }

  .mag-open .mag-feat__media img {
    height: 100%;
    aspect-ratio: auto;
  }

  /* A grade não deixa a coluna Destaques ditar a altura: ela acompanha a
     manchete (contain:size na coluna + stretch da grade). */
  .mag-open > section {
    contain: size;
    height: 100%;
  }
}
/* Newsletter do blog no componente .about (card de vidro estreito):
   campos um embaixo do outro, textos brancos sobre o vidro rosa. */
.newsletter-about .about__text {
  /* Era --space-m (somava com o gap do card = ~48px até o form) — agora
     só o gap do card fica entre o texto e os campos (a pedido do usuário). */
  margin-bottom: 0;
}

.newsletter-about .newsletter__fields {
  grid-template-columns: 1fr;
  gap: var(--space-xs);
}

.newsletter-about .newsletter__input {
  height: 3.25rem;
}

.newsletter-about .newsletter__legal {
  margin: var(--space-s) 0 var(--space-m);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.8125rem;
}

.newsletter-about .newsletter__ok {
  color: var(--color-white);
}
/* Campos "espelhados" escuros (a pedido do usuário): vidro escuro
   translúcido + desfoque, borda clarinha de reflexo, texto branco — em vez
   do campo branco chapado. */
.newsletter-about .newsletter__input {
  /* Só a borda, sem fundo (a pedido do usuário; testados vidro escuro e
     vidro claro). */
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.7);
  color: var(--color-white);
}

.newsletter-about .newsletter__input::placeholder {
  color: rgba(255, 255, 255, 0.92);
}

.newsletter-about .newsletter__input:focus {
  outline: none;
  border-color: var(--color-white);
  background: transparent;
  box-shadow: 0 0 0 1px var(--color-white);
}

/* Autocompletar do navegador pinta o campo de branco/amarelo — mantém o
   vidro escuro e o texto branco. */
.newsletter-about .newsletter__input:-webkit-autofill {
  -webkit-text-fill-color: var(--color-white);
  -webkit-box-shadow: 0 0 0 100px rgba(45, 38, 66, 0.95) inset;
  caret-color: var(--color-white);
}
/* O gradiente animado (.breath-bg) é maior que a
   caixa, então com overflow:hidden ela PODE rolar por dentro — e o
   navegador rola sozinho ao focar um campo do formulário, subindo o
   conteúdo e deixando uma faixa rosa vazia embaixo (bug visto no teste).
   overflow:clip recorta igual, mas não permite rolagem nenhuma. */
.newsletter-about .about__visual {
  overflow: clip;
}
/* Newsletter: título → linha pontilhada → parágrafo com o MESMO respiro
   (a pedido do usuário). Antes era gap do card (--space-l) + margem de
   cima da linha (--space-m) = vão grande em cima, e só --space-m embaixo. */
.newsletter-about .about__card {
  gap: var(--space-m);
}

.newsletter-about .about__text::before {
  margin: 0 0 var(--space-m);
}
/* Destaques (abertura, desktop): fotos em faixa em cima do título (como
   antes), mas com 2 matérias em vez de 3 — com 3 a foto ficava ~70px de
   altura e cortava a cabeça das pessoas; com 2 fica perto de 16:9. O
   recorte puxa pra cima pra manter os rostos. */
@media (min-width: 1024px) {
  .mag-open .mag-feat__media img {
    object-position: center 22%;
  }

  /* Título sempre com altura de 2 linhas: as 2 fotos ficam do MESMO
     tamanho mesmo quando um título tem 1 linha só. */
  .mag-open .mag-feat__item .mag-list__title {
    min-height: 2.6em; /* 2 × line-height 1.3 */
  }
}
/* ==========================================================================
   BESSACONT — camada da marca sobre a base da V3 da Acredity.
   Paleta: vinho #15131c (= --color-primary), verde #C199F8
   (= --color-amber, o "amarelo" da base), verde clarinho #f3edff
   (= --color-error-bg). Texto sobre o verde = vinho/escuro (contraste).
   ========================================================================== */
:root {
  --bessa-ink: #15131c;
  --bessa-ink-deep: #0f0d14;
  --bessa-lilac: #C199F8;
  --bessa-soft: #f3edff;
}

/* ---------- Logo (texto, sem arquivo de marca ainda) ---------- */
.brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--bessa-ink);
  text-decoration: none;
  line-height: 1;
}

.brand-logo__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  background: var(--bessa-ink);
  color: var(--bessa-lilac);
  font-size: 1.25rem;
  font-weight: 500;
}

.brand-logo__text {
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: -0.03em;
}

.brand-logo__text strong {
  font-weight: 500;
}

.brand-logo--light {
  color: var(--color-white);
}

.brand-logo--light .brand-logo__mark {
  background: var(--bessa-lilac);
  color: var(--bessa-ink);
}

/* Botões do hero lado a lado (2 CTAs). */
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}

/* Destaques em texto corrido no verde da marca ficam ilegíveis sobre
   branco — o "accent" da faixa (sobre o vinho animado) continua verde. */
.reveal-band__accent {
  color: var(--bessa-lilac);
}

/* ---------- 2. Números + segmentos ---------- */
.bessa-stats {
  background: var(--color-white);
}

.bessa-stats__inner {
  max-width: 90rem;
  margin: 0 auto;
  padding: var(--section-gap) var(--hero-pad-inline);
}

.bessa-stats__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-l) var(--space-m);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 1024px) {
  .bessa-stats__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .bessa-stats__item + .bessa-stats__item {
    padding-left: var(--space-l);
    border-left: 1px solid #d9d9d9;
  }
}

.bessa-stats__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.bessa-stats__value {
  color: var(--bessa-ink);
  font-weight: 400;
  font-size: clamp(3rem, 1.944rem + 4.507vw, 6rem); /* 48–96px */
  line-height: 0.95;
  letter-spacing: -0.05em;
}

.bessa-stats__value small {
  font-size: 0.45em;
  letter-spacing: -0.02em;
}

.bessa-stats__label {
  color: #494949;
  font-size: var(--rates-row-label-size);
}

.bessa-stats__segments {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s);
  margin-top: var(--space-xl);
  padding-top: var(--space-m);
  border-top: 1px solid #d9d9d9;
}

.bessa-stats__segments-label {
  color: #767676;
  font-size: 0.9375rem;
}

.bessa-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bessa-chips li {
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  background: var(--bessa-soft);
  border: 1px solid var(--bessa-lilac);
  color: var(--bessa-ink);
  font-size: 0.875rem;
}

/* ---------- Listas com check (planos, card da solução) ---------- */
.bessa-checks {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
  color: #494949;
  font-size: var(--audience-text-size);
  line-height: 1.4;
}

.bessa-checks li {
  display: flex;
  gap: var(--space-xs);
  align-items: flex-start;
}

.bessa-checks svg {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.05em;
  padding: 0.15rem;
  border-radius: 9999px;
  background: var(--bessa-lilac);
  color: var(--bessa-ink);
}

.bessa-checks--light {
  color: var(--color-white);
}

.opportunity-card__item .bessa-checks {
  margin-top: var(--space-m);
}

/* ---------- 8. Planos ---------- */
.bessa-plans {
  background: var(--color-white);
}

.bessa-plans__inner {
  max-width: 90rem;
  margin: 0 auto;
  padding: var(--section-gap) var(--hero-pad-inline);
}

.bessa-plans__grid {
  display: grid;
  gap: var(--space-m);
  margin-top: var(--space-l);
  align-items: stretch;
}

@media (min-width: 1024px) {
  .bessa-plans__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.bessa-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-xl) var(--space-l);
  border-radius: 0.875rem;
  background: #ffffff;
}

.bessa-plan--featured {
  background: var(--bessa-ink);
  color: var(--color-white);
}

.bessa-plan__flag {
  position: absolute;
  top: var(--space-m);
  right: var(--space-m);
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
  background: var(--bessa-lilac);
  color: var(--bessa-ink);
  font-size: 0.75rem;
  font-weight: 500;
}

.bessa-plan__name {
  margin: 0;
  color: var(--bessa-ink);
  font-weight: 400;
  font-size: var(--hero-subtitle-size);
  letter-spacing: -0.03em;
}

.bessa-plan--featured .bessa-plan__name {
  color: var(--bessa-lilac);
}

.bessa-plan__for {
  margin: 0;
  color: #767676;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.bessa-plan--featured .bessa-plan__for {
  color: rgba(255, 255, 255, 0.8);
}

.bessa-plan__price {
  margin: var(--space-xs) 0 var(--space-s);
  padding-bottom: var(--space-s);
  color: #212121;
  /* Menor que um número solto e sem quebra: as faixas ("400 a 700")
     cabem numa linha só e os 3 preços ficam alinhados. */
  font-size: clamp(1.875rem, 1.567rem + 1.315vw, 2.75rem); /* 30–44px */
  line-height: 1;
  letter-spacing: -0.04em;
  white-space: nowrap;
  border-bottom: 1px solid #d9d9d9;
}

.bessa-plan--featured .bessa-plan__price {
  color: var(--color-white);
  border-bottom-color: rgba(255, 255, 255, 0.25);
}

.bessa-plan__price small,
.bessa-plan__price em,
.bessa-plan__price span {
  font-size: 0.4em;
  font-style: normal;
  letter-spacing: 0;
}

.bessa-plan__price span {
  color: #767676;
}

.bessa-plan--featured .bessa-plan__price span {
  color: rgba(255, 255, 255, 0.7);
}

.bessa-plan .bessa-checks {
  flex: 1;
}

.bessa-plan__cta {
  align-self: flex-start;
  margin-top: var(--space-m);
}

.bessa-plans__note {
  margin: var(--space-m) 0 0;
  color: #767676;
  font-size: 0.875rem;
}

/* ---------- 9. Processo: 4 etapas ---------- */
.bessa-steps {
  background: var(--bessa-soft);
}

.bessa-steps__inner,
.bessa-quotes__inner {
  max-width: 90rem;
  margin: 0 auto;
  padding: calc(var(--section-gap) * 1.5) var(--hero-pad-inline);
}

.bessa-steps__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-m);
  margin-bottom: var(--space-xl);
}

.bessa-steps__list {
  display: grid;
  gap: var(--space-l);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .bessa-steps__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .bessa-steps__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.bessa-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-top: var(--space-l);
  border-top: 2px solid var(--bessa-ink);
}

.bessa-step__num {
  color: var(--bessa-ink);
  font-size: clamp(2.5rem, 1.972rem + 2.254vw, 4rem);
  line-height: 1;
  letter-spacing: -0.05em;
}

.bessa-step__title {
  margin: 0;
  color: #212121;
  font-weight: 400;
  font-size: var(--rates-row-label-size);
}

.bessa-step__text {
  margin: 0;
  color: #494949;
  font-size: var(--audience-text-size);
  line-height: 1.5;
}

/* ---------- 10. Depoimentos ---------- */
.bessa-quotes {
  background: var(--color-white);
}

.bessa-quotes__grid {
  display: grid;
  gap: var(--space-m);
}

@media (min-width: 1024px) {
  .bessa-quotes__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.bessa-quote {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-l);
  margin: 0;
  padding: var(--space-xl) var(--space-l);
  border-radius: 0.875rem;
  background: #ffffff;
}

.bessa-quote__text {
  margin: 0;
  color: #212121;
  font-size: var(--rates-row-label-size);
  line-height: 1.5;
}

.bessa-quote__text::before {
  content: '“';
  display: block;
  margin-bottom: var(--space-xs);
  color: var(--bessa-ink);
  font-size: 4rem;
  line-height: 0.6;
}

.bessa-quote__text strong {
  color: var(--bessa-ink);
  font-weight: 400;
}

.bessa-quote__who {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  color: #767676;
  font-size: 0.875rem;
  line-height: 1.4;
}

.bessa-quote__who strong {
  display: block;
  color: #212121;
  font-weight: 500;
  font-size: 1rem;
}

.bessa-quote__avatar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  background: var(--bessa-ink);
  color: var(--bessa-lilac);
  font-weight: 500;
}

/* ---------- 11. Diagnóstico (form no card de vidro) ---------- */
.bessa-diag .about__card .badge {
  align-self: flex-start;
}

.bessa-diag .newsletter__fields {
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .bessa-diag .newsletter__fields {
    grid-template-columns: 1fr 1fr;
  }

  .bessa-diag .newsletter__fields > :first-child,
  .bessa-diag .newsletter__fields > select {
    grid-column: 1 / -1;
  }
}

/* select com a mesma cara dos campos (só borda) + seta própria. */
.bessa-diag select.newsletter__input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.5rem;
  background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) 52%, calc(100% - 0.9rem) 52%;
  background-size: 0.35rem 0.35rem;
  background-repeat: no-repeat;
  cursor: pointer;
}

.bessa-diag select.newsletter__input:invalid {
  color: rgba(255, 255, 255, 0.92);
}

.bessa-diag select.newsletter__input option {
  color: #212121;
}

/* ---------- Rodapé: fundo vinho bem escuro (era cinza #303030). ---------- */
.site-footer__main {
  background: var(--bessa-ink-deep);
}

.site-footer__bar .site-footer__tagline {
  color: var(--bessa-ink);
}

/* Descrição do plano sempre com altura de 3 linhas: preço, lista e botão
   ficam na mesma altura nos 3 cards. */
@media (min-width: 1024px) {
  .bessa-plan__for {
    min-height: 4.5em; /* 3 × line-height 1.5 */
  }
}

/* ==========================================================================
   FUNDO ANIMADO — gradiente radial que "respira" (substitui o shader WebGL
   antigo). Portado do componente React AnimatedGradientBackground pra
   CSS + JS puro (initBreathingGradients em js/script.js, que pinta o
   radial-gradient na .breath-bg__layer e anima o raio).
   Entrada: fade + zoom 1.5 → 1 em 2s quando o bloco entra na tela
   (.is-in, colocada pelo JS). O container precisa ser position:relative e
   o conteúdo dele ficar acima (os componentes já fazem isso).
   ========================================================================== */
.breath-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transform: scale(1.5);
  transition:
    opacity 2s cubic-bezier(0.25, 0.1, 0.25, 1),
    transform 2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.breath-bg.is-in {
  opacity: 1;
  transform: none;
}

.breath-bg__layer {
  position: absolute;
  inset: 0;
}

/* Hero sem foto: fundo escuro de base (aparece antes da entrada). */
.hero--breath .hero__card {
  background: #0f0d14;
}

.hero--breath .hero__content {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .breath-bg {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* ==========================================================================
   Tipografia Bessacont: Geist (no lugar da Rubik) e títulos de UMA cor só —
   sem a "brincadeira" da Acredity de título em duas cores (início cinza +
   fim preto, palavra destacada em rosa nos cards, destaques coloridos na
   faixa). Os spans de cor saíram do HTML; isto neutraliza o que sobrou
   (ex.: a 2ª linha dos títulos de Diferenciais é um <span> de quebra).
   ========================================================================== */
.section-title,
.section-title--muted,
.section-title--dark,
.tips__card-title,
.tips__card-title--dark,
.process-list__title,
.process-list__title span,
.benefit-card__title span,
.reveal-band__accent {
  color: inherit;
}

.section-title,
.tips__card-title,
.process-list__title {
  color: #1c1c1c;
}

/* Sobre os fundos vinho (Diferenciais), títulos brancos inteiros. */
.benefits-scroll .section-title {
  color: var(--color-white);
}

/* Geist é mais estreita e "fechada" que a Rubik — tracking negativo
   menor nos títulos grandes pra não colar as letras. */
.section-title,
.hero__title,
.reveal-band__title,
.bessa-stats__value,
.opportunity__title,
.about__title {
  letter-spacing: -0.035em;
}
/* ==========================================================================
   BESSACONT — identidade própria, CLEAN (desvinculada da Acredity)
   Site claro (referência: highnote.com): página off-white quente, cards
   brancos, texto grafite. NADA de fundo escuro/preto — a cor entra só nos
   gradientes pastel (lilás #C199F8 + azul #9CDAFE) dos blocos de destaque,
   nos botões e nas caixinhas de ícone.
   SEM vidro/espelhado (backdrop-filter, degradê translúcido, borda de
   reflexo) — tudo sólido. Ícones: Solar BOLD (preenchidos).
   ========================================================================== */
:root {
  --bessa-blue: #9cdafe;
  --bessa-blue-soft: #eaf7ff;
  --bessa-paper: #f6f5f1; /* fundo da página */
  --bessa-card: #ffffff; /* cards sobre o papel */
  --bessa-line: rgba(21, 19, 28, 0.08);
  --bessa-muted: #5e5a66; /* texto de apoio */
}

/* ---------- Página e seções: tudo no mesmo papel claro ---------- */
body,
.nav,
.process,
.opportunity,
.tips,
.about,
.faq,
.bessa-stats,
.bessa-plans,
.bessa-quotes,
.benefits-scroll,
.site-footer__main {
  background: var(--bessa-paper);
}

.benefits-scroll .benefits-scroll__progress {
  background: var(--bessa-line);
}

/* ---------- Sem vidro em lugar nenhum ---------- */
.badge--glass,
.benefit-card--boxed .benefit-card__text,
.opportunity-card,
.floating-cta,
.nav-pill,
.rule-change__badge,
.terms__notification {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.benefit-card--boxed .benefit-card__text::before,
.opportunity-card::before {
  content: none;
}

/* ---------- Ritmo de cor: gradiente SÓ no hero. O resto alterna o papel
   com blocos de cor SÓLIDA suave (lilás / azul clarinhos), pra cada seção
   ter corte claro da vizinha (papel → faixa lilás → papel → bloco azul…). ---------- */
:root {
  --bessa-lilac-block: #eee5fd;
  --bessa-blue-block: #e2f3fe;
}

.hero--breath .hero__card {
  background: var(--bessa-paper);
}

/* Faixa 1 (+20 estados) e diagnóstico: lilás sólido */
.reveal-band,
.reveal-band__layer,
.about__visual {
  background: var(--bessa-lilac-block);
}

/* Solução, processo e faixa final: azul sólido */
.opportunity__visual,
.bessa-steps,
.reveal-band--blue,
.reveal-band--blue .reveal-band__layer {
  background: var(--bessa-blue-block);
}

/* Barra fixa: branca */
.floating-cta {
  background: var(--bessa-card);
}

/* Pílulas dentro dos blocos coloridos: brancas (a lilás clarinha sumia) */
.opportunity__visual .badge,
.about__visual .badge,
.bessa-steps .badge {
  background: var(--bessa-card);
}

/* Textos que eram brancos sobre o escuro → grafite */
.hero__title,
.hero__desc,
.reveal-band__title,
.opportunity__title,
.opportunity__subtitle,
.opportunity-card__title,
.opportunity-card__desc,
.benefits-scroll .section-title,
.benefits-scroll .section-title--muted,
.benefits-scroll .section-title--dark,
.benefit-card--boxed .benefit-card__title,
.benefit-card--boxed .benefit-card__title span,
.benefit-card--boxed .benefit-card__desc,
.about__title,
.about__text,
.floating-cta__text,
.newsletter-about .newsletter__ok,
.bessa-checks--light {
  color: #15131c;
}

.hero__desc,
.opportunity__subtitle,
.opportunity-card__desc,
.benefit-card--boxed .benefit-card__desc,
.about__text,
.benefits-scroll .section-note,
.newsletter-about .newsletter__legal {
  color: var(--bessa-muted);
}

/* Cards sobre os blocos: brancos, sem borda pesada */
.opportunity-card,
.benefit-card--boxed .benefit-card__text {
  background: var(--bessa-card);
  background-image: none;
  border: 1px solid var(--bessa-line);
}

.benefit-card--boxed .benefit-card__text {
  border-right: 0; /* encosta na foto */
}

/* Formulário do diagnóstico: inputs brancos com borda fina */
.newsletter-about .newsletter__input {
  border: 1px solid var(--bessa-line);
  background: var(--bessa-card);
  color: #15131c;
}

.newsletter-about .newsletter__input::placeholder,
.bessa-diag select.newsletter__input:invalid {
  color: var(--bessa-muted);
}

.newsletter-about .newsletter__input:focus {
  border-color: var(--bessa-lilac);
}

/* ---------- Pílulas: lilás clarinho, texto grafite ---------- */
.badge,
.badge--glass,
.benefits-scroll .badge,
.hero__eyebrow {
  background: var(--bessa-soft);
  color: #15131c;
  font-weight: 400;
}

/* ---------- Botões: principal lilás com texto grafite, secundário branco ---------- */
.btn--primary,
.btn--clt,
.rule-change__cta {
  background: var(--bessa-lilac);
  color: #15131c;
}

.btn--primary:hover,
.btn--clt:hover,
.rule-change__cta:hover {
  background: var(--bessa-blue);
}

.btn--inss,
.btn--inverse {
  background: var(--color-white);
  color: #15131c;
  box-shadow: inset 0 0 0 1px var(--bessa-line);
}

.btn--inss:hover,
.btn--inverse:hover {
  background: var(--bessa-soft);
}

/* ---------- Ícones (Solar Bold, grafite) em caixinha lilás clarinho ---------- */
.opportunity-card__icon,
.benefit-card--boxed .benefit-card__icon,
.process-list__icon-bg,
.process-list__item .process-list__icon-bg {
  filter: none;
  border-color: transparent;
  /* Direção de arte: ícone Solar Bold BRANCO numa pastilha com o gradiente
     da marca (lilás → azul, a mesma luz do hero) — cor viva em ponto pequeno,
     no lugar do ícone preto pesado. Sombra leve tingida de lilás, sem vidro. */
  background: linear-gradient(135deg, var(--bessa-lilac) 0%, var(--bessa-blue) 100%);
  box-shadow: 0 0.5rem 1.25rem -0.5rem rgba(193, 153, 248, 0.65);
}

/* Glifo maior dentro da pastilha (~50% da caixa): o Solar Bold já tem
   respiro no próprio viewBox, com o padding antigo o ícone sumia. */
.opportunity-card__icon,
.benefit-card--boxed .benefit-card__icon,
.process-list__icon-bg,
.process-list__item .process-list__icon-bg {
  padding: 1.25rem; /* glifo 1.75rem (~41% da pastilha de 4.25rem) */
}

@media (max-width: 1023px) {
  .opportunity-card__icon,
  .benefit-card--boxed .benefit-card__icon,
  .process-list .process-list__item .process-list__icon-bg {
    padding: 0.9375rem; /* glifo 1.375rem na pastilha de 3.25rem */
  }
}

/* Checks das listas: mesma pastilha em círculo, traço branco. */
.bessa-checks svg {
  background: linear-gradient(135deg, var(--bessa-lilac) 0%, var(--bessa-blue) 100%);
  color: var(--color-white);
  stroke-width: 2;
}

/* ---------- Destaques em texto: grafite em negrito leve ---------- */
.tips__card-text strong,
.section-note strong,
.rule-change__text strong {
  color: #15131c;
  font-weight: 500;
}

/* ---------- Blocos da marca ---------- */
.bessa-stats__value {
  color: #15131c;
}

.bessa-chips li {
  background: var(--bessa-card);
  border-color: var(--bessa-line);
  color: #15131c;
}

/* Plano em destaque: branco com contorno lilás (sem fundo escuro) */
.bessa-plan--featured {
  background: var(--bessa-card);
  color: #15131c;
  box-shadow: inset 0 0 0 2px var(--bessa-lilac);
}

.bessa-plan--featured .bessa-plan__name,
.bessa-plan--featured .bessa-plan__price {
  color: #15131c;
}

.bessa-plan--featured .bessa-plan__for,
.bessa-plan--featured .bessa-plan__price span {
  color: var(--bessa-muted);
}

.bessa-plan__flag {
  background: var(--bessa-lilac);
  color: #15131c;
}

.bessa-step {
  border-top-color: #15131c;
}

.bessa-quote__text::before {
  color: var(--bessa-lilac);
}

.bessa-quote__text strong {
  color: #15131c;
  font-weight: 500;
}

.bessa-quote__avatar {
  background: var(--bessa-soft);
  color: #15131c;
}

.brand-logo__mark,
.brand-logo--light .brand-logo__mark {
  background: #15131c;
  color: var(--bessa-lilac);
}

.brand-logo--light {
  color: #15131c;
}

/* ---------- Rodapé claro: faixa lilás clarinho + bloco no papel ---------- */
.site-footer__bar {
  background: var(--bessa-soft);
}

.site-footer__bar .site-footer__tagline {
  color: #15131c;
}

.site-footer__main {
  border-top: 1px solid var(--bessa-line);
}

.footer-col__title,
.site-footer__social-label {
  color: var(--bessa-muted);
}

.footer-col__list a,
.site-footer__social-icons a,
.site-footer__legal,
.site-footer__legal a {
  color: #15131c;
}

.site-footer__divider {
  border-top-color: var(--bessa-line);
}

/* Barra fixa: pílula branca com sombra leve */
.floating-cta {
  box-shadow: 0 0.75rem 2rem rgba(21, 19, 28, 0.1);
  border: 1px solid var(--bessa-line);
}

/* ---------- Big numbers: 4 cards separados, mesmo tamanho, no lilás
   clarinho da faixa seguinte (--bessa-lilac-block). Fonte menor (era 48–96px). ---------- */
.bessa-stats__list {
  grid-auto-rows: 1fr; /* todos com a mesma altura */
  gap: var(--space-s);
}

.bessa-stats__item,
.bessa-stats__item + .bessa-stats__item {
  justify-content: space-between;
  gap: var(--space-m);
  padding: clamp(1.25rem, 0.8rem + 1.8vw, 2.25rem);
  border: 0;
  border-radius: 0.875rem;
  background: var(--bessa-lilac-block);
}

.bessa-stats__value {
  font-size: clamp(2.5rem, 1.9rem + 2.6vw, 4.5rem); /* 40–72px */
}

.bessa-stats__label {
  color: var(--bessa-muted);
}

/* ---------- Segmentos (2b): mesmo componente horizontal de Diferenciais,
   em bloco AZUL sólido pra não emendar com o papel dos números acima. ---------- */
.benefits-scroll--segments {
  background: var(--bessa-blue-block);
}

.benefits-scroll--segments .benefits-scroll__progress {
  background: rgba(21, 19, 28, 0.08);
}

/* Seção oculta via atributo hidden (o display do componente venceria o do navegador). */
.benefits-scroll[hidden] {
  display: none;
}

/* Hero SEM margem embaixo: a margem (herança da V3) somava com o padding
   da seção seguinte e deixava os números com o dobro de respiro em cima
   (161px) do que embaixo (80px). Cada seção já cuida do próprio respiro,
   igual em cima e embaixo. */
.hero {
  margin-bottom: 0;
}

/* Números: respiro em dobro (2 × --section-gap), IGUAL em cima e embaixo. */
.bessa-stats__inner {
  padding-block: calc(var(--section-gap) * 2);
}

/* Contador (initCounters): algarismos de largura fixa pro número não
   'tremer' enquanto sobe de 0 até o valor. */
.bessa-stats__value {
  font-variant-numeric: tabular-nums;
}

/* Título à esquerda + subtítulo à direita: subtítulo na MESMA linha do
   título. A base (V3) empurrava a nota pela altura da pílula que ficava
   acima do título — as pílulas saíram, então o empurrão some. */
@media (min-width: 1024px) {
  .rates__header .section-note,
  .benefits__intro .section-note,
  .tips__notes {
    margin-top: 0;
  }
}

/* Destaque roxo em palavra-chave de título (pedido do usuário pros cards de
   'Quando vale a pena'). Roxo mais fundo que o lilás da marca pra ter
   contraste como TEXTO sobre branco (o #C199F8 some). */
:root {
  --bessa-lilac-text: #8f5fe8;
}

.bessa-hl {
  color: var(--bessa-lilac-text);
  font-style: normal;
}

/* Processo ('Do primeiro contato…'): respiro em dobro (era 1.5 × gap),
   IGUAL em cima e embaixo. */
.bessa-steps__inner {
  padding-block: calc(var(--section-gap) * 3);
}

/* ==========================================================================
   MENU flutuante (referência: moneda.com) — barra compacta centralizada,
   solta do topo, cantos arredondados; logo à esquerda, links no meio
   (caixa normal, sem tracking), CTA pequeno à direita.
   VIDRO com blur: exceção pedida pelo usuário à regra "sem vidro" — vale
   SÓ pro menu.
   ========================================================================== */
.nav {
  top: 0.75rem;
  left: 0;
  right: 0;
  /* Mesma largura do conteúdo das seções (max-width 90rem − gutters). */
  width: calc(min(90rem, 100%) - 2 * var(--hero-pad-inline));
  margin-inline: auto;
  flex-wrap: nowrap;
  padding: 0.75rem 0.75rem 0.75rem 1.5rem; /* era .5rem — barra mais alta */
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 0.875rem;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 0.5rem 1.5rem rgba(21, 19, 28, 0.06);
}

.nav__links {
  gap: var(--space-l);
  color: #15131c;
  font-size: 0.9375rem;
  text-transform: none;
  letter-spacing: 0;
}

.nav .brand-logo__text {
  font-size: 1.375rem;
}

@media (max-width: 1023px) {
  .nav {
    padding: 0.375rem 0.375rem 0.375rem 1rem;
  }
}

/* Botões mais altos (a pedido do usuário): padding vertical .875rem → 1.125rem
   em TODOS, inclusive o do menu (mesma altura dos CTAs das seções). */
:root {
  --btn-pad-block: 1.125rem;
}

@media (min-width: 1024px) {
  .nav .nav__cta {
    padding-block: var(--btn-pad-block);
  }
}

/* ==========================================================================
   10. DEPOIMENTOS — referência moneda.com ("works wherever you do"):
   fundo quadriculado bem fraco, título centralizado e cards pequenos soltos
   em volta. No desktop cada card sobe numa velocidade diferente no scroll
   (initReviewsDrift, data-speed no .bessa-reviews__slot — o transform fica
   no slot pra não brigar com o data-reveal do card). Mobile: lista simples.
   ========================================================================== */
.bessa-reviews {
  position: relative;
  overflow: clip;
  background-color: var(--bessa-paper);
  background-image:
    linear-gradient(rgba(21, 19, 28, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21, 19, 28, 0.08) 1px, transparent 1px);
  background-size: 2rem 2rem;
  background-position: center center;
}

.bessa-reviews__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  max-width: 90rem;
  margin: 0 auto;
  padding: var(--section-gap) var(--hero-pad-inline);
}

.bessa-reviews__title {
  margin: 0;
  text-align: center;
}

.bessa-review {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  margin: 0;
  padding: 1rem 1rem 1.125rem;
  border: 1px solid var(--bessa-line);
  border-radius: 0.875rem;
  background: var(--bessa-card);
  box-shadow: 0 0.75rem 2rem -1rem rgba(21, 19, 28, 0.18);
}

.bessa-review__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-s);
}

.bessa-review__who {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  color: var(--bessa-muted);
  font-size: 0.75rem;
  line-height: 1.35;
}

.bessa-review__who strong {
  margin-bottom: 0.25rem;
  color: #15131c;
  font-weight: 500;
  font-size: 0.9375rem;
}

.bessa-review__avatar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.625rem;
  background: linear-gradient(135deg, var(--bessa-lilac) 0%, var(--bessa-blue) 100%);
  color: var(--color-white);
  font-weight: 500;
  font-size: 0.875rem;
}

.bessa-review__text {
  margin: 0;
  color: #15131c;
  font-size: 0.875rem;
  line-height: 1.5;
}

@media (min-width: 1024px) {
  /* Palco de 1 tela: título no meio, cards posicionados em volta. */
  .bessa-reviews__stage {
    display: block;
    height: max(100vh, 48rem);
    height: max(100dvh, 48rem);
    padding-block: 0;
  }

  .bessa-reviews__title {
    position: absolute;
    top: 50%;
    left: 50%;
    width: max-content;
    /* centraliza com 'translate' (não 'transform', que o data-reveal usa) */
    translate: -50% -50%;
  }

  .bessa-reviews__slot {
    position: absolute;
    width: 17rem;
    will-change: transform;
  }

  .bessa-reviews__slot--1 {
    top: 13%;
    left: calc(var(--hero-pad-inline) + 14%);
  }

  .bessa-reviews__slot--2 {
    top: 30%;
    right: calc(var(--hero-pad-inline) + 2%);
  }

  .bessa-reviews__slot--3 {
    bottom: 8%;
    left: calc(var(--hero-pad-inline) + 34%);
  }
}

/* Solução, Processo e faixa final: lilás clarinho (era azul), a pedido do
   usuário. A faixa do rodapé, logo depois da faixa final, sai do lilás
   clarinho pro lilás CHEIO da marca, senão as duas emendavam na mesma cor. */
.opportunity__visual,
.bessa-steps,
.reveal-band--blue,
.reveal-band--blue .reveal-band__layer {
  background: var(--bessa-lilac-block);
}

.site-footer__bar {
  background: var(--bessa-lilac);
}

/* ==========================================================================
   LINHAS SÓLIDAS — nada de pontilhado no site (a pedido do usuário). Mesma
   lista de seletores da "linha pontilhada padrão" da base + os que tinham
   gradiente próprio (linha dos cards de Diferenciais, que era branca e
   sumia no card branco; divisória vertical). Mesma espessura (1px) e
   posição de antes, só troca o tracejado por cor contínua.
   ========================================================================== */
:root {
  --bessa-rule: rgba(21, 19, 28, 0.14);
}

.rates__divider,
.benefits__divider,
.margin-table__head,
.rates__table--pill .rates__table-head,
.opportunity-card__item + .opportunity-card__item,
.tips__card + .tips__card,
.tips__card-text::before,
.opportunity-card__desc::before,
.about__text::before,
.audience-panel__text::before,
.blog-date,
.blog-highlights__title,
.mag-label,
.mag-topbar,
.mag-list__item:not(:last-child),
.mag-feat__item:not(:last-child),
.mag-row:not(:last-child),
.blog-highlights__item:not(:last-child),
.post__meta,
.post-checklist li:not(:last-child),
.process-list__rule,
.faq__item,
.condition-card__rule,
.benefit-card__rule,
.benefit-card--boxed .benefit-card__rule,
.terms-list__item:not(:last-child),
.rates__row:not(:last-child) {
  background-image: linear-gradient(var(--bessa-rule), var(--bessa-rule));
}

.steps__divider {
  background-image: linear-gradient(var(--bessa-rule), var(--bessa-rule));
}

/* Diagnóstico: card do texto+formulário MAIS LARGO que a foto (era 466fr :
   603fr, foto maior). Agora 55% : 45%. */
@media (min-width: 1024px) {
  .newsletter-about .about__content {
    grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
  }
}

/* Inputs do diagnóstico: lilás com opacidade, SEM borda. Foco = lilás um
   pouco mais forte (no lugar da borda). */
.newsletter-about .newsletter__input {
  border: 0;
  background-color: rgba(193, 153, 248, 0.14);
}

.newsletter-about .newsletter__input:focus {
  outline: none;
  background-color: rgba(193, 153, 248, 0.26);
}

/* Setinha dos selects: grafite (era branca, sumia no fundo claro). */
.bessa-diag select.newsletter__input {
  background-image: linear-gradient(45deg, transparent 50%, #15131c 50%), linear-gradient(135deg, #15131c 50%, transparent 50%);
}

/* Símbolo da marca ao lado do texto do logo (images/logo-simbolo.png,
   recortado rente ao desenho: 67x111). */
.brand-logo {
  gap: 0.5rem;
}

.brand-logo__symbol {
  flex-shrink: 0;
  width: auto;
  height: 1.875rem; /* ~1.4x a altura do texto */
}

/* Hero: todo o conteúdo CENTRALIZADO (título, texto e botões). */
.hero--breath .hero__main {
  align-items: center;
  margin-inline: auto;
  text-align: center;
}

.hero--breath .hero__desc {
  max-width: 34em;
}

.hero--breath .hero__ctas {
  justify-content: center;
}

/* ==========================================================================
   Botão flutuante de WhatsApp — canto inferior direito, verde oficial do
   WhatsApp (reconhecimento imediato). Quando a barra fixa de agendamento
   (.floating-cta) aparece, o botão sobe pra não ficar em cima dela.
   ========================================================================== */
.wa-float {
  position: fixed;
  right: var(--space-l);
  bottom: var(--space-l);
  z-index: 45; /* acima da barra fixa (40), abaixo do menu (50) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 9999px;
  background: #25d366;
  color: var(--color-white);
  box-shadow: 0 0.75rem 1.75rem -0.5rem rgba(21, 19, 28, 0.35);
  transition: transform 0.2s ease, bottom 0.3s ease;
}

.wa-float svg {
  width: 1.75rem;
  height: 1.75rem;
}

.wa-float:hover {
  transform: scale(1.06);
}

.wa-float:focus-visible {
  outline: 2px solid #15131c;
  outline-offset: 3px;
}

/* Barra de agendamento visível → WhatsApp sobe acima dela. */
body:has(.floating-cta.is-visible) .wa-float {
  bottom: calc(var(--wa-bar-h, 5.5rem) + var(--space-l) + var(--space-s));
}

@media (max-width: 1023px) {
  .wa-float {
    right: var(--space-s);
    bottom: var(--space-s);
    width: 3.25rem;
    height: 3.25rem;
  }

  body:has(.floating-cta.is-visible) .wa-float {
    bottom: calc(var(--wa-bar-h, 5rem) + var(--space-s));
  }
}