/* =========================================================
   AT WATER | style_expansion_red.css
   Página "Expansión Internacional RED AT WATER" (Tanda 2026-11-07).
   Reusa deliberadamente los tokens --aw-* y clases .aw-* ya definidos en
   el CSS compartido (style.css) -- este archivo SOLO agrega el diagrama
   de descentralización, que no tiene ningún componente equivalente hoy.
   ========================================================= */

.aw-decentral-flow {
    display: flex;
    align-items: stretch;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 28px;
}

.aw-decentral-node {
    flex: 1 1 160px;
    max-width: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 20px 14px;
    border-radius: var(--aw-radius, 22px);
    background: var(--aw-surface, #fff);
    border: 1px solid var(--aw-line, rgba(7, 29, 45, 0.11));
    box-shadow: var(--aw-shadow-xs, 0 6px 16px rgba(6, 27, 43, 0.06));
}

.aw-decentral-node__icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--aw-blue, #1788ff), var(--aw-cyan, #41d4c7));
    color: #fff;
    font-size: 1.1rem;
}

.aw-decentral-node strong {
    font-size: 0.95rem;
}

.aw-decentral-node p {
    margin: 0;
    font-size: 0.82rem;
    color: var(--aw-muted, #607688);
    line-height: 1.4;
}

.aw-decentral-arrow {
    align-self: center;
    color: var(--aw-muted, #607688);
    font-size: 1.1rem;
    flex: 0 0 auto;
}

@media (max-width: 991.98px) {
    .aw-decentral-flow {
        flex-direction: column;
        align-items: center;
    }

    .aw-decentral-node {
        max-width: 320px;
        width: 100%;
    }

    .aw-decentral-arrow {
        transform: rotate(90deg);
    }
}