/* ============================================================================
   HD-ES — tema replicado dos tokens REAIS do inLead do original (desafiohiitdance.com):
   themeColor #ec4899 · titleColor #020617 · contentColor #71717a · bg #FFFFFF ·
   Inter (título e corpo) · rounded-2xl (1rem) · elemento 56px · container 28rem.
   Classes = as do motor canônico (riseme-quiz); só o visual muda.
   ========================================================================= */
:root {
  --rosa: #ec4899;
  --rosa-escuro: #db2777;
  --rosa-suave: #fdf2f8;
  --rosa-borda: #fbcfe8;
  --titulo: #020617;
  --texto: #71717a;
  --fundo: #ffffff;
  --card: #ffffff;
  --borda: #e5e7eb;
  --verde: #16a34a;
  --verde-claro: #22c55e;
  --vermelho: #dc2626;
  --radius: 1rem;
  --container: 28rem;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { display: none; }
html, body { overflow-x: hidden; max-width: 100%; }
body { font-family: 'Inter', system-ui, sans-serif; background: var(--fundo); color: var(--texto); font-size: 16px; min-height: 100vh; min-height: 100dvh; }
img { display: block; max-width: 100%; }
button { font: inherit; border: 0; background: none; cursor: pointer; color: inherit; }
h1, h2, h3, .font-titulo { font-family: 'Inter', system-ui, sans-serif; color: var(--titulo); }
b, strong { color: var(--titulo); }
.rosa { color: var(--rosa); }
.verde { color: var(--verde); }
.vermelho, .rojo { color: var(--vermelho); }
.marca { background: var(--rosa); color: #fff; padding: 0 .25rem; border-radius: .15rem; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
u.rosa { text-decoration-color: var(--rosa); }

/* --- topo: voltar + barra de progresso rosa ------------------------------- */
.topo { position: sticky; top: 0; z-index: 40; background: var(--fundo); padding: .55rem .75rem .35rem; }
.topo-linha { display: flex; flex-direction: column; gap: .5rem; width: 100%; max-width: var(--container); margin: 0 auto; }
.voltar { color: var(--titulo); font-size: 1.15rem; line-height: 1; padding: 0; width: 1.4rem; text-align: left; visibility: hidden; }
.progresso { width: 100%; height: 6px; border-radius: 99px; background: #fce7f3; overflow: hidden; }
.progresso-fill { height: 100%; width: 0; background: var(--rosa); border-radius: 99px; transition: width .4s ease; }

/* --- notificação (não usada no DHD, mantida pelo motor) -------------------- */
.notif { visibility: hidden; position: fixed; top: 10px; left: 50%; transform: translateX(-50%) translateY(-130%); z-index: 90; width: calc(100% - 2rem); max-width: 340px; border-radius: .6rem; padding: .7rem 1rem; color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.18); transition: transform .45s; }
.notif.is-on { visibility: visible; transform: translateX(-50%) translateY(0); }
.notif.estilo-alerta { background: #ef4444; } .notif.estilo-inscripcion { background: var(--verde-claro); }
.notif b { display: block; font-size: .95rem; color: #fff; } .notif span { font-size: .85rem; }

/* --- tela ------------------------------------------------------------------ */
main { display: flex; flex-direction: column; }
.tela { width: 100%; max-width: var(--container); margin: 0 auto; padding: .5rem .75rem 2.2rem; min-height: calc(100dvh - 60px); display: flex; flex-direction: column; animation: aparecer .3s ease-out; }
.tela-miolo { margin: auto 0; width: 100%; }
@keyframes aparecer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.pre { text-align: center; font-weight: 800; color: var(--titulo); font-size: 1.35rem; line-height: 1.25; margin-bottom: .4rem; }
.titulo { font-size: 1.5rem; line-height: 1.25; font-weight: 700; text-align: center; margin: .9rem 0 .6rem; letter-spacing: -.01em; }
.sub { text-align: center; font-size: 1rem; line-height: 1.45; margin-bottom: 1rem; color: var(--texto); }
.texto { font-size: 1rem; line-height: 1.5; margin: 0 0 .9rem; text-align: center; color: #27272a; }
.nota { font-size: .8rem; color: var(--texto); font-weight: 700; text-align: center; margin-top: 1rem; }
.destaque-grande { text-align: center; font-size: 1.35rem; font-weight: 800; color: var(--rosa); margin: .6rem 0 1rem; }
.bullets { list-style: none; margin: .4rem 0 .6rem; }
.bullets li { font-size: 1rem; line-height: 1.45; color: #27272a; padding: .35rem 0; text-align: left; }

/* tela 1 (landing): título caps com destaque rosa, subtítulos pequenos em caps */
.estilo-landing .titulo { font-size: 1.15rem; line-height: 1.3; text-transform: uppercase; margin: .8rem 0 1.4rem; }
.estilo-landing .sub { font-size: .72rem; font-weight: 800; text-transform: uppercase; color: var(--titulo); margin-bottom: .2rem; letter-spacing: .01em; }
.estilo-landing .sub b { color: var(--rosa); }
.estilo-landing .linha3 { display: block; font-size: .72rem; font-weight: 800; text-transform: uppercase; color: var(--titulo); letter-spacing: .01em; }
.estilo-landing .linha3 .rosa { color: var(--rosa); }
.estilo-landing .img-solta { margin-top: .4rem; border-radius: .9rem; }
.estilo-landing .recibe { display: block; text-align: left; font-size: 1.05rem; margin: 1rem 0 .1rem; color: #27272a; }
.estilo-landing .recibe u { color: var(--rosa); font-weight: 800; }
/* telas com parágrafos alinhados à esquerda (tela 4); `.centro` volta a centralizar uma linha */
.estilo-izq .texto { text-align: left; }
.estilo-izq .texto .centro, .texto .centro { display: block; text-align: center; }
.estilo-landing .nota { color: var(--texto); font-size: .78rem; }

/* --- opções ---------------------------------------------------------------- */
.opts { display: flex; flex-direction: column; gap: .7rem; margin-top: 1.1rem; }
.opts.grid2 { display: grid; grid-template-columns: 1fr 1fr; }
.opt { display: flex; align-items: center; gap: .7rem; text-align: left; background: var(--card); border: 1.5px solid var(--borda); border-radius: var(--radius); min-height: 56px; padding: .8rem .85rem; font-size: 1rem; color: #18181b; font-weight: 400; transition: transform .12s, border-color .15s, background .15s; }
.opt:active { transform: scale(.985); }
.opt.is-sel { border-color: var(--rosa); background: var(--rosa-suave); }
.opt-emoji { font-size: 1.5rem; flex-shrink: 0; line-height: 1; }
.opt-radio { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid #d4d4d8; background: #fff; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.opt.is-sel .opt-radio, .card-op.is-sel .opt-radio { border-color: var(--rosa); }
.opt.is-sel .opt-radio::after, .card-op.is-sel .opt-radio::after { content: ''; width: 13px; height: 13px; border-radius: 50%; background: var(--rosa); }
.opt-check { width: 24px; height: 24px; border-radius: .35rem; border: 1.5px solid #d4d4d8; background: #fff; flex-shrink: 0; color: #fff; display: flex; align-items: center; justify-content: center; font-size: .85rem; }
.opt.is-sel .opt-check { background: var(--rosa); border-color: var(--rosa); }
.opt-label { flex: 1; line-height: 1.3; }
.opt-letra { width: 28px; height: 28px; border-radius: .35rem; border: 1.5px solid #d4d4d8; background: #fff; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: .82rem; font-weight: 600; color: #18181b; }
.opt.is-sel .opt-letra { background: var(--rosa); border-color: var(--rosa); color: #fff; }
/* multi com foto: a foto sangra na borda esquerda do cartão (tela 22) */
.opt.tem-foto { padding: 0; overflow: hidden; min-height: 72px; }
.opt.tem-foto .opt-foto { width: 72px; align-self: stretch; object-fit: cover; object-position: top; border-radius: 0; flex-shrink: 0; }
.opt.tem-foto .opt-letra, .opt.tem-foto .opt-check { margin-left: .2rem; }
.opt.tem-foto .opt-label { padding: .8rem .8rem .8rem 0; }
.opt.tem-letra:not(.tem-foto) { padding-left: .85rem; }

/* cards 2×2 com foto e rodapé BRANCO com bolinha (telas 6 e 11) ------------- */
.cards2 { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: 1.1rem; }
.card-op { background: var(--card); border: 1.5px solid var(--borda); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; padding: 0; text-align: left; transition: transform .12s, border-color .15s; }
.card-op:active { transform: scale(.985); }
.card-op.is-sel { border-color: var(--rosa); }
.card-op img { width: 100%; aspect-ratio: 1 / 1.15; object-fit: cover; object-position: top; }
.card-rotulo { background: #fff; color: #18181b; display: flex; align-items: center; gap: .55rem; padding: .7rem .7rem; font-size: .95rem; line-height: 1.25; min-height: 56px; }

/* imagens da tela ----------------------------------------------------------- */
.img-solta { border-radius: 1rem; margin: 1rem auto 0; width: 100%; }
.img-hero { width: calc(100% + 1.5rem); max-width: none; margin: 1.2rem -.75rem -2.2rem; }

/* --- CTA rosa (56px, rounded-2xl) ----------------------------------------- */
.cta-area { margin-top: 1.4rem; }
.cta-area.is-fixa { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--container); padding: .8rem .75rem calc(.8rem + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--fundo) 70%, transparent); z-index: 50; margin: 0; }
.cta { display: block; width: 100%; background: var(--rosa); color: #fff; border-radius: var(--radius); min-height: 56px; padding: 1rem; font-weight: 600; font-size: 1rem; text-align: center; text-decoration: none; transition: filter .15s, transform .12s, opacity .15s; }
.cta:hover { filter: brightness(1.04); }
.cta:active { transform: scale(.99); }
.cta:disabled { opacity: .75; cursor: not-allowed; }
.estilo-landing .cta, .estilo-caps .cta { text-transform: uppercase; }

/* --- unidades (pílula) + régua de arrastar -------------------------------- */
.unidades { display: flex; justify-content: center; margin: 1rem 0 .6rem; }
.unidades-pill { background: #f4f4f5; border-radius: 99px; padding: 4px; display: flex; gap: 2px; }
.unidades-pill button { padding: .45rem 1.4rem; border-radius: 99px; font-weight: 600; font-size: 1rem; color: #a1a1aa; }
.unidades-pill button.is-on { background: var(--rosa); color: #fff; }
.ruler-valor { text-align: center; margin: 1rem 0 .4rem; color: var(--titulo); font-weight: 700; }
.ruler-valor #rval { font-size: 2.6rem; line-height: 1; }
.ruler-uni { font-size: 1.15rem; margin-left: .15rem; }
.ruler-wrap { position: relative; height: 96px; }
.ruler-scroll { overflow-x: auto; overflow-y: hidden; height: 100%; scroll-snap-type: none; -webkit-overflow-scrolling: touch; }
.ruler-fita { display: flex; align-items: flex-start; height: 100%; width: max-content; border-bottom: 1.5px solid #d4d4d8; box-sizing: content-box; }
.tick { flex: 0 0 12px; width: 12px; height: 16px; border-left: 1.5px solid #d4d4d8; position: relative; }
.tick.medio { height: 24px; }
.tick.alto { height: 34px; border-left-color: #a1a1aa; }
.tick b { position: absolute; top: 40px; left: 0; transform: translateX(-50%); font-size: 1rem; font-weight: 400; color: var(--texto); }
.ruler-ponteiro { position: absolute; left: 50%; top: 0; width: 3px; height: 100%; background: var(--rosa); transform: translateX(-50%); pointer-events: none; border-radius: 2px; }
.ruler-ponteiro::after { content: ''; position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%); border: 10px solid transparent; border-bottom-color: var(--rosa); border-top: 0; }
.ruler-hint { text-align: center; font-size: .82rem; color: #a1a1aa; margin-top: .5rem; }

/* --- carrossel (1 por vez + bolinhas, legenda no cartão) ------------------- */
.carrossel-wrap { margin: 1.1rem 0; }
.carrossel { display: flex; gap: .8rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 .6rem; }
.carrossel-item { flex: 0 0 92%; scroll-snap-align: center; background: var(--card); border: 1.5px solid var(--borda); border-radius: 1rem; overflow: hidden; }
.carrossel-item img { width: 100%; }
.carrossel-item figcaption { text-align: center; font-size: .95rem; padding: .8rem; border-top: 1px solid #f4f4f5; color: var(--texto); }
.dots { display: flex; justify-content: center; gap: .45rem; margin-top: .8rem; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: #e4e4e7; }
.dot.is-on { background: var(--rosa); }

/* --- áudio estilo WhatsApp (tela 4) ---------------------------------------- */
.audio-wa { background: #efeae2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='8' cy='8' r='2' fill='%23e2ddd4'/%3E%3Ccircle cx='28' cy='24' r='3' fill='%23e2ddd4'/%3E%3C/svg%3E"); border-radius: 1rem; padding: 1.4rem 1.6rem; margin: .8rem 0 1rem; }
.audio-card { background: #fff; border-radius: .7rem; padding: .6rem .8rem .5rem; box-shadow: 0 1px 2px rgba(0,0,0,.08); position: relative; }
.audio-nome { color: #15803d; font-size: .78rem; font-weight: 600; margin-bottom: .3rem; }
.audio-linha { display: flex; align-items: center; gap: .6rem; }
.audio-play { font-size: 1.2rem; color: #8b8b8b; width: 28px; }
.audio-onda { flex: 1; display: flex; align-items: center; gap: 2px; height: 24px; }
.audio-onda i { flex: 1; background: #cfcfcf; border-radius: 2px; }
.audio-onda i:nth-child(-n+3) { background: #3b82f6; }
.audio-avatar { width: 44px; height: 44px; border-radius: 50%; background: #e4e4e7; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.audio-dur { font-size: .7rem; color: #8b8b8b; margin-left: 2.3rem; margin-top: .15rem; }

/* --- loading --------------------------------------------------------------- */
.loader-topo { display: flex; justify-content: space-between; font-size: .95rem; font-weight: 700; color: var(--titulo); margin-top: 3rem; }
.loader-barra { height: 10px; border-radius: 99px; background: #fce7f3; overflow: hidden; margin: .5rem 0 .8rem; }
.loader-fill { height: 100%; width: 0; background: var(--rosa); border-radius: 99px; transition: width .18s linear; }
.loader-estado { text-align: center; font-size: .95rem; margin-bottom: .2rem; color: var(--texto); }
.loader-espera { text-align: center; font-size: .82rem; color: #a1a1aa; margin-bottom: 1rem; }

/* --- gráfico de projeção (sobe: vermelho→verde) ---------------------------- */
.grafico { position: relative; margin: 1.6rem 0 1rem; }
.grafico.com-eixo-y { display: flex; gap: .5rem; }
.graf-eixo-y { display: flex; flex-direction: column; justify-content: space-between; font-size: .75rem; color: var(--texto); padding: .4rem 0 1.6rem; }
.graf-miolo { position: relative; flex: 1; }
.grafico svg { width: 100%; height: auto; overflow: visible; }
.graf-tag { position: absolute; font-size: .8rem; font-weight: 600; color: var(--titulo); background: #fff; border: 1px solid var(--borda); border-radius: .4rem; padding: .25rem .6rem; box-shadow: 0 2px 8px rgba(0,0,0,.08); white-space: nowrap; }
.graf-tag.is-verde { background: #fff; color: var(--titulo); border: 1px solid var(--borda); }
.graf-eixo { display: flex; justify-content: space-between; font-size: .75rem; color: var(--texto); margin-top: .4rem; }
.desenha { stroke-dasharray: 1; stroke-dashoffset: 1; animation: desenhar 1.1s ease-out forwards; }
@keyframes desenhar { to { stroke-dashoffset: 0; } }
.graf-area { opacity: 0; animation: surgir .6s ease-out .5s forwards; }
.graf-pop { opacity: 0; animation: pop .4s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes surgir { to { opacity: .55; } }
@keyframes pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
.texto.cierre { margin-top: .6rem; }

/* --- pitch antes/depois (tela 25) ----------------------------------------- */
.ad { margin: .6rem 0 .4rem; }
.ad-chips { display: grid; grid-template-columns: 1fr 1fr; text-align: center; font-weight: 800; font-size: 1.2rem; margin-bottom: .8rem; }
.ad-chip.is-antes { color: var(--vermelho); } .ad-chip.is-despues { color: var(--verde); }
.ad-img { width: 100%; border-radius: 1rem; }
.ad-cols { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: .6rem; }
.ad-card { background: #fff; border: 1.5px solid var(--borda); border-radius: .8rem; padding: .7rem .4rem; text-align: center; font-size: .85rem; font-weight: 700; color: var(--titulo); line-height: 1.5; min-height: 56px; display: block; }
.ad-barra { position: relative; height: 6px; border-radius: 99px; background: #e4e4e7; margin: .8rem .5rem .6rem; }
.ad-fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 99px; }
.ad-barra.is-antes .ad-fill { background: var(--vermelho); } .ad-barra.is-despues .ad-fill { background: var(--verde-claro); }
.ad-knob { position: absolute; top: 50%; transform: translate(-50%,-50%); width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid #e4e4e7; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.ad-box { border-radius: .7rem; padding: .6rem .5rem; text-align: center; font-size: .8rem; line-height: 1.35; }
.ad-box.is-antes { background: #fee2e2; color: #7f1d1d; } .ad-box.is-despues { background: #dcfce7; color: #14532d; }

/* --- vídeo (vertical 9:16) + página de vendas ------------------------------ */
.vsl-player { border-radius: 1rem; overflow: hidden; background: #111; min-height: 220px; margin: 1rem 0; position: relative; }
.vsl-player.is-vertical { aspect-ratio: 9 / 16; min-height: 0; }
.vsl-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; min-height: 220px; color: #a1a1aa; gap: .4rem; font-size: .85rem; }
.vsl-placeholder span { font-size: 2.4rem; }
.tela.is-vsl { padding-bottom: 2.5rem; }
.vsl-h { text-align: center; font-size: 1.15rem; line-height: 1.3; font-weight: 700; color: var(--titulo); margin: 1.6rem 0 .8rem; text-transform: uppercase; }
.tela.is-vsl .vsl-h:first-of-type { margin-top: .6rem; }
.vsl-h.rosa { color: var(--rosa); } .vsl-h.titulo { color: var(--titulo); }
.tela.is-vsl .cta { text-transform: uppercase; }

/* --- caixas genéricas do motor (mantidas) ---------------------------------- */
.caja-info { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: .8rem; padding: .9rem 1rem; margin: 1rem 0; font-size: .88rem; line-height: 1.5; color: #1d4ed8; text-align: center; }
.caja-info b { display: block; margin-bottom: .25rem; color: inherit; }
.caja-destaque { background: #dcfce7; border: 1px solid #bbf7d0; border-radius: var(--radius); padding: 1rem; margin: 1rem 0; text-align: center; color: var(--verde); }
.alerta-box { background: #fee2e2; border: 1px solid #fecaca; border-radius: .8rem; padding: 1rem; margin: 1rem 0; }
.campo-texto { width: 100%; margin: 1.2rem auto; display: block; border: 1.5px solid var(--borda); border-radius: var(--radius); padding: 1rem; font: inherit; text-align: center; }
.valor-grande { display: flex; align-items: baseline; justify-content: center; gap: .3rem; margin: 1.2rem 0; }
.valor-grande input { width: 130px; border: 0; background: transparent; outline: none; font-size: 3rem; font-weight: 600; color: var(--titulo); text-align: right; }
.depos { display: flex; gap: .8rem; overflow-x: auto; }
@media (prefers-reduced-motion: reduce) { .desenha, .graf-area, .graf-pop { animation: none; stroke-dashoffset: 0; opacity: 1; transform: none; } }