/* PARA RESOLUCIONES DE MOVILES ************************ */
@media (max-width: 599px) {

    html, body {
        height: 100%;
    }

    body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;

    }

    main {
        flex: 1; /* El contenido principal ocupará el espacio restante */
        overflow: auto;/* Asegura que el contenido no se corte */
    }

    header {
        position: fixed;
        top: 0px;
        height: 175px; /* Asegura que el header no desaparezca */
        min-height: 175px;
        padding: 0; /* Añadir padding para espacio */
        z-index: 999 !important; /* Asegura que el header esté encima del contenido */
    }

    .header-text h1 {
        font-size: 1.2rem;
    }

    .header-text .subtitle {
        font-size: 0.55rem;
    }

    .tooltip-text-logo {
        width: 85px;
        top: 8px; /* Ajusta la posición */
        left: 29%;
        background-color: rgb(252, 249, 249);
        color: rgb(114, 19, 19);  
        font-size: small;             
    }

    .navbar {
        position: fixed;
        top: 0px;
        width: 100%;
        height: auto;
        display: flex;
        padding-top: 2%;
        flex-direction: column;
        align-items: center; /* Centrar los elementos de la navegación */
        margin-left: 0;
    }

    nav{
        margin: auto;
    }

    nav ul {
        flex-direction: row; /* Mostrar los elementos del menú en fila horizontal */
        flex-wrap: wrap; /* Permitir que los elementos se ajusten si no caben en una línea */
        justify-content: center; /* Centrar los elementos del menú */
        padding: 0;
        margin-right: 0%;
    }

    nav ul li {
        margin: 5px 10px; /* Ajustar los márgenes para el espaciado */
        font-size: 0.7rem; /* Reducir el tamaño de la fuente para pantallas pequeñas */
    }

    nav ul li a {
        font-size: 0.7rem; /* Reducir el tamaño de la fuente para pantallas pequeñas */
    }


    /* Estilos para el icono del home */
    .home-icon-wrapper {
        position: fixed;
        top: 13px; 
        left: 87vw;
        width: 35px;
        height: 35px;
        z-index: 999; /* Asegura que el icono esté siempre visible */
    }

    .home-icon-wrapper-supplies {
        position: fixed;
        top: 13px; 
        left: 87vw;
        width: 35px;
        height: 35px;
        z-index: 999;
    }

    .tooltip-text {
        width: 85px;
        background-color: rgb(252, 249, 249);
        color: rgb(114, 19, 19);
        top: -2px; /* Ajusta para que el tooltip aparezca fuera del borde */
        right: 85px;
        font-size: small;
    }

    .tooltip-text-supplies {
        width: 85px;
        background-color: rgb(252, 249, 249);
        color: rgb(114, 19, 19);
        top: -2px; /* Ajusta para que el tooltip aparezca fuera del borde */
        right: 85px;
        font-size: small;
    }

    /* Estilos para los iconos de las RRSS */
    .social-icons {
        position: absolute;
        bottom: 15px;
        right: 20px; /* Ajustado para dispositivos más pequeños */
        display: flex;
        gap: 15px;
        z-index: 2;
        overflow: hidden;
    }

    .social-icons a {
        font-size: 21px; /* Tamaño de los iconos */
        overflow: hidden;
    }

    /* Estilos para la barra de notificaciones */
    .notification-bar{
        position: sticky;
        top: 175px;
    }

    .notification-viewport{
        position: relative;
        width: 100%;
        height: 67px;       /* <<< ajusta aquí si quieres más/menos alto (48–60px) */
        padding: 0;   /* antes: 5px 0;  -> más espacio arriba */
        margin: 0 0 0 4%  ;
        overflow: hidden;
    }


    .close-btn {
        right: 1%; /* Ajusta la distancia desde el margen derecho en pantallas pequeñas */
        top: 50%; /* Posiciona el botón en el 50% del contenedor verticalmente */
        transform: translateY(-50%); /* Desplaza el botón hacia arriba el 50% de su propia altura para centrarlo */
        font-size: 25px; /* Quizás reducir un poco el tamaño de la cruz si es necesario */
    }

    /* Estilos para el footer */
    footer {
        width: 100%;
        background-color: #333;
        padding: 20px 0;
        text-align: center;
        color: white;
        flex-shrink: 0;
        position: sticky;
        bottom: 0;
        height: auto; /* Permitir que el footer ajuste su altura */
        min-height: 50px; /* Proporcionar una altura mínima */
        z-index: 998 !important; /* Asegura que el footer esté visible debajo del contenido */
    }

    /* ESTILOS PARA LA PAGINA Index.html ****************************/
    
    .gallery {
        margin-top: calc(90px + 10vh);
        padding: 10px;
        width: 100%;
        height: auto;             /* antes 100vh */
        overflow-y: auto;         /* antes scroll: mejor auto */
    }

    .grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* fuerza columnas elásticas */
        gap: 16px;   /* más respiración entre tarjetas */
    }

    .image-container {
        width: 95%; /* Ajustar el ancho para pantallas pequeñas */
        margin-bottom: 1em; /* Añadir margen entre las imágenes */
        margin-left: 0.5em;
        position: relative;
        transition: transform 0.3s ease, filter 0.3s ease; /* Transición suave para el zoom */
        .image-container {
            
        /*les damos tamaño al triangulo, centramos letras en el triangulo y le damos tamaño a dichas letras. Estas variables vienen de .image-container; de syles.css*/    
        --corner: 70px;
        --tri-center-offset: 8%;/* % del lado: centroide */
        --label-size: 0.9rem; 
    }
        /* No tocar --tri-center-offset; sigue valiendo el -7% del styles.css */

    }

    .image-container img {
        width: 100%;
        height: 100%; /* Asegurar que las imágenes cubran el contenedor */
        object-fit: cover; /* Asegurar que las imágenes cubran el contenedor */
        border-radius: 8px;
        transition: transform 0.3s ease, filter 0.3s ease; /* Transición suave para el zoom y filtro */
    }

    .image-container:hover img {
        transform: scale(1.05); /* Efecto de zoom */
        filter: brightness(0.6); /* Filtro de color claro */
    }



    /* Estilos para la página howtobuy.html **************************/
    .how-to-buy-section{
        position: relative;    
        margin: calc(150px + 3vh) auto 6vh;
        width: min(92vw, 720px);
        display: flex;
        flex-direction: column;
        gap: clamp(6px, 1.2vh, 12px); /* separación entre iconos y texto */
        padding: clamp(12px, 3vw, 20px);
        overflow: visible;/* no recortar sombras/bordes */
    }

    .icons-column{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
        gap: clamp(8px, 2.5vw, 16px);
        width: 100%;
        margin: 0 auto;
        padding: 0;
    }

    .icon-box{
        aspect-ratio: 1 / 0.75;
        display: grid;
        place-items: center;
        padding: clamp(6px, 2vw, 12px);
    }

    .icon-box i{
        font-size: clamp(1rem, 5vw, 2rem);
    }

    .icon-box p{
        font-size: clamp(0.6rem, 2.5vw, 1rem);
        margin: 0;
    }

    .text-column{
        display: flex;
        justify-content: center;
        margin: 0;
        padding: 0;
    }

    .how-to-buy-text{
    /* caja centrada y cómoda de leer */
        width: min(100%, 700px);
        margin: 0 auto;
        padding: clamp(12px, 3vw, 20px);

    /* estética coherente con el resto */
        background: #e6e6e6;
        border: 1px solid #999;
        box-shadow: none;

    /* tipografía y legibilidad */
        font-size: clamp(0.8rem, 2.5vw, 1rem);
        line-height: 1.;

    /* scroll interno + ancla returns */
        max-height: min(65svh, 580px);
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        padding-bottom: 375px; /* espacio para #returns */
    }

    /* Evitar hueco arriba si el primer elemento es un heading */
    .how-to-buy-text h1:first-child,
    .how-to-buy-text h2:first-child,
    .how-to-buy-text h3:first-child{
        margin-top: 0;
    }

    /* Compacidad de párrafos sin perder aire */
    .how-to-buy-text p{
        margin-top: 0.4em;
    } 


    /* Estilos about.html */
    .about {
        margin-top: 185px; /* Ajustar dependiendo de la altura del header y la barra de notificación */
        display: grid;
        grid-template-columns: 1fr; /* Distribución en columna */
        gap: 20px; /* Espacio entre la imagen y el texto */
        width: 95%; /* Ajustar el ancho para aprovechar más la pantalla */
        max-width: 580px;
        height: auto !important; /* Ocupa toda la altura visible de la ventana */
        max-height: none !important;
        box-sizing: border-box;
        justify-items: center; /* Centrar imagen y texto horizontalmente */
        align-items: start; /* Alinear el contenido en la parte superior */
        padding-left: 4%;
        padding-right: 4%;
        margin-bottom: clamp(72px, 9vh, 110px) !important;

    }

    .about-image-container {
        width: 100%; /* Asegura que el contenedor ocupe todo el ancho disponible */
        display: flex; /* Usamos flexbox para centrar el contenido */
        justify-content: center; /* Centrar la imagen horizontalmente */ 
        height: 250px;
        margin-bottom: 0; /* Añadir más espacio entre la imagen y el texto */
        
             
    }

    .about-image {
        width: 80%; /* Aumentar el tamaño de la imagen */
        max-width: 325px; /* Tamaño máximo más grande */
        height: 100%;
        object-fit: cover;
        border-radius: 10px;
        margin-top: -0.6%;
    }

    .about-text {
        text-align: justify;
        font-size: 0.8rem;
        width: 100%;
        height: auto !important;
        max-height: none !important;
        padding: 2%;
        margin-top: -3%; /* Separar un poco más el texto de la imagen */
        margin-left: 2%;
        margin-right: 2%;
        box-sizing: border-box;
        z-index: 1; /* Asegura que el texto esté por encima de la imagen */
        overflow-y: visible !important;
    }

    .right-column {
        display: flex;
        flex-direction: column;
        align-items: flex-end; /* Alinea los elementos al final de la columna */
        margin-right: 1px;
    }
    
    .right-column .right-align {
        text-align: right;
        padding-right: 0%;
    }
    
    .right-align {
        font-size: 0.65rem;
    }
    
    .name {
        font-family: "Dancing Script", cursive;
        font-size: 1.2rem;
    }



    /* Estilos para la página contact.html */
    .contact-section{       
        margin: calc(105px + 14vh) auto;
        padding: 0;
        width: auto;
        max-width: 450px;
        min-width: 350px;
        height: 100vh;
        min-height: 475px;

    }
    
    .contact-text{
        width: 85%;
        background-color: #dadada;
        border-radius: 10px;
        padding: 2%;
    }

    .icons-contact-wrapper {
        width: 75%; 
        min-width: 250px;
        max-width: 300px;
        height: auto;
        max-height: 300px;
        gap: 15px; 
        padding: 5%;
        margin-left: 0%;
    }

    .contact-icon-box:hover {
        transform: scale(1.1);
        border: none;
    }

    .contact-icon-box {
        width: 100px;
        height: 100px;
        aspect-ratio: 1;
    }

    .contact-icon-box i {
        font-size: 1.8rem;
    }

    .contact-icon-box p {
        font-size: 0.8rem;
        margin: 5px 0 0 0;
        color: #594545;
    }

    .contact-text {
        font-size: 0.9rem;
        margin-bottom: 20px; /* Espacio entre el texto y los íconos */
        padding-top: 3%;
    }


    /* Estilos drone_reeds.html */
    .drone-reeds {        
        margin: calc(86px + 10vh) auto auto;
        display: flex; /* Cambiamos a flexbox para apilar los elementos verticalmente */
        flex-direction: column;
        padding: 2%; /* Reducimos el padding para ajustar mejor en pantallas pequeñas */
        height: 100vh; /* Fijar altura en píxeles */
        min-height: 400px;
        max-height: 920px; /* Limitar la altura máxima */
        overflow-y: scroll; /* Habilitar el scroll vertical */
    }

    .drone-reeds-image{
        width: 96%; 
        height: 95%; /* Tamaño fijo para la imagen */
        min-height: 200px;
        max-height: 200px;
        margin: auto; /* Mantenemos la galería en el medio */        
        margin-top: 1%;
        display: block;
        object-fit: cover;
    }

    #chanter-reed-gallery,
    #template-reed-CO-gallery{
        width: 100%;
    }

    .drone-reeds-description {
        font-size: 0.8rem;
        width: 95.5%;
        height: 100vh;
        min-height: 565px;/*altura recuadro gris (la descripcion) en los móviles*/
        max-height: 565px;/*altura recuadro gris (la descripcion) en los móviles*/
        padding-top: 0%;
        margin-top: 4%;
        margin-left: 2.5%;
        overflow-y: hidden; /* Habilitar scroll */
    }

    .purchase-info {
        width: 95.4%;
        height: 160px; /* Tamaño fijo para la sección de compra */
        min-height: 150px;
        max-height: 160px;
        margin: auto;
        margin-top: 4%; /* Ajustamos el espacio entre los elementos */
        margin-left: 2.5%;
        background-color: bisque;
        border-radius: 10px;
        gap: 1px;
        overflow-y: hidden; /* Habilitar scroll si es necesario */
    }

    .drone-reeds-image .arrow,
    #chanter-reed-gallery .arrow {
        font-size: 4em; /* Reducimos el tamaño de las flechas en pantallas pequeñas */
        padding: 5px;
    }

    .stock {
        width: 100%; /* Hacemos que los elementos ocupen el 100% del ancho */
        height: 25%;
        text-align: center; /* Centramos el texto */
        margin-top: 0%;
    }

    .prices {
        width: 100%; /* Hacemos que los elementos ocupen el 100% del ancho */
        height: 45%;
        text-align: center; /* Centramos el texto */
        margin-top: 0%;
        padding-bottom: 2%;
        font-size: 0.8rem;
        line-height: 1.5;
    }

    .price-highlight {
        font-weight: bold;
        font-size: 0.85rem;
    }

    .purchase-button {
        width: 100%; /* Hacemos que los elementos ocupen el 100% del ancho */
        height: 30%;
        text-align: center; /* Centramos el texto */
        margin-bottom: 0%;
        padding-top: 3%;
    }

    .button {
        padding: 4px 14px; /* Aumentamos el tamaño del botón para pantallas pequeñas */
        margin-top: 2%;
        font-size: 1.1rem; /* Ajustamos el tamaño de la fuente */
        border-radius: 3px;
        text-decoration: none;
        text-align: center;
        transition: transform 0.3s ease, background-color 0.3s ease;
    }


    .drone-reeds-description ul {
        padding-left: 10px; /* Reducimos el padding para evitar desbordamientos */
    }

    .drone-reeds-description ul li {
        margin-left: 10px; /* Reducimos el margen izquierdo de los elementos de la lista */
    }

    .title {
        font-size: 1.1rem; /* Aumenta el tamaño de la fuente */  
    }



    /* Sub-mediaquery creada para problemas en resoluciones menores a 750px */
    @media (max-height: 750px) {

        main {
            flex: 1;
            overflow: auto !important;
        }        

        footer {
            position: sticky;
            height: 50px;
            min-height: 25px;
        }

        .navbar{
            position: fixed;
            height: auto;
            min-height: 86px;
            max-height: 100px;
        }

        .header-text h1 {
            font-size: 1.2rem;
        }
    
        .header-text .subtitle {
            font-size: 0.55rem;
        }


 
        .home-icon{
            font-size: 21px;
        }

        /*Estilos para index.html*/
        .gallery {
            margin-top: 175px;
            
        }

        /* Estilos howtobuy.html */
        .how-to-buy-text {
            max-height: min(58svh, 510px); /*max-height: min(60svh, 550px);*/
        }

        /* Estilos about.html */
        .about {
            margin-top: 185px; /* Ajustar dependiendo de la altura del header y la barra de notificación */
        }

        .about-text{
            height: auto !important;
            max-height: none !important;
        }

        /* Estilos drone_reeds.html */
        .drone-reeds {        
            margin: calc(95px + 10vh) auto auto;
        }

        @media(max-height:720px) {
            
        /*Estilos index.html*/
        .gallery {
            margin-top: 175px;
            
        }

        /* Estilos howtobuy.html */
        .how-to-buy-text {
            max-height: min(56svh, 490px);/*max-height: min(60svh, 550px);*/
        }


        /*EStilos para about.html */
            .about {
                margin-top: 185px; /* Ajustar dependiendo de la altura del header y la barra de notificación */
                height: auto !important;
                max-height: none !important;
            }

            .about-text{
                height: auto !important;
                max-height: none !important;
            }
    
            
        /* Estilos para la página contact.html */
            .contact-section{       
                margin: calc(90px + 10vh) auto;
                padding: 0;
                width: auto;
                max-width: 450px;
                min-width: 350px;
                height: 100vh;
                min-height: 475px;

            }
            
            .contact-text{
                width: 85%;
                background-color: #dadada;
                border-radius: 10px;
            }

            .icons-contact-wrapper {
                width: 75%; 
                min-width: 250px;
                max-width: 300px;
                height: auto;
                max-height: 300px;
                gap: 15px; 
                padding: 5%;
                margin-left: 0%;
            }

            .contact-icon-box:hover {
                transform: scale(1.1);
                border: none;
            }

            .contact-icon-box {
                width: 100px;
                height: 100px;
                aspect-ratio: 1;
            }

            .contact-icon-box i {
                font-size: 1.8rem;
            }

            .contact-icon-box p {
                font-size: 0.8rem;
                margin: 5px 0 0 0;
                color: #594545;
            }

            .contact-text {
                font-size: 0.9rem;
                margin-bottom: 20px; /* Espacio entre el texto y los íconos */
            }
                    
        }



        
            /* Sub-mediaquery creada para problemas en resoluciones menores a 620px */
            @media (max-height: 620px) {
                header {
                    height: 175px; /* Asegura que el header no desaparezca */
                    min-height: 175px;
                    padding: 0; /* Añadir padding para espacio */
                    z-index: 2; /* Asegura que el header esté encima del contenido */
                }

                main {
                    flex: 1;
                    overflow:auto !important; /* Permitir scroll en el contenido */
                }        

                footer {
                    position: sticky;
                    height: 50px;
                    min-height: 25px;
                }

                .navbar{
                    position: fixed;
                    height: auto;
                    min-height: 86px;
                    max-height: 100px;
                }

                .header-text h1 {
                    font-size: 1.2rem;
                }
            
                .header-text .subtitle {
                    font-size: 0.55rem;
                }

                
                /* Estilos howtobuy.html */

                .how-to-buy-text {
                    max-height: min(50svh, 390px);
                }

                .icons-column{
                    margin-top: 5px !important;
                }
                
                /*Estilos about.html */
                .about {
                    margin-top: 185px; /* Ajustar dependiendo de la altura del header y la barra de notificación */
                    height: auto !important;
                    max-height: none !important;
                }

                .about-text{
                    height: auto !important;
                    max-height: none !important;
                }

              
                /*Estilos contact.html */
                .contact-section {
                    position: fixed;
                    top: 50px;
                    left: 50%;
                    transform: translateX(-50%);
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    width: 100%;
                    margin: auto;

                }
            
                .contact-text {
                    width: 80%;
                    text-align: center;
                    margin-bottom: 0; /* Reduce el espacio entre el texto y los íconos */
                    font-size: 0.9rem;
                }
            
                .icons-contact-wrapper {
                    display: grid;
                    align-items: center;
                    justify-content: center;
                    grid-template-columns: repeat(4, 1fr); /* Distribuye los íconos en 4 columnas */
                    gap: 1px; /* Reduce el espacio entre los íconos */
                    width: 100%; /* Asegúrate de que ocupe el ancho completo */
                    max-width: 525px;
                    height: 225px;
                    max-height: 225px;
                    padding: 20px; /* Reducir padding para acercar más los íconos */
                    margin-top: -10%;
                    margin-left: -2%;
                }
            
                .contact-icon-box {            
                    width: 100%; /* Se ajusta a la columna asignada en el grid */
                    height: auto;
                    aspect-ratio: 1;
                }
            
                .contact-icon-box i {
                    font-size: 1.8em;
                }
            
                .contact-icon-box p {
                    font-size: 0.8em;
                }
            
                .contact-icon-box:hover {
                    transform: scale(1.1);
                    border: none;
                }



                /* Estilos drone_reeds.html */
                .drone-reeds {        
                    margin: calc(110px + 10vh) auto auto;
                }

            

                    /* Sub-mediaquery creada para problemas en resoluciones menores a 570px */
                    @media (max-height: 570px) {
                        header {
                            position: fixed;
                            display: block;
                            top: 0;
                            height: 150px; /* Asegura que el header no desaparezca */
                            min-height: 150px;
                            padding: 0; /* Añadir padding para espacio */
                            z-index: 2; /* Asegura que el header esté encima del contenido */
                        }
                        

                        main {
                            flex: 1;
                                                }

                        footer {
                            position: relative;
                            height: 50px;
                            min-height: 50px;
                            z-index: 13;
                        }

                        .navbar{
                            position: fixed;
                            height: auto;
                            min-height: 86px;
                            max-height: 100px;
                        }

                        .header-text h1 {
                            font-size: 1.2rem;
                        }


                        .header-text .subtitle {
                            font-size: 0.55rem;
                        }

                        .tooltip-text-logo {
                            width: 85px;
                            top: 8px; /* Ajusta la posición */
                        }

                        .tooltip-text {
                            top: -2px; /* Ajusta para que el tooltip aparezca fuera del borde */
                            right: 85px;
                        }
                    
                        .tooltip-text-supplies {
                            top: -2px; /* Ajusta para que el tooltip aparezca fuera del borde */
                            right: 85px;
                        }

                        .notification-bar{
                            position: sticky;
                            top: 150px;

                        }

                        /*Estilos para index.html*/
                        .gallery {
                            margin-top: 150px;
                            
                        }


                        /* Estilos para la página howtobuy.html */
                        .how-to-buy-section{
                            position: relative;    
                            margin: calc(125px + 3vh) auto 6vh;
                            
                        }

                        .how-to-buy-text {
                            max-height: min(40svh, 300px);
                        }

                
                        /*Estilos about.html */
                        .about {
                            margin-top: 150px/* Ajustar dependiendo de la altura del header y la barra de notificación */

                        }

                        .about-text{
                            height: auto !important;
                            max-height: none !important;
                        }

                        
                        /* Estilos para la página contact.html */
                        .contact-section{   
                            position: fixed;
                            top: 150px;
                            left: 50%; /* Posicionar el contenedor desde el centro */
                            transform: translateX(-50%); /* Mover el contenedor hacia la izquierda para centrarlo */    
                            margin: -2% auto;
                            padding: 0;
                            width: auto;
                            max-width: 525px;
                            height: 100vh;
                            min-height: 250px;
                            max-height: 250px;
                            overflow-y: auto;

                        }
                        
                        .contact-text{
                            width: 80%;
                            background-color: #dadada;
                            border-radius: 10px;
                        }

                        .icons-contact-wrapper {
                            display: grid;
                            align-items: center;
                            justify-content: center;
                            grid-template-columns: repeat(4, 1fr); /* Distribuye los íconos en 4 columnas */
                            gap: 1px; /* Reduce el espacio entre los íconos */
                            width: 100%; /* Asegúrate de que ocupe el ancho completo */
                            max-width: 525px;
                            height: 225px;
                            max-height: 225px;
                            padding: 20px; /* Reducir padding para acercar más los íconos */
                            margin-top: -10%;
                            margin-left: -2%;
                        }
                    
                        .contact-icon-box {            
                            width: 83px; /* Se ajusta a la columna asignada en el grid */
                            height: 83px;
                            aspect-ratio: 1;
                        }
                    
                        .contact-icon-box i {
                            font-size: 1.8em;
                        }
                    
                        .contact-icon-box p {
                            font-size: 0.8em;
                        }
                    
                        .contact-icon-box:hover {
                            transform: scale(1.1);
                            border: none;
                        }
                        


                        /* Estilos drone_reeds.html */
                        .drone-reeds {
                            min-height: 200px;
                            max-height: 1200px; /* Limitar la altura máxima */
                            margin: calc(102px + 10vh) auto auto;
                            overflow-y: scroll; /* Habilitar el scroll vertical */
                        }

                        .drone-reeds-image, 
                        #chanter-reed-gallery {
                            min-height: 100px;
                            max-height: 100px;
                            margin: auto; /* Mantenemos la galería en el medio */        
                        }

                        .drone-reeds-description {
                            font-size: 0.8rem;
                            height: 95%;
                            min-height: 350px;
                            max-height: 350px;
                            overflow-y: scroll; /* Habilitar scroll */
                        }

                        .purchase-info {
                            width: 100%;
                            height: 160px; /* Tamaño fijo para la sección de compra */
                            min-height: 120px;
                            max-height: 120px;
                            margin-top: 2%; /* Ajustamos el espacio entre los elementos */
                            margin-left: 0.5%;
                            margin-bottom: 0.5%;
                            overflow-y: hidden; /* Habilitar scroll si es necesario */
                        }
                        
                    }
            }
    }
}