/* ============================================
   CARRUSEL DE CURSOS DESTACADOS (formaciones.html)
   Las tarjetas reutilizan el estilo .destacada-card de styles.css.
   En ordenador se ven tres a la vez; si hay más, se desliza.
   En el móvil se ve una y asoma la siguiente.
   ============================================ */
.fo-carrusel{ padding: 72px 0 24px; }
.fo-carrusel-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.fo-carrusel-head .eyebrow{ margin-bottom: 0; }
.fo-carrusel-acciones{ display: flex; align-items: center; gap: 20px; }
/* En la home, el carrusel ocupa el sitio de «Formaciones destacadas» */
.destacadas.fo-carrusel{ padding: 0 0 110px; }

.fo-carrusel-flechas{ display: flex; gap: 10px; }
.fo-carrusel-flechas[hidden]{ display: none; }
.fo-carrusel-paso{
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: linear-gradient(var(--bg-cream), var(--bg-cream)) padding-box, var(--gradient) border-box;
  color: var(--text-dark);
  font-family: var(--font);
  font-size: 18px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .18s ease, opacity .18s ease;
}
.fo-carrusel-paso:hover:not(:disabled){ transform: translateY(-2px); }
.fo-carrusel-paso:disabled{ opacity: .3; cursor: default; }

.fo-carrusel-pista{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 48px) / 3);
  gap: 24px;
  margin-top: 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.fo-carrusel-pista::-webkit-scrollbar{ display: none; }
.fo-carrusel-item{ scroll-snap-align: start; }

/* Tarjeta en columna: arriba el texto, debajo la ilustración. Así el texto nunca pisa el dibujo,
   ni en el ordenador ni en el móvil. La imagen se recorta por arriba y por abajo (solo blanco). */
.fo-carrusel .destacada-card{
  aspect-ratio: auto;
  display: flex;
  flex-direction: column;
  background: #fff;
}
.fo-carrusel .destacada-card .destacada-body{ position: relative; inset: auto; order: -1; padding-bottom: 8px; }
.fo-carrusel .destacada-card img{
  position: relative; inset: auto;
  width: 100%; height: auto;
  aspect-ratio: 1060 / 900;
  object-fit: cover;
  object-position: center 67%;
  margin-top: auto;
}
.fo-carrusel .destacada-card:hover img{ transform: scale(1.03); }

@media (max-width: 980px){
  .fo-carrusel{ padding: 48px 0 16px; }
  .destacadas.fo-carrusel{ padding: 0 0 64px; }
  .fo-carrusel-pista{ grid-auto-columns: 82%; gap: 16px; }
  .fo-carrusel-flechas{ display: none; }
  .fo-carrusel .destacada-body h3{ font-size: clamp(30px, 8vw, 40px); }
}

@media (prefers-reduced-motion: reduce){
  .fo-carrusel-pista{ scroll-behavior: auto; }
}