/* ============================================================
   CENTRAL SELECTO — estilos
   Los colores de la marca están aquí arriba: cambia --pink y
   toda la web cambia.
   ============================================================ */
:root{
  --bg:#0f1115; --bar:#17181d; --panel:#1b1e25; --panel-2:#23262e; --line:#2b2f38;
  --pink:#e8447e; --pink-hi:#ff5c97; --pink-lo:#a8306a; --plum:#3a1d33;
  --text:#f3f4f6; --muted:#9097a3; --ok:#4ade80; --bad:#f2545b;
  --sans:"Helvetica Neue",Helvetica,Arial,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px;line-height:1.4;min-height:100vh}
body.locked{overflow:hidden}
button{font:inherit;cursor:pointer;border:0;color:inherit}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible,input:focus-visible,label:focus-within{outline:2px solid var(--pink-hi);outline-offset:2px}
.wrap{max-width:1360px;margin:0 auto;padding:0 10px}
@media(min-width:700px){.wrap{padding:0 18px}}

/* ---------- Logo ---------- */
.logo{display:flex;align-items:center;gap:8px;flex-shrink:0}
.lips{
  width:44px;height:40px;object-fit:cover;display:block;
  -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 72%,transparent 100%);
          mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 72%,transparent 100%);
}
.wordmark{font-weight:900;font-size:17px;line-height:.95;letter-spacing:.01em;text-transform:uppercase}
.wordmark b{display:block;color:var(--pink-hi);font-weight:900}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:var(--pink);color:#fff;font-weight:800;border-radius:4px;
  padding:10px 14px;text-transform:uppercase;letter-spacing:.02em;font-size:13px;
  transition:background .12s;
}
.btn:hover{background:var(--pink-hi)}
.btn:active{background:var(--pink-lo)}
.btn:disabled{background:var(--panel-2);color:var(--muted);cursor:not-allowed}
.btn.block{display:flex;width:100%}
.btn.lg{padding:14px 16px;font-size:15px}

/* ---------- Muro +18 ---------- */
.gate{position:fixed;inset:0;z-index:100;background:#0b0c10;display:grid;place-items:center;padding:20px 14px;overflow:auto}
.gate-card{width:100%;max-width:440px;background:var(--bar);border:1px solid var(--line);border-top:3px solid var(--pink);border-radius:6px;padding:26px 20px 22px;text-align:center}
.gate .lips{width:150px;height:126px;margin:0 auto}
.gate .wordmark{font-size:34px;margin-top:6px}
.tagline{font-size:11px;letter-spacing:.28em;color:var(--pink);text-transform:uppercase;margin-top:10px;font-weight:700}
.gate hr{border:0;border-top:1px solid var(--line);margin:20px 0}
.gate h2{font-size:18px;font-weight:800}
.gate h2 span{background:var(--pink);border-radius:3px;padding:1px 7px;margin-right:6px}
.gate p{color:var(--muted);font-size:13px;margin:10px auto 20px;max-width:36ch}
.link{background:none;color:var(--muted);font-size:13px;padding:12px;text-decoration:underline}

/* ---------- Barra superior ---------- */
.top{background:var(--bar);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.top .wrap{display:flex;align-items:center;gap:10px;height:56px}
.search{flex:1;display:none;max-width:560px;margin:0 auto}
.search input{flex:1;min-width:0;background:#0d0e12;border:1px solid var(--line);border-right:0;color:var(--text);padding:9px 12px;border-radius:4px 0 0 4px;font:inherit;font-size:16px}
.search input::placeholder{color:var(--muted)}
.search button{background:var(--panel-2);border:1px solid var(--line);padding:0 14px;border-radius:0 4px 4px 0;color:var(--muted)}
.spacer{flex:1}
@media(min-width:700px){.search{display:flex}.spacer{display:none}.search input{font-size:14px}}
.search.mobile{display:flex;max-width:none;padding:8px 0 10px}
@media(min-width:700px){.search.mobile{display:none}}

/* ---------- Categorías ---------- */
.nav{background:#13151a;border-bottom:1px solid var(--line)}
.chips{display:flex;gap:6px;overflow-x:auto;padding:9px 0;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex-shrink:0;background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:7px 12px;font-size:13px;font-weight:600;color:#c9ced6}
.chip:hover{border-color:var(--pink);color:#fff}
.chip.on{background:var(--pink);border-color:var(--pink);color:#fff}

/* ---------- Banner VIP ---------- */
.promo{
  margin:14px 0 4px;border-radius:5px;padding:14px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  background:linear-gradient(90deg,var(--plum),#1d1a24 70%);border:1px solid #57284a;
}
.promo strong{font-size:16px;font-weight:800;display:block}
.promo span{color:#c8b3c1;font-size:13px}

.sec{margin:18px 0 10px}
.sec h1{font-size:18px;font-weight:800;border-left:4px solid var(--pink);padding-left:9px;line-height:1.15}
.sec h1 small{font-weight:400;color:var(--muted);font-size:13px;margin-left:6px}
.empty{color:var(--muted);text-align:center;padding:50px 0}

/* ---------- Cuadrícula (tarjetas verticales 9:16) ---------- */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 8px}
@media(min-width:560px){.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 10px}}
@media(min-width:820px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1040px){.grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:20px 12px}}
@media(min-width:1280px){.grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
.card{display:flex;flex-direction:column;min-width:0}
.thumb{position:relative;aspect-ratio:9/16;background:#17181d;border-radius:4px;overflow:hidden;cursor:pointer}
.thumb video{width:100%;height:100%;object-fit:cover;display:block;background:#17181d}
.thumb::after{content:"";position:absolute;inset:0;border:2px solid transparent;border-radius:4px;pointer-events:none;transition:border-color .12s}
.card:hover .thumb::after{border-color:var(--pink)}
/* Icono de play encima de la miniatura (desaparece al reproducir) */
.play{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:rgba(0,0,0,.55);pointer-events:none}
.play::after{content:"";position:absolute;left:21px;top:16px;border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff}
.b{position:absolute;font-size:11px;font-weight:700;padding:1px 5px;border-radius:2px;pointer-events:none;line-height:1.5}
.b.dur{right:5px;bottom:5px;background:rgba(0,0,0,.8);font-variant-numeric:tabular-nums}
.b.pre{left:5px;top:5px;background:var(--pink);letter-spacing:.06em}
.thumb.playing .b,.thumb.playing .play{display:none}
.card h3{font-size:13px;font-weight:600;margin:7px 0 2px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.meta{color:var(--muted);font-size:12px;margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:1.4em}
.meta i{font-style:normal;color:var(--ok)}
.card .btn{margin-top:auto;padding:10px 4px;font-size:12px}
@media(min-width:400px){.card .btn{font-size:13px}}

footer{margin-top:34px;background:var(--bar);border-top:1px solid var(--line);padding:22px 0 90px;color:var(--muted);font-size:12px;text-align:center}
footer nav{margin-bottom:12px;font-size:13px}
footer nav a{text-decoration:underline}
footer nav a:hover{color:var(--pink-hi)}
.rta{display:inline-block;border:1px solid var(--muted);border-radius:3px;padding:1px 6px;font-weight:700;margin-right:6px}

/* Barra fija inferior (solo móvil) */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:15;background:rgba(23,24,29,.96);border-top:1px solid var(--line);padding:8px 10px}
@media(min-width:700px){.dock{display:none}footer{padding-bottom:40px}}

/* ---------- Modal de pago ---------- */
.overlay{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.82);display:grid;place-items:end center;overflow:auto}
@media(min-width:620px){.overlay{place-items:center;padding:20px}}
.modal{width:100%;max-width:400px;background:var(--bar);border:1px solid var(--line);border-top:3px solid var(--pink);border-radius:8px 8px 0 0}
@media(min-width:620px){.modal{border-radius:6px}}
.m-head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--line)}
.m-head h2{font-size:15px;font-weight:800;text-transform:uppercase}
.close{background:none;color:var(--muted);font-size:26px;line-height:1;padding:2px 8px}
.m-body{padding:14px 16px 18px;text-align:center}
.pay,.yape{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:9px 12px;text-align:left}
.pay{margin-bottom:12px}
.pay small,.yape small{color:var(--muted);display:block;font-size:12px}
.pay b{font-size:24px;font-weight:900;color:var(--pink-hi);font-variant-numeric:tabular-nums;white-space:nowrap}
.qr{width:200px;height:auto;display:block;margin:0 auto 12px;border-radius:8px}
.yape b{font-size:19px;font-weight:800;letter-spacing:.03em;font-variant-numeric:tabular-nums}
.copy{padding:9px 14px;min-width:92px}
.copy.done{background:var(--ok);color:#0f1115}
.steps{list-style:none;text-align:left;font-size:13px;color:#c2c7cf;margin:12px 0;display:grid;gap:6px;counter-reset:s}
.steps li{counter-increment:s;display:flex;gap:9px;align-items:center}
.steps li::before{content:counter(s);background:var(--pink);color:#fff;font-weight:800;font-size:11px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;flex-shrink:0}
.file{display:block;border:1px dashed #4a4f5a;border-radius:4px;padding:13px;margin-bottom:10px;background:var(--panel);cursor:pointer;word-break:break-word;font-weight:600}
.file input{position:absolute;opacity:0;width:1px;height:1px}
.file.has{border-style:solid;border-color:var(--ok);color:var(--ok)}
.err{color:var(--bad);font-size:13px;margin-bottom:10px}

.loader{width:56px;height:56px;border-radius:50%;border:4px solid var(--panel-2);border-top-color:var(--pink);margin:22px auto 18px;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.state h3{font-size:18px;font-weight:800}
.state p{color:var(--muted);font-size:13px;margin:8px 0 16px}
.sup{color:var(--pink-hi);text-decoration:underline}
.warn{display:inline-block;margin-top:10px;background:var(--plum);color:var(--pink-hi);border-radius:3px;padding:4px 10px;font-size:12px;font-weight:700;text-transform:uppercase}
.badge{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:28px;font-weight:900;margin:18px auto 12px;color:#0f1115}
.badge.ok{background:var(--ok)} .badge.bad{background:var(--bad)}

@media(prefers-reduced-motion:reduce){*{animation-duration:2s!important;transition:none!important}}