* {
    margin:0;
    padding:0;
    box-sizing:border-box
}
body {
    background: linear-gradient(to right, #013A14, #000000, #013A14);
    background-size:cover;
    background-position:center;
    font-family:Arial,sans-serif
}

@font-face {
  font-family: 'Double Porter';
  src: url('/recursos/double-porter-5.ttf') format('truetype');
}

.dado-svg {
    position: relative;
    top: 8px;
    margin-right: 15px;
}

header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    background-color:#000;
    padding:20px 75px;
    position:fixed;
    width:100%;
    top:0;
    z-index:8
}
.menu-btn {
    color:#fff;
    background-color:#fff0;
    font-size:16px;
    cursor:pointer;
    font-family:'Montserrat',sans-serif;
    font-weight:700;
    border:1px solid #fff;
    border-radius:25px;
    padding-top:6px;
    padding-bottom:6px;
    padding-left:15px;
    padding-right:15px
}
.icono-menu {
    width:26px;
    height:26px;
    margin-right:5px!important;
    transition:transform 0.3s ease;
    vertical-align:middle
}
.categoria-menu {
    font-family:'Montserrat',sans-serif;
    font-size:15px;
    font-weight:700;
    transform-origin:center center;
    vertical-align:middle;
    letter-spacing:.5px
}
a:hover .icono-menu {
    transform:scale(1.1)
}
.categoria-menu-desplegable {
    display:flex;
    align-items:center;
    justify-content:space-between;
    text-decoration:none;
    padding-top:15px;
    margin-right:5px
}
.categoria-menu-desplegable-item {
    font-family:'Montserrat',sans-serif;
    color:#ffdd84;
    font-weight:600;
    font-size:18px;
    padding-top:10px
}
.linea-divisoria-menu {
    border:none;
    border-top:1px solid #353535;
    margin-bottom:10px
}
.flecha-desplegable {
    font-size:14px;
    color:#505050;
    transition:transform 0.3s ease
}
.submenu {
    list-style:none;
    margin:0;
    display:none;
    padding-left:20px;
    font-family:'Montserrat',sans-serif;
    font-size:15px;
    font-weight:600
}
.submenu li {
    padding:2.5px 0
}
.submenu.mostrar {
    display:block;
    animation:despliegue 0.3s ease-out
}
@keyframes despliegue {
    from {
        opacity:0;
        transform:translateY(-10px)
    }
    to {
        opacity:1;
        transform:translateY(0)
    }
}
.flecha-desplegable.rotar {
    transform:rotate(180deg)
}
.categoria-menu-desplegable {
    display:flex;
    align-items:center;
    justify-content:space-between;
    text-decoration:none;
    padding:8px 0;
    cursor:pointer
}
.icono-menu {
    width:26px;
    height:26px;
    margin-right:10px;
    transition:transform 0.3s ease
}
.logo {
    height:56px;
    transition:transform 0.3s
}
.logo:hover {
    transform:scale(1.06);
    cursor:pointer
}

.ingresar-header-btn {
    background-image: linear-gradient(to right, #956A0B, #FEE19E, #956A0B) !important;
    border: 1px solid #ffdd84;
    border-radius: 20px;
    font-family: 'Double Porter';
    font-size: 20px;
    width: 90px;
    height: 40px;
    cursor: pointer;
}

/*.ingresar-header-btn:hover {
    color: #000
}*/

.overlay {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgb(0 0 0 / .7);
    opacity:0;
    pointer-events:none;
    transition:opacity 0.3s ease;
    z-index:9
}
.panel-lateral {
    position:fixed;
    top:0;
    left:-280px;
    width:280px;
    height:100%;
    background-color:#000;
    color:#fff;
    padding-right:20px;
    padding-left:20px;
    padding-bottom:0;
    padding-top:45px;
    transition:left 0.3s ease;
    display:flex;
    flex-direction:column;
    z-index:10;
    overflow-y:auto
}
.panel-lateral nav {
    flex:1
}
.panel-lateral nav ul {
    list-style-type:none;
    padding:0
}
.panel-lateral nav ul li {
    margin:12px 0
}
.panel-lateral nav ul li a {
    color:#fff;
    text-decoration:none
}
.panel-lateral .menu-contenido {
    flex:1;
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-width:thin;
    scrollbar-color:#353535 #000;
    padding-right:5px
}
.panel-lateral .menu-contenido::-webkit-scrollbar {
    width:1px
}
.panel-lateral .menu-contenido::-webkit-scrollbar-thumb {
    background-color:#000;
    border-radius:10px
}
.panel-lateral .menu-contenido::-webkit-scrollbar-thumb:hover {
    background-color:#000
}
.panel-lateral .menu-contenido::-webkit-scrollbar-track {
    background-color:#000;
    border-radius:10px
}
.btn-cerrar {
    font-family:'Montserrat',sans-serif;
    background:none;
    border:none;
    font-size:45px;
    color:#ffdd84;
    position:absolute;
    top:5px;
    right:20px;
    cursor:pointer
}
.contenedor-inferior {
    background-color:#000;
    height:150px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:10px;
    position:sticky;
    bottom:0;
    width:100%;
    padding-bottom:0
}
.social-icons {
    display:flex;
    margin-bottom:8px;
    align-self:flex-start;
    justify-content:flex-start
}
.social-icons img {
    width:43px;
    height:43px;
    margin-right:5px
}
.boton-lenguajes {
    font-family:'Montserrat',sans-serif;
    font-size:15px;
    font-weight:700;
    height:38px;
    width:250px;
    background-color:#fff0;
    border:solid 1px #fff;
    border-radius:25px;
    margin-bottom:-20px;
    margin-left:-5px;
    color:#fff;
    font-size:13px;
    cursor:pointer
}
.menu-lenguajes.active .boton-lenguajes {
    border-top-right-radius:0;
    border-top-left-radius:0
}
.menu-lenguajes {
    position:relative
}
.opciones-lenguajes {
    display:none;
    position:absolute;
    bottom:100%;
    left:-5px;
    background-color:#000;
    border:1px solid #fff;
    border-bottom:none;
    border-top-left-radius:25px;
    border-top-right-radius:25px;
    width:250px;
    z-index:20;
    overflow:hidden
}
.opcion {
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'Montserrat',sans-serif;
    font-size:13px;
    letter-spacing:.5px;
    font-weight:700;
    color:#fff;
    cursor:pointer;
    text-align:center;
    border-bottom:1px solid rgb(255 255 255 / .2);
    transition:transform 0.2s ease,color 0.2s ease
}
.opcion:last-child {
    border-bottom:none
}
.opcion:hover {
    transform:scale(1.2)
}
.menu-lenguajes.active .opciones-lenguajes {
    display:block
}
.centrar-svg {
    vertical-align:middle
}
.slider-contenedor {
    position:relative;
    width:100%;
    max-width:100%;
    margin-top:80px;
    margin-bottom:-20px;
    overflow:hidden
}
.slider {
    display:flex;
    transition:transform 1s ease;
    will-change:transform
}
.slider-image {
    width:100%;
    height:auto;
    display:block
}
.dots {
    position:absolute;
    bottom:10px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:8px
}
.dot {
    width:7px;
    height:7px;
    border-radius:50%;
    background-color:grey;
    cursor:pointer;
    transition:background-color 0.3s
}
.dot.active {
    background-color:#fff
}
.barra-categorias {
    width:920px;
    height:90px;
    border:solid 1px #fff;
    border-radius:50px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin:0 auto;
    margin-bottom:60px;
    padding:40px
}
.item-categoria {
    text-align:center;
    cursor:pointer
}
.item-categoria .icono {
    width:35px;
    height:35px;
    margin:0 auto
}
.item-categoria svg {
    width:100%;
    height:100%;
    fill:#fff;
    transition:transform 0.3s ease
}
.titulo-categoria {
    font-family:'Montserrat',sans-serif;
    margin-top:10px;
    font-size:12px;
    font-weight:700;
    color:#fff;
    transition:color 0.3s ease
}
.item-categoria:hover svg {
    transform:scale(1)
}
.item-categoria:hover .titulo-categoria {
    color:#ffdd84
}
.item-categoria:active .titulo-categoria {
    color:#ffdd84
}
main {
    padding-top:80px;
    background: linear-gradient(90deg, black 0%, #4e086c 100%);;
    background-position:top center;
    background-attachment:fixed;
    background-size:cover
}
.linea-divisoria {
    border:none;
    border-top:1px solid #868686;
    margin:30px 0;
    margin-left:70px;
    margin-right:70px
}
.titulo-grupo {
    font-family:'Montserrat',sans-serif;
    font-size:16;
    font-weight:700;
    margin-left:70px;
    color:#fff;
    margin-top:80px
}
.contenedor-juegos {
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    padding:20px;
    padding-left:70px;
    margin-top:10px
}
.contenedor-juego {
    position:relative;
    width:185px;
    border-radius:15px;
    box-shadow:0 4px 8px rgb(0 0 0 / .2);
    transition:transform 0.3s ease;
    cursor:pointer;
    display:flex;
    flex-direction:column
}
.contenedor-imagen {
    position:relative;
    width:100%;
    height:300px;
    overflow:hidden
}
.contenedor-juego-2 {
    position:relative;
    width:185px;
    border-radius:15px;
    box-shadow:0 4px 8px rgb(0 0 0 / .2);
    transition:transform 0.3s ease;
    cursor:pointer;
    display:flex;
    flex-direction:column
}
.contenedor-imagen-2 {
    position:relative;
    width:100%;
    height:150px;
    overflow:hidden
}
.imagen-juego {
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform 0.5s ease;
    border-radius:10px
}
.contenedor-imagen:hover .imagen-juego {
    transform:scale(1.02)
}
.contenedor-imagen .overlay {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgb(0 0 0 / .5);
    display:flex;
    justify-content:center;
    align-items:center;
    opacity:0;
    transition:opacity 0.5s ease
}
.contenedor-imagen:hover .overlay {
    opacity:1
}
.contenedor-imagen-2:hover .imagen-juego {
    transform:scale(1.02)
}
.contenedor-imagen-2 .overlay {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgb(0 0 0 / .5);
    display:flex;
    justify-content:center;
    align-items:center;
    opacity:0;
    transition:opacity 0.5s ease
}
.contenedor-imagen-2:hover .overlay {
    opacity:1
}
.informacion-juego {
    margin-top:10px;
    width:100%
}
.titulo-juego {
    font-size:15px;
    color:#fff;
    font-family:'Montserrat',sans-serif;
    font-weight:600;
    text-align:left
}
.detalles {
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
    margin-top:5px
}
.proveedor {
    font-size:14px;
    font-weight:600;
    color:#bbb;
    font-family:'Montserrat',sans-serif;
    text-align:left
}
.estrella {
    transform:scale(1.1)
}
.estrella:hover {
    transform:scale(1.2)
}
.ingresar-btn {
    background-color:#ffdd84;
    font-family:'Montserrat',sans-serif;
    font-weight:600;
    color:#fff;
    border:none;
    padding:10px 60px;
    border-radius:5px;
    font-size:12px;
    cursor:pointer;
    transition:background-color 0.3s ease
}
.ingresar-btn:hover {
    background-color:#c63106;
    color:#fff
}
.anular-estilos {
    color:#fff;
    text-decoration:none;
    transition:color 0.3s
}
.anular-estilos:hover {
    color:#000
}
footer {
    background-color:#0000009c;
    color:#fff;
    padding-top:80px;
    font-family:'Montserrat',sans-serif;
    font-weight:700;
    padding-left:10px;
    padding-right:10px
}
.footer-container {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    max-width:800px;
    margin:0 auto
}
.footer-column {
    margin:10px;
    min-width:115px
}
.footer-column h4 {
    margin-bottom:10px;
    font-size:12px;
    font-weight:700
}
.footer-column ul {
    list-style:none;
    padding:0;
    margin:0
}
.footer-column ul li {
    margin-bottom:8px
}
.footer-column ul li a {
    color:#707070;
    text-decoration:none;
    font-size:14px
}
.footer-column ul li a:hover {
    text-decoration:underline
}
.footer-right {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:20px
}
.footer-lang {
    display:flex;
    justify-content:center;
    align-items:center;
    width:170px;
    height:40px;
    padding:10px;
    font-size:15px;
    font-weight:700;
    background-color:#fff0;
    border:solid 1px #fff;
    border-radius:25px;
    color:#fff;
    font-size:13px;
    cursor:pointer
}
.footer-brand {
    display:flex;
    flex-direction:column;
    align-items:center;
    color:#6e6e6e
}
.footer-brand img {
    margin-top:15px;
    width:120px;
    margin-bottom:30px
}
.footer-brand span {
    font-size:12px;
    opacity:1;
    text-align:center
}
.footer-disclaimer {
    margin-top:20px;
    font-weight:700;
    font-size:12px;
    text-align:center;
    color:#fff;
    padding-bottom:40px
}
.container {
    text-align:center;
    background:rgb(0 0 0 / .344);
    box-shadow:0 4px 10px rgb(0 0 0 / .1);
    border:4px solid #ffdd84;
    border-radius:10px;
    width:100%;
    max-width:850px;
    max-height:600px;
    margin-top:100px;
    margin-left:21%
}
.logo-footer {
    display:block;
    margin:0 auto;
    max-width:100%;
    height:auto
}
.iframe-container {
    width:100%;
    aspect-ratio:16 / 9;
    overflow:hidden;
    border-radius:10px;
    box-shadow:0 4px 10px rgb(0 0 0 / .1)
}
iframe {
    width:100%;
    height:100%;
    border:none
}
.popup {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgb(0 0 0 / .9);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:1000;
    color:#fff;
    animation:pulseGlow 1.5s infinite
}
.popup.hidden {
    display:none
}
.popup-container {
    display:flex;
    flex-direction:column;
    align-items:center
}
.popup-logo {
    height:65px;
    margin-bottom:45px
}
.popup-content {
    width:450px;
    background:#202020;
    border-radius:15px;
    padding:40px 60px;
    text-align:center
}
.popup-title {
    font-family:'Montserrat',sans-serif;
    font-size:20px;
    font-weight:700
}
.popup-text {
    font-family:'Montserrat',sans-serif;
    font-size:18x;
    font-weight:400;
    color:#fff;
    margin-top:20px;
    margin-bottom:20px
}
.reloadBtn {
    background:#ba8b14;
    color:#fff;
    width:300px;
    padding:15px 40px;
    font-family:'Montserrat',sans-serif;
    font-size:16px;
    text-transform:uppercase;
    border-radius:30px;
    cursor:pointer;
    border:none
}
.reloadBtn:hover {
    background-color:#886a1e
}
@media (max-width:768px) {
    .logo {
        max-width:400px;
        height: 40px !important;
    }
    .container {
        margin-left:0;
        padding:3px
    }
    .iframe-container {
        aspect-ratio:4 / 3
    }
    .popup-content {
        width:300px;
        padding:20px 30px
    }
    .reloadBtn {
        width:200px
    }

    .ingresar-header-btn {
    background-image: linear-gradient(to right, #956A0B, #FEE19E, #956A0B) !important;
    border: 1px solid #ffdd84;
    border-radius: 20px;
    font-family: 'Double Porter';
    font-size: 20px;
    width: 90px;
    height: 40px;
    cursor:pointer;
    }

    .dado-svg {
        margin-right: 0px;
    }
}
@media (max-width:480px) {
    .logo {
        max-width:300px
    }
    .iframe-container {
        aspect-ratio:1 / 1
    }
}