/* ============================================================
   Site institucional
   Herda o design system do produto: carvão + teal petróleo + cromo.
   Tipografia: Barlow Condensed (títulos) · Barlow (corpo) · Share Tech Mono (dados).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Barlow+Condensed:wght@400;500;600;700&family=Share+Tech+Mono&display=swap');

:root{
  --bg:        #0b0c0e;
  --bg-2:      #101216;
  --card:      #15171b;
  --card-2:    #1c1f24;
  --card-3:    #262a31;
  --card-deep: #0f1114;
  --border:    #23262c;
  --border-2:  #343941;

  --text:      #f2f4f6;
  --text-2:    #a7adb6;
  --text-3:    #6d727b;

  --petrol:     #1f6b7e;
  --petrol-700: #195563;
  --petrol-400: #2f8ba2;
  --petrol-300: #5cbdd2;
  --petrol-tint: rgba(92,189,210,0.13);
  --petrol-line: rgba(92,189,210,0.34);

  --action:    #2a93ab;
  --action-h:  #237f95;
  --action-300:#64c4d8;

  --silver:      #cdd3da;
  --green:   #1cb583;  --green-2: #3ad29c;  --green-tint: rgba(28,181,131,0.14);
  --amber:   #e0a23a;  --amber-tint: rgba(224,162,58,0.14);
  --red:     #ef4d5e;
  --wa:      #25d366;

  --chrome: linear-gradient(176deg,#f4f6f8 0%,#cfd6dd 30%,#9aa5b0 50%,#e6ebef 64%,#aab3bd 82%,#7e8893 100%);

  --r:6px; --r-sm:4px; --r-lg:10px; --r-card:14px;
  --shadow:0 8px 26px rgba(0,0,0,0.5);
  --shadow-lg:0 22px 60px rgba(0,0,0,0.62);
  --maxw:1180px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:84px; }
body{
  margin:0; color:var(--text); background:var(--bg);
  font-family:'Barlow',system-ui,sans-serif; font-size:16px; line-height:1.65; letter-spacing:0.01em;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--petrol); color:#fff; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.head{ font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:0.06em; }
.mono{ font-family:'Share Tech Mono',monospace; }
.chrome-text{
  background:var(--chrome); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }

/* scrollbar */
::-webkit-scrollbar{ width:11px; }
::-webkit-scrollbar-track{ background:var(--bg-2); }
::-webkit-scrollbar-thumb{ background:#1c2738; border-radius:10px; border:2px solid var(--bg-2); }
::-webkit-scrollbar-thumb:hover{ background:var(--petrol-400); }

/* ---- botões ---- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:0.07em;
  font-size:15px; font-weight:600; padding:12px 22px; border-radius:var(--r); cursor:pointer;
  border:1px solid transparent; transition:all .14s; line-height:1; white-space:nowrap; }
.btn svg{ width:17px; height:17px; }
.btn-primary{ background:linear-gradient(180deg,var(--action-300),var(--action)); color:#fff; border-color:var(--action);
  box-shadow:0 2px 14px color-mix(in srgb, var(--action) 30%, transparent), inset 0 1px 0 rgba(255,255,255,0.16); }
.btn-primary:hover{ background:linear-gradient(180deg,#4fbcd2,var(--action-h)); transform:translateY(-1px); }
.btn-wa{ background:var(--wa); color:#0a0a0c; border-color:var(--wa); }
.btn-wa:hover{ filter:brightness(0.93); transform:translateY(-1px); }
.btn-ghost{ background:transparent; color:var(--text); border-color:var(--border-2); }
.btn-ghost:hover{ background:var(--card-2); border-color:#3a455c; }
.btn-lg{ padding:15px 28px; font-size:16px; }
/* acesso ao sistema — distinto do CTA de marketing (WhatsApp) */
.btn-login{ background:var(--petrol-tint); color:var(--petrol-300); border-color:var(--petrol-line); }
.btn-login:hover{ background:linear-gradient(180deg,var(--petrol-400),var(--petrol)); color:#fff; border-color:var(--petrol-400); transform:translateY(-1px); }
.btn-login svg{ width:15px; height:15px; }

/* ---- header ---- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(11,12,14,0.82); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.nav{ display:flex; align-items:center; gap:20px; height:70px; }
.nav-logo{ display:flex; align-items:center; gap:10px; }
.nav-logo img{ height:46px; width:auto; }
.nav-links{ display:flex; gap:4px; margin-left:auto; }
.nav-links a{
  font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:0.05em;
  font-size:14px; font-weight:500; color:var(--text-2); padding:8px 11px; border-radius:var(--r);
  white-space:nowrap; transition:all .13s; }
.nav-links a:hover{ color:var(--text); background:var(--card-2); }
.nav-cta{ display:flex; gap:10px; align-items:center; }
.nav-toggle{ display:none; background:none; border:1px solid var(--border-2); border-radius:var(--r); color:var(--text); width:42px; height:40px; cursor:pointer; }
.nav-toggle svg{ width:20px; height:20px; }

/* ---- secção genérica ---- */
section{ position:relative; }
.sec{ padding:96px 0; }
.sec-tight{ padding:70px 0; }
.eyebrow{ display:inline-flex; align-items:center; gap:9px;
  font-family:'Share Tech Mono',monospace; font-size:12.5px; letter-spacing:0.12em;
  color:var(--petrol-300); text-transform:uppercase; margin-bottom:16px; }
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--petrol-line); }
.sec-title{ font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:0.01em;
  font-weight:700; font-size:clamp(30px,4vw,46px); line-height:1.02; margin:0 0 16px; }
.sec-lead{ font-size:17px; color:var(--text-2); max-width:620px; margin:0; }
.sec-head{ margin-bottom:48px; }
.sec-head.center{ text-align:center; }
.sec-head.center .eyebrow::before{ display:none; }
.sec-head.center .sec-lead{ margin:0 auto; }

/* ---- HERO ---- */
.hero{ position:relative; overflow:hidden; padding:96px 0 84px; border-bottom:1px solid var(--border); }
.hero-grid-bg{ position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(80% 70% at 25% 30%,#000,transparent 75%);
  mask-image:radial-gradient(80% 70% at 25% 30%,#000,transparent 75%); }
.hero-glow{ position:absolute; right:-160px; top:-120px; width:620px; height:620px; border-radius:50%;
  background:radial-gradient(circle,rgba(26,95,122,0.34),transparent 64%); pointer-events:none; }
.hero-inner{ position:relative; display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:center; }
.hero h1{ font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:0.005em;
  font-weight:700; font-size:clamp(40px,6vw,74px); line-height:1.04; margin:0 0 28px; }
.hero h1 em{ font-style:normal; color:var(--petrol-300); }
.hero p.lede{ font-size:19px; color:var(--text-2); max-width:540px; margin:0 0 30px; }
.hero-cta{ display:flex; gap:13px; flex-wrap:wrap; }
.hero-stats{ display:flex; gap:14px; margin-top:40px; flex-wrap:wrap; }
.hero-stat{ background:var(--card); border:1px solid var(--border-2); border-radius:14px; padding:16px 22px 15px; min-width:148px; }
.hero-stat .v{ font-family:'Share Tech Mono',monospace; font-size:34px; font-weight:700; color:var(--text); line-height:1; white-space:nowrap; }
.hero-stat .v::after{ content:""; display:block; width:34px; height:3px; border-radius:2px; background:var(--petrol-400); box-shadow:0 0 10px var(--petrol-400); margin:11px 0 9px; }
.hero-stat .l{ font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:0.08em; font-size:13px; font-weight:600; color:var(--text-2); }

/* ---- placeholder de imagem ---- */
.imgph{ position:relative; border:1px solid var(--border-2); border-radius:var(--r-card);
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--petrol) 4%, transparent) 0 12px, transparent 12px 24px),
    radial-gradient(80% 90% at 60% 20%, rgba(26,95,122,0.16), transparent 70%),
    var(--card-deep);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  color:var(--text-3); text-align:center; overflow:hidden; }
.imgph svg{ width:40px; height:40px; color:var(--petrol-300); opacity:.8; }
.imgph .ph-lbl{ font-family:'Share Tech Mono',monospace; font-size:12px; color:var(--text-3); padding:0 18px; }
.imgph::after{ content:"FOTO"; position:absolute; top:10px; left:12px; font-family:'Barlow Condensed',sans-serif;
  font-size:10px; letter-spacing:0.18em; color:var(--text-3); opacity:.6; }
.imgph img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.imgph:has(img)::after{ display:none; }
.hero-visual{ aspect-ratio:4/3.4; }
.hero-visual img{ object-position:50% 25%; }

/* ---- marcas/atendimento strip ---- */
.strip{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--bg-2); }
.strip-inner{ display:flex; align-items:center; gap:28px; padding:20px 0; flex-wrap:wrap; }
.strip-lbl{ font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:0.12em; font-size:15px; font-weight:700; color:var(--petrol-300); }
.strip-tags{ display:flex; gap:10px; flex-wrap:wrap; }
.strip-tag{ font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:0.05em; font-weight:600;
  font-size:14px; color:var(--text-2); background:var(--card); border:1px solid var(--border-2); border-radius:20px; padding:6px 16px; }

/* ---- SERVIÇOS ---- */
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.svc-card{ background:linear-gradient(180deg,var(--card),var(--card-deep)); border:1px solid var(--border);
  border-radius:var(--r-card); padding:26px 24px; position:relative; overflow:hidden; transition:all .16s; }
.svc-card::before{ content:""; position:absolute; top:0; left:0; width:100%; height:2px;
  background:var(--accent,var(--petrol-400)); box-shadow:0 0 14px var(--accent,var(--petrol-400)); opacity:.85; }
.svc-card:hover{ transform:translateY(-3px); border-color:var(--border-2); box-shadow:var(--shadow); }
.svc-ico{ width:46px; height:46px; border-radius:var(--r); display:flex; align-items:center; justify-content:center;
  background:var(--accent-tint,var(--petrol-tint)); border:1px solid var(--accent-line,var(--petrol-line)); margin-bottom:18px; }
.svc-ico svg{ width:23px; height:23px; color:var(--accent,var(--petrol-300)); }
.svc-card h3{ font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:0.04em;
  font-size:23px; font-weight:600; margin:0 0 9px; }
.svc-card p{ font-size:14.5px; color:var(--text-2); margin:0 0 16px; }
.svc-tags{ display:flex; flex-wrap:wrap; gap:7px; }
.svc-tag{ font-family:'Share Tech Mono',monospace; font-size:11px; color:var(--petrol-300);
  background:var(--petrol-tint); border:1px solid var(--petrol-line); border-radius:4px; padding:3px 9px; }

/* ---- benefícios ---- */
.ben-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.ben{ background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); padding:22px; }
.ben-ico{ width:40px; height:40px; border-radius:var(--r); display:flex; align-items:center; justify-content:center;
  background:var(--petrol-tint); border:1px solid var(--petrol-line); margin-bottom:14px; }
.ben-ico svg{ width:21px; height:21px; color:var(--petrol-300); }
.ben h4{ font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:0.05em; font-size:18px; margin:0 0 7px; }
.ben p{ font-size:13.5px; color:var(--text-2); margin:0; }

/* ---- como funciona ---- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; counter-reset:step; }
.step{ position:relative; padding:28px 22px; background:var(--card-deep); border:1px solid var(--border); border-radius:var(--r-card); }
.step-n{ font-family:'Share Tech Mono',monospace; font-size:13px; color:var(--petrol-300); margin-bottom:14px; }
.step-ico{ width:44px; height:44px; border-radius:var(--r); display:flex; align-items:center; justify-content:center;
  background:var(--card-2); border:1px solid var(--border-2); margin-bottom:16px; }
.step-ico svg{ width:22px; height:22px; color:var(--petrol-300); }
.step h4{ font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:0.05em; font-size:19px; margin:0 0 8px; }
.step p{ font-size:13.5px; color:var(--text-2); margin:0; }

/* ---- sobre ---- */
.about{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:48px; align-items:center; }
.about-visual{ aspect-ratio:4/3.2; }
.about ul{ list-style:none; padding:0; margin:22px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.about li{ position:relative; padding-left:28px; font-size:14.5px; color:var(--text-2); }
.about li svg{ position:absolute; left:0; top:2px; width:18px; height:18px; color:var(--green-2); }
.about li b{ color:var(--text); }

/* ---- números (band) ---- */
.numbers{ background:linear-gradient(180deg,var(--bg-2),var(--bg)); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.num-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
.num .v{ font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:clamp(38px,5vw,58px); line-height:1; }
.num .l{ font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:0.1em; font-size:13px; color:var(--text-3); margin-top:8px; }

/* ---- depoimentos ---- */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.quote{ background:var(--card); border:1px solid var(--border); border-radius:var(--r-card); padding:26px 24px; }
.quote-stars{ display:flex; gap:3px; margin-bottom:14px; }
.quote-stars svg{ width:16px; height:16px; color:var(--amber); fill:var(--amber); }
.quote p{ font-size:15px; color:var(--text); margin:0 0 18px; line-height:1.6; }
.quote-who{ display:flex; align-items:center; gap:12px; }
.quote-av{ width:40px; height:40px; border-radius:50%; background:var(--card-3); border:1px solid var(--border-2);
  display:flex; align-items:center; justify-content:center; font-family:'Barlow Condensed',sans-serif; font-weight:700; color:var(--petrol-300); }
.quote-who .qn{ font-weight:600; font-size:14.5px; }
.quote-who .qs{ font-family:'Share Tech Mono',monospace; font-size:11.5px; color:var(--text-3); }

/* ---- FAQ ---- */
.faq{ max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:11px; }
.faq details{ background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; }
.faq summary{ list-style:none; cursor:pointer; padding:18px 20px; display:flex; align-items:center; justify-content:space-between; gap:14px;
  font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:0.03em; font-size:18px; font-weight:600; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .chev{ width:20px; height:20px; color:var(--petrol-300); transition:transform .2s; flex:0 0 auto; }
.faq details[open] summary .chev{ transform:rotate(180deg); }
.faq .faq-a{ padding:0 20px 18px; color:var(--text-2); font-size:15px; }

/* ---- CTA band ---- */
.cta-band{ position:relative; overflow:hidden; background:linear-gradient(135deg,var(--petrol-700),#0e2a32 60%,var(--bg)); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.cta-band .hero-grid-bg{ opacity:.35; }
.cta-inner{ position:relative; text-align:center; padding:74px 0; }
.cta-inner h2{ font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:0.01em; font-weight:700; font-size:clamp(30px,4.5vw,52px); margin:0 0 14px; }
.cta-inner p{ font-size:18px; color:var(--text-2); margin:0 0 28px; }
.cta-inner .hero-cta{ justify-content:center; }

/* ---- CONTATO ---- */
.contact{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:44px; align-items:start; }
.contact-info{ display:flex; flex-direction:column; gap:16px; }
.ci-row{ display:flex; gap:14px; align-items:flex-start; }
.ci-ico{ width:42px; height:42px; flex:0 0 42px; border-radius:var(--r); display:flex; align-items:center; justify-content:center;
  background:var(--petrol-tint); border:1px solid var(--petrol-line); }
.ci-ico svg{ width:20px; height:20px; color:var(--petrol-300); }
.ci-row .ci-k{ font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:0.08em; font-size:12px; color:var(--text-3); }
.ci-row .ci-v{ font-size:15.5px; color:var(--text); }
.ci-row .ci-v a:hover{ color:var(--petrol-300); }
.contact-form{ background:var(--card); border:1px solid var(--border); border-radius:var(--r-card); padding:26px; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.field.full{ grid-column:1/-1; }
.field label{ font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:0.07em; font-size:11.5px; font-weight:600; color:var(--text-2); }
.input{ background:var(--bg-2); border:1px solid var(--border-2); border-radius:var(--r); color:var(--text);
  font-family:'Barlow',sans-serif; font-size:15px; padding:11px 13px; width:100%; outline:none; transition:all .13s; }
.input::placeholder{ color:var(--text-3); }
.input:focus{ border-color:var(--petrol-400); box-shadow:0 0 0 3px var(--petrol-tint); }
textarea.input{ resize:vertical; min-height:96px; }
.form-note{ font-size:12px; color:var(--text-3); margin-top:4px; }

/* ---- footer ---- */
.site-footer{ background:var(--card-deep); border-top:1px solid var(--border); padding:56px 0 28px; }
.foot-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:34px; margin-bottom:40px; }
.foot-brand img{ height:38px; margin-bottom:16px; }
.foot-brand p{ font-size:14px; color:var(--text-3); max-width:280px; margin:0 0 16px; }
.foot-social{ display:flex; gap:10px; }
.foot-social a{ width:38px; height:38px; border-radius:var(--r); display:flex; align-items:center; justify-content:center;
  background:var(--card-2); border:1px solid var(--border-2); color:var(--text-2); transition:all .13s; }
.foot-social a:hover{ color:var(--text); border-color:var(--petrol-line); background:var(--petrol-tint); }
.foot-social svg{ width:18px; height:18px; }
.foot-col h5{ font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:0.1em; font-size:13px; color:var(--text); margin:0 0 14px; }
.foot-col a{ display:block; font-size:14px; color:var(--text-3); padding:5px 0; transition:color .12s; }
.foot-col a:hover{ color:var(--petrol-300); }
.foot-bot{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  border-top:1px solid var(--border); padding-top:22px; font-family:'Share Tech Mono',monospace; font-size:12px; color:var(--text-3); }

/* ---- WhatsApp flutuante ---- */
.wa-float{ position:fixed; right:22px; bottom:22px; z-index:120; width:58px; height:58px; border-radius:50%;
  background:var(--wa); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 26px rgba(0,0,0,0.5);
  transition:transform .15s; }
.wa-float:hover{ transform:scale(1.07); }
.wa-float svg{ width:30px; height:30px; color:#0a0a0c; }

/* ---- responsivo ---- */
@media (max-width:1024px){
  .nav-links{ display:none; position:absolute; top:70px; left:0; right:0; flex-direction:column; gap:2px;
    background:var(--bg-2); border-bottom:1px solid var(--border); padding:12px 16px; }
  .nav-links.open{ display:flex; }
  .nav-links a{ padding:12px; }
  .nav-toggle{ display:flex; align-items:center; justify-content:center; }
}
@media (max-width:980px){
  .hero-inner{ grid-template-columns:1fr; gap:34px; }
  .hero-visual{ aspect-ratio:16/9; }
  .svc-grid,.quotes,.steps{ grid-template-columns:1fr 1fr; }
  .ben-grid{ grid-template-columns:1fr 1fr; }
  .about,.contact{ grid-template-columns:1fr; gap:32px; }
  .num-grid{ grid-template-columns:1fr 1fr; gap:30px; }
  .foot-top{ grid-template-columns:1fr 1fr; gap:28px; }
}
@media (max-width:680px){
  .sec{ padding:64px 0; }
  .nav .btn-wa{ display:none; }
  .svc-grid,.quotes,.steps,.ben-grid,.about ul,.form-grid{ grid-template-columns:1fr; }
  .hero-stats{ gap:22px; }
}

/* ============================================================
   NEON SNAKE — luz que percorre a borda (SVG stroke)
   Repouso = limpo. A "cobrinha" corre o contorno = destaque.
   Cor alterna suave: teal ↔ ciano ↔ branco gelo (tudo "casado").
   Variáveis (ajustáveis por Tweaks em :root):
     --neon-1/2/3  cores do ciclo   --neon-speed  volta da luz
     --neon-glow   raio do brilho (mantido baixo, sem blur pesado)
   ============================================================ */
:root{
  --neon-1:#4fb6cf;   /* teal da marca, suave */
  --neon-2:#76d6e8;   /* ciano claro */
  --neon-3:#e9f8fc;   /* branco gelo (não puro, pra casar) */
  --neon-speed:2.6s;
  --neon-glow:3px;
}
.snake-svg{ position:absolute; inset:0; width:100%; height:100%; z-index:4; pointer-events:none; overflow:visible; }
.snake-svg rect{
  x:1px; y:1px; width:calc(100% - 2px); height:calc(100% - 2px); rx:13px; ry:13px;
  fill:none; stroke:var(--neon-1); stroke-width:1.7; stroke-linecap:round;
  stroke-dasharray:18 82; stroke-dashoffset:0;
  filter:drop-shadow(0 0 var(--neon-glow) currentColor); color:var(--neon-2);
  animation:snaketravel var(--neon-speed) linear infinite,
            snakehue calc(var(--neon-speed) * 2.4) ease-in-out infinite;
}
@keyframes snaketravel{ to{ stroke-dashoffset:-100; } }
@keyframes snakehue{
  0%,100%{ stroke:var(--neon-1); color:var(--neon-1); }
  35%    { stroke:var(--neon-2); color:var(--neon-2); }
  60%    { stroke:var(--neon-3); color:var(--neon-3); }
  82%    { stroke:var(--neon-2); color:var(--neon-2); }
}

/* o card/host precisa ser referência de posição */
.snake{ position:relative; }

/* botão de acesso: brilho que cruza (clean, contínuo) */
.btn-login{ position:relative; overflow:hidden; }
.btn-login::after{
  content:""; position:absolute; top:0; left:-60%; width:42%; height:100%; z-index:1;
  background:linear-gradient(100deg, transparent, rgba(233,248,252,.4), transparent);
  transform:skewX(-18deg); animation:loginsheen 4s ease-in-out infinite;
}
@keyframes loginsheen{ 0%,100%{ left:-60%; } 55%{ left:135%; } }

/* ============================================================
   ANIMAÇÕES — entrada e reveal no scroll (fluido, sem exagero)
   Base = VISÍVEL. Só escondemos quando o JS confirma que vai animar
   (html.anim-on) — assim, sem JS ou em falha, o conteúdo sempre aparece.
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  html.anim-on [data-reveal]{ opacity:0; transform:translateY(24px);
    transition:opacity .62s cubic-bezier(.22,.61,.36,1), transform .62s cubic-bezier(.22,.61,.36,1); }
  html.anim-on [data-reveal].in{ opacity:1; transform:none; }
  html.anim-on [data-reveal-stagger] > *{ opacity:0; transform:translateY(18px);
    transition:opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1); }
  html.anim-on [data-reveal-stagger].in > *{ opacity:1; transform:none; }
}
/* hover dos cards de serviço — NEON de gradiente na cor do card (sem flash de vidro) */
.svc-card{ transition:transform .2s cubic-bezier(.22,.61,.36,1), border-color .2s, box-shadow .2s; }
.svc-card:hover{ transform:translateY(-5px); border-color:transparent; box-shadow:0 16px 32px -18px rgba(0,0,0,.55); }
.svc-card::after{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1.6px; z-index:2; pointer-events:none;
  background:linear-gradient(120deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 40%, #eafdff) 50%, var(--accent) 100%);
  background-size:220% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .22s; }
.svc-card:hover::after{ opacity:1; animation:svcFlow 3s linear infinite; }
@keyframes svcFlow{ to{ background-position:220% 0; } }
.svc-card:hover .svc-ico{ border-color:var(--accent); }
/* a barrinha de topo já existe na cor do card; acende (nitidamente) no hover */
.svc-card::before{ transition:opacity .2s; }
.svc-card:hover::before{ opacity:1; }

/* GRADIENT FLOW — frase de destaque do hero: gradiente fluido + brilho que respira */
.hero h1 em{
  position:relative; font-style:normal;
  background:linear-gradient(100deg,
    var(--neon-1) 0%, var(--neon-2) 25%, var(--neon-3) 45%, var(--neon-2) 60%, var(--neon-1) 85%, var(--neon-2) 100%);
  background-size:260% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:emFlow 5s ease-in-out infinite;
}
@keyframes emFlow{ to{ background-position:260% 0; } }

@media (prefers-reduced-motion: reduce){
  .snake-svg rect, .svc-card:hover::after, .hero h1 em{ animation:none; }
  .hero h1 em{ -webkit-text-fill-color:var(--neon-1); color:var(--neon-1); filter:none; }
  .btn-login::after{ display:none; }
}

/* ============================================================
   MANUTENÇÃO / EM CONSTRUÇÃO
   (A) tela cheia que vela o SITE inteiro  → liga/desliga com SITE_WIP no index.html
   (B) mecanismo data-wip → vela QUALQUER seção individual (frosted + selo)
   O sistema (login + app) NÃO é afetado por nada disto.
   ============================================================ */

/* (A) trava o scroll quando o véu de tela cheia está ativo */
html.wip-on, html.wip-on body{ overflow:hidden; height:100%; }

.wip{ position:fixed; inset:0; z-index:9999; display:grid; place-items:center; padding:26px;
  -webkit-backdrop-filter:blur(11px); backdrop-filter:blur(11px); }
.wip[hidden]{ display:none; }
.wip-scrim{ position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -8%, rgba(31,107,126,.30) 0%, transparent 55%),
    linear-gradient(180deg, rgba(8,11,15,.86), rgba(8,11,15,.93)),
    linear-gradient(transparent 39px, color-mix(in srgb, var(--petrol) 4%, transparent) 40px),
    linear-gradient(90deg, transparent 39px, color-mix(in srgb, var(--petrol) 4%, transparent) 40px);
  background-size:auto, auto, 40px 40px, 40px 40px; }

.wip-card{ position:relative; z-index:2; width:100%; max-width:520px; text-align:center;
  background:var(--card); border:1px solid var(--border); border-radius:var(--r-card);
  box-shadow:var(--shadow-lg); padding:42px 38px 30px; }
.wip-logo{ height:42px; width:auto; margin:0 auto 18px; display:block; }
.wip-kicker{ display:inline-flex; align-items:center; gap:8px; margin-bottom:14px; white-space:nowrap;
  font-family:'Share Tech Mono',monospace; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--petrol-300); padding:5px 11px; border:1px solid var(--petrol-line);
  border-radius:999px; background:var(--petrol-tint); }
.wip-kicker .dot{ width:7px; height:7px; border-radius:50%; background:var(--petrol-300);
  box-shadow:0 0 8px var(--petrol-300); animation:wipPulse 1.8s ease-in-out infinite; }
@keyframes wipPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
.wip-card h1{ font-family:'Barlow Condensed',sans-serif; font-weight:700; line-height:1.04;
  font-size:clamp(28px,4.4vw,40px); letter-spacing:-.01em; margin:0 0 12px; color:var(--text); }
.wip-card p{ color:var(--text-2); font-size:15.5px; line-height:1.55; margin:0 auto 24px; max-width:40ch; }
.wip-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.wip-actions .btn{ padding:13px 22px; font-size:15px; }
.wip-foot{ margin-top:26px; padding-top:18px; border-top:1px solid var(--border);
  font-family:'Share Tech Mono',monospace; font-size:11px; letter-spacing:.06em; color:var(--text-3); }

@media (max-width:480px){
  .wip-card{ padding:34px 24px 24px; }
  .wip-actions .btn{ width:100%; justify-content:center; }
}

/* (B) data-wip — vela uma seção individual sem mexer no conteúdo real.
   Uso:  <section data-wip> … </section>
         <section data-wip data-wip-label="Depoimentos · em breve"> … </section> */
[data-wip]{ position:relative; isolation:isolate; }
[data-wip] *{ pointer-events:none !important; user-select:none !important; }
[data-wip]::before{ content:""; position:absolute; inset:0; z-index:40; border-radius:inherit;
  -webkit-backdrop-filter:blur(8px) saturate(.85); backdrop-filter:blur(8px) saturate(.85);
  background:linear-gradient(180deg, rgba(11,15,20,.34), rgba(11,15,20,.5)); }
[data-wip]::after{ content:"Em construção"; position:absolute; z-index:41; left:50%; top:50%;
  transform:translate(-50%,-50%); white-space:nowrap;
  font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:.08em;
  font-weight:600; font-size:14px; color:var(--text);
  padding:9px 16px; border-radius:999px; background:rgba(20,26,33,.82);
  border:1px solid var(--petrol-line); box-shadow:0 0 22px -6px var(--petrol-300); }
[data-wip][data-wip-label]::after{ content:attr(data-wip-label); }

/* ============================================================
   RESPONSIVO — refino da rodada de responsividade (mobile)
   Aditivo: carregado por último no arquivo, só afeta telas estreitas.
   Corrige overflow horizontal e dá acabamento de toque.
   ============================================================ */
@media (max-width:980px){
  /* itens de grid/flex precisam poder encolher — corrige o estouro
     (o track 1fr resolvia em 347px por causa do min-content dos itens). */
  .contact > *{ min-width:0; }
  .contact-info, .ci-row{ min-width:0; }
  .ci-row .ci-v{ min-width:0; overflow-wrap:anywhere; }
  .contact-form .btn{ white-space:normal; }
}
@media (max-width:680px){
  /* trava qualquer rolagem horizontal acidental no celular */
  html, body{ overflow-x:hidden; }
  /* CTAs do hero empilham e ocupam a largura no toque */
  .hero-cta{ flex-wrap:wrap; gap:12px; }
  .hero-cta .btn{ flex:1 1 200px; justify-content:center; }
  /* botão flutuante do WhatsApp confortável e fora do conteúdo */
  .wa-float{ bottom:16px; right:16px; }
}
@media (max-width:480px){
  .hero-cta .btn{ flex-basis:100%; }
}

/* refino mobile — faixa "Atendemos" centralizada e compacta (melhor leitura no celular) */
@media (max-width:680px){
  .strip{ padding:6px 0; }
  .strip-inner{ flex-direction:column; align-items:center; gap:12px; text-align:center; }
  .strip-lbl{ font-size:14px; }
  .strip-tags{ justify-content:center; gap:8px; }
  .strip-tag{ font-size:13px; padding:6px 13px; }
}