/* Maurício Web — site | Click Estúdio Criativo */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:Inter,system-ui,sans-serif;color:var(--txt);background:#fff;line-height:1.6;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:Outfit,system-ui,sans-serif;line-height:1.08;margin:0;letter-spacing:-.02em}
h2{font-size:clamp(2rem,4.4vw,3.3rem);font-weight:800}
h3{font-size:1.25rem;font-weight:700}
.ic{width:1.15em;height:1.15em;flex:none}
.wrap{width:min(1200px,100% - 32px);margin-inline:auto}
:focus-visible{outline:3px solid var(--dest);outline-offset:3px}

/* botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;padding:.85em 1.4em;border-radius:999px;border:0;cursor:pointer;
  font:700 1rem Outfit,sans-serif;color:#fff;background:linear-gradient(135deg,var(--dest),var(--pri) 55%);box-shadow:0 10px 30px -10px var(--pri);
  transition:transform .25s,box-shadow .25s,filter .25s;white-space:nowrap}
.btn:hover{transform:translateY(-2px);box-shadow:0 16px 36px -10px var(--pri);filter:saturate(1.15)}
.btn-sm{padding:.6em 1.1em;font-size:.92rem}
.btn-lg{padding:1em 1.7em;font-size:1.08rem}
.btn-bloco{width:100%}
.btn-ghost{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)}
.btn-vidro{background:rgba(255,255,255,.08);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28)}

/* aviso */
.aviso{position:relative;z-index:60;display:flex;justify-content:center;align-items:center;gap:.5em;padding:.55em 16px;background:var(--pri);color:#fff;font-weight:600;font-size:.92rem;text-align:center}

/* topo */
.topo{position:fixed;inset:0 0 auto;z-index:50;transition:background .35s,box-shadow .35s,padding .35s;padding:18px 0}
.aviso~.topo{top:auto}
.topo.solido{background:color-mix(in srgb,var(--esc) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(255,255,255,.08);padding:10px 0}
.topo-in{display:flex;align-items:center;justify-content:space-between;gap:20px}
.marca{display:flex;align-items:center;gap:.6em;color:#fff;font:800 1.35rem Outfit,sans-serif;letter-spacing:-.02em}
.marca img{height:var(--logo-h,46px);width:auto;max-width:min(320px,60vw);object-fit:contain;filter:drop-shadow(0 4px 12px rgba(0,0,0,.35));transition:height .35s}
.topo.solido .marca img{height:calc(var(--logo-h,46px) * .86)}
.rodape .marca img{height:var(--logo-fh,56px);max-width:min(340px,80vw)}
.menu{display:flex;align-items:center;gap:26px;color:rgba(255,255,255,.86);font-weight:500;font-size:.96rem}
.menu>a:not(.btn):hover{color:#fff}
.menu-fundo{display:none}
.burger{display:none;background:none;border:0;color:#fff;width:44px;height:44px;cursor:pointer}
.burger .ic{width:28px;height:28px}

/* ===== HERO 3D ===== */
.hero{position:relative;height:var(--hero-h);background:var(--esc);color:#fff}
.hero-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;
  background:radial-gradient(120% 90% at 70% 40%,color-mix(in srgb,var(--pri) 30%,var(--esc)) 0%,var(--esc) 58%,#000 100%)}
#hero3d{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-fallback{position:absolute;right:6%;top:50%;width:min(42vw,480px);transform:translateY(-50%);opacity:0;transition:opacity .6s;animation:flutua 6s ease-in-out infinite}
.sem-3d .hero-fallback{opacity:1}
@keyframes flutua{50%{transform:translateY(calc(-50% - 16px)) rotate(-3deg)}}
.hero-vinheta{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.15) 45%,transparent 70%),linear-gradient(0deg,rgba(0,0,0,.5),transparent 30%)}
.hero-txt{position:relative;height:100%;pointer-events:none}
.etapa{position:absolute;left:0;top:50%;transform:translateY(-40%);max-width:620px;opacity:0;visibility:hidden;transition:opacity .6s,transform .8s cubic-bezier(.2,.7,.2,1),visibility .6s}
.etapa.on{opacity:1;visibility:visible;transform:translateY(-50%);pointer-events:auto}
.etapa.sai{transform:translateY(-62%)}
.kicker{display:inline-flex;align-items:center;gap:.5em;padding:.45em 1em;border-radius:999px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);font-weight:600;font-size:.9rem;margin-bottom:22px;backdrop-filter:blur(8px)}
.kicker .ic{color:var(--dest)}
@media (min-width:861px){.kicker.so-mobile{display:none}}
@media (max-width:860px){.kicker.so-desktop{display:none}}
.h-hero{font-size:clamp(2.4rem,6.2vw,5rem);font-weight:900;text-shadow:0 10px 40px rgba(0,0,0,.4)}
.etapa p{font-size:clamp(1.05rem,1.6vw,1.3rem);color:rgba(255,255,255,.82);margin:20px 0 0;max-width:520px}
.acoes{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.labels{position:absolute;inset:0;pointer-events:none}
.lbl{position:absolute;left:0;top:0;padding:.3em .75em;border-radius:999px;font:600 .78rem Inter,sans-serif;color:#fff;white-space:nowrap;
  background:color-mix(in srgb,var(--pri) 75%,transparent);box-shadow:0 6px 18px rgba(0,0,0,.35);opacity:0;transition:opacity .4s;will-change:transform}
.lbl.cidade{font-size:.95rem;padding:.45em 1em;background:#fff;color:var(--pri)}
.progresso{position:absolute;left:50%;bottom:28px;width:min(220px,40vw);height:3px;border-radius:3px;background:rgba(255,255,255,.15);transform:translateX(-50%);overflow:hidden}
.progresso span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--dest),var(--pri))}
.rolar{position:absolute;left:50%;bottom:46px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7);transition:opacity .4s}
.rolar span{width:24px;height:38px;border-radius:14px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.55);position:relative}
.rolar span::after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;animation:rolar 1.6s infinite}
@keyframes rolar{to{transform:translateY(12px);opacity:0}}

/* atalhos */
.atalhos{position:relative;z-index:2;margin-top:-56px}
.atalhos-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.atalho{display:flex;align-items:center;gap:14px;padding:20px;border-radius:20px;background:#fff;box-shadow:0 20px 50px -20px rgba(20,7,10,.35);font-family:Outfit,system-ui,sans-serif;font-size:1.05rem;transition:transform .3s,box-shadow .3s}
.atalho:hover{transform:translateY(-4px);box-shadow:0 26px 60px -20px rgba(224,22,27,.45)}
.atalho-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,var(--dest),var(--pri));color:#fff}
.atalho-ic .ic{width:24px;height:24px}
.atalho .seta{margin-left:auto;color:var(--pri);transition:transform .3s}
.atalho:hover .seta{transform:translateX(4px)}

/* seções */
.secao{padding:clamp(80px,10vw,130px) 0}
.secao.escuro{background:var(--esc);color:#fff;position:relative;overflow:hidden}
.secao.escuro::before{content:"";position:absolute;inset:auto -20% -40% auto;width:70vw;height:70vw;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--pri) 35%,transparent),transparent 65%);pointer-events:none}
.secao.claro{background:var(--claro)}
.sec-head{text-align:center;max-width:720px;margin:0 auto 56px}
.sec-head p,.lead{font-size:1.12rem;opacity:.75;margin:16px 0 0}
.tag{display:inline-block;font:700 .82rem Outfit,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.16em;color:var(--pri);margin-bottom:14px}
.escuro .tag{color:var(--dest)}
.nota{text-align:center;font-size:.9rem;opacity:.6;margin-top:28px}

/* planos */
.planos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;align-items:stretch}
.plano{position:relative;display:flex;flex-direction:column;padding:34px 28px 28px;border-radius:28px;background:#fff;box-shadow:0 0 0 1px rgba(20,7,10,.08),0 30px 60px -40px rgba(20,7,10,.4);transition:transform .35s,box-shadow .35s}
.plano:hover{transform:translateY(-8px);box-shadow:0 0 0 1px color-mix(in srgb,var(--pri) 40%,transparent),0 40px 70px -35px color-mix(in srgb,var(--pri) 60%,transparent)}
.plano.destaque{background:linear-gradient(160deg,color-mix(in srgb,var(--pri) 92%,#fff),color-mix(in srgb,var(--pri) 70%,#000));color:#fff;transform:scale(1.03)}
.plano.destaque:hover{transform:scale(1.03) translateY(-8px)}
.plano.destaque .btn{background:#fff;color:var(--pri);box-shadow:none}
.selo{position:absolute;top:18px;right:18px;padding:.3em .8em;border-radius:999px;background:var(--dest);color:#fff;font:700 .75rem Outfit,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.06em}
.destaque .selo{background:#fff;color:var(--pri)}
.vel{display:flex;align-items:flex-end;gap:6px;font-family:Outfit,system-ui,sans-serif;line-height:.8}
.vel strong{font-size:5rem;font-weight:900;letter-spacing:-.05em;background:linear-gradient(180deg,var(--dest),var(--pri));-webkit-background-clip:text;background-clip:text;color:transparent}
.destaque .vel strong{background:none;color:#fff}
.vel span{font-weight:800;font-size:1.3rem;padding-bottom:6px;color:var(--pri)}
.destaque .vel span{color:#fff}
.plano h3{margin:14px 0 18px;font-weight:600;opacity:.75;font-size:1.05rem}
.plano ul{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:10px;flex:1}
.plano li{display:flex;gap:10px;align-items:center}
.plano li .ic{color:var(--pri);background:color-mix(in srgb,var(--pri) 12%,transparent);border-radius:50%;padding:3px;width:22px;height:22px}
.destaque li .ic{color:#fff;background:rgba(255,255,255,.2)}
.preco{display:flex;align-items:baseline;gap:4px;margin-bottom:20px;font-family:Outfit,system-ui,sans-serif}
.preco small{font-weight:700}
.preco strong{font-size:2.4rem;font-weight:800;letter-spacing:-.03em}
.preco .consulte{font-size:1.6rem}
.preco span{opacity:.7}

/* vantagens */
.vantagens{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;position:relative}
.vant{padding:32px;border-radius:24px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);transition:background .3s,transform .3s}
.vant:hover{background:rgba(255,255,255,.08);transform:translateY(-4px)}
.vant-ic{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,var(--dest),var(--pri));margin-bottom:22px;box-shadow:0 12px 30px -10px var(--pri)}
.vant-ic .ic{width:28px;height:28px}
.vant p{opacity:.72;margin:10px 0 0}

/* cobertura */
.cob{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:start}
.cidade{display:flex;align-items:center;gap:.4em;margin-top:30px;color:var(--pri);font-size:1.5rem}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chips span{padding:.45em 1em;border-radius:999px;background:var(--claro);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pri) 25%,transparent);font-weight:600;font-size:.92rem}
.form-cob{padding:34px;border-radius:28px;background:#fff;box-shadow:0 0 0 1px rgba(20,7,10,.08),0 40px 80px -40px rgba(20,7,10,.45);display:grid;gap:14px}
.form-cob p{margin:0 0 6px;opacity:.7}
.form-cob label{display:grid;gap:6px;font-weight:600;font-size:.9rem}
.form-cob input,.form-cob select{font:inherit;padding:.85em 1em;border-radius:14px;border:1.5px solid rgba(20,7,10,.14);background:#fff;transition:border-color .2s,box-shadow .2s}
.form-cob input:focus,.form-cob select:focus{outline:0;border-color:var(--pri);box-shadow:0 0 0 4px color-mix(in srgb,var(--pri) 15%,transparent)}
.hp{position:absolute;left:-9999px}
.form-ok{color:#15803d;font-weight:600;text-align:center}
.mapa{margin-top:28px;border-radius:24px;overflow:hidden;aspect-ratio:16/10;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.mapa iframe{width:100%;height:100%;border:0;display:block}

/* sobre */
.sobre{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center}
.sobre-img img{width:100%;max-width:460px;margin:auto;filter:drop-shadow(0 40px 50px rgba(224,22,27,.35));animation:flutua2 7s ease-in-out infinite}
@keyframes flutua2{50%{transform:translateY(-14px) rotate(2deg)}}
.texto{font-size:1.08rem;opacity:.85;margin-top:20px}
.numeros{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:34px}
.numeros div{padding:20px;border-radius:20px;background:#fff;box-shadow:0 20px 40px -30px rgba(20,7,10,.4)}
.numeros strong{display:block;font:900 1.9rem Outfit,system-ui,sans-serif;color:var(--pri);letter-spacing:-.03em}
.numeros span{font-size:.9rem;opacity:.7}

/* depoimentos */
.depos{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.depo{margin:0;padding:30px;border-radius:24px;background:var(--claro)}
.estrelas{display:flex;gap:2px;color:#f5a524}.estrelas .ic{fill:currentColor}
.depo blockquote{margin:14px 0 20px;font-size:1.05rem}
.depo figcaption{display:flex;align-items:center;gap:10px}
.depo figcaption img{width:42px;height:42px;border-radius:50%;object-fit:cover}
.depo figcaption span{opacity:.6;font-size:.9rem}

/* faq */
.faq-wrap{max-width:860px}
.faq{display:grid;gap:12px}
.faq details{border-radius:20px;background:var(--claro);padding:0 24px;transition:background .3s}
.faq details[open]{background:#fff;box-shadow:0 0 0 1.5px color-mix(in srgb,var(--pri) 30%,transparent),0 20px 40px -30px rgba(20,7,10,.4)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;font:700 1.1rem Outfit,system-ui,sans-serif}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{color:var(--pri);transition:transform .3s}
.faq details[open] summary .ic{transform:rotate(45deg)}
.faq details>div{padding:0 0 22px;opacity:.8}

/* contato */
.contato{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;position:relative}
.lista-contato{list-style:none;padding:0;margin:34px 0 0;display:grid;gap:22px}
.lista-contato li{display:flex;gap:16px;align-items:flex-start}
.lista-contato li>.ic{width:46px;height:46px;padding:11px;border-radius:14px;background:rgba(255,255,255,.07);color:var(--dest)}
.lista-contato small{display:block;opacity:.6;font-size:.82rem;text-transform:uppercase;letter-spacing:.08em}
.lista-contato a,.lista-contato span{font-weight:600;font-size:1.05rem}
.redes{display:flex;gap:10px;margin-top:30px}
.redes a{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.08);transition:background .3s,transform .3s}
.redes a:hover{background:var(--pri);transform:translateY(-3px)}
.contato .mapa{margin:0;aspect-ratio:4/3}

/* rodapé */
.rodape{background:var(--rod,#000);color:color-mix(in srgb,var(--rod-txt,#fff) 78%,transparent);padding:60px 0 30px;font-size:.95rem}
.rodape-in{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px}
.rodape .marca{margin-bottom:14px}
.rodape-links{display:grid;gap:10px;align-content:start}
.rodape-links a:hover{color:var(--rod-txt,#fff)}
.rodape .marca{color:var(--rod-txt,#fff)}
.legal{display:grid;gap:8px;align-content:start}
.anatel{display:flex;align-items:center;gap:.4em;color:var(--rod-txt,#fff)}
.copy{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:40px;padding-top:24px;border-top:1px solid color-mix(in srgb,var(--rod-txt,#fff) 14%,transparent);font-size:.85rem;opacity:.75}

.wa-flutuante{position:fixed;right:20px;bottom:20px;z-index:40;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:#25d366;color:#fff;box-shadow:0 14px 30px -8px rgba(37,211,102,.7);transition:transform .3s}
.wa-flutuante .ic{width:30px;height:30px}
.wa-flutuante:hover{transform:scale(1.08)}
.wa-flutuante::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 rgba(37,211,102,.6);animation:pulso 2.2s infinite}
@keyframes pulso{to{box-shadow:0 0 0 18px rgba(37,211,102,0)}}

/* revelar ao rolar */
.rv{opacity:0;transform:translateY(34px);transition:opacity .8s var(--d,0ms),transform .9s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.rv.vis{opacity:1;transform:none}
.plano.destaque.rv.vis{transform:scale(1.03)}

/* responsivo */
@media (max-width:1020px){
  .atalhos-grid{grid-template-columns:repeat(2,1fr)}
  .vantagens{grid-template-columns:repeat(2,1fr)}
  .cob,.sobre,.contato{grid-template-columns:1fr;gap:40px}
  .rodape-in{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .burger{display:block}
  /* no celular o topo não usa blur: o backdrop-filter prendia o menu dentro da barra e ele ficava sem fundo */
  .topo,.topo.solido{backdrop-filter:none;-webkit-backdrop-filter:none}
  .topo.solido{background:var(--esc)}
  .menu-fundo{display:block;position:fixed;inset:0;z-index:-1;background:rgba(0,0,0,.55);opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
  .menu-on .menu-fundo{opacity:1;visibility:visible}
  .menu-on{overflow:hidden}
  .menu{position:fixed;top:0;right:0;bottom:auto;left:auto;height:100vh;height:100dvh;overflow-y:auto;width:min(320px,86vw);flex-direction:column;align-items:stretch;gap:6px;padding:90px 24px 24px;background:var(--esc);transform:translateX(100%);transition:transform .4s cubic-bezier(.2,.7,.2,1);box-shadow:-20px 0 60px rgba(0,0,0,.5)}
  .menu.aberto{transform:none}
  .menu>a:not(.btn){padding:12px 4px;font-size:1.1rem;border-bottom:1px solid rgba(255,255,255,.08)}
  .menu .btn{margin-top:10px}
  .burger{position:relative;z-index:2}
  .burger .b-fechar,.menu-on .burger .b-abrir{display:none}.menu-on .burger .b-fechar{display:block}
  .etapa{top:auto;bottom:110px;transform:translateY(20px);max-width:none;right:0}
  .etapa.on{transform:none}.etapa.sai{transform:translateY(-20px)}
  .hero-vinheta{background:linear-gradient(0deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.4) 45%,transparent 70%)}
  .rolar{display:none}
  .hero-fallback{right:50%;top:30%;transform:translate(50%,-50%);width:60vw}
}
@media (max-width:560px){
  .atalhos{margin-top:-40px}
  .atalhos-grid{gap:10px}
  .atalho{flex-direction:column;align-items:flex-start;padding:16px;font-size:.95rem;gap:10px}
  .atalho .seta{display:none}
  .vantagens{grid-template-columns:1fr}
  .numeros{grid-template-columns:1fr 1fr 1fr;gap:8px}.numeros div{padding:14px}.numeros strong{font-size:1.4rem}
  .rodape-in{grid-template-columns:1fr}
  .plano.destaque,.plano.destaque:hover,.plano.destaque.rv.vis{transform:none}
  .form-cob{padding:24px}
  .marca{font-size:1.15rem}.topo .marca img,.topo.solido .marca img{height:var(--logo-hm,38px);max-width:62vw}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}