/* Visual do GrokLab Lab (todas as páginas). Cores e fontes base vêm de marca.css. */
:root {
  --linha: rgba(196, 184, 236, .07);
  --borda: rgba(196, 184, 236, .16);
  --lilas: #c4b8ec;
  --fonte-serifa: "DM Serif Display", Georgia, serif;
  --gutter: clamp(16px, 5vw, 64px);
  --max: 1200px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
html { background: var(--fundo); scroll-behavior: smooth; }
body { position: relative; overflow-x: hidden; }
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); position: relative; }
/* Ícones: Material Symbols (Google), e o do Instagram desenhado em icones.svg */
.ms { font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal; font-size: 1.15em; line-height: 1; display: inline-block; letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr; -webkit-font-smoothing: antialiased; font-feature-settings: 'liga'; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; transition: font-variation-settings .3s; flex: none; }
.passo:hover .icone .ms, .porta:hover .icone .ms { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
svg.ic { width: 1em; height: 1em; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- Topo ---------- */
.topo { position: absolute; top: 0; left: 0; right: 0; z-index: 10; }
.topo .wrap { display: flex; align-items: center; justify-content: space-between; padding-top: 24px; padding-bottom: 24px; }
.marca { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--texto); }
.marca img { width: 54px; height: 54px; border-radius: 15px; display: block; box-shadow: 0 0 0 1px var(--borda), 0 12px 30px -10px rgba(0,0,0,.7); transition: transform .4s var(--ease); }
.marca:hover img { transform: rotate(-6deg) scale(1.05); }
.marca span { font-family: var(--fonte-titulo); font-weight: 700; font-size: 16px; line-height: 1.15; }
.marca small { display: block; font-weight: 500; color: var(--verde-lusorio); letter-spacing: .18em; font-size: 11px; text-transform: uppercase; }
.pilula {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-family: var(--fonte-titulo); font-size: 14px; font-weight: 500; color: var(--lilas);
  border: 1px solid var(--borda); padding: 9px 16px; border-radius: 999px; background: rgba(26,15,63,.5); backdrop-filter: blur(8px);
  transition: border-color .2s, color .2s;
}
.pilula:hover { border-color: var(--verde-lusorio); color: var(--verde-lusorio); }

/* ---------- Abertura ---------- */
.hero { position: relative; min-height: min(100svh, 860px); display: flex; align-items: center; overflow: hidden; isolation: isolate; }
.hero-arte { position: absolute; inset: -30px; z-index: -2; transition: transform .6s var(--ease); }
.hero-arte img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; display: block; opacity: 0; transition: opacity 1.8s ease; animation: respira 14s ease-in-out infinite alternate; }
.hero-arte img.on { opacity: 1; }
/* cena com elementos que chegam perto do texto: some à esquerda */
.hero-arte img.recua { object-position: 85% 40%; -webkit-mask-image: linear-gradient(90deg, transparent 34%, #000 60%); mask-image: linear-gradient(90deg, transparent 34%, #000 60%); }
@keyframes respira { from { transform: scale(1.02); } to { transform: scale(1.08); } }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, var(--fundo) 0%, rgba(26,15,63,.92) 30%, rgba(26,15,63,.35) 55%, transparent 75%),
    linear-gradient(0deg, var(--fundo) 0%, transparent 28%),
    linear-gradient(180deg, rgba(26,15,63,.7) 0%, transparent 18%);
}
/* partículas verdes saindo da tela */
.faiscas { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.faiscas i {
  position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--verde-lusorio);
  box-shadow: 0 0 10px 2px rgba(168,224,0,.7); opacity: 0;
  left: var(--x); top: var(--y); animation: faisca var(--t) linear infinite; animation-delay: var(--d);
}
@keyframes faisca {
  0% { opacity: 0; transform: translate(0, 0) scale(.6); }
  15% { opacity: .9; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.1); }
}
.hero > .wrap { width: 100%; }
.hero-texto { max-width: 760px; padding: 120px 0 80px; }
.selo {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--fonte-titulo); font-weight: 600; font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--verde-lusorio); border: 1px solid rgba(168,224,0,.35); padding: 8px 14px; border-radius: 999px; background: rgba(26,15,63,.55);
}
.selo i { width: 7px; height: 7px; border-radius: 50%; background: var(--verde-lusorio); box-shadow: 0 0 12px var(--verde-lusorio); animation: pulsa 2.4s ease-in-out infinite; }
@keyframes pulsa { 50% { opacity: .3; } }
h1 { font-size: clamp(46px, 6.4vw, 88px); font-weight: 700; letter-spacing: -.045em; line-height: .98; margin: 24px 0 0; }
.gira { display: inline-grid; vertical-align: bottom; }
.gira em {
  grid-area: 1 / 1; font-family: var(--fonte-serifa); font-style: italic; font-weight: 400; letter-spacing: -.02em;
  color: var(--verde-lusorio); text-shadow: 0 0 40px rgba(168,224,0,.35);
  opacity: 0; transform: translateY(.35em) rotate(-3deg); transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.gira em.on { opacity: 1; transform: none; }
.gira em.sai { opacity: 0; transform: translateY(-.35em) rotate(3deg); }
.lead { font-size: clamp(18px, 2vw, 21px); color: var(--lilas); max-width: 34ch; margin: 26px 0 0; line-height: 1.55; }
.lead b { color: var(--texto); font-weight: 600; }
.chamada { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-top: 36px; }
.botao {
  position: relative; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; overflow: hidden;
  font-family: var(--fonte-titulo); font-weight: 600; font-size: 16px;
  background: var(--verde-lusorio); color: var(--fundo); padding: 15px 24px; border-radius: 12px;
  transition: transform .25s var(--ease), box-shadow .25s;
}
.botao::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform: translateX(-120%); animation: brilho 4.5s ease-in-out infinite 2s; }
@keyframes brilho { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.botao:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -10px rgba(168,224,0,.65); }
.botao :is(svg, .ms) { font-size: 18px; }
.chamada small { color: var(--roxo-claro); font-size: 14px; display: inline-flex; align-items: center; gap: 8px; }
.chamada small :is(svg, .ms) { color: var(--verde-lusorio); font-size: 16px; }
.rolar { position: absolute; left: 50%; bottom: 22px; translate: -50% 0; color: var(--roxo-claro); font-size: 22px; animation: desce 2s ease-in-out infinite; }
@keyframes desce { 50% { transform: translateY(6px); } }

/* ---------- Faixa de disciplinas ---------- */
.faixa { border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); overflow: hidden; background: rgba(45,27,105,.25); }
.faixa-trilho { display: flex; width: max-content; animation: corre 40s linear infinite; }
.faixa:hover .faixa-trilho { animation-play-state: paused; }
.faixa-trilho > span { display: inline-flex; align-items: center; gap: 14px; padding: 18px 26px; font-family: var(--fonte-titulo); font-size: 18px; font-weight: 500; color: var(--lilas); white-space: nowrap; }
.faixa-trilho > span :is(svg, .ms) { color: var(--verde-lusorio); font-size: 20px; }
@keyframes corre { to { transform: translateX(-50%); } }

/* ---------- Títulos de seção ---------- */
.secao { padding: clamp(72px, 10vw, 128px) 0 0; }
.rotulo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--fonte-titulo); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--verde-lusorio); }
.rotulo::before { content: ""; width: 28px; height: 1px; background: currentColor; }
h2 { font-size: clamp(34px, 5vw, 60px); letter-spacing: -.04em; margin: 16px 0 0; max-width: 18ch; }
h2 em { font-family: var(--fonte-serifa); font-style: italic; font-weight: 400; color: var(--lilas); letter-spacing: -.02em; }
.cabeca { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.cabeca p { color: var(--roxo-claro); max-width: 38ch; margin: 0; font-size: 17px; }

/* ---------- Passos ---------- */
.passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; counter-reset: passo; }
.passo {
  position: relative; border-radius: 22px; overflow: hidden; border: 1px solid var(--borda);
  background: linear-gradient(180deg, rgba(45,27,105,.6), rgba(26,15,63,.9));
  transform-style: preserve-3d; transition: transform .35s var(--ease), border-color .35s;
}
.passo:hover { border-color: rgba(168,224,0,.55); }
.passo figure { margin: 0; aspect-ratio: 1 / .8; overflow: hidden; position: relative; }
.passo figure img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); }
.passo:hover figure img { transform: scale(1.06); }
.passo figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(26,15,63,1) 0%, transparent 45%); }
.passo-corpo { position: relative; padding: 0 26px 28px; margin-top: -34px; }
.passo .icone {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 24px;
  background: var(--fundo); border: 1px solid rgba(168,224,0,.45); color: var(--verde-lusorio);
  box-shadow: 0 0 0 6px rgba(26,15,63,.8), 0 0 30px -6px rgba(168,224,0,.6);
}
.passo .num { position: absolute; right: 26px; top: 6px; font-family: var(--fonte-serifa); font-style: italic; font-size: 54px; line-height: 1; color: rgba(196,184,236,.14); }
.passo h3 { font-size: 28px; letter-spacing: -.02em; margin: 18px 0 8px; }
.passo p { margin: 0; color: var(--lilas); font-size: 16.5px; }
.passo p b { color: var(--texto); font-weight: 600; }

/* ---------- Coleção ---------- */
.lista { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.ficha a, .ficha.breve {
  position: relative; display: flex; flex-direction: column; min-height: 260px; height: 100%;
  padding: 26px; border-radius: 20px; text-decoration: none; color: var(--texto);
  background: linear-gradient(160deg, rgba(45,27,105,.75), rgba(26,15,63,.9));
  border: 1px solid var(--borda); overflow: hidden; transition: transform .3s var(--ease), border-color .3s;
}
.ficha a:hover { transform: translateY(-5px); border-color: var(--verde-lusorio); }
.ficha .num { font-family: var(--fonte-titulo); font-size: 13px; letter-spacing: .16em; color: var(--roxo-claro); }
.ficha h3 { font-size: 26px; letter-spacing: -.02em; margin: auto 0 8px; position: relative; }
.ficha .tema { color: var(--lilas); font-size: 15px; position: relative; }
.ficha .tags { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.ficha .tags span { font-size: 12px; font-family: var(--fonte-titulo); letter-spacing: .06em; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--borda); color: var(--lilas); }
.ficha .seta { position: absolute; top: 22px; right: 22px; color: var(--verde-lusorio); font-size: 22px; transition: transform .3s var(--ease); }
.ficha a:hover .seta { transform: translate(3px, -3px); }
.ficha.breve { background: rgba(26,15,63,.4); border-style: dashed; }
.ficha.breve h3 { color: var(--lilas); }
.ficha.breve h3 em { font-family: var(--fonte-serifa); font-style: italic; font-weight: 400; color: var(--verde-lusorio); }
.ficha.breve .gaf { position: absolute; right: -36px; top: 22px; width: 210px; opacity: .2; transform: scaleX(-1) rotate(-6deg); animation: pula 6s ease-in-out infinite; }
@keyframes pula { 0%, 80%, 100% { translate: 0 0; } 86% { translate: -10px -18px; } 92% { translate: -14px 0; } }
.barra { height: 4px; border-radius: 4px; background: rgba(196,184,236,.12); margin-top: 18px; overflow: hidden; position: relative; }
.barra::after { content: ""; position: absolute; inset: 0; width: 35%; border-radius: 4px; background: var(--verde-lusorio); box-shadow: 0 0 12px var(--verde-lusorio); animation: carrega 2.8s ease-in-out infinite; }
@keyframes carrega { 0% { transform: translateX(-100%); } 100% { transform: translateX(290%); } }

/* ---------- Laboratório Aberto ---------- */
.lab {
  margin-top: clamp(72px, 10vw, 128px); display: grid; grid-template-columns: .9fr 1.1fr; align-items: stretch;
  border-radius: 28px; overflow: hidden; border: 1px solid rgba(168,224,0,.3);
  background: linear-gradient(135deg, rgba(45,27,105,.8), rgba(26,15,63,.95));
}
.lab figure { margin: 0; position: relative; min-height: 320px; }
.lab figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.lab figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, rgba(26,15,63,.95) 100%); }
.lab-texto { padding: clamp(32px, 5vw, 56px); }
.lab-texto h2 { font-size: clamp(30px, 4vw, 46px); }
.lab-texto p { color: var(--lilas); font-size: 17px; margin: 18px 0 0; max-width: 42ch; }
.lab-texto ol { list-style: none; padding: 0; margin: 24px 0 30px; display: grid; gap: 12px; }
.lab-texto li { display: flex; gap: 12px; align-items: flex-start; color: var(--texto); font-size: 16px; }
.lab-texto li :is(svg, .ms) { color: var(--verde-lusorio); font-size: 20px; margin-top: 2px; }

/* ---------- Rodapé ---------- */
.rodape { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 36px 0 44px; margin-top: 80px; border-top: 1px solid var(--borda); color: var(--roxo-claro); font-size: 14px; }
.rodape a { color: var(--lilas); text-decoration: none; }
.rodape a:hover { color: var(--verde-lusorio); }
.rodape em { font-family: var(--fonte-serifa); font-size: 17px; color: var(--lilas); }

/* ---------- Entradas ---------- */
.entra { opacity: 0; transform: translateY(20px); animation: entra 1s var(--ease) forwards; }
.d1 { animation-delay: .05s; } .d2 { animation-delay: .2s; } .d3 { animation-delay: .32s; } .d4 { animation-delay: .46s; } .d5 { animation-delay: .6s; }
@keyframes entra { to { opacity: 1; transform: none; } }
.revela { opacity: 0; transform: translateY(36px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--atraso, 0s); }
.revela.visto { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .passos { grid-template-columns: 1fr; }
  .lab { grid-template-columns: 1fr; }
  .lab figure::after { background: linear-gradient(0deg, rgba(26,15,63,.95) 0%, transparent 50%); }
}
@media (max-width: 760px) {
  .hero { min-height: auto; align-items: flex-end; }
  .hero-arte { inset: 0 0 auto 0; height: 62vw; min-height: 300px; }
  .hero-arte img { object-position: 78% 50%; }
  .hero::before { background: linear-gradient(0deg, var(--fundo) 0%, var(--fundo) calc(100% - 62vw), rgba(26,15,63,.2) calc(100% - 30vw), rgba(26,15,63,.55) 100%); }
  .hero-texto { padding: max(260px, 52vw) 0 56px; }
  h1 { font-size: clamp(36px, 10.5vw, 46px); }
  .faiscas, .rolar { display: none; }
  .pilula span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .entra, .revela { opacity: 1; transform: none; }
  .gira em:not(:first-child) { display: none; }
  .gira em { opacity: 1; transform: none; }
}

/* ---------- Portas (início) ---------- */
.portas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 48px; }
.porta {
  position: relative; display: flex; flex-direction: column; min-height: 380px; padding: clamp(28px, 4vw, 44px);
  border-radius: 26px; overflow: hidden; text-decoration: none; color: var(--texto); isolation: isolate;
  border: 1px solid var(--borda); background: linear-gradient(150deg, rgba(45,27,105,.85), rgba(26,15,63,.95));
  transform-style: preserve-3d; transition: transform .35s var(--ease), border-color .35s;
}
.porta:hover { border-color: rgba(168,224,0,.6); }
.porta .gafp { position: absolute; z-index: -1; right: -8%; bottom: -6%; width: 72%; opacity: .22; transition: transform .8s var(--ease), opacity .4s; }
.porta:hover .gafp { transform: translate(-12px, -10px) rotate(-4deg); opacity: .32; }
.porta .icone {
  width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; font-size: 28px;
  background: var(--fundo); border: 1px solid rgba(168,224,0,.45); color: var(--verde-lusorio); box-shadow: 0 0 30px -6px rgba(168,224,0,.6);
}
.porta .para { margin-top: 26px; font-family: var(--fonte-titulo); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--roxo-claro); }
.porta h3 { font-size: clamp(36px, 4.4vw, 54px); letter-spacing: -.04em; margin: 8px 0 0; }
.porta p { color: var(--lilas); font-size: 17px; max-width: 30ch; margin: 14px 0 0; }
.porta .ir { margin-top: auto; padding-top: 28px; display: inline-flex; align-items: center; gap: 10px; font-family: var(--fonte-titulo); font-weight: 600; color: var(--verde-lusorio); }
.porta .ir :is(svg, .ms) { transition: transform .3s var(--ease); }
.porta:hover .ir :is(svg, .ms) { transform: translate(4px, -4px); }
.em-breve { margin-top: 20px; display: flex; align-items: center; gap: 14px; padding: 18px 24px; border: 1px dashed var(--borda); border-radius: 18px; color: var(--roxo-claro); font-size: 15px; }
.em-breve :is(svg, .ms) { color: var(--verde-lusorio); font-size: 22px; }
.em-breve b { color: var(--lilas); font-weight: 600; }

/* ---------- Páginas de seção ---------- */
.topo.fixo { position: relative; }
.voltar { display: inline-flex; align-items: center; gap: 8px; color: var(--roxo-claro); text-decoration: none; font-family: var(--fonte-titulo); font-size: 14px; }
.voltar:hover { color: var(--verde-lusorio); }
.capa { position: relative; padding: clamp(32px, 6vw, 72px) 0 clamp(40px, 6vw, 64px); border-bottom: 1px solid var(--borda); overflow: hidden; }
.capa h1 { font-size: clamp(44px, 7vw, 92px); margin-top: 18px; }
.capa h1 em { font-family: var(--fonte-serifa); font-style: italic; font-weight: 400; color: var(--verde-lusorio); letter-spacing: -.02em; }
.capa .lead { max-width: 46ch; }
.capa .gafc { position: absolute; right: -40px; bottom: -30px; width: min(520px, 50vw); opacity: .18; pointer-events: none; animation: pula 7s ease-in-out infinite; }
.capa .wrap > * { position: relative; }

@media (max-width: 900px) { .portas { grid-template-columns: 1fr; } .porta { min-height: 320px; } }

/* ---------- Cards coloridos das portas (15/11/2026) ---------- */
.porta { padding: 0; min-height: 0; border: 0; color: var(--fundo); box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); }
.porta.verde { background: #b4d804; }
.porta.lilas { background: #c7b3f1; }
.porta figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.porta figure img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s var(--ease); }
.porta:hover figure img { transform: scale(1.05) rotate(-.6deg); }
.porta-corpo { display: flex; flex-direction: column; flex: 1; padding: 8px clamp(24px, 3.4vw, 40px) clamp(26px, 3.4vw, 38px); }
.porta .para { display: inline-flex; align-items: center; gap: 8px; margin-top: 0; color: rgba(26,15,63,.7); }
.porta .para .ms { font-size: 18px; }
.porta h3 { color: var(--fundo); font-size: clamp(40px, 5vw, 62px); }
.porta p { color: rgba(26,15,63,.82); font-weight: 500; }
.porta .ir {
  align-self: flex-start; color: var(--texto); background: var(--fundo); padding: 12px 18px; border-radius: 12px; margin-top: 24px;
  transition: transform .3s var(--ease), box-shadow .3s;
}
.porta:hover .ir { transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(26,15,63,.8); }
.porta .ir .ms { color: var(--verde-lusorio); transition: transform .3s var(--ease); }
.porta.lilas .ir .ms { color: #c7b3f1; }
.porta:hover .ir .ms { transform: translate(3px, -3px); }
.porta:hover { border-color: transparent; }