/* =====================================================================
   LOGON — Tecnologia e Engenharia  ·  styles.css
   Dark cinematográfico. Otimizado p/ dispositivos fracos:
   - duotone via filtro CSS (GPU) em vez de filtro SVG
   - sem mix-blend-mode em tela cheia
   - content-visibility nas seções abaixo da dobra
   ===================================================================== */
:root{
  --bg:#FFFFFF; --bg2:#F4F7FB; --bg3:#E9EEF6;
  --card:#FFFFFF; --card-hover:#F7FAFE;
  --line:rgba(16,32,60,.10); --line-2:rgba(16,32,60,.18);
  --cyan:#0B7A2E; --cyan-hi:#12A03F; --blue:#06421F; --green:#0E7A38;
  --text:#324155; --text2:#4B5C72; --text3:#6B7C93;   /* texto escuro p/ fundo claro (AA) */
  --head:#0B1A2E;                        /* títulos near-black navy */
  --ink:#FFFFFF;                         /* texto sobre acento */
  --shadow:0 1px 2px rgba(16,32,60,.05), 0 10px 30px -16px rgba(16,32,60,.18);
  --max:1200px; --pad:clamp(20px,5vw,40px);
  --r:18px;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --sans:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --disp:'Space Grotesk',var(--sans);
  /* tratamento leve e natural das fotos (claro, sem duotone pesado) */
  --duotone:saturate(1.06) contrast(1.02);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%}
button{font:inherit; cursor:pointer; color:inherit; background:none; border:none}
ul{margin:0; padding:0; list-style:none}
::selection{background:var(--cyan); color:var(--ink)}
:focus-visible{outline:2px solid var(--cyan); outline-offset:3px; border-radius:4px}
/* Skip link (acessibilidade) — oculto até receber foco por teclado */
.skip{position:fixed; top:-60px; left:12px; z-index:1100; padding:10px 16px; border-radius:10px;
  background:var(--cyan); color:var(--ink); font-weight:600; font-size:14px; transition:top .2s}
.skip:focus{top:12px}
.wrap{max-width:var(--max); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad)}
.mono{font-family:var(--mono); letter-spacing:.04em}
.eyebrow{display:inline-flex; align-items:center; gap:10px; font-family:var(--mono);
  font-size:17px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan)}
.eyebrow .ln{width:24px; height:1px; background:linear-gradient(90deg,var(--cyan),transparent)}
h2.title{font-family:var(--disp); font-weight:600; letter-spacing:-.02em; line-height:1.15;
  font-size:clamp(1.4rem,2.6vw,2rem); margin:14px 0 0; color:var(--head); text-wrap:balance}
.lead{color:var(--text2); font-size:clamp(1rem,1.4vw,1.12rem); max-width:60ch; margin:18px 0 0}

/* ---- Decorações globais: grão (sem blend, barato) + linha de seção ---- */
.noise{position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E")}
.sec-line{height:1px; border:0; margin:0; background:linear-gradient(90deg,transparent,var(--line-2) 20%,var(--cyan) 50%,var(--line-2) 80%,transparent);
  box-shadow:0 0 12px rgba(11,122,46,.16)}
section{position:relative; padding:clamp(64px,9vw,120px) 0}
/* Pula renderização das seções fora da tela (grande ganho em device fraco).
   contain-intrinsic-size por seção ~ altura real (mobile) p/ evitar salto de scroll na 1ª rolagem;
   o keyword 'auto' memoriza o tamanho real após a 1ª renderização. */
.cv{content-visibility:auto; contain-intrinsic-size:auto 900px}
#servicos{contain-intrinsic-size:auto 2600px}
#projetos{contain-intrinsic-size:auto 2200px}
#processo{contain-intrinsic-size:auto 1100px}
#sobre{contain-intrinsic-size:auto 1400px}
#contato{contain-intrinsic-size:auto 1400px}
footer.cv{contain-intrinsic-size:auto 700px}

/* ---- Imagens duotone + wrapper-poster (fallback sem branco) ---- */
.imgwrap{position:relative; overflow:hidden; background:
  radial-gradient(120% 120% at 80% 10%, rgba(11,122,46,.16), transparent 55%),
  linear-gradient(150deg,#0A1020,#070B16)}
.duo{width:100%; height:100%; object-fit:cover; filter:var(--duotone);
  transition:filter .4s ease, transform .7s cubic-bezier(.2,.7,.2,1)}

/* =================== HEADER =================== */
.progress{position:fixed; top:0; left:0; height:2px; width:0%; z-index:1001;
  background:linear-gradient(90deg,var(--cyan),var(--blue)); box-shadow:0 0 10px rgba(11,122,46,.55)}
header.nav{position:fixed; top:0; left:0; right:0; z-index:1000; height:68px;
  display:flex; align-items:center;
  background:rgba(5,7,13,.82); border-bottom:1px solid transparent; transition:background .3s, border-color .3s}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  header.nav{background:rgba(5,7,13,.55); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
}
header.nav.scrolled{background:rgba(5,7,13,.9); border-bottom-color:var(--line)}
.nav-in{display:flex; align-items:center; justify-content:space-between; width:100%}
.brand{display:flex; align-items:center; gap:11px}
.brand-text{display:flex; flex-direction:column; line-height:1}
.brand .word{font-family:var(--disp); font-weight:700; letter-spacing:.06em; font-size:19px}
.brand .sub{font-family:var(--mono); font-size:11px; letter-spacing:.13em; color:var(--text2); text-transform:uppercase; white-space:nowrap}
.brand-brain{flex:none} .brand-word{flex:none}
.nav-right{display:flex; align-items:center; gap:12px}
.menu{display:flex; align-items:center; gap:30px}
.menu a{position:relative; font-size:14px; color:var(--text2); padding:6px 0; transition:color .2s}
.menu a::after{content:""; position:absolute; left:0; bottom:-2px; height:1.5px; width:0;
  background:var(--cyan); transition:width .25s ease}
.menu a:hover,.menu a.active{color:var(--text)}
.menu .hide-mobile{display:none}        /* CTA dentro do menu: só no drawer mobile */
.menu a.active::after,.menu a:hover::after{width:100%}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:12px 20px; border-radius:11px; font-weight:600; font-size:14.5px;
  transition:transform .2s, box-shadow .25s, filter .2s, border-color .25s, background .25s; white-space:nowrap}
.btn[disabled]{opacity:.6; cursor:not-allowed; pointer-events:none}
.btn-block{width:100%; padding:15px}
.btn-primary{background:linear-gradient(135deg,var(--cyan),var(--blue)); color:var(--ink)}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 12px 30px rgba(11,122,46,.34); filter:brightness(1.06)}
.btn-ghost{border:1px solid var(--line-2); color:var(--text); background:rgba(255,255,255,.02)}
.btn-ghost:hover{border-color:rgba(26,150,80,.5); background:rgba(26,150,80,.07)}
.btn-wa{border:1px solid var(--line-2); color:var(--text); background:rgba(255,255,255,.02)}
.btn-wa:hover{border-color:rgba(26,150,80,.55); background:rgba(26,150,80,.08)}
.burger{display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:11px;
  background:rgba(255,255,255,.03); flex-direction:column; align-items:center; justify-content:center; gap:5px}
.burger span{width:18px; height:2px; background:var(--text); border-radius:2px; transition:transform .28s, opacity .28s}

/* =================== HERO =================== */
.hero{min-height:100svh; display:flex; align-items:flex-end; padding-top:96px; padding-bottom:0; overflow:hidden}
.hero-bg{position:absolute; inset:0; z-index:0}  /* will-change promovido via JS só quando o parallax roda */
.hero-bg .imgwrap{position:absolute; inset:0}
.hero-bg .duo{transform:scale(1.08)}
.hero-scrim{position:absolute; inset:0; z-index:1; pointer-events:none; background:
  radial-gradient(120% 90% at 70% 30%, transparent, rgba(5,7,13,.55) 70%),
  linear-gradient(to top, rgba(5,7,13,.96) 4%, rgba(5,7,13,.55) 45%, rgba(5,7,13,.35) 100%);
  box-shadow:inset 0 0 240px 60px rgba(5,7,13,.9)}
#topology{position:absolute; inset:0; z-index:2; width:100%; height:100%; pointer-events:none; opacity:.9}
.hero-in{position:relative; z-index:3; width:100%; padding-bottom:clamp(56px,9vw,110px)}
.hero h1{font-family:var(--disp); font-weight:700; letter-spacing:-.025em;
  font-size:clamp(2.75rem,6vw,5rem); line-height:1.04; margin:22px 0 0; max-width:16ch; text-wrap:balance}
.hero h1 .g{background:linear-gradient(110deg,var(--cyan),var(--blue)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero h1 .line{display:block}
.hero .lead{font-size:clamp(1.05rem,1.6vw,1.22rem); max-width:54ch}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px}
.hero-cta .btn{padding:15px 26px; font-size:15.5px}
.dot{width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(26,150,80,.6); animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(26,150,80,.5)}70%{box-shadow:0 0 0 7px rgba(26,150,80,0)}100%{box-shadow:0 0 0 0 rgba(26,150,80,0)}}
.hero-meta{display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center; margin-top:40px; padding-top:24px; border-top:1px solid var(--line)}
.hero-meta b{font-family:var(--mono); color:var(--text); font-weight:500}
.hero-meta span{font-size:13px; color:var(--text2)}
.sepdot{width:4px; height:4px; border-radius:50%; background:var(--cyan)}
.wave{position:absolute; left:0; right:0; bottom:-1px; z-index:3; width:100%; height:64px; display:block}

/* =================== SERVIÇOS (bento explorer) =================== */
.svc-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:16px; margin-top:48px; align-items:stretch}
details.svc{grid-column:span 1; background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; transition:border-color .3s, background .3s; scroll-margin-top:90px}
details.svc[open]{border-color:var(--line-2); background:var(--card-hover)}
details.svc.wide{grid-column:span 2}
.svc summary{list-style:none; cursor:pointer; position:relative; display:block; outline:none}
.svc summary::-webkit-details-marker{display:none}
.svc .ph{position:relative; aspect-ratio:16/10; overflow:hidden}
.svc.wide .ph{aspect-ratio:16/7}
.svc .ph::after{content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(5,7,13,.92),rgba(5,7,13,.25) 60%,rgba(5,7,13,.05));
  transition:opacity .5s; opacity:1}
.svc:hover .ph::after{opacity:.55}
.svc:hover .duo,.svc[open] .duo{filter:none; transform:scale(1.05)}
.svc .ph .cap{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:20px 22px; display:flex; align-items:flex-end; justify-content:space-between; gap:12px}
.svc .ph .tag{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--cyan)}
.svc h3{font-family:var(--disp); font-weight:600; font-size:1.2rem; margin:4px 0 0; color:var(--head)}
.svc .chev{flex:none; width:34px; height:34px; border-radius:50%; border:1px solid var(--line-2);
  display:grid; place-items:center; color:var(--cyan); transition:transform .3s, background .3s, border-color .3s; background:rgba(5,8,15,.5)}
.svc[open] .chev{transform:rotate(45deg); background:rgba(11,122,46,.14); border-color:var(--cyan)}
.svc .body{padding:0 22px; max-height:0; overflow:hidden; transition:max-height .45s ease, padding .45s ease}
.svc[open] .body{padding:18px 22px 24px; max-height:1000px}
.svc .desc{color:var(--text2); font-size:.95rem; margin:0}
.svc .bul{margin:16px 0 0; display:grid; gap:9px}
.svc .bul li{position:relative; padding-left:20px; font-size:.92rem; color:var(--text2)}
.svc .bul li::before{content:""; position:absolute; left:0; top:.55em; width:7px; height:7px; border-radius:2px;
  background:var(--cyan); box-shadow:0 0 8px rgba(11,122,46,.5)}
.svc .mini{margin-top:18px; display:inline-flex; align-items:center; gap:8px; font-family:var(--mono);
  font-size:12.5px; letter-spacing:.04em; color:var(--green)}
.svc .mini:hover{color:#6AD3A0}
/* Cards padronizados: mesma altura na linha + botão alinhado embaixo */
details.svc{display:flex; flex-direction:column; height:100%}
.svc>summary{flex:none}
.svc::details-content{display:flex; flex-direction:column; flex:1 1 auto; min-height:0}
.svc[open] .body{flex:1 1 auto; min-height:0; display:flex; flex-direction:column}
.svc[open] .mini{margin-top:auto}

/* =================== Seções extras: Diferenciais / Segmentos / CTA =================== */
.add-h2{font-family:var(--disp); font-weight:700; font-size:clamp(1.2rem,2.2vw,1.7rem); color:var(--head); line-height:1.12; margin:14px 0 0; max-width:22ch; text-wrap:balance}
.why-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:16px; margin-top:48px}
.why-card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:26px 24px; box-shadow:var(--shadow); transition:border-color .3s, transform .35s cubic-bezier(.2,.7,.2,1)}
.why-card:hover{border-color:var(--line-2); transform:translateY(-4px)}
.why-card .ic{width:48px; height:48px; border-radius:12px; display:grid; place-items:center; color:var(--cyan); background:rgba(11,122,46,.08); border:1px solid rgba(11,122,46,.22); margin-bottom:16px}
.why-card h3{font-family:var(--disp); font-weight:600; font-size:1.12rem; margin:0 0 8px; color:var(--head)}
.why-card p{margin:0; color:var(--text2); font-size:.94rem; line-height:1.55}
.seg-grid{display:flex; flex-wrap:wrap; gap:12px; margin-top:44px}
.seg{display:inline-flex; align-items:center; gap:9px; padding:11px 18px; border:1px solid var(--line); border-radius:999px; background:var(--card); box-shadow:var(--shadow); font-size:.92rem; color:var(--text); font-weight:500; transition:border-color .3s, transform .25s}
.seg:hover{border-color:var(--line-2); transform:translateY(-2px)}
.seg .d{width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px rgba(11,122,46,.5)}
.cta-band{position:relative; overflow:hidden; border-radius:calc(var(--r) + 4px); padding:clamp(34px,5vw,56px); text-align:center;
  background:linear-gradient(120deg,#04240F,#06421F 55%,#0B7A2E); color:#fff; box-shadow:0 24px 60px -24px rgba(4,40,18,.6)}
.cta-band::after{content:""; position:absolute; inset:0; background:radial-gradient(120% 140% at 85% 15%,rgba(39,232,90,.28),transparent 55%); pointer-events:none}
.cta-band h2{position:relative; font-family:var(--disp); font-weight:700; font-size:clamp(1.5rem,3vw,2.15rem); margin:0 0 10px; color:#fff}
.cta-band p{position:relative; margin:0 0 26px; color:rgba(255,255,255,.92); font-size:1.05rem; max-width:52ch; margin-left:auto; margin-right:auto}
.btn-light{position:relative; background:#fff; color:#06421F}
.btn-light:hover{filter:brightness(.96)}

/* Texto surgindo palavra a palavra no scroll */
.rw{opacity:1 !important; transform:none !important}
.rw span{display:inline-block; opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .55s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--i,0) * 45ms)}
.rw.in span{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .rw span{transition:none; opacity:1; transform:none} }

/* Vitrine horizontal com leve 3D */
.vitrine{display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x proximity; perspective:1300px;
  padding:40px max(20px, calc((100% - var(--max))/2 + var(--pad))) 50px; cursor:grab;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.55) rgba(255,255,255,.14)}
.vitrine:active{cursor:grabbing}
.vitrine::-webkit-scrollbar{height:8px}
.vitrine::-webkit-scrollbar-thumb{background:rgba(255,255,255,.55); border-radius:99px}
.vitrine::-webkit-scrollbar-track{background:rgba(255,255,255,.14); border-radius:99px}
.vcard{flex:0 0 clamp(248px,30vw,356px); scroll-snap-align:center; position:relative; aspect-ratio:4/5; border-radius:18px;
  overflow:hidden; box-shadow:0 26px 60px -26px rgba(6,12,8,.6); border:1px solid var(--line); will-change:transform; transition:box-shadow .3s}
.vcard img{width:100%; height:100%; object-fit:cover; display:block}
.vcard::after{content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(6,12,8,.9),rgba(6,12,8,.12) 55%,transparent)}
.vcard .vcap{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:22px; color:#fff}
.vcard .vcap span{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#6AD3A0}
.vcard .vcap b{font-family:var(--disp); font-weight:600; font-size:1.14rem; display:block; margin-top:3px}
.vhint{font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--text3); margin-top:16px}

/* Sem separadores entre seções */
.sec-line{display:none}
/* Header some ao rolar */
header.nav{transition:transform .38s ease, background .3s, border-color .3s}
header.nav.nav-hidden{transform:translateY(-100%)}
/* Título dos segmentos em uma linha */
.add-h2.wide{max-width:none; white-space:nowrap}
@media(max-width:600px){ .add-h2.wide{white-space:normal} }
/* Seção 2 — vitrine com fundo VERDE da Logon */
.vitrine-sec{position:relative; background:linear-gradient(135deg,#010704 0%,#03150B 55%,#062C15 100%)}
.vitrine-sec::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 130% at 88% 6%, rgba(18,120,58,.10), transparent 55%), radial-gradient(90% 120% at 4% 100%, rgba(1,7,4,.7), transparent 60%)}
.vitrine-sec>.wrap{position:relative; z-index:1}
.vitrine-sec .eyebrow{color:#A5E3C2}
.vitrine-sec .eyebrow .ln{background:linear-gradient(90deg,#A5E3C2,transparent)}
.vitrine-sec .add-h2{color:#fff}
.vitrine-sec .vhint{color:rgba(255,255,255,.75)}
.vitrine-sec .vcard{border-color:rgba(255,255,255,.14); box-shadow:0 30px 66px -26px rgba(2,12,6,.7)}
.vitrine-sec .vpin-head{text-align:center}
.vitrine-sec .vpin-head .eyebrow{justify-content:center}
.vitrine-sec .add-h2{font-size:clamp(1.5rem,3vw,2.3rem); max-width:22ch; margin-left:auto; margin-right:auto}
.vitrine-sec .eyebrow{font-size:19px}
.vcard{cursor:pointer}

/* ---- Lightbox galeria (portfolio) ---- */
.lb{position:fixed; inset:0; z-index:2000; display:none; align-items:center; justify-content:center; padding:24px}
.lb.open{display:flex}
.lb-backdrop{position:absolute; inset:0; background:rgba(4,10,7,.82); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.lb-panel{position:relative; z-index:1; width:min(1000px,96vw); max-height:92vh; overflow:auto; background:#0E1714;
  border:1px solid rgba(255,255,255,.12); border-radius:20px; padding:clamp(24px,3vw,36px); box-shadow:0 40px 100px -30px rgba(0,0,0,.7)}
.lb-x{position:absolute; top:14px; right:16px; width:40px; height:40px; border-radius:11px; border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06); color:#fff; font-size:24px; line-height:1; cursor:pointer; transition:background .2s}
.lb-x:hover{background:rgba(255,255,255,.14)}
.lb-cat{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#6AD3A0}
.lb-title{font-family:var(--disp); font-weight:700; font-size:1.55rem; color:#fff; margin:4px 0 22px}
.lb-main{position:relative; border-radius:14px; overflow:hidden; background:#0A1210; display:flex; align-items:center; justify-content:center; min-height:240px}
.lb-main-img{max-width:100%; max-height:62vh; width:auto; height:auto; object-fit:contain; display:block}
.lb-nav{position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.22);
  background:rgba(6,14,10,.55); color:#fff; font-size:24px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:background .2s}
.lb-nav:hover{background:rgba(6,14,10,.9)}
.lb-prev{left:12px} .lb-next{right:12px}
.lb-thumbs{display:flex; gap:10px; margin-top:14px; overflow-x:auto; padding-bottom:4px}
.lb-thumb{flex:0 0 86px; height:64px; border-radius:9px; overflow:hidden; cursor:pointer; border:2px solid transparent; opacity:.55;
  transition:opacity .2s, border-color .2s; background:#0A1210; padding:0}
.lb-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.lb-thumb:hover{opacity:1}
.lb-thumb.active{opacity:1; border-color:#19C24A}
@media(max-width:680px){ .lb-nav{width:38px; height:38px} .lb-thumb{flex-basis:70px; height:54px} }

/* ---- Portfólio (2ª seção): fundo limpo + foto realista ofuscada nas pontas ---- */
.portfolio-sec{position:relative; isolation:isolate}
.portfolio-sec>.wrap{position:relative; z-index:1}
.portfolio-sec::before{content:""; position:absolute; inset:0; z-index:-2; opacity:.55; filter:grayscale(.06);
  background:url(https://images.pexels.com/photos/8482555/pexels-photo-8482555.jpeg?auto=compress&cs=tinysrgb&w=1600) center/cover;
  -webkit-mask-image:radial-gradient(130% 120% at 50% 42%, #000 26%, transparent 82%);
  mask-image:radial-gradient(130% 120% at 50% 42%, #000 26%, transparent 82%)}
.portfolio-sec::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(247,250,253,.5), rgba(247,250,253,.66))}
.pf-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:44px}
.pf-item{position:relative; display:block; width:100%; aspect-ratio:4/3; padding:0; margin:0; cursor:pointer; overflow:hidden;
  border:1px solid var(--line); border-radius:14px; background:#0A1210; box-shadow:var(--shadow);
  transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .3s}
.pf-item img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.pf-item::after{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top, rgba(5,14,9,.78), rgba(5,14,9,.12) 52%, transparent); transition:opacity .35s}
.pf-item:hover{transform:translateY(-6px); box-shadow:0 26px 52px -22px rgba(16,32,60,.4)}
.pf-item:hover img{transform:scale(1.07)}
.pf-cap{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:15px 16px 14px; text-align:left; color:#fff}
.pf-cat{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:#6AD3A0}
.pf-cap b{display:block; font-family:var(--disp); font-weight:600; font-size:1.04rem; line-height:1.2; margin-top:3px}
.pf-view{display:inline-block; margin-top:8px; font-size:12px; color:rgba(255,255,255,.9); opacity:0; transform:translateY(5px);
  transition:opacity .3s, transform .3s}
.pf-item:hover .pf-view,.pf-item:focus-visible .pf-view{opacity:1; transform:none}
.pf-item:focus-visible{outline:2px solid var(--cyan-hi); outline-offset:3px}
@media(max-width:760px){.pf-grid{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.pf-grid{grid-template-columns:1fr}}

/* ---- Footer CTA (preenche a direita) ---- */
.foot-cta{background:linear-gradient(135deg,#03190C,#06371A); border-radius:16px; padding:26px 24px; align-self:start; box-shadow:0 20px 46px -22px rgba(4,40,18,.55)}
.foot-cta h4{font-family:var(--disp); font-size:1.14rem; color:#fff; margin:0 0 8px; text-transform:none; letter-spacing:0}
.foot-cta p{color:rgba(255,255,255,.9); font-size:.9rem; margin:0 0 16px; line-height:1.5}
.foot-cta .btn{width:100%; justify-content:center}

/* ---- Processo: foto nítida (sem filtro) + degradê 100%→0% de cima pra baixo (texto legível no topo, foto limpa embaixo) ---- */
#processo{isolation:isolate}
#processo::before{content:""; position:absolute; inset:0; z-index:-2;
  background-image:var(--proc-bg, url(https://images.pexels.com/photos/6466141/pexels-photo-6466141.jpeg?auto=compress&cs=tinysrgb&w=1600));
  background-position:center; background-size:cover; background-repeat:no-repeat}
#processo::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(244,247,251,.97) 0%, rgba(244,247,251,.94) 16%, rgba(244,247,251,.62) 38%, rgba(244,247,251,.22) 58%, rgba(244,247,251,0) 78%)}

/* ---- Hero: degradê suave header↔imagem (sem corte grosseiro) ---- */
.hero .hero-in{position:relative; z-index:5}
.hero::before{content:""; position:absolute; top:0; left:0; right:0; height:190px; z-index:2; pointer-events:none;
  background:linear-gradient(to bottom, rgba(6,10,8,.92), rgba(6,10,8,.4) 48%, transparent)}
.hero::after{content:""; position:absolute; bottom:0; left:0; right:0; height:130px; z-index:2; pointer-events:none;
  background:linear-gradient(to top, rgba(255,255,255,.05), transparent)}

/* ---- Sem quebras de linha nos títulos (desktop) ---- */
@media(min-width:860px){
  #hero-h1{white-space:nowrap; max-width:none !important; font-size:clamp(1.5rem,2.7vw,2.15rem) !important}
  .add-h2{white-space:nowrap; max-width:none}
  #hero-p1, #hero-p2{max-width:none}
  #servicos .lead{max-width:none; white-space:nowrap}
}

/* Vitrine PIN — scroll vertical vira horizontal + cards interativos */
.vpin-sec{position:relative; padding:0}
.vpin{position:sticky; top:0; height:100vh; overflow:hidden; display:flex; flex-direction:column; justify-content:center; padding:54px 0 34px}
.vpin-head{flex:none; margin-bottom:26px}
.vtrack{display:flex; gap:24px; padding:0 var(--pad); will-change:transform}
.vcard{flex:0 0 clamp(320px,29vw,410px); position:relative; aspect-ratio:4/5; border-radius:20px; overflow:hidden;
  border:1px solid rgba(255,255,255,.14); box-shadow:0 30px 66px -26px rgba(2,12,6,.7); transition:box-shadow .35s, transform .5s cubic-bezier(.2,.7,.2,1)}
.vcard:hover{transform:translateY(-6px)}
.vcard .vimg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity .55s ease, transform .8s cubic-bezier(.2,.7,.2,1)}
.vcard .vimg2{opacity:0}
.vcard:hover .vimg{transform:scale(1.08)}
.vcard:hover .vimg2{opacity:1}
.vcard::after{content:""; position:absolute; inset:0; z-index:1; transition:background .4s;
  background:linear-gradient(to top,rgba(4,12,7,.94),rgba(4,12,7,.15) 55%,transparent)}
.vcard:hover::after{background:linear-gradient(to top,rgba(4,20,10,.96),rgba(4,16,9,.55) 70%,rgba(4,16,9,.2))}
.vcard .vcap{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:22px; color:#fff}
.vcard .vcap span{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#6AD3A0}
.vcard .vcap b{font-family:var(--disp); font-weight:600; font-size:1.16rem; display:block; margin-top:3px}
.vdesc{max-height:0; opacity:0; overflow:hidden; margin:0; color:rgba(255,255,255,.92); font-size:.9rem; line-height:1.5;
  transition:max-height .5s ease, opacity .4s ease, margin-top .5s ease}
.vcard:hover .vdesc{max-height:140px; opacity:1; margin-top:10px}

/* Detalhes sutis no fundo das seções claras */
body{background-image:radial-gradient(circle, rgba(17,160,62,.05) 1px, transparent 1.5px); background-size:26px 26px}
#servicos,#processo,#sobre,#diferenciais,#segmentos,#contato{position:relative; overflow:hidden}
#servicos>.wrap,#processo>.wrap,#sobre>.wrap,#diferenciais>.wrap,#segmentos>.wrap,#contato>.wrap{position:relative; z-index:1}
#diferenciais::before,#segmentos::after,#contato::before,#sobre::after{content:""; position:absolute; z-index:0; pointer-events:none;
  width:560px; height:560px; border-radius:50%; filter:blur(95px); background:radial-gradient(circle, rgba(17,160,62,.15), transparent 68%)}
#diferenciais::before{top:-140px; right:-130px}
#segmentos::after{bottom:-180px; left:-150px}
#contato::before{top:-110px; right:-150px}
#sobre::after{bottom:-160px; right:-120px}
@media (max-width:900px){
  .vpin-sec{height:auto !important}
  .vpin{position:static; height:auto; padding:0; justify-content:flex-start}
  .vtrack{overflow-x:auto; scroll-snap-type:x proximity; padding:6px var(--pad) 10px; scrollbar-width:none; transform:none !important}
  .vtrack::-webkit-scrollbar{display:none}
  .vcard{scroll-snap-align:center; aspect-ratio:4/5}
}

/* =================== PROCESSO =================== */
.proc{display:grid; grid-template-columns:1fr; gap:14px; margin-top:48px}
.proc .step{position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:28px 26px;
  display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:start; transition:border-color .3s, background .3s}
.proc .step:hover{border-color:var(--line-2); background:var(--card-hover)}
.proc .num{font-family:var(--disp); font-weight:700; font-size:1.6rem; color:var(--cyan);
  width:54px; height:54px; border-radius:14px; display:grid; place-items:center;
  background:rgba(11,122,46,.08); border:1px solid rgba(11,122,46,.2)}
.proc .step h3{font-family:var(--disp); font-weight:600; font-size:1.18rem; margin:6px 0 0; color:var(--head)}
.proc .step p{margin:8px 0 0; color:var(--text2); font-size:.96rem}

/* =================== SOBRE =================== */
.about{display:grid; grid-template-columns:1fr; gap:40px; align-items:center; margin-top:48px}
.about .stats{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:28px}
.about .stat{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px 18px}
.about .stat b{display:block; font-family:var(--disp); font-weight:700; font-size:clamp(1.7rem,4vw,2.2rem); color:var(--head)}
.about .stat .ed{font-family:var(--mono); font-size:10px; color:var(--cyan); letter-spacing:.06em}
.about .stat span{display:block; margin-top:8px; font-size:12.5px; color:var(--text2)}
.about .photo{position:relative; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; aspect-ratio:4/3}
.badge{display:inline-flex; align-items:center; gap:9px; padding:9px 14px; border:1px solid var(--line);
  border-radius:999px; background:rgba(5,8,15,.6); font-family:var(--mono); font-size:11.5px; color:var(--text2)}
.about .photo .badge{position:absolute; left:16px; bottom:16px; z-index:2}

/* =================== PROJETOS =================== */
.proj-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr)); gap:18px; margin-top:48px}
.case{position:relative; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--card);
  transition:transform .35s, border-color .35s}
.case:hover{transform:translateY(-5px); border-color:var(--line-2)}
.case .ph{position:relative; aspect-ratio:4/3; overflow:hidden}
.case .ph::after{content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(5,7,13,.9),rgba(5,7,13,.15) 65%)}
.case:hover .duo{filter:none; transform:scale(1.06)}
.case .tag{position:absolute; top:14px; left:14px; z-index:2; padding:6px 12px; border-radius:999px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--cyan);
  background:rgba(5,8,15,.6); border:1px solid var(--line-2)}
.case .meta{padding:18px 20px 22px}
.case h3{font-family:var(--disp); font-weight:600; font-size:1.08rem; margin:0; color:var(--head)}
.case p{margin:7px 0 0; font-size:.86rem; color:var(--text3)}

/* =================== CONTATO =================== */
.contact{display:grid; grid-template-columns:1fr; gap:40px; margin-top:48px; align-items:start}
.field{display:flex; flex-direction:column; gap:8px; margin-bottom:16px}
.field label{font-size:13px; color:var(--text2); font-weight:500}
.field input,.field select,.field textarea{width:100%; padding:14px 16px; background:var(--bg2);
  border:1px solid var(--line); border-radius:11px; color:var(--text); font-size:15px;
  transition:border-color .2s, box-shadow .2s}
.field textarea{resize:vertical; min-height:120px; line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(11,122,46,.15)}
.field input::placeholder,.field textarea::placeholder{color:var(--text3)}
/* honeypot anti-bot (escondido de humanos e leitores de tela) */
.hp{position:absolute!important; left:-9999px!important; top:auto; width:1px; height:1px; overflow:hidden; opacity:0}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.lgpd{font-size:12px; color:var(--text3); margin:6px 0 0; line-height:1.5}
.form-ok{margin-top:14px; padding:14px 16px; border-radius:11px; display:none; font-size:14px}
.form-ok.show{display:block}
.form-ok.is-ok{background:rgba(26,150,80,.1); border:1px solid rgba(26,150,80,.3); color:#9CF0C4}
.form-ok.is-warn{background:rgba(245,165,36,.1); border:1px solid rgba(245,165,36,.35); color:#F6CF8A}
.form-ok a{color:#BFF6D9; text-decoration:underline}
.cinfo{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:28px 26px}
.cinfo h3{font-family:var(--disp); font-weight:600; margin:0 0 20px; font-size:1.15rem; color:var(--head)}
.cinfo .it{display:flex; gap:14px; align-items:center; margin-bottom:18px}
.cinfo .ic{flex:none; width:42px; height:42px; border-radius:11px; display:grid; place-items:center;
  color:var(--cyan); background:rgba(11,122,46,.08); border:1px solid rgba(11,122,46,.2)}
.cinfo .it .k{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text3)}
.cinfo .it .v{font-size:15px; color:var(--text); font-weight:500}
.cinfo .hours{margin-top:20px; padding-top:18px; border-top:1px solid var(--line); display:flex; align-items:center; gap:11px; font-size:14px; color:var(--text2)}

/* =================== FOOTER =================== */
footer{background:var(--bg2); border-top:1px solid var(--line); padding:clamp(48px,7vw,72px) 0 28px}
.foot-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:36px 24px}
.foot-brand{grid-column:1/-1; max-width:330px}
@media(max-width:760px){ .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:480px){ .foot-grid{grid-template-columns:1fr} }
.foot-brand .brand{margin-bottom:14px}
.foot-desc{margin:14px 0 0; color:var(--text3); font-size:14px; line-height:1.6; max-width:300px}
.foot-col h4{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text3); margin:0 0 16px}
.foot-col a,.foot-col span{display:block; font-size:14px; color:var(--text2); margin-bottom:11px; transition:color .2s}
.foot-col a:hover{color:var(--cyan)}
.foot-social{display:flex; gap:10px; margin-top:16px}
.foot-social a{width:40px; height:40px; border:1px solid var(--line); border-radius:10px; display:grid; place-items:center;
  color:var(--text2); transition:color .2s, border-color .2s, transform .2s}
.foot-social a:hover{color:var(--cyan); border-color:var(--line-2); transform:translateY(-2px)}
.foot-bottom{margin-top:44px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:space-between; font-size:12.5px; color:var(--text3)}

/* =================== WhatsApp flutuante + cookies =================== */
.wa-float{position:fixed; right:18px; bottom:18px; z-index:1002; width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center; background:#25D366; box-shadow:0 10px 30px rgba(37,211,102,.4);
  transition:transform .2s, box-shadow .2s}
.wa-float:hover{transform:scale(1.08); box-shadow:0 14px 38px rgba(37,211,102,.55)}
.li-float{position:fixed; right:18px; bottom:86px; z-index:1002; width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center; background:#0A66C2; box-shadow:0 10px 30px rgba(10,102,194,.45); transition:transform .2s, box-shadow .2s}
.li-float:hover{transform:scale(1.08); box-shadow:0 14px 38px rgba(10,102,194,.55)}
.cookie{position:fixed; left:18px; bottom:18px; z-index:1003; max-width:380px; display:none;
  background:rgba(10,16,32,.95); border:1px solid var(--line-2); border-radius:14px;
  padding:18px 18px 16px; box-shadow:0 18px 50px rgba(0,0,0,.5)}
.cookie.show{display:block}
.cookie p{margin:0 0 12px; font-size:13px; color:var(--text2); line-height:1.5}
.cookie .acts{display:flex; gap:10px}
.cookie .acts button{padding:9px 16px; border-radius:9px; font-size:13px; font-weight:600}
.cookie .ok{background:var(--cyan); color:var(--ink)}
.cookie .no{border:1px solid var(--line-2); color:var(--text2)}

/* =================== Reveal (baseline visível; só esconde com .js) =================== */
/* Fallback em CSS puro (animação aos 2.4s) garante que NADA fique invisível,
   mesmo se o IntersectionObserver/JS falhar ou a thread engasgar. */
.js [data-reveal]{opacity:0; transform:translateY(24px); filter:blur(6px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1), filter .7s ease;
  animation:vxRevealSafe .6s ease 2.4s forwards}
.js [data-reveal].in{opacity:1; transform:none; filter:none; animation:none}
@keyframes vxRevealSafe{to{opacity:1; transform:none; filter:none}}

/* =================== Responsivo =================== */
@media (max-width:900px){
  .menu{position:fixed; top:68px; left:0; right:0; flex-direction:column; align-items:stretch; gap:0;
    background:rgba(5,7,13,.98); border-bottom:1px solid var(--line);
    padding:10px var(--pad) 20px; transform:translateY(-130%); transition:transform .38s cubic-bezier(.4,0,.2,1)}
  .menu.open{transform:translateY(0)}
  .menu a{padding:14px 2px; font-size:16px; border-bottom:1px solid rgba(255,255,255,.05)}
  .menu a::after{display:none}
  .menu .btn{margin-top:14px; text-align:center}
  .menu .hide-mobile{display:block}
  .burger{display:flex}
  .header-cta{display:none}
  details.svc.wide{grid-column:span 1}
  details.svc.wide .ph{aspect-ratio:16/10}
  .row2{grid-template-columns:1fr}
  .about .stats{grid-template-columns:1fr 1fr}
}
@media (min-width:901px){
  .about{grid-template-columns:1.1fr .9fr; gap:60px}
  .contact{grid-template-columns:1.1fr .85fr; gap:54px}
}

/* =================== prefers-reduced-motion =================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.15s!important}
  .js [data-reveal]{opacity:1!important; transform:none!important; filter:none!important; transition:opacity .15s linear!important}
  .dot{animation:none}
  .hero-bg .duo{transform:none}
}

/* =====================================================================
   TEMA CLARO (v6) — fundo branco, leveza e clareza (ref. e2dtech).
   Overrides aplicados por último. O HERO segue sobre foto escura,
   então seus textos/acentos ficam claros; o resto do site é claro.
   ===================================================================== */
.noise{display:none}
.svc h3{color:#fff}                         /* título no caption fica sobre a foto */

/* Header — degradê suave no topo (sem corte grosseiro sobre o hero);
   ao rolar vira uma barra fosca sutil e PERMANECE visível (não some). */
header.nav{background:linear-gradient(180deg, rgba(5,14,9,.74) 0%, rgba(5,14,9,.30) 48%, rgba(5,14,9,0) 100%);
  backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom:1px solid transparent;
  transition:background .35s ease, border-color .3s, height .3s ease, box-shadow .35s}
header.nav.scrolled{background:rgba(8,14,10,.9); height:60px; border-bottom-color:rgba(255,255,255,.08);
  box-shadow:0 14px 34px -22px rgba(0,0,0,.55)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  header.nav.scrolled{background:rgba(8,14,10,.78); backdrop-filter:blur(14px) saturate(1.35); -webkit-backdrop-filter:blur(14px) saturate(1.35)}
}
header.nav .menu a{color:rgba(232,241,235,.82)}
header.nav .menu a:hover,header.nav .menu a.active{color:#fff}
header.nav .brand .sub{color:#A9BEB0}
header.nav .burger span{background:#E8F1EB}
header.nav .menu a::after{background:#2FA85C}

/* Menu mobile escuro */
@media (max-width:900px){
  .menu{background:rgba(10,15,12,.98)}
  .menu a{border-bottom:1px solid rgba(255,255,255,.06)}
}

/* Divisor de seção suave + profundidade leve nos cards */
.sec-line{background:linear-gradient(90deg,transparent,var(--line-2) 30%,var(--line-2) 70%,transparent); box-shadow:none}
details.svc,.case,.proc .step,.about .stat,.cinfo{box-shadow:var(--shadow)}

/* Cookie e mensagens do form com contraste no claro */
.cookie{background:rgba(255,255,255,.97); box-shadow:0 18px 50px rgba(16,32,60,.16)}
.cookie p{color:var(--text2)}
.form-ok.is-ok{background:#E7F8EF; border-color:#A7E3C4; color:#0E7A48}
.form-ok.is-warn{background:#FFF4E0; border-color:#F0D49A; color:#8A5E0E}
.form-ok a{color:#0E7A48}

/* ---- HERO sobre foto escura: textos e acentos claros ---- */
#topology{opacity:.5}
.hero h1{color:#fff}
.hero h1 .g{background:linear-gradient(110deg,#3DA867,#1B7A3A); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero .lead{color:rgba(255,255,255,.92)}
.hero .eyebrow{color:#67E8F9}
.hero-meta{border-top-color:rgba(255,255,255,.18)}
.hero-meta b{color:#fff}
.hero-meta span{color:rgba(255,255,255,.82)}
.badge{color:rgba(255,255,255,.9)}
.hero-cta .btn-wa{color:#fff; border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.08)}
.hero-cta .btn-wa:hover{border-color:var(--green); background:rgba(20,140,70,.20)}
.svc .ph .tag,.case .tag{color:#54C68A}

/* Selo da logo LOGON (cérebro de circuito) — fica como badge no header */
.brand-mark{border-radius:9px;display:block;object-fit:cover;flex:none}

/* =================== Serviços em 2 caixas (T.I + Engenharia Elétrica) =================== */
.pillar{background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  box-shadow:var(--shadow); display:flex; flex-direction:column; transition:border-color .3s, transform .35s cubic-bezier(.2,.7,.2,1)}
.pillar:hover{border-color:var(--line-2); transform:translateY(-4px)}
.pillar .ph{position:relative; aspect-ratio:16/9; overflow:hidden}
.pillar:hover .duo{filter:none; transform:scale(1.04)}
.pillar .ph::after{content:""; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(5,7,13,.92),rgba(5,7,13,.32) 55%,rgba(5,7,13,.05))}
.pillar .cap{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:18px 22px}
.pillar .cap .tag{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#54C68A}
.pillar .cap h3{font-family:var(--disp); font-weight:600; font-size:1.26rem; margin:5px 0 0; color:#fff}
.pillar .plist{list-style:none; margin:0; padding:22px 24px 6px; display:grid; gap:11px}
.pillar .plist li{position:relative; padding-left:26px; font-size:.97rem; color:var(--text2)}
.pillar .plist li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--cyan); font-weight:700}
.pillar .pcta{margin:14px 24px 24px; align-self:flex-start; font-family:var(--mono);
  font-size:12.5px; letter-spacing:.03em; color:var(--green); font-weight:500}
.pillar .pcta:hover{color:#1FB877}

/* Títulos de área na seção de Serviços (T.I / Engenharia Elétrica) */
.mod-title{font-family:var(--disp); font-weight:600; font-size:clamp(1.5rem,2.8vw,2rem); letter-spacing:-.015em;
  color:var(--head); display:flex; align-items:center; gap:15px; margin:66px 0 0}
.mod-title::before{content:""; flex:none; width:32px; height:3px; border-radius:3px;
  background:linear-gradient(90deg,var(--cyan),var(--blue))}
.mod-title:first-of-type{margin-top:44px}
.mod-title + .svc-grid{margin-top:24px}
/* cards padronizados: ignora variação "wide" pra manter alturas uniformes */
details.svc.wide{grid-column:span 1}
details.svc.wide .ph{aspect-ratio:16/10}

/* ---- Área restrita (link para o sistema interno) — ligado/desligado no /admin ---- */
.menu-restrita{display:inline-flex; align-items:center; gap:7px; padding:7px 14px; border-radius:9px;
  border:1px solid rgba(255,255,255,.26); font-size:13.5px; color:rgba(232,241,235,.92);
  transition:border-color .25s, background .25s, color .2s}
.menu-restrita::after{display:none}
.menu-restrita:hover{border-color:#2FA85C; background:rgba(47,168,92,.14); color:#fff}
@media (max-width:900px){ .menu-restrita{justify-content:center; margin:6px 0} }