/* *************************************** */
/* ********* TITULO Y SUBTITULO ************ */
/* *************************************** */

.carrusel {
  width: 62.25rem; /* 996px */
  height: auto;
  padding: 1.25rem; /* 20px */
  gap: 1.25rem; /* 20px */
  opacity: 1;
  margin: 0 auto;
  text-align: center;
}

.title {
  font-weight: 700;
  font-style: Bold;
  font-size: 3.5625rem; /* 57px */
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  color: #003899;
  padding-bottom: 20px;
}

.subtitle {
  font-weight: 700;
  font-style: Bold;
  font-size: 2.875rem; /* 46px */
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  color: #003899;
  padding-bottom: 15px;
}

.main-desc-26 {
  font-weight: 400;
  font-style: Regular;
  font-size: 1.625rem; /* 26px */
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  color: #252525;
  margin: 0 auto;
  padding-bottom: 15px;
}

.main-desc-22 {
  font-weight: 400;
  font-style: Regular;
  font-size: 1.375rem; /* 22px */
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  color: #252525;
  margin: 0 auto;
  padding-bottom: 15px;
}

/* *************************************** */
/* ********* CARRUSEL ************ */
/* *************************************** */

.carousel-wrap {
  max-width: 62.25rem; /* 996px */
  height: 9.756436347rem; /* 156.10px */
  margin: 1.5rem auto 0;
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem; /* 12px */
  user-select: none;
}

/* botones */
.carousel-btn {
  border: 0.0625rem solid rgba(0,0,0,0.06); /* 1px */
  width: 2.75rem; /* 44px */
  height: 2.75rem;
  border-radius: 0.625rem; /* 10px */
  box-shadow: 0 0.375rem 1.125rem rgba(0,0,0,0.08); /* 0 6px 18px */
  cursor: pointer;
  font-size: 1.625rem; /* 26px */
  line-height: 1;
  display: grid;
  place-items: center;
  transition: transform .18s ease, box-shadow .18s ease;
}

.carousel-btn:hover {
  transform: translateY(-0.1875rem) scale(1.03); /* -3px */
  box-shadow: 0 0.625rem 1.625rem rgba(0,0,0,0.12); /* 10px 26px */
}

.carousel-btn:active {
  transform: translateY(-0.0625rem) scale(0.99); /* -1px */
}

/* viewport */
.carousel {
  overflow: hidden;
  flex: 1;
  border-radius: 1rem; /* 16px */
  padding: 0.75rem 0.375rem; /* 12px 6px */
  box-shadow: 0 0.5rem 1.875rem rgba(2,6,23,0.05); /* 8px 30px */
  outline: none;
  height: 9.756436347rem; /* 156.10px */
}

/* pista */
.carousel-track {
  display: flex;
  align-items: center;
  gap: 1rem; /* 16px */
  transform: translateX(0);
  will-change: transform;
  height: 9.756436347rem;
}

/* slide */
.slide {
  flex: 0 0 8.75rem; /* 140px */
  height: 5.625rem; /* 90px */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.625rem; /* 10px */
  transition: transform .28s cubic-bezier(.22,.9,.3,1), filter .28s ease;
  padding: 0.5rem; /* 8px */
  box-sizing: border-box;
}

/* imagen */
.slide img {
  max-width: 100%;
  height: 9.756436347rem; /* 156.10px */
  object-fit: contain;
  display: block;
  filter: saturate(0.95);
  transition: transform .35s ease;
}

.slide:hover {
  transform: scale(1.06);
  filter: none;
  z-index: 3;
}

.slide:hover img {
  transform: scale(1.06);
}

/* dots */
.carousel-dots {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -0.875rem; /* 14px */
  display: flex;
  gap: 0.5rem; /* 8px */
}

/* ********************************************** */
/* MODO RESPONSIVE PARA DIFERENTES DISPOSITIVOS */
/* ********************************************** */

/* <= 1200px */
@media (max-width: 75rem) {
.carrusel {
  width: 100%;
  max-width: 62.25rem;
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
}

.carousel-wrap {
  margin: 1.25rem auto;
  gap: 0.625rem; /* 10px */
}

.carousel-btn { width: 2.75rem; height: 2.75rem; }
}

/* <= 1024px */
@media (max-width: 64rem) {
.carrusel { padding-left: 0.9rem; padding-right: 0.9rem; }

.carrusel .main-title { font-size: 2.5rem; line-height: 1.05; padding: 0 0.5rem; }
.carrusel .main-desc  { font-size: 1.125rem; padding: 0 0.5rem; }

.carousel-wrap { gap: 0.625rem; }
.carousel { padding: 0.625rem; height: auto; }

.slide { flex-basis: 7.5rem; height: 5rem; }
.slide img { max-height: 5rem; }
}

/* <= 768px */
@media (max-width: 48rem) {
.carrusel {
  width: 100%;
  padding: 0.9rem 0.9rem 1.1rem;
  box-sizing: border-box;
  text-align: center;
}

.carrusel .main-title { font-size: clamp(1.75rem, 6vw, 3rem); padding: 0 0.5rem; }
.carrusel .main-desc  { font-size: clamp(0.875rem, 3.2vw, 1.375rem); padding: 0 0.5rem; }

.carousel-btn { display: none; }
.carousel { padding: 0.5rem; border-radius: 0.75rem; }
.carousel-track { gap: 0.625rem; }

.slide { flex-basis: 6.875rem; height: 4rem; padding: 0.375rem; }
.slide img { max-height: 4rem; }

.carousel::before, .carousel::after { display: none; }
.carousel-dots { bottom: -1.125rem; }
}

/************** <= 480px **************************/
@media (max-width: 30rem) {
.carrusel { padding: 0.6rem 0.6rem 1rem; }

.carrusel .main-title { 
  font-size: 22px;
 }
.carrusel .main-desc  { 
  font-size:  14px;
  padding-bottom: 20px;
}
.carousel{
  width: 100%;
 
}
.carousel-wrap{
  height: 50px;
}
.carousel-track{
  height: 50px;
}
.slide { flex-basis: 5.5rem; height: 50px; width: 50px; padding: 0.25rem; }
.slide img { 
  height: 50px;
}

.carousel-dots { bottom: -1.375rem; gap: 0.375rem; }
}


/************** <= 375px **************************/
@media (max-width: 23.4375rem) {
  .carrusel { padding: 0.6rem 0.6rem 1rem; }
  
  .carrusel .main-title { 
    font-size: 22px;
   }
  .carrusel .main-desc  { 
    font-size:  14px;
    padding-bottom: 20px;
  }
  .carousel{
    width: 100%;
   
  }
  .carousel-wrap{
    height: 50px;
  }
  .carousel-track{
    height: 50px;
  }
  .slide { flex-basis: 5.5rem; height: 50px; width: 50px; padding: 0.25rem; }
  .slide img { 
    height: 50px;
  }
  
  .carousel-dots { bottom: -1.375rem; gap: 0.375rem; }
  }



/* Preferencias de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
.slide, .carousel-track { transition: none !important; }
.slide:hover { transform: none !important; }
}