/* 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}