/* =====================================
        SUPER LUIGI STORE
        DISEÑO BASE
===================================== */



:root{


    /* COLORES PRINCIPALES */

    --background:
    #080b10;


    --background-light:
    #111720;


    --card:
    #151c27;


    --green:
    #00e676;


    --red:
    #ff1744;


    --blue:
    #2196f3;


    --white:
    #ffffff;


    --gray:
    #aab2bd;


    --shadow:
    0 15px 40px rgba(0,0,0,.45);


    --transition:
    .3s ease;


}







/* =====================================
            RESET GENERAL
===================================== */


*{


    margin:0;

    padding:0;

    box-sizing:border-box;


}



html{


    scroll-behavior:smooth;


}




body{


    background:var(--background);


    color:var(--white);


    font-family:

    "Segoe UI",
    Arial,
    sans-serif;


    overflow-x:hidden;


}






/* =====================================
            LINKS
===================================== */


a{


    color:white;

    text-decoration:none;


}







/* =====================================
            BOTONES GENERALES
===================================== */


button{


    border:none;

    cursor:pointer;

    font-family:inherit;


}







/* =====================================
            SECCIONES
===================================== */


section{


    width:100%;

    padding:80px 6%;


}







/* TITULOS */


.section-header{


    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:40px;


}



.section-header h2{


    font-size:32px;

    letter-spacing:-1px;


}



.section-header p{


    color:var(--gray);

    margin-top:10px;


}







/* =====================================
        ANIMACIONES GENERALES
===================================== */



@keyframes fadeUp{


    from{


        opacity:0;

        transform:
        translateY(40px);


    }


    to{


        opacity:1;

        transform:
        translateY(0);


    }


}






@keyframes pulse{


    0%{


        transform:scale(1);


    }


    50%{


        transform:scale(1.05);


    }


    100%{


        transform:scale(1);


    }


}







.fade-animation{


    animation:
    fadeUp .8s ease forwards;


}







/* =====================================
        EFECTO AL PASAR MOUSE
===================================== */


.hover-effect{


    transition:
    var(--transition);


}



.hover-effect:hover{


    transform:
    translateY(-8px);


    box-shadow:
    var(--shadow);


}








/* =====================================
        SCROLL PERSONALIZADO
===================================== */



::-webkit-scrollbar{


    width:10px;


}



::-webkit-scrollbar-track{


    background:#05070a;


}



::-webkit-scrollbar-thumb{


    background:

    linear-gradient(

    var(--green),

    var(--blue)

    );


    border-radius:20px;


}







/* =====================================
        BOTONES PRINCIPALES
===================================== */


.buy-btn{


    background:

    var(--green);


    color:black;


    padding:15px 30px;


    border-radius:30px;


    transition:.3s;


}



.buy-btn:hover{


    transform:
    translateY(-5px);


    box-shadow:

    0 10px 25px

    rgba(0,230,118,.4);


}







.details-btn{


    background:

    transparent;


    color:white;


    border:

    2px solid white;


    padding:13px 30px;


    border-radius:30px;


    transition:.3s;


}



.details-btn:hover{


    background:white;


    color:black;


}






/* =====================================
        CONTENEDORES
===================================== */


.container{


    max-width:1400px;


    margin:auto;


}
/* =====================================
            HEADER
===================================== */


.header{


    width:100%;

    height:90px;


    display:flex;

    align-items:center;

    justify-content:space-between;


    padding:0 6%;


    background:

    rgba(8,11,16,.85);


    backdrop-filter:

    blur(15px);


    position:sticky;


    top:0;


    z-index:1000;


    border-bottom:

    1px solid

    rgba(255,255,255,.08);


}







/* LOGO */


.logo h1{


    font-size:30px;


    font-weight:800;


    letter-spacing:-1px;


}



.logo span{


    color:var(--green);


}






.logo h1:hover{


    transform:scale(1.05);


    transition:.3s;


}








/* =====================================
            BUSCADOR
===================================== */


.search-box{


    width:35%;


    height:45px;


    display:flex;


    align-items:center;


    gap:15px;


    background:

    var(--card);


    padding:

    0 20px;


    border-radius:50px;


    transition:.3s;


}





.search-box i{


    color:

    var(--green);


    font-size:18px;


}





.search-box input{


    width:100%;


    background:none;


    border:none;


    outline:none;


    color:white;


    font-size:16px;


}





.search-box:focus-within{


    box-shadow:

    0 0 20px

    rgba(0,230,118,.25);


    transform:

    translateY(-3px);


}








/* =====================================
        BOTONES HEADER
===================================== */


.header-actions{


    display:flex;


    gap:15px;


}





.header-actions button{


    width:45px;


    height:45px;


    border-radius:50%;


    background:

    var(--card);


    color:white;


    font-size:18px;


    position:relative;


    transition:.3s;


}





.header-actions button:hover{


    background:

    var(--green);


    color:black;


    transform:

    translateY(-6px)

    rotate(5deg);


}







.counter{


    position:absolute;


    top:-5px;


    right:-5px;


    background:

    var(--red);


    color:white;


    width:20px;


    height:20px;


    border-radius:50%;


    font-size:12px;


    display:flex;


    align-items:center;


    justify-content:center;


}








/* =====================================
            MENU NAVBAR
===================================== */


.navbar{


    width:100%;


    background:

    #0d1118;


    padding:

    18px 6%;


    display:flex;


    justify-content:center;


}





.navbar ul{


    list-style:none;


    display:flex;


    gap:45px;


}





.navbar li{


    position:relative;


}





.navbar a{


    color:

    var(--gray);


    font-size:16px;


    font-weight:600;


    transition:.3s;


}







.navbar a:hover{


    color:white;


}







/* LINEA ANIMADA DEL MENU */


.navbar li::after{


    content:"";


    position:absolute;


    bottom:-10px;


    left:0;


    width:0;


    height:3px;


    background:

    var(--green);


    border-radius:10px;


    transition:.3s;


}





.navbar li:hover::after{


    width:100%;


}
/* =====================================
            HERO PRINCIPAL
===================================== */


.hero{


    min-height:

    650px;


    display:flex;


    align-items:center;


    justify-content:space-between;


    gap:50px;


    overflow:hidden;


    position:relative;


    background:


    radial-gradient(

    circle at right,

    rgba(0,230,118,.15),

    transparent 40%

    );


}







/* TEXTO DEL HERO */


.hero-content{
    width:40%;
    animation: fadeUp .8s ease;
}





.hero-badge{


    display:inline-block;


    background:

    var(--red);


    color:white;


    padding:

    8px 18px;


    border-radius:30px;


    font-size:14px;


    font-weight:bold;


    margin-bottom:20px;


    animation:

    pulse 2s infinite;


}







.hero-content h2{


    font-size:55px;


    line-height:1.1;


    margin-bottom:20px;


}





.hero-content p{


    color:

    var(--gray);


    font-size:20px;


    max-width:500px;


    margin-bottom:25px;


}







.hero-price{


    font-size:32px;


    font-weight:bold;


    color:

    var(--green);


    margin-bottom:30px;


}







/* BOTONES HERO */


.hero-buttons{


    display:flex;


    gap:20px;


}





.hero-buttons button{


    font-size:16px;


}








/* =====================================
        IMAGEN / VIDEO HERO
===================================== */


.hero-media{
    width:65%;
    display:flex;
    justify-content:center;
    align-items:center;

    margin-left:100px;
}







.hero-media img,
.hero-media video{
    width:100%;
    max-width:600px;   
    height:300px;
    object-fit:cover;

    border-radius:25px;

    box-shadow:var(--shadow);
}

.hero-media img:hover{


    transform:

    scale(1.05);


}








/* EFECTO DE LUZ */


.hero::before{


    content:"";


    position:absolute;


    width:500px;


    height:500px;


    background:

    var(--green);


    opacity:.08;


    filter:

    blur(120px);


    right:-100px;


    top:50px;


}








/* ANIMACIÓN DE ENTRADA */


.hero-content,


.hero-media{


    opacity:0;


    animation:

    fadeUp 1s forwards;


}






.hero-media{


    animation-delay:.2s;


}
/* =====================================
        CATEGORÍAS
===================================== */


.categories{

    position:relative;

}




.category-slider{


    display:flex;

    align-items:center;

    gap:20px;


}




.category-container{


    display:flex;


    gap:25px;


    overflow-x:auto;


    scroll-behavior:smooth;


    padding:20px 5px;


    width:100%;


}





.category-container::-webkit-scrollbar{


    display:none;


}







/* TARJETAS DE CATEGORÍAS */


.category-card{


    min-width:220px;


    height:220px;


    background:

    var(--card);


    border-radius:25px;


    overflow:hidden;


    position:relative;


    cursor:pointer;


    transition:.4s;


    box-shadow:

    0 10px 25px rgba(0,0,0,.25);


}






.category-card img{


    width:100%;


    height:100%;


    object-fit:cover;


    transition:.5s;


}







.category-card::after{


    content:"";


    position:absolute;


    inset:0;


    background:

    linear-gradient(

    transparent,

    rgba(0,0,0,.8)

    );


}







.category-card h3{


    position:absolute;


    bottom:25px;


    left:25px;


    z-index:2;


    font-size:28px;


}







/* EFECTO MOUSE */


.category-card:hover{


    transform:


    translateY(-12px);


    box-shadow:


    0 20px 45px rgba(0,230,118,.25);


    border:

    2px solid var(--green);


}







.category-card:hover img{


    transform:


    scale(1.15);


}







/* BOTONES DEL SLIDER */


.slider-btn{


    min-width:50px;


    height:50px;


    border-radius:50%;


    background:

    var(--card);


    color:white;


    font-size:20px;


    transition:.3s;


}





.slider-btn:hover{


    background:

    var(--green);


    color:black;


    transform:

    scale(1.1);


}
/* =====================================
        SECCIÓN DE JUEGOS
===================================== */


.games-section{

    position:relative;

}






.games-slider {
    display: flex;
    gap: 24px;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-behavior: smooth;

    padding: 20px 5px 18px;

    scrollbar-width: none;
}
.games-slider::-webkit-scrollbar {
    display: none;
}







/* =====================================
        TARJETA DEL JUEGO
===================================== */


.game-card{


    min-width:280px;


    background:

    var(--card);


    border-radius:25px;


    overflow:hidden;


    position:relative;


    transition:.4s;


    transition:
transform .35s ease,
box-shadow .35s ease,
border-color .35s ease;

border:2px solid transparent;

box-shadow:
0 12px 35px rgba(0,0,0,.35);


}

.game-card:hover{
    transform:translateY(-12px) scale(1.02);

    border-color:#00e676;

    box-shadow:
        0 20px 45px rgba(0,0,0,.45),
        0 0 18px rgba(0,230,118,.55);
}





.game-card:hover{


    transform:


    translateY(-15px);


    box-shadow:


    0 25px 50px rgba(0,230,118,.25);


}







/* =====================================
        IMAGEN DEL JUEGO
===================================== */


.game-media{


    height:360px;


    position:relative;


    overflow:hidden;


}







.game-media img,
.game-media video{
    width:100%;
    height:100%;
    object-fit:cover;

    transition:
        transform .45s ease,
        filter .45s ease,
        opacity .35s ease;
}







.game-media video{


    position:absolute;


    top:0;


    left:0;


    opacity:0;


}






.game-card:hover .game-media img{
    transform:scale(1.12);
    filter:brightness(1.08) saturate(1.18);
}





.game-card:hover .game-media video{


    opacity:1;


}







/* =====================================
            INFORMACIÓN
===================================== */


.game-info{


    padding:20px;


}






.game-info h3{


    font-size:20px;


    margin-bottom:10px;


}






.game-info p{


    color:

    var(--gray);


    font-size:14px;


    margin-bottom:15px;


}






.game-price{


    font-size:24px;


    font-weight:bold;


    color:

    var(--green);


}







/* =====================================
        ETIQUETAS
===================================== */


.game-tag{


    position:absolute;


    top:15px;


    left:15px;


    background:

    var(--red);


    color:white;


    padding:

    7px 15px;


    border-radius:20px;


    font-size:13px;


    z-index:5;


}







/* =====================================
        BOTONES DEL JUEGO
===================================== */


.game-actions{


    display:flex;


    gap:10px;


    margin-top:20px;


}





.game-actions button{


    height:45px;


    border-radius:15px;


    transition:.3s;


}







.buy-game{


    flex:1;


    background:

    var(--green);


    color:black;


}





.buy-game:hover{


    transform:

    scale(1.05);


}







.favorite-game,


.cart-game{


    width:45px;


    background:

    #202733;


    color:white;


    font-size:18px;


}







.favorite-game:hover{


    background:

    var(--red);


    transform:

    rotate(-10deg);


}





.cart-game:hover{


    background:

    var(--blue);


    transform:

    scale(1.1);


}
/* =====================================
            CARRITO LATERAL
===================================== */


.cart-panel{


    position:fixed;


    top:0;


    right:-450px;


    width:400px;


    height:100vh;


    background:

    var(--background-light);


    z-index:2000;


    padding:30px;


    transition:.4s;


    box-shadow:

    -20px 0 50px rgba(0,0,0,.5);

pointer-events: none;
}




.cart-panel.active {
    right: 0;
    pointer-events: auto;
}







/* CABECERA CARRITO */


.cart-header{


    display:flex;


    justify-content:space-between;


    align-items:center;


    margin-bottom:30px;


}





.cart-header button{


    background:

    transparent;


    color:white;


    font-size:25px;


}







/* PRODUCTOS CARRITO */


#cart-items{


    height:70%;


    overflow-y:auto;


}





.cart-item{


    display:flex;


    gap:15px;


    background:

    var(--card);


    padding:15px;


    border-radius:15px;


    margin-bottom:15px;


}





.cart-item img{


    width:70px;


    height:70px;


    object-fit:cover;


    border-radius:10px;


}







.cart-footer{


    border-top:

    1px solid rgba(255,255,255,.1);


    padding-top:20px;


}





.checkout-btn{


    width:100%;


    padding:15px;


    margin-top:20px;


    border-radius:30px;


    background:

    var(--green);


    color:black;


    font-size:16px;


}









/* =====================================
            FONDO OSCURO
===================================== */


.overlay{


    position:fixed;


    inset:0;


    background:

    rgba(0,0,0,.7);


    opacity:0;


    visibility:hidden;


    transition:.3s;


    z-index:1500;


}





.overlay.active{


    opacity:1;


    visibility:visible;


}










/* =====================================
        MODAL DEL JUEGO
===================================== */


.game-modal{


    position:fixed;


    inset:0;


    display:flex;


    justify-content:center;


    align-items:center;


    background:

    rgba(0,0,0,.8);


    opacity:0;


    visibility:hidden;


    transition:.3s;


    z-index:3000;


}







.game-modal.active{


    opacity:1;


    visibility:visible;


}







.modal-content{


    width:500px;


    background:

    var(--background-light);


    border-radius:30px;


    padding:30px;


    position:relative;


    animation:

    fadeUp .4s;


}







.modal-content img{


    width:100%;


    height:300px;


    object-fit:cover;


    border-radius:20px;


}





.close-modal{


    position:absolute;


    top:20px;


    right:20px;


    width:40px;


    height:40px;


    border-radius:50%;


    background:

    var(--red);


    color:white;


    font-size:18px;


}







.modal-content h2{


    margin-top:20px;


    font-size:30px;


}







.modal-content p{


    color:

    var(--gray);


    margin:15px 0;


}







.modal-buttons{


    display:flex;


    gap:15px;


    margin-top:25px;


}





.modal-buttons button{


    flex:1;


    padding:15px;


    border-radius:25px;


}

/* =====================================
            BENEFICIOS
===================================== */


.benefits{


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:30px;


}





.benefit-card{


    background:

    var(--card);


    padding:35px;


    border-radius:25px;


    text-align:center;


    transition:.4s;


}







.benefit-card i{


    font-size:45px;


    color:

    var(--green);


    margin-bottom:20px;


}







.benefit-card h3{


    margin-bottom:15px;


    font-size:22px;


}







.benefit-card p{


    color:

    var(--gray);


}







.benefit-card:hover{


    transform:

    translateY(-12px);


    border:

    2px solid var(--green);


    box-shadow:

    var(--shadow);


}









/* =====================================
            OPINIONES
===================================== */


.reviews-container{


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:25px;


}





.review-card{


    background:

    var(--card);


    padding:30px;


    border-radius:25px;


    transition:.3s;


}







.review-card:hover{


    transform:

    translateY(-10px);


}







.stars{


    color:#ffd600;


    font-size:22px;


    margin-bottom:15px;


}







.review-card p{


    color:

    var(--gray);


    line-height:1.6;


}









/* =====================================
            FAQ
===================================== */


.faq-container{


    max-width:900px;


    margin:auto;


}





.faq-container details{


    background:

    var(--card);


    margin-bottom:15px;


    padding:20px;


    border-radius:15px;


    cursor:pointer;


    transition:.3s;


}







.faq-container details:hover{


    border:

    1px solid var(--green);


}







.faq-container summary{


    font-size:18px;


    font-weight:bold;


}







.faq-container p{


    color:

    var(--gray);


    margin-top:15px;


}









/* =====================================
        REDES SOCIALES
===================================== */


.social-media{


    text-align:center;


}





.social-icons{


    display:flex;


    justify-content:center;


    gap:25px;


    margin-top:30px;


}





.social-icons a{


    width:60px;


    height:60px;


    display:flex;


    justify-content:center;


    align-items:center;


    border-radius:50%;


    background:

    var(--card);


    font-size:25px;


    transition:.3s;


}







.social-icons a:hover{


    background:

    var(--green);


    color:black;


    transform:

    translateY(-10px);


}









/* =====================================
            FOOTER
===================================== */


.footer{


    background:

    #05070a;


    padding:

    60px 6%;


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:40px;


}





.footer-column{


    display:flex;


    flex-direction:column;


    gap:15px;


}







.footer-column h2 span{


    color:

    var(--green);


}







.footer-column h3{


    color:

    var(--green);


}







.footer-column a{


    color:

    var(--gray);


    transition:.3s;


}





.footer-column a:hover{


    color:white;


    transform:

    translateX(8px);


}







.footer-column p{


    color:

    var(--gray);


    line-height:1.6;


}









/* =====================================
            COPYRIGHT
===================================== */


.copyright{


    background:

    #020304;


    padding:25px;


    text-align:center;


    color:

    var(--gray);


    font-size:14px;


}
/* =====================================
        FAVORITOS ACTIVOS
===================================== */

.favorite-game.active {
    background: var(--red);
    color: white;
}

.favorite-game.active i {
    animation: pulse .4s ease;
}


/* =====================================
        CONTROLES DEL CARRITO
===================================== */

.cart-item-info {
    flex: 1;
}

.cart-item-info h4 {
    margin-bottom: 8px;
}

.cart-item-info p {
    color: var(--green);
    font-weight: bold;
}

.cart-quantity {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.cart-quantity button {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--card);
    color: white;
}

.remove-cart-item {
    margin-top: 12px;
    background: transparent;
    color: var(--red);
}

.empty-cart {
    color: var(--gray);
    text-align: center;
    margin-top: 50px;
}
/* =====================================
        ANIMACIÓN DEL BUSCADOR
===================================== */

.game-card {
    animation: fadeUp .35s ease;
}

.search-box input::placeholder {
    color: #7f8792;
}
/* =====================================
        TRANSICIÓN DEL HERO
===================================== */

#hero-image {
    transition:
        opacity .35s ease,
        transform .5s ease;
}

.hero-media:hover #hero-image {
    transform: scale(1.03);
}
/* ======================================
   FLECHAS DEL HERO
====================================== */

.hero-controls{
    position:absolute;
    left:50%;
    bottom:25px;
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    gap:20px;
    z-index:50;
}

.hero-controls button{
    width:55px;
    height:55px;
    border:none;
    border-radius:50%;
    background:rgba(20,20,25,.8);
    color:#fff;
    font-size:20px;
    cursor:pointer;
    transition:.25s;
}

.hero-controls button:hover{
    background:#00e676;
    color:#000;
    transform:scale(1.08);
}

.hero-dot{
    width:18px;
    height:18px;
    border-radius:50%;
    background:#2b2f38;
    cursor:pointer;
    transition:all .35s ease;
    border:2px solid transparent;
}

/* Cuando pasas el mouse */
.hero-dot:hover{
    background:#00ff88;
    border-color:#7dffd0;
    transform:scale(1.35);
    box-shadow:
        0 0 10px #00ff88,
        0 0 20px #00ff88,
        0 0 35px rgba(0,255,136,.7);
}

/* El círculo seleccionado */
.hero-dot.active{
    background:#00ff88;
    transform:scale(1.25);
    box-shadow:
        0 0 10px #00ff88,
        0 0 25px #00ff88;
}
/* =====================================
        PANEL DE FAVORITOS
===================================== */

.favorites-panel{
    position:fixed;
    top:0;
    right:-450px;

    width:400px;
    height:100vh;

    background:var(--background-light);

    z-index:2100;

    padding:30px;

    transition:.4s ease;

    box-shadow:-20px 0 50px rgba(0,0,0,.5);
}

.favorites-panel.active{
    right:0;
}

.favorites-header{
    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:30px;
}

.favorites-header h2{
    font-size:26px;
}

.favorites-header button{
    width:40px;
    height:40px;

    border-radius:50%;

    background:var(--red);
    color:white;

    font-size:18px;

    transition:.3s;
}

.favorites-header button:hover{
    transform:rotate(90deg);
}

#favorites-items{
    height:calc(100vh - 110px);
    overflow-y:auto;
    padding-right:5px;
}

.favorite-item{
    display:flex;
    gap:15px;

    background:var(--card);

    padding:15px;
    margin-bottom:15px;

    border-radius:16px;

    transition:.3s;
}

.favorite-item:hover{
    transform:translateX(-5px);
    box-shadow:var(--shadow);
}

.favorite-item img{
    width:85px;
    height:85px;

    object-fit:cover;

    border-radius:12px;
}

.favorite-item-info{
    flex:1;
}

.favorite-item-info h4{
    margin-bottom:8px;
    font-size:16px;
}

.favorite-item-info p{
    color:var(--green);
    font-weight:bold;
}

.favorite-item-actions{
    display:flex;
    gap:8px;
    margin-top:12px;
}

.favorite-item-actions button{
    padding:8px 12px;
    border-radius:10px;
    font-size:13px;
}

.favorite-add-cart{
    background:var(--green);
    color:black;
}

.favorite-remove{
    background:var(--red);
    color:white;
}

.empty-favorites{
    color:var(--gray);
    text-align:center;
    margin-top:50px;
    line-height:1.6;
}
/* =====================================
        CATEGORÍAS FUNCIONALES
===================================== */

.category-card{
    min-width:190px;
    height:150px;

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

    gap:16px;

    background:var(--card);

    border:2px solid transparent;
    border-radius:22px;

    color:white;

    transition:.3s;
}

.category-card i{
    font-size:38px;
    color:var(--green);
}

.category-card h3{
    position:static;
    font-size:20px;
}

.category-card:hover,
.category-card.active{
    border-color:var(--red);

    transform:translateY(-8px);

    box-shadow:
        0 15px 35px rgba(255,23,68,.22);
}
/* =====================================
        NOTIFICACIONES
===================================== */

.notification-container{
    position:fixed;

    top:110px;
    right:30px;

    display:flex;
    flex-direction:column;
    gap:12px;

    z-index:5000;

    pointer-events:none;
}


.notification{
    min-width:280px;
    max-width:360px;

    display:flex;
    align-items:center;
    gap:12px;

    padding:16px 20px;

    background:var(--card);
    color:white;

    border-left:5px solid var(--green);
    border-radius:14px;

    box-shadow:var(--shadow);

    opacity:0;

    transform:translateX(40px);

    animation:
        notificationEnter .35s ease forwards;
}


.notification.success{
    border-left-color:var(--green);
}


.notification.favorite{
    border-left-color:var(--red);
}


.notification.info{
    border-left-color:var(--blue);
}


.notification.error{
    border-left-color:#ff9800;
}


.notification i{
    font-size:21px;
}


.notification-message{
    flex:1;
    line-height:1.4;
}


.notification.hide{
    animation:
        notificationExit .3s ease forwards;
}


@keyframes notificationEnter{

    from{
        opacity:0;
        transform:translateX(40px);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }

}


@keyframes notificationExit{

    from{
        opacity:1;
        transform:translateX(0);
    }

    to{
        opacity:0;
        transform:translateX(40px);
    }

}
/* =====================================
        BOTÓN DE SONIDO
===================================== */

.sound-button{
    position:absolute;
    top:15px;
    right:15px;

    width:42px;
    height:42px;

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

    border-radius:50%;

    background:rgba(0,0,0,.65);
    color:white;

    font-size:17px;

    z-index:8;

    opacity:0;
    visibility:hidden;

    transition:.25s;
}

.game-card:hover .sound-button{
    opacity:1;
    visibility:visible;
}
.sound-button:hover,
.game-card.sound-active .sound-button{
    background: var(--green);
    color: black;
    transform: scale(1.08);
}
    /* =====================================
        PÁGINA INDIVIDUAL DEL JUEGO
===================================== */

.back-home{
    display:flex;
    align-items:center;
    gap:10px;

    color:white;
    font-weight:600;
}

.product-page{
    width:min(1200px, 90%);
    margin:0 auto;
    padding:65px 0 100px;
}

.product-hero{
    display:grid;
    grid-template-columns:1.3fr 1fr;
    gap:55px;
    align-items:center;
}

.product-media{
    width:100%;
}

.product-video,
.product-main-image{
    width:100%;
    min-height:420px;
    max-height:600px;

    display:block;
    object-fit:cover;

    border-radius:28px;

    background:#000;

    box-shadow:
        0 25px 60px rgba(0,0,0,.45);
}

.product-information{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
}

.product-tag{
    display:inline-flex;

    padding:9px 17px;

    background:var(--red);
    color:white;

    border-radius:30px;

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

    margin-bottom:16px;
}

.product-category{
    color:var(--green);
    font-weight:700;
    margin-bottom:12px;
}

.product-information h1{
    font-size:clamp(38px, 5vw, 68px);
    line-height:1.03;

    margin-bottom:22px;
}

.product-description{
    color:var(--gray);

    font-size:18px;
    line-height:1.7;

    margin-bottom:25px;
}

.product-price{
    color:var(--green);

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

    margin-bottom:30px;
}

.product-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
}

.product-buttons button{
    min-height:54px;

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

    padding:0 25px;

    border-radius:16px;

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

    transition:.25s;
}

.product-buy-button{
    background:var(--green);
    color:#05090d;
}

.product-favorite-button{
    background:var(--card);
    color:white;

    border:1px solid rgba(255,255,255,.14);
}

.product-favorite-button.active{
    background:var(--red);
    border-color:var(--red);
}

.product-buttons button:hover{
    transform:translateY(-4px);
}

.product-details-section{
    margin-top:85px;
}

.product-details-section h2{
    font-size:32px;
    margin-bottom:30px;
}

.product-details-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:18px;
}

.product-details-grid article{
    display:flex;
    flex-direction:column;
    gap:10px;

    padding:22px;

    background:var(--card);

    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
}

.product-details-grid span{
    color:var(--gray);
    font-size:14px;
}

.product-details-grid strong{
    font-size:17px;
    line-height:1.4;
}

.product-error,
.product-loading{
    min-height:60vh;

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

    gap:20px;

    text-align:center;
}

.product-error a{
    padding:13px 22px;

    background:var(--green);
    color:#05090d;

    border-radius:14px;
    font-weight:700;
}

@media (max-width:900px){

    .product-hero{
        grid-template-columns:1fr;
    }

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

}

@media (max-width:600px){

    .product-page{
        width:92%;
        padding-top:35px;
    }

    .product-video,
    .product-main-image{
        min-height:260px;
    }

    .product-information h1{
        font-size:38px;
    }

    .product-buttons{
        width:100%;
    }

    .product-buttons button{
        width:100%;
    }

    .product-details-grid{
        grid-template-columns:1fr;
    }

}
/* =====================================
   PÁGINA INDIVIDUAL DEL JUEGO
===================================== */

.product-page {
    width: min(1300px, 92%);
    margin: 0 auto;
    padding: 60px 0 100px;
}

.product-hero {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 45px;
    align-items: center;

    padding: 35px;

    background:
        radial-gradient(circle at top left, rgba(0, 255, 170, 0.2), transparent 35%),
        radial-gradient(circle at bottom right, rgba(120, 70, 255, 0.2), transparent 35%),
        linear-gradient(135deg, #0c1222, #11182c);

    border: 1px solid rgba(0, 255, 170, 0.22);
    border-radius: 28px;

    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.45),
        0 0 35px rgba(0, 255, 170, 0.08);
}

.product-media {
    width: 100%;
}

.product-media img,
.product-media video {
    width: 100%;
    min-height: 420px;
    max-height: 580px;

    display: block;
    object-fit: cover;

    border-radius: 24px;

    background: #000;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.45),
        0 0 28px rgba(0, 229, 255, 0.15);
    
    .product-gallery{
    display:flex;
    gap:12px;
    margin-top:18px;
    flex-wrap:wrap;
}

.gallery-thumbnail{
    width:95px;
    height:70px;
    border:none;
    border-radius:14px;
    overflow:hidden;
    cursor:pointer;
    background:#111;
    transition:.25s;
}
.gallery-thumbnail img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.gallery-thumbnail:hover{
    transform:translateY(-4px);
    border-color:#00ff99;
}

.gallery-thumbnail.active{
    border-color:#00ff99;
    box-shadow:0 0 18px rgba(0,255,153,.5);
}

.product-gallery-main{
    width:100%;
    margin-top:18px;
    border-radius:20px;
    display:none;
}    
}

.product-information {
    padding: 30px;

    background: rgba(9, 14, 27, 0.82);

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;

    backdrop-filter: blur(12px);
}

.product-tag {
    display: inline-block;

    padding: 8px 18px;

    background: linear-gradient(90deg, #ff2f68, #ff7a18);
    color: white;

    border-radius: 999px;

    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;

    box-shadow: 0 8px 22px rgba(255, 47, 104, 0.28);
}

.product-category {
    margin-top: 16px;

    color: #5fe7ff;
    font-weight: 700;
}

.product-information h1 {
    margin: 12px 0 18px;

    font-size: clamp(2.5rem, 5vw, 4.6rem);
    line-height: 1;

    background: linear-gradient(90deg, #ffffff, #58ffd1, #76a7ff);
    background-clip: text;
    -webkit-background-clip: text;

    color: transparent;
}

.product-description {
    margin-bottom: 24px;

    color: #d7dbea;

    font-size: 1.08rem;
    line-height: 1.75;
}

.product-price {
    display: inline-block;

    margin-bottom: 28px;
    padding: 10px 20px;

    background: linear-gradient(90deg, #2cff9c, #00d9ff);
    color: #06110c;

    border-radius: 16px;

    font-size: 2.3rem;
    font-weight: 900;

    box-shadow:
        0 12px 30px rgba(0, 217, 255, 0.2),
        0 0 25px rgba(44, 255, 156, 0.15);
}

.product-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.product-buy-button,
.product-favorite-button {
    min-height: 54px;
    padding: 0 25px;

    border: none;
    border-radius: 14px;

    font-size: 1rem;
    font-weight: 800;

    cursor: pointer;

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

.product-buy-button {
    background: linear-gradient(90deg, #20f78b, #00d9ff);
    color: #06110c;

    box-shadow: 0 12px 28px rgba(0, 217, 255, 0.22);
}

.product-favorite-button {
    background: linear-gradient(90deg, #7a5cff, #ff3e9d);
    color: white;

    box-shadow: 0 12px 28px rgba(122, 92, 255, 0.22);
}

.product-buy-button:hover,
.product-favorite-button:hover {
    transform: translateY(-3px) scale(1.02);
    filter: brightness(1.08);
}

.product-favorite-button.active {
    background: linear-gradient(90deg, #ff2f68, #ff7a18);
}

.product-details-section {
    margin-top: 55px;
    padding: 35px;

    background:
        linear-gradient(135deg, rgba(16, 24, 44, 0.96), rgba(11, 16, 31, 0.96));

    border: 1px solid rgba(116, 167, 255, 0.18);
    border-radius: 26px;

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.product-details-section h2 {
    margin-bottom: 25px;

    color: white;
    font-size: 2rem;
}

.product-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 18px;
}

.product-details-grid article {
    min-height: 125px;
    padding: 22px;

    background:
        linear-gradient(145deg, rgba(0, 229, 255, 0.12), rgba(122, 92, 255, 0.12));

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease;
}

.product-details-grid article:hover {
    transform: translateY(-5px);
    border-color: rgba(41, 255, 154, 0.5);
}

.product-details-grid span {
    display: block;
    margin-bottom: 8px;

    color: #9aa5b8;
    font-size: 0.9rem;
}

.product-details-grid strong {
    color: #ffffff;
    font-size: 1.05rem;
}

.back-home {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    padding: 10px 16px;

    background: linear-gradient(90deg, #7a5cff, #ff3e9d);
    color: white;

    border-radius: 12px;

    text-decoration: none;
    font-weight: 800;

    transition: transform 0.2s ease;
}

.back-home:hover {
    transform: translateX(-4px);
}
.product-rating{
    display:flex;
    align-items:center;
    gap:8px;
    margin:18px 0;
}

.product-stars{
    color:#ffd54a;
    font-size:1.15rem;
}

.product-rating span{
    font-weight:bold;
    color:white;
}

.product-rating small{
    color:#aeb8d4;
}

.product-price-area{
    margin:25px 0;
}

.product-old-price{
    color:#8f96ad;
    text-decoration:line-through;
    font-size:1rem;
    margin-bottom:10px;
}

.product-price-row{
    display:flex;
    align-items:center;
    gap:14px;
}

.product-discount{
    background:#ff3b5d;
    color:white;
    padding:8px 14px;
    border-radius:999px;
    font-weight:bold;
    font-size:.95rem;
}

@media (max-width: 900px) {
    .product-page {
        padding: 35px 0 70px;
    }

    .product-hero {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 24px;
    }

    .product-media img,
    .product-media video {
        min-height: 300px;
    }

    .product-information h1 {
        font-size: 2.8rem;
    }
}

@media (max-width: 600px) {
    .product-page {
        width: 94%;
        padding: 24px 0 60px;
    }

    .product-hero {
        padding: 17px;
        border-radius: 20px;
    }

    .product-information {
        padding: 22px;
    }

    .product-information h1 {
        font-size: 2.2rem;
    }

    .product-price {
        font-size: 1.8rem;
    }

    .product-buy-button,
    .product-favorite-button {
        width: 100%;
    }

    .product-details-section {
        padding: 22px;
    }
    .product-details-grid h3{
    color:#f7ffd6;
    font-size:1.1rem;
    margin-bottom:10px;
}

.product-details-grid h3 i{
    color:#21ff9a;
    margin-right:8px;
}
/* ==========================
   CHECKOUT
========================== */

.checkout-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.75);
    backdrop-filter:blur(8px);

    display:none;
    align-items:center;
    justify-content:center;

    z-index:99999;
}

.checkout-overlay.active{
    display:flex;
}

.checkout-modal{

    width:min(500px,92%);
    background:#111827;
    border:1px solid rgba(0,255,170,.25);
    border-radius:28px;
    padding:35px;

    box-shadow:
    0 30px 70px rgba(0,0,0,.5),
    0 0 45px rgba(0,255,170,.12);

    position:relative;
}

.checkout-close{

    position:absolute;
    top:18px;
    right:18px;

    width:42px;
    height:42px;

    border:none;
    border-radius:50%;

    cursor:pointer;

    background:#202938;
    color:white;
}

.checkout-icon{

    width:80px;
    height:80px;

    border-radius:50%;

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

    margin:auto;

    font-size:2rem;

    background:linear-gradient(135deg,#00d4ff,#00ffa2);
    color:#06110c;
}

.checkout-modal h2{

    margin-top:22px;
    text-align:center;

    color:white;
}

.checkout-description{

    text-align:center;
    color:#9ca3af;
    margin:12px 0 30px;
}

.checkout-summary{

    background:#0b1220;

    border-radius:18px;
    padding:18px;

    margin-bottom:25px;
}

.checkout-summary div{

    display:flex;
    justify-content:space-between;
    margin-bottom:12px;
}

.checkout-summary div:last-child{
    margin-bottom:0;
}

.checkout-summary span{
    color:#9ca3af;
}

.checkout-summary strong{
    color:#fff;
}

.checkout-label{

    display:block;
    margin-bottom:8px;

    color:white;
    font-weight:700;
}

.checkout-input{

    width:100%;
    padding:14px 16px;

    border-radius:14px;

    border:1px solid rgba(255,255,255,.12);

    background:#111827;
    color:white;

    margin-bottom:20px;
}

.checkout-security{

    display:flex;
    gap:10px;

    color:#8efac5;
    font-size:.95rem;

    margin-bottom:25px;
}

.checkout-pay{

    width:100%;
    padding:16px;

    border:none;
    border-radius:18px;

    cursor:pointer;

    font-size:1rem;
    font-weight:800;

    background:linear-gradient(90deg,#00d4ff,#00ffa2);
    color:#06110c;

    transition:.25s;
}

.checkout-pay:hover{

    transform:translateY(-3px);
}
}
/* CORRECCIÓN FINAL DEL CHECKOUT */

.checkout-overlay{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100vh !important;

    display:none !important;
    align-items:center !important;
    justify-content:center !important;

    background:rgba(0,0,0,.82) !important;
    backdrop-filter:blur(8px);

    z-index:999999 !important;
}

.checkout-overlay.active{
    display:flex !important;
}

.checkout-modal{
    display:block !important;
    position:relative !important;

    width:min(500px,92%) !important;
    max-height:90vh;
    overflow-y:auto;

    padding:35px !important;
    border-radius:28px !important;

    background:#111827 !important;
    color:white !important;

    border:1px solid rgba(0,255,170,.35) !important;

    box-shadow:
        0 30px 80px rgba(0,0,0,.75),
        0 0 40px rgba(0,255,170,.18) !important;

    z-index:1000000 !important;
}
.checkout-close{
    position:absolute !important;
    top:18px !important;
    right:18px !important;

    width:42px !important;
    height:42px !important;

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

    border:none !important;
    border-radius:50% !important;

    background:#ff315f !important;
    color:white !important;

    font-size:1.2rem !important;
    cursor:pointer !important;
}

.checkout-icon{
    width:78px !important;
    height:78px !important;
    margin:0 auto 20px !important;

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

    border-radius:50% !important;
    background:linear-gradient(135deg,#00e676,#00cfff) !important;

    color:#07110d !important;
    font-size:2rem !important;
}

.checkout-modal h2{
    text-align:center !important;
    font-size:2rem !important;
    margin-bottom:10px !important;
}

.checkout-description{
    text-align:center !important;
    color:#aeb8c9 !important;
    margin-bottom:25px !important;
}

.checkout-summary{
    background:#0b1220 !important;
    padding:18px !important;
    border-radius:16px !important;
    margin-bottom:22px !important;
}

.checkout-summary div{
    display:flex !important;
    justify-content:space-between !important;
    margin-bottom:12px !important;
}

.checkout-label{
    display:block !important;
    margin-bottom:8px !important;
    font-weight:700 !important;
}

.checkout-input{
    width:100% !important;
    padding:14px 16px !important;

    border:none !important;
    border-radius:14px !important;

    background:#0b1220 !important;
    color:white !important;

    margin-bottom:18px !important;
}

.checkout-security{
    display:flex !important;
    gap:10px !important;
    align-items:flex-start !important;

    color:#8efac5 !important;
    margin-bottom:22px !important;
}

.checkout-pay{
    width:100% !important;
    padding:16px !important;

    border:none !important;
    border-radius:16px !important;

    background:linear-gradient(90deg,#00e676,#00cfff) !important;
    color:#07110d !important;

    font-weight:800 !important;
    font-size:1rem !important;
    cursor:pointer !important;
}
.checkout-modal{
    scrollbar-width:none;
}

.checkout-modal::-webkit-scrollbar{
    display:none;
}
/* =====================================
   DATOS DE TRANSFERENCIA
===================================== */

.transfer-info{
    background:#0b1220;
    border:1px solid rgba(0,230,118,.25);
    border-radius:18px;
    padding:20px;
    margin-bottom:22px;
}

.transfer-info h3{
    display:flex;
    align-items:center;
    gap:10px;
    color:white;
    margin-bottom:18px;
}

.transfer-info h3 i{
    color:#00e676;
}

.transfer-row{
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:12px 0;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.transfer-row:last-child{
    border-bottom:none;
}

.transfer-row span{
    color:#9ca3af;
}

.transfer-row strong{
    color:white;
    text-align:right;
}

.transfer-clabe-row{
    align-items:center;
}

.transfer-clabe-row > div{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.copy-clabe-button{
    display:flex;
    align-items:center;
    gap:8px;

    padding:10px 14px;

    border:none;
    border-radius:12px;

    background:linear-gradient(90deg,#7a5cff,#ff3e9d);
    color:white;

    font-weight:700;
    cursor:pointer;

    transition:.25s;
}

.copy-clabe-button:hover{
    transform:translateY(-3px);
    filter:brightness(1.08);
}
/* =====================================
   NÚMERO DE WHATSAPP DEL CLIENTE
===================================== */

.checkout-whatsapp{
    margin-bottom:20px;
}

.checkout-whatsapp label{
    display:flex;
    align-items:center;
    gap:9px;

    margin-bottom:9px;

    color:white;
    font-weight:700;
}

.checkout-whatsapp label i{
    color:#25d366;
    font-size:1.2rem;
}

.checkout-whatsapp-input{
    width:100%;
    padding:14px 16px;

    border:1px solid rgba(37,211,102,.28);
    border-radius:14px;

    background:#0b1220;
    color:white;

    font-size:1rem;
    outline:none;

    transition:.25s;
}

.checkout-whatsapp-input:focus{
    border-color:#25d366;

    box-shadow:
        0 0 0 3px rgba(37,211,102,.12);
}

.checkout-whatsapp small{
    display:block;

    margin-top:8px;

    color:#9ca3af;
    line-height:1.4;
}
/* =====================================
   FLECHAS DE LOS CARRUSELES
===================================== */

.games-section {
    position: relative;
}

.games-arrow {
    position: absolute;
    top: 58%;
    transform: translateY(-50%);
    z-index: 20;

    width: 52px;
    height: 52px;

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

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;

    background: rgba(17, 24, 39, 0.92);
    color: white;

    font-size: 1.25rem;
    cursor: pointer;

    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.45);

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        color 0.25s ease,
        opacity 0.25s ease;
}

.games-arrow:hover {
    transform: translateY(-50%) scale(1.12);
    background: #00e676;
    color: #07110d;
}

.games-arrow:active {
    transform: translateY(-50%) scale(0.96);
}

.games-arrow-left {
    left: 12px;
}

.games-arrow-right {
    right: 12px;
}
/* =====================================
   SECCIÓN EXPANDIDA DE JUEGOS
===================================== */

.games-slider.show-all {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(240px, 1fr));

    gap: 26px;

    overflow: visible;
    padding: 20px 5px 30px;
}

.games-slider.show-all .game-card {
    width: 100%;
    min-width: 0;
}

.games-section.section-expanded .games-arrow {
    display: none;
}

.view-all-button {
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;

    padding: 10px 16px;

    background: #151d2b;
    color: white;

    font-weight: 700;
    cursor: pointer;

    transition: 0.25s ease;
}

.view-all-button:hover {
    transform: translateY(-2px);
    background: #00e676;
    color: #07110d;
}
/* =====================================
   MOSTRAR SOLO UNA SECCIÓN
===================================== */

.games-section.section-hidden {
    display: none;
}

.games-section.section-expanded {
    min-height: calc(100vh - 100px);
    padding-top: 35px;
}

.games-section.section-expanded .games-arrow {
    display: none;
}

.games-section.section-expanded .games-slider {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(250px, 1fr));

    gap: 26px;
    overflow: visible;
    padding: 25px 5px 45px;
}

.games-section.section-expanded .game-card {
    width: 100%;
    min-width: 0;
}
/* =====================================
   CATEGORÍAS DE FRANQUICIAS
===================================== */

.franchise-categories {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 34px;
    flex-wrap: wrap;
    padding: 35px 20px;
}

.franchise-category {
    width: 165px;
    height: 165px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;

    border: 2px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 25%,
            rgba(255,255,255,.12),
            transparent 35%
        ),
        #141c29;

    color: white;
    cursor: pointer;

    box-shadow:
        0 16px 35px rgba(0,0,0,.35);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease,
        background .3s ease;
}

.franchise-icon {
    font-size: 3.2rem;
    transition:
        transform .3s ease,
        filter .3s ease;
}

.franchise-category strong {
    font-size: 1.15rem;
}

.franchise-category small {
    color: #9ca3af;
    font-size: .8rem;
}

.franchise-category:hover {
    transform: translateY(-12px) scale(1.08);
}

.franchise-category:hover .franchise-icon {
    transform: scale(1.18) rotate(-5deg);
    filter: drop-shadow(0 0 12px currentColor);
}

/* Mario */
.mario-category:hover {
    background:
        radial-gradient(circle, #ff5a5a 0%, #b91c1c 72%);
    border-color: #ff8181;
    box-shadow:
        0 18px 42px rgba(0,0,0,.45),
        0 0 28px rgba(255,50,50,.75);
}

/* Zelda */
.zelda-category:hover {
    background:
        radial-gradient(circle, #ffd95a 0%, #8a6500 75%);
    border-color: #ffe59b;
    box-shadow:
        0 18px 42px rgba(0,0,0,.45),
        0 0 28px rgba(255,205,50,.7);
}

/* Pokémon */
.pokemon-category:hover {
    background:
        radial-gradient(circle, #56b7ff 0%, #174f9b 75%);
    border-color: #a8dcff;
    box-shadow:
        0 18px 42px rgba(0,0,0,.45),
        0 0 28px rgba(45,160,255,.75);
}

/* Metroid */
.metroid-category:hover {
    background:
        radial-gradient(circle, #ff8b32 0%, #7c2100 75%);
    border-color: #ffb27a;
    box-shadow:
        0 18px 42px rgba(0,0,0,.45),
        0 0 28px rgba(255,100,20,.75);
}

.franchise-category:hover small {
    color: white;
}
/* ==========================
   CATEGORÍAS PREMIUM
========================== */

.category-container{
    display:flex;
    gap:20px;
    overflow-x:auto;
    scroll-behavior:smooth;
    padding:20px 5px;
}

.category-container::-webkit-scrollbar{
    display:none;
}

.category-card{
    min-width:180px;
    height:170px;

    border-radius:28px;

    background:linear-gradient(145deg,#171d27,#0d1016);

    border:1px solid rgba(255,255,255,.08);

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

    transition:.35s;

    cursor:pointer;

    position:relative;

    overflow:hidden;
}

.category-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:radial-gradient(circle at top,
    rgba(0,255,160,.18),
    transparent 65%);

    opacity:0;

    transition:.35s;
}

.category-card:hover{

    transform:translateY(-10px) scale(1.05);

    border-color:#00ff99;

    box-shadow:
    0 0 30px rgba(0,255,150,.35);

}

.category-card:hover::before{

    opacity:1;

}

.category-card i{

    font-size:48px;

    margin-bottom:18px;

    color:#00ff99;

    transition:.35s;

}

.category-card:hover i{

    transform:scale(1.25) rotate(6deg);

    text-shadow:0 0 25px #00ff99;

}

.category-card span{

    font-size:20px;

    font-weight:700;

    color:white;

}
.category-icon {
    font-size: 48px;
    margin-bottom: 16px;
    transition: transform .35s ease, filter .35s ease;
}

.category-card:hover .category-icon {
    transform: scale(1.25) rotate(-6deg);
}

/* Mario */
.mario-category:hover {
    border-color: #ff4d4d;
    background: radial-gradient(circle, #ff5f5f 0%, #8f1111 75%);
    box-shadow:
        0 0 20px rgba(255, 70, 70, .8),
        0 0 45px rgba(255, 40, 40, .45);
}

/* Zelda */
.zelda-category:hover {
    border-color: #ffd84d;
    background: radial-gradient(circle, #ffdc62 0%, #7a5900 75%);
    box-shadow:
        0 0 20px rgba(255, 215, 70, .8),
        0 0 45px rgba(255, 200, 40, .45);
}

/* Pokémon */
.pokemon-category:hover {
    border-color: #4db8ff;
    background: radial-gradient(circle, #61c4ff 0%, #124e93 75%);
    box-shadow:
        0 0 20px rgba(70, 180, 255, .8),
        0 0 45px rgba(40, 140, 255, .45);
}

/* Metroid */
.metroid-category:hover {
    border-color: #ff8a3d;
    background: radial-gradient(circle, #ff984f 0%, #7a2600 75%);
    box-shadow:
        0 0 20px rgba(255, 130, 55, .8),
        0 0 45px rgba(255, 90, 25, .45);
}
/* =====================================
   RESULTADOS DE FRANQUICIAS
===================================== */

.franchise-category.active {
    transform: translateY(-10px) scale(1.08);
    border-color: #00e676;
    box-shadow:
        0 0 18px rgba(0, 230, 118, .8),
        0 0 42px rgba(0, 230, 118, .35);
}

.franchise-results {
    padding-top: 45px;
}

.franchise-results .games-slider {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(250px, 1fr));
    gap: 26px;
    overflow: visible;
}

.back-to-store-button {
    padding: 11px 18px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 12px;
    background: #151d2b;
    color: white;
    font-weight: 700;
    cursor: pointer;
    transition: .25s ease;
}

.back-to-store-button:hover {
    background: #00e676;
    color: #07110d;
    transform: translateY(-2px);
}

.no-franchise-games {
    grid-column: 1 / -1;
    padding: 45px;
    text-align: center;
    color: #aab2c0;
    font-size: 1.1rem;
}
.luigi-category:hover{
    border-color:#00ff66;
    background:radial-gradient(circle,#31ff8c 0%,#0d5a24 75%);
    box-shadow:
        0 0 22px rgba(0,255,120,.8),
        0 0 45px rgba(0,255,120,.45);
}
.sports-category:hover{
    border-color:#00c8ff;
    background:radial-gradient(circle,#39d8ff 0%,#004d75 75%);
    box-shadow:
        0 0 22px rgba(0,200,255,.8),
        0 0 45px rgba(0,200,255,.45);
}
/* =====================================
   DATOS DEL CLIENTE EN EL CHECKOUT
===================================== */

.checkout-name,
.checkout-whatsapp,
.checkout-email,
.checkout-comments {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 18px;
}

.checkout-name label,
.checkout-whatsapp label,
.checkout-email label,
.checkout-comments label {
    display: flex;
    align-items: center;
    gap: 9px;

    color: #f5f7fb;
    font-size: 15px;
    font-weight: 700;
}

.checkout-name label i,
.checkout-email label i,
.checkout-comments label i {
    color: #00e676;
}

.checkout-name input,
.checkout-whatsapp input,
.checkout-email input,
.checkout-comments textarea {
    width: 100%;
    box-sizing: border-box;

    padding: 14px 16px;

    border: 1px solid rgba(0, 230, 118, 0.35);
    border-radius: 14px;

    background: #0b1425;
    color: #ffffff;

    font-family: inherit;
    font-size: 15px;

    outline: none;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;
}

.checkout-comments textarea {
    min-height: 95px;
    resize: vertical;
    line-height: 1.5;
}

.checkout-name input::placeholder,
.checkout-whatsapp input::placeholder,
.checkout-email input::placeholder,
.checkout-comments textarea::placeholder {
    color: #738096;
    opacity: 1;
}

.checkout-name input:hover,
.checkout-whatsapp input:hover,
.checkout-email input:hover,
.checkout-comments textarea:hover {
    border-color: rgba(0, 230, 118, 0.65);
    background: #0d182a;
}

.checkout-name input:focus,
.checkout-whatsapp input:focus,
.checkout-email input:focus,
.checkout-comments textarea:focus {
    border-color: #00e676;

    background: #0d182a;

    box-shadow:
        0 0 0 3px rgba(0, 230, 118, 0.12),
        0 0 18px rgba(0, 230, 118, 0.15);
}

.checkout-whatsapp small {
    color: #91a0b8;
    font-size: 12px;
    line-height: 1.5;
}

.optional-text {
    color: #91a0b8;
    font-size: 12px;
    font-weight: 500;
}
/* =========================================
   PANEL DE ADMINISTRACIÓN
========================================= */

.admin-body {
    margin: 0;
    min-height: 100vh;
    background: #f4f6f8;
    color: #202124;
    font-family: Arial, Helvetica, sans-serif;
}

.admin-header {
    position: sticky;
    top: 0;
    z-index: 100;

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

    padding: 18px 6%;
    background: #ffffff;
    border-bottom: 1px solid #e4e7eb;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.06);
}

.admin-logo {
    display: flex;
    align-items: center;
    gap: 14px;
}

.admin-logo > i {
    display: grid;
    place-items: center;

    width: 48px;
    height: 48px;

    border-radius: 14px;
    background: linear-gradient(135deg, #ff6b00, #ff2d2d);
    color: #ffffff;
    font-size: 22px;
}

.admin-logo h1 {
    margin: 0;
    font-size: 22px;
    color: #171717;
}

.admin-logo p {
    margin: 4px 0 0;
    color: #777777;
    font-size: 14px;
}

.admin-store-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    padding: 12px 18px;
    border-radius: 10px;

    background: #f1f3f5;
    color: #222222;
    font-weight: 700;
    text-decoration: none;

    transition: 0.25s ease;
}

.admin-store-link:hover {
    background: #ff5a00;
    color: #ffffff;
    transform: translateY(-2px);
}

.admin-main {
    width: min(1180px, 90%);
    margin: 0 auto;
    padding: 45px 0 70px;
}

.admin-welcome {
    margin-bottom: 30px;
}

.admin-label {
    display: inline-block;
    margin-bottom: 10px;
    padding: 7px 13px;

    border-radius: 999px;
    background: #fff0e6;
    color: #e64d00;

    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.admin-welcome h2 {
    margin: 0 0 10px;
    font-size: clamp(28px, 4vw, 42px);
}

.admin-welcome p {
    max-width: 680px;
    margin: 0;
    color: #697077;
    line-height: 1.6;
}

/* =========================================
   TARJETA DE BÚSQUEDA
========================================= */

.admin-search-card,
.admin-order-result,
.admin-orders-list-card {
    margin-bottom: 28px;
    padding: 26px;

    border: 1px solid #e5e8eb;
    border-radius: 18px;
    background: #ffffff;

    box-shadow: 0 8px 30px rgba(20, 25, 30, 0.06);
}

.admin-search-header h3,
.admin-card-title h3 {
    margin: 0 0 7px;
    font-size: 20px;
}

.admin-search-header h3 i,
.admin-card-title h3 i {
    margin-right: 7px;
    color: #ff5a00;
}

.admin-search-header p,
.admin-card-title p {
    margin: 0;
    color: #737b83;
}

.admin-search-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    margin-top: 22px;
}

.admin-search-form input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;

    padding: 15px 17px;
    border: 2px solid #e0e3e6;
    border-radius: 11px;
    outline: none;

    font-size: 16px;
    text-transform: uppercase;

    transition: 0.2s ease;
}

.admin-search-form input:focus {
    border-color: #ff5a00;
    box-shadow: 0 0 0 4px rgba(255, 90, 0, 0.12);
}

.admin-search-form button {
    padding: 0 23px;
    border: none;
    border-radius: 11px;

    background: linear-gradient(135deg, #ff6500, #ff3d00);
    color: #ffffff;

    font-size: 15px;
    font-weight: 800;
    cursor: pointer;

    transition: 0.25s ease;
}

.admin-search-form button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(255, 80, 0, 0.25);
}

.admin-search-message {
    min-height: 20px;
    margin: 14px 0 0;
    font-weight: 700;
}

.admin-search-message.success {
    color: #18864b;
}

.admin-search-message.error {
    color: #d93636;
}

/* =========================================
   RESULTADO DEL PEDIDO
========================================= */

.admin-order-result[hidden] {
    display: none;
}

.admin-order-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    margin-bottom: 25px;
    padding-bottom: 22px;
    border-bottom: 1px solid #eceff1;
}

.admin-order-top span:first-child {
    display: block;
    margin-bottom: 6px;
    color: #71777d;
    font-size: 14px;
}

.admin-order-top h2 {
    margin: 0;
    font-size: clamp(20px, 3vw, 30px);
}

.admin-status,
.admin-list-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 8px 13px;
    border-radius: 999px;

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

.admin-status.pending,
.admin-list-status.pending {
    background: #fff4d6;
    color: #9a6400;
}

.admin-status.delivered,
.admin-list-status.delivered {
    background: #dff8e9;
    color: #147541;
}

.admin-information-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 22px;
}

.admin-info-card {
    display: flex;
    align-items: center;
    gap: 13px;

    min-width: 0;
    padding: 17px;

    border: 1px solid #e7e9ec;
    border-radius: 14px;
    background: #fafbfc;
}

.admin-info-icon {
    flex: 0 0 auto;

    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    border-radius: 12px;
    background: #fff0e6;
    color: #ff5a00;
}

.admin-info-card span {
    display: block;
    margin-bottom: 4px;
    color: #7a8188;
    font-size: 13px;
}

.admin-info-card strong {
    display: block;
    overflow-wrap: anywhere;
    font-size: 15px;
}

/* =========================================
   PRODUCTOS DEL PEDIDO
========================================= */

.admin-products-card,
.admin-payment-card,
.admin-comments-card {
    margin-top: 20px;
    padding: 21px;

    border: 1px solid #e7eaed;
    border-radius: 15px;
    background: #fafbfc;
}

.admin-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.admin-card-title > span {
    padding: 7px 11px;
    border-radius: 999px;
    background: #eceff2;
    color: #555d64;
    font-size: 13px;
    font-weight: 700;
}

.admin-product-item {
    display: grid;
    grid-template-columns: 65px 1fr auto;
    align-items: center;
    gap: 15px;

    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e1e5e8;
}

.admin-product-item img,
.admin-product-placeholder {
    width: 65px;
    height: 65px;
    border-radius: 11px;
    object-fit: cover;
}

.admin-product-placeholder {
    display: grid;
    place-items: center;
    background: #eceff2;
    color: #777f86;
    font-size: 22px;
}

.admin-product-information strong,
.admin-product-information span {
    display: block;
}

.admin-product-information span {
    margin-top: 5px;
    color: #767e85;
    font-size: 14px;
}

.admin-product-price {
    color: #f15100;
    white-space: nowrap;
}

.admin-payment-card {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.admin-payment-card span {
    display: block;
    margin-bottom: 7px;
    color: #747c83;
    font-size: 14px;
}

.admin-payment-card strong {
    font-size: 20px;
}

.admin-comments-card h3 {
    margin: 0 0 10px;
    font-size: 17px;
}

.admin-comments-card h3 i {
    margin-right: 6px;
    color: #ff5a00;
}

.admin-comments-card p {
    margin: 0;
    color: #626a71;
    line-height: 1.6;
}

/* =========================================
   BOTONES DE ESTADO
========================================= */

.admin-order-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

.admin-deliver-button,
.admin-pending-button,
.admin-refresh-button,
.admin-view-order-button {
    border: none;
    border-radius: 10px;

    padding: 12px 17px;

    font-weight: 800;
    cursor: pointer;

    transition: 0.2s ease;
}

.admin-deliver-button {
    background: #198754;
    color: #ffffff;
}

.admin-pending-button {
    background: #f0ad20;
    color: #292000;
}

.admin-deliver-button:hover,
.admin-pending-button:hover,
.admin-refresh-button:hover,
.admin-view-order-button:hover {
    transform: translateY(-2px);
}

.admin-deliver-button:disabled,
.admin-pending-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}

/* =========================================
   LISTA DE PEDIDOS
========================================= */

.admin-orders-list-card .admin-card-title {
    margin-bottom: 20px;
}

.admin-refresh-button {
    background: #eceff2;
    color: #333a40;
}

.admin-order-list-item {
    padding: 17px 0;
    border-top: 1px solid #eceff1;
}

.admin-order-list-main {
    display: grid;
    grid-template-columns: 1.2fr 1fr auto auto;
    align-items: center;
    gap: 16px;
}

.admin-order-list-main strong,
.admin-order-list-main span {
    display: block;
}

.admin-order-list-main > div:first-child span,
.admin-order-list-total span {
    margin-top: 5px;
    color: #747c83;
    font-size: 13px;
}

.admin-order-list-total {
    text-align: right;
}

.admin-view-order-button {
    background: #ff5a00;
    color: #ffffff;
}

.admin-empty-orders,
.admin-empty-products {
    margin: 20px 0 0;
    padding: 20px;

    border-radius: 12px;
    background: #f2f4f6;
    color: #747c83;

    text-align: center;
}

/* =========================================
   NOTIFICACIONES DEL ADMIN
========================================= */

.notification-container {
    position: fixed;
    top: 85px;
    right: 22px;
    z-index: 1000;

    display: flex;
    flex-direction: column;
    gap: 10px;
}

.notification {
    display: flex;
    align-items: center;
    gap: 10px;

    min-width: 260px;
    padding: 14px 17px;

    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.17);

    opacity: 0;
    transform: translateX(25px);
    transition: 0.3s ease;
}

.notification.show {
    opacity: 1;
    transform: translateX(0);
}

.notification.success {
    border-left: 5px solid #198754;
}

.notification.error {
    border-left: 5px solid #d93636;
}

/* =========================================
   PANEL RESPONSIVO
========================================= */

@media (max-width: 950px) {
    .admin-information-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .admin-order-list-main {
        grid-template-columns: 1fr 1fr;
    }

    .admin-order-list-total {
        text-align: left;
    }
}

@media (max-width: 650px) {
    .admin-header {
        align-items: flex-start;
        flex-direction: column;
        padding: 16px 5%;
    }

    .admin-store-link {
        width: 100%;
        box-sizing: border-box;
    }

    .admin-main {
        width: 92%;
        padding-top: 30px;
    }

    .admin-search-card,
    .admin-order-result,
    .admin-orders-list-card {
        padding: 18px;
    }

    .admin-search-form {
        grid-template-columns: 1fr;
    }

    .admin-search-form button {
        min-height: 49px;
    }

    .admin-order-top {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-information-grid,
    .admin-payment-card {
        grid-template-columns: 1fr;
    }

    .admin-product-item {
        grid-template-columns: 55px 1fr;
    }

    .admin-product-item img,
    .admin-product-placeholder {
        width: 55px;
        height: 55px;
    }

    .admin-product-price {
        grid-column: 2;
    }

    .admin-card-title {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-order-list-main {
        grid-template-columns: 1fr;
    }

    .admin-order-list-total {
        text-align: left;
    }

    .admin-view-order-button {
        width: 100%;
    }

    .notification-container {
        right: 4%;
        left: 4%;
    }

    .notification {
        min-width: 0;
    }
}
/* =========================================
   RESULTADO DE COMPRA Y FOLIO
========================================= */

.purchase-success-overlay {
    position: fixed;
    inset: 0;
    z-index: 6000;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 20px;
    background: rgba(10, 13, 18, 0.82);
    backdrop-filter: blur(8px);
}

.purchase-success-overlay.active {
    display: flex;
}

.purchase-success-modal {
    width: min(620px, 100%);
    max-height: 92vh;
    overflow-y: auto;

    padding: 34px;
    border-radius: 24px;
    background: #ffffff;

    text-align: center;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.4);

    animation: purchaseModalAppear 0.38s ease;
}

@keyframes purchaseModalAppear {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.purchase-success-animation {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.purchase-success-circle {
    display: grid;
    place-items: center;

    width: 82px;
    height: 82px;

    border-radius: 50%;
    background: linear-gradient(135deg, #22c55e, #15803d);
    color: #ffffff;

    font-size: 38px;
    box-shadow: 0 12px 30px rgba(34, 197, 94, 0.3);

    animation: purchaseCheckBounce 0.7s ease;
}

@keyframes purchaseCheckBounce {
    0% {
        transform: scale(0);
    }

    60% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1);
    }
}

.purchase-success-badge {
    display: inline-block;

    padding: 7px 14px;
    border-radius: 999px;

    background: #dcfce7;
    color: #166534;

    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.purchase-success-modal h2 {
    margin: 17px 0 8px;

    color: #171717;
    font-size: clamp(28px, 5vw, 40px);
}

.purchase-success-text {
    margin: 0 0 22px;

    color: #687078;
    line-height: 1.6;
}

.purchase-important-alert {
    display: flex;
    align-items: flex-start;
    gap: 14px;

    margin-bottom: 22px;
    padding: 18px;

    border: 2px solid #ef4444;
    border-radius: 15px;
    background: #fff1f2;

    color: #7f1d1d;
    text-align: left;
}

.purchase-important-alert > i {
    flex: 0 0 auto;

    margin-top: 3px;
    color: #dc2626;
    font-size: 25px;
}

.purchase-important-alert strong {
    display: block;
    margin-bottom: 6px;
    font-size: 16px;
}

.purchase-important-alert p {
    margin: 0;
    line-height: 1.5;
}

.purchase-folio-container {
    padding: 23px 18px;

    border: 3px dashed #ff5a00;
    border-radius: 17px;
    background: #fff4ec;
}

.purchase-folio-container > span {
    display: block;
    margin-bottom: 10px;

    color: #666d73;
    font-size: 14px;
    font-weight: 700;
}

.purchase-folio-container > strong {
    display: block;

    margin-bottom: 17px;
    color: #e94f00;

    font-size: clamp(24px, 6vw, 38px);
    letter-spacing: 1.5px;
    overflow-wrap: anywhere;
}

.purchase-copy-folio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 12px 18px;
    border: none;
    border-radius: 11px;

    background: #ff5a00;
    color: #ffffff;

    font-weight: 800;
    cursor: pointer;

    transition: 0.2s ease;
}

.purchase-copy-folio:hover {
    transform: translateY(-2px);
    box-shadow: 0 9px 20px rgba(255, 90, 0, 0.25);
}

.purchase-information-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;

    margin: 20px 0;
}

.purchase-information-card {
    padding: 15px;

    border: 1px solid #e5e7eb;
    border-radius: 13px;
    background: #f8fafc;

    text-align: left;
}

.purchase-information-card span,
.purchase-information-card strong {
    display: block;
}

.purchase-information-card span {
    margin-bottom: 6px;

    color: #737b83;
    font-size: 13px;
}

.purchase-information-card strong {
    color: #23272b;
    overflow-wrap: anywhere;
}

.purchase-pending-status {
    color: #a16207 !important;
}

.purchase-actions {
    display: grid;
    gap: 11px;
}

.purchase-whatsapp-button,
.purchase-download-button,
.purchase-view-button,
.purchase-close-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    width: 100%;

    padding: 14px 18px;
    border: none;
    border-radius: 12px;

    font-size: 15px;
    font-weight: 800;
    cursor: pointer;

    transition: 0.2s ease;
}

.purchase-whatsapp-button {
    background: #25d366;
    color: #ffffff;
}

.purchase-download-button {
    background: #2563eb;
    color: #ffffff;
}

.purchase-view-button {
    background: #f1f3f5;
    color: #252a2f;
}

.purchase-close-button {
    margin-top: 13px;

    background: #20242a;
    color: #ffffff;
}

.purchase-whatsapp-button:hover,
.purchase-download-button:hover,
.purchase-view-button:hover,
.purchase-close-button:hover:not(:disabled) {
    transform: translateY(-2px);
}

.purchase-close-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.purchase-confirm-save {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    margin-top: 20px;
    padding: 15px;

    border-radius: 12px;
    background: #f8fafc;

    color: #454c52;
    text-align: left;
    cursor: pointer;
}

.purchase-confirm-save input {
    flex: 0 0 auto;

    width: 18px;
    height: 18px;
    margin-top: 2px;

    accent-color: #ff5a00;
}

.purchase-close-warning {
    margin: 12px 0 0;

    color: #777f86;
    font-size: 12px;
    line-height: 1.5;
}

body.purchase-modal-open {
    overflow: hidden;
}

/* =========================================
   RESPONSIVO
========================================= */

@media (max-width: 600px) {
    .purchase-success-modal {
        padding: 25px 18px;
    }

    .purchase-information-grid {
        grid-template-columns: 1fr;
    }

    .purchase-important-alert {
        padding: 15px;
    }
}
/* =========================================
   CORRECCIÓN DEFINITIVA DEL COMPROBANTE
========================================= */

#purchase-success-overlay {
    display: none;
}

#purchase-success-overlay.active {
    position: fixed !important;
    inset: 0 !important;
    z-index: 999999 !important;

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

    width: 100% !important;
    height: 100% !important;
    padding: 20px !important;
    box-sizing: border-box !important;

    visibility: visible !important;
    opacity: 1 !important;

    background: rgba(4, 9, 16, 0.94) !important;
    backdrop-filter: blur(10px);
}

#purchase-success-overlay.active .purchase-success-modal {
    position: relative !important;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    width: min(680px, 100%) !important;
    max-height: calc(100vh - 40px) !important;
    overflow-y: auto !important;

    transform: none;
}
/* ==================================================
   COMPROBANTE FINAL — ESTILO TIENDA DE CONSOLA
================================================== */

#purchase-success-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;

    display: none;
    align-items: flex-start;
    justify-content: center;

    overflow-y: auto;
    padding: 35px 18px;

    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(230, 0, 18, 0.3),
            transparent 42%
        ),
        rgba(5, 8, 14, 0.94);

    backdrop-filter: blur(16px);
}

#purchase-success-overlay.active {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Tarjeta principal */

.purchase-success-modal {
    position: relative;

    width: min(720px, 100%);
    min-height: auto;
    margin: auto 0;

    overflow: hidden;

    padding: 0 38px 34px;

    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 26px;

    background: #ffffff;
    color: #181b20;

    text-align: center;

    box-shadow:
        0 35px 100px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(0, 0, 0, 0.06);

    animation:
        comprobanteEntrada 0.45s
        cubic-bezier(0.18, 0.85, 0.3, 1.1);
}

/* Franja superior */

.purchase-success-modal::before {
    content: "";

    display: block;

    height: 10px;
    margin: 0 -38px 28px;

    background:
        linear-gradient(
            90deg,
            #e60012 0%,
            #ff2436 55%,
            #ff6a3d 100%
        );
}

@keyframes comprobanteEntrada {
    from {
        opacity: 0;
        transform: translateY(25px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Icono de compra completada */

.purchase-success-animation {
    display: flex;
    justify-content: center;

    margin-bottom: 15px;
}

.purchase-success-circle {
    position: relative;

    display: grid;
    place-items: center;

    width: 82px;
    height: 82px;

    border: 7px solid #e9faef;
    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #23d366,
            #109a43
        );

    color: #ffffff;
    font-size: 35px;

    box-shadow:
        0 13px 28px rgba(16, 154, 67, 0.28);

    animation:
        iconoCompraEntrada 0.55s
        cubic-bezier(0.2, 1.4, 0.4, 1);
}

@keyframes iconoCompraEntrada {
    from {
        opacity: 0;
        transform: scale(0.4) rotate(-15deg);
    }

    to {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}

/* Etiqueta */

.purchase-success-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 7px 15px;

    border-radius: 999px;

    background: #e6f8ec;
    color: #12753a;

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

    letter-spacing: 0.7px;
    text-transform: uppercase;
}

/* Títulos */

.purchase-success-modal h2 {
    margin: 18px 0 7px;

    color: #15171b;

    font-size: clamp(29px, 5vw, 42px);
    font-weight: 900;
    line-height: 1.08;
}

.purchase-success-text {
    max-width: 520px;
    margin: 0 auto 23px;

    color: #69717b;

    font-size: 15px;
    line-height: 1.55;
}

/* Aviso importante */

.purchase-important-alert {
    display: grid;
    grid-template-columns: 42px 1fr;
    align-items: flex-start;
    gap: 14px;

    margin-bottom: 22px;
    padding: 17px 19px;

    border: 1px solid #ffc1c1;
    border-left: 6px solid #e60012;
    border-radius: 15px;

    background: #fff3f3;
    color: #8f171d;

    text-align: left;
}

.purchase-important-alert > i {
    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

    border-radius: 11px;

    background: #ffe1e2;
    color: #e60012;

    font-size: 19px;
}

.purchase-important-alert strong {
    display: block;

    margin-bottom: 5px;

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

.purchase-important-alert p {
    margin: 0;

    font-size: 14px;
    line-height: 1.5;
}

/* Caja principal del folio */

.purchase-folio-container {
    position: relative;

    margin-bottom: 19px;
    padding: 25px 20px;

    overflow: hidden;

    border: 2px solid #e60012;
    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #fff5f5,
            #ffffff
        );

    box-shadow:
        0 12px 30px rgba(230, 0, 18, 0.11);
}

.purchase-folio-container::before,
.purchase-folio-container::after {
    content: "";

    position: absolute;
    top: 50%;

    width: 28px;
    height: 28px;

    border-radius: 50%;
    background: #ffffff;

    transform: translateY(-50%);
}

.purchase-folio-container::before {
    left: -16px;
}

.purchase-folio-container::after {
    right: -16px;
}

.purchase-folio-container > span {
    display: block;

    margin-bottom: 9px;

    color: #737b84;

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

    letter-spacing: 0.8px;
    text-transform: uppercase;
}

#purchase-folio-number {
    display: block;

    margin-bottom: 17px;

    color: #e60012;

    font-size: clamp(27px, 6vw, 43px);
    font-weight: 950;

    letter-spacing: 2px;
    line-height: 1.1;

    overflow-wrap: anywhere;
}

/* Botón copiar folio */

.purchase-copy-folio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    min-width: 175px;
    padding: 12px 20px;

    border: none;
    border-radius: 999px;

    background: #e60012;
    color: #ffffff;

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

    cursor: pointer;

    box-shadow:
        0 9px 21px rgba(230, 0, 18, 0.25);

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.purchase-copy-folio:hover {
    background: #c90010;

    transform: translateY(-2px);

    box-shadow:
        0 12px 26px rgba(230, 0, 18, 0.32);
}

/* Información del pedido */

.purchase-information-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;

    margin-bottom: 19px;
}

.purchase-information-card {
    min-width: 0;
    padding: 16px 17px;

    border: 1px solid #e2e5e9;
    border-radius: 14px;

    background: #f6f7f9;

    text-align: left;
}

.purchase-information-card span {
    display: block;

    margin-bottom: 6px;

    color: #727a84;

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

    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.purchase-information-card strong {
    display: block;

    color: #171a1f;

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

    overflow-wrap: anywhere;
}

.purchase-pending-status {
    color: #b36c00 !important;
}

/* Botones de acciones */

.purchase-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 11px;

    margin-bottom: 18px;
}

.purchase-whatsapp-button,
.purchase-download-button,
.purchase-view-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    min-height: 49px;
    padding: 12px 15px;

    border: none;
    border-radius: 13px;

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

    cursor: pointer;

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

.purchase-whatsapp-button {
    background: #20c763;
    color: #ffffff;
}

.purchase-download-button {
    background: #2468df;
    color: #ffffff;
}

.purchase-view-button {
    grid-column: 1 / -1;

    background: #edf0f3;
    color: #20242a;
}

.purchase-whatsapp-button:hover,
.purchase-download-button:hover,
.purchase-view-button:hover {
    transform: translateY(-2px);
    filter: brightness(1.04);
}

/* Confirmación de guardado */

.purchase-confirm-save {
    display: flex;
    align-items: flex-start;
    gap: 11px;

    padding: 15px 16px;

    border: 1px solid #dfe3e8;
    border-radius: 13px;

    background: #f8f9fb;
    color: #353b43;

    font-size: 14px;
    line-height: 1.45;

    text-align: left;
    cursor: pointer;
}

.purchase-confirm-save input {
    flex: 0 0 auto;

    width: 19px;
    height: 19px;
    margin-top: 1px;

    accent-color: #e60012;
}

/* Botón cerrar */

.purchase-close-button {
    width: 100%;
    min-height: 51px;

    margin-top: 12px;
    padding: 13px 18px;

    border: none;
    border-radius: 14px;

    background: #20242a;
    color: #ffffff;

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

    cursor: pointer;

    box-shadow:
        0 9px 20px rgba(0, 0, 0, 0.13);

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        opacity 0.2s ease;
}

.purchase-close-button:hover:not(:disabled) {
    background: #111419;

    transform: translateY(-2px);
}

.purchase-close-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.purchase-close-warning {
    margin: 11px 0 0;

    color: #7a828b;

    font-size: 11px;
    line-height: 1.4;
}

/* Scroll del comprobante */

#purchase-success-overlay::-webkit-scrollbar {
    width: 10px;
}

#purchase-success-overlay::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.25);
}

#purchase-success-overlay::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 20px;

    background: #e60012;
    background-clip: padding-box;
}

/* Bloquear la tienda al abrir comprobante */

body.purchase-modal-open {
    overflow: hidden !important;
}

/* Diseño para celulares */

@media (max-width: 620px) {
    #purchase-success-overlay {
        padding: 12px;
    }

    .purchase-success-modal {
        width: 100%;
        margin: 0;

        padding: 0 18px 25px;

        border-radius: 20px;
    }

    .purchase-success-modal::before {
        margin-right: -18px;
        margin-left: -18px;

        border-radius: 20px 20px 0 0;
    }

    .purchase-information-grid,
    .purchase-actions {
        grid-template-columns: 1fr;
    }

    .purchase-view-button {
        grid-column: auto;
    }

    .purchase-important-alert {
        grid-template-columns: 36px 1fr;
        padding: 15px;
    }

    .purchase-important-alert > i {
        width: 34px;
        height: 34px;
    }

    #purchase-folio-number {
        letter-spacing: 0.7px;
    }
}
/* NOTIFICACIONES DEL PANEL ADMIN */

#notification-container {
    position: fixed;
    top: 95px;
    right: 25px;
    z-index: 9999;

    display: flex;
    flex-direction: column;
    gap: 12px;

    pointer-events: none;
}

.notification {
    min-width: 280px;
    max-width: 380px;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 16px 18px;

    background: #ffffff;
    color: #17202a;

    border-left: 5px solid #18a566;
    border-radius: 12px;

    box-shadow:
        0 12px 35px
        rgba(0, 0, 0, 0.18);

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

    opacity: 0;
    transform: translateX(30px);

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.notification.show {
    opacity: 1;
    transform: translateX(0);
}

.notification.error {
    border-left-color: #e53935;
}

.notification i {
    color: #18a566;
    font-size: 20px;
    flex-shrink: 0;
}

.notification.error i {
    color: #e53935;
}

.notification-message {
    color: #17202a;
    line-height: 1.4;
}
.admin-order-list-item {
    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}

.admin-order-list-item.selected {
    background: #fff4ed;
    border-left: 5px solid #ff5a1f;
    transform: translateX(4px);
}
.admin-order-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin-top: 14px;
    margin-bottom: 16px;
}

.admin-filter-button {
    border: 1px solid #d8dde5;
    border-radius: 999px;

    padding: 9px 16px;

    background: #f4f6f8;
    color: #354052;

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

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.admin-filter-button:hover {
    transform: translateY(-1px);
    border-color: #ff5a1f;
}

.admin-filter-button.active {
    background: #ff5a1f;
    color: #ffffff;
    border-color: #ff5a1f;
}
/* =========================================
   DASHBOARD ADMIN — DISEÑO DEFINITIVO
========================================= */

:root {
    --admin-sidebar-width: 250px;
    --admin-bg: #f4f6f9;
    --admin-sidebar-bg: #20262f;
    --admin-orange: #ff5a1f;
    --admin-text: #202124;
}

/* BASE */

html {
    min-width: 0;
}

body.admin-body {
    display: block;

    width: 100%;
    min-width: 0;
    min-height: 100vh;

    margin: 0;
    padding: 0;

    overflow-x: hidden;

    background: var(--admin-bg);
    color: var(--admin-text);
}

/*
Evita que la regla general:
section { padding: 80px 6%; }
afecte al administrador.
*/

body.admin-body section {
    width: auto;
    padding: 0;
}

/* =========================================
   MENÚ LATERAL
========================================= */

body.admin-body > .admin-sidebar {
    position: fixed;
    inset: 0 auto 0 0;

    width: var(--admin-sidebar-width);
    height: 100vh;

    display: flex;
    flex-direction: column;

    padding: 22px 18px;

    overflow-y: auto;

    background: var(--admin-sidebar-bg);
    color: #ffffff;

    box-sizing: border-box;
    z-index: 1000;

    box-shadow:
        8px 0 30px
        rgba(0, 0, 0, 0.12);
}

.admin-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 13px;

    padding: 4px 7px 23px;
    margin-bottom: 13px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.1);
}

.admin-sidebar-brand > i {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 14px;

    background: var(--admin-orange);
    color: #ffffff;

    font-size: 21px;
}

.admin-sidebar-brand strong,
.admin-sidebar-brand span {
    display: block;
}

.admin-sidebar-brand strong {
    color: #ffffff;
    font-size: 17px;
}

.admin-sidebar-brand span {
    margin-top: 3px;

    color: #aeb7c2;
    font-size: 12px;
}

.admin-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-sidebar-link,
.admin-sidebar-store-link {
    width: 100%;
    min-height: 46px;

    display: flex;
    align-items: center;
    gap: 13px;

    padding: 11px 14px;

    border: 0;
    border-radius: 12px;

    background: transparent;
    color: #c8d0da;

    font: inherit;
    font-weight: 700;
    text-align: left;
    text-decoration: none;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.admin-sidebar-link i,
.admin-sidebar-store-link i {
    width: 20px;
    text-align: center;
}

.admin-sidebar-link:hover,
.admin-sidebar-store-link:hover {
    background:
        rgba(255, 255, 255, 0.08);

    color: #ffffff;
    transform: translateX(3px);
}

.admin-sidebar-link.active {
    background: var(--admin-orange);
    color: #ffffff;
}

.admin-sidebar-store-link {
    margin-top: auto;

    background:
        rgba(255, 255, 255, 0.06);
}

/* =========================================
   ÁREA DERECHA
========================================= */

body.admin-body > .admin-layout {
    width: calc(
        100% - var(--admin-sidebar-width)
    );

    min-width: 0;
    min-height: 100vh;

    margin: 0 0 0 var(--admin-sidebar-width);
    padding: 0;

    box-sizing: border-box;
}

/* El encabezado anterior ya no se necesita */

body.admin-body .admin-header {
    display: none;
}

/* =========================================
   CONTENIDO PRINCIPAL
========================================= */

body.admin-body .admin-main {
    position: static;

    width: 100%;
    max-width: none;
    min-width: 0;

    margin: 0;
    padding: 36px 40px 70px;

    box-sizing: border-box;
}

body.admin-body .admin-main > section {
    position: static;

    width: 100%;
    max-width: none;
    min-width: 0;

    margin-left: 0;
    margin-right: 0;
    padding: 0;

    transform: none;
    box-sizing: border-box;
}

/* =========================================
   BIENVENIDA
========================================= */

body.admin-body .admin-welcome {
    margin: 0 0 28px;
}

body.admin-body .admin-welcome h2 {
    margin: 8px 0 8px;

    color: #202124;
    font-size: clamp(30px, 4vw, 43px);
    line-height: 1.1;
}

body.admin-body .admin-welcome p {
    max-width: 720px;

    color: #65707c;
    line-height: 1.6;
}

body.admin-body .admin-label {
    display: inline-flex;

    padding: 7px 12px;

    border-radius: 999px;

    background: #fff0e8;
    color: #e94e0c;

    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

/* =========================================
   ESTADÍSTICAS
========================================= */

body.admin-body .admin-stats {
    width: 100%;
    min-width: 0;

    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 18px;

    margin: 0 0 32px;
}

body.admin-body .admin-stat-card {
    width: 100%;
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 16px;

    margin: 0;
    padding: 20px;

    border: 1px solid #e8ebef;
    border-radius: 18px;

    background: #ffffff;

    box-sizing: border-box;

    box-shadow:
        0 10px 28px
        rgba(20, 30, 45, 0.07);
}

body.admin-body .admin-stat-card > div:last-child {
    min-width: 0;
    flex: 1;
}

body.admin-body .admin-stat-icon {
    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    flex: 0 0 58px;

    border-radius: 16px;

    background: var(--admin-orange);
    color: #ffffff;

    font-size: 22px;
}

body.admin-body .admin-stat-card span {
    display: block;

    margin-bottom: 6px;

    color: #707982;
    font-size: 12px;
}

body.admin-body .admin-stat-card strong {
    display: block;

    min-width: 0;

    color: #16191d;
    font-size: clamp(21px, 2vw, 27px);
    font-weight: 900;
    line-height: 1.15;

    overflow-wrap: normal;
    word-break: normal;
    white-space: nowrap;
}

/* El ingreso puede usar un tamaño ligeramente menor */

body.admin-body #admin-stat-revenue {
    font-size: clamp(18px, 1.7vw, 25px);
}

/* =========================================
   TARJETAS PRINCIPALES
========================================= */

body.admin-body .admin-search-card,
body.admin-body .admin-order-result,
body.admin-body .admin-orders-list-card {
    width: 100%;
    max-width: none;

    margin: 0 0 24px;
    padding: 22px;

    border: 1px solid #e3e7eb;
    border-radius: 18px;

    background: #ffffff;

    box-sizing: border-box;

    box-shadow:
        0 10px 30px
        rgba(20, 30, 45, 0.06);
}

/* =========================================
   TABLETA
========================================= */

@media (max-width: 1150px) {
    body.admin-body .admin-stats {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

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

@media (max-width: 760px) {
    :root {
        --admin-sidebar-width: 0px;
    }

    body.admin-body > .admin-sidebar {
        position: relative;

        width: 100%;
        height: auto;

        padding: 14px;

        overflow: visible;
    }

    .admin-sidebar-brand {
        padding-bottom: 14px;
        margin-bottom: 10px;
    }

    .admin-sidebar-nav {
        display: grid;
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 7px;
    }

    .admin-sidebar-link {
        min-height: 58px;

        flex-direction: column;
        justify-content: center;
        gap: 5px;

        padding: 8px 5px;

        font-size: 11px;
        text-align: center;
    }

    .admin-sidebar-store-link {
        margin-top: 10px;
        justify-content: center;
    }

    body.admin-body > .admin-layout {
        width: 100%;
        margin-left: 0;
    }

    body.admin-body .admin-main {
        padding: 22px 14px 55px;
    }

    body.admin-body .admin-stats {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    body.admin-body .admin-stat-card strong,
    body.admin-body #admin-stat-revenue {
        white-space: normal;
    }

    body.admin-body .admin-search-card,
    body.admin-body .admin-order-result,
    body.admin-body .admin-orders-list-card {
        padding: 17px;
        border-radius: 15px;
    }
}
/* =========================================
   NUEVO DASHBOARD ADMIN
========================================= */

.admin-body {
    margin: 0;
    min-height: 100vh;
    background: #f4f6f9;
}

.admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;

    width: 250px;
    padding: 22px 18px;

    display: flex;
    flex-direction: column;

    background: #1f252d;
    color: #ffffff;

    z-index: 1000;

    box-shadow:
        8px 0 30px
        rgba(0, 0, 0, 0.12);
}

.admin-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 13px;

    padding: 4px 8px 24px;
    margin-bottom: 15px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.1);
}

.admin-sidebar-brand > i {
    width: 48px;
    height: 48px;

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

    border-radius: 14px;

    background: linear-gradient(
        135deg,
        #ff7a1a,
        #ff4d00
    );

    font-size: 22px;
}

.admin-sidebar-brand strong,
.admin-sidebar-brand span {
    display: block;
}

.admin-sidebar-brand strong {
    font-size: 17px;
}

.admin-sidebar-brand span {
    margin-top: 3px;
    color: #aeb7c2;
    font-size: 12px;
}

.admin-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-sidebar-link,
.admin-sidebar-store-link {
    width: 100%;
    min-height: 46px;

    display: flex;
    align-items: center;
    gap: 13px;

    padding: 11px 14px;

    border: none;
    border-radius: 12px;

    background: transparent;
    color: #c8d0da;

    font: inherit;
    font-weight: 700;
    text-decoration: none;
    text-align: left;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.admin-sidebar-link:hover,
.admin-sidebar-store-link:hover {
    background:
        rgba(255, 255, 255, 0.08);

    color: #ffffff;
    transform: translateX(3px);
}

.admin-sidebar-link.active {
    background: #ff5a1f;
    color: #ffffff;
}

.admin-sidebar-link i,
.admin-sidebar-store-link i {
    width: 20px;
    text-align: center;
}

.admin-sidebar-store-link {
    margin-top: auto;

    background:
        rgba(255, 255, 255, 0.06);
}

.admin-layout {
    min-height: 100vh;
    margin-left: 250px;
}

.admin-header {
    position: sticky;
    top: 0;

    z-index: 900;
}

.admin-main {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
    padding: 28px 0 60px;
}
/* =========================================
   CORRECCIÓN DEL LAYOUT ADMIN
========================================= */

.admin-body {
    margin: 0;
    min-height: 100vh;
    background: #f4f6f9;
    overflow-x: hidden;
}

.admin-sidebar {
    width: 250px;
    box-sizing: border-box;
}

.admin-layout {
    width: calc(100% - 250px);
    min-height: 100vh;
    margin-left: 250px;

    display: flex;
    flex-direction: column;
}

.admin-header {
    position: sticky;
    top: 0;

    width: 100%;
    min-height: 68px;

    margin: 0;
    padding: 0 34px;

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

    background: #ffffff;

    box-sizing: border-box;
    z-index: 900;
}

.admin-main {
    width: 100%;
    max-width: none;

    margin: 0;
    padding: 35px 45px 70px;

    box-sizing: border-box;
}

.admin-welcome {
    margin: 0 0 28px;
    padding: 0;
}

/* Eliminar espacios causados por estilos anteriores */

.admin-layout > * {
    flex-shrink: 0;
}

.admin-header + .admin-main {
    margin-top: 0;
}

.admin-main::before,
.admin-header::before {
    display: none;
}
/* =========================================
   REPARACIÓN DEFINITIVA DEL DASHBOARD
========================================= */

html,
body.admin-body {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

body.admin-body {
    display: block;
    background: #f4f6f9;
}

/* MENÚ LATERAL */

body.admin-body > .admin-sidebar {
    position: fixed;
    inset: 0 auto 0 0;

    width: 250px;
    height: 100vh;

    margin: 0;
    box-sizing: border-box;
}

/* TODO EL CONTENIDO DERECHO */

body.admin-body > .admin-layout {
    position: relative;

    width: auto;
    min-width: 0;
    min-height: 100vh;

    margin: 0 0 0 250px;
    padding: 0;

    box-sizing: border-box;
    overflow: visible;
}

/* ENCABEZADO */

body.admin-body .admin-header {
    position: sticky;
    top: 0;

    width: 100%;
    min-width: 0;
    min-height: 70px;

    margin: 0;
    padding: 0 32px;

    display: flex;
    align-items: center;

    box-sizing: border-box;
    background: #ffffff;
}

/* CONTENIDO */

body.admin-body .admin-main {
    position: relative;
    left: auto;
    right: auto;
    transform: none;

    width: 100%;
    min-width: 0;
    max-width: none;

    margin: 0;
    padding: 34px 40px 70px;

    box-sizing: border-box;
    overflow: visible;
}

body.admin-body .admin-main > section {
    width: 100%;
    min-width: 0;
    max-width: none;

    margin-left: 0;
    margin-right: 0;

    box-sizing: border-box;
}

/* ESTADÍSTICAS ADAPTABLES */

body.admin-body .admin-stats {
    width: 100%;
    min-width: 0;

    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 18px;

    margin: 24px 0 32px;
    box-sizing: border-box;
}

body.admin-body .admin-stat-card {
    width: auto;
    min-width: 0;
    max-width: none;

    margin: 0;
    box-sizing: border-box;
}

body.admin-body .admin-stat-card div:last-child {
    min-width: 0;
}

body.admin-body .admin-stat-card strong {
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* PANTALLAS MEDIANAS */

@media (max-width: 1150px) {
    body.admin-body .admin-stats {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}
/* =========================================
   AJUSTE FINAL DEL DASHBOARD
========================================= */

/* Ya no necesitamos el encabezado anterior */
body.admin-body .admin-header {
    display: none !important;
}

/* Área derecha del panel */
body.admin-body > .admin-layout {
    width: calc(100% - 250px) !important;
    min-height: 100vh;

    margin: 0 0 0 250px !important;
    padding: 0 !important;

    box-sizing: border-box;
}

/* Contenido principal */
body.admin-body .admin-main {
    position: static !important;
    transform: none !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 38px 42px 70px !important;

    box-sizing: border-box;
}

/* Quitar movimientos y centrados antiguos */
body.admin-body .admin-welcome,
body.admin-body .admin-stats,
body.admin-body .admin-search-card,
body.admin-body .admin-order-result,
body.admin-body .admin-orders-list-card {
    position: static !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;

    width: 100% !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    box-sizing: border-box;
}

/* Espacio correcto de bienvenida */
body.admin-body .admin-welcome {
    margin-bottom: 26px !important;
}

/* Tarjetas de estadísticas */
body.admin-body .admin-stats {
    display: grid !important;
    grid-template-columns:
        repeat(4, minmax(0, 1fr)) !important;

    gap: 18px !important;
    margin: 0 0 32px !important;
}

body.admin-body .admin-stat-card {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

/* Pantallas medianas */
@media (max-width: 1100px) {
    body.admin-body .admin-stats {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }
}
/* CORRECCIÓN DEL CONTENIDO TAPADO POR EL MENÚ */

body.admin-body > .admin-layout {
    position: relative !important;
    left: 250px !important;

    width: calc(100% - 250px) !important;

    margin-left: 0 !important;
}

body.admin-body .admin-main {
    width: 100% !important;

    margin: 0 !important;
    padding: 35px 40px 70px !important;
}

body.admin-body .admin-welcome {
    width: 100% !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 0 0 28px !important;
    padding: 0 !important;
}

body.admin-body .admin-stats {
    width: 100% !important;

    margin-left: 0 !important;
    padding-left: 0 !important;
}
/* =========================================================
   SUPER LUIGUI STORE
   RESPONSIVE PROFESIONAL — TABLETS Y CELULARES
   Pega TODO este bloque AL FINAL de style.css
   No borra ni reemplaza el diseño de computadora.
========================================================= */

/* Evita desplazamiento lateral por elementos anchos */
@media (max-width: 1024px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    img,
    video {
        max-width: 100%;
    }

    section {
        padding: 58px 4.5%;
    }

    .container {
        width: 100%;
        max-width: 100%;
    }

    /* =====================================================
       HEADER — TABLET
    ===================================================== */
    .header {
        min-height: 76px;
        height: auto;
        padding: 12px 4%;
        gap: 14px;
        flex-wrap: wrap;
    }

    .logo {
        flex: 1 1 auto;
        min-width: 180px;
    }

    .logo h1 {
        font-size: 24px;
        white-space: nowrap;
    }

    .search-box {
        order: 3;
        width: 100%;
        height: 42px;
        padding: 0 16px;
    }

    .search-box input {
        font-size: 15px;
    }

    .header-actions {
        gap: 9px;
    }

    .header-actions button {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    /* =====================================================
       NAVEGACIÓN — TABLET
    ===================================================== */
    .navbar {
        padding: 13px 4%;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .navbar::-webkit-scrollbar {
        display: none;
    }

    .navbar ul {
        width: max-content;
        min-width: 100%;
        justify-content: flex-start;
        gap: 26px;
    }

    .navbar a {
        font-size: 14px;
        white-space: nowrap;
    }

    /* =====================================================
       HERO — TABLET
    ===================================================== */
    .hero {
        min-height: auto;
        padding-top: 52px;
        padding-bottom: 82px;
        gap: 32px;
    }

    .hero-content {
        width: 46%;
        min-width: 0;
    }

    .hero-content h2 {
        font-size: clamp(36px, 5vw, 48px);
        line-height: 1.05;
    }

    .hero-content p {
        font-size: 16px;
        line-height: 1.55;
    }

    .hero-price {
        font-size: 27px;
        margin-bottom: 23px;
    }

    .hero-buttons {
        gap: 11px;
        flex-wrap: wrap;
    }

    .hero-buttons .buy-btn,
    .hero-buttons .details-btn {
        padding: 12px 20px;
        font-size: 14px;
    }

    .hero-media {
        width: 54%;
        margin-left: 0 !important;
    }

    .hero-media img,
    .hero-media video {
        width: 100%;
        height: 280px;
        max-width: 100%;
        border-radius: 21px;
    }

    .hero-controls {
        bottom: 20px;
        gap: 12px;
    }

    .hero-controls button {
        width: 44px;
        height: 44px;
        font-size: 16px;
    }

    .hero-dot {
        width: 12px;
        height: 12px;
    }

    /* =====================================================
       ENCABEZADOS DE SECCIONES
    ===================================================== */
    .section-header {
        margin-bottom: 26px;
        gap: 16px;
    }

    .section-header h2 {
        font-size: 27px;
        line-height: 1.2;
    }

    .section-header p {
        font-size: 14px;
    }

    .section-header > a,
    .section-header > button,
    .view-all,
    .view-all-btn {
        flex: 0 0 auto;
        min-height: 38px;
        padding: 8px 15px;
        font-size: 13px;
        border-radius: 11px;
    }

    /* =====================================================
       CATEGORÍAS — TABLET
    ===================================================== */
    .category-slider {
        gap: 10px;
    }

    .category-container,
    #category-container {
        gap: 14px;
        padding: 12px 3px 18px;
        scroll-snap-type: x proximity;
    }

    .category-card {
        min-width: 155px !important;
        width: 155px;
        height: 135px !important;
        gap: 12px;
        border-radius: 18px;
        scroll-snap-align: start;
    }

    .category-card i {
        font-size: 31px;
    }

    .category-card h3 {
        font-size: 17px;
    }

    .slider-btn,
    .prev-category,
    .next-category {
        min-width: 40px;
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    /* =====================================================
       TARJETAS DE JUEGOS — TABLET
    ===================================================== */
    .games-slider {
        gap: 16px;
        padding: 12px 3px 17px;
        scroll-snap-type: x proximity;
    }

    .game-card {
        min-width: 225px !important;
        width: 225px;
        border-radius: 19px;
        scroll-snap-align: start;
    }

    .game-media {
        height: 280px;
    }

    .game-info {
        padding: 15px;
    }

    .game-info h3 {
        font-size: 17px;
        margin-bottom: 7px;
    }

    .game-info p {
        font-size: 13px;
        line-height: 1.4;
        margin-bottom: 11px;
    }

    .game-price {
        font-size: 20px;
    }

    .game-tag {
        top: 11px;
        left: 11px;
        padding: 6px 11px;
        font-size: 11px;
    }

    .game-actions {
        gap: 7px;
        margin-top: 14px;
    }

    .game-actions button {
        height: 39px;
        border-radius: 11px;
        font-size: 13px;
    }

    .favorite-game,
    .cart-game {
        width: 39px;
        min-width: 39px;
        font-size: 15px;
    }

    .sound-button {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    /* =====================================================
       BENEFICIOS, RESEÑAS Y FOOTER — TABLET
    ===================================================== */
    .benefits,
    .reviews-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 17px;
    }

    .benefit-card,
    .review-card {
        padding: 24px 20px;
        border-radius: 19px;
    }

    .benefit-card i {
        font-size: 34px;
        margin-bottom: 15px;
    }

    .benefit-card h3 {
        font-size: 19px;
        margin-bottom: 10px;
    }

    .benefit-card p,
    .review-card p {
        font-size: 14px;
        line-height: 1.55;
    }

    .footer {
        padding: 45px 4.5%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 30px;
    }

    /* =====================================================
       PANELES LATERALES
    ===================================================== */
    .cart-panel,
    .favorites-panel {
        width: min(390px, 90vw);
        padding: 24px 20px;
    }

    /* =====================================================
       MODALES GENERALES
    ===================================================== */
    .game-modal {
        padding: 18px;
        overflow-y: auto;
    }

    .modal-content {
        width: min(500px, 100%);
        max-height: calc(100vh - 36px);
        overflow-y: auto;
        padding: 24px;
        border-radius: 23px;
    }

    .modal-content img {
        height: 250px;
    }

    /* Checkout */
    .checkout-overlay {
        padding: 18px !important;
        align-items: flex-start !important;
        overflow-y: auto !important;
    }

    .checkout-modal,
    .checkout-container,
    .checkout-content {
        width: min(760px, 100%) !important;
        max-width: 100% !important;
        max-height: none !important;
        margin: auto !important;
    }

    /* Comprobante / folio */
    #purchase-success-overlay,
    .purchase-success-overlay {
        padding: 18px !important;
        align-items: flex-start !important;
        overflow-y: auto !important;
    }

    .purchase-success-modal {
        width: min(650px, 100%) !important;
        max-width: 100% !important;
        max-height: none !important;
        margin: auto !important;
    }
}


/* =========================================================
   CELULARES — 767 PX O MENOS
========================================================= */
@media (max-width: 767px) {
    section {
        padding: 44px 18px;
    }

    /* =====================================================
       HEADER — CELULAR
    ===================================================== */
    .header {
        min-height: 68px;
        padding: 10px 14px;
        gap: 10px;
    }

    .logo {
        min-width: 0;
    }

    .logo h1 {
        font-size: 19px;
        letter-spacing: -0.6px;
    }

    .header-actions {
        margin-left: auto;
        gap: 7px;
    }

    .header-actions button {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    .counter,
    #cart-count {
        width: 17px;
        height: 17px;
        font-size: 10px;
    }

    .search-box {
        height: 39px;
        padding: 0 14px;
        gap: 10px;
    }

    .search-box i {
        font-size: 14px;
    }

    .search-box input {
        font-size: 14px;
    }

    /* =====================================================
       NAVBAR — CELULAR
    ===================================================== */
    .navbar {
        padding: 11px 15px;
    }

    .navbar ul {
        gap: 22px;
    }

    .navbar a {
        font-size: 13px;
    }

    /* =====================================================
       HERO — CELULAR
    ===================================================== */
    .hero {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        min-height: auto !important;
        padding: 34px 18px 72px !important;
        gap: 22px !important;
        align-items: start !important;
    }

    .hero-content {
        width: 100% !important;
        max-width: 100%;
        order: 1;
        text-align: left;
    }

    .hero-badge {
        padding: 6px 13px;
        margin-bottom: 13px;
        font-size: 11px;
    }

    .hero-content h2 {
        max-width: 100%;
        margin-bottom: 13px;
        font-size: clamp(31px, 10vw, 41px) !important;
        line-height: 1.04;
        overflow-wrap: anywhere;
    }

    .hero-content p {
        display: none;
    }

    .hero-price {
        margin-bottom: 18px;
        font-size: 25px;
    }

    .hero-buttons {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: 9px;
    }

    .hero-buttons .buy-btn,
    .hero-buttons .details-btn {
        width: 100%;
        min-width: 0;
        min-height: 44px;
        padding: 9px 10px;
        border-radius: 15px;
        font-size: 13px;
        line-height: 1.2;
    }

    .hero-media {
        width: 100% !important;
        max-width: 100%;
        margin: 0 !important;
        order: 2;
    }

    .hero-media img,
    .hero-media video {
        width: 100% !important;
        height: 220px !important;
        max-width: 100% !important;
        border-radius: 18px;
        object-fit: cover;
    }

    .hero-controls {
        bottom: 15px;
        gap: 9px;
    }

    .hero-controls button {
        width: 37px;
        height: 37px;
        font-size: 14px;
    }

    .hero-dot {
        width: 9px;
        height: 9px;
    }

    /* =====================================================
       ENCABEZADOS DE SECCIÓN — CELULAR
    ===================================================== */
    .section-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        margin-bottom: 20px;
        gap: 10px;
    }

    .section-header > div {
        min-width: 0;
    }

    .section-header h2 {
        margin: 0;
        font-size: 23px !important;
        line-height: 1.2;
        letter-spacing: -0.5px;
        overflow-wrap: normal;
        word-break: normal;
    }

    .section-header p {
        grid-column: 1 / -1;
        margin-top: 5px;
        font-size: 13px;
        line-height: 1.4;
    }

    .section-header > a,
    .section-header > button,
    .view-all,
    .view-all-btn {
        min-height: 36px;
        padding: 7px 12px;
        font-size: 12px;
        white-space: nowrap;
    }

    /* Categorías: título y subtítulo uno debajo del otro */
    .categories .section-header {
        display: block !important;
        text-align: left;
    }

    .categories .section-header h2 {
        margin-bottom: 6px;
    }

    .categories .section-header p {
        margin: 0;
    }

    /* =====================================================
       CATEGORÍAS — CELULAR
    ===================================================== */
    .category-slider {
        position: relative;
        display: block;
        width: 100%;
    }

    .category-container,
    #category-container {
        width: 100%;
        gap: 11px;
        padding: 8px 2px 14px;
        overflow-x: auto;
        scroll-padding-inline: 2px;
        -webkit-overflow-scrolling: touch;
    }

    .category-card {
        min-width: 126px !important;
        width: 126px !important;
        height: 112px !important;
        padding: 13px 8px;
        gap: 9px;
        border-width: 1px;
        border-radius: 16px;
    }

    .category-card i {
        font-size: 27px;
    }

    .category-card h3 {
        font-size: 15px;
    }

    .category-card:hover,
    .category-card.active {
        transform: translateY(-3px);
    }

    .category-slider > .slider-btn,
    .prev-category,
    .next-category {
        display: none !important;
    }

    /* =====================================================
       JUEGOS — CELULAR
    ===================================================== */
    .games-slider {
        width: 100%;
        gap: 12px;
        padding: 7px 2px 15px;
        -webkit-overflow-scrolling: touch;
        scroll-padding-inline: 2px;
    }

    .game-card {
        min-width: 176px !important;
        width: 176px !important;
        border-width: 1px;
        border-radius: 16px;
    }

    .game-card:hover {
        transform: none;
    }

    .game-media {
        height: 220px !important;
    }

    .game-info {
        padding: 12px;
    }

    .game-info h3 {
        min-height: 38px;
        margin-bottom: 5px;
        font-size: 15px;
        line-height: 1.25;
    }

    .game-info p {
        display: none;
    }

    .game-price {
        font-size: 18px;
    }

    .game-tag {
        top: 9px;
        left: 9px;
        padding: 5px 9px;
        font-size: 10px;
    }

    .game-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 34px 34px;
        gap: 5px;
        margin-top: 10px;
    }

    .game-actions button {
        height: 35px;
        min-width: 0;
        padding: 0 7px;
        border-radius: 9px;
        font-size: 11px;
    }

    .favorite-game,
    .cart-game {
        width: 34px;
        min-width: 34px;
        padding: 0 !important;
        font-size: 13px !important;
    }

    .sound-button {
        display: none !important;
    }

    /* =====================================================
       BENEFICIOS — CELULAR
       Dos tarjetas pequeñas por fila; la tercera ocupa todo
    ===================================================== */
    .benefits {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 11px;
    }

    .benefit-card {
        min-width: 0;
        padding: 20px 13px;
        border-radius: 17px;
    }

    .benefit-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .benefit-card i {
        font-size: 29px;
        margin-bottom: 11px;
    }

    .benefit-card h3 {
        font-size: 16px;
        line-height: 1.3;
        margin-bottom: 8px;
    }

    .benefit-card p {
        font-size: 12px;
        line-height: 1.45;
    }

    /* =====================================================
       OPINIONES, FAQ Y REDES
    ===================================================== */
    .reviews-container {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }

    .review-card {
        padding: 19px;
        border-radius: 17px;
    }

    .stars {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .review-card p {
        font-size: 13px;
    }

    .faq-container details {
        padding: 16px;
        border-radius: 13px;
    }

    .faq-container summary {
        font-size: 15px;
        line-height: 1.4;
    }

    .faq-container p {
        font-size: 13px;
        line-height: 1.5;
    }

    .social-icons {
        gap: 13px;
        flex-wrap: wrap;
    }

    .social-icons a {
        width: 45px;
        height: 45px;
        font-size: 19px;
    }

    /* =====================================================
       FOOTER — CELULAR
    ===================================================== */
    .footer {
        padding: 38px 18px;
        grid-template-columns: 1fr !important;
        gap: 25px;
    }

    .footer-column {
        gap: 10px;
    }

    .footer-column h2 {
        font-size: 22px;
    }

    .footer-column h3 {
        font-size: 17px;
    }

    .footer-column p,
    .footer-column a {
        font-size: 13px;
        line-height: 1.5;
    }

    .copyright {
        padding: 18px 15px;
        font-size: 12px;
        line-height: 1.5;
    }

    /* =====================================================
       CARRITO Y FAVORITOS — CELULAR
    ===================================================== */
    .cart-panel,
    .favorites-panel {
        width: 100% !important;
        max-width: 100%;
        right: -100%;
        padding: 20px 16px;
    }

    .cart-panel.active,
    .favorites-panel.active {
        right: 0;
    }

    .cart-header,
    .favorites-header {
        margin-bottom: 18px;
    }

    .cart-header h2,
    .favorites-header h2 {
        font-size: 21px;
    }

    #cart-items {
        height: calc(100vh - 195px);
    }

    #favorites-items {
        height: calc(100vh - 85px);
    }

    .cart-item,
    .favorite-item {
        gap: 11px;
        padding: 11px;
        border-radius: 13px;
    }

    .cart-item img,
    .favorite-item img {
        width: 62px;
        height: 62px;
    }

    .cart-item-info h4,
    .favorite-item-info h4 {
        font-size: 14px;
    }

    .favorite-item-actions {
        flex-wrap: wrap;
    }

    .favorite-item-actions button {
        padding: 7px 9px;
        font-size: 11px;
    }

    /* =====================================================
       MODAL DE JUEGO — CELULAR
    ===================================================== */
    .game-modal {
        padding: 12px;
        align-items: flex-start;
        overflow-y: auto;
    }

    .modal-content {
        width: 100%;
        max-height: none;
        margin: auto 0;
        padding: 18px;
        border-radius: 19px;
    }

    .modal-content img {
        height: 205px;
        border-radius: 14px;
    }

    .modal-content h2 {
        margin-top: 14px;
        font-size: 23px;
    }

    .modal-content p {
        font-size: 13px;
        line-height: 1.5;
    }

    .close-modal {
        top: 12px;
        right: 12px;
        width: 34px;
        height: 34px;
        font-size: 14px;
    }

    .modal-buttons {
        display: grid;
        grid-template-columns: 1fr;
        gap: 9px;
        margin-top: 17px;
    }

    .modal-buttons button {
        min-height: 42px;
        padding: 10px;
    }

    /* =====================================================
       CHECKOUT — CELULAR
    ===================================================== */
    .checkout-overlay {
        padding: 10px !important;
        align-items: flex-start !important;
        overflow-y: auto !important;
    }

    .checkout-modal,
    .checkout-container,
    .checkout-content {
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        margin: 8px auto !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        border-radius: 18px !important;
        overflow: visible !important;
    }

    .checkout-grid,
    .checkout-form-grid,
    .checkout-information-grid,
    .transfer-grid {
        grid-template-columns: 1fr !important;
    }

    .checkout-modal h2,
    .checkout-container h2 {
        font-size: 22px !important;
    }

    .checkout-modal input,
    .checkout-modal textarea,
    .checkout-modal select,
    .checkout-container input,
    .checkout-container textarea,
    .checkout-container select {
        width: 100% !important;
        min-width: 0 !important;
        font-size: 14px !important;
    }

    #checkout-pay,
    .checkout-pay,
    .checkout-submit-button {
        width: 100% !important;
        min-height: 45px;
    }

    /* =====================================================
       COMPROBANTE Y FOLIO — CELULAR
    ===================================================== */
    #purchase-success-overlay,
    .purchase-success-overlay {
        padding: 9px !important;
        align-items: flex-start !important;
        overflow-y: auto !important;
    }

    .purchase-success-modal {
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        margin: 7px auto !important;
        padding: 17px 14px !important;
        border-radius: 18px !important;
        overflow: visible !important;
    }

    .purchase-folio-container {
        padding: 17px 10px !important;
        border-radius: 14px !important;
    }

    #purchase-folio-number,
    .purchase-folio-number {
        display: block;
        max-width: 100%;
        font-size: clamp(23px, 7.5vw, 31px) !important;
        line-height: 1.15;
        letter-spacing: 1px !important;
        overflow-wrap: anywhere;
    }

    #purchase-copy-folio,
    .purchase-copy-folio {
        min-height: 39px;
        padding: 8px 15px !important;
        font-size: 12px !important;
    }

    .purchase-information-grid {
        grid-template-columns: 1fr !important;
        gap: 9px !important;
    }

    .purchase-information-card {
        padding: 13px !important;
    }

    .purchase-success-actions,
    .purchase-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .purchase-success-actions button,
    .purchase-success-actions a,
    .purchase-actions button,
    .purchase-actions a,
    #purchase-whatsapp-button,
    #purchase-download-button,
    #purchase-view-button {
        width: 100% !important;
        min-height: 42px;
        font-size: 12px !important;
    }

    /* =====================================================
       NOTIFICACIONES — CELULAR
    ===================================================== */
    .notification-container {
        top: 82px;
        left: 12px;
        right: 12px;
    }

    .notification {
        width: 100%;
        min-width: 0;
        max-width: none;
        padding: 13px 15px;
        font-size: 13px;
    }

    /* =====================================================
       PÁGINA INDIVIDUAL DEL JUEGO — CELULAR
    ===================================================== */
    .product-page {
        width: 94%;
        padding: 22px 0 55px;
    }

    .product-hero {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
        padding: 14px !important;
        border-radius: 19px !important;
    }

    .product-media img,
    .product-media video,
    .product-video,
    .product-main-image {
        min-height: 0 !important;
        height: 235px !important;
        border-radius: 15px !important;
    }

    .product-information {
        padding: 18px !important;
        border-radius: 17px !important;
    }

    .product-information h1 {
        font-size: 31px !important;
        line-height: 1.06;
    }

    .product-description {
        font-size: 14px;
        line-height: 1.55;
    }

    .product-price {
        padding: 8px 14px;
        font-size: 25px !important;
    }

    .product-buttons {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .product-buttons button {
        width: 100%;
        min-height: 44px;
    }

    .product-details-section {
        margin-top: 28px;
        padding: 18px !important;
        border-radius: 18px;
    }

    .product-details-section h2 {
        font-size: 23px;
    }

    .product-details-grid {
        grid-template-columns: 1fr !important;
        gap: 10px;
    }

    .product-details-grid article {
        min-height: auto;
        padding: 16px;
    }
}


/* =========================================================
   CELULARES MUY PEQUEÑOS — 380 PX O MENOS
========================================================= */
@media (max-width: 380px) {
    section {
        padding-left: 14px;
        padding-right: 14px;
    }

    .logo h1 {
        font-size: 17px;
    }

    .header-actions button {
        width: 34px;
        height: 34px;
    }

    .hero {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .hero-content h2 {
        font-size: 29px !important;
    }

    .hero-media img,
    .hero-media video {
        height: 195px !important;
    }

    .section-header h2 {
        font-size: 21px !important;
    }

    .game-card {
        min-width: 162px !important;
        width: 162px !important;
    }

    .game-media {
        height: 202px !important;
    }

    .category-card {
        min-width: 116px !important;
        width: 116px !important;
        height: 106px !important;
    }

    .benefits {
        grid-template-columns: 1fr !important;
    }

    .benefit-card:last-child:nth-child(odd) {
        grid-column: auto;
    }
}


/* =========================================================
   DISPOSITIVOS TÁCTILES
   Evita que efectos hover de computadora estorben.
========================================================= */
@media (hover: none) and (pointer: coarse) {
    .game-card:hover,
    .category-card:hover,
    .benefit-card:hover,
    .review-card:hover {
        transform: none;
    }

    .game-card:hover .game-media img {
        transform: none;
        filter: none;
    }

    

    .sound-button {
        display: none;
    }
}


/* =========================================================
   PANTALLA HORIZONTAL DE CELULAR
========================================================= */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
    .hero {
        grid-template-columns: 1fr 1fr !important;
        padding-top: 24px !important;
        padding-bottom: 60px !important;
    }

    .hero-content,
    .hero-media {
        width: 100% !important;
    }

    .hero-media img,
    .hero-media video {
        height: 230px !important;
    }

    .cart-panel,
    .favorites-panel {
        width: min(420px, 70vw) !important;
    }
}
/* =========================================================
   CORRECCIÓN DEL HERO EN CELULAR
========================================================= */

@media (max-width: 767px) {

    .hero {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;

        min-height: auto !important;

        padding:
            30px 18px
            64px !important;

        overflow: hidden;
    }

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

        text-align: left;
    }

    .hero-badge {
        margin-bottom: 12px;

        padding:
            6px 13px;

        font-size: 11px;
    }

    .hero-content h2 {
        margin-bottom: 10px;

        font-size:
            clamp(
                30px,
                9vw,
                38px
            ) !important;

        line-height: 1.05;
    }

    .hero-price {
        margin-bottom: 16px;

        font-size: 24px;
    }

    .hero-buttons {
        display: grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 9px;

        width: 100%;
    }

    .hero-buttons .buy-btn,
    .hero-buttons .details-btn {
        min-height: 42px;

        padding:
            8px 10px;

        border-radius: 14px;

        font-size: 12px;
    }

    .hero-media {
        position: relative;

        width: 100% !important;

        margin: 0 !important;
    }

    .hero-media img,
    .hero-media video {
        width: 100% !important;
        height: 205px !important;

        max-width: 100% !important;

        object-fit: cover;

        border-radius: 17px;
    }

    /* CONTROLES DEL CARRUSEL */

    .hero-controls {
        position: absolute !important;

        left: 50% !important;
        right: auto !important;
        bottom: 14px !important;

        transform:
            translateX(-50%) !important;

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

        gap: 7px !important;

        width: auto !important;
    }

    .hero-controls button {
        width: 33px !important;
        height: 33px !important;

        min-width: 33px;

        border-radius: 50%;

        font-size: 12px !important;

        background:
            rgba(
                10,
                15,
                22,
                0.88
            );
    }

    .hero-dots,
    .hero-indicators {
        display: flex !important;
        align-items: center;
        justify-content: center;

        gap: 6px !important;
    }

    .hero-dot {
        width: 8px !important;
        height: 8px !important;

        min-width: 8px;

        border: 0 !important;

        box-shadow: none !important;
    }

    .hero-dot.active {
        width: 20px !important;

        border-radius: 20px !important;

        transform: none !important;

        box-shadow:
            0 0 10px
            rgba(
                0,
                230,
                118,
                0.65
            ) !important;
    }

    .hero-dot:hover {
        transform: none !important;
    }
}
/* =========================================================
   CORREGIR IMAGEN DEL HERO EN CELULAR
========================================================= */

@media (max-width: 767px) {

    .hero-media {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .hero-media img,
    .hero-media video,
    #hero-image,
    #hero-video {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;

        height: 220px !important;
        min-height: 220px !important;

        margin: 0 !important;

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

        border-radius: 0 0 18px 18px !important;
    }

    #hero-video {
        position: absolute;
        inset: 0;
    }

    .hero {
        overflow: hidden !important;
    }
}
/* =========================================================
   HERO PROFESIONAL PARA TABLETS
========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {

    .hero {
        display: grid !important;
        grid-template-columns: 0.9fr 1.1fr !important;
        align-items: center !important;

        min-height: 500px !important;

        gap: 26px !important;

        padding:
            46px 4%
            80px !important;

        overflow: hidden !important;
    }

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

        position: relative;
        z-index: 3;
    }

    .hero-content h2 {
        font-size:
            clamp(
                34px,
                4.4vw,
                47px
            ) !important;

        line-height: 1.05;

        margin-bottom: 16px;

        overflow-wrap: normal;
        word-break: normal;
    }

    .hero-content p {
        max-width: 360px;

        font-size: 15px;
        line-height: 1.55;

        margin-bottom: 20px;
    }

    .hero-price {
        margin-bottom: 22px;

        font-size: 27px;
    }

    .hero-buttons {
        display: flex !important;
        flex-wrap: wrap;

        gap: 10px !important;
    }

    .hero-buttons .buy-btn,
    .hero-buttons .details-btn {
        min-width: 145px;
        min-height: 44px;

        padding:
            10px 18px !important;

        font-size: 13px !important;

        border-radius: 15px;
    }

    /* IMAGEN */

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

        display: block !important;

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

        position: relative;

        z-index: 2;
    }

    .hero-media img,
    .hero-media video,
    #hero-image,
    #hero-video {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        height: 290px !important;
        min-height: 290px !important;

        margin: 0 !important;

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

        border-radius: 20px !important;

        box-shadow:
            0 18px 40px
            rgba(
                0,
                0,
                0,
                0.4
            );
    }

    #hero-video {
        position: absolute;
        inset: 0;
    }

    /* CONTROLES DEL CARRUSEL */

    .hero-controls {
        position: absolute !important;

        left: 50% !important;
        right: auto !important;
        bottom: 18px !important;

        transform:
            translateX(-50%) !important;

        width: auto !important;

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

        gap: 9px !important;

        z-index: 10;
    }

    .hero-controls button {
        width: 38px !important;
        height: 38px !important;

        min-width: 38px;

        font-size: 14px !important;

        background:
            rgba(
                10,
                15,
                22,
                0.9
            );
    }

    .hero-dots,
    .hero-indicators {
        display: flex !important;
        align-items: center;
        justify-content: center;

        gap: 7px !important;
    }

    .hero-dot {
        width: 9px !important;
        height: 9px !important;

        min-width: 9px;

        border: 0 !important;

        transform: none !important;

        box-shadow: none !important;
    }

    .hero-dot.active {
        width: 22px !important;

        border-radius: 999px !important;

        transform: none !important;

        box-shadow:
            0 0 10px
            rgba(
                0,
                230,
                118,
                0.7
            ) !important;
    }
}
/* =========================================================
   VIDEO AL MANTENER PRESIONADA LA TARJETA EN CELULAR
========================================================= */

@media (hover: none) and (pointer: coarse) {

    .game-media img,
    .game-media video {
        transition: opacity 0.2s ease;
    }

    .game-media video {
        opacity: 0 !important;
        pointer-events: none;
    }

    .game-card.touch-preview .game-media img {
        opacity: 0 !important;
    }

    .game-card.touch-preview .game-media video {
        opacity: 1 !important;
    }
}
/* =========================================================
   CUENTA DEL CLIENTE
========================================================= */

.account-overlay {
    position: fixed;
    inset: 0;

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

    padding: 20px;

    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(8px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: 0.25s ease;

    z-index: 6000;
}

.account-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.account-modal {
    position: relative;

    width: min(470px, 100%);
    max-height: 92vh;

    overflow-y: auto;

    padding: 34px;

    background:
        linear-gradient(
            145deg,
            #111720,
            #0b1017
        );

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

    border-radius: 25px;

    box-shadow:
        0 30px 80px
        rgba(0, 0, 0, 0.55);

    transform: translateY(20px) scale(0.97);

    transition: 0.25s ease;
}

.account-overlay.active .account-modal {
    transform: translateY(0) scale(1);
}


/* CERRAR */

.account-close {
    position: absolute;

    top: 16px;
    right: 16px;

    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #202733;
    color: white;

    font-size: 16px;

    z-index: 5;
}


/* CABECERA */

.account-header {
    text-align: center;

    margin-bottom: 25px;
}

.account-icon {
    width: 62px;
    height: 62px;

    margin:
        0 auto
        14px;

    display: grid;
    place-items: center;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            #00e676,
            #00b8ff
        );

    color: #041009;

    font-size: 25px;
}

.account-header > span {
    display: block;

    color: var(--green);

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

    text-transform: uppercase;
    letter-spacing: 1px;
}

.account-header h2 {
    margin: 7px 0;

    font-size: 29px;
}

.account-header p {
    color: var(--gray);

    font-size: 14px;
    line-height: 1.5;
}


/* PESTAÑAS */

.account-tabs {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 6px;

    margin-bottom: 22px;
    padding: 5px;

    background: #080c12;

    border-radius: 14px;
}

.account-tab {
    min-height: 42px;

    padding: 8px;

    border-radius: 10px;

    background: transparent;
    color: #aab2bd;

    font-size: 13px;
    font-weight: 700;
}

.account-tab.active {
    background: var(--green);
    color: #06100a;
}


/* FORMULARIOS */

.account-form {
    display: none;
}

.account-form.active {
    display: grid;

    gap: 16px;
}

.account-form label {
    display: grid;

    gap: 7px;
}

.account-form label > span {
    color: #dfe5eb;

    font-size: 13px;
    font-weight: 700;
}

.account-input {
    min-height: 48px;

    display: flex;
    align-items: center;

    gap: 11px;

    padding: 0 15px;

    background: #151c27;

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

    border-radius: 12px;

    transition: 0.2s ease;
}

.account-input:focus-within {
    border-color: var(--green);

    box-shadow:
        0 0 0 3px
        rgba(0, 230, 118, 0.1);
}

.account-input i {
    color: var(--green);
}

.account-input input {
    width: 100%;

    background: transparent;

    border: 0;
    outline: 0;

    color: white;

    font: inherit;
    font-size: 14px;
}


/* BOTÓN PRINCIPAL */

.account-primary-button {
    width: 100%;
    min-height: 48px;

    margin-top: 5px;

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

    gap: 9px;

    border-radius: 13px;

    background: var(--green);
    color: #041009;

    font-weight: 800;
}


/* PERFIL */

.account-user-view {
    text-align: center;
}

.account-profile-avatar {
    width: 76px;
    height: 76px;

    margin:
        5px auto
        15px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #00e676,
            #2196f3
        );

    color: #041009;

    font-size: 30px;
}

.account-profile-label {
    color: var(--green);

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

    text-transform: uppercase;
}

.account-user-view h2 {
    margin:
        7px 0
        22px;

    font-size: 27px;
}

.account-profile-data {
    display: grid;

    gap: 10px;

    margin-bottom: 20px;
}

.account-profile-data > div {
    display: flex;
    align-items: center;

    gap: 13px;

    padding: 14px;

    background: #151c27;

    border-radius: 13px;

    text-align: left;
}

.account-profile-data i {
    width: 35px;

    color: var(--green);

    font-size: 18px;
}

.account-profile-data span {
    min-width: 0;

    display: grid;
}

.account-profile-data small {
    margin-bottom: 3px;

    color: var(--gray);

    font-size: 11px;
}

.account-profile-data strong {
    overflow-wrap: anywhere;

    font-size: 14px;
}


/* BOTONES PERFIL */

.account-secondary-button,
.account-logout-button {
    width: 100%;

    min-height: 45px;

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

    gap: 9px;

    border-radius: 12px;

    font-weight: 800;
}

.account-secondary-button {
    margin-bottom: 9px;

    background: #202733;
    color: white;
}

.account-logout-button {
    background:
        rgba(255, 23, 68, 0.13);

    color: #ff5172;

    border:
        1px solid
        rgba(255, 23, 68, 0.25);
}


/* USUARIO CON SESIÓN EN HEADER */

#user-btn.logged-in {
    background: var(--green);
    color: black;
}


/* =========================================================
   CUENTA — CELULAR
========================================================= */

@media (max-width: 600px) {

    .account-overlay {
        padding: 10px;
        align-items: flex-start;

        overflow-y: auto;
    }

    .account-modal {
        width: 100%;

        max-height: none;

        margin:
            12px auto;

        padding:
            27px
            17px
            20px;

        border-radius: 19px;
    }

    .account-header {
        margin-bottom: 20px;
    }

    .account-icon {
        width: 52px;
        height: 52px;

        border-radius: 16px;

        font-size: 21px;
    }

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

    .account-header p {
        font-size: 13px;
    }

    .account-tabs {
        margin-bottom: 18px;
    }

    .account-tab {
        min-height: 39px;

        font-size: 12px;
    }

    .account-input {
        min-height: 44px;
    }

    .account-primary-button {
        min-height: 45px;
    }

}
/* =========================================================
   MIS COMPRAS
========================================================= */

.purchases-overlay {
    position: fixed;
    inset: 0;

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

    padding: 20px;

    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(9px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: 0.25s ease;

    z-index: 6100;
}


.purchases-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


.purchases-modal {
    width: min(720px, 100%);
    max-height: 90vh;

    overflow-y: auto;

    padding: 28px;

    background:
        linear-gradient(
            145deg,
            #111720,
            #0b1017
        );

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

    border-radius: 24px;

    box-shadow:
        0 30px 80px
        rgba(0, 0, 0, 0.6);
}


/* CABECERA */

.purchases-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 22px;
}


.purchases-header > div > span {
    color: var(--green);

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

    text-transform: uppercase;
    letter-spacing: 1px;
}


.purchases-header h2 {
    margin: 5px 0;

    font-size: 29px;
}


.purchases-header p {
    color: var(--gray);

    font-size: 14px;
}


.purchases-close {
    width: 39px;
    height: 39px;

    flex: 0 0 auto;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #202733;
    color: white;

    font-size: 16px;
}


/* RESUMEN */

.purchases-summary {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;

    margin-bottom: 22px;
}


.purchases-summary > div {
    padding: 16px;

    background: #151c27;

    border:
        1px solid
        rgba(255,255,255,.07);

    border-radius: 14px;
}


.purchases-summary span {
    display: block;

    margin-bottom: 5px;

    color: var(--gray);

    font-size: 11px;
}


.purchases-summary strong {
    color: white;

    font-size: 20px;
}


/* LISTA */

.purchases-list {
    display: grid;

    gap: 13px;
}


/* PEDIDO */

.purchase-history-card {
    overflow: hidden;

    background: #151c27;

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

    border-radius: 17px;
}


.purchase-history-main {
    padding: 10px 14px;
}


.purchase-history-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 14px;
}


.purchase-history-folio span {
    display: block;

    margin-bottom: 4px;

    color: var(--gray);

    font-size: 10px;

    text-transform: uppercase;
}


.purchase-history-folio strong {
    color: white;

    font-size: 17px;
}


.purchase-history-status {
    flex: 0 0 auto;

    padding: 6px 10px;

    border-radius: 999px;

    background:
        rgba(255, 171, 0, 0.14);

    color: #ffb300;

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


.purchase-history-status.completed,
.purchase-history-status.entregado {
    background:
        rgba(0, 230, 118, 0.14);

    color: var(--green);
}


.purchase-history-status.cancelado {
    background:
        rgba(255, 23, 68, 0.14);

    color: #ff5172;
}


/* INFORMACIÓN */

.purchase-history-info {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 9px;

    margin-bottom: 14px;
}


.purchase-history-info > div {
    padding: 10px;

    background: #0d121a;

    border-radius: 10px;
}


.purchase-history-info span {
    display: block;

    margin-bottom: 3px;

    color: var(--gray);

    font-size: 10px;
}


.purchase-history-info strong {
    font-size: 13px;

    overflow-wrap: anywhere;
}


/* DETALLES */

.purchase-history-details {
    border-top:
        1px solid
        rgba(255,255,255,.07);
}


.purchase-history-details summary {
    padding: 13px 17px;

    cursor: pointer;

    color: #dfe5eb;

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

    list-style: none;
}


.purchase-history-details summary::-webkit-details-marker {
    display: none;
}


.purchase-history-details summary i {
    margin-right: 7px;

    color: var(--green);
}


/* PRODUCTOS */

.purchase-history-products {
    display: grid;

    gap: 9px;

    padding:
        0 17px
        17px;
}


.purchase-history-product {
    display: flex;
    align-items: center;

    gap: 11px;

    padding: 10px;

    background: #0d121a;

    border-radius: 11px;
}


.purchase-history-product img {
    width: 52px;
    height: 52px;

    flex: 0 0 auto;

    object-fit: cover;

    border-radius: 9px;
}


.purchase-history-product-info {
    min-width: 0;
    flex: 1;
}


.purchase-history-product-info strong {
    display: block;

    margin-bottom: 3px;

    font-size: 13px;
}


.purchase-history-product-info span {
    color: var(--gray);

    font-size: 11px;
}


.purchase-history-product-price {
    color: var(--green);

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


/* SIN COMPRAS */

.purchases-empty {
    padding: 45px 20px;

    text-align: center;

    background: #151c27;

    border-radius: 17px;
}


.purchases-empty i {
    margin-bottom: 15px;

    color: var(--green);

    font-size: 37px;
}


.purchases-empty h3 {
    margin-bottom: 7px;

    font-size: 19px;
}


.purchases-empty p {
    color: var(--gray);

    font-size: 13px;
    line-height: 1.5;
}


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

@media (max-width: 600px) {

    .purchases-overlay {
        padding: 9px;

        align-items: flex-start;

        overflow-y: auto;
    }


    .purchases-modal {
        width: 100%;
        max-height: none;

        margin: 8px auto;

        padding: 18px 14px;

        border-radius: 19px;
    }


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


    .purchases-summary {
        gap: 8px;
    }


    .purchases-summary > div {
        padding: 12px;
    }


    .purchases-summary strong {
        font-size: 17px;
    }


    .purchase-history-main {
        padding: 14px;
    }


    .purchase-history-folio strong {
        font-size: 14px;
    }


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


    .purchase-history-info > div:last-child {
        grid-column: 1 / -1;
    }


    .purchase-history-product img {
        width: 45px;
        height: 45px;
    }

}
/* =========================================================
   AJUSTE VISUAL — MIS COMPRAS
   Más ancho, menos vertical y mejor centrado
========================================================= */

.purchases-overlay {
    align-items: center !important;
    padding: 28px !important;
}
.purchases-modal {
    width: min(720px, 94vw) !important;
    max-width: 720px !important;

    max-height: 86vh !important;

    padding: 28px !important;
    border-radius: 24px !important;
}


/* CABECERA MÁS ESPACIOSA */

.purchases-header {
    margin-bottom: 20px !important;
}

.purchases-header h2 {
    font-size: 31px !important;
}

.purchases-header p {
    font-size: 14px !important;
}


/* RESUMEN MÁS HORIZONTAL */

.purchases-summary {
    grid-template-columns:
        repeat(2, minmax(0, 1fr)) !important;

    gap: 14px !important;

    margin-bottom: 20px !important;
}

.purchases-summary > div {
    padding: 15px 18px !important;
}


/* TARJETA DE COMPRA MÁS ANCHA */

.purchase-history-main {
    padding: 18px 20px !important;
}

.purchase-history-top {
    margin-bottom: 13px !important;
}

.purchase-history-info {
    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    gap: 10px !important;

    margin-bottom: 0 !important;
}

.purchase-history-info > div {
    padding: 11px 13px !important;
}


/* DETALLES */

.purchase-history-details summary {
    padding: 13px 20px !important;
}

.purchase-history-products {
    padding:
        0 20px
        18px !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 601px) and (max-width: 900px) {

    .purchases-modal {
        width: min(820px, 95vw) !important;

        padding:
            26px 24px !important;
    }

}


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

@media (max-width: 600px) {

    .purchases-overlay {
        align-items: flex-start !important;

        padding:
            12px
            8px !important;

        overflow-y: auto;
    }

    .purchases-modal {
        width: 100% !important;

        max-height: none !important;

        margin:
            10px auto !important;

        padding:
            20px
            14px !important;
    }

    .purchases-header h2 {
        font-size: 24px !important;
    }

    .purchase-history-info {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            ) !important;
    }

    .purchase-history-info > div:last-child {
        grid-column:
            1 / -1;
    }

}
/* =========================================
   FLECHAS DEL CARRUSEL DE CATEGORÍAS
========================================= */

.category-slider {
    position: relative;
    overflow: visible;
}

.category-slider .prev-category,
.category-slider .next-category {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
}

.category-slider .prev-category {
    left: -70px;
}

.category-slider .next-category {
    right: -70px;
}

@media (max-width: 1024px) {
    .category-slider .prev-category {
        left: -50px;
    }

    .category-slider .next-category {
        right: -50px;
    }
}

@media (max-width: 767px) {
    .category-slider .prev-category,
    .category-slider .next-category {
        display: none !important;
    }
}
.purchases-modal {
    display: flex;
    flex-direction: column;

    width: min(720px, 94vw) !important;
    max-width: 720px !important;

    max-height: 85vh !important;

    padding: 28px !important;

    overflow: hidden !important;
}
.purchases-header {
    flex-shrink: 0;
}
.purchases-list {
    display: grid;
    gap: 12px;

    margin-top: 18px;
    padding-right: 6px;

    max-height: 55vh;
    overflow-y: auto;

    flex: none;
}