:root{
  --navy:#06284A; --navy-d:#03182D; --cyan:#10D7ED; --blue:#037CBE;
  --zap:#25D366; --zap-d:#1DAF54;
  --ink:#182634; --grey:#70808E; --linha:#E2EAF0; --claro:#F2F7FA;
  --raio:18px; --wrap:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Montserrat,system-ui,sans-serif;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;line-height:1.55}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
h1,h2,h3{font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;line-height:1.02;letter-spacing:.005em}
h1{font-size:clamp(2.5rem,7.4vw,4.4rem)}
h2{font-size:clamp(1.95rem,5vw,3.05rem);color:var(--navy)}
h3{font-size:clamp(1.15rem,2.6vw,1.5rem)}
.olho{font-size:.82rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:.85rem}
.olho.ciano{color:var(--cyan)}
.sub{max-width:56ch;color:var(--grey);margin-top:1rem;font-size:1.03rem}

/* ---------- botões ---------- */
.btn-zap{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;background:var(--zap);color:#fff;font-weight:700;
  padding:1rem 1.6rem;border-radius:999px;font-size:1.03rem;transition:transform .15s,background .15s;box-shadow:0 6px 20px rgba(37,211,102,.28)}
.btn-zap:hover{background:var(--zap-d);transform:translateY(-2px)}
.btn-zap svg{width:22px;height:22px;fill:currentColor;flex:none}
.btn-zap.sm{padding:.6rem 1.05rem;font-size:.9rem;box-shadow:none}
.btn-zap.grande{width:100%;padding:1.15rem;font-size:1.1rem;margin-top:1.3rem}
.btn-ghost{display:inline-flex;align-items:center;padding:1rem 1.6rem;border-radius:999px;border:2px solid rgba(255,255,255,.4);
  color:#fff;font-weight:600;transition:background .15s,border-color .15s}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}

/* ---------- topo ---------- */
.topo{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:1.4rem;
  padding:.7rem 22px;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--linha)}
.marca img{height:42px;width:auto}
.topo nav{display:flex;gap:1.5rem;margin-left:auto;font-size:.93rem;font-weight:600;color:var(--navy)}
.topo nav a:hover{color:var(--blue)}

/* ---------- hero ---------- */
.hero{background:var(--navy);color:#fff;display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center;
  max-width:var(--wrap);margin:0 auto;padding:clamp(2.6rem,6vw,4.6rem) 22px clamp(3rem,6vw,5rem)}
.hero{max-width:none;background:linear-gradient(160deg,#06284A 0%,#03182D 100%)}
.hero-txt{max-width:600px;margin-left:auto;padding-right:1rem}
.hero .olho{color:var(--cyan)}
.hero .lead{margin-top:1.25rem;font-size:1.08rem;color:#CBDDEB;max-width:48ch}
.acoes{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2rem}
.selos{list-style:none;margin-top:2.1rem;display:flex;flex-direction:column;gap:.55rem;font-size:.92rem;color:#A9C4DA}
.selos li{padding-left:1.6rem;position:relative}
.selos li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;border-radius:50%;background:var(--cyan)}

/* antes / depois */
.ba{max-width:430px;width:100%;margin-right:auto}
.ba-wrap{position:relative;border-radius:var(--raio);overflow:hidden;aspect-ratio:9/16;box-shadow:0 26px 60px rgba(0,0,0,.42)}
.ba-wrap>img,.ba-top img{position:absolute;top:0;left:0;width:100%;height:100%;max-width:none;object-fit:cover}
.ba-top{position:absolute;inset:0;width:52%;overflow:hidden;border-right:3px solid var(--cyan)}
.ba-top img{width:192.3%}
.ba input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba-alca{position:absolute;top:50%;left:52%;translate:-50% -50%;width:46px;height:46px;border-radius:50%;
  background:var(--cyan);box-shadow:0 3px 14px rgba(0,0,0,.4);pointer-events:none;display:grid;place-items:center}
.ba-alca::before{content:"⟷";color:var(--navy);font-size:1.1rem;font-weight:700}
.tag{position:absolute;top:14px;font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  background:rgba(0,0,0,.62);color:#fff;padding:.42rem .7rem;border-radius:8px}
.tag.esq{left:14px}.tag.dir{right:14px}
.ba figcaption{margin-top:.8rem;font-size:.8rem;color:#8FA9C0;text-align:center}

/* ---------- calculadora ---------- */
.calc{background:var(--claro);padding:clamp(3rem,7vw,5.2rem) 0;border-top:1px solid var(--linha)}
.calc .sub{margin-bottom:2.4rem}
.calc-grid{display:grid;grid-template-columns:1fr 1.08fr;gap:2rem;align-items:start}
.campos{background:#fff;border:1px solid var(--linha);border-radius:var(--raio);padding:1.6rem}
.linha3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.8rem}
.campos label{display:block;font-size:.83rem;font-weight:700;color:var(--navy);line-height:1.3}
.campos label span{color:var(--grey);font-weight:600}
.campos input{width:100%;margin-top:.45rem;padding:.78rem .8rem;font:600 1.15rem Montserrat,sans-serif;color:var(--navy);
  border:2px solid var(--linha);border-radius:12px;background:#fff}
.campos input:focus{outline:none;border-color:var(--cyan)}
.volume{margin:1.15rem 0 1.4rem;padding:.8rem 1rem;background:var(--claro);border-radius:12px;font-size:.92rem;color:var(--grey)}
.volume strong{color:var(--navy);font-size:1.05rem}
.gasto small{display:block;margin-top:.5rem;font-size:.76rem;font-weight:500;color:var(--grey);line-height:1.45}

.check{display:flex;gap:.7rem;align-items:flex-start;margin-top:1.2rem;padding:.9rem 1rem;
  background:var(--claro);border-radius:12px;cursor:pointer}
.check input{width:20px;height:20px;flex:none;margin-top:.15rem;accent-color:var(--blue)}
.check span{font-size:.8rem;font-weight:500;color:var(--grey);line-height:1.5}
.check b{color:var(--navy)}
.linha-extra{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:.9rem;
  padding:.85rem 1rem;background:rgba(255,255,255,.07);border-radius:13px}
.linha-extra span{font-size:.79rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#9FBBD3}
.linha-extra b{font-family:Anton,sans-serif;font-size:1.35rem;color:#FFC98B}
.nao-mede{margin-top:1.3rem;padding:1.1rem 1.2rem;background:rgba(16,215,237,.08);
  border:1px solid rgba(16,215,237,.28);border-radius:13px}
.nm-tit{font-size:.79rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--cyan)}
.nm-tit em{font-style:normal;color:#fff}
.nao-mede ul{margin:.75rem 0 0 1.05rem;display:grid;gap:.35rem;font-size:.87rem;color:#D3E7F3}
.nm-fim{margin-top:.8rem;font-size:.79rem;line-height:1.55;color:#93AFC6}
.res{background:var(--navy);color:#fff;border-radius:var(--raio);padding:1.7rem}
.res-topo{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.bloco{background:rgba(255,255,255,.07);border-radius:13px;padding:1rem}
.bloco span{display:block;font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#9FBBD3}
.bloco strong{display:block;font-family:Anton,sans-serif;font-size:1.72rem;margin:.35rem 0 .1rem;letter-spacing:.01em}
.bloco em{font-style:normal;font-size:.76rem;color:#9FBBD3}
.bloco small{display:block;margin-top:.5rem;padding-top:.5rem;border-top:1px solid rgba(255,255,255,.14);
  font-size:.72rem;line-height:1.4;color:#8FA9C0}
.bloco.hoje strong{color:#FF9A8B}
.bloco.sal strong{color:var(--cyan)}
.destaque{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-top:.9rem;padding:1.1rem;
  background:linear-gradient(120deg,rgba(16,215,237,.17),rgba(3,124,190,.17));border:1px solid rgba(16,215,237,.35);border-radius:13px}
.destaque span{display:block;font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#A8D6E6}
.destaque strong{display:block;font-family:Anton,sans-serif;font-size:1.72rem;color:#fff;margin-top:.3rem}

.dez{margin-top:1.4rem;padding-top:1.3rem;border-top:1px solid rgba(255,255,255,.14)}
.dez-tit{font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--cyan);margin-bottom:.9rem}
.barra{display:grid;grid-template-columns:1fr;gap:.32rem;margin-bottom:.85rem}
.barra .rot{font-size:.84rem;color:#C6DCEC}
.barra .rot small{color:#8FA9C0}
.trilho{height:15px;background:rgba(255,255,255,.1);border-radius:8px;overflow:hidden}
.fill{display:block;height:100%;border-radius:8px;transition:width .35s ease}
.fill.hoje{background:linear-gradient(90deg,#FF7A66,#FF9A8B)}
.fill.sal{background:linear-gradient(90deg,var(--blue),var(--cyan))}
.barra b{font-family:Anton,sans-serif;font-size:1.05rem;letter-spacing:.02em}
.dez-dif{margin-top:.6rem;font-size:.95rem;color:#C6DCEC}
.dez-dif strong{color:var(--cyan);font-family:Anton,sans-serif;font-size:1.25rem}

.nota-ctx{margin-top:1.1rem;padding:.9rem 1rem;background:rgba(255,154,139,.13);
  border:1px solid rgba(255,154,139,.3);border-radius:12px;font-size:.85rem;line-height:1.55;color:#FFD9D2}
.detalhe{margin-top:1.2rem;font-size:.85rem}
.detalhe summary{cursor:pointer;color:var(--cyan);font-weight:600}
.detalhe ul{margin:.8rem 0 0 1.1rem;color:#B6CEE0;display:grid;gap:.4rem;font-size:.82rem}
.aviso{margin-top:1.2rem;font-size:.79rem;line-height:1.55;color:#93AFC6;border-left:3px solid rgba(16,215,237,.45);padding-left:.8rem}

/* ---------- como funciona ---------- */
.como{padding:clamp(3rem,7vw,5.2rem) 0}
.passos{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.4rem}
.passos article{background:#fff;border:1px solid var(--linha);border-radius:var(--raio);overflow:hidden}
.passos img{aspect-ratio:16/10;object-fit:cover;width:100%}
.passos b{display:block;font-family:Anton,sans-serif;font-size:1.22rem;text-transform:uppercase;color:var(--navy);padding:1.1rem 1.2rem .35rem}
.passos p{padding:0 1.2rem 1.4rem;font-size:.93rem;color:var(--grey)}
.salin{margin-top:2.6rem;background:var(--claro);border-radius:var(--raio);padding:clamp(1.4rem,3vw,2.2rem)}
.esc{display:grid;grid-template-columns:190px 1fr;align-items:center;gap:1rem;margin-top:.95rem;font-size:.93rem;font-weight:600;color:var(--navy)}
.esc i{display:block;height:36px;border-radius:18px;background:var(--cyan);display:flex;align-items:center;min-width:104px}
.esc i b{font-size:.82rem;padding-left:1rem;color:var(--navy)}
.esc i.azul{background:var(--blue)} .esc i.azul b{color:#fff}
.esc i.cinza{background:#96A5B2} .esc i.cinza b{color:#fff}
.salin-fim{margin-top:1.4rem;font-size:1rem;color:var(--navy)}

/* ---------- benefícios ---------- */
.benef{background:var(--navy);color:#fff;padding:clamp(3rem,7vw,5.2rem) 0}
.benef h2{color:#fff}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:2.3rem}
.cards div{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--raio);padding:1.4rem}
.cards b{display:block;font-size:1.03rem;margin-bottom:.45rem}
.cards p{font-size:.92rem;color:#B6CEE0}

/* ---------- obras ---------- */
.obras{padding:clamp(3rem,7vw,5.2rem) 0}
.galeria{display:grid;grid-template-columns:repeat(6,1fr);gap:.8rem;margin-top:2.2rem}
.galeria img{border-radius:12px;aspect-ratio:4/3;object-fit:cover;width:100%}
.galeria img:nth-child(1){grid-column:span 4;aspect-ratio:16/9}
.galeria img:nth-child(2){grid-column:span 2;aspect-ratio:3/4}
.galeria img:nth-child(n+3){grid-column:span 2}
.nota{margin-top:1.6rem;padding:1.1rem 1.3rem;background:var(--claro);border-radius:12px;font-size:.93rem;color:var(--navy)}

/* ---------- faq ---------- */
.faq{background:var(--navy);color:#fff;padding:clamp(3rem,7vw,5.2rem) 0}
.faq h2{color:#fff;margin-bottom:2rem}
.faq details{border-bottom:1px solid rgba(255,255,255,.14)}
.faq summary{cursor:pointer;list-style:none;padding:1.15rem 2rem 1.15rem 0;font-weight:700;font-size:1.02rem;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.2rem;top:1rem;color:var(--cyan);font-size:1.5rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 1.2rem;color:#B6CEE0;font-size:.96rem;max-width:70ch}

/* ---------- final ---------- */
.final{background:linear-gradient(120deg,var(--blue),#0A4E7C);color:#fff;padding:clamp(3rem,7vw,5rem) 0;text-align:center}
.final h2{color:#fff}
.final p{max-width:52ch;margin:1.1rem auto 0;color:#D6EBF7}
.final .btn-zap{width:auto;max-width:420px;margin:1.9rem auto 0;display:flex}
.fone{font-family:Anton,sans-serif;font-size:1.5rem;letter-spacing:.03em;margin-top:1.2rem!important;color:#fff}

footer{background:var(--navy-d);color:#8FA9C0;padding:2.6rem 0;font-size:.88rem}
footer .wrap{display:flex;gap:1.6rem;align-items:flex-start;flex-wrap:wrap}
footer img{height:54px;width:auto;background:#fff;border-radius:10px;padding:.5rem .7rem}
footer strong{color:#fff}
.mini{margin-top:.7rem;font-size:.76rem;color:#66809A;max-width:62ch;line-height:1.5}

.flutua{position:fixed;right:16px;bottom:16px;z-index:60;width:58px;height:58px;border-radius:50%;background:var(--zap);
  display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.3);transition:transform .15s}
.flutua:hover{transform:scale(1.07)}
.flutua svg{width:31px;height:31px;fill:#fff}

/* ---------- responsivo ---------- */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:2.4rem}
  .hero-txt{margin:0;padding:0;max-width:none}
  .ba{margin:0 auto;max-width:330px}
  .calc-grid{grid-template-columns:1fr}
  .passos,.cards{grid-template-columns:1fr}
  .galeria{grid-template-columns:repeat(2,1fr)}
  .galeria img:nth-child(1){grid-column:span 2;aspect-ratio:16/9}
  .galeria img:nth-child(2),.galeria img:nth-child(n+3){grid-column:span 1;aspect-ratio:4/3}
  .topo nav{display:none}
  .marca img{height:36px}
  .esc{grid-template-columns:1fr;gap:.3rem}
  .esc i{height:30px}
}
@media (max-width:560px){
  .tag{font-size:.6rem;padding:.34rem .5rem;letter-spacing:.05em}
  .tag.esq{left:9px} .tag.dir{right:9px}
}
@media (max-width:520px){
  .linha3{grid-template-columns:1fr}
  .res-topo,.destaque{grid-template-columns:1fr}
  .acoes{flex-direction:column;align-items:stretch}
  .acoes a{justify-content:center}
  .topo{gap:.8rem}
}