/* =========================================================
   ABOUT — BARRA DE VALORES
   ========================================================= */

.about {
    background: #ffffff;
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
}

.about .section_container {
    padding-top: 2.5em;
    padding-bottom: 2.5em;
}

/* ---- Lista de ítems ---- */
.about_list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.5em;
}

.about_list li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4em;
}

/* ---- Icono ---- */
.about_list_icon {
    font-size: 1.6em;
    color: var(--muted);
    line-height: 1;
    margin-bottom: 0.2em;
}

/* ---- Textos ---- */
.about_list h3 {
    margin: 0;
    font-size: 0.92em;
    font-weight: 700;
    color: var(--brand-dark);
    line-height: 1.3;
}

.about_list p {
    margin: 0;
    font-size: 0.82em;
    color: var(--muted);
    line-height: 1.5;
}

/* =========================================================
   RESPONSIVE: MÓVIL (≤ 599px) — 2 columnas
   ========================================================= */
@media (max-width: 599px) {
    .about_list {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =========================================================
   RESPONSIVE: TABLET (600px – 959px) — 2 columnas amplias
   ========================================================= */
@media (min-width: 600px) and (max-width: 959px) {
    .about_list {
        grid-template-columns: repeat(2, 1fr);
        gap: 2em 3em;
    }
}

/* =========================================================
   RESPONSIVE: ESCRITORIO (≥ 960px) — 4 columnas en fila
   ========================================================= */
@media (min-width: 960px) {
    .about .section_container {
        padding-top: 4.2em;
        padding-bottom: 4.2em;
    }

    .about_list {
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
    }

    /* Separadores verticales entre ítems */
    .about_list li {
        padding: 0 2em;
        border-right: 1px solid #ececec;
    }

    .about_list li:first-child {
        padding-left: 0;
    }

    .about_list li:last-child {
        border-right: none;
        padding-right: 0;
    }
}