:root{
  --bg:#f8fbff;
  --text:#0e1320;
  --muted:#6c7280;
  --brand:#ff4fa1;
  --brand-200:#ffa9cf;
  --surface:#ffffff;
  --ok:#2ecc71;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:#F8FAFC;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
/* Avoid accidental horizontal scroll on small devices */
html, body { overflow-x: hidden; }
/* Ensure all controls inherit the global font stack */
button, input, select, textarea{ font-family: inherit; }

/* Progress bar (non-sticky) */
.progress-wrap{position:relative;padding-top:40px;background:transparent}
.progress-track{height:8px;width:clamp(260px,72vw,520px);margin:0 auto;border-radius:999px;background:linear-gradient(90deg,#ffe5f1,#f1eff6)}
.progress-bar{height:8px;width:0%;background:var(--brand);border-radius:999px;transition:width .45s ease}

/* Back button wrap above progress */
.back-wrap{
  position:absolute;left:8px;top:0;z-index:3;display:flex;align-items:center;justify-content:center;
}
.back-btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:32px;width:32px;padding:0;border-radius:0;
  background:transparent;border:none;color:#6c7280;
  font-weight:600;font-size:16px;cursor:pointer;line-height:1;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;
}
.back-btn:hover{transform:none;opacity:.95}

/* App container */
.app{--padX: clamp(12px,4vw,22px); width:100%; max-width:680px;margin:24px auto 32px;padding:0 var(--padX);flex:1 0 auto;min-height:0}

.card{
  background:var(--surface);border-radius:18px;padding:24px;margin:18px 0;
  box-shadow:0 10px 30px rgba(15,19,32,.08);
}

.title{font-weight:900;font-size:clamp(24px,6.6vw,44px);line-height:1.16;text-align:center;margin:14px 0 8px; overflow-wrap:anywhere}
.subtitle{color:var(--muted);text-align:center;margin:0 0 18px}
.view-head{max-width:780px;margin:8px auto 14px;padding:0 8px}
.view-head .title{margin:8px 0 4px}
.view-head .subtitle{margin:0 auto 10px}

.grid{display:grid;gap:18px}
.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:360px){.grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Utilities to center grids and remove gaps */
.grid.centered{justify-items:center}
.grid.no-gap{gap:0}
.grid.no-gap > *{margin:0}

/* Make question screens vertically centered where applicable */
section.view-enter{display:flex;flex-direction:column}
section.view-enter{justify-content:center;min-height:60vh}
section.view-enter > .grid.centered{margin:auto 0}
/* Loading screens: avoid vertical centering to prevent clipping */
section.view-enter.card.loading{ justify-content:flex-start; min-height:auto }

/* Larger title only on first question */
body[data-step="0"] .view-head .title{
  font-size: clamp(28px, 7.6vw, 50px);
}

/* Push images further down on first question (step 0) */
body[data-step="0"] .grid.cols-2{
  margin-top: 22px;
}
@media (max-width:430px){
  body[data-step="0"] .grid.cols-2{ margin-top: 28px; }
}

.option{
  display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;
  min-height:220px;border:2px solid #f0e8f2;border-radius:16px;overflow:hidden;cursor:pointer;
  transition:transform .2s ease, box-shadow .3s ease, border-color .25s ease;
  background-color:transparent;
}
.option{background-size:cover;background-position:center;background-image:none}
.option:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.08);border-color:#f6c3da}
/* Stronger shadow on image option cards */
.option:hover{box-shadow:0 16px 34px rgba(0,0,0,.12)}
.option .label{
  width:100%;background:var(--brand);color:#fff;font-weight:800;padding:14px 18px;font-size:16px
}
.option .badge{position:absolute;top:10px;left:10px;background:#fff;padding:6px 10px;border-radius:999px;font-weight:700;font-size:12px}

/* Inline legal block on first question */
body[data-step="0"] .inline-legal{
  color: var(--muted);
  text-align: center;
  font-size: 12px;
  margin-top: 10px;
}
body[data-step="0"] .inline-legal a{ color:#7a2a64 }

.option-btn{
  width:100%;text-align:left;padding:18px 18px;border-radius:16px;border:2px solid #f0e8f2;background:#fff;
  font-weight:700;font-size:16px;cursor:pointer;transition:transform .15s ease, box-shadow .25s ease, border-color .2s ease;
  box-shadow:0 12px 26px rgba(0,0,0,.10);
  margin-bottom:6px;
}
.option-btn:hover{transform:translateY(-1px);box-shadow:0 16px 32px rgba(0,0,0,.14)}
/* keep tiny spacing even when grid has no-gap */
.grid.no-gap > .option-btn{ margin:6px 0; }

/* When an option button has a tail image, lay out content inline and grow the image */
.option-btn.has-tail{
  display:flex;align-items:center;gap:12px;
}
.option-btn.has-lead{ display:flex; align-items:center; gap:10px; }
.option-btn .lead-emoji{ font-size: 22px; line-height: 1; display: inline-flex; width: 28px; justify-content:center; align-items:center; }
.option-btn.has-tail > span{ flex:1 1 60%; }
.option-btn.has-tail .tail-img{
  flex:0 0 40%;
  height:auto; max-height:72px; /* pequeno e nítido */
  border-radius:12px; object-fit:cover; object-position:center right;
  image-rendering:auto; /* manter qualidade */
}
/* Clip suavemente sem cortar demais */
.option-btn.has-tail{ overflow:hidden; }

.btn{
  display:inline-flex;justify-content:center;align-items:center;
  gap:8px;height:54px;border:none;border-radius:14px;font-weight:800;font-size:16px;cursor:pointer;
  padding:0 22px;background:var(--brand);color:#fff;box-shadow:0 16px 30px rgba(255,79,161,.42);
  transition:transform .15s ease, box-shadow .25s ease, background .2s ease;
}
.btn, .btn:link, .btn:visited{ text-decoration:none }
.btn:hover{transform:translateY(-1px);box-shadow:0 18px 34px rgba(255,79,161,.5)}
.btn.ghost{background:#ffe2f1;color:#9a1c64;box-shadow:none}
.btn.block{width:100%}

/* Force uppercase on all next-step buttons */
.btn.next,
.btn.next-collect,
.btn.next-cards,
.btn.next-range,
#sendInput.btn{ text-transform: uppercase }

.center{display:flex;align-items:center;justify-content:center;flex-direction:column}

.figure{
  display:block;border-radius:18px;overflow:hidden;background:#f2f5fa;max-width:520px;margin:18px auto
}
.figure{background:transparent}
.figure img{width:100%;display:block}
/* Let images scale naturally keeping aspect ratio */
.figure img{height:auto}
@media (max-width:480px){.figure{max-width:360px}}

/* Slightly rounded corners only on the second question */
body[data-step="1"] .figure{ border-radius: 10px; }
body[data-step="1"] .figure img{ border-radius: inherit; }
/* Make second question image smaller */
body[data-step="1"] .figure{ width: clamp(200px, 60vw, 320px); max-width: none; }
/* Larger title on second question */
body[data-step="1"] .view-head .title{ font-size: clamp(28px, 7.6vw, 50px); }

.loading{
  padding:clamp(14px, 4.5vw, 20px) clamp(12px, 4vw, 16px);text-align:center
}
.card.loading{ overflow:hidden }
.loading .bar{
  height:10px;border-radius:999px;background:#fde1ef;overflow:hidden
}
.loading .bar > span{
  display:block;height:10px;width:0;background:var(--brand);
  animation:load 2.2s ease-in-out forwards
}
@keyframes load{to{width:100%}}

.kpis{display:grid;grid-template-columns:1fr;gap:14px;margin-top:10px}
.kpis .kpi{background:#fff;border:1px dashed #ffd0e7;border-radius:12px;padding:12px;font-size:14px}

/* Loading hero headline */
.loading-hero{ margin-top:18px; text-align:center }
.loading-hero h3{ font-size: clamp(20px, 6.2vw, 36px); line-height:1.2; margin:10px 0 }
.loading-hero h3 strong{ color:#10b981; font-weight:900 }

/* Reviews carousel for loading */
.review-carousel{ margin-top:18px; overflow:hidden; padding-inline:10px }
.review-carousel .track{ display:flex; gap:12px; animation:carousel 18s linear infinite }
.review-card{ min-width: 88%; flex: 0 0 auto }
.review{ display:flex; gap:12px; align-items:flex-start; background:#fff; border-radius:16px; padding:12px; box-shadow:0 8px 18px rgba(0,0,0,.06) }
.review .avatar{ width:44px; height:44px; border-radius:50%; object-fit:cover }
.review .body{ text-align:left; display:flex; flex-direction:column; gap:4px }
.review .name{ font-weight:800; color:#0e1320; font-size:14px; line-height:1.2 }
.review .stars{ color:#f59e0b; font-weight:900; letter-spacing:1px; margin-bottom:6px }
.review .text{ margin:0; color:#0e1320; font-size:14px; line-height:1.5; white-space:normal; }

@keyframes carousel{
  0%{ transform:translateX(0) }
  25%{ transform:translateX(-88%) }
  50%{ transform:translateX(-176%) }
  75%{ transform:translateX(-264%) }
  100%{ transform:translateX(-352%) }
}

/* Top loading progress */
.loading-prog{ display:flex; align-items:center; gap:10px; margin:4px 0 12px }
.loading-prog .track{ flex:1; height:10px; background:#f2e6ef; border-radius:999px; overflow:hidden }
.loading-prog .bar{ display:block; height:100%; background:var(--brand); border-radius:999px; width:0 }
.loading-prog strong{ font-size:14px; color:#9aa0ad }

.form-input{display:flex;gap:10px}
.input{flex:1;height:52px;border-radius:12px;border:2px solid #efecf4;padding:0 16px;font-size:16px}
.input-hint{ color:#b45309; background:#fff7ed; border:1px solid #fde68a; border-radius:10px; padding:8px 10px; font-size:13px; margin:8px 2px 0; }

.range{ text-align:center }
.range.minimal{ background:transparent; border:none; padding:0; }
.range .segmented{ display:inline-grid; grid-auto-flow:column; background:#ece9f2; padding:4px; gap:4px; border-radius:999px; margin:0 auto 8px; }
.range .segmented .seg{ border:none; background:transparent; color:#6c7280; font-weight:800; padding:6px 18px; border-radius:999px; cursor:pointer; }
.range .segmented .seg.on{ background:var(--brand); color:#fff; box-shadow:0 6px 18px rgba(255,79,161,.35) }
.range .value.big{font-size:56px;font-weight:900;margin:6px 0 6px; line-height:1}
.range .value.big small{ font-size:24px; font-weight:900; margin-left:4px }
.range .ruler-wrap{position:relative;height:140px;margin:0 auto 10px;max-width:680px}
.range .ruler{position:absolute;left:18px;right:18px;bottom:42px;height:48px;display:block;align-items:flex-end;padding:0}
.range .tick{position:absolute;bottom:0;height:10px;width:2px;background:#e7e2ee;margin:0;transform:translateX(-1px)}
.range .tick.mid{height:16px;background:#ded6e8}
.range .tick.major{height:24px;background:#d4c9df}
.range .ruler{ position:absolute; left:18px; right:18px; bottom:42px; height:48px; display:flex; justify-content:space-between; align-items:flex-end; padding:0 }
/* Default: flex labels (altura) */
.range.labels-flex .ruler .labels{ position:absolute; left:0; right:0; bottom:-4px; display:flex; justify-content:space-between; pointer-events:none }
.range.labels-flex .ruler .labels .label{ position:relative; transform:translateY(100%); color:#6c7280; font-weight:800; font-size:16px; }
/* Absolute labels only for weight (minmax design) */
.range.labels-abs .ruler .labels{ position:absolute; left:0; right:0; bottom:-4px; height:0; pointer-events:none }
.range.labels-abs .ruler .labels .label{ position:absolute; transform:translate(-50%, 100%); color:#6c7280; font-weight:800; font-size:16px; white-space:nowrap }
.range.labels-abs .ruler .labels .label.at-min{ transform:translate(0, 100%); left:0 }
.range.labels-abs .ruler .labels .label.at-max{ transform:translate(-100%, 100%); left:100% }
.range .tick.mid{ height:16px; background:#d6cfe4 }
.range .tick.major{ height:26px; background:#cdbfdc }
.range .needle{position:absolute;bottom:60px;height:70px;width:3px;background:var(--brand);left:0}
.range .needle::after{content:'';position:absolute;bottom:-12px;left:50%;transform:translateX(-50%);border:12px solid transparent;border-top-color:var(--brand)}
.range .baseline{position:absolute;left:18px;right:18px;bottom:46px;height:2px;background:#eae3ef;border-radius:999px;overflow:hidden}
.range .baseline > span{display:block;height:100%;width:0;background:linear-gradient(90deg, rgba(255,79,161,.2), rgba(255,79,161,.85));box-shadow:0 0 12px rgba(255,79,161,.35);transition:width .2s ease}
.range.minimal{ position: relative; }
.range .range-input{position:absolute;left:0;right:0;top:0;height:140px;width:100%;opacity:0}
.range .range-input::-webkit-slider-runnable-track{height:0;background:transparent}
.range .range-input::-webkit-slider-thumb{appearance:none;width:0;height:0}
.range .hint{color:#9aa0ad;font-size:14px;margin:8px 0 10px}
.range .imc-note{background:#e6f0ff;border-radius:14px;padding:12px 14px;text-align:center;color:#0e265e}
.range .imc-note strong{display:block; background:transparent; color:#1d4ed8; padding:0; border-radius:0; margin:0 0 10px}
.range .imc-note p{margin:0; text-align:center}

/* Small note above the next button on range screens */
.range-note{ color:#6c7280; text-align:center; font-size:14px; margin:10px 0 0; }

/* Footer info box (centered, blue background) */
.info-box{ background:#dfeeff; color:#0e1320; border-radius:16px; padding:14px 16px; text-align:center; margin:10px 0 0; }
.info-box strong{ display:block; font-weight:800; margin-bottom:8px }
.info-box p{ margin:0; }

/* Animations */
.view-enter{animation:viewIn .35s ease both}
@keyframes viewIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Safe areas for mobile */
body{padding-bottom:env(safe-area-inset-bottom)}
footer.legal{position:static;margin-top:auto;margin-bottom:24px;padding:12px 16px;color:var(--muted);text-align:center;background:transparent;width:100%}
footer.legal a{color:#7a2a64}

/* Bumps title */
.bumps-title{ text-align:center; font-weight:900; color:#0e1320; margin: 6px 0 6px; font-size: clamp(12px, 4.4vw, 14px); line-height: 1.15; }
.bumps-title .hl{ color: var(--brand); }

/* Order Bumps */
.bumps{ display:flex; flex-direction:column; gap:12px; margin:14px 0 }
.bump-card{
  display:block; background:#fffdf6; border:2px dashed #facc15; border-radius:16px; padding:12px; box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.bump-card .bump-head{ display:flex; align-items:center; justify-content:center; gap:8px; color:#b45309; font-weight:800; text-align:center; margin-bottom:8px }
.bump-card .bump-head.stack{ flex-direction:column; gap:2px }
.bump-card .bump-head .lead{ font-size:16px; font-weight:900 }
.bump-card .bump-head .warn{ font-size:16px }
.bump-card .bump-body{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; padding:10px 8px; border:1px dashed #fde68a; border-radius:12px; background:#fffef9 }
.bump-card .bump-media{ width:42px; height:42px; border-radius:10px; background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(0,0,0,.06) }
.bump-card .bump-copy{ display:flex; flex-direction:column; gap:6px }
.bump-card .bump-title{ font-weight:800; color:#0e1320 }
.bump-card .bump-title .semi{ font-weight:600 }
.bump-card .bump-title .mid{ font-weight:700 }
.bump-card .bump-prices{ display:flex; align-items:baseline; gap:8px }
.bump-card .bump-prices .now{ color:#18a558; font-weight:900; font-size:18px }
.bump-card .bump-prices .old{ color:#9a9fb0; text-decoration:line-through; font-weight:700; font-size:14px }
.bump-card .bump-badge{ background:#10b981; color:#fff; font-weight:900; padding:4px 8px; border-radius:999px; font-size:12px }
.bump-card .bump-foot{ display:flex; align-items:center; gap:8px; background:#fffbeb; border-top:1px dashed #fde68a; border-radius:0 0 12px 12px; padding:10px 8px; margin-top:8px; font-weight:800; color:#0e1320 }
.bump-card .bump-check{ width:18px; height:18px }
.order-summary{ margin:10px 0; display:flex; align-items:baseline; justify-content:flex-start; color:#0e1320; width:100% }
.order-summary .lbl{ font-weight:700; font-size:14px; color:#0e1320; line-height:1.2 }
.order-summary .amt{ display:flex; align-items:baseline; gap:6px; font-weight:900; font-size:16px; color:#0e1320; line-height:1.2; margin-left:auto }
.order-summary .amt .avista{ font-weight:700; font-size:12px; color:#6c7280 }

@media (max-width:430px){
  .bump-card .bump-body{ grid-template-columns: auto 1fr; }
  .bump-card .bump-badge{ justify-self:end; }
}

/* Before/After slider */
.ba-topbar{ height:8px; width: clamp(260px,72vw,520px); margin: 8px auto 10px; background: #f7dce8; border-radius: 999px; position: relative; }
.ba-wrap{ border-radius: 18px; overflow: hidden; background:#f2f5fa; max-width: 640px; margin: 0 auto 12px; }
.ba-slider{ position: relative; width: 100%; aspect-ratio: 1 / 1; background:#000; min-height: clamp(200px, 70vw, 460px); touch-action: none; }
.ba-slider img{ display:block; width:100%; height:100%; object-fit:cover; -webkit-user-drag: none; user-select: none; pointer-events: none; }
.ba-slider .ba-base{ position:absolute; inset:0; }
.ba-slider .ba-overlay{ position:absolute; inset:0; width:50%; overflow:hidden; }
.ba-slider .ba-before{ position:absolute; inset:0; }
.ba-handle{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:40px; height:40px; border-radius:50%; border:none; background:#fff; box-shadow:0 4px 18px rgba(0,0,0,.25); display:flex; align-items:center; justify-content:center; cursor:ew-resize; }
.ba-handle .ba-arrows{ color:#6b7280; font-weight:900; font-size:16px; letter-spacing:2px }
.ba-slider::before{ content:''; position:absolute; top:0; bottom:0; left: var(--split, 50%); width:2px; background:#fff; transform:translateX(-1px); box-shadow:0 0 0 1px rgba(0,0,0,.08) }

/* Static (centralizada e tamanho controlado) variation */
.ba-wrap-static{ background:transparent; max-width:520px; }
.ba-wrap-static .ba-static{ aspect-ratio: 4 / 5; max-width:420px; margin:0 auto; border-radius:18px; background:#000; position:relative; }
@media (max-width:640px){
  .ba-wrap-static{ max-width:92%; }
  .ba-wrap-static .ba-static{ max-width:100%; }
}
/* Não permitir que as imagens estiquem além do container calculado */
.ba-wrap-static .ba-static img{ object-fit:cover; }
/* Modo estático: overlay sempre ocupa 100% e recorte via clip-path para não deslocar o centro visual */
.ba-static .ba-overlay{width:100% !important;}
.ba-static .ba-overlay .ba-before{clip-path:inset(0 calc(100% - var(--split,50%)) 0 0); transition:clip-path .05s linear;}
@supports not (clip-path: inset(0 50% 0 0)) {
  /* Fallback: usar largura variável apenas se clip-path indisponível */
  .ba-static .ba-overlay{ width: var(--split,50%) !important; }
  .ba-static .ba-overlay .ba-before{ clip-path: none; }
}

/* Offer redesign */
.offer-ribbon{ background:linear-gradient(90deg,#f2479c,#c83dd6); color:#fff; font-weight:900; text-transform:uppercase; letter-spacing:.6px; font-size:13px; padding:10px 14px; border-radius:14px; width: clamp(280px, 92%, 640px); margin: 4px auto 10px; box-shadow:0 8px 18px rgba(0,0,0,.08) }
.offer-card{ display:flex; justify-content:space-between; align-items:stretch; gap:12px; width: clamp(280px, 92%, 640px); margin: 0 auto; background:#e6fde9; border:1px solid #c9f2d4; border-radius:16px; padding:14px 16px; box-shadow:0 8px 18px rgba(0,0,0,.06) }
.offer-card .oc-left{ flex:1 1 auto; min-width:0 }
.offer-card .oc-title{ font-weight:900; color:#0a3d21; font-size: clamp(16px,4vw,18px); line-height:1.15; text-align:left }
.offer-card .oc-prices{ margin-top:6px; text-align:left }
.offer-card .oc-prices{ display:flex; flex-direction:column; align-items:flex-start; gap:2px }
.offer-card .price-old{ display:block; color:#e74c3c; text-decoration:line-through; margin:0; font-size: clamp(14px,4.2vw,16px); font-weight:800 }
.offer-card .price-now{ display:block; color:#18a558; font-weight:900; font-size: clamp(18px,5vw,22px) }
.offer-card .offer-badge{ background:#ecf9f0; border:1px solid #d2efdc; color:#0a3d21; border-radius:12px; padding:10px 10px; min-width:92px; text-align:center; display:flex; flex-direction:column; justify-content:center; margin-left:auto }
.offer-card .offer-badge{ padding:8px 8px; min-width:84px }
.offer-card .offer-badge .badge-top{ font-weight:900; font-size: clamp(10px,3vw,11px); opacity:.9; letter-spacing:.3px }
.offer-card .offer-badge .badge-bottom{ font-weight:900; font-size: clamp(14px,4.6vw,16px); line-height:1.0 }
.offer-card .offer-badge .badge-bottom .cur{ font-weight:900; font-size: clamp(10px,3vw,11px) }

.offer-cta{ display:inline-block; margin: 26px auto 28px; background:#18a558; color:#fff; font-weight:900; text-transform:uppercase; padding:14px 18px; border-radius:14px; border:none; width: clamp(260px, 92%, 640px); box-shadow:none; transition:none; text-decoration:none; height:65px }
.offer-card + .offer-cta{ margin-top: 28px }
.offer-cta:hover, .offer-cta:active{ transform:none; box-shadow:none; text-decoration:none }

.receives-title{ font-size: clamp(22px,5.8vw,28px); font-weight:900; margin: 16px 0; color:#0c1526 }
.checklist{ width: clamp(280px, 92%, 640px); margin: 0 auto; text-align:left; list-style:none; padding:0; display:flex; flex-direction:column; gap:12px }
.checklist li{ font-size:16px; font-weight:800; color:#0c1526; display:flex; align-items:flex-start; gap:10px }
.checklist .ck{ color:#1fdd6f; font-size:18px; line-height:1.4 }
.checklist .hl{ font-weight:900 }

/* Simple checklist variant */
.checklist--simple{ text-align:center }
.checklist--simple p{ margin: 10px 0 12px; font-size:16px; font-weight:800; color:#0c1526 }
.checklist--simple p strong{ font-weight:900 }
/* Left-align the simple checklist in the final step */
.offer-final .checklist--simple{ text-align:left }

/* Center align throughout final offer step */
.offer-final .receives-title,
.offer-final .benefits,
.offer-final .benefit-title,
.offer-final .benefit-sub,
.offer-final .benefit-text,
.offer-final .results,
.offer-final .results-title,
.offer-final .result-name,
.offer-final .result-sub,
.offer-final .bonuses,
.offer-final .bonuses-title,
.offer-final .bonuses-sub,
.offer-final .guarantee{ text-align:center }
.offer-final .checklist:not(.checklist--simple) li{ justify-content:center }

/* Benefits section */
.benefits{ width: clamp(280px, 92%, 640px); margin: 22px auto 6px; text-align:left }
.benefit-title{ text-align:center; font-size: clamp(18px,5.2vw,22px); font-weight:900; margin: 10px 0 14px; color:#0c1526 }
.benefit-sub{ font-size:18px; font-weight:900; margin: 10px 0 6px; color:#0c1526 }
.benefit-text{ font-size:15px; color:#1a2436; line-height:1.6; margin:0 0 14px }
.benefit-media{ margin: 14px 0 8px }
.benefit-media img{ width:100%; height:auto; display:block; border-radius:14px; box-shadow:0 8px 18px rgba(0,0,0,.06) }

/* Results section */
.results{ width: clamp(280px, 92%, 640px); margin: 26px auto 8px; text-align:left }
.results-title{ text-align:center; font-size: clamp(20px,6vw,28px); font-weight:900; margin: 14px 0; color:#0c1526 }
.result{ margin: 12px 0 20px }
.result-name{ color:#6b21a8; font-weight:900; font-size:18px; margin: 6px 0 2px }
.result-sub{ color:#0c1526; font-weight:800; font-size:16px; margin: 0 0 8px }
.result-media{ margin:8px 0 2px }
.result-media img{ width:100%; height:auto; display:block; border-radius:14px; box-shadow:0 8px 18px rgba(0,0,0,.06) }

/* Bonuses and guarantee */
.bonuses{ width: clamp(280px, 92%, 640px); margin: 18px auto 10px; text-align:left }
.bonuses-title{ text-align:center; color:#0FAE66; font-weight:900; font-size: clamp(20px,6vw,26px); margin: 8px 0 6px }
.bonuses-title .plus{ color:#0FAE66; font-weight:900; margin-right:4px }
.bonuses-sub{ text-align:center; color:#1a2436; line-height:1.6; margin: 0 auto 12px; max-width:56ch }
.bonuses-list{ list-style: disc; padding-left: 20px; color:#1a2436; line-height:1.7; font-size:15px; display:flex; flex-direction:column; gap:8px }
.offer-final .bonuses-list{ text-align:left }
.bonuses-list strong{ color:#0FAE66 }
.guarantee{ background:#e9fbf0; border:1px solid #c6f1d8; border-radius:16px; padding:14px; margin: 16px 0 6px; text-align:center; box-shadow:0 8px 20px rgba(0,0,0,.06) }
.offer-final .offer-card{ gap:10px }
@media (max-width: 380px){
  .offer-final .offer-card{ flex-direction:row; align-items:center }
  .offer-final .offer-card .offer-badge{ margin-left:auto; align-self:center; min-width:72px; width:auto; padding:6px }
  .offer-final .offer-card .oc-title{ text-align:left }
  .offer-final .offer-card .oc-prices{ text-align:left }
  .offer-cta{ margin-top: 32px }
}
.guarantee .g-title{ color:#0FAE66; font-weight:900; font-size:20px; margin-bottom:6px }
.guarantee .g-text{ color:#1a2436; line-height:1.7; margin:4px 0 }

/* Multi-select (oitava questão) styles */
.multi-list{display:flex;flex-direction:column;gap:10px}
.multi-list .choice{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;
  background:#fff;border-radius:18px;padding:8px 14px;box-shadow:0 8px 18px rgba(0,0,0,.06);
  padding-left:0; /* flush image to left edge */
  overflow:hidden; /* clip image to rounded corners */
}
.multi-list .choice .lead-img{height:72px;width:auto;display:block;object-fit:cover;border-radius:0}
.multi-list .choice .lead-emoji.big{ font-size: 32px; line-height: 1; width: 42px; display: inline-flex; align-items: center; justify-content: center; }
.multi-list .choice .text{font-weight:800}
.multi-list .choice input[type=checkbox]{
  appearance:none;-webkit-appearance:none;width:26px;height:26px;border-radius:8px;border:2px solid #e5d1dc;display:inline-block;position:relative;background:#fff;
}
.multi-list .choice input[type=checkbox]:checked{border-color:var(--brand);box-shadow:0 0 0 2px #ffd4ea inset}
.multi-list .choice input[type=checkbox]:checked::after{content:'';position:absolute;inset:5px;background:var(--brand);border-radius:4px}
.multi-list .choice.selected{box-shadow:inset 0 0 0 2px #f7c3dc, 0 10px 22px rgba(255,79,161,.18)}
.multi-list .choice:hover{transform:translateY(-1px)}
.multi-list + div + .btn[disabled]{opacity:.6;filter:grayscale(20%);cursor:not-allowed}

/* Larger variant for a specific multi step */
section[data-size="lg"] .multi-list .choice{ padding:12px 16px; }
section[data-size="lg"] .multi-list .choice .lead-img{ height:78px; }
section[data-size="lg"] .multi-list .choice .lead-emoji.big{ font-size: 34px; width: 46px; }

/* Sectioned image list (diet types) */
.card-compact{ padding: 14px 14px 10px; }
.section-header{ font-weight:800;color:#7a2a64; text-transform:uppercase; text-align:center; margin:2px 0 8px; letter-spacing:.4px; }
.section-list{ display:flex; flex-direction:column; gap:10px; }
.section-list .choice{ display:grid; grid-template-columns: auto 1fr; align-items:center; gap:12px; background:#fff; border:2px solid #f0e8f2; border-radius:14px; padding:8px 12px; box-shadow:0 8px 18px rgba(0,0,0,.06); cursor:pointer; }
.section-list .choice:hover{ transform: translateY(-1px); }
.section-list .choice .lead-img{ height:40px; width:auto; display:block; border-radius:12px; object-fit:cover; }
.section-list .choice .text-col{ display:flex; flex-direction:column; gap:2px; }
.section-list .choice .text{ font-weight:800; }
.section-list .choice .mini{ color:#6c7280; font-size:13px; line-height:1.3; }

/* Raise legal notice on the first question */
/* Removed sticky offsets; footer now participates in flex layout */

/* On first question, show terms right below the content (under the images) */
body[data-step="0"] .app{ flex: 0 0 auto; }
body[data-step="0"] footer.legal{ margin-top: 12px; }
@media (max-width:430px){
  body[data-step="0"] footer.legal{ margin-top: 10px; }
}

/* Compact mode for small phones */
@media (max-width:430px){
  .app{margin:16px auto 64px}
  .grid{gap:12px}
  .title{font-size:clamp(20px,5.4vw,28px);margin:10px 0 6px}
  .subtitle{font-size:14px}
  .btn{height:65px;font-size:15px}
  .option-btn{padding:14px 16px}
  .option-btn.has-tail .tail-img{max-height:72px;flex-basis:50%}
  .card{padding:16px;margin:12px 0}
  .option{min-height:180px}
  .range .value{font-size:32px}
  .figure{max-width:320px}
  .progress-track{height:6px}
  .progress-bar{height:6px}
  footer.legal{ margin-bottom: 28px }
}

/* Enlarge the title on the third step (choices2) */
body[data-step="2"] .view-head .title{ font-size: clamp(28px, 7.6vw, 50px); }
/* Enlarge the title on the fourth step (info-cta cavala) */
body[data-step="3"] .view-head .title{ font-size: clamp(28px, 7.6vw, 50px); }
/* Enlarge titles from the fifth question onward (steps >= 4) */
body:not([data-step="0"]):not([data-step="1"]):not([data-step="2"]):not([data-step="3"]) .view-head .title{
  font-size: clamp(26px, 7.2vw, 46px);
}

/* First question layout: 1:1 image above label, avoid distortion */
body[data-step="0"] .option{ min-height: unset; }
body[data-step="0"] .option.has-thumb{ padding:0; }
body[data-step="0"] .option.has-thumb .thumb{ aspect-ratio: 1/1; width:100%; }
@media (max-width:430px){
  body[data-step="0"] .option{ min-height: unset; }
}

/* Square 1:1 image above label on first question */
body[data-step="0"] .option.has-thumb{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 0;
  overflow: hidden;
}
body[data-step="0"] .option.has-thumb .thumb{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
body[data-step="0"] .option.has-thumb .label{
  margin-top: 0;
}

/* Step 5: make the bottom image full-bleed (touching screen edges) without causing horizontal scroll */
body[data-step="4"] .app{ overflow-x: hidden; }
body[data-step="4"] .figure{
  width: calc(100% + (2 * var(--padX)));
  max-width: none;
  margin-left: calc(-1 * var(--padX));
  margin-right: calc(-1 * var(--padX));
  margin-top: 4px;
  margin-bottom: 12px;
  border-radius: 0;
}
@media (max-width:430px){
  body[data-step="4"] .figure{ margin-top: 0; }
}

/* Step 5 (index 4): make list option images match the reference */
/* Match step 6 button text: 16px, bold */
body[data-step="4"] .option-btn,
body[data-step="5"] .option-btn{ font-size: 16px; font-weight: 700; line-height: 1.2; }
body[data-step="4"] .option-btn.has-tail,
body[data-step="5"] .option-btn.has-tail{ 
  min-height: 24px; 
  gap: 2px; 
  overflow: hidden; /* smooth clipping */
  padding: 2px 0 2px 6px; /* ainda menor em cima/baixo */
  align-items: center; /* center text and image vertically */
}
body[data-step="4"] .option-btn.has-tail > span,
body[data-step="5"] .option-btn.has-tail > span{ flex: 1 1 78%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 5px; }
body[data-step="4"] .option-btn.has-tail .tail-img,
body[data-step="5"] .option-btn.has-tail .tail-img{
  flex: 0 0 22%;
  display: block;
  width: 100%;
  height: 100%;
  max-height: none; /* follow button height */
  border-radius: 0; /* flush to border; button rounding will clip */
  object-fit: cover;
  object-position: center right;
  image-rendering: auto;
}
@media (max-width:430px){
  body[data-step="4"] .option-btn,
  body[data-step="5"] .option-btn{ font-size: 16px; line-height: 1.2; }
  body[data-step="4"] .option-btn.has-tail,
  body[data-step="5"] .option-btn.has-tail{ min-height: 22px; padding: 2px 0 2px 5px; gap: 2px; }
  body[data-step="4"] .option-btn.has-tail > span,
  body[data-step="5"] .option-btn.has-tail > span{ flex-basis: 78%; }
  body[data-step="4"] .option-btn.has-tail .tail-img,
  body[data-step="5"] .option-btn.has-tail .tail-img{ flex-basis: 22%; }
}

/* Step 9 (index 8): bring the image up and keep the button close */
body[data-step="8"] .figure{ margin-top: 6px; margin-bottom: 8px; }

/* Step with training days (find by title index after first loading) full images inside buttons */
/* This step index may shift; scoping to tail image variant of list buttons for safety */
/* Make a variant where the tail image fills the right side of the button for specific cases */
/* Generic enhancement: allow tail image to expand when used as hero image */
.option-btn.has-tail.full-tail{
  padding: 0 0 0 12px;
  min-height: 90px;
}
.option-btn.has-tail.full-tail > span{ flex: 1 1 60%; padding: 10px 10px 10px 6px; }
.option-btn.has-tail.full-tail .tail-img{
  flex: 0 0 40%;
  height: 100%;
  max-height: none;
  border-radius: 0;
}

/* Step: Quantos dias por semana você consegue treinar? (index 32)
   Reduce button size by ~30% compared to the full-tail default */
body[data-step="32"] .option-btn.has-tail.full-tail{
  min-height: 63px; /* 90px * 0.7 */
  padding-left: 10px;
}
body[data-step="32"] .option-btn.has-tail.full-tail > span{
  padding: 6px 8px 6px 6px;
  font-size: 15px;
}
body[data-step="32"] .option-btn.has-tail.full-tail .tail-img{
  flex-basis: 38%;
}

/* Quantos dias por semana você consegue treinar? — hide labels and shrink images */
body[data-step="32"] .option-btn > span{ display:none }
body[data-step="32"] .option-btn.has-tail .tail-img{
  flex-basis: 26% !important;
  max-height: 64px;
  height: auto;
  object-fit: cover;
}
body[data-step="32"] .option-btn{
  padding: 8px;
}

/* Plan chart screen (custom HTML view) */
.plan-subtitle{ text-align:center; margin:6px 0 12px; }
.plan-subtitle .muted{ display:block; color:#6c7280; font-size:clamp(14px,3.8vw,16px); line-height:1.2; margin-bottom:4px }
.plan-subtitle .emph{ display:block; color:#0e1320; font-size:clamp(22px,7vw,32px); line-height:1.15; font-weight:900 }
.plan-subtitle .ok{ color: var(--ok); font-weight: 900 }
.plan-chart{ background:#f6f9ff; border:1px solid #e6ecf4; border-radius:16px; padding:10px; box-shadow:0 8px 18px rgba(0,0,0,.04); }
.plan-chart--wide{ width: calc(100% + (2 * var(--padX))); max-width: none; margin-left: calc(-1 * var(--padX)); margin-right: calc(-1 * var(--padX)); }
.chart-box{ position: relative; width: 100%; }
.chart-box svg{ width: 100%; height: 100%; display:block }
.chart-box--xl{ aspect-ratio: 4 / 3; }
.plan-footnote{ color:#8a90a0; font-size:12px; text-align:center; margin:10px 8px 0 }
.plan-info{ background:#dcffe9; border:1px solid #b9f3cf; color:#0e1320; border-radius:16px; padding:14px 16px; margin:14px 0 0; text-align:center }
.plan-info h3{ margin:0 0 6px; color:#13a35f; font-weight:900; font-size:clamp(18px,5.2vw,24px) }
.plan-info p{ margin:0; color:#0e1320; }