/* ========================================= */
/* ===== ESTILOS DE CASOS DE ÉXITO (DARK) ===== */
/* ========================================= */

/* --- Contenedor Principal --- */
#casos-exito .container {
    max-width: 1000px; /* Un poco más ancho para que respire */
}

/* --- Texto Introductorio (El bloque grande) --- */
.success-intro {
    background-color: #1c1c1c; /* Fondo gris oscuro para separar del negro */
    color: #e0e0e0; /* Texto gris claro casi blanco */
    padding: 30px;
    border-radius: 10px;
    border-left: 4px solid #FFD700; /* Línea dorada elegante a la izquierda */
    font-size: 1.05rem;
    line-height: 1.8;
    text-align: justify;
    margin-bottom: 50px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5); /* Sombra para darle profundidad */
}

/* --- Contenedor de Tarjetas --- */
.success-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

/* --- Tarjetas Individuales (Fichas) --- */
.success-card {
    background-color: #1E1E1E; /* Gris oscuro */
    padding: 30px 20px;
    border-radius: 15px;
    border: 1px solid #333; /* Borde sutil */
    text-align: center;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* Efecto al pasar el mouse */
.success-card:hover {
    transform: translateY(-10px); /* Se levanta */
    border-color: #FFD700; /* Borde dorado */
    box-shadow: 0 10px 25px rgba(0,0,0,0.6);
}

/* --- Iconos --- */
.success-icon {
    font-size: 3rem;
    color: #FFD700; /* Dorado brillante */
    margin-bottom: 20px;
}

/* --- Títulos de las Tarjetas --- */
.success-card h4 {
    color: #ffffff; /* Blanco */
    font-size: 1.3rem;
    margin-bottom: 15px;
    font-weight: 600;
}

/* --- Texto dentro de las Tarjetas --- */
.success-card p {
    color: #cccccc; /* Gris claro */
    font-size: 0.95rem;
    line-height: 1.6;
}