/* Vida Intermitente — versão estática (mobile first)
   Direção: clean + premium + tecnologia (verde/laranja)
   Sem dependências externas obrigatórias.
*/

@import url("./fonts.css");

:root{
  --bg:#ffffff;
  --fg:#0b1f24;
  --muted:#5b6b73;
  --line:#e7ecef;
  --card:#ffffff;
  --soft:#f6f7f9;

  /* aproximados da logo */
  --green:#0F766E;
  --green-2:#34D399;
  --orange:#F97316;
  --orange-2:#e76511;

  --radius:20px;
  --shadow: 0 14px 30px -22px rgba(0,0,0,.35), 0 7px 16px -12px rgba(0,0,0,.22);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, sans-serif;
  background: var(--bg);
  color: var(--fg);
}

h1,h2,h3{font-family:"Fraunces", Georgia, serif; margin:0}

/* background vibes */
.page{
  min-height:100vh;
  position:relative;
  overflow:hidden;
}
.page::before{
  content:"";
  position:absolute;
  inset:-120px -120px auto -120px;
  height:520px;
  background:
    radial-gradient(closest-side, rgba(52,211,153,.20), transparent 70%),
    radial-gradient(closest-side, rgba(15,118,110,.14), transparent 72%),
    radial-gradient(closest-side, rgba(249,115,22,.18), transparent 74%);
  filter: blur(2px);
  opacity:.95;
  pointer-events:none;
}
.page::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("../images/padrao-tecnologia.jpeg");
  background-size:860px 860px;
  background-position:center;
  opacity:.10;
  mix-blend-mode:multiply;
  pointer-events:none;
}

/* top bar */
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar__inner{
  max-width: 980px;
  margin:0 auto;
  padding: 12px 16px;
  display:flex;
  align-items:center;
  gap:12px;
}
.topbar__logo{height:42px; width:auto; display:block; object-fit:contain}
.topbar__logo.small{height:32px}
.topbar__badges{margin-left:auto; display:none; gap:8px}
.badge{
  display:inline-flex;
  align-items:center;
  padding:8px 10px;
  border-radius:999px;
  background: var(--soft);
  border:1px solid var(--line);
  color: var(--muted);
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
}
@media (min-width: 640px){
  .topbar__badges{display:flex}
}

.progressWrap{max-width:980px;margin:0 auto;padding:0 16px 12px}
.progressRow{display:flex;align-items:center;gap:10px}
.progress{
  height:8px;
  border-radius:999px;
  background: #eef2f4;
  overflow:hidden;
  flex:1;
  border:1px solid var(--line);
}
.progress > div{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, var(--green), var(--green-2));
  border-radius:999px;
  transition: width .25s ease;
}
.progressPct{width:44px;text-align:right;font-size:12px;color:var(--muted);font-variant-numeric: tabular-nums}

/* layout */
.container{max-width:980px;margin:0 auto;padding:18px 16px 44px; position:relative; z-index:2}
.grid{display:grid; gap:16px}
@media (min-width: 1024px){
  .grid{grid-template-columns: 1.15fr .85fr; gap:22px}
}

/* cards */
.card{
  background: var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.card__pad{padding:18px}
.card__title{font-size:28px; line-height:1.05}
.card__desc{margin-top:10px; color:var(--muted); font-size:16px; line-height:1.35}

/* right panel (desktop only) */
.side{display:none}
@media (min-width: 1024px){
  .side{display:block; position:sticky; top:112px}
}
.sideHead{display:flex; align-items:flex-start; gap:12px}
.miniMark{height:44px; width:44px; border-radius:16px; background: rgba(15,118,110,.10); display:grid; place-items:center; color:var(--green); font-weight:800}
.sideTitle{font-weight:800}
.sideSub{font-size:12px;color:var(--muted); margin-top:4px}
.quote{margin-top:14px; padding:12px; background: var(--soft); border:1px solid var(--line); border-radius:16px}
.quote small{display:block;color:var(--muted)}
.quote strong{display:block;margin-top:6px}
.hero{margin-top:16px; border-radius:18px; overflow:hidden; border:1px solid var(--line)}
.hero img{display:block;width:100%;height:auto}
.heroStats{padding:12px;background: rgba(255,255,255,.88); backdrop-filter: blur(8px); border-top:1px solid var(--line)}
.heroStatsRow{display:flex;gap:12px;justify-content:space-between}
.heroStat small{display:block;color:var(--muted);font-size:11px}
.heroStat strong{display:block;font-size:13px;font-variant-numeric: tabular-nums}

/* buttons */
.btn{
  appearance:none;
  border:1px solid transparent;
  background: var(--green);
  color:#fff;
  border-radius:999px;
  padding: 14px 18px;
  font-weight:800;
  font-size:16px;
  min-height:56px;
  width:100%;
  cursor:pointer;
  box-shadow: 0 10px 22px -16px rgba(15,118,110,.6);
  transition: transform .08s ease, background .15s ease;
}
.btn:active{transform: scale(.99)}
.btn:disabled{opacity:.55; cursor:not-allowed}
.btn--outline{
  background: transparent;
  color: var(--fg);
  border-color: var(--line);
  box-shadow:none;
}
.btn--cta{
  background: var(--orange);
  box-shadow: 0 10px 22px -16px rgba(249,115,22,.7);
}
.btn--cta:hover{background: var(--orange-2)}

/* CTA principal (intro) — mais destaque */
.btn--hero{
  width: min(520px, 100%);
  font-size: 18px;
  letter-spacing: .2px;
  padding: 18px 22px;
  min-height: 62px;
  box-shadow: 0 16px 30px -18px rgba(249,115,22,.85), 0 10px 18px -16px rgba(0,0,0,.25);
}

.btnRow{display:flex; gap:10px; margin-top:14px}
.btnRow .btn{width:auto; min-width:140px}
@media (max-width: 639px){
  .btnRow{justify-content:space-between}
  .btnRow .btn{min-width:0; flex:1}
}

/* micro promises */
.promises{display:grid; gap:10px; margin-top:14px}
@media (min-width: 640px){
  .promises{grid-template-columns: repeat(3, 1fr)}
}
.pill{
  background: var(--soft);
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px;
}
.pill strong{display:block;font-size:18px}
.pill small{display:block;color:var(--muted); margin-top:4px}

/* question options */
.options{display:grid; gap:10px; margin-top:12px}
.option{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 14px;
  border-radius:18px;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
  min-height:56px;
  transition: background .15s ease, border-color .15s ease, transform .08s ease;
}
.option:active{transform: scale(.995)}
.option:hover{background: var(--soft)}
.option__dot{height:18px;width:18px;border-radius:999px;border:2px solid rgba(15,118,110,.35)}
.option__label{flex:1;font-size:16px;line-height:1.2}
.option__check{
  height:40px;width:40px;border-radius:999px;
  display:grid; place-items:center;
  background: rgba(15,118,110,.10);
  color: transparent;
  font-weight:900;
  transition: background .15s ease, color .15s ease;
}
.option.selected{border-color: rgba(15,118,110,.45); background: rgba(52,211,153,.10)}
.option.selected .option__dot{border-color: var(--green)}
.option.selected .option__check{background: var(--orange); color:#fff}

.hintMobile{display:none; margin-top:10px; font-size:12px; color:var(--muted)}
@media (max-width: 639px){
  .hintMobile{display:block}
}

/* social */
.socialImg{border-radius:18px; overflow:hidden; border:1px solid var(--line)}
.socialImg img{display:block; width:100%; height:auto}
.stars{display:flex; align-items:center; gap:8px; margin-top:12px}
.starRow{display:flex; gap:2px}
.star{width:16px;height:16px; fill: var(--orange); color: var(--orange)}
.testimonials{display:grid; gap:10px; margin-top:12px}
.testimonial{background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px}
.testimonial p{margin:0;font-size:14px;line-height:1.35}
.testimonial small{display:block;margin-top:8px;color:var(--muted)}

/* processing */
.steps{display:grid;gap:10px;margin-top:12px}
.stepLine{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;border:1px solid var(--line);background:#fff}
.stepBubble{height:36px;width:36px;border-radius:999px;display:grid;place-items:center;font-weight:900;background:var(--soft);color:rgba(0,0,0,.25);transition:all .2s ease}
.stepLine.done .stepBubble{background:var(--green);color:#fff}

.metrics{display:grid;gap:10px;margin-top:14px}
@media(min-width:640px){.metrics{grid-template-columns:repeat(3,1fr)}}
.metric{background:var(--soft);border:1px solid var(--line);border-radius:16px;padding:12px}
.metric small{display:block;color:var(--muted);font-size:12px}
.metric strong{display:block;margin-top:4px;font-size:18px;font-variant-numeric: tabular-nums}

/* result */
.resultGrid{display:grid; gap:12px; margin-top:12px}
@media(min-width:1024px){.resultGrid{grid-template-columns: .42fr .58fr}}
.resultLeft{background:var(--soft); border:1px solid var(--line); border-radius:18px; padding:12px}
.resultLeft img{width:100%;height:auto;border-radius:14px;border:1px solid var(--line); background:#fff; display:block}
.barLine{margin-top:10px}
.barLineRow{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted)}
.bar{margin-top:6px;height:8px;border-radius:999px;background:#fff;border:1px solid var(--line);overflow:hidden}
.bar > div{height:100%;width:0%;background:var(--green);border-radius:999px;transition:width .4s ease}

.chartWrap{border:1px solid var(--line);border-radius:18px;padding:14px;background:#fff}
.chartTop{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.chartTop strong{font-size:14px}
.chartTop small{display:block;color:var(--muted);margin-top:3px}
.weekBadge{display:inline-flex;align-items:center;gap:8px;background:rgba(15,118,110,.10);border:1px solid rgba(15,118,110,.18);color:var(--green);border-radius:999px;padding:8px 10px;font-weight:900;font-size:12px;font-variant-numeric: tabular-nums}

.bars{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.barCard{background:var(--soft);border:1px solid var(--line);border-radius:16px;padding:10px}
.barH{height:92px;display:flex;align-items:flex-end}
.barH > div{width:100%;border-radius:12px;background:linear-gradient(180deg,var(--orange),var(--green));height:10px}
.barCard small{display:block;margin-top:8px;color:var(--muted);font-size:11px}
.barCard strong{display:block;margin-top:2px;font-size:14px;font-variant-numeric: tabular-nums}

/* offer */
.offerHead{background: var(--green); color:#fff; padding:14px}
.offerHeadRow{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.offerHead .badge{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.18);color:#fff}
.offerGrid{display:grid;gap:12px;margin-top:10px}
@media(min-width:1024px){.offerGrid{grid-template-columns:1fr 1fr}}
.list{margin:10px 0 0; padding-left:0; list-style:none; display:grid; gap:10px}
.list li{display:flex; gap:10px; align-items:flex-start; font-size:14px}
.ico{width:18px;height:18px; flex:0 0 auto; color: var(--green)}
.bonus{margin-top:12px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px}
.bonus strong{display:flex;align-items:center;gap:8px}

.price{display:flex;align-items:flex-end;gap:10px;margin-top:6px}
.price del{color:rgba(0,0,0,.45);font-size:14px}
.price span{font-size:38px;font-weight:900;color:var(--green);line-height:1}

.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.trustItem{background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:10px;display:flex;gap:8px;align-items:center}
.trustItem small{color:var(--muted);font-size:11px;line-height:1.1}

/* footer note */
.disclaimer{margin-top:14px;color:var(--muted);font-size:12px;line-height:1.4}

/* simple transitions */
.view{animation: fadeUp .22s ease-out both}
@keyframes fadeUp{from{opacity:0; transform:translateY(10px) scale(.995)}to{opacity:1; transform:translateY(0) scale(1)}}

/* logo intro animation */
.logoIntro{animation: logoIn .55s ease-out both}
@keyframes logoIn{from{opacity:0; transform:translateY(-8px) scale(.98)}to{opacity:1; transform:translateY(0) scale(1)}}