/* ============================================
   VOXEL DASTI — LAYOUT v4
   Fonte nova, logo maior, fix de corte,
   DSGA spotlight, timeline, ecossistema,
   processo repaginado. Tema escuro + laranja/azul/cinza.
   ============================================ */

/* ---------- FONTE DISPLAY (substitui o serif) ---------- */
:root {
  --font-display: 'Space Grotesk', 'Inter', -apple-system, sans-serif;
}
/* títulos: peso e tracking ajustados para a nova fonte */
.hero__title, .sub-hero__title, .section__title, .cta__title,
.dsga-spot__title, .eco__title, .tl__title {
  font-weight: 600;
  letter-spacing: -0.02em;
  font-style: normal;
}
.hero__title em, .sub-hero__title em, .section__title em, .cta__title em { font-style: normal; }

/* ---------- FIX: fonte cortada no hero (overflow do reveal) ---------- */
.hero__title { line-height: 1.05; }
.hero__title .word {
  overflow: hidden;
  padding: 0.12em 0.06em 0.20em;
  margin: -0.12em -0.06em -0.20em;
}
.sub-hero__title { line-height: 1.0; padding-bottom: 0.08em; }
.section__title { line-height: 1.05; padding-bottom: 0.06em; }

/* ---------- LOGO MAIOR ---------- */
.nav__brand-logo { height: 58px; }
.nav.scrolled .nav__brand-logo { height: 46px; }
.preloader__logo { width: clamp(240px, 34vw, 400px); }
.footer__brand-logo { height: 72px; }
@media (max-width: 620px){ .nav__brand-logo { height: 46px; } }

/* ============================================
   DSGA SPOTLIGHT — produto principal
   ============================================ */
.dsga-spot {
  position: relative;
  padding: clamp(4rem, 8vw, 7rem) 0;
  background:
    radial-gradient(900px 500px at 85% 0%, rgba(0,135,210,.16), transparent 60%),
    radial-gradient(700px 500px at 0% 100%, rgba(255,90,0,.10), transparent 55%),
    var(--color-void);
  border-top: 1px solid var(--border-subtle);
  overflow: hidden;
}
.dsga-spot__grid {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 5rem);
  align-items: center; max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--gutter);
}
@media (max-width: 980px){ .dsga-spot__grid { grid-template-columns: 1fr; } }
.dsga-spot__badge {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-mono); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--dsga-soft); background: rgba(0,135,210,.12); border: 1px solid rgba(0,135,210,.32);
  padding: .45rem .9rem; border-radius: var(--radius-pill);
}
.dsga-spot__badge::before { content:''; width:7px;height:7px;border-radius:50%;background:var(--dsga-soft); box-shadow:0 0 10px var(--dsga-soft); animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.dsga-spot__title {
  font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 1.02;
  color: var(--color-white); margin: 1.3rem 0 1.2rem;
}
.dsga-spot__title em { font-style: normal; background: linear-gradient(90deg, var(--dsga) 0%, var(--dsga-soft) 60%, #6fc4ff 100%); -webkit-background-clip:text; background-clip:text; color: transparent; }
.dsga-spot__lead { color: var(--color-silver); font-size: var(--fs-md); max-width: 52ch; margin-bottom: 1.8rem; line-height: 1.6; }
.dsga-spot__chips { display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom: 2rem; }
.dsga-spot__chip { font-size:.85rem; color: var(--color-pearl); background: var(--surface-2); border:1px solid var(--border-soft); border-radius: var(--radius-pill); padding:.5rem .95rem; display:inline-flex; gap:.45rem; align-items:center; }
.dsga-spot__chip svg{ width:15px;height:15px;color:var(--dsga-soft); }

/* Painel "Tempo Real" */
.rt {
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
  padding: 1.3rem; box-shadow: 0 40px 120px -40px rgba(0,0,0,.8), 0 0 60px -30px var(--dsga-glow);
  position: relative;
}
.rt__head { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; }
.rt__title { font-family: var(--font-mono); font-size:.8rem; color: var(--color-silver); letter-spacing:.08em; text-transform:uppercase; }
.rt__live { font-size:.72rem; color:#34d399; display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-mono); }
.rt__live::before{ content:''; width:6px;height:6px;border-radius:50%;background:#34d399; animation:pulse 1.4s infinite; }
.rt__row { display:grid; grid-template-columns: auto 1fr auto; align-items:center; gap:.8rem; padding:.7rem .8rem; border-radius: var(--radius-md); background: var(--surface-3); margin-bottom:.55rem; border:1px solid transparent; }
.rt__sn { font-family: var(--font-mono); font-weight:600; color:var(--color-white); font-size:.95rem; }
.rt__svc { color: var(--color-silver); font-size:.85rem; }
.rt__time { font-family: var(--font-mono); font-size:.85rem; color: var(--dsga-soft); }
.rt__row--late { border-color: rgba(239,68,68,.5); background: rgba(239,68,68,.08); }
.rt__row--late .rt__time { color:#ff6b6b; }
.rt__row--call { border-color: rgba(0,135,210,.5); animation: callpulse 2s infinite; }
@keyframes callpulse { 0%,100%{ box-shadow:0 0 0 0 rgba(0,135,210,.4) } 50%{ box-shadow:0 0 0 4px rgba(0,135,210,0) } }
.rt__foot { display:flex; gap:1.2rem; margin-top:1rem; padding-top:1rem; border-top:1px solid var(--border-subtle); }
.rt__stat b { display:block; font-family:var(--font-display); font-size:1.5rem; color:var(--color-white); line-height:1; }
.rt__stat span { font-size:.72rem; color:var(--color-mist); font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.06em; }

/* Planos DSGA */
.plans { display:grid; grid-template-columns: repeat(3,1fr); gap:1.2rem; max-width: var(--container); margin: 3.5rem auto 0; padding: 0 var(--gutter); }
@media (max-width: 820px){ .plans { grid-template-columns: 1fr; max-width: 460px; } }
.plan { background: var(--surface-1); border:1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 2rem 1.6rem; position:relative; transition: transform .3s var(--ease-out), border-color .3s; }
.plan:hover { transform: translateY(-6px); border-color: var(--border-hard); }
.plan--pop { border-color: var(--dsga); box-shadow: 0 0 50px -20px var(--dsga-glow); }
.plan__tag { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background: var(--dsga); color:#fff; font-size:.7rem; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.1em; padding:.3rem .8rem; border-radius: var(--radius-pill); }
.plan__name { font-family: var(--font-display); font-size:1.4rem; color:var(--color-white); margin-bottom:.3rem; }
.plan__sub { font-size:.82rem; color:var(--color-mist); font-family:var(--font-mono); margin-bottom:1.3rem; }
.plan__list { display:flex; flex-direction:column; gap:.65rem; margin-bottom:1.6rem; }
.plan__list li { color:var(--color-pearl); font-size:.92rem; display:flex; gap:.55rem; align-items:center; }
.plan__list li::before { content:'✓'; color: var(--dsga-soft); font-weight:700; }

/* ============================================
   TIMELINE — história do DSGA
   ============================================ */
.tl { position: relative; max-width: 980px; margin: 0 auto; padding: 1rem var(--gutter) 0; }
.tl__line { position:absolute; left: calc(var(--gutter) + 11px); top:0; bottom:0; width:2px; background: linear-gradient(180deg, var(--accent), var(--dsga)); opacity:.4; }
@media (min-width:760px){ .tl__line { left:50%; transform:translateX(-1px); } }
.tl__item { position: relative; padding-left: 3rem; margin-bottom: 2.4rem; }
@media (min-width:760px){
  .tl__item { width:50%; padding-left:0; }
  .tl__item:nth-child(odd){ left:0; padding-right:3rem; text-align:right; }
  .tl__item:nth-child(even){ left:50%; padding-left:3rem; }
}
.tl__dot { position:absolute; top:.2rem; width:24px; height:24px; border-radius:50%; background:var(--surface-2); border:2px solid var(--accent); display:grid; place-items:center; }
.tl__dot::after{ content:''; width:8px;height:8px;border-radius:50%; background:var(--accent); }
.tl__item:nth-child(even) .tl__dot, .tl__item:nth-child(3n) .tl__dot { border-color: var(--dsga); }
.tl__item:nth-child(even) .tl__dot::after { background: var(--dsga); }
.tl__item { padding-left: 3rem; }
.tl__dot { left: 0; }
@media (min-width:760px){
  .tl__item:nth-child(odd) .tl__dot { right:-12px; left:auto; }
  .tl__item:nth-child(even) .tl__dot { left:-12px; }
}
.tl__year { font-family: var(--font-mono); font-size:.85rem; color: var(--accent-soft); letter-spacing:.08em; }
.tl__h { font-family: var(--font-display); font-size:1.3rem; color:var(--color-white); margin:.3rem 0 .4rem; }
.tl__p { color: var(--color-silver); font-size:.94rem; line-height:1.55; }

/* ============================================
   ECOSSISTEMA — DSGA + DCMS + DSITES integrados
   ============================================ */
.eco { padding: clamp(4rem,7vw,6rem) 0; background: var(--surface-1); border-top:1px solid var(--border-subtle); }
.eco__hub { display:grid; grid-template-columns: repeat(3,1fr); gap:1.2rem; max-width: var(--container); margin: 2.5rem auto 0; padding:0 var(--gutter); }
@media (max-width: 880px){ .eco__hub { grid-template-columns:1fr; max-width:520px; } }
.eco__card { position:relative; background: var(--surface-2); border:1px solid var(--border-soft); border-radius: var(--radius-lg); padding:2rem 1.7rem; transition: transform .3s var(--ease-out), border-color .3s; overflow:hidden; }
.eco__card::before { content:''; position:absolute; inset:0 0 auto 0; height:3px; background: var(--c, var(--accent)); transform: scaleX(0); transform-origin:left; transition: transform .4s var(--ease-out); }
.eco__card:hover { transform: translateY(-6px); border-color: var(--border-hard); }
.eco__card:hover::before { transform: scaleX(1); }
.eco__card--dsga { --c: var(--dsga); border-color: rgba(0,135,210,.3); }
.eco__card--dcms { --c: var(--accent); }
.eco__card--dsites { --c: #7C5CFF; }
.eco__tag { font-family:var(--font-mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color: var(--c); }
.eco__name { font-family: var(--font-display); font-size:1.5rem; color:var(--color-white); margin:.5rem 0 .6rem; }
.eco__desc { color: var(--color-silver); font-size:.92rem; line-height:1.55; margin-bottom:1.2rem; }
.eco__link { font-family:var(--font-mono); font-size:.82rem; color:var(--c); text-decoration:none; display:inline-flex; gap:.35rem; }
.eco__flow { text-align:center; margin: 2.2rem auto 0; max-width:760px; padding:0 var(--gutter); color:var(--color-mist); font-family:var(--font-mono); font-size:.84rem; }
.eco__flow b { color: var(--color-pearl); }

/* ============================================
   PROCESSO REPAGINADO ("como trabalhamos") — com vida
   ============================================ */
.howwe { padding: clamp(4rem,7vw,6rem) 0; position:relative;
  background:
   radial-gradient(700px 400px at 10% 0%, rgba(255,90,0,.08), transparent 60%),
   radial-gradient(700px 400px at 95% 100%, rgba(0,135,210,.10), transparent 60%),
   var(--color-void);
}
.howwe__grid { display:grid; grid-template-columns: repeat(3,1fr); gap:1.2rem; max-width: var(--container); margin: 2.5rem auto 0; padding:0 var(--gutter); }
@media (max-width:880px){ .howwe__grid { grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .howwe__grid { grid-template-columns:1fr; } }
.hw {
  position:relative; padding:1.9rem 1.6rem; border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--surface-2), var(--surface-1));
  border:1px solid var(--border-soft); overflow:hidden; transition: transform .3s var(--ease-out), border-color .3s;
}
.hw:hover { transform: translateY(-5px); border-color: var(--border-hard); }
.hw::after { content:''; position:absolute; right:-30px; top:-30px; width:120px;height:120px; border-radius:50%;
  background: radial-gradient(circle, var(--g, var(--accent-glow)), transparent 70%); opacity:.5; }
.hw__num { font-family: var(--font-mono); font-size:.8rem; color: var(--accent-soft); letter-spacing:.1em; }
.hw__ico { width:46px;height:46px;border-radius:12px; display:grid;place-items:center; margin:.8rem 0 1rem; background: rgba(255,90,0,.12); color: var(--accent-soft); }
.hw:nth-child(even) .hw__ico { background: rgba(0,135,210,.12); color: var(--dsga-soft); }
.hw:nth-child(even) .hw__num { color: var(--dsga-soft); }
.hw:nth-child(even) { --g: var(--dsga-glow); }
.hw__h { font-family: var(--font-display); font-size:1.2rem; color:var(--color-white); margin-bottom:.5rem; position:relative; z-index:1; }
.hw__p { color: var(--color-silver); font-size:.92rem; line-height:1.55; position:relative; z-index:1; }


/* ============================================
   NAV DROPDOWN — "Solucoes" (v4.1)
   ============================================ */
.nav__item--drop { position: relative; }
.nav__drop-toggle {
  background: none; border: 0; cursor: pointer;
  font: inherit; color: var(--color-pearl);
  display: inline-flex; align-items: center; gap: .35rem;
}
.nav__caret { font-size: .7em; line-height: 1; transition: transform var(--dur-base, .4s) var(--ease-out, ease); }
.nav__item--drop:hover .nav__caret,
.nav__drop-toggle[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

.nav__drop {
  list-style: none; margin: 0; padding: .5rem;
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 264px;
  display: flex; flex-direction: column; gap: .15rem;
  background: var(--color-carbon, #12161F);
  border: 1px solid var(--border-subtle, rgba(255,255,255,.08));
  border-radius: var(--radius-lg, 18px);
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-base,.4s) var(--ease-out,ease),
              transform var(--dur-base,.4s) var(--ease-out,ease),
              visibility var(--dur-base,.4s);
  z-index: 200;
}
.nav__drop::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav__item--drop:hover .nav__drop,
.nav__item--drop:focus-within .nav__drop,
.nav__drop.open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav__drop-link {
  display: flex; flex-direction: column; gap: .1rem;
  padding: .65rem .85rem; border-radius: var(--radius-md, 12px);
  transition: background var(--dur-fast,.2s) var(--ease-out,ease);
}
.nav__drop-link strong { font-family: var(--font-display); font-weight: 600; color: var(--color-white); font-size: .98rem; }
.nav__drop-link span { font-size: .76rem; color: var(--color-silver); }
.nav__drop-link:hover { background: var(--color-steel, #1B2030); }
.nav__drop-link:hover strong { color: var(--accent); }

@media (max-width: 920px) {
  .nav__item--drop { width: 100%; }
  .nav__drop {
    position: static; transform: none; min-width: 0;
    opacity: 1; visibility: visible; pointer-events: auto;
    background: transparent; border: 0; box-shadow: none;
    padding: .6rem 0 .2rem 1.1rem; gap: .4rem;
    display: none;
  }
  .nav__drop::before { display: none; }
  .nav__drop.open { display: flex; }
  .nav__drop-toggle { font-size: 1.8rem; font-family: var(--font-display); }
  .nav__drop-link strong { font-size: 1.15rem; }
  .nav__drop-link span { font-size: .9rem; }
}