:root{
  /* ===== PALETA: escura, monocromática, levemente quente =====
     Toda cor do site sai daqui. Os triplets existem para compor alpha
     sem espalhar valores literais pelo arquivo. */
  --ink:#0D0A0A;          /* fundo principal */
  --ink-2:#261B1D;        /* fundo suave e superfícies */
  --ink-3:#403638;        /* superfícies elevadas */
  --paper:#F2EEEE;        /* texto principal, branco quente */
  --muted:#B7ACAC;        /* texto secundário */
  --muted-2:#8A7E7E;      /* texto terciário */
  --accent:#A29595;       /* rótulos e detalhes */
  --cream:#C9BDBD;        /* realce quente discreto */
  --ink-rgb:13,10,10;
  --paper-rgb:242,238,238;
  --warm-rgb:115,104,104;
  --line:rgba(var(--warm-rgb),.20);
  --line-strong:rgba(var(--warm-rgb),.36);
  --glass:rgba(38,27,29,.55);
  --font:'Onest',system-ui,sans-serif;--mono:'JetBrains Mono',ui-monospace,monospace;
  --gutter:clamp(1.25rem,5vw,5rem);
  /* ===== SISTEMA DE MOVIMENTO =====
     Início responsivo, final desacelerado, distâncias curtas.
     Nada de ease-in-out genérico, nada linear, nada elástico. */
  --ease-soft:cubic-bezier(.16,1,.3,1);
  --ease-smooth:cubic-bezier(.22,1,.36,1);
  --ease-out-expo:var(--ease-soft);      /* aliases legados */
  --ease-out-smooth:var(--ease-smooth);
  --dur-micro:350ms;
  --dur-fast:500ms;
  --dur-default:700ms;
  --dur-slow:1000ms;
  --dur-reveal:1200ms;
  --dur-ambient:1600ms;
  --grain-url:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;margin:0;padding:0}
/* clip em vez de hidden: contém o sangramento lateral sem criar um
   contêiner de rolagem nem inflar o scrollWidth do documento */
html{scroll-behavior:smooth;overflow-x:clip}
body{font-family:var(--font);background:var(--ink);color:var(--paper);line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:clip;position:relative}
body.locked{overflow:hidden;height:100dvh}

/* Nenhum filter:blur() no site. Gradiente radial já é suave por natureza;
   o blur só custava pintura. Os stops foram alargados para compensar. */
.glow{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.cursor-glow{position:fixed;top:0;left:0;width:420px;height:420px;margin:-210px 0 0 -210px;
  border-radius:50%;pointer-events:none;z-index:-1;opacity:0;
  background:radial-gradient(circle,rgba(201,189,189,.13),rgba(115,104,104,.06) 42%,transparent 70%);
  transform:translate(var(--mx,50vw),var(--my,50vh));
  transition:transform .55s var(--ease-out-smooth),opacity var(--dur-default) var(--ease-out-smooth)}
.cursor-glow.on{opacity:1}
@media(prefers-reduced-motion:reduce),(pointer:coarse){.cursor-glow{display:none}}
.orb{position:absolute;border-radius:50%}
.orb.a{width:88vw;height:88vw;top:-40vw;right:-30vw;background:radial-gradient(circle,rgba(89,79,79,.20),rgba(89,79,79,.06) 44%,transparent 72%)}
.orb.b{width:76vw;height:76vw;bottom:-36vw;left:-30vw;background:radial-gradient(circle,rgba(64,54,56,.22),rgba(64,54,56,.07) 46%,transparent 74%)}

.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.3;mix-blend-mode:soft-light;background:var(--grain-url)}
a{color:inherit;text-decoration:none}

/* ===== INTRO =====
   Não existe um segundo nome. O véu cobre a página e o próprio .hero-name
   sobe acima dele, então é literalmente o mesmo elemento que atravessa as
   duas etapas: nenhum crossfade entre cópias, nenhum salto de posição. */
.intro-veil{position:fixed;inset:0;z-index:90;background:var(--ink);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--dur-slow) var(--ease-soft),visibility var(--dur-slow)}
.js body.intro-mode .intro-veil{opacity:1;visibility:visible}
/* o véu começa a sair junto com o assentamento do nome, não depois dele */
.js body.intro-mode.hero-in .intro-veil{opacity:0}
.js body.intro-mode:not(.hero-in) .intro-veil{transition:none}
body.intro-mode{overflow:hidden}
/* a hero inteira sobe acima do véu durante a intro: só o nome está visível
   (os secundários ainda estão em opacity 0), e quando eles entram já ficam
   por cima do véu que se dissolve. A classe sai no fim e tudo volta ao
   empilhamento normal, sem passar por cima do header. */
.js body.intro-mode .hero{position:relative;z-index:95}

.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;color:var(--accent);font-weight:500;
  display:inline-flex;align-items:center;gap:.6em}
.eyebrow::before{content:"";width:1.6em;height:1px;background:var(--accent);opacity:.5}
.wrap{max-width:1280px;margin:0 auto;padding-inline:var(--gutter)}

header{position:fixed;top:0;left:0;right:0;z-index:50;transition:transform var(--dur-default) var(--ease-out-smooth)}
.nav{margin:1.1rem var(--gutter);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.4rem}
.nav .menu-btn{justify-self:center}
.nav .nav-right{justify-self:end}
.brand{font-weight:600;letter-spacing:-.01em;font-size:1rem}
.brand span{color:var(--cream)}
.nav-right{display:flex;align-items:center;gap:1rem}
.menu-btn{display:inline-flex;align-items:center;gap:.6em;cursor:pointer;font-family:var(--font);
  font-size:.88rem;font-weight:500;color:var(--paper);padding:.6rem 1.1rem;border-radius:100px;
  background:rgba(var(--paper-rgb),.08);border:1px solid rgba(var(--paper-rgb),.16);
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
  transition:background-color var(--dur-micro) var(--ease-out-smooth),border-color var(--dur-micro) var(--ease-out-smooth)}
.menu-btn:hover{background:rgba(var(--paper-rgb),.14);border-color:rgba(var(--paper-rgb),.3)}
.menu-btn i{width:9px;height:9px;flex:none;
  background-image:radial-gradient(circle,var(--muted) 1.4px,transparent 1.5px);
  background-size:4.5px 4.5px}

.nav-cta{position:relative;display:inline-flex;align-items:center;gap:.55em;cursor:pointer;
  font-family:var(--font);font-size:.88rem;font-weight:500;color:var(--ink);
  padding:.6rem 1.1rem;border-radius:100px;background:var(--paper);border:none;
  transition:transform var(--dur-micro) var(--ease-soft),
             background-color var(--dur-micro) var(--ease-soft)}
.nav-cta svg{width:14px;height:14px;flex:none;
  transition:transform var(--dur-fast) var(--ease-soft)}
.nav-cta .nc-label{display:inline-block;
  transition:opacity var(--dur-micro) var(--ease-soft),transform var(--dur-fast) var(--ease-soft)}
/* No hover o rótulo some e o ícone caminha até o centro. O texto continua no
   fluxo, só invisível, então a largura do botão não muda: zero layout shift.
   --nc-shift é medido pelo JS, porque o rótulo muda de largura com o idioma. */
@media(hover:hover){
  .nav-cta:hover{transform:translateY(-2px)}
  .nav-cta:hover .nc-label{opacity:0;transform:translateX(-6px)}
  .nav-cta:hover svg{transform:translateX(var(--nc-shift,0px)) scale(1.12)}}
@media(max-width:480px){.nav-cta .nc-label{display:none}}

/* ===== HERO: o nome é o centro exato da tela =====
   Só o nome fica no fluxo. Tag, carimbo e "role para explorar" são
   absolutos, então não empurram o nome do centro do viewport, que é o que
   permite ele atravessar a intro sem se mover um pixel. */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;
  padding-block:0;text-align:center}

.hero-tag{position:absolute;top:6.6rem;left:0;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.03em;color:var(--accent)}
.hero-when{position:absolute;bottom:2.4rem;left:0;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.015em;color:var(--muted-2)}
.hero-when b{color:var(--muted);font-weight:400}
.hero-when #stamp{margin-left:.7em}
.hero-scroll{position:absolute;bottom:2.4rem;left:50%;translate:-50% 0;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.015em;color:var(--muted-2);
  transition:color var(--dur-micro) var(--ease-soft)}
.hero-scroll:hover{color:var(--paper)}

/* Peso 600 é o teto. A presença vem da escala e do tracking, não do peso. */
.hero-name{font-size:clamp(3.2rem,11vw,10rem);font-weight:600;
  line-height:.9;letter-spacing:-.055em;margin:0}
.hn-mask{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.hn-line{display:block}
.js .hero-name .hn-line,.js .hn-mask.reveal .hn-line{transform:translateY(105%)}
.hn-line i{font-style:normal;color:var(--cream)}

/* a escala assenta de 1.06 para 1: um acomodar, não um zoom */
.js .hero-name{transform:scale(var(--nscale,1));transform-origin:50% 50%;
  transition:transform var(--dur-slow) var(--ease-soft)}
.js body.intro-mode:not(.hero-in) .hero-name{--nscale:1.06}

@media(max-width:760px){
  .js body.intro-mode:not(.hero-in) .hero-name{--nscale:1.03}
  .hero-tag{top:6rem;left:50%;translate:-50% 0;white-space:nowrap}
  .hero-when{left:50%;translate:-50% 0;bottom:4.4rem;white-space:nowrap}
  .hero-scroll{bottom:2rem}
}

section{padding-block:clamp(4rem,8vw,7rem)}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:2rem;
  border-top:1px solid var(--line);padding-top:1.4rem;margin-bottom:3rem}
.sec-head h2{font-size:clamp(1.4rem,2.4vw,2rem);font-weight:500;letter-spacing:-.02em}
.sec-head .count{font-family:var(--mono);font-size:.78rem;color:var(--muted-2)}

/* WORK CARDS */
.cards{display:grid;grid-template-columns:1fr;gap:1.6rem}
@media(min-width:860px){.cards{grid-template-columns:1fr 1fr;gap:1.6rem}}
.card{position:relative;display:block;aspect-ratio:4/3.4;border-radius:22px;overflow:hidden;
  border:1px solid var(--line-strong);background:var(--ink-2);
  transition:transform var(--dur-default) var(--ease-out-smooth),border-color var(--dur-micro) var(--ease-out-smooth)}
/* o container fica estável e só a arte amplia, bem de leve */
.card:hover{transform:translateY(-4px);border-color:rgba(var(--paper-rgb),.28)}
/* preview art (troque a div .scene por <img src="assets/case-XX.jpg" class="scene"> no deploy) */
.scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.01);transition:transform var(--dur-slow) var(--ease-out-smooth)}
.card:hover .scene{transform:scale(1.035)}
.card::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(var(--ink-rgb),.42) 0%,transparent 34%,transparent 52%,rgba(var(--ink-rgb),.82) 100%),var(--grain-url);
  background-blend-mode:normal,soft-light}
.thumb{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;
  border:1px solid var(--line-strong);background:var(--ink-2)}
.thumb::after{content:"";position:absolute;inset:0;background:var(--grain-url);opacity:.32;
  mix-blend-mode:soft-light;pointer-events:none}
.card-tags{position:absolute;z-index:2;top:1.1rem;right:1.1rem;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.5rem}
.card-tags span{font-family:var(--mono);font-size:.66rem;letter-spacing:.02em;color:var(--paper);
  background:rgba(var(--paper-rgb),.10);border:1px solid rgba(var(--paper-rgb),.20);
  backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%);
  padding:.42rem .8rem;border-radius:100px;white-space:nowrap}
.card-foot{position:absolute;z-index:2;left:1.6rem;right:1.6rem;bottom:1.5rem;
  display:flex;align-items:flex-end;justify-content:space-between;gap:1rem}
.card-foot h3{font-size:clamp(1.3rem,2.1vw,1.75rem);font-weight:600;letter-spacing:-.02em;line-height:1.1}
.card-foot .sub{font-family:var(--mono);font-size:.72rem;color:var(--muted);margin-top:.5rem;letter-spacing:.015em}
.card-foot .yr{font-family:var(--mono);font-size:.74rem;color:var(--muted);white-space:nowrap}
.scene.p1{background:radial-gradient(circle at 50% 46%,rgba(201,189,189,.26),transparent 17%),radial-gradient(circle at 50% 46%,transparent 20%,rgba(115,104,104,.14) 30%,transparent 44%),radial-gradient(circle at 50% 46%,transparent 46%,rgba(89,79,79,.12) 58%,transparent 72%),radial-gradient(circle at 50% 46%,#2A1E20,#100C0D 78%)}
.scene.p2{background:radial-gradient(circle at 40% 50%,rgba(226,220,220,.30),rgba(226,220,220,0) 40%),radial-gradient(circle at 59% 50%,rgba(201,189,189,.26),rgba(201,189,189,0) 40%),radial-gradient(circle at 49% 59%,rgba(242,238,238,.13),transparent 46%),linear-gradient(180deg,#403638,#1E1618)}
.scene.p3{background:radial-gradient(circle at 64% 36%,rgba(201,189,189,.24),transparent 46%),radial-gradient(circle at 38% 70%,rgba(115,104,104,.18),transparent 50%),radial-gradient(circle at 50% 50%,#251A1C,#100C0D 80%)}
.scene.p4{background:radial-gradient(circle at 43% 48%,transparent 19%,rgba(184,172,172,.18) 27%,transparent 40%),radial-gradient(circle at 57% 52%,rgba(160,148,148,.22),transparent 36%),radial-gradient(circle at 50% 50%,#251A1C,#100C0D 80%)}

.card-cue{position:fixed;top:0;left:0;z-index:60;pointer-events:none;
  transform:translate(-50%,-50%) scale(.7);opacity:0;
  transition:opacity var(--dur-micro) var(--ease-out-smooth),transform var(--dur-micro) var(--ease-out-smooth);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.025em;color:var(--paper);
  background:rgba(var(--paper-rgb),.10);border:1px solid rgba(var(--paper-rgb),.22);
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  white-space:nowrap;padding:.7rem 1.2rem;border-radius:100px;box-shadow:0 14px 34px rgba(0,0,0,.32)}
.card-cue.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
@media(pointer:coarse){.card-cue{display:none}}

#about{padding-block:0}
/* Borda limpa contra o fundo escuro: sem máscara, sem névoa, sem orbes
   desfocadas. A troca de seção se resolve por contraste e ritmo vertical. */
/* sangramento total descontando a barra de rolagem: 100vw a inclui, e era
   isso que empurrava 15px de overflow e deixava a faixa curta à direita */
/* Sem fundo claro: a seção se separa por elevação mínima de tom e por duas
   hairlines, não por uma troca de cor. */
.about-break{overflow:hidden;isolation:isolate;
  --bleed:calc(100vw - var(--sbw,0px));
  width:var(--bleed);position:relative;left:50%;
  margin-left:calc(var(--bleed) / -2);margin-right:calc(var(--bleed) / -2);
  padding:clamp(6rem,10vw,8.5rem) var(--gutter);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#150F11,#1C1416 52%,#140F10)}
.about-break::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:var(--grain-url);opacity:.3;mix-blend-mode:soft-light}
.about-inner{position:relative;z-index:1;max-width:1280px;margin-inline:auto}
.about-grid{display:grid;grid-template-columns:1fr;gap:2.6rem}
@media(min-width:900px){.about-grid{grid-template-columns:.82fr 1.18fr;gap:clamp(2.6rem,5vw,4.5rem);align-items:start}}
.about-photo{margin:0}
.portrait{position:relative;aspect-ratio:4/5;border-radius:20px;overflow:hidden;
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 38%,#33262A,#150F10 78%)}
.portrait::after{content:"";position:absolute;inset:0;background:var(--grain-url);opacity:.3;
  mix-blend-mode:soft-light;pointer-events:none}
.portrait-img{position:relative;width:100%;height:100%;object-fit:cover}
.portrait-hint{position:relative;font-family:var(--mono);font-size:.7rem;letter-spacing:.015em;color:var(--muted-2);
  background:rgba(var(--paper-rgb),.05);border:1px solid var(--line);border-radius:100px;padding:.5rem 1.1rem}
/* reveal por máscara: a imagem descobre de baixo para cima e assenta a escala */
.js .mask-reveal{clip-path:inset(100% 0 0 0);transform:scale(1.03)}
.js .mask-reveal.in{clip-path:inset(0 0 0 0);transform:none;
  transition:clip-path var(--dur-reveal) var(--ease-soft),transform var(--dur-reveal) var(--ease-soft)}

.about-k{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.03em;
  color:var(--muted-2);margin-bottom:1.4rem}
.about-lead{font-size:clamp(1rem,1.25vw,1.1rem);font-weight:300;
  color:var(--muted);max-width:58ch;letter-spacing:-.005em;line-height:1.68}

.caps{margin-top:2.8rem}
.caps-k{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.03em;color:var(--muted-2);
  padding-bottom:.9rem;border-bottom:1px solid var(--line)}
.caps-grid{list-style:none;display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:560px){.caps-grid{grid-template-columns:1fr 1fr;column-gap:2.4rem}}
.caps-grid li{font-size:.95rem;font-weight:400;color:var(--paper);
  padding:.85rem 0;border-bottom:1px solid var(--line)}
.js .caps-grid li{opacity:0;transform:translateY(12px);
  transition:opacity var(--dur-default) var(--ease-soft),transform var(--dur-default) var(--ease-soft)}
.js .caps-grid.in li{opacity:1;transform:none}

.ghost-cta{display:inline-flex;align-items:center;gap:.6em;margin-top:2.4rem;cursor:pointer;
  font-family:var(--font);font-size:.92rem;font-weight:500;color:var(--paper);
  background:transparent;border:1px solid var(--line-strong);border-radius:100px;padding:.85rem 1.6rem;
  transition:transform var(--dur-micro) var(--ease-soft),border-color var(--dur-micro) var(--ease-soft),
             background-color var(--dur-micro) var(--ease-soft)}
.ghost-cta::after{content:"→";transition:transform var(--dur-micro) var(--ease-soft)}
.ghost-cta:hover{transform:translateY(-2px);border-color:var(--accent);background:rgba(var(--paper-rgb),.05)}
.ghost-cta:hover::after{transform:translateX(4px)}

/* ===== COMO EU CONSIGO TE AJUDAR ===== */
.help-title{font-size:clamp(1.9rem,4.4vw,3.4rem);font-weight:500;letter-spacing:-.035em;
  line-height:1.06;text-align:center;margin-bottom:clamp(3rem,6vw,5rem);text-wrap:balance}
.help-grid{display:grid;grid-template-columns:1fr;gap:3rem}
@media(min-width:820px){.help-grid{grid-template-columns:repeat(3,1fr);gap:clamp(2rem,3.5vw,3.4rem)}}
.help-item .hi-num{display:block;font-family:var(--mono);font-size:.78rem;color:var(--muted-2);margin-bottom:1rem}
/* a linha cresce da esquerda, é o gesto que abre cada coluna */
.hi-line,.stat-line{display:block;height:1px;background:var(--line-strong);transform-origin:left}
.js .hi-line,.js .stat-line{transform:scaleX(0)}
.js .in .hi-line,.js .hi-line.in,.js .in .stat-line,.js .stat-line.in{transform:scaleX(1);
  transition:transform var(--dur-reveal) var(--ease-soft)}
.help-item h3{margin-top:1.6rem;font-size:clamp(1.3rem,2.1vw,1.7rem);font-weight:500;letter-spacing:-.025em}
.help-item p{margin-top:1.3rem;font-size:.95rem;font-weight:300;color:var(--muted);
  line-height:1.66;max-width:38ch;letter-spacing:-.005em}

/* ===== NÚMEROS ===== */
.num-head{margin-bottom:clamp(3rem,6vw,5rem);max-width:34ch}
.num-head h2{margin-top:1.2rem;font-size:clamp(1.8rem,3.8vw,2.9rem);font-weight:500;
  letter-spacing:-.035em;line-height:1.1}
.stats{display:grid;grid-template-columns:1fr;gap:2.8rem}
@media(min-width:640px){.stats{grid-template-columns:1fr 1fr;gap:2.6rem}}
@media(min-width:1000px){.stats{grid-template-columns:repeat(3,1fr);gap:clamp(2rem,3.5vw,3.2rem)}}
.stat-v{display:flex;align-items:baseline;font-size:clamp(3.4rem,7.4vw,5.6rem);font-weight:600;
  letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.stat-v em{font-style:normal;color:var(--muted-2);font-size:.62em;margin-left:.06em}
.stat-line{margin-top:1.6rem}
.stat h3{margin-top:1.4rem;font-size:1.02rem;font-weight:500;letter-spacing:-.015em}
.stat p{margin-top:.7rem;font-size:.9rem;font-weight:300;color:var(--muted-2);line-height:1.6;max-width:32ch}

/* ===== CTA FINAL ===== */
.contact{text-align:center}
.contact-big{font-size:clamp(2.8rem,10vw,8rem);font-weight:600;line-height:.94;
  letter-spacing:-.055em;margin-bottom:clamp(2.5rem,5vw,3.6rem)}
.contact-big .em{color:var(--muted-2)}
.mail-k{font-family:var(--mono);font-size:.76rem;letter-spacing:.02em;color:var(--muted-2)}
.mail-row{margin-top:1rem;display:inline-flex;align-items:center;gap:.8rem;position:relative}
.mail-link{font-size:clamp(1.05rem,2.4vw,1.7rem);font-weight:400;letter-spacing:-.02em;
  color:var(--paper);border-bottom:1px solid var(--line-strong);padding-bottom:.12em;
  transition:border-color var(--dur-micro) var(--ease-soft),color var(--dur-micro) var(--ease-soft)}
.mail-link:hover{border-color:var(--accent)}
.copy-btn{position:relative;flex:none;width:2.6rem;height:2.6rem;display:grid;place-items:center;
  cursor:pointer;border-radius:12px;color:var(--muted);
  background:rgba(var(--paper-rgb),.05);border:1px solid var(--line);
  transition:transform var(--dur-micro) var(--ease-soft),color var(--dur-micro) var(--ease-soft),
             border-color var(--dur-micro) var(--ease-soft),background-color var(--dur-micro) var(--ease-soft)}
.copy-btn:hover{transform:translateY(-2px);color:var(--paper);border-color:var(--line-strong)}
.copy-btn svg{position:absolute;width:17px;height:17px;
  transition:opacity var(--dur-micro) var(--ease-soft),transform var(--dur-micro) var(--ease-soft)}
.copy-btn .ico-done{opacity:0;transform:scale(.7)}
.copy-btn.done{color:var(--paper);border-color:var(--accent)}
.copy-btn.done .ico-copy{opacity:0;transform:scale(.7)}
.copy-btn.done .ico-done{opacity:1;transform:none}
/* o aviso é absoluto: aparecer não pode empurrar o e-mail de lugar */
.copy-flash{position:absolute;left:50%;translate:-50% 0;top:calc(100% + .9rem);white-space:nowrap;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;color:var(--muted);
  opacity:0;transform:translateY(-4px);pointer-events:none;
  transition:opacity var(--dur-micro) var(--ease-soft),transform var(--dur-micro) var(--ease-soft)}
.copy-flash.on{opacity:1;transform:none}
.contact .links{justify-content:center}


.contact .links{margin-top:2.5rem;display:flex;flex-wrap:wrap;gap:1.4rem;font-family:var(--mono);font-size:.82rem}
.contact .links a{padding:.7rem 1.1rem;border:1px solid var(--line-strong);border-radius:10px;color:var(--muted);
  display:inline-flex;gap:.5em;align-items:center;
  transition:color var(--dur-micro) var(--ease-out-smooth),
             border-color var(--dur-micro) var(--ease-out-smooth),
             background-color var(--dur-micro) var(--ease-out-smooth),
             transform var(--dur-micro) var(--ease-out-smooth)}
.contact .links a:hover{transform:translateY(-2px)}
.contact .links a:hover{color:var(--paper);border-color:var(--accent);background:var(--glass)}
.ico{width:15px;height:15px;flex:none}
.overlay-foot a.soc{display:inline-flex;align-items:center;gap:.5em}

footer{border-top:1px solid var(--line);padding-block:2.5rem;font-family:var(--mono);font-size:.74rem;color:var(--muted-2);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}

/* Entrada padrão: 24px e 650ms. Sem blur, sem escala perceptível.
   Só esconde se o JS estiver vivo para revelar de volta. */
.js .reveal{opacity:0;transform:translateY(24px);
  transition:opacity var(--dur-default) var(--ease-out-smooth),
             transform var(--dur-default) var(--ease-out-smooth);
  transition-delay:var(--d,0ms)}
.js .reveal.in{opacity:1;transform:none}
/* rótulos entram de bem perto */
.js .sec-head.reveal,.js .caps-k.reveal,.js .mail-k.reveal{transform:translateY(14px)}
/* mídia: deslocamento contido e uma escala quase imperceptível */
.js .card.reveal{transform:translateY(30px) scale(.988)}
.js .sec-head.reveal.in,.js .caps-k.reveal.in,
.js .mail-k.reveal.in,.js .card.reveal.in{transform:none}
/* máscara de linha: só o transform interno anima, o pai não some */
.js .hn-mask.reveal{opacity:1;transform:none}
.js .hn-mask.reveal .hn-line{transition:transform var(--dur-reveal) var(--ease-soft);
  transition-delay:var(--d,0ms)}
.js .hn-mask.reveal.in .hn-line{transform:none}
/* títulos editoriais entram inteiros, sem quebrar em palavra */
.js .help-title.reveal,.js .num-head h2.reveal{transform:translateY(20px)}

/* scrub: palavras clareiam conforme a leitura avança */
.scrub{color:var(--muted-2)}
.scrub .w{color:var(--muted-2);transition:color var(--dur-micro) var(--ease-out-smooth)}
.scrub .w.lit{color:var(--paper)}

/* Movimento reduzido: conteúdo imediatamente visível, nada preso em estado
   inicial invisível, sem scroll suave artificial (o JS também não o instala). */
@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,.js .reveal.in{opacity:1!important;transform:none!important}
  .scrub .w{color:inherit}
  .cursor-glow,.card-cue{display:none}
  /* nada preso em estado inicial: intro, máscaras, linhas e capacidades */
  .intro-veil{display:none}
  .js .h-step,.js .hn-line,.js .caps-grid li{opacity:1!important;transform:none!important}
  .js .mask-reveal{clip-path:none!important;transform:none!important}
  .hi-line,.stat-line{transform:scaleX(1)!important}
  body.entering main,body.entering footer{animation:none!important}
  /* menu simplificado: aparece sem escalonar nem deslizar */
  .overlay.dropdown .menu-item,.overlay.dropdown .overlay-foot{
    opacity:1!important;transform:none!important;transition-delay:0ms!important}}

/* ===== ENTRADA DA HERO =====
   Encadeia com a saída da intro. As duas linhas do nome sobem por dentro
   das máscaras; tag, carimbo e "role para explorar" vêm em sequência curta. */
.js .h-step{opacity:0;transform:translateY(18px);
  transition:opacity var(--dur-slow) var(--ease-soft),transform var(--dur-slow) var(--ease-soft)}
.js body.hero-in .h-step,.js .hero-in .h-step{opacity:1;transform:none}
/* o nome sobe assim que a intro comeca; os secundarios entram depois,
   por cima da cauda do movimento do nome */
.js body.name-in .hero-name .hn-line,
.js body.hero-in .hero-name .hn-line{transform:none;
  transition:transform 820ms var(--ease-soft)}
.js body.name-in .hero-name .hn-mask:nth-of-type(2) .hn-line,
.js body.hero-in .hero-name .hn-mask:nth-of-type(2) .hn-line{transition-delay:90ms}
.hero-in .hero-tag{transition-delay:120ms}
.hero-in .hero-when{transition-delay:230ms}
.hero-in .hero-scroll{transition-delay:310ms}

/* a home sobe de leve enquanto a intro ainda está saindo */
body.entering main,body.entering footer{animation:home-in var(--dur-slow) var(--ease-soft) both}
@keyframes home-in{from{opacity:.55;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ===== ACCESSIBILITY: focus & skip link =====
   Sem border-radius aqui: era ele que quadrava o botão de idioma em foco.
   O contorno já acompanha o raio próprio de cada elemento. */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px}
.skip-link{position:fixed;z-index:200;top:1rem;left:1rem;
  background:var(--paper);color:var(--ink);font-family:var(--font);font-size:.9rem;font-weight:500;
  padding:.8rem 1.4rem;border-radius:100px;
  transform:translateY(-140%);transition:transform var(--dur-micro) var(--ease-out-smooth);pointer-events:none}
.skip-link:focus-visible{transform:none;pointer-events:auto;outline:2px solid var(--ink);outline-offset:3px}

/* ===== PAGE TRANSITION ===== */
.veil{position:fixed;inset:0;z-index:90;pointer-events:none;background:var(--ink);
  opacity:0;transition:opacity var(--dur-default) var(--ease-out-smooth)}
.veil.on{opacity:1;pointer-events:all}
main,footer{opacity:0;transform:translateY(10px);transition:opacity var(--dur-slow) var(--ease-out-smooth),transform var(--dur-slow) var(--ease-out-smooth)}
body.ready main,body.ready footer{opacity:1;transform:none}

/* ===== OVERLAYS (menu / contact) ===== */
.overlay{position:fixed;inset:0;z-index:95;display:flex;align-items:flex-start;justify-content:center;
  padding:1.4rem var(--gutter);overflow-y:auto;
  background:rgba(13,10,10,.66);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;transition:opacity var(--dur-default) var(--ease-out-smooth),visibility var(--dur-default)}
.overlay.open{opacity:1;visibility:visible}
.overlay-sheet{width:100%;max-width:620px;margin-block:auto;border-radius:24px;overflow:hidden;
  background:rgba(38,27,29,.86);border:1px solid var(--line-strong);
  backdrop-filter:blur(26px) saturate(150%);-webkit-backdrop-filter:blur(26px) saturate(150%);
  box-shadow:0 40px 90px rgba(0,0,0,.55);
  transform:translateY(18px) scale(.985);opacity:.6;transition:transform var(--dur-default) var(--ease-out-smooth),opacity var(--dur-default) var(--ease-out-smooth)}
.overlay.open .overlay-sheet{transform:none;opacity:1}

/* ===== MENU COMO DROPDOWN (só onde existe cursor) =====
   Ancorado logo abaixo do header, sem véu escuro e sem travar a rolagem:
   é um painel, não um modal. */
.overlay.dropdown{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
  pointer-events:none;align-items:flex-start;overflow:visible;
  transition:opacity var(--dur-fast) var(--ease-soft),visibility var(--dur-fast)}
.overlay.dropdown .overlay-sheet{pointer-events:auto;margin-block:0;margin-top:4.4rem;max-width:500px;
  transform:translateY(-8px) scale(.99);opacity:0;
  box-shadow:0 30px 70px rgba(0,0,0,.5);
  transition:transform var(--dur-default) var(--ease-soft),opacity var(--dur-default) var(--ease-soft)}
.overlay.dropdown.open .overlay-sheet{transform:none;opacity:1}
/* ponte invisível cobrindo o vão entre o botão e o painel: sem ela o cursor
   sai da região interativa no meio do caminho e o menu pisca */
.overlay.dropdown::before{content:"";position:absolute;top:2.9rem;left:50%;translate:-50% 0;
  width:min(500px,92vw);height:2rem;pointer-events:auto}
/* conteúdo interno entra escalonado, e sai junto para o fechamento ser curto */
.overlay.dropdown .menu-item,.overlay.dropdown .overlay-foot{
  opacity:0;transform:translateY(-6px);
  transition:opacity var(--dur-fast) var(--ease-soft),transform var(--dur-fast) var(--ease-soft)}
.overlay.dropdown.open .menu-item,.overlay.dropdown.open .overlay-foot{opacity:1;transform:none}
.overlay.dropdown.open .menu-item:nth-child(1){transition-delay:70ms}
.overlay.dropdown.open .menu-item:nth-child(2){transition-delay:115ms}
.overlay.dropdown.open .menu-item:nth-child(3){transition-delay:160ms}
.overlay.dropdown.open .overlay-foot{transition-delay:205ms}
.overlay-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.3rem 1.6rem;border-bottom:1px solid var(--line)}
.overlay-note{font-family:var(--mono);font-size:.7rem;color:var(--muted-2);letter-spacing:.02em}
.overlay-x{background:none;border:none;color:var(--muted);cursor:pointer;font-size:.95rem;padding:.3rem;transition:color var(--dur-micro) var(--ease-out-smooth)}
.overlay-x:hover{color:var(--paper)}

.menu-list{display:flex;flex-direction:column}
.menu-item{display:flex;align-items:center;justify-content:space-between;gap:1.4rem;
  padding:1.1rem 1.6rem;border-bottom:1px solid var(--line);
  font-size:clamp(1.4rem,3vw,2rem);font-weight:500;letter-spacing:-.02em;
  transition:background-color var(--dur-micro) var(--ease-out-smooth),padding-left var(--dur-default) var(--ease-out-smooth)}
.menu-item:hover{background:rgba(var(--paper-rgb),.05);padding-left:2.1rem}
.menu-thumb{position:relative;width:104px;height:64px;border-radius:12px;overflow:hidden;flex:none;
  border:1px solid var(--line-strong);background:var(--ink-2)}
.menu-thumb .scene{filter:none;transform:scale(1.02);transition:transform var(--dur-slow) var(--ease-out-smooth)}
.menu-item:hover .scene{transform:scale(1.12)}
.overlay-foot{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem;padding:0 1.6rem 1.5rem;
  font-family:var(--mono);font-size:.78rem}
.overlay-foot .k{color:var(--accent);font-size:.7rem;letter-spacing:.02em;width:100%}
.overlay-foot a{color:var(--muted);transition:color var(--dur-micro) var(--ease-out-smooth)}
.overlay-foot a:hover{color:var(--paper)}

.cform{padding:1.8rem 1.6rem 2rem}
.cform h2{font-size:clamp(1.5rem,3.4vw,2.2rem);font-weight:600;letter-spacing:-.025em;line-height:1.1;
  max-width:18ch;margin-bottom:1.8rem}
.cform form{display:flex;flex-direction:column;gap:1.1rem}
.cform label{display:flex;flex-direction:column;gap:.5rem}
.cform .k{font-family:var(--mono);font-size:.7rem;color:var(--accent);letter-spacing:.02em}
.cform input,.cform textarea{font-family:var(--font);font-size:.95rem;color:var(--paper);
  background:rgba(var(--paper-rgb),.05);border:1px solid var(--line-strong);border-radius:12px;
  padding:.85rem 1rem;resize:vertical;transition:border-color var(--dur-micro) var(--ease-out-smooth),background-color var(--dur-micro) var(--ease-out-smooth)}
.cform input:focus,.cform textarea:focus{outline:none;border-color:var(--accent);background:rgba(var(--paper-rgb),.08)}
.cform-submit{font-family:var(--font);font-size:.95rem;font-weight:500;color:var(--ink);cursor:pointer;
  background:var(--paper);border:none;border-radius:100px;padding:.95rem 1.5rem;margin-top:.4rem;
  transition:transform var(--dur-micro) var(--ease-out-smooth),opacity var(--dur-micro) var(--ease-out-smooth)}
.cform-submit:hover{transform:translateY(-2px);opacity:.9}
.cform-alt{font-family:var(--mono);font-size:.74rem;color:var(--muted-2);text-align:center;margin-top:.2rem}
.cform-alt a{color:var(--muted);border-bottom:1px solid var(--line-strong)}
.cform-alt a:hover{color:var(--paper)}

/* ===== CASE PAGE ===== */
.case-hero{min-height:auto;padding-top:9rem;padding-bottom:1rem}
.case-hero .eyebrow{margin-bottom:1.2rem}
.case-hero h1{font-size:clamp(2rem,4.6vw,3.6rem);font-weight:500;line-height:1.08;letter-spacing:-.02em;max-width:20ch;margin-bottom:1.6rem}
.case-hero .sub{max-width:56ch;font-size:clamp(1rem,1.3vw,1.1rem);color:var(--muted);font-weight:300}
.hero-meta{display:flex;flex-wrap:wrap;gap:1.6rem 3rem;margin-top:2.2rem;
  border-top:1px solid var(--line);padding-top:1.6rem;
  font-family:var(--mono);font-size:.76rem;color:var(--muted-2)}
.hero-meta div span{display:block;color:var(--accent);margin-bottom:.35rem;letter-spacing:.035em}
.hero-meta div p{color:var(--paper);font-family:var(--font);font-size:.92rem}

.case-cover{aspect-ratio:16/9;border-radius:18px;overflow:hidden;position:relative;
  border:1px solid var(--line-strong);background:var(--ink-2);margin-top:1rem}
.case-cover .scene{filter:none;transform:none}
.case-cover::after{content:"";position:absolute;inset:0;background:var(--grain-url);opacity:.32;
  mix-blend-mode:soft-light;pointer-events:none}

.case-body{display:grid;gap:2.6rem}
.case-section .k{font-family:var(--mono);font-size:.72rem;color:var(--accent);letter-spacing:.02em;
  border-top:1px solid var(--line);padding-top:1.2rem;margin-bottom:1rem}
.case-section p{font-size:1.02rem;color:var(--muted);max-width:64ch}
.case-section p+p{margin-top:1.1rem}

.case-gallery{display:grid;grid-template-columns:1fr;gap:1.4rem;margin-top:1rem}
@media(min-width:640px){.case-gallery{grid-template-columns:1fr 1fr}}
.case-gallery .thumb{aspect-ratio:4/3}

.case-nav{display:flex;justify-content:space-between;gap:1.6rem;border-top:1px solid var(--line);
  padding-top:2rem;font-family:var(--mono);font-size:.8rem}
.case-nav a{color:var(--muted);transition:color var(--dur-micro) var(--ease-out-smooth);display:flex;flex-direction:column;gap:.4em}
.case-nav a:hover{color:var(--paper)}
.case-nav a.next{text-align:right;align-items:flex-end}
.case-nav .lbl{font-size:.7rem;color:var(--muted-2);letter-spacing:.035em}

/* ===== ENTRADAS POR BLOCO (coreografia via .in do observador) ===== */
.js .help-item .hi-num,.js .help-item h3,.js .help-item p,
.js .stat .stat-v,.js .stat h3,.js .stat p{
  opacity:0;transform:translateY(20px);
  transition:opacity var(--dur-default) var(--ease-soft),transform var(--dur-default) var(--ease-soft)}
.js .help-item.in .hi-num,.js .help-item.in h3,.js .help-item.in p,
.js .stat.in .stat-v,.js .stat.in h3,.js .stat.in p{opacity:1;transform:none}

/* ===== SELETOR DE IDIOMA =====
   Fechado: bandeira, código e seta. Aberto: dropdown compacto com os nomes
   completos e um check discreto no idioma atual. */
.lang-pick{position:relative}
.lp-toggle{display:inline-flex;align-items:center;gap:.5em;cursor:pointer;
  font-family:var(--font);font-size:.82rem;font-weight:500;color:var(--muted);
  padding:.5rem .75rem;border-radius:100px;
  background:transparent;border:1px solid var(--line);
  transition:color var(--dur-micro) var(--ease-soft),
             border-color var(--dur-micro) var(--ease-soft),
             background-color var(--dur-micro) var(--ease-soft)}
.lp-toggle:hover{color:var(--paper);border-color:var(--line-strong);
  background:rgba(var(--paper-rgb),.04)}
.lp-flag{display:block;width:17px;height:17px;flex:none;border-radius:50%;overflow:hidden;
  box-shadow:0 0 0 1px rgba(var(--paper-rgb),.16)}
.lp-flag svg{display:block;width:100%;height:100%;border-radius:50%}
.lp-code{letter-spacing:.02em}
.lp-arrow{width:12px;height:12px;flex:none;color:var(--muted-2);
  transition:transform var(--dur-micro) var(--ease-soft)}
.lang-pick.open .lp-arrow{transform:rotate(180deg)}

.lp-menu{position:absolute;top:calc(100% + .6rem);right:0;z-index:60;
  list-style:none;min-width:12.5rem;padding:.4rem;border-radius:14px;
  background:rgba(38,27,29,.88);border:1px solid var(--line-strong);
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 22px 50px rgba(0,0,0,.45);
  opacity:0;transform:translateY(-6px) scale(.98);pointer-events:none;
  transition:opacity var(--dur-fast) var(--ease-soft),transform var(--dur-fast) var(--ease-soft)}
.lang-pick.open .lp-menu{opacity:1;transform:none;pointer-events:auto}
.lp-menu button{display:flex;align-items:center;gap:.7em;width:100%;cursor:pointer;
  padding:.6rem .7rem;border:none;border-radius:10px;background:transparent;
  color:var(--muted);text-align:left;font-family:var(--font);
  opacity:0;transform:translateY(-4px);
  transition:opacity var(--dur-fast) var(--ease-soft),transform var(--dur-fast) var(--ease-soft),
             background-color var(--dur-micro) var(--ease-soft),color var(--dur-micro) var(--ease-soft)}
.lang-pick.open .lp-menu li:nth-child(1) button{opacity:1;transform:none;transition-delay:45ms}
.lang-pick.open .lp-menu li:nth-child(2) button{opacity:1;transform:none;transition-delay:90ms}
.lp-menu button:hover{background:rgba(var(--paper-rgb),.06);color:var(--paper)}
.lp-menu button[aria-selected="true"]{color:var(--paper)}
.lp-txt{display:flex;flex-direction:column;line-height:1.2;flex:1}
.lp-txt b{font-size:.9rem;font-weight:500}
.lp-txt small{font-family:var(--mono);font-size:.64rem;letter-spacing:.02em;color:var(--muted-2);margin-top:.15rem}
.lp-check{width:14px;height:14px;flex:none;opacity:0;color:var(--accent);
  transition:opacity var(--dur-micro) var(--ease-soft)}
.lp-menu button[aria-selected="true"] .lp-check{opacity:1}

/* ===== PREVIEWS GRANDES =====
   Duas colunas que juntas dominam a viewport, com gap curto. Sangra além do
   .wrap descontando a barra de rolagem, como a faixa do Sobre. */
.work-bleed{--bleed:calc(100vw - var(--sbw,0px));
  width:var(--bleed);position:relative;left:50%;
  margin-left:calc(var(--bleed) / -2);margin-right:calc(var(--bleed) / -2);
  padding-inline:clamp(1rem,2vw,2rem);gap:clamp(1rem,1.4vw,1.5rem)}
@media(min-width:900px){.work-bleed{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:900px){
  .work-bleed .card{aspect-ratio:auto;height:clamp(30rem,72vh,46rem)}}
@media(max-width:899px){
  .work-bleed .card{aspect-ratio:4/3.2}}
.work-bleed .card-foot{left:clamp(1.4rem,2.2vw,2.4rem);right:clamp(1.4rem,2.2vw,2.4rem);
  bottom:clamp(1.4rem,2vw,2.2rem)}
.work-bleed .card-foot h3{font-size:clamp(1.35rem,1.9vw,2rem)}
.work-bleed .card-tags{top:clamp(1.2rem,1.8vw,1.8rem);right:clamp(1.2rem,1.8vw,1.8rem)}
/* o conteúdo do card entra depois da imagem, em sequência curta */
.js .card .card-foot,.js .card .card-tags{opacity:0;transform:translateY(14px);
  transition:opacity var(--dur-default) var(--ease-soft),transform var(--dur-default) var(--ease-soft)}
.js .card.in .card-foot{opacity:1;transform:none;transition-delay:220ms}
.js .card.in .card-tags{opacity:1;transform:none;transition-delay:300ms}
.about-sub{margin-top:1.3rem;font-size:.98rem;font-weight:300;color:var(--muted-2);
  max-width:56ch;line-height:1.68;letter-spacing:-.005em}