/* =========================================================
   Protocolo de Diabetes — funil reconstruído
   Tokens extraídos do design original (Inlead)
   ========================================================= */
:root{
  --theme:#65a30d;
  --theme-dark:#4d7c0f;
  --title:#030712;
  --content:#6b7280;
  --bg:#ffffff;
  --radius:1rem;
  --element:56px;
  --container:28rem;
  --layer-gap:.25rem;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --border:#e5e7eb;
  --surface:#f9fafb;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--content);
  font-family:var(--font);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
button{font-family:inherit}

/* ---------- shell ---------- */
.app{
  width:100%;max-width:var(--container);margin:0 auto;
  min-height:100dvh;display:flex;flex-direction:column;
  padding:0 1rem env(safe-area-inset-bottom) 1rem;
}
.topbar{
  display:flex;align-items:center;gap:.5rem;
  padding:.9rem 0 .4rem;min-height:56px;
}
.topbar[hidden]{display:none}
.back-btn{
  flex:0 0 auto;width:36px;height:36px;border-radius:50%;
  border:1px solid var(--border);background:#fff;color:var(--title);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .15s ease;
}
.back-btn:hover{background:var(--surface)}
.back-btn[hidden]{display:none}
.logo{height:38px;width:auto;margin:0 auto;object-fit:contain}
.logo[hidden]{display:none}
.topbar-spacer{flex:0 0 36px}

.progress-wrap{padding:.25rem 0 .75rem}
.progress-wrap[hidden]{display:none}
.progress-track{height:6px;border-radius:999px;background:#e5e7eb;overflow:hidden}
.progress-bar{
  height:100%;width:0;border-radius:999px;background:var(--theme);
  transition:width .45s cubic-bezier(.4,0,.2,1);
}

/* ---------- step ---------- */
.step{
  flex:1 1 auto;
  display:flex;flex-wrap:wrap;align-content:flex-start;
  justify-content:center;
  gap:var(--layer-gap);
  padding-bottom:2.5rem;
}
.layer{flex:0 0 100%;max-width:100%;min-width:0}
.step-enter{animation:stepIn .32s ease both}
@keyframes stepIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- texto (Quill) ---------- */
.rt{color:var(--content);font-size:1rem}
.rt h1,.rt h2,.rt h3,.rt h4{color:var(--title);margin:.35em 0;line-height:1.25;font-weight:700}
.rt h1{font-size:1.9rem}
.rt h2{font-size:1.55rem}
.rt h3{font-size:1.22rem}
.rt p{margin:.35em 0}
.rt strong{color:var(--title);font-weight:700}
.rt a{color:var(--theme)}
.rt ul,.rt ol{margin:.35em 0;padding-left:1.25rem}
.rt li{margin:.15em 0}
.rt .ql-align-center{text-align:center}
.rt .ql-align-right{text-align:right}
.rt .ql-align-justify{text-align:justify}
.rt img{margin:.5rem auto}

/* ---------- imagem ---------- */
.layer-image img{margin:0 auto;border-radius:var(--radius)}

/* ---------- botão ---------- */
.btn{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  width:100%;min-height:var(--element);padding:.85rem 1.1rem;
  border:0;border-radius:var(--radius);cursor:pointer;
  font-size:1rem;font-weight:700;line-height:1.3;text-align:center;
  color:#fff;background:var(--theme);
  box-shadow:0 6px 16px -6px rgba(101,163,13,.65);
  transition:transform .12s ease,filter .15s ease;
}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:scale(.985)}
.btn--success{background:var(--theme)}
.btn--theme{background:var(--theme)}
.btn--light{background:#fff;color:var(--title);border:1.5px solid var(--border);box-shadow:none}
.btn--pulse{animation:pulse 2s infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(101,163,13,.55)}
  70%{box-shadow:0 0 0 14px rgba(101,163,13,0)}
  100%{box-shadow:0 0 0 0 rgba(101,163,13,0)}
}

/* ---------- opções ---------- */
.options{display:grid;gap:.75rem;width:100%}
.options.cols-1{grid-template-columns:1fr}
.options.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.opt{
  display:flex;align-items:center;gap:.75rem;width:100%;
  padding:.75rem;text-align:left;cursor:pointer;
  background:#fff;color:var(--title);
  border:2px solid var(--border);border-radius:var(--radius);
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  transition:border-color .15s ease,box-shadow .15s ease,transform .12s ease;
}
.opt:hover{border-color:var(--theme);box-shadow:0 4px 12px rgba(0,0,0,.08)}
.opt:active{transform:scale(.99)}
.opt.is-selected{border-color:var(--theme);background:#f7fee7}
.opt--vertical{flex-direction:column;align-items:stretch;text-align:center;gap:.5rem}
.opt--vertical .opt-media{width:100%}
.opt--vertical .opt-media img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:.65rem}
.opt-media{flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.opt-media img{width:52px;height:52px;object-fit:cover;border-radius:.6rem}
.opt-emoji{
  width:44px;height:44px;border-radius:50%;background:var(--surface);
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;
}
.opt-label{flex:1 1 auto;min-width:0}
.opt-label .rt{color:var(--title)}
.opt-label .rt p{margin:0}
.opt-label .rt ul{margin:0;padding-left:1.1rem}
.opt-check{
  flex:0 0 auto;width:24px;height:24px;border-radius:50%;
  border:2px solid var(--border);display:flex;align-items:center;justify-content:center;
  color:#fff;transition:background .15s ease,border-color .15s ease;
}
.opt.is-selected .opt-check{background:var(--theme);border-color:var(--theme)}
.opt--vertical .opt-check{display:none}

/* ---------- espaçador ---------- */
.layer-clear{width:100%}

/* ---------- notificação ---------- */
.notif{
  width:100%;display:flex;gap:.7rem;align-items:flex-start;
  padding:.9rem 1rem;border-radius:var(--radius);
  background:#f7fee7;border:1px solid #d9f99d;color:var(--title);
}
.notif--warn{background:#fef2f2;border-color:#fecaca}
.notif-icon{flex:0 0 auto;font-size:1.15rem;line-height:1.4}
.notif-body{flex:1 1 auto;min-width:0}
.notif-body .rt p{margin:.1em 0}
.notif-title .rt strong,.notif-title .rt p{color:var(--title);font-weight:700}

/* ---------- áudio (modelo instagram) ---------- */
.audio{
  width:100%;display:flex;align-items:center;gap:.75rem;
  padding:.7rem .9rem;border-radius:999px;
  background:var(--surface);border:1px solid var(--border);
}
.audio-avatar{
  flex:0 0 auto;width:44px;height:44px;border-radius:50%;
  object-fit:cover;border:2px solid var(--theme);
}
.audio-play{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;
  background:var(--theme);color:#fff;display:flex;align-items:center;justify-content:center;
}
.audio-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:.3rem}
.audio-sender{font-size:.78rem;font-weight:600;color:var(--title)}
.audio-bars{display:flex;align-items:flex-end;gap:2px;height:24px;cursor:pointer}
.audio-bars span{
  flex:1 1 auto;background:#d1d5db;border-radius:2px;min-width:2px;
  transition:background .1s linear;
}
.audio-bars span.on{background:var(--theme)}
.audio-time{font-size:.72rem;color:var(--content);font-variant-numeric:tabular-nums}

/* ---------- depoimentos ---------- */
.quotes{display:flex;flex-direction:column;gap:.75rem;width:100%}
.quote{
  display:flex;gap:.75rem;padding:.9rem;
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:0 4px 12px -6px rgba(0,0,0,.15);
}
.quote-avatar{flex:0 0 auto;width:46px;height:46px;border-radius:50%;object-fit:cover}
.quote-body{flex:1 1 auto;min-width:0}
.quote-name{font-weight:700;color:var(--title);font-size:.92rem}
.quote-activity{font-size:.76rem;color:var(--content)}
.quote-stars{color:#f59e0b;font-size:.85rem;letter-spacing:1px}
.quote-text{margin-top:.35rem;font-size:.92rem;color:#374151}

/* ---------- carrossel ---------- */
.carousel{width:100%}
.carousel-track{
  display:flex;gap:.75rem;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding-bottom:.25rem;
}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-item{
  flex:0 0 82%;scroll-snap-align:center;position:relative;
  border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);background:#fff;
}
.carousel-item img{width:100%;height:auto;display:block}
.carousel-item .rt{padding:.5rem .7rem;font-size:.88rem}
.carousel-item.is-spoiler img{filter:blur(14px)}
.spoiler-veil{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.35);cursor:pointer;
  font-size:.85rem;font-weight:700;color:var(--title);
}
.carousel-item:not(.is-spoiler) .spoiler-veil{display:none}
.carousel-dots{display:flex;justify-content:center;gap:.35rem;margin-top:.6rem}
.carousel-dots i{
  width:7px;height:7px;border-radius:50%;background:#d1d5db;display:block;
  transition:background .2s ease,width .2s ease;
}
.carousel-dots i.on{background:var(--theme);width:18px;border-radius:999px}

/* ---------- argumentos (antes/depois) ---------- */
.args{display:grid;gap:.75rem;width:100%}
.args.cols-1{grid-template-columns:1fr}
.args.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.arg{
  border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:#fff;
}
.arg img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.arg .rt{padding:.45rem}
.arg .rt h3{font-size:1rem;margin:0}

/* ---------- métrica ---------- */
.metric{width:100%}
.metric-track{height:10px;border-radius:999px;background:#e5e7eb;position:relative}
.metric-fill{
  height:100%;border-radius:999px;background:#d1d5db;
  width:0;transition:width 1s cubic-bezier(.4,0,.2,1);
}
.metric--theme .metric-fill{background:var(--theme)}
.metric--light .metric-fill{background:#f87171}
.metric-dot{
  position:absolute;top:50%;left:0;width:16px;height:16px;border-radius:50%;
  background:#fff;border:3px solid currentColor;transform:translate(-50%,-50%);
  transition:left 1s cubic-bezier(.4,0,.2,1);
}
.metric--theme{color:var(--theme)}
.metric--light{color:#f87171}
.metric-label{font-size:.8rem;text-align:center;margin-top:.3rem;color:var(--content)}

/* ---------- loading ---------- */
.loading{width:100%;padding:.5rem 0}
.loading .rt{text-align:center;color:var(--title);font-weight:600}
.loading-track{height:10px;border-radius:999px;background:#e5e7eb;overflow:hidden;margin-top:.6rem}
.loading-fill{height:100%;width:0;background:var(--theme);border-radius:999px}
.loading-percent{text-align:center;font-size:.85rem;margin-top:.35rem;color:var(--content);font-variant-numeric:tabular-nums}

/* ---------- vídeo ---------- */
.video{width:100%;border-radius:var(--radius);overflow:hidden;background:#000}
.video-ratio{position:relative;width:100%;padding-top:56.25%}
.video-ratio iframe{position:absolute;inset:0;width:100%!important;height:100%!important;border:0}

/* ---------- preço ---------- */
.price{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 1.15rem;border-radius:var(--radius);
  background:#f7fee7;border:2px solid var(--theme);cursor:pointer;
  transition:transform .12s ease;
}
.price:hover{transform:translateY(-1px)}
.price-left .rt p{margin:0;font-size:.9rem;color:var(--title)}
.price-left .rt strong{font-weight:800}
.price-right{text-align:right;flex:0 0 auto}
.price-before{font-size:.75rem;color:var(--content)}
.price-value{font-size:1.65rem;font-weight:800;color:var(--theme);line-height:1.1}
.price-after{font-size:.75rem;color:var(--content)}

/* ---------- toasts ---------- */
.toasts{
  position:fixed;left:50%;top:.75rem;transform:translateX(-50%);
  width:min(28rem,calc(100% - 1.5rem));z-index:9999;
  display:flex;flex-direction:column;gap:.5rem;pointer-events:none;
}
.toast{
  pointer-events:auto;background:#111827;color:#fff;border-radius:.8rem;
  padding:.7rem .9rem;box-shadow:0 10px 30px -10px rgba(0,0,0,.6);
  animation:toastIn .3s ease both;
}
.toast .rt,.toast .rt strong,.toast .rt p{color:#fff}
.toast .rt p{margin:.05em 0;font-size:.9rem}
@keyframes toastIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

@media (max-width:360px){
  .options.cols-2{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}