/* ============================================================
   VITZ COMPANY — style.css
   ============================================================
   ===== ETAPA 1: FUNDAÇÃO =====
   - Identidade visual (custom properties)
   - Reset / base
   - Navegação fixa + menu mobile (overlay)
   - <main> placeholder (250vh para testar scroll)
   - Footer responsivo

   (próximas etapas: hero, ticker, seções, parallax, reveal, etc.)
   ============================================================ */


/* ============================================================
   1. CUSTOM PROPERTIES
   ============================================================ */
:root {
  /* Inks (base escura) */
  --ink:       #06101F;
  --ink-2:     #0C1B33;
  --ink-3:     #122544;

  /* Brand */
  --vitz-blue:       #1E477D;
  --vitz-blue-glow:  #3A7BD9;
  --vitz-orange:     #E88C3E;

  /* Tipografia / utilitários */
  --bone:         #F4F1EA;
  --mute:         #7A8499;
  --line:         rgba(255, 255, 255, 0.08);
  --line-strong:  rgba(255, 255, 255, 0.16);

  /* Fontes */
  --font-display: 'Fraunces', 'Times New Roman', serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'DM Mono', monospace;

  /* Padding lateral responsivo do .wrap */
  --pad-x: clamp(1.25rem, 4vw, 2.5rem);

  /* Easings */
  --ease-out:        cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);

  /* Nav */
  --nav-h: 76px;
}


/* ============================================================
   2. RESET / BASE
   ============================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

html, body,
h1, h2, h3, h4, h5, h6,
p, ul, ol, figure, blockquote { margin: 0; padding: 0; }

ul, ol { list-style: none; }
a       { color: inherit; text-decoration: none; }
button  { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, svg{ display: block; max-width: 100%; }

html, body { overflow-x: clip; }

html { scroll-behavior: auto; /* Lenis assume o controle */ }

body {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--vitz-orange);
  color: var(--ink);
}


/* ============================================================
   3. UTILITIES
   ============================================================ */
.wrap {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--pad-x);
}


/* ============================================================
   4. NAVIGATION
   ============================================================ */
/* Nav agora é um CARD DE VIDRO FLUTUANTE no topo, centralizado,
   com cantos arredondados retangulares (não pill). */
.nav {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  width: calc(100% - 2rem);
  max-width: 1280px;
  padding: 0.45rem 1.5rem 0.45rem 1.25rem;
  background: rgba(12, 27, 51, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
          backdrop-filter: blur(20px) saturate(140%);
  transition: background 320ms var(--ease-out),
              border-color 320ms var(--ease-out),
              box-shadow 320ms var(--ease-out);
}

.nav.scrolled {
  background: rgba(6, 16, 31, 0.72);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  border-radius: 20px;
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: 52px;
  width: 100%;
}

@media (max-width: 480px) {
  .nav {
    width: calc(100% - 1.5rem);
    top: 0.75rem;
    padding: 0.4rem 1.1rem 0.4rem 0.95rem;
  }
}

/* Logo */
.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  color: var(--bone);
}
.nav__logo-mark {
  width: 10px;
  height: 10px;
  background: var(--vitz-orange);
  border-radius: 2px;
  box-shadow: 0 0 14px rgba(232, 140, 62, 0.45);
}
.nav__logo-text { line-height: 1; }

/* Links */
.nav__links {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  margin-inline: auto;
}
.nav__links a {
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--bone);
  opacity: 0.78;
  transition: opacity 200ms var(--ease-out), color 200ms var(--ease-out);
}
.nav__links a:hover {
  opacity: 1;
  color: var(--vitz-orange);
}

/* CTA pill */
.nav__cta {
  display: inline-flex;
  align-items: center;
  padding: 0.7rem 1.35rem;
  border-radius: 999px;
  background: var(--vitz-orange);
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: transform 220ms var(--ease-out),
              box-shadow 260ms var(--ease-out);
}
.nav__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -8px rgba(232, 140, 62, 0.6);
}

/* Burger (mobile) */
.nav__burger {
  display: none;
  width: 40px;
  height: 40px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  margin-left: auto;
}
.nav__burger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--bone);
  transition: transform 250ms var(--ease-out), opacity 250ms var(--ease-out);
}

@media (max-width: 900px) {
  .nav__links,
  .nav__cta { display: none; }
  .nav__burger { display: flex; }
  .nav__inner { gap: 1rem; }
}


/* ============================================================
   5. MOBILE MENU OVERLAY
   ============================================================ */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 520ms var(--ease-out-expo),
              opacity 420ms var(--ease-out);
}
.menu-overlay.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.menu-overlay__close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 48px;
  height: 48px;
  font-size: 2rem;
  line-height: 1;
  color: var(--bone);
  display: grid;
  place-items: center;
  border-radius: 999px;
  transition: background 200ms var(--ease-out);
}
.menu-overlay__close:hover { background: var(--line-strong); }

.menu-overlay__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  text-align: center;
}
.menu-overlay__links a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 8vw, 3rem);
  letter-spacing: -0.01em;
  color: var(--bone);
  transition: color 200ms var(--ease-out);
}
.menu-overlay__links a:hover { color: var(--vitz-orange); }

.menu-overlay__cta {
  display: inline-flex;
  padding: 0.85rem 1.7rem;
  border-radius: 999px;
  background: var(--vitz-orange);
  color: var(--ink);
  font-weight: 500;
  letter-spacing: 0.02em;
}


/* ============================================================
   6. MAIN
   ============================================================ */
main { position: relative; }


/* ============================================================
   ===== ETAPA 2 (REFEITA): HERO + TICKER =====
   ============================================================ */

/* ---------- 6.1 HERO ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding-top: calc(var(--nav-h) + 2.5rem);
  padding-bottom: 7rem;
}

/* Fundo do hero — radial glows + linear que TERMINA em --ink (#06101F)
   para conectar sem corte com o topo do ticker (parte do sistema de
   transições verticais; ver bloco "TRANSIÇÕES DE FUNDO" no final). */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 75% 55% at 100% 0%,
      rgba(30, 71, 125, 0.32) 0%,
      rgba(30, 71, 125, 0.10) 38%,
      transparent 68%
    ),
    radial-gradient(
      ellipse 55% 45% at 0% 100%,
      rgba(58, 123, 217, 0.06) 0%,
      transparent 60%
    ),
    linear-gradient(180deg, var(--ink-2) 0%, #0A172A 100%);
}

/* ===== ETAPA 2 (AJUSTE): HEADLINE + SVG =====
   Grid em 2 colunas no desktop — coluna de texto NÃO cresce além
   de 680px, mesmo em telas ultrawide. O excedente vai para o SVG. */
.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 680px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2.5rem, 5vw, 6rem);
  margin-top: auto;
  margin-bottom: auto;
}

/* --- Coluna esquerda --- */
.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  max-width: 680px;
}

.hero__label {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mute);
}
.hero__label-dash {
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--vitz-orange);
}

/* Headline serifada, leve, arejada — 4 linhas fixas */
.hero__headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 4vw, 4.6rem);
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--bone);
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
  margin-bottom: 0.25rem;
}
.hero__headline em {
  font-style: italic;
  font-weight: 500;
  color: var(--vitz-orange);
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
}

/* Máscaras de linha para reveal */
.hero__headline .line-mask {
  display: block;
  overflow: hidden;
  padding: 0.06em 0 0.08em; /* protege descendentes */
}
.hero__headline .line {
  display: block;
  will-change: transform;
}

.hero__subtitle {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  line-height: 1.55;
  color: var(--bone);
  opacity: 0.85;
  max-width: 480px;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.25rem;
  margin-top: 0.5rem;
}

/* Botões reusáveis */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.95rem 1.7rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: transform 220ms var(--ease-out),
              background 220ms var(--ease-out),
              color 220ms var(--ease-out),
              border-color 220ms var(--ease-out),
              box-shadow 260ms var(--ease-out);
}
.btn--primary {
  background: var(--vitz-orange);
  color: var(--ink);
}
.btn--primary:hover {
  transform: translateY(-2px);
  background: #D97E32;
  box-shadow: 0 14px 36px -12px rgba(232, 140, 62, 0.55);
}
.btn--ghost {
  background: transparent;
  color: var(--bone);
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  border-radius: 0;
}
.btn--ghost:hover { color: var(--vitz-orange); }
.btn__arrow {
  display: inline-block;
  transition: transform 220ms var(--ease-out);
}
.btn--ghost:hover .btn__arrow { transform: translateX(6px); }

/* Indicador "role para descobrir" */
.hero__scroll {
  position: absolute;
  bottom: 2rem;
  left: var(--pad-x);
  z-index: 1;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  color: var(--mute);
  transition: color 200ms var(--ease-out);
}
.hero__scroll:hover { color: var(--bone); }

.hero__scroll-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.hero__scroll-arrow {
  font-size: 1rem;
  line-height: 1;
  animation: hero-bounce 1.8s var(--ease-out) infinite;
}
@keyframes hero-bounce {
  0%, 100% { transform: translateY(0);   opacity: 0.6; }
  50%      { transform: translateY(8px); opacity: 1;   }
}

/* --- Coluna direita: imagem hero (rede neural) ---
   Float ambiente e parallax de scroll são controlados via GSAP
   (Etapa 7) — coexistem sem conflito de transform. */
.hero__visual {
  position: relative;
  width: 100%;
  max-width: 680px;   /* +21% (era 560) — mais presença visual */
  margin-inline: auto;
  display: block;
  will-change: transform;
}
.hero__visual-img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 0 28px rgba(30, 71, 125, 0.28));
}

/* (Animações .mesh__* removidas — o SVG da malha foi substituído
   pela imagem real hero.png) */

/* --- Responsivo --- */
@media (max-width: 900px) {
  .hero__inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .hero__visual {
    order: 2;
    max-width: 380px;
    opacity: 0.85;
  }
  .hero__content { order: 1; }
}

@media (max-width: 600px) {
  .hero { padding-bottom: 6rem; }
  .hero__content { gap: 1.5rem; }
  .hero__ctas { width: 100%; }
  .hero__ctas .btn--primary { flex: 1 1 100%; justify-content: center; }
  .hero__visual { display: none; }
  .hero__scroll { bottom: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll-arrow,
  .hero__visual {
    animation: none;
  }
}


/* ---------- 6.2 TICKER / MARQUEE ---------- */
.ticker {
  position: relative;
  background: var(--ink-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.marquee {
  position: relative;
  height: 80px;
  display: flex;
  align-items: center;
  overflow: hidden;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image:
    linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.marquee__track {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 2.25rem;
  padding-left: 2.25rem;
  will-change: transform;
  animation: marquee-scroll 40s linear infinite;
}

.marquee__item {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: clamp(0.82rem, 0.95vw, 0.98rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone);
  opacity: 0.88;
}

.marquee__sep {
  color: var(--vitz-orange);
  font-size: 0.62rem;
  line-height: 1;
  transform: translateY(-1px);
}

@keyframes marquee-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}


/* ============================================================
   ===== ETAPA 3: QUEM SOMOS + O CENÁRIO =====
   - Padrão visual compartilhado: .section / .section__*
   - Fundo alterna entre --ink e --ink-2 para criar ritmo
   ============================================================ */

/* ---------- 7.1 Base de seção ---------- */
.section {
  position: relative;
  padding: clamp(5rem, 9vw, 9rem) 0;
  scroll-margin-top: var(--nav-h);
}
.section--ink   { background: var(--ink);   }
.section--ink-2 { background: var(--ink-2); }

.section__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
}

.section__label {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mute);
}
.section__label-dash {
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--vitz-orange);
  flex-shrink: 0;
}
.section__label-text {
  display: inline-block;
}

.section__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 3.5vw, 3.6rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--bone);
  max-width: 22ch;
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
}
.section__title--xl {
  font-size: clamp(2.4rem, 4vw, 4rem);
  max-width: 28ch;
}
.section__title em {
  font-style: italic;
  font-weight: 500;
  color: var(--vitz-orange);
}

.section__lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1rem, 1.1vw, 1.1rem);
  line-height: 1.65;
  color: var(--bone);
  opacity: 0.9;
  max-width: 600px;
}

.section__caption {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--mute);
  margin-top: -0.5rem;
}

.section__close {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1rem, 1.1vw, 1.15rem);
  line-height: 1.6;
  color: var(--bone);
  opacity: 0.92;
  max-width: 640px;
  margin-top: 1rem;
}
.section__close em {
  font-style: normal;
  color: var(--bone);
  font-weight: 500;
  border-bottom: 1px solid rgba(232, 140, 62, 0.4);
  padding-bottom: 1px;
}

.section__cta { margin-top: 0.5rem; }


/* ---------- 7.2 Quem Somos — Value Grid ---------- */
.value-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  width: 100%;
  max-width: 880px;
  margin: 1rem 0;
}

.value-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.75rem 1.75rem 1.5rem;
  background: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: background 240ms var(--ease-out),
              border-color 240ms var(--ease-out),
              transform 240ms var(--ease-out);
}
.value-card:hover {
  background: #142A4F;
  border-color: var(--line-strong);
  transform: translateY(-3px);
}

.value-card__num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--vitz-orange);
}

.value-card__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.2vw, 1.25rem);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--bone);
}


/* ---------- 7.3 O Cenário — Compare A | → | B ---------- */
.compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: clamp(1.5rem, 3vw, 3rem);
  width: 100%;
  margin-top: 1.5rem;
}

.compare__col {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 2rem;
  border-radius: 12px;
  border: 1px solid var(--line);
}
.compare__col--a {
  background: rgba(255, 255, 255, 0.015);
}
.compare__col--b {
  background: linear-gradient(180deg, rgba(232, 140, 62, 0.05) 0%, rgba(30, 71, 125, 0.06) 100%);
  border-color: var(--line-strong);
}

.compare__heading {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
}
.compare__col--b .compare__heading { color: var(--bone); opacity: 0.95; }

.compare__heading-mark {
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--mute);
  flex-shrink: 0;
}
.compare__heading-mark--positive {
  height: 0;
  width: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 7px solid var(--vitz-orange);
  background: transparent;
}

.compare__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  line-height: 1.45;
}
.compare__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding-left: 0;
}
.compare__list li::before {
  flex-shrink: 0;
  margin-top: 0.55em;
  display: inline-block;
}

/* Bloco A — sóbrio */
.compare__list--problems li {
  color: var(--bone);
  opacity: 0.62;
}
.compare__list--problems li::before {
  content: '';
  width: 10px;
  height: 1px;
  background: var(--mute);
}

/* Bloco B — afirmativo */
.compare__list--wins li {
  color: var(--bone);
  opacity: 1;
}
.compare__list--wins li::before {
  content: '';
  width: 6px;
  height: 6px;
  margin-top: 0.5em;
  background: var(--vitz-orange);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(232, 140, 62, 0.5);
}

/* Divisor com seta */
.compare__divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-width: 1.5rem;
}
.compare__divider-line {
  width: 1px;
  flex: 1;
  background: linear-gradient(180deg, transparent 0%, var(--line-strong) 50%, transparent 100%);
  min-height: 40px;
}
.compare__divider-arrow {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--vitz-orange);
  transform: rotate(0deg);
}


/* ---------- 7.4 Responsivo ---------- */
@media (max-width: 900px) {
  .compare {
    grid-template-columns: 1fr;
  }
  .compare__divider {
    flex-direction: row;
    min-height: auto;
    padding: 0.5rem 0;
  }
  .compare__divider-line {
    width: auto;
    height: 1px;
    flex: 1;
    background: linear-gradient(90deg, transparent 0%, var(--line-strong) 50%, transparent 100%);
    min-height: 0;
  }
  .compare__divider-arrow {
    transform: rotate(90deg);
  }
}

@media (max-width: 640px) {
  .value-grid {
    grid-template-columns: 1fr;
  }
  .compare__col { padding: 1.5rem; }
}


/* ============================================================
   ===== ETAPA 4: PROPÓSITO + ECOSSISTEMA =====
   ============================================================ */

/* ---------- 8.1 Propósito — purpose-list (linhas editoriais) ---------- */
.purpose-list {
  list-style: none;
  width: 100%;
  max-width: 880px;
  margin: 0.5rem 0 0;
  padding: 0;
  counter-reset: purpose;
}

.purpose-list__item {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: 1.75rem;
  align-items: baseline;
  padding: 1.5rem 0;
  border-top: 1px solid var(--line);
  transition: border-top-color 240ms var(--ease-out),
              padding-left 240ms var(--ease-out);
}
.purpose-list__item:last-child {
  border-bottom: 1px solid var(--line);
}
.purpose-list__item:hover {
  border-top-color: var(--line-strong);
  padding-left: 0.5rem;
}
.purpose-list__item:hover + .purpose-list__item {
  border-top-color: var(--line-strong);
}

.purpose-list__num {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  color: var(--vitz-orange);
}

.purpose-list__text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.25vw, 1.2rem);
  line-height: 1.45;
  color: var(--bone);
}


/* ---------- 8.2 Ecossistema — intro + container ---------- */
.section__inner--ecossistema {
  gap: 3rem;
}

.ecossistema__intro {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  /* sem max-width: usa a largura padrão do .wrap (mesma de quem-somos/cenario) */
}

.pilares {
  width: 100%;
  display: flex;
  flex-direction: column;
}


/* ---------- 8.3 Pilar (bloco independente, pronto p/ pin futuro) ---------- */
.pilar {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(2.5rem, 5vw, 5rem);
  padding: clamp(4rem, 7vw, 6rem) 0;
}
.pilar + .pilar {
  border-top: 1px solid var(--line);
}

/* Alternância de lado da imagem */
.pilar--media-right .pilar__content { order: 1; }
.pilar--media-right .pilar__media   { order: 2; }
.pilar--media-left  .pilar__media   { order: 1; }
.pilar--media-left  .pilar__content { order: 2; }

.pilar__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  max-width: 580px;
}

.pilar__num {
  display: inline-block;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(3.5rem, 6vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--vitz-orange);
  font-variation-settings: 'opsz' 144;
  margin-bottom: -0.25rem;
}

.pilar__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.4vw, 2.4rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--bone);
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
  max-width: 22ch;
}

.pilar__lead {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.1vw, 1.1rem);
  line-height: 1.55;
  color: var(--bone);
  opacity: 0.88;
  max-width: 540px;
}

.pilar__sub {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 100%;
}
.pilar__sub + .pilar__sub { margin-top: 0.25rem; }

.pilar__sub-title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute);
}

.pilar__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0;
  margin: 0;
}
.pilar__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.05vw, 1.05rem);
  line-height: 1.45;
  color: var(--bone);
  opacity: 0.92;
}
.pilar__list li::before {
  content: '';
  flex-shrink: 0;
  margin-top: 0.55em;
  width: 6px;
  height: 1px;
  background: var(--vitz-orange);
}

.pilar__close {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.1vw, 1.1rem);
  line-height: 1.55;
  color: var(--bone);
  max-width: 540px;
  padding-left: 1rem;
  border-left: 2px solid var(--vitz-orange);
}
.pilar__close em {
  font-style: italic;
  font-weight: 400;
  color: var(--bone);
}

.pilar__cta { margin-top: 0.25rem; }


/* ---------- 8.4 Placeholder de imagem ---------- */
.pilar__media {
  width: 100%;
  position: relative;
}

/* Imagem real do pilar — PNG transparente, sem moldura/borda;
   transform compõe a perspectiva 3D do tilt (vars setadas em JS). */
.pilar__media-img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  display: block;
}


/* ---------- 8.5 Responsivo ---------- */
@media (max-width: 900px) {
  .pilar {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: clamp(3.5rem, 6vw, 5rem) 0;
  }
  /* No mobile, mídia sempre depois do conteúdo */
  .pilar .pilar__content { order: 1; }
  .pilar .pilar__media   { order: 2; }
}

@media (max-width: 640px) {
  .purpose-list__item { grid-template-columns: 3rem 1fr; gap: 1rem; }
}


/* ============================================================
   ===== ETAPA 5: DIFERENCIAL + CONVITE ESTRATÉGICO =====
   ============================================================ */

/* ---------- 9.1 Diferencial — título de 3 linhas + lista horizontal ---------- */
.diff-title {
  max-width: 30ch;
}

.diff-line {
  display: block;
  color: var(--bone);
  opacity: 0.92;
}
.diff-line + .diff-line { margin-top: 0.15em; }

.diff-line--accent {
  color: var(--vitz-orange);
  font-style: italic;
  font-weight: 500;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
}

.diff-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  width: 100%;
  max-width: 1080px;
  margin: 1rem 0 0.5rem;
  padding: 0;
}

.diff-list__item {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.diff-list__mark {
  display: block;
  width: 36px;
  height: 1px;
  background: var(--vitz-orange);
}

.diff-list__text {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1rem, 1.15vw, 1.2rem);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--bone);
  font-variation-settings: 'opsz' 96;
}

.diff-close {
  margin-top: 1.5rem;
  font-size: clamp(1.05rem, 1.2vw, 1.25rem);
  border-left: 0;
  padding-left: 0;
}
.diff-close em {
  font-style: italic;
  border-bottom: 0;
  color: var(--bone);
}


/* ---------- 9.2 Convite Estratégico — destaque com glow + centralizado ---------- */
.section--convite {
  position: relative;
  overflow: hidden;
}

.section__glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 50% at 50% 38%, rgba(232, 140, 62, 0.10), transparent 65%),
    radial-gradient(ellipse 40% 35% at 50% 82%, rgba(58, 123, 217, 0.10), transparent 70%);
}

.section__inner--convite {
  position: relative;
  z-index: 1;
  align-items: center;
  text-align: center;
  gap: 2.25rem;
  padding: clamp(1.5rem, 3vw, 3rem) 0;
}

.convite__title {
  max-width: 22ch;
  margin: 0 auto;
}
.convite__title em {
  /* já herda do .section__title em */
}

.convite__caption {
  margin-top: 0.25rem;
}

/* Lista de qualificação — 4 colunas no desktop */
.qualify-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  width: 100%;
  max-width: 880px;
  margin: 0.25rem auto 0.75rem;
  padding: 0;
}

.qualify-list__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
}

.qualify-list__icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--vitz-orange);
  border-radius: 999px;
  color: var(--vitz-orange);
  background: rgba(232, 140, 62, 0.08);
}

.qualify-list__text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(0.92rem, 1vw, 1.02rem);
  line-height: 1.4;
  color: var(--bone);
  max-width: 16ch;
}

.convite__bridge {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.2rem, 1.6vw, 1.55rem);
  line-height: 1.35;
  color: var(--bone);
  max-width: 28rem;
  margin: 0.75rem auto 0.25rem;
  font-variation-settings: 'opsz' 96;
}
.convite__bridge em {
  font-style: italic;
  color: var(--vitz-orange);
  font-weight: 500;
}

.convite__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem 1.25rem;
  margin-top: 1rem;
}


/* ---------- 9.3 Responsivo ---------- */
@media (max-width: 900px) {
  .diff-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
  }
  .qualify-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
    max-width: 460px;
  }
}

@media (max-width: 520px) {
  .diff-list { grid-template-columns: 1fr; }
  .qualify-list { grid-template-columns: 1fr; max-width: 320px; }
  .convite__ctas { width: 100%; }
  .convite__ctas .btn { flex: 1 1 100%; justify-content: center; }
}


/* ============================================================
   ===== ETAPA 6 v2: REVEALS COM VARIEDADE RADICAL =====
   Cada seção tem um "efeito assinatura" diferente — ver script.js.
   Este bloco contém apenas:
     • estruturas compartilhadas (mask reveal, typewriter)
     • keyframes dos pulsos de glow (typewriter + diff-accent)
     • margens recalculadas para o diff-title pós-linify
     • salvaguarda prefers-reduced-motion
   ============================================================ */

/* Mask Reveal — linha clipada em overflow:hidden */
.line-mask {
  display: block;
  overflow: hidden;
}
.line {
  display: block;
}

/* Typewriter — palavras (não quebram entre chars) e chars */
.tw-word {
  display: inline-block;
  white-space: nowrap;
}
.char {
  display: inline-block;
  will-change: opacity, text-shadow;
}

/* Glow temporário em cada char enquanto "digita" (#proposito) */
@keyframes char-typing-glow {
  from {
    text-shadow:
      0 0 14px var(--vitz-orange),
      0 0 4px rgba(232, 140, 62, 0.9);
  }
  to {
    text-shadow: 0 0 0 transparent;
  }
}
.char.is-typing-glow {
  animation: char-typing-glow 0.4s ease-out;
}

/* Pulso da 3ª linha (laranja) do Diferencial ao concluir o reveal */
@keyframes diff-accent-pulse {
  0%, 100% { text-shadow: 0 0 0 transparent; }
  35% {
    text-shadow:
      0 0 28px rgba(232, 140, 62, 0.75),
      0 0 8px rgba(232, 140, 62, 0.95);
  }
}
.diff-line--accent.is-glow-pulse {
  animation: diff-accent-pulse 0.9s ease-in-out;
}

/* Pós-linify do diff-title — as .diff-line passam a viver dentro
   de .line-mask, então as margens originais não se aplicam mais. */
.diff-title > .line-mask + .line-mask { margin-top: 0.15em; }
.diff-title > .line-mask:nth-child(3) { margin-top: 0.35em; }

/* prefers-reduced-motion: tudo aparece em estado final, sem
   animação. JS já pula init quando a preferência está ativa;
   este bloco neutraliza qualquer estado residual + permanente
   (chars sem opacity gsap, etc). */
@media (prefers-reduced-motion: reduce) {
  .line,
  .char,
  .tw-word {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    text-shadow: none !important;
    animation: none !important;
    clip-path: none !important;
  }
  .pilar__media,
  .pilar__media-img {
    clip-path: none !important;
  }
}


/* ============================================================
   7. FOOTER
   ============================================================ */
.footer {
  background: var(--ink);
  border-top: 1px solid var(--line);
  padding: 4rem 0 2rem;
  position: relative;
}

.footer__inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--line);
}

.footer__brand { max-width: 22rem; }

.footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  color: var(--bone);
  margin-bottom: 1.25rem;
}
.footer__logo-mark {
  width: 10px;
  height: 10px;
  background: var(--vitz-orange);
  border-radius: 2px;
}

.footer__tagline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--bone);
  opacity: 0.86;
}

.footer__title {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 1.1rem;
}

.footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.footer__col a {
  font-size: 0.9rem;
  color: var(--bone);
  opacity: 0.78;
  transition: opacity 200ms var(--ease-out), color 200ms var(--ease-out);
}
.footer__col a:hover {
  opacity: 1;
  color: var(--vitz-orange);
}

.footer__bottom {
  padding-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--mute);
}

@media (max-width: 768px) {
  .footer { padding: 3rem 0 1.75rem; }
  .footer__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}


/* ============================================================
   ===== TRANSIÇÕES DE FUNDO — gradientes verticais por seção =====
   Cada seção é um linear-gradient cuja COR DE BASE bate
   exatamente com a COR DE TOPO da próxima — eliminando a linha
   demarcada e criando uma "onda" contínua de claro/escuro pelo site.
   Seletores por ID têm specificity > .section--ink/.section--ink-2,
   então sobrescrevem o background-color sólido herdado.

   Conexões (cor de base / topo do próximo):
   hero  → ticker  : #06101F
   ticker → quem-somos : #0A172A
   quem-somos → cenario : #0C1B33
   cenario → proposito : #06101F
   proposito → ecossistema : #0C1B33
   ecossistema → diferencial : #0A172A
   diferencial → contato : #06101F
   contato → footer : #0A1830
   ============================================================ */

/* #ticker — agora vive entre #contato (base #0A1830) e o footer
   (topo #0A1830). Cor sólida em #0A1830 conecta sem corte com ambos. */
#ticker {
  background: #0A1830;
}

#quem-somos {
  background: linear-gradient(180deg,
    #0A172A 0%,
    #0E1F38 50%,
    #0C1B33 100%);
}

#cenario {
  background: linear-gradient(180deg,
    #0C1B33 0%,
    #08152A 50%,
    #06101F 100%);
}

#proposito {
  background: linear-gradient(180deg,
    #06101F 0%,
    #0D1E36 50%,
    #0C1B33 100%);
}

#ecossistema {
  background: linear-gradient(180deg,
    #0C1B33 0%,
    #122544 50%,
    #0A172A 100%);
}

#diferencial {
  background: linear-gradient(180deg, #0A172A 0%, #06101F 100%);
}

/* #contato — base que conecta no footer (#0A1830). O .section__glow
   interno preserva o brilho radial laranja+azul da Etapa 5. */
#contato {
  background: linear-gradient(180deg,
    #06101F 0%,
    #0C1B33 50%,
    #0A1830 100%);
}

/* Footer — começa onde o convite termina e escurece até o fim. */
.footer {
  background: linear-gradient(180deg, #0A1830 0%, #06101F 100%);
}


/* ============================================================
   ===== FOOTER OVERLAY (estilo OrfeoAI) — implementação real =====
   - <footer> position:fixed no fundo da viewport, z-index:1
   - <main> z-index:2 com fundo opaco; cobre o footer enquanto rola
   - JS sincroniza main.style.marginBottom = footer.offsetHeight,
     reservando exatamente o espaço de "revelação" no scroll
   ============================================================ */
main {
  position: relative;
  z-index: 2;
  background: var(--ink);  /* fallback opaco — gradientes das seções já cobrem */
}

.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  width: 100%;
  /* Reset do top-padding (ticker agora ocupa o topo do footer) e
     da border-top antiga (a transição ticker→footer é contínua). */
  padding-top: 0;
  border-top: 0;
}


/* ============================================================
   ===== REFINO ESTÉTICO DO FOOTER =====
   Bloco de fechamento sofisticado: ticker → headline grande →
   navegação + contato → copyright discreto.
   ============================================================ */

/* Headline grande de fechamento */
.footer__headline-block {
  padding-top: clamp(3.5rem, 7vw, 6rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.footer__headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--bone);
  max-width: 22ch;
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
}
.footer__headline em {
  font-style: italic;
  font-weight: 500;
  color: var(--vitz-orange);
}

/* Divisor + arejamento entre headline e colunas */
.footer__inner {
  padding-top: clamp(2rem, 3.5vw, 2.75rem);
  border-top: 1px solid var(--line);
  gap: clamp(2rem, 4.5vw, 4rem);
}

/* Refino dos títulos das colunas */
.footer__title {
  color: var(--mute);
  opacity: 0.85;
}

/* Hover refinado dos links — leve translateX + cor */
.footer__col a {
  display: inline-flex;
  align-items: center;
  position: relative;
  transition: color 220ms var(--ease-out),
              transform 240ms var(--ease-out),
              opacity 220ms var(--ease-out);
}
.footer__col a:hover {
  opacity: 1;
  color: var(--vitz-orange);
  transform: translateX(3px);
}

/* Copyright em layout flex — copyright à esquerda, "direitos" mais discreto à direita */
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem 1.5rem;
  padding-top: 1.5rem;
}
.footer__copy {
  color: var(--mute);
}
.footer__rights {
  color: var(--mute);
  opacity: 0.6;
}

/* Mobile: overlay fixo pode estourar viewport — volta ao fluxo normal */
@media (max-width: 768px) {
  .footer {
    position: relative;
  }
}


/* ============================================================
   ===== IMAGENS REAIS — LOGOS, QUEM SOMOS, OUTROS =====
   ============================================================ */

/* Logo no nav (white-logo-vitz.png) */
.nav__logo-img {
  height: 32px;
  width: auto;
  display: block;
}
@media (max-width: 600px) {
  .nav__logo-img { height: 26px; }
}

/* Logo no footer */
.footer__logo {
  display: inline-block;
  line-height: 0;
}
.footer__logo-img {
  height: 38px;
  width: auto;
  display: block;
}

/* Seção Quem Somos — duas colunas (texto à esquerda, imagem à direita) */
.quem__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: start;
  gap: clamp(2.5rem, 5vw, 5rem);
}

.quem__media {
  position: relative;
  width: 100%;
  /* Sticky leve — a imagem acompanha o scroll dentro da seção */
  position: sticky;
  top: calc(var(--nav-h, 76px) + 1.5rem);
}

.quem__media-img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: contain;
  display: block;
  /* PNG transparente — sem moldura/borda; transform/tilt em bloco próprio abaixo */
}

@media (max-width: 900px) {
  .quem__inner {
    grid-template-columns: 1fr;
  }
  .quem__media {
    position: static;
    order: 2;
    max-width: 480px;
    margin: 1rem auto 0;
  }
}


/* ============================================================
   ===== TILT 3D — vars setadas pelo JS via setProperty =====
   - Perspective entra DENTRO de cada transform() do <img>
   - Imagens de quem-somos e pilares ganham scale composto p/
     ficarem visualmente maiores (sem reflow de layout)
   - Containers com overflow visible para permitir o sangramento
   ============================================================ */
.hero__visual,
.quem__media,
.pilar__media {
  overflow: visible;
}

.hero__visual-img,
.quem__media-img,
.pilar__media-img {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  transform-style: preserve-3d;
  will-change: transform;
  /* JS aplica setProperty nas vars; CSS abaixo monta o transform */
}

.hero__visual-img {
  transform:
    perspective(1100px)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y));
}

.quem__media-img {
  transform:
    perspective(1100px)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y))
    scale(1.12);          /* +12% visual */
  transform-origin: center;
}

.pilar__media-img {
  transform:
    perspective(1100px)
    rotateX(var(--tilt-x))
    rotateY(var(--tilt-y))
    scale(1.1);           /* +10% visual */
  transform-origin: center;
}

/* prefers-reduced-motion: zera tilt e scale, deixa imagens estáticas */
@media (prefers-reduced-motion: reduce) {
  .hero__visual-img,
  .quem__media-img,
  .pilar__media-img {
    transform: none !important;
  }
}


/* (Bloco "Centralização" removido — todas as seções voltam a usar
   o container .wrap padrão, com a mesma largura/margens das demais. As
   constraints de readability dos elementos internos — section__title,
   section__lead, purpose-list, diff-list etc. — continuam intactas.) */


/* ============================================================
   ===== ETAPA 7: PIN SCROLL + PARALLAX + CONTADOR + POLIMENTO =====
   ============================================================ */

/* ---------- 10.1 Pin scroll do Ecossistema ----------
   No desktop, .pilares ganha a classe .is-pinned via JS; os 3
   pilares passam a ocupar o mesmo "palco" (position: absolute)
   e o cross-fade é coreografado por uma timeline GSAP com pin.
   No mobile (< 1024px) a classe não é aplicada — comportamento
   normal em fluxo vertical. */
.pilares.is-pinned {
  position: relative;
  height: 100vh;
  min-height: 720px;
}
.pilares.is-pinned .pilar {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: clamp(2rem, 4vh, 4rem) 0;
  border-top: 0 !important;
  align-content: center;
}
.pilares.is-pinned .pilar + .pilar { border-top: 0; }

/* Indicador de progresso (01 ── 02 ── 03) — só aparece em pinned */
.pilares__progress { display: none; }
.pilares.is-pinned .pilares__progress {
  position: absolute;
  bottom: 1.75rem;
  right: var(--pad-x);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  pointer-events: none;
}
.pilares__step {
  color: var(--mute);
  opacity: 0.55;
  transition: color 320ms var(--ease-out), opacity 320ms var(--ease-out);
}
.pilares__step.is-active {
  color: var(--vitz-orange);
  opacity: 1;
}
.pilares__progress-sep {
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--line-strong);
}


/* ---------- 10.2 Contador BRT (canto inferior direito) ---------- */
.time-counter {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 1200;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.95rem;
  background: rgba(6, 16, 31, 0.7);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--mute);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
          backdrop-filter: blur(10px) saturate(140%);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
  pointer-events: none;
  user-select: none;
}
.time-counter.is-ready {
  opacity: 1;
  transform: translateY(0);
}
.time-counter__dot {
  width: 6px;
  height: 6px;
  background: var(--vitz-orange);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(232, 140, 62, 0.6);
  animation: time-counter-pulse 2.2s ease-in-out infinite;
}
@keyframes time-counter-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1);    }
  50%      { opacity: 1;    transform: scale(1.25); }
}
.time-counter__label {
  color: var(--mute);
  opacity: 0.72;
}
.time-counter__value {
  color: var(--bone);
  font-variant-numeric: tabular-nums;
  min-width: 5.2em;
}

@media (max-width: 768px) {
  .time-counter {
    bottom: 1rem;
    right: 1rem;
    padding: 0.45rem 0.75rem;
    font-size: 0.65rem;
    gap: 0.45rem;
  }
}
@media (max-width: 420px) {
  .time-counter { display: none; }
}


/* (10.3 — Refino do placeholder removido; imagens reais substituíram os blocos) */


/* ---------- 10.4 Polimento global ---------- */

/* Cursor pointer em todos clicáveis (reforço — defaults já cobrem) */
.btn, .nav__cta, .nav__logo, .nav__links a, .menu-overlay__links a,
.menu-overlay__cta, .nav__burger, .menu-overlay__close,
.value-card, .footer__col a, .hero__scroll, .section__cta, .pilar__cta {
  cursor: pointer;
}

/* Foco visível (acessibilidade por teclado) */
:focus-visible {
  outline: 2px solid var(--vitz-orange);
  outline-offset: 3px;
  border-radius: 4px;
}

/* prefers-reduced-motion: desliga animações decorativas que não
   foram cobertas pela Etapa 6 (pin/parallax/contador). */
@media (prefers-reduced-motion: reduce) {
  .time-counter__dot,
  .marquee__track,
  .hero__scroll-arrow {
    animation: none !important;
  }
  .pilares.is-pinned { height: auto; min-height: 0; }
  .pilares.is-pinned .pilar {
    position: relative;
    inset: auto;
    padding: clamp(4rem, 7vw, 6rem) 0;
  }
}