/* ============================================================
   Folha de estilo da Elix Sites.

   Carregada pelas quatro paginas do site: index, projetos,
   produto e 404. Antes o CSS vivia inline dentro do index.html;
   com mais de uma pagina isso duplicaria a folha e garantiria que
   elas divergissem com o tempo. O nginx serve /static/ com
   expires 30d, entao a partir da segunda pagina ela vem do cache.

   TOKENS: os nomes dizem o PAPEL da cor, nao a cor em si
   (--fundo, --texto, --destaque), e nao "--verde" ou "--cinza".
   E o que permite trocar a paleta sem reescrever a folha.

   CONTRASTE: os pares foram medidos, nao estimados no olho.
   O --texto-fraco antigo (#666c73) reprovava no AA para texto
   pequeno — dava 3.75 sobre o fundo e 3.42 sobre a superficie 2,
   e e justamente a cor do rodape, dos rotulos e da barra de URL.
   O tom atual da 5.34 e 4.87. Se for escurecer de novo, meca.
   ============================================================ */

:root{
  /* fundos */
  --fundo:#08090b; --superficie:#0d0f12; --superficie-2:#13161a;
  /* linhas */
  --borda:rgba(255,255,255,.09); --borda-2:rgba(255,255,255,.14);
  /* texto */
  --texto:#f3f5f6; --texto-suave:#9aa1a8; --texto-fraco:#7e858e;
  /* destaque */
  --destaque:#8FD9B0; --destaque-2:#5E9BC8; --destaque-suave:#7bc3bd;
  --destaque-texto:#06251f;
  --grad:linear-gradient(100deg,var(--destaque),var(--destaque-2));
  /* tipografia e medida */
  --display:'Space Grotesk',system-ui,sans-serif;
  --body:'Instrument Sans',system-ui,sans-serif;
  --maxw:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--fundo);color:var(--texto);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
a:hover{color:var(--destaque-suave)}
:focus-visible{outline:2px solid var(--destaque);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:999;background:var(--superficie-2);padding:12px 18px;border-radius:8px;border:1px solid var(--borda-2)}

/* Sem traco decorativo antes do rotulo: ele era um ::before de 24px,
   nao um caractere, e saiu junto com os travessoes do texto. */
.eyebrow{font-family:var(--display);font-size:13px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--texto-suave);display:inline-flex;align-items:center}

.btn{font-family:var(--display);font-weight:500;font-size:15px;display:inline-flex;align-items:center;gap:9px;padding:13px 22px;border-radius:9px;cursor:pointer;border:1px solid transparent;transition:transform .2s ease,background .2s ease,border-color .2s ease,opacity .2s ease;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--grad);color:var(--destaque-texto);font-weight:600}
.btn-primary:hover{opacity:.92;color:var(--destaque-texto)}
.btn-ghost{background:transparent;color:var(--texto);border-color:var(--borda-2)}
.btn-ghost:hover{border-color:var(--texto-suave);background:rgba(255,255,255,.03);color:var(--texto)}
.btn .arr{transition:transform .2s ease}
.btn:hover .arr{transform:translateX(3px)}

/* ── TOPO ── */
header{position:sticky;top:0;z-index:50;background:rgba(8,9,11,.72);backdrop-filter:blur(14px);border-bottom:1px solid var(--borda)}
nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:24px}
.logo{font-family:var(--display);font-weight:700;font-size:23px;letter-spacing:-.02em;display:flex;gap:.28em;align-items:center}
.logo:hover{color:var(--texto)}
.logo svg{flex-shrink:0}
.nav-links{display:flex;align-items:center;gap:34px}
.nav-links a{font-size:15px;color:var(--texto-suave);transition:color .2s}
.nav-links a:hover{color:var(--texto)}
/* A pagina em que voce esta fica marcada no menu — sem isso, nas
   paginas novas (/projetos, /produto) o topo nao diz onde voce esta. */
.nav-links a[aria-current="page"]{color:var(--texto)}
.nav-links a[aria-current="page"]::after{content:"";display:block;height:1.5px;background:var(--grad);border-radius:2px;margin-top:5px}
/* Medidas do botao da home antiga: menor, mais fechado e sem o pulo no
   hover. No tamanho do .btn padrao ele competia com a logo, que e o
   que precisa dominar o topo. So no topo — os botoes do hero e das
   secoes continuam grandes de proposito. */
.btn-nav{padding:9px 22px;border-radius:8px;font-size:13px;font-weight:700;letter-spacing:.01em}
.btn-nav:hover{transform:none;opacity:.85}
/* Abaixo de 980px os links do topo viravam um menu que abre. Feito com
   <details>, entao funciona sem JavaScript — se o script falhar, o menu
   continua abrindo. */
.menu-mob{display:none;position:relative}
/* 44px e o minimo de alvo de toque; estava em 42 e era o unico
   elemento do site fora da regra. */
.menu-mob summary{list-style:none;cursor:pointer;width:44px;height:44px;border:1px solid var(--borda-2);border-radius:9px;display:flex;align-items:center;justify-content:center;gap:4px;flex-direction:column}
.menu-mob summary::-webkit-details-marker{display:none}
.menu-mob summary i{display:block;width:17px;height:1.5px;background:var(--texto);border-radius:2px;transition:transform .25s,opacity .25s}
.menu-mob[open] summary i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.menu-mob[open] summary i:nth-child(2){opacity:0}
.menu-mob[open] summary i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.menu-mob-lista{position:absolute;right:0;top:calc(100% + 12px);z-index:60;min-width:230px;background:var(--superficie);border:1px solid var(--borda-2);border-radius:14px;padding:10px;box-shadow:0 26px 60px -24px rgba(0,0,0,.9)}
.menu-mob-lista a{display:block;padding:12px 14px;border-radius:9px;font-size:15px;color:var(--texto-suave);transition:background .2s,color .2s}
.menu-mob-lista a:hover{background:var(--superficie-2);color:var(--texto)}
.menu-mob-lista a[aria-current="page"]{color:var(--texto);background:var(--superficie-2)}
@media(max-width:980px){.nav-links{display:none}.menu-mob{display:block}}
/* No celular a margem lateral de 32px comia tela demais. */
@media(max-width:560px){.wrap{padding:0 20px}nav{height:64px;gap:12px}.logo{font-size:20px}.btn-nav{padding:9px 16px;font-size:12px}}

/* ── HERO ── */
.hero{position:relative;padding:120px 0 84px;overflow:hidden}
.hero-glow{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-glow::before{content:"";position:absolute;top:-280px;left:50%;transform:translateX(-50%);width:1100px;height:620px;border-radius:50%;background:radial-gradient(closest-side,rgba(126,200,189,.20),transparent 70%);filter:blur(20px)}
.hero-inner{position:relative;z-index:1;text-align:center;max-width:940px;margin:0 auto}
/* Selo da home antiga: fundo e borda esverdeados, texto na cor de
   destaque e um ponto piscando. O selo cinza que estava aqui sumia no
   fundo escuro — este avisa que a pagina esta viva antes mesmo de a
   pessoa comecar a ler. */
.tag-pill{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--destaque-suave);background:rgba(124,191,162,.08);border:1px solid rgba(124,191,162,.2);border-radius:100px;padding:6px 16px;margin-bottom:36px}
.tag-pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor;animation:pisca 2s infinite}
@keyframes pisca{0%,100%{opacity:1}50%{opacity:.35}}
/* Quem pede menos animacao no sistema ve o ponto parado, nao sem ele. */
@media(prefers-reduced-motion:reduce){.tag-pill .dot{animation:none}}
h1{font-family:var(--display);font-weight:600;font-size:clamp(36px,4.9vw,58px);line-height:1.06;letter-spacing:-.03em;text-wrap:pretty}
.hero p.sub{margin:28px auto 0;max-width:600px;font-size:19px;color:var(--texto-suave);text-wrap:pretty}
.hero-actions{display:flex;gap:14px;justify-content:center;margin-top:38px;flex-wrap:wrap}
.hero-note{margin-top:20px;font-size:13.5px;color:var(--texto-fraco)}
/* ── VITRINE: OS DOIS APARELHOS ──
   Substituiu a moldura de navegador com cinco slides girando. O que
   estava ali provava "temos varios clientes"; isso o /projetos faz
   melhor. Isso aqui prova outra coisa: que o site entregue funciona em
   qualquer tela — o mesmo endereco, com quatro produtos por linha no
   tablet e dois no celular.

   As molduras sao CSS. Nao ha imagem de aparelho: uma borda grossa
   arredondada ja le como tablet e como celular, nao pesa nada e nao
   borra em tela retina.

   As proporcoes: o tablet ocupa 82% da largura e o celular 22%,
   alinhado embaixo e a direita, entao eles se sobrepoem em 4% e o
   celular fica visivelmente na frente. Mexeu numa, confira a outra —
   se a soma passar de 104% o celular sai da caixa. */
.mock{margin:72px auto 0;max-width:1000px;position:relative;z-index:1}

/* ── A FAIXA QUE ANDA DE LADO ──
   overflow-x + scroll-snap entregam de graca o arrastar com o dedo, o
   deslizar de lado no trackpad, a rolagem pelo teclado quando a faixa
   tem foco e o encaixe que faz cada painel parar inteiro. Nao ha
   biblioteca de carrossel nem codigo de arrastar.

   O padding do painel nao e enfeite: a faixa recorta o que passa dela
   (basta um eixo virar auto para o outro deixar de ser visible), e os
   aparelhos ficam GIRADOS em perspectiva. Sem essa folga o canto que
   vem para a frente seria cortado na borda. Diminuiu o padding,
   confira a inclinacao. */
.vitrine-faixa{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.vitrine-faixa::-webkit-scrollbar{display:none}
.vt-painel{flex:0 0 100%;scroll-snap-align:center;padding:30px 16px 0}

/* ── CONTROLES ──
   Abaixo dos aparelhos, nunca por cima: o controle da primeira versao
   da vitrine ficava sobreposto ao print e cobria justamente o trabalho
   do cliente, que e o que a secao existe para mostrar.
   A dica de arrastar tem de existir porque a barra de rolagem da faixa
   esta escondida — sem ela nao haveria sinal nenhum de que da para
   andar de lado. */
.vitrine-ctrl{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:24px;padding:0 16px}
.vt-dica{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:var(--texto-fraco)}
.vt-nav{display:flex;align-items:center;gap:10px}
/* tabular-nums para o contador nao mudar de largura de 01 para 04 e
   empurrar as setas um pixel a cada troca. */
.vt-conta{font-family:var(--display);font-size:13px;font-weight:500;letter-spacing:.14em;color:var(--texto-fraco);font-variant-numeric:tabular-nums;margin-right:6px}
.vt-seta{width:44px;height:44px;border-radius:50%;border:1px solid var(--borda-2);background:transparent;
  color:var(--texto-suave);cursor:pointer;font-size:19px;line-height:1;display:inline-flex;align-items:center;justify-content:center;
  transition:color .2s,border-color .2s,background .2s,opacity .2s}
.vt-seta:hover:not(:disabled){color:var(--texto);border-color:var(--texto-suave);background:var(--superficie)}
.vt-seta:disabled{opacity:.4;cursor:default}
@media(max-width:700px){
  .vt-painel{padding:18px 4px 0}
  .vitrine-ctrl{padding:0 4px;margin-top:18px;justify-content:center;gap:14px}
  .vt-dica{width:100%;justify-content:center;order:2}
}
@media(prefers-reduced-motion:reduce){
  /* Rolagem suave tambem e movimento; aqui ela vira instantanea. */
  .vitrine-faixa{scroll-behavior:auto}
}

.aparelhos{position:relative;display:block;color:inherit}
.ap-tablet,.ap-celular{display:block;background:var(--superficie-2);border:1px solid var(--borda-2);overflow:hidden}
.ap-tablet{width:82%;aspect-ratio:4/3;border-radius:16px;padding:10px;
  box-shadow:0 40px 110px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.02)}
/* O celular vem depois no CSS e sem z-index explicito ja ficaria por
   cima; o z-index esta aqui para nao depender da ordem do HTML. */
.ap-celular{position:absolute;right:0;bottom:0;z-index:2;width:22%;aspect-ratio:440/952;border-radius:22px;padding:6px;
  box-shadow:0 30px 80px -24px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.03)}
.ap-tela{display:block;width:100%;height:100%;overflow:hidden;border-radius:8px;background:var(--fundo)}
.ap-celular .ap-tela{border-radius:16px}
.ap-tela img{width:100%;height:100%;object-fit:cover;object-position:top center}

/* A inclinacao, em duas camadas.

   CAMADA 1, que funciona em qualquer navegador: os aparelhos nascem
   girados e se endireitam quando entram na tela, pela mesma classe .in
   que o IntersectionObserver ja aplica. Nao ha script novo.
   O seletor tem duas classes de proposito: assim ganha do
   .reveal{transform:translateY(22px)} que vem mais abaixo na folha, sem
   depender da ordem. O translateY fica embutido aqui porque e a mesma
   propriedade e um sobrescreveria o outro. */
.aparelhos.reveal{transform:perspective(1400px) rotateY(-9deg) rotateX(4deg) translateY(22px);
  transition:opacity .7s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
.aparelhos.reveal.in{transform:perspective(1400px) rotateY(0) rotateX(0) translateY(0)}

/* CAMADA 2: a inclinacao presa a ROLAGEM, e nao ao tempo. Sem ela o
   efeito quase nao se ve, porque o topo da pagina ja nasce visivel — a
   animacao de entrada dispara junto com o carregamento e termina antes
   de a pessoa rolar. Com ela os aparelhos ficam tortos enquanto o hero
   esta cheio na tela e vao endireitando conforme a pessoa desce.

   Quem escreve --giro e --giro-x e o elix.js, a cada quadro de rolagem.
   Ele tambem e quem poe a classe .giro-scroll, e so poe quando vai de
   fato assumir o controle: sem JavaScript, em tela estreita ou com
   prefers-reduced-motion, esta regra nunca entra e vale a camada 1.

   A transicao de transform sai aqui de proposito: com o JS mandando a
   cada quadro, uma transicao de 1.1s deixaria o giro arrastado atras
   da rolagem. */
.aparelhos.giro-scroll.reveal,
.aparelhos.giro-scroll.reveal.in{
  transform:perspective(1400px) rotateY(var(--giro,0deg)) rotateX(var(--giro-x,0deg));
  transition:opacity .7s ease;
}

/* Legenda e acoes, abaixo dos aparelhos. Ficam fora do link que
   envolve a composicao para que "Ver todos os projetos" possa apontar
   para outro lugar sem link dentro de link. */
.mock-pe{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:34px}
.mock-cap .kind{display:block;font-family:var(--display);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--destaque)}
.mock-cap .nome{display:block;font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.01em;margin-top:4px}
.mock-acoes{display:flex;gap:26px;flex-wrap:wrap}
.mock-acoes a{font-family:var(--display);font-size:15px;font-weight:500;color:var(--texto-suave);display:inline-flex;align-items:center;gap:8px;min-height:44px;transition:color .2s}
.mock-acoes a:hover{color:var(--destaque-suave)}

@media(max-width:700px){
  .mock{margin-top:52px}
  /* SO O TABLET no celular.
     Os dois empilhados faziam cada painel ficar alto demais, e andar
     pela vitrine virava rolagem longa. Some o celular e o painel cabe
     quase inteiro na tela, que e o que faz a faixa ser navegavel.
     Nao se perde o argumento: quem esta lendo isso ja esta num
     celular vendo um site funcionar. A tela que ele ainda nao viu e a
     do tablet, e e essa que fica.
     A perspectiva tambem sai: em tela estreita ela so rouba largura. */
  .ap-celular{display:none}
  .ap-tablet{width:100%}
  /* O animation:none precisa estar aqui: uma animacao ganha de um
     transform declarado, entao sem ele a camada presa a rolagem
     continuaria inclinando os aparelhos no celular. */
  .aparelhos.reveal,.aparelhos.reveal.in{transform:none;animation:none}
  .mock-pe{margin-top:26px;justify-content:center;text-align:center;flex-direction:column;gap:6px}
  .mock-acoes{gap:20px;justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  /* Precisa repetir as duas classes: a regra generica de .reveal la
     embaixo tem menos peso e nao desligaria a inclinacao. O
     animation:none e cinto e suspensorio — a camada presa a rolagem ja
     esta dentro de um prefers-reduced-motion: no-preference. */
  .aparelhos.reveal,.aparelhos.reveal.in{transform:none;transition:none;animation:none}
}

/* ── BLOCOS ── */
section.block{padding:110px 0}
@media(max-width:760px){section.block{padding:76px 0}.hero{padding:84px 0 60px}}
.sec-head{max-width:680px;margin-bottom:56px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.center .eyebrow{justify-content:center}
.sec-head h2{font-family:var(--display);font-weight:600;font-size:clamp(30px,4.2vw,46px);line-height:1.06;letter-spacing:-.025em;margin-top:20px;text-wrap:balance}
.sec-head p{margin-top:18px;font-size:18px;color:var(--texto-suave);text-wrap:pretty}

/* ── TOPO DAS PAGINAS INTERNAS ──
   /projetos e /produto nao tem o hero da home, mas tambem nao podem
   comecar secas debaixo do menu. Este bloco e a versao curta: o mesmo
   brilho de fundo, titulo grande, e nada de moldura. */
.pagina-head{position:relative;padding:88px 0 12px;overflow:hidden}
.pagina-head .hero-glow::before{top:-380px;opacity:.75}
.pagina-head .inner{position:relative;z-index:1;max-width:760px}
.pagina-head h1{font-size:clamp(32px,4.6vw,52px);margin-top:20px}
.pagina-head p{margin-top:20px;font-size:18.5px;color:var(--texto-suave);text-wrap:pretty}
.voltar{display:inline-flex;align-items:center;gap:8px;margin-top:28px;font-family:var(--display);font-size:14.5px;color:var(--texto-suave);transition:color .2s}
.voltar:hover{color:var(--destaque-suave)}
@media(max-width:760px){.pagina-head{padding:60px 0 8px}}

/* ── QUEM SOMOS ── */
.about{background:var(--superficie);border-top:1px solid var(--borda);border-bottom:1px solid var(--borda)}
/* Colunas iguais, como na home antiga: a foto precisa de metade da
   largura para ter presenca. Com 1.05fr/.95fr ela encolhia e sobrava
   coluna demais para o texto. */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.about-copy h2{font-family:var(--display);font-weight:600;font-size:clamp(30px,3.8vw,42px);line-height:1.1;letter-spacing:-.025em;margin-top:20px;text-wrap:balance}
.about-role{margin-top:14px;font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;line-height:1.5;color:var(--destaque)}
.about-copy p{margin-top:20px;color:var(--texto-suave);font-size:17px;text-wrap:pretty}
.about-facts{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:36px}
.fact{border-top:1px solid var(--borda-2);padding-top:14px}
.fact .num{font-family:var(--display);font-weight:600;font-size:30px;letter-spacing:-.02em;line-height:1}
.fact .lbl{margin-top:6px;font-size:14.5px;color:var(--texto-suave)}
.about-media{position:relative}
/* A foto e vertical (1248x1600, proporcao 0.78). A moldura usa 4/5
   (0.80): quase a proporcao do arquivo, entao o recorte tira so uma
   raspa, e a altura extra faz a coluna da foto terminar junto com a
   do texto. Se um dia a foto for trocada por uma deitada, mudar o
   aspect-ratio junto — senao volta a cortar cabeca. */
.about-media img{width:100%;aspect-ratio:4/5;height:auto;object-fit:cover;object-position:center 45%;border:1px solid var(--borda-2);border-radius:16px}
.about-card{position:absolute;left:-18px;bottom:26px;background:var(--superficie-2);border:1px solid var(--borda-2);border-radius:12px;padding:14px 18px;display:flex;align-items:center;gap:12px;box-shadow:0 18px 44px -18px rgba(0,0,0,.9)}
.about-card .pulse{width:9px;height:9px;border-radius:50%;background:#4ade80;flex-shrink:0;box-shadow:0 0 0 4px rgba(74,222,128,.14)}
.about-card .t{font-family:var(--display);font-size:14px;font-weight:600;line-height:1.3}
.about-card .s{font-size:12.5px;color:var(--texto-suave);margin-top:2px}
/* No celular a coluna ocupa a tela toda; sem o teto de altura a foto
   viraria um retrato gigante e empurraria o resto da pagina para baixo. */
@media(max-width:900px){.about-grid{grid-template-columns:1fr;gap:44px}.about-media img{max-height:520px;aspect-ratio:auto;height:440px}.about-card{left:14px;right:14px;bottom:14px}}

/* ── SERVIÇOS ──
   Eram quatro cartoes de 34px de padding em duas colunas: ocupavam
   quase uma tela inteira para dizer quatro frases. Agora e uma faixa
   de quatro colunas, com o numero em linha com o titulo em vez de uma
   caixa de 46px em cima dele. Mesma informacao, um terco da altura. */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.svc{border:1px solid var(--borda);border-radius:14px;padding:22px 20px 24px;background:var(--superficie);transition:border-color .25s ease,transform .25s ease,background .25s ease}
.svc:hover{border-color:var(--borda-2);transform:translateY(-3px);background:var(--superficie-2)}
/* Os titulos tem uma e duas linhas conforme o servico. A altura minima
   reserva as duas em todos, senao os paragrafos comecam em alturas
   diferentes e a faixa fica torta. */
.svc-topo{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;min-height:52px}
.svc .ix{font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.14em;color:var(--destaque);flex-shrink:0}
.svc h3{font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.01em}
.svc p{color:var(--texto-suave);font-size:15px}
@media(max-width:1000px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.svc-grid{grid-template-columns:1fr}}

/* ── PORTFÓLIO ── */
.work{background:var(--superficie);border-top:1px solid var(--borda);border-bottom:1px solid var(--borda)}
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.work-card{border:1px solid var(--borda);border-radius:16px;overflow:hidden;background:var(--fundo);display:flex;flex-direction:column;transition:border-color .25s ease,transform .25s ease}
.work-card:hover{border-color:var(--borda-2);transform:translateY(-3px);color:inherit}
.work-card .shot{width:100%;height:190px;object-fit:cover;object-position:top center;border-bottom:1px solid var(--borda);transition:transform .4s ease}
.work-card:hover .shot{transform:scale(1.03)}
.work-body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:9px;flex:1}
.work-kind{font-family:var(--display);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--destaque)}
.work-body h3{font-family:var(--display);font-weight:600;font-size:17.5px;letter-spacing:-.01em}
.work-body p{font-size:15px;color:var(--texto-suave);flex:1}
/* Cidade e ramo do cliente: e o que faz o card parecer um trabalho
   real e nao um cartao de modelo. */
.work-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.work-meta span{font-size:12.5px;color:var(--texto-fraco);border:1px solid var(--borda);border-radius:100px;padding:3px 11px}
.work-open{font-family:var(--display);font-size:14px;font-weight:500;color:var(--texto-suave);display:inline-flex;align-items:center;gap:7px;margin-top:6px}
.work-card:hover .work-open{color:var(--destaque-suave)}
@media(max-width:980px){.work-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:660px){.work-grid{grid-template-columns:1fr}}

/* ── PRODUTO PRÓPRIO ── */
.produto{border:1px solid var(--borda);border-radius:20px;background:var(--superficie);display:grid;grid-template-columns:1.05fr .95fr;overflow:hidden;position:relative}
.produto::after{content:"";position:absolute;top:-120px;right:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(126,200,189,.09),transparent 70%);pointer-events:none}
.produto-left{padding:48px;display:flex;flex-direction:column;gap:18px;position:relative;z-index:1}
.produto-name{font-family:var(--display);font-weight:600;font-size:clamp(34px,4.4vw,50px);letter-spacing:-.03em;line-height:1}
.produto-left p{color:var(--texto-suave);font-size:16.5px;text-wrap:pretty}
.produto-feats{list-style:none;display:flex;flex-direction:column;gap:11px;margin-top:4px}
.produto-feats li{display:flex;align-items:flex-start;gap:12px;font-size:15.5px;color:var(--texto-suave)}
.produto-feats li::before{content:"✓";flex-shrink:0;width:21px;height:21px;margin-top:2px;border-radius:50%;border:1px solid var(--borda-2);display:inline-flex;align-items:center;justify-content:center;font-size:11px;color:var(--destaque)}
.produto-acoes{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.produto-right{background:var(--superficie-2);border-left:1px solid var(--borda);padding:32px;display:flex;flex-direction:column;gap:16px;position:relative;z-index:1}
.pm-bar{display:flex;align-items:center;gap:7px}
.pm-bar i{width:10px;height:10px;border-radius:50%;background:var(--borda-2)}
.pm-url{flex:1;margin-left:8px;background:var(--fundo);border:1px solid var(--borda);border-radius:6px;padding:6px 12px;font-family:var(--display);font-size:11.5px;color:var(--texto-fraco)}
.pm-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pm-stat{background:var(--fundo);border:1px solid var(--borda);border-radius:10px;padding:14px 10px;text-align:center}
.pm-stat b{display:block;font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:-.02em}
.pm-stat span{font-size:11.5px;color:var(--texto-fraco)}
.pm-label{font-family:var(--display);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--texto-fraco)}
.pm-rows{display:flex;flex-direction:column;gap:8px}
.pm-row{display:flex;align-items:center;gap:12px;background:var(--fundo);border:1px solid var(--borda);border-radius:10px;padding:10px 14px}
.pm-av{width:28px;height:28px;border-radius:50%;background:rgba(126,200,189,.1);border:1px solid var(--borda-2);flex-shrink:0}
.pm-lines{flex:1}
.pm-lines i{display:block;height:7px;border-radius:4px;background:rgba(243,245,246,.16)}
.pm-lines i+i{margin-top:5px;height:6px;background:rgba(243,245,246,.07)}
.pm-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
@media(max-width:900px){.produto{grid-template-columns:1fr}.produto-left{padding:36px 28px}.produto-right{border-left:none;border-top:1px solid var(--borda)}}

/* ── PLANOS (pagina do produto) ── */
.planos{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.plano{position:relative;border:1px solid var(--borda);border-radius:16px;background:var(--superficie);padding:32px 28px;display:flex;flex-direction:column;gap:14px}
/* O plano do meio e o que a Elix quer vender; a borda de destaque faz
   o olho parar nele primeiro. */
.plano.destacado{border-color:rgba(143,217,176,.34);background:var(--superficie-2)}
.plano-nome{font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:-.01em}
.plano-para{font-size:14.5px;color:var(--texto-suave)}
.plano ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin-top:4px;flex:1}
.plano li{display:flex;gap:10px;font-size:15px;color:var(--texto-suave)}
.plano li::before{content:"✓";color:var(--destaque);flex-shrink:0}
/* O selo fica solto no canto para nao empurrar o nome do plano para
   baixo — se ele ocupasse uma linha no fluxo, "Pro" nasceria mais
   baixo que "Starter" e "Enterprise" e os tres nomes desalinhavam. */
.plano .selo{position:absolute;top:-11px;right:20px;background:var(--superficie-2);font-family:var(--display);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--destaque);border:1px solid rgba(143,217,176,.3);border-radius:100px;padding:4px 12px}
@media(max-width:900px){.planos{grid-template-columns:1fr}}

/* ── PROCESSO ── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:s}
.step{border-top:1px solid var(--borda-2);padding-top:22px}
.step .n{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.14em;color:var(--destaque)}
.step h3{font-family:var(--display);font-weight:600;font-size:19px;margin-top:14px;letter-spacing:-.01em}
.step p{margin-top:10px;font-size:15.5px;color:var(--texto-suave)}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}

/* ── FAQ ── */
.faq{max-width:820px;margin:0 auto;display:flex;flex-direction:column;border-top:1px solid var(--borda)}
.faq details{border-bottom:1px solid var(--borda)}
.faq summary{list-style:none;cursor:pointer;padding:24px 0;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;font-family:var(--display);font-weight:500;font-size:18.5px;letter-spacing:-.01em;transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--destaque-suave)}
.faq summary .pm{font-size:22px;color:var(--texto-fraco);line-height:1;flex-shrink:0}
.faq summary .pm::after{content:"+"}
.faq details[open] summary .pm{color:var(--destaque)}
.faq details[open] summary .pm::after{content:"–"}
.faq .ans{padding:0 44px 26px 0;color:var(--texto-suave);font-size:16.5px;text-wrap:pretty}
@media(max-width:560px){.faq summary{font-size:16.5px;gap:16px}.faq .ans{padding-right:20px;font-size:15.5px}}

/* ── CONTATO ──
   Era duas colunas: contato a esquerda e o cartao "o que acontece
   depois" a direita. O cartao saiu, e uma coluna magra sozinha numa
   pagina larga fica pobre — entao o bloco passou a ser centrado, com
   os quatro dados em grade de dois. */
.contact{background:var(--superficie);border-top:1px solid var(--borda)}
.contact-copy{max-width:860px;margin:0 auto;text-align:center}
.contact-copy h2{font-family:var(--display);font-weight:600;font-size:clamp(30px,4vw,44px);line-height:1.06;letter-spacing:-.025em;margin-top:20px;text-wrap:balance}
.contact-copy>p{margin:18px auto 0;max-width:620px;color:var(--texto-suave);font-size:17px;text-wrap:pretty}
.contact-copy .eyebrow{justify-content:center}
.cinfo{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:22px;text-align:left}
.cinfo .row{border-top:1px solid var(--borda-2);padding-top:14px}
.cinfo .k{font-family:var(--display);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--texto-fraco)}
.cinfo .v{margin-top:6px;font-size:16.5px}
.contact .btn{margin-top:38px}
@media(max-width:640px){.cinfo{grid-template-columns:1fr}}

/* ── PAGINA 404 ── */
.erro{min-height:62vh;display:flex;align-items:center;padding:80px 0}
.erro-inner{max-width:620px;margin:0 auto;text-align:center}
.erro .cod{font-family:var(--display);font-weight:700;font-size:clamp(72px,13vw,132px);line-height:1;letter-spacing:-.04em}
.erro h1{font-size:clamp(26px,3.4vw,36px);margin-top:18px}
.erro p{margin-top:18px;color:var(--texto-suave);font-size:17px;text-wrap:pretty}
.erro .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px}

/* ── RODAPÉ ── */
footer{border-top:1px solid var(--borda);padding:56px 0 40px}
.foot-top{display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap;margin-bottom:48px}
.foot-brand{max-width:320px}
.foot-brand p{color:var(--texto-suave);font-size:15px;margin-top:16px}
.foot-cols{display:flex;gap:64px;flex-wrap:wrap}
.foot-col h3{font-family:var(--display);font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--texto-fraco);margin-bottom:18px}
.foot-col a{display:block;color:var(--texto-suave);font-size:15px;margin-bottom:12px;transition:color .2s}
.foot-col a:hover{color:var(--texto)}
.foot-bot{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid var(--borda);padding-top:28px;flex-wrap:wrap}
.foot-bot p{font-size:13.5px;color:var(--texto-fraco)}

/* ── BOTÃO FLUTUANTE ── */
.wa{position:fixed;right:22px;bottom:22px;z-index:60;display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;font-size:14.5px;color:var(--destaque-texto);background:var(--grad);padding:14px 20px;border-radius:100px;box-shadow:0 18px 40px -14px rgba(0,0,0,.9);transition:transform .2s ease}
.wa:hover{transform:translateY(-2px);color:var(--destaque-texto)}
@media(max-width:520px){.wa{right:16px;bottom:16px;padding:13px 17px}}

/* ── ENTRADA AO ROLAR ── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .btn:hover,.svc:hover,.work-card:hover,.wa:hover{transform:none}
}