* { box-sizing: border-box; }
:root { color-scheme: dark; --base:#101416; --panel:#1d2426; --ink:#f3f4e9; --muted:#b0bcba; --lime:#dcf875; }
html { scroll-padding-top: 5.5rem; }
body { margin:0; background:var(--base); color:var(--ink); font:16px/1.5 Inter,system-ui,sans-serif; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; color:inherit; }
button, .primary { display:inline-flex; align-items:center; justify-content:center; padding:.68rem 1.15rem; border:1px solid #566261; border-radius:6px; background:#1d2426; gap:.55rem; min-height:44px; }
:focus { outline:3px solid var(--lime); outline-offset:4px; }
.skip { position:fixed; top:0; left:-100vw; z-index:4; background:var(--base); padding:.7rem; }
.skip:focus { left:1rem; }
.bar { position:sticky; top:0; z-index:2; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem clamp(1.1rem,5vw,5rem); background:#101416; border-bottom:1px solid #303837; }
.brand { white-space:nowrap; font-size:1.32rem; font-weight:800; letter-spacing:-.045em; }
.brand b { display:inline-block; margin-right:.25rem; color:var(--lime); font-size:1.75rem; line-height:.85; }
.brand span { margin-left:.28rem; font-size:.77rem; color:var(--lime); letter-spacing:.08em; }
nav { display:flex; gap:.6rem; }
nav button { border:0; background:transparent; }
.hero { min-height:clamp(370px,44vw,620px); display:flex; align-items:end; position:relative; isolation:isolate; background:#202924; overflow:hidden; }
.hero::after { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#101416 0%,rgba(16,20,22,.86) 22%,transparent 85%),linear-gradient(0deg,#101416,transparent 56%); }
.hero img { position:absolute; inset:0 0 0 auto; width:81%; height:100%; object-fit:cover; object-position:center 37%; z-index:-2; }
.hero-copy { padding:4rem clamp(1.1rem,5vw,5rem) 3rem; max-width:51rem; }
.meta { color:var(--lime); font-weight:750; font-size:.84rem; letter-spacing:.1em; text-transform:uppercase; }
h1,h2,p { margin:0 0 .7rem; }
h1 { max-width:19ch; font-size:clamp(2.7rem,6.7vw,6rem); line-height:.96; letter-spacing:-.065em; }
#hero-description { max-width:57ch; color:#d9dfd6; margin:1.2rem 0 1.55rem; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.actions { display:flex; flex-wrap:wrap; gap:.75rem; }
.primary { font-weight:750; color:#161c10; background:var(--lime); border-color:var(--lime); }
#cartelera { padding:1rem clamp(1.1rem,5vw,5rem) 3rem; }
.filters { display:flex; overflow:auto; padding:.55rem .4rem .8rem; gap:.65rem; margin:0 -.4rem 1.35rem; }
.filters button { white-space:nowrap; background:transparent; }
.filters [aria-pressed=true] { background:var(--lime); border-color:var(--lime); color:#161c10; font-weight:750; }
.shelf { margin:0 0 2.2rem; }
.shelf h2 { font-size:clamp(1.45rem,2.3vw,2rem); letter-spacing:-.035em; margin-bottom:.12rem; }
.shelf p,footer { color:var(--muted); }
.cards { display:grid; grid-auto-flow:column; grid-auto-columns:clamp(130px,16.8vw,245px); gap:1rem; overflow:auto; padding:.65rem .4rem 1.05rem; margin:0 -.4rem; scrollbar-color:#59635c transparent; }
.card { display:flex; flex-direction:column; align-items:start; justify-content:start; padding:0; gap:0; background:var(--panel); border:1px solid #333d3a; border-radius:7px; overflow:hidden; text-align:left; }
.card img { width:100%; aspect-ratio:2/3; object-fit:cover; background:#303c38; color:var(--muted); }
.card strong { padding:.7rem .75rem .1rem; line-height:1.25; }
.card small { color:var(--muted); padding:0 .75rem .75rem; }
.card:focus { border-color:var(--lime); }
footer { border-top:1px solid #303837; padding:1.15rem clamp(1.1rem,5vw,5rem); font-size:.83rem; }
dialog { width:min(90vw,760px); padding:1.5rem; border:1px solid #566261; border-radius:10px; background:var(--panel); color:var(--ink); max-height:86vh; }
dialog::backdrop { background:rgba(0,0,0,.8); }
.detail-layout { display:grid; grid-template-columns:minmax(95px,28%) 1fr; gap:1.5rem; align-items:center; }
.detail-layout img { width:100%; aspect-ratio:2/3; object-fit:cover; background:#303c38; border-radius:5px; }
.detail-layout h2 { font-size:clamp(1.5rem,4vw,2.7rem); line-height:1.1; }
.detail-layout .actions { margin-top:1rem; }
.close { float:right; padding:0 .65rem; font-size:1.4rem; }
@media(max-width:580px) { .bar { gap:.35rem; } nav { gap:0; } nav button { padding:.45rem; } .hero img { width:100%; } .hero::after { background:linear-gradient(0deg,#101416 0%,rgba(16,20,22,.67) 45%,transparent 100%); } .detail-layout { display:block; } .detail-layout img { width:105px; float:left; margin:0 .85rem .6rem 0; } }

.cover-placeholder { display:grid; place-items:center; width:100%; aspect-ratio:2/3; padding:.7rem; color:var(--lime); background:#2c3b32; font-size:1.3rem; font-weight:800; text-align:center; }
.detail-layout:has(> img[hidden]) { grid-template-columns:1fr; }

[hidden] { display:none !important; }
.brand { display:inline-flex; align-items:center; gap:.5rem; }
.brand img { width:42px; height:42px; border-radius:10px; }
.brand strong { color:#dceeff; }
.brand em { color:#3fa4ff; font-style:normal; }
.secondary { display:inline-flex; align-items:center; padding:.65rem 1rem; border:1px solid #566261; border-radius:6px; background:#1d2426; }
.collection-grid { grid-auto-flow:row; grid-auto-columns:auto; grid-template-columns:repeat(auto-fill,minmax(min(100%,140px),1fr)); overflow:visible; padding-top:1.2rem; }
.collection-grid + .collection-link { margin-top:1rem; }
.shelf > h1 { margin:1rem 0; font-size:clamp(2rem,5vw,4rem); max-width:none; }
.pagination { justify-content:center; align-items:center; flex-wrap:wrap; margin:1rem auto 0; }
.pagination button:disabled { opacity:.4; cursor:default; }
.card { transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.card:focus-visible, .card:active, .card.touched { transform:translateY(-5px) scale(1.025); border-color:var(--lime); box-shadow:0 10px 24px #0008; z-index:1; }
@media (hover:hover) { .card:hover { transform:translateY(-5px) scale(1.025); border-color:var(--lime); box-shadow:0 10px 24px #0008; z-index:1; } }
@media (prefers-reduced-motion:reduce) { .card { transition:none; } }
.providers { color:var(--muted); margin-top:1rem; }

.trailer-panel { margin-top:1rem; }
.trailer-panel iframe { display:block; width:100%; aspect-ratio:16/9; border:0; margin-top:.7rem; background:#080c0d; }