/* ==========================================================================
   VALTREO — Folha de estilo de produção
   Fase 02 do POP Mestre v2.4. Direção visual aprovada na prévia 2.9.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tipografia auto-hospedada (SIL Open Font License — ver assets/fonts)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2-variations");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2013-2014, U+2018-201E, U+2022, U+2026, U+2192, U+2212, U+20AC;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var.woff2") format("woff2-variations");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2013-2014, U+2018-201E, U+2022, U+2026, U+2192, U+2212, U+20AC;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Cores — mantidas da direção aprovada */
  --bg:            #050914;
  --bg-elev:       #080f1d;
  --surface:       #0b1322;
  --surface-hover: #0c1628;
  --surface-panel: #0b162d;
  --line:          rgba(148, 168, 204, .16);
  --line-strong:   rgba(148, 168, 204, .3);
  --line-accent:   rgba(98, 164, 255, .34);

  --text:          #f7f9ff;
  --text-2:        #c3cee2;
  --text-muted:    #9caac3;
  --text-dim:      #8593ab;

  --blue:          #2f7bff;   /* azul elétrico da marca — acento */
  --blue-soft:     #62a4ff;   /* acento sobre fundo escuro (7.8:1) */
  --blue-cta:      #2a6ff0;   /* fundo de CTA com texto branco AA (4.54:1) */
  --blue-cta-deep: #245fe0;
  /* Hover do CTA. Aprofunda em vez de clarear: contra texto branco, o
     --blue-cta já é o azul mais claro desta família que ainda passa em AA,
     então qualquer tom mais claro reprovaria. Rende de 4.54:1 a 6.44:1. */
  --blue-cta-hover: #1f56cc;
  --green:         #62e6b2;

  /* Tipografia */
  --font-display: "Archivo", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-sans:    "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --fs-display: clamp(2.75rem, 1.7rem + 4.2vw, 5.25rem);
  --fs-h2:      clamp(2rem, 1.45rem + 2.4vw, 3.25rem);
  --fs-h3:      clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  --fs-lead:    clamp(1rem, .95rem + .3vw, 1.125rem);
  --fs-body:    1rem;
  --fs-sm:      .9375rem;
  --fs-meta:    .8125rem;
  --fs-kicker:  .6875rem;

  /* Espaço */
  --gutter:  clamp(20px, 4.5vw, 44px);
  --container: 1180px;
  --header-h: 74px;   /* fonte única: topbar, painel mobile, sticky e scroll-padding */
  --sp-section: clamp(64px, 7.5vw, 108px);
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* Forma e profundidade */
  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 26px;
  --shadow-card: 0 1px 2px rgba(2, 6, 14, .5), 0 18px 44px -18px rgba(2, 6, 14, .8);
  --shadow-panel: 0 2px 6px rgba(2, 6, 14, .45), 0 34px 80px -32px rgba(2, 6, 14, .9);
  --shadow-cta: 0 4px 10px rgba(20, 62, 150, .3), 0 16px 34px -14px rgba(20, 62, 150, .55);

  /* Movimento */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease:     cubic-bezier(.4, 0, .2, 1);
  --t-fast:   140ms;
  --t-base:   220ms;
  --t-slow:   480ms;
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 22px);
  -webkit-text-size-adjust: 100%;
  /* Reserva a calha da barra de rolagem: o layout não desloca quando o menu
     mobile trava o scroll nem quando uma página é mais curta que a viewport. */
  scrollbar-gutter: stable;
  overflow-x: clip;
}

body {
  margin: 0;
  background:
    radial-gradient(circle at 14% 0%, rgba(47, 123, 255, .075), transparent 30rem),
    var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* `clip` em vez de `hidden`: contém qualquer estouro lateral sem transformar
     o body em contêiner de rolagem — o que quebraria o header sticky. */
  overflow-x: clip;
}
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}

/* Trava de scroll do menu mobile — precisa valer no html também (iOS). */
html.is-locked, body.is-locked { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
  /* Rede de segurança contra estouro lateral com nomes longos em 320px. */
  overflow-wrap: break-word;
}
p { margin: 0 0 var(--sp-4); text-wrap: pretty; }

h1 {
  font-size: var(--fs-display);
  line-height: .98;
  letter-spacing: -.04em;
  font-weight: 760;
  max-width: 16ch;
}
h2 {
  font-size: var(--fs-h2);
  line-height: 1.05;
  letter-spacing: -.035em;
  font-weight: 720;
}
h3 {
  font-size: var(--fs-h3);
  line-height: 1.25;
  letter-spacing: -.018em;
  font-weight: 680;
}

.blue { color: var(--blue-soft); }

.kicker, .eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-kicker);
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--blue-soft);
  margin-bottom: var(--sp-4);
}

/* Superfícies do navegador tematizadas */
::selection { background: rgba(47, 123, 255, .34); color: #fff; }
:root { scrollbar-color: #22314e var(--bg); caret-color: var(--blue-soft); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: #1e2c46;
  border: 3px solid var(--bg);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: #2a3c5d; }

:focus-visible {
  outline: 2px solid var(--blue-soft);
  outline-offset: 3px;
  border-radius: 4px;
}
/* O anel de foco acompanha a forma real do alvo. */
.btn:focus-visible, .nav-cta:focus-visible { border-radius: 12px; }
.card:focus-visible, .project:focus-visible, .nav-toggle:focus-visible { border-radius: var(--r-md); }
.pillars li:focus-visible { border-radius: 999px; }
.wa:focus-visible { border-radius: 50%; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: 200;
  padding: 12px 18px;
  border-radius: var(--r-sm);
  background: #fff;
  color: #09101d;
  font-size: var(--fs-meta);
  font-weight: 700;
  transition: top var(--t-base) var(--ease-out);
}
.skip-link:focus,
.skip-link:focus-visible { top: var(--sp-4); }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.wrap {
  width: min(var(--container), 100% - (var(--gutter) * 2));
  margin-inline: auto;
}

.section {
  padding-block: var(--sp-section);
  border-top: 1px solid rgba(255, 255, 255, .05);
}
/* A costura da Hero já resolve a transição — sem fio duplicado logo abaixo. */
.hero + .section { border-top: 0; }

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .62fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: end;
  margin-bottom: clamp(32px, 4vw, 52px);
}
.section-head h2 { margin-bottom: 0; }
.section-head > p:last-child {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.7;
  margin: 0;
  max-width: 46ch;
}

/* Quebras de linha aprovadas: só onde há largura para elas */
.br-lg { display: none; }
@media (min-width: 900px) { .br-lg { display: inline; } }

/* --------------------------------------------------------------------------
   5. Botões
   -------------------------------------------------------------------------- */
.btn, .nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 12px;
  font-family: var(--font-display);
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: -.01em;
  cursor: pointer;
  transition:
    transform var(--t-fast) var(--ease-out),
    background-color var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease),
    box-shadow var(--t-base) var(--ease);
}
.btn {
  min-height: 46px;
  padding: 13px 20px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, .02);
}
.nav-cta {
  min-height: 40px;
  padding: 11px 16px;
  background: linear-gradient(135deg, var(--blue-cta), var(--blue-cta-deep));
  color: #fff;
  border: 1px solid transparent;
  box-shadow: 0 2px 6px rgba(20, 62, 150, .3), 0 10px 22px -12px rgba(20, 62, 150, .55);
}
.btn.primary {
  border-color: transparent;
  background: linear-gradient(135deg, var(--blue-cta), var(--blue-cta-deep));
  color: #fff;
  box-shadow: var(--shadow-cta);
}
.btn .arrow, .project-link .arrow {
  transition: transform var(--t-base) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover { border-color: var(--line-accent); background: rgba(98, 164, 255, .08); transform: translateY(-1px); }
  .btn.primary:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, var(--blue-cta), var(--blue-cta-hover));
    box-shadow: 0 6px 14px rgba(20, 62, 150, .34), 0 22px 44px -16px rgba(20, 62, 150, .6);
  }
  .nav-cta:hover { background: linear-gradient(135deg, var(--blue-cta), var(--blue-cta-hover)); transform: translateY(-1px); }
  .btn:hover .arrow { transform: translateX(3px); }
}
.btn:active, .nav-cta:active { transform: scale(.98); }

/* --------------------------------------------------------------------------
   6. Header e navegação
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  background: rgba(5, 9, 20, .82);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  transition: background-color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
/* Sem suporte a backdrop-filter, o header vira opaco em vez de translúcido. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: rgba(5, 9, 20, .97); }
}
.site-header.is-scrolled {
  background: rgba(5, 9, 20, .94);
  border-bottom-color: var(--line);
}

.topbar {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.5vw, 28px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: .01em;
  font-size: 1.25rem;
  line-height: 1;
}
.brand-mark {
  width: 36px; height: 36px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 9px;
  background: #070b14;
  border: 1px solid rgba(255, 255, 255, .055);
}
.brand-mark img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .9;
  filter: brightness(.82) saturate(.92) contrast(.96);
}

.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 24px);
  font-size: var(--fs-meta);
}
.nav a {
  color: var(--text-2);
  padding: 6px 0;
  position: relative;
  transition: color var(--t-base) var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--blue-soft);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .nav a:hover { color: #fff; }
  .nav a:hover::after { transform: scaleX(1); }
}
/* Página atual (estático) e seção em leitura (scroll spy, via JS). */
.nav a[aria-current="page"],
.nav a.is-active { color: #fff; }
.nav a[aria-current="page"]::after,
.nav a.is-active::after { transform: scaleX(1); }

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color var(--t-base) var(--ease), background-color var(--t-base) var(--ease);
}
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }

@media (max-width: 1040px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    /* Absoluto ancorado no header (que é sticky no topo) em vez de fixed:
       não depende do contexto de posicionamento criado pelo backdrop-filter. */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--sp-3) var(--gutter) var(--sp-6);
    background: var(--bg-elev);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-panel);
    max-height: calc(100svh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    font-size: 1rem;
    opacity: 0;
    transform: translateY(-10px);
    visibility: hidden;
    transition:
      opacity var(--t-base) var(--ease-out),
      transform var(--t-base) var(--ease-out),
      visibility 0s linear var(--t-base);
  }
  .nav.is-open {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition-delay: 0s;
  }
  .nav a {
    padding: 15px 2px;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    color: var(--text);
  }
  .nav a::after { display: none; }
  .nav .nav-cta {
    margin-top: var(--sp-5);
    min-height: 50px;
    font-size: var(--fs-sm);
  }
}

/* --------------------------------------------------------------------------
   7. Hero — arte oficial aprovada, sempre integral
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: #02060d;
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.hero-art {
  /* Sem max-height: a altura vem da própria proporção da arte, então a
     imagem sempre encosta nas duas extremidades da viewport e nada é
     cortado nem sobra faixa lateral. */
  width: 100%;
  height: auto;
  aspect-ratio: 1672 / 941;
  object-fit: cover;
}
/* Costura discreta com a primeira seção, longe da assinatura da arte */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: clamp(20px, 3vw, 40px);
  background: linear-gradient(to bottom, rgba(5, 9, 20, 0), var(--bg));
  pointer-events: none;
}
@media (max-width: 900px) {
  .hero { padding-block: clamp(10px, 3vw, 24px); }
}

/* --------------------------------------------------------------------------
   8. Serviços
   -------------------------------------------------------------------------- */
.cards4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
}
.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
  transition:
    border-color var(--t-base) var(--ease),
    background-color var(--t-base) var(--ease),
    transform var(--t-base) var(--ease-out);
}
.card .icon {
  font-family: var(--font-display);
  font-size: var(--fs-kicker);
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--blue-soft);
  margin-bottom: clamp(28px, 5vw, 44px);
  font-variant-numeric: tabular-nums;
}
.card h3 { margin-bottom: var(--sp-2); }
.card p {
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--text-muted);
  margin: 0;
}
@media (hover: hover) and (pointer: fine) {
  .card:hover {
    border-color: var(--line-accent);
    background: var(--surface-hover);
    transform: translateY(-2px);
  }
}

/* --------------------------------------------------------------------------
   9. Projetos — grid escalável, um único componente nas duas páginas
   -------------------------------------------------------------------------- */
/* auto-fit + minmax: 1 coluna no celular, 2 no tablet e até 3 no desktop.
   Colunas vazias colapsam, então novos projetos entram no grid sem tocar
   no CSS e sem redesenhar a página.

   Ponto-chave: o auto-fit calcula quantas colunas cabem pelo TETO da faixa,
   não pelo piso. Por isso o teto é uma variável — deixá-lo fixo em 380px
   fazia o tablet cair para 1 card por linha e o notebook de 1280px perder a
   terceira coluna por 3px. Cada faixa abaixo define o teto que garante a
   contagem correta, e o card só chega aos 380px aprovados quando há espaço. */
.projects-grid {
  --grid-gap: var(--sp-4);
  --card-max: 380px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), var(--card-max)));
  justify-content: center;
  gap: var(--grid-gap);
}

/* Celular: coluna única ocupando a largura toda, em vez de um card de
   380px isolado no meio da tela. */
@media (max-width: 700px) {
  .projects-grid { grid-template-columns: 1fr; }
}

/* Tablet (retrato e paisagem): sempre 2 por linha — o teto vira metade do
   contêiner. O piso .02px fecha o vão de 1px em viewports fracionários
   (700,5px), onde "max-width:700px" e "min-width:701px" falham juntos. */
@media (min-width: 700.02px) and (max-width: 1040px) {
  .projects-grid { --card-max: min(380px, calc((100% - var(--grid-gap)) / 2)); }
}

/* Desktop: a partir do ponto em que três cards cabem sem ficarem apertados,
   o teto vira um terço do contêiner, limitado aos 380px aprovados. */
@media (min-width: 1120px) {
  .projects-grid { --card-max: min(380px, calc((100% - var(--grid-gap) * 2) / 3)); }
}

.project {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: #0a1220;
  box-shadow: var(--shadow-card);
  transition:
    border-color var(--t-base) var(--ease),
    transform var(--t-base) var(--ease-out);
}

.project-figure { background: #070a10; }
.project-bar {
  height: 26px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  background: rgba(255, 255, 255, .018);
}
.project-bar i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #2c3a52;
  flex: 0 0 auto;
}
.project-bar small {
  margin-left: 8px;
  font-size: 11px;
  color: #7f8da4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.project-shot-wrap {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.project-shot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  background: #070a10;
  transition: transform 620ms var(--ease-out);
}

.project-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 20px 22px;
}
.project-body h3 {
  font-size: 1.0625rem;
  line-height: 1.3;
  margin-bottom: 4px;
}
.project .type {
  font-family: var(--font-display);
  font-size: var(--fs-kicker);
  text-transform: uppercase;
  letter-spacing: .13em;
  font-weight: 700;
  color: var(--blue-soft);
  margin: 0;
}
.project-body p:not(.type) {
  color: var(--text-muted);
  font-size: .875rem;
  line-height: 1.6;
  margin: 10px 0 16px;
}
.project-link {
  position: relative;
  font-family: var(--font-display);
  font-size: var(--fs-meta);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  align-self: flex-start;
  color: #fff;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
/* No toque, o link tem só ~24px de altura. A área de toque é ampliada por um
   pseudo-elemento, para não afastar o traço do texto nem mudar o visual. */
@media (pointer: coarse) {
  .project-link::before {
    content: "";
    position: absolute;
    inset: -13px -10px;
  }
}

@media (hover: hover) and (pointer: fine) {
  .project:hover {
    border-color: var(--line-accent);
    transform: translateY(-3px);
  }
  .project:hover .project-shot { transform: scale(1.03); }
  .project-link:hover { color: var(--blue-soft); border-bottom-color: var(--line-accent); }
  .project-link:hover .arrow { transform: translateX(3px); }
}

.projects-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-top: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(10, 18, 34, .55);
}
.projects-note p {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.6;
  max-width: 62ch;
}
.projects-note .btn { flex: 0 0 auto; }

/* Hero da página de projetos */
.page-hero {
  padding-block: clamp(56px, 8vw, 104px) clamp(40px, 5vw, 60px);
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.page-hero h1 { margin-bottom: var(--sp-5); }
.page-hero p:not(.eyebrow) {
  max-width: 60ch;
  color: var(--text-2);
  line-height: 1.7;
  font-size: var(--fs-lead);
  margin: 0;
}

/* --------------------------------------------------------------------------
   10. Estrutura digital
   -------------------------------------------------------------------------- */
.outcome-section { position: relative; overflow: hidden; }
.outcome-section::before {
  content: "";
  position: absolute;
  left: 50%; top: 44%;
  width: min(560px, 80vw); height: 260px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(47, 123, 255, .06), transparent 68%);
  pointer-events: none;
}
.outcome-section > .wrap { position: relative; z-index: 1; }
.outcome-head h2 { max-width: 20ch; }

.outcome-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: rgba(7, 14, 27, .35);
}
.outcome-item {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: var(--sp-5);
  padding: clamp(26px, 3.2vw, 36px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(10, 18, 34, .68), rgba(7, 13, 25, .52));
  transition: background-color var(--t-base) var(--ease);
}
.outcome-num, .why-num {
  font-family: var(--font-display);
  font-size: var(--fs-kicker);
  letter-spacing: .18em;
  font-weight: 700;
  color: var(--blue-soft);
  font-variant-numeric: tabular-nums;
  padding-top: 5px;
}
.outcome-item h3 { margin-bottom: var(--sp-2); }
.outcome-item div p {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0;
  max-width: 46ch;
}
@media (hover: hover) and (pointer: fine) {
  .outcome-item:hover { background: linear-gradient(145deg, rgba(13, 25, 47, .85), rgba(7, 13, 25, .6)); }
}

/* --------------------------------------------------------------------------
   11. Por que escolher a Valtreo
   -------------------------------------------------------------------------- */
.why-choice {
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(0, 1.4fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
.why-intro { position: sticky; top: calc(var(--header-h) + 36px); }
.why-intro h2 {
  font-size: clamp(2.125rem, 1.5rem + 2.4vw, 3.5rem);
  margin-bottom: var(--sp-5);
  max-width: 16ch;
}
.why-intro p:not(.kicker) {
  font-size: var(--fs-sm);
  line-height: 1.75;
  color: var(--text-muted);
  max-width: 48ch;
  margin: 0;
}
.why-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.why-item { padding-block: clamp(26px, 3vw, 34px); }
.why-item:nth-child(odd) { padding-right: clamp(20px, 3vw, 38px); border-right: 1px solid var(--line); }
.why-item:nth-child(even) { padding-left: clamp(20px, 3vw, 38px); }
.why-item:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
.why-num { padding-top: 0; margin-bottom: clamp(26px, 4vw, 40px); }
.why-item h3 { margin-bottom: var(--sp-2); }
.why-item p:not(.why-num) {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0;
  max-width: 42ch;
}

/* --------------------------------------------------------------------------
   12. Valtreo Verified
   -------------------------------------------------------------------------- */
.verified {
  border-radius: var(--r-xl);
  border: 1px solid rgba(98, 164, 255, .22);
  background:
    radial-gradient(circle at 90% 20%, rgba(47, 123, 255, .18), transparent 30rem),
    linear-gradient(145deg, var(--surface-panel), #07101f);
  padding: clamp(28px, 4vw, 52px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, auto);
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
  box-shadow: var(--shadow-panel);
}
.verified-mark {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.verified-mark .eyebrow { margin-bottom: 2px; }
.verified-mark strong {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: .08em;
  font-weight: 750;
}
.shield {
  width: 56px; height: 56px;
  flex: 0 0 auto;
  border: 1px solid var(--line-accent);
  border-radius: 17px;
  display: grid;
  place-items: center;
  background: rgba(47, 123, 255, .08);
}
.shield svg { width: 28px; height: 28px; }
.verified h2 { margin-bottom: var(--sp-3); }
.verified > div > p {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  max-width: 62ch;
  line-height: 1.7;
  margin-bottom: var(--sp-5);
}
.pillars {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  list-style: none;
  margin: 0; padding: 0;
}
.pillars li {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: var(--fs-meta);
  color: var(--text-2);
  background: rgba(255, 255, 255, .02);
}
.verified-side {
  font-size: var(--fs-meta);
  color: var(--text-muted);
  max-width: 26ch;
  line-height: 1.7;
  margin: 0;
  padding-left: clamp(0px, 2vw, 28px);
  border-left: 1px solid var(--line);
}

/* --------------------------------------------------------------------------
   13. FAQ
   -------------------------------------------------------------------------- */
.faq-wrap {
  display: grid;
  grid-template-columns: minmax(260px, .78fr) minmax(0, 1.22fr);
  gap: clamp(32px, 5vw, 64px);
}
.faq-intro p:not(.kicker) {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.7;
  max-width: 40ch;
  margin: 0;
}
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 4px;
  min-height: 56px;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 640;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  transition: color var(--t-base) var(--ease);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "";
  flex: 0 0 auto;
  width: 11px; height: 11px;
  background:
    linear-gradient(var(--blue-soft), var(--blue-soft)) center / 11px 1.5px no-repeat,
    linear-gradient(var(--blue-soft), var(--blue-soft)) center / 1.5px 11px no-repeat;
  transition: transform var(--t-base) var(--ease-out);
}
.faq-list details[open] summary::after { transform: rotate(135deg); }
.faq-list details[open] summary { color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .faq-list summary:hover { color: #fff; }
}
.faq-list details p {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.75;
  padding: 0 4px 22px;
  margin: 0;
  max-width: 68ch;
}
.faq-list details[open] p { animation: faq-in 320ms var(--ease-out) both; }
@keyframes faq-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   14. CTA final
   -------------------------------------------------------------------------- */
.cta { padding-block: var(--sp-section) clamp(72px, 9vw, 112px); }
.cta-box {
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line);
  padding: clamp(32px, 4.5vw, 60px);
  position: relative;
  background:
    radial-gradient(circle at 80% 20%, rgba(47, 123, 255, .23), transparent 22rem),
    linear-gradient(135deg, #101d38, #07101d);
  box-shadow: var(--shadow-panel);
}
.cta-box h2 { max-width: 18ch; }
.cta-box p:not(.kicker) {
  color: var(--text-2);
  max-width: 56ch;
  line-height: 1.7;
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-6);
}
.actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.v-bg {
  position: absolute;
  right: 3%; bottom: -22px;
  width: clamp(120px, 18vw, 210px);
  height: auto;
  opacity: .055;
  pointer-events: none;
  filter: brightness(.68) saturate(.82) contrast(.94);
  mix-blend-mode: screen;
}

/* --------------------------------------------------------------------------
   15. Rodapé
   -------------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid rgba(255, 255, 255, .06);
  padding-block: var(--sp-7) clamp(72px, 9vw, 96px);
}
.footer {
  display: grid;
  grid-template-columns: 1.2fr 2fr 1.1fr;
  gap: var(--sp-6);
  align-items: start;
}
.footer-about p {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-meta);
  color: var(--text-dim);
  max-width: 30ch;
}
.footer-links, .footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--sp-5);
  font-size: var(--fs-meta);
}
.footer-social { justify-content: flex-end; }
.footer-links a, .footer-social a {
  color: var(--text-dim);
  padding: 10px 0;
  transition: color var(--t-base) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .footer-links a:hover, .footer-social a:hover { color: #fff; }
}
.copyright {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, .05);
  font-size: var(--fs-meta);
  color: var(--text-dim);
}

/* --------------------------------------------------------------------------
   16. WhatsApp flutuante
   -------------------------------------------------------------------------- */
.wa {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 80;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #1ea855;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .35), 0 18px 40px -14px rgba(0, 0, 0, .75);
  transition:
    transform var(--t-base) var(--ease-out),
    background-color var(--t-base) var(--ease),
    opacity var(--t-base) var(--ease),
    visibility 0s linear var(--t-base);
}
/* Com o menu mobile aberto o botão sai de cena: ele já está inert, então não
   deve continuar parecendo clicável por cima do painel. */
body.is-locked .wa {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
}
.wa svg { width: 28px; height: 28px; fill: #fff; }
@media (hover: hover) and (pointer: fine) {
  .wa:hover { transform: translateY(-3px); background: #21c063; }
}
.wa:active { transform: scale(.96); }

/* --------------------------------------------------------------------------
   17. Entrada de seções — um único gesto, discreto
   -------------------------------------------------------------------------- */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  will-change: opacity, transform;
}
.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity 560ms var(--ease-out),
    transform 560ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 60ms);
  will-change: auto;
}

/* --------------------------------------------------------------------------
   18. Responsivo
   -------------------------------------------------------------------------- */
@media (max-width: 1040px) {
  .cards4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .why-choice { grid-template-columns: 1fr; gap: var(--sp-7); }
  .why-intro { position: static; }
  .verified { grid-template-columns: 1fr; }
  .verified-side {
    padding-left: 0;
    padding-top: var(--sp-5);
    border-left: 0;
    border-top: 1px solid var(--line);
    max-width: 52ch;
  }
  .faq-wrap { grid-template-columns: 1fr; }
  .footer { grid-template-columns: 1fr 1fr; }
  .footer-about { grid-column: 1 / -1; }
  .footer-social { justify-content: flex-start; }
}

@media (max-width: 760px) {
  .section-head { grid-template-columns: 1fr; align-items: start; gap: var(--sp-4); }
  .outcome-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr; }
  .why-item:nth-child(odd) { padding-right: 0; border-right: 0; }
  .why-item:nth-child(even) { padding-left: 0; }
  .why-item:not(:last-child) { border-bottom: 1px solid var(--line); }
  .why-num { margin-bottom: var(--sp-5); }
  .projects-note { flex-direction: column; align-items: flex-start; }
  .projects-note .btn { width: 100%; }
}

@media (max-width: 560px) {
  .cards4 { grid-template-columns: 1fr; }
  .card { padding: var(--sp-5); }
  .card .icon { margin-bottom: var(--sp-6); }
  .outcome-item { grid-template-columns: 42px minmax(0, 1fr); gap: var(--sp-3); }
  .footer { grid-template-columns: 1fr; }
  .wa { width: 54px; height: 54px; }
}

/* --------------------------------------------------------------------------
   19. Movimento reduzido
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .btn:active, .nav-cta:active, .wa:active { transform: none; }
  /* Hover fica só em cor/borda: nada se desloca nem amplia. */
  .card:hover, .project:hover, .btn:hover, .btn.primary:hover,
  .nav-cta:hover, .wa:hover { transform: none; }
  .project:hover .project-shot { transform: none; }
  .btn:hover .arrow, .project-link:hover .arrow { transform: none; }
}