/* Hero com efeitos — Lito Palestras (layout, título animado, aurora, rota de voo, baralho de palestrantes) */
.hero{padding:clamp(48px,9vh,100px) 0 clamp(56px,10vh,110px);display:flex;align-items:center}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,4vw,60px);align-items:center;width:100%}
.hero h1{font-size:clamp(2.1rem,3.6vw,3.3rem);max-width:none;text-transform:uppercase}
.hero .lead{max-width:44ch}
.hero-acoes{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn{text-decoration:none}
.hero-lado > *{animation:lado-entra .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes lado-entra{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes vt-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:900px){.hero{padding:40px 0 56px}.hero-grid{grid-template-columns:1fr}}
/* ===== Opção D: hero com efeitos (sem vídeo) ===== */
.hero.fx{position:relative;overflow:hidden;isolation:isolate;padding-bottom:clamp(96px,14vh,150px)}
.hero.fx .hero-grid{position:relative;z-index:2}

/* Fundo: aurora + grade em perspectiva + rota de voo */
.fx-fundo{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.aurora{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;will-change:transform;
  transform:translate(calc(var(--mx,0) * var(--p,20px)),calc(var(--my,0) * var(--p,20px)))}
.aurora i{display:block;width:100%;height:100%;border-radius:50%;animation:deriva var(--d,22s) ease-in-out infinite alternate}
.aurora.a1{width:46vw;height:46vw;left:-12vw;top:-18vw;--p:-30px}
.aurora.a1 i{background:radial-gradient(circle,#5b6cf2,transparent 65%);--d:20s}
.aurora.a2{width:40vw;height:40vw;right:-10vw;top:0;--p:40px}
.aurora.a2 i{background:radial-gradient(circle,#8b5cf6,transparent 65%);--d:26s;animation-delay:-8s}
.aurora.a3{width:36vw;height:36vw;left:30vw;bottom:-22vw;--p:25px}
.aurora.a3 i{background:radial-gradient(circle,#2a2f8f,transparent 65%);--d:30s;animation-delay:-14s}
@keyframes deriva{0%{transform:translate(0,0) scale(1)}50%{transform:translate(6vw,4vw) scale(1.12)}100%{transform:translate(-4vw,6vw) scale(.92)}}

.fx-grade{position:absolute;left:-25%;right:-25%;bottom:-2px;height:46%;transform-origin:50% 100%;transform:perspective(520px) rotateX(62deg);
  background-image:linear-gradient(rgba(119,138,253,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(119,138,253,.22) 1px,transparent 1px);
  background-size:64px 64px;animation:pista 3.2s linear infinite;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 70%);mask-image:linear-gradient(180deg,transparent,#000 70%)}
@keyframes pista{to{background-position:0 64px,0 0}}

.fx-rota{position:absolute;inset:0;width:100%;height:100%}
.fx-rota .trilha{fill:none;stroke:rgba(163,176,255,.16);stroke-width:1.5;stroke-dasharray:2 10;stroke-linecap:round}
.fx-rota .rastro{fill:none;stroke:url(#g-rastro);stroke-width:2.5;stroke-linecap:round}
.fx-rota .aviaozinho{fill:#fff;filter:drop-shadow(0 0 6px rgba(163,176,255,.9))}

/* Título: entrada palavra a palavra + brilho nas palavras em destaque */
.hero.fx h1 .palavra{display:inline-block;opacity:0;transform:translateY(.45em);filter:blur(6px);animation:palavra .8s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--k) * 90ms + .1s)}
@keyframes palavra{to{opacity:1;transform:none;filter:none}}
.hero.fx h1 em .palavra{background:linear-gradient(100deg,#778afd 0%,#778afd 35%,#e0e5ff 50%,#a78bfa 65%,#778afd 100%);background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:palavra .8s cubic-bezier(.2,.8,.2,1) forwards,brilho-txt 5s ease-in-out 1.6s infinite;animation-delay:calc(var(--k) * 90ms + .1s),calc(var(--k) * 90ms + 1.6s)}
@keyframes brilho-txt{0%{background-position:100% 0}60%,100%{background-position:-50% 0}}
.hero.fx .eyebrow,.hero.fx .lead,.hero.fx .hero-acoes,.hero.fx .hero-time{opacity:0;animation:vt-entra .8s ease forwards}
.hero.fx .lead{animation-delay:.9s}.hero.fx .hero-acoes{animation-delay:1.05s}.hero.fx .hero-time{animation-delay:1.2s}

/* Botão principal com brilho periódico */
.hero.fx .hero-acoes .btn:not(.btn-sec){position:relative;overflow:hidden;box-shadow:0 14px 40px -14px rgba(91,108,242,.9)}
.hero.fx .hero-acoes .btn:not(.btn-sec)::after{content:'';position:absolute;top:0;bottom:0;left:-60%;width:40%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);animation:varre 4.5s ease-in-out 2s infinite}
@keyframes varre{0%{left:-60%}25%,100%{left:130%}}

/* Lado direito: baralho de palestrantes em 3D + selos flutuando */
.palco3d{position:relative;height:clamp(400px,42vw,500px);perspective:1100px}
.palco3d-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .25s ease-out;
  transform:rotateY(calc(var(--mx,0) * 9deg)) rotateX(calc(var(--my,0) * -7deg))}
.baralho{position:absolute;left:50%;top:50%;width:clamp(240px,22vw,300px);height:clamp(320px,29vw,400px);transform:translate(-50%,-50%);transform-style:preserve-3d}
.carta{position:absolute;inset:0;border-radius:22px;overflow:hidden;background:#11131f;border:1px solid rgba(163,176,255,.22);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.03);
  transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .9s ease,filter .9s ease}
.carta img{display:block;width:100%;height:74%;object-fit:cover;object-position:50% 18%}
.carta .info{position:absolute;left:0;right:0;bottom:0;padding:16px 18px 18px;background:linear-gradient(180deg,rgba(17,19,31,0),#11131f 30%)}
.carta b{display:block;font:800 1.15rem var(--fonte-titulo)}
.carta small{display:block;margin-top:3px;color:var(--ambar2);font-size:.8rem}
.carta .idiomas{position:absolute;top:12px;left:12px;right:auto;background:var(--botao);color:#fff;font:700 .68rem Inter,sans-serif;padding:4px 10px;border-radius:99px}
.carta[data-pos="0"]{transform:translateZ(40px);z-index:5}
.carta[data-pos="1"]{transform:translate(34px,-22px) rotate(6deg) translateZ(0);z-index:4;opacity:.85;filter:brightness(.7)}
.carta[data-pos="2"]{transform:translate(62px,-40px) rotate(11deg) translateZ(-40px);z-index:3;opacity:.55;filter:brightness(.5)}
.carta[data-pos="saindo"]{transform:translate(-130%,30px) rotate(-14deg);opacity:0;z-index:6}
.carta[data-pos="oculta"]{transform:translate(80px,-56px) rotate(14deg) translateZ(-80px);opacity:0;z-index:1}

.selo{position:absolute;z-index:6;display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;white-space:nowrap;
  background:rgba(16,18,32,.72);border:1px solid rgba(163,176,255,.22);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 16px 40px -16px rgba(0,0,0,.8);font:600 .82rem Inter,sans-serif;color:var(--txt);transform:translateZ(90px);animation:flutua 6s ease-in-out infinite}
.selo small{display:block;font:600 .6rem Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.selo .ponto{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 0 rgba(74,222,128,.6);animation:pulsa 2s infinite}
.selo.s1{left:0;top:12%}
.selo.s2{right:0;top:44%;animation-delay:-2s;animation-duration:7s}
.selo.s3{left:6%;bottom:6%;animation-delay:-4s;animation-duration:8s}
.selo .tema{display:inline-block;min-width:9ch;transition:opacity .4s}
@keyframes flutua{0%,100%{translate:0 0}50%{translate:0 -12px}}
@keyframes pulsa{70%{box-shadow:0 0 0 10px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}

/* Faixa de temas rolando */
.fx-faixa{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:16px 0;border-top:1px solid rgba(119,138,253,.14);background:rgba(5,5,7,.45);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.fx-faixa .trilho{display:flex;width:max-content;animation:rola 45s linear infinite}
.fx-faixa span{padding:0 22px;font:600 .82rem Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.fx-faixa span::after{content:'✦';margin-left:44px;color:var(--ambar)}
@keyframes rola{to{transform:translateX(-50%)}}

@media (max-width:900px){
  .hero.fx{padding-bottom:90px}
  .palco3d{height:400px}
  .selo.s2{right:-4px}
  .fx-grade{height:30%}
}
@media (prefers-reduced-motion:reduce){
  .aurora i,.fx-grade,.fx-faixa .trilho,.selo,.selo .ponto,.hero.fx .hero-acoes .btn::after{animation:none}
  .hero.fx h1 .palavra,.hero.fx .eyebrow,.hero.fx .lead,.hero.fx .hero-acoes,.hero.fx .hero-time{animation:none;opacity:1;transform:none;filter:none}
}

/* Baralho arrastável */
.baralho{touch-action:pan-y;outline:none}
.carta{user-select:none;-webkit-user-select:none}
.carta[data-pos="0"]{cursor:grab}
.carta.arrastando{cursor:grabbing;transition:none!important}
.carta[data-pos="saindo-dir"]{transform:translate(130%,30px) rotate(14deg);opacity:0;z-index:6}
.carta[data-pos=""]{opacity:0;transition:none}
.baralho:focus-visible .carta[data-pos="0"]{box-shadow:0 0 0 3px var(--ambar),0 30px 60px -20px rgba(0,0,0,.7)}
.carta[data-pos="0"]::after{content:'Arraste ou clique';position:absolute;top:12px;right:12px;padding:4px 10px;border-radius:99px;
  background:rgba(5,5,7,.6);color:#fff;font:600 .66rem Inter,sans-serif;letter-spacing:.04em;opacity:0;transition:opacity .25s}
.baralho:hover .carta[data-pos="0"]::after{opacity:1}
.carta.arrastando::after{opacity:0!important}