/* =====================================================================
   DevClub V2 — "DENTRO DA MENTE"
   Identidade: archive-devin-ai.lusion.co recolorido com a nossa paleta
   (degradê ciano→violeta→magenta da cabeça + lime de ação) e alma dev.
   Superfícies: vidro translúcido com borda em degradê (ref. imagem 4).
   ===================================================================== */

/* ---------- fontes (self-hosted) ---------- */
@font-face{ font-family:'Sora'; src:url('../assets/fonts/sora.woff2') format('woff2');
  font-weight:100 800; font-display:swap; }
@font-face{ font-family:'JetBrains Mono'; src:url('../assets/fonts/jetbrains-mono.woff2') format('woff2');
  font-weight:100 800; font-display:swap; }
@font-face{ font-family:'Inter'; src:url('../assets/fonts/inter.woff2') format('woff2');
  font-weight:100 900; font-display:swap; }
@font-face{ font-family:'Great Vibes'; src:url('../assets/fonts/great-vibes.woff2') format('woff2');
  font-display:swap; }

/* ---------- tokens ---------- */
:root{
  --bg:#04050b;
  --glass:rgba(255,255,255,.035);
  --glass-2:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.09);
  --text:#eef0f8;
  --muted:#9aa3c0;
  --cyan:#35d6e8;
  --blue:#3b57e6;
  --violet:#8b6cff;
  --magenta:#b44fd9;
  --lime:#c6ff3d;
  --display:'Sora', system-ui, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, monospace;
  --grad:linear-gradient(92deg, var(--cyan) 0%, var(--violet) 55%, var(--magenta) 100%);
  --grad-border:linear-gradient(140deg, rgba(53,214,232,.55), rgba(139,108,255,.35) 45%, rgba(180,79,217,.5));
  --radius:22px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:auto; }
body{
  background:
    radial-gradient(1200px 560px at 85% -12%, rgba(139,108,255,.16), transparent 62%),
    radial-gradient(900px 500px at 4% 26%, rgba(53,214,232,.10), transparent 55%),
    radial-gradient(1100px 640px at 62% 108%, rgba(180,79,217,.13), transparent 62%),
    var(--bg);
  color:var(--text);
  font-family:'Inter', system-ui, sans-serif;
  overflow-x:hidden;
  line-height:1.6;
}
.mono{ font-family:var(--mono); }
.center{ text-align:center; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--violet); color:#fff; }
img{ max-width:100%; display:block; }

/* ---------- CURSOR: o caret de código (herdado da V1) ----------
   Um SVG embutido, sem arquivo e sem JS. É a escolha certa aqui: cursor
   feito com <div> perseguindo o mouse atrasa em telas cheias, some em
   iframe e some quando o ponteiro sai da janela. Este é o cursor do
   sistema — nunca atrasa.
   O ponto quente fica no MEIO da barra (8 11), não na ponta, porque a
   barra é um caret: o que aponta é o centro dela.
   Reserva `text` de propósito: se o SVG não carregar, o que aparece é um
   caret nativo, a coisa mais próxima do desenho. */
body{
  cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='22' viewBox='0 0 16 22'><rect x='6' y='1' width='4' height='20' fill='%23c6ff3d'/></svg>") 8 11, text;
}
/* no claro o lime some no branco: caret na versão escurecida do acento */
:root[data-theme="light"] body{
  cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='22' viewBox='0 0 16 22'><rect x='6' y='1' width='4' height='20' fill='%2342690e'/></svg>") 8 11, text;
}
/* onde clicar é a ação, o cursor volta a ser o do sistema.
   As regras de grab/grabbing (cérebro, decks, trilhos) já vivem nos
   próprios blocos e ganham desta por especificidade. */
a, button, summary, label, [role="button"], .btn, .card-go,
input[type="checkbox"], input[type="radio"], select{ cursor:pointer; }
input[type="text"], input[type="email"], textarea{ cursor:text; }

/* ---------- BARRA DE ROLAGEM ----------
   A V1 não tinha uma; esta segue a identidade da página: trilho quase
   invisível e polegar no degradê da marca.
   Firefox só aceita as duas propriedades padrão (largura e cor sólida),
   então ele fica com o violeta do meio do degradê — mesma família. */
:root{ scrollbar-width:thin; scrollbar-color:var(--violet) transparent; }
::-webkit-scrollbar{ width:11px; height:11px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background:var(--grad);
  border-radius:99px;
  /* a borda transparente afina o polegar sem estreitar a área de clique:
     ela some no fundo e o desenho encolhe pra dentro */
  border:3px solid transparent;
  background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{ border-width:2px; }
::-webkit-scrollbar-corner{ background:transparent; }

.grad{
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* vidro com borda em degradê (assinatura visual do site — ref. imagem 4) */
.glass{
  position:relative;
  background:var(--glass);
  border-radius:var(--radius);
  backdrop-filter:blur(6px);
}
.glass::before{
  content:""; position:absolute; inset:0;
  border-radius:inherit; padding:1px;
  background:var(--grad-border);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}

#mindField{ position:fixed; inset:0; z-index:-1; pointer-events:none; }

/* ---------- NAV pílula ---------- */
.nav{
  position:fixed; top:14px; left:0; right:0; z-index:60;
  display:flex; justify-content:center; padding:0 16px;
}
.nav-pill{
  display:flex; align-items:center; gap:clamp(16px, 3vw, 40px);
  background:rgba(8,10,20,.72);
  border:1px solid var(--line);
  border-radius:999px;
  padding:10px 12px 10px 22px;
  backdrop-filter:blur(14px);
  box-shadow:0 10px 40px -18px rgba(0,0,0,.8);
}
.brand{ font-weight:700; font-size:1rem; letter-spacing:-.02em; }
.brand-prompt{ color:var(--lime); }
.brand-caret{ color:var(--lime); animation:blink 1.1s steps(1) infinite; }
.nav-links{ display:flex; gap:clamp(12px, 2vw, 26px); font-size:.8rem; }
.nav-links a{ color:var(--muted); transition:color .2s; position:relative; }
.nav-links a:hover{ color:var(--text); }
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-5px; height:2px; width:0;
  background:var(--grad); transition:width .25s;
}
.nav-links a:hover::after{ width:100%; }
.nav-cta{
  font-size:.8rem; font-weight:700; color:#0a1204;
  background:var(--lime); border-radius:999px; padding:9px 18px;
}
@media (max-width:820px){ .nav-links{ display:none; } }
/* abaixo de 900px o hero volta a ser centrado e a cabeça sai de cena:
   metade da largura não daria presença a ela, e um segundo contexto WebGL
   pesa justamente nos aparelhos mais fracos */
@media (max-width:900px){
  .hero-inner{ grid-template-columns:1fr; text-align:center; }
  .hero-sub{ margin-inline:auto; }
  .hero-cta{ justify-content:center; }
  .hero-cerebro{ display:none; }
  .hero-texto{ max-width:none; }
}

/* ---------- HERO ---------- */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  padding:0 clamp(20px, 5vw, 60px); overflow:hidden;
}
.hero-inner{
  /* mais largo que o hero centralizado antigo: em duas colunas, 1180px
     deixava sobra nas laterais e espremia o texto */
  max-width:min(1680px, 100%); width:100%; position:relative; z-index:2;
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.12fr);
  gap:clamp(16px, 3vw, 44px); align-items:center;
  text-align:left;
}
.hero-texto{ min-width:0; }
/* palco da cabeça: encostado na direita, ocupando o espaço que sobrava */
/* A camada de partículas ocupa o HERO INTEIRO, não a coluna da direita.
   São as partículas que saem da intro: elas precisam da largura toda pra
   explosão atravessar a tela, e é o que deixa a teia de sinapses correr
   de ponta a ponta. O cérebro em si é deslocado pra direita pelo JS, que
   sabe a largura visível em unidades de mundo. */
.hero-cerebro{
  position:absolute; inset:0;
  z-index:1;
  cursor:grab;
  /* O canvas termina onde a seção termina, e no desmonte as partículas
     caem MUITO além disso — medido, elas chegam a 208% da altura do hero.
     O corte do canvas virava uma linha reta atravessando a página.
     A máscara dissolve a borda: começa em 76%, abaixo dos 77% que o
     cérebro inteiro ocupa, então ela some as partículas que caem sem
     encostar no cérebro em repouso. */
  -webkit-mask-image:linear-gradient(to bottom,
    rgba(0,0,0,1) 76%, rgba(0,0,0,.55) 89%, rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to bottom,
    rgba(0,0,0,1) 76%, rgba(0,0,0,.55) 89%, rgba(0,0,0,0) 100%);
}
.hero-cerebro:active{ cursor:grabbing; }
.hero-cerebro canvas{
  position:absolute; inset:0; width:100% !important; height:100% !important;
  display:block;
}
/* O texto fica por cima, mas só ELE captura o mouse: assim o arrasto e o
   clique do cérebro funcionam em todo o resto do hero, em vez de esbarrar
   numa caixa invisível de largura total. */
.hero-inner{ pointer-events:none; }
.hero-texto{ pointer-events:auto; }
.eyebrow{ color:var(--lime); font-size:.85rem; letter-spacing:.02em; }
.hero .eyebrow{ margin-bottom:24px; }
.hero-title{
  font-family:var(--display); font-weight:800;
  font-size:clamp(2.8rem, 9vw, 7.6rem);
  line-height:.98; letter-spacing:-.035em;
}
.hero-sub{
  margin:32px 0 0; max-width:56ch;
  color:var(--muted); font-size:clamp(1rem, 1.6vw, 1.2rem);
}
.hero-sub b{ color:var(--cyan); font-weight:600; }
.hero-sub .mono{ color:var(--cyan); font-size:.92em; }
.hero-cta{ margin-top:42px; display:flex; gap:16px; flex-wrap:wrap; }

/* Em duas colunas o título precisa da própria escala: o tamanho de tela
   cheia (até 7.6rem) quebrava "Ideias viram código." em seis linhas.
   Este bloco vem DEPOIS das regras base de propósito — media query não
   soma especificidade, quem vence é quem aparece por último. */
@media (min-width:901px){
  .hero-title{ font-size:clamp(2.6rem, 3.55vw, 4.3rem); line-height:1.04; }
  .hero .eyebrow{ margin-bottom:18px; }
  .hero-sub{ margin-top:26px; font-size:clamp(.95rem, 1.1vw, 1.06rem); }
  .hero-cta{ margin-top:32px; }
}

.js .hero-el{ opacity:0; transform:translateY(34px); }
.hero-el.in{
  opacity:1; transform:none;
  transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
}
.scroll-hint{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  color:var(--muted); font-size:.75rem;
  animation:hint 2.2s ease-in-out infinite;
}
@keyframes hint{ 50%{ transform:translate(-50%, 8px); opacity:.4; } }

/* ---------- BOTÕES ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-weight:700; font-size:.95rem;
  background:var(--lime); color:#0a1204;
  padding:16px 30px; border-radius:999px;
  transition:box-shadow .25s;
}
.btn:hover{ box-shadow:0 0 46px rgba(198,255,61,.35); }
.btn .arrow{ transition:transform .2s; }
.btn:hover .arrow{ transform:translateX(4px); }
.btn-ghost{ background:transparent; color:var(--text); border:1px solid var(--line); }
.btn-ghost:hover{ border-color:var(--violet); color:var(--violet); box-shadow:0 0 34px rgba(139,108,255,.25); }
.btn-big{ padding:20px 42px; font-size:1.05rem; }

/* ---------- SEÇÕES ---------- */
.section{
  max-width:1240px; margin:0 auto;
  padding:clamp(100px, 12vw, 180px) clamp(20px, 5vw, 60px);
}
.section h2{
  font-family:var(--display); font-weight:800;
  font-size:clamp(2.3rem, 5.4vw, 4.4rem);
  line-height:1.04; letter-spacing:-.028em;
  margin:14px 0 18px; max-width:940px;
}
.section-sub{
  color:var(--muted); max-width:620px;
  font-size:clamp(.98rem, 1.4vw, 1.1rem);
  margin-bottom:clamp(40px, 5vw, 60px);
}
.js .reveal{ opacity:0; transform:translateY(36px); }
.reveal.in{
  opacity:1; transform:none;
  transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}

/* ---------- STATS ---------- */
.stats{
  max-width:1240px; margin:0 auto;
  padding:0 clamp(20px, 5vw, 60px);
  display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:18px;
}
.stat{
  position:relative; background:var(--glass); border-radius:18px; padding:26px 24px;
}
.stat::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:var(--grad-border);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.stat-n{ display:block; font-size:clamp(2rem, 3.6vw, 3rem); font-weight:800; }
.stat-l{ color:var(--muted); font-size:.85rem; }

/* ---------- PLATAFORMA: janela dev ---------- */
.devwin{
  position:relative; background:rgba(8,10,20,.8);
  border-radius:var(--radius); overflow:hidden;
  box-shadow:0 50px 120px -40px rgba(0,0,0,.9), 0 0 90px -30px rgba(139,108,255,.35);
}
.devwin::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:var(--grad-border);
  -webkit-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:5;
}
.devwin-chrome{
  display:flex; align-items:center; gap:18px;
  padding:14px 18px; border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.03);
}
.dots{ display:flex; gap:7px; }
.dots i{ width:11px; height:11px; border-radius:50%; background:#3a3f55; }
.dots i:nth-child(1){ background:#ff5f57; } .dots i:nth-child(2){ background:#febc2e; } .dots i:nth-child(3){ background:#28c840; }
.devwin-tabs{ display:flex; gap:6px; flex:1; }
.devtab{
  background:transparent; border:1px solid transparent; color:var(--muted);
  font-family:var(--mono); font-size:.78rem; padding:7px 14px; border-radius:9px;
  cursor:pointer; transition:color .2s, background .2s, border-color .2s;
}
.devtab:hover{ color:var(--text); }
.devtab.is-on{ color:var(--lime); background:rgba(198,255,61,.08); border-color:rgba(198,255,61,.25); }
.devwin-user{ color:var(--muted); font-size:.72rem; }
.devwin-body{ position:relative; min-height:380px; }
.devpane{ display:none; padding:26px 28px; min-height:380px; }
.devpane.is-on{ display:flex; }
.devpane[data-pane="editor"]{ gap:20px; }
.gutter{ color:rgba(154,163,192,.4); font-size:.85rem; line-height:1.8; text-align:right; user-select:none; }
.code{ font-size:.85rem; line-height:1.8; white-space:pre-wrap; color:var(--text); }
.code .kw{ color:var(--violet); } .code .fn{ color:var(--cyan); }
.code .str{ color:var(--lime); } .code .cm{ color:var(--muted); opacity:.7; }
.code .cursor{ display:inline-block; width:8px; height:1.1em; background:var(--lime);
  vertical-align:text-bottom; animation:blink 1s steps(1) infinite; }
.term{ font-size:.85rem; line-height:1.9; color:var(--lime); white-space:pre-wrap; width:100%; }
.term .dim{ color:var(--muted); }
.devwin-foot{
  display:flex; justify-content:space-between; gap:12px;
  padding:12px 20px; border-top:1px solid var(--line);
  font-size:.72rem; color:var(--muted);
}
.ok{ color:var(--lime); font-style:normal; }
.dim{ opacity:.75; }

/* mini browser (aba preview) */
.mini-browser{ width:100%; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.mini-url{
  padding:10px 16px; font-size:.72rem; color:var(--muted);
  background:rgba(255,255,255,.03); border-bottom:1px solid var(--line);
}
.mini-page{ padding:34px; background:linear-gradient(180deg, rgba(59,87,230,.10), transparent 70%); }
.mini-hero{ display:flex; flex-direction:column; gap:14px; max-width:420px; }
.mini-badge{ color:var(--lime); font-size:.7rem; }
.mini-hero strong{ font-family:var(--display); font-size:1.7rem; letter-spacing:-.02em; }
.mini-line{ height:9px; border-radius:5px; background:var(--glass-2); width:85%; }
.mini-line.w60{ width:55%; }
.mini-btn{
  margin-top:8px; align-self:flex-start;
  background:var(--lime); color:#0a1204; font-weight:700; font-size:.78rem;
  padding:9px 18px; border-radius:999px;
}

/* ---------- PLATAFORMA: as telas de verdade ----------
   Calma proposital: a página já tem movimento demais aqui em volta, e uma
   captura de interface só serve se der pra ler. Elas ficam paradas, inteiras,
   e o hover aproxima pra quem quiser espiar. */
.plat{ margin-top:clamp(30px, 4vw, 52px); }
.plat-titulo{
  font-size:.72rem; color:var(--muted);
  margin-bottom:clamp(14px, 2vw, 22px);
}
.plat-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(16px, 2.2vw, 28px);
}
.plat-item{
  margin:0; position:relative; z-index:1;
  /* transform não mexe no fluxo: a caixa cresce sem empurrar a grade */
  transition:transform .45s cubic-bezier(.2, .8, .25, 1), opacity .45s ease;
}
/* a caixa toda cresce e passa por cima do vizinho */
.plat-item:hover{ transform:scale(1.15); z-index:5; }
/* e o vizinho recua, pra atenção ficar em uma tela só */
.plat-grid:hover .plat-item:not(:hover){ transform:scale(.965); opacity:.45; }

.plat-frame{
  position:relative;
  background:linear-gradient(160deg, rgba(22,27,48,.9), rgba(9,12,24,.95));
  border-radius:14px; padding:0 0 1px;
  overflow:hidden;
  box-shadow:0 34px 80px -34px rgba(0,0,0,.9);
  transition:box-shadow .45s ease;
}
.plat-frame::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:var(--grad-border);
  -webkit-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:3;
}
.plat-item:hover .plat-frame{
  box-shadow:0 54px 120px -30px rgba(0,0,0,.98), 0 0 100px -30px rgba(139,108,255,.6);
}

.plat-chrome{
  display:flex; align-items:center; gap:12px;
  padding:9px 14px;
  background:rgba(255,255,255,.04);
  border-bottom:1px solid var(--line);
}
.plat-url{
  flex:1; min-width:0;
  font-size:.6rem; color:var(--muted);
  background:rgba(4,5,11,.5); border-radius:999px;
  padding:5px 12px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.plat-view{ overflow:hidden; background:#0b0e18; }
.plat-view img{ width:100%; height:auto; display:block; }

.plat-item figcaption{ padding:16px 4px 0; }
.plat-item figcaption b{
  display:block; font-family:var(--display); font-size:1rem; margin-bottom:5px;
}
.plat-item figcaption p{ color:var(--muted); font-size:.85rem; }
.plat-item figcaption b{ transition:color .45s ease; }
.plat-item:hover figcaption b{ color:var(--cyan); }
.plat .co-nota{ margin-top:clamp(16px, 2vw, 24px); }

@media (max-width:820px){
  .plat-grid{ grid-template-columns:1fr; }
  /* em coluna única não há vizinho pra sobrepor, e crescer só empurraria
     a caixa pra fora da tela */
  .plat-item:hover{ transform:none; }
  .plat-grid:hover .plat-item:not(:hover){ transform:none; opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .plat-item, .plat-frame{ transition:none; }
  .plat-item:hover{ transform:none; }
  .plat-grid:hover .plat-item:not(:hover){ transform:none; opacity:1; }
}

/* ---------- MENTORIAS: sala de reunião (layout do Jeff + nossa pele) ---------- */
.meet-room{
  position:relative;
  background:var(--glass);
  border-radius:var(--radius);
  padding:clamp(16px, 2.4vw, 26px);
  max-width:1040px;
  backdrop-filter:blur(8px);
  box-shadow:0 50px 120px -40px rgba(0,0,0,.9), 0 0 90px -35px rgba(53,214,232,.35);
}
.meet-room::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:var(--grad-border);
  -webkit-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:6;
}
.meet-header{ margin-bottom:16px; }
.meet-header h3{
  display:flex; align-items:center; gap:10px;
  font-size:.95rem; font-weight:700; color:var(--text);
}
.meet-header p{ font-size:.72rem; color:var(--muted); margin-top:4px; }
.live-dot{
  width:9px; height:9px; border-radius:50%; background:#ff5f57; flex:0 0 auto;
  animation:blink 1.4s steps(1) infinite;
}

.meet-grid{
  display:grid; grid-template-columns:3fr 1fr; gap:14px;
}
.vbox{
  position:relative; background:#0a0d18;
  border-radius:14px; overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.vbox img,
.vbox video{ width:100%; height:100%; object-fit:cover; display:block; }

.meet-main{ height:clamp(340px, 44vw, 480px); }
/* as miniaturas seguem paradas, então ganham o zoom lento que dá vida;
   o quadro principal agora é vídeo de verdade e não precisa de truque */
.meet-thumb img{ animation:meetzoom 14s ease-in-out infinite alternate; }
@keyframes meetzoom{ to{ transform:scale(1.06) translateY(-1.5%); } }
/* enquanto o vídeo não chega, o poster ocupa o quadro sem borrar */
.meet-video{ background:#0a0d18; }
/* a miniatura é bem mais larga que alta: o recorte come de 183px (Juliana,
   Diego) a 407px (Ana, que é quadrada) na vertical. Alinhar no topo devolve
   espaço acima da cabeça nos três e sacrifica só o busto, que ninguém
   procura numa miniatura de chamada. */
.meet-thumb video{ object-position:50% 0; }

.meet-side{
  display:flex; flex-direction:column; gap:12px;
  height:clamp(340px, 44vw, 480px);
}
.meet-thumb{ flex:1; min-height:0; margin:0; }
.meet-thumb.is-speaking{ outline:2px solid var(--lime); outline-offset:-2px; }

/* etiqueta de nome no topo do vídeo (como no layout do Jeff) */
.vtag{
  position:absolute; top:10px; left:10px; z-index:4;
  display:flex; align-items:center; gap:7px;
  background:rgba(4,5,11,.55); color:var(--text);
  padding:5px 11px; border-radius:7px; font-size:.68rem;
  backdrop-filter:blur(6px);
}
.mic{
  width:13px; height:13px; border-radius:50%; display:inline-block;
  background:radial-gradient(circle at center, var(--lime) 30%, transparent 32%),
             radial-gradient(circle at center, rgba(198,255,61,.35) 65%, transparent 67%);
}
.mic.on{ animation:speak .9s ease-in-out infinite alternate; }
@keyframes speak{ from{ transform:scale(.8); opacity:.7; } to{ transform:scale(1.25); opacity:1; } }

.meet-caption{
  position:absolute; left:50%; bottom:74px; transform:translateX(-50%);
  z-index:4; width:min(88%, 560px); text-align:center;
  background:rgba(4,5,11,.6); backdrop-filter:blur(8px);
  border-radius:10px; padding:9px 16px; font-size:.74rem; color:var(--text);
  transition:opacity .4s;
}
.meet-bar{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  z-index:4; display:flex; gap:12px;
  background:rgba(255,255,255,.08);
  padding:9px 18px; border-radius:999px;
  backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.18);
}
.mbtn{
  width:40px; height:40px; border-radius:50%;
  border:none; background:rgba(4,5,11,.6);
  color:var(--text); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s, transform .2s;
}
.mbtn svg{ width:18px; height:18px; }
.mbtn:hover{ background:rgba(255,255,255,.14); transform:translateY(-2px); }
.mbtn.hang{ background:#e5484d; }
.mbtn.hang:hover{ background:#ff5f57; }

/* ---------- BOTÕES VIVOS DA SALA ---------- */

/* aviso de status no cabeçalho (microfone, câmera, pausa) */
.meet-aviso{
  margin-top:7px; display:inline-flex; align-items:center; gap:7px;
  font-size:.68rem; color:var(--lime-txt);
  background:color-mix(in srgb, var(--lime) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--lime) 30%, transparent);
  padding:4px 10px; border-radius:999px;
}
.meet-aviso[hidden]{ display:none; }

/* botão "desligado": risco atravessando o ícone, como em chamada de verdade */
.mbtn{ position:relative; }
.mbtn.is-off{ background:#e5484d; color:#fff; }
.mbtn.is-off:hover{ background:#ff5f57; }
.mbtn.is-off::after{
  content:""; position:absolute; left:50%; top:50%;
  width:26px; height:2px; border-radius:2px; background:currentColor;
  transform:translate(-50%,-50%) rotate(-45deg);
  box-shadow:0 -2px 0 rgba(4,5,11,.55);
}

/* sala pausada: nada de "ao vivo" piscando enquanto está tudo parado */
.meet-room.is-pausada .live-dot,
.meet-room.is-pausada .mic.on{ animation:none; }
.meet-room.is-pausada .live-dot{ background:var(--muted); }
.meet-room.is-pausada .meet-caption{ opacity:.45; }

/* ampliado: quem apresenta ocupa a sala e os outros viram selo no canto.
   Os dois filhos passam a dividir a mesma célula da grade — assim a coluna
   lateral flutua sobre o vídeo sem depender de medida fixa do cabeçalho. */
.meet-room.is-ampliado .meet-grid{ grid-template-columns:1fr; }
.meet-room.is-ampliado .meet-main,
.meet-room.is-ampliado .meet-side{ grid-area:1 / 1; }
.meet-room.is-ampliado .meet-main{ height:clamp(380px, 54vw, 640px); }
.meet-room.is-ampliado .meet-side{
  flex-direction:row; height:auto; width:auto;
  align-self:start; justify-self:end;
  margin:12px; gap:8px; z-index:5;
}
.meet-room.is-ampliado .meet-thumb{
  width:clamp(84px, 9vw, 116px); height:clamp(54px, 5.6vw, 72px);
  flex:0 0 auto; min-height:0;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.9);
}
.meet-room.is-ampliado .meet-thumb .vtag{ font-size:.56rem; padding:3px 7px; top:6px; left:6px; }
.meet-main, .meet-side, .meet-thumb{ transition:height .35s ease, width .35s ease; }

/* fora da chamada */
.meet-room.is-fora .meet-grid{ filter:blur(7px) saturate(.35); opacity:.35; pointer-events:none; }
.meet-fim{
  position:absolute; inset:0; z-index:7;
  display:flex; align-items:center; justify-content:center;
  border-radius:inherit; padding:20px;
  background:radial-gradient(circle at center, rgba(4,5,11,.72), rgba(4,5,11,.93));
  backdrop-filter:blur(3px);
}
.meet-fim[hidden]{ display:none; }
.meet-fim-cartao{ text-align:center; max-width:340px; }
.meet-fim-tag{
  color:#ff8b87; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  margin-bottom:10px;
}
.meet-fim-cartao b{
  display:block; font-family:var(--display); font-weight:800;
  font-size:1.35rem; color:var(--text); margin-bottom:8px;
}
.meet-fim-cartao p:not(.meet-fim-tag){ font-size:.82rem; color:var(--muted); margin-bottom:18px; }
.mbtn-voltar{
  border:none; cursor:pointer;
  background:var(--lime); color:#0a1204;
  font-family:var(--mono); font-weight:700; font-size:.82rem;
  padding:12px 24px; border-radius:999px;
  transition:box-shadow .25s, transform .2s;
}
.mbtn-voltar:hover{ box-shadow:0 0 42px rgba(198,255,61,.4); transform:translateY(-2px); }

@media (max-width:768px){
  .meet-grid{ grid-template-columns:1fr; }
  .meet-side{ flex-direction:row; height:auto; overflow-x:auto; }
  .meet-thumb{ min-width:140px; height:100px; flex:1 0 auto; }
  .meet-main{ height:300px; }
  .meet-caption{ display:none; }
}

.meet-perks{
  margin-top:26px;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:16px;
  max-width:980px;
}
.perk{
  position:relative; background:var(--glass); border-radius:18px; padding:22px;
}
.perk::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:var(--grad-border);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.perk-ic{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:12px;
  background:rgba(53,214,232,.1); color:var(--cyan);
  font-weight:700; margin-bottom:12px;
}
.perk b{ display:block; margin-bottom:6px; font-size:.95rem; }
.perk p{ color:var(--muted); font-size:.85rem; }

/* ---------- HISTÓRIA (scroll com imagens à esquerda) ---------- */
.story{
  /* a imagem manda: é ela que conta a passagem do tempo */
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(24px, 4vw, 58px);
  align-items:start;
}
@media (max-width:860px){ .story{ grid-template-columns:1fr; gap:clamp(28px, 5vw, 70px); } }
.story-media{ position:sticky; top:90px; }
@media (max-width:860px){ .story-media{ position:relative; top:0; } }
.story-frame{
  position:relative; border-radius:var(--radius); overflow:hidden;
  aspect-ratio:4/3.5;
  box-shadow:0 50px 110px -40px rgba(0,0,0,.9), 0 0 80px -30px rgba(180,79,217,.35);
}
.story-frame::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:var(--grad-border);
  -webkit-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:4;
}
.story-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.06);
  transition:opacity .7s ease, transform 1.2s ease;
}
.story-img.is-on{ opacity:1; transform:scale(1); }
.story-year{
  position:absolute; right:20px; bottom:14px; z-index:5;
  font-size:clamp(2.1rem, 4.4vw, 3.4rem); font-weight:800; color:#fff;
  text-shadow:0 4px 30px rgba(0,0,0,.8);
}
.story-steps{ display:flex; flex-direction:column; }
.story-step{
  min-height:62vh; display:flex; flex-direction:column; justify-content:center;
  border-left:2px solid var(--line); padding-left:clamp(20px, 3vw, 40px);
  opacity:.3; transition:opacity .5s, border-color .5s;
}
@media (max-width:860px){ .story-step{ min-height:auto; padding:34px 0 34px clamp(20px, 3vw, 40px); } }
.story-step.is-on{ opacity:1; border-image:var(--grad) 1; border-left-width:2px; }
.story-tag{ color:var(--lime); font-size:.78rem; margin-bottom:12px; }
.story-step h3{
  font-family:var(--display); font-size:clamp(1.4rem, 2.4vw, 2rem);
  letter-spacing:-.02em; margin-bottom:14px; line-height:1.15;
}
.story-step p{ color:var(--muted); max-width:480px; font-size:.98rem; }

/* ---------- CARDS (formações / depoimentos / tutores) ---------- */
.cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:18px; }
.cards-3{ grid-template-columns:repeat(auto-fit, minmax(290px, 1fr)); }
.cards-5{ grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); }
.card{
  position:relative; background:var(--glass); border-radius:var(--radius);
  padding:30px 26px;
  transition:box-shadow .3s, background .3s;
  transform-style:preserve-3d; will-change:transform;
}
.card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:var(--grad-border);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.card:hover{ background:var(--glass-2); box-shadow:0 28px 70px -28px rgba(139,108,255,.4); }
.card-icon{
  width:96px; height:96px; object-fit:contain; margin-bottom:16px;
  filter:drop-shadow(0 12px 26px rgba(0,0,0,.5));
  transition:transform .35s cubic-bezier(.2,.9,.3,1.4);
}
.card:hover .card-icon{ transform:translateY(-6px) scale(1.07) rotate(-3deg); }
.card h3{ font-family:var(--display); font-size:1.35rem; margin-bottom:10px; }
.card p{ color:var(--muted); font-size:.92rem; }
.card ul{ list-style:none; margin-top:16px; }
.card li{ font-size:.78rem; color:var(--text); padding:3px 0; opacity:.85; }
.card-go{ display:inline-block; margin-top:18px; color:var(--lime); font-size:.85rem; }

/* ---------- FORMAÇÕES: deck de painéis pareados (ref. Devin) ---------- */
.fdeck{ position:relative; }
.fstage{
  position:relative; height:clamp(500px, 58vw, 610px);
  perspective:2000px;
}
.fpair{
  position:absolute; left:50%; top:0;
  width:min(880px, 94%);
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
  transform-style:preserve-3d; will-change:transform, opacity;
  transition:opacity .55s ease, filter .55s ease;
}
.fpanel{
  position:relative; overflow:hidden;
  background:rgba(9,12,22,.9);
  border-radius:16px;
  height:clamp(490px, 56vw, 595px);
  display:flex; flex-direction:column;
  box-shadow:0 30px 70px -28px rgba(0,0,0,.85);
}
.fpanel::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:var(--grad-border);
  -webkit-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:4;
}
.fpair:not(.is-on){ filter:saturate(.5) brightness(.62); cursor:pointer; }
.fpair:not(.is-on):hover{ filter:saturate(.8) brightness(.85); }
/* só o par inteiro recebe o clique quando está de lado —
   assim ninguém aperta o botão do scanner sem querer */
.fpair:not(.is-on) .fpanel *{ pointer-events:none; }
.fpair.is-on .fpanel{
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9), 0 0 80px -26px rgba(139,108,255,.45);
}
.fp-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 18px; font-size:.78rem; color:var(--muted);
  border-bottom:1px solid var(--line); background:rgba(255,255,255,.03);
}
.fp-head b{ color:var(--text); font-weight:600; }
.fp-tabs{ display:flex; gap:5px; }
.fp-tabs i{
  font-style:normal; font-size:.68rem; padding:4px 10px; border-radius:6px;
  background:rgba(255,255,255,.05); color:var(--muted);
}
.fp-tabs i.on{ background:rgba(198,255,61,.12); color:var(--lime); }
.fp-live{
  font-size:.58rem; color:#04050b; background:var(--lime);
  padding:3px 9px; border-radius:999px; font-weight:700;
}
.fp-body{ padding:20px 18px; overflow:auto; }
.fchat{ margin-bottom:13px; }
.fwho{
  display:inline-block; font-size:.64rem; color:var(--cyan);
  background:rgba(53,214,232,.1); padding:2px 8px; border-radius:5px; margin-bottom:6px;
}
.fchat-t .fwho{ color:var(--lime); background:rgba(198,255,61,.1); }
.fchat p{ font-size:.92rem; color:var(--text); line-height:1.6; }
.fchat p b{ color:var(--lime); }
.fp-list{ list-style:none; margin-top:16px; border-top:1px solid var(--line); padding-top:14px; }
.fp-list li{ font-size:.76rem; color:var(--muted); padding:4px 0; }
.fp-list li::before{ content:"› "; color:var(--violet); }
.fp-term, .fp-code{
  padding:18px 18px; font-size:.78rem; line-height:1.8;
  white-space:pre-wrap; overflow:auto; flex:1;
}
.fp-term{ color:var(--lime); }
.fp-term .d{ color:var(--muted); }
.fp-term .l{ color:var(--cyan); }
.fp-term .q{ color:#fff; font-size:1.1rem; }
.fp-code{ color:var(--text); }
.fp-code .k{ color:var(--violet); } .fp-code .f{ color:var(--cyan); }
.fp-code .s{ color:var(--lime); } .fp-code .t{ color:var(--magenta); }
.fp-code .a{ color:var(--cyan); } .fp-code .cm{ color:var(--muted); }

/* scanner interativo */
.fwork-scan .fp-term{ flex:initial; }
.scan{ display:flex; flex-direction:column; height:100%; }
#scanOut{ flex:1; }
.scan-btn{
  margin:0 18px 10px; padding:15px 20px;
  background:var(--lime); color:#0a1204; border:none; border-radius:10px;
  font-weight:700; font-size:.86rem; cursor:pointer;
  transition:box-shadow .25s, transform .2s;
}
.scan-btn:hover{ box-shadow:0 0 34px rgba(198,255,61,.45); transform:translateY(-1px); }
.scan-btn:disabled{ opacity:.55; cursor:default; transform:none; box-shadow:none; }
.scan-priv{ padding:0 18px 16px; font-size:.62rem; color:var(--muted); }
.scan-row{ display:flex; gap:8px; }
.scan-k{ color:var(--muted); min-width:126px; }
.scan-v{ color:#fff; }
.scan-v.warn{ color:#ffb347; }
.scan-v.safe{ color:var(--lime); }

.fdeck-nav{
  display:flex; align-items:center; justify-content:center; gap:clamp(14px, 3vw, 34px);
  margin-top:30px;
}
.farrow{
  width:44px; height:44px; border-radius:50%;
  background:var(--glass); border:1px solid var(--line); color:var(--text);
  font-size:1rem; cursor:pointer; transition:border-color .25s, background .25s, transform .2s;
}
.farrow:hover{ border-color:var(--violet); background:var(--glass-2); transform:translateY(-2px); }
.fdeck-head{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin-bottom:clamp(22px, 3.2vw, 36px);
}
.fname{
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.8rem, 4.2vw, 3.2rem); letter-spacing:-.03em;
  line-height:1.3; padding:.06em .06em .18em; text-align:center;
  display:inline-block; overflow:visible;
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  transition:opacity .25s;
}
.fname.is-swap{ opacity:0; }
.fdeck-label{ display:flex; align-items:center; min-width:150px; justify-content:center; }
.fdots{ display:flex; gap:9px; }
.fdot{
  width:9px; height:9px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,.18); transition:background .25s, transform .25s;
}
.fdot.is-on{ background:var(--lime); transform:scale(1.3); }

@media (max-width:720px){
  .fpair{ grid-template-columns:1fr; width:min(420px, 94%); }
  .fpanel{ height:auto; min-height:230px; }
  .fstage{ height:auto; perspective:none; padding-bottom:10px; }
  .fpair{ position:relative; left:0; margin:0 auto 16px; transform:none !important; opacity:1 !important; }
  .fpair:not(.is-on){ filter:none; }
}

/* ---------- JORNADA: cards pregados no quadro (ref. do usuário) ---------- */
.jboard{
  position:relative;
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(30px, 5vw, 64px) clamp(24px, 5vw, 70px);
  max-width:1000px;
}
.jlines{
  position:absolute; inset:0; width:100%; height:100%;
  overflow:visible; pointer-events:none; z-index:0;
}
.jlines path{
  fill:none; stroke:rgba(255,255,255,.22);
  stroke-width:2; stroke-dasharray:7 9; stroke-linecap:round;
}
.jcard{
  position:relative; z-index:1;
  background:#14161f;
  border:1px solid rgba(255,255,255,.07);
  border-radius:20px;
  padding:34px 14px 14px;
  transform:rotate(var(--tilt));
  box-shadow:0 26px 60px -24px rgba(0,0,0,.9);
  transition:transform .45s cubic-bezier(.2,.9,.3,1.3), box-shadow .45s;
}
/* zigue-zague: ímpares à esquerda, pares à direita e mais baixos.
   nth-of-type conta só os <article> — o <svg> das linhas é irmão deles. */
.jcard:nth-of-type(1){ grid-column:1; }
.jcard:nth-of-type(2){ grid-column:2; margin-top:clamp(26px, 5vw, 60px); }
.jcard:nth-of-type(3){ grid-column:1; }
.jcard:nth-of-type(4){ grid-column:2; margin-top:clamp(26px, 5vw, 60px); }
/* a entrada (.reveal) precisa preservar a inclinação — daí os seletores
   mais específicos que os genéricos de .reveal */
.js .jcard.reveal{ opacity:0; transform:translateY(36px) rotate(var(--tilt)); }
.jcard.reveal.in{ opacity:1; transform:rotate(var(--tilt)); }
.jcard.reveal.in:hover, .jcard:hover{
  transform:rotate(0deg) translateY(-6px) scale(1.02);
  box-shadow:0 38px 80px -26px rgba(0,0,0,.95), 0 0 70px -28px var(--tone);
}
.jpin{
  position:absolute; top:9px; left:50%; transform:translateX(-50%);
  width:22px; height:22px; color:var(--tone);
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.6));
}
.jinner{
  border-radius:14px;
  padding:clamp(18px, 2.2vw, 26px);
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--tone) 16%, transparent), transparent 62%),
    rgba(255,255,255,.03);
  border:1px solid color-mix(in srgb, var(--tone) 26%, transparent);
}
.jnum{
  display:block;
  font-family:var(--display); font-weight:800; font-style:italic;
  font-size:clamp(1.9rem, 3.4vw, 2.7rem); line-height:1;
  color:var(--tone); margin-bottom:12px;
}
.jcard h3{
  font-size:clamp(1.05rem, 1.7vw, 1.3rem); font-weight:700;
  color:var(--text); margin-bottom:10px;
}
.jcard p{ color:var(--muted); font-size:.9rem; line-height:1.6; }

@media (max-width:760px){
  .jboard{ grid-template-columns:1fr; gap:26px; }
  .jcard, .jcard:nth-child(2), .jcard:nth-child(3), .jcard:nth-child(4){
    grid-column:1; margin-top:0; transform:none;
  }
  .jcard:hover{ transform:translateY(-4px); }
  .jlines{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .jcard{ transform:none; }
}

/* ---------- ALUNOS: leque de depoimentos (porte do card-fan-carousel) ---------- */
.fan{ position:relative; }
.fan-layout{
  position:relative;
  height:clamp(23rem, 36.5vw, 32rem);
  display:flex; align-items:center; justify-content:center;
  width:100%; max-width:80rem; margin:0 auto;
}
.fan-card{
  position:absolute; inset:0; margin:auto;
  width:clamp(12.5rem, 19vw, 17.5rem);
  height:clamp(17.5rem, 25.5vw, 24rem);
  display:flex; flex-direction:column; gap:14px;
  padding:clamp(20px, 1.9vw, 30px);
  border-radius:20px;
  background:linear-gradient(160deg, rgba(20,24,40,.96), rgba(10,12,22,.96));
  box-shadow:0 30px 70px -26px rgba(0,0,0,.9);
  cursor:pointer; will-change:transform;
  opacity:0;                      /* o GSAP revela na entrada */
}
.fan-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:var(--grad-border);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}
.fan-card.is-center{
  box-shadow:0 40px 90px -28px rgba(0,0,0,.95), 0 0 80px -26px rgba(139,108,255,.5);
}
.fc-badge{
  align-self:flex-start;
  font-size:.66rem; color:var(--lime);
  background:rgba(198,255,61,.1);
  border:1px solid rgba(198,255,61,.25);
  padding:5px 10px; border-radius:999px;
  line-height:1.35;
}
.fan-card blockquote{
  flex:1; font-size:clamp(.88rem, 1.15vw, 1.05rem);
  line-height:1.62; color:var(--text);
}
.fc-foot{
  display:flex; align-items:center; gap:11px;
  border-top:1px solid var(--line); padding-top:14px;
}
.fc-av{
  width:48px; height:48px; border-radius:50%; flex:0 0 auto;
  object-fit:cover; object-position:center 22%;
  padding:2px;                       /* o degradê aparece como anel */
  background:#0d1020;
}
/* anéis coloridos girando na paleta da página */
.ring-a{ background:linear-gradient(135deg, var(--cyan), var(--blue)); }
.ring-b{ background:linear-gradient(135deg, var(--blue), var(--violet)); }
.ring-c{ background:linear-gradient(135deg, var(--violet), var(--magenta)); }
.ring-d{ background:linear-gradient(135deg, var(--magenta), var(--cyan)); }
.fc-id b{ display:block; font-size:.9rem; line-height:1.3; }
.fc-id em{ font-style:normal; font-size:.72rem; color:var(--muted); }
.av-a{ background:linear-gradient(135deg, var(--cyan), var(--blue)); }
.av-b{ background:linear-gradient(135deg, var(--blue), var(--violet)); }
.av-c{ background:linear-gradient(135deg, var(--violet), var(--magenta)); }
.av-d{ background:linear-gradient(135deg, var(--magenta), var(--cyan)); }

.fan-nav{
  display:flex; align-items:center; justify-content:center; gap:clamp(14px, 2.4vw, 26px);
  margin-top:clamp(8px, 1vw, 14px);
}
.fan-dot{
  width:8px; height:8px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,.18); transition:background .3s, transform .3s;
}
.fan-dot.is-on{ background:var(--lime); transform:scale(1.35); }

/* sem animação: vira uma grade legível */
.fan.is-static .fan-layout{ height:auto; display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); }
.fan.is-static .fan-card{ position:relative; inset:auto; margin:0; width:auto; height:auto; opacity:1; }
.fan.is-static .fan-nav{ display:none; }

/* ---------- PROJETOS: deck 3D arrastável (ref. imagem do usuário) ---------- */
.deck{
  position:relative; height:clamp(480px, 60vw, 620px);
  perspective:1500px;
  touch-action:pan-y; user-select:none; cursor:grab;
}
.deck.is-drag{ cursor:grabbing; }
.proj{
  position:absolute; left:50%; top:50%;
  width:min(680px, 90%);
  transform-style:preserve-3d;
  will-change:transform, opacity;
}
.proj-frame{
  background:#1a2030; border-radius:20px; padding:10px 10px 0;
  transition:background .45s, box-shadow .45s;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85);
}
.proj.is-on .proj-frame{
  background:var(--lime);
  box-shadow:0 50px 120px -32px rgba(0,0,0,.9), 0 0 90px -20px rgba(198,255,61,.45);
}
.proj-view{
  border-radius:12px 12px 0 0; overflow:hidden;
  height:clamp(340px, 44vw, 440px);
  background:#f4f5f9;
}
.proj-page{ pointer-events:none; }
.proj-view img.proj-page{ width:100%; height:auto; display:block; }
.proj.is-on .proj-page{ animation:ppBrowse 16s ease-in-out infinite; }
@keyframes ppBrowse{
  0%, 12%{ transform:translateY(0); }
  48%, 60%{ transform:translateY(calc(-100% + clamp(340px, 44vw, 440px))); }
  92%, 100%{ transform:translateY(0); }
}
.proj-bar{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:13px 16px; font-size:.78rem;
  color:#3d4354; border-radius:0 0 12px 12px;
  transition:color .45s;
}
.proj.is-on .proj-bar{ color:#0a1204; }
.proj-bar b{ font-size:.85rem; }

.deck-nav{
  display:flex; align-items:center; justify-content:center; gap:22px;
  margin-top:26px;
}
.deck-dots{ display:flex; gap:9px; }
.ddot{
  width:9px; height:9px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,.18); transition:background .25s, transform .25s;
}
.ddot.is-on{ background:var(--lime); transform:scale(1.3); }
.deck-hint{ color:var(--muted); font-size:.72rem; }

/* ---------- EMPRESAS: 3 faixas correndo em direções alternadas ---------- */
.empresas{ padding:clamp(60px, 8vw, 100px) 0; overflow:hidden; }
.empresas .eyebrow{ margin-bottom:clamp(24px, 3vw, 38px); }
.co-wall{
  display:flex; flex-direction:column; gap:14px;
  /* as pontas somem no fundo em vez de cortar seco */
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.co-row{ display:flex; overflow:hidden; }
.co-track{
  display:flex; gap:14px; width:max-content;
  animation:coScroll var(--dur, 60s) linear infinite;
}
.co-row.rev .co-track{ animation-direction:reverse; }
/* a faixa do meio nasce deslocada, pra não alinhar com as de cima e de baixo */
.co-row.rev{ margin-left:-90px; }
@keyframes coScroll{ to{ transform:translateX(-50%); } }
.co-row:hover .co-track{ animation-play-state:paused; }

.co{
  display:flex; align-items:center; gap:12px;
  padding:11px 20px 11px 12px;
  background:rgba(255,255,255,.035);
  border:1px solid var(--line);
  border-radius:14px;
  white-space:nowrap;
  transition:border-color .25s, background .25s, transform .25s;
}
.co:hover{
  background:rgba(255,255,255,.07);
  border-color:rgba(139,108,255,.5);
  transform:translateY(-2px);
}
.co-logo{
  position:relative; flex:0 0 auto;
  width:40px; height:40px; border-radius:11px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
}
/* o SVG entra como máscara: assim a logo assume a cor da marca */
.co-logo::before{
  content:""; position:absolute; inset:0;
  background:var(--c);
  -webkit-mask:var(--u) center / 56% no-repeat;
  mask:var(--u) center / 56% no-repeat;
}
.co:hover .co-logo{ border-color:color-mix(in srgb, var(--c) 45%, transparent); }
.co-nota{
  margin-top:clamp(20px, 2.6vw, 32px);
  font-size:.62rem; color:var(--muted); opacity:.65;
}
.co-txt{ display:flex; flex-direction:column; line-height:1.25; }
.co-txt b{ font-size:.92rem; font-weight:600; }
.co-txt em{ font-style:normal; font-size:.68rem; color:var(--muted); }

@media (max-width:600px){
  .co{ padding:9px 16px 9px 10px; gap:10px; }
  .co-logo{ width:32px; height:32px; font-size:.82rem; }
  .co-txt b{ font-size:.82rem; }
  .co-txt em{ font-size:.62rem; }
}
/* sem animação: vira uma grade estática legível */
@media (prefers-reduced-motion: reduce){
  .co-track{ animation:none; flex-wrap:wrap; justify-content:center; width:auto; }
  .co-row{ overflow:visible; }
  .co-row.rev{ margin-left:0; }
  .co-track > .co:nth-child(n+13){ display:none; }   /* esconde a cópia do laço */
}

/* ---------- TUTORES: trilho arrastável, card aberto revela a bio ---------- */
.tut-wrap{ position:relative; }
.tut-rail{
  display:flex; gap:clamp(18px, 2vw, 26px);
  overflow-x:auto; overflow-y:hidden;
  /* folga lateral: nenhum card fica embaixo das setas nem colado na borda */
  padding:6px 52px 14px;
  scroll-padding-inline:52px;
  /* degradê curto (40px) só nas bordas: some o corte seco dos cards que
     estão saindo, mas nunca alcança um card inteiro — o primeiro começa
     aos 52px e o card aberto é mantido a 58px pelo JS */
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 40px,
                     #000 calc(100% - 40px), transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 40px,
             #000 calc(100% - 40px), transparent 100%);
  scroll-snap-type:x proximity;
  cursor:grab; user-select:none;
  scrollbar-width:none;
}
.tut-rail::-webkit-scrollbar{ display:none; }
.tut-rail.is-drag{ cursor:grabbing; scroll-snap-type:none; }
.tut-rail.is-drag .tut-card{ pointer-events:none; }

.tut-card{
  position:relative; flex:0 0 auto;
  width:clamp(215px, 22vw, 278px);
  height:clamp(300px, 33vw, 400px);
  border-radius:20px; overflow:hidden;
  background:var(--glass);
  scroll-snap-align:center;
  display:flex; flex-direction:column;
  cursor:pointer;
  transition:box-shadow .4s ease, background .35s ease;
}
.tut-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:var(--grad-border);
  -webkit-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:5;
}
/* o card fica parado: hover e abertura mudam só brilho e sombra,
   nunca a posição (nada de pulinho ao clicar) */
.tut-card:hover{ background:var(--glass-2); }
.tut-card.is-open{
  background:var(--glass-2);
  box-shadow:0 34px 80px -30px rgba(0,0,0,.85), 0 0 70px -30px rgba(139,108,255,.5);
}

/* a foto encolhe pra dar lugar à bio */
.tut-photo{
  flex:0 0 100%; overflow:hidden;
  transition:flex-basis .45s cubic-bezier(.4,0,.2,1);
}
.tut-card.is-open .tut-photo{ flex-basis:52%; }
.tut-photo img{
  width:100%; height:100%; object-fit:cover; object-position:center 22%;
  transition:transform .5s;
}
.tut-card:hover .tut-photo img{ transform:scale(1.04); }

/* nome sobre a foto quando fechado */
.tut-nome{
  position:absolute; left:14px; right:14px; bottom:14px; z-index:4;
  font-size:.82rem; font-weight:600; color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.9);
  transition:opacity .3s, transform .35s;
}
.tut-nome em{
  display:block; font-style:normal; font-size:.66rem;
  color:rgba(255,255,255,.72); margin-top:2px;
}
.tut-card.is-open .tut-nome{ opacity:0; transform:translateY(8px); }

/* bio que sobe ao abrir */
.tut-info{
  flex:1; min-height:0;
  padding:16px 16px 18px;
  display:flex; flex-direction:column; gap:8px;
  opacity:0; transform:translateY(14px);
  transition:opacity .35s .1s, transform .4s .1s;
}
.tut-card.is-open .tut-info{ opacity:1; transform:none; }
.tut-info b{ font-family:var(--display); font-size:1rem; line-height:1.2; }
.tut-info p{ color:var(--muted); font-size:.76rem; line-height:1.5; flex:1; }
.tut-rodape{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.tut-tag{
  font-size:.6rem; color:var(--lime-txt);
  background:rgba(198,255,61,.1); border:1px solid rgba(198,255,61,.25);
  padding:4px 10px; border-radius:999px;
}
.tut-btn{
  font-size:.62rem; font-weight:700; color:#0a1204;
  background:var(--lime); padding:6px 12px; border-radius:999px;
}

.tut-seta{
  position:absolute; top:50%; transform:translateY(-50%); z-index:6;
  width:40px; height:40px; border-radius:50%;
  background:rgba(10,12,24,.8); border:1px solid var(--line);
  color:var(--text); font-size:1.3rem; line-height:1; cursor:pointer;
  backdrop-filter:blur(8px);
  transition:background .25s, border-color .25s, opacity .25s;
}
.tut-seta:hover{ background:rgba(20,24,44,.95); border-color:var(--violet); }
.tut-seta[disabled]{ opacity:.25; cursor:default; }
.tut-prev{ left:0; }
.tut-next{ right:0; }
@media (max-width:600px){ .tut-seta{ display:none; } }

/* ---------- CTA ---------- */
.cta{
  position:relative; text-align:center;
  padding:clamp(110px, 14vw, 200px) 20px; overflow:hidden;
}
.cta-title{
  font-family:var(--display); font-weight:800;
  font-size:clamp(3rem, 10vw, 7.8rem);
  line-height:.97; letter-spacing:-.035em;
}
.cta-term{
  display:inline-flex; align-items:center; gap:10px;
  margin:44px 0 34px;
  background:var(--glass); border:1px solid var(--line); border-radius:14px;
  padding:16px 26px; font-size:clamp(.85rem, 2vw, 1rem);
}
.cta-term .prompt{ color:var(--lime); }
.caret{ width:9px; height:1.15em; background:var(--lime); display:inline-block;
  animation:blink 1.05s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
.cta .btn-big{ display:inline-flex; }
.cta-note{ margin-top:22px; color:var(--muted); font-size:.8rem; }
.float{
  position:absolute; width:clamp(80px, 9vw, 130px);
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.5));
  pointer-events:none;
  animation:drift 7s ease-in-out infinite;
}
.float-d{ right:10%; top:12%; }
@keyframes drift{ 50%{ transform:translateY(-18px) rotate(3deg); } }

/* ---------- FOOTER ---------- */
.footer{
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:26px clamp(20px, 5vw, 60px);
  border-top:1px solid var(--line);
  color:var(--muted); font-size:.78rem;
}
.footer .ok{ color:var(--lime); }
.footer a{ color:var(--cyan); }

/* ---------- ACESSIBILIDADE ---------- */
@media (prefers-reduced-motion: reduce){
  .js .reveal, .js .hero-el{ opacity:1; transform:none; }
  .marquee-track, .float, .scroll-hint, .meet-thumb img, .mic.on{ animation:none; }
}


/* ---------- FAIXA DE TECNOLOGIAS (15 trilhas do gabarito) ---------- */
.tech-faixa{ margin-top:clamp(34px, 4vw, 54px); overflow:hidden; }
.tech-titulo{
  font-size:.72rem; color:var(--muted); margin-bottom:16px;
}
.tech-row{
  display:flex; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.tech-track{
  display:flex; gap:14px; width:max-content;
  padding-right:14px;                       /* fecha o laço sem chip colado */
  animation:coScroll 74s linear infinite;   /* mesmo ritmo da parede de empresas */
}
.tech-row:hover .tech-track{ animation-play-state:paused; }

/* chip sem logo: um glifo mono no lugar da marca */
.tech-glifo{
  display:flex; align-items:center; justify-content:center;
  font-size:.72rem; font-weight:700;
  color:var(--c, var(--cyan));
}
.tech-glifo::before{ content:none; }        /* sem máscara: o texto é o ícone */

@media (prefers-reduced-motion: reduce){
  .tech-track{ animation:none; flex-wrap:wrap; justify-content:center; width:auto; }
  .tech-row{ overflow:visible; mask-image:none; -webkit-mask-image:none; }
  .tech-track > .co:nth-child(n+16){ display:none; }   /* esconde a cópia do laço */
}

/* ---------- ALÉM DO CÓDIGO: trilho lateral preso na tela ----------
   A pista dá o percurso vertical; o palco gruda (sticky) e o scroll
   empurra o trilho pro lado. O card mais perto do centro fica em foco. */
#alem{ padding-top:0; padding-bottom:0; }
.alem-pista{ height:280vh; }
.alem-palco{
  position:sticky; top:0; height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;
}
.alem-vitrine{
  overflow:hidden;
  margin-top:clamp(26px, 3.4vw, 44px);
  /* as pontas somem num degradê curto; a folga do trilho (72px) é maior
     que o degradê (56px), então card em posição nunca fica apagado */
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 56px,
                     #000 calc(100% - 56px), transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 56px,
             #000 calc(100% - 56px), transparent 100%);
}
.alem-track{
  display:flex; gap:clamp(16px, 2vw, 24px); width:max-content;
  padding-inline:72px;
  will-change:transform;
}
.alem-track .perk{
  width:clamp(305px, 32.5vw, 400px); flex:0 0 auto; padding:26px 24px;
  /* o driver controla opacity/scale; sem transição pra não "boiar" atrás do scroll */
}
#alem .perk b{ font-size:1.02rem; }
#alem .perk p{ font-size:.9rem; }
.alem-progresso{
  width:min(260px, 40%); height:2px; margin-top:clamp(22px, 3vw, 34px);
  background:var(--line); border-radius:2px;
}
.alem-progresso i{
  display:block; height:100%; width:0;
  background:var(--grad); border-radius:inherit;
}

/* cada card colore o próprio ícone com --tone (o .perk padrão é ciano) */
#alem .perk-ic{
  background:color-mix(in srgb, var(--tone, var(--cyan)) 11%, transparent);
  color:var(--tone, var(--cyan));
}
:root[data-theme="light"] #alem .perk-ic{
  /* escurece o tom pra ler sobre claro; o lime não escurece bem com
     color-mix, então o card informa --tone-txt (verde-oliva) direto */
  color:var(--tone-txt, color-mix(in srgb, var(--tone, var(--cyan)) 72%, #000));
}

/* celular: sem sequestro de rolagem — trilho nativo com snap */
@media (max-width:760px){
  #alem{ padding-top:clamp(100px, 12vw, 180px); padding-bottom:clamp(100px, 12vw, 180px); }
  .alem-pista{ height:auto; }
  .alem-palco{ position:static; height:auto; overflow:visible; }
  .alem-vitrine{
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 28px,
                       #000 calc(100% - 28px), transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0, #000 28px,
               #000 calc(100% - 28px), transparent 100%);
  }
  .alem-track{
    width:auto; overflow-x:auto; scroll-snap-type:x proximity;
    padding:4px 40px 14px; scrollbar-width:none;
    transform:none !important;   /* o driver de desktop nunca manda aqui */
  }
  .alem-track .perk{
    width:min(82vw, 330px); scroll-snap-align:center;
    opacity:1 !important; transform:none !important;
  }
  .alem-progresso{ display:none; }
}
/* movimento reduzido: grade parada, tudo visível */
@media (prefers-reduced-motion: reduce){
  #alem{ padding-top:clamp(100px, 12vw, 180px); padding-bottom:clamp(100px, 12vw, 180px); }
  .alem-pista{ height:auto; }
  .alem-palco{ position:static; height:auto; overflow:visible; }
  .alem-vitrine{ -webkit-mask-image:none; mask-image:none; }
  .alem-track{ width:auto; flex-wrap:wrap; padding-inline:0; transform:none !important; }
  .alem-track .perk{ opacity:1 !important; transform:none !important; }
  .alem-progresso{ display:none; }
}

/* ---------- DIPLOMA CLÁSSICO (referência visual enviada pelo usuário) ----------
   Documento de papel: as cores são fixas nos dois temas, como um PDF.
   Tudo desenhado em CSS/SVG — nenhuma imagem. */
.dip-palco{ max-width:1080px; }
.dip{
  --serif:Georgia, 'Times New Roman', serif;
  --tinta:#17293e;            /* azul-marinho do texto */
  --ouro-txt:#7a5c1c;         /* dourado legível sobre o creme */
  --creme:#f8f1de;
  position:relative;
  font-family:var(--serif);
  background:linear-gradient(160deg, #16273f, #0c1a30 60%, #0a1526);
  border-radius:10px;
  padding:clamp(14px, 2vw, 22px);
  box-shadow:0 46px 110px -38px rgba(0,0,0,.85), 0 0 80px -30px rgba(217,185,106,.28);
}
/* filetes dourados duplos da moldura */
.dip::before{
  content:""; position:absolute; inset:clamp(7px, 1vw, 11px);
  border:1px solid rgba(217,185,106,.9); border-radius:7px;
  box-shadow:inset 0 0 0 3px rgba(217,185,106,.25);
  pointer-events:none; z-index:2;
}
.dip-canto{
  position:absolute; width:34px; height:34px; z-index:3; pointer-events:none;
}
.dip-canto::before{
  content:""; position:absolute; inset:0;
  border-top:2px solid #d9b96a; border-left:2px solid #d9b96a;
}
.dip-canto::after{
  content:""; position:absolute; top:7px; left:7px; width:9px; height:9px;
  background:linear-gradient(135deg, #f2dc96, #9a7a35);
  transform:rotate(45deg);
}
.dip-canto.c1{ top:14px; left:14px; }
.dip-canto.c2{ top:14px; right:14px; transform:scaleX(-1); }
.dip-canto.c3{ bottom:44px; left:14px; transform:scaleY(-1); }
.dip-canto.c4{ bottom:44px; right:14px; transform:scale(-1); }

/* o papel */
.dip-papel{
  position:relative; overflow:hidden;
  /* pergaminho com relevo: grão de ruído por cima, trama diagonal fina,
     luz no topo e vinheta amadeirada nos cantos */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .44 0 0 0 0 .35 0 0 0 0 .18 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)' opacity='.55'/%3E%3C/svg%3E"),
    radial-gradient(120% 90% at 50% 0, rgba(255,255,255,.55), transparent 55%),
    radial-gradient(140% 120% at 100% 100%, rgba(168,134,72,.26), transparent 56%),
    radial-gradient(140% 120% at 0 100%, rgba(168,134,72,.22), transparent 56%),
    radial-gradient(160% 100% at 50% 50%, transparent 62%, rgba(150,115,55,.18) 100%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(0deg, rgba(160,130,70,.05) 0 1px, transparent 1px 7px),
    var(--creme);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.65),
    inset 0 0 52px rgba(150,115,55,.22);
  border-radius:5px;
  padding:clamp(20px, 4vw, 40px) clamp(18px, 8vw, 110px) clamp(16px, 2.6vw, 26px);
  text-align:center;
  color:var(--tinta);
}
/* placa interna em baixo-relevo: risco escuro com fio de luz por baixo */
.dip-papel::after{
  content:""; position:absolute; inset:11px; border-radius:3px;
  border:1px solid rgba(146,114,58,.5);
  box-shadow:0 1px 0 rgba(255,255,255,.55), inset 0 1px 0 rgba(120,90,40,.28),
             inset 0 -1px 0 rgba(255,255,255,.5);
  pointer-events:none;
}

/* marcas d'água e fantasma */
.dip-agua{
  position:absolute; top:34%; z-index:0;
  font-weight:bold; font-size:clamp(44px, 8vw, 92px); letter-spacing:.08em;
  color:rgba(178,146,84,.16); transform:rotate(-9deg); pointer-events:none;
}
.dip-agua.a1{ left:2%; }
.dip-agua.a2{ right:1%; }
.dip-fantasma{
  position:absolute; right:2%; top:26%; z-index:0;
  font-family:var(--serif); font-style:italic;
  font-size:clamp(120px, 18vw, 230px); line-height:1;
  color:rgba(178,146,84,.10); pointer-events:none;
}
/* só o CONTEÚDO sobe acima das marcas d'água; as peças absolutas
   (águas, fantasma, selos, fita, registro) mantêm o próprio position */
.dip-cab, .dip-lei, .dip-titulo, .dip-a, .dip-nome,
.dip-curso, .dip-data, .dip-pe{ position:relative; z-index:1; }

/* carimbo MEC e registro */
.dip-selo-mec{
  position:absolute; top:20px; z-index:3;
  left:calc(clamp(40px, 6vw, 74px) + clamp(44px, 5.4vw, 64px) + 16px);
  width:clamp(74px, 9vw, 104px); height:auto;
}
.dip-registro{
  position:absolute; top:22px; right:22px;
  font-size:.58rem; letter-spacing:.14em; color:#6b5a34; text-align:right; line-height:1.7;
}
.dip-registro b{ font-size:.66rem; color:#4c3a12; }

/* fita lateral com medalha */
.dip-fita{
  position:absolute; left:clamp(40px, 6vw, 74px); top:0; bottom:30%;
  width:clamp(44px, 5.4vw, 64px); z-index:2;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 3px, transparent 3px 7px),
    linear-gradient(90deg, #0b1830, #1d3557 45%, #0b1830);
  clip-path:polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 22px), 0 100%);
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}
/* a medalha fica FORA da fita: o clip-path da ponta em V recorta os filhos */
.dip-selo-fita{
  position:absolute; z-index:3;
  left:calc(clamp(40px, 6vw, 74px) + clamp(22px, 2.7vw, 32px));
  top:31%;
  width:clamp(88px, 10.4vw, 126px); height:auto;
  transform:translateX(-50%);
  filter:drop-shadow(0 8px 14px rgba(60,40,0,.4));
}

/* cabeçalho */
.dip-brasao{ width:clamp(74px, 8.4vw, 100px); height:auto; margin:0 auto 4px; display:block; }
.dip-inst{
  font-size:clamp(1.14rem, 2.6vw, 1.72rem); font-weight:700;
  letter-spacing:.035em; color:#14293f; text-transform:uppercase;
}
.dip-sub{
  font-size:.66rem; letter-spacing:.32em; color:var(--ouro-txt);
  margin:5px 0 clamp(12px, 1.8vw, 18px);
}

/* corpo do texto */
.dip-lei{
  font-size:clamp(.56rem, 1.1vw, .7rem); letter-spacing:.06em;
  line-height:1.75; color:#4c4335; margin:0 auto 6px; max-width:88ch;
}
.dip-titulo{
  display:flex; align-items:center; justify-content:center; gap:14px;
  font-size:clamp(.94rem, 2vw, 1.3rem); font-weight:700;
  letter-spacing:.3em; color:var(--ouro-txt);
  margin:10px 0 2px; text-indent:.3em;   /* compensa o letter-spacing final */
}
.dip-titulo::before, .dip-titulo::after{
  content:"—✦—"; font-size:.72em; letter-spacing:0; text-indent:0;
  color:#b28c3e; flex:0 0 auto;
}
.dip-a{ font-size:.72rem; letter-spacing:.4em; color:#4c4335; margin-bottom:2px; text-indent:.4em; }
.dip-nome{
  font-family:'Great Vibes', 'Segoe Script', cursive;
  font-size:clamp(2.3rem, 5.6vw, 3.6rem); line-height:1.15; color:#17324e;
  margin:0 auto 12px; max-width:90%;
}
.dip-nome::after{
  content:""; display:block; width:min(420px, 76%); height:1px; margin:2px auto 0;
  background:linear-gradient(90deg, transparent, #b28c3e 20%, #b28c3e 80%, transparent);
}
.dip-curso{
  font-size:clamp(.98rem, 2.1vw, 1.34rem); font-weight:700;
  letter-spacing:.05em; color:#14293f; text-transform:uppercase; margin:8px 0;
}
.dip-data{ font-style:italic; font-size:.8rem; color:#3f3a2e; margin:10px 0 clamp(14px, 2.4vw, 22px); }

/* rodapé: verificação · assinatura · medalha · assinatura · aviso */
.dip-pe{
  display:grid; grid-template-columns:auto 1fr auto 1fr auto;
  gap:clamp(10px, 1.6vw, 18px); align-items:end;
}
.dip-caixa{
  border:1px solid #c8ab6a; border-radius:4px;
  background:rgba(255,255,255,.42);
  padding:8px 10px; text-align:left;
  font-size:.5rem; letter-spacing:.1em; line-height:1.7; color:#4c4335;
}
.dip-verif{ display:flex; align-items:center; gap:9px; }
.dip-qr{ width:52px; height:52px; flex:0 0 auto; background:#fff;
  border:3px solid #fff; box-sizing:content-box; image-rendering:pixelated; }
.dip-verif b{ font-size:.56rem; color:#17293e; }
.dip-aviso{ text-align:center; }
.dip-aviso b{ display:block; font-size:.56rem; color:#7a1d1d; letter-spacing:.08em; margin-bottom:4px; }
.dip-ass{ display:flex; flex-direction:column; align-items:center; gap:2px; padding-bottom:2px; }
.dip-firma{
  font-family:'Great Vibes', 'Segoe Script', cursive;
  font-size:clamp(1.3rem, 2.4vw, 1.7rem); color:#1d3557; line-height:1;
  transform:rotate(-3deg);
}
.dip-linha{ width:min(180px, 90%); height:1px; background:#8a7648; margin-top:3px; }
.dip-ass b{ font-size:.66rem; letter-spacing:.04em; color:#2b2417; }
.dip-ass small{ font-size:.52rem; letter-spacing:.14em; color:#6b5a34; }
.dip-selo-centro{ width:clamp(70px, 8.4vw, 96px); height:auto; justify-self:center;
  filter:drop-shadow(0 6px 12px rgba(60,40,0,.35)); }

/* lema na faixa azul de baixo */
.dip-lema{
  margin-top:clamp(10px, 1.6vw, 14px);
  text-align:center; font-size:.62rem; letter-spacing:.26em;
  color:#d9b96a; text-transform:uppercase;
}

/* respiro pro conteúdo não brigar com a fita em telas médias */
@media (max-width:1060px){
  .dip-agua{ font-size:clamp(38px, 7vw, 70px); }
}
@media (max-width:720px){
  .dip-fita, .dip-selo-fita, .dip-fantasma{ display:none; }
  .dip-papel{ padding-inline:clamp(14px, 4vw, 26px); }
  .dip-selo-mec{ width:64px; top:10px; left:10px !important; }
  .dip-registro{ top:14px; right:12px; font-size:.5rem; }
  .dip-pe{ grid-template-columns:1fr 1fr; }
  .dip-verif{ order:4; }
  .dip-aviso{ order:5; }
  .dip-selo-centro{ order:3; grid-column:1 / -1; }
  .dip-ass{ padding-top:8px; }
  .dip-lema{ letter-spacing:.14em; }
}

/* ---------- CARTA LACRADA (abre o diploma ao romper o lacre) ----------
   A carta usa o material da página — vidro escuro com borda em degradê —
   em vez de imitar papel antigo. Assim o único elemento quente da cena é a
   cera vermelha, e o olho vai direto pra onde se clica. */
.dip-envelope{
  /* uma batida só pra abertura inteira: a aba abre primeiro, e tudo que
     vem do envelope (documento, altura da seção, saída da carta) entra
     depois de --t-espera, quando a aba já está visivelmente aberta */
  --t-aba:.75s;
  --t-espera:.34s;
  --t-subida:.9s;
  --curva-subida:cubic-bezier(.2, .8, .25, 1);

  position:relative;
  max-height:4000px;
  /* mesma duração, mesma curva e mesmo atraso do documento:
     a seção e o diploma crescem como uma peça só */
  transition:max-height var(--t-subida) var(--curva-subida) var(--t-espera);
}
/* fechado: só a altura da carta + dica */
.js .dip-envelope:not(.is-aberto){ max-height:clamp(300px, 58vw, 640px); }

/* o diploma nasce lá dentro e sobe */
.js .dip-envelope:not(.is-aberto) .dip{
  opacity:0; transform:translateY(56px) scale(.94);
  pointer-events:none;
}
.dip-envelope.is-aberto .dip{
  /* `backwards` e não `forwards`: terminada a animação o elemento volta ao
     estilo normal, e o tilt 3D (que escreve transform inline) volta a mandar */
  animation:dipSobe var(--t-subida) var(--curva-subida) var(--t-espera) backwards;
}
@keyframes dipSobe{
  from{ opacity:0; transform:translateY(56px) scale(.94); }
}

/* ---- a carta ---- */
.env{ display:none; }
.js .env{
  position:absolute; inset:0; z-index:7;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px;
  transition:opacity .62s ease-in var(--t-espera),
             transform .72s cubic-bezier(.45, 0, .7, .4) var(--t-espera);
}
/* desce e recua enquanto o diploma sobe: os dois se cruzam no meio */
.dip-envelope.is-aberto .env{
  opacity:0; transform:translateY(52px) scale(.96);
  pointer-events:none;
}
/* a instrução some assim que deixa de ser verdade */
.dip-envelope.is-aberto .env-dica{ opacity:0; transition:opacity .2s ease; }

.env-corpo{
  position:relative; width:100%; aspect-ratio:2 / 1;
  perspective:1500px;
  background:linear-gradient(158deg, rgba(24,29,52,.94), rgba(9,12,24,.97));
  border-radius:16px;
  box-shadow:0 46px 110px -38px rgba(0,0,0,.9), 0 0 90px -34px rgba(139,108,255,.4);
}
/* borda em degradê: a assinatura da página */
.env-corpo::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:var(--grad-border);
  -webkit-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:4;
}
/* miolo escuro que aparece quando a aba levanta */
.env-interior{
  position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(180deg, #05070f 0 52%, transparent 52%);
  opacity:.9;
}

/* selo postal, canto superior direito */
.env-postal{
  position:absolute; top:6.5%; right:5%; z-index:3;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  width:clamp(52px, 7.4%, 78px); aspect-ratio:.84;
  background:var(--grad); border-radius:4px;
  box-shadow:0 6px 16px -6px rgba(0,0,0,.8);
}
.env-postal::before{
  content:""; position:absolute; inset:4px;
  border:1.5px dashed rgba(6,8,18,.5); border-radius:2px;
}
.env-postal b{ font-size:1rem; color:#0a0d1a; line-height:1; }
.env-postal em{
  font-style:normal; font-size:.42rem; letter-spacing:.1em;
  color:rgba(10,13,26,.75); text-align:center; line-height:1.3;
}

/* endereçamento, embaixo à esquerda */
.env-para{
  position:absolute; left:7%; bottom:9%; z-index:3;
  font-size:clamp(.6rem, 1.05vw, .76rem); line-height:2.1;
  color:var(--muted); text-align:left;
}
.env-para span{
  display:inline-block; min-width:3.4em;
  color:var(--cyan); opacity:.75;
}
.env-para p + p{ opacity:.72; }

/* a aba triangular */
.env-aba{
  position:absolute; left:0; right:0; top:0; height:52%;
  z-index:2; transform-origin:top center;
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  border-radius:16px 16px 0 0;
  background:linear-gradient(178deg, rgba(38,45,76,.96), rgba(16,20,38,.98));
  box-shadow:0 14px 26px -14px rgba(0,0,0,.9);
  transition:transform var(--t-aba) cubic-bezier(.55, 0, .25, 1);
}
/* fio de luz na dobra: dá espessura ao papel */
.env-aba::after{
  content:""; position:absolute; inset:0;
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  background:linear-gradient(178deg, rgba(139,108,255,.22), transparent 34%);
}
.dip-envelope.is-aberto .env-aba{ transform:rotateX(-168deg); }

/* ---- lacre de cera: o único ponto quente da cena ---- */
.env-lacre{
  position:absolute; left:50%; top:52%; z-index:5;
  width:clamp(62px, 9.6%, 96px); aspect-ratio:1;
  transform:translate(-50%, -50%);
  background:none; border:none; padding:0; cursor:pointer;
}
.env-cera{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 34% 28%, #e2604f, #bd3227 46%, #7d1a16 86%);
  clip-path:polygon(100.0% 50.0%, 95.0% 56.5%, 89.3% 61.6%, 91.4% 68.9%, 92.1% 77.0%, 84.4% 79.8%, 76.8% 81.0%, 74.6% 88.3%, 70.8% 95.5%, 62.8% 93.7%, 55.8% 90.6%, 50.0% 95.5%, 42.9% 99.5%, 37.2% 93.7%, 33.0% 87.3%, 25.4% 88.3%, 17.3% 87.8%, 15.6% 79.8%, 15.5% 72.2%, 8.6% 68.9%, 2.0% 64.1%, 5.0% 56.5%, 9.0% 50.0%, 5.0% 43.5%, 2.0% 35.9%, 8.6% 31.1%, 15.5% 27.8%, 15.6% 20.2%, 17.3% 12.2%, 25.4% 11.7%, 33.0% 12.7%, 37.2% 6.3%, 42.9% 0.5%, 50.0% 4.5%, 55.8% 9.4%, 62.8% 6.3%, 70.8% 4.5%, 74.6% 11.7%, 76.8% 19.0%, 84.4% 20.2%, 92.1% 23.0%, 91.4% 31.1%, 89.3% 38.4%, 95.0% 43.5%);
  box-shadow:0 10px 24px -8px rgba(120,20,12,.9);
  transition:transform .2s ease;
}
.env-cera::before{
  content:""; position:absolute; inset:15%;
  border:2px solid rgba(255,190,175,.28); border-radius:50%;
  box-shadow:inset 0 2px 4px rgba(255,200,185,.22), inset 0 -3px 6px rgba(80,10,6,.5);
}
.env-cera i{
  font-style:normal; font-weight:700; font-size:1.15rem; color:#5f120e;
  text-shadow:0 1px 0 rgba(255,190,175,.35);
}
.env-lacre:hover .env-cera{ transform:scale(1.07); }
.env-lacre:focus-visible{ outline:2px solid var(--lime); outline-offset:7px; border-radius:50%; }
.env-lacre::after{
  content:""; position:absolute; inset:-10px; border-radius:50%;
  border:2px solid rgba(226,96,79,.5);
  animation:envPulso 2s ease-out infinite;
}
@keyframes envPulso{
  0%{ transform:scale(.82); opacity:0; }
  40%{ opacity:.9; }
  100%{ transform:scale(1.24); opacity:0; }
}

/* ---- a cera racha: 5 cacos + poîra ---- */
.env-caco, .env-po{ position:absolute; opacity:0; pointer-events:none; }
.env-caco{
  inset:0;
  background:radial-gradient(circle at 34% 28%, #e2604f, #bd3227 46%, #7d1a16 86%);
  clip-path:polygon(100.0% 50.0%, 95.0% 56.5%, 89.3% 61.6%, 91.4% 68.9%, 92.1% 77.0%, 84.4% 79.8%, 76.8% 81.0%, 74.6% 88.3%, 70.8% 95.5%, 62.8% 93.7%, 55.8% 90.6%, 50.0% 95.5%, 42.9% 99.5%, 37.2% 93.7%, 33.0% 87.3%, 25.4% 88.3%, 17.3% 87.8%, 15.6% 79.8%, 15.5% 72.2%, 8.6% 68.9%, 2.0% 64.1%, 5.0% 56.5%, 9.0% 50.0%, 5.0% 43.5%, 2.0% 35.9%, 8.6% 31.1%, 15.5% 27.8%, 15.6% 20.2%, 17.3% 12.2%, 25.4% 11.7%, 33.0% 12.7%, 37.2% 6.3%, 42.9% 0.5%, 50.0% 4.5%, 55.8% 9.4%, 62.8% 6.3%, 70.8% 4.5%, 74.6% 11.7%, 76.8% 19.0%, 84.4% 20.2%, 92.1% 23.0%, 91.4% 31.1%, 89.3% 38.4%, 95.0% 43.5%);
}
.env-po{
  left:50%; top:50%; width:6px; height:6px; border-radius:50%;
  background:var(--lime);   /* faíscas na cor da página, ligando ao campo de partículas */
}
.is-rompendo .env-cera, .is-rompendo.env-lacre::after{ display:none; }
.is-rompendo .env-caco{ animation:envCaco .66s cubic-bezier(.2, .7, .3, 1) forwards; }
.is-rompendo .env-caco.k1{ --vx:-58px; --vy:-62px; --rot:-42deg; clip-path:polygon(50% 50%, 0 0, 64% 0); }
.is-rompendo .env-caco.k2{ --vx:62px;  --vy:-50px; --rot:36deg;  clip-path:polygon(50% 50%, 64% 0, 100% 40%); animation-delay:.03s; }
.is-rompendo .env-caco.k3{ --vx:70px;  --vy:38px;  --rot:48deg;  clip-path:polygon(50% 50%, 100% 40%, 76% 100%); animation-delay:.05s; }
.is-rompendo .env-caco.k4{ --vx:4px;   --vy:76px;  --rot:-20deg; clip-path:polygon(50% 50%, 76% 100%, 20% 100%); animation-delay:.02s; }
.is-rompendo .env-caco.k5{ --vx:-66px; --vy:44px;  --rot:-50deg; clip-path:polygon(50% 50%, 20% 100%, 0 0); animation-delay:.04s; }
@keyframes envCaco{
  0%{ opacity:1; transform:none; }
  100%{ opacity:0; transform:translate(var(--vx), var(--vy)) rotate(var(--rot)) scale(.7); }
}
.is-rompendo .env-po{ animation:envPo .6s ease-out forwards; }
.is-rompendo .env-po.p1{ --vx:-78px; --vy:-34px; }
.is-rompendo .env-po.p2{ --vx:80px;  --vy:-40px; animation-delay:.03s; }
.is-rompendo .env-po.p3{ --vx:88px;  --vy:26px;  animation-delay:.06s; }
.is-rompendo .env-po.p4{ --vx:-86px; --vy:30px;  animation-delay:.04s; }
.is-rompendo .env-po.p5{ --vx:-26px; --vy:-88px; animation-delay:.07s; }
.is-rompendo .env-po.p6{ --vx:30px;  --vy:84px;  animation-delay:.05s; }
@keyframes envPo{
  0%{ opacity:1; transform:translate(-50%, -50%) scale(1); }
  100%{ opacity:0; transform:translate(calc(-50% + var(--vx)), calc(-50% + var(--vy))) scale(.25); }
}

.env-dica{ font-size:.7rem; color:var(--muted); letter-spacing:.06em; }

@media (max-width:720px){
  .env-corpo{ aspect-ratio:1.6 / 1; }
  .env-para{ font-size:.56rem; line-height:1.9; bottom:7%; }
  .env-lacre{ width:64px; }
  .env-cera i{ font-size:.95rem; }
  .env-postal{ width:52px; }
}
@media (prefers-reduced-motion: reduce){
  .dip-envelope{ --t-espera:0s; --t-subida:0s; --t-aba:0s; }
  .env-lacre::after{ animation:none; opacity:0; }
  .env-aba, .env, .dip-envelope, .env-dica{ transition:none; }
  .dip-envelope.is-aberto .dip{ animation:none; }
  .is-rompendo .env-caco, .is-rompendo .env-po{ animation:none; }
}

/* ---------- ALUNOS: título e leque na mesma tela ---------- */
#alunos{
  padding-top:clamp(44px, 5vw, 70px);
  padding-bottom:clamp(60px, 7vw, 104px);
}
#alunos h2{ margin-bottom:8px; }
#alunos .section-sub{ margin-bottom:clamp(12px, 1.6vw, 20px); }