.talleres {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 100%; /* Para que ocupe todo el alto que le da el Grid */
  /* border: 2px solid red !important; */
}

.imgTaller {
    width: 200px;           /* Definimos el tamaño del círculo aquí */
 }

.imgTaller img {
    width: 100%;            /* Que ocupe el 100% de sus 150px */
    height: 100%;
    object-fit: cover;      /* Evita que la foto se deforme */
    border-radius: 50% !important;
    transition: transform 0.3s ease;
}

.imgTaller:hover img {
    transform: scale(1.1); /* Agranda la imagen un 10% */
}

.imgUlpan {
    width: 500px;        
    transition: transform 0.3s ease;
 }


.imgUlpan:hover img {
    transform: scale(1.1); /* Agranda la imagen un 10% */
}

.imgNivel {       
    transition: transform 0.3s ease;
 }


.imgNivel:hover img {
    transform: scale(1.1); /* Agranda la imagen un 10% */
}

/* --------- sec --------- */

/* --- 1. COLORES Y BORDES --- */
.border-green { border: 4px solid #1edab4 !important; }
.border-green .card-title { color: #16a085; }

.border-teal { border: 4px solid #00a8b5 !important; }
.border-teal .card-title { color: #00808a; }

.border-yellow { border: 4px solid #fbbd0b !important; }
.border-yellow .card-title { color: #d49e00; }

.border-orange { border: 4px solid #f2901a !important; }
.border-orange .card-title { color: #f2901a; }

/* --- 2. ESTRUCTURA --- */
.slider-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 40px 0;
}

.slider-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    overflow: visible; /* Permitimos ver laterales en PC */
    position: relative;
}

.cards-container {
    display: flex;
    gap: 0; /* Sin gap para que el cálculo de JS sea exacto */
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* --- 3. LA TARJETA --- */
.custom-card {
    /* Forzamos 33.33% para que solo entren 3 */
    flex: 0 0 33.3333%;
    min-width: 33.3333%;
    max-width: 33.3333%;
    box-sizing: border-box;
    padding: 20px;
    border-radius: 30px;
    background-color: #8dffe844;
    transition: all 0.4s ease;
    text-align: center;
    
    /* Efecto transparencia/blur */
    opacity: 0.15;
    transform: scale(0.85);
    filter: blur(2px);
}

.custom-card.active {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
    z-index: 10;
}

/* --- 4. MOBILE --- */
@media (max-width: 768px) {
    .slider-wrapper {
        overflow: hidden; /* Cortamos laterales en mobile */
    }
    .custom-card {
        flex: 0 0 100%;
        min-width: 100%;
        max-width: 100%;
        padding: 30px;
    }
}

/* --- 5. NAVEGACIÓN --- */
.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    background: white;
    border: none;
    width: 45px; height: 45px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    display: flex; align-items: center; justify-content: center;
}
.prev { left: 10px; }
.next { right: 10px; }

/* Video */
.ratio-16x9-recreated {
    position: relative; width: 100%; padding-bottom: 56.25%; height: 0;
    overflow: hidden; border-radius: 15px; margin: 15px 0;
}
.ratio-16x9-recreated iframe {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;
}




.formar{
    text-align: center;
    justify-content: center;
    margin: 30px;
    font-size: 30px;
    font-weight: 900;
}