/* ==========================================================================
   VOGEL DIGITAL · SITE INSTITUCIONAL · v3.0 (01/set/2026)
   Construido sobre COPY-MAE-VOGEL.md e sobre o sistema visual v2.
   Depende de tokens.css. Nenhum valor de cor ou tipo e hard-coded aqui.

   Variancia deliberada: cada secao tem um formato proprio. Nao existe
   "tres cards iguais lado a lado" em nenhum ponto do documento.
   ========================================================================== */

/* ==========================================================================
   ESCALA DE LEITURA E CONTRASTE · sobrescrita do site sobre os tokens
   🔴 Motivo (Victor, 01/set/2026): "as letras ficaram muito pequenas, e muitas
   vezes vai estar lidando com profissional que ja passou dos 50 anos".
   Isto e ACESSIBILIDADE, nao preferencia.

   Piso: nenhum texto corrido abaixo de 16px em nenhum breakpoint.
   O design system (tokens.css) NAO foi alterado: a mudanca vive aqui,
   na camada do site, porque e uma decisao deste publico.
   ========================================================================== */
:root {
  --vd-text-base: 1.125rem;   /* 18px · corpo */
  --vd-text-sm:   1rem;       /* 16px · piso de texto corrido (era 14) */
  --vd-text-xs:   0.875rem;   /* 14px · rotulo (era 12) */
  --vd-text-2xs:  0.875rem;   /* 14px · piso absoluto. Publico 50+: nada de texto abaixo disto. */
  --vd-text-2xs:  0.875rem;   /* 14px · PISO ABSOLUTO. Publico 50+: nada de texto abaixo disto. */
  --vd-text-lg:   1.25rem;

  /* contraste: os cinzas estavam apagados sobre o preto */
  --vd-text-muted:  var(--vd-neutral-300);  /* #BBB · 11,2:1 (era #888, 5,6:1) */
  --vd-text-subtle: var(--vd-neutral-400);  /* #888 ·  5,6:1 (era #666, 3,6:1 e reprovava) */
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--vd-bg);
  color: var(--vd-text);
  font-family: var(--vd-font-body);
  font-size: var(--vd-text-base);
  line-height: var(--vd-leading-normal);
  font-weight: var(--vd-weight-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--vd-focus-ring); outline-offset: 3px; border-radius: 4px; }

::selection { background: var(--vd-accent); color: var(--vd-accent-fg); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--vd-accent); color: var(--vd-accent-fg);
  padding: 12px 20px; font-weight: var(--vd-weight-bold); border-radius: 0 0 var(--vd-radius-md) 0;
}
.skip:focus { left: 0; }

/* ---------- LAYOUT ---------- */
.wrap { width: 100%; max-width: var(--vd-container); margin-inline: auto; padding-inline: 24px; }
.wrap--wide { max-width: var(--vd-container-wide); }
.sec { padding-block: clamp(72px, 11vw, 152px); position: relative; }
.sec--tight { padding-block: clamp(52px, 7vw, 88px); }
.sec--line { border-top: 1px solid var(--vd-border); }

/* ---------- TIPOGRAFIA ---------- */
.display, h1, h2, h3 {
  font-family: var(--vd-font-display);
  font-weight: var(--vd-weight-black);
  line-height: var(--vd-leading-tight);
  letter-spacing: var(--vd-tracking-tight);
  text-wrap: balance;
}
h1 { font-size: var(--vd-text-hero); letter-spacing: var(--vd-tracking-hero); }
h2 { font-size: var(--vd-text-h2); }
h3 { font-size: var(--vd-text-h3); }
.lime { color: var(--vd-accent); font-style: normal; }
.lead { font-size: clamp(1.0625rem, 1.5vw, 1.3125rem); line-height: 1.6; color: var(--vd-text-muted); max-width: 62ch; }
p { text-wrap: pretty; }

/* rotulo mono — a assinatura de "dado" do sistema */
.eyebrow {
  font-family: var(--vd-font-mono);
  font-size: var(--vd-text-2xs);
  letter-spacing: var(--vd-tracking-widest);
  text-transform: uppercase;
  color: var(--vd-accent);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .6; }
.eyebrow--plain::before { display: none; }
.eyebrow--muted { color: var(--vd-text-subtle); }

.sec__head { max-width: 68ch; margin-bottom: clamp(40px, 5vw, 72px); }
.sec__head h2 { margin-top: 18px; }
.sec__head .lead { margin-top: 20px; }

/* ---------- BOTOES ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px; border-radius: var(--vd-radius-full);
  font-weight: var(--vd-weight-bold); font-size: var(--vd-text-sm);
  letter-spacing: -.01em; white-space: nowrap;
  transition: transform var(--vd-duration-fast) var(--vd-ease),
              background-color var(--vd-duration-fast) var(--vd-ease),
              border-color var(--vd-duration-fast) var(--vd-ease),
              color var(--vd-duration-fast) var(--vd-ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--vd-accent); color: var(--vd-accent-fg); }
.btn--primary:hover { background: var(--vd-accent-hover); }
.btn--ghost { border: 1px solid var(--vd-border-strong); color: var(--vd-text); }
.btn--ghost:hover { border-color: var(--vd-accent); color: var(--vd-accent); }
.btn--dark { background: var(--vd-neutral-1000); color: var(--vd-neutral-50); }
.btn--dark:hover { background: var(--vd-neutral-800); }
.btn--outline-dark { border: 1px solid rgba(10,10,10,.32); color: var(--vd-neutral-1000); }
.btn--outline-dark:hover { border-color: var(--vd-neutral-1000); background: rgba(10,10,10,.06); }
.btn__ar { font-size: 16px; line-height: 1; transition: transform var(--vd-duration-fast) var(--vd-ease); }
.btn:hover .btn__ar { transform: translate(3px, -3px); }

/* seta de link em linha */
.arrowlink {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--vd-font-mono); font-size: var(--vd-text-xs);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--vd-accent); padding-bottom: 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--vd-accent) 34%, transparent);
  transition: border-color var(--vd-duration-fast) var(--vd-ease), gap var(--vd-duration-fast) var(--vd-ease);
}
.arrowlink:hover { border-color: var(--vd-accent); gap: 14px; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background-color var(--vd-duration-normal) var(--vd-ease),
              border-color var(--vd-duration-normal) var(--vd-ease);
}
.hdr.is-stuck { background: color-mix(in srgb, var(--vd-bg) 92%, transparent); border-bottom-color: var(--vd-border); backdrop-filter: blur(14px); }
.hdr__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 74px; }
.hdr__logo { display: block; }
.hdr__logo img { height: 30px; width: auto; }
.hdr__nav { display: flex; align-items: center; gap: 30px; }
.hdr__nav a {
  font-size: var(--vd-text-sm); color: var(--vd-text-muted); font-weight: var(--vd-weight-medium);
  transition: color var(--vd-duration-fast) var(--vd-ease);
}
.hdr__nav a:hover { color: var(--vd-text); }
.hdr__cta { display: flex; align-items: center; gap: 14px; }
.hdr__cta .btn { padding: 11px 20px; font-size: var(--vd-text-xs); }
.hdr__burger { display: none; width: 42px; height: 42px; align-items: center; justify-content: center; border: 1px solid var(--vd-border); border-radius: var(--vd-radius-full); }
.hdr__burger span { display: block; width: 16px; height: 1.5px; background: var(--vd-text); position: relative; }
.hdr__burger span::before, .hdr__burger span::after { content: ""; position: absolute; left: 0; width: 16px; height: 1.5px; background: var(--vd-text); }
.hdr__burger span::before { top: -5px; } .hdr__burger span::after { top: 5px; }

@media (max-width: 1000px) {
  .hdr__nav { display: none; }
  .hdr__burger { display: flex; }
  .hdr__cta .btn--ghost { display: none; }
}
/* menu mobile */
.mnav {
  position: fixed; inset: 74px 0 auto 0; z-index: 99;
  background: var(--vd-bg); border-bottom: 1px solid var(--vd-border);
  padding: 22px 24px 30px; display: none;
}
.mnav.is-open { display: block; }
.mnav a { display: block; padding: 13px 0; font-family: var(--vd-font-display); font-weight: var(--vd-weight-bold); font-size: 1.375rem; letter-spacing: -.02em; border-bottom: 1px solid var(--vd-border); }
.mnav a:last-of-type { border-bottom: 0; }

/* ==========================================================================
   1 · HERO
   ========================================================================== */
.hero { position: relative; padding-top: clamp(130px, 17vw, 200px); padding-bottom: clamp(60px, 8vw, 104px); overflow: hidden; }
.hero__bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
/* malha de pontos: textura, nao gradiente de IA */
.hero__bg::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(250,250,250,.10) 1px, transparent 0);
  background-size: 34px 34px;
  mask-image: radial-gradient(ellipse 76% 60% at 22% 34%, #000 12%, transparent 74%);
}
/* o simbolo entrelacado como marca d'agua gigante: o logo prova o posicionamento */
.hero__mark {
  position: absolute; right: -9%; top: 4%; width: min(56vw, 720px); opacity: .05; z-index: 0;
  transform: rotate(-8deg); pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; }
.hero__badges { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.badge {
  font-family: var(--vd-font-mono); font-size: var(--vd-text-2xs);
  letter-spacing: .14em; text-transform: uppercase;
  padding: 8px 15px; border-radius: var(--vd-radius-full);
  border: 1px solid var(--vd-border); color: var(--vd-text-muted);
}
.badge--brand { border-color: color-mix(in srgb, var(--vd-accent) 40%, transparent); color: var(--vd-accent); }
.hero h1 { max-width: 17ch; }
.hero__sub { margin-top: 30px; max-width: 58ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
.hero__note {
  margin-top: 26px; font-family: var(--vd-font-mono); font-size: var(--vd-text-2xs);
  letter-spacing: .08em; color: var(--vd-text-subtle); text-transform: uppercase;
}

/* ---------- MARQUEE ---------- */
.marquee { overflow: hidden; padding: 15px 0; border-block: 1px solid var(--vd-border); }
.marquee--lime { background: var(--vd-accent); border-color: var(--vd-accent); }
/* 🔴 O track tem DUAS copias identicas e a animacao anda -50%, ou seja, exatamente
   uma copia. Para nao abrir buraco, UMA copia precisa ser mais larga que a tela.
   Defeito visto pelo Victor em 01/set: com 3 frases curtas a copia dava ~900px e
   sobrava area vazia a partir de 1440px. Ao trocar o conteudo desta faixa,
   meça: se uma copia ficar abaixo de ~2000px, repita o conjunto mais vezes. */
.marquee__track { display: flex; gap: 30px; width: max-content; animation: mq var(--vd-duration-marquee) linear infinite; }
.marquee span {
  font-family: var(--vd-font-display); font-weight: var(--vd-weight-black);
  font-size: clamp(15px, 1.7vw, 21px); letter-spacing: -.015em; white-space: nowrap;
}
.marquee--lime span, .marquee--lime i { color: var(--vd-accent-fg); }
.marquee i { font-style: normal; opacity: .45; }
@keyframes mq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ==========================================================================
   2 · O CENARIO — quatro perdas. Lista editorial escalonada, nao cards.
   ========================================================================== */
.losses { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; background: var(--vd-border); border: 1px solid var(--vd-border); }
.loss {
  background: var(--vd-bg); padding: clamp(28px, 3.4vw, 46px);
  position: relative; transition: background-color var(--vd-duration-normal) var(--vd-ease);
}
.loss:hover { background: var(--vd-bg-subtle); }
.loss__n {
  font-family: var(--vd-font-mono); font-size: var(--vd-text-2xs);
  letter-spacing: .2em; color: var(--vd-text-subtle);
  display: flex; align-items: center; gap: 12px; margin-bottom: 22px;
}
.loss__n::after { content: ""; flex: 1; height: 1px; background: var(--vd-border); }
.loss:hover .loss__n { color: var(--vd-accent); }
.loss h3 { font-size: clamp(1.1875rem, 1.9vw, 1.5rem); margin-bottom: 14px; }
.loss p { color: var(--vd-text-muted); font-size: var(--vd-text-sm); line-height: 1.68; }
.loss__flag {
  margin-top: 20px; font-family: var(--vd-font-mono); font-size: var(--vd-text-xs);
  letter-spacing: .16em; text-transform: uppercase; color: var(--vd-text-subtle);
}
/* escalonamento vertical: quebra a simetria de grade */
@media (min-width: 900px) {
  .losses { border: 0; background: none; gap: 0; }
  .loss { border: 1px solid var(--vd-border); }
  .loss:nth-child(2), .loss:nth-child(4) { transform: translateY(38px); }
  .losses { margin-bottom: 38px; }
}
@media (max-width: 899px) { .losses { grid-template-columns: 1fr; } }

.turn {
  margin-top: clamp(46px, 6vw, 76px); padding-left: clamp(18px, 2.4vw, 30px);
  border-left: 2px solid var(--vd-accent);
  font-family: var(--vd-font-display); font-weight: var(--vd-weight-bold);
  font-size: clamp(1.25rem, 2.5vw, 1.875rem); line-height: 1.28; letter-spacing: -.02em;
  max-width: 44ch;
}

/* ==========================================================================
   3 · QUEM E A VOGEL — split editorial + diptico deslocado
   ========================================================================== */
.who { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 92px); align-items: start; }
@media (max-width: 980px) { .who { grid-template-columns: 1fr; } }
.who__body > * + * { margin-top: 22px; }
.who__body p { color: var(--vd-text-muted); line-height: 1.72; max-width: 54ch; }
.who__body p strong { color: var(--vd-text); font-weight: var(--vd-weight-bold); }

/* diptico dos socios */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
/* 🔴 O recorte (overflow + radius) fica no <picture>, NUNCA no <figure>.
   O overflow existe para conter o scale(1.03) do hover, e no <picture> ele
   continua fazendo esse trabalho. No <figure> ele engolia a primeira letra
   de cada linha do <figcaption> dentro do canto arredondado.
   Achado por auditoria visual em 01/set/2026: nao gera erro, nao quebra
   layout e nao aparece lendo codigo. So aparece olhando o pixel. */
.person figure { margin: 0; }
.person picture { display: block; position: relative; overflow: hidden; border-radius: var(--vd-radius-lg); background: var(--vd-bg-muted); }
.person img { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; transition: transform var(--vd-duration-slow) var(--vd-ease-out); }
.person:hover img { transform: scale(1.03); }
.person figcaption { margin-top: 15px; }
.person__name { font-family: var(--vd-font-display); font-weight: var(--vd-weight-bold); font-size: 1.0625rem; letter-spacing: -.02em; }
.person__role { font-family: var(--vd-font-mono); font-size: var(--vd-text-sm); letter-spacing: .12em; text-transform: uppercase; color: var(--vd-text-subtle); margin-top: 6px; line-height: 1.6; }
@media (min-width: 981px) { .person:nth-child(2) { transform: translateY(46px); } .pair { margin-bottom: 46px; } }
@media (max-width: 520px) { .pair { grid-template-columns: 1fr; gap: 30px; } }


/* ==========================================================================
   4 · O QUE FAZEMOS — indice tabular, denso. Formato de sumario.
   ========================================================================== */
.index { border-top: 1px solid var(--vd-border); }
.index__row {
  display: grid; grid-template-columns: 62px 1.05fr 1.5fr 152px; gap: 26px; align-items: center;
  padding: clamp(22px, 2.6vw, 32px) 0; border-bottom: 1px solid var(--vd-border);
  transition: padding-inline var(--vd-duration-normal) var(--vd-ease), background-color var(--vd-duration-normal) var(--vd-ease);
}
.index__row:hover { background: var(--vd-bg-subtle); padding-inline: 18px; }
.index__n { font-family: var(--vd-font-mono); font-size: var(--vd-text-xs); color: var(--vd-text-subtle); letter-spacing: .1em; }
.index__row:hover .index__n { color: var(--vd-accent); }
.index__t { font-family: var(--vd-font-display); font-weight: var(--vd-weight-bold); font-size: clamp(1.125rem, 1.9vw, 1.5rem); letter-spacing: -.025em; line-height: 1.2; }
.index__d { color: var(--vd-text-muted); font-size: var(--vd-text-sm); line-height: 1.6; }
.index__tag { justify-self: end; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.tag {
  font-family: var(--vd-font-mono); font-size: var(--vd-text-xs); letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--vd-radius-full); border: 1px solid var(--vd-border); color: var(--vd-text-subtle); white-space: nowrap;
}
.tag--on { border-color: color-mix(in srgb, var(--vd-accent) 42%, transparent); color: var(--vd-accent); }
@media (max-width: 900px) {
  .index__row { grid-template-columns: 44px 1fr; gap: 8px 16px; }
  .index__d { grid-column: 2; }
  .index__tag { grid-column: 2; justify-self: start; justify-content: flex-start; margin-top: 4px; }
}

/* ==========================================================================
   5 · COMO FUNCIONA CADA ENTREGA — blocos alternados com painel tecnico
   ========================================================================== */
.svc { padding-block: clamp(56px, 7vw, 96px); border-top: 1px solid var(--vd-border); scroll-margin-top: 92px; }
.svc__in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 78px); align-items: start; }
@media (max-width: 980px) { .svc__in { grid-template-columns: 1fr; } }
/* alternancia EXPLICITA: nth-of-type contaria todas as <section> da pagina
   e quebraria ao inserir qualquer secao acima. */
@media (min-width: 981px) { .svc--flip .svc__panel { order: -1; } }
.svc__ctx { font-family: var(--vd-font-mono); font-size: var(--vd-text-2xs); letter-spacing: .13em; text-transform: uppercase; color: var(--vd-text-subtle); line-height: 1.7; }
.svc h3 { margin-top: 16px; font-size: clamp(1.5rem, 3vw, 2.25rem); }
.svc__one { margin-top: 18px; font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); line-height: 1.58; color: var(--vd-text); max-width: 44ch; }
.svc__benefits { list-style: none; padding: 0; margin-top: 30px; display: grid; gap: 15px; }
.svc__benefits li { display: grid; grid-template-columns: 26px 1fr; gap: 13px; align-items: start; color: var(--vd-text-muted); font-size: var(--vd-text-sm); line-height: 1.62; }
.svc__benefits b { font-family: var(--vd-font-mono); font-size: var(--vd-text-xs); color: var(--vd-accent); letter-spacing: .1em; padding-top: 4px; font-weight: var(--vd-weight-medium); }
.svc__cta { margin-top: 32px; }

/* painel tecnico — o "card do que esta incluso" */
.panel { border: 1px solid var(--vd-border); border-radius: var(--vd-radius-lg); overflow: hidden; background: var(--vd-bg-subtle); }
.panel__h { padding: 16px 22px; border-bottom: 1px solid var(--vd-border); font-family: var(--vd-font-mono); font-size: var(--vd-text-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--vd-text-subtle); display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.panel__b { padding: 22px; }
.panel__b p { font-size: var(--vd-text-sm); line-height: 1.7; color: var(--vd-text-muted); }
.panel__b p + p { margin-top: 13px; }
.panel__b strong { color: var(--vd-text); font-weight: var(--vd-weight-bold); }
.panel__f { padding: 18px 22px; border-top: 1px solid var(--vd-border); background: var(--vd-bg); }
.panel__fk { font-family: var(--vd-font-mono); font-size: var(--vd-text-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--vd-accent); }
.panel__fv { margin-top: 9px; font-size: var(--vd-text-sm); line-height: 1.62; color: var(--vd-text); }
/* carrega frase de conteudo, nao rotulo: legivel, sem caixa alta e no piso de 16px */
.panel__warn { padding: 16px 22px; border-top: 1px solid var(--vd-border); font-size: var(--vd-text-sm); line-height: 1.6; color: var(--vd-text-muted); }

/* ==========================================================================
   6 · PADRAO DE ENTREGA — banda tecnica
   ========================================================================== */
.specs { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--vd-border); border-radius: var(--vd-radius-lg); overflow: hidden; }
.spec { padding: clamp(24px, 2.8vw, 36px); border-right: 1px solid var(--vd-border); }
.spec:last-child { border-right: 0; }
.spec__k { font-family: var(--vd-font-mono); font-size: var(--vd-text-xs); letter-spacing: .17em; text-transform: uppercase; color: var(--vd-accent); }
.spec h3 { margin-top: 15px; font-size: 1.125rem; }
.spec p { margin-top: 11px; font-size: var(--vd-text-sm); line-height: 1.66; color: var(--vd-text-muted); }
@media (max-width: 1000px) { .specs { grid-template-columns: repeat(2, 1fr); } .spec:nth-child(2) { border-right: 0; } .spec:nth-child(-n+2) { border-bottom: 1px solid var(--vd-border); } }
@media (max-width: 600px) { .specs { grid-template-columns: 1fr; } .spec { border-right: 0; border-bottom: 1px solid var(--vd-border); } .spec:last-child { border-bottom: 0; } }

/* ==========================================================================
   7 · METODO — quatro passos com fio condutor
   ========================================================================== */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; position: relative; }
.steps::before { content: ""; position: absolute; top: 19px; left: 0; right: 0; height: 1px; background: var(--vd-border); }
.step { position: relative; padding-top: 52px; }
.step::before { content: ""; position: absolute; top: 13px; left: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--vd-bg); border: 1px solid var(--vd-border-strong); }
.step--on::before { background: var(--vd-accent); border-color: var(--vd-accent); }
.step__n { font-family: var(--vd-font-mono); font-size: var(--vd-text-2xs); letter-spacing: .18em; color: var(--vd-text-subtle); }
.step h3 { margin-top: 12px; font-size: 1.1875rem; }
.step p { margin-top: 11px; font-size: var(--vd-text-sm); line-height: 1.66; color: var(--vd-text-muted); }
.step__meta { margin-top: 15px; font-family: var(--vd-font-mono); font-size: var(--vd-text-xs); letter-spacing: .11em; text-transform: uppercase; color: var(--vd-accent); }
@media (max-width: 980px) {
  .steps { grid-template-columns: 1fr; gap: 0; }
  .steps::before { top: 0; bottom: 0; left: 6px; right: auto; width: 1px; height: auto; }
  .step { padding: 0 0 34px 34px; }
  .step::before { top: 5px; }
}

/* ==========================================================================
   8 · PORTFOLIO — composicao de mockups
   ========================================================================== */
.folio { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(22px, 2.6vw, 34px); }
@media (max-width: 860px) { .folio { grid-template-columns: 1fr; } }
.shot {
  position: relative; border: 1px solid var(--vd-border); border-radius: var(--vd-radius-xl);
  overflow: hidden; background: var(--vd-bg-subtle); padding: clamp(22px, 2.6vw, 34px) clamp(22px, 2.6vw, 34px) 0;
  transition: border-color var(--vd-duration-normal) var(--vd-ease);
}
.shot:hover { border-color: color-mix(in srgb, var(--vd-accent) 45%, transparent); }
.shot__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 22px; }
.shot__name { font-family: var(--vd-font-display); font-weight: var(--vd-weight-bold); font-size: 1.0625rem; letter-spacing: -.02em; }
.shot__seg { font-family: var(--vd-font-mono); font-size: var(--vd-text-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--vd-text-subtle); text-align: right; }
/* moldura de navegador */
.shot__frame { position: relative; border-radius: var(--vd-radius-md) var(--vd-radius-md) 0 0; overflow: hidden; border: 1px solid var(--vd-border); border-bottom: 0; background: var(--vd-neutral-950); }
.shot__bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--vd-border); }
.shot__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--vd-neutral-700); }
.shot__url { margin-left: 8px; font-family: var(--vd-font-mono); font-size: var(--vd-text-xs); color: var(--vd-text-subtle); letter-spacing: .04em; }
.shot__win { height: clamp(190px, 22vw, 268px); overflow: hidden; }
.shot__win img { width: 100%; transition: transform 3.6s var(--vd-ease-out); }
.shot:hover .shot__win img { transform: translateY(calc(-100% + clamp(190px, 22vw, 268px))); }
/* celular sobreposto */
.shot__phone {
  position: absolute; right: clamp(18px, 2.4vw, 30px); bottom: 0; width: clamp(84px, 10vw, 118px);
  border-radius: 14px 14px 0 0; overflow: hidden; border: 3px solid var(--vd-neutral-800); border-bottom: 0;
  box-shadow: var(--vd-shadow-md); background: var(--vd-neutral-950);
  transition: transform var(--vd-duration-slow) var(--vd-ease-out);
}
.shot:hover .shot__phone { transform: translateY(-10px); }
.shot__phone img { width: 100%; }
@media (prefers-reduced-motion: reduce) { .shot__win img, .shot__phone { transition: none; } }

/* contadores agregados removidos em 01/set/2026 por decisao do Victor:
   a prova e o trabalho mostrado, nao o numero somado da carteira. */
.folio__foot { margin-top: clamp(40px, 5vw, 62px); display: flex; flex-wrap: wrap; gap: 26px; align-items: center; justify-content: flex-start; }

/* ==========================================================================
   9 · FAQ — acordeao nativo
   ========================================================================== */
.faq { border-top: 1px solid var(--vd-border); max-width: 900px; }
.faq details { border-bottom: 1px solid var(--vd-border); }
.faq summary {
  list-style: none; cursor: pointer; padding: 24px 46px 24px 0; position: relative;
  font-family: var(--vd-font-display); font-weight: var(--vd-weight-bold);
  font-size: clamp(1rem, 1.6vw, 1.1875rem); letter-spacing: -.02em; line-height: 1.4;
  transition: color var(--vd-duration-fast) var(--vd-ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--vd-accent); }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 13px; height: 1.5px;
  background: var(--vd-text-subtle); transform: translateY(-50%);
}
.faq summary::before {
  content: ""; position: absolute; right: 13.75px; top: 50%; width: 1.5px; height: 13px;
  background: var(--vd-text-subtle); transform: translateY(-50%);
  transition: transform var(--vd-duration-normal) var(--vd-ease), opacity var(--vd-duration-normal) var(--vd-ease);
}
.faq details[open] summary::before { transform: translateY(-50%) rotate(90deg); opacity: 0; }
.faq details[open] summary { color: var(--vd-accent); }
.faq__a { padding: 0 46px 26px 0; }
.faq__a p { color: var(--vd-text-muted); font-size: var(--vd-text-sm); line-height: 1.74; max-width: 68ch; }
.faq__a p + p { margin-top: 13px; }
.faq__a strong { color: var(--vd-text); font-weight: var(--vd-weight-bold); }
.faq__group { font-family: var(--vd-font-mono); font-size: var(--vd-text-sm); letter-spacing: .18em; text-transform: uppercase; color: var(--vd-text-subtle); padding: 34px 0 14px; }

/* ==========================================================================
   10 · CTA FINAL + RODAPE
   ========================================================================== */
.cta { background: var(--vd-accent); color: var(--vd-accent-fg); }
.cta h2 { font-size: clamp(2rem, 5.4vw, 4.25rem); letter-spacing: -.035em; max-width: 16ch; }
.cta__sub { margin-top: 24px; font-size: clamp(1rem, 1.5vw, 1.1875rem); line-height: 1.58; max-width: 52ch; color: rgba(10,10,10,.76); }
.cta__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
.cta__fine { margin-top: 34px; font-family: var(--vd-font-mono); font-size: var(--vd-text-xs); letter-spacing: .11em; text-transform: uppercase; color: rgba(10,10,10,.58); line-height: 1.9; }
.cta__eyebrow { color: rgba(10,10,10,.62); }
.cta__eyebrow::before { background: currentColor; }

.foot { border-top: 1px solid var(--vd-border); padding-block: clamp(48px, 6vw, 74px) 34px; }
.foot__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
@media (max-width: 900px) { .foot__top { grid-template-columns: 1fr 1fr; gap: 34px; } }
@media (max-width: 520px) { .foot__top { grid-template-columns: 1fr; } }
.foot__logo img { height: 30px; width: auto; }
.foot__desc { margin-top: 20px; font-size: var(--vd-text-sm); line-height: 1.68; color: var(--vd-text-muted); max-width: 34ch; }
.foot__k { font-family: var(--vd-font-mono); font-size: var(--vd-text-xs); letter-spacing: .17em; text-transform: uppercase; color: var(--vd-text-subtle); margin-bottom: 17px; }
.foot ul { list-style: none; padding: 0; display: grid; gap: 11px; }
.foot li a, .foot li span { font-size: var(--vd-text-sm); color: var(--vd-text-muted); transition: color var(--vd-duration-fast) var(--vd-ease); }
.foot li a:hover { color: var(--vd-accent); }
.foot__bot { margin-top: clamp(44px, 5vw, 64px); padding-top: 24px; border-top: 1px solid var(--vd-border); display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; }
.foot__bot p, .foot__bot a { font-family: var(--vd-font-mono); font-size: var(--vd-text-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--vd-text-subtle); }
.foot__bot a:hover { color: var(--vd-accent); }

/* ---------- REVEAL (motion nos momentos-chave, nao em tudo) ---------- */
/* 🔴 O reveal so se aplica quando o JS confirmou que esta vivo (classe .js na raiz).
   Sem esta guarda, falha de JS ou observer que nao dispara deixa a secao
   INVISIVEL, sem erro e sem aviso. Aconteceu com o portfolio na auditoria
   de 01/set/2026. Conteudo nunca depende de JS para existir. */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--vd-duration-slow) var(--vd-ease-out), transform var(--vd-duration-slow) var(--vd-ease-out); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* segunda linha do H1: o gap nomeado, em peso menor que a validacao */
.hero__h1b {
  display: block; margin-top: 22px;
  font-size: clamp(1.375rem, 2.9vw, 2.375rem);
  font-weight: var(--vd-weight-bold);
  letter-spacing: var(--vd-tracking-tight);
  line-height: 1.18; max-width: 22ch; color: var(--vd-text-muted);
}