/* ============================================================
   STUDIO CONNECTA · WEBSITE 2 · SC26
   Pele do site institucional sobre o Design System 2 (ds2.css).
   White-first editorial: papel, lettering gigante, verde único
   acento, hairlines, fotografia P&B, dobras dark de contraste.
   Tudo consome tokens do ds2.css. Nenhum hex solto.
   ============================================================ */

/* ===================== BASE DA PÁGINA ===================== */
body { background: var(--sc-paper); }
/* botão verde sobre dobra escura: o hover padrão do DS (fundo tinta)
   some no dark; aqui ele inverte para branco, como o ghost já faz */
.dark .btn--verde:hover { background: var(--sc-white); border-color: var(--sc-white); color: var(--sc-ink-900); }
main { display: block; }
.section-pad { padding: clamp(5rem, 12vh, 9rem) 0; }
.section-pad-sm { padding: clamp(3.4rem, 8vh, 6rem) 0; }

/* cabeçalho de dobra (padrão editorial das seções) */
.sec-head { max-width: 62rem; margin-bottom: clamp(2.4rem, 6vh, 4.2rem); }
.sec-head .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 1.1rem; color: var(--accent-ink); }
.sec-head .eyebrow::before { content: ""; width: 2.2rem; height: 1px; background: var(--accent-ink); }
.dark .sec-head .eyebrow { color: var(--sc-verde); }
.dark .sec-head .eyebrow::before { background: var(--sc-verde); }
/* headlines de dobra: mesma tipografia da 1ª dobra de texto (.ie-titulo) */
.sec-title { margin: 0; font-weight: 600; line-height: 1.02; letter-spacing: -0.04em; }
/* rótulo numerado padrão ("Nome / NN") em todas as dobras e no rodapé */
.sec-head .ie-kicker, .foot-cta .ie-kicker { margin: 0 0 1.1rem; }
/* heros das páginas internas herdam o padrão de headline do index
   (body na frente para vencer as regras locais de cada página) */
body h1.sec-title { font-size: var(--fs-h2); font-weight: 600; line-height: 1.02; letter-spacing: -0.04em; }
/* idem para o rótulo: 10px mono em qualquer contexto de página */
body p.ie-kicker { font-family: var(--font-mono); font-size: 10px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg4); line-height: 1.7; }
/* foto do serviço no card-resumo das páginas de contratação */
.ct-summary-foto { margin: 0 0 1.1rem; border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 16 / 9; }
.ct-summary-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dark .ie-kicker { color: var(--sc-fog-300); }
.foot-cta h2 { font-size: var(--fs-h2); font-weight: 600; letter-spacing: -0.04em; line-height: 1.02; }
.sec-head .sc-lead { margin: 1.4rem 0 0; max-width: 46rem; }

/* ===================== HEADER ===================== */
.site-header { z-index: var(--z-nav); }
.nav a.is-active { color: var(--sc-ink-900); font-weight: 600; }
.header-right { display: flex; align-items: center; gap: 8px; }
.header-wa {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(10, 10, 11, 0.08);
  border-radius: 50%;
  color: color-mix(in srgb, var(--sc-ink-900) 65%, transparent);
  transition: transform 150ms var(--ease-soft), color 150ms var(--ease-soft), background-color 150ms var(--ease-soft), border-color 150ms var(--ease-soft);
}
.header-wa:hover { background: var(--sc-ink-900); border-color: var(--sc-ink-900); color: var(--sc-white); transform: translateY(-2px); }
.header-wa .ico-wa { width: 17px; height: 17px; }
.header-cta-link { text-decoration: none; }

/* ===================== HERO CINEMATOGRÁFICO (padrão aster-hale) =====================
   Seção alta com pin sticky: campo de fundo em grayscale, câmera 3D
   com cards de serviço flutuando e card principal da marca. O estado
   inicial vive no CSS (sem JS a cena fica estática e legível). */
.hero-cine { position: relative; height: 260vh; background: var(--sc-ink-900); color: var(--sc-white); }
.hero-cine-pin { position: sticky; top: 0; height: 100vh; min-height: 38rem; overflow: hidden; }
/* sem motor de animação não há coreografia: dispensa a pista de rolagem */
html:not(.js-anim) .hero-cine { height: auto; }
html:not(.js-anim) .hero-cine-pin { position: relative; height: 100svh; }

.hero-cine-field { position: absolute; inset: -8%; will-change: transform; }
.hero-cine-field img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; opacity: 0.22; filter: grayscale(1); }
.hero-cine-field::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); }
.hero-cine-field::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.28) 52%, rgba(10, 10, 11, 0.94) 100%); }

.hero-cine-cruzes {
  position: absolute;
  top: 6.4rem;
  left: var(--pad);
  right: var(--pad);
  display: flex;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.25);
  font-size: 1.25rem;
  font-weight: 300;
  z-index: 1;
}
.hero-cine-cruzes .so-desktop, .hero-cine-cruzes .so-wide { display: none; }
@media (min-width: 641px) { .hero-cine-cruzes .so-desktop { display: inline; } }
@media (min-width: 1240px) { .hero-cine-cruzes .so-wide { display: inline; } }

.hero-cine-selo {
  position: absolute;
  left: var(--pad);
  bottom: 5.6rem;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  max-width: 70vw;
}
.hero-cine-selo .linha { flex: none; width: 3rem; height: 1px; background: rgba(255, 255, 255, 0.3); }

/* câmera 3D e cards */
.hero-cine-camera { position: absolute; inset: 0; perspective: 1200px; transform-style: preserve-3d; will-change: transform; }
.hero-card {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--r-lg);
  background: var(--sc-ink-800);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  will-change: transform;
}
.hero-card--esq { left: 5%; top: 28%; width: 19rem; display: none; transform: translate3d(-40px, 0, -180px) rotate(-8deg) scale(0.94); }
.hero-card--dir { right: 3%; top: 19%; width: 17rem; display: none; transform: translate3d(40px, 0, -260px) rotate(9deg) scale(0.92); }
.hero-card--ter { left: 24%; bottom: 11%; width: 14rem; display: none; transform: translate3d(0, 20px, -340px) rotate(5deg); }
@media (min-width: 1021px) { .hero-card--esq, .hero-card--dir { display: block; } }
@media (min-width: 1240px) { .hero-card--ter { display: block; } }
.hc-media { aspect-ratio: 4 / 5; overflow: hidden; }
.hc-media--34 { aspect-ratio: 3 / 4; }
.hc-media--quad { aspect-ratio: 1 / 1; }
.hc-media img { width: 100%; height: 100%; object-fit: cover; }
.hc-rotulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

/* card principal: slot centraliza (e guarda o Z); o card anima por dentro */
.hero-card-main-slot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(82vw, 29rem);
  transform: translate(-50%, -50%) translateZ(80px);
  transform-style: preserve-3d;
  z-index: 2;
}
@media (min-width: 901px) { .hero-card-main-slot { left: 56%; } }
.hero-card--main {
  position: relative;
  display: block;
  padding: 8px;
  border-radius: 24px;
  background: #080809;
  text-decoration: none;
  color: inherit;
  transform: translateX(70px) rotate(4deg) scale(0.82);
}
.hc-quadro { position: relative; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; }
.hc-quadro img { width: 100%; height: 100%; object-fit: cover; object-position: center 24%; }
.hc-grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.38), transparent 38%, rgba(0, 0, 0, 0.12)); }
.hc-chip {
  position: absolute;
  left: 14px;
  top: 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--r-pill);
  padding: 7px 12px;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}
.hc-titulo { position: absolute; left: 18px; right: 18px; bottom: 16px; }
.hc-kicker {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.hc-nome {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.4rem, 5.4vw, 3.6rem);
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--sc-white);
}
.hc-pe {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 10px 8px;
  color: rgba(255, 255, 255, 0.6);
}
/* mesma tipografia dos rótulos dos outros cards da dobra (mono uppercase) */
.hc-pe p { margin: 0; max-width: 18rem; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.6; }
.hc-pe iconify-icon { flex: none; font-size: 22px; color: rgba(255, 255, 255, 0.7); transition: color var(--d-fast) var(--ease-soft), transform var(--d-fast) var(--ease-snap); }
.hero-card--main:hover .hc-pe iconify-icon { color: var(--sc-verde); transform: translate(2px, -2px); }

/* bloco de apoio à esquerda (fade in/out pela coreografia) */
.hero-cine-intro { position: absolute; left: var(--pad); top: 7.5rem; z-index: 3; max-width: 17rem; opacity: 0; pointer-events: none; }
/* desktop: encaixado embaixo, acima do selo (+10 anos), sem sobrepor o card 01 */
@media (min-width: 1021px) { .hero-cine-intro { top: auto; bottom: 9.5rem; } }
html:not(.js-anim) .hero-cine-intro { opacity: 1; }
.hci-kicker { margin: 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); }
.hci-texto { margin: 14px 0 0; font-size: var(--fs-small); line-height: 1.6; color: rgba(255, 255, 255, 0.68); }

.hero-cine-cue {
  position: absolute;
  left: 50%;
  bottom: 1.8rem;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-caption);
  color: rgba(255, 255, 255, 0.65);
}
.hero-cine-cue .anel { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; }
.hero-cine-coord {
  position: absolute;
  right: var(--pad);
  bottom: 1.6rem;
  display: none;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.35);
}
.hero-cine-coord span { display: block; }
@media (min-width: 641px) { .hero-cine-coord { display: block; } }
@media (max-width: 900px) { .hero-cine { height: 200vh; } }

/* ===================== INTRODUÇÃO EDITORIAL (dobra 2, padrão aster-hale) ===================== */
.ie-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 1021px) { .ie-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 9fr); column-gap: clamp(2rem, 6vw, 6rem); } }
.ie-kicker { margin: 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg4); }
.ie-titulo {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: var(--fg1);
}
/* esquema de cor padrão das headlines: 1ª parte em tinta, fecho apagado
   (o .head-mute é reutilizado pelas demais dobras) */
.ie-titulo .ie-mute, .sec-title .head-mute { color: color-mix(in srgb, var(--fg1) 35%, transparent); }
.ie-baixo {
  display: grid;
  gap: 1.6rem;
  margin-top: clamp(2.6rem, 6vh, 4.5rem);
  padding-top: 1.8rem;
  border-top: 1px solid var(--line);
}
@media (min-width: 641px) { .ie-baixo { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } }
.ie-texto { margin: 0; max-width: 34rem; font-size: var(--fs-body); line-height: 1.65; color: var(--fg3); }
.ie-rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(3rem, 7vh, 5rem);
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg4);
}
/* respiro reduzido entre a introdução e a malha de números */
.intro-editorial.section-pad { padding-bottom: clamp(2rem, 4.5vh, 3rem); }
.stats-editorial.section-pad { padding-top: clamp(2rem, 4.5vh, 3rem); }

/* ===================== TICKER · FÓRMULA DO MÉTODO ===================== */
.ticker--formula .ticker-track span::after { content: ""; }
.ticker--formula .op { font-weight: 400; opacity: 0.55; margin: 0 6px; }

/* ===================== NÚMEROS (big numbers) ===================== */
.numeros-band { border-top: 1px solid var(--line); }
.numeros-band .big-number { padding-block: clamp(2rem, 5vh, 3.4rem); }
@media (max-width: 640px) {
  .big-numbers { grid-template-columns: 1fr 1fr; }
  .big-number:nth-child(2n) { border-right: 0; }
}

/* ===================== LOGOS (prova social) ===================== */
.logos-strip { padding: clamp(2.6rem, 6vh, 4rem) 0 clamp(3rem, 7vh, 4.6rem); border-bottom: 1px solid var(--line); overflow: hidden; }
.logos-strip .eyebrow { display: block; text-align: center; margin-bottom: 2.2rem; }
.logo-marquee { position: relative; display: flex; overflow: hidden; gap: clamp(40px, 5vw, 84px);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logo-track {
  display: flex;
  align-items: center;
  gap: clamp(40px, 5vw, 84px);
  flex: none;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: logos-run 46s linear infinite;
  will-change: transform;
}
.logo-marquee:hover .logo-track { animation-play-state: paused; }
.logo-track li { flex: none; }
.logo-track img {
  height: clamp(26px, 3vw, 40px);
  width: auto;
  filter: grayscale(1) contrast(1.05) opacity(0.55);
  transition: filter var(--d-fast) var(--ease-soft);
}
.logo-track li:hover img { filter: grayscale(0) opacity(1); }
@keyframes logos-run { to { transform: translateX(calc(-100% - clamp(40px, 5vw, 84px))); } }
@media (prefers-reduced-motion: reduce) {
  .logo-track { animation: none; flex-wrap: wrap; justify-content: center; }
  .logo-track[aria-hidden="true"] { display: none; }
  .logo-marquee { mask-image: none; -webkit-mask-image: none; flex-wrap: wrap; }
}

/* ===================== RESULTADOS · malha editorial (padrão north-form) =====================
   Tabuleiro de hairlines: grid com fresta de 1px sobre a cor da linha,
   células alternando tons de papel, número gigante e legenda mono.
   Hover acende a célula no verde da marca. */
.stats-malha {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (min-width: 641px) { .stats-malha { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat-cel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  min-height: clamp(220px, 34vh, 400px);
  padding: clamp(26px, 3.4vw, 44px);
  background: var(--surface);
  transition: background 400ms var(--ease-soft);
}
.stat-cel:nth-child(2), .stat-cel:nth-child(3) { background: var(--sc-paper-2); }
.stat-cel strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(3.6rem, 9.5vw, 10rem);
  letter-spacing: -0.06em;
  line-height: 0.85;
  color: var(--fg1);
  transition: color 400ms var(--ease-soft);
}
.stat-cel p {
  margin: 0;
  max-width: 280px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1.7;
  color: var(--fg3);
  transition: color 400ms var(--ease-soft);
}
.stat-cel:hover { background: var(--sc-verde); }
.stat-cel:hover strong, .stat-cel:hover p { color: var(--accent-fg); }
/* a célula que abriga o carrossel-dock não acende em verde: o hover ali
   pertence às logos (que revelam a cor original) */
.stat-cel--logos:hover { background: var(--surface); }
.stat-cel--logos:hover strong { color: var(--fg1); }
.stat-cel--logos:hover p { color: var(--fg3); }
/* dock VERTICAL dentro da célula: coluna à direita rolando para cima;
   a ampliação acontece no eixo Y (site2.js) e cresce para os lados */
.stat-cel--logos { position: relative; }
.stat-cel--logos .logo-dock-frame {
  position: absolute;
  top: 12px;
  bottom: 12px;
  right: clamp(12px, 3%, 36px);
  width: clamp(180px, 26vw, 400px);
  border: 0;
  border-radius: 0;
  background: transparent;
}
.stat-cel--logos .logo-dock {
  flex-direction: column;
  height: 100%;
  padding: 0;
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}
.stat-cel--logos .logo-dock-track {
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 2vh, 26px);
  padding: clamp(8px, 1vh, 13px) 0;
  animation-name: dock-run-v;
}
.stat-cel--logos .dock-item { justify-content: center; transform-origin: center center; width: 100%; }
/* logos 3x maiores; largura relativa ao quadro para a ampliação (1.55x)
   nunca estourar as bordas: 62% x 1.55 = 96% do quadro */
.stat-cel--logos .dock-item img { height: auto; max-height: 90px; max-width: 62%; }
@keyframes dock-run-v { to { transform: translateY(calc(-100% - clamp(16px, 2vh, 26px))); } }

/* ===================== PROVA SOCIAL · carrossel-dock de logos =====================
   Frame com a faixa de logos em loop contínuo; no hover a faixa pausa
   e cada logo amplia conforme a distância do cursor (efeito dock do
   macOS, via site2.js), revelando a cor original da marca. */
.logo-wall .eyebrow { display: block; margin-bottom: 1.4rem; }
.logo-dock-frame {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}
.logo-dock {
  display: flex;
  overflow: hidden;
  padding: 3.4rem 0 1.7rem; /* teto alto: a logo ampliada cresce para cima */
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.logo-dock-track {
  display: flex;
  align-items: flex-end;
  gap: clamp(30px, 3.6vw, 56px);
  flex: none;
  margin: 0;
  padding: 0 clamp(15px, 1.8vw, 28px);
  list-style: none;
  animation: dock-run 46s linear infinite;
  will-change: transform;
}
.logo-dock:hover .logo-dock-track { animation-play-state: paused; }
.dock-item {
  flex: none;
  display: flex;
  align-items: flex-end;
  transform-origin: bottom center;
  will-change: transform, filter;
  filter: grayscale(1) contrast(1.05) opacity(0.55);
  transition: transform 320ms var(--ease-snap), filter 320ms var(--ease-soft);
}
/* enquanto o cursor comanda o dock, quem anima é o JS (sem transição) */
.logo-dock.dock-vivo .dock-item { transition: none; }
.dock-item img { display: block; height: clamp(30px, 3vw, 42px); width: auto; }
@keyframes dock-run { to { transform: translateX(calc(-100% - clamp(30px, 3.6vw, 56px))); } }
@media (prefers-reduced-motion: reduce) {
  .logo-dock-track { animation: none; }
  .logo-dock { overflow-x: auto; }
  .stat-cel, .stat-cel strong, .stat-cel p { transition: none; }
}

/* ===================== MÉTODO ===================== */
/* manifesto na mesma tipografia do texto da 1ª dobra (.ie-texto) */
.metodo-manifesto { max-width: 52rem; margin: 1.6rem 0 0; font-size: var(--fs-body); font-weight: 400; line-height: 1.65; color: var(--fg3); }
.metodo-manifesto .metodo-hl {
  background: linear-gradient(transparent 62%, color-mix(in srgb, var(--sc-verde) 55%, transparent) 62%);
  font-weight: 500;
  color: var(--fg1);
}
.metodo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
  margin-top: clamp(2.6rem, 6vh, 4rem);
}
.metodo-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: clamp(1.6rem, 2.6vw, 2.4rem);
  min-height: 320px;
  border-right: 1px solid var(--line);
  background: var(--surface);
  text-align: left;
  border-top: 0; border-bottom: 0; border-left: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: background var(--d-base) var(--ease-glide), color var(--d-base) var(--ease-glide);
}
.metodo-step:last-child { border-right: 0; }
.metodo-step .step-num {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.14em;
  color: var(--fg4);
  transition: color var(--d-base);
}
.metodo-step .step-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 2vw, 2rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--fg1);
  transition: color var(--d-base);
}
.metodo-step .step-lede { font-size: var(--fs-small); font-weight: 500; color: var(--fg2); transition: color var(--d-base); }
.metodo-step .step-desc { font-size: var(--fs-small); color: var(--fg3); flex: 1; transition: color var(--d-base); }
.metodo-step .step-bar { display: block; height: 3px; background: var(--sc-paper-2); border-radius: var(--r-pill); overflow: hidden; }
.metodo-step .step-bar i { display: block; height: 100%; width: 0; background: var(--sc-verde); border-radius: var(--r-pill); transition: width var(--d-slow) var(--ease-glide); }
.metodo-step .step-ghost {
  position: absolute;
  right: 0.4rem;
  bottom: 0.2rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(4.6rem, 7vw, 7.5rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--line);
  pointer-events: none;
  transition: -webkit-text-stroke-color var(--d-base);
}
.metodo-step.is-active { background: var(--sc-ink-900); }
.metodo-step.is-active .step-num { color: var(--sc-verde); }
.metodo-step.is-active .step-name { color: var(--sc-white); }
.metodo-step.is-active .step-lede { color: var(--sc-fog-200); }
.metodo-step.is-active .step-desc { color: var(--sc-fog-300); }
.metodo-step.is-active .step-bar { background: var(--sc-ink-700); }
.metodo-step.is-active .step-bar i { width: var(--bar, 100%); }
.metodo-step.is-active .step-ghost { -webkit-text-stroke-color: rgba(147, 213, 0, 0.28); }
@media (max-width: 1020px) {
  .metodo-grid { grid-template-columns: 1fr 1fr; }
  .metodo-step { border-bottom: 1px solid var(--line); min-height: 260px; }
  .metodo-step:nth-child(2n) { border-right: 0; }
  .metodo-step:nth-child(n+3) { border-bottom: 0; }
}
@media (max-width: 560px) {
  /* uma coluna: as linhas do grid teriam altura livre e cada card ficaria
     do tamanho do proprio texto. O 1fr iguala todas pela mais alta. */
  .metodo-grid { grid-template-columns: 1fr; grid-auto-rows: 1fr; }
  .metodo-step { border-right: 0; border-bottom: 1px solid var(--line); min-height: 0; }
  .metodo-step:nth-child(n+3) { border-bottom: 1px solid var(--line); }
  .metodo-step:last-child { border-bottom: 0; }
}
.metodo-ticker-wrap { margin-top: clamp(3rem, 7vh, 5rem); }

/* ===================== SERVIÇOS ===================== */
.servicos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.svc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: clamp(1.5rem, 2.2vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
  transition: transform var(--d-fast) var(--ease-snap), box-shadow var(--d-fast) var(--ease-soft), border-color var(--d-fast);
}
.svc-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); border-color: var(--line-strong); }
.svc-card .svc-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.svc-card .svc-icone {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--fg1);
  transition: all var(--d-fast) var(--ease-soft);
  flex: none;
}
.svc-card .svc-icone iconify-icon { font-size: 21px; }
.svc-card:hover .svc-icone { background: var(--sc-verde); border-color: var(--sc-verde); color: var(--accent-fg); }
.svc-card .svc-eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg4);
  text-align: right;
}
.svc-card h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  color: var(--fg1);
}
.svc-card .svc-desc { margin: 0; font-size: var(--fs-small); color: var(--fg3); flex: 1; }
.svc-card .svc-preco { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.svc-card .svc-preco .de { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg4); }
.svc-card .svc-preco strong { font-family: var(--font-display); font-weight: 600; font-size: 1.9rem; letter-spacing: -0.04em; color: var(--fg1); }
.svc-card .svc-preco .por { font-family: var(--font-mono); font-size: 10px; color: var(--fg4); }
.svc-feats { border-top: 1px solid var(--line); padding-top: 0.4rem; }
.svc-feats summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  padding: 0.5rem 0;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg3);
  transition: color var(--d-fast);
}
.svc-feats summary::-webkit-details-marker { display: none; }
.svc-feats summary::after { content: "+"; font-size: 14px; color: var(--accent-ink); transition: transform var(--d-fast) var(--ease-snap); }
.svc-feats[open] summary::after { transform: rotate(45deg); }
.svc-feats summary:hover { color: var(--fg1); }
.svc-feats ul { list-style: none; margin: 0.2rem 0 0.6rem; padding: 0; display: grid; gap: 7px; }
.svc-feats li { display: flex; gap: 9px; align-items: flex-start; font-size: var(--fs-caption); color: var(--fg2); }
.svc-feats li::before {
  content: "";
  flex: none;
  width: 13px;
  height: 13px;
  margin-top: 3px;
  background: var(--accent-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.svc-feats .svc-feats-label { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg4); margin: 0.7rem 0 0.4rem; }
.svc-card .btn { align-self: flex-start; }

/* destaque: card dark (contraponto DS2) */
.svc-card--featured { background: var(--sc-ink-900); border-color: var(--sc-ink-900); }
.svc-card--featured h3 { color: var(--sc-white); }
.svc-card--featured .svc-desc { color: var(--sc-fog-300); }
.svc-card--featured .svc-eyebrow { color: var(--sc-fog-400); }
.svc-card--featured .svc-icone { border-color: var(--sc-ink-600); color: var(--sc-verde); }
.svc-card--featured .svc-feats { border-top-color: var(--sc-ink-600); }
.svc-card--featured .svc-feats summary { color: var(--sc-fog-400); }
.svc-card--featured .svc-feats summary::after { color: var(--sc-verde); }
.svc-card--featured .svc-feats summary:hover { color: var(--sc-fog-200); }
.svc-card--featured .svc-feats li { color: var(--sc-fog-200); }
.svc-card--featured .svc-feats li::before { background: var(--sc-verde); }
.svc-card--featured .btn { --btn-bg: var(--sc-verde); --btn-fg: var(--accent-fg); --btn-bd: var(--sc-verde); }
.svc-card--featured .btn:hover { background: var(--sc-white); border-color: var(--sc-white); color: var(--sc-ink-900); }
.svc-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: var(--r-pill);
  padding: 5px 11px;
  background: var(--sc-verde);
  color: var(--accent-fg);
}
.svc-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-fg); animation: pulse-dot 2.2s ease-in-out infinite; }
.svc-card--featured .svc-topo { padding-right: 120px; }

/* ===================== SERVIÇOS · processo sticky (home) =====================
   Padrão aster-hale: aside fixo com índice numerado à esquerda e
   painéis grandes (foto + conteúdo alternando lados) à direita.
   O .svc-card acima permanece: /contratar-web/, /contratar-atendimento/
   e /onboarding/ ainda o consomem. */
.svc-proc {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
  gap: clamp(2.2rem, 4vw, 4.6rem);
  align-items: start;
}
.svc-aside { position: sticky; top: clamp(84px, 11vh, 120px); }
.svc-aside .sec-head { margin-bottom: clamp(1.6rem, 4vh, 2.6rem); }
/* no corpo do h2 (menor que o hero), o outline pede traço mais fino */
.svc-aside .sec-title .outline { -webkit-text-stroke-width: 1px; }
/* invertido a pedido: 1ª parte em traçado, fecho em verde sólido (verde de
   texto sobre claro = --sc-verde-deep, regra AA do DS2 via --accent-ink) */
.svc-aside .sec-title .txt-verde { color: var(--accent-ink); }

/* índice numerado (link ativo acompanha o painel em cena) */
.svc-index { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--line); padding-top: 1rem; }
/* O --fg4 e o token de "muted/captions" e rendia 3,19:1 sobre o papel,
   abaixo do minimo AA de 4,5:1 para os rotulos inativos do indice. O
   --fg3 sobe para cerca de 7:1 e a hierarquia se mantem larga, ja que o
   item ativo fica em 18,9:1. */
.svc-index-link {
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-height: 44px;
  padding: 0.5rem 0;
  text-decoration: none;
  color: var(--fg3);
  transition: color var(--d-fast) var(--ease-soft);
}
.svc-index-num { flex: none; width: 2em; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; }
.svc-index-nome {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.1rem, 1.35vw, 1.45rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  transition: transform var(--d-fast) var(--ease-snap);
}
.svc-index-link:hover { color: var(--fg2); }
.svc-index-link:hover .svc-index-nome { transform: translateX(4px); }
.svc-index-link.is-active { color: var(--fg1); }
.svc-index-link.is-active .svc-index-num { color: var(--accent-ink); }

/* painéis */
.svc-panels { display: grid; gap: clamp(1.1rem, 2.4vh, 1.6rem); }
.svc-panel {
  position: relative;
  border: 0; /* cards sem linha de contorno (pedido 19/08) */
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  scroll-margin-top: 110px;
}
/* entrada fiel à referência: sobe + revela ao cruzar a faixa central */
html.js-anim .svc-panel { opacity: 0; transform: translateY(42px); transition: opacity 700ms var(--ease-soft), transform 700ms var(--ease-glide); }
html.js-anim .svc-panel.is-inview { opacity: 1; transform: none; }
html.js-anim .svc-media img { transform: scale(1.06); transition: transform 1200ms var(--ease-glide); }
html.js-anim .svc-panel.is-inview .svc-media img { transform: scale(1); }

.svc-panel-grid { display: grid; }
.svc-media { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 3; }
.svc-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.svc-media-icone {
  position: absolute;
  left: 16px;
  top: 16px;
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line-light);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--sc-ink-900) 52%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--sc-white);
}
.svc-media-icone iconify-icon { font-size: 21px; }
.svc-media .svc-badge { top: 16px; right: 16px; }

.svc-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.9rem;
  padding: clamp(1.6rem, 4.5vw, 2.2rem);
}
.svc-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: clamp(0.4rem, 2.2vh, 1.4rem); }
.svc-meta-num { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--fg4); }
/* modelo de contratação é informação de decisão: 10px e --fg3 para dar AA */
.svc-panel .svc-eyebrow { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg3); text-align: right; }
.svc-panel h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.55rem, 2vw, 2.05rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--fg1);
}
.svc-panel .svc-desc { margin: 0; font-size: var(--fs-small); color: var(--fg3); max-width: 48ch; }
.svc-panel .svc-preco { margin: 0; display: flex; align-items: baseline; gap: 8px; }
.svc-panel .svc-preco .de { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg4); }
.svc-panel .svc-preco strong { font-family: var(--font-display); font-weight: 600; font-size: 1.9rem; letter-spacing: -0.04em; color: var(--fg1); }
.svc-panel .svc-preco .por { font-family: var(--font-mono); font-size: 10px; color: var(--fg4); }
.svc-panel .svc-feats { margin-top: 0.2rem; }
/* abertura suave dos "Principais recursos": o corpo tem a altura animada
   via JS (details não anima nativamente); o + volta a girar já no fechar */
.svc-feats-corpo { overflow: hidden; transition: height 380ms var(--ease-glide); }
.svc-feats.fechando summary::after { transform: rotate(0deg); }
@media (prefers-reduced-motion: reduce) { .svc-feats-corpo { transition: none; } }
.svc-panel .btn { align-self: flex-start; margin-top: 0.5rem; }

/* cor invertida do painel em cena: o scroll escurece o card ativo
   (classe is-escuro aplicada pelo observer do site2.js) e devolve o
   claro quando ele sai; a troca é animada nos fundos e textos */
.svc-panel { transition: background-color 600ms var(--ease-soft), border-color 600ms var(--ease-soft); }
html.js-anim .svc-panel { transition: opacity 700ms var(--ease-soft), transform 700ms var(--ease-glide), background-color 600ms var(--ease-soft), border-color 600ms var(--ease-soft); }
.svc-panel h3, .svc-panel .svc-desc, .svc-panel .svc-eyebrow, .svc-panel .svc-meta-num,
.svc-panel .svc-feats summary, .svc-panel .svc-feats li { transition: color 500ms var(--ease-soft); }
.svc-panel .svc-feats { transition: border-color 500ms var(--ease-soft); }
.svc-panel .svc-feats li::before { transition: background-color 500ms var(--ease-soft); }
.svc-panel.is-escuro { background: var(--sc-ink-900); border-color: var(--sc-ink-900); }
.svc-panel.is-escuro h3 { color: var(--sc-white); }
.svc-panel.is-escuro .svc-desc { color: var(--sc-fog-300); }
.svc-panel.is-escuro .svc-eyebrow { color: var(--sc-fog-300); }
.svc-panel.is-escuro .svc-meta-num { color: var(--sc-verde); }
.svc-panel.is-escuro .svc-feats { border-top-color: var(--sc-ink-600); }
.svc-panel.is-escuro .svc-feats summary { color: var(--sc-fog-400); }
.svc-panel.is-escuro .svc-feats summary::after { color: var(--sc-verde); }
.svc-panel.is-escuro .svc-feats summary:hover { color: var(--sc-fog-200); }
.svc-panel.is-escuro .svc-feats li { color: var(--sc-fog-200); }
.svc-panel.is-escuro .svc-feats li::before { background: var(--sc-verde); }
.svc-panel.is-escuro .btn { --btn-bg: var(--sc-verde); --btn-fg: var(--accent-fg); --btn-bd: var(--sc-verde); }
.svc-panel.is-escuro .btn:hover { background: var(--sc-white); border-color: var(--sc-white); color: var(--sc-ink-900); }

/* notebooks de tela baixa: aside compacto para o índice inteiro caber pinado
   (sem isso, os itens 07 e 08 ficam abaixo da dobra em 1366×768 / 1280×720) */
@media (min-width: 1021px) and (max-height: 850px) {
  .svc-aside { top: 72px; }
  .svc-aside .sec-head { margin-bottom: 1.1rem; }
  .svc-aside .sec-title { font-size: clamp(1.7rem, 2.4vw, 2.3rem); }
  .svc-index { padding-top: 0.7rem; gap: 0; }
  .svc-index-link { min-height: 38px; padding: 0.3rem 0; }
  .svc-index-nome { font-size: 1.1rem; }
}

/* desktop: foto e conteúdo lado a lado, alternando */
@media (min-width: 901px) {
  .svc-panel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 29rem; }
  .svc-media { aspect-ratio: auto; min-height: 100%; }
  .svc-panel:nth-child(even) .svc-media { order: 2; }
  .svc-body { padding: clamp(1.8rem, 2.6vw, 3rem); }
}

/* tablet/mobile: aside vira fluxo normal e o índice, régua horizontal fixa.
   display: contents nos wrappers para o sticky do índice ter como limite o
   container da seção inteira (senão ele pararia no fim do próprio aside). */
@media (max-width: 1020px) {
  .svc-proc, .svc-aside { display: contents; }
  .svc-aside .sec-head { margin-bottom: 1.4rem; }
  .svc-panel { scroll-margin-top: 150px; }
  .svc-index {
    position: sticky;
    top: 84px;
    z-index: 5;
    flex-direction: row;
    gap: 1.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 calc(-1 * var(--pad)) 1.6rem;
    padding: 0.7rem var(--pad);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--sc-paper-2) 86%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  .svc-index::-webkit-scrollbar { display: none; }
  /* Na lista vertical do desktop o baseline e proposital: o numero mono
     assenta na base do titulo. Na barra horizontal ele desalinha, porque a
     sobra da altura minima de 44px (alvo de toque) cai toda abaixo do texto,
     deixando 8px em cima e 17,5px embaixo. O center divide a sobra. */
  .svc-index-link { flex: none; align-items: center; }
  .svc-index-nome { white-space: nowrap; font-size: 1.05rem; }
}

/* ===================== INTERLÚDIO · CTA (padrão de dobra do DS2) =====================
   Reusa .interlude/.interlude-mask/.interlude-ghost do ds2.css; aqui
   entram só o véu de contraste, o conteúdo sobre a foto e o mobile.
   O foco da foto (traço verde) fica à direita; o texto ocupa a área
   escura à esquerda. */
.cta-inter .interlude-mask img { object-position: 72% 50%; }
/* foto desta dobra fica na cor original (sem o P&B do .img-editorial) */
.cta-inter .interlude-mask img.img-editorial,
.cta-inter .interlude-mask img.img-editorial:hover { filter: none; }
.cta-inter-veu {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, rgba(5, 5, 6, 0.78) 0%, rgba(5, 5, 6, 0.34) 46%, transparent 68%);
}
.cta-inter-conteudo {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1.1rem;
  padding: clamp(1.6rem, 5vw, 4.5rem);
  color: var(--sc-white);
}
.cta-inter-conteudo h2 {
  margin: 0;
  max-width: 16ch;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  letter-spacing: -0.04em;
  line-height: 1.02;
  color: var(--sc-white);
}
.cta-inter-conteudo .cta-sub { margin: 0; max-width: 34rem; font-size: var(--fs-small); line-height: 1.6; color: rgba(255, 255, 255, 0.78); }
.cta-inter-conteudo .btn { margin-top: 0.6rem; }
@media (max-width: 900px) {
  .cta-inter .interlude-ghost { display: none; }
  .cta-inter .interlude-mask { width: 90%; aspect-ratio: auto; }
  .cta-inter .interlude-mask img { object-position: 62% 50%; }
  .cta-inter-conteudo { position: relative; inset: auto; padding: clamp(2.2rem, 8vw, 3rem) clamp(1.2rem, 5vw, 2rem); }
}

/* ===================== CTA INTERMEDIÁRIO (dark) ===================== */
.cta-mid { text-align: left; position: relative; overflow: hidden; }
.cta-mid .cta-glow {
  position: absolute;
  width: 54vw;
  height: 54vw;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--sc-verde) 14%, transparent), transparent 62%);
  top: -30%;
  right: -16%;
  pointer-events: none;
}
.cta-mid h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.2rem, 5.2vw, 4.6rem);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
  color: var(--sc-white);
  margin: 0 0 1rem;
  max-width: 20ch;
}
.cta-mid .cta-sub { margin: 0 0 2.2rem; max-width: 42rem; color: var(--sc-fog-200); font-size: var(--fs-body-lg); font-weight: 300; }

/* ===================== FORMULÁRIO ===================== */
.form-timeline { margin-top: 2.6rem; }
.ft-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2.4rem);
  counter-reset: ft;
}
.ft-step { border-top: 1px solid var(--line-strong); padding-top: 1rem; position: relative; }
.ft-step .ft-num { font-family: var(--font-mono); font-size: var(--fs-caption); letter-spacing: 0.14em; color: var(--accent-ink); }
.ft-step .ft-text { margin: 0.5rem 0 0; font-size: var(--fs-small); color: var(--fg2); }
@media (max-width: 720px) { .ft-steps { grid-template-columns: 1fr; } }

.lead-form {
  margin-top: clamp(2.4rem, 6vh, 3.6rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  padding: clamp(1.6rem, 4vw, 3.2rem);
  position: relative;
}
.form-progress { display: flex; gap: 8px; margin-bottom: 6px; }
.form-progress .dot {
  width: 34px;
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--sc-paper-2);
  transition: background var(--d-base) var(--ease-soft);
}
.form-progress .dot.on { background: var(--sc-verde); }
.form-stepcount { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--fg4); margin: 0 0 1.6rem; }
.form-step { display: none; border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.form-step.is-on { display: block; }
.form-q {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  letter-spacing: -0.02em;
  color: var(--fg1);
  padding: 0;
  margin-bottom: 1.8rem;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }
@media (max-width: 720px) { .field-row { grid-template-columns: 1fr; } }
.field .hint { font-size: var(--fs-caption); color: var(--fg4); margin: 6px 0 0; }
.field.invalid input, .field.invalid textarea, .field.invalid select,
input.invalid, select.invalid, textarea.invalid {
  border-bottom-color: var(--erro) !important;
  box-shadow: 0 1px 0 0 var(--erro);
}
.checks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px 18px;
  padding: 4px 0 2px;
}
.checks label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-small);
  color: var(--fg2);
  cursor: pointer;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color var(--d-fast), background var(--d-fast);
}
.checks label:hover { border-color: var(--line-strong); }
.checks label:has(input:checked) { border-color: var(--sc-verde); background: color-mix(in srgb, var(--sc-verde) 7%, transparent); }
.checks input { accent-color: var(--sc-verde-deep); width: 16px; height: 16px; margin-top: 3px; flex: none; cursor: pointer; }
.checks.invalid { outline: 1px solid var(--erro); outline-offset: 4px; border-radius: var(--r-sm); }
.lgpd { display: flex; align-items: flex-start; gap: 10px; margin-top: 1.6rem; font-size: var(--fs-small); color: var(--fg2); cursor: pointer; }
.lgpd input { accent-color: var(--sc-verde-deep); width: 17px; height: 17px; margin-top: 2px; flex: none; cursor: pointer; }
.lgpd a { color: var(--link); border-bottom: 1px solid currentColor; }
.lgpd input.invalid { outline: 2px solid var(--erro); outline-offset: 2px; }
.rd-range { display: flex; align-items: center; gap: 18px; padding-top: 8px; }
.rd-range input[type="range"] { flex: 1; accent-color: var(--sc-verde-deep); }
.rd-range-val {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.7rem;
  letter-spacing: -0.04em;
  color: var(--fg1);
  min-width: 3ch;
  text-align: right;
}
.rd-faixa { display: flex; align-items: center; gap: 12px; }
.rd-faixa input { flex: 1; }
.rd-faixa-sep { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg4); }
.sc-toggle { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; margin-top: 6px; }
.sc-toggle input { position: absolute; opacity: 0; }
.sc-toggle-track {
  width: 46px;
  height: 26px;
  border-radius: var(--r-pill);
  background: var(--sc-fog-200);
  position: relative;
  transition: background var(--d-fast) var(--ease-soft);
  flex: none;
}
.sc-toggle-dot {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--sc-white);
  box-shadow: 0 2px 6px rgba(10, 10, 11, 0.25);
  transition: transform var(--d-fast) var(--ease-snap);
}
.sc-toggle input:checked + .sc-toggle-track { background: var(--sc-verde); }
.sc-toggle input:checked + .sc-toggle-track .sc-toggle-dot { transform: translateX(20px); }
.sc-toggle input:focus-visible + .sc-toggle-track { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
.sc-toggle-label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg2); }
.form-nav { display: flex; justify-content: space-between; gap: 14px; margin-top: 2.2rem; }
.form-nav .btn:only-child { margin-left: auto; }
.form-error {
  margin: 1.4rem 0 0;
  padding: 14px 18px;
  border: 1px solid color-mix(in srgb, var(--erro) 45%, transparent);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--erro) 6%, transparent);
  color: var(--erro);
  font-size: var(--fs-small);
}
.form-error b { color: var(--erro); }
.form-success { text-align: center; padding: clamp(2rem, 6vh, 4rem) 0; }
.form-success .ok-icon {
  font-size: 52px;
  color: var(--accent-ink);
  display: inline-block;
  margin-bottom: 1rem;
}
.form-success .sc-h3 { font-size: 1.9rem; }
.form-success .sc-body { max-width: 34rem; margin: 0.8rem auto 0; }
.form-foot { font-size: var(--fs-caption); color: var(--fg4); margin: 1.6rem 0 0; text-align: center; }

/* ===================== FAQ ===================== */
/* formulário e FAQ centralizados na página */
#form .sec-head, #faq .sec-head { max-width: 46rem; margin-inline: auto; text-align: center; }
#form .sec-head .form-timeline { text-align: left; }
.lead-form { max-width: 56rem; margin-inline: auto; }
.faq-list { max-width: 56rem; margin-inline: auto; }
/* abertura suave das perguntas (altura animada via JS) */
.faq-a { overflow: hidden; transition: height 380ms var(--ease-glide); }
.faq-toggle.fechando .faq-q .faq-ic { transform: rotate(0deg); }
@media (prefers-reduced-motion: reduce) { .faq-a { transition: none; } }
.faq-toggle { border-top: 1px solid var(--line); }
.faq-toggle:last-child { border-bottom: 1px solid var(--line); }
.faq-q {
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 1.3rem 0;
  cursor: pointer;
  transition: color var(--d-fast);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q .faq-num {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--fg4);
  min-width: 2.4ch;
  transition: color var(--d-fast);
}
.faq-q h3 {
  margin: 0;
  flex: 1;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  letter-spacing: -0.01em;
  color: var(--fg1);
}
.faq-q .faq-ic {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--accent-ink);
  transition: transform var(--d-fast) var(--ease-snap);
  flex: none;
}
.faq-toggle[open] .faq-q .faq-ic { transform: rotate(45deg); }
.faq-toggle:hover .faq-q .faq-num { color: var(--accent-ink); }
.faq-a { padding: 0 0 1.6rem calc(2.4ch + 18px); }
.faq-a p { margin: 0; max-width: 46rem; font-size: var(--fs-small); color: var(--fg2); line-height: var(--lh-body); }
@media (max-width: 560px) { .faq-a { padding-left: 0; } }

/* relógio das praças, centralizado abaixo do mapa */
.offices-relogio {
  margin: clamp(1.8rem, 4.5vh, 3rem) auto 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sc-fog-300);
}

/* ===================== ESCRITÓRIOS · MAPA-MÚNDI (dark) ===================== */
.offices { overflow: hidden; }
.world-map { position: relative; max-width: 56rem; margin: clamp(2rem, 5vh, 3.4rem) auto 0; }
.wm-svg { width: 100%; height: auto; display: block; overflow: visible; }
.wm-land path {
  fill: rgba(255, 255, 255, 0.07);
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 0.4;
  vector-effect: non-scaling-stroke;
  transition: fill 0.5s ease;
}
.wm-pin {
  opacity: 0;
  transform: translateY(-18px) scale(0.18);
  transform-box: fill-box;
  transform-origin: center bottom;
  transition: opacity 0.7s var(--ease-snap), transform 0.7s var(--ease-snap);
}
.world-map.in .wm-pin { opacity: 1; transform: translateY(0) scale(1); transition-delay: calc(var(--i) * 0.26s); }
.wm-core { fill: var(--sc-verde); filter: drop-shadow(0 0 5px rgba(147, 213, 0, 0.65)); }
.wm-core-in { fill: var(--sc-ink-900); }
.wm-halo { fill: rgba(147, 213, 0, 0.15); }
.wm-pulse { fill: none; stroke: var(--sc-verde); stroke-width: 1.8; opacity: 0; }
.world-map.in .wm-pin .wm-pulse { animation: wmPulse 2.6s var(--ease-snap) infinite; animation-delay: calc(var(--i) * 0.26s + 0.8s); }
.world-map.in .wm-pin .wm-pulse-2 { animation-delay: calc(var(--i) * 0.26s + 2.1s); }
@keyframes wmPulse {
  0% { r: 5; opacity: 0.9; }
  70% { r: 26; opacity: 0; }
  100% { r: 26; opacity: 0; }
}
.wm-label { fill: var(--sc-fog-100); font-family: var(--font-mono); font-size: 14px; font-weight: 600; text-anchor: middle; letter-spacing: 0.3px; }
.wm-sub { fill: var(--sc-fog-300); font-family: var(--font-mono); font-size: 9px; text-anchor: middle; text-transform: uppercase; letter-spacing: 1px; }

/* ===================== INSTAGRAM ===================== */
.ig-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: clamp(2rem, 5vh, 3rem); }
/* Masonry de verdade por colunas CSS: cada post mantem a proporcao
   original em vez de ser cortado no quadrado, e as colunas se fecham
   sozinhas. O grid-masonry nativo ainda nao tem suporte amplo. */
.ig-grid {
  display: block;
  column-count: 5;
  column-gap: 10px;
}
@media (max-width: 1020px) { .ig-grid { column-count: 4; } }
@media (max-width: 720px)  { .ig-grid { column-count: 3; } }
/* o instagram-feed.js marca a secao com .ig-unavailable quando a API nao
   responde. Sem esta regra a grade vazia continuava ocupando espaco. */
#instagram.ig-unavailable .ig-grid { display: none; }
.ig-card {
  position: relative;
  display: block;
  width: 100%;
  break-inside: avoid;          /* nao parte o card entre colunas */
  -webkit-column-break-inside: avoid;
  margin: 0 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--sc-paper-2);
  padding: 0;
  overflow: hidden;
  /* sem aspect-ratio fixo: a altura vem da propria imagem (masonry).
     O min-height reserva espaco antes de a imagem carregar, senao o
     card nasce com altura zero e o loading="lazy" nunca dispara. */
  min-height: 120px;
  cursor: pointer;
}
.ig-card img { width: 100%; height: auto; display: block; filter: grayscale(1) contrast(1.06); transition: filter var(--d-base) var(--ease-soft), transform var(--d-slow) var(--ease-glide); }
.ig-card:hover img { filter: grayscale(0); transform: scale(1.04); }
.ig-card-hover {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(10, 10, 11, 0.34);
  color: var(--sc-white);
  font-size: 26px;
  opacity: 0;
  transition: opacity var(--d-fast) var(--ease-soft);
}
.ig-card:hover .ig-card-hover, .ig-card:focus-visible .ig-card-hover { opacity: 1; }
.ig-card-type {
  position: absolute;
  top: 10px;
  right: 10px;
  color: var(--sc-white);
  font-size: 15px;
  filter: drop-shadow(0 1px 4px rgba(10, 10, 11, 0.6));
}
/* O JS abre/fecha alternando .is-open, mas nao existia regra ligada a
   essa classe: o lightbox nascia visivel e o close() nunca o escondia.
   Fechado ele fica invisivel, sem receber clique e fora da arvore de
   acessibilidade (visibility: hidden). */
.ig-lightbox {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center; padding: var(--pad);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--d-base) var(--ease-glide), visibility 0s linear var(--d-base);
}
.ig-lightbox.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.ig-lightbox[hidden] { display: none; }
.ig-lb-scrim { position: absolute; inset: 0; background: rgba(10, 10, 11, 0.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ig-lb-dialog {
  position: relative;
  display: grid;
  /* A lateral (legenda + CTA) passou de ~41,7% para 45% e o dialogo de
     920 para 1040px: assim o painel cresce sem espremer a imagem.
     Atencao: a seta "proximo" e posicionada em % e acompanha este valor. */
  grid-template-columns: minmax(0, 55%) minmax(320px, 45%);
  width: min(1040px, 100%);
  max-height: 84vh;
  background: var(--sc-paper);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
}
.ig-lb-media { background: var(--sc-ink-900); display: grid; place-items: center; min-height: 300px; overflow: hidden; }
.ig-lb-media img, .ig-lb-media video { max-width: 100%; max-height: 84vh; object-fit: contain; }
.ig-lb-aside { padding: 28px; display: flex; flex-direction: column; gap: 16px; overflow: auto; }
.ig-lb-brand { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--fg2); display: inline-flex; align-items: center; gap: 8px; }
.ig-lb-cap { font-size: var(--fs-small); color: var(--fg2); white-space: pre-wrap; flex: 1; }

/* Mobile do lightbox. Este bloco precisa vir DEPOIS das regras base acima:
   como a especificidade e a mesma, quem vence e a ordem. Quando ele estava
   antes, o max-height 84vh da base sobrescrevia o teto de 42vh e a imagem
   vazava por cima da legenda. */
@media (max-width: 760px) {
  .ig-lb-dialog { grid-template-columns: 1fr; max-height: 90vh; overflow: auto; }
  /* Empilhado, quem manda na divisao e a ALTURA da imagem: sem teto ela
     tomava 467px dos 760 do dialogo e sobrava pouco para a legenda. */
  .ig-lb-media { max-height: 42vh; min-height: 0; }
  .ig-lb-media img, .ig-lb-media video { max-height: 42vh; }
  .ig-lb-aside { padding: 22px; gap: 14px; }
}
.ig-lb-close, .ig-lb-nav {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(10, 10, 11, 0.55);
  color: var(--sc-white);
  font-size: 16px;
  transition: all var(--d-fast) var(--ease-soft);
}
.ig-lb-close:hover, .ig-lb-nav:hover { background: var(--sc-verde); color: var(--accent-fg); border-color: var(--sc-verde); }
.ig-lb-close { top: 12px; right: 12px; }
.ig-lb-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.ig-lb-next { right: 12px; top: 50%; transform: translateY(-50%); }
@media (min-width: 761px) { .ig-lb-next { right: calc(45% - 20px); }   /* acompanha a largura da lateral */ }

/* ===================== FOOTER ===================== */
.footer--site .footer-main { grid-template-columns: 1.35fr 1fr; }
@media (max-width: 900px) { .footer--site .footer-main { grid-template-columns: 1fr; } }
.footer--site .foot-cta-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2rem; }
.foot-social { display: flex; gap: 10px; margin-top: 2.2rem; }
.foot-social-link {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--sc-ink-600);
  border-radius: 50%;
  color: var(--sc-fog-300);
  font-size: 18px;
  transition: all var(--d-fast) var(--ease-soft);
}
.foot-social-link:hover { border-color: var(--sc-verde); color: var(--sc-verde); transform: translateY(-3px); }
.footer--site .foot-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-content: start; }
.footer--site .foot-col h4 {
  margin: 0 0 1.2rem;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--sc-fog-400);
}
.footer--site .foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; }
.footer--site .foot-col a { color: var(--sc-fog-300); transition: color var(--d-fast); }
.footer--site .foot-col a:hover { color: var(--sc-verde); }
.footer--site .footer-word { font-size: clamp(3.4rem, 10.5vw, 10.6rem); }
.footer--site p.sc-body { color: var(--sc-fog-200); max-width: 34rem; }

/* ===================== PÍLULA WHATSAPP + VOLTAR AO TOPO ===================== */
.status-pill {
  position: fixed;
  right: clamp(16px, 2.4vw, 30px);
  bottom: clamp(16px, 2.4vw, 30px);
  z-index: calc(var(--z-nav) + 1);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  background: var(--sc-ink-900);
  color: var(--sc-fog-100);
  border: 1px solid var(--sc-ink-600);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  box-shadow: var(--shadow-lift);
  transition: transform var(--d-fast) var(--ease-snap), background var(--d-fast), color var(--d-fast), border-color var(--d-fast);
}
.status-pill:hover { transform: translateY(-3px); background: var(--sc-verde); color: var(--accent-fg); border-color: var(--sc-verde); }
.status-pill .status-ic { flex: none; width: 17px; height: 17px; color: var(--sc-verde); transition: color var(--d-fast) var(--ease-soft); }
.status-pill:hover .status-ic { color: var(--accent-fg); }
.status-pill .dot-wrap { position: relative; width: 9px; height: 9px; flex: none; }
.status-pill .dot { position: absolute; inset: 0; border-radius: 50%; background: var(--sc-verde); }
.status-pill:hover .dot { background: var(--accent-fg); }
.status-pill .dot-ping {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--sc-verde);
  animation: pill-ping 2.2s var(--ease-snap) infinite;
}
.status-pill:hover .dot-ping { border-color: var(--accent-fg); }
@keyframes pill-ping {
  0% { transform: scale(0.5); opacity: 0.9; }
  80%, 100% { transform: scale(1.5); opacity: 0; }
}
.to-top {
  position: fixed;
  right: clamp(16px, 2.4vw, 30px);
  bottom: calc(clamp(16px, 2.4vw, 30px) + 60px);
  z-index: var(--z-nav);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  color: var(--fg1);
  font-size: 16px;
  transition: all var(--d-fast) var(--ease-soft);
}
.to-top:hover { background: var(--sc-ink-900); color: var(--sc-verde); border-color: var(--sc-ink-900); transform: translateY(-3px); }
.to-top[hidden] { display: none; }

/* ===================== POPUP WHATSAPP (waModal) ===================== */
.wa-modal { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: var(--pad); }
.wa-modal[hidden] { display: none; }
.wa-modal-overlay { position: absolute; inset: 0; background: rgba(10, 10, 11, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.wa-modal-card {
  position: relative;
  width: min(440px, 100%);
  background: var(--sc-paper);
  color: #33333A;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);
  padding: clamp(22px, 4vw, 34px);
}
.wa-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 1.4rem; }
.wa-modal-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--fg1);
}
.wa-modal-brand iconify-icon { font-size: 22px; color: var(--accent-ink); }
.wa-modal-close {
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--fg1);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  transition: all var(--d-fast) var(--ease-soft);
  flex: none;
}
.wa-modal-close:hover { background: var(--sc-ink-900); color: var(--sc-white); border-color: var(--sc-ink-900); transform: rotate(90deg); }
.wa-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
@media (max-width: 480px) { .wa-row { grid-template-columns: 1fr; } }
.wa-field { margin-bottom: 20px; }
.wa-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg3);
  margin-bottom: 8px;
}
.wa-field input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  background: transparent;
  color: var(--fg1);
  padding: 10px 2px;
  outline: none;
  border-radius: 0;
  transition: border-color var(--d-fast) var(--ease-soft), box-shadow var(--d-fast) var(--ease-soft);
}
.wa-field input:focus { border-bottom-color: var(--accent-ink); box-shadow: 0 1px 0 0 var(--accent-ink); }
.wa-input-icon { position: relative; }
.wa-input-icon iconify-icon {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fg4);
  font-size: 16px;
}
.wa-input-icon input { padding-left: 26px; }
.wa-error { color: var(--erro); font-size: var(--fs-caption); margin: 0 0 14px; }
.wa-submit {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: var(--r-pill);
  border: 1px solid var(--sc-verde);
  background: var(--sc-verde);
  color: var(--accent-fg);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  transition: all var(--d-fast) var(--ease-soft);
}
.wa-submit:hover { background: var(--sc-ink-900); border-color: var(--sc-ink-900); color: var(--sc-verde); transform: translateY(-2px); }
.wa-submit iconify-icon { font-size: 16px; }

/* ===================== COMPAT · CLASSES LEGADAS DE JS ===================== */
/* instagram-feed.js emite .btn.btn-ghost no lightbox */
.btn-ghost { --btn-bg: transparent; --btn-fg: var(--fg1); --btn-bd: var(--line-strong); }
.btn-ghost:hover { background: var(--sc-ink-900); border-color: var(--sc-ink-900); color: var(--sc-white); }

/* ===================== PÁGINAS INTERNAS ===================== */
.page-hero {
  padding: calc(90px + clamp(3rem, 8vh, 6rem)) 0 clamp(2.6rem, 7vh, 4.6rem);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.page-hero .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 1.2rem; color: var(--accent-ink); }
.page-hero .eyebrow::before { content: ""; width: 2.2rem; height: 1px; background: var(--accent-ink); }
.page-hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.4rem, 6vw, 5.4rem);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
  color: var(--fg1);
  text-wrap: balance;
}
.page-hero .sc-lead { margin: 1.4rem 0 0; max-width: 46rem; }
.prose { max-width: 46rem; }
.prose h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: -0.02em; color: var(--fg1); margin: 2.6em 0 0.7em; }
.prose h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; color: var(--fg1); margin: 2em 0 0.6em; }
.prose p, .prose li { color: var(--fg2); font-size: var(--fs-body); line-height: var(--lh-body); }
.prose a { color: var(--link); border-bottom: 1px solid currentColor; }
.prose a:hover { color: var(--accent-ink); }
.prose ul { padding-left: 1.2rem; }

/* ===================== ACESSIBILIDADE / MOTION ===================== */
@media (prefers-reduced-motion: reduce) {
  .status-pill .dot-ping { animation: none; opacity: 0; }
  .hero-eyebrow-row .dot-live { animation: none; }
  .world-map .wm-pin { opacity: 1; transform: none; }
}

/* ============================================================
   MENU MOBILE
   Ate 768px o ds2.css esconde a .nav e, sem hamburguer, o site
   ficava SEM navegacao nenhuma no celular. O botao e o painel
   sao montados pelo site2.js a partir da propria .nav de cada
   pagina, entao as 7 paginas com header completo ganham o menu
   sem duplicar markup.
   ============================================================ */

/* botao hamburguer: so existe no mobile */
.nav-burger {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--fg1);
  cursor: pointer;
  transition: border-color var(--d-fast) var(--ease-soft), background var(--d-fast) var(--ease-soft);
}
.nav-burger:hover { border-color: var(--line-strong); }
.nav-burger .traco {
  display: block;
  width: 18px;
  height: 1.5px;
  margin: 2.5px auto;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--d-fast) var(--ease-glide), opacity var(--d-fast) var(--ease-soft);
}
.nav-burger[aria-expanded="true"] .traco:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.nav-burger[aria-expanded="true"] .traco:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] .traco:nth-child(3) { transform: translateY(-4px) rotate(-45deg); }

/* painel */
.menu-mobile {
  position: fixed;
  inset: 0;
  z-index: 95;               /* abaixo do header (z-nav 90 + o header e fixed) */
  background: var(--sc-paper);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  padding: 96px var(--pad) calc(var(--pad) + 12px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity var(--d-base) var(--ease-glide),
              transform var(--d-base) var(--ease-glide),
              visibility 0s linear var(--d-base);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu-mobile.aberto {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.menu-mobile a.menu-link {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 5.4vw, 1.55rem);
  letter-spacing: var(--tracking-tight);
  line-height: 1.15;
  color: var(--fg1);
  text-decoration: none;
  /* animacao de entrada: cada item sobe e aparece, escalonado */
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 420ms var(--ease-glide), transform 420ms var(--ease-glide);
}
.menu-mobile.aberto a.menu-link { opacity: 1; transform: none; }
.menu-mobile.aberto a.menu-link:nth-child(2) { transition-delay: 40ms; }
.menu-mobile.aberto a.menu-link:nth-child(3) { transition-delay: 80ms; }
.menu-mobile.aberto a.menu-link:nth-child(4) { transition-delay: 120ms; }
.menu-mobile.aberto a.menu-link:nth-child(5) { transition-delay: 160ms; }
.menu-mobile.aberto a.menu-link:nth-child(6) { transition-delay: 200ms; }
.menu-mobile.aberto a.menu-link:nth-child(7) { transition-delay: 240ms; }
.menu-mobile.aberto a.menu-link:nth-child(8) { transition-delay: 280ms; }
.menu-mobile.aberto a.menu-link:nth-child(9) { transition-delay: 320ms; }

/* topo do painel: logomarca a esquerda, fechar a direita.
   O painel cobre o header, entao o X aqui e a unica saida no celular
   (nao existe ESC no toque). */
.menu-topo {
  position: absolute;
  top: 18px; left: var(--pad); right: var(--pad);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.menu-topo .menu-logo { display: inline-flex; align-items: center; }
.menu-topo .menu-logo img { height: 42px; width: auto; display: block; }
.menu-fechar {
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--fg1);
  cursor: pointer;
}
.menu-fechar iconify-icon { font-size: 20px; }
.menu-fechar:hover { border-color: var(--line-strong); }
.menu-mobile a.menu-link:first-of-type { border-top: 1px solid var(--line); }
.menu-mobile a.menu-link .n {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--sc-verde-deep);
  flex: none;
}
.menu-mobile a.menu-link:active { color: var(--sc-verde-deep); }

.menu-rodape {
  margin-top: auto;
  padding-top: 24px;
  display: grid;
  gap: 10px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 420ms var(--ease-glide) 340ms, transform 420ms var(--ease-glide) 340ms;
}
.menu-mobile.aberto .menu-rodape { opacity: 1; transform: none; }
.menu-mobile .menu-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  border-radius: var(--r-pill);
  background: var(--sc-verde);
  color: var(--sc-ink-900);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
}
.menu-mobile .menu-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  color: var(--fg1);
  font-family: var(--font-body);
  font-size: 0.95rem;
  text-decoration: none;
}
.menu-mobile .menu-wa .ico-wa { width: 19px; height: 19px; }

@media (max-width: 768px) {
  .nav-burger { display: inline-grid; }
  /* a barra no celular fica com logo + WhatsApp + hamburguer.
     O CTA nao some do site: ele reaparece dentro do painel. */
  .site-header .header-cta { display: none; }
}
@media (min-width: 769px) {
  .menu-mobile { display: none; }
}
body.menu-aberto { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .menu-mobile,
  .menu-mobile a.menu-link,
  .menu-mobile .menu-rodape { transition-duration: 1ms; transition-delay: 0ms; }
}

/* O credito do rodape e o unico item da linha; o .footer-meta do ds2.css
   usa space-between e por isso ele encostava na esquerda. Aqui ele centra.
   Escopo no .footer--site para nao mexer no componente do DS. */
.footer--site .footer-meta { justify-content: center; text-align: center; }

/* ============================================================
   ICONE DO WHATSAPP
   O site usava 3 variantes do glifo do Phosphor no mesmo nivel
   (fill, light e bold), o que quebra a consistencia do set. Agora
   e um unico glifo oficial da marca, inline em SVG, o mesmo ja
   usado nas propostas de cliente. Sem CDN, sem flash de fonte de
   icone e herdando a cor do botao por currentColor.
   ============================================================ */
.ico-wa { width: 1em; height: 1em; display: block; flex: none; }
.foot-social-link .ico-wa { width: 19px; height: 19px; }