@import url('fontes.css');

/* ============================================================
   MakeFounder — folha de estilo única

   Direção: editorial escuro e contido. Fundo preto chapado, fio
   de 1px como única moldura, canto quase reto e tipografia
   sóbria — tamanhos pequenos, espacejamento apertado e muito ar
   em volta. A cor entra pouco e sempre pelo mesmo lugar: o
   magenta da marca.

   Regras de padronização:
   1. Nenhum estilo mora no HTML. Toda variação nasce de uma
      classe daqui.
   2. Título e texto saem da escala de nove degraus declarada
      nos tokens — nunca de um número solto. As peças de
      interface (marca, botão, campo, painel de maturidade) têm
      tamanho próprio, entre 11 e 24px, cada um justificado no
      bloco onde mora.

   Ordem: tokens · base · layout · tipografia de seção ·
   marca · cabeçalho · botões · superfícies · hero ·
   componentes · rodapé · formulários · legal · movimento ·
   responsivo
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* cores da marca — a paleta tem gramática:
     azul = o Make (tecnologia) · magenta = o Founder (a pessoa)
     violeta = a soma dos dois, e por isso assina a empresa */
  --azul: #2E6BFF;
  --violeta: #7B4BFF;
  --roxo: #C13BFF;
  --magenta: #FF18B3;

  /* o acento é o magenta clareado até ficar legível sobre preto.
     é a única cor que aparece fora da marca e das imagens. */
  --acento: #FF6FCB;
  --acento-fraco: rgba(255, 111, 203, 0.12);

  /* superfícies — preto chapado por padrão. O vidro é exceção:
     entra só onde há foto ou aura atrás para o desfoque borrar. */
  --preto: #060608;
  --preto-2: #0A0A0D;      /* seção alternada, um degrau acima */
  --preto-3: #000000;      /* dentro de cartão com imagem */

  /* vidro — um só desenho, usado em três lugares da página */
  --vidro-desfoque: 22px;
  --vidro-fio: rgba(255, 255, 255, 0.16);
  --vidro-brilho: rgba(255, 255, 255, 0.20);   /* a quina que pega a luz */
  --raio-vidro: 18px;

  --fio: rgba(255, 255, 255, 0.10);
  --fio-vivo: rgba(255, 255, 255, 0.26);
  --fio-forte: rgba(255, 255, 255, 0.62);
  --superficie: rgba(255, 255, 255, 0.02);
  --superficie-2: rgba(255, 255, 255, 0.045);

  /* texto — branco levemente quente */
  --tinta: #F2F0EB;
  --texto: rgba(242, 240, 235, 0.62);
  --texto-fraco: rgba(242, 240, 235, 0.38);

  /* famílias — duas principais com uso refinado */
  --display: 'Crimson Pro', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', 'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --mono: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* ESCALA — nove degraus, e nada fora deles.
     O topo é modesto de propósito: o peso da página vem do vazio
     em volta do texto, não do tamanho da letra. Entre um degrau e
     o seguinte há pouca diferença: é assim que a página fica calma. */
  --t-1: clamp(34px, 4.2vw, 58px);   /* título do hero */
  --t-2: clamp(29px, 3.2vw, 44px);   /* título de seção, numeral */
  --t-3: clamp(24px, 2.4vw, 33px);   /* título médio, menu do celular */
  --t-4: clamp(19px, 1.6vw, 22px);   /* título pequeno, citação, passo */
  --t-5: 18px;                        /* título de cartão */
  --t-6: 17px;                        /* chamada e olho — a linha de apoio */
  --t-7: 16px;                        /* texto corrido */
  --t-8: 14px;                        /* texto de cartão, botão, menu */
  --t-9: 11.5px;                      /* rótulo em monoespaçada */

  /* apertos — quanto maior o corpo, mais negativo o espacejamento */
  --aperto-g: -0.028em;
  --aperto-m: -0.02em;

  /* medidas */
  --largura: 1400px;
  --largura-texto: 1100px;
  --respiro: 24px;
  --raio: 4px;
  --raio-pilula: 999px;

  /* movimento */
  --curva: cubic-bezier(0.22, 1, 0.36, 1);
  --rapido: 200ms;
  --medio: 460ms;
  --lento: 900ms;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: var(--preto);
}

body {
  margin: 0;
  color: var(--texto);
  background: var(--preto);
  font-family: var(--sans);
  font-size: var(--t-7);
  line-height: 1.6;
  letter-spacing: -0.006em;   /* o aperto discreto que a Inter pede */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Poeira: um grão finíssimo, fixo, por cima de tudo. Serve a duas
   coisas — dá textura ao preto chapado e, principalmente, quebra o
   banding dos gradientes, que entre dois pretos vizinhos só tem quatro
   níveis para percorrer. Não intercepta o ponteiro e some na impressão. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23d)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}
@media print { body::after { display: none; } }

img, svg, video, canvas { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; }
p { margin: 0; }

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--tinta);
  margin: 0;
  letter-spacing: var(--aperto-m);
  /* entrelinha de título vive aqui: sem isto o h3 herda o 1.6 do
     corpo e abre um buraco no meio do cartão */
  line-height: 1.14;
  font-weight: 500;
  text-wrap: balance;
}

::selection { background: var(--acento); color: #14000C; }

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
  border-radius: 2px;
}

.pular {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 200;
  background: var(--tinta);
  color: var(--preto);
  padding: 12px 20px;
  border-radius: var(--raio-pilula);
  font-size: var(--t-8);
  font-weight: 500;
}
.pular:focus { left: 16px; }

.so-leitor {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- 3. Layout ---------- */
.recipiente {
  width: 100%;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 var(--respiro);
}
/* texto corrido não usa a largura cheia da grade */
.recipiente--texto { max-width: var(--largura-texto); }

.secao {
  position: relative;
  padding: 132px 0;
}
/* O espaçamento vertical entre blocos de uma seção é decidido num
   lugar só. Nenhum bloco carrega margem própria: quem separa é a
   coluna. É isso que mantém o ritmo igual de seção para seção. */
.secao > .recipiente {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.secao--curta { padding: 88px 0; }
/* um degrau de claridade separa seções vizinhas sem precisar de moldura */
/* O degrau de claridade virou uma mancha radial no miolo da seção. Como
   ela chega em transparente muito antes da borda, não existe faixa de
   largura cheia para virar linha na emenda — que era o problema do
   fundo chapado e também do gradiente vertical que o substituiu. */
.secao--degrau {
  background: radial-gradient(125% 68% at 50% 50%, rgba(255, 255, 255, 0.022), transparent 70%);
}

/* âncora não some atrás do cabeçalho fixo */
.secao[id], .hero[id] { scroll-margin-top: 96px; }

.grade { display: grid; gap: 16px; }
.grade--2 { grid-template-columns: repeat(2, 1fr); }
.grade--3 { grid-template-columns: repeat(3, 1fr); }
.grade--4 { grid-template-columns: repeat(4, 1fr); }
/* a grade de doze é o que permite o desequilíbrio proposital
   dos blocos (7/5, 8/4) sem inventar largura nova a cada seção */
/* os quatro cartões de foto dividem uma régua só; abaixo de 1200 não
   sobra largura para o rótulo e o selo na mesma linha, e caem para dois */
.grade--cartoes { grid-template-columns: repeat(4, 1fr); }
.grade--12 { grid-template-columns: repeat(12, 1fr); }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-12 { grid-column: span 12; }

.empilha { display: grid; gap: 16px; align-content: start; }

/* ---------- 4. Tipografia de seção ---------- */
/* Toda seção abre igual: fio + rótulo em monoespaçada, título em
   duas linhas com a segunda apagada, e uma chamada. */
/* soma-se ao vão de 24px da coluna: a cabeça respira 72px no total */
.cabeca { margin-bottom: 48px; }

.olhal {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-fraco);
  margin: 0 0 26px;
}
.olhal::before {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--fio-vivo);
  flex: none;
}
.olhal--acento { color: var(--acento); }
.olhal--acento::before { background: var(--acento); }

.titulo {
  font-size: var(--t-2);
  line-height: 1.06;
  letter-spacing: var(--aperto-g);
  margin: 0;
}
/* a segunda linha do título recua para o cinza: separa o que é
   afirmação do que é desdobramento, sem precisar de outro tamanho */
.titulo__eco { color: var(--texto-fraco); display: block; }

/* o ícone do produto entra à esquerda do nome, alinhado pelo centro da
   caixa e dimensionado em em — cresce junto com o título */
.titulo__marca {
  display: inline-flex;
  align-items: center;
  gap: 0.28em;
}
.titulo__icone {
  /* 0,70em dá ~1,18x a altura de capitular da Crimson Pro: a 0,88em o
     ícone ficava meia vez maior que o "W" e roubava o nome */
  width: 0.70em;
  height: 0.70em;
  flex: none;
  /* a arte já vem branca sobre transparente */
  opacity: 0.96;
}

.titulo--medio { font-size: var(--t-3); line-height: 1.1; }
.titulo--peq   { font-size: var(--t-4); line-height: 1.2; letter-spacing: var(--aperto-m); }

.chamada {
  font-size: var(--t-6);
  line-height: 1.62;
  max-width: 58ch;
  color: var(--texto);
  margin-top: 26px;
}

/* variante em duas colunas: título à esquerda, chamada à direita */
.cabeca--dupla {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 56px;
  align-items: end;
}
.cabeca--dupla .chamada { margin-top: 0; }

/* texto de apoio miúdo, usado em ressalvas e legendas */
.nota {
  font-family: var(--mono);
  font-size: var(--t-9);
  line-height: 1.65;
  color: var(--texto-fraco);
}
.nota--larga { max-width: 70ch; }

.fio-marca {
  height: 2px;
  width: 72px;
  background: linear-gradient(90deg, var(--azul), var(--violeta) 42%, var(--roxo) 70%, var(--magenta));
}

/* ---------- 5. A marca ---------- */
/* Lockup fundido: quatro barras sobem em escada e a quinta perna é o
   "m" do nome. Geometria derivada da altura-x da Crimson Pro. */
.marca {
  display: inline-flex;
  align-items: baseline;
  gap: 0.092em;
  font-family: var(--display);
  font-size: 24px;
  line-height: 1;
  color: var(--tinta);
  text-decoration: none;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.marca__barras {
  /* a construção manda a barra ter a altura-x do nome. Medida na Crimson
     Pro peso 400, ela dá 0,4219em — era 0,45em na Fraunces. A largura
     sai da proporção 513:420 do viewBox. */
  width: 0.515em;
  height: 0.422em;
  flex: none;
  overflow: visible;
}
.marca__nome > span { font-weight: 400; }
.marca__nome > strong { font-weight: 700; }

/* ---------- 6. Cabeçalho ---------- */
/* No topo da página a barra é invisível e larga. Ao rolar, ela
   descola das bordas e vira uma ilha com fio e desfoque. */
.cabecalho {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: top var(--medio) var(--curva),
              left var(--medio) var(--curva),
              right var(--medio) var(--curva);
}
.cabecalho__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 76px;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 0 var(--respiro);
  border: 1px solid transparent;
  border-radius: var(--raio);
  transition: height var(--medio) var(--curva),
              max-width var(--medio) var(--curva),
              border-radius var(--medio) var(--curva),
              background var(--medio),
              border-color var(--medio);
}
.cabecalho.rolado { top: 14px; left: 14px; right: 14px; }
.cabecalho.rolado .cabecalho__interno {
  height: 56px;
  max-width: 1240px;
  /* solto da borda, a barra pede um canto mais macio que o resto do site */
  border-radius: 14px;
  /* mesmo vidro das outras peças, só que mais fechado: aqui ele
     precisa segurar a leitura do menu sobre qualquer fundo */
  background: rgba(10, 10, 14, 0.62);
  border-color: var(--vidro-fio);
  box-shadow:
    inset 0 1px 0 var(--vidro-brilho),
    0 18px 40px -22px rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(22px) saturate(155%);
  -webkit-backdrop-filter: blur(22px) saturate(155%);
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .cabecalho.rolado .cabecalho__interno { background: rgba(8, 8, 11, 0.94); }
}

/* o menu encosta à direita: sem botão ao lado, não há o que equilibrar */
.nav { display: flex; align-items: center; gap: 32px; margin-left: auto; }
.nav a {
  position: relative;
  font-size: var(--t-8);
  color: var(--texto);
  text-decoration: none;
  transition: color var(--rapido);
}
.nav a:hover, .nav a.ativo { color: var(--tinta); }
/* sublinhado que cresce da esquerda */
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  height: 1px; width: 0;
  background: currentColor;
  transition: width var(--medio) var(--curva);
}
.nav a:hover::after, .nav a.ativo::after { width: 100%; }

.cabecalho__acoes { display: flex; align-items: center; }

.sanduiche {
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
  color: var(--tinta);
}
.sanduiche span {
  display: block; position: relative;
  width: 18px; height: 1.5px; background: currentColor;
  transition: background var(--rapido);
}
.sanduiche span::before, .sanduiche span::after {
  content: ""; position: absolute; left: 0;
  width: 18px; height: 1.5px; background: currentColor;
  transition: transform var(--medio) var(--curva);
}
.sanduiche span::before { top: -6px; }
.sanduiche span::after { top: 6px; }
.sanduiche[aria-expanded="true"] span { background: transparent; }
.sanduiche[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.sanduiche[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* Menu do celular: ocupa a tela, mas translúcido — o desfoque pega a
   página por baixo, então a navegação flutua sobre o conteúdo em vez de
   apagá-lo. Sem backdrop-filter, o @supports adiante devolve opaco. */
.menu-movel {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(6, 6, 8, 0.72);
  backdrop-filter: blur(26px) saturate(125%);
  -webkit-backdrop-filter: blur(26px) saturate(125%);
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 96px var(--respiro) max(34px, env(safe-area-inset-bottom));
  opacity: 0;
  /* visibility tira os links do foco e da árvore de acessibilidade
     enquanto o menu está fechado — opacidade zero sozinha não tira */
  visibility: hidden;
  pointer-events: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: opacity var(--medio) var(--curva), visibility 0s linear var(--medio);
}
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .menu-movel { background: rgba(6, 6, 8, 0.97); }
}
.menu-movel.aberto {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--medio) var(--curva), visibility 0s;
}

.menu-movel__elos {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* cada elo é uma faixa com número à esquerda e fio embaixo: é o que dá
   ordem à lista sem precisar de caixa nem de fundo */
.menu-movel__elos a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-family: var(--display);
  font-size: var(--t-3);
  font-weight: 500;
  letter-spacing: var(--aperto-m);
  color: var(--tinta);
  text-decoration: none;
  padding: 17px 2px;
  border-bottom: 1px solid var(--fio);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--medio) var(--curva), transform var(--medio) var(--curva),
              border-color var(--rapido), color var(--rapido);
}
.menu-movel__elos a:first-child { border-top: 1px solid var(--fio); }
.menu-movel__elos a:active { color: var(--acento); border-color: var(--fio-vivo); }
.menu-movel__num {
  flex: none;
  font-family: var(--mono);
  font-size: var(--t-9);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--texto-fraco);
}
.menu-movel.aberto .menu-movel__elos a { opacity: 1; transform: none; }
.menu-movel.aberto .menu-movel__elos a:nth-child(1) { transition-delay: 60ms; }
.menu-movel.aberto .menu-movel__elos a:nth-child(2) { transition-delay: 120ms; }
.menu-movel.aberto .menu-movel__elos a:nth-child(3) { transition-delay: 180ms; }
.menu-movel.aberto .menu-movel__elos a:nth-child(4) { transition-delay: 240ms; }
.menu-movel.aberto .menu-movel__elos a:nth-child(5) { transition-delay: 300ms; }

/* o pé fecha o menu com o meio de contato e a ação, para o menu não ser
   só uma lista de âncoras */
.menu-movel__pe {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--medio) var(--curva), transform var(--medio) var(--curva);
}
.menu-movel.aberto .menu-movel__pe { opacity: 1; transform: none; transition-delay: 320ms; }
.menu-movel__pe .olhal { margin-bottom: 2px; }
.menu-movel__email {
  font-family: var(--display);
  font-size: var(--t-4);
  font-weight: 500;
  color: var(--tinta);
  text-decoration: none;
  border-bottom: 1px solid var(--fio-vivo);
}
.menu-movel__pe .btn { margin-top: 8px; }
/* ---------- 7. Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--sans);
  font-size: var(--t-8);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.005em;
  padding: 0 22px;
  height: 38px;
  border-radius: var(--raio-pilula);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--rapido), border-color var(--rapido),
              color var(--rapido), transform var(--rapido) var(--curva);
}
.btn:active { transform: translateY(1px); }

/* branco sobre preto é a ação principal — a marca fica para o logo
   e para as imagens; botão colorido criaria uma segunda hierarquia */
.btn--primario { background: var(--tinta); color: var(--preto); }
.btn--primario:hover { background: #FFFFFF; }

.btn--vazado {
  border-color: var(--fio-vivo);
  color: var(--tinta);
  background: transparent;
}
.btn--vazado:hover { background: var(--superficie-2); border-color: var(--fio-forte); }

.btn--g { height: 46px; padding: 0 26px; font-size: var(--t-8); }

.btn .seta { transition: transform var(--medio) var(--curva); }
.btn:hover .seta { transform: translateX(4px); }

/* ---------- 8. Superfícies ---------- */
/* Um só desenho de caixa em todo o site: fio de 1px, canto quase
   reto, fundo dois por cento acima do preto. */
.painel {
  position: relative;
  background: var(--superficie);
  border: 1px solid var(--fio);
  border-radius: var(--raio);
  padding: 40px;
  transition: border-color var(--medio), background var(--medio);
}
.painel--largo { padding: 48px 52px; }

/* elo dentro de painel — usado nos meios de contato, no fim da página */
.painel a {
  text-decoration: none;
  border-bottom: 1px solid var(--fio-vivo);
  transition: color var(--rapido), border-color var(--rapido);
}
.painel a:hover { color: var(--acento); border-color: var(--acento); }

.cartao {
  position: relative;
  background: var(--superficie);
  border: 1px solid var(--fio);
  border-radius: var(--raio);
  padding: 34px 32px;
  transition: border-color var(--medio), background var(--medio),
              transform var(--medio) var(--curva);
}
.cartao:hover {
  border-color: var(--fio-vivo);
  background: var(--superficie-2);
  transform: translateY(-3px);
}
.cartao__num {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-fraco);
  margin-bottom: 20px;
}
.cartao__num--acento { color: var(--acento); }
.cartao h3 {
  font-size: var(--t-5);
  font-weight: 500;
  line-height: 1.24;
  margin-bottom: 10px;
}
.cartao p { font-size: var(--t-8); line-height: 1.6; }

/* ---------- Galeria de valores ---------- */
/* Seis cartões dividem a mesma régua. O que está sob o ponteiro abre e
   recupera a cor; os outros recuam para o preto e branco e deixam só o
   rótulo vertical à mostra. O texto continua no HTML o tempo todo — o
   que muda é a visibilidade, não a existência. */
.galeria-valores {
  display: flex;
  gap: 12px;
  height: 560px;
}
.valor {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--fio);
  border-radius: 24px;
  background: var(--preto-3);
  cursor: pointer;
  transition: flex-grow var(--lento) var(--curva),
              border-color var(--medio) ease,
              box-shadow var(--medio) ease;
}
.galeria-valores.tem-ativo .valor { flex-grow: 0.85; }
.galeria-valores.tem-ativo .valor.ativo {
  flex-grow: 2.4;
  border-color: var(--fio-vivo);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.valor:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

.valor__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  filter: grayscale(1) brightness(0.46) contrast(1.06);
  transition: filter var(--lento) var(--curva), transform var(--lento) var(--curva);
}
.valor.ativo .valor__img {
  transform: scale(1);
  filter: grayscale(0) brightness(0.72) contrast(1.02);
}

/* o véu segura a leitura do painel sem apagar a foto inteira */
.valor::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 6, 8, 0.18) 0%, rgba(6, 6, 8, 0.34) 46%, rgba(6, 6, 8, 0.92) 100%);
}

/* rótulo de pé: é o que identifica o cartão enquanto ele está recolhido */
.valor__selo {
  position: absolute;
  left: 50%;
  bottom: 26px;
  z-index: 2;
  writing-mode: vertical-rl;
  transform: translateX(-50%) rotate(180deg);
  font-size: var(--t-9);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(242, 240, 235, 0.7);
  transition: opacity var(--medio) ease;
}
.valor.ativo .valor__selo { opacity: 0; }

.valor__painel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 18px;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity var(--medio) ease, transform var(--medio) var(--curva);
}
.valor.ativo .valor__painel {
  opacity: 1;
  transform: none;
  transition-delay: 140ms;
}
.valor__vidro {
  /* a largura mínima congela a quebra do texto: ele não reflui enquanto
     o cartão abre, só aparece já no formato final */
  min-width: 280px;
  padding: 22px 22px 20px;
  border: 1px solid var(--vidro-fio);
  border-radius: 16px;
  background: rgba(10, 10, 13, 0.42);
  backdrop-filter: blur(var(--vidro-desfoque)) saturate(1.3);
  -webkit-backdrop-filter: blur(var(--vidro-desfoque)) saturate(1.3);
}
.valor__num {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--texto-fraco);
  margin-bottom: 14px;
}
.valor__vidro h3 {
  font-size: var(--t-5);
  font-weight: 500;
  line-height: 1.24;
  margin-bottom: 10px;
}
.valor__vidro p { font-size: var(--t-8); line-height: 1.6; }

/* ---------- Player do produto ---------- */
/* Um retângulo só, centrado. O vídeo roda em silêncio e o convite para o
   app aparece no ponteiro — sem controle, sem barra, sem enfeite. */
/* a seção é uma coluna flex: sem width a margem automática encolheria o
   quadro até o conteúdo, em vez de centrá-lo */
.player-bloco {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}
.player {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--fio);
  border-radius: 12px;
  background: var(--preto-3);
  transition: border-color var(--medio);
}
.player:hover { border-color: var(--fio-vivo); }
.player__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* O véu é o que sustenta a leitura do texto sobre uma cena clara. */
.player__veu {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(6, 6, 8, 0.62) 0%,
    rgba(6, 6, 8, 0.06) 26%,
    rgba(6, 6, 8, 0.06) 58%,
    rgba(6, 6, 8, 0.88) 100%);
  transition: opacity var(--medio) ease;
}
/* no ponteiro a camada de leitura sai e o convite fica sozinho */
.player:hover .player__veu,
.player:focus-within .player__veu,
.player-bloco:hover .player__marca,
.player-bloco:hover .player__notas,
.player-bloco:focus-within .player__marca,
.player-bloco:focus-within .player__notas { opacity: 0; }

.player__marca {
  position: absolute;
  z-index: 2;
  top: 22px;
  right: 26px;
  padding: 6px 13px;
  transition: opacity var(--medio) ease;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--raio-pilula);
  background: rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-family: var(--mono);
  font-size: var(--t-9);
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.9);
}

.player__notas {
  position: absolute;
  z-index: 2;
  left: 26px;
  right: 26px;
  bottom: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  list-style: none;
  margin: 0;
  padding: 0;
  pointer-events: none;
  transition: opacity var(--medio) ease;
}
.player__notas li {
  position: relative;
  padding-left: 16px;
  font-size: var(--t-8);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
}
/* o traço curto substitui o marcador redondo: menos ruído */
.player__notas li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.68em;
  width: 8px; height: 1px;
  background: rgba(255, 255, 255, 0.45);
}

.player__capa {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  background: rgba(6, 6, 8, 0.44);
  backdrop-filter: blur(3px) saturate(120%);
  -webkit-backdrop-filter: blur(3px) saturate(120%);
  transition: opacity var(--medio) ease;
}
.player__capa .btn {
  transform: translateY(10px);
  transition: transform var(--medio) var(--curva);
}
.player:hover .player__capa,
.player:focus-within .player__capa { opacity: 1; }
.player:hover .player__capa .btn,
.player:focus-within .player__capa .btn { transform: none; }

/* sem ponteiro não há hover: o convite fica de pé, encostado embaixo */
@media (hover: none) {
  .player__capa {
    opacity: 1;
    align-items: flex-end;
    padding-bottom: 22px;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .player__capa .btn { transform: none; }
}

/* Quadro baixo demais para carregar a régua por dentro: as notas descem
   para fora do vídeo e viram uma lista normal, sob o quadro. */
@media (max-width: 900px) {
  .player__notas {
    position: static;
    z-index: auto;   /* sem posição o z-index é inerte; deixar declarado engana */
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
  }
  .player__veu {
    background: linear-gradient(180deg, rgba(6, 6, 8, 0.58) 0%, rgba(6, 6, 8, 0.04) 30%, rgba(6, 6, 8, 0.04) 100%);
  }
}

/* ---------- Cartão com foto de fundo ---------- */
/* A foto entra como camada, não como ilustração: fica bem abaixo do
   contraste do texto e sobe um pouco no hover. O conteúdo se organiza
   em três faixas — rótulo e selo em cima, discurso no meio, itens numa
   lista de fios embaixo. */
.cartao-foto {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 26px;
  min-height: 430px;
  padding: 22px;
  overflow: hidden;
  border: 1px solid var(--fio);
  border-radius: 12px;
  background: var(--preto-3);
  transition: border-color var(--medio);
}
.cartao-foto:hover { border-color: var(--fio-vivo); }

/* Entrada: além do fade que todo .revelar faz, o cartão sobe um pouco
   mais e assenta de uma escala levemente menor. Os atrasos 1–4 no HTML
   fazem os quatro entrarem em cascata, não de uma vez. */
.cartao-foto.revelar { transform: translateY(34px) scale(0.985); }
.cartao-foto.revelar.visivel { transform: none; }

/* Luz que dá a volta na borda no ponteiro.
   Um cônico girando é recortado por duas máscaras sobrepostas em modo
   exclusão: sobra só o anel de 1px na moldura, e o miolo fica limpo.
   O ângulo só anima porque --giro está registrado como <angle> no
   @property; onde isso não existir, o cônico entra parado — degrada
   para um brilho estático em vez de quebrar. */
@property --giro {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.cartao-foto::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
  background: conic-gradient(from var(--giro),
    transparent 0turn,
    transparent 0.52turn,
    rgba(46, 107, 255, 0.55) 0.66turn,
    rgba(193, 59, 255, 0.95) 0.76turn,
    rgba(255, 111, 203, 0.75) 0.84turn,
    transparent 0.97turn);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--medio) ease;
}
.cartao-foto:hover::before,
.cartao-foto:focus-within::before {
  opacity: 1;
  animation: girar-luz 2.6s linear infinite;
}
@keyframes girar-luz { to { --giro: 360deg; } }

.cartao-foto__img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
  filter: grayscale(0.3) contrast(1.04);
  transform: scale(1.02);
  transition: transform var(--lento) var(--curva), opacity var(--lento) var(--curva);
}
.cartao-foto:hover .cartao-foto__img { transform: scale(1.05); opacity: 0.6; }

/* o véu é o que garante a leitura: escuro embaixo, quase limpo em cima */
.cartao-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(6, 6, 8, 0.42) 0%,
    rgba(6, 6, 8, 0.72) 34%,
    rgba(6, 6, 8, 0.93) 62%,
    rgba(6, 6, 8, 0.98) 100%);
}

.cartao-foto__topo,
.cartao-foto__corpo { position: relative; z-index: 2; }
/* sobre foto o rótulo precisa de um degrau a mais de tinta que sobre
   preto chapado — a 38% ele fica em 3,2:1 e some no topo mais claro */
.cartao-foto .olhal { color: var(--texto); }

/* na régua de quatro a coluna é estreita: a citação desce um degrau de
   corpo para não virar seis linhas, e o texto de apoio acompanha */
.cartao-foto .citacao { font-size: var(--t-5); line-height: 1.3; margin-bottom: 12px; }
.cartao-foto__corpo > p { font-size: var(--t-8); line-height: 1.55; }

/* ---------- Cartão de contato ---------- */
/* Um bloco só, centrado: foto de um lado, os meios de contato do outro.
   A foto se dissolve no fundo do cartão para não virar um retângulo colado. */
.contato-cartao {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  /* a seção é uma coluna flex: sem width a margem automática encolhe o
     cartão até o conteúdo, em vez de centrá-lo na largura cheia */
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--fio);
  border-radius: 22px;
  background: var(--superficie);
  transition: border-color var(--medio);
}
.contato-cartao:hover { border-color: var(--fio-vivo); }

.contato-cartao__imagem { position: relative; min-height: 300px; }
.contato-cartao__imagem img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.88;
}
.contato-cartao__imagem::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(6, 6, 8, 0.5) 0%,
    rgba(6, 6, 8, 0.12) 34%,
    rgba(6, 6, 8, 0.72) 84%,
    rgba(10, 10, 13, 0.98) 100%);
}

.contato-cartao__texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 42px;
}
/* a chamada da seção mora dentro do cartão: sem ela do lado de fora o
   bloco fica sozinho no meio da coluna, sem apresentação */
.contato-cartao__cabeca .chamada { margin-top: 16px; max-width: none; }
.contato-cartao__texto .olhal { margin-bottom: 14px; }
.contato-cartao__texto .titulo--peq { margin-bottom: 8px; }
.contato-cartao__texto .lista { margin-bottom: 12px; }
/* e-mail e redes lado a lado: empilhados eles esticavam o cartão. Cada
   bloco ocupa o que o conteúdo pede e nenhum encolhe — quando falta
   largura eles passam para a linha de baixo inteiros, em vez de partir
   o endereço no meio da palavra. */
.contato-cartao__meios {
  display: flex;
  flex-wrap: wrap;
  gap: 26px 52px;
}
.contato-cartao__meios > * { flex: 0 0 auto; }
.contato-cartao__meios a[href^="mailto"] { white-space: nowrap; }
.contato-cartao__fio {
  border: 0;
  border-top: 1px solid var(--fio);
  margin: 26px 0;
}

/* elos do cartão: mesma régua dos elos de painel */
.contato-cartao a {
  color: var(--tinta);
  text-decoration: none;
  border-bottom: 1px solid var(--fio-vivo);
  transition: color var(--rapido), border-color var(--rapido);
}
.contato-cartao a:hover { color: var(--acento); border-color: var(--acento); }
/* elo ainda sem destino: mantém a aparência, mas não finge ser clicável */
.contato-cartao a:not([href]) { cursor: default; }
.contato-cartao a:not([href]):hover { color: var(--tinta); border-color: var(--fio-vivo); }

/* número de estatística — dá escala sem gritar */
.numeral {
  display: block;
  font-family: var(--display);
  font-weight: 500;
  font-size: var(--t-2);
  line-height: 1;
  letter-spacing: var(--aperto-g);
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.numeral__rot {
  display: block;
  font-family: var(--mono);
  font-size: var(--t-9);
  color: var(--texto-fraco);
  margin-top: 12px;
}

.lista { list-style: none; padding: 0; margin: 0; }
.lista li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 11px;
  font-size: var(--t-7);
}
.lista li::before {
  content: "";
  position: absolute;
  left: 0; top: 11px;
  width: 4px; height: 4px;
  background: var(--acento);
}

/* selo de estado */
.selo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--acento);
  background: var(--acento-fraco);
  padding: 5px 10px;
}
.selo::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  animation: pulsar 2s ease-in-out infinite;
}
@keyframes pulsar { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* etiqueta neutra em fio, usada em listas de atributos */
.etiqueta {
  display: inline-flex;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--texto-fraco);
  border: 1px solid var(--fio);
  padding: 5px 10px;
}

.citacao {
  font-family: var(--display);
  font-size: var(--t-4);
  line-height: 1.32;
  font-weight: 500;
  color: var(--tinta);
  letter-spacing: var(--aperto-m);
  margin: 0 0 18px;
}

/* ---------- 8b. Vidro ---------- */
/* Vidro precisa de algo atrás para borrar. Sobre preto chapado o
   desfoque não tem trabalho e a peça vira um retângulo cinza. Por
   isso .vidro só aparece sobre a foto do hero ou dentro de uma
   seção com .secao--aura, que acende duas manchas da paleta. */
.vidro {
  position: relative;
  background:
    linear-gradient(148deg,
      rgba(255, 255, 255, 0.022) 0%,
      rgba(255, 255, 255, 0.005) 46%,
      rgba(255, 255, 255, 0.013) 100%);
  /* o desfoque continua o mesmo: o que baixou foi só o preenchimento,
     para o vidro ficar mais transparente sem perder o efeito */
  backdrop-filter: blur(var(--vidro-desfoque)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--vidro-desfoque)) saturate(140%);
  /* fio e quina mais baixos que os tokens: sobre a foto escura do hero
     os valores cheios acendiam a barra inteira e ela puxava o olho para
     longe do título */
  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: var(--raio-vidro);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),    /* quina de cima acesa */
    inset 0 -1px 0 rgba(255, 255, 255, 0.018),
    0 28px 64px -28px rgba(0, 0, 0, 0.85);
}
/* onde o navegador não desfoca, o vidro vira vidro fumê: mesma
   caixa, fundo opaco o bastante para o texto continuar legível */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .vidro { background: rgba(10, 10, 14, 0.9); }
}

/* aura: duas manchas da paleta atrás do conteúdo, para o vidro ter
   o que borrar e a seção deixar de ser preto liso */
.secao--aura { isolation: isolate; overflow: hidden; }
.secao--aura::before {
  content: "";
  position: absolute;
  inset: -10% -5%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(46% 44% at 80% 24%, rgba(255, 24, 179, 0.20), transparent 68%),
    radial-gradient(42% 40% at 10% 82%, rgba(46, 107, 255, 0.16), transparent 70%);
  filter: blur(30px);
  /* o overflow: hidden da seção cortava a mancha numa reta no limite do
     bloco. A máscara apaga o brilho antes disso, e a cor entra e sai da
     seção sem deixar aresta. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 76%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 24%, #000 76%, transparent 100%);
}

/* ---------- 9. Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  /* o preto do hero é o mesmo do corpo: qualquer diferença aqui vira
     uma reta visível na emenda com a primeira seção */
  background: var(--preto);
  padding: 160px 0 200px;
}
.hero__fundo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.hero__slide.ativo {
  opacity: 1;
  z-index: 1;
}
.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 25%;
  opacity: 0.92;
  will-change: transform;
}
/* o rosto está a ~62% da largura e a ~33% da altura desta foto: é isso
   que o enquadramento persegue nas duas direções de corte */
.hero__slide:nth-child(1) img { object-position: 62% 26%; }
/* esta foto é 3:2, mais alta que as outras: o corte é vertical na maioria
   das telas, e o rosto está a ~49% da largura e ~30% da altura */
.hero__slide:nth-child(2) img { object-position: 49% 30%; }
/* o rosto está a ~70% da largura e ~32% da altura desta foto */
.hero__slide:nth-child(3) img { object-position: 68% 26%; }

/* véu panorâmico: 100% do hero preenchido com a imagem no fundo; escurece o lado do texto à esquerda (0-45%) e deixa o fundador brilhar à direita */
.hero__veu {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* Os pesos são calibrados para a foto do slide 1, que é escura: a
       0,94/0,78 do ajuste anterior o fundo vermelho ia a 6/255 e sumia.
       Aberto assim ele fica em ~20/255 — visível, com o título ainda
       acima de 16:1. Trocar por uma foto clara pede fechar de novo. */
    linear-gradient(90deg, rgba(6, 6, 8, 0.60) 0%, rgba(6, 6, 8, 0.38) 38%, rgba(6, 6, 8, 0.03) 68%, rgba(6, 6, 8, 0.14) 100%),
    /* a cauda fecha em preto opaco antes do fim do hero: parando em 0,96
       sobrava um resto de foto, e o corte dela virava a linha da emenda */
    linear-gradient(180deg, rgba(6, 6, 8, 0.38) 0%, rgba(6, 6, 8, 0) 22%, rgba(6, 6, 8, 0.12) 58%, rgba(6, 6, 8, 0.88) 86%, var(--preto) 97%);
}
.hero__controles {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  margin-top: 14px;
}
.hero__indicador {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  padding: 8px 0;
  cursor: pointer;
  /* com o véu mais aberto o fundo subiu de tom: a 35% o rótulo inativo
     caía abaixo do mínimo de leitura */
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  transition: color var(--rapido);
}
.hero__indicador-linha {
  display: inline-block;
  width: 20px;
  height: 1px;
  background: rgba(255, 255, 255, 0.32);
  transition: width var(--medio) var(--curva), background var(--rapido);
}
.hero__indicador.ativo {
  color: #FFFFFF;
}
.hero__indicador.ativo .hero__indicador-linha {
  width: 44px;
  background: #FFFFFF;
}
.hero__indicador:hover {
  color: rgba(255, 255, 255, 0.85);
}

.hero__interno { position: relative; z-index: 3; width: 100%; }
.hero__texto { max-width: 52%; }

/* o olhal do hero vira pastilha de vidro — é o primeiro sinal da
   linguagem que se repete no painel e nos cartões de contato */
.hero .olhal {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border-radius: var(--raio-pilula);
  /* preenchimento e contorno bem baixos: a pastilha marca presença pelo
     desfoque, não pela moldura */
  background: rgba(255, 255, 255, 0.028);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 26px;
}
/* sem o ponto de acento: o rótulo abre sozinho, sem marcador */
.hero .olhal::before { display: none; }

.hero h1 {
  font-size: var(--t-1);
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: var(--aperto-g);
  margin: 0 0 28px;
  color: #FFFFFF;
}
.hero h1 .linha { display: block; overflow: hidden; }
.hero h1 .linha > span { display: block; }

.hero__olho {
  font-size: var(--t-6);
  line-height: 1.6;
  max-width: 46ch;
  margin-bottom: 36px;
  color: rgba(255, 255, 255, 0.7);
}
/* palavra que troca, com entrada desfocada letra a letra */
.gira { display: inline-block; position: relative; }
.gira__letra {
  display: inline-block;
  opacity: 0;
  filter: blur(16px);
  will-change: opacity, filter;
}
.gira__letra.dentro {
  opacity: 1;
  filter: blur(0);
  transition: opacity 520ms ease-out, filter 520ms ease-out, color 420ms ease;
}

/* faixa de pilares no pé do hero — a peça de vidro que apoia
   direto na foto, e por isso a que mais mostra o desfoque */
.hero__pe {
  position: absolute;
  left: 0; right: 0; bottom: 84px;
  z-index: 3;
}
.pilares {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 44px;
  padding: 20px 26px;
}
.pilar { max-width: 24ch; }
.pilar b {
  display: block;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: var(--aperto-m);
  color: #FFFFFF;
  line-height: 1;
  margin-bottom: 8px;
}
.pilar span {
  display: block;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.5);
}
.pilares .btn { margin-left: auto; align-self: center; }

/* ---------- 10. Bloco largo com imagem ---------- */
/* O cartão que ocupa a largura toda: texto à esquerda sobre preto,
   imagem sangrando à direita com esvanecimento para o preto. */
.bloco {
  position: relative;
  display: flex;
  min-height: 420px;
  background: var(--preto-3);
  border: 1px solid var(--fio);
  border-radius: var(--raio);
  overflow: hidden;
}
.bloco__texto {
  position: relative;
  z-index: 2;
  flex: 1;
  padding: 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.bloco__lona { position: absolute; inset: 0; z-index: 0; }
.bloco__texto > * { position: relative; z-index: 1; }
.bloco__imagem {
  position: relative;
  width: 44%;
  flex: none;
  overflow: hidden;
}
.bloco__imagem img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.bloco__imagem--espelho img { transform: scaleX(-1); }
/* o esvanecimento é o que costura a foto ao preto do cartão */
.bloco__imagem::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, #000 0%, rgba(0,0,0,.35) 34%, transparent 62%);
}

/* faixa de imagem que sangra na largura da página */
.faixa {
  position: relative;
  height: clamp(240px, 30vw, 400px);
  overflow: hidden;
  border: 1px solid var(--fio);
  border-radius: var(--raio);
}
.faixa img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.faixa::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(6,6,8,.45) 0%, transparent 30%, rgba(6,6,8,.85) 100%),
    linear-gradient(90deg, rgba(6,6,8,.6) 0%, transparent 30%, transparent 70%, rgba(6,6,8,.6) 100%);
}

/* ---------- 11. Palco de imagem ---------- */
/* Imagem grande ao lado do título, que troca conforme o passo ativo
   logo abaixo. Sem moldura: a foto já vem sobre preto e se costura
   sozinha ao fundo. */
.palco {
  position: relative;
  min-height: clamp(240px, 26vw, 360px);
  overflow: hidden;
}
.palco__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center bottom;
  opacity: 0;
  transition: opacity 700ms ease;
}
.palco__img.ativa { opacity: 0.92; }

.etiquetas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }

/* ---------- 12. Passos ---------- */
.passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.passo {
  position: relative;
  text-align: left;
  background: var(--preto-3);
  border: 1px solid var(--fio);
  border-radius: var(--raio);
  padding: 36px 32px 40px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  overflow: hidden;
  transition: border-color var(--medio);
}
.passo:hover { border-color: var(--fio-vivo); }
.passo.ativo { border-color: var(--fio-forte); }
.passo__topo { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.passo__num {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.2);
  line-height: 1;
  transition: color var(--medio);
}
.passo.ativo .passo__num { color: var(--acento); }
.passo__trilho { flex: 1; height: 1px; background: var(--fio); overflow: hidden; }
.passo__barra { display: block; height: 100%; width: 0; background: var(--acento); }
.passo.ativo .passo__barra { animation: encher 7s linear forwards; }
@keyframes encher { from { width: 0; } to { width: 100%; } }
.passo h3 { font-size: var(--t-4); font-weight: 500; margin-bottom: 2px; }
.passo__sub {
  display: block;
  font-family: var(--display);
  font-size: 15px;
  color: var(--texto-fraco);
  margin-bottom: 18px;
}
.passo p { font-size: var(--t-8); line-height: 1.6; }
.passo__risco {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--acento);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--medio) var(--curva);
}
.passo.ativo .passo__risco { transform: scaleX(1); }

/* ---------- 13. Painel de maturidade do produto ---------- */
.painel__linha {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--fio);
}
.painel__linha:last-of-type { border-bottom: 0; }
.painel__rot {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--texto-fraco);
  width: 92px; flex: none;
}
.painel__trilho {
  display: block;
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.painel__nivel {
  display: block;
  height: 100%;
  width: 0;
  background: var(--tinta);
  transition: width 1300ms var(--curva);
}
/* a área mais fraca é a única que recebe cor: é onde o olho deve cair */
.painel__nivel--fraco { background: var(--acento); }
.painel__val {
  font-family: var(--mono);
  font-size: 11.5px; color: var(--texto);
  width: 28px; text-align: right;
  font-variant-numeric: tabular-nums; flex: none;
}

/* gráfico de pontos animado — assina os blocos de número */
.pontos { display: block; width: 100%; height: 28px; }

/* ---------- 14. Chamada final ---------- */
.chamada-final {
  position: relative;
  border: 1px solid var(--fio-forte);
  border-radius: var(--raio);
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 72px 56px;
}
.chamada-final__texto { flex: 1; }
.chamada-final__imagem {
  width: 44%;
  flex: none;
  align-self: flex-end;
  margin: 0 -56px -72px 0;
}
.chamada-final__imagem img { width: 100%; height: auto; object-fit: contain; }
/* holofote que segue o ponteiro */
.chamada-final__luz {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--medio);
  background: radial-gradient(520px circle at var(--x, 50%) var(--y, 50%),
              rgba(255, 111, 203, 0.10), transparent 62%);
}
.chamada-final:hover .chamada-final__luz { opacity: 1; }
/* cantos decorativos: repetem o fio sem fechar uma segunda moldura */
.chamada-final__canto {
  position: absolute;
  width: 72px; height: 72px;
  pointer-events: none;
  border-color: var(--fio);
  border-style: solid;
}
.chamada-final__canto--ne { top: 0; right: 0; border-width: 0 0 1px 1px; }
.chamada-final__canto--so { bottom: 0; left: 0; border-width: 1px 1px 0 0; }
.chamada-final h2 { margin-bottom: 24px; }
.chamada-final .chamada { margin: 0 0 34px; }
.chamada-final__botoes { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- 15. Formulários ---------- */
.formulario { display: grid; gap: 18px; }
.campo { display: flex; flex-direction: column; gap: 8px; }
.campo label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}
.campo input,
.campo select,
.campo textarea {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--tinta);
  background: var(--superficie);
  border: 1px solid var(--fio);
  border-radius: var(--raio);
  padding: 13px 15px;
  transition: border-color var(--rapido), background var(--rapido);
  width: 100%;
}
.campo textarea { resize: vertical; min-height: 120px; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  border-color: var(--fio-forte);
  background: var(--superficie-2);
  outline: none;
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--texto-fraco); }
.campo select { appearance: none; cursor: pointer; }
.campo select option { background: #101014; color: var(--tinta); }
.campo--aceite { flex-direction: row; align-items: flex-start; gap: 11px; }
.campo--aceite input { width: 17px; height: 17px; flex: none; margin-top: 3px; accent-color: var(--acento); }
.campo--aceite label {
  font-family: var(--sans);
  font-size: var(--t-8); text-transform: none; letter-spacing: 0;
  color: var(--texto); line-height: 1.55;
}
.campo--aceite a { color: var(--acento); }
.mel { position: absolute; left: -9999px; opacity: 0; }

.aviso {
  border-radius: var(--raio);
  padding: 13px 15px;
  font-size: var(--t-8);
  display: none;
}
.aviso--ok { background: rgba(18, 183, 106, .12); border: 1px solid rgba(18, 183, 106, .4); color: #7BE7B0; }
.aviso--erro { background: rgba(240, 68, 56, .12); border: 1px solid rgba(240, 68, 56, .4); color: #FDA29B; }
.aviso.visivel { display: block; }

/* ---------- 16. Texto legal ---------- */
.legal { max-width: 70ch; }
.legal h2 { font-size: var(--t-4); font-weight: 500; margin: 48px 0 12px; }
.legal h3 { font-size: 17px; font-weight: 500; margin: 28px 0 10px; }
.legal p, .legal li { font-size: var(--t-7); line-height: 1.72; }
.legal p { margin-bottom: 14px; }
.legal ul { padding-left: 0; list-style: none; margin: 0 0 18px; }
.legal ul li { position: relative; padding-left: 22px; margin-bottom: 9px; }
.legal ul li::before {
  content: ""; position: absolute; left: 0; top: 12px;
  width: 4px; height: 4px; background: var(--acento);
}
.sumario {
  border: 1px solid var(--fio);
  border-radius: var(--raio);
  padding: 26px 30px;
  background: var(--superficie);
  margin-bottom: 44px;
}
.sumario ol { margin: 0; padding-left: 20px; }
.sumario li { margin-bottom: 8px; font-size: var(--t-8); }
.sumario a { color: var(--tinta); text-decoration: none; }
.sumario a:hover { color: var(--acento); }
.nota-juridica {
  border: 1px dashed var(--fio-vivo);
  border-radius: var(--raio);
  padding: 18px 20px;
  font-size: 13px;
  color: var(--texto-fraco);
  margin-top: 44px;
}

/* ---------- 17. Rodapé ---------- */
/* o rodapé escurece a partir do preto do corpo, sem aresta na emenda */
.rodape {
  position: relative;
  background: linear-gradient(180deg, var(--preto) 0, var(--preto-3) 60%);
}
.rodape__grade {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 48px;
  padding: 68px 0;
}
.rodape__sobre p {
  font-size: var(--t-8);
  line-height: 1.6;
  max-width: 34ch;
  margin: 20px 0 24px;
  color: var(--texto-fraco);
}
.rodape__sociais { display: flex; gap: 22px; }
.rodape__sociais a { font-size: var(--t-8); color: var(--texto-fraco); text-decoration: none; }
.rodape__sociais a:hover { color: var(--tinta); }
.rodape h4 {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--tinta);
  letter-spacing: 0;
  margin-bottom: 20px;
}
.rodape ul { list-style: none; padding: 0; margin: 0; }
.rodape li { margin-bottom: 12px; }
.rodape a { font-size: var(--t-8); color: var(--texto-fraco); text-decoration: none; transition: color var(--rapido); }
.rodape a:hover { color: var(--tinta); }
.rodape__base {
  border-top: 1px solid var(--fio);
  padding: 26px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--texto-fraco);
}
.rodape__estado { display: inline-flex; align-items: center; gap: 9px; }
.rodape__estado::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--acento);
}

/* ---------- 18. Movimento ---------- */
.revelar {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--lento) var(--curva), transform var(--lento) var(--curva);
}
.revelar.visivel { opacity: 1; transform: none; }
.revelar[data-atraso="1"] { transition-delay: 100ms; }
.revelar[data-atraso="2"] { transition-delay: 200ms; }
.revelar[data-atraso="3"] { transition-delay: 300ms; }
.revelar[data-atraso="4"] { transition-delay: 400ms; }
.revelar[data-atraso="5"] { transition-delay: 500ms; }

.entrar { opacity: 0; transform: translateY(24px); }
.pronto .entrar {
  opacity: 1;
  transform: none;
  transition: opacity 820ms var(--curva), transform 820ms var(--curva);
}
.pronto .entrar[data-atraso="1"] { transition-delay: 130ms; }
.pronto .entrar[data-atraso="2"] { transition-delay: 260ms; }
.pronto .entrar[data-atraso="3"] { transition-delay: 390ms; }
.pronto .entrar[data-atraso="4"] { transition-delay: 540ms; }

/* as oblíquas crescem da base: dentro do grupo inclinado o zero do eixo y
   já é a linha de base, então a origem é 0 e não mais a altura do viewBox */
.marca__barras rect {
  transform-origin: 50% 0;
  transform: scaleY(0);
  animation: subir 760ms var(--curva) forwards;
}
.marca__barras rect:nth-child(1) { animation-delay: 60ms; }
.marca__barras rect:nth-child(2) { animation-delay: 130ms; }
.marca__barras rect:nth-child(3) { animation-delay: 200ms; }
.marca__barras rect:nth-child(4) { animation-delay: 270ms; }
@keyframes subir { to { transform: scaleY(1); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .revelar, .entrar, .cartao-foto.revelar { opacity: 1; transform: none; }
  /* a luz não gira: fica parada num ponto do contorno */
  .cartao-foto:hover::before { animation: none; }
  .gira__letra { opacity: 1; filter: none; }
  .marca__barras rect { transform: scaleY(1); }
  .hero__fundo img { transform: none; }
  /* sem animação a régua vira lista: todo o texto fica legível de uma vez */
  .galeria-valores { flex-direction: column; height: auto; }
  .galeria-valores .valor,
  .galeria-valores.tem-ativo .valor { flex: 0 0 auto; height: 300px; }
  .valor__selo { display: none; }
  .valor__painel { opacity: 1; transform: none; }
  .valor__img { transform: none; filter: grayscale(0) brightness(0.6); }
  .valor__vidro { min-width: 0; }
}

/* ---------- 19. Responsivo ---------- */
@media (max-width: 1200px) {
  .grade--cartoes { grid-template-columns: 1fr 1fr; }
  .hero__texto { max-width: 72%; }
  .bloco { min-height: 0; }
  .bloco__texto { padding: 44px; }
  .chamada-final { padding: 56px 44px; }
  .chamada-final__imagem { margin-right: -44px; margin-bottom: -56px; }
}

@media (max-width: 1024px) {
  .secao { padding: 96px 0; }
  .galeria-valores { height: 500px; gap: 8px; }
  .valor__vidro { min-width: 260px; padding: 18px; }
  .cabeca { margin-bottom: 32px; }
  .cabeca--dupla { grid-template-columns: 1fr; gap: 28px; align-items: start; }
  .grade--12 { grid-template-columns: repeat(6, 1fr); }
  .col-4, .col-5, .col-7, .col-8, .col-12 { grid-column: span 6; }
  .bloco { flex-direction: column; }
  .bloco__imagem { width: 100%; height: 280px; position: relative; }
  .bloco__imagem::after {
    background: linear-gradient(180deg, #000 0%, rgba(0,0,0,.3) 32%, transparent 70%);
  }
  .chamada-final { flex-direction: column; align-items: stretch; padding: 44px 34px; }
  .chamada-final__imagem { width: 100%; margin: 24px 0 -44px; }
  .rodape__grade { grid-template-columns: 1fr 1fr; gap: 40px; }
}

@media (max-width: 900px) {
  .nav { display: none; }
  .cabecalho__acoes { margin-left: auto; }
  .sanduiche { display: inline-flex; }
  .cabecalho__interno { height: 66px; }
  .cabecalho.rolado .cabecalho__interno { height: 54px; }
  .hero { display: block; min-height: auto; padding: 124px 0 72px; }
  .hero__texto { max-width: 100%; }
  /* relative, não static: z-index só vale em elemento posicionado, e sem
     isso o véu (z-index 1) pinta por cima da barra. Mas relative mantém
     os deslocamentos do desktop ativos, e o bottom: 84px puxava a barra
     84px para cima, em cima dos indicadores. Daí o inset: auto. */
  .hero__pe { position: relative; inset: auto; margin-top: 52px; }
  /* A foto ocupa só a faixa de cima. Esticada no hero inteiro (375x993,
     proporção 0,38) sobrava 21% da largura da imagem — virava um recorte
     vertical do rosto. Nesta faixa a proporção sobe para 0,65 e sobram
     36%. A máscara dissolve a base, para não sobrar quina. */
  .hero__fundo {
    bottom: auto;
    height: 58%;
    -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  }
  .hero__slide { padding: 0; }
  .hero__slide img {
    max-width: none;
    max-height: none;
    width: 100%;
    height: 100%;
    opacity: 0.5;
  }
  /* sem a coluna de texto à esquerda, o véu passa a escurecer de cima
     para baixo — é o que sustenta a leitura sobre a foto inteira */
  .hero__veu {
    background: linear-gradient(180deg,
      rgba(6, 6, 8, 0.74) 0%,
      rgba(6, 6, 8, 0.80) 38%,
      rgba(6, 6, 8, 0.93) 76%,
      var(--preto) 97%);
  }
  .pilares { gap: 30px; padding: 24px 26px; align-items: flex-start; }
  .pilares .btn { margin-left: 0; }
  /* o anel só faz sentido enquanto a foto ocupa a largura toda */
  .hero__anel { display: none; }
  /* A sanfona continua horizontal no celular, mas em larguras fixas e com
     rolagem: seis cartões dentro de 327px dariam 20px cada quando um está
     aberto, estreito demais para o rótulo. Assim o aberto fica legível e
     os fechados ficam a um deslize. O toque abre, e o JS traz o aberto
     para dentro da tela. */
  .galeria-valores {
    flex-direction: row;
    height: 430px;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding: 0 var(--respiro);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .galeria-valores::-webkit-scrollbar { display: none; }
  .galeria-valores .valor,
  .galeria-valores.tem-ativo .valor {
    flex: 0 0 52px;
    height: auto;
    scroll-snap-align: start;
    transition: flex-basis var(--medio) var(--curva), border-color var(--medio) ease;
  }
  .galeria-valores.tem-ativo .valor.ativo { flex: 0 0 min(76vw, 300px); }
  .valor__vidro { min-width: 0; padding: 18px; }
  .valor__painel { padding: 14px; }
  .cartao-foto { min-height: 0; padding: 26px 22px; gap: 30px; }
  .cartao-foto--largo { min-height: 0; }
  /* o cartão de contato empilha: foto em cima, informações embaixo */
  .contato-cartao { grid-template-columns: 1fr; }
  .contato-cartao__imagem { min-height: 0; height: 220px; }
  .contato-cartao__imagem::after {
    background: linear-gradient(180deg, rgba(6,6,8,.28) 0%, rgba(6,6,8,.2) 45%, rgba(10,10,13,.98) 100%);
  }
  .contato-cartao__texto { padding: 34px 26px 38px; }
  .contato-cartao__meios { gap: 26px; }
  .grade--3, .grade--4, .passos { grid-template-columns: 1fr 1fr; }
  .palco { min-height: 220px; }
}

@media (max-width: 640px) {
  :root { --respiro: 18px; }
  .secao { padding: 76px 0; }
  .grade--2, .grade--3, .grade--4, .grade--cartoes, .passos { grid-template-columns: 1fr; }
  .cartao { padding: 26px 22px; }
  .painel { padding: 26px 22px; }
  .painel--largo { padding: 30px 24px; }
  .bloco__texto { padding: 30px 24px; }
  .bloco__imagem { height: 200px; }
  .passo { padding: 28px 24px 32px; }
  .chamada-final { padding: 34px 22px; }
  .chamada-final__imagem { margin-bottom: -34px; }
  .chamada-final__canto { width: 48px; height: 48px; }
  .rodape__grade { grid-template-columns: 1fr; gap: 32px; padding: 48px 0; }
  .rodape__base { justify-content: flex-start; }
  .pilares { flex-direction: column; gap: 24px; }
  .menu-movel { padding: 92px var(--respiro) max(28px, env(safe-area-inset-bottom)); }

  /* No dedo, um elo de 17px de altura não é alvo: as listas ganham
     respiro vertical até chegar perto dos 44px recomendados. */
  .marca { padding: 12px 0; }
  .rodape li { margin-bottom: 0; }
  .rodape li a,
  .rodape__base a { display: inline-block; padding: 11px 0; }
  .contato-cartao .lista li { margin-bottom: 0; }
  .contato-cartao .lista li a,
  .contato-cartao a[href^="mailto"] { display: inline-block; padding: 9px 0; }
}