/* ============================================================
   HAAS CONSULTORIA EMPRESARIAL, Design System

   Paleta: preto, branco e cinza. Nada mais.
   A profundidade vem de vidro (translucidez + desfoque) e de
   gradientes de cinza, nunca de cor.

   Tipografia: o wordmark é uma serifada de alto contraste 
   o display do site fala a mesma língua (Bodoni Moda), e a
   Inter carrega tudo que é estrutural. Assim o logo é nativo.

   00 Tokens · 01 Reset · 02 Tipografia · 03 Layout · 04 Vidro
   05 Ações · 06 Header · 07 Hero · 08 Superfícies
   09 Blocos · 10 Numerais · 11 Serviços · 12 Formulário
   13 Rodapé · 14 Movimento
   ============================================================ */

/* ===== 00 · TOKENS ========================================= */
:root {
  --black:  #050505;
  --surf-1: #0c0c0c;
  --surf-2: #121212;
  --white:  #ffffff;

  --txt:   #f4f4f4;
  --txt-2: #a6a6a6;
  --txt-3: #6d6d6d;

  --line:   rgba(255, 255, 255, 0.10);
  --line-2: rgba(255, 255, 255, 0.20);

  /* Vidro líquido, o material vem de quatro camadas somadas:
     desfoque saturado do fundo, refração nas bordas, espessura
     (luz no topo / sombra embaixo) e brilho especular. */
  --glass:      linear-gradient(140deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.06) 42%, rgba(255,255,255,0.025) 100%);
  --glass-hi:   linear-gradient(140deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.10) 42%, rgba(255,255,255,0.05) 100%);
  --glass-brd:  rgba(255, 255, 255, 0.18);
  --glass-blur: blur(30px) saturate(185%) brightness(1.06);

  /* Espessura + projeção, numa pilha só */
  --glass-cast:
    0 6px 24px rgba(0, 0, 0, 0.38),
    0 28px 72px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    inset 0 0 32px rgba(255, 255, 255, 0.05);

  --glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.34);

  /* Cinza em degradê, o único "colorido" do sistema */
  --grad-txt:  linear-gradient(176deg, #ffffff 2%, #d9d9d9 52%, #8f8f8f 98%);
  --grad-surf: linear-gradient(158deg, #1b1b1b 0%, #0a0a0a 78%);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --serif: "Bodoni Moda", "Times New Roman", Georgia, serif;

  --t-xs:  0.6875rem;
  --t-sm:  0.8125rem;
  --t-md:  0.9375rem;
  --t-lg:  clamp(1rem, 0.3vw + 0.95rem, 1.1875rem);
  --t-xl:  clamp(1.375rem, 1vw + 1.1rem, 1.875rem);
  --t-2xl: clamp(1.875rem, 2.2vw + 1.2rem, 3rem);
  --t-3xl: clamp(2.375rem, 3.6vw + 1.3rem, 4rem);
  --t-4xl: clamp(2.875rem, 6.4vw + 1rem, 6.25rem);

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --s9: 96px; --s10: 128px; --s11: 168px;
  --section-y: clamp(var(--s8), 8vw, var(--s10));

  /* Raios generosos: quanto maior a curva, mais a peça lê como
     material moldado e menos como caixa. */
  --r-card: 30px;
  --r-md:   20px;
  --r-pill: 999px;

  --measure: 1300px;
  --edge: clamp(18px, 4vw, 52px);
  --gutter: clamp(16px, 2vw, 28px);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.45s;
}

/* ===== 01 · RESET ========================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--black);
  color: var(--txt);
  font-family: var(--font);
  font-size: var(--t-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
svg { display: block; }
a { color: inherit; text-decoration: none; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
::selection { background: var(--white); color: var(--black); }

/* ===== 02 · TIPOGRAFIA ===================================== */
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.06; letter-spacing: -0.03em; }

/* Voz de display: serifada de alto contraste, ecoando o wordmark.
   `font-optical-sizing` afina as hastes conforme o corpo cresce 
   é o que faz a Bodoni parecer desenhada para aquele tamanho. */
.serif {
  font-family: var(--serif);
  font-weight: 400;
  font-optical-sizing: auto;
  letter-spacing: -0.015em;
  line-height: 1.02;
}

.serif em { font-style: italic; }

.t-4xl { font-size: var(--t-4xl); }
.t-3xl { font-size: var(--t-3xl); }
.t-2xl { font-size: var(--t-2xl); }
.t-xl  { font-size: var(--t-xl); line-height: 1.16; }

/* Branco → cinza. Um momento por página, na headline principal 
   repetido em todo número e título vira efeito, não intenção. */
.grad {
  background: var(--grad-txt);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Palavras da headline sobem de dentro de uma máscara.
   A máscara (`overflow: hidden`) já esconde o estado inicial 
   nada de esconder por CSS, senão uma falha de JS apagaria a
   headline de vez. */
.word { display: inline-block; overflow: hidden; vertical-align: bottom; }
.word__in { display: inline-block; will-change: transform; }

/* O gradiente precisa morar na própria palavra: um filho
   transformado ganha camada de composição e não recebe o
   background recortado do pai, era isso que sumia com o texto. */
.grad .word__in {
  background: var(--grad-txt);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.surface-light .grad .word__in {
  background: linear-gradient(176deg, #050505 4%, #3d3d3d 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

p { margin: 0; }
.prose > * + * { margin-top: 0.9em; }

.lede { font-size: var(--t-lg); line-height: 1.6; color: var(--txt-2); max-width: 54ch; }
.muted { color: var(--txt-2); }

/* Rótulo sem adorno: o traço antes virava ruído repetido
   página afora. Sobrou a caixa-alta espaçada, e usada pouco. */
.label {
  display: inline-block;
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--txt-3);
}

.label--light { color: var(--txt-2); }

/* ===== 03 · LAYOUT ========================================= */
.container {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--edge);
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(var(--s7), 6vw, var(--s9)); }

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
}

.col-12 { grid-column: 1 / -1; }
.col-8 { grid-column: span 8; }
.col-7 { grid-column: span 7; }
.col-6 { grid-column: span 6; }
.col-5 { grid-column: span 5; }
.col-4 { grid-column: span 4; }

/* Ancoradas à direita: início e fim numa propriedade só 
   `span N` + `grid-column-start` colapsaria o bloco. */
.col-end-5 { grid-column: 8 / -1; }
.col-end-4 { grid-column: 9 / -1; }

@media (max-width: 899px) {
  .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .col-8, .col-7, .col-6, .col-5, .col-4,
  .col-end-5, .col-end-4 { grid-column: 1 / -1; }
}

.section-head { margin-bottom: clamp(var(--s7), 5vw, var(--s9)); }
.section-head h2 { max-width: 17ch; }

/* O respiro só existe quando há mesmo um rótulo acima 
   senão sobra um vão órfão onde o rótulo foi removido. */
.section-head .label + h2,
.label + h2 { margin-top: var(--s5); }

/* ===== 04 · VIDRO ========================================== */
/* Base: fundo desfocado e saturado, borda clara e a pilha de
   sombras que dá espessura à peça. */
.glass {
  position: relative;
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--glass-cast);
  border-radius: var(--r-card);
  isolation: isolate;
  overflow: hidden;
}

/* Brilho especular: a luz principal entra pelo canto superior
   esquerdo e volta, fraca, pelo inferior direito. É o que faz
   a peça parecer curva em vez de um retângulo fosco. */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(86% 62% at 10% -12%, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0) 62%),
    radial-gradient(64% 44% at 104% 108%, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 60%);
}

/* Refração: a lente desloca o fundo só perto das bordas, como
   vidro de verdade. Camada isolada de propósito, se o
   navegador não suportar `backdrop-filter: url()`, some sozinha
   sem levar junto o desfoque da base. */
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: radial-gradient(118% 118% at 50% 50%, transparent 52%, #000 94%);
  mask-image: radial-gradient(118% 118% at 50% 50%, transparent 52%, #000 94%);
}

@supports (backdrop-filter: url("#liquid-glass")) {
  .glass::after {
    backdrop-filter: url("#liquid-glass");
    -webkit-backdrop-filter: url("#liquid-glass");
  }

  /* Refração plena: o deslocamento entra na própria cadeia da
     base, então distorce a PÁGINA atrás, não só o fundo do vidro.
     Como `.glass` cria backdrop root, é a única forma de chegar
     lá, em troca, se o navegador mentir sobre o suporte, esta
     peça perde o desfoque. Por isso só no card do hero. */
  .glass--lens {
    backdrop-filter: blur(26px) saturate(185%) brightness(1.05) url("#liquid-glass");
    -webkit-backdrop-filter: blur(26px) saturate(185%) brightness(1.05) url("#liquid-glass");
  }
}

.glass > * { position: relative; z-index: 1; }

.glass--hover { transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.glass--hover:hover { background: var(--glass-hi); border-color: var(--line-2); }

/* Definições do filtro ficam fora de tela */
.glass-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ===== 05 · AÇÕES ========================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s4);
  padding: 0.5rem 0.5rem 0.5rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.btn__arrow {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.16);
  flex-shrink: 0;
  transition: transform var(--dur) var(--ease);
}

.btn__arrow svg { width: 14px; height: 14px; }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* Primário: branco sólido sobre preto */
.btn--solid {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
  box-shadow: 0 12px 40px rgba(255, 255, 255, 0.14);
}

.btn--solid:hover { box-shadow: 0 16px 52px rgba(255, 255, 255, 0.24); }

/* Secundário: vidro */
.btn--glass {
  position: relative;
  padding: 0.8rem 1.5rem;
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-color: var(--glass-brd);
  color: var(--txt);
  box-shadow:
    0 4px 18px rgba(0, 0, 0, 0.32),
    var(--glass-edge),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.btn--glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(80% 120% at 14% -30%, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 64%);
}

.btn--glass:hover { background: var(--glass-hi); border-color: var(--line-2); }

/* Sobre superfície branca, o botão inverte */
.on-light .btn--solid {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
}

.on-light .btn--solid .btn__arrow { background: rgba(255, 255, 255, 0.16); }

.btn--block { width: 100%; justify-content: space-between; }

.link {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--txt);
  border-bottom: 1px solid var(--line-2);
  padding-bottom: var(--s2);
  transition: gap var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.link:hover { gap: var(--s4); border-bottom-color: var(--white); }

/* ===== 06 · HEADER ========================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(5, 5, 5, 0.6);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}

.site-header.is-scrolled { border-bottom-color: var(--line); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
  padding-block: var(--s4);
}

.brand img { height: 32px; width: auto; }
@media (max-width: 899px) { .brand img { height: 25px; } }

.site-nav { display: flex; align-items: center; gap: var(--s4); }

/* Nav em pílula de vidro */
.nav-links {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s1);
  padding: var(--s2);
  border-radius: var(--r-pill);
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.34),
    var(--glass-edge),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}

.nav-links::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(70% 140% at 12% -40%, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0) 62%);
}

/* Refração plena na pílula: é o único lugar onde há conteúdo
   passando por trás enquanto se rola, vidro só lê como vidro
   quando tem algo atrás para entortar. */
@supports (backdrop-filter: url("#liquid-glass")) {
  .nav-links {
    backdrop-filter: blur(26px) saturate(185%) brightness(1.05) url("#liquid-glass");
    -webkit-backdrop-filter: blur(26px) saturate(185%) brightness(1.05) url("#liquid-glass");
  }
}


.nav-link {
  padding: 0.5rem 1.05rem;
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--txt-2);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.nav-link:hover { color: var(--txt); }

/* A cápsula do item ativo é vidro um degrau acima da pílula */
.nav-link.is-active {
  color: var(--white);
  background: linear-gradient(180deg, rgba(255,255,255,0.20), rgba(255,255,255,0.08));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.38), 0 2px 10px rgba(0,0,0,0.26);
}

.nav-cta { display: flex; align-items: center; gap: var(--s3); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  place-items: center;
  border-radius: 50%;
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.32), var(--glass-edge);
  cursor: pointer;
}

.nav-toggle svg { width: 18px; height: 18px; }

@media (max-width: 1049px) {
  .nav-toggle { display: grid; position: relative; z-index: 2; }
  .brand { position: relative; z-index: 2; }
  .nav-cta .btn { display: none; }

  .nav-links {
    position: fixed;
    inset: 0;
    z-index: 1;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    padding: 0 var(--edge);
    background: rgba(5, 5, 5, 0.94);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s var(--ease), visibility 0.35s;
  }

  .nav-links.is-open { opacity: 1; visibility: visible; }
  .nav-links li { width: 100%; }

  .nav-links .nav-link {
    display: block;
    padding: var(--s4) 0;
    border-radius: 0;
    border-bottom: 1px solid var(--line);
    font-family: var(--serif);
    font-size: clamp(1.875rem, 8vw, 2.75rem);
    font-weight: 400;
    letter-spacing: -0.015em;
    color: var(--txt);
  }

  .nav-links .nav-link.is-active { background: transparent; color: var(--white); }
}

/* ===== 07 · HERO =========================================== */
.hero {
  position: relative;
  padding-block: clamp(var(--s8), 9vw, var(--s10));
  overflow: hidden;
  isolation: isolate;
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -3;
  filter: grayscale(1) contrast(1.2) brightness(0.85);
}

.hero__veil {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(180deg, rgba(5,5,5,0.88) 0%, rgba(5,5,5,0.72) 40%, rgba(5,5,5,0.97) 100%),
    radial-gradient(120% 78% at 50% 0%, rgba(5,5,5,0.18) 0%, rgba(5,5,5,0.94) 76%);
}

/* Campo de fluido WebGL, decorativo, some sem JS */
.hero__gl {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s var(--ease);
  mix-blend-mode: screen;
}

.hero__gl.is-live { opacity: 1; }
.hero__gl canvas { width: 100%; height: 100%; display: block; }

/* Halo branco difuso, luz, não cor */
.hero__glow {
  position: absolute;
  left: 6%;
  bottom: -30%;
  width: min(920px, 112vw);
  height: 640px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.10) 0%, transparent 62%);
}

.hero__layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: center;
}

.hero__text { grid-column: 1 / span 6; }
.hero__aside { grid-column: 8 / -1; }

.hero h1 { margin-bottom: var(--s6); max-width: 12ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s7); }

@media (max-width: 1049px) {
  .hero__text, .hero__aside { grid-column: 1 / -1; }
  .hero__aside { margin-top: var(--s7); }
}

/* Card de fotografia, NÃO usa `.glass`.
   Os dois disputariam o mesmo `::after`: o scrim escuro herdaria
   a máscara da lente, que é transparente no centro, e o miolo da
   foto voltaria a clarear por baixo do texto. Aqui a borda e a
   espessura são reproduzidas à mão, sem o fundo translúcido. */
.hero__card {
  position: relative;
  border-radius: var(--r-card);
  border: 1px solid var(--glass-brd);
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.38),
    0 28px 72px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
  min-height: clamp(380px, 46vw, 520px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--s6);
  overflow: hidden;
  isolation: isolate;
}

/* O céu da foto é claro: escurece na origem, antes do scrim */
.hero__card img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  filter: grayscale(1) contrast(1.05) brightness(0.55);
}

.hero__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(180deg,
    rgba(5,5,5,0.34) 0%,
    rgba(5,5,5,0.58) 46%,
    rgba(5,5,5,0.94) 100%);
}

/* Reflexo na aresta superior, para o card ainda ler como peça
   de vidro apesar de não ser translúcido */
.hero__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(86% 58% at 12% -12%, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 62%);
}

.hero__card > * { position: relative; z-index: 1; }
.hero__card h2 { font-size: var(--t-2xl); }

/* Indicadores: um número por frente */
/* Cada indicador carrega o próprio fio, um filete por coluna
   lê melhor que uma régua única atravessando os três. */
.hero__meta {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
  margin-top: clamp(var(--s8), 7vw, var(--s10));
}

.hero__stat { grid-column: span 4; }

.hero__stat {
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}

.hero__stat .value {
  display: block;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: clamp(2rem, 2.6vw + 1rem, 2.875rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--txt);
}

.hero__stat .caption {
  display: block;
  margin-top: var(--s4);
  font-size: var(--t-sm);
  color: var(--txt-3);
  line-height: 1.55;
  max-width: 28ch;
}

.hero__note {
  grid-column: 1 / -1;
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}

.hero__note p { font-size: var(--t-sm); color: var(--txt-3); max-width: 72ch; }

@media (max-width: 767px) { .hero__stat { grid-column: 1 / -1; } }

/* ===== 08 · SUPERFÍCIES ==================================== */
.surface-1 { background: var(--surf-1); }
.surface-grad { background: var(--grad-surf); }

.surface-light { background: var(--white); color: var(--black); }
.surface-light .label { color: rgba(5, 5, 5, 0.55); }
.surface-light .label::before { background: rgba(5, 5, 5, 0.25); }
.surface-light .lede { color: rgba(5, 5, 5, 0.66); }
.surface-light .grad {
  background: linear-gradient(176deg, #050505 4%, #3d3d3d 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Faixa de fotografia */
.photo-band {
  position: relative;
  min-height: clamp(320px, 42vw, 520px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  padding-block: var(--s8);
}

.photo-band img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  filter: grayscale(1) contrast(1.15) brightness(0.8);
}

.photo-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(5,5,5,0.96) 0%, rgba(5,5,5,0.62) 55%, rgba(5,5,5,0.22) 100%);
}

.photo-band h2 { margin-top: var(--s5); max-width: 16ch; }

/* Faixa técnica */
.strip { border-block: 1px solid var(--line); background: var(--surf-1); }

.strip__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s5);
  padding-block: var(--s4);
}

.strip__item {
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--txt-3);
}

/* Separador é um ponto desenhado, não um caractere de traço */
.strip__item + .strip__item::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
  vertical-align: middle;
  margin-right: var(--s5);
}

/* ===== 09 · BLOCOS ========================================= */
.blocks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter);
}

.block {
  border-radius: var(--r-md);
  padding: clamp(var(--s6), 3.2vw, var(--s7));
}

.block__index {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--txt-3);
}

.block h3 { margin-block: var(--s6) var(--s4); font-size: var(--t-xl); max-width: 17ch; }
.block p { color: var(--txt-2); font-size: var(--t-sm); line-height: 1.65; max-width: 46ch; }

@media (max-width: 767px) { .blocks { grid-template-columns: 1fr; } }

/* ===== 10 · NUMERAIS ======================================= */
.numerals { border-top: 1px solid var(--line); }

.numeral-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
  align-items: center;
  padding-block: clamp(var(--s6), 3.6vw, var(--s8));
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.numeral-row__ghost {
  position: absolute;
  right: var(--s4);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--serif);
  font-size: clamp(4.5rem, 11vw, 9.5rem);
  font-weight: 400;
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-2);
  pointer-events: none;
  user-select: none;
  z-index: 0;
  transition: -webkit-text-stroke-color var(--dur) var(--ease);
}

.numeral-row:hover .numeral-row__ghost { -webkit-text-stroke-color: rgba(255,255,255,0.42); }

.numeral-row > *:not(.numeral-row__ghost) { position: relative; z-index: 1; }

/* O numeral fantasma à direita já diz a etapa, a antiga
   coluna "Etapa 0X" só repetia a informação. */
.numeral-row__title { grid-column: 1 / span 5; }
.numeral-row__desc { grid-column: 6 / span 5; }

.numeral-row h3 { font-size: var(--t-xl); }
.numeral-row p { color: var(--txt-2); font-size: var(--t-sm); line-height: 1.65; }

@media (max-width: 899px) {
  .numeral-row__title, .numeral-row__desc { grid-column: 1 / -1; }
  .numeral-row__desc { margin-top: var(--s3); }
  .numeral-row__ghost { font-size: 5rem; right: 0; top: var(--s5); transform: none; }
}

/* ===== 11 · SERVIÇOS ======================================= */
.service {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
  border-radius: var(--r-card);
  align-items: center;
}

.service + .service { margin-top: var(--gutter); }

.service__body { grid-column: 1 / span 7; padding: clamp(var(--s6), 3.6vw, var(--s9)); }
.service__media { grid-column: 8 / -1; align-self: stretch; position: relative; min-height: 320px; }

.service__media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.1) brightness(0.9);
}

.service--nomedia .service__body { grid-column: 1 / -1; }

/* O índice é um numeral serifado, não mais um rótulo com traço.
   Fala a mesma língua dos numerais monumentais do processo. */
.service__num {
  display: block;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: clamp(1.75rem, 1.6vw + 1rem, 2.25rem);
  line-height: 1;
  color: var(--txt-3);
  margin-bottom: var(--s5);
}

.service h3, .service h2 { margin-bottom: var(--s5); }

.chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-block: var(--s6); }

.chip {
  padding: 0.45rem 1rem;
  border: 1px solid var(--glass-brd);
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.035));
  backdrop-filter: blur(14px) saturate(170%);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26);
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  color: var(--txt-2);
}

@media (max-width: 899px) {
  .service__body, .service__media { grid-column: 1 / -1; }
  .service__media { min-height: 220px; order: -1; }
}

/* Ficha técnica */
.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
  margin-top: var(--s6);
}

.fact { border-radius: var(--r-md); padding: var(--s5); }

.fact__label {
  display: block;
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--txt-3);
  margin-bottom: var(--s4);
}

.fact__value {
  display: block;
  font-family: var(--serif);
  font-size: var(--t-xl);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.1;
}

.fact__note { display: block; margin-top: var(--s3); font-size: var(--t-xs); color: var(--txt-3); line-height: 1.55; }

@media (max-width: 767px) { .facts { grid-template-columns: 1fr; } }

/* Princípios */
.tenets { border-top: 1px solid var(--line); }

.tenet {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: var(--s5);
  align-items: baseline;
  padding-block: clamp(var(--s6), 3vw, var(--s7));
  border-bottom: 1px solid var(--line);
  font-family: var(--serif);
  font-size: var(--t-xl);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.tenet::before {
  content: attr(data-num);
  font-family: var(--font);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--txt-3);
}

@media (max-width: 599px) { .tenet { grid-template-columns: 1fr; gap: var(--s3); } }

.closing h2 { max-width: 16ch; }

/* ===== 12 · FORMULÁRIO ===================================== */
/* `overflow: visible` anula o recorte que `.glass` impõe: sem
   isso o menu do seletor seria cortado na borda do cartão. */
.form { border-radius: var(--r-card); overflow: visible; }

.form fieldset { border: 0; margin: 0; padding: clamp(var(--s6), 3vw, var(--s7)); }
.form fieldset + fieldset { border-top: 1px solid var(--line); }

/* `legend` é posicionada pelo navegador em cima da borda do
   fieldset e escapa do padding, o que cortava "Seus dados" na
   quina do cartão. O float devolve o elemento ao fluxo normal. */
.form legend {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0 0 var(--s6);
  color: var(--txt);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* O float acima cobra um preço: quem vem depois não desce sozinho.
   `.form-row` é `display: grid`, e grid não sobrepõe float — é posto
   ao lado dele. Como o float tem 100% de largura, sobrava zero: a
   linha Nome/Empresa nascia com width 0 e vazava para fora do cartão.
   Bloco comum (`.field`) não estoura, mas sobe e escreve por cima da
   legenda. `clear` nos filhos diretos resolve os dois casos. */
.form fieldset > * { clear: both; }

.form fieldset::after { content: ""; display: table; clear: both; }

/* `auto-fit` com piso de 200px: dois campos por linha quando cabe,
   um quando não cabe, e nunca um campo espremido. Substitui o par
   fixo `1fr 1fr`, que dependia de a coluna do formulário estar
   larga para não achatar os campos. */
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0 var(--gutter);
}

/* Item de grade nasce com `min-width: auto` e pode estourar ou
   encolher conforme o conteúdo; o zero trava esse comportamento. */
.field { margin-bottom: var(--s5); min-width: 0; }

.field > label {
  display: block;
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--txt-2);
  margin-bottom: var(--s3);
}

/* Campos em caixa. O sublinhado solo encostava na linha de baixo
   e parecia riscar o texto; a caixa isola cada campo. */
/* O `select` entra aqui também: sem JS ele não recebe
   `.select__native` e, sem largura, encolheria para o tamanho
   padrão do navegador no meio de campos de largura cheia. */
.field input,
.field select,
.field textarea,
.select__trigger {
  width: 100%;
  padding: 0.9rem 1.05rem;
  font-family: var(--font);
  font-size: var(--t-md);
  line-height: 1.4;
  color: var(--txt);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  appearance: none;
  transition: border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.field input::placeholder,
.field textarea::placeholder { color: var(--txt-3); }

.field input:hover,
.field textarea:hover,
.select__trigger:hover { background: rgba(255, 255, 255, 0.07); }

.field input:focus,
.field textarea:focus,
.select__trigger:focus-visible {
  outline: none;
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}

.field textarea { resize: vertical; min-height: 104px; }

/* --- Seletor próprio ---------------------------------------
   O `select` nativo não permite estilizar a lista aberta, que
   saía com a cara do sistema. Aqui o nativo continua no DOM,
   invisível, para preservar nome, valor e validação do form. */
.select { position: relative; }

/* Especificidade casada com `.field select`, que vem antes e
   também define largura. Sem isso o nativo escondido herdaria
   width 100%. */
.select .select__native {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  text-align: left;
  cursor: pointer;
}

.select__value { color: var(--txt); }
.select__value[data-placeholder="true"] { color: var(--txt-3); }

.select__chevron {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: var(--txt-2);
  transition: transform var(--dur) var(--ease);
}

.select.is-open .select__chevron { transform: rotate(180deg); }
.select.is-open .select__trigger { border-color: rgba(255, 255, 255, 0.55); }

.select.is-invalid .select__trigger { border-color: rgba(255, 130, 130, 0.75); }

.select__menu {
  position: absolute;
  top: calc(100% + var(--s2));
  left: 0;
  right: 0;
  z-index: 40;
  max-height: 288px;
  overflow-y: auto;
  padding: var(--s2);
  margin: 0;
  border-radius: var(--r-md);
  background: rgba(16, 16, 16, 0.82);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--glass-brd);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

.select__menu[hidden] { display: none; }

.select__option {
  padding: 0.7rem 0.85rem;
  border-radius: 12px;
  font-size: var(--t-md);
  color: var(--txt-2);
  cursor: pointer;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}

.select__option:hover,
.select__option.is-active {
  background: rgba(255, 255, 255, 0.10);
  color: var(--txt);
}

.select__option[aria-selected="true"] { color: var(--white); }

.form__submit { padding: clamp(var(--s6), 3vw, var(--s7)); border-top: 1px solid var(--line); }
.form__note { font-size: var(--t-sm); color: var(--txt-3); line-height: 1.65; margin-top: var(--s5); }

.form__notice {
  margin-top: var(--s5);
  padding: var(--s5);
  border-radius: var(--r-md);
  border-left: 2px solid var(--white);
  background: rgba(255, 255, 255, 0.06);
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--txt);
}

/* O aviso de erro não pode ler igual ao de sucesso. A paleta é preto e branco,
   então a diferença vem do fio da esquerda, não de uma cor de fundo. */
.form__notice--erro { border-left-color: rgba(255, 130, 130, 0.75); }
.form__notice--ok { border-left-color: var(--white); background: rgba(255, 255, 255, 0.1); }

/* Campo isca do formulário: sai da tela sem `display:none`, porque robô ignora
   o que está escondido desse jeito — e é justamente ele que tem que cair. */
.isca {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Botão trabalhando: sem trocar o texto de lugar, só apagando e travando. */
.btn[aria-busy="true"] { opacity: 0.6; pointer-events: none; }

/* Sem media query aqui: o `auto-fit` acima já quebra sozinho. */

.aside-block { border-radius: var(--r-card); padding: clamp(var(--s6), 3vw, var(--s7)); }
.aside-block h3 { font-size: var(--t-xl); margin-block: var(--s4) var(--s6); }
.aside-block ol { display: grid; gap: var(--s5); }

.aside-block li {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--s3);
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--txt-2);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}

.aside-block li::before {
  content: attr(data-num);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  color: var(--txt-3);
}

/* ===== 13 · RODAPÉ ========================================= */
.site-footer { border-top: 1px solid var(--line); background: var(--surf-1); }
.site-footer .container { padding-block: clamp(var(--s8), 6vw, var(--s9)) var(--s6); }

.footer-top {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
  padding-bottom: var(--s8);
}

.footer-brand { grid-column: span 6; }
.footer-col { grid-column: span 3; }

.footer-brand img { height: 27px; margin-bottom: var(--s5); }
.footer-brand p { max-width: 38ch; font-size: var(--t-sm); color: var(--txt-2); }

.footer-col h4 {
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--txt-3);
  margin-bottom: var(--s5);
}

.footer-col li + li { margin-top: var(--s3); }
.footer-col a { font-size: var(--t-sm); color: var(--txt-2); transition: color var(--dur) var(--ease); }
.footer-col a:hover { color: var(--white); }

/* Flex com base mínima em vez da grade de 12 colunas: se alguma
   regra de coluna deixar de casar, o pior caso aqui é quebrar a
   linha, nunca espremer o texto numa tira de 70px. */
.footer-legal {
  border-top: 1px solid var(--line);
  padding-top: var(--s6);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s6) var(--gutter);
  font-size: var(--t-xs);
  color: var(--txt-3);
  line-height: 1.7;
}

.footer-legal__entity { flex: 1 1 220px; min-width: 200px; }
.footer-legal__terms  { flex: 2 1 360px; min-width: 280px; }
.footer-legal__copy   { flex: 1 1 180px; min-width: 160px; text-align: right; }

.footer-legal__name { color: var(--txt-2); letter-spacing: 0.04em; }

@media (max-width: 899px) {
  .footer-brand, .footer-col { grid-column: 1 / -1; }
  .footer-legal__entity,
  .footer-legal__terms,
  .footer-legal__copy { grid-column: 1 / -1; text-align: left; }
}

/* --- Números da operação --- */
.numbers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--s6), 4vw, var(--s8));
}

.number { padding-top: var(--s5); border-top: 1px solid var(--line-2); }

.number__value {
  display: block;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: clamp(2.5rem, 3.6vw + 1rem, 4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--txt);
}

.number__label {
  display: block;
  margin-top: var(--s5);
  font-size: var(--t-sm);
  color: var(--txt-2);
  line-height: 1.55;
  max-width: 26ch;
}

@media (max-width: 767px) { .numbers { grid-template-columns: 1fr; } }

/* ===== 15 · FERRAMENTAS ==================================== */
.tool {
  border-radius: var(--r-card);
  padding: clamp(var(--s6), 3.4vw, var(--s8));
  overflow: visible;
}

.tool__head { margin-bottom: var(--s7); }
.tool__head p { color: var(--txt-2); margin-top: var(--s4); max-width: 52ch; }

.tool__note {
  font-size: var(--t-xs);
  color: var(--txt-3);
  line-height: 1.7;
  max-width: 76ch;
}

/* --- Linha do tempo --- */
.timeline__track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s2);
  margin-bottom: var(--s7);
}

@media (max-width: 767px) { .timeline__track { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.timeline__mark {
  text-align: left;
  padding: var(--s5) var(--s4) var(--s4);
  border: 0;
  border-top: 2px solid var(--line-2);
  background: transparent;
  color: var(--txt-3);
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.timeline__mark:hover { color: var(--txt-2); }

.timeline__mark.is-on {
  color: var(--white);
  border-top-color: var(--white);
}

.timeline__mark .meses {
  display: block;
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: var(--s3);
}

.timeline__mark .nome {
  display: block;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: var(--t-lg);
  line-height: 1.15;
}

.timeline__pane[hidden] { display: none; }
.timeline__pane h4 { font-size: var(--t-xl); margin-bottom: var(--s5); }
.timeline__pane p { color: var(--txt-2); max-width: 62ch; }

.timeline__pane ul {
  margin-top: var(--s5);
  display: grid;
  gap: var(--s3);
}

.timeline__pane li {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: var(--s3);
  font-size: var(--t-sm);
  color: var(--txt-2);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
}

.timeline__pane li::before { content: "0" counter(item); counter-increment: item; color: var(--txt-3); font-size: var(--t-xs); }
.timeline__pane ul { counter-reset: item; }

/* --- Diagnóstico --- */
.quiz__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s4);
  margin-bottom: var(--s6);
}

.quiz__progress { font-size: var(--t-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--txt-3); }

.quiz__step[hidden] { display: none; }
.quiz__step h4 { font-size: var(--t-xl); margin-bottom: var(--s6); max-width: 24ch; }

.quiz__options { display: grid; gap: var(--s3); }

.quiz__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  width: 100%;
  padding: 1rem 1.15rem;
  text-align: left;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.04);
  color: var(--txt-2);
  font-size: var(--t-md);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.quiz__opt:hover { background: rgba(255, 255, 255, 0.08); color: var(--txt); }

.quiz__opt.is-on {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.10);
  color: var(--white);
}

.quiz__result[hidden] { display: none; }

.quiz__result .rotulo {
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--txt-3);
}

.quiz__result h4 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: var(--t-2xl);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-block: var(--s4) var(--s5);
}

.quiz__result p { color: var(--txt-2); max-width: 56ch; }
.quiz__result p + p { margin-top: var(--s4); }

.quiz__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4);
  margin-top: var(--s7);
}

.quiz__restart {
  border: 0;
  background: transparent;
  color: var(--txt-3);
  font-size: var(--t-sm);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.quiz__restart:hover { color: var(--txt); }

/* ===== 14 · MOVIMENTO ====================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: 0.07s; }
[data-reveal-delay="2"] { transition-delay: 0.14s; }
[data-reveal-delay="3"] { transition-delay: 0.21s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .btn:hover .btn__arrow { transform: none; }
}