/* =========================================================
   RITMO LATINO - CSS CORREGIDO
   Una sola versión de cada regla, sin duplicados.
========================================================= */

:root {
    --fondo: #fff0e1;
    --rosado: #ec4f9d;
    --blanco: #ffffff;
    --negro: #050505;
    --borde: #777777;
    --gris-claro: #fafafa;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: #222222;
    background: var(--fondo);
    font: 14px Arial, Helvetica, sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

img {
    display: block;
}

.wrap {
    width: 1320px;
    max-width: calc(100% - 30px);
    margin: 0 auto;
}

.row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* BARRA SUPERIOR */
.top {
    height: 46px;
    color: #ffffff;
    background: #070707;
}

.top .row {
    height: 100%;
}

.top nav {
    display: flex;
    gap: 27px;
}

.top a {
    font-size: 13px;
    font-weight: bold;
}

/* PORTADA */
.hero {
    position: relative;
    width: 100%;
    height: 450px;
    overflow: hidden;
    background: #000000 url("RitmoLatino4.gif") center / cover no-repeat;
    border-bottom: 3px solid #28c7ee;
}

.hero-in {
    position: relative;
    width: 1200px;
    max-width: calc(100% - 30px);
    height: 100%;
    margin: 0 auto;
}

.imagen-iniciar {
    position: absolute;
    z-index: 3;
    top: 50px;
    left: -35px;
    width: 350px;
    height: 350px;
    object-fit: contain;
    filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.55));
}

.prueba-gif {
    display: none;
}

.personajes-portada {
    position: absolute;
    z-index: 3;
    right: -35px;
    bottom: 0;
    width: 350px;
    height: 440px;
    object-fit: contain;
    object-position: bottom;
    filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.55));
}

/* MENÚ PRINCIPAL */
.main-nav {
    height: 78px;
    color: #ffffff;
    background: var(--negro);
    border-bottom: 3px solid #dddddd;
}

.nav-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    height: 100%;
}

.nav-grid a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-left: 1px solid #777777;
}

.nav-grid a:last-child {
    border-right: 1px solid #777777;
}

.nav-grid b {
    font-size: 16px;
}

.nav-grid small {
    margin-top: 3px;
    font-size: 10px;
}

/* MENÚ DESPLEGABLE DE RANKING */
.menu-ranking {
    position: relative;
    min-width: 0;
    height: 100%;
    border-left: 1px solid #777777;
}

.menu-ranking > .ranking-principal {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-left: 0;
}

.menu-ranking:hover > .ranking-principal,
.menu-ranking.abierto > .ranking-principal {
    color: #fff600;
    background: linear-gradient(#35c7e7, #644bd5);
}

.submenu-ranking {
    position: absolute;
    z-index: 1000;
    top: 100%;
    left: 0;
    display: none;
    width: 195px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #313131;
    box-shadow: 2px 4px 7px rgba(0, 0, 0, 0.55);
}

.menu-ranking:hover .submenu-ranking,
.menu-ranking.abierto .submenu-ranking {
    display: block;
}

.submenu-ranking li {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #6d9dab;
}

.submenu-ranking li:last-child {
    border-bottom: 0;
}

.submenu-ranking a {
    display: block;
    width: 100%;
    padding: 10px 12px;
    color: #ffffff;
    background: #3e4b50;
    border: 0;
    font-size: 13px;
    white-space: nowrap;
}

.submenu-ranking a:hover {
    color: #00eaff;
    background: #202020;
}

/* =========================================================
   MENÚS DESPLEGABLES DE TODAS LAS OPCIONES
========================================================= */
.menu-desplegable {
    position: relative;
    min-width: 0;
    height: 100%;
    border-left: 1px solid #777777;
}

.menu-desplegable:last-child {
    border-right: 1px solid #777777;
}

.menu-desplegable > .menu-enlace {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border: 0;
}

.menu-desplegable:hover > .menu-enlace,
.menu-desplegable.abierto > .menu-enlace {
    color: #fff600;
    background: linear-gradient(#27bfdc, #006393);
}

.submenu {
    position: absolute;
    z-index: 1000;
    top: 100%;
    left: 0;
    display: none;
    width: 200px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #3e4b50;
    box-shadow: 2px 4px 7px rgba(0, 0, 0, 0.55);
}

.menu-desplegable:hover > .submenu,
.menu-desplegable.abierto > .submenu {
    display: block;
}

.submenu li {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #6d9dab;
}

.submenu li:last-child {
    border-bottom: 0;
}

.submenu a {
    display: block;
    width: 100%;
    padding: 9px 11px;
    color: #ffffff;
    background: #486672;
    border: 0;
    font-size: 13px;
    line-height: 1.25;
    white-space: normal;
}

.submenu a:hover {
    color: #00eaff;
    background: #202020;
}

/* El último menú se abre hacia la izquierda */
.menu-soporte > .submenu {
    right: 0;
    left: auto;
}

/* DOS COLUMNAS PRINCIPALES */
.layout {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(300px, 1fr);
    align-items: start;
    gap: 20px;
    padding: 22px 0 60px;
}

.video-fondo-superior {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 50%;
    display: grid;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    width: 100vw;
    bottom: 0;
    overflow: hidden;
    background: #141627;
    transform: translateX(-50%);
    box-shadow: 0 8px 25px rgba(33, 25, 55, 0.16);
    pointer-events: none;
}

.video-fondo-superior::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 18, 37, 0.06), rgba(255, 246, 238, 0.1));
    content: "";
}

.video-fondo-superior .video-fondo-mitad {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: center;
}

.video-fondo-superior .video-fondo-dos,
.video-fondo-superior .video-fondo-tres {
    border-top: 2px solid rgba(89, 222, 239, 0.35);
}

.pagina-noticias,
.pagina-presentacion,
.pagina-descarga,
.pagina-comenzando,
.pagina-comunidad,
.pagina-musical,
.pagina-fam,
.pagina-ranking,
.pagina-atencion,
.pagina-politicas {
    position: relative;
    isolation: isolate;
}

.video-fondo-seccion {
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    overflow: hidden;
    background: #141627;
    transform: translateX(-50%);
    pointer-events: none;
}

.video-fondo-seccion::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 18, 37, 0.06), rgba(255, 246, 238, 0.1));
    content: "";
}

.video-fondo-seccion video {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    margin-inline: auto;
}

.pagina-noticias > :not(.video-fondo-seccion),
.pagina-presentacion > :not(.video-fondo-seccion),
.pagina-descarga > :not(.video-fondo-seccion),
.pagina-comenzando > :not(.video-fondo-seccion),
.pagina-comunidad > :not(.video-fondo-seccion),
.pagina-musical > :not(.video-fondo-seccion),
.pagina-fam > :not(.video-fondo-seccion),
.pagina-ranking > :not(.video-fondo-seccion),
.pagina-atencion > :not(.video-fondo-seccion),
.pagina-politicas > :not(.video-fondo-seccion) {
    position: relative;
    z-index: 1;
}

.layout > .primary,
.layout > .sidebar {
    position: relative;
    z-index: 1;
}

.layout .best-face,
.layout #news,
.layout .login,
.layout .ranking-box,
.layout .community,
.layout .items,
.layout .board,
.layout .fam,
.layout .caja-canciones {
    background: rgba(255, 255, 255, 0.52);
    backdrop-filter: blur(1px);
}

.layout .item-card,
.layout .board ul,
.layout .cancion {
    background: rgba(255, 255, 255, 0.42);
}

.layout #news .tabs,
.layout .ranking-tabs {
    background: rgba(247, 247, 247, 0.58);
}

.layout .ranking-panel tbody tr:nth-child(even) {
    background: rgba(250, 250, 250, 0.5);
}

.primary,
.sidebar {
    display: grid;
    min-width: 0;
    gap: 20px;
}

/* CAJAS */
.box,
.best-face {
    background: var(--blanco);
    border: 1px solid var(--borde);
}

.box > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 55px;
    padding: 0 17px;
    border-bottom: 1px solid #dddddd;
}

.box h2 {
    margin: 0;
    font-size: 19px;
}

/* MEJOR ROSTRO */
.best-face {
    width: 800px;
    max-width: 100%;
    height: 186px;
    margin: 0 auto;
    overflow: hidden;
}

.best-face > header {
    display: flex;
    align-items: center;
    height: 49px;
    padding: 0 16px;
    border-bottom: 1px solid #dddddd;
}

.best-face h2 {
    margin: 0;
    font-size: 16px;
}

.face-carousel {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 10px;
    height: 136px;
    padding: 10px;
}

.face-arrow {
    height: 84px;
    color: #aaaaaa;
    background: #eeeeee;
    border: 1px solid #cccccc;
    font-size: 31px;
    cursor: pointer;
}

.face-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 128px;
    gap: 12px;
    overflow: hidden;
    scroll-behavior: smooth;
}

.face-track article {
    text-align: center;
}

.face-track img {
    width: 128px;
    height: 84px;
    object-fit: cover;
    background: #eeeeee;
}

.face-track small {
    display: block;
    margin-top: 5px;
    font-size: 10px;
}

/* NOTICIAS */
.tabs {
    padding: 12px 16px 7px;
    background: var(--gris-claro);
}

.tabs button {
    margin-right: 5px;
    padding: 9px 15px;
    color: #777777;
    background: #ffffff;
    border: 1px solid #dddddd;
    cursor: pointer;
}

.tabs .active {
    color: #ffffff;
    background: var(--rosado);
    border-color: var(--rosado);
}

.news-list {
    margin: 0;
    padding: 0 16px 14px;
    list-style: none;
    background: var(--gris-claro);
}

.news-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 38px;
    border-bottom: 1px dotted #dddddd;
}

.news-list time {
    color: #aaaaaa;
}

.news-list .hidden {
    display: none;
}

/* COMUNIDAD + ÍTEMS */
.twocol {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 20px;
}

.community article {
    position: relative;
    display: grid;
    grid-template-columns: 125px 1fr;
    height: 165px;
    padding: 18px;
    border-bottom: 1px solid #dddddd;
}

.community article img {
    width: 96px;
    height: 125px;
    object-fit: contain;
    background: #f2f2f2;
}

.community article h3 {
    margin: 3px 0;
    font-size: 17px;
}

.community article small {
    position: absolute;
    right: 75px;
    bottom: 24px;
}

.items {
    min-width: 0;
    overflow: hidden;
}

.items-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, 150px);
    gap: 20px;
    min-height: 495px;
    padding: 25px;
}

.item-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    margin: 0;
    padding: 8px;
    background: #fafafa;
    border: 1px solid #eeeeee;
}

.item-card img {
    width: 125px;
    max-width: 100%;
    height: 125px;
    object-fit: contain;
}

.item-card p {
    margin: 8px 0 0;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
}

/* FORO */
.board ul {
    margin: 0;
    padding: 10px 16px 14px;
    list-style: none;
    background: var(--gris-claro);
}

.board li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 31px;
    border-bottom: 1px dotted #dddddd;
    font-size: 12px;
}

.board li b {
    color: var(--rosado);
    font-weight: normal;
}

/* USUARIO */
.login {
    padding: 18px 20px;
    text-align: center;
}

.login h2 {
    margin: 0;
    color: #555555;
}

.login p {
    color: #999999;
    font-size: 12px;
}

.login-btn {
    display: block;
    margin: 13px 0;
    padding: 12px;
    color: #ffffff;
    background: #595959;
    font-weight: bold;
}

.register {
    color: var(--rosado);
    font-size: 11px;
}

/* Transmisión rotativa de la portada. */
.promo-videos {
    width: 100%;
    max-width: 440px;
    justify-self: center;
    margin-bottom: 32px;
}

.promo-videos-marco {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #141627;
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow: 0 5px 14px rgba(20, 16, 38, 0.2);
}

.promo-video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 1;
    transition: opacity 220ms ease;
}

.promo-video.en-cambio {
    opacity: 0;
}

.promo-videos-indicadores {
    display: flex;
    justify-content: center;
    gap: 7px;
    padding-top: 7px;
}

.promo-videos-indicadores button {
    width: 19px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: #7e8292;
    cursor: pointer;
}

.promo-videos-indicadores button.activo {
    background: #dc4c94;
}

.promo-videos-indicadores button:focus-visible {
    outline: 2px solid #1b84a7;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .promo-video {
        transition: none;
    }
}

@media (max-width: 900px) {
    .sidebar .promo-videos { grid-column: 1 / -1; }
}

/* RANKING */
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

th,
td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid #eeeeee;
}

th {
    color: #999999;
}

/* FAM */
.fam ol {
    margin: 0;
    padding: 14px 28px 17px;
}

.fam li {
    padding: 10px 0;
    border-bottom: 1px dotted #dddddd;
}

.fam small {
    display: block;
    margin-top: 5px;
    color: #aaaaaa;
}

/* CANCIONES */
.caja-canciones {
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.titulo-canciones {
    display: flex;
    align-items: center;
    height: 55px;
    padding: 0 16px;
    border-bottom: 1px solid #dddddd;
}

.cancion {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 10px;
    min-height: 100px;
    padding: 12px;
    background: #ffffff;
    border-bottom: 1px solid #eeeeee;
}

.icono-musica {
    display: grid;
    place-items: center;
    width: 50px;
    height: 52px;
    color: var(--rosado);
    background: #f5f5f5;
    font-size: 25px;
}

.informacion-cancion {
    min-width: 0;
}

.informacion-cancion h3 {
    margin: 3px 0 4px;
    font-size: 14px;
}

.informacion-cancion p {
    margin: 0 0 8px;
    color: #999999;
    font-size: 10px;
}

.informacion-cancion audio {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 32px;
}

/* PIE */
.pie-pagina {
    display: block;
    width: 100%;
    margin: 0;
    padding: 25px;
    color: #aaaaaa;
    background: #222222;
    text-align: center;
}

.pie-pagina b,
.pie-pagina small {
    display: block;
}

.pie-pagina b {
    margin-bottom: 8px;
    color: #ffffff;
    font-size: 18px;
}

/* TABLETA */
@media (max-width: 900px) {
    .layout {
        grid-template-columns: 1fr;
    }

    .sidebar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .caja-canciones {
        grid-column: 1 / -1;
    }

    .hero {
        height: 390px;
    }

    .imagen-iniciar {
        top: 100px;
        width: 220px;
    }

    .personajes-portada {
        width: 285px;
        height: 380px;
    }
}

/* CELULAR */
@media (max-width: 650px) {
    .wrap {
        max-width: calc(100% - 18px);
    }

    .top {
        height: auto;
        padding: 10px 0;
    }

    .top .row,
    .top nav {
        flex-wrap: wrap;
        gap: 10px;
    }

    .hero {
        height: 320px;
    }

    .imagen-iniciar {
        top: 120px;
        width: 150px;
    }

    .personajes-portada {
        right: -20px;
        width: 190px;
        height: 280px;
    }

    .main-nav {
        height: auto;
    }

    .nav-grid {
        grid-template-columns: repeat(4, 1fr);
        height: auto;
    }

    .nav-grid > a,
    .menu-ranking,
    .menu-desplegable {
        height: 54px;
    }

    .submenu-ranking,
    .submenu {
        right: 0;
        left: auto;
    }

    .twocol,
    .sidebar {
        grid-template-columns: 1fr;
    }

    .caja-canciones {
        grid-column: auto;
    }
}

/* =========================================================
   ACABADO PORTAL LOVE RITMO CLÁSICO
========================================================= */
body {
    background:
        radial-gradient(circle at 50% 520px, rgba(255, 255, 255, 0.95) 0 280px, transparent 560px),
        linear-gradient(180deg, #fff4e8 0, #fff 860px);
}

.wrap {
    width: 1040px;
}

.top {
    height: 40px;
    background: linear-gradient(180deg, #2b2b2f 0%, #111114 52%, #060607 100%);
    border-top: 1px solid #3e3e43;
    border-bottom: 1px solid #000000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.32);
}

.top nav {
    align-self: stretch;
    gap: 0;
}

.top nav:first-child {
    border-left: 1px solid rgba(255, 255, 255, 0.07);
}

.top a {
    position: relative;
    display: inline-flex;
    min-height: 100%;
    align-items: center;
    padding: 0 17px;
    color: #d7d7d7;
    font-size: 12px;
    font-weight: 700;
    text-shadow: 0 1px 0 #000000;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    transition: color 160ms ease, background-color 160ms ease;
}

.top a:hover {
    color: #73e7ff;
    background: rgba(48, 195, 229, 0.1);
}

.top a:focus-visible {
    z-index: 1;
    outline: 2px solid #65dcf4;
    outline-offset: -2px;
}

.top .top-inicio {
    gap: 7px;
    color: #ffffff;
    background: linear-gradient(180deg, rgba(238, 76, 157, 0.32), rgba(194, 49, 126, 0.12));
    box-shadow: inset 0 2px 0 #ed4e9c;
}

.top .top-inicio::before {
    color: #62ddf5;
    font-size: 8px;
    content: "◆";
}

.top .top-inicio:hover {
    color: #ffffff;
    background: linear-gradient(180deg, rgba(238, 76, 157, 0.5), rgba(26, 181, 214, 0.2));
}

.hero {
    height: 360px;
    background-color: #050509;
    border-bottom: 0;
}

.hero-in {
    width: 1040px;
}

.imagen-iniciar {
    top: 18px;
    width: 285px;
    height: 320px;
}

.personajes-portada {
    width: 330px;
    height: 355px;
}

.main-nav {
    height: 65px;
    background: linear-gradient(180deg, #272727, #090909 72%);
    border-top: 3px solid #4bd8f4;
    border-bottom: 3px solid #7a58d2;
    box-shadow: 0 5px 14px rgba(45, 28, 67, 0.24);
}

.nav-grid b {
    font-size: 15px;
    font-weight: 700;
}

.nav-grid small {
    color: #aaa;
    font-size: 9px;
    text-transform: uppercase;
}

.menu-desplegable:hover > .menu-enlace,
.menu-desplegable.abierto > .menu-enlace {
    color: #fff;
    background: linear-gradient(180deg, #2fc4e3, #7250c9);
}

.layout {
    grid-template-columns: minmax(0, 620px) 400px;
    gap: 18px;
    padding-top: 22px;
}

.primary,
.sidebar {
    gap: 16px;
}

.box,
.best-face {
    border: 1px solid #d8d8d8;
    border-radius: 3px;
    box-shadow: 0 2px 7px rgba(67, 45, 80, 0.09);
}

.box > header,
.best-face > header,
.titulo-canciones {
    height: 45px;
    background: linear-gradient(#fff, #f3f3f3);
    border-bottom-color: #dedede;
}

.box h2,
.best-face h2 {
    color: #444;
    font-size: 16px;
}

.box > header::before,
.best-face > header::before {
    width: 4px;
    height: 18px;
    margin-right: 9px;
    background: linear-gradient(#22cce7, #7c50d7);
    border-radius: 2px;
    content: "";
}

.box > header h2,
.best-face > header h2 {
    margin-right: auto;
}

.best-face {
    width: 100%;
}

.tabs button,
.ranking-tabs button {
    border-radius: 2px 2px 0 0;
}

.tabs .active,
.ranking-tabs .active {
    color: #fff;
    background: linear-gradient(#26cbe8, #7650cd);
    border-color: #654eb8;
}

.login-btn {
    background: linear-gradient(#555, #272727);
    border-bottom: 3px solid #20bfdc;
}

.register,
.noti-em,
.board li b {
    color: #e34c98;
}

.ranking-season {
    color: #aaa;
    font-size: 10px;
}

.ranking-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    padding: 8px 8px 0;
    background: #f7f7f7;
}

.ranking-tabs button {
    min-width: 0;
    padding: 8px 3px;
    color: #666;
    background: #fff;
    border: 1px solid #ddd;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.ranking-tabs button:hover {
    color: #5d40af;
    border-color: #8c72d0;
}

.ranking-panel[hidden] {
    display: none;
}

.ranking-panel th {
    color: #fff;
    background: #565656;
}

.ranking-panel th:first-child,
.ranking-panel td:first-child {
    width: 44px;
    text-align: center;
}

.ranking-panel th:last-child,
.ranking-panel td:last-child {
    width: 66px;
    text-align: center;
}

.ranking-panel tbody tr:nth-child(even) {
    background: #fafafa;
}

.ranking-panel tbody tr:hover {
    background: #edfaff;
}

.ranking-panel tbody tr:nth-child(-n + 3) strong {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    color: #fff;
    background: #ee4d9a;
    border-radius: 50%;
}

.pie-pagina {
    border-top: 3px solid #32cce9;
    background: #353535;
}

@media (max-width: 900px) {
    .layout {
        grid-template-columns: 1fr;
    }

    .sidebar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .hero {
        height: 285px;
    }

    .imagen-iniciar {
        left: -18px;
        width: 210px;
        height: 245px;
    }

    .personajes-portada {
        right: -30px;
        width: 235px;
        height: 280px;
    }

    .sidebar {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   PÁGINA: ¿QUÉ ES RITMO LATINO?
========================================================= */
.pagina-presentacion {
    padding-top: 28px;
    padding-bottom: 60px;
}

.pagina-presentacion .video-fondo-seccion video {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

.presentacion-caja {
    padding: 25px;
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(2px);
}

.presentacion-caja > h1 {
    margin: 0 0 18px;
    color: #0876a8;
    font-size: 26px;
}

.pestanas-presentacion {
    display: grid;
    grid-template-columns: repeat(2, 160px);
    margin-bottom: 24px;
    border-bottom: 1px solid #dddddd;
}

.pestanas-presentacion button {
    padding: 12px 18px;
    color: #777777;
    background: #eeeeee;
    border: 0;
    cursor: pointer;
}

.pestanas-presentacion button.activa {
    color: #ffffff;
    background: #7356e8;
}

.panel-presentacion {
    display: none;
}

.panel-presentacion.activo {
    display: block;
}

.panel-presentacion h2 {
    margin: 0 0 5px;
    color: #1597a8;
    font-size: 21px;
}

.frase-presentacion {
    margin: 0 0 16px;
    color: #16a1b4;
    font-size: 17px;
    font-weight: bold;
}

.panel-presentacion p {
    line-height: 1.65;
}

.caracteristicas-ritmo {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
    margin: 25px 0;
}

.caracteristica {
    padding: 16px;
    text-align: center;
    background: rgba(246, 249, 251, 0.76);
    border: 1px solid #dddddd;
}

.caracteristica img {
    width: 100%;
    height: 105px;
    margin-bottom: 10px;
    object-fit: cover;
}

.caracteristica h3 {
    margin: 0 0 6px;
    color: #0876a8;
    font-size: 15px;
}

.destacado-presentacion {
    margin: 20px 0;
    padding: 17px;
    color: #555555;
    background: #fff4d9;
    border-left: 4px solid #f1a900;
}

.titulo-multimedia {
    margin-top: 0;
}

.multimedia-principal {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(260px, 0.65fr);
    gap: 20px;
    margin-bottom: 22px;
}

.video-ritmo {
    width: 100%;
    min-height: 330px;
    background: #000000;
}

.imagen-multimedia-principal {
    width: 100%;
    height: 330px;
    object-fit: contain;
    background: #f4f4f4;
}

.galeria-ritmo {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
}

.galeria-ritmo figure {
    margin: 0;
    background: rgba(246, 246, 246, 0.76);
    border: 1px solid #dddddd;
}

.galeria-ritmo img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.galeria-ritmo figcaption {
    padding: 9px;
    color: #666666;
    font-size: 12px;
    text-align: center;
}

@media (max-width: 900px) {
    .caracteristicas-ritmo {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .multimedia-principal {
        grid-template-columns: 1fr;
    }

    .galeria-ritmo {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .presentacion-caja {
        padding: 16px;
    }

    .pestanas-presentacion {
        grid-template-columns: repeat(2, 1fr);
    }

    .caracteristicas-ritmo,
    .galeria-ritmo {
        grid-template-columns: 1fr;
    }

    .video-ritmo,
    .imagen-multimedia-principal {
        min-height: 220px;
        height: 220px;
    }
}

/* =========================================================
   PÁGINA: POLÍTICA DE ADMINISTRACIÓN
========================================================= */
.pagina-politicas {
    padding-top: 28px;
    padding-bottom: 60px;
}

.ruta-politicas {
    margin: 0 0 18px;
    color: #888888;
    font-size: 12px;
}

.ruta-politicas a {
    color: #0876bc;
}

.politicas-caja {
    padding: 26px;
    background: #ffffff;
    border: 1px solid #cccccc;
}

.politicas-caja h1 {
    margin: 0 0 8px;
    color: #333333;
    font-size: 25px;
}

.politicas-introduccion {
    margin: 0 0 22px;
    color: #777777;
    line-height: 1.6;
}

.tabla-politicas-contenedor {
    width: 100%;
    overflow-x: auto;
}

.tabla-politicas {
    width: 100%;
    min-width: 850px;
    border-collapse: collapse;
    background: #ffffff;
}

.tabla-politicas th,
.tabla-politicas td {
    padding: 13px 12px;
    text-align: left;
    vertical-align: top;
    border: 1px solid #dddddd;
    line-height: 1.45;
}

.tabla-politicas th {
    color: #ffffff;
    background: #0876a8;
    font-size: 13px;
}

.tabla-politicas tbody tr:nth-child(even) {
    background: #f5f9fb;
}

.tabla-politicas .sancion {
    text-align: center;
    white-space: nowrap;
}

.aviso-politicas {
    margin-top: 22px;
    padding: 15px;
    color: #555555;
    background: #fff4d9;
    border-left: 4px solid #f1a900;
    line-height: 1.5;
}

.volver-inicio {
    display: inline-block;
    margin-top: 22px;
    padding: 11px 20px;
    color: #ffffff;
    background: #0876a8;
    font-weight: bold;
}

.volver-inicio:hover {
    background: #ec4f9d;
}

@media (max-width: 650px) {
    .politicas-caja {
        padding: 17px;
    }

    .politicas-caja h1 {
        font-size: 21px;
    }
}

/* =========================================================
   PÁGINA DE NOTICIAS, ACTUALIZACIONES Y EVENTOS
========================================================= */
.pagina-noticias {
    padding-top: 28px;
    padding-bottom: 60px;
}

.pagina-noticias .video-fondo-seccion video {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

.noticias-caja {
    overflow: hidden;
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(2px);
}

.noticias-cabecera {
    padding: 22px 26px 15px;
    border-bottom: 1px solid #dddddd;
}

.noticias-cabecera h1 {
    margin: 0 0 6px;
    color: #0876a8;
    font-size: 25px;
}

.noticias-cabecera p {
    margin: 0;
    color: #777777;
    font-size: 13px;
}

.categorias-noticias {
    display: flex;
    padding: 0 26px;
    background: rgba(246, 246, 246, 0.66);
    border-bottom: 1px solid #dddddd;
}

.categorias-noticias a {
    padding: 13px 22px;
    color: #555555;
    font-weight: bold;
    border-right: 1px solid #dddddd;
}

.categorias-noticias a:hover,
.categorias-noticias a.activa {
    color: #ffffff;
    background: #ec4f9d;
}

.panel-categoria-noticias {
    display: none;
    padding: 25px 26px 32px;
}

.panel-categoria-noticias.activo {
    display: block;
}

.panel-categoria-noticias > h2 {
    margin: 0 0 18px;
    color: #333333;
    font-size: 20px;
}

.lista-publicaciones {
    margin: 0;
    padding: 0;
    list-style: none;
}

.publicacion-noticia {
    display: grid;
    grid-template-columns: 115px 132px minmax(0, 1fr);
    gap: 18px;
    padding: 17px 0;
    border-bottom: 1px dotted #cccccc;
}

.imagen-publicacion {
    display: block;
    width: 132px;
    height: 92px;
    object-fit: contain;
    background: linear-gradient(135deg, #eaf8fd, #f3eaff);
    border-radius: 4px;
}

.fecha-publicacion {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 72px;
    color: #ffffff;
    background: #0876a8;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
}

.publicacion-noticia h3 {
    margin: 0 0 7px;
    color: #0876a8;
    font-size: 16px;
}

.publicacion-noticia p {
    margin: 0;
    color: #424b55;
    font-size: 13px;
    line-height: 1.55;
}

.etiqueta-publicacion {
    display: inline-block;
    margin-top: 9px;
    padding: 3px 8px;
    color: #ffffff;
    background: #ec4f9d;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
}

@media (max-width: 650px) {
    .categorias-noticias {
        display: grid;
        grid-template-columns: 1fr;
        padding: 0;
    }

    .categorias-noticias a {
        text-align: center;
        border-right: 0;
        border-bottom: 1px solid #dddddd;
    }

    .publicacion-noticia {
        grid-template-columns: 100px minmax(0, 1fr);
        gap: 7px 13px;
    }

    .publicacion-noticia .imagen-publicacion { grid-column: 1; grid-row: 1; width: 100px; height: 78px; }
    .publicacion-noticia .fecha-publicacion { grid-column: 1; grid-row: 2; min-height: 30px; font-size: 10px; }
    .publicacion-noticia article { grid-column: 2; grid-row: 1 / 3; }

    .fecha-publicacion {
        min-height: 42px;
    }
}

/* =========================================================
   PÁGINA: COMUNIDAD
========================================================= */
.menu-activo > .menu-enlace {
    color: #ffffff;
    background: linear-gradient(180deg, #2fc4e3, #7250c9);
}

.hero-interior {
    height: 300px;
}

.hero-interior .imagen-iniciar {
    top: 6px;
    width: 250px;
    height: 275px;
}

.hero-interior .personajes-portada {
    width: 290px;
    height: 300px;
}

.pagina-comunidad {
    padding-top: 22px;
    padding-bottom: 65px;
}

.comunidad-portada {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    min-height: 220px;
    margin-bottom: 18px;
    overflow: hidden;
    color: #ffffff;
    background:
        radial-gradient(circle at 77% 25%, rgba(65, 219, 245, 0.25), transparent 25%),
        linear-gradient(125deg, #151226 0%, #39216b 55%, #0c819e 100%);
    border-radius: 5px;
    box-shadow: 0 8px 24px rgba(45, 27, 88, 0.18);
}

.comunidad-portada::before {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(115deg, transparent 60%, rgba(255, 255, 255, 0.08) 60% 61%, transparent 61%);
    content: "";
}

.comunidad-portada > div {
    position: relative;
    z-index: 2;
    align-self: center;
    padding: 35px 44px;
}

.comunidad-etiqueta {
    display: inline-block;
    margin-bottom: 12px;
    color: #55dff7;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.comunidad-portada h1 {
    max-width: 590px;
    margin: 0 0 10px;
    font-size: clamp(26px, 4vw, 38px);
    line-height: 1.05;
}

.comunidad-portada p {
    max-width: 600px;
    margin: 0;
    color: #dcd6ec;
    font-size: 14px;
    line-height: 1.55;
}

.comunidad-portada > img {
    position: relative;
    z-index: 1;
    align-self: end;
    justify-self: center;
    width: 300px;
    height: 210px;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.42));
}

.comunidad-contenido {
    display: grid;
    grid-template-columns: 235px minmax(0, 1fr);
    align-items: start;
    gap: 18px;
}

.comunidad-menu {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    box-shadow: 0 3px 10px rgba(67, 45, 80, 0.08);
}

.comunidad-menu h2 {
    margin: 0;
    padding: 18px 19px;
    color: #ffffff;
    background: linear-gradient(135deg, #24212c, #4d4265);
    font-size: 18px;
}

.comunidad-menu button {
    position: relative;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    width: 100%;
    padding: 14px 12px;
    color: #666666;
    background: #ffffff;
    border: 0;
    border-bottom: 1px solid #ececec;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.comunidad-menu button:last-child {
    border-bottom: 0;
}

.comunidad-menu button > span {
    grid-row: span 2;
    align-self: center;
    color: #b6afc4;
    font-size: 17px;
    text-align: center;
}

.comunidad-menu button b {
    color: #4f4a58;
    font-size: 13px;
    line-height: 1.25;
}

.comunidad-menu button small {
    margin-top: 3px;
    color: #a3a0a8;
    font-size: 10px;
}

.comunidad-menu button:hover,
.comunidad-menu button.activo {
    background: #f4faff;
}

.comunidad-menu button.activo {
    box-shadow: inset 4px 0 #6f51ce;
}

.comunidad-menu button.activo > span,
.comunidad-menu button.activo b {
    color: #6547bd;
}

.comunidad-paneles {
    min-width: 0;
}

.comunidad-panel {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #d8d8d8;
    border-radius: 4px;
    box-shadow: 0 3px 10px rgba(67, 45, 80, 0.08);
}

.comunidad-panel[hidden] {
    display: none;
}

.comunidad-cabecera-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 68px;
    padding: 12px 22px;
    background: linear-gradient(#ffffff, #f5f5f7);
    border-bottom: 1px solid #dddddd;
}

.comunidad-cabecera-panel > div {
    padding-left: 12px;
    border-left: 4px solid #7250cc;
}

.comunidad-cabecera-panel span {
    color: #15aeca;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.13em;
}

.comunidad-cabecera-panel h2 {
    margin: 3px 0 0;
    color: #3f3b47;
    font-size: 20px;
}

.comunidad-cabecera-panel > p {
    margin: 0;
    color: #99949f;
    font-size: 11px;
}

.estrella-destacada {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    min-height: 390px;
}

.estrella-imagen {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 40%, #ffffff 0 12%, transparent 46%),
        linear-gradient(145deg, #e8faff, #eee8ff);
}

.estrella-imagen::after {
    position: absolute;
    right: 22px;
    bottom: 18px;
    left: 22px;
    height: 17px;
    background: rgba(74, 52, 125, 0.17);
    border-radius: 50%;
    filter: blur(8px);
    content: "";
}

.estrella-imagen img {
    position: relative;
    z-index: 1;
    width: 245px;
    height: 360px;
    object-fit: contain;
    object-position: center bottom;
}

.corona {
    position: absolute;
    z-index: 2;
    top: 18px;
    left: 18px;
    padding: 7px 11px;
    color: #ffffff;
    background: linear-gradient(135deg, #ec4f9d, #724dca);
    border-radius: 20px;
    font-size: 10px;
    font-weight: 800;
}

.estrella-info {
    align-self: center;
    padding: 38px;
}

.insignia-nivel {
    display: inline-block;
    padding: 5px 9px;
    color: #6b4cbc;
    background: #eee9ff;
    border-radius: 2px;
    font-size: 9px;
    font-weight: 800;
}

.estrella-info h3 {
    margin: 11px 0 4px;
    color: #33303a;
    font-size: 31px;
}

.estrella-fam {
    margin: 0 0 20px !important;
    color: #17a9c4 !important;
    font-size: 12px !important;
    font-weight: 700;
}

.estrella-info > p {
    color: #76717c;
    font-size: 13px;
    line-height: 1.6;
}

.marcador-votos {
    display: flex;
    justify-content: space-between;
    margin-top: 25px;
    color: #99949f;
    font-size: 10px;
}

.marcador-votos b {
    color: #4a4550;
    font-size: 12px;
}

.barra-votos {
    height: 7px;
    margin: 8px 0 20px;
    overflow: hidden;
    background: #ebe9ee;
    border-radius: 6px;
}

.barra-votos span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #23c5df, #7650d1, #ed4f9e);
    border-radius: inherit;
}

.boton-votar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 18px;
    color: #ffffff;
    background: linear-gradient(135deg, #ef4e9e, #704dcc);
    border: 0;
    border-radius: 3px;
    box-shadow: 0 4px 10px rgba(113, 72, 187, 0.22);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.boton-votar:hover {
    filter: brightness(1.08);
}

.boton-votar:disabled {
    background: #a7a2ae;
    box-shadow: none;
    cursor: default;
}

.mensaje-voto {
    min-height: 18px;
    margin: 8px 0 0 !important;
    color: #188ba1 !important;
    font-size: 11px !important;
    font-weight: 700;
}

.mini-ranking {
    padding: 20px 24px 25px;
    background: #fafafa;
    border-top: 1px solid #e5e5e5;
}

.mini-ranking h3 {
    margin: 0 0 12px;
    color: #49444f;
    font-size: 14px;
}

.mini-ranking ol {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mini-ranking li {
    display: grid;
    grid-template-columns: 25px 42px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 9px;
    background: #ffffff;
    border: 1px solid #e5e5e5;
}

.puesto {
    color: #7958c7;
    font-size: 14px;
    font-weight: 800;
    text-align: center;
}

.mini-ranking img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    background: #f3f0f8;
    border-radius: 50%;
}

.mini-ranking b,
.mini-ranking small {
    display: block;
}

.mini-ranking b {
    overflow: hidden;
    color: #514c56;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mini-ranking small {
    margin-top: 2px;
    color: #a19da5;
    font-size: 9px;
}

.mini-ranking strong {
    grid-column: 3;
    color: #ec4f9d;
    font-size: 10px;
}

.intro-panel {
    margin: 0;
    padding: 18px 22px 0;
    color: #78737d;
    font-size: 13px;
    line-height: 1.55;
}

.galeria-atractivos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 20px 22px;
}

.galeria-atractivos article {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #dfdce3;
    border-radius: 3px;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.galeria-atractivos article:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(67, 45, 80, 0.14);
}

.galeria-atractivos article > img {
    width: 100%;
    height: 225px;
    object-fit: cover;
    object-position: center 20%;
    background: #eeeeee;
    filter: saturate(0.92);
}

.galeria-atractivos article > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 12px;
}

.galeria-atractivos h3,
.galeria-atractivos p {
    margin: 0;
}

.galeria-atractivos h3 {
    color: #45404a;
    font-size: 14px;
}

.galeria-atractivos p {
    margin-top: 3px;
    color: #9b96a0;
    font-size: 10px;
}

.numero-candidato {
    position: absolute;
    z-index: 2;
    top: 8px;
    left: 8px;
    padding: 5px 7px;
    color: #ffffff;
    background: rgba(24, 20, 31, 0.72);
    border-radius: 2px;
    font-size: 9px;
    font-weight: 800;
}

.boton-votar.secundario {
    grid-row: span 2;
    min-height: 32px;
    padding: 0 10px;
    font-size: 10px;
}

.boton-votar.secundario span {
    margin-left: 4px;
    opacity: 0.78;
}

.mensaje-voto-general {
    min-height: 20px;
    margin: 0 22px 18px !important;
}

.galeria-personajes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding: 22px;
}

.galeria-personajes article {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #dfdce3;
    border-radius: 4px;
}

.personaje-marco {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 325px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 37%, #ffffff 0 8%, transparent 44%),
        linear-gradient(150deg, #eafaff, #eee8ff);
}

.personaje-marco > span {
    position: absolute;
    z-index: 2;
    top: 10px;
    left: 10px;
    padding: 6px 9px;
    color: #ffffff;
    background: #6e4ec3;
    border-radius: 2px;
    font-size: 9px;
    font-weight: 800;
}

.personaje-marco img {
    width: 100%;
    height: 310px;
    object-fit: contain;
    object-position: center bottom;
}

.galeria-personajes article > div:last-child {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 13px;
}

.galeria-personajes h3,
.galeria-personajes p {
    margin: 0;
}

.galeria-personajes h3 {
    color: #45404a;
    font-size: 14px;
}

.galeria-personajes p {
    margin-top: 4px;
    color: #99949f;
    font-size: 9px;
}

.talk-destacado {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 15px;
    margin: 20px 22px;
    padding: 17px 18px;
    color: #ffffff;
    background: linear-gradient(115deg, #6350b7, #159fb9);
    border-radius: 4px;
}

.talk-destacado > span {
    padding: 5px 7px;
    color: #514293;
    background: #ffffff;
    border-radius: 2px;
    font-size: 8px;
    font-weight: 800;
}

.talk-destacado h3,
.talk-destacado p {
    margin: 0;
}

.talk-destacado h3 {
    font-size: 14px;
}

.talk-destacado p {
    margin-top: 4px;
    color: #d9f6fb;
    font-size: 10px;
}

.talk-destacado > b {
    font-size: 10px;
    white-space: nowrap;
}

.tabla-talk {
    margin: 0 22px;
    border: 1px solid #dfdde2;
}

.talk-fila {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 82px 115px;
    align-items: center;
    min-height: 57px;
    color: #66616b;
    background: #ffffff;
    border-bottom: 1px solid #eceaec;
}

.talk-fila:last-child {
    border-bottom: 0;
}

.talk-fila:hover:not(.cabecera) {
    background: #f4fbfd;
}

.talk-fila > span,
.talk-fila > strong,
.talk-fila > time {
    padding: 10px 13px;
}

.talk-fila > strong,
.talk-fila > time {
    color: #98939d;
    font-size: 10px;
    text-align: center;
}

.talk-fila > span > b {
    margin-right: 6px;
    color: #e64c98;
    font-size: 10px;
}

.talk-fila small {
    display: block;
    margin-top: 5px;
    color: #aaa6ad;
    font-size: 9px;
}

.talk-fila.cabecera {
    min-height: 34px;
    color: #ffffff;
    background: #4d4853;
    border: 0;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.talk-fila.cabecera span:not(:first-child) {
    text-align: center;
}

.paginacion-talk {
    display: flex;
    justify-content: center;
    gap: 4px;
    padding: 20px;
}

.paginacion-talk button {
    width: 31px;
    height: 31px;
    color: #77717c;
    background: #ffffff;
    border: 1px solid #dcd9df;
    cursor: pointer;
}

.paginacion-talk button:hover,
.paginacion-talk button.activo {
    color: #ffffff;
    background: #6d4fc4;
    border-color: #6d4fc4;
}

@media (max-width: 900px) {
    .comunidad-portada {
        grid-template-columns: minmax(0, 1fr) 230px;
    }

    .comunidad-portada > img {
        width: 235px;
    }

    .comunidad-contenido {
        grid-template-columns: 1fr;
    }

    .comunidad-menu {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .comunidad-menu h2 {
        grid-column: 1 / -1;
    }

    .comunidad-menu button {
        grid-template-columns: 1fr;
        text-align: center;
        border-right: 1px solid #ececec;
        border-bottom: 0;
    }

    .comunidad-menu button > span {
        grid-row: auto;
    }

    .comunidad-menu button.activo {
        box-shadow: inset 0 -4px #6f51ce;
    }
}

@media (max-width: 700px) {
    .hero-interior {
        height: 250px;
    }

    .hero-interior .imagen-iniciar {
        width: 185px;
        height: 220px;
    }

    .hero-interior .personajes-portada {
        width: 215px;
        height: 250px;
    }

    .comunidad-portada {
        display: block;
    }

    .comunidad-portada > div {
        padding: 28px 24px 115px;
    }

    .comunidad-portada > img {
        position: absolute;
        right: -25px;
        bottom: -8px;
        width: 190px;
        height: 140px;
        opacity: 0.74;
    }

    .comunidad-menu {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .comunidad-menu button {
        border-bottom: 1px solid #ececec;
    }

    .estrella-destacada {
        grid-template-columns: 1fr;
    }

    .estrella-imagen {
        height: 330px;
    }

    .estrella-imagen img {
        height: 315px;
    }

    .estrella-info {
        padding: 26px 22px;
    }

    .mini-ranking ol,
    .galeria-atractivos,
    .galeria-personajes {
        grid-template-columns: 1fr;
    }

    .galeria-atractivos article {
        display: grid;
        grid-template-columns: 135px minmax(0, 1fr);
    }

    .galeria-atractivos article > img {
        height: 150px;
    }

    .personaje-marco {
        height: 360px;
    }

    .talk-destacado {
        grid-template-columns: 1fr;
    }

    .talk-fila {
        grid-template-columns: minmax(0, 1fr) 55px;
    }

    .talk-fila > time,
    .talk-fila.cabecera span:last-child {
        display: none;
    }

    .comunidad-cabecera-panel {
        align-items: flex-start;
    }

    .comunidad-cabecera-panel > p {
        max-width: 95px;
        text-align: right;
    }
}

/* =========================================================
   PÁGINA: FAM
========================================================= */
.pagina-fam {
    padding-top: 22px;
    padding-bottom: 65px;
}

.fam-portada {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    min-height: 260px;
    margin-bottom: 18px;
    overflow: hidden;
    color: #ffffff;
    background:
        radial-gradient(circle at 82% 18%, rgba(48, 220, 228, 0.24), transparent 25%),
        radial-gradient(circle at 68% 95%, rgba(238, 75, 154, 0.25), transparent 28%),
        linear-gradient(125deg, #101526 0%, #24336f 52%, #512a83 100%);
    border-radius: 5px;
    box-shadow: 0 8px 24px rgba(25, 30, 76, 0.2);
}

.fam-portada::before {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(30deg, rgba(255, 255, 255, 0.035) 12%, transparent 12.5%, transparent 87%, rgba(255, 255, 255, 0.035) 87.5%),
        linear-gradient(150deg, rgba(255, 255, 255, 0.035) 12%, transparent 12.5%, transparent 87%, rgba(255, 255, 255, 0.035) 87.5%);
    background-size: 42px 72px;
    content: "";
}

.fam-portada-texto {
    position: relative;
    z-index: 2;
    align-self: center;
    padding: 36px 42px;
}

.fam-portada-texto > span {
    color: #52e0ef;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.15em;
}

.fam-portada-texto h1 {
    max-width: 520px;
    margin: 11px 0 10px;
    font-size: clamp(28px, 4vw, 41px);
    line-height: 1.04;
}

.fam-portada-texto p {
    max-width: 560px;
    margin: 0 0 22px;
    color: #dfe5f4;
    font-size: 14px;
    line-height: 1.55;
}

.fam-portada-texto button {
    min-height: 40px;
    padding: 0 20px;
    color: #20284b;
    background: #ffffff;
    border: 0;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.fam-portada-texto button:hover { color: #ffffff; background: #e94d99; }

.fam-emblemas {
    position: relative;
    min-height: 260px;
}

.fam-grupo {
    position: absolute;
    right: 2px;
    bottom: -3px;
    width: min(100%, 390px);
    height: 252px;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 15px 15px rgba(5, 9, 30, 0.42));
}

.emblema-fam {
    position: absolute;
    display: grid;
    width: 130px;
    height: 150px;
    place-items: center;
    color: #ffffff;
    background: linear-gradient(145deg, #26c8dc, #5844c0);
    clip-path: polygon(50% 0, 94% 17%, 88% 72%, 50% 100%, 12% 72%, 6% 17%);
    filter: drop-shadow(0 13px 12px rgba(0, 0, 0, 0.35));
}

.emblema-fam::before {
    position: absolute;
    inset: 9px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    clip-path: inherit;
    content: "";
}

.emblema-fam i {
    font-size: 30px;
    font-style: normal;
    font-weight: 900;
    letter-spacing: -0.06em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.emblema-uno { z-index: 3; right: 125px; bottom: 36px; transform: scale(1.08); }
.emblema-dos { right: 25px; bottom: 75px; background: linear-gradient(145deg, #ef579f, #772c96); transform: rotate(9deg) scale(0.82); }
.emblema-tres { right: 235px; bottom: 68px; background: linear-gradient(145deg, #f3b946, #e45181); transform: rotate(-9deg) scale(0.78); }

.fam-contenido {
    display: grid;
    grid-template-columns: 235px minmax(0, 1fr);
    align-items: start;
    gap: 18px;
}

.fam-menu,
.fam-panel,
.actividad-fam {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e4e2e7;
    border-radius: 4px;
    box-shadow: 0 4px 14px rgba(37, 29, 57, 0.07);
}

.fam-menu h2 {
    margin: 0;
    padding: 17px 20px;
    color: #ffffff;
    background: linear-gradient(135deg, #202b61, #6945ad);
    font-size: 19px;
}

.fam-menu > button {
    display: grid;
    width: 100%;
    min-height: 69px;
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    padding: 12px 15px;
    color: #625d69;
    background: #ffffff;
    border: 0;
    border-bottom: 1px solid #eceaf0;
    text-align: left;
    cursor: pointer;
}

.fam-menu > button > span {
    grid-row: 1 / 3;
    color: #a6a0ad;
    font-size: 20px;
    text-align: center;
}

.fam-menu > button b { font-size: 12px; }
.fam-menu > button small { margin-top: 3px; color: #a09aa7; font-size: 10px; }
.fam-menu > button:hover { background: #f8f6fb; }

.fam-menu > button.activo {
    color: #313a70;
    background: #f3f7fd;
    box-shadow: inset 4px 0 #e84d99;
}

.fam-menu > button.activo > span { color: #e84d99; }

.fam-menu-dato {
    padding: 19px 20px 21px;
    background: #f8f7fa;
}

.fam-menu-dato span,
.fam-menu-dato small { display: block; color: #918b97; font-size: 10px; }
.fam-menu-dato b { display: block; margin: 3px 0; color: #2e376d; font-size: 24px; }

.fam-paneles { min-width: 0; }
.fam-panel { min-height: 510px; }
.fam-panel[hidden] { display: none; }

.fam-cabecera-panel {
    display: flex;
    min-height: 72px;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px;
    border-bottom: 1px solid #e9e7ec;
}

.fam-cabecera-panel span,
.actividad-fam header span {
    color: #14a9c1;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.fam-cabecera-panel h2,
.actividad-fam header h3 { margin: 3px 0 0; color: #48424e; font-size: 21px; }
.fam-cabecera-panel > p { margin: 0; color: #99939e; font-size: 10px; }

.fam-aviso {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 22px 0;
    padding: 13px 15px;
    color: #65606a;
    background: #f0f9fb;
    border-left: 3px solid #20b8d0;
}

.fam-aviso > span {
    display: grid;
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    place-items: center;
    color: #ffffff;
    background: #21b7ce;
    border-radius: 50%;
    font-weight: 800;
}

.fam-aviso p { margin: 0; font-size: 11px; line-height: 1.45; }

.fam-formulario {
    display: grid;
    grid-template-columns: 155px minmax(0, 1fr);
    gap: 11px 14px;
    margin: 18px 22px 22px;
    padding: 18px;
    background: #faf9fb;
    border: 1px solid #e9e6eb;
}

.fam-formulario label {
    align-self: center;
    color: #57515d;
    font-size: 11px;
    font-weight: 800;
}

.fam-formulario input,
.fam-formulario textarea,
.buscador-fam input {
    width: 100%;
    color: #4c4652;
    background: #ffffff;
    border: 1px solid #dcd8e0;
    border-radius: 3px;
    font: inherit;
    outline: none;
}

.fam-formulario input { height: 39px; padding: 0 12px; }
.fam-formulario textarea { min-height: 86px; padding: 11px 12px; resize: vertical; }
.fam-formulario input:focus,
.fam-formulario textarea:focus,
.buscador-fam input:focus { border-color: #25b8d0; box-shadow: 0 0 0 3px rgba(37, 184, 208, 0.11); }

.fam-formulario > div {
    display: flex;
    grid-column: 2;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.fam-formulario small { color: #99939e; font-size: 9px; }
.fam-formulario button,
.buscador-fam button,
.actividad-fam header button,
.ver-fam {
    min-height: 38px;
    padding: 0 17px;
    color: #ffffff;
    background: linear-gradient(135deg, #25bed4, #5362c6);
    border: 0;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}

.fam-formulario button:hover,
.buscador-fam button:hover,
.ver-fam:hover { filter: brightness(1.08); }
.fam-mensaje-form { min-height: 18px; margin: -12px 22px 14px; color: #168da1; font-size: 11px; font-weight: 800; }

.fam-lista-promociones { border-top: 1px solid #ebe8ed; }
.fam-fila-promocion {
    display: grid;
    grid-template-columns: 46px minmax(190px, 1.8fr) minmax(105px, 0.9fr) minmax(90px, 0.8fr) 78px 47px;
    min-height: 57px;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    color: #77717c;
    border-bottom: 1px solid #efedf0;
    font-size: 10px;
}

.fam-fila-promocion.cabecera { min-height: 34px; color: #77717c; background: #f4f3f5; font-weight: 800; }
.fam-fila-promocion > div b { display: block; overflow: hidden; color: #4c4652; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.fam-fila-promocion > div small { display: block; margin-top: 3px; color: #aaa4ad; }
.fam-fila-promocion > strong { color: #236fa0; }

.buscador-fam { padding: 22px; background: #f8f7fa; border-bottom: 1px solid #e8e5ea; }
.buscador-fam label { display: block; margin-bottom: 8px; color: #5b5560; font-size: 11px; font-weight: 800; }
.buscador-fam > div { display: grid; grid-template-columns: minmax(0, 1fr) 86px; }
.buscador-fam input { height: 42px; padding: 0 13px; border-radius: 3px 0 0 3px; }
.buscador-fam button { border-radius: 0 3px 3px 0; }
.resumen-busqueda-fam { margin: 0; padding: 14px 22px 8px; color: #8e8893; font-size: 10px; }
.resumen-busqueda-fam b { color: #e84d99; }

.resultados-fam { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 10px 22px 22px; }
.tarjeta-fam {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    gap: 10px 13px;
    padding: 15px;
    border: 1px solid #e8e5eb;
    border-radius: 4px;
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.tarjeta-fam:hover { transform: translateY(-2px); box-shadow: 0 7px 16px rgba(49, 40, 75, 0.1); }
.mini-emblema,
.emblema-perfil {
    display: grid;
    width: 70px;
    height: 80px;
    place-items: center;
    color: #ffffff;
    background: linear-gradient(145deg, #24c5d8, #4b5bc1);
    clip-path: polygon(50% 0, 94% 17%, 88% 72%, 50% 100%, 12% 72%, 6% 17%);
    font-size: 19px;
    font-weight: 900;
}

.mini-emblema.color-rosa { background: linear-gradient(145deg, #f05b9d, #873fa7); }
.mini-emblema.color-violeta { background: linear-gradient(145deg, #8d67d5, #3d2f83); }
.mini-emblema.color-azul { background: linear-gradient(145deg, #439ae1, #384b9e); }
.mini-emblema.color-dorado { background: linear-gradient(145deg, #f5bf4f, #e85c71); }
.mini-emblema.color-verde { background: linear-gradient(145deg, #37c89c, #3182a3); }
.estado-fam { color: #16a0b6; font-size: 8px; font-weight: 900; letter-spacing: 0.1em; }
.estado-fam.cerrado { color: #9d97a1; }
.tarjeta-fam h3 { margin: 3px 0 4px; color: #46404b; font-size: 16px; }
.tarjeta-fam p { margin: 0; color: #928c97; font-size: 10px; line-height: 1.35; }
.tarjeta-fam dl { display: flex; gap: 11px; margin: 11px 0 0; }
.tarjeta-fam dl div { padding-right: 10px; border-right: 1px solid #ebe8ed; }
.tarjeta-fam dl div:last-child { border: 0; }
.tarjeta-fam dt { color: #aaa4ad; font-size: 8px; text-transform: uppercase; }
.tarjeta-fam dd { margin: 2px 0 0; color: #5b5561; font-size: 9px; font-weight: 800; }
.ver-fam { grid-column: 1 / -1; min-height: 32px; background: #f0eef5; color: #5a4d86; }
.ver-fam:hover { color: #ffffff; background: #e84d99; }
.sin-resultados-fam { margin: 0 22px 22px; padding: 28px; color: #8d8791; background: #faf9fb; text-align: center; }

.perfil-fam { padding: 24px 25px 26px; }
.perfil-fam-identidad { display: flex; align-items: center; gap: 20px; }
.emblema-perfil { width: 92px; height: 105px; font-size: 25px; filter: drop-shadow(0 7px 7px rgba(42, 38, 74, 0.2)); }
.perfil-fam-identidad h3 { margin: 5px 0; color: #3f3945; font-size: 27px; }
.perfil-fam-identidad p { margin: 0; color: #8a8490; font-size: 12px; }
.perfil-fam-estadisticas { display: grid; grid-template-columns: repeat(4, 1fr); margin: 24px 0 18px; background: #f4f7fb; border: 1px solid #e1e7ef; }
.perfil-fam-estadisticas > div { padding: 17px 12px; text-align: center; border-right: 1px solid #e1e7ef; }
.perfil-fam-estadisticas > div:last-child { border: 0; }
.perfil-fam-estadisticas span { display: block; color: #9a94a0; font-size: 8px; font-weight: 800; }
.perfil-fam-estadisticas b { display: block; margin-top: 5px; color: #34417b; font-size: 16px; }
.perfil-fam-detalles { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid #ebe8ed; border-left: 1px solid #ebe8ed; }
.perfil-fam-detalles > div { display: flex; min-height: 42px; align-items: center; justify-content: space-between; padding: 9px 13px; border-right: 1px solid #ebe8ed; border-bottom: 1px solid #ebe8ed; }
.perfil-fam-detalles span { color: #9b95a0; font-size: 9px; }
.perfil-fam-detalles b { color: #58515d; font-size: 10px; text-align: right; }
.perfil-fam-progreso { margin-top: 20px; }
.perfil-fam-progreso > div:first-child { display: flex; justify-content: space-between; margin-bottom: 7px; color: #77717c; font-size: 9px; }
.perfil-fam-progreso > div:last-child { height: 7px; overflow: hidden; background: #ece9ef; border-radius: 7px; }
.perfil-fam-progreso > div:last-child span { display: block; height: 100%; background: linear-gradient(90deg, #25c0d5, #e94d99); border-radius: inherit; transition: width 260ms ease; }
.perfil-fam blockquote { margin: 20px 0 0; padding: 16px 19px; color: #65606a; background: #faf8fb; border-left: 3px solid #e84d99; font-size: 12px; font-style: italic; line-height: 1.55; }

.actividad-fam { margin-top: 14px; }
.actividad-fam header { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; border-bottom: 1px solid #ebe8ed; }
.actividad-fam header h3 { font-size: 16px; }
.actividad-fam header button { min-height: 32px; color: #655a80; background: #f0eef5; }
.actividad-fam ul { margin: 0; padding: 0; list-style: none; }
.actividad-fam li { display: grid; grid-template-columns: 30px minmax(0, 1fr) 50px; align-items: center; gap: 10px; padding: 12px 20px; border-bottom: 1px solid #efedf0; }
.actividad-fam li:last-child { border: 0; }
.actividad-fam li > span { display: grid; width: 28px; height: 28px; place-items: center; color: #ffffff; background: #5663c5; border-radius: 50%; font-size: 11px; }
.actividad-fam li b { display: block; color: #57515c; font-size: 10px; }
.actividad-fam li small { display: block; margin-top: 3px; color: #a29ca6; font-size: 9px; }
.actividad-fam time { color: #aaa4ad; font-size: 9px; text-align: right; }

@media (max-width: 900px) {
    .fam-portada { grid-template-columns: minmax(0, 1fr) 300px; }
    .fam-emblemas { transform: translateX(38px) scale(0.9); }
    .fam-contenido { grid-template-columns: 1fr; }
    .fam-menu { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .fam-menu h2 { grid-column: 1 / -1; }
    .fam-menu > button { border-right: 1px solid #eceaf0; border-bottom: 0; }
    .fam-menu > button.activo { box-shadow: inset 0 -4px #e84d99; }
    .fam-menu-dato { display: none; }
    .fam-fila-promocion { grid-template-columns: 42px minmax(180px, 1.6fr) minmax(100px, 0.8fr) 80px 45px; }
    .fam-fila-promocion > span:nth-child(4),
    .fam-fila-promocion.cabecera > span:nth-child(4) { display: none; }
}

@media (max-width: 700px) {
    .fam-portada { display: block; min-height: 330px; }
    .fam-portada-texto { padding: 29px 24px; }
    .fam-portada-texto p { max-width: 75%; }
    .fam-emblemas { position: absolute; right: -40px; bottom: -52px; width: 300px; min-height: 210px; transform: scale(0.72); }
    .fam-menu > button { grid-template-columns: 1fr; padding: 10px 6px; text-align: center; }
    .fam-menu > button > span { display: none; }
    .fam-menu > button small { display: none; }
    .fam-cabecera-panel { align-items: flex-start; }
    .fam-cabecera-panel > p { max-width: 100px; text-align: right; }
    .fam-formulario { grid-template-columns: 1fr; padding: 14px; }
    .fam-formulario > div { grid-column: 1; align-items: stretch; flex-direction: column; }
    .fam-fila-promocion.cabecera { display: none; }
    .fam-fila-promocion { grid-template-columns: 34px minmax(0, 1fr) 60px; min-height: 72px; }
    .fam-fila-promocion > strong,
    .fam-fila-promocion > span:nth-last-child(2) { display: none; }
    .fam-fila-promocion > span:last-child::before { content: "Visitas "; }
    .resultados-fam { grid-template-columns: 1fr; padding: 10px 14px 18px; }
    .buscador-fam { padding: 17px 14px; }
    .resumen-busqueda-fam { padding-right: 14px; padding-left: 14px; }
    .perfil-fam { padding: 20px 16px; }
    .perfil-fam-identidad { align-items: flex-start; }
    .emblema-perfil { flex: 0 0 76px; width: 76px; height: 88px; }
    .perfil-fam-identidad h3 { font-size: 22px; }
    .perfil-fam-estadisticas { grid-template-columns: repeat(2, 1fr); }
    .perfil-fam-estadisticas > div:nth-child(2) { border-right: 0; }
    .perfil-fam-estadisticas > div:nth-child(-n+2) { border-bottom: 1px solid #e1e7ef; }
    .perfil-fam-detalles { grid-template-columns: 1fr; }
    .actividad-fam header { align-items: flex-start; gap: 10px; }
}

/* =========================================================
   PÁGINA: MUSICAL
========================================================= */
.pagina-musical {
    padding-top: 22px;
    padding-bottom: 65px;
}

.musical-portada {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    min-height: 260px;
    margin-bottom: 18px;
    overflow: hidden;
    color: #ffffff;
    background:
        radial-gradient(circle at 78% 18%, rgba(245, 42, 138, 0.35), transparent 27%),
        linear-gradient(120deg, #090c16 0%, #27133f 56%, #9c165d 100%);
    border-radius: 5px;
    box-shadow: 0 8px 24px rgba(45, 27, 88, 0.2);
}

.musical-portada::before {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(90deg, transparent 0 38px, rgba(255, 255, 255, 0.025) 39px 40px);
    content: "";
}

.musical-portada-texto {
    position: relative;
    z-index: 3;
    align-self: center;
    padding: 36px 42px;
}

.musical-portada-texto > span {
    color: #4dddf2;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.15em;
}

.musical-portada-texto h1 {
    max-width: 520px;
    margin: 11px 0 10px;
    font-size: clamp(28px, 4vw, 41px);
    line-height: 1.02;
}

.musical-portada-texto p {
    max-width: 550px;
    margin: 0 0 22px;
    color: #ded8e9;
    font-size: 14px;
    line-height: 1.55;
}

.musical-portada-texto a {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    padding: 0 18px;
    color: #1c1426;
    background: #ffffff;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 800;
}

.musical-visual {
    position: relative;
    min-height: 260px;
}

.musical-visual img {
    position: absolute;
    z-index: 2;
    right: -40px;
    bottom: -35px;
    width: 430px;
    height: 305px;
    object-fit: contain;
    filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.5));
}

.ecualizador {
    position: absolute;
    z-index: 1;
    right: 25px;
    bottom: 28px;
    left: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 7px;
    height: 130px;
    opacity: 0.42;
}

.ecualizador i {
    width: 8px;
    height: 35%;
    background: linear-gradient(#41e1f2, #ef4e9c);
    border-radius: 8px 8px 0 0;
}

.ecualizador i:nth-child(2n) { height: 70%; }
.ecualizador i:nth-child(3n) { height: 100%; }
.ecualizador i:nth-child(5n) { height: 52%; }

.musical-contenido {
    display: grid;
    grid-template-columns: 235px minmax(0, 1fr);
    align-items: start;
    gap: 18px;
}

.musical-menu,
.musical-panel {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #d8d8d8;
    border-radius: 4px;
    box-shadow: 0 3px 10px rgba(67, 45, 80, 0.08);
}

.musical-menu h2 {
    margin: 0;
    padding: 18px 19px;
    color: #ffffff;
    background: linear-gradient(135deg, #24212c, #4d4265);
    font-size: 18px;
}

.musical-menu button {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    width: 100%;
    padding: 16px 12px;
    color: #69646e;
    background: #ffffff;
    border: 0;
    border-bottom: 1px solid #ececec;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.musical-menu button > span {
    grid-row: span 2;
    align-self: center;
    color: #aaa3b2;
    font-size: 20px;
    text-align: center;
}

.musical-menu button b {
    color: #4f4a58;
    font-size: 13px;
}

.musical-menu button small {
    margin-top: 4px;
    color: #a39fa7;
    font-size: 10px;
}

.musical-menu button:hover,
.musical-menu button.activo {
    background: #fff5fb;
}

.musical-menu button.activo {
    box-shadow: inset 4px 0 #e84d99;
}

.musical-menu button.activo > span,
.musical-menu button.activo b {
    color: #d43b83;
}

.dato-musical {
    padding: 18px;
    background: linear-gradient(145deg, #f2fbfd, #f8f4ff);
}

.dato-musical span,
.dato-musical b,
.dato-musical small {
    display: block;
}

.dato-musical span {
    color: #1aaec6;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.dato-musical b {
    margin: 5px 0 7px;
    color: #4a4450;
    font-size: 17px;
}

.dato-musical small {
    color: #8f8994;
    font-size: 10px;
    line-height: 1.45;
}

.musical-panel[hidden] {
    display: none;
}

.musical-cabecera-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 68px;
    padding: 12px 22px;
    background: linear-gradient(#ffffff, #f5f5f7);
    border-bottom: 1px solid #dddddd;
}

.musical-cabecera-panel > div {
    padding-left: 12px;
    border-left: 4px solid #e84d99;
}

.musical-cabecera-panel span {
    color: #15aeca;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.13em;
}

.musical-cabecera-panel h2 {
    margin: 3px 0 0;
    color: #3f3b47;
    font-size: 20px;
}

.musical-cabecera-panel > p {
    margin: 0;
    color: #99949f;
    font-size: 11px;
}

.cancion-destacada {
    display: grid;
    grid-template-columns: 145px minmax(0, 1fr) 145px;
    align-items: center;
    gap: 22px;
    min-height: 190px;
    padding: 24px 28px;
    color: #ffffff;
    background:
        radial-gradient(circle at 16% 50%, rgba(47, 220, 241, 0.18), transparent 24%),
        linear-gradient(110deg, #171321, #32204e 58%, #6c245d);
}

.disco-musical {
    position: relative;
    display: grid;
    place-items: center;
    width: 135px;
    height: 135px;
    background: repeating-radial-gradient(circle, #16131a 0 8px, #28232e 9px 11px);
    border: 4px solid #4b4451;
    border-radius: 50%;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.35);
}

.disco-musical::before {
    position: absolute;
    width: 58px;
    height: 58px;
    background: linear-gradient(135deg, #2dd7ea, #e94b98);
    border-radius: 50%;
    content: "";
}

.disco-musical span {
    position: relative;
    z-index: 1;
    font-size: 28px;
}

.cancion-top {
    color: #51dceb;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.cancion-destacada h3 {
    margin: 6px 0 4px;
    font-size: 25px;
}

.cancion-destacada p {
    margin: 0 0 14px;
    color: #bdb6c5;
    font-size: 11px;
}

.cancion-destacada audio {
    width: 100%;
    height: 34px;
}

.cancion-destacada dl {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 7px;
    margin: 0;
}

.cancion-destacada dl div {
    padding: 14px 7px;
    text-align: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.cancion-destacada dt {
    color: #aaa2b2;
    font-size: 8px;
    text-transform: uppercase;
}

.cancion-destacada dd {
    margin: 5px 0 0;
    font-size: 14px;
    font-weight: 800;
}

.filtros-musicales {
    display: flex;
    gap: 6px;
    padding: 16px 20px;
    background: #f7f7f8;
    border-bottom: 1px solid #e2e2e2;
}

.filtros-musicales button {
    padding: 8px 12px;
    color: #716c76;
    background: #ffffff;
    border: 1px solid #dedbe1;
    border-radius: 2px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}

.filtros-musicales button:hover,
.filtros-musicales button.activo {
    color: #ffffff;
    background: #e54c96;
    border-color: #e54c96;
}

.fila-musical {
    display: grid;
    grid-template-columns: 48px minmax(170px, 1.5fr) 90px 65px 90px minmax(155px, 1fr);
    align-items: center;
    min-height: 82px;
    padding: 9px 14px;
    border-bottom: 1px solid #eceaec;
}

.fila-musical.cabecera {
    min-height: 34px;
    color: #ffffff;
    background: #4e4954;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.fila-musical:not(.cabecera):hover {
    background: #f8fdfe;
}

.fila-musical audio {
    width: 100%;
    min-width: 0;
    height: 32px;
}

.posicion {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    color: #ffffff;
    background: #aaa5ae;
    border-radius: 50%;
    font-size: 11px;
}

.posicion.primero { background: #e64d98; }
.posicion.segundo { background: #7051c5; }
.posicion.tercero { background: #19a9c1; }

.nombre-cancion {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.caratula,
.voto-caratula {
    display: grid;
    place-items: center;
    color: #ffffff;
    background: linear-gradient(145deg, #1dc7de, #5f4eb6);
}

.caratula {
    width: 52px;
    height: 52px;
    font-size: 22px;
}

.caratula.pop,
.voto-caratula.pop { background: linear-gradient(145deg, #f0529e, #714cc5); }
.caratula.balada,
.voto-caratula.balada { background: linear-gradient(145deg, #23536f, #17aabe); }

.nombre-cancion h3,
.nombre-cancion small {
    display: block;
    margin: 0;
}

.nombre-cancion h3 {
    overflow: hidden;
    color: #48434d;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nombre-cancion small,
.genero-cancion,
.fila-musical > b {
    color: #99949e;
    font-size: 9px;
}

.nombre-cancion small { margin-top: 4px; }

.dificultad {
    display: flex;
    gap: 3px;
}

.dificultad i {
    width: 8px;
    height: 18px;
    background: #e34d97;
    border-radius: 5px;
}

.dificultad.media i:nth-child(n + 4) { background: #e3e0e5; }
.dificultad.alta i:nth-child(5) { background: #e3e0e5; }

.sin-canciones {
    margin: 0;
    padding: 28px;
    color: #8f8994;
    text-align: center;
}

.aviso-votacion-musical {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 20px 22px 6px;
    padding: 16px 18px;
    color: #ffffff;
    background: linear-gradient(115deg, #674ab9, #e94d98);
    border-radius: 4px;
}

.aviso-votacion-musical b { font-size: 13px; }
.aviso-votacion-musical span { color: #f4e8f0; font-size: 10px; }

.opciones-votacion-musical {
    padding: 14px 22px 4px;
}

.opciones-votacion-musical > article {
    display: grid;
    grid-template-columns: 42px 95px minmax(0, 1fr) 105px;
    align-items: center;
    gap: 16px;
    min-height: 145px;
    padding: 16px;
    border-bottom: 1px solid #e8e5e9;
}

.opciones-votacion-musical > article:last-child { border-bottom: 0; }

.voto-posicion {
    color: #cbc7ce;
    font-size: 18px;
    font-weight: 800;
}

.voto-caratula {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 95px;
    height: 95px;
    overflow: hidden;
    border-radius: 3px;
}

.voto-caratula span {
    position: absolute;
    top: 14px;
    font-size: 22px;
}

.voto-caratula i {
    align-self: flex-end;
    width: 5px;
    height: 20px;
    margin-bottom: 15px;
    background: rgba(255, 255, 255, 0.75);
    border-radius: 5px;
}

.voto-caratula i:nth-of-type(2),
.voto-caratula i:nth-of-type(4) { height: 33px; }
.voto-caratula i:nth-of-type(3) { height: 43px; }

.voto-info > span {
    color: #17a8c0;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.voto-info h3 {
    margin: 5px 0 9px;
    color: #45404a;
    font-size: 17px;
}

.voto-info audio {
    width: 100%;
    height: 31px;
}

.resultado-musical {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    align-items: center;
    gap: 9px;
    margin-top: 9px;
}

.resultado-musical > div {
    height: 6px;
    overflow: hidden;
    background: #ece9ee;
    border-radius: 5px;
}

.resultado-musical > div > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #23c5df, #e74d98);
    border-radius: inherit;
    transition: width 240ms ease;
}

.resultado-musical > b {
    color: #6a636f;
    font-size: 10px;
}

.voto-accion {
    text-align: center;
}

.voto-accion strong {
    display: block;
    margin-bottom: 9px;
    color: #77717c;
    font-size: 10px;
}

.boton-votar-musica {
    min-width: 78px;
    min-height: 36px;
    color: #ffffff;
    background: linear-gradient(135deg, #ef4e9e, #704dcc);
    border: 0;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.boton-votar-musica:hover { filter: brightness(1.08); }

.boton-votar-musica:disabled {
    background: #aaa5af;
    cursor: default;
}

.mensaje-voto-musical {
    min-height: 35px;
    margin: 0;
    padding: 4px 22px 18px;
    color: #158ca1;
    font-size: 11px;
    font-weight: 800;
}

@media (max-width: 900px) {
    .musical-portada { grid-template-columns: minmax(0, 1fr) 300px; }
    .musical-visual img { right: -85px; }
    .musical-contenido { grid-template-columns: 1fr; }
    .musical-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .musical-menu h2 { grid-column: 1 / -1; }
    .musical-menu .dato-musical { display: none; }
    .musical-menu button { border-right: 1px solid #ececec; border-bottom: 0; }
    .musical-menu button.activo { box-shadow: inset 0 -4px #e84d99; }
    .fila-musical { grid-template-columns: 42px minmax(160px, 1fr) 75px 55px 75px minmax(140px, 0.9fr); }
}

@media (max-width: 700px) {
    .musical-portada { display: block; min-height: 370px; }
    .musical-portada-texto { padding: 28px 24px; }
    .musical-visual { position: absolute; right: 0; bottom: 0; left: 0; min-height: 160px; opacity: 0.72; }
    .musical-visual img { right: -30px; bottom: -80px; width: 320px; height: 245px; }
    .ecualizador { height: 90px; }
    .musical-menu button { grid-template-columns: 1fr; text-align: center; }
    .musical-menu button > span { grid-row: auto; }
    .cancion-destacada { grid-template-columns: 90px minmax(0, 1fr); gap: 14px; padding: 20px 16px; }
    .disco-musical { width: 88px; height: 88px; }
    .disco-musical::before { width: 42px; height: 42px; }
    .cancion-destacada dl { grid-column: 1 / -1; }
    .filtros-musicales { overflow-x: auto; }
    .filtros-musicales button { white-space: nowrap; }
    .fila-musical.cabecera { display: none; }
    .fila-musical { grid-template-columns: 34px minmax(0, 1fr) 125px; min-height: 92px; padding: 10px; }
    .fila-musical .genero-cancion,
    .fila-musical > b,
    .fila-musical .dificultad { display: none; }
    .nombre-cancion { grid-template-columns: 46px minmax(0, 1fr); }
    .caratula { width: 46px; height: 46px; }
    .opciones-votacion-musical > article { grid-template-columns: 82px minmax(0, 1fr); gap: 12px; }
    .voto-posicion { display: none; }
    .voto-caratula { width: 82px; height: 82px; }
    .voto-accion { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; }
    .voto-accion strong { margin: 0; }
    .aviso-votacion-musical { align-items: flex-start; flex-direction: column; }
    .musical-cabecera-panel { align-items: flex-start; }
    .musical-cabecera-panel > p { max-width: 100px; text-align: right; }
}

/* =========================================================
   PÁGINA: RANKING
========================================================= */
.pagina-ranking {
    padding-top: 22px;
    padding-bottom: 65px;
}

.ranking-portada {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    min-height: 260px;
    margin-bottom: 18px;
    overflow: hidden;
    color: #ffffff;
    background:
        radial-gradient(circle at 79% 16%, rgba(255, 207, 80, 0.32), transparent 23%),
        radial-gradient(circle at 91% 90%, rgba(236, 73, 153, 0.25), transparent 29%),
        linear-gradient(122deg, #11172a 0%, #263977 55%, #563183 100%);
    border-radius: 5px;
    box-shadow: 0 8px 24px rgba(30, 33, 77, 0.2);
}

.ranking-portada::before {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(115deg, transparent 64%, rgba(255, 255, 255, 0.045) 64% 65%, transparent 65%),
        repeating-linear-gradient(0deg, transparent 0 32px, rgba(255, 255, 255, 0.022) 33px 34px);
    content: "";
}

.ranking-portada > div:first-child {
    position: relative;
    z-index: 2;
    align-self: center;
    padding: 36px 42px;
}

.ranking-portada > div:first-child > span {
    color: #f5c554;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.ranking-portada h1 {
    max-width: 540px;
    margin: 11px 0 10px;
    font-size: clamp(28px, 4vw, 41px);
    line-height: 1.04;
}

.ranking-portada p {
    max-width: 575px;
    margin: 0 0 22px;
    color: #dfe4f2;
    font-size: 14px;
    line-height: 1.55;
}

.ranking-portada button {
    min-height: 40px;
    padding: 0 20px;
    color: #252d56;
    background: #ffffff;
    border: 0;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.ranking-portada button:hover { color: #ffffff; background: #e94d99; }

.ranking-trofeo {
    position: relative;
    z-index: 2;
    align-self: center;
    justify-self: center;
    display: flex;
    width: 180px;
    height: 180px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff4c4;
    background: linear-gradient(145deg, rgba(255, 210, 91, 0.32), rgba(247, 118, 88, 0.16));
    border: 2px solid rgba(255, 228, 143, 0.52);
    border-radius: 50%;
    box-shadow: 0 0 0 13px rgba(255, 255, 255, 0.045), 0 18px 35px rgba(0, 0, 0, 0.25);
}

.ranking-trofeo::before,
.ranking-trofeo::after {
    position: absolute;
    top: 52px;
    width: 55px;
    height: 65px;
    border: 10px solid rgba(245, 196, 78, 0.72);
    content: "";
}

.ranking-trofeo::before { right: 153px; border-right: 0; border-radius: 45px 0 0 45px; }
.ranking-trofeo::after { left: 153px; border-left: 0; border-radius: 0 45px 45px 0; }
.ranking-trofeo > span { color: #ffd660; font-size: 32px; }
.ranking-trofeo i { width: 72px; height: 2px; margin: 8px 0; background: rgba(255, 255, 255, 0.32); }
.ranking-trofeo b { font-size: 13px; letter-spacing: 0.22em; }
.ranking-trofeo strong { color: #ffffff; font-size: 45px; line-height: 0.95; }

.ranking-contenido {
    display: grid;
    grid-template-columns: 235px minmax(0, 1fr);
    align-items: start;
    gap: 18px;
}

.ranking-menu-pagina,
.ranking-pagina-panel {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e4e2e7;
    border-radius: 4px;
    box-shadow: 0 4px 14px rgba(37, 29, 57, 0.07);
}

.ranking-menu-pagina h2 {
    margin: 0;
    padding: 17px 20px;
    color: #ffffff;
    background: linear-gradient(135deg, #26356f, #7047ae);
    font-size: 19px;
}

.ranking-menu-pagina > button {
    display: grid;
    width: 100%;
    min-height: 69px;
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    padding: 12px 15px;
    color: #625d69;
    background: #ffffff;
    border: 0;
    border-bottom: 1px solid #eceaf0;
    text-align: left;
    cursor: pointer;
}

.ranking-menu-pagina > button > span {
    grid-row: 1 / 3;
    color: #aaa4b0;
    font-size: 20px;
    text-align: center;
}

.ranking-menu-pagina > button b { font-size: 12px; }
.ranking-menu-pagina > button small { margin-top: 3px; color: #a09aa7; font-size: 10px; }
.ranking-menu-pagina > button:hover { background: #f8f6fb; }

.ranking-menu-pagina > button.activo {
    color: #313a70;
    background: #f3f7fd;
    box-shadow: inset 4px 0 #e84d99;
}

.ranking-menu-pagina > button.activo > span { color: #e84d99; }
.ranking-actualizacion { padding: 19px 20px 21px; background: #f8f7fa; }
.ranking-actualizacion span,
.ranking-actualizacion small { display: block; color: #918b97; font-size: 10px; }
.ranking-actualizacion b { display: block; margin: 3px 0; color: #303a72; font-size: 24px; }

.ranking-paneles-pagina { min-width: 0; }
.ranking-pagina-panel { min-height: 620px; }
.ranking-pagina-panel[hidden] { display: none; }
.ranking-cabecera-pagina {
    display: flex;
    min-height: 72px;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px;
    border-bottom: 1px solid #e9e7ec;
}

.ranking-cabecera-pagina span {
    color: #14a9c1;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.ranking-cabecera-pagina h2 { margin: 3px 0 0; color: #48424e; font-size: 21px; }
.ranking-cabecera-pagina > p { margin: 0; color: #99939e; font-size: 10px; }

.ranking-podio {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: 13px;
    padding: 34px 34px 25px;
    background:
        radial-gradient(circle at 50% 0, rgba(255, 210, 91, 0.15), transparent 35%),
        linear-gradient(180deg, #f8f9fd, #ffffff);
    border-bottom: 1px solid #ece9ee;
}

.ranking-podio article {
    position: relative;
    min-width: 0;
    padding: 19px 12px 15px;
    background: #ffffff;
    border: 1px solid #e7e3ea;
    border-top: 3px solid #8691b5;
    text-align: center;
    box-shadow: 0 6px 16px rgba(39, 34, 68, 0.08);
}

.ranking-podio .puesto-uno {
    padding-top: 24px;
    border-top-color: #f0b93e;
    transform: translateY(-12px);
}

.ranking-podio .puesto-tres { border-top-color: #c48160; }
.ranking-podio img,
.escudo-podio {
    display: grid;
    width: 72px;
    height: 72px;
    margin: 0 auto 9px;
    place-items: center;
    object-fit: cover;
    color: #ffffff;
    background: linear-gradient(145deg, #24c5d8, #4b5bc1);
    border: 3px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #d9d5df;
    font-size: 20px;
    font-weight: 900;
}

.puesto-uno img,
.puesto-uno .escudo-podio { box-shadow: 0 0 0 3px #efbd49; }
.escudo-podio.rosa { background: linear-gradient(145deg, #ee579d, #7d3ca4); }
.escudo-podio.violeta { background: linear-gradient(145deg, #8d67d5, #3d2f83); }
.ranking-podio .medalla {
    position: absolute;
    z-index: 2;
    top: 8px;
    left: 50%;
    display: grid;
    width: 25px;
    height: 25px;
    margin-left: 22px;
    place-items: center;
    color: #ffffff;
    background: #7581aa;
    border: 2px solid #ffffff;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 900;
}

.ranking-podio .puesto-uno .medalla { top: 13px; background: #e9ad2e; }
.ranking-podio .puesto-tres .medalla { background: #b97553; }
.ranking-podio .corona { position: absolute; top: -25px; left: 0; width: 100%; color: #efb731; font-size: 23px; }
.ranking-podio h3 { overflow: hidden; margin: 0 0 3px; color: #46404b; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.ranking-podio p { overflow: hidden; margin: 0 0 8px; color: #9a94a0; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.ranking-podio article > b { color: #44548e; font-size: 10px; }
.ranking-podio.popular article > b { color: #db448d; }

.controles-ranking { padding: 17px 22px; background: #faf9fb; border-bottom: 1px solid #e7e4e9; }
.controles-ranking label { display: block; margin-bottom: 7px; color: #5e5864; font-size: 10px; font-weight: 800; }
.controles-ranking > div { display: grid; grid-template-columns: minmax(0, 1fr) 78px; }
.controles-con-filtros > div { grid-template-columns: minmax(0, 1fr) 120px 78px; }
.controles-ranking input,
.controles-ranking select {
    min-width: 0;
    height: 38px;
    padding: 0 12px;
    color: #56505c;
    background: #ffffff;
    border: 1px solid #dad6df;
    font: inherit;
    outline: none;
}

.controles-ranking input:focus,
.controles-ranking select:focus { z-index: 1; border-color: #22b8cf; box-shadow: 0 0 0 3px rgba(34, 184, 207, 0.1); }
.controles-ranking select { border-left: 0; }
.controles-ranking button { color: #ffffff; background: #5260bb; border: 0; font-size: 9px; font-weight: 800; cursor: pointer; }
.controles-ranking button:hover { background: #e64b96; }
.nota-ranking { margin: 0; padding: 12px 22px; color: #98929d; background: #ffffff; font-size: 9px; }

.tabla-ranking-completa { border-top: 1px solid #e8e5ea; }
.fila-ranking {
    display: grid;
    grid-template-columns: 64px minmax(145px, 1.2fr) 62px minmax(105px, 0.85fr) minmax(110px, 1fr) 70px;
    min-height: 48px;
    align-items: center;
    gap: 8px;
    padding: 8px 17px;
    color: #77717c;
    border-bottom: 1px solid #efedf0;
    font-size: 10px;
}

.fila-ranking:nth-child(odd):not(.cabecera) { background: #fcfbfc; }
.fila-ranking:hover:not(.cabecera) { background: #f1faff; }
.fila-ranking.cabecera { min-height: 34px; color: #ffffff; background: #4d4a58; font-size: 9px; font-weight: 800; }
.fila-ranking > strong { color: #55505b; font-size: 12px; text-align: center; }
.fila-ranking:nth-child(2) > strong,
.fila-ranking:nth-child(3) > strong,
.fila-ranking:nth-child(4) > strong {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    justify-self: center;
    color: #ffffff;
    background: #e94d99;
    border-radius: 50%;
}

.fila-ranking:nth-child(3) > strong { background: #6674ae; }
.fila-ranking:nth-child(4) > strong { background: #b57a5f; }
.fila-ranking > b { overflow: hidden; color: #48424e; text-overflow: ellipsis; white-space: nowrap; }
.fila-ranking > a { overflow: hidden; color: #167fa8; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.fila-ranking > em { color: #92909a; font-size: 9px; font-style: normal; font-weight: 800; text-align: center; }
.fila-ranking > em.sube { color: #1aa688; }
.fila-ranking > em.baja { color: #dc5680; }
.sin-resultados-ranking { margin: 0; padding: 30px; color: #8f8994; background: #faf9fb; text-align: center; }

@media (max-width: 900px) {
    .ranking-portada { grid-template-columns: minmax(0, 1fr) 290px; }
    .ranking-trofeo { transform: scale(0.85); }
    .ranking-contenido { grid-template-columns: 1fr; }
    .ranking-menu-pagina { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ranking-menu-pagina h2 { grid-column: 1 / -1; }
    .ranking-menu-pagina > button { border-right: 1px solid #eceaf0; border-bottom: 0; }
    .ranking-menu-pagina > button.activo { box-shadow: inset 0 -4px #e84d99; }
    .ranking-actualizacion { display: none; }
    .fila-ranking { grid-template-columns: 54px minmax(130px, 1fr) 55px minmax(100px, 0.8fr) minmax(95px, 0.8fr); }
    .fila-ranking > :last-child { display: none; }
}

@media (max-width: 700px) {
    .main-nav,
    .nav-grid {
        height: auto;
    }

    .ranking-portada { display: block; min-height: 330px; }
    .ranking-portada > div:first-child { padding: 29px 24px; }
    .ranking-portada p { max-width: 75%; }
    .ranking-trofeo { position: absolute; right: -24px; bottom: -25px; width: 150px; height: 150px; transform: scale(0.75); }
    .ranking-trofeo::before { right: 125px; }
    .ranking-trofeo::after { left: 125px; }
    .ranking-menu-pagina > button { grid-template-columns: 1fr; padding: 10px 5px; text-align: center; }
    .ranking-menu-pagina > button > span,
    .ranking-menu-pagina > button small { display: none; }
    .ranking-cabecera-pagina { align-items: flex-start; }
    .ranking-cabecera-pagina > p { max-width: 105px; text-align: right; }
    .ranking-podio { gap: 6px; padding: 34px 10px 20px; }
    .ranking-podio article { padding: 14px 5px 12px; }
    .ranking-podio .puesto-uno { padding-top: 20px; }
    .ranking-podio img,
    .escudo-podio { width: 58px; height: 58px; }
    .ranking-podio h3 { font-size: 11px; }
    .ranking-podio .medalla { margin-left: 14px; }
    .controles-ranking { padding: 15px 13px; }
    .controles-con-filtros > div { grid-template-columns: minmax(0, 1fr) 92px; }
    .controles-con-filtros button { grid-column: 1 / -1; min-height: 31px; }
    .nota-ranking { padding-right: 13px; padding-left: 13px; }
    .fila-ranking.cabecera { display: none; }
    .fila-ranking { grid-template-columns: 36px minmax(0, 1fr) 50px; min-height: 56px; padding: 8px 12px; }
    .fila-ranking > :nth-child(4),
    .fila-ranking > :nth-child(5),
    .fila-ranking > :nth-child(6) { display: none; }
    .tabla-ranking-completa.fams .fila-ranking { grid-template-columns: 36px minmax(0, 1fr) minmax(90px, 0.7fr); }
}

/* =========================================================
   PÁGINA: ATENCIÓN AL CLIENTE
========================================================= */
.pagina-atencion {
    padding-top: 22px;
    padding-bottom: 65px;
}

.atencion-portada {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    min-height: 235px;
    margin-bottom: 18px;
    overflow: hidden;
    color: #ffffff;
    background:
        radial-gradient(circle at 82% 18%, rgba(69, 220, 238, 0.24), transparent 26%),
        radial-gradient(circle at 91% 90%, rgba(235, 73, 152, 0.24), transparent 30%),
        linear-gradient(122deg, #10172b 0%, #264079 57%, #5a337f 100%);
    border-radius: 5px;
    box-shadow: 0 8px 24px rgba(30, 33, 77, 0.2);
}

.atencion-portada::before {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(135deg, transparent 0 52px, rgba(255, 255, 255, 0.025) 53px 54px);
    content: "";
}

.atencion-portada > div:first-child {
    position: relative;
    z-index: 2;
    align-self: center;
    padding: 34px 42px;
}

.atencion-portada > div:first-child > span {
    color: #50deed;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.15em;
}

.atencion-portada h1 {
    margin: 10px 0 9px;
    font-size: clamp(28px, 4vw, 40px);
    line-height: 1.04;
}

.atencion-portada p {
    max-width: 560px;
    margin: 0 0 20px;
    color: #dfe5f2;
    font-size: 14px;
    line-height: 1.5;
}

.atencion-portada a {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    padding: 0 19px;
    color: #26325f;
    background: #ffffff;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 800;
}

.atencion-portada a:hover { color: #ffffff; background: #e94d99; }
.atencion-ilustracion { position: relative; min-height: 235px; }
.atencion-ilustracion img {
    position: absolute;
    right: 3px;
    bottom: -8px;
    width: 310px;
    height: 245px;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 12px 13px rgba(7, 15, 39, 0.4));
}
.atencion-ilustracion > span {
    position: absolute;
    top: 45px;
    right: 92px;
    display: grid;
    width: 118px;
    height: 118px;
    place-items: center;
    color: #fff5bc;
    background: linear-gradient(145deg, rgba(46, 204, 220, 0.48), rgba(113, 66, 176, 0.65));
    border: 2px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    box-shadow: 0 0 0 13px rgba(255, 255, 255, 0.05), 0 15px 28px rgba(0, 0, 0, 0.23);
    font-size: 64px;
    font-weight: 800;
}

.atencion-ilustracion i {
    position: absolute;
    display: block;
    width: 17px;
    height: 17px;
    background: #f2c34b;
    border-radius: 50%;
    box-shadow: 0 0 16px rgba(255, 212, 92, 0.7);
}

.atencion-ilustracion i:nth-child(2) { top: 42px; right: 48px; }
.atencion-ilustracion i:nth-child(3) { right: 235px; bottom: 48px; width: 10px; height: 10px; }
.atencion-ilustracion i:nth-child(4) { right: 50px; bottom: 42px; width: 8px; height: 8px; }

.atencion-contenido {
    display: grid;
    grid-template-columns: 235px minmax(0, 1fr);
    align-items: start;
    gap: 18px;
}

.atencion-menu,
.atencion-caja {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e4e2e7;
    border-radius: 4px;
    box-shadow: 0 4px 14px rgba(37, 29, 57, 0.07);
}

.atencion-menu {
    position: sticky;
    top: 12px;
}

.atencion-menu h2 {
    margin: 0;
    padding: 17px 20px;
    color: #ffffff;
    background: linear-gradient(135deg, #27356f, #7048ad);
    font-size: 19px;
}

.atencion-menu > a {
    display: grid;
    min-height: 69px;
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    padding: 12px 15px;
    color: #625d69;
    background: #ffffff;
    border-bottom: 1px solid #eceaf0;
}

.atencion-menu > a > span {
    grid-row: 1 / 3;
    color: #aaa4b0;
    font-size: 20px;
    text-align: center;
}

.atencion-menu > a b { font-size: 11px; }
.atencion-menu > a small { margin-top: 3px; color: #a09aa7; font-size: 9px; }
.atencion-menu > a:hover,
.atencion-menu > a.activo { color: #303a71; background: #f3f7fd; box-shadow: inset 4px 0 #e84d99; }
.atencion-menu > a:hover > span,
.atencion-menu > a.activo > span { color: #e84d99; }

.atencion-menu > div { padding: 19px 20px 21px; background: #f8f7fa; }
.atencion-menu > div span,
.atencion-menu > div small { display: block; color: #918b97; font-size: 9px; }
.atencion-menu > div b { display: block; margin: 4px 0; color: #303a72; font-size: 18px; }
.atencion-paneles { display: grid; min-width: 0; gap: 16px; }
.atencion-caja { scroll-margin-top: 12px; }
.atencion-caja > header {
    display: flex;
    min-height: 72px;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px;
    border-bottom: 1px solid #e9e7ec;
}

.atencion-caja > header span {
    color: #14a9c1;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.atencion-caja > header h2 { margin: 3px 0 0; color: #48424e; font-size: 21px; }
.atencion-caja > header > p { margin: 0; color: #99939e; font-size: 10px; }
.categorias-ayuda { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 20px 22px; background: #faf9fb; border-bottom: 1px solid #e9e6eb; }
.categorias-ayuda button {
    display: grid;
    min-width: 0;
    min-height: 92px;
    place-items: center;
    padding: 11px 7px;
    color: #5c5662;
    background: #ffffff;
    border: 1px solid #e1dde5;
    border-radius: 3px;
    cursor: pointer;
}

.categorias-ayuda button:hover,
.categorias-ayuda button.activo { color: #ffffff; background: linear-gradient(135deg, #27bfd3, #5c57bd); border-color: transparent; }
.categorias-ayuda button > span { font-size: 23px; }
.categorias-ayuda button b { margin-top: 5px; font-size: 11px; }
.categorias-ayuda button small { margin-top: 3px; color: #9d97a2; font-size: 8px; }
.categorias-ayuda button:hover small,
.categorias-ayuda button.activo small { color: #e5e5f1; }
.lista-preguntas { padding: 8px 22px 20px; }
.lista-preguntas details { border-bottom: 1px solid #e9e6eb; }
.lista-preguntas summary { position: relative; padding: 15px 35px 15px 3px; color: #56505b; font-size: 11px; font-weight: 800; cursor: pointer; list-style: none; }
.lista-preguntas summary::-webkit-details-marker { display: none; }
.lista-preguntas summary::after { position: absolute; top: 13px; right: 8px; color: #e44a95; content: "+"; font-size: 19px; }
.lista-preguntas details[open] summary::after { content: "−"; }
.lista-preguntas details p { margin: -3px 35px 15px 3px; color: #85808a; font-size: 10px; line-height: 1.55; }
.sin-faq { margin: 0; padding: 25px; color: #918b96; text-align: center; }

.aviso-consulta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 22px 0;
    padding: 13px 15px;
    color: #65606a;
    background: #f0f9fb;
    border-left: 3px solid #20b8d0;
}

.aviso-consulta > span { display: grid; flex: 0 0 25px; width: 25px; height: 25px; place-items: center; color: #ffffff; background: #21b7ce; border-radius: 50%; font-weight: 800; }
.aviso-consulta p { margin: 0; font-size: 10px; line-height: 1.45; }
.formulario-atencion { display: grid; gap: 15px; padding: 20px 22px 23px; }
.formulario-atencion fieldset { display: grid; gap: 12px; margin: 0; padding: 16px; background: #faf9fb; border: 1px solid #e6e3e8; }
.formulario-atencion legend { padding: 0 7px; color: #39457e; font-size: 10px; font-weight: 800; }
.formulario-atencion label { display: grid; gap: 6px; color: #5d5762; font-size: 10px; font-weight: 800; }
.campos-dobles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.formulario-atencion input:not([type="checkbox"]):not([type="file"]),
.formulario-atencion select,
.formulario-atencion textarea {
    width: 100%;
    min-width: 0;
    height: 39px;
    padding: 0 11px;
    color: #56505b;
    background: #ffffff;
    border: 1px solid #dad6df;
    border-radius: 3px;
    font: inherit;
    outline: none;
}

.formulario-atencion textarea { min-height: 115px; padding: 11px; resize: vertical; }
.formulario-atencion input:focus,
.formulario-atencion select:focus,
.formulario-atencion textarea:focus { border-color: #22b8cf; box-shadow: 0 0 0 3px rgba(34, 184, 207, 0.1); }
.formulario-atencion input[type="file"] { padding: 8px; color: #77717c; background: #ffffff; border: 1px dashed #cfc9d4; font-size: 9px; }
.formulario-atencion label small { color: #9d97a2; font-size: 8px; font-weight: 400; text-align: right; }
.confirmacion-consulta { display: flex !important; align-items: flex-start; grid-template-columns: none; gap: 8px !important; font-weight: 400 !important; line-height: 1.4; }
.confirmacion-consulta input { margin: 1px 0 0; accent-color: #e84d99; }
.acciones-consulta { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.acciones-consulta small { color: #99939e; font-size: 9px; }
.acciones-consulta button { min-height: 40px; padding: 0 19px; color: #ffffff; background: linear-gradient(135deg, #25bfd4, #555fc1); border: 0; border-radius: 3px; font-size: 10px; font-weight: 800; cursor: pointer; }
.acciones-consulta button:hover { filter: brightness(1.08); }
.mensaje-atencion { min-height: 22px; margin: -10px 22px 18px; color: #178fa3; font-size: 11px; font-weight: 800; }
.mensaje-atencion.error { color: #d84c78; }

.tabla-consultas { padding-bottom: 8px; }
.fila-consulta { display: grid; grid-template-columns: 85px minmax(180px, 1fr) minmax(110px, 0.8fr) 85px 90px; min-height: 49px; align-items: center; gap: 8px; padding: 8px 17px; color: #77717c; border-bottom: 1px solid #efedf0; font-size: 9px; }
.fila-consulta.cabecera { min-height: 34px; color: #ffffff; background: #4d4a58; font-weight: 800; }
.fila-consulta > b { color: #3c477f; }
.fila-consulta strong { display: inline-flex; min-height: 24px; align-items: center; justify-content: center; padding: 0 8px; border-radius: 13px; font-size: 8px; }
.estado-resuelto { color: #177d68; background: #ddf5ed; }
.estado-proceso { color: #9c6b17; background: #fff0ca; }

@media (max-width: 900px) {
    .atencion-portada { grid-template-columns: minmax(0, 1fr) 270px; }
    .atencion-contenido { grid-template-columns: 1fr; }
    .atencion-menu { position: static; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .atencion-menu h2 { grid-column: 1 / -1; }
    .atencion-menu > a { border-right: 1px solid #eceaf0; border-bottom: 0; }
    .atencion-menu > a:hover,
    .atencion-menu > a.activo { box-shadow: inset 0 -4px #e84d99; }
    .atencion-menu > div { display: none; }
}

@media (max-width: 700px) {
    .atencion-portada { display: block; min-height: 315px; }
    .atencion-portada > div:first-child { padding: 29px 24px; }
    .atencion-portada p { max-width: 76%; }
    .atencion-ilustracion { position: absolute; right: -35px; bottom: -48px; width: 230px; min-height: 200px; transform: scale(0.7); }
    .atencion-menu > a { grid-template-columns: 1fr; padding: 10px 5px; text-align: center; }
    .atencion-menu > a > span,
    .atencion-menu > a small { display: none; }
    .atencion-caja > header { align-items: flex-start; }
    .atencion-caja > header > p { max-width: 95px; text-align: right; }
    .categorias-ayuda { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px; }
    .lista-preguntas { padding-right: 14px; padding-left: 14px; }
    .aviso-consulta { margin-right: 14px; margin-left: 14px; }
    .formulario-atencion { padding-right: 14px; padding-left: 14px; }
    .campos-dobles { grid-template-columns: 1fr; }
    .acciones-consulta { align-items: stretch; flex-direction: column; }
    .fila-consulta.cabecera { display: none; }
    .fila-consulta { grid-template-columns: 70px minmax(0, 1fr) 80px; min-height: 58px; padding: 9px 12px; }
    .fila-consulta > :nth-child(3),
    .fila-consulta > :nth-child(4) { display: none; }
}

/* =========================================================
   PÁGINAS: DESCARGAR Y COMENZANDO
========================================================= */
.pagina-descarga,
.pagina-comenzando {
    padding-bottom: 55px;
}

.descarga-portada,
.comenzando-portada {
    position: relative;
    min-height: 285px;
    overflow: hidden;
    margin-bottom: 20px;
    color: #ffffff;
    background: linear-gradient(115deg, #252963 0%, #3e3788 48%, #147f9f 100%);
    border-radius: 5px;
    box-shadow: 0 12px 30px rgba(31, 26, 75, 0.19);
}

.descarga-portada::before,
.comenzando-portada::before {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 82% 40%, rgba(69, 235, 240, 0.28), transparent 31%), linear-gradient(90deg, transparent 49%, rgba(255, 255, 255, 0.045) 50%, transparent 51%);
    background-size: auto, 24px 24px;
    content: "";
}

.descarga-portada-texto,
.comenzando-portada > div:first-child {
    position: relative;
    z-index: 2;
    width: 62%;
    padding: 53px 55px;
}

.descarga-portada-texto > span,
.comenzando-portada > div:first-child > span,
.texto-paso > span {
    color: #70e5ec;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.descarga-portada h1,
.comenzando-portada h1 {
    margin: 8px 0 12px;
    color: #ffffff;
    font-size: clamp(29px, 3.2vw, 47px);
    line-height: 1.02;
}

.descarga-portada p,
.comenzando-portada p {
    max-width: 610px;
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    line-height: 1.6;
}

.estado-descarga {
    display: inline-grid;
    grid-template-columns: 11px auto;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 2px 9px;
    margin-top: 21px;
    padding: 11px 15px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 3px;
}

.estado-descarga i {
    grid-row: 1 / 3;
    width: 9px;
    height: 9px;
    background: #ffc857;
    border-radius: 50%;
    box-shadow: 0 0 12px #ffc857;
}

.estado-descarga b { font-size: 10px; }
.estado-descarga small { color: rgba(255, 255, 255, 0.59); font-size: 8px; }

.descarga-visual {
    position: absolute;
    z-index: 1;
    top: 31px;
    right: 85px;
    display: grid;
    width: 202px;
    height: 222px;
    place-items: center;
    padding: 34px 25px 22px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.23), rgba(255, 255, 255, 0.07));
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 18px;
    box-shadow: 0 24px 40px rgba(8, 10, 42, 0.33);
    transform: rotate(4deg);
}

.descarga-visual::before {
    position: absolute;
    inset: 15px;
    border: 1px dashed rgba(255, 255, 255, 0.22);
    border-radius: 10px;
    content: "";
}

.descarga-visual span { z-index: 1; color: #fff4a2; font-size: 45px; font-weight: 900; font-style: italic; }
.descarga-visual img { z-index: 1; width: 125px; height: 95px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3)); }
.descarga-visual i { z-index: 1; display: grid; width: 46px; height: 46px; place-items: center; color: #303374; background: #69e3eb; border-radius: 50%; font-size: 28px; font-style: normal; }
.descarga-visual b { z-index: 1; font-size: 10px; letter-spacing: 0.25em; }

.descarga-contenido {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    align-items: start;
    gap: 18px;
}

.descarga-menu,
.descarga-caja {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e5e2e8;
    border-radius: 4px;
    box-shadow: 0 4px 14px rgba(37, 29, 57, 0.07);
}

.descarga-menu { position: sticky; top: 12px; }
.descarga-menu h2 { margin: 0; padding: 17px 19px; color: #ffffff; background: linear-gradient(135deg, #293674, #6946a8); font-size: 19px; }
.descarga-menu > a { display: grid; min-height: 67px; grid-template-columns: 35px 1fr; grid-template-rows: auto auto; align-items: center; padding: 11px 14px; color: #625d69; border-bottom: 1px solid #eceaf0; }
.descarga-menu > a > span { grid-row: 1 / 3; color: #aaa4b0; font-size: 20px; text-align: center; }
.descarga-menu > a b { font-size: 11px; }
.descarga-menu > a small { color: #9c96a1; font-size: 8px; }
.descarga-menu > a:hover,
.descarga-menu > a.activo { color: #303a71; background: #f3f7fd; box-shadow: inset 4px 0 #e84d99; }
.descarga-menu > a:hover > span,
.descarga-menu > a.activo > span { color: #e84d99; }
.descarga-menu > div { padding: 18px 19px 21px; background: #f8f7fa; }
.descarga-menu > div span,
.descarga-menu > div small { display: block; color: #918b97; font-size: 9px; }
.descarga-menu > div b { display: block; margin: 4px 0; color: #303a72; font-size: 17px; }
.descarga-paneles { display: grid; min-width: 0; gap: 16px; }
.descarga-caja { scroll-margin-top: 12px; }
.descarga-caja > header { display: flex; min-height: 72px; align-items: center; justify-content: space-between; padding: 14px 22px; border-bottom: 1px solid #e9e7ec; }
.descarga-caja > header span { color: #17a9c0; font-size: 9px; font-weight: 800; letter-spacing: 0.12em; }
.descarga-caja > header h2 { margin: 3px 0 0; color: #48424e; font-size: 21px; }
.descarga-caja > header > p { margin: 0; color: #99939e; font-size: 10px; }

.tarjeta-instalador {
    display: grid;
    grid-template-columns: 85px minmax(0, 1fr) 218px;
    align-items: center;
    gap: 19px;
    margin: 21px 22px 15px;
    padding: 19px;
    background: linear-gradient(135deg, #f7f9fd, #f5f2fa);
    border: 1px solid #e2dfe8;
    border-radius: 4px;
}

.icono-instalador { display: grid; width: 78px; height: 86px; place-items: center; color: #ffffff; background: linear-gradient(145deg, #7652b8, #239fc0); border-radius: 5px 18px 5px 5px; box-shadow: 0 7px 15px rgba(73, 70, 155, 0.25); }
.icono-instalador span { font-size: 27px; font-weight: 900; }
.icono-instalador small { margin-top: -20px; color: #d9fdff; font-size: 9px; letter-spacing: 0.12em; }
.datos-instalador > span { color: #df4b93; font-size: 8px; font-weight: 800; letter-spacing: 0.12em; }
.datos-instalador h3 { margin: 4px 0 6px; color: #3e3a46; font-size: 16px; }
.datos-instalador > p { margin: 0; color: #85808a; font-size: 9px; line-height: 1.5; }
.datos-instalador dl { display: flex; gap: 20px; margin: 12px 0 0; }
.datos-instalador dl div { padding-right: 19px; border-right: 1px solid #ddd9e1; }
.datos-instalador dt { color: #9c96a1; font-size: 8px; }
.datos-instalador dd { margin: 3px 0 0; color: #4f4955; font-size: 9px; font-weight: 800; }
.boton-descargar-juego { display: grid; min-height: 67px; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; align-items: center; padding: 11px 15px; color: #ffffff; background: linear-gradient(135deg, #ea4e9c, #bc3c8e); border-radius: 4px; box-shadow: 0 7px 15px rgba(196, 57, 137, 0.25); }
.boton-descargar-juego:hover { filter: brightness(1.08); transform: translateY(-1px); }
.boton-descargar-juego > span { grid-row: 1 / 3; font-size: 28px; text-align: center; }
.boton-descargar-juego b { font-size: 11px; }
.boton-descargar-juego small { color: #ffddec; font-size: 8px; }
.aviso-instalador { display: flex; align-items: center; gap: 11px; margin: 0 22px 17px; padding: 12px 14px; color: #68616d; background: #fff8df; border-left: 3px solid #edbd3c; }
.aviso-instalador > span { display: grid; flex: 0 0 24px; width: 24px; height: 24px; place-items: center; color: #ffffff; background: #e6ad21; border-radius: 50%; font-weight: 800; }
.aviso-instalador p { margin: 0; font-size: 9px; line-height: 1.45; }
.seguridad-descarga { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #e9e6eb; }
.seguridad-descarga article { display: flex; align-items: center; gap: 10px; padding: 15px 20px; border-right: 1px solid #e9e6eb; }
.seguridad-descarga article:last-child { border-right: 0; }
.seguridad-descarga article > span { display: grid; flex: 0 0 27px; width: 27px; height: 27px; place-items: center; color: #ffffff; background: #32b8c9; border-radius: 50%; font-weight: 800; }
.seguridad-descarga b,
.seguridad-descarga small { display: block; }
.seguridad-descarga b { color: #514b56; font-size: 10px; }
.seguridad-descarga small { margin-top: 3px; color: #958f9a; font-size: 8px; line-height: 1.35; }
.seguridad-descarga a { color: #298ca4; }
.pasos-instalacion { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; padding: 0; list-style: none; }
.pasos-instalacion li { display: grid; min-height: 140px; grid-template-columns: 48px 1fr; gap: 13px; padding: 24px; border-right: 1px solid #ece9ee; border-bottom: 1px solid #ece9ee; }
.pasos-instalacion li:nth-child(2n) { border-right: 0; }
.pasos-instalacion li > span { display: grid; width: 43px; height: 43px; place-items: center; color: #ffffff; background: linear-gradient(145deg, #29bace, #6655b5); border-radius: 50%; font-size: 18px; font-weight: 800; }
.pasos-instalacion h3 { margin: 2px 0 6px; color: #4d4752; font-size: 13px; }
.pasos-instalacion p { margin: 0; color: #85808a; font-size: 9px; line-height: 1.55; }
.pasos-instalacion a { display: inline-block; margin-top: 8px; color: #d9448a; font-size: 9px; font-weight: 800; }
.nota-requisitos { margin: 18px 22px 12px; padding: 12px 14px; color: #68616d; background: #eef8fb; border-left: 3px solid #25b6cd; font-size: 9px; line-height: 1.5; }
.tabla-requisitos { margin: 0 22px 22px; border: 1px solid #e5e2e8; }
.fila-requisito { display: grid; grid-template-columns: 1fr 1.35fr 1.35fr; min-height: 39px; align-items: center; color: #79737e; border-bottom: 1px solid #ece9ee; font-size: 9px; }
.fila-requisito:last-child { border-bottom: 0; }
.fila-requisito > * { height: 100%; padding: 11px 13px; border-right: 1px solid #ece9ee; }
.fila-requisito > :last-child { border-right: 0; }
.fila-requisito b { color: #4e4853; }
.fila-requisito.cabecera { color: #ffffff; background: #514d5b; font-weight: 800; }

/* COMENZANDO */
.comenzando-portada { min-height: 310px; background: linear-gradient(115deg, #312164 0%, #664092 48%, #1593a8 100%); }
.comenzando-portada > div:first-child { width: 61%; padding-top: 62px; }
.comenzando-portada > div:first-child > a { display: inline-flex; min-height: 38px; align-items: center; gap: 14px; margin-top: 20px; padding: 0 17px; color: #ffffff; background: #ed4d9a; border-radius: 3px; font-size: 10px; font-weight: 800; box-shadow: 0 7px 15px rgba(196, 57, 137, 0.28); }
.comenzando-portada > img { position: absolute; z-index: 1; right: 83px; bottom: -5px; width: 275px; height: 290px; object-fit: contain; object-position: bottom; filter: drop-shadow(0 18px 22px rgba(15, 10, 42, 0.38)); }
.notas-portada i { position: absolute; z-index: 1; color: rgba(255, 244, 158, 0.78); font-size: 31px; font-style: normal; text-shadow: 0 0 15px rgba(255, 226, 86, 0.42); }
.notas-portada i:nth-child(1) { top: 35px; right: 60px; }
.notas-portada i:nth-child(2) { top: 88px; right: 345px; font-size: 23px; }
.notas-portada i:nth-child(3) { right: 35px; bottom: 50px; font-size: 18px; }
.progreso-comenzando { display: grid; grid-template-columns: repeat(5, 1fr); overflow: hidden; margin-bottom: 17px; background: #ffffff; border: 1px solid #e2dfe5; border-radius: 4px; box-shadow: 0 4px 14px rgba(37, 29, 57, 0.07); }
.progreso-comenzando a { position: relative; display: flex; min-height: 67px; align-items: center; gap: 10px; justify-content: center; color: #77717d; border-right: 1px solid #e9e6ec; }
.progreso-comenzando a:last-child { border-right: 0; }
.progreso-comenzando a::after { position: absolute; right: -5px; z-index: 1; width: 9px; height: 9px; background: #ffffff; border-top: 1px solid #e4e1e7; border-right: 1px solid #e4e1e7; content: ""; transform: rotate(45deg); }
.progreso-comenzando a:last-child::after { display: none; }
.progreso-comenzando span { color: #b1abb5; font-size: 18px; font-weight: 800; }
.progreso-comenzando b { font-size: 10px; }
.progreso-comenzando a:hover,
.progreso-comenzando a.activo { color: #ffffff; background: linear-gradient(135deg, #2bb9cd, #6655b6); }
.progreso-comenzando a:hover span,
.progreso-comenzando a.activo span { color: #d7fbff; }
.progreso-comenzando a:hover::after,
.progreso-comenzando a.activo::after { background: #5b63b5; border-color: #5b63b5; }
.paso-comenzando { display: grid; min-height: 290px; grid-template-columns: 105px minmax(280px, 1fr) minmax(340px, 0.9fr); align-items: center; gap: 28px; overflow: hidden; margin-bottom: 16px; padding: 30px 34px 30px 0; background: #ffffff; border: 1px solid #e4e1e7; border-radius: 4px; box-shadow: 0 4px 14px rgba(37, 29, 57, 0.07); scroll-margin-top: 12px; }
.paso-comenzando:nth-of-type(even) { background: linear-gradient(120deg, #ffffff, #f8fafd); }
.numero-paso { display: grid; height: 100%; place-content: center; color: #ffffff; background: linear-gradient(180deg, #6750ad, #2aaec5); text-align: center; }
.numero-paso small { font-size: 8px; letter-spacing: 0.14em; }
.numero-paso b { display: block; margin-top: 3px; font-size: 32px; }
.texto-paso h2 { margin: 5px 0 11px; color: #443e4a; font-size: 24px; }
.texto-paso > p { margin: 0 0 13px; color: #7e7883; font-size: 10px; line-height: 1.65; }
.texto-paso ul,
.texto-paso ol { display: grid; gap: 7px; margin: 0; padding-left: 18px; color: #635d68; font-size: 9px; line-height: 1.4; }
.texto-paso li::marker { color: #e44c95; font-weight: 800; }
.vista-personajes { display: grid; height: 225px; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.vista-personajes article { position: relative; overflow: hidden; background: linear-gradient(150deg, #e5f6f8, #e6def2); border: 1px solid #d9d4e2; border-radius: 4px; }
.vista-personajes img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.vista-personajes span { position: absolute; right: 0; bottom: 0; left: 0; padding: 7px; color: #ffffff; background: rgba(42, 38, 67, 0.78); font-size: 8px; font-weight: 800; letter-spacing: 0.08em; text-align: center; }
.consejo-paso { padding: 10px 12px; color: #6d6672; background: #fff7dd; border-left: 3px solid #ebba32; font-size: 9px; line-height: 1.45; }
.teclado-ritmo { display: flex; min-height: 175px; align-items: center; justify-content: center; gap: 17px; padding: 24px; color: #ffffff; background: linear-gradient(145deg, #302d45, #4e4664); border-radius: 5px; box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.2); }
.teclado-ritmo > div { display: grid; place-items: center; gap: 5px; }
.teclado-ritmo > div > span { display: flex; gap: 5px; }
.teclado-ritmo kbd { display: grid; width: 38px; height: 35px; place-items: center; color: #383348; background: #ffffff; border: 0; border-bottom: 4px solid #bcb6c4; border-radius: 4px; font: 800 15px Arial, sans-serif; box-shadow: 0 3px 7px rgba(0, 0, 0, 0.25); }
.teclado-ritmo .tecla-espacio { width: 112px; color: #9a3574; font-size: 10px; }
.teclado-ritmo small { margin-top: 6px; color: #bbb5c8; font-size: 8px; }
.teclado-ritmo .mas-control { color: #71e5ec; font-size: 24px; font-weight: 800; }
.panel-servidor { overflow: hidden; color: #ffffff; background: #343146; border: 1px solid #666077; border-radius: 5px; box-shadow: 0 9px 20px rgba(30, 27, 48, 0.21); }
.panel-servidor header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: #252333; }
.panel-servidor header b { font-size: 9px; letter-spacing: 0.1em; }
.panel-servidor header span { color: #66e0b5; font-size: 7px; }
.panel-servidor button { display: grid; width: calc(100% - 20px); min-height: 51px; grid-template-columns: 16px 1fr 37px; grid-template-rows: auto auto; align-items: center; margin: 10px; padding: 8px 11px; color: #ffffff; background: #4a465d; border: 1px solid #656078; border-radius: 3px; text-align: left; cursor: pointer; }
.panel-servidor button:hover { background: #56516c; border-color: #5bd2df; }
.panel-servidor button i { grid-row: 1 / 3; width: 9px; height: 9px; background: #51d8aa; border-radius: 50%; box-shadow: 0 0 8px #51d8aa; }
.panel-servidor button b { font-size: 10px; }
.panel-servidor button small { color: #aaa5b5; font-size: 7px; }
.panel-servidor button em { grid-row: 1 / 3; grid-column: 3; color: #72e1e9; font-size: 9px; font-style: normal; font-weight: 800; text-align: right; }
.panel-servidor > div { display: flex; align-items: center; gap: 5px; padding: 2px 13px 12px; color: #aaa5b5; }
.panel-servidor > div span { width: 6px; height: 6px; margin-left: 8px; background: #51d8aa; border-radius: 50%; }
.panel-servidor > div span:nth-of-type(2) { background: #efbe46; }
.panel-servidor > div small { font-size: 7px; }
.sala-ejemplo { padding: 25px; color: #ffffff; background: linear-gradient(145deg, #5c3e8e, #276e99); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 5px; box-shadow: 0 9px 20px rgba(43, 34, 75, 0.22); }
.sala-ejemplo > span { color: #78ebed; font-size: 8px; font-weight: 800; letter-spacing: 0.12em; }
.sala-ejemplo h3 { margin: 5px 0 14px; font-size: 19px; }
.sala-ejemplo > div { display: grid; grid-template-columns: 80px 1fr; gap: 7px; padding: 12px; background: rgba(0, 0, 0, 0.18); }
.sala-ejemplo > div b { color: #d6d1e5; font-size: 8px; }
.sala-ejemplo > div small { font-size: 8px; }
.sala-ejemplo button { width: 100%; min-height: 37px; margin-top: 12px; color: #ffffff; background: #ed4d9a; border: 0; border-radius: 3px; font-size: 10px; font-weight: 800; }
.paso-final { background: linear-gradient(120deg, #ffffff 0%, #f7f8ff 70%, #effbfc 100%); }
.resultados-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.resultados-mini span { padding: 10px; background: #f4f1f7; border: 1px solid #e5e0e9; text-align: center; }
.resultados-mini b,
.resultados-mini small { display: block; }
.resultados-mini b { color: #dd478e; font-size: 10px; }
.resultados-mini small { margin-top: 3px; color: #9b95a0; font-size: 7px; }
.meta-comenzando { display: grid; min-height: 205px; place-items: center; padding: 25px; color: #ffffff; background: linear-gradient(145deg, #302c6a, #118ba5); border-radius: 5px; text-align: center; box-shadow: 0 10px 24px rgba(35, 40, 92, 0.24); }
.meta-comenzando > span { display: grid; width: 50px; height: 50px; place-items: center; color: #fff093; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%; font-size: 25px; }
.meta-comenzando h3 { margin: 9px 0 2px; font-size: 18px; }
.meta-comenzando p { margin: 0; color: #c7edf2; font-size: 8px; line-height: 1.45; }
.meta-comenzando a { display: inline-grid; min-height: 35px; place-items: center; padding: 0 17px; color: #ffffff; background: #ec4e9b; border-radius: 3px; font-size: 9px; font-weight: 800; }
.ayuda-comenzando { display: flex; min-height: 78px; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 22px; color: #5b5561; background: #ffffff; border: 1px solid #e4e1e7; border-left: 4px solid #27b9ce; border-radius: 4px; }
.ayuda-comenzando > div { display: flex; align-items: center; gap: 12px; }
.ayuda-comenzando > div > span { display: grid; width: 35px; height: 35px; place-items: center; color: #ffffff; background: #27b9ce; border-radius: 50%; font-size: 17px; font-weight: 800; }
.ayuda-comenzando b,
.ayuda-comenzando small { display: block; }
.ayuda-comenzando b { font-size: 11px; }
.ayuda-comenzando small { margin-top: 4px; color: #938d98; font-size: 8px; }
.ayuda-comenzando > a { color: #d9428a; font-size: 9px; font-weight: 800; }

@media (max-width: 950px) {
    .descarga-contenido { grid-template-columns: 1fr; }
    .descarga-menu { position: static; display: grid; grid-template-columns: repeat(3, 1fr); }
    .descarga-menu h2 { grid-column: 1 / -1; }
    .descarga-menu > a { border-right: 1px solid #eceaf0; border-bottom: 0; }
    .descarga-menu > a:hover,
    .descarga-menu > a.activo { box-shadow: inset 0 -4px #e84d99; }
    .descarga-menu > div { display: none; }
    .tarjeta-instalador { grid-template-columns: 75px minmax(0, 1fr); }
    .boton-descargar-juego { grid-column: 1 / -1; }
    .paso-comenzando { grid-template-columns: 85px minmax(240px, 1fr) minmax(290px, 0.9fr); gap: 21px; padding-right: 24px; }
}

@media (max-width: 720px) {
    .descarga-portada,
    .comenzando-portada { min-height: 315px; }
    .descarga-portada-texto,
    .comenzando-portada > div:first-child { width: 100%; padding: 33px 24px; }
    .descarga-portada-texto { padding-right: 130px; }
    .descarga-portada h1,
    .comenzando-portada h1 { font-size: 29px; }
    .descarga-visual { top: 100px; right: -65px; width: 180px; height: 200px; opacity: 0.55; transform: rotate(8deg) scale(0.8); }
    .descarga-menu > a { min-height: 54px; grid-template-columns: 1fr; padding: 9px 5px; text-align: center; }
    .descarga-menu > a > span,
    .descarga-menu > a small { display: none; }
    .descarga-caja > header { align-items: flex-start; }
    .descarga-caja > header > p { max-width: 95px; text-align: right; }
    .tarjeta-instalador { grid-template-columns: 60px minmax(0, 1fr); gap: 12px; margin: 15px 14px; padding: 14px; }
    .icono-instalador { width: 58px; height: 68px; }
    .datos-instalador dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
    .datos-instalador dl div { padding-right: 5px; }
    .aviso-instalador { margin-right: 14px; margin-left: 14px; }
    .seguridad-descarga { grid-template-columns: 1fr; }
    .seguridad-descarga article { border-right: 0; border-bottom: 1px solid #e9e6eb; }
    .pasos-instalacion { grid-template-columns: 1fr; }
    .pasos-instalacion li { min-height: 115px; border-right: 0; }
    .tabla-requisitos { overflow-x: auto; margin-right: 14px; margin-left: 14px; }
    .fila-requisito { min-width: 610px; }
    .nota-requisitos { margin-right: 14px; margin-left: 14px; }
    .comenzando-portada > div:first-child { padding-right: 118px; }
    .comenzando-portada > img { right: -47px; width: 190px; height: 245px; opacity: 0.72; }
    .notas-portada i:nth-child(2) { display: none; }
    .progreso-comenzando a { min-height: 57px; gap: 0; }
    .progreso-comenzando span { font-size: 13px; }
    .progreso-comenzando b { display: none; }
    .paso-comenzando { grid-template-columns: 53px minmax(0, 1fr); gap: 17px; min-height: auto; padding: 0; }
    .numero-paso { min-height: 100%; }
    .numero-paso b { font-size: 22px; }
    .texto-paso { padding: 24px 18px 24px 0; }
    .paso-comenzando > :nth-child(3) { grid-column: 1 / -1; margin: 0 14px 16px; }
    .vista-personajes { height: 240px; }
    .teclado-ritmo { min-height: 155px; }
    .resultados-mini { grid-template-columns: 1fr; }
    .ayuda-comenzando { align-items: flex-start; flex-direction: column; }
}

/* =========================================================
   CUENTA Y ACCESO AL JUEGO
========================================================= */
.imagen-iniciar {
    cursor: pointer;
}

.imagen-iniciar:focus-visible {
    outline: 4px solid #fff28b;
    outline-offset: 5px;
    border-radius: 18px;
}

.pagina-cuenta-body {
    min-height: 100vh;
    background: #16152b;
}

.cuenta-escenario {
    position: relative;
    display: grid;
    min-height: calc(100vh - 46px);
    place-content: center;
    overflow: hidden;
    padding: 55px 20px;
    background: linear-gradient(90deg, rgba(19, 15, 49, 0.82), rgba(45, 28, 82, 0.5), rgba(5, 77, 97, 0.64)), url("portadaRL.png") center / cover no-repeat;
}

.cuenta-escenario::before {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 18% 18%, rgba(236, 79, 157, 0.23), transparent 28%), radial-gradient(circle at 82% 75%, rgba(39, 210, 229, 0.22), transparent 30%);
    content: "";
}

.cuenta-marca {
    position: relative;
    z-index: 1;
    display: block;
    width: 340px;
    margin: 0 auto 18px;
}

.cuenta-marca img {
    width: 100%;
    max-height: 115px;
    object-fit: contain;
    filter: drop-shadow(0 7px 12px rgba(0, 0, 0, 0.45));
}

.cuenta-tarjeta {
    position: relative;
    z-index: 1;
    display: grid;
    width: min(940px, calc(100vw - 40px));
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.8fr);
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 7px;
    box-shadow: 0 28px 70px rgba(6, 5, 26, 0.52);
}

.cuenta-presentacion {
    position: relative;
    min-height: 525px;
    overflow: hidden;
    padding: 53px 49px;
    color: #ffffff;
    background: linear-gradient(145deg, #32216b 0%, #58378a 56%, #137f99 100%);
}

.cuenta-presentacion::after {
    position: absolute;
    right: -75px;
    bottom: -90px;
    width: 320px;
    height: 320px;
    background: rgba(68, 224, 234, 0.13);
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 50%;
    content: "";
}

.cuenta-presentacion > span {
    color: #68e6ec;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.17em;
}

.cuenta-presentacion h1 {
    max-width: 390px;
    margin: 8px 0 13px;
    font-size: 38px;
    line-height: 1.04;
}

.cuenta-presentacion > p {
    max-width: 390px;
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
    line-height: 1.6;
}

.cuenta-beneficios {
    position: relative;
    z-index: 2;
    display: grid;
    max-width: 315px;
    gap: 9px;
    margin-top: 29px;
}

.cuenta-beneficios article {
    display: grid;
    grid-template-columns: 34px 1fr;
    align-items: center;
    gap: 10px;
}

.cuenta-beneficios article > b {
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    color: #fff39c;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
}

.cuenta-beneficios strong,
.cuenta-beneficios small {
    display: block;
}

.cuenta-beneficios strong { font-size: 9px; }
.cuenta-beneficios small { margin-top: 3px; color: rgba(255, 255, 255, 0.55); font-size: 7px; }
.cuenta-presentacion > img { position: absolute; z-index: 1; right: -20px; bottom: -12px; width: 205px; height: 275px; object-fit: contain; object-position: bottom; filter: drop-shadow(0 12px 18px rgba(12, 8, 35, 0.42)); }
.cuenta-formulario-panel { min-width: 0; background: #ffffff; }
.cuenta-pestanas { display: grid; grid-template-columns: repeat(2, 1fr); border-bottom: 1px solid #e8e5eb; }
.cuenta-pestanas button { min-height: 57px; color: #918a96; background: #f8f7fa; border: 0; border-right: 1px solid #e5e2e8; border-bottom: 3px solid transparent; font-size: 10px; font-weight: 800; cursor: pointer; }
.cuenta-pestanas button:last-child { border-right: 0; }
.cuenta-pestanas button:hover,
.cuenta-pestanas button.activo { color: #373d75; background: #ffffff; border-bottom-color: #e84d99; }
.formulario-cuenta { display: none; padding: 37px 40px 30px; }
.formulario-cuenta.activo { display: block; }
.formulario-cuenta > span { color: #1db2c7; font-size: 8px; font-weight: 800; letter-spacing: 0.14em; }
.formulario-cuenta h2 { margin: 5px 0 7px; color: #453f4a; font-size: 23px; }
.formulario-cuenta > p { margin: 0 0 22px; color: #97919c; font-size: 9px; line-height: 1.45; }
.formulario-cuenta > label { display: grid; gap: 7px; margin-bottom: 14px; color: #5e5864; font-size: 9px; font-weight: 800; }
.formulario-cuenta input[type="text"],
.formulario-cuenta input[type="email"],
.formulario-cuenta input[type="password"] { width: 100%; height: 42px; padding: 0 12px; color: #4d4753; background: #faf9fb; border: 1px solid #ddd9e1; border-radius: 3px; outline: none; font: 10px Arial, sans-serif; }
.formulario-cuenta input:focus { background: #ffffff; border-color: #29b8cc; box-shadow: 0 0 0 3px rgba(41, 184, 204, 0.1); }
.opciones-cuenta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0 18px; color: #85808b; font-size: 8px; }
.opciones-cuenta label { display: flex; align-items: center; gap: 5px; }
.opciones-cuenta input,
.aceptar-cuenta input { accent-color: #e84d99; }
.opciones-cuenta a { color: #a33f7c; }
.aceptar-cuenta { display: flex !important; align-items: flex-start; grid-template-columns: none; gap: 7px !important; color: #85808b !important; font-weight: 400 !important; line-height: 1.4; }
.aceptar-cuenta input { margin: 1px 0 0; }
.boton-cuenta { display: flex; width: 100%; min-height: 45px; align-items: center; justify-content: center; gap: 18px; color: #ffffff; background: linear-gradient(135deg, #eb4e9c, #b93e91); border: 0; border-radius: 3px; box-shadow: 0 7px 16px rgba(190, 58, 137, 0.22); font-size: 10px; font-weight: 800; cursor: pointer; }
.boton-cuenta:hover { filter: brightness(1.08); transform: translateY(-1px); }
.boton-cuenta span { font-size: 17px; }
.aviso-cuenta-demo { display: block; margin-top: 11px; color: #aaa4ae; font-size: 7px; line-height: 1.4; text-align: center; }
.mensaje-cuenta { min-height: 19px; margin: -20px 40px 17px; color: #2399ac; font-size: 9px; font-weight: 800; text-align: center; }
.mensaje-cuenta.error { color: #d74782; }
.cuenta-pie-ayuda { position: relative; z-index: 1; display: flex; justify-content: space-between; width: min(940px, calc(100vw - 40px)); margin: 14px auto 0; color: rgba(255, 255, 255, 0.66); font-size: 8px; }
.cuenta-pie-ayuda span::before { margin-right: 6px; color: #58dfbc; content: "●"; }
.cuenta-pie-ayuda a { color: #8cecf1; }

@media (max-width: 760px) {
    .cuenta-escenario { padding: 32px 12px; }
    .cuenta-marca { width: 260px; }
    .cuenta-tarjeta { width: min(500px, calc(100vw - 24px)); grid-template-columns: 1fr; }
    .cuenta-presentacion { min-height: 275px; padding: 32px 27px; }
    .cuenta-presentacion h1 { max-width: 270px; font-size: 29px; }
    .cuenta-presentacion > p { max-width: 70%; }
    .cuenta-beneficios { display: none; }
    .cuenta-presentacion > img { right: -19px; width: 155px; height: 220px; opacity: 0.82; }
    .formulario-cuenta { padding: 29px 25px 27px; }
    .mensaje-cuenta { margin-right: 25px; margin-left: 25px; }
    .cuenta-pie-ayuda { width: min(500px, calc(100vw - 24px)); }
}

/* Barra global adaptada a pantallas pequeñas. */
@media (max-width: 650px) {
    .top {
        height: auto;
        padding: 0;
    }

    .top .row {
        max-width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .top nav {
        justify-content: center;
        gap: 0;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }

    .top nav::-webkit-scrollbar {
        display: none;
    }

    .top nav:last-child {
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    .top a {
        min-height: 38px;
        padding: 0 12px;
        flex: 0 0 auto;
    }
}

/* Selector de idioma de la barra superior. */
.top .idioma-control {
    position: relative;
    display: flex;
    align-items: stretch;
    z-index: 100;
}

.top .idioma-actual {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 100%;
    padding: 0 17px;
    border: 0;
    border-right: 1px solid rgba(255, 255, 255, .08);
    background: transparent;
    color: #d7d7d7;
    font: 700 12px Arial, Helvetica, sans-serif;
    cursor: pointer;
}

.top .idioma-actual:hover,
.top .idioma-actual:focus-visible {
    color: #fff;
    background: rgba(42, 184, 231, .16);
}

.top .idioma-opciones {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 125px;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 0 0 7px 7px;
    background: #15151a;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .4);
}

.top .idioma-opciones[hidden] { display: none; }

.top .idioma-opciones button {
    display: block;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: #e7e7e7;
    font: 700 12px Arial, Helvetica, sans-serif;
    text-align: left;
    cursor: pointer;
}

.top .idioma-opciones button:hover,
.top .idioma-opciones button[aria-current="true"] {
    background: #186482;
    color: #fff;
}

@media (max-width: 650px) {
    .top .idioma-actual { min-height: 38px; padding: 0 12px; }
    .top nav:last-child { overflow: visible; }
}

/* =========================================================
   IDENTIDAD DEL MENÚ PRINCIPAL — RITMO LATINO
   Tipografía de baile y paleta neón tropical por sección.
========================================================= */
.nav-grid > .menu-desplegable > .menu-enlace {
    position: relative;
    overflow: hidden;
    transition: background 180ms ease, box-shadow 180ms ease;
}

.nav-grid > .menu-desplegable > .menu-enlace::after {
    position: absolute;
    right: 22%;
    bottom: 0;
    left: 22%;
    height: 3px;
    background: var(--color-menu, #35d8ef);
    border-radius: 3px 3px 0 0;
    box-shadow: 0 0 9px var(--color-menu, #35d8ef);
    content: "";
    transform: scaleX(0.35);
    opacity: 0.72;
    transition: transform 180ms ease, opacity 180ms ease;
}

.nav-grid > .menu-desplegable > .menu-enlace b {
    color: var(--color-menu, #35d8ef);
    font-family: "Trebuchet MS", "Arial Rounded MT Bold", Arial, sans-serif;
    font-size: 16px;
    font-style: italic;
    font-weight: 900;
    letter-spacing: 0.8px;
    line-height: 1;
    text-transform: uppercase;
    text-shadow: 0 0 10px color-mix(in srgb, var(--color-menu, #35d8ef) 45%, transparent);
    transform: skewX(-4deg);
    transition: color 180ms ease, text-shadow 180ms ease, transform 180ms ease;
}

.nav-grid > .menu-desplegable > .menu-enlace small {
    color: #c7c4cc;
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1px;
}

.nav-grid > .menu-desplegable:nth-child(1) { --color-menu: #ff4f9a; }
.nav-grid > .menu-desplegable:nth-child(2) { --color-menu: #ffbf3f; }
.nav-grid > .menu-desplegable:nth-child(3) { --color-menu: #37e4be; }
.nav-grid > .menu-desplegable:nth-child(4) { --color-menu: #45d9ff; }
.nav-grid > .menu-desplegable:nth-child(5) { --color-menu: #b88cff; }
.nav-grid > .menu-desplegable:nth-child(6) { --color-menu: #ff765e; }
.nav-grid > .menu-desplegable:nth-child(7) { --color-menu: #76a8ff; }

.nav-grid > .menu-desplegable:hover > .menu-enlace,
.nav-grid > .menu-desplegable.abierto > .menu-enlace,
.nav-grid > .menu-desplegable.menu-activo > .menu-enlace {
    background: linear-gradient(145deg, color-mix(in srgb, var(--color-menu) 34%, #15121e), #15121e 72%);
    box-shadow: inset 0 0 22px color-mix(in srgb, var(--color-menu) 22%, transparent);
}

.nav-grid > .menu-desplegable:hover > .menu-enlace::after,
.nav-grid > .menu-desplegable.abierto > .menu-enlace::after,
.nav-grid > .menu-desplegable.menu-activo > .menu-enlace::after {
    transform: scaleX(1);
    opacity: 1;
}

.nav-grid > .menu-desplegable:hover > .menu-enlace b,
.nav-grid > .menu-desplegable.abierto > .menu-enlace b,
.nav-grid > .menu-desplegable.menu-activo > .menu-enlace b {
    color: #ffffff;
    text-shadow: 0 0 6px var(--color-menu), 0 0 15px var(--color-menu);
    transform: skewX(-4deg) translateY(-1px);
}

.nav-grid > .menu-desplegable:hover > .menu-enlace small,
.nav-grid > .menu-desplegable.abierto > .menu-enlace small,
.nav-grid > .menu-desplegable.menu-activo > .menu-enlace small {
    color: #ffffff;
}

@media (max-width: 650px) {
    .nav-grid > .menu-desplegable > .menu-enlace b {
        font-size: 12px;
        letter-spacing: 0.35px;
    }

    .nav-grid > .menu-desplegable > .menu-enlace small {
        font-size: 7px;
        letter-spacing: 0.35px;
    }

    .nav-grid > .menu-desplegable > .menu-enlace::after {
        right: 12%;
        left: 12%;
    }
}

/* Acceso al juego: identidad visual serena y legible. */
.pagina-cuenta-body {
    background: #101b38;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
}

.cuenta-escenario {
    background: linear-gradient(90deg, rgba(9, 19, 49, 0.72), rgba(19, 28, 62, 0.55)), url("portadaRL.png") center / cover no-repeat;
}

.cuenta-escenario::before {
    background: rgba(8, 15, 35, 0.08);
}

.cuenta-marca {
    width: 600px;
    max-width: calc(100vw - 40px);
    margin-bottom: 18px;
}

.cuenta-marca img {
    max-height: 230px;
    filter: drop-shadow(0 7px 10px rgba(0, 0, 0, 0.42));
}

.cuenta-tarjeta {
    width: min(1040px, calc(100vw - 40px));
    grid-template-columns: minmax(0, 1.2fr) minmax(360px, 0.8fr);
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 14px;
    box-shadow: 0 22px 55px rgba(5, 10, 30, 0.44);
}

.cuenta-presentacion {
    min-height: 570px;
    padding-right: 35px;
    background: linear-gradient(145deg, #172a56 0%, #284371 65%, #5d345f 100%);
}

.cuenta-video-fondo {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.cuenta-presentacion::before {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(90deg, rgba(8, 17, 48, 0.87), rgba(13, 24, 59, 0.76) 62%, rgba(20, 20, 61, 0.62));
    content: "";
    pointer-events: none;
}

.cuenta-presentacion::after {
    z-index: 1;
    background: rgba(255, 255, 255, 0.025);
    border-color: rgba(255, 255, 255, 0.08);
    pointer-events: none;
}

.cuenta-presentacion > span {
    color: #f2b9d5;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
}

.cuenta-presentacion > .cuenta-temporada {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px 10px;
    margin-bottom: 16px;
}

.cuenta-temporada-logo {
    display: block;
    width: min(360px, 100%);
    height: 70px;
    object-fit: contain;
    filter: drop-shadow(0 5px 7px rgba(6, 9, 40, 0.3));
}

.cuenta-temporada-edicion {
    display: inline-block;
    padding: 5px 9px 4px;
    color: #26163d;
    background: linear-gradient(135deg, #ffe88a, #ffaf57);
    border-radius: 5px;
    box-shadow: 0 4px 10px rgba(14, 11, 44, 0.3);
    font-family: "Segoe UI", Tahoma, sans-serif;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-shadow: none;
    white-space: nowrap;
}

.cuenta-presentacion h1 {
    position: relative;
    z-index: 2;
    max-width: 380px;
    font-size: clamp(38px, 4vw, 46px);
    font-weight: 900;
    line-height: 1.08;
    text-shadow: 0 3px 12px rgba(3, 8, 27, 0.65);
}

.cuenta-presentacion > p {
    position: relative;
    z-index: 2;
    max-width: 305px;
    color: rgba(255, 255, 255, 0.91);
    font-size: 14px;
}

.cuenta-presentacion > img {
    right: -12px;
    bottom: -8px;
    width: 295px;
    height: 410px;
    filter: drop-shadow(0 12px 14px rgba(12, 8, 35, 0.25));
}

.cuenta-beneficios article > b {
    color: #f2bdd8;
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.12);
}

.cuenta-beneficios strong {
    color: #ffffff;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
    text-shadow: 0 2px 7px rgba(3, 8, 27, 0.6);
}

.cuenta-beneficios small {
    color: rgba(255, 255, 255, 0.86);
    font-size: 12px;
}

.cuenta-beneficios {
    max-width: 330px;
    gap: 10px;
}

.cuenta-beneficios article {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    padding: 9px 12px;
    background: rgba(6, 15, 43, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    backdrop-filter: blur(4px);
}

.cuenta-pestanas button {
    color: #697180;
    background: #f4f5f7;
    font: 600 14px "Segoe UI", Tahoma, Arial, sans-serif;
}

.cuenta-pestanas button:hover,
.cuenta-pestanas button.activo {
    color: #203b68;
    border-bottom-color: #e75b9c;
}

.formulario-cuenta > span {
    color: #a34175;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
}

.formulario-cuenta h2 {
    color: #1f3154;
    font-size: 25px;
    font-weight: 600;
}

.formulario-cuenta > p,
.formulario-cuenta > label {
    font-size: 13px;
}

.formulario-cuenta > p {
    color: #747b85;
    line-height: 1.5;
}

.formulario-cuenta > label {
    color: #4d5561;
    font-weight: 600;
}

.formulario-cuenta input[type="text"],
.formulario-cuenta input[type="email"],
.formulario-cuenta input[type="password"] {
    height: 44px;
    color: #3f4752;
    background: #f8f9fa;
    border-color: #d9dde2;
    border-radius: 4px;
    font: 14px "Segoe UI", Tahoma, Arial, sans-serif;
}

.formulario-cuenta input:focus {
    border-color: #b76392;
    box-shadow: 0 0 0 3px rgba(199, 81, 140, 0.12);
}

.opciones-cuenta {
    color: #717985;
    font-size: 12px;
}

.opciones-cuenta a {
    color: #9c3f73;
}

.opciones-cuenta input,
.aceptar-cuenta input {
    accent-color: #c84e89;
}

.boton-cuenta {
    min-height: 47px;
    background: #c84683;
    border-radius: 4px;
    box-shadow: 0 5px 12px rgba(119, 36, 77, 0.2);
    font: 600 13px "Segoe UI", Tahoma, Arial, sans-serif;
}

.boton-cuenta:hover {
    background: #ac376f;
    filter: none;
    transform: none;
}

.aviso-cuenta-demo {
    color: #858c96;
    font-size: 11px;
}

.mensaje-cuenta {
    color: #2c6686;
    font-size: 12px;
    font-weight: 600;
}

.cuenta-pie-ayuda {
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
}

.cuenta-pie-ayuda span::before {
    color: #f2b9d5;
}

.cuenta-pie-ayuda a {
    color: #f5c6dc;
}

@media (max-width: 760px) {
    .cuenta-marca {
        width: 420px;
    }

    .cuenta-tarjeta {
        width: min(500px, calc(100vw - 24px));
        grid-template-columns: 1fr;
    }

    .cuenta-presentacion {
        min-height: 330px;
        padding: 32px 27px;
    }

    .cuenta-presentacion > img {
        right: -7px;
        width: 205px;
        height: 285px;
    }

    .cuenta-presentacion h1 {
        font-size: 29px;
    }

    .cuenta-presentacion > p {
        max-width: 56%;
    }
}

@media (max-width: 480px) {
    .cuenta-temporada-logo { width: min(280px, 100%); height: 56px; }

    .cuenta-presentacion {
        min-height: 510px;
    }

    .cuenta-presentacion > p {
        max-width: 100%;
    }

    .cuenta-presentacion > img {
        right: 0;
        width: 190px;
        height: 250px;
    }

    .cuenta-pie-ayuda {
        gap: 12px;
        flex-wrap: wrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cuenta-video-fondo { display: none; }
}