/* C163 — Ranking con la línea del Inicio nuevo y del logo (play azul + CINEDAR blanco/azul).
   Se carga DESPUÉS de ranking.css y solo cambia la cara: fondo azul oscuro de extremo a extremo
   (sin el castillo), detalles en azul, y el título y los laureles siguen DORADOS (es un trofeo).
   Mismo ancho que el Inicio (1460px) para que barra, portada y tablas queden alineadas. */

.rk-hero, .rk-hero.rk-hero--img {
    border-bottom: 1px solid rgba(59, 110, 255, .35);
    background:
        radial-gradient(900px 300px at 50% 15%, rgba(37, 99, 235, .28), transparent 70%),
        radial-gradient(700px 260px at 12% 110%, rgba(104, 70, 217, .2), transparent 70%),
        radial-gradient(700px 260px at 88% 110%, rgba(14, 165, 233, .18), transparent 70%),
        linear-gradient(180deg, #0b0f2a 0%, #0a0d24 60%, #080a1c 100%);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .4);
    margin-top: .7rem;
}
.rk-hero::before, .rk-hero.rk-hero--img::before { opacity: .35; }

/* "Año 2026": pastilla azul, como la franja "ESTRENOS…" del Inicio. */
.rk-hero-month {
    background: linear-gradient(90deg, rgba(37, 99, 235, .45), rgba(14, 165, 233, .35));
    border: 1px solid rgba(96, 165, 250, .6);
    box-shadow: 0 0 14px rgba(59, 130, 246, .3);
}
.rk-hero-sub { color: #d6dcf0; }

/* Mismo ancho que el Inicio. */
.rk-page { max-width: 1460px; padding-left: 1.6rem; padding-right: 1.6rem; }
@media (min-width: 1700px) { .rk-page { max-width: 1580px; } }

/* Pestañas: la activa en el azul del logo. */
.rk-tab { border-color: rgba(59, 110, 255, .35); background: rgba(12, 16, 48, .8); }
.rk-tab:not(.is-active):hover { border-color: rgba(96, 165, 250, .7); }
.rk-tab.is-active {
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 50%, #0ea5e9 100%);
    border-color: rgba(96, 165, 250, .9);
    box-shadow: 0 10px 26px rgba(37, 99, 235, .4), inset 0 1px 0 rgba(255, 255, 255, .22);
}

/* Bordes animados de las tarjetas del podio y de las cajas: de violeta a azul. */
.rk-pcard, .rk-card {
    --rk-line-dim: rgba(59, 110, 255, .25);
    --rk-line-hot: rgba(96, 165, 250, .95);
    --rk-fill: linear-gradient(180deg, #111739, #0b0f2a);
}

@media (max-width: 767.98px) {
    .rk-hero { margin-top: 0; }
    .rk-page { padding-left: .75rem; padding-right: .75rem; }
}

/* C163b — El cliente quiere de fondo LA MISMA imagen de antes (el castillo). Se recupera tal cual
   estaba en ranking.css (mismos velos para que el título se lea), solo con la línea de abajo en el
   azul del logo. */
.rk-hero.rk-hero--img {
    border-bottom-color: rgba(59, 110, 255, .35);
    background:
        linear-gradient(180deg, rgba(6, 4, 12, .55) 0%, rgba(6, 4, 12, .62) 55%, rgba(6, 4, 12, .82) 100%),
        radial-gradient(115% 130% at 50% 40%, rgba(6, 4, 12, .80) 0%, rgba(6, 4, 12, .42) 55%, rgba(6, 4, 12, .10) 100%),
        url("/images/ranking/ranking-hero-bg.png") center/cover no-repeat,
        #06040c;
}
.rk-hero.rk-hero--img::before { opacity: .18; }