#problema {
  overflow: clip;
  background:
    radial-gradient(ellipse 42% 38% at 86% 35%,
      color-mix(in srgb, var(--accent) 7%, transparent),
      transparent 72%),
    var(--bg);
}

#problema > .wrap { max-width: 90rem; }

.problem-layout {
  display: grid;
  grid-template-columns: minmax(26rem, .72fr) minmax(0, 1.28fr);
  grid-template-areas:
    "heading product"
    "lead product";
  column-gap: clamp(2.5rem, 5vw, 5.5rem);
  row-gap: var(--s5);
  align-items: start;
}

.problem-heading {
  grid-area: heading;
  align-self: end;
}

.problem-heading .h2 {
  max-width: 10.75em;
  margin-block-start: var(--s4);
  font-size: clamp(2.25rem, 2.15vw + .5rem, 3.05rem);
  line-height: 1.12;
  text-wrap: initial;
}

.problem-heading__line { display: block; }
.problem-heading__line + .problem-heading__line { margin-block-start: .1em; }

.problem-lead {
  grid-area: lead;
  max-width: 30rem;
}

.problem-product {
  grid-area: product;
  min-width: 0;
  margin: 0;
}

.problem-product__frame {
  position: relative;
  overflow: hidden;
  padding: clamp(.35rem, .65vw, .55rem);
  border-radius: var(--r-md);
  background: #0C100E;
  box-shadow: var(--sh-lg);
}

.problem-product__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(53, 217, 210, .18);
  pointer-events: none;
}

.problem-product img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--r-md) - .3rem);
}

.problem-product__caption {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-block-start: var(--s3);
  color: var(--fg-3);
  font-size: var(--t-xs);
}

.problem-evidence {
  max-width: var(--maxw);
  margin-block-start: clamp(3rem, 6vw, 5.5rem);
  margin-inline: auto;
}

.problem-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: 1px solid var(--line);
}

.problem-stat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(1.5rem, 2.8vw, 2.25rem);
}

.problem-stat + .problem-stat {
  border-inline-start: 1px solid var(--line);
}

.problem-stat .stat__v {
  color: var(--accent-tx);
  font-size: clamp(1.8rem, 2.4vw, 2.5rem);
}

.problem-stat .stat__l {
  max-width: 25rem;
}

.problem-stat .stat__s {
  margin-block-start: auto;
  padding-block-start: var(--s4);
}

.problem-evidence__note {
  max-width: 54rem;
  margin-block-start: var(--s5);
}


/* ==========================================================================
   LUCCRA — LANDING V4
   Folha única e autocontida. As v1/v2/v3 têm cascata própria e seguem
   intactas.

   DIREÇÃO (revisão 2 — corrige o rumo da revisão 1)
   Base CLARA, cards arredondados, sombras difusas em camadas e turquesa
   da marca como cor de destaque — o vocabulário da referência
   (clinicaexperts.com.br), lido do CSS real dela:
     · fundo branco #FFFFFF, faixas #F7F7F7, texto rgb(18,20,23)
     · border-radius 20 / 24 / 40px e pílulas
     · sombras multicamada muito suaves (alfa 0.03–0.06)
     · uma cor de destaque só, aplicada com disciplina
   Onde a referência usa azul #0099FF, a Luccra usa o SEU azul: o turquesa
   #35D9D2 do Manual de ID. Visual.

   ÂMBAR: sai do papel de destaque. Sobra apenas no gradiente do símbolo
   e em um selo pontual — nunca em CTA, link ou ícone.

   ACESSIBILIDADE: todos os pares foram CALCULADOS contra os três fundos
   reais da página (#FFFFFF, #F7F8F8, #EEF1F0), não estimados.
   ========================================================================== */


/* ==========================================================================
   1 · TOKENS
   ========================================================================== */

:root {
  /* --- Marca (Manual p.11, valores canônicos) ------------------------- */
  --brand-black:     #050706;
  --brand-offwhite:  #F5F7F6;
  --brand-amber:     #F6BB31;
  --brand-turquoise: #35D9D2;
  --brand-green:     #8FD07F;   /* só existe dentro do gradiente */

  /* --- Superfícies (tema claro = padrão) ------------------------------ */
  --bg:        #FFFFFF;
  --bg-soft:   #F7F8F8;   /* faixa alternada */
  --bg-band:   #EEF1F0;   /* faixa mais densa */
  --card:      #FFFFFF;
  --ink:       #0B0E0D;   /* blocos escuros de âncora (hero, fecho) */

  /* --- Texto ---------------------------------------------------------- */
  --fg:        #121417;   /* 16.23:1 no pior fundo · AAA */
  --fg-2:      #5A6470;   /*  5.29:1 no pior fundo · AA  */
  --fg-3:      #656F79;   /*  4.50:1 no pior fundo · AA  */
  --on-dark:   #F5F7F6;
  --on-dark-2: #A9B1AE;

  /* --- Destaque: o turquesa da marca ---------------------------------- */
  --accent:      #35D9D2;   /* preenchimento — hex exato da marca        */
  --accent-tx:   #1E7A76;   /* texto e link  — 4.51:1 no pior fundo · AA */
  --accent-ui:   #269A95;   /* ícone e borda — 3.01:1 no pior fundo      */
  --accent-soft: #E4FAF9;   /* fundo de pílula e realce                  */
  --on-accent:   #050706;   /* 11.55:1 sobre o turquesa puro             */

  /* --- Linhas --------------------------------------------------------- */
  --line:      #E6EAE9;   /* divisor decorativo */
  --line-ui:   #878B8E;   /* borda de campo e botão · 3.02:1 · WCAG 1.4.11 */

  /* --- Estado --------------------------------------------------------- */
  --danger:    #C0362B;   /* 5.94:1 sobre branco */
  --danger-bg: #FDEEEC;

  /* --- Tipografia -----------------------------------------------------
     Manual p.10: Helvetica; Regular é o padrão, Bold é exceção. Arial é
     a face métrica-compatível para onde Helvetica não existe (Windows/
     Android) — mesma largura de glifo, então o tracking não quebra.

     DIVERGÊNCIA REGISTRADA: o manual pede tracking de 10%–24%. Aplicado
     em eyebrow, label e botão (onde é a assinatura da marca). Em headline
     grande, 10% de tracking produz a leitura brutalista que motivou esta
     revisão — então headline usa tracking levemente negativo, como a
     referência. A regra do manual vale onde ela ajuda. ------------------ */
  /* Helvetica é fonte de sistema (Mac/iOS) — carrega sem requisição de
     rede. Onde não existe (Windows/Android), cai para Arial: desenhada
     para ter a largura de cada glifo igual à da Helvetica, então nada
     no tamanho do texto muda ao trocar de uma para a outra. */
  --font: Helvetica, "Helvetica Neue", Arial, sans-serif;

  --t-xs:   0.8125rem;   /* 13px */
  --t-sm:   0.9375rem;   /* 15px */
  --t-base: 1.0625rem;   /* 17px */
  --t-md:   1.1875rem;   /* 19px */
  --t-lg:   clamp(1.375rem, 0.8vw + 1.15rem, 1.75rem);
  --t-xl:   clamp(1.75rem, 1.6vw + 1.25rem, 2.5rem);
  --t-2xl:  clamp(2.125rem, 2.6vw + 1.35rem, 3.25rem);
  --t-3xl:  clamp(2.75rem, 4.6vw + 1.35rem, 4.75rem);

  --tk-tight:   -0.02em;   /* headline */
  --tk-body:     0.0em;
  --tk-label:    0.12em;   /* piso da faixa do manual */
  --tk-eyebrow:  0.16em;

  --lh-tight: 1.06;
  --lh-head:  1.18;
  --lh-body:  1.62;

  /* --- Espaço, base 8 -------------------------------------------------- */
  --s1: .25rem;  --s2: .5rem;   --s3: .75rem;  --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 3rem;    --s8: 4rem;
  --s9: 5rem;    --s10: 7rem;

  --sec:       clamp(var(--s8), 8vw, var(--s10));
  --sec-dense: clamp(var(--s7), 5.5vw, var(--s9));

  /* --- Raio. O ponto que mais destoava na revisão 1. ------------------- */
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-xl:   32px;
  --r-pill: 999px;

  /* --- Sombra: difusa, em camadas, alfa baixo (padrão da referência) --- */
  --sh-sm: 0 1px 2px rgba(11,14,13,.04), 0 2px 6px rgba(11,14,13,.04);
  --sh-md: 0 2px 4px rgba(11,14,13,.03), 0 8px 24px rgba(11,14,13,.06);
  --sh-lg: 0 4px 10px rgba(11,14,13,.04), 0 18px 50px rgba(11,14,13,.10);
  --sh-accent: 0 6px 20px rgba(53,217,210,.30);

  /* --- Layout ---------------------------------------------------------- */
  --maxw:   75rem;   /* 1200px */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* --- Motion (dial 5/10) ---------------------------------------------- */
  --dur-fast: 160ms;
  --dur:      240ms;
  --dur-slow: 480ms;
  --ease:     cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --stagger:  50ms;
}

/* Tema escuro — opcional, pelo botão do cabeçalho. A base clara é o
   padrão, decidido para esta versão. */
[data-theme="dark"] {
  --bg:      #0B0E0D;
  --bg-soft: #121615;
  --bg-band: #181D1C;
  --card:    #141918;
  --ink:     #050706;

  --fg:      #F5F7F6;
  --fg-2:    #A9B1AE;
  --fg-3:    #7D8582;   /* 4.51:1 no pior fundo escuro */

  --accent-tx:   #35D9D2;   /* 9.75:1 — no escuro o turquesa puro passa  */
  --accent-ui:   #35D9D2;
  --accent-soft: #10302F;

  --line:    #232A28;
  --line-ui: #616967;   /* 3.02:1 no pior fundo escuro */

  --danger:    #FF8A7A;
  --danger-bg: #2A1512;

  --sh-sm: 0 1px 2px rgba(0,0,0,.4);
  --sh-md: 0 8px 24px rgba(0,0,0,.45);
  --sh-lg: 0 18px 50px rgba(0,0,0,.55);
}


/* ==========================================================================
   2 · BASE
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  letter-spacing: var(--tk-body);
  -webkit-font-smoothing: antialiased;

  /* `clip` e não `hidden`: hidden transforma o elemento em contêiner de
     rolagem, e um contêiner de rolagem no ancestral QUEBRA o position:
     sticky do cabeçalho. clip contém o transbordo sem criar scroll.
     Serve de rede — a largura não deveria estourar em lugar nenhum. */
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }

:focus-visible { outline: 3px solid var(--accent-ui); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--accent); color: var(--on-accent); }

h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; z-index: 200;
  inset-inline-start: var(--s4); inset-block-start: -6rem;
  padding: var(--s3) var(--s5);
  background: var(--accent); color: var(--on-accent);
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  transition: inset-block-start var(--dur) var(--ease);
}
.skip:focus { inset-block-start: var(--s4); }


/* ==========================================================================
   3 · LAYOUT
   ========================================================================== */

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 52rem; }

.section { padding-block: var(--sec); }
.section--dense { padding-block: var(--sec-dense); }
.section--soft  { background: var(--bg-soft); }
.section--band  { background: var(--bg-band); }

/* Centralizado é o padrão da referência para cabeçalho de seção. */
.shead { position: relative; max-width: 46rem; margin-inline: auto; text-align: center; margin-block-end: var(--s8); padding-block-start: var(--s4); }
.shead--left { margin-inline: 0; text-align: start; padding-block-start: 0; }

/* Mesmo filete de gradiente do .subhead, repetido acima de cada bloco de
   título das seções abaixo — marca o início do bloco sem custar altura. */
.shead::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  width: 36px;
  height: 2px;
  margin-inline-start: -18px;
  border-radius: var(--r-pill);
  background: linear-gradient(100deg,
      var(--brand-amber) 0%,
      var(--brand-green) 48%,
      var(--brand-turquoise) 100%);
}
.shead--left::before { inset-inline-start: 0; margin-inline-start: 0; }

.cols { display: grid; gap: var(--s5); }
.cols--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.cols--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.cols--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }


/* ==========================================================================
   4 · TIPOGRAFIA
   ========================================================================== */

.h1 { font-size: var(--t-3xl); line-height: var(--lh-tight); letter-spacing: var(--tk-tight); text-wrap: balance; }
.h2 { font-size: var(--t-2xl); line-height: var(--lh-head);  letter-spacing: var(--tk-tight); text-wrap: balance; }
.h3 { font-size: var(--t-xl);  line-height: 1.22; letter-spacing: var(--tk-tight); }
.h4 { font-size: var(--t-md);  line-height: 1.35; letter-spacing: -0.01em; }

.lead { font-size: var(--t-md); line-height: var(--lh-body); color: var(--fg-2); }
.shead .lead { margin-inline: auto; max-width: 44rem; }
.shead--left .lead { margin-inline: 0; }

.small { font-size: var(--t-sm); color: var(--fg-2); }
.fine  { font-size: var(--t-xs); color: var(--fg-3); line-height: 1.55; }

.eyebrow {
  display: inline-block;
  font-size: var(--t-xs);
  letter-spacing: var(--tk-eyebrow);
  text-transform: uppercase;
  color: var(--accent-tx);
}

.acc { color: var(--accent-tx); }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
strong { font-weight: 700; }   /* Bold é exceção pontual — manual p.10 */


/* ==========================================================================
   5 · PÍLULAS E SELOS
   ========================================================================== */

.pill {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: var(--s2) var(--s4);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent-ui) 30%, transparent);
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  letter-spacing: .04em;
  color: var(--accent-tx);
}

.pill--plain { background: var(--bg); border-color: var(--line); color: var(--fg-2); }
.pill--amber {
  background: color-mix(in srgb, var(--brand-amber) 16%, var(--bg));
  border-color: color-mix(in srgb, var(--brand-amber) 55%, transparent);
  color: var(--fg);
}

.dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--accent); }


/* ==========================================================================
   6 · BOTÕES — pílula, como a referência
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 3rem;                 /* 48px, acima do mínimo de 44 */
  padding: var(--s3) var(--s6);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font: inherit; font-size: var(--t-sm);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}

.btn--lg { min-height: 3.5rem; padding-inline: var(--s7); font-size: var(--t-base); }
.btn--full { width: 100%; }

.btn--primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--sh-accent); }
.btn--primary:hover, .btn--primary:focus-visible { background: #5CE3DD; transform: translateY(-1px); }

.btn--ghost { background: var(--bg); color: var(--fg); border-color: var(--line-ui); }
.btn--ghost:hover, .btn--ghost:focus-visible { border-color: var(--accent-ui); color: var(--accent-tx); }

.btn--dark {
  background: #0C100E;
  color: #F5F7F6;
  border: 1px solid rgba(53, 217, 210, 0.35);
  box-shadow: 0 0 14px rgba(53, 217, 210, 0.2);
}
.btn--dark:hover, .btn--dark:focus-visible {
  background: #161E1B;
  color: #FFFFFF;
  border-color: #35D9D2;
  box-shadow: 0 0 22px rgba(53, 217, 210, 0.55);
  transform: translateY(-1px);
}
.btn--dark svg {
  color: #35D9D2;
  filter: drop-shadow(0 0 6px rgba(53, 217, 210, 0.7));
}

[data-theme="dark"] .btn--dark {
  background: #121816;
  color: #FFFFFF;
  border: 1px solid rgba(53, 217, 210, 0.45);
  box-shadow: 0 0 16px rgba(53, 217, 210, 0.25);
}
[data-theme="dark"] .btn--dark:hover,
[data-theme="dark"] .btn--dark:focus-visible {
  background: #1D2825;
  color: #FFFFFF;
  border-color: #35D9D2;
  box-shadow: 0 0 28px rgba(53, 217, 210, 0.75), 0 0 10px rgba(53, 217, 210, 0.5);
  transform: translateY(-1px);
}

/* Sobre bloco escuro o fantasma inverte. */
.on-dark .btn--ghost { background: transparent; color: var(--on-dark); border-color: rgba(245,247,246,.35); }
.on-dark .btn--ghost:hover, .on-dark .btn--ghost:focus-visible { border-color: var(--accent); color: var(--accent); }

.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Botão indisponível por regra de negócio (ver a trava de consentimento
   em initForm). Continua focável e anunciado — só não age. O contorno de
   foco é preservado de propósito: quem chega por teclado precisa ver
   onde está, mesmo num controle que ainda não pode ser acionado. */
.btn[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
}

.btn[aria-disabled="true"]:hover {
  transform: none;
  background: var(--accent);
  box-shadow: none;
}

.on-dark .btn[aria-disabled="true"]:hover { background: var(--accent); }
.btn svg { flex: none; transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }


/* ==========================================================================
   7 · CARTÃO — a unidade visual da página
   ========================================================================== */

.card {
  display: flex; flex-direction: column; gap: var(--s3);
  padding: var(--s6);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  transition: box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

.card--hover:hover { box-shadow: var(--sh-md); transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent-ui) 35%, var(--line)); }
.card--flat { box-shadow: none; }
.card--soft { background: var(--bg-soft); border-color: transparent; box-shadow: none; }

.card__t { color: var(--fg); }
.card__d { font-size: var(--t-sm); color: var(--fg-2); }

/* ---- .card--glass — o mesmo liquid glass de quatro camadas do .opcard
   (meio, espessura, anel especular, lente que segue o ponteiro via
   [data-glass]), só que redimensionado para viver dentro do grid normal
   de .card em vez do trilho do marquee. Não herda de .opcard porque
   .opcard tem largura/margem fixas de item de carrossel — aqui o card
   precisa continuar ocupando a célula do grid normalmente. Só troca a
   pintura (fundo, borda, sombra); display/padding/gap continuam de
   .card, então o layout não muda. */
.card--glass {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: color-mix(in srgb, var(--card) 55%, transparent);
  border-color: transparent;
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  backdrop-filter: blur(14px) saturate(170%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -1px 0 rgba(255, 255, 255, .16),
    0 1px 2px rgba(11, 14, 13, .05),
    0 10px 30px rgba(11, 14, 13, .08);
}

.card--glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(150deg,
      rgba(255, 255, 255, .75) 0%,
      rgba(255, 255, 255, .12) 42%,
      color-mix(in srgb, var(--brand-turquoise) 40%, transparent) 80%,
      rgba(255, 255, 255, .45) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .75;
  transition: opacity var(--dur) var(--ease);
}

.card--glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(180px circle at var(--gx, 50%) var(--gy, 50%),
      rgba(255, 255, 255, .45),
      color-mix(in srgb, var(--brand-turquoise) 14%, transparent) 48%,
      transparent 72%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.card--glass:hover,
.card--glass:focus-within {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    inset 0 -1px 0 rgba(255, 255, 255, .2),
    0 2px 4px rgba(11, 14, 13, .06),
    0 18px 44px rgba(11, 14, 13, .12);
}

.card--glass:hover::before, .card--glass:focus-within::before,
.card--glass:hover::after, .card--glass:focus-within::after { opacity: 1; }

/* Halo atrás do vidro — sem variação atrás, o backdrop-filter não tem o
   que refratar e o card vira só um retângulo translúcido (mesmo racional
   do .opband::before, aqui contido dentro do .wrap em vez de sangrar a
   viewport inteira). */
.glasshalo { position: relative; isolation: isolate; }
.glasshalo::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: -12% -4%;
  background:
    radial-gradient(ellipse 46% 60% at 18% 20%, rgba(53, 217, 210, .16), transparent 70%),
    radial-gradient(ellipse 40% 55% at 85% 80%, rgba(246, 187, 49, .10), transparent 70%);
}

/* Variante centrada — para quando só o card do meio é vidro (ex.: o
   plano em destaque), o halo precisa mirar nele, não nos vizinhos. */
.glasshalo--mid::before {
  background: radial-gradient(ellipse 30% 75% at 50% 45%, rgba(53, 217, 210, .09), transparent 72%);
}

@media (prefers-reduced-motion: reduce) {
  .card--glass:hover,
  .card--glass:focus-within { transform: none; }
  .plan,
  .plan--hot.card--glass:hover,
  .plan--hot.card--glass:focus-within { transform: none; }
}

/* Contêiner de ícone arredondado — o padrão da referência. */
.ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; flex: none;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  color: var(--accent-ui);
}


/* ==========================================================================
   8 · CABEÇALHO
   ========================================================================== */

/* Portado do index.html (v1). Três estados:
     topo ........... transparente, sem moldura
     rolando ........ ganha fundo e desfoque
     > 100px ........ descola do topo e vira uma pílula flutuante

   Continua position:sticky o tempo todo — nunca vira fixed no meio da
   rolagem. O que anima é o inset-block-start, que funciona normalmente
   em sticky e dá a sensação de descolar, junto de largura, raio e sombra.

   Nota de custo: largura e raio provocam layout enquanto animam. Aqui
   isso é aceitável porque a transição dispara UMA vez ao cruzar o
   limiar, e não a cada quadro de rolagem — diferente das animações
   contínuas da página, que são todas transform/opacity. */
.hdr {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0;
  box-shadow: none;
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    inset-block-start 550ms var(--ease-out),
    width 550ms var(--ease-out),
    max-width 550ms var(--ease-out),
    border-radius 550ms var(--ease-out),
    box-shadow 550ms var(--ease-out);
}

.hdr[data-scrolled="true"] {
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-block-end-color: var(--line);
}

.hdr[data-float="true"] {
  inset-block-start: 16px;
  width: calc(100% - 40px);
  max-width: 80rem;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
  box-shadow: var(--sh-lg);
}

/* Dentro da pílula o conteúdo precisa de respiro nas pontas, senão
   encosta na curva. */
.hdr[data-float="true"] .hdr__in { padding-inline: clamp(1.5rem, 3vw, 2.25rem); }

/* Abaixo de 62rem o menu vira painel preso às bordas do cabeçalho, então
   a prioridade é a navegação continuar funcional — não a pílula. Mantém
   só o tratamento de fundo e desfoque. */
@media (max-width: 61.999rem) {
  .hdr[data-float="true"] {
    inset-block-start: 0;
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    border-color: transparent;
    border-block-end-color: var(--line);
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hdr { transition: background-color 120ms linear, border-color 120ms linear; }
}

.hdr__in { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); min-height: 4.5rem; }

.logo { display: flex; align-items: center; gap: var(--s2); }
.logo img { width: 30px; height: 30px; }
.logo__w { font-size: var(--t-md); letter-spacing: -0.01em; }
/* Icon.svg é quase-branco (feito para fundo escuro): no tema claro
   precisa inverter para existir sobre o branco. */
.logo img { filter: invert(1); }
[data-theme="dark"] .logo img { filter: none; }

.nav__l { display: flex; align-items: center; gap: var(--s6); }

.nav__a {
  display: block; padding-block: var(--s2);
  font-size: var(--t-sm); color: var(--fg-2);
  border-block-end: 2px solid transparent;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

.nav__a:hover, .nav__a:focus-visible { color: var(--fg); }
/* Estado atual com sublinhado além da cor — nunca só cor. */
.nav__a[aria-current="true"] { color: var(--accent-tx); border-block-end-color: var(--accent); }

.hdr__act { display: flex; align-items: center; gap: var(--s3); }

.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; padding: 0;
  background: transparent; color: var(--fg);
  border: 1px solid var(--line-ui); border-radius: var(--r-pill);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.iconbtn:hover, .iconbtn:focus-visible { border-color: var(--accent-ui); color: var(--accent-tx); }

.ico-moon { display: none; }
[data-theme="dark"] .ico-sun { display: none; }
[data-theme="dark"] .ico-moon { display: block; }

.burger { display: none; }

@media (max-width: 61.999rem) {
  .burger { display: inline-flex; }
  .hdr__cta { display: none; }

  .nav {
    position: absolute; inset-inline: 0; inset-block-start: 100%;
    padding: var(--s4) var(--gutter) var(--s6);
    background: var(--bg);
    border-block-end: 1px solid var(--line);
    box-shadow: var(--sh-md);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-out),
                visibility 0s linear var(--dur);
  }
  .nav[data-open="true"] { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav__l { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__a { padding-block: var(--s4); border-block-end: 1px solid var(--line); }
  .nav__a[aria-current="true"] { border-block-end-color: var(--line); }
}


/* ==========================================================================
   9 · HERO — centralizado, como a referência
   ========================================================================== */

.hero { position: relative; padding-block: clamp(3rem, 7vw, 6rem) 0; text-align: center; overflow: hidden; }

/* Halo turquesa muito suave atrás do conteúdo. Único efeito atmosférico
   da página; alfa baixo para não competir com o texto. */
.hero::before {
  content: "";
  position: absolute; z-index: 0;
  inset-block-start: -18rem; inset-inline-start: 50%;
  width: min(64rem, 130vw); aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(53,217,210,.08), rgba(53,217,210,0) 62%);
  pointer-events: none;
}

.hero > .wrap { position: relative; z-index: 1; }

.hero__t { margin-block: var(--s5) 0; max-width: 20ch; margin-inline: auto; }
.hero__l { margin-block-start: var(--s5); margin-inline: auto; max-width: 40rem; }

.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); margin-block-start: var(--s7); }

.hero__reduce {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--s3) var(--s6);
  margin-block-start: var(--s6);
}

.hero__reduce li { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--t-sm); color: var(--fg-2); }
.hero__reduce svg { flex: none; color: var(--accent-ui); }

/* Palco do produto: moldura arredondada, sombra ampla, sem cortes. */
.shot { margin-block-start: var(--s8); }

/* --- ContainerScroll (Aceternity) em CSS/JS nativo -------------------
   O componente original é React + framer-motion; este projeto não tem
   React. O efeito é idêntico: a moldura entra inclinada em rotateX e
   endireita conforme a página rola, escalando junto.

   A perspectiva mora AQUI, no pai, e não no elemento transformado — se
   ficasse no próprio .shot__frame, cada filho ganharia o seu próprio
   ponto de fuga e o volume 3D se desfaz. É o mesmo motivo pelo qual o
   original envolve o Card num div com style={{perspective:'1000px'}}.

   --shot-rx e --shot-sc são escritas pelo JS a cada frame de scroll.
   Os padrões (0deg / 1) são o estado neutro: sem JS, ou sob
   prefers-reduced-motion, a moldura fica reta e a imagem aparece
   normalmente. Nenhum conteúdo depende da animação para existir. */
.shot__persp { perspective: 1000px; }

.shot__frame {
  padding: clamp(6px, 1vw, 12px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);

  --shot-rx: 0deg;
  --shot-sc: 1;
  transform: rotateX(var(--shot-rx)) scale(var(--shot-sc));
  transform-origin: 50% 0%;   /* dobra a partir do topo, como o original */
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .shot__frame { transform: none; }
}

.shot__frame img { width: 100%; border-radius: var(--r-lg); }
.shot__cap { margin-block-start: var(--s4); text-align: center; }


/* ==========================================================================
   10 · BARRA DE GARANTIAS
   ========================================================================== */

.section--gtee { padding-block: clamp(1.75rem, 3.5vw, 2.75rem); }
.gtee { display: grid; gap: clamp(1rem, 1.6vw, 1.5rem); grid-template-columns: repeat(4, 1fr); max-width: 65rem; margin-inline: auto; }
@media (max-width: 62rem) { .gtee { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 36rem) { .gtee { grid-template-columns: 1fr; } }
.gtee__v { display: block; font-size: var(--t-md); font-weight: 600; line-height: 1.25; letter-spacing: var(--tk-tight); color: var(--accent-tx); margin-block-end: 2px; }
.gtee__l { display: block; font-size: var(--t-xs); line-height: 1.4; color: var(--fg-2); }


/* ==========================================================================
   11 · DADOS DE MERCADO
   ========================================================================== */

.stat__v { display: block; font-size: var(--t-2xl); line-height: 1.05; letter-spacing: var(--tk-tight); color: var(--fg); }
.stat__l { display: block; margin-block-start: var(--s3); font-size: var(--t-sm); color: var(--fg-2); }
.stat__s { display: block; margin-block-start: var(--s4); font-size: var(--t-xs); color: var(--fg-3); }
.stat__s a { color: var(--accent-tx); text-decoration: underline; text-underline-offset: 3px; }


/* ==========================================================================
   12 · PASSOS
   ========================================================================== */

/* Título reserva a altura de duas linhas mesmo quando quebra em uma só
   (cards 1 e 4) — sem isto o parágrafo de cada card começava numa
   altura diferente, porque os títulos dos cards 2 e 3 quebram em duas
   linhas e os demais não. */
.step-card .card__t {
  min-height: calc(var(--t-md) * 1.35 * 2);
  display: flex;
  align-items: flex-start;
}

/* Número circular — aparência premium, "fonte de energia Luccra" */
.step__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; flex: none;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-ui) 0%, var(--brand-green) 100%);
  color: #fff;
  font-size: var(--t-sm);
  font-weight: 600;
  border: 1px solid color-mix(in srgb, var(--accent-ui) 60%, transparent);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent-ui) 14%, transparent),
    0 0 12px color-mix(in srgb, var(--accent-ui) 30%, transparent);
  transition: box-shadow 400ms var(--ease), transform 400ms var(--ease);
}

/* Pulso de entrada — classe adicionada via JS */
.step__n.is-pulsing {
  animation: step-n-pulse 550ms cubic-bezier(.22,1,.36,1) forwards;
}

@keyframes step-n-pulse {
  0%   { transform: scale(1);    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-ui) 14%, transparent), 0 0 12px color-mix(in srgb, var(--accent-ui) 30%, transparent); }
  45%  { transform: scale(1.18); box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent-ui) 22%, transparent), 0 0 28px color-mix(in srgb, var(--accent-ui) 60%, transparent), 0 0 50px color-mix(in srgb, var(--brand-green) 30%, transparent); }
  100% { transform: scale(1);    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-ui) 18%, transparent), 0 0 14px color-mix(in srgb, var(--accent-ui) 35%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .step__n.is-pulsing { animation: none; }
  .luccra-offer-card-interactive,
  .luccra-offer-card-interactive::after,
  .plan,
  .plan--hot.card--glass:hover,
  .plan--hot.card--glass:focus-within {
    transition: none;
    animation: none;
    transform: none;
  }
}

@media (pointer: coarse) {
  .luccra-offer-card-interactive {
    --tiltX: 0px;
    --tiltY: 0px;
    --tiltRX: 0deg;
    --tiltRY: 0deg;
    --plan-scale: 1;
  }

  .luccra-offer-card-interactive:active {
    transform: scale(.995);
  }
}

/* --- Step Tag base ---
   min-height + justify-content:flex-end: o tag --mid tem só um rótulo
   (uma linha) e o --kpi tem rótulo + valor (duas linhas). Sem isto o
   topo dos dois badges ficava em alturas diferentes dentro de cards já
   esticados à mesma altura pelo grid — a base fica sempre alinhada, o
   texto sempre no mesmo nível, e o card 2/3 não parece "mais vazio". */
.step__tag {
  align-self: stretch;
  margin-block-start: auto;
  min-height: 4.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
  transition: box-shadow 300ms var(--ease), border-color 300ms var(--ease);
}

/* Badge de impacto alto — Cards 1 e 4 (KPI financeiro) */
.step__tag--kpi {
  background: linear-gradient(135deg,
      color-mix(in srgb, var(--accent-ui) 12%, transparent) 0%,
      color-mix(in srgb, var(--brand-green) 8%, transparent) 100%);
  border: 1px solid color-mix(in srgb, var(--accent-ui) 38%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent-ui) 14%, transparent),
              inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent);
}

/* Badge de impacto médio — Cards 2 e 3 */
.step__tag--mid {
  background: color-mix(in srgb, var(--accent-ui) 7%, var(--bg-soft));
  border: 1px solid color-mix(in srgb, var(--accent-ui) 22%, var(--line));
}

/* Tipografia interna das tags */
.step__tag-label {
  display: block;
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-2);
  font-weight: 500;
}

.step__tag--mid .step__tag-label {
  font-size: var(--t-sm);
  text-transform: none;
  letter-spacing: normal;
  color: var(--accent-tx);
  font-weight: 600;
}

/* Valor financeiro — protagonista visual */
.step__tag-value {
  display: block;
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--accent-tx);
  text-shadow: 0 0 20px color-mix(in srgb, var(--accent-ui) 45%, transparent);
}

/* Hover nos cards: badge ganha mais presença */
.step-card:hover .step__tag--kpi {
  box-shadow: 0 0 26px color-mix(in srgb, var(--accent-ui) 24%, transparent),
              inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent);
  border-color: color-mix(in srgb, var(--accent-ui) 60%, transparent);
}

.step-card:hover .step__tag--kpi .step__tag-value {
  transform: scale(1.03);
  display: block;
  transition: transform 300ms var(--ease);
}

.step-card:hover .step__tag--mid {
  border-color: color-mix(in srgb, var(--accent-ui) 40%, var(--line));
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent-ui) 10%, transparent);
}

/* Mobile: evita overflow */
@media (max-width: 36rem) {
  .step__tag-value { font-size: 1.1rem; }
}


/* ==========================================================================
   13 · COMPARATIVO
   ========================================================================== */

.cmp { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--sh-sm); }
.cmp table { width: 100%; min-width: 36rem; border-collapse: collapse; text-align: start; }
.cmp th, .cmp td { padding: var(--s5); border-block-end: 1px solid var(--line); vertical-align: top; font-size: var(--t-sm); font-weight: 400; }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-block-end: 0; }
.cmp thead th { font-size: var(--t-xs); letter-spacing: var(--tk-label); text-transform: uppercase; color: var(--fg-3); }
.cmp tbody th { color: var(--fg-2); width: 32%; }
.cmp td:nth-child(2) { color: var(--fg-2); }
/* Coluna da Luccra: fundo + cor + peso — três sinais, nunca só cor. */
.cmp .us { background: var(--accent-soft); color: var(--fg); position: relative; }
.cmp thead .us { color: var(--accent-tx); }

/* Trilha de energia na borda esquerda da coluna Luccra: os bordos de
   cada célula .us se tocam entre linhas, então uma borda contínua por
   célula lê como uma linha vertical única percorrendo a coluna. */
.cmp .us { box-shadow: inset 2px 0 0 color-mix(in srgb, var(--accent-ui) 35%, transparent); }
.cmp tbody tr:hover .us {
  background: color-mix(in srgb, var(--accent-ui) 14%, var(--accent-soft));
  box-shadow: inset 3px 0 0 var(--accent-ui), 0 0 18px color-mix(in srgb, var(--accent-ui) 20%, transparent);
}
.cmp tbody tr:hover th,
.cmp tbody tr:hover td:not(.us) { background: var(--bg-soft); }

/* Revelação progressiva — JS (initCmpReveal) marca cada <tr> com
   data-shown em cadência. O lado "Sistema tradicional" some primeiro e
   a coluna Luccra chega com um pequeno atraso: problema, depois
   solução. Sob prefers-reduced-motion o JS já marca tudo como visível
   de imediato, então esta transição nunca chega a rodar. */
.cmp tbody th,
.cmp tbody td {
  opacity: 0;
  transform: translateY(12px);
  filter: blur(3px);
  transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out), filter 480ms var(--ease-out);
}
.cmp tbody tr[data-shown="true"] th,
.cmp tbody tr[data-shown="true"] td { opacity: 1; transform: none; filter: blur(0); }
.cmp tbody tr[data-shown="true"] td.us { transition-delay: 140ms; }


/* ==========================================================================
   14 · CALCULADORA
   ========================================================================== */

/* As duas colunas esticam à mesma altura. Com align-items:start a
   coluna dos campos parava onde o conteúdo acabava e sobravam ~200px de
   vazio embaixo dela, ao lado de um painel de resultado bem mais alto —
   o bloco lia como se estivesse quebrado. */
.calc { display: grid; gap: var(--s6); align-items: stretch; }

/* Painel dos campos: o mesmo tratamento de caixa do resultado, para as
   duas metades terem o mesmo peso visual. Os campos ficam centrados na
   vertical, então a altura extra vira respiro em cima E embaixo, em vez
   de um buraco só no pé. */
.calc__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s5);
  padding: var(--s6);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
@media (min-width: 62rem) { .calc { grid-template-columns: 1fr 1fr; gap: var(--s7); } }

.fields { display: grid; gap: var(--s5); }

/* Dentro do painel o espaçamento já vem do flex-gap dele. */
.calc__panel .fields { gap: var(--s5); }
.field > label { display: block; margin-block-end: var(--s2); font-size: var(--t-sm); color: var(--fg); }

.field__box {
  display: flex; align-items: center; gap: var(--s2);
  padding-inline: var(--s4);
  background: var(--bg);
  border: 1px solid var(--line-ui);
  border-radius: var(--r-sm);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.field__box:focus-within { border-color: var(--accent-ui); box-shadow: 0 0 0 3px var(--accent-soft); }

.field__box input {
  flex: 1; min-width: 0; min-height: 3rem;
  padding: 0; background: transparent; border: 0;
  color: var(--fg); font: inherit;
  font-variant-numeric: tabular-nums;
}

.field__box input:focus { outline: none; }
.field__box input::-webkit-outer-spin-button,
.field__box input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.field__box input[type="number"] { -moz-appearance: textfield; }

.field__fix { flex: none; font-size: var(--t-sm); color: var(--fg-3); }
.field__h { margin-block-start: var(--s2); font-size: var(--t-xs); color: var(--fg-3); }

/* Erro: cor + ícone + texto. Nunca só cor. */
.field__e { display: none; align-items: center; gap: var(--s2); margin-block-start: var(--s2); font-size: var(--t-xs); color: var(--danger); }
.field[data-invalid="true"] .field__box { border-color: var(--danger); background: var(--danger-bg); }
.field[data-invalid="true"] .field__e { display: flex; }
.field[data-invalid="true"] .field__h { display: none; }

.out { padding: var(--s6); background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-lg); }
.out__k { font-size: var(--t-xs); letter-spacing: var(--tk-label); text-transform: uppercase; color: var(--fg-3); }
.out__v { margin-block: var(--s3) var(--s3); font-size: var(--t-3xl); line-height: 1; letter-spacing: var(--tk-tight); color: var(--accent-tx); }
.out__sub { margin-block-start: var(--s5); padding-block-start: var(--s5); border-block-start: 1px solid var(--line); }
.out__note { margin-block-start: var(--s5); font-size: var(--t-xs); color: var(--fg-3); line-height: 1.55; }
.out .btn { margin-block-start: var(--s6); }


/* ==========================================================================
   15 · DEPOIMENTOS
   ========================================================================== */

.quote { gap: var(--s5); }
.quote blockquote { margin: 0; font-size: var(--t-md); line-height: 1.5; letter-spacing: -0.01em; }
.quote figcaption { font-size: var(--t-sm); color: var(--fg-2); }
.quote__n { display: block; color: var(--fg); }
.quote__f { margin-block-start: auto; padding-block-start: var(--s4); border-block-start: 1px solid var(--line); font-size: var(--t-sm); color: var(--accent-tx); }

.who { display: flex; align-items: center; gap: var(--s3); }
/* Sem retrato real, monograma. Nunca foto de banco de imagem fingindo
   ser cliente. */
.who__av {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; flex: none;
  border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-tx);
  font-size: var(--t-sm);
}


/* ==========================================================================
   16 · PLANOS
   ========================================================================== */

.toggle { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--s4); margin-block-end: var(--s7); }
.toggle__l { font-size: var(--t-sm); color: var(--fg-2); }

.switch {
  --switch-vale: color-mix(in srgb, var(--fg) 18%, transparent);
  --switch-dur: 7s;
  position: relative; flex: none; isolation: isolate;
  width: 3.5rem; height: 2rem; padding: 0;
  background: var(--bg-band);
  border: 1px solid var(--line-ui);
  border-radius: var(--r-pill);
  cursor: pointer;
  overflow: visible;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.switch::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(from var(--metal-angle),
      var(--switch-vale)       0%,
      var(--brand-amber)       4.2%,
      var(--switch-vale)       8.3%,
      var(--brand-green)      12.5%,
      var(--switch-vale)      16.7%,
      var(--brand-turquoise)  20.8%,
      var(--switch-vale)      25%,
      var(--brand-amber)      29.2%,
      var(--switch-vale)      33.3%,
      var(--brand-green)      37.5%,
      var(--switch-vale)      41.7%,
      var(--brand-turquoise)  45.8%,
      var(--switch-vale)      50%,
      var(--brand-amber)      54.2%,
      var(--switch-vale)      58.3%,
      var(--brand-green)      62.5%,
      var(--switch-vale)      66.7%,
      var(--brand-turquoise)  70.8%,
      var(--switch-vale)      75%,
      var(--brand-amber)      79.2%,
      var(--switch-vale)      83.3%,
      var(--brand-green)      87.5%,
      var(--switch-vale)      91.7%,
      var(--brand-turquoise)  95.8%,
      var(--switch-vale)     100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .78;
  animation: metal-spin var(--switch-dur) linear infinite;
}

.switch:hover,
.switch:focus-visible,
.switch[aria-checked="true"] { --switch-dur: 4s; }

.switch[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
.switch[aria-checked="true"]::before { opacity: 1; }

.switch i {
  position: absolute; inset-block-start: 3px; inset-inline-start: 3px;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--bg); box-shadow: var(--sh-sm);
  transition: transform var(--dur-fast) var(--ease-out);
}
.switch[aria-checked="true"] i { transform: translateX(1.5rem); }

html[data-noprop] .switch::before {
  background: linear-gradient(100deg,
      var(--switch-vale)       0%,
      var(--brand-amber)       8.3%,
      var(--switch-vale)      16.7%,
      var(--brand-green)      25%,
      var(--switch-vale)      33.3%,
      var(--brand-turquoise)  41.7%,
      var(--switch-vale)      50%,
      var(--brand-amber)      58.3%,
      var(--switch-vale)      66.7%,
      var(--brand-green)      75%,
      var(--switch-vale)      83.3%,
      var(--brand-turquoise)  91.7%,
      var(--switch-vale)     100%);
  background-size: 200% 100%;
  animation: track-flow var(--switch-dur) linear infinite;
}

[data-theme="dark"] .switch {
  --switch-vale: color-mix(in srgb, var(--fg) 24%, transparent);
}

[data-theme="dark"] .switch::before {
  background: conic-gradient(from var(--metal-angle),
      var(--switch-vale)     0%,
      var(--on-dark)         8.3%,
      var(--switch-vale)    16.7%,
      var(--on-dark-2)      25%,
      var(--switch-vale)    33.3%,
      var(--line-ui)        41.7%,
      var(--switch-vale)    50%,
      var(--on-dark)        58.3%,
      var(--switch-vale)    66.7%,
      var(--on-dark-2)      75%,
      var(--switch-vale)    83.3%,
      var(--line-ui)        91.7%,
      var(--switch-vale)   100%);
}

html[data-noprop][data-theme="dark"] .switch::before {
  background: linear-gradient(100deg,
      var(--switch-vale)    0%,
      var(--on-dark)       16.7%,
      var(--switch-vale)   33.3%,
      var(--on-dark-2)     50%,
      var(--switch-vale)   66.7%,
      var(--line-ui)       83.3%,
      var(--switch-vale)  100%);
  background-size: 200% 100%;
}

/* Magnetic/push hover — o cursor "empurra" o card levemente, com uma
   inclinação 3D sutil. --tiltX/--tiltY/--tiltRX/--tiltRY são escritos via
   JS (initPlanTilt, em rAF); --hoverY é a elevação de :hover que o
   .plan--hot.card--glass já tinha antes (ver abaixo) — juntando os dois
   numa única declaração de transform em vez de duas competindo. A
   transição vem de .card (transform var(--dur) var(--ease)): é ela quem
   dá a sensação de peso/inércia ao voltar da posição do cursor. */
.luccra-offer-card-interactive {
  position: relative;
  isolation: isolate;
  transform-style: preserve-3d;
  will-change: transform, box-shadow;
}

.luccra-offer-card-interactive::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(260px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
      color-mix(in srgb, var(--brand-turquoise) 16%, transparent) 0%,
      color-mix(in srgb, var(--brand-amber) 10%, transparent) 26%,
      transparent 58%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.luccra-offer-card-interactive:hover::after,
.luccra-offer-card-interactive:focus-within::after,
.luccra-offer-card-interactive[data-active="true"]::after {
  opacity: 1;
}

.luccra-offer-card-interactive > * {
  position: relative;
  z-index: 1;
}

.plan {
  gap: var(--s5);
  transform: perspective(900px)
    translate3d(var(--tiltX, 0px), calc(var(--tiltY, 0px) + var(--hoverY, 0px)), 0)
    rotateX(var(--tiltRX, 0deg)) rotateY(var(--tiltRY, 0deg)) scale(var(--plan-scale, 1));
  will-change: transform;
}
.plan--hot { border-color: var(--accent); box-shadow: var(--sh-md); }
/* Duas classes batem a especificidade de .plan--hot sozinha, então o
   vidro (fundo, borda, sombra de repouso) vence sem precisar de
   !important. */
.plan--hot.card--glass {
  border-color: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -1px 0 rgba(255, 255, 255, .16),
    0 1px 2px rgba(11, 14, 13, .05),
    0 10px 30px rgba(11, 14, 13, .08);
}
/* O :hover genérico de .card--glass (transform: translateY(-3px)) bateria
   de frente com o transform dinâmico do magnetic hover acima — aqui a
   gente reescreve o :hover só para este card com a MESMA especificidade
   necessária para vencer, compondo os -3px de elevação como --hoverY
   dentro da mesma fórmula de transform do .plan. */
.plan--hot.card--glass:hover,
.plan--hot.card--glass:focus-within {
  --hoverY: -3px;
  transform: perspective(900px)
    translate3d(var(--tiltX, 0px), calc(var(--tiltY, 0px) + var(--hoverY, 0px)), 0)
    rotateX(var(--tiltRX, 0deg)) rotateY(var(--tiltRY, 0deg)) scale(var(--plan-scale, 1));
}
/* O selo "Mais indicado" sai do fluxo e vira uma fita presa à borda
   superior do cartão — sem isto ele ocupava a primeira linha do flex e
   empurrava "Clínica+" para baixo, enquanto "Clínica" e "Rede" (sem
   selo) começavam mais acima: os três rótulos ficavam em alturas
   diferentes. Fora do fluxo, os três cartões partem do mesmo padding-
   block-start e o texto alinha entre si.
   overflow:visible substitui o hidden do .card--glass só aqui — o selo
   fica meio para fora da borda de propósito, e nem o anel (::before)
   nem a lente (::after) dependem do overflow do pai para ficar
   arredondados: cada um já nasce com border-radius:inherit próprio. */
.plan--hot.card--glass { overflow: visible; }

.plan--hot .pill {
  position: absolute;
  inset-block-start: -.9rem;
  inset-inline-start: var(--s6);
  z-index: 3;
}

.plan__t { font-size: var(--t-sm); color: var(--fg-2); }
.plan__p { font-size: var(--t-2xl); line-height: 1; letter-spacing: var(--tk-tight); }
.plan__per { font-size: var(--t-xs); color: var(--fg-3); }
.plan__f { display: grid; gap: var(--s3); font-size: var(--t-sm); color: var(--fg-2); }
.plan__f li { display: flex; align-items: flex-start; gap: var(--s3); }
.plan__f svg { flex: none; margin-block-start: .25em; color: var(--accent-ui); }
.plan .btn { margin-block-start: auto; }


/* ==========================================================================
   17 · FAQ — <details> nativo: acessível por construção, zero JS
   ========================================================================== */

.faq { display: grid; gap: var(--s3); }

.faq details {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-sm);
  transition: border-color var(--dur) var(--ease);
}
.faq details[open] { border-color: color-mix(in srgb, var(--accent-ui) 40%, var(--line)); }

.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s5);
  padding: var(--s5) var(--s6);
  cursor: pointer; list-style: none;
  font-size: var(--t-md); letter-spacing: -0.01em;
  transition: color var(--dur-fast) var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-tx); }

.faq summary i { position: relative; flex: none; width: 14px; height: 14px; color: var(--accent-ui); transition: transform var(--dur) var(--ease-out); }
.faq summary i::before, .faq summary i::after {
  content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 0;
  width: 14px; height: 2px; border-radius: 2px; background: currentColor;
}
.faq summary i::after { transform: rotate(90deg); }
.faq details[open] summary i { transform: rotate(135deg); }

.faq__a { padding: 0 var(--s6) var(--s6); font-size: var(--t-sm); color: var(--fg-2); }


/* ==========================================================================
   18 · BLOCO ESCURO — âncora de marca (fecho)
   O manual é dark-first; esta é a aparição da marca numa página clara.
   ========================================================================== */

.on-dark {
  background: var(--ink);
  color: var(--on-dark);
  border-radius: var(--r-xl);
  padding: clamp(2rem, 5vw, 4.5rem);
}

.on-dark .lead, .on-dark .small { color: var(--on-dark-2); }
.on-dark .fine { color: #7D8582; }
.on-dark .eyebrow, .on-dark .acc { color: var(--brand-turquoise); }
.on-dark .field > label { color: var(--on-dark); }
.on-dark .field__box { background: rgba(255,255,255,.05); border-color: rgba(245,247,246,.28); }
.on-dark .field__box input { color: var(--on-dark); }
.on-dark .field__box input::placeholder { color: #7D8582; }
.on-dark .field__h { color: #7D8582; }
.on-dark .consent { color: var(--on-dark-2); }
.on-dark .consent a { color: var(--brand-turquoise); }


/* ==========================================================================
   19 · FORMULÁRIO
   ========================================================================== */

.form { display: grid; gap: var(--s5); }
@media (min-width: 48rem) { .form__2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); } }

.consent { display: flex; align-items: flex-start; gap: var(--s3); font-size: var(--t-xs); color: var(--fg-2); line-height: 1.55; cursor: pointer; }
.consent input { width: 1.25rem; height: 1.25rem; flex: none; margin-block-start: .1em; accent-color: var(--accent); }
.consent a { text-decoration: underline; text-underline-offset: 3px; }

.state { padding: var(--s5); border-radius: var(--r-md); font-size: var(--t-sm); }
.state[hidden] { display: none; }
.state--ok { background: var(--accent-soft); color: var(--fg); border: 1px solid var(--accent-ui); }
.state--fail { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger); }
.on-dark .state--ok { background: rgba(53,217,210,.12); color: var(--on-dark); }


/* ==========================================================================
   20 · RODAPÉ
   ========================================================================== */

.ftr { padding-block: var(--sec-dense) var(--s6); background: var(--bg-soft); border-block-start: 1px solid var(--line); }
.ftr__t { margin-block-end: var(--s4); font-size: var(--t-xs); letter-spacing: var(--tk-label); text-transform: uppercase; color: var(--fg-3); }
.ftr__l { display: grid; gap: var(--s3); }
.ftr__l a { font-size: var(--t-sm); color: var(--fg-2); transition: color var(--dur-fast) var(--ease); }
.ftr__l a:hover { color: var(--accent-tx); }

.ftr__end {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s5);
  margin-block-start: var(--s8); padding-block-start: var(--s6);
  border-block-start: 1px solid var(--line);
}
.ftr__tag { font-size: var(--t-md); letter-spacing: -0.01em; }

/* Única aparição do gradiente da marca na página. O manual o reserva ao
   símbolo do infinito; espalhá-lo o desvalorizaria. */
.brandline {
  height: 3px; margin-block-start: var(--s6); border-radius: var(--r-pill);
  background: linear-gradient(100deg, var(--brand-amber) 0%, var(--brand-green) 48%, var(--brand-turquoise) 100%);
}


/* ==========================================================================
   21 · MOTION
   O conteúdo NASCE VISÍVEL. A revelação só é armada depois que o JS
   confirma que está rodando (html[data-js]) — se o script falhar, for
   bloqueado ou a página for aberta via file://, o texto continua lá.
   Foi exatamente esse o defeito da revisão anterior.
   ========================================================================== */

html[data-js] [data-rise] {
  opacity: 100%;
  transform: translateY(14px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}

html[data-js] [data-rise][data-shown="true"] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
  html[data-js] [data-rise] { opacity: 1; transform: none; }
}


/* ==========================================================================
   22 · MODO REVISÃO — ?revisao na URL
   ========================================================================== */

[data-review="true"] [data-check] { outline: 2px dashed var(--brand-amber); outline-offset: 3px; border-radius: 4px; }
[data-review="true"] [data-check]::after { content: " ⚠"; color: #8A6600; }


/* ==========================================================================
   23 · MARQUEE HORIZONTAL — números e faixas contínuas
   Portado do index.html (v1), onde a faixa de métricas roda em
   `numbers-scroll 42s linear infinite`.

   COMO O LOOP É PERFEITO: a trilha contém DUAS cópias idênticas do mesmo
   grupo, lado a lado, e a animação desloca exatamente -50% — metade da
   largura total, que é a largura de UM grupo. No instante em que o
   primeiro grupo termina de sair pela esquerda, a cópia está exatamente
   onde o primeiro começou. Sem corte, sem salto.
   A segunda cópia leva aria-hidden="true": o leitor de tela lê os números
   uma vez só.
   ========================================================================== */

.marquee {
  position: relative;
  overflow: hidden;

  /* Esmaece as duas pontas para o conteúdo não "bater" na borda da tela.
     A medida é em PIXELS, não em porcentagem: com 8% de cada lado, numa
     tela de 1920px o fade comia 154px por ponta e apagava um número
     inteiro. Em px o desvanecimento tem sempre o mesmo tamanho, seja
     qual for a largura da janela. */
  --mq-fade: clamp(16px, 3vw, 56px);
  -webkit-mask-image: linear-gradient(90deg,
      transparent 0, #000 var(--mq-fade),
      #000 calc(100% - var(--mq-fade)), transparent 100%);
  mask-image: linear-gradient(90deg,
      transparent 0, #000 var(--mq-fade),
      #000 calc(100% - var(--mq-fade)), transparent 100%);

  /* Folga para o .opcard:hover, que sobe 3px (translateY(-3px)), e para
     o .mq-num:hover, que cresce com scale(1.05): sem esse respiro o
     overflow:hidden corta o filete claro do topo do cartão/número
     exatamente quando ele sobe/cresce — no tema escuro esse filete é
     bem visível contra o fundo escuro, então o corte aparecia como a
     borda de cima "sumindo" no hover.

     O valor é 16px, não 8px: a trilha (.marquee__track, abaixo) puxa
     8px de volta pra cima com margin-block-start:-8px, pra este padding
     não empurrar a faixa inteira 8px pra baixo. 8px de padding menos 8px
     de margem negativa dá folga ZERO — foi o que aconteceu antes daqui
     virar 16px, e por isso o corte persistia mesmo com o padding
     "aplicado". Com 16px, sobram os 8px de respiro pretendidos depois
     da margem negativa cancelar a outra metade. */
  padding-block-start: 16px;
}

.marquee__track {
  display: flex;
  width: max-content;
  margin-block-start: -8px;
  animation: marquee-scroll var(--marquee-dur, 42s) linear infinite;
}

/* Pausa no hover e no foco de teclado: quem quiser ler um número parado
   consegue, e quem navega por Tab não perde o alvo de vista. */
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }

.marquee__group { display: flex; flex-shrink: 0; align-items: flex-start; }

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

/* Item de número.

   Largura pelo CONTEÚDO, não fixa. A versão anterior travava a caixa em
   clamp(190px, 19vw, 260px) e, descontando o padding, sobravam no máximo
   196px — "R$ 20M+" a 3.25rem precisa de ~200px e, com white-space:nowrap,
   transbordava para fora da caixa. O número ficava cortado.

   Com width automática o item cresce até caber o que tem dentro. As duas
   cópias do grupo continuam com a mesma largura (são idênticas), então o
   deslocamento de -50% segue exato e o loop não muda. */
.mq-num {
  flex: 0 0 auto;
  padding-inline: clamp(1.25rem, 3vw, 2.5rem);
  text-align: center;
  transition: transform .25s ease;
}

/* Piso só para o item não ficar estreito demais quando o número é curto
   (o "8" das clínicas), o que deixaria a faixa com ritmo irregular. */
.mq-num { min-width: clamp(150px, 15vw, 200px); }

/* Destaque no item sob o cursor: a faixa dos números não tinha reação
   nenhuma ao hover além de desacelerar (ver initMarquee em v4.js) — o
   .opcard da faixa de baixo já cresce e brilha no hover, então o mq-num
   ganha o equivalente (cresce e esquenta a cor) para as duas faixas
   responderem do mesmo jeito ao passar o mouse. */
.mq-num:hover { transform: scale(1.05); }
.mq-num:hover .mq-num__v { color: var(--accent-tx); }
.mq-num:hover .mq-num__l { color: var(--fg); }

@media (prefers-reduced-motion: reduce) {
  .mq-num:hover { transform: none; }
}

.mq-num__v {
  display: block;
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1;
  letter-spacing: var(--tk-tight);
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  transition: color .2s ease;
}

.mq-num__v--accent {
  color: var(--accent-tx);
  font-size: clamp(2.125rem, 4vw, 3.25rem);
  white-space: nowrap;
}

.mq-num__l {
  display: block;
  margin-block-start: var(--s3);
  font-size: var(--t-xs);
  letter-spacing: var(--tk-label);
  text-transform: uppercase;
  color: var(--fg-3);
  transition: color .2s ease;

  /* "Agendamentos estimados" quebra em duas linhas e os demais não;
     sem uma altura reservada, a faixa fica com as bases desalinhadas. */
  min-height: 2.8em;
}

/* Sob reduced-motion a faixa para de rodar e vira uma lista rolável à
   mão — o conteúdo continua todo acessível, só não se move sozinho. */
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }

  .marquee__track {
    animation: none;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .marquee__group[aria-hidden="true"] { display: none; }
}


/* ==========================================================================
   24 · TRILHA DOS PASSOS — linha que preenche + pulso que viaja
   Portado da .journey da v1: quando a seção entra na viewport, uma linha
   turquesa preenche da esquerda para a direita e um ponto de energia
   percorre o mesmo caminho, na mesma duração e na mesma curva linear.
   Só aparece a partir de 62rem, onde os quatro passos ficam em fila.
   ========================================================================== */

.track { display: none; }

@media (min-width: 62rem) {
  .track {
    position: relative;
    display: block;
    height: 2px;
    margin-block-end: var(--s6);
    /* Trilho de fundo: o mesmo gradiente e o mesmo fluxo, bem apagado —
       o percurso já se anuncia, e continua vivo, antes de ser preenchido. */
    background: linear-gradient(100deg,
        color-mix(in srgb, var(--brand-amber)     20%, transparent)   0%,
        color-mix(in srgb, var(--brand-green)     20%, transparent)  16.67%,
        color-mix(in srgb, var(--brand-turquoise) 20%, transparent)  33.33%,
        color-mix(in srgb, var(--brand-amber)     20%, transparent)  50%,
        color-mix(in srgb, var(--brand-green)     20%, transparent)  66.67%,
        color-mix(in srgb, var(--brand-turquoise) 20%, transparent)  83.33%,
        color-mix(in srgb, var(--brand-amber)     20%, transparent) 100%);
    background-size: 200% 100%;
    animation: track-flow 5s linear infinite;
    border-radius: var(--r-pill);
    overflow: visible;
  }

  /* O preenchimento carrega o MESMO gradiente da régua do rodapé
     (.brandline) — âmbar → verde → turquesa, os 100deg do símbolo do
     infinito do manual.

     POR QUE clip-path E NÃO scaleX: com scaleX o elemento é desenhado
     inteiro e só depois escalado, então o gradiente seria comprimido
     junto — no começo da animação os três tons apareceriam espremidos
     em poucos pixels, e a linha "esticaria" o gradiente até o fim.
     clip-path deixa o gradiente parado no tamanho final e vai
     REVELANDO-o da esquerda para a direita, que é o que a linha do
     rodapé mostra. Continua sem tocar em layout: clip-path não
     reflui, e a forma é um retângulo simples. */
  .track::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;

    /* DOIS ciclos completos da sequência da marca, lado a lado. Cada
       ciclo é âmbar → verde → turquesa → âmbar, e o fundo tem o dobro
       da largura da linha (background-size: 200%). Deslocar a imagem em
       exatamente um ciclo devolve um quadro idêntico ao inicial — é o
       mesmo princípio do marquee dos números, aplicado a um gradiente:
       loop contínuo, sem emenda e sem salto.

       O retorno turquesa → âmbar precisa existir e ser suave; sem ele a
       repetição criaria uma costura dura a cada volta. As três cores
       continuam sendo as do rodapé, na mesma ordem. */
    background: linear-gradient(100deg,
        var(--brand-amber)     0%,
        var(--brand-green)     16.67%,
        var(--brand-turquoise) 33.33%,
        var(--brand-amber)     50%,
        var(--brand-green)     66.67%,
        var(--brand-turquoise) 83.33%,
        var(--brand-amber)     100%);
    background-size: 200% 100%;

    /* De 100% para 0% faz as cores correrem para a DIREITA — mesmo
       sentido do preenchimento e do ponto que viaja. */
    animation: track-flow 5s linear infinite;

    /* O reveal inicial continua sendo clip-path: o gradiente fica no
       tamanho final e é descoberto da esquerda para a direita. Se fosse
       scaleX, o fundo seria comprimido junto e o fluxo se deformaria. */
    clip-path: inset(0 100% 0 0);
    transition: clip-path 2600ms linear;
  }

  .track[data-on="true"]::after { clip-path: inset(0 0 0 0); }

  @keyframes track-flow {
    from { background-position: 100% 50%; }
    to   { background-position:   0% 50%; }
  }

  /* O pulso é um trilho invisível de largura total que translada de 0 a
     100% de SI MESMO — ou seja, exatamente a largura da trilha. O ponto
     visível mora dentro dele.

     A v1 animava `left` de 0% a 100%, o que força o navegador a
     recalcular layout a cada quadro. Aqui só transform e opacity se
     movem: tudo no compositor. Mesmo efeito, sem o custo. */
  .track__pulse {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
  }

  /* O ponto acompanha a cor do trecho onde está: sai âmbar, passa pelo
     verde no meio e chega turquesa — os mesmos três paradas do gradiente,
     nos mesmos 48% do meio. */
  .track__pulse i {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 0;
    width: 10px;
    height: 10px;
    margin-block-start: -5px;
    margin-inline-start: -5px;
    border-radius: 50%;
    background: var(--brand-amber);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-amber) 22%, transparent);
  }

  .track[data-on="true"] .track__pulse i {
    animation: track-hue 2600ms linear forwards;
  }

  @keyframes track-hue {
    0% {
      background: var(--brand-amber);
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-amber) 22%, transparent);
    }
    48% {
      background: var(--brand-green);
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-green) 22%, transparent);
    }
    100% {
      background: var(--brand-turquoise);
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-turquoise) 22%, transparent);
    }
  }

  .track[data-on="true"] .track__pulse {
    animation: track-travel 2600ms linear forwards;
  }

  @keyframes track-travel {
    0%   { transform: translateX(0);    opacity: 1; }
    92%  { opacity: 1; }
    100% { transform: translateX(100%); opacity: 0; }
  }

  /* Símbolo/Logo Luccra fixado no final da barra (lado direito).
     Fica INVISÍVEL até a barra concluir — nada de logo espiando durante
     o preenchimento. A revelação só dispara via .is-bouncing, que o JS
     adiciona exatamente no fim real da animação de 2600ms (setTimeout
     casado com a duração do clip-path, não um delay arbitrário). */
  .track__logo {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: -6px;
    transform: translateY(-50%) scale(0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--card);
    border: 1px solid color-mix(in srgb, var(--accent-ui) 35%, var(--line));
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    z-index: 4;
    opacity: 0;
    pointer-events: none;
  }

  .track__logo img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    filter: invert(1);
    transition: filter var(--dur) var(--ease);
  }

  [data-theme="dark"] .track__logo img {
    filter: none;
  }

  /* Halo de chegada: um anel que se expande e desaparece atrás do
     símbolo, como uma onda de energia vinda da trilha. */
  .track__logo::after {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--accent-ui) 65%, transparent);
    opacity: 0;
    transform: scale(.6);
    pointer-events: none;
  }

  .track__logo.is-bouncing {
    animation: track-logo-reveal 900ms cubic-bezier(.22, 1, .36, 1) forwards;
  }

  .track__logo.is-bouncing::after {
    animation: track-logo-ring 700ms cubic-bezier(.16, 1, .3, 1) 80ms forwards;
  }

  .track__logo.is-completed {
    opacity: 1;
    transform: translateY(-50%) scale(1) rotate(0deg);
    border-color: var(--accent-ui);
    box-shadow: 0 0 14px color-mix(in srgb, var(--accent-ui) 45%, transparent);
    transition: box-shadow var(--dur-slow) var(--ease-out);
  }

  /* Revelação em três beats: entra com scale-in + leve giro e glow
     ascendente, faz um micro overshoot, assenta com um bounce curto e
     refinado. ~900ms — recompensa, não brinquedo. */
  @keyframes track-logo-reveal {
    0% {
      opacity: 0;
      transform: translateY(-50%) scale(.3) rotate(-14deg);
      box-shadow: 0 0 0 color-mix(in srgb, var(--accent-ui) 0%, transparent);
    }
    38% {
      opacity: 1;
      transform: translateY(calc(-50% - 11px)) scale(1.22) rotate(7deg);
      box-shadow: 0 0 26px color-mix(in srgb, var(--accent-ui) 75%, transparent),
                  0 0 42px color-mix(in srgb, var(--brand-green) 45%, transparent);
      border-color: var(--accent-ui);
    }
    60% {
      transform: translateY(calc(-50% + 3px)) scale(.94) rotate(-3deg);
      box-shadow: 0 0 14px color-mix(in srgb, var(--accent-ui) 40%, transparent);
    }
    80% {
      transform: translateY(calc(-50% - 4px)) scale(1.05) rotate(1deg);
      box-shadow: 0 0 20px color-mix(in srgb, var(--accent-ui) 55%, transparent);
    }
    100% {
      opacity: 1;
      transform: translateY(-50%) scale(1) rotate(0deg);
      box-shadow: 0 0 14px color-mix(in srgb, var(--accent-ui) 45%, transparent);
      border-color: var(--accent-ui);
    }
  }

  @keyframes track-logo-ring {
    0%   { opacity: .9; transform: scale(.5); }
    70%  { opacity: .15; transform: scale(1.9); }
    100% { opacity: 0; transform: scale(2.1); }
  }

  /* Cada passo acende quando o pulso passa por ele (o JS adiciona
     data-on em sequência, no mesmo intervalo do percurso). */
  .step-card { transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }

  .step-card[data-on="true"] {
    border-color: color-mix(in srgb, var(--accent-ui) 55%, var(--line));
    box-shadow: var(--sh-md);
  }

  .step-card[data-on="true"] .step__n {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 18%, transparent);
  }

  .step__n { transition: box-shadow var(--dur-slow) var(--ease-out); }
}

@media (prefers-reduced-motion: reduce) {
  .track { display: none; }
}


/* ==========================================================================
   25 · BORDA EM GRADIENTE ANIMADO — cartões de garantia
   Portado do .trust-item da v1. Um pseudo-elemento com padding igual à
   espessura da borda mais mask-composite:exclude deixa visível SÓ o anel
   da borda — e é esse anel que recebe o gradiente que corre. O fundo e o
   conteúdo do cartão ficam intocados.
   ========================================================================== */

.gtee__i {
  position: relative;
  display: block;
}

.gtee__ico-box {
  display: block;
  width: 100%;
  aspect-ratio: 483 / 564;
  border-radius: var(--r-md);
  perspective: 240px;
  box-shadow: var(--sh-sm);
  transition: transform 300ms var(--ease), box-shadow 300ms var(--ease);
}

.gtee__i:hover .gtee__ico-box {
  transform: translateY(-2px) scale(1.015);
  box-shadow: var(--sh-md), 0 0 18px color-mix(in srgb, var(--accent-ui) 38%, transparent);
}

/* botão-cartão que gira 180° revelando o verso ao passar o mouse no
   cartão inteiro — não só ao passar o mouse no próprio ícone. */
.gtee__ico-flip {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  transform-style: preserve-3d;
  transition: transform 700ms var(--ease);
}

.gtee__i:hover .gtee__ico-flip {
  transform: rotateY(180deg);
}

.gtee__ico-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  filter: brightness(1.08) saturate(1.15);
}

.gtee__ico-face--back {
  transform: rotateY(180deg);
}

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

/* Borda em gradiente animado e glow do ponteiro pertenciam ao card branco
   externo, removido — o card visual agora é o próprio .gtee__ico-box. */

/* ---- ilustração + balanço -----------------------------------------------
   O conteúdo de cada cartão vive num wrapper interno (.gtee__sway) que
   recebe a animação contínua — nunca o .gtee__i em si, porque esse já tem
   seu próprio transform de hover (translateY -3px). Animação e :hover no
   MESMO elemento brigam pela propriedade transform (a animação, rodando,
   sempre vence sobre a regra estática do hover); separando em dois
   elementos, os dois efeitos empilham sem conflito. */

.gtee__sway {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0.35rem;
  transform-style: preserve-3d;
  animation: gtee-sway 8s ease-in-out infinite;
  will-change: transform;
}

/* Duração, atraso e sentido diferentes por cartão — o delay negativo faz
   cada um começar a animação já "no meio do balanço", então os quatro
   nunca ficam alinhados. Mesma lógica do gtee-flow acima. */
.gtee__i:nth-child(1) .gtee__sway { animation-duration: 7.4s; animation-delay: -1.2s; }
.gtee__i:nth-child(2) .gtee__sway { animation-duration: 8.6s; animation-delay: -3.6s; animation-direction: reverse; }
.gtee__i:nth-child(3) .gtee__sway { animation-duration: 6.8s; animation-delay: -0.4s; }
.gtee__i:nth-child(4) .gtee__sway { animation-duration: 9.2s; animation-delay: -5s;   animation-direction: reverse; }

@keyframes gtee-sway {
  0%, 100% { transform: perspective(900px) rotateY(-1.4deg) rotateZ(-.4deg) translateY(0); }
  50%      { transform: perspective(900px) rotateY(1.4deg)  rotateZ(.4deg)  translateY(-4px); }
}

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


/* ==========================================================================
   25B · IA DO LUCCRA — copy + mockup, duas colunas assimétricas
   Seção deliberadamente contida (largura de .wrap, sem section--hero nem
   section--breath cheia) — não é para ocupar a tela inteira, é para
   respirar dentro do fluxo normal da página.
   ========================================================================== */

.section--ia-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 0;
  /* Acompanha a altura natural da arte (largura × ~1.06 de proporção),
     com uma folga fixa para o topo do aparelho respirar — a arte é
     ancorada embaixo, então a seção precisa crescer com ela para o
     topo do celular nunca ser cortado pelo overflow:hidden. */
  min-height: clamp(560px, calc(45vw + 48px), 860px);
  background: var(--bg);
}

[data-theme="dark"] .section--ia-banner {
  background: #000000;
}

.ia-banner__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* Arte em primeiro plano — PNG com fundo transparente, tratada como
   elemento independente encostado no canto inferior direito da seção,
   nunca como cobertura de tela cheia (isso é papel do var(--bg) atrás
   dela). object-fit:contain preserva a proporção real: o celular nunca
   é cortado nem esticado. */
.ia-banner__art {
  display: block;
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: clamp(0px, 2vw, 2.5rem);
  width: clamp(460px, 43vw, 760px);
  height: auto;
  object-fit: contain;
  object-position: right bottom;
}

.ia-banner__art--dark { display: none; }
[data-theme="dark"] .ia-banner__art--light { display: none; }
[data-theme="dark"] .ia-banner__art--dark  { display: block; }

/* A manga termina numa quina reta do PNG (o recorte do fundo transparente
   corta o tecido em ângulo reto, embaixo e na lateral esquerda) — tentar
   mascarar exatamente esse contorno irregular com um gradiente é frágil
   (a manga não segue uma curva regular). Em vez de apagar a borda dura,
   afoga ela: uma camada extra, do tamanho e na mesma posição da arte,
   pinta um gradiente radial da cor de fundo da própria seção por cima
   do canto inferior esquerdo — a borda reta do PNG some sob a mesma cor
   que já está atrás dela, como se a manga se dissolvesse no fundo da
   página. Mão, celular e orbes ficam fora do raio do gradiente e
   continuam nítidos. */
.ia-banner__fade {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  inset-block-end: 0;
  inset-inline-end: clamp(0px, 2vw, 2.5rem);
  /* Mesma largura do <img> (clamp(460px,43vw,760px)) e altura na mesma
     proporção (1291/1218 ≈ 1.06) escrita em clamp explícito — não
     aspect-ratio, que num elemento absolutely positioned sem
     inset-block-start pode colapsar para altura 0 em vez de derivar da
     largura. */
  width: clamp(460px, 43vw, 760px);
  height: clamp(488px, 45.6vw, 806px);
  background: radial-gradient(ellipse 50% 90% at 2% 100%,
      var(--bg) 0%,
      var(--bg) 20%,
      transparent 68%);
}

[data-theme="dark"] .ia-banner__fade {
  background: radial-gradient(ellipse 50% 90% at 2% 100%,
      #000 0%,
      #000 20%,
      transparent 68%);
}

.ia-banner__wrap {
  position: relative;
  z-index: 2;
  padding-block: var(--s9);
  display: flex;
  align-items: center;
}

.ia-banner__wrap .ia-feature__copy {
  max-width: 38rem;
}

/* Tipografia da Copy da IA (Helvetica Regular padrão Luccra) */
.ia-feature__copy .eyebrow {
  color: #00B3AC;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ia-feature__copy .h2 {
  color: #0A0D0C;
  letter-spacing: -0.02em;
}

.ia-feature__copy .h2 .acc {
  background: linear-gradient(120deg, #00B5AD 0%, #35D9D2 50%, #00F2FE 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 12px rgba(53, 217, 210, 0.45));
}

.ia-feature__copy .lead {
  color: #2C3531;
}

.ia-feature__note {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  margin-block-start: var(--s5);
  font-size: var(--t-sm);
  color: #3A4540;
}
.ia-feature__note svg {
  flex: none;
  margin-block-start: .2em;
  color: #35D9D2;
  filter: drop-shadow(0 0 6px rgba(53, 217, 210, 0.8));
}

.ia-feature__copy .btn { margin-block-start: var(--s6); }

/* --- Brilho no Modo Escuro (Dark Mode) --- */
[data-theme="dark"] .ia-feature__copy .eyebrow {
  color: #35D9D2;
  text-shadow: 0 0 14px rgba(53, 217, 210, 0.65);
}

[data-theme="dark"] .ia-feature__copy .h2 {
  color: #FFFFFF;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.8);
}

[data-theme="dark"] .ia-feature__copy .h2 .acc {
  background: linear-gradient(120deg, #35D9D2 0%, #00F2FE 50%, #F6B82F 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 16px rgba(53, 217, 210, 0.75));
}

[data-theme="dark"] .ia-feature__copy .lead {
  color: #F0F4F2;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .ia-feature__copy .ia-feature__note {
  color: #E2E8E5;
}

/* Esfera líquida dentro da pílula "IA da Luccra" — viva e magnética: o
   JS (initIaOrb) escreve --orb-tx/--orb-ty/--orb-sx/--orb-sy conforme o
   ponteiro se aproxima, e alterna .is-live para intensificar o glow.
   Em repouso, só a respiração via @keyframes (transform próprio, sem
   custom property) e o brilho estático seguem rodando. */
.ia-liquid {
  display: inline-block;
  width: .85em;
  height: .85em;
  border-radius: 50%;
  flex: none;
  background: linear-gradient(120deg,
      var(--brand-amber) 0%, var(--brand-green) 35%,
      var(--brand-turquoise) 65%, var(--brand-amber) 100%);
  background-size: 240% 240%;
  box-shadow: 0 0 6px color-mix(in srgb, var(--brand-turquoise) 55%, transparent);
  animation: ia-liquid-shift 6s ease-in-out infinite, ia-liquid-breathe 4200ms ease-in-out infinite;
  transform: translate(var(--orb-tx, 0px), var(--orb-ty, 0px)) scaleX(var(--orb-sx, 1)) scaleY(var(--orb-sy, 1));
  transition: transform 200ms cubic-bezier(.22, 1, .36, 1), box-shadow 220ms var(--ease), filter 220ms var(--ease);
  will-change: transform;
}

/* Enquanto o ponteiro interage, a respiração para — a deformação vem
   só do JS — e o glow cresce. */
.ia-liquid.is-live {
  animation-play-state: paused, paused;
  box-shadow: 0 0 14px color-mix(in srgb, var(--brand-turquoise) 75%, transparent),
              0 0 26px color-mix(in srgb, var(--brand-green) 35%, transparent);
  filter: saturate(1.25);
}

@keyframes ia-liquid-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Respiração idle — usa scale() puro (não a custom property) para não
   competir com a deformação do JS, que fica pausada durante is-live. */
@keyframes ia-liquid-breathe {
  0%, 100% { scale: 1; }
  50%      { scale: 1.035; }
}

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

@media (max-width: 61.9375rem) {
  .section--ia-banner {
    display: flex;
    flex-direction: column;
    min-height: auto;
  }

  /* Abaixo de 62rem a arte sai do canto absoluto e desce para depois da
     copy: centralizada, em fluxo normal, escala reduzida. A copy não
     muda — só a moldura em volta da imagem. */
  .ia-banner__bg {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    padding-block-end: var(--s7);
    order: 2;
  }

  .ia-banner__art {
    position: relative;
    inset-block-end: auto;
    inset-inline-end: auto;
    width: clamp(280px, 62vw, 420px);
  }

  .ia-banner__wrap {
    order: 1;
    padding-block: var(--s7);
  }

  .ia-banner__wrap .ia-feature__copy {
    max-width: 100%;
  }
}

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


/* ==========================================================================
   25C · NÚCLEO DA OPERAÇÃO — a mão na dobra "o que não faz"
   Reaproveita o .card.card--soft que já existia; só troca o miolo de
   "lista de 3 colunas" para "duas áreas: texto + composição visual".
   O .naofaz__visual (abaixo) é o palco escuro com o gradiente da marca
   que preenche a coluna direita — ver o comentário ali para o porquê de
   ser escuro (a foto da mão precisa dele para o recorte por chroma-key
   funcionar sem sobra). Continua sem celular, sem chat: só a mão.
   ========================================================================== */

.naofaz__grid {
  display: grid;
  gap: var(--s6);
  align-items: center;
}
@media (min-width: 62rem) {
  /* ~56/44 — dentro da faixa 55/45–58/42 pedida. */
  .naofaz__grid { grid-template-columns: 56fr 44fr; gap: var(--s7); }
}

/* --- texto: numeração discreta, zero negrito -------------------------- */

.naofaz__list {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  margin-block-start: var(--s5);
}

.naofaz__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s4);
  padding-block-start: var(--s4);
  border-block-start: 1px solid var(--line);
  transition: opacity var(--dur) var(--ease);
}
.naofaz__item:first-child { border-block-start: 0; padding-block-start: 0; }

/* Lista inteira ganha um estado "alguém está em foco": os outros dois
   itens perdem um pouco de opacidade, o item ativo fica no lugar — é a
   ligação com as esferas do lado direito (item 18 do briefing). */
.naofaz__list[data-hover="true"] .naofaz__item:not([data-active="true"]) { opacity: .55; }

.naofaz__n {
  padding-block-start: .2em;
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--tk-eyebrow);
  color: var(--accent-tx);
  font-variant-numeric: tabular-nums;
}

/* Nenhuma tag <strong>, nenhum font-weight acima de 500 — a diferenciação
   vem da numeração, da linha divisória e da cor, nunca do peso da fonte. */
.naofaz__t {
  margin: 0;
  font-size: var(--t-sm);
  font-weight: 400;
  line-height: 1.6;
  color: var(--fg-2);
  transition: color var(--dur) var(--ease);
}
.naofaz__item[data-active="true"] .naofaz__t { color: var(--fg); }

/* --- visual: painel de gradiente + mão recortada por chroma-key --------
   Correção: o asset original (naofaz-hand-*.webp) é uma foto com fundo
   PRETO CHAPADO — um mask-image por posição (como havia antes) não sabe
   distinguir "fundo" de "mão perto da borda" e deixava um retângulo
   preto visível. Sem poder gerar um novo arquivo recortado, o preto é
   removido de verdade com um filtro SVG inline (chroma-key por
   luminância: quanto mais escuro o pixel, mais transparente ele vira),
   aplicado via `filter: url(...)` — técnica só de CSS, sem libs.

   O palco por trás é escuro (--ink, igual nos dois temas do site) em vez
   de claro: a própria foto já foi iluminada para viver sobre preto (é
   exatamente o mundo dark-first do manual de marca), então um fundo
   escuro com os acentos âmbar/turquesa é o que faz a mão "morar" ali
   sem nenhuma sobra do recorte aparecer — um palco claro deixava um
   resíduo acinzentado visível atrás da mão. */

.naofaz__visual {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  max-width: 24rem;
  aspect-ratio: 4 / 5;
  margin-inline: auto;
  border-radius: var(--r-xl);
  background:
    radial-gradient(60% 50% at 22% 10%, color-mix(in srgb, var(--brand-amber) 30%, transparent) 0%, transparent 70%),
    radial-gradient(58% 55% at 84% 92%, color-mix(in srgb, var(--brand-turquoise) 32%, transparent) 0%, transparent 72%),
    linear-gradient(155deg,
      color-mix(in srgb, var(--brand-green) 10%, var(--ink)) 0%,
      var(--ink) 60%,
      color-mix(in srgb, var(--brand-turquoise) 12%, var(--ink)) 100%);
  box-shadow: var(--sh-lg);
}
@media (min-width: 62rem) {
  .naofaz__visual { max-width: none; height: 100%; min-height: 26rem; }
}

/* Anéis finos — tecnológicos, não astronômicos: um traço de 1px cada,
   baixíssima opacidade, sem preenchimento. */
.naofaz__ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
/* O palco do visual é sempre escuro (ver .naofaz__visual acima), então
   os anéis usam sempre o tom pensado para fundo escuro — não dependem
   mais do tema claro/escuro da página. */
.naofaz__ring--1 { inset: 8%;  border: 1px solid color-mix(in srgb, var(--brand-turquoise) 32%, transparent); }
.naofaz__ring--2 { inset: 17%; border: 1px solid color-mix(in srgb, var(--brand-amber) 24%, transparent); }

/* A mão entra com fade + translateX (item 22 do briefing); o próprio
   <img>, por dentro, é quem responde ao ponteiro (item 15-16) — dois
   elementos, duas velocidades de transição, sem uma brigar com a outra. */
.naofaz__hand {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  transition-delay: 80ms;
}
html[data-js] .naofaz[data-shown="true"] .naofaz__hand { opacity: 1; transform: none; }

.naofaz__hand img {
  display: block;
  position: absolute;
  right: -8%;
  bottom: -6%;
  width: 116%;
  max-width: none;
  height: auto;
  /* leve resposta ao ponteiro (--px/--py, escritos pelo JS) sobre a
     ancoragem base/direita pedida na composição. */
  transform: translate(var(--px, 0px), var(--py, 0px));
  transition: transform 220ms var(--ease-out);
  /* Chroma-key por luminância: recalcula o canal alfa a partir do brilho
     de cada pixel (preto puro = alfa 0; mão e esfera, que são claras,
     seguem opacas), então o fundo preto do PNG some sem precisar de um
     arquivo novo. */
  filter: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><filter id='naofazKey' color-interpolation-filters='sRGB'><feColorMatrix type='matrix' values='1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0.35 0.9 0.25 0 -0.06'/><feComponentTransfer><feFuncA type='gamma' amplitude='1' exponent='0.6' offset='0'/></feComponentTransfer></filter></svg>#naofazKey");
}
@media (min-width: 62rem) {
  .naofaz__hand img { right: -4%; bottom: -4%; width: 92%; }
}

/* --- as 3 esferas orbitais ---------------------------------------------
   Duas camadas por esfera: o <button> externo cuida de posição, entrada
   (opacity/scale), o link com o texto e o parallax do ponteiro — tudo via
   variáveis, um único transform. O <span> interno cuida só do drift
   autônomo e contínuo (as três com keyframes levemente diferentes, para
   nunca se moverem em uníssono). Compor os dois em um elemento só faria a
   transição rápida do hover brigar com a transição lenta da entrada. */

.naofaz__orbit {
  /* As três esferas ficaram sem a bolha de fundo (o HTML nunca teve o
     wrapper .naofaz__orbit-drift previsto aqui embaixo) — sobravam só o
     ícone e o rótulo soltos por cima da composição. Como a composição
     já ganhou o painel de gradiente + a mão, essas três não fazem falta:
     ocultas por CSS, sem tocar no HTML/JS. */
  display: none;
  --ox: 0px; --oy: 0px;
  --os: .92;
  position: absolute;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  opacity: 0;
  transform: translate(-50%, -50%) translate(var(--ox), var(--oy)) scale(var(--os));
  transition: transform 380ms var(--ease-out), opacity 380ms var(--ease-out);
}
html[data-js] .naofaz[data-shown="true"] .naofaz__orbit { --os: 1; opacity: 1; }
.naofaz__orbit:hover,
.naofaz__orbit[data-active="true"] { --os: 1.06; }

.naofaz__orbit[data-orbit="1"] { top: 14%; left: 8%;  transition-delay: 60ms; }
.naofaz__orbit[data-orbit="2"] { top: 60%; left: 3%;  transition-delay: 140ms; }
.naofaz__orbit[data-orbit="3"] { top: 83%; left: 58%; transition-delay: 220ms; }

.naofaz__orbit-drift {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(140deg, var(--brand-amber) 0%, var(--brand-green) 48%, var(--brand-turquoise) 100%);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--brand-turquoise) 32%, transparent);
  animation: naofaz-drift-1 24s linear infinite;
}
.naofaz__orbit[data-orbit="2"] .naofaz__orbit-drift { animation-name: naofaz-drift-2; animation-duration: 27s; }
.naofaz__orbit[data-orbit="3"] .naofaz__orbit-drift { animation-name: naofaz-drift-3; animation-duration: 22s; }

.naofaz__orbit:hover .naofaz__orbit-drift,
.naofaz__orbit[data-active="true"] .naofaz__orbit-drift {
  box-shadow: 0 10px 26px color-mix(in srgb, var(--brand-turquoise) 50%, transparent);
}

/* Três trajetórias curtas e distintas — "orgânico", não "sistema solar":
   nenhuma é um círculo perfeito, nenhuma repete a amplitude da vizinha. */
@keyframes naofaz-drift-1 {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(3px, -4px); }
  50%      { transform: translate(-2px, 3px); }
  75%      { transform: translate(-4px, -2px); }
}
@keyframes naofaz-drift-2 {
  0%, 100% { transform: translate(0, 0); }
  30%      { transform: translate(-4px, 2px); }
  65%      { transform: translate(3px, 4px); }
}
@keyframes naofaz-drift-3 {
  0%, 100% { transform: translate(0, 0); }
  40%      { transform: translate(4px, 3px); }
  70%      { transform: translate(-3px, -3px); }
}

.naofaz__label {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 100%;
  margin-block-start: 8px;
  transform: translateX(-50%) translateY(-4px);
  white-space: nowrap;
  font-size: var(--t-xs);
  font-weight: 400;
  color: var(--fg);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 3px 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.naofaz__orbit:hover .naofaz__label,
.naofaz__orbit[data-active="true"] .naofaz__label { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 61.99rem) {
  /* Mobile: título → argumentos → mão → esferas, mão centralizada — é a
     ordem natural do DOM, sem precisar de order/flex-reorder. As esferas
     ficam mais para dentro, para não arriscar overflow horizontal em
     telas estreitas. */
  .naofaz__orbit[data-orbit="1"] { left: 12%; }
  .naofaz__orbit[data-orbit="2"] { left: 8%; }
  .naofaz__orbit[data-orbit="3"] { left: 62%; }
}

@media (prefers-reduced-motion: reduce) {
  .naofaz__hand img       { transition: none; }
  .naofaz__orbit          { transition: opacity 1ms linear; }
  .naofaz__orbit-drift    { animation: none; }
}


/* ==========================================================================
   26 · GLOW AMBIENTE — segue o ponteiro
   Portado do #ambientGlow da v1. Um elemento fixo atrás de todo o
   conteúdo. Na v1 o fundo era preto e o glow, forte; aqui a base é clara,
   então a intensidade cai para 0.05 — presença, não efeito.
   Desligado em touch e em reduced-motion (ver JS).
   ========================================================================== */

.ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle 520px at var(--mx, 50%) var(--my, 40%),
      rgba(53, 217, 210, .10), transparent 60%);
  transition: opacity 500ms var(--ease);
}

.ambient[data-on="true"] { opacity: 1; }

/* O conteúdo precisa ficar acima do glow.
   O .hdr ficou DE FORA desta regra: ele já tem z-index próprio, e
   incluí-lo aqui redefinia position:relative por cima do sticky
   declarado antes — mesma especificidade, e esta vinha depois. O
   cabeçalho parou de acompanhar a rolagem no dia em que o glow entrou. */
main, .ftr { position: relative; z-index: 1; }


/* ==========================================================================
   27 · ENTRADA — variante com escala
   Cartões e imagens ganham um leve scale junto do fade, o que dá mais
   sensação de "chegada" do que ao texto puro. Mesma ideia do
   .reveal--scale da v1.
   ========================================================================== */

html[data-js] [data-rise="scale"] { transform: translateY(14px) scale(.985); }
html[data-js] [data-rise="scale"][data-shown="true"] { transform: none; }


/* ==========================================================================
   27B · ENTRADA — variante em leque (cartões de planos)
   Os três cartões chegam como um leque se abrindo: giram a partir de
   uma dobradiça abaixo do grupo, cada um com um ângulo diferente pelo
   próprio --i que a revelação em cadeia já usa (0/1/2 → esquerda,
   centro, direita), e assentam na mesma posição final estática de
   sempre. Só a ENTRADA muda — o repouso é idêntico a [data-rise="scale"].
   ========================================================================== */

html[data-js] [data-rise="fan"] {
  transform-origin: 50% 140%;
  transform:
    translateY(30px)
    rotate(calc((var(--i, 1) - 1) * 9deg))
    scale(.92);
}

html[data-js] [data-rise="fan"][data-shown="true"] { transform: none; }


/* ==========================================================================
   28 · LIQUID GLASS — botões do hero
   Aproximação em CSS puro do material de vidro da Apple. Quatro camadas
   empilhadas, porque o efeito não vem de uma propriedade só:

     1. MEIO       backdrop-filter: blur + saturate — o que está atrás
                   aparece desfocado e com a cor puxada, como através de
                   vidro grosso. É o que separa vidro de "fundo
                   semitransparente".
     2. ESPESSURA  dois inset box-shadow: um highlight branco no topo e um
                   mais fraco embaixo. É o que faz a peça ter borda física
                   em vez de ser um recorte chapado.
     3. ANEL       ::before com mask-composite:exclude pinta SÓ a borda,
                   com um gradiente que vai do branco especular ao
                   turquesa da marca — o brilho da quina do vidro.
     4. LENTE      ::after é um brilho radial que segue o ponteiro
                   (--gx/--gy escritas pelo JS). É o reflexo que se move
                   quando você inclina a peça.

   O hero é o único lugar da página com halo turquesa e glow ambiente
   atrás — sem nada para refratar, vidro vira apenas um retângulo cinza.
   Por isso o efeito fica restrito a estes dois botões.
   ========================================================================== */

.btn--glass {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  /* 1 · o meio */
  background: color-mix(in srgb, var(--card) 52%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  border-color: transparent;
  color: var(--fg);

  /* 2 · a espessura */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -1px 0 rgba(255, 255, 255, .30),
    0 1px 2px rgba(11, 14, 13, .05),
    0 10px 30px rgba(11, 14, 13, .09);

  transition:
    box-shadow var(--dur) var(--ease),
    transform var(--dur-fast) var(--ease),
    background-color var(--dur-fast) var(--ease);
}

/* 3 · o anel especular */
.btn--glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(150deg,
      rgba(255, 255, 255, .98) 0%,
      rgba(255, 255, 255, .25) 38%,
      color-mix(in srgb, var(--brand-turquoise) 55%, transparent) 78%,
      rgba(255, 255, 255, .70) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .9;
  transition: opacity var(--dur) var(--ease);
}

/* 4 · a lente que segue o ponteiro */
.btn--glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(140px circle at var(--gx, 50%) var(--gy, 50%),
      rgba(255, 255, 255, .75),
      color-mix(in srgb, var(--brand-turquoise) 18%, transparent) 45%,
      transparent 70%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.btn--glass:hover,
.btn--glass:focus-visible {
  /* .btn--ghost:hover devolve uma borda sólida; aqui ela precisa continuar
     invisível, senão desenha um segundo contorno por cima do anel. */
  border-color: transparent;
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--card) 62%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(255, 255, 255, .35),
    0 2px 4px rgba(11, 14, 13, .06),
    0 16px 40px rgba(11, 14, 13, .12),
    0 0 0 4px color-mix(in srgb, var(--brand-turquoise) 14%, transparent);
}

.btn--glass:hover::after,
.btn--glass:focus-visible::after { opacity: 1; }
.btn--glass:hover::before,
.btn--glass:focus-visible::before { opacity: 1; }

/* O vidro afunda ao ser pressionado — a peça cede, não some. */
.btn--glass:active { transform: translateY(0) scale(.985); }

/* Variante tingida, para o CTA principal. O turquesa continua opaco o
   bastante para o botão não perder força de chamada; o vidro entra como
   acabamento, não como transparência. Texto preto sobre ele mantém
   11.55:1 no pior caso, porque a base é o hex da marca. */
.btn--glass-accent {
  background: color-mix(in srgb, var(--brand-turquoise) 88%, transparent);
  color: var(--on-accent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .75),
    inset 0 -1px 0 rgba(5, 7, 6, .12),
    0 2px 6px rgba(11, 14, 13, .08),
    0 12px 34px rgba(53, 217, 210, .34);
}

.btn--glass-accent::before {
  background: linear-gradient(150deg,
      rgba(255, 255, 255, .95) 0%,
      rgba(255, 255, 255, .30) 42%,
      rgba(255, 255, 255, .10) 70%,
      rgba(255, 255, 255, .80) 100%);
}

.btn--glass-accent::after {
  background: radial-gradient(140px circle at var(--gx, 50%) var(--gy, 50%),
      rgba(255, 255, 255, .55), transparent 68%);
}

.btn--glass-accent:hover,
.btn--glass-accent:focus-visible {
  background: color-mix(in srgb, var(--brand-turquoise) 96%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 0 -1px 0 rgba(5, 7, 6, .14),
    0 2px 6px rgba(11, 14, 13, .10),
    0 18px 46px rgba(53, 217, 210, .44);
}

/* Sem backdrop-filter (Firefox com a flag desligada, navegadores antigos)
   não existe vidro: o fundo fica opaco para o texto nunca cair sobre uma
   superfície indefinida. Vale mais legível do que translúcido. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .btn--glass { background: var(--card); border-color: var(--line-ui); }
  .btn--glass-accent { background: var(--brand-turquoise); }
  .card--glass { background: var(--card); border-color: var(--line); }
}

@media (prefers-reduced-motion: reduce) {
  .btn--glass:hover,
  .btn--glass:focus-visible,
  .btn--glass:active { transform: none; }
}


/* ==========================================================================
   29 · LIQUID METAL — anel da borda
   Reprodução em CSS do LiquidMetalButton (@paper-design/shaders), que no
   original é um fragment shader WebGL dentro de um componente React.

   O QUE O ORIGINAL FAZ: pinta um anel externo com um shader de metal
   líquido e cobre o centro com um miolo escuro, de modo que só a BORDA
   mostra o metal em movimento. A velocidade do shader responde à
   interação — u_speed 0.6 parado, 1 no hover, 2.4 por 300ms no clique.

   COMO ISSO VIRA CSS AQUI: o anel já existe — é o ::before do liquid
   glass, que usa mask-composite:exclude para pintar só a moldura. Esta
   camada apenas troca o conteúdo desse anel por um conic-gradient que
   gira. Nenhum elemento novo, nenhuma tela WebGL.

   AS CORES: em vez do cromado do original, as três da marca — âmbar,
   verde e turquesa — nas mesmas paradas da régua do rodapé e da linha da
   seção "Como o dinheiro volta". u_repetition do shader é 4, então o
   anel traz QUATRO ciclos completos, cada um fechando em âmbar para a
   volta não ter costura.
   ========================================================================== */

/* Ângulo tipado. Sem @property o navegador trata o valor como uma string
   e não interpola — o gradiente giraria aos saltos, ou não giraria. */
@property --metal-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.btn--metal {
  /* O neutro entre os picos. Vem do texto, então acompanha o tema:
     discreto no claro, discreto no escuro, nunca uma cor a mais. */
  --metal-vale: color-mix(in srgb, var(--fg) 20%, transparent);

  /* Duração equivalente ao u_speed do original: 0.6 em repouso.
     hover = speed 1   -> 6s × 0.6 = 3.6s
     active = speed 2.4 -> 6s × 0.25 = 1.5s */
  --metal-dur: 6s;
}

.btn--metal:hover,
.btn--metal:focus-visible { --metal-dur: 3.6s; }
.btn--metal:active { --metal-dur: 1.5s; }

.btn--metal::before {
  /* 2px, a mesma espessura do original (width 142 contra innerWidth 138). */
  padding: 2px;
  opacity: .62;

  /* METAL, NÃO ARCO-ÍRIS.
     A primeira tentativa encostou âmbar, verde e turquesa uma na outra e
     o anel virou uma fita saturada. Metal líquido é outra coisa: são
     PICOS de brilho separados por VALES neutros — é o vale que faz o
     olho ler reflexo em superfície, e não faixa de cor.

     Cada ciclo de 25% traz um pico de cada cor da marca, e entre eles um
     neutro discreto derivado do próprio texto (funciona no tema claro e
     no escuro). É o equivalente ao u_softness: 0.5 do shader, que
     difunde as bandas em vez de deixá-las chapadas.

     As cores continuam sendo exatamente as da régua do rodapé e da linha
     da seção — só param de aparecer todas ao mesmo tempo. */
  background: conic-gradient(from var(--metal-angle),
      var(--metal-vale)       0%,
      var(--brand-amber)      4.2%,
      var(--metal-vale)       8.3%,
      var(--brand-green)     12.5%,
      var(--metal-vale)      16.7%,
      var(--brand-turquoise) 20.8%,
      var(--metal-vale)      25%,

      var(--brand-amber)     29.2%,
      var(--metal-vale)      33.3%,
      var(--brand-green)     37.5%,
      var(--metal-vale)      41.7%,
      var(--brand-turquoise) 45.8%,
      var(--metal-vale)      50%,

      var(--brand-amber)     54.2%,
      var(--metal-vale)      58.3%,
      var(--brand-green)     62.5%,
      var(--metal-vale)      66.7%,
      var(--brand-turquoise) 70.8%,
      var(--metal-vale)      75%,

      var(--brand-amber)     79.2%,
      var(--metal-vale)      83.3%,
      var(--brand-green)     87.5%,
      var(--metal-vale)      91.7%,
      var(--brand-turquoise) 95.8%,
      var(--metal-vale)     100%);
  animation: metal-spin var(--metal-dur) linear infinite;
  transition: opacity var(--dur) var(--ease);
}

/* No hover o reflexo ganha intensidade, como metal pegando luz. Em
   repouso fica discreto: o botão é o CTA secundário e não deve competir
   com o primário ao lado. */
.btn--metal:hover::before,
.btn--metal:focus-visible::before { opacity: .95; }

@keyframes metal-spin {
  to { --metal-angle: 360deg; }
}

/* Um brilho especular por cima do metal, para o anel ler como superfície
   reflexiva e não como fita colorida. Fica no ::after do glass? Não — o
   ::after é a lente do ponteiro. Este vive numa sombra interna. */
.btn--metal {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -1px 0 rgba(255, 255, 255, .30),
    0 1px 2px rgba(11, 14, 13, .06),
    0 12px 34px rgba(11, 14, 13, .10);
}

.btn--metal:hover,
.btn--metal:focus-visible {
  /* Sem anel de halo aqui: o brilho do metal já sinaliza o hover, e um
     halo turquesa colocaria este botão no mesmo peso visual do CTA
     primário logo ao lado. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(255, 255, 255, .35),
    0 2px 4px rgba(11, 14, 13, .06),
    0 16px 40px rgba(11, 14, 13, .12);
}

/* O original afunda com translateY(1px) scale(0.98). */
.btn--metal:active { transform: translateY(1px) scale(.98); }

/* FALLBACK — o giro depende de @property.
   Sem o tipo <angle> registrado, o navegador trata --metal-angle como
   texto e não interpola: o anel ficaria parado.

   @supports NÃO resolve isso. Duas razões: não existe forma estável de
   testar a at-rule @property, e qualquer declaração contendo var() é
   tratada pela especificação como válida — um teste com var() dentro
   retorna verdadeiro em qualquer navegador que suporte custom
   properties, mesmo sem conic-gradient. Um `not` desses nunca dispara.

   Então quem decide é o JS, com uma checagem direta de CSS.registerProperty
   (ver initMetal), marcando <html data-noprop> quando falta. O fallback é
   o mesmo gradiente correndo na horizontal — a técnica já usada na linha
   da seção e no marquee. Movimento em todo navegador. */
html[data-noprop] .btn--metal::before {
  background: linear-gradient(100deg,
      var(--metal-vale)       0%,
      var(--brand-amber)      8.3%,
      var(--metal-vale)      16.7%,
      var(--brand-green)     25%,
      var(--metal-vale)      33.3%,
      var(--brand-turquoise) 41.7%,
      var(--metal-vale)      50%,
      var(--brand-amber)     58.3%,
      var(--metal-vale)      66.7%,
      var(--brand-green)     75%,
      var(--metal-vale)      83.3%,
      var(--brand-turquoise) 91.7%,
      var(--metal-vale)     100%);
  background-size: 200% 100%;
  animation: track-flow var(--metal-dur) linear infinite;
}

/* ---- Ripple do clique ------------------------------------------------
   O original monta um <span> por clique e o remove após 600ms. Aqui é o
   mesmo: o JS insere o nó, a animação roda e o nó se remove sozinho no
   evento animationend — sem setTimeout a contar tempo em paralelo. */

.btn--metal .ripple {
  position: absolute;
  z-index: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  background: radial-gradient(circle,
      color-mix(in srgb, var(--brand-turquoise) 30%, transparent) 0%,
      transparent 70%);
  animation: ripple-out 600ms ease-out forwards;
}

@keyframes ripple-out {
  from { transform: translate(-50%, -50%) scale(0);  opacity: .65; }
  to   { transform: translate(-50%, -50%) scale(14); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  /* O anel para de girar mas mantém as cores da marca; o ripple não
     acontece (ver JS). Movimento em loop infinito é o caso mais claro de
     algo a desligar aqui. */
  .btn--metal::before { animation: none; }
  .btn--metal:active { transform: none; }
  .btn--metal .ripple { display: none; }
}


/* ==========================================================================
   29B · ANEL LÍQUIDO NO PLANO EM DESTAQUE
   Mesma técnica do .btn--metal acima — gradiente cônico das três cores
   da marca girando com --metal-angle, picos separados por vales neutros
   — aplicada ao ::before que .card--glass já desenha como moldura do
   plano "Mais indicado". Duplicada em vez de compartilhada por variável
   de propósito: a indireção via custom property partiu o botão do hero
   numa revisão anterior, então aqui cada seletor carrega o próprio
   gradiente, sem depender de nada declarado fora dele.
   ========================================================================== */

.plan--hot.card--glass {
  --metal-vale: color-mix(in srgb, var(--fg) 20%, transparent);
  --metal-dur: 7s;
}

.plan--hot.card--glass:hover,
.plan--hot.card--glass:focus-within { --metal-dur: 4s; }

.plan--hot.card--glass::before {
  padding: 2px;
  opacity: .85;
  background: conic-gradient(from var(--metal-angle),
      var(--metal-vale)       0%,
      var(--brand-amber)      4.2%,
      var(--metal-vale)       8.3%,
      var(--brand-green)     12.5%,
      var(--metal-vale)      16.7%,
      var(--brand-turquoise) 20.8%,
      var(--metal-vale)      25%,

      var(--brand-amber)     29.2%,
      var(--metal-vale)      33.3%,
      var(--brand-green)     37.5%,
      var(--metal-vale)      41.7%,
      var(--brand-turquoise) 45.8%,
      var(--metal-vale)      50%,

      var(--brand-amber)     54.2%,
      var(--metal-vale)      58.3%,
      var(--brand-green)     62.5%,
      var(--metal-vale)      66.7%,
      var(--brand-turquoise) 70.8%,
      var(--metal-vale)      75%,

      var(--brand-amber)     79.2%,
      var(--metal-vale)      83.3%,
      var(--brand-green)     87.5%,
      var(--metal-vale)      91.7%,
      var(--brand-turquoise) 95.8%,
      var(--metal-vale)     100%);
  animation: metal-spin var(--metal-dur) linear infinite;
  transition: opacity var(--dur) var(--ease);
}

.plan--hot.card--glass:hover::before,
.plan--hot.card--glass:focus-within::before { opacity: 1; }

/* Mesmo fallback do .btn--metal: sem @property, o giro depende do JS
   marcar <html data-noprop> (ver initMetal) para trocar o cônico por um
   gradiente horizontal corrido — a mesma técnica da linha da seção. */
html[data-noprop] .plan--hot.card--glass::before {
  background: linear-gradient(100deg,
      var(--metal-vale)       0%,
      var(--brand-amber)      8.3%,
      var(--metal-vale)      16.7%,
      var(--brand-green)     25%,
      var(--metal-vale)      33.3%,
      var(--brand-turquoise) 41.7%,
      var(--metal-vale)      50%,
      var(--brand-amber)     58.3%,
      var(--metal-vale)      66.7%,
      var(--brand-green)     75%,
      var(--metal-vale)      83.3%,
      var(--brand-turquoise) 91.7%,
      var(--metal-vale)     100%);
  background-size: 200% 100%;
  animation: track-flow var(--metal-dur) linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .plan--hot.card--glass::before { animation: none; }
}

/* No tema escuro o giro colorido (âmbar/verde/turquesa) foi reprovado —
   mesma animação, mas em prata (tons neutros já usados no tema escuro:
   --on-dark, --on-dark-2, --line-ui) e mais discreta. */
[data-theme="dark"] .plan--hot.card--glass::before {
  opacity: .55;
  background: conic-gradient(from var(--metal-angle),
      var(--metal-vale)     0%,
      var(--on-dark)        8.3%,
      var(--metal-vale)    16.7%,
      var(--on-dark-2)     25%,
      var(--metal-vale)    33.3%,
      var(--line-ui)       41.7%,
      var(--metal-vale)    50%,
      var(--on-dark)       58.3%,
      var(--metal-vale)    66.7%,
      var(--on-dark-2)     75%,
      var(--metal-vale)    83.3%,
      var(--line-ui)       91.7%,
      var(--metal-vale)   100%);
}

[data-theme="dark"] .plan--hot.card--glass:hover::before,
[data-theme="dark"] .plan--hot.card--glass:focus-within::before { opacity: .75; }

html[data-noprop][data-theme="dark"] .plan--hot.card--glass::before {
  background: linear-gradient(100deg,
      var(--metal-vale)   0%,
      var(--on-dark)      16.7%,
      var(--metal-vale)   33.3%,
      var(--on-dark-2)    50%,
      var(--metal-vale)   66.7%,
      var(--line-ui)      83.3%,
      var(--metal-vale)  100%);
  background-size: 200% 100%;
}


/* ==========================================================================
   30 · TIPOGRAFIA DOS ITENS DA OPERAÇÃO
   A seção "O que tem dentro" tinha nove cartões iguais em três linhas —
   alta demais, e pior: tratava como equivalentes coisas que não são. Os
   quatro primeiros são o que só a Luccra faz; os cinco seguintes são o
   que qualquer sistema de clínica tem.

   Estes três seletores são o miolo de cada item da operação. O
   contêiner mudou de lista vertical para cartão de vidro em faixa
   horizontal (ver §31); o conteúdo continua o mesmo.
   ========================================================================== */

.feat__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent-ui);
}

.feat__t {
  margin-block-end: var(--s1);
  font-size: var(--t-base);
  letter-spacing: -0.01em;
  color: var(--fg);
}

.feat__d {
  font-size: var(--t-sm);
  color: var(--fg-2);
}

/* Título do segundo bloco da seção.
   Era um rótulo de 13px em caixa-alta na cor terciária (4.8:1) e
   alinhado à esquerda — vocabulário de nota de rodapé, no meio de uma
   seção inteiramente centralizada. Lia como legenda esquecida, não como
   abertura de bloco.

   Agora é um título de verdade: mesmo corpo de um h3, cor primária,
   centralizado como todo o resto da seção, com um filete do gradiente da
   marca acima para marcar que ali começa outra coisa. */
.subhead {
  position: relative;
  max-width: 34rem;
  margin: var(--s7) auto var(--s5);
  padding-block-start: var(--s4);
  text-align: center;

  /* 19→22px. Calibrado contra a escala real da seção em 1440px:
       h2 do título ........ 52px
       SUBHEAD ............. 22px
       título do cartão .... 19px
       corpo ............... 17px
     Um degrau acima do título do cartão, que é o papel dele — introduz o
     grupo. A primeira correção usou --t-xl (40px), perto demais da h2:
     em vez de abrir o bloco, disputava com ele. O destaque aqui vem da
     cor e do filete, não do corpo da fonte. */
  font-size: clamp(1.1875rem, .35vw + 1.05rem, 1.375rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--fg);
}

/* O mesmo gradiente da régua do rodapé e da linha dos passos, num filete
   curto. Marca o início do bloco sem custar uma linha de altura. */
.subhead::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  width: 36px;
  height: 2px;
  margin-inline-start: -18px;
  border-radius: var(--r-pill);
  background: linear-gradient(100deg,
      var(--brand-amber) 0%,
      var(--brand-green) 48%,
      var(--brand-turquoise) 100%);
}


/* ==========================================================================
   31 · FAIXA DA OPERAÇÃO — cartões de vidro em rolagem horizontal
   Mesma mecânica do marquee dos números (duas cópias, -50%, pausa no
   hover), aplicada aos cinco itens da operação.

   POR QUE UM HALO ATRÁS: vidro só existe se houver o que refratar. Sobre
   o fundo chapado da seção, backdrop-filter não teria nada para desfocar
   e os cartões virariam retângulos translúcidos sem graça — foi por isso
   que o liquid glass ficou restrito ao hero até agora. O halo turquesa
   abaixo resolve isso: é o que aparece através do vidro.
   ========================================================================== */

.opband {
  position: relative;
  isolation: isolate;
}

.opband::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;

  /* Só sangra na vertical. O -10% horizontal da primeira versão somava
     20% à largura do documento e criava rolagem lateral: a página inteira
     passava a ser mais larga que a janela e o conteúdo aparecia deslocado,
     com uma faixa vazia à direita. O gradiente radial já esmaece sozinho
     nas pontas, então não havia o que ganhar sangrando na horizontal. */
  inset: -20% 0;
  background:
    radial-gradient(ellipse 42% 60% at 22% 50%, rgba(53, 217, 210, .14), transparent 70%),
    radial-gradient(ellipse 38% 55% at 78% 50%, rgba(246, 187, 49, .09), transparent 70%);
}

/* ---- o cartão de vidro -------------------------------------------------
   Mesmas quatro camadas do .btn--glass — meio, espessura, anel e lente —
   redimensionadas para cartão. Está escrito separado, e não reaproveitando
   .btn--glass, porque aquele bloco está acoplado a .btn (altura mínima,
   padding de botão, raio pílula) e os botões do hero já estão aprovados:
   extrair uma base comum agora arriscaria regressão neles por ganho
   pequeno. Se um terceiro uso aparecer, aí vale a refatoração. */

.opcard {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex: none;
  width: clamp(250px, 25vw, 320px);
  margin-inline-end: var(--s5);
  padding: var(--s5);
  border-radius: var(--r-lg);

  /* 1 · o meio */
  background: color-mix(in srgb, var(--card) 55%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  backdrop-filter: blur(14px) saturate(170%);

  /* 2 · a espessura */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -1px 0 rgba(255, 255, 255, .16),
    0 1px 2px rgba(11, 14, 13, .05),
    0 10px 30px rgba(11, 14, 13, .08);

  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

/* 3 · o anel especular */
.opcard::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(150deg,
      rgba(255, 255, 255, .75) 0%,
      rgba(255, 255, 255, .12) 42%,
      color-mix(in srgb, var(--brand-turquoise) 40%, transparent) 80%,
      rgba(255, 255, 255, .45) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .75;
  transition: opacity var(--dur) var(--ease);
}

/* 4 · a lente que segue o ponteiro */
.opcard::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(180px circle at var(--gx, 50%) var(--gy, 50%),
      rgba(255, 255, 255, .45),
      color-mix(in srgb, var(--brand-turquoise) 14%, transparent) 48%,
      transparent 72%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.opcard:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    inset 0 -1px 0 rgba(255, 255, 255, .2),
    0 2px 4px rgba(11, 14, 13, .06),
    0 18px 44px rgba(11, 14, 13, .12);
}

.opcard:hover::after { opacity: 1; }
.opcard:hover::before { opacity: 1; }

/* No tema escuro a lente branca (::after) explodia de brilho sobre o
   fundo quase preto e apagava visualmente o anel especular (::before)
   por cima do qual ela pinta — a borda de cima do card "sumia" sempre
   que o ponteiro passava perto do topo. Reduzindo o pico de branco e a
   mancha de turquesa no escuro, o anel volta a ler por baixo do brilho. */
[data-theme="dark"] .opcard::after {
  background: radial-gradient(140px circle at var(--gx, 50%) var(--gy, 50%),
      rgba(255, 255, 255, .09),
      color-mix(in srgb, var(--brand-turquoise) 10%, transparent) 44%,
      transparent 68%);
}

.opcard .feat__ico { margin-block-end: var(--s4); }
.opcard .feat__t { margin-block-end: var(--s2); }

/* Sem backdrop-filter não há vidro: fundo opaco, para o texto nunca cair
   sobre superfície indefinida. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .opcard { background: var(--card); }
}

@media (prefers-reduced-motion: reduce) {
  .opcard:hover { transform: none; }
}

@media (max-width: 61.99rem) {
  .problem-layout {
    grid-template-columns: 1fr;
    grid-template-areas: "heading" "product" "lead";
    row-gap: var(--s5);
  }
  .problem-heading .h2 { max-width: 17em; font-size: var(--t-2xl); text-wrap: balance; }
  .problem-heading__line + .problem-heading__line { margin-block-start: 0; }
  .problem-product { margin-block-start: var(--s2); }
}

@media (max-width: 43.99rem) {
  .problem-stats { grid-template-columns: 1fr; }
  .problem-stat {
    display: grid;
    grid-template-columns: minmax(5.5rem, auto) minmax(0, 1fr);
    column-gap: var(--s5);
    row-gap: var(--s2);
    padding-inline: 0;
  }
  .problem-stat + .problem-stat {
    border-inline-start: 0;
    border-block-start: 1px solid var(--line);
  }
}

#recursos > .wrap { max-width: 90rem; }

.resources-intro {
  max-width: 56rem;
  margin-block-end: clamp(3rem, 5vw, 4.5rem);
}

.resources-intro .h2 { margin-block-start: var(--s4); }

.resources-intro .lead {
  max-width: 48rem;
  margin-block-start: var(--s5);
}

.resources-showcase {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(24rem, .72fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}

/* Marca d'água quase invisível no vazio à direita da lista de recursos.
   Um brilho varre a silhueta em loop; a logo só entra depois que todas
   as linhas já apareceram (--i alto reaproveita o stagger do data-rise). */
.resources-mark {
  position: absolute;
  inset-block-start: -17rem;
  inset-inline-end: clamp(8rem, -2vw, 0rem);
  width: clamp(11rem, 25vw, 16rem);
  height: auto;
  pointer-events: none;
  z-index: 0;
  opacity: .5;
  filter: brightness(1.08) saturate(110%) drop-shadow(0 0 24px rgba(53, 217, 210, .12));
  transform-origin: center;
  animation: resources-mark-float 4.6s ease-in-out infinite alternate;
}

/* [data-rise] entrega opacity:1 no repouso; aqui fixamos a marca para
   permanecer totalmente visível, sem o efeito de marca d'água. */
html[data-js] .resources-mark[data-shown="true"] { opacity: .5; }

@keyframes resources-mark-float {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); opacity: .38; }
  22%  { transform: translate3d(-5px, 10px, 0) rotate(-2deg) scale(1.03); opacity: .45; }
  52%  { transform: translate3d(8px, -14px, 0) rotate(2.6deg) scale(1.08); opacity: .5; }
  75%  { transform: translate3d(-3px, 8px, 0) rotate(-1.3deg) scale(1.04); opacity: .46; }
  100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); opacity: .4; }
}

/* O brilho que corre: um retângulo mascarado com o próprio ícone,
   deslizando por cima da silhueta base. */
.resources-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  -webkit-mask-image: url("../assets/logos/Icon.svg");
  mask-image: url("../assets/logos/Icon.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  background: linear-gradient(100deg,
      transparent 20%,
      rgba(53, 217, 210, .38) 48%,
      rgba(255,255,255,.28) 52%,
      transparent 78%);
  background-size: 240% 100%;
  background-position: 150% 0;
  mix-blend-mode: screen;
  opacity: 0;
  filter: blur(1px);
  animation: resources-mark-sheen 3.8s ease-in-out infinite;
}

@keyframes resources-mark-sheen {
  0%   { background-position: 170% 0; opacity: 0; }
  12%  { opacity: .42; }
  45%  { opacity: .46; }
  62%  { background-position: -70% 0; opacity: .26; }
  100% { background-position: -170% 0; opacity: 0; }
}

@media (max-width: 61.99rem) {
  .resources-mark { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .resources-mark::after { animation: none; opacity: 0; }
}

.resources-product {
  min-width: 0;
  margin: 0;
}

.resources-product__frame {
  position: relative;
  overflow: hidden;
  padding: clamp(.35rem, .6vw, .55rem);
  border-radius: var(--r-md);
  background: #0C100E;
  box-shadow: var(--sh-lg);
}

.resources-product__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(53, 217, 210, .18);
  pointer-events: none;
}

.resources-product img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--r-md) - .3rem);
}

.resources-product__caption {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-block-start: var(--s3);
  color: var(--fg-3);
  font-size: var(--t-xs);
}

.resources-core { position: relative; z-index: 1; border-block: 1px solid var(--line); }

.resource-row {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--s5);
  padding-block: clamp(1rem, 1.5vw, 1.4rem);
  align-items: start;
}

.resource-row + .resource-row { border-block-start: 1px solid var(--line); }

.resource-row .ico {
  width: 3rem;
  height: 3rem;
  transition: transform 220ms var(--ease-out);
}

.resource-row:hover .ico,
.resource-row:focus-within .ico {
  transform: translateY(-4px);
}

.resource-row__copy { min-width: 0; }

.resource-row__title {
  margin-block-end: var(--s2);
  color: var(--fg);
}

#recursos .subhead { margin-block-start: clamp(3.5rem, 6vw, 5rem); }


@media (max-width: 61.99rem) {
  .resources-showcase { grid-template-columns: 1fr; gap: var(--s7); }
  .resources-intro { margin-block-end: var(--s7); }
  .resources-core { max-width: 46rem; }
}

@media (max-width: 43.99rem) {
  .resource-row { grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--s4); }
  .resource-row .ico { width: 2.5rem; height: 2.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .resource-row .ico { transition: none; }
  .resource-row:hover .ico,
  .resource-row:focus-within .ico { transform: none; }
}

#funciona.section {
  padding-block-start: clamp(2.5rem, 4vw, 4rem);
}

.funciona__topo {
  display: grid;
  justify-items: center;
  gap: var(--s4);
  margin-block-start: 0;
}

.shead {
  max-width: 72rem;
}

.shead .h2__soft {
  display: inline-block;
  font-weight: 400;
}

.shead .h2__accent {
  display: inline-block;
  color: var(--accent-tx);
  font-weight: 400;
}

@media (min-width: 62rem) {
  .funciona__topo {
    grid-template-columns: 1fr;
    gap: var(--s5);
  }
}