/* ══ FONTES ══
   Servidas pelo próprio site em vez do Google Fonts: elimina uma
   requisição bloqueante a terceiro e para de enviar o IP do visitante
   para o Google. Subconjunto latino, que cobre português.
   font-display:swap para o texto aparecer antes da fonte chegar. */
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url("assets/fontes/Sora-600.woff2") format("woff2")}
@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url("assets/fontes/Sora-700.woff2") format("woff2")}
@font-face{font-family:'Sora';font-style:normal;font-weight:800;font-display:swap;src:url("assets/fontes/Sora-800.woff2") format("woff2")}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url("assets/fontes/SpaceGrotesk-400.woff2") format("woff2")}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url("assets/fontes/SpaceGrotesk-600.woff2") format("woff2")}
/* ═══════════════════════════════════════════
   VELUNE — identidade visual
   gradiente base: #EDC5D9 → #CAA2E0 → #93BEE0
   ═══════════════════════════════════════════ */

:root{
  --rose:#EDC5D9;
  --lilac:#CAA2E0;
  --sky:#93BEE0;
  --grad: linear-gradient(120deg, var(--rose) 0%, var(--lilac) 51%, var(--sky) 100%);
  --grad-r: linear-gradient(300deg, var(--rose) 0%, var(--lilac) 51%, var(--sky) 100%);

  --ink:#07060C;
  --ink-2:#0C0A16;
  --ink-3:#120F1F;
  --line:rgba(202,162,224,.14);
  --line-2:rgba(202,162,224,.28);
  --txt:#EDEAF6;
  /* Clareado de #A79FC2. O cálculo antigo mirava só o fundo mais
     escuro do site (#0B0918). Mas as seções têm a cena do mar por
     trás, que levanta o fundo até uns #423B66 — e ali o contraste
     caía para 4,3:1. Neste tom passa 4,5:1 contra TODOS os fundos
     que o site produz, do mais escuro ao mais claro. */
  --txt-dim:#B9B2D2;
  /* Mesma história: de #7D769C, que dava 4,6:1 no fundo escuro mas
     despencava para 3,0:1 sobre a cena. Este sobe para 4,4-6,8.
     Continua abaixo do --txt-dim, então a hierarquia se mantém. */
  --txt-mute:#9A93B9;

  --r-sm:14px; --r:20px; --r-lg:28px; --r-xl:40px;
  --pad: clamp(20px, 5vw, 90px);
  --ease: cubic-bezier(.16,1,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--txt);
  font-family:'Space Grotesk','Segoe UI',system-ui,sans-serif;
  font-size:16px; line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:'Sora','Segoe UI',sans-serif;line-height:1.06;letter-spacing:-.03em;font-weight:700}
::selection{background:var(--lilac);color:#0B0916}

/* Foco visível para navegação por teclado. Não existia: quem usa Tab
   não tinha como saber onde estava na página.
   :focus-visible e não :focus — o navegador só mostra o anel quando a
   navegação é por teclado, sem poluir o clique de mouse. */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--rose);
  outline-offset:3px;
  border-radius:6px;
}
.btn:focus-visible{outline-offset:4px}
/* o resumo do FAQ é uma caixa inteira: o anel acompanha o formato */
.faq summary:focus-visible{outline-offset:-3px;border-radius:var(--r)}

/* scrollbar */
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--lilac),var(--sky));border-radius:99px;border:3px solid var(--ink)}

.grad{
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  background-size:200% 100%;
  animation:gradShift 9s ease-in-out infinite;
}
@keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* ══ PRELOADER ══ */
.loader{
  position:fixed;inset:0;z-index:999;background:var(--ink);
  display:grid;place-items:center;
  transition:opacity .7s var(--ease), visibility .7s;
}
.loader.done{opacity:0;visibility:hidden}
.loader__inner{display:grid;justify-items:center;gap:26px;width:min(320px,70vw)}
.loader__logo{width:180px;opacity:.9;filter:drop-shadow(0 0 40px rgba(202,162,224,.45));animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.55;transform:scale(.97)}50%{opacity:1;transform:scale(1)}}
.loader__bar{width:100%;height:2px;background:rgba(202,162,224,.15);border-radius:9px;overflow:hidden}
.loader__bar span{display:block;height:100%;width:0;background:var(--grad);box-shadow:0 0 18px var(--lilac)}
.loader__txt{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--txt-mute)}

/* ══ FUNDO DO MAR ══
   A coluna d'água: luz difusa na superfície (topo) descendo
   para o breu do abismo (base).                              */
.bg{position:fixed;inset:0;z-index:-2;overflow:hidden;background:
  linear-gradient(180deg, #1B1436 0%, #14142E 22%, #0D1226 48%, #080B18 74%, #04050C 100%),
  var(--ink);}

/* Raios de sol, cáusticas, bolhas e vida marinha são desenhados no
   canvas (app.js). Camadas em DOM com mix-blend-mode + transform
   animado em tela cheia custavam caro demais; no canvas tudo isso
   sai em uma única camada de composição. */
/* ══ CENA DA VELUNE ══
   Arte oficial do estúdio: a coluna d'água inteira numa imagem só —
   luz da superfície em cima, leito com conchas e corais embaixo.

   Substituiu duas fotos de banco que ocupavam este lugar. Como a arte
   já contém a cena completa, não são mais duas camadas trocando de
   opacidade: é UMA imagem PERCORRIDA verticalmente pelo scroll.

   Os 145% de altura existem só para haver curso: com a imagem do
   tamanho exato do viewport não sobraria nada para deslocar.       */
.cena{
  position:absolute;left:0;right:0;top:0;height:145%;
  background:url("assets/cena-1024.webp") center / cover no-repeat;
  /* 145% de altura − 100% de viewport = 45vh de curso, que em
     percentual da própria altura da camada dá 31% */
  transform:translateY(calc(var(--cena,0) * -31%));
  opacity:var(--cenaOp,.12);
  will-change:transform;
}
@media (min-width:1025px){ .cena{background-image:url("assets/cena-1440.webp")} }
@media (min-width:1441px){ .cena{background-image:url("assets/cena-1920.webp")} }
@media (min-width:1921px){ .cena{background-image:url("assets/cena-2560.webp")} }
/* ══ NÉVOA ══
   Bancos difusos atravessando a cena devagar. Não deformam nem
   desenham nada: só passam por cima, e é a passagem lenta que dá a
   sensação de massa d'água em movimento.

   Em CSS e não no canvas de propósito: animação puramente de
   `transform` roda na thread de composição, então não custa nada da
   thread principal — que é onde vivem os peixes, as bolhas e a sereia.

   Elipses bem achatadas porque névoa na água se espalha na
   horizontal, e degradê radial em vez de filter:blur, que é caro. */
.nevoa{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.nevoa i{
  position:absolute;display:block;border-radius:50%;
  background:radial-gradient(ellipse at center,
    rgba(188,206,246,.55) 0%, rgba(176,192,240,.28) 42%, transparent 72%);
  will-change:transform;
}
/* larguras e velocidades diferentes: se todos andassem juntos, leria
   como uma camada só deslizando, não como água */
.nevoa i:nth-child(1){width:78vw;height:26vh;top:6%; opacity:.13;animation:nevoaDir 74s linear infinite}
.nevoa i:nth-child(2){width:62vw;height:20vh;top:28%;opacity:.10;animation:nevoaEsq 103s linear infinite -22s}
.nevoa i:nth-child(3){width:94vw;height:32vh;top:48%;opacity:.09;animation:nevoaDir 129s linear infinite -60s}
.nevoa i:nth-child(4){width:55vw;height:18vh;top:68%;opacity:.11;animation:nevoaEsq 88s  linear infinite -40s}
.nevoa i:nth-child(5){width:70vw;height:24vh;top:84%;opacity:.07;animation:nevoaDir 152s linear infinite -95s}

/* o percurso começa e termina fora da tela, então o reinício do ciclo
   nunca aparece */
@keyframes nevoaDir{from{transform:translateX(-105%)}to{transform:translateX(205%)}}
@keyframes nevoaEsq{from{transform:translateX(205%)} to{transform:translateX(-105%)}}

@media(prefers-reduced-motion:reduce){ .nevoa i{animation:none;opacity:.05} }

#water{position:absolute;inset:0;width:100%;height:100%}
/* auroras: sem filter:blur (custo alto). O degradê radial já entrega o esfumado. */
/* poças de luz difusa na água — a claridade fica no topo,
   o roxo profundo desce para o fundo */
.aurora{position:absolute;border-radius:50%;opacity:.42}
.aurora--1{width:58vw;height:58vw;left:-16vw;top:-22vw;background:radial-gradient(circle,rgba(237,197,217,.5),transparent 62%);animation:drift1 26s ease-in-out infinite}
.aurora--2{width:52vw;height:52vw;right:-13vw;top:-6vh;background:radial-gradient(circle,rgba(147,190,224,.55),transparent 62%);animation:drift2 32s ease-in-out infinite}
.aurora--3{width:64vw;height:64vw;left:18vw;top:44vh;background:radial-gradient(circle,rgba(122,148,214,.4),transparent 60%);opacity:.3;animation:drift3 38s ease-in-out infinite}
@keyframes drift1{50%{transform:translate(14vw,11vh) scale(1.15)}}
@keyframes drift2{50%{transform:translate(-12vw,16vh) scale(1.1)}}
@keyframes drift3{50%{transform:translate(-11vw,-17vh) scale(1.18)}}

/* profundidade: escurece nas bordas e, sobretudo, para baixo */
.bg__vignette{position:absolute;inset:0;background:
  radial-gradient(ellipse 95% 75% at 50% 30%, transparent 38%, rgba(4,5,12,.7) 100%),
  linear-gradient(180deg, transparent 45%, rgba(3,4,10,.75) 100%);}

.noise{
  /* sem mix-blend-mode: um blend em tela cheia recompõe a página
     inteira a cada quadro de scroll, e a 4% de opacidade o
     resultado visual é o mesmo. */
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
.spotlight{
  position:fixed;width:600px;height:600px;left:0;top:0;z-index:0;pointer-events:none;
  margin:-300px 0 0 -300px;
  background:radial-gradient(circle, rgba(147,190,224,.12) 0%, rgba(202,162,224,.05) 35%, transparent 62%);
  transition:opacity .4s;
}
.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:120;background:rgba(202,162,224,.08)}
.progress span{display:block;height:100%;width:0;background:var(--grad);box-shadow:0 0 14px rgba(202,162,224,.8)}

/* ══ NAV ══ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;gap:28px;
  padding:18px var(--pad);
  transition:.5s var(--ease);
}
.nav.stuck{
  padding:11px var(--pad);
  background:rgba(9,7,17,.62);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  border-bottom:1px solid var(--line);
}
.nav__brand img{height:58px;width:auto;transition:.5s var(--ease);filter:drop-shadow(0 0 22px rgba(202,162,224,.35))}
.nav.stuck .nav__brand img{height:46px}
.nav__brand:hover img{filter:drop-shadow(0 0 32px rgba(202,162,224,.7))}
.nav__links{display:flex;gap:6px;margin-left:auto}
.nav__links a{
  position:relative;padding:9px 16px;border-radius:99px;font-size:14.5px;color:var(--txt-dim);
  transition:.35s var(--ease);
}
.nav__links a::before{
  content:'';position:absolute;inset:0;border-radius:99px;
  background:rgba(202,162,224,.1);border:1px solid var(--line);
  opacity:0;transform:scale(.85);transition:.35s var(--ease);
}
.nav__links a:hover{color:#fff}
.nav__links a:hover::before{opacity:1;transform:scale(1)}
.nav__links a span{position:relative}
/* O desafio é o único item da navegação que muda todo dia, então sai
   do padrão dos links e vira botão — com um ponto pulsante que
   sinaliza novidade sem precisar escrever "novo", que envelhece mal. */
.nav__desafio{
  color:var(--txt);font-weight:600;
  border:1px solid rgba(202,162,224,.4);
  background:rgba(202,162,224,.1);
}
.nav__desafio:hover{background:rgba(202,162,224,.2);border-color:var(--lilac)}
/* Havia aqui uma bolinha rosa pulsante no canto. Saiu: o contorno e o
   fundo já separam este item dos outros links, e o ponto piscando
   sugeria notificação — algo novo esperando — o que não é verdade. */
.nav__burger{display:none;background:none;border:0;cursor:pointer;width:34px;height:34px;position:relative}
.nav__burger span{position:absolute;left:6px;right:6px;height:1.5px;background:var(--txt);transition:.35s var(--ease)}
.nav__burger span:nth-child(1){top:13px}
.nav__burger span:nth-child(2){top:20px}
.nav__burger.on span:nth-child(1){top:16.5px;transform:rotate(45deg)}
.nav__burger.on span:nth-child(2){top:16.5px;transform:rotate(-45deg)}

.drawer{
  position:fixed;inset:0;z-index:99;background:rgba(7,6,12,.96);backdrop-filter:blur(20px);
  display:grid;align-content:center;justify-items:center;gap:14px;
  opacity:0;visibility:hidden;transition:.45s var(--ease);
}
.drawer.on{opacity:1;visibility:visible}
.drawer a{font-family:'Sora';font-size:clamp(28px,7vw,42px);font-weight:600;color:var(--txt-dim);transition:.3s}
.drawer a:hover{color:#fff;letter-spacing:.01em}
.drawer__cta{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent!important;margin-top:12px}

/* ══ BOTÕES ══ */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;border-radius:99px;font-size:14.5px;font-weight:600;
  letter-spacing:.01em;cursor:pointer;border:1px solid transparent;
  position:relative;overflow:hidden;transition:.45s var(--ease);
  white-space:nowrap;
}
.btn .ico{width:18px;height:18px;fill:currentColor;flex:none}
.btn--primary{color:#0A0813;background:var(--grad);background-size:200% 100%;box-shadow:0 8px 30px -8px rgba(202,162,224,.6)}
.btn--primary:hover{background-position:100% 0;box-shadow:0 14px 44px -8px rgba(202,162,224,.85);transform:translateY(-2px)}
.btn--primary::after{
  content:'';position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);
  transition:left .8s var(--ease);
}
.btn--primary:hover::after{left:140%}
.btn--glass,.btn--ghost{
  color:var(--txt);background:rgba(202,162,224,.06);
  border-color:var(--line-2);
}
.btn--glass:hover,.btn--ghost:hover{background:rgba(202,162,224,.14);border-color:var(--lilac);transform:translateY(-2px);box-shadow:0 10px 34px -12px rgba(202,162,224,.6)}
.btn--lg{padding:18px 38px;font-size:16px}
.nav__cta{padding:11px 20px;font-size:13.5px}

/* ══ REVEAL ══ */
.reveal{opacity:0;transform:translateY(34px);filter:blur(6px);transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease)}
.reveal.in{opacity:1;transform:none;filter:none}
.reveal[data-delay="1"]{transition-delay:.09s}
.reveal[data-delay="2"]{transition-delay:.18s}
.reveal[data-delay="3"]{transition-delay:.27s}
.reveal[data-delay="4"]{transition-delay:.36s}
.reveal[data-delay="5"]{transition-delay:.45s}

/* ══ HERO ══ */
.hero{padding:clamp(130px,17vh,190px) var(--pad) 0;position:relative;z-index:2}
.hero__grid{
  display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(30px,5vw,70px);align-items:center;
  max-width:1400px;margin:0 auto;
}
.pill{
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 16px 7px 12px;border-radius:99px;
  border:1px solid var(--line-2);background:rgba(202,162,224,.07);
  font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-dim);
}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--sky);box-shadow:0 0 0 0 rgba(147,190,224,.7);animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 9px rgba(147,190,224,0)}100%{box-shadow:0 0 0 0 rgba(147,190,224,0)}}

/* 6.0vw e não mais: a linha "do jeitinho que" é a mais larga e a
   6.4vw estourava a coluna por 8px, quebrando em duas linhas. */
.hero h1{font-size:clamp(40px,6vw,90px);font-weight:800;margin:26px 0 22px;letter-spacing:-.045em}
.hero h1 .line{display:block}
.hero__sub{color:var(--txt-dim);font-size:clamp(15px,1.15vw,17.5px);max-width:52ch}
.hero__sub b{color:var(--txt);font-weight:600}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin:34px 0 0}

/* logo do hero
   Antes havia uma esfera com três anéis girando em volta. Saiu: a
   sereia já é a marca, e o aparato em volta competia com ela. Resta o
   logo boiando sobre o fundo, com o brilho fazendo as vezes da luz
   que atravessaria a água. */
.hero__art{position:relative;display:grid;place-items:center;min-height:min(560px,60vw)}
.hero__logo{
  width:min(420px,72%);
  filter:drop-shadow(0 0 46px rgba(202,162,224,.55)) drop-shadow(0 0 90px rgba(147,190,224,.3));
  animation:levit 8s ease-in-out infinite;
}
/* boiando: sobe, desce e balança de leve, como algo suspenso na água */
@keyframes levit{
  0%,100%{transform:translate(-6px,-10px) rotate(-1.2deg)}
  50%    {transform:translate(6px,10px) rotate(1.2deg)}
}

/* marquee */
.marquee{
  margin-top:clamp(60px,9vh,110px);overflow:hidden;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:20px 0;
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.marquee__track{display:flex;gap:38px;width:max-content;animation:slide 34s linear infinite;align-items:center}
/* Texto PREENCHIDO, não vazado.
   O contorno (-webkit-text-stroke) foi tentado e abandonado: a linha
   do traço é quase toda borda antisserrilhada, então ou fica falhada
   (fina) ou fica pesada (grossa o bastante para ter miolo sólido).
   Medido, a fração de pixel sólido ia de 64% a 81% entre 1px e 3,2px,
   sem platô — não existe faixa boa nesse tamanho.
   Preenchido renderiza sólido em qualquer tamanho e qualquer posição
   sub-pixel, que é o que um marquee em movimento precisa. */
.marquee__track span{
  font-family:'Sora';font-size:clamp(22px,3vw,40px);
  font-weight:700;letter-spacing:.02em;
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  opacity:.30;
}
.marquee__track i{color:var(--lilac);font-style:normal;font-size:18px;opacity:.6}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}

/* ══ SEÇÕES ══ */
.section{padding:clamp(90px,13vh,150px) var(--pad);max-width:1400px;margin:0 auto;position:relative;z-index:2}
.section--tight{padding-top:clamp(50px,7vh,90px)}
/* 920px e não 760: a 60px, "Tudo para o seu personagem" mede 887px e
   "Da ideia ao seu personagem" 866px — no teto antigo os dois quebravam
   em lugares que ninguém escolheu. O parágrafo de apoio continua estreito
   pela regra própria, senão a linha ficaria longa demais para ler. */
.head{margin-bottom:clamp(40px,6vh,66px);max-width:920px}
.eyebrow{
  display:inline-block;font-size:11.5px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--txt-mute);margin-bottom:18px;
}
.head h2{font-size:clamp(30px,4.6vw,60px);font-weight:700}
.head__sub{color:var(--txt-dim);margin-top:16px;font-size:16.5px;max-width:62ch}

/* A seção do convite tem respiro próprio: o padrão somava o rodapé
   dela com o topo da seção seguinte e abria um vão de ~300px.
   O rodapé é zero porque a seção seguinte já traz os seus ~114px —
   somar os dois era o que deixava o card colado no hero e distante do
   catálogo, 69px acima contra 183px abaixo. */
#desafio-cta{padding-top:clamp(48px,7vh,88px);padding-bottom:0}

/* ══ CONVITE DO DESAFIO ══
   O card inteiro é o link, não só o botão: alvo grande erra menos,
   sobretudo no celular. */
.convite{
  display:grid;grid-template-columns:1fr 1.05fr;align-items:center;gap:clamp(20px,4vw,48px);
  /* Quem define a altura é a coluna da sereia, não este padding — por
     isso ele é curto. Zerar não adiantava: cortava a cauda sem resolver
     o vazio. O ajuste de verdade está no min-height da arte. */
  padding:12px clamp(24px,4vw,52px);
  border-radius:var(--r-xl);position:relative;overflow:hidden;
  /* Fundo próprio e opaco, como o painel do Discord: o bloco deixa de
     ser um vidro sobre a cena e passa a ter cenário próprio.
     O véu é mais fechado à direita, que é onde fica o texto. */
  background:
    linear-gradient(100deg, rgba(8,6,18,.58) 0%, rgba(8,6,18,.78) 44%, rgba(8,6,18,.90) 100%),
    url("assets/cena-1024.webp") center 46% / cover no-repeat;
  border:1px solid var(--line-2);
  transition:.6s var(--ease);
}
@media (min-width:1025px){
  .convite{background:
    linear-gradient(100deg, rgba(8,6,18,.58) 0%, rgba(8,6,18,.78) 44%, rgba(8,6,18,.90) 100%),
    url("assets/cena-1440.webp") center 46% / cover no-repeat;}
}
.convite:hover{border-color:var(--lilac);transform:translateY(-4px);
  box-shadow:0 34px 74px -32px rgba(202,162,224,.6)}

/* ── arte ── */
/* A altura da coluna de arte é que define a altura do card, já que a
   sereia está fora do fluxo. Calibrada para sobrar só a ponta da
   cauda para fora. */
/* Reduzido de 540px para 460px junto com a sereia, na mesma proporção:
   o card encolhe, mas ela continua ocupando a mesma fatia do quadro.
   Era daqui que vinham os 139px de vazio em volta do texto. */
.convite__arte{position:relative;min-height:clamp(300px,34vw,460px)}

/* A sereia sai do FLUXO do layout: posicionada em absoluto, ela pode
   crescer o quanto for sem empurrar a altura do card, que passa a ser
   ditada pela coluna de texto.
   Ancorada pelo topo, então o que sangra para fora é a cauda — cortar
   a cabeça ficaria errado, cortar a cauda lê como mergulho.

   A silhueta é azul quase preto, invisível neste fundo: em vez de
   gerar outro arquivo, ela vira MÁSCARA e o gradiente da marca
   preenche por baixo. */
.convite__sereia{
  /* O topo negativo compensa o LETTERBOX da máscara. Medido no canvas,
     não estimado: a tinta ocupa de 18,8% a 82,1% da caixa, sobrando
     ~19% de vazio em cada ponta. Ancorar em 0 jogaria a silhueta para
     baixo e cortaria a cauda.
     O -25,6% centra a TINTA (não a caixa) no card, deixando ~24px de
     folga em cima e embaixo — o bastante para o ±8px do `boia` e a
     rotação de 1,6° não encostarem na borda.
     A altura acompanha a coluna da arte na razão 1,5 (51vw contra
     34vw, teto 690 contra 460), então a proporção se mantém em
     qualquer largura. Sem piso de propósito: no celular a coluna cai
     para 160px, e um `clamp` com mínimo faria a sereia estourar o
     card. Encolher junto é o comportamento certo aqui. */
  position:absolute;top:-25.6%;left:50%;
  display:block;height:min(690px,51vw);width:auto;aspect-ratio:3/6.2;
  background:var(--grad);
  -webkit-mask:url("assets/sereia.svg") center / contain no-repeat;
  mask:url("assets/sereia.svg") center / contain no-repeat;
  filter:drop-shadow(0 0 40px rgba(202,162,224,.5));
  animation:boia 7s ease-in-out infinite;
}
/* o translate de centralização vai dentro do keyframe, senão a
   animação sobrescreveria o -50% e a sereia saltaria para o lado */
@keyframes boia{
  0%,100%{transform:translate(-50%,-8px) rotate(-1.6deg)}
  50%    {transform:translate(-50%,8px) rotate(1.6deg)}
}

/* ── texto ── */
.convite__selo{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;
  padding:6px 15px 6px 11px;border-radius:99px;
  border:1px solid var(--line-2);background:rgba(202,162,224,.08);
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-dim);
}
/* Só o teto subiu, de 44 para 56. O coeficiente segue 3.8vw de
   propósito: aumentá-lo faria o título estourar a coluna em telas
   médias, onde ela encolhe mais rápido que a viewport. Assim o
   tamanho grande só aparece acima de ~1474px, onde há espaço. */
.convite h2{font-size:clamp(28px,3.8vw,56px);margin-bottom:14px;letter-spacing:-.02em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
/* A primeira linha é a mecânica: informação de apoio, fica discreta —
   só o tempo da partida sobe para a cor de texto cheia, porque é o
   dado que define a aposta. */
/* 54ch e não 46: a primeira linha tem 45 caracteres e o `ch` mede a
   largura do zero, mais estreito que a média das minúsculas — no
   limite antigo ela quebrava sozinha e criava uma terceira linha. */
.convite p{color:var(--txt-dim);font-size:clamp(15px,1.15vw,17px);max-width:54ch;margin-bottom:12px}
.convite p b{color:var(--txt);font-weight:600}

/* A segunda é a razão de clicar, e por isso é o maior corpo de texto
   do card — perde só para o h2. O prêmio recebe o gradiente da marca,
   mas em duas expressões curtas: a linha inteira em gradiente brigaria
   com o título logo acima e nenhum dos dois ganharia. */
/* 25px e não 27: a linha inteira numa só cabe em 490px de uma coluna
   de 551px. A 27px daria 530px — cabe na tela larga, mas com 21px de
   folga ela quebraria sozinha em telas um pouco menores, e a quebra
   voltaria por acidente. Sem max-width porque agora quem limita é a
   própria coluna, e um teto menor forçaria a quebra de novo. */
.convite p.convite__premio{
  color:var(--txt);
  font-size:clamp(18px,1.7vw,25px);
  line-height:1.38;font-weight:500;
  max-width:none;margin-bottom:28px;
}
/* mais específico que `.convite p b`, senão a cor sólida de cima
   sobrescreveria o transparent e mataria o gradiente */
.convite p.convite__premio b{
  font-weight:800;letter-spacing:-.005em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  /* o brilho é o que separa o prêmio do resto: sem ele o gradiente
     claro se dilui no fundo escuro do card */
  filter:drop-shadow(0 0 22px rgba(202,162,224,.55));
}
.convite__botao{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 30px;border-radius:99px;
  background:var(--grad);background-size:200% 100%;color:#0A0813;
  font-weight:600;font-size:15px;
  box-shadow:0 10px 30px -10px rgba(202,162,224,.6);
  transition:.5s var(--ease);
}
.convite__botao svg{width:18px;height:18px}
.convite:hover .convite__botao{background-position:100% 0;transform:translateX(4px)}
.convite:focus-visible{outline:2px solid var(--rose);outline-offset:4px}

@media(max-width:820px){
  /* em coluna única a sereia deixa de ditar a altura, então o card
     precisa do respiro vertical de volta */
  .convite{grid-template-columns:1fr;text-align:center;justify-items:center;
    padding:0 clamp(20px,5vw,32px) clamp(26px,5vw,34px)}
  .convite__arte{order:-1;min-height:160px}
  .convite p{margin-left:auto;margin-right:auto}
}

/* ══ BENTO ══ */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.bcard{
  position:relative;grid-column:span 1;min-height:290px;
  border-radius:var(--r-lg);overflow:hidden;
  /* Sem textura de madrepérola aqui. Tentei aplicá-la como camada de
     fundo, mas a imagem é OPACA e o gradiente do card é quase
     transparente — ela cobria o card inteiro e apagava o texto.
     Na vitrine funciona porque lá há gradiente escuro sólido por
     baixo segurando a mistura. */
  background:linear-gradient(160deg, rgba(202,162,224,.09), rgba(147,190,224,.03) 55%, transparent);
  border:1px solid var(--line);
  transition:.6s var(--ease);
  transform-style:preserve-3d;
}
.bcard--wide{grid-column:span 2}
.bcard::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--grad);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:.6s var(--ease);
}
.bcard:hover::before{opacity:.8}
.bcard:hover{transform:translateY(-6px);box-shadow:0 34px 70px -34px rgba(202,162,224,.5)}
.bcard__glow{
  position:absolute;width:340px;height:340px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(202,162,224,.22),transparent 65%);
  left:var(--mx,50%);top:var(--my,50%);margin:-170px 0 0 -170px;
  opacity:0;transition:opacity .45s;
}
.bcard:hover .bcard__glow{opacity:1}
.bcard__body{position:relative;z-index:2;padding:32px;display:flex;flex-direction:column;height:100%;transform:translateZ(30px)}

/* Render 3D do palco correspondente (pacote da Velune), à direita.
   Entra pelo --img no HTML, então trocar a arte de uma categoria é
   trocar uma URL. A máscara horizontal dissolve a imagem antes de ela
   chegar no texto — sem isso o parágrafo ficaria ilegível por cima. */
/* O render ocupa só o CANTO inferior direito, não a lateral inteira.
   Ocupando 92% da altura ele empurrava o texto para uma coluna de 58%
   da largura, e nos cards estreitos o parágrafo quebrava a cada três
   palavras. Limitando a altura, o texto volta a usar quase toda a
   largura na parte de cima. */
.bcard::after{
  content:'';position:absolute;z-index:1;right:-2%;bottom:-4%;
  width:48%;height:62%;
  background:var(--img) right bottom / contain no-repeat;
  mask-image:linear-gradient(100deg,transparent,#000 46%);
  -webkit-mask-image:linear-gradient(100deg,transparent,#000 46%);
  opacity:.6;transition:.6s var(--ease);pointer-events:none;
}
.bcard:hover::after{opacity:.85;transform:translateY(-4px) scale(1.04)}
.bcard--wide::after{width:34%;height:78%}

.bcard h3{font-size:23px;margin:0 0 10px}
.bcard p{color:var(--txt-dim);font-size:14.5px;max-width:min(46ch,92%)}
.bcard--wide p{max-width:min(52ch,68%)}
.bcard__tag{margin-top:auto}                 /* empurra o selo para a base */
.bcard__tag{
  margin-top:18px;align-self:flex-start;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 13px;border-radius:99px;border:1px solid var(--line);color:var(--txt-mute);
}

/* ══ PRODUTOS ══ */
/* 4 colunas: uma por categoria da loja, sem sobrar card órfão na
   última linha como aconteceria com 4 itens num grid de 3.
   Abaixo de 1280px viram 2×2 — quatro cards com mídia 4:3 mais texto
   ficam estreitos demais nessa faixa. */
.products{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:1280px){ .products{grid-template-columns:repeat(2,1fr);gap:20px} }
.prod{
  border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(18,15,31,.9),rgba(10,8,18,.7));
  transition:.6s var(--ease);transform-style:preserve-3d;
  position:relative;
}
.prod::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;z-index:3;
  background:var(--grad);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:.5s;pointer-events:none;
}
.prod:hover::before{opacity:.9}
.prod:hover{transform:translateY(-8px);box-shadow:0 40px 80px -40px rgba(147,190,224,.55)}
.prod__media{
  position:relative;aspect-ratio:4/3;overflow:hidden;
  background:
    radial-gradient(circle at 30% 25%, hsl(var(--h1) 60% 60% / .38), transparent 60%),
    radial-gradient(circle at 75% 80%, hsl(var(--h2) 55% 62% / .34), transparent 60%),
    url("assets/madreperola.jpg") repeat,
    linear-gradient(140deg,#150F26,#0B0A16);
  background-size:auto, auto, 260px, auto;
  background-blend-mode:normal, normal, soft-light, normal;
}
.prod__media::after{
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(202,162,224,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(202,162,224,.07) 1px,transparent 1px);
  background-size:28px 28px;
  mask-image:radial-gradient(circle at 50% 50%,#000,transparent 78%);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000,transparent 78%);
}
/* O render 3D do palco é o conteúdo do card, no lugar do texto grande
   que ocupava esse espaço antes. `contain` para o palco nunca ser
   cortado — é ele o produto exposto. */
.prod__art{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:center 58%;
  padding:8% 10% 4%;
  transition:transform .8s var(--ease), filter .8s var(--ease);
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.55));
}
.prod:hover .prod__art{transform:scale(1.06) translateY(-6px)}

/* etiqueta de categoria: some do lugar do título grande e vira uma
   marcação discreta, para não competir com o nome do produto logo abaixo */
.prod__cat{
  position:absolute;left:14px;bottom:12px;z-index:2;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:var(--txt-dim);
  padding:5px 11px;border-radius:99px;
  background:rgba(9,7,17,.7);border:1px solid var(--line);
}
.prod__badge{
  position:absolute;top:14px;left:14px;z-index:2;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;
  padding:6px 12px;border-radius:99px;
  background:rgba(9,7,17,.86);border:1px solid var(--line-2);color:var(--txt-dim);
}
.prod__badge--hot{background:var(--grad);color:#0A0813;border-color:transparent}
.prod__info{padding:24px}
.prod__info h3{font-size:20px;margin-bottom:8px}
.prod__info p{color:var(--txt-dim);font-size:14px;min-height:42px}
.prod__foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:20px;padding-top:18px;border-top:1px solid var(--line);
}
.prod__foot b{font-family:'Sora';font-size:20px;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.prod__go{font-size:13px;color:var(--txt-mute);transition:.4s var(--ease)}
.prod:hover .prod__go{color:var(--rose);transform:translateX(4px)}

/* ══ STEPS ══ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative;padding-top:44px}
.steps__line{position:absolute;top:0;left:0;right:0;height:1px;background:var(--line)}
.steps__line span{display:block;height:100%;width:0;background:var(--grad);box-shadow:0 0 12px var(--lilac);transition:width 1.4s var(--ease)}
/* Cada passo ganha um NÓ sobre a linha de progresso.
   Não é enfeite: a seção é uma sequência, e o nó é o que torna a
   ordem legível de relance — antes eram quatro blocos de texto soltos
   sob uma linha que não se ligava a nada. */
.step{padding:8px 6px 0;position:relative}
.step::before{
  /* a linha fica 44px acima do passo (padding-top de .steps), e o nó
     tem 11px: -44 - 11/2 centra ele exatamente sobre a linha */
  content:'';position:absolute;top:-49.5px;left:6px;
  width:11px;height:11px;border-radius:50%;
  background:var(--ink);
  border:2px solid var(--lilac);
  box-shadow:0 0 0 4px rgba(10,8,20,.9), 0 0 14px rgba(202,162,224,.5);
  transition:.5s var(--ease);
}
.step:hover::before{background:var(--rose);border-color:var(--rose);transform:scale(1.25)}

.step__n{
  font-family:'Sora';font-size:13px;letter-spacing:.2em;font-weight:700;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:16px;
}
.step h3{font-size:19px;margin-bottom:10px}
.step p{color:var(--txt-dim);font-size:14.5px}

/* ══ BOT DE ATENDIMENTO ══
   A versão anterior eram caixas com borda — genéricas ao lado do resto
   do site. Aqui o peso visual vem de MOSTRAR o canal do Discord como
   ele é, e não de descrever em cards. A coluna de texto fica editorial,
   sem moldura, para não disputar com o mockup. */
#bot .head{max-width:1040px}   /* o título tem 999px; o teto padrão é 920 */
.botgrid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,3.4vw,52px);align-items:start}

/* ── mockup do canal ── */
.tick{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);
  background:linear-gradient(165deg,rgba(20,16,41,.92),rgba(11,9,24,.96));
  box-shadow:0 40px 90px -46px rgba(0,0,0,.9);
  transition:.6s var(--ease);transform-style:preserve-3d;
}
/* mesma borda em gradiente dos cards do catálogo */
.tick::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;z-index:3;
  background:var(--grad);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:.6s var(--ease);pointer-events:none;
}
.tick:hover::before{opacity:.75}
.tick:hover{transform:translateY(-5px);box-shadow:0 46px 96px -40px rgba(202,162,224,.42)}
/* brilho que segue o mouse, como no bento */
.tick__glow{
  position:absolute;width:420px;height:420px;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle,rgba(202,162,224,.16),transparent 66%);
  left:var(--mx,50%);top:var(--my,50%);margin:-210px 0 0 -210px;
  opacity:0;transition:opacity .5s;
}
.tick:hover .tick__glow{opacity:1}

.tick__top{
  position:relative;z-index:2;display:flex;align-items:center;gap:9px;
  padding:15px 20px;border-bottom:1px solid var(--line);
  background:rgba(8,6,18,.5);
}
.tick__hash{color:var(--txt-mute);font-size:18px;line-height:1}
.tick__nome{font-family:'Sora';font-size:14px;font-weight:600;letter-spacing:-.01em}
.tick__lock{
  margin-left:auto;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--txt-mute);border:1px solid var(--line);border-radius:99px;padding:4px 11px;
}
.tick__corpo{position:relative;z-index:2;padding:20px;display:grid;gap:17px;
  transform:translateZ(28px)}

.msg{display:grid;grid-template-columns:38px 1fr;gap:12px}
/* o avatar do bot é o mesmo do Discord (assets/brand/velune-avatar.png
   do repositório do bot), reduzido para a web */
.msg__av{
  width:38px;height:38px;border-radius:50%;
  background:url("assets/bot-avatar.png") center / cover no-repeat, #14102A;
  box-shadow:0 0 0 1px rgba(202,162,224,.35), 0 6px 16px -6px rgba(202,162,224,.55);
}
.msg__quem{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px}
.msg__quem i{
  font-style:normal;font-size:9.5px;letter-spacing:.08em;vertical-align:2px;margin-left:6px;
  background:var(--lilac);color:#0A0813;border-radius:4px;padding:2px 5px;font-weight:700;
}

/* embed do Discord: a barra colorida à esquerda é a assinatura visual */
.emb{
  position:relative;border-radius:8px;padding:13px 15px 13px 17px;
  background:rgba(8,6,18,.62);border:1px solid var(--line);
}
.emb::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:8px 0 0 8px;
  background:var(--grad);
}
.emb--verde::before{background:linear-gradient(180deg,#57F287,#3BA55C)}
.emb--azul::before{background:linear-gradient(180deg,#93BEE0,#5865F2)}
.emb b{display:block;font-family:'Sora';font-size:14px;font-weight:700;margin-bottom:5px}
.emb p{color:var(--txt-dim);font-size:13.5px;line-height:1.55}
.emb p strong{color:var(--txt);font-weight:600}
.emb__campo{
  display:block;margin-top:9px;padding-top:9px;border-top:1px solid var(--line);
  font-size:12px;color:var(--txt-mute);
}
.emb__campo i{font-style:normal;color:#57F287;margin-left:6px}
.emb__campo i.on::before{content:'● ';font-size:9px;vertical-align:1px}
.emb__campo code{font-family:ui-monospace,Consolas,monospace;color:var(--rose);letter-spacing:.06em}
.emb__btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
.ebtn{
  font-size:12.5px;font-weight:600;padding:7px 13px;border-radius:6px;
  background:rgba(202,162,224,.12);border:1px solid var(--line-2);color:var(--txt-dim);
}
.ebtn--ok{background:var(--grad);border-color:transparent;color:#0A0813}

/* ── coluna editorial ── */
/* O seletor precisa ser `> ul > li`: a trilha vertical também mora
   dentro de .botlista, e um `.botlista li` solto punha filete e
   respiro de 19px nos itens dela também. */
.botlista > ul{list-style:none;display:grid}
.botlista > ul > li{padding:19px 0;border-bottom:1px solid var(--line)}
.botlista > ul > li:first-child{padding-top:0}
.botlista h4{font-family:'Sora';font-size:16px;font-weight:600;margin-bottom:5px;letter-spacing:-.01em}
/* texto corrido usa o nível --txt-dim, não o --mute: este bloco fica
   sobre a parte mais clara da cena, onde o mute perde legibilidade */
.botlista > ul > li p{color:var(--txt-dim);font-size:13.5px;line-height:1.55}

/* O desconto é o argumento comercial da seção, então deixa de ser
   texto solto e vira bloco: moldura, brilho próprio e o número no
   maior corpo da coluna. Empilhado, porque lado a lado o rótulo e o
   número não compartilham linha de base. */
.fid{
  position:relative;overflow:hidden;
  margin-top:28px;padding:22px 24px;border-radius:var(--r-lg);
  border:1px solid var(--line-2);
  background:
    radial-gradient(120% 150% at 100% 0%, rgba(202,162,224,.18), transparent 64%),
    rgba(8,6,18,.45);
}
.fid::before{
  content:'';position:absolute;top:0;left:22px;right:22px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(237,197,217,.6),transparent);
}
.fid__a{display:block;font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--txt-mute);margin-bottom:8px}
.fid__b{
  display:block;font-family:'Sora';font-size:clamp(38px,3.6vw,54px);font-weight:800;
  line-height:.95;letter-spacing:-.03em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 26px rgba(202,162,224,.55));
}
.fid > p{color:var(--txt-dim);font-size:13.5px;margin-top:10px}

/* ── trilha das fases, vertical ──
   Vertical e não horizontal: acompanha a altura do mockup ao lado e
   lê como um mergulho — começa raso e termina no fundo, na entrega.
   Também acomoda os rótulos por extenso, que na horizontal quebravam
   em duas linhas de larguras diferentes. */
.trilha{margin-top:30px}
.trilha__rot{
  display:block;font-size:11px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--txt-mute);margin-bottom:16px;
}
.trilha__ol{list-style:none;position:relative;padding-left:26px}
/* o fio desce atrás dos pontos, clareando até a entrega */
.trilha__ol::before{
  content:'';position:absolute;left:5px;top:7px;bottom:11px;width:1px;
  background:linear-gradient(180deg,
    rgba(202,162,224,.18),rgba(237,197,217,.5) 60%,rgba(87,242,135,.65));
}
.trilha__ol li{
  position:relative;padding:0 0 14px;
  font-size:13.5px;line-height:1.35;color:var(--txt-dim);
}
.trilha__ol li:last-child{padding-bottom:0}
.trilha__ol li::before{
  content:'';position:absolute;top:4px;left:-26px;
  width:11px;height:11px;border-radius:50%;
  background:#0B0918;border:1px solid rgba(202,162,224,.5);
}
.trilha__ol li.fim{color:var(--txt);font-weight:600;font-size:14.5px}
.trilha__ol li.fim::before{
  background:#57F287;border-color:#57F287;
  box-shadow:0 0 16px rgba(87,242,135,.75);
}

@media(max-width:980px){
  .botgrid{grid-template-columns:1fr}
}
@media(max-width:620px){
  .tick__corpo{padding:16px;gap:14px}
  .msg{grid-template-columns:30px 1fr;gap:9px}
  .msg__av{width:30px;height:30px}
  .fid{padding:20px}
}

/* ══ CTA DISCORD ══ */
.cta{
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--line-2);
  background:linear-gradient(150deg,rgba(202,162,224,.12),rgba(147,190,224,.05) 60%,transparent);
  transform-style:preserve-3d;
}
.cta__conic{
  position:absolute;inset:-140%;
  background:conic-gradient(from 0deg, transparent 0 62%, rgba(237,197,217,.35) 74%, rgba(147,190,224,.35) 84%, transparent 100%);
  animation:spin 12s linear infinite;
}
/* único lugar que ainda gira desde que os anéis do hero saíram */
@keyframes spin{to{transform:rotate(360deg)}}
/* Cena da Velune no lugar do fundo chapado. O véu escuro por cima não
   é enfeite: a arte tem os raios de luz justamente no centro, que é
   onde o texto fica. Sem ele o parágrafo perde contraste. É mais
   fechado no meio e abre nas bordas, para a arte respirar nos cantos. */
.cta__inner{
  position:relative;margin:1px;border-radius:calc(var(--r-xl) - 1px);
  background:
    radial-gradient(ellipse 85% 75% at 50% 48%, rgba(8,6,18,.88), rgba(8,6,18,.60)),
    url("assets/cena-1440.webp") center 42% / cover no-repeat;
  padding:clamp(40px,7vw,84px);
  display:grid;justify-items:center;text-align:center;gap:20px;
  transform:translateZ(28px);
}
.cta__logo{width:min(230px,55%);filter:drop-shadow(0 0 48px rgba(202,162,224,.5));animation:levit 9s ease-in-out infinite}
.cta h2{font-size:clamp(28px,4.4vw,54px)}
.cta p{color:var(--txt-dim);max-width:56ch;font-size:16px}
/* Mais clara que a --txt-mute usada no resto do site: aqui há uma
   imagem por trás, e naquela cor o contraste caía para 2,4:1. */
.cta__hint{font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:#C3B7DF}

/* ══ FAQ ══ */
.faq{display:grid;gap:12px;max-width:920px}
.faq details{
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:rgba(202,162,224,.035);transition:.45s var(--ease);
}
.faq details[open]{background:rgba(202,162,224,.075);border-color:var(--line-2)}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 26px;
  font-family:'Sora';font-weight:600;font-size:17px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  transition:.3s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--rose)}
.faq summary i{
  position:relative;width:18px;height:18px;flex:none;
}
.faq summary i::before,.faq summary i::after{
  content:'';position:absolute;left:50%;top:50%;background:var(--lilac);border-radius:2px;transition:.45s var(--ease);
}
.faq summary i::before{width:14px;height:1.6px;margin:-.8px 0 0 -7px}
.faq summary i::after{width:1.6px;height:14px;margin:-7px 0 0 -.8px}
.faq details[open] summary i::after{transform:rotate(90deg);opacity:0}
.faq details div{padding:0 26px 24px;color:var(--txt-dim);font-size:15px;max-width:70ch}
.faq details div b{color:var(--rose);font-weight:600}

/* ══ FOOTER ══ */
.footer{position:relative;z-index:2;padding:clamp(60px,9vh,100px) var(--pad) 0;border-top:1px solid var(--line);overflow:hidden}
.footer__top{display:grid;grid-template-columns:1.2fr 1.5fr;gap:50px;max-width:1400px;margin:0 auto}
.footer__brand img{width:180px;margin-bottom:20px;opacity:.92}
.footer__brand p{color:var(--txt-mute);font-size:14.5px;max-width:38ch}
.footer__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.footer__cols h4{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--txt);margin-bottom:16px}
.footer__cols a{display:block;color:var(--txt-mute);font-size:14.5px;padding:5px 0;transition:.3s var(--ease)}
.footer__cols a:hover{color:var(--rose);transform:translateX(4px)}
.footer__bar{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  max-width:1400px;margin:56px auto 0;padding:24px 0;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--txt-mute);
}
.footer__wordmark{
  font-family:'Sora';font-weight:800;font-size:clamp(60px,17vw,230px);letter-spacing:-.05em;
  text-align:center;line-height:.8;
  background:linear-gradient(180deg,rgba(202,162,224,.16),transparent 78%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  user-select:none;pointer-events:none;margin-bottom:-.12em;
}

/* ══ RESPONSIVO ══ */
@media(max-width:1080px){
  .hero__grid{grid-template-columns:1fr;text-align:left}
  .hero__art{order:-1;min-height:340px;margin-bottom:10px}
  .hero__logo{width:min(300px,64vw)}
  .bento{grid-template-columns:repeat(2,1fr)}
  .bcard--wide{grid-column:span 2}
  .products{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);gap:34px}
  .footer__top{grid-template-columns:1fr}
}
@media(max-width:720px){
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:block;margin-left:auto}
  /* Alvo de toque: 34px erra o dedo. O mínimo confortável é 44px, e
     ganhar isso com padding (em vez de fonte maior) aumenta a área
     clicável sem mexer no visual. */
  .footer__cols a{padding:11px 0}
  .nav__burger{width:44px;height:44px}
  .nav__burger span{left:11px;right:11px}
  .nav__burger span:nth-child(1){top:18px}
  .nav__burger span:nth-child(2){top:25px}
  .nav__burger.on span:nth-child(1),.nav__burger.on span:nth-child(2){top:21.5px}

  .bento,.products{grid-template-columns:1fr}
  .bcard--wide{grid-column:span 1}
  .steps{grid-template-columns:1fr;gap:28px}
  .footer__cols{grid-template-columns:1fr 1fr}
  .spotlight{display:none}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none;filter:none}
}