/* ==========================================================
   Experiencia
   Las tarjetas usan el componente reutilizable toggle-card.css
   Mismo fondo que Servicios: se ven como un solo bloque
   ========================================================== */

.experiencia {
    padding-block: 0 5rem;
    background-color: var(--color-background);
}

.experiencia__title {
    margin-bottom: 2.5rem;
    color: var(--color-dark-text);
    text-align: center;
}

/* ==========================================================
   Grilla 50 / 50
   Tablet y desktop: 2 columnas
   Mobile: 1 columna centrada
   ========================================================== */
.experiencia__list {
    display: grid;
    grid-template-columns: minmax(0, 560px);
    align-items: start;          /* cada tarjeta crece sola al abrirse */
    justify-content: center;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {

    .experiencia__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 1.5rem;
    }
}

@media (min-width: 1200px) {

    .experiencia__list {
        column-gap: 4.5rem;
    }
}

/* ==========================================================
   Mobile
   ========================================================== */
@media (max-width: 575.98px) {

    .experiencia {
        padding-block: 0 3.5rem;
    }

    .experiencia__title {
        margin-bottom: 2rem;
    }
}