/* Mais Clima | site | v1 */
:root{
  --gelo:#E6F2F5;
  --gelo-2:#F4F9FB;
  --branco:#FFFFFF;
  --grafite:#26313B;
  --grafite-2:#1C252D;
  --texto2:#4E5A66;
  --azul:#1D72F3;       /* azul elétrico da identidade */
  --azul-btn:#1766DB;   /* mesmo azul, 1 tom abaixo, para texto branco legível */
  --ciano:#58B6D9;
  --ambar:#F2A23A;
  --whats:#1FAF5A;
  --linha:rgba(38,49,59,.12);
  --raio:12px;
  --fonte:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--gelo-2);color:var(--grafite);font:400 17px/1.6 var(--fonte)}
img,video{max-width:100%;height:auto;display:block}
h1,h2,h3{margin:0;font-weight:800;line-height:1.1;letter-spacing:-.02em;text-wrap:balance}
h2{font-size:clamp(30px,6vw,46px)}
h3{font-size:20px;letter-spacing:-.01em}
p{margin:0 0 1em}
a{color:var(--azul-btn)}
:focus-visible{outline:3px solid var(--azul);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}
@media (min-width:768px){.wrap{padding:0 32px}}
section{padding:72px 0}
@media (min-width:900px){section{padding:104px 0}}
.selo{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;font-size:14px;font-weight:700;color:var(--azul-btn)}
.selo::before{content:"";width:18px;height:3px;border-radius:2px;background:var(--ambar)}
.cab{margin-bottom:36px;max-width:640px}
.cab--centro{margin-left:auto;margin-right:auto;text-align:center}
.cab--centro .selo{justify-content:center}
.sec-sub{color:var(--texto2);font-size:18px;margin:14px 0 0}
.lead{font-size:19px;font-weight:600}

/* Botões */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:13px 24px;border-radius:var(--raio);
  background:var(--azul-btn);color:#fff;border:2px solid var(--azul-btn);font:700 16px/1.2 var(--fonte);text-decoration:none;text-align:center;
  transition:background .2s,border-color .2s,color .2s,transform .2s}
.btn:hover{background:#1257BE;border-color:#1257BE}
.btn img{width:20px;height:20px;flex:none}
.btn--lg{min-height:56px;font-size:17px}
.btn--sm{min-height:42px;padding:8px 18px;font-size:15px}
.btn--whats{background:var(--whats);border-color:var(--whats)}
.btn--whats:hover{background:#178F49;border-color:#178F49}
.btn--contorno{background:transparent;color:var(--grafite);border-color:var(--linha)}
.btn--contorno:hover{background:var(--branco);border-color:var(--grafite);color:var(--grafite)}
.link-sec{font-weight:700;font-size:15px;text-underline-offset:4px}

/* Topo */
.topo{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.95);border-bottom:1px solid var(--linha);padding-top:env(safe-area-inset-top,0px)}
.topo__in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:66px}
.topo__logo img{width:138px}
.topo__nav{display:none}
@media (min-width:1000px){
  .topo__in{height:78px}
  .topo__logo img{width:160px}
  .topo__nav{display:flex;gap:28px;margin-left:auto}
  .topo__nav a{color:var(--grafite);text-decoration:none;font-weight:600;font-size:15px}
  .topo__nav a:hover{color:var(--azul-btn)}
}
@media (max-width:899px){.topo{position:static}html{scroll-padding-top:16px}.topo .btn{display:none}}

/* Hero */
.hero{position:relative;overflow:hidden;padding:44px 0 64px;background:linear-gradient(180deg,var(--branco) 0%,var(--gelo) 100%)}
.hero__ar{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero__ar path{fill:none;stroke:var(--ciano);stroke-width:1.5;opacity:.28;stroke-dasharray:6 14;animation:ar 18s linear infinite}
.hero__ar path:nth-child(2){opacity:.2;animation-duration:24s}
.hero__ar path:nth-child(3){opacity:.24;animation-duration:21s}
.hero__ar path:nth-child(4){opacity:.16;animation-duration:27s}
@keyframes ar{to{stroke-dashoffset:-400}}
@media (prefers-reduced-motion:reduce){.hero__ar path{animation:none}}
.hero__grid{position:relative;display:grid;gap:40px;align-items:center}
.hero h1{font-size:clamp(36px,8.4vw,62px);max-width:15ch}
.hero h1 .az{color:var(--azul)}
.nw{white-space:nowrap}
.hero__sub{font-size:18px;color:var(--texto2);max-width:52ch;margin:20px 0 28px}
.hero__ctas{display:flex;flex-wrap:wrap;gap:12px}
.hero__ctas .btn{flex:1 1 auto}
@media (min-width:600px){.hero__ctas .btn{flex:0 0 auto}}
.hero__hora{margin:18px 0 0;font-size:14px;color:var(--texto2)}
.hero__foto{position:relative;max-width:420px;width:100%;margin:0 auto}
.hero__foto img{width:100%;border-radius:22px;box-shadow:0 24px 60px rgba(38,49,59,.16)}
.chip{position:absolute;display:flex;flex-direction:column;padding:12px 16px;border-radius:14px;background:var(--branco);box-shadow:0 10px 30px rgba(38,49,59,.14);font-size:13px;line-height:1.3}
.chip strong{font-size:15px}
.chip span{color:var(--texto2)}
.chip--a{left:-12px;bottom:28px;border-left:4px solid var(--azul)}
.chip--b{right:-12px;top:28px;border-left:4px solid var(--ambar)}
@media (min-width:900px){
  .hero{padding:72px 0 96px}
  .hero__grid{grid-template-columns:1.15fr .85fr;gap:64px}
  .chip--a{left:-40px}.chip--b{right:-28px}
}

/* Números */
.numeros{padding:40px 0;background:var(--grafite);color:#fff}
.numeros__grid{display:grid;grid-template-columns:1fr 1fr;gap:28px 20px}
.numeros__grid div{display:flex;flex-direction:column;gap:4px}
.numeros strong{font-size:clamp(34px,7vw,48px);font-weight:800;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.numeros strong::after{content:"";display:block;width:26px;height:3px;border-radius:2px;background:var(--ciano);margin-top:12px}
.numeros span{font-size:15px;color:#C4CFD8}
@media (min-width:900px){.numeros__grid{grid-template-columns:repeat(3,1fr)}}
html:not(.apresentacao) .exemplo{display:none}
@media (min-width:900px){html:not(.apresentacao) .numeros__grid{grid-template-columns:repeat(2,minmax(0,320px));justify-content:center}
  html.apresentacao .numeros__grid{grid-template-columns:repeat(4,1fr)}}

/* Carrossel (serviços e trabalhos) */
.carrossel__trilho{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 -20px;padding:6px 20px 10px;scroll-padding:0 20px}
.carrossel__trilho::-webkit-scrollbar{display:none}
@media (min-width:768px){.carrossel__trilho{margin:0 -32px;padding:6px 32px 10px;scroll-padding:0 32px}}
.carrossel .slide{flex:0 0 auto;scroll-snap-align:start}
.carrossel__ctrl{display:flex;align-items:center;gap:14px;margin-top:20px}
.carrossel__btn{width:46px;height:46px;border-radius:50%;border:1px solid var(--linha);background:var(--branco);cursor:pointer;display:grid;place-items:center}
.carrossel__btn::before{content:"";width:9px;height:9px;border-left:2.5px solid var(--grafite);border-bottom:2.5px solid var(--grafite);transform:translateX(2px) rotate(45deg)}
.carrossel__btn--prox::before{transform:translateX(-2px) rotate(-135deg)}
.carrossel__btn:hover{border-color:var(--azul)}
.carrossel__btn:disabled{opacity:.35;cursor:default}
.carrossel__pontos{display:flex;gap:6px;flex:1;justify-content:center}
.carrossel__pontos span{width:7px;height:7px;border-radius:50%;background:rgba(38,49,59,.2);transition:width .25s,background .25s}
.carrossel__pontos span.on{width:22px;border-radius:4px;background:var(--azul)}

/* Serviços */
.servicos{background:var(--branco)}
.serv{width:78%;padding:28px 24px;border:1px solid var(--linha);border-radius:18px;background:var(--gelo-2);display:flex;flex-direction:column}
.serv h3{margin:18px 0 10px}
.serv p{color:var(--texto2);font-size:16px;margin:0}
.ico{width:48px;height:48px;padding:11px;border-radius:14px;background:var(--azul);fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:600px){.serv{width:44%}}
@media (min-width:1000px){.serv{width:calc((100% - 48px)/3.5)}}

/* Quem somos */
.sobre{background:var(--gelo-2)}
.sobre__grid{display:grid;gap:40px;align-items:center}
@media (min-width:900px){.sobre__grid{grid-template-columns:.85fr 1.15fr;gap:72px}}
.sobre__foto{margin:0;max-width:460px}
.sobre__foto img{width:100%;border-radius:22px;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%}
.sobre h2{margin-bottom:20px}
.sobre p{max-width:56ch;color:var(--texto2)}
.sobre .lead{color:var(--grafite)}
.pessoas{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.pessoa{display:flex;flex-direction:column;padding:14px 18px;border-radius:14px;background:var(--branco);border:1px solid var(--linha);min-width:180px}
.pessoa strong{font-size:17px}
.pessoa span{font-size:14px;color:var(--texto2)}

/* Públicos */
.publicos{background:var(--branco)}
.publicos__grid{display:grid;gap:20px}
@media (min-width:900px){.publicos__grid{grid-template-columns:1fr 1fr;gap:24px}}
.pub{position:relative;overflow:hidden;display:flex;border-radius:22px;padding:32px 28px;min-height:360px}
.pub--casa{background:linear-gradient(135deg,var(--gelo) 0%,#D5EBF3 100%)}
.pub--emp{background:var(--grafite);color:#fff}
.pub__txt{position:relative;z-index:1;max-width:30ch;display:flex;flex-direction:column}
.pub h3{font-size:clamp(24px,4.6vw,30px);margin-bottom:12px}
.pub p{color:var(--texto2)}
.pub--emp p{color:#C4CFD8}
.pub ul{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:8px}
.pub li{position:relative;padding-left:22px;font-weight:600;font-size:15px}
.pub li::before{content:"";position:absolute;left:0;top:.45em;width:10px;height:10px;border-radius:3px;background:var(--azul)}
.pub--emp li::before{background:var(--ciano)}
.pub .btn{align-self:flex-start}
.pub__ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.pub--emp .link-sec{color:#fff}
.pub__mascote{position:absolute;right:-14px;bottom:-10px;width:44%;max-width:230px;pointer-events:none}
@media (max-width:560px){
  .pub--casa{--h:280px;min-height:0;padding-bottom:calc(var(--h) * .43 - 28px)}
  .pub--casa .pub__mascote{width:auto;max-width:none;height:var(--h);right:-22px;bottom:0}
  .pub--casa li{max-width:62%}
}

/* Trabalhos (vídeos) */
.trabalhos{background:var(--gelo-2)}
.trab{width:66%;aspect-ratio:9/16;border-radius:18px;overflow:hidden;position:relative;background:var(--grafite);margin:0;cursor:pointer}
@media (min-width:600px){.trab{width:38%}}
@media (min-width:1000px){.trab{width:calc((100% - 48px)/4)}}
.dep__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--grafite)}
.dep__play{position:absolute;left:50%;top:50%;z-index:2;width:72px;height:72px;margin:-36px 0 0 -36px;border:0;border-radius:50%;
  background:var(--grafite);box-shadow:0 6px 20px rgba(0,0,0,.35);cursor:pointer;transition:transform .2s,opacity .2s}
.dep__play::before{content:"";position:absolute;left:29px;top:24px;border-style:solid;border-width:12px 0 12px 19px;border-color:transparent transparent transparent #fff}
.dep:hover .dep__play{transform:scale(1.06)}
.dep.tocando .dep__play{opacity:0;pointer-events:none}

/* Diferenciais */
.difs{background:var(--branco)}
.difs__grid{list-style:none;margin:0;padding:0}
.difs__grid li{width:78%;padding:24px 22px;border-radius:16px;background:var(--gelo-2);border:1px solid var(--linha)}
@media (min-width:600px){.difs__grid li{width:44%}}
@media (min-width:1000px){
  .carrossel--difs .carrossel__trilho{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0;padding:0;overflow:visible}
  .difs__grid li{width:auto;background:none;border:0;border-left:1px solid var(--linha);border-radius:0;padding:0 24px}
  .difs__grid li:first-child{border-left:0;padding-left:0}
}
.difs__grid span{font-weight:800;color:var(--azul);font-size:15px}
.difs__grid h3{margin:8px 0}
.difs__grid p{color:var(--texto2);font-size:16px;margin:0}
.google{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:40px;padding:22px 26px;border:1px solid var(--linha);border-radius:18px}
.google p{margin:0;font-weight:600}
.google:has(a[href="#"]){display:none}
html.rascunho .google:has(a[href="#"]){display:flex;outline:2px dashed var(--ambar);outline-offset:4px}

/* FAQ */
.faq{background:var(--gelo-2)}
.faq__grid{display:grid;gap:28px}
@media (min-width:900px){.faq__grid{grid-template-columns:.8fr 1.2fr;gap:64px}}
.faq__lista{border-top:1px solid var(--linha)}
.faq details{border-bottom:1px solid var(--linha)}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;font-weight:700;font-size:17px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:26px;width:9px;height:9px;border-right:2.5px solid var(--azul);border-bottom:2.5px solid var(--azul);transform:rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg);top:30px}
.faq details p{color:var(--texto2);padding:0 40px 20px 0;margin:0}

/* Chamada final */
.chamada{position:relative;overflow:hidden;background:var(--grafite);color:#fff;padding:64px 0 0}
.chamada__in{display:grid;gap:10px;align-items:end}
.chamada h2{color:#fff}
.chamada p{color:#C4CFD8;max-width:44ch;margin:16px 0 28px;font-size:18px}
.chamada__in > div{padding-bottom:0}
.chamada__mascote{width:62%;max-width:300px;justify-self:center;margin-top:12px}
@media (max-width:899px){
  .chamada{--h:240px;padding-top:56px}
  .chamada__in > div{position:relative;z-index:1;padding-bottom:calc(var(--h) * .43 - 28px)}
  .chamada p{max-width:60%}
  .chamada__mascote{position:absolute;right:-6px;bottom:0;width:auto;max-width:none;height:var(--h);margin:0}
}
@media (min-width:600px) and (max-width:899px){.chamada{--h:300px}.chamada p{max-width:52%}}
@media (min-width:900px){
  .chamada{padding:48px 0 0}
  .chamada__in{grid-template-columns:1fr auto;gap:48px;align-items:center}
  .chamada__in > div{padding:40px 0 64px}
  .chamada__mascote{width:300px;align-self:end}
}

/* Contato + mapa */
.contato{background:var(--branco)}
.contato__grid{display:grid;gap:40px;align-items:center}
@media (min-width:900px){.contato__grid{grid-template-columns:1fr 1fr;gap:64px}}
.contato__lista{list-style:none;margin:24px 0;padding:0;display:grid;gap:14px}
.contato__lista li{display:grid;grid-template-columns:96px 1fr;gap:12px;font-size:16px}
.contato__lista span{font-size:13px;font-weight:700;color:var(--texto2);padding-top:2px}
.contato__lista a{font-weight:700;text-decoration:none}
.cidades p{font-size:15px;color:var(--texto2);margin:0 0 8px}
.cidades strong{color:var(--grafite)}
.mapa__box{background:var(--gelo-2);border:1px solid var(--linha);border-radius:22px;padding:14px}
.mapa{width:100%;height:auto;display:block}
.mapa .anel{fill:none;stroke:var(--ciano);stroke-width:1.2;stroke-dasharray:4 6;opacity:.7}
.mapa .raio{stroke:var(--ciano);stroke-width:1;opacity:.35}
.mapa .pt--prox{fill:var(--ciano)}
.mapa .pt--polo{fill:var(--azul)}
.mapa .cid{font:600 18px var(--fonte);fill:var(--grafite)}
.mapa .centro{fill:var(--azul)}
.mapa .centro-halo{fill:var(--azul);opacity:.15;animation:halo 3s ease-in-out infinite;transform-origin:300px 300px}
@keyframes halo{50%{transform:scale(1.25);opacity:.05}}
@media (prefers-reduced-motion:reduce){.mapa .centro-halo{animation:none}}
.mapa .centro-txt{font:800 17px var(--fonte);fill:#fff}
.mapa__nota{font-size:12px;color:var(--texto2);text-align:center;margin:6px 0 2px}

/* Rodapé */
.rodape{background:var(--grafite-2);color:#C4CFD8;padding:56px 0 24px}
.rodape__grid{display:grid;gap:28px}
@media (min-width:900px){.rodape__grid{grid-template-columns:1.3fr auto auto;gap:64px}}
.rodape__logo{width:170px;margin-bottom:14px}
.rodape p{max-width:40ch;font-size:15px;margin:0}
.rodape nav,.rodape__contato{display:flex;flex-direction:column;gap:10px;font-size:15px}
.rodape a{color:#E6F2F5;text-decoration:none}
.rodape a:hover{color:#fff;text-decoration:underline}
.rodape__fim{margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);font-size:13px;color:#8C99A5}

/* WhatsApp flutuante */
.whats-flutuante{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:40;width:58px;height:58px;border-radius:50%;
  background:var(--whats);display:grid;place-items:center;box-shadow:0 8px 22px rgba(38,49,59,.3);transition:transform .2s}
.whats-flutuante:hover{transform:scale(1.06)}
.whats-flutuante img{width:30px;height:30px}
@media (min-width:900px){.whats-flutuante{right:28px;bottom:28px;width:62px;height:62px}}
html.apresentacao .google:has(a[href="#"]){display:flex}
@media (max-width:380px){h2{font-size:27px}.hero h1{font-size:33px}}
.contato__grid > *{min-width:0}
.contato__lista li{grid-template-columns:84px minmax(0,1fr)}
.contato__lista a{overflow-wrap:anywhere}
