/* Proposta CloudVibes — estilos da apresentação, com as fontes locais da loja. */
@font-face{font-family:"Cormorant Garamond";src:url(../fonts/cormorant-garamond-var.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Inter";src:url(../fonts/inter-var.woff2) format("woff2");font-weight:100 900;font-display:swap}


/* Layout: a paged presentation app. Fixed header (logo, page counter, dots) + one page at a time in the stage + fixed footer (back / next, progress). Each page is one interactive idea. Single light theme on purpose: the logo's cream world. */
:root{
  --surface:#faf6ed; --raised:#fffdf8; --sunken:#f1ebdf; --glass:#e8ecea;
  --ink:#2b2622; --muted:#685f55; --line:#e2d9ca; --line-strong:#8c8275;
  --flame:#a3521a; --on-flame:#ffffff; --flame-bright:#d28341; --flame-tint:#f6e4cf; --success:#2d6a3c;
  --font-display:"Cormorant Garamond","Iowan Old Style",Georgia,serif;
  --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-mono:ui-monospace,"Cascadia Mono",Menlo,monospace;
  --r-s:4px; --r-m:8px; --r-l:14px;
  --shadow:0 1px 2px rgba(27,26,24,.06),0 6px 20px rgba(27,26,24,.07);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--font-sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow:hidden}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--flame);outline-offset:2px;border-radius:var(--r-s)}
.mono{font-family:var(--font-mono);font-weight:500}
.eyebrow{font-family:var(--font-display);font-weight:600;font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--flame);margin:0}
h1,h2{font-family:var(--font-display);font-weight:600;letter-spacing:.03em;text-wrap:balance;margin:0}
h2{font-size:clamp(26px,3.6vw,38px);line-height:1.12}
h3{font-size:18px;line-height:1.3;margin:0;font-weight:600}
p{margin:0}
.lead{font-size:17px;color:var(--muted);max-width:58ch}
.gut{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

.app{height:100%;display:grid;grid-template-rows:auto 1fr auto}
/* header */
.top{border-bottom:1px solid var(--line);background:var(--surface)}
.top-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;height:56px}
.top img{height:20px;display:block}
.dots{display:flex;gap:6px;align-items:center}
.dot{width:10px;height:10px;border-radius:50%;border:0;background:var(--line);padding:0;cursor:pointer;position:relative}
.dot::after{content:"";position:absolute;inset:-9px}
.dot[aria-current="true"]{background:var(--flame);width:26px;border-radius:999px}
.counter{font-family:var(--font-mono);font-size:13px;color:var(--muted);min-width:52px;text-align:right}
/* stage */
.stage{position:relative;overflow:hidden}
.page{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;opacity:0;visibility:hidden;transform:translateX(24px);transition:opacity .35s ease,transform .35s ease,visibility 0s linear .35s;-webkit-overflow-scrolling:touch}
.page.active{opacity:1;visibility:visible;transform:none;transition:opacity .35s ease,transform .35s ease,visibility 0s}
.page.left{transform:translateX(-24px)}
.page-in{max-width:1180px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;justify-content:center;gap:28px;padding-block:32px 40px}
.head{display:grid;gap:10px}
/* footer */
.foot{border-top:1px solid var(--line);background:var(--surface)}
.foot-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:10px calc(10px + env(safe-area-inset-bottom,0px))}
.navbtn{display:inline-flex;align-items:center;gap:8px;border-radius:var(--r-m);padding:11px 18px;cursor:pointer;font-weight:600;border:1px solid var(--line-strong);background:transparent}
.navbtn:disabled{opacity:.35;cursor:default}
.navbtn.primary{background:var(--flame);border-color:var(--flame);color:var(--on-flame)}
.navbtn.primary:hover:not(:disabled){filter:brightness(1.07)}
.foot .title{font-size:14px;color:var(--muted);text-align:center;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prog{height:3px;background:var(--line)}
.prog i{display:block;height:100%;background:var(--flame-bright);width:0;transition:width .35s}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--flame);color:var(--on-flame);border:0;border-radius:var(--r-m);padding:13px 24px;font-weight:600;cursor:pointer}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line-strong)}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:var(--raised)}
.chip b{font-family:var(--font-mono);font-weight:500;color:var(--flame)}
.hint{font-size:13px;color:var(--muted)}

/* 0 cover */
.cover{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.cover h1{font-size:clamp(32px,5vw,56px);line-height:1.06;margin-top:14px}
.cover .lead{margin-top:18px}
.cover .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.cover .facts{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.cover figure{margin:0;display:grid;place-items:center}

/* animated logo */
.cv-logo{position:relative;width:min(330px,100%);aspect-ratio:804/982}
.cv-logo svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible;-webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,transparent,#000 4%,#000 98%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,transparent,#000 4%,#000 98%,transparent);mask-composite:intersect;opacity:0;filter:blur(8px);transition:opacity 1.6s ease,filter 1.8s ease}
.cv-logo.ready svg{opacity:1;filter:blur(0)}
.cv-logo .s0{animation:cvBreathe 7s ease-in-out infinite}
.cv-logo .s1,.cv-logo .s2{opacity:0;animation:cvRise 6.5s linear infinite}
.cv-logo .s2{animation-delay:-3.25s}
.cv-logo .f0{animation:cvFlick 1.9s ease-in-out infinite}
.cv-logo .f1{opacity:0;animation:cvRiseF 3.2s linear infinite}
@keyframes cvBreathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes cvRise{0%{transform:translateY(10px);opacity:0}25%{opacity:.55}100%{transform:translateY(-42px);opacity:0}}
@keyframes cvRiseF{0%{transform:translateY(6px);opacity:0}30%{opacity:.45}100%{transform:translateY(-26px);opacity:0}}
@keyframes cvFlick{0%,100%{opacity:1}35%{opacity:.82}60%{opacity:.96}80%{opacity:.88}}
.cv-switch{position:absolute;left:48.3%;top:94.2%;width:2%;height:3.3%;border-radius:2px;pointer-events:none}
.cv-switch::before{content:"";position:absolute;inset:0;border-radius:2px;background:#4a3f36;opacity:0}
.cv-switch::after{content:"";position:absolute;left:50%;top:50%;width:900%;height:300%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(232,140,60,.55),rgba(232,140,60,0));mix-blend-mode:multiply;opacity:0}
.cv-logo.ready .cv-switch::before{animation:cvOff 1.6s steps(1,end) infinite 1.8s}
.cv-logo.ready .cv-switch::after{animation:cvGlow 1.6s ease-in-out infinite 1.8s}
@keyframes cvOff{0%{opacity:0}62%{opacity:.78}100%{opacity:0}}
@keyframes cvGlow{0%{opacity:1}55%{opacity:1}62%{opacity:0}100%{opacity:0}}
.cv-logo.paused *,.cv-logo.paused .cv-switch::before,.cv-logo.paused .cv-switch::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.cv-logo svg{transition:none}.cv-logo *,.cv-logo .cv-switch::before,.cv-logo .cv-switch::after{animation:none!important}.cv-logo .s1,.cv-logo .s2,.cv-logo .f1{display:none}}

/* 1 flips */
.flips{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.flip{perspective:900px;min-width:0}
.flip button{all:unset;display:block;width:100%;cursor:pointer;position:relative;min-height:260px;border-radius:var(--r-l)}
.flip button:focus-visible{outline:2px solid var(--flame);outline-offset:3px}
.flip .face{position:absolute;inset:0;border-radius:var(--r-l);padding:20px;display:flex;flex-direction:column;gap:12px;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.flip .front{background:var(--ink);color:var(--surface)}
.flip .front .big{font-family:var(--font-mono);font-size:30px;color:var(--flame-bright);line-height:1.1}
.flip .front small{color:#cfc7bb;font-size:13px;margin-top:auto}
.flip .back{background:var(--raised);border:1px solid var(--line);transform:rotateY(180deg)}
.flip .back .tag{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--success)}
.flip .back small{color:var(--muted);font-size:13px;margin-top:auto}
.flip[data-open="true"] .front{transform:rotateY(-180deg)}
.flip[data-open="true"] .back{transform:rotateY(0)}
.score{font-family:var(--font-mono);font-size:14px;color:var(--muted)}
.score b{color:var(--flame)}

/* 2 store */
.store{border:1px solid var(--line);border-radius:var(--r-l);background:var(--raised);box-shadow:var(--shadow);overflow:hidden}
.store-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line)}
.store-bar img{height:16px}
.store-bar .demo{font-size:12px;color:var(--muted);font-family:var(--font-mono)}
.cartbtn{background:var(--ink);color:var(--surface);border:0;border-radius:var(--r-m);padding:7px 12px;cursor:pointer;font-weight:500;font-size:14px}
.cartbtn span{font-family:var(--font-mono);margin-left:6px}
.store-body{display:grid;grid-template-columns:1fr 300px}
.catalog{padding:16px;min-width:0}
.filter{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px}
.filter > span{font-size:14px;color:var(--muted)}
.fbtn{border:1px solid var(--line-strong);background:transparent;border-radius:999px;padding:5px 12px;cursor:pointer;font-size:14px}
.fbtn[aria-pressed="true"]{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.card{border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);display:flex;flex-direction:column;min-width:0}
.card[hidden]{display:none}
.card .pic{aspect-ratio:2/1;background:var(--sunken);border-radius:var(--r-m) var(--r-m) 0 0;display:grid;place-items:center}
.card .pic svg{height:80%;width:auto}
.card .body{padding:10px 12px;display:flex;flex-direction:column;gap:7px;flex:1}
.card h3{font-size:14.5px}
.specs{display:flex;flex-wrap:wrap;gap:4px}
.spec{font-family:var(--font-mono);font-size:11.5px;background:var(--glass);border-radius:var(--r-s);padding:2px 6px}
.card .row{display:flex;align-items:center;justify-content:space-between;margin-top:auto;gap:8px}
.price{font-weight:600;color:var(--flame);font-size:17px}
.add{background:var(--flame);color:var(--on-flame);border:0;border-radius:var(--r-m);padding:6px 11px;cursor:pointer;font-weight:600;font-size:13.5px}
.add.done{background:var(--success)}
.cart{border-left:1px solid var(--line);padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--raised);min-width:0}
.cart h3{font-family:var(--font-display);letter-spacing:.06em}
.lines{display:flex;flex-direction:column;gap:6px;font-size:14px}
.line{display:flex;justify-content:space-between;gap:8px;align-items:center}
.qty{display:inline-flex;align-items:center;gap:6px}
.qty button{width:22px;height:22px;border-radius:50%;border:1px solid var(--line-strong);background:transparent;cursor:pointer;line-height:1;padding:0;font-size:14px}
.empty{color:var(--muted);font-size:14px}
.ship{background:var(--flame-tint);border-radius:var(--r-m);padding:10px 12px;font-size:13.5px}
.meter{height:6px;background:#fff;border-radius:999px;margin-top:8px;overflow:hidden}
.meter i{display:block;height:100%;width:0;background:var(--flame);transition:width .3s}
.totals{border-top:1px solid var(--line);padding-top:8px;font-size:14px;display:grid;gap:4px}
.totals .t{font-weight:600;font-size:16px}
.suggest{border:1px dashed var(--flame-bright);border-radius:var(--r-m);padding:10px 12px;font-size:13.5px}
.suggest[hidden]{display:none}
.suggest button{margin-top:8px}
.callouts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.callout{display:flex;gap:10px;font-size:14px;color:var(--muted)}
.callout b{color:var(--ink)}
.num{flex:none;width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--surface);display:grid;place-items:center;font-family:var(--font-mono);font-size:12px}

/* 3 packs */
.packs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pack{text-align:left;border:1px solid var(--line);border-radius:var(--r-l);background:var(--raised);padding:22px;cursor:pointer;display:flex;flex-direction:column;gap:12px;position:relative;min-width:0}
.pack[aria-pressed="true"]{border:2px solid var(--flame);padding:21px;box-shadow:var(--shadow)}
.pack .name{font-family:var(--font-display);font-weight:600;letter-spacing:.06em;font-size:20px}
.pack .p{font-family:var(--font-mono);font-size:28px}
.pack .p small{font-family:var(--font-sans);font-size:13px;color:var(--muted)}
.pack ul{margin:0;padding-left:18px;font-size:14px;color:var(--muted);display:grid;gap:4px}
.pack .badge{position:absolute;top:-11px;right:16px;background:var(--flame);color:var(--on-flame);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:999px}
.pack .weeks{font-size:13px}
.pack .pick{margin-top:auto;font-size:13px;font-weight:600;color:var(--flame)}
.pack[aria-pressed="true"] .pick::before{content:"✓ "}
.summary{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between;background:var(--ink);color:var(--surface);border-radius:var(--r-l);padding:16px 22px}
.summary .k{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#cfc7bb}
.summary .v{font-family:var(--font-mono);font-size:21px}
.toggle{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14px}
.toggle input{width:18px;height:18px;accent-color:var(--flame-bright)}

/* 4 sim */
.sim{display:grid;grid-template-columns:1fr 1.1fr;gap:28px;align-items:start}
.ctrl{display:grid;gap:22px}
.ctrl label{display:grid;gap:8px;font-size:15px}
.ctrl .lv{display:flex;justify-content:space-between;align-items:baseline}
.ctrl output{font-family:var(--font-mono);font-size:18px;color:var(--flame)}
input[type=range]{width:100%;accent-color:var(--flame);height:28px}
.pickpack{display:flex;flex-wrap:wrap;gap:8px}
.result{background:var(--raised);border:1px solid var(--line);border-radius:var(--r-l);padding:20px;display:grid;gap:14px}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kpi{background:var(--surface);border-radius:var(--r-m);padding:12px}
.kpi .k{font-size:12.5px;color:var(--muted)}
.kpi .v{font-family:var(--font-mono);font-size:22px;font-variant-numeric:tabular-nums}
.kpi.hl{background:var(--ink);color:var(--surface)}
.kpi.hl .k{color:#cfc7bb}
.kpi.hl .v{color:var(--flame-bright)}
.chart{height:150px}
.chart svg{width:100%;height:100%;display:block}
.note{font-size:12.5px;color:var(--muted)}

/* 5 steps */
.steps{display:grid;grid-template-columns:repeat(6,1fr);position:relative}
.steps::before{content:"";position:absolute;left:8%;right:8%;top:22px;height:2px;background:var(--line)}
.step{all:unset;cursor:pointer;display:grid;justify-items:center;gap:8px;text-align:center;position:relative;padding:0 4px;border-radius:var(--r-m)}
.step:focus-visible{outline:2px solid var(--flame);outline-offset:2px}
.step .c{width:44px;height:44px;border-radius:50%;background:var(--raised);border:2px solid var(--line-strong);display:grid;place-items:center;font-family:var(--font-mono);position:relative;z-index:1}
.step.done .c{border-color:var(--flame-bright);color:var(--flame)}
.step[aria-selected="true"] .c{background:var(--flame);border-color:var(--flame);color:var(--on-flame)}
.step span{font-size:14px;font-weight:500}
.step small{font-family:var(--font-mono);font-size:11.5px;color:var(--muted)}
.stepcard{background:var(--raised);border:1px solid var(--line);border-radius:var(--r-l);padding:22px;display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center}
.stepcard .big{font-family:var(--font-display);font-size:48px;color:var(--flame-bright);line-height:1}
.stepcard ul{margin:8px 0 0;padding-left:18px;color:var(--muted);font-size:15px}
.stepnext{border:1px solid var(--line-strong);background:transparent;border-radius:var(--r-m);padding:9px 14px;cursor:pointer;font-weight:500;white-space:nowrap}

/* 6 trust */
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.col{background:var(--raised);border:1px solid var(--line);border-radius:var(--r-l);padding:20px;display:grid;gap:10px;align-content:start}
.col h3{font-family:var(--font-display);letter-spacing:.05em;font-size:17px}
.col ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14.5px}
.col li{display:flex;gap:8px}
.col li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--flame-bright);margin-top:9px}
.col.no li::before{background:var(--line-strong)}

/* 7 contact */
.final{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center}
.contact{background:var(--ink);color:var(--surface);border-radius:var(--r-l);padding:24px;display:grid;gap:12px}
.contact .row{display:flex;justify-content:space-between;gap:10px;align-items:center;border-bottom:1px solid #4a433d;padding-bottom:10px;flex-wrap:wrap}
.contact .row:last-child{border-bottom:0;padding-bottom:0}
.contact .k{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#cfc7bb}
.contact .v{font-family:var(--font-mono);user-select:all;overflow-wrap:anywhere}
.copy{background:transparent;color:var(--surface);border:1px solid #6b6259;border-radius:var(--r-s);padding:5px 10px;cursor:pointer;font-size:13px}
.recap{display:grid;gap:8px;margin-top:20px}
.recap div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-bottom:8px;font-size:15px}
.recap span:last-child{font-family:var(--font-mono)}

@media (max-width:900px){
  .cover,.final,.sim{grid-template-columns:1fr}
  .cover figure{order:-1}.cv-logo{width:190px}
  .flips{grid-template-columns:1fr 1fr}
  .store-body{grid-template-columns:1fr}
  .cart{border-left:0;border-top:1px solid var(--line)}
  .grid{grid-template-columns:1fr 1fr}
  .packs,.cols,.callouts{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(3,1fr);row-gap:20px}.steps::before{display:none}
  .page-in{justify-content:flex-start}
}
@media (max-width:560px){
  .flips{grid-template-columns:1fr}
  .flip button{min-height:190px}
  .kpis{grid-template-columns:1fr 1fr}
  .stepcard{grid-template-columns:1fr}
  .foot .title{display:none}
  .navbtn{padding:11px 14px}
  .card .pic{aspect-ratio:1/1}
  .add{padding:6px 9px;font-size:13px}
  .price{font-size:15.5px}
  .counter{display:none}
}
@media (prefers-reduced-motion:reduce){
  .page,.page.active{transition:none}
  .flip .face{transition:none}
}

.site-jump{position:absolute;right:16px;top:14px;z-index:5;display:flex;gap:14px;font-size:13px}
.site-jump a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.site-jump a:hover{color:var(--flame);border-color:var(--flame)}
.cover-cta-note{margin-top:8px;font-size:14px;color:var(--muted)}
@media (max-width:640px){.site-jump{right:10px;top:10px;gap:10px;font-size:12px}}

a.btn{text-decoration:none}