/* =========================================================
   Narro · Design System 3 · v2 (15/10/2026)
   Fundamentos + componentes da marca. Vai em toda página nova.
   Fonte dos valores: o site no ar (Clientes/Narro/1 · Site/site) e o
   Padrão de Apresentação (3 · Apresentações/Padrão de Apresentação).
   Os tokens mantêm os MESMOS nomes do site, para o CSS de lá poder
   ser trazido sem tradução. Animação vive no JS (narro-motion.js);
   aqui só ficam os estados e o que o movimento precisa para não
   piscar nem sumir.
   ========================================================= */

@font-face{font-family:"MADE Tommy";src:url("../fonts/made-tommy-thin.woff2") format("woff2");font-weight:100;font-style:normal;font-display:swap}
@font-face{font-family:"MADE Tommy";src:url("../fonts/made-tommy-light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"MADE Tommy";src:url("../fonts/made-tommy-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"MADE Tommy";src:url("../fonts/made-tommy-medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"MADE Tommy";src:url("../fonts/made-tommy-bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
/* Audrey & Caroline: SÓ nas palavras do método (Clareza, Conexão, Continuidade). Nunca em título. */
@font-face{font-family:"Audrey & Caroline";src:url("../fonts/audrey-caroline-regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  /* cores da marca (style.css do site) */
  --bg:#d6d6d6;
  --purple:#480067;
  --purple-deep:#1d0039;
  --green:#65d600;
  --white:#ffffff;
  --logo-gray:#8c8c8c;
  /* fundos escuros que o site usa por dobra (estavam escritos direto no CSS de cada página) */
  --black:#0b0a0d;          /* Serviços */
  --night:#190027;          /* "O que fazemos", narrativa empilhada */
  --abyss:#0b0412;          /* "Onde atuamos" */
  --graphite:#232427;       /* contato e rodapé */
  --coal:#292b2e;           /* grade de cases da home */
  --paper:#f5f4f0;          /* texto sobre o grafite */
  --cream:#f5f5f2;          /* texto sobre o carvão */
  --ink-light:#2e2a33;      /* texto das telas claras da apresentação */
  --green-hover:#71e20c;    /* verde do CTA no hover */
  --wa-hover:#78ea14;       /* verde do botão de WhatsApp no hover */
  /* filtro Narro (ficha 07/10): mapa de cor das sombras às luzes, a 55% sobre a foto */
  --filtro-sombra:#140027;
  --filtro-luz:#f4dce6;

  --font:"MADE Tommy","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-script:"Audrey & Caroline",var(--font);
  --track:.07em;

  /* um único eixo lateral: o começo do logo Narro */
  --gutter:clamp(20px,9.5vw,190px);
  --inset:var(--gutter);
  --max:1600px;

  --ease-out:cubic-bezier(.16,1,.3,1);

  /* respiro vertical padrão das dobras: o mesmo em cima e embaixo */
  --section-y:clamp(72px,10vh,112px);

  /* ESCALA DE TÍTULO (site, 08/10): uma só. Light 300, caixa baixa, palavra-chave em 700 */
  --t-titulo:clamp(34.5px,3.91vw,57.5px);
  --section-title:var(--t-titulo);                  /* nome antigo, mantido para o CSS da Agência */
  --display:clamp(46px,6.3vw,108px);                /* fechamento (contato, chamada final) */

  /* texto corrido: padrão obrigatório */
  --p-size:13px;
  --p-leading:1.6;
  --p-tracking:.02em;
  --p-width:310px;

  /* REGRA DAS ASPAS (site e apresentação): altura = 70% da fonte do texto, mínimo 3,02vw e 40 px; largura = 1,38 x altura */
  --aspa-h:max(3.02vw,40px,calc(.7*var(--p-size)));

  /* superfície em uso (cada superfície redefine estes quatro) */
  --surface:var(--bg);
  --ink:var(--purple);                 /* cor do texto */
  --ink-2:rgba(72,0,103,.78);          /* texto de apoio */
  --line:rgba(72,0,103,.2);            /* filete de 1 px */
  --destaque:var(--purple);            /* palavra-chave, número forte: roxo no claro, verde no escuro */
}
@media (min-width:901px){:root{--t-titulo:clamp(40px,5.08vw,74.75px)}}
@media (max-width:900px){:root{--display:clamp(39px,10.8vw,59px);--section-y:clamp(60px,8vh,76px)}}
@media (max-width:720px){:root{--gutter:18px}}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%;scrollbar-gutter:stable}
body{
  margin:0;
  font-family:var(--font);
  font-weight:400;
  font-size:14px;
  line-height:1.3;
  letter-spacing:var(--track);
  color:var(--purple);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
img,svg,video,canvas{display:block;max-width:100%}
img,video{-webkit-user-drag:none;-webkit-touch-callout:none}
a{color:inherit;text-decoration:none}
p,h1,h2,h3,h4{margin:0}
ul,li{margin:0;padding:0;list-style:none}
button{font:inherit;letter-spacing:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--green);outline-offset:5px}

.container{width:min(100% - 2*var(--inset),var(--max));margin-inline:auto}
.wide{width:min(100% - 2*var(--gutter),1600px);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* dobra: o respiro é sempre --section-y, em cima e embaixo */
.n-section{padding-block:var(--section-y)}

/* ---------- Superfícies ---------- */
.n-surface{background:var(--surface);color:var(--ink)}
.n-surface--claro{--surface:var(--bg);--ink:var(--purple);--ink-2:rgba(72,0,103,.78);--line:rgba(72,0,103,.2);--destaque:var(--purple)}
/* claro de leitura (apresentação): texto quase preto, roxo só no destaque */
.n-surface--claro-neutro{--surface:var(--bg);--ink:var(--ink-light);--ink-2:rgba(46,42,51,.72);--line:rgba(46,42,51,.18);--destaque:var(--purple)}
.n-surface--roxo{--surface:var(--purple);--ink:#fff;--ink-2:rgba(255,255,255,.9);--line:rgba(255,255,255,.2);--destaque:var(--green)}
.n-surface--roxo-escuro{--surface:var(--purple-deep);--ink:#fff;--ink-2:rgba(255,255,255,.9);--line:rgba(255,255,255,.14);--destaque:var(--green)}
.n-surface--noite{--surface:var(--night);--ink:#fff;--ink-2:rgba(255,255,255,.82);--line:rgba(255,255,255,.22);--destaque:var(--green)}
.n-surface--abismo{--surface:var(--abyss);--ink:#fff;--ink-2:rgba(255,255,255,.82);--line:rgba(255,255,255,.22);--destaque:var(--green)}
.n-surface--preto{--surface:var(--black);--ink:#fff;--ink-2:rgba(255,255,255,.62);--line:rgba(255,255,255,.14);--destaque:var(--green)}
.n-surface--carvao{--surface:var(--coal);--ink:var(--cream);--ink-2:rgba(245,245,242,.72);--line:rgba(255,255,255,.18);--destaque:var(--green)}
.n-surface--grafite{--surface:var(--graphite);--ink:var(--paper);--ink-2:#c6c7c8;--line:rgba(255,255,255,.2);--destaque:var(--green)}
.n-surface--verde{--surface:var(--green);--ink:var(--purple-deep);--ink-2:rgba(29,0,57,.8);--line:rgba(29,0,57,.2);--destaque:var(--purple-deep)}
/* degradê da abertura (apresentação, capas) */
.n-surface--abertura{--surface:radial-gradient(120% 120% at 30% 20%,#2a0a4b 0%,#1d0039 48%,#11001e 100%);--ink:#fff;--ink-2:rgba(255,255,255,.82);--line:rgba(255,255,255,.16);--destaque:var(--green)}

/* ---------- Papéis de texto ----------
   A tabela "papel ↔ classe de origem" está no DESIGN.md. */

/* título: UMA escala, Light 300, caixa baixa; <strong> = palavra-chave em 700 na cor de destaque */
.n-title{font-size:var(--t-titulo);font-weight:300;line-height:1.08;letter-spacing:-.025em}
.n-title strong,.n-display strong,.n-lead strong{font-weight:700;color:var(--destaque);letter-spacing:-.035em}
.n-title--compacto{line-height:1.02;letter-spacing:-.035em}        /* Agência */
.n-title--mesma-cor strong{color:inherit}                          /* hero e "O que fazemos": negrito sem trocar a cor */
/* fechamento grande (contato, chamada final) */
.n-display{font-size:var(--display);font-weight:300;line-height:.98;letter-spacing:-.045em;text-wrap:balance}
.n-display strong{font-weight:500}
/* nome de linha (lista de serviços/mercados): o único título em negrito, menor que o da dobra */
.n-row-name{font-size:clamp(28px,3.4vw,52px);font-weight:700;line-height:1;letter-spacing:-.04em}
@media (max-width:900px){.n-row-name{font-size:clamp(22px,6vw,30px)}}
/* título de bloco (formulário, item de grade, sucesso) */
.n-item-title{font-size:clamp(27px,2.8vw,42px);font-weight:300;line-height:1.1;letter-spacing:-.025em}
.n-card-title{font-size:clamp(21px,2.1vw,29px);font-weight:400;line-height:1.07;letter-spacing:-.025em}
/* palavra do método (Clareza · Conexão · Continuidade): a ÚNICA vez da letra de mão */
.n-script{font-family:var(--font-script);font-size:calc(var(--t-titulo)*.78);font-weight:400;line-height:1;letter-spacing:-.01em}
/* número grande (contador da apresentação): conta de zero até o valor, em negrito na cor de destaque */
.n-big-num{font-size:clamp(64px,8.85vw,170px);font-weight:700;line-height:.9;letter-spacing:-.05em;color:var(--destaque);font-variant-numeric:tabular-nums}
.n-big-num small{font-size:.38em;font-weight:300;letter-spacing:-.02em;margin-left:.08em}

/* textos */
.n-lead{font-size:clamp(17px,1.45vw,24px);font-weight:300;line-height:1.5;letter-spacing:-.005em;text-wrap:pretty}
.n-body{font-size:clamp(14px,1.05vw,17px);font-weight:300;line-height:1.55;letter-spacing:0}
.n-text{font-size:var(--p-size);font-weight:300;line-height:var(--p-leading);letter-spacing:var(--p-tracking);text-wrap:pretty;width:var(--p-width);max-width:100%;color:var(--ink-2)}
.n-text--forte{color:var(--ink)}
.n-text--solto{width:auto}
.n-text--largo{width:min(520px,100%)}      /* abertura de lista, com o texto centralizado no eixo do título */
.n-fine{font-size:10px;font-weight:300;line-height:1.5;letter-spacing:.03em}

/* rótulos em caixa alta */
.n-kicker{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--green)}
.n-surface--claro .n-kicker,.n-surface--claro-neutro .n-kicker,.n-surface--verde .n-kicker{color:var(--destaque)}
.n-label{font-size:10px;font-weight:500;line-height:1.4;letter-spacing:.24em;text-transform:uppercase}
.n-tags{font-size:10.8px;font-weight:600;line-height:1.6;letter-spacing:.14em;text-transform:uppercase}
.n-num{font-size:clamp(18px,2vw,32px);font-weight:300;line-height:1}
.n-nav{font-size:10px;font-weight:300;letter-spacing:.24em;text-transform:uppercase}

/* marca-texto: faixa verde atrás de uma expressão curta. É o jeito de usar verde sobre o claro */
.n-marca-texto{background:var(--green);color:var(--purple-deep);padding:.04em .24em .08em;margin:0 .04em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* tinta verde: a cor escorre por dentro das letras, da esquerda (animada pela rolagem: data-n-ink) */
.n-ink{color:transparent;background-image:linear-gradient(90deg,var(--green) 0 50%,var(--ink) 50% 100%);background-size:200% 100%;background-position:0 0;-webkit-background-clip:text;background-clip:text}

/* ---------- Cabeçalho (topo do site, 08 e 12/10) ----------
   Logo sem ® + assinatura. Para mudar o tamanho do topo inteiro, mude só --logo-h. */
.site-header{--logo-h:31.2px;position:relative;z-index:20;padding-top:clamp(22px,4.6vh,56px)}
.site-header__inner{display:flex;align-items:center;gap:18px}
.brand{display:block;color:var(--purple);line-height:0;flex:none}
.brand__logo{height:var(--logo-h);width:calc(4.0759*var(--logo-h));fill:currentColor}
.brand__tagline{font-size:calc(.4317*var(--logo-h));font-weight:300;line-height:1;letter-spacing:.002em;white-space:nowrap;margin-top:-.111em;margin-left:calc(.40759*var(--logo-h) - 18px)}
@media (max-width:900px){.site-header{padding-top:24px}}
@media (max-width:640px){.site-header{--logo-h:22px}.brand__tagline{display:none}}
/* link de navegação: aspinhas verdes em volta do item no hover */
.nav__link{display:inline-block;position:relative;padding:6px 2px;font-weight:300;font-size:10px;letter-spacing:.24em;text-transform:uppercase}
.nav__link::before,.nav__link::after{
  content:"";position:absolute;top:50%;width:7px;height:5px;margin-top:-3px;
  background:var(--green);
  -webkit-mask:url("../svg/aspas-par.svg") center/contain no-repeat;
  mask:url("../svg/aspas-par.svg") center/contain no-repeat;
  opacity:0;transition:opacity .35s ease,transform .6s cubic-bezier(.2,1.4,.4,1);
}
.nav__link::before{left:-12px;transform:translate(8px,-3px) rotate(180deg) scale(.3)}
.nav__link::after{right:-12px;transform:translate(-8px,3px) scale(.3);transition-delay:.06s}
.nav__link:hover::before,.nav__link:focus-visible::before{opacity:1;transform:translate(0,-3px) rotate(180deg) scale(1)}
.nav__link:hover::after,.nav__link:focus-visible::after{opacity:1;transform:translate(0,3px) scale(1)}

/* ---------- Aspas ----------
   O desenho vem de aspas.js (<path data-aspa="1|2">, viewBox 0 0 138 100).
   Regra: sempre EM CIMA, na altura da 1ª linha, logo depois da última palavra dela.
   O texto leva data-aspas-topo; o <svg> leva data-aspas-regra; NarroAspas.posicionar faz a conta. */
.quote{height:var(--aspa-h);width:calc(1.38*var(--aspa-h));color:var(--green);overflow:visible}
.quote__mark{fill:currentColor;transform-box:fill-box;transform-origin:50% 50%;stroke:currentColor;stroke-width:1.6px;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-opacity:0}
/* bloco "texto + aspas": o texto de 310 px com as aspas pela regra */
.n-aside{position:relative;width:max-content;max-width:100%;padding-right:calc(1.89*var(--aspa-h))}
.n-aside .quote{position:absolute;right:0;top:0;will-change:transform}
@media (max-width:1100px){.n-aside .n-text{width:min(40ch,calc(100vw - 2*var(--inset) - 1.89*var(--aspa-h)))}}
/* qualquer bloco com aspas pela regra: o pai é a referência, as aspas ficam fora do fluxo */
[data-aspas-regra]{position:absolute;top:0;right:0}
.n-frase{position:relative;display:inline-block}

/* ---------- Botões ---------- */
/* pílula roxa que vira verde ("Conheça a agência") */
.n-btn{display:inline-flex;justify-content:center;align-items:center;gap:12px;padding:18px 28px;border-radius:999px;background:var(--purple);color:#fff;font:500 11px/1 var(--font);letter-spacing:.24em;text-transform:uppercase;cursor:pointer;transition:background-color .4s ease,color .4s ease}
.n-btn:hover,.n-btn:focus-visible{background:var(--green);color:var(--purple-deep)}
/* pílula verde de ação principal (enviar do contato): sobe 3 px e vira papel */
.n-btn--verde{min-height:56px;padding:0 32px;background:var(--green);color:#202124;font-weight:700;letter-spacing:.12em;transition:background .45s var(--ease-out),transform .45s var(--ease-out),opacity .3s ease}
.n-btn--verde:hover,.n-btn--verde:focus-visible{background:var(--paper);color:#202124;transform:translateY(-3px)}
.n-btn--verde:disabled{cursor:wait;opacity:.65;transform:none}
/* contorno, para sobre o escuro quando o verde já está em uso */
.n-btn--linha{background:transparent;border:1px solid var(--line);color:var(--ink)}
.n-btn--linha:hover,.n-btn--linha:focus-visible{background:var(--green);border-color:var(--green);color:var(--purple-deep)}
@media (max-width:720px){.n-btn{padding:14px 20px;font-size:10px}.n-btn--verde{padding:0 24px}}

/* "Ver mais": texto sublinhado que nasce da esquerda + bolinha verde com "+" que gira e vira roxa */
.n-more{display:inline-flex;align-items:center;gap:23px;min-height:62px;color:var(--ink);font:500 16px/1 var(--font);letter-spacing:.22em;text-transform:uppercase;white-space:nowrap}
.n-more__label{position:relative;display:block;padding-block:13px;margin-right:-.22em}
.n-more__label::after{content:"";position:absolute;bottom:4px;left:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right center;transition:transform .55s var(--ease-out)}
.n-more__icon{position:relative;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--green);color:var(--purple);transition:background .4s var(--ease-out),color .4s var(--ease-out),transform .4s var(--ease-out)}
.n-more__icon span{position:absolute;width:17px;height:3px;border-radius:2px;background:currentColor}
.n-more__icon span:last-child{transform:rotate(90deg)}
.n-more:is(:hover,:focus-visible) .n-more__label::after{transform:scaleX(1);transform-origin:left center}
.n-more:is(:hover,:focus-visible) .n-more__icon{background:var(--purple);color:#fff;transform:rotate(90deg)}
@media (max-width:720px){.n-more{gap:13px;font-size:13px;letter-spacing:.14em}.n-more__label{margin-right:-.14em}.n-more__icon{width:47px;height:47px}}

/* "Veja a apresentação": play verde pequeno + título em negrito + meta. No hover o play vira roxo e o triângulo branco */
.n-play{display:inline-flex;align-items:center;gap:10px;width:max-content;max-width:100%;color:var(--ink)}
.n-play__btn{flex:none;display:grid;place-items:center;width:30px;aspect-ratio:1;border-radius:50%;background:var(--green);transition:transform .6s var(--ease-out),background-color .45s var(--ease-out)}
.n-play__btn svg{width:36%;height:36%;margin-left:8%;fill:var(--purple-deep);transition:fill .45s var(--ease-out)}
.n-play__txt{display:flex;flex-direction:column;gap:3px}
.n-play__label{font-size:12px;font-weight:700;letter-spacing:-.005em;line-height:1.1}
.n-play__meta{font-size:8.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;opacity:.62}
.n-play:is(:hover,:focus-visible,:active) .n-play__btn{transform:scale(1.08);background:var(--purple)}
.n-play:is(:hover,:focus-visible,:active) .n-play__btn svg{fill:#fff}
.n-surface--roxo .n-play:is(:hover,:focus-visible) .n-play__btn,.n-surface--roxo-escuro .n-play:is(:hover,:focus-visible) .n-play__btn{background:#fff}
.n-surface--roxo .n-play:is(:hover,:focus-visible) .n-play__btn svg,.n-surface--roxo-escuro .n-play:is(:hover,:focus-visible) .n-play__btn svg{fill:var(--purple)}

/* WhatsApp (igual ao site): pílula verde que pulsa; no ícone, o telefone balança ("tocando") e depois
   os três pontinhos digitam dentro do balão, em laço de 4 s. Marcação: ver NARRO_WA no LEIA-ME. */
.n-wa{position:relative;display:inline-flex;align-items:center;gap:14px;width:max-content;padding:8px 20px 8px 8px;border-radius:999px;background:var(--green);color:var(--purple-deep);font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;transition:transform .6s var(--ease-out),background-color .4s ease;box-shadow:0 0 0 0 rgba(101,214,0,.45);animation:n-wa-glow 2.8s var(--ease-out) infinite}
.n-wa:hover,.n-wa:focus-visible{background:var(--wa-hover);transform:translateY(-2px)}
.n-wa__icon{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--purple-deep)}
.n-wa__icon svg{width:24px;height:24px;overflow:visible}
.n-wa__bubble{fill:none;stroke:var(--green);stroke-width:1.8;stroke-linejoin:round}
.n-wa__phone{fill:var(--green);transform-origin:16px 15.5px;animation:n-wa-phone 4s ease-in-out infinite}
.n-wa__dots circle{fill:var(--green);opacity:0;transform-box:fill-box;transform-origin:center;animation:n-wa-dot 4s ease-in-out infinite}
.n-wa__dots circle:nth-child(2){animation-delay:.15s}.n-wa__dots circle:nth-child(3){animation-delay:.3s}
.n-wa__arrow{display:grid;place-items:center;width:16px;height:16px}
.n-wa__arrow svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .6s var(--ease-out)}
.n-wa:hover .n-wa__arrow svg{transform:translateX(5px)}
@keyframes n-wa-glow{0%{box-shadow:0 0 0 0 rgba(101,214,0,.45)}70%,100%{box-shadow:0 0 0 14px rgba(101,214,0,0)}}
@keyframes n-wa-phone{0%,4%{opacity:1;transform:rotate(0)}6%{transform:rotate(-12deg)}8%{transform:rotate(10deg)}10%{transform:rotate(-8deg)}12%{transform:rotate(6deg)}14%,44%{opacity:1;transform:rotate(0)}48%,92%{opacity:0;transform:scale(.6)}96%,100%{opacity:1;transform:scale(1)}}
@keyframes n-wa-dot{0%,48%{opacity:0;transform:translateY(0)}52%{opacity:1;transform:translateY(0)}58%{transform:translateY(-2.2px)}64%{transform:translateY(0)}70%{transform:translateY(-2.2px)}76%{transform:translateY(0)}82%{transform:translateY(-2.2px)}88%{opacity:1;transform:translateY(0)}92%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.n-wa,.n-wa__phone,.n-wa__dots circle{animation:none}.n-wa__dots{display:none}}

/* botão redondo (setas do palco): disco de vidro roxo-escuro; no mouse vira verde */
.n-round{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.34);background:rgba(29,0,57,.66);-webkit-backdrop-filter:blur(12px) saturate(1.1);backdrop-filter:blur(12px) saturate(1.1);color:#fff;transition:background-color .4s ease,border-color .4s ease,color .4s ease}
.n-round svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.n-round:not(:disabled):is(:hover,:focus-visible){background:var(--green);border-color:var(--green);color:var(--purple-deep)}
.n-round:disabled{opacity:.35;cursor:default}

/* "Voltar ao topo": órbita com bolinha verde que gira meia volta */
.n-top{display:inline-flex;align-items:center;gap:12px;color:var(--ink-2);font-size:10px;font-weight:500;letter-spacing:.12em;line-height:1.5;text-transform:uppercase;white-space:nowrap;transition:color .35s ease}
.n-top__orbit{position:relative;display:block;width:30px;height:30px;border:1px solid rgba(101,214,0,.75);border-radius:50%;transition:transform .6s var(--ease-out),background .4s ease}
.n-top__orbit::after{content:"";position:absolute;top:3px;left:calc(50% - 2.5px);width:5px;height:5px;border-radius:50%;background:var(--green)}
.n-top:is(:hover,:focus-visible){color:var(--green)}
.n-top:is(:hover,:focus-visible) .n-top__orbit{transform:rotate(180deg);background:rgba(101,214,0,.09)}

/* ---------- Menu ----------
   Hambúrguer que de tempos em tempos vira a palavra "menu" escrita à mão;
   o painel abre num círculo roxo-escuro (NarroMotion.menu). */
.n-burger{position:relative;display:inline-flex;align-items:center;justify-content:flex-end;flex:none;width:86px;height:44px;color:var(--ink)}
.n-burger__lines{position:absolute;right:0;top:50%;translate:0 -50%;width:34px;height:16px}
.n-burger__lines i{position:absolute;left:0;right:0;height:2px;background:currentColor;border-radius:2px;transform-origin:right center;animation:n-line-to-word 6s ease-in-out infinite}
.n-burger__lines i:first-child{top:0}
.n-burger__lines i:last-child{bottom:0;width:70%;animation-delay:.06s}
.n-burger__word{position:absolute;right:0;top:50%;translate:0 -50%;width:50px;height:auto;overflow:visible;pointer-events:none}
.n-burger__word path{fill:currentColor;fill-opacity:0;stroke:currentColor;stroke-width:16;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;animation:n-word-write 6s ease-in-out infinite}
.n-burger__word path:nth-child(2){animation-delay:.055s}.n-burger__word path:nth-child(3){animation-delay:.11s}.n-burger__word path:nth-child(4){animation-delay:.165s}
@keyframes n-line-to-word{0%,41%,100%{opacity:1;transform:translateX(0) scaleX(1)}52%{opacity:.7;transform:translateX(-12px) scaleX(1.65)}61%,88%{opacity:0;transform:translateX(-38px) scaleX(.18)}96%{opacity:1;transform:translateX(0) scaleX(1)}}
@keyframes n-word-write{0%,44%,100%{opacity:0;stroke-dashoffset:1;fill-opacity:0}53%{opacity:1;stroke-dashoffset:1;fill-opacity:0}66%{stroke-dashoffset:0;fill-opacity:0}74%,83%{opacity:1;stroke-dashoffset:0;fill-opacity:1}94%{opacity:0;stroke-dashoffset:1;fill-opacity:0}}
@media (max-width:720px){.n-burger{width:64px}.n-burger__word{width:38px}}

.n-menu{--logo-h:31.2px;position:fixed;inset:0;z-index:60;isolation:isolate;color:#fff;display:grid;grid-template-rows:auto 1fr;padding:clamp(22px,4.6vh,56px) var(--inset) clamp(28px,5vh,44px);visibility:hidden;overflow:hidden}
.n-menu__backdrop{position:absolute;inset:0;z-index:-1;background:var(--purple-deep);clip-path:circle(0px at 50% 50%)}
.n-menu__top{display:flex;align-items:center;justify-content:space-between;min-height:44px}
.n-menu__top .brand{color:#fff}
.n-menu__close{position:relative;display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;background:var(--green);color:var(--purple-deep);animation:n-close-breathe 3.6s ease-in-out infinite;transition:transform .55s var(--ease-out),background-color .4s ease,color .4s ease}
.n-menu__close i{position:absolute;width:18px;height:2px;border-radius:2px;background:currentColor;transform:rotate(45deg)}
.n-menu__close i+i{transform:rotate(-45deg)}
.n-menu__close:is(:hover,:focus-visible){transform:rotate(90deg) scale(1.08);background:#fff;color:var(--purple);animation-play-state:paused}
@keyframes n-close-breathe{0%,100%{box-shadow:0 0 0 0 rgba(101,214,0,.16)}50%{box-shadow:0 0 0 5px rgba(101,214,0,.1)}}
.n-menu__list{display:grid;align-content:center;justify-items:center;gap:clamp(8px,2vh,20px)}
.n-menu__link{position:relative;display:inline-block;font-weight:300;font-size:clamp(38px,5.2vw,83px);line-height:1.04;letter-spacing:-.035em;transition:color .3s ease}
.n-menu__link:is(:hover,:focus-visible){color:var(--green)}
@media (max-width:720px){.n-menu__link{font-size:clamp(32px,8.4vw,53px)}.n-menu__list{justify-items:start;gap:clamp(14px,2.6vh,24px)}}
html.n-menu-open{overflow:hidden}

/* ---------- Listas de fora a fora ----------
   Sem caixa, sem cartão: cada linha é separada por um fio de 1 px e carrega informação.
   Linha de serviço/mercado (site, 12/10): número, nome grande em negrito, palavras-chave à direita. */
.n-rows{border-bottom:1px solid var(--line)}
.n-row{--fio:1;position:relative;display:grid;grid-template-columns:clamp(48px,5.6vw,104px) minmax(0,1fr) auto;align-items:center;column-gap:clamp(10px,1.4vw,24px);padding:clamp(17px,1.8vw,31px) 0}
.n-row::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);transform-origin:left;transform:scaleX(var(--fio))}
.n-row .n-num,.n-row .n-row-name,.n-row .n-tags{transition:color .6s cubic-bezier(.16,.7,.2,1)}
.n-row .n-tags{display:flex;flex-direction:column;align-items:flex-end;text-align:right;color:var(--ink-2)}
.n-rows:hover .n-row:not(:hover) :is(.n-num,.n-row-name){color:color-mix(in srgb,var(--ink) 26%,transparent)}
.n-rows:hover .n-row:not(:hover) .n-tags{color:color-mix(in srgb,var(--ink) 30%,transparent)}
.n-row:hover .n-num{color:var(--destaque)}
@media (max-width:900px){
  .n-row{grid-template-columns:clamp(30px,8vw,44px) minmax(0,1fr);row-gap:8px}
  .n-row .n-tags{grid-column:2;flex-direction:row;flex-wrap:wrap;align-items:flex-start;text-align:left;gap:3px 14px;font-size:10.2px}
}
/* lista simples de fios (dados, condições, fatos de contato) */
.n-facts>li{display:grid;grid-template-columns:145px minmax(0,1fr);column-gap:16px;align-items:center;min-height:72px;padding-block:20px;border-top:1px solid var(--line)}
.n-facts>li:last-child{border-bottom:1px solid var(--line)}
.n-facts>li>span:first-child{color:var(--ink-2);font-size:10px;font-weight:500;letter-spacing:.17em;text-transform:uppercase}
.n-facts>li>span:last-child{font-size:14px;font-weight:300;line-height:1.5;letter-spacing:0}
@media (max-width:600px){.n-facts>li{grid-template-columns:1fr;row-gap:10px;min-height:0}}

/* ---------- Grade de cases (fora a fora, sem espaço) ----------
   Foto em 16:9, em cinza. A cor se revela de dentro para fora, numa forma orgânica (NarroMotion.cases).
   COM MOUSE: uma aspa verde grande sobe do lado direito, se desenha e preenche; dentro da barriga entram
   o cliente, o segmento e o "Ver mais" com a bolinha do +. Ao sair, a mesma sequência ao contrário.
   NO TOQUE: a cor acende quando o card aparece, e uma faixa roxo-escuro com o nome fica no rodapé.
   Marcação: <a class="n-case" data-client="Cliente" data-category="Segmento"><img …></a> */
.n-cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
@media (max-width:900px){.n-cases{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.n-cases{grid-template-columns:1fr}}
.n-case{display:block;position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--purple-deep);color:#fff;text-align:left}
.n-case img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.n-case .n-case__color{filter:none;clip-path:circle(0% at 50% 50%);pointer-events:none}
.n-case__shade,.n-case__name{z-index:2}
.n-case__shade{position:absolute;left:0;right:0;bottom:0;height:42px;background:var(--purple-deep);transform:translateY(101%);transition:transform .4s var(--ease-out)}
.n-case__name{position:absolute;left:16px;bottom:14px;font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;opacity:0;transform:translateY(14px);transition:opacity .35s ease,transform .6s var(--ease-out)}
.n-case:is(:hover,:focus-visible) .n-case__shade{transform:translateY(0)}
.n-case:is(:hover,:focus-visible) .n-case__name{opacity:1;transform:translateY(0);transition-delay:.07s}
/* toque: a faixa com o nome fica sempre à vista */
@media (hover:none),(pointer:coarse){
  .n-case__shade{height:32px;transform:none;background:rgba(29,0,57,.85)}
  .n-case__name{opacity:1;transform:none;left:12px;bottom:10px;font-size:9px;letter-spacing:.1em}
}
/* mouse: a aspa com o texto dentro (criada pelo JS) no lugar da faixa */
.n-case__mark{display:none}
@media (hover:hover) and (pointer:fine){
  .n-case{container-type:size}
  .n-case.has-mark .n-case__shade,.n-case.has-mark .n-case__name{display:none}
  .n-case__mark{--mark-h:122cqh;display:block;position:absolute;z-index:3;height:var(--mark-h);width:calc(var(--mark-h)*.61);left:calc(74% - var(--mark-h)*.347);top:calc(46% - var(--mark-h)*.246);pointer-events:none;visibility:hidden}
  .n-case__mark>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  .n-case__mark>svg path{fill:var(--green);stroke:var(--green);stroke-width:1.6px;vector-effect:non-scaling-stroke;stroke-linejoin:round}
  /* texto no centro da barriga da aspa (49% de cima, de 13,8% da largura até a borda direita) */
  .n-case__mark-text{position:absolute;left:13.8%;right:0;top:0;height:49.2%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:0 13%;text-align:center;color:var(--purple-deep)}
  .n-case__mark-name{display:block;font-size:clamp(15px,1.4vw,22px);font-weight:500;line-height:1.05;letter-spacing:-.02em}
  .n-case__mark-seg{display:block;font-size:8px;font-weight:500;letter-spacing:.18em;line-height:1.45;text-transform:uppercase;opacity:.82}
  .n-case__mark-more{display:inline-flex;align-items:center;gap:9px;margin-top:9px}
  .n-case__mark-plus{flex:none;width:clamp(20px,1.6vw,26px);height:clamp(20px,1.6vw,26px);overflow:visible}
  .n-case__mark-plus :is(circle,path){fill:none;stroke:var(--purple-deep);stroke-width:1.3px;vector-effect:non-scaling-stroke;stroke-linecap:round}
  .n-case__mark-more-label{font-size:8px;font-weight:600;letter-spacing:.2em;line-height:1;text-transform:uppercase}
}

/* ---------- Parede de logos ----------
   7 por linha no computador (14 trilhos, cada logo em 2), 3 no celular; altura de linha fixa, para a parede não pular quando os logos trocam. */
.n-logos{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:44px;row-gap:clamp(28px,4.5vh,40px);column-gap:14px;justify-items:center;align-items:center}
.n-logos li{width:100%;height:100%;min-width:0}
.n-logos img{width:100%;height:100%;object-fit:contain;transform:scale(.78)}
@media (min-width:901px){
  .n-logos{--logo-k:.9;grid-template-columns:repeat(14,minmax(0,1fr));grid-auto-rows:calc(36px*var(--logo-k));row-gap:clamp(34px,4vw,64px);column-gap:clamp(12px,1.6vw,28px);padding-inline:clamp(0px,3vw,64px)}
  .n-logos li{grid-column:span 2}
  .n-logos img{transform:none;transition:transform .6s var(--ease-out)}
  .n-logos img:hover{transform:translateY(-3px) scale(1.07)}
}
@media (min-width:1280px){.n-logos{--logo-k:1.05}}
@media (min-width:1800px){.n-logos{--logo-k:1.2}}

/* ---------- Formulário ----------
   Caixa com raio de 20 px (a única caixa arredondada da marca), campos só com a linha de baixo,
   rótulo que fica verde com o foco, seta verde no select. */
.n-form{padding:clamp(24px,3.3vw,48px);border:1px solid rgba(255,255,255,.18);border-radius:20px;background:rgba(255,255,255,.035)}
.n-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:29px 22px}
.n-field{position:relative;display:block;min-width:0;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.26);transition:border-color .35s ease}
.n-field--full{grid-column:1/-1}
.n-field>span{display:block;margin-bottom:13px;color:#aaaeb0;font-size:10px;font-weight:500;letter-spacing:.17em;text-transform:uppercase;transition:color .35s ease}
.n-field i{color:var(--green);font-style:normal}
.n-field:focus-within{border-color:var(--green)}
.n-field:focus-within>span{color:var(--green)}
.n-field :is(input,select,textarea){display:block;width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--paper);font:300 15px/1.45 var(--font);letter-spacing:0}
.n-field :is(input,textarea)::placeholder,.n-field select:invalid{color:#8e9293;opacity:1}
.n-field select{appearance:none;cursor:pointer;padding-right:22px}
.n-field select option{background:#27282b;color:var(--paper)}
.n-field:has(select)::after{content:"⌄";position:absolute;right:2px;bottom:12px;pointer-events:none;color:var(--green);font-size:20px;line-height:1}
.n-field textarea{min-height:88px;resize:vertical}
.n-form__note{margin-top:25px;color:#aeb1b1;font-size:11px;font-weight:300;line-height:1.6;letter-spacing:.01em}
.n-form__note a{color:#e7ece5;text-decoration:underline;text-decoration-color:var(--green);text-underline-offset:4px}
.n-form__actions{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:35px}
@media (max-width:600px){.n-form{padding:26px 20px}.n-fields{grid-template-columns:1fr;gap:25px}.n-form__actions{align-items:stretch}}

/* ---------- Foto ----------
   FILTRO NARRO (identidade, 07/10): mapa de cor #140027 → #F4DCE6 sobre a foto em cinza, a 55% por cima da original.
   Uso: <figure class="n-foto"><img src="x.webp" alt="…"></figure>. NarroFoto (narro-motion.js) cria a cópia com o filtro. */
.n-foto{position:relative;overflow:hidden;margin:0;background:var(--purple-deep)}
.n-foto>img{display:block;width:100%;height:100%;object-fit:cover}
.n-foto__tom{position:absolute;inset:0;opacity:.55;filter:url(#filtro-narro);pointer-events:none}
.n-foto--forte .n-foto__tom{opacity:.75}       /* versão "mais roxa", só quando pedida */
/* foto que espera o hover para ganhar cor (grade de cases, hero de Serviços) */
.n-foto--cinza>img{filter:grayscale(1) contrast(1.08);transition:filter .8s var(--ease-out)}
.n-foto--cinza:hover>img{filter:none}

/* FOTO NA ASPA (capa da apresentação): a foto recortada pela aspa gigante + contorno verde deslocado.
   O SVG ocupa a caixa que o contém; xMaxYMid mantém a aspa à direita quando a caixa fica estreita. */
.n-aspa-foto{display:block;width:100%;height:100%;overflow:hidden}
.n-aspa-foto__img{transform-box:view-box}
.n-aspa-foto__contorno{fill:none;stroke:var(--green);stroke-width:1.6;vector-effect:non-scaling-stroke}

/* ---------- Espera elegante ----------
   Só aparece se a espera passar de ~0,15 s; as aspas se desenham e se desfazem em laço.
   Nunca escrever "carregando". */
.n-wait{display:grid;place-items:center;pointer-events:none}
.n-wait svg{width:clamp(46px,4vw,64px);height:auto;overflow:visible}
.n-wait path{fill:none;stroke:var(--green);stroke-width:2px;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}

/* ---------- "Role para descobrir" ----------
   Onda nas letras → traço se desenha → bolinha verde pisca → traço se recolhe (laço de 3,6 s). */
.n-cue{display:inline-flex;flex-direction:column;align-items:center;gap:14px;font-size:12px;font-weight:400;letter-spacing:.26em;text-transform:uppercase;white-space:nowrap}
.n-cue__text .ch{display:inline-block;animation:n-cue-letter 3.6s cubic-bezier(.16,.7,.2,1) infinite;animation-delay:calc(var(--i)*38ms)}
.n-cue__mark{position:relative;display:block;width:14px;height:31px}
.n-cue__line{position:absolute;left:50%;top:0;width:1px;height:20px;margin-left:-.5px;background:currentColor;opacity:.6;transform:scaleY(0);transform-origin:top;animation:n-cue-line 3.6s cubic-bezier(.65,0,.35,1) infinite}
.n-cue__dot{position:absolute;left:50%;top:24px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--green);opacity:0;animation:n-cue-dot 3.6s ease-in-out infinite}
@keyframes n-cue-letter{0%{transform:translateY(0);color:inherit}7%{transform:translateY(-3px);color:var(--green)}16%,100%{transform:translateY(0);color:inherit}}
@keyframes n-cue-line{0%,24%{transform:scaleY(0);transform-origin:top}44%,78%{transform:scaleY(1);transform-origin:top}79%{transform:scaleY(1);transform-origin:bottom}94%,100%{transform:scaleY(0);transform-origin:bottom}}
@keyframes n-cue-dot{0%,42%{opacity:0;transform:scale(.3)}48%{opacity:1;transform:scale(1);box-shadow:0 0 12px 2px rgba(101,214,0,.55)}56%{opacity:.25;box-shadow:none}64%{opacity:1;box-shadow:0 0 12px 2px rgba(101,214,0,.55)}72%{opacity:.25}80%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(.3)}}

/* ---------- Rodapé ---------- */
.n-footer{display:flex;justify-content:space-between;align-items:end;gap:28px;padding-top:30px;border-top:1px solid var(--line)}
.n-footer__logo{width:clamp(94px,8vw,130px);height:auto;fill:currentColor}
.n-footer__legal{display:flex;flex-direction:column;align-items:center;gap:9px;color:var(--ink-2);font-size:10px;font-weight:300;letter-spacing:.03em;line-height:1.5;text-align:center}
.n-footer__legal a{text-decoration:underline;text-decoration-color:rgba(101,214,0,.6);text-underline-offset:4px;transition:color .3s ease}
.n-footer__legal a:is(:hover,:focus-visible){color:var(--green)}
@media (max-width:600px){.n-footer{flex-direction:column;align-items:center;text-align:center}}

/* ---------- Filete ---------- */
.n-rule{display:block;height:1px;background:var(--line);transform-origin:0 50%}

/* ---------- O que o movimento precisa ---------- */
.line{display:block}
/* antes de o kit assumir: quem vai entrar animado fica invisível só se houver JS, e por no máximo 2,2 s */
html.n-motion [data-n-reveal]{visibility:hidden}
/* troca de texto em cascata */
.swap{display:inline-grid;vertical-align:top;position:relative}
.swap-line{grid-area:1/1;white-space:nowrap}
.swap-line--out{position:absolute;top:0;left:0}
.swap-ch{display:inline-block;will-change:transform,opacity}
.swap-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* transição das aspas: cobre a tela com o roxo-escuro */
.quote-transition{position:fixed;inset:0;width:100%;height:100%;max-width:none;z-index:74;pointer-events:none;overflow:hidden;fill:var(--purple-deep)}
html.from-quote body::after{content:"";position:fixed;inset:0;z-index:74;background:var(--purple-deep);pointer-events:none;transition:opacity .22s ease-out}
html.from-quote.from-quote--out body::after{opacity:0}
/* cortina reta (fechar um palco no celular, trocar um painel): sobe e desce, roxo-escuro */
.n-wipe{position:fixed;inset:0;z-index:95;background:var(--purple-deep);pointer-events:none;will-change:transform}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .n-burger__word path{opacity:0}
}