/* ============================================================
   FORME · site.css · v2 (2026-05-25)
   Layout + componentes do site institucional
   Padrão FORME: brutalismo digital, papel + grafite + magenta.
   Carregar DEPOIS de forme-tokens.css + forme-components.css
   ============================================================ */

* { box-sizing: border-box; }

/* Skip-link de acessibilidade — visível só ao focar via teclado (Tab) */
.skip-link {
  position: absolute;
  left: 8px;
  top: -64px;
  z-index: 9999;
  background: #111;
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 8px 8px;
  font: 600 0.95rem/1 "Inter Tight", system-ui, sans-serif;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 0;
  outline: 3px solid #ff007a;
  outline-offset: 2px;
}
/* main recebe foco via skip-link, mas sem contorno na página inteira */
main[tabindex="-1"]:focus { outline: none; }
/* scroll-behavior: smooth removido pra não conflitar com Lenis (v4 perf-fix) */
html {
  /* Lenis gerencia o smooth-scroll. Browser nativo desligado. */
}
body {
  margin: 0;
  background: var(--grafite-quente);
  color: var(--papel-quente);
  overflow-x: hidden;
}
/* Lenis required styles (perf-fix) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

.num, .metric-big, .price, .seq, .count {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* ============================================================
   GRID / CONTAINER
   ============================================================ */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}

.section {
  padding: var(--sp-4xl) 0;
  position: relative;
}
.section--tight { padding: var(--sp-3xl) 0; }
.section--xl    { padding: 120px 0; }

/* Section header */
.sec-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--sp-2xl);
  gap: var(--sp-md);
}
.sec-head__eyebrow {
  font-family: var(--ff-mono);
  font-weight: var(--fw-medium);
  font-size: 14px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--mono-baixa);
}
.sec-head__count {
  font-family: var(--ff-mono);
  font-weight: var(--fw-medium);
  font-size: 14px;
  letter-spacing: var(--ls-uppercase);
  text-transform: uppercase;
  color: var(--mono-baixa);
}
.section--dark .sec-head__eyebrow,
.section--dark .sec-head__count { color: var(--mono-baixa-dk); }

.sec-bar {
  border: 0;
  border-top: 1px solid var(--linha-papel);
  margin: 0 0 var(--sp-lg);
}
.section--dark .sec-bar { border-top-color: var(--linha-grafite); }

/* ============================================================
   NAV — wordmark contextual COM transition (refinamento C5)
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* perf-fix: backdrop-filter removido da transition (nao usado), so background/color */
  transition: background var(--dur-base) var(--ease-out),
              color 200ms var(--ease-out);
  background: transparent;
  color: var(--papel-quente);
  /* perf-fix: promover a layer separada (evita reflow do nav durante scroll) */
  will-change: background-color;
  transform: translateZ(0);
}
.nav.is-scrolled {
  background: rgba(26, 24, 21, 0.92);
  border-bottom: 1px solid var(--border-hairline);
}
.nav.is-light {
  color: var(--grafite-quente);
}
.nav.is-light.is-scrolled {
  background: rgba(240, 235, 230, 0.92);
  border-bottom-color: var(--linha-papel);
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  position: relative;
}
.nav__wordmark {
  height: 22px;
  width: auto;
  display: block;
  transition: opacity 220ms var(--ease-out);
}
.nav__wordmark--light {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
}
.nav.is-light .nav__wordmark--dark { opacity: 0; }
.nav.is-light .nav__wordmark--light { opacity: 1; }

.nav__menu {
  display: flex;
  gap: 32px;
  align-items: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.nav__link {
  font-family: var(--ff-mono);
  font-weight: var(--fw-medium);
  font-size: 14px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__link:hover { color: var(--magenta); }
.nav__link.is-active { color: var(--magenta); }

.nav__cta {
  font-family: var(--ff-mono);
  font-weight: var(--fw-semibold);
  font-size: 14px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  background: var(--magenta);
  color: var(--papel-quente);
  border: 1px solid var(--magenta);
  padding: 12px 16px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background var(--dur-fast) var(--ease-out);
}
.nav__cta:hover { background: var(--magenta-deep); border-color: var(--magenta-deep); }

.nav__burger {
  display: none;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  padding: 8px;
}
.nav__burger svg { display: block; }

/* ============================================================
   NAV · LANG SWITCH (PT/EN/ES/中)
   ============================================================ */





/* LIMPEZA 2026-05-26: bloco órfão removido (Google Translate desligado e
   seletores .nav.is-light vazios estavam quebrando parsing do body). */
.skiptranslate > iframe { display: none !important; }
.goog-tooltip,
.goog-tooltip:hover { display: none !important; }
.goog-text-highlight {
  background: transparent !important;
  box-shadow: none !important;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  background: var(--grafite-quente);
  color: var(--papel-quente);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none; /* perf-fix: video nao captura input */
}
.hero__warm {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(34, 32, 16, 0.45);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    180deg,
    rgba(26, 24, 21, 0.30) 0%,
    rgba(26, 24, 21, 0.10) 25%,
    rgba(26, 24, 21, 0.10) 45%,
    rgba(26, 24, 21, 0.85) 100%
  );
  pointer-events: none;
}
.hero__inner {
  position: relative;
  z-index: 3;
  padding: 120px 32px 80px;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}
/* Hero baixo: texto desce, respira no topo (ajuste 5) */
.hero--low { justify-content: flex-end; }
.hero--low .hero__inner { padding-bottom: 96px; padding-top: 0; }

/* Badge urgência */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--magenta);
  color: var(--papel-quente);
  font-family: var(--ff-mono);
  font-weight: var(--fw-semibold);
  font-size: 14px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  padding: 10px 16px;
  margin-bottom: 32px;
}
.hero__badge-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--papel-quente);
  animation: pulse-papel 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pulse-papel {
  0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 0 0 rgba(240,235,230,0.5); }
  50% { transform: scale(1.3); opacity: 0.85; box-shadow: 0 0 0 6px rgba(240,235,230,0); }
}

.hero__title {
  font-family: var(--ff-display);
  font-weight: var(--fw-black);
  font-size: clamp(44px, 6vw, 88px);
  line-height: 0.98;
  letter-spacing: var(--ls-h1);
  color: var(--papel-quente);
  margin: 0;
  max-width: 1100px;
}
.tarja[data-anim="draw"] {
  background-image: none;
  position: relative;
  isolation: isolate;
}
.tarja[data-anim="draw"]::before {
  content: '';
  position: absolute;
  left: -0.06em; right: -0.06em;
  bottom: 6%;
  height: 23%;
  background: var(--magenta);
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left center;
  animation: tarja-draw 720ms cubic-bezier(0.16, 1, 0.3, 1) 480ms both;
}
@keyframes tarja-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.hero__sub {
  margin: 24px 0 0;
  font-family: var(--ff-body);
  font-weight: var(--fw-medium);
  font-size: 20px;
  line-height: 1.45;
  max-width: 720px;
  color: #d8d2c4;
}

/* Meta-grid (substitui ticker) */
.hero__metagrid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--border-hairline);
  border-bottom: 1px solid var(--border-hairline);
}
.metagrid__cell {
  padding: 18px 20px;
  border-right: 1px solid var(--border-hairline);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.metagrid__cell:last-child { border-right: 0; }
.metagrid__label {
  font-family: var(--ff-mono);
  font-weight: var(--fw-medium);
  font-size: 14px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--mono-baixa-dk);
}
.metagrid__value {
  font-family: var(--ff-mono);
  font-weight: var(--fw-semibold);
  font-size: 16px;
  letter-spacing: var(--ls-mono-tight);
  text-transform: uppercase;
  color: var(--papel-quente);
}

.hero__ctas-row {
  margin-top: 36px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.hero__fineprint {
  margin: 18px 0 0;
  font-family: var(--ff-mono);
  font-weight: var(--fw-medium);
  font-size: 14px;
  letter-spacing: var(--ls-mono-tight);
  color: var(--mono-baixa-dk);
}

/* ============================================================
   BOTÕES
   ============================================================ */
.btn--arrow::after {
  content: '→→';
  font-family: var(--ff-mono);
  font-weight: var(--fw-bold);
  letter-spacing: -0.05em;
  margin-left: 6px;
}

/* ============================================================
   PATTERN OVERLAYS · só listras (grids removidos C1/C2)
   ============================================================ */
.pattern-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-size: cover;
  background-position: center;
}
.pattern-bg--listras {
  background-image: url('assets/patterns/pattern-04-listras.png');
  opacity: 1;
}

/* ============================================================
   MANIFESTO · papel sólido SEM pattern grid (ajuste C1)
   ============================================================ */
.section--manifesto {
  background: var(--papel-quente);
  color: var(--grafite-quente);
}
.manifesto__title {
  font-family: var(--ff-display);
  font-weight: var(--fw-black);
  font-size: clamp(48px, 7vw, 108px);
  line-height: 0.95;
  letter-spacing: var(--ls-display);
  margin: 0 0 var(--sp-2xl);
  max-width: 1080px;
}
.manifesto__body {
  font-family: var(--ff-body);
  font-weight: var(--fw-medium);
  font-size: 22px;
  line-height: 1.45;
  color: var(--grafite-quente);
  max-width: 880px;
  margin: 0 0 var(--sp-md);
}
.manifesto__body:last-child { margin-bottom: 0; }

/* ============================================================
   STACK · carrossel horizontal infinito (NOVA seção B1/C4)
   ============================================================ */
.section--stack {
  background: var(--grafite-quente);
  color: var(--papel-quente);
  padding: 80px 0 96px;
}
.section--stack .sec-head__eyebrow { color: var(--magenta); }
.section--stack .sec-head__count { color: var(--mono-baixa-dk); }
.section--stack .sec-bar { border-top-color: var(--linha-grafite); }

/* Fundo preto sólido grafite escuro chapado (ajuste 6) */
.section--stack-solid {
  background: #0a0a0a;
}
.section--stack-solid .sec-bar { border-top-color: rgba(255,255,255,0.10); }

.stack__lede {
  font-family: var(--ff-body);
  font-weight: var(--fw-regular);
  font-size: 18px;
  line-height: 1.5;
  color: #d8d2c4;
  margin: 0 0 var(--sp-2xl);
  max-width: 720px;
}

.stack__marquee {
  overflow: hidden;
  margin-top: var(--sp-2xl);
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0,
    #000 6%,
    #000 94%,
    transparent 100%);
  mask-image: linear-gradient(90deg,
    transparent 0,
    #000 6%,
    #000 94%,
    transparent 100%);
}
.stack__track {
  display: flex;
  width: max-content;
  animation: stack-scroll 36s linear infinite;
}
.stack__track:hover {
  animation-play-state: paused;
}
.stack__group {
  display: flex;
  align-items: center;
  gap: 72px;
  padding-right: 72px;
}
.stack__logo {
  height: 44px;
  width: auto;
  color: var(--papel-quente);
  opacity: 0.78;
  transition: opacity 200ms var(--ease-out);
  flex-shrink: 0;
}
.stack__logo:hover { opacity: 1; }

@keyframes stack-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   PACOTES / SERVIÇOS · 5 cards (4 early-adopter + 1 GEO + GTM âncora)
   ============================================================ */
.section--pacotes {
  background: var(--papel-quente);
  color: var(--grafite-quente);
}
.pacotes__title {
  font-family: var(--ff-display);
  font-weight: var(--fw-black);
  font-size: clamp(44px, 5.4vw, 76px);
  line-height: 0.95;
  letter-spacing: var(--ls-h1);
  margin: 0 0 var(--sp-md);
}
.pacotes__lede {
  font-family: var(--ff-body);
  font-size: 18px;
  line-height: 1.5;
  color: var(--mono-baixa);
  margin: 0 0 var(--sp-2xl);
  max-width: 720px;
}
.pacotes-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
.pacote {
  background: var(--papel-luz);
  border: 1px solid var(--linha-papel);
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform var(--dur-base) var(--ease-out);
  grid-column: span 3;
}
.pacote:hover { transform: translateY(-2px); }

/* Grid 2x2 — 4 cards em 2 linhas (ajuste 9) */
.pacotes-grid--2x2 {
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.pacotes-grid--2x2 .pacote { grid-column: auto; }

/* GTM âncora — bloco separado, full width depois do grid (ajuste 10) */
.pacote--gtm {
  grid-column: 1 / -1 !important;
  background: var(--grafite-quente);
  color: var(--papel-quente);
  border-color: var(--grafite-quente);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  padding: 48px 40px;
  margin-top: 8px;
}
.pacote--gtm-standalone {
  margin-top: 24px;
}

.pacote__tag {
  position: absolute;
  top: -10px;
  left: 24px;
  padding: 5px 10px;
  font-family: var(--ff-mono);
  font-weight: var(--fw-semibold);
  font-size: 14px;
  letter-spacing: var(--ls-mono-tight);
  text-transform: uppercase;
  line-height: 1;
}
.tag--magenta {
  background: var(--magenta);
  color: var(--papel-quente);
}
.tag--neutro {
  background: var(--mono-baixa);
  color: var(--papel-quente);
}
.pacote__tag--anchor { padding: 6px 14px; }

.pacote__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
  margin-top: 4px;
}
.pacote__eyebrow {
  font-family: var(--ff-mono);
  font-weight: var(--fw-medium);
  font-size: 14px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--mono-baixa);
}
.pacote--gtm .pacote__eyebrow { color: var(--mono-baixa-dk); }
.pacote__dur {
  font-family: var(--ff-mono);
  font-weight: var(--fw-semibold);
  font-size: 14px;
  letter-spacing: var(--ls-mono-tight);
  text-transform: uppercase;
  color: var(--magenta-deep);
}
.pacote--gtm .pacote__dur { color: var(--magenta); }

.pacote__title {
  font-family: var(--ff-display);
  font-weight: var(--fw-black);
  font-size: 30px;
  line-height: 1;
  letter-spacing: var(--ls-h3);
  margin: 0 0 8px;
}
.pacote--gtm .pacote__title { font-size: 44px; }

.pacote__sub {
  font-family: var(--ff-body);
  font-weight: var(--fw-medium);
  font-size: 15px;
  line-height: 1.45;
  margin: 0 0 16px;
  color: var(--mono-baixa);
}
.pacote--gtm .pacote__sub { color: #d8d2c4; font-size: 17px; max-width: 560px; }

.pacote__bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pacote__bullets li {
  font-family: var(--ff-body);
  font-size: 14px;
  line-height: 1.45;
  color: var(--grafite-quente);
  padding-left: 18px;
  position: relative;
}
.pacote--gtm .pacote__bullets li { color: var(--papel-quente); font-size: 15px; }
.pacote__bullets li::before {
  content: '·';
  position: absolute;
  left: 0;
  top: -2px;
  font-size: 22px;
  font-weight: var(--fw-black);
  color: var(--magenta);
  line-height: 1;
}

.pacote__footer {
  margin-top: auto;
  border-top: 1px solid var(--linha-papel);
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pacote__price {
  font-family: var(--ff-display);
  font-weight: var(--fw-black);
  font-size: 38px;
  letter-spacing: var(--ls-h2);
  line-height: 1;
  color: var(--magenta);
}
.pacote__price--neutro { color: var(--grafite-quente); font-size: 30px; }
.pacote__price-meta {
  font-family: var(--ff-mono);
  font-weight: var(--fw-medium);
  font-size: 14px;
  letter-spacing: var(--ls-mono-tight);
  text-transform: uppercase;
  color: var(--mono-baixa);
}
.pacote__guarantee {
  font-family: var(--ff-body);
  font-weight: var(--fw-semibold);
  font-size: 14px;
  line-height: 1.45;
  color: var(--grafite-quente);
  padding: 10px 12px;
  background: rgba(255, 20, 147, 0.08);
  border-left: 3px solid var(--magenta);
}
.pacote__guarantee--strong {
  background: rgba(255, 20, 147, 0.15);
  color: var(--papel-quente);
  font-size: 15px;
  border-left-width: 4px;
}
.pacote__icp {
  font-family: var(--ff-mono);
  font-weight: var(--fw-medium);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--mono-baixa);
  padding-top: 4px;
}
.pacote__icp--inv { color: #d8d2c4; }

.pacote__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 12px 16px;
  background: var(--grafite-quente);
  color: var(--papel-quente);
  font-family: var(--ff-mono);
  font-weight: var(--fw-semibold);
  font-size: 14px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  justify-content: center;
  transition: background var(--dur-fast) var(--ease-out);
}
.pacote__cta:hover { background: var(--magenta); }
.pacote__cta--mag { background: var(--magenta); }
.pacote__cta--mag:hover { background: var(--magenta-deep); }

/* GTM columns */
.pacote--gtm__col-info,
.pacote--gtm__col-price {
  display: flex;
  flex-direction: column;
}
.pacote--gtm__col-price { gap: 8px; }
/* "A partir de:" — etiqueta acima dos precos GTM (msg 1466) */
.gtm-price__from {
  font-family: var(--ff-mono);
  font-weight: var(--fw-semibold);
  font-size: 13px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--magenta);
  padding-bottom: 8px;
  /* alinha "A partir de:" com a linha §05 · OPERAÇÃO / 6 SEMANAS (head tem margin-top 4px) */
  margin-top: 4px;
  margin-bottom: 4px;
}

/* Disclaimer custo ferramentas (msg 1466) */
.gtm-price__tools {
  font-family: var(--ff-mono);
  font-weight: var(--fw-medium);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--mono-baixa-dk);
  line-height: 1.4;
  padding: 8px 0 12px;
  border-top: 1px solid var(--linha-grafite);
  margin-bottom: 12px;
}

.gtm-price__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--linha-grafite);
}
.gtm-price__row--total { border-bottom: 0; border-top: 2px solid var(--magenta); padding-top: 16px; margin-bottom: 8px; }

/* Contrato mínimo: linha discreta abaixo dos preços (ajuste 11) */
.gtm-price__minimum {
  font-family: var(--ff-mono);
  font-weight: var(--fw-semibold);
  font-size: 14px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--magenta);
  padding: 12px 0 4px;
  border-bottom: 1px solid var(--linha-grafite);
  margin-bottom: 12px;
}
.gtm-price__label {
  font-family: var(--ff-mono);
  font-weight: var(--fw-medium);
  font-size: 14px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--mono-baixa-dk);
}
.gtm-price__value {
  font-family: var(--ff-display);
  font-weight: var(--fw-black);
  font-size: 32px;
  letter-spacing: var(--ls-h2);
  color: var(--papel-quente);
  line-height: 1;
}
.gtm-price__value--mag { color: var(--magenta); }
.gtm-price__value--lg { font-size: 42px; }
.gtm-price__value sub {
  font-size: 15px;
  font-weight: var(--fw-medium);
  color: #d8d2c4;
  letter-spacing: 0;
  vertical-align: baseline;
}

/* ============================================================
   MÉTRICAS GRANDES (NOVA seção B2)
   ============================================================ */
.section--metricas {
  background: var(--papel-luz);
  color: var(--grafite-quente);
}
.metricas__lede {
  font-family: var(--ff-body);
  font-weight: var(--fw-medium);
  font-size: 18px;
  line-height: 1.5;
  color: var(--mono-baixa);
  margin: 0 0 var(--sp-3xl);
  max-width: 720px;
}
.metricas-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px 32px;
}
.metrica {
  border-top: 2px solid var(--grafite-quente);
  padding-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.metrica__num {
  font-family: var(--ff-display);
  font-weight: var(--fw-black);
  font-size: clamp(72px, 12vw, 200px);
  line-height: 0.86;
  letter-spacing: var(--ls-display);
  color: var(--magenta);
}
.metrica__label {
  font-family: var(--ff-mono);
  font-weight: var(--fw-semibold);
  font-size: 16px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--grafite-quente);
}
.metrica__sub {
  font-family: var(--ff-body);
  font-weight: var(--fw-regular);
  font-size: 15px;
  line-height: 1.5;
  color: var(--mono-baixa);
}

/* ============================================================
   MÉTODO · STEPPER (sem pattern grid - ajuste C1)
   ============================================================ */
.section--metodo {
  background: var(--papel-quente);
  color: var(--grafite-quente);
}
.metodo__title {
  font-family: var(--ff-display);
  font-weight: var(--fw-black);
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: 0.95;
  letter-spacing: var(--ls-h1);
  margin: 0 0 var(--sp-md);
}
.metodo__sub {
  font-family: var(--ff-body);
  font-weight: var(--fw-medium);
  font-size: 18px;
  line-height: 1.5;
  color: var(--mono-baixa);
  margin: 0 0 var(--sp-3xl);
  max-width: 640px;
}
.stepper {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.stepper__line {
  position: absolute;
  top: 32px;
  left: 32px;
  right: 32px;
  height: 2px;
  background-image: radial-gradient(circle, var(--mono-baixa) 1px, transparent 1.2px);
  background-size: 7px 2px;
  background-repeat: repeat-x;
  z-index: 0;
}
.step { position: relative; z-index: 1; }
.step__num {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--papel-quente);
  border: 2px solid var(--grafite-quente);
  color: var(--grafite-quente);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-display);
  font-weight: var(--fw-black);
  font-size: 22px;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
}
.step.is-first .step__num {
  background: var(--magenta);
  color: var(--papel-quente);
  border-color: var(--magenta);
}
.step__title {
  font-family: var(--ff-display);
  font-weight: var(--fw-black);
  font-size: 30px;
  letter-spacing: var(--ls-h3);
  line-height: 1;
  margin: 0 0 6px;
}
.step__title .dot { color: var(--magenta); }
.step__dur {
  font-family: var(--ff-mono);
  font-weight: var(--fw-medium);
  font-size: 14px;
  letter-spacing: var(--ls-mono-tight);
  text-transform: uppercase;
  color: var(--mono-baixa);
  margin-bottom: 14px;
}
.step__body {
  font-family: var(--ff-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--grafite-quente);
  margin: 0;
}

/* ============================================================
   SOBRE BRUNO · destaque grande (NOVA seção B3)
   ============================================================ */
.section--sobre {
  background: var(--grafite-quente);
  color: var(--papel-quente);
}
.section--sobre .sec-head__eyebrow,
.section--sobre .sec-head__count { color: var(--mono-baixa-dk); }
.section--sobre .sec-bar { border-top-color: var(--linha-grafite); }

.sobre-bruno {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 48px;
  margin-bottom: var(--sp-3xl);
  background: var(--surface-1);
  border: 1px solid var(--border-hairline);
  padding: 40px;
  box-shadow: 12px 12px 0 0 var(--magenta);
  align-items: start;
}
.sobre-bruno__photo-wrap {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid var(--border-hairline);
  background: var(--bg-deep);
}
.sobre-bruno__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(15%) contrast(1.05);
}
.sobre-bruno__badge {
  position: absolute;
  top: 14px; left: 14px;
  background: var(--magenta);
  color: var(--papel-quente);
  padding: 6px 12px;
  font-family: var(--ff-mono);
  font-weight: var(--fw-semibold);
  font-size: 14px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  line-height: 1;
}

/* msg 1531: status ONLINE na foto do Bruno (espelha .member__status do time) */
.sobre-bruno__status {
  position: absolute;
  top: 14px; right: 14px;
  background: rgba(0, 0, 0, 0.7);
  color: var(--papel-quente);
  padding: 6px 12px;
  font-family: var(--ff-mono);
  font-weight: var(--fw-medium);
  font-size: 14px;
  letter-spacing: var(--ls-mono-tight);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  line-height: 1;
}
.sobre-bruno__status::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #00ff88;
  box-shadow: 0 0 8px rgba(0, 255, 136, 0.6);
  display: block;
  animation: pulse-online 2s ease-in-out infinite;
}
@keyframes pulse-online {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.sobre-bruno__body { display: flex; flex-direction: column; gap: 16px; padding-top: 4px; }

/* Botão discreto LinkedIn pessoal do Bruno (msg 1586) */
.sobre-bruno__linkedin {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  margin-top: -4px;
  padding: 6px 12px;
  border: 1px solid var(--linha-grafite, rgba(34,32,16,0.15));
  border-radius: 999px;
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mono-baixa);
  text-decoration: none;
  transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out), background 200ms var(--ease-out);
}
.sobre-bruno__linkedin:hover {
  color: var(--magenta);
  border-color: var(--magenta);
}
.sobre-bruno__linkedin svg { flex-shrink: 0; }
.sobre-bruno__name {
  font-family: var(--ff-display);
  font-weight: var(--fw-black);
  font-size: clamp(48px, 5.6vw, 84px);
  line-height: 0.95;
  letter-spacing: var(--ls-h1);
  margin: 0;
  color: var(--papel-quente);
}
.sobre-bruno__role {
  font-family: var(--ff-mono);
  font-weight: var(--fw-semibold);
  font-size: 16px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--magenta);
}
.sobre-bruno__bio {
  font-family: var(--ff-body);
  font-weight: var(--fw-regular);
  font-size: 17px;
  line-height: 1.6;
  color: #d8d2c4;
  margin: 8px 0;
}
/* Parágrafo de empresas atendidas (ajuste 15) */
.sobre-bruno__bio--marcas {
  font-size: 17px;
  line-height: 1.7;
  color: var(--papel-quente);
  border-top: 1px solid var(--linha-grafite);
  padding-top: 20px;
  margin-top: 12px;
}
.sobre-bruno__bio--marcas strong {
  font-weight: var(--fw-semibold);
  color: var(--papel-quente);
  white-space: nowrap;
}
.sobre-bruno__metricas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px;
  border-top: 1px solid var(--linha-grafite);
  padding-top: 20px;
}
.sobre-metr { display: flex; flex-direction: column; gap: 4px; }
.sobre-metr__num {
  font-family: var(--ff-display);
  font-weight: var(--fw-black);
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1;
  letter-spacing: var(--ls-h2);
}
.sobre-metr__label {
  font-family: var(--ff-mono);
  font-weight: var(--fw-medium);
  font-size: 14px;
  letter-spacing: var(--ls-mono-tight);
  text-transform: uppercase;
  color: var(--mono-baixa-dk);
}

/* ============================================================
   CLIENTES (NOVA seção B4) — embutido no bloco do Bruno
   ============================================================ */
.clientes {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.clientes__intro {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.clientes__title {
  font-family: var(--ff-body);
  font-weight: var(--fw-medium);
  font-size: 17px;
  line-height: 1.5;
  color: var(--papel-quente);
  margin: 0;
  max-width: 720px;
}
.clientes__tier {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px 0 28px;
  border-top: 1px solid var(--linha-grafite);
}
.clientes__tier:last-of-type { border-bottom: 1px solid var(--linha-grafite); }
.clientes__tier-label {
  font-family: var(--ff-mono);
  font-weight: var(--fw-semibold);
  font-size: 14px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--magenta);
}
.clientes__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 24px 32px;
  align-items: center;
}
.cliente__logo {
  height: 26px;
  width: auto;
  color: var(--papel-quente);
  opacity: 0.55;
  transition: opacity 200ms var(--ease-out);
  display: block;
  justify-self: start;
  max-width: 100%;
}
.cliente__logo:hover { opacity: 1; }

.clientes__disclaimer {
  font-family: var(--ff-mono);
  font-weight: var(--fw-regular);
  font-size: 14px;
  line-height: 1.5;
  color: var(--mono-baixa-dk);
  margin: 16px 0 0;
  max-width: 720px;
}

/* ============================================================
   TIME · 7 agentes (Bruno foi pra seção Sobre)
   ============================================================ */
.section--time {
  background: var(--papel-luz);
  color: var(--grafite-quente);
}
.time__title {
  font-family: var(--ff-display);
  font-weight: var(--fw-black);
  font-size: clamp(40px, 5.4vw, 64px);
  line-height: 0.95;
  letter-spacing: var(--ls-h1);
  margin: 0 0 var(--sp-md);
}
.time__sub {
  font-family: var(--ff-body);
  font-weight: var(--fw-medium);
  font-size: 18px;
  line-height: 1.5;
  color: var(--mono-baixa);
  margin: 0 0 var(--sp-3xl);
  max-width: 640px;
}
.time-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.member {
  background: var(--papel-quente);
  border: 1px solid var(--linha-papel);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out);
}
.member:hover { transform: translateY(-2px); }
.member__photo-wrap {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-bottom: 1px solid var(--linha-papel);
}
.member__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(20%) contrast(1.05);
  transition: filter var(--dur-base) var(--ease-out);
}
.member:hover .member__photo { filter: grayscale(0) contrast(1.1); }

.member__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--papel-quente);
  color: var(--grafite-quente);
  border: 1px solid var(--grafite-quente);
  padding: 5px 10px;
  font-family: var(--ff-mono);
  font-weight: var(--fw-semibold);
  font-size: 14px;
  letter-spacing: var(--ls-mono-tight);
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}
.member__status {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.7);
  color: var(--papel-quente);
  padding: 5px 10px;
  font-family: var(--ff-mono);
  font-weight: var(--fw-medium);
  font-size: 14px;
  letter-spacing: var(--ls-mono-tight);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  line-height: 1;
}
.member__status::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #00ff88;
  display: block;
}
.member__info {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.member__name {
  font-family: var(--ff-display);
  font-weight: var(--fw-black);
  font-size: 28px;
  line-height: 1;
  letter-spacing: var(--ls-h3);
  margin: 0;
  color: var(--grafite-quente);
}
.member__role {
  font-family: var(--ff-mono);
  font-weight: var(--fw-semibold);
  font-size: 14px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--magenta-deep);
}
.member__desc {
  font-family: var(--ff-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--mono-baixa);
  margin: 0;
}

/* ============================================================
   FAQ · accordion (NOVA seção B5)
   ============================================================ */
.section--faq {
  background: var(--papel-quente);
  color: var(--grafite-quente);
}
.faq__title {
  font-family: var(--ff-display);
  font-weight: var(--fw-black);
  font-size: clamp(40px, 5.4vw, 64px);
  line-height: 0.95;
  letter-spacing: var(--ls-h1);
  margin: 0 0 var(--sp-2xl);
}
.faq-list {
  display: flex;
  flex-direction: column;
  border-top: 2px solid var(--grafite-quente);
}
.faq-item {
  border-bottom: 1px solid var(--linha-papel);
}
.faq-item:last-of-type { border-bottom: 2px solid var(--grafite-quente); }
.faq-item__q {
  list-style: none;
  cursor: pointer;
  padding: 24px 0;
  font-family: var(--ff-display);
  font-weight: var(--fw-black);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.2;
  letter-spacing: var(--ls-h3);
  color: var(--grafite-quente);
  position: relative;
  padding-right: 44px;
  transition: color 200ms var(--ease-out);
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 14px;
  font-family: var(--ff-display);
  font-weight: var(--fw-black);
  font-size: 40px;
  line-height: 1;
  color: var(--magenta);
  transition: transform 200ms var(--ease-out);
}
.faq-item[open] .faq-item__q::after { transform: rotate(45deg); }
.faq-item__q:hover { color: var(--magenta); }
.faq-item__a {
  padding: 0 0 28px;
  font-family: var(--ff-body);
  font-weight: var(--fw-regular);
  font-size: 17px;
  line-height: 1.55;
  color: var(--mono-baixa);
  max-width: 880px;
}
.faq-item__link {
  color: var(--magenta);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.faq-item__link:hover { color: var(--magenta-deep); }

/* ============================================================
   COMEÇAR · CTA magenta full
   ============================================================ */
.section--comecar {
  background: var(--magenta);
  color: var(--papel-quente);
  padding: 100px 0;
  text-align: center;
  position: relative;
}
.comecar__meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--ff-mono);
  font-weight: var(--fw-medium);
  font-size: 14px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--papel-quente);
  margin-bottom: 40px;
}
.comecar__title {
  font-family: var(--ff-display);
  font-weight: var(--fw-black);
  font-size: clamp(56px, 9vw, 128px);
  line-height: 0.92;
  letter-spacing: var(--ls-display);
  margin: 0;
  color: var(--papel-quente);
}
.comecar__lede {
  margin: 32px auto 36px;
  max-width: 740px;
  font-family: var(--ff-body);
  font-weight: var(--fw-medium);
  font-size: 20px;
  line-height: 1.5;
  color: #fde2f0;
}
.comecar__ctas {
  display: inline-flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.btn-on-mag {
  background: var(--papel-quente);
  color: var(--magenta);
  border-color: var(--papel-quente);
}
.btn-on-mag:hover {
  background: var(--grafite-quente);
  color: var(--papel-quente);
  border-color: var(--grafite-quente);
}
.comecar__or {
  margin-top: 36px;
  font-family: var(--ff-mono);
  font-weight: var(--fw-medium);
  font-size: 14px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: #fde2f0;
}
.comecar__contacts {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.comecar__contact {
  font-family: var(--ff-mono);
  font-weight: var(--fw-semibold);
  font-size: 17px;
  letter-spacing: var(--ls-mono-tight);
  color: var(--papel-quente);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.comecar__contact:hover { color: var(--grafite-quente); }
.comecar__sep { color: rgba(240,235,230,0.6); font-size: 18px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--grafite-quente);
  color: var(--papel-quente);
  padding: 64px 0 40px;
  border-top: 1px solid var(--linha-grafite);
}
.footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px;
  flex-wrap: wrap;
}
.footer__brand-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 360px;
}
.footer__brand {
  height: 80px;
  width: auto;
  display: block;
  color: var(--papel-quente);
}
.footer__tagline {
  font-family: var(--ff-mono);
  font-weight: var(--fw-semibold);
  font-size: 14px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--magenta);
}

/* Social icons (ajuste 20) */
.footer__social {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}
.footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--linha-grafite);
  color: var(--papel-quente);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.footer__social-link:hover {
  background: var(--magenta);
  border-color: var(--magenta);
  color: var(--papel-quente);
}
.footer__social-link svg { display: block; }
.footer__cols {
  display: flex;
  gap: 56px;
}
.footer__col-head {
  font-family: var(--ff-mono);
  font-weight: var(--fw-semibold);
  font-size: 14px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--mono-baixa-dk);
  margin-bottom: 14px;
}
.footer__col-link {
  font-family: var(--ff-body);
  font-weight: var(--fw-regular);
  font-size: 15px;
  color: var(--papel-quente);
  text-decoration: none;
  display: block;
  margin-bottom: 8px;
  transition: color var(--dur-fast) var(--ease-out);
}
.footer__col-link:hover { color: var(--magenta); }
.footer__rule {
  margin: 40px 0 16px;
  border: 0;
  border-top: 1px solid var(--linha-grafite);
}
.footer__legal {
  display: flex;
  justify-content: space-between;
  font-family: var(--ff-mono);
  font-weight: var(--fw-medium);
  font-size: 14px;
  letter-spacing: var(--ls-mono-tight);
  text-transform: uppercase;
  color: var(--mono-baixa-dk);
  flex-wrap: wrap;
  gap: 16px;
}

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 700ms var(--ease-out),
              transform 700ms var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* perf-fix: respeitar prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.is-visible {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .tarja[data-anim="draw"]::before {
    animation: none !important;
    transform: scaleX(1) !important;
  }
  .hero__badge-dot,
  .hero__early-bar-dot,
  .member__photo,
  .stack__track {
    animation: none !important;
    transition: none !important;
  }
}

[data-count] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .pacote--gtm { grid-template-columns: 1fr; gap: 24px; }
  .time-grid { grid-template-columns: repeat(3, 1fr); }
  .sobre-bruno { grid-template-columns: 1fr; }
  .sobre-bruno__photo-wrap { max-width: 480px; }
}

@media (max-width: 840px) {
  .container { padding: 0 24px; }
  .section { padding: 72px 0; }
  .section--xl { padding: 96px 0; }

  .nav { padding: 14px 24px; }
  .nav__menu { display: none; }
  /* FIX 2026-05-26 · bug fresta: usar var pra alinhar com altura real do nav */
  .nav.is-open .nav__menu {
    display: flex;
    position: fixed;
    /* casa exatamente com altura do nav · valor dinâmico via top atualizado em media query */
    inset: 88px 0 0 0;
    background: var(--grafite-quente);
    flex-direction: column;
    padding: 32px 24px;
    gap: 24px;
    transform: none;
    left: 0;
    top: 88px;
    z-index: 100;
    overflow-y: auto;
    height: calc(100dvh - 88px);
    height: calc(100vh - 88px);
  }
  .nav__burger { display: block; }
  .nav__cta { display: none; }

  /* A partir do hambúrguer: a barra não acompanha as seções claras.
     Transparente no hero, grafite ao rolar — e o ícone do menu mantém
     a cor clara o tempo todo (sem alternar para grafite). */
  .nav.is-light {
    color: var(--papel-quente);
  }
  .nav.is-light.is-scrolled {
    background: rgba(26, 24, 21, 0.92);
    border-bottom-color: var(--border-hairline);
  }
  .nav.is-light .nav__wordmark--dark { opacity: 1; }
  .nav.is-light .nav__wordmark--light { opacity: 0; }

  .hero { min-height: 90vh; }
  .hero__inner { padding: 100px 24px 64px; }
  .hero__metagrid { grid-template-columns: repeat(2, 1fr); }
  .metagrid__cell:nth-child(1),
  .metagrid__cell:nth-child(3) { border-right: 1px solid var(--border-hairline); }
  .metagrid__cell:nth-child(2),
  .metagrid__cell:nth-child(4) { border-right: 0; }
  .metagrid__cell:nth-child(1),
  .metagrid__cell:nth-child(2) { border-bottom: 1px solid var(--border-hairline); }

  .metricas-grid { grid-template-columns: 1fr; gap: 36px; }

  .stepper { grid-template-columns: 1fr; gap: 36px; }
  .stepper__line { display: none; }

  .pacotes-grid { grid-template-columns: 1fr; gap: 14px; }
  .pacotes-grid--2x2 { grid-template-columns: 1fr; }
  .pacote:nth-of-type(n) { grid-column: 1 / -1 !important; }

  .sobre-bruno { padding: 28px 22px; box-shadow: 6px 6px 0 0 var(--magenta); }
  .sobre-bruno__metricas { grid-template-columns: 1fr; gap: 10px; }

  .clientes__grid { grid-template-columns: repeat(2, 1fr); gap: 16px 24px; }

  .time-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

  .footer__top { flex-direction: column; align-items: flex-start; }
  .footer__brand { height: 56px; }
  .footer__cols { flex-direction: column; gap: 24px; }
  .footer__legal { flex-direction: column; gap: 6px; }
}

@media (max-width: 520px) {
  .time-grid { grid-template-columns: 1fr; }
  .clientes__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   V4 ADJUSTMENTS (2026-05-25) — Override layer
   ============================================================ */

/* #40 — Botão Agendar Discovery navbar topo direito (magenta) */
.nav__cta--right {
  position: relative;
  z-index: 2;
  margin-left: auto;
}
.nav.is-light .nav__cta--right {
  background: var(--magenta);
  color: var(--papel-quente);
  border-color: var(--magenta);
}

/* #23 — Headline em 2 linhas */
.hero__title--2line {
  display: flex;
  flex-direction: column;
  gap: 0.04em;
  line-height: 0.98;
}
.hero__title--2line .hero__title-line-1,
.hero__title--2line .hero__title-line-2 {
  display: block;
}

/* #24 — sub-headline removida, nada precisa ajustar (apenas garantir respiro extra) */
.hero--low .hero__inner { padding-bottom: 80px; }

/* #25 — Manifesto reescrito · garantir respiro entre parágrafos */
.section--manifesto .manifesto__body + .manifesto__body { margin-top: var(--sp-md); }

/* #31 — Sobre Bruno expandido · novos blocos */
.sobre-bruno__bio--lead {
  font-size: 19px;
  line-height: 1.6;
  color: var(--papel-quente);
  font-weight: var(--fw-medium);
  margin: 8px 0 16px;
}
.sobre-bruno__bio--lead strong {
  color: var(--papel-quente);
  font-weight: var(--fw-semibold);
}

.sobre-bruno__trajeto {
  margin-top: 12px;
  border-top: 1px solid var(--linha-grafite);
  padding-top: 24px;
}
.trajeto__head,
.certs__head,
.sobre-bruno__stack .stack__head {
  font-family: var(--ff-mono);
  font-weight: var(--fw-medium);
  font-size: 12px;
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--mono-baixa-dk);
  margin-bottom: 14px;
}
.trajeto__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.trajeto__item {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--linha-grafite);
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.trajeto__num {
  font-family: var(--ff-mono);
  font-weight: var(--fw-semibold);
  font-size: 12px;
  letter-spacing: var(--ls-mono);
  color: var(--magenta);
}
.trajeto__year {
  font-family: var(--ff-mono);
  font-weight: var(--fw-medium);
  font-size: 12px;
  letter-spacing: var(--ls-mono-tight);
  color: var(--mono-baixa-dk);
}
.trajeto__title {
  font-family: var(--ff-display);
  font-weight: var(--fw-bold);
  font-size: 16px;
  line-height: 1.2;
  color: var(--papel-quente);
  margin-top: 4px;
}
.trajeto__desc {
  font-family: var(--ff-body);
  font-size: 13.5px;
  line-height: 1.45;
  color: #c8c2b4;
  margin: 4px 0 0;
}

.sobre-bruno__certs {
  margin-top: 8px;
  border-top: 1px solid var(--linha-grafite);
  padding-top: 24px;
}
.certs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cert {
  font-family: var(--ff-mono);
  font-weight: var(--fw-medium);
  font-size: 12.5px;
  letter-spacing: var(--ls-mono-tight);
  text-transform: uppercase;
  color: var(--papel-quente);
  background: rgba(255, 20, 147, 0.08);
  border: 1px solid rgba(255, 20, 147, 0.35);
  padding: 7px 12px;
}

.sobre-bruno__stack {
  margin-top: 8px;
  border-top: 1px solid var(--linha-grafite);
  padding-top: 24px;
}
.sobre-bruno__stack .stack__desc {
  font-family: var(--ff-body);
  font-size: 15px;
  line-height: 1.55;
  color: #d8d2c4;
  margin: 0;
}

@media (max-width: 900px) {
  .trajeto__grid { grid-template-columns: 1fr; }
  .sobre-bruno__bio--lead { font-size: 17px; }
}

@media (max-width: 720px) {
  .nav__cta--right { display: none; }
}

/* ============ Wordmark IMG (FIX Renata: SVG inline → <img>) ============ */
.nav__wordmark {
  display: block;
  height: 24px;
  width: auto;
  /* Pra fundo escuro (negative), inverte cores via filter */
}

.nav.is-light .nav__wordmark {
  /* No fundo claro (papel), trocar pra wordmark positive */
  /* Será controlado por JS atualizando src do img */
}

.footer__brand {
  display: block;
  height: 32px;
  width: auto;
}

/* ============ Stack — TEXTO padronizado (FIX Chefe msg 1268) ============ */
.stack__name {
  display: inline-flex;
  align-items: center;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--papel-quente);
  opacity: 0.55;
  white-space: nowrap;
  padding: 0 8px;
  transition: opacity 200ms ease;
  text-transform: none;
}
.stack__name:hover {
  opacity: 1;
}
.stack__group {
  display: flex;
  align-items: center;
  gap: 56px;
  padding: 0 28px;
}
.stack__track {
  /* mantém animação existente */
}

/* ============ Hero · Barra magenta EARLY-ADOPTER (FIX msg 1270) ============ */
.hero__early-bar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--magenta);
  color: var(--papel-quente);
  font-family: var(--ff-mono);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 200ms ease, transform 200ms ease;
  margin-top: 36px;
  white-space: nowrap;
}
.hero__early-bar:hover {
  background: var(--magenta-deep);
  transform: translateY(-1px);
}
.hero__early-bar-dot {
  width: 8px;
  height: 8px;
  background: var(--papel-quente);
  border-radius: 50%;
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
@media (max-width: 540px) {
  /* FIX msg 1384 (Renata): texto da barra rosa estava cortado no mobile.
     Causa: white-space: nowrap + ~41 chars * mono 12px * ls 0.14em ~ 365px
     numa viewport util de ~335px. Solucao: permitir quebrar + comprimir tracking. */
  .hero__early-bar {
    padding: 10px 16px;
    font-size: 11.5px;
    letter-spacing: 0.10em;
    white-space: normal;
    text-align: center;
    line-height: 1.35;
    max-width: 100%;
  }
  .hero__early-bar-dot {
    flex-shrink: 0;
  }
}
@media (max-width: 380px) {
  .hero__early-bar {
    font-size: 11px;
    letter-spacing: 0.08em;
    padding: 9px 14px;
    gap: 8px;
  }
}

/* ============ AJUSTES msg 1283 ============ */
/* Navbar wordmark MAIOR (msg 1353: 44 → 52, msg 1365: 52 → 60) */
.nav__wordmark {
  height: 60px !important;
  width: auto;
  display: block;
}

/* Footer wordmark — alinhar com outros elementos da barra */
.footer__brand {
  height: 36px !important;
  width: auto;
  display: block;
  margin: 0;
}
.footer__brand-block {
  align-items: flex-start;
}
.footer__top {
  align-items: center;
}

/* ============ AJUSTE msg 1285: texto marcas alinhado à direita ============ */
.sobre-bruno__bio--right {
  text-align: right;
}
@media (max-width: 768px) {
  .sobre-bruno__bio--right {
    text-align: left;  /* mobile mantém esquerda pra leitura natural */
  }
}

/* ============ AJUSTE FINO msg 1297: alinhar logo footer com tagline e ícones sociais ============ */
.footer__brand-block {
  align-items: flex-start;  /* travar tudo na esquerda */
  gap: 18px;  /* espaçamento uniforme entre logo, tagline e socials */
}

.footer__brand {
  height: 36px !important;  /* tamanho consistente com navbar */
  width: auto;
  display: block;
  margin: 0;
  margin-left: -3px;  /* ajuste fino: SVG tem leve padding interno à esquerda, compensar pra alinhar com texto */
}

.footer__tagline {
  margin: 0;
  margin-left: 0;
}

.footer__social {
  margin: 0;
  margin-left: -2px;  /* ícones quadrados têm border interno, compensar pra alinhar com logo/tagline */
}


/* ============ AJUSTE msg 1321: Toggle PT/EN em texto (sem magenta, mesma cor do menu) ============ */
.nav__lang {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 20px;
  font-family: var(--ff-mono);
  font-weight: var(--fw-semibold);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.nav__lang-link {
  color: var(--papel-quente);
  opacity: 0.55;
  text-decoration: none;
  transition: opacity 200ms ease, color 200ms ease;
}
.nav__lang-link:hover {
  opacity: 1;
  color: var(--magenta);  /* msg 1600: hover magenta igual aos itens do menu */
}
.nav.is-light .nav__lang-link:hover {
  color: var(--magenta);  /* magenta funciona em fundo claro tb */
}
.nav__lang-link--active {
  opacity: 1;
}
.nav__lang-sep {
  color: var(--papel-quente);
  opacity: 0.35;
}
/* Modo light (quando passa em fundo claro) */
.nav.is-light .nav__lang-link,
.nav.is-light .nav__lang-sep {
  color: var(--grafite-quente);
}

/* ============ AJUSTE msg 1324: PT/EN dentro do menu, após Contato, espaçamento duplo ============ */
.nav__lang--inside {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 48px;  /* espaçamento DUPLO do gap normal do menu (~24px) */
  font-family: var(--ff-mono);
  font-weight: var(--fw-semibold);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ============================================================
   ==============================================================
   PENTE FINO MOBILE · 2026-05-26 · max-width: 767px
   --------------------------------------------------------------
   Camada de overrides exclusiva pra mobile. Desktop INTOCADO.
   Itens cobertos: 1, 2, 3, 4, 5, 6, 7 (msg 1380 do Chefe).
   ==============================================================
   ============================================================ */

@media (max-width: 767px) {

  /* ----------------------------------------------------------
     ITEM 2 · BUG espaço entre menu e topo ao rolar
     ----------------------------------------------------------
     Causa: o nav fixed tem altura real ~88-92px (padding 14
     + wordmark 60 + padding 14), mas a regra antiga do menu
     mobile (.nav.is-open .nav__menu) usa "inset: 60px 0 0 0",
     que assumia um nav de 60px. Sobra uma "fresta" do conteúdo
     aparecendo entre o nav fixed e o conteúdo abaixo.
     Fix: reduzir wordmark no mobile + travar altura do nav +
     ajustar inset do menu open dinamicamente. */

  /* FIX msg 1416: no mobile o nav tem fundo escuro solido sempre,
     entao nao precisa trocar a cor do wordmark. Escondemos a versao
     --light e mantemos so a --dark (papel sobre fundo escuro). */
  .nav__wordmark--light {
    display: none !important;
  }
  .nav__wordmark--dark {
    opacity: 1 !important;
    position: static !important;
    transform: none !important;
  }

  .nav {
    /* msg 1433: nav flutuante simples, position:fixed top:0 puro.
       Chefe optou por aceitar a limitacao do iOS WebView Telegram
       (afeta outros sites dele tambem). Sem JS extra, sem complicacao. */
    padding: 12px 20px;
    height: 64px;
    /* Hero: barra transparente. Só vira grafite ao rolar (.is-scrolled). */
    background: transparent;
    border-bottom: 1px solid transparent;
    color: var(--papel-quente);
  }
  /* Ao rolar: grafite sólido e FIXO — não muda mais ao longo da navegação */
  .nav.is-scrolled,
  .nav.is-light.is-scrolled {
    background: rgba(26, 24, 21, 0.96);
    border-bottom-color: var(--border-hairline);
  }
  /* Neutraliza is-light no mobile: a barra e o ícone do hambúrguer NÃO
     acompanham as seções claras (sem alternância de cor durante a rolagem). */
  .nav.is-light {
    background: transparent;
    color: var(--papel-quente);
  }
  /* Menu aberto: barra acompanha o painel grafite (sem fresta transparente) */
  .nav.is-open {
    background: rgba(26, 24, 21, 0.96);
  }
  /* Body também respeita safe-area (sem padding extra) */
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  .nav__wordmark {
    height: 32px !important;  /* drasticamente menor no mobile */
  }

  /* ----------------------------------------------------------
     FIX · wordmark ilegível nas SUBPÁGINAS no mobile
     ----------------------------------------------------------
     As regras mobile acima foram desenhadas pra HOME: barra
     transparente sobre o hero escuro → wordmark NEGATIVA (clara).
     As subpáginas (.page-content) têm barra de papel claro fixa,
     então a wordmark clara forçada acima ficava ilegível (some no
     fundo, só o ponto magenta aparecia). Aqui restauramos a
     identidade da subpágina no mobile — igual ao desktop:
     barra clara sólida + wordmark POSITIVA (tinta escura). */
  .page-content .nav {
    background: var(--papel-luz);
    border-bottom: 1px solid var(--linha-papel);
    color: var(--grafite-quente);
  }
  .page-content .nav.is-scrolled,
  .page-content .nav.is-light,
  .page-content .nav.is-light.is-scrolled,
  .page-content .nav.is-open {
    background: var(--papel-luz);
    border-bottom-color: var(--linha-papel);
    color: var(--grafite-quente);
  }
  .page-content .nav__wordmark--light {
    display: block !important;
    opacity: 1 !important;
  }
  .page-content .nav__wordmark--dark {
    opacity: 0 !important;
  }

  /* Menu hambúrguer alinha exatamente abaixo do nav (sem fresta) */
  .nav.is-open .nav__menu {
    top: calc(64px + env(safe-area-inset-top, 0px));
    left: 0;
    right: 0;
    bottom: 0;
    padding: 28px 24px 40px;
    gap: 20px;
    background: var(--grafite-quente);
    overflow-y: auto;
    height: calc(100dvh - 64px - env(safe-area-inset-top, 0px));  /* dvh evita pulo no iOS */
    height: calc(100vh - 64px - env(safe-area-inset-top, 0px));   /* fallback */
  }

  /* ----------------------------------------------------------
     ITEM 1 · Toggle PT/EN DENTRO do menu hambúrguer
     ----------------------------------------------------------
     O .nav__lang--inside no desktop fica inline depois do
     "Contato" com margin-left: 48px. No mobile, vira um bloco
     visual com PT | EN destacado e centralizado dentro do
     menu aberto. */

  /* ==========================================================
     msg 1523: menu mobile estilo xend.exchange
     ----------------------------------------------------------
     Lista vertical, divisorias hairline, seta -> em cada item,
     toggle PT/EN em pilula com fundo papel no ativo. */

  .nav.is-open .nav__menu {
    gap: 0;
    padding: 32px 24px 32px;
  }

  /* Cada link: linha cheia, seta -> a direita, divisoria embaixo */
  .nav.is-open .nav__menu .nav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 18px 4px;
    font-family: var(--ff-display);
    font-weight: var(--fw-medium);
    font-size: 22px;
    letter-spacing: 0;
    text-transform: none;
    border-bottom: 1px solid rgba(240, 235, 230, 0.10);
    color: var(--papel-quente);
  }
  .nav.is-open .nav__menu .nav__link::after {
    content: "→";
    font-family: var(--ff-mono);
    font-weight: var(--fw-medium);
    font-size: 18px;
    color: var(--papel-quente);
    opacity: 0.6;
    transition: transform 200ms var(--ease-out), opacity 200ms ease, color 200ms ease;
  }
  .nav.is-open .nav__menu .nav__link:hover {
    color: var(--magenta);
  }
  .nav.is-open .nav__menu .nav__link:hover::after {
    color: var(--magenta);
    opacity: 1;
    transform: translateX(4px);
  }

  /* Bloco IDIOMA + toggle PT/EN
     FIX msg 1590: "IDIOMA" vira um item da lista, alinhado com os
     outros links do menu (mesmo padding, mesma divisoria, mesma
     tipografia display). A pilula PT/EN fica à direita no lugar da seta. */
  .nav__lang--inside {
    display: flex;
    align-items: center;
    margin: 0 !important;       /* reseta o margin-left:48px herdado do desktop */
    padding: 18px 4px;
    border-bottom: 1px solid rgba(240, 235, 230, 0.10);
    border-top: none;
    width: 100%;
    box-sizing: border-box;
    align-self: stretch;        /* ocupa a largura toda igual aos links, sem centralizar */
    gap: 0;
  }
  .nav__lang--inside::before {
    content: "Idioma";
    font-family: var(--ff-display);
    font-weight: var(--fw-medium);
    font-size: 22px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--papel-quente);
    opacity: 1;
    margin-right: auto;  /* empurra a pilula PT/EN pra direita */
  }
  /* msg 1600: na pagina EN, "Idioma" vira "Language" */
  html[lang="en"] .nav__lang--inside::before {
    content: "Language";
  }

  /* Container do toggle: borda papel arredondada */
  .nav__lang--inside .nav__lang-link {
    padding: 8px 16px;
    border: none;
    border-radius: 0;
    font-family: var(--ff-mono);
    font-weight: var(--fw-semibold);
    font-size: 13px;
    letter-spacing: 0.16em;
    color: var(--papel-quente);
    opacity: 0.6;
    background: transparent;
    transition: background 200ms ease, color 200ms ease, opacity 200ms ease;
  }
  /* Wrap visual: borda + arredondamento no container dos dois links */
  .nav__lang--inside {
    position: relative;
  }
  /* Cria visual de "pilula" agrupando os 2 links */
  .nav__lang--inside .nav__lang-link:first-of-type {
    border-radius: 999px 0 0 999px;
    border-left: 1px solid rgba(240, 235, 230, 0.4);
    border-top: 1px solid rgba(240, 235, 230, 0.4);
    border-bottom: 1px solid rgba(240, 235, 230, 0.4);
  }
  .nav__lang--inside .nav__lang-link:last-of-type {
    border-radius: 0 999px 999px 0;
    border-right: 1px solid rgba(240, 235, 230, 0.4);
    border-top: 1px solid rgba(240, 235, 230, 0.4);
    border-bottom: 1px solid rgba(240, 235, 230, 0.4);
  }
  /* Item ativo: fundo papel quente, texto grafite */
  .nav__lang--inside .nav__lang-link--active {
    background: var(--papel-quente);
    color: var(--grafite-quente);
    opacity: 1;
    border-color: var(--papel-quente);
  }
  .nav__lang-sep {
    display: none;
  }

  /* ----------------------------------------------------------
     ITEM 3 · Reduzir textos/conteúdos no mobile
     ----------------------------------------------------------
     Tipografia mais compacta nas seções de muito texto:
     manifesto, sobre Bruno, FAQ, time. Mantém sentido completo,
     reduz só presença visual (font-size e line-height).
     */

  /* Hero subtitle/fineprint mais enxutos */
  .hero__fineprint { font-size: 12px; }
  .hero__title {
    font-size: clamp(36px, 11vw, 56px);
    line-height: 1.0;
  }

  /* Manifesto */
  .manifesto__title {
    font-size: clamp(32px, 9vw, 44px);
    line-height: 1.02;
    margin-bottom: var(--sp-lg);
  }
  .manifesto__body {
    font-size: 16px;
    line-height: 1.5;
  }

  /* Sobre Bruno · textos mais densos */
  .sobre-bruno__name { font-size: clamp(36px, 10vw, 48px); }
  .sobre-bruno__role { font-size: 13px; line-height: 1.45; }
  .sobre-bruno__bio { font-size: 14.5px; line-height: 1.55; }
  .sobre-bruno__bio--lead { font-size: 15px; line-height: 1.55; }
  .sobre-bruno__bio--marcas { font-size: 14px; line-height: 1.6; padding-top: 14px; }
  .trajeto__title { font-size: 15px; }
  .trajeto__desc { font-size: 13px; line-height: 1.4; }
  .cert { font-size: 11.5px; padding: 6px 10px; }

  /* FAQ · enxugar pergunta e resposta */
  .faq-item__q {
    font-size: 16px;
    padding: 18px 0;
    padding-right: 36px;
  }
  .faq-item__q::after {
    font-size: 30px;
    top: 12px;
  }
  .faq-item__a {
    font-size: 14.5px;
    line-height: 1.5;
    padding-bottom: 22px;
  }

  /* Time · descrições e roles mais enxutos (também complementa item 6) */
  .member__desc { font-size: 12.5px; line-height: 1.4; }
  .member__role { font-size: 12px; }

  /* ----------------------------------------------------------
     ITEM 4 · Cards de serviços: ESCONDER bloco "pra quem é"
     e reduzir espaçamento entre cards
     ---------------------------------------------------------- */

  /* "PRA QUEM É: ..." sumiu no mobile (inclui variação --inv do GTM) */
  .pacote__icp,
  .pacote__icp--inv {
    display: none !important;
  }

  /* msg 1458: revisao de espacos da secao Servicos no mobile.
     Cards estavam grudados, badge EARLY-ADOPTER colando no topo. */
  .pacotes-grid,
  .pacotes-grid--2x2 {
    gap: 32px;  /* respiro entre cards */
  }
  .pacote {
    padding: 38px 22px 26px;  /* mais espaco em cima pro badge EARLY-ADOPTER */
  }
  .pacote--gtm {
    padding: 38px 22px 28px;
    gap: 18px;
    margin-top: 32px;
  }
  .pacote--gtm-standalone {
    margin-top: 32px;
  }
  /* msg 1463: revisao de espacos DENTRO do header de cada card */
  .pacote__tag {
    top: -14px;  /* sai mais do topo, mantem ar visual */
  }
  .pacote__head {
    margin-top: 12px;     /* respiro entre badge e eyebrow */
    margin-bottom: 22px;  /* respiro entre eyebrow/duracao e titulo */
    gap: 12px;            /* ar entre eyebrow e duracao no flex */
  }
  .pacote__eyebrow {
    font-size: 13px;
    letter-spacing: 0.14em;
  }
  .pacote__dur {
    font-size: 13px;
    letter-spacing: 0.14em;
  }
  .pacote__title {
    font-size: 26px;
    margin-bottom: 14px;
    line-height: 1.1;
  }
  .pacote--gtm .pacote__title { font-size: 30px; }
  .pacote__sub { font-size: 14.5px; margin-bottom: 22px; line-height: 1.45; }
  .pacote__bullets { margin-bottom: 24px; gap: 10px; }
  .pacote__bullets li { font-size: 13.5px; line-height: 1.45; }
  .pacote__footer { padding-top: 18px; gap: 14px; }
  .pacote__price { font-size: 32px; }
  .pacote__price--neutro { font-size: 24px; }
  .pacote__price-meta { margin-top: 6px; }
  .pacote__guarantee {
    margin-top: 14px;
    padding: 12px 14px;
  }
  .pacote__cta {
    margin-top: 14px;
    padding: 16px 20px;
  }

  /* ----------------------------------------------------------
     ITEM 5 · msg 1446: trazer Metodo de volta no mobile e
     reposicionar entre Sobre e Servicos (via JS).
     Aqui so removemos o display:none. O reorder e a renumeracao
     ficam em site.js (initMobileMethodReorder). */

  /* ----------------------------------------------------------
     ITEM 6 · Time em 2 colunas no mobile
     ----------------------------------------------------------
     Override da regra antiga em max-width: 520px (1 coluna).
     Força 2 colunas, com ajustes de legibilidade nas fotos 3:4. */

  .time-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .member__info {
    padding: 12px 12px 14px;
    gap: 4px;
  }
  .member__name { font-size: 20px; }
  .member__badge,
  .member__status {
    font-size: 11px;
    padding: 4px 7px;
    letter-spacing: 0.04em;
  }

  /* ----------------------------------------------------------
     ITEM 7 · Footer · realinhar lista de itens clicáveis
     ----------------------------------------------------------
     Cada coluna empilha; gap uniforme; alinhamento à esquerda. */

  .footer { padding: 48px 0 32px; }
  .footer__top {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }
  .footer__brand-block {
    max-width: 100%;
    gap: 14px;
  }
  .footer__cols {
    flex-direction: column;
    gap: 24px;
    width: 100%;
  }
  .footer__col-head {
    margin-bottom: 10px;
    font-size: 13px;
  }
  .footer__col-link {
    font-size: 14px;
    margin-bottom: 6px;
    line-height: 1.5;
  }
  .footer__rule { margin: 28px 0 14px; }
  .footer__legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    font-size: 12px;
  }
  .footer__brand { height: 28px !important; }

  /* ----------------------------------------------------------
     Refinos gerais mobile (densidade + container)
     ---------------------------------------------------------- */

  .container { padding: 0 20px; }
  .section { padding: 56px 0; }
  .sec-head { margin-bottom: var(--sp-lg); }

  /* Pacotes title + lede */
  .pacotes__title { font-size: clamp(32px, 9vw, 44px); }
  .pacotes__lede { font-size: 15px; margin-bottom: var(--sp-xl); }

  /* Time title + sub */
  .time__title { font-size: clamp(30px, 8.5vw, 40px); }
  .time__sub { font-size: 15px; margin-bottom: var(--sp-2xl); }

  /* FAQ title */
  .faq__title { font-size: clamp(30px, 8.5vw, 40px); margin-bottom: var(--sp-lg); }

  /* Comecar (CTA final) */
  .comecar__title { font-size: clamp(44px, 13vw, 72px); }
  .comecar__lede { font-size: 16px; margin: 24px auto 28px; }

  /* GTM preço — números maiores ficam estourados, comprimir */
  .gtm-price__value { font-size: 24px; }
  .gtm-price__value sub { font-size: 12px; }
  .gtm-price__minimum { font-size: 12px; }
  .gtm-price__label { font-size: 12px; }

  /* ----------------------------------------------------------
     msg 1449: Metodo em caixas grafite com moldura magenta
     ----------------------------------------------------------
     Referencia: moldura da foto do Bruno (box-shadow magenta dura).
     Cada step vira card grafite com borda hairline + sombra magenta. */

  .section--metodo .stepper {
    display: flex;
    flex-direction: column;
    gap: 22px;
    position: relative;
  }
  /* Esconde a linha vertical do stepper no mobile (cards stand-alone) */
  .section--metodo .stepper__line {
    display: none;
  }
  .section--metodo .step {
    position: relative;
    background: var(--grafite-quente);
    border: 1px solid var(--border-hairline);
    box-shadow: 6px 6px 0 0 var(--magenta);
    padding: 22px 20px 20px;
    margin: 0 6px 6px 0;
    color: var(--papel-quente);
  }
  /* Neutraliza o circulo do step__num herdado do desktop */
  .section--metodo .step__num,
  .section--metodo .step.is-first .step__num {
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    border: none !important;
    background: transparent !important;
    display: block !important;
    text-align: left !important;
    font-family: var(--ff-mono) !important;
    font-weight: var(--fw-bold) !important;
    font-size: 36px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    color: var(--magenta) !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
  }
  .section--metodo .step__title {
    font-size: 22px !important;
    font-weight: var(--fw-black);
    color: var(--papel-quente) !important;
    margin: 0 0 6px;
  }
  .section--metodo .step__title .dot {
    color: var(--magenta) !important;
  }
  .section--metodo .step__dur {
    font-family: var(--ff-mono);
    font-size: 12px;
    letter-spacing: var(--ls-mono);
    text-transform: uppercase;
    color: var(--magenta) !important;
    margin-bottom: 12px;
  }
  .section--metodo .step__body {
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--papel-quente) !important;
    opacity: 0.9;
    margin: 0;
  }
}

/* --------------------------------------------------------------
   Override estreito (até 360px) — devices muito pequenos
   pra evitar overflow no time 2 colunas e nos cards
   -------------------------------------------------------------- */
@media (max-width: 360px) {
  .time-grid { gap: 8px; }
  .member__name { font-size: 17px; }
  .member__desc { font-size: 11.5px; }
  .pacote__title { font-size: 22px; }
}