/* ==========================================================================
   Alisamentos Prohall (Select One · Burix One · Select Blond 1L) — Landing Page
   Derivada da LP Encorpax (C:\laragon\www\lps\encorpax) em 23/09/2026, que
   por sua vez veio da LP Force Hair. A estrutura e os componentes são os
   mesmos; o que muda é a paleta (ver o :root logo abaixo), o conteúdo e o
   hero, escuro com a foto hero-bg.jpg de fundo — ver "Foto do hero".
   Correção de componente que valha para as três precisa ser aplicada nas
   três, à mão: não há build nem CSS compartilhado entre elas.
   Ordem do arquivo: fonte → reset → tokens → base → utilitários → componentes
   (na mesma ordem das seções da página) → responsivo → acessibilidade/print.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonte (Manrope variável, hospedada localmente — cobre acentuação PT-BR)
   Dois arquivos, os mesmos subsets que o Google Fonts serve: "latin" cobre
   todo o PT-BR (á à â ã ç é ê í ó ô õ ú) e "latin-ext" entra só se algum
   texto usar caracteres fora disso — o navegador baixa pelo unicode-range.
   Manrope vai de 200 a 800: onde o CSS pede 900, o navegador usa 800 (o
   peso mais próximo existente), que é o "extrabold" da família.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope-var-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
/* ol junto do ul: o .routine-grid é um <ol> e o padding-inline-start de 40px
   do navegador empurrava os cards 40px pra dentro, fora do container. Os
   números 01–04 daquela seção são desenhados à mão (.routine-step__num), então
   o marcador nativo não faz falta. */
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; }
button { font: inherit; }
summary::-webkit-details-marker { display: none; }
summary { list-style: none; cursor: pointer; }
/* o [hidden] do navegador é uma regra fraca: qualquer display: flex/grid de
   componente ganha dele. Como o modal de produto esconde linhas inteiras pelo
   atributo (preço, parcelas, selo — campos vazios no config.js), ele precisa
   valer mais que o componente. */
[hidden] { display: none !important; }

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  /* cor
     Paleta dos alisamentos: petróleo/grafite frio, neutro de propósito.
     Os três frascos são de cores que brigam entre si — o Select One é branco
     perolado, o Burix One é cobre e o Select Blond é violeta. Puxar a página
     para qualquer uma delas faria os outros dois parecerem visitantes na
     própria LP; o violeta ainda tinha o agravante de ser a cor da LP Force
     Hair. O grafite azulado é fundo de estúdio: os três saltam por igual.
     Todos os pares abaixo foram medidos; o menor é o preço riscado sobre o
     cinza-claro das seções --alt, com 4,63:1, e nenhum fica abaixo dos
     4,5:1 do WCAG AA. */
  --c-primary: #2e3c45;
  --c-primary-dark: #1f2a31;
  --c-primary-soft: #93a7b2;
  --c-ink: #192228;
  --c-text: #171f24;
  --c-text-soft: #4b5a63;
  --c-text-was: #63717a;      /* preço riscado — 5,03:1 no branco, 4,63:1 no cinza */
  --c-surface: #fff;
  --c-surface-alt: #f3f6f7;
  --c-border: #e0e7ea;
  --c-chip-bg: #e7eef1;
  --c-chip-fg: #35474f;
  --c-dash: #c9d5da;
  --c-on-ink: #cfdce3;
  --c-on-ink-soft: #dde7ec;
  --c-on-primary: #e6eef2;
  /* dourado dos selos e das estrelas. Mesmo raciocínio do Encorpax: o
     dourado de embalagem (#c9962e) dá 2,66:1 no branco e não alcança os
     3:1 exigidos de ícone. Este dá 3,96:1. */
  --c-star: #a17a12;
  /* verde de ação: é a cor de clique, não a cor da marca. Vem das duas LPs
     anteriores e fica pelo mesmo motivo — separar "cor de marca" de "cor de
     clique" é o que faz o botão saltar.
     ⚠️ Não confundir com o verde do rótulo do Burix One, que é um verde-limão
     claro, coisa da embalagem. Este é esmeralda fechado porque verde claro
     não chega a 4,5:1 com texto branco.
     Contrastes: branco 5,01:1 (AA), sobre o cinza #f3f6f7 4,62:1. */
  --c-accent: #157f52;
  --c-accent-dark: #0f5f3d;   /* hover */
  --c-glass: rgba(255, 255, 255, 0.96);
  --c-ink-veil: rgba(255, 255, 255, 0.06);
  --c-ink-hairline: rgba(255, 255, 255, 0.16);

  /* raio
     Todo box da página usa o mesmo 12px. A escala sm→xl continua existindo
     como nome porque cada componente chama o token do seu tamanho — mudando
     só os valores aqui, um dia dá pra voltar a diferenciar sem mexer em
     nenhum componente. O --r-pill (botões e chips) fica de fora de
     propósito: ele não é um raio de caixa, é a forma do botão. */
  --r-sm: 12px;
  --r-thumb: 12px;
  --r-md: 12px;
  --r-lg: 12px;
  --r-xl: 12px;
  --r-glow: 12px;
  --r-pill: 999px;

  /* tipo */
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-h1: clamp(34px, 5vw, 56px);
  --fs-h2: clamp(28px, 4vw, 42px);
  --fs-h2-cta: clamp(30px, 5vw, 52px);

  /* layout */
  /* 1280px é o padrão. O container só abre pra 1640px em telas acima de
     1440px — nas de 1440 pra baixo essa largura extra comia as margens
     laterais e deixava o conteúdo encostado na borda. */
  --container: 1280px;
  --container-narrow: 820px;
  --pad-x: 24px;
  --pad-y: 64px;
  --header-h: 60px; /* altura real medida (logo + botão sempre visível com borda) */
  /* altura única de TODOS os botões da página. Trocando aqui, mudam juntos
     o CTA do hero, o do header, os dos cards de produto e a barra de compra
     — nenhum tamanho de botão carrega altura própria. */
  --btn-h: 50px;
  --btn-h-nav: 40px;  /* header e barra fixa — ver .btn--size-nav */
  --topbar-h: 36px;
}

/* Entre ~900px e 1280px o container ocupa a tela inteira, então a única margem
   lateral é o --pad-x. Com 24px fixos o texto encostava na borda da janela
   nesse intervalo (num hero de sangria isso fica evidente). A partir de 900px
   a margem passa a acompanhar a largura da tela, até um teto de 48px. */
@media (min-width: 900px) {
  :root { --pad-x: clamp(24px, 3.4vw, 48px); }
}

/* Acima de 1440px sobra largura de tela suficiente pra abrir o container sem
   espremer as margens. Abaixo disso ele fica nos 1280px do :root. */
@media (min-width: 1441px) {
  :root { --container: 1640px; }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
/* Trava lateral do documento. `overflow-x: hidden` só no <body> é o truque
   antigo e falha no celular: como o <html> fica `visible`, Safari/Chrome do
   iOS ainda deixam arrastar a página para o lado. Os dois elementos entram
   aqui, e `clip` vem depois de `hidden` (quem não conhece `clip` ignora a
   linha e fica com o `hidden`).
   `clip` em vez de `hidden` de propósito: `hidden` transformaria o <html>
   num container de rolagem, e aí o header sticky e o scroll suave passariam
   a se apoiar nele; `clip` só corta o que passa da borda, sem criar rolagem.
   Isso é a rede de segurança — o que não pode vazar já é contido na própria
   seção (ver "Responsivo — densidade do mobile"). */
html, body {
  overflow-x: hidden;
  overflow-x: clip;
}
body {
  background: #fff;
  font-family: var(--font-sans);
  color: var(--c-text);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--c-primary); text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  a:hover { color: var(--c-primary-dark); }
}
main { display: block; }

html { scroll-behavior: smooth; }
[id] { scroll-margin-top: calc(var(--header-h) + 12px); }
/* #topo é o próprio <body>: é o destino do logo ("voltar ao topo"). Sem esta
   exceção, a calha do header faria o clique parar alguns pixels abaixo do
   começo real da página, cortando a faixa que rola. */
#topo { scroll-margin-top: 0; }

:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
  border-radius: 4px;
}
.section--ink :focus-visible,
.section--brand :focus-visible,
.footer :focus-visible {
  outline-color: #fff;
}

::selection { background: var(--c-primary-soft); color: #fff; }

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   Utilitários
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 12px; top: -48px;
  background: var(--c-ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 700;
  z-index: 100;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 12px; }

.container { max-width: var(--container); margin: 0 auto; padding: var(--pad-y) var(--pad-x); }
.container--narrow { max-width: var(--container-narrow); }
/* .container--tight saiu em 22/09/2026 — nenhuma seção o usava mais. */
/* uma seção com faixa full-bleed no meio tem dois .container, e o pad-y de
   cada um se somava em volta dela — estes cortam o lado que encosta na faixa */
.container--flush-b { padding-bottom: 28px; }
.container--flush-t { padding-top: 28px; }

.section--white { background: var(--c-surface); }
.section--alt { background: var(--c-surface-alt); }
.section--ink { background: var(--c-ink); color: #fff; }
.section--brand { background: var(--c-primary); color: #fff; }

/* A página alterna as faixas de fundo, e é essa alternância que separa uma
   seção da outra. Onde duas do mesmo fundo se encostam (hoje só prova social
   -> antes e depois) não sobra nada marcando a emenda, e as duas viram um
   bloco só. O filete faz o corte. A regra é pelo encosto, não pelo id: se
   amanhã outro par ficar lado a lado, já nasce separado. */
.section--white + .section--white,
.section--alt + .section--alt { border-top: 1px solid var(--c-border); }

/* vão entre o título da seção e o lead logo abaixo */
.section__title { font-size: var(--fs-h2); font-weight: 900; letter-spacing: -0.02em; margin-bottom: 10px; }
.section__lead { font-size: 17px; color: var(--c-text-soft); margin-bottom: 32px; max-width: 60ch; }
.section--ink .section__lead { color: var(--c-on-ink); }
/* eyebrow acima de um .section__title: vira bloco e o roxo padrão não tem
   contraste sobre --c-ink, então clareia em faixa escura */
.section__eyebrow { display: block; margin-bottom: 10px; }
.section--ink .eyebrow { color: var(--c-primary-soft); }

/* cabeçalho centralizado (eyebrow + título + lead) — o lead perde o max-width
   de 60ch alinhado à esquerda e passa a centrar no container */
.section__head { text-align: center; margin-bottom: 32px; }
.section__head .section__lead { margin-inline: auto; }
.section__head > :last-child { margin-bottom: 0; }

/* grade fluida parametrizável — substitui todos os repeat(auto-fit, minmax()) do mock.
   min(...,100%) evita o estouro horizontal em telas estreitas (era a causa raiz de
   precisar de overflow-x:hidden no wrapper do mock original). */
.grid {
  display: grid;
  gap: var(--grid-gap, 20px);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min, 240px), 100%), 1fr));
}

.stack { display: flex; flex-direction: column; gap: var(--stack-gap, 12px); }
.row { display: flex; align-items: center; gap: var(--row-gap, 12px); flex-wrap: wrap; }

.eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--c-primary);
}

.pill {
  display: inline-flex; align-items: center;
  padding: 8px 14px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
}
.pill--ink { background: var(--c-ink); color: #fff; }
/* o --brand é o rótulo "ATIVO 01..04": caixa e tipo menores que o .pill
   padrão, pra não competir com o nome do ativo logo abaixo */
.pill--brand { background: var(--c-primary); color: #fff; padding: 6px 12px; font-size: 10px; }

.tag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: var(--c-primary); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em;
  padding: 6px 10px; border-radius: var(--r-pill);
}
.tag--ink { background: var(--c-ink); }

.chip-save {
  background: var(--c-chip-bg); color: var(--c-chip-fg);
  font-size: 12px; font-weight: 800; padding: 3px 7px; border-radius: 6px;
}

.u-strike { text-decoration: line-through; }

/* --------------------------------------------------------------------------
   Botões
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  /* min-height, não height: um rótulo comprido que quebre em duas linhas numa
     tela estreita faz o botão crescer em vez de vazar o texto. O box-sizing
     é border-box, então os 50px já contam a borda de 2px. */
  min-height: var(--btn-h);
  padding-block: 8px;
  border-radius: var(--r-pill);
  font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  text-align: center; text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn--primary { background: var(--c-accent); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--c-accent-dark); color: #fff; }
}
.btn--outline { background: transparent; border-color: var(--c-ink); color: var(--c-ink); }
@media (hover: hover) and (pointer: fine) {
  .btn--outline:hover { background: var(--c-ink); color: #fff; }
}
.btn--light { background: #fff; color: var(--c-primary-dark); }
@media (hover: hover) and (pointer: fine) {
  .btn--light:hover { background: var(--c-ink); color: #fff; }
}

/* Só largura e tipo: a altura é a mesma para todos, vem do --btn-h acima.
   Use sempre padding-inline aqui — um "padding" de atalho apagaria o
   padding-block do .btn e traria de volta a altura variável de cada tamanho. */
/* Exceção de altura: o --size-nav é usado só nos dois CTAs que ficam sempre
   na tela (header e barra fixa de compra). Eles são persistentes, não o botão
   principal de uma seção, então pedem menos peso que os 50px do resto — daí o
   --btn-h-nav próprio. Mexer aqui muda a altura do header: o --header-h logo
   abaixo é 10px + este valor + 10px. */
.btn--size-nav { min-height: var(--btn-h-nav); padding-inline: 18px; font-size: 11.5px; }
.btn--size-card { padding-inline: 20px; font-size: 13px; letter-spacing: 0.1em; }
.btn--size-lg { padding-inline: 40px; font-size: 15px; }
.btn--size-outline { padding-inline: 32px; font-size: 14px; }
.btn--block { width: 100%; }

/* o anel é o próprio verde do botão com alfa. Se mudar --c-accent, mude o
   rgba aqui junto (keyframes não aceitam var() com alfa sem color-mix). */
@keyframes fh-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(21, 127, 82, 0.45); }
  50% { box-shadow: 0 0 0 8px rgba(21, 127, 82, 0); }
}
.btn--pulse { animation: fh-pulse 2s ease-in-out infinite; }

@keyframes fh-pulse-light {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55); }
  50% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); }
}
.section--brand .btn--pulse,
.section--ink .btn--pulse {
  animation-name: fh-pulse-light;
}

/* --------------------------------------------------------------------------
   CTA no meio da página
   -------------------------------------------------------------------------- */
.mid-cta {
  margin-top: 40px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center;
}
.mid-cta__text { font-size: 15px; font-weight: 700; color: var(--c-text-soft); max-width: 40ch; }
.section--ink .mid-cta__text { color: var(--c-on-ink); }

/* --------------------------------------------------------------------------
   Marquee (topbar + faixa roxa)
   -------------------------------------------------------------------------- */
.marquee { overflow: hidden; }
.marquee--top { background: var(--c-ink); color: #fff; height: var(--topbar-h); display: flex; align-items: center; }
.marquee--brand { background: var(--c-primary); color: #fff; padding: 14px 0; }

.marquee__track { display: flex; width: max-content; animation: marquee 30s linear infinite; }
.marquee--brand .marquee__track { animation-duration: 26s; }

.marquee__group {
  display: flex; gap: 36px; padding-right: 36px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; white-space: nowrap;
}
.marquee--brand .marquee__group {
  gap: 30px; padding-right: 30px;
  font-size: 20px; font-weight: 800; letter-spacing: normal;
}
.marquee__dot { color: var(--c-primary-soft); }

/* Item com ícone — o ícone fica roxo claro, o texto branco, para marcar a
   vantagem sem competir com a leitura. */
.marquee__item { display: inline-flex; align-items: center; gap: 8px; }
.marquee__icon {
  width: 15px; height: 15px; flex-shrink: 0;
  color: var(--c-primary-soft);
}
/* na faixa roxa o texto é 20px em caixa alta e peso 800: um ícone de 15px com
   traço 1,8 ao lado disso some. Sobe pra 24px e o traço vai a 2 — por CSS de
   propósito, que ganha do stroke-width escrito no atributo do <svg>.
   O --c-primary-soft daria pouco contraste contra o taupe da faixa; este bege
   claro é o mesmo --c-on-primary usado em texto sobre a cor de marca. */
.marquee--brand .marquee__icon {
  width: 24px; height: 24px;
  stroke-width: 2;
  color: var(--c-on-primary);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.header {
  position: sticky; top: 0; z-index: 40;
  background: var(--c-glass);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--c-border);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
@supports not (backdrop-filter: blur(1px)) {
  .header { background: #fff; }
}
/* .is-scrolled entra pelo app.js depois de ~8px de rolagem: o header encolhe,
   fica opaco e a linha de baixo escurece — é o que separa o header do
   conteúdo que passa por baixo, no lugar da sombra que a página não usa. */
.header.is-scrolled { background: #fff; border-bottom-color: var(--c-dash); }
.header__inner { transition: padding 0.25s ease; }
.header.is-scrolled .header__inner { padding-top: 7px; padding-bottom: 7px; }
.header__logo img { transition: height 0.25s ease; }
.header.is-scrolled .header__logo img { height: 22px; }

/* Entrada do header no primeiro paint (desce da borda de cima). */
@keyframes fh-header-in {
  from { opacity: 0; transform: translateY(-100%); }
  to   { opacity: 1; transform: translateY(0); }
}
/* `backwards` (e não `both`) de propósito: quando a animação acaba o header
   volta a não ter transform nenhum — transform permanente em elemento sticky
   vira containing block e bagunça o que estiver fixo/absoluto dentro dele. */
.js-anim .header { animation: fh-header-in 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) backwards; }
/* Logo à esquerda, menu e CTA encostados juntos na direita. O 1fr na primeira
   coluna é o que empurra os dois últimos blocos pra borda; as duas colunas
   `auto` ficam com a largura do próprio conteúdo, coladas uma na outra pelo
   gap. (Antes era 1fr auto 1fr, que centralizava o menu no meio do header —
   com o container em 1640px isso deixava o menu boiando longe do botão.) */
.header__inner {
  max-width: var(--container); margin: 0 auto;
  /* 10px + os 40px do botão (--btn-h-nav) + 10px = os 60px do --header-h. Se
     mexer no --btn-h-nav, refaça esta conta (e a do estado .is-scrolled logo
     acima) ou atualize o --header-h. */
  padding: 10px var(--pad-x);
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 28px;
}
/* Abaixo de 900px a nav do desktop é `display: none` e não ocupa célula
   nenhuma — sem isto o .header__actions escorregava para a coluna do meio e
   o hambúrguer aparecia no centro do header, não na borda direita. */
@media (max-width: 899px) {
  .header__inner { grid-template-columns: 1fr auto; }
}
.header__logo { display: flex; align-items: center; justify-self: start; }
.header__logo img { height: 26px; width: auto; display: block; }

.header__actions { display: flex; align-items: center; gap: 10px; justify-self: end; }
/* o quadrado de toque de 44px encosta na borda do header; a margem negativa
   alinha o desenho do ícone com a borda visual, como a logo do outro lado */
@media (max-width: 899px) {
  .header__actions { margin-right: -10px; }
}

/* O CTA do header só existe no desktop. No celular ele mora dentro do menu
   (rodapé do drawer) e na barra fixa de baixo — repetido nos três lugares
   sobrava um botão grande brigando com a logo num header de 390px. */
.header__cta { display: none; }

.nav-toggle { position: relative; }
.nav-toggle__btn {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
}
.nav-toggle__btn::-webkit-details-marker { display: none; }
.nav-toggle__btn svg { color: var(--c-ink); }

/* Hambúrguer ↔ X: os dois ícones vivem no <summary> e só um aparece por vez.
   Com o menu aberto o <summary> sai do header e vira o botão de fechar fixo
   no canto da tela cheia — é o que mantém o fechar funcionando sem JS. */
.nav-toggle__icon--close { display: none; }
.nav-toggle[open] .nav-toggle__icon--bars { display: none; }
.nav-toggle[open] .nav-toggle__icon--close { display: block; }
/* o -10px é o mesmo desconto do .header__actions: tira a folga da caixa de
   toque de 44px para o desenho do "X" cair exatamente onde estava o
   hambúrguer, e na mesma margem da logo do outro lado */
.nav-toggle[open] .nav-toggle__btn {
  position: fixed; z-index: 62;
  top: 14px; right: calc(max(var(--pad-x), env(safe-area-inset-right, 0px)) - 10px);
}
.nav-toggle[open] .nav-toggle__btn svg { color: #fff; }

/* Nav duplicada de propósito: uma cópia sempre em fluxo normal pro desktop
   (.nav-panel--desktop) e outra dentro do <details> só pro dropdown mobile
   (.nav-panel--mobile). Chrome recente passou a renderizar o conteúdo do
   <details> fechado dentro de uma caixa interna (::details-content) que
   colapsa a largura mesmo quando a gente força display:flex!important no
   filho — a truque antigo de "abrir via CSS sem [open]" parou de funcionar.
   Duplicar em vez de tentar forçar o <details> a ficar aberto no desktop
   evita depender desse comportamento interno do navegador. */
.nav-panel--desktop { display: none; }

/* --- Menu mobile em tela cheia ---------------------------------------- */
/* O drawer é fixo e cobre a página inteira, header incluído. Ele nasce dentro
   do .header, que tem z-index 40 e cria contexto de empilhamento — por isso o
   app.js sobe o header para 60 enquanto o menu está aberto (:has() cobre o
   caso sem JS). Sem isso a barra de compra (z-index 50) passaria por cima. */
/* backdrop-filter também precisa sair: um ancestral com filtro vira bloco
   contentor de position:fixed, e com ele ligado o drawer ficava preso ao
   retângulo do header em vez de cobrir a viewport. */
.header.is-nav-open,
.header:has(.nav-toggle[open]) { z-index: 60; backdrop-filter: none; }

/* trava a rolagem do fundo enquanto o menu cobre a tela (classe do app.js) */
.is-nav-locked, .is-nav-locked body { overflow: hidden; }

.nav-drawer {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column;
  padding: 14px var(--pad-x) calc(20px + env(safe-area-inset-bottom, 0px));
  background: var(--c-ink);
  background-image: radial-gradient(76% 120% at 12% -10%, rgba(106, 83, 182, 0.55), transparent 62%);
  color: #fff;
  overflow-y: auto; overscroll-behavior: contain;
  animation: fh-drawer-in 0.22s ease-out;
}
@keyframes fh-drawer-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}
/* a linha da logo espelha a do header (mesma altura de 44px), então o "X"
   fixo no canto cai exatamente na altura da logo */
.nav-drawer__head { display: flex; align-items: center; min-height: 44px; }
.nav-drawer__logo-link { display: flex; align-items: center; }
.nav-drawer__logo { height: 26px; width: auto; display: block; filter: brightness(0) invert(1); }

.nav-panel--mobile {
  display: flex; flex-direction: column; align-items: stretch;
  margin-top: 18px;
}
.nav-panel--mobile .nav__link {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 17px 2px;
  font-size: 20px; font-weight: 800; letter-spacing: -0.01em;
  color: #fff;
  border-bottom: 1px solid var(--c-ink-hairline);
}
.nav-panel--mobile .nav__link svg { color: var(--c-primary-soft); flex-shrink: 0; }

/* margin-top auto: com poucos links o botão desce para o fim da tela, e numa
   tela baixa ele simplesmente segue os links, sem sobrepor nada */
.nav-drawer__foot { margin-top: auto; padding-top: 26px; }
.nav-drawer__badges {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px;
  margin-top: 16px;
  font-size: 13px; font-weight: 600; color: var(--c-on-ink);
}
.nav-drawer__badges li { display: flex; align-items: center; gap: 7px; }
.nav-drawer__badges svg { color: var(--c-primary-soft); flex-shrink: 0; }

.nav__link {
  display: block; color: var(--c-text);
  font-size: 14px; font-weight: 600;
  padding: 10px 12px; border-radius: var(--r-sm);
}
@media (hover: hover) and (pointer: fine) {
  .nav__link:hover { color: var(--c-primary); background: var(--c-surface-alt); }
  .nav-panel--mobile .nav__link:hover { color: var(--c-primary-soft); background: transparent; }
}
@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .header__cta { display: inline-flex; }
  .nav-panel--desktop { display: flex; flex-direction: row; align-items: center; gap: 4px; justify-self: end; }
  /* O hover antigo pintava um retângulo lilás colado no texto (o padding era
     zero aqui), e cada item ficava de um tamanho — daí o aspecto de remendo.
     Agora o item tem caixa própria e o hover é um sublinhado que cresce da
     esquerda, que é o gesto que combina com um menu na horizontal. O texto
     em repouso fica no cinza-roxo e só o item apontado vai pro escuro, então
     o destaque vem do contraste, não de um bloco de fundo. */
  .nav-panel--desktop .nav__link {
    position: relative;
    padding: 8px 10px;
    color: var(--c-text-soft);
    transition: color 0.18s ease;
  }
  .nav-panel--desktop .nav__link::after {
    content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px;
    height: 2px; border-radius: 2px; background: var(--c-primary);
    transform: scaleX(0); transform-origin: left center;
    transition: transform 0.24s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
}
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .nav-panel--desktop .nav__link:hover { color: var(--c-text); background: transparent; }
  .nav-panel--desktop .nav__link:hover::after { transform: scaleX(1); }
}
/* teclado: o sublinhado também aparece no foco, senão quem navega por Tab
   perde a marcação que quem usa mouse tem */
@media (min-width: 900px) {
  .nav-panel--desktop .nav__link:focus-visible { color: var(--c-text); }
  .nav-panel--desktop .nav__link:focus-visible::after { transform: scaleX(1); }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
/* O objetivo é o hero ocupar a primeira tela inteira no desktop (do topo do
   header até o rodapé da viewport) sem precisar rolar para ver nada dele.
   O min-height abaixo (100vh menos topbar + header) faz o .hero__grid esticar
   até a borda da tela e centralizar o conteúdo (align-items: center); os
   tamanhos já são mais compactos que o mock original, e a media query de
   max-height comprime ainda mais em notebooks baixos (1366×768 etc.) para o
   conteúdo continuar cabendo dentro dessa altura. Em mobile o hero empilha e
   volta a rolar normalmente — esperado, o "sem rolagem" vale só pra primeira
   tela no desktop. */
/* #14252d é a cor da borda da foto do hero (medida nos cantos do
   hero-bg.jpg): onde a foto não chega, o fundo continua sem emenda. */
.hero { position: relative; overflow: hidden; background: #14252d; color: #fff; }
.hero__grid {
  max-width: var(--container); margin: 0 auto;
  padding: clamp(20px, 4vh, 56px) var(--pad-x) clamp(20px, 3.5vh, 48px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(24px, 4vh, 40px);
  align-items: center;
}
.hero__copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(10px, 1.8vh, 20px); }
.hero__title {
  font-size: clamp(28px, 5vw, 56px); line-height: 1.03; font-weight: 900; letter-spacing: -0.02em;
  color: #fff;
}
/* Destaque do H1 no hero escuro: o mesmo matiz petróleo da paleta, só que
   claro o bastante para o fundo #14252d–#233b47 da foto (bem acima de 7:1).
   Existe só aqui, por isso não virou token. */
.hero__accent { color: #8cc7d9; }
.hero__lead { font-size: 18px; max-width: 46ch; color: rgba(255, 255, 255, .8); text-wrap: pretty; }
/* o .pill--ink é quase da cor do fundo da foto e sumiria: aqui vira vidro claro */
.hero .pill--ink { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }

.hero__rating { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hero__rating-score { font-size: 16px; font-weight: 800; color: #fff; }
/* o "·" era um ponto de 14px numa cor de borda: sumia e os tr�s blocos da
   linha viravam um texto corrido s�. Maior e mais opaco ele volta a separar. */
.hero__rating-sep { color: var(--c-dash); font-size: 20px; line-height: 1; }
.hero__rating-meta { font-size: 14px; color: rgba(255, 255, 255, .8); font-weight: 600; }

.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* A foto do hero mora em .hero__media; as regras dela ficam mais abaixo,
   em "Foto do hero". */
.hero__media { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }

/* Altura do hero no desktop.
   O teto era 1320px e a regra mandava ele ocupar a primeira tela inteira
   (viewport − topbar − header). Isso fazia sentido quando a coluna da direita
   tinha a foto do produto, com uns 560px de altura, empurrando a row. Hoje a
   foto virou fundo da seção e a única coisa dentro do grid é a coluna de
   texto, que dá ~480px: o hero esticava pra 830px e centralizava esses 480,
   sobrando ~175px de roxo morto em cima e outros ~175 embaixo — o buraco.
   O teto de 660px é o ponto em que a coluna de texto e os frascos do fundo
   se encaixam com folga de respiro (~55px), sem vão. O calc continua na
   frente pra janela baixa: aí o hero encolhe junto e não passa da tela.
   100vh como fallback + 100dvh por cima para navegadores que suportam (evita
   recalcular para menos ao esconder/mostrar a barra de endereço em tablets
   landscape, que também caem nesse breakpoint de 900px).
   IMPORTANTE: align-items passa de center pra stretch aqui — com center, a
   coluna de texto sobrava com um vão simétrico em cima/embaixo dela mesma,
   por menor que a diferença de altura fosse. Com stretch, .hero__copy vira do
   tamanho da row inteira e o conteúdo dela é centralizado nessa altura. */
@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: 1.15fr 1fr;
    align-items: stretch;
    min-height: min(calc(100vh - var(--header-h) - var(--topbar-h) - 6px), 660px);
    min-height: min(calc(100dvh - var(--header-h) - var(--topbar-h) - 6px), 660px);
    padding-top: clamp(10px, 4vh, 56px);
    padding-bottom: clamp(10px, 3.5vh, 48px);
    gap: clamp(20px, 3.5vh, 40px);
  }
  /* Teto de largura da coluna de texto. Com o container em 1640px a coluna
     passava dos 850px e o H1 esticava numa linha só, larga demais pra ler de
     um golpe. 700px segura o título em 2–3 linhas e é o mesmo limite pro
     lead e pro rating, que antes iam cada um até onde davam. */
  .hero__copy { justify-content: center; gap: clamp(14px, 2.6vh, 30px); max-width: 700px; }
  .hero__title { font-size: clamp(32px, 5vh, 56px); line-height: 1.05; }
  .hero__lead { font-size: clamp(16px, 2vh, 18px); }
  .hero__rating { gap: clamp(8px, 1vh, 12px); }
  /* o botão não encolhe mais junto com a altura da tela: a altura é fixa em
     --btn-h como no resto da página, e só a largura e o tipo acompanham */
  .hero__ctas .btn { padding-inline: clamp(24px, 3vw, 40px); font-size: clamp(14px, 1.2vh, 15px); }
}
/* --------------------------------------------------------------------------
   Foto do hero (.hero__media / .hero__img)
   --------------------------------------------------------------------------
   hero-bg.jpg (1882×836): os três frascos ocupam de ~54% a ~86% da largura
   e a metade esquerda é fundo petróleo vazio — é ali que o texto branco
   entra. O original é hero-bg.png (1,4 MB); o .jpg é a mesma foto a ~90 KB.

   Celular: a foto fica no fluxo, acima do texto (order: -1), recortada em
   5:4 em volta dos frascos e com a base esfumada no fundo da seção.

   Desktop (≥900px): .hero__media sai do grid (position: absolute, cobre a
   seção) e a foto encosta no canto inferior direito. Ela NÃO usa
   object-fit: cover — em janelas de 900–1200px o cover cortaria as laterais
   e jogaria os frascos por baixo do texto. Com max-width/max-height a foto
   se comporta como "contain": encolhe inteira até caber, e a sobra (em cima
   nas janelas estreitas, à esquerda nas largas) é preenchida pelo #14252d do
   .hero, que é a própria cor da borda da foto. A máscara esfuma as bordas
   de cima e da esquerda para não sobrar emenda. */
@media (max-width: 899px) {
  .hero__media { order: -1; margin-inline: calc(var(--pad-x) * -1); }
  .hero__img {
    display: block; width: 100%; height: auto;
    aspect-ratio: 5 / 4; object-fit: cover; object-position: 92% 50%;
    -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent);
            mask-image: linear-gradient(to bottom, #000 78%, transparent);
  }
}
@media (min-width: 900px) {
  .hero__media { position: absolute; inset: 0; z-index: 0; display: block; pointer-events: none; }
  .hero__img {
    position: absolute; right: 0; bottom: 0;
    width: auto; height: auto; max-width: 100%; max-height: 100%;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 18%),
                        linear-gradient(to bottom, transparent, #000 12%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(to right, transparent, #000 18%),
                        linear-gradient(to bottom, transparent, #000 12%);
            mask-composite: intersect;
  }
}


/* --------------------------------------------------------------------------
   O kit
   -------------------------------------------------------------------------- */
/* mesmo motivo do .ativos-grid (l.481): 4 itens no .grid auto-fit passam por
   um estágio de 3 colunas que deixa o 4º card órfão. 1 → 2 → 4 nunca sobra. */
.kit-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 600px) {
  .kit-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1050px) {
  .kit-grid { grid-template-columns: repeat(4, 1fr); }
}

.step-card {
  position: relative; /* âncora do .step-card__num — sem isto ele escapa do card */
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden; /* clipa o halo do media no raio do card */
  display: flex; flex-direction: column;
  height: 100%; /* iguala a altura das 4 caixas na mesma linha do grid */
}
.step-card__num {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  width: 30px; height: 30px;
  border-radius: var(--r-pill);
  background: var(--c-primary); color: #fff;
  font-size: 13px; font-weight: 800; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}

/* foto sobre halo radial + "pódio" — duas camadas de background atrás da
   img, então nenhuma delas precisa de z-index próprio */
.step-card__media {
  padding: 22px 18px 10px;
  background:
    radial-gradient(ellipse 34% 7% at 50% 88%, var(--c-dash), transparent 72%),
    radial-gradient(circle at 50% 46%, var(--c-surface-alt), var(--c-surface) 70%);
}
.step-card__media img {
  display: block;
  width: 100%; max-width: 260px; margin-inline: auto;
  aspect-ratio: 1 / 1; height: auto; object-fit: contain;
  mix-blend-mode: multiply; /* as fotos são JPG em fundo branco puro — o multiply apaga o quadrado branco contra o halo */
}
@supports not (mix-blend-mode: multiply) {
  .step-card__media { background: var(--c-surface); }
}

.step-card__body { flex: 1; display: flex; flex-direction: column; }

/* faixa da queixa — o incômodo do cliente vem antes do produto (é o que a
   seção promete: "comece pela sua queixa"), então ganha fundo próprio e
   separa visualmente o problema da resposta */
.step-card__queixa-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  min-height: 70px; /* altura igual em todos os cards p/ alinhar o nome do produto */
  background: var(--c-surface-alt);
  border-block: 1px solid var(--c-border);
}
.step-card__icon {
  width: 32px; height: 32px;
  border-radius: var(--r-pill);
  background: var(--c-surface); color: var(--c-primary);
  border: 1px solid var(--c-border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
/* é a fala do cliente, a dor que abre o card — precisa ter peso de frase, não
   de etiqueta. O ícone ao lado encolheu pra 32px justamente pra sobrar
   largura e as quatro queixas caberem numa linha só neste tamanho. */
.step-card__queixa {
  font-size: 13.5px; font-weight: 700; line-height: 1.3;
  color: var(--c-text);
}
.step-card__content {
  flex: 1;
  padding: 16px 20px 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.step-card__nome {
  font-size: 19px; font-weight: 800; line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--c-primary);
}
.step-card__desc {
  font-size: 14px; line-height: 1.5;
  color: var(--c-text-soft);
}
.step-card__beneficio {
  margin-top: auto; /* cola no rodapé, mesmo padrão de .product-card__price-row */
  padding-top: 14px;
  border-top: 1px solid var(--c-border);
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13px; font-weight: 700; line-height: 1.3;
  color: var(--c-primary);
}
.step-card__beneficio svg { flex-shrink: 0; margin-top: 1px; }

/* Barra de etapas — é o 4º item do .kit-grid (ver o comentário no HTML):
   com três produtos a grade tinha uma coluna vazia, e a tira ocupa esse lugar
   como um card vertical, com a mesma altura dos cards de produto.
   É uma linha do tempo: um <ol> com os quatro círculos ligados por um trilho
   contínuo (.protocol-steps::before), que passa POR TRÁS dos círculos — por
   isso o fundo deles é opaco (#434f58 = --c-primary com 10% de branco, o
   mesmo tom do rgba(255,255,255,.1) de antes, só que sem transparência). */
.protocol-strip {
  --proto-dot: 38px;
  background: var(--c-primary);
  background-image: radial-gradient(120% 60% at 100% 0%, rgba(255, 255, 255, 0.07), transparent 60%);
  color: #fff;
  border-radius: var(--r-lg);
  padding: 20px;
  display: flex; flex-direction: column;
}
.protocol-strip__eyebrow {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--c-primary-soft);
}
.protocol-strip__titulo {
  margin-top: 4px;
  font-size: 19px; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em;
  color: #fff;
}
.protocol-steps {
  position: relative;
  list-style: none; margin: 18px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.protocol-steps::before {
  content: ""; position: absolute;
  left: calc(var(--proto-dot) / 2 - 1px); width: 2px;
  top: calc(var(--proto-dot) / 2); bottom: calc(var(--proto-dot) / 2);
  background: linear-gradient(to bottom, var(--c-primary-soft), rgba(147, 167, 178, 0.25));
  border-radius: 2px;
}
.protocol-step {
  position: relative;
  display: flex; align-items: center; gap: 14px;
}
.protocol-step__icon {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: var(--proto-dot); height: var(--proto-dot);
  border-radius: var(--r-pill);
  background: #434f58;
  box-shadow: 0 0 0 4px var(--c-primary), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  color: #fff;
}
.protocol-step__icon svg { display: block; width: 18px; height: 18px; }
.protocol-step__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.protocol-step__nome {
  font-size: 15px; font-weight: 800; line-height: 1.15;
  color: #fff;
}
.protocol-step__num {
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--c-primary-soft);
  font-variant-numeric: tabular-nums;
  margin-right: 2px;
}
.protocol-step__sub { font-size: 13px; line-height: 1.35; color: var(--c-on-primary); }
.protocol-strip__link {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 20px; padding: 12px 14px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px var(--c-ink-hairline);
  font-size: 14px; font-weight: 700;
  color: #fff;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.protocol-strip__link svg { transition: transform 0.2s ease; }
.protocol-strip__link:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.protocol-strip__link:hover svg { transform: translateY(2px); }

@media (min-width: 600px) {
  /* dentro da grade: as quatro etapas se espalham na altura do card (o <ol>
     estica e distribui o espaço entre elas), e o trilho estica junto */
  .protocol-strip { --proto-dot: 44px; padding: 24px 22px; }
  .protocol-steps { flex: 1 1 auto; justify-content: space-around; gap: 18px; margin: 22px 0 4px; }
  .protocol-step__icon svg { width: 20px; height: 20px; }
  .protocol-strip__link { margin-top: 20px; }
}

.kit-closing {
  margin-top: 32px;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  text-align: center;
}
.kit-closing__text { font-size: 16px; color: var(--c-text-soft); max-width: 46ch; }
.kit-closing__text strong { color: var(--c-text); }

/* --------------------------------------------------------------------------
   Diagnóstico ("Onde o fio se perde")
   -------------------------------------------------------------------------- */
/* 1 coluna empilhada por padrão (nunca 2, pra não sobrar item órfão com 3
   itens), 3 colunas iguais a partir de 760px — abaixo disso o par
   problema + solução fica espremido demais lado a lado. */
.diag-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 32px; }
@media (min-width: 760px) {
  .diag-grid { grid-template-columns: repeat(3, 1fr); }
}

/* As quatro linhas do card (ícone / onde / problema / solução) são declaradas
   no grid: com a do problema em 1fr, a faixa roxa encosta no rodapé dos três
   cards e fica alinhada entre eles por construção — é o que antes se tentava
   com um min-height chutado no parágrafo. */
.diag-card {
  display: grid; grid-template-rows: auto auto 1fr auto; gap: 14px;
  background: var(--c-ink-veil);
  border: 1px solid var(--c-ink-hairline);
  border-radius: var(--r-xl);
  padding: 28px 28px 0;
  overflow: hidden;
}
.diag-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: var(--r-md);
  background: var(--c-primary); color: #fff;
}
.diag-card__where { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.diag-card__problem { font-size: 15.5px; line-height: 1.55; color: var(--c-on-ink); }
/* a margem negativa sangra a faixa até as bordas do card (o card tem
   overflow hidden, então ela respeita o arredondamento) */
.diag-card__fix {
  margin: 4px -28px 0; padding: 18px 28px 22px;
  background: var(--c-primary);
}
.diag-card__fix-label {
  display: block; margin-bottom: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--c-on-primary);
}
/* As fotos de produto entram entre o rótulo e o texto (não ao lado dele):
   o card 1 mostra dois frascos e os outros um só, e empilhado assim a largura
   do texto não muda de card para card. Fundo branco porque as fotos da loja
   já vêm recortadas em branco — vira um "chip" de produto sobre a faixa. */
.diag-card__fix-media { display: flex; gap: 8px; margin-bottom: 12px; }
.diag-card__fix-media img {
  display: block; width: 72px; height: 72px;
  object-fit: contain; background: #fff;
  border-radius: var(--r-md);
}
.diag-card__fix-text { font-size: 15px; line-height: 1.5; color: var(--c-on-primary); }
.diag-card__fix-text strong { color: #fff; font-weight: 800; }

/* --------------------------------------------------------------------------
   Zoom de produto — miniatura clicável + modal
   --------------------------------------------------------------------------
   Componente genérico, não amarrado ao diagnóstico: o botão .zoom envolve
   qualquer <img> da página e o mesmo .zoom-modal (um só, no fim do HTML)
   mostra a foto grande, o preço do config.js e o botão de compra.
   O tamanho da miniatura continua vindo do contexto (ex.: os 72px de
   .diag-card__fix-media img) — aqui só entram a moldura e o selo de lupa.
   -------------------------------------------------------------------------- */
.zoom {
  position: relative; display: block;
  margin: 0; padding: 0; border: 0; background: none;
  border-radius: var(--r-md);
  line-height: 0; cursor: zoom-in;
  transition: box-shadow 0.15s ease;
}
.zoom img { display: block; }

/* selo de lupa no canto inferior direito, com anel branco para destacar
   tanto do frasco quanto do roxo do card */
.zoom__icon {
  position: absolute; right: -4px; bottom: -4px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: var(--r-pill);
  background: var(--c-ink); color: #fff;
  box-shadow: 0 0 0 2px #fff;
  pointer-events: none;
}

/* Onde existe mouse, a lupa só aparece quando o ponteiro chega na miniatura
   — sempre visível ela poluía a faixa roxa inteira. Fora deste bloco (ou
   seja, em telas de toque, onde hover não existe) ela continua permanente:
   lá não há ponteiro que a revele, e sem ela nada indica que a foto abre.
   O :focus-visible entra junto para quem navega por teclado ver o mesmo. */
@media (hover: hover) and (pointer: fine) {
  .zoom__icon {
    opacity: 0; transform: scale(0.6);
    transition: opacity 0.15s ease, transform 0.15s ease;
  }
  .zoom:hover .zoom__icon,
  .zoom:focus-visible .zoom__icon { opacity: 1; transform: none; }

  /* o anel branco em volta do frasco é spread puro, sem deslocamento nem
     desfoque: é realce de estado, não sombra de elevação — mesma exceção do
     .btn--pulse (ver README, "Sem sombra em lugar nenhum") */
  .zoom:hover { box-shadow: 0 0 0 4px #fff; }
}

/* --- o modal ------------------------------------------------------------ */
.zoom-modal {
  width: min(840px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0; border: 0;
  border-radius: var(--r-xl);
  background: var(--c-surface);
  color: var(--c-text);
  overflow: hidden;
}
.zoom-modal::backdrop { background: rgba(36, 31, 58, 0.72); }

.zoom-modal__card {
  position: relative;
  display: grid; grid-template-columns: 1fr;
  max-height: calc(100dvh - 32px);
  overflow: auto;
}
/* lado a lado só quando as duas colunas cabem sem espremer o preço */
@media (min-width: 720px) {
  .zoom-modal__card { grid-template-columns: 1fr 1fr; align-items: stretch; }
}

.zoom-modal__media {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 28px;
  background: var(--c-surface-alt);
}
/* as fotos da loja já vêm recortadas em branco: o lilás atrás é só a moldura */
.zoom-modal__media img {
  width: 100%; max-width: 320px; height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.zoom-modal__media .tag { top: 16px; left: 16px; }

/* Modo foto: o gatilho sem data-zoom-produto não é um frasco recortado da
   loja, é uma foto de verdade (um antes/depois, um print de UGC). Nela o
   multiply tingiria tudo de lilás, então ele sai, e a foto ocupa o painel
   inteiro — continua em "contain", para não cortar rosto nem cabelo. */
.zoom-modal--foto .zoom-modal__media { padding: 12px; }
.zoom-modal--foto .zoom-modal__media img {
  max-width: 100%;
  mix-blend-mode: normal;
  border-radius: var(--r-md);
}

.zoom-modal__body {
  display: flex; flex-direction: column; gap: 10px;
  padding: 28px 28px 26px;
}
.zoom-modal__titulo { font-size: 22px; font-weight: 900; letter-spacing: -0.02em; line-height: 1.2; }
.zoom-modal__texto { font-size: 15px; line-height: 1.55; color: var(--c-text-soft); }
.zoom-modal__price-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.zoom-modal__was { font-size: 14px; color: var(--c-text-was); }
.zoom-modal__price { font-size: 28px; font-weight: 900; letter-spacing: -0.02em; line-height: 1.1; }
.zoom-modal__installments { font-size: 13px; color: var(--c-text-soft); }
/* o CTA é o fim da coluna: empurra tudo que vier antes para cima, então a
   altura do texto (que muda de produto para produto) não desalinha o botão */
.zoom-modal__cta { margin-top: auto; }
.zoom-modal__nota { font-size: 12px; line-height: 1.4; color: var(--c-text-soft); text-align: center; }

.zoom-modal__close {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0;
  border: 1px solid var(--c-border); border-radius: var(--r-pill);
  background: var(--c-glass); color: var(--c-text);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
  .zoom-modal__close:hover { background: var(--c-ink); color: #fff; }
}

@keyframes fh-zoom-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
@keyframes fh-zoom-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.zoom-modal[open] { animation: fh-zoom-in 0.18s ease-out; }
.zoom-modal[open]::backdrop { animation: fh-zoom-fade 0.18s ease-out; }

/* --------------------------------------------------------------------------
   Ativos
   -------------------------------------------------------------------------- */
/* 2 colunas de cards largos (antes eram 4 colunas estreitas): cada card agora
   é horizontal — painel visual + texto — e não caberia em 1/4 da tela. */
.ativos-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .ativos-grid { grid-template-columns: repeat(2, 1fr); }
}

.active-card {
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-xl); overflow: hidden;
  display: grid; grid-template-columns: 1fr; /* painel em cima, no mobile */
  height: 100%;
}
@media (min-width: 560px) {
  .active-card { grid-template-columns: 172px minmax(0, 1fr); }
}
.active-card--ink { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }

/* Painel com ÍCONE. Os quatro cards usaram este estado enquanto não havia
   foto dos ingredientes; desde 22/09/2026 todos usam a variante --macro com
   foto, e nenhum HTML chama mais estas regras. Ficam aqui porque são o
   fallback de um ativo novo que entre sem foto — e porque um ícone vazado
   sobre o card escuro não é trivial de reacertar (ver .--ink logo abaixo). */
.active-card__icone {
  display: flex; align-items: center; justify-content: center;
  width: 84px; height: 84px; border-radius: var(--r-pill);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  color: var(--c-primary);
}
.active-card__icone svg { width: 42px; height: 42px; }
/* no card escuro o círculo branco viraria um furo de luz: ele fica vazado,
   com o traço do ícone no bege que já é a cor de texto sobre o --c-ink */
.active-card--ink .active-card__icone {
  background: var(--c-ink-veil);
  border-color: var(--c-ink-hairline);
  color: var(--c-on-ink);
}
.active-card__media {
  display: flex; align-items: center; justify-content: center;
  padding: 24px; min-height: 150px;
  background: radial-gradient(circle at 50% 42%, var(--c-chip-bg), var(--c-surface-alt) 78%);
  border-bottom: 1px solid var(--c-border);
}
@media (min-width: 560px) {
  .active-card__media { border-bottom: 0; border-right: 1px solid var(--c-border); }
}
/* No card escuro o painel também precisa escurecer. Na LP Force Hair isso
   não aparecia porque lá a foto macro cobre o painel inteiro (padding 0);
   aqui, com ícone, o gradiente claro ficava como um retângulo bege colado
   num card preto. */
.active-card--ink .active-card__media {
  border-color: var(--c-ink-hairline);
  background: radial-gradient(circle at 50% 42%, #2b3740, var(--c-ink) 78%);
}
.active-card__photo {
  display: block; transition: transform 0.25s ease;
  width: 100%; max-width: 140px; height: auto;
  aspect-ratio: 1 / 1; object-fit: contain;
  mix-blend-mode: multiply; /* JPG de fundo branco — apaga o quadrado contra o painel */
}
@supports not (mix-blend-mode: multiply) {
  .active-card__media { background: var(--c-surface); }
}

/* Variante para a foto macro do ingrediente (a que o comentário do HTML
   dizia estar pendente). Ela é diferente do JPG de produto em três coisas,
   e cada uma precisa ser desfeita aqui:
   - não tem fundo branco recortável, então o mix-blend-mode multiply, que
     apaga o quadrado dos outros, sujaria a foto contra o painel lilás;
   - não é quadrada (4:3), então o aspect-ratio fixo deixaria tarja;
   - é foto, não produto: preenche o painel inteiro em vez de flutuar nele,
     por isso o padding do painel cai a zero. */
/* a dupla de classes é de propósito: o bloco de mobile, lá embaixo, repõe um
   `padding: 12px` em .active-card__media, e com uma classe só essa regra
   posterior ganhava por ordem de origem — a foto macro ficava com uma moldura
   lilás em volta no celular */
.active-card__media--macro.active-card__media { padding: 0; display: block; overflow: hidden; }
.active-card__media--macro .active-card__photo {
  width: 100%; height: 100%; max-width: none;
  aspect-ratio: auto; object-fit: cover;
  mix-blend-mode: normal;
}

/* Enquadramento de cada foto macro (um object-position por ativo). O painel
   é estreito e alto (172px de largura), então o cover corta as laterais —
   as três primeiras são retrato e quase não perdem nada; o coco é paisagem
   e é o único que precisa de mira.
   - Lumini: o halo de luz está no eixo central da foto;
   - Colágeno: puxa para a esquerda, onde está a gota grande;
   - Ácido: a gota grande ocupa o terço esquerdo;
   - Coco: as duas metades ficam à direita do centro (≈ 62%). */
.active-card__photo--lumini   { object-position: 50% 50%; }
.active-card__photo--colageno { object-position: 30% 55%; }
.active-card__photo--acido    { object-position: 35% 50%; }
.active-card__photo--coco     { object-position: 62% 50%; }
.active-card__body {
  padding: 24px;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
}

/* min-height de 2 linhas mesmo quando o nome cabe em uma: é isso que faz a
   linha divisória cair na mesma altura nos quatro cards (mesmo truque do
   .hero__loss-problem). Nenhum nome de ativo passa de 2 linhas hoje — se
   algum passar, ou encurta o nome ou sobe este valor para 3 linhas. */
.active-card__title {
  font-size: clamp(19px, 1.6vw, 24px); font-weight: 900; letter-spacing: -0.02em;
  line-height: 1.2;
}
/* o papel do ativo em uma expressão — é o que deixa os 4 cards comparáveis
   de relance, antes de o visitante ler as duas linhas de descrição */
.active-card__role {
  font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-primary);
}
.active-card--ink .active-card__role { color: var(--c-primary-soft); }

.active-card__list {
  display: flex; flex-direction: column; gap: 10px;
  font-size: 15px; color: var(--c-text-soft); line-height: 1.5;
  width: 100%; margin-top: 8px; padding-top: 14px;
  border-top: 1px solid var(--c-border);
}
.active-card__list li { position: relative; padding-left: 16px; }
.active-card__list li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-primary);
}
.active-card__list strong { color: var(--c-text); }
.active-card--ink .active-card__list {
  color: var(--c-on-ink-soft);
  border-top-color: var(--c-ink-hairline);
}
.active-card--ink .active-card__list li::before { background: var(--c-primary-soft); }
.active-card--ink .active-card__list strong { color: #fff; }

/* --------------------------------------------------------------------------
   Diferenciais ("Por que a linha Force Hair é a mais escolhida")
   -------------------------------------------------------------------------- */
.diferenciais-grid {
  display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 32px;
}
@media (min-width: 640px) {
  .diferenciais-grid { grid-template-columns: repeat(2, 1fr); }
}
/* com o texto curto os 4 cards cabem numa faixa só, e aí a seção se lê de
   relance em vez de exigir duas passadas de leitura em 2x2 */
@media (min-width: 1050px) {
  .diferenciais-grid { grid-template-columns: repeat(4, 1fr); }
}
.diferenciais-card {
  /* roxo chapado, o mesmo --c-primary da faixa "O que age ali" e dos chips:
     era o único gradiente da página inteira, e ele deixava os quatro cards
     com um tom diferente em cada canto quando vistos lado a lado */
  background: var(--c-primary);
  color: #fff; border-radius: var(--r-xl);
  border: 1px solid var(--c-ink-hairline);
  padding: 24px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
}
.diferenciais-card__icon {
  width: 40px; height: 40px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid var(--c-ink-hairline);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: #fff;
}
.diferenciais-card__icon svg { width: 21px; height: 21px; }
.diferenciais-card h3 { font-size: 17px; font-weight: 800; line-height: 1.25; }
.diferenciais-card p { font-size: 14px; color: var(--c-on-primary); line-height: 1.5; }

.stats-card {
  grid-column: 1 / -1;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: 28px;
}
/* a faixa escura pinta tudo de branco; o card é claro e precisa voltar atrás */
.section--ink .stats-card { color: var(--c-text); }
.stats-card__title { font-size: 19px; font-weight: 800; margin-bottom: 22px; }
.stats-bars { display: flex; flex-direction: column; gap: 12px; }
.stats-bar__track {
  background: var(--c-surface-alt);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.stats-bar__fill {
  display: flex; align-items: center; gap: 6px;
  width: var(--value);
  min-width: min-content;
  max-width: 100%;
  min-height: 42px; padding: 0 18px;
  border-radius: var(--r-pill);
  background: var(--c-accent); color: #fff;
  font-size: clamp(13px, 2.4vw, 15px);
  white-space: nowrap;
  overflow: hidden; /* o texto vai sendo revelado enquanto a barra cresce */
}
.stats-bar__value { font-weight: 800; }

/* Barras crescendo: começam em zero e vão até --value quando a caixa entra
   na tela (o .is-visible e o --i em cascata vêm do app.js, seção 8).
   O min-width: min-content do estado final é o que garante que a legenda
   nunca fique cortada em telas estreitas — mas ele não pode valer durante a
   animação, senão a barra saltaria de cara para a largura do texto em vez de
   crescer. Daí o transition de min-width com delay: ele só entra em vigor
   quando o crescimento termina, e aí a barra já é maior que o texto. */
.js-anim .stats-bar__fill {
  width: 0;
  min-width: 0;
  transition:
    width 1.1s cubic-bezier(0.22, 0.61, 0.36, 1),
    min-width 0s linear 1.1s;
  transition-delay: calc(var(--i, 0) * 110ms), calc(1.1s + var(--i, 0) * 110ms);
}
.js-anim .stats-bar__fill.is-visible {
  width: var(--value);
  min-width: min-content;
}

/* --------------------------------------------------------------------------
   Comparativo — "Por que o Force Hair é diferente"
   -------------------------------------------------------------------------- */
.compare-table__viewport { position: relative; margin-top: 32px; }
.compare-table__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* "separate" em vez de "collapse" só para a coluna destacada poder ter
   border-radius (no modo collapse o navegador ignora radius em célula).
   Com border-spacing 0 e as células usando apenas border-top, o desenho
   fica idêntico ao do collapse: nenhuma borda dobra. */
.compare-table {
  width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0;
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-xl);
  overflow: hidden;
}
.compare-table th, .compare-table td {
  padding: 16px 14px; text-align: center; font-size: 14px; color: var(--c-text-soft);
  border-top: 1px solid var(--c-border);
}
.compare-table thead th { border-top: 0; padding-bottom: 18px; font-weight: 700; color: var(--c-text); vertical-align: bottom; }
.compare-table__prod {
  display: block; width: 100%; max-width: 128px; height: auto;
  aspect-ratio: 1 / 1; object-fit: contain;
  margin: 0 auto 12px;
  border-radius: var(--r-md); background: var(--c-surface-alt);
  overflow: hidden;
}
.compare-table__brand { display: block; }
.compare-table tbody th {
  text-align: left; font-weight: 600; color: var(--c-text); white-space: nowrap;
}
/* a coluna do Force Hair é a única com fundo, então arredondar a primeira
   e a última célula dela faz a coluna inteira virar um bloco dentro da
   tabela. O radius é o do card (--r-md), menor que o da tabela (--r-xl). */
.compare-table__hl { background: var(--c-primary); color: #fff; }
.compare-table thead th.compare-table__hl { color: #fff; }
/* o filete lilás das linhas some contra o roxo: ali ele vira um véu branco */
.compare-table tbody .compare-table__hl { border-top-color: var(--c-ink-hairline); }
/* sobre o roxo, o painel branco é o que destaca a foto; nas outras colunas
   ele fica no lilás claro, que já separa a foto do branco da tabela.
   A coluna do Force Hair mostra a linha inteira — quatro produtos na mesma
   foto, não um frasco só — e no quadrado de 128px das outras colunas o grupo
   virava um borrão. Ela ganha um painel maior: é a coluna em destaque, e é a
   única cuja foto precisa ser efetivamente lida. */
.compare-table__hl .compare-table__prod {
  background: var(--c-surface);
  max-width: 196px;
  padding: 10px;
}
.compare-table thead .compare-table__hl {
  border-top-left-radius: var(--r-md); border-top-right-radius: var(--r-md);
}
.compare-table tbody tr:last-child .compare-table__hl {
  border-bottom-left-radius: var(--r-md); border-bottom-right-radius: var(--r-md);
}
.compare-table__hl strong { color: #fff; font-weight: 800; }
.compare-table__check, .compare-table__x { display: inline-block; vertical-align: middle; }
.compare-table__check { color: var(--c-primary); }
.compare-table__hl .compare-table__check { color: #fff; }
.compare-table__x { color: var(--c-border); }
/* a dica de arrasto só existe onde a tabela rola: no mobile */
.compare-table__hint { display: none; }
.compare-table__note { margin-top: 14px; font-size: 12px; color: var(--c-text-soft); text-align: center; }

/* --------------------------------------------------------------------------
   Benefícios
   -------------------------------------------------------------------------- */
.beneficios-layout {
  display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center;
}
.beneficios-media { order: -1; } /* no mobile a foto abre a seção */

/* 3 colunas só quando há largura para os dois lados respirarem ao redor da
   foto; abaixo disso a seção continua empilhada */
@media (min-width: 1000px) {
  /* a coluna do meio cresce com a tela em vez de ficar travada em 340px: numa
     tela larga a foto era um selinho no meio de dois blocos de texto, com
     lilás sobrando em volta. O clamp segura o piso em 340px (onde as colunas
     laterais já estão no limite) e o teto em 560px. */
  .beneficios-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, clamp(380px, 40vw, 720px)) minmax(0, 1fr);
    gap: 32px;
  }
  .beneficios-media { order: 0; }
  /* a coluna da esquerda espelha a da direita: texto alinhado à direita e
     check do outro lado, para os dois lados apontarem para o produto */
  .beneficios-col--left { text-align: right; }
  .beneficios-col--left .benefit { flex-direction: row-reverse; }
}

/* A imagem daqui (beneficios-alisamentos.webp) são os três frascos sobre
   fundo BRANCO — o mesmo tipo de arquivo dos cards de produto, e não o
   recorte com canal alfa que a LP Encorpax usa neste slot. O motivo está
   na própria linha: o Select One é um frasco branco perolado fotografado
   sobre fundo branco, e nenhuma chave de branco separa um do outro.
   Daí as três consequências:
   - o mix-blend-mode multiply VOLTA (a Encorpax o dispensa), porque é ele
     que apaga o quadrado branco contra o cinza da seção;
   - continua sem `border-radius`: não há caixa para arredondar, o fundo da
     seção aparece direto por trás dos frascos;
   - continua sem halo/pódio de gradiente, pelo mesmo motivo.
   O aspect-ratio também fica de fora: a composição é 1,56:1, não quadrada. */
.beneficios-media {
  display: flex; align-items: center; justify-content: center;
}
.beneficios-media img {
  display: block;
  width: 100%; max-width: 420px; height: auto;
  /* ⚠️ Aqui, ao contrário da Encorpax, a foto NÃO tem canal alfa: são os três
     frascos sobre fundo BRANCO, o mesmo tipo de arquivo dos cards de produto,
     apagado pelo multiply contra o cinza da seção. Recortar não era opção —
     o Select One é um frasco branco perolado sobre fundo branco. */
  mix-blend-mode: multiply;
}
@supports not (mix-blend-mode: multiply) {
  .beneficios-media img { background: #fff; border-radius: var(--r-xl); }
}
/* Em 3 colunas quem limita a foto é a própria coluna do grid (o clamp lá em
   cima); o teto de 420px acima vale só para o layout empilhado.
   Este bloco precisa ficar DEPOIS da regra base, não junto com o resto do
   `min-width: 1000px`: as duas têm a mesma especificidade e, lá em cima,
   quem vinha por último era o `max-width: 420px` — a foto crescia até 420px
   e parava, ignorando a coluna. */
@media (min-width: 1000px) {
  .beneficios-media img { max-width: 100%; }
}

.beneficios-col { display: flex; flex-direction: column; gap: 24px; }
.benefit {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 15px; font-weight: 600; line-height: 1.45;
  color: var(--c-text);
}
.benefit__text { flex: 1; }
/* Teto de largura do texto, só no layout de 3 colunas — e depois da regra
   base, senão o `flex: 1` dela viria por último e anularia o teto.
   Sem isso, em tela larga a coluna passava de 480px e cada frase fechava numa
   linha só, comprida: a lista virava um parágrafo solto de cada lado e a foto
   do meio parecia pequena entre eles. Com 30ch as frases quebram em duas
   linhas, que é a forma de lista. Empilhado (mobile) o teto não entra: ali a
   coluna já é estreita e limitar mais só geraria uma terceira linha. */
@media (min-width: 1000px) {
  .benefit__text { flex: 0 1 auto; max-width: 30ch; }
}
.benefit__check {
  width: 24px; height: 24px; flex-shrink: 0; margin-top: 1px;
  border-radius: 50%;
  background: var(--c-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
}

/* --------------------------------------------------------------------------
   Produtos
   -------------------------------------------------------------------------- */
.product-card {
  background: #fff; border-radius: var(--r-lg); overflow: hidden;
  display: flex; flex-direction: column; border: 1px solid var(--c-border);
}
/* anel por fora em vez de borda de 3px: assim o card em destaque tem
   exatamente a mesma caixa interna dos outros e nada desalinha */
.product-card--featured { border-color: var(--c-primary); box-shadow: 0 0 0 2px var(--c-primary); }
/* mesmo tratamento das outras fotos de produto da página (halo + "pódio"),
   no lugar do quadrado branco chapado */
.product-card__media {
  position: relative;
  border-bottom: 1px solid var(--c-border);
  background:
    radial-gradient(ellipse 34% 6% at 50% 86%, var(--c-dash), transparent 72%),
    radial-gradient(circle at 50% 46%, var(--c-surface-alt), var(--c-surface) 70%);
}
.product-card__media img {
  width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: contain;
  display: block; padding: 18px;
  mix-blend-mode: multiply; /* JPG de fundo branco — apaga o quadrado contra o halo */
}
@supports not (mix-blend-mode: multiply) {
  .product-card__media { background: var(--c-surface); }
}
.product-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
/* Sem min-height aqui.
   O h3 reservava 3 linhas e a descrição 2, pra alinhar preço e botão entre os
   cards da fileira. Só que quem faz esse alinhamento de verdade é o
   `margin-top: auto` do .product-card__price-row logo abaixo: ele empurra o
   bloco de preço pro rodapé do card, e os cards já têm a mesma altura. As
   reservas viraram só espaço morto — na largura atual quase todo título cabe
   em 2 linhas, então sobrava uma linha em branco entre ele e a descrição. */
.product-card__body h3 { font-size: 17px; font-weight: 800; line-height: 1.25; }
.product-card__meta {
  font-size: 13px; line-height: 1.4; color: var(--c-text-soft);
}
/* filete separando "o que é" de "quanto custa" — mesma divisória do
   .step-card__beneficio, para o preço não flutuar colado na descrição */
.product-card__price-row {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-top: auto; padding-top: 14px;
  border-top: 1px solid var(--c-border);
}
.product-card__was { font-size: 14px; color: var(--c-text-was); }
.product-card__price { font-size: 24px; font-weight: 900; letter-spacing: -0.02em; line-height: 1.1; }
/* o tônico não tem parcelamento e o <p> vazio encolhia para zero, deixando o
   bloco de preço daquele card mais baixo que o dos vizinhos */
.product-card__installments { font-size: 13px; color: var(--c-text-soft); min-height: 1.4em; }
.product-card__cta { margin-top: 10px; }

/* Produto que a loja marcou como indisponível. A página NUNCA nasce com esta
   classe: quem a coloca é o precos-loja.js, depois de confirmar com a loja —
   então nada aqui afeta o HTML servido nem quem está com o JS desligado.
   O card continua clicável de propósito (a página do produto na loja é que
   oferece o "avise-me"), só perde o peso visual de uma oferta ativa. */
.product-card.is-esgotado .product-card__media img { opacity: 0.45; filter: grayscale(1); }
.product-card.is-esgotado .product-card__price,
.product-card.is-esgotado .product-card__was { color: var(--c-text-soft); }
.product-card.is-esgotado .product-card__cta {
  background: var(--c-surface-alt);
  color: var(--c-text-soft);
  border-color: var(--c-border);
  animation: none; /* mata o .btn--pulse: nada a pulsar se não dá para comprar */
}

/* Carrossel — trilho de rolagem horizontal com snap, no lugar do grid de 2 linhas */
.carousel { position: relative; }
/* as setas ficavam sobre o primeiro e o último card, tapando o selo e o título.
   A partir de 900px a faixa abre uma calha de 52px de cada lado e elas moram
   ali; abaixo disso somem, porque o trilho já rola por toque. */
@media (min-width: 900px) {
  .carousel { padding-inline: 52px; }
  .carousel__nav--prev { left: 0; }
  .carousel__nav--next { right: 0; }
}
@media (max-width: 899px) {
  .carousel__nav { display: none; }
}
.carousel__track {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x proximity;
  scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
  padding: 4px 4px 12px; margin: -4px -4px -12px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > .product-card {
  flex: 0 0 78%; scroll-snap-align: start;
}
@media (min-width: 560px) { .carousel__track > .product-card { flex-basis: 46%; } }
@media (min-width: 860px) { .carousel__track > .product-card { flex-basis: 31%; } }
@media (min-width: 1140px) { .carousel__track > .product-card { flex-basis: 23%; } }
.carousel__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; border-radius: var(--r-pill);
  border: 1px solid var(--c-border); background: #fff; color: var(--c-text);
  font-size: 20px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;

}
.carousel__nav--prev { left: -8px; }
.carousel__nav--next { right: -8px; }
.carousel__nav:disabled { opacity: 0.35; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .carousel__nav:not(:disabled):hover { background: var(--c-surface-alt); }
}
@media (max-width: 639px) { .carousel__nav { display: none; } }

/* Com TRÊS produtos, o carrossel vira GRADE a partir de 900px.
   O componente veio de uma LP de sete produtos, onde o trilho precisa
   mesmo rolar. Aqui os três cards, em flex-basis de 23%, ocupavam 69% do
   container e deixavam quase um terço de branco à direita — com duas setas
   que não tinham para onde levar. Em grade eles dividem a largura inteira.
   Abaixo de 900px nada muda: no intervalo 860–899px o flex-basis já é 31%
   (os três preenchem a linha) e, mais estreito que isso, o trilho volta a
   ser o carrossel de arrastar, que é o certo no celular.
   ⚠️ Entrando um QUARTO produto, apague este bloco: aí o trilho rolável
   volta a fazer sentido e as setas voltam a ter destino. */
@media (min-width: 900px) {
  .carousel { padding-inline: 0; }
  .carousel__nav { display: none; }
  .carousel__track {
    display: grid; grid-template-columns: repeat(3, 1fr);
    overflow-x: visible;
  }
  .carousel__track > .product-card { flex-basis: auto; }
}

/* --------------------------------------------------------------------------
   Oferta / garantias
   -------------------------------------------------------------------------- */
.guarantee-grid {
  display: grid; grid-template-columns: 1fr; gap: 16px;
}
@media (min-width: 620px) { .guarantee-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .guarantee-grid { grid-template-columns: repeat(4, 1fr); } }

.guarantee {
  background: var(--c-ink-veil); border: 1px solid var(--c-ink-hairline);
  border-radius: var(--r-lg); padding: 24px;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
}
.guarantee__icon {
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: var(--r-pill);
  background: var(--c-ink-veil); border: 1px solid var(--c-ink-hairline);
  color: var(--c-primary-soft);
  display: flex; align-items: center; justify-content: center;
}
/* sem min-height: a reserva de 2 linhas deixava uma linha em branco entre o
   título e o parágrafo em todo card cujo título cabia em uma só */
.guarantee__title {
  font-size: 17px; font-weight: 800; line-height: 1.3;
}
.guarantee p { font-size: 14.5px; line-height: 1.55; color: var(--c-on-ink); }

/* tira de selos — fecha a seção com o que é verificável sobre a fabricação */
.selos {
  margin-top: 28px; padding-top: 24px;
  border-top: 1px solid var(--c-ink-hairline);
  display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 40px;
}
.selo {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--c-on-ink);
}
/* SVG inline em currentColor: o lilás é o mesmo do .guarantee__icon logo
   acima, então a tira de selos lê como parte da seção e não como um bloco
   solto de imagens */
.selo svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--c-primary-soft); }

/* --------------------------------------------------------------------------
   Estrelas (componente genérico — hero, avaliações)
   -------------------------------------------------------------------------- */
.stars, .hero__stars { display: flex; gap: 2px; color: var(--c-star); }
.stars--sm svg { width: 14px; height: 14px; }

/* Entrada das estrelas: cada uma "pipoca" em sequência quando o bloco aparece
   (o delay vem do --i que o app.js coloca em cada svg). */
@keyframes fh-star-pop {
  0%   { opacity: 0; transform: scale(0.4) rotate(-25deg); }
  60%  { opacity: 1; transform: scale(1.18) rotate(4deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
.js-anim .hero__stars.is-visible svg,
.js-anim .stars.is-visible svg {
  animation: fh-star-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  animation-delay: calc(var(--i, 0) * 90ms);
}

/* --------------------------------------------------------------------------
   Avaliações (seção desligada por padrão — ver .sem-avaliacoes no fim do arquivo)
   -------------------------------------------------------------------------- */
.avaliacoes-summary {
  background: #fff; border-radius: var(--r-xl); padding: 28px;
  max-width: 420px; margin: 32px auto 0; text-align: center;
}
.avaliacoes-summary__score { display: flex; align-items: center; justify-content: center; gap: 10px; }
.avaliacoes-summary__score strong { font-size: 36px; font-weight: 900; letter-spacing: -0.02em; }
.avaliacoes-summary__meta { margin-top: 6px; font-size: 13px; color: var(--c-text-soft); }
.avaliacoes-summary__bars { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; text-align: left; }
.avaliacoes-summary__bar-row {
  display: grid; grid-template-columns: 28px 1fr 34px; gap: 10px; align-items: center;
  font-size: 12px; color: var(--c-text-soft);
}
.avaliacoes-summary__bar { display: block; height: 8px; border-radius: var(--r-pill); background: var(--c-surface-alt); overflow: hidden; }
.avaliacoes-summary__bar span { display: block; height: 8px; border-radius: var(--r-pill); background: var(--c-primary); }

.avaliacoes-grid { margin-top: 20px; }
.avaliacoes-card {
  background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-lg);
  padding: 20px; display: flex; flex-direction: column; gap: 10px;
}
.avaliacoes-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.avaliacoes-card__head strong { font-size: 14px; }
.avaliacoes-card p { font-size: 14px; color: var(--c-text-soft); line-height: 1.55; }
.avaliacoes-card__tag { font-size: 12px; color: var(--c-text-soft); }

/* --------------------------------------------------------------------------
   Prova social (UGC) — carrossel horizontal contínuo, full-bleed
   -------------------------------------------------------------------------- */
.ugc__marquee { position: relative; overflow: hidden; }
.ugc__track {
  display: flex; gap: 16px; width: max-content;
  padding-bottom: 6px;
  animation: ugc-scroll 44s linear infinite; /* duração real vem do app.js */
}
/* o gap do grupo é igual ao do trilho: é o que faz a emenda entre uma cópia
   e a seguinte ficar indistinguível de qualquer outro intervalo */
.ugc__group { display: flex; gap: 16px; flex-shrink: 0; }
/* só o hover pausa. A regra antiga também pausava enquanto um vídeo
   tocasse, o que com autoplay travaria o mural para sempre. */
.ugc__marquee:hover .ugc__track { animation-play-state: paused; }

@keyframes ugc-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.ugc__item {
  position: relative; flex: 0 0 auto; width: 190px;
  border-radius: var(--r-lg); overflow: hidden; background: #000;
  cursor: pointer;
}
.ugc__item--photo { cursor: default; }
.ugc__media {
  width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; display: block;
}
.ugc__play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .2s ease;
}
.ugc__item:hover .ugc__play { opacity: 1; }
/* com autoplay não há o que o botão faça: o vídeo já roda e não tem áudio.
   Ele só volta quando o sistema pede movimento reduzido (ver app.js, item 5). */
.ugc__marquee.ugc-auto .ugc__play { display: none; }
.ugc__marquee.ugc-auto .ugc__item { cursor: default; }
.ugc__item.is-playing .ugc__play { opacity: 0; pointer-events: none; }
.ugc__play svg { width: 44px; height: 44px; }

/* Setas — sempre visíveis (ao contrário de .carousel__nav, que some no
   mobile: ali sobra o toque nativo por scroll-snap; aqui, sem elas, quem
   não tem hover e quem está com movimento reduzido não alcança os últimos
   itens, já que o trilho não é um scroll container por padrão). */
.ugc__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 36px; height: 36px; border-radius: var(--r-pill);
  border: 1px solid var(--c-border); background: #fff; color: var(--c-text);
  font-size: 18px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;

}
.ugc__nav--prev { left: 12px; }
.ugc__nav--next { right: 12px; }
.ugc__nav svg { display: block; }
@media (hover: hover) and (pointer: fine) {
  .ugc__nav:hover { background: var(--c-surface-alt); }
}

/* Modo manual: a seta desliga a animação e vira o trilho num scroll
   container de verdade (scrollBy via app.js, mesmo padrão do carrossel de
   produtos). Toque e movimento reduzido já nascem nesse modo, sem precisar
   clicar em nada. */
.ugc__marquee.is-manual {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
}
.ugc__marquee.is-manual::-webkit-scrollbar { display: none; }
.ugc__marquee.is-manual .ugc__track { animation: none; }
.ugc__marquee.is-manual .ugc__item { scroll-snap-align: start; }
@media (hover: none) {
  .ugc__marquee {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .ugc__marquee::-webkit-scrollbar { display: none; }
  .ugc__track { animation: none; }
  .ugc__item { scroll-snap-align: start; }
  .ugc__play { opacity: 1; } /* não há :hover em touch — o play precisa estar sempre visível */
}

@media (prefers-reduced-motion: reduce) {
  .ugc__marquee { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; }
  .ugc__marquee::-webkit-scrollbar { display: none; }
  .ugc__track { animation: none; }
  .ugc__item { scroll-snap-align: start; }
}

/* --------------------------------------------------------------------------
   Modo de uso
   -------------------------------------------------------------------------- */
.routine-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 620px) { .routine-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .routine-grid { grid-template-columns: repeat(4, 1fr); } }

.routine-step {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); overflow: hidden;
  display: flex; flex-direction: column;
}
/* o número era um algarismo solto no topo do card; agora ancora a foto do
   produto daquele passo, que é o que identifica a etapa de relance */
/* O painel tem proporção própria (4:3) em vez de ser só o padding em volta
   da foto: assim os quatro cards têm exatamente a mesma altura de imagem,
   independente de o produto ser um frasco alto ou um pote baixo. */
.routine-step__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: radial-gradient(circle at 50% 46%, var(--c-surface-alt), var(--c-surface) 72%);
}
/* A foto sai do fluxo e passa a medir 100% x 100% do painel. Duas armadilhas
   que este bloco evita, as duas já testadas no navegador:
     1. em flex com height: 100%, a altura não resolvia (o painel tem altura
        automática, vinda do aspect-ratio) e a imagem caía para a altura
        intrínseca — 1:1 — esticando o painel de volta para um quadrado;
     2. posicionada por inset com width/height: auto, um <img> é elemento
        substituído: ele ignora o esticamento e volta ao tamanho intrínseco
        (533px), estourando o painel e sendo cortado pelo card.
   Com width/height em 100% a caixa é definida nos dois eixos, e o respiro em
   volta da foto vira o padding — que o "contain" respeita, porque ele encaixa
   no content box. */
.routine-step__media img {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  padding: 18px 18px 10px;
  object-fit: contain;
  mix-blend-mode: multiply;
}
/* o número fica por cima da foto */
.routine-step__num { z-index: 1; }

/* Variante foto — o passo mostra uma cena de uso (alguém lavando o cabelo) em
   vez de um frasco recortado em fundo branco. Três coisas mudam:
     1. sai o mix-blend-mode: multiply, que tingiria a foto inteira de lilás;
     2. o object-fit vira cover, porque o contain deixaria a foto encolhida
        dentro do painel em vez de preenchê-lo;
     3. o padding e o gradiente do fundo saem — a foto sangra de borda a borda.
   Para usar em outro passo, é só acrescentar a classe no .routine-step__media
   e trocar o src; nada mais precisa mudar. */
.routine-step__media--foto { background: none; }
.routine-step__media--foto img {
  padding: 0;
  object-fit: cover;
  /* o painel é 4:3 no desktop, igual ao recorte da foto, então aqui não sobra
     corte nenhum; no celular ele é 16:9 e este valor é que escolhe a faixa
     que fica. Fica centrado: nas fotos oficiais o frasco ocupa quase toda a
     altura, e puxar o recorte para cima (como estava, em 38%) decepava a base
     dele e a linha do "300ml" — o produto é justamente o que identifica o
     passo. Centrado, sobra meio dedo de corte em cima e embaixo. */
  object-position: 50% 50%;
  mix-blend-mode: normal;
}
/* O "01" é --c-dash, um lilás claro pensado para o painel quase branco do
   frasco: sobre uma foto ele sumiria. Ele vira branco, e este véu no topo
   garante o contraste seja qual for a foto que entre aqui depois. */
.routine-step__media--foto::after {
  content: ""; position: absolute; inset: 0 0 auto; height: 92px;
  background: linear-gradient(rgba(36, 31, 58, 0.55), rgba(36, 31, 58, 0));
  pointer-events: none;
}
.routine-step__media--foto .routine-step__num { color: #fff; }
@supports not (mix-blend-mode: multiply) {
  .routine-step__media { background: var(--c-surface); }
}
.routine-step__num {
  position: absolute; top: 14px; left: 14px;
  font-size: 30px; font-weight: 900; line-height: 1;
  color: var(--c-dash);
}
.routine-step__body {
  flex: 1;
  padding: 16px 20px 20px;
  display: flex; flex-direction: column; gap: 6px;
}
.routine-step__when {
  font-size: 11px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--c-primary);
}
.routine-step__produto { font-size: 17px; font-weight: 800; line-height: 1.25; }
.routine-step p { font-size: 14px; line-height: 1.5; color: var(--c-text-soft); margin-top: 4px; }

/* --------------------------------------------------------------------------
   Jornada de transformação — timeline de 4 marcos, sem percentual (ver README)
   -------------------------------------------------------------------------- */
.jornada { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 32px; }
@media (min-width: 760px) {
  .jornada { grid-template-columns: repeat(4, 1fr); gap: 20px; }
}
/* Sem trilho e sem marcador solto. O desenho anterior punha o ícone em cima
   da borda de topo do card, com a régua passando por trás: eram três
   horizontais brigando na mesma linha (a régua, a borda do card e o anel
   branco que recortava o ícone) e ficava sujo.
   Agora o ícone mora DENTRO do card, na mesma linha do rótulo "Etapa NN", no
   mesmo padrão de chip que o resto da página já usa (.diag-card__icon,
   .diferenciais-card__icon). Quem conta a sequência é o próprio rótulo
   01→04 mais a ordem da esquerda para a direita — não precisa de régua. */
.jornada__head { display: flex; align-items: center; gap: 12px; }
.jornada__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: var(--r-md);
  background: var(--c-primary); color: #fff;
  flex-shrink: 0;
}
.jornada__icon svg { width: 20px; height: 20px; }
.jornada__card {
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg);
  padding: 22px 20px; display: flex; flex-direction: column; gap: 10px;
}
.jornada__etapa {
  font-size: 11px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--c-primary);
}
.jornada__card h3 { font-size: 17px; font-weight: 800; }
.jornada__list { display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; color: var(--c-text-soft); }
.jornada__list li { display: flex; align-items: flex-start; gap: 8px; }
.jornada__list svg { flex-shrink: 0; margin-top: 3px; color: var(--c-primary); }
.jornada__nota { margin-top: 20px; font-size: 13px; color: var(--c-text-soft); text-align: center; }

/* --------------------------------------------------------------------------
   Antes e depois — galeria de casos (seção desligada por padrão, ver
   .sem-antes-depois no fim do arquivo)
   -------------------------------------------------------------------------- */
.antes-depois-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 32px; }
@media (min-width: 640px) {
  .antes-depois-grid { grid-template-columns: repeat(2, 1fr); }
}
.antes-depois-card {
  border: 1px solid var(--c-border); border-radius: var(--r-lg); overflow: hidden; position: relative;
}
.antes-depois-card__tag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: var(--c-ink); color: #fff; font-size: 11px; font-weight: 800;
  padding: 5px 10px; border-radius: var(--r-pill);
}
.antes-depois-card__photos { display: flex; }
.antes-depois-card__photo { position: relative; flex: 1 1 50%; aspect-ratio: 3 / 4; background: var(--c-surface-alt); }
.antes-depois-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.antes-depois-card__photo span {
  position: absolute; bottom: 10px; left: 10px;
  background: rgba(36, 31, 58, 0.85); color: #fff; font-size: 10px; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 8px; border-radius: 6px;
}
.antes-depois-card__photo--depois span { background: var(--c-primary); }
.antes-depois-card__caption {
  background: var(--c-primary); color: #fff; font-size: 13.5px; font-weight: 700;
  text-align: center; padding: 10px 14px;
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
/* fundo branco explícito: o item nascia transparente e vinha do lilás da
   seção, então só a borda o separava do fundo. Branco destaca cada pergunta
   como um bloco clicável. */
.faq__item {
  background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: var(--r-md); padding: 18px 20px;
}
.faq__item summary {
  font-size: 17px; font-weight: 800;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq__icon {
  color: var(--c-primary); flex-shrink: 0; display: inline-block;
  font-size: 20px; font-weight: 400; line-height: 1;
  transition: transform 0.2s ease;
}
.faq__item[open] .faq__icon { transform: rotate(45deg); }
.faq__item p { font-size: 15px; color: var(--c-text-soft); margin-top: 12px; }

/* --------------------------------------------------------------------------
   CTA final
   -------------------------------------------------------------------------- */
/* Faixa em cor chapada (.section--brand, no HTML). A LP Force Hair põe uma
   foto de ambiente de fundo aqui, com véu por cima para o texto branco
   sobreviver; não existe foto de ambiente desta linha, e usar a foto dos
   frascos como fundo deixaria um frasco gigante atrás das palavras. Cor
   chapada resolve e dispensa o véu: o texto cai direto sobre o --c-primary,
   medido em 11,36:1 no branco e 9,67:1 no --c-on-primary.
   Se um dia entrar uma foto aqui, copie o bloco .cta-final da LP Force Hair
   e REFAÇA a medição de contraste — os alfas do véu de lá foram calibrados
   para a foto de lá. */
/* Uma coluna só, centrada. A largura e o padding lateral vêm do .container
   que agora embrulha isto — não os repita aqui, senão a faixa volta a
   desalinhar das outras seções. */
.cta-final__inner { display: grid; gap: 32px; }
.cta-final__copy {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  max-width: 760px; margin-inline: auto; text-align: center;
}
.cta-final__title { font-size: var(--fs-h2-cta); font-weight: 900; letter-spacing: -0.02em; max-width: 20ch; line-height: 1.05; }
.cta-final__lead { font-size: 18px; max-width: 54ch; color: var(--c-on-primary); }
.cta-final__actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: center; }
.cta-final__note { font-size: 15px; font-weight: 600; color: var(--c-on-primary); }

/* os mesmos três avisos da topbar, agora no momento da decisão. Separados do
   resto por uma linha, para lerem como rodapé do bloco e não como mais um
   parágrafo da oferta. */
.cta-final__badges {
  display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center;
  margin-top: 4px; padding-top: 20px;
  border-top: 1px solid var(--c-ink-hairline);
  width: 100%;
  font-size: 14px; font-weight: 700; color: var(--c-on-primary);
}
.cta-final__badges li { display: flex; align-items: center; gap: 7px; }
.cta-final__badges svg { flex-shrink: 0; opacity: 0.9; }

/* Não existe mais um .cta-final__media: a foto virou o fundo da seção, logo
   acima. Se um dia voltar uma imagem aqui dentro, ela concorre com o fundo. */

/* --------------------------------------------------------------------------
   Rodapé
   -------------------------------------------------------------------------- */
/* Rodapé em cor chapada, sem foto: a bg-footer.webp subiu para o #cta-final.
   Aqui são ~15 links e o texto legal em 12px — a foto virava ruído atrás do
   menor texto da página, e era ela que obrigava o véu pesado por cima.
   O brilho radial no topo fica: é ele que amacia a emenda com a faixa do CTA
   final — sem ele o corte do taupe para o --c-ink fica duro demais. */
.footer {
  position: relative;
  isolation: isolate;
  background-color: var(--c-ink);
  color: var(--c-on-ink);
}
/* Só o brilho da cor de marca. O véu chapado que ficava aqui embaixo dele
   existia unicamente para apagar a foto que ficava atrás; sem a foto ele só
   cobriria o --c-ink com ele mesmo. O texto do rodapé é o menor da página
   (12px no legal) e cai sobre cor chapada: 10,3:1 no --c-on-ink. */
.footer::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(70% 140% at 18% -20%, rgba(92, 83, 72, 0.5), transparent 60%);
}

/* Colunas explícitas: a marca fica mais larga que os links e o conjunto
   ocupa a largura toda (o auto-fit de .grid deixava um vão morto à direita).
   A classe .grid continua no HTML só pela cascata de entrada do app.js. */
.footer__grid {
  padding: 56px var(--pad-x) 44px;
  gap: 40px 32px;
  grid-template-columns: 1fr;
}
@media (min-width: 460px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}
@media (min-width: 640px) {
  .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .footer__grid { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); }
  .footer__brand { grid-column: auto; }
}
.footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.footer__logo { height: 26px; width: auto; filter: brightness(0) invert(1); }
.footer__brand p { font-size: 14px; max-width: 34ch; color: var(--c-on-ink); }

/* Único elemento clicável com peso no rodapé: o contato direto.
   Fica com cara de botão-fantasma para não competir com a buybar verde. */
.footer__whats {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 2px; padding: 10px 18px;
  border: 1px solid var(--c-ink-hairline);
  border-radius: var(--r-pill);
  background: var(--c-ink-veil);
  color: #fff;
  font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
/* "todos os botões pulsando": este não é um .btn, então ganha o keyframe
   claro na mão — o rodapé é escuro, o anel branco é o que se lê ali */
.footer__whats { animation: fh-pulse-light 2s ease-in-out infinite; }
.footer__whats-icon { flex-shrink: 0; color: var(--c-primary-soft); }
@media (hover: hover) and (pointer: fine) {
  .footer__whats:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.34);
  }
}

.footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; font-size: 14px; }
.footer__col strong {
  color: #fff; font-size: 11px; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  /* risquinho de marca sob o título da coluna */
  padding-bottom: 10px;
  border-bottom: 2px solid var(--c-primary);
}

/* Abaixo de 460px tudo empilha, e aí a coluna "Navegue" abre em duas
   colunas internas — são cinco links curtos, empilhados alongavam o
   rodapé em uns 110px sem ganhar nada em leitura. */
@media (max-width: 459px) {
  .footer__col--nav {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 20px;
  }
  .footer__col--nav strong { grid-column: 1 / -1; justify-self: start; }
}

.footer__link {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--c-on-ink);
  line-height: 1.3;
  /* área de toque de 44px sem abrir o espaçamento visual da coluna */
  padding: 3px 0;
  transition: color 0.15s ease, transform 0.15s ease;
}
.footer__link svg { flex-shrink: 0; color: var(--c-primary-soft); transition: color 0.15s ease; }
@media (hover: hover) and (pointer: fine) {
  .footer__link:hover { color: #fff; transform: translateX(3px); }
  .footer__link:hover svg { color: #fff; }
}

/* Faixa legal: copyright à esquerda, "voltar ao topo" à direita, e o espaço
   do meio reservado para as bandeiras de pagamento quando forem confirmadas. */
.footer__legal { border-top: 1px solid var(--c-ink-hairline); }
.footer__legal-inner {
  max-width: var(--container); margin: 0 auto; padding: 18px var(--pad-x);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px 24px;
  font-size: 12px; text-align: center;
}
.footer__copy { color: var(--c-on-ink); }
.footer__top {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--c-on-ink);
  font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  transition: color 0.15s ease;
}
.footer__top svg { transition: transform 0.15s ease; }
@media (hover: hover) and (pointer: fine) {
  .footer__top:hover { color: #fff; }
  .footer__top:hover svg { transform: translateY(-2px); }
}
@media (max-width: 719px) {
  /* empilhado, os dois centralizados: a linha de CNPJ sozinha à esquerda
     e o link solto à direita ficavam desequilibrados no celular */
  .footer__legal-inner { flex-direction: column; justify-content: center; }
}

.pay-badges { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.pay-badges__item {
  background: rgba(255, 255, 255, 0.08); color: var(--c-on-ink);
  font-size: 11px; font-weight: 800; letter-spacing: 0.04em;
  padding: 6px 10px; border-radius: 6px;
}

/* --------------------------------------------------------------------------
   Barra de compra fixa
   -------------------------------------------------------------------------- */
.buybar {
  position: sticky; bottom: 0; z-index: 50;
  background: #fff; border-top: 1px solid var(--c-border);

  transition: transform 0.25s ease;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.buybar--hidden { transform: translateY(100%); }
.buybar__inner {
  max-width: var(--container); margin: 0 auto; padding: 8px var(--pad-x);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.buybar__product { display: flex; align-items: center; gap: 12px; }
.buybar__thumb { width: 40px; height: 40px; object-fit: contain; border-radius: var(--r-thumb); background: var(--c-surface-alt); }
.buybar__info { display: flex; flex-direction: column; gap: 1px; }
/* o nome recua para 13px: quem tem que puxar o olho aqui é o preço, e são as
   duas únicas linhas da barra — não precisa dos dois no mesmo corpo */
.buybar__name { font-size: 13px; font-weight: 700; line-height: 1.25; }
.buybar__selo { color: var(--c-primary); }
.buybar__price {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
  font-size: 13px; color: var(--c-text-soft);
}
/* mesmo verde do botão: na barra de compra o preço e a ação são o mesmo
   assunto, e é o único ponto da página onde os dois aparecem colados */
.buybar__price-now {
  font-size: 19px; font-weight: 900; letter-spacing: -0.01em;
  line-height: 1.1; color: var(--c-accent);
}

/* --------------------------------------------------------------------------
   Animações
   --------------------------------------------------------------------------
   Duas famílias, e todas vivem sob .js-anim (classe que o script inline do
   <head> só coloca quando há JS e o sistema não pede movimento reduzido —
   assim nada da página nasce invisível para quem não tem uma coisa ou outra):

   1) ENTRADA POR ROLAGEM — os elementos ganham [data-reveal] pelo app.js
      (nenhum data-reveal escrito no HTML à mão) e um IntersectionObserver
      troca para .is-visible quando eles chegam na tela. A variável --i, que
      o mesmo script escreve, escalona os irmãos de um grid em cascata.
   2) MICROINTERAÇÕES — hover dos cards e botões, flutuação da foto do hero.
      Só em ponteiro fino (mouse): no toque não existe hover e o :hover fica
      "grudado" depois do tap.
   -------------------------------------------------------------------------- */

/* 1) Entrada por rolagem ------------------------------------------------- */
.js-anim [data-reveal] { opacity: 0; }
.js-anim [data-reveal="up"]    { transform: translateY(26px); }
.js-anim [data-reveal="left"]  { transform: translateX(-30px); }
.js-anim [data-reveal="right"] { transform: translateX(30px); }
.js-anim [data-reveal="zoom"]  { transform: scale(0.94); }
.js-anim [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 80ms);
}

/* 2) Microinterações ----------------------------------------------------- */
/* A página não usa sombra em lugar nenhum: o que marca o hover é o card
   subir e a borda acender, não uma sombra aparecendo por baixo. */
.step-card, .active-card, .product-card, .diferenciais-card,
.antes-depois-card, .avaliacoes-card, .benefit, .diag-card {
  transition: transform 0.25s ease, border-color 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .step-card:hover, .active-card:hover, .product-card:hover,
  .antes-depois-card:hover, .avaliacoes-card:hover {
    transform: translateY(-6px);
  }
  .step-card:hover, .product-card:not(.product-card--featured):hover,
  .antes-depois-card:hover, .active-card:not(.active-card--ink):hover,
  .avaliacoes-card:hover { border-color: var(--c-primary-soft); }
  .active-card:hover .active-card__photo { transform: scale(1.06); }
  .diferenciais-card:hover { transform: translateY(-6px); }
  .diag-card:hover { transform: translateY(-4px); border-color: var(--c-primary-soft); }
  .beneficios-col--right .benefit:hover { transform: translateX(4px); }
  .beneficios-col--left .benefit:hover { transform: translateX(-4px); }

  .btn { transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease; }
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: translateY(0); }

  /* foto do produto dá um zoom leve dentro do card (o card tem overflow
     hidden, então a imagem cresce sem vazar) */
  .product-card__media img,
  .step-card__media img,
  .antes-depois-card__photo img { transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); }
  .product-card:hover .product-card__media img,
  .step-card:hover .step-card__media img { transform: scale(1.05); }
  .antes-depois-card:hover .antes-depois-card__photo img { transform: scale(1.04); }

  /* topbar: parar a faixa quando o mouse está em cima, para dar tempo de ler */
  .marquee--top:hover .marquee__track { animation-play-state: paused; }
}

/* A flutuação contínua (@keyframes fh-float) saiu junto com o .hero__img em
   22/09/2026: ela animava a foto do produto na coluna direita do hero, que
   não existe mais desde que a foto virou fundo da seção. */

/* Seta do FAQ e do carrossel: já tinham transição; aqui só o toque a mais */
.faq__item summary { transition: color 0.18s ease; }
@media (hover: hover) and (pointer: fine) {
  .faq__item summary:hover { color: var(--c-primary); }
}

/* --------------------------------------------------------------------------
   Responsivo — densidade do mobile
   --------------------------------------------------------------------------
   A página nasceu no desktop e herdou dele o respiro entre as coisas: 64px de
   faixa em cima e embaixo de cada seção, fotos de produto de 260px, e vários
   min-height que existem só para alinhar cards que ficam lado a lado. Tudo
   isso empilhado num celular vira rolagem vazia — a página passava de 22.000px
   em 390px de largura, umas 27 telas.

   Este bloco é o ajuste de densidade: nada muda de lugar nem some, tudo
   encolhe junto (faixa, gaps, fotos, padding de card) e os min-height de
   alinhamento caem, porque em coluna única não há vizinho com quem alinhar.
   Dois cards viram linha (ativo) ou duas colunas (modo de uso), que é o que
   corta mais altura sem tirar conteúdo.

   Para afrouxar ou apertar a página inteira de uma vez, mexa em --pad-y aqui.
   -------------------------------------------------------------------------- */
@media (max-width: 719px) {
  :root {
    --pad-y: 38px;
    --pad-x: 18px;
    --fs-h2: clamp(24px, 6.6vw, 30px);
    --fs-h2-cta: clamp(26px, 7.6vw, 34px);
  }

  /* ritmo comum a todas as seções */
  .section__head { margin-bottom: 20px; }
  .section__title { margin-bottom: 7px; }
  .section__lead { font-size: 15px; margin-bottom: 18px; }
  .container--flush-b { padding-bottom: 20px; }
  .container--flush-t { padding-top: 20px; }
  .mid-cta { margin-top: 26px; gap: 10px; }
  .mid-cta__text { font-size: 14px; }
  .btn--size-lg { padding-inline: 26px; font-size: 14px; }
  .btn--size-outline { padding-inline: 22px; font-size: 13px; }
  .marquee--brand { padding: 10px 0; }
  .marquee--brand .marquee__group { font-size: 16px; gap: 22px; padding-right: 22px; }

  /* hero */
  .hero__grid { gap: 18px; padding: 24px var(--pad-x) 26px; }
  .hero__copy { gap: 12px; }
  .hero__lead { font-size: 16px; }
  .hero__media { gap: 12px; }

  /* diagnóstico */
  .diag-grid { gap: 12px; margin-top: 20px; }
  .diag-card { padding: 20px 20px 0; gap: 10px; }
  .diag-card__icon { width: 40px; height: 40px; }
  .diag-card__where { font-size: 18px; }
  .diag-card__problem { font-size: 14.5px; line-height: 1.45; }
  .diag-card__fix { margin-inline: -20px; padding: 14px 20px 16px; }
  .diag-card__fix-media { margin-bottom: 10px; }
  .diag-card__fix-media img { width: 54px; height: 54px; }
  .diag-card__fix-text { font-size: 14.5px; }

  /* modal de produto: no celular ele empilha (foto em cima, texto embaixo),
     então a foto não pode comer a tela toda antes do preço aparecer */
  .zoom-modal__media { padding: 20px; }
  .zoom-modal__media img { max-width: 190px; }
  .zoom-modal__body { padding: 20px 20px 22px; }
  .zoom-modal__titulo { font-size: 19px; }
  .zoom-modal__texto { font-size: 14.5px; }
  .zoom-modal__price { font-size: 24px; }

  /* o kit — em coluna única o teto de 132px deixava o frasco perdido no meio
     de um painel largo e baixo: a foto lia como uma tarja, não como o produto.
     Sem teto a imagem usa a largura do card e, como ela é 1:1, o painel
     acompanha e volta a ser quadrado — que é como as outras fotos de produto
     da página aparecem. */
  .kit-grid { gap: 12px; }
  .step-card__media { padding: 18px 18px 6px; }
  .step-card__media img { max-width: 100%; }
  .step-card__num { top: 10px; left: 10px; width: 26px; height: 26px; font-size: 12px; }
  .step-card__queixa-row { min-height: 0; padding: 12px 14px; gap: 10px; }
  .step-card__icon { width: 34px; height: 34px; }
  .step-card__content { padding: 14px 16px 16px; gap: 8px; }
  .step-card__nome { font-size: 17px; }
  .step-card__beneficio { padding-top: 12px; }
  .protocol-strip { padding: 14px 16px; }
  .protocol-strip__titulo { font-size: 17px; }
  .kit-closing { margin-top: 22px; gap: 12px; }
  .kit-closing__text { font-size: 15px; }

  /* ativos — o card vira linha (painel estreito à esquerda) já no celular:
     empilhado, o painel sozinho custava 150px de altura por ativo */
  .ativos-grid { gap: 12px; }
  .active-card { grid-template-columns: 112px minmax(0, 1fr); }
  .active-card__media {
    padding: 12px; min-height: 0;
    border-bottom: 0; border-right: 1px solid var(--c-border);
  }
  .active-card--ink .active-card__media { border-right-color: var(--c-ink-hairline); }
  .active-card__photo { max-width: 88px; }
  .active-card__body { padding: 16px 16px 18px; gap: 8px; }
  .active-card__title { font-size: 18px; }
  .active-card__list { font-size: 14px; gap: 8px; margin-top: 6px; padding-top: 12px; }

  /* diferenciais */
  .diferenciais-grid { gap: 12px; margin-top: 20px; }
  .diferenciais-card { padding: 20px; gap: 8px; }
  .diferenciais-card h3 { font-size: 18px; }
  .diferenciais-card p { font-size: 14px; }
  .stats-card { padding: 20px; }
  .stats-card__title { font-size: 17px; margin-bottom: 16px; }
  .stats-bars { gap: 10px; }
  .stats-bar__fill { min-height: 38px; padding: 0 14px; }

  /* comparativo — espremer a tabela inteira em 360px deixava tudo em letra
     miúda (11px) e a foto do kit do tamanho de um ícone. Aqui ela volta a um
     tamanho legível e rola na horizontal dentro do próprio box, com a coluna
     dos rótulos fixa (sticky) para "Tecnologia", "Rendimento" etc. não sumirem
     durante o arrasto. */
  .compare-table__viewport { margin-top: 20px; }
  /* A tabela já rolava, mas nada na tela dizia isso: ela termina rente à
     borda do bloco e, no iOS, a barra de rolagem só aparece durante o
     arrasto. Este véu na borda direita mostra que há coluna além do corte;
     o JS tira ele ao chegar no fim (data-compare-viewport, ver app.js).
     Sem JS o véu fica — é um enfeite, não esconde informação nenhuma. */
  .compare-table__viewport::after {
    content: ""; position: absolute; z-index: 3;
    top: 0; right: 0; bottom: 8px; width: 56px;
    border-top-right-radius: var(--r-xl); border-bottom-right-radius: var(--r-xl);
    background: linear-gradient(to left, #fff 12%, rgba(255, 255, 255, 0));
    pointer-events: none;
    transition: opacity 0.22s ease;
  }
  .compare-table__viewport.is-scroll-end::after { opacity: 0; }
  /* a barra fica fina e visível onde o navegador a desenha; no iOS ela some
     sozinha e quem sinaliza é o véu acima */
  .compare-table__scroll::-webkit-scrollbar { height: 6px; }
  .compare-table__scroll::-webkit-scrollbar-thumb {
    background: var(--c-dash); border-radius: var(--r-pill);
  }
  .compare-table__scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    /* respiro para a barra de rolagem não encostar na borda da tabela */
    padding-bottom: 8px;
    /* O overflow-x: auto faz a tabela ROLAR aqui dentro, mas não impedia que
       os 580px de min-width dela entrassem na conta do scrollWidth do
       documento: no celular a página inteira ganhava ~149px de rolagem
       lateral, com a faixa branca aparecendo ao arrastar de lado. O contain
       fecha a caixa também para esse cálculo. A coluna fixa (position:
       sticky) continua funcionando — foi conferida no navegador. */
    contain: paint;
  }
  .compare-table {
    min-width: 580px; table-layout: auto;
    /* o overflow:hidden do desktop (que faz o radius cortar as células de
       canto) transformaria a tabela no scrollport mais próximo e mataria o
       sticky. Aqui o arredondamento vai direto nas células de canto. */
    overflow: visible;
  }
  .compare-table th, .compare-table td { padding: 13px 10px; font-size: 13.5px; line-height: 1.4; }
  .compare-table thead th { padding-bottom: 14px; }
  .compare-table tbody th { white-space: normal; font-size: 13px; }
  /* a coluna fixa precisa de fundo próprio, senão as células das marcas
     aparecem por baixo dela enquanto a tabela rola */
  .compare-table thead th:first-child,
  .compare-table tbody th {
    position: sticky; left: 0; z-index: 2;
    background: #fff;
    width: 122px; min-width: 122px;
  }
  /* cantos da tabela, já que o clip do overflow saiu */
  .compare-table thead th:first-child { border-top-left-radius: var(--r-xl); }
  .compare-table thead th:last-child { border-top-right-radius: var(--r-xl); }
  .compare-table tbody tr:last-child th { border-bottom-left-radius: var(--r-xl); }
  .compare-table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--r-xl); }
  .compare-table__prod { max-width: 78px; border-radius: var(--r-sm); margin-bottom: 8px; }
  .compare-table__hl .compare-table__prod { max-width: 112px; padding: 6px; }
  .compare-table__brand { font-size: 12.5px; line-height: 1.3; }
  .compare-table__check, .compare-table__x { width: 18px; height: 18px; }
  .compare-table__hint {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin-top: 10px; font-size: 12px; color: var(--c-text-soft);
  }
  .compare-table__note { margin-top: 8px; font-size: 11.5px; }

  /* benefícios */
  .beneficios-layout { gap: 18px; }
  .beneficios-col { gap: 14px; }
  .benefit { font-size: 14.5px; gap: 10px; }
  .beneficios-media { padding: 8px; }
  /* o teto de 240px vinha do layout de 3 colunas; empilhada, a foto é a única
     imagem da seção e tinha espaço de sobra à direita e à esquerda dela.
     Sem teto ela usa a largura do container (o 420px do bloco base continua
     valendo como limite em telas maiores). */
  .beneficios-media img { max-width: 100%; }

  /* produtos — os min-height do card ficam: aqui os cards seguem lado a lado
     no trilho, e sem eles preço e botão desalinhavam entre um e outro */
  .carousel__track { gap: 14px; }

  /* oferta */
  .guarantee-grid { gap: 12px; }
  .guarantee { padding: 18px; gap: 8px; }
  .guarantee__icon { width: 38px; height: 38px; }
  .guarantee__title { font-size: 16px; }
  .guarantee p { font-size: 14px; line-height: 1.5; }
  .selos { margin-top: 20px; padding-top: 18px; gap: 12px 24px; }
  .selo { font-size: 12px; }
  .selo svg { width: 20px; height: 20px; }

  /* prova social */
  .ugc__item { width: 158px; }
  .ugc__track, .ugc__group { gap: 12px; }

  /* antes e depois */
  .antes-depois-grid { gap: 12px; margin-top: 20px; }
  .antes-depois-card__caption { font-size: 13px; padding: 9px 12px; }

  /* modo de uso — um passo por vez, em coluna única: são instruções que se
     lê na ordem, e lado a lado o olho pula de um para o outro.
     Os cards seguem o --pad-x do .container como todas as outras seções: a
     sangria de borda a borda que existia aqui deixava esta seção fora de
     esquadro com o kit e os benefícios logo acima e abaixo dela. */
  .routine-grid { grid-template-columns: 1fr; gap: 12px; }
  /* no celular o card ocupa a largura toda: 16:9 no painel evita que a foto
     empurre o texto para fora da primeira tela */
  .routine-step__media { aspect-ratio: 16 / 9; }
  /* o :not() é obrigatório: sem ele este padding vence o "padding: 0" da
     variante --foto (mesma especificidade, e este bloco vem depois no
     arquivo) e a foto de ambiente, que deveria sangrar de borda a borda,
     aparece encolhida dentro de uma moldura branca no celular. */
  .routine-step__media:not(.routine-step__media--foto) img { padding: 12px 12px 8px; }
  .routine-step__num { top: 10px; left: 12px; font-size: 24px; }
  .routine-step__body { padding: 12px 16px 16px; }
  .routine-step__produto { font-size: 16px; }
  .routine-step p { font-size: 13.5px; }

  /* jornada — o trilho e o marcador solto não existem mais (ver o bloco
     principal); aqui só fica o aperto dos cards empilhados. O ícone
     acompanha o rótulo dentro do card e continua fazendo sentido no celular. */
  .jornada { gap: 10px; margin-top: 20px; }
  .jornada__card { padding: 16px; gap: 8px; }
  .jornada__icon { width: 36px; height: 36px; }
  .jornada__icon svg { width: 18px; height: 18px; }
  .jornada__list { font-size: 13px; gap: 6px; }
  .jornada__nota { margin-top: 14px; }

  /* dúvidas */
  .faq__item { padding: 14px 16px; }
  .faq__item summary { font-size: 15.5px; gap: 12px; }
  .faq__item p { font-size: 14.5px; margin-top: 10px; }

  /* CTA final */
  .cta-final__inner { gap: 20px; }
  .cta-final__copy { gap: 14px; }
  .cta-final__lead { font-size: 16px; }
  .cta-final__badges { padding-top: 16px; gap: 8px 18px; font-size: 13px; }

  /* rodapé */
  .footer__grid { padding: 32px var(--pad-x) 26px; gap: 24px 20px; }
  .footer__col { gap: 10px; }
  .footer__legal-inner { padding: 14px var(--pad-x); }
}

@media (max-width: 480px) {
  .buybar__inner { padding: 8px 16px; }
  .buybar__cta { flex: 1 1 100%; order: 3; }
  /* no celular a barra fixa é O botão da página, e os 40px do --btn-h-nav
     ficam abaixo do alvo de toque de 44px — aqui ela volta a ser grande */
  .buybar__cta .btn { width: 100%; min-height: 48px; font-size: 13px; }
  /* o selo jogava o nome do produto pra duas linhas e a barra crescia junto —
     numa tela de 844px ela passava de 15% da altura. O desconto continua dito
     pelo preço riscado ao lado do preço à vista, que é o que importa aqui. */
  .buybar__selo { display: none; }
  .buybar__name { font-size: 12.5px; }
  .buybar__price-now { font-size: 18px; }
}

/* --------------------------------------------------------------------------
   Acessibilidade — movimento reduzido
   -------------------------------------------------------------------------- */
/* O script do <head> já não coloca .js-anim quando o sistema pede movimento
   reduzido (e sem .js-anim nenhuma entrada existe). Este bloco é o cinto de
   segurança para quem liga a preferência com a página já aberta. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee__track { animation: none; }
  .buybar { transition: none; }
  .zoom, .zoom__icon { transition: none; }
  .zoom-modal[open],
  .zoom-modal[open]::backdrop { animation: none; }
  .btn--pulse,
  .section--brand .btn--pulse,
  .section--ink .btn--pulse,
  .footer__whats { animation: none; }

  .js-anim .header,
  .js-anim .hero__stars.is-visible svg,
  .js-anim .stars.is-visible svg { animation: none; }
  .js-anim [data-reveal] { opacity: 1; transform: none; transition: none; }
  /* as barras já nascem no tamanho final, sem crescer */
  .js-anim .stats-bar__fill {
    width: var(--value); min-width: min-content; transition: none;
  }
  .step-card, .active-card, .product-card, .diferenciais-card,
  .antes-depois-card, .avaliacoes-card, .benefit, .diag-card,
  .active-card__photo,
  .header, .header__inner, .header__logo img { transition: none; }
}

/* --------------------------------------------------------------------------
   Ligar/desligar seções — classe no <html>, ver README
   -------------------------------------------------------------------------- */
.sem-ugc #prova-social,
.sem-buybar .buybar,
.sem-avaliacoes #avaliacoes,
.sem-antes-depois #antes-depois { display: none; }