/* =========================================================
   HEADER PRINCIPAL - CASINO RASH
   ========================================================= */

.site-header {
    width: 100%;
    height: 84px;

    position: relative;
    z-index: 50;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 42px;

    background:
        linear-gradient(
            180deg,
            rgba(3, 5, 15, 0.98),
            rgba(5, 7, 19, 0.96)
        );

    border:
        1px solid
        rgba(152, 134, 214, 0.25);

    border-top-left-radius: 0;
    border-top-right-radius: 0;

    box-shadow:
        0 10px 28px
        rgba(0, 0, 0, 0.30);
}

.site-header::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(136, 75, 255, 0.22),
            rgba(136, 75, 255, 0.45),
            rgba(136, 75, 255, 0.22),
            transparent
        );
}


/* LOGO */

.brand-rash {
    min-width: 190px;

    display: flex;
    align-items: center;

    text-decoration: none;
}

.brand-rash-inner {
    position: relative;

    display: inline-flex;
    flex-direction: column;
    align-items: center;

    line-height: 0.78;
}

.brand-rash-crown {
    position: absolute;

    top: -11px;
    left: 50%;

    transform: translateX(-50%);

    color: #f7d25e;

    font-size: 16px;

    text-shadow:
        0 0 8px
        rgba(255, 205, 73, 0.36);
}

.brand-rash-small {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 16px;
    font-weight: 800;

    letter-spacing: 1.5px;

    color: #f6d263;

    text-shadow:
        0 1px 0 #5c3400,
        0 0 8px rgba(242, 180, 40, 0.24);
}

.brand-rash-big {
    margin-top: 7px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 42px;
    font-weight: 900;

    letter-spacing: 0.5px;

    color: #f4c74e;

    text-shadow:
        0 1px 0 #7d4700,
        0 2px 0 #4e2a00,
        0 0 12px rgba(239, 175, 24, 0.28);
}


/* NAVEGACIÓN */

.top-nav {
    height: 100%;

    display: flex;
    align-items: center;

    gap: 30px;

    margin-right: auto;
    margin-left: 18px;
}

.top-nav-link {
    height: 100%;

    position: relative;

    display: inline-flex;
    align-items: center;

    gap: 10px;

    color: #c9cad4;

    font-size: 15px;
    font-weight: 700;

    text-decoration: none;

    transition:
        color 0.18s ease,
        text-shadow 0.18s ease;
}

.top-nav-link svg {
    width: 22px;
    height: 22px;

    stroke: currentColor;

    opacity: 0.92;
}

.top-nav-link:hover {
    color: #ffffff;

    text-shadow:
        0 0 10px
        rgba(191, 106, 255, 0.24);
}

.top-nav-link.active {
    color: #ffffff;
}

.top-nav-link.active svg {
    color: #d58cff;
}

.top-nav-link.active::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 2px;

    border-radius: 10px 10px 0 0;

    background:
        linear-gradient(
            90deg,
            #7f3dff,
            #e66cff
        );

    box-shadow:
        0 0 10px
        rgba(181, 82, 255, 0.62);
}


/* LADO DERECHO */

.header-account {
    display: flex;
    align-items: center;

    gap: 14px;
}

.header-balance {
    height: 48px;

    display: flex;
    align-items: center;

    padding: 0 8px 0 12px;

    border:
        1px solid
        rgba(255, 198, 61, 0.20);

    border-radius: 13px;

    background:
        linear-gradient(
            180deg,
            rgba(16, 18, 31, 0.95),
            rgba(7, 9, 19, 0.96)
        );

    box-shadow:
        inset 0 0 18px
        rgba(255, 184, 32, 0.025);

    gap: 10px;
}

.header-coin {
    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    flex: 0 0 30px;

    border-radius: 50%;

    color: #fff2a0;

    font-size: 16px;
    font-weight: 900;

    background:
        radial-gradient(
            circle at 34% 30%,
            #fff3a4 0%,
            #f9bd22 26%,
            #d78400 67%,
            #6f3700 100%
        );

    border:
        2px solid
        #ffd34f;

    box-shadow:
        0 0 9px
        rgba(245, 183, 26, 0.32);
}

.header-balance-value {
    min-width: 60px;

    color: #ffffff;

    font-size: 18px;
    font-weight: 800;

    letter-spacing: 0.3px;
}

.header-add {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    flex: 0 0 38px;

    border-radius: 50%;

    border:
        2px solid
        #57e933;

    color: #c7ff9c;

    background:
        radial-gradient(
            circle at 35% 30%,
            #143e13,
            #082809
        );

    font-size: 29px;
    line-height: 1;

    text-decoration: none;

    box-shadow:
        0 0 10px
        rgba(64, 225, 52, 0.20);

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
}

.header-add:hover {
    transform: scale(1.07);

    box-shadow:
        0 0 15px
        rgba(76, 242, 55, 0.44);
}

.header-user {
    min-width: 156px;
    height: 48px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 0 12px;

    border:
        1px solid
        rgba(255, 255, 255, 0.09);

    border-radius: 13px;

    background:
        linear-gradient(
            180deg,
            rgba(12, 14, 26, 0.97),
            rgba(6, 8, 17, 0.97)
        );
}

.header-avatar {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    flex: 0 0 34px;

    border-radius: 50%;

    color: #2a1700;

    font-size: 15px;
    font-weight: 900;

    background:
        radial-gradient(
            circle at 35% 30%,
            #ffe198,
            #c88113 68%,
            #714000
        );

    border:
        1px solid
        #eeb33b;
}

.header-user-text {
    min-width: 0;

    display: flex;
    flex-direction: column;

    line-height: 1.05;
}

.header-user-name {
    max-width: 84px;

    overflow: hidden;

    color: #ffffff;

    font-size: 13px;
    font-weight: 800;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-user-vip {
    margin-top: 4px;

    color: #f1c949;

    font-size: 11px;
    font-weight: 800;
}


/* =========================================================
   RESPONSIVE HEADER
   ========================================================= */

@media (max-width: 1000px) {

    .site-header {
        height: 70px;

        padding: 0 16px;
    }

    .brand-rash {
        min-width: auto;
    }

    .brand-rash-small {
        font-size: 12px;
    }

    .brand-rash-big {
        font-size: 30px;
    }

    .top-nav {
        gap: 18px;

        margin-left: 24px;
    }

    .top-nav-link {
        font-size: 13px;
    }

    .top-nav-link svg {
        width: 19px;
        height: 19px;
    }

    .header-user {
        display: none;
    }

    .header-balance {
        height: 44px;
    }
}

@media (max-width: 720px) {

    .site-header {
        height: 64px;

        padding: 0 12px;
    }

    .brand-rash-big {
        font-size: 26px;
    }

    .brand-rash-small,
    .brand-rash-crown {
        display: none;
    }

    .top-nav {
        gap: 15px;

        margin-left: 16px;
    }

    .top-nav-link {
        font-size: 0;

        gap: 0;
    }

    .top-nav-link svg {
        width: 22px;
        height: 22px;
    }

    .header-balance-value {
        display: none;
    }

    .header-balance {
        padding: 0 6px;
    }

    .header-add {
        width: 34px;
        height: 34px;

        flex-basis: 34px;

        font-size: 25px;
    }
}

@media (max-width: 440px) {

    .site-header {
        padding: 0 9px;
    }

    .brand-rash-big {
        font-size: 22px;
    }

    .top-nav {
        gap: 11px;

        margin-left: 11px;
    }

    .header-account {
        gap: 7px;
    }
}


/*
|--------------------------------------------------------------------------
| CASINO RASH - MARCOS DE JUEGOS
|--------------------------------------------------------------------------
| Ajuste:
| - Zeus mantiene el mismo tamaño que los demás.
| - Se refuerza el marco violeta de Zeus, especialmente en esquinas.
| - No se modifica ninguna imagen.
|--------------------------------------------------------------------------
*/

:root {
    --game-card-width: 180px;
    --game-card-height: 151px;
    --games-gap: 18px;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
    font-family: Arial, Helvetica, sans-serif;
}

html {
    background: #03040a;
}

body.casino-rash-home {
    min-height: 100vh;
    background-color: #03040a;
    background-image:
        linear-gradient(
            rgba(3, 4, 10, 0.42),
            rgba(3, 4, 10, 0.57)
        ),
        url('../img/fondo-casino-rash.webp');
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    background-attachment: fixed;
    color: #fff;
}

.home-stage {
    min-height: calc(100vh - 84px);
    width: 100%;

    padding: 28px 32px 60px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: flex-start;
}

.games-block {
    width: min(1200px, 100%);
    margin-top: 24px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.games-block-header {
    width: 100%;
    margin-bottom: 16px;
}

.games-block-header h2 {
    margin: 0;
    font-size: 34px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0.4px;
    color: #f3c54c;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65);
}

.games-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(6, var(--game-card-width));
    column-gap: var(--games-gap);
    row-gap: var(--games-gap);
    align-items: center;
    justify-content: start;
}

.game-card {
    width: var(--game-card-width);
    height: var(--game-card-height);
    display: block;
    position: relative;
    padding: 0;
    margin: 0;
    overflow: hidden;
    border: 2px solid rgba(142, 76, 255, 0.78);
    border-radius: 16px;
    background: #080b18;
    line-height: 0;
    transform: scale(1);
    transform-origin: center center;
    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        filter 0.18s ease,
        background 0.18s ease;
}

.game-card img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: fill;
    border: 0;
    outline: 0;
    border-radius: 14px;
    padding: 0;
    margin: 0;
    background: transparent;
    box-shadow: none;
}

/* ZEUS - marco violeta reforzado */
.game-card:nth-child(1) {
    border-color: rgba(188, 104, 255, 1);
    background:
        radial-gradient(circle at 50% 50%, rgba(128, 63, 255, 0.22), rgba(80, 26, 180, 0.72));
    box-shadow:
        inset 0 0 0 1px rgba(233, 190, 255, 0.42),
        0 0 0 1px rgba(129, 54, 255, 0.28);
}

/* Le dejo un pelín más de marco visible a Zeus */
.game-card:nth-child(1) img {
    border-radius: 12px;
}

/* PAYASO */
.game-card:nth-child(2) {
    border-color: rgba(255, 89, 53, 0.92);
}

/* EGIPTO */
.game-card:nth-child(3) {
    border-color: rgba(221, 166, 56, 0.92);
}

/* FRUTAS */
.game-card:nth-child(4) {
    border-color: rgba(50, 174, 94, 0.92);
}

/* DIAMANTES */
.game-card:nth-child(5) {
    border-color: rgba(67, 137, 255, 0.92);
}

/* FORTUNA */
.game-card:nth-child(6) {
    border-color: rgba(197, 57, 145, 0.92);
}

.game-card:hover {
    transform: scale(1.035);
    z-index: 10;
}

.game-card:nth-child(1):hover {
    border-color: #d387ff;
    background:
        radial-gradient(circle at 50% 50%, rgba(142, 76, 255, 0.28), rgba(88, 31, 194, 0.82));
    box-shadow:
        inset 0 0 0 1px rgba(242, 210, 255, 0.50),
        0 0 8px rgba(188, 105, 255, 0.90),
        0 0 20px rgba(126, 48, 255, 0.68),
        0 0 34px rgba(91, 31, 185, 0.46);
}

.game-card:nth-child(2):hover {
    border-color: #ff7c45;
    box-shadow:
        0 0 8px rgba(255, 110, 63, 0.85),
        0 0 20px rgba(235, 69, 30, 0.58),
        0 0 34px rgba(157, 37, 17, 0.40);
}

.game-card:nth-child(3):hover {
    border-color: #ffd365;
    box-shadow:
        0 0 8px rgba(255, 213, 91, 0.85),
        0 0 20px rgba(216, 157, 44, 0.58),
        0 0 34px rgba(137, 88, 18, 0.40);
}

.game-card:nth-child(4):hover {
    border-color: #68df89;
    box-shadow:
        0 0 8px rgba(94, 224, 133, 0.82),
        0 0 20px rgba(43, 171, 86, 0.56),
        0 0 34px rgba(24, 107, 52, 0.40);
}

.game-card:nth-child(5):hover {
    border-color: #76bcff;
    box-shadow:
        0 0 8px rgba(103, 187, 255, 0.85),
        0 0 20px rgba(57, 126, 255, 0.58),
        0 0 34px rgba(27, 77, 180, 0.40);
}

.game-card:nth-child(6):hover {
    border-color: #f06dc9;
    box-shadow:
        0 0 8px rgba(239, 102, 198, 0.85),
        0 0 20px rgba(189, 55, 147, 0.58),
        0 0 34px rgba(113, 29, 88, 0.40);
}

@media (max-width: 1250px) and (min-width: 901px) {
    :root {
        --game-card-width: 155px;
        --game-card-height: 130px;
        --games-gap: 14px;
    }

    .home-stage {
        padding-left: 22px;
        padding-right: 22px;
    }

    .games-block {
        width: 100%;
    }
}

@media (max-width: 900px) {
    :root {
        --game-card-width: 145px;
        --game-card-height: 122px;
        --games-gap: 14px;
    }

    body.casino-rash-home {
        background-attachment: scroll;
        background-position: center top;
        background-size: cover;
    }

    .home-stage {
        padding: 24px 14px 40px;
    }

    .games-block {
        width: 100%;
        margin-top: 18px;
    }

    .games-block-header h2 {
        font-size: 24px;
    }

    .games-grid {
        grid-template-columns: repeat(2, var(--game-card-width));
        justify-content: center;
    }
}

@media (max-width: 340px) {
    :root {
        --game-card-width: 132px;
        --game-card-height: 111px;
        --games-gap: 10px;
    }
}



/* =========================================================
   LOGO CASINO RASH - IMAGEN
   ========================================================= */

.brand-rash {
    min-width: 190px;
    height: 100%;

    display: flex;
    align-items: center;

    text-decoration: none;

    overflow: visible;
}

.brand-rash-logo {
    display: block;

    width: 150px;
    height: 66px;

    object-fit: contain;
    object-position: center;

    border: 0;
    outline: 0;

    filter:
        drop-shadow(0 0 5px rgba(247, 193, 55, 0.20));

    transition:
        transform 0.18s ease,
        filter 0.18s ease;
}

.brand-rash:hover .brand-rash-logo {
    transform: scale(1.035);

    filter:
        drop-shadow(0 0 3px rgba(255, 245, 174, 0.95))
        drop-shadow(0 0 7px rgba(255, 214, 72, 0.85))
        drop-shadow(0 0 14px rgba(255, 180, 24, 0.62))
        drop-shadow(0 0 24px rgba(213, 126, 0, 0.34));
}

@media (max-width: 1000px) {
    .brand-rash-logo {
        width: 128px;
        height: 58px;
    }
}

@media (max-width: 720px) {
    .brand-rash-logo {
        width: 104px;
        height: 50px;
    }
}

@media (max-width: 440px) {
    .brand-rash-logo {
        width: 92px;
        height: 46px;
    }
}



/* =========================================================
   HOVER LIMPIO - JUEGOS
   ========================================================= */

.game-card {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

.game-card img {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* El brillo queda alrededor del marco, sin deformar la imagen. */
.game-card:nth-child(1):hover {
    box-shadow:
        0 0 0 1px rgba(205, 139, 255, 0.34),
        0 0 10px rgba(178, 88, 255, 0.58),
        0 0 22px rgba(118, 48, 255, 0.36);
}

.game-card:nth-child(2):hover {
    box-shadow:
        0 0 0 1px rgba(255, 140, 89, 0.30),
        0 0 10px rgba(255, 100, 55, 0.52),
        0 0 22px rgba(205, 57, 28, 0.30);
}

.game-card:nth-child(3):hover {
    box-shadow:
        0 0 0 1px rgba(255, 220, 116, 0.30),
        0 0 10px rgba(235, 181, 63, 0.52),
        0 0 22px rgba(164, 105, 22, 0.30);
}

.game-card:nth-child(4):hover {
    box-shadow:
        0 0 0 1px rgba(116, 235, 150, 0.28),
        0 0 10px rgba(65, 188, 102, 0.48),
        0 0 22px rgba(28, 120, 58, 0.28);
}

.game-card:nth-child(5):hover {
    box-shadow:
        0 0 0 1px rgba(132, 198, 255, 0.28),
        0 0 10px rgba(72, 148, 255, 0.50),
        0 0 22px rgba(35, 88, 196, 0.28);
}

.game-card:nth-child(6):hover {
    box-shadow:
        0 0 0 1px rgba(246, 132, 211, 0.28),
        0 0 10px rgba(214, 76, 166, 0.48),
        0 0 22px rgba(127, 35, 98, 0.28);
}



/* =========================================================
   BANNER PRINCIPAL DE ZEUS
   =========================================================
   La imagen está dentro de un contenedor real de la web:
   redondeado, con borde sutil y recorte interno.
   ========================================================= */

.hero-zeus-wrap {
    width: min(1200px, 100%);
    margin: 24px auto 0;
}

.hero-zeus-card {
    width: 100%;
    aspect-ratio: 2171 / 724;

    display: block;
    position: relative;

    overflow: hidden;

    border: 1px solid rgba(112, 66, 191, 0.34);
    border-radius: 19px;

    background: #080b18;

    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.36),
        inset 0 0 0 1px rgba(255, 255, 255, 0.015);

    line-height: 0;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.hero-zeus-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    border: 0;
    outline: 0;

    margin: 0;
    padding: 0;
}

.hero-zeus-card:hover {
    transform: scale(1.008);

    border-color: rgba(151, 83, 234, 0.58);

    box-shadow:
        0 0 0 1px rgba(149, 80, 236, 0.12),
        0 0 18px rgba(106, 49, 190, 0.20),
        0 16px 38px rgba(0, 0, 0, 0.42);
}

@media (max-width: 900px) {
    .hero-zeus-wrap {
        width: 100%;
        margin-top: 18px;
    }

    .hero-zeus-card {
        border-radius: 15px;
    }
}

@media (max-width: 520px) {
    .hero-zeus-card {
        /*
         * En celular mantenemos el banner horizontal,
         * pero le damos un poco más de altura visual.
         */
        aspect-ratio: 2.35 / 1;
    }

    .hero-zeus-image {
        object-position: 40% center;
    }
}


/* =========================================================
   CORRECCIÓN DE POSICIÓN DEL BANNER
   ========================================================= */

.hero-zeus-wrap {
    width: min(1200px, 100%);
    margin: 0 auto;
    flex: 0 0 auto;
}

.games-block {
    width: min(1200px, 100%);
    margin: 18px auto 0;
    flex: 0 0 auto;
}

@media (max-width: 900px) {
    .home-stage {
        min-height: calc(100vh - 70px);
        padding: 18px 14px 40px;
    }

    .hero-zeus-wrap {
        width: 100%;
        margin: 0 auto;
    }

    .games-block {
        width: 100%;
        margin: 16px auto 0;
    }
}


/* =========================================================
   CARRUSEL DE BANNERS
   ========================================================= */

.hero-carousel-wrap {
    width: min(1200px, 100%);
    margin: 0 auto;
    flex: 0 0 auto;
}

.hero-carousel {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 1;
    overflow: hidden;
    border-radius: 18px;
    background: #050711;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.36);
    isolation: isolate;
}

.hero-slides {
    position: absolute;
    inset: 0;
}

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(1.018);
    transition:
        opacity 0.75s ease,
        transform 1.15s ease,
        visibility 0s linear 0.75s;
}

.hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1);
    transition:
        opacity 0.75s ease,
        transform 5.5s linear,
        visibility 0s;
}

.hero-slide-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border: 0;
    user-select: none;
    -webkit-user-drag: none;
}

.hero-slide-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(2, 3, 10, 0.10) 72%,
            rgba(2, 3, 10, 0.34) 100%
        );
}

.hero-play-now {
    position: absolute;
    left: 50%;
    bottom: 25px;
    transform: translateX(-50%);
    z-index: 4;

    min-width: 190px;
    height: 48px;
    padding: 0 28px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(213, 146, 255, 0.82);
    border-radius: 9px;

    color: #fff;
    text-decoration: none;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: 0.45px;

    background:
        linear-gradient(
            180deg,
            #8f45e9 0%,
            #6925c8 52%,
            #4c159a 100%
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.26),
        0 5px 18px rgba(68, 18, 141, 0.46),
        0 0 15px rgba(151, 72, 235, 0.18);

    transition:
        transform 0.18s ease,
        filter 0.18s ease,
        box-shadow 0.18s ease;
}

.hero-play-now:hover {
    transform: translateX(-50%) scale(1.055);
    filter: brightness(1.12);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.32),
        0 7px 21px rgba(68, 18, 141, 0.54),
        0 0 22px rgba(176, 91, 255, 0.38);
}

.hero-carousel-dots {
    position: absolute;
    z-index: 5;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.hero-carousel-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.62);
    background: rgba(7, 9, 22, 0.50);
    cursor: pointer;
    transition:
        transform 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.hero-carousel-dot:hover {
    transform: scale(1.2);
    border-color: #fff;
}

.hero-carousel-dot.is-active {
    background: #fff;
    border-color: #fff;
    box-shadow: 0 0 9px rgba(191, 107, 255, 0.70);
}

/* Anula el antiguo hero estático si quedara alguna regla previa. */
.hero-zeus-wrap,
.hero-zeus-card,
.hero-zeus-image {
    display: none !important;
}

@media (max-width: 900px) {
    .hero-carousel-wrap {
        width: 100%;
    }

    .hero-carousel {
        aspect-ratio: 2.35 / 1;
        border-radius: 15px;
    }

    .hero-play-now {
        bottom: 22px;
        min-width: 156px;
        height: 42px;
        padding: 0 20px;
        font-size: 14px;
    }

    .hero-carousel-dots {
        bottom: 7px;
        gap: 7px;
    }

    .hero-carousel-dot {
        width: 8px;
        height: 8px;
    }
}

@media (max-width: 520px) {
    .hero-carousel {
        aspect-ratio: 1.95 / 1;
    }

    .hero-slide-image {
        object-position: center;
    }

    .hero-play-now {
        bottom: 21px;
        min-width: 142px;
        height: 40px;
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-slide,
    .hero-slide.is-active,
    .hero-play-now,
    .hero-carousel-dot {
        transition: none;
    }
}


/* =========================================================
   BANNERS - PROPORCIÓN REAL (SIN ESTIRAR NI RECORTAR)
   ========================================================= */

.hero-zeus-wrap {
    width: min(1200px, 100%);
    margin: 0 auto;
}

.hero-carousel {
    position: relative;

    width: 100%;
    height: auto !important;
    aspect-ratio: 2172 / 724 !important;

    overflow: hidden;

    border-radius: 16px;

    background: #050711;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.34);
}

.hero-slide {
    position: absolute;
    inset: 0;

    display: block;

    overflow: hidden;

    background: transparent;
}

.hero-slide::before,
.hero-slide::after {
    display: none !important;
    content: none !important;
}

.hero-slide-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: fill !important;
    object-position: center center !important;

    background: transparent;
}

.hero-play-now {
    bottom: 36px;
    min-width: 176px;
    height: 46px;
    padding: 0 24px;

    font-size: 16px;
    font-weight: 800;
}

.hero-carousel-dots {
    bottom: 10px;
}

/* Ajuste móvil: en celular sí puede recortarse un poco para que no quede enorme */
@media (max-width: 900px) {
    .hero-carousel {
        aspect-ratio: auto !important;
        height: 185px !important;
    }

    .hero-slide-image {
        object-fit: cover !important;
    }

    .hero-play-now {
        bottom: 28px;
        min-width: 150px;
        height: 40px;
        font-size: 14px;
    }

    .hero-carousel-dots {
        bottom: 8px;
    }
}

@media (max-width: 520px) {
    .hero-carousel {
        height: 155px !important;
    }
}




/* =========================================================
   CARRUSEL DEFINITIVO - 1200 x 400
   =========================================================
   IMPORTANTE:
   El index usa .hero-carousel-wrap.
   Estas reglas reemplazan los ajustes anteriores que apuntaban
   incorrectamente a .hero-zeus-wrap.
   ========================================================= */

.home-stage-fixed-banner {
    width: 100%;
    min-height: calc(100vh - 84px);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    padding: 28px 32px 60px;
}


/* CONTENEDOR EXTERIOR REAL DEL INDEX */

.hero-carousel-wrap {
    width: 1200px !important;
    max-width: 100% !important;

    height: 400px !important;
    max-height: none !important;

    margin: 0 auto !important;

    flex: 0 0 400px !important;
}


/* CARRUSEL */

.hero-carousel {
    position: relative !important;

    width: 1200px !important;
    max-width: 100% !important;

    height: 400px !important;
    max-height: 400px !important;

    aspect-ratio: 3 / 1 !important;

    overflow: hidden !important;

    border-radius: 16px;

    background: #050711 !important;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.34);
}


/* CAPA DE SLIDES */

.hero-slides {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;
}


/* CADA SLIDE */

.hero-slide {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    overflow: hidden !important;

    background: transparent !important;
}


/* ELIMINAR CUALQUIER FONDO EXTRA DE VERSIONES ANTERIORES */

.hero-slide::before,
.hero-slide::after {
    display: none !important;
    content: none !important;
}


/* BANNERS: YA SON 1200 x 400 */

.hero-slide-image {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
    object-position: center center !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    outline: 0 !important;

    background: transparent !important;
}


/* BOTÓN */

.hero-play-now {
    bottom: 42px !important;
}


/* PUNTOS */

.hero-carousel-dots {
    bottom: 12px !important;
}


/* JUEGOS JUSTO DEBAJO DEL BANNER */

.games-block {
    width: min(1200px, 100%) !important;
    margin: 22px auto 0 !important;
}


/* =========================================================
   RESPONSIVE
   =========================================================
   Al bajar de 1200px, la altura se calcula automáticamente
   manteniendo la relación 3:1.
   ========================================================= */

@media (max-width: 1264px) {

    .home-stage-fixed-banner {
        padding-left: 32px;
        padding-right: 32px;
    }

    .hero-carousel-wrap {
        width: 100% !important;

        height: auto !important;

        aspect-ratio: 3 / 1 !important;

        flex: 0 0 auto !important;
    }

    .hero-carousel {
        width: 100% !important;

        height: auto !important;
        max-height: none !important;

        aspect-ratio: 3 / 1 !important;
    }
}


@media (max-width: 900px) {

    .home-stage-fixed-banner {
        min-height: calc(100vh - 64px);

        padding:
            18px 14px 40px;
    }

    .hero-carousel-wrap {
        width: 100% !important;
        height: auto !important;

        aspect-ratio: 3 / 1 !important;
    }

    .hero-carousel {
        width: 100% !important;
        height: auto !important;

        aspect-ratio: 3 / 1 !important;

        border-radius: 13px;
    }

    .hero-slide-image {
        object-fit: contain !important;
    }

    .hero-play-now {
        bottom: 27px !important;
    }

    .hero-carousel-dots {
        bottom: 7px !important;
    }

    .games-block {
        margin-top: 16px !important;
    }
}


/* =========================================================
   CARRUSEL MÁS CHICO - IMÁGENES ORIGINALES 1200 x 400
   =========================================================
   Los PNG siguen siendo 1200x400.
   En la web se muestran a un máximo de 1000px de ancho.
   Al conservar 3:1, la altura queda en ~333px.
   ========================================================= */

.home-stage-fixed-banner {
    align-items: center !important;
}

/* CONTENEDOR REAL DEL INDEX */
.hero-carousel-wrap {
    width: min(1000px, 100%) !important;
    max-width: 1000px !important;

    height: auto !important;
    max-height: none !important;

    aspect-ratio: 3 / 1 !important;

    margin: 0 auto !important;

    flex: 0 0 auto !important;
}

/* CARRUSEL */
.hero-carousel {
    width: 100% !important;
    max-width: 1000px !important;

    height: auto !important;
    max-height: none !important;

    aspect-ratio: 3 / 1 !important;

    margin: 0 auto !important;

    overflow: hidden !important;
}

/* SLIDES E IMÁGENES */
.hero-slides,
.hero-slide {
    width: 100% !important;
    height: 100% !important;
}

.hero-slide-image {
    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
    object-position: center center !important;
}

/* JUEGOS SIGUEN A 1200PX */
.games-block {
    width: min(1200px, 100%) !important;
    margin: 20px auto 0 !important;
}


/* NOTEBOOK */
@media (max-width: 1050px) and (min-width: 901px) {
    .hero-carousel-wrap {
        width: min(900px, 100%) !important;
        max-width: 900px !important;
    }

    .hero-carousel {
        max-width: 900px !important;
    }
}


/* CELULAR */
@media (max-width: 900px) {
    .hero-carousel-wrap {
        width: 100% !important;
        max-width: 100% !important;

        aspect-ratio: 3 / 1 !important;
    }

    .hero-carousel {
        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        aspect-ratio: 3 / 1 !important;
    }
}


/* =========================================================
   CASINO RASH - CARRUSEL FINAL 1200 x 300
   =========================================================
   Los archivos de banner deben tener 1200 x 300 px.
   Relación exacta: 4:1.
   ========================================================= */

.home-stage-fixed-banner {
    width: 100% !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

    padding: 24px 32px 60px !important;
}


/* =========================================================
   WRAPPER REAL DEL BANNER
   ========================================================= */

.hero-carousel-wrap,
.hero-carousel-1200x300 {
    width: min(1200px, 100%) !important;
    max-width: 1200px !important;

    height: auto !important;
    max-height: none !important;

    aspect-ratio: 4 / 1 !important;

    margin: 0 auto !important;

    flex: 0 0 auto !important;
}


/* =========================================================
   CARRUSEL
   ========================================================= */

.hero-carousel {
    position: relative !important;

    width: 100% !important;
    max-width: 1200px !important;

    height: auto !important;
    max-height: none !important;

    aspect-ratio: 4 / 1 !important;

    margin: 0 auto !important;

    overflow: hidden !important;

    border-radius: 16px;

    background: transparent !important;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.34);
}


/* =========================================================
   SLIDES
   ========================================================= */

.hero-slides {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;
}

.hero-slide {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    overflow: hidden !important;

    background: transparent !important;
}


/* Elimina cualquier efecto viejo de blur o relleno */
.hero-slide::before,
.hero-slide::after {
    display: none !important;
    content: none !important;
}


/* =========================================================
   IMAGEN 1200 x 300
   ========================================================= */

.hero-slide-image {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
    object-position: center center !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    outline: 0 !important;

    background: transparent !important;
}


/* =========================================================
   BOTÓN JUGAR AHORA
   ========================================================= */

.hero-play-now {
    bottom: 35px !important;

    min-width: 170px;
    height: 43px;

    padding: 0 24px;

    font-size: 15px;
}


/* =========================================================
   PUNTOS DEL CARRUSEL
   ========================================================= */

.hero-carousel-dots {
    bottom: 9px !important;
}


/* =========================================================
   JUEGOS
   ========================================================= */

.games-block {
    width: min(1200px, 100%) !important;
    margin: 18px auto 0 !important;
}


/* =========================================================
   NOTEBOOK / PANTALLAS MENORES A 1200
   Mantiene siempre 4:1.
   ========================================================= */

@media (max-width: 1264px) {

    .home-stage-fixed-banner {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    .hero-carousel-wrap,
    .hero-carousel-1200x300,
    .hero-carousel {
        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;

        aspect-ratio: 4 / 1 !important;
    }
}


/* =========================================================
   CELULAR
   ========================================================= */

@media (max-width: 900px) {

    .home-stage-fixed-banner {
        padding: 16px 14px 40px !important;
    }

    .hero-carousel-wrap,
    .hero-carousel-1200x300,
    .hero-carousel {
        width: 100% !important;
        height: auto !important;

        aspect-ratio: 4 / 1 !important;
    }

    .hero-carousel {
        border-radius: 12px;
    }

    .hero-slide-image {
        object-fit: contain !important;
        object-position: center center !important;
    }

    .hero-play-now {
        bottom: 23px !important;

        min-width: 125px;
        height: 32px;

        padding: 0 15px;

        font-size: 11px;
    }

    .hero-carousel-dots {
        bottom: 5px !important;
    }

    .games-block {
        margin-top: 14px !important;
    }
}


/* =========================================================
   CELULAR ANGOSTO
   ========================================================= */

@media (max-width: 520px) {

    .hero-play-now {
        bottom: 19px !important;

        min-width: 105px;
        height: 28px;

        padding: 0 12px;

        font-size: 9px;
    }

    .hero-carousel-dots {
        bottom: 4px !important;
    }
}


/* =========================================================
   CASINO RASH - RESUMEN ARS DEMO EN HOME
   ========================================================= */
.header-currency{margin-left:-2px;color:#a9afc7;font-size:10px;font-weight:900;letter-spacing:.08em}
.money-demo-panel{width:min(1200px,100%);margin:16px auto 0;display:grid;grid-template-columns:230px 1fr 220px;gap:12px;padding:12px;border:1px solid rgba(151,100,255,.22);border-radius:18px;background:linear-gradient(180deg,rgba(9,11,25,.88),rgba(5,7,18,.88));box-shadow:0 14px 34px rgba(0,0,0,.22);backdrop-filter:blur(10px)}
.money-demo-balance,.money-demo-stakes,.money-demo-range{border:1px solid rgba(255,255,255,.07);border-radius:14px;background:rgba(10,13,29,.78)}
.money-demo-balance{padding:14px 16px;display:flex;flex-direction:column;justify-content:center}.money-demo-label{color:#d1ad50;font-size:10px;font-weight:900;letter-spacing:.12em}.money-demo-balance strong{margin-top:4px;color:#79ef7c;font-size:28px;line-height:1}.money-demo-balance small{margin-top:5px;color:#929ab7;font-size:10px;font-weight:900;letter-spacing:.12em}
.money-demo-stakes{padding:12px 14px}.money-demo-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.money-demo-title-row strong{display:block;margin-top:3px;font-size:14px;color:#f0f1fb}.money-demo-mode{padding:5px 8px;border:1px solid rgba(255,202,83,.28);border-radius:999px;background:rgba(255,190,50,.07);color:#f1c75a;font-size:9px;font-weight:900;letter-spacing:.08em;white-space:nowrap}.money-demo-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.money-demo-chip{padding:7px 9px;border-radius:9px;border:1px solid rgba(116,81,191,.45);background:#11152a;color:#d9dcf2;font-size:11px;font-weight:800}
.money-demo-range{padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:8px}.money-demo-range>div{display:flex;flex-direction:column;justify-content:center;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.025)}.money-demo-range span{color:#8d96b5;font-size:9px;font-weight:900;letter-spacing:.1em}.money-demo-range strong{margin-top:4px;color:#f4ca61;font-size:17px}
.games-block-header{display:flex;align-items:flex-end;justify-content:space-between;gap:18px}.games-bet-hint{color:#c0a25c;font-size:10px;font-weight:900;letter-spacing:.1em}
@media(max-width:1050px){.money-demo-panel{grid-template-columns:200px 1fr}.money-demo-range{grid-column:1/-1}}
@media(max-width:760px){.header-currency{display:none}.money-demo-panel{grid-template-columns:1fr;padding:9px;gap:9px}.money-demo-balance{align-items:flex-start}.money-demo-range{grid-column:auto}.money-demo-title-row{flex-direction:column}.money-demo-mode{align-self:flex-start}.games-block-header{align-items:flex-start;flex-direction:column;gap:5px}.games-bet-hint{font-size:9px}}