/* ═══════════════════════════════════════════════
   L A CABRAL — Site institucional
   ═══════════════════════════════════════════════ */

/* Registro de tipo para a luz de contorno dos cards de projeto (ver
   .proj-scroll__item::after) — sem @property, um custom property animado
   não interpola (o navegador não sabe que é um ângulo), a "volta" pulava
   em vez de girar suavemente. Sem suporte (navegador antigo): o círculo
   fica parado no ângulo inicial, que já é a borda estática pedida para
   prefers-reduced-motion — degradação aceitável, não um efeito quebrado. */
@property --border-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* ── TOKENS ───────────────────────────────────── */
:root {
  --bg:            #0D1B16;
  --bg-2:          #10241C;
  --surface:       #132A21;
  --surface-2:     #1B362A;
  --surface-hover: #264236;

  --green:        #22C55E;
  --green-light:  #4ADE80;
  --green-dim:    rgba(34, 197, 94, 0.12);
  --green-border: rgba(34, 197, 94, 0.32);

  --amber-light:  #FBBF24;
  --amber-dim:    rgba(245, 158, 11, 0.14);
  --amber-border: rgba(245, 158, 11, 0.34);
  /* Texto do selo .showcase__eyebrow--review — --amber-light (dourado
     claro) tem contraste correto sobre fundo escuro mas falha (~1.4:1)
     sobre --amber-dim aplicado a um território claro; override abaixo
     troca para um âmbar escuro só nesse caso. Achado na auditoria de
     componentes globais (cases.html), não é regressão desta rodada. */
  --amber-fg: var(--amber-light);

  --text: #F3F5F4;
  --text-2: #B7C4BD;
  --text-3: #869089;

  --border: rgba(243, 245, 244, 0.08);
  --border-light: rgba(243, 245, 244, 0.14);

  /* Fundo sutil de .btn--ghost/.btn--outline-card — precisa de um tom
     próprio (não --surface, forte demais em repouso) que inverta junto
     com o território: branco translúcido no escuro, grafite translúcido
     no claro (ver override em .territories/chapter-paper/chapter-grid
     [data-surface="light"]). Sem isso o botão ghost ficava com um véu
     branco quase invisível sobre fundo claro. */
  --btn-ghost-bg: rgba(255, 255, 255, 0.035);

  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-pill: 100px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t:    0.22s;

  --max-w: 1200px;
  /* Space Grotesk é a família principal (mais tensão geométrica/angular,
     conversa com o símbolo LA) — Outfit fica como fallback, não é mais
     renderizada ativamente enquanto a fonte web carrega/existe. */
  --font:  'Space Grotesk', 'Outfit', 'Inter', system-ui, -apple-system, sans-serif;

  --shadow-card:       0 8px 30px -12px rgba(0, 0, 0, 0.55);
  --shadow-card-hover: 0 18px 46px -14px rgba(0, 0, 0, 0.7);

  --project-phone-w:        300px;
  --project-phone-w-mobile: 200px;
  --project-phone-r:        38px;

  /* ── Novos tokens (Fase 1 — Home) ──────────────────────────
     Aditivos: não substituem os tokens acima. Usados apenas pelos
     componentes novos da Home (hero, territórios, projetos) para dar
     ritmo claro/escuro sem redefinir --bg/--surface/--green globais,
     que .header/.footer/.btn/.tag/.section e as outras 4 páginas
     continuam usando exatamente como hoje. */
  --ink-950:     #0A0B0A;  /* quase-preto real, sem tingimento verde */
  --ink-900:     #121312;
  --paper:       #F4F2EC;  /* off-white para o ritmo claro da Home */
  --paper-ink:   #17181A;
  --paper-ink-2: #55584f;
  --paper-line:  rgba(23, 24, 26, 0.12);
  --paper-line-2: rgba(23, 24, 26, 0.07);

  /* QA visual — dois materiais claros para que territórios LIGHT vizinhos
     leiam como capítulos diferentes sem depender de comparar pixels.
     --paper-primary é o --paper de sempre (off-white limpo, registro
     "índice"); --paper-secondary é stone/linho — mais quente e um pouco
     mais escuro (registro "manifesto/reflexivo"). Consumidos por
     section.chapter-grid[data-surface="light"][data-paper="secondary"]
     (ver Material B). Não é gradiente por seção — a própria cor sustenta
     a diferença; o gradiente interno de cada uma só dá profundidade. */
  --chapter-grid-grad-light-secondary: linear-gradient(180deg, #ECE6D8 0%, #E8E2D2 55%, #E3DDCB 100%);
  --plate: #FCFBF7; /* "placa editorial" — superfície sólida sobre módulos densos, ver .territory__plate */
  --territory-card: #F5F1E6; /* card externo do território — tom ligeiramente diferente de --plate, para separar "container" de "conteúdo" sem duas placas idênticas */

  /* Gradiente verde profundo de section.chapter-grid — também
     reaproveitado pelas fichas do scrollytelling de Projetos (cada
     .proj-scroll__item precisa do próprio fundo opaco, do mesmo
     material do capítulo, para "cobrir" fisicamente a ficha anterior
     enquanto sobe). Um valor só, duas regras. */
  --chapter-grid-grad: linear-gradient(180deg, #132A21 0%, #0F2119 55%, #0D1B16 100%);

  /* Fase 2 (Consolidação DARK/LIGHT) — mesmo papel do gradiente acima,
     manifestação clara: off-white com leve variação tonal (nunca chapado),
     usado por section.chapter-grid[data-surface="light"]. Ver comentário
     em "Material B" abaixo para a lógica completa dos dois estados. */
  --chapter-grid-grad-light: linear-gradient(180deg, #F7F5EF 0%, #F4F2EC 55%, #F0EEE4 100%);
}

/* ── RESET ────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html   { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  background:
    radial-gradient(circle at 20% 0%, rgba(34, 197, 94, 0.07), transparent 32%),
    radial-gradient(circle at 85% 15%, rgba(34, 197, 94, 0.05), transparent 34%),
    linear-gradient(180deg, #132A21 0%, #0F2119 46%, #0D1B16 100%);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    linear-gradient(rgba(243, 245, 244, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243, 245, 244, 0.05) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), rgba(0,0,0,0.35));
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), rgba(0,0,0,0.35));
}

/* z-index:1 (não -1) de propósito — precisa pintar por cima do próprio
   fundo+grid estático de section.chapter-grid (que hoje é opaco) e por
   baixo do conteúdo real dela (".chapter-grid > *" é z-index:1 também;
   empate resolvido pela ordem do DOM, e o conteúdo vem depois deste
   canvas). Ver nota em section.chapter-grid (sem isolation) e o clip
   por retângulos em script.js — sem esse clip, um z-index positivo
   vazaria o trail por cima de qualquer seção clara/sólida também. */
.grid-trails {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* QA visual (correção pontual) — causa raiz da interação LIGHT quase
   invisível: mix-blend-mode:screen só tem efeito visível contra um fundo
   ESCURO (screen(bg,fg) = 1-(1-bg)(1-fg) — quando bg já está perto de 1,
   como o território LIGHT, (1-bg) é minúsculo e a fórmula mal se move,
   não importa a cor/alpha escolhida — é um teto matemático, não falta de
   opacidade). Não existe forma de um único elemento com um único
   mix-blend-mode servir bem os dois fundos ao mesmo tempo, então o
   rastro LIGHT ganha um segundo canvas global (não por card/seção —
   script.js continua com um só conjunto de listeners/rAF, só desenha em
   dois contextos) com mix-blend-mode:multiply, que é o inverso correto:
   sempre escurece um fundo claro em direção à cor (tinta verde sobre o
   papel), do mesmo jeito que "screen" sempre clareia um fundo escuro. */
.grid-trails-light {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: multiply;
}

@media (hover: none), (pointer: coarse) {
  .grid-trails, .grid-trails-light {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .grid-trails, .grid-trails-light {
    display: none;
  }
}

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

/* ── LAYOUT ───────────────────────────────────── */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 28px; }

.section { padding: 96px 0; }

.section__head {
  text-align: center;
  max-width: 660px;
  margin: 0 auto 56px;
}
.section__head h2  { margin-bottom: 16px; }
.section__head p   { color: var(--text-2); font-size: 17px; line-height: 1.72; }
.section__head p + p { margin-top: 12px; }
.section__head--sm { max-width: 460px; }

/* ── TYPOGRAPHY ───────────────────────────────── */
h1 { font-size: clamp(32px, 5vw, 58px); font-weight: 600; line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
h2 { font-size: clamp(24px, 3.2vw, 42px); font-weight: 600; line-height: 1.16; letter-spacing: -0.015em; text-wrap: balance; }
h3 { font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -0.006em; }
p  { text-wrap: pretty; }

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

/* ── ATOMS ────────────────────────────────────── */
.tag {
  display: inline-block;
  padding: 4px 13px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  margin-bottom: 20px;
  background: var(--surface-2);
  border: 1px solid var(--border-light);
  color: var(--text-2);
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 13px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--r-pill);
}

.check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: var(--green-dim);
  border: 1px solid var(--green-border);
  border-radius: 50%;
  font-size: 10px;
  color: var(--green);
  font-weight: 700;
  flex-shrink: 0;
}

/* ── BUTTONS ──────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: var(--r-pill);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  transition: all var(--t) var(--ease);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.btn--primary {
  background: var(--green);
  color: #08150F;
  box-shadow: 0 4px 20px rgba(34,197,94,0.28);
}
.btn--primary:hover {
  background: var(--green-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(34,197,94,0.36);
}

.btn--ghost,
.btn--outline-card {
  background: var(--btn-ghost-bg);
  color: var(--text-2);
  border: 1px solid var(--border-light);
}

.btn--ghost:hover,
.btn--outline-card:hover {
  border-color: var(--green-border);
  color: var(--text);
  background: var(--green-dim);
}

.btn--lg { padding: 17px 36px; font-size: 16px; }

/* ── HEADER ───────────────────────────────────── */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  transition: background var(--t) var(--ease), box-shadow var(--t), border-color var(--t);
  background: rgba(13, 27, 22, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.10);
}
.header.is-scrolled {
  background: rgba(10, 21, 17, 0.96);
  border-bottom: 1px solid var(--border-light);
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.14),
    0 12px 34px rgba(0, 0, 0, 0.30);
}

.header__wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.brand__logo {
  height: 40px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}
.brand-group {
  display: flex;
  align-items: center;
  gap: 14px;
}
.brand__tagline {
  font-size: 12px;
  color: var(--text-3);
  font-weight: 500;
  border-left: 1px solid var(--border-light);
  padding-left: 14px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.brand__label        { font-size: 16px; font-weight: 500; color: var(--text); }
.brand__label strong { font-weight: 700; color: var(--text); }

.nav { display: flex; align-items: center; gap: 4px; }

.nav__link {
  padding: 7px 14px;
  font-size: 14px; font-weight: 500;
  color: var(--text-2);
  border-radius: var(--r-pill);
  transition: color var(--t), background var(--t);
}
.nav__link:hover {
  color: var(--text);
  background: rgba(243, 245, 244, 0.08);
}

.nav__cta {
  margin-left: 10px;
  padding: 8px 18px;
  font-size: 14px; font-weight: 600;
  color: var(--green-light);
  background: var(--green-dim);
  border: 1px solid var(--green-border);
  border-radius: var(--r-pill);
  transition: all var(--t) var(--ease);
}
.nav__cta:hover {
  background: var(--green);
  border-color: var(--green);
  color: #08150F;
}

.burger {
  display: none;
  flex-direction: column; gap: 5px;
  padding: 8px;
  border-radius: var(--r-sm);
}
.burger i {
  display: block;
  width: 22px; height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: all var(--t) var(--ease);
}
.burger.is-open i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.is-open i:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger.is-open i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── LANGUAGE SWITCHER ───────────────────────── */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  margin: 0 6px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--border-light);
  border-radius: var(--r-pill);
  flex-shrink: 0;
}
.lang-switch__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 28px;
  border-radius: var(--r-pill);
  font-size: 15px;
  line-height: 1;
  /* Buttons don't inherit page text color by default in every browser —
     without this, the BR/US fallback label (shown when a platform lacks
     flag-emoji glyphs) can render in the browser's default dark button
     text on our dark header, which is unreadable. */
  color: var(--text-2);
  opacity: 0.45;
  filter: grayscale(0.5);
  transition: opacity var(--t) var(--ease), filter var(--t) var(--ease), background var(--t) var(--ease), box-shadow var(--t) var(--ease), color var(--t) var(--ease);
}
.lang-switch__btn:hover {
  opacity: 0.8;
  color: var(--text);
}
.lang-switch__btn.is-active {
  opacity: 1;
  filter: none;
  color: var(--text);
  background: var(--green-dim);
  box-shadow: inset 0 0 0 1px var(--green-border);
}
.lang-switch__btn:focus-visible {
  outline: 2px solid var(--green-light);
  outline-offset: 2px;
  color: var(--text);
}
.lang-switch__flag {
  color: inherit;
  font-size: 15px;
  line-height: 1;
}

/* ── HERO ─────────────────────────────────────── */
/* Fotografia editorial como fundo integral do primeiro fold — a marca
   e o contexto humano da L A Cabral entram primeiro; o site da Sartec
   Papelaria e o app UniEdu aparecem depois, na seção Projetos, como
   prova. Sem UI, sem browser chrome, sem mockup neste fold. */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding: 132px 0 72px;
  background: var(--ink-950);
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 66% 45%;
  animation: hero-photo-in 1.8s var(--ease) both;
}

@keyframes hero-photo-in {
  from { transform: scale(1.035); opacity: 0.001; }
  to   { transform: scale(1);     opacity: 1; }
}

/* Contraste do texto resolvido pela composição da foto (espaço negativo
   à esquerda) + este scrim localizado — neutro quase-preto, nunca verde,
   e sem caixa translúcida grande atrás da copy. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(10, 11, 10, 0.92) 0%, rgba(10, 11, 10, 0.72) 30%, rgba(10, 11, 10, 0.28) 54%, rgba(10, 11, 10, 0.06) 72%, transparent 88%),
    linear-gradient(180deg, rgba(10, 11, 10, 0.30) 0%, transparent 24%, transparent 76%, rgba(10, 11, 10, 0.38) 100%);
}

/* Traço geométrico do símbolo LA — discreto, funciona como assinatura,
   não como protagonista visual (a fotografia é o elemento principal). */
.hero__mark {
  position: absolute;
  z-index: 1;
  left: 28px;
  bottom: 30px;
  width: 32px;
  height: 32px;
  pointer-events: none;
  opacity: 0.55;
}
.hero__mark path {
  fill: none;
  stroke: var(--green-light);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero__inner { position: relative; z-index: 2; }

.hero__content {
  max-width: 560px;
  animation: hero-content-in 0.9s 0.2s var(--ease) both;
}

@keyframes hero-content-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero__content .tag { margin-bottom: 20px; }

.hero__title   { margin-bottom: 24px; text-shadow: 0 2px 28px rgba(0, 0, 0, 0.35); }

.hero__desc {
  font-size: clamp(15px, 1.6vw, 17px);
  color: var(--text-2);
  margin-bottom: 32px;
  line-height: 1.74;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.hero__micro {
  font-size: 13px;
  color: var(--text-3);
  margin-top: 4px;
}

/* Hero primary CTA precisa de mais presença contra o fundo fotográfico */
.hero__actions .btn--primary {
  background: var(--green);
  border: 1px solid var(--green-border);
  box-shadow: 0 6px 26px rgba(34, 197, 94, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.hero__actions .btn--primary:hover {
  background: var(--green-light);
  border-color: var(--green-light);
  box-shadow: 0 10px 38px rgba(34, 197, 94, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.hero__actions .btn--ghost {
  border-color: rgba(243, 245, 244, 0.28);
  background: rgba(10, 11, 10, 0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero__actions .btn--ghost:hover { border-color: rgba(243, 245, 244, 0.5); }

@media (prefers-reduced-motion: reduce) {
  .hero__photo,
  .hero__content { animation: none; opacity: 1; transform: none; }
}

/* ── BROWSER CHROME — moldura de navegador minimalista ────────
   Usada para apresentar trabalho de site/web (nunca para produto
   mobile, que usa .phone-preview). object-fit:cover recorta o topo
   real da captura (header + mensagem + CTA) sem esticar nem gerar
   nenhum pixel novo — é crop/composição, não upscale generativo. */
.browser-chrome {
  display: block;
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink-900);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-card-hover), 0 0 60px -20px rgba(0, 0, 0, 0.6);
}

.browser-chrome__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.browser-chrome__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  flex-shrink: 0;
}
.browser-chrome__url {
  margin-left: 6px;
  font-size: 11px;
  color: var(--text-3);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--r-pill);
  padding: 3px 13px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.browser-chrome__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #EEF0F2;
}
.browser-chrome__frame video,
.browser-chrome__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.browser-chrome--lg .browser-chrome__frame { aspect-ratio: 16 / 11; }

/* ── MÍDIA CLICÁVEL — browser-chrome e phone-preview funcionam como
   link direto para o projeto. O indicador é discreto por padrão (não
   depende de hover para existir no touch) e ganha leve destaque no
   hover/focus do desktop — sem chamar atenção indevida. */
a.browser-chrome,
a.phone-preview {
  cursor: pointer;
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
a.browser-chrome:hover,
a.browser-chrome:focus-visible {
  transform: translateY(-2px) scale(1.012);
  border-color: rgba(255, 255, 255, 0.18);
}
a.phone-preview:hover,
a.phone-preview:focus-visible {
  transform: scale(1.02);
}

.media-link__badge {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(10, 11, 10, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--text);
  opacity: 0.85;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease), background var(--t) var(--ease), color var(--t) var(--ease);
}
.media-link__badge svg { width: 14px; height: 14px; }
a.browser-chrome:hover .media-link__badge,
a.browser-chrome:focus-visible .media-link__badge,
a.phone-preview:hover .media-link__badge,
a.phone-preview:focus-visible .media-link__badge {
  opacity: 1;
  background: var(--green);
  border-color: transparent;
  color: #08150F;
  transform: scale(1.08);
}

/* Touch: o indicador não pode depender de hover para existir */
@media (hover: none), (pointer: coarse) {
  .media-link__badge { opacity: 0.92; }
}

@media (prefers-reduced-motion: reduce) {
  a.browser-chrome, a.phone-preview { transition: none; }
  a.browser-chrome:hover, a.browser-chrome:focus-visible,
  a.phone-preview:hover, a.phone-preview:focus-visible { transform: none; }
}

/* ── CAPÍTULOS DE BACKGROUND (site inteiro) ─────────────────────
   Três materiais para separar cada página em capítulos claros, em vez
   de deixar o grid+gradiente global do body (ver body/body::before no
   topo do arquivo) vazar por trás de toda seção "transparent" e virar
   um bloco verde contínuo. Classes genéricas, não escopadas a nenhuma
   página — a Home foi onde nasceram, mas solucoes.html/cases.html/
   como-trabalhamos.html/sobre.html aplicam as mesmas três classes nas
   seções que fizerem sentido semanticamente (ver comentário em cada
   <section> dessas páginas para o porquê da escolha).

   Material A · .chapter-paper — off-white, editorial/explicativo.
   Generaliza o padrão que .territories já usava sozinha: fundo opaco
   var(--paper) + override local dos tokens de texto/superfície, para
   que .tag/.btn/h2/p herdem o contraste certo sem mudar a regra base
   usada pelas outras páginas. Qualificado com "section" (não só
   ".chapter-paper") de propósito: #como-pensamos e #para-quem também
   carregam .pilot/.fit-split, e ".pilot { background: transparent }"
   tem a mesma especificidade de classe única — sem o qualificador de
   elemento, a ordem de declaração no arquivo decidiria quem vence, o
   que é frágil. "section.chapter-paper" tem especificidade maior e
   sempre vence, independente da ordem. */
.territories,
section.chapter-paper,
section.chapter-grid[data-surface="light"] {
  --text: var(--paper-ink);
  --text-2: var(--paper-ink-2);
  --text-3: #7a7d72;
  --border: var(--paper-line-2);
  --border-light: var(--paper-line);
  --surface: rgba(23, 24, 26, 0.035);
  --surface-2: rgba(23, 24, 26, 0.05);
  /* Generalizado nesta rodada: .pricing-card.is-selected (solucoes.html)
     usa --surface-hover para o estado selecionado — sem este override
     ela herdaria o verde escuro global (#264236), pensado só para
     fundos escuros. */
  --surface-hover: rgba(23, 24, 26, 0.07);
  --btn-ghost-bg: rgba(23, 24, 26, 0.035);
  --amber-fg: #92400E;
  color: var(--paper-ink);
}
.territories,
section.chapter-paper {
  background: var(--paper);
}

/* Material B · .chapter-grid — verde profundo + grid com função
   (estrutura/processo/sistema). Mesmo desenho de grid do body::before,
   mas contido à própria seção — deixa de ser wallpaper global e passa a
   significar algo específico (Projetos, Como trabalhamos, eco-flow de
   um case, metodologia). */
/* Sem overflow:hidden de propósito — qualquer ancestral com overflow
   diferente de visible quebra position:sticky dos descendentes (usado
   pelo palco de Projetos dentro desta seção). O ::before abaixo já é
   inset:0 (do tamanho exato do pai) e sua própria mask-image esmaece
   antes da borda, então nada extrapola mesmo sem clipping.
   Sem isolation de propósito (removido nesta rodada): isolar tornaria
   a seção um bloco atômico de empilhamento, e o canvas.grid-trails
   (rastro interativo, ver script.js) é um elemento externo/global —
   ele só consegue pintar entre o fundo desta seção e o conteúdo dela
   se ambos participarem do MESMO contexto de empilhamento do canvas.
   Sem isolation, ::before (z-index:0) e "> *" (z-index:1) comparam
   diretamente com o z-index:1 do canvas — o que preserva fundo < grid
   estático < rastro < conteúdo sem quebrar nada (todo positioned+
   z-index nesta seção já ganha seu próprio sub-contexto local via
   z-index explícito, então remover isolation daqui não muda a ordem
   interna entre eles, só permite o canvas se intercalar). */
section.chapter-grid {
  position: relative;
  background: var(--chapter-grid-grad);
}
.chapter-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(243, 245, 244, 0.065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243, 245, 244, 0.065) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 90% 75% at 50% 38%, rgba(0,0,0,0.92), rgba(0,0,0,0.3) 85%);
  -webkit-mask-image: radial-gradient(ellipse 90% 75% at 50% 38%, rgba(0,0,0,0.92), rgba(0,0,0,0.3) 85%);
}
.chapter-grid > * { position: relative; z-index: 1; }

/* Material B · manifestação LIGHT — mesmo mecanismo (gradiente de fundo +
   grid estático via ::before + canvas.grid-trails-light clicado por
   cima, ver .grid-trails-light acima), token/cor invertidos
   semanticamente, não matematicamente: no escuro o fundo absorve luz e o
   cursor revela branco/luz suave (ver PALETTE_DARK em script.js); aqui o
   fundo reflete luz e o cursor revela o verde da marca (PALETTE_LIGHT).
   getInteractiveRects() em script.js já separa os retângulos por
   data-surface para pintar cada um, num canvas próprio (ver nota em
   .grid-trails-light) — nenhum listener novo, nenhum canvas por seção. */
section.chapter-grid[data-surface="light"] {
  background: var(--chapter-grid-grad-light);
}
section.chapter-grid[data-surface="light"][data-paper="secondary"] {
  background: var(--chapter-grid-grad-light-secondary);
}
section.chapter-grid[data-surface="light"]::before {
  /* QA visual: 0.06 quase sumia dependendo do monitor — subiu para 0.1,
     ainda abaixo do equivalente DARK (0.065 sobre fundo bem mais escuro
     já lê mais forte por contraste), mas perceptível como estrutura
     ambiental sem virar papel milimetrado. */
  background-image:
    linear-gradient(rgba(23, 24, 26, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 24, 26, 0.1) 1px, transparent 1px);
}

/* Material C · .chapter-solid — verde profundo sólido, sem grid
   (institucional/humano/transição). O CTA final e o footer (chrome
   global, compartilhado por todas as páginas) usam o mesmo material
   diretamente em suas próprias regras-base, um tom mais escuro cada,
   formando o encerramento — ver .cta-final/.footer. */
section.chapter-solid {
  background: linear-gradient(180deg, #0F2119 0%, #0B1912 100%);
}

/* Quatro territórios com peso igual — grid, não flex, para que os quatro
   ocupem sempre a mesma largura (flex:1 com 4 itens já fazia isso, mas
   grid deixa explícito o número de colunas por breakpoint, inclusive o
   2×2 intermediário pedido para tablet/notebook menor).
   Consolidação DARK/LIGHT: eram 4 cards brancos (fundo próprio + borda +
   sombra) flutuando sobre o território claro — o padrão exato de
   chapamento identificado na auditoria. Viraram um índice editorial com
   régua superior/inferior + divisores verticais entre colunas — e depois
   ganharam .territory__card (ver abaixo) como card externo próprio. QA
   pontual: a régua/divisores da fase "índice editorial" nunca foram
   removidos quando .territory__card chegou, então as quatro colunas
   ficavam com card bege + uma moldura extra por fora dele, lendo como
   um segundo grid. Removidos aqui — a hierarquia agora é só grid de
   fundo → card bege → placa branca, sem nada entre essas camadas. */
.territories-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 0;
  max-width: 1280px;
  margin: 0 auto;
}

.territory {
  position: relative;
  padding: 22px 20px 20px;
  display: flex;
  flex-direction: column;
}

/* QA visual (rodada de refinamento) — havia uma camada estrutural solta
   entre o grid de fundo e a placa branca (o número + divisores) que lia
   como "um segundo grid". .territory__card fecha isso: agora cada
   território é um objeto editorial completo — número + placa dentro de
   UM container sólido (--territory-card, tom levemente diferente de
   --plate para não duplicar a mesma superfície duas vezes), radius maior
   que a placa interna, borda muito discreta, sem sombra. O grid ambiente
   já não atravessa nada aqui dentro — só respira nos vazios entre as
   quatro colunas (o divisor .territory, ver acima). */
.territory__card {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--territory-card);
  border: 1px solid var(--paper-line-2);
  border-radius: 24px;
  padding: 18px 18px 20px;
}

/* Numeração discreta com função de índice — agora dentro do card
   externo (não mais direto no grid de fundo), lê como marcador de seção
   ("01 — "), não como enfeite. */
.territory__num {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--green);
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}

/* "Placa editorial" interna — imagem + título + descrição, tom mais
   limpo/claro que o card externo (container > conteúdo, não duas caixas
   iguais aninhadas). */
.territory__plate {
  background: var(--plate);
  border: 1px solid var(--paper-line-2);
  border-radius: var(--r-md);
  padding: 16px 16px 20px;
}
.territory h3 { font-size: 18px; margin-bottom: 8px; color: var(--paper-ink); }
.territory p  { font-size: 13.5px; line-height: 1.62; color: var(--paper-ink-2); }

/* As quatro composições (Magnific: hardware/luz + telas autorais
   compostas por cima) compartilham a mesma direção de arte e proporção —
   nenhuma frente é tratada como "principal", diferente do showcase de
   projetos reais abaixo. */
.territory__visual {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 18px;
  aspect-ratio: 4 / 3;
  background: #EFEDE6;
}
.territory__visual img {
  width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;
}

.territories-cta { text-align: center; margin-top: 36px; }

/* ══ Scrollytelling mobile de "O que fazemos" (QA visual) — mesmo
   princípio físico dos Projetos (script.js reaproveita as mesmas
   funções stScrollPosition/stEnterRecede, não duplica a matemática),
   só ligado no mobile: o desktop preserva os quatro territórios lado a
   lado, sem nenhuma destas regras entrando em jogo (o JS só liga
   .is-enhanced abaixo de 1025px). .territories-scroll__track/__stage
   são wrappers "invisíveis" (display:contents) até a classe ligar — não
   existem para o layout desktop nem para o fallback sem JS/reduced-
   motion, que continua sendo .territories-grid em pilha vertical (ver
   breakpoint ≤680px mais abaixo, inalterado). ══ */
.territories-scroll__track,
.territories-scroll__stage { display: contents; }

@media (max-width: 1024px) {
  .territories-scroll__track.is-enhanced {
    display: block;
    height: var(--terr-track-h, 260vh);
  }
  .territories-scroll__track.is-enhanced .territories-scroll__stage {
    display: flex;
    align-items: center;
    position: sticky;
    top: 76px;
    height: calc(100svh - 76px);
    overflow: hidden;
  }
  /* .territories-grid vira a "janela" real (equivalente ao
     .proj-scroll__stage-inner dos Projetos) — altura medida de verdade
     pelo maior território (measureMobileCardHeight em script.js), nunca
     um valor arbitrário. Réguas do índice editorial (border-top/bottom)
     somem: não fazem sentido numa pilha de cards que se substituem. */
  .territories-scroll__track.is-enhanced .territories-grid {
    display: block;
    position: relative;
    width: 100%;
    max-width: none;
    height: var(--terr-mobile-card-h, 480px);
    overflow: hidden;
    border-top: none;
    border-bottom: none;
  }
  .territories-scroll__track.is-enhanced .territory {
    position: absolute;
    top: 0;
    left: 8px;
    right: 8px;
    border: 1px solid var(--paper-line-2);
    background: var(--territory-card);
    border-radius: 24px;
    overflow: hidden;
    padding: 20px 18px 20px;
    will-change: transform, opacity;
    transition: none;
  }
  /* .territory já É o card externo aqui (mesmo tom/borda) — o card
     interno herdado do desktop (.territory__card) esvazia a própria
     casca para não duplicar a mesma superfície duas vezes. */
  .territories-scroll__track.is-enhanced .territory__card {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
  }
}

/* prefers-reduced-motion: cinto de segurança em CSS, mesmo padrão do
   scrollytelling dos Projetos — script.js já evita ligar .is-enhanced
   neste caso, mas se algo forçar a classe, cai de volta na pilha
   vertical normal (a mesma do fallback ≤680px sem JS). */
@media (prefers-reduced-motion: reduce) {
  .territories-scroll__track.is-enhanced { height: auto; }
  .territories-scroll__track.is-enhanced .territories-scroll__stage { position: static; height: auto; }
  .territories-scroll__track.is-enhanced .territories-grid {
    position: static; height: auto; overflow: visible;
    display: grid; grid-template-columns: 1fr;
  }
  .territories-scroll__track.is-enhanced .territory {
    position: static; opacity: 1 !important; transform: none !important;
  }
  .territories-scroll__track.is-enhanced .territory__card { opacity: 1 !important; }
}

/* ── PROJETOS (Home) — scrollytelling ──────────────────────────
   Estado base (sem JS, mobile, prefers-reduced-motion): três itens
   empilhados em ordem normal de documento — imagem, depois ficha —
   sem sticky nem altura de trilha alguma. É o mesmo HTML do estado
   "enhanced"; só a classe .is-enhanced (adicionada por script.js
   quando a viewport é larga o bastante e o usuário não pediu menos
   movimento) liga o palco preso à viewport com os três projetos
   sobrepostos. O progresso do scroll dentro de .proj-scroll__track é
   convertido a cada frame em opacity/transform escritos diretamente
   pelo JS (nunca por uma transition CSS) — ver script.js. */
.proj-scroll__head { margin-bottom: 8px; }

.proj-scroll__track { position: relative; }

.proj-scroll__stage { padding: 8px 0 0; }

.proj-scroll__stage-inner {
  display: flex;
  flex-direction: column;
  gap: 72px;
  padding-bottom: 8px;
}

.proj-scroll__item {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.proj-scroll__visual-wrap { display: flex; align-items: center; justify-content: center; }

.proj-scroll__frame {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.proj-scroll__frame .browser-chrome.proj-scroll__visual { width: 100%; max-width: 560px; }
/* UniEdu — phone-preview reaproveita a moldura existente (ver ── PILOT
   ── mais abaixo no arquivo), só um pouco menor que o padrão para caber
   com folga na altura do frame ao lado dos browser-chrome dos outros
   dois projetos. */
.proj-scroll__frame--phone { --project-phone-w: 232px; }

.proj-scroll__panel { display: flex; flex-direction: column; align-items: flex-start; }

.proj-scroll__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.proj-scroll__index {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--green-light);
  font-variant-numeric: tabular-nums;
}
/* Régua de progresso — só ganha função (e aparece) no modo enhanced;
   no estado base cada projeto já é 100% legível sem ela. */
.proj-scroll__ruler {
  display: none;
  position: relative;
  width: 64px;
  height: 3px;
  border-radius: 2px;
  background: var(--border-light);
  overflow: hidden;
}
.proj-scroll__ruler-fill {
  position: absolute;
  inset: 0;
  background: var(--green);
  transform-origin: left center;
  transform: scaleX(0);
}

.proj-scroll__panel h3 { font-size: 22px; margin-bottom: 2px; }

.proj-scroll__category {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-3);
  margin-bottom: 12px;
}

.proj-scroll__desc {
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.68;
  margin-bottom: 16px;
  max-width: 48ch;
}

.proj-scroll__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }

.proj-scroll__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }

.proj-scroll__foot { margin-top: 8px; }
.proj-scroll .projects-seeall { text-align: center; margin-top: 0; }

/* ══ Enhanced (scrub por scroll, sem prefers-reduced-motion) — classe
   ligada só por JS. QA visual: deixou de ser exclusivo de desktop —
   script.js agora liga em qualquer largura (ver eligible() em
   script.js); o que muda por breakpoint é só o layout interno do card
   (grid lado a lado no desktop, pilha vertical no mobile — blocos
   "desktop" e "mobile" mais abaixo). Base aqui é o que os dois modos
   compartilham: posição, fundo opaco, cantos arredondados e a luz de
   contorno. ══ */
.proj-scroll__track.is-enhanced { height: var(--proj-track-h, 300vh); }

.proj-scroll__track.is-enhanced .proj-scroll__stage {
  position: sticky;
  top: 76px;
  height: calc(100svh - 76px);
  display: flex;
  align-items: center;
  padding: 0;
  overflow: hidden;
}

.proj-scroll__track.is-enhanced .proj-scroll__stage-inner {
  position: relative;
  width: 100%;
  padding-bottom: 0;
  gap: 0;
  /* A janela real da ficha é esta caixa, não o palco sticky por fora
     dela (mais alto, só para centralizar verticalmente enquanto gruda
     na viewport) — sem este overflow:hidden aqui, uma ficha em
     translateY(100%) (ver script.js) ficaria parcialmente visível nas
     margens acima/abaixo desta caixa dentro do palco mais alto, em vez
     de sumir completamente "fora da parte inferior da janela". Seguro:
     esta caixa não é ancestral de nada sticky (o sticky é o próprio
     .proj-scroll__stage, um nível acima). Altura mobile é escrita por
     script.js em --proj-mobile-card-h (ver measure()); o valor abaixo é
     só o fallback antes do primeiro cálculo/sem JS. */
  overflow: hidden;
  height: var(--proj-mobile-card-h, 560px);
}

/* Cada .proj-scroll__item é uma ficha física completa (número, texto,
   tags, CTA e mockup juntos) — script.js move só o item (translateY +
   scale + opacity), nunca o painel/visual em separado, para que o
   conjunto suba/desça como uma unidade só. Fundo opaco (mesmo
   gradiente de section.chapter-grid, ver --chapter-grid-grad) para que
   a ficha realmente cubra a anterior enquanto sobe — sem isso ela
   seria transparente e o projeto de baixo continuaria visível por
   trás, quebrando a sensação de substituição física. z-index é
   escrito por script.js (estático, crescente por índice: quem vem
   depois sempre cobre quem veio antes, nos dois sentidos do scroll).
   QA visual: ganhou border-radius + overflow:hidden ("card/painel
   completo", não retângulo recortado) — radius bem maior que --r-lg
   porque o componente é enorme (quase a tela toda), um radius normal
   somaria quase reto visualmente. */
.proj-scroll__track.is-enhanced .proj-scroll__item {
  position: absolute;
  top: 0;
  left: 8px;
  right: 8px;
  display: flex;
  flex-direction: column;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0) 14%),
    var(--chapter-grid-grad);
  border-radius: 28px;
  overflow: hidden;
  will-change: transform, opacity;
  transition: none;
}

/* Luz percorrendo o contorno — assinatura extremamente sutil,
   compartilhada pelos três projetos e pelos dois modos (um ::after só,
   aqui, não duplicado por card). conic-gradient + mask-composite:exclude
   formam um anel fino (~1.5px) que acompanha o border-radius com
   perfeição via border-radius:inherit. 78% do anel fica quase invisível
   (alpha 0.07) — só um trecho pequeno, mais claro, percorre o perímetro
   devagar (18s, linear, sem pulsar, sem iluminar o interior). É
   acabamento do objeto, não glow — por isso muito mais localizado que o
   grid ambiente da seção (ver .grid-trails), que continua sendo a única
   fonte de "energia" maior. pointer-events:none: nunca captura clique. */
.proj-scroll__track.is-enhanced .proj-scroll__item::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--border-angle, 0deg),
    rgba(34, 197, 94, 0.07) 0%,
    rgba(34, 197, 94, 0.07) 78%,
    rgba(134, 239, 172, 0.95) 88%,
    rgba(34, 197, 94, 0.07) 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: proj-card-glow 18s linear infinite;
}

@keyframes proj-card-glow {
  to { --border-angle: 360deg; }
}

.proj-scroll__track.is-enhanced .proj-scroll__panel {
  transition: none;
}
.proj-scroll__track.is-enhanced .proj-scroll__frame .proj-scroll__visual {
  /* .browser-chrome/.phone-preview trazem transition:transform para o
     hover — aqui o JS escreve opacity/transform a cada frame e precisa
     de controle exclusivo, sem nenhuma transition suavizando por trás. */
  transition: none;
}

.proj-scroll__track.is-enhanced .proj-scroll__ruler { display: block; }

/* ── Desktop (≥1025px): layout lado a lado, física original preservada
   integralmente — só radius/overflow/luz (acima) e top do stage (76px→
   84px, cabeçalho desktop) mudam nesta rodada. ── */
@media (min-width: 1025px) {
  .proj-scroll__track.is-enhanced .proj-scroll__stage { top: 84px; height: calc(100svh - 84px); }
  .proj-scroll__track.is-enhanced .proj-scroll__stage-inner { height: min(72vh, 600px); }

  /* Gutter interno da ficha (rodada anterior): o texto de Sartec/UniEdu/
     Almeida encostava na borda esquerda do painel. clamp() porque a
     largura de viewport no modo desktop varia bastante. */
  .proj-scroll__track.is-enhanced .proj-scroll__item {
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: minmax(0, 42%) minmax(0, 58%);
    align-items: center;
    gap: 40px;
    padding: 32px clamp(32px, 4vw, 64px);
  }
  .proj-scroll__track.is-enhanced .proj-scroll__visual-wrap {
    grid-column: 2;
    grid-row: 1;
    height: 100%;
  }
  .proj-scroll__track.is-enhanced .proj-scroll__panel { grid-column: 1; grid-row: 1; }
  .proj-scroll__track.is-enhanced .proj-scroll__frame { height: min(56vh, 480px); }
  .proj-scroll__track.is-enhanced .proj-scroll__frame .proj-scroll__visual {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .proj-scroll__track.is-enhanced .proj-scroll__frame .browser-chrome.proj-scroll__visual {
    width: 100%;
    max-width: 560px;
  }
}

/* ── Mobile/tablet (≤1024px): scrollytelling novo — mesma física de
   scrub (script.js), card único empilhado (índice/título/descrição/
   tags/status/CTA em cima do visual, mesma ordem do DOM/fallback base)
   em vez do grid lado a lado. Altura do card não é arbitrária: é o
   maior entre os três projetos, medido de verdade por script.js
   (measure()) e escrito em --proj-mobile-card-h — nada é cortado para
   caber numa altura fixa. ENTER_OPACITY_FROM=1 no JS para este modo
   (ver script.js): o card entra 100% opaco desde o início do slide, por
   isso nunca parece "nascer de dentro" do card anterior (que fica
   embaixo, encoberto por um objeto opaco, não por um véu translúcido). */
@media (max-width: 1024px) {
  .proj-scroll__track.is-enhanced .proj-scroll__item {
    padding: 22px 20px 20px;
    gap: 16px;
  }
  .proj-scroll__track.is-enhanced .proj-scroll__visual-wrap {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* Moldura compacta do mockup — o valor mínimo do clamp já é grande o
     bastante para caber o browser-chrome (barra fixa + frame 4:3) e o
     phone-preview (9:16) sem distorcer nenhum dos dois, ver overrides
     logo abaixo. */
  .proj-scroll__track.is-enhanced .proj-scroll__frame { height: clamp(175px, 25dvh, 210px); }
  .proj-scroll__track.is-enhanced .proj-scroll__panel { flex: 1 1 auto; min-height: 0; }
  .proj-scroll__track.is-enhanced .proj-scroll__desc { max-width: none; }
  .proj-scroll__track.is-enhanced .proj-scroll__actions { flex-direction: column; align-items: stretch; }

  /* Sartec/Almeida (browser-chrome): a regra desktop (width:100%;
     max-width:560px) só existe dentro do @media(min-width:1025px) — sem
     um valor próprio aqui o componente ficaria sem largura definida
     neste breakpoint. 170px cabe com folga mesmo no piso do clamp
     acima (barra ~40px + frame 4:3 a 170px ≈ 167px de altura). */
  .proj-scroll__track.is-enhanced .proj-scroll__frame .browser-chrome.proj-scroll__visual {
    width: 170px;
  }
  /* UniEdu (phone-preview): tem um único aspect-ratio (9/16) para o
     componente inteiro, então basta amarrar a altura à moldura e deixar
     a largura ser calculada — sempre cabe exatamente, em qualquer altura
     do clamp acima, sem precisar coordenar dois números à mão. */
  .proj-scroll__track.is-enhanced .proj-scroll__frame .phone-preview.proj-scroll__visual {
    width: auto;
    height: 100%;
  }
}

/* prefers-reduced-motion: cinto de segurança em CSS — mesmo que algo
   force a classe, o palco nunca vira sticky/sobreposto para quem pediu
   menos movimento (script.js já evita ligar .is-enhanced neste caso). A
   luz de contorno vira estática (sem animation) em vez de sumir — só a
   borda base extremamente discreta permanece, conforme pedido. */
@media (prefers-reduced-motion: reduce) {
  .proj-scroll__track.is-enhanced { height: auto; }
  .proj-scroll__track.is-enhanced .proj-scroll__stage { position: static; height: auto; }
  .proj-scroll__track.is-enhanced .proj-scroll__stage-inner { position: static; height: auto; display: flex; flex-direction: column; gap: 72px; }
  .proj-scroll__track.is-enhanced .proj-scroll__item { position: static; display: flex; flex-direction: column; gap: 28px; opacity: 1 !important; transform: none !important; border-radius: 20px; }
  .proj-scroll__track.is-enhanced .proj-scroll__item::after { animation: none; }
  .proj-scroll__track.is-enhanced .proj-scroll__panel,
  .proj-scroll__track.is-enhanced .proj-scroll__frame .proj-scroll__visual { opacity: 1 !important; transform: none !important; }
  .proj-scroll__track.is-enhanced .proj-scroll__frame .proj-scroll__visual { position: relative; top: auto; left: auto; }
  .proj-scroll__track.is-enhanced .proj-scroll__ruler { display: none; }
}

/* ── CASES.HTML — grade dos três projetos ──────────────────────
   Reaproveita .showcase-primary/.showcase-secondary (mesmo cartão,
   mesma moldura browser-chrome/phone-preview) em três colunas iguais.
   Sartec já ganhou destaque no case completo acima — aqui os três
   projetos entram no mesmo nível, sem repetir a hierarquia. */
.cases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
  max-width: 1180px;
  margin: 0 auto;
}
.cases-grid .showcase-primary .browser-chrome__frame { aspect-ratio: 4 / 3; }
.cases-grid .showcase-secondary { justify-content: center; }

/* ── Hero do case (cases.html) — identidade, status, título, CTA e
   fatos curtos de um lado; mockup grande e clicável do outro. Substitui
   o antigo par "cabeçalho centralizado + mockup pequeno isolado". */
.case-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.28fr);
  gap: 48px;
  align-items: center;
  margin: 0 auto 64px;
  max-width: 1140px;
}
.case-hero__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  text-align: left;
}
.case-hero__text .tag { margin-bottom: 0; }
.case-hero__text h2 { margin: 0; }
.case-hero__desc {
  font-size: 16px;
  color: var(--text-2);
  line-height: 1.68;
  max-width: 460px;
}
.case-hero__actions { margin-top: 2px; }
.case-hero__facts.lucas-facts { width: 100%; margin-top: 6px; }

.case-hero__brand { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
/* QA visual — a logo colorida da Sartec (marca real do cliente, não
   redesenhada) ficava solta/com contraste estranho direto sobre o verde
   profundo do case. Placa branca pequena só para dar suporte visual à
   marca original, como uma etiqueta de aprovação — sem sombra chamativa. */
.case-hero__logo-plate {
  display: inline-flex;
  align-items: center;
  background: #FFFFFF;
  border-radius: 12px;
  padding: 8px 14px;
}
.case-hero__logo { height: 40px; width: auto; display: block; }
.case-hero__divider { width: 1px; height: 22px; background: var(--border-light); flex-shrink: 0; }

.case-hero__visual { position: relative; width: 100%; }

.showcase-primary,
.showcase-secondary {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.showcase-primary   { padding: 28px; }
.showcase-secondary { padding: 26px 24px; align-items: center; text-align: center; }

.showcase-primary .browser-chrome__frame  { aspect-ratio: 16 / 10; }
.showcase-secondary .phone-preview { width: 176px; }

.showcase__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.showcase__logo { height: 24px; width: auto; display: block; }
/* Status do projeto — pill com indicador de cor, mesma linguagem em
   toda listagem (Home, cases.html e hero do case): verde = entregue,
   neutro = protótipo navegável, âmbar = em homologação. */
.showcase__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 10px;
  border-radius: var(--r-pill);
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--green-border);
  background: var(--green-dim);
  color: var(--green-light);
}
.showcase__eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.showcase__eyebrow--delivered {
  border-color: var(--green-border);
  background: var(--green-dim);
  color: var(--green-light);
}
.showcase__eyebrow--prototype {
  border-color: var(--border-light);
  background: var(--surface-2);
  color: var(--text-2);
}
.showcase__eyebrow--review {
  border-color: var(--amber-border);
  background: var(--amber-dim);
  color: var(--amber-fg);
}
.showcase__badges { display: flex; flex-wrap: wrap; gap: 8px; }
.showcase-secondary .showcase__badges { justify-content: center; }
.showcase__info h3 { font-size: 19px; margin-bottom: 8px; }
.showcase__info p  { font-size: 14.5px; color: var(--text-2); line-height: 1.68; }
.showcase__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: auto; padding-top: 6px; }
.showcase-secondary .showcase__actions { justify-content: center; }

/* ── ORIGIN SECTION ───────────────────────────── */
.origin-section { background: transparent; }

.origin-sub {
  font-size: 15px;
  color: var(--text-3);
  font-style: italic;
  margin-top: 8px;
}

/* QA visual (rodada de refinamento) — eram só divisores entre colunas
   sobre o grid ambiente, sem nenhuma superfície bloqueando-o: o rastro
   atravessava a leitura. Uma única faixa sólida (--plate) compartilhada
   pelas três colunas — menos "dashboard" que três cards separados, e o
   grid continua livre ao redor da faixa (acima/abaixo/nas laterais). */
.origin-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  max-width: 820px;
  margin: 0 auto;
  background: var(--plate);
  border: 1px solid var(--paper-line-2);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.origin-grid--3 {
  grid-template-columns: repeat(3, 1fr);
  max-width: 980px;
}

.origin-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 24px;
  border-left: 1px solid var(--paper-line-2);
}
.origin-card:first-child { border-left: none; }

.origin-card__icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--green-dim);
  border-radius: var(--r-sm);
  color: var(--green-light);
  flex-shrink: 0;
}
.origin-card__icon svg { width: 20px; height: 20px; }

.origin-card strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
}

.origin-card p {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.65;
}

/* ── ECOSSISTEMA (4 CARDS) ────────────────────── */
.ecosystem { background: rgba(0, 0, 0, 0.16); }

.eco-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  max-width: 920px;
  margin: 0 auto;
}

.eco-card {
  position: relative;
  padding: 32px;
  background:
    linear-gradient(165deg, rgba(255,255,255,0.03), rgba(255,255,255,0) 40%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
  overflow: hidden;
}
.eco-card::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--green-light), transparent 70%);
  opacity: 0.55;
}
.eco-card:hover {
  border-color: var(--border-light);
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.eco-card__icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: var(--green-dim);
  border-radius: var(--r-sm);
  color: var(--green-light);
  margin-bottom: 20px;
  transition: background var(--t);
}
.eco-card:hover .eco-card__icon { background: var(--green-border); }
.eco-card__icon svg { width: 24px; height: 24px; }

.eco-card h3 { font-size: 16px; margin-bottom: 10px; }
.eco-card p  { font-size: 14px; color: rgba(255, 255, 255, 0.70); line-height: 1.65; }


/* ── Citação de destaque — declaração central em ênfase tipográfica.
   Nasceu no antigo manifesto "Nem tudo vira sistema" (removido: o
   ponto foi fundido em #como-pensamos); a classe continua em uso ali,
   reaproveitada como fecho de seção. */
.manifesto__quote {
  font-size: clamp(21px, 2.4vw, 28px);
  font-weight: 600;
  font-style: italic;
  color: var(--text);
  line-height: 1.42;
  max-width: 600px;
  margin: 0 auto;
}
.manifesto__mark { display: block; width: 110px; height: auto; margin: 64px auto 0; opacity: 0.55; }

/* ── COMO PENSAMOS — manifesto editorial (Consolidação DARK/LIGHT) ──
   Mesmo conteúdo e mesma tese; mais respiro e presença tipográfica, e o
   grid LIGHT interativo por trás (chapter-grid[data-surface="light"])
   substitui o off-white chapado que a auditoria apontou — o vazio ao
   redor do texto passa a ser composição, não ausência. O monograma some
   como logo grande e vira uma marca de fechamento quieta. */
#como-pensamos { padding: 136px 0; }
#como-pensamos .pilot__content > p { margin-bottom: 44px; }
#como-pensamos .manifesto__quote { font-size: clamp(23px, 2.8vw, 32px); }
#como-pensamos .manifesto__mark { width: 44px; margin: 56px auto 0; opacity: 0.4; }

/* ── SOBRE LUCAS ──────────────────────────────── */
.about-lucas { background: transparent; }

.about-lucas__wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}

/* Fotografia grande — protagonista da seção, não um avatar dentro de
   card. Retrato editorial tratado a partir da foto real de Lucas. */
.about-lucas__media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 2 / 3;
  background: var(--surface);
}
.about-lucas__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 24%;
}
/* Vinheta discreta: aprofunda o canto inferior esquerdo do ambiente
   (estante ao fundo), sem tocar a fotografia em si — mesmo vocabulário
   do .hero__scrim, aplicado aqui de forma muito mais sutil. */
.about-lucas__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 85% 65% at 8% 92%, rgba(5, 7, 6, 0.92) 0%, rgba(5, 7, 6, 0.55) 45%, transparent 72%);
  pointer-events: none;
}

.about-lucas__text .tag { margin-bottom: 18px; }
.about-lucas__text h2   { margin-bottom: 14px; }
.about-lucas__text p {
  font-size: 16px;
  color: var(--text-2);
  line-height: 1.7;
  margin-bottom: 12px;
}

.lucas__quote {
  margin: 20px 0 28px;
  padding: 14px 20px;
  background: var(--surface);
  border-left: 3px solid var(--green);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 15px;
  font-style: italic;
  color: var(--text);
  line-height: 1.6;
}

.lucas-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.lucas-proof-card {
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.lucas-proof-card h3 {
  font-size: 14px;
  color: var(--text);
  margin-bottom: 6px;
}
.lucas-proof-card p {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.55;
  margin-bottom: 0;
}

/* Credenciais secundárias — de-boxed: apoiam o texto sem repetir o
   vocabulário de card/borda já usado no .lucas-proof-grid acima. */
.lucas-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 32px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}
.lucas-facts__item { display: flex; flex-direction: column; gap: 3px; }
.lucas-facts__item--wide { flex-basis: 100%; }
.lucas-facts__item dt {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-3);
}
.lucas-facts__item dd { font-size: 13px; color: var(--text-2); font-weight: 500; line-height: 1.5; max-width: 440px; }

/* ── PRICING ──────────────────────────────────── */
.pricing { background: rgba(0, 0, 0, 0.16); }

.pricing-tabs {
  display: none;
}

/* Drag hint for the mobile pricing carousel — hidden on desktop */
.pricing__hint {
  display: none;
  text-align: center;
  font-size: 12px;
  color: var(--text-3);
  margin: -16px 0 20px;
}

.pricing__grid {
  display: grid;
  /* 2x2 — quatro caminhos agora (Sites / Produtos / Sistemas / Aquisição
     e conversão); largura contida para o card não ficar raso demais. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 900px;
  margin: 0 auto;
  gap: 18px;
  align-items: stretch;
  /* Consolidação DARK/LIGHT: régua a abrir a grade — o mesmo vocabulário
     de índice editorial de #territorios, para que os quatro caminhos
     leiam como um sumário sobre o grid ambiente, não quatro caixas de
     preço soltas. */
  padding-top: 28px;
  border-top: 1px solid var(--border);
}

/* QA visual (rodada de refinamento) — o fundo transparente deixava o
   grid/rastro atravessar a leitura; superfície agora é sempre sólida
   (--plate), não só quando selecionado — hover/seleção mudam só borda/
   sombra/elevação, nunca opacidade. Imagem reaproveitada de #territorios
   na Home (mesmo asset, sem gerar/duplicar arquivo) ancora o card. */
.pricing-card__visual {
  border-radius: var(--r-md);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #EFEDE6;
}
.pricing-card__visual img {
  width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;
}

/* Numeral do título ("01 · Título") ganha função de índice — mesmo
   princípio de #territorios, sem mudar copy. */
.pricing-card__head h3 span:first-child {
  color: var(--green);
  font-variant-numeric: tabular-nums;
}

.pricing-card {
  background: var(--plate);
  border: 1px solid var(--paper-line-2);
  border-radius: var(--r-lg);
  padding: 20px 20px 24px;
  /* Fluxo normal, não grid de linhas fixas: a versão anterior travava
     .pricing-card__visual (aspect-ratio:16/9, ~225px numa coluna de
     ~400px) dentro de uma linha fixa de 150px (--pkg-visual-h) — sem
     overflow:hidden na track, a imagem estourava por cima do título.
     Cada bloco (mídia/head/cta/lista/detalhes) agora ocupa sua altura
     natural; o espaçamento entre eles vem do gap, não de bandas iguais. */
  display: flex;
  flex-direction: column;
  gap: 16px;
  cursor: pointer;
  position: relative;
  outline: none;
  min-width: 0;
  width: 100%;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}

.pricing-card:not(.is-selected):not(.pricing-card--highlight):hover {
  border-color: var(--green-border);
  transform: translateY(-2px);
}

.pricing-card:focus-visible {
  box-shadow: 0 0 0 2px var(--green-light);
}

.pricing-card.is-selected:not(.pricing-card--highlight) {
  border-color: var(--green-light);
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover), 0 0 0 1px var(--green-light);
}

/* Highlight card — borda verde estática + selo "Recomendado", sem
   gradiente animado: sinal único e discreto, não um efeito de destaque. */
.pricing-card--highlight {
  position: relative;
  border: 1px solid var(--green-border);
}

.pricing-card--highlight:not(.is-selected):hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

/* Highlight card — selecionado: mesmo tratamento do card padrão selecionado. */
.pricing-card--highlight.is-selected {
  border-color: var(--green-light);
  transform: translateY(-6px);
  box-shadow: var(--shadow-card-hover), 0 0 0 1px var(--green-light);
}

.pricing-card--custom { border-style: dashed; }

.pricing-card__recommended {
  display: inline-block;
  padding: 3px 12px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--green-light);
  background: var(--green-dim);
  border: 1px solid var(--green-border);
  border-radius: var(--r-pill);
  margin-bottom: 8px;
}

.pricing-card__head h3 {
  font-size: 18px;
  margin-bottom: 8px;
  font-weight: 800;
}
.pricing-card__head p {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.6;
}

.pricing-card__price {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px;
  background: var(--bg-2);
  border-radius: var(--r-md);
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
/* highlight pricing card: same internal bg as standard cards */

.price-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.price-line__label {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-3); flex-shrink: 0;
}
.price-line__val  { font-size: 13px; color: var(--text-2); text-align: right; }
.price-line__val strong { color: var(--text); font-size: 15px; font-weight: 700; }
.price-line__val em     { font-style: normal; font-size: 11px; color: var(--text-3); }

.price-line--setup .price-line__label { color: var(--text-3); font-size: 10px; }
.price-line--setup .price-line__val   { font-size: 12px; color: var(--text-3); }
.price-line--setup .price-line__val strong { font-size: 13px; color: var(--text-3); font-weight: 500; }

.price-line--monthly .price-line__label { color: var(--text-2); font-size: 11px; }
.price-line--monthly .price-line__val   { font-size: 14px; color: var(--text-2); }
.price-line--monthly .price-line__val strong { font-size: 18px; color: var(--green-light); font-weight: 800; }

.pricing-card__includes {
  display: flex; flex-direction: column; gap: 9px;
  padding-top: 4px;
  width: 100%;
  box-sizing: border-box;
}
.pricing-card__includes li {
  display: flex; align-items: baseline;
  gap: 10px;
  font-size: 13px; color: var(--text-2); line-height: 1.5;
  min-width: 0;
}

/* ── PACKAGE DETAILS ──────────────────────────── */
.pricing-card__cta {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  align-self: start;
  white-space: normal;
  text-align: center;
}

.pkg-details {
  border-top: 1px solid var(--border);
  align-self: stretch;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.pkg-details__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 100%;
  padding: 14px 0 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--green-light);
  cursor: pointer;
  background: none;
  border: none;
  font-family: var(--font);
  transition: color var(--t);
  user-select: none;
  letter-spacing: 0.01em;
  text-align: left;
  box-sizing: border-box;
  overflow: hidden;
}
.pkg-details__toggle:hover { color: var(--text); }

.pkg-details__icon {
  font-size: 18px;
  font-weight: 300;
  line-height: 1;
  flex-shrink: 0;
  transition: transform var(--t) var(--ease);
}

.pricing__grid.is-details-open .pkg-details__icon {
  transform: rotate(45deg);
}

.pkg-details__body {
  padding: 4px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pkg-details__body[hidden] { display: none; }

.pkg-details__block strong {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 3px;
}

.pkg-details__block p {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.6;
}

.pkg-details__note {
  font-size: 11px;
  color: var(--text-3);
  font-style: italic;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}

/* ── APLICAÇÃO REAL ───────────────────────────── */
.real-app-section { background: transparent; }

/* ── Phone preview: moldura de celular reutilizada em qualquer case
   de produto/app (hero, territórios, projetos, cases.html). ── */
.phone-preview {
  display: block;
  position: relative;
  width: var(--project-phone-w);
  aspect-ratio: 9 / 16;
  padding: 9px;
  border-radius: var(--project-phone-r);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03)) border-box,
    #050807;
  box-shadow:
    0 28px 64px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 0 48px rgba(34, 197, 94, 0.08);
  overflow: hidden;
  box-sizing: border-box;
}

.phone-preview::before {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 30px;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 0 28px rgba(0, 0, 0, 0.30);
  z-index: 2;
}

.phone-preview__island {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 78px;
  height: 23px;
  border-radius: 999px;
  background: #02030a;
  z-index: 3;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.phone-preview__video {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  object-fit: cover;
  background: #050610;
  transform: none;
}


/* ── PILOT ────────────────────────────────────── */
.pilot { background: transparent; }

.pilot__wrap { max-width: 820px; margin: 0 auto; }

.pilot__content { text-align: center; }
.pilot__content h2,
.pilot__content h1 { margin-bottom: 16px; }
.pilot__content > p {
  font-size: 17px;
  color: var(--text-2);
  line-height: 1.72;
  max-width: 600px;
  margin: 0 auto 40px;
}

.pilot__steps {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  max-width: 1080px;
  margin: 44px auto 0;
}

.pilot-step {
  flex: 1; min-width: 200px; max-width: 248px;
  padding: 28px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  text-align: left;
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.pilot-step:hover {
  border-color: var(--green-border);
  transform: translateY(-3px);
}
.pilot-step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--green-dim);
  border: 1px solid var(--green-border);
  color: var(--green-light);
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 16px;
  font-variant-numeric: tabular-nums;
}
.pilot-step h3    { font-size: 16px; margin-bottom: 8px; }
.pilot-step p      { font-size: 13px; color: var(--text-2); line-height: 1.6; }
.pilot-step__arrow {
  align-self: center;
  flex: 0 0 auto;
  font-size: 20px;
  color: var(--text-3);
}

.pilot__cta { text-align: center; margin-top: 36px; }

/* ── ABERTURA DO MÉTODO (como-trabalhamos.html) — âncora editorial:
   fotografia de diagnóstico + título, antes da timeline de 4 fases. ── */
.method-intro__wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}
.method-intro__media {
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 6 / 5;
  background: var(--surface);
}
.method-intro__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
}
.method-intro__content .tag { margin-bottom: 18px; }
.method-intro__content h1  { margin-bottom: 16px; }
.method-intro__content > p {
  font-size: 16px;
  color: var(--text-2);
  line-height: 1.72;
}

/* ── ECOSSISTEMA REAL (cases.html) ───────────────
   7 partes do ecossistema Sartec em grade equilibrada: 4 cartões na
   primeira linha, 3 centralizados na segunda — flex-wrap com largura
   fixa por item garante que a última linha centralize sozinha, sem
   esticar para preencher e sem deixar buraco de coluna vazia. */
.eco-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 20px;
  max-width: 1160px;
  margin: 0 auto;
}
.eco-flow__node {
  flex: 0 1 260px;
  max-width: 260px;
  padding: 24px 20px;
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-radius: var(--r-lg);
  text-align: left;
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
}
.eco-flow__node:hover { border-color: var(--green-border); transform: translateY(-3px); }
.eco-flow__node--brand {
  border-color: rgba(37, 211, 102, 0.4);
  background: rgba(16, 60, 40, 0.45);
}
.eco-flow__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--green-dim);
  border: 1px solid var(--green-border);
  color: var(--green-light);
  font-weight: 700;
  font-size: 12px;
  margin-bottom: 12px;
}
.eco-flow__node--brand .eco-flow__num {
  background: rgba(37, 211, 102, 0.16);
  border-color: rgba(37, 211, 102, 0.45);
  color: #25d366;
}
.eco-flow__node h3 { font-size: 14px; margin-bottom: 6px; }
.eco-flow__node p  { font-size: 12px; color: var(--text-2); line-height: 1.55; }

.pilot__note {
  font-size: 14px;
  color: var(--text-3);
  margin-top: 28px;
  font-style: italic;
}

/* ── FAQ ──────────────────────────────────────── */
.faq { background: rgba(0, 0, 0, 0.16); }

.faq__list { max-width: 680px; margin: 0 auto; }

.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:first-child { border-top: 1px solid var(--border); }

.faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 22px 0;
  gap: 20px;
  text-align: left;
}
.faq-q span:first-child { font-size: 16px; font-weight: 600; color: var(--text); line-height: 1.4; }
.faq-icon {
  font-size: 22px; font-weight: 300;
  color: var(--green-light);
  flex-shrink: 0;
  transition: transform var(--t) var(--ease);
  line-height: 1;
}
.faq-item.is-open .faq-icon { transform: rotate(45deg); }

.faq-a {
  height: 0;
  overflow: hidden;
  transition: height 0.28s var(--ease);
}
.faq-a__inner {
  padding: 0 0 22px;
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.72;
}

/* ── CTA FINAL ────────────────────────────────── */
/* Verde profundo sólido, mais escuro que o resto do site (Material C —
   encerramento) — opaco de propósito, para cortar de vez o grid do
   body::before em vez de deixá-lo vazar por trás com opacidade baixa. */
.cta-final {
  background: linear-gradient(180deg, #0A1712 0%, #081310 100%);
  position: relative;
  padding: 112px 0;
  overflow: hidden;
}
.cta-final__glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 80% at 50% 50%, rgba(34,197,94,0.08), transparent 68%);
  pointer-events: none;
}
.cta-final__wrap {
  position: relative;
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.cta-final__wrap h2 { margin-bottom: 20px; }
.cta-final__wrap > p {
  font-size: 18px;
  color: var(--text-2);
  line-height: 1.7;
  margin-bottom: 36px;
}
.cta-final__sub { margin-top: 18px; font-size: 0; }
.cta-final__wa-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--green-light);
  transition: color var(--t);
}
.cta-final__wa-link:hover { color: var(--text); }
.cta-final__note {
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-3);
}

/* ── FOOTER ───────────────────────────────────── */
/* Quase-preto opaco — último degrau do encerramento (Material C), abaixo
   do CTA final. */
/* QA visual (correção pontual) — o footer ocupava ~460px+ e lia como
   mais uma seção, não um rodapé. Reorganizado em 3 colunas (marca /
   dados institucionais / navegação) para usar a largura em vez da
   altura, com uma linha legal única e compacta por baixo — mesma
   informação, nada removido, densidade menor. Referência de percepção
   (não requisito rígido): ~220–300px em vez de 450px+. */
.footer {
  background: #060B09;
  border-top: 1px solid var(--border);
  padding: 40px 0 0;
}
.footer__wrap {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
}
.footer__left { display: flex; flex-direction: column; gap: 8px; flex: 1 1 240px; }

/* Marca de encerramento — símbolo + wordmark num único asset (sem o
   descritor "Soluções Digitais"). Ainda um pouco maior que o header
   (52px vs 40px) para manter presença de marca ao fechar a página, mas
   longe dos 92px originais — essa única mudança já devolvia boa parte
   da altura excessiva do footer. */
.footer__brand { display: inline-block; margin-bottom: 4px; }
.footer__brand-mark { height: 52px; width: auto; display: block; }

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

/* Vira coluna própria (irmã de .footer__left/.footer__nav), não mais
   bloco anexado embaixo da marca — por isso sem border-top/padding-top
   próprios aqui; a régua horizontal de baixo (.footer__legal) já fecha
   o bloco de cima inteiro. */
.footer__contact {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 0 1 220px;
}
.footer__contact p { font-size: 12px; color: var(--text-3); line-height: 1.5; }
.footer__contact strong { color: var(--text-2); font-weight: 600; }
.footer__contact a { color: var(--text-3); transition: color var(--t); }
.footer__contact a:hover { color: var(--text-2); }

/* Lista vertical (era wrap horizontal de pills) — cabe melhor como
   terceira coluna estreita; om hover mais discreto, sem pill inteira. */
.footer__nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.footer__nav a {
  padding: 4px 8px;
  margin-left: -8px;
  font-size: 13px; color: var(--text-3);
  border-radius: var(--r-sm);
  transition: color var(--t), background var(--t);
}
.footer__nav a:hover { color: var(--text-2); background: rgba(255,255,255,0.04); }

/* Linha legal única e compacta (era .footer__disclaimer + .footer__bottom
   em dois blocos separados, cada um com a própria régua/padding) —
   mesmo texto, uma régua só, gap enxuto entre as duas linhas. */
.footer__legal { padding: 14px 0 18px; }
.footer__disclaimer {
  font-size: 11px; color: var(--text-3); line-height: 1.6; opacity: 0.7; max-width: 860px; margin-bottom: 6px;
}
.footer__bottom { font-size: 11px; color: var(--text-3); opacity: 0.4; }

/* ── WHATSAPP FLOAT ───────────────────────────── */
.wa-float {
  position: fixed;
  bottom: 28px; right: 28px;
  z-index: 150;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #25d366;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 24px rgba(37,211,102,0.40);
  transition: transform var(--t) var(--ease), box-shadow var(--t);
}
.wa-float:hover { transform: scale(1.08); box-shadow: 0 8px 32px rgba(37,211,102,0.55); }
.wa-float svg   { width: 28px; height: 28px; color: #fff; }

/* ── INNER PAGES (reorganização da arquitetura) ──
   h1 substitui h2 como heading principal nas páginas internas (1 h1 por
   página, por semântica/SEO), mas deve ler visualmente igual a um h2 de
   seção — sem isso herdaria o tamanho de .hero__title. */
main h1:not(.hero__title) {
  font-size: clamp(24px, 3.2vw, 40px);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.024em;
}
.section__head h1 { margin-bottom: 16px; }

/* Primeira seção de cada página interna (sem hero acima) precisa de
   espaço para não ficar atrás do header fixo. */
.page-intro { padding-top: 140px; }

/* Footer — linha discreta de autoria */
.footer__authorship { font-size: 12px; color: var(--text-3); }

/* Cards de solução (Home + solucoes.html) — CTA "Saiba mais" dentro do eco-card */
.eco-card__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--green-light);
  transition: color var(--t);
}
.eco-card__link:hover { color: var(--text); }

/* 5 cards de solução na Home: flex-wrap em vez de grid fixo, para que a
   3ª linha (2 itens) feche centralizada em vez de esticar para preencher
   uma coluna vazia — "3 em cima, 2 embaixo centralizados". */
.eco-grid--solutions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 1040px;
}
.eco-grid--solutions .eco-card {
  flex: 1 1 300px;
  max-width: 320px;
}

/* Frase de transição entre "Soluções" e "Como funciona" na Home */
.transition-line {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 28px 48px;
  text-align: center;
  font-size: 17px;
  color: var(--text-2);
  line-height: 1.7;
}

/* "Ver todos os projetos" — Home */
.projects-seeall { text-align: center; margin-top: 36px; }

/* Páginas individuais de solução — coluna de leitura central */
.solution-page { max-width: 720px; margin: 0 auto; }
/* O título do bloco Antes → Depois vive FORA da caixa (.ba-wrapper),
   como uma legenda acima da tabela — assim ele respira em vez de ficar
   colado no topo arredondado do componente. */
.solution-before-after {
  margin: 36px 0 40px;
  text-align: center;
}
.solution-before-after__heading {
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}
.solution-before-after .ba-wrapper { margin: 0; }
.solution-page .pkg-details__block { margin-bottom: 28px; }
.solution-page .pkg-details__block strong {
  font-size: 12px;
  margin-bottom: 8px;
}
.solution-page .pkg-details__block p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-2);
}
.solution-page .pricing-card__includes { margin-top: 14px; }
.solution-page .pricing-card__includes li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--text-2);
  margin-bottom: 8px;
}
.solution-page .pkg-details__note {
  margin-bottom: 28px;
  font-size: 13px;
}
.solution-cta { margin: 8px 0 20px; }
.solution-plan-mention {
  font-size: 14px;
  color: var(--text-3);
}
.solution-plan-mention a { color: var(--green-light); text-decoration: underline; }
.solution-plan-mention a:hover { color: var(--text); }

/* Pacotes dentro de Como Trabalhamos — link secundário para a página de solução */
.pkg-learn-more {
  display: block;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--green-light);
  text-align: center;
  transition: color var(--t);
}
.pkg-learn-more:hover { color: var(--text); }

/* Cases — pequena tag de "tipo de solução" */
.case-type {
  display: block;
  font-size: 12px;
  color: var(--text-3);
}
.case-type span:last-child { color: var(--text-2); font-weight: 600; }

/* ══ CASE STORY RAIL (cases.html, case Sartec) — Desafio/Solução/
   Resultado. QA visual: era uma grade estática dos três ao mesmo tempo
   (grid/rastro atravessando o texto, experiência documental parada);
   vira narrativa de capítulos. Base (sem JS/mobile/reduced-motion): três
   painéis sólidos em fluxo normal, cada um bloqueando o grid por trás
   sozinho — isso já resolve legibilidade e é o próprio fallback/mobile
   (reveal progressivo via .fade-up, reaproveitado, não um mecanismo
   novo). O palco sticky com crossfade é só um acréscimo do desktop
   (ver @media abaixo), reaproveitando stScrollPosition/stEnterRecede
   de script.js — mesma física de Projetos/Territórios, N=3 aqui. ══ */
.case-story__rail { display: none; }
.case-story__panels {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 760px;
  margin: 0 auto 56px;
}
.case-story__chapter {
  background: var(--surface-2);
  border: 1px solid var(--border-light);
  border-radius: var(--r-lg);
  padding: 32px 32px 30px;
}
.case-story__num {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: var(--green-light);
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}
.case-story__chapter h3 { font-size: 20px; margin-bottom: 12px; }
.case-story__chapter p { font-size: 15px; color: var(--text-2); line-height: 1.72; }

/* Sensores invisíveis (1px) usados só para IntersectionObserver — nunca
   visíveis, nunca clicáveis. Substituem o cálculo de progresso de scroll
   por rAF (perfilado: sem custo de layout por frame, sem long tasks). */
.case-story__sensors { display: none; }

@media (min-width: 1025px) {
  /* Altura reduzida de 240vh para 150vh — espaço suficiente para os 3
     sensores ficarem bem separados, sem criar uma "sala vazia" ao redor
     do palco fixo (QA: rodada de estabilização). */
  .case-story__track.is-enhanced {
    position: relative;
    height: 150vh;
  }
  .case-story__track.is-enhanced .case-story__sensors {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .case-story__track.is-enhanced .case-story__sensor {
    position: absolute;
    left: 0; right: 0;
    height: 1px;
  }
  .case-story__track.is-enhanced .case-story__sensor[data-chapter="0"] { top: 8%; }
  .case-story__track.is-enhanced .case-story__sensor[data-chapter="1"] { top: 46%; }
  .case-story__track.is-enhanced .case-story__sensor[data-chapter="2"] { top: 84%; }

  .case-story__track.is-enhanced .case-story__stage {
    position: sticky;
    top: 104px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }
  .case-story__track.is-enhanced .case-story__panels { margin-bottom: 0; }

  .case-story__track.is-enhanced .case-story__rail {
    display: flex;
    align-items: center;
    gap: 32px;
    position: relative;
  }
  .case-story__track.is-enhanced .case-story__rail-item {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-3);
    transition: color var(--t) var(--ease);
    font-variant-numeric: tabular-nums;
    background: none;
    border: none;
    padding: 4px 0;
    font-family: var(--font);
    cursor: pointer;
  }
  .case-story__track.is-enhanced .case-story__rail-item:focus-visible {
    outline: 2px solid var(--green-light);
    outline-offset: 4px;
    border-radius: 2px;
  }
  .case-story__track.is-enhanced .case-story__rail-item em { font-style: normal; font-weight: 500; margin-left: 4px; }
  .case-story__track.is-enhanced .case-story__rail-item.is-active { color: var(--green-light); }
  .case-story__track.is-enhanced .case-story__rail-line {
    position: absolute;
    left: 0; right: 0; bottom: -12px;
    height: 2px;
    background: var(--border-light);
    border-radius: 2px;
    overflow: hidden;
  }
  .case-story__track.is-enhanced .case-story__rail-fill {
    position: absolute; inset: 0;
    background: var(--green);
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 0.3s var(--ease);
  }

  /* Troca de capítulo por classe (is-active), não por interpolação de
     scroll: só um capítulo em fluxo por vez, container cresce/encolhe
     naturalmente com o conteúdo — sem medir/travar altura por JS. */
  .case-story__track.is-enhanced .case-story__panels { position: relative; width: 100%; }
  .case-story__track.is-enhanced .case-story__chapter { display: none; }
  .case-story__track.is-enhanced .case-story__chapter.is-active {
    display: block;
    animation: case-story-reveal 0.4s var(--ease) both;
  }
}

@keyframes case-story-reveal {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .case-story__track.is-enhanced .case-story__chapter.is-active { animation: none; }
}

.case-capabilities { margin-bottom: 48px; }
.case-capabilities__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* Grade de blocos curtos com o "o que muda por tipo de problema"
   (como-trabalhamos.html) — 2x2 para acomodar as quatro frentes de
   atuação sem apertar o texto de cada bloco. */
.eco-grid--capabilities {
  grid-template-columns: repeat(2, 1fr);
  max-width: 640px;
}

/* Checklist — "Para quem fazemos mais sentido" (Home). Coluna única no
   mobile; 2 colunas com régua nativa do CSS multi-column no desktop (ver
   media query abaixo) — nenhuma grade nova, só a lista mais escaneável. */
.fit-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 24px;
}
.fit-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.5;
}
.fit-note {
  font-size: 13px;
  color: var(--text-3);
}

/* Em desktop amplo a coluna de texto (com 11 itens) fica bem mais alta
   que a foto ao lado — 2 colunas equilibram a leitura sem cortar
   nenhum item da lista. column-rule é a "régua vertical extremamente
   discreta" pedida — nativa do layout multi-coluna, não uma segunda
   estrutura de linhas por cima. Escopado a #para-quem: é a única seção
   que usa .fit-list hoje. */
@media (min-width: 900px) {
  #para-quem .fit-list {
    display: block;
    column-count: 2;
    column-gap: 32px;
    column-rule: 1px solid var(--paper-line-2);
  }
  #para-quem .fit-list li {
    break-inside: avoid;
    margin-bottom: 12px;
  }
}

/* ── QUANDO ENTRAMOS (Home) — QA visual: virou fotografia + UMA
   superfície de leitura sólida (tag+headline+lista+nota), não mais foto
   de um lado / conteúdo solto do outro com só um fio divisor. A
   superfície bloqueia o grid ambiente por trás inteira — sem ela, o
   grid atravessava a lista de 11 itens (sensação de "dois grids"). A
   vinheta na foto (mesmo tratamento de .about-lucas__media) ancora a
   imagem à superfície em vez de flutuar sobre ela. */
.fit-split__wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: stretch;
}
.fit-split__media {
  position: relative;
  width: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 5 / 4;
  background: var(--surface);
}
.fit-split__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 32% 35%;
}
.fit-split__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 92% 8%, rgba(23, 24, 26, 0.22) 0%, transparent 55%);
  pointer-events: none;
}
.fit-split__content {
  background: var(--plate);
  border: 1px solid var(--paper-line-2);
  border-radius: var(--r-lg);
  padding: 40px 40px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.fit-split__content .tag { margin-bottom: 18px; }
.fit-split__content h2  { margin-bottom: 20px; }

/* ── COMO COMEÇAMOS (como-trabalhamos.html) — 8 itens em 3 grupos
   editoriais (antes / durante / depois), não 8 cards uniformes. A
   auditoria apontou que a grade antiga (.contracting-grid, removida)
   lia como "8 cláusulas contratuais" cedo demais na relação; o mesmo
   conteúdo agrupado por fase de relação lê como síntese de compromisso.
   QA pontual: a régua superior sozinha (sem superfície própria) deixava
   o grid/rastro do território LIGHT atravessar o texto — vira UMA
   superfície sólida (--plate, mesmo tom do resto do site) compartilhada
   pelas 3 colunas, com um divisor vertical bem discreto entre elas em
   vez de três caixas separadas. Itens dentro de cada coluna continuam
   separados só por espaçamento/tipografia + linha fina horizontal (ver
   .commitment-item) — não viram cards. */
.commitment-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  max-width: 1080px;
  margin: 0 auto;
  background: var(--plate);
  border: 1px solid var(--paper-line-2);
  border-radius: var(--r-lg);
  padding: 40px 44px 36px;
}
.commitment-group:not(:first-child) {
  border-left: 1px solid var(--paper-line-2);
  padding-left: 40px;
}
.commitment-group__label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 18px;
}
.commitment-group__items { display: flex; flex-direction: column; }
.commitment-item {
  padding: 16px 0;
  border-top: 1px solid var(--border);
}
.commitment-item:first-child { border-top: none; padding-top: 0; }
.commitment-item h3 { font-size: 15px; margin-bottom: 6px; }
.commitment-item p  { font-size: 13.5px; color: var(--text-2); line-height: 1.6; }

/* Timeline vertical do processo de trabalho (como-trabalhamos.html) —
   pensada para muitos passos (10), por isso não reaproveita o layout
   horizontal de setas do .pilot__steps (feito para 4-5 itens). */
.process-timeline {
  max-width: 640px;
  margin: 0 auto;
  list-style: none;
}
.process-step {
  display: flex;
  gap: 18px;
  padding-bottom: 28px;
  position: relative;
}
.process-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 17px;
  top: 36px;
  bottom: 0;
  width: 2px;
  background: var(--border-light);
}
.process-step__num {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--green-dim);
  border: 1px solid var(--green-border);
  color: var(--green-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}
.process-step__body h3 { font-size: 16px; margin-bottom: 4px; }
.process-step__body p { font-size: 14px; color: var(--text-2); line-height: 1.6; }

/* Bloco "processo por tipo de solução" — lista de perguntas dentro do
   card de Presença Digital */
.process-questions {
  margin-top: 12px;
  padding-left: 18px;
}
.process-questions li {
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.6;
  list-style: disc;
  margin-bottom: 4px;
}

/* CTA intermediário discreto, no meio de páginas longas (como-trabalhamos.html) */
.mid-page-cta {
  text-align: center;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  color: var(--text-3);
}
.mid-page-cta a {
  display: inline-block;
  margin-left: 8px;
  font-weight: 600;
  color: var(--green-light);
}
.mid-page-cta a:hover { color: var(--text); }

/* ── HOME — quem está por trás (resumo editorial) ────────────────
   Retrato + texto lado a lado, integrado à página (sem card com borda
   nem avatar circular) — teaser leve da seção completa em sobre.html,
   não um currículo. */
/* QA visual — padding era 8px/80px (assimétrico), por isso a foto+texto
   ficava visivelmente mais perto do topo da seção. .home-founder__wrap
   já centraliza foto+texto como um grupo único entre si (align-items:
   center) — a causa era a moldura ao redor do grupo, não o grupo em si. */
.home-founder { padding: 72px 0; }
.home-founder__wrap {
  display: grid;
  grid-template-columns: minmax(0, 0.58fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  max-width: 860px;
  margin: 0 auto;
}
.home-founder__media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--surface);
}
.home-founder__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
}
.home-founder__content .tag { margin-bottom: 14px; }
.home-founder__text {
  font-size: 16px;
  color: var(--text-2);
  line-height: 1.7;
  margin-bottom: 14px;
}
.home-founder__specialties {
  font-size: 13px;
  color: var(--text-3);
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-bottom: 18px;
}
.home-founder__link {
  font-size: 14px;
  font-weight: 600;
  color: var(--green-light);
  transition: color var(--t);
}
.home-founder__link:hover { color: var(--text); }

/* ── ANIMATIONS ───────────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.fade-up.in-view { opacity: 1; transform: translateY(0); }
.fade-up:nth-child(2) { transition-delay: 0.07s; }
.fade-up:nth-child(3) { transition-delay: 0.14s; }
.fade-up:nth-child(4) { transition-delay: 0.21s; }

@media (prefers-reduced-motion: reduce) {
  .fade-up { transition: none; opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════
   RESPONSIVE — 4 TERRITÓRIOS EM 2×2 (≤ 1180px)
   Breakpoint próprio (mais largo que o tablet geral de 1024px): com
   quatro colunas os cards ficam apertados bem antes do resto do layout
   precisar empilhar — cai para 2×2 mais cedo, em vez de comprimir.
   ══════════════════════════════════════════════ */
@media (max-width: 1180px) {
  .territories-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; }
  .territory:nth-child(n+3) { padding-top: 26px; }
}

/* ══════════════════════════════════════════════
   RESPONSIVE — TABLET (≤ 1024px)
   ══════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .hero { align-items: flex-end; padding-bottom: 64px; }
  .hero__content       { max-width: 100%; text-align: center; margin: 0 auto; }
  .hero__content .hero__actions { justify-content: center; }
  .hero__photo          { object-position: 62% 35%; }
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(10, 11, 10, 0.10) 0%, rgba(10, 11, 10, 0.30) 45%, rgba(10, 11, 10, 0.88) 80%, rgba(10, 11, 10, 0.95) 100%);
  }
  /* No empilhado (tablet/mobile), a copy fica ancorada embaixo da foto,
     sobre a zona mais escura do scrim — o traço geométrico (ligado ao
     canto do layout desktop) some aqui. */
  .hero__mark           { display: none; }
  .about-lucas__wrap   { grid-template-columns: 1fr; gap: 40px; }
  .about-lucas__media  { max-width: 420px; margin: 0 auto; aspect-ratio: 3 / 4; }
  .about-lucas__media img { object-position: 50% 15%; }
  .fit-split__wrap, .method-intro__wrap { grid-template-columns: 1fr; gap: 32px; }
  .fit-split__media    { max-width: 560px; margin: 0 auto; aspect-ratio: 16 / 10; }
  .method-intro__media { max-width: 560px; margin: 0 auto; aspect-ratio: 16 / 10; }
  .origin-grid--3      { grid-template-columns: repeat(3, 1fr); }
  .real-app-card       { grid-template-columns: 1fr; gap: 36px; padding: 32px; }
  .real-app-card::after { left: 32px; right: 32px; }
  .real-app-card__visual { max-width: 560px; margin: 0 auto; width: 100%; }

  .cases-grid          { grid-template-columns: 1fr; max-width: 560px; }
  .proj-scroll__stage-inner { gap: 56px; }
  .case-hero           { grid-template-columns: 1fr; gap: 28px; }
  .case-hero__visual   { max-width: 560px; margin: 0 auto; width: 100%; }
  .case-story__panels  { gap: 20px; margin-bottom: 40px; }

  /* The language switcher widens the nav enough that the tagline can wrap
     and collide with the nav links in this range, so it steps aside here
     (it already hides below 680px via the mobile rule). */
  .brand__tagline { display: none; }

  /* 5 nav items (Soluções/Cases/Como trabalhamos/Sobre) + lang-switch + CTA
     is wider than the 4 items this used to be — tighten a bit more so it
     doesn't get as close to the edge as before. */
  .nav            { gap: 0; }
  .nav__link      { padding: 7px 11px; }
  .lang-switch    { margin: 0 4px; }

  /* 3 colunas ficam apertadas neste intervalo — empilha em 1 até o mobile,
     cada grupo lido de cima a baixo como uma unidade só. Divisor vira
     régua horizontal entre grupos (não mais vertical), superfície
     sólida e padding do card acompanham a coluna única. */
  .commitment-groups { grid-template-columns: 1fr; gap: 0; max-width: 560px; padding: 32px 28px 28px; }
  .commitment-group:not(:first-child) {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--paper-line-2);
    padding-top: 28px;
    margin-top: 28px;
  }

  /* Ecossistema Sartec (7 cartões) — 2 por linha no tablet, última linha
     (ímpar) centralizada pelo justify-content do .eco-flow. */
  .eco-flow__node { flex: 0 1 calc(50% - 10px); max-width: 320px; }
}

/* ══════════════════════════════════════════════
   RESPONSIVE — MOBILE (≤ 680px)
   ══════════════════════════════════════════════ */
@media (max-width: 680px) {
  .container { padding: 0 20px; }
  .section   { padding: 56px 0; }
  .section__head { margin-bottom: 32px; }
  .section__head p { line-height: 1.62; }
  #como-pensamos { padding: 64px 0; }

  /* Secondary text contrast — slightly brighter than the desktop dim
     tone so long descriptions read comfortably on a mobile screen,
     without going fully white. Scoped to DARK content sections only
     (not hero/header/footer) — #a8b8e3 é claro demais para territórios
     LIGHT (teria ~1.5:1 de contraste sobre --paper). Consolidação
     DARK/LIGHT: a lista original incluía .origin-section/.pricing/
     .fit-split/.faq/.real-app-section/.method-intro, todos território
     claro (chapter-paper ou, agora, chapter-grid[data-surface="light"])
     — --text-3 já vem correto do override de token de cada um, não
     precisa (e não pode) do boost pensado para fundo escuro. .pilot é
     dark em #como-funciona mas light em #como-pensamos (chapter-grid
     [data-surface="light"]) e em #disciplinas (chapter-paper) — os dois
     :not() abaixo excluem as duas formas de ser light. */
  .ecosystem, .about-lucas, .cta-final,
  .pilot:not([data-surface="light"]):not(.chapter-paper) {
    --text-3: #a8b8e3;
  }

  /* Header */
  .header__wrap {
    height: 76px;
  }
  .brand__logo    { height: 32px; }
  .brand__tagline { display: none; }
  .nav {
    display: none;
    position: fixed;
    top: 76px; left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    padding: 20px; gap: 4px;
    background: rgba(10, 21, 17, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-light);
  }
  .nav.is-open { display: flex; }
  .nav__link   { padding: 12px 16px; font-size: 15px; border-radius: var(--r-sm); color: var(--text-2); }
  .nav__link:hover { color: var(--text); background: rgba(243, 245, 244, 0.06); }
  .nav__cta    { margin-left: 0; margin-top: 4px; text-align: center; padding: 13px; }
  .burger      { display: flex; }

  /* Language switcher inside the mobile dropdown menu */
  .lang-switch {
    align-self: center;
    margin: 8px 0 4px;
  }

  .hero {
    min-height: 100svh;
    padding: 108px 0 48px;
  }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__photo { object-position: center 22%; }

  /* Páginas internas — primeira seção precisa de menos espaço para o
     header fixo de 76px (vs. 140px usados no desktop). */
  .page-intro { padding-top: 100px; }

  .transition-line { padding: 0 20px 36px; font-size: 16px; }

  .home-founder__wrap { grid-template-columns: 1fr; gap: 24px; text-align: center; }
  .home-founder__media { max-width: 220px; margin: 0 auto; }

  .mid-page-cta { display: flex; flex-direction: column; gap: 6px; }
  .mid-page-cta a { margin-left: 0; }

  /* Origin — pilha única; divisor vira régua horizontal entre itens.
     Padding horizontal sobe de 4px pra 20px: a faixa agora tem borda/
     radius próprios (é um card visível), não só o grid ambiente atrás. */
  .origin-grid,
  .origin-grid--3 { grid-template-columns: 1fr; }
  .origin-card {
    padding: 20px 20px;
    border-left: none;
    border-top: 1px solid var(--border);
  }
  .origin-card:first-child { border-top: none; }

  /* Aplicação real / Projetos */
  .real-app-card { gap: 28px; padding: 24px 20px; }
  .real-app-card::after { left: 20px; right: 20px; }
  .browser-sim-grid { grid-template-columns: repeat(3, 1fr); }

  .phone-preview {
    width: var(--project-phone-w-mobile);
    padding: 8px;
    border-radius: 34px;
  }

  .phone-preview::before {
    inset: 7px;
    border-radius: 27px;
  }

  .phone-preview__video {
    border-radius: 27px;
  }

  /* Territórios — pilha única (fallback sem JS/reduced-motion; o
     scrollytelling mobile ativo usa .is-enhanced, ver acima, já sem
     estas linhas). */
  .territories-grid { grid-template-columns: 1fr; max-width: 480px; }
  .territory {
    padding: 26px 4px 28px;
  }

  /* Projetos (showcase assimétrico + grade equilibrada de cases.html) */
  .showcase-primary   { padding: 20px; }
  .showcase-secondary { padding: 22px 20px; }
  .showcase-secondary .phone-preview { width: 168px; }
  .showcase__actions { flex-direction: column; align-items: stretch; }
  .proj-scroll__actions { flex-direction: column; align-items: stretch; }
  .proj-scroll__stage-inner { gap: 44px; }
  .proj-scroll__desc { max-width: none; }
  .case-hero { margin-bottom: 48px; gap: 24px; }
  .case-hero__logo { height: 30px; }
  .case-hero__desc { max-width: none; }
  .case-story__panels { margin-bottom: 32px; }
  .case-story__chapter { padding: 24px 22px 22px; }

  .phone-preview__island {
    top: 15px;
    width: 64px;
    height: 19px;
  }

  /* Ecossistema */
  .eco-grid { grid-template-columns: 1fr; gap: 16px; }
  .manifesto__mark { width: 72px; margin-top: 44px; }
  .eco-grid--solutions { flex-direction: column; align-items: stretch; }
  .eco-grid--solutions .eco-card { max-width: none; }
  .eco-card { padding: 22px; }
  .eco-card p { color: rgba(255, 255, 255, 0.80); }

  /* About Lucas */
  .about-lucas__wrap  { gap: 28px; }
  .about-lucas__media { max-width: 280px; aspect-ratio: 3 / 4; }
  .about-lucas__media img { object-position: 50% 15%; }
  .lucas-proof-grid  { grid-template-columns: 1fr; gap: 12px; }
  .lucas-facts       { gap: 12px 24px; }

  /* Para quem fazemos sentido (Home) / Abertura do método (Como trabalhamos) —
     pilha única no mobile, foto acima do conteúdo */
  .fit-split__wrap, .method-intro__wrap { gap: 24px; }
  .fit-split__media, .method-intro__media { aspect-ratio: 4 / 3; }
  .fit-split__content { padding: 28px 24px 26px; }

  /* Pricing — Tabs Navigation instead of carousel */
  .pricing__hint { display: none; }
  
  .pricing-tabs {
    display: flex;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    padding: 4px;
    margin: -10px auto 28px;
    max-width: 480px;
    width: 100%;
    gap: 3px;
    overflow: hidden; /* Evita rolagem horizontal, já que todas as abas cabem */
  }
  
  .pricing-tab {
    flex: 1 1 0;
    text-align: center;
    padding: 9px 2px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--text-3);
    border-radius: var(--r-pill);
    transition: all var(--t) var(--ease);
    white-space: nowrap;
    cursor: pointer;
    letter-spacing: -0.02em;
  }
  .pricing-tab:hover {
    color: var(--text);
  }
  .pricing-tab--active {
    background: var(--green);
    color: #08150F;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.28);
  }

  .pricing__grid {
    display: block;
    overflow-x: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
    margin-bottom: 0;
  }
  
  .pricing-card {
    display: none !important;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    scroll-snap-align: none;
    flex-shrink: 1;
    margin: 0 auto;
  }
  
  .pricing-card.is-active-tab {
    display: flex !important;
    flex-direction: column;
    gap: 18px;
    align-items: stretch;
    padding: 22px 20px;
    transform: none !important;
  }
  
  .pkg-details { align-self: auto; margin-top: auto; }
  .pkg-details__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* Progressive disclosure: show only the first 3 included items by
     default; the rest appear together with "Ver detalhes do pacote",
     reusing the existing is-details-open toggle (no extra JS needed). */
  .pricing-card__includes li:nth-child(n + 4) { display: none; }
  .pricing__grid.is-details-open .pricing-card__includes li:nth-child(n + 4) {
    display: flex;
  }

  /* Pilot */
  .pilot__steps { flex-direction: column; align-items: stretch; }
  .pilot-step    { padding: 20px 18px; max-width: none; }
  .pilot-step__arrow { transform: rotate(90deg); text-align: center; }

  /* Ecossistema real — vira coluna única */
  .eco-flow { flex-direction: column; align-items: stretch; }
  .eco-flow__node { max-width: none; }

  /* FAQ — a touch tighter so long answers read comfortably */
  .faq-q { padding: 18px 0; }
  .faq-a__inner { padding: 0 0 18px; line-height: 1.66; }

  /* CTA */
  .cta-final { padding: 80px 0; }
  .btn--lg   { padding: 16px 24px; font-size: 15px; }

  /* Footer */
  .footer {
    text-align: center;
  }
  .footer__wrap {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding-bottom: 28px;
  }
  .footer__left {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
  }
  .footer__tagline {
    max-width: 300px;
    margin: 0 auto;
    text-align: center;
  }
  .footer__brand-mark { height: 68px; }
  .footer__contact {
    max-width: 100%;
    width: 100%;
    align-items: center;
    border-top: 1px solid var(--border);
    padding-top: 14px;
  }
  /* Base desktop virou coluna vertical (ver regra sem media query) — aqui
     volta a ser a fileira de pills centralizada que o mobile já tinha. */
  .footer__nav {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 4px;
  }
  .footer__nav a { padding: 6px 12px; margin-left: 0; border-radius: var(--r-pill); }
  .footer__disclaimer {
    margin: 0 auto 6px;
    text-align: center;
  }

  /* WA float */
  .wa-float { bottom: 20px; right: 20px; width: 50px; height: 50px; }
  .wa-float svg { width: 24px; height: 24px; }

  /* Ambient Grid Glow for Mobile */
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background-image:
      linear-gradient(rgba(243, 245, 244, 0.14) 1.2px, transparent 1.2px),
      linear-gradient(90deg, rgba(243, 245, 244, 0.14) 1.2px, transparent 1.2px);
    background-size: 72px 72px;
    mask-image: radial-gradient(circle 100px, black 30%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle 100px, black 30%, transparent 100%);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: 200px 200px;
    -webkit-mask-size: 200px 200px;
    mask-position: 5% -220px;
    -webkit-mask-position: 5% -220px;
    animation: mobile-ambient-glow-left 14s ease-in-out infinite;
  }

  main::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background-image:
      linear-gradient(rgba(243, 245, 244, 0.14) 1.2px, transparent 1.2px),
      linear-gradient(90deg, rgba(243, 245, 244, 0.14) 1.2px, transparent 1.2px);
    background-size: 72px 72px;
    mask-image: radial-gradient(circle 100px, black 30%, transparent 100%);
    -webkit-mask-image: radial-gradient(circle 100px, black 30%, transparent 100%);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: 200px 200px;
    -webkit-mask-size: 200px 200px;
    mask-position: 95% 120%;
    -webkit-mask-position: 95% 120%;
    animation: mobile-ambient-glow-right 18s ease-in-out infinite;
    animation-delay: 4s;
  }

  @keyframes mobile-ambient-glow-left {
    0% {
      mask-position: 5% -220px;
      -webkit-mask-position: 5% -220px;
    }
    50% {
      mask-position: 12% 120%;
      -webkit-mask-position: 12% 120%;
    }
    100% {
      mask-position: 5% -220px;
      -webkit-mask-position: 5% -220px;
    }
  }

  @keyframes mobile-ambient-glow-right {
    0% {
      mask-position: 95% 120%;
      -webkit-mask-position: 95% 120%;
    }
    50% {
      mask-position: 88% -220px;
      -webkit-mask-position: 88% -220px;
    }
    100% {
      mask-position: 95% 120%;
      -webkit-mask-position: 95% 120%;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    body::after,
    main::before {
      display: none !important;
      animation: none !important;
    }
  }
}