/* Karaokê Brasil · banner rotativo (home) e peças animadas do perfil de cantor (v34) */
/* ===== v34: banner rotativo do topo (4 destaques) ===== */
.hero-car{position:relative;overflow:hidden;background:var(--bg);isolation:isolate}
.hc-trilho{display:grid}
.hc-slide{grid-area:1/1;min-width:0;position:relative;display:flex;align-items:center;transform:translateX(100%);visibility:hidden;
  transition:transform .8s cubic-bezier(.72,0,.22,1),visibility 0s linear .8s;overflow:hidden}
.hc-slide.on{transform:none;visibility:visible;transition:transform .8s cubic-bezier(.72,0,.22,1)}
.hc-slide.esq{transform:translateX(-100%)}
.hc-slide.sem-anim{transition:none!important}
.hc-slide>.hero{width:100%;padding-bottom:104px}
.hc-in{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding-block:70px 108px;width:100%}
.hc-kick{display:inline-flex;align-items:center;gap:.55rem;font-weight:800;text-transform:uppercase;letter-spacing:.16em;font-size:.78rem}
.hc-novo{background:#3ee8a0;color:#05231a;border-radius:999px;padding:.2rem .6rem;letter-spacing:.1em;font-size:.7rem;animation:hcBrilho 2.4s ease-in-out infinite}
.hc-tit{font-size:clamp(2.9rem,6.2vw,5.3rem);margin-top:.9rem;line-height:.92}
.hc-lead{font-size:1.18rem;line-height:1.55;margin:1.2rem 0 0;max-width:40ch}
.hc-cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.8rem}
.hc-cta .btn{padding:.95rem 1.5rem;font-size:1.04rem}
.hc-b-gold{background:#ffd23f;color:#1a1403;box-shadow:0 12px 34px rgba(255,210,63,.38);animation:hcPulso 2.2s ease-in-out infinite}
.hc-b-gold:hover{background:#ffe066}
.hc-b-linha{border-color:#ffffff;color:#ffffff;background:transparent}
.hc-b-linha:hover{background:#ffffff;color:#0d1117}
.hc-b-escuro{background:#121821;color:#ffffff;box-shadow:0 12px 30px rgba(40,25,0,.35);animation:hcPulso2 2.2s ease-in-out infinite}
.hc-b-escuro:hover{background:#000}
.hc-b-linha-esc{border-color:#1a1403;color:#1a1403;background:transparent}
.hc-b-linha-esc:hover{background:#1a1403;color:#f5c518}
.hc-chips{list-style:none;padding:0;margin:1.4rem 0 0;display:flex;flex-wrap:wrap;gap:8px}
.hc-chips li{font-weight:700;font-size:.88rem;padding:.42rem .8rem;border-radius:999px;background:#183f9a;border:1px solid #3463cf;color:#eef3ff}
.hc-art{position:relative;display:flex;justify-content:center;align-items:center;min-height:440px}

/* azul: perfil de cantor */
.hc-azul{color:#fff;background:radial-gradient(760px 520px at 78% 24%,#2b5fe0 0,transparent 62%),radial-gradient(620px 420px at 6% 96%,#0f6aa0 0,transparent 60%),linear-gradient(160deg,#0e2e7c 0%,#081a4a 100%)}
.hc-azul .hc-kick{color:#ffd23f}.hc-azul .hc-am{color:#ffd23f}.hc-azul .hc-lead{color:#e3ebff}
.hc-luz{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.hc-luz i{position:absolute;top:-30%;width:260px;height:150%;transform-origin:50% 0;background:linear-gradient(180deg,rgba(255,224,102,.30),rgba(255,224,102,0) 70%);filter:blur(6px);border-radius:0 0 50% 50%}
.hc-luz i:nth-child(1){left:12%;animation:hcFoco 9s ease-in-out infinite}
.hc-luz i:nth-child(2){left:52%;background:linear-gradient(180deg,rgba(62,232,160,.26),rgba(62,232,160,0) 70%);animation:hcFoco 11s ease-in-out -3s infinite}
.hc-luz i:nth-child(3){left:80%;animation:hcFoco 10s ease-in-out -6s infinite}

/* celular desenhado */
.hc-cel{position:relative;z-index:2;width:262px;border-radius:38px;background:#0b1118;border:9px solid #1b2230;box-shadow:0 30px 70px rgba(0,0,0,.5),0 0 0 2px #2c3647;padding:16px 14px 18px;color:#f4f7fa;text-align:left}
.hc-cel::before{content:"";position:absolute;top:7px;left:50%;width:70px;height:6px;margin-left:-35px;border-radius:6px;background:#1b2230}
.hc-cel-top{display:flex;flex-direction:column;padding:10px 4px 12px}.hc-cel-top b{font-size:.95rem}.hc-cel-top small{color:#93a1b2;font-size:.74rem}
.hc-vez{border-radius:18px;padding:14px 14px 12px;background:linear-gradient(140deg,#f5c518,#ff9f1c);color:#1a1403;margin-bottom:10px}
.hc-vez small{display:block;font-weight:800;font-size:.66rem;letter-spacing:.14em}
.hc-vez b{display:block;font-family:'Bebas Neue','Bebas Fallback',Impact,sans-serif;font-weight:400;font-size:2.6rem;line-height:1}
.hc-eq{display:flex;align-items:flex-end;gap:4px;height:26px;margin-top:4px}
.hc-eq i{width:7px;border-radius:3px;background:#1a1403;height:30%;animation:hcEq 1s ease-in-out infinite alternate}
.hc-eq i:nth-child(2){animation-delay:-.4s}.hc-eq i:nth-child(3){animation-delay:-.7s}.hc-eq i:nth-child(4){animation-delay:-.2s}.hc-eq i:nth-child(5){animation-delay:-.9s}.hc-eq i:nth-child(6){animation-delay:-.5s}.hc-eq i:nth-child(7){animation-delay:-.1s}
.hc-li{display:flex;align-items:center;gap:10px;background:#141c26;border:1px solid #253141;border-radius:13px;padding:10px 12px;font-weight:700;font-size:.86rem;margin-top:7px}
.hc-li span{font-size:1.05rem}.hc-li em{margin-left:auto;font-style:normal;color:#93a1b2;font-size:.78rem}
.hc-li em.hc-novo-n{background:#3ee8a0;color:#05231a;border-radius:999px;padding:0 .45rem;font-weight:800}
.hc-qr{margin-top:12px;display:flex;align-items:center;justify-content:center;gap:10px;background:#fff;color:#0d1117;border-radius:14px;padding:11px;font-weight:800}
.hc-qr-ic{width:22px;height:22px;background:conic-gradient(#0d1117 0 25%,#fff 0 50%,#0d1117 0 75%,#fff 0) 0 0/11px 11px;border:2px solid #0d1117;border-radius:3px}
.hc-emo{position:absolute;z-index:3;font-size:2rem;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35));animation:hcSobeEmo 5s ease-in infinite;opacity:0}
.hc-emo.e1{left:14%;bottom:18%}.hc-emo.e2{right:12%;bottom:30%;animation-delay:1.2s}.hc-emo.e3{left:20%;bottom:44%;animation-delay:2.5s}.hc-emo.e4{right:18%;bottom:10%;animation-delay:3.6s}
.hc-nota{position:absolute;z-index:1;font-size:2.4rem;color:#ffd23f;opacity:.75;animation:hcNota 6s ease-in-out infinite}
.hc-nota.n1{left:6%;top:14%}.hc-nota.n2{right:6%;top:22%;color:#3ee8a0;animation-delay:-2s}.hc-nota.n3{right:26%;top:4%;animation-delay:-4s;font-size:1.8rem}
.hc-flutua{animation:hcFlutua 6s ease-in-out infinite}

/* verde: cidades */
.hc-verde{color:#fff;background:radial-gradient(700px 480px at 85% 30%,#18a374 0,transparent 62%),linear-gradient(155deg,#0b6a4a 0%,#074631 100%)}
.hc-verde::before{content:"";position:absolute;inset:0;z-index:1;background-image:radial-gradient(#ffffff 1.2px,transparent 1.3px);background-size:24px 24px;opacity:.08;pointer-events:none}
.hc-verde .hc-kick{color:#ffd84a}.hc-verde .hc-am{color:#ffd84a}.hc-verde .hc-lead{color:#e6fff4}
.hc-mapa{position:relative;width:min(440px,100%);height:380px;border-radius:46% 54% 44% 56%/52% 40% 60% 48%;background:radial-gradient(#9ff5cf 1.6px,transparent 1.8px) 0 0/16px 16px,#0d5c41;border:2px solid #2c9a72;box-shadow:inset 0 0 60px rgba(0,0,0,.25),0 30px 60px rgba(0,30,18,.35)}
.hc-pin{position:absolute;width:20px;height:20px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#ffd84a;box-shadow:0 4px 10px rgba(0,0,0,.35)}
.hc-pin::after{content:"";position:absolute;inset:-12px;border-radius:50%;border:3px solid #ffd84a;animation:hcOnda 2.2s ease-out infinite;opacity:0}
.hc-pin.p1{left:62%;top:18%}.hc-pin.p2{left:74%;top:34%;background:#ff5a5a}.hc-pin.p2::after{border-color:#ff5a5a;animation-delay:.5s}
.hc-pin.p3{left:52%;top:52%;animation-delay:1s}.hc-pin.p3::after{animation-delay:1s}.hc-pin.p4{left:38%;top:70%}.hc-pin.p4::after{animation-delay:1.5s}.hc-pin.p5{left:30%;top:30%}.hc-pin.p5::after{animation-delay:.8s}
.hc-vivo{position:absolute;left:-6%;bottom:6%;display:flex;align-items:center;gap:12px;background:#fff;color:#141a22;border-radius:16px;padding:12px 14px;box-shadow:0 18px 40px rgba(0,0,0,.35);max-width:290px}
.hc-vivo b{display:block;font-size:.95rem}.hc-vivo small{color:#5b6675;font-size:.78rem}.hc-vivo em{font-style:normal;margin-left:auto;background:#0e9f68;color:#fff;font-weight:800;font-size:.76rem;padding:.35rem .6rem;border-radius:9px;white-space:nowrap}
.hc-dot{width:12px;height:12px;border-radius:50%;background:#ff3b3b;flex:none;animation:kb-pulse 1.4s ease-in-out infinite}

/* ouro: anuncie */
.hc-ouro{color:#1a1403;background:repeating-linear-gradient(-45deg,rgba(255,255,255,.07) 0 22px,rgba(255,255,255,0) 22px 44px),radial-gradient(700px 480px at 85% 20%,#ffe680 0,transparent 60%),linear-gradient(135deg,#f9d230 0%,#f5c518 50%,#efaf00 100%)}
.hc-ouro .hc-kick{color:#0b5a3b}.hc-ouro .hc-lead{color:#2b2306}
.hc-cel-claro{background:#ffffff;color:#141a22;border-color:#121821}
.hc-cel-claro::before{background:#121821}.hc-cel-claro .hc-cel-top small{color:#5b6675}
.hc-fila{display:grid;gap:9px;margin:4px 0 14px}
.hc-ban{border-radius:12px;background:#0c2766;color:#ffd23f;padding:10px 12px;text-align:center;animation:hcBan 1.8s ease-in-out infinite;position:relative}
.hc-ban small{display:block;color:#bccbee;font-size:.6rem;letter-spacing:.14em;font-weight:800}.hc-ban b{font-family:'Bebas Neue','Bebas Fallback',Impact,sans-serif;font-weight:400;font-size:1.6rem;letter-spacing:.04em}
.hc-mega{position:absolute;z-index:3;right:8%;top:10%;font-size:4.2rem;filter:drop-shadow(0 10px 16px rgba(90,60,0,.35));animation:hcMega 2.6s ease-in-out infinite}

/* entrada de cada destaque */
html.anim .hc-slide.on .hc-txt>*{animation:hcEntraTxt .7s cubic-bezier(.2,.8,.2,1) both}
html.anim .hc-slide.on .hc-txt>*:nth-child(2){animation-delay:.08s}html.anim .hc-slide.on .hc-txt>*:nth-child(3){animation-delay:.16s}
html.anim .hc-slide.on .hc-txt>*:nth-child(4){animation-delay:.24s}html.anim .hc-slide.on .hc-txt>*:nth-child(5){animation-delay:.32s}
html.anim .hc-slide.on .hc-art{animation:hcEntraArte .9s cubic-bezier(.2,.8,.2,1) .15s both}

/* navegação */
.hc-nav{position:absolute;left:0;right:0;bottom:24px;z-index:6;pointer-events:none}
.hc-nav .wrap{display:flex;align-items:center;gap:10px}
.hc-tabs{display:flex;gap:8px;flex-wrap:wrap;pointer-events:auto}
.hc-tab{position:relative;overflow:hidden;border:1px solid #2c3647;background:#0e141c;color:#d3dbe4;font:700 .88rem/1 'Barlow','Barlow Fallback',sans-serif;padding:.62rem 1rem;border-radius:999px;cursor:pointer;min-height:40px}
.hc-tab:hover{border-color:#3ee8a0}
.hc-tab.on{background:#ffffff;color:#0d1117;border-color:#ffffff}
.hc-tab i{position:absolute;left:0;bottom:0;height:3px;width:0;background:#0e9f68}
.hc-tab.on.roda i{animation:hcProg var(--hc-dur,8s) linear forwards}
.hc-tab .curto{display:none}
.hc-ctl{display:flex;gap:8px;pointer-events:auto;margin-left:6px}
.hc-nav .hc-seta-esq{pointer-events:auto}
.hc-seta{width:42px;height:42px;border-radius:50%;border:1px solid #2c3647;background:#0e141c;color:#f4f7fa;font-size:1.1rem;cursor:pointer;display:grid;place-items:center;flex:none}
.hc-seta:hover{border-color:#3ee8a0;color:#3ee8a0}
/* setas laterais (telas largas); nas menores, as setas ficam ao lado das abas */
.hc-lado{position:absolute;top:calc(50% - 30px);z-index:7;width:54px;height:54px;border-radius:50%;border:1px solid #3a4658;background:#0e141c;color:#fff;font-size:1.9rem;line-height:1;cursor:pointer;display:none;place-items:center;box-shadow:0 10px 26px rgba(0,0,0,.45);transition:transform .15s,border-color .15s}
.hc-lado:hover{transform:scale(1.08);border-color:#ffd23f;color:#ffd23f}
.hc-lado:focus-visible{outline:3px solid #3ee8a0;outline-offset:3px}
.hc-lado.hc-prev{left:18px}.hc-lado.hc-next{right:18px}
@media(min-width:1280px){.hc-lado{display:grid}.hc-nav .hc-seta{display:none}}
.hc-ctl button{width:42px;height:42px;border-radius:50%;border:1px solid #2c3647;background:#0e141c;color:#f4f7fa;font-size:1rem;cursor:pointer;display:grid;place-items:center}
.hc-ctl button:hover{border-color:#3ee8a0;color:#3ee8a0}
.hc-tab:focus-visible,.hc-ctl button:focus-visible,.hc-cta .btn:focus-visible{outline:3px solid #3ee8a0;outline-offset:3px}

@keyframes hcEntraTxt{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes hcEntraArte{from{opacity:0;transform:translateY(30px) scale(.92) rotate(-3deg)}to{opacity:1;transform:none}}
@keyframes hcFlutua{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(1deg)}}
@keyframes hcEq{from{height:22%}to{height:100%}}
@keyframes hcSobeEmo{0%{opacity:0;transform:translateY(20px) scale(.6)}15%{opacity:1;transform:translateY(0) scale(1.1)}70%{opacity:1}100%{opacity:0;transform:translateY(-140px) scale(.9)}}
@keyframes hcNota{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-18px) rotate(8deg)}}
@keyframes hcFoco{0%,100%{transform:rotate(-18deg)}50%{transform:rotate(18deg)}}
@keyframes hcPulso{0%,100%{box-shadow:0 12px 34px rgba(255,210,63,.38),0 0 0 0 rgba(255,210,63,.55)}50%{box-shadow:0 12px 34px rgba(255,210,63,.38),0 0 0 10px rgba(255,210,63,0)}}
@keyframes hcPulso2{0%,100%{box-shadow:0 12px 30px rgba(40,25,0,.35),0 0 0 0 rgba(18,24,33,.45)}50%{box-shadow:0 12px 30px rgba(40,25,0,.35),0 0 0 10px rgba(18,24,33,0)}}
@keyframes hcBrilho{0%,100%{filter:brightness(1)}50%{filter:brightness(1.25)}}
@keyframes hcOnda{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.6)}}
@keyframes hcBrilhoFila{to{background-position:-200% 0}}
@keyframes hcBan{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes hcMega{0%,100%{transform:rotate(-12deg) scale(1)}50%{transform:rotate(6deg) scale(1.12)}}
@keyframes hcProg{from{width:0}to{width:100%}}

@media (max-width:900px){
  .hc-in{grid-template-columns:1fr;gap:14px;padding-block:44px 100px}
  .hc-art{min-height:320px}
  .hc-cel{width:220px;padding:12px 11px 14px;border-width:7px}
  .hc-vez b{font-size:2.1rem}.hc-li{padding:8px 10px;font-size:.8rem}
  .hc-mapa{height:300px}.hc-vivo{left:0}
  .hc-tab{padding:.55rem .8rem;font-size:.84rem}
}
@media (max-width:600px){
  .hc-tab .longo{display:none}.hc-tab .curto{display:inline}
  .hc-nav{bottom:18px}.hc-nav .wrap{gap:6px}
  .hc-tabs{flex:1;flex-wrap:nowrap;gap:6px;min-width:0}
  .hc-tabs{justify-content:center;align-items:center;gap:10px}
  .hc-tab{flex:none;width:26px;height:28px;min-height:0;padding:0;border:0;background:transparent;display:grid;place-items:center;transition:width .25s}
  .hc-tab::after{content:"";width:12px;height:12px;border-radius:999px;background:#5d6b7e;transition:width .25s,background .25s}
  .hc-tab span{display:none!important}.hc-tab i{display:none}
  .hc-tab.on{width:38px;background:transparent}.hc-tab.on::after{width:30px;background:#ffd23f}
  .hc-ctl{margin-left:0}.hc-ctl button,.hc-nav .hc-seta{width:36px;height:36px}
  .hc-tit{font-size:clamp(2.5rem,12vw,3.3rem)}
  .hc-lead{font-size:1.04rem}
  .hc-cta .btn{width:100%;justify-content:center;white-space:normal;text-align:center}
  .hc-art{min-height:300px;transform:scale(.92)}
  .hc-mega{font-size:3rem}.hc-emo{font-size:1.6rem}
  .hc-slide>.hero{padding-bottom:96px}
}
@media (prefers-reduced-motion:reduce){
  .hc-slide,.hc-slide.on{transition:none}
  .hc-art *,.hc-b-gold,.hc-b-escuro,.hc-novo,.hc-luz i,.hc-flutua{animation:none!important}
  .hc-emo{opacity:1}
}
.hc-dot-ok{background:#0e9f68;animation:none}
/* fila desenhada no celular do destaque Anuncie (do jeito que é no sistema) */
.hc-fi{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;background:#f3f5f8;border-radius:12px;padding:8px 12px;color:#141a22}
.hc-fi em{grid-row:span 2;font-style:normal;width:24px;height:24px;border-radius:50%;background:#141a22;color:#fff;font-weight:800;font-size:.78rem;display:grid;place-items:center}
.hc-fi b{font-size:.9rem;line-height:1.1}.hc-fi span{font-size:.74rem;color:#5b6675;grid-column:2}
.hc-fi-on{display:block;background:#141a22;color:#fff;padding:10px 12px}.hc-fi-on small{display:block;color:#3ee8a0;font-size:.6rem;font-weight:800;letter-spacing:.12em}.hc-fi-on b{display:block;font-size:1.05rem;margin-top:2px}.hc-fi-on span{color:#c9d3dd}