/* ═══════════════════════════════════════════════════════════════════
   GabrielRodrigues — styles.css (v2 — restyle dark)

   ARQUITETURA DE TEMAS
   • DARK é o padrão (:root). Tons escolhidos pelo Estilista a partir
     das cores definidas pelo CEO:
       texto ......... #FFFFFF  branco absoluto (definido pelo CEO)
       fundo ......... #060606  preto forte — ~2% acima do #000 puro
                       para os glows vermelhos gradarem e as sombras
                       ainda existirem; branco sobre ele: 20,4:1 (AAA)
       superfícies ... #0B0B0D (folha) · #121215 (cards)
       vermelho ...... #FF2B38  elétrico (acentos, luzes, marca-texto)
                       #FF5C66  quente-claro (brilhos, hover, foco)
                       #E11D2E  profundo (fundo do CTA — branco sobre
                                ele: 4,75:1, AA em texto normal)
                       #B80D1F  brasa (orbes profundas)
   • CLARO ([data-theme="light"]) reaproveita a paleta v1 travada pelo
     Designer: creme #FAF7F2 / teal #0F766E / coral #FB7A59 / grafite
     #1F2937. Tudo flui pelos mesmos tokens semânticos.
   • Vermelho vibrante NUNCA em texto pequeno — só acentos/luzes/blocos.

   Regra de performance: animações contínuas usam APENAS transform e
   opacity (translate3d, scale, rotate). Sombras de hover vivem em
   pseudo-elementos e transitam por opacity. Glows são radial-gradients
   pré-desfocados (sem filter animado).
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tokens — DARK (padrão) ────────────────────────────────────────── */
:root {
  color-scheme: dark;

  --bg: #060606;
  --surface: #0B0B0D;
  --card: #121215;

  --text: #FFFFFF;
  --text-soft: rgba(255, 255, 255, 0.74);
  --heading: #FFFFFF;

  --red: #FF2B38;
  --red-hot: #FF5C66;
  --red-deep: #E11D2E;
  --red-ember: #B80D1F;

  --accent: var(--red);
  --mark: rgba(255, 43, 56, 0.42);      /* faixa do marca-texto */

  --glass: rgba(13, 13, 16, 0.55);
  --glass-strong: rgba(11, 11, 14, 0.8);
  --glass-edge: rgba(255, 255, 255, 0.14);
  --glass-edge-strong: rgba(255, 255, 255, 0.22);
  --shine: rgba(255, 255, 255, 0.16);

  --eyebrow-bg: rgba(255, 43, 56, 0.13);
  --eyebrow-edge: rgba(255, 43, 56, 0.4);
  --eyebrow-ink: #FFFFFF;

  --halo: rgba(6, 6, 6, 0.66);          /* leitura do título no hero */
  --mesh-base: linear-gradient(180deg, #060606 0%, #0A0708 55%, #0D0809 100%);
  --blob-a: rgba(255, 43, 56, 0.34);
  --blob-b: rgba(184, 13, 31, 0.3);
  --blob-c: rgba(255, 255, 255, 0.055);

  --media-bg: linear-gradient(160deg, #141418, #0A0A0C);
  --media-edge: rgba(255, 255, 255, 0.09);
  --swirl-1: rgba(255, 43, 56, 0.24);
  --swirl-2: rgba(184, 13, 31, 0.28);
  --swirl-3: rgba(255, 255, 255, 0.06);
  --badge-bg: rgba(225, 29, 46, 0.55);
  --badge-edge: rgba(255, 255, 255, 0.42);
  --badge-glow: 0 0 26px rgba(255, 43, 56, 0.45);

  --ph-edge: rgba(255, 255, 255, 0.17);
  --ph-bg: rgba(255, 255, 255, 0.032);
  --ph-ink: #FF5C66;

  --tint-a: rgba(255, 43, 56, 0.07);
  --tint-b: rgba(255, 255, 255, 0.035);
  --orb: rgba(255, 43, 56, 0.15);
  --orb-deep: rgba(184, 13, 31, 0.13);

  --cta-bg: var(--red-deep);
  --cta-text: #FFFFFF;
  --cta-glow: rgba(255, 43, 56, 0.5);
  --cta-ring: rgba(255, 43, 56, 0.8);

  --footer-bg: #0A0A0C;
  --footer-ink: rgba(255, 255, 255, 0.88);
  --footer-edge: rgba(255, 255, 255, 0.09);

  --fab-bg: rgba(16, 16, 19, 0.62);
  --fab-ring: rgba(255, 43, 56, 0.95);
  --menu-bg: rgba(13, 13, 16, 0.86);
  --backdrop: rgba(0, 0, 0, 0.58);

  --dot-idle: rgba(255, 255, 255, 0.28);

  --hairline-soft: rgba(255, 255, 255, 0.26);
  --hairline-hot: rgba(255, 43, 56, 0.6);
  --sheet-shadow: 0 -30px 80px rgba(0, 0, 0, 0.85);

  --focus: #FF5C66;

  --font-sans: "Nunito Sans", "Avenir Next", "Segoe UI Variable",
               "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;

  --radius-card: 20px;
  --container: 1120px;

  /* Alturas do hero preso: wrapper 300vh → 200vh de "pista" de scroll */
  --hero-span: 300vh;
}

/* ── Tokens — CLARO (paleta v1 reservada) ──────────────────────────── */
[data-theme="light"] {
  color-scheme: light;

  --bg: #FAF7F2;
  --surface: #FAF7F2;
  --card: #F1EFE8;

  --text: #1F2937;
  --text-soft: rgba(31, 41, 55, 0.78);
  --heading: #0F766E;

  --accent: #FB7A59;
  --mark: rgba(251, 122, 89, 0.34);

  --glass: rgba(207, 232, 228, 0.34);
  --glass-strong: rgba(207, 232, 228, 0.62);
  --glass-edge: rgba(143, 207, 199, 0.55);
  --glass-edge-strong: rgba(143, 207, 199, 0.8);
  --shine: rgba(255, 255, 255, 0.55);

  --eyebrow-bg: rgba(251, 122, 89, 0.12);
  --eyebrow-edge: rgba(251, 122, 89, 0.28);
  --eyebrow-ink: #0F766E;

  --halo: rgba(250, 247, 242, 0.75);
  --mesh-base: linear-gradient(180deg, #FAF7F2 0%, #F1F2EC 55%, #E7EFEB 100%);
  --blob-a: rgba(15, 118, 110, 0.42);
  --blob-b: rgba(251, 122, 89, 0.38);
  --blob-c: rgba(207, 232, 228, 0.85);

  --media-bg: linear-gradient(160deg, #EAF2EE, #DDEBE7);
  --media-edge: rgba(143, 207, 199, 0.5);
  --swirl-1: rgba(15, 118, 110, 0.32);
  --swirl-2: rgba(251, 122, 89, 0.28);
  --swirl-3: rgba(207, 232, 228, 0.88);
  --badge-bg: rgba(15, 118, 110, 0.66);
  --badge-edge: rgba(255, 255, 255, 0.55);
  --badge-glow: 0 0 0 rgba(0, 0, 0, 0);

  --ph-edge: rgba(15, 118, 110, 0.45);
  --ph-bg: rgba(207, 232, 228, 0.28);
  --ph-ink: #0F766E;

  --tint-a: rgba(251, 122, 89, 0.12);
  --tint-b: rgba(15, 118, 110, 0.08);
  --orb: rgba(251, 122, 89, 0.1);
  --orb-deep: rgba(15, 118, 110, 0.08);

  --cta-bg: #FB7A59;
  --cta-text: #1F2937;              /* grafite sobre coral: AA 5,6:1 */
  --cta-glow: rgba(251, 122, 89, 0.5);
  --cta-ring: rgba(251, 122, 89, 0.8);

  --footer-bg: #0F766E;
  --footer-ink: rgba(255, 255, 255, 0.92);
  --footer-edge: rgba(255, 255, 255, 0);

  --fab-bg: rgba(207, 232, 228, 0.55);
  --fab-ring: rgba(251, 122, 89, 0.85);
  --menu-bg: rgba(207, 232, 228, 0.78);
  --backdrop: rgba(31, 41, 55, 0.38);

  --dot-idle: rgba(15, 118, 110, 0.3);

  --hairline-soft: rgba(15, 118, 110, 0.18);
  --hairline-hot: rgba(251, 122, 89, 0.4);
  --sheet-shadow: 0 -26px 60px rgba(15, 118, 110, 0.18);

  --focus: #0F766E;
}

/* ── Reset enxuto ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Trava de scroll da abertura (aplicada/removida pelo effects.js;
   nunca fica presa: skip por clique/tecla + failsafe por tempo). */
html.is-locked, html.is-locked body { overflow: hidden; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;               /* 16px */
  line-height: 1.6;
  font-weight: 400;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
}

h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; border: 0; background: none; cursor: pointer; color: inherit; }
svg { display: block; }
mark { background: none; color: inherit; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.skip-link {
  position: fixed;
  top: 0.75rem; left: 0.75rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--red-deep);
  color: #fff;
  border-radius: 10px;
  font-weight: 600;
  transform: translateY(-300%);
}
[data-theme="light"] .skip-link { background: #0F766E; }
.skip-link:focus-visible {
  transform: none;
  outline-color: var(--focus);
}

/* ── Tipografia de títulos ─────────────────────────────────────────── */
.hero-title {
  /* H1: 40–56px desktop / 30–36px mobile */
  font-size: clamp(1.875rem, 4.2vw + 1rem, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--heading);
  white-space: nowrap;
}

.section-title {
  /* H2: 28–34px desktop / 22–26px mobile */
  font-size: clamp(1.375rem, 1.6vw + 0.9rem, 2.125rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--heading);
  max-width: 22ch;
}

.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--eyebrow-ink);
  background: var(--eyebrow-bg);
  border: 1px solid var(--eyebrow-edge);
  border-radius: 999px;
  padding: 0.35em 1em;
  margin-bottom: 1.1rem;
}

/* ═══════════════════ MARCA-TEXTO VERMELHO ═══════════════════
   <mark class="hl"> — faixa vermelha semi-transparente na metade
   inferior da linha, revelada com scaleX quando o bloco [data-reveal]
   que a contém entra na viewport. isolation garante que o ::before
   com z-index:-1 fique DENTRO do mark (atrás do texto, nunca atrás
   do fundo do pai — regra da casa nº 1). Marks simples são sempre
   palavra única (não quebram linha); no headline do time a faixa é
   por palavra (.hl--words .w). */
mark.hl {
  position: relative;
  isolation: isolate;
  display: inline-block;
  line-height: 1.2; /* box previsível p/ posicionar a faixa na linha */
}
mark.hl::before {
  content: "";
  position: absolute;
  left: -0.14em; right: -0.14em;
  bottom: 0.18em;
  height: 0.52em;
  z-index: -1;
  border-radius: 0.16em 0.1em 0.18em 0.08em;
  background: var(--mark);
  transform: skewX(-9deg);
  transform-origin: left center;
}
mark.hl--words { display: inline; isolation: auto; }
mark.hl--words::before { content: none; }
mark.hl--words .w {
  position: relative;
  isolation: isolate;
}
mark.hl--words .w::before {
  content: "";
  position: absolute;
  left: -0.12em; right: -0.16em;
  bottom: 0.16em;
  height: 0.52em;
  z-index: -1;
  border-radius: 0.14em 0.08em 0.16em 0.06em;
  background: var(--mark);
  transform: skewX(-9deg);
  transform-origin: left center;
}

/* Revelação (só com JS + movimento permitido) */
@media (prefers-reduced-motion: no-preference) {
  html.js mark.hl::before,
  html.js mark.hl--words .w::before {
    transform: scaleX(0) skewX(-9deg);
    transition: transform 0.8s cubic-bezier(0.25, 0.9, 0.3, 1) 0.35s;
  }
  html.js [data-reveal].is-visible mark.hl::before {
    transform: scaleX(1) skewX(-9deg);
  }
  /* No headline, as faixas varrem palavra a palavra DEPOIS da cascata */
  html.js .team-impact mark.hl--words .w::before {
    transition-delay: calc(0.75s + var(--mi, 0) * 0.16s);
  }
  html.js [data-reveal].is-visible mark.hl--words .w::before {
    transform: scaleX(1) skewX(-9deg);
  }
}

/* ═══════════════════ NAVBAR LIQUID GLASS (DARK) ═══════════════════ */
.navbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  backdrop-filter: blur(16px) saturate(1.35);
  border-bottom: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--shine), 0 8px 32px rgba(0, 0, 0, 0);
  overflow: hidden;
  transition: background-color 0.4s ease, box-shadow 0.4s ease,
              border-color 0.4s ease;
}

/* Luz varrendo o vidro (transform-only): brilho branco com miolo
   avermelhado — a "luz vermelha" passeando pela navbar. */
.navbar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    transparent 40%, rgba(255, 255, 255, 0.1) 47%,
    rgba(255, 43, 56, 0.16) 52%, rgba(255, 255, 255, 0.08) 57%,
    transparent 64%);
  transform: translate3d(-110%, 0, 0) skewX(-8deg);
  animation: nav-shimmer 7s ease-in-out infinite;
  pointer-events: none;
}
[data-theme="light"] .navbar::after {
  background: linear-gradient(105deg,
    transparent 42%, rgba(255, 255, 255, 0.35) 50%, transparent 58%);
}
@keyframes nav-shimmer {
  0%, 55%  { transform: translate3d(-110%, 0, 0) skewX(-8deg); }
  85%, 100% { transform: translate3d(110%, 0, 0) skewX(-8deg); }
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.35rem;               /* espaçosa no topo… */
  transition: padding 0.4s ease;        /* toggle discreto de estado */
}

/* …condensada ao rolar (classe aplicada pelo effects.js).
   Borda inferior ganha um fio de brilho vermelho sutil. */
.navbar.is-scrolled {
  background: var(--glass-strong);
  border-color: var(--glass-edge-strong);
  box-shadow: inset 0 1px 0 var(--shine),
              inset 0 -1px 0 rgba(255, 43, 56, 0.22),
              0 10px 36px rgba(0, 0, 0, 0.55);
}
[data-theme="light"] .navbar.is-scrolled {
  box-shadow: inset 0 1px 0 var(--shine), 0 8px 32px rgba(15, 118, 110, 0.16);
}
.navbar.is-scrolled .nav-inner { padding-block: 0.6rem; }

.brand {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}
[data-theme="light"] .brand { color: #0F766E; }

.nav-links {
  display: flex;
  gap: clamp(1.25rem, 3vw, 2.4rem);
  margin-left: auto;
}

.nav-link {
  position: relative;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-soft);
  padding-block: 0.3rem;
  transition: color 0.25s ease;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.nav-link:hover, .nav-link:focus-visible { color: var(--text); }
[data-theme="light"] .nav-link:hover,
[data-theme="light"] .nav-link:focus-visible { color: #0F766E; }
.nav-link:hover::after, .nav-link:focus-visible::after { transform: scaleX(1); }

/* Toggle de tema (sol/lua) — discreto, sempre visível */
.theme-toggle {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--text-soft);
  border: 1px solid var(--glass-edge);
  background: rgba(255, 255, 255, 0.04);
  transition: color 0.25s ease, border-color 0.25s ease,
              transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
[data-theme="light"] .theme-toggle {
  background: rgba(255, 255, 255, 0.35);
  color: #0F766E;
}
.theme-toggle:hover {
  color: var(--text);
  border-color: var(--glass-edge-strong);
  transform: rotate(24deg);
}
.theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: block; }

/* ═══════════════════ HERO PRESO (PINNED) ═══════════════════
   Sem JS: hero comum de 100vh (progressive enhancement).
   Com JS (html.js): wrapper de 300vh + palco sticky de 100vh. */
.hero { position: relative; z-index: 1; height: 100vh; height: 100svh; }
html.js .hero { height: var(--hero-span); }

.hero-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
}

/* Fundo do hero = .hero-mesh animado (sem vídeo). Acompanha o tema:
   preto/vermelho no dark, creme/teal/coral no claro. */

/* Stand-in: luzes vermelhas desfocadas flutuando no preto
   (radial-gradients pré-desfocados; anima só transform). */
.hero-mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--mesh-base);
}
.mesh-blob {
  position: absolute;
  border-radius: 50%;
}
.mesh-blob--a {
  width: 62vmax; height: 62vmax;
  top: -24%; left: -18%;
  background: radial-gradient(circle at 35% 35%, var(--blob-a), transparent 62%);
  animation: drift-a 26s ease-in-out infinite alternate;
}
.mesh-blob--b {
  width: 52vmax; height: 52vmax;
  bottom: -28%; right: -16%;
  background: radial-gradient(circle at 60% 55%, var(--blob-b), transparent 60%);
  animation: drift-b 32s ease-in-out infinite alternate;
}
.mesh-blob--c {
  width: 46vmax; height: 46vmax;
  top: 22%; right: 24%;
  background: radial-gradient(circle at 50% 50%, var(--blob-c), transparent 65%);
  animation: drift-c 22s ease-in-out infinite alternate;
}
@keyframes drift-a {
  to { transform: translate3d(9vw, 10vh, 0) rotate(18deg) scale(1.14); }
}
@keyframes drift-b {
  to { transform: translate3d(-8vw, -9vh, 0) rotate(-14deg) scale(1.18); }
}
@keyframes drift-c {
  to { transform: translate3d(-10vw, 7vh, 0) scale(0.86); }
}

/* Halo de leitura atrás do título + bloom vermelho respirando */
.hero-center {
  position: relative;
  z-index: 2;
  text-align: center;
  padding-inline: 1rem;
}
.hero-center::before {
  content: "";
  position: absolute;
  inset: -34% -20%;
  z-index: -1;
  background: radial-gradient(ellipse at center, var(--halo), transparent 68%);
}
.hero-center::after {
  content: "";
  position: absolute;
  inset: -60% -30%;
  z-index: -2;
  background: radial-gradient(ellipse at center,
    rgba(255, 43, 56, 0.14), transparent 62%);
  animation: bloom-breathe 5.5s ease-in-out infinite alternate;
}
[data-theme="light"] .hero-center::after { content: none; }
@keyframes bloom-breathe {
  from { transform: scale(0.92); opacity: 0.7; }
  to   { transform: scale(1.08); opacity: 1; }
}

/* Letras do título (spans criados pelo effects.js).
   Durante a abertura ficam visibility:hidden (espaço preservado — zero
   layout shift) e são "digitadas" uma a uma (classe .is-typed). */
.hero-letter {
  display: inline-block;
}
html.js .hero-letter.is-untyped { visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  html.js .hero-letter { will-change: transform, opacity, filter; }
  html.js .hero-letter.is-typed {
    animation: letter-pop 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.4);
  }
}
@keyframes letter-pop {
  from { opacity: 0; transform: translate3d(0, 0.28em, 0) scale(0.86); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* Caret da digitação (inserido/movido pelo effects.js) */
.hero-caret {
  display: inline-block;
  width: 0.07em;
  height: 0.82em;
  margin-left: 0.05em;
  vertical-align: -0.05em;
  border-radius: 2px;
  background: var(--red);
  box-shadow: 0 0 16px rgba(255, 43, 56, 0.85);
  animation: caret-blink 0.85s steps(2, start) infinite;
}
[data-theme="light"] .hero-caret {
  background: #FB7A59;
  box-shadow: 0 0 12px rgba(251, 122, 89, 0.7);
}
.hero-caret.is-done {
  opacity: 0;
  animation: none;
  transition: opacity 0.4s ease;
}
@keyframes caret-blink {
  0%, 54% { opacity: 1; }
  55%, 100% { opacity: 0; }
}

/* Indicador "role para descobrir" — escondido durante a digitação */
.hero-scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 2.2rem;
  z-index: 2;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  color: var(--text-soft);
  pointer-events: none;
}
.hero-scroll-hint.is-waiting { visibility: hidden; }
.hint-label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.hint-arrow {
  color: var(--accent);
  animation: hint-bounce 1.8s cubic-bezier(0.45, 0, 0.3, 1) infinite;
}
@keyframes hint-bounce {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.9; }
  55%      { transform: translate3d(0, 9px, 0); opacity: 0.45; }
}

/* ═══════════════════ CHUVA DE CÓDIGO (v3 — canvas, hacker/fireworks) ═══
   Dois canvases (ver effects.js, função createCodeRain): #hero-rain fica
   dentro do .hero-stage (mesma camada do .hero-mesh, atrás do halo/título);
   #border-rain é fixo, cobre a viewport inteira mas só desenha nas faixas
   estreitas das bordas esquerda/direita, acompanhando o scroll da página.
   Ambos: pointer-events:none, glow real via shadowBlur (canvas 2D), somem
   no tema claro (assinatura do dark) e ficam parados em reduced-motion. */
.code-rain {
  pointer-events: none;
  display: block;
}
#hero-rain {
  position: absolute;
  inset: 0;
  z-index: 1; /* acima do .hero-video/.hero-mesh (z:0/1) — sempre visível quando o vídeo estiver ativo */
  width: 100%;
  height: 100%;
}
.code-rain--border {
  position: fixed;
  inset: 0;
  z-index: 3; /* acima do fundo/seções (.hero z:1, .sheet z:2), abaixo de navbar/fab/menu/cometa */
  width: 100vw;
  height: 100vh;
}
/* #hero-rain fica no hero (sempre escuro), então continua visível no
   tema claro. #border-rain corre pelas bordas de TODAS as seções, então
   some no claro — é assinatura do tema escuro. */
[data-theme="light"] #border-rain {
  display: none;
}

/* ═══════════════════ GRID DE PIXELS CENTRALIZADO (v3) ═══════════════════
   Bloco pequeno e contido atrás do título (mesma camada do mesh/chuva).
   Células geradas via JS (effects.js, PIXEL_GRID) com twinkle autônomo
   e aleatório — ".is-lit" acende com glow vermelho e transição suave. */
.pixel-grid-wrap {
  position: absolute;
  inset: 0;
  z-index: 1; /* acima do .hero-video/.hero-mesh (z:0/1), mesma família do #hero-rain */
  display: grid;
  place-items: center;
  pointer-events: none;
}
.pixel-grid {
  width: min(64vw, 560px);
  height: min(32vh, 220px);
  display: grid;
  gap: 3px;
  overflow: hidden;
}
.pixel-cell {
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.018);
  box-shadow: 0 0 0 rgba(255, 43, 56, 0);
  transition: background 0.45s ease, box-shadow 0.45s ease, transform 0.45s ease;
}
.pixel-cell.is-lit {
  background: var(--red);
  box-shadow: 0 0 8px 1px var(--red-hot), 0 0 20px 4px rgba(255, 43, 56, 0.5);
  transform: scale(1.06);
}
/* O grid de pixels vive só no hero, que é sempre escuro — por isso
   mantém o brilho vermelho mesmo com o tema claro ativo. */

/* ═══════════════════ FOLHA QUE SOBE SOBRE O HERO ═══════════════════
   Com JS entra -50vh sobre o fim do wrapper do hero: quando o
   progresso chega a 1, o topo da folha está a ~50vh (metade da tela).
   Movimento 100% nativo do scroll — zero jank. No dark, a borda
   superior ganha um fio de luz branco→vermelho. */
.sheet {
  position: relative;
  z-index: 2;
  background: var(--surface);
}
html.js .sheet {
  margin-top: -50vh;
  border-radius: 34px 34px 0 0;
  box-shadow: var(--sheet-shadow);
}
html.js .sheet::before {
  content: "";
  position: absolute;
  top: 0;
  left: 6%;
  right: 6%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, var(--hairline-soft) 28%, var(--hairline-hot) 50%,
    var(--hairline-soft) 72%, transparent);
  pointer-events: none;
}

/* ── Seções ────────────────────────────────────────────────────────── */
.section { padding-block: clamp(4rem, 9vh, 6.5rem); scroll-margin-top: 4.5rem; }
.section--servicos { padding-top: clamp(3.5rem, 8vh, 5.5rem); }

/* ═══════════════════ LUZES / ORBES VERMELHAS ═══════════════════
   Radial-gradients pré-desfocados, deriva lenta (só transform).
   Seções que recebem orbes formam contexto de empilhamento próprio
   (z-index:0) para conter os orbes com z-index:-1 — regra da casa. */
.section--servicos,
.section--equipe,
.section--cta,
.section--clientes {
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.glow-orb {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}
.glow-orb--serv-a {
  width: 48vmax; height: 48vmax;
  top: -18%; right: -22%;
  background: radial-gradient(circle at 50% 50%, var(--orb), transparent 62%);
  animation: orb-drift-a 24s ease-in-out infinite alternate;
}
.glow-orb--serv-b {
  width: 36vmax; height: 36vmax;
  bottom: -20%; left: -16%;
  background: radial-gradient(circle at 50% 50%, var(--orb-deep), transparent 60%);
  animation: orb-drift-b 30s ease-in-out infinite alternate;
}
.glow-orb--equipe {
  width: 52vmax; height: 52vmax;
  top: 4%; left: -24%;
  background: radial-gradient(circle at 50% 50%, var(--orb-deep), transparent 62%);
  animation: orb-drift-b 34s ease-in-out infinite alternate;
}
.glow-orb--equipe-b {
  width: 40vmax; height: 40vmax;
  top: 30%; right: -20%;
  background: radial-gradient(circle at 50% 50%, var(--orb), transparent 60%);
  animation: orb-drift-a 28s ease-in-out infinite alternate;
}
.glow-orb--cta-a {
  width: 44vmax; height: 44vmax;
  top: -26%; left: 18%;
  background: radial-gradient(circle at 50% 50%, var(--orb), transparent 60%);
  animation: orb-drift-a 26s ease-in-out infinite alternate;
}
.glow-orb--cta-b {
  width: 34vmax; height: 34vmax;
  bottom: -30%; right: -10%;
  background: radial-gradient(circle at 50% 50%, var(--orb-deep), transparent 62%);
  animation: orb-drift-b 22s ease-in-out infinite alternate;
}
@keyframes orb-drift-a {
  to { transform: translate3d(-7vw, 6vh, 0) scale(1.15); }
}
@keyframes orb-drift-b {
  to { transform: translate3d(6vw, -5vh, 0) scale(1.1); }
}

/* ═══════════════════ ONDA DOS 3 VÍDEOS ═══════════════════ */
.wave-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3.2vw, 3rem);
  align-items: start;
  margin-top: 1.5rem;
}

/* Onda: 1º e 3º mais EMBAIXO, 2º mais EM CIMA */
.wave-item--down { margin-top: clamp(3.5rem, 9vw, 6.5rem); }
.wave-item--up   { margin-top: 0; }

.wave-item {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.wave-caption {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: clamp(1.125rem, 0.4vw + 1rem, 1.25rem);  /* H3 18–20px */
  font-weight: 600;
  color: var(--text);
}
.caption-dot {
  width: 10px; height: 10px;
  border-radius: 3px;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(255, 43, 56, 0.55);
  transform: rotate(45deg);
  flex: none;
}
[data-theme="light"] .caption-dot { box-shadow: none; }

/* Quadrado 1:1, cantos ~20px, stand-in animado + play */
.wave-media {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-card);
  overflow: hidden;
  isolation: isolate;
  background: var(--media-bg);
  border: 1px solid var(--media-edge);
  display: grid;
  place-items: center;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* Sombra + bloom vermelho de hover em pseudo-elemento (opacity) */
.wave-media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 26px 54px rgba(0, 0, 0, 0.65), 0 0 44px rgba(255, 43, 56, 0.22);
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}
[data-theme="light"] .wave-media::after {
  box-shadow: 0 26px 48px rgba(15, 118, 110, 0.24);
}
.wave-item:hover .wave-media::after,
.wave-item:focus-within .wave-media::after { opacity: 1; }

.wave-item:hover .wave-media { transform: translate3d(0, -8px, 0) rotate(-1.2deg) scale(1.01); }
.wave-item--up:hover .wave-media { transform: translate3d(0, -8px, 0) rotate(1.2deg) scale(1.01); }

/* Vídeo real do CEO preenchendo a moldura .wave-media (1:1, cantos já
   arredondados pelo overflow:hidden do container) */
.wave-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fundo animado do stand-in (só transform) */
.wave-media-bg {
  position: absolute;
  inset: -42%;
  z-index: -1;
  animation: media-swirl 20s linear infinite;
}
.wave-media--a .wave-media-bg {
  background:
    radial-gradient(circle at 28% 30%, var(--swirl-1), transparent 44%),
    radial-gradient(circle at 72% 66%, var(--swirl-2), transparent 46%),
    radial-gradient(circle at 60% 26%, var(--swirl-3), transparent 52%);
}
.wave-media--b .wave-media-bg {
  background:
    radial-gradient(circle at 66% 30%, var(--swirl-2), transparent 44%),
    radial-gradient(circle at 30% 68%, var(--swirl-1), transparent 48%),
    radial-gradient(circle at 48% 50%, var(--swirl-3), transparent 55%);
}
.wave-media--c .wave-media-bg {
  background:
    radial-gradient(circle at 40% 62%, var(--swirl-1), transparent 46%),
    radial-gradient(circle at 66% 32%, var(--swirl-3), transparent 50%),
    radial-gradient(circle at 74% 72%, var(--swirl-2), transparent 42%);
}
@keyframes media-swirl {
  to { transform: rotate(360deg); }
}
.wave-media--b .wave-media-bg { animation-duration: 26s; animation-direction: reverse; }
.wave-media--c .wave-media-bg { animation-duration: 23s; }

.play-badge {
  position: relative;
  z-index: 1;
  width: 62px; height: 62px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--badge-bg);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1.5px solid var(--badge-edge);
  box-shadow: inset 0 1px 0 var(--shine), var(--badge-glow);
  animation: play-breathe 3.2s ease-in-out infinite;
  transition: transform 0.35s ease;
}
.play-badge svg { margin-left: 3px; }
.wave-item:hover .play-badge { transform: scale(1.1); }
@keyframes play-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

/* ═══════════════════ EQUIPE / DIFERENCIAIS (v2) ═══════════════════ */
.section--equipe {
  background:
    radial-gradient(ellipse at 12% 8%, var(--tint-b), transparent 55%),
    radial-gradient(ellipse at 88% 92%, var(--tint-a), transparent 50%);
}

/* Frase de impacto centralizada no meio da tela */
.team-impact {
  position: relative;
  isolation: isolate;
  min-height: min(68vh, 640px);
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
}
.team-impact .section-title { max-width: 18ch; }

/* Bloom vermelho atrás da frase (escala/opacity ao revelar + respiração) */
.team-halo {
  position: absolute;
  z-index: -1;
  top: 50%; left: 50%;
  width: min(64vmin, 560px);
  height: min(64vmin, 560px);
  margin: calc(min(64vmin, 560px) / -2) 0 0 calc(min(64vmin, 560px) / -2);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 43, 56, 0.2), rgba(184, 13, 31, 0.1) 45%, transparent 66%);
  pointer-events: none;
}
[data-theme="light"] .team-halo {
  background: radial-gradient(circle at 50% 50%,
    rgba(251, 122, 89, 0.18), transparent 62%);
}

/* Cascata de palavras (spans .w com --wi definidos no HTML) */
@media (prefers-reduced-motion: no-preference) {
  html.js .team-headline .w {
    display: inline-block;
    opacity: 0;
    transform: translate3d(0, 0.65em, 0) rotate(2.5deg);
    transition: opacity 0.55s ease, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1.1);
    transition-delay: calc(var(--wi, 0) * 75ms);
  }
  html.js .team-impact.is-visible .w {
    opacity: 1;
    transform: none;
  }
  html.js .team-halo {
    opacity: 0;
    transform: scale(0.55);
    transition: opacity 1.1s ease 0.25s, transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s;
  }
  html.js .team-impact.is-visible .team-halo {
    opacity: 1;
    transform: scale(1);
    animation: halo-breathe 6s ease-in-out 1.6s infinite alternate;
  }
}
@keyframes halo-breathe {
  from { transform: scale(1); }
  to   { transform: scale(1.12); }
}

/* ── Camada de efeitos da frase de impacto (v3.1) ────────────────────
   Aura conic girando + anéis "sonar" pulsando + faíscas flutuando.
   Tudo centrado atrás do texto (z-index:-1), só transform/opacity. */
.team-fx {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  display: grid;
  place-items: center;
}
.team-fx > * {
  grid-area: 1 / 1;      /* empilha tudo no centro da grade */
}

/* Aura: leque de luz vermelha girando lentamente por trás da frase */
.team-aura {
  width: min(72vmin, 620px);
  height: min(72vmin, 620px);
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0deg,
    rgba(255, 43, 56, 0.16) 40deg,
    transparent 90deg,
    rgba(255, 92, 102, 0.12) 160deg,
    transparent 210deg,
    rgba(184, 13, 31, 0.16) 300deg,
    transparent 360deg);
  opacity: 0;
  mix-blend-mode: screen;
  filter: blur(6px);
}

/* Anéis sonar: expandem do centro e esmaecem */
.team-ring {
  width: min(36vmin, 300px);
  height: min(36vmin, 300px);
  border-radius: 50%;
  border: 1.5px solid rgba(255, 43, 56, 0.5);
  opacity: 0;
  transform: scale(0.4);
}

/* Faíscas: pontos de luz flutuando em volta (cada uma parte da própria
   posição --sx/--sy e sobe um pouco enquanto pisca) */
.team-spark {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red-hot);
  box-shadow: 0 0 10px 2px rgba(255, 43, 56, 0.75);
  opacity: 0;
  transform: translate3d(var(--sx, 0), var(--sy, 0), 0);
}
.team-spark--1 { --sx: -16vmin; --sy: -12vmin; }
.team-spark--2 { --sx: 18vmin;  --sy: -9vmin; }
.team-spark--3 { --sx: -21vmin; --sy: 8vmin; }
.team-spark--4 { --sx: 15vmin;  --sy: 13vmin; }
.team-spark--5 { --sx: -6vmin;  --sy: -16vmin; }
.team-spark--6 { --sx: 9vmin;   --sy: 16vmin; }
[data-theme="light"] .team-spark {
  background: #FB7A59;
  box-shadow: 0 0 10px 2px rgba(251, 122, 89, 0.6);
}
[data-theme="light"] .team-ring { border-color: rgba(251, 122, 89, 0.5); }
[data-theme="light"] .team-aura {
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(251, 122, 89, 0.18) 40deg, transparent 90deg,
    rgba(15, 118, 110, 0.12) 160deg, transparent 210deg,
    rgba(251, 122, 89, 0.16) 300deg, transparent 360deg);
}

/* Só animam quando a seção entra na tela e com movimento permitido */
@media (prefers-reduced-motion: no-preference) {
  .team-impact.is-visible .team-aura {
    opacity: 1;
    animation: team-aura-spin 22s linear infinite;
  }
  .team-impact.is-visible .team-ring {
    animation: team-ring-pulse 4.2s ease-out infinite;
  }
  .team-impact.is-visible .team-ring--2 { animation-delay: 1.4s; }
  .team-impact.is-visible .team-ring--3 { animation-delay: 2.8s; }
  .team-impact.is-visible .team-spark {
    animation: team-spark-float 5s ease-in-out infinite;
  }
  .team-impact.is-visible .team-spark--2 { animation-delay: 0.7s; animation-duration: 5.6s; }
  .team-impact.is-visible .team-spark--3 { animation-delay: 1.5s; animation-duration: 4.6s; }
  .team-impact.is-visible .team-spark--4 { animation-delay: 2.2s; animation-duration: 6s; }
  .team-impact.is-visible .team-spark--5 { animation-delay: 0.3s; animation-duration: 5.2s; }
  .team-impact.is-visible .team-spark--6 { animation-delay: 3s; animation-duration: 4.8s; }
}
@keyframes team-aura-spin {
  to { transform: rotate(360deg); }
}
@keyframes team-ring-pulse {
  0%   { opacity: 0; transform: scale(0.4); }
  18%  { opacity: 0.7; }
  100% { opacity: 0; transform: scale(1.85); }
}
@keyframes team-spark-float {
  0%, 100% { opacity: 0; transform: translate3d(var(--sx, 0), var(--sy, 0), 0); }
  35%, 65% { opacity: 0.9; }
  50%      { opacity: 0.9; transform: translate3d(var(--sx, 0), calc(var(--sy, 0) - 12px), 0); }
}

/* Pares alternados imagem+texto */
.team-rows {
  display: grid;
  gap: clamp(3.5rem, 9vh, 6rem);
  padding-block: clamp(1rem, 4vh, 2.5rem);
}
.team-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 7vw, 6rem);
  align-items: center;
}
/* Flip só no desktop: perfil à direita, texto à esquerda */
@media (min-width: 900px) {
  .team-row--flip .team-media { grid-column: 2; grid-row: 1; }
  .team-row--flip .team-text  { grid-column: 1; grid-row: 1; justify-self: end; text-align: right; }
  .team-row--flip .team-text::after { margin-left: auto; }
}

.team-media {
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.team-row:hover .team-media { transform: translate3d(0, -6px, 0); }

.team-text {
  font-size: clamp(1.375rem, 1.5vw + 0.9rem, 2rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text);
  max-width: 15ch;
}
.team-text::after {
  content: "";
  display: block;
  width: 52px;
  height: 4px;
  border-radius: 4px;
  margin-top: 0.6rem;
  background: var(--accent);
  box-shadow: 0 0 14px rgba(255, 43, 56, 0.5);
}
[data-theme="light"] .team-text::after { box-shadow: none; }

/* Moldura tracejada de placeholder (imagens da equipe) */
.placeholder-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 2px dashed var(--ph-edge);
  border-radius: var(--radius-card);
  background: var(--ph-bg);
  display: grid;
  place-items: center;
  color: var(--ph-ink);
}
.placeholder-art { opacity: 0.9; }

/* Moldura de mídia real (vídeo/foto do CEO) — mesma proporção do
   placeholder, mas sem a borda tracejada: overflow escondido + cover. */
.media-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--media-edge);
  background: var(--media-bg);
}
.team-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ícone de equipe (sem moldura/foto) — símbolo permanente, não um
   placeholder aguardando imagem. */
.team-icon {
  display: grid;
  place-items: center;
  color: var(--ph-ink);
}
.team-icon-art { opacity: 0.9; }

/* ═══════════════════ CTA FINAL ═══════════════════ */
.section--cta {
  padding-block: clamp(5rem, 12vh, 8rem);
  background:
    radial-gradient(ellipse at 50% 18%, var(--tint-a), transparent 62%),
    radial-gradient(ellipse at 50% 120%, var(--tint-b), transparent 60%);
}
.cta-inner {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 1.4rem;
}
.cta-title { max-width: 24ch; }

.cta-btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.05rem 2.1rem;
  border-radius: 999px;
  background: var(--cta-bg);
  color: var(--cta-text);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* Glow persistente (camada com opacity) */
.cta-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: 0 16px 48px var(--cta-glow), 0 0 80px var(--cta-glow);
  opacity: 0.7;
  transition: opacity 0.3s ease;
}
/* Pulso (anel que escala e some — transform + opacity) */
.cta-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  border: 2px solid var(--cta-ring);
  animation: cta-pulse 2.6s cubic-bezier(0.3, 0, 0.4, 1) infinite;
}
@keyframes cta-pulse {
  0%       { transform: scale(1);          opacity: 0.75; }
  70%, 100% { transform: scale(1.22, 1.58); opacity: 0; }
}
.cta-btn:hover, .cta-btn:focus-visible { transform: translate3d(0, -3px, 0) scale(1.02); }
.cta-btn:hover::before { opacity: 1; }
.cta-btn:active { transform: translate3d(0, -1px, 0) scale(0.99); }

.cta-arrow { transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); }
.cta-btn:hover .cta-arrow { transform: translate3d(5px, 0, 0); }

/* ═══════════════════ CLIENTES — CARROSSEL (v2) ═══════════════════ */
.section--clientes { padding-top: clamp(2.5rem, 6vh, 4rem); }

/* Visor pequeno e centrado, automático: um card em foco por vez, com
   espiada (esmaecida) das fotos vizinhas. Sem setas nem arrasto — o
   viewport recorta com fade nas bordas (mask-image) para as laterais
   nunca terminarem num corte seco, e o track desliza via transform
   (JS calcula o passo e troca o índice sozinho). */
.carousel {
  max-width: 460px;
  margin-inline: auto;
  margin-top: 0.5rem;
}

.carousel-viewport {
  overflow: hidden;
  padding-block: 0.5rem 1.1rem;
  -webkit-mask-image: linear-gradient(
    to right, transparent 0%, #000 14%, #000 86%, transparent 100%
  );
  mask-image: linear-gradient(
    to right, transparent 0%, #000 14%, #000 86%, transparent 100%
  );
}

.carousel-track {
  display: flex;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  will-change: transform;
  transition: transform 0.65s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.carousel-slide {
  flex: 0 0 min(74vw, 320px);        /* ~tamanho dos quadrados dos vídeos */
  opacity: 0.32;
  transform: scale(0.9);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.carousel-slide.is-active {
  opacity: 1;
  transform: scale(1);
}

/* Foto real (quando o CEO descomentar o <img>) */
.carousel-img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-card);
  border: 1px solid var(--media-edge);
}

/* Placeholder elegante dark: moldura com ícone de chat */
.chat-placeholder {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-card);
  border: 1.5px dashed var(--ph-edge);
  background:
    radial-gradient(circle at 78% 18%, var(--tint-a), transparent 55%),
    var(--card);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.9rem;
  color: var(--ph-ink);
}
.ph-path {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-soft);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 0.4rem;
}
.carousel-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 0;
}
.carousel-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dot-idle);
  transform: scale(1);
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),
              background-color 0.3s ease, box-shadow 0.3s ease;
}
.carousel-dot:hover::before { transform: scale(1.25); }
.carousel-dot.is-active::before {
  background: var(--accent);
  box-shadow: 0 0 10px rgba(255, 43, 56, 0.6);
  transform: scale(1.3);
}
[data-theme="light"] .carousel-dot.is-active::before { box-shadow: none; }

/* ═══════════════════ FOOTER ═══════════════════ */
.footer {
  position: relative;
  z-index: 2;
  background: var(--footer-bg);
  color: var(--footer-ink);
  border-top: 1px solid var(--footer-edge);
  padding-block: 2.25rem;
}
.footer :focus-visible { outline-color: #fff; }
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.footer-brand { font-weight: 700; font-size: 1.05rem; color: #fff; }
.footer-links { display: flex; gap: clamp(1rem, 3vw, 2rem); flex-wrap: wrap; }
.footer-link {
  position: relative;
  font-size: 0.9rem;
  font-weight: 600;
  padding-block: 0.2rem;
}
.footer-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
[data-theme="light"] .footer-link::after { background: rgba(250, 247, 242, 0.9); }
.footer-link:hover::after, .footer-link:focus-visible::after { transform: scaleX(1); }
.footer-year { font-size: 0.9rem; opacity: 0.85; }

/* ═══════════════════ BOLINHA FLUTUANTE (MOBILE) ═══════════════════ */
.fab {
  position: fixed;
  right: 1.1rem;
  bottom: 1.25rem;
  z-index: 60;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  display: none;                     /* só existe no mobile */
  align-items: center;
  justify-content: center;
  background: var(--fab-bg);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border: 1.5px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--shine), 0 12px 30px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
}
[data-theme="light"] .fab {
  box-shadow: inset 0 1px 0 var(--shine), 0 12px 30px rgba(15, 118, 110, 0.28);
}
/* Anel vermelho brilhante (o destaque do dark) */
.fab::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid var(--fab-ring);
  box-shadow: 0 0 18px rgba(255, 43, 56, 0.5), inset 0 0 10px rgba(255, 43, 56, 0.22);
}
[data-theme="light"] .fab::before { box-shadow: none; }
.fab:active { transform: scale(0.92); }

.fab-dot { fill: var(--text); }
.fab-dot--accent { fill: var(--red); }
[data-theme="light"] .fab-dot { fill: #0F766E; }
[data-theme="light"] .fab-dot--accent { fill: #FB7A59; }

/* Wobble líquido ao rolar (classe aplicada pelo effects.js) */
.fab.is-wobbling { animation: fab-jelly 0.65s ease; }
@keyframes fab-jelly {
  0%   { transform: scale(1, 1); }
  28%  { transform: scale(1.14, 0.86); }
  52%  { transform: scale(0.9, 1.12); }
  74%  { transform: scale(1.06, 0.95); }
  100% { transform: scale(1, 1); }
}

/* ═══════════════════ OVERLAY DO MENU MOBILE ═══════════════════ */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.32s ease, visibility 0s linear 0.32s;
}
.menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.32s ease;
}
.menu-backdrop {
  position: absolute;
  inset: 0;
  background: var(--backdrop);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}
.menu-panel {
  position: absolute;
  right: 1.1rem;
  bottom: 5.9rem;                    /* nasce da bolinha */
  min-width: 236px;
  padding: 1.1rem 1.2rem 1.2rem;
  border-radius: 24px;
  background: var(--menu-bg);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  border: 1.5px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--shine), 0 24px 54px rgba(0, 0, 0, 0.6),
              0 0 40px rgba(255, 43, 56, 0.12);
  transform: translate3d(0, 14px, 0) scale(0.92);
  transform-origin: 88% 100%;
  transition: transform 0.32s cubic-bezier(0.2, 0.7, 0.2, 1);
}
[data-theme="light"] .menu-panel {
  box-shadow: inset 0 1px 0 var(--shine), 0 24px 54px rgba(15, 118, 110, 0.32);
}
.menu-overlay.is-open .menu-panel { transform: none; }

.menu-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 0.4rem;
}
[data-theme="light"] .menu-title { color: #0F766E; }
.menu-close {
  position: absolute;
  top: 0.8rem;
  right: 0.9rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  transition: transform 0.25s ease;
}
[data-theme="light"] .menu-close {
  color: #0F766E;
  background: rgba(250, 247, 242, 0.6);
}
.menu-close:hover { transform: rotate(90deg); }

.menu-list { display: grid; }
.menu-link {
  display: block;
  padding: 0.78rem 0.4rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid var(--glass-edge);
  transition: color 0.2s ease, transform 0.25s ease;
}
.menu-list li:last-child .menu-link { border-bottom: 0; }
.menu-link:hover { color: var(--red-hot); transform: translate3d(4px, 0, 0); }
[data-theme="light"] .menu-link:hover { color: #0F766E; }

/* Trava o scroll do fundo com o menu aberto (app.js) */
body.menu-open { overflow: hidden; }

/* ═══════════════════ COMETA SEGUINDO O MOUSE ═══════════════════
   Pequeno ponto de luz vermelha com rastro (lerp via rAF no
   effects.js). Só em ponteiro fino + hover; pointer-events none;
   desativado em prefers-reduced-motion. Criado via JS — sem JS não
   existe. */
.comet {
  position: fixed;
  top: 0; left: 0;
  z-index: 95;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.comet.is-on { opacity: 1; }
.comet-dot {
  position: absolute;
  top: 0; left: 0;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%,
    rgba(255, 92, 102, 0.85), rgba(255, 43, 56, 0.4) 55%, transparent 75%);
}
.comet-dot--core {
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  background: radial-gradient(circle at 45% 40%,
    #FFFFFF 0%, #FF5C66 38%, rgba(255, 43, 56, 0) 72%);
  box-shadow: 0 0 18px 3px rgba(255, 43, 56, 0.55);
}
[data-theme="light"] .comet-dot {
  background: radial-gradient(circle at 40% 40%,
    rgba(251, 122, 89, 0.8), rgba(251, 122, 89, 0.35) 55%, transparent 75%);
}
[data-theme="light"] .comet-dot--core {
  background: radial-gradient(circle at 45% 40%,
    #FFFFFF 0%, #FB7A59 42%, rgba(251, 122, 89, 0) 72%);
  box-shadow: 0 0 16px 2px rgba(251, 122, 89, 0.5);
}

/* ═══════════════════ REVEAL DE SEÇÕES (IntersectionObserver) ═══════ */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  html.js [data-reveal][data-reveal-order="2"] { transition-delay: 0.12s; }
  html.js [data-reveal][data-reveal-order="3"] { transition-delay: 0.24s; }
  html.js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }
}

/* ═══════════════════ RESPONSIVO ═══════════════════ */
@media (max-width: 899px) {
  .nav-links { display: none; }        /* links somem no mobile… */
  .fab { display: flex; }              /* …entra a bolinha flutuante */
  .theme-toggle { margin-left: auto; } /* brand + toggle nas pontas */

  .wave-grid { grid-template-columns: 1fr; gap: 2.25rem; }
  .wave-item--down, .wave-item--up { margin-top: 0; }
  .wave-media { max-width: 420px; }

  .team-impact { min-height: 58vh; }
  .team-row {                          /* empilha: imagem, depois texto */
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .team-text { max-width: 24ch; }

  html.js .sheet { border-radius: 26px 26px 0 0; }
}

@media (min-width: 900px) {
  .fab, .menu-overlay { display: none; }
}

/* ═══════════════════ FALLBACK SEM backdrop-filter ═══════════════════ */
@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  .navbar { background: rgba(10, 10, 13, 0.96); }
  .navbar.is-scrolled { background: rgba(9, 9, 12, 0.99); }
  .fab { background: rgba(14, 14, 17, 0.96); }
  .menu-panel { background: rgba(12, 12, 15, 0.98); }
  .menu-backdrop { background: rgba(0, 0, 0, 0.72); }
  .play-badge { background: rgba(225, 29, 46, 0.85); }

  [data-theme="light"] .navbar { background: rgba(237, 245, 243, 0.94); }
  [data-theme="light"] .navbar.is-scrolled { background: rgba(237, 245, 243, 0.98); }
  [data-theme="light"] .fab { background: rgba(207, 232, 228, 0.96); }
  [data-theme="light"] .menu-panel { background: rgba(226, 240, 237, 0.98); }
  [data-theme="light"] .menu-backdrop { background: rgba(31, 41, 55, 0.55); }
  [data-theme="light"] .play-badge { background: rgba(15, 118, 110, 0.88); }
}

/* ═══════════════════ MOVIMENTO REDUZIDO ═══════════════════
   Hero despinado, sem digitação/trava (effects.js também respeita),
   letras estáticas, luzes paradas, cometa desligado (JS), cascata e
   marca-texto visíveis de imediato, carrossel com scroll instantâneo
   (JS troca smooth→auto), reveals viram conteúdo visível. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .hero { height: 100vh; height: 100svh; }
  html.js .sheet { margin-top: 0; }

  .navbar::after,
  .mesh-blob,
  .glow-orb,
  .hero-center::after,
  .team-halo,
  .wave-media-bg,
  .play-badge,
  .hint-arrow,
  .hero-caret,
  .cta-btn::after,
  .fab.is-wobbling { animation: none; }

  .cta-btn::after { opacity: 0; }
  html.js .hero-letter { will-change: auto; }
  html.js .hero-letter.is-untyped { visibility: visible; }

  .navbar, .nav-inner, .wave-media, .team-media, .cta-btn, .cta-arrow,
  .menu-overlay, .menu-panel, .menu-close, .menu-link, .fab,
  .theme-toggle, .carousel-track, .carousel-slide, .carousel-dot::before,
  .comet, .nav-link::after, .footer-link::after, .pixel-cell {
    transition-duration: 0.01ms;
  }

  .carousel-slide { opacity: 1; transform: none; }
}