/* ==========================================================
   Planta Industrial
   El carrusel usa el componente reutilizable gallery.css
   ========================================================== */

.planta {
    padding-block: 3rem 5rem;
    background-color: var(--color-background);
}

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

.planta__text {
    max-width: 56rem;
    margin: 0 auto 1rem;
    color: var(--color-dark-text);
    text-align: center;
}

.planta__areas {
    margin: 0 auto 2rem;
    color: var(--color-dark-text);
    text-align: center;
    text-wrap: balance;
}

/* Cada área no se corta a la mitad al pasar de línea */
.planta__area {
    white-space: nowrap;
}

/* ==========================================================
   Mobile: las áreas se apilan, sin separadores
   ========================================================== */
@media (max-width: 575.98px) {

    .planta {
        padding-block: 2.5rem 3.5rem;
    }

    .planta__text {
        line-height: 1.375rem;    /* 22px */
    }

    .planta__areas {
        margin-bottom: 1.5rem;
        font-size: 1.125rem;      /* 18px */
        line-height: 1.625rem;    /* 26px */
    }

    .planta__area {
        display: block;
    }

    .planta__sep {
        display: none;
    }
}