@charset "utf-8";

/* ===============================
   ÍNDICE DE SECCIONES: riel de bolitas a la derecha (Cartelera, Inicio, Nosotros, Alquiler y cada Show)
   Fijo mientras se baja. La bolita de la categoría actual se ilumina.
   El JS (indice-puntos.js) marca .is-active, muestra el nombre un momento al cambiar
   de sección (.is-mostrar) y calcula --cart-hdr (alto del encabezado fijo).
=============================== */
:root { --cart-hdr: 118px; }

/* Al saltar a una sección, que no quede tapada por el encabezado fijo */
.contenedor-cartelera,
[data-indice] { scroll-margin-top: calc(var(--cart-hdr) + 24px); }

.indice-puntos {
    position: fixed;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 60;              /* por debajo del encabezado (9999) y de los diálogos */
    transition: opacity .35s ease, visibility .35s ease;
}
.indice-puntos.is-oculto { opacity: 0; visibility: hidden; pointer-events: none; }

.indice-puntos__lista {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 34px;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(176, 141, 46, 0.55);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
/* la línea que une las bolitas */
.indice-puntos__lista::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 22px;
    bottom: 22px;
    width: 2px;
    transform: translateX(-50%);
    background: linear-gradient(to bottom, rgba(176, 141, 46, 0.2), rgba(176, 141, 46, 0.7), rgba(176, 141, 46, 0.2));
    border-radius: 2px;
}

.indice-puntos__item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    text-decoration: none;
    outline: none;
}

.indice-puntos__punto {
    position: relative;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #000;
    border: 2px solid #b08d2e;
    transition: transform .3s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}

/* el nombre sale a la izquierda de la bolita sin mover nada del riel */
.indice-puntos__nombre {
    position: absolute;
    max-width: none; /* el Inicio trae "* { max-width: 100% }", que aplastaba el nombre al ancho de la bolita */
    right: calc(100% + 12px);
    top: 50%;
    transform: translate(10px, -50%);
    padding: 5px 14px;
    white-space: nowrap;
    font-family: 'Cinzel Decorative', serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #C9C2B4;
    background: rgba(0, 0, 0, 0.82);
    border: 1px solid rgba(176, 141, 46, 0.6);
    border-radius: 999px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease, transform .3s ease, color .3s ease, background-color .3s ease;
}

/* bolita: al pasar el mouse o enfocar con teclado */
.indice-puntos__item:hover .indice-puntos__punto,
.indice-puntos__item:focus-visible .indice-puntos__punto {
    background: #b08d2e;
    transform: scale(1.2);
}
.indice-puntos__item:hover .indice-puntos__nombre,
.indice-puntos__item:focus-visible .indice-puntos__nombre,
.indice-puntos__item.is-mostrar .indice-puntos__nombre {
    opacity: 1;
    transform: translate(0, -50%);
}

/* categoría actual: se ilumina */
.indice-puntos__item.is-active .indice-puntos__punto {
    background: #dd910d;
    border-color: #e4b44a;
    transform: scale(1.35);
    box-shadow: 0 0 0 4px rgba(221, 145, 13, 0.25), 0 0 14px 3px rgba(221, 145, 13, 0.85);
}
.indice-puntos__item.is-active .indice-puntos__nombre {
    color: #dd910d;
    border-color: #dd910d;
    box-shadow: 0 0 12px rgba(221, 145, 13, 0.35);
}

@media (prefers-reduced-motion: no-preference) {
    .indice-puntos__item.is-active .indice-puntos__punto { animation: indice-latido 2.4s ease-in-out infinite; }
}
@keyframes indice-latido {
    0%, 100% { box-shadow: 0 0 0 4px rgba(221, 145, 13, 0.25), 0 0 14px 3px rgba(221, 145, 13, 0.85); }
    50%      { box-shadow: 0 0 0 7px rgba(221, 145, 13, 0.10), 0 0 20px 6px rgba(221, 145, 13, 1); }
}

/* Pantallas anchas: sobra margen a los lados, así que todos los nombres se ven siempre */
@media (min-width: 1560px) {
    .indice-puntos { right: 26px; }
    .indice-puntos__nombre { opacity: 1; transform: translate(0, -50%); }
    .indice-puntos__item:not(.is-active) .indice-puntos__nombre { opacity: .8; }
}

@media (max-width: 650px) {
    .indice-puntos { right: 6px; }
    .indice-puntos__lista { width: 28px; padding: 6px 0; }
    .indice-puntos__item { height: 30px; }
    .indice-puntos__punto { width: 11px; height: 11px; }
    .indice-puntos__nombre { font-size: 11px; letter-spacing: 1px; padding: 4px 11px; right: calc(100% + 8px); }
}

/* CELULAR: más alto el área que se toca en cada bolita (antes 30 px) */
@media (max-width: 650px) {
    .indice-puntos__item { height: 38px; }
}