/* ==========================================================================
   GIGA — Pages (Home polida + stubs cinematográficos)
   ========================================================================== */

/* ==========================================================================
   APP shell
   ========================================================================== */

#app {
  position: relative;
  display: block;
  min-height: 100vh;
}

.view {
  position: relative;
  display: block;
}

.view.is-leaving {
  pointer-events: none;
}

/* ==========================================================================
   HERO (Dobra 01 — Home)
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  isolation: isolate;
  padding-top: 104px;
  contain: layout paint;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(20, 20, 22, 0.55), transparent 70%),
    linear-gradient(180deg, rgba(5,5,5,0.55) 0%, rgba(10,10,10,0.5) 50%, rgba(3,3,3,0.85) 100%);
}

.hero--video .hero__bg {
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(0,0,0,0.45), transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0.85) 100%);
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 38%, rgba(0,0,0,0.6) 78%, rgba(0,0,0,0.95) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.45) 0%, transparent 45%, rgba(0,0,0,0.35) 100%);
}

/* LED blur orbs — atmosfera cinematográfica densa.
   PERF: blur 40px + screen-blend + animação infinita custa caro em composite.
   Quando há vídeo, ele já fornece glow ambiente — desligamos LED nessa variante.
   Em mobile e reduced-motion, animação pausada (estáticos). */
.hero__led {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;
}

.hero__led::before,
.hero__led::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(36px);
  opacity: 0.55;
  transform: translateZ(0);
}

/* Quando o hero tem vídeo, dispensa LED — vídeo já é a luz ambiente cinemática.
   Ganho: -2 camadas blur 36px + -2 mix-blend-mode + -2 animações infinitas. */
.hero--video .hero__led { display: none; }

@media (max-width: 880px), (prefers-reduced-motion: reduce) {
  .hero__led { display: none; }
}

.hero__led::before {
  width: 65vw;
  height: 65vw;
  top: -15vw;
  left: -20vw;
  background: radial-gradient(circle, rgba(92, 225, 230, 0.45) 0%, rgba(92, 225, 230, 0.18) 35%, transparent 70%);
  animation: led-drift-1 22s var(--ease-smooth) infinite alternate;
}

.hero__led::after {
  width: 55vw;
  height: 55vw;
  bottom: -20vw;
  right: -15vw;
  background: radial-gradient(circle, rgba(255, 220, 180, 0.25) 0%, rgba(140, 90, 60, 0.12) 40%, transparent 70%);
  animation: led-drift-2 28s var(--ease-smooth) infinite alternate;
}

@keyframes led-drift-1 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(10vw, 8vh) scale(1.15); }
}
@keyframes led-drift-2 {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-12vw, -6vh) scale(1.2); }
}

.hero__inner {
  position: relative;
  z-index: 2;
  align-self: center;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

.hero__eyebrow {
  grid-column: 1 / -1;
  margin-bottom: clamp(32px, 4vh, 56px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.hero__eyebrow-meta {
  display: inline-flex;
  align-items: center;
  gap: 24px;
}

.hero__title {
  grid-column: 1 / -1;
  font-size: clamp(40px, 5.5vw, 84px);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  max-width: 16ch;
  text-wrap: pretty;
}

.hero__title em {
  font-style: normal;
  font-weight: 800;
  color: var(--text-primary);
}

.hero__sub {
  grid-column: 1 / 7;
  margin-top: clamp(20px, 3vh, 32px);
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 400;
  line-height: 1.45;
  color: var(--text-secondary);
  max-width: 44ch;
}

.hero__sub-line { white-space: nowrap; }

.hero__actions {
  grid-column: 1 / -1;
  margin-top: clamp(28px, 4vh, 48px);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.hero__footer {
  position: relative;
  z-index: 2;
  padding-block: 28px 32px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  align-items: end;
  border-top: 1px solid var(--line-soft);
}

.hero__meta {
  grid-column: 1 / 5;
  display: flex;
  flex-direction: column;
  gap: 6px;
}


/* ==========================================================================
   SECTORS (Dobra 02)
   ========================================================================== */

.sectors {
  position: relative;
  padding-block: var(--section-y);
}

.sectors__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line-soft);
}

.sector {
  position: relative;
  display: grid;
  grid-template-columns: 60px 1fr auto;
  align-items: center;
  gap: 32px;
  padding-block: clamp(32px, 5vh, 56px);
  border-bottom: 1px solid var(--line-soft);
  transition: padding var(--d-base) var(--ease-cinematic);
}
html.js-cursor .sector { cursor: none; }

.sector__idx {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-tertiary);
}

.sector__name {
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.04;
  color: var(--text-primary);
  transition: color var(--d-base) var(--ease-smooth), transform 700ms var(--ease-out-expo);
}

.sector__desc {
  font-size: 14px;
  color: var(--text-tertiary);
  max-width: 38ch;
  text-align: right;
  opacity: 0.7;
  transition: opacity var(--d-base) var(--ease-smooth);
}

.sector__preview {
  position: absolute;
  top: 50%;
  right: 18%;
  width: clamp(220px, 22vw, 380px);
  aspect-ratio: 4/3;
  transform: translateY(-50%) scale(0.95);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  border-radius: var(--r-md);
  overflow: hidden;
  transition:
    opacity 700ms var(--ease-out-expo),
    transform 1000ms var(--ease-out-expo);
}

.sector:hover .sector__preview {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.sector:hover .sector__name {
  color: var(--white);
  transform: translateX(8px);
}

.sector:hover .sector__desc {
  opacity: 0;
}

.sector__arrow {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-soft);
  border-radius: 50%;
  color: var(--text-tertiary);
  transition:
    border-color var(--d-base) var(--ease-out-expo),
    color var(--d-base) var(--ease-out-expo),
    background var(--d-base) var(--ease-out-expo),
    transform var(--d-base) var(--ease-out-expo);
}

.sector:hover .sector__arrow {
  border-color: var(--accent-cyan);
  color: var(--accent-cyan);
  background: rgba(92, 225, 230, 0.06);
  transform: rotate(-45deg);
}

@media (max-width: 880px) {
  .sector { grid-template-columns: 40px 1fr; gap: 16px; }
  .sector__desc { display: none; }
  .sector__preview { display: none; }
  .sector__arrow {
    grid-column: 2;
    margin-top: 16px;
  }
}

/* ==========================================================================
   AUTHORITY METRICS (Dobra 03)
   ========================================================================== */

/* ================================================================
   AUTHORITY — Linhas diagonais LED + aurora borealis
   Sem bloco visível: funde com o fluxo da página.
   Técnica: linha de 1px + box-shadow em camadas = glow de LED.
   ================================================================ */

.authority {
  position: relative;
  padding-block: var(--section-y);
  background: transparent;
  overflow: hidden;
  isolation: isolate;
}

/* Fade topo/base — funde com seções vizinhas */
.authority::before,
.authority::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: clamp(90px, 16vh, 160px);
  z-index: 2;
  pointer-events: none;
}
.authority::before {
  top: 0;
  background: linear-gradient(180deg, var(--black) 0%, transparent 100%);
}
.authority::after {
  bottom: 0;
  background: linear-gradient(0deg, var(--black) 0%, transparent 100%);
}

.authority__aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* Orbs substituídos por divs JS (.orb-js) em assets/js/orbs.js —
   pseudo-elements mantidos mas ocultos para não duplicar */
.authority__aurora::before,
.authority__aurora::after {
  display: none;
}

@keyframes orb-drift-a {
  0%   { transform: translate(0vw,   0px);    opacity: 0.18; }
  10%  { transform: translate(14vw,  110px);  opacity: 0.80; }
  22%  { transform: translate(36vw,  40px);   opacity: 0.22; }
  35%  { transform: translate(50vw,  230px);  opacity: 0.88; }
  48%  { transform: translate(28vw,  320px);  opacity: 0.20; }
  62%  { transform: translate(8vw,   180px);  opacity: 0.82; }
  75%  { transform: translate(42vw,  80px);   opacity: 0.24; }
  88%  { transform: translate(22vw,  260px);  opacity: 0.76; }
  100% { transform: translate(0vw,   0px);    opacity: 0.18; }
}
@keyframes orb-drift-b {
  0%   { transform: translate(0vw,    0px);   opacity: 0.18; }
  12%  { transform: translate(-16vw, -130px); opacity: 0.78; }
  26%  { transform: translate(-44vw, -50px);  opacity: 0.20; }
  40%  { transform: translate(-26vw, -270px); opacity: 0.84; }
  55%  { transform: translate(-52vw, -140px); opacity: 0.22; }
  68%  { transform: translate(-10vw, -220px); opacity: 0.80; }
  82%  { transform: translate(-38vw, -60px);  opacity: 0.20; }
  100% { transform: translate(0vw,    0px);   opacity: 0.18; }
}

/* Streaks desativados — substituídos pelos orbs acima */
.authority__streak,
.authority__streak::before,
.authority__streak::after {
  display: none;
}

/* Halo Gaussian médio — difusão próxima ao core */
.authority__streak::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  background: inherit;
  filter: blur(36px);
  opacity: 0.90;
  pointer-events: none;
}

/* Halo Gaussian largo — aureola densa ao redor de cada linha */
.authority__streak::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 6px;
  transform: translateY(-50%);
  background: inherit;
  filter: blur(72px);
  opacity: 0.60;
  pointer-events: none;
}

/* ── 1: Cyan principal ── */
.authority__streak--1 {
  top: 4%;
  background: linear-gradient(90deg,
    transparent 4%, rgba(92,225,230,0.0) 8%,
    rgba(92,225,230,0.85) 28%, rgba(92,225,230,1.0) 50%,
    rgba(92,225,230,0.85) 72%, rgba(92,225,230,0.0) 90%,
    transparent 94%
  );
  box-shadow:
    0 0 4px 2px   rgba(92,225,230,0.90),
    0 0 20px 8px  rgba(92,225,230,0.38),
    0 0 55px 18px rgba(92,225,230,0.16);
  animation:
    led-drift-1  18s ease-in-out infinite alternate,
    led-pulse-c  4.2s ease-in-out infinite;
}

/* ── 2: Magenta ── */
.authority__streak--2 {
  top: 25%;
  background: linear-gradient(90deg,
    transparent 6%, rgba(224,52,252,0.0) 10%,
    rgba(224,52,252,0.75) 30%, rgba(224,52,252,0.98) 51%,
    rgba(224,52,252,0.75) 72%, rgba(224,52,252,0.0) 88%,
    transparent 92%
  );
  box-shadow:
    0 0 4px 2px   rgba(224,52,252,0.82),
    0 0 18px 7px  rgba(224,52,252,0.35),
    0 0 50px 16px rgba(224,52,252,0.14);
  animation:
    led-drift-2  23s ease-in-out -6s infinite alternate-reverse,
    led-pulse-m  5.8s ease-in-out -1.8s infinite;
}

/* ── 3: Cyan secundário ── */
.authority__streak--3 {
  top: 49%;
  background: linear-gradient(90deg,
    transparent 8%, rgba(92,225,230,0.0) 12%,
    rgba(92,225,230,0.70) 33%, rgba(92,225,230,0.92) 53%,
    rgba(92,225,230,0.70) 73%, rgba(92,225,230,0.0) 88%,
    transparent 91%
  );
  box-shadow:
    0 0 4px 2px   rgba(92,225,230,0.75),
    0 0 18px 6px  rgba(92,225,230,0.30),
    0 0 48px 15px rgba(92,225,230,0.13);
  animation:
    led-drift-3  16s ease-in-out -11s infinite alternate,
    led-pulse-c  6.4s ease-in-out -3.5s infinite;
}

/* ── 4: Magenta secundário ── */
.authority__streak--4 {
  top: 72%;
  background: linear-gradient(90deg,
    transparent 9%, rgba(224,52,252,0.0) 13%,
    rgba(224,52,252,0.62) 34%, rgba(224,52,252,0.86) 54%,
    rgba(224,52,252,0.62) 74%, rgba(224,52,252,0.0) 89%,
    transparent 92%
  );
  box-shadow:
    0 0 3px 2px   rgba(224,52,252,0.68),
    0 0 16px 6px  rgba(224,52,252,0.28),
    0 0 44px 14px rgba(224,52,252,0.12);
  animation:
    led-drift-4  27s ease-in-out -4s infinite alternate,
    led-pulse-m  4.8s ease-in-out -0.8s infinite;
}

/* ── 5: Gradiente cyan → magenta (mistura de marca) ── */
.authority__streak--5 {
  top: 94%;
  background: linear-gradient(90deg,
    transparent 5%, rgba(92,225,230,0.0) 8%,
    rgba(92,225,230,0.76) 24%, rgba(92,225,230,0.95) 42%,
    rgba(224,52,252,0.78) 58%, rgba(224,52,252,0.92) 76%,
    rgba(224,52,252,0.0) 91%, transparent 94%
  );
  box-shadow:
    0 0 4px 2px   rgba(160,138,252,0.72),
    0 0 18px 7px  rgba(160,138,252,0.30),
    0 0 52px 17px rgba(160,138,252,0.14);
  animation:
    led-drift-5  21s ease-in-out -14s infinite alternate-reverse,
    led-pulse-x  7s ease-in-out -5s infinite;
}

/* ── Drift: rotação travada nos keyframes, só Y varia ── */
@keyframes led-drift-1 {
  from { transform: rotate(37deg) translateY(0px);   }
  to   { transform: rotate(37deg) translateY(-38px); }
}
@keyframes led-drift-2 {
  from { transform: rotate(36deg) translateY(0px);   }
  to   { transform: rotate(36deg) translateY(-30px); }
}
@keyframes led-drift-3 {
  from { transform: rotate(38deg) translateY(0px);   }
  to   { transform: rotate(38deg) translateY(-44px); }
}
@keyframes led-drift-4 {
  from { transform: rotate(35deg) translateY(0px);   }
  to   { transform: rotate(35deg) translateY(-26px); }
}
@keyframes led-drift-5 {
  from { transform: rotate(37deg) translateY(0px);   }
  to   { transform: rotate(37deg) translateY(-34px); }
}

/* ── Pulse LED: brilho vibrando (opacity, sem conflito com transform) ── */
@keyframes led-pulse-c {
  0%, 44%, 56%, 100% { opacity: 0.80; }
  50%                { opacity: 1.0;  }
}
@keyframes led-pulse-m {
  0%, 46%, 54%, 100% { opacity: 0.72; }
  50%                { opacity: 1.0;  }
}
@keyframes led-pulse-x {
  0%, 100% { opacity: 0.68; }
  50%      { opacity: 0.96; }
}

/* Conteúdo acima de tudo */
.authority > .container {
  position: relative;
  z-index: 3;
}

@media (prefers-reduced-motion: reduce) {
  .authority__streak { animation: none; opacity: 0.6; }
}
@media (max-width: 640px) {
  /* Streaks já ocultos — regra mantida por segurança */
  .authority__streak--2,
  .authority__streak--4 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .authority__aurora::before,
  .authority__aurora::after { animation: none; }
  .authority__grid::before  { animation: none; opacity: 0.7; }
  .metric__value             { animation: none; text-shadow: 0 0 16px rgba(92,225,230,0.10); }
}

.authority .title {
  font-weight: 200;
}
.authority .title strong {
  font-weight: 800;
  font-style: normal;
}

.authority__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-top: clamp(60px, 8vh, 100px);
  position: relative;
}

/* Linha LED no topo do grid — gradiente cyan → magenta, pulsando */
.authority__grid::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  z-index: 2;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(92,225,230,0.70) 22%,
    rgba(92,225,230,1.00) 38%,
    rgba(224,52,252,0.90) 62%,
    rgba(224,52,252,0.65) 78%,
    transparent 100%
  );
  box-shadow:
    0 0 6px 2px rgba(92,225,230,0.30),
    0 0 18px 4px rgba(92,225,230,0.12);
  animation: grid-line-pulse 3.8s ease-in-out infinite;
}

@keyframes grid-line-pulse {
  0%, 100% { opacity: 0.55; }
  50%       { opacity: 1.00; }
}

.metric {
  position: relative;
  padding: clamp(28px, 3.5vw, 44px) clamp(20px, 2.5vw, 32px);
  background: var(--surface-1);
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 220px;
}

.metric__label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-tertiary);
}

.metric__value {
  font-size: clamp(38px, 4.4vw, 60px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text-primary);
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  animation: metric-number-glow 5s ease-in-out infinite;
}

@keyframes metric-number-glow {
  0%, 100% { text-shadow: 0 0 16px rgba(92,225,230,0.08); }
  50%       { text-shadow: 0 0 28px rgba(92,225,230,0.22), 0 0 6px rgba(92,225,230,0.12); }
}

.metric__suffix {
  font-size: 0.5em;
  font-weight: 400;
  color: var(--text-tertiary);
  margin-left: 4px;
  letter-spacing: 0.05em;
}

.metric__desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  max-width: 26ch;
}

@media (max-width: 980px) {
  .authority__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
  .authority__grid { grid-template-columns: 1fr; }
  .metric { min-height: 200px; }
}

/* ==========================================================================
   LOGO MARQUEE (Dobra 04)
   ========================================================================== */

.brands {
  position: relative;
  padding-block: var(--section-y-tight);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.brands__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 60px;
  gap: 24px;
}

.brands__head .t-eyebrow {
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--text-primary);
  line-height: 1.2;
}

.brands__caption {
  font-size: 13px;
  color: var(--text-tertiary);
}

/* ==========================================================================
   ABOUT TEASER (Dobra 05)
   ========================================================================== */

.about-teaser {
  position: relative;
  padding-block: var(--section-y);
}

.about-teaser__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 60px 24px;
  align-items: center;
}

.about-teaser__media {
  grid-column: 1 / 5;
  aspect-ratio: 4/5;
  border-radius: var(--r-md);
}

.about-teaser__content {
  grid-column: 6 / -1;
  display: flex;
  flex-direction: column;
  gap: 28px;
  justify-content: center;
}

.about-teaser__title {
  font-size: clamp(24px, 3.2vw, 40px);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.1;
}

.about-teaser__body {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.75;
  color: var(--text-secondary);
  max-width: 52ch;
}

@media (max-width: 980px) {
  .about-teaser__media,
  .about-teaser__content { grid-column: 1 / -1; }
}

/* ==========================================================================
   DIFFERENTIATORS (Dobra 06)
   ========================================================================== */

.diffs {
  position: relative;
  padding-block: var(--section-y);
}

.diffs__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: clamp(48px, 6vh, 80px);
}

.diff {
  position: relative;
  padding: clamp(24px, 2.6vw, 32px);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), transparent 55%),
    var(--surface-1);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 260px;
  overflow: hidden;
  isolation: isolate;
  transition: border-color var(--d-base) var(--ease-smooth), transform var(--d-base) var(--ease-out-expo);
}

.diff::before {
  content: "";
  position: absolute;
  top: -40%;
  left: -20%;
  width: 80%;
  height: 80%;
  background: radial-gradient(circle, rgba(92, 225, 230, 0.18), transparent 65%);
  filter: blur(24px);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition: opacity 700ms var(--ease-smooth);
}

.diff:hover {
  border-color: rgba(92, 225, 230, 0.28);
  transform: translateY(-2px);
}

.diff:hover::before {
  opacity: 0.9;
}

.diff > * { position: relative; z-index: 1; }

.diff__num {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--text-tertiary);
}

.diff__title {
  font-size: clamp(16px, 1.35vw, 19px);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.25;
  margin-top: 0; 
  min-height: 1.5em;
  color: var(--text-primary);
}

.diff__desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.55;
}

.diff__icon {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-mid);
  border-radius: 14px;
  color: var(--accent-cyan);
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(92, 225, 230, 0.18), transparent 70%),
    linear-gradient(160deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  box-shadow:
    0 0 0 1px rgba(92, 225, 230, 0.08) inset,
    0 0 20px rgba(92, 225, 230, 0.18),
    0 12px 28px rgba(0,0,0,0.4);
  transition:
    color var(--d-base) var(--ease-smooth),
    border-color var(--d-base) var(--ease-smooth),
    box-shadow var(--d-base) var(--ease-smooth),
    transform 700ms var(--ease-out-expo);
}

.diff__icon svg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(92, 225, 230, 0.6));
  transition: filter var(--d-base) var(--ease-smooth);
}

.diff:hover .diff__icon svg {
  filter: drop-shadow(0 0 10px rgba(92, 225, 230, 0.9));
}

.diff:hover .diff__icon {
  border-color: rgba(92, 225, 230, 0.55);
  box-shadow:
    0 0 0 1px rgba(92, 225, 230, 0.18) inset,
    0 0 32px rgba(92, 225, 230, 0.35),
    0 16px 36px rgba(0,0,0,0.5);
  transform: translateY(-2px);
}


@media (max-width: 980px) {
  .diffs__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .diffs__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   CTA BLOCK (Dobra 07)
   ========================================================================== */

.cta-block {
  position: relative;
  padding-block: clamp(90px, 14vh, 180px);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  content-visibility: auto;
  contain-intrinsic-size: 720px;
}

.cta-block__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* +8% luminosidade: centro ligeiramente levantado + tint ciano frio no core */
  background:
    radial-gradient(55% 65% at 50% 50%,
      rgba(10, 18, 22, 1) 0%,
      rgba(6, 6, 9, 1) 60%,
      var(--black) 100%);
}

.cta-block__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint;
}

.cta-block__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(36px);
  transform: translate3d(0,0,0);
}

/* will-change só quando o bloco está na viewport — JS adiciona .is-near */
.cta-block.is-near .cta-block__orb { will-change: transform; }

/* CTA orbs substituídos por JS (.orb-js via orbs.js) */
.cta-block__orb--1,
.cta-block__orb--2,
.cta-block__orb--3 { display: none; }

/* Pausa quando o bloco sai da viewport — JS toggle .is-paused via IO */
.cta-block.is-paused .cta-block__orb { animation-play-state: paused; }

.cta-block__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(36px, 5vh, 56px);
}

.cta-block__title {
  font-size: clamp(32px, 4.6vw, 64px);
  font-weight: 200;
  letter-spacing: -0.03em;
  line-height: 1.05;
  max-width: 28ch;
  text-wrap: pretty;
}

.cta-block__title em {
  font-style: normal;
  font-weight: 800;
  color: var(--text-primary);
}

.cta-block__sub {
  font-size: var(--fs-sub);
  color: var(--text-secondary);
  max-width: 52ch;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.footer {
  position: relative;
  padding-block: 72px 28px;
  background: var(--black);
  border-top: 1px solid var(--line-soft);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr) 1.4fr;
  gap: 48px 32px;
  align-items: start;
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.footer__brand-mark {
  display: inline-flex;
  align-items: center;
  width: clamp(120px, 14vw, 160px);
  color: var(--text-primary);
  transition: color var(--d-base) var(--ease-smooth);
}

.footer__brand-mark svg {
  width: 100%;
  height: auto;
  display: block;
  fill: currentColor;
}

.footer__brand-mark:hover {
  color: var(--accent-cyan);
}

.footer__tagline {
  font-size: 13px;
  color: var(--text-secondary);
  max-width: 32ch;
  line-height: 1.55;
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__col-title {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.footer__link {
  font-size: 13px;
  color: var(--text-secondary);
  transition: color var(--d-fast) var(--ease-smooth), transform var(--d-fast) var(--ease-smooth);
}

.footer__link:hover {
  color: var(--accent-cyan);
}

.footer__cta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 28px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), transparent 55%),
    var(--surface-1);
  overflow: hidden;
  isolation: isolate;
}

.footer__cta-glow {
  position: absolute;
  top: -30%;
  right: -20%;
  width: 70%;
  height: 100%;
  background: radial-gradient(circle, rgba(92, 225, 230, 0.22), transparent 65%);
  filter: blur(28px);
  z-index: 0;
  pointer-events: none;
}

.footer__cta > * { position: relative; z-index: 1; }

.footer__cta-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.2;
  color: var(--text-primary);
}

.footer__cta-text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 56px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.01em;
  color: var(--text-tertiary);
  gap: 24px;
  flex-wrap: wrap;
}

.footer__bottom-text {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.footer__social {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

.footer__social-link {
  width: 36px;
  height: 36px;
  color: var(--text-secondary);
}

.footer__social-link:hover {
  color: var(--text-primary);
}

.footer__social-link svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 1100px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .footer__brand { grid-column: 1 / -1; }
  .footer__cta { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .footer__brand,
  .footer__cta { grid-column: 1 / -1; }
}

/* ==========================================================================
   STUB PAGES (Soluções, Portfólio, Sobre, Contato)
   ========================================================================== */

.page-hero {
  position: relative;
  padding-block: clamp(140px, 18vh, 220px) clamp(60px, 9vh, 100px);
  overflow: hidden;
  isolation: isolate;
}

.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(70% 50% at 30% 20%, rgba(18, 18, 22, 0.55), transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.85) 100%);
}

.page-hero--video .page-hero__bg {
  background:
    radial-gradient(70% 50% at 30% 20%, rgba(0,0,0,0.4), transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.2) 45%, rgba(0,0,0,0.9) 100%);
}

.page-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0.46;
  filter: saturate(1.08) brightness(1.07);
  pointer-events: none;
}

.page-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 35%, rgba(0,0,0,0.55) 75%, rgba(0,0,0,0.95) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.5) 0%, transparent 50%);
}

.page-hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}

.page-hero__eyebrow {
  grid-column: 1 / -1;
  margin-bottom: 32px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
}

.page-hero__title {
  grid-column: 1 / 11;
  font-size: clamp(34px, 5vw, 72px);
  font-weight: 200;
  letter-spacing: -0.028em;
  line-height: 1.02;
  max-width: 18ch;
  text-wrap: pretty;
}

.page-hero__title em {
  font-style: normal;
  font-weight: 800;
  color: var(--text-primary);
}

.page-hero__sub {
  grid-column: 1 / 8;
  margin-top: 28px;
  font-size: clamp(15px, 1.2vw, 17px);
  color: var(--text-secondary);
  line-height: 1.45;
  max-width: 52ch;
}

/* Botão CTA abaixo do carrossel na seção sectors */
.sectors__cta {
  display: flex;
  justify-content: center;
  margin-top: 56px;
}

/* Soluções */
.solutions {
  position: relative;
  padding-block: var(--section-y) var(--section-y);
}

.solution {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 60px 24px;
  align-items: center;
  padding-block: clamp(80px, 12vh, 140px);
  border-bottom: 1px solid var(--line-soft);
}

.solution:nth-child(even) {
  direction: rtl;
}

.solution > * { direction: ltr; }

.solution__media {
  grid-column: 1 / 7;
  aspect-ratio: 4/3;
  border-radius: var(--r-md);
}

.solution__body {
  grid-column: 8 / -1;
}

.solution__num {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-tertiary);
  margin-bottom: 16px;
  display: inline-block;
}

.solution__title {
  font-size: clamp(22px, 2.8vw, 34px);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.1;
  margin-bottom: 20px;
  transition: color var(--d-fast) var(--ease-smooth);
}

.solution:hover .solution__title {
  color: var(--accent-cyan);
}

.solution__desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 24px;
  max-width: 46ch;
}

.solution__items {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}

.solution__items li {
  font-size: 14px;
  color: var(--text-secondary);
  padding-left: 20px;
  position: relative;
}

.solution__items li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 1px;
  background: var(--accent-cyan);
}

/* .solution__equip-label / grid / tag removidos — substituídos por .equip-carousel */

@media (max-width: 980px) {
  .solution { grid-template-columns: 1fr; }
  .solution__media,
  .solution__body { grid-column: 1 / -1; }
  .solution:nth-child(even) { direction: ltr; }
}

/* ─── Equipment Showcase (catálogo único após as soluções) ─────── */
.equip-showcase {
  padding-block: var(--section-y);
}
.equip-showcase__title {
  font-size: clamp(26px, 3.2vw, 44px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-top: 12px;
  margin-bottom: clamp(32px, 4vh, 56px);
}
.equip-showcase .equip-carousel {
  grid-column: unset;
  margin-top: 0;
}

/* ─── Equipment Carousel ────────────────────────────────────────── */
.equip-carousel {
  grid-column: 1 / -1;
  margin-top: 0;               /* grid gap (60px) já provê separação suficiente */
  position: relative;          /* ancora o HUD glass */
  padding-top: 4px;            /* espaço para hover translateY(-2px) dos cards */
  padding-bottom: 92px;        /* espaço para o HUD flutuante (bottom:12 + ~40 altura + 40 buffer) */
  overflow: hidden;            /* clip correto: no container externo, não na track */
  isolation: isolate;          /* stacking context próprio para backdrop-filter do HUD */
}

/* Fallback label — visível só se JS não carregar (HUD é removido pelo JS) */
.equip-carousel__header {
  display: flex;
  align-items: center;
  margin-bottom: 14px;
}
.equip-carousel__label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.equip-carousel__track {
  display: flex;
  gap: 12px;
  /* overflow: hidden removido — clip é feito pelo container externo (.equip-carousel) */
  transition: transform 600ms var(--ease-cinematic);
  /* will-change adicionado via JS quando ativo para evitar desperdício de GPU */
}
/* Snap sem animação durante resize */
.equip-carousel__track.no-transition {
  transition: none !important;
}

/* Fades laterais — indicam conteúdo fora da visão */
.equip-carousel::before,
.equip-carousel::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
  z-index: 2;
  pointer-events: none;
  transition: opacity 400ms var(--ease-cinematic);
}
/* Esquerda — só quando passou do card 0 */
.equip-carousel::before {
  left: 0;
  background: linear-gradient(90deg, var(--black) 0%, transparent 100%);
  opacity: 0;
}
.equip-carousel.has-prev::before { opacity: 1; }
/* Direita — só quando há cards à frente */
.equip-carousel::after {
  right: 0;
  background: linear-gradient(270deg, var(--black) 0%, transparent 100%);
  opacity: 0;
}
.equip-carousel.has-next::after { opacity: 1; }

/* Card */
.equip-card {
  flex: 0 0 400px;
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--d-fast) var(--ease-smooth),
              box-shadow var(--d-fast) var(--ease-smooth),
              transform var(--d-fast) var(--ease-smooth);
}
.equip-card:hover {
  border-color: rgba(92,225,230,0.30);
  transform: translateY(-2px);
}

.equip-card__photo {
  aspect-ratio: 3 / 2;
  background: var(--surface-1);
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
/* Placeholder dashed box */
.equip-card__photo::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px dashed rgba(255,255,255,0.10);
  border-radius: var(--r-sm);
  pointer-events: none;
}
.equip-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Reframe: show the projector screen and full stage, crop out the empty seating */
.equip-card__photo img[src*="Projetores_resultado"] {
  object-position: center 0%;
}
/* Camera icon shown only when no img */
.equip-card__photo:not(:has(img))::after {
  content: "";
  width: 20px;
  height: 20px;
  background: rgba(255,255,255,0.12);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E") center/contain no-repeat;
}

.equip-card__info {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.equip-card__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.equip-card__sub {
  font-size: 11px;
  font-weight: 400;
  color: var(--text-tertiary);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* HUD — mesmo comportamento do carrossel da home */
.equip-carousel.is-visible .carousel__hud {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* Sobrescreve o bottom do componente (clamp(18px, 3vh, 32px)) que sobrepunha os cards */
.equip-carousel .carousel__hud {
  bottom: 12px;
}

/* Dots → barra de progresso única: colapsa tudo exceto o dot ativo */
.equip-carousel .carousel__dots {
  gap: 0;
  border-left: none;
  border-right: none;
  padding-inline: 2px;
}
.equip-carousel .carousel__dot {
  width: 0;
  min-width: 0;
  padding: 0;
  background: transparent;
  pointer-events: none;
  transition: width 350ms var(--ease-cinematic);
}
.equip-carousel .carousel__dot.is-active {
  width: 80px;
  height: 2px;
  background: rgba(255,255,255,0.15);
  pointer-events: none;
}

/* Card "E muito mais!" */
.equip-card--more {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  background: transparent;
  border: 1px dashed rgba(255,255,255,0.15);
}
.equip-card--more .equip-card__more-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
}
.equip-card--more .equip-card__more-text {
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 600;
  color: var(--text-tertiary);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.equip-card--more:hover {
  border-color: rgba(92,225,230,0.30);
  transform: none;
}
.equip-card--more.is-active {
  border-color: rgba(92,225,230,0.45);
  box-shadow: none;
}
.equip-card--more.is-active .equip-card__more-text {
  color: var(--accent-cyan);
}

/* Card ativo — destaque */
.equip-card.is-active {
  border-color: rgba(92,225,230,0.45);
  box-shadow: 0 0 0 1px rgba(92,225,230,0.12), 0 8px 28px rgba(0,0,0,0.5);
}
.equip-card.is-active .equip-card__name {
  color: var(--accent-cyan);
}

@media (max-width: 768px) {
  .equip-card { flex: 0 0 300px; }
  .equip-carousel { padding-bottom: 78px; }
}

@media (max-width: 540px) {
  .equip-carousel .carousel__dot          { width: 0; }
  .equip-carousel .carousel__dot.is-active { width: 56px; }
}

/* ==========================================================================
   Bento grid de equipamentos — substitui o carrossel
   ========================================================================== */

.equip-bento {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 160px;
  gap: 10px;
  margin-top: clamp(32px, 4vh, 56px);
}

/* Tamanhos dos cards */
.equip-card--hero    { grid-column: span 8; grid-row: span 2; }
.equip-card--pair    { grid-column: span 4; }
.equip-card--third   { grid-column: span 4; }
.equip-card--quarter { grid-column: span 3; }
.equip-card--half    { grid-column: span 6; }

/* No contexto bento o card preenche a célula da grid com overlay na info */
.equip-bento .equip-card {
  flex: unset;
  position: relative;
  display: block;
}

.equip-bento .equip-card__photo {
  position: absolute;
  inset: 0;
  aspect-ratio: unset;
  border-bottom: none;
}

.equip-bento .equip-card__info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 14px 13px;
  background: linear-gradient(0deg, rgba(8,8,8,0.88) 0%, rgba(8,8,8,0.5) 55%, transparent 100%);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.equip-bento .equip-card__name {
  font-size: 13px;
}

.equip-bento .equip-card--hero .equip-card__name {
  font-size: 16px;
}

.equip-bento .equip-card--hero .equip-card__sub {
  font-size: 12px;
}

/* Hover no bento */
.equip-bento .equip-card:hover {
  transform: none;
  border-color: rgba(92,225,230,0.35);
}

/* Responsive */
@media (max-width: 980px) {
  .equip-bento {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 140px;
  }
  .equip-card--hero    { grid-column: span 4; grid-row: span 2; }
  .equip-card--pair    { grid-column: span 2; }
  .equip-card--third   { grid-column: span 2; }
  .equip-card--quarter { grid-column: span 2; grid-row: span 1; }
  .equip-card--half    { grid-column: span 3; }
}

@media (max-width: 600px) {
  .equip-bento {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 120px;
    gap: 6px;
  }
  .equip-card--hero    { grid-column: span 2; grid-row: span 2; }
  .equip-card--pair,
  .equip-card--third,
  .equip-card--quarter { grid-column: span 2; }
  .equip-card--half    { grid-column: span 2; }
}

/* Portfólio */
.portfolio {
  position: relative;
  padding-block: var(--section-y);
  overflow: hidden;
}

.portfolio__ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.portfolio > .container {
  position: relative;
  z-index: 1;
}

.portfolio__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  margin-top: clamp(60px, 8vh, 100px);
}

.case {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-md);
  overflow: hidden;
  isolation: isolate;
  background: var(--surface-1);
  border: 1px solid var(--line-soft);
  transition: border-color var(--d-base) var(--ease-smooth);
}

.case:hover {
  border-color: var(--line-mid);
}

.case--lg { grid-column: span 8; }
.case--md { grid-column: span 4; }
.case--sm { grid-column: span 6; }

/* Card na mesma linha do grid estica para a mesma altura (align-items: stretch,
   padrão do grid); a mídia absorve essa diferença via flex-grow em vez de
   deixar espaço vazio sobrando abaixo do texto — mantém o bento proporcional. */
.case__media {
  aspect-ratio: 16/10;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.case--lg .case__media { aspect-ratio: 16/9; }

.case__body {
  padding: 24px 28px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
  flex-shrink: 0;
}

.case__title {
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.25;
}

.case__meta {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--text-tertiary);
  letter-spacing: 0.005em;
  margin-top: 6px;
}

.case__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 0;
  transition: opacity 600ms var(--ease-smooth);
  pointer-events: none;
}

[data-case-video] .case__media:hover .case__video,
[data-case-video] .case__video.is-playing {
  opacity: 1;
}

[data-case-video] .case__media {
  position: relative;
}
html.js-cursor [data-case-video] .case__media { cursor: none; }

.case__sound {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 3;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 50%;
  background: rgba(10,10,10,0.6);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  color: var(--white);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 400ms var(--ease-smooth), transform 400ms var(--ease-smooth), border-color 240ms var(--ease-smooth), background 240ms var(--ease-smooth);
}
html.js-cursor .case__sound { cursor: none; }

[data-case-video] .case__media:hover .case__sound,
.case__video.is-playing ~ .case__sound {
  opacity: 1;
  transform: translateY(0);
}

.case__sound:hover {
  border-color: rgba(92, 225, 230, 0.5);
  background: rgba(92, 225, 230, 0.1);
}

.case__sound .case__sound-icon--on { display: none; }
.case__sound.is-on .case__sound-icon--off { display: none; }
.case__sound.is-on .case__sound-icon--on { display: inline-flex; }
.case__sound.is-on {
  border-color: rgba(92, 225, 230, 0.6);
  background: rgba(92, 225, 230, 0.15);
}

@media not all and (any-pointer: fine) {
  .case__sound { opacity: 1; transform: none; cursor: auto; }
  [data-case-video] .case__media { cursor: auto; }
}

/* Botão play/pause — posicionado bottom-left, simétrico ao som (bottom-right) */
.case__play {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 3;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 50%;
  background: rgba(10,10,10,0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--white);
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 400ms var(--ease-smooth),
    transform 400ms var(--ease-smooth),
    border-color 240ms var(--ease-smooth),
    background 240ms var(--ease-smooth);
}

[data-case-video] .case__media:hover .case__play,
[data-case-video].is-playing .case__play {
  opacity: 1;
  transform: translateY(0);
}

.case__play:hover {
  border-color: rgba(92, 225, 230, 0.5);
  background: rgba(92, 225, 230, 0.12);
}

.case__play-icon--pause { display: none; }
[data-case-video].is-playing .case__play-icon--play  { display: none; }
[data-case-video].is-playing .case__play-icon--pause { display: inline-flex; }

@media not all and (any-pointer: fine) {
  .case__play { opacity: 1; transform: none; }
}

@media (max-width: 980px) {
  .case--lg, .case--md, .case--sm { grid-column: span 12; }
}

/* Process — Como atuamos */
.process {
  position: relative;
  padding-block: var(--section-y);
  border-top: 1px solid var(--line-soft);
  overflow: hidden;
  isolation: isolate;
}

/* Orbs substituídos por divs JS (.orb-js) em assets/js/orbs.js */
.process::before,
.process::after { display: none; }

.process__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-top: clamp(60px, 8vh, 100px);
  position: relative;
  z-index: 1;
}

/* Linha LED no topo — magenta → cyan (invertido vs. authority) */
.process__grid::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  z-index: 2;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(224,52,252,0.65) 22%,
    rgba(224,52,252,0.95) 38%,
    rgba(92,225,230,0.90) 62%,
    rgba(92,225,230,0.60) 78%,
    transparent 100%
  );
  box-shadow:
    0 0 6px 2px rgba(224,52,252,0.28),
    0 0 18px 4px rgba(224,52,252,0.10);
  animation: grid-line-pulse 4.2s ease-in-out infinite;
}

.process__step {
  background: var(--surface-1);
  padding: clamp(32px, 4vw, 48px) clamp(24px, 3vw, 36px);
  min-height: 280px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.process__num {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--accent-cyan);
  opacity: 0.45;
}

.process__title {
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 500;
  letter-spacing: -0.018em;
}

.process__desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* ── Diferencial: animação sequencial nos números — fluxo contínuo ──
   Cada número pulsa em sequência, evocando o processo em andamento.   */
@keyframes process-num-flow {
  0%, 15%, 100% {
    opacity: 0.40;
    text-shadow: none;
  }
  7% {
    opacity: 1;
    text-shadow:
      0 0 10px rgba(92,225,230,0.90),
      0 0 24px rgba(92,225,230,0.45),
      0 0 48px rgba(92,225,230,0.18);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .process__step:nth-child(1) .process__num {
    animation: process-num-flow 5.6s ease-in-out infinite 0s;
  }
  .process__step:nth-child(2) .process__num {
    animation: process-num-flow 5.6s ease-in-out infinite 1.4s;
  }
  .process__step:nth-child(3) .process__num {
    animation: process-num-flow 5.6s ease-in-out infinite 2.8s;
  }
  .process__step:nth-child(4) .process__num {
    animation: process-num-flow 5.6s ease-in-out infinite 4.2s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .process::before,
  .process::after              { animation: none; }
  .process__grid::before       { animation: none; opacity: 0.7; }
  .process__num                { opacity: 1; }
}

@media (max-width: 980px) {
  .process__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .process__grid { grid-template-columns: 1fr; }
}

/* About — Sobre a GIGA */
.about-intro {
  position: relative;
  padding-block: var(--section-y);
  overflow: hidden;
}

.about-intro__aurora {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.about-intro__block {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vh, 40px);
  max-width: 860px;
}

.about-intro__eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
}

.about-intro__lead {
  font-size: clamp(26px, 3.8vw, 52px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--text-primary);
}

.about-intro__lead em {
  font-style: normal;
  color: var(--accent-cyan);
}

.about-intro__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-left: 24px;
  border-left: 1px solid var(--line-mid);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.75;
  color: var(--text-secondary);
  max-width: 64ch;
}

@media (max-width: 980px) {
  .about-intro__block { max-width: 100%; }
}

/* ==========================================================================
   Timeline orgânica — linha viva tipo frequência sonora
   ========================================================================== */
.timeline {
  position: relative;
  padding-block: var(--section-y);
  border-top: 1px solid var(--line-soft);
  overflow: hidden;
}

.timeline .section__header { margin-bottom: clamp(60px, 8vh, 100px); }

.timeline__wave-wrap {
  position: relative;
  width: 100%;
  height: clamp(180px, 22vh, 280px);
}

.timeline__wave {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.timeline__wave-line,
.timeline__wave-glow {
  fill: none;
  stroke: currentColor;
  color: var(--white);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.timeline__wave-line {
  opacity: 0.85;
  filter: drop-shadow(0 0 6px rgba(255,255,255,0.22));
}

.timeline__wave-glow {
  opacity: 0.35;
  stroke-width: 2.4;
  filter: blur(8px);
  color: var(--accent-cyan);
}

.timeline__nodes {
  position: absolute;
  inset: 0;
  list-style: none;
  pointer-events: none;
}

.timeline__node {
  position: absolute;
  top: 50%;
  left: calc(var(--pos, 0.5) * 100%);
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.timeline__node-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 6px 14px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  color: var(--text-primary);
  font-family: inherit;
  transition: background 320ms var(--ease-smooth), border-color 320ms var(--ease-smooth), transform 320ms var(--ease-out-expo);
}

.timeline__node-dot {
  position: relative;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--white);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.18),
    0 0 18px rgba(255,255,255,0.5);
  transition: transform 500ms var(--ease-out-expo), box-shadow 500ms var(--ease-out-expo), background 350ms var(--ease-smooth);
}

.timeline__node-dot::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid rgba(92,225,230,0.4);
  opacity: 1;
  animation: timeline-node-ring 2.6s var(--ease-smooth) infinite;
}

.timeline__node-pulse {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: rgba(92,225,230,0.18);
  opacity: 0;
  animation: timeline-node-pulse 2.6s var(--ease-smooth) infinite;
  pointer-events: none;
}

@keyframes timeline-node-ring {
  0%   { transform: scale(1);    opacity: 0.55; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

@keyframes timeline-node-pulse {
  0%   { transform: scale(0.9); opacity: 0; }
  30%  { opacity: 0.6; }
  100% { transform: scale(1.9); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .timeline__node-dot::after,
  .timeline__node-pulse { animation: none; }
}

.timeline__node-label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text-primary);
  white-space: nowrap;
  transition: color 350ms var(--ease-smooth);
}

.timeline__node-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--accent-cyan);
  padding: 3px 8px;
  border: 1px solid rgba(92,225,230,0.35);
  border-radius: var(--r-pill);
  background: rgba(92,225,230,0.06);
  opacity: 0.85;
  transition: opacity 300ms var(--ease-smooth), background 300ms var(--ease-smooth);
}

.timeline__node-hint::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-cyan);
  box-shadow: 0 0 6px rgba(92,225,230,0.8);
}

.timeline__node-btn:hover {
  background: rgba(92,225,230,0.06);
  border-color: rgba(92,225,230,0.18);
  transform: translateY(-2px);
}

.timeline__node-btn:hover .timeline__node-dot,
.timeline__node--current .timeline__node-dot {
  transform: scale(1.28);
  background: var(--accent-cyan);
  box-shadow:
    0 0 0 1px rgba(92,225,230,0.4),
    0 0 28px rgba(92,225,230,0.65);
}

.timeline__node-btn:hover .timeline__node-hint {
  opacity: 1;
  background: rgba(92,225,230,0.14);
}

.timeline__node--current .timeline__node-hint {
  background: rgba(92,225,230,0.15);
  border-color: rgba(92,225,230,0.55);
}

/* Posicionamento vertical alterna (acima/abaixo da linha) — só desktop */
.timeline__node-btn { flex-direction: column-reverse; }
.timeline__node:nth-child(2n) .timeline__node-btn { flex-direction: column; }

@media (max-width: 880px) {
  .timeline__wave-wrap { height: 160px; }
  .timeline__node-label { font-size: 12px; }
  .timeline__node-hint { font-size: 9px; padding: 2px 6px; }
  .timeline__node-btn { gap: 8px; padding: 4px 10px; }
}

/* ==========================================================================
   Popup glass do timeline
   ========================================================================== */
.timeline__pop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-nav) + 5);
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: rgba(0,0,0,0.0);
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms var(--ease-cinematic), background 500ms var(--ease-smooth);
}

.timeline__pop.is-open {
  opacity: 1;
  pointer-events: auto;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.timeline__pop-card {
  position: relative;
  width: min(560px, 100%);
  max-height: 80vh;
  padding: clamp(36px, 4vw, 56px);
  background: rgba(20, 20, 20, 0.92);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-lg);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 40px 100px rgba(0,0,0,0.6);
  transform: translateY(24px) scale(0.96);
  transition: transform 600ms var(--ease-cinematic);
  overflow: auto;
}

.timeline__pop.is-open .timeline__pop-card {
  transform: translateY(0) scale(1);
}

.timeline__pop-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-soft);
  border-radius: 50%;
  background: rgba(255,255,255,0.02);
  color: var(--text-secondary);
  transition: color 240ms var(--ease-smooth), border-color 240ms var(--ease-smooth);
}
html.js-cursor .timeline__node-btn,
html.js-cursor .timeline__pop-close { cursor: none; }

.timeline__pop-close:hover {
  color: var(--white);
  border-color: var(--line-mid);
}

.timeline__pop-year {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--accent-cyan);
  margin-bottom: 14px;
}

.timeline__pop-body h3 {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.1;
  margin-bottom: 14px;
}

.timeline__pop-body p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 56ch;
  margin-bottom: 12px;
}

.timeline__pop-meta {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--text-tertiary);
}

/* Mission / Vision / Values */
.mvv {
  position: relative;
  padding-block: var(--section-y);
  border-top: 1px solid var(--line-soft);
  overflow: hidden;
  isolation: isolate;
}

.mvv__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-top: clamp(60px, 8vh, 100px);
  position: relative;
  z-index: 1;
}

/* Linha LED no topo da grid — magenta → cyan */
.mvv__grid::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  z-index: 2;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(224,52,252,0.55) 25%,
    rgba(92,225,230,0.85) 55%,
    rgba(224,52,252,0.45) 80%,
    transparent 100%);
  filter: blur(0.4px);
  animation: grid-line-pulse 4.0s ease-in-out infinite;
}

.mvv__cell {
  background: var(--surface-1);
  padding: clamp(36px, 4vw, 56px) clamp(28px, 3vw, 40px);
  min-height: 320px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  z-index: 1;
  transition: background var(--d-fast) var(--ease-smooth);
}
.mvv__cell:hover {
  background: rgba(92,225,230,0.03);
}

/* Label — base discreto, pulso sequencial LED */
.mvv__label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  opacity: 0.45;
}

.mvv__title {
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.15;
  transition: color var(--d-fast) var(--ease-smooth);
}
.mvv__cell:hover .mvv__title {
  color: var(--accent-cyan);
}

.mvv__body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.mvv__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.mvv__list li {
  font-size: 14px;
  color: var(--text-secondary);
  padding-left: 18px;
  position: relative;
}

.mvv__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 8px; height: 1px;
  background: var(--accent-cyan);
}

/* Pulso sequencial: Missão → Visão → Valores */
@keyframes mvv-label-glow {
  0%, 14%, 100% {
    opacity: 0.40;
    color: var(--text-tertiary);
    text-shadow: none;
  }
  7% {
    opacity: 1;
    color: var(--accent-cyan);
    text-shadow:
      0 0 8px  rgba(92,225,230,0.95),
      0 0 20px rgba(92,225,230,0.50),
      0 0 40px rgba(92,225,230,0.20);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .mvv__cell:nth-child(1) .mvv__label { animation: mvv-label-glow 5.4s ease-in-out infinite 0s;   }
  .mvv__cell:nth-child(2) .mvv__label { animation: mvv-label-glow 5.4s ease-in-out infinite 1.8s; }
  .mvv__cell:nth-child(3) .mvv__label { animation: mvv-label-glow 5.4s ease-in-out infinite 3.6s; }
}

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

@media (prefers-reduced-motion: reduce) {
  .mvv__grid::before { animation: none; opacity: 0.7; }
  .mvv__label        { opacity: 1; }
}

/* ==========================================================================
   Mobile — Otimizações específicas
   ========================================================================== */
@media (max-width: 880px) {
  .hero { padding-top: 88px; }
  .hero__title { font-size: clamp(30px, 8.5vw, 44px); line-height: 1.05; max-width: 14ch; }
  .hero__sub { grid-column: 1 / -1; font-size: 14px; max-width: 36ch; }
  .hero__actions { gap: 10px; }
  .hero__actions .btn { padding: 12px 18px; font-size: 12.5px; }
  .hero__scroll-cue { display: none; }
  .hero__footer { padding-block: 18px 22px; }

  .page-hero { padding-block: clamp(110px, 16vh, 160px) clamp(40px, 7vh, 64px); }
  .page-hero__title { grid-column: 1 / -1; font-size: clamp(28px, 8vw, 40px); line-height: 1.06; max-width: 16ch; }
  .page-hero__sub { grid-column: 1 / -1; font-size: 14px; margin-top: 18px; }

  .section__header { margin-bottom: clamp(36px, 6vh, 56px); gap: 16px; }
  .section__header .title,
  .section__header .lede { grid-column: 1 / -1; }

  .authority__grid { margin-top: clamp(36px, 5vh, 56px); }

  .about-teaser__grid { gap: 28px 16px; }
  .about-teaser__media { aspect-ratio: 16/10; max-height: 56vh; }
  .about-teaser__title { font-size: clamp(22px, 6vw, 30px); }
  .about-teaser__body { font-size: 14px; }
  .about-teaser__content { gap: 20px; }

  .diffs__grid { gap: 14px; margin-top: clamp(32px, 5vh, 56px); }
  .diff { min-height: 200px; padding: 22px; gap: 14px; }
  .diff__icon { width: 48px; height: 48px; }
  .diff__icon svg { width: 24px; height: 24px; }
  .diff__title { font-size: 17px; }
  .diff__desc { font-size: 13px; }

  .cta-block { padding-block: clamp(64px, 10vh, 100px); }
  .cta-block__title { font-size: clamp(24px, 7vw, 36px); line-height: 1.1; }
  .cta-block__sub { font-size: 14px; }

  .solutions { padding-block: clamp(40px, 6vh, 80px); }
  .solution { gap: 28px 16px; padding-block: clamp(40px, 6vh, 80px); }
  .solution__media { aspect-ratio: 16/10; }
  .solution__title { font-size: clamp(20px, 5.5vw, 26px); margin-bottom: 14px; }
  .solution__desc { font-size: 14px; margin-bottom: 18px; }
  .solution__items { margin-bottom: 22px; }
  .solution__items li { font-size: 13px; }

  .portfolio__grid { gap: 14px; margin-top: clamp(32px, 5vh, 56px); }
  .case__body { padding: 18px 20px; gap: 16px; }
  .case__title { font-size: 16px; }

  .marquee__item { font-size: 16px; height: 40px; padding: 0 12px; }
  .marquee__track { gap: 36px; }

  .footer { padding-block: 56px 24px; }
  .footer__grid { gap: 32px 20px; }
  .footer__cta { padding: 22px; }
  .footer__cta-title { font-size: 16px; }
  .footer__bottom { margin-top: 36px; font-size: 10px; }
  .footer__bottom > span:nth-child(2) { font-size: 11px; }

  .timeline { padding-block: clamp(56px, 9vh, 100px); }

  .mvv__cell { min-height: 220px; padding: 24px; gap: 14px; }
  .mvv__title { font-size: clamp(18px, 5vw, 22px); }
  .mvv__body { font-size: 13px; }

  .contact { padding-block: clamp(56px, 9vh, 100px); }
  .contact__grid { gap: 32px; }
  .contact__info { padding-top: 32px; gap: 24px; }
  .contact__info-value { font-size: 15px; }

  .about-intro { padding-block: clamp(48px, 8vh, 80px); }
  .about-intro__lead { font-size: clamp(20px, 5.5vw, 26px); }
  .about-intro__body { font-size: 14px; padding-left: 16px; }
}

@media (max-width: 540px) {
  .hero__title { font-size: clamp(28px, 9vw, 38px); }
  .hero__inner { gap: 16px; }
  .cta-block__title { font-size: clamp(22px, 7.5vw, 32px); }
  .page-hero__title { font-size: clamp(26px, 8.5vw, 36px); }
  .diffs__grid { grid-template-columns: 1fr; }
}

/* Mobile: vídeos hero — reduzir opacidade pra texto ficar legível */
@media (max-width: 880px) {
  .hero__video { opacity: 0.35; }
  .page-hero__video { opacity: 0.3; }
}


/* Mobile: desativar animações pesadas (orbs, aurora extra layer) */
@media (max-width: 540px), (prefers-reduced-motion: reduce) {
  .cta-block__orb--3 { display: none; }
  .orb-js            { display: none; } /* orbs JS desligados no mobile */
}

/* Contato */
.contact {
  position: relative;
  padding-block: var(--section-y);
}

.contact__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 60px 24px;
}

.contact__form {
  grid-column: 1 / 8;
  display: flex;
  flex-direction: column;
}

.contact__info {
  grid-column: 9 / -1;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-left: 40px;
  border-left: 1px solid var(--line-soft);
}

.contact__info-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact__info-label {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-tertiary);
}

.contact__info-value {
  font-size: 16px;
  color: var(--text-primary);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.contact__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 4px 0 0;
}

.contact__filter {
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-secondary);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.02);
  transition:
    border-color var(--d-fast) var(--ease-smooth),
    color var(--d-fast) var(--ease-smooth),
    background var(--d-fast) var(--ease-smooth);
}

.contact__filter:hover {
  border-color: var(--line-mid);
  color: var(--text-primary);
}

.contact__filter.is-active {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
}

.contact__submit {
  margin-top: 40px;
  align-self: flex-start;
}

@media (max-width: 980px) {
  .contact__form, .contact__info { grid-column: 1 / -1; }
  .contact__info { padding-left: 0; border-left: 0; padding-top: 40px; border-top: 1px solid var(--line-soft); }
}