/* Fontes servidas do proprio dominio.

   Antes vinha por @import do Google Fonts, com um problema duplo:
   1. o `&` (codigo de HTML) estava dentro de um arquivo CSS, onde nao
      significa nada — o Google devolvia SO a Anton, e a Poppins nunca chegava.
      O texto inteiro caia numa fonte do sistema;
   2. @import encadeia requisicoes (CSS -> CSS do Google -> arquivos da fonte) e
      bloqueia a renderizacao. Servindo daqui, e' uma requisicao a menos e nenhuma
      dependencia de terceiro.

   Sao os MESMOS arquivos do funil feminino. Pesos: Poppins 400/600/700 e Anton
   400 — os 300, 500 e 800 que o @import pedia nao sao usados em lugar nenhum. */

@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/anton-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/anton-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/poppins-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/poppins-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/poppins-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/poppins-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/poppins-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/poppins-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* =============================================================================
   Tokens do tema — extraidos de funnel.design do payload original
   ========================================================================== */
:root {
  /* O mesmo azul do tema, em componentes separados. Existe porque box-shadow
     precisa de transparencia (rgba) e nao da' para tirar alfa de um valor #hex.
     Ao trocar a cor do funil, trocar aqui tambem. */
  --theme-accent-rgb: 0, 122, 255;
  --theme-accent-color: #007aff;
  --theme-accent-color-50: #f0f7ff;
  --theme-accent-color-100: #e2eeff;
  --theme-accent-color-200: #c6ddfe;
  --theme-accent-color-300: #9ac3fe;
  --theme-accent-color-400: #64a4fe;
  --theme-accent-color-500: #007aff;
  --theme-accent-color-600: #0d70e5;
  --theme-accent-color-700: #0055b8;
  --theme-accent-color-800: #02418d;
  --theme-accent-color-900: #003373;

  --theme-background-color: #ffffff;
  --theme-heading-color: #000000;
  --theme-text-color: #545454;
  --theme-featured-text-color: #ffffff;
  --theme-background-soft: rgba(64, 64, 64, 0.05);
  --theme-border-color-xs: #e6e6e6;

  --theme-element-size: 56px;
  --theme-rounded: 0.5rem; /* rounded-lg */
  --theme-text-size: 16px;
  --theme-heading-size: 0.5;

  --theme-font:
    'Poppins', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial,
    'Noto Sans', 'Liberation Sans', sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';

  /* Layout de referencia — apenas forma
     e posicao; a paleta continua a do funil original. */
  --opt-gap: 0.75rem;      /* space-y-3 entre os cards */
  --opt-radius: 1rem;      /* rounded-xl */
  --opt-pad-x: 1.25rem;    /* px-5 */
  --opt-pad-y: 1rem;       /* py-4 */
  --spec-w: 15.2rem;       /* recorte do especialista */
  --spec-h: 24.4rem;
  --spec-right: -6.02rem;  /* sangra pela borda direita, como na referencia */
  --spec-pos: 62% 100%;    /* janela do recorte dentro da foto */
  --spec-fade: 0.9rem;     /* dissolve as bordas da foto no fundo */
  --spec-fade-r: 1.2rem;   /* lado direito: dissolve a moldura clara da foto */
  --spec-stage-h: 25rem;   /* altura minima do palco imagem + opcoes */
  --spec-opt-w: 65%;       /* largura da lista ao lado da foto */

  /* Desktop (>= 769px) */
  --container-shell-md: 880px; /* area de conteudo da landing */
  --spec-w-md: 21.7rem;        /* coluna da imagem — mesmo enquadramento */
  --spec-h-md: 35rem;          /* 560px de altura */

  --container-shell: 480px; /* max-w-[480px] do container principal */
  --container-max: 28rem; /* max-w-[28rem] da area de conteudo (original) */
  /* Valores exatos do .main-content original: "p-3 ... md:p-5" */
  --gutter: 0.75rem;
  --gutter-md: 1.25rem;

  /* Faixa da marca no topo (referencia: topo separado do conteudo por
     contraste de fundo, sem borda). */
  --header-bg: #fafafa;
}

/* =============================================================================
   Base
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  min-width: 0; /* impede que filhos de flex/grid estourem o container */
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: var(--theme-font);
  font-size: var(--theme-text-size);
  color: var(--theme-text-color);
  background-color: var(--theme-background-color);
  -webkit-font-smoothing: antialiased;
  /* clip recorta sem virar contêiner de rolagem — hidden quebraria o CTA
     sticky das etapas de leitura. */
  overflow-x: clip;
}

/* Quebra de palavras — regra unica para todo o projeto.
   NUNCA quebrar no meio de uma palavra. `word-break: break-word` (que o original
   usa) e um alias legado que, pela spec, equivale a `word-break: normal` +
   `overflow-wrap: anywhere` — e `anywhere` entra no calculo de min-content,
   encolhendo o container e produzindo "incomod a" / "ener gia". Por isso aqui
   usamos explicitamente `overflow-wrap: break-word`, que so quebra uma palavra
   quando ela sozinha nao cabe na linha e nao afeta min-content. */
html,
body,
.content,
.content h1,
.content h2,
.content h3,
.content h4,
.content p,
.content li,
.opt-label,
.btn,
.alert,
.checklist,
.quote,
.faq,
.argument-item,
.price,
.metric,
.timer {
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
  -webkit-hyphens: none;
  -ms-hyphens: none;
  line-break: auto;
}

/* Termo destacado de UMA palavra nunca se parte: o marcador e aplicado em
   tempo de render (app.js) somente quando o trecho colorido nao tem espacos,
   para nao travar frases inteiras coloridas. */
.kw {
  white-space: nowrap;
}

/* Nada pode ultrapassar a largura da tela. */
img,
svg,
iframe,
video,
canvas,
table {
  max-width: 100%;
}

img {
  border-style: none;
}

button {
  font-family: inherit;
}

.hidden {
  display: none !important;
}

/* =============================================================================
   Layout — container travado, mobile-first
   ========================================================================== */
.viewport {
  width: 100%;
  max-width: var(--container-shell);
  margin-left: auto;
  margin-right: auto;
  min-height: 100svh;
  background: var(--theme-background-color);
  overflow-x: clip;
}

.app-shell {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background-color: var(--theme-background-color);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Espelha "flex flex-col gap-4 md:gap-6 justify-between p-3 min-h-[95svh] md:p-5"
   do .main-content original — padding uniforme, nao apenas lateral. */
.main-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.75rem;
  padding: var(--gutter);
  min-height: 95svh;
  flex: 1;
  width: 100%;
  overflow-x: clip;
}

.step-body {
  flex: 1;
}

.step-tail {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

/* Desktop: pagina unica. Sem fundo cinza atras da coluna e sem sombra
   separando o miolo — a superficie e a mesma do mobile, de ponta a ponta. */
@media (min-width: 768px) {
  :root {
    --gutter: var(--gutter-md);
  }

  .main-content {
    gap: 1.5rem;
  }

}

/* =============================================================================
   Header — voltar + logo + progresso
   ========================================================================== */
/* Faixa da marca: ocupa a largura inteira da tela em qualquer dispositivo
   (fica fora da coluna do quiz, direto no body) e separa o topo do conteudo
   apenas pelo fundo, como na referencia. */
.q-header {
  width: 100%;
  z-index: 50;
  position: relative;
  background: var(--header-bg);
  padding: 0.6rem var(--gutter);
}

/* O miolo da faixa acompanha a coluna do quiz, entao logo, voltar e barra de
   progresso ficam alinhados com o conteudo. */
.q-header-inner {
  width: 100%;
  max-width: var(--container-shell);
  margin-inline: auto;
  display: grid;
  gap: 0.5rem;
}

/* Grade de 3 colunas: mantem o logo centralizado com ou sem o botao voltar. */
.q-header-row {
  width: 100%;
  display: grid;
  grid-template-columns: 2rem 1fr 2rem;
  align-items: center;
  gap: 1rem;
}

.q-back {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--theme-heading-color);
  cursor: pointer;
  padding: 0.35rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color 0.2s ease,
    opacity 0.2s ease;
}

.q-back:hover {
  background: var(--theme-background-soft);
}

/* Ocultado sem perder a coluna, para o logo nao sair do centro. */
.q-back[hidden] {
  display: inline-flex;
  visibility: hidden;
  pointer-events: none;
}

.q-logo {
  margin-inline: auto;
  width: 5rem;
}

/* Marca em tipografia: palavra + selo, como na referencia. */
.q-brand {
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-width: 0;
}

.q-brand-word {
  font-family: 'Anton', var(--theme-font);
  font-weight: 400;
  font-size: clamp(1.35rem, 6.2vw, 1.75rem);
  letter-spacing: 0.03em;
  line-height: 1;
  color: var(--theme-heading-color);
  white-space: nowrap;
}

.q-brand-badge {
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1;
  padding: 0.3rem 0.5rem;
  border-radius: 0.4rem;
  background: var(--theme-accent-color);
  color: var(--theme-featured-text-color);
  white-space: nowrap;
}

.q-logo img {
  display: block;
  width: 100%;
  height: auto;
}

.q-header-spacer {
  width: 2rem;
}

@media (min-width: 768px) {
  .q-logo {
    width: 8rem;
  }

  .q-brand {
    width: auto;
    gap: 0.6rem;
  }

  .q-brand-word {
    font-size: 2.375rem;
  }

  .q-brand-badge {
    font-size: 0.8rem;
    padding: 0.35rem 0.6rem;
  }
}

.q-progress {
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: var(--theme-background-soft);
  overflow: hidden;
}

.q-progress[hidden] {
  display: none;
}

.q-progress-bar {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--theme-accent-color);
  transition: width 0.3s ease;
}

.q-counter {
  font-size: 0.8rem;
  color: var(--theme-text-color);
  text-align: center;
}

.q-counter[hidden] {
  display: none;
}

/* =============================================================================
   Grade de camadas (flex-basis) — motor de layout do original
   ========================================================================== */

/* Largura automatica + margens negativas: reproduz a caixa do original, em que
   o container transborda .2rem de cada lado compensando o padding das camadas. */
.layers {
  position: relative;
  max-width: var(--container-max);
  display: flex;
  flex-flow: row wrap;
  margin: 0 -0.2rem;
  align-content: flex-start;
}

.layer {
  position: relative;
  min-width: 0;
  padding: 0.2rem;
  align-self: auto;
  flex-basis: 100%;
}

.fade-step {
  animation: fadeStep 0.25s ease-in;
}

@keyframes fadeStep {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* =============================================================================
   Pitch delay — tudo abaixo do video da oferta fica oculto ate o pitch
   comecar de verdade (ver setupPitchDelay em app.js).
   ========================================================================== */
.pitch-delayed {
  display: contents;
}

.pitch-delayed.is-pending {
  display: none;
}

.pitch-delayed.is-visible {
  display: contents;
}

/* display:contents nao gera caixa propria, entao a animacao nao poderia
   rodar no wrapper — ela roda em cada filho, que sao os .layer reais. */
.pitch-delayed.is-visible > * {
  animation: pitchFadeIn 0.8s ease-in;
}

@keyframes pitchFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =============================================================================
   Conteudo rico (Quill) — classes ql-*
   ========================================================================== */
.content {
  line-height: 1.45;
}

.content p {
  margin: 0;
}

.content h1,
.content h2,
.content h3,
.content h4 {
  margin: 0;
  /* 1.15 apertava demais: em titulo de 2-3 linhas as pernas do "g" e do "p"
     encostavam na linha de baixo. E como varios <strong> vem do editor original
     com fundo branco proprio, o fundo da linha SEGUINTE pintava por cima da
     perna — a letra parecia cortada. 1.32 da o respiro e resolve os dois. */
  line-height: 1.32;
  color: var(--theme-heading-color);
  font-family: var(--theme-font);
  /* Distribui as linhas: evita a palavra solta numa linha so. */
  text-wrap: balance;
}

.content h1 {
  font-size: 2em;
}

.content h2 {
  font-size: 1.5em;
}

.content h3 {
  font-size: 1.17em;
}

.content h4 {
  font-size: 1em;
}

.content p + p,
.content p + ul,
.content p + ol,
.content ul + p,
.content ul + ul,
.content ul + ol,
.content ol + p,
.content ol + ol,
.content ol + ul,
.content h1 + p,
.content h2 + p,
.content h3 + p,
.content h4 + p,
.content h1 + ul,
.content h2 + ul,
.content h3 + ul,
.content h1 + ol,
.content h2 + ol,
.content h3 + ol {
  margin-top: 0.75rem;
}

.content p + h1,
.content p + h2,
.content p + h3,
.content p + h4,
.content ul + h1,
.content ul + h2,
.content ul + h3,
.content ol + h1,
.content ol + h2,
.content ol + h3 {
  margin-top: 0.4rem;
}

.content p br {
  content: ' ';
  display: block;
  height: 0;
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
}

.content ul,
.content ol {
  padding-left: 1.25rem;
  margin: 0;
}

.ql-align-center {
  text-align: center;
}

.ql-align-right {
  text-align: right;
}

.ql-align-left {
  text-align: left;
}

.ql-align-justify {
  text-align: justify;
}

.ql-size-huge {
  font-size: 2.5em;
  line-height: 1;
}

.ql-size-large {
  font-size: 1.5em;
  line-height: 1;
}

.ql-size-small {
  font-size: 0.75em;
  line-height: 1.25;
  display: inline-block;
}

.content-variable,
.content-calc {
  font-style: normal !important;
  font-weight: normal !important;
  font-size: 0.9em !important;
  display: inline-block;
  padding: 2px 4px;
  color: #4b5563 !important;
  border-radius: 4px;
  background-color: #fff;
  box-shadow: 0 1px 2px #03071221;
}

/* =============================================================================
   Texto / imagem / espacador
   ========================================================================== */
.l-text {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.l-text .content {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

/* Etapa 1 (landing): subtitulo miudo em cinza e pergunta em negrito escuro
   logo acima das opcoes — a hierarquia da referencia. So o estilo muda; o
   texto vem do payload como esta. */
.step-landing .l-text .content p {
  font-size: 1rem;
  line-height: 1.35;
}

.step-landing .opt-intro,
.step-landing .opt-intro strong {
  color: var(--theme-heading-color);
}

.step-landing .l-options .opt-intro,
.step-landing .spec-intro .opt-intro {
  margin-top: 0.75rem;
  margin-bottom: 1rem;
}

/* Etapas de pergunta (fora das paginas de venda): titulo na escala da
   referencia — 1.7rem no mobile — para pergunta + opcoes caberem na
   primeira dobra. Fora da landing o titulo e um ponto menor: Poppins e mais
   larga que a fonte original e jogava a frase para uma terceira linha. */
.step-quiz .content h1,
.step-quiz .content h2 {
  font-size: 1.4rem;
  /* Ver a nota do line-height em .content h2 — mesmo motivo. Medido no
     celular de 375px: a 1.2 o titulo de 3 linhas transbordava 2px e comia a
     perna do "g"; a 1.35 o transbordo e zero. */
  line-height: 1.35;
}

.step-landing .content h1,
.step-landing .content h2 {
  font-size: 1.7rem;
}

@media (min-width: 768px) {
  .step-quiz .content h1 {
    font-size: 2rem;
  }
}


/* ──────────────────────────────────────────────────────────────────────────
   Rede de seguranca para navegador que NAO entende `overflow-x: clip`
   (iOS Safari anterior ao 16, Chrome anterior ao 90).

   Medido em 26/08/2026: na etapa inicial a foto do especialista e' sangrada
   243px de largura, passando 88px para fora da direita — de proposito. Quem
   segura ela e' o `clip`. Sem suporte a `clip`, a declaracao inteira e'
   descartada, o valor volta a ser `visible`, e a pagina inteira ganha 88px de
   rolagem lateral. No celular isso vira aquele arrastar leve para os lados.

   Por que `clip` foi escolhido no lugar de `hidden` (ver a nota no `body`):
   `hidden` cria um conteiner de rolagem e isso atrapalha o CTA fixo.
   Por isso a troca acontece SO' onde `clip` nao existe: quem tem navegador
   atual continua exatamente como esta' hoje; quem tem navegador antigo troca um
   CTA possivelmente pior por uma pagina que nao anda de lado — e hoje ele ja
   tem os dois problemas.
   ────────────────────────────────────────────────────────────────────────── */
@supports not (overflow-x: clip) {
  body,
  .viewport,
  .main-content {
    overflow-x: hidden;
  }
}

/* A caixa recebe o padding-bottom exato da razao natural da imagem, entao
   object-fit preenche a area calculada sem cortar nem distorcer. */
.l-image {
  overflow: hidden;
  border-radius: var(--theme-rounded);
  max-width: 100%;
}

.l-image .ratio-box {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.l-image .ratio-box img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Sem dimensoes no payload: a imagem mantem a razao natural, sem corte. */
.l-image.is-natural img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* =============================================================================
   Opcoes (cards de selecao)
   ========================================================================== */
.l-options .opt-intro {
  margin-top: 0.5rem;
  margin-bottom: 0.75rem;
  line-height: 1.25;
}

.opt-grid {
  display: grid;
  gap: var(--opt-gap);
  margin-bottom: 2px;
}

.opt-grid.cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.opt-grid.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.opt-grid.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.opt-item {
  display: grid;
  min-width: 0;
}

.opt-btn {
  position: relative;
  width: 100%;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  border-style: solid;
  border-width: var(--opt-bw, 1px);
  border-radius: var(--opt-radius);
  /* O payload pinta o card com cor translucida (#FFFFFF1A). Sobre a foto do
     especialista isso deixaria o card transparente, entao a cor do payload e
     composta sobre o fundo do tema: o tom final e identico, mas opaco. */
  background-color: var(--theme-background-color);
  background-image: linear-gradient(var(--opt-bg), var(--opt-bg));
  color: var(--opt-fg);
  border-color: var(--opt-bc);
  /* Sombra discreta da referencia — presenca sem peso. */
  box-shadow:
    0 1px 2px rgb(0 0 0 / 0.04),
    0 6px 14px -8px rgb(0 0 0 / 0.14);
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
  padding: 0;
}

@media (hover: hover) and (pointer: fine) {
  .opt-btn:hover {
    background-image: linear-gradient(var(--opt-bg-h), var(--opt-bg-h));
    color: var(--opt-fg-h);
    border-color: var(--opt-bc-h);
    transform: scale(var(--opt-scale-h, 1.01));
    box-shadow:
      0 2px 4px rgb(0 0 0 / 0.05),
      0 12px 20px -10px rgb(0 0 0 / 0.18);
  }
}

.opt-btn.is-active {
  background-image: linear-gradient(var(--opt-bg-a), var(--opt-bg-a));
  color: var(--opt-fg-a);
  border-color: var(--opt-bc-a);
  transform: scale(var(--opt-scale-a, 1.02));
}

.opt-wrap {
  display: flex;
  height: 100%;
  flex-direction: column;
}

.opt-row {
  width: 100%;
  height: 100%;
  padding: var(--opt-pad-y) var(--opt-pad-x);
  gap: 0.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: var(--theme-element-size);
}

/* Original: <div class="flex w-full items-start gap-1">
   Na lista vertical o rotulo ocupa uma linha na maioria dos cards, entao o
   alinhamento central vertical e o que casa com a referencia. */
.opt-main {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  gap: 0.25rem;
}

.opt-label {
  width: 100%;
  min-width: 0;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
}

/* Referencia: rotulo sempre a esquerda, mesmo quando o texto do payload traz
   ql-align-center. So o alinhamento muda — o conteudo e o mesmo. */
.opt-label,
.opt-label > *,
.opt-label .ql-align-center,
.opt-label .ql-align-right {
  text-align: left;
}

.opt-emoji {
  font-size: 1.6rem;
  line-height: 1;
  flex: 0 0 auto;
}

/* Miniatura a ESQUERDA nos cards horizontais (igual ao original).
   As margens negativas acompanham o padding da linha para a foto sangrar ate a
   borda do card. */
.opt-thumb {
  position: relative;
  flex: 0 0 auto;
  width: var(--opt-thumb-w, 68px);
  align-self: stretch;
  margin: calc(var(--opt-pad-y) * -1) 0 calc(var(--opt-pad-y) * -1)
    calc(var(--opt-pad-x) * -1);
  overflow: hidden;
  display: block;
  background: #fff;
}

/* Absoluta: a foto preenche a faixa lateral sem impor sua altura natural ao
   card — a linha mantem a altura compacta da referencia. */
.opt-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Card com foto precisa de um pouco mais de altura que os 56px da referencia
   para a imagem continuar legivel. */
.opt-btn:has(.opt-thumb) .opt-row {
  min-height: 5.5rem;
}

.opt-btn:has(.opt-thumb.is-wide) .opt-row {
  min-height: 6.5rem;
}

/* O payload marca transparentImage nessas etapas, mas as imagens sao fotos
   normais: o contain deixava tarja branca acima e abaixo. Cover preenche a
   faixa lateral inteira. Emojis e icones nao passam por aqui. */
.opt-thumb.is-contain img {
  object-fit: cover;
}

/* A foto ocupa o canto esquerdo do card de ponta a ponta, acompanhando o
   arredondamento da borda. */
.opt-thumb {
  align-self: stretch;
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
}

/* `stretch` existe para a MINIATURA encostar nas bordas do card (canto
   arredondado incluso). O efeito colateral e' que ele estica todos os filhos,
   entao o marcador de selecao subia junto e ficava fora do centro — medido em
   16px acima, visivel em card de duas linhas de texto. */
.opt-btn:has(.opt-thumb) .opt-row,
.opt-btn:has(.opt-thumb) .opt-wrap {
  align-items: stretch;
}

/* O marcador se centraliza sozinho, independente da altura do card e de
   quantas linhas o texto ocupar. Vale no celular e no computador. */
.opt-select {
  align-self: center;
}

/* Etapas desenhadas para capa no topo (corpo atual, partes do corpo...):
   na lista a foto continua legivel numa miniatura mais larga. */
.opt-thumb.is-wide {
  --opt-thumb-w: 104px;
}

/* Card com imagem de capa no topo. */
.opt-btn.has-cover .opt-wrap {
  flex-direction: column;
}

.opt-cover {
  flex: 0 0 auto;
  width: 100%;
  overflow: hidden;
}

.opt-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.opt-cover.aspect-4-3 {
  aspect-ratio: 4 / 3;
}

.opt-cover.aspect-1-1 {
  aspect-ratio: 1 / 1;
}

.opt-cover.aspect-16-9 {
  aspect-ratio: 16 / 9;
}

.opt-cover.aspect-auto {
  aspect-ratio: auto;
}

.opt-cover.aspect-auto img {
  height: auto;
}

.opt-cover.is-contain img {
  object-fit: contain;
}

/* Marcador de selecao. Circulo = escolha unica, quadrado = pode marcar varias.
   Borda de 2px (nao 1px): no celular o traco de 1px some e o marcador parece
   desenho de fundo em vez de algo clicavel. Mesma medida do funil feminino. */
.opt-select {
  flex: 0 0 auto;
  margin-left: auto;          /* sempre encostado na direita do card */
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  border: 2px solid #ccc;
  background: var(--theme-background-color);
  color: var(--theme-heading-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

/* Multipla escolha: quadrado. A borda ja nasce na cor do tema para sinalizar,
   antes de qualquer clique, que aquela tela aceita mais de uma resposta. */
.opt-select.is-box {
  border-radius: 4px;
  border-color: var(--theme-accent-color);
}

.opt-btn.is-active .opt-select {
  border-color: var(--theme-accent-color);
  background: var(--theme-accent-color);
  color: #fff;
}

.opt-select svg {
  width: 1rem;
  height: 1rem;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.opt-btn.is-active .opt-select svg {
  opacity: 1;
}

/* A seta dos cards de escolha foi removida em 26/08/2026 (virou marcador de
   selecao). O .opt-chevron continua, usado em outros pontos da interface. */
.opt-chevron {
  flex: 0 0 auto;
  opacity: 0.55;
  display: inline-flex;
}

/* A arte da etapa "Conhece?" tem muita margem branca em volta da figura, o que
   faz o homem parecer pequeno ao lado das opcoes.
   A figura cresce pela CAIXA, nao pelo recorte: a coluna da imagem sobe de 42%
   para 50% (o basis vem inline do payload, dai o !important) e o zoom fica no
   limite do que a moldura branca permite — a arte nunca e cortada no corpo. */
[data-step='Fg6Khd'] .layer:has(> .l-image) {
  flex-basis: 46% !important;
}

[data-step='Fg6Khd'] .layer:has(> .l-options) {
  flex-basis: 54% !important;
}

@media (min-width: 769px) {
  [data-step='Fg6Khd'] .layer:has(> .l-image),
  [data-step='Fg6Khd'] .layer:has(> .l-options) {
    flex-basis: 50% !important;
  }
}

[data-step='Fg6Khd'] .l-image .ratio-box img {
  transform: scale(1.08);
  transform-origin: 50% 55%;
}

/* Coluna estreita no mobile: card com respiro e corpo menores, para o rotulo
   nao quebrar mais linhas do que quebrava antes da imagem crescer. */
[data-step='Fg6Khd'] .opt-row {
  padding: 0.85rem 0.9rem;
}

[data-step='Fg6Khd'] .opt-label {
  font-size: 0.88rem;
  padding-left: 0;
  padding-right: 0;
}

@media (min-width: 769px) {
  [data-step='Fg6Khd'] .opt-row {
    padding: 1rem 1.25rem;
  }

  [data-step='Fg6Khd'] .opt-label {
    font-size: 1rem;
  }
}

/* =============================================================================
   Etapas com foto ao lado das opcoes (etapas 3 e 18)
   ========================================================================== */
/* O payload manda basis 42/58 e a foto ficava pequena demais no mobile. As
   classes vem do app.js; o basis inline e sobrescrito aqui. */
.layer.is-side-image {
  flex: 0 0 50% !important;
  align-self: stretch;
  display: flex;
  align-items: flex-end;
}

.layer.is-side-options {
  flex: 1 1 50% !important;
}

.layer.is-side-image .l-image,
.layer.is-side-image .ratio-box {
  width: 100%;
  height: 100%;
}

/* A foto ocupa tambem a margem lateral da pagina — mas so ate a borda da tela,
   nunca alem dela. object-fit: contain garante que ela jamais saia cortada. */
.layer.is-side-image img {
  width: calc(100% + var(--gutter) * 0.5);
  margin-left: calc(var(--gutter) * -0.5);
  height: 100%;
  max-height: 27rem;
  object-fit: contain;
  object-position: bottom center;
}

@media (min-width: 769px) {
  .layer.is-side-image {
    flex: 0 0 44% !important;
  }

  .layer.is-side-image img {
    max-height: 30rem;
  }
}

/* =============================================================================
   Especialista ancorado (canto inferior direito, atras das opcoes)
   ========================================================================== */

/* Palco relativo montado em app.js com [imagem + opcoes] da etapa. */
.spec-stage {
  position: relative;
  min-height: var(--spec-stage-h);
}

.spec-stage > .layer {
  padding: 0;
}

.layer.is-specialist {
  position: absolute;
  right: var(--spec-right);
  bottom: 0;
  width: var(--spec-w);
  height: var(--spec-h);
  z-index: 0;
  /* Nunca intercepta toque/clique das opcoes que ficam por cima. */
  pointer-events: none;
}

.layer.is-specialist .l-image {
  height: 100%;
  border-radius: 0;
  overflow: visible;
}

.layer.is-specialist .ratio-box {
  position: absolute;
  inset: 0;
  padding-bottom: 0 !important;
}

.layer.is-specialist .l-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Enquadra o especialista; a moldura clara da foto sai da tela a direita. */
  object-position: var(--spec-pos);
  /* Dissolve as bordas da foto (topo, esquerda e o corte inferior da propria
     arte) para ela nao virar um retangulo colado na tela. */
  -webkit-mask-image: linear-gradient(
      to bottom,
      transparent 0,
      #000 var(--spec-fade),
      #000 calc(100% - var(--spec-fade)),
      transparent 100%
    ),
    linear-gradient(
      to right,
      transparent 0,
      #000 var(--spec-fade),
      #000 calc(100% - var(--spec-fade-r)),
      transparent 100%
    );
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(
      to bottom,
      transparent 0,
      #000 var(--spec-fade),
      #000 calc(100% - var(--spec-fade)),
      transparent 100%
    ),
    linear-gradient(
      to right,
      transparent 0,
      #000 var(--spec-fade),
      #000 calc(100% - var(--spec-fade-r)),
      transparent 100%
    );
  mask-composite: intersect;
}

/* Lista por cima da foto, na largura da referencia. */
.is-spec-options {
  position: relative;
  z-index: 10;
}

.is-spec-options .opt-grid {
  width: var(--spec-opt-w);
  max-width: 18.75rem;
}

/* =============================================================================
   Desktop (>= 769px) — duas colunas: lista a esquerda, especialista a direita
   ========================================================================== */
@media (min-width: 769px) {
  /* Area de conteudo larga e centralizada. A coluna estreita continua valendo
     para as demais etapas; so a landing ocupa a largura toda. */
  .viewport {
    max-width: var(--container-shell-md);
  }

  .layers {
    max-width: var(--container-max);
    margin-inline: auto;
  }

  .layers.step-landing {
    max-width: none;
  }

  /* Tipografia proporcional ao monitor. */
  .step-landing .l-text .content {
    max-width: 42rem;
    margin-inline: auto;
  }

  .step-landing .content h1,
  .step-landing .content h1 strong {
    font-size: 3rem;
    line-height: 1.1;
    font-weight: 800;
  }

  .step-landing .l-text .content p,
  .step-landing .opt-intro,
  .step-landing .opt-label {
    font-size: 1.125rem;
  }

  .step-landing .opt-row {
    padding: 1.35rem 1.5rem;
  }

  /* Palco lado a lado: a imagem deixa de ser camada de fundo e vira coluna. */
  .spec-stage {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
    gap: 2rem;
    min-height: 0;
  }

  .spec-stage > .is-spec-options {
    order: 1;
    flex: 0 1 33.75rem;
    max-width: 33.75rem;
    z-index: 2;
  }

  /* Cards altos como na referencia: a pilha sobe e ocupa o espaco vazio que
     sobrava ao lado da imagem. */
  .step-landing .opt-grid {
    --opt-gap: 1rem;
  }

  .step-landing .opt-row {
    min-height: 6.5rem;
  }

  .step-landing .opt-btn {
    border-radius: 14px;
  }

  .is-spec-options .opt-grid {
    width: 100%;
    max-width: none;
  }

  /* Coluna da direita: fora do fluxo absoluto, altura fixa, 100% visivel e
     nunca atras dos botoes. */
  /* A imagem encosta nos cards: a margem negativa esconde o lado esquerdo do
     corpo (onde fica o corte reto da arte) atras da borda dos cards. */
  .spec-stage > .layer.is-specialist {
    order: 2;
    position: relative;
    right: auto;
    bottom: auto;
    flex: 0 0 auto;
    width: var(--spec-w-md);
    height: var(--spec-h-md);
    margin-left: -5rem;
    z-index: 1;
  }
}

/* =============================================================================
   Botao CTA
   ========================================================================== */
.l-button {
  display: flex;
}

.btn {
  width: 100%;
  min-height: var(--theme-element-size);
  padding: 0.75rem 1rem;
  border: 1px solid var(--btn-bc, transparent);
  border-radius: var(--btn-radius, var(--theme-rounded));
  background-color: var(--btn-bg, var(--theme-accent-color));
  color: var(--btn-fg, #fff);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  overflow-wrap: break-word;
  transition:
    background-color 0.2s ease,
    transform 0.12s ease,
    box-shadow 0.2s ease;
}

.btn:hover {
  background-color: var(--btn-bg-h, var(--btn-bg));
}

.btn:active {
  transform: scale(0.985);
}

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

.btn b,
.btn strong {
  font-weight: 700;
}

.btn-pulse {
  animation: btnPulse 1.8s ease-in-out infinite;
}

/* O pulso segue a cor do botao. O padrao herdado era verde
   (rgba(23,163,74)) e destoava do azul em todas as telas do quiz — so' a tela
   da oferta tinha um remendo proprio, que agora e' desnecessario. */
@keyframes btnPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(var(--theme-accent-rgb), 0.55);
  }
  50% {
    box-shadow: 0 0 0 14px rgba(var(--theme-accent-rgb), 0);
  }
}

/* CTA ancorado no rodape da janela nas etapas de leitura: o texto rola por
   baixo e some no gradiente, e o botao fica sempre ao alcance — sem precisar
   rolar ate o fim. Vale em qualquer largura de tela. */
.sticky-cta-wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  margin: 0;
  padding: 16px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(
    to top,
    var(--theme-background-color) 80%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: auto;
}

.sticky-cta-wrapper .l-button {
  width: 100%;
  max-width: 440px;
  margin: 0;
}

/* O botao sai do fluxo, entao o conteudo ganha folga no fim para o ultimo
   card poder ser lido por inteiro acima da barra. */
.layers:has(.sticky-cta-wrapper) {
  padding-bottom: 140px;
}

/* =============================================================================
   Alerta
   ========================================================================== */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  border-style: solid;
  border-width: var(--al-bw, 1px);
  border-radius: var(--al-radius, var(--theme-rounded));
  padding: var(--al-pad, 8px);
  background-color: var(--al-bg);
  color: var(--al-fg);
  border-color: var(--al-bc);
}

.alert .alert-body {
  flex: 1;
  min-width: 0;
  margin-top: -2px;
  padding-inline: 0.2rem;
}

.alert .alert-icon {
  flex: 0 0 auto;
  display: inline-flex;
  margin-top: 1px;
}

/* =============================================================================
   Checklist
   ========================================================================== */
.checklist {
  border-style: solid;
  border-width: var(--cl-bw, 1px);
  border-radius: var(--theme-rounded);
  padding: var(--cl-pad, 16px);
  background-color: var(--cl-bg);
  color: var(--cl-fg);
  border-color: var(--cl-bc);
  display: grid;
  gap: 0.75rem;
}

.checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.checklist-item .ck-icon {
  flex: 0 0 auto;
  font-size: 1.05rem;
  line-height: 1.35;
}

.checklist-item .ck-text {
  flex: 1;
  min-width: 0;
}

/* =============================================================================
   Loading
   ========================================================================== */
.loading-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem 0;
  text-align: center;
}

/* O payload estreita a camada do loading (basis 91%), o que fazia a headline
   quebrar em 3 linhas. Em largura cheia ela quebra igual a da outra tela. */
.layer:has(> .loading-wrap) {
  flex-basis: 100% !important;
}

.loading-title {
  font-weight: 600;
  color: var(--theme-heading-color);
  text-align: center;
}

.loading-desc {
  text-align: center;
}

.load-bar {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: var(--theme-background-soft);
  overflow: hidden;
}

.load-bar > i {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--theme-accent-color);
  border-radius: 999px;
  transition: width 0.1s linear;
}

.load-bar-pct {
  font-weight: 700;
  color: var(--theme-heading-color);
}

/* Carrossel de antes/depois da tela de analise. object-fit: contain para
   nenhuma foto aparecer com o corpo cortado, independentemente da proporcao
   do arquivo que for colocado em assets/img/. */
.ba-carousel {
  width: 100%;
  margin-top: 0.5rem;
}

.ba-stage {
  position: relative;
  width: 100%;
  max-width: 25rem;
  margin-inline: auto;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  background: var(--theme-background-soft);
}

.ba-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* O contain encolhe a foto dentro do palco, entao o clip do container nunca
     alcanca os cantos dela — o arredondamento tem que vir na propria imagem. */
  border-radius: 16px;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

.ba-img.is-on {
  opacity: 1;
}

.ba-caption {
  margin: 0.6rem 0 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--theme-text-color);
}

/* Demais fotos comparativas de antes/depois espalhadas pelo funil. */
.plano-foto,
.plano-foto img,
.carousel-slide img {
  border-radius: 16px;
  overflow: hidden;
}

/* =============================================================================
   Metric — barra de indicador (IMC, energia, metabolismo)
   ========================================================================== */
.metric {
  display: grid;
  gap: 0.4rem;
  width: 100%;
}

/* Titulo e subtitulo empilhados a esquerda (igual ao original). */
.metric-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  margin-bottom: 0.5rem;
}

.metric-title {
  font-weight: 700;
  color: var(--theme-heading-color);
}

.metric-sub {
  font-size: 0.85rem;
  opacity: 0.7;
}

.metric-track {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: var(--theme-background-soft);
}

.metric-track .mt-fill {
  position: absolute;
  inset: 0;
  border-radius: 999px;
}

.metric-track.grad .mt-fill {
  background: linear-gradient(90deg, #22c55e 0%, #fbbf24 50%, #dc2626 100%);
}

.metric-track.grad-invert .mt-fill {
  background: linear-gradient(90deg, #dc2626 0%, #fbbf24 50%, #22c55e 100%);
}

.metric-track.solid-red .mt-fill {
  background: #ef4444;
}

.metric-track.solid-green .mt-fill {
  background: #22c55e;
}

.metric-track.dotted {
  background: transparent;
  display: flex;
  gap: 4px;
}

.metric-track.dotted .mt-dot {
  flex: 1;
  height: 10px;
  border-radius: 999px;
  background: var(--theme-background-soft);
}

.metric-track.dotted.solid-red .mt-dot.on {
  background: #ef4444;
}

.metric-track.dotted.solid-green .mt-dot.on {
  background: #22c55e;
}

.metric-dot {
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  border: 3px solid var(--theme-accent-color);
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

/* O balao e ancorado por JS (--arrow aponta para o marcador) e alinhado pelo
   extremo quando o marcador esta perto da borda, para nunca vazar. */
.metric-tooltip {
  --arrow: 50%;
  position: absolute;
  bottom: calc(100% + 10px);
  background: var(--theme-heading-color);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.metric-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: var(--arrow);
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--theme-heading-color);
}

.metric-legends {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  opacity: 0.8;
  gap: 0.25rem;
}

.metric-legends span {
  flex: 1;
  text-align: center;
  min-width: 0;
}

/* =============================================================================
   Barra de urgencia no topo (so na pagina de oferta)
   ========================================================================== */
.q-urgency {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.55rem 0.9rem;
  background: #ef4444;
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  animation: urgencySlideIn 0.5s ease-out;
}

@keyframes urgencySlideIn {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.q-urgency b {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.q-urgency-icon {
  display: inline-flex;
  flex: 0 0 auto;
}

.q-urgency.is-zerado {
  background: #991b1b;
}

/* =============================================================================
   Contador de vagas
   ========================================================================== */
/* Texto corrido, sem card/fundo — so o aviso, discreto, em ambar. */
.vagas {
  margin: 0 auto;
  padding: 0;
  max-width: 27.5rem;
  color: #d97706;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
}

.vagas b {
  font-weight: 800;
}

/* pisca suave quando o numero cai — sem mover o layout */
.vagas.is-troca b {
  animation: vagasTroca 0.5s ease-out;
}

@keyframes vagasTroca {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  40% {
    opacity: 0.4;
    transform: scale(1.15);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* =============================================================================
   Card de oferta unica
   ========================================================================== */
.offer {
  background: #ffffff;
  border: 2px solid #007AFF;
  border-radius: 16px;
  padding: 24px 20px;
  text-align: center;
  box-shadow:
    0 1px 2px rgb(0 0 0 / 0.04),
    0 10px 24px -16px rgb(0 0 0 / 0.2);
}

/* 1. vagas */
.offer-vagas {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #d97706;
}

/* 2. preco riscado */
.offer-de {
  margin-top: 4px;
  font-size: 1.1rem;
  color: #64748b;
}

.offer-de s {
  color: #64748b;
}

/* 3. "por R$37,90" na mesma linha, alinhados pela baseline. */
.price-main-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin: 6px 0 10px;
}

.price-prefix {
  font-size: 1.2rem;
  font-weight: 500;
  color: #64748b;
}

.price-amount {
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1px;
  color: var(--theme-accent-color, #007AFF);
}

/* 4. data dinamica */
.offer-data {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #007AFF;
}

/* 5. pagamento unico */
.offer-sub {
  margin-top: 8px;
  font-size: 0.9rem;
  line-height: 1.4;
  color: #4b5563;
}

/* 6. selo combinado — sem divisoria horizontal */
.offer-selo {
  margin-top: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #64748b;
}

@media (min-width: 769px) {
  .price-amount {
    font-size: 3.6rem;
  }
}

/* =============================================================================
   4 bonus exclusivos — card com badge numerado + icone circular
   ========================================================================== */
.bonuses {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bonus-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #ffffff;
  border: 1.5px solid #e5e7eb;
  border-radius: 16px;
  padding: 20px;
}

.bonus-badge {
  position: absolute;
  top: -10px;
  left: -10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #007AFF;
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 800;
}

.bonus-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--theme-accent-color-100, #e2eeff);
  color: #007AFF;
}

.bonus-body {
  min-width: 0;
}

.bonus-title {
  margin: 0 0 6px;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #000000;
  text-transform: uppercase;
}

.bonus-desc {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: #4b5563;
}

@media (min-width: 769px) {
  .bonus-card {
    align-items: center;
  }
}

/* =============================================================================
   Pagina final de vendas (PVSL/oferta) — cards 16px, botoes 12px
   ========================================================================== */
[data-step='oE6633'] {
  /* .price/.checklist/.alert/.faq usam var(--theme-rounded) — redefinir aqui
     arredonda todos os cards da pagina de uma vez, sem afetar o resto do quiz. */
  --theme-rounded: 16px;
}

[data-step='oE6633'] .btn {
  --btn-radius: 12px;
  max-width: 440px;
  margin-inline: auto;
}

/* O remendo que existia aqui (pulso azul so' na tela da oferta) foi removido:
   o pulso padrao agora ja e' azul em todas as telas. */



/* Quem pediu menos movimento nao ve o pulso. */
@media (prefers-reduced-motion: reduce) {
  [data-step='oE6633'] .btn-pulse {
    animation: none;
  }
}

[data-step='oE6633'] .price {
  box-shadow:
    0 1px 2px rgb(0 0 0 / 0.04),
    0 8px 20px -14px rgb(0 0 0 / 0.18);
}

[data-step='oE6633'] .checklist {
  background: var(--theme-background-color);
  border: 1px solid #e5e7eb;
  box-shadow:
    0 1px 2px rgb(0 0 0 / 0.04),
    0 8px 20px -14px rgb(0 0 0 / 0.16);
}

[data-step='oE6633'] .checklist-item + .checklist-item {
  padding-top: 0.6rem;
  border-top: 1px solid #e5e7eb;
}

[data-step='oE6633'] .video-box {
  border-radius: 16px !important;
  overflow: hidden !important;
  margin-bottom: 24px;
}

/* Espacamentos finos pedidos: CTA 1 quase colado no aviso de vagas, e o
   aviso com folga generosa ate a proxima secao. O card de preco tambem fica
   proximo do seu proprio botao, mas com folga grande depois dele. */
[data-step='oE6633'] .vagas {
  margin-top: 12px;
  margin-bottom: 36px;
}

[data-step='oE6633'] .offer {
  margin-bottom: 16px;
}

/* CTA logo apos um card de preco: folga grande antes da proxima secao
   (as demais transicoes de secao usam os espacadores do payload, 36px). */
[data-step='oE6633'] .layer:has(> .offer) + .layer:has(> .l-button) {
  margin-bottom: 48px;
}

/* Badge azul redondo em volta do icone SVG dos bonus/cronograma. */
[data-step='oE6633'] .checklist-item {
  align-items: flex-start;
}

[data-step='oE6633'] .ck-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--theme-accent-color-100);
  color: var(--theme-accent-color);
}

/* =============================================================================
   Diagnostico "Seu perfil esta pronto"
   ========================================================================== */
.perfil {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.perfil-card {
  background: var(--theme-background-color);
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 1.1rem 1.15rem;
  box-shadow:
    0 1px 2px rgb(0 0 0 / 0.04),
    0 8px 20px -14px rgb(0 0 0 / 0.16);
}

.perfil-titulo {
  /* espaco suficiente para o marcador "Voce - IMC" caber acima da escala */
  margin: 0 0 2.6rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--theme-heading-color);
}

/* --- regua do IMC --------------------------------------------------------- */
.imc-topo {
  position: relative;
  height: 0;
}

.imc-marcador {
  position: absolute;
  bottom: 0.35rem;
  transform: translateX(-50%);
  white-space: nowrap;
}

.imc-marcador span {
  display: inline-block;
  background: #111827;
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.3rem 0.6rem;
  border-radius: 7px;
}

/* setinha do marcador apontando para a barra */
.imc-marcador::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #111827;
}

.imc-escala {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--theme-text-color);
  margin-bottom: 0.35rem;
}

.imc-barra {
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #60a5fa 0%,
    #22c55e 33%,
    #eab308 62%,
    #ef4444 100%
  );
}

.imc-ponto {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: var(--theme-background-color);
  border: 2px solid #111827;
}

.imc-legendas {
  display: flex;
  justify-content: space-between;
  gap: 0.25rem;
  margin-top: 0.5rem;
  font-size: 0.66rem;
  letter-spacing: 0.02em;
  color: var(--theme-text-color);
}

.imc-legenda.is-on {
  font-weight: 700;
  color: var(--theme-heading-color);
}

/* --- alerta de bloqueio --------------------------------------------------- */
.perfil-alerta {
  background: #fff5f5;
  border: 1px solid #fed7d7;
  border-radius: 12px;
  padding: 1rem 1.05rem;
}

.perfil-alerta-titulo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.4rem;
  font-size: 1rem;
  font-weight: 700;
  color: #c53030;
}

.perfil-alerta-titulo svg {
  flex: 0 0 auto;
}

.perfil-alerta-texto {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: #c53030;
}

/* --- card unico com as tres leituras -------------------------------------- */
.perfil-linhas {
  padding: 0.25rem 1.15rem;
}

.perfil-linha {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 0;
}

.perfil-linha + .perfil-linha {
  border-top: 1px solid #e5e7eb;
}

.perfil-icone {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--theme-text-color);
}

.perfil-dado {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.perfil-rotulo {
  font-size: 0.85rem;
  color: var(--theme-text-color);
}

.perfil-valor {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--theme-heading-color);
}

@media (min-width: 769px) {
  .perfil-titulo {
    font-size: 1.15rem;
  }

  .perfil-valor {
    font-size: 1.1rem;
  }
}

/* =============================================================================
   Previa do plano — comparativo "Agora x Seu objetivo"
   ========================================================================== */
.plano {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.plano-card {
  background: var(--theme-background-color);
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 1rem;
  box-shadow:
    0 1px 2px rgb(0 0 0 / 0.04),
    0 8px 20px -14px rgb(0 0 0 / 0.16);
}

.plano-colunas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
}

.plano-cabecalho {
  text-align: center;
  font-size: 0.95rem;
  color: var(--theme-text-color);
  margin-bottom: 0.6rem;
}

.plano-foto {
  border-radius: 12px;
  overflow: hidden;
  background: var(--theme-background-soft);
}

.plano-foto img {
  display: block;
  width: 100%;
  height: auto;
}

.plano-dados {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid #e5e7eb;
}

.plano-rotulo {
  margin: 0.7rem 0 0.1rem;
  font-size: 0.8rem;
  color: var(--theme-accent-color);
}

.plano-col > .plano-rotulo:first-child {
  margin-top: 0;
}

.plano-valor {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--theme-heading-color);
  line-height: 1.25;
}

.plano-valor.is-alvo {
  color: var(--theme-accent-color);
}

/* mini-barra de 3 segmentos do nivel de treino */
.plano-barras {
  display: flex;
  gap: 0.25rem;
  margin-top: 0.6rem;
}

.plano-barra {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--theme-background-soft);
}

.plano-barra.is-on {
  background: var(--theme-accent-color);
}

/* --- caixas de mensagem --------------------------------------------------- */
.plano-aviso {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  border-radius: 12px;
  padding: 0.9rem 1rem;
}

.plano-aviso p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
}

.plano-aviso-icone {
  flex: 0 0 auto;
  display: inline-flex;
  margin-top: 0.1rem;
}

.plano-aviso.is-foco {
  background: #f0f7ff;
  border: 1px solid #bae6fd;
  color: var(--theme-heading-color);
}

.plano-aviso.is-foco .plano-aviso-icone,
.plano-aviso.is-foco strong {
  color: var(--theme-accent-color);
}

.plano-aviso.is-data {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: var(--theme-text-color);
}

.plano-aviso.is-data .plano-aviso-icone {
  color: #64748b;
}

.plano-selo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 0.15rem 0 0;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--theme-text-color);
  text-align: center;
}

.plano-selo svg {
  flex: 0 0 auto;
  color: var(--theme-accent-color);
}

@media (min-width: 769px) {
  .plano-card {
    padding: 1.25rem;
  }

  .plano-valor {
    font-size: 1.1rem;
  }
}

/* =============================================================================
   Graphics — aneis de percentual
   ========================================================================== */
.graphics {
  display: grid;
  gap: 1rem;
  width: 100%;
}

.graphics.cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.graphics.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.graphics.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.graphic-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

/* O anel encolhe junto com a coluna, sem estourar no mobile. */
.graphic-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 110px;
}

.graphic-ring svg {
  transform: rotate(-90deg);
  width: 100%;
  height: auto;
  display: block;
}

.graphic-ring .gr-track {
  stroke: var(--theme-background-soft);
}

.graphic-ring .gr-pct {
  position: absolute;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--theme-heading-color);
}

/* =============================================================================
   Charts — linha cartesiana (previsao de peso)
   Ocupa a largura total e nunca vaza: o viewBox ja reserva espaco interno
   para os badges, entao o SVG pode ser recortado com seguranca.
   ========================================================================== */
.chart-box {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.chart-box svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  overflow: hidden;
}

.chart-tip {
  font-size: 11px;
  font-weight: 700;
  fill: #fff;
}

.chart-tip-bg {
  fill: var(--theme-heading-color);
}

.chart-axis-label {
  font-size: 11px;
  font-weight: 500;
  fill: var(--theme-text-color);
}

/* =============================================================================
   Grafico de evolucao — SVG animado (etapa "evolucao do seu corpo")
   ========================================================================== */
.evo-chart {
  width: 100%;
  max-width: 440px;
  margin-inline: auto;
  padding: 0.5rem 0.25rem;
  background: var(--theme-background-color);
  border: 1px solid var(--theme-border-color-xs);
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgb(0 0 0 / 0.04),
    0 8px 20px -12px rgb(0 0 0 / 0.18);
}

.evo-chart svg {
  display: block;
  width: 100%;
  height: auto;
}

.evo-title {
  font-size: 12px;
  font-weight: 600;
  fill: var(--theme-heading-color);
}

.evo-line {
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Area verde: sobe de 0 para 0.25 quando o traçado comeca. */
.evo-area {
  opacity: 0;
  transition: opacity 0.8s ease-out 0.3s;
}

.is-drawn .evo-area {
  opacity: 0.25;
}

/* Pontos e selos entram no fim do traçado, com fade + scale. */
.evo-reveal {
  opacity: 0;
  transform: scale(0.86);
  transform-box: fill-box;
  transform-origin: center;
  transition:
    opacity 0.35s ease-out 1.45s,
    transform 0.35s ease-out 1.45s;
}

.is-drawn .evo-reveal {
  opacity: 1;
  transform: scale(1);
}

.evo-tag {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  fill: #ffffff;
}

.evo-voce {
  font-size: 11px;
  font-weight: 700;
  fill: var(--theme-heading-color);
}

/* Pulso continuo no ponto verde, so depois do traçado. */
.evo-pulse {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.is-drawn .evo-pulse {
  animation: evoPulse 2s ease-out 1.8s infinite;
}

@keyframes evoPulse {
  0% {
    transform: scale(0.7);
    opacity: 0.5;
  }
  70%,
  100% {
    transform: scale(2.1);
    opacity: 0;
  }
}

/* Quem pediu menos movimento ve o grafico pronto, sem animacao. */
@media (prefers-reduced-motion: reduce) {
  .evo-area,
  .evo-reveal {
    transition: none;
    opacity: 1;
    transform: none;
  }

  .evo-area {
    opacity: 0.25;
  }

  .is-drawn .evo-pulse {
    animation: none;
  }
}

/* =============================================================================
   Arguments — cards imagem + texto
   ========================================================================== */
.arguments {
  display: grid;
  gap: 0.75rem;
  width: 100%;
}

.arguments.cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.arguments.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.arguments.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.argument-item {
  border: 1px solid var(--theme-border-color-xs);
  border-radius: var(--theme-rounded);
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.argument-item .arg-img {
  width: 100%;
  overflow: hidden;
}

.argument-item .arg-img.aspect-1-1 {
  aspect-ratio: 1 / 1;
}

.argument-item .arg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Sem proporcao fixa a imagem mantem a razao natural (nao distorce). */
.argument-item .arg-img:not(.aspect-1-1) img {
  height: auto;
  object-fit: contain;
}

.argument-item .arg-text {
  padding: 0.75rem;
}

/* =============================================================================
   Carousel
   ========================================================================== */
.carousel {
  position: relative;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.carousel-track {
  display: flex;
  transition: transform 0.45s ease;
  will-change: transform;
}

.carousel-slide {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
}

.carousel-slide img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  border-radius: var(--theme-rounded);
}

.carousel.has-border .carousel-slide img {
  border: 1px solid var(--theme-border-color-xs);
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 0.6rem;
}

.carousel-dots i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.2);
  display: block;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    width 0.2s ease;
}

.carousel-dots i.on {
  background: var(--theme-accent-color);
  width: 18px;
}

/* =============================================================================
   Price — plano selecionavel + checkout
   ========================================================================== */
.price {
  position: relative;
  border: var(--pr-bw, 1px) solid var(--pr-bc, var(--theme-border-color-xs));
  border-radius: var(--theme-rounded);
  padding: 0.85rem;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

.price:hover {
  border-color: var(--theme-accent-color);
}

.price.is-selected {
  border-color: var(--theme-accent-color);
  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.18);
  background: var(--theme-accent-color-50);
}

.price-radio {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  border: 2px solid #cbd5e1;
  display: inline-grid;
  place-items: center;
  transition: border-color 0.2s ease;
}

.price.is-selected .price-radio {
  border-color: var(--theme-accent-color);
}

.price-radio i {
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 999px;
  background: var(--theme-accent-color);
  transform: scale(0);
  transition: transform 0.15s ease;
  display: block;
}

.price.is-selected .price-radio i {
  transform: scale(1);
}

.price-main {
  flex: 1;
  min-width: 0;
}

.price-side {
  flex: 0 0 auto;
  text-align: right;
  line-height: 1.15;
}

.price-before,
.price-after {
  font-size: 0.7rem;
  opacity: 0.8;
  display: block;
}

.price-value {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--theme-heading-color);
  display: block;
}

.price-badge {
  position: absolute;
  top: -0.6rem;
  right: 0.75rem;
  background: var(--theme-accent-color);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
}

/* =============================================================================
   Timer
   ========================================================================== */
.timer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--tm-bc);
  background: var(--tm-bg);
  color: var(--tm-fg);
  border-radius: var(--theme-rounded);
  padding: var(--tm-pad, 10px);
}

.timer-digits {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-variant-numeric: tabular-nums;
}

.timer-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.timer-unit b {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
}

.timer-unit span {
  font-size: 0.6rem;
  text-transform: uppercase;
  opacity: 0.8;
  letter-spacing: 0.04em;
}

.timer-sep {
  font-size: 1.25rem;
  font-weight: 800;
  opacity: 0.5;
}

/* =============================================================================
   Quotes — depoimentos
   ========================================================================== */
.quotes {
  display: grid;
  gap: 0.75rem;
}

.quote {
  border: 1px solid var(--theme-border-color-xs);
  border-radius: var(--theme-rounded);
  background: #fff;
  padding: 0.85rem;
  box-shadow:
    0 4px 6px -1px rgb(0 0 0 / 0.1),
    0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.quote-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.quote-avatar {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  object-fit: cover;
  object-position: center;
  flex: 0 0 auto;
}

.quote-name {
  font-weight: 700;
  color: var(--theme-heading-color);
  font-size: 0.92rem;
}

.quote-stars {
  color: #f5a623;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
}

.quote-text {
  font-size: 0.92rem;
  line-height: 1.45;
}

/* =============================================================================
   FAQ
   ========================================================================== */
.faq {
  display: grid;
  gap: 0.5rem;
}

.faq-item {
  border: 1px solid var(--theme-border-color-xs);
  border-radius: var(--theme-rounded);
  overflow: hidden;
  background: #fff;
}

.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--theme-heading-color);
  text-align: left;
  font-family: inherit;
}

.faq-chevron {
  flex: 0 0 auto;
  transition: transform 0.25s ease;
}

.faq-item.open .faq-chevron {
  transform: rotate(180deg);
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.3s ease,
    padding 0.3s ease;
  padding: 0 0.85rem;
  font-size: 0.92rem;
}

.faq-item.open .faq-a {
  padding-bottom: 0.85rem;
}

/* =============================================================================
   Entradas numericas (altura / peso)
   ========================================================================== */
.metric-input {
  display: grid;
  gap: 0.6rem;
  justify-items: center;
  width: 100%;
}

/* Alternador de unidade (kg/lb, cm/pol) */
.mi-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 10px;
  background: #eef0f3;
}

.mi-unit-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  min-width: 3.25rem;
  padding: 0.35rem 0.9rem;
  border-radius: 8px;
  background: transparent;
  color: #9aa1ab;
  font-size: 0.95rem;
  font-weight: 700;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.mi-unit-btn.on {
  background: var(--theme-accent-color);
  color: #fff;
}

/* Valor em destaque */
.mi-display {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px;
  color: var(--theme-heading-color);
}

.mi-display b {
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
}

.mi-display span {
  font-size: 1.05rem;
  font-weight: 700;
}

/* Fita de marcações */
.mi-ruler {
  position: relative;
  width: 100%;
  height: 74px;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
  border-bottom: 1px solid #e6e8eb;
}

.mi-ruler.dragging {
  cursor: grabbing;
}

.mi-ticks {
  position: absolute;
  inset: 0 0 auto 0;
  height: 34px;
}

.mi-ticks i {
  position: absolute;
  top: 10px;
  width: 1px;
  height: 12px;
  background: #c8ccd2;
  transform: translateX(-50%);
}

.mi-ticks i.big {
  top: 4px;
  height: 24px;
  width: 2px;
  background: #aeb4bc;
}

.mi-tick-labels {
  position: absolute;
  top: 38px;
  left: 0;
  right: 0;
  height: 18px;
}

.mi-tick-labels span {
  position: absolute;
  transform: translateX(-50%);
  font-size: 0.85rem;
  color: #9aa1ab;
}

/* Agulha central + ponteiro */
.mi-needle {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--theme-accent-color);
  transform: translateX(-50%);
  border-radius: 2px;
}

.mi-needle::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 11px solid var(--theme-accent-color);
}

.mi-hint {
  font-size: 0.82rem;
  color: #9aa1ab;
}

/* =============================================================================
   Video
   ========================================================================== */
.video-box {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  overflow: hidden;
}

.video-box.ratio-mobile {
  max-width: 400px;
}

/* =============================================================================
   Respiro lateral dos titulos (px-2)
   Frases longas quebram com mais harmonia no mobile. Token isolado: zere
   --title-gutter para voltar a geometria exata do original.
   ========================================================================== */
:root {
  --title-gutter: 0.5rem;
}

.content h1,
.content h2,
.content h3,
.content h4 {
  padding-inline: var(--title-gutter);
}