/* Zeuzz · piel de casino (portada, barra, login, aviso de edad). Clases cz-*. */
:root {
  --cz-bg: #07070e; --cz-bg2: #0e0e1a; --cz-top: #0b0b15; --cz-card: #141426;
  --cz-rojo: #e5395b; --cz-rojo2: #ff5f7e; --cz-amar: #ffd23f; --cz-txt: #fff; --cz-txt2: #a7acc2; --cz-line: rgba(255, 255, 255, .08);
}
body.cz { background: var(--cz-bg); background-image: none; }
body.cz::before { display: none; }

/* ── barra superior ─────────────────────────────────────────── */
.cz-top {
  position: sticky; top: 0; z-index: 60; height: 60px; display: flex; align-items: center; gap: 10px; padding: 0 16px;
  background: var(--cz-top); border-bottom: 1px solid var(--cz-line); box-shadow: 0 6px 24px -10px rgba(0, 0, 0, .9);
}
.cz-logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: #fff; font-family: var(--font-d); font-weight: 800; font-size: 20px; letter-spacing: .14em; }
.cz-logo svg { width: 30px; height: 30px; color: var(--cz-rojo); filter: drop-shadow(0 0 8px rgba(229, 57, 91, .6)); }
.cz-logo b { color: var(--cz-rojo); }
.cz-nav { display: none; align-self: stretch; margin-left: 22px; }
.cz-nav a {
  display: inline-flex; align-items: center; padding: 0 16px; color: var(--cz-txt2); text-decoration: none; font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  border-bottom: 3px solid transparent; transition: color .15s, background .15s;
}
.cz-nav a:hover { color: #fff; background: rgba(255, 255, 255, .04); }
.cz-nav a.on { color: #fff; background: rgba(229, 57, 91, .12); border-bottom-color: var(--cz-rojo); }
.cz-der { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.cz-saldo { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 8px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(246, 196, 69, .35); color: var(--oro2); font-weight: 800; font-size: 14px; }
.cz-saldo svg { width: 22px; height: 22px; }
.cz-saldo .ars { font-style: normal; font-weight: 900; font-size: 11px; letter-spacing: .06em; color: #fff; opacity: .85; margin-right: -2px; }
.cz-saldo .num { transition: transform .3s var(--spring); display: inline-block; }
.cz-saldo.sube .num { transform: scale(1.18); color: #fff; }
.cz-ico { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--cz-line); background: rgba(255, 255, 255, .05); color: #fff; display: grid; place-items: center; transition: transform .18s var(--spring), background .18s; }
.cz-ico svg { width: 20px; height: 20px; }
.cz-ico:hover { background: rgba(255, 255, 255, .1); transform: translateY(-1px); }
.cz-ico:active { transform: scale(.94); }
.cz-ico:focus-visible, .cz-user:focus-visible, .cz-btn-rojo:focus-visible, .cz-btn-amar:focus-visible, .cz-cat:focus-visible, .cz-prov:focus-visible, .cz-card:focus-visible, .cz-sala:focus-visible { outline: 2px solid var(--cz-amar); outline-offset: 2px; }
.cz-user { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(229, 57, 91, .5); background: linear-gradient(180deg, #ff5f7e, #e5395b); color: #fff; font-weight: 800; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; transition: transform .18s var(--spring), filter .18s; }
.cz-user svg { width: 18px; height: 18px; }
.cz-user:hover { transform: translateY(-1px); filter: brightness(1.06); }
.cz-user:active { transform: scale(.96); }
.cz-user span { display: none; }
.cz-hamb { display: grid; }
.cz-drawer { position: fixed; inset: 60px 0 auto 0; z-index: 59; background: var(--cz-top); border-bottom: 1px solid var(--cz-line); padding: 8px 12px 14px; display: grid; gap: 2px; box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .9); animation: entra .25s var(--spring); }
.cz-drawer[hidden] { display: none; }
.cz-drawer a, .cz-drawer button { display: block; width: 100%; text-align: left; padding: 12px 10px; border-radius: 10px; color: #fff; text-decoration: none; font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; background: transparent; border: 0; }
.cz-drawer a.on { background: rgba(229, 57, 91, .14); color: var(--cz-rojo2); }
.cz-drawer a:hover, .cz-drawer button:hover { background: rgba(255, 255, 255, .06); }
@media (min-width: 900px) { .cz-nav { display: flex; } .cz-hamb { display: none; } .cz-user span { display: inline; } .cz-drawer { display: none !important; } }

/* ── portada ───────────────────────────────────────────────── */
.cz-main { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 0 40px; }
.cz-hero { position: relative; overflow: hidden; height: 250px; background: #0a0d3a; }
.cz-slide { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 10px; padding: 0 20px; opacity: 0; transition: opacity .6s; pointer-events: none; }
.cz-slide.on { opacity: 1; pointer-events: auto; }
.cz-slide-fondo { position: absolute; inset: 0; background-size: cover; background-position: center 30%; z-index: 0; }
.cz-slide-fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 8, 40, .92) 0%, rgba(5, 8, 40, .55) 50%, rgba(5, 8, 40, .3) 100%); }
.cz-hero-txt { position: relative; z-index: 1; }
.cz-hero-txt h1 { margin: 0 0 12px; font-family: var(--font); font-weight: 900; font-size: clamp(22px, 3.6vw, 44px); line-height: 1.05; letter-spacing: -.01em; text-transform: uppercase; color: #fff; text-shadow: 0 4px 20px rgba(0, 0, 0, .6); }
.cz-hero-txt h1 b { color: var(--cz-amar); }
.cz-hero-txt p { margin: 0 0 14px; color: #dfe3ff; font-size: 14px; max-width: 40ch; }
.cz-posters { position: relative; z-index: 1; display: flex; gap: 10px; justify-content: flex-end; align-items: center; }
.cz-posters img { width: 17%; max-width: 118px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 12px; border: 2px solid rgba(255, 255, 255, .55); box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .9), 0 0 24px -8px rgba(124, 217, 255, .6); background: #141426; transition: transform .35s var(--spring); }
.cz-posters img:hover { transform: translateY(-8px) scale(1.04); }
.cz-personaje { position: absolute; left: 0; bottom: -10px; height: 115%; z-index: 0; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .8)); pointer-events: none; }
.cz-dots { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; gap: 6px; z-index: 2; }
.cz-dots button { width: 9px; height: 9px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .35); padding: 0; transition: background .2s, transform .2s; }
.cz-dots button.on { background: #fff; transform: scale(1.2); }
@media (max-width: 760px) { .cz-hero { height: 190px; } .cz-slide { grid-template-columns: 1fr 1.25fr; padding: 0 12px; } .cz-posters img { width: 19%; } .cz-hero-txt p { display: none; } .cz-personaje { display: none; } }

/* buscador + proveedores (celular) */
.cz-busca-m { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 10px 12px; background: var(--cz-bg2); border-bottom: 1px solid var(--cz-line); }
.cz-busca { position: relative; }
.cz-busca svg { position: absolute; left: 12px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--cz-txt2); }
.cz-busca input { width: 100%; height: 44px; border-radius: 12px; border: 1px solid var(--cz-line); background: rgba(255, 255, 255, .06); color: #fff; padding: 0 12px 0 38px; font-size: 14px; }
.cz-busca input::placeholder { color: var(--cz-txt2); }
.cz-btn-provs { height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--cz-line); background: rgba(255, 255, 255, .06); color: #fff; font-weight: 700; font-size: 13px; }
@media (min-width: 900px) { .cz-busca-m { display: none; } }

/* categorías */
.cz-cats { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; background: var(--cz-bg2); border-bottom: 1px solid var(--cz-line); padding: 0 6px; }
.cz-cats::-webkit-scrollbar { display: none; }
.cz-cat { flex: 1 0 auto; min-width: 86px; display: grid; justify-items: center; gap: 4px; padding: 10px 10px 8px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--cz-txt2); font-weight: 800; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; transition: color .15s, background .15s; }
.cz-cat svg { width: 26px; height: 26px; }
.cz-cat:hover { color: #fff; background: rgba(255, 255, 255, .04); }
.cz-cat.on { color: #fff; border-bottom-color: var(--cz-rojo); }

/* proveedores */
.cz-provs { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--cz-bg); border-bottom: 1px solid var(--cz-line); }
.cz-vertodos { flex: none; height: 40px; padding: 0 20px; border-radius: 10px; border: 1px solid var(--cz-line); background: #000; color: #fff; font-weight: 800; font-size: 12px; }
.cz-prov-lista { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px; flex: 1; }
.cz-prov-lista::-webkit-scrollbar { display: none; }
.cz-prov { flex: none; display: grid; justify-items: center; gap: 4px; background: transparent; border: 0; color: var(--cz-txt2); font-weight: 800; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.cz-prov i { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 13px; font-weight: 900; color: #fff; background: #1b1b2e; border: 2px solid var(--cz-line); transition: transform .2s var(--spring), border-color .2s; }
.cz-prov:hover i, .cz-prov.on i { transform: translateY(-2px); border-color: var(--cz-rojo); }
.cz-prov.zz i { background: radial-gradient(circle at 35% 30%, #fff1b8, #f6c445 45%, #c98a1e); color: #2a1a00; border-color: rgba(246, 196, 69, .6); }
.cz-busca-d { display: none; margin-left: auto; width: 260px; }
@media (min-width: 900px) { .cz-busca-d { display: block; } }

/* secciones y grilla */
.cz-sec { padding: 18px 12px 6px; }
.cz-h2 { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; font-family: var(--font); font-weight: 900; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.cz-h2::before, .cz-h2::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .25)); }
.cz-h2::after { background: linear-gradient(90deg, rgba(255, 255, 255, .25), transparent); }
.cz-h2 small { font-weight: 700; font-size: 11px; color: var(--cz-txt2); letter-spacing: .04em; text-transform: none; }
.cz-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@media (max-width: 500px) { .cz-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .cz-grid { grid-template-columns: repeat(6, 1fr); } }
.cz-card { position: relative; display: block; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--cz-card); border: 1px solid var(--cz-line); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .9); text-decoration: none; color: #fff; transition: transform .3s var(--spring), box-shadow .3s; }
.cz-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--spring); }
.cz-card:hover { transform: translateY(-4px); box-shadow: 0 18px 34px -14px rgba(0, 0, 0, 1), 0 0 0 1px rgba(229, 57, 91, .5); }
.cz-card:active { transform: translateY(-1px) scale(.98); }
.cz-card:hover img { transform: scale(1.06); }
.cz-card .cz-card-cap { position: absolute; inset: auto 0 0 0; padding: 26px 10px 10px; background: linear-gradient(to top, rgba(0, 0, 0, .9), rgba(0, 0, 0, 0)); font-weight: 800; font-size: 12px; line-height: 1.25; opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s var(--spring); }
.cz-card:hover .cz-card-cap, .cz-card:focus-visible .cz-card-cap { opacity: 1; transform: none; }
.cz-card .cz-card-cap b { display: block; margin-top: 6px; color: #2a1a00; background: linear-gradient(180deg, #ffe08a, #f6c445); border-radius: 999px; padding: 4px 10px; width: max-content; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.cz-card .cz-etq { position: absolute; left: 8px; top: 8px; padding: 3px 8px; border-radius: 999px; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; background: rgba(0, 0, 0, .6); color: var(--oro2); border: 1px solid rgba(246, 196, 69, .45); }
.cz-card .cz-etq.prac { color: var(--cz-txt2); border-color: var(--cz-line); }
.cz-card.sin-foto { display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #138a55, #063a24 75%); }
.cz-card.sin-foto svg { width: 70% !important; }
.cz-vacio { color: var(--cz-txt2); text-align: center; padding: 30px 0; }

/* salas */
.cz-salas { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .cz-salas { grid-template-columns: repeat(3, 1fr); } }
.cz-sala { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; border: 1px solid var(--cz-line); background-size: cover; background-position: center; text-decoration: none; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .9); transition: transform .3s var(--spring); }
.cz-sala:hover { transform: translateY(-4px); }
.cz-sala img { position: absolute; right: 2%; bottom: 0; height: 100%; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .7)); transition: transform .35s var(--spring); }
.cz-sala:hover img { transform: scale(1.05); }
.cz-sala::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .6), transparent 50%); }
.cz-sala span { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 1; padding: 8px 20px; border-radius: 999px; background: var(--cz-rojo); color: #fff; font-weight: 900; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 8px 20px -6px rgba(229, 57, 91, .8); white-space: nowrap; }
.cz-sala.vivo span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #fff; margin-right: 7px; animation: late 1.2s ease-in-out infinite; }

/* ranking y pie */
.cz-rank { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.cz-rank .tabla-mini { background: var(--cz-card); border: 1px solid var(--cz-line); border-radius: 14px; padding: 12px 14px; }
.cz-rank h3 { margin: 0 0 8px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--cz-txt2); }
.cz-rank ol { margin: 0; padding-left: 20px; }
.cz-rank li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--cz-line); font-size: 14px; }
.cz-rank li .num { color: var(--oro2); font-weight: 800; }
.cz-foot { margin-top: 30px; padding: 30px 20px 40px; background: #000; display: grid; gap: 24px; grid-template-columns: 1fr; color: var(--cz-txt2); font-size: 13px; }
.cz-foot .cz-logo { font-size: 18px; margin-bottom: 8px; }
.cz-foot-cols { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.cz-foot h4 { margin: 0 0 10px; color: #fff; font-size: 15px; }
.cz-foot a { display: block; color: var(--cz-txt2); text-decoration: none; margin: 8px 0; font-size: 13px; }
.cz-foot a:hover { color: #fff; }
.cz-18 { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--cz-txt2); font-weight: 900; font-size: 11px; margin-right: 8px; vertical-align: middle; }
@media (min-width: 900px) { .cz-foot { grid-template-columns: 1.2fr 2fr; } }

/* ── login ─────────────────────────────────────────────────── */
.cz-login { position: relative; min-height: 100vh; background: #05060f; }
.cz-login-fondo { position: absolute; inset: 0; background-size: cover; background-position: center 20%; filter: blur(2px) brightness(.45); }
.cz-login .cz-top { position: relative; }
.cz-login-velo { position: absolute; inset: 60px 0 0 0; display: grid; place-items: start center; padding: 70px 16px 30px; }
.cz-login-caja { position: relative; width: min(400px, 100%); background: rgba(14, 16, 32, .96); border: 1px solid var(--cz-line); border-radius: 12px; padding: 26px 18px 20px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 1); display: grid; gap: 10px; animation: entraCaja .35s var(--spring); }
.cz-login-caja p { margin: 0 0 6px; text-align: center; color: #fff; font-size: 13px; font-weight: 700; line-height: 1.4; }
.cz-login-caja input { height: 46px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .1); background: #1b1e34; color: #fff; padding: 0 14px; font-size: 15px; }
.cz-login-caja input::placeholder { color: #8e93ad; }
.cz-btn-rojo { height: 42px; border-radius: 6px; border: 0; background: var(--cz-rojo); color: #fff; font-weight: 800; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; transition: transform .18s var(--spring), filter .18s; }
.cz-btn-rojo:hover { filter: brightness(1.08); transform: translateY(-1px); }
.cz-btn-rojo:active { transform: scale(.98); }
.cz-btn-rojo[disabled] { opacity: .6; pointer-events: none; }
.cz-btn-amar { display: inline-block; padding: 10px 22px; border-radius: 999px; background: linear-gradient(180deg, #ffe08a, #f6c445); color: #2a1a00; font-weight: 900; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; box-shadow: var(--sh-oro); transition: transform .18s var(--spring); }
.cz-btn-amar:hover { transform: translateY(-1px); }
.cz-btn-amar:active { transform: scale(.97); }
.cz-login-caja small { text-align: center; color: var(--cz-txt2); font-size: 11px; }
.cz-login-caja .login-error { text-align: center; }

/* aviso de edad */
.cz-edad { position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, .78); display: grid; place-items: center; padding: 16px; }
.cz-edad-caja { width: min(360px, 100%); background: #0e1020; border: 1px solid var(--cz-line); border-radius: 12px; padding: 24px 20px 20px; text-align: center; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 1); animation: entraCaja .35s var(--spring); }
.cz-edad-caja h2 { margin: 0 0 12px; font-family: var(--font); font-size: 17px; font-weight: 800; }
.cz-edad-caja p { margin: 0 0 18px; font-size: 13px; color: #fff; }
.cz-edad-caja p b { color: var(--cz-amar); }
.cz-edad-btns { display: flex; gap: 12px; justify-content: center; }
.cz-edad-btns button { min-width: 110px; height: 34px; border-radius: 999px; border: 0; font-weight: 900; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; transition: transform .18s var(--spring); }
.cz-edad-btns button:hover { transform: translateY(-1px); }
.cz-edad-btns .si { background: var(--cz-amar); color: #2a1a00; }
.cz-edad-btns .no { background: var(--cz-rojo); color: #fff; }
.cz-edad-caja small { display: block; margin-top: 12px; color: var(--cz-txt2); font-size: 11px; }