.seccion-banner {
    .banner-categoria {
        width: 100%;
        aspect-ratio: 11/1;
    }
}

.seccion-productos {
    .container {
        width: 100%;
        margin: 2% auto;

        .div-productos {
            width: 75%;
            margin: 0 30px;
            margin-bottom: 100px;

            .grafico-destacado {
                display: flex;
                justify-content: space-between;
                width: 100%;
                max-width: 1920px;
                height: 70px;
                background-color: transparent;
                background-image: url(../img/grafico-destacado.webp);
                background-repeat: no-repeat;
                background-size: cover;
                border: unset;

                .div-titulo {
                    display: flex;
                    align-items: center;

                    .titulo {
                        margin: 0 35px;
                        font-size: 25px;
                        font-weight: 700;
                        color: white;
                    }
                }

                .div-mostrar-todo {
                    display: flex;
                    align-items: end;
                    padding-bottom: 10px;

                    .mostrar-todo {
                        color: black;
                        cursor: pointer;
                        background: none;
                        border: unset;

                        &:hover {
                            color: #bd1f2d;
                            text-shadow: 0 0 1px #bd1f2d;
                            cursor: pointer;
                            user-select: none;
                            background-color: transparent;
                        }
                    }
                }
            }

            .productos {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                /*.producto {
                    width:250px;
                    margin:30px;
                    text-align:center;
                    cursor:pointer;
                    
                    & img {
                        width: 100%;
                        border: 4px solid #BDBEC1;
                    }

                    & img:hover {
                        border: 4px solid #E80004;
                    }

                    & p {
                        margin-top: 10px;
                        color: gray;
                        text-align: center;
                    }

                    & button {
                        padding:8px 25px;
                        margin-top:10px;
                        font-size:14px;
                        color:white;
                        background-color: #BE0102;
                        border:unset;
                        border-radius:15px;
                    }
                }*/

                .producto {
                    display: grid;
                    grid-template-columns: fit-content(100%) auto fit-content(100%);
                    width: 100%;
                    padding-bottom: 10px;
                    margin-top: 30px;
                    border-bottom: solid 4px #28070b;

                    .div-imagen {
                        img {
                            width: 250px;
                            cursor: pointer;
                        }

                        .div-boton-mobile {
                            display: none;
                            align-items: end;
                            padding: 0 10px;

                            button {
                                width: 150px;
                                aspect-ratio: 5/1;
                                color: white;
                                cursor: pointer;
                                background-color: #BE0102;
                                border: unset;
                                border-radius: 15px;
                            }
                        }
                    }

                    .div-detalle {
                        display: flex;
                        flex-direction: column;
                        gap: 20px;
                        justify-content: start !important;
                        padding: 0 20px;

                        .titulo {
                            p {
                                font-size: x-large;
                                font-weight: 700;
                                cursor: pointer;
                            }
                        }

                        .detalle {
                            display: grid;
                            grid-template-columns: repeat(2, 1fr);

                            span {
                                font-family: Arial, Helvetica, sans-serif;
                                font-size: 14px;
                                font-weight: 100;
                                color: #6e6e6e;
                            }

                            p {
                                font-family: Arial, Helvetica, sans-serif;
                                font-size: 14px;
                                font-weight: 800;
                                color: #414042;
                            }
                        }
                    }

                    .div-boton {
                        display: flex;
                        align-items: end;
                        padding: 0 10px;

                        button {
                            width: 150px;
                            aspect-ratio: 5/1;
                            color: white;
                            cursor: pointer;
                            background-color: #BE0102;
                            border: unset;
                            border-radius: 15px;
                        }
                    }
                }
            }
        }
    }
}

/* Contenedor que mantiene la forma */
.skeleton-wrapper {
    position: relative;
    width: 100%;
    background-color: #ffffff;
    overflow: hidden;
}

/* El efecto de brillo moviéndose */
.shimmer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient( 90deg, rgba(240, 240, 240, 0) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(240, 240, 240, 0) 100% );
    animation: shimmer-effect 1.5s infinite;
    z-index: 1;
}

/* La imagen real */
.skeleton-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0; /* Invisible al inicio */
    transition: opacity 0.4s ease-in-out;
    position: relative;
    z-index: 2;
}

/* Cuando la imagen carga, ocultamos el shimmer y mostramos la foto */
.skeleton-wrapper.loaded .shimmer {
    display: none;
}

.skeleton-wrapper.loaded img {
    opacity: 1 !important;
}

/* Animación */
@keyframes shimmer-effect {
    0% {
        transform: translateX(-100%);
    }

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

@media screen and (max-width: 1024px) {
    .seccion-productos {
        .container {
            position: relative;
            display: flex;
            flex-direction: column;

            .div-productos {
                width: 95%;
                margin: auto;
                
                .grafico-destacado {
                    height: 35px;
                    .div-titulo {
                        .titulo {
                            margin: 0 15px;
                            font-size: 12px;
                        }
                    }

                    .div-regresar {
                        .btn-regresar {
                            padding: 5px 10px;

                            span {
                                display: none;
                            }
                        }
                    }
                }

                .productos {
                    .producto {
                        .div-imagen {
                            img {
                                width: 170px;
                            }
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 600px) {
    .seccion-productos {
        .container {
            .div-productos {
                .productos {
                    .producto {
                        max-width: 569px;
                        margin-top: 10px;

                        .div-imagen {
                            display: flex;
                            flex-direction: column;
                            gap: 10px;
                            align-items: center;
                            justify-content: center;
                            
                            img {
                                width: 100px;
                            }

                        .div-boton-mobile {
                            display: flex;

                            button {
                                width: 80px;
                            }
                        }
                        }

                        .div-detalle {
                            gap: 5px;
                            padding: 0 10px;

                            .titulo {
                                p {
                                    font-size: 14px;
                                }
                            }

                            .detalle {
                                p {
                                    font-size: 12px;
                                }

                                span {
                                    font-size: 10px;
                                }
                            }
                        }

                        .div-boton {
                            display: none;
                        }
                    }
                }
            }
        }
    }
}