/*Estilos Para laptops y pantallas pequeñas (1025px - 1200px)********************************************** */
@media (min-width: 1025px) and (max-width: 1200px) {
    /* Estilos para laptops y pantallas pequeñas */


    /*Elementos comunes ********************************************/
    header {
        position: relative;
        top: 0px;
        right: 0px;
        width: 100%;
        height: 175px;
        min-height: 175px;
        max-height: 175px;
        padding: 0; 
        z-index: 1000 !important; 
        overflow: hidden;  
    }

    .header-text{
        font-family: "Dancing Script", cursive;
    }

    .header-text h1{
        font-size: 1.7rem;
        font-weight: bolder;    
    }

    .header-text .subtitle {
        font-family: Arial, sans-serif;
        font-size: 0.8rem;
        font-weight: normal;
    }

    .logo{
        margin-left: 2%;
    }

    .tooltip-text-logo {
        width: 95px;
        top: 15px;
        left: 160px;
        background-color: rgb(252, 249, 249);
        color: rgb(114, 19, 19); 
        font-size: 0.8rem;              
    }


    .navbar {
        padding: 1%;
        margin-left: 0%;
    }

    nav ul {
        padding: 0;
        margin-left: -1%;
    }

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

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

    .home-icon-wrapper {
        top: 75px; 
        right: 30px !important; /* Ajuste más controlado con px */
        width: 40px;
        height: 40px;
        z-index: 1001 !important;
       
    }

    .home-icon-wrapper-supplies {
        top: 75px; 
        right: 30px !important; /* Ajuste más controlado con px */
        width: 40px;
        height: 40px;
        z-index: 1001 !important;       
    }

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

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

    .social-icons {        
        position: absolute;
        bottom: 10px;
        right: 30px; /* Ajustado para dispositivos más pequeños */
        display: flex;
        gap: 15px;
        z-index: 2;
        overflow: hidden;
    }

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


    /*Estilos para la barra de notificaciones */
    .notification-viewport{
        height: 60px;       /* <<< ajusta aquí si quieres más/menos alto (48–60px) */
        padding: 5px 0 2%;   /* antes: 5px 0;  -> más espacio arriba */
    }

    .notification-text{
        font-size: 1rem;
    }


    /*Estilo para el footer*/
    footer{
        z-index: 2;
    }

    /*index.html**************************************************/
    .gallery { 
        height: auto; /* Ajusta la altura según el contenido */
        overflow-y: auto; /* Habilitar scroll vertical */
    }

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

    /*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*/
    .image-container { 
        --corner: 100px;
        --tri-center-offset: -9%;/* % del lado: centroide */
        --label-size: 0.95rem; 
    }

    
    /* howtobuy.html **********************************************/
    /* howtobuy.html — NUEVO LAYOUT (iconos arriba, texto debajo) */
        .how-to-buy-section{
            position: relative;
            margin: 1px auto max(6vh, 60px);   /* +aire abajo para que no lo pise el footer */
            padding: clamp(12px, 2vw, 20px);
            width: min(76vw, 800px);
            display: flex;
            flex-direction: column;
            gap: clamp(16px, 2vh, 24px);       /* separación mínima entre iconos y texto */
            overflow: visible !important;
        }

        .icons-column{
            position: relative;
            top: 0;
            z-index: 2;
            background: transparent;
            padding-bottom: 6px;
            width: 90%;
            height: auto !important;
            margin: auto;
            margin-bottom: 0 !important;
            padding: 0;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); /* 4 botones en una fila */
            gap: clamp(8px, 1.6vw, 16px);
        }

        .icon-box{
            aspect-ratio: 1 / 1; /* botón cuadrado elástico */
            display: grid;
            place-items: center;
            padding: clamp(6px, 1.2vw, 12px);

        }

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

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

        .text-column{
            width: 100%;
            margin: 0 !important;
            padding: 0 !important;
            display: flex !important;
            justify-content: center !important;
            box-shadow: none !important;
        }

        .how-to-buy-text{
            font-size: clamp(0.9rem, 1.2vw, 1rem);
            line-height: 1.6;
            width: min(92%, 900px);             /* limita ancho y centra */
            margin: 0 auto;
            padding: clamp(12px, 2vw, 20px);
            padding-bottom: 375px;              /* tu ancla #returns */
            max-height: min(48svh, 520px);
            overflow: auto;
            box-shadow: none !important;
        }

        /* Quitar margen superior del primer heading del bloque de texto */
        .how-to-buy-text h1:first-child,
        .how-to-buy-text h2:first-child,
        .how-to-buy-text h3:first-child{
            margin-top: 0 !important;
        }

        /* Opcional: compactar un poco el resto */
        .how-to-buy-text p{ 
            margin-top: 0.4em; 
        }

    


    /* Estilos para la pagina about.html ***************************/
    .about {
        display: grid;
        grid-template-columns: 40% 60%; /* Mantener la imagen y texto en columnas */
        gap: 20px;
        width: auto; /* Ancho para aprovechar más la pantalla */
        min-width: 925px;
        max-width: 925px; /* Asegurarse de que tenga un ancho máximo */
        height: 100vh;
        min-height: 420px;
        max-height: 720px;
        box-sizing: border-box;        
        justify-items: center;
        align-items: start;
        overflow-y: auto;
    }

    .about-image-container {
        margin-left: -2%;
        margin-top: 10%;
        min-height: 302px;
        max-height: 302px;
        padding-top: 7%;
    }

    .about-image {
        width: 345px; /* Asegura que la imagen ocupe todo el espacio asignado */
        height: 250px;
        margin-left: -1.5%;
    }

    .about-text {
        width: 100%;
        height: auto; /* Permitir que el texto crezca según su contenido */
        min-height: 302px;
        max-height: 302px;
        text-align: justify;
        margin-top: 6.6%;
        margin-left: -2%;
        padding: 0% 2%;
        overflow: hidden; /* Evitar que el texto tenga scroll */
        font-size: 0.8rem;
    }

    .right-column {
        margin-right: 0%;
    }
    
    .right-align {
        font-size: 0.7rem;
    }

    .name {
        font-family: "Dancing Script", cursive;
        font-size: 1.2rem;
        text-align: right;
    }

    
    /* Estilos contact.html *****************************************/
    .contact-section{
        position: fixed;
        top: 160px;
        left: 50%; /* Posicionar el contenedor desde el centro */
        transform: translateX(-50%);
        width: 100%; 
        height: 100vh; 
        min-height: 300px; 
        max-height: 480px;
        max-width: 700px; 
        margin: auto;
        overflow-y: hidden;
    }

    .contact-grid{
        height: 100vh;
        min-height: 475px;
        max-height: 500px;
        overflow-y: auto;
    }

    .icons-contact-wrapper {
        gap: 15px; 
        padding: 5%;
        max-width: 450px;
    }

    .contact-icon-box {
        width: 125px; /* Ancho fijo para asegurar que sea cuadrado */
        height: 125px; /* Altura fija para asegurar que sea cuadrado */
        aspect-ratio: 1;
    }


    .contact-icon-box i {
        font-size: 2.3em;
    }

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

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


    /* Estilos drone_reeds.html *********************************/
    .drone-reeds {
        width: 100%;
        max-width: 1024px;
        height: auto; /* Fijar altura en píxeles */
        min-height: 520px;
        max-height: 720px; /* Limitar la altura máxima */
        margin: 1% auto;
        padding: 2%;
        overflow-y: auto; /* Habilitar el scroll vertical */
    }

    .drone-reeds-image,
    #chanter-reed-gallery {
        width: 400px; 
        height: 300px; /* Tamaño fijo para la imagen */
        margin-left: 0%;
    }

    .purchase-info {
        margin-bottom: 20%;
        margin-left: 0%;
        width: 400px;        
        height: 175px; /* Tamaño fijo para la sección de compra */
        overflow-y: hidden; /* Habilitar scroll si es necesario */
    }

    .drone-reeds-description {
        margin-top: 0%;
        margin-left: 0%;
        width: auto;
        min-width: 512px;
        max-width: 725px;
        height: 498px; /* Tamaño fijo para la descripción */
        min-height: 420px;
        max-height: 498px;
        overflow-y: hidden;
        font-size: 0.8rem;
        padding-top: 0%;
    }

    .title {
        font-size: 1.3em;
    }
    
    .stock{
        margin-top: 2%;
        padding-bottom: 0%;
    }

    .prices { 
        text-align: center;
        height:45%;
        font-size: 0.8rem;
        padding: 2%;
        /*margin-left: 4%;*/
        padding-top: 0%;
    }

    .price-highlight {
        font-size: 0.95rem;
    }
    
    .button {           
        font-size: 1rem; /* Ajustamos el tamaño de la fuente */
        padding-top: 1.5%;
        margin-top: 0%;
    }
    
    .paypal-icon {
        margin-top: 1.8%;
    }

    /*Estilos de los scrollbar de la clase .drone-reeds para ponerlos en blanco , que no se vean aunque estén ahí*/
    .drone-reeds::-webkit-scrollbar {
        width: 7px; /* Ancho del scrollbar */
        height: auto;
    }
        
    .drone-reeds::-webkit-scrollbar-track {
        background: #fff; /* Color del fondo */
        /*background: #cacaca; /* Color del fondo */
        border-radius: 10px; /* Bordes redondeados */
        opacity: 0.1;
    }
        
    .drone-reeds::-webkit-scrollbar-thumb {
        background-color: #fff; /* Color del scroll */
        border-radius: 10px; /* Bordes redondeados */
        border: 2px solid #fff; /* Espacio alrededor del scroll */
        /*border: 2px solid #adadad; /* Espacio alrededor del scroll */
        min-height: 50px; /* Altura mínima para el thumb */
        max-height: 75px; /* Altura max para el thumb */
        opacity: 0.7;
    }


    /* sub-mediaquery creada para el problema del precio en los articulos y el scroll del texto descriptivo */
    @media (max-height: 768px) {
        main {
            flex: 1;
            overflow-y: auto;
        }

        header {
            position: fixed;
            top: 0px;
            height: 175px; /* Asegura que el header no desaparezca */
            min-height: 175px;
            padding: 0;
            z-index: 2;           
        }


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

        /*Estilos iconos RRSS*/
        .social-icons {
            bottom: 10px;
            right: 30px; /* Ajustado para dispositivos más pequeños */
            overflow: hidden;
        }
    
        .social-icons a{
            font-size: 23px; /* Tamaño de los iconos */
            overflow: hidden;
        }
        
        .notification-bar{        
            position: sticky;
            top:175px;

        }



        /* Estilos index.html */
        .gallery {
            margin-top: calc(100px + 10vh);
            height: auto;

        }

        /*Estilos howtobuy.html*/
            
        .how-to-buy-section{
            position: relative;
            margin: 175px auto 3vh;
        }

        /*Estilos about.html*/
        .about{
            margin-top: calc(95px + 10vh);
            height: 100vh;
            min-height: 450px;
            max-height: 648px;
            overflow-y: auto;

        }



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

        /* sub-mediaquery para max-height: 668px */
         /* Ajuste para pantallas pequeñas (resoluciones < 640px y altura < 668px) */
        @media (max-height: 668px), (max-width: 640px) {
            header {
                position:sticky;
                top:0;
                width: 100%;
                height: 150px; /* Asegura que el header no desaparezca */
                min-height: 150px;
                overflow: hidden;
            }

            .navbar {
                position: fixed;
                height: 50px;
                min-height: 50px;
            } 
            
            main {
                flex: 1;
            }

            .header-text h1{
                font-size: 1.5rem;
                font-weight: bolder;    
            }
        
            .header-text .subtitle {
                font-family: Arial, sans-serif;
                font-size: 0.7rem;
                font-weight: normal;
            }

            .tooltip-text-logo {
                width: 100px;
                top: 5px; /* Ajusta la posición */
                left: 170px;
                background-color: rgb(252, 249, 249);
                color: rgb(114, 19, 19);               
            }

            footer {
                position: relative;
                bottom: 0;
                height: auto; /* Asegura que el footer ajuste su tamaño */
                min-height: 50px; /* Proporciona una altura mínima */
                overflow-y: auto; /* Permitir scroll si es necesario */
            }

            .home-icon-wrapper {
                top: 53px; 
            }
        
            .home-icon-wrapper-supplies {
                top: 53px; 
            }

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

            .social-icons {
                bottom: 10px;
                right: 30px;
                z-index: 10;
            }


            /*Estilos index.html*/
            .gallery{    
                margin-top: 0%;
            } 
            
            
            /*Estilos howtobuy.html*/
            .how-to-buy-section {                   
                /*position: relative; /* quitar fixed */
                margin: 0px auto 3vh;/* respeta header+noti */
                overflow:visible !important;
            }        


            /*Estilos about.html */
            .about{
                height: auto;
                margin-top: -3%;
                min-height: 325px;
                max-height: 455px;
                overflow-y: auto;
            }



            /*Estilos contact.html */
            .contact-section {
                position: fixed;
                top: 63px;
                left: 50%;
                transform: translateX(-50%); /* Mover el contenedor hacia la izquierda para centrarlo */
                display: flex;
                flex-direction: column;
                align-items: center;
                width: 100%; 
                height: 100vh; 
                min-height: 300px; 
                max-height: 420px;
                max-width: 700px; 
                margin: auto;
                overflow-y: hidden;
            }

            .contact-grid{
                margin-top: -10%; 
                margin-left: 4%;                           
            }


            .icons-contact-wrapper {
                display: grid;
                align-items: center;
                justify-content: center;
                grid-template-columns: repeat(4, 1fr); /* Distribuye los íconos en 4 columnas */
                gap: 0px; /* Reduce el espacio entre los íconos */
                width: 90%; /* Asegúrate de que ocupe el ancho completo */
                max-width: 648px;
                height: 275px;
                margin-top: -8%;
            }

            .contact-icon-box {            
                padding: 0px; /* Ajusta el espacio dentro del contenedor */
                overflow: hidden;
                width: 100%; /* Se ajusta a la columna asignada en el grid */
                height: auto;
                max-width: 125px;
                max-height: 125px;
                aspect-ratio: 1;
            }

            .contact-icon-box i {
                font-size: 2.3em; /* Ajusta el tamaño del icono */
                overflow: hidden;
            }

            .contact-icon-box p {
                font-size: 0.8em; /* Ajusta el tamaño del texto */
                overflow: hidden;
                margin-top: -5%;
            }


            

            /* Estilos drone_reeds.html */
            .drone-reeds{
                margin-top: 0%; /* Ajustar dependiendo de la altura del header y la barra de notificación */
                min-height: 300px;
                max-height: 520px;
            }

            

            @media (max-height: 600px){
                /*Estilos howtobuy.html*/
                .how-to-buy-section {                   
                /*position: relative; /* quitar fixed */
                    margin: 0px auto 3vh;/* respeta header+noti */
                    overflow:visible !important;
                }   



                /*Estilos about.html */
                .about{
                    height: auto;
                    margin-top: -3%;
                    min-height: 325px;
                    max-height: 455px;
                    overflow-y: auto;
                }

            }


            @media(max-height: 476px) {
                /*Estilos elementos comunes*/
                .notification-bar{        
                    position: sticky;
                    top:150px;
                }

                
                /* Estilos index.html */
                .gallery{
                    margin-top: 0%; /* Ajustar dependiendo de la altura del header y la barra de notificación */
                    overflow-y: scroll;
                }


                /*Estilos howtobuy.html*/
                .how-to-buy-section {                   
                    /*position: relative; /* quitar fixed */
                    margin: 0px auto 3vh;/* respeta header+noti */
                    overflow:visible !important;
                }



                /*Estilos about.html */
                .about{
                    margin-top: -3%;
                    height: 100vh; /* Ocupa toda la altura visible de la ventana */
                    min-height: 150px;
                    max-height: 250px;
                }
                
                

                /*Estilos 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 */
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    width: 100%; 
                    overflow-y: auto; 
                    height: 100vh; 
                    min-height: 250px; 
                    max-height: 250px;
                    max-width: 700px; 
                    overflow-y: auto;
                }

                .contact-grid{ 
                    margin-left: 4%;                           
                }

                .contact-text {
                    text-align: center;
                    margin-top: 16%; /* Reduce el espacio entre el texto y los íconos */
                    width: 100%;
                    font-size: medium;
                }

                .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: 90%; /* Asegúrate de que ocupe el ancho completo */
                    max-width: 648px;
                    height: 275px;
                    margin-top: -8%;
                }

                .contact-icon-box {            
                    padding: 0px; /* Ajusta el espacio dentro del contenedor */
                    overflow: hidden;
                    width: 100%; /* Se ajusta a la columna asignada en el grid */
                    height: auto;
                    max-width: 125px;
                    max-height: 125px;
                    aspect-ratio: 1;
                }

                .contact-icon-box i {
                    font-size: 2.3em; /* Ajusta el tamaño del icono */
                    overflow: hidden;
                }

                .contact-icon-box p {
                    font-size: 0.8em; /* Ajusta el tamaño del texto */
                    overflow: hidden;
                    margin-top: -5%;
                }


                /* Estilos drone_reeds.html */
                .drone-reeds{
                    margin-top: 1%; /* Ajustar dependiendo de la altura del header y la barra de notificación */
                    min-height: 250px;
                    max-height: 520px;
                }


            } 
        }
    }
}