/* ==========================================================
   R2LAB · Manual de comunidad y potenciadores
   Usa los componentes de normas.css y agrega los suyos
   ========================================================== */

/* 02 · Comunidad */
.m-tiles { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.m-tiles li { border-radius: 22px; padding: 20px 18px; display: grid; gap: 6px; align-content: start; }
.m-tiles b { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.m-tiles span { font-size: 14px; color: var(--muted); line-height: 1.45; }
.m-quote { margin-top: 14px; border-radius: 24px; padding: 22px; background: var(--white); border: 1px solid rgba(21, 21, 27, .08); }
.m-quote blockquote { font-size: clamp(19px, 5vw, 26px); font-weight: 700; letter-spacing: -.02em; line-height: 1.3; margin-top: 8px; }

/* 04 · Potenciadores */
.powers { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.power { position: relative; background: var(--white); border: 1px solid rgba(21, 21, 27, .08); border-radius: 24px; padding: 10px 10px 18px; transition: translate .4s var(--ease), box-shadow .4s; }
.power:hover { translate: 0 -4px; box-shadow: 0 24px 40px -26px rgba(21, 21, 27, .35); }
.pw-img { display: block; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: #6c2bd9; }
.pw-img img { width: 100%; height: 100%; object-fit: cover; scale: 1.18; transition: scale .6s var(--ease); }
.power:hover .pw-img img { scale: 1.26; }
.pw-tag { position: absolute; top: 18px; left: 18px; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: var(--white); color: var(--text); }
.power h3 { font-size: 18px; font-weight: 800; margin: 14px 6px 2px; }
.power p { font-size: 13.5px; color: var(--muted); line-height: 1.45; margin: 0 6px; }

/* 05 · Batallas */
.m-steps { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: 62%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; margin: 0 calc(var(--pad) * -1); padding-left: var(--pad); padding-right: var(--pad); scrollbar-width: none; }
.m-steps::-webkit-scrollbar { display: none; }
.m-steps li { scroll-snap-align: start; border-radius: 22px; overflow: hidden; background: var(--white); border: 1px solid rgba(21, 21, 27, .08); }
.m-steps img { width: 100%; height: 100%; object-fit: cover; }

.m-tabs { margin-top: 18px; background: rgba(255, 255, 255, .85); border: 1px solid rgba(21, 21, 27, .08); border-radius: 26px; padding: 18px; }
.tab-bar { display: flex; gap: 6px; padding: 4px; background: var(--bg); border-radius: 999px; width: fit-content; max-width: 100%; }
.tab { border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); padding: 9px 16px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background .3s, color .3s; }
.tab[aria-selected="true"] { background: var(--text); color: var(--white); }
.tab-panel .checks li { background: var(--bg); }
.tab-tip { font-size: 14px; color: var(--muted); margin-top: 14px; }
.tab-tip b { color: var(--text); }

@media (min-width: 860px) {
  .m-tiles { grid-template-columns: repeat(4, 1fr); }
  .m-tiles li { padding: 24px 22px; }
  .m-quote { padding: 28px 32px; }
  .powers { grid-template-columns: repeat(5, 1fr); gap: 12px; }
  .m-steps { grid-auto-flow: row; grid-template-columns: repeat(5, 1fr); overflow: visible; margin: 0; padding: 0; }
  .m-tabs { padding: 26px 30px; }
  .tab-panel .checks { grid-template-columns: 1fr 1fr; }
}


/* 01 · Celular: cómo iniciar un LIVE */
.golive { display: grid; gap: 22px; justify-items: center; }
.gl-phone { width: min(290px, 78vw); aspect-ratio: 9 / 19; padding: 10px; border-radius: 46px; background: linear-gradient(145deg, #2a2a33, #0e0e12); box-shadow: 0 40px 70px -30px rgba(21, 21, 27, .55), inset 0 0 0 1.5px rgba(255, 255, 255, .08); position: relative; }
.gl-phone::before { content: ""; position: absolute; top: 18px; left: 50%; width: 76px; height: 20px; margin-left: -38px; border-radius: 20px; background: #0e0e12; z-index: 5; }
.gl-screen { position: relative; height: 100%; border-radius: 37px; overflow: hidden; color: #fff; font-size: 11px; }
.gl-cam { position: absolute; inset: 0; background: linear-gradient(180deg, #b9a6d9 0%, #e4c3d3 50%, #f4d6c4 100%); }
.gl-cam::before { content: ""; position: absolute; left: 12%; top: 30%; width: 34%; height: 22%; border-radius: 10px; background: rgba(255, 255, 255, .28); } /* cuadro en la pared */
.gl-cam::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .35), transparent 26%, transparent 66%, rgba(0, 0, 0, .5)); }
.gl-person { position: absolute; left: 50%; bottom: 0; width: 74%; height: 62%; translate: -50% 0; }
.gl-person::before { content: ""; position: absolute; z-index: 1; left: 50%; top: 29%; width: 40%; aspect-ratio: .8; translate: -50% 0; border-radius: 50% 50% 46% 46%; background: radial-gradient(ellipse 78% 46% at 50% 4%, #3a2a2a 0 70%, transparent 72%), linear-gradient(#ebbb9d, #d9a283); box-shadow: inset 0 -8px 14px rgba(0, 0, 0, .1); }
.gl-person::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: 0; height: 44%; border-radius: 50% 50% 0 0 / 34% 34% 0 0; background: linear-gradient(180deg, #2fc4a4, #22a589); }
.gl-top { position: absolute; z-index: 2; top: 48px; left: 12px; right: 12px; display: flex; gap: 8px; align-items: flex-start; padding: 8px; border-radius: 14px; background: rgba(0, 0, 0, .35); backdrop-filter: blur(6px); }
.gl-cover { flex: none; width: 42px; height: 52px; border-radius: 8px; background: linear-gradient(160deg, var(--pink), var(--lavender)); display: grid; place-items: center; }
.gl-cover span { width: 18px; height: 18px; border-radius: 50%; background: rgba(21, 21, 27, .25); }
.gl-title { flex: 1; min-width: 0; padding: 2px 2px; border-radius: 6px; }
.gl-title b { display: block; font-size: 11.5px; font-weight: 700; line-height: 1.25; }
.gl-title small { display: block; font-size: 10px; opacity: .7; margin-top: 4px; }
.gl-x { font-style: normal; opacity: .8; font-size: 12px; }
.gl-side { position: absolute; z-index: 2; right: 10px; top: 130px; display: grid; gap: 12px; }
.gl-side span { display: grid; justify-items: center; gap: 3px; font-size: 9.5px; font-weight: 600; padding: 4px; border-radius: 10px; }
.gl-side svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4)); }
.gl-bottom { position: absolute; z-index: 2; left: 0; right: 0; bottom: 16px; display: grid; justify-items: center; gap: 12px; }
.gl-go { display: block; width: calc(100% - 40px); text-align: center; font-size: 13px; font-weight: 700; padding: 11px 0; border-radius: 10px; background: #ff2d55; }
.gl-tabs { display: flex; gap: 14px; font-size: 11px; font-weight: 600; opacity: .9; }
.gl-tabs span { opacity: .6; }

/* paso activo: anillo y número sobre el elemento */
.gl-screen [data-s]:not(.gl-cam) { position: relative; }
.gl-screen [data-s] { transition: box-shadow .35s var(--ease), background .35s; }
.gl-screen [data-s].on { box-shadow: 0 0 0 2.5px #A3B8F3, 0 0 0 7px rgba(163, 184, 243, .35); }
.gl-cam[data-s].on { box-shadow: inset 0 0 0 4px #A3B8F3; }
.gl-screen [data-s]::after { content: attr(data-s); position: absolute; top: -9px; right: -9px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #A3B8F3; color: var(--text); font-size: 11px; font-weight: 800; opacity: 0; scale: .4; transition: opacity .3s, scale .4s cubic-bezier(.3, 1.6, .5, 1); z-index: 3; }
.gl-cam[data-s]::after { top: auto; bottom: 100px; right: auto; left: 50%; margin-left: -10px; }
.gl-screen [data-s].on::after { opacity: 1; scale: 1; }

.gl-steps { list-style: none; display: grid; gap: 8px; width: 100%; }
.gl-steps button { display: flex; gap: 14px; align-items: center; width: 100%; text-align: left; font: inherit; color: var(--text); background: rgba(255, 255, 255, .7); border: 1.5px solid rgba(21, 21, 27, .08); border-radius: 18px; padding: 12px 14px; cursor: pointer; transition: background .3s, border-color .3s, translate .35s var(--ease); }
.gl-steps button:hover { translate: 3px 0; }
.gl-steps b { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--bg); font-size: 14px; font-weight: 800; transition: background .3s, color .3s; }
.gl-steps span { font-size: 14px; color: var(--muted); line-height: 1.35; }
.gl-steps strong { display: block; font-size: 16px; color: var(--text); font-weight: 700; }
.gl-steps button[aria-pressed="true"] { background: var(--white); border-color: #A3B8F3; }
.gl-steps button[aria-pressed="true"] b { background: #A3B8F3; color: var(--text); }

@media (min-width: 860px) {
  .golive { grid-template-columns: auto 1fr; gap: 56px; align-items: center; justify-items: stretch; }
  .gl-phone { width: 300px; }
  .gl-steps { grid-template-columns: 1fr 1fr; }
}

/* ---------- Tutorial animado dentro del celular ---------- */
.gl-side-col { width: 100%; display: grid; gap: 14px; align-content: center; }
.gl-cap { min-height: 3em; font-size: clamp(17px, 4.4vw, 22px); font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.gl-ui { position: absolute; inset: 0; z-index: 2; }
.gl-title { position: relative; }
.gl-t:empty::before { content: "Añade un título"; opacity: .6; font-weight: 600; }
.gl-caret { display: none; position: absolute; width: 1.5px; height: 12px; background: #fff; animation: caret 1s steps(1) infinite; }
.gl-title.typing .gl-caret { display: inline-block; position: static; vertical-align: -2px; margin-left: 1px; }
@keyframes caret { 50% { opacity: 0; } }
.gl-title .gl-t { display: inline; }
.gl-cover.has-photo { background: linear-gradient(160deg, #ffd0a8, #f0476b); }
.gl-cover.has-photo span { background: radial-gradient(circle at 50% 38%, #f3c3a5 0 32%, transparent 33%), radial-gradient(ellipse 60% 40% at 50% 100%, #2fc4a4 0 98%, transparent 100%); width: 100%; height: 100%; border-radius: 8px; }
.gl-cam { transition: filter .5s; }
.gl-cam.f-natural { filter: saturate(1.15) brightness(1.06) contrast(1.02); }

.gl-sheet { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; padding: 14px 12px 22px; border-radius: 18px 18px 0 0; background: rgba(250, 249, 247, .97); color: var(--text); visibility: hidden; }
.gl-sheet > b { display: block; font-size: 12px; font-weight: 700; margin-bottom: 10px; text-align: center; }
.gl-kbd { background: #d4d6dc; padding: 8px 4px 22px; }
.kb-row { display: flex; gap: 3px; justify-content: center; margin-top: 5px; }
.kb-row i { flex: 1; max-width: 22px; height: 28px; display: grid; place-items: center; font-style: normal; font-size: 11px; background: #fff; border-radius: 5px; box-shadow: 0 1px 0 rgba(0, 0, 0, .25); transition: background .15s; }
.kb-row i.w2 { max-width: 34px; flex: 1.4; font-size: 9px; background: #b8bcc5; }
.kb-row i.sp { max-width: none; flex: 5; font-size: 9px; }
.kb-row i.ok { background: #ff2d55; color: #fff; font-weight: 700; }
.kb-row i.hit { background: #A3B8F3; }
.gal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.gal-grid i { aspect-ratio: 3 / 4; border-radius: 8px; background: linear-gradient(160deg, #cfd6e6, #9aa5bd); }
.gal-grid i:nth-child(3) { background: linear-gradient(160deg, var(--mint), #8fd9c6); }
.gal-grid i:nth-child(4) { background: linear-gradient(160deg, var(--cream), #eec58a); }
.gal-grid i:nth-child(5) { background: linear-gradient(160deg, var(--lavender), #b9b0e6); }
.gal-grid i.pick { background: radial-gradient(circle at 50% 38%, #f3c3a5 0 22%, transparent 23%), radial-gradient(ellipse 60% 36% at 50% 100%, #2fc4a4 0 98%, transparent 100%), linear-gradient(160deg, #ffd0a8, #f0476b); transition: box-shadow .3s; }
.gal-grid i.pick.sel { box-shadow: 0 0 0 3px #A3B8F3; }
.fil-row { display: flex; justify-content: space-between; gap: 4px; }
.fil-row span { display: grid; justify-items: center; gap: 5px; font-size: 9.5px; font-weight: 600; }
.fil-row i { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(160deg, #b9a6d9, #f4d6c4); transition: box-shadow .3s; }
.fil-row .f1 { filter: saturate(1.3) brightness(1.08); }
.fil-row .f2 { filter: sepia(.5) saturate(1.4); }
.fil-row .f3 { filter: brightness(1.3); }
.fil-row .pick.sel i { box-shadow: 0 0 0 3px #A3B8F3; }
.set-row { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; font-weight: 600; padding: 9px 4px; border-top: 1px solid rgba(21, 21, 27, .08); }
.tg { width: 30px; height: 18px; border-radius: 99px; background: #d3d3d8; position: relative; transition: background .3s; }
.tg::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: translate .3s; }
.tg.on { background: var(--teal); }
.tg.on::after { translate: 12px 0; }

.gl-flash { position: absolute; inset: 0; z-index: 5; background: #fff; opacity: 0; pointer-events: none; }
.gl-count { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; font-size: 90px; font-weight: 800; color: #fff; text-shadow: 0 6px 30px rgba(0, 0, 0, .35); opacity: 0; }
.gl-live { position: absolute; z-index: 5; top: 50px; left: 12px; display: flex; gap: 6px; opacity: 0; }
.gl-live span { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 6px; background: rgba(0, 0, 0, .4); }
.gl-live .lv { background: #ff2d55; }
.gl-chat { position: absolute; z-index: 5; left: 12px; bottom: 26px; display: grid; gap: 6px; }
.gl-chat span { font-size: 10.5px; padding: 5px 9px; border-radius: 12px; background: rgba(0, 0, 0, .35); width: fit-content; opacity: 0; }
.gl-chat b { margin-right: 4px; }
.gl-finger { position: absolute; z-index: 6; top: 0; left: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: rgba(255, 255, 255, .55); border: 2px solid rgba(255, 255, 255, .95); box-shadow: 0 6px 18px rgba(0, 0, 0, .25); opacity: 0; pointer-events: none; }

@media (min-width: 860px) {
  .gl-steps { grid-template-columns: 1fr 1fr; }
}

/* ---------- Aspecto TikTok LIVE ---------- */
.gl-status { position: absolute; z-index: 6; top: 14px; left: 26px; right: 22px; display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: #fff; pointer-events: none; }
.gl-status span { display: flex; gap: 2px; align-items: flex-end; }
.gl-status i { width: 3px; background: #fff; border-radius: 1px; }
.gl-status i:nth-child(1) { height: 4px; } .gl-status i:nth-child(2) { height: 6px; } .gl-status i:nth-child(3) { height: 8px; }
.gl-status em { width: 18px; height: 8px; margin-left: 4px; border: 1.2px solid #fff; border-radius: 3px; background: linear-gradient(90deg, #fff 70%, transparent 70%) content-box; padding: 1px; }
.gl-go { background: #FE2C55; }
.gl-tabs b { position: relative; }
.gl-tabs b::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #fff; }

.gl-room { position: absolute; inset: 0; z-index: 5; opacity: 0; pointer-events: none; }
.av { flex: none; display: block; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .85); background: linear-gradient(135deg, #25F4EE, #FE2C55); }
.av.a1 { background: linear-gradient(135deg, #fbe2e6, #f0476b); }
.av.a2 { background: linear-gradient(135deg, #e2f5ee, #2fc4a4); }
.av.a3 { background: linear-gradient(135deg, #e8e5f6, #8e7fe0); }
.rm-top { position: absolute; top: 40px; left: 10px; right: 10px; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.rm-host { display: flex; align-items: center; gap: 6px; padding: 3px 4px 3px 3px; border-radius: 99px; background: rgba(0, 0, 0, .35); }
.rm-host span { display: grid; line-height: 1.15; }
.rm-host b { font-size: 10.5px; }
.rm-host small { font-size: 8.5px; opacity: .8; }
.rm-host em { font-style: normal; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #FE2C55; font-weight: 800; font-size: 14px; }
.rm-viewers { display: flex; align-items: center; }
.rm-viewers .av { width: 22px; height: 22px; margin-left: -7px; }
.rm-viewers b { font-size: 10px; margin-left: 5px; padding: 3px 7px; border-radius: 99px; background: rgba(0, 0, 0, .35); }
.rm-x { margin-left: 6px; font-size: 12px; }
.rm-chips { position: absolute; top: 76px; left: 10px; display: flex; gap: 4px; }
.rm-chips span { font-size: 9px; font-weight: 600; padding: 3px 7px; border-radius: 6px; background: rgba(0, 0, 0, .3); }
.rm-chips .hot { background: #FE2C55; font-weight: 800; }
.rm-gift { position: absolute; left: 0; bottom: 150px; display: flex; align-items: center; gap: 6px; padding: 3px 12px 3px 4px; border-radius: 0 99px 99px 0; background: linear-gradient(90deg, rgba(254, 44, 85, .85), rgba(254, 44, 85, .25)); }
.rm-gift span { display: grid; line-height: 1.1; }
.rm-gift b { font-size: 10px; }
.rm-gift small { font-size: 9px; opacity: .9; }
.rm-gift .rose { width: 22px; height: 22px; fill: #ff6b8a; stroke: #2fc4a4; stroke-width: 1.6; stroke-linecap: round; }
.rm-gift .rose circle { stroke: none; }
.rm-gift .x { font-size: 14px; font-weight: 800; font-style: italic; color: #ffe27a; }
.rm-chat { position: absolute; left: 10px; right: 64px; bottom: 50px; display: grid; gap: 5px; }
.rm-chat span { display: flex; align-items: center; gap: 5px; font-size: 10px; line-height: 1.2; }
.rm-chat .av { width: 18px; height: 18px; border-width: 1px; }
.rm-chat b { opacity: .75; font-weight: 600; }
.rm-bar { position: absolute; left: 10px; right: 10px; bottom: 14px; display: flex; align-items: center; gap: 8px; }
.rm-input { flex: 1; font-size: 10.5px; padding: 8px 12px; border-radius: 99px; background: rgba(0, 0, 0, .35); opacity: .85; }
.rm-bar i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(0, 0, 0, .35); }
.rm-bar svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.rm-bar .lk svg { fill: #FE2C55; stroke: none; }
.rm-hearts { position: absolute; right: 14px; bottom: 44px; width: 30px; height: 30px; }
.rm-hearts svg { position: absolute; left: 0; bottom: 0; width: 24px; height: 24px; fill: #FE2C55; opacity: 0; }
.rm-hearts svg:nth-child(3n) { fill: #25F4EE; }
.rm-hearts svg:nth-child(3n+1) { fill: #ff8aa3; }
.gl-room, .gl-ui { text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
.rm-host em { text-shadow: none; }

/* Checklist rápido (antes de emitir) */
.quick-check { margin-top: 22px; background: var(--white); border: 1px solid rgba(21, 21, 27, .08); border-radius: 26px; padding: 20px; box-shadow: 0 24px 50px -32px rgba(21, 21, 27, .3); }
.qc-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.qc-k { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); }
.qc-title { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin-top: 2px; }
.qc-ring { position: relative; width: 52px; height: 52px; flex: none; }
.qc-ring svg { width: 100%; height: 100%; rotate: -90deg; }
.qc-ring circle { fill: none; stroke: rgba(21, 21, 27, .08); stroke-width: 4; }
.qc-ring .qc-bar { stroke: var(--teal); stroke-linecap: round; stroke-dasharray: 100.53; stroke-dashoffset: 100.53; transition: stroke-dashoffset .5s var(--ease); }
.qc-n { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.qc-items { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.qc-items .qc-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
.qc-item { display: flex; align-items: center; gap: 8px; text-align: left; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text); background: var(--bg); border: 1.5px solid transparent; border-radius: 999px; padding: 7px 14px 7px 7px; cursor: pointer; transition: background .3s, border-color .3s, color .3s, scale .3s var(--ease); }
.qc-item:hover { border-color: rgba(21, 21, 27, .15); }
.qc-item:active { scale: .96; }
.qc-ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--white); transition: background .3s; }
.qc-ic svg { width: 16px; height: 16px; fill: none; stroke: var(--text); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }
.qc-item[aria-pressed="true"] { background: var(--mint); border-color: rgba(47, 196, 164, .45); }
.qc-item[aria-pressed="true"] .qc-ic { background: var(--teal); }
.qc-item[aria-pressed="true"] .qc-ic svg { stroke: var(--white); }
.qc-done:empty { display: none; }
.qc-done { margin-top: 12px; font-size: 14px; font-weight: 600; color: #13876c; }
@media (min-width: 860px) {
  .quick-check { padding: 26px 30px; }
  .qc-items { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 20px; }
  .qc-items .qc-item:last-child:nth-child(odd) { grid-column: auto; }
}


/* ---------- 02 · Comunidad en un LIVE ---------- */
.cm-room { opacity: 1; }
.cm-goal { position: absolute; top: 76px; left: 10px; display: flex; align-items: center; gap: 6px; padding: 5px 8px 5px 5px; border-radius: 12px; background: rgba(0, 0, 0, .38); width: 62%; }
.cg-ic { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #FE2C55; flex: none; }
.cg-ic svg { width: 13px; height: 13px; fill: #fff; }
.cm-goal div { flex: 1; min-width: 0; }
.cm-goal b { display: block; font-size: 9.5px; }
.cg-bar { display: block; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .3); margin-top: 3px; overflow: hidden; }
.cg-bar i { display: block; height: 100%; width: 64%; border-radius: 4px; background: linear-gradient(90deg, #ff8aa3, #FE2C55); }
.cg-n { font-size: 9.5px; font-weight: 700; }
.cm-pop { position: absolute; left: 50%; top: 42%; translate: -50% 0; opacity: 0; }
.cm-pop span { display: block; font-size: 15px; font-weight: 800; padding: 6px 14px; border-radius: 99px; background: #FE2C55; white-space: nowrap; }
.cm-follow { position: absolute; left: 10px; right: 10px; top: 46%; display: flex; align-items: center; gap: 8px; padding: 9px; border-radius: 16px; background: rgba(255, 255, 255, .96); color: var(--text); text-shadow: none; opacity: 0; }
.cm-follow div { flex: 1; min-width: 0; display: grid; }
.cm-follow b { font-size: 11px; }
.cm-follow small { font-size: 9.5px; color: var(--muted); }
.cf-btn { font-size: 10.5px; font-weight: 700; padding: 6px 10px; border-radius: 8px; background: #FE2C55; color: #fff; transition: background .3s, color .3s; }
.cf-btn.done { background: #e9e9ee; color: var(--text); }
.cf-bell { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #e9e9ee; transition: background .3s; }
.cf-bell svg { width: 15px; height: 15px; fill: none; stroke: var(--text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cf-bell.on { background: #FE2C55; }
.cf-bell.on svg { stroke: #fff; }
.cm-pin { position: absolute; left: 10px; right: 10px; bottom: 150px; display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 10px; background: rgba(0, 0, 0, .42); font-size: 10px; font-weight: 600; opacity: 0; }
.cm-pin svg { flex: none; width: 13px; height: 13px; fill: none; stroke: #ffe27a; stroke-width: 1.8; stroke-linejoin: round; }
.cm-chat { bottom: 50px; }
.cm-chat span.host b { color: #ffe27a; opacity: 1; }
.cm-chat span em { font-style: normal; font-size: 8px; font-weight: 800; padding: 1px 4px; border-radius: 4px; background: #FE2C55; margin-right: 2px; }
.cm-tiles li { padding: 0; }
.cm-tiles button { display: grid; gap: 6px; align-content: start; width: 100%; height: 100%; text-align: left; font: inherit; color: inherit; background: none; border: 2px solid transparent; border-radius: 22px; padding: 18px 16px; cursor: pointer; transition: border-color .3s, translate .35s var(--ease); }
.cm-tiles button:hover { translate: 0 -2px; }
.cm-tiles button[aria-pressed="true"] { border-color: rgba(21, 21, 27, .55); }
.cm-tiles b { font-size: 18px; font-weight: 800; }
.cm-tiles span { font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.comm .m-quote { margin-top: 0; }
.comm .m-quote blockquote { font-size: clamp(17px, 4.4vw, 21px); }
@media (min-width: 860px) {
  .comm .cm-tiles { grid-template-columns: 1fr 1fr; }
}

/* ---------- 03 · Moderación: pasos + juego ---------- */
.m-sub { margin: 6px 0 14px; }
.m-sub h3 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin-top: 4px; }
.mod-steps { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 40px; position: relative; }
.ms-step { position: relative; display: grid; gap: 4px; padding: 18px 16px; border-radius: 22px; background: var(--white); border: 1px solid rgba(21, 21, 27, .08); }
.ms-ic { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; background: var(--mint); margin-bottom: 8px; }
.ms-step:nth-child(2) .ms-ic { background: var(--lavender); }
.ms-step:nth-child(3) .ms-ic { background: var(--cream); }
.ms-step:nth-child(4) .ms-ic { background: var(--pink); }
.ms-ic svg { width: 24px; height: 24px; fill: none; stroke: var(--text); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ms-ic svg circle[r="1.6"] { fill: var(--text); }
.ms-ic b { position: absolute; top: -7px; right: -7px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--text); color: #fff; font-size: 11px; font-weight: 800; }
.ms-step strong { font-size: 16px; font-weight: 700; }
.ms-step small { font-size: 13.5px; color: var(--muted); }

.mod-game { border-radius: 28px; padding: 20px; background: var(--text); color: #fff; box-shadow: 0 30px 60px -34px rgba(21, 21, 27, .6); }
.mg-top { display: flex; justify-content: space-between; font-size: 13px; color: #a9a9b4; }
.mg-top[hidden] { display: none; }
.mg-top b { color: #fff; }
.mg-stage { display: grid; place-items: center; min-height: 140px; padding: 18px 0; }
.mg-stage[hidden] { display: none; }
.mg-msg { display: flex; gap: 12px; align-items: flex-start; max-width: 460px; width: 100%; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1); transition: background .4s, border-color .4s, opacity .4s; }
.mg-msg .av { width: 36px; height: 36px; }
.mg-msg b { font-size: 13px; color: #a9a9b4; font-weight: 600; }
.mg-msg p { font-size: 17px; font-weight: 600; line-height: 1.35; margin-top: 2px; transition: filter .4s; }
.mg-msg.is-hidden { opacity: .55; }
.mg-msg.is-hidden p { filter: blur(5px); }
.mg-msg.is-hola { border-color: var(--teal); background: rgba(47, 196, 164, .14); }
.mg-msg.is-avisar { border-color: #ffe27a; background: rgba(255, 226, 122, .12); }
.mg-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mg-actions[hidden] { display: none; }
.mg-actions button { display: flex; align-items: center; gap: 8px; font: inherit; font-size: 14px; font-weight: 600; color: #fff; background: rgba(255, 255, 255, .08); border: 1.5px solid rgba(255, 255, 255, .12); border-radius: 14px; padding: 12px; cursor: pointer; text-align: left; transition: background .25s, border-color .25s, opacity .25s, translate .3s var(--ease); }
.mg-actions button:hover:not(:disabled) { background: rgba(255, 255, 255, .14); translate: 0 -2px; }
.mg-actions button:disabled { cursor: default; opacity: .45; }
.mg-actions button.right { opacity: 1; background: rgba(47, 196, 164, .25); border-color: var(--teal); }
.mg-actions button.wrong { opacity: 1; background: rgba(240, 71, 107, .25); border-color: var(--coral); }
.mg-actions svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mg-feed { min-height: 1.5em; margin-top: 14px; font-size: 15px; font-weight: 600; text-align: center; }
.mg-feed.good { color: #7fe8d0; }
.mg-feed.bad { color: #ff9db1; }
.mg-end { text-align: center; padding: 24px 6px 8px; }
.mg-end[hidden] { display: none; }
.mg-end b { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.mg-end p { color: #c9c9d2; font-size: 15px; max-width: 44ch; margin: 8px auto 18px; }
.mg-again { font: inherit; font-weight: 700; font-size: 14px; padding: 12px 22px; border-radius: 999px; border: 0; background: #fff; color: var(--text); cursor: pointer; }
.mod-game + .callout { margin-top: 18px; }
@media (min-width: 860px) {
  .mod-steps { grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .mod-steps::before { content: ""; position: absolute; left: 6%; right: 6%; top: 42px; height: 2px; background: repeating-linear-gradient(90deg, rgba(21, 21, 27, .2) 0 6px, transparent 6px 12px); z-index: -1; }
  .mod-game { padding: 30px 36px; }
  .mg-actions { grid-template-columns: repeat(4, 1fr); }
  .mg-actions button { justify-content: center; }
}
@media (min-width: 860px) {
  .golive.comm { grid-template-columns: 1fr auto; }
  .golive.comm .gl-phone { order: 2; }
}

/* ---------- 04 · Potenciadores: batalla PK ---------- */
.pk-wrap { display: grid; gap: 16px; }
.pk { position: relative; aspect-ratio: 4 / 3.2; border-radius: 28px; overflow: hidden; background: #111; color: #fff; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; box-shadow: 0 30px 60px -34px rgba(21, 21, 27, .6); text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
.pk-side { position: relative; overflow: hidden; }
.pk-cam { position: absolute; inset: 0; background: linear-gradient(180deg, #b9a6d9 0%, #e4c3d3 55%, #f4d6c4 100%); }
.pk-r .pk-cam { background: linear-gradient(180deg, #8fb8d9 0%, #b7d3e4 55%, #d6e4f4 100%); }
.pk-cam .gl-person { width: 88%; height: 66%; }
.pk-r .gl-person::after { background: linear-gradient(180deg, #8e7fe0, #6a5bc4); }
.pk-name { position: absolute; left: 10px; bottom: 10px; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 99px; background: rgba(0, 0, 0, .35); }
.pk-bar { position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 26px; display: flex; font-size: 12px; font-weight: 800; }
.pk-me { display: flex; align-items: center; padding-left: 10px; width: 50%; background: linear-gradient(90deg, #FE2C55, #ff5d7d); transition: width .6s var(--ease); }
.pk-them { flex: 1; display: flex; align-items: center; justify-content: flex-end; padding-right: 10px; background: linear-gradient(90deg, #3f8cff, #25b8f4); }
.pk-fog { position: absolute; left: 0; top: 0; bottom: 0; width: 46%; display: flex; align-items: center; padding-left: 10px; background: rgba(240, 240, 255, .92); color: #6c5ce7; font-style: normal; text-shadow: none; opacity: 0; transition: opacity .4s; }
.pk-fog em { font-style: normal; font-weight: 800; letter-spacing: 2px; }
.pk.fog .pk-fog { opacity: 1; }
.pk-timer { position: absolute; z-index: 4; top: 30px; left: 50%; translate: -50% 0; display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 5px; border-radius: 99px; background: rgba(0, 0, 0, .55); font-size: 12px; font-weight: 700; }
.pk-timer b { font-size: 10px; padding: 2px 6px; border-radius: 99px; background: linear-gradient(90deg, #FE2C55, #3f8cff); }
.pk-t { font-variant-numeric: tabular-nums; }
.pk-plus { position: absolute; left: 100%; margin-left: 6px; font-style: normal; font-weight: 800; color: #ffe27a; white-space: nowrap; opacity: 0; }
.pk-badge { position: absolute; top: 36px; left: 10px; font-size: 13px; font-weight: 800; padding: 4px 10px; border-radius: 10px; background: #ffe27a; color: var(--text); text-shadow: none; opacity: 0; }
.pk-rbadge { left: auto; right: 10px; background: #fff; }
.pk-rbadge.broken { text-decoration: line-through; background: #ddd; color: #888; }
.pk-gifts { position: absolute; inset: 0; pointer-events: none; }
.pk-gifts span { position: absolute; bottom: 40px; font-size: 14px; font-weight: 800; color: #fff; }
.pk-gifts span.big { font-size: 20px; color: #ffe27a; }
.pk-pop { position: absolute; z-index: 5; left: 25%; top: 50%; width: 30%; aspect-ratio: 1; translate: -50% -50%; border-radius: 22px; overflow: hidden; box-shadow: 0 18px 40px rgba(0, 0, 0, .4); opacity: 0; }
.pk-pop img { width: 100%; height: 100%; object-fit: cover; scale: 1.18; }
.pk-clouds { position: absolute; z-index: 4; inset: 0 0 0 50%; pointer-events: none; opacity: 0; }
.pk-clouds i { position: absolute; width: 70%; aspect-ratio: 2; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0)); }
.pk-clouds i:nth-child(1) { left: -10%; top: 10%; } .pk-clouds i:nth-child(2) { left: 30%; top: 40%; } .pk-clouds i:nth-child(3) { left: 0; top: 65%; }

.pw-panel { display: grid; gap: 12px; align-content: start; }
.pw-hint { font-size: 15px; color: var(--muted); }
.pw-chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.pw-chip { display: grid; gap: 6px; justify-items: center; font: inherit; font-size: 11.5px; font-weight: 700; color: var(--text); background: var(--white); border: 2px solid transparent; border-radius: 16px; padding: 6px 4px 8px; cursor: pointer; transition: border-color .3s, translate .3s var(--ease), box-shadow .3s; }
.pw-chip img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 11px; }
.pw-chip:hover { translate: 0 -3px; }
.pw-chip[aria-pressed="true"] { border-color: #FE2C55; box-shadow: 0 12px 24px -14px rgba(254, 44, 85, .6); }
.pw-info { background: var(--white); border-radius: 22px; padding: 18px 20px; border: 1px solid rgba(21, 21, 27, .08); }
.pw-info[hidden] { display: none; }
.pw-tag2 { display: inline-block; font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 99px; background: var(--pink); color: #b3123c; }
.pw-info b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin-top: 8px; }
.pw-info p { font-size: 15px; color: var(--muted); margin-top: 4px; line-height: 1.45; }
.pw-info small { display: block; margin-top: 10px; font-size: 13.5px; font-weight: 600; color: #13876c; }
@media (min-width: 860px) {
  .pk-wrap { grid-template-columns: 1.15fr 1fr; gap: 32px; align-items: center; }
  .pw-chips { gap: 8px; }
  .pw-chip { font-size: 12.5px; }
}
.pw-chips { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.pw-chip { min-width: 0; }
.pw-chip span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 859px) { .pw-chip { font-size: 9px; letter-spacing: -.01em; padding: 5px 3px 7px; border-radius: 13px; } .pw-chip img { border-radius: 9px; } }

/* ---------- 05 · Iniciar una batalla ---------- */
.bt-tools { position: absolute; right: 10px; bottom: 16px; display: flex; gap: 8px; }
.bt-tools i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(0, 0, 0, .38); }
.bt-tools svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bt-tools i:first-child svg { fill: #FE2C55; stroke: none; }
.bt-tools .bt-multi { transition: box-shadow .3s, background .3s; }
.bt-tools .bt-multi.on { background: #FE2C55; box-shadow: 0 0 0 3px rgba(254, 44, 85, .35); }
.bt-screen .gl-sheet { z-index: 7; }
.bt-screen .gl-finger { z-index: 9; }
.bt-sheet { padding-bottom: 18px; }
.bt-quick { border: 2px solid #FE2C55; border-radius: 14px; padding: 10px; background: #fff; }
.bq-top { display: flex; gap: 8px; align-items: center; }
.bq-top span { flex: 1; display: grid; }
.bq-top strong { font-size: 11.5px; }
.bq-top small { font-size: 9px; color: var(--muted); line-height: 1.3; }
.bq-av { position: relative; display: flex; font-style: normal; }
.bq-av .av { width: 26px; height: 26px; border-color: #fff; }
.bq-av em { display: grid; place-items: center; width: 22px; height: 22px; margin-left: -8px; border-radius: 50%; background: #4aa3ff; color: #fff; font-style: normal; font-weight: 800; font-size: 12px; }
.bq-btn { display: block; margin-top: 9px; text-align: center; font-size: 11.5px; font-weight: 700; color: #fff; background: #FE2C55; border-radius: 99px; padding: 8px 0; }
.bq-wait { display: none; margin-top: 9px; align-items: center; justify-content: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--muted); padding: 7px 0; }
.bq-wait i { width: 13px; height: 13px; border-radius: 50%; border: 2px solid #FE2C55; border-right-color: transparent; animation: spin .8s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }
.bt-quick.waiting .bq-btn { display: none; }
.bt-quick.waiting .bq-wait { display: flex; }
.bt-friends { margin-top: 10px; }
.bt-friends small { font-size: 10px; color: var(--muted); font-weight: 600; }
.bf-row { display: flex; align-items: center; gap: 8px; padding-top: 7px; font-size: 11px; font-weight: 600; }
.bf-row .av { width: 24px; height: 24px; border-color: #fff; }
.bf-row span { flex: 1; }
.bf-row em { font-style: normal; font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: 99px; background: #FE2C55; color: #fff; }
.bt-dialog { position: absolute; z-index: 8; left: 14%; right: 14%; top: 34%; display: grid; justify-items: center; gap: 4px; padding: 16px 12px 12px; border-radius: 18px; background: #1d1d24; color: #fff; text-align: center; box-shadow: 0 20px 40px rgba(0, 0, 0, .45); opacity: 0; visibility: hidden; }
.bd-ic svg { width: 34px; height: 34px; fill: none; stroke: #4aa3ff; stroke-width: 2; stroke-linecap: round; }
.bt-dialog b { font-size: 14px; }
.bt-dialog small { font-size: 10px; opacity: .75; }
.bd-btns { display: flex; gap: 6px; width: 100%; margin-top: 8px; }
.bd-btns span { flex: 1; font-size: 11px; font-weight: 700; padding: 8px 0; border-radius: 10px; background: rgba(255, 255, 255, .12); }
.bd-btns .bd-ok { background: #FE2C55; }
.bt-battle { position: absolute; z-index: 6; inset: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: #111; opacity: 0; visibility: hidden; }
.bb-half { position: relative; overflow: hidden; background: linear-gradient(180deg, #b9a6d9, #f4d6c4); }
.bb-r { background: linear-gradient(180deg, #8fb8d9, #d6e4f4); }
.bb-half .gl-person { width: 100%; height: 48%; }
.bb-r .gl-person::after { background: linear-gradient(180deg, #8e7fe0, #6a5bc4); }
.bb-half i { position: absolute; left: 6px; bottom: 74px; font-style: normal; font-size: 9.5px; font-weight: 700; padding: 2px 7px; border-radius: 99px; background: rgba(0, 0, 0, .35); color: #fff; }
.bb-bar { position: absolute; z-index: 2; top: 44px; left: 0; right: 0; display: flex; height: 18px; font-size: 10px; font-weight: 800; color: #fff; }
.bb-me { width: 50%; padding-left: 6px; display: flex; align-items: center; background: #FE2C55; transition: width .5s; }
.bb-them { flex: 1; padding-right: 6px; display: flex; align-items: center; justify-content: flex-end; background: #3f8cff; }
.bb-timer { position: absolute; z-index: 2; top: 66px; left: 50%; translate: -50% 0; display: flex; gap: 5px; align-items: center; font-size: 10px; font-weight: 700; color: #fff; padding: 3px 8px 3px 3px; border-radius: 99px; background: rgba(0, 0, 0, .55); }
.bb-timer b { font-size: 8px; padding: 1px 5px; border-radius: 99px; background: linear-gradient(90deg, #FE2C55, #3f8cff); }
.bb-done { position: absolute; z-index: 3; left: 50%; top: 40%; translate: -50% -50%; display: grid; justify-items: center; gap: 2px; padding: 14px 20px; border-radius: 20px; background: rgba(255, 255, 255, .96); color: var(--text); text-align: center; box-shadow: 0 16px 34px rgba(0, 0, 0, .3); opacity: 0; }
.bb-trophy svg { width: 38px; height: 38px; fill: #ffd34d; stroke: #d39b00; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.bb-done b { font-size: 20px; font-weight: 800; color: #FE2C55; }
.bb-done small { font-size: 10.5px; color: var(--muted); }
@media (min-width: 860px) {
  .golive.bt { grid-template-columns: 1fr auto; }
  .golive.bt .gl-phone { order: 2; }
  .bt-steps { grid-template-columns: 1fr; }
}

/* ---------- 05 · Tipos de batalla ---------- */
.bm-head { margin-top: 44px; }
.bm-tabs { margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; }
.bm-tabs::-webkit-scrollbar { display: none; }
.bm-screen { background: #0e0e12; }
.bm-bg { position: absolute; inset: 0; background: #0e0e12; }
.bm-top { top: 40px; z-index: 3; }
.bm-bar { position: absolute; z-index: 3; top: 82px; left: 0; right: 0; height: 18px; display: flex; font-size: 10px; font-weight: 800; color: #fff; }
.bm-bar .bb-a { width: 50%; display: flex; align-items: center; padding-left: 8px; background: linear-gradient(90deg, #FE2C55, #ff6b8a); transition: width .5s var(--ease); }
.bm-bar .bb-b { flex: 1; display: flex; align-items: center; justify-content: flex-end; padding-right: 8px; background: linear-gradient(90deg, #3f8cff, #25b8f4); }
.bm-screen.no-bar .bm-bar { opacity: 0; }
.bm-timer { position: absolute; z-index: 4; top: 104px; left: 50%; translate: -50% 0; display: flex; align-items: center; gap: 5px; padding: 3px 9px 3px 3px; border-radius: 99px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bm-timer b { font-size: 8.5px; padding: 1px 6px; border-radius: 99px; background: linear-gradient(90deg, #FE2C55, #3f8cff); }
.bm-grid { position: absolute; z-index: 2; left: 0; right: 0; top: 100px; height: 52%; display: grid; gap: 2px; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.bm-tile { position: relative; overflow: hidden; background: linear-gradient(180deg, #b9a6d9, #f4d6c4); }
.bm-tile.t2 { background: linear-gradient(180deg, #8fb8d9, #d6e4f4); }
.bm-tile.t3 { background: linear-gradient(180deg, #a7dcc9, #eaf6e9); }
.bm-tile.t4 { background: linear-gradient(180deg, #f2c08f, #fbe7cf); }
.bm-tile .gl-person { width: 92%; height: 72%; }
.bm-tile.t2 .gl-person::after { background: linear-gradient(180deg, #8e7fe0, #6a5bc4); }
.bm-tile.t3 .gl-person::after { background: linear-gradient(180deg, #f0476b, #c9304f); }
.bm-tile.t4 .gl-person::after { background: linear-gradient(180deg, #3f8cff, #2b6fd6); }
.bm-sc { position: absolute; left: 5px; bottom: 5px; font-size: 9.5px; font-weight: 800; color: #fff; padding: 2px 7px; border-radius: 99px; background: rgba(0, 0, 0, .45); font-variant-numeric: tabular-nums; }
.bm-rank { position: absolute; right: 5px; top: 5px; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 99px; background: #fff; color: var(--text); font-size: 10.5px; font-weight: 800; opacity: 0; }
.bm-rank.r1 { background: #ffd34d; }
.bm-crown { position: absolute; left: 50%; top: 10%; translate: -50% 0; opacity: 0; }
.bm-crown svg { width: 28px; height: 28px; fill: #ffd34d; stroke: #c9900a; stroke-width: 1.2; stroke-linejoin: round; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .3)); }
/* distribución por modalidad */
.bm-grid[data-mode="1"] { grid-template-rows: 1fr; }
.bm-grid[data-mode="1"] .t3, .bm-grid[data-mode="1"] .t4 { display: none; }
.bm-grid[data-mode="3"] .t1 { grid-row: 1 / 3; }
.bm-grid[data-mode="3"] .t4 { display: none; }
.bm-grid[data-mode="q"] .t1, .bm-grid[data-mode="q"] .t2 { box-shadow: inset 0 0 0 2px #FE2C55; }
.bm-grid[data-mode="q"] .t3, .bm-grid[data-mode="q"] .t4 { box-shadow: inset 0 0 0 2px #3f8cff; }
.bm-result { position: absolute; z-index: 5; left: 50%; top: 46%; translate: -50% -50%; opacity: 0; }
.bm-result b { display: block; white-space: nowrap; font-size: 15px; font-weight: 800; color: #fff; padding: 8px 16px; border-radius: 14px; background: linear-gradient(90deg, #FE2C55, #ff8a3d); box-shadow: 0 12px 26px rgba(0, 0, 0, .35); }
.bm-chat { z-index: 3; }

.bm-side { align-content: start; }
.bm-panel[hidden] { display: none; }
.bm-lead { font-size: clamp(17px, 4.4vw, 21px); font-weight: 700; letter-spacing: -.01em; line-height: 1.35; }
.bm-steps { list-style: none; display: grid; gap: 8px; margin-top: 14px; }
.bm-steps li { display: flex; gap: 12px; align-items: center; font-size: 15px; padding: 11px 14px; border-radius: 16px; background: rgba(255, 255, 255, .7); border: 1.5px solid rgba(21, 21, 27, .06); color: var(--muted); transition: background .3s, border-color .3s, color .3s; }
.bm-steps li b { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bg); color: var(--text); font-size: 13px; font-weight: 800; transition: background .3s, color .3s; }
.bm-steps li.on { background: var(--white); border-color: #A3B8F3; color: var(--text); }
.bm-steps li.on b { background: #A3B8F3; }
.bm-steps li.done b { background: var(--teal); color: #fff; }
.bm-tip { margin-top: 14px; padding: 16px 18px; border-radius: 18px; background: var(--cream); }
.bm-tip span { font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: #9a6a12; }
.bm-tip p { font-size: 15px; font-weight: 600; margin-top: 4px; line-height: 1.45; }
.bm-grid { top: 100px; bottom: 58px; height: auto; }
.bm-rank { top: 30px; }
.bm-tile .gl-person { width: 86%; height: 62%; }
.bm-grid[data-mode="1"] .gl-person { width: 100%; height: 48%; }
.bm-grid[data-mode="3"] .t1 .gl-person { width: 100%; height: 46%; }
.bm-result { top: 54%; }
.bm-rank { width: max-content; left: auto; }
.bm-crown { top: 26%; }

/* tutorial de tipos de batalla */
.bm-grid[data-mode="solo"] { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.bm-grid[data-mode="solo"] .t2, .bm-grid[data-mode="solo"] .t3, .bm-grid[data-mode="solo"] .t4 { display: none; }
.bm-grid[data-mode="solo"] .gl-person { width: 80%; height: 48%; }
.bm-screen.pre .bm-bar, .bm-screen.pre .bm-timer, .bm-screen.pre .bm-sc { opacity: 0; }
.bm-bar, .bm-timer, .bm-sc { transition: opacity .4s; }
.bm-wait { position: absolute; inset: 0; display: none; place-items: center; align-content: center; gap: 6px; font-size: 10px; font-weight: 700; color: #fff; background: #26262e; }
.bm-wait i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #FE2C55; border-right-color: transparent; animation: spin .8s linear infinite; }
.bm-tile.waiting .bm-wait { display: grid; }
.bm-tools { bottom: 14px; z-index: 4; }
.bm-tools .bm-multi.on { background: #FE2C55; }
.bm-start { position: absolute; z-index: 4; left: 50%; bottom: 62px; translate: -50% 0; font-size: 12px; font-weight: 800; color: #fff; padding: 9px 18px; border-radius: 99px; background: #FE2C55; box-shadow: 0 10px 24px rgba(254, 44, 85, .45); white-space: nowrap; opacity: 0; visibility: hidden; }
.bm-screen .gl-sheet { z-index: 7; }
.bm-screen .gl-finger { z-index: 9; }
.bs-k { display: block; font-size: 10px; font-weight: 700; color: var(--muted); margin: 6px 0 6px; }
.bs-layouts { display: flex; gap: 8px; }
.bs-layouts .lo { flex: 1; display: grid; justify-items: center; gap: 4px; padding: 7px 0; border-radius: 12px; background: #ececf1; font-size: 10.5px; font-weight: 800; border: 2px solid transparent; transition: border-color .3s, background .3s; }
.bs-layouts .lo.sel { border-color: #FE2C55; background: #fff0f3; }
.bs-layouts i { display: grid; gap: 2px; width: 30px; height: 40px; }
.bs-layouts em { display: block; border-radius: 3px; background: #b8b8c4; }
.bs-layouts .g2 { grid-template-columns: 1fr 1fr; }
.bs-layouts .g3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.bs-layouts .g3 em:first-child { grid-row: 1 / 3; }
.bs-layouts .g4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.bs-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 11px; font-weight: 600; }
.bs-row .av { width: 24px; height: 24px; border-color: #fff; }
.bs-row span { flex: 1; }
.bs-row em { font-style: normal; font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: 99px; background: #FE2C55; color: #fff; transition: background .3s, color .3s; }
.bs-row em.done { background: #e9e9ee; color: var(--text); }
.bs-row.off { opacity: .35; }
.bm-modes { position: absolute; z-index: 8; left: 12%; right: 12%; top: 32%; display: grid; gap: 6px; padding: 14px 12px; border-radius: 18px; background: #1d1d24; color: #fff; text-align: center; box-shadow: 0 20px 40px rgba(0, 0, 0, .45); opacity: 0; visibility: hidden; }
.bm-modes b { font-size: 13px; margin-bottom: 2px; }
.bm-modes > span { display: grid; font-size: 11.5px; font-weight: 700; padding: 8px; border-radius: 12px; background: rgba(255, 255, 255, .1); border: 2px solid transparent; transition: border-color .3s, background .3s; }
.bm-modes small { font-size: 9px; font-weight: 500; opacity: .7; }
.bm-modes > span.sel { border-color: #FE2C55; background: rgba(254, 44, 85, .2); }
.bm-labels { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.bm-labels .lb { position: absolute; font-size: 9.5px; font-weight: 800; color: var(--text); background: #ffe27a; padding: 3px 8px; border-radius: 8px; box-shadow: 0 6px 14px rgba(0, 0, 0, .3); text-shadow: none; white-space: nowrap; opacity: 0; }
.bm-labels .lb::after { content: ""; position: absolute; width: 8px; height: 8px; background: #ffe27a; rotate: 45deg; }
.lb-me { left: 8px; bottom: 82px; }
.lb-me::after { left: 12px; bottom: -3px; }
.lb-time { left: 50%; top: 128px; translate: -50% 0; }
.lb-time::after { left: 50%; top: -3px; margin-left: -4px; }
.lb-bar { right: 10px; top: 104px; }
.lb-bar::after { right: 14px; top: -3px; }
.bm-side .bm-cap { margin-bottom: 4px; }

/* ---------- Estilo app TikTok para la batalla ---------- */
.bm-screen { background: #000; }
.bm-bg { background: #000; }
.bm-chips { position: absolute; z-index: 3; top: 72px; left: 10px; display: flex; gap: 5px; }
.bm-chips span { font-size: 8.5px; font-weight: 600; color: #fff; padding: 2px 7px; border-radius: 6px; background: rgba(255, 255, 255, .14); }
.bm-chips span:first-child { background: linear-gradient(90deg, #ff9a3c, #ff5b6b); }
.bm-bar { top: 90px; height: 16px; font-size: 9.5px; }
.bm-grid { top: 106px; bottom: 52px; }
.bm-timer { top: 112px; }
.bb-spark { position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: radial-gradient(circle, #fff 0 18%, #ffe27a 30%, rgba(255, 140, 60, .8) 55%, transparent 70%); filter: drop-shadow(0 0 6px #ffb347); animation: sparkPulse 1s ease-in-out infinite; transition: left .5s var(--ease); }
@keyframes sparkPulse { 50% { scale: 1.25; } }
.bm-screen.no-bar .bb-spark { display: none; }

/* recuadros: cámara con filtro y datos del creador */
.bm-tile { filter: saturate(1.15) contrast(1.03); }
.bm-tile::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(70% 55% at 50% 45%, rgba(255, 255, 255, .22), transparent 70%); pointer-events: none; } /* luz de belleza */
.bm-name { position: absolute; z-index: 3; left: 5px; top: 26px; display: flex; align-items: center; gap: 3px; font-size: 8.5px; font-weight: 700; color: #fff; padding: 2px 5px 2px 6px; border-radius: 99px; background: rgba(0, 0, 0, .4); text-shadow: none; }
.bm-name em { font-style: normal; font-size: 7px; font-weight: 800; padding: 0 4px; border-radius: 4px; background: #4aa3ff; }
.bm-mvp { position: absolute; z-index: 3; right: 4px; bottom: 4px; display: flex; }
.bm-mvp .av { position: relative; width: 15px; height: 15px; border-width: 1px; margin-left: -3px; }
.bm-mvp b { position: absolute; right: -2px; bottom: -3px; font-size: 6px; font-weight: 800; color: #fff; background: #FE2C55; border-radius: 3px; padding: 0 2px; }
.bm-sc { z-index: 3; }
.bm-tile .bm-rank, .bm-tile .bm-crown { z-index: 4; }
.bm-tile .gl-person { z-index: 0; }
/* filtros tipo efecto de TikTok */
.fx { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
.fx i { position: absolute; display: block; }
.fx-spark i { width: 7px; height: 7px; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: twinkle 1.6s ease-in-out infinite; }
.fx-spark i:nth-child(1) { left: 22%; top: 38%; } .fx-spark i:nth-child(2) { left: 70%; top: 30%; animation-delay: .5s; width: 10px; height: 10px; } .fx-spark i:nth-child(3) { left: 60%; top: 58%; animation-delay: 1s; }
@keyframes twinkle { 50% { opacity: .2; scale: .5; } }
.fx-ears i:nth-child(1), .fx-ears i:nth-child(2) { top: calc(100% - 72% * .29 - 72% * 0 - 30px); width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 16px solid #ffb6c9; }
.fx-ears i:nth-child(1) { left: calc(50% - 22px); rotate: -18deg; } .fx-ears i:nth-child(2) { left: calc(50% + 4px); rotate: 18deg; }
.fx-ears i:nth-child(3) { display: none; }
.fx-glasses i:nth-child(1), .fx-glasses i:nth-child(2) { width: 15px; height: 13px; background: #FE2C55; clip-path: path("M7.5 13 C 2 9, 0 6, 0 3.5 A 3.5 3.5 0 0 1 7.5 2 A 3.5 3.5 0 0 1 15 3.5 C 15 6, 13 9, 7.5 13 Z"); opacity: .9; }
.fx-glasses i:nth-child(3) { display: none; }
.fx-flowers i { width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle, #ffe27a 0 30%, #ff8ac2 32%); }
/* posiciones de los filtros según el tamaño del rostro */
.bm-tile .fx-ears i:nth-child(1), .bm-tile .fx-ears i:nth-child(2) { top: 42%; }
.bm-tile .fx-glasses i:nth-child(1) { left: calc(50% - 16px); top: 64%; } .bm-tile .fx-glasses i:nth-child(2) { left: calc(50% + 1px); top: 64%; }
.bm-tile .fx-flowers i:nth-child(1) { left: calc(50% - 18px); top: 49%; } .bm-tile .fx-flowers i:nth-child(2) { left: calc(50% - 5px); top: 46%; } .bm-tile .fx-flowers i:nth-child(3) { left: calc(50% + 8px); top: 49%; }
.bm-grid[data-mode="solo"] .fx, .bm-grid[data-mode="solo"] .bm-name, .bm-grid[data-mode="solo"] .bm-mvp { display: none; }
.bm-screen.pre .bm-mvp { opacity: 0; }
.bm-tile.waiting .fx, .bm-tile.waiting .bm-name, .bm-tile.waiting .bm-mvp { display: none; }

/* regalos, chat y barra inferior como en la app */
.bm-boost { position: absolute; z-index: 5; left: 50%; bottom: 128px; translate: -50% 0; font-size: 9.5px; font-weight: 700; color: #fff; padding: 4px 10px; border-radius: 99px; background: linear-gradient(90deg, #FE2C55, #ff4f9a); white-space: nowrap; box-shadow: 0 6px 16px rgba(254, 44, 85, .45); opacity: 0; }
.bm-boost b { margin-left: 4px; padding-left: 6px; border-left: 1px solid rgba(255, 255, 255, .5); }
.bm-feed { position: absolute; z-index: 5; left: 8px; right: 60px; bottom: 54px; display: grid; gap: 4px; }
.bm-feed span { display: flex; align-items: center; gap: 4px; width: fit-content; max-width: 100%; font-size: 9px; color: #fff; padding: 3px 8px 3px 3px; border-radius: 99px; background: rgba(0, 0, 0, .45); }
.bm-feed .av { width: 15px; height: 15px; border-width: 1px; }
.bm-feed b { color: #ffe27a; }
.bm-feed .rose { width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #ff5b7a 0 45%, #2fc4a4 47% 60%, transparent 62%); }
.bm-feed .join { background: linear-gradient(90deg, rgba(74, 163, 255, .55), rgba(74, 163, 255, .15)); }
.bm-hearts { position: absolute; z-index: 5; right: 12px; bottom: 54px; width: 26px; height: 26px; }
.bm-hearts i { position: absolute; left: 0; bottom: 0; width: 20px; height: 18px; background: #FE2C55; clip-path: path("M10 18 C 3 12, 0 8.5, 0 5 A 5 5 0 0 1 10 3 A 5 5 0 0 1 20 5 C 20 8.5, 17 12, 10 18 Z"); opacity: 0; }
.bm-hearts i:nth-child(3n) { background: #25F4EE; } .bm-hearts i:nth-child(3n+2) { background: #ff8ac2; }
.bm-comment { position: absolute; z-index: 4; left: 8px; right: 8px; bottom: 12px; display: flex; align-items: center; gap: 5px; }
.bm-comment span { flex: 1; font-size: 9.5px; color: rgba(255, 255, 255, .7); padding: 7px 10px; border-radius: 99px; background: rgba(255, 255, 255, .14); }
.bm-comment i { width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, .14) center / 14px no-repeat; }
.bm-comment .c-emoji { background-image: radial-gradient(circle at 35% 40%, #fff 0 9%, transparent 10%), radial-gradient(circle at 65% 40%, #fff 0 9%, transparent 10%), radial-gradient(circle, #ffd34d 0 46%, transparent 48%); background-size: 16px 16px; }
.bm-comment .c-rose { background-image: radial-gradient(circle at 50% 40%, #ff5b7a 0 30%, transparent 32%), linear-gradient(#2fc4a4, #2fc4a4); background-size: 16px 16px, 2px 8px; background-position: center 5px, center 15px; }
.bm-comment .c-gift { background-image: linear-gradient(90deg, transparent 45%, #fff 45% 55%, transparent 55%), linear-gradient(#ff4f9a, #FE2C55); background-size: 14px 12px; background-position: center 7px; }
.bm-comment .c-share { background: #4aa3ff; }
.bm-tools { display: none; }
.bm-screen.pre .bm-tools { display: flex; bottom: 44px; }
.bm-screen.pre .bm-comment .c-gift, .bm-screen.pre .bm-comment .c-rose { visibility: hidden; }
/* hoja y ventana oscuras como en TikTok */
.bm-sheet { background: #1f1f26; color: #fff; }
.bm-sheet .bs-k { color: rgba(255, 255, 255, .55); }
.bm-sheet .bs-layouts .lo { background: rgba(255, 255, 255, .08); color: #fff; }
.bm-sheet .bs-layouts .lo.sel { background: rgba(254, 44, 85, .18); }
.bm-sheet .bs-layouts em { background: rgba(255, 255, 255, .35); }
.bm-sheet .bs-row em.done { background: rgba(255, 255, 255, .15); color: #fff; }
.bm-sheet .bs-row .av { border-color: #1f1f26; }

/* ---------- Creadores ilustrados (people.js) ---------- */
.gl-person.pp { position: absolute !important; inset: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; translate: none !important; z-index: 0; }
.gl-person.pp::before, .gl-person.pp::after { content: none !important; display: none !important; }
.pp-scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.gl-cam::before { content: none; }
.bm-tile .fx { display: none; }
.bm-tile::before { z-index: 1; }
.pp-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.pp-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.gl-person.pp { overflow: hidden; }
.bm-tile::before { z-index: 2; }

/* ---------- 04 · Potenciadores: pantalla LIVE de TikTok ---------- */
.rl { position: relative; width: 100%; max-width: 330px; margin-inline: auto; aspect-ratio: 9 / 19; border-radius: 42px; padding: 0; overflow: hidden; color: #fff; background: radial-gradient(90% 40% at 50% 85%, #2a1f3d 0%, #121018 70%); box-shadow: 0 34px 70px -36px rgba(21, 21, 27, .7), 0 0 0 9px #15151b, 0 0 0 10.5px #2a2a33; text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
.rl::before { content: ""; position: absolute; z-index: 9; top: 10px; left: 50%; width: 76px; height: 20px; margin-left: -38px; border-radius: 20px; background: #000; }
.rl .gl-status { top: 12px; }
.rl .rl-head { z-index: 6; top: 40px; }
.rl-me { background: url("img/live/pro.jpg") 72% 25% / cover, #777 !important; }
.rl-chips { position: absolute; z-index: 6; top: 74px; left: 10px; display: flex; gap: 5px; }
.rl-chips span { font-size: 8.5px; font-weight: 600; padding: 2px 7px; border-radius: 6px; background: rgba(255, 255, 255, .14); }
.rl-chips span:first-child { background: linear-gradient(90deg, #ff9a3c, #ff5b6b); }
.rl .pk { position: absolute; left: 0; right: 0; top: 98px; height: 49%; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
.rl .pk-cam .gl-person { width: 100%; height: 100%; }
.rl .pk-bar { height: 22px; font-size: 11px; }
.rl .pk-timer { top: auto; bottom: 8px; }
.rl .pk-pop { width: 34%; }
.rl .pk-badge { top: 30px; }
.rl .pk-r .pk-name { left: auto; right: 10px; }
.rl-boost { position: absolute; z-index: 7; left: 50%; top: calc(98px + 49% + 10px); translate: -50% 0; display: flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 99px; background: linear-gradient(90deg, #FE2C55, #ff4f9a); font-size: 10px; font-weight: 700; white-space: nowrap; box-shadow: 0 6px 16px rgba(254, 44, 85, .45); opacity: 0; }
.rl-boost img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.rl-boost b { padding-left: 6px; border-left: 1px solid rgba(255, 255, 255, .5); }
.rl-boost b[hidden] { display: none; }
.rl-chat { position: absolute; z-index: 6; left: 10px; right: 50px; bottom: 54px; display: grid; gap: 5px; align-content: end; }
.rl-chat span { display: flex; align-items: center; gap: 5px; width: fit-content; max-width: 100%; font-size: 10px; line-height: 1.25; padding: 3px 9px 3px 3px; border-radius: 99px; background: rgba(255, 255, 255, .1); }
.rl-chat .av { width: 18px; height: 18px; border-width: 1px; }
.rl-chat b { opacity: .7; font-weight: 600; }
.rl-chat em { font-style: normal; font-weight: 800; color: #ffe27a; }
.rl .rl-bar { z-index: 7; bottom: 14px; }
@media (min-width: 860px) {
  .pk-wrap { grid-template-columns: 330px 1fr; gap: 56px; }
}

/* ---------- 01 · Pantalla "Iniciar LIVE" igual a TikTok ---------- */
#inicio .li-ui { font-size: 11px; }
#inicio .li-ui svg { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#inicio .li-x { position: absolute; top: 46px; left: 14px; width: 22px; height: 22px; opacity: 1; }
#inicio .li-x svg { width: 100%; height: 100%; stroke-width: 2.2; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4)); }
#inicio .li-center { position: absolute; top: 44px; right: 10px; display: flex; align-items: center; gap: 5px; padding: 5px 10px 5px 8px; border-radius: 999px; background: rgba(60, 60, 60, .55); font-size: 10.5px; font-weight: 600; }
#inicio .li-center svg { width: 14px; height: 14px; }
#inicio .li-prep { position: absolute; top: 84px; left: 16px; right: 16px; }
#inicio .li-prep b { display: block; font-size: 11.5px; font-weight: 700; line-height: 1.4; }
#inicio .li-prep span { display: inline-block; margin-top: 10px; padding: 5px 12px; border: 1.5px solid rgba(255, 255, 255, .85); border-radius: 999px; font-size: 10.5px; font-weight: 700; }
#inicio .li-tools { position: absolute; left: 6px; right: 6px; bottom: 156px; display: grid; grid-template-columns: repeat(5, 1fr); row-gap: 10px; }
#inicio .li-tools span { display: grid; justify-items: center; gap: 4px; padding: 3px 0; border-radius: 10px; font-size: 8.5px; font-weight: 600; text-align: center; white-space: nowrap; }
#inicio .li-tools svg { width: 22px; height: 22px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); }
#inicio .li-tools em { font-style: normal; font-size: 7px; max-width: 54px; overflow: hidden; text-overflow: ellipsis; }
#inicio .li-eff { display: block; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid #fff; background: url("img/live/host.jpg") center 25% / cover, #9a7; }
#inicio .li-card { position: absolute; left: 8px; right: 8px; bottom: 50px; padding: 8px 10px 10px; border-radius: 12px; background: rgba(70, 70, 70, .6); backdrop-filter: blur(8px); display: grid; gap: 8px; transition: translate .4s cubic-bezier(.2, .8, .2, 1); }
#inicio .li-row { display: flex; align-items: center; gap: 7px; min-height: 22px; }
#inicio .li-card .gl-cover { width: 18px; height: 18px; border-radius: 5px; flex: none; background: url("img/live/host.jpg") center 25% / cover, #777; }
#inicio .li-card .gl-cover span { display: none; }
#inicio .li-card .gl-cover.has-photo { background: url("img/live/sofi.jpg") center 25% / cover, #777; }
#inicio .li-card .gl-title { flex: 1; padding: 2px 3px; }
#inicio .li-card .gl-title b { font-size: 11px; font-weight: 600; }
#inicio .gl-t:empty::before { content: "Agrega un título"; opacity: .55; font-weight: 500; }
#inicio .li-card .gl-go { width: 100%; padding: 9px 0; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: #FE2C55; text-shadow: none; }
#inicio .li-src { position: absolute; left: 0; right: 0; bottom: 30px; display: flex; justify-content: center; gap: 12px; font-size: 9.5px; font-weight: 700; white-space: nowrap; }
#inicio .li-src b, #inicio .li-src span { display: flex; align-items: center; gap: 4px; }
#inicio .li-src span { opacity: .55; color: #fff; }
#inicio .li-src svg { width: 12px; height: 12px; }
#inicio .li-tabs { position: absolute; left: 0; right: 0; bottom: 0; height: 26px; display: flex; justify-content: flex-end; align-items: center; gap: 16px; padding-right: 20px; background: #000; font-size: 9.5px; font-weight: 700; letter-spacing: .02em; opacity: 1; text-shadow: none; }
#inicio .li-tabs span { opacity: .5; }
#inicio .li-tabs b::after { display: none; }
#inicio .gl-screen:has(.gl-title.typing) .li-card { translate: 0 -112px; }
#inicio .gl-screen:has(.gl-title.typing) .li-tools, #inicio .gl-screen:has(.gl-title.typing) .li-src { opacity: 0; }
#inicio .li-tools, #inicio .li-src { transition: opacity .3s; }
#inicio .gal-grid i { background-size: cover; background-position: center 25%; }
#inicio .gal-grid i:nth-child(1) { background-image: url("img/live/host.jpg"); }
#inicio .gal-grid i:nth-child(2) { background-image: url("img/live/sofi.jpg"); }
#inicio .gal-grid i:nth-child(3) { background-image: url("img/live/ana.jpg"); }
#inicio .gal-grid i:nth-child(4) { background-image: url("img/live/estudio.jpg"); }
#inicio .gal-grid i:nth-child(5) { background-image: url("img/live/marco.jpg"); }
#inicio .gal-grid i:nth-child(6) { background-image: url("img/live/rival.jpg"); }
/* sala LIVE (vista del creador) igual a TikTok */
#inicio .li-room .rm-top { top: 40px; }
#inicio .li-room .rm-host { padding: 3px 12px 3px 3px; background: rgba(40, 40, 40, .45); }
#inicio .li-room .rm-host b { font-size: 11px; }
#inicio .li-room .rm-host small { font-size: 9px; }
#inicio .li-room .rm-host em.vw { font-style: normal; display: inline; width: auto; height: auto; background: none; font-size: 9px; font-weight: 600; }
#inicio .li-av { width: 28px; height: 28px; border: 0; background: url("img/live/host.jpg") center 25% / cover, #777; }
#inicio .li-room .rm-viewers .av { width: 20px; height: 20px; }
#inicio .li-pow { display: grid; place-items: center; width: 24px; height: 24px; margin-left: 8px; }
#inicio .li-pow svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
#inicio .li-room .rm-chips { top: 76px; left: auto; right: 10px; }
#inicio .li-room .rm-chips span { display: flex; align-items: center; gap: 4px; padding: 4px 7px; border-radius: 8px; background: rgba(60, 60, 60, .5); font-size: 8px; }
#inicio .li-room .rm-chips i { width: 5px; height: 5px; border-radius: 50%; background: #3ddc84; }
#inicio .li-room .rm-chips svg { width: 12px; height: 12px; }
#inicio .li-room .rm-chat { bottom: 46px; right: 40px; gap: 6px; }
#inicio .li-room .rm-chat span { align-items: flex-start; }
#inicio .li-sys em { font-style: normal; font-size: 9.5px; line-height: 1.3; }
#inicio .li-tt { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(60, 60, 60, .6); }
#inicio .li-tt svg { width: 10px; height: 10px; }
#inicio .li-room .rm-gift { bottom: 140px; }
#inicio .li-room .rm-bar { left: 0; right: 0; bottom: 0; gap: 6px; padding: 6px 8px 8px; background: #000; }
#inicio .li-room .rm-bar i { width: 26px; height: 26px; background: rgba(255, 255, 255, .14); }
#inicio .li-room .rm-bar svg { width: 15px; height: 15px; }
#inicio .li-gap { flex: 1; }
#inicio .li-fx { background: url("img/live/host.jpg") center 25% / cover !important; border-radius: 7px !important; }
#inicio .li-room .rm-hearts { bottom: 40px; right: 10px; }
#inicio .gl-screen em { color: #fff; }
#inicio .li-room .rm-gift { bottom: 176px; }
/* batalla igual a la app (captura real) */
.rl { background: #000; }
.rl .rl-head .rm-host { padding: 3px 3px 3px 3px; gap: 6px; background: rgba(255, 255, 255, .12); }
.rl .rl-head .rm-host small { font-size: 8.5px; }
.rl .rl-head .rm-host em { width: auto; height: auto; padding: 4px 9px; border-radius: 99px; font-size: 10px; font-weight: 700; }
.rl .rl-head .rm-viewers b { background: rgba(255, 255, 255, .14); }
.rl-chips { right: 10px; justify-content: space-between; align-items: center; }
.rl-chips span:first-child { background: rgba(255, 255, 255, .12); }
.rl-chips span { font-size: 9px; padding: 3px 8px; border-radius: 8px; }
.rl-pw { display: flex; gap: 3px; padding: 3px 6px !important; background: linear-gradient(90deg, #3b2a7a, #5a3fb0) !important; }
.rl-pw img { width: 14px; height: 14px; border-radius: 4px; object-fit: cover; }
.rl .pk { top: 118px; height: 40%; gap: 3px; background: #000; }
.rl .pk-bar { height: 17px; font-size: 10.5px; }
.rl .pk-me { background: linear-gradient(90deg, #ff2d7a, #ff4f9a); }
.rl .pk-them { background: linear-gradient(90deg, #ff6fb0, #3f8cff); }
.rl .pk-side { margin-top: 17px; }
.rl .pk-timer { top: 21px; bottom: auto; padding: 4px 10px 4px 6px; background: rgba(20, 20, 24, .85); border-radius: 8px; font-size: 11px; }
.rl .pk-timer b { font-size: 0; width: 16px; height: 10px; padding: 0; border-radius: 3px; background: linear-gradient(90deg, #ff2d7a 50%, #25d6d0 50%); }
.rl .pk-name { display: none; }
.rl .pk-badge { top: 26px; }
.rl-tops { position: absolute; z-index: 6; left: 8px; right: 8px; top: calc(118px + 40% + 6px); display: flex; justify-content: space-between; }
.rl-tops span { display: flex; gap: 6px; }
.rl-tops .av { position: relative; width: 22px; height: 22px; border-width: 1px; }
.rl-tops .av b { position: absolute; right: -4px; bottom: -4px; font-size: 8px; font-weight: 800; color: #ff6b9a; text-shadow: 0 0 2px #000; }
.rl-tops span:last-child .av b { color: #25d6d0; }
.rl-boost { top: calc(118px + 40% + 36px); }
.rl-chat { left: 12px; right: 12px; bottom: 54px; gap: 9px; }
.rl-chat > span { display: flex; align-items: flex-start; gap: 7px; width: auto; padding: 0; border-radius: 0; background: none; font-size: 10.5px; font-weight: 700; }
.rl-chat > span > span { display: grid; gap: 1px; }
.rl-chat .av { width: 22px; height: 22px; flex: none; }
.rl-chat b { display: block; opacity: .6; font-weight: 600; font-size: 9.5px; }
.rl-chat b small { font-size: 7.5px; padding: 1px 4px; border-radius: 4px; background: rgba(255, 255, 255, .18); opacity: 1; }
.rl-chat .rl-me { border: 0; }
.rl .rl-bar { left: 8px; right: 8px; bottom: 12px; gap: 6px; }
.rl .rl-bar .rm-input { display: flex; justify-content: space-between; align-items: center; padding: 7px 8px 7px 12px; background: rgba(255, 255, 255, .14); }
.rl .rl-bar .rm-input svg { width: 16px; height: 16px; }
.rl .rl-bar i { width: 28px; height: 28px; background: rgba(255, 255, 255, .14); }
.rl .rl-bar svg { width: 17px; height: 17px; stroke-width: 1.6; }
.rl-chat span span { display: grid; padding: 0; border-radius: 0; background: none; width: auto; }
.rl-chat span span b { margin-bottom: 1px; }
.rl em { color: #fff; }
.rl .rl-chat em { color: #ffe27a; }
.rl-chat span span { display: block; }

/* más fiel a la app */
.rl, .rl * { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; }
.rl { text-shadow: none; }
.rl-chest { position: absolute; z-index: 6; top: 96px; left: 12px; font-size: 18px; line-height: 1; }
.rl .pk { top: 122px; height: 41%; }
.rl-tops { top: calc(122px + 41% + 6px); }
.rl-chat { top: calc(122px + 41% + 36px); bottom: 52px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; gap: 8px; }
.rl-chat > span { font-size: 11px; font-weight: 600; line-height: 1.3; }
.rl-chat b { font-size: 10.5px; font-weight: 500; opacity: .62; }
.rl-sys > span, .rl-join > span { display: block !important; font-weight: 500; opacity: .92; }
.rl-sys strong { font-weight: 700; color: #ffe27a; }
.rl-tt, .rl-wave { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, .16); font-style: normal; font-size: 11px; }
.rl-tt svg { width: 11px; height: 11px; }
.rl-join b { display: inline !important; font-size: 11px !important; }
.rl .rl-head .rm-host b { font-size: 12px; font-weight: 700; }
.rl .pk-bar { font-weight: 700; }
.rl .pk-pop { width: 26%; border-radius: 16px; }