@media (orientation: landscape) {
.viewindesktop{
        display:block;
    }
    .viewinmobile{
        display: none;
    }



    a[href="https://connect.thesaem.es"] li {
        font-weight: bolder;
        border: 2px solid #ee6147;
        color: #ee6147;
    }

	
	

}


@media (orientation: portrait){

    .viewindesktop{
        display:none;
    }
    .viewinmobile{
        display: block;
    }
    .mySlides {
    img {
        width: 110%;
        height: auto;
       
    }
        .degradado {
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 99%, rgba(0, 0, 0, 0.65) 100%);
    }

}

    .texto, .head span {
    font-size: 1rem;

}
    .countSelectorSection, .autoCheck {
    display: none;
}
.card-wrapper {
    width: 100%!important;
    margin: 5% 0;


}
.info, .imagen-hover, .producto {
    min-height: min-content;
            padding-bottom: 0;
}
img.cabecera {
    height: 100%!important;
}


/* menu */

.menudesktop {
    display: none;
}
.hamburger {
               display: flex;
        position: fixed;
        top: 2%;
        right: 0%;
        align-content: center;
        align-items: center;
        justify-content: space-evenly;
        background: white;
        padding-right: 2%;
}
img.logo {
    width: 40vw;
}
nav ul.idioma {

    flex-direction: row;
    li a {
        display: block;
        padding: 15px 0;
        border-bottom: none;
        color: rgb(0, 0, 0);
    }
}
/* 1. Ocultar y Posicionar el Menú */
    .nav-menu {
        position: fixed;
        top: 0; /* Justo debajo del header */
        left: -100%; /* Mover fuera de la pantalla */
        width: 75%; /* Ancho del menú desplegable */
        height: calc(100vh);
        background-color: var(--stone);
        transition: left 0.3s ease-in-out; /* Transición suave */
        z-index: 900;
    }

    /* 2. Estilos de la Lista en Móvil */
    .nav-menu ul {
        flex-direction: column; /* Mostrar enlaces en columna */
        padding: 20px;
        max-height: 100vh;
        li{
            padding: 2%;
        }
    }

    .nav-menu a {
                display: block;
        padding: 15px 0;
        border-bottom: 1px solid #444;
        color: rgb(0, 0, 0);
        font-size: 1.5rem;
        text-align: left;
        line-height: 2rem;
    }
    
    /* 3. CLASE ACTIVO: Mostrar el Menú */
    .nav-menu.activo {
        left: 0; /* Mover a la posición visible */
        box-shadow: 2px 0 5px rgba(0,0,0,0.5);
    }
    
    /* 4. Mostrar el Botón Hamburguesa */
    .hamburguesa {
        display: block; /* Mostrar el botón en móvil */
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        width: 30px;
        height: 20px;
        position: relative;
    }

    /* Estilo de las Líneas de la Hamburguesa */
    .hamburguesa span {
        display: block;
        width: 100%;
        height: 3px;
        background-color: rgb(0, 0, 0);
        margin: 4px 0;
        transition: transform 0.3s, opacity 0.3s;
    }

    /* 5. Animación (Transformación a 'X') */
    .hamburguesa.activo span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .hamburguesa.activo span:nth-child(2) {
        opacity: 0; /* Línea central desaparece */
    }

    .hamburguesa.activo span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    
/* general */
main {
    margin-top: 0vh;
}
.flex {
    flex-direction: column;
}
.producto{
    width: 100vw;
    

     box-sizing: border-box;


}
.info{
    width: 100vw;
    
     padding: 10%;
     box-sizing: border-box;
     padding-bottom: 20%;

}
.imagen-hover {
    width: 100vw;
    height: 50vh;

}
.banner {
            height: auto;
             background-image: linear-gradient(
        to top, 
        /* Comienza con negro sólido (0% de la altura del div) */
        rgba(0, 0, 0, 0) 1%, 
        /* Termina con negro totalmente transparente (100% de la altura del div) */
        rgba(0, 0, 0, 0.5) 100% 
    );
           
      .info{ 
    padding-top: 30%;

} 

    .column {

    justify-content: flex-start;
}
}
img.cabecera {
top: 0;
right: -70%;
    height: 110%;

}
/* textos */
.titulobanner {
    font-size: 3rem;
    line-height: 3.4rem;
}
.pretitulo {
    font-size: 1.5rem;
    letter-spacing: 0;
    line-height: 2.5rem;
}
.titulo {
    font-family: titulos;
    font-size: 2rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 2.2rem;
}
/* footer */
.rrss img {
    height: 80px;

}
.menufooter {
    display: flex
;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
footer ul {
    margin-right: 0;
}
.copy {
        flex-direction: column;
        text-align: center;
    }




    .container {

    max-height: none;

}

.destacados .texto {
    font-size: 1rem;
    padding: 2% 0;
}

.card-wrapper
{
    width: 100%;

}


#mascarillas {
    .info, .imagen-hover, .producto {

        width: 100vw;
        min-height: 50vh!important;

    }
    
        .titulobanner {
        font-size: 3rem;

    }
}
.footer {
    padding: 5%;
}


}