/* Quiz "Segredo da Insulina" — mesmo tema do original (Lovable/Tailwind):
   Poppins, laranja #FF6A00, verde #28AF60, fundo creme. Medidas copiadas das classes do original. */
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/poppins-1.woff2) format('woff2')}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url(fonts/poppins-2.woff2) format('woff2')}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url(fonts/poppins-3.woff2) format('woff2')}
@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;src:url(fonts/poppins-4.woff2) format('woff2')}
@font-face{font-family:Poppins;font-style:normal;font-weight:800;font-display:swap;src:url(fonts/poppins-5.woff2) format('woff2')}
@font-face{font-family:Poppins;font-style:normal;font-weight:900;font-display:swap;src:url(fonts/poppins-6.woff2) format('woff2')}

:root{
  --bg:#FCF7F3; --fg:#4F280D; --card:#fff;
  --coral:#FF6A00; --pessego:#FFE2B3; --accent:#FFD24D;
  --muted:#F6EFE4; --muted-fg:#8F6E56; --bege:#EDE0D4;
  --verde:#28AF60; --verde-h:#229652; --red:#EF4444;
  --capa:#FFF5EB;
  --g50:#F0FDF4; --g100:#DCFCE7; --g300:#86EFAC; --g500:#22C55E; --g600:#16A34A;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border:0 solid var(--bege)}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{background:var(--bg);color:var(--fg);font-family:Poppins,sans-serif;line-height:1.5}
img{display:block;max-width:100%;height:auto}   /* height:auto: sem isso o atributo height do <img> vence o CSS e estica a foto */
button,input{font:inherit;color:inherit;background:none;cursor:pointer}
input{cursor:text}
a{color:inherit;text-decoration:none}
em{font-style:normal}

/* ---------- casca ---------- */
.app{height:100vh;height:100dvh;display:flex;flex-direction:column;max-width:32rem;margin:0 auto;overflow:hidden;background:var(--bg)}
.topo{flex-shrink:0;padding:12px 16px 8px;background:var(--bg)}
.topo-l{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.voltar{padding:4px;margin-left:-4px;color:var(--muted-fg);display:flex}
.voltar svg{width:24px;height:24px}
.topo-logo{height:44px;width:auto}
.trilho{height:8px;width:100%;border-radius:9999px;background:var(--bege)}
.trilho i{display:block;height:100%;border-radius:9999px;background:linear-gradient(90deg,var(--coral),var(--accent));transition:width .5s cubic-bezier(0,0,.2,1)}
#main{flex:1;overflow-y:auto}

/* ---------- tipografia e peças comuns ---------- */
.gt{color:var(--coral);font-weight:800}
.h2{font-size:24px;line-height:32px;font-weight:700;text-align:center}
.h2.x{font-weight:800}
.h2.m{font-size:20px;line-height:28px}
.h2.s{line-height:1.375}   /* leading-snug das telas 10 e 12 */
.sub{font-size:14px;line-height:20px;color:var(--muted-fg);text-align:center;margin-top:-4px}
.tela{padding:32px 20px;display:flex;flex-direction:column;gap:16px}
.tela.py6{padding-top:24px;padding-bottom:24px}
.tela.g3{gap:12px}.tela.g5{gap:20px}.tela.g6{gap:24px}
.tela.ctr{align-items:center;text-align:center}
.lista{display:flex;flex-direction:column;gap:12px}
.mt1{margin-top:4px}.mt2{margin-top:8px}.mt4{margin-top:16px}

.btn,.btn-g{display:block;width:100%;border-radius:16px;padding:16px 24px;font-size:18px;line-height:28px;font-weight:700;color:#fff;text-align:center;transition:all .3s cubic-bezier(.4,0,.2,1)}
.btn{background:var(--coral);box-shadow:0 4px 15px rgba(255,106,0,.3)}
.btn:hover{transform:scale(1.02);box-shadow:0 6px 20px rgba(255,106,0,.4)}
.btn-g{background:var(--verde);box-shadow:0 4px 15px rgba(40,175,96,.4);animation:pulse-scale 2s ease-in-out infinite}
.btn-g:hover{background:var(--verde-h);transform:scale(1.02)}
.btn-g:disabled{opacity:.5;animation:none;cursor:not-allowed}
@keyframes pulse-scale{0%,to{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes bounce-h{0%,to{transform:translate(0)}50%{transform:translate(6px)}}
@keyframes bounce-v{0%,to{transform:translateY(0)}50%{transform:translateY(6px)}}
@keyframes bounce{0%,to{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)}}
@keyframes pulse{50%{opacity:.5}}
.bh{animation:bounce-h 1s ease-in-out infinite}
.bv{animation:bounce-v 1s ease-in-out infinite}

/* opção de resposta (.quiz-option do BR) */
.op{width:100%;border-radius:12px;border:2px solid var(--bege);padding:16px;text-align:left;background:var(--card);display:flex;align-items:center;gap:12px;transition:all .2s cubic-bezier(.4,0,.2,1)}
@media (hover:hover){.op:hover{border-color:var(--coral);background:rgba(255,226,179,.3)}}
.op.sel{border-color:var(--coral);background:rgba(255,226,179,.6);box-shadow:0 0 0 3px rgba(255,106,0,.3);font-weight:700}
.op-e{font-size:24px;line-height:32px}
.op-l{font-weight:700}
.op.sm .op-l{font-size:14px;line-height:20px}
.op.top{align-items:flex-start}
.op.top .op-e{margin-top:4px}
.op-d{font-size:14px;line-height:20px;color:var(--muted-fg);font-weight:400}

/* ---------- 1. capa ---------- */
.capa{display:flex;flex-direction:column;height:100%;background:var(--capa);overflow:hidden}
.capa-logo{display:flex;justify-content:center;padding:12px 0 4px;flex-shrink:0}
.capa-logo img{height:40px;width:auto}
.capa-c{padding:0 16px 12px;display:flex;flex-direction:column;gap:6px;flex:1;min-height:0}
.capa-c.g10{gap:10px}
.capa h1{text-align:center;font-size:20px;line-height:1.1;font-weight:900;flex-shrink:0}
.capa-sub{text-align:center;font-size:12px;line-height:1.25;color:var(--muted-fg);padding:0 8px;flex-shrink:0}
.capa-fig{position:relative;flex:1;min-height:0}
.capa-glow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:85%;height:80%;border-radius:9999px;pointer-events:none;background:radial-gradient(circle,rgba(255,170,60,.28) 0%,rgba(255,170,60,0) 68%)}
.capa-fig>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;filter:drop-shadow(0 10px 18px rgba(120,70,10,.22))}
.capa-med{position:absolute;left:4px;top:4px;z-index:10;display:flex;align-items:center;gap:6px;padding:4px 12px 4px 6px;border-radius:9999px;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);line-height:1}
.capa-med .e{font-size:16px;line-height:24px}
.capa-med b{display:block;font-size:11px;font-weight:900}
.capa-med small{display:block;font-size:8px;font-weight:600;color:var(--muted-fg);letter-spacing:.025em}
.capa-pill{position:absolute;right:8px;top:52%;z-index:10;white-space:nowrap;background:var(--coral);color:#fff;font-size:11px;font-weight:900;padding:4px 10px;border-radius:9999px;box-shadow:0 0 0 2px var(--capa),0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}
.capa-prova{text-align:center;font-size:11px;line-height:1.375;color:var(--muted-fg);flex-shrink:0}
.capa-prova strong{color:var(--verde)}
.capa .btn-g{font-size:14px;line-height:20px;flex-shrink:0}
.selos{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;font-size:10px;line-height:1.5;color:var(--muted-fg);flex-shrink:0}
.selos span{display:flex;align-items:center;gap:4px}
.selos i{font-style:normal;color:var(--verde)}
.selos .p{color:var(--bege)}
/* capa alternativa (antes/depois) */
.ad{display:flex;align-items:stretch;justify-content:center;gap:4px;height:100%}
.ad-col{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;min-width:0;min-height:0}
.ad-foto{position:relative;width:100%;flex:1;min-height:0;border-radius:16px;overflow:hidden;border:2px solid var(--bege);background:#FFE0C0;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.ad-foto.v{border-color:var(--verde)}
.ad-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}
.ad-foto.a img{filter:grayscale(15%)}
.ad-tag{background:#5A3E2B;color:#fff;font-size:10px;font-weight:900;letter-spacing:.05em;padding:2px 12px;border-radius:9999px;flex-shrink:0;box-shadow:0 1px 3px rgba(0,0,0,.1)}
.ad-tag.v{background:var(--verde)}
.ad-meio{position:absolute;top:50%;left:50%;transform:translate(-50%,-55%);display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none;z-index:10}
.ad-seta{width:40px;height:40px;border-radius:9999px;background:var(--coral);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:0 0 0 4px var(--capa),0 20px 25px -5px rgba(0,0,0,.1)}
.ad-kg{background:var(--verde);color:#fff;font-size:14px;font-weight:900;padding:4px 10px;border-radius:8px;box-shadow:0 0 0 2px var(--capa),0 10px 15px -3px rgba(0,0,0,.1);white-space:nowrap}
.ad-dias{background:var(--capa);font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;box-shadow:0 1px 2px rgba(0,0,0,.05);white-space:nowrap}

/* ---------- 3. corpo ---------- */
.grade2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.op.corpo{flex-direction:column;align-items:center;gap:8px;padding:12px 16px}
.op.corpo img{width:112px;height:112px;object-fit:cover;border-radius:8px}
.op.corpo .op-l{font-size:14px;line-height:20px;text-align:center}

/* ---------- 4. áreas ---------- */
.areas{display:flex;gap:12px;align-items:stretch}
.areas-img{width:42%;position:relative;flex-shrink:0}
.areas-img img{width:100%;height:100%;border-radius:8px;object-fit:cover}
.areas-ops{flex:1;display:flex;flex-direction:column;gap:8px}
.op.area{padding:8px 16px;gap:8px;font-size:14px;line-height:20px}
.op.area .op-l{font-weight:600}
.op.area .op-e{font-size:14px;line-height:20px}

/* ---------- 5. você não está sozinha ---------- */
.sozinha{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:32px 24px;text-align:center}
.bola{width:64px;height:64px;border-radius:9999px;background:var(--pessego);display:flex;align-items:center;justify-content:center;margin:0 auto 24px;font-size:30px}
.sozinha .h2{margin-bottom:16px;line-height:1.25}
.sz-card{background:var(--card);border-radius:16px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);border:1px solid var(--bege);padding:20px 24px;margin-bottom:24px;width:100%;max-width:24rem}
.sz-num{font-size:48px;line-height:1;font-weight:900;color:var(--coral);margin-bottom:4px}
.sz-de{font-size:14px;line-height:20px;color:var(--muted-fg);margin-bottom:16px}
.sz-txt{font-size:16px;line-height:1.375;font-weight:600}

/* ---------- 6. matéria (print, como no original) ---------- */
.materia{width:100%;border-radius:16px;overflow:hidden;border:1px solid var(--bege);box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1)}
.materia img{width:100%}

/* ---------- 7. nome ---------- */
.nome{width:100%;text-align:center;font-size:20px;line-height:28px;font-weight:700;padding:16px;border:2px solid var(--bege);border-radius:12px;background:var(--bg)}
.nome:focus{border-color:var(--coral);outline:none}
.nome::placeholder{color:#b4a294}

/* ---------- 10 / 12. mensagens ---------- */
.emoji48{font-size:48px;line-height:1}
.msg-p{font-size:16px;line-height:1.625;color:var(--muted-fg)}
.msg-p.f{color:var(--fg);font-weight:600}
.caixa-v{background:var(--g100);border:1px solid var(--g300);border-radius:16px;padding:20px;width:100%}
.caixa-v p{font-size:16px;line-height:1.625;font-weight:600}
.caixa-v small{display:block;font-size:14px;line-height:20px;color:var(--muted-fg);margin-top:12px}

/* ---------- 15. como age ---------- */
.checks{display:flex;flex-direction:column;gap:12px;width:100%}
.check{display:flex;align-items:center;gap:12px;border-radius:12px;border:1px solid var(--g300);background:var(--g50);padding:16px}
.check i{font-style:normal;color:var(--g600);font-weight:700;font-size:18px;line-height:28px}
.check span{font-size:14px;line-height:20px;font-weight:600}
.passos{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.passo{position:relative;border:1px solid var(--bege);border-radius:16px;padding:20px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1)}
.passo-n{position:absolute;top:-12px;right:-8px;width:36px;height:36px;border-radius:9999px;background:var(--coral);color:#fff;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}
.passo-i{margin-top:4px}
.passo-i img{object-fit:contain}
.passo-i .e{font-size:30px;line-height:36px}
.passo b{font-size:14px;line-height:1.25}
.passo small{font-size:12px;line-height:1.625;color:var(--muted-fg)}

/* ---------- 16-18. números ---------- */
.valor{font-size:60px;line-height:1;font-weight:900;color:var(--coral)}
.valor small{font-size:24px;line-height:32px;font-weight:700;margin-left:4px}
.passos-n{display:flex;gap:12px}
.passos-n button{width:56px;height:56px;border-radius:9999px;border:2px solid var(--bege);font-weight:700;font-size:18px;transition:background .15s}
@media (hover:hover){.passos-n button:hover{background:var(--muted)}}
.meta-pill{background:rgba(40,175,96,.1);color:var(--verde);font-weight:700;padding:8px 16px;border-radius:9999px;font-size:14px;line-height:20px}

/* ---------- 21. gráfico ---------- */
.pesos{display:flex;align-items:center;justify-content:center;gap:16px}
.pesos div{display:flex;flex-direction:column;align-items:center}
.pesos b{font-size:30px;line-height:36px;font-weight:900}
.pesos b.c{color:var(--coral)}
.pesos small{font-size:12px;line-height:16px;color:var(--muted-fg);margin-top:0}   /* margin-top:0 anula o .caixa-v small da tela 12 */
.pesos .seta{font-size:24px;line-height:32px;color:var(--coral);font-weight:700}
.meta-box{margin-top:12px;background:rgba(255,106,0,.1);border-radius:8px;padding:8px 12px;font-weight:700;color:var(--coral)}
.graf{width:100%;background:var(--card);border:1px solid var(--bege);border-radius:16px;padding:16px}
.graf-t{font-size:12px;line-height:16px;font-weight:700;color:var(--muted-fg);margin-bottom:12px;text-transform:uppercase;letter-spacing:.025em}
.graf-a{position:relative;width:100%;height:180px}
.graf-a svg{width:100%;height:100%}
.graf-l{position:absolute;display:flex;align-items:center;gap:8px;opacity:0;transition:opacity .5s ease-out}
.graf-l .pt{width:12px;height:12px;border-radius:9999px;background:var(--fg)}
.graf-l b{font-size:18px;line-height:28px;font-weight:900}
.graf-l small{font-size:12px;line-height:16px;color:var(--muted-fg)}
.graf-hoje{left:8px;top:10%;flex-direction:column;align-items:flex-start;gap:0}
.graf-hoje small{margin-left:20px}
.graf-meta{right:64px;top:55%}
.graf-meta .pt{background:var(--coral)}
.graf-meta b{color:var(--coral);background:var(--card);padding:0 4px;border-radius:4px}
.graf-fim{right:8px;top:85%}
.graf-fim .pt{width:14px;height:14px;background:var(--g500);animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}
.graf-fim b{color:var(--g600)}
.graf-fim span{font-size:14px;color:var(--g600)}
.on .graf-l{opacity:1}
.on .graf-hoje{transition-delay:.3s}.on .graf-meta{transition-delay:1s}.on .graf-fim{transition-delay:1.4s}
.graf-p{font-size:11px;line-height:1.5;color:var(--muted-fg);margin-top:8px}
.graf-p b{color:var(--coral)}
.graf-p strong{font-weight:700}

/* ---------- 22. compromisso ---------- */
.comp{position:relative;width:100%;display:flex;justify-content:center}
.comp img{width:100%;max-width:20rem;border-radius:16px}
.comp-seta{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.comp-seta div{width:40px;height:40px;border-radius:9999px;background:var(--coral);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}
.pill-lib{background:var(--coral);border-radius:9999px;padding:6px 16px;display:flex;align-items:center;justify-content:center;gap:6px}
.pill-lib span{font-size:12px}
.pill-lib b{color:#fff;font-size:11px;letter-spacing:.025em}

/* ---------- 24. carregando ---------- */
.carr{padding:32px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:70vh;gap:32px}
.carr-top{text-align:center}
.carr-top .e{font-size:36px;line-height:40px;animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}
.carr-top .h2{font-size:20px;line-height:28px;margin-top:8px}
.carr-top .h2 span{color:var(--coral)}
.carr-top p{font-size:14px;line-height:20px;color:var(--muted-fg);margin-top:8px}
.etapas{width:100%;max-width:24rem;display:flex;flex-direction:column;gap:16px}
.etapa{border-radius:12px;border:1px solid rgba(237,224,212,.4);padding:16px;background:rgba(246,239,228,.3);opacity:.5;transition:all .5s}
.etapa.ok{border-color:rgba(255,106,0,.4);background:rgba(255,106,0,.05);opacity:1}
.etapa.at{border-color:rgba(255,106,0,.6);background:rgba(255,106,0,.1);box-shadow:0 4px 6px -1px rgba(255,106,0,.1),0 2px 4px -2px rgba(255,106,0,.1);opacity:1}
.etapa-l{display:flex;align-items:center;gap:12px}
.etapa-i{font-size:20px;line-height:28px}
.etapa.at .etapa-i{animation:bounce 1s infinite}
.etapa p{font-size:14px;line-height:20px;font-weight:600;color:var(--muted-fg)}
.etapa.at p{color:var(--fg)}.etapa.ok p{color:var(--coral)}
.etapa-b{margin-top:8px;height:6px;border-radius:9999px;background:var(--muted);overflow:hidden}
.etapa-b i{display:block;height:100%;border-radius:9999px;background:linear-gradient(90deg,var(--coral),rgba(255,106,0,.7))}
.total{width:100%;max-width:24rem}
.total-b{height:8px;border-radius:9999px;background:var(--muted);overflow:hidden}
.total-b i{display:block;height:100%;border-radius:9999px;background:var(--coral);transition:width .3s ease-out}
.total p{font-size:12px;line-height:16px;text-align:center;color:var(--muted-fg);margin-top:8px}

/* ---------- 25. resultado ---------- */
.res{border-radius:16px;overflow:hidden;border:1px solid var(--bege)}
.res-barra{height:6px;background:var(--coral)}
.res-c{padding:20px;display:flex;flex-direction:column;align-items:center;gap:16px;background:var(--card)}
.res-imc{text-align:center}
.res-imc b{display:block;font-size:48px;line-height:1;font-weight:900;color:var(--coral)}
.res-imc small{display:block;font-size:14px;line-height:20px;color:var(--muted-fg)}
.res-imc small strong{color:var(--coral)}
.res-hr{width:100%;border-top:1px solid var(--bege)}
.alertas{display:flex;flex-direction:column;gap:8px;width:100%}
.alertas-t{font-weight:700;color:var(--muted-fg);font-size:14px;line-height:20px;text-align:center}
.alerta{display:flex;align-items:center;gap:8px;font-size:14px;line-height:20px}
.alerta i{font-style:normal;color:var(--red);font-size:16px;line-height:24px}
.diag{background:rgba(40,175,96,.1);border-radius:12px;padding:16px;text-align:center;font-size:14px;line-height:20px;font-weight:500;color:var(--verde)}
.benef{display:flex;flex-direction:column;gap:4px}
.benef h3{font-size:16px;line-height:24px;font-weight:700;text-align:center;margin-bottom:8px}
.benef div{display:flex;align-items:center;gap:12px;background:rgba(255,226,179,.5);border-radius:12px;padding:12px 16px;font-size:14px;line-height:20px;font-weight:500}
.benef span{font-size:16px;line-height:24px}
.depo{border-radius:16px;overflow:hidden;border:1px solid var(--bege)}
.depo img{width:100%}
.depo-t{padding:16px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.depo-t b{font-size:14px;line-height:20px}
.depo-t small{font-size:12px;line-height:16px;color:var(--muted-fg)}
.estrelas{font-size:18px;line-height:28px}

/* ---------- 26. depoimentos ---------- */
.depos{width:100%;display:flex;flex-direction:column;gap:16px}
.dep{border-radius:16px;border:1px solid var(--bege);background:var(--card);overflow:hidden;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1)}
.dep img{width:100%}
.dep-t{padding:16px;display:flex;flex-direction:column;align-items:center;gap:4px}
.dep-kg{font-size:18px;line-height:28px;font-weight:900;color:var(--coral)}
.dep-q{font-size:14px;line-height:20px;font-weight:600;text-align:center}
.dep-n{font-size:12px;line-height:16px;color:var(--muted-fg)}
.dep .e{font-size:14px}

/* ---------- 27. rotina pronta ---------- */
.pronta{padding:32px 20px;display:flex;flex-direction:column;gap:24px;align-items:center;justify-content:center;min-height:100%;text-align:center}
.pronta-box{background:var(--coral);color:#fff;border-radius:16px;padding:24px;width:100%}
.pronta-box .e{font-size:36px;line-height:40px;margin-bottom:8px}
.pronta-box h2{font-size:18px;line-height:28px;font-weight:700}
.pronta-seta{font-size:30px;line-height:36px;color:var(--verde)}
.pronta-l{display:flex;flex-direction:column;gap:8px;width:100%;text-align:left}
.pronta-l div{font-size:14px;line-height:20px;font-weight:600;opacity:.3}
.pronta-l div.on{opacity:1}

/* ---------- 28. oferta ---------- */
.urg{background:var(--coral);color:#fff;text-align:center;padding:8px;font-size:14px;line-height:20px;font-weight:700;position:sticky;top:0;z-index:10}
.urg span{font-size:16px;line-height:24px}
.of{padding:24px 20px;display:flex;flex-direction:column;gap:24px}
.of-h1{font-size:20px;line-height:1.375;font-weight:700;text-align:center}
.of-sub{font-size:14px;line-height:20px;color:var(--muted-fg);margin-top:12px;text-align:center}
.bloco{border-radius:16px;overflow:hidden;border:1px solid var(--bege);box-shadow:0 1px 2px rgba(0,0,0,.05)}
.bloco-h{background:var(--coral);color:#fff;padding:16px;text-align:center}
.bloco-h small{display:block;font-size:12px;line-height:16px;text-transform:uppercase;letter-spacing:.05em;opacity:.9}
.bloco-h b{display:block;font-size:18px;line-height:28px;font-weight:700;margin-top:4px}
.bloco-h b.m{font-size:16px;line-height:24px}
.bloco-h em{display:block;font-size:12px;line-height:16px;margin-top:8px;opacity:.9}
.bloco-c{padding:16px;display:flex;flex-direction:column;gap:12px}
.bloco-c.g2{gap:8px}
.marco{display:flex;align-items:center;gap:12px;border:1px solid var(--bege);border-radius:12px;padding:12px}
.marco .e{font-size:24px;line-height:32px}
.marco div{flex:1}
.marco small{display:block;font-size:12px;line-height:16px;text-transform:uppercase;font-weight:700;color:var(--coral)}
.marco b{display:block;font-size:14px;line-height:20px;font-weight:700}
.marco i{font-style:normal;background:var(--verde);color:#fff;font-size:12px;line-height:16px;padding:4px 8px;border-radius:4px;font-weight:700}
.esperado{background:rgba(40,175,96,.1);color:var(--verde);text-align:center;padding:8px;border-radius:8px;font-size:14px;line-height:20px;font-weight:700;margin-top:4px}
.of-h2{font-size:16px;line-height:24px;font-weight:700;text-align:center}
.of-h2 span{color:var(--coral)}
.bonus{display:flex;flex-direction:column;gap:12px}
.bonus div{border-radius:12px;border:1px solid var(--bege);background:rgba(255,226,179,.4);padding:16px;display:flex;gap:12px}
.bonus .e{font-size:24px;line-height:32px;flex-shrink:0}
.bonus b{display:block;font-size:14px;line-height:20px;font-weight:700}
.bonus small{display:block;font-size:12px;line-height:16px;color:var(--muted-fg);margin-top:4px}
.inclui{display:flex;align-items:flex-start;gap:8px;font-size:14px;line-height:20px}
.inclui i{font-style:normal;color:var(--verde);flex-shrink:0}
.preco{border-top:1px solid var(--bege);margin-top:12px;padding-top:16px;text-align:center}
.preco-de{color:var(--muted-fg);text-decoration:line-through;font-size:16px;line-height:24px}
.preco-por{font-size:12px;line-height:16px;color:var(--muted-fg);margin-top:8px}
.preco-v{font-size:48px;line-height:1;font-weight:900;color:var(--verde);margin-top:4px}
.preco-p{font-size:14px;line-height:20px;color:var(--muted-fg);margin-top:8px}
.nw{white-space:nowrap}
.garantia{border-radius:16px;padding:20px;text-align:center;border:2px solid var(--coral);background:var(--pessego)}
.selo{display:inline-flex;align-items:center;justify-content:center;width:80px;height:80px;border-radius:9999px;background:var(--coral);color:#fff;font-weight:900;font-size:12px;line-height:1.25;margin-bottom:12px}
.garantia b{display:block;font-size:16px;line-height:24px;font-weight:700}
.garantia p{font-size:14px;line-height:20px;color:var(--muted-fg);margin-top:8px}
.faq h3{font-size:18px;line-height:28px;font-weight:700;text-align:center;margin-bottom:12px}
.faq details{border-bottom:1px solid var(--bege)}
.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:16px 0;font-size:14px;line-height:20px;font-weight:700;text-align:left;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
@media (hover:hover){.faq summary:hover{text-decoration:underline}}
.faq summary svg{width:16px;height:16px;flex-shrink:0;transition:transform .2s}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq details p{padding-bottom:16px;font-size:14px;line-height:20px;color:var(--muted-fg)}
.seguro{text-align:center;font-size:12px;line-height:16px;color:var(--muted-fg);padding:16px 0}