/* =======================================================
   POLITECH PANEL360 · NUBE DE CAOS (seccion "El problema")
   Creada 04/08/2026
   Reemplaza a .tools-grid / .tool, que quedan sin uso en
   style.css (no se borraron por si hay que volver atras).
======================================================= */

.chaos-cloud{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 26px;
    max-width: 1000px;
    margin: 56px auto 64px;
    padding: 40px 20px;
    line-height: 1.15;
    text-align: center;
}

/* Cada palabra */
.chaos-cloud span{
    display: inline-block;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--text);
    white-space: nowrap;
    transition: var(--transition);
    cursor: default;
}

/* ---------- TAMAÑOS ---------- */
.chaos-cloud .c-xl{ font-size: 58px; }
.chaos-cloud .c-lg{ font-size: 42px; }
.chaos-cloud .c-md{ font-size: 30px; }
.chaos-cloud .c-sm{ font-size: 19px; font-weight: 500; }

/* ---------- TONOS ---------- */
/* gris claro: ruido de fondo */
.chaos-cloud .c-mute{
    color: var(--text-soft);
    opacity: .55;
    font-style: italic;
}

/* rojo: la queja, el dolor concreto */
.chaos-cloud .c-hot{
    color: var(--danger);
    opacity: .8;
    font-style: italic;
}

/* ---------- DESALINEACION ----------
   El caos sale de aca: giro + desplazamiento vertical
   distinto en cada palabra. Sin esto la nube se lee
   como una lista prolija y no comunica nada. */
.chaos-cloud .r-1{ transform: rotate(-4deg)  translateY(-14px); }
.chaos-cloud .r-2{ transform: rotate( 3deg)  translateY( 10px); }
.chaos-cloud .r-3{ transform: rotate(-7deg)  translateY( 18px); }
.chaos-cloud .r-4{ transform: rotate( 6deg)  translateY(-8px);  }
.chaos-cloud .r-5{ transform: rotate(-2deg)  translateY( 22px); }
.chaos-cloud .r-6{ transform: rotate( 8deg)  translateY(-20px); }

/* Al pasar el mouse la palabra se endereza y se aclara:
   micro-metafora de "esto se puede ordenar". */
.chaos-cloud span:hover{
    transform: rotate(0deg) translateY(0);
    color: var(--primary);
    opacity: 1;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px){
    .chaos-cloud{ gap: 8px 18px; padding: 30px 10px; margin: 40px auto 48px; }
    .chaos-cloud .c-xl{ font-size: 40px; }
    .chaos-cloud .c-lg{ font-size: 30px; }
    .chaos-cloud .c-md{ font-size: 23px; }
    .chaos-cloud .c-sm{ font-size: 16px; }
}

@media (max-width: 560px){
    .chaos-cloud{ gap: 6px 12px; }
    .chaos-cloud .c-xl{ font-size: 30px; }
    .chaos-cloud .c-lg{ font-size: 24px; }
    .chaos-cloud .c-md{ font-size: 19px; }
    .chaos-cloud .c-sm{ font-size: 14px; }
    /* Giros mas suaves: en pantalla angosta el texto muy rotado
       se pisa con el renglon de al lado. */
    .chaos-cloud .r-1{ transform: rotate(-3deg) translateY(-6px); }
    .chaos-cloud .r-2{ transform: rotate( 2deg) translateY( 5px); }
    .chaos-cloud .r-3{ transform: rotate(-4deg) translateY( 8px); }
    .chaos-cloud .r-4{ transform: rotate( 3deg) translateY(-4px); }
    .chaos-cloud .r-5{ transform: rotate(-2deg) translateY( 9px); }
    .chaos-cloud .r-6{ transform: rotate( 4deg) translateY(-8px); }
}