/* ===================================================================
   OP ENERGY — DESIGN SYSTEM & BLUEPRINT STYLE
   =================================================================== */
:root{
  --op-navy:#072851;        /* Azul marinho profundo da logo OP Energy */
  --blueprint:#0E2A47;      /* Azul técnico de planta baixa */
  --blueprint-2:#163A61;    /* Azul secundário de planta */
  --ink:#F5F7F8;            /* Grafite texto principal (Agora Claro) */
  --paper:#072851;          /* Fundo único para todo o site (igual ao início) */
  --paper-2:#092242;
  --line-blue:#38BDF8;      /* Azul Ciano elétrico luminoso da esfera da logo */
  --blue:#2F8FE0;           /* Azul primário de engenharia da logo */
  --amber: #d4dde6;          /* Prata metálico da logo */
  --amber-ink: #081624;      /* Azul marinho escuro para contraste */
  --muted:#9FB3C2;          /* Textos secundários mais claros para fundo escuro */
  --hair:rgba(111,195,255,.15); /* Linha técnica azul translúcida */
  --hair-dark:rgba(111,195,255,.25);
  --white:#F5F7F8;
  --radius:4px;             /* Cantos técnicos padronizados */
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ }
body{
  font-family:'IBM Plex Sans', sans-serif;
  color:var(--ink);
  background:var(--op-navy);
}
a, button, input, textarea, select { cursor: pointer; }

/* ================= PRELOADER ================= */
#preloader {
  position: fixed; inset: 0; z-index: 99999;
  background: var(--op-navy);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}
.preloader-content { width: 300px; text-align: center; }
.preloader-text {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.8rem;
  color: var(--amber); margin-bottom: 1rem; letter-spacing: 0.1em;
}
.preloader-percent {
  font-family: 'Archivo', sans-serif; font-size: 3rem; font-weight: 800;
  color: #fff; margin-bottom: 1.5rem;
}
.preloader-bar {
  width: 100%; height: 2px; background: rgba(255,255,255,0.1);
  border-radius: 2px; overflow: hidden;
}
.preloader-progress {
  width: 0%; height: 100%; background: var(--amber);
  transition: width 0.1s ease;
}
.preloader-hidden { opacity: 0; visibility: hidden; pointer-events: none; }


body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(170deg, var(--op-navy) 0%, #061A2E 55%, var(--blueprint) 100%);
  background-size: 88px 88px, 88px 88px, 17.6px 17.6px, 17.6px 17.6px, 100% 100%;
}

/* Three.js Background Particles Canvas */
#bg-particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -2;
  pointer-events: none;
}

/* Container for Hero 3D element */
#hero-3d-canvas {
  width: 100%;
  height: 100%;
}

h1,h2,h3{ font-family:'Archivo', sans-serif; letter-spacing:-0.01em; }
.mono{ font-family:'IBM Plex Mono', monospace; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
.container{ max-width:1180px; margin:0 auto; padding:0 6vw; }
section{ position:relative; }
:focus-visible{ outline:2px solid var(--amber); outline-offset:3px; }

/* skip-link — acessibilidade de teclado */
.skip-link{
  position:fixed; top:-100px; left:1rem; z-index:200;
  background:var(--amber); color:var(--amber-ink); font-weight:700;
  padding:.8rem 1.2rem; border-radius:2px; font-family:'IBM Plex Mono',monospace; font-size:.85rem;
  transition:top .2s ease;
}
.skip-link:focus{ top:1rem; }

.tag{
  font-family:'IBM Plex Mono', monospace;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--blue); display:inline-flex; align-items:center; gap:.5rem;
}
.tag::before{ content:""; width:16px; height:1px; background:var(--blue); display:inline-block; }

/* Live Status Badge Emergencial */
.live-status-badge {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.38rem 0.9rem; background: rgba(111,195,255,0.08);
  border: 1px solid rgba(111,195,255,0.28); border-radius: 20px;
  font-family: 'IBM Plex Mono', monospace; font-size: 0.73rem;
  color: var(--line-blue); letter-spacing: 0.05em; margin-bottom: 0.9rem;
  backdrop-filter: blur(4px); transition: all 0.3s ease;
}
.live-status-badge:hover { background: rgba(111,195,255,0.15); border-color: var(--line-blue); }
.live-status-badge .pulse-dot {
  width: 8px; height: 8px; background: #34d399; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7);
  animation: pulseGreen 2s infinite;
}
@keyframes pulseGreen {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:1rem 1.7rem; border-radius:var(--radius);
  font-weight:600; font-size:.92rem; cursor:pointer; border:1.5px solid transparent;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
  font-family:'IBM Plex Sans', sans-serif;
  position:relative; overflow:hidden; z-index:1;
}
.btn-primary{ 
  background: linear-gradient(145deg, #f8f9fa 0%, #cbd4de 100%); 
  color: #081624; 
  border-top: 1px solid rgba(255,255,255,0.7);
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.btn-primary::after {
  content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
  background: linear-gradient(60deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  transform: rotate(30deg) translateY(-100%); transition: transform 0.65s cubic-bezier(0.2, 0.8, 0.25, 1);
}
.btn-primary:hover::after { transform: rotate(30deg) translateY(100%); }
.btn-primary:hover{ 
  transform:translateY(-3px); 
  box-shadow: 0 12px 28px rgba(203, 212, 222, 0.45); 
  background: linear-gradient(145deg, #ffffff 0%, #d9e1eb 100%);
}
.btn-primary .switch{ width:15px; height:15px; border:1.6px solid #081624; border-radius:2px; position:relative; flex:none; }
.btn-primary .switch::before{ content:""; position:absolute; left:50%; top:2px; width:2px; height:6px; background:#081624; transform:translateX(-50%); transition:transform .2s ease; }
.btn-primary:hover .switch::before{ transform:translateX(-50%) rotate(20deg); transform-origin:bottom center; }
.btn-ghost{ background:transparent; color:var(--white); border-color:rgba(255,255,255,.4); }
.btn-ghost:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.7); transform:translateY(-3px); box-shadow:0 8px 22px rgba(0,0,0,0.2); }
.btn-outline-navy{ background:transparent; color:var(--blueprint); border-color:var(--hair); }
.btn-outline-navy:hover{ border-color:var(--blue); color:var(--blue); transform:translateY(-3px); }

/* Delays escalonados automáticos */
.services-grid .service-card:nth-child(1) { transition-delay: 0.05s; }
.services-grid .service-card:nth-child(2) { transition-delay: 0.1s; }
.services-grid .service-card:nth-child(3) { transition-delay: 0.15s; }
.services-grid .service-card:nth-child(4) { transition-delay: 0.2s; }
.services-grid .service-card:nth-child(5) { transition-delay: 0.25s; }
.services-grid .service-card:nth-child(6) { transition-delay: 0.3s; }

.cert-grid .cert-card:nth-child(1) { transition-delay: 0.05s; }
.cert-grid .cert-card:nth-child(2) { transition-delay: 0.1s; }
.cert-grid .cert-card:nth-child(3) { transition-delay: 0.15s; }
.cert-grid .cert-card:nth-child(4) { transition-delay: 0.2s; }

.testi-grid .testi-card:nth-child(1) { transition-delay: 0.05s; }
.testi-grid .testi-card:nth-child(2) { transition-delay: 0.15s; }
.testi-grid .testi-card:nth-child(3) { transition-delay: 0.25s; }

/* ================= HEADER ================= */
header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  background: rgba(14, 42, 71, 0.45);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 1.2rem 0;
}
header.scrolled {
  background: rgba(10, 28, 48, 0.95);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  border-bottom-color: rgba(111, 195, 255, 0.15);
  padding: 0.6rem 0;
}
header .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

/* Marca/Logo com visual mais suave */
.brand {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; 
  border-radius: 8px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
  flex: none;
}
.brand:hover {
  transform: translateY(-2px);
}
.brand img {
  height: 40px; width: auto; display: block; object-fit: contain;
  transition: transform 0.3s ease;
}
.brand:hover img {
  filter: brightness(1.5) contrast(1.3);
  transform: scale(1.03);
}

nav.links { display: flex; gap: 1.8rem; align-items: center; }
nav.links a {
  color: rgba(255, 255, 255, 0.85); font-size: 0.92rem; font-weight: 500;
  font-family: 'IBM Plex Sans', sans-serif; letter-spacing: 0.01em;
  position: relative; padding: 0.4rem 0; white-space: nowrap;
  transition: color 0.25s ease;
}
nav.links a::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 0; height: 2px;
  background: var(--amber); transition: width 0.3s ease, left 0.3s ease; border-radius: 2px;
}
nav.links a:hover { color: #fff; }
nav.links a:hover::after { width: 100%; left: 0; }

.btn-header {
  padding: 0.65rem 1.4rem; font-size: 0.85rem; font-weight: 600; white-space: nowrap; flex: none;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(242, 169, 59, 0.25);
}

@media (max-width: 1100px) {
  nav.links { gap: 1rem; }
  nav.links a { font-size: 0.85rem; }
}
@media (max-width: 600px) {
  .btn-header { display: none; }
}

/* menu mobile */
.menu-toggle{
  display:none; width:44px; height:44px; border:1px solid rgba(255,255,255,.3); background:transparent;
  border-radius:4px; cursor:pointer; position:relative; flex:none;
}
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after{
  content:""; position:absolute; left:10px; right:10px; height:2px; background:#fff; transition:transform .25s ease, opacity .25s ease, top .25s ease; display:block;
}
.menu-toggle span{ top:20px; }
.menu-toggle span::before{ top:-7px; }
.menu-toggle span::after{ top:7px; }
.menu-toggle[aria-expanded="true"] span{ background:transparent; }
.menu-toggle[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.menu-toggle[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

.mobile-drawer{
  position:fixed; inset:0; z-index:70; background:rgba(7,20,34,.98);
  display:flex; flex-direction:column; padding:6rem 8vw 2rem;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .28s ease, visibility .28s ease, transform .28s ease;
}
.mobile-drawer.open{ opacity:1; visibility:visible; transform:translateY(0); }
.mobile-drawer > a{
  font-family:'IBM Plex Mono',monospace; color:#fff; font-size:1.1rem; letter-spacing:.05em;
  padding:1.1rem 0; border-bottom:1px solid var(--hair-dark);
}
.mobile-drawer .cta-row{ margin-top:2rem; display:flex; flex-direction:column; gap:.8rem; }

@media (max-width:900px){
  nav.links{ display:none; }
  .menu-toggle{ display:block; }
}
@media (min-width:901px){ .mobile-drawer{ display:none; } }

/* ================= HERO ================= */
#hero{
  min-height:100vh; display:flex; align-items:center; position:relative;
  background:transparent;
  color:var(--white); padding:8.5rem 0 4rem; overflow:hidden; isolation:isolate;
}
.blueprint-grid{ display:none; }
.reg-mark{ position:absolute; width:22px; height:22px; z-index:1; opacity:.55; }
.reg-mark::before,.reg-mark::after{ content:""; position:absolute; background:var(--line-blue); }
.reg-mark::before{ left:50%; top:0; width:1px; height:100%; transform:translateX(-50%); }
.reg-mark::after{ top:50%; left:0; height:1px; width:100%; transform:translateY(-50%); }
.reg-mark.tl{ top:22px; left:22px; } .reg-mark.tr{ top:22px; right:22px; }
.reg-mark.bl{ bottom:22px; left:22px; } .reg-mark.br{ bottom:22px; right:22px; }
@media (max-width:900px){ .reg-mark{ display:none; } }

.dim-ruler{ position:absolute; top:0; left:0; right:0; height:34px; z-index:1; opacity:.4; pointer-events:none; }
.dim-ruler svg{ width:100%; height:100%; }
@media (max-width:900px){ .dim-ruler{ display:none; } }

.hero-spotlight{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,30%), rgba(56,189,248,.12), transparent 60%);
}

#hero .container{ position:relative; z-index:2; display:grid; grid-template-columns:1.15fr .85fr; gap:2rem; align-items:center; }
.hero-text{ will-change:transform; }

.hero-tag{ color:var(--line-blue); }
.hero-tag::before{ background:var(--line-blue); }
.hero-tag.reveal-item{ opacity:0; transform:translateY(16px); animation:fadeUp .8s cubic-bezier(.2,.75,.25,1) forwards; }

#hero h1{
  font-family:'Archivo',sans-serif;
  font-weight:900;
  font-size: clamp(3.2rem, 7vw, 4.8rem);
  line-height: 1.05;
  margin-bottom:1.4rem;
  letter-spacing:-.02em;
  color: #fff;
  text-shadow: 0 10px 20px rgba(0,0,0,.3);
}
#hero h1 .word{ display:inline-block; opacity:0; filter:blur(6px); transform:translateY(30px); animation:wordReveal .9s cubic-bezier(.2,.75,.25,1) forwards; }
#hero h1 .word.accent { 
  background: linear-gradient(135deg, #ffffff 0%, #a3b8cc 50%, #7a93a8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 15px rgba(163, 184, 204, 0.4));
}
@keyframes wordReveal{ to{ opacity:1; filter:blur(0); transform:translateY(0); } }

#hero p.lead, .hero-specs, .hero-ctas{ opacity:0; transform:translateY(18px); animation:fadeUp .8s cubic-bezier(.2,.75,.25,1) forwards; }
@keyframes fadeUp{ to{ opacity:1; transform:translateY(0); } }
#hero p.lead{ margin-top:1.4rem; color:#C9D3DC; font-size:1.05rem; line-height:1.65; max-width:46ch; font-weight:400; }

.hero-specs{
  background:rgba(255,255,255,0.03); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.1); border-radius:8px; padding:0.5rem 1.2rem;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1), 0 10px 30px rgba(0,0,0,0.2);
}
.hero-specs .row{ display:flex; justify-content:space-between; padding:.6rem 0; border-bottom:1px solid rgba(111,195,255,0.15); font-family:'IBM Plex Mono',monospace; font-size:.78rem; }
.hero-specs .row .k{ color:#8FA0AF; letter-spacing:.06em; }
.hero-specs .row .v{ color:var(--line-blue); font-weight:600; }

.hero-ctas{ display:flex; gap:1rem; margin-top:2.3rem; flex-wrap:wrap; }

#hero-visual{ position:relative; display:flex; justify-content:center; align-items:center; min-height:460px; perspective:900px; width: 100%; }

.logo-electric-container {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 400px; height: 400px;
  z-index: 1; pointer-events: none;
  display: flex; justify-content: center; align-items: center;
}

.logo-glow-bg {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.25) 0%, rgba(56, 189, 248, 0) 70%);
  border-radius: 50%;
  animation: smoothGlowPulse 4s ease-in-out infinite;
  z-index: 2;
}

.energy-orbit {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid transparent;
  z-index: 3;
}
.orbit-1 {
  width: 280px; height: 280px;
  border-top: 1px solid rgba(56, 189, 248, 0.7);
  border-right: 1px solid rgba(255, 255, 255, 0.3);
  animation: spinOrbit 6s linear infinite;
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.2);
}
.orbit-2 {
  width: 310px; height: 310px;
  border-bottom: 1px dashed rgba(224, 230, 237, 0.6);
  border-left: 1px solid rgba(56, 189, 248, 0.4);
  animation: spinOrbitReverse 10s linear infinite;
}
.orbit-3 {
  width: 340px; height: 340px;
  border: 1px solid rgba(163, 184, 204, 0.2);
  box-shadow: inset 0 0 10px rgba(56, 189, 248, 0.1);
  animation: pulseOrbit 4s ease-in-out infinite;
}
@keyframes spinOrbit { 100% { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes spinOrbitReverse { 100% { transform: translate(-50%, -50%) rotate(-360deg); } }
@keyframes pulseOrbit { 0%, 100% { transform: translate(-50%, -50%) scale(0.98); opacity: 0.6; } 50% { transform: translate(-50%, -50%) scale(1.02); opacity: 1; } }

.sparkle {
  position: absolute;
  width: 2px; height: 25px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 12px 2px #38BDF8;
  opacity: 0;
  z-index: 4;
}
.sparkle.sp-1 { top: 20%; left: 50%; transform: rotate(45deg); animation: highVoltage 3s infinite 0.2s; }
.sparkle.sp-2 { top: 75%; left: 25%; transform: rotate(-30deg); animation: highVoltage 4s infinite 1.5s; }
.sparkle.sp-3 { top: 50%; left: 80%; transform: rotate(90deg); animation: highVoltage 2.5s infinite 0.8s; }

@keyframes highVoltage {
  0%, 90% { opacity: 0; transform: scale(0); }
  92% { opacity: 1; transform: scale(1.5); }
  94% { opacity: 0; transform: scale(0); }
  96% { opacity: 1; transform: scale(1.2); }
  100% { opacity: 0; transform: scale(0); }
}

.logo-electric-img {
  width: 85%; height: auto;
  position: relative; z-index: 5;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.4));
  animation: logoFloat 4s ease-in-out infinite;
  transition: filter 0.3s ease, transform 0.3s ease;
}
.logo-electric-container:hover .logo-electric-img {
  filter: drop-shadow(0 0 35px rgba(56, 189, 248, 0.6)) brightness(1.1);
  transform: scale(1.05);
}

@keyframes smoothGlowPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
  50% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
}

@keyframes logoFloat {
  0%, 100% { transform: translateY(0); filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.4)); }
  50% { transform: translateY(-10px); filter: drop-shadow(0 20px 30px rgba(56, 189, 248, 0.3)); }
}

#sld{ position:absolute; width:112%; max-width:620px; z-index:1; overflow:visible; }
#sld .trace{
  fill:none; stroke:var(--line-blue); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:900; stroke-dashoffset:900;
  animation:draw 2.6s cubic-bezier(.4,0,.2,1) .4s forwards, lineGlow 3s ease-in-out 3s infinite;
  filter:drop-shadow(0 0 4px rgba(111,195,255,.5));
}
@keyframes lineGlow{
  0%, 100% { filter:drop-shadow(0 0 4px rgba(111,195,255,.3)); opacity:0.7; }
  50% { filter:drop-shadow(0 0 12px rgba(111,195,255,1)); opacity:1; }
}
#sld .sym{ fill:none; stroke:var(--line-blue); stroke-width:2; opacity:0; animation:symIn .5s ease forwards; }
#sld .sym.s1{ animation-delay:.5s; } #sld .sym.s2{ animation-delay:1.2s; } #sld .sym.s3{ animation-delay:1.9s; } #sld .sym.s4{ animation-delay:2.5s; }
@keyframes symIn{ to{ opacity:1; } }
@keyframes draw{ to{ stroke-dashoffset:0; } }
#sld .pulse{ fill:var(--amber); filter:drop-shadow(0 0 6px rgba(212, 221, 230, 0.9)); opacity:0; animation:pulseRun 3.2s ease-in-out 3s infinite; }
@keyframes pulseRun{
  0%{ opacity:0; offset-distance:0%; }
  6%{ opacity:1; }
  90%{ opacity:1; }
  100%{ opacity:0; offset-distance:100%; }
}
#sld .lbl{ font-family:'IBM Plex Mono',monospace; font-size:9px; fill:#8FA0AF; letter-spacing:.05em; opacity:0; animation:symIn .5s ease forwards; }
#sld .lbl.l1{ animation-delay:.9s; } #sld .lbl.l2{ animation-delay:1.6s; } #sld .lbl.l3{ animation-delay:2.3s; } #sld .lbl.l4{ animation-delay:2.9s; }

.title-block{
  position:absolute; right: -5%; bottom: 10%; z-index:5;
  border:1px solid rgba(255,255,255,.1); 
  background:linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)); 
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  box-shadow:inset 0 2px 4px rgba(0,0,0,0.1), 0 15px 35px rgba(0,0,0,0.4); 
  border-radius:8px; overflow:hidden;
  font-family:'IBM Plex Mono', monospace; font-size:.66rem; color:#B9C7D2;
  opacity:0; animation:fadeUp .7s ease 2.6s forwards;
  min-width:210px;
}
.title-block .tb-row{ display:flex; border-bottom:1px solid rgba(255,255,255,.05); }
.title-block .tb-row:last-child{ border-bottom:none; }
.title-block .tb-k{ padding:.4rem .55rem; width:38%; color:#7C8FA0; border-right:1px solid rgba(255,255,255,.05); }
.title-block .tb-v{ padding:.4rem .55rem; color:var(--white); font-weight:600; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
@media (max-width:1150px){ .title-block{ display:none; } }

.stamp{
  position:absolute; top:8%; left:8%; z-index:3; width:118px; height:118px;
  opacity:0; animation:fadeUp .7s ease 2.2s forwards;
}
.stamp svg{ width:100%; height:100%; animation:stampSpin 26s linear infinite; }
.stamp .core{ font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:.62rem; fill:var(--amber); }
@keyframes stampSpin{ to{ transform:rotate(360deg); } }
@media (max-width:1150px){ .stamp{ display:none; } }

/* Chips Flutuantes de Destaque */
.hero-chip {
  position: absolute; z-index: 5;
  padding: 0.45rem 0.9rem; 
  background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
  border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 4px;
  font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem;
  color: var(--white); backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.1), 0 8px 20px rgba(0,0,0,0.3);
  animation: floatChip 4s ease-in-out infinite;
}
.hero-chip.chip-top-right { top: 12%; right: 5%; animation-delay: 0.5s; }
.hero-chip.chip-mid-left { top: 55%; left: 0%; animation-delay: 0s; }
@keyframes floatChip { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@media (max-width: 1150px) { .hero-chip { display: none; } }

.detail-frame{ position:relative; z-index:2; width:270px; padding:14px; }
.detail-frame .corner{ position:absolute; width:16px; height:16px; border-color:var(--line-blue); opacity:.7; }
.detail-frame .corner.tl{ top:0; left:0; border-top:1.5px solid; border-left:1.5px solid; }
.detail-frame .corner.tr{ top:0; right:0; border-top:1.5px solid; border-right:1.5px solid; }
.detail-frame .corner.bl{ bottom:0; left:0; border-bottom:1.5px solid; border-left:1.5px solid; }
.detail-frame .corner.br{ bottom:0; right:0; border-bottom:1.5px solid; border-right:1.5px solid; }

.mascot-wrap{ position:relative; z-index:4; transform-style:preserve-3d; transition:transform .15s ease-out; }
.mascot-glow{
  position:absolute; left:50%; top:50%; width:320px; height:320px; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(111,195,255,.32), transparent 70%); border-radius:50%; filter:blur(10px);
  animation:glowPulse 3.2s ease-in-out infinite; z-index: 1;
}
@keyframes glowPulse{ 0%,100%{ opacity:.4; transform:translate(-50%,-50%) scale(.92);} 50%{ opacity:.8; transform:translate(-50%,-50%) scale(1.04);} }
#hero-mascot{
  width:240px; position:relative; z-index: 4;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.5));
  animation:mascotEnter 1s cubic-bezier(.2,.8,.25,1) 2s both, mascotFloat 4.2s ease-in-out 3s infinite;
}
@keyframes mascotEnter{ 0%{ opacity:0; transform:translateY(40px) scale(.88);} 100%{ opacity:1; transform:translateY(0) scale(1);} }
@keyframes mascotFloat{ 0%,100%{ transform:translateY(0) rotate(-1deg);} 50%{ transform:translateY(-13px) rotate(1deg);} }
#hero-mascot:hover{ animation-play-state:paused; transform:translateY(-8px) rotate(-2deg) scale(1.03); transition:transform .3s ease; }

.mascot-pedestal {
  position: absolute; left: 50%; bottom: 8px; width: 180px; height: 18px;
  transform: translateX(-50%); background: radial-gradient(ellipse, rgba(111, 195, 255, 0.6), rgba(242, 169, 59, 0.2), transparent 80%);
  border-radius: 50%; filter: blur(4px); z-index: 2;
  animation: pedestalPulse 3.2s ease-in-out infinite;
}
@keyframes pedestalPulse { 0%, 100% { transform: translateX(-50%) scale(0.9); opacity: 0.5; } 50% { transform: translateX(-50%) scale(1.1); opacity: 0.95; } }

.mobile-doc-strip{
  display:none; margin-top:1.6rem; padding:.7rem 1rem; border:1px solid rgba(111,195,255,.3);
  background:rgba(111,195,255,.06); font-family:'IBM Plex Mono',monospace; font-size:.7rem;
  color:#9FB3C2; letter-spacing:.05em; justify-content:center; gap:.5rem; flex-wrap:wrap;
}
.mobile-doc-strip b{ color:var(--line-blue); }
.mobile-doc-strip .sep{ opacity:.4; }
@media (max-width:1100px){ .mobile-doc-strip{ display:flex; } }

@media (max-width:900px){
  #hero .container{ grid-template-columns:1fr; text-align:center; }
  #hero h1{ max-width:none; margin-left:auto; margin-right:auto; }
  #hero p.lead{ margin-left:auto; margin-right:auto; }
  .hero-specs .row{ margin:0 auto; }
  .hero-ctas{ justify-content:center; }
  #hero-visual{ margin-top:2rem; }
}

/* ================= SOBRE ================= */
#sobre{ padding:7rem 0 5rem; background:transparent; }
#sobre .container{ display:grid; grid-template-columns:.9fr 1.1fr; gap:3.5rem; align-items:center; }
#sobre h2{ font-size:clamp(1.7rem,3vw,2.4rem); color:var(--white); line-height:1.25; font-weight:800; text-transform:uppercase; }
#sobre p{ color:var(--muted); margin-top:1.1rem; line-height:1.75; font-size:1.02rem; }
.spec-sheet {
  background: rgba(14, 25, 41, 0.6);
  border: 1px solid rgba(111, 195, 255, 0.15);
  border-radius: 8px;
  backdrop-filter: blur(10px);
  margin-top: 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(111, 195, 255, 0.05);
  overflow: hidden;
}
.spec-sheet .row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid rgba(111, 195, 255, 0.1);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.78rem;
  transition: background 0.3s ease, border-left 0.2s ease;
  border-left: 3px solid transparent;
}
.spec-sheet .row:hover {
  background: rgba(111, 195, 255, 0.05);
  border-left: 3px solid var(--line-blue);
}
.spec-sheet .row:last-child {
  border-bottom: none;
}
.spec-sheet .k {
  flex: 0 0 42%;
  min-width: 0;
  word-break: break-word;
  padding: 1rem 1.2rem;
  color: #9FB3C2;
  border-right: 1px solid rgba(111, 195, 255, 0.1);
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.spec-sheet .k svg {
  color: var(--line-blue);
  opacity: 0.8;
  flex-shrink: 0;
}
.spec-sheet .v {
  flex: 1;
  min-width: 0;
  word-break: break-word;
  display: flex;
  align-items: center;
  padding: 1rem 1.2rem;
  color: var(--white);
  font-weight: 600;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}
@media (max-width: 600px) {
  .spec-sheet .k { padding: 0.8rem 0.6rem; gap: 0.4rem; font-size: 0.72rem; }
  .spec-sheet .v { padding: 0.8rem 0.6rem; font-size: 0.72rem; }
}
@media (max-width:900px){ #sobre .container{ grid-template-columns:1fr; } }

/* ================= SERVIÇOS ================= */
#servicos{ padding:5.5rem 0; background:transparent; }
#servicos .head{ max-width:680px; margin:0 auto 3rem; }
#servicos h2{ font-size:clamp(1.7rem,3vw,2.4rem); color:var(--white); font-weight:800; text-transform:uppercase; margin-top:.8rem; }
#servicos .head p{ color:var(--muted); margin-top:.8rem; }
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1.5rem;
}
.service-card {
  background: rgba(14, 25, 41, 0.6);
  border: 1px solid rgba(111, 195, 255, 0.1);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  padding: 0;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease, background 0.4s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.service-card .cover-img {
  width: 100%;
  height: 260px;
  overflow: hidden;
  border-bottom: 1px solid rgba(111, 195, 255, 0.1);
}
.service-card .cover-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.service-card:hover .cover-img img {
  transform: scale(1.08);
}
.service-card .card-body {
  padding: 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.service-card::before {
  content: ""; position: absolute; top: 0; left: 0; width: 0%; height: 3px;
  background: linear-gradient(90deg, var(--blue), var(--amber)); transition: width 0.4s ease;
}
.service-card:hover {
  background: rgba(14, 25, 41, 0.85);
  transform: translateY(-6px);
  border-color: rgba(111, 195, 255, 0.4);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(111, 195, 255, 0.05);
  z-index: 2;
}
.service-card:hover::before { width: 100%; }

.card-icon {
  width: 48px;
  height: 48px;
  background: rgba(111, 195, 255, 0.08);
  border: 1px solid rgba(111, 195, 255, 0.15);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  color: var(--line-blue);
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.service-card:hover .card-icon {
  background: rgba(111, 195, 255, 0.2);
  color: #fff;
  transform: scale(1.1) rotate(5deg);
}

.service-card .code { font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; color: var(--amber); font-weight: 700; letter-spacing: 0.08em; margin-bottom: 0.5rem; }
.service-card h3 { font-size: 1.1rem; color: var(--white); margin: 0 0 0.8rem; font-family: 'Archivo', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.service-card p { color: #9FB3C2; font-size: 0.92rem; line-height: 1.6; flex: 1; margin: 0; }

.service-card.highlight-card {
  background: linear-gradient(135deg, rgba(14, 25, 41, 0.8), rgba(111, 195, 255, 0.1));
  border: 1px solid rgba(111, 195, 255, 0.3);
  text-align: center;
  grid-column: 1 / -1;
  padding: 2rem 1.8rem;
}
.service-card.highlight-card .card-content-center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; height: 100%; }
.service-card.highlight-card h3 { color: var(--line-blue); margin-bottom: 0.2rem; }
.service-card.highlight-card p { margin-bottom: 0.5rem; }
.service-card.highlight-card .btn { padding: 0.7rem 1.4rem; font-size: 0.85rem; margin-top: auto; }

/* ================= CALCULADORA SOLAR ================= */
#calculadora-solar{
  margin-top:4rem; padding:2.5rem; background:var(--blueprint); color:#fff;
  border:1px solid var(--blueprint-2); border-radius:var(--radius); position:relative; overflow:hidden;
}
#calculadora-solar h3{ font-size:1.5rem; color:#fff; font-weight:800; text-transform:uppercase; margin-bottom:.5rem; }
#calculadora-solar p.sub{ color:#B9C7D2; font-size:.92rem; margin-bottom:2rem; }
.calc-grid{ display:grid; grid-template-columns:1fr 1.2fr; gap:2.5rem; align-items:center; }
.calc-inputs{ background:rgba(255,255,255,.05); border:1px solid var(--hair-dark); padding:1.8rem; border-radius:var(--radius); }
.calc-field-group{ margin-bottom:1.4rem; }
.calc-field-group label{ display:block; font-family:'IBM Plex Mono',monospace; font-size:.78rem; color:var(--line-blue); margin-bottom:.6rem; letter-spacing:.05em; }
.calc-range-wrap{ display:flex; flex-direction:column; gap:.8rem; }
.calc-range-wrap input[type="range"]{
  -webkit-appearance:none; appearance:none; width:100%; height:8px; background:rgba(255,255,255,.15);
  border-radius:4px; outline:none; cursor:pointer;
}
.calc-range-wrap input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:22px; height:22px; border-radius:50%;
  background:var(--amber); cursor:pointer; box-shadow:0 0 12px rgba(212, 221, 230, 0.7);
  transition:transform .2s ease, box-shadow .2s ease;
}
.calc-range-wrap input[type="range"]::-webkit-slider-thumb:hover{ transform:scale(1.15); box-shadow:0 0 16px rgba(212, 221, 230, 0.9); }
.calc-input-value{
  font-family:'IBM Plex Mono',monospace; font-size:1.8rem; font-weight:700; color:var(--amber); text-align:center;
  background:rgba(0,0,0,.2); border:1px solid var(--hair-dark); padding:.4rem .8rem; border-radius:var(--radius);
  transition:transform .15s ease;
}
.calc-input-value.bump{ transform:scale(1.05); }
.calc-metrics-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.calc-metric-card{
  background:rgba(255,255,255,.06); border:1px solid var(--hair-dark); padding:1.2rem; border-radius:var(--radius);
  text-align:center; transition:transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.calc-metric-card:hover{ transform:translateY(-4px); background:rgba(255,255,255,.12); border-color:var(--line-blue); box-shadow:0 8px 22px rgba(111,195,255,.15); }
.calc-metric-card .label{ font-family:'IBM Plex Mono',monospace; font-size:.7rem; color:#8FA0AF; letter-spacing:.06em; text-transform:uppercase; }
.calc-metric-card .val{ font-family:'Archivo',sans-serif; font-size:1.5rem; font-weight:800; color:var(--line-blue); margin-top:.4rem; }
.calc-metric-card .val.amber{ color:var(--amber); }
.calc-cta{ margin-top:2rem; text-align:center; }
@media (max-width:850px){ .calc-grid{ grid-template-columns:1fr; } .calc-metrics-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:550px){ .calc-metrics-grid{ grid-template-columns:1fr; } }

/* ================= DIFERENCIAIS ================= */
#diferenciais{ padding:6rem 0; background:transparent; color:var(--white); position:relative; overflow:hidden; }
#diferenciais .container{ position:relative; }
#diferenciais .head{ max-width:600px; margin-bottom:3rem; }
#diferenciais h2{ font-size:clamp(1.7rem,3vw,2.4rem); font-weight:800; text-transform:uppercase; margin-top:.8rem; }
#diferenciais p.sub{ color:#B9C7D2; margin-top:.8rem; }
.dif-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}
.dif-card {
  background: rgba(14, 25, 41, 0.6);
  border: 1px solid rgba(111, 195, 255, 0.15);
  border-radius: 12px;
  padding: 2.2rem 1.8rem;
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(8px);
}
.dif-card::before {
  content: ""; position: absolute; top: 0; left: 0; width: 3px; height: 0%;
  background: linear-gradient(180deg, var(--blue), var(--amber)); transition: height 0.4s ease;
}
.dif-card:hover {
  transform: translateY(-6px);
  border-color: rgba(111, 195, 255, 0.4);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3), inset 0 0 15px rgba(111, 195, 255, 0.05);
}
.dif-card:hover::before { height: 100%; }

.dif-icon {
  color: var(--line-blue);
  background: rgba(111, 195, 255, 0.08);
  width: 54px; height: 54px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(111, 195, 255, 0.2);
  transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.dif-card:hover .dif-icon {
  background: rgba(111, 195, 255, 0.2);
  transform: scale(1.1) rotate(5deg);
  color: #fff;
}
.dif-card .param { font-family: 'IBM Plex Mono', monospace; font-size: 0.75rem; color: #8FA0AF; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.6rem; }
.dif-card .val { font-family: 'Archivo', sans-serif; font-size: 1.2rem; color: var(--white); font-weight: 800; margin-bottom: 0.8rem; text-transform: uppercase; }
.dif-card .desc { color: #9FB3C2; font-size: 0.95rem; line-height: 1.6; }

/* ================= CERTIFICAÇÕES ================= */
#certificacoes{ padding:5.5rem 0; background:transparent; border-top:1px solid var(--hair); }
#certificacoes .head{ max-width:680px; margin:0 auto 3rem; }
#certificacoes h2{ font-size:clamp(1.7rem,3vw,2.4rem); color:var(--white); font-weight:800; text-transform:uppercase; margin-top:.8rem; }
#certificacoes .head p{ color:var(--muted); margin-top:.8rem; }
.cert-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; }
.cert-card {
  border: 1px solid rgba(111, 195, 255, 0.15); padding: 1.8rem; display: flex; gap: 1.2rem; align-items: flex-start;
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; position: relative; overflow: hidden;
  background: rgba(14, 25, 41, 0.6); backdrop-filter: blur(8px); border-radius: 12px;
}
.cert-card::before {
  content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 3px; background: linear-gradient(180deg, var(--blue), var(--amber));
  transform: scaleY(0); transition: transform 0.4s ease; transform-origin: top;
}
.cert-card:hover { transform: translateY(-6px); border-color: rgba(111, 195, 255, 0.4); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3), inset 0 0 15px rgba(111, 195, 255, 0.05); }
.cert-card:hover::before { transform: scaleY(1); }
.cert-card .ic { width: 50px; height: 50px; border: 1px solid rgba(111, 195, 255, 0.2); flex: none; display: flex; align-items: center; justify-content: center; color: var(--line-blue); transition: all 0.3s ease; border-radius: 12px; background: rgba(111, 195, 255, 0.08); }
.cert-card:hover .ic { background: rgba(111, 195, 255, 0.2); color: #fff; transform: rotate(5deg) scale(1.1); }
.cert-card .ic svg { width: 24px; height: 24px; }
.cert-card .code { font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; color: var(--amber); font-weight: 700; letter-spacing: 0.08em; margin-bottom: 0.3rem; }
.cert-card h3 { font-family: 'Archivo', sans-serif; font-size: 1rem; color: var(--white); margin: 0 0 0.5rem; text-transform: uppercase; font-weight: 700; }
.cert-card p { color: #9FB3C2; font-size: 0.88rem; line-height: 1.6; margin: 0; }

/* ================= DEPOIMENTOS ================= */
#depoimentos{ padding:5.5rem 0; background:transparent; }
#depoimentos .head{ max-width:680px; margin:0 auto 2rem; }
#depoimentos h2{ font-size:clamp(1.7rem,3vw,2.4rem); color:var(--white); font-weight:800; text-transform:uppercase; margin-top:.8rem; }
#depoimentos .head p{ color:var(--muted); margin-top:.8rem; }
.testi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; }
.testi-card {
  background: rgba(14, 25, 41, 0.6); backdrop-filter: blur(8px);
  border: 1px solid rgba(111, 195, 255, 0.15); border-radius: 12px; padding: 2.2rem 1.8rem;
  position: relative; transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
.testi-card:hover {
  transform: translateY(-6px);
  border-color: rgba(111, 195, 255, 0.4);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3), inset 0 0 15px rgba(111, 195, 255, 0.05);
}
.testi-card::before {
  content: "“"; font-family: serif; font-size: 6rem; color: rgba(111, 195, 255, 0.08);
  position: absolute; top: -15px; right: 20px; line-height: 1; pointer-events: none;
}
.google-review-header { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1rem; position: relative; z-index: 1; }
.reviewer-avatar {
  width: 40px; height: 40px; border-radius: 50%; background: #4285F4; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: 700; font-family: 'Archivo', sans-serif;
}
.reviewer-info { flex: 1; display: flex; flex-direction: column; }
.reviewer-name { color: var(--white); font-weight: 700; font-size: 0.95rem; font-family: 'Archivo', sans-serif; margin-bottom: 0.1rem; }
.review-date { color: #8FA0AF; font-size: 0.75rem; font-family: 'IBM Plex Sans', sans-serif; }
.google-icon { flex: none; display: flex; align-items: center; }
.testi-card .stars { display: flex; gap: 2px; margin-bottom: 1rem; position: relative; z-index: 1; }
.testi-card p { color: #C9D3DC; font-size: 0.95rem; line-height: 1.7; position: relative; z-index: 1; }
.testi-card .who { display: none; } /* Ocultar a versão antiga */
.testi-card .who span { display: none; }

.gmb-badge-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.8rem;
  padding: 1rem 1.8rem;
  background: linear-gradient(135deg, rgba(14, 25, 41, 0.9), rgba(111, 195, 255, 0.1));
  border: 1px solid rgba(111, 195, 255, 0.3);
  border-radius: 12px; color: var(--white);
  font-family: 'Archivo', sans-serif; font-size: 0.95rem; font-weight: 700;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2); transition: all 0.3s ease;
  backdrop-filter: blur(8px);
}
.gmb-badge-btn svg { color: #EA4335; transition: transform 0.3s ease; }
.gmb-badge-btn:hover {
  border-color: rgba(111, 195, 255, 0.6);
  background: linear-gradient(135deg, rgba(14, 25, 41, 0.95), rgba(111, 195, 255, 0.2));
  transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,0.3);
}
.gmb-badge-btn:hover svg { transform: scale(1.15) translateY(-2px); }

/* ================= FAQ ================= */
#faq{ padding:5.5rem 0; background:transparent; border-top:1px solid var(--hair); }
#faq .head{ max-width:680px; margin:0 auto 2.6rem; }
#faq h2{ font-size:clamp(1.7rem,3vw,2.4rem); color:var(--white); font-weight:800; text-transform:uppercase; margin-top:.8rem; }
#faq .head p{ color:var(--muted); margin-top:.8rem; }
.faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
.faq-list details {
  background: rgba(14, 25, 41, 0.6); backdrop-filter: blur(8px);
  border: 1px solid rgba(111, 195, 255, 0.15); border-radius: 12px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.faq-list details:hover { border-color: rgba(111, 195, 255, 0.4); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); }
.faq-list details[open] { border-color: rgba(242, 169, 59, 0.5); }
.faq-list summary {
  padding: 1.5rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center;
  font-family: 'Archivo', sans-serif; font-weight: 700; color: var(--white); font-size: 1rem;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; font-family: 'IBM Plex Mono', monospace; color: var(--line-blue); font-size: 1.5rem; flex: none; margin-left: 1rem; transition: transform 0.3s ease, color 0.3s ease; font-weight: 400; line-height: 1; }
.faq-list details[open] summary::after { transform: rotate(45deg); color: var(--amber); }
.faq-list .a { padding: 0 1.5rem 1.5rem; color: #9FB3C2; font-size: 0.95rem; line-height: 1.7; max-width: 70ch; }

/* ================= GALERIA & FILTROS ================= */
#galeria{ padding:6rem 0; background:transparent; }
#galeria .head{ max-width:680px; margin:0 auto 2rem; }
#galeria h2{ font-size:clamp(1.7rem,3vw,2.4rem); color:var(--white); font-weight:800; text-transform:uppercase; margin-top:.8rem; }
#galeria .head p{ color:var(--muted); margin-top:.8rem; }

.gallery-filters{ display:flex; justify-content:center; flex-wrap:wrap; gap:.6rem; margin-bottom:2.5rem; }
.filter-btn{
  background:var(--blueprint); border:1px solid var(--hair); color:var(--white);
  padding:.55rem 1.2rem; font-family:'IBM Plex Mono',monospace; font-size:.78rem; font-weight:600;
  cursor:pointer; border-radius:var(--radius); transition:all .25s ease;
}
.filter-btn:hover, .filter-btn.active{ background:var(--line-blue); color:var(--op-navy); border-color:var(--line-blue); }

.gallery-grid{ columns:4 220px; column-gap:1rem; }
.gallery-grid figure{
  margin:0 0 1rem; break-inside:avoid; position:relative; cursor:pointer; border:1px solid var(--hair);
  transition:opacity .35s ease, transform .35s ease;
}
.gallery-grid figure.hide-item{ display:none; }
.gallery-grid img{ width:100%; display:block; transition:transform .5s ease, filter .5s ease; filter:grayscale(.15) contrast(1.02); }
.gallery-grid figure:hover img{ transform:scale(1.05); filter:grayscale(0) contrast(1.05); }
.gallery-grid figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:.7rem .8rem;
  background:linear-gradient(to top, rgba(14,42,71,.92), transparent);
  color:#fff; font-family:'IBM Plex Mono',monospace; font-size:.68rem; letter-spacing:.04em;
}
.gallery-grid figcaption b{ color:var(--line-blue); margin-right:.4rem; }
@media (max-width:700px){ .gallery-grid{ columns:2 160px; } }

/* ================= ÁREAS ================= */
#areas{ padding:4.5rem 0; background:transparent; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); }
#areas .container{ text-align:center; }
#areas .tag{ justify-content:center; width:100%; display:flex; }
#areas h2{ font-size:clamp(1.4rem,2.4vw,1.9rem); color:var(--white); font-weight:800; text-transform:uppercase; margin-top:.7rem; }
#areas p{ color:var(--muted); margin-top:.6rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; margin-top: 2.5rem; max-width: 860px; margin-left: auto; margin-right: auto; }
.chip {
  background: rgba(14, 25, 41, 0.6); backdrop-filter: blur(8px);
  border: 1px solid rgba(111, 195, 255, 0.15); color: #C9D3DC;
  padding: 0.75rem 1.4rem; border-radius: 8px; font-size: 0.85rem; font-weight: 600;
  font-family: 'IBM Plex Mono', monospace; transition: all 0.3s ease;
  display: inline-flex; align-items: center; gap: 0.6rem; letter-spacing: 0.05em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); cursor: default;
}
.chip::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--line-blue); transition: all 0.3s ease;
}
.chip:hover {
  border-color: rgba(111, 195, 255, 0.4); color: var(--white);
  transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2), inset 0 0 10px rgba(111, 195, 255, 0.05);
}
.chip:hover::before { background: var(--amber); box-shadow: 0 0 8px var(--amber); }

/* ================= CONTATO & FORMULÁRIO ================= */
#contato{ padding:6rem 0; background:transparent; position:relative; overflow:hidden; }
#contato .container{ display:block; }
.contato-header { text-align: center; margin-bottom: 3rem; }
.contato-header p.sub.mx-auto { margin-left: auto; margin-right: auto; }
.contato-content { display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:start; }
#contato h2{ font-size:clamp(1.7rem,3vw,2.4rem); color:var(--white); font-weight:800; text-transform:uppercase; margin-top:.8rem; }
#contato p.sub{ color:var(--muted); margin-top:.8rem; max-width:44ch; line-height:1.6; }

.contact-cards { display: flex; flex-direction: column; gap: 1rem; margin-top: 2rem; }
.contact-card {
  display: flex; align-items: center; gap: 1.2rem; padding: 1.5rem;
  background: rgba(14, 25, 41, 0.6); backdrop-filter: blur(8px);
  border: 1px solid rgba(111, 195, 255, 0.15); border-radius: 12px;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
}
.contact-card:hover {
  transform: translateX(5px); border-color: rgba(111, 195, 255, 0.4);
  background: rgba(14, 25, 41, 0.8); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.contact-card .ic {
  width: 48px; height: 48px; border-radius: 50%; background: rgba(111, 195, 255, 0.1);
  color: var(--line-blue); display: flex; align-items: center; justify-content: center; flex: none;
  box-shadow: inset 0 0 10px rgba(111, 195, 255, 0.05); transition: background 0.3s ease, color 0.3s ease;
}
.contact-card:hover .ic { background: rgba(242, 169, 59, 0.2); color: var(--amber); }
.contact-card .ic svg { width: 22px; height: 22px; }
.contact-card .t { font-size: 0.75rem; color: #8FA0AF; font-family: 'IBM Plex Mono', monospace; letter-spacing: 0.05em; text-transform: uppercase; }
.contact-card .v { font-weight: 700; color: var(--white); font-size: 1rem; margin-top: 0.2rem; font-family: 'Archivo', sans-serif; line-height: 1.3; }

.contact-panel {
  background: rgba(14, 25, 41, 0.6); backdrop-filter: blur(12px); color: #fff;
  padding: 3rem; position: relative; overflow: visible;
  border: 1px solid rgba(111, 195, 255, 0.2); border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3), inset 0 0 20px rgba(111, 195, 255, 0.05);
}
.contact-panel h3 { font-size: 1.2rem; font-family: 'Archivo', sans-serif; font-weight: 800; text-transform: uppercase; color: var(--white); }
.contact-panel p { color: #9FB3C2; margin-top: 0.6rem; font-size: 0.95rem; line-height: 1.6; }

/* formulário inteligente de orçamento */
.quote-form { margin-top: 2rem; display: flex; flex-direction: column; gap: 1.2rem; }
.form-row { display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
.form-group { display: flex; flex-direction: column; gap: 0.5rem; }
.form-group label { font-family: 'IBM Plex Mono', monospace; font-size: 0.75rem; color: var(--line-blue); letter-spacing: 0.05em; text-transform: uppercase; font-weight: 600; }
.form-control {
  background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(111, 195, 255, 0.15);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3); backdrop-filter: blur(8px);
  color: #fff; padding: 1rem 1.2rem;
  font-family: 'IBM Plex Sans', sans-serif; font-size: 0.95rem; border-radius: 8px; outline: none; transition: all 0.3s ease;
  width: 100%; max-width: 100%; text-overflow: ellipsis;
}
input.form-control, select.form-control {
  overflow: hidden; white-space: nowrap;
}
.form-control::placeholder { color: rgba(255,255,255,0.3); }
.form-control:focus {
  border-color: var(--line-blue); background: rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 12px rgba(111, 195, 255, 0.2);
}
.form-control select option { background: var(--op-navy); color: #fff; }
textarea.form-control { resize: vertical; min-height: 90px; text-overflow: clip; }

.payment-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.5rem 0 0; }
.payment-chips span {
  background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.4rem 0.8rem; font-size: 0.75rem; font-family: 'IBM Plex Mono', monospace;
  color: #9FB3C2; border-radius: 4px; backdrop-filter: blur(4px); transition: color 0.3s ease;
}
.payment-chips span.highlight {
  color: var(--amber); border-color: rgba(242, 169, 59, 0.4); background: rgba(242, 169, 59, 0.05); font-weight: 600;
}
.payment-chips span:hover { color: #fff; }
.contact-mascot { 
  position: absolute; right: -120px; bottom: -60px; width: 140px; 
  animation: floatMascot 4s ease-in-out infinite; 
  filter: drop-shadow(0 15px 25px rgba(0,0,0,.45)); 
  z-index: 5; pointer-events: none;
}
@keyframes floatMascot { 
  0%,100% { transform: translateY(0) rotate(-2deg); } 
  50% { transform: translateY(-15px) rotate(2deg); } 
}
.speech-bubble {
  position: absolute; right: 10px; bottom: -15px; 
  background: var(--amber); color: var(--amber-ink);
  font-size: .76rem; font-weight: 700; padding: .5rem .9rem; border-radius: 4px;
  animation: bubbleFloat 4s ease-in-out infinite; white-space: nowrap; font-family: 'IBM Plex Mono', monospace;
  box-shadow: 0 5px 15px rgba(242, 169, 59, 0.3);
  z-index: 6; pointer-events: none;
}
@keyframes bubbleFloat { 
  0%,100% { transform: translateY(0); } 
  50% { transform: translateY(-15px); } 
}

/* Botão WhatsApp Super CTA */
.wpp-btn {
  background: linear-gradient(135deg, #25D366, #128C7E); color: #fff;
  border: none; padding: 1.2rem 2rem; border-radius: 8px; font-weight: 800; font-family: 'Archivo', sans-serif;
  font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.8rem;
  width: 100%; transition: all 0.3s ease; box-shadow: 0 10px 25px rgba(37, 211, 102, 0.3);
  text-transform: uppercase; letter-spacing: 0.05em; margin-top: 1rem; position: relative; overflow: hidden;
}
.wpp-btn::before {
  content: ""; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-25deg); animation: shimmerSweep 3s infinite; z-index: 1; pointer-events: none;
}
.wpp-btn:hover {
  transform: translateY(-3px); box-shadow: 0 15px 35px rgba(37, 211, 102, 0.4);
  background: linear-gradient(135deg, #2ae06d, #149a8a);
}
@keyframes shimmerSweep {
  0% { left: -100%; }
  20% { left: 200%; }
  100% { left: 200%; }
}

@media (max-width:900px){
  .contato-content { grid-template-columns:1fr; }
  .contato-content > * { min-width: 0; max-width: 100%; }
  .contact-mascot,.speech-bubble{ display:none; }
  .form-row{ grid-template-columns:1fr; }
}
@media (max-width:600px){
  .contact-panel { padding: 1.5rem; }
  .contact-card { padding: 1.2rem 1rem; gap: 0.8rem; }
  .contact-card .v { font-size: 0.9rem; word-break: break-word; }
  .contact-card .t { font-size: 0.7rem; }
  .wpp-btn { padding: 1rem; font-size: 0.9rem; flex-wrap: wrap; text-align: center; }
  .form-control { padding: 0.8rem 1rem; }
  #contato { padding: 4rem 0; }
}

/* ================= FOOTER ================= */
footer { 
  background: transparent;
  color: #8FA0AF; padding: 4rem 0 2rem; border-top: 1px solid rgba(111, 195, 255, 0.1); 
  position: relative; overflow: hidden;
}
footer::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: radial-gradient(circle at 50% 100%, rgba(111, 195, 255, 0.05), transparent 60%);
  pointer-events: none;
}
footer .container { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2rem; position: relative; z-index: 2; }
footer .brand-col img { height: 60px; margin-bottom: 1.2rem; filter: drop-shadow(0 0 10px rgba(111, 195, 255, 0.3)); }
footer .brand-col p { font-size: 0.85rem; line-height: 1.7; max-width: 32ch; }
footer h4 { color: #fff; font-size: 0.85rem; margin-bottom: 1.2rem; font-family: 'IBM Plex Mono', monospace; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; }
footer ul { list-style: none; display: grid; gap: 0.8rem; }
footer ul a { font-size: 0.88rem; transition: color 0.3s ease; }
footer ul a:hover { color: var(--amber); }

.footer-bottom { 
  border-top: 1px solid rgba(255,255,255,0.05); margin-top: 3rem; padding-top: 1.5rem; 
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; 
  font-size: 0.8rem; font-family: 'IBM Plex Mono', monospace; 
  position: relative; z-index: 2;
}

.jvsoft-credits a {
  color: var(--white); font-family: 'Archivo', sans-serif; font-weight: 800; text-decoration: none;
  background: linear-gradient(135deg, var(--line-blue), #8762D7);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  transition: opacity 0.3s ease; position: relative;
}
.jvsoft-credits a:hover { opacity: 0.8; }

@media (max-width:700px){ 
  footer { padding-bottom: 6.5rem; text-align: center; }
  footer .container { grid-template-columns: 1fr; gap: 2.5rem; }
  footer .brand-col img { margin: 0 auto 1.2rem; display: block; }
  footer .brand-col p { margin: 0 auto; }
  .footer-bottom { flex-direction: column; text-align: center; justify-content: center; margin-top: 2.5rem; } 
}
/* ================= WHATSAPP FLOAT (MASCOTE OP ENERGY) ================= */
#wa-float{ position:fixed; right:1.6rem; bottom:1.6rem; z-index:60; display:flex; align-items:flex-end; gap:.7rem; cursor:pointer; }
#wa-float .bubble{
  background:var(--amber); color:var(--amber-ink); font-size:.8rem; font-weight:700;
  padding:.6rem 1.1rem; border-radius:4px; font-family:'IBM Plex Mono',monospace;
  opacity:0; transform:translateX(10px); transition:opacity .3s ease, transform .3s ease; white-space:nowrap;
  box-shadow:0 10px 24px rgba(0,0,0,.3);
}
#wa-float:hover .bubble{ opacity:1; transform:translateX(0); }
#wa-float img{
  width:78px; height:auto; filter:drop-shadow(0 10px 20px rgba(0,0,0,.4));
  animation:waFloat 3.2s ease-in-out infinite; transition:transform .3s ease;
}
#wa-float:hover img{ transform:scale(1.12) rotate(-3deg); }
@keyframes waFloat{ 0%,100%{ transform:translateY(0) rotate(-2deg);} 50%{ transform:translateY(-10px) rotate(2deg);} }
#wa-float .ring{ position:absolute; width:78px; height:78px; border-radius:50%; background:rgba(242,169,59,.45); animation:ringPulse 2.4s ease-out infinite; }
@keyframes ringPulse{ 0%{ transform:scale(.8); opacity:.8;} 100%{ transform:scale(1.7); opacity:0;} }
#wa-float .wrap{ position:relative; display:flex; align-items:center; justify-content:center; }
@media (max-width:640px){ #wa-float{ right:1rem; bottom:1rem; } #wa-float img{ width:62px; } #wa-float .ring{ width:62px; height:62px; } #wa-float .bubble{ display:none; } }

@media (prefers-reduced-motion: reduce){
  *,::before,::after{ animation:none !important; transition:none !important; }
}