/* VarandaCRM — tela única de lançamento. Tokens da marca copiados de ../branding/tokens. */
:root{--blue:#014EFB;--blue-600:#0144DF;--blue-700:#0239BF;--blue-100:#D9E4FE;--blue-50:#EDF3FF;--sky:#0FA8FC;--navy:#03185D;--ink:#0B1921;
  --s50:#F6F8FA;--s100:#EDF1F4;--s200:#DCE3E8;--s300:#C2CDD5;--s500:#677885;--s600:#4B5B68;--ok:#0B7A3B;--warn:#B45309;--err:#B3261E;
  --display:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;--ui:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --shadow-soft:0 8px 28px rgba(11,25,33,.08);color-scheme:light}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font:400 1rem/1.6 var(--ui);color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;overflow:hidden}
img,svg{max-width:100%}
h1,h2,h3{font-family:var(--display);line-height:1.1;margin:0;text-wrap:balance}
p{margin:0}
a{color:var(--blue-600)}
.wrap{max-width:1160px;margin:0 auto;padding-inline:max(20px,env(safe-area-inset-left,0px))}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;border-radius:8px;z-index:60}.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px;border-radius:8px}

/* tela única: ocupa a janela, sem rolagem */
.screen{position:relative;height:100vh;height:100dvh;display:grid;grid-template-rows:auto auto minmax(0,1fr);overflow:hidden;padding-top:env(safe-area-inset-top,0px)}
.page-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(52% 46% at 14% 0%,rgba(1,78,251,.16),transparent 70%),radial-gradient(46% 42% at 88% 4%,rgba(15,168,252,.20),transparent 70%),linear-gradient(180deg,#F3F7FF 0,#fff 78%)}
.page-bg::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(1,78,251,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(1,78,251,.06) 1px,transparent 1px);background-size:72px 72px;
  -webkit-mask-image:radial-gradient(60% 55% at 50% 30%,#000,transparent 75%);mask-image:radial-gradient(60% 55% at 50% 30%,#000,transparent 75%)}

.bar{width:100%;padding-block:clamp(16px,3vh,28px)}
.bar{text-align:center}.bar a{display:inline-block}.bar img{height:26px;width:auto;display:block}

.hero{text-align:center;padding-top:clamp(4px,3vh,36px)}
h1{font-size:clamp(2.3rem,min(6.6vw,10.5vh),5rem);font-weight:800;letter-spacing:-.025em;margin:0 auto;max-width:11.5em}
.lead{font-size:clamp(1.02rem,min(1.7vw,2.6vh),1.3rem);color:var(--s600);margin:clamp(12px,2.4vh,22px) auto 0;max-width:34em}
.cta{display:flex;justify-content:center;margin-top:clamp(20px,3.6vh,34px)}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;padding:12px 20px;font:600 .95rem/1.2 var(--ui);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background .15s,box-shadow .15s}
.btn.primary{background:var(--blue);color:#fff;box-shadow:0 8px 22px rgba(1,78,251,.30)}
.btn.primary:hover{background:var(--blue-600)}
.btn.ghost{background:#fff;color:var(--ink);border-color:var(--s200)}
.btn.lg{padding:16px 30px;font-size:1.05rem;border-radius:14px}
.btn[disabled]{opacity:.65;cursor:progress}

/* a tela do produto sobe até o pé da janela e é cortada, como nas referências */
.stage{position:relative;min-height:0;overflow:hidden;padding-top:clamp(22px,4.4vh,56px);display:flex;flex-direction:column}
.stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(96px,17vh,150px);background:linear-gradient(180deg,rgba(255,255,255,0),#fff 62%);pointer-events:none;z-index:4}
.frame{position:relative;flex:1 1 auto;min-height:0;width:100%;max-width:1060px;margin:0 auto;padding-inline:max(20px,env(safe-area-inset-left,0px));display:flex;flex-direction:column}
.browser{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;border-radius:22px 22px 0 0;background:#fff;border:1px solid var(--s200);border-bottom:0;box-shadow:0 30px 80px rgba(1,78,251,.18);overflow:hidden;text-align:left}
.browser-bar{display:flex;align-items:center;gap:14px;padding:12px 16px;background:linear-gradient(180deg,#fff,var(--s50));border-bottom:1px solid var(--s200)}
.browser-bar .dots{display:flex;gap:7px}.browser-bar .dots i{width:11px;height:11px;border-radius:50%}
.browser-bar .dots i:nth-child(1){background:#FF6159}.browser-bar .dots i:nth-child(2){background:#FFBD2E}.browser-bar .dots i:nth-child(3){background:#27C93F}
.url{flex:1;max-width:420px;margin-inline:auto;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--s100);border-radius:9px;padding:6px 12px;font:500 .8rem/1.2 var(--ui);color:var(--s600)}
.shot{display:block;width:100%;height:auto}  /* use <img class="shot" src="assets/screens/funil.png"> no lugar do mock */
.legal{position:absolute;left:0;right:0;bottom:max(10px,env(safe-area-inset-bottom,0px));text-align:center;font-size:.78rem;color:var(--s500);z-index:5;padding-inline:20px}

/* cartões flutuantes (só em telas largas e altas) */
.float{position:absolute;z-index:3;display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--s200);border-radius:16px;padding:11px 16px 11px 12px;box-shadow:var(--shadow-soft);font-size:.82rem;line-height:1.35;text-align:left;animation:bob 6s ease-in-out infinite alternate}
.float b{display:block;font:600 .86rem/1.3 var(--ui)}.float small{color:var(--s600)}
.float .ic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;font:700 .8rem var(--display)}
.f1{left:-9%;top:46%}.f1 .ic{background:var(--blue);color:#fff}
.f2{right:-10%;top:27%;animation-delay:-2s}.f2 .ic{background:#FDF0E1;color:var(--warn)}
.f3{left:-5%;top:70%;animation-delay:-4s}.f3 .ic{background:#E3F4EA;color:var(--ok)}
@keyframes bob{from{transform:translateY(-5px)}to{transform:translateY(7px)}}

/* formulário em gaveta (modal que sobe de baixo) */
dialog.sheet{border:0;padding:0;margin:auto;width:min(460px,calc(100% - 28px));max-width:100%;max-height:min(92dvh,640px);background:#fff;color:var(--ink);border-radius:24px;box-shadow:0 30px 90px rgba(3,24,93,.38);overflow:auto;overscroll-behavior:contain}
dialog.sheet[open]{animation:up .36s cubic-bezier(.2,.8,.2,1)}
dialog.sheet.closing{animation:down .24s ease-in forwards}
dialog.sheet::backdrop{background:rgba(3,24,93,.5);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
dialog.sheet[open]::backdrop{animation:fade .3s ease-out}
dialog.sheet.closing::backdrop{animation:fade .24s ease-in reverse forwards}
@keyframes up{from{transform:translateY(64px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes down{from{transform:translateY(0);opacity:1}to{transform:translateY(48px);opacity:0}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet-in{padding:clamp(22px,4vw,30px)}
.sheet-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.sheet h2{font-size:clamp(1.4rem,3.2vw,1.7rem);font-weight:800;letter-spacing:-.01em}
.sheet .sub{color:var(--s600);margin-top:6px;font-size:.95rem;max-width:26em}
.x{flex:none;width:40px;height:40px;border-radius:12px;border:1px solid var(--s200);background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--s600)}
.x:hover{border-color:var(--blue);color:var(--blue-600)}
.form{display:grid;gap:14px;margin-top:20px}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.fld{display:grid;gap:6px;min-width:0}
.fld label{font:600 .85rem/1.2 var(--ui)}
.fld .opt{font-weight:400;color:var(--s500)}
.fld input,.fld select,.fld textarea{font:400 1rem/1.4 var(--ui);color:var(--ink);background:#fff;border:1px solid var(--s300);border-radius:12px;padding:12px 14px;width:100%;min-width:0}
.fld textarea{min-height:92px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(1,78,251,.14)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.85rem;color:var(--s600)}
.consent input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--blue)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{min-height:1.3em;font-size:.92rem;font-weight:500}
.form-status.err{color:var(--err)}
.form .btn{width:100%}
.done{display:none;text-align:center;padding:28px 0 8px}
.done .tick{width:64px;height:64px;border-radius:50%;background:#E3F4EA;display:grid;place-items:center;margin:0 auto 18px}
.done h3{font-size:1.5rem;font-weight:800}.done p{color:var(--s600);margin:10px auto 22px;max-width:26em}
.sheet.sent .form,.sheet.sent .sub{display:none}.sheet.sent .done{display:block}

/* peças usadas por mocks.html e 404.html */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:22px}.top img{height:30px;width:auto;display:block}
.chip{display:inline-flex;align-items:center;gap:8px;border-radius:99px;padding:6px 14px;font:600 .78rem/1.2 var(--ui);letter-spacing:.06em;text-transform:uppercase;background:var(--blue-50);color:var(--blue-700)}
.chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sky)}
.eyebrow{font:700 .8rem/1.2 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--blue-600);margin-bottom:18px}
footer{background:var(--ink);color:#B7C3CC;padding-block:36px}
.foot{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between}
.foot img{height:28px;width:auto;display:block}.foot small{font-size:.85rem}

@media (max-width:1180px),(max-height:780px){.float{display:none}}
@media (max-width:560px){
  .bar img{height:24px}
  .row2{grid-template-columns:minmax(0,1fr)}
  dialog.sheet{border-radius:22px}
  .app-hide-sm{display:none}
}
@media (max-height:520px){body{overflow:auto}.screen{height:auto;min-height:100dvh}}
@media (prefers-reduced-motion:reduce){.float{animation:none}dialog.sheet[open],dialog.sheet.closing,dialog.sheet[open]::backdrop,dialog.sheet.closing::backdrop{animation:none}}