/* Ajustes generales para el responsive */
@media (max-width: 991px) {
  #desktop-1 {
    display: none;
  }
  #mobile-1 {
    display: block !important;
  }
}
@media (min-width: 991px) {
  #mobile-1 {
    display: none;
  }
}

/* Colocación de la segunda imagen hacia la derecha y oculta parcialmente */
.mobile-images {
  position: relative;
}

#slider-2-mobile {
  max-width: 100%; /* Ajusta el tamaño de la primera imagen */
  margin-bottom: 20px;
}

#slider-4-mobile {
  max-width: 50%; /* Ajusta el tamaño de la segunda imagen */
  position: absolute;
  right: -10%; /* Parte de la imagen se oculta hacia la derecha */
  top: 30px; /* Ajusta la posición vertical si es necesario */
  z-index: -1; /* Envía la imagen detrás del texto */
  opacity: 0.8; /* Para darle un toque de transparencia */
}

@media (max-width: 575px) {
  /* Ajuste para móviles */
  .mobile-images {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
    z-index: 1;
    padding-bottom: 72vw !important;
    padding-left: 10vw;
  }
}

@media (max-width: 992px) {
  /* Ajuste para móviles */
  .mobile-images {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
    z-index: 1;
    padding-bottom: 35vw;
    padding-left: 10vw;
  }

  /* Tamaño y posición ajustada para pantallas pequeñas */
  #slider-2-mobile {
    max-width: 80%; /* Ajusta el ancho de la primera imagen */
  }

  #slider-4-mobile {
    right: -11%; /* Más desplazada en pantallas pequeñas */
    top: 20%;

  }
}

@media (max-width: 992px) {
  /* Ajuste para móviles muy pequeños */
  #slider-2-mobile {
    max-width: 70%; /* Reduce un poco más el tamaño en pantallas muy pequeñas */
  }

  #slider-4-mobile {
    right: 6%; /* Mayor desplazamiento en pantallas pequeñas */
  }
}
/* Ajustes generales para el responsive */
@media (max-width: 991px) {
  #desktop-1 {
    display: none;
  }
}
@media (min-width: 992px) {
  #mobile-1 {
    display: none;
  }
}

@media (max-width: 992px) {
  .hero-section .row {
    flex-direction: column; 
  }
  
  .hero-section .col-md-6 {
    text-align: center;
  }

  .mobile-images {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 0px; /* Espacio entre las imágenes */
  }

  /* Ajusta el tamaño de las imágenes en móvil para que se alineen mejor */
  #slider-2-mobile,
  #slider-4-mobile {
    max-width: 100%; /* Ajustar el ancho según sea necesario */
  }
}

/* Rest of your existing CSS */

/* Responsivo para pantallas pequeñas */
@media (max-width: 992px) {
  .hero-section .text-left {
    padding-left: 4vw;
    padding-right: 1vw;
  }

  .custom-logo {
    height: 4vh;
    margin-top: 1vh;
    margin-bottom: 1vh;
  }

  .hero-text {
    font-size: 0.85rem;
    font-weight: 300;
    text-align: justify;
  }

  .display-4 {
    width: 41vw;
    font-size: 1.35rem;
    font-weight: bold;
    text-align: justify;
  }

  .rounded-circle {
    height: 350px;
    padding-top: 6vh;
  }
}

@media (max-width: 768px) {
    .hero-section .row {
      flex-direction: column; 
    }
    .hero-section .col-md-6 {
      text-align: center;
    }
  }

  .fade-in {
    opacity: 0; 
    transform: translateY(20px); 
    transition: opacity 2s ease-out, transform 2s ease-out; 
  }

  .fade-in.visible {
    opacity: 1; 
    transform: translateY(0); 
  }

  .mirror-spin {
    transition: transform 0.6s ease;
    transform-style: preserve-3d; 
  }

  .mirror-spin.giro {
    transform: rotateY(180deg); 
  }

  .mirror-spin {
    border-radius: 0% !important;
  }

  .hero-text:hover {
    transform: scale(1.01); /* Aumenta el tamaño al 110% */
    color: #c29d52;
  }

  .display-4:hover { 
    transform: scale(1.01); /* Aumenta el tamaño al 110% */
    color: #c29d52;
  }

  .custom-logo:hover {
    transform: scale(1.1); /* Aumenta el tamaño al 110% */
  }

  @media (min-width: 1799px) {
    .hero-section .text-left{
      padding-left: 13.02vw;
      padding-right: 7vw;
    }
  
    .custom-logo{
      height: 6.76vh;
      margin-top: 2vh;
      margin-bottom: 2vh;
    }

    .custom-space-slider {
      padding: 60px 0 0 0 !important;
      margin-top: 3vw;
    }
  
    .hero-text{ 
      font-size: 1.3rem;
      font-weight: 300;
      text-align: justify;
      padding-bottom: 16.67vh;;
    }
    
    .display-4{ 
      font-size: 3.44rem;
      font-weight: bold;
      padding-top: 11.39vh;
    }
  
    .rounded-circle {
      padding-top: 12.70vh;
      padding-right: 4.69vw;
      padding-bottom: 19.63vh;
    }
  }

  @media (min-width: 1080px) and (max-width: 1799px) {
    .hero-section .text-left {
        padding-left: 12vw;
        padding-right: 3vw;
    }

    .custom-logo {
        height: 6.76vh;
        margin-top: 2vh;
        margin-bottom: 2vh;
    }

    .hero-text {
        font-size: 1.15rem;
        font-weight: 300;
        text-align: justify;
    }

    .display-4 {
        font-size: 2.75rem;
        font-weight: bold;
        padding-top: 9.39vh;
    }

    .rounded-circle {
        height: 550px;
        padding-top: 10.70vh;
    }
}

/* Standard Desktop/Laptop: 992px - 1400px (Bootstrap lg and xl) */
@media (min-width: 992px) and (max-width: 1399px) {
    .hero-section .text-left {
        padding-left: 10vw;
        padding-right: 2vw;
    }

    .custom-logo {
        height: 6vh;
        margin-top: 1.5vh;
        margin-bottom: 1.5vh;
    }

    .hero-text {
        font-size: 1.1rem;
        font-weight: 300;
        text-align: justify;
        padding: 0vw;
    }

    .display-4 {
        font-size: 2.5rem;
        font-weight: bold;
        padding-top: 4vh;
    }

    .rounded-circle {
        height: 500px;
        padding-top: 9vh;
    }
}

/* Horizontal Tablet: 768px - 992px (Bootstrap md) */
@media (min-width: 768px) and (max-width: 991px) {
    .hero-section .text-left {
        padding-left: 8vw;
        padding-right: 1.5vw;
    }

    .custom-logo {
        height: 5.5vh;
        margin-top: 1.5vh;
        margin-bottom: 1.5vh;
    }

    .hero-text {
        font-size: 1rem;
        font-weight: 300;
        text-align: justify;
        padding: 10vw;

    }

    .display-4 {
        text-align: left;
        font-size: 2.25rem;
        font-weight: bold;
        padding-top: 7vh;
    }

    .rounded-circle {
        height: 450px;
        padding-top: 8vh;
    }
}

/* Vertical Tablet & Large Mobile: 576px - 768px (Bootstrap sm) */
@media (min-width: 576px) and (max-width: 767px) {
    .hero-section .text-left {
        padding-left: 6vw;
        padding-right: 1.5vw;
    }

    .custom-logo {
        height: 5vh;
        margin-top: 1vh;
        margin-bottom: 1vh;
    }

    .hero-text {
      padding: 10vw;
        font-size: 0.95rem;
        font-weight: 300;
        text-align: justify;
    }

    .display-4 {
        text-align: left;
        font-size: 2rem;
        font-weight: bold;
        padding-top: 6vh;
    }

    .rounded-circle {
        height: 400px;
        padding-top: 7vh;
    }
}

/* Standard Mobile: < 576px (Bootstrap xs) */
@media (max-width: 575px) {
    .hero-section .text-left {
        padding-left: 4vw;
        padding-right: 1vw;
    }

    .custom-logo {
        height: 4vh;
        margin-top: 1vh;
        margin-bottom: 1vh;
    }

    .hero-text {
        font-size: 0.85rem;
        font-weight: 300;
        padding: 10vw;
        text-align: justify;
    }

    .display-4 {
        font-size: 1.35rem;
        font-weight: bold;
        padding-top: 5vh;
    }

    .rounded-circle {
        height: 350px;
        padding-top: 6vh;
    }
  }