@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500&display=swap');

/* =========================================================
   AMS — Engenharia de Infraestrutura
   Design System / Protótipo
   ========================================================= */

:root {
  /* Base — escala de escuros técnicos */
  --bg:            #08090b;
  --bg-1:          #0c0e11;
  --bg-2:          #111418;
  --bg-3:          #171b21;
  --line:          #23282f;
  --line-soft:     #1a1e24;

  /* Texto */
  --fg:            #eef1f4;
  --fg-soft:       #b6bcc4;
  --fg-mute:       #7c848e;
  --fg-faint:      #565d66;

  /* Acento — azul técnico / sinal */
  --acc:           #1847eb;
  --acc-bright:    #86a0ff;
  --acc-deep:      #1e5fa8;
  --acc-glow:      rgba(24, 71, 235, .35);

  /* Acento secundário — energia / âmbar */
  --amber:         #f5a623;

  /* Sinais de risco */
  --danger:        #ff5a52;

  --radius:        4px;
  --radius-lg:     10px;

  --maxw:          1240px;
  --gut:           clamp(20px, 5vw, 64px);

  --ease:          cubic-bezier(.22, .61, .36, 1);
  --ff-sans:       "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ff-mono:       "Montserrat", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
}

/* -------- Reset -------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--ff-sans);
  background: var(--bg);
  color: var(--fg);
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
ul { list-style: none; padding: 0; }

::selection { background: var(--acc); color: #04121f; }

/* -------- Tipografia -------- */
h1, h2, h3, h4 { line-height: 1.08; font-weight: 600; letter-spacing: -.02em; }
.h-display { font-size: clamp(2.4rem, 6vw, 4.6rem); font-weight: 650; letter-spacing: -.035em; }
.h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
.h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
.h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }

.eyebrow {
  font-family: var(--ff-mono);
  font-size: .72rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--acc);
  display: inline-flex;
  align-items: center;
  gap: .7em;
  font-weight: 500;
}
.eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--acc);
  opacity: .7;
}

.lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--fg-soft); font-weight: 350; }
.mono { font-family: var(--ff-mono); }
.mute { color: var(--fg-mute); }

/* -------- Layout -------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: clamp(72px, 11vw, 148px); position: relative; }
.section--tight { padding-block: clamp(52px, 7vw, 92px); }
.section-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head .h2 { margin-top: 16px; }
.grid { display: grid; gap: clamp(20px, 3vw, 40px); }

.stack > * + * { margin-top: 1rem; }

/* -------- Botões -------- */
.btn {
  display: inline-flex; align-items: center; gap: .6em;
  padding: .95em 1.6em;
  font-size: .92rem; font-weight: 500;
  border-radius: var(--radius);
  transition: all .3s var(--ease);
  position: relative;
  letter-spacing: .01em;
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn--primary { background: var(--acc); color: #04121f; font-weight: 600; }
.btn--primary:hover { background: var(--acc-bright); box-shadow: 0 0 0 1px var(--acc), 0 8px 30px -8px var(--acc-glow); }
.btn--ghost { border: 1px solid var(--line); color: var(--fg); }
.btn--ghost:hover { border-color: var(--acc); color: var(--acc-bright); }
.btn--block { width: 100%; justify-content: center; }
.btn--lg { padding: 1.1em 2em; font-size: 1rem; }

/* -------- Header -------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(8, 9, 11, .82);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line-soft);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px;
}
.brand { display: flex; align-items: center; gap: 11px; font-weight: 700; letter-spacing: .04em; font-size: 1.15rem; }
.brand .brand-mark {
  width: 30px; height: 30px; border: 1.5px solid var(--acc);
  display: grid; place-items: center; border-radius: 3px;
  font-family: var(--ff-mono); font-size: .78rem; color: var(--acc-bright);
  position: relative; overflow: hidden;
}
.brand .brand-mark::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 40%, var(--acc-glow) 50%, transparent 60%);
  transform: translateX(-120%); transition: transform .6s var(--ease);
}
.brand:hover .brand-mark::after { transform: translateX(120%); }
.brand small { display: block; font-family: var(--ff-mono); font-size: .56rem; letter-spacing: .22em; color: var(--fg-mute); font-weight: 400; }

.nav-menu { display: flex; align-items: center; gap: 4px; }
.nav-menu > li > a {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .55em .85em; font-size: .9rem; color: var(--fg-soft);
  border-radius: var(--radius); transition: color .25s, background .25s;
}
.nav-menu > li > a:hover, .nav-menu > li.active > a { color: var(--fg); }
.nav-cta { margin-left: 14px; }

/* dropdown Soluções */
.has-drop { position: relative; }
.drop-caret { width: 9px; height: 9px; transition: transform .3s var(--ease); opacity: .6; }
.has-drop:hover .drop-caret { transform: rotate(180deg); }
.dropdown {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 300px; padding: 8px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.7);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: all .28s var(--ease);
}
.has-drop:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; border-radius: var(--radius);
  transition: background .2s;
}
.dropdown a:hover { background: var(--bg-3); }
.dropdown .di { font-family: var(--ff-mono); font-size: .7rem; color: var(--acc); width: 22px; flex: none; }
.dropdown .dt { font-size: .92rem; font-weight: 500; }
.dropdown .dd { font-size: .74rem; color: var(--fg-mute); }

/* mobile */
.nav-toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: var(--radius); }
.nav-toggle span { display: block; width: 18px; height: 1.5px; background: var(--fg); margin: 4px auto; transition: .3s; }
.mobile-menu { display: none; }

@media (max-width: 940px) {
  .nav-menu, .nav > .nav-cta { display: none; }
  .nav-toggle { display: block; }
  .mobile-menu {
    display: block; position: fixed; inset: 72px 0 0 0; z-index: 99;
    background: var(--bg); padding: 24px var(--gut) 60px;
    transform: translateX(100%); transition: transform .4s var(--ease);
    overflow-y: auto;
  }
  .mobile-menu.open { transform: translateX(0); }
  .mobile-menu a { display: block; padding: 16px 0; font-size: 1.3rem; border-bottom: 1px solid var(--line-soft); }
  .mobile-menu .sub a { font-size: 1rem; color: var(--fg-mute); padding: 11px 0 11px 18px; border: none; }
  .mobile-menu .sub-label { font-family: var(--ff-mono); font-size: .7rem; letter-spacing: .2em; color: var(--acc); text-transform: uppercase; margin-top: 22px; }
  body.menu-open { overflow: hidden; }
  .nav-toggle.open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
}

/* -------- Hero -------- */
.hero {
  position: relative; min-height: 100vh; display: flex; align-items: center;
  padding-top: 72px; overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 78% 15%, rgba(30,95,168,.28), transparent 55%),
    radial-gradient(90% 80% at 12% 90%, rgba(20,40,70,.4), transparent 60%),
    var(--bg);
}
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(120% 100% at 70% 20%, #000 20%, transparent 75%);
  opacity: .5;
}
.hero-inner { position: relative; z-index: 2; width: 100%; }
.hero-grid { display: grid; grid-template-columns: 1.55fr .85fr; gap: 48px; align-items: center; }
.hero h1 { margin: 22px 0 24px; }
.hero .lead { max-width: 52ch; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 40px; }

/* painel operação */
.op-panel {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  padding: 22px; font-family: var(--ff-mono); font-size: .82rem;
  position: relative; overflow: hidden;
}
.op-panel::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--acc), transparent);
  animation: scanline 3.4s var(--ease) infinite;
}
@keyframes scanline { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.op-panel .op-title {
  display: flex; align-items: center; gap: 8px;
  color: var(--acc); letter-spacing: .18em; font-size: .68rem;
  padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px dashed var(--line);
}
.op-panel .op-title .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 8px var(--acc); animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.op-row { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; color: var(--fg-mute); }
.op-row b { color: var(--fg); font-weight: 500; text-align: right; }

.hero-scroll {
  position: absolute; bottom: 26px; left: var(--gut); z-index: 3;
  font-family: var(--ff-mono); font-size: .68rem; letter-spacing: .22em;
  color: var(--fg-mute); display: flex; align-items: center; gap: 10px; text-transform: uppercase;
}
.hero-scroll .bar { width: 40px; height: 1px; background: var(--line); position: relative; overflow: hidden; }
.hero-scroll .bar::after { content:""; position:absolute; inset:0; width:40%; background: var(--acc); animation: scanline 2.6s var(--ease) infinite; }

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .op-panel { max-width: 400px; }
}

/* -------- Linha técnica (motion connector) -------- */
.tech-line { position: absolute; left: 0; right: 0; height: 2px; pointer-events: none; overflow: visible; z-index: 1; }
.tech-line svg { width: 100%; height: 40px; overflow: visible; }
.tech-line path { fill: none; stroke: var(--line); stroke-width: 1.5; }
.tech-line .pulse {
  stroke: var(--acc); stroke-width: 2;
  stroke-dasharray: 12 380; stroke-linecap: round;
  filter: drop-shadow(0 0 6px var(--acc-glow));
  animation: flow 4s linear infinite;
}
@keyframes flow { to { stroke-dashoffset: -392; } }

/* -------- Cards / reveal -------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) and (max-width: 1px) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* -------- Engenharia invisível -------- */
.invisible-list { display: grid; gap: 2px; margin-top: 40px; border-top: 1px solid var(--line-soft); }
.invisible-item {
  display: grid; grid-template-columns: 60px 1fr auto; gap: 24px; align-items: center;
  padding: 26px 4px; border-bottom: 1px solid var(--line-soft);
  transition: background .3s, padding .3s;
}
.invisible-item:hover { background: var(--bg-1); padding-inline: 18px; }
.invisible-item .idx { font-family: var(--ff-mono); font-size: .8rem; color: var(--acc); }
.invisible-item .ttl { font-size: clamp(1.2rem, 2.4vw, 1.7rem); font-weight: 500; letter-spacing: -.02em; }
.invisible-item:hover .ttl { color: var(--acc-bright); }
.invisible-item .desc { font-size: .9rem; color: var(--fg-mute); max-width: 34ch; text-align: right; }

/* -------- Soluções (painel interativo) -------- */
.sol-interactive { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(24px, 4vw, 56px); align-items: stretch; }
.sol-tabs { display: flex; flex-direction: column; }
.sol-tab {
  display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center;
  padding: 26px 8px; border-top: 1px solid var(--line-soft); text-align: left;
  transition: all .35s var(--ease); position: relative; width: 100%;
}
.sol-tab:last-child { border-bottom: 1px solid var(--line-soft); }
.sol-tab .num { font-family: var(--ff-mono); font-size: .82rem; color: var(--fg-faint); transition: color .3s; }
.sol-tab .name { font-size: clamp(1.25rem, 2.3vw, 1.7rem); font-weight: 500; letter-spacing: -.02em; color: var(--fg-mute); transition: color .3s; }
.sol-tab .arw { opacity: 0; transform: translateX(-8px); transition: all .3s; color: var(--acc); }
.sol-tab::before { content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background: var(--acc); transform: scaleY(0); transform-origin: top; transition: transform .4s var(--ease); }
.sol-tab.active .num { color: var(--acc); }
.sol-tab.active .name { color: var(--fg); }
.sol-tab.active .arw { opacity: 1; transform: none; }
.sol-tab.active::before { transform: scaleY(1); }
.sol-tab:hover .name { color: var(--fg-soft); }

.sol-preview {
  position: relative; border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; min-height: 440px; background: var(--bg-2);
}
.sol-panel { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .5s var(--ease); display: flex; flex-direction: column; }
.sol-panel.active { opacity: 1; visibility: visible; }
.sol-panel .sol-visual { flex: 1; position: relative; overflow: hidden; }
.sol-panel .sol-visual::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 30%, rgba(8,9,11,.92)); }
.sol-panel .sol-visual .glyph {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--ff-mono); font-size: 8rem; color: var(--bg-3); font-weight: 700;
  background:
    radial-gradient(80% 80% at 60% 30%, rgba(30,95,168,.22), transparent 60%),
    repeating-linear-gradient(45deg, var(--bg-2), var(--bg-2) 22px, var(--bg-1) 22px, var(--bg-1) 44px);
}
.sol-panel .sol-body { position: relative; z-index: 2; padding: 26px; margin-top: -70px; }
.sol-panel .sol-body .tag { font-family: var(--ff-mono); font-size: .7rem; letter-spacing: .2em; color: var(--acc); text-transform: uppercase; }
.sol-panel .sol-body h3 { margin: 12px 0 10px; font-size: 1.5rem; }
.sol-panel .sol-body p { color: var(--fg-soft); font-size: .95rem; margin-bottom: 16px; }
.sol-panel .sol-body .apps { display: flex; flex-wrap: wrap; gap: 8px; }
.sol-panel .sol-body .apps span { font-family: var(--ff-mono); font-size: .72rem; color: var(--fg-mute); border: 1px solid var(--line); padding: 5px 10px; border-radius: 3px; }

@media (max-width: 820px) {
  .sol-interactive { grid-template-columns: 1fr; }
  .sol-preview { min-height: 360px; order: -1; }
}

/* -------- Risco -------- */
.risk { background: linear-gradient(180deg, #0a0507, var(--bg)); border-top: 1px solid rgba(255,90,82,.14); position: relative; }
.risk .wrap { position: relative; z-index: 2; }
.risk-chain { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; margin-top: 44px; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); overflow: hidden; }
.risk-node { padding: 26px 20px; background: var(--bg-1); position: relative; transition: background .3s; }
.risk-node:hover { background: #140a0a; }
.risk-node .rk-idx { font-family: var(--ff-mono); font-size: .72rem; color: var(--danger); opacity: .8; }
.risk-node .rk-ttl { font-weight: 500; margin-top: 10px; font-size: 1.02rem; }
.risk-node .rk-desc { font-size: .82rem; color: var(--fg-mute); margin-top: 6px; }

/* -------- Método -------- */
/* ===== MÉTODO — linha do tempo com motion ===== */
.method-track { position: relative; margin-top: 56px; }
.method-rail { position: absolute; top: 6.5px; left: 8px; right: calc(100%/7 - 8px); height: 3px; border-radius: 3px; background: rgba(134,160,255,.16); z-index: 1; }
.method-rail .fill { position: absolute; inset: 0 auto 0 0; width: 0; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #1847eb, #4f74ff 55%, #86a0ff); box-shadow: 0 0 14px rgba(79,116,255,.55); transition: width 1.6s cubic-bezier(.4,.08,.2,1); }
.method-track.run .method-rail .fill { width: 100%; }
.method-rail .comet { position: absolute; top: 50%; left: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: radial-gradient(circle, #f0f4ff, #86a0ff 60%, rgba(134,160,255,0)); box-shadow: 0 0 16px 4px rgba(134,160,255,.85); opacity: 0; transition: left 1.6s cubic-bezier(.4,.08,.2,1); pointer-events: none; }
.method-track.run .method-rail .comet { left: 100%; animation: cometFade 1.6s ease forwards; }
@keyframes cometFade { 0%{opacity:0} 10%{opacity:1} 86%{opacity:1} 100%{opacity:0} }
.method-steps { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 6px 0; position: relative; z-index: 2; }
.method-step { position: relative; padding: 0 16px 0 0; min-width: 0; }
.method-step .node { width: 16px; height: 16px; border-radius: 50%; background: rgba(134,160,255,.22); position: relative; margin-bottom: 22px; transition: background .45s var(--ease), box-shadow .45s var(--ease), transform .45s var(--ease); }
.method-step .node::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid #86a0ff; opacity: 0; transform: scale(.55); pointer-events: none; }
.method-step.on .node { background: radial-gradient(circle at 35% 30%, #d6e4ff, #4f74ff 62%, #1847eb); box-shadow: 0 0 0 5px rgba(79,116,255,.14), 0 0 18px rgba(134,160,255,.75); transform: scale(1.14); }
.method-step.on .node::after { animation: nodeRipple .9s ease-out; }
@keyframes nodeRipple { 0%{opacity:.75; transform:scale(.55)} 100%{opacity:0; transform:scale(2.7)} }
.method-step .st-body { transform: translateY(10px); opacity: 0; transition: transform .55s var(--ease), opacity .55s var(--ease); }
.method-step.on .st-body { transform: none; opacity: 1; }
.method-step .st-num { font-family: var(--ff-mono); font-size: .72rem; color: var(--fg-faint); transition: color .4s; }
.method-step.on .st-num { color: #86a0ff; }
.method-step .st-ttl { font-weight: 600; margin: 6px 0 8px; font-size: 1.06rem; overflow-wrap: break-word; hyphens: auto; }
.method-step .st-desc { font-size: .84rem; color: var(--fg-mute); line-height: 1.4; }

/* -------- Segmentos -------- */
.seg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 44px; }
.seg-card {
  position: relative; aspect-ratio: 3/4; border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  overflow: hidden; padding: 22px; display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--bg-1); transition: border-color .4s, transform .4s;
}
.seg-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(70% 60% at 50% 12%, rgba(30,95,168,.24), transparent 62%),
    repeating-linear-gradient(0deg, transparent, transparent 26px, var(--line-soft) 26px, var(--line-soft) 27px);
  opacity: .5; transition: opacity .4s;
}
.seg-card:hover { border-color: var(--acc-deep); transform: translateY(-4px); }
.seg-card:hover::before { opacity: 1; }
.seg-card .seg-idx { position: relative; font-family: var(--ff-mono); font-size: .7rem; color: var(--acc); position: absolute; top: 18px; left: 18px; }
.seg-card .seg-name { position: relative; z-index: 2; font-size: 1.15rem; font-weight: 550; }
.seg-card .seg-demand { position: relative; z-index: 2; font-size: .8rem; color: var(--fg-mute); margin-top: 6px; }

@media (max-width: 900px) { .seg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .seg-grid { grid-template-columns: 1fr; } .seg-card { aspect-ratio: 16/9; } }

/* -------- Cases -------- */
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.case-card {
  border: 1px solid var(--line-soft); border-radius: var(--radius-lg); overflow: hidden;
  background: var(--bg-1); transition: border-color .4s, transform .4s; display: flex; flex-direction: column;
}
.case-card:hover { border-color: var(--line); transform: translateY(-4px); }
.case-media { aspect-ratio: 16/10; position: relative; overflow: hidden; background: var(--bg-2); }
.case-media .glyph {
  position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--ff-mono);
  color: var(--bg-3); font-size: 3.4rem; font-weight: 700;
  background:
    radial-gradient(80% 70% at 50% 20%, rgba(30,95,168,.2), transparent 60%),
    repeating-linear-gradient(45deg, var(--bg-2), var(--bg-2) 20px, var(--bg-1) 20px, var(--bg-1) 40px);
}
.case-media .tag { position: absolute; top: 14px; left: 14px; z-index: 2; font-family: var(--ff-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: #dbe4ff; background: rgba(12,18,40,.85); border: 1px solid rgba(134,160,255,.22); padding: 5px 9px; border-radius: 3px; backdrop-filter: blur(4px); }
.case-body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
.case-body .c-meta { font-family: var(--ff-mono); font-size: .72rem; color: var(--fg-mute); display: flex; gap: 14px; flex-wrap: wrap; }
.case-body h3 { margin: 12px 0 10px; font-size: 1.22rem; }
.case-body p { font-size: .88rem; color: var(--fg-soft); }
.case-body .c-result { margin-top: auto; padding-top: 16px; border-top: 1px dashed var(--line); font-size: .82rem; color: var(--acc-bright); font-family: var(--ff-mono); }

@media (max-width: 900px) { .case-grid { grid-template-columns: 1fr; } }

/* -------- Números -------- */
.stats { background: var(--bg-1); border-block: 1px solid var(--line-soft); }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; }
.stat { padding: 12px 20px; text-align: left; }
.stat .n { font-size: clamp(2.4rem, 5vw, 3.8rem); font-weight: 650; letter-spacing: -.04em; line-height: 1; background: linear-gradient(180deg, var(--fg), var(--fg-mute)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat .n .u { color: var(--acc); -webkit-text-fill-color: var(--acc); font-size: .5em; }
.stat .l { color: var(--fg-mute); font-size: .88rem; margin-top: 12px; max-width: 22ch; }
@media (max-width: 820px) { .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 1px; } }

/* -------- Clientes (marquee) -------- */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; gap: 56px; width: max-content; animation: marquee 34s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.client-logo { font-family: var(--ff-mono); font-size: 1.1rem; letter-spacing: .06em; color: var(--fg-faint); font-weight: 500; white-space: nowrap; transition: color .3s; padding: 12px 0; }
.client-logo:hover { color: var(--fg-soft); }

/* -------- CTA final -------- */
.cta-final { position: relative; text-align: center; overflow: hidden; }
.cta-final::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 120% at 50% 120%, rgba(30,95,168,.28), transparent 60%);
}
.cta-final .wrap { position: relative; z-index: 2; }
.cta-final .h1 { max-width: 20ch; margin-inline: auto; }

/* -------- Footer -------- */
.site-footer { border-top: 1px solid var(--line-soft); background: var(--bg-1); padding-block: 64px 40px; }
.footer-top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; }
.footer-brand p { color: var(--fg-mute); font-size: .9rem; margin-top: 18px; max-width: 34ch; }
.footer-col h4 { font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: 18px; }
.footer-col a { display: block; color: var(--fg-soft); font-size: .9rem; padding: 6px 0; transition: color .25s; }
.footer-col a:hover { color: var(--acc-bright); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 56px; padding-top: 26px; padding-bottom: 64px; border-top: 1px solid var(--line-soft); font-size: .8rem; color: var(--fg-faint); flex-wrap: wrap; gap: 14px; }
.footer-bottom .mono { font-family: var(--ff-mono); }
@media (max-width: 820px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-top { grid-template-columns: 1fr; } }

/* -------- Page hero (internas) -------- */
.page-hero { padding-top: calc(72px + clamp(60px, 9vw, 120px)); padding-bottom: clamp(40px, 6vw, 72px); position: relative; border-bottom: 1px solid var(--line-soft); overflow: hidden; }
.page-hero::before {
  content:""; position:absolute; inset:0; z-index:0;
  background: radial-gradient(90% 120% at 85% -10%, rgba(30,95,168,.2), transparent 55%);
}
.page-hero .wrap { position: relative; z-index: 2; }
.page-hero h1 { margin: 20px 0 22px; max-width: 18ch; }
.page-hero .lead { max-width: 60ch; }
.breadcrumb { font-family: var(--ff-mono); font-size: .74rem; color: var(--fg-mute); letter-spacing: .05em; }
.breadcrumb a:hover { color: var(--acc); }
.breadcrumb span { color: var(--fg-faint); margin: 0 8px; }

/* -------- Timeline (Quem Somos) -------- */
.timeline { position: relative; margin-top: 20px; padding-left: 34px; }
.timeline::before { content:""; position:absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, var(--acc), var(--line-soft)); }
.tl-item { position: relative; padding: 0 0 44px 0; }
.tl-item::before { content:""; position:absolute; left: -34px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); border: 2px solid var(--acc); box-shadow: 0 0 0 4px rgba(77,166,255,.12); }
.tl-item .tl-phase { font-family: var(--ff-mono); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--acc); }
.tl-item h3 { margin: 10px 0 8px; font-size: 1.3rem; }
.tl-item p { color: var(--fg-soft); font-size: .95rem; max-width: 60ch; }

/* -------- Value / MVV -------- */
.mvv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mvv-card { border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 30px; background: var(--bg-1); transition: border-color .3s; }
.mvv-card:hover { border-color: var(--line); }
.mvv-card .mvv-k { font-family: var(--ff-mono); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--acc); }
.mvv-card h3 { margin: 14px 0 12px; }
.mvv-card p, .mvv-card li { color: var(--fg-soft); font-size: .92rem; }
.mvv-card li { padding: 6px 0 6px 18px; position: relative; }
.mvv-card li::before { content:"—"; position:absolute; left:0; color: var(--acc); }
@media (max-width: 820px) { .mvv-grid { grid-template-columns: 1fr; } .seg-grid { } }

/* -------- Feature list (soluções internas) -------- */
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 34px; }
.feature-item { display: flex; gap: 14px; padding: 20px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--bg-1); transition: border-color .3s, background .3s; }
.feature-item:hover { border-color: var(--line); background: var(--bg-2); }
.feature-item .fi-ic { color: var(--acc); flex: none; margin-top: 2px; }
.feature-item h4 { font-size: 1rem; font-weight: 550; }
.feature-item p { font-size: .85rem; color: var(--fg-mute); margin-top: 4px; }
@media (max-width: 640px) { .feature-grid { grid-template-columns: 1fr; } }

/* -------- Solution cards (index Soluções) -------- */
.solutions-list { display: grid; gap: 16px; margin-top: 44px; }
.solution-row {
  display: grid; grid-template-columns: 80px 1.4fr 1fr auto; gap: 28px; align-items: center;
  padding: 34px 28px; border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  background: var(--bg-1); transition: all .4s var(--ease); position: relative; overflow: hidden;
}
.solution-row::after { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background: var(--acc); transform: scaleY(0); transform-origin: center; transition: transform .4s; }
.solution-row:hover { border-color: var(--line); transform: translateX(6px); }
.solution-row:hover::after { transform: scaleY(1); }
.solution-row .sr-num { font-family: var(--ff-mono); font-size: 1.4rem; color: var(--fg-faint); }
.solution-row .sr-name { font-size: 1.5rem; font-weight: 550; letter-spacing: -.02em; }
.solution-row .sr-name small { display: block; font-family: var(--ff-mono); font-size: .72rem; color: var(--acc); letter-spacing: .1em; margin-top: 6px; font-weight: 400; }
.solution-row .sr-desc { font-size: .9rem; color: var(--fg-mute); }
.solution-row .sr-arw { color: var(--acc); transition: transform .3s; }
.solution-row:hover .sr-arw { transform: translateX(6px); }
@media (max-width: 820px) { .solution-row { grid-template-columns: 1fr; gap: 12px; } .solution-row .sr-arw { display: none; } }

/* -------- Filtros (cases) -------- */
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 36px; }
.filter-btn { font-family: var(--ff-mono); font-size: .8rem; padding: 8px 16px; border: 1px solid var(--line); border-radius: 40px; color: var(--fg-mute); transition: all .25s; }
.filter-btn:hover { color: var(--fg); border-color: var(--fg-mute); }
.filter-btn.active { background: var(--acc); color: #04121f; border-color: var(--acc); font-weight: 500; }
.case-card.hide { display: none; }

/* -------- Formulário (contato) -------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(30px, 5vw, 70px); }
.form-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-1); padding: clamp(24px, 4vw, 40px); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: .8rem; color: var(--fg-soft); margin-bottom: 8px; font-weight: 500; }
.field label .req { color: var(--acc); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 14px; background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius); color: var(--fg); font: inherit; font-size: .92rem; transition: border-color .25s, box-shadow .25s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--acc); box-shadow: 0 0 0 3px rgba(77,166,255,.14); }
.field textarea { resize: vertical; min-height: 120px; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%237c848e' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.file-field { border: 1px dashed var(--line); border-radius: var(--radius); padding: 22px; text-align: center; color: var(--fg-mute); font-size: .85rem; transition: border-color .25s; cursor: pointer; }
.file-field:hover { border-color: var(--acc); color: var(--fg-soft); }
.form-success { display: none; text-align: center; padding: 40px 20px; }
.form-success.show { display: block; }
.form-success .ok-mark { width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--acc); display: grid; place-items: center; margin: 0 auto 20px; color: var(--acc); }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } }

.contact-aside .ca-item { padding: 20px 0; border-bottom: 1px solid var(--line-soft); }
.contact-aside .ca-item .ca-k { font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--acc); }
.contact-aside .ca-item .ca-v { font-size: 1.05rem; margin-top: 8px; }
.contact-aside .ca-item .ca-v a:hover { color: var(--acc-bright); }

/* -------- Conteúdos (blog) -------- */
.topic-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 40px; }
.topic-card { border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 24px; background: var(--bg-1); transition: all .3s; }
.topic-card:hover { border-color: var(--acc-deep); transform: translateY(-3px); }
.topic-card .tc-ic { color: var(--acc); margin-bottom: 16px; }
.topic-card h3 { font-size: 1.05rem; }
.topic-card p { font-size: .82rem; color: var(--fg-mute); margin-top: 8px; }
@media (max-width: 900px) { .topic-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .topic-grid { grid-template-columns: 1fr; } }

.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; }
.article-card { border: 1px solid var(--line-soft); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-1); transition: border-color .3s, transform .3s; }
.article-card:hover { border-color: var(--line); transform: translateY(-3px); }
.article-card .a-media { aspect-ratio: 16/9; background: repeating-linear-gradient(45deg, var(--bg-2), var(--bg-2) 18px, var(--bg-1) 18px, var(--bg-1) 36px); position: relative; }
.article-card .a-media::after { content:""; position:absolute; inset:0; background: radial-gradient(70% 70% at 40% 30%, rgba(30,95,168,.2), transparent 60%); }
.article-card .a-body { padding: 22px; }
.article-card .a-cat { font-family: var(--ff-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--acc); }
.article-card h3 { margin: 12px 0; font-size: 1.12rem; }
.article-card .a-meta { font-size: .78rem; color: var(--fg-faint); font-family: var(--ff-mono); }
@media (max-width: 900px) { .article-grid { grid-template-columns: 1fr; } }

/* -------- Process steps (Como trabalhamos) -------- */
.process-panel { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; margin-top: 44px; }
.process-step { display: grid; grid-template-columns: 90px 1fr; gap: 24px; padding: 30px 28px; border-bottom: 1px solid var(--line-soft); position: relative; transition: background .4s; }
.process-step:last-child { border-bottom: none; }
.process-step.on { background: linear-gradient(90deg, rgba(30,95,168,.08), transparent 60%); }
.process-step .ps-num { font-family: var(--ff-mono); font-size: 1.6rem; color: var(--fg-faint); transition: color .4s; }
.process-step.on .ps-num { color: var(--acc); }
.process-step .ps-ic { position: absolute; left: 28px; top: 68px; color: var(--acc); opacity: 0; transition: opacity .4s; }
.process-step h3 { font-size: 1.3rem; }
.process-step p { color: var(--fg-soft); font-size: .95rem; margin-top: 10px; max-width: 66ch; }

/* -------- utility -------- */
.text-center { text-align: center; }
.mt-s { margin-top: 20px; } .mt-m { margin-top: 40px; } .mt-l { margin-top: 64px; }
.divider { height: 1px; background: var(--line-soft); border: none; }
.pill { font-family: var(--ff-mono); font-size: .72rem; color: var(--acc); border: 1px solid var(--acc-deep); border-radius: 40px; padding: 5px 12px; display: inline-block; }
.badge-note { font-family: var(--ff-mono); font-size: .72rem; color: var(--amber); border: 1px solid rgba(245,166,35,.3); background: rgba(245,166,35,.06); border-radius: 4px; padding: 4px 10px; display: inline-flex; align-items: center; gap: 6px; }

/* =========================================================
   V2 — SISTEMA VIVO / CENTRO DE COMANDO
   ========================================================= */

:root {
  --live: var(--acc);              /* cor atual da linha viva */
  --hvac: #1847eb;                 /* azul */
  --pv:   #f5b02a;                 /* âmbar */
  --spk:  #ff5a52;                 /* vermelho */
  --civil:#e9edf2;                 /* branco */
}
body[data-live="hvac"]  { --live: var(--hvac); }
body[data-live="pv"]    { --live: var(--pv); }
body[data-live="spk"]   { --live: var(--spk); }
body[data-live="civil"] { --live: var(--civil); }
body[data-live="base"]  { --live: var(--acc); }

/* esconder cursor nativo quando a reticula está ativa */
body.has-scan-cursor,
body.has-scan-cursor a,
body.has-scan-cursor button { cursor: none; }

/* ---------- LINHA VIVA (spine técnica) ---------- */
.live-line { position: fixed; top: 0; bottom: 0; left: 26px; z-index: 60; pointer-events: none; display: flex; flex-direction: column; }
.live-rail { position: absolute; top: 96px; bottom: 96px; left: 0; width: 2px; background: var(--line-soft); overflow: visible; }
.live-rail::before { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent, var(--line-soft) 12%, var(--line-soft) 88%, transparent); }
.live-fill { position: absolute; inset: 0; transform-origin: top; transform: scaleY(0); background: linear-gradient(180deg, var(--live), color-mix(in srgb, var(--live) 40%, transparent)); box-shadow: 0 0 12px color-mix(in srgb, var(--live) 60%, transparent); transition: background .6s var(--ease), box-shadow .6s var(--ease); }
.live-node { position: absolute; left: 50%; top: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--live); transform: translate(-50%,-50%); box-shadow: 0 0 0 4px color-mix(in srgb, var(--live) 20%, transparent), 0 0 14px var(--live); transition: background .6s var(--ease); }
.live-node::after { content:""; position:absolute; left:50%; top:50%; width:22px; height:1px; background: linear-gradient(90deg, var(--live), transparent); transform: translateY(-50%); }
.live-readout { position: absolute; left: 16px; bottom: 84px; writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--ff-mono); font-size: .62rem; letter-spacing: .24em; color: var(--fg-faint); display: flex; gap: 12px; }
.live-readout .lr-area { color: var(--live); transition: color .6s var(--ease); }
@media (max-width: 1100px) { .live-line { display: none; } }

/* ---------- CURSOR DE INSPEÇÃO ---------- */
.scan-cursor { position: fixed; top: 0; left: 0; z-index: 9000; pointer-events: none; will-change: transform; mix-blend-mode: difference; }
.scan-cursor .sc-ring { position: absolute; width: 34px; height: 34px; border: 1px solid #fff; border-radius: 50%; transform: translate(-50%,-50%); transition: width .25s var(--ease), height .25s var(--ease), border-radius .25s, opacity .25s; opacity: .5; }
.scan-cursor .sc-dot { position: absolute; width: 4px; height: 4px; background: #fff; border-radius: 50%; transform: translate(-50%,-50%); }
.scan-cursor .sc-h, .scan-cursor .sc-v { position: absolute; background: #fff; opacity: .35; }
.scan-cursor .sc-h { width: 14px; height: 1px; transform: translate(-50%,-50%); }
.scan-cursor .sc-v { width: 1px; height: 14px; transform: translate(-50%,-50%); }
.scan-cursor.active .sc-ring { width: 54px; height: 54px; border-radius: 8px; opacity: 1; }
.scan-cursor .sc-label { position: absolute; left: 34px; top: -6px; font-family: var(--ff-mono); font-size: .6rem; letter-spacing: .18em; color: #fff; white-space: nowrap; opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s; }
.scan-cursor.labeled .sc-label { opacity: 1; transform: none; }

/* ---------- ABERTURA DESENHADA (boot) ---------- */
.boot { position: fixed; inset: 0; z-index: 8000; background: #050608; display: grid; place-items: center; transition: opacity .8s var(--ease), visibility .8s; }
.boot.done { opacity: 0; visibility: hidden; }
.boot-inner { width: min(440px, 74vw); text-align: center; }
.boot svg { width: 100%; overflow: visible; }
.boot .draw { fill: none; stroke: #eef1f4; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: var(--len,600); stroke-dashoffset: var(--len,600); animation: bootdraw 1.5s var(--ease) forwards; }
.boot .draw.d2 { animation-delay: .18s; } .boot .draw.d3 { animation-delay: .34s; } .boot .draw.d4 { animation-delay: .5s; }
.boot .logo-letter { fill: #eef1f4; opacity: 0; animation: bootfill .5s var(--ease) forwards; animation-delay: 1.5s; }
.boot .boot-cap { font-family: var(--ff-mono); font-size: .64rem; letter-spacing: .34em; color: var(--fg-mute); margin-top: 22px; opacity: 0; animation: bootfill .6s ease forwards; animation-delay: 1.7s; }
.boot .boot-bar { width: 100%; height: 1px; background: var(--line); margin-top: 18px; position: relative; overflow: hidden; }
.boot .boot-bar::after { content:""; position:absolute; inset:0; background: var(--acc); transform-origin: left; animation: bootbar 2s var(--ease) forwards; }
@keyframes bootdraw { to { stroke-dashoffset: 0; } }
@keyframes bootfill { to { opacity: 1; } }
@keyframes bootbar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) and (max-width: 1px) { .boot { display: none; } }

/* ---------- HERO CANVAS (malha respirando) ---------- */
.hero-mesh { position: absolute; inset: 0; z-index: 1; }
.hero-mesh canvas { width: 100%; height: 100%; display: block; }
.hero .hero-inner { z-index: 3; }
.hero-tag { position: absolute; top: 96px; right: var(--gut); z-index: 3; font-family: var(--ff-mono); font-size: .64rem; letter-spacing: .22em; color: var(--fg-mute); display: flex; align-items: center; gap: 10px; }
.hero-tag .live-dot { width: 7px; height: 7px; border-radius: 50%; background: #37d67a; box-shadow: 0 0 10px #37d67a; animation: pulse 2s infinite; }
@media (max-width: 700px){ .hero-tag { display: none; } }

/* ---------- MÓDULOS COMO EQUIPAMENTO ---------- */
.sol-panel .sol-body .status { display: flex; align-items: center; gap: 8px; font-family: var(--ff-mono); font-size: .72rem; color: #37d67a; margin-top: 14px; letter-spacing: .1em; }
.sol-panel .sol-body .status .d { width: 7px; height: 7px; border-radius: 50%; background: #37d67a; box-shadow: 0 0 8px #37d67a; animation: pulse 2s infinite; }
.sol-panel .sol-readout { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 16px; border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; }
.sol-panel .sol-readout div { background: var(--bg-1); padding: 10px 12px; font-family: var(--ff-mono); font-size: .7rem; color: var(--fg-mute); display: flex; justify-content: space-between; gap: 10px; }
.sol-panel .sol-readout b { color: var(--fg); font-weight: 500; }
.sol-tab .num { color: var(--acc); }
.sol-tab.active::before, .method-step.on .node, .live-fill { }

/* ---------- OPERAÇÕES EXECUTADAS: dado-primeiro ---------- */
.op-cases { display: grid; gap: 20px; margin-top: 44px; }
.op-case { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-1); }
.op-case .oc-data { padding: 30px; position: relative; z-index: 2; }
.op-case .oc-tag { font-family: var(--ff-mono); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--acc); }
.op-case .oc-title { font-size: 1.5rem; font-weight: 550; margin: 14px 0 20px; letter-spacing: -.02em; }
.op-case .oc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; }
.op-case .oc-grid > div { background: var(--bg-2); padding: 14px 16px; }
.op-case .oc-k { font-family: var(--ff-mono); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--acc-deep); }
.op-case .oc-v { font-size: 1.05rem; font-weight: 500; margin-top: 4px; font-family: var(--ff-mono); }
.op-case .oc-media { position: relative; overflow: hidden; background: var(--bg-2); min-height: 260px; }
.op-case .oc-media .glyph { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--ff-mono); color: var(--bg-3); font-size: 3.4rem; font-weight: 700; background: radial-gradient(80% 70% at 50% 20%, rgba(30,95,168,.22), transparent 60%), repeating-linear-gradient(45deg, var(--bg-2), var(--bg-2) 20px, var(--bg-1) 20px, var(--bg-1) 40px); clip-path: inset(0 0 0 0); transform: translateY(24px); opacity: 0; transition: transform 1s var(--ease), opacity 1s var(--ease); }
.op-case.shown .oc-media .glyph { transform: none; opacity: 1; }
.op-case .oc-media::after { content:"IMAGEM DA EXECUÇÃO"; position: absolute; left: 14px; bottom: 12px; z-index: 2; font-family: var(--ff-mono); font-size: .6rem; letter-spacing: .16em; color: var(--fg-faint); }
.op-case .oc-result { margin-top: 20px; font-family: var(--ff-mono); font-size: .82rem; color: var(--acc-bright); }
@media (max-width: 820px) { .op-case { grid-template-columns: 1fr; } .op-case .oc-media { order: 2; min-height: 200px; } }

/* ---------- NÚMEROS COMO HUD / RADAR ---------- */
.hud-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 44px; }
.gauge { border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 24px; background: var(--bg-1); text-align: center; position: relative; }
.gauge-ring { width: 128px; height: 128px; margin: 0 auto 16px; position: relative; }
.gauge-ring svg { transform: rotate(-90deg); }
.gauge-ring .bg { fill: none; stroke: var(--line-soft); stroke-width: 6; }
.gauge-ring .val { fill: none; stroke: var(--acc); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 327; transition: stroke-dashoffset 1.6s var(--ease); filter: drop-shadow(0 0 6px var(--acc-glow)); }
.gauge-ring .center { position: absolute; inset: 0; display: grid; place-items: center; }
.gauge-ring .center .g-val { font-size: 1.7rem; font-weight: 650; letter-spacing: -.03em; font-family: var(--ff-mono); }
.gauge .g-label { font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-mute); }
.gauge .g-trend { font-size: 1.6rem; color: var(--acc); font-weight: 600; }
@media (max-width: 820px) { .hud-grid { grid-template-columns: repeat(2, 1fr); } }

/* dropdown head + nós */
.dropdown .drop-head { font-family: var(--ff-mono); font-size: .6rem; letter-spacing: .2em; color: var(--fg-faint); padding: 8px 12px 10px; }
.dropdown a .di { color: var(--acc); font-size: .8rem; }

/* seções com data-accent: leve tinta na borda superior */
[data-accent="hvac"]  { --acc: var(--hvac); }
[data-accent="pv"]    { --acc: var(--pv);  --acc-bright: #ffc75a; --acc-glow: rgba(245,176,42,.3); }
[data-accent="spk"]   { --acc: var(--spk); --acc-bright: #ff8b85; --acc-glow: rgba(255,90,82,.3); }
[data-accent="civil"] { --acc: var(--civil); --acc-bright: #fff; --acc-glow: rgba(233,237,242,.25); }

/* =========================================================
   TEMA REF — ÍNDIGO / VIOLETA / GLASSMORPHISM (override global)
   ========================================================= */
:root {
  --bg:            #070a1e;
  --bg-1:          #0d1230;
  --bg-2:          #121738;
  --bg-3:          #1a2046;
  --line:          rgba(255,255,255,.11);
  --line-soft:     rgba(255,255,255,.06);

  --fg:            #eef0fb;
  --fg-soft:       #c4c8ec;
  --fg-mute:       #8e93c2;
  --fg-faint:      #5c6190;

  --acc:           #7c83ff;
  --acc-bright:    #aab0ff;
  --acc-deep:      #5d5af0;
  --acc-glow:      rgba(124,131,255,.42);
  --violet:        #8b5cf6;
  --grad:          linear-gradient(135deg, #9aa0ff, #6d6afc 55%, #7c5cf0);

  /* painel claro (lavanda) */
  --lp:            #eaecfb;
  --lp-2:          #f4f5fe;
  --lp-fg:         #1a1f43;
  --lp-soft:       #3b4173;
  --lp-mute:       #6d7299;
  --lp-line:       rgba(26,31,67,.10);

  --hvac: #6ea8ff; --pv: #f0b24a; --spk: #ff6b8a; --civil: #c9ccf5;
}

body {
  background:
    radial-gradient(58% 46% at 8% -4%, rgba(96,74,236,.42), transparent 60%),
    radial-gradient(46% 40% at 102% 6%, rgba(58,96,224,.30), transparent 60%),
    radial-gradient(70% 60% at 50% 120%, rgba(90,70,220,.18), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
::selection { background: var(--acc); color: #0a0e28; }

/* botões → pill + gradiente */
.btn { border-radius: 40px; }
.btn--primary { background: var(--grad); color: #fff; box-shadow: 0 10px 30px -10px var(--acc-glow); }
.btn--primary:hover { background: var(--grad); filter: brightness(1.08); box-shadow: 0 14px 40px -10px var(--acc-glow); }
.btn--ghost { border-color: var(--line); }
.btn--ghost:hover { border-color: var(--acc); color: var(--acc-bright); }

/* header → transparente, vidro no scroll */
.site-header.scrolled { background: rgba(12,16,44,.7); backdrop-filter: blur(16px) saturate(150%); border-bottom-color: var(--line-soft); }
.brand .brand-mark { border-color: var(--acc); color: var(--acc-bright); background: rgba(124,131,255,.08); }
.nav-cta { background: var(--grad); color: #fff; border-radius: 40px; }

/* eyebrow em roxo suave */
.eyebrow { color: var(--acc-bright); }
.eyebrow::before { background: var(--acc); }

/* =========================================================
   SHELL + PAINÉIS ARREDONDADOS EMPILHADOS
   ========================================================= */
.shell { max-width: 1200px; margin: 0 auto; padding: 88px clamp(12px, 2.5vw, 22px) 40px; display: flex; flex-direction: column; gap: 16px; }
.rpanel { border-radius: 30px; position: relative; overflow: hidden; }
.rpanel-inner { padding: clamp(30px, 5vw, 68px); }

/* painel escuro (vidro) */
.panel-dark { background: linear-gradient(180deg, rgba(20,26,64,.72), rgba(11,15,40,.72)); border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 40px 90px -50px rgba(0,0,0,.8); backdrop-filter: blur(8px); }

/* painel claro (lavanda) */
.panel-light { background: linear-gradient(180deg, var(--lp-2), var(--lp)); color: var(--lp-fg); border: 1px solid rgba(255,255,255,.6); box-shadow: 0 40px 90px -60px rgba(40,30,120,.5); }
.panel-light h1, .panel-light h2, .panel-light h3, .panel-light h4 { color: var(--lp-fg); }
.panel-light .lead { color: var(--lp-soft); }
.panel-light p { color: var(--lp-soft); }
.panel-light .eyebrow { color: var(--acc-deep); }
.panel-light .eyebrow::before { background: var(--acc-deep); }
.panel-light .mute { color: var(--lp-mute); }
.panel-light .btn--ghost { border-color: var(--lp-line); color: var(--lp-fg); }
.panel-light .btn--ghost:hover { border-color: var(--acc-deep); color: var(--acc-deep); }
.panel-light .link-more { color: var(--acc-deep); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }

/* =========================================================
   HERO REF (esfera 3D)
   ========================================================= */
.hero-ref { min-height: unset; }
.hero-ref .rpanel-inner { padding-block: clamp(48px, 8vw, 104px); }
.hero-ref-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
.hero-ref h1 { font-size: clamp(2.3rem, 5.2vw, 4rem); letter-spacing: -.035em; line-height: 1.04; }
.hero-ref h1 .accent { background: linear-gradient(120deg, #aab0ff, #8b5cf6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-ref .lead { margin-top: 22px; max-width: 42ch; }
.hero-ref .hero-actions { margin-top: 34px; }

.sphere-wrap { position: relative; display: grid; place-items: center; min-height: 380px; }
.sphere { width: clamp(240px, 32vw, 400px); aspect-ratio: 1; border-radius: 50%; position: relative;
  background: radial-gradient(circle at 34% 28%, #c9c4ff 0%, #8b7cf5 22%, #5b47d6 46%, #2a1f8c 68%, #120c44 100%);
  box-shadow: inset -26px -30px 70px rgba(0,0,0,.55), inset 20px 18px 60px rgba(180,170,255,.25), 0 40px 100px -30px rgba(90,60,230,.6), 0 0 140px rgba(120,90,240,.4);
  animation: floaty 7s ease-in-out infinite;
}
.sphere::before { content: ""; position: absolute; top: 16%; left: 22%; width: 26%; height: 20%; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.7), transparent 70%); filter: blur(6px); }
.sphere-ring { position: absolute; top: 50%; left: 50%; width: 150%; height: 150%; transform: translate(-50%,-50%) rotate(68deg) scaleY(.32); border-radius: 50%; border: 2px solid rgba(160,150,255,.55); box-shadow: 0 0 26px rgba(150,135,255,.5); }
.sphere-ring.r2 { width: 172%; height: 172%; border-color: rgba(140,120,255,.22); }
@keyframes floaty { 50% { transform: translateY(-14px); } }
.dots-accent { position: absolute; right: 6%; bottom: 12%; width: 90px; height: 60px; background-image: radial-gradient(rgba(150,140,255,.55) 1.4px, transparent 1.6px); background-size: 13px 13px; opacity: .7; }

/* =========================================================
   FEATURE / MÓDULOS (cards com thumbnail 3D)
   ========================================================= */
.ref-split { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.feat-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.feat-card { text-align: left; }
.feat-thumb { aspect-ratio: 4/3; border-radius: 18px; position: relative; overflow: hidden; border: 1px solid rgba(255,255,255,.5); box-shadow: 0 20px 40px -24px rgba(40,30,120,.6); }
.feat-thumb::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 60px rgba(10,8,40,.5); }
.ft-hvac  { background: radial-gradient(120% 90% at 30% 20%, #6d7bff, #2a1f8c 55%, #0e0a34), conic-gradient(from 200deg at 70% 80%, rgba(120,140,255,.5), transparent 40%); }
.ft-pv    { background: radial-gradient(120% 90% at 70% 20%, #8b7cf5, #3a2ea8 55%, #100b3c); }
.ft-spk   { background: radial-gradient(90% 90% at 50% 40%, #b8b0ff, #5b47d6 40%, #140f45 80%); }
.ft-civil { background: linear-gradient(140deg, #4a5cff, #2a1f8c 60%, #0e0a34); }
.feat-thumb .glyph3d { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--ff-mono); font-weight: 700; font-size: 2rem; color: rgba(255,255,255,.85); text-shadow: 0 4px 20px rgba(0,0,0,.5); }
.feat-card h4 { margin-top: 16px; font-size: 1.05rem; }
.panel-light .feat-card h4 { color: var(--lp-fg); }
.feat-card p { font-size: .85rem; margin-top: 4px; }

/* =========================================================
   BLOCO "40 ANOS" + ISOMÉTRICO
   ========================================================= */
.iso-wrap { display: grid; place-items: center; }
.iso-wrap svg { width: 100%; max-width: 420px; filter: drop-shadow(0 30px 40px rgba(60,40,160,.3)); }

/* =========================================================
   MÉTRICAS (onda de partículas)
   ========================================================= */
.wave-panel { position: relative; }
.wave-panel .wave-canvas { position: absolute; inset: 0; z-index: 0; }
.wave-panel .wave-canvas canvas { width: 100%; height: 100%; }
.wave-panel .rpanel-inner { position: relative; z-index: 2; }
.wave-panel::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(11,15,40,.4), rgba(11,15,40,.1)); pointer-events: none; }
.ref-stats { display: grid; grid-template-columns: 1.1fr 1.9fr; gap: 40px; align-items: center; }
.ref-stats-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ref-stat .n { font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 650; letter-spacing: -.03em; background: linear-gradient(180deg, #fff, #c4c8ec); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ref-stat .l { color: var(--fg-mute); font-size: .82rem; margin-top: 8px; max-width: 18ch; }

/* =========================================================
   RECONHECIMENTO (troféu + louros)
   ========================================================= */
.awards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.award { text-align: center; position: relative; padding: 10px; }
.laurel { position: relative; display: inline-grid; place-items: center; width: 108px; height: 88px; }
.laurel svg.wreath { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--acc-deep); opacity: .8; }
.laurel .a-ic { color: var(--acc-deep); }
.panel-light .award h4 { font-size: 1rem; margin-top: 8px; }
.panel-light .award p { font-size: .78rem; color: var(--lp-mute); }
.trophy { display: grid; place-items: center; }
.trophy svg { width: 130px; filter: drop-shadow(0 24px 30px rgba(60,40,160,.4)); }

/* light-panel readouts / small ui recolor */
.panel-light .badge-note { color: #8a5a10; border-color: rgba(160,110,20,.3); background: rgba(240,170,40,.1); }

@media (max-width: 900px) {
  .hero-ref-grid, .ref-split, .ref-stats { grid-template-columns: 1fr; }
  .sphere-wrap { min-height: 300px; order: -1; }
  .feat-cards { grid-template-columns: 1fr 1fr; }
  .ref-stats-nums { grid-template-columns: repeat(3, 1fr); }
  .awards-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .feat-cards { grid-template-columns: 1fr; } .ref-stats-nums { grid-template-columns: 1fr !important; gap: 24px; } }

/* a linha viva continua, porém discreta neste tema */
.live-rail { background: rgba(255,255,255,.08); }

/* segmentos no painel claro */
.seg-light > div { border: 1px solid var(--lp-line); border-radius: 14px; padding: 22px 18px; background: rgba(255,255,255,.5); transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; min-height: 92px; display: flex; align-items: flex-end; }
.seg-light > div b { color: var(--lp-fg); font-weight: 600; font-size: 1rem; }
.seg-light > div:hover { transform: translateY(-4px); border-color: var(--acc); box-shadow: 0 18px 40px -22px rgba(60,40,160,.5); }
@media (max-width: 820px){ .seg-light { grid-template-columns: repeat(2,1fr) !important; } }

/* =========================================================
   REFINO — PALETA NAVY CORPORATIVA + AJUSTES (override final)
   base: navy + branco/cinza · roxo como assinatura, não protagonista
   ========================================================= */
:root {
  --bg:            #081120;
  --bg-1:          #0d1a2e;
  --bg-2:          #12223b;
  --bg-3:          #1a2e4d;
  --line:          rgba(255,255,255,.10);
  --line-soft:     rgba(255,255,255,.055);

  --fg:            #eef2f8;
  --fg-soft:       #bfc9da;
  --fg-mute:       #8492a8;
  --fg-faint:      #55627a;

  --acc:           #5c7cf0;      /* azul corporativo com leve índigo */
  --acc-bright:    #8ba2ff;
  --acc-deep:      #3a56c8;
  --acc-glow:      rgba(92,124,240,.22);   /* glow reduzido */
  --violet:        #8b5cf6;       /* assinatura secundária */
  --grad:          linear-gradient(135deg, #6f8cf5, #3f5fd6);

  /* painel claro → branco/cinza frio (menos lavanda) */
  --lp:            #e9edf3;
  --lp-2:          #f5f7fb;
  --lp-fg:         #14213b;
  --lp-soft:       #384863;
  --lp-mute:       #6b7690;
  --lp-line:       rgba(20,33,59,.10);

  /* áreas em família monocromática azul→roxo (sem âmbar/rosa) */
  --hvac: #6ea3ff; --pv: #7c8cf5; --spk: #9a8bf0; --civil: #c6d0ec;
}

body {
  background:
    radial-gradient(56% 44% at 8% -4%, rgba(70,102,220,.26), transparent 60%),
    radial-gradient(44% 38% at 102% 6%, rgba(44,84,200,.18), transparent 60%),
    radial-gradient(70% 60% at 50% 122%, rgba(60,90,200,.12), transparent 60%),
    var(--bg);
}

/* botões — glow reduzido ~30% */
.btn--primary { box-shadow: 0 8px 20px -12px var(--acc-glow); }
.btn--primary:hover { box-shadow: 0 10px 26px -12px var(--acc-glow); filter: brightness(1.05); }

/* painel escuro → navy sólido, menos vidro roxo */
.panel-dark { background: linear-gradient(180deg, rgba(18,34,59,.78), rgba(10,20,38,.82)); }

/* =========================================================
   CURSOR DISCRETO (Opção 1 + leve lag)
   ========================================================= */
body.has-mini-cursor, body.has-mini-cursor a, body.has-mini-cursor button,
body.has-mini-cursor .sol-tab, body.has-mini-cursor input, body.has-mini-cursor select { cursor: none; }
.mini-cursor { position: fixed; top: 0; left: 0; z-index: 9000; pointer-events: none; }
.mc-ring { position: absolute; width: 28px; height: 28px; border: 1px solid rgba(139,162,255,.5); border-radius: 50%; transition: width .22s var(--ease), height .22s var(--ease), border-color .22s, background .22s, box-shadow .22s; }
.mc-dot { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--acc); }
.mini-cursor.hovering .mc-ring { width: 42px; height: 42px; border-color: var(--acc); background: rgba(92,124,240,.06); box-shadow: 0 0 10px rgba(92,124,240,.2); }
@media (prefers-reduced-motion: reduce) and (max-width: 1px) { .mini-cursor { display: none; } body.has-mini-cursor, body.has-mini-cursor a { cursor: auto; } }

/* =========================================================
   LINHA VIVA — iluminação difusa (fibra óptica), sem neon
   ========================================================= */
.live-fill { box-shadow: none; opacity: .85; }
.live-node { box-shadow: none; }
.live-node::before { content: ""; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; border-radius: 50%; transform: translate(-50%,-50%); background: radial-gradient(circle, color-mix(in srgb, var(--live) 45%, transparent), transparent 68%); filter: blur(4px); }
.live-node::after { background: linear-gradient(90deg, color-mix(in srgb, var(--live) 60%, transparent), transparent); }
.live-readout .lr-area { opacity: .85; }

/* =========================================================
   DROPDOWN SOLUÇÕES — espaçamento, ícones lineares, texto suave
   ========================================================= */
.dropdown { min-width: 320px; padding: 10px; }
.dropdown a { padding: 15px 14px; gap: 14px; align-items: center; }
.dropdown a + a { border-top: 1px solid var(--line-soft); }
.dropdown .di { width: 20px; height: 20px; color: var(--acc-bright); opacity: .85; display: grid; place-items: center; }
.dropdown .di svg { width: 18px; height: 18px; }
.dropdown .dt { font-size: .94rem; font-weight: 500; }
.dropdown .dd { font-size: .74rem; color: var(--fg-faint); }   /* contraste reduzido */
.dropdown .drop-head { color: var(--fg-faint); opacity: .8; padding-bottom: 6px; }

/* =========================================================
   ASSINATURA ⊕ — só onde faz sentido (hero, timeline, CTA)
   ========================================================= */
.sig { display: inline-grid; place-items: center; width: 22px; height: 22px; color: var(--acc); opacity: .42; }
.sig svg { width: 100%; height: 100%; }

/* =========================================================
   RETUNE 3D → família azul/índigo (menos roxo), glows -30%
   ========================================================= */
.sphere {
  background: radial-gradient(circle at 34% 28%, #bcd0ff 0%, #6f86f0 22%, #3a52c8 46%, #1c2c7e 68%, #0c153e 100%);
  box-shadow: inset -24px -28px 60px rgba(0,0,0,.5), inset 18px 16px 50px rgba(160,180,255,.2), 0 30px 80px -30px rgba(60,90,220,.42), 0 0 100px rgba(80,110,230,.26);
}
.sphere-ring { border-color: rgba(140,165,255,.5); box-shadow: 0 0 20px rgba(120,150,255,.4); }
.sphere-ring.r2 { border-color: rgba(120,145,255,.2); }
.dots-accent { background-image: radial-gradient(rgba(130,150,255,.5) 1.4px, transparent 1.6px); }

.ft-hvac  { background: radial-gradient(120% 90% at 30% 20%, #5a7cf5, #1e2f6e 55%, #0c1636); }
.ft-pv    { background: radial-gradient(120% 90% at 70% 20%, #6f7cf0, #24357e 55%, #0e1a3e); }
.ft-spk   { background: radial-gradient(90% 90% at 50% 40%, #9aa6f5, #4453c8 40%, #16204a 80%); }
.ft-civil { background: linear-gradient(140deg, #3f63e8, #1e2f6e 60%, #0c1636); }

.hero-ref h1 .accent { background: linear-gradient(120deg, #8ba2ff, #6f86f0); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* selos/louros e gema em azul-índigo */
.laurel svg.wreath, .laurel .a-ic { color: var(--acc-deep); }

/* áreas: manter --acc-bright/glow coerentes (sem âmbar/rosa) */
[data-accent="hvac"]  { --acc: var(--hvac);  --acc-bright: #9dc0ff; --acc-glow: rgba(110,163,255,.24); }
[data-accent="pv"]    { --acc: var(--pv);    --acc-bright: #a6b2ff; --acc-glow: rgba(124,140,245,.24); }
[data-accent="spk"]   { --acc: var(--spk);   --acc-bright: #b6a8ff; --acc-glow: rgba(154,139,240,.24); }
[data-accent="civil"] { --acc: var(--civil); --acc-bright: #dfe6f7; --acc-glow: rgba(198,208,236,.2); }

/* =========================================================
   CALIBRAÇÃO NAVY FOSCO + PAINÉIS DAS PÁGINAS INTERNAS
   ========================================================= */
:root {
  --bg:            #0b1322;                 /* navy levemente mais claro/fosco */
  --acc:           #5670dd;                 /* azul corporativo dessaturado */
  --acc-bright:    #86a0ff;
  --acc-deep:      #3a52bf;
  --acc-glow:      rgba(86,112,221,.18);    /* glow mais contido */
  --grad:          linear-gradient(135deg, #6a86f0, #3c58cf);
}
body {
  background:
    radial-gradient(56% 44% at 8% -4%, rgba(64,92,190,.20), transparent 60%),
    radial-gradient(44% 38% at 102% 6%, rgba(40,74,175,.13), transparent 60%),
    radial-gradient(70% 60% at 50% 122%, rgba(52,80,175,.10), transparent 60%),
    var(--bg);
}
/* painel escuro → navy fosco sólido (menos vidro) */
.panel-dark { background: linear-gradient(180deg, #16243d, #0f1c31); backdrop-filter: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 40px 90px -55px rgba(0,0,0,.8); }

/* ---- Páginas internas: shell de painéis ---- */
.shell-internal { padding-top: 96px; gap: 16px; }
.panel-soft { background: linear-gradient(180deg, rgba(22,36,60,.55), rgba(13,22,40,.6)); border: 1px solid var(--line); }
.shell-internal > .page-hero { padding-top: clamp(44px, 6vw, 72px) !important; padding-bottom: clamp(40px, 5vw, 64px); }
.shell-internal > .rpanel { border: 1px solid var(--line); }
/* neutraliza bordas full-bleed herdadas dentro dos painéis */
.shell-internal > .rpanel { border-top: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important; }
.shell-internal .section { padding-block: clamp(48px, 7vw, 96px); }

/* =========================================================
   HERO CINEMATOGRÁFICO — BLUEPRINT CAD
   ========================================================= */
.hero-bp { position: relative; min-height: 640px; display: flex; align-items: flex-end; padding: 0; overflow: hidden; }
.bp-stage { position: absolute; inset: 0; z-index: 0; }
.bp-svg { width: 100%; height: 100%; stroke: #c3d4f5; }
.hero-bp::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(15,28,49,.12) 0%, rgba(15,28,49,.30) 42%, rgba(15,28,49,.85) 80%, #0f1c31 100%); }

.hero-bp-text { position: relative; z-index: 3; width: 100%; padding: clamp(28px,5vw,60px); padding-top: clamp(170px, 26vh, 320px); animation: bpFade 1s .6s both; }
.hero-bp-text h1 { max-width: 20ch; font-size: clamp(2rem, 4.3vw, 3.3rem); }
.hero-bp-text .lead { max-width: 50ch; }
.hero-bp-text .sig { margin-bottom: 16px; }

/* traços que se desenham (pathLength=1) */
.bp-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: bpDraw .9s var(--ease) forwards; animation-delay: .2s; }
.d0 { animation-delay: .3s; } .d1 { animation-delay: .7s; } .d2 { animation-delay: 3.6s; }
.sys-hvac .bp-draw   { animation-delay: 1.3s; }
.sys-fire .bp-draw   { animation-delay: 2.0s; }
.sys-energy .bp-draw { animation-delay: 2.7s; }
.bp-connect .bp-draw { animation-delay: 3.5s; }
@keyframes bpDraw { to { stroke-dashoffset: 0; } }

/* rótulos e nós */
.bp-lbl { fill: rgba(175,200,245,.72); stroke: none; font-family: var(--ff-mono); letter-spacing: .1em; opacity: 0; animation: bpFade .6s forwards; }
.bp-building .bp-lbl { animation-delay: 1s; }
.sys-hvac .bp-lbl { animation-delay: 2s; } .sys-fire .bp-lbl { animation-delay: 2.7s; } .sys-energy .bp-lbl { animation-delay: 3.4s; }
.bp-node { fill: #cfe0ff; stroke: none; opacity: 0; animation: bpFade .5s forwards; }
.sys-hvac .bp-node { animation-delay: 1.9s; } .sys-fire .bp-node { animation-delay: 2.6s; } .sys-energy .bp-node { animation-delay: 3.3s; }

/* sistemas esmaecem após a convergência; o prédio permanece */
.sys { animation: bpDim 8s forwards; }
@keyframes bpDim { 0%, 72% { opacity: 1; } 100% { opacity: .34; } }

/* hub de convergência */
.hub-dot { fill: #dbe8ff; stroke: none; opacity: 0; animation: bpFade .5s 3.8s forwards; }
.hub-ring { fill: none; stroke: #9fc0ff; transform-box: fill-box; transform-origin: center; opacity: 0; animation: hubPulse 2.3s 4s infinite; }
@keyframes hubPulse { 0% { transform: scale(.5); opacity: .8; } 100% { transform: scale(3.4); opacity: 0; } }

/* scanner */
.bp-scanner { animation: bpScan 3s var(--ease) forwards; }
@keyframes bpScan { 0% { transform: translateX(150px); opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateX(830px); opacity: 0; } }

/* legenda cinematográfica */
.bp-caption { position: absolute; top: 38px; left: 0; right: 0; height: 18px; text-align: center; z-index: 2; font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .22em; }
.bp-caption .cap { position: absolute; left: 0; right: 0; opacity: 0; color: rgba(180,205,255,.85); }
.cap.c1 { animation: capShow 1.7s .3s forwards; }
.cap.c2 { animation: capShow 1.6s 2s forwards; }
.cap.c3 { color: #dbe8ff; animation: capOn 1s 3.7s forwards; }
@keyframes capShow { 0% { opacity: 0; } 16% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; } }
@keyframes capOn { to { opacity: 1; } }

@keyframes bpFade { to { opacity: 1; } }

@media (max-width: 640px) { .hero-bp { min-height: 560px; } .hero-bp-text { padding-top: clamp(140px, 22vh, 220px); } }

/* acessibilidade / reduced motion: estado final estático */
@media (prefers-reduced-motion: reduce) and (max-width: 1px) {
  .bp-draw { stroke-dashoffset: 0; animation: none; }
  .bp-scanner { display: none; }
  .bp-lbl, .bp-node, .hub-dot { opacity: 1; animation: none; }
  .hub-ring { display: none; }
  .sys { opacity: .5; animation: none; }
  .cap.c1, .cap.c2 { display: none; } .cap.c3 { opacity: 1; animation: none; }
  .hero-bp-text { animation: none; }
}

/* =========================================================
   HERO EDITORIAL — CARROSSEL DE OPERAÇÕES (anexo 2+3)
   ========================================================= */
.hero-ed { position: relative; min-height: 660px; overflow: hidden; padding: 0;
  background: linear-gradient(180deg, #12203a, #0c1830); border: 1px solid var(--line); }
.ed-stage { position: absolute; inset: 0; z-index: 1; }
.ed-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ed-grad { position: absolute; inset: 0; background:
  radial-gradient(60% 80% at 85% 20%, rgba(70,100,200,.22), transparent 60%),
  linear-gradient(90deg, rgba(10,18,34,.2), transparent 40%); }

/* prédio + leader lines */
.ed-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: bpDraw 1s var(--ease) forwards; }
.ed-building .ed-draw:nth-child(1){animation-delay:.2s} .ed-building .ed-draw:nth-child(2){animation-delay:.35s}
.ed-building .ed-draw:nth-child(3){animation-delay:.5s} .ed-building .ed-draw:nth-child(n+4){animation-delay:.65s}
.nt-dot { fill: var(--live); transition: fill .5s; }
.nt-lbl { fill: rgba(200,214,245,.82); letter-spacing: .06em; }
.nt-line { stroke: color-mix(in srgb, var(--live) 70%, #aebfe6); stroke-width: 1; transition: stroke .5s; }
.nt-line.draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: bpDraw .8s var(--ease) forwards; }

/* palavra gigante cruzando o vidro */
.ed-bigword { position: absolute; z-index: 4; top: 34%; left: clamp(20px,4vw,54px);
  font-weight: 800; font-size: clamp(3rem, 9.5vw, 8.2rem); line-height: .9; letter-spacing: -.04em;
  color: #f3f6ff; white-space: nowrap; text-shadow: 0 8px 40px rgba(0,0,0,.45); pointer-events: none; }
.ed-stage.swap .ed-bigword { animation: edWord .7s var(--ease); }
@keyframes edWord { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }

/* painel de vidro (esquerda) */
.ed-glass { position: absolute; z-index: 3; top: 0; bottom: 0; left: 0; width: 45%;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(28px, 3.4vw, 52px);
  background: linear-gradient(120deg, rgba(9,16,30,.72), rgba(12,22,42,.40));
  backdrop-filter: blur(12px) saturate(130%); -webkit-backdrop-filter: blur(12px) saturate(130%);
  border-right: 1px solid rgba(255,255,255,.10); }
.ed-kicker { font-family: var(--ff-mono); font-size: .68rem; letter-spacing: .2em; color: var(--fg-mute); display: inline-flex; align-items: center; gap: 9px; }
.ed-kicker .live-dot { width: 7px; height: 7px; border-radius: 50%; background: #37d67a; box-shadow: 0 0 9px #37d67a; animation: pulse 2s infinite; }
.ed-tagline { font-size: 1rem; color: var(--fg-soft); max-width: 30ch; margin-top: 18px; line-height: 1.5; font-weight: 300; }
.ed-glass-bottom { position: relative; }
.ed-index { font-family: var(--ff-mono); font-size: .8rem; color: var(--fg-mute); letter-spacing: .1em; margin-bottom: 10px; }
.ed-index .ed-cur { color: var(--acc-bright); font-size: 1rem; }
.ed-index .ed-sep { margin: 0 6px; opacity: .5; }
.ed-seg { font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-weight: 600; letter-spacing: -.02em; }
.ed-desc { color: var(--fg-soft); font-size: .95rem; margin: 12px 0 24px; max-width: 40ch; line-height: 1.6; font-weight: 300; }
.ed-glass-bottom.swap .ed-seg { animation: edUp .55s var(--ease); }
.ed-glass-bottom.swap .ed-desc { animation: edUp .55s .06s var(--ease) both; }
.ed-glass-bottom.swap .ed-index { animation: edUp .5s var(--ease); }
@keyframes edUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* navegação */
.ed-nav { position: absolute; z-index: 6; right: clamp(20px,3vw,44px); bottom: clamp(20px,3vw,40px); display: flex; align-items: center; gap: 12px; }
.ed-arrow { width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; color: var(--fg-soft); background: rgba(12,22,42,.4); backdrop-filter: blur(6px); transition: all .25s var(--ease); }
.ed-arrow:hover { border-color: var(--acc); color: var(--acc-bright); background: rgba(86,112,221,.12); }
.ed-dots { display: flex; align-items: center; gap: 10px; margin-left: 8px; }
.ed-dot { width: 8px; height: 8px; transform: rotate(45deg); border: 1px solid var(--fg-mute); background: transparent; transition: all .3s var(--ease); }
.ed-dot.active { background: var(--acc); border-color: var(--acc); box-shadow: 0 0 10px var(--acc-glow); }

@media (max-width: 860px) {
  .hero-ed { min-height: unset; }
  .ed-stage { position: relative; height: 300px; }
  .ed-glass { position: relative; width: 100%; backdrop-filter: none; background: linear-gradient(180deg, rgba(12,22,42,.6), rgba(9,16,30,.9)); border-right: none; border-top: 1px solid var(--line); gap: 22px; }
  .ed-bigword { font-size: clamp(2.4rem, 13vw, 4.5rem); top: unset; bottom: 16px; }
  .ed-nav { position: relative; right: auto; bottom: auto; justify-content: flex-end; padding: 16px clamp(20px,4vw,40px) 0; }
}

/* =========================================================
   REFINO PREMIUM — "Industrial Technology + Luxury Minimalism"
   fundo técnico (petróleo→escuro→preto) · grão · glass discreto
   ========================================================= */
body {
  background:
    radial-gradient(48% 40% at 10% -6%, rgba(28,92,112,.20), transparent 62%),   /* glow petróleo */
    radial-gradient(44% 40% at 100% 2%, rgba(52,96,190,.14), transparent 62%),    /* glow azul */
    linear-gradient(180deg, #0a1822 0%, #0a1220 38%, #070c15 74%, #05070e 100%);  /* petróleo → escuro → quase preto */
  background-attachment: fixed;
}
/* grão extremamente discreto (film grain) — "parece software" */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .028; mix-blend-mode: overlay;
  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.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* glass discreto: blur menor, transparência baixa, borda quase invisível */
.ed-glass { backdrop-filter: blur(8px) saturate(115%); -webkit-backdrop-filter: blur(8px) saturate(115%);
  background: linear-gradient(120deg, rgba(9,16,28,.52), rgba(12,20,38,.26)); border-right-color: rgba(255,255,255,.06); }
.panel-dark { border-color: rgba(255,255,255,.06); }
.ed-arrow { backdrop-filter: blur(6px); background: rgba(10,20,38,.35); }
.site-header.scrolled { background: rgba(9,15,26,.6); }

/* tipografia premium: display mais apertado e leve */
.h-display, .h1, .hero-ed h1 { letter-spacing: -.04em; font-weight: 620; }
.ed-bigword { font-weight: 700; letter-spacing: -.05em; }
body { -webkit-font-smoothing: antialiased; letter-spacing: -.006em; }

/* =========================================================
   MÓDULOS — ENGENHARIA VIVA (hover ilumina o sistema no prédio)
   ========================================================= */
.modules-live .ml-head { max-width: 720px; margin-bottom: clamp(28px, 4vw, 48px); }
.ml-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 4vw, 56px); align-items: center; }

.ml-stage { position: relative; border: 1px solid var(--line-soft); border-radius: 16px; padding: 16px; overflow: hidden;
  background: radial-gradient(85% 80% at 50% 18%, rgba(30,62,110,.16), transparent 62%), rgba(7,12,22,.45); }
.ml-stage::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(150,175,235,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(150,175,235,.05) 1px, transparent 1px);
  background-size: 34px 34px; -webkit-mask-image: radial-gradient(78% 78% at 50% 42%, #000, transparent 82%); mask-image: radial-gradient(78% 78% at 50% 42%, #000, transparent 82%); }
.ml-svg { width: 100%; display: block; position: relative; z-index: 1; }

.ml-sys { opacity: .085; transition: opacity .55s var(--ease), filter .55s var(--ease); }
.ml-sys path, .ml-sys circle { fill: none; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.sys-hvac  { stroke: var(--hvac); }
.sys-pv    { stroke: var(--pv); }
.sys-spk   { stroke: var(--spk); }
.sys-civil { stroke: var(--civil); }
.ml-sys .flow { stroke-dasharray: 0; }
.modules-live[data-active="hvac"]  .sys-hvac  { opacity: 1; filter: drop-shadow(0 0 5px var(--hvac)); }
.modules-live[data-active="pv"]    .sys-pv    { opacity: 1; filter: drop-shadow(0 0 5px var(--pv)); }
.modules-live[data-active="spk"]   .sys-spk   { opacity: 1; filter: drop-shadow(0 0 5px var(--spk)); }
.modules-live[data-active="civil"] .sys-civil { opacity: 1; filter: drop-shadow(0 0 5px var(--civil)); }
.modules-live[data-active="hvac"]  .sys-hvac  .flow { stroke-dasharray: 12 220; animation: flow 3.2s linear infinite; }
.modules-live[data-active="pv"]    .sys-pv    .flow { stroke-dasharray: 12 200; animation: flow 3.2s linear infinite; }
.modules-live[data-active="spk"]   .sys-spk   .flow { stroke-dasharray: 12 260; animation: flow 3.4s linear infinite; }

.ml-tag { position: absolute; left: 20px; bottom: 16px; z-index: 2; display: flex; align-items: center; gap: 9px; font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .16em; color: var(--fg-soft); }
.ml-tag-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hvac); box-shadow: 0 0 9px var(--hvac); transition: background .4s, box-shadow .4s; }
.modules-live[data-active="pv"]    .ml-tag-dot { background: var(--pv);    box-shadow: 0 0 9px var(--pv); }
.modules-live[data-active="spk"]   .ml-tag-dot { background: var(--spk);   box-shadow: 0 0 9px var(--spk); }
.modules-live[data-active="civil"] .ml-tag-dot { background: var(--civil); box-shadow: 0 0 9px var(--civil); }

.ml-list { display: flex; flex-direction: column; gap: 8px; }
.ml-row { display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: center; padding: 16px; border: 1px solid var(--line-soft); border-radius: 12px; transition: all .3s var(--ease); }
.ml-row .ml-ic { color: var(--fg-mute); display: grid; place-items: center; transition: color .3s; }
.ml-row .ml-txt b { font-weight: 550; font-size: 1rem; }
.ml-row .ml-txt small { display: block; color: var(--fg-mute); font-size: .82rem; margin-top: 3px; }
.ml-row .ml-arw { color: var(--fg-faint); transition: transform .3s, color .3s; }
.ml-row.hot { border-color: color-mix(in srgb, var(--rowc) 55%, var(--line)); background: color-mix(in srgb, var(--rowc) 9%, transparent); }
.ml-row.hot .ml-ic { color: var(--rowc); }
.ml-row.hot .ml-arw { color: var(--rowc); transform: translateX(3px); }
.modules-live.touched .ml-row:not(.hot) { opacity: .42; }

@media (max-width: 900px) { .ml-grid { grid-template-columns: 1fr; } .ml-stage { order: -1; } }

/* fix: leader lines do hero não podem ter preenchimento (só traço) */
.ed-notes path, .ed-building path { fill: none; }

/* =========================================================
   HERO CLARO — editorial + vidro iridescente (estilo Milkinside)
   ========================================================= */
.hero-milk {
  position: relative; overflow: hidden; padding: 0; min-height: 640px; color: #1b2545;
  border: 1px solid rgba(255,255,255,.7);
  background:
    radial-gradient(58% 68% at 80% 28%, rgba(150,210,255,.40), transparent 60%),
    radial-gradient(46% 58% at 98% 66%, rgba(160,255,225,.28), transparent 60%),
    radial-gradient(40% 50% at 62% 8%, rgba(190,175,255,.22), transparent 60%),
    linear-gradient(120deg, #eef1f7 0%, #f6f8fc 52%, #edf1f8 100%);
}
.hm-inner { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: space-between;
  min-height: 640px; padding: clamp(30px, 4vw, 58px); }
.hm-kicker { font-family: var(--ff-mono); font-size: .68rem; letter-spacing: .2em; color: #6b7690; display: inline-flex; align-items: center; gap: 9px; }
.hm-kicker .live-dot { width: 7px; height: 7px; border-radius: 50%; background: #2bbd6e; box-shadow: 0 0 9px rgba(43,189,110,.6); animation: pulse 2s infinite; }

.hm-mid { max-width: 60%; }
.hm-title { display: flex; flex-direction: column; font-size: clamp(2rem, 4.6vw, 3.5rem); line-height: 1.04; letter-spacing: -.035em; }
.hm-title .thin { font-weight: 300; color: #5a6a8a; }
.hm-title .bold { font-weight: 700; color: #18213f; }
.hm-dots { display: flex; gap: 11px; margin-top: 30px; }
.hm-dot { width: 9px; height: 9px; border-radius: 50%; border: 1.4px solid #aeb8cd; background: transparent; transition: all .3s var(--ease); }
.hm-dot.active { background: #2b3a66; border-color: #2b3a66; }
.hm-dot:hover { border-color: #2b3a66; }

.hm-teaser { display: grid; grid-template-columns: auto minmax(0,1fr); gap: clamp(28px, 6vw, 96px); max-width: 640px; padding-top: 18px; border-top: 1px solid rgba(27,37,69,.12); }
.hm-teaser .hm-k, .hm-teaser .hm-meta { font-family: var(--ff-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: #808bA6; }
.hm-teaser .hm-seg, .hm-teaser .hm-case { display: block; margin-top: 8px; color: #18213f; font-weight: 600; font-size: .98rem; transition: color .25s; }
.hm-teaser .hm-seg:hover, .hm-teaser .hm-case:hover { color: #3a56c8; }
.hm-teaser.swap .hm-seg, .hm-teaser.swap .hm-meta { animation: edUp .5s var(--ease); }
.hm-teaser.swap .hm-case { animation: edUp .5s .05s var(--ease) both; }

/* cena de vidro à direita */
.hm-scene-wrap { position: absolute; top: 0; right: 0; bottom: 0; width: 60%; z-index: 1; }
.hm-scene { position: absolute; inset: 0; }
.g-block { position: absolute; display: grid; place-items: center; font-weight: 800; letter-spacing: -.04em;
  color: rgba(255,255,255,.4); border: 1px solid rgba(255,255,255,.75); border-radius: 16px;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  box-shadow: 0 44px 90px -34px rgba(80,120,200,.55), inset 0 0 60px rgba(255,255,255,.45), inset 0 2px 10px rgba(255,255,255,.7);
  text-shadow: 0 2px 24px rgba(255,255,255,.6); overflow: hidden; }
.g-block::before { content: ""; position: absolute; inset: 0; opacity: .9;
  background: linear-gradient(135deg, rgba(120,205,255,.62), rgba(150,255,220,.42) 42%, rgba(190,165,255,.6) 82%); }
.g-block::after { content: ""; position: absolute; left: 0; right: 0; top: 52%; bottom: 0;
  background: linear-gradient(180deg, rgba(60,150,255,.55), rgba(30,110,230,.32)); mix-blend-mode: screen; }
.g-block > * , .g-block { }
.gb1 { width: 30%; height: 42%; top: 30%; left: 8%;  font-size: clamp(48px,7vw,120px); transform: perspective(760px) rotateY(-15deg) rotate(-1deg); z-index: 1; }
.gb2 { width: 32%; height: 50%; top: 22%; left: 32%; font-size: clamp(52px,8vw,140px); transform: perspective(760px) rotateY(-15deg); z-index: 3; }
.gb3 { width: 30%; height: 44%; top: 28%; left: 58%; font-size: clamp(48px,7vw,120px); transform: perspective(760px) rotateY(-15deg) rotate(1deg); z-index: 2; }
.g-block span, .g-block { position: absolute; }
.g-block { }
/* letra visível acima dos gradientes */
.gb1, .gb2, .gb3 { }
.g-block { z-index: 1; }
.g-block { }

.hm-sphere { position: absolute; border-radius: 50%; z-index: 4;
  background: radial-gradient(circle at 34% 28%, #ffffff, #e4e9f1 68%, #d3d9e6);
  box-shadow: 0 24px 44px -16px rgba(90,110,160,.4), inset -6px -8px 22px rgba(175,186,208,.55), inset 5px 6px 16px rgba(255,255,255,.8); }
.hm-sphere::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background-image: radial-gradient(rgba(140,152,184,.55) 1px, transparent 1.4px); background-size: 9px 9px; opacity: .45; mix-blend-mode: multiply; }
.s1 { width: 92px; height: 92px; left: 0; top: 44%; }
.s2 { width: 52px; height: 52px; left: 22%; top: 70%; }

.hm-chrome { position: absolute; right: 5%; bottom: 12%; width: 160px; height: 66px; border-radius: 12px; z-index: 4;
  transform: perspective(600px) rotateY(-22deg) rotate(7deg);
  background: linear-gradient(118deg, #eef1f6 0%, #a9b3c6 26%, #f6f8fb 52%, #bcc5d4 74%, #eef1f6 100%);
  box-shadow: 0 28px 46px -18px rgba(80,100,150,.45), inset 0 1px 3px rgba(255,255,255,.9); }
.hm-ribbon { position: absolute; right: -4%; top: 6%; width: 220px; height: 220px; z-index: 0; opacity: .5;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0) 0 6px, rgba(255,255,255,.7) 6px 7px);
  border-radius: 50%; -webkit-mask-image: radial-gradient(closest-side, transparent 58%, #000 60%); mask-image: radial-gradient(closest-side, transparent 58%, #000 60%); transform: rotate(-18deg); }

/* letra dentro do bloco precisa ficar acima dos gradientes ::before/::after */
.gb1, .gb2, .gb3 { isolation: isolate; }
.g-block { color: rgba(255,255,255,.55); }
.g-block::before, .g-block::after { z-index: -1; }

/* (header permanece com texto claro: no topo ele fica sobre a faixa escura acima do hero) */

@media (max-width: 900px) {
  .hm-inner { min-height: unset; gap: 30px; }
  .hm-mid { max-width: 100%; }
  .hm-scene-wrap { position: relative; width: 100%; height: 300px; order: 2; }
  .hm-teaser { grid-template-columns: 1fr; gap: 18px; }
}

/* =========================================================
   HERO CLARO — blueprint azul que se desenha no hover do "AMS"
   ========================================================= */
.hm-blueprint { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; opacity: 0; pointer-events: none; transition: opacity .45s var(--ease); }
.hm-blueprint .hb-l { fill: none; stroke: #1e3f7d; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1400; stroke-dashoffset: 1400; }
.hm-blueprint circle.hb-l { stroke-dasharray: none; stroke-dashoffset: 0; opacity: 0; transition: opacity .3s; }
.hm-blueprint .flow { stroke: #2f6be0; }
.hm-blueprint .hb-t { fill: #1e3f7d; font-family: var(--ff-mono); font-size: 11px; letter-spacing: .08em; opacity: 0; transition: opacity .3s; }
.hm-blueprint .lbl-line { stroke: rgba(30,63,125,.5); stroke-width: 1; }

/* dispara no hover da cena do "AMS" */
.hm-scene-wrap:hover .hm-blueprint { opacity: 1; }
.hm-scene-wrap:hover .hm-blueprint .hb-l { stroke-dashoffset: 0; transition: stroke-dashoffset .9s var(--ease); }
.hm-scene-wrap:hover .hm-blueprint .hb-l:nth-child(n+6)  { transition-delay: .12s; }
.hm-scene-wrap:hover .hm-blueprint .hb-l:nth-child(n+9)  { transition-delay: .26s; }
.hm-scene-wrap:hover .hm-blueprint .hb-l:nth-child(n+14) { transition-delay: .42s; }
.hm-scene-wrap:hover .hm-blueprint circle.hb-l { opacity: 1; transition: opacity .3s .5s; }
.hm-scene-wrap:hover .hm-blueprint .hb-t { opacity: .82; transition: opacity .4s .6s; }
/* esmaece o vidro para o blueprint aparecer */
.hm-scene-wrap:hover .g-block::before { opacity: .32; transition: opacity .45s; }
.hm-scene-wrap:hover .g-block { color: rgba(255,255,255,.12); }
.hm-scene-wrap { cursor: none; }

/* =========================================================
   HERO "O PRÉDIO PENSA" — CAD nasce + ciclo de segmentos
   ========================================================= */
.hero-think { position: relative; overflow: hidden; padding: 0; min-height: 600px; }
.ht-grid { display: grid; grid-template-columns: 1fr 1.08fr; gap: clamp(24px,4vw,52px); align-items: center; min-height: 600px; padding: clamp(30px,4vw,58px); }
.ht-text { max-width: 560px; }
.ht-brand { font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .3em; color: var(--acc-bright); }
.ht-title { font-size: clamp(2rem, 4.4vw, 3.25rem); letter-spacing: -.035em; font-weight: 650; margin: 18px 0; line-height: 1.05; }
.ht-title .accent { color: var(--fg-mute); }
.ht-actions { margin: 30px 0 26px; }
.ht-segs { display: flex; flex-wrap: wrap; gap: 8px; }
.ht-seg { font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .04em; padding: 8px 14px; border: 1px solid var(--line-soft); border-radius: 40px; color: var(--fg-mute); transition: all .3s var(--ease); }
.ht-seg:hover { color: var(--fg-soft); border-color: var(--line); }
.ht-seg.active { border-color: var(--acc); color: var(--acc-bright); background: rgba(86,112,221,.12); }

.ht-scene { position: relative; }
.ht-svg { width: 100%; display: block; stroke: #c3d4f5; }
.ht-base path, .ht-sys path, .ht-detail path, .ht-cad path { stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ht-base .struct { stroke: rgba(160,180,225,.30); }
.sys-hvac { stroke: var(--hvac); }
.sys-spk  { stroke: var(--spk); }
.sys-pv   { stroke: var(--pv); }
.sys-pipe { stroke: #8fb4e8; }
.ht-sys { filter: drop-shadow(0 0 4px rgba(120,150,240,.22)); }

.ht-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.ht-svg.playing .ht-draw { animation: bpDraw .85s var(--ease) forwards; }
.ht-svg.playing .b0 { animation-delay: .1s; }
.ht-svg.playing .b1 { animation-delay: .45s; }
.ht-svg.playing .b2 { animation-delay: .8s; }
.ht-svg.playing .b3 { animation-delay: 1.15s; }
.ht-svg.playing .b4 { animation-delay: 1.5s; }
.ht-svg.playing .b5 { animation-delay: 1.85s; }
.ht-dot { fill: var(--spk); stroke: none; opacity: 0; }
.ht-svg.playing .ht-dot { animation: bpFade .4s 1.7s forwards; }
.ht-cad-t { fill: var(--fg-faint); font-family: var(--ff-mono); font-size: 11px; letter-spacing: .14em; opacity: 0; }
.ht-svg.playing .ht-cad-t { animation: bpFade .5s 2.1s forwards; }

/* chips de status */
.ht-chip { position: absolute; z-index: 3; background: rgba(12,20,38,.72); border: 1px solid var(--line); border-radius: 10px; padding: 9px 13px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transform: translateY(8px); box-shadow: 0 16px 34px -18px rgba(0,0,0,.6); }
.ht-chip b { display: block; font-family: var(--ff-mono); font-size: .64rem; letter-spacing: .12em; color: var(--fg-soft); text-transform: uppercase; margin-bottom: 3px; }
.ht-chip span { color: #37d67a; font-size: .74rem; white-space: nowrap; }
.hero-think .ht-chip { animation: chipIn .5s var(--ease) forwards; }
.ht-chip.c1 { top: 8%;  left: -2%;  animation-delay: 1.5s; }
.ht-chip.c2 { top: 34%; right: -2%; animation-delay: 1.8s; }
.ht-chip.c3 { bottom: 24%; left: -3%; animation-delay: 2.1s; }
.ht-chip.c4 { bottom: 15%; right: 4%;  animation-delay: 2.4s; }
@keyframes chipIn { to { opacity: 1; transform: none; } }

.ht-seglabel { position: absolute; z-index: 3; top: 14px; right: 16px; font-family: var(--ff-mono); font-size: .68rem; letter-spacing: .16em; color: var(--fg-soft); display: flex; align-items: center; gap: 9px; }
.ht-seg-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 8px var(--acc); animation: pulse 2s infinite; }

@media (max-width: 900px) {
  .ht-grid { grid-template-columns: 1fr; min-height: unset; }
  .ht-scene { order: 2; }
  .ht-chip.c1 { left: 2%; } .ht-chip.c2 { right: 2%; } .ht-chip.c3 { left: 2%; }
}
/* Celular: os cards deixam de flutuar sobre o diagrama e viram uma grade limpa */
@media (max-width: 640px) {
  .hero-think { min-height: unset; }
  .ht-scene { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; margin-top: 12px; }
  .ht-svg { grid-column: 1 / -1; }
  .ht-chip { position: static; opacity: 1; transform: none; animation: none !important; width: auto; box-shadow: 0 10px 22px -14px rgba(50,70,170,.35); }
  .ht-chip span { white-space: normal; }
  .ht-seglabel { display: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 1px) {
  .ht-draw { stroke-dashoffset: 0; } .ht-dot, .ht-cad-t, .ht-chip { opacity: 1; transform: none; }
}

/* =========================================================
   TEMA CLARO — estética DEXT (lavanda/branco, azul, arejado)
   override final: inverte o site de escuro para claro
   ========================================================= */
:root {
  --bg:            #eaeefb;
  --bg-1:          #f2f4fd;
  --bg-2:          #ffffff;
  --bg-3:          #e6eafa;
  --line:          rgba(30,45,110,.12);
  --line-soft:     rgba(30,45,110,.07);

  --fg:            #161d3a;
  --fg-soft:       #3d486a;
  --fg-mute:       #6f7a99;
  --fg-faint:      #9aa2bd;

  --acc:           #1847eb;
  --acc-bright:    #1847eb;
  --acc-deep:      #1330a8;
  --acc-glow:      rgba(24,71,235,.26);
  --grad:          linear-gradient(135deg, #4f74ff, #1847eb);

  --hvac: #1847eb; --pv: #4f74ff; --spk: #86a0ff; --civil: #6b6b6b;
}
body {
  color: var(--fg);
  background:
    radial-gradient(54% 46% at 8% -4%, rgba(120,150,255,.30), transparent 60%),
    radial-gradient(44% 40% at 100% 4%, rgba(150,170,255,.24), transparent 60%),
    radial-gradient(70% 60% at 50% 120%, rgba(140,160,255,.16), transparent 60%),
    linear-gradient(180deg, #edf0fc 0%, #f5f7fe 55%, #eef1fc 100%);
}
body::after { display: none; }              /* grão fica sujo no claro */
::selection { background: var(--acc); color: #fff; }

/* ---- header claro ---- */
.site-header .nav-menu > li > a { color: var(--fg-soft); }
.site-header .nav-menu > li > a:hover, .site-header .nav-menu > li.active > a { color: var(--fg); }
.site-header .brand { color: var(--fg); }
.site-header .brand small { color: var(--fg-mute); }
.site-header .brand-mark { border-color: var(--acc); color: var(--acc); background: rgba(24,71,235,.08); }
.site-header .nav-toggle { border-color: var(--line); }
.site-header .nav-toggle span { background: var(--fg); }
.site-header.scrolled { background: rgba(255,255,255,.72); border-bottom-color: var(--line); backdrop-filter: blur(14px) saturate(150%); }
.dropdown { background: #fff; border-color: var(--line); box-shadow: 0 26px 60px -26px rgba(50,70,160,.4); }
.dropdown a:hover { background: var(--bg-3); }
.dropdown .dt { color: var(--fg); } .dropdown .dd { color: var(--fg-mute); }
.mobile-menu { background: #fff; } .mobile-menu a { color: var(--fg); }

/* ---- painéis ---- */
.rpanel { border: 1px solid rgba(255,255,255,.7); }
.panel-dark { background: linear-gradient(180deg, #e8ecfb, #f1f3fd); color: var(--fg);
  border: 1px solid rgba(255,255,255,.8); box-shadow: 0 34px 80px -46px rgba(50,70,170,.35); backdrop-filter: none; }
.panel-light { background: #ffffff; color: var(--fg); box-shadow: 0 34px 80px -50px rgba(50,70,170,.3); }
.panel-soft { background: #f5f7fe; border-color: var(--line); }
.shell-internal > .page-hero { background: linear-gradient(180deg, #e8ecfb, #f1f3fd); }

/* eyebrow / mono */
.eyebrow { color: var(--acc-deep); } .eyebrow::before { background: var(--acc-deep); }
.pill { color: var(--acc-deep); border-color: rgba(24,71,235,.35); }

/* ---- linha viva / cursor no claro ---- */
.live-rail { background: rgba(30,45,110,.12); }
.mc-ring { border-color: rgba(24,71,235,.55); }

/* ---- HERO "prédio pensa" no claro ---- */
.hero-think { background: linear-gradient(150deg, #e6eafc 0%, #f2f4fe 60%, #eaeffb 100%); }
.hero-think .ht-svg { stroke: #33489e; }
.hero-think .ht-base .struct { stroke: rgba(40,60,140,.22); }
.hero-think .ht-sys { filter: none; }
.hero-think .ht-cad-t { fill: rgba(40,60,140,.55); }
.hero-think .ht-brand { color: var(--acc-deep); }
.hero-think .ht-title { color: var(--fg); }
.hero-think .ht-title .accent { color: var(--fg-mute); }
.hero-think .ht-seg { color: var(--fg-mute); border-color: var(--line); }
.hero-think .ht-seg.active { border-color: var(--acc); color: var(--acc-deep); background: rgba(24,71,235,.1); }
.hero-think .ht-seglabel { color: var(--fg-soft); }
.ht-chip { background: #ffffff; border: 1px solid var(--line); box-shadow: 0 18px 38px -20px rgba(50,70,170,.4); }
.ht-chip b { color: var(--fg-mute); } .ht-chip span { color: #17a05a; }
.ht-grid .lead { color: var(--fg-soft); }

/* ---- MÓDULOS engenharia viva no claro ---- */
.ml-stage { background: radial-gradient(85% 80% at 50% 18%, rgba(120,150,255,.18), transparent 62%), #f3f5fe; border-color: var(--line); }
.ml-stage::before { background-image: linear-gradient(rgba(40,60,140,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(40,60,140,.06) 1px, transparent 1px); }
.ml-outline { stroke: rgba(40,60,140,.28); }
.ml-tag { color: var(--fg-soft); }
.ml-row { border-color: var(--line); } .ml-row .ml-txt small { color: var(--fg-mute); }

/* ---- métricas / onda no claro ---- */
.wave-panel::after { background: linear-gradient(180deg, rgba(233,237,251,.3), rgba(233,237,251,.05)); }
.ref-stat .n { background: linear-gradient(180deg, #1b2447, #4a5680); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ---- operações executadas (dado-primeiro) no claro ---- */
.op-case { background: #fff; } .op-case .oc-grid > div { background: #f5f7fe; }
.op-case .oc-media { background: #eef1fb; }
.op-case .oc-media .glyph { background: radial-gradient(80% 70% at 50% 20%, rgba(24,71,235,.18), transparent 60%), repeating-linear-gradient(45deg, #eef1fb, #eef1fb 20px, #f6f8fe 20px, #f6f8fe 40px); color: #cdd6f2; }

/* ---- rodapé claro ---- */
.site-footer { background: #eef1fc; border-top-color: var(--line); }

/* ---- botões: ghost no claro ---- */
.btn--ghost { border-color: var(--line); color: var(--fg); }
.btn--ghost:hover { border-color: var(--acc); color: var(--acc-deep); }
.link-more { color: var(--acc-deep); }
.badge-note { color: #8a5a10; }

/* =========================================================
   MÉTODO — tudo em uma visualização (sem scroll) + respiro
   ========================================================= */
.method-step .st-ttl { font-size: clamp(.9rem, 1vw, 1.06rem); line-height: 1.2; }
.method-step .st-desc { font-size: clamp(.76rem, .9vw, .84rem); }
/* Compacta um pouco o horizontal em telas médias */
@media (max-width: 1180px) { .method-step { padding: 0 10px 0 0; } .method-step .node { width: 15px; height: 15px; } }
/* Linha do tempo vertical só no celular */
@media (max-width: 720px) {
  .method-rail { top: 8px; bottom: 8px; left: 6.5px; right: auto; width: 3px; height: auto; }
  .method-rail .fill { inset: 0 0 auto 0; width: 100%; height: 0; transition: height 1.6s cubic-bezier(.4,.08,.2,1); }
  .method-track.run .method-rail .fill { height: 100%; }
  .method-rail .comet { top: 0; left: 50%; transition: top 1.6s cubic-bezier(.4,.08,.2,1); }
  .method-track.run .method-rail .comet { top: 100%; left: 50%; }
  .method-steps { grid-template-columns: 1fr; gap: 0; }
  .method-step { display: flex; gap: 18px; padding: 0 0 30px 0; }
  .method-step:last-child { padding-bottom: 0; }
  .method-step .node { flex: none; margin: 3px 0 0 0; }
  .method-step .st-body { transform: translateX(14px); }
  .method-step.on .st-body { transform: none; }
}
@media (max-width: 480px) { .method-step .st-ttl { font-size: 1rem; } }

/* =========================================================
   RITMO VISUAL — base clara + aberturas escuras estratégicas
   hero escuro · risco/método escuros · métricas azul · CTA azul profundo
   ========================================================= */
/* contexto escuro reutilizável: re-escurece as variáveis dentro do painel */
.hero-think, .panel-ink, .panel-tech, .panel-deep {
  --fg:#eef1fb; --fg-soft:#c4cbe8; --fg-mute:#949dc4; --fg-faint:#626b95;
  --line:rgba(255,255,255,.11); --line-soft:rgba(255,255,255,.06);
  --bg-1:#0e1830; --bg-2:#131f3d; --bg-3:#1b2a4d;
  color:#eef1fb;
}
.hero-think .eyebrow, .panel-ink .eyebrow, .panel-tech .eyebrow, .panel-deep .eyebrow { color:var(--acc-bright); }
.hero-think .eyebrow::before, .panel-ink .eyebrow::before, .panel-tech .eyebrow::before, .panel-deep .eyebrow::before { background:var(--acc-bright); }
.panel-ink h1,.panel-ink h2,.panel-ink h3,.panel-tech h1,.panel-tech h2,.panel-deep h1,.panel-deep h2 { color:#f2f4fc; }
.panel-ink .lead,.panel-tech .lead,.panel-deep .lead { color:var(--fg-soft); }

/* painéis escuros/azuis */
.panel-ink  { background:linear-gradient(180deg,#0e1932,#0a1326); border:1px solid rgba(255,255,255,.08); box-shadow:0 40px 90px -50px rgba(0,0,0,.7); }
.panel-tech { background:radial-gradient(90% 120% at 80% 0%, #2a49c8, transparent 60%), linear-gradient(160deg,#1e3aad,#132573); border:1px solid rgba(255,255,255,.12); }
.panel-deep { background:radial-gradient(70% 130% at 50% 120%, #2547d6, transparent 60%), linear-gradient(180deg,#152a8e,#0f1e63); border:1px solid rgba(255,255,255,.1); }

/* eyebrow de risco */
.eyebrow--danger { color:var(--danger)!important; }
.eyebrow--danger::before { background:var(--danger)!important; }

/* HERO escuro/cinematográfico (sobrepõe o hero claro anterior) */
.hero-think { background:linear-gradient(150deg,#0c1730 0%, #0a1326 58%, #0b1529 100%); }
.hero-think .ht-svg { stroke:#c3d4f5; }
.hero-think .ht-base .struct { stroke:rgba(160,180,225,.26); }
.hero-think .ht-sys { filter:drop-shadow(0 0 4px rgba(120,150,240,.22)); }
.hero-think .ht-cad-t { fill:rgba(180,200,245,.5); }
.hero-think .ht-brand { color:#fff; }
.hero-think .ht-title { color:#eef1fb; }
.hero-think .ht-title .accent { color:var(--fg-mute); }
.hero-think .ht-seg { color:var(--fg-mute); border-color:var(--line); }
.hero-think .ht-seg.active { border-color:var(--acc); color:var(--acc-bright); background:rgba(120,150,255,.14); }
.hero-think .ht-seglabel { color:var(--fg-soft); }
.hero-think .ht-chip { background:rgba(13,22,44,.82); border:1px solid rgba(255,255,255,.12); box-shadow:0 18px 38px -18px rgba(0,0,0,.6); }
.hero-think .ht-chip b { color:var(--fg-soft); } .hero-think .ht-chip span { color:#37d67a; }

/* métricas em azul: números e onda claros */
.panel-tech .ref-stat .n { background:linear-gradient(180deg,#ffffff,#c9d4ff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.panel-tech .ref-stat .l { color:var(--fg-soft); }
.panel-tech .eyebrow { color:#fff; }
.panel-tech .eyebrow::before { background:#fff; }
.panel-tech.wave-panel::after { background:linear-gradient(180deg, rgba(20,40,120,.25), transparent); }

/* risco: nós escuros */
.panel-ink .risk-chain { border-color:rgba(255,255,255,.08); }
.panel-ink .risk-node { background:#0c1730; }
.panel-ink .risk-node:hover { background:#140a12; }

/* método/risco: nós e linha continuam com acento azul (ok no escuro) */
.panel-ink .method-step .st-ttl { color:#eef1fb; }

/* =========================================================
   COPY V2 — apoios do hero, cadeia "antes da execução", ghost escuro
   ========================================================= */
.ht-supports { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 20px 0 6px; font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .05em; color: var(--fg-mute); }
.ht-supports span { display: inline-flex; align-items: center; gap: 8px; }
.ht-supports span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--acc); flex: none; }

/* seção "antes da execução": cadeia positiva (sem vermelho) */
.before-exec .rk-idx { color: #86a0ff; opacity: 1; }
.panel-ink .eyebrow, .panel-deep .eyebrow { color: #86a0ff; }
.panel-ink .eyebrow::before, .panel-deep .eyebrow::before { background: #86a0ff; }
.panel-ink .sig, .panel-deep .sig { color: #86a0ff; opacity: .9; }
.before-exec .risk-node:hover { background: #101c38; }

/* botão fantasma legível nos painéis escuros/azuis */
.panel-ink .btn--ghost, .panel-deep .btn--ghost { border-color: rgba(255,255,255,.2); color: #eef1fb; }
.panel-ink .btn--ghost:hover, .panel-deep .btn--ghost:hover { border-color: var(--acc-bright); color: var(--acc-bright); background: rgba(120,150,255,.1); }

/* =========================================================
   WIZARD DE SOLICITAÇÃO (4 etapas) + confirmação
   ========================================================= */
.wizard { }
.wz-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; position: relative; padding-bottom: 22px; margin-bottom: 30px; }
.wz-pip { display: flex; align-items: center; gap: 10px; opacity: .5; transition: opacity .3s; }
.wz-pip.active { opacity: 1; }
.wz-pip .wz-pn { font-family: var(--ff-mono); font-size: .72rem; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--fg-mute); flex: none; transition: all .3s; }
.wz-pip.active .wz-pn { border-color: var(--acc); color: var(--acc-deep); background: rgba(24,71,235,.08); }
.wz-pip.current .wz-pn { background: var(--acc); color: #fff; border-color: var(--acc); }
.wz-pip .wz-pl { font-size: .82rem; color: var(--fg-soft); font-weight: 500; }
.wz-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--line-soft); border-radius: 3px; overflow: hidden; }
.wz-bar-fill { height: 100%; width: 0; background: var(--grad); border-radius: 3px; transition: width .4s var(--ease); }
@media (max-width: 680px){ .wz-pip .wz-pl { display: none; } .wz-steps { grid-template-columns: repeat(4,auto); justify-content: start; gap: 14px; } }

.wz-panel { display: none; }
.wz-panel.active { display: block; animation: edUp .4s var(--ease); }
.wz-title { font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 600; letter-spacing: -.02em; }
.wz-sub { color: var(--fg-mute); font-size: .92rem; margin-top: 8px; }

.wz-grid { display: grid; gap: 12px; margin-top: 24px; }
.wz-grid-3 { grid-template-columns: repeat(3, 1fr); }
.wz-grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 680px){ .wz-grid-3, .wz-grid-2 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px){ .wz-grid-3, .wz-grid-2 { grid-template-columns: 1fr; } }
.wz-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 24px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fff; color: var(--fg); font-weight: 500; font-size: .95rem; transition: all .25s var(--ease); }
.wz-card:hover { border-color: var(--acc); transform: translateY(-2px); box-shadow: 0 18px 40px -24px rgba(50,70,170,.4); }
.wz-card.sel { border-color: var(--acc); background: rgba(24,71,235,.07); box-shadow: 0 0 0 1px var(--acc); }
.wz-card .wz-ic { color: var(--acc); } .wz-card .wz-ic svg { width: 30px; height: 30px; }
.wz-card--wide { flex-direction: row; align-items: center; text-align: left; padding: 20px; gap: 16px; }
.wz-card--wide .wz-ic svg { width: 26px; height: 26px; }
.wz-card--wide b { display: block; font-weight: 600; } .wz-card--wide small { color: var(--fg-mute); font-size: .82rem; }

.wz-ctx { margin-top: 24px; display: flex; flex-direction: column; gap: 18px; }
.wz-q label { display: block; font-size: .9rem; font-weight: 500; margin-bottom: 10px; }
.wz-seg { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.wz-seg button { font-size: .85rem; padding: 9px 16px; border: 1px solid var(--line); border-radius: 40px; color: var(--fg-soft); background: #fff; transition: all .25s; }
.wz-seg button:hover { border-color: var(--fg-mute); }
.wz-seg button.sel { background: var(--acc); color: #fff; border-color: var(--acc); }
.wz-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px){ .wz-row2 { grid-template-columns: 1fr; } }
.field label.wz-toggle { display: inline-flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--fg); font-weight: 500; margin-bottom: 0; cursor: pointer; padding: 12px 0; }
.wz-toggle input { display: none; }
.wz-toggle-ui { width: 42px; height: 24px; border-radius: 40px; background: #c3cce0; box-shadow: inset 0 0 0 1px rgba(30,45,110,.2); position: relative; transition: background .25s; flex: none; }
.wz-toggle-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .25s; box-shadow: 0 1px 4px rgba(20,40,90,.4); }
.wz-toggle input:checked + .wz-toggle-ui { background: #1847eb; box-shadow: none; }
.wz-toggle input:checked + .wz-toggle-ui::after { transform: translateX(18px); }

.wz-nav { display: flex; align-items: center; gap: 16px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line-soft); }
.wz-nav #wz-next { margin-left: auto; }
.wz-hint { font-size: .84rem; color: var(--fg-mute); }
.wz-hint.err { color: var(--danger); }

/* confirmação */
.wz-done { display: none; }
.wz-done.show { display: block; animation: edUp .5s var(--ease); }
.wz-done-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px,4vw,48px); align-items: center; border: 1px solid var(--line); border-radius: 18px; background: #fff; padding: clamp(24px,4vw,44px); box-shadow: 0 40px 90px -50px rgba(50,70,170,.35); }
.wz-done-badge { display: inline-flex; align-items: center; gap: 8px; font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #17a05a; border: 1px solid rgba(23,160,90,.3); background: rgba(23,160,90,.08); padding: 6px 12px; border-radius: 40px; }
.wz-summary { margin: 22px 0; border: 1px solid var(--line-soft); border-radius: 12px; overflow: hidden; }
.wz-sr { display: flex; justify-content: space-between; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); font-size: .9rem; }
.wz-sr:last-child { border-bottom: none; }
.wz-sk { font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-mute); }
.wz-sv { font-weight: 500; text-align: right; }
.wz-prio { background: var(--danger); color: #fff; font-family: var(--ff-mono); font-size: .74rem; letter-spacing: .14em; padding: 10px 16px; text-align: center; }
.wz-next-step { font-family: var(--ff-mono); font-size: .8rem; color: var(--fg-soft); letter-spacing: .04em; }
.wz-done-visual { position: relative; }
.wz-svg { width: 100%; }
.wz-svg .wd-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.wz-svg.playing .wd-draw { animation: bpDraw .8s var(--ease) forwards; }
.wz-svg.playing .wd-draw:nth-child(n+5) { animation-delay: .5s; }
.wz-svg.playing .wd-draw:nth-child(n+7) { animation-delay: .9s; }
.wz-svg.playing .wd-draw:nth-child(n+8) { animation-delay: 1.2s; }
.wz-visual-cap { font-family: var(--ff-mono); font-size: .66rem; letter-spacing: .14em; color: var(--fg-faint); text-align: center; margin-top: 8px; }
@media (max-width: 720px){ .wz-done-grid { grid-template-columns: 1fr; } .wz-done-visual { order: -1; max-width: 300px; margin: 0 auto; } }

/* =========================================================
   PAINEL INTERNO DE LEADS (painel.html)
   ========================================================= */
.pnl-page { background: #eef1f8; }
.pnl-top { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 14px clamp(16px,3vw,32px); background: rgba(255,255,255,.85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.pnl-brand { display: flex; align-items: center; gap: 11px; font-weight: 700; letter-spacing: .04em; }
.pnl-brand .brand-mark { width: 30px; height: 30px; border: 1.5px solid var(--acc); color: var(--acc); display: grid; place-items: center; border-radius: 3px; font-family: var(--ff-mono); font-size: .78rem; }
.pnl-brand small { display: block; font-family: var(--ff-mono); font-size: .56rem; letter-spacing: .2em; color: var(--fg-mute); font-weight: 400; }
.pnl-top-right { display: flex; align-items: center; gap: 16px; }
.pnl-access { font-family: var(--ff-mono); font-size: .72rem; letter-spacing: .1em; color: var(--fg-mute); display: inline-flex; align-items: center; gap: 8px; }
.pnl-access .d { width: 7px; height: 7px; border-radius: 50%; background: #17a05a; box-shadow: 0 0 8px rgba(23,160,90,.6); }

.pnl { max-width: 1240px; margin: 0 auto; padding: clamp(20px,3vw,32px) clamp(16px,3vw,32px) 60px; }
.pnl-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 22px; }
.pnl-stat { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--acc); border-radius: 12px; padding: 18px 20px; }
.pnl-stat.new { border-left-color: var(--acc); } .pnl-stat.prio { border-left-color: var(--danger); }
.pnl-stat.work { border-left-color: #17a05a; } .pnl-stat.prop { border-left-color: var(--pv); }
.pnl-stat .ps-n { font-size: 2rem; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.pnl-stat .ps-l { font-size: .82rem; color: var(--fg-mute); margin-top: 8px; }
@media (max-width:760px){ .pnl-stats { grid-template-columns: 1fr 1fr; } }

.pnl-tools { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.pnl-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pnl-chip { font-size: .82rem; padding: 8px 14px; border: 1px solid var(--line); border-radius: 40px; background: #fff; color: var(--fg-soft); transition: all .2s; }
.pnl-chip:hover { border-color: var(--fg-mute); } .pnl-chip.active { background: var(--acc); color: #fff; border-color: var(--acc); }
.pnl-select, .pnl-search { padding: 9px 14px; border: 1px solid var(--line); border-radius: 40px; background: #fff; font: inherit; font-size: .85rem; color: var(--fg); }
.pnl-search { flex: 1; min-width: 180px; }
.pnl-select { margin-left: auto; }

.pnl-body { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; align-items: start; }
@media (max-width: 900px){ .pnl-body { grid-template-columns: 1fr; } }
.pnl-list { display: flex; flex-direction: column; gap: 12px; }
.lead-card { text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; transition: all .2s var(--ease); position: relative; }
.lead-card:hover { border-color: var(--acc); box-shadow: 0 16px 40px -26px rgba(50,70,170,.4); }
.lead-card.active { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc); }
.lead-card.urgent { border-left: 3px solid var(--danger); }
.lead-prio { display: inline-block; font-family: var(--ff-mono); font-size: .62rem; letter-spacing: .12em; color: #fff; background: var(--danger); padding: 3px 8px; border-radius: 4px; margin-bottom: 10px; }
.lead-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.lead-emp { font-weight: 600; font-size: 1.02rem; }
.lead-sub { font-size: .82rem; color: var(--fg-mute); margin-top: 2px; }
.lead-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 12px 0; font-size: .82rem; color: var(--fg-soft); }
.lead-tag { font-family: var(--ff-mono); font-size: .68rem; letter-spacing: .06em; padding: 3px 9px; border-radius: 5px; color: #fff; }
.t-hvac{background:var(--hvac)} .t-pv{background:var(--pv)} .t-spk{background:var(--spk)} .t-civil{background:var(--civil);color:#1a2140}
.lead-status { font-size: .72rem; font-weight: 600; padding: 4px 10px; border-radius: 40px; white-space: nowrap; }
.s-new{background:rgba(24,71,235,.12);color:var(--acc-deep)} .s-wait{background:rgba(120,130,160,.15);color:#5a6480}
.s-work{background:rgba(23,160,90,.14);color:#0e7a42} .s-prop{background:rgba(106,92,240,.14);color:#5340d0}
.s-done{background:rgba(23,160,90,.14);color:#0e7a42} .s-lost{background:rgba(120,130,160,.15);color:#5a6480}
.lead-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: .78rem; color: var(--fg-mute); padding-top: 12px; border-top: 1px solid var(--line-soft); }
.lead-date { font-family: var(--ff-mono); font-size: .72rem; }
.lead-resp { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; color: var(--fg-soft); }
.lead-unassigned { color: var(--fg-faint); font-style: italic; }
.av { width: 22px; height: 22px; border-radius: 50%; background: var(--acc); color: #fff; font-size: .62rem; font-weight: 600; display: inline-grid; place-items: center; }
.av.sm { width: 20px; height: 20px; }
.lead-views { font-family: var(--ff-mono); font-size: .7rem; }

/* detalhe */
.pnl-detail { position: sticky; top: 84px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px; min-height: 300px; box-shadow: 0 30px 70px -50px rgba(50,70,170,.4); }
.pnl-empty { color: var(--fg-faint); font-size: .9rem; text-align: center; padding: 60px 20px; }
.det-prio { font-family: var(--ff-mono); font-size: .68rem; letter-spacing: .14em; color: #fff; background: var(--danger); padding: 8px 12px; border-radius: 8px; text-align: center; margin-bottom: 16px; }
.det-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.det-head h2 { font-size: 1.35rem; }
.det-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border: 1px solid var(--line-soft); border-radius: 10px; overflow: hidden; margin-bottom: 18px; }
.det-row { background: #f7f9fd; padding: 11px 14px; display: flex; flex-direction: column; gap: 4px; }
.det-k { font-family: var(--ff-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-mute); }
.det-v { font-size: .9rem; font-weight: 500; }
.det-block { margin-bottom: 18px; } .det-block p { font-size: .9rem; color: var(--fg-soft); margin-top: 6px; }
.det-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.lead-file { display: inline-flex; align-items: center; font-size: .8rem; color: var(--acc-deep); border: 1px solid var(--line); border-radius: 8px; padding: 7px 11px; }
.det-views { list-style: none; padding: 0; margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.det-views li { display: flex; align-items: center; gap: 9px; font-size: .84rem; color: var(--fg-soft); }
.det-views li.assumed { color: var(--fg); font-weight: 500; } .det-views li.muted { color: var(--fg-faint); }
.det-actions { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--line-soft); }

/* =========================================================
   BOTÃO FLUTUANTE DO WHATSAPP
   ========================================================= */
.wa-float { position: fixed; z-index: 90; right: clamp(16px,3vw,28px); bottom: clamp(16px,3vw,28px);
  display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 18px 0 15px;
  background: var(--acc); color: #fff; border-radius: 40px; text-decoration: none;
  box-shadow: 0 14px 34px -10px rgba(24,71,235,.5); transition: transform .25s var(--ease), box-shadow .25s; }
.wa-float svg { width: 28px; height: 28px; flex: none; }
.wa-float .wa-label { font-size: .9rem; font-weight: 600; white-space: nowrap; max-width: 0; overflow: hidden; opacity: 0; transition: max-width .35s var(--ease), opacity .25s; }
.wa-float:hover { transform: translateY(-2px); box-shadow: 0 18px 42px -10px rgba(24,71,235,.6); }
.wa-float:hover .wa-label { max-width: 200px; opacity: 1; }
@media (max-width: 640px){ .wa-float { height: 48px; padding: 0 12px; } .wa-float svg { width: 24px; height: 24px; } .wa-float .wa-label { display: none; } }

/* WhatsApp Inteligente — popup com roteamento por horário */
button.wa-float { border: 0; cursor: pointer; font-family: inherit; }
.wa-pop { position: fixed; z-index: 91; right: clamp(16px,3vw,28px); bottom: calc(clamp(16px,3vw,28px) + 68px); width: min(320px, calc(100vw - 32px)); pointer-events: none; }
.wa-pop.open { pointer-events: auto; }
.wa-pop-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: 0 30px 70px -22px rgba(20,40,90,.45); transform-origin: bottom right; transform: translateY(14px) scale(.96); opacity: 0; pointer-events: none; transition: transform .26s var(--ease), opacity .2s; }
.wa-pop.open .wa-pop-card { transform: none; opacity: 1; pointer-events: auto; }
.wa-pop-head { background: #fff; color: var(--fg); padding: 16px 18px; border-bottom: 1px solid var(--line); }
.wa-pop-head b { font-size: 1rem; font-weight: 700; }
.wa-pop-status { display: flex; align-items: center; gap: 7px; font-size: .76rem; margin-top: 5px; color: var(--fg-mute); }
.wa-pop-status .d { width: 8px; height: 8px; border-radius: 50%; background: #9aa2bd; }
.wa-pop--comercial .wa-pop-status .d { background: #22c55e; box-shadow: 0 0 8px rgba(34,197,94,.6); }
.wa-pop--plantao .wa-pop-status .d { background: #f5a623; box-shadow: 0 0 8px rgba(245,166,35,.55); }
.wa-pop-body { padding: 12px; }
.wa-pop-note { font-size: .8rem; color: var(--fg-soft); padding: 4px 6px 12px; line-height: 1.5; }
.wa-contact { display: block; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.wa-contact:last-child { margin-bottom: 0; }
.wa-contact:hover { border-color: var(--acc); box-shadow: 0 12px 28px -18px rgba(24,71,235,.55); }
.wa-contact .wc-name { font-weight: 700; font-size: .95rem; color: var(--fg); letter-spacing: -.01em; }
.wa-contact .wc-role { font-size: .78rem; color: var(--acc-deep); font-weight: 600; margin-top: 2px; }
.wa-contact .wc-desc { font-size: .78rem; color: var(--fg-mute); margin-top: 7px; line-height: 1.45; }
.wa-contact .wc-btn { display: inline-flex; margin-top: 12px; padding: 8px 16px; border-radius: 100px; background: var(--acc); color: #fff; font-size: .82rem; font-weight: 600; text-decoration: none; transition: background .2s; }
.wa-contact .wc-btn:hover { background: var(--acc-deep); }

/* ===== CLIENTES — marquee de logos ===== */
.logo-marquee { position: relative; overflow: hidden; padding: 6px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.logo-track { display: flex; width: max-content; gap: 18px; animation: logoScroll 46s linear infinite; will-change: transform; }
.logo-marquee:hover .logo-track { animation-play-state: paused; }
.logo-item { flex: none; width: 176px; height: 96px; display: grid; place-items: center; padding: 16px 22px;
  background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 12px 28px -22px rgba(20,40,90,.55); }
.logo-item img { max-width: 100%; max-height: 56px; object-fit: contain; opacity: .9;
  transition: opacity .3s var(--ease), transform .35s var(--ease); }
.logo-item:hover { border-color: var(--acc); }
.logo-item:hover img { opacity: 1; transform: scale(1.06); }
@keyframes logoScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 640px) { .logo-item { width: 144px; height: 82px; padding: 12px 16px; } .logo-item img { max-height: 46px; } .logo-track { gap: 12px; animation-duration: 34s; } }

/* foto da seção "40 anos" (substitui o gráfico isométrico) */
.iso-wrap .exp-photo { width: 100%; height: auto; border-radius: 18px; box-shadow: 0 30px 60px -30px rgba(40,60,140,.5); display: block; }
.iso-wrap .exp-ph-note { display: none; }
.iso-wrap.no-photo .exp-photo { display: none; }
.iso-wrap.no-photo .exp-ph-note { display: grid; place-items: center; text-align: center; min-height: 240px; border: 2px dashed var(--line); border-radius: 18px; color: var(--fg-mute); font-family: var(--ff-mono); font-size: .8rem; line-height: 1.8; background: var(--bg-1); }
.princ-photo img { width: 100%; height: auto; border-radius: 18px; box-shadow: 0 30px 60px -30px rgba(40,60,140,.5); display: block; }

/* =========================================================
   LOGO (imagem) — some o placeholder quando ams-logo existir
   ========================================================= */
.brand-logo { height: 30px; width: auto; display: block; }
.pnl-brand .brand-logo { height: 28px; }
.brand-fallback { display: inline-flex; align-items: center; gap: 11px; }
.brand-logo + .brand-fallback { display: none; }   /* logo presente → esconde o "A + AMS" */