@media (orientation: landscape) {
  .viewindesktop {
    display: block;
  }
  .viewinmobile {
    display: none;
  }
  #header,
  nav#header,
  .menudesktop {
    width: 100%;
  }
  ul.idioma {
    position: absolute;
    right: 0;
    display: flex;
    flex-direction: row;
  }

  #paginaskincare {
    .imagencabeceraseccion {
      img {
        height: 115%;
      }
    }
  }

  #paginacover {
    & .infocabeceraseccion {
      .posttitulo {
        max-width: 40%;
      }
    }
  }

  #paginamoda,
  #paginamarca {
    .imagencabeceraseccion {
      margin-top: -30vh;
      right: -21vw;
      img {
        height: 120%;
      }
    }
  }

  #paginamarca {
    .imagendestacado {
      .imgfondo {
        top: -8vh;
      }
    }
  }
  #paginalabios {
    .infocabeceraseccion {
      .pretitulo {
                line-height: 5rem;
                font-size: 6.6em;
      }
      .titulo {
                            font-size: 12rem !important;
                letter-spacing: -5px;
                line-height: 11rem;
        }
    }
    .aplicacionproducto {
    img {

        width: auto;
    }
}


        





  }
  #paginacejas{  
    .aplicacionproducto {
    img {
        width: auto;
    }}
      }
  #pagina16h {
    .infocabeceraseccion {
      .titulo {
        font-size: 18rem;
        line-height: 14rem;
      }
    }
    .imagencabeceraseccion {
      img {
        height: 125%;
      }
    }
  }
  #paginaunas{
    

    .imagendestacado {
    img {
        top: -6vh;
    }
}

  }
  #paginarostro{
      .infocabeceraseccion {
    .pretitulo {
        font-size: 4.56em;
                line-height: 4rem;
    }
    .titulo {
                            font-size: 18rem !important;
                letter-spacing: -10px;
        }
            .posttitulo.posttitulito {
        font-size: 2.8em;
        line-height: 4.5rem;
        padding: 0;
    }
}
  }
  #paginasatin {
    .infocabeceraseccion {
        .posttitulo {
            font-size: 1.5rem;
            line-height: 3rem;
            padding-left: 4rem;
        }
    }
}

  .imagencabeceraseccion {
    z-index: 0!important;
  }
   #paginamoda, #test {
  nav ul {
    background: none;
}
}
#test {
    .css-slider {
        padding-top: 75vh;
    }
}
}

@media (orientation: landscape) and (min-width: 1800px) {
  .infocabeceraseccion {
    margin-top: 22vh;
    .titulo {
      font-size: 20rem !important;
      letter-spacing: -5px;
      line-height: 15rem;
    }
    .posttitulo {
      font-size: 4em;
    }
    .pretitulo {
                  font-size: 6em;
            line-height: 5rem;
        }
    }


  .imagencabeceraseccion {
    height: 140%;
    width: auto;
    margin-top: -43vh;
    position: absolute;
    right: 0;
    z-index: 1;
  }
  .imagendestacado {
    img {
      left: 10vw;
    }
  }

  #paginaojos {
    .imagencabeceraseccion {
      height: 140%;
      width: auto;
      margin-top: -43vh;
      position: absolute;
      right: 0;
      z-index: 1;
    }
  }
  #paginacejas {
    .imagencabeceraseccion {
      margin-top: -55vh;
      right: -28vw;
    }
    .infocabeceraseccion {
        margin-top: 20vh;
         .titulo {
            font-size: 13rem !important;
            letter-spacing: -5px;
            line-height: 11rem;
        }
    }
        
       
    
  }
  #paginamoda {
    .imagencabeceraseccion {
      margin-top: -30vh;
      right: -10vw;
      img {
        height: 115%;
      }
    }
        .infocabeceraseccion {
        .pretitulo {
            font-size: 4em;
            line-height: 5rem;
            padding-left: 2rem;
        }
    }
  }

  #paginaskincare {
    .imagencabeceraseccion {
      margin-top: -30vh;
                  right: -12vw;
      img {
        height: 115%;
      }
    }
    .infocabeceraseccion {
      margin-top: 10vh;
    }
  }
  #paginarostro {
    .infocabeceraseccion {
     margin-top: 20vh;
    }

    .imagencabeceraseccion {
      height: 123%;
      top: -10vh;
    }
  }
  #paginacover {
    .infocabeceraseccion {
      margin-top: 15vh;
      .titulo {
        font-size: 12rem !important;
        letter-spacing: -5px;
        line-height: 10rem !important;
      }
    }
  }
  #paginasatin {
      .infocabeceraseccion {
        max-width: 70%;
    }
    .infocabeceraseccion {
      margin-top: 10vh;

      .titulo {
        font-size: 16rem !important;
        letter-spacing: -5px;
        line-height: 11rem !important;
      }
      .posttitulo {
        max-width: 40vw;
      }
    }
    .imagendelhero img {
      position: absolute;
      left: -16%;
      width: 44%;
      top: 21vh;
      transform: rotate(343deg);
    }
  }


  #paginamarca {
    .infocabeceraseccion {
          margin-top: 18vh;
    margin-left: 12vw;
      .titulo {
       font-size: 24rem !important;
                line-height: 19rem;
      }
    }
    .imagendestacado {
        .imgfondo {
            top: -18vh;
        }
    }
  }




  #pagina16h {
    .imagencabeceraseccion {
      img {
        height: 140%;
      }
    }
  }
}

@media (orientation: portrait) {
  html,
  body {
    width: 100%;
    overflow-x: hidden;
    position: relative;
  }
  .productos-wrapper,
  .slideshow-container {
    touch-action: pan-y;
  }
  .viewindesktop {
    display: none;
  }
  .viewinmobile {
    display: block;
  }
  body {
    width: 100vw;
    overflow-x: hidden;
  }
  p {
    font-family: cuerpo;
    font-size: 1.2rem;
    line-height: 1.2rem;
  }
  .moda {
    .boton {
      position: absolute;
      margin-top: -17%;
      left: 28vw;
    }
  }

  /* 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: 2%;
  }
  img.logo {
    width: 60vw;
    top: 1vh;
  }
  nav ul.idioma {
    flex-direction: row;
    a {
      display: block;
      padding: 15px 0;
      border-bottom: none;
      color: rgb(0, 0, 0);
      font-size: 1.5rem;
      margin: 1rem;
    }
  }
  /* 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;
    corner-shape: SUPERELLIPSE(0.5);
    text-align: left;
  }

  /* 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);
    background: white;
  }

  /* 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;
    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;
  }
  nav ul {
    li {
      font-size: 1.5rem;
    }
  }

  /* 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;
  }

  .info {
    width: 88vw;
    padding: 10%;
    box-sizing: border-box;
    padding-bottom: 20%;
  }
  .imagendestacado {
    img {
      height: 120%;
      width: auto;
    }

    .img1,
    .img2,
    .img3 {
      height: 120%;
      width: auto;
      top: 0vh;
      left: -30vw;
    }
  }

  .productosdeldestacado {
    .ventaja {
      max-width: 100%;
    }
  }

  .destacado {
    flex-direction: column;
  }

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

  .card-wrapper {
    width: 100%;
  }
  .productos.row.flex {
    display: flex;
    flex-direction: row;
  }
  .mySlides {
    img {
      max-height: 50vh;
    }
    .text {
      max-width: 100%;
      margin-top: -25%;
    }
    span.large {
      font-size: 7rem;
      line-height: 5rem;
    }
  }

  #hero {
    .info {
      padding: 0;
    }
  }
  .carrusel {
    .posttitulo {
      padding-left: 0;
    }
  }
  .prev,
  .next {
    top: 100%;
  }
  .incioseccion {
    height: 105vh;
    margin-top: -10vh;
  }

  /* productos */
  .producton {
    img.image {
      min-height: 100%;
    }
  }

  .imagencabeceraseccion {
    right: -95% !important;
    margin-top: -10% !important;
    z-index: -1 !important;
    img {
      width: auto;
      height: 100%;
    }
  }

  .infocabeceraseccion {
    padding: 2rem;
    padding-top: 55vh;
    margin-left: 0;
    .pretitulo {
      font-size: 1.8rem !important;
      line-height: 1.9rem !important;
    }
    .titulo {
      font-size: 4rem !important;
      line-height: 4rem !important;
    }
    .posttitulo {
      font-size: 1.5rem !important;
      padding-left: 0 !important;
      max-width: 95% !important;
      line-height: 1.6rem !important;
    }
  }
  .texto {
    p {
      font-size: 1.2rem !important;
      line-height: 1.5rem !important;
    }
  }
  .slider {
    min-width: 100%;
    width: fit-content;
  }
  .productosdeldestacado {
    .card-wrapper {
      width: 60vw;
    }
    .productos {
      flex-direction: row;
    }
    .flechas {
      display: none;
      width: 100vw !important;
      position: absolute;
      bottom: 0;
      margin-bottom: -12vh;

      .prev {
        left: 0;
      }
      .next {
        left: 75%;
      }
    }
    .imgcuadrada {
      .card-wrapper {
        width: 60vw;
      }
    }
    .productos-wrapper {
      overflow: visible;
    }
  }
  .muestrascolor {
    .card-wrapper {
      width: 20vw;
    }
    .card-top,
    .cardbottom {
      height: 40vh;
    }
  }

  .aplicacionproducto {
    height: 30vh;
    width: 110%;
    img {
      object-fit: contain;
      top: 0;
      left: 0;
      width: 110%;
    }
  }
  .prev,
  .next {
    width: 90px;
  }

  .productoconmuestras {
    .container {
      overflow: visible;
    }

    .productosdeldestacado {
      .flechas {
        width: 100vw !important;
        position: absolute;
        bottom: 0;
        margin-bottom: 0;
      }
    }
    .imagendestacado {
      width: 100%;
      img {
        top: 15vh;
        left: 2vw;
        width: 100%;
        height: auto;
      }
    }

    .posttitulo,
    .pretitulo {
      font-size: 1.2rem;
      line-height: 1.2rem;
    }
    .info.column.flex.novcontornos {
      padding-top: 15rem;
    }

    .infocaja {
      position: absolute;
      left: 0;
    }
    .infodestacado {
      flex-direction: column;
      width: 100%;
      min-width: 100%;
      margin: 0;
      .infocaja,
      .cajatitulo,
      .texto {
        width: 100%;
      }
    }
  }

  /* textos */

  .banner .info {
    max-width: 100%;
  }

  .pretitulo {
    font-size: 1.5rem;
    letter-spacing: 0;
    line-height: 2.5rem;
  }
  .titulo.small,
  .titulo {
    font-size: 2.2rem !important;
    line-height: 2.1rem !important;
    margin-left: 0 !important;
  }

  .container {
    max-height: none;
  }
  .novedades {
    .balsamos img {
      height: 200px;
    }
    & .productos {
      img {
        height: 200px;
        width: auto;
        object-fit: cover;
      }
    }
  }
  .bannermarca {
    .pretitulo {
      font-size: 2rem;
      line-height: 4rem;
    }
    .cabecera {
      top: 0;
    }
    img.cabecera {
      width: 240% !important;
      height: 100vh;
      left: -50%;
    }
    .texto {
      padding-right: 0;
    }
  }

  /* footer */
  footer {
    .footer .distribuidores {
      background-image: url(../img/distribuidores.jpg);
      background-size: cover;
      background-position-x: 90%;
    }
    .logo {
      display: flex;
      text-align: center;
      margin: 2rem;
      a img {
        width: 100%;
      }
    }
    .footer ul {
      margin-right: 0px;
      margin-bottom: 2rem;
    }
    .titulo {
      font-size: 1.5rem !important;
      line-height: 2.2rem !important;
      margin-left: 0 !important;
    }

    .banner .info {
      max-width: 100%;
      padding: 2rem 2rem 10rem 2rem;
    }

    .rrss img {
      height: 60px;
      padding: 2rem;
    }
    .menufooter {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .copy {
      flex-direction: column;
      text-align: center;
    }
  }
  .imagendestacado {
    .imgfondo {
      height: 170%;
      width: auto;
      position: absolute;
      object-fit: cover;
      top: -10%;
      left: -33vw;
    }
  }
  #paginaojos {
    .imagencabeceraseccion {
      right: -52vw !important;
      top: -10vh;
    }
  }
  #paginacover {
    .imagendelhero img {
      position: absolute;
      left: -6vw;
      top: 10vh;
      width: 68%;
      transform: rotate(142deg);
    }
    .productosdeldestacado {
      .flechas {
        bottom: 0;
        top: 0;
        margin-bottom: 0;
      }
      .infocabeceraseccion {
        padding-top: 45vh;
      }
    }
    .infocabeceraseccion {
      padding: 2rem;
      padding-top: 50vh;
      margin-left: 0;
    }
  }
  #pagina16h {
    .categorias {
      .infocaja {
        width: 100%;
        .texto {
          width: 90%;
          max-width: 90%;

          padding: 5%;
        }
        .textoizquierda {
          top: 0;
          left: 2vw;
        }
        .textoderecha {
          bottom: 0;
          margin-bottom: -30vw;
        }
        .posttitulo,
        .pretitulo {
          padding: 0 !important;
          margin: 0 !important;
        }
      }

      .container {
        overflow: hidden;
      }

      .banner .info {
        padding: 5rem 10px;
        text-align: right;
      }
      .imagendestacado {
        width: 90vw;
        height: 500px;
        transform: rotate(-81deg) !important;
        top: -7vh;
        margin-top: 0;
        margin-left: -18vw;

        .img1 {
          height: 50vh;
          width: auto;
          top: 7vh;
          left: -21vw;
        }
      }
    }
    #hero {
      .info {
        padding: 0;
        padding-left: 25vw;
      }
      .imagendelhero img {
        margin-top: -10vh;
        width: 40%;
        left: 1%;
      }
    }
    .botecierre {
      transform: rotate(90deg);
      top: 0;
      left: -7vh;
    }
    .cierre16 img {
      height: auto;
      width: 90%;
      position: absolute;
      top: 40%;
    }
    .banner .info {
      padding: 5rem 10px;
      text-align: right;
    }
  }

  #paginasatin {
    .imagendelhero img {
      position: absolute;
      left: -22%;
      width: 95%;
      top: 40vh;
    }
    #hero {
      .info {
        padding: 0;
        padding-left: 20vw;
        width: 88vw;
      }
    }
  }
  #paginalabios {
    .imagencabeceraseccion {
      right: -150vw !important;
      margin-top: -42vh !important;
      z-index: -1 !important;
    }
    .productoconmuestras {
      .infocaja {
        padding-top: 0;
      }
    }
  }

  #test {
    .css-slider-wrapper {
      height: 100vh;
      width: 100%;
      padding: 5%;
      padding-top: 30vh;
      margin-top: -15vh;
    }
    .css-slider {
      img {
        position: absolute;
        z-index: -1;
        height: 85vh;
        width: auto;
        top: 0 !important;
        margin-top: -15vh;
      }
    }
    .slide6 {
      .row {
        padding-top: 1vh;
      }
      .titulo {
        font-size: 2rem !important;
      }
      p {
        font-family: cuerpo;
        font-size: 5rem;
        text-align: center;
      }
      img {
        margin-bottom: -44vh;
        margin-left: 20vw;
        position: relative;
        width: 51vw !important;
      }
    }
    .titulo {
      font-size: 2.2rem !important;
      line-height: 2.1rem !important;
      margin-left: 0 !important;
      text-align: center;
      padding: 5%;
    }
  }

  #paginamarca {
    width: 100vw;
    overflow: hidden;
    .infocabeceraseccion {
      max-width: 100vw;
      padding: 0;
      margin-top: 65vh;
      margin-left: 10vw;
      .titulo {
        font-size: 5rem !important;
        line-height: 11rem;
        letter-spacing: -2px;
      }
    }
    .imagendestacado {
      .imgfondo {
        top: -10vh;
        height: 100vh;
        left: -90vw;
      }
    }
    .destacado {
      height: 90vh;
      width: 100%;
      padding: 15%;
    }

    #producto1 {
      .imagendestacado {
        .imgfondo {
          left: -198vw;
          height: 94vh;
        }
      }
      .info {
        position: absolute;
      }
    }
    #producto4 {
      .info {
        margin-top: -80vh;
      }
    }

    #producto5 {
      .info {
        margin-top: -80vh;
      }

      .imagendestacado {
        .imgfondo {
          left: -198vw;
          height: 94vh;
        }
      }
    }
    section,
    article {
      width: 100vw !important;
      max-width: 100vw !important;
      overflow: hidden !important;
    }
  }
#test {
    .preguntatest {
        background:none;
        height: auto;
    }
    .css-slider {
            img {
                position: absolute;
                z-index: -1;
                height: 85vh;
                width: auto;
                top: 0 !important;
                margin-top: 0;
            }
        }
        .css-slider.slide1 {
            img {
                margin-top:-15vh;
            }
        }
}
}