/* Ellie — direcao B (mascote em degrade lilas -> pessego). */
[hidden]{display:none!important}
:root{
  --tinta:#2a1330; --tinta2:#4a2c50; --suave:#8b6b90;
  --lilas:#d9b8e4; --lilas2:#c9a3dc; --pessego:#f6c3a3; --creme:#fff7f2;
  --coral:#f0625a; --coral2:#ff8a7a; --ouro:#f5b945; --verde:#2fb67c; --rosa:#ff5d7a;
  --raio:22px; --sombra:0 10px 30px rgba(80,20,80,.14);
  --fx:'Bricolage Grotesque',system-ui,sans-serif; --ft:Inter,system-ui,sans-serif; --fm:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--creme);color:var(--tinta);font-family:var(--ft);overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{display:block;max-width:100%}

.previa{background:var(--tinta);color:#f3e6f6;text-align:center;font-size:13px;padding:9px 16px;position:relative;z-index:30;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.previa .curto{display:none}

/* topo */
.topo{position:absolute;left:0;right:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:22px 48px}
.previa:not([hidden]) + .topo{top:37px}
.logo{font-family:var(--fx);font-weight:800;font-size:30px;letter-spacing:-.02em;text-decoration:none}
.topo nav{display:flex;gap:10px}
.pill{background:rgba(255,255,255,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:10px 18px;border-radius:999px;font-weight:600;font-size:14px;text-decoration:none;transition:background .2s}
.pill:hover{background:rgba(255,255,255,.85)}
.pill.dark{background:var(--tinta);color:#fff}

/* hero */
.hero{position:relative;min-height:100vh;background:var(--lilas);overflow:hidden}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.hero-txt{position:relative;z-index:1;padding:calc(7vh + 90px) 48px 80px;max-width:720px}
.tag{display:inline-flex;align-items:center;gap:9px;background:#fff;border-radius:999px;padding:8px 15px;font-weight:600;font-size:13px;margin-bottom:26px;box-shadow:0 6px 20px rgba(80,20,80,.12)}
.pulso{width:9px;height:9px;border-radius:50%;background:var(--rosa);box-shadow:0 0 0 4px rgba(255,93,122,.2);animation:pulso 1.2s ease-in-out infinite}
@keyframes pulso{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
h1{font-family:var(--fx);font-weight:800;font-size:clamp(52px,6.2vw,100px);line-height:.92;letter-spacing:-.035em}
.sub{font-size:21px;line-height:1.5;margin-top:24px;max-width:500px;color:var(--tinta2)}
.sub b{color:var(--tinta)}
.btns{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}
.b{display:inline-block;padding:17px 28px;border-radius:999px;font-weight:600;font-size:16px;text-decoration:none;border:0;cursor:pointer;font-family:var(--ft);transition:transform .15s}
.b:hover{transform:translateY(-2px)}
.b1{background:var(--tinta);color:#fff}.b2{background:#fff;color:var(--tinta)}
.b:disabled{opacity:.45;cursor:not-allowed;transform:none}
.stk{position:absolute;z-index:1;font-family:var(--fx);font-weight:800;background:#fff;border-radius:18px;padding:12px 18px;box-shadow:var(--sombra);font-size:15px;line-height:1.15}
.stk small{display:block;font-family:var(--ft);font-weight:500;font-size:11px;color:var(--suave);margin-bottom:3px}
.s1{right:9%;top:22%;transform:rotate(4deg)}.s2{right:30%;bottom:17%;transform:rotate(-5deg)}
.s3{right:6%;bottom:24%;transform:rotate(-2deg);background:var(--tinta);color:#fff;min-width:170px}.s3 small{color:#c9a9cf}

/* faixa do CA */
.cabar{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;background:var(--tinta);color:#fff;padding:16px 24px;font-size:15px}
.cabar code{font-family:var(--fm);font-size:13px;background:rgba(255,255,255,.1);padding:7px 12px;border-radius:10px;word-break:break-all}
.b-mini{background:#fff;color:var(--tinta);border:0;border-radius:999px;padding:9px 16px;font-weight:600;font-size:14px;cursor:pointer;text-decoration:none;font-family:var(--ft)}
.b-mini.dark{background:var(--coral);color:#fff}

/* secoes */
.sec{padding:110px 48px}
.sec-cab{max-width:760px;margin-bottom:44px}
h2{font-family:var(--fx);font-weight:800;font-size:clamp(40px,4.6vw,68px);letter-spacing:-.03em;line-height:1}
.sec-cab p{font-size:19px;line-height:1.5;color:var(--tinta2);margin-top:16px}
h3{font-family:var(--fx);font-weight:800;font-size:24px;letter-spacing:-.015em}

/* ao vivo */
.live{background:linear-gradient(180deg,var(--creme),#f7e9f3)}
.live-grade{display:grid;grid-template-columns:minmax(0,2fr) minmax(300px,1fr);gap:22px}
.palco-caixa{position:relative;border-radius:30px;overflow:hidden;background:linear-gradient(135deg,#d7b5e6 0%,#e9c0d6 50%,#f7c6a2 100%);aspect-ratio:16/10;box-shadow:var(--sombra)}
#palco{position:absolute;inset:0;width:100%;height:100%}
.rotulo3d{position:absolute;left:0;top:0;pointer-events:none;font-family:var(--fx);font-weight:800;font-size:22px;color:var(--tinta);background:#fff;border-radius:999px;padding:6px 14px;box-shadow:0 6px 16px rgba(80,20,80,.18);opacity:0;will-change:transform}
.humor{position:absolute;left:18px;top:18px;display:flex;align-items:center;gap:9px;background:#fff;border-radius:999px;padding:9px 16px;font-weight:700;font-size:15px;box-shadow:0 6px 18px rgba(80,20,80,.14)}
.humor i{width:10px;height:10px;border-radius:50%;background:var(--suave)}
.humor.frente i{background:var(--verde)}.humor.re i{background:var(--rosa)}.humor.calma i{background:var(--ouro)}
.batida{position:absolute;right:18px;top:18px;background:rgba(255,255,255,.7);backdrop-filter:blur(6px);border-radius:999px;padding:8px 14px;font-size:13px;font-weight:500}
.batida b{font-family:var(--fm);font-weight:500}
.coracao{color:var(--rosa);display:inline-block}
.coracao.bate{animation:bate .5s ease-out}
@keyframes bate{0%{transform:scale(1)}30%{transform:scale(1.6)}100%{transform:scale(1)}}
.lado{display:flex;flex-direction:column;gap:14px}
.nums{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.num{background:#fff;border-radius:18px;padding:16px 18px;box-shadow:0 4px 14px rgba(80,20,80,.06)}
.num small{display:block;color:var(--suave);font-size:12px;font-weight:600;margin-bottom:6px}
.num b{font-family:var(--fx);font-weight:800;font-size:28px;letter-spacing:-.02em}
.cartao{background:#fff;border-radius:18px;padding:18px;box-shadow:0 4px 14px rgba(80,20,80,.06)}
.cartao h3{font-size:18px;margin-bottom:10px}
.toques{list-style:none;max-height:280px;overflow:auto}
.toques li{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid #f1e6f1;font-size:14px}
.toques li:first-child{border-top:0}
.toques .ic{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff}
.toques .rabo .ic{background:var(--verde)}.toques .cabeca .ic{background:var(--rosa)}
.toques .t{flex:1;line-height:1.3}.toques .t small{display:block;color:var(--suave);font-size:12px}
.toques a{font-size:12px;color:var(--suave)}
.toques .vazio{color:var(--suave);display:block}
.toques li.novo{animation:entra .6s ease-out}
@keyframes entra{from{background:#fff3c9}to{background:transparent}}
.quem{font-size:14px;color:var(--tinta2);line-height:1.5}
.quem a{color:var(--tinta2)}
.mapa-caixa{margin-top:22px;background:#fff;border-radius:30px;padding:26px 26px 18px;box-shadow:0 4px 14px rgba(80,20,80,.06)}
.mapa-cab{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:10px}
.mapa-cab p{color:var(--suave);font-size:14px;max-width:520px}
#mapa{width:100%;height:260px;display:block}
.mapa-caixa.escuro{background:radial-gradient(120% 140% at 50% 40%,#3a1747 0%,#1d0b25 55%,#12071a 100%);color:#f3e6f6}
.mapa-caixa.escuro .mapa-cab p{color:#c9a9cf}
.cerebro-caixa{position:relative;height:340px;overflow:hidden;border-radius:18px}
.cerebro-caixa #mapa{position:absolute;inset:0;width:100%;height:100%;cursor:grab;touch-action:pan-y}
.rot3d{position:absolute;left:0;top:0;pointer-events:none;font-size:11px;font-weight:600;letter-spacing:.04em;color:#f3e6f6;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:3px 9px;white-space:nowrap}
.mapa-caixa.escuro .mapa-leg{color:#c9a9cf}
.c-s{background:#5fe3f0;box-shadow:0 0 8px #5fe3f0}.c-i{background:#ffc34d;box-shadow:0 0 8px #ffc34d}.c-m{background:#ff6f91;box-shadow:0 0 8px #ff6f91}.c-u{background:#ff5147}
.replay{font-size:12px;color:#a98bb0;margin-top:8px;min-height:16px}
.mapa-leg{display:flex;gap:18px;font-size:12px;color:var(--suave);margin-top:6px}
.mapa-leg i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.l1{background:var(--ouro);box-shadow:0 0 8px var(--ouro)}.l2{background:#e7dbe9}.l3{background:#9fb4ff}

/* como funciona */
.how{background:linear-gradient(135deg,#e7d0f0,#f9dcc8)}
.passos{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.passo{position:relative;background:#fff;border-radius:28px;overflow:hidden;box-shadow:var(--sombra);padding-bottom:26px}
.passo img{width:100%;aspect-ratio:1;object-fit:cover}
.passo .par{display:grid;grid-template-columns:1fr}
.passo .par img{aspect-ratio:2/1;object-position:50% 58%}
.passo .n{position:absolute;left:18px;top:18px;width:40px;height:40px;border-radius:50%;background:var(--tinta);color:#fff;display:grid;place-items:center;font-family:var(--fx);font-weight:800;font-size:18px}
.passo h3{padding:22px 24px 8px}
.passo p{padding:0 24px;color:var(--tinta2);line-height:1.55;font-size:16px}

/* prova */
.proof{background:var(--creme)}
.proof-grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:56px;align-items:center;max-width:1300px}
.proof-img{border-radius:30px;box-shadow:var(--sombra)}
.lead{font-size:19px;line-height:1.5;color:var(--tinta2);margin:18px 0 22px}
.provas{list-style:none;display:flex;flex-direction:column;gap:10px}
.provas li{display:flex;gap:14px;align-items:flex-start;background:#fff;border-radius:16px;padding:14px 16px;box-shadow:0 3px 12px rgba(80,20,80,.05)}
.provas i{flex:none;width:26px;height:26px;border-radius:50%;background:#eee3ee;margin-top:1px;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:14px;color:#fff}
.provas li.ok i{background:var(--verde)}.provas li.ok i::before{content:"✓"}
.provas li.espera i{background:var(--ouro)}.provas li.espera i::before{content:"…"}
.provas li.nao i{background:var(--rosa)}.provas li.nao i::before{content:"!"}
.provas b{display:block;font-size:16px}
.provas span{display:block;color:var(--suave);font-size:14px;line-height:1.45;margin-top:2px;word-break:break-word}
.nota{color:var(--suave);font-size:13px;margin-top:12px;min-height:18px}
.nota a{color:var(--tinta2)}

/* faq */
.faq{background:linear-gradient(180deg,#f7e9f3,#f3dccd)}
.perguntas{max-width:860px;display:flex;flex-direction:column;gap:10px}
details{background:#fff;border-radius:18px;padding:18px 22px;box-shadow:0 3px 12px rgba(80,20,80,.05)}
summary{cursor:pointer;font-family:var(--fx);font-weight:700;font-size:20px;list-style:none;display:flex;justify-content:space-between;gap:12px}
summary::after{content:"+";font-weight:800;color:var(--suave)}
details[open] summary::after{content:"–"}
details p{margin-top:10px;color:var(--tinta2);line-height:1.6}

/* rodape */
.rodape{background:var(--tinta);color:#e9d8ee;padding:56px 48px;display:grid;grid-template-columns:1fr auto;gap:24px 40px;align-items:start}
.rodape .logo{color:#fff}
.rodape p{margin-top:8px;color:#c9a9cf}
.links{display:flex;gap:18px;flex-wrap:wrap}
.links a{color:#fff;text-decoration:none;font-weight:600}
.miudo{grid-column:1/-1;font-size:12px;color:#9c7fa3!important;border-top:1px solid rgba(255,255,255,.1);padding-top:18px}

/* celular */
@media (max-width:900px){
  .live-grade{grid-template-columns:1fr}
  .passos{grid-template-columns:1fr}
  .proof-grade{grid-template-columns:1fr;gap:28px}
}
@media (max-width:700px){
  .previa .longo{display:none}.previa .curto{display:inline}
  .topo{padding:14px 16px}.topo nav .pill:not(.dark){display:none}.logo{font-size:24px}
  .hero{min-height:0}
  .hero-img{position:relative;height:330px;object-position:70% 50%}
  .hero-txt{padding:4px 16px 44px}
  h1{font-size:54px}.sub{font-size:17px}
  .btns{flex-direction:column}.b{text-align:center}
  .stk{font-size:12px;padding:8px 12px}.s1{top:254px;right:12px}.s2,.s3{display:none}
  .sec{padding:70px 16px}
  .palco-caixa{aspect-ratio:4/5;border-radius:24px}
  .humor{font-size:13px;padding:7px 12px}.batida{top:auto;bottom:14px;right:14px}
  #mapa{height:200px}
  .cerebro-caixa{height:480px}
  .mapa-caixa{padding:18px 14px 14px;border-radius:24px}
  .rodape{grid-template-columns:1fr;padding:44px 16px}
}