/* Tema escuro em todas as etapas (teste pedido em 14/10).
   Leva o fundo e as cores da abertura para as telas internas.
   Para voltar ao visual claro, basta tirar este arquivo do index.html. */

body:not(.hero-mode){
  --ink:#fff; --muted:#bdbdbd; --line:rgba(255,255,255,.12); --paper:#0b0b0b; --white:#161616;
  --accent:#e50914; --accent-dark:#b0060f; --accent-pale:rgba(229,9,20,.14);
  font-family:'Geist',-apple-system,Arial,sans-serif; --head:'Geist',-apple-system,Arial,sans-serif;
  background:#0b0b0b; color:#fff; min-height:100vh; min-height:100dvh; overflow-x:hidden;
}
body:not(.hero-mode)::before{content:'';position:fixed;top:-160px;right:-120px;width:720px;height:720px;background:radial-gradient(circle,rgba(229,9,20,.18),transparent 62%);pointer-events:none;z-index:0}
body:not(.hero-mode)::after{content:'';position:fixed;bottom:-200px;left:-160px;width:540px;height:540px;background:radial-gradient(circle,rgba(229,9,20,.11),transparent 62%);pointer-events:none;z-index:0}
body:not(.hero-mode) .shell{position:relative;z-index:1}

/* Textos */
body:not(.hero-mode) h1, body:not(.hero-mode) h2, body:not(.hero-mode) h3{color:#fff}
body:not(.hero-mode) .intro, body:not(.hero-mode) .prose, body:not(.hero-mode) .prose p{color:#d2d2d2}
body:not(.hero-mode) .prose strong{color:#fff}

/* Cabeçalho (foto, @, progresso, selo) */
body:not(.hero-mode) .inner-reference-header .avatar{border-color:#0b0b0b;outline-color:#e50914;background:#1f1f1f;color:#808080}
body:not(.hero-mode) .inner-reference-header .back{color:#bdbdbd}
body:not(.hero-mode) .inner-expert-name, body:not(.hero-mode) .expert-instagram{color:#fff}
body:not(.hero-mode) .inner-reference-header .phase-bars>span{background:rgba(255,255,255,.1)}
body:not(.hero-mode) .inner-reference-header .phase-bars i{background:#e50914;box-shadow:0 0 14px rgba(229,9,20,.55)}
body:not(.hero-mode) .inner-reference-badge{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));border-color:rgba(255,255,255,.09);color:rgba(255,255,255,.93);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 6px 22px rgba(0,0,0,.4)}

/* Alternativas */
body:not(.hero-mode) .option{background:#161616;border-color:rgba(255,255,255,.12);box-shadow:none;color:#fff}
body:not(.hero-mode) .option-copy{color:#fff}
body:not(.hero-mode) .option-copy small{color:#a8a8a8}
body:not(.hero-mode) .option:hover{background:#1d1d1d;border-color:rgba(229,9,20,.55)}
body:not(.hero-mode) .option.selected{background:rgba(229,9,20,.16);border-color:#e50914;box-shadow:0 0 0 1px #e50914}
body:not(.hero-mode) .option.selected .option-copy{color:#fff}
body:not(.hero-mode) .radio-mark, body:not(.hero-mode) .checkmark{border-color:rgba(255,255,255,.3)}
body:not(.hero-mode) .art-frame, body:not(.hero-mode) .image-option:nth-child(even) .art-frame{background:#1f1f1f}

/* Botão principal e barra fixa */
body:not(.hero-mode) .primary{background:#e50914;box-shadow:0 8px 26px rgba(229,9,20,.28)}
body:not(.hero-mode) .primary:hover:not(:disabled){background:#f6121d}
body:not(.hero-mode) .sticky-action{background:linear-gradient(transparent,#0b0b0b 22%)}

/* Fotos, quadros e cartões */
body:not(.hero-mode) .media-slot, body:not(.hero-mode) .before-after>div:nth-child(2) .media-slot{background:#1f1f1f;border-color:rgba(255,255,255,.1)}
body:not(.hero-mode) .media-empty{color:#737373}
body:not(.hero-mode) .before-after{border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.12)}
body:not(.hero-mode) .callout{background:#161616;border-color:rgba(255,255,255,.1)}
body:not(.hero-mode) .callout h2{color:#fff}
body:not(.hero-mode) .callout p, body:not(.hero-mode) .testimonial blockquote{color:#d2d2d2}
body:not(.hero-mode) .quote-placeholder, body:not(.hero-mode) .pending-stage{background:#161616;border-color:rgba(255,255,255,.12)}
body:not(.hero-mode) .metrics{border-color:rgba(255,255,255,.12);color:#bdbdbd}
body:not(.hero-mode) .metrics b{color:#ff4d55}

/* Altura, peso e meta */
body:not(.hero-mode) .unit-pill{background:rgba(229,9,20,.16);color:#ff8a8f}
body:not(.hero-mode) .ruler{background:repeating-linear-gradient(to right,transparent 0,transparent 9px,rgba(255,255,255,.25) 9px,rgba(255,255,255,.25) 10px)}
body:not(.hero-mode) .measure input[type=range]{background:linear-gradient(to right,#e50914 var(--fill),rgba(255,255,255,.15) var(--fill))}
body:not(.hero-mode) .measure input[type=range]::-webkit-slider-thumb{background:#e50914;border-color:#fff}
body:not(.hero-mode) .measure input:not([type=range]){background:transparent;color:#fff;border-color:transparent}
body:not(.hero-mode) .range-labels{color:#8a8a8a}
body:not(.hero-mode) .target-card strong{color:#fff}
body:not(.hero-mode) .target-card b, body:not(.hero-mode) .target-card>span, body:not(.hero-mode) .target-card p{color:#ff8a8f}
body:not(.hero-mode) .goal-line .goal-dots{color:rgba(255,255,255,.3)}

/* Carregando, jornada e oferta */
body:not(.hero-mode) .loading-track{background:rgba(255,255,255,.1)}
body:not(.hero-mode) .orbit:before{border-color:rgba(255,255,255,.15);border-top-color:#e50914}
body:not(.hero-mode) .journey-grid article{background:#161616;border-color:rgba(255,255,255,.1)}
body:not(.hero-mode) .journey-grid article:last-child{background:rgba(229,9,20,.12);border-color:rgba(229,9,20,.5)}
body:not(.hero-mode) .journey-grid .eyebrow{color:#ff8a8f}
body:not(.hero-mode) .offer-card{background:#161616;border-color:rgba(255,255,255,.12)}
body:not(.hero-mode) .offer-price del, body:not(.hero-mode) .offer-price small, body:not(.hero-mode) .guarantee, body:not(.hero-mode) .fine-print{color:#a8a8a8}
body:not(.hero-mode) .checkout-note a{color:#fff}

/* Textos dos botões centralizados (pedido em 14/10) */
body:not(.hero-mode) .option{position:relative;justify-content:center;text-align:center}
body:not(.hero-mode) .option-copy{flex:1;text-align:center}
body:not(.hero-mode) .option:not(.image-option):not(.part-option) .option-copy{padding:0 26px}
body:not(.hero-mode) .option:not(.image-option):not(.part-option) .radio-mark,
body:not(.hero-mode) .option:not(.image-option):not(.part-option) .checkmark{position:absolute;right:16px;top:50%;transform:translateY(-50%)}
body:not(.hero-mode) .primary{justify-content:center;gap:10px;text-align:center}
body:not(.hero-mode) .primary span{flex:0 1 auto}

/* Abertura: headline menor (pedido em 14/10). Antes: clamp(1.45rem, 4.6vw, 1.95rem) */
.hero-mode .hero-intro h1{font-size:clamp(1.2rem,5vw,1.6rem);margin-bottom:14px}

/* Abertura: espaços menores entre os elementos (pedido em 14/10) */
.hero-mode .shell{padding-top:24px}
.hero-mode .reference-header .avatar{margin-bottom:8px}
.hero-mode .expert-instagram{margin-bottom:10px}
.hero-mode .reference-progress{margin-bottom:14px}
.hero-mode .reference-divider{margin:12px 0 10px}
.hero-mode .hero-intro h1{margin-bottom:10px}
.hero-mode .hero-promise{margin-bottom:16px}
.hero-mode .before-after{margin-bottom:16px}
.hero-mode .hero-question>p{margin-bottom:6px}
.hero-mode .hero-question h2{margin-bottom:16px}
.hero-mode .hero-question .options{gap:10px}
@media(min-width:640px){.hero-mode .shell{padding-top:32px}}

/* Opções com imagem: bolinha no canto de baixo, sem encostar no texto */
body:not(.hero-mode) .image-option{position:relative}
body:not(.hero-mode) .image-option:not(.part-option) .option-copy{padding:12px 14px 36px}
body:not(.hero-mode) .image-option:not(.part-option) .radio-mark,
body:not(.hero-mode) .image-option:not(.part-option) .checkmark{position:absolute;right:10px;bottom:12px}

/* Partes do corpo: faixa da foto mais larga, ocupando a altura do card */
body:not(.hero-mode) .part-option{overflow:hidden;align-items:stretch}
body:not(.hero-mode) .part-option .part-art{width:64px;height:auto;min-height:74px;margin:0;border-radius:0}
body:not(.hero-mode) .part-option .part-art .media-slot{height:100%;aspect-ratio:auto;border:0;border-radius:0}
body:not(.hero-mode) .part-option .part-art img{width:100%;height:100%;object-fit:cover}
body:not(.hero-mode) .part-option .option-copy{display:flex;align-items:center;justify-content:center;padding:0 22px 0 6px}

/* Cards com foto (telas 2, 5 e 13): foto sempre quadrada, em qualquer largura de tela (antes: altura fixa de 158px) */
body:not(.hero-mode) .image-option:not(.part-option) .art-frame{height:auto;aspect-ratio:1/1}
body:not(.hero-mode) .image-option:not(.part-option) .art-frame .media-slot{height:100%;aspect-ratio:auto;border:0;border-radius:0}
body:not(.hero-mode) .image-option:not(.part-option) .art-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}

/* Régua de altura/peso: os risquinhos deslizam com o valor (1 risco = 1 cm ou 1 kg) e a linha vermelha fica parada marcando o número */
body:not(.hero-mode) .measure .ruler{background-image:repeating-linear-gradient(to right,rgba(255,255,255,.55) 0,rgba(255,255,255,.55) 2px,transparent 2px,transparent 50px),repeating-linear-gradient(to right,rgba(255,255,255,.22) 0,rgba(255,255,255,.22) 1px,transparent 1px,transparent 10px);background-size:50px 100%,10px 60%;background-repeat:repeat-x;background-position:calc(50% + var(--pos,0px)) top,calc(50% + var(--pos,0px)) top;transition:background-position .12s ease-out}

/* Número da altura/peso exatamente no centro (alinhado com a linha vermelha); a unidade fica ao lado sem empurrar o número */
.measure-value{position:relative}
.measure-value input{width:100%;max-width:none;text-align:center}
.measure-value>span{position:absolute;left:calc(50% + var(--d,2) * 20px + 10px);bottom:14px;padding:0}

/* Tela 27: título com a meta + gráfico de evolução (modelo da referência) */
.meta-titulo{font-size:22px !important;line-height:1.35 !important;text-transform:uppercase;letter-spacing:-.3px;margin:6px 0 18px !important;text-align:center}
.meta-titulo mark{text-transform:none;background:#1f9d55;color:#fff;padding:0 6px;border-radius:4px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.grafico-meta{margin:4px -4px 14px}
.grafico-meta svg{width:100%;height:auto;display:block;overflow:visible}
.gm-guia{stroke:rgba(255,255,255,.18);stroke-dasharray:3 4}
.gm-rot{fill:#bdbdbd;font-size:11px;font-family:inherit}
.gm-linha{stroke-dasharray:520;stroke-dashoffset:520;animation:gmDesenha 1.4s .15s ease-out forwards}
.gm-area{opacity:0;animation:gmAparece .8s .9s ease-out forwards}
.gm-ponto{opacity:0;animation:gmAparece .35s ease-out forwards}
.gm-voce rect{fill:#e50914}.gm-voce text{fill:#fff;font-size:11px;font-weight:700;font-family:inherit}
.gm-meta rect{fill:#1f9d55}.gm-meta text{fill:#fff;font-size:11px;font-weight:800;font-family:inherit}
.gm-meta{opacity:0;animation:gmAparece .4s 1.5s ease-out forwards}
.meta-texto{font-size:15.5px;line-height:1.55;margin-top:6px}
.meta-texto strong{color:#fff}
@keyframes gmDesenha{to{stroke-dashoffset:0}}
@keyframes gmAparece{to{opacity:1}}
@media(prefers-reduced-motion:reduce){.gm-linha{animation:none;stroke-dashoffset:0}.gm-area,.gm-ponto,.gm-meta{animation:none;opacity:1}}

/* Tela 28: AGORA × OBJETIVO com fotos lado a lado (modelo da referência) */
.transforma{margin:18px 0 6px}
.tr-rotulos,.tr-legendas{display:grid;grid-template-columns:1fr 1fr;gap:10px;text-align:center}
.tr-rotulos span{font-size:20px;font-weight:900;letter-spacing:.5px;margin-bottom:10px}
.tr-agora{color:#ff3b45}.tr-objetivo{color:#2fbf5b}
.tr-fotos{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:3px;border-radius:16px;overflow:hidden;background:#000}
.tr-fotos .media-slot{aspect-ratio:4/5;border:0;border-radius:0;background:#1f1f1f}
.tr-fotos img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;display:block}
.tr-seta{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:linear-gradient(90deg,#ff3b45,#2fbf5b);color:#fff;display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.45)}
.tr-seta svg{width:24px;height:24px}
.tr-legendas{margin-top:10px}
.tr-legendas p{background:#161616;border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:12px 10px;font-size:14px;font-weight:600;line-height:1.4;color:#fff;margin:0}
.tr-legendas p:first-child{border-color:rgba(255,59,69,.45)}
.tr-legendas p:last-child{border-color:rgba(47,191,91,.55)}

/* Tela 28: barrinhas + cards de status (modelo da referência) */
.tr-status{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.tr-barra{position:relative;height:6px;border-radius:99px;background:rgba(255,255,255,.18);margin:8px 10px 14px}
.tr-barra i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;width:0;animation:trEnche 1.2s .4s ease-out forwards}
.tr-barra i::after{content:'';position:absolute;right:-10px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid #9a9a9a;box-sizing:border-box}
.tr-ruim .tr-barra i{background:#e50914;--alvo:16%}
.tr-bom .tr-barra i{background:#2fbf5b;--alvo:88%}
.tr-col p{margin:0;border-radius:14px;padding:12px 10px;font-size:14px;font-weight:600;line-height:1.4;text-align:center}
.tr-ruim p{background:rgba(229,9,20,.14);border:1px solid rgba(229,9,20,.45);color:#ffd2d5}
.tr-bom p{background:rgba(47,191,91,.16);border:1px solid rgba(47,191,91,.5);color:#cdf3da}
@keyframes trEnche{to{width:var(--alvo)}}
@media(prefers-reduced-motion:reduce){.tr-barra i{animation:none;width:var(--alvo)}}

/* Telas das VSLs: player centralizado */
.video-placeholder,.video-embed,.vsl-video{margin-left:auto;margin-right:auto}
.video-placeholder{width:min(100%,345px)}
.video-embed{width:min(100%,366px)}

/* Telas das VSLs: título mais perto do texto e do vídeo */
body:not(.hero-mode) .video-screen h1,body:not(.hero-mode) .offer-screen h1{margin-bottom:8px}
body:not(.hero-mode) .video-screen .intro{margin-bottom:16px}

/* Botão voltar: seta desenhada, centralizada no círculo */
.inner-reference-header .back{display:flex;align-items:center;justify-content:center;padding:0;line-height:0}
.inner-reference-header .back svg{display:block}

/* Tela de carregamento: etapas personalizadas */
body:not(.hero-mode) .loading-checks{align-items:flex-start;max-width:320px;margin:22px auto 0;gap:10px}
body:not(.hero-mode) .loading-checks p{font-size:14.5px;color:#d2d2d2;opacity:.3;margin:0;text-align:left}
body:not(.hero-mode) .loading-checks p.agora{opacity:.75}
body:not(.hero-mode) .loading-checks p.done{opacity:1;color:#fff}
body:not(.hero-mode) .loading-checks .done:before{color:#2fbf5b}
body:not(.hero-mode) .loading-checks p:not(.done):before{content:'•';color:#555;margin-right:10px}
#loading-agora{min-height:1.5em}

/* Tela 6: fechamento abaixo das fotos (modelo da referência) */
.fecho-tela6{font-size:19px;line-height:1.35;text-align:center;margin:22px 0 8px;color:#fff}

/* Tela 6: carrossel de antes/depois */
.carrossel{margin:20px -16px 4px;overflow:hidden;touch-action:pan-y}
.car-trilho{display:flex;gap:10px;transition:transform .45s ease}
.car-slide{flex:0 0 84%;min-width:0;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:#1a1a1a;opacity:.55;transition:opacity .45s}
.car-slide.on{opacity:1}
.car-slide img{width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none;user-select:none;pointer-events:none}
.carrossel.unico{margin-left:0;margin-right:0}
.carrossel.unico .car-slide{flex-basis:100%;opacity:1}
.car-pontos{display:flex;justify-content:center;gap:7px;margin-top:12px}
.car-ponto{width:8px;height:8px;border-radius:99px;border:0;padding:0;background:rgba(255,255,255,.28);transition:width .25s,background .25s}
.car-ponto.on{width:22px;background:#e50914}

/* botão de compra virou link (19/10) */
a.primary{text-decoration:none;color:#fff}

/* ===== Quiz diagnóstico (26/10): telas novas no visual do quiz ===== */
/* Capa */
.hero-mode .capa-arte{max-width:420px;margin:0 auto 22px;border-radius:18px;overflow:hidden;box-shadow:0 10px 34px rgba(229,9,20,.25)}
.hero-mode .capa-arte img{display:block;width:100%;height:auto}
.hero-mode .hero-question .option{justify-content:flex-start;gap:10px;text-align:left}
.hero-mode .hero-question .option-copy{text-align:left}
.letra{flex:0 0 24px;width:24px;height:24px;border-radius:6px;background:rgba(255,255,255,.95);color:#c4070f;font-size:12px;font-weight:900;display:inline-flex;align-items:center;justify-content:center}
.capa-nota{max-width:420px;margin:22px auto 0;padding:14px 16px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#d2d2d2;font-size:14px;line-height:1.5;text-align:center}
.capa-tempo{text-align:center;font-size:13px;font-weight:800;letter-spacing:.04em;color:#fff;margin:16px 0 0}
.capa-termos{text-align:center;font-size:11px;line-height:1.5;color:#8a8a8a;margin:14px auto 0;max-width:420px}
.capa-termos a{color:#bdbdbd}
/* Tela 8: meta + carrossel com legenda */
body:not(.hero-mode) .meta-sub strong{color:#fff}
.carrossel.com-legenda .car-slide{aspect-ratio:auto;display:flex;flex-direction:column;background:#161616;border:1px solid rgba(255,255,255,.08)}
.carrossel.com-legenda .car-slide img{aspect-ratio:1/1;height:auto}
.car-legenda{display:block;padding:12px 10px;text-align:center;font-size:15px;color:#e8e8e8}
.nota-cta{text-align:center;font-size:14px;line-height:1.5;color:#bdbdbd;margin:14px 4px 0}
/* Carregamentos */
.loading-msg{margin-top:16px}
/* Tela 14: problema encontrado */
.alerta-problema{margin:0 0 18px;padding:12px 14px;border-radius:12px;background:rgba(229,9,20,.12);border:1px solid rgba(229,9,20,.45);color:#ff6b72;font-weight:800;font-size:15px;text-align:center;letter-spacing:.02em}
.problema-img{border-radius:14px;overflow:hidden;margin:0 0 20px}
.problema-img img{display:block;width:100%;height:auto}
body:not(.hero-mode) .problema-titulo{font-size:22px;line-height:1.2;font-weight:900;color:#fff;margin:0 0 10px;text-align:left}
.problema-texto{font-size:15px;line-height:1.55;color:#d2d2d2;margin:0 0 16px}
.problema-texto strong{color:#fff}
.problema-lista{list-style:none;padding:0;margin:0 0 18px;display:flex;flex-direction:column;gap:8px}
.problema-lista li{padding:11px 14px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#fff;font-size:15px;font-weight:600}
.problema-calma{text-align:center;font-weight:900;font-size:16px;color:#fff;margin:6px 0 0}
/* Tela 16: oferta */
body:not(.hero-mode) .oferta-titulo{font-size:22px;line-height:1.25;font-weight:900;margin-bottom:14px}
.oferta-desc strong{color:#fff}
.oferta-img{border-radius:14px;overflow:hidden;margin:18px 0}
.oferta-img img{display:block;width:100%;height:auto}
body:not(.hero-mode) .oferta-recebe{font-size:17px;font-weight:900;color:#fff;margin:22px 0 12px}
.oferta-lista{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-direction:column;gap:10px}
.oferta-lista li{font-size:15px;line-height:1.45;color:#d2d2d2}
.oferta-lista strong{color:#fff}
.oferta-preco{margin:22px 0;padding:20px 16px;border-radius:16px;background:#141414;border:1px solid rgba(229,9,20,.45);box-shadow:0 0 30px rgba(229,9,20,.12);text-align:center}
.oferta-preco p{margin:0}
.oferta-acesso{font-size:14px;color:#d2d2d2}
.oferta-acesso strong{color:#fff}
.oferta-selo{display:inline-block;margin:14px 0 10px!important;padding:6px 12px;border-radius:999px;background:#e50914;color:#fff;font-size:12px;font-weight:900;letter-spacing:.04em}
.oferta-de{font-size:15px;color:#bdbdbd}
.oferta-valor{font-size:46px;font-weight:900;line-height:1.1;color:#fff;letter-spacing:-.02em}
.oferta-valor span{font-size:22px;vertical-align:.55em}
.oferta-vista{font-size:13px;color:#bdbdbd;margin-bottom:16px!important}
.oferta-preco .primary{margin-top:6px}

/* 26/10: sem foto no topo, a barra de progresso fica mais estreita para não encostar na seta de voltar */
.inner-reference-header .phase-bars{max-width:210px}

/* Capa: botões no tamanho da referência (26/10): mais baixos, texto em peso normal e centralizado, borda fina mais escura */
.hero-mode .hero-question .options{max-width:420px;margin-left:auto;margin-right:auto;gap:12px 14px}
.hero-mode .hero-question .option{min-height:48px;padding:10px 12px;border-radius:12px;border:1.5px solid #9e0610;box-shadow:none;justify-content:center;text-align:center}
.hero-mode .hero-question .option-copy{font-weight:400;font-size:15px;line-height:1.25;text-align:center;letter-spacing:0}
.hero-mode .hero-question .option:hover{background:#f01722}
.hero-mode .hero-question .option.selected{background:#b0060f;outline:none;box-shadow:0 0 0 2px #fff inset}

/* 26/10: sem o @ no topo, a barra de progresso fica alinhada com a seta de voltar */
.inner-reference-header{min-height:44px;justify-content:center;padding-top:6px}
.inner-reference-header .phase-bars{margin-top:17px}