.mirp-wrapper { /* Clase contenedora principal */
    padding: 40px 0;
    background-color: #f8f9fa;
    overflow: hidden;
    position: relative;
}

.mirp-title { /* Título "Iniciativas Educativas Relacionadas" */
    text-align: center;
    font-size: 1.8rem;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 30px;
}

.mirp-slider { /* Contenedor del slider Slick */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 50px;
}

/* Cada item individual del carrusel */
.mirp-item {
    padding: 15px 10px; /* Reducimos padding vertical */
    display: flex !important;
    flex-direction: column; /* Mantenemos columna para separar header y botón */
    align-items: flex-start; /* Alineamos todo a la izquierda */
    justify-content: space-between; /* Espacio entre header y botón */
    min-height: 180px; /* Ajustamos altura mínima si es necesario */
    text-align: left; /* Alineamos texto a la izquierda */
}

/* NUEVO: Contenedor para número y título */
.mirp-item-header {
    display: flex;
    align-items: flex-start; /* Alinea arriba */
    gap: 10px; /* Espacio entre número y título */
    width: 100%;
    margin-bottom: 15px; /* Espacio antes del botón */
}

/* Círculo con número */
.mirp-number {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    color: white;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    /* Quitamos margin-bottom ya que el gap lo maneja */
}

/* Título de la iniciativa en el slide */
.mirp-item-title {
    font-size: 0.95rem;
    font-weight: bold;
    color: #34495e;
    line-height: 1.4;
    margin: 0; /* Quitamos margen inferior */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Quitamos min-height, el flex lo maneja */
}

/* Botón "Ver más" */
.mirp-button {
    background-color: #34495e;
    color: white !important;
    padding: 6px 15px;
    border-radius: 4px;
    text-decoration: none !important;
    font-size: 0.85rem;
    font-weight: bold;
    display: inline-block; /* Ya no necesita margin-top: auto */
    transition: background-color 0.2s;
}
.mirp-button:hover {
    background-color: #2c3e50;
}

/* --- Estilos para las flechas de Slick --- */
/* (Copia aquí los estilos .slick-prev, .slick-next, .slick-disabled del CSS del carrusel anterior) */
/* --- Ejemplo: --- */
.mirp-wrapper .slick-prev,
.mirp-wrapper .slick-next {
    font-size: 0; line-height: 0; position: absolute; top: 50%;
    transform: translateY(-50%); display: block; width: 40px; height: 40px;
    padding: 0; cursor: pointer; color: transparent; border: none; outline: none;
    background: #34495e; border-radius: 50%; z-index: 10;
}
.mirp-wrapper .slick-prev:hover, .mirp-wrapper .slick-next:hover { background: #2c3e50; }
.mirp-wrapper .slick-prev { left: 15px; }
.mirp-wrapper .slick-next { right: 15px; }
.mirp-wrapper .slick-prev::before, .mirp-wrapper .slick-next::before {
    font-family: 'slick'; font-size: 20px; line-height: 1; opacity: 1; color: white;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.mirp-wrapper .slick-prev::before { content: '<'; padding-right: 2px; }
.mirp-wrapper .slick-next::before { content: '>'; padding-left: 2px; }
.mirp-wrapper .slick-disabled { background: #bdc3c7 !important; cursor: default; }
.mirp-wrapper .slick-disabled::before { opacity: 0.5; }
.mirp-wrapper .slick-dots { display: none !important; }