/* =====================================================================
   PAGINA INICIAL — vitrine dos canais
   ---------------------------------------------------------------------
   Tudo aqui e vidro: painel translucido + blur por cima de luzes de neon
   que se mexem devagar no fundo. Mesma paleta da pagina da live.
   ===================================================================== */

.pagina-inicio{
  /* O base.css trava o body com overflow:hidden (a live e um app de tela
     cheia). A inicial e uma pagina que ROLA — sem soltar isso, o rodape
     ficava fora de alcance, nao dava pra chegar nele de jeito nenhum.
     Body sendo o elemento raiz, esse overflow passa pra janela. */
  height:auto;
  overflow-y:auto;
  min-height:100dvh;
  background:
    radial-gradient(1200px 700px at 12% -10%, rgba(139,92,246,.20), transparent 62%),
    radial-gradient(1000px 600px at 92% 8%, rgba(59,130,246,.16), transparent 60%),
    radial-gradient(900px 700px at 60% 110%, rgba(239,68,68,.14), transparent 62%),
    linear-gradient(170deg,#0a0618,#07040f 55%,#0a0618);
  overflow-x:hidden;
}

/* ---------- luzes que respiram no fundo ---------- */
.fundo-luzes{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.luz{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;}
.luz.l1{width:44vw;height:44vw;left:-8vw;top:-10vw;background:rgba(139,92,246,.55);
  animation:luzAnda 26s ease-in-out infinite;}
.luz.l2{width:38vw;height:38vw;right:-6vw;top:6vh;background:rgba(34,211,238,.34);
  animation:luzAnda 32s ease-in-out infinite reverse;}
.luz.l3{width:46vw;height:46vw;left:26vw;bottom:-18vw;background:rgba(239,68,68,.30);
  animation:luzAnda 38s ease-in-out infinite;}
@keyframes luzAnda{
  0%,100%{transform:translate(0,0) scale(1);}
  33%{transform:translate(6vw,4vh) scale(1.12);}
  66%{transform:translate(-5vw,-3vh) scale(.94);}
}
@media (prefers-reduced-motion:reduce){ .luz{animation:none;} }

/* ---------- o vidro ---------- */
/* O vidro continua, com metade do raio.
   ---------------------------------------------------------------------
   O custo do desfoque de fundo cresce com o RAIO: 22px custa muito mais
   que 12px pela mesma area. E aqui a area e grande (a barra lateral, o
   rodape e o topo somam quase meia tela). A 12px o efeito de vidro
   continua legivel — o que se ve atras ja e um borrao de qualquer jeito —
   e a pagina rola sem engasgar em maquina fraca. */
.vidro{
  background:linear-gradient(150deg,rgba(255,255,255,.075),rgba(255,255,255,.02));
  backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 20px 50px -26px #000, inset 0 1px 0 rgba(255,255,255,.14);
}

/* ---------- esqueleto ---------- */
.inicio{
  position:relative;z-index:1;
  display:grid;grid-template-columns:var(--ini-rail,268px) minmax(0,1fr);
  min-height:100dvh;gap:16px;padding:16px;
}
.ini-main{display:flex;flex-direction:column;gap:16px;min-width:0;}
.ini-fundo{display:none;}

/* =====================================================================
   MENU DA ESQUERDA
   ===================================================================== */
.ini-rail{
  border-radius:20px;padding:16px 12px;display:flex;flex-direction:column;gap:14px;
  position:sticky;top:16px;height:calc(100dvh - 32px);overflow-y:auto;
  scrollbar-width:thin;
}
.ini-rail::-webkit-scrollbar{width:5px;}
.ini-rail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:9px;}

.ini-marca{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;padding:2px 6px;}
.ini-logo{
  width:44px;height:44px;border-radius:14px;flex:0 0 auto;display:grid;place-items:center;
  background:var(--grad-brand);box-shadow:var(--glow-purple),inset 0 1px 0 rgba(255,255,255,.35);
  overflow:hidden;
}
.ini-logo img{width:100%;height:100%;object-fit:contain;}
.ini-logo.peq{width:36px;height:36px;border-radius:11px;}
.ini-marca-txt{display:flex;flex-direction:column;min-width:0;}
.ini-marca-txt b{font-family:var(--font-display);font-size:15.5px;font-weight:900;letter-spacing:.4px;}
.ini-marca-txt i{font-size:9.5px;font-style:normal;letter-spacing:.16em;color:var(--txt-3);font-weight:700;}

.ini-sec{
  display:flex;align-items:center;gap:8px;padding:6px 8px 2px;
  font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3);
}
.ini-conta{
  margin-left:auto;padding:2px 8px;border-radius:99px;font-size:10px;
  background:rgba(139,92,246,.24);color:#ddd6fe;border:1px solid rgba(168,85,247,.4);
}

/* --- itens do menu, com icone animado --- */
.ini-nav{display:flex;flex-direction:column;gap:4px;}
.ini-item{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:10px 11px;border-radius:13px;border:1px solid transparent;
  background:transparent;color:var(--txt-2);font-size:14.5px;font-weight:700;
  cursor:pointer;text-decoration:none;position:relative;overflow:hidden;
  transition:color .2s, background .2s, border-color .2s, transform .2s;
}
.ini-item .ini-ic{
  width:34px;height:34px;flex:0 0 auto;display:grid;place-items:center;border-radius:11px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
  transition:transform .28s cubic-bezier(.3,1.5,.4,1), background .2s, box-shadow .2s;
}
.ini-item .ini-ic svg{width:18px;height:18px;transition:transform .28s cubic-bezier(.3,1.5,.4,1);}
.ini-item::after{          /* brilho que atravessa no hover */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.14),transparent 68%);
  transform:translateX(-130%);transition:transform .65s ease;
}
.ini-item:hover{
  color:#fff;transform:translateX(3px);
  background:linear-gradient(100deg,rgba(139,92,246,.20),rgba(59,130,246,.08));
  border-color:rgba(168,85,247,.34);
}
.ini-item:hover::after{transform:translateX(130%);}
.ini-item:hover .ini-ic{background:rgba(139,92,246,.34);box-shadow:0 0 18px -6px rgba(168,85,247,.9);}
.ini-item:hover .ini-ic svg{transform:scale(1.09) rotate(-5deg);}
.ini-item.ativo{
  color:#fff;border-color:rgba(168,85,247,.55);
  background:linear-gradient(100deg,rgba(139,92,246,.32),rgba(59,130,246,.12));
  box-shadow:0 12px 26px -18px rgba(139,92,246,.95);
}
.ini-item.ativo .ini-ic{background:var(--grad-brand);box-shadow:var(--glow-purple);}
/* o icone do item ativo respira sozinho */
.ini-item.ativo .ini-ic svg{animation:icRespira 3.4s ease-in-out infinite;}
@keyframes icRespira{
  0%,100%{transform:scale(1) rotate(0);}
  40%{transform:scale(1.14) rotate(-6deg);}
  70%{transform:scale(1.04) rotate(4deg);}
}
@media (prefers-reduced-motion:reduce){
  .ini-item.ativo .ini-ic svg{animation:none;}
}

/* --- lista de canais na lateral --- */
.ini-canais{display:flex;flex-direction:column;gap:3px;}
.ini-canal{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;
  text-decoration:none;color:var(--txt-2);transition:.18s;min-width:0;
}
.ini-canal:hover{background:rgba(139,92,246,.16);color:#fff;transform:translateX(2px);}
.ini-canal .av{
  width:32px;height:32px;border-radius:50%;flex:0 0 auto;position:relative;
  display:grid;place-items:center;font-weight:900;font-size:13px;overflow:hidden;
  border:2px solid transparent;
}
.ini-canal .av img{width:100%;height:100%;object-fit:cover;}
.ini-canal.no-ar .av{border-color:#ef4444;box-shadow:0 0 12px -2px rgba(239,68,68,.9);}
.ini-canal .txt{min-width:0;display:flex;flex-direction:column;line-height:1.2;}
.ini-canal .n{font-size:13.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ini-canal .s{font-size:10.5px;color:var(--txt-3);display:flex;align-items:center;gap:5px;}
.ini-canal.no-ar .s{color:#fda4af;}
.ini-canal .pt{width:7px;height:7px;border-radius:50%;background:#475569;flex:0 0 auto;}
.ini-canal.no-ar .pt{background:#ef4444;animation:blink 1.5s infinite;}
.ini-vazio{padding:14px 10px;font-size:12.5px;color:var(--txt-3);text-align:center;line-height:1.6;}

.ini-rodape-rail{margin-top:auto;padding-top:10px;}

/* --- quantas pessoas estao no site agora --- */
.ini-online{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 12px;border-radius:99px;font-size:12px;font-weight:800;
  color:#a7f3d0;background:rgba(16,185,129,.14);border:1px solid rgba(16,185,129,.42);
  white-space:nowrap;
}
.ini-online b{color:#fff;font-family:var(--font-display);font-size:13.5px;}
.ini-online .bolha{
  width:8px;height:8px;border-radius:50%;background:#34d399;flex:0 0 auto;
  box-shadow:0 0 10px #34d399;animation:blink 2s infinite;
}

/* =====================================================================
   BARRA DO TOPO
   ===================================================================== */
.ini-topo{
  border-radius:18px;padding:11px 14px;display:flex;align-items:center;gap:14px;
  position:sticky;top:16px;z-index:40;
  /* a busca aberta do celular se posiciona contra esta barra */
  isolation:isolate;
}
.ini-menu-btn{
  display:none;width:40px;height:40px;border-radius:12px;padding:0;place-items:center;
  border:1px solid var(--line);background:rgba(255,255,255,.05);cursor:pointer;
}
.ini-menu-btn svg{width:18px;height:18px;}

.ini-busca{position:relative;flex:1 1 auto;min-width:0;max-width:620px;}
.ini-busca .input{
  width:100%;padding:12px 44px 12px 16px;border-radius:14px;font-size:14px;
  background:rgba(8,5,20,.55);border:1px solid rgba(255,255,255,.12);
}
.ini-busca .input:focus{
  border-color:rgba(168,85,247,.7);
  box-shadow:0 0 0 3px rgba(139,92,246,.18), 0 0 26px -10px rgba(168,85,247,.9);
}
.ini-busca-ic{position:absolute;right:14px;top:50%;transform:translateY(-50%);pointer-events:none;opacity:.8;}
.ini-busca-ic svg{width:18px;height:18px;}

.ini-topo-dir{margin-left:auto;display:flex;align-items:center;gap:10px;flex:0 0 auto;}

/* entrar / conta */
.ini-entrar{display:flex;align-items:center;gap:8px;}
.ini-eu{
  display:flex;align-items:center;gap:9px;padding:6px 12px 6px 6px;border-radius:99px;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);
  cursor:pointer;transition:.18s;
  color:var(--txt);              /* botao nao herda cor: sem isso o nome sai preto */
  font-family:inherit;
}
.ini-eu:hover{background:rgba(139,92,246,.24);border-color:rgba(168,85,247,.6);}
/* laranja vivo, que le bem sobre o roxo da barra */
.ini-eu .nome{
  font-size:13px;font-weight:800;line-height:1.1;
  color:#ff8a1e;
  text-shadow:0 0 14px rgba(255,138,30,.45);
}
.ini-eu .papel{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3);}

/* =====================================================================
   DESTAQUE
   ===================================================================== */
.ini-corpo{display:flex;flex-direction:column;gap:18px;min-width:0;}

/* um banner so, largo, que gira sozinho entre quem esta no ar */
.ini-destaque{position:relative;display:block;}
.dest-palco{transition:opacity .34s ease, transform .34s ease;}
.dest-palco.trocando{opacity:0;transform:scale(.985);}
.dest-palco .dest-card{min-height:340px;}

/* no alto: embaixo esbarrava na etiqueta de "assistindo" */
.dest-pontos{
  position:absolute;right:16px;top:16px;z-index:4;
  display:flex;gap:7px;padding:7px 9px;border-radius:99px;
  background:rgba(6,3,14,.55);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.dest-ponto{
  width:8px;height:8px;border-radius:50%;cursor:pointer;padding:0;
  background:rgba(255,255,255,.34);border:0;
  transition:width .3s cubic-bezier(.3,1.3,.4,1), background .25s;
}
.dest-ponto:hover{background:rgba(255,255,255,.7);}
.dest-ponto.ativo{width:22px;border-radius:99px;background:var(--grad-brand);}

/* os links do menu (#canais, #agenda) param abaixo da barra do topo */
#canais,.ini-ancora{scroll-margin-top:92px;}
.ini-ancora{display:block;height:0;}
html{scroll-behavior:smooth;}
.dest-card{
  position:relative;border-radius:20px;overflow:hidden;min-height:330px;
  display:flex;flex-direction:column;justify-content:flex-end;
  text-decoration:none;color:inherit;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 26px 60px -30px #000;
  transition:transform .3s cubic-bezier(.3,1.2,.4,1), box-shadow .3s;
}
.dest-card:hover{transform:translateY(-4px);box-shadow:0 34px 70px -30px #000, 0 0 40px -18px rgba(168,85,247,.9);}
.dest-fundo{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transform:scale(1.04);transition:transform .5s ease;
}
/* A imagem e enviada por cada pessoa, entao pode vir clarissima. Um leve
   escurecido garante que o titulo e o nome continuem legiveis por cima,
   seja qual for a foto que a pessoa escolheu. */
.dest-fundo.com-img{filter:brightness(.82) saturate(1.05);}
.dest-card:hover .dest-fundo{transform:scale(1.09);}
.dest-veu{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,3,14,.15) 0%,rgba(6,3,14,.72) 58%,rgba(6,3,14,.95) 100%);
}
.dest-corpo{
  position:relative;z-index:2;padding:20px;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
.dest-etq{
  display:inline-flex;align-items:center;gap:7px;margin-bottom:10px;
  padding:5px 11px;border-radius:8px;font-size:10px;font-weight:900;letter-spacing:.16em;
  background:var(--grad-red);box-shadow:0 0 22px -4px rgba(239,68,68,.9);
}
.dest-etq.off{background:rgba(255,255,255,.12);box-shadow:none;color:var(--txt-2);}
.dest-etq .pip{width:7px;height:7px;border-radius:50%;background:#fff;animation:blink 1.2s infinite;}
.dest-titulo{
  font-family:var(--font-display);font-size:26px;font-weight:900;line-height:1.12;
  overflow-wrap:anywhere;
}
.dest-linha{display:flex;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap;}
.dest-dono{display:flex;align-items:center;gap:9px;min-width:0;}
.dest-dono .av{width:34px;height:34px;border-radius:50%;overflow:hidden;display:grid;
  place-items:center;font-weight:900;border:2px solid rgba(255,255,255,.5);flex:0 0 auto;}
.dest-dono .av img{width:100%;height:100%;object-fit:cover;}
.dest-dono b{font-size:14px;}
.dest-cat{
  padding:4px 10px;border-radius:8px;font-size:11px;font-weight:800;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);
}
.dest-gente{
  margin-left:auto;display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:800;color:#fff;
  padding:5px 11px;border-radius:99px;background:rgba(6,3,14,.6);
  border:1px solid rgba(255,255,255,.16);
}
.dest-gente svg{width:15px;height:15px;}

/* cartao lateral do destaque */
.dest-lado{display:flex;flex-direction:column;gap:14px;min-width:0;}
.dest-mini{
  position:relative;flex:1;border-radius:18px;overflow:hidden;min-height:110px;
  display:flex;align-items:flex-end;text-decoration:none;color:inherit;
  border:1px solid rgba(255,255,255,.12);transition:transform .25s, border-color .25s;
}
.dest-mini:hover{transform:translateY(-3px);border-color:rgba(168,85,247,.6);}
.dest-mini .dest-corpo{padding:12px;}
.dest-mini .dest-titulo{font-size:15px;}

/* =====================================================================
   GRADE DE CANAIS
   ===================================================================== */
.ini-bloco{display:flex;flex-direction:column;gap:12px;}
.ini-bloco-topo{display:flex;align-items:center;gap:12px;}
.ini-bloco-topo h2{
  font-family:var(--font-display);font-size:17px;font-weight:900;letter-spacing:.5px;
}
.ini-etq{
  padding:3px 10px;border-radius:99px;font-size:11px;font-weight:800;
  background:rgba(139,92,246,.22);color:#ddd6fe;border:1px solid rgba(168,85,247,.4);
}

.ini-grade{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
}
/* Sem desfoque de fundo: o card e coberto pela capa do canal, entao o
   que o desfoque mostrava era o proprio fundo da pagina atras de uma area
   opaca. Custo alto, efeito invisivel — e sao varios cards na tela ao
   mesmo tempo, cada um com a sua camada. */
.canal-card{
  border-radius:18px;overflow:hidden;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;
  background:linear-gradient(150deg,rgba(255,255,255,.085),rgba(255,255,255,.03)),
             rgba(18,12,36,.85);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 44px -26px #000;
  transition:transform .26s cubic-bezier(.3,1.2,.4,1), border-color .26s, box-shadow .26s;
  animation:cardEntra .5s cubic-bezier(.2,1.1,.35,1) backwards;
}
.canal-card:nth-child(2){animation-delay:.05s} .canal-card:nth-child(3){animation-delay:.1s}
.canal-card:nth-child(4){animation-delay:.15s} .canal-card:nth-child(5){animation-delay:.2s}
.canal-card:nth-child(n+6){animation-delay:.25s}
@keyframes cardEntra{from{opacity:0;transform:translateY(14px) scale(.97);}to{opacity:1;transform:none;}}
.canal-card:hover{
  transform:translateY(-5px);border-color:rgba(168,85,247,.55);
  box-shadow:0 26px 54px -26px #000, 0 0 34px -16px rgba(168,85,247,.9);
}

.card-capa{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0b0718;}
.card-capa .img{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transition:transform .45s ease;
}
.canal-card:hover .card-capa .img{transform:scale(1.07);}
.card-capa .veu{position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(6,3,14,.8));}
.card-vazio{position:absolute;inset:0;display:grid;place-items:center;opacity:.5;}
.card-vazio svg{width:44px;height:44px;}

.card-selo{
  position:absolute;top:9px;left:9px;display:inline-flex;align-items:center;gap:6px;
  padding:4px 9px;border-radius:7px;font-size:9.5px;font-weight:900;letter-spacing:.14em;
  background:var(--grad-red);box-shadow:0 0 18px -4px rgba(239,68,68,.9);
}
.card-selo .pip{width:6px;height:6px;border-radius:50%;background:#fff;animation:blink 1.2s infinite;}
.card-selo.off{background:rgba(8,5,20,.78);color:var(--txt-3);box-shadow:none;
  border:1px solid rgba(255,255,255,.14);}
.card-gente{
  position:absolute;right:9px;bottom:9px;display:inline-flex;align-items:center;gap:6px;
  padding:4px 9px;border-radius:7px;font-size:11px;font-weight:800;
  background:rgba(6,3,14,.72);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(6px);
}
.card-gente svg{width:13px;height:13px;}

.card-info{display:flex;gap:10px;padding:12px;min-width:0;}
.card-av{
  width:38px;height:38px;border-radius:50%;flex:0 0 auto;overflow:hidden;
  display:grid;place-items:center;font-weight:900;font-size:15px;
  border:2px solid rgba(255,255,255,.2);
}
.card-av img{width:100%;height:100%;object-fit:cover;}
.canal-card.no-ar .card-av{border-color:#ef4444;}
.card-txt{min-width:0;}
.card-titulo{font-size:13.5px;font-weight:800;line-height:1.3;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.card-dono{font-size:12px;color:var(--txt-3);margin-top:2px;font-weight:700;}
.card-tags{display:flex;gap:5px;flex-wrap:wrap;padding:0 12px 12px;}
.card-tag{
  padding:3px 9px;border-radius:7px;font-size:10.5px;font-weight:700;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);color:var(--txt-2);
}

/* =====================================================================
   AGENDA
   ===================================================================== */
.ini-agenda{display:grid;gap:11px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));}
.ini-live{
  display:flex;gap:11px;align-items:center;padding:12px;border-radius:15px;
  background:linear-gradient(150deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.1);transition:.22s;
}
.ini-live:hover{border-color:rgba(34,211,238,.45);transform:translateY(-2px);}
.ini-live .data{
  flex:0 0 auto;width:50px;text-align:center;padding:7px 0;border-radius:12px;
  background:var(--grad-brand);box-shadow:0 10px 20px -12px rgba(139,92,246,.9);
}
.ini-live .data .d{font-family:var(--font-display);font-size:19px;font-weight:900;line-height:1;}
.ini-live .data .m{font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:.85;}
.ini-live .info{min-width:0;}
.ini-live .t{font-size:13.5px;font-weight:800;line-height:1.3;overflow-wrap:anywhere;}
.ini-live .h{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--cyan);
  font-weight:700;margin-top:3px;}
.ini-live .h svg{width:13px;height:13px;}

/* =====================================================================
   RODAPE
   ===================================================================== */
.ini-rodape{border-radius:20px;padding:20px;margin-top:auto;}
.ini-rodape-linha{
  display:flex;align-items:flex-start;gap:24px;flex-wrap:wrap;
  padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.1);
}
.ini-rodape-marca{display:flex;align-items:center;gap:11px;}
.ini-rodape-marca b{font-family:var(--font-display);font-size:15px;font-weight:900;}
.ini-rodape-marca p{font-size:10.5px;letter-spacing:.14em;color:var(--txt-3);font-weight:700;margin-top:2px;}
.ini-rodape-links{display:flex;gap:6px;flex-wrap:wrap;}
.ini-rodape-links a{
  padding:7px 13px;border-radius:10px;text-decoration:none;
  color:var(--txt-2);font-size:13px;font-weight:700;transition:.18s;
}
.ini-rodape-links a:hover{background:rgba(139,92,246,.22);color:#fff;transform:translateY(-2px);}
.ini-rodape-redes{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;}
.rodape-rede{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);
  transition:.2s cubic-bezier(.3,1.4,.4,1);
}
.rodape-rede svg{width:18px;height:18px;}
.rodape-rede:hover{transform:translateY(-3px) scale(1.05);background:rgba(139,92,246,.3);
  border-color:rgba(168,85,247,.7);box-shadow:0 10px 22px -12px rgba(168,85,247,.95);}
.ini-rodape-fim{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:14px;
  font-size:12px;color:var(--txt-3);
}
.ini-rodape-fim .ini-online{margin-left:auto;}

/* =====================================================================
   TELAS MENORES
   ===================================================================== */
@media (max-width:1180px){
  .inicio{grid-template-columns:var(--ini-rail,236px) minmax(0,1fr);}
}
@media (max-width:900px){
  .inicio{display:block;padding:10px;}
  .ini-rail{
    position:fixed;top:0;left:0;bottom:0;z-index:300;width:min(290px,86vw);
    border-radius:0 20px 20px 0;height:100dvh;
    transform:translateX(-101%);transition:transform .3s cubic-bezier(.4,0,.2,1);
  }
  .inicio.menu-aberto .ini-rail{transform:none;}
  .ini-fundo{
    display:block;position:fixed;inset:0;z-index:290;background:rgba(4,2,10,.72);
    backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .3s;
  }
  .inicio.menu-aberto .ini-fundo{opacity:1;pointer-events:auto;}
  .ini-menu-btn{display:grid;}
  .ini-main{gap:12px;}
  .ini-topo{position:sticky;top:8px;}
  .dest-card,.dest-palco .dest-card{min-height:230px;}
  .dest-titulo{font-size:20px;}
  .dest-pontos{right:10px;top:10px;}
  .ini-grade{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;}
  .ini-rodape-redes{margin-left:0;}
  .ini-rodape-fim .ini-online{margin-left:0;}
}
@media (max-width:560px){
  .ini-topo-dir .ini-online{display:none;}
  .ini-grade{grid-template-columns:repeat(auto-fill,minmax(145px,1fr));}
  .card-info{padding:10px;gap:8px;}
  .card-av{width:32px;height:32px;font-size:13px;}
}

/* =====================================================================
   SEGUIR + SININHO
   ===================================================================== */
.ini-sino{
  position:relative;width:38px;height:38px;border-radius:12px;cursor:pointer;
  display:grid;place-items:center;flex:0 0 auto;
  background:rgba(139,92,246,.10);border:1px solid var(--line);color:var(--txt-2);
  transition:background .18s, border-color .18s, color .18s, transform .2s;
}
.ini-sino:hover{background:rgba(139,92,246,.24);border-color:rgba(168,85,247,.7);
  color:var(--txt);transform:translateY(-2px);}
.ini-sino.hidden{display:none;}
.ini-sino.tem-nova{color:#ffe066;border-color:rgba(255,214,0,.45);}
.ini-sino.tem-nova svg{animation:sinoBalanca 2.6s ease-in-out infinite;transform-origin:50% 18%;}
@keyframes sinoBalanca{
  0%,72%,100%{transform:rotate(0);}
  76%{transform:rotate(13deg);} 80%{transform:rotate(-11deg);}
  84%{transform:rotate(8deg);}  88%{transform:rotate(-5deg);} 92%{transform:rotate(0);}
}
/* A bolinha virou contador: mostra QUANTOS avisos novos existem. */
.sino-ponto{
  position:absolute;top:2px;right:0;min-width:17px;height:17px;padding:0 4px;
  border-radius:99px;display:grid;place-items:center;
  font-size:10px;font-weight:900;line-height:1;color:#fff;
  background:var(--red);box-shadow:0 0 0 2px var(--bg-1), 0 0 12px rgba(239,68,68,.9);
}
.sino-ponto.muitos{font-size:9px;letter-spacing:-.02em;}
.sino-ponto.hidden{display:none;}

.sino-painel{
  width:min(340px,calc(100vw - 24px));max-height:min(66vh,520px);overflow:auto;
  border-radius:16px;padding:8px;border:1px solid var(--line-strong);
  box-shadow:var(--shadow-lg);
  animation:sinoEntra .2s cubic-bezier(.2,1.1,.4,1);
}
@keyframes sinoEntra{from{opacity:0;transform:translateY(-8px) scale(.97);}to{opacity:1;transform:none;}}
.sino-topo{display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:6px 8px 10px;font-size:14px;}
.sino-item{
  display:flex;gap:10px;padding:10px;border-radius:12px;
  font-size:13.5px;line-height:1.45;color:var(--txt);text-decoration:none;
  transition:background .16s;
}
.sino-item:hover{background:rgba(139,92,246,.14);}
.sino-item.nova{background:rgba(168,85,247,.10);box-shadow:inset 2px 0 0 var(--purple-2);}
.sino-item .txt{display:block;}
.sino-item .t{display:block;font-size:11px;color:var(--txt-3);font-weight:700;margin-top:3px;}
.sino-vazio{display:grid;place-items:center;gap:10px;padding:28px 18px;text-align:center;
  color:var(--txt-3);font-size:13px;line-height:1.6;}

/* botao de seguir sobre a capa do cartao */
.card-seguir{
  position:absolute;left:10px;bottom:10px;z-index:3;
  display:inline-flex;align-items:center;gap:6px;
  height:28px;padding:0 11px;border-radius:999px;cursor:pointer;
  font-size:11.5px;font-weight:800;letter-spacing:.04em;
  color:#fff;background:rgba(10,6,24,.72);backdrop-filter:blur(10px);
  border:1px solid rgba(168,85,247,.55);
  opacity:0;transform:translateY(6px);
  transition:opacity .22s, transform .22s, background .2s, border-color .2s, color .2s;
}
.canal-card:hover .card-seguir,
.card-seguir:focus-visible,
.card-seguir.seguindo{opacity:1;transform:none;}
.card-seguir:hover{background:var(--grad-brand);border-color:transparent;}
.card-seguir.seguindo{
  background:rgba(6,26,20,.78);color:#6ee7b7;border-color:rgba(52,211,153,.55);
}
.card-seguir.seguindo:hover{
  background:rgba(40,8,12,.82);color:#fca5a5;border-color:rgba(239,68,68,.6);
}
.card-seguir:disabled{opacity:.55;cursor:default;}
.card-seguir svg{flex:0 0 auto;}
/* no celular o hover nao existe: o botao fica sempre visivel */
@media (hover:none){ .card-seguir{opacity:1;transform:none;} }
@media (max-width:520px){ .card-seguir span{display:none;} .card-seguir{padding:0 8px;} }

/* =====================================================================
   PREVIA AO VIVO NO BANNER — webcam e transmissao, mudas
   ===================================================================== */
.dest-previa{
  position:absolute;left:20px;right:20px;bottom:132px;z-index:3;
  display:none;align-items:flex-end;justify-content:space-between;gap:14px;
  pointer-events:none;
}
.dest-previa.ligada{display:flex;animation:previaEntra .5s cubic-bezier(.2,1.2,.35,1);}
@keyframes previaEntra{
  from{opacity:0;transform:translateY(14px) scale(.94);}
  to{opacity:1;transform:none;}
}

/* moldura dourada, a mesma linguagem da borda do player da live */
.previa-cam,.previa-tela{
  position:relative;overflow:hidden;border-radius:14px;background:#06040f;
  border:2px solid rgba(255,214,0,.85);
  box-shadow:0 0 0 1px rgba(255,214,0,.28),
             0 0 22px -4px rgba(255,205,0,.55),
             0 18px 40px -20px #000;
  animation:previaBrilha 3.6s ease-in-out infinite;
}
@keyframes previaBrilha{
  0%,100%{box-shadow:0 0 0 1px rgba(255,214,0,.28),
                     0 0 22px -4px rgba(255,205,0,.55),
                     0 18px 40px -20px #000;}
  50%    {box-shadow:0 0 0 1px rgba(255,232,110,.45),
                     0 0 34px -2px rgba(255,215,0,.8),
                     0 18px 40px -20px #000;}
}
.previa-cam.vazia,.previa-tela.vazia{display:none;}

.previa-cam{width:96px;aspect-ratio:1/1;flex:0 0 auto;}
.previa-tela{width:210px;aspect-ratio:16/9;flex:0 0 auto;margin-left:auto;}
.previa-video{width:100%;height:100%;object-fit:cover;display:block;background:#06040f;}

.previa-etq{
  position:absolute;left:5px;top:5px;z-index:2;
  padding:2px 6px;border-radius:6px;
  font-size:8.5px;font-weight:900;letter-spacing:.14em;
  background:rgba(6,3,14,.78);color:#ffe066;
  border:1px solid rgba(255,214,0,.4);
}
.previa-tela .previa-etq{background:rgba(239,68,68,.85);color:#fff;border-color:transparent;}

@media (max-width:900px){
  .dest-previa{left:14px;right:14px;bottom:auto;top:14px;}
  .previa-cam{width:62px;}
  .previa-tela{width:132px;}
  .previa-etq{font-size:7.5px;padding:1px 4px;}
}
@media (prefers-reduced-motion:reduce){
  .dest-previa.ligada,.previa-cam,.previa-tela{animation:none;}
}

/* =====================================================================
   BUSCA SO COM A LUPA NO CELULAR
   ===================================================================== */
@media (max-width:640px){
  .ini-busca{
    flex:0 0 auto;width:40px;
    transition:width .26s cubic-bezier(.3,1,.4,1);
  }
  .ini-busca .input{
    width:40px;height:40px;padding:0;border-radius:12px;
    /* o texto do campo fica escondido enquanto ele e so um botao */
    color:transparent;caret-color:transparent;cursor:pointer;
  }
  .ini-busca .input::placeholder{color:transparent;}
  .ini-busca-ic{
    right:50%;transform:translate(50%,-50%);opacity:1;
    pointer-events:auto;cursor:pointer;
  }

  /* Fechada, a barra tem que caber TODA numa linha so. Ela vinha
     quebrando em duas mesmo sem a busca aberta, porque a plaquinha da
     conta com nome e papel sozinha comia metade da largura do celular.
     Aqui ela vira so a foto — o nome e o papel a pessoa ve ao tocar. */
  .ini-topo{
    position:sticky;top:8px;flex-wrap:wrap;row-gap:10px;
    gap:8px;padding:9px 10px;
  }
  .ini-eu{padding:4px;gap:0;}
  .ini-eu .u-txt,
  .ini-eu .nome,
  .ini-eu .papel{display:none;}
  .ini-topo-dir{gap:8px;}
  /* a seta do menu do aparelho nao cabe junto: fica so o icone */
  .ini-topo-dir .ap-btn{padding:0 9px;}

  .ini-busca.aberta{
    order:10;                 /* joga pro fim: vira a linha de baixo */
    flex:1 1 100%;width:auto;
  }
  .ini-busca.aberta .input{
    width:100%;height:42px;padding:0 44px 0 16px;
    color:var(--txt);caret-color:var(--purple-2);cursor:text;
  }
  .ini-busca.aberta .input::placeholder{color:var(--txt-3);}
  .ini-busca.aberta .ini-busca-ic{right:14px;transform:translateY(-50%);}
}

/* janelinha de aviso da inicial */
.ini-modal-fundo{
  position:fixed;inset:0;z-index:500;display:grid;place-items:center;padding:18px;
  background:rgba(4,2,10,.72);backdrop-filter:blur(4px);
  animation:iniFade .2s ease-out;
}
@keyframes iniFade{from{opacity:0}to{opacity:1}}
.ini-modal{
  width:min(460px,100%);border-radius:20px;padding:22px;
  border:1px solid var(--line-strong);box-shadow:var(--shadow-lg);
  animation:iniSobe .26s cubic-bezier(.2,1.2,.4,1);
}
@keyframes iniSobe{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
.ini-modal h3{font-family:var(--font-display);}

/* o painel do sino, centralizado no celular */
@media (max-width:640px){
  .sino-painel{width:min(340px,calc(100vw - 20px));}
}

/* o texto das paginas do rodape dentro da janelinha */
.pagina-rodape{
  max-height:min(60vh,520px);overflow-y:auto;
  font-size:14px;line-height:1.75;color:var(--txt-2);
}
.pagina-rodape h3{font-size:16px;margin:16px 0 8px;color:var(--txt);}
.pagina-rodape h3:first-child{margin-top:0;}
.pagina-rodape p{margin:0 0 10px;}
.pagina-rodape ul{margin:0 0 12px;padding-left:20px;}
.pagina-rodape li{margin-bottom:6px;}
.pagina-rodape a{color:#c4b5fd;text-decoration:underline;}
.pagina-rodape a:hover{color:#ddd6fe;}