/* ==========================================================================
   VEXA — site institucional + portfólio
   Paleta "Ignition" (referência: cartela Lumen / Solar / Ignition / Verdant / Null)

     #0b0f14  NULL DEPTH       base — fundo da página
     #0f3b2e  VERDANT FIELD    área fria: faixa central dos arcos, cartões do "antes"
     #c4422b  IGNITION TRACE   ação — botões, selos, o vermelho-laranja da marca
     #e89a6b  SOLAR RESIN      acento legível — texto/ícone de destaque sobre escuro
     #e6d7a8  LUMEN VEIL       luz — texto principal e o filete dos arcos

   Contrastes (WCAG) que sustentam as regras:
     Lumen sobre Null ......... 13,3:1  texto principal
     Solar sobre Null .........  8,5:1  texto de destaque, mesmo pequeno
     Ignition sobre Null ......  3,8:1  SÓ texto grande / elemento de interface
     #fff6e6 sobre Ignition ...  4,7:1  texto do botão
     Null sobre Solar .........  8,5:1  texto escuro sobre Solar
   Proibido: texto pequeno em Ignition sobre o fundo; texto Lumen sobre Ignition
   (3,4:1); Verdant como cor de texto.

   Desempenho: nada de filter:blur animado, nenhum mix-blend em camada fixa,
   toda animação contínua é em transform e para quando sai da tela (main.js).
   ========================================================================== */

/* Fontes hospedadas no próprio site (variáveis: um arquivo cobre todos os pesos).
   Sem ida ao Google = menos DNS/TLS no caminho crítico. */
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 300 600; font-display: swap; src: url("../fonts/inter-tight-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 300 600; font-display: swap; src: url("../fonts/inter-tight-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/manrope-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/manrope-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* paleta */
  --null: #0b0f14;
  --verdant: #0f3b2e;
  --ignition: #c4422b;
  --solar: #e89a6b;
  --lumen: #e6d7a8;

  --cor-fundo: var(--null);
  --cor-texto: var(--lumen);
  --cor-acento: var(--ignition);
  --cor-acento-texto: #fff6e6;
  --fonte-titulo: "Inter Tight", system-ui, sans-serif;
  --fonte-corpo: "Manrope", system-ui, sans-serif;

  /* superfícies — o azul-noite do Null, um degrau acima a cada camada */
  --cor-fundo-2: #11161d;
  --cor-superficie: #171d25;
  --cor-borda: #27303a;

  /* texto: 72% ≈ 6,7:1 · 62% ≈ 4,9:1 — os dois passam em texto pequeno */
  --cor-texto-suave: color-mix(in oklab, var(--lumen) 72%, var(--null));
  --cor-texto-fraco: color-mix(in oklab, var(--lumen) 62%, var(--null));

  --cor-acento-claro: var(--solar);   /* texto/ícone de destaque sobre escuro */
  --cor-destaque: var(--solar);       /* palavra em destaque nos títulos */
  --cor-acento-hover: #a93721;
  --cor-acento-press: #8f2e1c;
  --cor-acento-suave: color-mix(in oklab, var(--ignition) 16%, var(--null));
  --cor-verdant-linha: color-mix(in oklab, var(--verdant) 55%, var(--lumen));

  --cor-brilho: color-mix(in oklab, var(--lumen) 9%, transparent);
  --cor-sombra: color-mix(in oklab, black 60%, transparent);
  --cor-vidro: color-mix(in oklab, var(--null) 74%, transparent);

  /* granulado: SVG de ruído sem cor própria (só alfa) */
  --ruido: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grao-claro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .112 -.0315'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); /* granulado do trecho claro (alfa já reduzido) */
  --ruido-escuro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.6 -.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  --raio: 24px;
  --raio-p: 13px;
  --largura: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* ==========================================================================
   TEMA CLARO POR POSIÇÃO — do "Sobre" até o CTA final o site é claro.
   A cor segue a POSIÇÃO na página, não um evento: as seções desse trecho têm
   classe .zona-clara (tokens claros + fundo creme), e o fim do "Para quem é"
   (.vira-claro) é uma faixa em degradê Null → creme. Rolando nos dois
   sentidos, o escuro volta exatamente quando a seção anterior volta à tela —
   sem gatilho, sem animação, custo zero na rolagem.
   Só o que é FIXO na tela (menu do topo e CTA fixo do celular) troca de tema,
   quando a faixa passa por baixo dele (main.js, IntersectionObserver): os
   tokens são registrados como <color> (@property) e atravessam em .45 s.
   Contraste no claro (fundo #F1E8CF): Null 15,7 · suave 8,7 · fraco 5,1 ·
   Ignition 4,1 (só título) · #A93721 5,3 (detalhe pequeno). Solar dá 1,85: não
   vira texto nem ícone no claro.
   ========================================================================== */
@property --cor-fundo { syntax: "<color>"; inherits: true; initial-value: #0b0f14; }
@property --cor-fundo-2 { syntax: "<color>"; inherits: true; initial-value: #11161d; }
@property --cor-superficie { syntax: "<color>"; inherits: true; initial-value: #171d25; }
@property --cor-borda { syntax: "<color>"; inherits: true; initial-value: #27303a; }
@property --cor-texto { syntax: "<color>"; inherits: true; initial-value: #e6d7a8; }
@property --cor-texto-suave { syntax: "<color>"; inherits: true; initial-value: #a99f80; }
@property --cor-texto-fraco { syntax: "<color>"; inherits: true; initial-value: #938a6f; }
@property --cor-destaque { syntax: "<color>"; inherits: true; initial-value: #e89a6b; }
@property --cor-acento-claro { syntax: "<color>"; inherits: true; initial-value: #e89a6b; }
@property --cor-acento-suave { syntax: "<color>"; inherits: true; initial-value: #2a1a17; }
@property --cor-brilho { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --cor-sombra { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --cor-vidro { syntax: "<color>"; inherits: true; initial-value: transparent; }

.topo, .cta-fixo {
  transition-property: --cor-fundo, --cor-fundo-2, --cor-superficie, --cor-borda, --cor-texto,
    --cor-texto-suave, --cor-texto-fraco, --cor-destaque, --cor-acento-claro, --cor-acento-suave,
    --cor-brilho, --cor-sombra, --cor-vidro;
  transition-duration: .45s;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}
.zona-clara, .topo.claro, .cta-fixo.claro {
  --cor-fundo: #f1e8cf;                 /* Lumen clareado com o creme da marca */
  --cor-fundo-2: #e9ddbc;
  --cor-superficie: #f8f2e2;
  --cor-borda: #d2c194;
  --cor-texto: var(--null);
  --cor-texto-suave: #3e3f3d;
  --cor-texto-fraco: #62615b;
  --cor-destaque: var(--ignition);
  --cor-acento-claro: #a93721;
  --cor-acento-suave: color-mix(in oklab, var(--ignition) 12%, #f1e8cf);
  --cor-brilho: color-mix(in oklab, white 60%, transparent);
  --cor-sombra: color-mix(in oklab, #5a3a1a 26%, transparent);
  --cor-vidro: color-mix(in oklab, #f1e8cf 76%, transparent);
}
/* granulado escuro dentro do trecho claro (o ruído claro some sobre o creme):
   mesma receita do --ruido-escuro, já com a opacidade embutida no alfa */
.zona-clara {
  position: relative; color: var(--cor-texto);
  background-color: var(--cor-fundo);
  background-image: var(--grao-claro);
  /* cobre 2 px acima: junção de seções em fração de pixel deixava o fundo
     escuro da página aparecer numa linha fina */
  box-shadow: 0 -2px 0 color-mix(in oklab, var(--cor-fundo) 97%, #000); /* tom médio do creme com grão */
}
/* CORTINA: o "Para quem é" (.cortina-base) fica preso na tela quando a base
   dele encosta na base da janela, e o trecho claro sobe POR CIMA dele, com
   cantos arredondados e sombra. Na volta, o claro desce e revela o escuro
   exatamente onde estava. É só position: sticky — o navegador faz tudo na
   rolagem, sem JS por quadro. O main.js só informa a altura (--altura), para
   seções mais altas que a tela também ficarem presas pela base. */
.cortina-base {
  position: sticky; z-index: 0;
  top: calc(100vh - var(--altura, 100vh));
  top: calc(100svh - var(--altura, 100svh));
}
.zona-clara { z-index: 1; }
/* Borda do claro em NÉVOA: em vez de um canto reto, a cortina sobe com uma
   fumaça creme por cima (textura gerada para a marca, img/nevoa*.webp, alfa;
   repete na horizontal sem costura). Duas camadas: a de trás parada e a da
   frente derivando devagar de lado — só transform, pausa fora da tela. */
.zona-clara.sobre { box-shadow: none; }
.zona-clara.sobre > .container { position: relative; z-index: 1; }
.nevoa {
  --nevoa-h: clamp(240px, 48vh, 560px);
  position: absolute; left: 0; right: 0; z-index: 0; pointer-events: none;
  top: calc(var(--nevoa-h) * -.82); height: var(--nevoa-h);
  overflow: hidden;
}
.nevoa i {
  position: absolute; top: 0; bottom: 0; left: 0;
  background: url("../img/nevoa-1024.webp") 0 100% / auto 100% repeat-x;  /* é borrada: 1024 px ampliada não perde nada e decodifica rápido */
}
.nevoa .n1 { right: 0; }
.nevoa .n2 {
  /* uma "telha" a mais de largura para o deslizamento fechar o laço sem salto */
  width: calc(100% + var(--nevoa-h) * 2.6947);
  background-position: 0 100%; transform-origin: 0 100%;
  opacity: .55; scale: 1 1.12;
  animation: nevoa-deriva 140s linear infinite; will-change: transform;
}
@keyframes nevoa-deriva { to { transform: translateX(calc(var(--nevoa-h) * -2.6947)); } }
@media (prefers-reduced-motion: reduce) { .nevoa .n2 { animation: none; } }
/* enquanto a cortina sobe, o escuro de trás afunda um pouco (só onde o
   navegador tem animação ligada à rolagem; sem suporte, nada muda) */
@supports (animation-timeline: view()) {
  main { timeline-scope: --cortina; }
  #sobre { view-timeline: --cortina block; }
  .cortina-base::after {
    content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
    background: #000; opacity: 0;
    animation: cortina-afunda linear both;
    animation-timeline: --cortina;
    animation-range: entry 0% entry 100%;
  }
  @keyframes cortina-afunda { to { opacity: .55; } }
}
@media (prefers-reduced-motion: reduce) { .cortina-base::after { display: none; } }
/* Ilhas que continuam escuras dentro do trecho claro: recebem os tokens do
   escuro de volta. */
.zona-clara .escuro-sempre {
  --cor-fundo: var(--null);
  --cor-fundo-2: #11161d;
  --cor-superficie: #171d25;
  --cor-borda: #27303a;
  --cor-texto: var(--lumen);
  --cor-texto-suave: color-mix(in oklab, var(--lumen) 72%, var(--null));
  --cor-texto-fraco: color-mix(in oklab, var(--lumen) 62%, var(--null));
  --cor-destaque: var(--solar);
  --cor-acento-claro: var(--solar);
  --cor-acento-suave: color-mix(in oklab, var(--ignition) 16%, var(--null));
  --cor-brilho: color-mix(in oklab, var(--lumen) 9%, transparent);
  --cor-sombra: color-mix(in oklab, black 60%, transparent);
  --cor-vidro: color-mix(in oklab, var(--null) 74%, transparent);
  color: var(--cor-texto);
}
@media (prefers-reduced-motion: reduce) { .topo, .cta-fixo { transition: none; } }

/* Slot de mídia: placeholder rotulado onde entra print/foto real. */
.slot-midia {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 80% at 20% 10%, var(--cor-acento-suave), transparent 60%),
    linear-gradient(160deg, var(--cor-superficie), var(--cor-fundo-2));
}
.slot-midia > img, .slot-midia > video { width: 100%; height: 100%; object-fit: cover; display: block; }
.slot-midia[data-rotulo]:empty::after {
  content: attr(data-rotulo);
  position: absolute; left: 14px; bottom: 12px;
  font: 500 11px/1 var(--fonte-corpo); letter-spacing: .08em; text-transform: uppercase;
  color: var(--cor-texto-suave);
  padding: 6px 9px; border: 1px dashed var(--cor-borda); border-radius: 999px;
  background: color-mix(in oklab, var(--cor-fundo) 70%, transparent);
}
/* Foto de pessoa/equipe: duotone Ignition (sombras) → Lumen (luzes). */
.duotone > img { filter: grayscale(1) contrast(1.08); }
.duotone:not(:empty)::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--ignition); mix-blend-mode: lighten;
}

/* ==========================================================================
   BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; overflow-x: clip;
  background: var(--cor-fundo); color: var(--cor-texto);
  font: 400 16px/1.6 var(--fonte-corpo);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* Granulado na página inteira. Camada fixa SEM mix-blend: é só alfa por cima,
   então rolar a página não obriga o navegador a re-misturar a tela toda. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none;
  opacity: .045; background-image: var(--ruido);
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--cor-texto); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--solar); color: var(--null); }
[hidden] { display: none !important; }

.pular {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 999px;
  background: var(--cor-acento); color: var(--cor-acento-texto); font-weight: 600;
}
.pular:focus { top: 12px; }

.container { width: 100%; max-width: var(--largura); margin-inline: auto; padding-inline: var(--gutter); }
.secao { padding-block: clamp(88px, 11vw, 150px); }

/* Tipografia */
.titulo-g, .titulo-m, .hero-titulo, .cta-titulo {
  font-family: var(--fonte-titulo); font-weight: 300;
  letter-spacing: -.045em; line-height: 1.02; text-wrap: balance;
}
.titulo-g { font-size: clamp(2.5rem, 5.6vw, 4.6rem); }
.titulo-m { font-size: clamp(1.75rem, 3.4vw, 2.75rem); line-height: 1.08; letter-spacing: -.035em; }
.suave { color: var(--cor-texto-fraco); }
.destaque { color: var(--cor-destaque); }
.rotulo {
  display: inline-block;
  font: 500 12px/1.2 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: .12em; text-transform: uppercase; color: var(--cor-texto-suave);
}
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; margin-bottom: 22px; border-radius: 999px;
  font-size: 14px; color: var(--cor-texto-suave);
  background: var(--cor-fundo-2);
  box-shadow: inset 0 0 0 1px var(--cor-borda), inset 0 1px 0 var(--cor-brilho);
}
.pill span { color: var(--cor-acento-claro); }
.cab { margin-bottom: clamp(40px, 6vw, 72px); }
.cab-centro { text-align: center; display: flex; flex-direction: column; align-items: center; }
.cab-lado { display: grid; gap: 24px; align-items: end; }
.cab-texto { color: var(--cor-texto-suave); font-size: 17px; max-width: 46ch; margin-top: 18px; }
.cab-lado .cab-texto { margin-top: 0; }
.link-sub { color: var(--cor-texto); text-decoration: underline; text-decoration-color: var(--cor-acento-claro); text-underline-offset: 4px; }
.link-sub:hover { color: var(--cor-acento-claro); }

/* Cartão com brilho que segue o ponteiro (--mx/--my vêm do main.js) */
.cartao {
  position: relative; isolation: isolate;
  border-radius: var(--raio);
  background: linear-gradient(180deg, var(--cor-superficie), var(--cor-fundo-2) 240px);
  box-shadow: inset 0 0 0 1px var(--cor-borda), inset 0 1px 0 var(--cor-brilho), 0 30px 60px -34px var(--cor-sombra);
}
.cartao::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -40%), color-mix(in oklab, var(--solar) 13%, transparent), transparent 60%);
  opacity: 0; transition: opacity .4s var(--ease);
}
.cartao:hover::before { opacity: 1; }

/* Grão forte dos painéis (hero, CTA, artes). No hero ele "ferve" (steps). */
.grao {
  position: absolute; inset: -50%; pointer-events: none; opacity: .42; mix-blend-mode: overlay;
  background-image: var(--ruido);
}
.grao-vivo { animation: grao 1.2s steps(4) infinite; will-change: transform; }
@keyframes grao { 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-1%, -2%); } }

/* ==========================================================================
   BOTÕES — pílula com círculo e seta
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 18px;
  min-height: 56px; padding: 6px 6px 6px 26px; border-radius: 999px;
  font-weight: 600; font-size: 16px; letter-spacing: -.01em; white-space: nowrap;
  transition: transform .35s var(--ease), background-color .35s;
}
.btn-seta {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  transition: transform .45s var(--ease);
}
.btn-seta svg { width: 16px; height: 16px; }
.btn:hover .btn-seta { transform: translateX(3px) rotate(-45deg); }
.btn:active { transform: scale(.98); }
.btn-acento {
  background: var(--cor-acento); color: var(--cor-acento-texto);
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--lumen) 40%, transparent), inset 0 -1px 0 color-mix(in oklab, black 22%, transparent), 0 14px 30px -16px var(--cor-sombra);
}
.btn-acento .btn-seta { background: var(--lumen); color: var(--null); }
.btn-acento:hover { background: var(--cor-acento-hover); }
.btn-acento:active { background: var(--cor-acento-press); }
.btn-largo { width: 100%; }
.btn-link {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px;
  font-weight: 500; color: var(--cor-texto-suave);
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px;
  transition: color .25s, text-decoration-color .25s;
}
.btn-link svg { width: 20px; height: 20px; color: var(--cor-acento-claro); }
.btn-link:hover { color: var(--cor-texto); text-decoration-color: currentColor; }
.btn-link-forte { color: var(--cor-texto); margin-top: 28px; }

/* ==========================================================================
   TOPO — wordmark, navegação em pílula de vidro, CTA
   ========================================================================== */
.topo { position: sticky; top: 0; z-index: 30; padding: 14px 0; }
.topo-in {
  width: 100%; max-width: calc(var(--largura) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.marca, .nav ul, .menu-btn {
  background: var(--cor-vidro); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px var(--cor-borda), inset 0 1px 0 var(--cor-brilho);
}
.marca { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border-radius: 999px; }
.marca svg { height: 20px; width: auto; color: var(--cor-texto); }
.nav { display: none; }
.nav ul { display: flex; gap: 2px; padding: 6px; border-radius: 999px; }
.nav a { display: block; padding: 9px 16px; border-radius: 999px; font-size: 15px; color: var(--cor-texto-suave); transition: color .25s, background-color .25s; }
.nav a:hover, .nav a.ativo { color: var(--cor-texto); background: var(--cor-superficie); }
.topo-acoes { display: flex; align-items: center; gap: 8px; flex: none; }
.btn-mini {
  display: none; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 999px;
  font-weight: 600; font-size: 15px;
  background: var(--cor-acento); color: var(--cor-acento-texto);
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--lumen) 40%, transparent);
  transition: background-color .25s;
}
.btn-mini:hover { background: var(--cor-acento-hover); }
.btn-mini svg { width: 18px; height: 18px; }

.menu-btn { position: relative; width: 48px; height: 48px; border-radius: 50%; }
.menu-btn span {
  position: absolute; left: 15px; right: 15px; height: 1.6px; border-radius: 2px; background: currentColor;
  transition: transform .35s var(--ease), top .35s var(--ease);
}
.menu-btn span:first-child { top: 20px; }
.menu-btn span:last-child { top: 27px; }
.menu-btn[aria-expanded="true"] span:first-child { top: 23.5px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { top: 23.5px; transform: rotate(-45deg); }
.menu-mobile {
  margin: 12px var(--gutter) 0; padding: 12px; border-radius: var(--raio);
  background: color-mix(in oklab, var(--cor-fundo) 96%, transparent);
  box-shadow: inset 0 0 0 1px var(--cor-borda), 0 30px 60px -20px var(--cor-sombra);
  animation: descer .35s var(--ease);
}
.menu-mobile ul { margin-bottom: 12px; }
.menu-mobile li a {
  display: flex; align-items: center; min-height: 52px; padding: 0 14px; border-radius: var(--raio-p);
  font: 300 24px/1 var(--fonte-titulo); letter-spacing: -.03em;
}
.menu-mobile li a:hover { background: var(--cor-fundo-2); }
.menu-email { display: block; padding: 14px; text-align: center; font-size: 14px; color: var(--cor-texto-suave); text-decoration: underline; text-underline-offset: 4px; }
@keyframes descer { from { opacity: 0; transform: translateY(-8px); } }

/* ==========================================================================
   HERO — arcos de luz (referência: gradiente granulado com filete luminoso)
   Dois discos enormes ancorados nos cantos: miolo claro (Lumen→Solar→Ignition),
   escurecem até o Null perto da borda e terminam num filete de luz. Entre eles
   corre a faixa fria (Verdant). Tudo gradiente: zero filter, zero imagem.
   ========================================================================== */
.hero { padding: 4px clamp(16px, 5.8vw, 110px) 0; }
.hero-painel {
  position: relative; overflow: hidden; isolation: isolate;
  max-width: 1700px; margin-inline: auto;
  display: grid; place-items: center;
  border-radius: clamp(20px, 2.4vw, 32px);
  background:
    linear-gradient(115deg, var(--null) 18%, var(--verdant) 50%, var(--null) 82%);
  box-shadow: inset 0 0 0 1px var(--cor-borda), 0 40px 90px -40px var(--cor-sombra);
}
.luz { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
/* Tie-dye da marca: <canvas data-tinta> desenhado pelo js/tinta.js (WebGL).
   Até ele ficar pronto (ou sem WebGL), vale o fundo reserva da .luz: manchas
   estáticas na mesma paleta, então a 1ª pintura já tem a cara certa e o
   canvas só entra por cima com um fade. */
.luz {
  /* recorte garantido nos cantos: camadas na GPU (canvas, grão animado com
     mix-blend) escapavam do border-radius do painel e deixavam uma borda clara */
  border-radius: inherit;
  clip-path: inset(0 round clamp(20px, 2.4vw, 32px));
  background:
    radial-gradient(38% 52% at 12% 30%, color-mix(in oklab, var(--solar) 70%, transparent), transparent 70%),
    radial-gradient(46% 60% at 22% 78%, color-mix(in oklab, var(--ignition) 85%, transparent), transparent 72%),
    radial-gradient(40% 55% at 88% 22%, color-mix(in oklab, var(--ignition) 80%, transparent), transparent 70%),
    radial-gradient(34% 46% at 82% 80%, color-mix(in oklab, var(--solar) 55%, transparent), transparent 70%),
    radial-gradient(50% 70% at 55% 50%, color-mix(in oklab, var(--verdant) 70%, transparent), transparent 75%),
    var(--null);
}
.tinta {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  opacity: 0; transition: opacity 1.2s cubic-bezier(.4, 0, .2, 1);
}
.tinta-ok .tinta { opacity: 1; }
/* o mármore já é pontilhado: o grão por cima fica só como textura leve */
.tinta-ok .grao { opacity: .14; }
/* texto do hero sobre o mármore: sombra larga e macia (estática, sem custo) */
.hero-titulo, .hero-sub { text-shadow: 0 1px 2px rgba(18, 8, 6, .35), 0 2px 22px rgba(18, 8, 6, .6); }
.tinta-ok .hero-sub { color: color-mix(in oklab, var(--lumen) 86%, var(--null)); }
.luz::after { /* véu no centro: o texto lê bem em qualquer quadro da animação */
  content: ""; position: absolute; inset: 0;
  /* véu em brasa escura (não cinza): sobre o laranja ele escurece sem "sujar" */
  background: radial-gradient(56% 66% at 50% 48%, color-mix(in oklab, #120806 58%, transparent), transparent 80%);
}

.hero-txt {
  position: relative; text-align: center; max-width: 1440px;
  padding: clamp(36px, 2.6vw, 48px) clamp(18px, 4vw, 40px) clamp(40px, 3vw, 56px);
  display: flex; flex-direction: column; align-items: center;
}
.selo-pill {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 20px;
  padding: 8px 15px; border-radius: 999px; font-size: 14px; font-weight: 500;
  background: color-mix(in oklab, var(--null) 70%, transparent);
  box-shadow: inset 0 0 0 1px var(--cor-borda), inset 0 1px 0 var(--cor-brilho);
}
.selo-pill .sep { color: var(--cor-texto-fraco); }
.selo-ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--solar); box-shadow: 0 0 0 4px color-mix(in oklab, var(--solar) 22%, transparent); animation: pulsa 2.4s ease-in-out infinite; }
@keyframes pulsa { 50% { box-shadow: 0 0 0 7px transparent; } }
.hero-titulo { font-size: clamp(2.2rem, 3.5vw, 4.1rem); letter-spacing: -.05em; }
.hero-sub { margin-top: 18px; max-width: 72ch; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.55; color: var(--cor-texto-suave); }
.hero-sub strong { display: block; color: var(--cor-texto); font-weight: 600; }
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 26px; margin-top: 30px; }

/* ==========================================================================
   FAIXA
   ========================================================================== */
.faixa {
  overflow: hidden; padding: 22px 0; margin-top: clamp(36px, 4vw, 56px);
  border-block: 1px solid var(--cor-borda); background: var(--cor-fundo-2);
  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}
.faixa-trilho { display: flex; width: max-content; align-items: center; gap: 24px; animation: rolar 40s linear infinite; will-change: transform; }
.faixa span { font: 300 clamp(18px, 1.6vw, 24px)/1.1 var(--fonte-titulo); letter-spacing: -.02em; white-space: nowrap; }
.faixa i { font-style: normal; color: var(--solar); font-size: 12px; }
@keyframes rolar { to { transform: translateX(-50%); } }

/* ==========================================================================
   PROBLEMA — o "antes" fica no frio (Verdant)
   ========================================================================== */
.dor { padding-top: clamp(56px, 6vw, 96px); }
.dor-grade { display: grid; gap: 16px; }
.dor-item {
  padding: 30px 28px 28px; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in oklab, var(--verdant) 70%, var(--cor-fundo-2)), var(--cor-fundo-2) 220px);
}
.dor-item::after { content: ""; position: absolute; left: 28px; right: 28px; top: 0; height: 2px; background: var(--cor-verdant-linha); }
.dor-aspas { display: block; height: 34px; font: 300 64px/1 var(--fonte-titulo); color: var(--cor-verdant-linha); }
.dor-item p { font-size: 18px; line-height: 1.5; color: var(--cor-texto); }
.dor-virada {
  margin-top: clamp(40px, 6vw, 64px); max-width: 30ch;
  font: 300 clamp(1.6rem, 3.2vw, 2.6rem)/1.15 var(--fonte-titulo); letter-spacing: -.035em; color: var(--cor-texto-suave);
}
.dor-virada strong { font-weight: 400; color: var(--cor-texto); }

/* ==========================================================================
   SERVIÇOS — três frentes (cartões com arte de arcos)
   ========================================================================== */
.servicos-grade { display: grid; gap: 16px; }
.servico { padding: 12px 12px 30px; display: flex; flex-direction: column; }
.servico .rotulo, .servico h3, .servico p, .servico ul { margin-inline: 16px; }
.servico-arte {
  --ax: 0%; --ay: 0%;
  position: relative; overflow: hidden; aspect-ratio: 16 / 10; margin-bottom: 24px; border-radius: calc(var(--raio) - 10px);
  display: grid; place-items: center;
  background:
    radial-gradient(circle at var(--ax) var(--ay),
      var(--lumen) 0, var(--solar) 18%, var(--ignition) 36%, var(--null) 58%,
      var(--ignition) 60.5%, var(--lumen) 61.5%, var(--solar) 62.5%, transparent 66%),
    linear-gradient(135deg, var(--null), var(--verdant));
}
.arte-2 { --ax: 100%; --ay: 0%; }
.arte-3 { --ax: 50%; --ay: 120%; }
.servico-arte > span:first-child { /* listras de vidro */
  position: absolute; inset: 0 -40px 0 0;
  background: repeating-linear-gradient(90deg, color-mix(in oklab, var(--null) 30%, transparent) 0 2px, transparent 2px 28px);
  transition: transform 1.2s var(--ease);
}
.servico-arte .grao { opacity: .3; }
.servico:hover .servico-arte > span:first-child { transform: translateX(28px); }
.servico-icone {
  position: relative; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%;
  background: var(--lumen); color: var(--ignition);
  box-shadow: 0 0 0 10px color-mix(in oklab, var(--lumen) 14%, transparent), 0 20px 40px -14px var(--cor-sombra);
}
.servico-icone svg { width: 32px; height: 32px; }
.servico h3 { margin-top: 10px; margin-bottom: 10px; font: 400 26px/1.15 var(--fonte-titulo); letter-spacing: -.025em; }
.servico p { color: var(--cor-texto-suave); font-size: 15.5px; }
.servico ul { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--cor-borda); display: flex; flex-wrap: wrap; gap: 8px; }
.servico li { padding: 5px 11px; border-radius: 999px; font-size: 13px; color: var(--cor-texto-suave); box-shadow: inset 0 0 0 1px var(--cor-borda); }

/* ==========================================================================
   ENTREGAS — lista detalhada com lateral fixa
   ========================================================================== */
.entregas { background: linear-gradient(180deg, var(--cor-fundo), var(--cor-fundo-2) 30%, var(--cor-fundo-2) 70%, var(--cor-fundo)); }
.entregas-grade { display: grid; gap: 40px; }
.entregas-lado .btn { margin-top: 32px; }
.lista-entregas { border-top: 1px solid var(--cor-borda); }
.entrega {
  position: relative; display: grid; grid-template-columns: 1fr auto; gap: 6px 18px;
  padding: 24px 4px; border-bottom: 1px solid var(--cor-borda);
}
.entrega::before {
  content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%;
  background: var(--solar); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease);
}
.entrega:hover::before { transform: scaleX(1); }
.entrega-cat { grid-column: 1 / -1; font: 500 12px/1.2 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--solar); }
.entrega-txt h3 { font: 500 clamp(19px, 2vw, 23px)/1.25 var(--fonte-titulo); letter-spacing: -.02em; }
.entrega-txt p { margin-top: 6px; color: var(--cor-texto-suave); font-size: 15.5px; }
.entrega-tag {
  align-self: start; padding: 6px 12px; border-radius: 999px; font-size: 13px; white-space: nowrap;
  color: var(--cor-texto-suave); box-shadow: inset 0 0 0 1px var(--cor-borda);
}
.entrega-extra .entrega-tag { color: var(--cor-acento-texto); background: var(--cor-acento); box-shadow: none; }

/* ==========================================================================
   PROJETOS — portfólio (6 cards: grade 3×2 no desktop)
   ========================================================================== */
.projetos-cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px; margin-bottom: clamp(32px, 5vw, 56px); }
.projetos-cab > div { max-width: 760px; }
.projetos-cab .cab-texto { margin-top: 14px; }
.link-seta { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--cor-texto); font-weight: 600; text-decoration: underline; text-decoration-color: var(--solar); text-underline-offset: 5px; }
.link-seta svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.link-seta:hover svg { transform: translateX(3px); }
/* galeria mais larga que o texto: mesmas bordas do painel do hero */
.projetos { padding-top: 0; }
.projetos .container { max-width: 1680px; }
@media (min-width: 900px) { .projetos .container { padding-inline: clamp(16px, 5.8vw, 110px); } }
.projetos .projetos-cab { max-width: calc(var(--largura) - 2 * var(--gutter)); margin-inline: auto; } /* título na mesma coluna das outras seções */
.projetos-grade { display: grid; gap: clamp(32px, 3.4vw, 48px) clamp(16px, 1.8vw, 28px); }
.projeto { display: block; }
.projeto-thumb {
  position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 18px;
  background: var(--cor-superficie);
  box-shadow: inset 0 0 0 1px var(--cor-borda), 0 24px 50px -30px var(--cor-sombra);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.projeto-thumb::before { /* barra de navegador */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30px; z-index: 2;
  background:
    radial-gradient(circle at 16px 15px, var(--cor-borda) 4px, transparent 4.5px),
    radial-gradient(circle at 31px 15px, var(--cor-borda) 4px, transparent 4.5px),
    radial-gradient(circle at 46px 15px, var(--cor-borda) 4px, transparent 4.5px),
    var(--cor-fundo-2);
  border-bottom: 1px solid var(--cor-borda);
}
.projeto-thumb .slot-midia { position: absolute; inset: 30px 0 0; }
/* Print de página inteira: no hover a imagem desce, como quem rola o site. */
.projeto-thumb img { object-position: top; transition: object-position 4.5s ease-in-out; }
.projeto:hover .projeto-thumb img, .projeto:focus-visible .projeto-thumb img { object-position: bottom; }
.projeto:hover .projeto-thumb, .projeto:focus-visible .projeto-thumb { transform: translateY(-4px); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--lumen) 30%, transparent), 0 30px 60px -30px var(--cor-sombra); }
/* Placeholder enquanto não há print: um "site" abstrato na paleta. */
.projeto .slot-midia:empty {
  --px: 78%; --py: 30%;
  background:
    linear-gradient(color-mix(in oklab, var(--lumen) 90%, transparent), color-mix(in oklab, var(--lumen) 90%, transparent)) 9% 44% / 44% 8% no-repeat,
    linear-gradient(color-mix(in oklab, var(--lumen) 36%, transparent), color-mix(in oklab, var(--lumen) 36%, transparent)) 9% 59% / 30% 4% no-repeat,
    linear-gradient(color-mix(in oklab, var(--lumen) 36%, transparent), color-mix(in oklab, var(--lumen) 36%, transparent)) 9% 67% / 24% 4% no-repeat,
    linear-gradient(var(--ignition), var(--ignition)) 9% 86% / 16% 9% no-repeat,
    radial-gradient(48% 70% at var(--px) var(--py), color-mix(in oklab, var(--solar) 85%, transparent), color-mix(in oklab, var(--ignition) 60%, transparent) 45%, transparent 72%),
    radial-gradient(45% 55% at calc(var(--px) - 14%) calc(var(--py) + 40%), color-mix(in oklab, var(--verdant) 95%, transparent), transparent 70%),
    var(--cor-fundo-2);
}
.projeto .slot-midia:empty::after { left: auto; right: 14px; bottom: 14px; font-size: 11px; }
.projeto:nth-child(2) .slot-midia:empty { --px: 30%; --py: 70%; }
.projeto:nth-child(3) .slot-midia:empty { --px: 90%; --py: 80%; }
.projeto:nth-child(4) .slot-midia:empty { --px: 60%; --py: 10%; }
.projeto:nth-child(5) .slot-midia:empty { --px: 85%; --py: 55%; }
.projeto:nth-child(6) .slot-midia:empty { --px: 45%; --py: 20%; }
.projeto-thumb .grao { z-index: 1; opacity: .2; }
.projeto-tag {
  position: absolute; left: 12px; top: 34px; z-index: 3;
  padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: var(--lumen); color: var(--null);
}
.projeto-info { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-top: 18px; padding-inline: 2px; }
.projeto-info h3 { font: 400 clamp(20px, 1.7vw, 24px)/1.2 var(--fonte-titulo); letter-spacing: -.02em; }
.projeto-info p { margin-top: 4px; font-size: 15px; color: var(--cor-texto-suave); }
.projeto-seta {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--cor-borda); transition: background-color .3s, color .3s, transform .4s var(--ease);
}
.projeto-seta svg { width: 14px; height: 14px; }
.projeto:hover .projeto-seta { background: var(--lumen); color: var(--null); transform: rotate(-45deg); }

/* ==========================================================================
   COMO FUNCIONA — etapas
   ========================================================================== */
.fases { display: grid; gap: 16px; }
.fase { padding: 30px 28px 32px; overflow: hidden; }
.fase-num {
  display: block; margin-bottom: 36px;
  font: 300 clamp(64px, 7vw, 92px)/.8 var(--fonte-titulo); letter-spacing: -.06em;
  background: linear-gradient(180deg, var(--lumen), color-mix(in oklab, var(--solar) 30%, var(--null)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.fase h3 { margin: 10px 0 10px; font: 500 22px/1.2 var(--fonte-titulo); letter-spacing: -.02em; }
.fase p { color: var(--cor-texto-suave); font-size: 15.5px; }
.fase ul { margin-top: 16px; display: grid; gap: 6px; }
.fase li { position: relative; padding-left: 18px; font-size: 14.5px; color: var(--cor-texto-suave); }
.fase li::before { content: ""; position: absolute; left: 0; top: .7em; width: 8px; height: 1.5px; background: var(--solar); }
.fase::after { /* linha de progresso */
  content: ""; position: absolute; left: 28px; right: 28px; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--ignition), var(--solar) 40%, transparent);
  transform-origin: left; transform: scaleX(.25); transition: transform .8s var(--ease);
}
.fase:hover::after, .fase.visivel::after { transform: scaleX(1); }

/* ==========================================================================
   PARA QUEM É / NÃO É
   ========================================================================== */
.pq-grade { display: grid; gap: 16px; }
.pq { padding: clamp(28px, 4vw, 44px); }
.pq h3 { margin-bottom: 22px; font: 400 clamp(24px, 2.6vw, 30px)/1.1 var(--fonte-titulo); letter-spacing: -.03em; }
.pq li { position: relative; padding: 14px 0 14px 40px; border-top: 1px solid var(--cor-borda); font-size: 16.5px; }
.pq li::before {
  content: "✓"; position: absolute; left: 0; top: 13px;
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  font: 700 13px/1 var(--fonte-corpo);
  background: var(--ignition); color: var(--cor-acento-texto);
}
.pq-nao { background: var(--cor-fundo-2); }
.pq-nao h3, .pq-nao li { color: var(--cor-texto-suave); }
.pq-nao li::before { content: "✕"; font-size: 11px; background: transparent; color: var(--cor-texto-suave); box-shadow: inset 0 0 0 1.5px var(--cor-texto-fraco); }

/* ==========================================================================
   SOBRE
   ========================================================================== */
.sobre-grade { display: grid; gap: 40px; align-items: center; }
.sobre-foto { position: relative; max-width: 520px; }
.sobre-foto .slot-midia { aspect-ratio: 4 / 5; border-radius: calc(var(--raio) + 8px); box-shadow: inset 0 0 0 1px var(--cor-borda), 0 40px 90px -40px var(--cor-sombra); }

/* Retrato: o arquivo é colorido; o P&B é grayscale(var(--cinza)).
   --cinza 1 = preto e branco, 0 = cores originais. O espaço é reservado pelo
   aspect-ratio do slot + width/height do <img>, então nada se desloca ao carregar.
   Enquadramento: o rosto está a ~41% / 27% da foto — é o ponto que fica no
   lugar quando o recorte muda por tamanho de tela. */
.sobre-retrato { --cinza: 1; }
.sobre-retrato picture { display: contents; }
.sobre-retrato img {
  width: 100%; height: 100%; object-fit: cover; object-position: 41% 27%;
  filter: grayscale(var(--cinza));
}
/* a borda interna fica por cima da foto */
.sobre-retrato::after {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--cor-borda) 70%, transparent);
}
/* Desktop (hover de verdade + ponteiro fino): cor no hover, ~500 ms, sem mexer no enquadramento. */
/* Reserva sem JS: no desktop a cor entra no hover (filtro). Com JS, o main.js
   liga .pinta e a cor passa a ser "pintada" num <canvas> por cima (ver main.js). */
@media (hover: hover) and (pointer: fine) {
  .sobre-retrato:not(.pinta) img { transition: filter .5s cubic-bezier(.4, 0, .2, 1); }
  .sobre-foto:hover .sobre-retrato:not(.pinta) { --cinza: 0; }
}
.sobre-retrato.pinta img { filter: grayscale(1); transition: none; }
.retrato-tinta {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; border-radius: inherit;
}
/* Celular estreito: recorte um pouco mais curto (5:6) para o rosto ganhar a tela;
   o object-position segura o rosto no lugar. */
@media (max-width: 559px) {
  .sobre-foto .sobre-retrato { aspect-ratio: 5 / 6; }
}
@media (prefers-reduced-motion: reduce) {
  .sobre-retrato { --cinza: 0 !important; }
  .sobre-retrato img { transition: none; }
}
.sobre-bio { margin-top: 24px; font-size: 18px; color: var(--cor-texto-suave); max-width: 54ch; }
.sobre-bio + .sobre-bio { margin-top: 14px; }
.sobre-bio.sobre-assina { margin-top: 22px; padding-left: 18px; border-left: 2px solid var(--cor-acento-claro); color: var(--cor-texto); }
.credenciais { margin-top: 32px; border-top: 1px solid var(--cor-borda); }
.credenciais li { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--cor-borda); }
.cred-rotulo { font: 500 12px/1.2 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--cor-texto-fraco); }
.credenciais a { text-decoration: underline; text-decoration-color: var(--cor-acento-claro); text-underline-offset: 4px; }

/* ==========================================================================
   COMPROMISSO — selo giratório
   ========================================================================== */
.compromisso { padding-top: 0; }
.compromisso-painel { display: grid; gap: 32px; align-items: center; justify-items: center; padding: clamp(32px, 5vw, 64px); text-align: center; }
.selo { position: relative; width: 190px; aspect-ratio: 1; flex: none; }
.selo-anel { width: 100%; height: 100%; animation: girar 30s linear infinite; will-change: transform; }
.selo-anel text { font: 600 12px var(--fonte-corpo); letter-spacing: .12em; text-transform: uppercase; fill: var(--cor-texto-suave); }
.selo-centro {
  position: absolute; inset: 34px; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, var(--solar), var(--ignition) 55%, #7a2516);
  color: var(--cor-acento-texto);
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--lumen) 45%, transparent), 0 20px 40px -14px var(--cor-sombra);
}
.selo-centro svg { width: 62%; height: auto; }
@keyframes girar { to { transform: rotate(360deg); } }
.compromisso-txt .rotulo { margin-bottom: 14px; }
.compromisso-txt p:last-child { margin-top: 18px; color: var(--cor-texto-suave); max-width: 60ch; }

/* ==========================================================================
   FAQ — <details> nativo
   ========================================================================== */
.faq-grade { display: grid; gap: 40px; }
.faq-lista { border-top: 1px solid var(--cor-borda); }
.faq-item { border-bottom: 1px solid var(--cor-borda); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 72px; padding: 18px 2px; cursor: pointer; list-style: none;
  font: 400 clamp(18px, 1.8vw, 21px)/1.3 var(--fonte-titulo); letter-spacing: -.015em;
  transition: color .25s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--cor-acento-claro); }
.faq-item h3 { font: inherit; }
.faq-icone { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--cor-borda); transition: transform .4s var(--ease), background-color .3s; }
.faq-icone::before, .faq-icone::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; translate: -50% -50%; background: var(--cor-texto); border-radius: 2px; }
.faq-icone::after { transform: rotate(90deg); }
.faq-item[open] .faq-icone { transform: rotate(45deg); background: var(--ignition); }
.faq-item[open] .faq-icone::before, .faq-item[open] .faq-icone::after { background: var(--cor-acento-texto); }
.faq-resp { padding: 0 56px 26px 2px; color: var(--cor-texto-suave); }
.faq-resp p + p { margin-top: 10px; }
.faq-item[open] .faq-resp { animation: descer .4s var(--ease); }

/* ==========================================================================
   CTA FINAL — painel com listras de vidro sobre os arcos
   ========================================================================== */
.cta-final { padding-bottom: clamp(72px, 9vw, 120px); }
.cta-painel {
  position: relative; overflow: hidden; isolation: isolate; border-radius: clamp(22px, 3vw, 32px);
  min-height: 520px; display: flex; align-items: flex-end;
  background: var(--cor-fundo-2);
  box-shadow: inset 0 0 0 1px var(--cor-borda), 0 40px 90px -40px var(--cor-sombra);
}
.cta-listras {
  position: absolute; z-index: -1; inset: 0 0 0 38%; overflow: hidden;
  background: linear-gradient(160deg, var(--null), var(--verdant));
  mask-image: linear-gradient(90deg, transparent, black 30%);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 30%);
}
.cta-listras::before { /* o arco de luz — anima por transform, não por background-position */
  content: ""; position: absolute; width: 130%; aspect-ratio: 1; left: 20%; top: -10%; border-radius: 50%;
  background: radial-gradient(circle closest-side,
    var(--lumen) 0%, var(--solar) 24%, var(--ignition) 50%, #4a160d 72%, var(--null) 85%,
    var(--ignition) 89.5%, var(--lumen) 90.8%, var(--solar) 92%, transparent 96%);
  animation: ondular 14s ease-in-out infinite alternate; will-change: transform;
}
.cta-listras::after { /* listras de vidro */
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, color-mix(in oklab, var(--null) 55%, transparent) 0 3px, transparent 3px 7%);
}
@keyframes ondular { to { transform: translate(-8%, 6%) scale(1.06); } }
.cta-listras .grao { z-index: 1; }
.cta-txt { position: relative; padding: clamp(32px, 6vw, 88px); max-width: 820px; }
.cta-titulo { font-size: clamp(3rem, 8.4vw, 7.4rem); line-height: .96; letter-spacing: -.055em; }
.cta-txt p { margin-top: 22px; max-width: 46ch; color: var(--cor-texto-suave); font-size: 17px; }
.cta-txt .hero-ctas { justify-content: flex-start; }
.cta-txt .btn-link {
  padding: 0 20px; border-radius: 999px; color: var(--cor-texto);
  background: color-mix(in oklab, var(--cor-fundo) 80%, transparent);
  box-shadow: inset 0 0 0 1px var(--cor-borda);
}
/* CTA no trecho claro: mesma composição (arco + listras de vidro + grão), com
   base creme. O disco segue quente; a faixa escura do arco vira Ignition
   profundo e o filete de luz fica em creme, como luz sobre papel. */
.zona-clara .cta-painel { background: linear-gradient(160deg, var(--cor-superficie), var(--cor-fundo-2)); }
.zona-clara .cta-listras { background: linear-gradient(160deg, #efe4c6, var(--lumen)); }
.zona-clara .cta-listras::before {
  background: radial-gradient(circle closest-side,
    #fff6e6 0%, var(--solar) 26%, var(--ignition) 52%, #8f2e1c 72%, #5e1d11 82%,
    var(--ignition) 87%, var(--solar) 89.5%, #fff6e6 91%, var(--solar) 92.6%,
    color-mix(in oklab, var(--solar) 40%, transparent) 94.5%, transparent 97%);
}
.zona-clara .cta-listras::after {
  background: repeating-linear-gradient(90deg, color-mix(in oklab, #fff6e6 42%, transparent) 0 3px, transparent 3px 7%);
}

/* CTA fixo no celular */
.cta-fixo {
  position: fixed; z-index: 25; left: 0; right: 0; bottom: 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, var(--cor-fundo) 45%);
  transform: translateY(110%); visibility: hidden;
  transition: transform .45s var(--ease), visibility 0s linear .45s;
}
.cta-fixo.on { transform: none; visibility: visible; transition: transform .45s var(--ease), visibility 0s; }

/* ==========================================================================
   RODAPÉ VEXA — componente portátil (export-footer)
   Medidas em px de propósito — ver BRIEFING do componente.
   ========================================================================== */
.vexa-footer {
  --vexa-red: #b8452b;        /* fundo sob o vídeo (antes de carregar): laranja mais fundo, o texto creme lê */
  --vexa-ink: #fff6e6;        /* texto creme; o véu .vexa-footer__luz::after garante a leitura sobre o túnel claro */
  --vexa-font-display: var(--fonte-titulo);
  --vexa-font-text: var(--fonte-corpo);
  --vexa-max: 1280px;
  --vexa-gutter: 40px;
  --vexa-parallax: 200px;
  --vexa-p: 1;               /* nasce em 1: sem JS o rodapé aparece inteiro */

  position: relative; width: 100%; overflow: clip;
  color: var(--vexa-ink); background: var(--vexa-red);
  font-family: var(--vexa-font-text);
  -webkit-font-smoothing: antialiased;
}
.vexa-footer__panel {
  position: relative;
  transform: translate3d(0, calc(var(--vexa-parallax) * (var(--vexa-p) - 1)), 0);
  will-change: transform;
}
/* ---------------------------------------------------------- o túnel ---
   Vídeo do túnel de luz esticado (object-fit: fill) sobre o fundo, aparecendo
   com a rolagem (opacidade = --vexa-p). media/tunel.mp4 é o vídeo original
   recolorido para a paleta (LUT 3D: Null → Verdant → Ignition → Solar → Lumen),
   sem áudio, 1280px. O main.js só toca quando o rodapé está perto da tela. */
.vexa-footer__luz { position: absolute; inset: 0; pointer-events: none; opacity: var(--vexa-p); transition: opacity .9s ease; overflow: hidden; }
.vexa-footer__video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: fill; transform-origin: 50% 50%; }
/* Tom sobre o túnel: o vídeo vai do laranja ao claro, e o texto é creme.
   Em vez de um véu escuro translúcido (deixava "fosco", acinzentado), um
   laranja em multiply: escurece mantendo a cor viva e encurta o gradiente.
   Medido com o vídeo tocando (10 quadros, fundo mais claro atrás de cada
   bloco): pior caso 4,90:1 — passa até no texto pequeno. Não clareie o tom
   sem medir de novo. */
.vexa-footer__luz::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: #cf5236; mix-blend-mode: multiply;
}
.vexa-footer__inner { text-shadow: 0 1px 2px rgba(40, 12, 7, .35), 0 2px 18px rgba(40, 12, 7, .45); }
/* Cursor no rodapé (desktop): o main.js desloca o túnel bem de leve na direção
   do mouse, com inércia (só transform). */
.vexa-footer__grao {
  position: absolute; inset: 0; pointer-events: none;
  opacity: calc(.08 * var(--vexa-p)); background-image: var(--ruido);
}
.vexa-footer__inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: space-between; gap: 64px;
  max-width: var(--vexa-max); margin: 0 auto; padding: 60px 20px calc(30px + env(safe-area-inset-bottom));
  opacity: var(--vexa-p);
  transform: translate3d(0, calc(24px * (1 - var(--vexa-p))), 0);
  transition: opacity .8s ease, transform .9s cubic-bezier(.2,.7,.2,1);
}
.vexa-footer__top { display: flex; flex-direction: column; gap: 30px; }
.vexa-footer__titulo { margin: 0; font-family: var(--vexa-font-display); font-weight: 400; font-size: 24px; line-height: 110%; letter-spacing: -0.72px; text-wrap: balance; }
.vexa-footer__contato { margin: 16px 0 0; font-size: 14px; line-height: 140%; letter-spacing: 0.28px; }
.vexa-footer__email { color: var(--vexa-ink); text-decoration: underline; transition: color .3s ease; }
.vexa-footer__email:hover { color: var(--lumen); }
.vexa-footer__rotulo { font-size: 11px; font-weight: 500; letter-spacing: .22px; color: var(--vexa-ink); }
.vexa-footer__nav { margin-top: 12px; }
.vexa-footer__nav ul { margin: 0; padding: 0; list-style: none; }
.vexa-footer__nav a {
  display: inline-flex; font-family: var(--vexa-font-display); font-size: 20px; line-height: 1.2; letter-spacing: -.6px;
  color: var(--vexa-ink); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px;
  transition: color .3s ease, text-decoration-color .3s ease;
}
.vexa-footer__nav a:hover { color: var(--lumen); text-decoration-color: currentColor; }
.vexa-footer__social { display: flex; align-items: flex-start; gap: 12px; margin-top: 30px; }
.vexa-footer__icone {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--lumen); color: var(--null); transition: transform .3s ease, opacity .3s ease;
}
.vexa-footer__icone:hover { transform: translateY(-2px); opacity: .88; }
.vexa-footer__icone svg { width: 18px; height: 18px; display: block; }
.vexa-footer__base { display: flex; flex-direction: column; gap: 30px; }
.vexa-footer__marca { order: 1; display: flex; align-items: center; height: 80px; color: var(--vexa-ink); }
.vexa-footer__marca svg { height: 68px; width: auto; opacity: .94; }
.vexa-footer__legal { order: 2; display: flex; flex-direction: column; gap: 8px; font-size: 11px; font-weight: 500; letter-spacing: .22px; }
.vexa-footer__legal span { color: var(--vexa-ink); }
.vexa-footer__legal a { color: var(--vexa-ink); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color .3s ease; }
.vexa-footer__legal a:hover { text-decoration-color: currentColor; }

/* ==========================================================================
   REVEAL NO SCROLL
   ========================================================================== */
.js .revelar { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--atraso, 0s); }
.js .revelar.visivel { opacity: 1; transform: none; }

/* Animações contínuas param quando o bloco sai da tela (classe vem do main.js). */
.parado, .parado *, .parado::before, .parado::after, .parado *::before, .parado *::after { animation-play-state: paused !important; }

/* ==========================================================================
   RESPONSIVO — mobile-first
   ========================================================================== */
@media (max-width: 559px) {
  .topo { padding: 10px 0; }
  .hero-txt { padding: 30px 16px 32px; }
  .selo-pill { margin-bottom: 16px; font-size: 12.5px; }
  .hero-titulo { font-size: 2.2rem; }
  .hero-sub { margin-top: 14px; font-size: 15.5px; line-height: 1.5; }
  .hero-ctas { margin-top: 22px; gap: 4px; flex-direction: column; align-items: stretch; width: 100%; }
  .hero-ctas .btn { width: 100%; }
  .hero-ctas .btn-link { justify-content: center; }
  /* celular: painel alto e estreito — o véu fica mais forte atrás do texto */
  .luz::after { background: radial-gradient(72% 56% at 50% 50%, color-mix(in oklab, #120806 66%, transparent), transparent 88%); }
}
@media (min-width: 640px) {
  .dor-grade, .fases, .servicos-grade, .projetos-grade { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .btn-mini { display: inline-flex; }
  .cab-lado { grid-template-columns: 1.3fr 1fr; gap: 48px; }
  .cab-lado .cab-texto { justify-self: end; }
  .pq-grade { grid-template-columns: repeat(2, 1fr); }
  .entregas-grade { grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: start; }
  .entregas-lado { position: sticky; top: 110px; }
  .sobre-grade { grid-template-columns: .85fr 1fr; gap: 80px; }
  .faq-grade { grid-template-columns: .8fr 1.2fr; gap: 72px; align-items: start; }
  .faq-lado { position: sticky; top: 110px; }
  .compromisso-painel { grid-template-columns: auto 1fr; justify-items: start; text-align: left; gap: 56px; }
  .selo { width: 220px; }
  .cta-fixo { display: none; }
}
@media (min-width: 1024px) {
  .vexa-footer__inner { gap: 0; min-height: 600px; padding: 80px var(--vexa-gutter); }
  .vexa-footer__top { flex-direction: row; justify-content: space-between; gap: 0; }
  .vexa-footer__coluna { width: 684px; }
  .vexa-footer__titulo { font-size: 40px; letter-spacing: -1.2px; max-width: 40%; }
  .vexa-footer__contato { font-size: 15px; letter-spacing: .15px; margin-top: 32px; }
  .vexa-footer__menu { width: 325px; }
  .vexa-footer__rotulo { font-size: 12px; }
  .vexa-footer__nav { margin-top: 24px; }
  .vexa-footer__nav li + li { margin-top: 4px; }
  .vexa-footer__social { margin-top: 0; }
  .vexa-footer__icone { width: 50px; height: 50px; }
  .vexa-footer__icone svg { width: 20px; height: 20px; }
  .vexa-footer__base { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 0; }
  .vexa-footer__marca { order: 2; height: 140px; }
  .vexa-footer__marca svg { height: 100px; }
  .vexa-footer__legal { order: 1; font-size: 12px; }
}
@media (min-width: 1100px) {
  .nav { display: block; }
  .menu-btn, .menu-mobile { display: none !important; }
  .fases { grid-template-columns: repeat(4, 1fr); }
  .dor-grade { grid-template-columns: repeat(4, 1fr); }
  .servicos-grade { grid-template-columns: repeat(3, 1fr); }
  .projetos-grade { grid-template-columns: repeat(3, 1fr); }
  .fase { min-height: 380px; }
}
@media (max-width: 899px) {
  .cta-listras { inset: 45% 0 0 0; mask-image: linear-gradient(180deg, transparent, black 40%); -webkit-mask-image: linear-gradient(180deg, transparent, black 40%); }
  .cta-painel { align-items: flex-start; min-height: 560px; }
}

/* Movimento desligado para quem pede */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .revelar { opacity: 1; transform: none; }
  .vexa-footer { --vexa-p: 1 !important; }
  .vexa-footer__panel, .vexa-footer__inner { transform: none !important; }
}