/* ═══ Site novo — folha compartilhada da home e das páginas internas ═══════
   Tudo aqui usa o prefixo .n-, e mora dentro de um <div class="n">. A base
   (reset, Geist, cor de fundo) continua vindo do site.css carregado pelo layout. */
.n{ --pad:clamp(18px,4vw,44px); --o:#FF6A1A; --vidro:#0A0A0Ab8;
  --r:16px; --r-sm:10px }

/* Receita única de vidro. O que faz parecer vidro de verdade não é só o
   blur: é o degradê (luz batendo de cima), a borda clarinha e o brilho
   interno de 1px na aresta superior. Sem esses três, vira caixa cinza. */
.g{ background:linear-gradient(160deg, #ffffff1c, #ffffff08 46%, #ffffff05);
  backdrop-filter:blur(20px) saturate(1.35);
  -webkit-backdrop-filter:blur(20px) saturate(1.35);
  border:1px solid #ffffff26;
  box-shadow:inset 0 1px 0 #ffffff33, 0 18px 50px #00000059 }

/* ── fundo em vídeo ───────────────────────────────────────────────── */
.n-hero{ position:relative; min-height:100svh; overflow:hidden;
  display:grid; grid-template-rows:auto 1fr auto }
.n-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  transform:scale(1.03) }
/* Véu leve: o clipe já nasce escuro e na cor da marca. O véu pesado da versão
   anterior existia para imagem clara de dia — aqui ele só apagaria a nebulosa.
   Sobrou o suficiente para o texto ler, e uma sombra atrás do bloco central. */
.n-hero::after{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(64% 46% at 50% 50%, #0A0A0Ab3 0%, #0A0A0A26 62%, #0A0A0A00 100%),
             linear-gradient(#0A0A0Ab8 0%, #0A0A0A26 22%, #0A0A0A1a 55%, #0A0A0Aeb 90%, #0A0A0A 100%) }
.n-hero > :not(.n-bg){ position:relative; z-index:2 }

/* ── nav flutuante ────────────────────────────────────────────────── */
.n-nav{ display:flex; align-items:center; justify-content:space-between;
  padding:clamp(14px,2.4vw,26px) var(--pad); gap:16px }
/* a marca é a logo oficial (branca, horizontal); width/height no <img> só
   evitam o pulo de layout — o tamanho real vem daqui */
.n-marca{ display:flex; align-items:center }
.n-marca img{ height:56px; width:auto; display:block }
.n-menu{ display:flex; gap:6px; padding:7px; border-radius:var(--r) }
.n-menu a{ padding:9px 17px; border-radius:var(--r-sm); font-size:14px; color:#E8E8E8; transition:.2s }
.n-menu a:hover, .n-menu a.on{ background:#ffffff14; color:#fff }
.n-cta{ display:inline-flex; align-items:center; gap:10px; padding:7px 7px 7px 20px;
  border-radius:var(--r); font-size:14px; color:#fff; transition:.2s }
.n-cta:hover{ transform:translateY(-1px) }
.n-cta span{ width:32px; height:32px; border-radius:9px; background:var(--o);
  display:grid; place-items:center; color:#0A0A0A; flex:0 0 auto }
/* no celular o nome quebrava em duas linhas e batia no botão */
@media(max-width:560px){
  .n-marca img{ height:42px }
  .n-cta{ padding:6px 6px 6px 16px; font-size:13.5px }
}

/* ── miolo ────────────────────────────────────────────────────────── */
.n-miolo{ display:grid; place-items:center; text-align:center; padding:0 var(--pad);
  align-content:center; gap:0 }

/* selo dividido em dois, como na referência */
.n-selo{ display:inline-flex; align-items:center; gap:12px; padding:6px 6px 6px 8px;
  border-radius:var(--r); font-size:13px; margin-bottom:clamp(22px,3.4vw,34px) }
.n-selo .ava{ width:26px; height:26px; border-radius:50%; background:var(--o);
  display:grid; place-items:center; font-size:11px; font-weight:700; color:#0A0A0A }
.n-selo .div{ display:inline-flex; align-items:center; gap:7px; padding:6px 13px;
  border-radius:var(--r-sm); background:#ffffff14; font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:#fff }
.n-selo .div b{ color:var(--o); font-size:13px; line-height:1 }

.n-h1{ font-weight:700; font-size:clamp(34px,5.4vw,74px); line-height:1.02;
  letter-spacing:-.038em; max-width:19ch; margin:0 auto; text-wrap:balance }
.n-h1 em{ font-style:normal; color:var(--o) }
.n-sub{ color:#C9C9C9; font-size:clamp(14.5px,1.5vw,17.5px); line-height:1.62;
  max-width:58ch; margin:clamp(18px,2.4vw,26px) auto clamp(26px,3.4vw,38px) }

.n-acoes{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center }
.n-b1{ display:inline-flex; align-items:center; gap:12px; padding:7px 7px 7px 24px;
  border-radius:var(--r); background:var(--o); color:#0A0A0A; font-size:15px; font-weight:600;
  box-shadow:0 10px 40px #ff6a1a4d; transition:.2s }
.n-b1:hover{ transform:translateY(-2px); box-shadow:0 14px 48px #ff6a1a66 }
.n-b1 span{ width:36px; height:36px; border-radius:50%; background:#0A0A0A; color:var(--o);
  display:grid; place-items:center }
.n-b2{ display:inline-flex; align-items:center; gap:12px; font-size:15px; color:#fff }
.n-b2{ padding:8px 8px 8px 22px; border-radius:var(--r) }
.n-b2 span{ width:40px; height:40px; border-radius:50%; background:var(--o); color:#0A0A0A;
  display:grid; place-items:center; transition:.2s }
.n-b2:hover span{ transform:translateY(-2px) }

/* ── prova social ─────────────────────────────────────────────────── */
.n-cards{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
  margin-top:clamp(30px,4.4vw,48px) }
.n-card{ padding:16px 22px; border-radius:18px; text-align:left; min-width:158px }
.n-card b{ display:block; font-size:clamp(21px,2.4vw,28px); font-weight:700;
  letter-spacing:-.035em; line-height:1 }
.n-card span{ display:block; font-size:12.5px; color:#C4C4C4; margin-top:6px }

.n-prova{ padding:0 var(--pad) clamp(26px,4vw,44px); display:grid; place-items:center }
.n-prova .p{ padding:13px 26px; border-radius:var(--r); font-size:clamp(13px,1.4vw,15.5px);
  color:#D6D6D6 }
.n-prova .p b{ color:var(--o); font-weight:600 }

.n-logos{ background:#0A0A0A; padding:clamp(30px,4.6vw,58px) var(--pad) clamp(44px,6vw,86px) }
/* Faixa que desliza — mesma técnica da página do empresário: a trilha tem o
   grupo DUPLICADO e anda até -50%. No fim do ciclo a segunda cópia está
   exatamente onde a primeira começou, então o corte é invisível. */
.n-faixa{ position:relative; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,
  #0000, #000 12%, #000 88%, #0000); mask-image:linear-gradient(90deg,
  #0000, #000 12%, #000 88%, #0000) }
.n-trilha{ display:flex; width:max-content; animation:nMarq 38s linear infinite;
  will-change:transform }
@keyframes nMarq{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
.n-faixa:hover .n-trilha{ animation-play-state:paused }
.n-grupo{ display:flex; align-items:center; gap:clamp(44px,5vw,84px);
  padding-right:clamp(44px,5vw,84px) }
.n-grupo img{ height:42px; width:auto; flex:0 0 auto; opacity:.8; transition:.25s }
.n-grupo img:hover{ opacity:1; transform:scale(1.06) }
.n-grupo img.claro{ background:#F1F1F1; padding:7px 12px; border-radius:10px; height:44px; opacity:1 }
@media(prefers-reduced-motion:reduce){ .n-trilha{ animation:none } }

/* ── desfoque fixo no rodapé da tela ──────────────────────────────
   Um blur só teria borda visível onde começa. Aqui são camadas
   empilhadas de desfoque crescente, cada uma mascarada numa faixa que
   avança para baixo — a transição fica contínua. Mesma técnica da
   página do empresário, gerada por laço em vez de 8 divs na mão. */
.n-pblur{ position:fixed; left:0; right:0; bottom:0; height:130px; z-index:60;
  pointer-events:none }
.n-pblur{ transition:opacity .35s ease }
.n-pblur[data-fim]{ opacity:0 }
.n-pblur .l{ position:absolute; inset:0 }
.n-pblur::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(#0A0A0A00, #0A0A0A73) }
@media(max-width:700px){ .n-pblur{ height:92px } }

/* ── seções internas ─────────────────────────────────────────────── */
.n-sec{ padding:clamp(56px,8vw,110px) var(--pad); position:relative }
.n-rot{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#7A7A7A;
  display:flex; align-items:center; gap:9px; margin-bottom:18px }
.n-rot::before{ content:''; width:22px; height:1px; background:var(--o) }
.n-h2{ font-weight:700; font-size:clamp(28px,4.2vw,54px); line-height:1.04;
  letter-spacing:-.035em; max-width:17ch }
.n-h2 em{ font-style:normal; color:var(--o) }
.n-lead{ color:#A8A8A8; font-size:clamp(14.5px,1.5vw,17px); line-height:1.65;
  max-width:52ch; margin-top:16px }
.n-topo{ display:grid; grid-template-columns:1.15fr .85fr; gap:28px; align-items:end;
  margin-bottom:clamp(30px,4vw,50px) }
@media(max-width:880px){ .n-topo{ grid-template-columns:1fr } }

/* serviços */
.n-serv{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px }
.n-scard{ border-radius:var(--r); padding:24px; min-height:310px; display:flex;
  flex-direction:column; justify-content:space-between; transition:.28s;
  position:relative; overflow:hidden; isolation:isolate }
.n-scard:hover{ transform:translateY(-4px) }
/* foto de fundo: frame de um trabalho nosso, por baixo de um véu escuro que
   segura a leitura do texto (o vidro do .g fica só na borda e no brilho) */
.n-scard .bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:-2; opacity:.9; transition:transform .7s ease }
.n-scard::before{ content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, #0A0A0A1f 0%, #0A0A0A5c 100%) }
.n-scard:hover .bg{ transform:scale(1.06) }
/* o bloco de texto é um vidro fosco que sangra até as bordas do card: a foto
   fica nítida em cima e desfocada por trás do texto (isolation no card faz o
   backdrop-filter enxergar a <img> irmã) */
.n-scard .txt{ margin:18px -24px -24px; padding:18px 24px 22px;
  background:linear-gradient(180deg, #ffffff14, #ffffff05), #0A0A0A8f;
  backdrop-filter:blur(22px) saturate(1.4); -webkit-backdrop-filter:blur(22px) saturate(1.4);
  border-top:1px solid #ffffff26; box-shadow:inset 0 1px 0 #ffffff2b }
.n-scard .num{ font-size:11px; letter-spacing:.14em; color:#B5B5B5 }
.n-scard h3{ font-size:clamp(18px,1.9vw,22px); letter-spacing:-.025em; margin:8px 0 8px; color:#fff }
.n-scard p{ font-size:13.5px; color:#C9C9C9; line-height:1.6 }
.n-scard .ico{ width:38px; height:38px; border-radius:11px; background:var(--o);
  color:#0A0A0A; display:grid; place-items:center; margin-bottom:2px;
  box-shadow:0 6px 18px #FF6A1A55 }
.n-scard .ico svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round }

/* trabalhos */
.n-bento{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px }
.n-tile{ position:relative; border-radius:var(--r); overflow:hidden; min-height:220px;
  display:flex; align-items:flex-end; padding:18px; background:#111 }
.n-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.6; transition:transform .7s cubic-bezier(.2,.7,.3,1), opacity .35s }
.n-tile:hover img{ transform:scale(1.06); opacity:.78 }
/* logos dos cases não escurecem (não são foto); o vídeo que entra no lugar
   do poster escurece igual, senão o card clareia de repente ao tocar */
.n-tile--logo img{ opacity:1 }
.n-tile video{ opacity:.6 }
/* vídeo tocando: o poster sai de cima (antes os dois apareciam juntos,
   cada um com 60% — a foto parada sobreposta ao vídeo) */
.n-tile.tocando > img{ opacity:0 }
/* o título fica sempre legível: sombra própria por cima do véu */
.n-tile b{ text-shadow:0 2px 14px #000000d9 }
.n-tile::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(#00000040 0%,#0000 28%,#000000d9 68%,#000000fa 100%) }
.n-tile > *{ position:relative; z-index:2 }
.n-tile .tag{ position:absolute; top:16px; left:16px; z-index:2; font-size:10.5px;
  padding:5px 11px; border-radius:8px; background:#0A0A0Ad9; backdrop-filter:blur(8px) }
.n-tile b{ font-size:15px; display:block }
.n-tile small{ color:#A8A8A8; font-size:12.5px; display:block; margin-top:3px }
.n-tile--alto{ grid-row:span 2; min-height:454px }
.n-tile--largo{ grid-column:span 2 }
@media(max-width:900px){ .n-bento{ grid-template-columns:repeat(2,1fr) }
  .n-tile--alto{ grid-row:auto; min-height:220px } }

/* como funciona */
.n-passos{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px }
.n-passo{ border-radius:var(--r); padding:24px }
.n-passo b{ display:block; font-size:30px; font-weight:700; letter-spacing:-.04em;
  color:var(--o); line-height:1 }
.n-passo h4{ font-size:16.5px; margin:14px 0 8px; letter-spacing:-.02em }
.n-passo p{ font-size:13.5px; color:#A0A0A0; line-height:1.6 }

/* chamada final */
.n-fim{ margin:0 var(--pad) clamp(40px,6vw,80px); border-radius:26px;
  padding:clamp(38px,6vw,84px); text-align:center; position:relative; overflow:hidden }
.n-fim h2{ font-weight:700; font-size:clamp(28px,4.8vw,60px); line-height:1.04;
  letter-spacing:-.038em; max-width:18ch; margin:0 auto 14px }
.n-fim p{ color:#A8A8A8; margin-bottom:26px }

/* rodapé */
.n-rodape{ border-top:1px solid #1A1A1A; padding:clamp(40px,5vw,64px) var(--pad) 0 }
.n-rgrid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:34px;
  max-width:1180px; margin:0 auto }
.n-rodape h5{ font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:#7A7A7A; margin-bottom:16px }
.n-rodape a{ display:block; color:#B4B4B4; font-size:14px; padding:5px 0; transition:.2s }
.n-rodape a:hover{ color:#fff }
.n-rodape .sobre p{ color:#8E8E8E; font-size:14px; line-height:1.65; max-width:34ch;
  margin-top:14px }
/* display:flex explícito — a regra .n-rodape a{display:block} logo acima tem
   especificidade maior que .n-marca e transformava a marca em bloco, jogando
   o nome para baixo do símbolo. */
.n-rodape .n-marca{ display:inline-flex }
.n-rodape .n-marca img{ height:48px }
.n-fim-linha{ max-width:1180px; margin:clamp(30px,4vw,48px) auto 0;
  border-top:1px solid #1A1A1A; padding:20px 0 26px;
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-size:12.5px; color:#6E6E6E }
/* "Desenvolvido por" — display:inline-flex explícito pelo mesmo motivo da
   marca: .n-rodape a{display:block} ganharia e empurraria a logo pra baixo */
.n-rodape .n-dev{ display:inline-flex; align-items:center; gap:7px; padding:0; font-size:12.5px;
  color:#8E8E8E }
.n-rodape .n-dev img{ width:auto; height:28px; display:inline-block; opacity:.85; transition:.2s }
.n-rodape .n-dev:hover img{ opacity:1 }
@media(max-width:880px){ .n-rgrid{ grid-template-columns:1fr 1fr } }
@media(max-width:520px){ .n-rgrid{ grid-template-columns:1fr } }

/* ═══ Páginas internas ══════════════════════════════════════════════════ */


/* ── serviços em detalhe (foto + texto, lados alternados) ─────────── */
.n-slist{ display:grid; gap:18px }
.n-srow{ display:grid; grid-template-columns:1fr 1fr; border-radius:22px; overflow:hidden;
  min-height:380px }
.n-srow:nth-child(even) .n-sfoto{ order:2 }
.n-sfoto{ position:relative; min-height:260px; overflow:hidden }
.n-sfoto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.7,.3,1) }
.n-srow:hover .n-sfoto img{ transform:scale(1.04) }
.n-sfoto::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, #0A0A0A00 60%, #0A0A0A55 100%) }
.n-srow:nth-child(even) .n-sfoto::after{
  background:linear-gradient(270deg, #0A0A0A00 60%, #0A0A0A55 100%) }
.n-stexto{ padding:clamp(26px,3.6vw,46px); display:flex; flex-direction:column;
  justify-content:center; gap:14px }
.n-stexto .n-scab{ display:flex; align-items:center; gap:14px }
.n-stexto .n-scab .num{ font-size:11px; letter-spacing:.14em; color:#8A8A8A }
.n-stexto h2{ font-size:clamp(24px,2.6vw,34px); letter-spacing:-.03em; line-height:1.08 }
.n-stexto > p{ color:#B4B4B4; font-size:15px; line-height:1.65; max-width:48ch }
.n-lista{ list-style:none; padding:0; margin:4px 0 6px; display:grid; gap:8px }
.n-lista li{ display:flex; gap:10px; align-items:flex-start; font-size:14px; color:#D6D6D6;
  line-height:1.5 }
.n-lista li::before{ content:''; flex:0 0 auto; width:6px; height:6px; border-radius:50%;
  background:var(--o); margin-top:8px; box-shadow:0 0 10px #ff6a1a99 }
.n-link{ display:inline-flex; align-items:center; gap:8px; color:var(--o); font-size:14px;
  font-weight:500; margin-top:4px; transition:.2s }
.n-link:hover{ gap:12px }
.n-ico{ width:38px; height:38px; border-radius:11px; background:var(--o); color:#0A0A0A;
  display:grid; place-items:center; flex:0 0 auto; box-shadow:0 6px 18px #FF6A1A55 }
.n-ico svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round }
@media(max-width:820px){
  .n-srow{ grid-template-columns:1fr; min-height:0 }
  .n-srow:nth-child(even) .n-sfoto{ order:0 }
  .n-sfoto{ min-height:220px }
  .n-sfoto::after, .n-srow:nth-child(even) .n-sfoto::after{
    background:linear-gradient(#0A0A0A00 70%, #0A0A0A80 100%) }
}

/* extras: grade de itens menores */
.n-extras{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px }
.n-extra{ border-radius:var(--r); padding:22px; display:flex; gap:14px; align-items:flex-start }
.n-extra .n-ico{ width:34px; height:34px; border-radius:10px }
.n-extra .n-ico svg{ width:16px; height:16px }
.n-extra h4{ font-size:15.5px; letter-spacing:-.02em; margin-bottom:5px }
.n-extra p{ font-size:13.5px; color:#A0A0A0; line-height:1.55 }

/* ── cases: filtro + galeria ──────────────────────────────────────── */
.n-filtros{ display:flex; gap:8px; flex-wrap:wrap; padding:7px; border-radius:var(--r);
  width:max-content; max-width:100%; margin-bottom:clamp(22px,3vw,34px) }
.n-filtros button{ padding:9px 16px; border-radius:var(--r-sm); font-size:13.5px; color:#E8E8E8;
  transition:.2s; white-space:nowrap }
.n-filtros button:hover, .n-filtros button.on{ background:#ffffff14; color:#fff }
.n-filtros button.on{ background:var(--o); color:#0A0A0A }
.n-galeria{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px }
.n-galeria .n-tile{ min-height:300px; aspect-ratio:4/5 }
.n-galeria .n-tile video{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:1 }
/* tile sem filmagem: a logo do cliente (ou o nome) num vidro com um brilho
   laranja atrás — não tem foto, então não finge que tem */
.n-tile--logo{ display:grid; place-items:center; padding:28px; text-align:center }
.n-tile--logo::before{ content:''; position:absolute; inset:0;
  background:radial-gradient(60% 50% at 50% 42%, #ff6a1a2e, #0000 70%) }
.n-tile--logo::after{ background:linear-gradient(#0000 55%, #000000d9 100%) }
.n-tile--logo img{ position:static; width:auto; height:clamp(52px,7vw,84px); max-width:70%;
  object-fit:contain; margin:0 auto 46px; transition:transform .5s }
.n-tile--logo:hover img{ transform:scale(1.06) }
.n-tile--logo .nome{ font-size:clamp(24px,3vw,36px); font-weight:700; letter-spacing:-.035em;
  line-height:1; margin-bottom:46px; color:#fff }
.n-tile--logo .nome em{ font-style:normal; color:var(--o) }
.n-tile--logo > .rot{ position:absolute; left:18px; right:18px; bottom:18px; text-align:left }
.n-tile[hidden]{ display:none }
@media(max-width:900px){ .n-galeria{ grid-template-columns:repeat(2,1fr) } }
@media(max-width:520px){ .n-galeria{ grid-template-columns:1fr }
  .n-galeria .n-tile{ aspect-ratio:4/3; min-height:0 } }

/* ── sobre ────────────────────────────────────────────────────────── */
.n-prosa{ display:grid; grid-template-columns:1fr 1.2fr; gap:clamp(24px,4vw,60px); align-items:start }
.n-prosa p{ color:#B4B4B4; font-size:clamp(15px,1.5vw,17px); line-height:1.7; margin-bottom:16px }
.n-prosa p:first-child{ color:#E8E8E8 }
@media(max-width:820px){ .n-prosa{ grid-template-columns:1fr } }
.n-numeros{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:clamp(30px,4vw,50px) }
.n-numeros .n-card{ min-width:0 }
@media(max-width:820px){ .n-numeros{ grid-template-columns:repeat(2,1fr) } }
/* 6 por linha; flex em vez de grid pra última linha (incompleta) ficar centrada */
.n-marcas{ --por:6; --vao:14px; display:flex; flex-wrap:wrap; justify-content:center; gap:var(--vao) }
.n-marca-c{ flex:0 0 calc((100% - (var(--por) - 1) * var(--vao)) / var(--por)); border-radius:var(--r);
  height:120px; display:grid; place-items:center; padding:20px 22px }
.n-marca-c img{ max-height:56px; width:auto; max-width:100%; opacity:.85; transition:.25s }
/* logo escura: célula clara, senão ela some no preto */
.n-marca-c.claro{ background:#F1F1F1; border-color:#ffffff59; box-shadow:inset 0 1px 0 #ffffff, 0 18px 50px #00000059 }
.n-marca-c.claro img{ opacity:1 }
@media(max-width:1000px){ .n-marcas{ --por:4 } }
@media(max-width:640px){ .n-marcas{ --por:3 } .n-marca-c{ height:96px; padding:14px } .n-marca-c img{ max-height:44px } }
.n-marca-c:hover img{ opacity:1; transform:scale(1.05) }

/* ── contato ──────────────────────────────────────────────────────── */
.n-contato{ display:grid; grid-template-columns:1.25fr .75fr; gap:18px; align-items:start }
@media(max-width:880px){ .n-contato{ grid-template-columns:1fr } }
.n-form{ border-radius:22px; padding:clamp(22px,3vw,36px); display:grid; gap:16px }
.n-f2{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
@media(max-width:600px){ .n-f2{ grid-template-columns:1fr } }
.n-campo{ display:grid; gap:7px }
.n-campo label{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#8A8A8A }
.n-campo input, .n-campo select, .n-campo textarea{ width:100%; font:inherit; font-size:15px;
  color:#fff; background:#ffffff0d; border:1px solid #ffffff1f; border-radius:12px;
  padding:13px 15px; outline:none; transition:.2s; -webkit-appearance:none; appearance:none }
.n-campo select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:16px; padding-right:40px }
.n-campo select option{ color:#111; background:#fff }
.n-campo textarea{ min-height:130px; resize:vertical }
.n-campo input::placeholder, .n-campo textarea::placeholder{ color:#6E6E6E }
.n-campo input:focus, .n-campo select:focus, .n-campo textarea:focus{
  border-color:#ff6a1a99; background:#ffffff12; box-shadow:0 0 0 3px #ff6a1a26 }
.n-form .n-b1{ justify-self:start; border:0; cursor:pointer; font-family:inherit }
.n-form small{ color:#7A7A7A; font-size:12.5px; line-height:1.5 }
.n-canais{ display:grid; gap:12px }
.n-canal{ border-radius:var(--r); padding:18px 20px; display:flex; gap:14px; align-items:center;
  transition:.25s }
.n-canal:hover{ transform:translateY(-2px) }
.n-canal b{ display:block; font-size:15px; letter-spacing:-.01em }
.n-canal div > span{ display:block; font-size:13px; color:#A0A0A0; margin-top:2px }

/* ═══ Home: seções a mais ═══════════════════════════════════════════════ */

/* para quem é / preços: um card por perfil, com o "a partir de" que vem da
   página de orçamento daquele perfil */
.n-perfis{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px }
.n-perfil{ border-radius:var(--r); padding:22px; display:flex; flex-direction:column; gap:10px;
  min-height:230px; transition:.28s; position:relative }
.n-perfil:hover{ transform:translateY(-4px); border-color:#ff6a1a66 }
.n-perfil .n-ico{ margin-bottom:8px }
.n-perfil h3{ font-size:18px; letter-spacing:-.025em }
.n-perfil p{ font-size:13.5px; color:#A0A0A0; line-height:1.55; flex:1 }
.n-perfil .preco{ font-size:12px; color:#8A8A8A; margin-top:6px }
.n-perfil .preco b{ display:block; font-size:22px; color:#fff; letter-spacing:-.03em;
  font-weight:700; margin-top:2px }
.n-perfil .preco b small{ font-size:12px; color:#A0A0A0; font-weight:400; letter-spacing:0 }
.n-perfil .n-link{ margin-top:10px }
.n-perfil--destaque{ border-color:#ff6a1a80; box-shadow:inset 0 1px 0 #ffffff33, 0 18px 50px #00000059,
  0 0 0 1px #ff6a1a33 }
.n-perfil .tag{ position:absolute; top:16px; right:16px; font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; padding:5px 10px; border-radius:8px; background:var(--o); color:#0A0A0A;
  font-weight:600 }
@media(max-width:1000px){ .n-perfis{ grid-template-columns:repeat(2,1fr) } }
@media(max-width:520px){ .n-perfis{ grid-template-columns:1fr } }
.n-nota{ font-size:12.5px; color:#6E6E6E; margin-top:14px }

/* por que a gente: duas colunas, texto de um lado e a foto do outro */
.n-porque{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:stretch }
.n-porque .foto{ position:relative; border-radius:22px; overflow:hidden; min-height:380px }
.n-porque .foto img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.n-porque .foto::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(#0000 40%, #0A0A0Ad9 100%) }
.n-porque .foto .legenda{ position:absolute; left:22px; right:22px; bottom:22px; z-index:2;
  padding:14px 18px; border-radius:var(--r-sm); font-size:13.5px; color:#E8E8E8 }
.n-difs{ display:grid; gap:12px }
.n-dif{ border-radius:var(--r); padding:20px 22px; display:flex; gap:16px; align-items:flex-start }
.n-dif .n-ico{ width:34px; height:34px; border-radius:10px }
.n-dif .n-ico svg{ width:16px; height:16px }
.n-dif h4{ font-size:16px; letter-spacing:-.02em; margin-bottom:5px }
.n-dif p{ font-size:13.5px; color:#A0A0A0; line-height:1.55 }
@media(max-width:880px){ .n-porque{ grid-template-columns:1fr } .n-porque .foto{ min-height:260px } }

/* perguntas: <details> nativo, sem JS */
.n-faq{ display:grid; gap:10px; max-width:860px }
.n-faq details{ border-radius:var(--r); overflow:hidden }
.n-faq summary{ list-style:none; cursor:pointer; padding:18px 22px; display:flex; gap:14px;
  align-items:center; justify-content:space-between; font-size:15.5px; font-weight:500;
  letter-spacing:-.01em }
.n-faq summary::-webkit-details-marker{ display:none }
.n-faq summary::after{ content:''; flex:0 0 auto; width:26px; height:26px; border-radius:8px;
  background:#ffffff14 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/14px no-repeat;
  transition:.25s }
.n-faq details[open] summary::after{ transform:rotate(45deg); background-color:var(--o) }
.n-faq details p{ padding:0 22px 20px; color:#B4B4B4; font-size:14.5px; line-height:1.65;
  max-width:70ch }

/* ═══ Sobre: hero preso, fotos em leque que se espalham (porte do StackSpread) ═══
   --p (0→1) = progresso da rolagem na seção, escrito pelo n.js.
   --q = trecho onde as fotos se espalham: para de 0 até 12% e de 90% em diante.
   --mx/--my (-1→1) = mouse, também do n.js, só com o leque aberto. */
.n-pin{ position:relative; height:350svh; --q:clamp(0, calc((var(--p, 0) - .12) / .78), 1) }
.n-fixo{ position:sticky; top:0; height:100svh; min-height:0 }
.n-fixo .n-bg{ transform:translateY(calc(var(--p,0) * -8%)) scale(1.12); transform-origin:50% 40% }
.n-fixo > .n-nav{ z-index:30 }
.n-fixo > .n-centro, .n-fixo > .n-cartas, .n-fixo > .n-faixa-h, .n-fixo > .n-mosaico{ position:absolute }

/* texto do meio: entra em 30% do espalhar, crescendo de .85 até 1 */
.n-centro{ inset:0; z-index:5; display:grid; place-content:center; text-align:center;
  padding:0 var(--pad); pointer-events:none;
  opacity:clamp(0, calc((var(--q) - .3) / .35), 1);
  transform:scale(calc(.85 + .15 * clamp(0, calc((var(--q) - .3) / .6), 1))) }
.n-centro .n-rot{ justify-content:center; margin-bottom:16px }
.n-centro h1{ font-weight:700; font-size:clamp(30px,4.6vw,66px); line-height:1.02; letter-spacing:-.038em;
  max-width:16ch; margin:0 auto; text-wrap:balance }
.n-centro h1 em{ font-style:normal; color:var(--o) }
.n-centro p{ color:#C9C9C9; font-size:clamp(14px,1.2vw,18px); line-height:1.6; max-width:44ch;
  margin:16px auto 0 }

/* as fotos: ancoradas no centro (-50%), deslocadas em vw/vh; entre a pilha
   (--sx/--sy/--sr, escala .82) e o alvo (--tx/--ty, rot 0, --ts) pelo --q.
   O mouse desloca cada uma pela profundidade (--d), só depois de aberto. */
.n-cartas{ inset:0; z-index:10; pointer-events:none }
.n-carta{ position:absolute; left:50%; top:50%; margin:0; z-index:var(--z);
  width:calc(var(--w) * 1vw); height:calc(var(--h) * 1vh);
  --x:calc(var(--sx) + (var(--tx) - var(--sx)) * var(--q));
  --y:calc(var(--sy) + (var(--ty) - var(--sy)) * var(--q));
  --dx:calc(var(--x) - var(--mx, 0) * 2.6 * var(--d) * var(--q));
  --dy:calc(var(--y) - var(--my, 0) * 2.2 * var(--d) * var(--q));
  transform:translate(calc(-50% + var(--dx) * 1vw), calc(-50% + var(--dy) * 1vh))
            rotate(calc(var(--sr) * (1 - var(--q)) * 1deg))
            scale(calc(.82 + (var(--ts) - .82) * var(--q)));
  border-radius:10px; overflow:hidden; will-change:transform;
  box-shadow:0 24px 60px #00000080, 0 0 0 1px #ffffff1f }
.n-carta img{ width:100%; height:100%; object-fit:cover; display:block }

/* dica de rolar: some antes de as fotos começarem a abrir */
.n-role{ position:fixed; left:0; right:0; bottom:3vh; z-index:70; display:flex; flex-direction:column;
  align-items:center; gap:4px; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:#D6D6D6; pointer-events:none; opacity:clamp(0, calc(1 - var(--p, 0) / .12), 1) }
.n-role::after{ content:''; width:8px; height:8px; border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor; transform:rotate(45deg);
  animation:nRole 1.4s ease-in-out infinite }
@keyframes nRole{ 0%,100%{ transform:translateY(0) rotate(45deg) } 50%{ transform:translateY(5px) rotate(45deg) } }

/* toque (celular/tablet): vira duas colunas, sem mouse; o texto fica no meio */
@media(pointer:coarse){
  .n-carta{ --tx:var(--smx); --ty:var(--smy); --ts:.72; width:40vw; height:15vh; border-radius:4vw }
  .n-centro h1{ font-size:clamp(26px,8vw,40px) }
}
@media(max-width:700px){ .n-pin{ height:280svh } }
@media(prefers-reduced-motion:reduce){
  .n-pin{ height:auto } .n-fixo{ position:relative; height:auto; min-height:90svh }
  .n-pin{ --q:1 } .n-fixo .n-bg{ transform:none } .n-role{ display:none }
}

/* ═══ Serviços: faixa horizontal ════════════════════════════════════════
   O trilho tem largura de conteúdo (max-content) e anda pra esquerda:
   deslocamento = (largura visível − largura do trilho − respiro) × --p.
   100% em translate é a largura do PRÓPRIO trilho, por isso dá pra fazer
   sem medir nada em JS. */
.n-pin--faixa{ height:260svh }
/* a seção seguinte cola mais no hero preso: o respiro padrão (até 110px)
   somado ao vão que o próprio hero já deixa embaixo ficava largo demais */
.n-pin + .n-sec{ padding-top:clamp(24px,4vw,48px) }
/* Serviços: a lista já aparece na parte de baixo da tela quando a faixa
   termina de passar — é o convite pra rolar. Ela sobe 18svh por cima do
   hero, e só depois de os cards pararem: o trilho anda com --q, que chega
   a 1 em 90% do percurso; a sobreposição começa nos últimos ~7%. */
.n-pin--faixa + .n-sec{ margin-top:-18svh; padding-top:0; position:relative; z-index:6 }
.n-faixa-h{ inset:0; z-index:5; display:grid; grid-template-columns:42vw 58vw; align-items:center;
  --vis:58vw }
.n-faixa-txt{ position:relative; z-index:2; padding:0 clamp(24px,4vw,64px) 0 var(--pad);
  /* cortina: os cards passam por baixo do texto e somem */
  background:linear-gradient(90deg, #0A0A0A 0%, #0A0A0Af0 70%, #0A0A0A00 100%);
  height:100%; display:grid; align-content:center }
.n-faixa-txt .n-h1{ font-size:clamp(30px,4.4vw,62px); max-width:14ch; margin:0; text-wrap:balance }
.n-faixa-txt .n-sub{ margin:18px 0 0; max-width:40ch }
.n-trilho{ display:flex; gap:16px; width:max-content; will-change:transform;
  transform:translateX(calc(var(--q,0) * (var(--vis) - 100% - var(--pad)))) }
.n-vagao{ position:relative; flex:0 0 auto; width:clamp(220px,24vw,340px); aspect-ratio:3/4;
  border-radius:18px; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between;
  padding:20px; border:1px solid #ffffff26; box-shadow:0 24px 60px #00000080; background:#111 }
.n-vagao img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.62; transition:transform .7s cubic-bezier(.2,.7,.3,1), opacity .35s }
.n-vagao:hover img{ transform:scale(1.05); opacity:.78 }
/* véu: a foto é clara (camisa rosa, banner vermelho) e comia o texto. O
   degradê começa a fechar já na metade do card e vira preto quase sólido
   onde fica o título — com a opacidade acima, o nome lê em qualquer frame. */
.n-vagao::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(#00000059 0%, #00000026 24%, #000000a6 52%, #000000ed 76%, #000000fa 100%) }
.n-vagao > *{ position:relative; z-index:2 }
.n-vagao .n-ico{ align-self:flex-start }
.n-vagao .txt{ display:grid; gap:4px }
.n-vagao .num{ font-size:11px; letter-spacing:.14em; color:#B5B5B5 }
.n-vagao b{ font-size:clamp(18px,1.8vw,24px); letter-spacing:-.025em; line-height:1.1;
  text-shadow:0 2px 14px #000000cc }
.n-vagao small{ font-size:13px; color:#D6D6D6; line-height:1.45;
  text-shadow:0 1px 10px #000000b3 }
@media(max-width:820px){
  .n-pin--faixa{ height:220svh }
  .n-faixa-h{ grid-template-columns:1fr; grid-template-rows:auto 1fr; align-items:end; --vis:100vw;
    padding-top:76px }
  .n-faixa-txt{ background:none; height:auto; padding:0 var(--pad) 18px }
  .n-faixa-txt .n-h1{ font-size:clamp(28px,7.6vw,40px) }
  .n-trilho{ padding-left:var(--pad); align-self:center; margin-bottom:10svh }
  .n-vagao{ width:64vw; aspect-ratio:4/5 }
  .n-pin--faixa + .n-sec{ margin-top:0; padding-top:clamp(24px,4vw,48px) }   /* no celular os cards ficam embaixo: sem sobrepor */
}

/* ═══ Cases: mosaico que se monta ═══════════════════════════════════════
   Cada peça começa deslocada (--dx vw, --dy vh), torta (--rot) e maior, e
   chega no lugar quando --q vai a 1. O véu no meio segura o título. */
.n-pin--mosaico{ height:260svh }
.n-mosaico{ inset:0; z-index:1; display:grid; grid-template-columns:repeat(4,1fr);
  grid-template-rows:repeat(3,1fr); gap:10px; padding:10px }
.n-mosaico::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(52% 44% at 50% 50%, #0A0A0Ae0 0%, #0A0A0A80 60%, #0A0A0A26 100%) }
.n-peca{ margin:0; border-radius:12px; overflow:hidden; background:#111; will-change:transform;
  transform:translate(calc((1 - var(--q)) * var(--dx) * 1vw), calc((1 - var(--q)) * var(--dy) * 1vh))
            rotate(calc((1 - var(--q)) * var(--rot) * 1deg))
            scale(calc(1.3 - .3 * var(--q)));
  opacity:calc(.2 + .8 * var(--q)) }
.n-peca img{ width:100%; height:100%; object-fit:cover; display:block }
.n-centro--fixo{ opacity:1 !important; transform:none !important; z-index:5 }
@media(max-width:820px){
  .n-pin--mosaico{ height:220svh }
  .n-mosaico{ grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(4,1fr); gap:8px; padding:8px }
  .n-centro--fixo h1{ font-size:clamp(28px,8vw,40px) }
}

/* ═══ Contato: a conversa se escreve sozinha ═════════════════════════════
   Uma tela só, sem rolagem presa. Cada balão entra no tempo: .5s + i × .85s.
   Antes de cada resposta, o "digitando" pisca por .8s na mesma célula. */
.n-hero--papo{ min-height:100svh }
.n-hero--papo > .n-papo{ position:absolute }
.n-papo{ inset:0; z-index:5; display:grid; grid-template-columns:1.05fr .95fr; align-items:center;
  gap:clamp(20px,4vw,60px); padding:0 var(--pad) }
.n-papo-txt .n-h1{ font-size:clamp(30px,4.4vw,62px); max-width:14ch; margin:0; text-wrap:balance }
.n-papo-txt .n-sub{ margin:18px 0 0; max-width:42ch }
.n-chat{ border-radius:22px; padding:16px; display:grid; gap:10px; max-width:440px; justify-self:end;
  width:100% }
.n-chat-topo{ display:flex; align-items:center; gap:10px; padding:2px 6px 12px;
  border-bottom:1px solid #ffffff1a; margin-bottom:4px; font-size:13.5px }
.n-chat-topo i{ width:30px; height:30px; border-radius:9px; background:var(--o); display:block;
  box-shadow:0 0 18px #ff6a1a66 }
.n-chat-topo b{ font-weight:600 }
.n-chat-topo span{ color:#7ED957; font-size:12px; margin-left:auto }
.n-chat-topo span::before{ content:''; display:inline-block; width:7px; height:7px; border-radius:50%;
  background:#7ED957; margin-right:6px; vertical-align:middle }
.n-balao, .n-resposta{ --t:calc(.5s + var(--i) * .85s) }
.n-balao{ max-width:84%; padding:11px 14px; border-radius:16px; font-size:14.5px; line-height:1.45;
  opacity:0; animation:nBalao .5s cubic-bezier(.2,.7,.3,1) var(--t) forwards }
@keyframes nBalao{ from{ opacity:0; transform:translateY(14px) scale(.96) } to{ opacity:1; transform:none } }
.n-balao.eu{ justify-self:end; background:var(--o); color:#0A0A0A; border-bottom-right-radius:5px }
.n-balao.eles{ justify-self:start; background:#ffffff14; color:#F2F2F2; border-bottom-left-radius:5px }
.n-balao.cta{ justify-self:stretch; max-width:none; text-align:center; margin-top:6px; background:#fff;
  color:#0A0A0A; font-weight:600; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:14px; pointer-events:auto }
.n-resposta{ position:relative; justify-self:start; max-width:84% }
.n-resposta .n-balao{ max-width:none }
/* três pontinhos que sobem e descem, visíveis só nos .8s antes da resposta */
.n-digitando{ position:absolute; left:0; bottom:0; display:inline-flex; gap:4px; padding:13px 14px;
  border-radius:16px; border-bottom-left-radius:5px; background:#ffffff14; opacity:0;
  animation:nDigitando .8s linear calc(var(--t) - .8s) forwards }
.n-digitando i{ width:6px; height:6px; border-radius:50%; background:#C9C9C9; display:block;
  animation:nPonto .9s ease-in-out infinite }
.n-digitando i:nth-child(2){ animation-delay:.15s } .n-digitando i:nth-child(3){ animation-delay:.3s }
@keyframes nDigitando{ 0%{ opacity:0 } 12%{ opacity:1 } 88%{ opacity:1 } 100%{ opacity:0 } }
@keyframes nPonto{ 0%,100%{ transform:translateY(0); opacity:.5 } 50%{ transform:translateY(-4px); opacity:1 } }
.n-chat[aria-hidden]{ pointer-events:none }
@media(max-width:820px){
  .n-hero--papo{ min-height:0; padding-bottom:40px }
  .n-hero--papo > .n-papo{ position:relative; inset:auto }
  .n-papo{ grid-template-columns:1fr; padding-top:16px; gap:22px }
  .n-papo-txt .n-h1{ font-size:clamp(28px,7.6vw,40px) }
  .n-chat{ justify-self:stretch; max-width:none; padding:12px }
  .n-balao{ font-size:13.5px }
}
@media(prefers-reduced-motion:reduce){
  .n-trilho{ transform:none; flex-wrap:wrap; width:auto; padding:0 var(--pad) }
  .n-peca{ transform:none; opacity:.8 }
  .n-balao{ animation:none; opacity:1 } .n-digitando{ display:none }
}


/* ═══ CELULAR ═══════════════════════════════════════════════════════════
   O menu vira uma barra fixa com botão que abre uma gaveta, o rodapé
   encolhe, e o hero de Serviços deixa de ser preso — vira texto +
   carrossel que se arrasta com o dedo, que é o gesto natural no telefone. */
@media(max-width:900px){
  .n{ --navh:68px }

  /* o nav de dentro do hero sai; quem manda no celular é a barra .n-mbar */
  .n-hero > .n-nav{ display:none }
  /* sem o nav, o miolo da home caía na linha "auto" do grid e grudava no
     topo, com um vazio embaixo; 1fr centraliza ele na tela */
  .n > .n-hero{ grid-template-rows:1fr auto }

  /* o conteúdo começa abaixo do menu (que saiu do fluxo) */
  .n-hero{ padding-top:var(--navh) }
  .n-centro, .n-mosaico{ padding-top:var(--navh) }


  /* só no telefone / só no desktop */
  .so-desk{ display:none }
}

@media(max-width:820px){
  /* ── Serviços: sem rolagem presa, carrossel que se arrasta ────────── */
  .n-pin--faixa{ height:auto }
  /* minmax(0,1fr): sem isto a coluna do grid cresce até a largura do trilho
     (≈1200px) e o carrossel nunca rola — ele só vaza pra fora da tela */
  .n-pin--faixa .n-fixo{ position:relative; height:auto; min-height:0;
    grid-template-columns:minmax(0,1fr) }
  /* o respiro do menu já vem do padding do .n-hero; aqui só um pouco a mais */
  .n-pin--faixa .n-faixa-h{ position:relative; inset:auto; display:block; min-width:0;
    padding:22px 0 26px }
  .n-pin--faixa .n-faixa-txt{ background:none; height:auto; display:block;
    padding:0 var(--pad) 20px }
  .n-pin--faixa .n-trilho{ transform:none; width:auto; margin:0; padding:2px var(--pad) 8px;
    overflow-x:auto; -webkit-overflow-scrolling:touch; scroll-snap-type:x mandatory;
    scrollbar-width:none }
  .n-pin--faixa .n-trilho::-webkit-scrollbar{ display:none }
  .n-pin--faixa .n-vagao{ width:74vw; max-width:300px; aspect-ratio:4/5; scroll-snap-align:center }
  .n-pin--faixa .n-role{ display:none }
  .n-pin--faixa + .n-sec{ margin-top:0; padding-top:clamp(22px,5vw,36px) }
  /* a lista não repete as fotos: o carrossel logo acima já mostrou as
     mesmas quatro. Fica só o texto, bem mais curto de rolar. */
  .n-slist{ gap:12px }
  .n-sfoto{ display:none }
  .n-srow{ min-height:0 }
  .n-stexto{ padding:20px }
  .n-stexto h2{ font-size:22px }
  .n-stexto > p{ font-size:14px }
  /* extras: dois por linha, só o nome — a descrição repete o que a lista já disse */
  .n-extras{ grid-template-columns:1fr 1fr; gap:10px }
  .n-extra{ padding:16px 14px; flex-direction:column; gap:10px }
  .n-extra p{ display:none }
  .n-extra h4{ font-size:14px; margin:0 }
}

/* ── rodapé no celular ──────────────────────────────────────────────
   Marca no meio; Serviços e Orçamento em dois cartões lado a lado;
   Contato em três botões com ícone; © embaixo, centralizado. */
.n-ct .ic, .n-ct .curto{ display:none }
@media(max-width:620px){
  .n-rodape{ padding-top:36px }
  .n-rgrid{ grid-template-columns:1fr 1fr; gap:12px }
  .n-rgrid .sobre{ grid-column:1 / -1; text-align:center; margin-bottom:14px }
  .n-rodape .n-marca{ justify-content:center }
  .n-rodape .n-marca img{ height:42px }
  .n-rodape .sobre p{ font-size:13px; line-height:1.6; margin:12px auto 0; max-width:36ch }
  .n-rodape h5{ font-size:10px; margin-bottom:10px; display:flex; align-items:center; gap:7px }
  .n-rodape h5::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--o);
    box-shadow:0 0 8px var(--o) }
  .n-rgrid > div:not(.sobre):not(.contato){ padding:16px 16px 12px; border-radius:16px;
    background:linear-gradient(180deg, #ffffff0a, #ffffff04); border:1px solid #ffffff12 }
  .n-rodape a{ font-size:13.5px; padding:5px 0 }
  .n-rgrid .contato{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(3, 1fr); gap:8px;
    margin-top:6px }
  .n-rgrid .contato h5{ grid-column:1 / -1; justify-content:center; margin-bottom:4px }
  .n-rodape .n-ct{ display:flex; flex-direction:column; align-items:center; gap:7px; padding:14px 4px 12px;
    border-radius:14px; background:linear-gradient(180deg, #ffffff0a, #ffffff04); border:1px solid #ffffff12;
    font-size:12.5px; color:#D6D6D6 }
  .n-rodape .n-ct:active{ background:#ffffff14 }
  .n-ct .ic{ display:block; width:20px; height:20px; color:var(--o) }
  .n-ct .full{ display:none }
  .n-ct .curto{ display:inline }
  /* padding de baixo maior: o botão flutuante do WhatsApp não cobre o © */
  .n-fim-linha{ margin-top:26px; padding:16px 0 92px; font-size:11.5px; gap:10px;
    flex-direction:column; align-items:center; text-align:center }
  .n-rodape .n-dev img{ height:20px }
}

/* ═══ Menu do celular: barra fixa + gaveta ══════════════════════════════
   O botão fica na barra, acima da gaveta (z 90 > 85), e vira o X de fechar. */
.n-mbar, .n-drawer{ display:none }
@media(max-width:900px){
  .n-mbar{ display:flex; position:fixed; top:0; left:0; right:0; z-index:90; height:var(--navh);
    align-items:center; justify-content:space-between; padding:0 var(--pad);
    background:linear-gradient(180deg, #0A0A0Aeb, #0A0A0Ab8);
    backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4);
    border-bottom:1px solid #ffffff14; transition:background .3s, border-color .3s }
  html[data-menu] .n-mbar{ background:#0000; border-color:#0000 }
  .n-mbar .n-marca img{ height:38px }
  .n-burger{ width:46px; height:46px; border-radius:13px; display:grid; place-content:center; gap:6px;
    background:linear-gradient(160deg, #ffffff1f, #ffffff0a); border:1px solid #ffffff2e;
    box-shadow:inset 0 1px 0 #ffffff33; cursor:pointer }
  .n-burger span{ display:block; width:20px; height:2px; border-radius:2px; background:#fff;
    transition:transform .35s cubic-bezier(.2,.7,.3,1) }
  html[data-menu] .n-burger span:first-child{ transform:translateY(4px) rotate(45deg) }
  html[data-menu] .n-burger span:last-child{ transform:translateY(-4px) rotate(-45deg) }

  .n-drawer{ display:flex; flex-direction:column; justify-content:space-between; position:fixed;
    inset:0; z-index:85; overflow-y:auto;
    padding:calc(var(--navh) + 18px) var(--pad) calc(26px + env(safe-area-inset-bottom));
    background:radial-gradient(110% 60% at 100% 0%, #ff6a1a2e, #0000 62%), #0A0A0Af5;
    backdrop-filter:blur(26px) saturate(1.3); -webkit-backdrop-filter:blur(26px) saturate(1.3);
    opacity:0; visibility:hidden; transition:opacity .3s, visibility 0s .3s }
  html[data-menu] .n-drawer{ opacity:1; visibility:visible; transition:opacity .3s }
  html[data-menu]{ overflow:hidden }
  .n-drawer nav{ display:grid }
  .n-drawer nav a{ display:flex; align-items:baseline; gap:14px; padding:12px 0;
    font-size:clamp(22px,6.4vw,28px); font-weight:650; letter-spacing:-.03em; color:#F2F2F2;
    border-bottom:1px solid #ffffff12;
    opacity:0; transform:translateY(16px);
    transition:opacity .45s, transform .45s cubic-bezier(.2,.7,.3,1); transition-delay:calc(var(--i) * 45ms) }
  html[data-menu] .n-drawer nav a{ opacity:1; transform:none }
  .n-drawer nav a span{ font-size:11px; letter-spacing:.14em; color:#6E6E6E; font-weight:500; min-width:22px }
  .n-drawer nav a.on{ color:var(--o) }
  .n-drawer-pe{ display:grid; gap:18px; margin-top:28px }
  .n-drawer-pe .n-b1{ justify-content:space-between; padding-left:22px }
  /* WhatsApp e Instagram: botões lado a lado, vidro com um degradê leve */
  .n-drawer .redes{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
  .n-drawer .redes a{ display:flex; align-items:center; justify-content:center; gap:9px;
    padding:13px 12px; border-radius:var(--r); font-size:14px; font-weight:500; color:#F2F2F2;
    background:linear-gradient(160deg, #ffffff1f 0%, #ffffff0a 55%, #ff6a1a14 100%);
    border:1px solid #ffffff26; box-shadow:inset 0 1px 0 #ffffff2e; transition:.2s }
  .n-drawer .redes a:active{ transform:scale(.98) }
  .n-drawer .redes svg{ width:18px; height:18px; flex:0 0 auto; fill:none; stroke:currentColor;
    stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round }
}

/* fundo das páginas internas: <picture> troca a foto pela vertical em tela
   em pé; a <img> de dentro herda o papel de cobrir */
picture.n-bg{ display:block }
picture.n-bg img{ width:100%; height:100%; object-fit:cover; display:block }

/* ═══ Home no celular ═══════════════════════════════════════════════════
   Menos texto, menos altura: o parágrafo de apoio de cada seção sai (o
   título já diz), serviços e preços viram carrossel de arrastar, e o que
   era lista de cards altos vira grade 2×2 só com o título. */
@media(max-width:700px){
  /* véu do hero mais leve: a coluna de texto cobre o meio da tela inteira
     no celular, e com o véu de desktop a galáxia some */
  .n-hero::after{ background:radial-gradient(80% 40% at 50% 46%, #0A0A0A99 0%, #0A0A0A1f 70%, #0A0A0A00 100%),
    linear-gradient(#0A0A0A73 0%, #0A0A0A00 20%, #0A0A0A00 62%, #0A0A0Ae6 92%, #0A0A0A 100%) }

  .n-selo{ margin-bottom:18px; font-size:12px }
  .n-h1{ font-size:clamp(32px,9.4vw,42px) }
  .n-sub{ margin:14px auto 22px }
  .n-acoes{ flex-direction:column; align-items:stretch; width:100%; max-width:340px; margin:0 auto; gap:10px }
  .n-acoes .n-b1, .n-acoes .n-b2{ justify-content:space-between }
  .n-cards{ flex-wrap:nowrap; gap:8px; width:100%; max-width:360px; margin:24px auto 0 }
  .n-card{ flex:1 1 0; min-width:0; padding:12px }
  .n-card b{ font-size:20px }
  .n-card span{ font-size:11px }
  .n-prova{ display:none }          /* repetia o "400+" do card logo acima */

  /* seções: mais juntas, só o título */
  .n-sec{ padding-top:52px; padding-bottom:20px }
  .n-topo{ margin-bottom:18px; gap:0 }
  .n-topo .n-lead{ display:none }
  .n-h2{ font-size:clamp(26px,7.8vw,34px) }

  /* serviços e preços: carrossel de arrastar, um card e a pontinha do próximo */
  .n-serv, .n-perfis{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    margin:0 calc(-1 * var(--pad)); padding:2px var(--pad) 10px }
  .n-serv::-webkit-scrollbar, .n-perfis::-webkit-scrollbar{ display:none }
  .n-serv > *, .n-perfis > *{ flex:0 0 80%; scroll-snap-align:center }
  .n-scard{ min-height:300px }
  .n-perfil{ min-height:0 }

  /* trabalho: 2×2, quatro peças, só o nome */
  .n-bento{ grid-template-columns:1fr 1fr; gap:8px }
  .n-tile, .n-tile--alto{ grid-row:auto; min-height:180px; padding:12px }
  .n-tile--largo{ grid-column:auto }
  .n-bento > :nth-child(n+5){ display:none }
  .n-tile b{ font-size:13.5px }
  .n-tile small{ display:none }
  .n-tile .tag{ top:10px; left:10px; font-size:9.5px; padding:4px 8px }

  /* por que a gente: foto da equipe numa faixa baixa, e os quatro motivos
     numa lista dentro de UM painel (ícone + título por linha). Formato
     diferente de propósito do "como funciona" logo abaixo. */
  .n-porque{ gap:10px }
  .n-porque .foto{ min-height:150px; border-radius:18px }
  .n-porque .foto .legenda{ left:12px; right:12px; bottom:12px; padding:10px 12px; font-size:12.5px }
  .n-difs{ grid-template-columns:1fr; gap:0; border-radius:18px; overflow:hidden;
    border:1px solid #ffffff1f; background:linear-gradient(160deg, #ffffff12, #ffffff05) }
  .n-dif{ flex-direction:row; align-items:center; gap:14px; padding:14px 16px;
    border:0; border-radius:0; border-bottom:1px solid #ffffff12; background:none;
    box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none }
  .n-dif:last-child{ border-bottom:0 }
  .n-dif .n-ico{ width:32px; height:32px; border-radius:9px }
  .n-dif p{ display:none }
  .n-dif h4{ font-size:15px; margin:0; line-height:1.3 }

  /* como funciona: linha do tempo — número num círculo laranja, linha
     ligando um passo ao outro, texto ao lado. Sem cards. */
  .n-passos{ grid-template-columns:1fr; gap:0 }
  .n-passo{ position:relative; display:grid; grid-template-columns:42px 1fr; column-gap:14px;
    padding:0 0 22px; border:0; border-radius:0; background:none; box-shadow:none;
    backdrop-filter:none; -webkit-backdrop-filter:none }
  .n-passo:last-child{ padding-bottom:0 }
  .n-passo:not(:last-child)::before{ content:''; position:absolute; left:20px; top:42px; bottom:0;
    width:2px; background:linear-gradient(var(--o), #ff6a1a1f) }
  .n-passo b{ grid-row:1 / span 2; width:42px; height:42px; border-radius:50%; display:grid;
    place-items:center; font-size:14px; letter-spacing:0; background:var(--o); color:#0A0A0A;
    box-shadow:0 6px 18px #ff6a1a55; position:relative; z-index:1 }
  .n-passo h4{ margin:3px 0 4px; font-size:16px }
  .n-passo p{ font-size:13.5px; line-height:1.5; color:#A8A8A8 }

  /* perguntas */
  .n-faq summary{ padding:15px 16px; font-size:14.5px }
  .n-faq details p{ padding:0 16px 16px; font-size:13.5px }

  /* chamada final */
  .n-fim{ padding:34px 20px; margin-top:32px; margin-bottom:28px }
  .n-fim h2{ font-size:clamp(26px,7.6vw,34px) }
  .n-fim .n-acoes{ max-width:none }
}

/* Reserva do vídeo do hero da home: a mesma imagem no fundo da seção. Se o
   navegador soltar o quadro (painel escondido, aba em segundo plano, troca
   de tamanho), aparece a foto em vez do preto até o vídeo repintar. */
.n > .n-hero{ background:#0A0A0A url("../../uploads/posters/hero-estrelas.jpg") center/cover no-repeat }
@media(max-aspect-ratio:4/5){
  .n > .n-hero{ background-image:url("../../uploads/posters/hero-estrelas-vertical.jpg") }
}

/* ═══ Cards de números do hero: entrada e contagem ══════════════════════
   Sobem e saem do desfoque um depois do outro (--i); o número conta de 0
   até o valor no mesmo ritmo (n.js). tabular-nums: sem isso a largura do
   número tremia enquanto contava. */
.n-card{ animation:nCardEntra .8s cubic-bezier(.2,.7,.3,1) both;
  animation-delay:calc(.35s + var(--i, 0) * .14s) }
.n-card b{ font-variant-numeric:tabular-nums }
@keyframes nCardEntra{
  from{ opacity:0; transform:translateY(22px) scale(.94); filter:blur(8px) }
  to{ opacity:1; transform:none; filter:none }
}
@media(prefers-reduced-motion:reduce){ .n-card{ animation:none } }

@media(max-width:700px){
  /* número em cima, rótulo embaixo, os dois centrados; altura igual pros
     três mesmo quando um rótulo quebra em duas linhas */
  .n-cards{ align-items:stretch }
  .n-card{ display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; padding:14px 8px; min-height:86px }
  .n-card b{ font-size:23px }
  .n-card span{ font-size:11px; line-height:1.3; margin-top:6px; color:#BDBDBD; text-wrap:balance }
}

/* ═══ Contato: formulário + coluna "o que acontece depois" ══════════════ */
/* o bloco de texto/chat do hero ficava por cima do menu e engolia os
   cliques; o nav sobe acima dele em qualquer hero */
.n-hero > .n-nav{ z-index:30 }
.n-contato{ align-items:start }
.n-lado{ display:grid; gap:12px; position:sticky; top:24px }
.n-depois{ border-radius:22px; padding:22px 22px 8px }
.n-depois h3{ font-size:17px; letter-spacing:-.02em; margin-bottom:14px }
.n-depois ol{ list-style:none; padding:0; margin:0; counter-reset:passo }
.n-depois li{ counter-increment:passo; position:relative; padding:0 0 16px 44px }
.n-depois li::before{ content:counter(passo); position:absolute; left:0; top:0; width:30px; height:30px;
  border-radius:50%; display:grid; place-items:center; background:var(--o); color:#0A0A0A;
  font-size:13px; font-weight:700; box-shadow:0 6px 16px #ff6a1a55 }
.n-depois li:not(:last-child)::after{ content:''; position:absolute; left:14px; top:30px; bottom:2px;
  width:2px; background:linear-gradient(var(--o), #ff6a1a1f) }
.n-depois li b{ display:block; font-size:14.5px; padding-top:5px }
.n-depois li span{ display:block; font-size:13px; color:#A0A0A0; margin-top:2px; line-height:1.45 }
.n-lado .n-canais{ grid-template-columns:1fr 1fr; gap:10px }
.n-lado .n-canal{ padding:14px; gap:10px; flex-direction:column; align-items:flex-start }
.n-lado .n-canal b{ font-size:14px }
.n-lado .n-canal div > span{ font-size:12px }
/* ícones dos próprios aplicativos, no formato de ícone de app */
.app-ico{ width:38px; height:38px; border-radius:11px; display:grid !important; place-items:center;
  flex:0 0 auto; overflow:hidden; margin:0 !important; box-shadow:0 6px 16px #00000059, inset 0 1px 0 #ffffff40 }
.app-ico svg{ width:22px; height:22px; display:block }
.app-wa{ background:linear-gradient(145deg, #34E27F, #1FB45A) }
.app-ig{ background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) }
.app-gm{ background:#fff }
.app-gm svg{ width:24px; height:24px }
.app-mp{ background:#fff }
.app-mp svg{ width:100%; height:100% }
.n-form-pe{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:4px }
@media(max-width:880px){ .n-lado{ position:static } }