/* =====================================================================
   Bruna Veiga — style.css

   Ordem da folha: fonte → tokens → reset → base → componentes → seções →
   movimento → responsivo. Os media queries ficam no fim de propósito: assim
   vencem pela ordem, com a mesma especificidade, sem precisar de !important.

   Unidades: texto e espaçamento em rem (acompanham o tamanho de fonte que a
   pessoa escolheu no navegador); imagem, ícone e linha fina em px (são
   desenho, não texto).

   Breakpoints — media query não aceita variável, então ficam anotados aqui:
     1024px  tablet: colunas viram pilha
      860px  o menu vira gaveta
      720px  o carrossel aproxima os cards (--passo)
      640px  celular
   ===================================================================== */


/* ---------- fonte ----------
   Uma fonte variável cobre de 400 a 700 num arquivo só: todos os pesos do
   projeto, uma requisição. O latin-ext só baixa se aparecer um caractere
   dele na página. */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('assets/fonts/pjs-var-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('assets/fonts/pjs-var-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}


/* =====================================================================
   TOKENS
   ===================================================================== */
:root{
  /* cor: base */
  --bg:#0b0b0d;
  --surface:#141416;          /* fundo do card enquanto a imagem carrega */
  --text:#f1f1ef;
  --text-soft:#e6e6e6;        /* links do menu */
  --muted:#aaaaaa;
  --faint:#3b3b3b;            /* texto do rodapé */
  --line:#2c2c2c;
  --line-soft:#2a2a2b;
  --chip-line:#b4b4b4;

  /* cor: marca */
  --green:#bfff38;
  --green-hover:#cfff5c;
  --green-alt:#c1fb35;        /* fundo do retrato, como veio da arte */
  --on-green:#0b0b0d;         /* texto sobre o verde */

  /* canais RGB para transparência: rgb(var(--x-rgb) / alfa) */
  --bg-rgb:11 11 13;
  --green-rgb:191 255 56;
  --text-rgb:241 241 239;

  /* cards do processo: rampa do escuro ao claro */
  --step-1:#121213;
  --step-2:#1c1c1d;
  --step-3:#313131;
  --step-4:#aaaaaa;
  --step-4-text:#ffffff;

  /* tipografia */
  --font:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fs-2xs:.75rem;                         /* 12 */
  --fs-xs:.875rem;                         /* 14 */
  --fs-sm:.9375rem;                        /* 15 */
  --fs-base:1rem;                          /* 16 */
  --fs-md:1.1875rem;                       /* 19 */
  --fs-lead:clamp(1rem,1.4vw,1.125rem);    /* 16 → 18 */
  --fs-faq:clamp(1.125rem,1.8vw,1.5rem);   /* 18 → 24 */
  --fs-h3:clamp(1.375rem,2.4vw,2rem);      /* 22 → 32 */
  --fs-stat:clamp(1.5rem,2.5vw,2.25rem);   /* 24 → 36 */
  --fs-h2:clamp(1.875rem,4.2vw,3.25rem);   /* 30 → 52 */
  --fs-h1:clamp(2rem,5vw,3.875rem);        /* 32 → 62 */
  --tracking-tight:-.05em;

  /* espaço */
  --space-2xs:.5rem;    /* 8  */
  --space-xs:.625rem;   /* 10 */
  --space-sm:.75rem;    /* 12 */
  --space-md:1rem;      /* 16 */
  --space-lg:1.25rem;   /* 20 */
  --space-xl:1.5rem;    /* 24 */
  --space-2xl:2rem;     /* 32 */
  --space-3xl:4rem;     /* 64 */
  /* os dois controles de ritmo da página inteira */
  --gutter:clamp(1.25rem,7vw,7rem);     /* margem lateral de TODAS as dobras (20 → 112) */
  --rhythm:clamp(2.5rem,5vw,3.25rem);   /* ritmo vertical entre dobras       (40 → 52)  */

  /* forma */
  --radius-xs:2px;
  --radius-sm:8px;
  --radius-md:10px;
  --radius-lg:16px;
  --radius-xl:32px;
  --radius-pill:999px;
  --glow-green:0 0 6px var(--green);

  /* movimento */
  --ease-std:cubic-bezier(.4,0,.2,1);
  --ease-swipe:cubic-bezier(.62,.05,.3,1);

  /* estrutura */
  --maxw:1600px;
  --nav-h:clamp(4.5rem,8vw,7.5rem);     /* 72 → 120 */
  --z-nav:60;
  --z-preloader:100;
  --z-skip:110;
}


/* =====================================================================
   RESET
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  scroll-behavior:smooth;scroll-padding-top:var(--nav-h);
}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,canvas{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
/* foco de teclado sempre visível, na cor da marca, em qualquer fundo */
:focus-visible{outline:2px solid var(--green);outline-offset:3px}
/* o atributo hidden precisa vencer o display de qualquer componente:
   é o único !important do layout, e é o uso para o qual ele existe */
[hidden]{display:none!important}


/* =====================================================================
   BASE
   ===================================================================== */
/* pretty: o navegador guarda palavras para a última linha não ficar sozinha.
   balance: distribui títulos curtos em linhas de tamanho parecido. Onde não
   houver suporte, a quebra volta ao normal — nada quebra. */
h1,h2,h3,.badge,.acc-head .t{text-wrap:balance}
p{text-wrap:pretty}

h1{font-size:var(--fs-h1);font-weight:600;line-height:1.18;letter-spacing:var(--tracking-tight)}
h2{font-size:var(--fs-h2);font-weight:500;line-height:1.24;letter-spacing:var(--tracking-tight)}
.lead{font-size:var(--fs-lead);line-height:1.5;color:var(--muted)}
.green{color:var(--green)}

/* estrutura: a moldura com as duas linhas verticais */
.frame{max-width:var(--maxw);margin:0 auto;border-inline:1px solid var(--line)}

/* pular para o conteúdo: invisível até receber o foco do teclado */
.pular{
  position:fixed;top:var(--space-sm);left:var(--space-sm);z-index:var(--z-skip);
  padding:var(--space-sm) var(--space-md);border-radius:var(--radius-pill);
  background:var(--green);color:var(--on-green);
  font-size:var(--fs-xs);font-weight:600;
  transform:translateY(-200%);
}
.pular:focus{transform:none}


/* =====================================================================
   COMPONENTES
   ===================================================================== */

/* ---------- selo (bolinha verde + texto) ----------
   o espaço vem do margin da bolinha, não de gap: com gap, o <b> e o texto
   viram dois itens de flex e o espaço entre as palavras dobrava */
.badge{
  display:inline-flex;align-items:center;
  margin-bottom:var(--space-sm);
  font-size:var(--fs-2xs);font-weight:500;color:var(--muted);
}
.badge::before{
  content:"";flex:none;width:6px;height:6px;margin-right:var(--space-xs);
  background:var(--green);box-shadow:var(--glow-green);
}
.badge b{font-weight:700;color:var(--muted)}

/* ---------- etiqueta ---------- */
.chip{
  padding:5px var(--space-md) 4px;
  border:1px solid var(--chip-line);border-radius:var(--radius-pill);
  font-size:var(--fs-2xs);font-weight:500;line-height:1.6;letter-spacing:-.005em;
  white-space:nowrap;color:var(--muted);
}

/* ---------- botões (letras que deslizam) ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:var(--btn-w,auto);          /* travado em px pelo JS: nunca cresce */
  min-height:3.5rem;padding:0 var(--space-2xl);
  border-radius:var(--radius-pill);
  font-size:var(--fs-base);font-weight:600;
  overflow:hidden;isolation:isolate;
  transition:background-color .25s ease,border-color .25s ease,color .25s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn-primary{background:var(--green);color:var(--on-green)}
.btn-ghost{border:1px solid var(--text);color:var(--text)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--space-xs)}
.btn-row.centro{justify-content:center}

/* o conteúdo animado nunca intercepta o clique */
.swipe{display:inline-flex;pointer-events:none}
/* cada letra é uma janela que corta o que sai: sem isso as duas cópias
   aparecem juntas e o efeito fica sujo */
.swipe .ch{display:inline-block;overflow:hidden;height:1.3em;line-height:1.3em;vertical-align:top}
.swipe .ch i{display:block;font-style:normal;transition:transform .38s var(--ease-swipe)}
.swipe .ch i::after{content:attr(data-c);display:block}
/* quem navega pelo teclado vê o mesmo efeito de quem passa o mouse */
.btn:focus-visible .swipe .ch i{transform:translateY(-50%)}

/* ---------- acordeão ----------
   Um componente, duas variações (Serviços e Dúvidas) trocando só variáveis:
   nenhuma regra precisa de seletor mais forte para desfazer outra. */
.acc{
  --acc-pad:var(--space-md);
  --acc-gap:var(--space-md);
  --acc-t:var(--fs-h3);
  --acc-linha:transparent;
  --acc-p-max:36.625rem;             /* 586 */
  --acc-p-fim:var(--space-xl);
}
.acc-faq{
  --acc-pad:var(--space-lg);
  --acc-gap:var(--space-xl);
  --acc-t:var(--fs-faq);
  --acc-linha:var(--line-soft);
  --acc-p-max:45rem;                 /* 720 */
  --acc-p-fim:var(--space-lg);
  max-width:61.25rem;                /* 980 */
}
.acc-item{border-bottom:1px solid var(--acc-linha);transition:border-color .3s ease}
.acc-item.open{border-bottom-color:var(--green)}
.acc-titulo{font:inherit}
.acc-head{
  display:flex;align-items:center;gap:var(--acc-gap);
  width:100%;padding:var(--acc-pad) 0;text-align:left;
}
.acc-head .n{font-size:var(--fs-base);font-weight:500;letter-spacing:var(--tracking-tight);color:var(--muted);transition:color .25s}
.acc-head .t{flex:1;font-size:var(--acc-t);font-weight:500;line-height:1.3;letter-spacing:var(--tracking-tight);color:var(--text)}
.acc-head .ico{position:relative;flex:none;width:26px;height:26px}
.acc-head .ico::before,.acc-head .ico::after{
  content:"";position:absolute;top:12px;left:6px;width:14px;height:2px;
  background:var(--text);transition:transform .3s ease;
}
.acc-head .ico::after{transform:rotate(90deg)}
.acc-item.open .ico::after{transform:rotate(0)}
.acc-item.open .n{color:var(--green)}
/* Sem JavaScript os painéis ficam abertos — ninguém conseguiria abri-los.
   Com JavaScript, o painel fechado também fica visibility:hidden: some da
   ordem do Tab e do leitor de tela (antes, o link "Só me chamar" recebia foco
   estando invisível). O atraso no visibility deixa a animação de fechar
   terminar antes de esconder. */
.acc-body{display:grid;grid-template-rows:1fr}
.js .acc-body{
  grid-template-rows:0fr;visibility:hidden;
  transition:grid-template-rows .38s var(--ease-std),visibility 0s .38s;
}
.js .acc-item.open .acc-body{
  grid-template-rows:1fr;visibility:visible;
  transition:grid-template-rows .38s var(--ease-std),visibility 0s;
}
.acc-body > div{overflow:hidden}
.acc-body p{max-width:var(--acc-p-max);padding-bottom:var(--acc-p-fim);font-size:var(--fs-base);line-height:1.6;color:var(--muted)}
.acc-body a{color:var(--green);text-decoration:underline;text-underline-offset:3px}

/* ---------- serviços: o item aberto passa a vez sozinho ----------
   A linha embaixo do item aberto é a barra de carregamento: nasce apagada e
   vai ficando verde da esquerda para a direita. Quando enche, o JS abre o item
   seguinte — o fim da animação é o único relógio, então o tempo está aqui e em
   nenhum outro lugar.

   Só existe com JavaScript: sem ele os três painéis já ficam abertos e não há
   quem passe a vez. Com prefers-reduced-motion o reset global torna a animação
   instantânea: a barra nasce cheia (a linha verde de sempre) e o JS não passa
   a vez — nada se move sozinho, que é o combinado. */
.js .acc[data-auto]{--acc-tempo:7s}
.js .acc[data-auto] .acc-item{position:relative}
.js .acc[data-auto] .acc-item.open{border-bottom-color:rgb(var(--green-rgb) / .22)}
.js .acc[data-auto] .acc-item.open::after{
  content:"";position:absolute;left:0;bottom:-1px;width:100%;height:1px;
  background:var(--green);transform:scaleX(0);transform-origin:left;
  animation:accCarregar var(--acc-tempo) linear forwards;
}
/* parado: mouse em cima, foco do teclado dentro, aba escondida ou fora da tela */
.js .acc[data-auto].parado .acc-item.open::after{animation-play-state:paused}
@keyframes accCarregar{to{transform:scaleX(1)}}


/* =====================================================================
   SEÇÕES
   ===================================================================== */

/* ---------- tela de carregamento ----------
   só existe quando há JavaScript: sem ele o site aparece direto, em vez de
   ficar preso atrás de uma capa que ninguém consegue remover */
.preloader{display:none}
.js .preloader{
  position:fixed;inset:0;z-index:var(--z-preloader);
  display:grid;place-items:center;
  padding:0 var(--gutter);
  background:var(--bg);
  transition:opacity .6s ease,visibility .6s ease;
}
.preloader.done{opacity:0;visibility:hidden}
.pre-box{display:flex;flex-direction:column;align-items:center;gap:clamp(1.5rem,4vw,2.5rem);width:100%}
.pre-stage{position:relative;width:100%;max-width:820px;aspect-ratio:1331/373}
.pre-stage canvas{position:absolute;inset:0;width:100%;height:100%}
.pre-txt{
  display:flex;align-items:center;gap:var(--space-xs);
  font-size:var(--fs-xs);font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);
}
.pre-txt::before{
  content:"";width:6px;height:6px;
  background:var(--green);box-shadow:var(--glow-green);
  animation:pulse 1.1s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.25;transform:scale(.7)}}
/* enquanto a capa está cobrindo, nada rola atrás */
body.loading{overflow:hidden}

/* ---------- menu ---------- */
.nav{
  position:fixed;inset:0 0 auto;z-index:var(--z-nav);
  background:rgb(var(--bg-rgb) / .85);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line-soft);
}
/* logo | menu centralizado no eixo da barra | idioma */
.nav .frame{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--space-xl);
  height:var(--nav-h);padding:0 var(--gutter);
}
.nav-logo{justify-self:start}
.nav-logo img{width:auto;height:clamp(28px,3vw,46px)}
/* links e botão viajam juntos e o conjunto fica centrado na barra */
.nav-center,.nav-links{display:flex;align-items:center;gap:clamp(1.25rem,2.4vw,2rem)}
.nav-center{justify-self:center}
.nav-links a{font-size:var(--fs-xs);font-weight:500;color:var(--text-soft);transition:color .2s}
.nav-right{justify-self:end;display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem)}
.nav-cta{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:3.25rem;padding:0 var(--space-2xl);border-radius:var(--radius-pill);
  font-size:var(--fs-base);color:var(--text);
  background:rgb(85 85 85 / .15);border:1px solid rgb(240 240 240 / .05);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  transition:background-color .2s,border-color .2s;
}

/* seletor de idioma: dois links, o da página atual marcado */
.lang{display:inline-flex;flex:none;align-items:center;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-pill)}
.lang a{
  display:inline-flex;align-items:center;gap:var(--space-2xs);
  padding:var(--space-2xs) .875rem;
  font-size:var(--fs-2xs);font-weight:600;letter-spacing:.06em;
  color:var(--muted);transition:color .2s,background-color .2s;
}
.lang a[aria-current="page"]{background:var(--green);color:var(--on-green)}
/* o .lang corta o que vaza (overflow:hidden): o contorno de foco vai para dentro */
.lang a:focus-visible{outline-offset:-3px}
.lang .flag{
  flex:none;width:20px;height:14px;border-radius:var(--radius-xs);
  box-shadow:0 0 0 1px rgb(0 0 0 / .35);
  opacity:.55;transition:opacity .2s;
}
.lang a[aria-current="page"] .flag{opacity:1}

.nav-toggle{display:none;flex-direction:column;gap:6px;padding:var(--space-2xs)}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--text);transition:transform .25s ease,opacity .25s ease}
.nav-toggle.open span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;
  margin-top:var(--nav-h);
  padding:clamp(4rem,9vw,7.5rem) var(--gutter) clamp(3.5rem,8vw,6.875rem);   /* 64→120 · 56→110 */
  border-bottom:1px solid var(--line);
  text-align:center;
}
/* A luz verde. O centro dela fica em 50% da largura e 37,5% da altura do hero
   (top -30% + 45% de 150%). No desktop ela segue o mouse: o JS escreve o
   deslocamento em --luz-x/--luz-y e a luz anda por transform — a camada só é
   deslocada, o gradiente não é redesenhado a cada quadro. Sem mouse, fica
   parada no centro, como sempre foi. */
.hero::before{
  content:"";position:absolute;top:-30%;left:50%;
  width:120%;height:150%;
  transform:translate(calc(-50% + var(--luz-x,0px)),var(--luz-y,0px));
  background:radial-gradient(ellipse 50% 45% at 50% 45%,rgb(var(--green-rgb) / .13),transparent 70%);
  pointer-events:none;
}
/* camada própria só enquanto a luz está andando; parada, ela é liberada */
.hero.luz::before{will-change:transform}
.hero-inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:1.125rem;max-width:74.875rem;margin:0 auto}
/* 50rem: largura para o subtítulo caber em duas linhas nas telas largas (em
   37,5rem ele virava um bloco estreito de três linhas); balance deixa as
   linhas de tamanho parecido, sem sobra curta no fim */
.hero .lead{max-width:50rem;text-wrap:balance}

/* Digitação do título. O fantasma reserva o espaço e o texto vivo escreve na
   MESMA célula de grid: os dois têm a mesma largura (mesmas quebras de linha)
   e a altura do h1 é sempre a do maior.
   O fantasma some por opacity, não por visibility: visibility o tirava da
   árvore de acessibilidade, e como o texto vivo é aria-hidden, o leitor de
   tela ficava sem título nenhum na página. */
.tw{text-wrap:normal}          /* as quebras vêm do <br>; balance brigaria com a digitação */
.tw-ghost{display:block}
.tw-live{display:none}
.js-tw{display:grid}
.js-tw .tw-ghost{grid-area:1/1;opacity:0}
.js-tw .tw-live{grid-area:1/1;display:block}
.caret{
  display:inline-block;width:3px;height:.82em;margin-left:.06em;vertical-align:-.06em;
  background:var(--green);
  animation:blink 1s steps(2,start) infinite;
}
.caret.done{animation:fade-out .5s ease 2.4s forwards}
@keyframes blink{to{visibility:hidden}}
@keyframes fade-out{to{opacity:0}}

/* ---------- números ---------- */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-xs);
  padding:var(--rhythm) var(--gutter);border-bottom:1px solid var(--line);
}
.stat{display:flex;flex-direction:column;gap:var(--space-sm);padding-right:var(--space-md)}
.stat .dot{width:10px;height:10px;background:var(--green)}
.stat .num{
  position:relative;display:block;
  font-size:var(--fs-stat);font-weight:500;line-height:1.2;letter-spacing:var(--tracking-tight);
  font-variant-numeric:tabular-nums;
}
/* o fantasma segura a largura final (o número nunca empurra nada) e é o que o
   leitor de tela lê; o contador animado por cima é aria-hidden */
.num .g{opacity:0}
.num .v{position:absolute;top:0;left:0;white-space:nowrap}
.stat p{font-size:var(--fs-base);line-height:1.5;color:var(--muted)}

/* ---------- cabeçalhos de dobra ---------- */
.head-2col{
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-3xl);
  padding:var(--rhythm) var(--gutter);border-bottom:1px solid var(--line);
}
.head-2col .side{flex:none;text-align:right;color:var(--muted)}
/* divisor vertical na metade, como no Figma */
.head-2col.partido{position:relative}
.head-2col.partido::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--line)}
.side .who{font-size:var(--fs-2xs);font-weight:500;line-height:1.5}
.side .tag{font-size:var(--fs-base);line-height:1.5}
.side-stack{display:flex;flex-direction:column;align-items:flex-end;align-self:stretch;justify-content:space-between;gap:var(--space-xl)}

/* etiquetas de categoria no cabeçalho da seção Projetos */
.tags{display:flex;flex:none;align-items:center;gap:clamp(.5rem,2.5vw,1rem)}

/* ---------- carrossel de projetos ----------
   Coverflow: um card no centro em tamanho cheio, os vizinhos menores e mais
   apagados, sobrepostos. A posição de cada card é calculada no JS (translate +
   scale) porque depende de quantas casas ele está do centro. A distância é
   circular: o último card é vizinho do primeiro, então o giro não tem ponta. */
.carousel{position:relative;padding:var(--rhythm) var(--gutter);border-bottom:1px solid var(--line)}
/* sem JavaScript não há quem posicione os cards: vira uma fileira rolável.
   --passo é a distância entre cards, em frações da largura de um card; o JS lê. */
.palco{--passo:.72;display:flex;gap:var(--space-2xl);overflow-x:auto;scrollbar-width:none}
.palco::-webkit-scrollbar{display:none}
.palco > .card{flex:none}
/* recorta nas bordas: é assim que os cards das pontas somem para dentro da
   dobra, em vez de empurrar a largura da página */
.js .palco{position:relative;display:block;height:var(--palco-h,660px);overflow:hidden}
.palco:focus-visible{outline-offset:12px;border-radius:var(--radius-sm)}
.card{width:min(408px,72vw)}
/* sem will-change: com ele, os 13 cards viravam 13 camadas de GPU fixas o
   tempo todo, até as invisíveis. O navegador já promove a camada sozinho
   durante a transição de transform e opacity. */
.js .card{
  position:absolute;top:0;left:50%;
  transform-origin:50% 0;
  transition:transform .5s var(--ease-std),opacity .5s var(--ease-std);
}
.card:not(.ativo){cursor:pointer}
.card.longe{pointer-events:none}   /* a opacidade vem do JS, inline */
.card .shot{overflow:hidden;aspect-ratio:408/528;border-radius:var(--radius-lg);background:var(--surface)}
.card .shot img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.6,.2,1)}
/* a legenda é do card do centro: nos vizinhos ela existe (leitor de tela e
   buscador leem), mas não aparece, senão o palco vira uma parede de texto */
.card .info{padding:1.125rem 2px 0;transition:opacity .35s ease}
.js .card:not(.ativo) .info{opacity:0}
.card.ativo .info{transition-delay:.12s}
.card .info .chip{display:inline-block;margin-bottom:var(--space-xs)}
.card .info h3{margin-bottom:6px;font-size:var(--fs-md);font-weight:500;line-height:1.3;letter-spacing:-.04em}
.card .info p{font-size:var(--fs-sm);line-height:1.5;letter-spacing:-.02em;color:var(--muted)}

/* ---------- duas colunas (Serviços, Sobre) ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-bottom:1px solid var(--line)}
.split > *{padding:var(--rhythm) var(--gutter)}
.split > :first-child{border-right:1px solid var(--line)}
.pane-center{display:flex;align-items:center;justify-content:center}

/* ---------- serviços: imagem que acompanha o acordeão ---------- */
.showcase{
  position:relative;overflow:hidden;
  width:100%;max-width:696px;aspect-ratio:696/468;
  border-radius:var(--radius-xl);background:var(--green);
}
.showpane{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border-radius:var(--radius-xl);
  opacity:0;pointer-events:none;transition:opacity .45s ease;
}
.showpane.on{opacity:1}

/* ---------- sobre ---------- */
.sobre-titulo{margin-bottom:var(--space-xl)}
.about-text p{max-width:70ch;margin-bottom:.875rem;font-size:var(--fs-lead);line-height:1.5;color:var(--muted)}
.about-text p:last-child{margin-bottom:0}
.about-text b{font-weight:700;color:var(--text)}
.portrait{
  position:relative;overflow:hidden;
  width:100%;max-width:696px;aspect-ratio:696/430;
  border-radius:var(--radius-xl);background:var(--green-alt);
}
/* a arte já vem composta com o fundo verde: preenche a moldura inteira */
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- processo ---------- */
.steps{display:flex;flex-direction:column;gap:var(--space-md);padding:var(--space-md);border-bottom:1px solid var(--line)}
.step{display:flex;flex-direction:column;gap:var(--space-2xl);padding:var(--rhythm) var(--gutter);border-radius:var(--radius-md)}
.step .top{display:flex;align-items:center;gap:var(--space-md)}
.step .n{font-size:var(--fs-base);font-weight:500;letter-spacing:var(--tracking-tight);color:var(--muted)}
.step h3{font-size:var(--fs-h3);font-weight:500;line-height:1.3;letter-spacing:var(--tracking-tight)}
/* o card é largo demais para o texto correr solto: sem medida de leitura,
   sobrava uma última linha de duas palavras */
.step p{max-width:70ch;font-size:var(--fs-base);line-height:1.6;color:var(--muted)}
.step-1{background:var(--step-1)}
.step-2{background:var(--step-2)}
.step-3{background:var(--step-3)}
.step-4{background:var(--step-4)}
.step-4 .n,.step-4 p{color:var(--step-4-text)}

/* ---------- dúvidas ---------- */
.faq-wrap{padding:var(--rhythm) var(--gutter);border-bottom:1px solid var(--line)}

/* ---------- chamada final ---------- */
.cta{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-3xl);padding:var(--rhythm) var(--gutter)}
.cta-left{display:flex;flex-direction:column;gap:var(--space-sm);max-width:37.5rem}
.cta-left .btn-row{margin-top:.875rem}
.socials{display:flex;align-items:center;gap:clamp(1.5rem,4vw,2.9375rem)}   /* 24 → 47 */
.socials a{transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.socials img{width:clamp(44px,4vw,66px);height:auto}

/* ---------- rodapé: marca em partículas + créditos ---------- */
.bigmark{display:flex;justify-content:center;padding:clamp(2rem,5vw,3.75rem) var(--gutter);border-top:1px solid var(--line)}
/* proporção do SVG já com o respiro que evita cortar os cantos da marca */
.bigmark .stage{position:relative;width:100%;max-width:1180px;aspect-ratio:1331/373}
.bigmark canvas{position:absolute;inset:0;width:100%;height:100%}
.bigmark .fallback{position:absolute;inset:0;display:grid;place-items:center}
.bigmark .fallback img{width:100%;height:100%;object-fit:contain}

.copy{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);
  padding:2.25rem var(--gutter);border-top:1px solid var(--line);
}
.copy p,.copy a{font-size:var(--fs-base);font-weight:500;letter-spacing:-.03em;color:var(--faint)}
.copy a{white-space:nowrap;text-decoration:underline;transition:color .2s}   /* link nunca quebra no meio */

/* ---------- entrada ao rolar ----------
   só com JavaScript: sem ele ninguém adiciona o .in, e o conteúdo ficaria
   invisível para sempre */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.in{opacity:1;transform:none}


/* =====================================================================
   MOVIMENTO
   ===================================================================== */
/* Quem pede menos movimento no sistema recebe o estado final de tudo, sem
   animação. Um bloco só cobre o site inteiro — inclusive o que for criado
   depois — em vez de uma lista que alguém esquece de atualizar. O JS também
   respeita: sem capa, digitação, contador, partículas nem passeio automático. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;transition-delay:0s!important;
    scroll-behavior:auto!important;
  }
  .js .reveal{opacity:1;transform:none}
}

/* hover só onde existe mouse de verdade: no toque, o hover "gruda" depois do toque */
@media (hover:hover) and (pointer:fine){
  .nav-links a:hover{color:var(--green)}
  .nav-cta:hover{background:rgb(var(--green-rgb) / .15);border-color:rgb(var(--green-rgb) / .35)}
  .lang a:hover{color:var(--text)}
  .lang a[aria-current="page"]:hover{color:var(--on-green)}
  .btn-primary:hover{background:var(--green-hover)}
  .btn-ghost:hover{background:rgb(var(--text-rgb) / .08)}
  .btn:hover .swipe .ch i{transform:translateY(-50%)}
  .card.ativo:hover .shot img{transform:scale(1.05)}
  .socials a:hover{transform:translateY(-5px)}
  .copy a:hover{color:var(--muted)}
  .step{transition:transform .3s ease}
  .step:hover{transform:translateY(-3px)}
}


/* =====================================================================
   RESPONSIVO (fica no fim da folha de propósito)
   ===================================================================== */
@media (max-width:1024px){
  .split{grid-template-columns:1fr}
  .split > :first-child{border-right:0;border-bottom:1px solid var(--line)}
  .stats{grid-template-columns:repeat(2,1fr);gap:var(--space-2xl) var(--space-xs)}
  .head-2col{flex-direction:column;align-items:flex-start;gap:var(--space-2xl)}
  .head-2col .side{text-align:left}
  .head-2col.partido::after{display:none}   /* empilhado, a linha do meio não faz sentido */
  .tags{flex-wrap:wrap}
  .side-stack{flex-direction:row;align-items:flex-start;width:100%}
  .cta{flex-direction:column;align-items:flex-start;gap:2.5rem}
  /* rodapé no tablet: copyright e "Voltar ao topo" não cabem lado a lado
     (o copyright partia em duas linhas). Copyright numa linha própria, o
     link embaixo. */
  .copy{display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:var(--space-sm) var(--space-lg)}
  .copy p{grid-column:1 / -1}
}

@media (max-width:860px){
  /* sem menu central aqui, o grid de 3 colunas só apertava e estourava a
     largura: volta para flex com logo de um lado e idioma/menu do outro */
  .nav .frame{display:flex;align-items:center;justify-content:space-between;gap:var(--space-sm)}
  .nav-center{display:contents}
  /* a gaveta fechada também fica visibility:hidden: antes, os links
     escondidos acima da tela continuavam recebendo o foco do Tab */
  .nav-links{
    position:fixed;top:var(--nav-h);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    padding:var(--space-2xs) 0;
    background:rgb(var(--bg-rgb) / .98);
    border-bottom:1px solid var(--line);
    transform:translateY(-140%);visibility:hidden;
    transition:transform .3s ease,visibility 0s .3s;
  }
  .nav-links.open{transform:none;visibility:visible;transition:transform .3s ease,visibility 0s}
  .nav-links a{padding:var(--space-md) var(--gutter);font-size:var(--fs-base);border-bottom:1px solid var(--line-soft)}
  .nav-links a:last-child{border-bottom:0}
  .nav-toggle{display:flex}
  .nav-cta{display:none}
}

/* mesmo corte que o JS usava (innerWidth < 720) */
@media (max-width:719.98px){
  .palco{--passo:.86}
}

@media (max-width:640px){
  .stats{grid-template-columns:1fr;gap:var(--space-2xl)}
  .btn{width:100%;min-height:3.25rem;padding:0 var(--space-xl)}
  .btn-row{width:100%}
  .step{gap:var(--space-lg)}
  .copy{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-xs)}
  .frame{border-inline:0}
}