@import url("https://fonts.googleapis.com/css2?family=Anton&family=Poppins:wght@400;600;700;900&display=swap");

/* ============================================================================
   CALISTENIA ES — style.css
   Réplica fiel do funil PT (calisteniaasiaticavslbr.lovable.app) em CSS puro.
   Origem dos valores: extraido/fonte/calistenia.css (tokens :root shadcn),
   extraido/fonte/calistenia.html (CSS crítico/header) e as classes Tailwind
   lidas dos bundles (calistenia-app.js / calistenia-bundle.js), convertidas
   1:1 para px/rem. Screenshots em extraido/telas/ usados para conferência.

   Sem Tailwind, sem build, sem dark mode (o original nunca ativa .dark).
   Mobile-first. Todo componente usa hsl(var(--token)).

   ÍNDICE
     1. Tokens
     2. Reset + base
     3. Shell: .app / .header / .badge / .progress
     4. Tela: .screen / títulos / .legal
     5. Opções: .opts / .opt-list / .opt-grid / .opt / .checkbox
     6. Tela 1 (hero com foto sangrando à direita)
     7. CTA (botão primário + barra fixa no rodapé)
     8. Régua arrastável (telas 16/17/18) + toggle de unidade
     9. IMC: .imc-box (tela 17) / .imc-gauge (tela 31)
    10. .alert-box (alerta metabólico, tela 31)
    11. .profile-grid (tela 31)
    12. .chart (telas 28 e 30)
    13. .loading (tela 29)
    14. .compare (tela 34) + notas + .badge-metodo
    15. .offer (tela 35)
    16. Utilitários, sombras e animações
    17. Ajustes >= 768px
   ========================================================================= */


/* ============================================================================
   1. TOKENS — valores EXATOS do :root original (formato shadcn: "H S% L%",
      sem hsl(), para permitir hsl(var(--x) / alpha)).
   ========================================================================= */
:root {
  /* base */
  --background: 0 0% 98%;
  --foreground: 220 13% 18%;
  --card: 0 0% 100%;
  --card-foreground: 220 13% 18%;
  --popover: 0 0% 100%;
  --popover-foreground: 220 13% 18%;

  /* marca */
  --primary: 340 60% 55%;              /* #d14775 */
  --primary-foreground: 0 0% 100%;
  --secondary: 220 14% 96%;
  --secondary-foreground: 220 13% 18%;
  --muted: 220 14% 96%;
  --muted-foreground: 220 9% 46%;
  --accent: 340 60% 95%;
  --accent-foreground: 340 60% 45%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 100%;

  /* bordas / foco / raio */
  --border: 220 13% 91%;
  --input: 220 13% 91%;
  --ring: 340 60% 55%;
  --radius: 0.75rem;

  /* paleta do quiz */
  --quiz-pink: 340 60% 55%;
  --quiz-pink-light: 340 60% 95%;
  --quiz-green: 142 71% 45%;
  --quiz-orange: 25 95% 53%;
  --quiz-blue: 210 100% 50%;
  --quiz-gray: 220 9% 46%;
  --quiz-gray-light: 220 14% 96%;

  /* barra de progresso */
  --progress-bg: 220 14% 90%;
  --progress-fill: 340 60% 55%;

  /* faixas de IMC */
  --bmi-underweight: 210 100% 50%;
  --bmi-normal: 142 71% 45%;
  --bmi-overweight: 25 95% 53%;
  --bmi-obese: 0 84% 60%;

  /* ---- derivados da réplica (não existiam como token no original) ---- */
  --logo-pink: #d64d7a;                /* cor literal do logo no CSS crítico  */
  --container: 28rem;                  /* max-w-md = 448px (wrapper de conteúdo) */
  --app-max: 480px;                    /* trava do app em telas grandes        */
  --step1-btn: #f5f5f5;                /* bg-[#f5f5f5] dos botões da tela 1    */
  --step1-btn-hover: #ebebeb;
  --shadow: 0 2px 8px #00000014;       /* .quiz-shadow                         */
  --shadow-lg: 0 4px 20px #0000001a;   /* .quiz-shadow-lg                      */
  --red-50: #fef2f2;                   /* caixa do alerta metabólico           */
  --red-200: #fecaca;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --red-700: #b91c1c;
  --green-500: #22c55e;
  --orange-500: #f97316;
  --orange-600: #ea580c;
  --blue-100: #dbeafe;
  --blue-600: #2563eb;
}


/* ============================================================================
   2. RESET + BASE  (idêntico ao CSS crítico inline do original)
   ========================================================================= */
*,
*::before,
*::after { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: none;
}

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

/* Sem barras de rolagem visíveis (mobile-first) e sem scroll horizontal */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { width: 0; height: 0; display: none; }
html, body { overflow-x: hidden; max-width: 100%; }
img { height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

a { color: inherit; }

::selection { background: hsl(var(--primary) / 0.2); }

:focus-visible {
  outline: 2px solid hsl(var(--ring) / 0.5);
  outline-offset: 2px;
}


/* ============================================================================
   3. SHELL — .app / .header / .badge / .progress
      Original: div.h-screen.bg-background.flex.flex-col.overflow-hidden
                > header + progress + main.flex-1.overflow-y-auto
      Aqui .screen faz o papel do <main> rolável (ver bloco 4).
   ========================================================================= */
.app {
  width: 100%;
  max-width: var(--app-max);
  margin-inline: auto;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: hsl(var(--background));
  position: relative;
}

/* A tela 35 (oferta) é a única que rola a página inteira, não só o main. */
.app.is-offer { height: auto; min-height: 100dvh; overflow: visible; }

/* --- header: logo Anton + selo ------------------------------------------- */
.header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;                       /* gap-1.5 */
  padding: 0.75rem 1rem;               /* px-4 py-3 */
  background: hsl(var(--card));
  flex-shrink: 0;
}

.header-logo,
.header .logo {
  font-family: "Anton", system-ui, sans-serif;
  font-weight: 400;
  font-size: 1.875rem;                 /* text-3xl */
  line-height: 1;
  letter-spacing: 0.025em;             /* tracking-wide */
  color: hsl(var(--primary));
}

/* selo "by RiseMe" — text-xs bg-muted px-2 py-0.5 rounded text-muted-foreground */
.badge {
  font-size: 0.75rem;
  line-height: 1rem;
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  white-space: nowrap;
}

/* botão voltar (absolute left-4 p-2, hover bg-muted) */
.header-back,
.header .back {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  padding: 0.5rem;
  border-radius: 0.5rem;
  color: hsl(var(--foreground));
  display: inline-flex;
  transition: background-color 0.15s;
}
.header-back:hover,
.header .back:hover { background: hsl(var(--muted)); }
.header-back svg,
.header .back svg { width: 24px; height: 24px; stroke-width: 2; }

/* --- barra de progresso: w-full h-1 bg-muted + fill bg-primary ----------- */
.progress {
  width: 100%;
  height: 0.25rem;                     /* h-1 */
  background: hsl(var(--progress-bg));
  flex-shrink: 0;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0;
  background: hsl(var(--progress-fill));
  transition: width 0.5s cubic-bezier(0, 0, 0.2, 1);   /* duration-500 ease-out */
}


/* ============================================================================
   4. TELA — .screen é o container rolável de cada passo.
      Padding padrão do original: px-4 py-6 (algumas telas usam py-4/py-2;
      use os modificadores .is-tight / .is-flush quando precisar).
   ========================================================================= */
.screen {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1rem;                /* py-6 px-4 */
}
.screen.is-tight  { padding: 1rem; }        /* py-4 px-4  (telas 16/17/18) */
.screen.is-flush  { padding: 0.5rem 0.75rem; } /* py-2 px-3 (tela 31)      */
.screen.is-center { justify-content: center; }
/* espaço para a barra fixa do CTA não cobrir conteúdo (pb-24) */
.screen.has-cta   { padding-bottom: 6rem; }
.screen.has-cta-lg{ padding-bottom: 8rem; }

/* wrapper interno max-w-md mx-auto (448px) presente em quase toda tela */
.screen-inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}
/* tela 10 usa max-w-4xl; aqui o app já está travado em 480px */
.screen-inner.is-wide { max-width: 56rem; }

/* --- tipografia das telas ------------------------------------------------ */

/* h1 padrão: text-xl md:text-2xl font-bold text-center mb-6 */
.screen-title {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
  text-align: center;
  color: hsl(var(--foreground));
  margin-bottom: 1.5rem;
}
/* quando existe subtítulo logo abaixo, o original usa mb-1 no título */
.screen-title:has(+ .screen-sub) { margin-bottom: 0.25rem; }
.screen-title.is-tight { margin-bottom: 0.25rem; }
.screen-title .hl,
.screen-title strong,
.screen-title b { color: hsl(var(--primary)); font-weight: 700; }

/* subtítulo/apoio: text-muted-foreground mb-6 text-center */
.screen-sub {
  font-size: 1rem;
  line-height: 1.5rem;
  color: hsl(var(--muted-foreground));
  text-align: center;
  margin-bottom: 1.5rem;
}
.screen-sub.is-sm { font-size: 0.875rem; line-height: 1.625; }

/* linha acima do título. Na tela 1 é a manchete grande do programa
   (contrato de copy chama de "pre"); nas outras é um selo pequeno. */
.screen-pre {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: hsl(var(--muted-foreground));
  margin-bottom: 0.5rem;
}

/* parágrafo corrido das telas informativas (2,4,9,15,27,28) */
.screen-text {
  font-size: 0.875rem;
  line-height: 1.625;                  /* leading-relaxed */
  color: hsl(var(--muted-foreground));
  margin-bottom: 1.5rem;
}
.screen-text strong,
.screen-text b { color: hsl(var(--foreground)); font-weight: 700; }

/* imagem cheia das telas informativas (rounded-2xl + sombra grande) */
.screen-img {
  width: 100%;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  margin-bottom: 1.5rem;
  background: hsl(var(--muted));
}
.screen-img img { width: 100%; height: auto; object-fit: cover; }

/* --- rodapé legal da tela 1 --------------------------------------------- */
.legal {
  padding: 1rem;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1.25rem;
  color: hsl(var(--muted-foreground));
  margin-top: auto;
}
.legal a {
  text-decoration: underline;
  margin-inline: 0.125rem;
  transition: color 0.15s;
}
.legal a:hover { color: hsl(var(--foreground)); }


/* ============================================================================
   5. OPÇÕES
      .opts      → pilha vertical (space-y-3 do original)
      .opt-list  → 1 coluna  (telas 7, 8, 11, 13, 20, 24, 25, 26 …)
      .opt-grid  → 2 colunas com imagem grande (tela 10)
      .opt       → botão base:
        w-full rounded-xl bg-card border-2 flex items-center gap-3
        quiz-shadow hover:quiz-shadow-lg active:scale-[0.98]
        p-4 (sem imagem) | p-2 (com imagem)
        selecionado → border-primary bg-accent
   ========================================================================= */
.opts,
.opt-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;                        /* space-y-3 */
  width: 100%;
}

.opt-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  width: 100%;
}

.opt {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-align: left;
  padding: 1rem;                       /* p-4 */
  border-radius: 0.75rem;              /* rounded-xl */
  background: hsl(var(--card));
  border: 2px solid transparent;
  box-shadow: var(--shadow);
  transition: box-shadow 0.2s, border-color 0.2s, background-color 0.2s,
              transform 0.2s;
}
.opt:hover { box-shadow: var(--shadow-lg); border-color: hsl(var(--muted-foreground) / 0.2); }
.opt:active { transform: scale(0.98); }

/* estado selecionado */
.opt.is-selected,
.opt[aria-pressed="true"],
.opt[aria-checked="true"] {
  border-color: hsl(var(--primary));
  background: hsl(var(--accent));
}

/* linhas com miniatura usam p-2 (a imagem encosta na borda) */
.opt:has(.opt-img) { padding: 0.5rem; }

/* --- miniatura 64x64 (lista) -------------------------------------------- */
.opt-img {
  width: 4rem;
  height: 4rem;
  flex-shrink: 0;
  border-radius: 0.5rem;               /* rounded-lg — componente genérico  */
  overflow: hidden;
  background: hsl(var(--muted));
}
/* telas 11 e 12 usam botão próprio com rounded-xl na miniatura */
.opt-img.is-xl { border-radius: 0.75rem; }
.opt-img img { width: 100%; height: 100%; object-fit: cover; }

/* emoji (telas 14, 21, 22, 23, 25, 26) — text-2xl */
.opt-emoji {
  font-size: 1.5rem;
  line-height: 2rem;
  flex-shrink: 0;
}

/* ícone lucide em caixinha (telas 5, 6, 12, 32, 33) */
.opt-icon {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: 0.5rem;
  background: hsl(var(--muted));
  color: hsl(var(--primary));
  display: flex;
  align-items: center;
  justify-content: center;
}
.opt-icon svg { width: 1.25rem; height: 1.25rem; }

/* rótulo + descrição */
.opt-label {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  font-weight: 600;
  color: hsl(var(--foreground));
}
.opt-desc {
  display: block;
  margin-top: 0.125rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  color: hsl(var(--muted-foreground));
}
/* se .opt-desc for irmão de .opt-label (e não filho), mantém a coluna */
.opt > .opt-label + .opt-desc { flex-basis: 100%; }

/* seta ">" (single choice) */
.opt-arrow {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  color: hsl(var(--muted-foreground));
}

/* --- checkbox das telas multi (w-6 h-6 rounded-md border-2) -------------- */
.checkbox {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  border-radius: 0.375rem;             /* rounded-md → parece "quadrado redondo" */
  border: 2px solid hsl(var(--muted-foreground) / 0.3);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s, border-color 0.15s;
}
.checkbox svg { width: 1rem; height: 1rem; color: hsl(var(--primary-foreground)); opacity: 0; }
.opt.is-selected .checkbox,
.opt[aria-pressed="true"] .checkbox,
.opt[aria-checked="true"] .checkbox,
.checkbox.is-checked {
  background: hsl(var(--primary));
  border-color: hsl(var(--primary));
}
.opt.is-selected .checkbox svg,
.opt[aria-pressed="true"] .checkbox svg,
.opt[aria-checked="true"] .checkbox svg,
.checkbox.is-checked svg { opacity: 1; }

/* toggle "Melhorar o corpo inteiro" (tela 7) — switch pill acima da lista */
.opt-toggle {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.opt-toggle-track {
  width: 2.75rem;
  height: 1.5rem;
  border-radius: 9999px;
  background: hsl(var(--muted-foreground) / 0.25);
  position: relative;
  flex-shrink: 0;
  transition: background-color 0.2s;
}
.opt-toggle-track::after {
  content: "";
  position: absolute;
  top: 0.1875rem;
  left: 0.1875rem;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 9999px;
  background: #fff;
  box-shadow: 0 1px 2px #0000001f;
  transition: transform 0.2s;
}
.opt-toggle.is-on .opt-toggle-track { background: hsl(var(--primary)); }
.opt-toggle.is-on .opt-toggle-track::after { transform: translateX(1.25rem); }
.opt-toggle-label { font-size: 1rem; color: hsl(var(--foreground)); }

/* --- cartão da grade de 2 colunas (tela 10) ----------------------------- */
.opt-grid .opt {
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0.75rem;                    /* p-3 */
  border-radius: 1rem;                 /* rounded-2xl */
  text-align: center;
}
.opt-grid .opt .opt-img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  min-height: 120px;
  border-radius: 0.75rem;
  margin-bottom: 0.75rem;
}
.opt-grid .opt .opt-img img { object-position: top; }
.opt-grid .opt .opt-label { flex: 0 0 auto; text-align: center; font-size: 0.875rem; }
.opt-grid .opt .opt-arrow { display: none; }


/* ============================================================================
   6. TELA 1 — hero: manchete grande, foto sangrando à direita, botões a 70%
      Original: h1 text-[1.7rem] leading-tight; imagem absolute
      right:-180px top:20px w:420px h:560px; botões bg-[#f5f5f5] px-5 py-4.
   ========================================================================= */
/* is-hero (tela 1) e is-sidefig (telas 3/12/22): cabem na viewport, sem scroll.
   A foto sangra no canto inferior direito e escala pela ALTURA disponível. */
.screen.is-hero,
.screen.is-sidefig {
  overflow: hidden;
  position: relative;
  justify-content: flex-start;
  padding: 1rem 1rem 1.25rem;
}

.screen.is-hero .screen-head {
  text-align: center;
  margin-bottom: 1rem;
  position: relative;
  z-index: 10;
}

/* na tela 1 o "pre" é a manchete do programa (1.7rem) */
.screen.is-hero .screen-pre {
  font-size: 1.7rem;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  color: hsl(var(--foreground));
  margin-bottom: 0;
}
.screen.is-hero .screen-pre .hl,
.screen.is-hero .screen-pre strong { color: hsl(var(--primary)); }

.screen.is-hero .screen-sub {
  margin: 0.5rem 0 0;
  font-size: 1rem;
}

/* a pergunta ("¿Cuántos años tienes?") é o título, em negrito e pequeno */
.screen.is-hero .screen-title {
  margin: 0.75rem 0 0;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  color: hsl(var(--foreground));
}

/* wrap ocupa o espaço restante da tela; a foto se ancora no fundo dele */
.hero-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  margin-top: 0.5rem;
}
/* tela 1: foto recortada (fundo transparente), escala pela altura e sangra à direita */
.screen.is-hero .hero-img {
  position: absolute;
  right: -6%;
  bottom: 0;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
}
.screen.is-hero .hero-img img {
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: bottom right;
}
/* telas 3/12/22: janela fixa à direita com a foto "coberta" e focada na mulher */
.screen.is-sidefig .hero-img {
  position: absolute;
  right: 0;
  bottom: 0;
  top: 0;
  width: 52%;
  z-index: 0;
  pointer-events: none;
}
.screen.is-sidefig .hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}
/* botões ficam na coluna esquerda, por cima da foto */
.screen.is-hero .hero-wrap .opts { position: relative; z-index: 10; width: 60%; }
.screen.is-sidefig .hero-wrap .opts { position: relative; z-index: 10; width: 56%; }

/* botões de idade: 70% da largura, cinza #f5f5f5, seta à direita */
.screen.is-hero .opt {
  background: var(--step1-btn);
  border-color: transparent;
  box-shadow: none;
  padding: 1rem 1.25rem;               /* px-5 py-4 */
  font-size: 1rem;
  font-weight: 600;
  justify-content: space-between;
  min-height: 56px;
}
.screen.is-hero .opt:hover { background: var(--step1-btn-hover); box-shadow: none; }

/* legal da tela 1: fica no rodapé, por cima da foto, sem empurrar scroll */
.screen.is-hero .legal {
  position: relative;
  z-index: 10;
  flex-shrink: 0;
  margin-top: 0.5rem;
}
/* telas 3/12/22 usam o título normal (grande), não o reduzido da tela 1 */
.screen.is-sidefig .screen-title { font-size: 1.25rem; line-height: 1.75rem; }
.hero-spacer { display: none; }

/* grade 2 colunas de texto (tela 23: opções curtas sob a foto) */
.opts.is-grid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.opts.is-grid2 .opt { justify-content: flex-start; }
.opts.is-grid2 .opt-arrow { display: none; }


/* ============================================================================
   7. CTA — botão primário largo. Original:
      w-full py-4 px-6 rounded-xl font-semibold text-base
      bg-primary text-primary-foreground hover:bg-primary/90
      active:scale-[0.98] disabled:opacity-50
      A barra fixa do rodapé é: fixed bottom-0 p-4 z-50 > max-w-md mx-auto
   ========================================================================= */
.cta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  border-radius: 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  transition: background-color 0.2s, transform 0.2s, opacity 0.2s;
}
.cta:hover { background: hsl(var(--primary) / 0.9); }
.cta:active { transform: scale(0.98); }
.cta:disabled,
.cta.is-disabled,
.cta[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.cta:disabled:hover { background: hsl(var(--primary)); }

/* variantes usadas em 2 ou 3 telas */
.cta.is-lg   { padding: 1.5rem; text-transform: uppercase; letter-spacing: 0.025em; }
.cta.is-caps { text-transform: uppercase; }
.cta.is-secondary {
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
}
.cta.is-secondary:hover { background: hsl(var(--secondary) / 0.8); }
.cta.is-outline {
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  border: 2px solid hsl(var(--border));
}
.cta.is-outline:hover { background: hsl(var(--muted)); }

/* barra fixa no rodapé (acompanha a trava de 480px do .app) */
.cta-bar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--app-max);
  padding: 1rem;
  padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 50;
}
.cta-bar > * { max-width: var(--container); margin-inline: auto; }
/* algumas telas põem fundo sólido na barra (tela 9) */
.cta-bar.is-solid { background: hsl(var(--background)); }

/* atalho: se o motor marcar o próprio botão como sticky */
.cta.is-sticky {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 2rem);
  max-width: var(--container);
  margin-bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 50;
}


/* ============================================================================
   8. RÉGUA arrastável (telas 16 altura, 17 peso atual, 18 peso alvo)
      Original: container relative h-24 overflow-hidden cursor-grab.
      Geometria (inline no bundle, replicada aqui):
        linha superior  top: 8px   (1px, muted-foreground/50)
        ticks           top: 8px   (1px x 16px, passo 14px)
        números         top: 28px  (a cada 10 unidades)
        linha inferior  top: 78px
        cursor          left 50%, linha 2px x 60px + triângulo 8/8/10px
      O motor posiciona a fita com translateX(-Wpx) via style inline.
   ========================================================================= */

/* toggle de unidade: 2 pílulas px-6 py-2 rounded-full */
.ruler-unit-toggle {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.ruler-unit-toggle button {
  padding: 0.5rem 1.5rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  transition: background-color 0.15s, color 0.15s;
}
.ruler-unit-toggle button.is-active,
.ruler-unit-toggle button[aria-pressed="true"] {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

/* valor gigante + unidade  (text-5xl font-black / text-base muted/60) */
.ruler-value {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-bottom: 1rem;
  font-size: 3rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.025em;
  color: hsl(var(--foreground));
}
.ruler-unit {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: normal;
  margin-left: 0.125rem;
  color: hsl(var(--muted-foreground) / 0.6);
}

/* pista */
.ruler {
  position: relative;
  height: 6rem;                        /* h-24 */
  overflow: hidden;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  margin-bottom: 0.5rem;
}
.ruler:active { cursor: grabbing; }

/* as 2 linhas horizontais (o motor aplica left/width/transform inline) */
.ruler-track {
  position: absolute;
  top: 8px;
  left: 50%;
  height: 1px;
  background: hsl(var(--muted-foreground) / 0.5);
}
.ruler-track.is-bottom { top: 78px; }

/* fita de ticks e fita de números */
.ruler-ticks {
  position: absolute;
  top: 8px;
  left: 50%;
  display: flex;
  align-items: flex-start;
}
.ruler-ticks.is-labels { top: 28px; }

.ruler-tick {
  width: 14px;                         /* passo visual */
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ruler-tick::before {
  content: "";
  width: 1px;
  height: 1rem;                        /* h-4 */
  background: hsl(var(--muted-foreground) / 0.5);
}
/* marca "cheia" (a cada 10) — não existe no original, mas o contrato pede
   .ruler-tick.major; deixei levemente maior e mais escura. */
.ruler-tick.major::before {
  height: 1.375rem;
  background: hsl(var(--muted-foreground) / 0.75);
}

/* números da régua (absolutos dentro da fita, translateX(-50%)) */
.ruler-label {
  position: absolute;
  font-size: 0.75rem;
  line-height: 1rem;
  color: hsl(var(--muted-foreground) / 0.6);
  transform: translateX(-50%);
}

/* cursor central: haste rosa + triângulo apontando para cima */
.ruler-cursor {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.ruler-cursor::before {
  content: "";
  width: 2px;
  height: 60px;
  background: hsl(var(--primary));
}
.ruler-cursor::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 10px solid hsl(var(--primary));
}

/* "Arrastra para ajustar" — text-xs muted/40 -mt-4 */
.ruler-hint {
  text-align: center;
  font-size: 0.75rem;
  line-height: 1rem;
  color: hsl(var(--muted-foreground) / 0.4);
  margin-top: -1rem;
  margin-bottom: 1rem;
}

/* caixa "Calculando tu IMC" da tela 16 (bg-muted/50 rounded-xl p-3) */
.info-box {
  background: hsl(var(--muted) / 0.5);
  border-radius: 0.75rem;
  padding: 0.75rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.info-box-dot {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  border-radius: 9999px;
  background: hsl(var(--primary) / 0.2);
  color: hsl(var(--primary));
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.info-box-text { font-size: 0.875rem; font-weight: 500; color: hsl(var(--foreground)); }

/* input de idade da tela 19 */
.field {
  width: 100%;
  padding: 1rem;
  font-size: 1.125rem;
  color: hsl(var(--foreground));
  background: hsl(var(--card));
  border: 2px solid hsl(var(--border));
  border-radius: 1rem;
  transition: border-color 0.15s;
}
.field::placeholder { color: hsl(var(--muted-foreground)); }
.field:focus { outline: none; border-color: hsl(var(--primary)); }


/* ============================================================================
   9. IMC
      .imc-box   → tela 17: bg-muted rounded-xl p-3, frase + nota
      .imc-gauge → tela 31: barra 15→40 com 4 faixas + marcador + tooltip
   ========================================================================= */
.imc-box {
  background: hsl(var(--muted));
  border-radius: 0.75rem;
  padding: 0.75rem;
  margin-bottom: 1rem;
}
.imc-box p { font-size: 0.875rem; line-height: 1.25rem; color: hsl(var(--foreground)); }
.imc-box strong,
.imc-box b { font-weight: 700; }
.imc-box .imc-note {
  font-size: 0.75rem;
  line-height: 1rem;
  color: hsl(var(--muted-foreground));
  margin-top: 0.25rem;
}

/* cor por faixa (nomes ES do contrato + aliases EN) */
.imc-faixa { font-weight: 700; }
.imc-faixa.is-bajo,      .imc-faixa.is-underweight { color: hsl(var(--bmi-underweight)); }
.imc-faixa.is-normal                               { color: hsl(var(--bmi-normal)); }
.imc-faixa.is-sobrepeso, .imc-faixa.is-overweight  { color: hsl(var(--bmi-overweight)); }
.imc-faixa.is-obeso,     .imc-faixa.is-obese       { color: hsl(var(--bmi-obese)); }

/* --- gauge da tela 31 --------------------------------------------------- */
.imc-card {
  background: hsl(var(--card));
  border-radius: 0.75rem;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  box-shadow: var(--shadow);
}
.imc-card-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--foreground));
  margin-bottom: 1.5rem;
}

/* tooltip "Tú - 26.8" (bg-foreground, seta embaixo, -top-5) */
.imc-tooltip-wrap { position: relative; margin-bottom: 0.5rem; }
.imc-tooltip {
  position: absolute;
  top: -1.25rem;
  transform: translateX(-50%);
  background: hsl(var(--foreground));
  color: hsl(var(--background));
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1rem;
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
  white-space: nowrap;
}
.imc-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid hsl(var(--foreground));
}

/* escala numérica 15 / 18,5 / 25 / 30 / 40 */
.imc-scale {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  line-height: 1rem;
  color: hsl(var(--muted-foreground));
  margin-bottom: 0.25rem;
  padding-inline: 0.125rem;
}

/* barra: gradiente literal do original */
.imc-gauge {
  position: relative;
  height: 0.75rem;
  border-radius: 9999px;
  margin-bottom: 0.25rem;
  background: linear-gradient(
    to right,
    #60a5fa 0%,
    #22c55e 30%,
    #facc15 50%,
    #f97316 70%,
    #ef4444 100%
  );
}
.imc-marker {
  position: absolute;
  top: 0;
  left: 0;
  width: 0.75rem;
  height: 0.75rem;
  background: #fff;
  border: 2px solid hsl(var(--foreground));
  border-radius: 9999px;
  box-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
  transform: translateX(-50%);
}

/* rótulos das 4 faixas; a faixa da usuária vem em negrito escuro */
.imc-zones {
  display: flex;
  justify-content: space-between;
  font-size: 0.625rem;
  line-height: 1rem;
  color: hsl(var(--muted-foreground));
  margin-top: 0.125rem;
}
.imc-zones .is-active { font-weight: 700; color: hsl(var(--foreground)); }


/* ============================================================================
   10. .alert-box — alerta metabólico da tela 31
       Original: bg-red-50 border border-red-200 rounded-xl p-2.5 md:p-3
   ========================================================================= */
.alert-box {
  background: var(--red-50);
  border: 1px solid var(--red-200);
  border-radius: 0.75rem;
  padding: 0.625rem;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.alert-box svg,
.alert-box .alert-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
  color: var(--red-500);
}
.alert-title {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  color: var(--red-700);
  margin-bottom: 0.125rem;
}
.alert-text {
  font-size: 0.75rem;
  line-height: 1.625;
  color: var(--red-600);
}


/* ============================================================================
   11. .profile-grid — tela 31: 1 cartão com 3 linhas (estilo de vida,
       condicionamento, metabolismo), separadas por border-bottom.
   ========================================================================= */
.profile-grid {
  background: hsl(var(--card));
  border-radius: 0.75rem;
  padding: 0.625rem;
  margin-bottom: 0.5rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.profile-grid > * {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.profile-grid > *:not(:last-child) {
  padding-bottom: 0.5rem;
  border-bottom: 1px solid hsl(var(--border));
}
.profile-grid svg,
.profile-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: hsl(var(--muted-foreground));
}
.profile-label {
  font-size: 0.75rem;
  line-height: 1rem;
  color: hsl(var(--muted-foreground));
}
.profile-value {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: hsl(var(--foreground));
}


/* ============================================================================
   12. .chart — dois gráficos, ambos SVG inline no original
       tela 28: 2 retas cruzadas (verde "Con Calistenia" / vermelha "Sin cambios")
                + pílula branca "Tú", viewBox 0 0 400 200
       tela 30: curva descendente com pílula {pesoAtual}kg, "Semana 2" e
                {pesoObjetivo}kg, viewBox 0 0 400 220
       As pílulas da tela 28 são HTML absoluto sobre o SVG.
   ========================================================================= */
.chart {
  position: relative;
  width: 100%;
  margin-bottom: 1.5rem;
}
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart.is-projection { height: 150px; margin-bottom: 0; }
.chart.is-projection svg { width: 100%; height: 100%; }

/* pílulas flutuantes da tela 28 */
.chart-label {
  position: absolute;
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  box-shadow: 0 1px 2px #0000000d;
  white-space: nowrap;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}
.chart-label.is-you   { background: #fff; border: 1px solid hsl(var(--border)); color: hsl(var(--foreground)); }
.chart-label.is-good  { background: var(--green-500); color: #fff; }
.chart-label.is-bad   { background: var(--red-500); color: #fff; }

/* destaque do peso-alvo na tela 30 (bg-blue-100 text-blue-600) */
.chart-weight {
  background: var(--blue-100);
  color: var(--blue-600);
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 1rem;
}
.chart-days {
  color: hsl(var(--foreground));
  font-weight: 700;
  font-size: 1rem;
  margin-left: 0.5rem;
}

/* --- animações dos gráficos (telas 28 e 30) --------------------------------
   Linha "desenhando" da esquerda p/ direita via pathLength=1 (uniforme). */
.draw-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw-line 1.15s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.draw-line.is-delayed { animation-delay: 0.25s; }
@keyframes draw-line { to { stroke-dashoffset: 0; } }

/* área sob a curva entra depois da linha */
.draw-area {
  opacity: 0;
  animation: draw-area 0.7s ease-out 0.55s forwards;
}
@keyframes draw-area { from { opacity: 0; } to { opacity: 1; } }

/* pontos e rótulos surgem com "pop" escalonado */
.chart-dot {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: chart-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.chart-label.chart-anim {
  opacity: 0;
  animation: chart-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes chart-pop {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .draw-line, .draw-area, .chart-dot, .chart-label.chart-anim {
    animation: none;
    opacity: 1;
    stroke-dashoffset: 0;
  }
}


/* ============================================================================
   13. .loading — tela 29
       No ORIGINAL é uma barra horizontal (h-3 bg-muted, fill primary) com a
       porcentagem abaixo. Mantive a barra como padrão e deixei um anel
       (.loading-ring) disponível caso o motor prefira o círculo pedido no
       briefing — basta passar --pct.
   ========================================================================= */
.loading { width: 100%; text-align: center; }

.loading-bar {
  width: 100%;
  height: 0.75rem;
  background: hsl(var(--muted));
  border-radius: 9999px;
  overflow: hidden;
}
.loading-bar-fill {
  height: 100%;
  width: 0;
  background: hsl(var(--primary));
  border-radius: 9999px;
  transition: width 0.2s linear;
}
.loading-pct {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin-top: 0.5rem;
}

/* variante circular (não usada no original) */
.loading-ring {
  --pct: 0;
  position: relative;
  width: 8rem;
  height: 8rem;
  margin: 0 auto;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    conic-gradient(hsl(var(--primary)) calc(var(--pct) * 1%), hsl(var(--muted)) 0);
}
.loading-ring::before {
  content: "";
  position: absolute;
  width: 6.5rem;
  height: 6.5rem;
  border-radius: 9999px;
  background: hsl(var(--background));
}
.loading-ring > * { position: relative; font-weight: 700; font-size: 1.5rem; }

/* imagem de transformação que roda embaixo */
.loading-img {
  margin-top: 1.5rem;
  border-radius: 1rem;
  overflow: hidden;
  animation: fade-in 0.3s ease-out;
}
.loading-img img { width: 100%; max-height: 50vh; object-fit: contain; }
.loading-caption {
  font-size: 0.75rem;
  line-height: 1rem;
  color: hsl(var(--muted-foreground));
  margin-top: 1rem;
}


/* ============================================================================
   14. .compare — tela 34 (Ahora × Tu objetivo) + notas + .badge-metodo
       Original: card p-4, 2 fotos 140x168 com "›››" no meio, e uma grade
       2 colunas com 3 linhas de dados separada por border-t.
   ========================================================================= */
.compare {
  background: hsl(var(--card));
  border-radius: 0.75rem;
  padding: 1rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow);
}

.compare-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.compare-head > * {
  flex: 1 1 0;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
}
.compare-head .compare-spacer { flex: 0 0 4rem; }

.compare-imgs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.compare-imgs > .compare-col { flex: 1 1 0; display: flex; justify-content: center; }
.compare-img {
  width: 140px;
  height: 168px;
  object-fit: cover;
  object-position: top;
  border-radius: 0.5rem;
  background: hsl(var(--muted));
}

/* "›››" piscando em cascata */
.compare-arrows {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.25rem;
  line-height: 1;
  font-weight: 700;
  color: hsl(var(--muted-foreground));
}
.compare-arrows span { animation: fade-in 0.5s ease-out infinite alternate; }
.compare-arrows span:nth-child(1) { opacity: 0.4; animation-delay: 0s; }
.compare-arrows span:nth-child(2) { opacity: 0.6; animation-delay: 0.15s; }
.compare-arrows span:nth-child(3) { opacity: 1;   animation-delay: 0.3s; }

/* grade de dados */
.compare-data {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid hsl(var(--border));
}
.compare-col-data { display: flex; flex-direction: column; gap: 0.75rem; }
.compare-label {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
  color: hsl(var(--primary));
  margin-bottom: 0.125rem;
}
.compare-value {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  color: hsl(var(--foreground));
}
.compare-value.is-sm { font-size: 0.875rem; line-height: 1.25rem; }
.compare-value.is-target { color: hsl(var(--primary)); }

/* 3 barrinhas de nível (h-1.5) */
.compare-bars { display: flex; gap: 0.25rem; margin-top: 0.375rem; }
.compare-bar {
  height: 0.375rem;
  flex: 1 1 0;
  border-radius: 9999px;
  background: hsl(var(--muted));
}
.compare-bar.is-on { background: hsl(var(--primary)); }

/* notas abaixo do comparativo (Foco do Protocolo / frase de compromisso) */
.note {
  border-radius: 0.75rem;
  padding: 0.75rem;
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-bottom: 0.75rem;
}
.note svg, .note .note-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
  color: hsl(var(--primary));
}
.note p { font-size: 0.875rem; line-height: 1.625; color: hsl(var(--foreground)); }
.note strong, .note b { font-weight: 700; color: hsl(var(--primary)); }
.note.is-primary {
  background: hsl(var(--primary) / 0.1);
  border: 1px solid hsl(var(--primary) / 0.2);
}
.note.is-accent {
  background: hsl(var(--accent));
  border: 1px solid hsl(var(--border));
}

/* selo "🧘 Método sin impacto — seguro para cualquier edad…" */
.badge-metodo {
  background: hsl(var(--muted) / 0.5);
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
  padding: 0.75rem;
  margin-bottom: 1.5rem;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.625;
  color: hsl(var(--muted-foreground));
}
.badge-metodo strong,
.badge-metodo b { font-weight: 600; color: hsl(var(--foreground)); }


/* ============================================================================
   15. .offer — tela 35 (página de vendas, revelada após PITCH_DELAY_MS)
   ========================================================================= */
.offer {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: 1.5rem 1rem;
}
/* Quando o countdown fixo aparece, TODO o wrapper desce 2.5rem (pt-10 no
   original) — inclusive o header, senão a barra cobre o logo.
   Aceita a flag em .app (preferido) ou na própria .offer. */
.app.is-revealed { padding-top: 2.5rem; }
.app:not(.is-revealed) > .offer.is-revealed { padding-top: 2.5rem; }

/* barra fixa de countdown no topo */
.offer-countdown {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--app-max);
  z-index: 50;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  animation: fade-in 0.3s ease-out;
}
.offer-countdown strong,
.offer-countdown .offer-clock { font-weight: 700; font-variant-numeric: tabular-nums; }

.offer-title {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
  color: hsl(var(--primary));
  text-align: center;
  margin-bottom: 0.5rem;
}
.offer-sub {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: hsl(var(--muted-foreground));
  text-align: center;
  margin-bottom: 1.5rem;
}

/* player vTurb */
.offer-player {
  margin: 0 auto 1.5rem;
  width: 100%;
  max-width: 400px;
  min-height: 250px;
  border-radius: 1rem;
  overflow: hidden;
  background: hsl(var(--muted));
}

/* bloco revelado */
.offer-reveal { animation: fade-in 0.3s ease-out; }

/* CTA da oferta: <a> largo com pulse-shadow */
.offer-cta {
  display: block;
  width: 100%;
  text-align: center;
  padding: 1rem 1.5rem;
  border-radius: 0.75rem;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-size: 1.125rem;
  font-weight: 700;
  text-decoration: none;
  margin-bottom: 1.5rem;
  transition: background-color 0.2s;
  animation: pulse-shadow 2s ease-in-out infinite;
}
.offer-cta:hover { background: hsl(var(--primary) / 0.9); }
.offer-cta.is-tight { margin-bottom: 0.75rem; }

/* escassez de vagas (laranja) */
.vagas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--orange-600);
}
.vagas svg { width: 1rem; height: 1rem; color: var(--orange-500); }

/* cartão genérico da oferta */
.offer-card {
  background: hsl(var(--card));
  border-radius: 0.75rem;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow);
}
.offer-card-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: hsl(var(--foreground));
  text-align: center;
  margin-bottom: 1rem;
}

/* --- card de preço (border-2 border-primary) ---------------------------- */
.price-card {
  background: hsl(var(--card));
  border: 2px solid hsl(var(--primary));
  border-radius: 0.75rem;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow);
  text-align: center;
}
.price-card .vagas { margin-bottom: 0.75rem; }
.price-card > p { margin-top: 0.25rem; }

/* .price-old vai no NÚMERO riscado ("$297,00"), não na linha inteira —
   no original o "De" fica fora do line-through. */
.price-old {
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: hsl(var(--muted-foreground));
  text-decoration: line-through;
}
.price-old s,
.price-old .strike { text-decoration: line-through; }

.price-new {
  font-size: 3.75rem;                  /* text-6xl */
  line-height: 1;
  font-weight: 900;
  color: hsl(var(--primary));
}
.price-line {
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: hsl(var(--muted-foreground));
}
.price-today {
  font-size: 0.875rem;
  font-weight: 600;
  color: hsl(var(--primary));
  padding-top: 0.5rem;
}
.price-note {
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  padding-top: 0.25rem;
}
.price-note.is-strong { padding-top: 0.5rem; font-weight: 500; }

/* --- lista de bônus ("Lo que vas a recibir") ---------------------------- */
.bonus-list { display: flex; flex-direction: column; gap: 0.75rem; }
.bonus-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.bonus-check {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
  border-radius: 0.375rem;
  background: hsl(var(--quiz-green));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bonus-check svg { width: 0.75rem; height: 0.75rem; }
.bonus-item strong,
.bonus-item b { font-weight: 700; color: hsl(var(--foreground)); }
.bonus-item span,
.bonus-text { color: hsl(var(--muted-foreground)); }

/* mockup do app abaixo da lista */
.offer-mockup { margin-top: 1.5rem; }
.offer-mockup img { width: 100%; border-radius: 1rem; }

/* bônus extras numerados (bloco "+Bonos Exclusivos") */
.bonus-extra-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: hsl(var(--primary));
  text-align: center;
  margin-bottom: 0.75rem;
}
.bonus-extra-list { display: flex; flex-direction: column; gap: 1.25rem; }
.bonus-extra-list p { font-size: 1rem; line-height: 1.5rem; color: hsl(var(--foreground)); }
.bonus-extra-list strong { font-weight: 700; color: hsl(var(--primary)); }

/* --- depoimentos -------------------------------------------------------- */
.testimonials-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: hsl(var(--foreground));
  text-align: center;
  margin-bottom: 1.25rem;
}
.testimonial {
  background: hsl(var(--card));
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: 1rem;
}
.testimonial img { width: 100%; object-fit: contain; }
.testimonial-body { padding: 1rem; }
.testimonial-name {
  font-weight: 700;
  color: hsl(var(--primary));
  margin-bottom: 0.5rem;
}
.testimonial-text {
  font-size: 0.875rem;
  line-height: 1.625;
  color: hsl(var(--muted-foreground));
}

/* --- garantia ----------------------------------------------------------- */
.guarantee {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow);
  text-align: center;
}
.guarantee-seal {
  width: 8rem;
  height: 8rem;
  object-fit: contain;
  margin: 0 auto 1rem;
}
.guarantee-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: hsl(var(--foreground));
  margin-bottom: 0.75rem;
}
.guarantee p {
  font-size: 0.875rem;
  line-height: 1.5rem;
  color: hsl(var(--muted-foreground));
  margin-bottom: 0.75rem;
}
.guarantee p:last-child {
  color: hsl(var(--foreground));
  font-weight: 600;
  margin-bottom: 0;
}

/* --- FAQ (acordeão) ----------------------------------------------------- */
.faq { margin-bottom: 1.5rem; }
.faq-title {
  font-size: 1rem;
  font-weight: 700;
  color: hsl(var(--foreground));
  margin-bottom: 1rem;
}
.faq-item {
  background: hsl(var(--card));
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: 0.5rem;
}
.faq-q {
  width: 100%;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--foreground));
}
.faq-q svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  color: hsl(var(--muted-foreground));
  transition: transform 0.2s;
}
.faq-item.is-open .faq-q svg { transform: rotate(180deg); }
.faq-a {
  display: none;
  padding: 0 1rem 1rem;
  font-size: 0.875rem;
  line-height: 1.5rem;
  color: hsl(var(--muted-foreground));
}
.faq-item.is-open .faq-a { display: block; }

/* rodapé legal da oferta */
.offer-legal {
  font-size: 0.75rem;
  line-height: 1.25rem;
  color: hsl(var(--muted-foreground));
  text-align: center;
}
.offer-legal a { text-decoration: underline; }


/* ============================================================================
   16. UTILITÁRIOS, SOMBRAS E ANIMAÇÕES (literais do original)
   ========================================================================= */
.card {
  background: hsl(var(--card));
  border-radius: 0.75rem;
  box-shadow: var(--shadow);
}
.quiz-shadow    { box-shadow: var(--shadow); }
.quiz-shadow-lg { box-shadow: var(--shadow-lg); }

.hl, .text-primary { color: hsl(var(--primary)); }
.muted { color: hsl(var(--muted-foreground)); }
.center { text-align: center; }
.stack  { display: flex; flex-direction: column; gap: 0.75rem; }
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }
.animate-fade-in { animation: fade-in 0.3s ease-out; }

/* pulse-shadow literal: #d1477566 → hsl(var(--primary) / .4) */
@keyframes pulse-shadow {
  0%, 100% { box-shadow: 0 0 0 0 hsl(var(--primary) / 0.4); }
  50%      { box-shadow: 0 0 0 12px hsl(var(--primary) / 0); }
}
.animate-pulse-shadow { animation: pulse-shadow 2s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ============================================================================
   17. AJUSTES >= 768px — os md: do original (o app fica travado em 480px,
       então só a tipografia cresce e a foto da tela 1 é recolocada).
   ========================================================================= */
@media (min-width: 768px) {
  .screen-title { font-size: 1.5rem; line-height: 2rem; }
  .offer-title  { font-size: 1.875rem; line-height: 2.25rem; }
  .offer-sub    { font-size: 1rem; }
  .alert-box    { padding: 0.75rem; }
  .profile-grid { padding: 0.75rem; gap: 0.625rem; }
  .chart.is-projection { height: 200px; }
}