/* ═══════════════════════════════════════════════════════════════════
   UNREALESE — Hero
   Diagramação, cores e proporções medidas de AJUSTES/REFERÊNCIA FINAL.jpg
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* Gradiente da marca (amostrado do logo) */
  --brand-1:#8E349E;
  --brand-2:#B93A53;
  --brand-3:#E43030;
  --brand-gradient:linear-gradient(100deg,var(--brand-1) 0%,var(--brand-2) 52%,var(--brand-3) 100%);

  /* Gradiente do CTA — amostrado do ícone da referência, mais saturado */
  --cta-1:#7F24ED;
  --cta-2:#B0357E;
  --cta-3:#F32D22;
  --cta-gradient:linear-gradient(90deg,var(--cta-1) 0%,var(--cta-2) 50%,var(--cta-3) 100%);

  --bg:#000;
  --ink:#fff;
  --ink-muted:#808080;          /* exatamente a cor da linha 2 da referência */

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  --mx:0; --my:0;               /* posição do cursor, escrita pelo JS */
}

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

/* Qualquer `display` de classe vence o display:none que o atributo
   [hidden] herda do navegador. Sem esta linha, elementos marcados como
   ocultos continuam aparecendo. */
[hidden]{display:none !important}

html{-webkit-text-size-adjust:100%}
html,body{height:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg,canvas{display:block;max-width:100%}

/* ───────────────────────────────────────────────────────────────────
   Abertura — cortina preta com a marca se montando
   ─────────────────────────────────────────────────────────────────── */

.intro{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  background:#000;
  transition:opacity .75s var(--ease-soft);
}
.intro.is-out{opacity:0;pointer-events:none}
.intro.is-done{display:none}

.intro__logo{
  position:relative;
  width:clamp(190px,26vw,360px);
  aspect-ratio:1200/246;   /* proporção do logo original */
  transition:transform .8s var(--ease);
}
.intro.is-out .intro__logo{transform:translateY(-10px) scale(1.02)}

/* Duas cópias do mesmo logo, cada uma recortada na sua parte.
   No original de 1200px o símbolo vai até x=184 e a palavra começa
   em x=218 — daí os 15.333% e 18.167%. */
.intro__part{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
}

/* A linha do tempo só começa quando o JS confirma as peças decodificadas */
.intro__mark,
.intro__word,
.intro__glow{animation-play-state:paused}
.intro.is-ready .intro__mark,
.intro.is-ready .intro__word,
.intro.is-ready .intro__glow{animation-play-state:running}

.intro__mark{
  clip-path:inset(0 84.667% 0 0);   /* mostra só o símbolo */
  transform-origin:7.667% 50%;      /* cresce em torno do próprio centro */
  opacity:0;
  transform:scale(.8);
  animation:markIn .85s var(--ease) .12s forwards;
}

.intro__word{
  opacity:0;
  clip-path:inset(0 81.833% 0 18.167%);   /* parte da palavra fechada */
  animation:wordIn .9s var(--ease) .52s forwards;
}

/* Brilho da marca que floresce atrás do símbolo */
.intro__glow{
  position:absolute;
  left:-14%;top:-40%;
  width:46%;height:180%;
  border-radius:50%;
  background:var(--brand-gradient);
  filter:blur(34px);
  opacity:0;
  transform:scale(.5);
  animation:glowIn 1.5s var(--ease-soft) .1s forwards;
  pointer-events:none;
}

@keyframes markIn{
  from{opacity:0;transform:scale(.8)}
  to{opacity:1;transform:scale(1)}
}
/* A palavra se abre da esquerda para a direita, sem revelar o símbolo */
@keyframes wordIn{
  0%{opacity:0;clip-path:inset(0 81.833% 0 18.167%)}
  10%{opacity:1}
  100%{opacity:1;clip-path:inset(0 0 0 18.167%)}
}
@keyframes glowIn{
  0%{opacity:0;transform:scale(.5)}
  45%{opacity:.42;transform:scale(1)}
  100%{opacity:.14;transform:scale(1.1)}
}

/* Enquanto a cortina está no ar, a hero espera para entrar */
body.is-intro .topbar,
body.is-intro .hero__logo,
body.is-intro .ln,
body.is-intro .cta{animation-play-state:paused}

/* ───────────────────────────────────────────────────────────────────
   Roda-teto
   Discreto por princípio: a hero é a peça, isto é só acesso.
   ─────────────────────────────────────────────────────────────────── */

.topbar{
  position:absolute;
  top:0;left:0;right:0;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  width:100%;
  max-width:1760px;
  margin-inline:auto;
  padding:clamp(20px,3.2vh,34px) clamp(24px,9vw,200px);
  opacity:0;
  animation:rise .9s var(--ease) .1s forwards;
}

.topbar__status{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin:0;
  font-size:12.5px;
  font-weight:300;
  letter-spacing:.01em;
  color:rgba(255,255,255,.60);
  white-space:nowrap;
}

.topbar__dot{
  width:6px;height:6px;
  flex:none;
  border-radius:50%;
  background:#22C55E;
  box-shadow:0 0 0 0 rgba(34,197,94,.5);
  animation:ping 2.6s var(--ease-soft) infinite;
}
@keyframes ping{
  0%,100%{box-shadow:0 0 0 0 rgba(228,48,48,.45)}
  55%{box-shadow:0 0 0 6px rgba(228,48,48,0)}
}

.topbar__nav{
  display:flex;
  align-items:center;
  gap:clamp(14px,1.6vw,26px);
}

.topbar__link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:0;
  border:0;
  background:none;
  font:inherit;
  font-size:13px;
  font-weight:300;
  letter-spacing:.01em;
  color:rgba(255,255,255,.72);
  text-decoration:none;
  cursor:pointer;
  transition:color .35s var(--ease-soft);
}
.topbar__link:hover{color:#fff}

/* Sublinhado em gradiente que cresce da esquerda */
.topbar__link{position:relative}
.topbar__link::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-6px;
  height:1px;
  background:var(--brand-gradient);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .45s var(--ease);
}
.topbar__link:hover::after,
.topbar__link:focus-visible::after{transform:scaleX(1)}

.topbar__count{
  display:grid;
  place-items:center;
  min-width:17px;height:17px;
  padding-inline:4px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  font-size:10.5px;
  font-weight:400;
  color:rgba(255,255,255,.72);
  transition:background .35s var(--ease-soft),color .35s var(--ease-soft);
}
.topbar__link:hover .topbar__count{background:var(--brand-gradient);color:#fff}

.topbar__icon{
  display:grid;
  place-items:center;
  width:32px;height:32px;
  border-radius:50%;
  color:rgba(255,255,255,.62);
  text-decoration:none;
  transition:color .35s var(--ease-soft),background .35s var(--ease-soft);
}
.topbar__icon svg{width:18px;height:18px}
.topbar__icon:hover{color:#fff;background:rgba(255,255,255,.10)}

/* Som: um só ícone troca de estado escondendo metade do desenho */
.topbar__sound{border:0;background:none;cursor:pointer;padding:0}
.topbar__sound .ico-on{opacity:0;transition:opacity .3s var(--ease-soft)}
.topbar__sound .ico-off{opacity:1;transition:opacity .3s var(--ease-soft)}
.topbar__sound[aria-pressed="true"] .ico-on{opacity:1}
.topbar__sound[aria-pressed="true"] .ico-off{opacity:0}
.topbar__sound[aria-pressed="true"]{color:#fff}

/* Chama atenção uma única vez, até o visitante decidir sobre o som */
.topbar__sound.is-hint::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  box-shadow:0 0 0 0 rgba(228,48,48,.45);
  animation:ping 2.6s var(--ease-soft) 3;
  pointer-events:none;
}
.topbar__sound{position:relative}

.topbar__link:focus-visible,
.topbar__icon:focus-visible{
  outline:2px solid rgba(255,255,255,.85);
  outline-offset:4px;
  border-radius:4px;
}

/* ───────────────────────────────────────────────────────────────────
   Shell
   ─────────────────────────────────────────────────────────────────── */

/* O topo maior que a base empurra o bloco — centrado — um pouco
   para baixo, abrindo respiro sob o roda-teto. */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  padding-top:clamp(150px,22vh,250px);
  padding-bottom:clamp(64px,9vh,110px);
  isolation:isolate;
  overflow:hidden;
}

/* ── Fundo ───────────────────────────────────────────────────────── */

.hero__bg{
  position:absolute;
  inset:-3%;                 /* folga para o parallax não revelar bordas */
  z-index:0;
  pointer-events:none;
  transform:translate3d(calc(var(--mx) * -14px),calc(var(--my) * -14px),0) scale(1.03);
  transition:transform .9s var(--ease-soft);
  will-change:transform;
}

.hero__bg picture{display:contents}

.hero__bg-img,
.hero__bg-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.hero__bg-canvas{opacity:0;transition:opacity 1.1s var(--ease-soft)}
.hero.is-gl .hero__bg-canvas{opacity:1}
.hero.is-gl .hero__bg-img{opacity:0;transition:opacity 1.1s var(--ease-soft)}

/* Só assenta o topo — a arte precisa permanecer aparente */
.hero__vignette{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.10) 16%,transparent 32%);
}

/* Grão fino: tira o banding do gradiente sem custar composição */
.hero__grain{
  position:absolute;inset:-20%;
  opacity:.045;
  mix-blend-mode:overlay;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate3d(0,0,0)}
  20%{transform:translate3d(-2%,1.5%,0)}
  40%{transform:translate3d(1.5%,-2%,0)}
  60%{transform:translate3d(-1%,-1.5%,0)}
  80%{transform:translate3d(2%,1%,0)}
}

/* ── Liquid flow animation para mobile ────────────────────────────── */
@keyframes liquidFlow{
  0%{transform:translateY(0) skewY(0deg)}
  25%{transform:translateY(-8px) skewY(1deg)}
  50%{transform:translateY(-12px) skewY(0deg)}
  75%{transform:translateY(-6px) skewY(-1deg)}
  100%{transform:translateY(0) skewY(0deg)}
}

/* ── Gradient pulse no botão mobile ──────────────────────────────── */
@keyframes ctaPulse{
  /* opacity:1 em todos os passos: esta animação substitui a "rise", que
     era quem segurava o botão visível pelo forwards. Sem isso ele some
     enquanto o dedo está apertando. */
  0%{opacity:1;background:var(--cta-gradient);box-shadow:0 0 0 0 rgba(127,36,237,.3)}
  50%{opacity:1;background:var(--cta-gradient);box-shadow:0 0 0 8px rgba(127,36,237,.0)}
  100%{opacity:1;background:var(--cta-gradient);box-shadow:0 0 0 0 rgba(127,36,237,.0)}
}

/* ───────────────────────────────────────────────────────────────────
   Conteúdo — alinhado à esquerda, como na referência
   ─────────────────────────────────────────────────────────────────── */

.hero__inner{
  /* --t governa toda a escala do bloco. As proporções abaixo saíram
     medidas da referência: logo = 2.38×--t, respiros = frações de --t.
     Assim logo, título e botão nunca perdem a relação entre si. */
  --t:clamp(2.5rem,6.6vw,7.2rem);

  position:relative;
  z-index:2;
  width:100%;
  max-width:1760px;
  margin-inline:auto;
  padding-inline:clamp(24px,9vw,200px);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  transform:translate3d(calc(var(--mx) * 6px),calc(var(--my) * 6px),0);
  transition:transform 1.1s var(--ease-soft);
}

.hero__logo{
  width:calc(var(--t) * 2.383);      /* 305 ÷ 128 da referência */
  height:auto;
  opacity:0;
  animation:rise .9s var(--ease) .05s forwards;
}

/* ── Título ──────────────────────────────────────────────────────── */

.hero__title{
  margin:calc(var(--t) * .34) 0 0;
  font-size:var(--t);
  font-weight:300;
  line-height:.92;                   /* entrelinha curta, como na referência */
  letter-spacing:-.03em;
  display:flex;
  flex-direction:column;
  cursor:default;
}

.ln{
  display:block;
  opacity:0;
  animation:rise 1s var(--ease) forwards;
}
.ln:nth-child(1){animation-delay:.20s}
.ln:nth-child(2){animation-delay:.31s}
.ln:nth-child(3){animation-delay:.42s}

/* Linha 2: cinza #808080, que acende no hover do título */
.ln--accent{
  position:relative;
  align-self:flex-start;
}

.ln__base{color:var(--ink-muted);transition:color .5s var(--ease-soft)}

/* Camada em gradiente por cima, revelada da esquerda para a direita */
.ln__fill{
  position:absolute;
  inset:0;
  white-space:nowrap;
  background:var(--brand-gradient);
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
  clip-path:inset(0 100% 0 0);
  transition:clip-path .68s var(--ease);
  pointer-events:none;
}

@media (hover:hover){
  .hero__title:hover .ln__fill{clip-path:inset(0 0 0 0)}
  .hero__title:hover .ln__base{color:#6a6a6a}
}

/* ───────────────────────────────────────────────────────────────────
   CTA — pílula de vidro escuro + ícone em gradiente (medidos da ref.)
   ─────────────────────────────────────────────────────────────────── */

.cta{
  --h:clamp(52px,5.6vw,68px);        /* 80/1080 da referência */

  position:relative;
  display:inline-flex;
  align-items:center;
  gap:calc(var(--h) * .21);
  margin-top:calc(var(--t) * .33);   /* 45 ÷ 128 da referência */
  padding:calc(var(--h) * .145) calc(var(--h) * .30) calc(var(--h) * .145) calc(var(--h) * .16);
  border-radius:calc(var(--h) * .32);
  text-decoration:none;
  overflow:hidden;
  isolation:isolate;
  opacity:0;
  animation:rise 1s var(--ease) .56s forwards;
  -webkit-tap-highlight-color:transparent;

  /* ── Liquid Glass ──────────────────────────────────────────────
     O corpo quase não desfoca: a arte atravessa o botão nítida, só
     um pouco mais densa e saturada. O que dá a leitura de vidro é a
     borda (.cta__rim) e os brilhos internos — não o embaçado. */
  background-color:rgba(6,5,10,.34);
  background-image:
    linear-gradient(158deg,rgba(255,255,255,.055) 0%,rgba(255,255,255,.012) 38%,rgba(255,255,255,0) 62%);
  -webkit-backdrop-filter:blur(2px) saturate(150%);
          backdrop-filter:blur(2px) saturate(150%);
  /* Sem fios brancos internos: quem desenha a borda é o .cta__rim.
     Os dois juntos dobravam o traçado. */
  box-shadow:0 10px 26px -14px rgba(0,0,0,.70);
  transition:box-shadow .45s var(--ease-soft),background-color .45s var(--ease-soft);
}

/* O aro é a peça principal: uma faixa fina que refrata — desfoca de
   leve, satura forte e clareia — imitando a luz dobrando na quina. */
.cta__rim{
  position:absolute;
  inset:0;
  border-radius:inherit;
  /* 1px e alfa ~.18: é a intensidade medida na referência (luminância
     40–55 sobre preto). Mais que isso o traçado salta demais. */
  padding:1px;
  background:linear-gradient(145deg,
    rgba(255,255,255,.24) 0%,
    rgba(255,255,255,.10) 34%,
    rgba(255,255,255,.08) 62%,
    rgba(255,255,255,.17) 100%);
  -webkit-backdrop-filter:blur(1px) saturate(170%) brightness(1.12);
          backdrop-filter:blur(1px) saturate(170%) brightness(1.12);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
  z-index:1;
  transition:opacity .45s var(--ease-soft);
}

/* Gradiente que varre por dentro do botão no hover */
.cta::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--cta-gradient);
  transform:translateX(-100.5%);
  transition:transform .66s var(--ease);
  z-index:-1;
}

/* Halo difuso atrás do botão */
.cta::after{
  content:"";
  position:absolute;
  inset:-40%;
  border-radius:inherit;
  background:var(--cta-gradient);
  filter:blur(30px);
  opacity:0;
  transform:scale(.86);
  transition:opacity .5s var(--ease-soft),transform .6s var(--ease);
  z-index:-2;
  pointer-events:none;
}

.cta__icon{
  flex:none;
  display:grid;
  place-items:center;
  width:calc(var(--h) * .725);       /* 58/80 da referência */
  height:calc(var(--h) * .60);       /* 48/80 da referência */
  border-radius:calc(var(--h) * .175);
  background:var(--cta-gradient);
  color:#fff;
  transition:transform .5s var(--ease),
             background .45s var(--ease-soft),
             color .45s var(--ease-soft);
}
.cta__icon svg{width:62%;height:62%}

.cta__label{
  font-size:clamp(.95rem,1.15vw,1.1rem);
  font-weight:400;
  letter-spacing:.002em;
  color:#fff;
  white-space:nowrap;
  /* segura o contraste quando o gradiente chega na faixa vermelha */
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}

/* ── Hover / focus ── */
@media (hover:hover){
  .cta:hover{
    background-color:rgba(6,5,10,.10);
    box-shadow:0 16px 36px -14px rgba(0,0,0,.8);
  }
  /* Com o gradiente preenchendo, o aro recua para não brigar */
  .cta:hover .cta__rim{opacity:.5}
  .cta:hover::before{transform:translateX(0)}
  .cta:hover::after{opacity:.55;transform:scale(1)}
  /* o chip inverte: sem isso ele sumiria dentro do próprio gradiente */
  .cta:hover .cta__icon{
    transform:scale(.94);
    background:#fff;
    background-image:none;
    color:var(--cta-1);
  }
}

.cta:focus-visible{outline:none}
.cta:focus-visible::before{transform:translateX(0)}
.cta:focus-visible{box-shadow:0 0 0 2px #000,0 0 0 4px rgba(255,255,255,.9)}

.cta:active{transform:scale(.985)}

/* ───────────────────────────────────────────────────────────────────
   Entradas
   ─────────────────────────────────────────────────────────────────── */

@keyframes rise{
  from{opacity:0;transform:translate3d(0,24px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}

/* ───────────────────────────────────────────────────────────────────
   Projetos — camada sobreposta
   Cromática restrita a preto + gradiente da marca: a cor vem das peças.
   ─────────────────────────────────────────────────────────────────── */

.sheet{
  position:fixed;
  inset:0;
  z-index:40;
  display:grid;
  place-items:center;
  padding:clamp(16px,3vw,40px);
}
.sheet[hidden]{display:none}

.sheet__scrim{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.72);
  -webkit-backdrop-filter:blur(22px) saturate(120%);
          backdrop-filter:blur(22px) saturate(120%);
  opacity:0;
  transition:opacity .45s var(--ease-soft);
}
.sheet.is-open .sheet__scrim{opacity:1}

.sheet__panel{
  --pad:clamp(22px,3vw,40px);

  position:relative;
  width:100%;
  max-width:1180px;
  max-height:100%;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:var(--pad);
  border-radius:clamp(20px,2.2vw,30px);
  background:rgba(10,9,12,.72);
  -webkit-backdrop-filter:blur(30px) saturate(150%);
          backdrop-filter:blur(30px) saturate(150%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    0 40px 90px -30px rgba(0,0,0,.9);
  opacity:0;
  transform:translate3d(0,22px,0) scale(.985);
  transition:opacity .5s var(--ease),transform .55s var(--ease);
}
.sheet.is-open .sheet__panel{opacity:1;transform:translate3d(0,0,0) scale(1)}

.sheet__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:clamp(20px,2.6vw,32px);
}

.sheet__title{
  margin:0;
  font-size:clamp(1.5rem,2.6vw,2.1rem);
  font-weight:300;
  letter-spacing:-.025em;
  color:#fff;
}

.sheet__sub{
  margin:6px 0 0;
  font-size:clamp(.82rem,1vw,.94rem);
  font-weight:300;
  color:rgba(255,255,255,.52);
}

.sheet__close{
  flex:none;
  display:grid;place-items:center;
  width:40px;height:40px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.80);
  cursor:pointer;
  transition:background .35s var(--ease-soft),color .35s var(--ease-soft),transform .35s var(--ease);
}
.sheet__close svg{width:20px;height:20px}
.sheet__close:hover{background:rgba(255,255,255,.16);color:#fff;transform:rotate(90deg)}

/* ── Cartões ─────────────────────────────────────────────────────── */

.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.5vw,20px);
  margin:0;
  padding:0;
  list-style:none;
}

.card{min-width:0}

.card__fig{
  position:relative;
  margin:0 0 12px;
  aspect-ratio:1/1;
  overflow:hidden;
  border-radius:clamp(12px,1.3vw,18px);
  background:rgba(255,255,255,.04);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);
}

/* Aro de gradiente que acende no hover do cartão */
.card__fig::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:var(--brand-gradient);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  opacity:0;
  transition:opacity .45s var(--ease-soft);
  pointer-events:none;
}

.card__img{
  width:100%;height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1.015);
  transition:opacity .7s var(--ease-soft),transform .8s var(--ease);
}
.card__img.is-loaded{opacity:1}

@media (hover:hover){
  .card:hover .card__img{transform:scale(1.045)}
  .card:hover .card__fig::after{opacity:1}
  .card:hover .card__tag{color:#fff}
}

.card__tag{
  margin:0;
  font-size:11px;
  font-weight:400;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.46);
  transition:color .35s var(--ease-soft);
}

.card__name{
  margin:3px 0 0;
  font-size:clamp(.86rem,1.05vw,.98rem);
  font-weight:300;
  color:rgba(255,255,255,.80);
}

/* ── Chamada final do painel ─────────────────────────────────────── */

.sheet__cta{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-top:clamp(22px,2.8vw,34px);
  padding:13px 22px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
  font-size:.92rem;
  font-weight:400;
  color:#fff;
  text-decoration:none;
  transition:background .45s var(--ease-soft),box-shadow .45s var(--ease-soft);
}
.sheet__cta svg{width:15px;height:15px;transition:transform .45s var(--ease)}
.sheet__cta:hover{
  background:var(--brand-gradient);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
}
.sheet__cta:hover svg{transform:translateX(4px)}

/* Trava o scroll do fundo enquanto o painel está aberto */
body.is-locked{overflow:hidden}

/* ───────────────────────────────────────────────────────────────────
   Responsivo
   ─────────────────────────────────────────────────────────────────── */

@media (max-width:820px){
  .grid{grid-template-columns:1fr 1fr}
  .grid .card:last-child{grid-column:1 / -1;max-width:calc(50% - 10px)}
}

@media (max-width:560px){
  .grid{grid-template-columns:1fr;gap:20px}
  .grid .card:last-child{max-width:none}
  .sheet{padding:0}
  .sheet__panel{
    --pad:clamp(20px,6vw,28px);
    max-width:none;
    min-height:100%;
    border-radius:0;
    padding:0 var(--pad) var(--pad);
  }
  /* Sem Esc no celular: o botão de fechar precisa acompanhar a rolagem */
  .sheet__head{
    position:sticky;
    top:0;
    z-index:2;
    margin:0 calc(var(--pad) * -1) clamp(18px,4vw,24px);
    padding:16px var(--pad);
    background:rgba(10,9,12,.90);
    -webkit-backdrop-filter:blur(20px);
            backdrop-filter:blur(20px);
  }
}

/* Enquadramento igual ao do mock. O inset -3% + scale(1.03) existem
   para o parallax do cursor nunca revelar borda ao transladar ±14px —
   juntos ampliam a arte em 9.2%, cortando ~4.6% de cada lado.
   Sem cursor fino nao ha parallax (--mx/--my ficam em 0 para sempre),
   entao a folga so afastava a arte do enquadramento da referencia.
   A condicao espelha o finePoint do hero.js: escopar por retrato seria
   errado, pois uma janela de desktop estreita tem cursor e precisa
   da folga. */
@media (hover:none),(pointer:coarse){
  .hero__bg{inset:0;transform:none}
}

/* ── Retrato ─────────────────────────────────
   Proporções medidas de AJUSTES/mobile-reference.jpg (1080×1920):
   recuo lateral 213/1080, título 110/1080, logo 229/110 do título,
   bloco começando em 22.7% da altura. */
@media (max-aspect-ratio: 0.9999/1){
  /* Liquid de reserva: quem faz o efeito no mobile agora é o shader
     (.is-gl). Isto só entra se o WebGL não subir — aparelho fraco,
     economia de dados ou contexto perdido. */
  .hero:not(.is-gl) .hero__bg-img{
    animation:liquidFlow 6s ease-in-out infinite;
  }

  .hero{
    align-items:flex-start;
    padding-top:clamp(120px,22.7vh,260px);
    padding-bottom:clamp(48px,8vh,110px);
  }
  .hero__inner{
    --t:clamp(2.1rem,10.2vw,5rem);
    padding-inline:clamp(24px,19.7vw,150px);
  }
  /* No retrato a marca é um pouco menor em relação ao título */
  .hero__logo{width:calc(var(--t) * 2.08)}
  .hero__title{line-height:.90;margin-top:calc(var(--t) * .89)}
  /* Botão nas medidas exatas de mobile-reference.jpg (1080px de base):
     altura 64, chip 52×44, recuos 12/14, vão 17, rótulo 23.
     Tudo em vw para escalar igual ao mock. */
  .cta{
    /* A razão botão/título do desktop (68÷95 ≈ .72) daria 27px aqui —
       o valor antigo — e isso fica abaixo do alvo mínimo de toque.
       Esta faixa é o meio-termo: cumpre os 44px sem a pílula brigar
       de igual para igual com o título. */
    --h:clamp(42px,11.5vw,54px);
    gap:calc(var(--h) * .266);                    /* 17 ÷ 64 */
    padding:calc(var(--h) * .156) calc(var(--h) * .25)
            calc(var(--h) * .156) calc(var(--h) * .1875);
    border-radius:calc(var(--h) * .30);
    margin-top:calc(var(--t) * .66);
  }

  /* Ativa animação gradiente do botão ao clicar */
  .cta:active{
    animation:ctaPulse 1.5s ease-out;
  }
  .cta__icon{
    width:calc(var(--h) * .8125);                 /* 52 ÷ 64 */
    height:calc(var(--h) * .6875);                /* 44 ÷ 64 */
    border-radius:calc(var(--h) * .22);
  }
  /* O rótulo não acompanha --h: na largura de um celular ele estouraria
     o recuo lateral da hero. Fica na mesma faixa do desktop. */
  .cta__label{font-size:clamp(.82rem,3.4vw,.95rem)}

  /* Projetos à esquerda, contatos à direita — como na referência */
  .topbar{
    justify-content:space-between;
    padding-block:clamp(28px,9vh,80px) 0;
    padding-inline:clamp(20px,19.7vw,150px);
  }
}

/* Só telas realmente estreitas abrem mão do recuo da referência */
@media (max-width:340px){
  .hero__inner{--t:clamp(1.8rem,9.4vw,2.4rem);padding-inline:clamp(18px,13vw,52px)}
  .topbar{padding-inline:clamp(16px,13vw,52px)}
  .cta__label{font-size:.88rem}
}

/* Em retrato o selo de disponibilidade sai: a referência põe Projetos
   à esquerda e os contatos à direita, sem terceiro elemento. */
@media (max-aspect-ratio: 0.9999/1){
  .topbar__status{display:none}
}

/* Paisagem baixa (notebook curto / celular deitado).
   min-height continua 100svh: o bloco encolhe via --t, então a arte
   segue preenchendo a tela em vez de deixar uma faixa preta embaixo.
   O topo precisa passar sob o roda-teto sem encostar nele. */
@media (max-height:560px) and (orientation:landscape){
  .hero{padding-top:104px;padding-bottom:48px}
  .hero__inner{--t:clamp(1.9rem,7.6vh,3.4rem)}
  .topbar{padding-block:16px}
}

/* ───────────────────────────────────────────────────────────────────
   Acessibilidade — movimento reduzido
   ─────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .hero__logo,.ln,.cta{opacity:1}
  .hero__bg,.hero__inner{transform:none}
  .hero__grain{animation:none}
  /* Sem cortina: quem pediu menos movimento vai direto ao site */
  .intro{display:none}
}