:root{
    --bg: #4a4d54;
    --wall: #17171b;
    --gold: #c9a227;
    --red: #8c1c13;
    --text: #ece7dd;
    --dim: #7d7a72;
  }
 
  *{ box-sizing: border-box; }
  html, body{
    margin:0; height:100%;
    background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRrFq_kSVAxjUpkv8z2VwlyIgbKra9EIwI-SxWYX38ArA&s=10");
    background-size: 1290px 650px;
    overflow:hidden; font-family:'Lacquer', sans-serif; color: var(--text);
  }
 
  /* franja tipo film-strip arriba y abajo */
  .filmstrip{
    position:fixed; left:0; right:0; height:22px; z-index:20;
    background-image: repeating-linear-gradient(90deg, #000 0 10px, transparent 10px 24px);
    background-color:#000;
  }
  .filmstrip.top{ top:0; box-shadow:0 2px 12px rgba(0,0,0,.6); }
  .filmstrip.bottom{ bottom:0; box-shadow:0 -2px 12px rgba(0,0,0,.6); }
 
  header{
    position:fixed; top:22px; left:0; right:0; z-index:15;
    text-align:center; padding:14px 0 6px;
    background:linear-gradient(180deg, rgba(0,0,0,.85), transparent);
    pointer-events:none;
  }
  header h1{
    font-family:'Lacquer', sans-serif;
    letter-spacing:4px;
    font-size: clamp(28px, 5vw, 48px);
    margin:0; color: var(--gold);
    text-shadow: 0 0 18px rgba(201,162,39,.35);
  }
  header p{ margin:2px 0 0; font-size:12px; letter-spacing:2px; color:var(--dim); text-transform:uppercase; }
 
  .escena{
    position:relative; width:100%; height:100vh;
    perspective: 900px; overflow:hidden;
  }
 
  /* haz de luz de proyector que sigue el scroll */
  .haz{
    position:absolute; top:0; left:50%; width:140vw; height:100%;
    background: radial-gradient(ellipse 40% 60% at 50% 15%, rgba(201,162,39,.10), transparent 60%);
    transform: translateX(-50%);
    pointer-events:none; z-index:5;
  }
 
  .piso{
    position:absolute; left:0; right:0; height:50%; bottom:0;
    transform-origin:bottom; transform: rotateX(78deg);
    background:
      repeating-linear-gradient(45deg, rgba(201,162,39,.14) 0 2px, transparent 2px 46px),
      repeating-linear-gradient(-45deg, rgba(201,162,39,.14) 0 2px, transparent 2px 46px),
      radial-gradient(ellipse at 50% 0%, #5a1414, #3a0c0c 70%);
  }
 
  .pasillo{
    position:absolute; top:50%; left:50%; width:0; height:0;
    transform-style: preserve-3d;
    transition: transform .05s linear;
  }
 
  .marco{
    position:absolute; top:-160px; width:220px;
    cursor:pointer;
  }
 
  .poster{
    width:220px; height:300px; position:relative;
    background: linear-gradient(160deg, #2a2a30, #101012);
    border:3px solid rgba(201,162,39,.35);
    box-shadow: 0 20px 50px rgba(0,0,0,.75);
    display:flex; align-items:flex-end; justify-content:center;
    padding:14px; text-align:center;
    background-size:cover; background-position:center;
  }
  .poster span{
    font-family:'Lacquer', sans-serif;
    font-size:20px; letter-spacing:1px;
    color:#f2ede0; text-shadow:0 2px 6px rgba(0,0,0,.9);
  }
  .poster::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(180deg, transparent 55%, rgba(0,0,0,.75));
  }
 
  .marco:hover .poster{ border-color: rgba(201,162,39,.8); }
 
  .aviso{
    position:fixed; bottom:30px; left:50%; transform:translateX(-50%);
    font-size:12px; letter-spacing:1px; color:var(--dim); z-index:15;
    text-transform:uppercase;
  }
 
  .poster{ cursor:pointer; }
 
  /* modal de info */
  .modal-overlay{
    position:fixed; inset:0; z-index:50;
    background: rgba(0,0,0,.75);
    display:none; align-items:center; justify-content:center;
    backdrop-filter: blur(2px);
  }
  .modal-overlay.show{ display:flex; }
 
  .modal{
    width:min(560px, 90vw);
    max-height:80vh; overflow-y:auto;
    background: linear-gradient(180deg, #1a1a1e, #101012);
    border:1px solid rgba(201,162,39,.4);
    border-radius:6px;
    box-shadow: 0 30px 80px rgba(0,0,0,.8);
    padding:26px 28px 22px;
    position:relative;
  }
 
  .modal-cerrar{
    position:absolute; top:14px; right:18px;
    color:var(--dim); cursor:pointer; font-size:14px;
    letter-spacing:1px;
  }
  .modal-cerrar:hover{ color: var(--gold); }
 
  .modal h2{
    font-family:'Fuzzy Bubbles', sans-serif;
    letter-spacing:2px; font-size:30px;
    color: var(--gold); margin:0 0 4px;
  }
  .modal .meta{
    font-size:12px; color:var(--dim); letter-spacing:1px;
    text-transform:uppercase; margin-bottom:18px;
  }
 
  .modal-tabs{ display:flex; gap:8px; margin-bottom:16px; }
  .modal-tabs button{
    flex:1; padding:8px 10px; font-size:12px; letter-spacing:1px;
    text-transform:uppercase; cursor:pointer;
    background:transparent; color:var(--dim);
    border:1px solid rgba(201,162,39,.3); border-radius:3px;
    font-family:'Fuzzy Bubbles', sans-serif;
  }
  .modal-tabs button.activo{
    background: rgba(201,162,39,.15); color: var(--gold);
    border-color: var(--gold);
  }
 
  .modal-panel{ display:none; font-size:14px; line-height:1.6; color:var(--text); }
  .modal-panel.activo{ display:block; }
 
  /* botones de categoría, directamente en el hueco negro del inicio (sin cuadro de fondo) */
  .entrada{
    position:fixed; top:50%; left:150px;
    transform: translateY(-50%);
    z-index:10;
    display:flex; flex-direction:column; gap:18px;
    transition: opacity 350ms ease;
    opacity:1;
  }
  .entrada.oculto{ opacity:0; pointer-events:none; }
 
  .btn-entrada{
    padding:16px 40px; text-align:center;
    background: linear-gradient(180deg, #241a10, #150d08);
    border:2px solid var(--gold); border-radius:4px;
    color: var(--gold); font-family:'Lacquer', sans-serif;
    letter-spacing:3px; font-size:22px;
    cursor:pointer; transition:200ms;
  }
  .btn-entrada:hover{ transform: scale(1.05); }
  .btn-entrada.activo{ background: var(--gold); color:#1a1206; }
 
  .marco.oculto{ display:none; }