/* ==========================================================
   PRODUCTO.CSS
   TIENDA DE JUEGOS
========================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:'Poppins',sans-serif;
    background:#f6f6f6;
    color:#222;

}

img{

    max-width:100%;
    display:block;

}

a{

    text-decoration:none;

}

ul{

    list-style:none;

}

.contenedor{

    width:92%;
    max-width:1400px;
    margin:auto;

}


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

.header-producto{

    background:#fff;
    box-shadow:0 4px 15px rgba(0,0,0,.08);

}

.header-producto .contenedor{

    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:22px 0;

}

.logo img{

    width:165px;

}

.header-producto nav{

    display:flex;
    align-items:center;
    gap:12px;
    font-size:15px;

}

.header-producto nav a{

    color:#666;
    transition:.25s;

}

.header-producto nav a:hover{

    color:#ff6600;

}

.header-producto nav strong{

    color:#ff6600;

}


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

.producto{

    padding:60px 0;

}

.producto-contenedor{

    width:92%;
    max-width:1400px;
    margin:auto;

    display:grid;
    grid-template-columns:640px 1fr;
    gap:60px;

    align-items:flex-start;

}


/*=========================================
GALERÍA
=========================================*/

.galeria{

    display:flex;
    gap:20px;

}

.miniaturas{

    width:95px;

    display:flex;
    flex-direction:column;

    gap:14px;

}

.miniaturas img{

    width:95px;
    height:95px;

    object-fit:cover;

    border-radius:14px;

    border:2px solid transparent;

    cursor:pointer;

    transition:.25s;

}

.miniaturas img:hover{

    border-color:#ff6600;

}

.mini.activa{

    border-color:#ff6600;

}

.imagen-principal{

    flex:1;

}

.imagen-principal img{

    width:100%;

    height:560px;

    object-fit:contain;

    background:#fff;

    border-radius:20px;

    padding:25px;

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

}


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

.info-producto{

    display:flex;

    flex-direction:column;

}

.marca{

    color:#777;

    font-size:18px;

    margin-bottom:10px;

}

.info-producto h1{

    font-size:56px;

    line-height:1;

    margin-bottom:18px;

}

.precio{

    font-size:36px;

    color:#ff6600;

    font-weight:700;

    margin-bottom:20px;

}

.info-producto p{

    font-size:21px;

    line-height:1.7;

    color:#444;

    margin-bottom:22px;

}

/* =========================================
   BOTÓN COMPRAR
========================================= */

.boton-whatsapp{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    width:180px;

    height:48px;

    background:#17145F;

    color:#fff;

    font-size:15px;

    font-weight:700;

    border-radius:10px;

    margin:15px 0 30px;

    text-decoration:none;

    transition:.25s ease;

    box-shadow:0 5px 14px rgba(23,20,95,0.18);

}

.boton-whatsapp:hover{

    background:#29236F;

    transform:translateY(-2px);

    box-shadow:0 8px 18px rgba(23,20,95,0.25);

}


/*=========================================
SEPARADORES
=========================================*/

.info-producto hr{

    border:none;

    border-top:1px solid #e5e5e5;

    margin:25px 0;

}


/*=========================================
TÍTULOS
=========================================*/

.info-producto h3{

    font-size:26px;

    margin-bottom:15px;

}


/*=========================================
LISTA
=========================================*/

.info-producto ul{

    padding-left:20px;

}

.info-producto li{

    list-style:disc;

    margin-bottom:12px;

    color:#555;

    font-size:18px;

}


/*=========================================
EFECTOS
=========================================*/

.imagen-principal img{

    transition:.35s;

}

.imagen-principal img:hover{

    transform:scale(1.04);

}

.miniaturas img{

    transition:.25s;

}

.miniaturas img:hover{

    transform:scale(1.05);

}


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

@media(max-width:1100px){

    .producto-contenedor{

        grid-template-columns:1fr;

    }

    .galeria{

        justify-content:center;

    }

}


@media(max-width:768px){

    .header-producto .contenedor{

        flex-direction:column;

        gap:20px;

    }

    .galeria{

        flex-direction:column;

        align-items:center;

    }

    .miniaturas{

        flex-direction:row;

        width:auto;

    }

    .miniaturas img{

        width:70px;

        height:70px;

    }

    .imagen-principal{

        width:100%;

    }

    .imagen-principal img{

        height:380px;

    }

    .info-producto h1{

        font-size:38px;

    }

    .precio{

        font-size:30px;

    }

}

/* ==========================================================
   BARRA PROMOCIONAL SUPERIOR
========================================================== */

.barra-promocional {

    width: 100%;
    height: 42px;

    overflow: hidden;

    background: #17145F;

    display: flex;
    align-items: center;

    position: relative;

    z-index: 9999;
}


.barra-promocional-contenido {

    display: flex;
    align-items: center;

    gap: 35px;

    width: max-content;

    white-space: nowrap;

    animation: moverBarraPromocional 24s linear infinite;

    color: #ffffff;

    font-family: 'Poppins', sans-serif;

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

    letter-spacing: 0.2px;
}


.barra-promocional-contenido strong {

    color: #FF6500;

    font-size: 15px;

    font-weight: 800;
}


.barra-promocional-contenido b {

    color: rgba(255,255,255,0.45);

    font-weight: 400;
}


@keyframes moverBarraPromocional {

    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }

}


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

@media (max-width: 600px) {

    .barra-promocional {

        height: 38px;

    }

    .barra-promocional-contenido {

        gap: 25px;

        font-size: 12px;

    }

    .barra-promocional-contenido strong {

        font-size: 13px;

    }

}

/* ==========================================================
   BLOQUE COMPRA CON CONFIANZA
========================================================== */

.columna-galeria .beneficios-producto {

    display: block !important;

    width: 100% !important;

    margin-top: 35px !important;

    padding: 24px !important;

    box-sizing: border-box !important;

    background: #F4F3FA;

    border: 1px solid #E4E1F2;

    border-radius: 22px;

    box-shadow: 0 10px 28px rgba(23, 20, 95, 0.08);

}


/* ==========================================================
   ENCABEZADO
========================================================== */

.beneficios-titulo {

    display: flex;

    align-items: center;

    gap: 14px;

    padding-bottom: 17px;

    border-bottom: 1px solid #DDD9EC;

}


.beneficios-icono {

    width: 46px;

    height: 46px;

    min-width: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #17145F;

    font-size: 21px;

    box-shadow: 0 5px 12px rgba(23, 20, 95, 0.15);

}


.beneficios-titulo h3 {

    margin: 0;

    color: #17145F;

    font-size: 17px;

    font-weight: 800;

}


.beneficios-titulo p {

    margin: 4px 0 0;

    color: #66627A;

    font-size: 11px;

    line-height: 1.4;

}


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

.beneficios-lista {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 12px;

    padding: 19px 0;

}


.beneficio-item {

    display: flex;

    align-items: center;

    gap: 10px;

}


.beneficio-icono {

    width: 40px;

    height: 40px;

    min-width: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 11px;

    background: #FFFFFF;

    border: 1px solid #E5E2F0;

    font-size: 18px;

}


.beneficio-item strong {

    display: block;

    color: #17145F;

    font-size: 11px;

    font-weight: 800;

}


.beneficio-item small {

    display: block;

    margin-top: 2px;

    color: #777389;

    font-size: 9px;

    line-height: 1.3;

}


/* ==========================================================
   ENVÍO GRATIS
========================================================== */

.beneficio-envio {

    display: flex;

    align-items: center;

    gap: 13px;

    padding: 14px 16px;

    border-radius: 15px;

    background: linear-gradient(
        135deg,
        #17145F 0%,
        #29236F 100%
    );

    box-shadow: 0 6px 16px rgba(23, 20, 95, 0.15);

}


.beneficio-envio > span {

    width: 40px;

    height: 40px;

    min-width: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #FF6500;

    font-size: 18px;

    box-shadow: 0 3px 8px rgba(0,0,0,0.15);

}


.beneficio-envio strong {

    display: block;

    color: #FFFFFF;

    font-size: 13px;

    font-weight: 800;

}


.beneficio-envio small {

    display: block;

    margin-top: 2px;

    color: rgba(255,255,255,0.85);

    font-size: 10px;

}


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

@media (max-width: 700px) {

    .columna-galeria .beneficios-producto {

        margin-top: 24px !important;

        padding: 18px !important;

        border-radius: 18px;

    }


    .beneficios-lista {

        grid-template-columns: 1fr;

        gap: 12px;

    }

}

/* ==========================================================
   CORRECCIÓN GALERÍA PRODUCTO
========================================================== */

.columna-galeria {
    width: 100%;
    min-width: 0;
}


/* GALERÍA: MINIATURAS + IMAGEN PRINCIPAL */
.galeria-nueva {
    display: grid !important;

    grid-template-columns: 90px minmax(0, 1fr) !important;
    grid-template-rows: auto !important;

    column-gap: 20px !important;
    row-gap: 0 !important;

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

    align-items: start !important;

    box-sizing: border-box !important;
}


/* MINIATURAS */
.galeria-nueva > .miniaturas {
    grid-column: 1 !important;
    grid-row: 1 !important;

    display: flex !important;
    flex-direction: column !important;

    width: 90px !important;
    height: auto !important;

    gap: 18px !important;

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

    box-sizing: border-box !important;
}


/* CADA MINIATURA */
.galeria-nueva > .miniaturas .mini {
    display: block !important;

    width: 90px !important;
    height: 90px !important;

    min-width: 90px !important;
    min-height: 90px !important;

    object-fit: cover !important;

    margin: 0 !important;

    border-radius: 14px !important;
    box-sizing: border-box !important;

    cursor: pointer;
}


/* IMAGEN PRINCIPAL */
.galeria-nueva > .imagen-principal {
    grid-column: 2 !important;
    grid-row: 1 !important;

    display: block !important;

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

    min-width: 0 !important;

    margin: 0 !important;

    padding: 28px !important;

    box-sizing: border-box !important;

    background: #ffffff;

    border-radius: 24px;

    overflow: hidden;

    box-shadow:
        0 12px 35px rgba(23, 20, 95, 0.08);
}


/* IMAGEN GRANDE */
.galeria-nueva > .imagen-principal img {
    display: block !important;

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

    max-width: 100% !important;
    max-height: 650px !important;

    object-fit: contain !important;

    margin: 0 auto !important;
}


/* ==========================================================
   BENEFICIOS
   DEBAJO DE LA GALERÍA COMPLETA
========================================================== */

.columna-galeria > .beneficios-producto {
    display: block !important;

    width: 100% !important;

    margin-top: 35px !important;

    box-sizing: border-box !important;
}


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

@media (max-width: 700px) {

    .galeria-nueva {
        grid-template-columns: 65px minmax(0, 1fr) !important;

        column-gap: 12px !important;
    }

    .galeria-nueva > .miniaturas {
        width: 65px !important;

        gap: 12px !important;
    }

    .galeria-nueva > .miniaturas .mini {
        width: 65px !important;
        height: 65px !important;

        min-width: 65px !important;
        min-height: 65px !important;

        border-radius: 10px !important;
    }

    .galeria-nueva > .imagen-principal {
        padding: 15px !important;

        border-radius: 18px !important;
    }

    .columna-galeria > .beneficios-producto {
        margin-top: 24px !important;
    }

}