html {
    scroll-behavior: smooth;
}


.fade-in-on-scroll {
    opacity: 0;
    transition: opacity 3s ease-in;
}

.fade-in-on-scroll.visible {
    opacity: 1;
}



/* Texto centrado con animación opcional */
.fade-in-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-on-scroll.show {
    opacity: 1;
    transform: translateY(0);
}

.carousel-item {
    transition: transform 2.6s ease-in-out;
  }
  
  .carousel-fade .active.carousel-item-start,
  .carousel-fade .active.carousel-item-end {
    transition: opacity 0s 2.6s;
  }

  .container-carousel {
    position: relative;
    display: flex;
    width: 320px;
    margin: 100px auto 0 auto;
    perspective: 1000px;
  }

  .container-carousel2 {
    position: relative;
    display: flex;
    width: 320px;
    margin: 500px auto 0 auto;
    perspective: 1000px;
  }
  
  .container-slider{
    position:relative;
    width: 90%;
    max-width: 1225px;
    margin: auto;
    overflow: hidden;
    margin-top:30px;
    margin-bottom:0%;
    box-shadow: 0 0 0 10px #f3f4f6,
                0 15px 50px #0ea3b8;
    /* position: relative; */
  }
  .slider{
    display: flex;
    /* width:900%; */
    height:600px;
    transition: transform 0.5s ease-in-out;
  }

  .slider__section{
    /* width:100%; */
    flex: 0 0 100%;
  }

  .slider__img{
    display:block;
    width:100%;
    height:100%;
    object-fit: cover;
  }
  .slider__btn{
    position:absolute;
    width:45px;
    height:45px;
    background: rgba(220,255,255,0.7);
    top:50%;
    transform:translateY(-50%);
    font-size:30px;
    font-weight:bold;
    text-align:center;
    border-radius:50%;
    cursor:pointer;
    z-index: 10;
  }

  .slider__btn:hover{
    background-color: #065f46;
  }
  .slider__btn--left{
  left:10px;
  }
  .slider__btn--right{
    right:10px;
  }

button:focus:not(:focus-visible) {
outline: none;
}

/* Padding personalizado para etiqueta main */
.custom-padding {
  padding: 0.5rem;
}

@media (min-width: 641px) {
  .custom-padding {
    padding: 0;
  }
}

/* Estilo para imagen de cabecera */
.image-container {
  width: 100%;
  height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: #f3f3f3;
}

.responsive-image {
  width: 100%;
  height: 100%;
  object-fit: fill; /* estira si es necesario */
  display: block;
}

/* Extra-large screens (4K, QHD, etc.) */
@media (min-width: 1921px) {
  .image-container {
    max-height: 600px;
  }
}

/* Laptops / Desktops */
@media (min-width: 1280px) and (max-width: 1920px) {
  .image-container {
    max-height: 400px;
  }
}

/* Tablets */
@media (min-width: 768px) and (max-width: 1279px) {
  .image-container {
    max-height: 300px;
  }
}

/* Smartphones */
@media (max-width: 767px) {
  .image-container {
    max-height: 200px;
  }
}

@media (max-width: 640px) {
  .image-container {
    border-radius: 10px;
  }
}