/* El índice de secciones («el menú»), en producción desde el 6-oct-2026. Ver indice.js. No depende de los estilos de las películas, salvo en
   el celular, donde vive dentro de su menú (medidas en «px de diseño» del lienzo de 390). */

/* ---------- escritorio: los puntos a la derecha ----------
   Mientras no toca (ver indice.js) no existe: ni se ve ni recibe el cursor ni el teclado. Ya puesto, en reposo son solo
   los puntos (chicos, a media tinta; el de la sección en la que vas, entero y más grande) y al pasarles el cursor se
   abre la hoja con los nombres.
   Nitidez: la hoja se acomoda con «top» en pixeles enteros (nada de translate con porcentajes), las medidas llegan ya
   redondeadas desde indice.js (--fila, --punto, --col, --orilla) y el punto se dibuja a su tamaño más grande y se achica
   con scale(.6): nunca se agranda un dibujo ya hecho. Sin will-change. */
.indice {
  --i-tinta: #0b132b; --i-tinta-2: #5b6478; --i-out: cubic-bezier(.22, 1, .36, 1); --k: 1; --fila: 26px; --punto: 10px; --col: 46px; --orilla: 12px; --mete: 0px;
  position: fixed; z-index: 45; right: 0; top: 30%; margin: 0; padding: var(--orilla) 0;
  border-radius: calc(20px * var(--k)) 0 0 calc(20px * var(--k)); background: rgba(255, 255, 255, 0); box-shadow: 0 20px 56px -22px rgba(11, 19, 43, 0);
  font-family: "Inter", system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: background-color .2s ease, box-shadow .2s ease, opacity .25s ease, visibility 0s linear .25s, top .4s var(--i-out);
}
/* (top: si la línea del hero se midió tarde —se cargó a media película—, el índice se sube deslizándose, no de golpe) */
.indice--puesto { opacity: 1; visibility: visible; pointer-events: auto; transition: background-color .2s ease, box-shadow .2s ease, opacity .25s ease, visibility 0s, top .4s var(--i-out); }
.indice ol { display: flex; flex-direction: column; align-items: flex-end; margin: 0; padding: 0; list-style: none; }
.indice li { display: block; width: 100%; }
.indice button { display: flex; align-items: center; justify-content: flex-end; width: 100%; height: var(--fila); margin: 0; padding: 0; border: 0; background: none; color: var(--i-tinta-2); font: 500 calc(13.5px * var(--k))/var(--fila) "Inter", system-ui, -apple-system, sans-serif; letter-spacing: -.005em; white-space: nowrap; cursor: pointer; }
.indice span { display: block; max-width: 0; padding-left: 0; overflow: hidden; opacity: 0; transform: translateX(8px); transition: max-width .26s var(--i-out), padding-left .26s var(--i-out), opacity .14s ease, transform .26s var(--i-out), color .12s ease; }
.indice i { display: grid; place-items: center; flex: none; width: var(--col); height: var(--fila); }
.indice i::before { content: ""; width: var(--punto); height: var(--punto); border-radius: 50%; background: var(--i-tinta); opacity: .26; transform: scale(.6); transition: transform .22s var(--i-out), opacity .16s ease; }
.indice button[aria-current="true"] i::before { opacity: 1; transform: none; }

.indice:hover, .indice:focus-within { background: rgba(255, 255, 255, .96); box-shadow: 0 20px 56px -22px rgba(11, 19, 43, .42); }
.indice:hover span, .indice:focus-within span { max-width: calc(300px * var(--k)); padding-left: calc(22px * var(--k)); opacity: 1; transform: none; transition-duration: .3s, .3s, .22s, .3s, .12s; }
.indice:hover i::before, .indice:focus-within i::before { opacity: .34; }
.indice:hover button[aria-current="true"] i::before, .indice:focus-within button[aria-current="true"] i::before { opacity: 1; }
.indice button[aria-current="true"] { color: var(--i-tinta); font-weight: 600; }
.indice button:hover { color: var(--i-tinta); }
.indice button:hover i::before { opacity: 1; transform: scale(.8); }
.indice button[aria-current="true"]:hover i::before { transform: none; }
/* con barra de scroll a la vista (clase .indice--mete, la pone indice.js): los puntos se corren hacia la barra lo que ella
   mide (--mete, pixeles enteros) y los nombres de la hoja lo mismo, para que cada uno quede a la misma distancia de su
   punto. Sin barra nada de esto actúa: todo queda como arriba. */
.indice--mete span { transform: translateX(calc(8px + var(--mete))); }
.indice--mete:hover span, .indice--mete:focus-within span { transform: translateX(var(--mete)); }
.indice--mete i::before { transform: translateX(var(--mete)) scale(.6); }
.indice--mete button[aria-current="true"] i::before { transform: translateX(var(--mete)); }
.indice--mete button:hover i::before { transform: translateX(var(--mete)) scale(.8); }
.indice--mete button[aria-current="true"]:hover i::before { transform: translateX(var(--mete)); }
.indice button:focus { outline: none; }
.indice button:focus-visible span { text-decoration: underline; text-decoration-color: #00cfff; text-decoration-thickness: 2px; text-underline-offset: 4px; }
/* al llegar al final: los puntos salen uno tras otro, del primero al último */
@keyframes indice-sale { from { opacity: 0; transform: translateX(calc(10px * var(--k))); } }
.indice--estrena i { animation: indice-sale .5s var(--i-out) calc(var(--i) * 45ms) backwards; }

/* ---------- celular: la lista dentro del menú de hamburguesa, debajo del botón ----------
   Los renglones se reparten el alto que queda (en un teléfono chaparro se aprietan, nunca se salen). */
.menu.menu--secc { display: flex; flex-direction: column; padding-bottom: 22px; }
.menu--secc .menu__liga { flex: none; }
.menu__secc { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; margin-top: 26px; opacity: 0; transform: translateY(18px); transition: opacity .2s ease, transform .2s ease; }
.abierto .menu__secc { opacity: 1; transform: none; transition: opacity .45s ease .3s, transform .7s var(--out) .3s; }
.menu__secc-t { flex: none; margin: 0 0 8px; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.menu__secc ol { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; margin: 0; padding: 0; list-style: none; }
.menu__secc li { flex: 1 1 0; display: flex; min-height: 24px; max-height: 42px; }
.menu__secc button { flex: 1; display: flex; align-items: center; gap: 14px; margin: 0; padding: 0; border: 0; background: none; color: rgba(255, 255, 255, .7); font: 500 17px/1.1 var(--sans); letter-spacing: -.012em; text-align: left; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.menu__secc i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .32); transition: transform .2s var(--out); }
.menu__secc button[aria-current="true"] { color: #fff; font-weight: 600; }
.menu__secc button[aria-current="true"] i { background: var(--cian); transform: scale(1.6); }
.menu__secc button:active { color: #fff; }
.menu__secc button:focus { outline: none; }