/* =========================================================
   HD POOL INSPECTION — style.css
   Direção visual: PREMIUM ESCURO — azul profundo e ciano.
   Hero cinematográfico com foto em cheio (ref. Everest),
   tipografia forte (ref. Metric), seções arejadas (ref. Orionix).
   Estrutura de seções espelhada na American Leak Detection.
   ========================================================= */

/* ---------- TOKENS ---------- */
:root{
  --ink:#04121D;          /* fundo base */
  --ink-2:#071D2A;        /* fundo alternado */
  --deep:#072B45;         /* azul profundo */
  --blue:#0B4D7A;         /* azul de marca */
  --pool:#12A9D6;         /* azul-piscina */
  --cyan:#3FD2F0;         /* ciano — destaques */
  --turq:#2EE6C5;         /* turquesa — confirmações */
  --hl:#3FD2F0;           /* destaque do hero */

  --white:#FFFFFF;
  --ice:#EAF3F8;          /* texto principal */
  --soft:#A9C6D8;         /* texto de apoio */
  --dim:#7E9FB4;          /* texto terciário */

  --surf:rgba(255,255,255,.045);
  --surf-2:rgba(255,255,255,.075);
  --line:rgba(255,255,255,.12);
  --line-2:rgba(255,255,255,.20);

  --wa:#25D366;
  --star:#F5B324;
  --warn:#FFB73F;

  --r-sm:10px; --r:16px; --r-lg:22px; --r-xl:30px;
  --sh-1:0 2px 12px rgba(0,0,0,.24);
  --sh-2:0 16px 44px rgba(0,0,0,.34);
  --sh-3:0 30px 78px rgba(0,0,0,.48);

  --wrap:1240px;
  --pad:clamp(20px,5vw,40px);
  --sec-y:clamp(62px,8.5vw,116px);

  --f:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;

  --hd-h:78px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hd-h) + 14px)}
body{
  margin:0;font-family:var(--f);font-size:17px;line-height:1.65;
  color:var(--ice);background:var(--ink);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{max-width:100%;display:block}
img{height:auto}
/* O atributo `hidden` vem da folha do navegador e perde para qualquer regra
   de classe. Sem isto, .lb e .ck ficam invisíveis mas cobrindo a tela e
   interceptando todos os cliques do site. */
[hidden]{display:none !important}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:4px}

/* ---------- TIPOGRAFIA ---------- */
h1,h2,h3{line-height:1.1;letter-spacing:-.028em;font-weight:800;color:var(--white)}
h1{font-size:clamp(1.95rem,3.6vw,3.2rem);letter-spacing:-.034em}
h2{font-size:clamp(1.8rem,3.6vw,2.95rem)}
h3{font-size:clamp(1.1rem,1.6vw,1.36rem);font-weight:700;letter-spacing:-.015em}

.eyebrow{
  font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:16px;
}
.kicker{
  font-size:clamp(.66rem,1.4vw,.75rem);font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:20px;
}
.lead{font-size:clamp(1.01rem,1.45vw,1.16rem);color:var(--soft);max-width:64ch;line-height:1.68}

/* ---------- LAYOUT ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.wrap--narrow{max-width:920px}
.sec{padding-block:var(--sec-y);position:relative}
.sec--light{background:var(--ink)}
.sec--paper{background:var(--ink-2)}
.sec--dark{background:linear-gradient(168deg,#061B27,var(--ink) 60%,#051822)}
.sec--accent{
  background:linear-gradient(115deg,var(--deep),var(--blue) 58%,#0E5F92);
  padding-block:clamp(44px,5.5vw,72px);
}

.shead{max-width:820px;margin-bottom:clamp(36px,4.6vw,58px)}
.shead h2{margin-bottom:16px}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--cyan);color:var(--ink);padding:14px 22px;border-radius:0 0 var(--r-sm) 0;font-weight:700;
}
.skip:focus{left:0}

/* ---------- BOTÕES ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 26px;border-radius:100px;font-weight:600;font-size:.95rem;letter-spacing:-.01em;
  background:var(--cyan);color:var(--ink);border:1px solid transparent;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease);
  will-change:transform;text-align:center;
}
/* o ícone nunca encolhe: sem isto ele é espremido em botões estreitos */
.btn svg{flex-shrink:0}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.btn:active{transform:translateY(0)}
.btn--lg{padding:17px 32px;font-size:1rem}
.btn--sm{padding:10px 18px;font-size:.86rem}
.btn--full{width:100%}
.btn--wa{background:var(--wa);color:#04231A}
.btn--wa:hover{background:#1FBE5A;box-shadow:0 14px 34px rgba(37,211,102,.36)}
.btn--ghost{background:rgba(255,255,255,.08);color:var(--white);border-color:var(--line-2);backdrop-filter:blur(10px)}
.btn--ghost:hover{background:rgba(255,255,255,.16)}
.btn--ghost2{background:transparent;color:var(--ice);border-color:var(--line-2)}
.btn--ghost2:hover{background:rgba(255,255,255,.10)}
.ctarow{margin-top:clamp(32px,3.8vw,46px)}

/* ---------- HEADER ---------- */
.hd{
  position:fixed;inset:0 0 auto;z-index:100;
  padding:16px var(--pad);
  transition:background .35s var(--ease),padding .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
.hd__in{
  max-width:var(--wrap);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:22px;
}
.hd.is-stuck{
  background:rgba(4,18,29,.90);backdrop-filter:blur(18px) saturate(150%);
  padding-block:10px;box-shadow:0 6px 26px rgba(0,0,0,.34);border-bottom-color:var(--line);
}

.brand{display:flex;align-items:center;gap:13px;flex-shrink:0}
.brand__img{height:44px;width:auto;transition:height .35s var(--ease)}
.brand__img--dark{display:none}      /* logo azul: só em fundo claro (páginas legais) */
.hd.is-stuck .brand__img{height:38px}
.brand__sub{
  display:none;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);font-weight:500;border-left:1px solid var(--line);padding-left:13px;
  max-width:150px;line-height:1.35;
}
@media (min-width:1180px){.brand__sub{display:block}}

.nav__list{display:flex;align-items:center;gap:2px}
.nav__list a{
  display:block;padding:9px 13px;border-radius:100px;font-size:.89rem;font-weight:500;
  color:rgba(255,255,255,.88);transition:background .22s var(--ease),color .22s var(--ease);
}
.nav__list a:hover{background:rgba(255,255,255,.12)}
.nav__list a.is-active{color:var(--cyan);background:rgba(63,210,240,.12)}
.nav__cta{display:none}

.hd__act{display:flex;align-items:center;gap:12px}
.hd__cta{padding:11px 20px;font-size:.88rem}

.burger{
  display:none;width:46px;height:46px;border-radius:12px;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
  border:1px solid var(--line-2);background:rgba(255,255,255,.08);backdrop-filter:blur(10px);
}
.burger span{display:block;width:19px;height:2px;background:#fff;border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:1024px){
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(90vw,380px);
    background:#061B27;padding:calc(var(--hd-h) + 30px) 28px 40px;
    transform:translateX(100%);transition:transform .38s var(--ease);
    display:flex;flex-direction:column;gap:26px;overflow-y:auto;
    box-shadow:-20px 0 60px rgba(0,0,0,.5);
  }
  .nav.is-open{transform:translateX(0)}
  .nav__list{flex-direction:column;align-items:stretch;gap:2px}
  .nav__list a{padding:14px 16px;font-size:1.04rem;border-radius:var(--r-sm)}
  .nav__cta{display:flex}
  .hd__cta span{display:none}
  /* especificidade 0,2,0 para não perder para o .btn de telas menores */
  .hd__act .hd__cta{padding:0;width:46px;height:46px;border-radius:14px;gap:0}
  .burger{display:flex}
}
body.is-locked{overflow:hidden}
.scrim{
  position:fixed;inset:0;z-index:99;background:rgba(0,0,0,.6);
  backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .3s
}
.scrim.is-on{opacity:1;pointer-events:auto}

/* ---------- HERO ---------- */
.hero{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:min(100svh,880px);
  display:flex;flex-direction:column;justify-content:flex-start;
  padding-top:calc(var(--hd-h) + clamp(20px,4vw,56px));
  background:var(--ink);
}
.hero__media{position:absolute;inset:0;z-index:-1;background:var(--deep)}
.hero__media picture{display:block;width:100%;height:100%}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 42%}
/* escurecimento que dá contraste ao texto em qualquer ponto da foto */
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(4,18,29,.88) 0%,rgba(4,18,29,.42) 26%,rgba(4,18,29,.58) 58%,rgba(4,18,29,.96) 100%),
    linear-gradient(96deg,rgba(4,18,29,.86) 0%,rgba(4,18,29,.48) 52%,rgba(7,43,69,.22) 100%);
}
.hero__scan{
  position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:.5;
  background:
    repeating-linear-gradient(180deg,rgba(63,210,240,.05) 0 2px,transparent 2px 5px),
    linear-gradient(180deg,transparent 0%,rgba(63,210,240,.16) 50%,transparent 100%);
  background-size:100% 100%,100% 240px;
  background-repeat:repeat,no-repeat;
  animation:scan 8s linear infinite;
}
@keyframes scan{0%{background-position:0 0,0 -260px}100%{background-position:0 0,0 110%}}

.hero__in{
  position:relative;width:100%;max-width:var(--wrap);
  margin-inline:auto;margin-block:auto;
  padding:0 var(--pad) clamp(26px,3.4vw,44px);
}
.hero__copy{text-align:left;max-width:44rem}
.hero h1{max-width:19ch;text-shadow:0 3px 26px rgba(0,0,0,.42)}
.hero__hl{color:var(--hl)}
.hero__sub{
  margin-top:18px;max-width:58ch;font-size:clamp(.96rem,1.2vw,1.06rem);
  color:rgba(234,243,248,.88);line-height:1.66;
}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;margin-top:30px}

.hero__link{
  display:inline-flex;align-items:center;gap:9px;
  padding:14px 4px;min-height:48px;
  font-size:.97rem;font-weight:600;color:var(--white);
  border-bottom:1.5px solid rgba(63,210,240,.55);
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.hero__link svg{transition:transform .3s var(--ease)}
.hero__link:hover{color:var(--cyan);border-bottom-color:var(--cyan)}
.hero__link:hover svg{transform:translateX(4px)}

.hero__chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.hero__chips li{
  font-size:.8rem;font-weight:500;padding:9px 16px;border-radius:100px;
  background:rgba(255,255,255,.09);border:1px solid var(--line-2);color:rgba(255,255,255,.94);
  backdrop-filter:blur(10px);
}
.hero__chips .is-rating{display:inline-flex;align-items:center;gap:7px;border-color:rgba(245,179,36,.5)}
.hero__chips .is-rating svg{fill:var(--star);flex-shrink:0}
.hero__chips .is-rating strong{color:var(--white);font-weight:800}
.hero__chips .is-num{border-color:rgba(63,210,240,.45)}
.hero__chips .is-num strong{color:var(--cyan);font-weight:800;font-variant-numeric:tabular-nums}
.hero__tel{margin-top:24px;font-size:.95rem;color:var(--soft)}
.hero__tel a{font-weight:700;color:var(--white);border-bottom:2px solid var(--cyan);padding-bottom:1px}
.hero__tel a:hover{color:var(--cyan)}

@media (max-width:700px){
  .hero{min-height:auto;padding-bottom:8px}
  .hero__media img{object-position:50% 38%}
}

/* ---------- BARRA DE CREDIBILIDADE ---------- */
.credbar{
  position:relative;width:100%;
  border-top:1px solid var(--line);
  background:rgba(4,18,29,.62);backdrop-filter:blur(20px) saturate(140%);
}
.credbar__in{
  max-width:var(--wrap);margin-inline:auto;padding:0 var(--pad);
  display:grid;grid-template-columns:repeat(3,1fr);
}
.cred{
  display:flex;align-items:center;gap:12px;padding:20px 18px;
  border-left:1px solid var(--line);color:var(--cyan);
}
.cred:first-child{border-left:0}
.cred svg{width:23px;height:23px;flex-shrink:0}
.cred span{display:flex;flex-direction:column;font-size:.78rem;color:var(--soft);line-height:1.35}
.cred b{color:var(--white);font-size:.87rem;font-weight:700;letter-spacing:-.01em}
@media (max-width:900px){
  .credbar__in{grid-template-columns:1fr}
  .cred{border-left:0;border-top:1px solid var(--line);padding:13px 4px}
  .cred:first-child{border-top:0}
}

/* ---------- QUEM ATENDEMOS ---------- */
.svc{
  padding:28px 26px 30px;border-radius:var(--r);background:var(--surf);
  border:1px solid var(--line);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
}
.svc:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:rgba(63,210,240,.45);background:var(--surf-2)}
.svc__ico{
  width:56px;height:56px;border-radius:14px;display:grid;place-items:center;
  color:var(--cyan);background:rgba(63,210,240,.12);border:1px solid rgba(63,210,240,.24);
  margin-bottom:18px;
}
.svc__ico svg{width:30px;height:30px}
.svc h3{margin-bottom:9px}
.svc>p{font-size:.93rem;color:var(--soft);line-height:1.6;margin-bottom:15px}
.svc .ticks{grid-template-columns:1fr;gap:7px;padding-top:15px;border-top:1px solid var(--line)}
.svc .ticks li{font-size:.87rem}

/* ---------- NÚMEROS ---------- */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:0}
.stat{
  background:var(--surf);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 22px 20px;display:flex;flex-direction:column-reverse;gap:6px;
  transition:border-color .28s var(--ease),transform .28s var(--ease);
}
.stat:hover{border-color:rgba(63,210,240,.45);transform:translateY(-3px)}
.stat dt{font-size:.76rem;font-weight:600;letter-spacing:.04em;color:var(--soft)}
.stat dd{display:flex;flex-direction:column;gap:2px}
.stat__n{
  font-size:clamp(2rem,3.4vw,2.7rem);font-weight:800;letter-spacing:-.04em;
  color:var(--cyan);line-height:1;font-variant-numeric:tabular-nums;
}
.stat__s{font-size:.74rem;color:var(--dim);font-weight:500}
@media (max-width:480px){.stats{grid-template-columns:1fr}}

/* ---------- SUBTÍTULO ---------- */
.subhead{
  margin:clamp(44px,4.8vw,66px) 0 22px;font-size:clamp(1.14rem,1.9vw,1.45rem);
  font-weight:800;letter-spacing:-.025em;color:var(--white);
}

/* ---------- AVALIAÇÕES ---------- */
.rev__top{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:22px;margin-bottom:clamp(28px,3.6vw,42px);
}
.rev__top h2{margin:0}
.rev__sub{margin:10px 0 0;color:var(--soft);font-size:.98rem}
.gbadge{
  display:flex;align-items:center;gap:16px;padding:15px 24px;border-radius:100px;
  background:var(--surf);border:1px solid var(--line);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease);
}
.gbadge:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:rgba(63,210,240,.45)}
.gbadge__n{font-size:2rem;font-weight:800;letter-spacing:-.04em;color:var(--white);line-height:1}
.gbadge__b{display:flex;flex-direction:column;gap:3px}
.gbadge__s{display:flex;gap:2px}
.gbadge__s svg{width:16px;height:16px;fill:var(--star)}
.gbadge__t{font-size:.79rem;color:var(--soft);font-weight:500}

.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:16px}
.quote{
  padding:28px 26px 26px;border-radius:var(--r);background:var(--surf);
  border:1px solid var(--line);display:flex;flex-direction:column;gap:14px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.quote:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:rgba(63,210,240,.35)}
.quote__s{color:var(--star);font-size:1.02rem;letter-spacing:2px;line-height:1}
.quote blockquote{font-size:.97rem;line-height:1.65;color:var(--ice);flex:1}
.quote figcaption{display:flex;flex-direction:column;gap:2px;padding-top:14px;border-top:1px solid var(--line)}
.quote figcaption b{font-size:.93rem;font-weight:700;color:var(--white)}
.quote figcaption span{font-size:.78rem;color:var(--dim)}

/* ---------- SINAIS — lista compacta ---------- */
.signs{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:8px}
.signs li{
  position:relative;padding:12px 16px 12px 40px;border-radius:var(--r-sm);
  background:var(--surf);border:1px solid var(--line);font-weight:500;font-size:.92rem;
  line-height:1.4;display:flex;align-items:center;min-height:46px;
  transition:border-color .28s var(--ease),background .28s var(--ease);
}
.signs li::before{
  content:"";position:absolute;left:15px;top:50%;transform:translateY(-50%);
  width:14px;height:14px;border-radius:50%;
  border:2px solid var(--cyan);background:radial-gradient(circle,var(--cyan) 32%,transparent 33%);
}
.signs li:hover{transform:translateY(-3px);border-color:rgba(63,210,240,.45);background:var(--surf-2)}

.note{
  margin-top:32px;padding:22px 26px;border-left:4px solid var(--cyan);
  background:linear-gradient(90deg,rgba(63,210,240,.13),transparent);
  border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:1.01rem;color:var(--ice);font-weight:500;
}
.note--inline{margin-top:20px;font-size:.95rem}
.note strong{color:var(--white)}

/* ---------- ETAPAS ---------- */
.stages{display:flex;flex-direction:column;gap:clamp(50px,6.5vw,92px)}
.stage{display:grid;grid-template-columns:0.95fr 1fr;gap:clamp(28px,4.2vw,60px);align-items:center}
.stage--rev .stage__media{order:2}
.stage__media{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-3);border:1px solid var(--line);background:var(--deep);
}
.stage__media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:transform .8s var(--ease)}
.stage__media--diag{background:var(--ink)}
.stage__media--diag img{object-fit:contain}

/* ---------- VÍDEO DO TESTE DE CONTRASTE ---------- */
.stage__media--vid{background:#03101A;display:grid;place-items:center}
.vid{
  display:block;width:100%;height:auto;aspect-ratio:3/4;
  object-fit:cover;background:#03101A;
}
@media (min-width:881px){ .vid{max-height:600px} }

/* Botão de play desenhado. Sem JavaScript ele some e ficam os controles
   nativos do navegador, que funcionam sozinhos. */
.vplay{
  position:absolute;inset:0;z-index:3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  opacity:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(3,16,26,.30),rgba(3,16,26,.62));
  transition:opacity .3s var(--ease),background .3s var(--ease);
  color:#fff;
}
.js-on .vplay{opacity:1;pointer-events:auto}
.js-on .vplay:hover{background:linear-gradient(180deg,rgba(3,16,26,.20),rgba(3,16,26,.52))}
.vplay__ico{
  width:74px;height:74px;border-radius:50%;display:grid;place-items:center;
  background:var(--cyan);color:var(--ink);
  box-shadow:0 10px 34px rgba(63,210,240,.44);
  transition:transform .3s var(--ease);
}
.vplay__ico svg{margin-left:3px}
.vplay:hover .vplay__ico{transform:scale(1.08)}
.vplay__txt{
  font-size:.84rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  text-shadow:0 2px 12px rgba(0,0,0,.6);
}
.vplay.is-off{opacity:0;pointer-events:none}
.stage:hover .stage__media:not(.stage__media--diag) img{transform:scale(1.04)}
.stage__tag{
  position:absolute;top:16px;left:16px;z-index:2;
  font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  padding:8px 15px;border-radius:100px;color:var(--ink);
  background:var(--cyan);box-shadow:0 6px 20px rgba(63,210,240,.34);
}
.stage__body h3{font-size:clamp(1.45rem,2.5vw,2.05rem);font-weight:800;margin-bottom:15px;letter-spacing:-.028em}
.stage__body>p{color:var(--soft);margin-bottom:22px;max-width:54ch}

.ticks{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:9px 22px}
.ticks li{position:relative;padding-left:29px;font-size:.94rem;color:var(--ice);line-height:1.5}
.ticks li::before{
  content:"";position:absolute;left:0;top:.42em;width:15px;height:9px;
  border-left:2.5px solid var(--turq);border-bottom:2.5px solid var(--turq);
  transform:rotate(-45deg);border-radius:1px;
}
.ticks--sm li{font-size:.92rem}

.pull{
  margin-top:clamp(48px,5.5vw,74px);padding:clamp(28px,3.6vw,44px);
  border-radius:var(--r-lg);text-align:center;
  background:linear-gradient(120deg,rgba(18,169,214,.16),rgba(46,230,197,.08));
  border:1px solid rgba(63,210,240,.30);
  font-size:clamp(1.1rem,2vw,1.55rem);font-weight:600;line-height:1.42;
  letter-spacing:-.02em;color:var(--white);
}

@media (max-width:880px){
  .stage{grid-template-columns:1fr;gap:24px}
  .stage--rev .stage__media{order:0}
}

/* ---------- CARDS ---------- */
.grid{display:grid;gap:16px}
.grid--3{grid-template-columns:repeat(auto-fill,minmax(298px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fill,minmax(258px,1fr))}

.card{
  padding:28px 26px 30px;border-radius:var(--r);background:var(--surf);
  border:1px solid var(--line);position:relative;overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.card::after{
  content:"";position:absolute;inset:auto 0 0 0;height:3px;
  background:linear-gradient(90deg,var(--pool),var(--turq));
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);
}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:rgba(63,210,240,.4)}
.card:hover::after{transform:scaleX(1)}
.card__n{display:block;font-size:.72rem;font-weight:800;letter-spacing:.16em;color:var(--cyan);margin-bottom:13px}
.card h3{margin-bottom:9px}
.card p{font-size:.92rem;color:var(--soft);line-height:1.6}

/* equipamentos — ladrilho compacto: ícone + nome, sem descrição */
/* minmax(0,1fr) impede que palavras longas alarguem uma coluna e desalinhem as demais */
.eqs{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:12px}
.eqs>*{min-width:0}
.eq{
  border-radius:var(--r);background:var(--surf);border:1px solid var(--line);
  transition:transform .28s var(--ease),border-color .28s var(--ease),background .28s var(--ease);
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:22px 14px 18px;text-align:center;
}
.eq:hover{transform:translateY(-4px);border-color:rgba(63,210,240,.45);background:var(--surf-2)}
.eq__ico{display:grid;place-items:center;color:var(--cyan)}
.eq__ico svg{width:44px;height:44px;transition:transform .4s var(--ease)}
.eq:hover .eq__ico svg{transform:scale(1.1)}
.eq__b h3{font-size:.95rem;line-height:1.3}

/* tipos de piscina */
.tcard{
  border-radius:var(--r);overflow:hidden;background:var(--surf);border:1px solid var(--line);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.tcard:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:rgba(63,210,240,.45)}
.tcard__art{
  aspect-ratio:5/3;display:grid;place-items:center;padding:24px;overflow:hidden;
  color:var(--cyan);background:linear-gradient(140deg,rgba(11,77,122,.5),rgba(7,43,69,.7));
}
.tcard__art--vin{background:linear-gradient(140deg,rgba(18,169,214,.24),rgba(7,43,69,.72))}
.tcard__art--fib{background:linear-gradient(140deg,rgba(46,230,197,.18),rgba(7,43,69,.72))}
.tcard__art svg{width:100%;height:100%;transition:transform .5s var(--ease)}
.tcard:hover .tcard__art svg{transform:scale(1.05)}
.tcard__b{padding:22px 26px 26px}
.tcard__b h3{margin-bottom:8px}
.tcard__b p{font-size:.92rem;color:var(--soft);line-height:1.6}

/* ---------- TIMELINE ---------- */
.tl{position:relative;display:flex;flex-direction:column;gap:6px;padding-left:8px}
.tl::before{
  content:"";position:absolute;left:29px;top:22px;bottom:22px;width:2px;
  background:linear-gradient(180deg,var(--pool),var(--turq));
  transform:scaleY(var(--p,0));transform-origin:top;transition:transform .1s linear;
}
.tl__i{display:flex;gap:24px;padding-bottom:30px;position:relative}
.tl__n{
  flex-shrink:0;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;font-weight:800;font-size:1.02rem;
  background:var(--ink-2);color:var(--cyan);border:2px solid var(--cyan);
  position:relative;z-index:1;box-shadow:0 0 0 6px var(--ink-2);
}
.tl__c{padding-top:5px}
.tl__c h3{margin-bottom:8px}
.tl__c p{color:var(--soft);font-size:.98rem;max-width:60ch}
.tl__c p+p{margin-top:9px}
.tl__c strong{color:var(--white)}
.tl__x{font-size:.9rem !important;color:var(--dim) !important;padding-left:15px;border-left:2px solid var(--line)}
.tl__c .ticks{margin-top:12px}

/* ---------- SPLIT / FATORES ---------- */
.split{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(30px,4.5vw,66px);align-items:center}
.split h2{margin-bottom:16px}
.split__l .btn{margin-top:28px}
.split .lead+.lead{margin-top:14px}

.factors{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:11px}
.factors li{
  padding:19px 20px;border-radius:var(--r-sm);
  background:var(--surf);border:1px solid var(--line);
  transition:background .28s var(--ease),border-color .28s var(--ease),transform .28s var(--ease);
}
.factors li:hover{background:rgba(63,210,240,.10);border-color:rgba(63,210,240,.4);transform:translateY(-3px)}
.factors b{display:block;font-size:.95rem;color:var(--white);margin-bottom:4px;font-weight:700}
.factors span{font-size:.81rem;color:var(--dim);line-height:1.45}

@media (max-width:880px){.split{grid-template-columns:1fr;gap:32px}}

/* ---------- GALERIA ---------- */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.gal__i{
  position:relative;border-radius:var(--r);overflow:hidden;display:block;width:100%;
  border:1px solid var(--line);background:var(--deep);aspect-ratio:3/4;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.gal__i--wide{grid-column:span 2;aspect-ratio:16/10}
.gal__i img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.gal__i::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 42%,rgba(4,18,29,.90) 100%);
}
.gal__i:hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:rgba(63,210,240,.5)}
.gal__i:hover img{transform:scale(1.07)}
.gal__cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px 18px;
  font-size:.83rem;font-weight:600;color:#fff;text-align:left;line-height:1.35;
}
@media (max-width:1000px){
  .gal{grid-template-columns:repeat(2,1fr)}
  .gal__i--wide{grid-column:span 2}
}
@media (max-width:560px){
  .gal{grid-template-columns:1fr}
  .gal__i--wide{grid-column:span 1}
}

/* ---------- ALERTA REPARO ---------- */
.alertbox{
  display:flex;gap:22px;align-items:flex-start;
  padding:clamp(24px,3.2vw,38px);border-radius:var(--r-lg);
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(10px);
}
.alertbox svg{flex-shrink:0;color:var(--cyan);margin-top:4px}
.alertbox h2{font-size:clamp(1.28rem,2.4vw,1.86rem);margin-bottom:11px}
.alertbox p{color:rgba(255,255,255,.90);max-width:74ch;font-size:1.01rem}

/* ---------- PLACEHOLDER / AVISO ---------- */
.ph-warn{
  padding:22px 26px;border-radius:var(--r);font-size:.94rem;line-height:1.6;
  background:rgba(255,183,63,.10);border:1px dashed rgba(255,183,63,.42);color:#F2CE8E;
}
.ph-warn strong{color:#FFD79A}
.ph-warn code{background:rgba(255,183,63,.18);padding:2px 7px;border-radius:5px;font-size:.9em}

/* ---------- FAQ ---------- */
.faq{display:flex;flex-direction:column;gap:10px}
.faq__i{
  border-radius:var(--r);overflow:hidden;
  background:var(--surf);border:1px solid var(--line);
  transition:border-color .28s var(--ease),background .28s var(--ease);
}
.faq__i[open]{border-color:rgba(63,210,240,.45);background:rgba(63,210,240,.07)}
.faq__i summary{
  list-style:none;cursor:pointer;padding:21px 62px 21px 26px;position:relative;
  font-weight:600;font-size:1.01rem;color:var(--white);line-height:1.45;
}
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary::after{
  content:"";position:absolute;right:26px;top:50%;width:11px;height:11px;
  border-right:2.5px solid var(--cyan);border-bottom:2.5px solid var(--cyan);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease);
}
.faq__i[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
.faq__i summary:hover{color:var(--cyan)}
.faq__a{padding:0 26px 24px}
.faq__a p{color:var(--soft);font-size:.97rem;line-height:1.66}
.faq__a p+p{margin-top:12px}
.faq__a strong{color:var(--ice)}

/* ---------- CTA FINAL ---------- */
.final{position:relative;padding-block:clamp(60px,7.5vw,104px);overflow:hidden;isolation:isolate;background:var(--ink)}
.final__media{position:absolute;inset:0;z-index:-1}
.final__media img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.final__grad{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(4,18,29,.95),rgba(4,18,29,.80) 45%,rgba(4,18,29,.97)),
    linear-gradient(100deg,rgba(7,43,69,.92),rgba(4,18,29,.60));
}
.final__in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,4.5vw,64px);align-items:center}
.final__l h2{font-size:clamp(1.65rem,3.2vw,2.7rem);margin-bottom:18px;max-width:19ch}
.final__l .btn{margin-top:30px}
.final__tel{margin-top:20px;font-size:.95rem;color:var(--soft)}
.final__tel a{font-weight:700;color:var(--white);border-bottom:2px solid var(--cyan)}
@media (max-width:900px){.final__in{grid-template-columns:1fr}}

/* ---------- FORMULÁRIO ---------- */
.fbox{
  padding:clamp(26px,3.4vw,38px);border-radius:var(--r-xl);
  background:rgba(255,255,255,.075);border:1px solid var(--line-2);
  backdrop-filter:blur(24px) saturate(150%);box-shadow:var(--sh-3);
}
.fbox h3{font-size:1.28rem;margin-bottom:7px}
.fbox__s{font-size:.92rem;color:var(--soft);margin-bottom:22px;line-height:1.55}
.fbox__n{margin-top:16px;font-size:.79rem;color:var(--dim);line-height:1.55}
.f{margin-bottom:15px}
.f label,.f legend{display:block;font-size:.85rem;font-weight:600;margin-bottom:7px;color:var(--ice)}
.f label span{color:var(--cyan)}
.f legend em{font-weight:400;color:var(--dim);font-style:normal}
.f input,.f select,.f textarea{
  width:100%;padding:14px 16px;border-radius:var(--r-sm);
  background:rgba(4,18,29,.5);border:1px solid var(--line-2);
  color:var(--white);font-size:.96rem;transition:border-color .25s var(--ease),background .25s var(--ease);
}
.f textarea{resize:vertical;min-height:88px}
.f input::placeholder,.f textarea::placeholder{color:var(--dim)}
.f input:focus,.f select:focus,.f textarea:focus{
  outline:none;border-color:var(--cyan);background:rgba(4,18,29,.75);
  box-shadow:0 0 0 4px rgba(63,210,240,.16);
}
.f select option{background:var(--ink);color:#fff}
.f--set{border:0;padding:0;margin-inline:0}
.chk{display:flex;flex-wrap:wrap;gap:10px}
.chk label{
  display:inline-flex;align-items:center;gap:9px;margin:0;cursor:pointer;
  padding:10px 17px;border-radius:100px;font-weight:500;font-size:.9rem;
  background:rgba(4,18,29,.45);border:1px solid var(--line-2);
  transition:border-color .22s var(--ease),background .22s var(--ease);
}
.chk label:hover{border-color:var(--cyan)}
.chk input{width:17px;height:17px;accent-color:var(--cyan);cursor:pointer}
.err{display:block;margin-top:6px;font-size:.8rem;color:#FF9E8A;min-height:1px}
.f.has-err input,.f.has-err select,.f.has-err textarea{border-color:#FF9E8A}

/* ---------- RODAPÉ ---------- */
.ft{background:#030D16;color:var(--ice);padding-top:clamp(50px,5.5vw,76px);border-top:1px solid var(--line)}
.ft__in{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px;padding-bottom:44px}
.ft__brand .brand__img{height:52px;width:auto}
.ft__brand p{margin-top:18px;font-size:.9rem;color:var(--dim);max-width:34ch;line-height:1.62}
.ft__col h3{
  font-size:.73rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:17px;font-weight:700;
}
.ft__col li{font-size:.9rem;color:var(--soft);margin-bottom:11px;line-height:1.5}
.ft__col a{transition:color .22s var(--ease)}
.ft__col a:hover{color:var(--cyan)}
.ft__soc{margin-top:16px;display:flex;gap:14px}
.ft__bot{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  padding-block:22px;border-top:1px solid var(--line);
  font-size:.83rem;color:var(--dim);
}
@media (max-width:900px){.ft__in{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ft__in{grid-template-columns:1fr;gap:30px}}

/* ---------- LIGHTBOX ---------- */
.lb{
  position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  background:rgba(3,13,22,.96);backdrop-filter:blur(14px);padding:clamp(16px,4vw,48px);
  opacity:0;transition:opacity .3s var(--ease);
}
.lb.is-on{opacity:1}
.lb__f{display:flex;flex-direction:column;align-items:center;gap:16px;max-height:100%}
.lb__f img{max-height:78vh;width:auto;border-radius:var(--r);box-shadow:var(--sh-3);object-fit:contain}
.lb__f figcaption{color:var(--ice);font-size:.93rem;text-align:center;max-width:60ch}
.lb__x{
  position:absolute;top:18px;right:20px;width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.12);border:1px solid var(--line-2);
  color:#fff;font-size:1.9rem;line-height:1;display:grid;place-items:center;
  transition:background .22s var(--ease);
}
.lb__x:hover{background:rgba(255,255,255,.24)}
.lb__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:52px;height:52px;border-radius:50%;color:#fff;font-size:2.1rem;line-height:1;
  background:rgba(255,255,255,.12);border:1px solid var(--line-2);
  display:grid;place-items:center;transition:background .22s var(--ease);
}
.lb__nav:hover{background:rgba(255,255,255,.24)}
.lb__nav--p{left:16px}
.lb__nav--n{right:16px}
@media (max-width:600px){.lb__nav{width:44px;height:44px;font-size:1.7rem}.lb__nav--p{left:8px}.lb__nav--n{right:8px}}

/* ---------- COOKIES ---------- */
.ck{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:95;
  max-width:640px;padding:20px 24px;border-radius:var(--r-lg);
  background:rgba(4,18,29,.97);backdrop-filter:blur(18px);
  border:1px solid var(--line-2);box-shadow:var(--sh-3);color:var(--ice);
  display:flex;flex-wrap:wrap;align-items:center;gap:16px;justify-content:space-between;
  transform:translateY(140%);transition:transform .45s var(--ease);
}
.ck.is-on{transform:translateY(0)}
.ck p{font-size:.87rem;line-height:1.55;flex:1 1 300px;color:var(--soft)}
.ck a{color:var(--cyan);text-decoration:underline}
.ck__b{display:flex;gap:10px;flex-shrink:0}
@media (min-width:700px){.ck{left:24px;right:auto;bottom:24px}}

/* =========================================================
   BARRA FIXA DE CONTATO — celular
   Serviço local vive de ligação e WhatsApp: as duas ações
   ficam sempre ao alcance do polegar.
   ========================================================= */

/* =========================================================
   AJUSTES DE CELULAR
   ========================================================= */
@media (max-width:900px){
  /* a barra fixa substitui o botão flutuante */
  /* espaço para a barra não cobrir o fim do rodapé */
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
  /* aviso de cookies acima da barra */
  .ck{bottom:calc(84px + env(safe-area-inset-bottom,0px))}

  /* Mesmo desenho do desktop: foto em cheio ao fundo, texto por cima
     alinhado à esquerda. O véu é mais forte à esquerda para o texto ler
     sobre a foto, e a foto é enquadrada à direita para o mergulhador
     ficar do lado oposto às letras. */
  .hero{
    min-height:78svh;display:flex;flex-direction:column;justify-content:flex-end;
    padding-top:calc(var(--hd-h) + 16px);
  }
  .hero__media{position:absolute;inset:0;z-index:-1}
  .hero__media img{width:100%;height:100%;object-fit:cover;object-position:76% 46%}
  .hero__media::after{
    background:
      linear-gradient(180deg,rgba(4,18,29,.80) 0%,rgba(4,18,29,.42) 26%,rgba(4,18,29,.70) 62%,var(--ink) 100%),
      linear-gradient(100deg,rgba(4,18,29,.92) 0%,rgba(4,18,29,.72) 46%,rgba(4,18,29,.34) 100%);
  }
  .hero__in{margin-block:auto 0;padding-top:16px}
  /* texto compacto: o botão do WhatsApp precisa caber na primeira tela,
     descontando a barra de endereço do navegador do celular */
  .only-desk{display:none}
  .hero .kicker{font-size:.7rem;letter-spacing:.14em;margin-bottom:12px;line-height:1.4}
  .hero h1{font-size:1.72rem;line-height:1.12}
  .hero__sub{margin-top:12px;font-size:.95rem;line-height:1.5}
  .hero__cta{margin-top:22px;gap:10px 20px}
  .hero__chips{margin-top:18px;gap:7px}
  .hero__tel{margin-top:16px}
  .hero__in{padding-bottom:22px}

  /* barra de credibilidade compacta: uma linha por item */
  .cred{padding:11px 4px;gap:10px}
  .cred span{flex-direction:row;gap:5px;flex-wrap:wrap;font-size:.8rem}
  .cred b{font-size:.83rem}

  /* respiro entre seções */
  .sec{padding-block:30px}
  .shead{margin-bottom:26px}
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom,0px))}
  .ck{bottom:calc(78px + env(safe-area-inset-bottom,0px))}
}

@media (max-width:640px){
  /* densidade mais próxima do desktop: elementos menores, sem ocupar a tela toda */
  .btn{padding:12px 20px;font-size:.9rem}
  .btn--lg{padding:14px 22px;font-size:.92rem}
  h2{font-size:clamp(1.5rem,6.4vw,1.95rem)}
  h3{font-size:1.05rem}
  .lead{font-size:.98rem}

  /* fotos mais baixas: antes ocupavam quase a tela inteira */
  .gal{grid-template-columns:repeat(2,1fr);gap:9px}
  .gal__i{aspect-ratio:1/1}
  .gal__i--wide{grid-column:span 2;aspect-ratio:16/10}
  .gal__cap{padding:10px 11px;font-size:.76rem}
  .stage__media img{aspect-ratio:4/3}

  /* cartões e listas mais compactos */
  .card,.svc{padding:20px 18px 22px}
  .tcard__b{padding:16px 18px 20px}
  .signs{grid-template-columns:1fr;gap:7px}
  .signs li{padding:11px 14px 11px 36px;font-size:.89rem;min-height:44px}
  .signs li::before{left:13px;width:13px;height:13px}
  .eqs{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .eq{padding:14px 6px 12px;gap:8px}
  .eq__ico svg{width:32px;height:32px}
  .eq__b h3{font-size:.78rem;hyphens:auto}
  .quote{padding:20px 18px}
  .stat{padding:16px 16px 14px}
  .factors li{padding:14px 15px}
  .grid{gap:11px}
  .stages{gap:40px}
  .fbox{padding:22px 18px}
}

/* =========================================================
   TOQUE E LEGIBILIDADE
   ========================================================= */
/* remove o realce cinza padrão e o atraso de 300ms no toque */
a,button,summary,label,input,select,textarea{
  -webkit-tap-highlight-color:rgba(63,210,240,.18);
  touch-action:manipulation;
}

/* alvos com no mínimo 44px de altura */
.hero__tel a,.final__tel a{display:inline-block;padding:11px 2px;min-height:44px}
.ft__col a,.ft__col li{display:block;min-height:24px}
.ft__col a{padding:10px 0;min-height:44px}
.ft__col li{margin-bottom:2px}
.ck a{display:inline-block;padding:12px 0;min-height:44px}
.chk label{min-height:46px}
.chk input{width:22px;height:22px}
.faq__i summary{min-height:56px;display:flex;align-items:center}

/* nada de texto abaixo de 12px no celular */
@media (max-width:900px){
  .kicker{font-size:.79rem;letter-spacing:.18em}
  .stage__tag{font-size:.75rem;padding:8px 14px}
  .hero__chips li{font-size:.82rem;padding:10px 15px}
  .eyebrow{font-size:.75rem}
  .cred span{font-size:.8rem}
  .gal__cap{font-size:.85rem}
  .fbox__n,.stat__s,.quote figcaption span{font-size:.8rem}
  .ft__bot{font-size:.85rem}
  /* 16px é o mínimo: abaixo disso o iOS dá zoom ao focar o campo */
  .f input,.f select,.f textarea{font-size:16px}
}

/* ---------- ANIMAÇÃO DE ENTRADA ---------- */
/* A animação é enfeite, não requisito: o estado escondido só vale quando o
   JavaScript confirmou que está rodando (classe js-on no <html>). Sem JS —
   visualizador do WhatsApp, leitor de e-mail, JS bloqueado — o conteúdo
   aparece normalmente em vez de ficar invisível. */
.js-on .reveal{opacity:0;transform:translateY(24px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.js-on .reveal.is-in{opacity:1;transform:none}

/* ============================================================
   COMPACTAÇÃO PARA CELULAR
   Medido em 390×844: a página tinha 17,7 telas de rolagem.
   Aqui a densidade aumenta sem remover informação — o texto
   continua todo no HTML, só ocupa menos espaço.
   ============================================================ */
@media (max-width:900px){
  /* respiro entre seções: 62px × 13 seções gastava 1,6 tela só de vazio */
  :root{--sec-y:44px}
  .shead{margin-bottom:24px}
  .shead h2{margin-bottom:10px}
  .ctarow{margin-top:22px}
  .note{margin-top:20px;padding:16px 18px;font-size:.95rem}

  /* ETAPAS: foto mais baixa e listas em duas colunas */
  .stages{gap:34px}
  .stage{gap:16px}
  .stage__media img{aspect-ratio:16/10}
  .stage__body h3{font-size:1.32rem;margin-bottom:10px}
  .stage__body>p{margin-bottom:14px;font-size:.95rem}
  .ticks{grid-template-columns:1fr 1fr;gap:7px 12px}
  .ticks li{font-size:.85rem;padding-left:22px;line-height:1.4}
  .ticks li::before{width:11px;height:7px;border-width:2px}
  .pull{margin-top:30px;padding:22px 20px;font-size:1.05rem}

  /* EQUIPAMENTOS: 6 cartões altos viravam 1,8 tela — agora grade 2×3 enxuta */
  .grid--3,.grid--4{grid-template-columns:1fr 1fr;gap:8px}
  /* "quem atendemos" tem texto corrido: em 2 colunas de 190px o texto
     quebra demais e o bloco fica MAIS alto. Fica em coluna única. */
  #servicos .grid--3{grid-template-columns:1fr}
  /* o container dos equipamentos é .eqs (não .grid--3): em 3 colunas o
     cartão ficava com 111px e o nome do equipamento espremido */
  .eqs{grid-template-columns:1fr 1fr;gap:8px}
  .eq{flex-direction:row;align-items:center;gap:10px;padding:12px}
  .eq__ico{padding:0;border:0;background:none;width:38px;height:38px;flex-shrink:0}
  .eq__ico svg{width:32px;height:32px}
  /* min-width:0 é obrigatório: sem isso o filho flex não encolhe abaixo do
     conteúdo e "Hidrofone subaquático" estoura a coluna, criando rolagem
     horizontal na página inteira. */
  .eq__b{padding:0;min-width:0}
  .eq__b h3{font-size:.92rem;margin-bottom:2px;line-height:1.2;overflow-wrap:break-word;hyphens:auto}
  .eq__b p{display:none}          /* o nome do equipamento já se explica */

  /* TIPOS DE PISCINA: a ilustração ocupava ~250px por cartão */
  .tcard__art{display:none}
  .tcard__b{padding:14px 16px}
  .tcard__b h3{font-size:.95rem;margin-bottom:3px}
  .tcard__b p{font-size:.85rem;line-height:1.45}
  .subhead{margin:28px 0 14px;font-size:1.1rem}

  /* QUEM ATENDEMOS */
  .svc{padding:16px 16px 18px}
  .svc__ico{width:40px;height:40px;margin-bottom:10px;border-radius:10px}
  .svc__ico svg{width:22px;height:22px}
  .svc h3{font-size:1.02rem}
  .svc>p{font-size:.88rem;margin-bottom:10px}
  .svc .ticks{grid-template-columns:1fr;padding-top:10px;gap:5px}

  /* SINAIS: cartões largos e espaçados viravam lista longa */
  .signs{gap:7px}
  .signs li{padding:12px 14px 12px 40px;font-size:.9rem;border-radius:12px}
  .signs li::before{left:14px;width:15px;height:15px;border-width:2px}

  /* ORÇAMENTO */
  .factors{grid-template-columns:1fr 1fr;gap:7px}
  .factors li{padding:12px 13px}
  .factors b{font-size:.87rem;margin-bottom:2px}
  .factors span{font-size:.75rem;line-height:1.35}

  /* AVALIAÇÕES */
  .quotes{gap:10px}
  .quote{padding:18px 18px 16px;gap:10px}
  .quote blockquote{font-size:.9rem;line-height:1.55}
  .quote figcaption{padding-top:10px}
  .gbadge{padding:11px 18px;gap:12px}
  .gbadge__n{font-size:1.6rem}

  /* NÚMEROS */
  .stats{gap:8px}
  .stat{padding:14px 14px 12px}
  .stat__n{font-size:1.75rem}

  /* CARTÕES GERAIS */
  .card{padding:18px 16px 20px}
  .card h3{font-size:1rem}
  .card p{font-size:.87rem}

  /* FAQ e FORMULÁRIO */
  .faq__i summary{padding:15px 48px 15px 18px;font-size:.94rem}
  .faq__a{padding:0 18px 16px}
  .faq__a p{font-size:.9rem}
  .fbox{padding:20px 18px}
  .f{margin-bottom:11px}

  /* GALERIA: uma foto por linha gastava 1,3 tela */
  .gal{grid-template-columns:1fr 1fr;gap:8px}
  .gal__i,.gal__i--wide{aspect-ratio:1/1;grid-column:span 1}
  .gal__cap{padding:10px 12px;font-size:.74rem;line-height:1.25}

  /* FORMULÁRIO: no celular ele só monta uma mensagem e abre o WhatsApp —
     exatamente o que o botão verde já faz em um toque. Ocupava 1,4 tela
     de rolagem para adicionar atrito. Fica só no computador. */
  .fbox{display:none}
  .final__in{grid-template-columns:1fr}

  /* Listas de exemplo: os primeiros itens já comunicam. O texto continua
     no HTML (indexável), apenas não é exibido na tela pequena. */
  .signs li:nth-child(n+7){display:none}
  .stage__body .ticks li:nth-child(n+5){display:none}

  /* RODAPÉ: duas colunas em vez de uma pilha longa */
  .ft{padding-top:34px}
  .ft__in{grid-template-columns:1fr 1fr;gap:20px;padding-bottom:26px}
  .ft__brand{grid-column:1/-1}
  .ft__col li{margin-bottom:7px;font-size:.85rem}
  .ft__col h3{margin-bottom:12px}
}

/* ---------- MOVIMENTO REDUZIDO ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  /* precisa da mesma especificidade de .js-on .reveal para vencer */
  .js-on .reveal,.reveal{opacity:1;transform:none}
  .hero__scan{animation:none;opacity:.28}
}

/* ---------- PÁGINAS LEGAIS (fundo claro) ---------- */
.doc{background:var(--white)}
body:has(.doc){background:var(--white);color:#123}
body:has(.doc) .hd{background:rgba(255,255,255,.94);border-bottom-color:#DDE8EF}
body:has(.doc) .brand__img--light{display:none}
body:has(.doc) .brand__img--dark{display:block}

/* ---------- IMPRESSÃO ---------- */
@media print{
  .hd,.ck,.lb,.hero__scan,.burger{display:none !important}
  body{color:#000;background:#fff;font-size:12pt}
  .sec,.sec--dark,.sec--paper,.sec--light,.sec--accent,.final,.ft{background:#fff !important;color:#000 !important}
  h1,h2,h3,.ft__col li,.ft__brand p,.lead,p{color:#000 !important}
  .reveal{opacity:1 !important;transform:none !important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}

/* =========================================================
   COMPACTAÇÃO PARA CELULAR
   Referência medida em 08/2026: American Leak Detection 7,7
   telas, Roto-Rooter 7,4, ServPro 8,8. Este bloco reduz
   respiros e adensa grades para chegar perto de 9 telas —
   sem remover nenhum conteúdo.
   ========================================================= */
@media (max-width:900px){
  :root{--sec-y:38px}

  .shead{margin-bottom:22px}
  .shead h2{margin-bottom:11px}
  .ctarow{margin-top:24px}
  .note{margin-top:20px;padding:16px 18px}

  /* quadrados em 2 colunas: 3 fileiras em vez de 6 blocos altos */
  .gal{grid-template-columns:repeat(2,1fr);gap:8px}
  .gal__i,.gal__i--wide{aspect-ratio:1/1;grid-column:auto}
  .gal__cap{padding:10px 11px;font-size:.76rem}

  .grid--3,.grid--4{gap:9px}
  .eq__ico{padding:16px}
  .eq__ico svg{width:44px;height:44px}
  .eq__b{padding:12px 13px 15px}
  .eq__b h3{font-size:.92rem}

  .factors{grid-template-columns:repeat(2,1fr);gap:8px}
  .factors li{padding:13px 13px}
  .factors b{font-size:.87rem;margin-bottom:2px}
  .factors span{font-size:.75rem;line-height:1.35}

  .svc{padding:18px 17px 20px}
  .svc__ico{width:44px;height:44px;margin-bottom:12px}
  .svc__ico svg{width:24px;height:24px}
  .svc>p{margin-bottom:11px;font-size:.89rem}
  .svc .ticks{padding-top:11px;gap:5px}

  .signs li{padding:14px 16px 14px 46px;font-size:.93rem}
  .signs li::before{left:16px;width:16px;height:16px}
  .signs{gap:8px}

  /* etapas: mídia menos alta e lista mais densa */
  .stages{gap:34px}
  .stage{gap:16px}
  .stage__media img{aspect-ratio:16/11}
  .vid{aspect-ratio:4/5}
  .stage__body h3{margin-bottom:10px}
  .stage__body>p{margin-bottom:14px}
  .ticks{gap:6px 16px}
  .pull{margin-top:32px;padding:22px 20px}

  /* avaliações */
  .quote{padding:18px 17px 17px;gap:10px}
  .quote blockquote{font-size:.92rem;line-height:1.55}
  .quote figcaption{padding-top:10px}
  .rev__top{margin-bottom:20px;gap:14px}
  .gbadge{padding:11px 18px}

  /* dúvidas */
  .faq{gap:7px}
  .faq__i summary{padding:15px 50px 15px 18px;font-size:.95rem}
  .faq__i summary::after{right:18px}
  .faq__a{padding:0 18px 17px}

  /* números e rodapé */
  .stat{padding:15px 15px 13px}
  .subhead{margin:28px 0 14px}
  .ft{padding-top:34px}
  .ft__in{gap:20px;padding-bottom:26px}
  .ft__col h3{margin-bottom:11px}
  .ft__col li{margin-bottom:7px;font-size:.86rem}
  .ft__brand p{margin-top:12px}
  .alertbox{gap:14px;padding:20px 18px}
  .fbox{padding:20px 18px}
}

/* ---------- AVALIAÇÕES EM CARROSSEL NO CELULAR ----------
   Três cards empilhados ocupavam ~670px. Em fila deslizável
   ocupam a altura de um só. O card seguinte fica espiando na
   borda: é essa a pista de que dá para arrastar. */
@media (max-width:900px){
  .quotes{
    display:flex;grid-template-columns:none;gap:10px;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin-inline:calc(var(--pad) * -1);
    padding:2px var(--pad) 6px;
  }
  .quotes::-webkit-scrollbar{display:none}
  .quote{flex:0 0 80%;scroll-snap-align:start}
  .quote blockquote{
    display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;
    overflow:hidden;
  }
}

/* =========================================================
   CAMADA DE ACABAMENTO — animações e efeitos
   Tudo sob .js-on (sem JS o site aparece pronto) e desligado
   em prefers-reduced-motion, no fim do arquivo.
   Só transform/opacity/filter: não recalculam layout.
   ========================================================= */

/* ---- barra de progresso da leitura ---- */
.prog{
  position:fixed;left:0;top:0;height:2px;z-index:101;
  width:100%;transform:scaleX(var(--p,0));transform-origin:0 50%;
  background:linear-gradient(90deg,var(--pool),var(--cyan),var(--turq));
  pointer-events:none;opacity:0;transition:opacity .3s var(--ease);
}
.js-on .prog{opacity:1}

/* ---- entrada escalonada: cada item entra 70ms depois do anterior ---- */
.js-on .reveal{transition-delay:calc(var(--i,0) * 70ms)}

/* ---- revelação por máscara ----
   Amarrada ao .reveal do pai, que já é comprovado. Se o observador
   não disparar, o pai nunca recebe .is-in — e aí a máscara nem chega
   a fechar, porque a regra fechada exige .reveal sem .is-in.
   Resultado: imagem visível em qualquer cenário de falha. */
.js-on .reveal:not(.is-in) .rv-clip{
  clip-path:inset(0 0 100% 0);
  transform:scale(1.06);
}
.js-on .rv-clip{
  transition:clip-path 1.05s cubic-bezier(.16,1,.3,1),transform 1.3s cubic-bezier(.16,1,.3,1);
}

/* ---- título do hero: linhas sobem de dentro de uma máscara ---- */
.js-on .hero__copy > *{
  opacity:0;transform:translateY(22px);
  animation:heroUp .95s cubic-bezier(.16,1,.3,1) forwards;
}
.js-on .hero__copy > *:nth-child(1){animation-delay:.10s}
.js-on .hero__copy > *:nth-child(2){animation-delay:.20s}
.js-on .hero__copy > *:nth-child(3){animation-delay:.32s}
.js-on .hero__copy > *:nth-child(4){animation-delay:.44s}
.js-on .hero__copy > *:nth-child(5){animation-delay:.54s}
.js-on .hero__copy > *:nth-child(6){animation-delay:.62s}
@keyframes heroUp{to{opacity:1;transform:none}}


/* ---- foto do hero: profundidade sutil ao rolar ---- */
.js-on .hero__media img{
  transform:translate3d(0,var(--py,0px),0) scale(1.08);
  will-change:transform;
}

/* ---- brilho que segue o cursor nos cards (só onde há mouse) ---- */
@media (hover:hover) and (pointer:fine){
  .card,.svc,.tcard,.quote,.factors li,.signs li{position:relative;overflow:hidden}
  .card::before,.svc::before,.tcard::before,.quote::before,.factors li::before,.signs li::before{
    content:"";position:absolute;inset:-1px;z-index:0;pointer-events:none;
    background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(63,210,240,.16),transparent 60%);
    opacity:0;transition:opacity .35s var(--ease);
  }
  .card:hover::before,.svc:hover::before,.tcard:hover::before,
  .quote:hover::before,.factors li:hover::before{opacity:1}
  .card > *,.svc > *,.tcard > *,.quote > *{position:relative;z-index:1}
  /* o marcador redondo dos sinais é ::before: não pode virar brilho */
  .signs li::before{background:none;opacity:1}
}

/* ---- botões: lustro que atravessa no hover ---- */
.btn{position:relative;overflow:hidden}
.btn > *{position:relative;z-index:1}
.btn::after{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;z-index:0;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);
  transform:skewX(-18deg);
}
@media (hover:hover){ .btn:hover::after{animation:lustro .75s ease-out} }
@keyframes lustro{to{left:130%}}

/* ---- números: leve realce quando entram ---- */
.stat__n{transition:color .5s var(--ease),transform .5s var(--ease)}
.js-on .stat.is-in .stat__n{animation:pulsa .7s cubic-bezier(.16,1,.3,1)}
@keyframes pulsa{0%{transform:scale(.94)}60%{transform:scale(1.04)}100%{transform:scale(1)}}

/* ---- etiqueta das etapas: entra girando de leve ---- */
.js-on .stage__tag{
  opacity:0;transform:translateY(-8px) rotate(-3deg);
  transition:opacity .6s var(--ease) .35s,transform .6s cubic-bezier(.16,1,.3,1) .35s;
}
.js-on .stage.is-in .stage__tag{opacity:1;transform:none}

/* ---- galeria: zoom mais sofisticado + legenda que sobe ---- */
.gal__i img{transition:transform 1s cubic-bezier(.16,1,.3,1),filter .5s var(--ease)}
.gal__cap{transform:translateY(4px);transition:transform .45s var(--ease)}
@media (hover:hover){
  .gal__i:hover img{transform:scale(1.09)}
  .gal__i:hover .gal__cap{transform:translateY(0)}
}

/* ---- linha do olho-mágico das seções: risco que se desenha ---- */
.eyebrow{position:relative;padding-left:0}
.js-on .shead.is-in .eyebrow::before,
.js-on .rev__top.is-in .eyebrow::before{animation:risco .7s cubic-bezier(.16,1,.3,1) forwards}
.eyebrow::before{
  content:"";display:inline-block;vertical-align:middle;
  width:26px;height:2px;margin-right:10px;border-radius:2px;
  background:linear-gradient(90deg,var(--cyan),transparent);
  transform:scaleX(0);transform-origin:0 50%;
}
@keyframes risco{to{transform:scaleX(1)}}

/* ---- desligar tudo quando o sistema pede menos movimento ---- */
@media (prefers-reduced-motion:reduce){
  .js-on .hero__copy > *{animation:none;opacity:1;transform:none}
  .js-on .rv-clip{clip-path:none;transform:none}
  .js-on .hero__media img{transform:scale(1.02)}
  .js-on .stage__tag{opacity:1;transform:none}
  .eyebrow::before{transform:scaleX(1)}
  .prog{display:none}
  .btn::after{display:none}
}