/* =========================================================
   Conceito - site v1
   Fonte: Space Grotesk (substituta livre).
   Para trocar por Power Grotesk depois da compra da licença,
   basta trocar os 3 @font-face abaixo. Nada mais muda.
   ========================================================= */

/* Anthem Grotesk, licenciada via Envato Elements em 2026-09-01.
   Arquivo variável: um download cobre os pesos 100 a 900 em 39 KB,
   contra 69 KB dos três estáticos separados. */
@font-face{
  font-family:"Conceito Grotesk";
  src:url("../fonts/AnthemGrotesk-VF.woff2") format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}

/* Serifa de apoio: Instrument Serif, só no itálico.
   REGRA DA CASA: ela só entra a partir de 2rem e sempre em itálico.
   Em corpo pequeno e na versão reta ela não funciona ao lado do grotesk. */
@font-face{
  font-family:"Conceito Serif";
  src:url("../fonts/InstrumentSerif-Italic.woff2") format("woff2");
  font-weight:400; font-style:italic; font-display:swap;
}

/* ---------- tokens ---------- */
:root{
  --creme:#FAF2E7;
  --ink:#130513;
  --azul:#1236FE;
  --azul-esc:#001442;
  --roxo:#A700FF;
  --lilas:#C4CBFF;
  --cinza:#AFAFAF;
  --fundo:#00081F;      /* mesmo fundo da apresentacao Outubro Rosa */
  --borda:rgba(196,203,255,.16);

  --bg:var(--creme);
  --fg:var(--ink);

  --pad:clamp(1.25rem, 5vw, 5rem);
  --maxw:1440px;

  /* Escala maior e mais fluida: acompanha o dispositivo em vez de
     travar num tamanho só. O corpo saiu de 16px para ~18px no desktop. */
  --f-display:clamp(3rem, 11.5vw, 11rem);
  --f-h2:clamp(2.15rem, 5.8vw, 4.75rem);
  --f-h3:clamp(1.5rem, 2.4vw, 2.15rem);
  --f-body:clamp(1.06rem, .62rem + .58vw, 1.2rem);
  --f-lead:clamp(1.18rem, .78rem + .78vw, 1.6rem);
  --f-label:clamp(.74rem, .9vw, .85rem);

  --serif:"Conceito Serif",Georgia,"Times New Roman",serif;

  --ease:cubic-bezier(.16,1,.3,1);
  --dur:.9s;
}

*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  /* No toque, arrastar um trilho horizontal até o fim encadeia o gesto para
     a página e o navegador mostra a faixa de repique. Como o html não tinha
     fundo pintado, essa faixa saía branca. As duas linhas abaixo matam o
     encadeamento e, se ainda assim aparecer, ela não é branca. */
  overscroll-behavior-x:none;
  background:var(--bg);
}
html:focus-within{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:"Conceito Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:var(--f-body);
  line-height:1.6;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* height:auto e obrigatorio: sem ele o atributo height do HTML conta como
   altura especificada, o aspect-ratio nao entra em acao e o object-fit passa
   a recortar a imagem. Foi o que deformava a foto da secao Quem faz. */
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,figure,blockquote,ul{margin:0}
ul{padding:0;list-style:none}

::selection{background:var(--azul);color:var(--creme)}

.visually-hidden{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
.skip{
  position:fixed;top:-100px;left:1rem;z-index:200;
  background:var(--ink);color:var(--creme);padding:.75rem 1.25rem;border-radius:999px;
}
.skip:focus{top:1rem}

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

/* ---------- grão de superfície ---------- */
.grain{
  position:fixed;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:90;opacity:.32;mix-blend-mode:multiply;
}

/* ---------- barra de progresso ---------- */
.progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:120;
  background:transparent;pointer-events:none;
}
.progress__bar{
  display:block;height:100%;width:0%;
  background:var(--azul);
  will-change:width;
}

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:110;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:1.15rem var(--pad);
  transition:transform .5s var(--ease),background .4s,backdrop-filter .4s,color .35s;
  will-change:transform;
}
.nav.is-stuck{
  background:color-mix(in srgb,var(--creme) 82%,transparent);
  backdrop-filter:blur(14px);
}
.nav.is-hidden{transform:translateY(-110%)}

/* Sobre seção escura a nav inverte, senão o logo e os links somem. */
.nav--claro{color:var(--creme)}
.nav--claro.is-stuck{background:color-mix(in srgb,var(--ink) 72%,transparent)}
.nav--claro .logo__mark .cls-2{fill:var(--creme)}
.nav--claro .logo__mark .cls-1{fill:var(--lilas)}
.nav--claro .nav__toggle span{background:var(--creme)}
.nav--claro .nav__cta{background:var(--creme);color:var(--ink)}
.nav--claro .nav__cta:hover{background:var(--azul);color:var(--creme)}

.nav__logo svg{width:clamp(108px,11vw,150px);height:auto}
.logo__mark .cls-1{fill:var(--azul)}
.logo__mark .cls-2{fill:var(--ink)}

.nav__links{display:flex;align-items:center;gap:clamp(1rem,2vw,2.2rem)}
.nav__links a{
  font-size:var(--f-label);font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
  position:relative;padding:.35rem 0;
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease);
}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav__cta{
  background:var(--ink);color:var(--creme);
  padding:.6rem 1.15rem !important;border-radius:999px;
}
.nav__cta::after{display:none}
.nav__cta:hover{background:var(--azul)}

.nav__toggle{
  display:none;background:none;border:0;cursor:pointer;
  width:44px;height:44px;padding:10px;
}
.nav__toggle span{display:block;height:2px;background:var(--ink);margin:5px 0;transition:transform .4s var(--ease),opacity .3s}
.nav__toggle[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* O menu virou lista numerada, na mesma linguagem dos rótulos das seções
   ("01 / MÉTODO"). Antes eram seis frases grandes empilhadas sem hierarquia,
   e no corpo que elas têm no celular isso vira um bloco de texto. O número e
   o filete dão o ritmo de lista, e o último item sai da lista e vira botão,
   porque é ação e não navegação. */
.mobilemenu{
  position:fixed;inset:0;z-index:105;
  background:var(--ink);color:var(--creme);
  display:flex;flex-direction:column;justify-content:center;
  gap:0;padding:var(--pad);
  counter-reset:menu;
}
/* o atributo hidden precisa vencer o display:flex acima */
.mobilemenu[hidden]{display:none}

.mobilemenu a{
  opacity:0;transform:translateY(24px);
  animation:menuIn .55s var(--ease) forwards;
}
.mobilemenu a:not(:last-child){
  counter-increment:menu;
  display:flex;align-items:baseline;gap:1rem;
  font-size:clamp(1.75rem,7.6vw,2.5rem);font-weight:700;line-height:1.1;
  letter-spacing:-.03em;
  padding-block:clamp(.85rem,3vw,1.15rem);
  border-bottom:1px solid color-mix(in srgb,var(--creme) 14%,transparent);
}
.mobilemenu a:not(:last-child)::before{
  content:counter(menu,decimal-leading-zero);
  font-size:.72rem;font-weight:500;letter-spacing:.14em;
  color:var(--lilas);opacity:.75;
  font-variant-numeric:tabular-nums;
}
.mobilemenu a:first-child{border-top:1px solid color-mix(in srgb,var(--creme) 14%,transparent)}

/* a chamada é ação, não navegação: sai da lista e vira botão */
.mobilemenu a:last-child{
  margin-top:clamp(1.5rem,5vw,2.25rem);
  align-self:flex-start;
  background:var(--creme);color:var(--ink);
  font-size:1rem;font-weight:500;letter-spacing:-.01em;
  padding:.95rem 1.6rem;border-radius:999px;
}

/* o escalonamento vai até oito: preso em quatro, como estava, os itens
   que sobravam apareciam de uma vez */
.mobilemenu a:nth-child(1){animation-delay:.04s}
.mobilemenu a:nth-child(2){animation-delay:.09s}
.mobilemenu a:nth-child(3){animation-delay:.14s}
.mobilemenu a:nth-child(4){animation-delay:.19s}
.mobilemenu a:nth-child(5){animation-delay:.24s}
.mobilemenu a:nth-child(6){animation-delay:.29s}
.mobilemenu a:nth-child(7){animation-delay:.34s}
.mobilemenu a:nth-child(8){animation-delay:.39s}
@keyframes menuIn{to{opacity:1;transform:none}}
/* sem motor de animação o menu não pode sumir: o estado de partida é opacidade
   zero, então precisa de rede */
.no-raf .mobilemenu a{opacity:1;transform:none;animation:none}

@media (max-width:860px){
  .nav__links{display:none}
  .nav__toggle{display:block}
}

/* =========================================================
   AMBIENTE: malha + brilhos.
   Mesma linguagem da apresentação Outubro Rosa da Dioclécio:
   fundo profundo, grade sutil mascarada e campos de luz.
   ========================================================= */
.ambiente{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.malha{
  position:absolute;inset:0;opacity:.35;
  background-image:
    linear-gradient(var(--borda) 1px,transparent 1px),
    linear-gradient(90deg,var(--borda) 1px,transparent 1px);
  background-size:82px 82px;
  -webkit-mask-image:radial-gradient(at 50% 40%,#000 20%,transparent 78%);
  mask-image:radial-gradient(at 50% 40%,#000 20%,transparent 78%);
}
.brilho{position:absolute;border-radius:50%;filter:blur(70px)}
.brilho--a{
  width:min(70vw,900px);aspect-ratio:1;right:-14vw;top:-24vh;
  background:radial-gradient(circle at 42% 42%,
    color-mix(in srgb,var(--azul) 70%,transparent),
    color-mix(in srgb,var(--roxo) 34%,transparent) 46%,transparent 70%);
  animation:respira 20s ease-in-out infinite alternate;
}
.brilho--b{
  width:min(46vw,560px);aspect-ratio:1;left:-12vw;bottom:-22vh;
  background:radial-gradient(circle at 50% 50%,
    color-mix(in srgb,var(--azul) 44%,transparent),transparent 68%);
  animation:respira 26s ease-in-out infinite alternate-reverse;
}
.brilho--c{
  width:min(60vw,760px);aspect-ratio:1;right:-16vw;top:8vh;
  background:radial-gradient(circle at 45% 45%,
    color-mix(in srgb,var(--azul) 50%,transparent),
    color-mix(in srgb,var(--roxo) 26%,transparent) 52%,transparent 72%);
  animation:respira 24s ease-in-out infinite alternate;
}
.brilho--d{
  width:min(62vw,780px);aspect-ratio:1;left:-14vw;top:-18vh;
  background:radial-gradient(circle at 50% 45%,
    color-mix(in srgb,var(--azul) 46%,transparent),transparent 70%);
  animation:respira 22s ease-in-out infinite alternate;
}
@keyframes respira{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(-4%,4%,0) scale(1.14)}
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;min-height:100svh;isolation:isolate;
  display:flex;align-items:center;
  padding:clamp(6rem,11vh,8.5rem) var(--pad) clamp(2.5rem,5vh,4rem);
  overflow:hidden;
  background:var(--fundo);color:var(--creme);
}
.hero__inner{
  position:relative;z-index:1;width:100%;
  max-width:var(--maxw);margin-inline:auto;
  display:grid;gap:clamp(2.5rem,5vw,4.5rem);
  grid-template-columns:1fr;align-items:center;
}
@media (min-width:1000px){
  .hero__inner{grid-template-columns:1.15fr .85fr}
}

.hero__eyebrow{
  display:inline-flex;align-items:center;gap:.65rem;
  font-size:var(--f-label);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--lilas);
  border:1px solid var(--borda);border-radius:999px;
  padding:.5rem 1rem .5rem .7rem;
  background:rgba(255,255,255,.03);
  margin-bottom:clamp(1.5rem,4vw,2.25rem);
}
.dot{
  width:8px;height:8px;border-radius:50%;background:var(--azul);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--azul) 22%,transparent);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.72)}}
/* em tela estreita a frase da area quebrava em duas linhas dentro da pilula */
@media (max-width:620px){
  /* Em três linhas o rótulo brigava com o alinhamento do ponto e ficava torto.
     Corpo e espaçamento menores cabem numa linha só, e aí o ponto volta a
     centralizar sozinho. */
  .hero__eyebrow{
    font-size:.6rem;letter-spacing:.05em;
    padding:.5rem .8rem .5rem .6rem;
    gap:.5rem;line-height:1.4;
    white-space:nowrap;
  }
  .hero__eyebrow .dot{flex:0 0 auto}
}

.hero__title{
  font-size:clamp(2.75rem,7.2vw,6.25rem);
  /* entrelinha um pouco maior desde que a mascara deixou de cortar
     as descidas: agora o "q" ocupa o espaco que antes era aparado */
  font-weight:700;line-height:1.04;letter-spacing:-.045em;
  text-wrap:balance;color:var(--creme);
}
/* O destaque da headline usa a serifa em 700, no mesmo peso visual
   do grotesk ao lado. Regra da casa: serifa só a partir de 1.5rem. */
.hero__title em,
.portfolio__titulo em,
.word--destaque{
  /* O degradê é pintado com background-clip:text, que só cobre a CAIXA do
     elemento. O acento e a descida do itálico ficam fora dela e saíam
     transparentes, o que parecia corte. O padding aumenta a área pintada;
     na vertical ele não mexe no layout de elemento em linha, e na
     horizontal a margem negativa devolve a largura. */
  padding:.34em .12em .3em;margin:-.34em -.12em -.3em;
  font-family:var(--serif);font-weight:400;font-style:italic;
  /* 1,18 casa a ALTURA DE X, que é o que o olho compara quando as duas
     fontes têm minúsculas lado a lado. As caixas de linha já são iguais
     (ver [data-split] .word), então esse corpo maior não desalinha nada. */
  font-size:1.18em;line-height:inherit;
  /* A serifa é 1,18x maior que o grotesk ao lado e assenta mais baixo na
     mesma caixa de linha. Onde as duas dividem a linha, como em "Tudo que
     saiu daqui", a diferença aparece como desalinho. O recuo é em em, então
     acompanha o corpo em qualquer tela. */
  position:relative;top:-.085em;
  letter-spacing:-.01em;
  background:linear-gradient(96deg,var(--azul) 8%,var(--lilas) 58%,var(--roxo));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__sub{
  margin-top:clamp(1.25rem,3vw,1.75rem);
  max-width:46ch;font-size:var(--f-lead);line-height:1.5;
  color:color-mix(in srgb,var(--creme) 74%,transparent);
}
.hero__actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:clamp(1.75rem,4vw,2.5rem)}

.hero__metricas{
  display:flex;flex-wrap:wrap;gap:clamp(1.5rem,4vw,3rem);
  margin-top:clamp(2.25rem,5vw,3rem);
  padding-top:clamp(1.5rem,3vw,2rem);
  border-top:1px solid var(--borda);
}
.hero__metricas strong{
  display:block;
  font-size:clamp(1.75rem,3.2vw,2.5rem);font-weight:700;
  line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums;
  color:var(--creme);
}
.hero__metricas span{display:block;margin-top:.35rem;font-size:.88rem;color:var(--lilas);opacity:.8}
/* a terceira metrica e frase, nao numero. no tamanho dos contadores ela
   quebrava linha e empurrava o hero para baixo da dobra. */
.hero__metricas .metrica--texto{
  font-size:clamp(1.05rem,1.5vw,1.35rem);line-height:1.2;
  max-width:11ch;letter-spacing:-.02em;font-weight:500;
}

/* ---------- a conversa ----------
   O simbolo da marca e um balao de chat: e ele que preenche o C do logo.
   Entao o hero mostra a promessa acontecendo em vez de so afirmar. */
.conversa{
  display:grid;gap:.9rem;justify-items:start;
  align-content:center;
}
/* No celular tudo empilha e a conversa nascia a 844px, bem abaixo da dobra:
   a pessoa entrava, não via nada acontecer, e quando rolava até lá a cena já
   tinha terminado. Encolher as métricas sobe a conversa o suficiente para o
   primeiro balão espiar na tela inicial. */
@media (max-width:760px){
  /* a barra do topo termina por volta de 81px: o respiro precisa contar isso,
     senão o rótulo encosta no logo */
  .hero{min-height:auto;padding-top:clamp(6.5rem,13vh,8rem)}
  .hero__inner{gap:1.75rem}
  .hero__sub{margin-top:1rem}
  .hero__actions{margin-top:1.4rem}
  /* as três métricas em uma linha só. Empilhadas em duas fileiras elas
     custavam 142px, que é justamente o que faltava para a conversa subir. */
  .hero__metricas{
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:.75rem;margin-top:1.4rem;padding-top:1.1rem;
  }
  .hero__metricas strong{font-size:1.35rem}
  .hero__metricas span{margin-top:.25rem;font-size:.68rem;line-height:1.3}
  .hero__metricas .metrica--texto{font-size:.8rem;max-width:none;line-height:1.25}
  .conversa{gap:.7rem}
}
@media (min-width:1000px){.conversa{justify-self:end;max-width:26rem;width:100%}}

.balao{
  --balao-bg:#101c3d;
  position:relative;
  border-radius:20px;
  padding:.9rem 1.15rem 1rem;
  max-width:min(22rem,88%);
  border:1px solid var(--borda);
  background:var(--balao-bg);
  opacity:0;transform:translateY(14px) scale(.97);
}
/* A cena começa quando a conversa entra na tela, não quando a página carrega.
   No desktop dá no mesmo, porque ela já nasce visível; no celular é a
   diferença entre ver os balões chegando e encontrá-los prontos. */
.js-anim .conversa.is-vivo .balao{animation:balaoEntra .7s var(--ease) forwards}
.conversa.is-vivo .balao:nth-child(1){animation-delay:.15s}
.conversa.is-vivo .balao:nth-child(2){animation-delay:1.05s}
.conversa.is-vivo .balao:nth-child(3){animation-delay:1.85s}
.conversa.is-vivo .balao:nth-child(4){animation-delay:2.65s}
/* sem JS, ou se o observador não rodar, os balões ficam visíveis */
html:not(.js-anim) .balao{opacity:1;transform:none}
@keyframes balaoEntra{to{opacity:1;transform:none}}

/* O rabicho é um quadrado girado 45 graus, atrás do balão (z-index:-1),
   então só a ponta aparece e não há sobreposição de cor translúcida.
   A versão anterior usava background:inherit com clip-path e o degradê
   era redesenhado dentro do quadradinho, o que quebrava o desenho. */
.balao::after{
  content:"";position:absolute;bottom:-6px;z-index:-1;
  width:15px;height:15px;background:var(--balao-bg);
  transform:rotate(45deg);border-radius:0 0 3px 0;
}
.balao--deles::after{left:22px}
.balao--nossos::after{right:22px}

.balao--nossos{
  --balao-bg:var(--azul);
  justify-self:end;
  border-color:transparent;
}
.balao__quem{
  display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  opacity:.62;margin-bottom:.3rem;
}
.balao p{font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.35;letter-spacing:-.01em}
.balao--nossos p{font-weight:500}

.hero__scroll{
  position:absolute;right:var(--pad);bottom:clamp(1.5rem,4vw,2.5rem);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--lilas);
}
.hero__scroll i{display:block;width:1px;height:52px;background:var(--borda);position:relative;overflow:hidden}
.hero__scroll i::after{
  content:"";position:absolute;top:-52px;left:0;width:1px;height:52px;background:var(--azul);
  animation:scrollLine 2s var(--ease) infinite;
}
@keyframes scrollLine{to{top:52px}}
@media (max-width:999px){.hero__scroll{display:none}}

/* ---------- split de texto ---------- */
/* A máscara do reveal cortava o ponto do "i" e as descidas do "q" e do "g",
   porque a entrelinha do título é menor que o corpo. O respiro entra como
   padding e sai como margem negativa, então o layout não muda. */
[data-split] .word{
  display:inline-block;vertical-align:top;
  padding:.4em .24em .34em;margin:-.4em -.24em -.34em;
  /* A máscara recorta SÓ a base. Com overflow:hidden ela fechava os quatro
     lados, e qualquer acento alto, haste longa ou avanço de itálico que
     passasse da caixa era aparado. A animação só precisa esconder o que
     está abaixo, então o corte só existe embaixo. */
  clip-path:inset(-60% -60% 0 -60%);
  /* em em, nao numero: assim a palavra em serifa herda a MESMA altura de
     caixa em px da palavra em grotesk. Com numero, cada uma recalculava no
     proprio corpo e as linhas ficavam desiguais. */
  line-height:1em;
}
[data-split] .word__in{line-height:inherit}
[data-split] .word__in{
  display:inline-block;
  transition:transform 1s var(--ease);
}
.js-anim [data-split] .word__in{transform:translateY(140%)}
.js-anim [data-split].is-in .word__in{transform:none}
[data-split].is-in .word__in{transform:none}

/* ---------- reveal simples ---------- */
.reveal{transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js-anim .reveal{opacity:0;transform:translateY(22px)}
.js-anim .reveal.is-in{opacity:1;transform:none}
.reveal.is-in{opacity:1;transform:none}

/* =========================================================
   BOTÕES
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.95rem 1.6rem;border-radius:999px;border:1px solid transparent;
  font-size:.9rem;font-weight:500;letter-spacing:.01em;cursor:pointer;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),transform .25s var(--ease);
  will-change:transform;
}
.btn--solid{background:var(--ink);color:var(--creme)}
.btn--solid:hover{background:var(--azul)}
.btn--ghost{border-color:currentColor}
.btn--ghost:hover{background:var(--ink);color:var(--creme);border-color:var(--ink)}
.btn--full{width:100%;padding-block:1.1rem}
.btn--claro{background:var(--creme);color:var(--ink)}
.btn--claro:hover{background:var(--azul);color:var(--creme)}
.btn--linha{border-color:var(--borda);color:var(--creme)}
.btn--linha:hover{background:rgba(255,255,255,.08);border-color:var(--lilas)}

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee{
  background:var(--azul);color:var(--creme);
  padding:clamp(.9rem,1.6vw,1.4rem) 0;
  overflow:hidden;white-space:nowrap;
  border-block:1px solid var(--ink);
}
.marquee__track{
  display:inline-flex;align-items:center;gap:2.5rem;
  will-change:transform;
  font-size:clamp(1.1rem,2.4vw,2rem);
  font-weight:500;letter-spacing:-.02em;
}
.marquee__track i{font-style:normal;opacity:.5}

/* =========================================================
   MANIFESTO
   ========================================================= */
.label{
  font-size:var(--f-label);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--azul);
  margin-bottom:clamp(1.25rem,3vw,2rem);
}
.h2{
  font-size:var(--f-h2);font-weight:700;line-height:1.02;
  letter-spacing:-.035em;text-wrap:balance;
}

.manifesto{
  padding:clamp(6rem,14vw,12rem) var(--pad);
  max-width:var(--maxw);margin-inline:auto;
}
.manifesto__text{
  font-size:clamp(1.5rem,4.2vw,3.4rem);
  font-weight:500;line-height:1.18;letter-spacing:-.03em;
  max-width:20ch;
}
@media (min-width:900px){.manifesto__text{max-width:24ch}}
[data-scrub] .w{transition:color .25s linear}
.js-anim [data-scrub] .w{color:color-mix(in srgb,var(--ink) 16%,transparent)}
.js-anim [data-scrub] .w.on{color:var(--ink)}
[data-scrub] .w.on{color:var(--ink)}

/* =========================================================
   SERVIÇOS: cartas empilhadas
   ========================================================= */
/* a seção de trabalhos é escura e emendava direto na de serviços.
   este respiro separa os dois blocos. */
.services{padding:clamp(5rem,11vw,9rem) var(--pad) clamp(4rem,10vw,8rem)}
.services__head{max-width:var(--maxw);margin:0 auto clamp(2.5rem,6vw,4rem)}

.stack{max-width:var(--maxw);margin-inline:auto}
.card{
  position:sticky;
  top:calc(14vh + var(--i) * 14px);
  background:var(--creme);
  border:1px solid var(--ink);
  border-radius:22px;
  padding:clamp(1.75rem,4vw,3.25rem);
  margin-bottom:1.25rem;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:clamp(1rem,3vw,3rem);
  align-items:start;
  min-height:clamp(230px,26vh,300px);
  box-shadow:0 -1px 0 var(--ink);
  transition:background .5s var(--ease),color .5s var(--ease),border-color .5s var(--ease);
}
.card:nth-child(even){background:var(--ink);color:var(--creme);border-color:var(--ink)}
.card:nth-child(even) .card__num{color:var(--lilas)}
.card:nth-child(even) li{border-color:color-mix(in srgb,var(--creme) 35%,transparent)}
.card:nth-child(3){background:var(--azul);color:var(--creme)}
.card:nth-child(3) .card__num{color:var(--lilas)}
.card:nth-child(3) li{border-color:color-mix(in srgb,var(--creme) 40%,transparent)}

.card__num{
  font-size:clamp(1rem,1.4vw,1.15rem);font-weight:500;
  color:var(--azul);letter-spacing:.06em;
}
.card h3{font-size:var(--f-h3);font-weight:700;letter-spacing:-.03em;line-height:1.05;margin-bottom:.9rem}
.card p{max-width:56ch;font-size:var(--f-body);opacity:.86}
.card ul{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}
.card li{
  font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;
  padding:.35rem .8rem;border:1px solid color-mix(in srgb,var(--ink) 30%,transparent);border-radius:999px;
}
@media (max-width:640px){
  .card{grid-template-columns:1fr;gap:.75rem}
  .card__num{order:-1}
}

/* =========================================================
   PORTFÓLIO horizontal
   ========================================================= */
.work{
  background:var(--ink);color:var(--creme);
  position:relative;
  padding-block:clamp(4rem,9vw,7rem);
}
.work__sticky{
  display:flex;flex-direction:column;
  gap:clamp(2rem,4vw,3rem);
  max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--pad);
}
.work__head{padding-inline:var(--pad);max-width:var(--maxw);margin-inline:auto;width:100%}
.work__head .label{color:var(--lilas)}
.work__head .h2{margin-bottom:clamp(1.25rem,3vw,2rem)}

.filters{display:flex;flex-wrap:wrap;gap:.5rem}
.filter{
  background:none;border:1px solid color-mix(in srgb,var(--creme) 32%,transparent);
  color:inherit;border-radius:999px;padding:.7rem 1.15rem;cursor:pointer;
  font-size:.8rem;letter-spacing:.04em;min-height:44px;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.filter:hover{border-color:var(--creme)}
.filter.is-active{background:var(--creme);color:var(--ink);border-color:var(--creme)}

.work__rail{
  /* Duas fileiras de tres: cinco destaques mais a porta do portfolio.
     Todos os seis com a mesma largura, sem cartao esticado. */
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.5rem,3vw,2.5rem) clamp(1.25rem,2.4vw,2rem);
  align-items:start;
}
/* degrau editorial: a coluna do meio desce um pouco, para as duas fileiras
   nao lerem como uma tabela */
.work__rail > *:nth-child(3n+2){margin-top:clamp(1.5rem,4vw,3.5rem)}
/* flex com overflow ignora o padding do fim em varios navegadores.
   este espacador garante o respiro do lado direito. */

.proj{transition:opacity .45s var(--ease),filter .45s var(--ease)}
/* Esconder, e nao apagar. Apagado, o cartao fora da categoria continuava
   ocupando lugar: na faixa horizontal isso deixava a tela inteira cinza e
   obrigava a arrastar para achar o que foi pedido. */
.proj.is-off{display:none}
.proj__thumb{
  aspect-ratio:4/5;border-radius:16px;
  margin-bottom:1rem;overflow:hidden;position:relative;
  background:var(--azul-esc);
}
.proj__thumb img{
  width:100%;height:100%;object-fit:cover;
  /* a imagem deriva dentro do recorte conforme a pagina rola. E propriedade
     separada do transform, entao nao briga com o scale do hover, e sem o
     motor de animacao ela simplesmente fica centrada. */
  object-position:50% var(--deriva,50%);
  transition:transform .8s var(--ease),filter .5s var(--ease);
}
.proj:hover .proj__thumb img{transform:scale(1.05)}
.proj__thumb::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,color-mix(in srgb,var(--ink) 45%,transparent),transparent 45%);
  opacity:0;transition:opacity .5s var(--ease);
}
.proj:hover .proj__thumb::after{opacity:1}
.proj h3{font-size:1.1rem;font-weight:500;letter-spacing:-.02em}
/* A etiqueta ganhou peso: agora que o cartao mostra so o nome da marca, e
   ela que diz se aquele "Integramente" e a identidade ou o site. */
.proj__cat{
  display:inline-block;margin-top:.5rem;
  font-size:.7rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--creme);
  padding:.32rem .6rem;border-radius:999px;
  background:color-mix(in srgb,var(--azul) 85%,transparent);
}
.pagina-portfolio .proj__cat{background:var(--azul);color:var(--creme)}

.proj--cta{
  display:flex;flex-direction:column;justify-content:center;gap:1.25rem;
  border:1px dashed color-mix(in srgb,var(--creme) 35%,transparent);
  border-radius:16px;padding:clamp(1.25rem,3vw,2rem);
  aspect-ratio:4/5;align-self:flex-start;
}
.proj--cta h3{font-size:var(--f-h3);font-weight:700;line-height:1.1}
.proj--cta .btn--solid{background:var(--creme);color:var(--ink);align-self:flex-start}
.proj--cta .btn--solid:hover{background:var(--azul);color:var(--creme)}

/* No celular o trilho lateral escondia quase tudo: um projeto por vez, e o
   filtro de categoria perdia o sentido, porque a peça escolhida podia estar
   fora da tela. Empilhado, a lista inteira é a página. */
@media (max-width:760px){
  .work{height:auto}
  .work__sticky{position:static;height:auto}
  .work__rail{grid-template-columns:1fr}
  .work__rail > *:nth-child(3n+2){margin-top:0}
  .progress{display:none}
}

/* =========================================================
   NÚMEROS
   ========================================================= */
.stats{padding:clamp(5rem,12vw,9rem) var(--pad);max-width:var(--maxw);margin-inline:auto}
.stats__grid{
  display:grid;gap:clamp(2rem,5vw,4rem);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.stat{border-top:1px solid var(--ink);padding-top:1.25rem}
.stat__num{
  display:block;
  font-size:clamp(2.75rem,7vw,5.5rem);font-weight:700;
  line-height:1;letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;
}
.stat span{display:block;margin-top:.5rem;font-size:var(--f-body);opacity:.7}

/* =========================================================
   DEPOIMENTOS
   ========================================================= */
.quotes{padding:0 var(--pad) clamp(5rem,12vw,9rem);max-width:var(--maxw);margin-inline:auto}
.quotes__grid{display:grid;gap:clamp(1rem,2vw,1.5rem);grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.quote{
  border:1px solid var(--ink);border-radius:20px;
  padding:clamp(1.5rem,3vw,2.25rem);
  display:flex;flex-direction:column;justify-content:space-between;gap:2rem;
  transition:background .4s var(--ease),color .4s var(--ease);
}
.quote:hover{background:var(--ink);color:var(--creme)}
.quote blockquote{font-size:clamp(1rem,1.15vw,1.15rem);line-height:1.5;letter-spacing:-.01em}
.quote figcaption strong{display:block;font-weight:500}
.quote figcaption span{font-size:.82rem;opacity:.65;line-height:1.35}

/* =========================================================
   CONTATO
   ========================================================= */
.contact{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--fundo);color:var(--creme);
  padding:clamp(4rem,10vw,8rem) var(--pad);
}
.contact__inner{
  position:relative;z-index:1;
  max-width:var(--maxw);margin-inline:auto;
  display:grid;gap:clamp(2.5rem,5vw,4rem);
  grid-template-columns:1fr;align-items:start;
}
@media (min-width:940px){.contact__inner{grid-template-columns:1fr 1fr}}
.contact__left{max-width:34rem}
.contact .label{color:var(--lilas)}
.contact__title{
  font-size:clamp(2.25rem,5.5vw,4rem);font-weight:700;
  line-height:1.1;letter-spacing:-.04em;margin-bottom:1.25rem;
}
.contact__note{font-size:var(--f-lead);max-width:32ch;color:color-mix(in srgb,var(--creme) 70%,transparent)}
.contact__list{margin-top:2.25rem;display:flex;flex-direction:column;gap:.55rem}
.contact__list a{
  font-size:clamp(1.05rem,1.8vw,1.3rem);
  border-bottom:1px solid var(--borda);padding-bottom:.35rem;
  display:inline-block;transition:border-color .3s,color .3s;
}
.contact__list a:hover{color:var(--lilas);border-color:var(--lilas)}

/* O formulario vira cartao claro: mais visivel, e separado do rodape
   em vez de se misturar com ele. */
.form{
  background:var(--creme);color:var(--ink);
  border-radius:24px;
  padding:clamp(1.5rem,3.5vw,2.5rem);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.75);
}
.form__titulo{
  font-size:var(--f-label);letter-spacing:.14em;text-transform:uppercase;
  color:var(--azul);margin-bottom:1.25rem;
}
.form__grid{display:grid;gap:.9rem;grid-template-columns:1fr 1fr}
.field{position:relative}
.field--full{grid-column:1/-1}
.field input,.field textarea,.field select{
  width:100%;background:transparent;border:0;
  border-bottom:1px solid color-mix(in srgb,var(--ink) 26%,transparent);
  padding:1.5rem 0 .6rem;border-radius:0;transition:border-color .3s;
}
.field textarea{resize:vertical;min-height:5rem}
.field select{padding-top:1.1rem}
.field select option{background:var(--creme);color:var(--ink)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--azul)}
.field label{
  position:absolute;left:0;top:1.5rem;
  font-size:var(--f-body);opacity:.55;pointer-events:none;
  transition:transform .3s var(--ease),font-size .3s var(--ease),opacity .3s;
  transform-origin:left top;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label{transform:translateY(-1.35rem) scale(.78);opacity:.75}
.field.is-erro input,.field.is-erro textarea,.field.is-erro select{border-color:#D93025}
.form .btn{grid-column:1/-1;margin-top:.75rem}
.form__status{grid-column:1/-1;font-size:.9rem;min-height:1.2rem;opacity:.75}
@media (max-width:560px){.form__grid{grid-template-columns:1fr}}

/* =========================================================
   FOOTER
   Compacto, largura contida e num fundo mais escuro que o
   contato, para nao se misturar com o formulario.
   ========================================================= */
.footer{background:#000512;color:var(--creme);padding:0 var(--pad)}
.footer__inner{max-width:var(--maxw);margin-inline:auto}

.footer__topo{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1.5rem;padding-block:clamp(2.5rem,5vw,3.5rem);
}
.footer__logo svg{width:clamp(130px,15vw,190px)}
.footer .logo__mark .cls-2{fill:var(--creme)}
.footer .logo__mark .cls-1{fill:var(--azul)}
.footer__frase{font-size:1rem;max-width:30ch;line-height:1.4;color:color-mix(in srgb,var(--creme) 55%,transparent)}

.footer__grid{
  display:grid;gap:1.75rem 2rem;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  padding-block:clamp(2rem,4vw,2.75rem);
  border-top:1px solid rgba(255,255,255,.08);
}
.footer__grid h4{
  font-size:.7rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--lilas);margin-bottom:.7rem;
}
.footer__grid p{font-size:.95rem;line-height:1.65;color:color-mix(in srgb,var(--creme) 62%,transparent)}
.footer__grid a{border-bottom:1px solid transparent;transition:border-color .3s,color .3s}
.footer__grid a:hover{color:var(--creme);border-color:currentColor}

/* Entre 380 e 500px o grid caía em duas colunas de ~180px e
   "falecom@conceito.marketing" não cabia: vinha cortado. Endereço e Contato
   passam a ocupar a linha inteira; Redes e Navegar são listas curtas e
   seguem lado a lado, então o rodapé não fica mais alto por isso. */
@media (max-width:760px){
  .footer__grid{grid-template-columns:1fr 1fr}
  .footer__grid > div:nth-child(1),
  .footer__grid > div:nth-child(2){grid-column:1 / -1}
  .footer__grid a[href^="mailto"]{overflow-wrap:anywhere}
}

.footer__bottom{
  display:flex;flex-wrap:wrap;gap:.75rem;justify-content:space-between;
  padding-block:1.25rem 1.75rem;font-size:.8rem;
  color:color-mix(in srgb,var(--creme) 40%,transparent);
  border-top:1px solid rgba(255,255,255,.08);
}

/* Sem rAF: o portfolio horizontal precisa virar rolagem normal,
   senao o visitante atravessa 3 telas sem nada acontecer. */
.no-raf .work{height:auto}
.no-raf .work__sticky{position:static;height:auto}
.no-raf .progress{display:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none}
  [data-split] .word__in{transform:none}
  [data-scrub] .w{color:var(--ink)}
  .hero__blob{display:none}
  .work{height:auto}
  .work__sticky{position:static;height:auto}
  .card{position:static}
}

/* =========================================================
   MÉTODO NORTE (abas interativas)
   ========================================================= */
.metodo{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--fundo);color:var(--creme);
  padding:clamp(5rem,12vw,9rem) var(--pad);
}
.metodo__inner{position:relative;z-index:1;max-width:var(--maxw);margin-inline:auto}
.metodo__head{max-width:52rem;margin-bottom:clamp(2.5rem,6vw,4rem)}
.metodo .label{color:var(--lilas)}
.metodo .h2 em{
  font-style:normal;
  background:linear-gradient(96deg,var(--azul) 6%,var(--lilas) 55%,var(--roxo));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.metodo__intro{
  font-size:var(--f-lead);max-width:48ch;margin-top:1.25rem;
  color:color-mix(in srgb,var(--creme) 70%,transparent);
}

.norte__abas{
  display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;
  /* espaço reservado acima para a ponta crescer sem empurrar nada */
  padding-top:18px;
}
.norte__aba{
  position:relative;
  background:rgba(255,255,255,.03);border:1px solid var(--borda);border-radius:16px;
  color:inherit;cursor:pointer;text-align:left;
  padding:clamp(.9rem,2vw,1.4rem);
  display:grid;gap:.25rem;
  transition:background .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease);
}
/* A ponta cresce ACIMA da caixa, num pseudo-elemento, em vez de ser recortada
   dela. Recortando, a aba perdia altura e a letra ficava encostada no corte;
   crescendo para fora, a caixa continua inteira e a ponta é acréscimo.
   O triângulo é o truque das bordas: as laterais transparentes e a de baixo
   colorida desenham a seta, e animar a espessura dela faz a ponta brotar. */
.norte__aba::after{
  content:"";position:absolute;left:50%;bottom:100%;
  width:0;height:0;
  border-inline:22px solid transparent;
  border-bottom:0 solid var(--azul);
  transform:translateX(-50%);
  transition:border-bottom-width .4s var(--ease);
}
.norte__aba.is-ativa::after{border-bottom-width:18px}
.norte__aba:hover{transform:translateY(-3px)}
.norte__aba:hover{background:rgba(255,255,255,.05);border-color:var(--lilas)}
/* A aba escolhida deixa de ser retângulo: o topo vira uma ponta, apontando
   para o norte. Substitui a setinha que ficava sobre a letra e que, no
   mobile, parecia acento fora do lugar. O clip-path é uma interseção, então
   a base do polígono cobre a caixa inteira e as quinas de baixo continuam
   arredondadas. */
.norte__aba.is-ativa{
  background:linear-gradient(150deg,var(--azul),color-mix(in srgb,var(--azul) 55%,var(--roxo)));
  border-color:transparent;
}
/* se o motor de animação estiver parado, a ponta aparece de uma vez em vez de
   congelar no meio do caminho */
.no-raf .norte__aba,
.no-raf .norte__aba::after{transition:none}
.norte__letra{
  font-size:clamp(2.5rem,6.8vw,5rem);font-weight:700;
  line-height:.82;letter-spacing:-.06em;
  color:var(--creme);opacity:.55;
  transition:color .4s var(--ease),opacity .4s var(--ease),transform .4s var(--ease);
}
.norte__aba:hover .norte__letra{opacity:.9;transform:translateY(-.04em)}
.norte__aba.is-ativa .norte__letra{color:var(--creme);opacity:1}
.norte__nome{
  font-size:clamp(.66rem,1vw,.82rem);letter-spacing:.1em;text-transform:uppercase;opacity:.8;
}
.norte__aba.is-ativa .norte__nome{opacity:.9}

/* trilha do avanco automatico */
.norte__trilha{
  height:2px;background:var(--borda);border-radius:2px;
  margin:1rem 0 clamp(2rem,5vw,3rem);overflow:hidden;
}
.norte__trilha i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--azul),var(--roxo))}

.norte__paineis{position:relative;min-height:clamp(200px,26vh,260px)}
.norte__painel{display:grid;gap:.75rem;max-width:56ch;animation:painelEntra .55s var(--ease)}
.norte__painel[hidden]{display:none}
@keyframes painelEntra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.norte__passo{font-size:var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:var(--lilas)}
.norte__painel h3{font-size:clamp(1.75rem,4vw,3rem);font-weight:700;letter-spacing:-.035em;line-height:1.02}
.norte__resumo{font-size:var(--f-lead);color:color-mix(in srgb,var(--creme) 82%,transparent)}
.norte__texto{color:color-mix(in srgb,var(--creme) 62%,transparent);max-width:52ch}

@media (max-width:760px){
  .norte__aba{padding:.7rem .4rem;justify-items:center;text-align:center}
  .norte__nome{display:none}
}

/* =========================================================
   SOBRE / QUEM FAZ
   ========================================================= */
.sobre{
  display:grid;gap:clamp(2rem,5vw,4.5rem);
  grid-template-columns:1fr;
  padding:clamp(4rem,10vw,8rem) var(--pad);
  max-width:var(--maxw);margin-inline:auto;
  align-items:start;
}
@media (min-width:900px){
  .sobre{grid-template-columns:minmax(280px,.85fr) 1.15fr}
  .sobre__foto{position:sticky;top:clamp(6rem,12vh,9rem)}
}
.sobre__foto img,
.sobre__placeholder{
  width:100%;aspect-ratio:4/5;border-radius:20px;object-fit:cover;
  object-position:50% 50%;   /* imagem e moldura sao quadradas, nada a reposicionar */
  display:block;
}
/* o fundo da foto é praticamente o azul escuro da marca, então uma borda
   fina evita que ela se dissolva no creme da seção */
.sobre__foto img{border:1px solid color-mix(in srgb,var(--ink) 12%,transparent)}
.sobre__placeholder{
  background:linear-gradient(150deg,var(--azul-esc),var(--azul));
  display:grid;place-items:center;
  color:color-mix(in srgb,var(--creme) 70%,transparent);
  font-size:.9rem;letter-spacing:.14em;text-transform:uppercase;text-align:center;
  line-height:1.7;
}
.sobre__cargo{
  font-size:var(--f-label);letter-spacing:.14em;text-transform:uppercase;
  color:var(--azul);margin-top:.5rem;
}
.sobre__bio{
  display:grid;gap:1.1rem;margin-top:clamp(1.75rem,4vw,2.5rem);
  font-size:clamp(1.02rem,1.15vw,1.15rem);line-height:1.6;max-width:60ch;
}
.sobre__bio p:first-child{font-weight:500}
.sobre__creds{
  display:flex;flex-wrap:wrap;gap:.5rem;
  margin-top:clamp(1.75rem,4vw,2.5rem);
}
.sobre__creds li{
  font-size:.8rem;letter-spacing:.04em;
  padding:.5rem .95rem;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--ink) 25%,transparent);
}

/* =========================================================
   PÁGINA DE PROJETO
   ========================================================= */
.projeto{
  padding:clamp(7rem,14vw,10rem) var(--pad) 0;
  max-width:var(--maxw);margin-inline:auto;
}
.migalha{
  display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;
  font-size:.82rem;opacity:.6;margin-bottom:clamp(2rem,5vw,3rem);
}
.migalha a{border-bottom:1px solid transparent;transition:border-color .3s}
.migalha a:hover{border-color:currentColor}
.migalha span[aria-hidden]{opacity:.4}

.projeto__titulo{
  font-size:clamp(2.1rem,5.2vw,4.25rem);font-weight:700;
  line-height:1;letter-spacing:-.04em;text-wrap:balance;
  margin-block:.5rem 1.5rem;
}
.projeto__resumo{
  font-size:var(--f-lead);opacity:.75;max-width:66ch;line-height:1.45;
}

.projeto__ficha{
  display:grid;gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  margin-block:clamp(3rem,7vw,4.5rem);
  padding-block:clamp(1.75rem,4vw,2.5rem);
  border-block:1px solid color-mix(in srgb,var(--ink) 16%,transparent);
}
.projeto__ficha h4{
  font-size:var(--f-label);font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--azul);margin-bottom:.4rem;
}
.projeto__ficha p{font-size:1.05rem}

.projeto__texto{display:grid;gap:1.25rem;max-width:74ch;font-size:1.1rem;line-height:1.6}

.galeria{
  display:grid;gap:clamp(.75rem,2vw,1.5rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));
  margin-block:clamp(3rem,8vw,6rem);
}
.galeria__item{
  overflow:hidden;border-radius:16px;
  background:color-mix(in srgb,var(--ink) 6%,transparent);
}
.galeria__item img{width:100%;height:auto;display:block}
.galeria__item:first-child:nth-last-child(odd){grid-column:1/-1}

.projeto__nav{
  display:grid;gap:1rem;grid-template-columns:1fr;
  padding-block:clamp(2.5rem,6vw,4rem);
  border-top:1px solid color-mix(in srgb,var(--ink) 16%,transparent);
}
@media (min-width:700px){.projeto__nav{grid-template-columns:1fr 1fr}}
.projeto__nav-item{
  display:grid;gap:.35rem;padding:1.5rem;
  border:1px solid color-mix(in srgb,var(--ink) 20%,transparent);
  border-radius:16px;
  transition:background .4s var(--ease),color .4s var(--ease);
}
.projeto__nav-item:hover{background:var(--ink);color:var(--creme)}
.projeto__nav-item span{
  font-size:var(--f-label);letter-spacing:.14em;text-transform:uppercase;opacity:.6;
}
.projeto__nav-item strong{font-size:var(--f-h3);font-weight:700;letter-spacing:-.03em;line-height:1.1}
.projeto__nav-item--fim{text-align:right}

.projeto__cta{
  text-align:center;
  padding-block:clamp(3rem,8vw,6rem);
  display:grid;gap:1.25rem;justify-items:center;
}
.projeto__cta p{opacity:.7;max-width:40ch}

.pagina-projeto .footer{margin-top:0}

/* =========================================================
   SEM rAF
   ========================================================= */


/* =========================================================
   SERIFA DE APOIO
   Só em itálico e só em texto grande (2rem para cima).
   Fora de depoimento, legenda, métrica e texto corrido.
   ========================================================= */
.h2 em,
.contact__title em,
.footer__frase em,
.qa__titulo em{
  font-family:var(--serif);font-weight:400;font-style:italic;
  font-size:1.18em;line-height:inherit;letter-spacing:-.01em;
}
.h2 em{background:none;color:var(--azul);-webkit-text-fill-color:currentColor}
.work .h2 em{color:var(--lilas)}
.contact__title em,.qa__titulo em{color:var(--lilas)}
.footer__frase em{color:var(--lilas)}
/* A Anthem tem altura de x maior que a Instrument Serif, então a serifa
   precisou encolher aqui para não parecer desproporcional ao lado dela. */
.norte__resumo{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.28;letter-spacing:-.005em;
}

/* =========================================================
   MÉTODO: fundo próprio, diferente do hero
   ========================================================= */
.metodo{background:var(--azul-esc)}
.ambiente--diagonal .riscas{
  position:absolute;inset:0;opacity:.5;
  background-image:repeating-linear-gradient(
    118deg,
    transparent 0 22px,
    color-mix(in srgb,var(--lilas) 9%,transparent) 22px 23px);
  -webkit-mask-image:radial-gradient(at 70% 30%,#000 10%,transparent 82%);
  mask-image:radial-gradient(at 70% 30%,#000 10%,transparent 82%);
}
.metodo .brilho--c{
  background:radial-gradient(circle at 45% 45%,
    color-mix(in srgb,var(--roxo) 42%,transparent),
    color-mix(in srgb,var(--azul) 30%,transparent) 52%,transparent 74%);
}

/* =========================================================
   QUEM FAZ: nota das duas frentes
   ========================================================= */
.sobre__nota{
  margin-top:clamp(2rem,4vw,2.75rem);
  padding:clamp(1.25rem,3vw,1.75rem);
  border-radius:18px;
  border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);
  background:color-mix(in srgb,var(--azul) 5%,transparent);
}
.sobre__nota h3{
  font-size:1.1rem;font-weight:700;letter-spacing:-.02em;margin-bottom:.5rem;
  color:var(--azul);
}
.sobre__nota p{opacity:.85;max-width:56ch}

/* =========================================================
   RODAPÉ com destaque
   ========================================================= */
.footer__marca{
  display:grid;gap:1.25rem;justify-items:start;
  padding-block:clamp(3rem,6vw,4.5rem) clamp(2rem,4vw,3rem);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.footer__marca .footer__logo svg{width:clamp(200px,34vw,420px)}
.footer__frase{
  font-size:clamp(1.1rem,1.9vw,1.55rem);line-height:1.35;letter-spacing:-.015em;
  max-width:26ch;color:var(--creme);
}
.footer__botao{
  display:inline-flex;align-items:center;
  background:var(--creme);color:var(--ink);
  border-radius:999px;padding:.9rem 1.6rem;
  font-size:.95rem;font-weight:500;margin-top:.5rem;
  transition:background .35s var(--ease),color .35s var(--ease),transform .25s var(--ease);
}
.footer__botao:hover{background:var(--azul);color:var(--creme)}
@media (min-width:900px){
  .footer__marca{
    grid-template-columns:auto 1fr auto;align-items:center;
    gap:clamp(1.5rem,4vw,3.5rem);justify-items:stretch;
  }
  .footer__marca .footer__botao{justify-self:end;margin-top:0}
}


/* =========================================================
   PLAYER LEVE DE VÍDEO
   Mostra a capa e só carrega o iframe do YouTube no clique.
   ========================================================= */
.player{
  position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;
  margin-block:clamp(2.5rem,6vw,4rem);
  background:var(--azul-esc);cursor:pointer;
}
.player img,.player iframe{width:100%;height:100%;display:block;border:0;object-fit:cover}
.player__play{
  position:absolute;inset:0;display:grid;place-items:center;
  background:color-mix(in srgb,var(--ink) 28%,transparent);
  border:0;cursor:pointer;transition:background .4s var(--ease);
}
.player__play:hover{background:color-mix(in srgb,var(--ink) 14%,transparent)}
.player__play span{
  width:clamp(56px,7vw,84px);aspect-ratio:1;border-radius:50%;
  background:var(--creme);display:block;position:relative;
  transition:transform .4s var(--ease),background .4s var(--ease);
}
.player__play:hover span{transform:scale(1.08);background:var(--azul)}
.player__play span::after{
  content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);
  border-style:solid;border-width:.62em 0 .62em 1.05em;
  border-color:transparent transparent transparent var(--ink);
  font-size:clamp(14px,1.6vw,20px);
}
.player__play:hover span::after{border-left-color:var(--creme)}
.player.is-tocando .player__play,.player.is-tocando img{display:none}


/* =========================================================
   PERGUNTAS
   O balão é o contorno interno do "C" da marca, o mesmo path
   do logo. Ele se desenha sozinho quando a seção entra na tela.
   ========================================================= */
.qa{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--azul-esc);color:var(--creme);
  padding:clamp(5rem,11vw,8rem) var(--pad);
}
.brilho--e{
  width:min(58vw,720px);aspect-ratio:1;right:-12vw;bottom:-20vh;
  background:radial-gradient(circle at 48% 48%,
    color-mix(in srgb,var(--azul) 48%,transparent),
    color-mix(in srgb,var(--roxo) 24%,transparent) 54%,transparent 74%);
  animation:respira 23s ease-in-out infinite alternate;
}
.qa__inner{
  position:relative;z-index:1;max-width:var(--maxw);margin-inline:auto;
  display:grid;gap:clamp(2.5rem,5vw,4.5rem);grid-template-columns:1fr;
}
@media (min-width:980px){
  .qa__inner{grid-template-columns:.9fr 1.1fr;align-items:start}
  .qa__head{position:sticky;top:clamp(6rem,12vh,9rem)}
}
.qa .label{color:var(--lilas)}
.qa__titulo{
  font-size:var(--f-h2);font-weight:700;line-height:1.02;
  letter-spacing:-.035em;text-wrap:balance;
}

/* o balão da marca, em traço, com os três pontinhos de "digitando" */
.qa__marca{margin-top:clamp(2rem,4vw,3rem);max-width:min(22rem,70%)}
.qa__marca svg{width:100%;height:auto;overflow:visible}
.qa__traco{
  fill:none;stroke:var(--lilas);stroke-width:2.4;
  stroke-linejoin:round;stroke-linecap:round;
  opacity:.85;
}
.js-anim .qa__traco{
  stroke-dasharray:var(--traco,320);
  stroke-dashoffset:var(--traco,320);
  transition:stroke-dashoffset 1.8s var(--ease);
}
.js-anim .qa__marca.is-in .qa__traco{stroke-dashoffset:0}
.qa__ponto{fill:var(--azul);opacity:0}
.js-anim .qa__marca.is-in .qa__ponto{animation:pontinho 1.4s ease-in-out infinite}
.qa__ponto:nth-of-type(2){animation-delay:.18s !important}
.qa__ponto:nth-of-type(3){animation-delay:.36s !important}
@keyframes pontinho{
  0%,100%{opacity:.25;transform:translateY(0)}
  40%{opacity:1;transform:translateY(-2px)}
}

/* lista */
.qa__lista{display:grid;gap:0}
.qa__item{border-top:1px solid var(--borda)}
.qa__item:last-child{border-bottom:1px solid var(--borda)}
.qa__pergunta{
  width:100%;background:none;border:0;color:inherit;cursor:pointer;
  display:flex;align-items:flex-start;gap:1rem;
  padding:clamp(1.15rem,2.4vw,1.6rem) 0;
  text-align:left;font-size:clamp(1.05rem,1.7vw,1.35rem);
  font-weight:500;letter-spacing:-.02em;line-height:1.3;
  transition:color .3s var(--ease);
}
.qa__pergunta:hover{color:var(--lilas)}
.qa__balao{flex:0 0 auto;width:clamp(26px,3vw,34px);margin-top:.1em}
.qa__balao svg{width:100%;height:auto}
.qa__balao path{
  fill:none;stroke:var(--lilas);stroke-width:3.4;stroke-linejoin:round;
  opacity:.5;transition:opacity .35s var(--ease),fill .35s var(--ease),stroke .35s var(--ease);
}
.qa__pergunta[aria-expanded="true"] .qa__balao path{fill:var(--azul);stroke:var(--azul);opacity:1}
.qa__pergunta:hover .qa__balao path{opacity:1}
.qa__texto{flex:1}

.qa__resposta{padding-bottom:clamp(1.15rem,2.4vw,1.6rem);max-width:56ch}
.qa__resposta[hidden]{display:none}
.qa__resposta p{
  color:color-mix(in srgb,var(--creme) 68%,transparent);
  animation:painelEntra .45s var(--ease);
}

/* =========================================================
   CTA no fim da página de projeto
   Era um título gigante centralizado que sumia. Agora é uma
   faixa escura com o texto de um lado e os botões do outro.
   ========================================================= */
.projeto__cta{
  display:grid;gap:clamp(1.5rem,3vw,2.5rem);
  grid-template-columns:1fr;align-items:center;
  background:var(--fundo);color:var(--creme);
  border-radius:24px;
  padding:clamp(1.75rem,4vw,3rem);
  margin-block:clamp(2rem,5vw,3.5rem) clamp(3rem,7vw,5rem);
  text-align:left;justify-items:stretch;
}
@media (min-width:760px){
  .projeto__cta{grid-template-columns:1fr auto}
}
.projeto__cta .label{color:var(--lilas);margin-bottom:.6rem}
.projeto__cta h2{
  font-family:var(--serif);font-weight:400;font-style:italic;
  font-size:clamp(1.85rem,3.2vw,2.6rem);
  line-height:1.1;letter-spacing:-.005em;color:var(--lilas);
}
.projeto__cta-sub{
  margin-top:.65rem;max-width:44ch;
  color:color-mix(in srgb,var(--creme) 68%,transparent);
}
.projeto__cta-acoes{display:flex;flex-wrap:wrap;gap:.75rem}


/* =========================================================
   DEPOIMENTOS com o balão da marca
   ========================================================= */
.quote{position:relative;padding-top:clamp(4.6rem,7.5vw,5.6rem)}
.quote__balao{
  position:absolute;top:clamp(1.5rem,3vw,2.25rem);left:clamp(1.5rem,3vw,2.25rem);
  width:clamp(30px,3.4vw,40px);height:auto;
}
.quote__balao svg{width:100%;height:auto;display:block;overflow:visible}
/* contorno, não preenchido: cheio, nesse tamanho, vira um bloco e o
   rabicho some. Sem estas regras o path nasce preto e sólido. */
.quote__balao path{
  fill:none;stroke:var(--azul);stroke-width:4;stroke-linejoin:round;
  transition:fill .4s var(--ease),stroke .4s var(--ease);
}
.quote:hover .quote__balao path{fill:var(--creme);stroke:var(--creme)}

.quote blockquote{font-size:clamp(1rem,1.15vw,1.15rem);line-height:1.5;letter-spacing:-.01em}

.quote figcaption{display:flex;align-items:center;gap:.85rem}
.quote__inicial{
  flex:0 0 auto;width:2.6rem;height:2.6rem;border-radius:50%;
  display:grid;place-items:center;
  background:color-mix(in srgb,var(--azul) 14%,transparent);
  color:var(--azul);
  font-weight:700;font-size:.95rem;letter-spacing:-.02em;
  transition:background .4s var(--ease),color .4s var(--ease);
}
.quote:hover .quote__inicial{background:var(--azul);color:var(--creme)}
.quote figcaption div{display:grid}
.quote figcaption span{font-size:.82rem;opacity:.65;line-height:1.35}

/* =========================================================
   SOBRE: nome e nota menores
   ========================================================= */
.sobre__texto .h2{font-size:clamp(1.85rem,3.4vw,2.9rem)}
.sobre__nota h3{font-size:1rem}
.sobre__nota p{font-size:.95rem;line-height:1.6}

/* =========================================================
   MARCA DO MÉTODO NORTE
   As letras são a MESMA fonte, corpo e peso da palavra ao lado, e
   sobem em degrau. Uma linha traça a subida e termina em seta.
   Nada de caixa, cor trocada ou corpo diferente: o destaque vem do
   movimento, que é o que a palavra quer dizer.
   ========================================================= */
.marcaNorte{
  position:relative;display:inline-flex;align-items:baseline;
  vertical-align:baseline;margin-left:.34em;padding-right:.1em;
  /* espaço para o degrau e para a linha, sem empurrar o layout */
  margin-top:-.12em;padding-top:.12em;
}
.marcaNorte i{
  font-style:normal;font-weight:700;font-size:1em;
  /* degradê da marca, do azul ao roxo, atravessando as cinco letras */
  background:linear-gradient(100deg,var(--azul) 0%,var(--lilas) 46%,var(--roxo) 100%);
  background-size:500% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  padding:.2em .04em .18em;margin:0 -.04em;
  background-position:calc(var(--n) * 25%) 0;
  /* as letras ficam na linha, sem degrau. só a entrada é escalonada */
  transition:opacity .45s var(--ease);
  transition-delay:calc(.25s + var(--n) * .07s);
}
.js-anim .h2:not(.is-in) .marcaNorte i{opacity:0;transition:none}

/* A rota que sobe. Só a linha fica em SVG: com preserveAspectRatio="none"
   uma reta não sofre com a distorção, mas uma ponta de seta sofreria.
   Por isso a ponta é feita em CSS, com borda. */
.marcaNorte__rota{
  position:absolute;left:.02em;right:0;bottom:-.1em;
  width:100%;height:.3em;overflow:visible;
}
.marcaNorte__linha{
  fill:none;stroke:url(#gradNorte);
  stroke-width:3.2;stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:100;stroke-dashoffset:0;
  transition:stroke-dashoffset .9s var(--ease) .5s;
}
.js-anim .h2:not(.is-in) .marcaNorte__linha{stroke-dashoffset:100;transition:none}


/* respiro contínuo: o conjunto sobe devagar, como quem avança */


@media (prefers-reduced-motion:reduce){
  .marcaNorte{animation:none !important}
  .marcaNorte i{opacity:1 !important;transition:none !important}
  .marcaNorte__linha{stroke-dashoffset:0 !important;transition:none !important}
}
@media (max-width:520px){.marcaNorte{margin-left:.24em}}


/* =========================================================
   SETA DO NORTE
   Fica ao lado da palavra, com folga, e avança em laço.
   Usa o roxo da paleta.
   ========================================================= */
.setaNorte{
  display:inline-block;vertical-align:baseline;
  width:clamp(2.1rem,3.6vw,3.2rem);height:auto;
  margin-left:.95em;overflow:visible;
  transform:translateY(.06em);
}
.setaNorte__haste,.setaNorte__ponta{
  fill:none;stroke:var(--roxo);
  stroke-width:5;stroke-linecap:round;stroke-linejoin:round;
}
.setaNorte__haste{stroke-dasharray:100;stroke-dashoffset:0;transition:stroke-dashoffset .7s var(--ease) .9s}
.setaNorte__ponta{opacity:1;transition:opacity .4s var(--ease) 1.4s}
.js-anim .h2:not(.is-in) .setaNorte__haste{stroke-dashoffset:100;transition:none}
.js-anim .h2:not(.is-in) .setaNorte__ponta{opacity:0;transition:none}
/* A seta avança em laço: sai para cima e para a direita, some, e volta
   do ponto de partida. É o gesto que mostra direção, agora que as letras
   ficaram na linha. */
.js-anim .h2.is-in .setaNorte{animation:setaAvanca 2.8s cubic-bezier(.4,0,.2,1) 1.6s infinite}
@keyframes setaAvanca{
  0%{transform:translate(0,.06em);opacity:0}
  18%{transform:translate(0,.06em);opacity:1}
  62%{transform:translate(.55em,-.5em);opacity:1}
  84%,100%{transform:translate(.9em,-.85em);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .setaNorte{animation:none !important;transform:translateY(.06em) !important;opacity:1 !important}
  .setaNorte__haste{stroke-dashoffset:0 !important;transition:none !important}
  .setaNorte__ponta{opacity:1 !important;transition:none !important}
}


/* =========================================================
   CLIENTES
   As marcas entram em escala de cinza e ganham cor no hover:
   assim a faixa não briga com o resto da página, mas responde.
   ========================================================= */
/* Faixa no azul da marca. Antes ela era creme como as três seções
   anteriores e virava um bloco só com os depoimentos. O azul separa,
   quebra a sequência de claros e serve de transição para o escuro
   das Perguntas logo abaixo. */
.clientes{
  background:var(--azul);color:var(--creme);
  padding:clamp(3.5rem,7vw,5.5rem) var(--pad);
}
.clientes__inner{max-width:var(--maxw);margin-inline:auto}
.clientes .label{color:color-mix(in srgb,var(--creme) 78%,transparent)}
.clientes__intro{
  font-size:var(--f-lead);max-width:40ch;margin-bottom:clamp(2.25rem,4.5vw,3rem);
  color:color-mix(in srgb,var(--creme) 88%,transparent);
}
/* Carrossel: cinco marcas à vista, o resto vem arrastando.
   Rolagem nativa com encaixe, então funciona no toque sem JS. */
.clientes__palco{position:relative}
.clientes__trilho{
  display:flex;gap:clamp(1rem,2.4vw,2rem);
  overflow-x:auto;
  /* sem encaixe: ele puxaria o trilho de volta a cada quadro do laço */
  overscroll-behavior-x:contain;
  /* respiro suficiente para o brasão ampliado do CT não ser cortado,
     já que o contentor de rolagem também corta na vertical */
  padding-block:.85rem;
  scrollbar-width:none;-ms-overflow-style:none;
  cursor:grab;
}
.clientes__trilho::-webkit-scrollbar{display:none}
.clientes__trilho.is-arrastando{cursor:grabbing}
.clientes__trilho:focus-visible{outline:2px solid var(--creme);outline-offset:6px;border-radius:8px}

.clientes__trilho li{
  /* cinco por vez, descontando os quatro espaços entre elas */
  flex:0 0 calc((100% - 4 * clamp(1rem,2.4vw,2rem)) / 5);
  display:grid;place-items:center;
  position:relative;
}
/* divisória fina no meio do vão, entre uma marca e a seguinte.
   Fica no pseudo-elemento e não na borda para não comer a largura
   calculada acima. */
.clientes__trilho li + li::before{
  content:"";position:absolute;
  left:calc(clamp(1rem,2.4vw,2rem) / -2);
  top:50%;transform:translateY(-50%);
  width:1px;height:2.4rem;
  background:color-mix(in srgb,var(--creme) 20%,transparent);
}
/* todas as marcas vivem numa caixa 4:1, entao basta dar a mesma
   largura: cada uma ja esta dimensionada por area dentro dela */
.clientes__trilho img{
  width:100%;height:auto;aspect-ratio:4/1;
  object-fit:contain;
  /* as marcas sao pretas na origem: isso as deixa brancas sobre o azul */
  filter:brightness(0) invert(1);
  opacity:.82;
  --escala:1;
  transform:scale(var(--escala));
  transition:opacity .4s var(--ease),transform .4s var(--ease);
  pointer-events:none;user-select:none;
}
.clientes__trilho li:hover img{opacity:1;transform:translateY(-3px) scale(var(--escala))}
/* O brasão do CT é redondo: com a mesma altura das horizontais ele ocupa
   só um quarto da largura do espaço e lê menor que as vizinhas. Um aumento
   discreto aproxima a presença dele das outras, sem destoar. */
.clientes__trilho img[alt*="CT Esportivo"]{--escala:1.26}

/* Esmaece os dois lados. Como o laço é contínuo, as marcas entram e saem
   pelas bordas o tempo todo e o corte seco denunciaria a emenda. */
.clientes__palco::before,
.clientes__palco::after{
  content:"";position:absolute;top:0;bottom:0;z-index:1;
  width:clamp(2rem,6vw,5rem);pointer-events:none;
}
.clientes__palco::before{left:0;background:linear-gradient(to left,transparent,var(--azul))}
.clientes__palco::after{right:0;background:linear-gradient(to right,transparent,var(--azul))}

@media (max-width:900px){
  .clientes__trilho li{flex-basis:calc((100% - 2 * clamp(1rem,2.4vw,2rem)) / 3)}
}
@media (max-width:560px){
  .clientes__trilho li{flex-basis:calc((100% - clamp(1rem,2.4vw,2rem)) / 2)}
}



/* =========================================================
   PÁGINA DE PORTFÓLIO
   A home é vitrine e mostra só os destaques. Aqui mora a lista
   inteira, em grade: tudo cabe na página, nada exige arrastar,
   e por isso o filtro finalmente faz sentido.
   ========================================================= */
.portfolio{
  max-width:var(--maxw);margin-inline:auto;
  padding:clamp(7rem,12vh,9rem) var(--pad) clamp(4rem,9vw,7rem);
}
.portfolio__topo{margin-bottom:clamp(2.5rem,6vw,4rem)}
.portfolio__titulo{
  font-size:clamp(2.4rem,6vw,5rem);font-weight:700;
  line-height:1.02;letter-spacing:-.04em;margin:.5rem 0 1rem;
  text-wrap:balance;
}
.portfolio__intro{
  font-size:var(--f-lead);max-width:48ch;
  color:color-mix(in srgb,var(--fg) 72%,transparent);
}
.portfolio__topo .filters{margin-top:clamp(2rem,4vw,2.75rem)}
.portfolio__conta{
  margin-top:1rem;font-size:.82rem;letter-spacing:.06em;
  color:color-mix(in srgb,var(--fg) 55%,transparent);
}

.portfolio__grade{
  display:grid;gap:clamp(1.75rem,3.5vw,2.75rem);
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  align-items:start;
}
/* na grade o cartao manda na propria largura, ao contrario da faixa da
   home, onde ele tem base fixa */
.portfolio__grade .proj{flex:none;width:100%}

/* o cartao de chamada acompanha a altura dos vizinhos */
.proj--cta{
  display:flex;flex-direction:column;justify-content:center;gap:1rem;
  align-self:stretch;
  min-height:clamp(280px,34vw,420px);
  padding:clamp(1.5rem,3vw,2.25rem);
  border:1px solid var(--borda);border-radius:16px;
  background:color-mix(in srgb,var(--fg) 4%,transparent);
}
/* num cartao em coluna a etiqueta esticava de ponta a ponta e virava barra */
.proj--cta .proj__cat{align-self:flex-start}

/* A porta do portfolio: mesma anatomia dos cartoes de projeto, mas no lugar
   de uma capa vai um mosaico das quatro que ficaram de fora. Antes era um
   bloco escuro com duas linhas de texto, e no desktop, ao lado de cartoes
   com imagem grande, virava um buraco. */
.porta__mosaico{
  display:grid;grid-template-columns:1fr 1fr;
  /* as linhas precisam ser explicitas: sem isto a altura de cada faixa fica
     indeterminada e as capas, que sao height:100%, colapsam para zero */
  grid-template-rows:1fr 1fr;
  gap:3px;background:var(--azul-esc);
}
.porta__mosaico img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
/* um veu para a seta ler por cima de qualquer capa */
.porta__mosaico::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,
    color-mix(in srgb,var(--ink) 78%,transparent) 0 28%,
    color-mix(in srgb,var(--ink) 30%,transparent) 60%);
  transition:opacity .5s var(--ease);
}
.porta__seta{
  position:absolute;z-index:2;top:50%;left:50%;
  translate:-50% -50%;
  width:clamp(52px,5.4vw,68px);aspect-ratio:1;
  display:grid;place-items:center;border-radius:999px;
  background:var(--creme);color:var(--ink);
  transition:background .4s var(--ease),color .4s var(--ease),scale .4s var(--ease);
}
.porta__seta svg{width:44%;height:44%}
.proj--porta:hover .porta__mosaico img{transform:scale(1.06)}
.proj--porta:hover .porta__seta{background:var(--azul);color:var(--creme);scale:1.08}
.proj--porta:hover .porta__mosaico::before{opacity:.85}

/* Os botões de filtro foram desenhados para o fundo escuro da home, onde
   viviam antes. Na página de portfólio, que é creme, ficavam creme sobre
   creme: invisíveis, e o escolhido igual aos outros. */
.pagina-portfolio .filter{
  border-color:color-mix(in srgb,var(--ink) 22%,transparent);
  color:color-mix(in srgb,var(--ink) 70%,transparent);
}
.pagina-portfolio .filter:hover{border-color:var(--ink);color:var(--ink)}
.pagina-portfolio .filter.is-active{
  background:var(--ink);color:var(--creme);border-color:var(--ink);
}

@media (max-width:560px){
  .portfolio__grade{grid-template-columns:1fr}
}


/* =========================================================
   PÁGINA 404
   Um painel centrado, não uma tela inteira: a página de erro é
   uma parada curta, e ocupar a tela toda com quatro linhas de
   texto deixa o vazio maior do que o recado.
   Todo caminho no HTML dela é absoluto, porque ela é servida no
   endereço que o visitante errou.
   ========================================================= */
.pagina-404{background:var(--fundo);color:var(--creme)}
.erro{
  position:relative;isolation:isolate;
  min-height:min(86svh,780px);
  display:grid;place-items:center;
  padding:clamp(6rem,12vh,8rem) var(--pad) clamp(3rem,7vh,5rem);
  overflow:hidden;
}
.erro__inner{
  position:relative;z-index:1;text-align:center;
  width:min(100%,40rem);
  padding:clamp(2.25rem,5vw,3.5rem) clamp(1.5rem,4vw,3rem) clamp(2rem,4.5vw,3rem);
  border:1px solid var(--borda);border-radius:24px;
  background:color-mix(in srgb,var(--creme) 4%,transparent);
  backdrop-filter:blur(6px);
}

/* o balão é o símbolo da marca: o mesmo que preenche o C do logo
   e que abre cada pergunta do Q&A. Vazio, com o código dentro. */
.erro__balao{display:block;width:clamp(92px,13vw,124px);margin:0 auto clamp(1.25rem,3vw,1.75rem)}
.erro__balao svg{width:100%;height:auto;overflow:visible}
.erro__balao path{fill:none;stroke:var(--lilas);stroke-width:2.6;stroke-linejoin:round;opacity:.55}
.erro__balao text{
  fill:var(--creme);font-family:var(--grotesk);font-weight:700;
  font-size:19px;letter-spacing:-.5px;
  text-anchor:middle;dominant-baseline:middle;
}

.erro__titulo{
  font-size:clamp(2rem,4.6vw,3.1rem);font-weight:700;
  line-height:1.05;letter-spacing:-.04em;
  margin:0 0 1rem;text-wrap:balance;
}
.erro__texto{
  font-size:clamp(1rem,1.5vw,1.12rem);line-height:1.55;
  max-width:38ch;margin-inline:auto;
  color:color-mix(in srgb,var(--creme) 72%,transparent);
}
.erro__acoes{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;
  margin-top:clamp(1.75rem,3.5vw,2.25rem);
}
.erro__ajuda{
  margin-top:clamp(1.75rem,3.5vw,2.25rem);
  padding-top:clamp(1.25rem,2.5vw,1.6rem);
  border-top:1px solid var(--borda);
  font-size:.9rem;line-height:1.5;
  color:color-mix(in srgb,var(--creme) 58%,transparent);
}
.erro__ajuda a{color:var(--creme);border-bottom:1px solid color-mix(in srgb,var(--creme) 40%,transparent)}
.erro__ajuda a:hover{border-color:var(--creme)}