/* ============================================================
   COMPONENTE
   FACULTADES
   ============================================================ */


.faculties-section{
  width:100%;
  background:#fff;
  padding:70px 0 0;
}


.faculties-container{
  max-width:1000px;
  margin:0 auto;
  padding:0 20px;
}


.faculties-header h2{
  font-size:36px;
  font-weight:700;
  color:#0a2540;
  margin:0 0 12px;
}


.faculties-header p{
  font-size:15px;
  line-height:1.6;
  color:#1f3c68;
  margin:0 0 35px;
}


.faculties-subtitle{
  font-size:22px;
  font-weight:600;
  color:#0a2540;
  margin:0 0 20px;
}


/* ============================================================
   FONDO GRIS
   ============================================================ */

.faculties-strip{
  width:100%;
  background:#f1f1f1;
  padding:25px 0;
}


/* ============================================================
   CARRUSEL
   ============================================================ */

.faculties-carousel{
  position:relative;
  display:flex;
  align-items:center;
}


.faculties-track{
  display:flex;
  gap:40px;

  overflow:hidden;

  scroll-behavior:auto;

  width:100%;

  will-change:scroll-position;

  scrollbar-width:none;
}


.faculties-track::-webkit-scrollbar{
  display:none;
}


/* ============================================================
   ITEM
   ============================================================ */

.faculty-item{
  flex:0 0 auto;

  width:180px;

  min-height:76px;

  display:flex;

  justify-content:center;
  align-items:center;

  text-decoration:none;

  border-radius:8px;

  transition:
    transform .3s ease,
    background-color .3s ease;
}


.faculty-item:hover,
.faculty-item:focus-visible{
  transform:
    translateY(-3px);

  /*background:
    rgba(255,255,255,.7);*/
}


.faculty-item img{
  height:60px;
  width:auto;
  max-width:100%;

  display:block;

  object-fit:contain;

  transition:
    transform .3s ease;
}


.faculty-item:hover img{
  transform:
    scale(1.035);
}


/* ============================================================
   FLECHAS
   ============================================================ */

.carousel-btn{
  background:none !important;

  border:none !important;

  font-size:42px;

  color:#c8102e;

  cursor:pointer;

  padding:0 10px;

  line-height:1;

  z-index:10;
}


.carousel-btn.prev{
  margin-right:10px;
}


.carousel-btn.next{
  margin-left:10px;
}


.carousel-btn:hover{
  color:#134582;
}


.carousel-btn:focus-visible,
.faculty-item:focus-visible,
.faculties-track:focus-visible{
  outline:
    3px solid
    #ffd54f;

  outline-offset:3px;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media(max-width:768px){

  .faculties-header h2{
    font-size:28px;
  }


  .faculty-item{
    width:150px;
  }


  .faculty-item img{
    height:52px;
  }


  .faculties-track{
    gap:24px;
  }

}


@media(max-width:480px){

  .faculties-container{
    padding:
      0
      16px;
  }


  .faculty-item{
    width:130px;
  }


  .carousel-btn{
    padding:
      0
      5px;
  }

}


@media(prefers-reduced-motion:reduce){

  .faculty-item,
  .faculty-item img{
    transition:none;
  }


  .faculty-item:hover,
  .faculty-item:hover img{
    transform:none;
  }

}