/* =========================================================
   Criattus Agência Digital — Design System
   Cores da marca: rosa #ed145b · cinza #323232
   ========================================================= */

/* ---------- Ubuntu (arquivos locais em assets/fonts) ----------
   Só os três pesos que o site aciona: 400 corpo, 500 interface, 700 títulos.
   As cinco faces itálicas e a Light 300 eram declaradas mas nunca requisitadas:
   `em{font-style:normal}` impede que qualquer itálico seja pedido e nenhuma
   regra do sheet usa peso 300. Declarar face que ninguém aciona não custa
   download, mas engana quem lê o sistema.

   Os arquivos são WOFF2 com subset. O TTF original trazia cirílico e grego que
   o site nunca desenha: 2,43 MB de fonte para 120 caracteres em uso. O subset
   cobre um range fixo — ASCII, Latin-1, Latin Extended-A, travessões, aspas
   curvas, moedas, ™ e setas — e não o texto de hoje, senão copy nova quebraria.
   Resultado: 2,43 MB → 128 KB; o preload das três faces cai de 835 KB para
   120 KB. Para regerar depois de trocar a fonte, veja o README. */
@font-face{font-family:"Ubuntu";src:url("../fonts/Ubuntu-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Ubuntu";src:url("../fonts/Ubuntu-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Ubuntu";src:url("../fonts/Ubuntu-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  /* marca */
  --pink:#ed145b;
  --pink-600:#c8104c;
  --pink-300:#ff5c8d;
  /* Rosa aprofundado, para quando o rosa é SUPERFÍCIE com texto branco por cima
     (botões, CTA) ou texto sobre fundo claro. Nesses dois casos o #ed145b para
     em 4.33:1 e reprova o AA; este tom sobe para 5.78:1 sem perder a marca.
     Como acento sobre fundo escuro o #ed145b continua valendo (4.54:1). */
  --pink-strong:#c8104c;
  /* Rosa erguido, para o acento sobre SUPERFÍCIE ELEVADA escura — cards,
     painéis, submenu. O #ed145b tem 4.54:1 contra o fundo da página, mas todo
     card é mais claro que o fundo: sobre --surface ele cai para 4.17:1 e sobre
     --surface-2 para 3.88:1, reprovando o AA justamente nos textos pequenos que
     moram dentro de card. Este tom entrega 5.35:1 e 4.98:1 nessas superfícies. */
  --pink-lift:#f74a7c;
  --gray:#323232;

  /* superfícies */
  --ink:#0b0b0d;
  --ink-2:#111114;
  --surface:#161619;
  --surface-2:#1d1d21;
  --line:rgba(255,255,255,.085);
  --line-strong:rgba(255,255,255,.16);
  --surface-fade:rgba(17,17,20,.5);
  --surface-fade-2:rgba(29,29,33,.4);
  --soft:rgba(255,255,255,.03);
  --contrast:#ffffff;
  --contrast-fg:var(--gray);
  --display-hi:#ffffff;
  --display-lo:var(--pink-300);

  /* texto */
  --text:#f4f4f5;
  --muted:rgba(244,244,245,.60);
  /* .42 dava 3.80:1 — reprovava o AA justamente nos textos menores que usam
     este token (rodapé legal, meta dos cards, numeração). .48 leva a 4.64:1. */
  --muted-2:rgba(244,244,245,.48);

  /* tipografia */
  --font-display:"Ubuntu","Segoe UI",system-ui,sans-serif;
  --font-body:"Ubuntu","Segoe UI",system-ui,sans-serif;

  /* layout */
  --container:1280px;
  --gutter:clamp(20px,5vw,48px);
  --radius:18px;
  --radius-lg:26px;
  --header-h:77px;
  --rev-x:58px;
  --rev-x-lg:88px;

  /* Ritmo vertical fluido. Antes estes valores eram 100px fixos: num celular de
     667px de altura, uma seção gastava 200px de padding mais 100px sob o título
     antes da primeira linha de conteúdo. Agora encolhem com a viewport e
     preservam o respiro original no desktop. */
  --section-y:clamp(64px,8vw,100px);
  --head-gap:clamp(44px,6vw,100px);
  /* preenchimento interno dos cards, também fluido para telas estreitas */
  --card-p:clamp(26px,5.5vw,38px);
  --card-px:clamp(22px,5vw,32px);

  /* Escala de espaçamento fino, base 4. Antes os vãos entre itens eram 13
     valores avulsos entre 3px e 24px — 3, 6, 7, 8, 10, 11, 12, 14, 16, 17,
     18, 20, 24 —, cada um decidido no lugar onde nasceu. São seis degraus
     agora, e a distância entre dois deles é sempre visível: entre 10px e
     11px o olho não lê diferença nenhuma, só o código carrega a variação.
     O respiro grande continua sendo dos tokens fluidos acima; esta escala
     manda só de --sp-6 para baixo, que é o vão dentro de um componente. */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:20px;
  --sp-6:24px;

  /* Ritmo das páginas de serviço. O degrau de título da coluna sai do degrau
     headline do sistema reduzido pela fatia que a coluna ocupa do contêiner
     (~59%): mesma voz do índice, medida para a largura em que vive. */
  --svc-h:clamp(1.75rem,1.15rem + 2.4vw,2.8rem);
  --svc-block-gap:clamp(52px,6.5vw,88px);
  --svc-media-gap:clamp(28px,3.6vw,44px);
  /* A capa fecha o banner, então o vão que a separa do texto é o mesmo respiro
     vertical da seção: sob o título ela lê como parte do bloco, e não como um
     degrau menor que o de cima e o de baixo. */
  --svc-cover-gap:var(--section-y);

  /* motion */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:.7s;
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + 24px);
  /* o site é escuro: alinha barra de rolagem e controles nativos ao tema */
  color-scheme:dark;
  /* reserva a calha da barra de rolagem para o layout não pular entre uma
     página que rola e outra que não rola */
  scrollbar-gutter:stable;
}

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}

img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
/* o padrão do navegador para <figure> é `margin:1em 40px`: toda figura nascia
   80px mais estreita que a coluna e fora do alinhamento do grid. */
figure{margin:0}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--pink-strong);color:#fff}

.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  /* o env() cobre o celular deitado com recorte de tela; vale 0 nos demais */
  padding-left:calc(var(--gutter) + env(safe-area-inset-left));
  padding-right:calc(var(--gutter) + env(safe-area-inset-right));
}

/* ---------- Tipografia ---------- */
h1,h2,h3{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.06;
  letter-spacing:-.02em;
  margin:0;
  text-wrap:balance;
}
em{font-style:normal;color:var(--pink)}

.h2{
  font-size:clamp(2rem,1.15rem + 3.5vw,3.6rem);
  margin:0 0 .35em;
}
.u-m0{margin:0}
.lead{
  font-size:clamp(1.05rem,.98rem + .35vw,1.3rem);
  color:var(--text);
  line-height:1.6;
}
.section p{color:var(--muted)}
.section .lead{color:rgba(244,244,245,.86)}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  font-family:var(--font-display);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--pink);
  margin:0 0 var(--sp-6);
}
.eyebrow--light{color:#fff}
.eyebrow__dot{
  width:7px;height:7px;border-radius:50%;
  background:currentColor;
  flex:none;
  box-shadow:0 0 0 0 currentColor;
  animation:pulse 2.6s var(--ease) infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(237,20,91,.55)}
  70%{box-shadow:0 0 0 10px rgba(237,20,91,0)}
  100%{box-shadow:0 0 0 0 rgba(237,20,91,0)}
}

/* ---------- Seções ---------- */
.section{
  position:relative;
  padding:var(--section-y) 0;
}
/* Encosta o fim da seção no que vem depois. Serve para quando o último bloco
   já traz o próprio respiro e o padding só abriria um vão morto — nas internas
   de serviço, a faixa de portfólio emendando direto no CTA. */
.section--flush-b{padding-bottom:0}

.section__head{max-width:820px;margin-bottom:var(--head-gap)}
.section__head--split{
  max-width:none;
  display:flex;
  flex-wrap:wrap;
  gap:28px 48px;
  align-items:flex-end;
  justify-content:space-between;
}
/* Nas internas de serviço o título do portfólio ocupa uma linha só, e o link
   preso ao rodapé do bloco desce até a base do h2, lendo como legenda solta.
   Centrado na vertical ele sobe e volta a ler como par do título.
   Abaixo de 760px a regra de empilhamento reassume o flex-start. */
.section__head--split-mid{align-items:center}
.section__head-note{
  max-width:340px;
  color:var(--muted);
  margin:0;
}

/* =========================================================
   Botões
   ========================================================= */
.btn{
  /* superfície rosa com texto branco: usa o tom aprofundado (5.78:1) */
  --btn-bg:var(--pink-strong);
  --btn-fg:#fff;
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-3);
  padding:16px 30px;
  border-radius:999px;
  font-family:var(--font-display);
  font-size:.94rem;
  font-weight:500;
  letter-spacing:-.01em;
  color:var(--btn-fg);
  background:var(--btn-bg);
  overflow:hidden;
  isolation:isolate;
  transition:box-shadow .45s var(--ease),color .35s var(--ease);
}
.btn > *{position:relative;z-index:2}
/* padrão do projeto: ícone de botão sempre à esquerda do texto */
.btn svg{flex:none;order:-1}
.btn::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:#fff;
  transform:translateY(101%);
  transition:transform .5s var(--ease);
}
.btn:hover{box-shadow:0 14px 40px -12px rgba(237,20,91,.55)}
.btn:hover::before{transform:translateY(0)}
.btn--primary:hover{color:var(--gray)}
.btn--sm{padding:12px 22px;font-size:.85rem}

.btn--ghost{
  --btn-bg:transparent;
  --btn-fg:var(--text);
  border:1px solid var(--line-strong);
}
.btn--ghost::before{background:var(--contrast)}
.btn--ghost:hover{color:var(--contrast-fg);border-color:var(--contrast);box-shadow:none}

.btn--light{--btn-bg:#fff;--btn-fg:var(--gray)}
.btn--light::before{background:var(--gray)}
.btn--light:hover{color:#fff;box-shadow:0 14px 40px -12px rgba(0,0,0,.45)}

.btn--outline-light{
  --btn-bg:transparent;--btn-fg:#fff;
  border:1px solid rgba(255,255,255,.45);
}
.btn--outline-light::before{background:#fff}
.btn--outline-light:hover{color:var(--pink-strong);border-color:#fff;box-shadow:none}

.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-3);
  font-family:var(--font-display);
  font-weight:500;
  font-size:.95rem;
  color:var(--text);
  padding-bottom:4px;
  background-image:linear-gradient(var(--pink),var(--pink));
  background-size:0% 1px;
  background-position:0 100%;
  background-repeat:no-repeat;
  transition:background-size .5s var(--ease),color .3s var(--ease);
}
.link-arrow svg{transition:transform .45s var(--ease)}
.link-arrow:hover{background-size:100% 1px;color:var(--pink)}
.link-arrow:hover svg{transform:translateX(5px)}

/* =========================================================
   Preloader / cursor / progresso
   ========================================================= */
.preloader{
  position:fixed;inset:0;z-index:200;
  display:grid;place-items:center;
  background:var(--ink);
  transition:opacity .6s var(--ease),visibility .6s var(--ease);
  animation:preloaderFallback 0s linear 6s forwards; /* fallback: se o JS falhar, libera a tela */
}
@keyframes preloaderFallback{to{opacity:0;visibility:hidden}}
.preloader.is-done{opacity:0;visibility:hidden}
.preloader__inner{display:grid;justify-items:center;gap:26px}
.preloader__mark{
  width:min(200px,58vw);height:auto;
  animation:markIn .9s var(--ease) both,markFloat 2.4s ease-in-out 1s infinite;
}
@keyframes markIn{from{opacity:0;transform:scale(.7) rotate(-12deg)}to{opacity:1;transform:none}}
@keyframes markFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.preloader__bar{
  width:150px;height:2px;
  background:rgba(255,255,255,.12);
  overflow:hidden;border-radius:2px;
}
.preloader__bar span{
  display:block;height:100%;width:100%;
  background:var(--pink);
  transform:translateX(-100%);
  animation:loadBar 1.15s var(--ease) forwards;
}
@keyframes loadBar{to{transform:translateX(0)}}

.scroll-progress{
  position:fixed;top:0;left:0;z-index:120;
  height:2px;width:100%;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--pink),var(--pink-300));
}

.cursor{position:fixed;top:0;left:0;z-index:190;pointer-events:none;opacity:0;transition:opacity .3s}
.cursor.is-active{opacity:1}
.cursor__dot,.cursor__ring{
  position:absolute;border-radius:50%;
  transform:translate(-50%,-50%);
  will-change:transform;
}
.cursor__dot{width:6px;height:6px;background:var(--pink)}
.cursor__ring{
  width:34px;height:34px;
  border:1px solid rgba(237,20,91,.5);
  transition:width .35s var(--ease),height .35s var(--ease),background .35s var(--ease),border-color .35s var(--ease);
}
.cursor.is-hover .cursor__ring{
  width:56px;height:56px;
  background:rgba(237,20,91,.14);
  border-color:transparent;
}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* =========================================================
   Header
   ========================================================= */
.header{
  position:fixed;top:0;left:0;right:0;z-index:110;
  padding:18px 0;
  border-bottom:1px solid var(--line);
  transition:padding .45s var(--ease),background .45s var(--ease),box-shadow .45s var(--ease),backdrop-filter .45s var(--ease);
}
.header::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(11,11,13,.72);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  opacity:0;transition:opacity .45s var(--ease);
}
.header.is-stuck{padding:10px 0}
.header.is-stuck::after{opacity:1}

.header__inner{display:flex;align-items:center;gap:28px}

.logo{flex:none;display:block;transition:transform .5s var(--ease)}
.logo img{width:clamp(132px,12vw,158px);height:auto;transition:filter .4s var(--ease)}
.logo:hover{transform:translateY(-2px)}

.nav{margin-inline:auto}
.nav__list{display:flex;align-items:center;gap:var(--sp-1)}
.nav__link{
  position:relative;
  display:block;
  padding:9px 15px;
  font-family:var(--font-display);
  font-size:.9rem;
  font-weight:500;
  color:var(--muted);
  border-radius:999px;
  overflow:hidden;
  transition:color .35s var(--ease);
}
.nav__link span{position:relative;z-index:2;display:block}
.nav__link::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:rgba(255,255,255,.07);
  border-radius:inherit;
  transform:scale(.6);opacity:0;
  transition:transform .45s var(--ease),opacity .35s var(--ease);
}
.nav__link:hover{color:var(--text)}
.nav__link:hover::before{transform:scale(1);opacity:1}
.nav__link.is-current{color:var(--text)}
.nav__link.is-current::after{
  content:"";position:absolute;left:50%;bottom:2px;
  width:5px;height:5px;margin-left:-2.5px;
  border-radius:50%;background:var(--pink);
}
.nav__foot{display:none}

.header__actions{display:flex;align-items:center;gap:var(--sp-4)}
/* o rótulo do CTA não pode quebrar em duas linhas e esticar o header */
.header__actions .btn span{white-space:nowrap}

/* Num aparelho de 360px o conjunto logo + "Agendar reunião" + menu somava mais
   que a largura da tela: o botão do menu era empurrado para fora e ficava
   cortado na borda. Abaixo de 560px o CTA do header sai — a mesma ação continua
   a um toque no rodapé do menu aberto e no botão flutuante de WhatsApp. */
@media (max-width:560px){
  .header__actions .btn{display:none}
}
.burger{
  display:none;
  position:relative;
  width:44px;height:44px;
  /* sem isto o flex comprimia o botão para 32px quando o header ficava apertado,
     abaixo do alvo mínimo de toque */
  flex:none;
  border-radius:12px;
  border:1px solid var(--line-strong);
  padding:0;
}
/* As três barras partem do centro exato do botão, em vez de empilhadas por
   grid. Assim, ao abrir, basta zerar o deslocamento das duas externas para elas
   se cruzarem no meio e formarem um X de verdade — o empilhamento anterior
   fazia as diagonais se encontrarem na borda e desenharem um ">". */
.burger span{
  position:absolute;
  left:50%;top:50%;
  width:20px;height:2px;
  margin:-1px 0 0 -10px;
  background:var(--text);
  border-radius:2px;
  transition:transform .35s var(--ease),opacity .2s var(--ease);
}
.burger span:nth-child(1){transform:translateY(-6px)}
.burger span:nth-child(3){transform:translateY(6px)}

.burger.is-open span:nth-child(1){transform:rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:rotate(-45deg)}

/* =========================================================
   Hero
   ========================================================= */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  padding:calc(var(--header-h) + var(--section-y)) 0 var(--section-y);
  overflow:hidden;
  isolation:isolate;
}
/* O z-index:-1 é o que mantém o fundo inteiro atrás do .hero__inner, então
   nenhuma camada daqui intercepta clique em botão ou seleção de texto.
   A imagem aqui é o piso de degradação do vídeo: é o primeiro quadro dele,
   parado, para quando o vídeo não carrega ou o navegador recusa a mídia. */
.hero__bg{
  position:absolute;inset:0;z-index:-1;overflow:hidden;
  background:url("../img/hero-criattus-poster.webp") center / cover no-repeat;
}



.hero__noise{
  position:absolute;inset:0;
  opacity:.032;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero__inner{position:relative}
.hero__title{
  font-size:clamp(2.4rem,1.1rem + 4.6vw,4.5rem);
  font-weight:700;
  letter-spacing:-.028em;
  margin:0 0 32px;
  max-width:16ch;
}
.hero__lead{
  max-width:60ch;
  font-size:clamp(1.05rem,.98rem + .45vw,1.32rem);
  color:rgba(244,244,245,.72);
  margin-bottom:48px;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-bottom:56px}

.hero__proof{display:flex;flex-wrap:wrap;align-items:center;gap:16px 30px}
.rating{
  display:inline-flex;align-items:center;gap:var(--sp-3);
  padding:11px 20px 11px 16px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.03);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
/* único efeito no hover: a borda acende em rosa */
.rating{transition:border-color .35s var(--ease)}
.rating:hover{border-color:var(--pink)}
.rating__stars{display:flex;gap:var(--sp-1);color:#ffc107}
.rating__stars svg{width:15px;height:15px;animation:starPop .5s var(--ease) both}
.rating__stars svg:nth-child(1){animation-delay:.6s}
.rating__stars svg:nth-child(2){animation-delay:.68s}
.rating__stars svg:nth-child(3){animation-delay:.76s}
.rating__stars svg:nth-child(4){animation-delay:.84s}
.rating__stars svg:nth-child(5){animation-delay:.92s}
@keyframes starPop{from{opacity:0;transform:scale(.3) rotate(-40deg)}to{opacity:1;transform:none}}
.rating__text{margin:0;font-size:.88rem;color:var(--muted)}
.rating__text strong{color:var(--text);font-weight:500}

/* =========================================================
   Quem somos
   ========================================================= */
.about__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,5vw,72px);
  align-items:start;
  margin-bottom:var(--head-gap);
}
.about__head .h2{margin-bottom:0}
.about__body{padding-top:8px}
.about__body .lead{margin-bottom:1.1em}
.about__body .link-arrow{margin-top:12px}

.badges{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));
  gap:var(--sp-4);
}
.badge{
  position:relative;
  display:flex;align-items:center;gap:var(--sp-4);
  padding:clamp(16px,3.6vw,18px) clamp(17px,4vw,22px);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:linear-gradient(160deg,var(--surface) 30%,var(--surface-fade) 130%);
  overflow:hidden;
  isolation:isolate;
  transition:transform .6s var(--ease),border-color .5s var(--ease);
}
.badge::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(120% 90% at 50% 0%,rgba(237,20,91,.16),transparent 62%);
  opacity:0;transition:opacity .55s var(--ease);
}
.badge::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--pink),transparent);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .6s var(--ease);
}
.badge:hover{transform:translateY(-8px);border-color:rgba(237,20,91,.32)}
.badge:hover::before{opacity:1}
.badge:hover::after{transform:scaleX(1)}
.badge__icon{
  display:grid;place-items:center;
  width:44px;height:44px;flex:none;
  border-radius:12px;
  background:rgba(237,20,91,.12);
  color:var(--pink);
  transition:transform .5s var(--ease),background .4s var(--ease);
}
.badge:hover .badge__icon{transform:rotate(-8deg) scale(1.06);background:rgba(237,20,91,.2)}
.badge__text{
  font-family:var(--font-display);
  font-size:.94rem;font-weight:500;
  letter-spacing:-.01em;
}

/* =========================================================
   Serviços
   ========================================================= */
.section--services{background:var(--ink-2);border-block:1px solid var(--line)}
.services{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));
  gap:var(--sp-5);
}
.service{
  position:relative;
  padding:var(--card-p) var(--card-px) calc(var(--card-p) - 4px);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:linear-gradient(160deg,var(--surface) 0%,var(--surface-fade) 100%);
  overflow:hidden;
  isolation:isolate;
  transition:transform .6s var(--ease),border-color .5s var(--ease);
}
.service::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(120% 90% at 50% 0%,rgba(237,20,91,.16),transparent 62%);
  opacity:0;transition:opacity .55s var(--ease);
}
.service::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--pink),transparent);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .6s var(--ease);
}
.service:hover{transform:translateY(-8px);border-color:rgba(237,20,91,.32)}
.service:hover::before{opacity:1}
.service:hover::after{transform:scaleX(1)}

.service__num{
  position:absolute;top:26px;right:30px;
  font-family:var(--font-display);
  font-size:.78rem;font-weight:500;letter-spacing:.12em;
  color:var(--muted-2);
  transition:color .4s var(--ease)
}
.service:hover .service__num{color:var(--pink)}

.service__icon{
  display:grid;place-items:center;
  width:62px;height:62px;
  border-radius:16px;
  border:1px solid var(--line-strong);
  background:var(--soft);
  color:var(--pink);
  margin-bottom:var(--sp-6);
  transition:transform .6s var(--ease),background .5s var(--ease),border-color .5s var(--ease);
}
.service:hover .service__icon{
  transform:translateY(-3px) rotate(-6deg);
  background:rgba(237,20,91,.14);
  border-color:rgba(237,20,91,.35);
}
.service__title{
  font-size:1.3rem;font-weight:700;
  letter-spacing:-.02em;
  margin-bottom:var(--sp-3);
}
.service__desc{margin:0;font-size:.95rem;color:var(--muted);line-height:1.6}

/* =========================================================
   Seções de destaque: texto + ilustração
   ========================================================= */
.feature-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,6vw,86px);
  align-items:center;
}
.feature-row--reverse .feature-row__text{order:2}
.feature-row--reverse .feature-row__media{order:1}

.feature-row__text .h2{margin-bottom:26px}
.feature-row__text p{margin-bottom:26px}

.feature-row__media img{
  width:100%;
  height:auto;
  max-width:620px;
  margin-inline:auto;
}
/* a 385 é mais estreita que a 089; a porcentagem mantém a proporção em qualquer largura */
.feature-row__media--sm img{max-width:80%}

@media (max-width:880px){
  .feature-row{grid-template-columns:1fr;gap:38px}
  .feature-row--reverse .feature-row__text{order:1}
  .feature-row--reverse .feature-row__media{order:2}
  .feature-row__media img{max-width:460px}
  .feature-row__media--sm img{max-width:368px}
}

/* =========================================================
   Fundo de seção com imagem + véu escuro (com paralaxe opcional)
   ========================================================= */
.section-bg{
  position:absolute;
  inset:-80px 0;
  z-index:-1;
  background:center / cover no-repeat;
  will-change:translate;
  pointer-events:none;
}
.section-bg::after{
  content:"";
  position:absolute;inset:0;
}
.section-bg--team{
  background-image:url("../img/bg-criattus-agencia-digital-003.webp");
  /* área maior que a seção: com cover, a imagem é ampliada e o excedente é cortado */
  inset:-80px -10%;
  /* recorte mais alto: mostra as pessoas acima do centro do bloco */
  background-position:center 72%;
}
.section-bg--team::after{
  background:linear-gradient(180deg,rgba(11,11,13,.93) 0%,rgba(11,11,13,.86) 45%,rgba(11,11,13,.95) 100%);
}

/* a seção precisa recortar o excedente do fundo */
.section--pillars{
  overflow:hidden;
  isolation:isolate;
}
/* selos e colunas ficam agrupados sob o mesmo título */
.section--pillars .pillars{margin-top:clamp(32px,4vw,44px)}

/* =========================================================
   Números
   ========================================================= */
.stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));
  gap:var(--sp-6);
  padding:clamp(34px,4vw,48px) clamp(24px,4vw,52px);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:
    radial-gradient(90% 140% at 0% 0%,rgba(237,20,91,.10),transparent 55%),
    linear-gradient(150deg,var(--surface),var(--surface-fade));
}
.stat{display:grid;gap:var(--sp-2)}
.stat__num{
  display:flex;align-items:baseline;
  font-family:var(--font-display);
  font-size:clamp(2.4rem,1.6rem + 2.6vw,3.7rem);
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1;
  background:linear-gradient(120deg,var(--display-hi) 25%,var(--display-lo));
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
.stat__num em{color:var(--pink);-webkit-text-fill-color:var(--pink)}
.stat__label{font-size:.88rem;color:var(--muted);letter-spacing:.01em}

/* =========================================================
   Projetos
   ========================================================= */
.section--work{background:var(--ink-2);border-block:1px solid var(--line)}
.work{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));
  gap:var(--sp-5);
}
.work__item{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--surface);
  overflow:hidden;
  transition:transform .6s var(--ease),border-color .5s var(--ease),box-shadow .6s var(--ease);
}
.work__item:hover{
  transform:translateY(-7px);
  border-color:rgba(237,20,91,.35);
  box-shadow:0 30px 60px -35px rgba(0,0,0,.9);
}
/* Capa que leva a uma página de projeto. O link cobre a peça inteira, e não
   um rótulo dentro dela: no mosaico o alvo é a imagem, e uma área de toque
   menor que a capa seria uma armadilha no celular. Só algumas capas têm
   página; as demais seguem sem link, e por isso o alvo mora aqui e não no
   .work__item. */
.work__link{display:block;position:relative;z-index:1}
.work__link:focus-visible{outline:2px solid var(--pink);outline-offset:4px;border-radius:var(--radius-lg)}

.work__media{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  background:linear-gradient(150deg,var(--surface-2),#0f0f11);
}
.work__media img{
  width:100%;height:100%;
  object-fit:cover;
  transform:scale(1.02);
  filter:saturate(.72) brightness(.82);
  transition:transform 1s var(--ease),filter .7s var(--ease);
}
.work__item:hover .work__media img{transform:scale(1.09);filter:saturate(1) brightness(1)}
.work__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(11,11,13,.75),transparent 55%);
  opacity:.9;transition:opacity .6s var(--ease);
}
.work__item:hover .work__media::after{opacity:.45}

.work__meta{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--sp-4);
  padding:clamp(17px,3.6vw,20px) clamp(19px,4vw,24px) clamp(18px,3.8vw,22px);
}
.work__meta :is(h2,h3){
  font-size:1.08rem;font-weight:700;letter-spacing:-.02em;
  transition:color .4s var(--ease);
}
.work__item:hover .work__meta :is(h2,h3){color:var(--pink)}
.work__meta span{
  font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted-2);white-space:nowrap;
}

/* grade de projetos em largura total (ultrapassa o grid do site)
   100vw conta a largura da barra de rolagem, então a grade ficava alguns pixels
   mais larga que a área visível e nascia deslocada para a esquerda — o
   overflow-x:hidden do body só escondia o sintoma. --sbw é medida uma vez pelo
   JS; sem ele o fallback 0px reproduz o comportamento antigo. */
.work--full{
  width:calc(100vw - var(--sbw,0px));
  margin-left:calc(50% - (100vw - var(--sbw,0px)) / 2);
  /* mosaico: sem calha lateral e sem gap, as capas encostam entre si e nas duas
     bordas da janela. A leitura passa a ser a própria malha de imagens. */
  padding-inline:0;
  gap:0;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
@media (max-width:1080px){
  .work--full{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:680px){
  .work--full{grid-template-columns:1fr}
}

/* Capas do mosaico: sem card, sem moldura, sem canto.
   Os dois nomes de classe entram no seletor de propósito — .section--light
   também estiliza .work__item e vem depois no arquivo, então só a
   especificidade extra desfaz a borda, a sombra e o raio ali. */
.work.work--full .work__item{
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
}
/* o card subia 7px no hover — e 3px no :active sob ponteiro grosso. Com gap 0
   qualquer um dos dois abriria uma fenda entre as vizinhas, então o gesto migra
   inteiro para a imagem, que já tinha zoom e volta de cor. */
.work.work--full .work__item:hover,
.work.work--full .work__item:active{
  transform:none;
  box-shadow:none;
  border-color:transparent;
}
/* O degradê no pé da capa existia para o título ser legível sobre a foto, e foi
   desligado aqui quando o mosaico ficou sem título.

   A premissa mudou: as 41 capas voltaram a ter nome de cliente, porque eram
   <article> com uma <img> e nada mais — a página que o PRODUCT.md chama de
   "principal instrumento de prova" não dizia a quem cada trabalho pertencia nem
   levava a lugar nenhum. Com legenda de volta, o degradê volta a ter função.

   Diferença: aqui ele acompanha a legenda em vez de ficar sempre aceso. */
.work.work--full .work__media::after{
  background:linear-gradient(to top,rgba(0,0,0,.94) 0%,rgba(0,0,0,.86) 14%,rgba(0,0,0,.55) 30%,transparent 58%);
  opacity:1;
}

/* ---------------------------------------------------------
   O refletor sobre o mosaico
   Com gap 0, as capas deixam de ser cards vizinhos e viram um plano contínuo.
   Então apontar uma delas não é hover de card: é acender um ponto da
   superfície. A capa sob o cursor volta à cor plena e avança; as outras cedem,
   dessaturam e escurecem. É o North Star lido ao pé da letra — o palco recua
   para a luz entrar — e é o que devolve ao portfólio a resposta que ele perdeu
   quando o card, a borda e o título saíram.

   Sem JS: .work--full:hover pega a grade inteira e a capa apontada se
   reafirma na regra seguinte. Como não há calha entre as capas, não existe
   vão morto onde o foco pisque.

   O refletor é uma afordância de ponteiro: sem cursor não há "capa apontada",
   e no toque o mosaico deve ficar todo aceso. Por isso o bloco inteiro vive
   dentro de (hover:hover) — mais limpo que acender e depois desfazer, e evita
   passar por cima do (pointer:coarse) lá embaixo, que zera filtro e escala.
   --------------------------------------------------------- */
@media (hover:hover){
  .work.work--full:hover .work__media img{
    filter:saturate(.2) brightness(.42);
    transform:scale(1.02);
  }
  .work.work--full .work__item:hover .work__media img{
    filter:saturate(1) brightness(1);
    transform:scale(1.06);
  }
}

/* Movimento reduzido: o refletor continua, porque a informação dele é de cor e
   foco, não de deslocamento. O que sai é a escala — a única parte espacial. */
@media (hover:hover) and (prefers-reduced-motion:reduce){
  .work.work--full:hover .work__media img,
  .work.work--full .work__item:hover .work__media img{transform:none}
}

/* ---------------------------------------------------------
   Legenda da capa

   O mosaico foi desenhado para ser só imagem, e continua sendo: a legenda vem
   como camada sobre a capa, não como faixa abaixo dela.

   Ela existe porque as 41 capas eram <article> com uma <img> e nada mais —
   nenhum nome de cliente em texto, nenhum link. A página que o PRODUCT.md
   chama de "principal instrumento de prova" não dizia a quem cada trabalho
   pertencia, nem levava a lugar nenhum.

   Sem hover (celular, tablet) ela fica sempre visível: lá não existe o gesto
   que a revelaria.
   --------------------------------------------------------- */
.work__item{position:relative;overflow:hidden}
/* a capa fica na base da pilha para o véu e o texto poderem cobri-la */
.work__item .work__media{position:relative;z-index:0}

.work__item > h3,
.work__item > p{
  position:absolute;
  left:0;right:0;
  margin:0;
  padding-inline:clamp(14px,2vw,22px);
  color:#fff;
  pointer-events:none;
  z-index:2;
}
.work__item > h3{
  bottom:2.5em;
  text-shadow:0 1px 12px rgba(0,0,0,.8);
  font-size:clamp(1rem,.9rem + .4vw,1.2rem);
  line-height:1.2;
}
.work__item > p{
  bottom:1.15em;
  font-size:.8rem;
  line-height:1.3;
  /* .84 era pouco: a legenda cai sobre foto de papelaria clara, e o degradê
     sozinho não garantia o contraste da linha secundária. */
  color:rgba(255,255,255,.95);
  text-shadow:0 1px 10px rgba(0,0,0,.85);
  /* serviço longo não pode empurrar o nome do cliente para fora da capa */
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

@media (hover:hover){
  .work.work--full .work__media::after,
  .work__item > h3,
  .work__item > p{
    opacity:0;
    transition:opacity .35s var(--ease);
  }
  .work__item:hover .work__media::after,
  .work__item:hover > h3,
  .work__item:hover > p,
  .work__item:focus-visible .work__media::after,
  .work__item:focus-visible > h3,
  .work__item:focus-visible > p{opacity:1}
}

/* ---------------------------------------------------------
   Mosaico em cor plena — páginas de serviço
   Mesmo formato do índice: largura de janela, sem calha, sem card e sem
   título sobre a capa. O que muda é a cor. No índice as 41 capas formam uma
   parede, e o rebaixamento de saturação existe para o refletor ter de onde
   acender. Aqui são três provas escolhidas para um serviço específico: elas
   precisam ser lidas, não filtradas. Então a cor é a do arquivo, e o gesto de
   apontar fica só na escala.
   --------------------------------------------------------- */
/* O índice fixa três colunas porque tem 41 capas para empilhar. Aqui são duas
   ou três provas por serviço, então as trilhas se ajustam à contagem: `auto-fit`
   colapsa a trilha vazia e as restantes ocupam a janela inteira, sem sobrar um
   terço em branco na página de SEO, que só tem dois projetos. */
.work--full.work--truecolor{grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr))}
@media (max-width:680px){
  .work--full.work--truecolor{grid-template-columns:1fr}
}
.work--full.work--truecolor .work__media img{filter:none}
@media (hover:hover){
  .work--full.work--truecolor:hover .work__media img,
  .work--full.work--truecolor .work__item:hover .work__media img{filter:none}
  .work--full.work--truecolor:hover .work__media img{transform:scale(1.02)}
  .work--full.work--truecolor .work__item:hover .work__media img{transform:scale(1.06)}
}

/* =========================================================
   FAQ
   ========================================================= */
.faq{
  display:grid;gap:var(--sp-3);
  max-width:960px;
}
.faq__item{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(150deg,var(--surface),var(--surface-fade));
  overflow:hidden;
  transition:border-color .45s var(--ease),background .45s var(--ease);
}
.faq__item[open]{border-color:rgba(237,20,91,.32)}
.faq__item:hover{border-color:var(--line-strong)}

.faq__q{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--sp-6);
  padding:24px clamp(20px,3vw,30px);
  cursor:pointer;
  list-style:none;
  font-family:var(--font-display);
  font-size:clamp(1rem,.95rem + .25vw,1.14rem);
  font-weight:500;
  letter-spacing:-.015em;
  line-height:1.45;
  transition:color .35s var(--ease);
}
.faq__q::-webkit-details-marker{display:none}
.faq__q:hover{color:var(--pink)}
.faq__item[open] .faq__q{color:var(--pink)}

.faq__icon{
  position:relative;flex:none;
  width:30px;height:30px;margin-top:1px;
  border-radius:50%;
  border:1px solid var(--line-strong);
  transition:transform .5s var(--ease),border-color .4s var(--ease),background .4s var(--ease);
}
.faq__icon::before,.faq__icon::after{
  content:"";position:absolute;top:50%;left:50%;
  background:currentColor;border-radius:2px;
  transform:translate(-50%,-50%);
  transition:transform .45s var(--ease),opacity .3s var(--ease);
}
.faq__icon::before{width:11px;height:1.5px}
.faq__icon::after{width:1.5px;height:11px}
.faq__item[open] .faq__icon{
  transform:rotate(180deg);
  border-color:rgba(237,20,91,.5);
  background:rgba(237,20,91,.12);
}
.faq__item[open] .faq__icon::after{transform:translate(-50%,-50%) scaleY(0);opacity:0}

.faq__a{
  padding:0 clamp(20px,3vw,30px) 26px;
  max-width:78ch;
}
.faq__a p{color:var(--muted);font-size:.96rem;line-height:1.72}
.faq__a ul{display:grid;gap:var(--sp-2);margin-top:6px}
.faq__a li{
  position:relative;
  padding-left:20px;
  color:var(--muted);
  font-size:.95rem;
}
.faq__a li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:6px;height:6px;border-radius:50%;
  background:var(--pink);
}
.faq__item[open] .faq__a{animation:faqOpen .5s var(--ease)}
@keyframes faqOpen{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* fundo discreto da seção de dúvidas — a lista ocupa a esquerda, a foto respira à direita */
.section--faq{
  overflow:hidden;
  isolation:isolate;
}
.section--faq::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:url("../img/bg-criattus-agencia-digital-004.webp") right top / cover no-repeat;
  opacity:.34;
  /* esmaece nas bordas para não marcar o limite da seção */
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 20%,#000 76%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 20%,#000 76%,transparent 100%);
  pointer-events:none;
}

/* brilho rosa à direita, sobre a imagem e ao lado do acordeão */
.section--faq::after{
  content:"";
  position:absolute;
  z-index:-1;
  top:50%;left:50%;
  width:min(900px,92vw);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  translate:var(--gtx,0px) var(--gty,0px);
  border-radius:50%;
  background:radial-gradient(circle,rgba(237,20,91,.20) 0%,rgba(237,20,91,.08) 34%,transparent 62%);
  filter:blur(120px);
  pointer-events:none;
  animation:glowPulse 18s ease-in-out infinite alternate;
}

/* =========================================================
   CTA
   ========================================================= */
.cta{
  position:relative;
  padding:var(--section-y) 0;
  background:var(--pink-strong);
  color:#fff;
  overflow:hidden;
  isolation:isolate;
}
.cta__bg{position:absolute;inset:0;z-index:-1}
.cta__inner{position:relative}
.cta__title{
  font-size:clamp(2rem,1.1rem + 3.9vw,4rem);
  font-weight:700;
  letter-spacing:-.022em;
  margin:0 0 36px;
  max-width:20ch;
}
.cta__note{margin:0 0 48px;font-size:.92rem;color:rgba(255,255,255,.88);max-width:52ch}
.cta__actions{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin:0}

/* =========================================================
   Footer
   ========================================================= */
.footer{
  padding:var(--section-y) 0 28px;
  background:var(--ink);
  border-top:1px solid var(--line);
}
.footer__top{
  display:grid;
  /* Seis colunas: marca, serviços, segmentos, onde atendemos, agência e
     contato. "Onde atendemos" entrou com as páginas de modificador geográfico
     pelo mesmo motivo das verticais — sem link de entrada em toda página, elas
     ficam fora da hierarquia navegável, que é a condição que a política de
     doorway descreve. /criacao-de-logomarca-em-brasilia/ tinha zero.
     O contato mantém a coluna mais larga porque carrega o endereço completo. */
  grid-template-columns:minmax(0,1.25fr) repeat(4,minmax(0,.8fr)) minmax(0,1.7fr);
  gap:clamp(28px,3vw,48px);
  padding-bottom:clamp(40px,5vw,64px);
  border-bottom:1px solid var(--line);
}
.footer__logo{width:clamp(160px,16vw,186px);height:auto;margin-bottom:22px}
.footer__tagline{max-width:42ch;font-size:.94rem;color:var(--muted);margin-bottom:26px}

.social{display:flex;gap:var(--sp-3)}
.social a{
  display:grid;place-items:center;
  width:42px;height:42px;
  border:1px solid var(--line);
  border-radius:12px;
  color:var(--muted);
  transition:transform .5s var(--ease),color .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease);
}
.social a:hover{
  transform:translateY(-4px);
  color:#fff;
  border-color:var(--pink);
  background:var(--pink);
}

.footer__title{
  font-size:1rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--text);
  margin-bottom:var(--sp-6);
}
.footer__col ul{display:grid;gap:var(--sp-3);margin-bottom:22px}
.footer__col a{
  position:relative;
  font-size:.93rem;color:var(--muted);
  transition:color .35s var(--ease),padding-left .35s var(--ease);
}
.footer__col a::before{
  content:"";position:absolute;left:0;top:50%;
  width:0;height:1px;background:var(--pink);
  transform:translateY(-50%);
  transition:width .35s var(--ease);
}
.footer__col a:hover{color:var(--text);padding-left:16px}
.footer__col a:hover::before{width:10px}
.footer__address{
  font-style:normal;font-size:.9rem;line-height:1.75;
  color:var(--muted);
}


/* brilho rosa no centro do rodapé */
.footer{position:relative;overflow:hidden;isolation:isolate}
.footer::before{
  content:"";
  position:absolute;z-index:-1;
  top:50%;left:50%;
  width:min(1200px,120vw);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  translate:var(--gtx,0px) var(--gty,0px);
  border-radius:50%;
  background:radial-gradient(circle,rgba(237,20,91,.18) 0%,rgba(237,20,91,.07) 34%,transparent 62%);
  filter:blur(120px);
  pointer-events:none;
  animation:glowPulse 16s ease-in-out infinite alternate;
}

/* telefone e endereço com ícone à esquerda */
.footer__col--contact ul a{
  display:flex;align-items:center;gap:var(--sp-3);
  padding-left:0;
  font-size:1rem;
  font-weight:700;
  color:var(--text);
}
.footer__col--contact ul a:hover{color:var(--pink)}
.footer__col--contact ul a::before{display:none}
.footer__col--contact ul a:hover{padding-left:0}
.footer__col--contact svg{flex:none;color:var(--pink)}
.footer__address{
  display:flex;align-items:flex-start;gap:var(--sp-3);
}
.footer__address svg{margin-top:2px}

/* ---------- Rodapé: legal + selos ---------- */
.footer__bottom{
  display:flex;flex-wrap:wrap;
  gap:24px 40px;
  align-items:center;
  justify-content:space-between;
  padding-top:28px;
}
.footer__legal p{margin:0;font-size:.82rem;color:var(--muted-2)}
.footer__legal p + p{margin-top:7px}

.footer__seals{display:flex;flex-wrap:wrap;align-items:center;gap:12px}

/* os logos do Google são cinza-escuro: ficam sobre uma pastilha clara */
.seal{
  min-height:44px;
  display:grid;place-items:center;
  padding:9px 15px;
  background:#fff;
  border-radius:12px;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.seal img{width:auto;height:24px}
.seal:hover{transform:translateY(-3px);box-shadow:0 14px 28px -16px rgba(0,0,0,.85)}

.safe{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:8px 16px 8px 10px;
  border:1px solid var(--line-strong);
  border-radius:12px;
  transition:border-color .35s var(--ease),background .35s var(--ease);
}
.safe:hover{border-color:rgba(237,20,91,.55);background:rgba(237,20,91,.08)}
.safe__icon{
  display:grid;place-items:center;flex:none;
  width:30px;height:30px;
  border-radius:50%;
  border:1px solid rgba(237,20,91,.45);
  color:var(--pink);
}
.safe__text{display:grid;line-height:1.25}
.safe__text strong{
  font-family:var(--font-display);
  font-size:.83rem;font-weight:700;
  color:var(--text);
}
.safe__text span{font-size:.71rem;color:var(--muted-2)}

@media (max-width:640px){
  .footer__bottom{justify-content:flex-start}
}

/* =========================================================
   WhatsApp flutuante
   ========================================================= */
.whatsapp{
  position:fixed;right:22px;z-index:105;
  /* respeita a barra de gestos do iPhone */
  bottom:calc(22px + env(safe-area-inset-bottom));
  display:grid;place-items:center;
  width:56px;height:56px;
  border-radius:50%;
  background:#25d366;color:#fff;
  box-shadow:0 12px 30px -8px rgba(37,211,102,.55);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.whatsapp::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(37,211,102,.55);
  animation:waPing 2.6s var(--ease) infinite;
}
@keyframes waPing{0%{transform:scale(1);opacity:.8}70%,100%{transform:scale(1.6);opacity:0}}
.whatsapp:hover{transform:translateY(-4px) scale(1.06);box-shadow:0 18px 40px -10px rgba(37,211,102,.7)}
@media (max-width:600px){.whatsapp{right:16px;bottom:calc(16px + env(safe-area-inset-bottom));width:52px;height:52px}}

/* =========================================================
   Animações de entrada (scroll reveal)
   ========================================================= */
.js .reveal{
  opacity:0;
  transform:translate3d(var(--rx,0px),var(--ry,26px),0);
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);
  transition-delay:var(--reveal-delay,0ms);
}
.js .reveal.is-in{opacity:1;transform:none}

/* ---------- Entradas horizontais nos blocos de duas colunas ----------
   Só definem as variáveis --rx/--ry; o reset de .is-in continua valendo. */
.about__head .reveal,
.story__aside .reveal,
.feature-row__text .reveal,
.svc-rail .reveal,
.section__head--split > div .reveal{
  --rx:calc(var(--rev-x) * -1);
  --ry:0px;
}
.about__body .reveal,
.story__body .reveal,
.section__head-note.reveal{
  --rx:var(--rev-x);
  --ry:0px;
}
/* a ilustração entra pelo lado de fora, com curso maior */
.feature-row__media.reveal{--rx:var(--rev-x-lg);--ry:0px}
.feature-row--reverse .feature-row__text .reveal{--rx:var(--rev-x)}
.feature-row--reverse .feature-row__media.reveal{--rx:calc(var(--rev-x-lg) * -1)}

/* Split de texto por palavra */
[data-split] .word{
  padding-bottom:.14em;
  margin-bottom:-.14em;
  display:inline-block;
  overflow:hidden;
  vertical-align:top;
}
[data-split] .word > span{
  display:inline-block;
  transform:translateY(105%);
  transition:transform .95s var(--ease-out);
  transition-delay:var(--word-delay,0ms);
}
[data-split].is-in .word > span{transform:none}



/* =========================================================
   Páginas internas
   ========================================================= */

/* ---------- Banner de página ---------- */
.page-hero{
  position:relative;
  /* o recuo do topo vira token porque o brilho rosa se pendura nele: mudou o
     aperto do banner num breakpoint, o brilho acompanha sem ajuste separado */
  --page-hero-pt:clamp(120px,15vw,190px);
  padding:var(--page-hero-pt) 0 var(--section-y);
  overflow:hidden;
  isolation:isolate;
  border-bottom:1px solid var(--line);
}
.page-hero__bg{position:absolute;inset:0;z-index:-1;overflow:hidden}

/* nas páginas internas o fundo é estático: sem paralaxe, sem sangria */
.page-hero .hero__bgimg{inset:0;will-change:auto}
/* Brilho rosa dos banners internos (sobre a bg-001). Ele nasce sobre o título,
   não no canto: encostado no alto à direita só lambia a borda da arte; posto
   sobre a headline, vira a luz que a destaca.

   Vertical: o topo do h1 não varia entre as internas — migalhas e olho ocupam
   sempre a mesma altura —, então o centro do brilho é o fim do recuo do banner
   mais esses 95px, mais meia entrelinha, caindo na primeira linha. Prende-se ao
   --page-hero-pt para acompanhar sozinho os breakpoints que apertam o banner.
   Horizontal: acompanha a borda do texto, e não a da tela, senão escorregaria
   para o meio da arte em monitor largo.

   O z-index tira o brilho de baixo do véu. Ali embaixo ele era engolido: a
   película começa em ink puro justamente do lado do texto, que é onde ele
   precisa aparecer. */
.page-hero__glow{
  position:absolute;
  --glow-d:min(700px,80vw);
  width:var(--glow-d);aspect-ratio:1;
  top:calc(var(--page-hero-pt) + 132px);
  left:calc(max((100% - var(--container)) / 2, 0px) + var(--gutter) + 220px);
  margin-top:calc(var(--glow-d) / -2);
  margin-left:calc(var(--glow-d) / -2);
  z-index:1;
  border-radius:50%;

  background:radial-gradient(circle,rgba(237,20,91,.26),transparent 66%);
  filter:blur(90px);
  translate:var(--gtx,0px) var(--gty,0px);
  will-change:translate,scale;
  animation:glowPulse 20s ease-in-out infinite alternate;
}

.page-hero__veil{
  position:absolute;inset:0;
  background:linear-gradient(100deg,
    var(--ink) 6%,
    rgba(11,11,13,.92) 28%,
    rgba(11,11,13,.7) 50%,
    rgba(11,11,13,.42) 72%,
    rgba(11,11,13,.24) 100%);
}
.page-hero__title{
  font-size:clamp(2.2rem,1.2rem + 4.4vw,4.4rem);
  font-weight:700;
  letter-spacing:-.024em;
  margin:0 0 var(--sp-6);
  max-width:20ch;
}
.page-hero__lead{
  max-width:62ch;
  font-size:clamp(1rem,.96rem + .35vw,1.22rem);
  color:rgba(244,244,245,.72);
  margin:0;
}

/* ---------- Título e descrição lado a lado ----------
   O par vira um bloco de duas colunas: o título ancora à esquerda e a
   descrição corre à direita, centrada na altura dele. É a mesma divisão de
   papéis que o site já usa nas cabeças de seção partidas — de um lado o nome
   do assunto, do outro a frase que o explica —, e ela encurta o banner: o que
   ocupava duas faixas empilhadas passa a ocupar uma.
   O centro óptico é o do título, não o da caixa: por isso align-items:center
   e nenhuma margem entre os dois; o vão é a coluna vazia entre eles.
   Abaixo de 900px a grade colapsa e o par volta a empilhar — é o mesmo limiar
   em que a grade das internas de serviço colapsa, e ali a descrição ao lado
   viraria duas colunas estreitas demais para as duas. */
.page-hero__headline{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  align-items:center;
  column-gap:clamp(32px,4.4vw,72px);
}
.page-hero__headline .page-hero__title{margin-bottom:0}
/* A descrição agora é a coluna da direita: entra por ela, como já fazem os
   corpos de texto das outras grades de duas colunas do site. */
.page-hero__headline .page-hero__lead{
  max-width:46ch;
  --rx:var(--rev-x);
  --ry:0px;
}
@media (max-width:900px){
  .page-hero__headline{
    grid-template-columns:1fr;
    row-gap:var(--sp-6);
  }
  .page-hero__headline .page-hero__lead{max-width:62ch;--rx:0px;--ry:26px}
}

/* ---------- Migalhas ---------- */
.crumbs{
  display:flex;align-items:center;flex-wrap:wrap;
  gap:var(--sp-3);
  margin-bottom:var(--sp-6);
  font-size:.82rem;
  color:var(--muted-2);
}
.crumbs a{transition:color .3s var(--ease)}
.crumbs a:hover{color:var(--pink)}
.crumbs [aria-current]{color:var(--muted)}

/* ---------- Texto corrido ---------- */
.prose p{color:var(--muted);line-height:1.72}
/* linha de leitura confortável: acima de ~75 caracteres o olho perde a volta.
   Só nos parágrafos diretos — os cards e grades internas seguem livres. */
.prose > p,
.prose > .lead{max-width:72ch}
.prose .lead{color:rgba(244,244,245,.88)}
/* ---------- Quem somos: linha do tempo ---------- */
.story{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);
  gap:clamp(32px,5vw,80px);
  align-items:start;
}
.story__aside{position:sticky;top:110px}
.story__aside .h2{margin-bottom:0}

.timeline{display:grid;gap:0}
.timeline__item{
  position:relative;
  padding:0 0 38px 40px;
  border-left:1px solid var(--line-strong);
}
.timeline__item:last-child{border-left-color:transparent;padding-bottom:0}
.timeline__item::before{
  content:"";
  position:absolute;left:-6px;top:8px;
  width:11px;height:11px;
  border-radius:50%;
  background:var(--pink);
  box-shadow:0 0 0 5px rgba(237,20,91,.14);
}
.timeline__year{
  display:block;
  font-family:var(--font-display);
  font-size:1.35rem;font-weight:700;
  letter-spacing:-.02em;
  color:var(--pink);
  margin-bottom:var(--sp-2);
  line-height:1;
}
.timeline__item p{margin:0;color:var(--muted);line-height:1.72}

/* ---------- Quem somos: conceito e propósito ---------- */
.pillars{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:var(--sp-5);
}
.pillar{
  padding:clamp(32px,4vw,46px);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:
    radial-gradient(90% 130% at 0% 0%,rgba(237,20,91,.10),transparent 58%),
    linear-gradient(150deg,var(--surface),var(--surface-fade));
  transition:transform .5s var(--ease),border-color .4s var(--ease);
}
.pillar:hover{transform:translateY(-5px);border-color:rgba(237,20,91,.32)}
.pillar__label{
  display:block;
  font-family:var(--font-display);
  font-size:.74rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--pink);
  margin-bottom:var(--sp-5);
}
.pillar__text{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(1.2rem,1.05rem + .7vw,1.7rem);
  font-weight:500;
  line-height:1.35;
  letter-spacing:-.02em;
  color:var(--text) !important;
}

/* ---------- Filtros de projetos ---------- */
.filters{
  display:flex;flex-wrap:wrap;gap:var(--sp-3);
  /* a barra é o topo da seção: o vão abaixo dela é o mesmo respiro vertical que
     abre e fecha a seção, para a grade não nascer mais colada do que termina */
  margin-bottom:var(--section-y);
}
.filter{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  padding:11px 21px;
  border:1px solid var(--line-strong);
  border-radius:999px;
  font-family:var(--font-display);
  font-size:.88rem;font-weight:500;
  color:var(--muted);
  transition:color .35s var(--ease),border-color .35s var(--ease),background .35s var(--ease);
}
.filter span{
  font-size:.74rem;
  color:var(--muted-2);
  transition:color .35s var(--ease);
}
.filter:hover{color:var(--text);border-color:var(--text)}
.filter.is-active{
  color:#fff;
  background:var(--pink);
  border-color:var(--pink);
}
.filter.is-active span{color:rgba(255,255,255,.88)} /* .75 dava 3.72:1 sobre o rosa */

.work__item[hidden]{display:none}
.work__empty{
  padding:60px 0;
  text-align:center;
  color:var(--muted);
}

/* ---------- Botão "ver todos" ---------- */
.section__more{
  display:flex;
  justify-content:center;
  margin-top:var(--head-gap);
}
/* o display:flex acima vence o [hidden] da folha do navegador, então o estado
   escondido precisa ser dito aqui — mesmo caso já resolvido em .work__item */
.section__more[hidden]{display:none}

/* ---------- Serviços como links (página Serviços) ---------- */
a.service{display:block;color:inherit}
a.service .service__title{transition:color .35s var(--ease)}
a.service:hover .service__title{color:var(--pink)}

/* ---------- Rodapé: logo clicável ---------- */
.footer__logo-link{display:inline-block;transition:opacity .35s var(--ease)}
.footer__logo-link:hover{opacity:.75}

/* ---------- Responsivo das páginas internas ---------- */
@media (max-width:900px){
  .story{grid-template-columns:1fr}
  .story__aside{position:static}
}
@media (max-width:640px){
  .page-hero{--page-hero-pt:120px}
  .section__more .btn{width:100%}
  .filters{gap:var(--sp-3)}
  .filter{padding:10px 16px;font-size:.83rem}
}


/* =========================================================
   Fundo do hero e símbolo 3D do CTA (paralaxe de mouse por seção)
   ========================================================= */
.hero__bgimg{
  position:absolute;
  inset:-4%;
  background:url("../img/bg-criattus-agencia-digital-001.webp") center right / cover no-repeat;
  will-change:translate;
}
/* Vídeo de fundo do hero — ocupa toda a área da seção.
   A sangria de 4% para cada lado dá margem para o paralaxe de mouse deslocar a
   camada sem descobrir a borda da seção.
   pointer-events:none é redundante com o z-index:-1 do .hero__bg, mas garante
   que nem seleção de texto nem clique sejam capturados se a pilha mudar. */
.hero__video{
  position:absolute;
  inset:-4%;
  width:108%;
  height:108%;
  display:block;
  object-fit:cover;
  pointer-events:none;
  will-change:translate;
  /* entra desvanecendo quando o primeiro quadro está decodificado, para não
     piscar um retângulo vazio por cima do poster do .hero__bg */
  opacity:0;
  transition:opacity .9s var(--ease);
}
.hero__video.is-ready{opacity:1}

/* Abaixo de 760px o quadro fica alto e estreito, então o cover corta as laterais
   do vídeo. object-position escolhe qual faixa sobra: 72% cai no miolo do
   símbolo, e não na área vazia à esquerda do clipe. O vídeo fica em opacidade
   cheia, igual ao desktop — quem devolve a leitura do texto é a película do
   .hero__veil, reforçada mais abaixo nesta mesma largura. */
@media (max-width:760px){
  .hero__video{object-position:72% center}
}

/* véu acima do símbolo: garante contraste do texto sem apagar a arte à direita */
.hero__veil{
  position:absolute;inset:0;
  background:linear-gradient(100deg,
    var(--ink) 4%,
    rgba(11,11,13,.88) 26%,
    rgba(11,11,13,.55) 46%,
    rgba(11,11,13,.14) 68%,
    rgba(11,11,13,0) 86%);
}


/* Faixa intermediária: o hero encolhe mas o texto continua ocupando quase toda
   a largura, então ele alcança a parte acesa da arte. Medido em 900px, o
   parágrafo caía a 3.97:1 sobre o pico rosa. Empurrar as paradas escuras para a
   direita devolve a leitura sem apagar o efeito na borda. */
@media (min-width:761px) and (max-width:1100px){
  .hero__veil{
    background:linear-gradient(100deg,
      var(--ink) 10%,
      rgba(11,11,13,.93) 42%,
      rgba(11,11,13,.74) 64%,
      rgba(11,11,13,.32) 84%,
      rgba(11,11,13,.04) 100%);
  }
}

/* Nesta largura o texto atravessa o vídeo inteiro, inclusive o pico magenta dos
   fragmentos, então o véu deixa de ser um degradê lateral e vira película: uma
   base opaca no elemento mais o degradê vertical por cima. A base é o que
   garante o piso de contraste no quadro mais claro do giro; o degradê continua
   fechando o topo e o pé da seção contra o header e a seção seguinte. */
@media (max-width:760px){
  /* A película perdeu 4 pontos em cada parada: no ponto mais aberto do
     degradê o véu somado sai de 83.8% para 80.2% de cobertura, e o giro do
     símbolo volta a aparecer por trás do texto em vez de ficar sob um vidro
     fosco. O piso continua sendo medição, não estimativa.

     Medido contra o fundo operativo mais claro do clipe — o bloco 8x8 de
     brilho especular mais intenso das 150 imagens, que a régua deste projeto
     trata como rgb(255,231,245). Sob o véu novo esse ponto resolve para
     rgb(59,55,59), e ali o título dá 10.66:1 e o lead 4.98:1, os dois acima
     do 4.5:1 do AA. O eyebrow segue em branco pelo mesmo motivo de antes: em
     --pink ele não alcança o piso num texto de .72rem. O ponto em
     --pink-lift entrega 3.47:1, acima do 3:1 exigido de componente gráfico. */
  .hero__veil{
    background-color:rgba(11,11,13,.68);
    background-image:linear-gradient(180deg,
      rgba(11,11,13,.74) 0%,
      rgba(11,11,13,.38) 42%,
      rgba(11,11,13,.70) 82%,
      var(--ink) 100%);
  }
  .hero .eyebrow{color:var(--text)}
  .hero .eyebrow__dot{color:var(--pink-lift)}
}



/* símbolo 3D no CTA — reage ao mouse dentro da seção */
.cta__symbol{
  position:absolute;
  top:-30px;right:-13%;
  height:calc(100% + 60px);
  width:auto;
  max-width:none;
  opacity:.9;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.45));
  will-change:translate,rotate;
  pointer-events:none;
}
@media (max-width:1024px){
  .cta__symbol{right:-25%;opacity:.4}
}
/* No celular o simbolo deixa de ser um canto e passa a ser o centro da faixa.
   Preso ao rodape por bottom:-8%, ele entregava so a metade de cima de si
   mesmo — 42px do desenho caiam fora da secao — e a marca virava um recorte
   sem forma. Centrado nos dois eixos e mais largo que a coluna, volta a ser o
   simbolo inteiro por tras do texto; o overflow:hidden da faixa corta o que
   passar, e a opacidade de .14 mantem o titulo na frente. */
@media (max-width:760px){
  .cta__symbol{
    height:auto;
    width:min(560px,118vw);
    right:auto;left:50%;
    top:50%;bottom:auto;
    transform:translate(-50%,-50%);
    opacity:.14;
  }
}

/* =========================================================
   Fundo de "O que fazemos?": imagem espelhada + brilho rosa
   ========================================================= */
.section--services{
  overflow:hidden;
  isolation:isolate;
}
/* imagem com flip horizontal, para diferenciar das outras seções que usam a mesma arte */
.section--services::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:url("../img/bg-criattus-agencia-digital-001.webp") center / cover no-repeat;
  transform:scaleX(-1);
  opacity:.65;
  pointer-events:none;
}
/* o brilho fica acima da imagem */
.section--services::after{
  content:"";
  position:absolute;
  z-index:-1;
  top:-38%;left:50%;
  width:min(1300px,130vw);
  aspect-ratio:1;
  transform:translateX(-50%);
  translate:var(--gtx,0px) var(--gty,0px);
  border-radius:50%;
  background:radial-gradient(circle,rgba(237,20,91,.22) 0%,rgba(237,20,91,.10) 34%,transparent 64%);
  filter:blur(120px);
  pointer-events:none;
  animation:glowPulse 16s ease-in-out infinite alternate;
}
@keyframes glowPulse{
  from{scale:1}
  to{scale:1.14}
}

/* =========================================================
   Seção de números com imagem de fundo
   ========================================================= */
.section--stats-media{
  overflow:hidden;
  isolation:isolate;
  border-block:1px solid var(--line);
}
.stats__bg{
  position:absolute;
  inset:0;
  z-index:-1;
  background:url("../img/bg-criattus-agencia-digital-001.webp") center right / cover no-repeat;
}
/* véu: mantém a leitura do título e dos números sobre a foto */
.stats__bg::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,11,13,.72) 0%,rgba(11,11,13,.44) 45%,rgba(11,11,13,.78) 100%);
}

/* cabeçalho centralizado */
.section__head--center{
  max-width:640px;
  margin-inline:auto;
  text-align:center;
  margin-bottom:var(--head-gap);
}
.section__head--center .h2{margin-bottom:0}

/* sobre a foto o card fica translúcido, deixando a imagem aparecer */
.section--stats-media .stats{
  background:
    radial-gradient(90% 140% at 0% 0%,rgba(237,20,91,.14),transparent 55%),
    rgba(17,17,20,.55);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-color:var(--line-strong);
}

/* =========================================================
   Linhas conectando os números
   ========================================================= */
.stats--linked .stat{
  position:relative;
  padding-bottom:32px;
}
/* trecho de linha que atravessa o vão até o próximo número */
.stats--linked .stat::before{
  content:"";
  position:absolute;
  bottom:8px;left:0;right:-24px;
  height:1px;
  background:linear-gradient(90deg,var(--pink),rgba(237,20,91,.22));
}
.stats--linked .stat:last-child::before{
  right:0;
  background:linear-gradient(90deg,var(--pink),transparent);
}
/* nó sobre a linha */
.stats--linked .stat::after{
  content:"";
  position:absolute;
  bottom:3.5px;left:0;
  width:10px;height:10px;
  border-radius:50%;
  background:var(--pink);
  box-shadow:0 0 0 5px rgba(237,20,91,.16);
}

@media (max-width:640px){
  .stats--linked .stat{padding-bottom:26px}
  .stats--linked .stat::before{right:0;background:linear-gradient(90deg,var(--pink),transparent)}
}

/* =========================================================
   Seções claras — alternância com as escuras
   Só redefine tokens: os componentes seguem os mesmos.
   ========================================================= */
.section.section--light,
.page-hero.section--light,
.shot.section--light{
  /* Sobre fundo claro o rosa da marca cai para 3.94:1. Redefinir o token aqui
     faz todo o rosa dentro da seção (texto, ícones, botão) resolver para o tom
     aprofundado — 5.26:1 — sem tocar em nenhum componente. */
  --pink:var(--pink-strong);
  --text:#232326;
  --muted:rgba(35,35,38,.68);
  /* .48 dava 2.91:1 — a pior reprovação do site. .64 leva a 4.61:1. */
  --muted-2:rgba(35,35,38,.64);
  --line:rgba(35,35,38,.11);
  --line-strong:rgba(35,35,38,.22);
  --surface:#ffffff;
  --surface-2:#f1f1f3;
  --surface-fade:rgba(255,255,255,.45);
  --surface-fade-2:rgba(241,241,243,.7);
  --soft:rgba(35,35,38,.045);
  --contrast:#232326;
  --contrast-fg:#ffffff;
  --display-hi:#232326;
  --display-lo:var(--pink);

  background:#f4f4f6;
  color:var(--text);
  border-block:1px solid rgba(35,35,38,.09);
}

/* Tira os filetes de topo e base da seção.

   Mora aqui, e não junto dos outros modificadores de .section, por causa da
   ordem: o filete é pintado duas vezes — pelo componente (.section--work) e de
   novo pelo tema claro logo acima, que empata em especificidade com este
   seletor. Declarado antes, perdia para o tema; declarado depois dele, ganha
   dos dois. A classe dobrada cobre o componente. */
.section.section--noline{border-block:0}

/* o texto padrão das seções herda o token certo */
.section--light p{color:var(--muted)}

.section--light .lead{color:rgba(35,35,38,.86)}
.section--light .prose .lead{color:rgba(35,35,38,.88)}

/* cards ganham uma sombra suave no claro (no escuro o contraste vem da borda) */
.section--light .service,
.section--light .work__item,
.section--light .badge,
.section--light .crosslink,
.section--light .faq__item,
.section--light .pillar,
.section--light .stats,
.section--light .svc__links,
.section--light .invite{
  box-shadow:0 2px 4px -2px rgba(35,35,38,.07),0 12px 28px -20px rgba(35,35,38,.22);
}
.section--light .work__item:hover{box-shadow:0 24px 48px -28px rgba(35,35,38,.4)}

/* =========================================================
   Acento sobre superfície elevada
   Segue o mesmo mecanismo do tema claro: redefine o token no escopo em vez de
   reescrever componente. Todo bloco elevado escuro passa a resolver var(--pink)
   para o tom erguido, e com isso .service__go, .service__num, .pillar__label, o
   FAQ aberto, o item atual do submenu e os crosslinks saem de 3.88–4.36:1 para
   a faixa dos 5:1 sem que nenhuma regra de componente mude.
   ========================================================= */
.service,.work__item,.badge,.crosslink,.faq__item,.pillar,
.stats,.svc__links,.invite,.subnav{
  --pink:var(--pink-lift);
}

/* Dentro de seção clara o card volta a ser branco, então o acento tem de
   escurecer de novo — o erguido reprovaria sobre branco. */
.section--light :is(.service,.work__item,.badge,.crosslink,
.faq__item,.pillar,.stats,.svc__links,.invite){
  --pink:var(--pink-strong);
}

/* Exceção: os badges escuros que vivem dentro de uma seção clara. O contêiner
   .badges--dark já devolve os tokens escuros; o card continua elevado, então
   aqui vale o erguido — nem o profundo da regra acima, nem o #ed145b. */
.section--light .badges--dark .badge{--pink:var(--pink-lift)}
.section--light .btn--ghost{border-color:rgba(35,35,38,.28)}

/* a sobreposição escura das capas de projeto continua — garante leitura do título */
.section--light .work__media::after{background:linear-gradient(to top,rgba(11,11,13,.6),transparent 55%)}

/* ícone de serviço no claro */
.section--light .service__icon{border-color:rgba(35,35,38,.14)}

/* números: gradiente escuro → rosa */
.section--light .stat__num em{-webkit-text-fill-color:var(--pink)}

/* cards escuros dentro de uma seção clara — volta a apontar os tokens do tema dark */
.section--light .badges--dark{
  /* volta ao rosa vivo: o fundo aqui é escuro de novo */
  --pink:#ed145b;
  --text:#f4f4f5;
  --muted:rgba(244,244,245,.60);
  --muted-2:rgba(244,244,245,.48);
  --line:rgba(255,255,255,.085);
  --line-strong:rgba(255,255,255,.16);
  --surface:#161619;
  --surface-2:#1d1d21;
  --surface-fade:rgba(17,17,20,.5);
  --surface-fade-2:rgba(29,29,33,.4);
  color:var(--text);
}
.section--light .badges--dark .badge{
  box-shadow:0 4px 10px -6px rgba(35,35,38,.35),0 18px 40px -26px rgba(35,35,38,.5);
}

/* seções escuras adjacentes não precisam de borda dupla */
.section--light + .section--light{border-top:0}

/* =========================================================
   Responsivo
   ========================================================= */
@media (max-width:960px){
  .about__grid{grid-template-columns:1fr}
  .footer__top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer__brand{grid-column:1/-1}
}

@media (max-width:880px){
  :root{--rev-x:26px;--rev-x-lg:34px}
}

@media (max-width:880px){
  .burger{display:block}
  .header__actions{margin-left:auto}
  .nav{
    position:fixed;inset:0;
    z-index:-1;
    display:flex;flex-direction:column;
    /* Era justify-content:center. Num aparelho baixo (360x640) com o submenu de
       Serviços aberto, a lista estourava a altura e — no flex centrado — o
       excesso vazava para fora dos dois lados, sem alcance nem com rolagem.
       Com flex-start + margin automática a lista continua centrada quando sobra
       espaço e passa a rolar normalmente quando falta. */
    justify-content:flex-start;
    overflow-y:auto;
    overscroll-behavior:contain;
    gap:32px;
    margin:0;
    padding:110px var(--gutter) calc(48px + env(safe-area-inset-bottom));
    background:var(--ink);
    clip-path:circle(0% at calc(100% - 46px) 46px);
    transition:clip-path .75s var(--ease);
    pointer-events:none;
  }
  .nav__list{margin-block:auto}
  .nav.is-open{
    clip-path:circle(150% at calc(100% - 46px) 46px);
    pointer-events:auto;
  }
  .nav__list{flex-direction:column;align-items:flex-start;gap:var(--sp-2);width:100%}
  .nav__list li{width:100%;opacity:0;transform:translateY(18px)}
  .nav.is-open .nav__list li{
    opacity:1;transform:none;
    transition:opacity .5s var(--ease) calc(.18s + var(--i,0)*.06s),transform .6s var(--ease) calc(.18s + var(--i,0)*.06s);
  }
  .nav__link{
    padding:14px 0;
    font-size:1.7rem;
    font-weight:500;
    letter-spacing:-.03em;
    color:var(--text);
    border-radius:0;
  }
  .nav__link::before{display:none}
  .nav__link.is-current{color:var(--pink)}
  .nav__link.is-current::after{display:none}
  .nav__foot{
    display:block;
    padding-top:26px;
    border-top:1px solid var(--line);
    width:100%;
  }
  /* o CTA ocupa a largura toda do menu: alvo generoso e alinhado com a lista */
  .nav__foot .btn{width:100%}
}

@media (max-width:640px){
  .hero{min-height:auto}
  .hero__cta{margin-bottom:42px}
  .hero__cta .btn{width:100%}
  .cta__actions .btn{width:100%}
  /* o selo do Google acompanha a largura dos botões acima, senão fica uma
     pastilha estreita e solta sob dois blocos de largura total */
  .hero__proof{width:100%}
  .hero__proof .rating{display:flex;width:100%;justify-content:center}
  .section__head--split{align-items:flex-start}
  .footer__top{grid-template-columns:1fr}
  .work__meta{flex-direction:column;gap:var(--sp-2)}
  .stats{gap:var(--sp-6)}
}

/* =========================================================
   Celular deitado — a tela vira uma faixa larga e baixa
   O gatilho é a ALTURA, não a largura: em paisagem um telefone tem largura de
   tablet e escapava de todas as regras anteriores. Medido em 844x390, o hero
   ocupava 811px — 2,1 telas — e a primeira dobra mostrava só o cabeçalho e
   metade do título, sem nenhum botão à vista.

   Precisa vir depois do bloco de 640px acima: naquela faixa os botões viram
   largura total e empilham, o que num formato baixo é justamente o contrário
   do que se quer. Aqui sobra largura e falta altura, então eles voltam a ficar
   lado a lado e o respiro vertical encolhe.
   ========================================================= */
@media (orientation:landscape) and (max-height:520px){
  .hero{
    min-height:auto;
    padding-top:calc(var(--header-h) + 20px);
    padding-bottom:28px;
  }
  .hero__title{
    font-size:clamp(1.6rem,1rem + 2.4vw,2.4rem);
    margin-bottom:var(--sp-3);
    max-width:26ch;
  }
  .hero .eyebrow{margin-bottom:var(--sp-3)}
  .hero__lead{margin-bottom:var(--sp-4);max-width:70ch}
  .hero__cta{margin-bottom:var(--sp-4);flex-wrap:nowrap}

  /* desfaz o empilhamento em largura total herdado da faixa de 640px */
  .hero__cta .btn{width:auto}
  .hero__proof{width:auto}
  .hero__proof .rating{display:inline-flex;width:auto}

  /* o mesmo aperto nos banners das páginas internas — a capa acompanha o
     padding apertado daqui, senão sobraria o único vão largo da tela deitada */
  .page-hero{--page-hero-pt:calc(var(--header-h) + 24px);padding-bottom:32px;--svc-cover-gap:32px}
  .page-hero__title{font-size:clamp(1.6rem,1rem + 2.4vw,2.4rem);margin-bottom:12px}
  .crumbs{margin-bottom:var(--sp-3)}
}


/* =========================================================
   Submenu do header
   ========================================================= */
.nav__item--sub{position:relative}
.nav__item--sub .nav__link{display:flex;align-items:center;gap:var(--sp-2)}

/* o pai do submenu é <button>: não navega, só abre a lista */
.nav__link--parent{
  /* Nada de `font:inherit` aqui. O atalho reescreve também o font-size, e como
     esta regra vem depois da media query do menu mobile, ela apagava o 1.7rem
     de .nav__link e deixava só o "Serviços" em 16px, menor que os vizinhos.
     A tipografia toda já vem de .nav__link; ao <button> falta apenas o
     line-height, que por padrão é `normal` em vez de herdar. */
  line-height:inherit;
  border:0;
  background:none;
  cursor:pointer;
  text-align:left;
  width:auto;
}

.nav__caret{
  width:8px;height:8px;flex:none;
  border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform .4s var(--ease);
  opacity:.75;
}
.nav__item--sub:hover .nav__caret,
.nav__item--sub:focus-within .nav__caret{transform:translateY(1px) rotate(225deg)}

.subnav__toggle{display:none}

.subnav{
  position:absolute;
  top:100%;left:50%;
  transform:translate(-50%,10px);
  min-width:246px;
  padding:8px;
  margin-top:var(--sp-3);
  border:1px solid var(--line-strong);
  border-radius:16px;
  background:rgba(17,17,20,.94);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  box-shadow:0 26px 60px -28px rgba(0,0,0,.95);
  opacity:0;visibility:hidden;
  pointer-events:none;
  transition:opacity .35s var(--ease),transform .45s var(--ease),visibility .35s var(--ease);
  z-index:10;
}
/* ponte invisível para o mouse não perder o hover no vão */
.subnav::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}

.nav__item--sub:hover .subnav,
.nav__item--sub:focus-within .subnav{
  opacity:1;visibility:visible;
  pointer-events:auto;
  transform:translate(-50%,0);
}

.subnav a{
  display:block;
  padding:10px 14px;
  border-radius:10px;
  font-family:var(--font-display);
  font-size:.88rem;
  font-weight:500;
  color:var(--muted);
  white-space:nowrap;
  transition:color .3s var(--ease),background .3s var(--ease);
}
.subnav a:hover{color:var(--text);background:rgba(255,255,255,.07)}
.subnav a[aria-current]{color:var(--pink)}

.svc__links{
  padding:clamp(21px,4.4vw,26px) clamp(22px,4.6vw,28px);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--surface);
}
/* O rótulo miúdo em versalete fazia o cartão de links parecer rodapé ao lado do
   convite. Agora ele repete o título do vizinho — mesmo corpo, mesmo peso, mesma
   entrelinha, mesmo recuo — e os dois cartões passam a ler como um par. */
.svc__links .svc__links-title{
  font-size:clamp(1.28rem,1.1rem + .9vw,1.72rem);
  font-weight:700;
  letter-spacing:-.022em;
  line-height:1.18;
  color:var(--text);
  margin-bottom:clamp(22px,3.4vw,30px);
}
.svc__links ul{display:grid;gap:var(--sp-1)}
.svc__links a{
  display:block;
  padding:9px 0;
  font-size:.94rem;
  color:var(--muted);
  transition:color .3s var(--ease),padding-left .35s var(--ease);
}
.svc__links a:hover{color:var(--pink);padding-left:8px}

/* =========================================================
   Página de serviço — trilho fixo + coluna de leitura
   A referência de grade separa dois papéis: à esquerda um índice curto que
   fica parado enquanto se lê, à direita a coluna que corre. O trilho responde
   "o que eu recebo"; a coluna responde "como e por quê". Nenhum dos dois
   precisa de card: a hierarquia sai de escala, filete e espaço.
   ========================================================= */

/* ---------- Mídia das páginas de serviço ---------- */
/* A capa mora dentro do banner, logo abaixo do par título/descrição: ela é o
   fecho da apresentação, não uma seção à parte. O respiro que a separa do texto
   pertence ao bloco que vem antes — e é nele, e não na descrição, porque a
   descrição agora está centrada na altura do título: uma margem embaixo dela
   deslocaria esse centro. A figura não carrega margem nenhuma, e assim nasce
   exatamente na largura da coluna, alinhada ao grid. */
.page-hero--cover .page-hero__headline{margin-bottom:var(--svc-cover-gap)}


.svc-figure{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:var(--surface-2);
}
/* Sem borda e sem preenchimento: qualquer um dos dois recuaria a imagem em
   relação ao texto acima e abaixo dela, que é o desalinhamento que se via. */
.svc-figure img{width:100%;height:100%;object-fit:cover}
/* a fotografia do sistema é preto e branco — o único colorido é o acento */
.svc-figure--wide img{filter:grayscale(1) contrast(1.04)}
.svc-figure--wide{aspect-ratio:21/9}
/* Chapa preta a 50% sobre a capa: ela recua para trás do título em vez de
   disputar atenção com ele. Vai como camada, e não como brightness no filtro,
   para a dose ficar ajustável sem mexer no preto e branco. O overflow:hidden e
   o raio do .svc-figure já recortam a chapa junto com a foto. */
.svc-figure--wide::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.5);
  pointer-events:none;
}
/* ilustração de linha: `contain` já reserva a folga dela, sem recuo aplicado */
.svc-figure--art{aspect-ratio:16/10}
.svc-figure--art img{object-fit:contain}
/* Na pagina de projeto o slot recebe uma peca de bordas cheias, e nao uma
   ilustracao de fundo transparente. Com contain sobra um filete do painel
   acima e abaixo dela, que le como falha de recorte em vez de respiro. */
.svc-figure--art.svc-figure--bleed img{object-fit:cover}

@media (max-width:760px){
  .svc-figure--wide{aspect-ratio:4/3}
  .svc-figure--art{aspect-ratio:4/3}
}

/* ---------- A grade de dois papéis ---------- */
.svc-grid{
  display:grid;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.62fr);
  gap:clamp(32px,6vw,104px);
  align-items:start;
}
/* Página de projeto: a leitura abre à esquerda e o índice do que foi entregue
   acompanha à direita. Numa interna de serviço a pergunta "o que eu recebo"
   vem antes de tudo, e por isso o trilho abre a grade; num projeto o que já
   foi feito é o argumento, e a lista passa a ser a referência ao lado dele.
   As colunas só trocam de largura — a ordem do DOM acompanha a ordem visual,
   com o corpo antes do trilho, para teclado e leitor de tela lerem na mesma
   sequência que o olho. */
.svc-grid--flip{grid-template-columns:minmax(0,1.62fr) minmax(0,.86fr)}

.svc-rail{position:sticky;top:calc(var(--header-h) + 34px)}
.svc-rail__title{
  font-size:var(--svc-h);
  font-weight:700;
  letter-spacing:-.024em;
  line-height:1.06;
  margin:0 0 clamp(20px,2.6vw,28px);
}

/* índice numerado: filete por linha, numeral tabular para a coluna não dançar */
.deliver{counter-reset:d;display:grid;margin:0;padding:0;list-style:none}
.deliver li{
  counter-increment:d;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:var(--sp-4);
  align-items:baseline;
  padding:15px 0;
  border-bottom:1px solid var(--line);
  font-size:.98rem;
  line-height:1.4;
  color:var(--text);
}
.deliver li:first-child{border-top:1px solid var(--line)}
.deliver li::before{
  content:counter(d,decimal-leading-zero);
  font-family:var(--font-display);
  font-size:.8rem;
  font-weight:500;
  font-variant-numeric:tabular-nums;
  color:var(--muted-2);
}

/* nota de rodapé do índice — corpo menor, para não competir com a lista */
.svc-rail .deliver__note{
  margin:var(--sp-5) 0 0;
  font-size:.88rem;
  line-height:1.6;
  color:var(--muted-2);
  max-width:34ch;
}

/* ---------- A coluna de leitura ---------- */
.svc-body > *:first-child{margin-top:0}
.svc-body p{color:var(--muted);line-height:1.72;max-width:68ch}

/* Link dentro de texto corrido.
   O `a` global é `color:inherit;text-decoration:none`, o que funcionava enquanto
   todo link do site era botão, card ou item de menu. As páginas de prosa
   (contato, política de privacidade, páginas locais) trouxeram o primeiro link
   no meio de frase — e ali ele ficava indistinguível do texto ao redor, que é
   falha de acessibilidade antes de ser falha de design.
   O sublinhado fica afastado da base da letra para não cortar os descendentes
   de g, p e q. */
.svc-body p a,
.svc-body li a,
.svc-body address a{
  color:var(--pink);
  text-decoration:underline;
  text-underline-offset:.18em;
  text-decoration-thickness:1px;
}
.svc-body p a:hover,
.svc-body li a:hover{color:var(--text);text-decoration-thickness:2px}

/* O navegador desenha <address> em itálico. Aqui ele carrega o endereço da
   empresa, que é dado e não ênfase. */
.svc-body address{font-style:normal;color:var(--muted);line-height:1.72;margin:0}
.svc-body .lead{
  font-size:clamp(1.05rem,.98rem + .35vw,1.28rem);
  line-height:1.6;
}
.svc-body__h{
  font-size:var(--svc-h);
  font-weight:700;
  letter-spacing:-.024em;
  line-height:1.08;
  margin:var(--svc-block-gap) 0 .55em;
}
.svc-body__h:first-child{margin-top:0}
/* linha de apoio logo sob o título de bloco, antes da lista */
.svc-body__sub{margin-bottom:0 !important;max-width:64ch}
.svc-body > .svc-figure{margin-top:var(--svc-media-gap)}

/* lista de argumentos: rótulo em peso cheio, explicação em corpo */
.reasons{display:grid;gap:var(--sp-4);margin:1.7em 0 0;padding:0;list-style:none}
.reasons li{
  position:relative;
  padding-left:23px;
  color:var(--muted);
  line-height:1.7;
}
.reasons li::before{
  content:"";
  position:absolute;left:2px;top:.66em;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--pink);
}
.reasons strong{color:var(--text);font-weight:700}

/* etapas: o numeral é fantasma e vive fora do texto, sem moldura de card */
.flow{
  counter-reset:f;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(255px,100%),1fr));
  gap:clamp(28px,4vw,42px) clamp(28px,4vw,48px);
  margin:1.9em 0 0;
  padding:0;
  list-style:none;
}
.flow li{
  counter-increment:f;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:var(--sp-4);
}
.flow li::before{
  content:counter(f);
  font-family:var(--font-display);
  font-size:clamp(1.45rem,1.2rem + 1vw,1.95rem);
  font-weight:700;
  line-height:1;
  letter-spacing:-.02em;
  color:var(--muted-2);
  opacity:.5;
}
.flow h3{font-size:1.06rem;font-weight:700;letter-spacing:-.02em;margin:0 0 8px}
.flow p{margin:0;font-size:.95rem;line-height:1.65;max-width:42ch}

/* especificações: mesma grade das etapas, separada por filete em vez de numeral */
.spec{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(255px,100%),1fr));
  gap:0 clamp(28px,4vw,48px);
  margin:1.9em 0 0;
  padding:0;
  list-style:none;
}
.spec li{padding:22px 0;border-top:1px solid var(--line)}
.spec h3{font-size:1.04rem;font-weight:700;letter-spacing:-.02em;margin:0 0 8px}
.spec p{margin:0;font-size:.95rem;line-height:1.65}

/* ---------- Convite: o bloco de conversão sai da barra e ganha largura ---------- */
.svc-invite{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,.85fr);
  gap:clamp(20px,3vw,32px);
  margin-top:var(--section-y);
  align-items:stretch;
}
.invite{
  padding:clamp(30px,5vw,44px) clamp(26px,4.6vw,40px);
  border:1px solid rgba(237,20,91,.3);
  border-radius:var(--radius-lg);
  background:
    radial-gradient(90% 130% at 100% 0%,rgba(237,20,91,var(--invite-wash,.16)),transparent 60%),
    linear-gradient(150deg,var(--surface),var(--surface-fade));
}
/* O mesmo véu magenta que sobre grafite é sutil empurra o papel para #f3d0dd,
   e aí o rótulo em Magenta Profundo cai para 4.1:1 — reprova o AA. No claro o
   véu entra mais fino: o efeito permanece e o texto volta a passar. */
.section--light .invite{--invite-wash:.07}
.invite .invite__label{
  font-family:var(--font-display);
  font-size:.72rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--pink);
  margin-bottom:var(--sp-4);
}
.invite .invite__title{
  font-size:clamp(1.28rem,1.1rem + .9vw,1.72rem);
  font-weight:700;
  letter-spacing:-.022em;
  line-height:1.18;
  margin:0 0 clamp(24px,3.4vw,32px);
  max-width:24ch;
  color:var(--text);
}
.invite__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4) var(--sp-6)}
/* a lista lateral acompanha a altura do convite ao lado */
.svc-invite .svc__links{align-self:stretch}

@media (max-width:900px){
  .svc-grid{grid-template-columns:1fr;gap:clamp(38px,7vw,54px)}
  .svc-rail{position:static}
  /* Colapsada em uma coluna, a grade invertida devolve o trilho para o topo:
     no celular a lista de entregas continua sendo a melhor abertura, como nas
     internas de serviço. */
  .svc-grid--flip .svc-rail{order:-1}
  .svc-invite{grid-template-columns:1fr}
}

/* =========================================================
/* links cruzados entre serviços */
.crosslinks{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));
  gap:var(--sp-4);
  margin:1.4em 0 0;
}
.crosslink{
  display:block;
  padding:clamp(21px,4.4vw,26px) clamp(19px,4vw,24px);
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(150deg,var(--surface),var(--surface-fade));
  transition:transform .5s var(--ease),border-color .4s var(--ease);
}
.crosslink:hover{transform:translateY(-5px);border-color:rgba(237,20,91,.4)}
.crosslink h3{
  font-size:1.05rem;font-weight:700;
  letter-spacing:-.02em;
  margin-bottom:var(--sp-2);
  transition:color .35s var(--ease);
}
.crosslink:hover h3{color:var(--pink)}
.crosslink p{margin:0 0 var(--sp-4);font-size:.92rem;color:var(--muted);line-height:1.6}
.crosslink__go{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  font-family:var(--font-display);
  font-size:.83rem;font-weight:500;
  color:var(--pink);
}
.crosslink__go::after{
  content:"";
  width:6px;height:6px;
  border-right:1.6px solid currentColor;
  border-top:1.6px solid currentColor;
  transform:rotate(45deg);
  transition:transform .4s var(--ease);
}
.crosslink:hover .crosslink__go::after{transform:rotate(45deg) translate(3px,-3px)}

/* "Ver serviço" nos cards do índice */
.service__go{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  margin-top:var(--sp-5);
  font-family:var(--font-display);
  font-size:.83rem;font-weight:500;
  color:var(--pink);
  opacity:0;
  transform:translateY(6px);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.service__go::after{
  content:"";
  width:6px;height:6px;
  border-right:1.6px solid currentColor;
  border-top:1.6px solid currentColor;
  transform:rotate(45deg);
}
.service:hover .service__go,
.service:focus-visible .service__go{opacity:1;transform:none}


/* =========================================================
   Responsivo — submenu
   ========================================================= */

@media (max-width:880px){
  /* no menu mobile o submenu abre/fecha por botão */
  .nav__caret{display:none}

  /* O "+" divide a linha com "Serviços" em vez de flutuar sobre ela. Com
     position:absolute e top:6px o alinhamento era um número medido no olho, e
     o botão parava 8px acima do centro do rótulo — a caixa do link tem 73px de
     altura e a do botão 44px, então o recuo certo era 14.5px, não 6px. Pior:
     qualquer mudança no corpo ou no padding do menu reabria o desvio.
     Como linha flex, o rótulo toma a sobra, o botão se centra por
     align-items e o submenu quebra para a linha de baixo. O alinhamento passa
     a ser uma relação, e não uma medida a manter. */
  .nav__item--sub{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
  }
  .nav__item--sub .nav__link--parent{flex:1 1 auto}

  .subnav__toggle{
    display:block;
    /* relative, e nao static: as duas hastes do "+" sao ::before/::after
       ancorados em 50%/50%, e sem um bloco de contencao proprio elas sobem
       para o .nav__item--sub e desenham o sinal no meio da linha inteira,
       fora do botao. */
    position:relative;
    flex:none;
    width:44px;height:44px;
    border:1px solid var(--line-strong);
    border-radius:12px;
    z-index:2;
  }
  .subnav__toggle::before,
  .subnav__toggle::after{
    content:"";
    position:absolute;top:50%;left:50%;
    background:var(--text);
    border-radius:2px;
    transform:translate(-50%,-50%);
    transition:transform .4s var(--ease),opacity .3s var(--ease);
  }
  .subnav__toggle::before{width:13px;height:1.6px}
  .subnav__toggle::after{width:1.6px;height:13px}
  .subnav__toggle[aria-expanded="true"]{border-color:rgba(237,20,91,.5);background:rgba(237,20,91,.12)}
  .subnav__toggle[aria-expanded="true"]::after{transform:translate(-50%,-50%) scaleY(0);opacity:0}

  .subnav{
    position:static;
    transform:none;
    min-width:0;
    width:100%;
    flex-basis:100%;
    margin:0;
    padding:0 0 0 16px;
    border:0;
    border-left:1px solid var(--line-strong);
    border-radius:0;
    background:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    box-shadow:none;
    opacity:1;visibility:visible;
    pointer-events:auto;
    display:none;
  }
  .subnav::before{display:none}
  .nav__item--sub:hover .subnav,
  .nav__item--sub:focus-within .subnav{transform:none}
  .subnav.is-open{display:block}

  .subnav a{
    padding:11px 0;
    font-size:1.02rem;
    border-radius:0;
  }
  .subnav a:hover{background:none;color:var(--pink)}
}



/* =========================================================
   Página de projeto: capa em cor plena e faixas de imagem

   A página de serviço e a de projeto compartilham o mesmo esqueleto — banner
   com capa, trilho fixo e coluna de leitura —, e só divergem no que a imagem
   significa. Na de serviço a fotografia é atmosfera, então entra em preto e
   branco sob uma chapa, pela regra do acento único. Na de projeto a imagem
   É o argumento: é o trabalho entregue, com a paleta do cliente dentro dela.
   Dessaturar ali não seria disciplina de sistema, seria apagar a prova.
   ========================================================= */
.page-hero--work .svc-figure--wide img{filter:none}
.page-hero--work .svc-figure--wide::after{display:none}
/* 16/9 em vez de 21/9: a capa é a mesma arte do mosaico, e a faixa panorâmica
   cortaria a peça que a miniatura mostra inteira. */
.page-hero--work .svc-figure--wide{aspect-ratio:16/9}

/* ---------- Faixas de imagem ----------
   Uma faixa por imagem, e cada faixa troca a superfície dentro da paleta —
   ink-2, claro, superfície, ink. A cor é o que separa um capítulo do outro:
   sem ela, quatro imagens de 16/9 empilhadas viram uma lista, e o olho para
   de contar. A sequência termina no grafite mais fundo porque o que vem
   depois é o bloco magenta do CTA, e o degrau escuro é o que o acende.

   O respiro vertical é o mesmo --section-y de toda faixa do site, então a
   página de projeto entra no ritmo das outras sem exceção própria. */
/* Todas as faixas no grafite padrão da página. Sem respiro vertical elas se
   encostam e as imagens formam uma coluna contínua; o fundo só aparece na
   calha do container, e um fundo só ali significa que nada compete com a
   peça. A alternância de superfície que existia aqui virava um trilho
   listrado ao lado das imagens — mais desenho do que suporte. */
.shot{
  position:relative;
  padding:0;
  /* o recorte contém o curso lateral da entrada */
  overflow:hidden;
  background:var(--ink);
}

.shot__figure{margin:0}
/* A entrada é lateral e alternada: a primeira faixa desliza da esquerda, a
   seguinte da direita, e assim por diante. O eixo vertical fica de fora — com
   as imagens encostadas, os 26px de subida do reveal padrão faziam a peça
   passar por cima da faixa de baixo e abrir um filete da cor de cima, e o
   movimento aparecia como falha de encaixe. No eixo horizontal não há vizinho
   para atropelar: cada faixa corre dentro da própria altura.
   O curso é uma vez e meia o da ilustração das feature-rows — a peça aqui é
   larga demais para que 88px leiam como direção, e não como tremor. O .shot
   recorta o que sobra para que o deslocamento nunca vire rolagem lateral. */
.shot__figure.reveal{
  --ry:0px;
  --rx:calc(var(--rev-x-lg) * 1.5);
  transition-duration:1s;
}
.shot__figure--from-left.reveal{--rx:calc(var(--rev-x-lg) * -1.5)}
.shot__figure--from-right.reveal{--rx:calc(var(--rev-x-lg) * 1.5)}
/* A moldura manda na proporção, e não o arquivo: a imagem do cliente pode
   chegar em qualquer tamanho sem mover uma linha do layout, e não há salto de
   carregamento porque a altura já está reservada. */
.shot__media{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--surface-2);
}
.shot__media img{
  display:block;
  width:100%;height:100%;
  object-fit:cover;
}
/* Do tablet para baixo a imagem vai de ponta a ponta. É o mesmo limiar em que
   a grade do corpo colapsa em uma coluna: dali para baixo a calha lateral vira
   margem morta, e a peça ganha mais do único eixo que ainda sobra, a largura.
   O recuo lateral sai junto com o max-width — deixar só um dos dois centraria
   a imagem numa faixa mais estreita que a tela. */
@media (max-width:900px){
  .shot .container{max-width:none;padding-left:0;padding-right:0}
}

@media (max-width:760px){
  /* 16/9 em 390px devolve uma tira de 197px: a tela do cliente vira ilegível.
     4/3 é o mesmo recurso que a capa das internas de serviço já usa. */
  .shot__media{aspect-ratio:4/3}
}


/* =========================================================
   Resultado medido, na página de projeto

   O bloco existe para que o número NUNCA apareça sozinho: a fonte e a ressalva
   moram dentro da mesma caixa, com a mesma borda. Separá-las visualmente
   permitiria a alguém recortar o número e publicar sem o contexto que o torna
   verdadeiro — que é exatamente a diferença entre case e promessa.
   ========================================================= */
.resultado{
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  background:var(--surface-2);
  padding:var(--card-p) var(--card-px);
  margin:var(--sp-6) 0;
}
.resultado__titulo{
  margin:0 0 var(--sp-5);
  font-family:var(--font-display);
  font-size:1rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
}
.resultado__lista{
  display:grid;
  gap:var(--sp-4);
  margin:0 0 var(--sp-5);
}
@media (min-width:620px){
  .resultado__lista{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5) var(--sp-6)}
}
.resultado__item dt{
  font-size:.8125rem;
  color:var(--muted);
  margin-bottom:2px;
}
.resultado__item dd{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(1.25rem,.9rem + 1.1vw,1.6rem);
  font-weight:700;
  line-height:1.15;
  color:var(--text);
}
.resultado__fonte,
.resultado__ressalva{
  margin:0;
  font-size:.8125rem;
  line-height:1.6;
  color:var(--muted);
}
.resultado__fonte{margin-bottom:var(--sp-3)}
.resultado__ressalva{color:var(--muted-2)}

/* Texto só para leitor de tela. `display:none` e `visibility:hidden` tirariam
   o elemento da árvore de acessibilidade junto com o visual — o recorte de 1px
   com clip-path mantém o texto anunciado e fora da tela. */
.u-vh{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  clip-path:inset(50%);
  overflow:hidden;
  white-space:nowrap;
}

/* Horário de funcionamento, na página de contato. Duas colunas que colapsam
   em uma só quando não há largura. */
.horarios{
  border-collapse:collapse;
  margin:0 0 1em;
  font-size:.9375rem;
}
.horarios th,
.horarios td{
  text-align:left;
  padding:6px 0;
  vertical-align:baseline;
}
.horarios th{
  font-weight:500;
  padding-right:var(--sp-6);
  white-space:nowrap;
}
.horarios td{color:var(--muted)}

/* =========================================================
   Formulário de qualificação

   Primeiro formulário do site. O tema é escuro, e controle de formulário em
   tema escuro é onde o navegador mais insiste no estilo dele: o `<select>`
   nativo do Windows abre com fundo branco se `color-scheme` não disser o
   contrário — e diz, no `html`, desde o começo.

   Os campos nascem com `font:inherit` porque o padrão do navegador para
   input/select/textarea NÃO herda a fonte do documento: sem isso, o único
   bloco do site em Arial 13px seria justamente aquele onde a pessoa escreve.
   ========================================================= */
.qualifica{
  display:grid;
  gap:var(--svc-media-gap);
  align-items:start;
}
@media (min-width:1000px){
  /* A prévia acompanha a rolagem: a mensagem se monta à vista enquanto os
     campos são preenchidos. É o argumento inteiro da interface — escondê-la
     atrás de uma rolagem devolveria o envio às cegas. */
  .qualifica{grid-template-columns:minmax(0,1fr) minmax(300px,384px);gap:clamp(32px,4vw,56px)}
  .qualifica__envio{position:sticky;top:calc(var(--header-h) + 24px)}
}

.qualifica__campos{display:grid;gap:var(--sp-6)}

.qualifica__passo{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:linear-gradient(150deg,var(--surface),var(--surface-fade));
  padding:var(--card-p) var(--card-px);
  margin:0;
  min-width:0; /* fieldset tem min-width:min-content por padrão e estoura a grade */
  display:grid;
  gap:var(--sp-6);
}
.qualifica__legenda{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:0;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.0625rem;
  letter-spacing:-.01em;
  color:var(--text);
}
.qualifica__num{
  flex:none;
  display:grid;place-items:center;
  width:26px;height:26px;
  border-radius:50%;
  background:var(--pink);
  color:#fff;
  font-size:.8125rem;font-weight:700;
  font-variant-numeric:tabular-nums;
}

.campo{display:grid;gap:var(--sp-2);min-width:0}
.campo__grupo{border:0;padding:0;margin:0;min-width:0;display:grid;gap:var(--sp-2)}
.campo__rotulo{
  display:block;
  padding:0;
  font-weight:500;
  font-size:.9375rem;
  color:var(--text);
}
.campo__opcional{color:var(--muted-2);font-weight:400}
.campo__ajuda{
  margin:0;
  font-size:.8125rem;
  line-height:1.5;
  color:var(--muted);
}

.campo__controle{
  font:inherit;
  font-size:.9375rem;
  width:100%;
  padding:13px 15px;
  color:var(--text);
  background:var(--surface-2);
  border:1px solid var(--line-strong);
  border-radius:12px;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.campo__controle::placeholder{color:var(--muted-2)}
/* Branco a 26% seria invisível sobre o card branco do tema claro. O par de
   declarações segue o mesmo caminho da seta do select. */
.campo__controle:hover{border-color:rgba(255,255,255,.26)}
.section--light .campo__controle:hover{border-color:rgba(35,35,38,.34)}
.campo__controle:focus{outline:0;border-color:var(--pink)}
.campo__controle:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.campo__controle--longo{resize:vertical;min-height:112px;line-height:1.6}

/* A seta nativa do select some junto com `appearance:none`; esta é desenhada
   em fundo, para o controle ficar igual ao input ao lado dele.

   A cor vai embutida no data URI, e cor embutida não segue token: no tema
   claro, uma seta #f4f4f5 sobre campo branco simplesmente desaparece. Por isso
   são duas declarações, uma por superfície — o mesmo mecanismo que
   .section--light já usa para o resto da paleta. */
select.campo__controle{
  appearance:none;
  padding-right:44px;
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f4f4f5' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:17px;
}
.section--light select.campo__controle{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23232326' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

.campo__opcoes{display:grid;gap:var(--sp-2)}
@media (min-width:620px){
  .campo__opcoes{grid-template-columns:repeat(2,minmax(0,1fr))}
}

.opcao{
  position:relative;
  display:flex;align-items:flex-start;gap:var(--sp-3);
  padding:13px 15px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--soft);
  cursor:pointer;
  font-size:.9375rem;
  line-height:1.45;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.opcao:hover{border-color:var(--line-strong);background:var(--surface-2)}
/* O input real fica sob a marca desenhada, e não em `display:none`: escondido
   assim ele sairia da ordem de tabulação e o grupo viraria inacessível pelo
   teclado. Opaco a zero, ele continua focável e continua validando. */
.opcao input{
  position:absolute;inset:0;
  width:100%;height:100%;
  margin:0;
  opacity:0;
  cursor:pointer;
}
.opcao__marca{
  flex:none;
  width:18px;height:18px;
  margin-top:2px;
  border:2px solid var(--line-strong);
  border-radius:50%;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.opcao input:checked ~ .opcao__marca{
  border-color:var(--pink);
  box-shadow:inset 0 0 0 4px var(--pink);
}
.opcao:has(input:checked){border-color:var(--pink);background:rgba(237,20,91,.07)}
.opcao:has(input:focus-visible){outline:2px solid var(--pink);outline-offset:2px}
.opcao__texto{min-width:0}

.qualifica__envio{display:grid;gap:var(--sp-4);align-content:start}

.previa{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface-2);
  padding:var(--sp-5);
  display:grid;
  gap:var(--sp-3);
}
.previa__titulo{
  display:flex;align-items:center;gap:var(--sp-2);
  margin:0;
  font-size:.75rem;
  font-weight:500;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--muted);
}
.previa__ponto{
  width:7px;height:7px;border-radius:50%;
  background:#25d366; /* verde do WhatsApp: diz de qual canal é a prévia */
  flex:none;
}
.previa__corpo{
  display:block;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font-size:.875rem;
  line-height:1.65;
  color:var(--text);
  max-height:340px;
  overflow-y:auto;
}
.qualifica__botao{width:100%;justify-content:center}
.qualifica__nota{
  margin:0;
  font-size:.75rem;
  line-height:1.55;
  color:var(--muted-2);
}

/* =========================================================
   Ponteiro grosso (toque) — o que o hover escondia
   No celular não existe hover: tudo que só aparecia nele ficava inacessível.
   ========================================================= */
@media (hover:none),(pointer:coarse){
  /* "Ver serviço" nascia em opacity:0 e só surgia no hover — no toque
     simplesmente nunca aparecia. Aqui ele já entra visível. */
  .service__go{opacity:1;transform:none}

  /* as capas de projeto ficavam permanentemente dessaturadas e escurecidas,
     porque a cor plena só voltava no hover */
  .work__media img{filter:none;transform:none}
  .work__media::after{opacity:.62}

  /* realimentação de toque: sem hover, o estado ativo é o único retorno visual */
  .btn:active{transform:scale(.97)}
  .service:active,.work__item:active,.badge:active,
  .crosslink:active,.pillar:active{transform:translateY(-3px)}
  .filter:active{border-color:var(--pink)}
}

/* =========================================================
   Alvos de toque — mínimo de 44x44px
   ========================================================= */
@media (pointer:coarse){
  /* listas de links do rodapé e da barra lateral de serviços: eram linhas de
     texto de ~22px de altura, metade do alvo mínimo */
  .footer__col ul a,
  .svc__links a,
  .subnav a,
  .crumbs a,
  /* listas de links no corpo (contato, links, 404): mesma altura de linha,
     mesmo problema de alvo pequeno */
  .reasons li > a:only-child{
    min-height:44px;
    display:flex;
    align-items:center;
  }
  /* Link que ocupa o parágrafo inteiro ("Ver no Google Maps", a nota do Google):
     tinha 18px de altura. `:only-child` é o que separa esse caso do link no meio
     de uma frase, onde crescer a caixa quebraria o ritmo da linha. */
  .svc-body p > a:only-child,
  .svc-rail p > a:only-child,
  .svc-body address a{
    display:inline-block;
    padding-block:13px;
  }
  .footer__col ul{gap:var(--sp-3)}
  .svc__links ul{gap:var(--sp-1)}
  .crumbs{gap:var(--sp-3)}

  /* links com seta ("Conheça a agência") tinham 29px de altura */
  .link-arrow{min-height:44px}
  /* Tablet com toque em paisagem mostra a navegação horizontal do desktop — a
     troca para o menu só acontece abaixo de 880px. Ali o dedo encontrava itens
     de 42px. O alvo cresce sem mexer no espaçamento visual do desktop, que
     continua com ponteiro fino. */
  .nav__link{min-height:44px;display:flex;align-items:center}
  /* a logo tem largura de sobra, mas só 31px de altura */
  .logo{display:flex;align-items:center;min-height:44px}
}

/* selos sociais: 42px ficava logo abaixo do mínimo */
.social a{width:44px;height:44px}

/* a barra de filtros encolhia para ~36px de altura justamente no mobile */
.filter{min-height:44px}

/* gestos de toque sem o atraso de 300ms nos elementos interativos */
.btn,.nav__link,.filter,.burger,.subnav__toggle,.faq__q,
.social a,.whatsapp,.link-arrow,.crosslink,a.service{
  touch-action:manipulation;
}

/* =========================================================
   Acessibilidade — movimento reduzido
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .js .reveal{opacity:1;transform:none}
  [data-split] .word > span{transform:none}
  .cursor{display:none}
}

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