/* ============================================================
   10k-encontros.css — visual compartilhado dos apps de encontros ao vivo
   (Pod10K e En10K). Fica em https://meta10k.com.br/css/ e os dois apps usam o MESMO arquivo.

   Cada app define só a sua cor, num <style> curto no index.html:
     :root{ --acc:#ffcc00; --acc-rgb:255,204,0; --acc-txt:#111; }   Pod10K
     :root{ --acc:#3B82F6; --acc-rgb:59,130,246; --acc-txt:#0B0D12; } En10K
   --acc-rgb é a mesma cor em R,G,B (tons translúcidos); --acc-txt é o texto sobre ela.
   Biblioteca 10K: versões em _compartilhado/LEIA-ME.md
   ============================================================ */
:root{
  --acc:#ffcc00; --acc-rgb:255,204,0; --acc-txt:#111;
  --bg:#0b0d12; --bg2:#12151d; --card:#161a24; --line:#232838; --txt:#eef1f7; --mut:#9aa3b8;
  --acc2:#ff3d57; --ok:#22c55e; --r:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--txt);font:15px/1.5 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 16px}
button{font:inherit;cursor:pointer}
/* header */
header.top{position:sticky;top:0;z-index:30;background:rgba(11,13,18,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;gap:12px;height:60px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo b{font-family:"Bebas Neue",sans-serif;font-size:30px;letter-spacing:1px;line-height:1}
.logo b span{color:var(--acc)}
.logo small{color:var(--mut);font-size:12px;border-left:1px solid var(--line);padding-left:10px;line-height:1.2}
.top .sp{flex:1}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--bg2);color:var(--txt);padding:10px 14px;border-radius:999px;font-weight:600;font-size:14px;text-decoration:none;white-space:nowrap;transition:.15s}
.btn:hover{border-color:#3a4157;transform:translateY(-1px)}
.btn.pri{background:var(--acc);color:var(--acc-txt);border-color:var(--acc)}
.btn.red{background:#c81e3a;border-color:#c81e3a;color:#fff}   /* contraste AA 5,7:1 (o --acc2 #ff3d57 dava 3,5:1 com branco) */
.btn.wa{background:#15803d;border-color:#15803d;color:#fff}   /* contraste AA 5:1 */
.btn svg{width:18px;height:18px;flex:none}
.btn.sala{background:#fff;color:#111;border-color:#fff}
.btn.sala.big{justify-content:center;border-radius:14px;padding:14px 18px;font-size:18px;letter-spacing:.5px;box-shadow:0 8px 30px rgba(255,255,255,.12)}
.btn.sala.big svg{width:24px;height:24px}
.btn.sala.big span{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.btn.sala.big small{font-size:12px;font-weight:600;color:#555;letter-spacing:0}
.btn.sala.big:hover{box-shadow:0 10px 36px rgba(var(--acc-rgb),.35)}
/* hero */
.hero{padding:28px 0 8px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:20px;align-items:start}
.player{position:relative;width:100%;border-radius:var(--r);overflow:hidden;background:#000;aspect-ratio:16/9;border:1px solid var(--line)}
.player iframe,.player img{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.player .ov{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:18px;background:linear-gradient(180deg,rgba(0,0,0,.05) 30%,rgba(0,0,0,.85));cursor:pointer}
.player .ov h3{margin:6px 0 0;font-size:18px;line-height:1.3}
.play{width:68px;height:68px;border-radius:50%;background:var(--acc2);display:grid;place-items:center;position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);box-shadow:0 0 0 10px rgba(255,61,87,.2);transition:.2s}
.player .ov:hover .play{transform:translate(-50%,-50%) scale(1.08)}
.play svg{width:28px;height:28px;fill:#fff;margin-left:4px}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.12);width:max-content}
.pill.live{background:var(--acc2)}
.dot{width:8px;height:8px;border-radius:50%;background:#fff;animation:pulse 1.4s infinite}
@keyframes pulse{50%{opacity:.25}}
.next{background:linear-gradient(160deg,#1a1f2c,#11141c);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:14px}
.next h1{font-family:"Bebas Neue",sans-serif;font-weight:400;font-size:44px;line-height:.95;margin:0;letter-spacing:.5px}
.next h1 em{font-style:normal;color:var(--acc)}
.next p{margin:0;color:var(--mut)}
.count{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.count div{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 4px;text-align:center}
.count b{display:block;font-family:"Bebas Neue",sans-serif;font-size:34px;line-height:1;color:var(--acc)}
.count span{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.5px}
.when{font-weight:700;font-size:16px}
.ctas{display:flex;flex-wrap:wrap;gap:8px}
.agenda{display:flex;flex-wrap:wrap;gap:6px}
.agenda span{font-size:12px;color:var(--mut);border:1px dashed var(--line);border-radius:999px;padding:3px 10px}
/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:20px 0 6px}
.stat{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.stat b{font-family:"Bebas Neue",sans-serif;font-size:34px;line-height:1;display:block}
.stat span{color:var(--mut);font-size:13px}
/* filters */
.tools{position:sticky;top:60px;z-index:20;background:var(--bg);padding:14px 0 10px;border-bottom:1px solid var(--line)}
.row{display:flex;gap:10px;align-items:center}
.search{flex:1;position:relative}
.search input{width:100%;background:var(--bg2);border:1px solid var(--line);color:var(--txt);border-radius:12px;padding:13px 40px 13px 42px;font:inherit;font-size:16px;outline:none}
.search input:focus{border-color:var(--acc)}
.search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;stroke:var(--mut)}
.search .clr{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--mut);font-size:20px;padding:4px 8px;display:none}
select{background:var(--bg2);color:var(--txt);border:1px solid var(--line);border-radius:12px;padding:13px 12px;font:inherit;font-size:14px}
.chips{display:flex;gap:8px;overflow-x:auto;padding:12px 0 2px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border:1px solid var(--line);background:var(--bg2);color:var(--txt);padding:7px 13px;border-radius:999px;font-size:13px;font-weight:600}
.chip i{font-style:normal;color:var(--mut);font-weight:500;margin-left:4px}
.chip.on{background:var(--acc);color:var(--acc-txt);border-color:var(--acc)}
.chip.on i{color:#333}
.chip.type{border-style:dashed}
.chip.type.on{background:#fff;border-color:#fff;border-style:solid}
.meta{display:flex;justify-content:space-between;align-items:center;color:var(--mut);font-size:13px;padding-top:8px}
.meta button{background:none;border:0;color:var(--acc);font-weight:600;padding:0}
/* grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:18px;padding:20px 0 40px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;cursor:pointer;transition:.18s}
.card:hover{transform:translateY(-3px);border-color:#384058}
.thumb{position:relative;aspect-ratio:16/9;background:#000}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ed{position:absolute;left:10px;top:10px;font-family:"Bebas Neue",sans-serif;font-size:22px;line-height:1;background:var(--acc);color:var(--acc-txt);padding:5px 9px 3px;border-radius:8px}
.ed.alt{background:#fff;font-family:Inter;font-size:11px;font-weight:800;text-transform:uppercase;padding:6px 8px;letter-spacing:.3px}
.dur{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.8);font-size:12px;font-weight:600;padding:2px 6px;border-radius:5px}
.new{position:absolute;right:10px;top:10px;background:#c81e3a;font-size:11px;font-weight:800;padding:4px 8px;border-radius:6px;text-transform:uppercase}
.body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px;flex:1}
.body h4{margin:0;font-size:15px;line-height:1.35;font-weight:700}
.body .info{color:var(--mut);font-size:12.5px;display:flex;gap:10px;flex-wrap:wrap}
.tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:auto}
.tag{font-size:11px;font-weight:600;color:#c9d0e0;background:#20263a;padding:3px 8px;border-radius:6px;border:0}
.tag:hover{background:#2c3550}
mark{background:rgba(var(--acc-rgb),.3);color:inherit;border-radius:3px}
.empty{grid-column:1/-1;text-align:center;padding:50px 10px;color:var(--mut)}
.empty b{display:block;color:var(--txt);font-size:18px;margin-bottom:6px}
/* modal */
.modal{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.82);display:none;align-items:center;justify-content:center;padding:16px}
.modal.on{display:flex}
.mbox{width:min(980px,100%);max-height:100%;overflow:auto;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r)}
.mbox .player{border:0;border-radius:0}
.mbody{padding:16px 18px 20px;display:flex;flex-direction:column;gap:10px}
.mbody h2{margin:0;font-size:19px;line-height:1.3}
.x{position:fixed;top:12px;right:14px;background:rgba(255,255,255,.12);border:0;color:#fff;width:42px;height:42px;border-radius:50%;font-size:22px;z-index:51}
.offer{position:fixed;left:50%;bottom:16px;z-index:45;width:min(760px,calc(100% - 32px));transform:translate(-50%,140%);transition:transform .45s cubic-bezier(.2,.9,.3,1.2);background:#151925;border:1px solid #2e3550;border-radius:18px;padding:14px 16px;display:flex;align-items:center;gap:14px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.offer.on{transform:translate(-50%,0)}
.offer .txt{flex:1;min-width:0}
.offer .txt b{display:block;font-size:15px}
.offer .txt span{color:var(--mut);font-size:13px}
.offer .acts{display:flex;gap:8px;flex-wrap:wrap}
.offer .btn.pri{animation:glow 2s infinite}
@keyframes glow{50%{box-shadow:0 0 0 6px rgba(var(--acc-rgb),.25)}}
.offer .cl{position:absolute;top:-10px;right:-10px;width:28px;height:28px;border-radius:50%;border:1px solid #2e3550;background:#151925;color:var(--mut);font-size:16px;line-height:1}
body.offer-on footer{padding-bottom:130px}
@media (max-width:640px){.offer{flex-direction:column;align-items:stretch;text-align:center}.offer .acts{flex-direction:column}.offer .acts .btn{justify-content:center}}
.en{margin-top:20px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:linear-gradient(120deg,#13213a,#121826);border:1px solid #24345a;border-radius:var(--r);padding:16px 20px}
.en-l{display:flex;flex-direction:column;gap:4px;flex:1;min-width:200px}
.en-l b{font-size:18px}
.en-l span:last-child{color:var(--mut);font-size:14px}
.en .pill{background:#2a4b8d}
.en .pill.live{background:var(--acc2)}
.count.sm{grid-template-columns:repeat(4,64px)}
.count.sm b{font-size:26px}
.en-a{display:flex;gap:8px;flex-wrap:wrap}
.cmt{padding:10px 0 40px}
.cmt h2{font-family:"Bebas Neue",sans-serif;font-weight:400;font-size:36px;margin:0;letter-spacing:.5px}
.cmt h2 em{font-style:normal;color:var(--acc)}
.cmt>p{color:var(--mut);margin:4px 0 16px}
.cmt-box{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:18px;min-height:120px}
.cmt-fb{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.cmt-fb p{margin:0;color:var(--mut)}
#mCmt{border-top:1px solid var(--line);margin-top:6px;padding-top:12px}
#mCmt .btn{margin-bottom:10px}
#disqus_thread{color-scheme:normal}
.btn.ghost-live{background:var(--acc2)}
.vs{padding:30px 0 60px;max-width:860px}
.vs h1{font-family:"Bebas Neue",sans-serif;font-weight:400;font-size:52px;margin:0;line-height:1}
.vs h1 em{font-style:normal;color:var(--acc)}
.vs .lead{color:var(--mut);margin:6px 0 22px}
.vs .cur{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}
.vs .cur div{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:12px 16px}
.vs .cur b{display:block;font-family:"Bebas Neue",sans-serif;font-size:30px;line-height:1;color:var(--acc)}
.vs .cur span{font-size:12px;color:var(--mut)}
.vs h2{font-size:15px;text-transform:uppercase;letter-spacing:.6px;color:var(--mut);margin:30px 0 12px}
.rel{border-left:2px solid var(--line);padding:0 0 22px 20px;position:relative}
.rel:before{content:"";position:absolute;left:-7px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--line);border:2px solid var(--bg)}
.rel.now:before{background:var(--acc)}
.rel h3{margin:0;font-size:18px;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.rel h3 small{color:var(--mut);font-weight:500;font-size:13px}
.rel h3 .tagv{font-size:11px;background:var(--acc);color:var(--acc-txt);padding:2px 8px;border-radius:6px;font-weight:800}
.rel ul{margin:8px 0 0;padding-left:18px}
.rel li{margin:3px 0}
.rel li.fix::marker{content:"🐞 "}
.rel li.nv::marker{content:"✨ "}
.pend{background:var(--bg2);border:1px dashed #3a4157;border-radius:12px;padding:12px 16px 12px 34px}
.pend li{margin:4px 0}
body.mode-versoes main>section:not(#versoes),body.mode-versoes .offer{display:none!important}
.ftv{color:var(--mut);text-decoration:none;border-bottom:1px dotted var(--mut)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);background:#fff;color:#111;font-weight:600;padding:10px 16px;border-radius:999px;opacity:0;transition:.25s;z-index:60;pointer-events:none}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
footer{border-top:1px solid var(--line);padding:26px 0 40px;color:var(--mut);font-size:13px}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media (max-width:900px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .logo small{display:none}
}
@media (max-width:560px){
  .top .btn.hide-sm{display:none}
  .top .btn.hide-xs{display:none}
  .next h1{font-size:36px}
  .row{flex-wrap:wrap}
  .row select{flex:1}
  .grid{grid-template-columns:1fr}
  .play{width:54px;height:54px;top:38%}
  .player .ov{padding:12px}
  .player .ov h3{font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .tools{top:60px}
  .count.sm{grid-template-columns:repeat(4,1fr);width:100%}
  .en-a{width:100%}
  .en-a .btn{flex:1;justify-content:center}
}