/* ============================================================
   Altis Tecnologia · LP
   Blocos da casa (DOMOS-DESIGN-OS): nav-sticky-mobile,
   anim-reveal-scroll, comp-faq-acordeao, comp-form-whatsapp,
   footer-assinatura-domos, comp-consentimento-lgpd (js/consent.js).
   Fonte única: Inter (servida daqui, sem CDN).
   ============================================================ */

@font-face{
  font-family:"Inter";
  src:url("/assets/fonts/inter-var.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  /* claro: puxado do fundo da logo (#F7F7F7) com um fio de verde */
  --bg:#F5F7F6;
  --bg-alt:#EBF0EE;
  --surface:#FFFFFF;
  --ink:#0C1A18;            /* texto principal  · 17:1 */
  --dim:#3D4B48;            /* texto secundário · 8:1 */
  --faint:#66736F;          /* opcional         · 4,5:1 */
  --line:#D3DCD9;
  --line-soft:#E2E8E6;

  /* marca: cor da logo, amostrada no JPEG (#087D6D) */
  --accent:#087D6D;         /* texto de marca 5:1 · branco sobre ele 5:1 */
  --accent-hi:#06695C;
  --accent-ink:#FFFFFF;
  --accent-rgb:8,125,109;

  /* escuro */
  --deep:#062723;
  --deep-2:#0B332E;
  --deep-3:#103D37;
  --on-deep:#EAF3F1;        /* 15:1 */
  --on-deep-dim:#A9C2BD;    /* 8:1 */
  --on-deep-faint:#7F9C96;
  --deep-line:rgba(234,243,241,.10);
  --mint:#5FD4BC;           /* acento no escuro · 9:1 */
  --mint-rgb:95,212,188;

  --bad:#FF6B70; --bad-rgb:255,107,112;
  --wa:#25D366;

  --ease:cubic-bezier(.22,1,.36,1);
  --r-card:20px; --r-ctrl:12px; --r-pill:999px;
  --blur:14px;
  --gutter:clamp(1rem,4vw,2.4rem);
  --shadow-card:0 1px 2px rgba(12,26,24,.04), 0 14px 34px -16px rgba(12,26,24,.16);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:1.0625rem; line-height:1.6;
  font-feature-settings:"cv11","ss01";
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
code,pre,kbd,samp,tt{font-family:inherit}
img,svg{display:block; max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,h3{margin:0; font-weight:700; letter-spacing:-.025em; line-height:1.12}
h3,summary,.eyebrow,.form__title{text-wrap:balance}
.aba-m{display:none}
@media (max-width:420px){ .aba-d{display:none} .aba-m{display:inline} }
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
::selection{background:rgba(var(--accent-rgb),.22)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}

.wrap{max-width:1240px; margin:0 auto; padding:0 var(--gutter)}
.skip{position:absolute; left:-9999px; top:0; z-index:2000; background:var(--ink); color:#fff; padding:.7rem 1rem; border-radius:0 0 10px 0; text-decoration:none}
.skip:focus{left:0}
.logo{color:var(--accent); height:auto}

/* lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}

/* ---------- eyebrow ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.65rem;
  font-size:.74rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-hi); margin:0 0 1.1rem;
}
.eyebrow__line{display:block; width:26px; height:1.5px; background:var(--accent); flex-shrink:0}
.eyebrow--deep{color:var(--mint)}
.eyebrow--deep .eyebrow__line{background:var(--mint)}

/* ---------- botões ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  border:1px solid var(--line); border-radius:var(--r-pill);
  padding:.66rem 1.2rem; min-height:44px;
  font-size:.94rem; font-weight:600; line-height:1.2; letter-spacing:-.005em;
  color:var(--ink); background:transparent;
  transition:background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn:hover{border-color:var(--accent); color:var(--accent-hi)}
.btn--solid{background:var(--accent); border-color:transparent; color:var(--accent-ink); box-shadow:0 10px 24px -12px rgba(var(--accent-rgb),.7)}
.btn--solid:hover{background:var(--accent-hi); color:var(--accent-ink); transform:translateY(-1px)}
.btn--ghost{background:var(--surface); border-color:var(--line)}
.btn--lg{padding:.9rem 1.5rem; min-height:54px; font-size:1rem}
.btn--mint{background:var(--mint); color:var(--deep); border-color:transparent}
.btn--mint:hover{background:#7FE0CC; color:var(--deep)}
.ico-wa{width:18px; height:18px; fill:var(--wa); flex-shrink:0}

/* ============================================================
   NAV (bloco nav-sticky-mobile)
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  padding:.8rem 0;
  transition:background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease);
}
.nav__inner{
  max-width:1240px; margin:0 auto; padding:0 var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.nav__logo{display:block; text-decoration:none; transition:opacity .3s var(--ease)}
.nav__logo:hover{opacity:.8}
.nav__logo .logo{width:92px}
.nav__links{display:flex; gap:1.8rem}
.nav__links a{font-size:.92rem; font-weight:500; color:var(--ink); text-decoration:none; position:relative; padding:.25rem 0}
.nav__links a::after{content:""; position:absolute; left:0; bottom:-1px; width:0; height:1.5px; background:var(--accent); transition:width .35s var(--ease)}
.nav__links a:hover::after{width:100%}
.nav.scrolled{
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur));
  box-shadow:0 1px 0 var(--line-soft);
  padding:.5rem 0;
}
.btn--nav{padding:.55rem 1.05rem; min-height:40px; font-size:.88rem}

.nav__toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px; padding:0 9px; margin-right:-9px;
  background:none; border:0; cursor:pointer;
}
.nav__toggle span{display:block; height:2px; width:100%; background:var(--ink); border-radius:2px; transition:.35s var(--ease)}
.nav__toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__toggle.open span:nth-child(2){opacity:0}
.nav__toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav__mobile{
  position:fixed; inset:0 0 0 auto; width:min(84vw,340px);
  background:var(--surface); border-left:1px solid var(--line);
  transform:translateX(100%); visibility:hidden;
  transition:transform .45s var(--ease), visibility 0s linear .45s; /* some só depois de deslizar */
  display:flex; flex-direction:column; justify-content:center; gap:.3rem;
  padding:4.5rem 2rem 2.5rem; z-index:1050;
}
.nav__mobile.open{transform:translateX(0); visibility:visible; transition:transform .45s var(--ease), visibility 0s linear 0s} /* visível já no clique: o foco precisa entrar */
.nav__mobile a:not(.btn){color:var(--ink); text-decoration:none; font-size:1.3rem; font-weight:600; letter-spacing:-.015em; padding:.6rem 0; border-bottom:1px solid var(--line-soft)}
.nav__mobile .btn{margin-top:1.4rem; font-size:1rem; min-height:52px}
.nav__close{position:absolute; top:1rem; right:1rem; width:44px; height:44px; border:0; background:none; cursor:pointer}
.nav__close span{position:absolute; left:11px; right:11px; top:50%; height:2px; background:var(--ink); border-radius:2px}
.nav__close span:first-child{transform:rotate(45deg)}
.nav__close span:last-child{transform:rotate(-45deg)}
.nav__backdrop{position:fixed; inset:0; background:rgba(6,39,35,.55); opacity:0; visibility:hidden; transition:.4s var(--ease); z-index:1040}
.nav__backdrop.open{opacity:1; visibility:visible}

@media (max-width:1020px){
  .nav__links,.btn--nav{display:none}
  .nav__toggle{display:flex}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative; padding:clamp(7rem,13vh,9rem) 0 clamp(3.5rem,7vw,6rem); overflow:hidden}
.hero__bg{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(58% 62% at 82% 34%, rgba(var(--accent-rgb),.13), transparent 70%),
    radial-gradient(rgba(12,26,24,.075) 1px, transparent 1.2px) 0 0/22px 22px;
  -webkit-mask-image:linear-gradient(to bottom, #000 55%, transparent);
          mask-image:linear-gradient(to bottom, #000 55%, transparent);
}
.hero__grid{position:relative; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(2.5rem,5vw,4.5rem); align-items:center}
.hero__title{
  font-size:clamp(2.2rem,4.6vw,3.9rem); font-weight:800; letter-spacing:-.035em; line-height:1.04;
  margin:0 0 1.4rem; text-wrap:balance;
}
.hero__title .w{display:inline-block; overflow:hidden; vertical-align:top; padding:0 .02em .14em; margin:0 -.02em -.14em}
.hero__title .w>span{display:inline-block}
.hero__title .acc{color:var(--accent)}
.hero__lead{font-size:clamp(1.06rem,1.35vw,1.2rem); color:var(--dim); max-width:36em; margin-bottom:2rem; text-wrap:pretty}
.hero__ctas{display:flex; flex-wrap:wrap; gap:.75rem; margin-bottom:2rem}
.hero__trust{display:flex; flex-wrap:wrap; gap:.6rem 1.4rem}
.hero__trust li{display:flex; align-items:center; gap:.5rem; font-size:.9rem; font-weight:500; color:var(--dim)}
.hero__trust svg{width:16px; height:16px; fill:none; stroke:var(--accent); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0}
.hero__visual{position:relative; will-change:transform}

/* entrada do hero (só com JS vivo; o timer do <head> destrava) */
.js-anim .hero__title .w>span{transform:translateY(108%); transition:transform 1.15s var(--ease); transition-delay:calc(var(--i) * 65ms + 80ms)}
.js-anim .hero__in{opacity:0; transform:translateY(18px); transition:opacity .9s var(--ease), transform .9s var(--ease); transition-delay:var(--d,0ms)}
.js-anim .hero__visual .rede{opacity:0; transform:translateY(26px) scale(.985); transition:opacity 1.1s var(--ease) .35s, transform 1.2s var(--ease) .35s}
.js-anim.is-ready .hero__title .w>span,
.js-anim.is-ready .hero__in{transform:none; opacity:1}
.js-anim.is-ready .hero__visual .rede{opacity:1; transform:none}

/* ============================================================
   PAINEL DA REDE (simulação, assets/js/rede.js)
   ============================================================ */
.rede{
  position:relative; isolation:isolate;
  background:linear-gradient(180deg, var(--deep-2) 0%, var(--deep) 100%);
  color:var(--on-deep);
  border:1px solid rgba(234,243,241,.09); border-radius:24px;
  padding:clamp(14px,2vw,20px);
  box-shadow:0 40px 80px -36px rgba(6,39,35,.55), 0 2px 6px rgba(6,39,35,.12), inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;
}
.rede::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60% 50% at 50% 46%, rgba(var(--mint-rgb),.10), transparent 70%),
    radial-gradient(rgba(234,243,241,.06) 1px, transparent 1.2px) 0 0/18px 18px;
}
.rede__top{display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:2px 2px 12px; border-bottom:1px solid var(--deep-line)}
.rede__titulo{display:flex; align-items:center; gap:.65rem; font-size:.8rem; font-weight:500; color:var(--on-deep-dim); letter-spacing:.01em; min-width:0}
.rede__dots{display:flex; gap:5px}
.rede__dots i{width:8px; height:8px; border-radius:50%; background:rgba(234,243,241,.16)}
.rede__status{
  display:inline-flex; align-items:center; gap:.5rem; flex-shrink:0;
  font-size:.76rem; font-weight:600; padding:.38rem .7rem; border-radius:var(--r-pill);
  background:rgba(var(--mint-rgb),.12); color:var(--mint);
  transition:background .4s var(--ease), color .4s var(--ease);
}
.rede__status i{width:7px; height:7px; border-radius:50%; background:currentColor; animation:pulso 2.2s var(--ease) infinite}
.rede[data-estado="parado"] .rede__status{background:rgba(var(--bad-rgb),.14); color:var(--bad)}
@keyframes pulso{0%{box-shadow:0 0 0 0 currentColor} 70%{box-shadow:0 0 0 7px transparent} 100%{box-shadow:0 0 0 0 transparent}}

.rede__mapa{position:relative; height:clamp(178px,22vw,232px); margin:14px 0 12px}
.rede__fios{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.rede__fios .fio{fill:none; stroke-width:1.6; stroke-linecap:round; transition:stroke .4s var(--ease), opacity .4s var(--ease)}
.rede__fios .fio--ok{stroke:rgba(var(--mint-rgb),.55)}
.rede__fios .fio--espera{stroke:rgba(234,243,241,.20); stroke-dasharray:3 6}
.rede__fios .fio--falha{stroke:rgba(var(--bad-rgb),.75); stroke-dasharray:5 6}
.rede__fios .fio--parado{stroke:rgba(234,243,241,.14)}
.rede__fios .pct{fill:var(--mint); filter:drop-shadow(0 0 4px rgba(var(--mint-rgb),.9))}

.rede__no{
  position:absolute; top:var(--y,50%); z-index:1;
  display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:.5rem;
  padding:.5rem .75rem; border-radius:12px;
  background:rgba(16,61,55,.92); border:1px solid rgba(234,243,241,.12);
  box-shadow:0 8px 20px -10px rgba(0,0,0,.5);
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.rede__no b{font-size:.84rem; font-weight:650; line-height:1.15; letter-spacing:-.01em; white-space:nowrap}
.rede__no small{grid-column:2; font-size:.7rem; color:var(--on-deep-faint); line-height:1.2; white-space:nowrap}
.rede__no--link{left:0; transform:translateY(-50%)}
.rede__no--emp{right:0; top:50%; transform:translateY(-50%); display:block; padding:.7rem .9rem}
.rede__no--hub{
  left:50%; top:50%; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:.45rem;
  padding:0; background:none; border:0; box-shadow:none;
}
.rede__hub-ico{
  position:relative; display:grid; place-items:center;
  width:54px; height:54px; border-radius:50%;
  background:radial-gradient(circle at 50% 35%, #138B78, #0A5E52);
  border:1px solid rgba(var(--mint-rgb),.45);
  box-shadow:0 0 0 6px rgba(var(--mint-rgb),.08), 0 10px 26px -8px rgba(var(--mint-rgb),.55);
  transition:background .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.rede__hub-ico::after{content:""; position:absolute; inset:-6px; border-radius:50%; border:1px solid rgba(var(--mint-rgb),.35); animation:anel 2.6s var(--ease) infinite}
@keyframes anel{0%{transform:scale(.9); opacity:.9} 100%{transform:scale(1.35); opacity:0}}
.rede__hub-ico svg{width:24px; height:24px; fill:none; stroke:#EAFBF6; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.rede__no--hub small{font-size:.7rem; font-weight:600; color:var(--mint); white-space:nowrap; letter-spacing:.01em}
.rede[data-modo="manual"] .rede__hub-ico{background:radial-gradient(circle at 50% 35%, #3A4B48, #26332F); border-color:rgba(234,243,241,.2); box-shadow:0 0 0 6px rgba(234,243,241,.04)}
.rede[data-modo="manual"] .rede__hub-ico::after{display:none}
.rede[data-modo="manual"] .rede__no--hub small{color:var(--on-deep-dim)}

.rede__led{grid-row:1 / span 2; width:8px; height:8px; border-radius:50%; background:var(--mint); box-shadow:0 0 8px rgba(var(--mint-rgb),.9); transition:background .3s, box-shadow .3s}
.rede__no[data-estado="falha"]{border-color:rgba(var(--bad-rgb),.55); background:rgba(70,22,26,.9)}
.rede__no[data-estado="falha"] .rede__led{background:var(--bad); box-shadow:0 0 8px rgba(var(--bad-rgb),.9)}
.rede__no[data-estado="falha"] small{color:#FFB3B5}
.rede__no[data-estado="espera"] .rede__led{background:rgba(234,243,241,.35); box-shadow:none}
.rede__no[data-estado="espera"]{border-style:dashed}

.rede__sistemas{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px}
.rede__sistemas li{
  display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:.45rem;
  padding:.55rem .65rem; border-radius:10px;
  background:rgba(234,243,241,.045); border:1px solid rgba(234,243,241,.07);
  font-size:.8rem; font-weight:600; transition:background .4s var(--ease), border-color .4s var(--ease);
}
.rede__sistemas i{grid-row:1 / span 2; width:7px; height:7px; border-radius:50%; background:var(--mint); transition:background .3s}
.rede__sistemas span{grid-column:2; font-size:.68rem; font-weight:500; color:var(--mint); transition:color .3s}
.rede__sistemas li.off{background:rgba(var(--bad-rgb),.08); border-color:rgba(var(--bad-rgb),.22)}
.rede__sistemas li.off i{background:var(--bad)}
.rede__sistemas li.off span{color:var(--bad)}

.rede__log{margin-top:12px; font-size:.82rem; color:var(--on-deep-dim); min-height:2.6em; line-height:1.4; font-variant-numeric:tabular-nums}
.rede__log::before{content:"›"; color:var(--mint); font-weight:700; margin-right:.45rem}
.rede__log.troca{animation:entra .5s var(--ease)}
@keyframes entra{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none}}

/* comparativo: controles + rodapé com botão */
.rede__controles{margin-bottom:14px}
.rede__abas{display:grid; grid-template-columns:1fr 1fr; gap:4px; padding:4px; border-radius:var(--r-pill); background:rgba(234,243,241,.06); border:1px solid var(--deep-line)}
.rede__aba{
  border:0; border-radius:var(--r-pill); background:transparent; cursor:pointer;
  padding:.6rem .8rem; min-height:42px; font-size:.84rem; font-weight:600; color:var(--on-deep-dim);
  transition:background .3s var(--ease), color .3s var(--ease);
}
.rede__aba:hover{color:var(--on-deep)}
.rede__aba[aria-pressed="true"]{background:var(--on-deep); color:var(--deep)}
.rede__rodape{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:12px}
.rede__rodape .rede__log{margin:0; flex:1}
.btn--alerta{background:rgba(var(--bad-rgb),.14); color:#FFC2C4; border-color:rgba(var(--bad-rgb),.45); flex-shrink:0}
.btn--alerta:hover{background:rgba(var(--bad-rgb),.22); color:#fff; border-color:rgba(var(--bad-rgb),.7)}
.btn--alerta.religar{background:rgba(var(--mint-rgb),.14); color:var(--mint); border-color:rgba(var(--mint-rgb),.45)}
.btn--alerta[aria-disabled="true"]{opacity:.45; cursor:wait}
.btn--alerta.chama{animation:chama 2.4s var(--ease) infinite}
@keyframes chama{0%,100%{box-shadow:0 0 0 0 rgba(var(--bad-rgb),.0)} 50%{box-shadow:0 0 0 6px rgba(var(--bad-rgb),.18)}}

/* ============================================================
   SEÇÕES
   ============================================================ */
.sec{padding:clamp(4.5rem,9vw,7.5rem) 0}
.sec--alt{background:var(--bg-alt)}
.sec--deep{background:var(--deep); color:var(--on-deep); position:relative; overflow:hidden}
.sec__head{max-width:46rem; margin-bottom:clamp(2.4rem,5vw,3.6rem)}
.sec__title{font-size:clamp(1.95rem,4vw,3.15rem); font-weight:750; letter-spacing:-.03em; line-height:1.08; text-wrap:balance}
.sec__lead{margin-top:1.1rem; font-size:clamp(1.03rem,1.3vw,1.14rem); color:var(--dim); max-width:38em; text-wrap:pretty}
.sec--deep .sec__lead{color:var(--on-deep-dim)}

/* frase que acende palavra por palavra */
.acende{margin-top:1.3rem; font-size:clamp(1.15rem,2vw,1.5rem); font-weight:500; line-height:1.45; letter-spacing:-.012em; color:var(--on-deep); max-width:34em}
.js-anim .acende .pal{opacity:.28; transition:opacity .35s var(--ease)}
.js-anim .acende .pal.on{opacity:1}

/* ---------- dores ---------- */
.dores{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(.8rem,1.6vw,1.2rem)}
.dor{
  padding:clamp(1.3rem,2.2vw,1.7rem); border-radius:var(--r-card);
  background:rgba(234,243,241,.035); border:1px solid var(--deep-line);
  transition:border-color .4s var(--ease), background .4s var(--ease), transform .4s var(--ease);
}
.dor:hover{border-color:rgba(var(--mint-rgb),.35); background:rgba(234,243,241,.06)}
.dor svg{width:26px; height:26px; fill:none; stroke:var(--mint); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; margin-bottom:1.1rem}
.dor h3{font-size:1.08rem; font-weight:650; letter-spacing:-.015em; margin-bottom:.45rem}
.dor p{font-size:.95rem; color:var(--on-deep-dim); line-height:1.55}

/* ---------- calculadora ---------- */
.calc{
  margin-top:clamp(2.5rem,5vw,4rem);
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(1.5rem,3vw,2.5rem);
  padding:clamp(1.4rem,3vw,2.4rem); border-radius:26px;
  background:linear-gradient(160deg, var(--deep-3), var(--deep-2));
  border:1px solid rgba(var(--mint-rgb),.18);
}
.calc__intro{grid-column:1 / -1}
.calc__title{font-size:clamp(1.35rem,2.4vw,1.8rem); font-weight:700; letter-spacing:-.025em; margin-bottom:.4rem; text-wrap:balance}
.calc__intro p{color:var(--on-deep-dim); font-size:.98rem}
.calc__campos{display:grid; gap:1.4rem; align-content:start}
.calc__campo{display:grid; gap:.7rem; cursor:pointer}
.calc__rotulo{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; font-size:.95rem; color:var(--on-deep-dim)}
.calc__rotulo output{font-size:1.05rem; font-weight:700; color:var(--on-deep); font-variant-numeric:tabular-nums; white-space:nowrap}
.calc input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:28px; background:transparent; margin:0; cursor:pointer;
  --p:20%;
}
.calc input[type=range]::-webkit-slider-runnable-track{height:6px; border-radius:6px; background:linear-gradient(to right, var(--mint) var(--p), rgba(234,243,241,.14) var(--p))}
.calc input[type=range]::-moz-range-track{height:6px; border-radius:6px; background:rgba(234,243,241,.14)}
.calc input[type=range]::-moz-range-progress{height:6px; border-radius:6px; background:var(--mint)}
.calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:22px; height:22px; margin-top:-8px; border-radius:50%; background:#fff; border:5px solid var(--mint); box-shadow:0 4px 12px rgba(0,0,0,.35)}
.calc input[type=range]::-moz-range-thumb{width:14px; height:14px; border-radius:50%; background:#fff; border:5px solid var(--mint); box-shadow:0 4px 12px rgba(0,0,0,.35)}
.calc input[type=range]:focus-visible{outline:2px solid var(--mint); outline-offset:4px}
.calc__res{
  display:flex; flex-direction:column; gap:.55rem; justify-content:center;
  padding:clamp(1.2rem,2.4vw,1.8rem); border-radius:20px;
  background:rgba(6,39,35,.6); border:1px solid var(--deep-line);
}
.calc__res-rot{font-size:.92rem; color:var(--on-deep-dim)}
.calc__num{font-size:clamp(2.3rem,4.6vw,3.4rem); font-weight:800; letter-spacing:-.035em; line-height:1; color:var(--mint); font-variant-numeric:tabular-nums}
.calc__dia{font-size:.95rem; color:var(--on-deep-dim)}
.calc__dia b{color:var(--on-deep); font-variant-numeric:tabular-nums}
.calc__res small{font-size:.82rem; color:var(--on-deep-faint); line-height:1.45}
.calc__res .btn{align-self:flex-start; margin-top:.6rem}

/* ---------- serviços ---------- */
.servicos{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(.8rem,1.6vw,1.2rem)}
.servico{
  position:relative; padding:clamp(1.5rem,2.4vw,2rem); border-radius:var(--r-card);
  background:var(--surface); border:1px solid var(--line-soft); box-shadow:var(--shadow-card);
  transition:transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.servico:hover{transform:translateY(-3px); border-color:rgba(var(--accent-rgb),.35); box-shadow:0 1px 2px rgba(12,26,24,.04), 0 24px 44px -20px rgba(12,26,24,.22)}
.servico__num{display:block; font-size:.8rem; font-weight:700; letter-spacing:.08em; color:var(--accent); font-variant-numeric:tabular-nums; margin-bottom:1.6rem; padding-bottom:.9rem; border-bottom:1px solid var(--line-soft)}
.servico h3{font-size:1.22rem; font-weight:700; letter-spacing:-.02em; margin-bottom:.55rem}
.servico p{font-size:.97rem; color:var(--dim)}

/* ---------- comparativo ---------- */
.compara{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(2rem,5vw,4.5rem); align-items:center}
.compara__dica{margin-top:1.5rem; display:inline-flex; align-items:center; gap:.6rem; font-size:.95rem; font-weight:600; color:var(--accent-hi)}
.compara__dica::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(var(--accent-rgb),.18)}

/* ---------- segmentos ---------- */
/* ---------- Para quem é: seletor no desktop, cards de foto até 900 px ----------
   Acima de 900 px: lista dos 6 à esquerda e a foto do ativo à direita, trocando a cada 5,2 s
   (site.js: só com a seção na tela; pausa no mouse e no foco). Até 900 px: cards de foto com o
   selo "Operação no ar" (o mesmo do painel do hero) e as etiquetas do que para. */
.segs{--seg-r:18px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(.9rem,1.6vw,1.25rem)}
.seg{position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; aspect-ratio:4 / 3; padding:clamp(1rem,1.6vw,1.35rem); border-radius:var(--seg-r); background:var(--deep); color:#fff; box-shadow:0 22px 44px -26px rgba(6,39,35,.6)}
.seg__foto{position:absolute; inset:0; z-index:-2; margin:0}
.seg__foto img{width:100%; height:100%; object-fit:cover; object-position:var(--foco,50%) 50%}
.seg::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(180deg, rgba(6,39,35,.34) 0%, rgba(6,39,35,0) 24%, rgba(6,39,35,0) 38%, rgba(6,39,35,.66) 64%, rgba(6,39,35,.95) 100%)}
.seg__status{position:absolute; top:clamp(.75rem,1.2vw,1rem); left:clamp(.75rem,1.2vw,1rem); display:inline-flex; align-items:center; gap:.5rem; padding:.38rem .72rem .38rem .62rem; border-radius:var(--r-pill); font-size:.74rem; font-weight:600; line-height:1; color:var(--mint); background:rgba(6,39,35,.5); border:1px solid rgba(var(--mint-rgb),.28); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.seg__status i{width:7px; height:7px; border-radius:50%; background:currentColor; animation:pulso 2.2s var(--ease) infinite}
.seg__num{position:absolute; top:clamp(.95rem,1.4vw,1.2rem); right:clamp(1rem,1.5vw,1.25rem); font-size:.76rem; font-weight:700; letter-spacing:.1em; color:rgba(255,255,255,.72); font-variant-numeric:tabular-nums}
.seg h3{font-size:clamp(1.12rem,1.45vw,1.28rem); font-weight:700; letter-spacing:-.018em; line-height:1.2; color:#fff; text-wrap:balance}
.seg__rot{margin:.55rem 0 .5rem; font-size:.7rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--mint)}
.seg__para{display:flex; flex-wrap:wrap; gap:.35rem}
.seg__para li{padding:.32rem .66rem; border-radius:var(--r-pill); font-size:.82rem; font-weight:500; line-height:1.15; color:#fff; background:rgba(234,243,241,.12); border:1px solid rgba(234,243,241,.22)}
@media (max-width:640px){ .segs{grid-template-columns:1fr} .seg{aspect-ratio:16 / 11} }
@media (min-width:901px){
  .segs{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); column-gap:clamp(1.6rem,3.4vw,3.4rem); row-gap:0}
  .seg{display:contents}
  .seg::before{display:none}
  .seg__foto{grid-column:2; grid-row:1 / span 6; position:relative; inset:auto; z-index:0; overflow:hidden; border-radius:var(--seg-r); background:var(--deep); box-shadow:0 26px 50px -28px rgba(6,39,35,.6); opacity:0; transition:opacity .9s var(--ease)}
  .seg__foto::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,39,35,.32), rgba(6,39,35,0) 30%)}
  .seg__foto img{position:absolute; inset:0; transform:scale(1.07); transition:transform 6s linear}
  .seg.ativo .seg__foto{opacity:1}
  .seg.ativo .seg__foto img{transform:scale(1)}
  .seg__status{grid-column:2; grid-row:1; position:relative; top:auto; left:auto; align-self:start; justify-self:start; margin:1.1rem; z-index:2; opacity:0; transition:opacity .6s var(--ease)}
  .seg.ativo .seg__status{opacity:1}
  .seg__txt{grid-column:1; position:relative; padding:1.2rem 0 1.25rem 2.9rem; border-bottom:1px solid var(--line); cursor:pointer; outline:none}
  .seg:first-child .seg__txt{border-top:1px solid var(--line)}
  .seg__txt:focus-visible{box-shadow:inset 0 0 0 2px var(--accent); border-radius:6px}
  .seg__txt::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left}
  .seg.ativo .seg__txt::after{animation:segBarra var(--dur,5.2s) linear forwards}
  .segs.pausa .seg.ativo .seg__txt::after,.segs:not(.tocando) .seg.ativo .seg__txt::after{animation:none; transform:scaleX(1)}
  .seg__num{top:1.48rem; left:0; right:auto; color:var(--faint)}
  .seg h3{color:var(--ink); font-size:clamp(1.15rem,1.5vw,1.32rem); transition:color .4s var(--ease)}
  .seg.ativo h3,.seg.ativo .seg__num{color:var(--accent)}
  .seg__rot,.seg__para{display:none}
  .seg.ativo .seg__rot{display:block; color:var(--accent)}
  .seg.ativo .seg__para{display:flex; animation:entra .5s var(--ease)}
  .seg__para li{color:var(--ink); background:var(--surface); border-color:var(--line)}
}
@keyframes segBarra{to{transform:scaleX(1)}}

/* ---------- case ---------- */
#case::before{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(50% 60% at 85% 10%, rgba(var(--mint-rgb),.10), transparent 70%)}
#case .wrap{position:relative}
.case{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(.8rem,1.6vw,1.2rem); counter-reset:caso}
.case__passo{position:relative; padding:1.6rem 1.4rem 1.7rem; border-radius:var(--r-card); background:rgba(234,243,241,.035); border:1px solid var(--deep-line)}
.case__passo::before{counter-increment:caso; content:"0" counter(caso); display:block; font-size:.78rem; font-weight:700; letter-spacing:.08em; color:var(--mint); margin-bottom:1rem; font-variant-numeric:tabular-nums}
.case__passo:last-child{background:rgba(var(--mint-rgb),.10); border-color:rgba(var(--mint-rgb),.35)}
.case__rot{display:block; font-size:1.12rem; font-weight:700; letter-spacing:-.018em; margin-bottom:.5rem}
.case__passo p{font-size:.96rem; color:var(--on-deep-dim)}
.case__fecho{margin-top:clamp(2rem,4vw,3rem); max-width:36em; font-size:clamp(1.15rem,2vw,1.45rem); font-weight:500; letter-spacing:-.012em; line-height:1.45; color:var(--on-deep); padding-left:1.2rem; border-left:2px solid var(--mint)}

/* ---------- como funciona (linha que se preenche) ---------- */
.passos{position:relative; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(1rem,2vw,1.6rem); --fill:0}
.passos::before,.passos::after{content:""; position:absolute; top:21px; left:22px; right:22px; height:2px; border-radius:2px}
.passos::before{background:var(--line)}
.passos::after{background:var(--accent); transform-origin:left; transform:scaleX(var(--fill)); transition:transform .15s linear}
.passo{position:relative; z-index:1}
.passo__num{
  display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  background:var(--surface); border:2px solid var(--line); color:var(--faint);
  font-size:1rem; font-weight:700; margin-bottom:1.3rem;
  transition:background .5s var(--ease), border-color .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease);
}
.passo.on .passo__num{background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:0 0 0 6px rgba(var(--accent-rgb),.14)}
.passo h3{font-size:1.1rem; font-weight:700; letter-spacing:-.018em; margin-bottom:.45rem}
.passo p{font-size:.95rem; color:var(--dim)}

/* ---------- por que a Altis ---------- */
.porque{display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:clamp(2rem,5vw,5rem); align-items:start}
.porque__stat{display:flex; align-items:center; gap:1.1rem; margin:2rem 0 .4rem; padding:1.2rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
/* selo dos 14 anos: aro com o nome girando devagar, picote de carimbo e disco verde-petróleo */
.selo{flex-shrink:0; width:clamp(6.9rem,9.5vw,8.4rem); height:auto; overflow:visible}
.selo__borda{fill:none; stroke:rgba(var(--accent-rgb),.3); stroke-width:1.5}
.selo__giro{transform-origin:100px 100px; animation:seloGiro 42s linear infinite}
.selo__aro{font-size:15px; font-weight:700; fill:var(--accent)}
.selo__picote{fill:none; stroke:var(--accent); stroke-opacity:.5; stroke-width:1.6; stroke-dasharray:1.6 4.4; stroke-linecap:round}
.selo__num{font-size:66px; font-weight:800; letter-spacing:-.045em; fill:#fff; font-variant-numeric:tabular-nums}
.selo__anos{font-size:13px; font-weight:700; letter-spacing:.24em; fill:rgba(255,255,255,.86)}
@keyframes seloGiro{to{transform:rotate(360deg)}}
.porque__stat span{font-size:1.02rem; font-weight:500; color:var(--ink); max-width:15em; line-height:1.4}
.porque__lista{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(.8rem,1.4vw,1.1rem)}
.porque__lista li{padding:1.4rem 1.4rem 1.5rem; border-radius:var(--r-card); background:var(--surface); border:1px solid var(--line-soft); box-shadow:var(--shadow-card)}
.porque__lista h3{display:flex; align-items:flex-start; gap:.6rem; font-size:1.04rem; font-weight:700; letter-spacing:-.015em; margin-bottom:.45rem}
.porque__lista h3::before{content:""; flex-shrink:0; width:8px; height:8px; margin-top:.45em; border-radius:2px; background:var(--accent); transform:rotate(45deg)}
.porque__lista p{font-size:.94rem; color:var(--dim)}
/* rack (imagem gerada, fica até chegarem as fotos reais do Wagner) em cima da lista; o texto da esquerda acompanha a rolagem */
.porque__foto{display:block; width:100%; height:auto; object-fit:cover; margin-bottom:clamp(.8rem,1.4vw,1.1rem); border-radius:var(--r-card); background:var(--deep); box-shadow:var(--shadow-card)}
@media (min-width:1081px){ .porque__intro{position:sticky; top:6.5rem} }

/* ============================================================
   FAQ (bloco comp-faq-acordeao)
   ============================================================ */
.faq{position:relative; isolation:isolate; max-width:880px; margin:0 auto; padding:clamp(4.5rem,9vw,7.5rem) var(--gutter)}
/* fundo discreto do FAQ: a grade de pontos do hero só nas laterais, duas auras leves e, em tela larga,
   um desenho de rede nas margens com um pacote passando devagar (parado com movimento reduzido) */
.faq__fundo{position:absolute; z-index:-1; top:0; bottom:0; left:50%; width:100vw; transform:translateX(-50%); pointer-events:none}
.faq__fundo::before{content:""; position:absolute; inset:0;
  background:
    radial-gradient(34% 40% at 6% 14%, rgba(var(--accent-rgb),.07), transparent 70%),
    radial-gradient(34% 40% at 96% 88%, rgba(var(--mint-rgb),.12), transparent 70%),
    radial-gradient(rgba(12,26,24,.075) 1px, transparent 1.2px) 0 0/22px 22px;
  -webkit-mask-image:linear-gradient(90deg, #000, rgba(0,0,0,.5) 20%, transparent 34%, transparent 66%, rgba(0,0,0,.5) 80%, #000);
          mask-image:linear-gradient(90deg, #000, rgba(0,0,0,.5) 20%, transparent 34%, transparent 66%, rgba(0,0,0,.5) 80%, #000)}
.faq__rede{position:absolute; top:50%; width:min(240px, calc(50vw - 472px)); height:auto; transform:translateY(-50%); opacity:.75; display:none}
.faq__rede--esq{right:calc(50% + 440px + 1.5rem)}
.faq__rede--dir{left:calc(50% + 440px + 1.5rem)}
.faq__rede .fio{fill:none; stroke:rgba(var(--accent-rgb),.32); stroke-width:1.4; stroke-dasharray:2 7; stroke-linecap:round}
.faq__rede .no{fill:var(--bg); stroke:rgba(var(--accent-rgb),.5); stroke-width:1.4}
.faq__rede .no--hub{fill:#E4EEEB}
.faq__rede .pacote circle{fill:var(--mint)}
@media (min-width:1360px){ .faq__rede{display:block} }
.faq__head{text-align:center; margin-bottom:clamp(2rem,4vw,3rem)}
.faq__head .eyebrow{justify-content:center}
.faq__title{font-size:clamp(1.85rem,3.8vw,2.7rem); font-weight:750; letter-spacing:-.03em; text-wrap:balance}
.faq__item{border-bottom:1px solid var(--line); padding:.3rem 0}
.faq__item:first-child{border-top:1px solid var(--line)}
.faq__item summary{
  display:flex; align-items:center; justify-content:space-between; gap:1.2rem;
  padding:1.15rem 0; cursor:pointer; list-style:none;
  font-size:clamp(1.02rem,1.6vw,1.12rem); font-weight:600; letter-spacing:-.012em; color:var(--ink);
  transition:color .3s var(--ease);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--accent-hi)}
.faq__icon{position:relative; width:22px; height:22px; flex-shrink:0}
.faq__icon::before,.faq__icon::after{content:""; position:absolute; background:var(--accent); border-radius:2px; transition:transform .35s var(--ease)}
.faq__icon::before{top:50%; left:2px; right:2px; height:2px; transform:translateY(-50%)}
.faq__icon::after{left:50%; top:2px; bottom:2px; width:2px; transform:translateX(-50%)}
.faq__item[open] .faq__icon::after{transform:translateX(-50%) scaleY(0)}
.faq__a{display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s var(--ease)}
.faq__a>p{overflow:hidden; min-height:0; padding-bottom:1.3rem; color:var(--dim); max-width:62ch}
.faq__item[open] .faq__a{grid-template-rows:1fr}

/* ============================================================
   AVALIAÇÃO + FORM (bloco comp-form-whatsapp)
   ============================================================ */
.avaliacao::before{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(55% 60% at 10% 0%, rgba(var(--mint-rgb),.12), transparent 70%)}
.avaliacao__grid{position:relative; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(2rem,5vw,4.5rem); align-items:start}
.avaliacao__lead{margin-top:1.1rem; font-size:clamp(1.03rem,1.3vw,1.14rem); color:var(--on-deep-dim); max-width:32em}
.avaliacao__passos{margin-top:2rem; display:grid; gap:.9rem}
.avaliacao__passos li{display:flex; align-items:center; gap:.85rem; font-size:.98rem; color:var(--on-deep)}
.avaliacao__passos span{display:grid; place-items:center; width:30px; height:30px; flex-shrink:0; border-radius:50%; border:1px solid rgba(var(--mint-rgb),.5); color:var(--mint); font-size:.85rem; font-weight:700}
.avaliacao__alt{margin-top:2rem; padding-top:1.4rem; border-top:1px solid var(--deep-line); font-size:.95rem; color:var(--on-deep-dim)}
.avaliacao__alt a{color:var(--mint); font-weight:600; text-underline-offset:3px}

.form{
  display:grid; grid-template-columns:1fr 1fr; gap:1rem 1.1rem;
  padding:clamp(1.4rem,3vw,2.3rem); border-radius:26px;
  background:var(--surface); color:var(--ink);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.6);
}
.form__title{grid-column:1 / -1; font-size:1.3rem; font-weight:700; letter-spacing:-.02em; margin-bottom:.2rem}
.field{display:flex; flex-direction:column; gap:.4rem; min-width:0}
.field--full{grid-column:1 / -1}
.field label{font-size:.84rem; font-weight:600; color:var(--dim)}
.field label span{font-weight:400; color:var(--faint)}
.field input,.field select,.field textarea{
  width:100%; font:inherit; font-size:1rem; color:var(--ink);
  background:#F7F9F8; border:1px solid var(--line);
  border-radius:var(--r-ctrl); padding:.78rem .9rem; min-height:50px;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.field input::placeholder,.field textarea::placeholder{color:#7C8986}
.field select{
  -webkit-appearance:none; appearance:none; padding-right:2.4rem; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233D4B48' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .8rem center; background-size:18px;
}
.field textarea{resize:vertical; min-height:96px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; background:#fff; border-color:var(--accent); box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18)}
.field [aria-invalid="true"]{border-color:#C9363C; box-shadow:0 0 0 3px rgba(201,54,60,.15)}
.field__erro{font-size:.8rem; font-weight:600; color:#B42F35}
.form .btn--lg{margin-top:.4rem; width:100%}
.form__nota{font-size:.82rem; color:var(--faint); text-align:center}
.form__nota a{color:var(--accent-hi)}
.form__hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

/* ============================================================
   FOOTER (bloco footer-assinatura-domos, em fundo escuro)
   ============================================================ */
.foot{
  --ink:var(--on-deep);
  background:#041D1A; color:var(--on-deep);
  border-top:1px solid var(--deep-line);
  padding:clamp(3.5rem,6vw,5rem) var(--gutter) 0;
}
.foot__grid{max-width:1240px; margin:0 auto; display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:clamp(1.5rem,3vw,3rem)}
.foot__logo{width:118px; color:var(--on-deep); margin-bottom:1.2rem}
.foot__brand p{font-size:.95rem; color:var(--on-deep-dim); max-width:30em}
.foot__col{display:flex; flex-direction:column; gap:.55rem}
.foot__col h3{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--on-deep-faint); margin:0 0 .35rem; font-weight:600}
.foot__col a{font-size:.94rem; color:var(--on-deep-dim); text-decoration:none; transition:color .3s var(--ease)}
.foot__col a:hover{color:var(--mint)}
.foot__addr{font-size:.94rem; color:var(--on-deep-dim); line-height:1.65}
.foot__legal{
  max-width:1240px; margin:clamp(2.5rem,5vw,3.5rem) auto 0; padding:1.4rem 0;
  border-top:1px solid var(--deep-line);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;
}
.foot__legal p{font-size:.82rem; color:var(--on-deep-faint)}
.foot__legal-links{display:flex; gap:1.2rem; flex-wrap:wrap; align-items:center}
.foot__legal-links a,.foot__cookies{font:inherit; font-size:.82rem; color:var(--on-deep-faint); text-decoration:none; background:none; border:0; padding:0; cursor:pointer; transition:color .3s var(--ease)}
.foot__legal-links a:hover,.foot__cookies:hover{color:var(--mint)}

/* assinatura Domos: padrão fixo da casa (não redesenhar) */
.footer-dev{display:flex; align-items:center; justify-content:center; gap:9px; padding:0 0 26px; font-size:10px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; line-height:1}
.footer-dev .footer-dev-l{color:color-mix(in srgb, var(--ink) 45%, transparent); transition:color .4s var(--ease)}
.footer-dev.footer-dev a{display:inline-flex; align-items:center; gap:6px; color:color-mix(in srgb, var(--ink) 62%, transparent); text-decoration:none; transition:color .4s var(--ease), opacity .4s var(--ease)}
.footer-dev.footer-dev a img{height:11px; width:auto; opacity:.55; filter:grayscale(1); transition:opacity .4s var(--ease), filter .4s var(--ease)}
.footer-dev.footer-dev:hover .footer-dev-l{color:color-mix(in srgb, var(--ink) 85%, transparent)}
.footer-dev.footer-dev:hover a{color:var(--ink)}
.footer-dev.footer-dev:hover a img{opacity:1; filter:none}

/* ---------- WhatsApp flutuante (sempre no verde do WhatsApp) ---------- */
.wa-float{
  position:fixed; right:clamp(14px,2.4vw,26px); bottom:clamp(14px,2.4vw,26px); z-index:900;
  display:grid; place-items:center; width:58px; height:58px; border-radius:50%;
  background:var(--wa); box-shadow:0 12px 28px -8px rgba(37,211,102,.6), 0 4px 10px rgba(0,0,0,.15);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
}
.wa-float svg{width:30px; height:30px; fill:#fff}
/* sem JS fica sempre à vista; com JS entra logo depois do load e some só no formulário e no rodapé */
.js-anim .wa-float:not(.show){opacity:0; transform:translateY(16px) scale(.9); pointer-events:none}
.wa-float:hover{transform:translateY(-2px)}

/* ============================================================
   REVEAL (bloco anim-reveal-scroll · failsafe: só com .js-anim)
   ============================================================ */
.js-anim .reveal{opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
.js-anim .reveal.in{opacity:1; transform:none}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:1080px){
  .hero__grid{grid-template-columns:1fr; gap:3rem}
  .hero__text{max-width:44rem}
  .hero__visual{max-width:640px}
  .compara{grid-template-columns:1fr}
  .compara__painel{max-width:680px}
  .passos{grid-template-columns:1fr; gap:0}
  .passos::before,.passos::after{top:22px; bottom:22px; left:21px; right:auto; width:2px; height:auto}
  .passos::after{transform-origin:top; transform:scaleY(var(--fill))}
  .passo{display:grid; grid-template-columns:44px 1fr; column-gap:1.2rem; padding-bottom:2rem}
  .passo:last-child{padding-bottom:0}
  .passo__num{grid-row:1 / span 2; margin:0}
  .passo h3{margin-top:.55rem}
  .porque{grid-template-columns:1fr}
  .avaliacao__grid{grid-template-columns:1fr}
  .case{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .dores,.servicos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .calc{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr 1fr}
  .foot__brand{grid-column:1 / -1}
}
@media (max-width:640px){
  body{font-size:1rem}
  .hero{padding-top:6.4rem}
  .hero__ctas{flex-direction:column; align-items:stretch}
  .hero__ctas .btn{width:100%}
  .hero__trust{flex-direction:column; gap:.55rem}
  .dores,.servicos,.case,.porque__lista{grid-template-columns:1fr}
  .form{grid-template-columns:1fr; padding:1.3rem 1.1rem 1.5rem; border-radius:22px}
  .rede{border-radius:20px}
  .rede__sistemas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rede__rodape{flex-direction:column; align-items:stretch}
  .rede__rodape .btn{width:100%}
  .rede__no small{display:none}
  .rede__no{padding:.45rem .6rem}
  .rede__no--emp{padding:.6rem .7rem}
  .rede__hub-ico{width:46px; height:46px}
  .rede__no--hub small{display:block; font-size:.66rem}
  .foot__grid{grid-template-columns:1fr}
  .foot__legal{flex-direction:column; align-items:flex-start}
  .calc__rotulo{flex-wrap:wrap; gap:.25rem .8rem}
}
@media (max-width:380px){
  .rede__titulo{font-size:.74rem}
  .rede__dots{display:none}
  .rede__aba{font-size:.78rem; padding:.55rem .5rem}
}

/* ---------- movimento reduzido: tudo parado, no estado final ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js-anim .reveal,.js-anim .hero__in,.js-anim .hero__title .w>span,.js-anim .hero__visual .rede{opacity:1; transform:none; transition:none}
  .rede__status i,.rede__hub-ico::after,.btn--alerta.chama,.seg__status i,.seg.ativo .seg__txt::after,.selo__giro{animation:none}
  .faq__rede .pacote{display:none}
  .js-anim .acende .pal{opacity:1}
  .faq__a,.passos::after{transition:none}
  *,*::before,*::after{scroll-behavior:auto}
}

/* ============================================================
   PÁGINAS SECUNDÁRIAS (privacidade, termos, obrigado, 404)
   ============================================================ */
.topo{position:sticky; top:0; z-index:100; background:color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur)); border-bottom:1px solid var(--line-soft)}
.topo__in{max-width:1240px; margin:0 auto; padding:.7rem var(--gutter); display:flex; align-items:center; justify-content:space-between; gap:1rem}
.topo .logo{width:88px}
.pagina{min-height:70vh}
.legal{max-width:760px; margin:0 auto; padding:clamp(3rem,7vw,5rem) var(--gutter) clamp(4rem,8vw,6rem)}
.legal h1{font-size:clamp(2rem,4.4vw,2.9rem); font-weight:800; letter-spacing:-.03em; margin:.2rem 0 .6rem}
.legal .data{font-size:.9rem; color:var(--faint); margin-bottom:2rem}
.legal h2{font-size:1.2rem; font-weight:700; letter-spacing:-.015em; margin:2.4rem 0 .7rem}
.legal p,.legal li{color:var(--dim); font-size:1rem}
.legal p+p{margin-top:.8rem}
.legal ul{list-style:disc; padding-left:1.2rem; display:grid; gap:.5rem; margin-top:.6rem}
.legal li::marker{color:var(--accent)}
.legal strong{color:var(--ink); font-weight:600}
.legal a{color:var(--accent-hi); text-underline-offset:3px}
.legal .contato{margin-top:.8rem; padding:1.2rem 1.3rem; border-radius:16px; background:var(--surface); border:1px solid var(--line-soft); line-height:1.8}
.aviso{display:grid; place-items:center; padding:clamp(4rem,10vw,7rem) var(--gutter)}
.aviso__card{max-width:560px; text-align:center; padding:clamp(2rem,5vw,3rem); border-radius:26px; background:var(--surface); border:1px solid var(--line-soft); box-shadow:var(--shadow-card)}
.aviso__ico{display:grid; place-items:center; width:64px; height:64px; margin:0 auto 1.5rem; border-radius:50%; background:rgba(var(--accent-rgb),.1); color:var(--accent)}
.aviso__ico svg{width:30px; height:30px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.aviso h1{font-size:clamp(1.7rem,4vw,2.3rem); font-weight:800; letter-spacing:-.03em; margin-bottom:.8rem; text-wrap:balance}
.aviso p{color:var(--dim); margin-bottom:1.8rem; text-wrap:pretty}
.aviso__ctas{display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem}
.btn--wa{background:var(--wa); color:#063B1F; border-color:transparent}
.btn--wa:hover{background:#2EE072; color:#063B1F}
.btn--wa svg{width:18px; height:18px; fill:currentColor}
.foot--simples .footer-dev{padding-top:0}
@media (max-width:640px){ .aviso__ctas{flex-direction:column} .aviso__ctas .btn{width:100%} }