:root{
  --theme:#14b8a6;
  --theme-dark:#0d9488;
  --title:#030712;
  --content:#71717a;
  --bg:#ffffff;
  --radius:1rem;
  --el:56px;
  --maxw:480px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:#f4f4f5;color:var(--title);
  font-size:16px;line-height:1.5;
}
#app{max-width:var(--maxw);margin:0 auto;min-height:100vh;background:var(--bg);
  display:flex;flex-direction:column;box-shadow:0 0 40px rgba(0,0,0,.06)}
/* ---- top bar ---- */
#topbar{position:sticky;top:0;z-index:20;background:var(--bg);padding:14px 16px 0}
.bar-inner{display:flex;align-items:center;gap:8px;min-height:34px}
#backBtn{border:none;background:transparent;font-size:22px;line-height:1;color:#3f3f46;
  width:34px;height:34px;border-radius:50%;cursor:pointer;display:flex;visibility:hidden;align-items:center;justify-content:center}
#backBtn:hover{background:#f4f4f5}
#logo{height:30px;margin:0 auto;display:block}
.bar-spacer{width:34px}
#progressWrap{height:6px;background:#e4e4e7;border-radius:999px;margin-top:12px;overflow:hidden}
#progressBar{height:100%;width:0;background:var(--theme);border-radius:999px;transition:width .4s ease}
/* ---- screen ---- */
#screen{flex:1;padding:18px 18px 40px;display:flex;flex-direction:column;animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* rich text (Quill) */
.rt h1{font-size:1.7rem;font-weight:800;margin:.2em 0;line-height:1.25}
.rt h2{font-size:1.3rem;font-weight:700;margin:.2em 0;line-height:1.3}
.rt h3{font-size:1.1rem;font-weight:600;margin:.2em 0}
.rt p{margin:.25em 0}
.rt strong{font-weight:800}
.ql-align-center{text-align:center}
.ql-align-right{text-align:right}
.ql-align-left{text-align:left}
.block{margin:0 0 4px}
.block.center{text-align:center}
/* images */
.img-block{display:flex;justify-content:center;margin:6px 0}
.img-block img{max-width:100%;height:auto;border-radius:var(--radius)}
.ov-holder{position:relative;display:inline-block;line-height:0}
.ov-holder img{border-radius:var(--radius)}
.ov-badge{position:absolute;transform:translate(0,0);background:#16a34a;color:#fff;
  font-weight:800;font-size:clamp(9px,2.6vw,13px);line-height:1;letter-spacing:.3px;
  padding:4px 7px;border-radius:3px;white-space:nowrap;box-shadow:0 1px 2px rgba(0,0,0,.25)}
/* options */
.intro{margin-bottom:14px}
.opts{display:grid;gap:12px;margin:4px 0}
.opts.grid-cols-1{grid-template-columns:1fr}
.opts.grid-cols-2{grid-template-columns:1fr 1fr}
.opt{
  border:2px solid #e4e4e7;border-radius:var(--radius);
  background:#fff;cursor:pointer;transition:.15s;
  font-weight:600;color:var(--title);position:relative;font-family:inherit;
}
.opt:hover{border-color:var(--theme);background:#f0fdfa}
.opt.selected{border-color:var(--theme);background:#f0fdfa;box-shadow:0 0 0 3px rgba(20,184,166,.15)}
.opt .opt-label p{margin:0}
/* ---- linha (grid-cols-1): texto esquerda + miniatura direita ---- */
.opt.row{display:flex;align-items:center;gap:12px;padding:8px 10px 8px 16px;min-height:64px;text-align:left}
.opt.row .opt-label{flex:1;font-size:1rem}
.opt-thumb{width:56px;height:56px;border-radius:12px;object-fit:cover;background:#fafafa;flex:0 0 auto}
.opt-emoji-end{font-size:1.6rem;line-height:1;flex:0 0 auto;padding-right:8px}
.opt.row .chkbox{width:24px;height:24px;border-radius:7px;border:2px solid #d4d4d8;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;margin-left:2px}
.opt.row.selected .chkbox{background:var(--theme);border-color:var(--theme)}
/* ---- card grande (grid-cols-2): imagem em cima ---- */
.opt.card{display:flex;flex-direction:column;align-items:stretch;padding:0;overflow:hidden;text-align:center}
.opt.card .opt-img{width:100%;aspect-ratio:1/1;object-fit:cover;background:#fafafa}
.opt.card .opt-label{padding:12px 38px;line-height:1.2}
.opt.card .opt-emoji{font-size:1.5rem;line-height:1;margin-right:6px}
.opt.card .chk{position:absolute;top:50%;right:12px;transform:translateY(-50%);width:24px;height:24px;border-radius:7px;
  border:2px solid #d4d4d8;background:#fff;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;color:transparent;font-size:14px}
.opt.card.selected .chk{background:var(--theme);border-color:var(--theme);color:#fff}
/* quando o card tem imagem em cima, o check volta ao canto superior */
.opt.card .opt-img ~ .chk{top:8px;right:8px;transform:none;border-radius:50%;background:rgba(255,255,255,.85);border:2px solid #fff}
.opt.card.selected .opt-img ~ .chk{background:var(--theme);border-color:#fff}
.opt.card .arrow,.opt.row .arrow{color:#a1a1aa;font-size:20px;flex:0 0 auto;padding:0 4px}
.opt.card .arrow{padding-bottom:10px}
.opt:hover .arrow{color:var(--theme)}
/* buttons */
.btn-wrap{margin:14px 0 4px;position:sticky;bottom:0;background:linear-gradient(transparent, #fff 30%);padding-bottom:6px}
.btn{
  width:100%;border:none;border-radius:var(--radius);background:var(--theme);color:#fff;
  font-family:inherit;font-weight:800;font-size:1.05rem;padding:16px 20px;cursor:pointer;
  min-height:var(--el);transition:.15s;letter-spacing:.2px;
}
.btn:hover{background:var(--theme-dark)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.pulse{animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(20,184,166,.55)}70%{box-shadow:0 0 0 16px rgba(20,184,166,0)}100%{box-shadow:0 0 0 0 rgba(20,184,166,0)}}
/* spacer */
.spacer{width:100%}
/* alert */
.alert{border-radius:var(--radius);padding:16px 18px;margin:8px 0}
.alert.success{background:#ecfdf5;border:1px solid #a7f3d0}
.alert.warning{background:#fffbeb;border:1px solid #fde68a}
.alert.danger{background:#fef2f2;border:1px solid #fecaca}
.alert.info{background:#eff6ff;border:1px solid #bfdbfe}
/* metric */
.metric{margin:10px 0}
.metric .m-top{display:flex;justify-content:space-between;font-weight:600;margin-bottom:6px;font-size:.95rem}
.metric .m-sub{color:var(--content)}
.metric .m-track{height:10px;background:#e4e4e7;border-radius:999px;position:relative;overflow:visible}
.metric .m-fill{height:100%;border-radius:999px;transition:width 1s ease}
.metric .m-dot{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;border:3px solid #fff;transform:translate(-50%,-50%);box-shadow:0 1px 4px rgba(0,0,0,.25);transition:left 1s ease}
/* barra tipo IMC: escala verde -> amarelo -> rojo */
.metric .m-track.m-imc{height:12px;background:linear-gradient(90deg,#22c55e 0%,#22c55e 26%,#fbbf24 50%,#f97316 74%,#dc2626 100%)}
.metric .m-dot-imc{position:absolute;top:50%;left:4%;width:20px;height:20px;border-radius:50%;background:#fff;border:3px solid #3f3f46;transform:translate(-50%,-50%);box-shadow:0 1px 5px rgba(0,0,0,.35);transition:left 1s ease}
.metric .m-track.m-imc{margin-top:30px}
.metric .m-you{position:absolute;top:-26px;left:4%;transform:translateX(-50%);transition:left 1s ease;z-index:2}
.metric .m-you span{display:inline-block;background:var(--title);color:#fff;font-size:.72rem;font-weight:800;padding:2px 9px;border-radius:6px;white-space:nowrap;position:relative}
.metric .m-you span::after{content:'';position:absolute;left:50%;bottom:-5px;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--title);border-bottom:0}
.m-zones{display:flex;justify-content:space-between;margin-top:9px;font-size:.74rem;font-weight:800}
.m-zones .z-ok{color:#16a34a}
.m-zones .z-mid{color:#d97706}
.m-zones .z-bad{color:#dc2626}
.m-legend{text-align:center;color:var(--content);font-size:.8rem;margin-top:8px}
.bg-red-500{background:#ef4444}
.bg-green-500{background:#22c55e}
.bg-yellow-500{background:#eab308}
/* height/weight controls */
.measure{margin:12px 0;text-align:center}
.measure .val{font-size:2.6rem;font-weight:800;color:var(--theme)}
.measure .val small{font-size:1.1rem;color:var(--content);font-weight:600;margin-left:4px}
.measure input[type=range]{-webkit-appearance:none;width:100%;height:8px;border-radius:999px;
  background:linear-gradient(90deg,var(--theme) var(--p,50%),#e4e4e7 var(--p,50%));margin-top:18px;outline:none}
.measure input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;
  background:#fff;border:4px solid var(--theme);box-shadow:0 2px 8px rgba(0,0,0,.2);cursor:pointer}
.measure .scale{display:flex;justify-content:space-between;color:#a1a1aa;font-size:.8rem;margin-top:8px}
/* field */
.field{margin:12px 0}
.field input{width:100%;border:2px solid #e4e4e7;border-radius:var(--radius);padding:16px;font-size:1.1rem;
  font-family:inherit;text-align:center;outline:none}
.field input:focus{border-color:var(--theme)}
/* price */
.price{border:2px solid var(--theme);border-radius:var(--radius);padding:18px;text-align:center;margin:8px 0;background:#f0fdfa}
.price .p-featured{color:var(--content);font-weight:600;margin-bottom:6px}
.price .p-title{font-weight:700;margin-bottom:8px}
.price .p-main{display:flex;align-items:baseline;justify-content:center;gap:8px}
.price .p-before{color:var(--content);font-weight:600}
.price .p-value{font-size:2.4rem;font-weight:900;color:var(--theme)}
.price .p-after{color:var(--content);margin-top:6px;font-weight:500}
/* plans (seletor de 3 planos) */
.plans{margin:10px 0}
.plans-title{font-weight:800;font-size:1.1rem;margin:0 0 14px;text-align:center}
.plan{position:relative;display:block;width:100%;
  border:2.5px solid #e4e4e7;border-radius:18px;background:#fff;cursor:pointer;overflow:visible;
  padding:20px 18px;margin-bottom:18px;font-family:inherit;text-align:left;transition:.18s}
.plan-head{display:flex;align-items:center;justify-content:space-between;gap:12px;position:relative;z-index:1}
.plan-tagline{position:relative;z-index:1;color:var(--theme-dark);font-weight:700;font-size:.82rem;margin-top:10px}
.plan-features{list-style:none;margin:12px 0 0;padding:12px 0 0;border-top:1px dashed #dbe4e2;position:relative;z-index:1}
.plan-features li{display:flex;gap:8px;align-items:flex-start;font-size:.86rem;color:#475569;padding:4px 0;line-height:1.35}
.plan-features .pf-ic{color:var(--theme);font-weight:900;flex:0 0 auto;margin-top:1px}
.plan.popular .plan-features{border-top-color:#a7f3d0}
.plan:hover{border-color:var(--theme);transform:translateY(-1px)}
/* SOLO el plan seleccionado se rellena en teal + brilla */
.plan.selected{border-color:var(--theme);border-width:3px;background:#f0fdfa;
  animation:planPulse 2.2s ease-in-out infinite}
/* el popular sin seleccionar vuelve a card normal (solo mantiene el sello) */
.plan.popular:not(.selected){border-color:#e4e4e7;border-width:2.5px;background:#fff}
@keyframes planPulse{
  0%,100%{box-shadow:0 6px 18px rgba(20,184,166,.20),0 0 0 0 rgba(20,184,166,.0)}
  50%{box-shadow:0 10px 28px rgba(20,184,166,.38),0 0 0 6px rgba(20,184,166,.14)}}
/* reflexo que passa no card popular */
.plan-shine{position:absolute;inset:0;border-radius:16px;overflow:hidden;pointer-events:none;z-index:0}
.plan-shine::before{content:'';position:absolute;top:0;left:-70%;width:45%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.65),transparent);
  transform:skewX(-20deg);animation:planShine 3.2s ease-in-out infinite}
@keyframes planShine{0%{left:-70%}45%{left:130%}100%{left:130%}}
.plan-badge{position:absolute;top:-13px;left:18px;z-index:3;background:var(--theme);color:#fff;
  font-size:.74rem;font-weight:800;letter-spacing:.5px;padding:4px 12px;border-radius:999px;
  box-shadow:0 3px 10px rgba(20,184,166,.5)}
.plan-badge::before{content:'✨ ';animation:twinkle 1.3s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:1;filter:none}50%{opacity:.35}}
.plan-left{display:flex;align-items:center;gap:14px;position:relative;z-index:1}
.plan-radio{width:24px;height:24px;border-radius:50%;border:2.5px solid #d4d4d8;flex:0 0 auto;position:relative}
.plan.selected .plan-radio{border-color:var(--theme)}
.plan.selected .plan-radio::after{content:'';position:absolute;inset:4px;border-radius:50%;background:var(--theme)}
.plan-name{font-weight:800;font-size:1.25rem;color:var(--title)}
.plan-total{color:var(--content);font-weight:600;font-size:.9rem;margin-top:3px}
.plan-perday{text-align:right;flex:0 0 auto;line-height:1.05;position:relative;z-index:1}
.pd-value{display:block;font-size:2.15rem;font-weight:900;color:var(--theme)}
.plan.selected .pd-value{text-shadow:0 0 14px rgba(20,184,166,.45);animation:pdGlow 2s ease-in-out infinite}
@keyframes pdGlow{0%,100%{text-shadow:0 0 8px rgba(20,184,166,.30)}50%{text-shadow:0 0 20px rgba(20,184,166,.60)}}
.pd-label{display:block;font-size:.74rem;color:var(--content);font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-top:3px}
.plan-discount{position:absolute;top:-13px;right:18px;z-index:3;background:#ef4444;color:#fff;
  font-size:.76rem;font-weight:800;letter-spacing:.3px;padding:4px 11px;border-radius:999px;
  box-shadow:0 3px 10px rgba(239,68,68,.45)}
.plan-total s{color:#a1a1aa;font-weight:600}
.plan-total b{color:var(--title);font-weight:800}
/* ---- raspadinha ---- */
.scratch-screen{position:relative;overflow:hidden;background:#effcf9;margin:-18px -18px 0;padding:28px 20px 10px;
  display:flex;flex-direction:column;align-items:center;min-height:calc(100vh - 60px)}
.scratch-title{font-size:1.9rem;font-weight:900;text-align:center;margin:6px 0 10px;color:var(--title)}
.scratch-sub{text-align:center;color:var(--content);max-width:420px;margin-bottom:22px;position:relative;z-index:2}
.scratch-sub p{margin:0}
.scratch-card{position:relative;z-index:2;width:100%;max-width:300px;background:#fff;border:3px solid var(--theme);
  border-radius:22px;padding:20px;box-shadow:0 12px 30px rgba(20,184,166,.18);text-align:center}
.scratch-hint{font-weight:700;color:var(--content);margin-bottom:12px}
.scratch-zone{position:relative;width:200px;height:104px;margin:0 auto;border-radius:14px;overflow:hidden}
.scratch-reward{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#2dd4bf,#0d9488);border-radius:14px}
.sr-pct{font-size:2.6rem;font-weight:900;color:#fff;letter-spacing:1px}
.scratch-canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:14px;touch-action:none;
  transition:opacity .4s ease}
.scratch-canvas.cleared{opacity:0;pointer-events:none}
.scratch-reward-text{font-weight:800;margin-top:16px;color:var(--title)}
.scratch-note{font-size:.85rem;color:var(--content);margin-top:8px}
.scratch-card.revealed{animation:pop .4s ease}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.04)}100%{transform:scale(1)}}
/* confetti */
.confetti-layer{position:absolute;inset:0;z-index:1;pointer-events:none}
.confetti-layer .confetti{position:absolute;width:10px;height:10px}
.confetti-burst{position:absolute;inset:0;z-index:5;pointer-events:none}
.confetti-burst .confetti{position:absolute;width:9px;height:9px;animation:burst .9s ease-out forwards}
@keyframes burst{0%{transform:translate(-50%,-50%) rotate(0);opacity:1}
  100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(320deg);opacity:0}}
/* arguments */
.arguments{display:grid;gap:12px;margin:8px 0}
.argument{display:flex;gap:14px;align-items:flex-start;border:1px solid #e4e4e7;border-radius:var(--radius);padding:14px}
.argument .a-emoji{font-size:1.8rem;line-height:1;flex:0 0 auto}
.argument .a-text h2{font-size:1.05rem;margin:0 0 4px}
.argument .a-text p{margin:0;color:var(--content);font-size:.92rem}
/* loading */
.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px 0;text-align:center}
.loading .ring{width:110px;height:110px;transform:rotate(-90deg)}
.loading .ring circle{fill:none;stroke-width:10;stroke-linecap:round}
.loading .ring .bg{stroke:#e4e4e7}
.loading .ring .fg{stroke:var(--theme);transition:stroke-dashoffset .2s linear}
.loading .pct{font-size:1.6rem;font-weight:800;margin-top:-72px;margin-bottom:52px}
/* carousel */
.carousel{margin:10px 0}
.car-track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:8px;-webkit-overflow-scrolling:touch}
.car-item{flex:0 0 78%;scroll-snap-align:center}
.car-item img{width:100%;border-radius:var(--radius)}
.car-dots{display:flex;gap:6px;justify-content:center;margin-top:8px}
.car-dots span{width:8px;height:8px;border-radius:50%;background:#d4d4d8}
.car-dots span.on{background:var(--theme)}
/* charts */
.chart{margin:12px 0}
.chart svg{width:100%;height:auto;overflow:visible}
.chart .c-tip{font-size:11px;font-weight:700;fill:var(--title)}
.chart .c-xlabel{font-size:11px;fill:#a1a1aa}
.footer-note{color:#a1a1aa;font-size:.78rem;text-align:center;margin-top:24px;padding:0 10px}