/* =========================================================
   Marcelo Barbugiani — Portfólio
   Design tokens e componentes compartilhados entre Home e páginas de case.
   Paleta: ink (#12100E) + paper (#F6F3EC) + acento amber (#FF5A1F / #B23A12 em texto sobre fundo claro).
   Tipografia: Archivo (display) + Inter (corpo).
   ========================================================= */

:root{
  --ink:#12100E;
  --ink-soft:#221F1B;
  --paper:#F6F3EC;
  --paper-dim:#EAE5D8;
  --amber:#FF5A1F;
  --amber-dim:#FFD9C4;
  --amber-ink:#B23A12;
  --line-on-ink: rgba(246,243,236,0.16);
  --line-on-paper: rgba(18,16,14,0.12);
  --space-1:8px; --space-2:16px; --space-3:24px; --space-4:32px;
  --space-5:48px; --space-6:64px; --space-7:96px; --space-8:128px;
  --radius:14px;
  --font-display:'Archivo', sans-serif;
  --font-body:'Inter', sans-serif;
}

*{box-sizing:border-box;}
/* overflow-x:hidden aqui (não em body) evita rolagem horizontal indesejada vinda dos
   truques de "full-bleed" (width:100vw; margin-left:-50vw) usados em .trabalhos-stack,
   sem criar um novo scroll container que quebraria os vários position:sticky do site —
   com <!DOCTYPE html>, o html já é o "root scroller" natural, então isso só reforça o
   comportamento que já existia, não introduz um container novo no meio da árvore. */
html{scroll-behavior:smooth; overflow-x:hidden;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit;}
.container{
  max-width:1180px;
  margin:0 auto;
  padding:0 var(--space-4);
}
section{padding:var(--space-8) 0;}
h1,h2,h3{font-family:var(--font-display); font-weight:900; line-height:1.05; margin:0;}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-weight:700; font-size:13px;
  letter-spacing:0.12em; text-transform:uppercase;
  color:var(--amber-ink); /* AA-safe (5.4:1) on light backgrounds; sections on ink override below */
  margin-bottom:var(--space-3);
}
.eyebrow::before{content:""; width:22px; height:2px; background:var(--amber); display:inline-block;}
.hero .eyebrow, .research .eyebrow, .cta-final .eyebrow, .case-hero .eyebrow, .ia-section .eyebrow{color:var(--amber);}
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--amber); color:var(--ink);
  padding:12px 20px; font-weight:700; z-index:200; border-radius:0 0 8px 0;
}
.skip-link:focus{left:0;}

/* ---------- Header ---------- */
header{
  position:sticky; top:0; z-index:100;
  background:rgba(18,16,14,0.92);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line-on-ink);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--space-4);
  color:var(--paper);
}
.logo{font-family:var(--font-display); font-weight:800; font-size:18px; letter-spacing:-0.01em; text-decoration:none; color:var(--paper);}
.nav-links{display:flex; align-items:center; gap:var(--space-5); list-style:none; margin:0; padding:0;}
.nav-links a{
  text-decoration:none; color:var(--paper); opacity:0.8; font-size:15px; font-weight:500;
}
.nav-links a:hover{opacity:1;}

/* Botão hambúrguer — escondido em telas largas (o menu normal já aparece), vira visível
   no breakpoint mobile (ver bloco Responsive) e alterna pra "X" quando aberto. */
.nav-toggle{
  display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  width:44px; height:44px; padding:0; border:none; background:none; cursor:pointer; flex-shrink:0;
}
.nav-toggle span{display:block; width:22px; height:2px; background:var(--paper); transition:transform .25s ease, opacity .2s ease;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body); font-weight:700; font-size:15px;
  padding:12px 24px; border-radius:999px; text-decoration:none;
  border:1px solid transparent; cursor:pointer; min-height:44px;
  transition:transform 0.15s ease, opacity 0.15s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--amber); color:var(--ink);}
.btn-primary:hover{opacity:0.92;}
.btn-outline-light{border-color:var(--line-on-ink); color:var(--paper);}
.btn-outline-light:hover{background:rgba(246,243,236,0.08);}
.btn-outline-dark{border-color:var(--line-on-paper); color:var(--ink);}
.btn-outline-dark:hover{background:rgba(18,16,14,0.05);}

/* ---------- Hero (Home) ---------- */
.hero{
  background:var(--ink); color:var(--paper);
  padding:var(--space-8) 0 var(--space-7);
}
.hero h1{
  font-size:clamp(36px, 5.6vw, 78px);
  max-width:21ch;
  letter-spacing:-0.02em;
}
.hero-sub{
  max-width:56ch;
  font-size:clamp(17px, 1.6vw, 20px);
  color:rgba(246,243,236,0.82);
  margin:var(--space-4) 0 var(--space-5);
}
.hero-sub strong{color:var(--paper); font-weight:700;}
.hero-ctas{display:flex; flex-wrap:wrap; gap:var(--space-3);}

/* Efeito "zoom 3D" ligado ao scroll — inspirado em codepen.io/argyleink/pen/ZEdrzJZ, reimple-
   mentado em JS puro (assets/hero-zoom.js — nome ficou do primeiro uso, no hero, mas hoje
   cobre também a seção Formação) em vez de animation-timeline (CSS Scroll-driven Animations
   ainda não roda no Firefox). Ao rolar pra baixo, os elementos se afastam da câmera (translateZ
   negativo + sobem um pouco) e desfocam/apagam levemente, cada um numa intensidade diferente
   pra dar sensação de profundidade em camadas. Ao rolar de volta pra cima, como o efeito é
   recalculado a cada frame a partir da posição atual do scroll (não é uma animação "tocada uma
   vez"), os elementos voltam sozinhos pro lugar — sem @keyframes, só a posição de scroll
   ditando o estado visual o tempo todo. .hero-ctas e .formacao-section .section-head precisam
   de preserve-3d pra que o perspective do .container "alcance" botões/título, que são netos
   (não filhos diretos) do .container. Gated por prefers-reduced-motion dentro do próprio JS
   (não aqui), já que sem o script rodando os elementos simplesmente ficam no estado normal. */
.hero .container{perspective:1000px;}
.hero-ctas{transform-style:preserve-3d;}
.hero .eyebrow,
.hero h1,
.hero-sub,
.hero-ctas .btn{
  will-change:transform, opacity, filter;
}

.formacao-section .container{perspective:1000px;}
.formacao-section .section-head{transform-style:preserve-3d;}
.formacao-section .eyebrow,
.formacao-section .section-head h2,
.formacao-section .section-head p,
.formacao-section .formacao-grid,
.formacao-section .uxpm-card{
  will-change:transform, opacity, filter;
}

/* ---------- Credibility strip ---------- */
.strip{
  background:var(--paper-dim); border-top:1px solid var(--line-on-paper);
  padding:var(--space-4) 0 var(--space-6);
}
.strip-label{
  font-size:12px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ink-soft); opacity:0.55; margin:0 0 var(--space-4);
}
/* Logos todos na mesma altura (largura livre, cada um mantém a própria proporção), em
   cinza discreto via filter, numa esteira horizontal contínua ("marquee"): a trilha tem
   o grupo de logos duplicado uma vez, lado a lado, e desliza por -50% da própria largura
   em loop — como as duas metades são idênticas, a transição do fim pro início é invisível.
   Pausa no hover (pra dar tempo de olhar) e desliga a animação em prefers-reduced-motion
   (aí volta a ser uma fileira estática, com o grupo duplicado escondido). */
.strip-logos-wrap{
  overflow:hidden; width:100%;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.strip-logos-track{
  display:flex; width:max-content;
  animation:strip-scroll 36s linear infinite;
}
.strip-logos-wrap:hover .strip-logos-track{animation-play-state:paused;}
.strip-logos-group{
  display:flex; align-items:center; gap:var(--space-6);
  padding-right:var(--space-6);
}
.strip-logos-track img{
  height:26px; width:auto; max-width:120px; object-fit:contain; flex-shrink:0;
  filter:grayscale(1); opacity:0.5;
  transition:opacity .2s, filter .2s;
}
.strip-logos-track img:hover{filter:grayscale(0); opacity:0.9;}
@keyframes strip-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (prefers-reduced-motion: reduce){
  .strip-logos-track{animation:none; flex-wrap:wrap; width:auto;}
  .strip-logos-group[aria-hidden="true"]{display:none;}
}

/* ---------- Section headers ---------- */
.section-head{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--space-3);
  margin-bottom:var(--space-6);
}
.section-head h2{font-size:clamp(30px, 4vw, 48px); max-width:18ch;}
.section-head p{max-width:46ch; color:var(--ink-soft); opacity:0.75; font-size:16px; margin:0;}
/* Só em Trabalhos, a descrição fica embaixo do título (não ao lado) — pedido do Marcelo. */
#trabalhos .section-head{flex-direction:column; align-items:flex-start;}
#trabalhos .section-head p{max-width:60ch; margin-top:var(--space-2);}

/* ---------- Trabalhos ---------- */
.work-grid{
  display:grid; grid-template-columns:repeat(6,1fr); gap:var(--space-3);
}
.card{
  background:#fff; border:1px solid var(--line-on-paper); border-radius:var(--radius);
  padding:var(--space-4); display:flex; flex-direction:column; gap:var(--space-2);
}
.metric-box{
  background:rgba(255,90,31,0.12); border:1px solid rgba(255,90,31,0.4);
  border-radius:var(--radius); padding:var(--space-4); text-align:center;
}
.metric-flow{display:flex; align-items:center; justify-content:center; gap:var(--space-2); flex-wrap:wrap;}
.metric-num{font-family:var(--font-display); font-weight:900; font-size:clamp(28px,3.4vw,40px);}
.metric-before{color:rgba(246,243,236,0.6); text-decoration:line-through;}
.metric-after{color:var(--amber);}
.metric-caption{font-size:13px; color:rgba(246,243,236,0.65); margin-top:8px;}
.work-card{grid-column:span 3;}
.work-card .tag{color:#8A6A5A; font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:0.08em;}
.work-card h3{font-size:20px; margin:var(--space-1) 0;}
.work-card p{font-size:14.5px; color:var(--ink-soft); opacity:0.78; margin:0;}
.work-link{margin-top:auto; font-size:14px; font-weight:700; color:var(--ink); text-decoration:none; border-bottom:2px solid var(--amber); display:inline-block; width:fit-content;}

/* ---------- Trabalhos: galeria de pilha (efeito "sticky full page slides") ----------
   Cada case é um sticky direto (sem wrapper), preso em top:84px (abaixo do header) com
   height:calc(100vh - 84px) — a própria altura do item já é o "tempo" de rolagem que ele
   segura na tela; quando a rolagem passa da altura dele, o próximo (que já está logo
   depois no DOM, também sticky) assume o mesmo lugar e cobre por cima. Sem necessidade de
   wrapper extra ou buffer artificial — a altura do próprio item já resolve isso. */
.trabalhos-stack{
  margin-top:var(--space-4);
  /* width:100vw é essencial aqui — é o que dá ao elemento a largura própria de verdade
     (onde imagem/fundo realmente pintam). Cheguei a trocar isso por "width:100%; margin
     negativo" achando que era uma variante mais segura do mesmo truque, mas não é
     equivalente: width:100% herda a largura do .container (mais estreita, já com padding
     descontado), e margin negativo só desloca a POSIÇÃO em fluxo — não alarga o elemento em
     si. Resultado: o card parava de vez antes da borda direita (bug confirmado ao vivo via
     Claude in Chrome, medindo a página de verdade — .trabalhos-stack ficava com apenas
     1116px de largura num viewport de 1440px). width:100vw + left:50% + margin-left:-50vw
     é o jeito certo: 100vw dá a largura real de tela cheia, e left/margin só reposicionam
     essa largura já correta pra cobrir de ponta a ponta. */
  width:100vw; position:relative; left:50%; margin-left:-50vw;
}
.trabalhos-stack-item{
  position:sticky; top:84px;
  height:calc(100vh - 84px); min-height:480px;
  border-radius:0; overflow:hidden;
  display:block; text-decoration:none;
}
.trabalhos-stack-item img{width:100%; height:100%; object-fit:cover; display:block;}
/* Véu branco 50% cobrindo o CARD INTEIRO (não só a faixa do texto). Substitui o antigo
   gradiente escuro que ficava só na base — ele existia pra dar contraste ao texto quando a
   legenda ficava embaixo; hoje a legenda está no topo e o véu é uniforme, então a imagem
   aparece igualmente esmaecida do topo à base. Fica no ::after (e não como background do
   próprio card) porque precisa ficar ACIMA da imagem e ABAIXO do texto — a legenda tem
   z-index:1 e passa por cima dele. */
.trabalhos-stack-item::after{
  content:""; position:absolute; inset:0;
  background:rgba(255,255,255,0.5);
}
/* Variante do card Central Técnica: véu preto 90% em vez do branco 50% padrão (pedido do
   Marcelo). Como o fundo fica escuro, a legenda também precisa inverter pra cor clara —
   ver bloco logo abaixo. */
.trabalhos-stack-item--dark90::after{
  background:rgba(18,16,14,0.9);
}
.trabalhos-stack-item--dark90 .trabalhos-stack-caption{color:var(--paper);}
.trabalhos-stack-item--dark90 .trabalhos-stack-caption .tag{color:var(--amber);}
.trabalhos-stack-item--dark90 .trabalhos-stack-caption p{color:rgba(246,243,236,0.78);}
.trabalhos-stack-item--dark90 .trabalhos-stack-caption .work-link{color:var(--paper);}
/* Variante genérica: sem véu nenhum por cima da imagem (pedido do Marcelo, card a card,
   quando a própria arte já tem contraste suficiente pro texto sem precisar apagar a imagem).
   Não define cor de texto sozinha — combina com --light-caption OU deixa a legenda no
   padrão escuro (var(--ink)), dependendo do fundo de cada imagem. */
.trabalhos-stack-item--no-veil::after{display:none;}
/* Legenda clara (branca): usar junto de --no-veil quando o topo da imagem é escuro/saturado
   o bastante pro texto branco (ex.: card iti, laranja/rosa vibrante). */
.trabalhos-stack-item--light-caption .trabalhos-stack-caption{color:var(--paper);}
.trabalhos-stack-item--light-caption .trabalhos-stack-caption .tag{color:var(--paper);}
.trabalhos-stack-item--light-caption .trabalhos-stack-caption p{color:rgba(246,243,236,0.85);}
.trabalhos-stack-item--light-caption .trabalhos-stack-caption .work-link{color:var(--paper);}
/* Legenda no TOPO do card, pra que a primeira coisa que a pessoa vê seja o texto
   (título/descrição) e não a imagem. Como agora o fundo é claro, as cores invertem: tudo
   escuro (--ink/--ink-soft) e a tag em --amber-ink, versão do laranja com contraste AA em
   fundo claro (o --amber puro não passa). O padding lateral usa max(...) pra que o texto
   fique alinhado com o .container (1180px) do resto da página mesmo o card sendo
   full-bleed — sem isso o texto desalinhava do restante do site. */
.trabalhos-stack-caption{
  position:absolute; left:0; right:0; top:0; bottom:auto; z-index:1;
  color:var(--ink);
  max-width:none; margin:0;
  padding:var(--space-4) max(var(--space-4), calc((100% - 1180px) / 2));
}
.trabalhos-stack-caption .tag{color:var(--amber-ink); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:0.08em;}
.trabalhos-stack-caption h3{font-size:clamp(24px,3.2vw,36px); margin:var(--space-2) 0;}
.trabalhos-stack-caption p{color:var(--ink-soft); font-size:16px; max-width:52ch; margin:0 0 var(--space-2);}
.trabalhos-stack-caption .work-link{color:var(--ink);}
/* A altura do header (~84px) não muda de verdade no mobile — o nav-links some, mas quem
   define a altura da barra é o botão "Fale comigo" (min-height:44px) + padding, presente
   em qualquer largura — por isso o mesmo top/height do desktop já serve aqui. */

/* ---------- IA aplicada ao design ---------- */
.ia-section{background:var(--ink); color:var(--paper);}
.ia-section .section-head p{opacity:1;}
/* Efeito "stacked cards" (ref. codepen.io/HugoSalazar/pen/QWomQem): cada .ia-stack-card é
   pinado no topo via GSAP/ScrollTrigger (assets/ia-stack.js) enquanto o próximo sobe por cima
   e cobre o anterior — que encolhe (scale) levemente, dando a sensação de baralho empilhado.
   Fundo opaco + sombra são essenciais para o card de cima cobrir visualmente o de baixo. */
.ia-stack{display:flex; flex-direction:column; gap:var(--space-3);}
.ia-stack-card{
  position:relative; overflow:hidden; border-radius:var(--radius);
  height:39vh; min-height:270px;
  box-shadow:0 40px 70px rgba(8,7,6,0.45);
  transform-origin:top center; will-change:transform;
}
.ia-stack-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
.ia-stack-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(18,16,14,0) 30%, rgba(18,16,14,0.9) 100%);
}
.ia-stack-card__content{position:relative; z-index:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; gap:10px; padding:var(--space-5);}
.ia-num{font-family:var(--font-display); font-weight:900; font-size:14px; letter-spacing:0.06em; color:var(--amber);}
.ia-stack-card h3{font-size:clamp(21px,2.6vw,30px); font-weight:800; margin:0; color:var(--paper);}
.ia-stack-card p{font-size:15px; color:rgba(246,243,236,0.82); max-width:52ch; margin:0;}
.ia-link{margin-top:6px; font-size:13.5px; font-weight:700; color:var(--paper); text-decoration:none; border-bottom:2px solid var(--amber); display:inline-block; width:fit-content;}
.ia-stack-spacer{height:30vh;}

/* ---------- Liderança bento ---------- */
.leader-section{background:var(--paper-dim);}
.bento{display:grid; grid-template-columns:repeat(6,1fr); gap:var(--space-3);}
.bento-card{
  background:#fff; border:1px solid var(--line-on-paper); border-radius:var(--radius);
  padding:var(--space-4); display:flex; flex-direction:column; gap:var(--space-2);
}
.bento-card.big{grid-column:span 4; grid-row:span 2; padding:var(--space-5); justify-content:space-between;}
.bento-card.small{grid-column:span 2;}
.bento-num{font-family:var(--font-display); font-weight:900; font-size:clamp(30px,3.2vw,44px); color:var(--amber-ink);}
.bento-card h3{font-size:19px; font-weight:800;}
.bento-card p{font-size:14.5px; color:var(--ink-soft); opacity:0.78; margin:0;}

/* Card-botão "Ver todas as iniciativas" — vira o link pra cases/lideranca.html.
   Azul destoa de propósito do resto da paleta (âmbar/ink/paper) pra se ler como ação,
   não como mais um card de conteúdo. */
.bento-cta{
  background:#1E3A8A; border-color:#1E3A8A;
  text-decoration:none; justify-content:center;
  transition:background .2s;
}
.bento-cta:hover{background:#16295E;}
.bento-cta .bento-num, .bento-cta h3{color:#fff;}
.bento-cta p{color:rgba(255,255,255,0.82); opacity:1;}

/* ---------- Pesquisa ---------- */
.research{background:var(--ink); color:var(--paper);}
.research-title{font-size:clamp(26px,3.4vw,38px); max-width:24ch; margin-bottom:var(--space-2);}
.research-meta{color:rgba(246,243,236,0.6); font-size:14.5px; margin-bottom:var(--space-5);}
.research-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); margin-bottom:var(--space-5);}
.stat{border-top:1px solid var(--line-on-ink); padding-top:var(--space-3);}
.stat-num{font-family:var(--font-display); font-weight:900; font-size:clamp(34px,4vw,52px); color:var(--amber);}
.stat p{color:rgba(246,243,236,0.78); font-size:14.5px; margin:8px 0 0; max-width:28ch;}

/* ---------- Sobre ---------- */
.about{display:grid; grid-template-columns:0.8fr 1.2fr; gap:var(--space-6); align-items:start;}
.photo-frame{
  aspect-ratio:4/5;
  border-radius:var(--radius); overflow:hidden;
}
.photo-frame img{
  width:100%; height:100%; object-fit:cover; object-position:top center; display:block;
}
.about p{font-size:16.5px; color:var(--ink-soft); max-width:64ch;}
.quote{
  border-left:3px solid var(--amber); padding-left:var(--space-4); margin:var(--space-4) 0;
  font-family:var(--font-display); font-weight:600; font-size:19px; font-style:normal; max-width:56ch;
}

/* Transição "revelar" ao entrar em Pesquisa e em Sobre — inspirada em codepen.io/johnson5409/
   pen/gOPeWPe (efeito de pôster de filme: fundo dá um leve zoom-out e o texto entra de um
   tamanho maior pro normal conforme a cena fica ativa). Adaptado pra um gatilho só por seção
   (o pen original tem vários "steps" numerados; aqui cada seção só precisa do momento em que
   ela substitui a anterior na tela): o conteúdo entra com fade + escala, via
   IntersectionObserver (assets/sobre-reveal.js — nome ficou do primeiro uso, mas hoje cobre
   as duas seções) que liga .is-in em cada <section> assim que ela cruza bem pra dentro da
   tela vinda de baixo (rootMargin -45%, só depois de já passar da metade da viewport — gatilho
   cedo demais foi um bug real, ver 2026-08-20 na memória) — e desliga se rolar pra trás, pra
   poder repetir o efeito toda vez que cruzar essa fronteira. Só dentro de
   prefers-reduced-motion:no-preference — sem isso, tudo já nasce no estado final visível, sem
   precisar do JS rodar. */
@media (prefers-reduced-motion: no-preference) {
  #sobre .photo-frame img{
    transform:scale(1.15);
    transition:transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  }
  #sobre .about-text{
    opacity:0;
    transform:translateY(32px) scale(1.08);
    transition:opacity 1s ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay:0.12s;
  }
  #sobre.is-in .photo-frame img{transform:scale(1);}
  #sobre.is-in .about-text{opacity:1; transform:translateY(0) scale(1);}

  #pesquisa .container{
    opacity:0;
    transform:translateY(32px) scale(1.08);
    transition:opacity 1s ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  }
  #pesquisa.is-in .container{opacity:1; transform:translateY(0) scale(1);}
}

/* ---------- Formação ---------- */
.formacao-section{background:var(--ink); color:var(--paper);}
.formacao-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-6);}
.formacao-grid h3{
  font-size:13px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  color:rgba(246,243,236,0.5); margin:0 0 var(--space-3);
}
.formacao-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-3);}
.formacao-list li{border-top:1px solid var(--line-on-ink); padding-top:var(--space-3);}
.formacao-list .degree{font-family:var(--font-display); font-weight:800; font-size:16.5px; color:var(--paper); margin-bottom:4px;}
.formacao-list .school{font-size:14px; color:rgba(246,243,236,0.65);}

.uxpm-card{
  margin-top:var(--space-6); background:#fff; border-radius:var(--radius); padding:var(--space-5);
  display:grid; grid-template-columns:auto 1fr; gap:var(--space-5); align-items:center;
}
.uxpm-card img{width:220px; height:auto;}
.uxpm-badge-tag{display:inline-block; font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:var(--amber-ink); margin-bottom:8px;}
.uxpm-card h3{color:var(--ink); font-size:21px; font-weight:800; margin:0 0 6px;}
.uxpm-card p{color:var(--ink-soft); font-size:15px; margin:0; max-width:52ch;}

/* ---------- Prova social ---------- */
.social{background:var(--paper-dim);}

/* Botão de adicionar depoimento agora vive logo abaixo do título/frase do section-head,
   antes do carrossel (pedido: "o botão abaixo da frase O que dizem sobre trabalhar comigo").
   Reduz o espaço padrão do .section-head só nessa seção pra o botão ficar colado na frase. */
.social .section-head{margin-bottom:var(--space-3);}
.testi-add{display:flex; justify-content:flex-start; margin-bottom:var(--space-5);}

/* Efeito "stacked cards" nos depoimentos — cobertura via position:sticky (mesma técnica,
   comprovadamente estável, já usada em .trabalhos-stack-item), não mais GSAP pin: com
   cards de altura livre (auto, definida pelo texto do depoimento — pedido explícito pra
   não cortar/rolar nada), o pin do GSAP (pensado pra cards de altura fixa, como os da
   seção IA) deixava um vão vazio grande antes do primeiro card. Sticky não tem esse
   problema — cada card reserva o próprio espaço no fluxo normal, gruda no topo quando
   chega lá, e o próximo (mais adiante no DOM) cobre por cima ao alcançar o mesmo ponto,
   sem cálculo manual de posição. O encolher (scale) + apagar (opacity) ao ficar coberto
   continua existindo, só que calculado por scroll simples em assets/testimonials.js. */
.testi-stack{display:flex; flex-direction:column; gap:var(--space-3);}
.testi-stack-card{
  position:sticky; top:84px; scroll-margin-top:84px;
  border-radius:var(--radius); overflow:hidden;
  /* min-height só o suficiente pra não ficar minúsculo com um depoimento muito curto — a
     caixa acompanha o tamanho real do card (não força altura de tela inteira). A cobertura
     do card anterior não depende mais de bater altura: ele fica 100% invisível (opacity:0)
     assim que o próximo chega por cima (ver FADE_DOWN em assets/testimonials.js), então
     mesmo um card curto cobrindo um mais alto não deixa nada "vazando" atrás — só o fundo
     da seção, nunca texto de outro depoimento. */
  min-height:220px;
  box-shadow:0 40px 70px rgba(8,7,6,0.16);
  transform-origin:top center; will-change:transform, opacity;
}
.testi-stack-card .testi-card{border:none; min-height:0;}
.testi-stack-spacer{height:20vh;}

/* Bolinhas de navegação fixas na lateral direita da tela (coluna vertical), visíveis só
   enquanto a seção de depoimentos está na tela — um IntersectionObserver no <section>
   (assets/testimonials.js) alterna a classe .is-visible. Indicam quantos depoimentos
   existem e destacam qual está "no topo" no momento. Clicar leva direto pro depoimento
   (scrollIntoView). */
.testi-nav{
  position:fixed; right:28px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center; gap:12px;
  z-index:40; opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.testi-nav.is-visible{opacity:1; pointer-events:auto;}
.testi-nav-item{
  width:8px; height:8px; border-radius:50%; background:var(--line-on-paper); border:none;
  padding:0; cursor:pointer; transition:background .2s ease, transform .2s ease;
  box-shadow:0 1px 3px rgba(8,7,6,0.15);
}
.testi-nav-item:hover{background:var(--ink-soft); transform:scale(1.3);}
/* cursor:pointer mesmo na bolinha ativa (laranja) — o clique (assets/testimonials.js)
   sempre rola até o card, mesmo se ele já é o "atual"; útil pra voltar pro topo do post
   depois de rolar um pouco a página com o mouse. Antes tinha cursor:default aqui, o que
   dava a entender (errado) que a bolinha ativa não fazia mais nada ao clicar. */
.testi-nav-item[aria-current="true"]{background:var(--amber); transform:scale(1.3);}

.testi-card{
  background:#fff; border:1px solid var(--line-on-paper); border-radius:var(--radius);
  padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-3);
  min-height:190px; justify-content:space-between;
}
.testi-quote{color:var(--ink-soft); font-size:15px; line-height:1.65; margin:0;}
.testi-quote p{margin:0 0 12px;}
.testi-quote p:last-child{margin-bottom:0;}
.testi-byline{
  display:flex; align-items:center; gap:10px;
  border-top:1px solid var(--line-on-paper); padding-top:var(--space-3); margin-top:auto;
}
.testi-avatar{width:36px; height:36px; border-radius:50%; object-fit:cover; flex-shrink:0; border:1px solid var(--line-on-paper);}
.testi-name{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-display); font-weight:800; font-size:14.5px; color:var(--ink);
  text-decoration:none; width:fit-content;
}
.testi-name span{color:var(--ink-soft); font-family:var(--font-body); font-weight:500; font-size:13px;}
.testi-name:hover{color:var(--amber-ink);}
.testi-name-plain{cursor:default;}
.testi-name-plain:hover{color:var(--ink);}

/* ---------- Modal: adicionar depoimento ---------- */
.modal-overlay{
  position:fixed; inset:0; z-index:300;
  background:rgba(18,16,14,0.6);
  display:flex; align-items:center; justify-content:center;
  padding:var(--space-4);
}
.modal-overlay[hidden]{display:none;}
.modal-box{
  position:relative; background:var(--paper); border-radius:var(--radius);
  padding:var(--space-6) var(--space-5) var(--space-5); max-width:520px; width:100%;
  max-height:90vh; overflow-y:auto;
  box-shadow:0 32px 64px -20px rgba(18,16,14,0.5);
}
.modal-box h3{font-size:22px; margin:0 0 8px;}
.modal-sub{color:var(--ink-soft); font-size:14.5px; margin:0 0 var(--space-4); opacity:0.8;}
.modal-close{
  position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:50%;
  border:1px solid var(--line-on-paper); background:#fff; font-size:18px; line-height:1;
  color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.modal-close:hover{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.modal-actions{display:flex; justify-content:flex-end; gap:var(--space-2); margin-top:var(--space-4);}

.form-field{display:flex; flex-direction:column; gap:6px; margin-bottom:var(--space-3); font-size:14px; font-weight:700; color:var(--ink);}
.form-optional{font-weight:400; color:var(--ink-soft); opacity:0.6; font-size:12.5px;}
.form-field input, .form-field textarea{
  font-family:var(--font-body); font-size:15px; font-weight:400; color:var(--ink);
  border:1px solid var(--line-on-paper); border-radius:10px; padding:11px 14px; background:#fff;
  resize:vertical;
}
.form-field input:focus, .form-field textarea:focus{outline:2px solid var(--amber); outline-offset:1px;}
.form-field small{font-weight:400; color:var(--ink-soft); opacity:0.7; font-size:12.5px;}
.form-error{color:#B3261E; font-size:13.5px; font-weight:600; margin:0;}
.hp-field{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

.form-field input[type="file"]{
  border:1px dashed var(--line-on-paper); border-radius:10px; padding:10px 14px;
  font-size:13.5px; background:#fff; cursor:pointer;
}
.testi-photo-preview{display:flex; align-items:center; gap:10px; margin-top:8px;}
.testi-photo-preview img{width:48px; height:48px; border-radius:50%; object-fit:cover; border:1px solid var(--line-on-paper);}
.testi-photo-remove{
  background:none; border:none; padding:0; color:var(--ink-soft); font-size:13px;
  text-decoration:underline; cursor:pointer;
}
.testi-photo-remove:hover{color:var(--amber-ink);}

/* ---------- CTA final / footer ---------- */
.cta-final{background:var(--ink); color:var(--paper); text-align:center;}
.cta-final h2{font-size:clamp(30px,4.4vw,52px); max-width:20ch; margin:0 auto var(--space-4);}
.cta-final-actions{display:flex; justify-content:center; gap:var(--space-3); flex-wrap:wrap;}
footer{background:var(--ink); border-top:1px solid var(--line-on-ink); color:rgba(246,243,236,0.6); padding:var(--space-5) 0;}
.footer-row{display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-3); font-size:14px;}
.footer-row a{text-decoration:none; color:rgba(246,243,236,0.85);}

/* =========================================================
   Páginas de case (produtos e IA)
   ========================================================= */
.breadcrumb{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  font-size:14px; color:rgba(246,243,236,0.6); margin-bottom:var(--space-4);
}
.breadcrumb a{text-decoration:none; color:rgba(246,243,236,0.85);}
.breadcrumb a:hover{color:var(--paper);}

.case-hero{
  background:var(--ink); color:var(--paper);
  padding:var(--space-6) 0 var(--space-7);
}
.case-hero.has-media{
  position:relative; overflow:hidden; padding-top:var(--space-8); padding-bottom:var(--space-8);
}
.case-hero-media{
  position:absolute; inset:-10% 0; z-index:0; overflow:hidden;
}
.case-hero-media img{
  width:100%; height:120%; object-fit:cover; object-position:center;
  will-change:transform;
}
.case-hero-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(18,16,14,0.68) 0%, rgba(18,16,14,0.82) 45%, rgba(18,16,14,0.96) 100%);
}.case-hero.has-media .container{position:relative; z-index:1;}
@media (prefers-reduced-motion: reduce){
  .case-hero-media img{transform:none !important;}
}
.case-hero h1{
  font-size:clamp(32px, 4.6vw, 60px);
  max-width:20ch;
  letter-spacing:-0.02em;
  margin-bottom:var(--space-3);
}
.case-hero .case-intro{
  max-width:62ch; font-size:clamp(16px,1.4vw,19px); color:rgba(246,243,236,0.82);
}

.case-facts{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-3);
  margin-top:var(--space-5); padding-top:var(--space-4); border-top:1px solid var(--line-on-ink);
}
.case-facts.cols-3{grid-template-columns:repeat(3,1fr);}
.case-fact span{display:block; font-size:12px; text-transform:uppercase; letter-spacing:0.08em; color:rgba(246,243,236,0.5); margin-bottom:6px;}
.case-fact strong{font-family:var(--font-display); font-size:16px; font-weight:800; color:var(--paper);}

.case-body-section{background:var(--paper);}
.case-layout{display:grid; grid-template-columns:1fr; gap:var(--space-6); max-width:800px;}
.case-block{margin-bottom:var(--space-6);}
.case-block:last-child{margin-bottom:0;}
.case-block h2{font-size:clamp(22px,2.6vw,30px); margin-bottom:var(--space-3);}
.case-block p{font-size:16.5px; color:var(--ink-soft); max-width:70ch; margin:0 0 var(--space-2);}
.case-block ul{margin:0; padding-left:20px; color:var(--ink-soft); font-size:16.5px;}
.case-block li{margin-bottom:8px;}

.case-tag{
  display:flex; align-items:center; gap:8px;
  font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:0.09em;
  color:var(--amber-ink); margin-bottom:var(--space-2);
}
.case-tag::before{content:""; width:16px; height:2px; background:var(--amber); display:inline-block; flex:none;}
.case-chapter-media{
  position:relative;
  margin:var(--space-6) 0; border-radius:var(--radius); overflow:hidden;
  box-shadow:0 24px 48px -24px rgba(18,16,14,0.35);
}
.case-chapter-media img{width:100%; height:auto; display:block; will-change:transform;}
@media (prefers-reduced-motion: reduce){
  .case-chapter-media img{transform:none !important;}
}

/* Variante que sangra até a borda da tela — fica fora do .container, direto no .case-body-section.
   Container com altura fixa + imagem um pouco maior (folga de 30px) pra o parallax ter espaço
   de deslocar sem revelar vão nas bordas — mesmo esquema do .case-hero-media. */
.case-chapter-bleed{
  margin:var(--space-6) 0;
  height:600px; position:relative; overflow:hidden;
}
.case-chapter-bleed img{
  position:absolute; top:-30px; left:0; width:100%; height:calc(100% + 60px);
  object-fit:cover; display:block; will-change:transform;
}
@media (max-width:860px){
  .case-chapter-bleed{height:340px;}
}
@media (prefers-reduced-motion: reduce){
  .case-chapter-bleed img{transform:none !important;}
}

.media-placeholder{
  border:1.5px dashed var(--line-on-paper); border-radius:var(--radius);
  padding:var(--space-6); text-align:center; color:var(--ink-soft); opacity:0.72;
  font-size:14.5px; margin-top:var(--space-2);
}

/* ---------- Galeria de imagens do case ---------- */
.case-media-section{background:var(--paper-dim); padding-top:var(--space-6);}
.case-media-row{display:grid; grid-template-columns:2.1fr 1fr; gap:var(--space-4); align-items:stretch;}
.case-media-row .media-frame{
  border-radius:var(--radius); overflow:hidden; display:block;
  box-shadow:0 24px 48px -24px rgba(18,16,14,0.4);
  height:clamp(300px, 30vw, 460px);
}
.case-media-row .media-frame img{
  width:100%; height:100%; object-fit:cover; object-position:top center; display:block;
}
.case-gallery-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-4);}
.case-gallery-item{display:flex; flex-direction:column; gap:10px;}
.case-gallery-item img{
  width:100%; border-radius:var(--radius); border:1px solid var(--line-on-paper); display:block;
}
.case-gallery-item span{font-size:13.5px; font-weight:700; color:var(--ink-soft); letter-spacing:0.01em;}

.case-nav-section{background:var(--paper-dim);}
.case-nav-row{display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-3); align-items:center;}
.case-nav-row a{text-decoration:none; font-weight:700; font-size:15px; color:var(--ink);}
.case-nav-row a:hover{color:var(--amber-ink);}

/* ---------- Responsive ---------- */
@media (max-width: 860px){
  .nav-toggle{display:flex;}
  .nav-links{
    display:none; position:absolute; top:100%; left:0; right:0; z-index:1;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--ink); border-bottom:1px solid var(--line-on-ink);
    padding:0 var(--space-4) var(--space-3);
    max-height:calc(100vh - 64px); overflow-y:auto;
  }
  .nav-links.is-open{display:flex;}
  .nav-links li{width:100%;}
  .nav-links a{display:block; padding:14px 4px; border-top:1px solid var(--line-on-ink); font-size:16px; opacity:0.9;}
  .nav-links li:first-child a{border-top:none;}
  .work-card{grid-column:span 3;}
  .bento-card.big{grid-column:span 6;}
  .bento-card.small{grid-column:span 3;}
  .about{grid-template-columns:1fr;}
  .research-stats{grid-template-columns:1fr;}
  /* Cards de Trabalhos no mobile mantêm o MESMO tratamento do desktop (pedido do Marcelo):
     legenda POR CIMA da imagem, sobre o gradiente de leitura (::after) — e não num bloco de
     fundo preto abaixo da foto. Cheguei a tentar a versão com a legenda embaixo (imagem
     inteira, sem corte) porque o quadrado corta bastante das imagens, que são telas de UI em
     paisagem; ele não gostou do resultado, então voltou pro original. A única diferença pro
     desktop segue sendo a altura: aqui é aspect-ratio 1/1 em vez de calc(100vh - 84px),
     porque altura de tela cheia no celular cortava ainda mais e deixava a legenda apertada. */
  .trabalhos-stack-item{height:auto; min-height:0; aspect-ratio:1/1;}
  .trabalhos-stack-caption{padding:var(--space-3) var(--space-3) var(--space-4);}
  .trabalhos-stack-caption h3{font-size:22px; margin:8px 0;}
  .trabalhos-stack-caption p{font-size:14.5px; margin-bottom:10px;}
  /* Trocado de 60vh pra aspect-ratio: o card 01 é pinado (GSAP) quase assim que a página
     carrega — no celular, a barra de endereço recolhe durante o scroll inicial e o valor
     de "vh" muda no meio do caminho, mas o pin-spacer do GSAP já tinha travado o tamanho
     antigo (mais baixo), sobrando uma faixa branca do fundo da página acima do card fixo.
     aspect-ratio depende só da largura (que não muda ao rolar), então o tamanho do card
     fica estável e o pin não desalinha — mesma lógica já usada em .trabalhos-stack-item. */
  .ia-stack-card{height:auto; min-height:0; aspect-ratio:3/4;}
  .case-facts, .case-facts.cols-3{grid-template-columns:repeat(2,1fr);}
  .formacao-grid{grid-template-columns:1fr; gap:var(--space-5);}
  .case-media-row{grid-template-columns:1fr;}
  .case-media-row .media-frame{height:280px;}
  /* Depoimentos no mobile: .testi-stack-card já garante min-height quase-tela-inteira em
     qualquer largura (ver comentário grande na regra base) — precisa ser assim tanto no
     mobile quanto no desktop pra cobrir direito cards vizinhos de tamanhos bem diferentes,
     então não zeramos mais o min-height aqui (isso causava o bug de texto de dois
     depoimentos aparecendo sobreposto/"fantasma"). As bolinhas laterais (.testi-nav) somem
     — numa tela estreita, uma coluna fixa na borda direita fica em cima do texto do card;
     sem elas, o scroll/swipe já navega. */
  .testi-nav{display:none;}
}
@media (max-width: 560px){
  /* Header em telas estreitas: logo + hambúrguer + botão "Fale comigo" somavam exatamente
     a largura da tela (151+44+127 + 64 de padding = 386px num iPhone), sem folga nenhuma —
     resultado: o logo quebrava em duas linhas E o botão também, inflando a barra de 67px
     pra 107px de altura. Medido ao vivo no site publicado (Claude in Chrome, num iframe de
     386px pra ativar as media queries de verdade). Aqui: padding lateral menor, fontes um
     pouco menores e white-space:nowrap pra proibir a quebra. Confirmado a 386px e 356px —
     tudo numa linha só, sem estouro horizontal. O padding menor do .container também vale
     pro resto da página (mais área útil no celular), e não afeta o full-bleed da pilha de
     Trabalhos, que se apoia em 100vw e não no padding do container. */
  .container{padding:0 var(--space-3);}
  .nav{padding:12px var(--space-3); gap:8px;}
  .logo{font-size:16px; white-space:nowrap;}
  .nav .btn{padding:10px 16px; font-size:14px; white-space:nowrap; min-height:40px;}
  .nav-toggle{width:40px; height:40px;}

  .work-card{grid-column:span 6;}
  .bento-card.small{grid-column:span 6;}
  .case-facts, .case-facts.cols-3{grid-template-columns:1fr 1fr;}
  .uxpm-card{grid-template-columns:1fr; text-align:center; justify-items:center;}
  .case-gallery-grid{grid-template-columns:1fr;}
  section{padding:var(--space-6) 0;}
}

/* =========================================================
   Case Central Técnica — reconstruído a partir do board do Figma
   (Design System / "Central tecnica", nó 110:51 — frame de 1440x3331)
   Todos os números abaixo saíram do próprio arquivo via Figma MCP, não de medição em
   imagem. Escopado em body.central-tecnica-v2 + classes central-* pra não vazar pro resto
   do site. Grade: conteúdo de 960px começando em x=240 num frame de 1440 — dentro do
   .container (1180 - 64 de padding = 1116 úteis a partir de 162), um max-width:960
   centralizado cai exatamente em 240.
   ========================================================= */
body.central-tecnica-v2 .case-body-section{background:#FFF; padding-bottom:0;}
.central-wrap{max-width:960px; margin:0 auto;}

/* ---------- Hero ----------
   No board o hero tem 648px e o conteúdo começa em y=52. Aqui entram +84px de folga no
   topo porque o site tem header fixo, que o board não considera. A arte de fundo já vem
   achatada (vinheta + degradê laranja embutidos), então não leva nenhuma camada extra. */
.central-hero{
  position:relative; overflow:hidden;
  padding:calc(84px + 52px) 0 var(--space-5);
  background:var(--ink);
}
.central-hero-bg{position:absolute; inset:0; z-index:0;}
/* Sem parallax de propósito: o .case-hero-media dos outros cases estica a imagem em até
   44% pra ter folga de deslocamento, o que aqui comeria o monitor da direita no corte do
   object-fit. Ancorada à direita, o corte sobra pro lado esquerdo (área escura, sem
   informação). */
.central-hero-bg img{
  width:100%; height:100%; object-fit:cover; object-position:right center; display:block;
}
/* Véu só de segurança pra legibilidade: no desktop é quase invisível (a faixa esquerda da
   arte já é quase preta); abaixo de 1100px o corte traz o monitor claro pra perto do texto. */
.central-hero-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(10,8,6,0.55) 0%, rgba(10,8,6,0.15) 40%, rgba(10,8,6,0) 62%);
}
.central-hero .container{position:relative; z-index:1;}
.central-hero-content{max-width:960px; margin:0 auto;}

/* No board tudo respira de 32 em 32px (só breadcrumb -> eyebrow é 24). */
.central-hero .breadcrumb{
  font-size:14px; color:#E6E6E6; margin:0 0 var(--space-3); gap:6px;
}
.central-hero .breadcrumb a{color:#E6E6E6;}
/* O eyebrow do site é caixa-alta com tracking; no board é Inter Regular 12px, caixa normal,
   com um fio de 11px e 8px de respiro antes do texto. */
.central-eyebrow{
  display:flex; width:fit-content; align-items:center; gap:8px;
  font-family:var(--font-body); font-weight:400; font-size:14px;
  text-transform:none; letter-spacing:0;
  color:var(--amber); margin:0 0 var(--space-4);
}
.central-eyebrow::before{width:11px; height:1px; background:var(--amber);}
.central-hero h1{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(34px, 3.4vw, 48px); line-height:1.08; letter-spacing:-0.01em;
  color:#E6E6E6; max-width:420px; margin:0 0 var(--space-4);
}
.central-hero .case-intro{
  font-family:var(--font-body); font-size:14px; line-height:1.3;
  color:#E6E6E6; max-width:470px; margin:0;
}
.central-rule{
  border:0; border-top:1px solid rgba(255,255,255,0.85);
  margin:var(--space-4) 0; width:100%; max-width:876px;
}
/* Colunas fixas de 82px nas posições do board (240 / 486 / 730 → passos de 246px). */
.central-facts{
  display:grid; grid-template-columns:repeat(3, 82px); gap:0 164px;
  margin:0 0 var(--space-4);
}
.central-fact span{
  display:block; font-family:var(--font-body); font-size:14px; line-height:24px;
  color:rgba(230,230,230,0.62);
}
.central-fact strong{
  display:block; font-family:var(--font-body); font-size:14px; font-weight:700;
  line-height:24px; color:#E6E6E6;
}
/* Caixa de 386x168 com o conteúdo centrado (48+60+24 = 132, sobrando 18px em cima e embaixo).
   Os números são Inter Bold 36px no board — não Archivo. */
.central-metric{
  width:386px; max-width:100%; text-align:center; padding:18px var(--space-3);
  border:1px solid #E06011; border-radius:20px; background:rgba(255,90,31,0.3);
}
.central-metric-before,
.central-metric-after{
  display:block; font-family:var(--font-body); font-weight:700; font-size:36px;
}
.central-metric-before{
  color:#E8E8E8; line-height:48px;
  text-decoration:line-through; text-decoration-thickness:2px;
}
.central-metric-after{color:var(--amber); line-height:60px;}
.central-metric-caption{
  font-family:var(--font-body); font-size:14px; line-height:24px; color:#FFF; margin:0;
}

/* ---------- Corpo ----------
   Descoberta do board: o corpo do case é ARCHIVO (Regular 400 no texto, Bold 700 nos
   subtítulos), não Inter — só os eyebrows laranja seguem em Inter Regular. Texto em preto
   puro, corpo 12/18 e subtítulo 24. */
.central-block{margin-bottom:var(--space-5);}
.central-block:last-child{margin-bottom:0;}
/* Laranja de texto sobre fundo branco: #E06011 (o mesmo da borda da caixa de métrica no
   board) no lugar do #FF5A1F puro — pedido do Marcelo depois que apontei o contraste baixo.
   Sobe de 3,05:1 pra 3,59:1; ainda abaixo dos 4,5:1 de AA pra texto de 12px, mas é a cor
   que ele escolheu. Vale só no corpo (fundo claro); no hero o laranja segue o do board. */
.central-tag{
  display:flex; width:fit-content; align-items:center; gap:8px;
  font-family:var(--font-body); font-weight:400; font-size:14px;
  color:#E06011; margin-bottom:var(--space-2);
}
.central-tag::before{content:""; width:11px; height:1px; background:#E06011; flex:none;}
.central-block h2{
  font-family:var(--font-display); font-weight:700; font-size:24px;
  line-height:1.1; letter-spacing:0; color:#000;
  max-width:552px; margin:0 0 var(--space-2);
}
.central-block p{
  font-family:var(--font-display); font-weight:400; font-size:14px; line-height:21px;
  color:#000; max-width:470px; margin:0;
}

/* Texto + imagem solta: no board o fone e o notebook são posicionados por cima do fundo,
   fora da coluna de texto — o notebook inclusive COMEÇA dentro da área do texto (x=197 da
   coluna) e vai até 1013px de largura, passando da borda direita. Como as duas imagens têm
   margem branca própria, essa sobreposição não encobre nada; por isso ficam no fundo
   (z-index 0) com o texto por cima. */
.central-split{position:relative; margin-bottom:var(--space-6);}
.central-col-text{position:relative; z-index:1;}
.central-media{position:absolute; z-index:0; pointer-events:none;}
.central-media img{width:100%; height:auto; display:block; max-width:none;}
/* Percentuais relativos à coluna de 960: fone 528px a partir de x=621 (64.7% / 55%). */
.central-media--headset{top:78px; left:64.7%; width:55%;}
/* Notebook: 1013px a partir de x=197 (20.6% / 105.5%), começando 141px ACIMA do bloco. */
.central-media--laptop{top:-141px; left:20.6%; width:105.5%;}

/* Antes / Depois: duas telas de 480px com 80px entre elas (1040 no total — o único bloco
   que passa da coluna de 960). O fio laranja vertical já vem desenhado dentro de cada
   arquivo, em posições diferentes (50% no "antes", 18% no "depois"); a legenda só continua
   esse fio pra baixo, por isso margin-top:0 e o recuo casando com cada tick. */
.central-compare{
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(2, minmax(0,480px)); gap:80px;
  margin-bottom:var(--space-6);
}
.central-compare figure{margin:0;}
.central-compare img{width:100%; height:auto; display:block;}
/* margin-top negativo porque no board o fio começa 18px ANTES da imagem acabar e a legenda
   sobe junto, encostando na base da tela — o fio da legenda e o tick do arquivo ficam na
   mesma coluna e na mesma cor, então emendam sem costura visível. */
.central-compare figcaption{
  padding-left:8px; border-left:2px solid #E06011; margin-top:-54px;
  font-family:var(--font-display); font-weight:400; font-size:16px; line-height:1.1; color:#000;
}
.central-compare figcaption strong{display:block; font-weight:700; color:#E06011;}
.central-compare figure:nth-child(1) figcaption{margin-left:50%;}
.central-compare figure:nth-child(2) figcaption{margin-left:18%;}

/* Rótulo que abre a fileira de telas do fluxo guiado. */
.central-lead{
  position:relative; z-index:1;
  font-family:var(--font-display); font-weight:400; font-size:14px; line-height:21px;
  color:#000; margin:0 0 8px;
}

/* Fluxo guiado: 3 colunas de ~306px com 20px de gap. Monitoramento usa a MESMA grade, só
   ocupando as duas primeiras colunas (no board as imagens têm 307 e 303 de largura). */
.central-grid-3, .central-grid-mon{
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
  align-items:start; margin-bottom:var(--space-6);
}
.central-grid-3 figure, .central-grid-mon figure{margin:0;}
.central-grid-3 img, .central-grid-mon img{width:100%; height:auto; display:block;}
/* A 1ª coluna do fluxo tem duas telas empilhadas. */
.central-grid-3 img + img{margin-top:20px;}
.central-grid-3 figcaption, .central-grid-mon figcaption{
  font-family:var(--font-display); font-weight:400; font-size:14px; line-height:21px;
  color:#000; margin-top:8px;
}

/* Fecho do case sobre a foto do mapa de jornada. O arquivo já vem com o degradê aplicado
   (branco no topo, revelando os post-its conforme desce) e com a opacidade baixa embutida,
   então entra direto como background, sem véu nem opacity extra. */
.central-outro{
  position:relative; padding:var(--space-4) 0 var(--space-8);
  background-image:url("img/cases/central-tecnica/jornada-bg.jpg");
  background-size:cover; background-position:center top; background-repeat:no-repeat;
}
.central-outro > .container{position:relative; z-index:1;}
.central-block--outro{margin-top:var(--space-4);}
/* Pedido do Marcelo: a frase de resultado sai do 12px do corpo pra 14 bold, pra pesar mais
   que o texto de processo. (No board ela ainda está em 12 regular.) */
.central-block--outro p{font-size:14px; font-weight:700;}

@media (max-width:1100px){
  .central-hero-bg::after{
    background:linear-gradient(90deg, rgba(10,8,6,0.92) 0%, rgba(10,8,6,0.84) 55%, rgba(10,8,6,0.6) 100%);
  }
  .central-hero-bg img{object-position:center;}
}
@media (max-width:900px){
  /* Empilhado: as imagens saem do posicionamento absoluto e voltam pro fluxo, senão elas
     cobririam o texto (em tela estreita não sobra margem branca pra elas ocuparem). */
  .central-media{position:static; width:auto; margin-top:var(--space-4);}
  .central-media--headset img{max-width:520px; margin-left:auto;}
  .central-compare{grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4);}
  .central-grid-3{grid-template-columns:repeat(2,1fr);}
  .central-grid-mon{grid-template-columns:repeat(2,1fr);}
  .central-facts{grid-template-columns:repeat(3,1fr); gap:var(--space-3);}
}
@media (max-width:640px){
  .central-grid-3, .central-grid-mon, .central-compare{grid-template-columns:1fr;}
  .central-compare figure:nth-child(1) figcaption,
  .central-compare figure:nth-child(2) figcaption{margin-left:0; margin-top:var(--space-2);}
  .central-facts{grid-template-columns:1fr 1fr;}
  .central-metric{width:100%;}
  .central-h1-br{display:none;}
}

/* =========================================================
   Case Agri7 — reconstruído a partir do board do Figma
   (Design System / "Agri7", nó 134:186 — frame de 1440x3162)
   Mesma grade da Central Técnica: coluna de 960px começando em x=240 num frame de 1440.
   Diferenças do outro case: hero CLARO (a arte de fundo é o banner claro do app, com texto
   preto por cima), sem caixa de métrica, régua de 552px, corpo sobre cinza #E5E3E4 e um
   filete azul-petróleo de 10px separando hero e corpo.
   ========================================================= */
.agri-wrap{max-width:960px; margin:0 auto;}

/* ---------- Hero ----------
   No board o hero tem 506px e o conteúdo começa em y=52; entram +84px de folga porque o
   site tem header fixo, que o board não considera. */
.agri-hero{
  position:relative; overflow:hidden;
  padding:calc(84px + 52px) 0 var(--space-5);
  background:#002E51;
}
.agri-hero-bg{position:absolute; inset:0; z-index:0;}
/* Ancorada à direita: o celular e o "MENU" ficam nesse lado e o texto ocupa a esquerda,
   que na arte é área lisa — então o corte em telas estreitas não come informação. */
.agri-hero-bg img{
  width:100%; height:100%; object-fit:cover; object-position:right center; display:block;
}
/* Degradê do board (nó 141:26404): azul-petróleo sólido à esquerda, sumindo até transparente
   à direita — é ele que segura o texto branco por cima da arte clara do banner. */
.agri-hero-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, #002E51 0%, rgba(15,48,75,0.5) 71.63%, rgba(255,250,250,0) 100%);
}
.agri-hero .container{position:relative; z-index:1;}
.agri-hero-content{max-width:960px; margin:0 auto;}
.agri-hero .breadcrumb{font-size:14px; color:#E6E6E6; margin:0 0 var(--space-3); gap:6px;}
.agri-hero .breadcrumb a{color:#E6E6E6;}
.agri-hero h1{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(34px, 3.4vw, 48px); line-height:1.08; letter-spacing:-0.01em;
  color:#FFF; margin:0 0 var(--space-4);
}
.agri-intro{
  font-family:var(--font-body); font-size:14px; line-height:1.3;
  color:#E6E6E6; max-width:470px; margin:0;
}
.agri-rule{
  border:0; border-top:1px solid rgba(255,255,255,0.55);
  margin:var(--space-4) 0; width:100%; max-width:876px;
}
/* Colunas nas posições do board (240 / 486 / 730); a terceira é mais larga porque o valor
   "Pesquisa → Wireframe → UI" não cabe em 82px. */
.agri-facts{
  display:grid; grid-template-columns:82px 82px 217px; gap:0 164px; margin:0;
}
.agri-fact span{
  display:block; font-family:var(--font-body); font-size:14px; line-height:24px; color:#8C8C99;
}
.agri-fact strong{
  display:block; font-family:var(--font-body); font-size:14px; font-weight:700;
  line-height:24px; color:#FFF;
}

/* ---------- Corpo ---------- */
.agri-body{background:#E5E3E4; padding:var(--space-6) 0 0;}
.agri-block{margin-bottom:var(--space-5);}
.agri-block:last-child{margin-bottom:0;}
.agri-tag{
  display:flex; width:fit-content; align-items:center; gap:8px;
  font-family:var(--font-body); font-weight:400; font-size:14px;
  color:#E06011; margin-bottom:var(--space-2);
}
.agri-tag::before{content:""; width:11px; height:1px; background:#E06011; flex:none;}
/* No hero o eyebrow (texto e tracinho) vai em branco, não no laranja do corpo — sobre o
   degradê azul-petróleo o branco é o que realmente aparece. */
.agri-tag--hero{color:#FFF; margin-bottom:var(--space-4);}
.agri-tag--hero::before{background:#FFF;}
.agri-block h2{
  font-family:var(--font-display); font-weight:700; font-size:24px;
  line-height:1.1; letter-spacing:0; color:#000; max-width:552px; margin:0 0 var(--space-2);
}
.agri-block p{
  font-family:var(--font-display); font-weight:400; font-size:14px; line-height:21px;
  color:#000; max-width:470px; margin:0;
}

/* Texto à esquerda + peça à direita, nas proporções do board (coluna de 960):
   texto 546 · respiro 37 · peça 375. As imagens não levam moldura nem sombra — no board
   são recortes soltos sobre o fundo. */
.agri-split{
  display:grid; grid-template-columns:56.9% 39.1%; gap:4%;
  align-items:start; margin-bottom:var(--space-6);
}
/* Na Entrega a peça é maior (389) e encosta na coluna de texto, sem respiro. */
.agri-split--entrega{grid-template-columns:59.4% 40.6%; gap:0; align-items:center;}
.agri-media img{width:100%; height:auto; display:block;}
/* Ocupa a largura inteira da coluna (546 no board) e desce 48px do parágrafo, como no y=1210. */
.agri-figure-identidade{margin:var(--space-5) 0 0; max-width:none;}
.agri-figure-identidade img{width:100%; height:auto; display:block;}

/* As quatro telas do app, lado a lado. */
.agri-telas{
  display:grid; grid-template-columns:repeat(4,1fr); gap:100px;
  align-items:start; margin-bottom:var(--space-6);
}
.agri-telas img{width:100%; height:auto; display:block;}

/* Wireframe em largura total, fechando o case (fora do .container, direto na section). */
.agri-bleed{width:100%;}
.agri-bleed img{width:100%; height:auto; display:block;}

@media (max-width:1100px){
  .agri-hero-bg::after{
    background:linear-gradient(90deg, #002E51 0%, rgba(15,48,75,0.82) 60%, rgba(15,48,75,0.55) 100%);
  }
  .agri-hero-bg img{object-position:center;}
}
@media (max-width:900px){
  .agri-split, .agri-split--entrega{grid-template-columns:1fr; gap:var(--space-4);}
  .agri-figure-identidade{margin-top:var(--space-4);}
  .agri-media--banner{max-width:420px;}
  .agri-telas{grid-template-columns:repeat(2,1fr); gap:var(--space-5);}
  .agri-facts{grid-template-columns:repeat(3,1fr); gap:var(--space-3);}
}
@media (max-width:640px){
  .agri-telas{grid-template-columns:repeat(2,1fr); gap:var(--space-3);}
  .agri-facts{grid-template-columns:1fr 1fr; gap:var(--space-2) var(--space-3);}
  .agri-media--banner{max-width:none;}
}