/* Fuentes */
@import url("https://fonts.googleapis.com/css2?family=Kanit:wght@600;700&family=Poppins:wght@500&display=swap");

/* ========== RESPONSIVE ====================================================== */
/* Resoluciones recomendadas:
Tablet (1024 x 768 px) Landscape.
Laptop 1 (1280 x 800 px) Landscape.
Laptop 2 (1600 x 900 px) Landscape.
Laptop 3 (1920 x 1200 px) Landscape.
*/
/* ============================================================================ */
/* ===============================
   CONTENEDOR PRINCIPAL
================================ */
.main-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: center;
    background-color: #374151;
    width: 100%;
}

/* ===============================
   TÍTULO DEL MÓDULO
================================ */
.module-title {
    width: 100%;
    margin-block: clamp(0.4rem, 0.8vw, 0.5rem);

    font-family: 'Poppins', sans-serif;
    font-weight: bold;
    color: rgb(255, 255, 255);
    text-align: center;

    /* Tamaño fluido 1024 → 1920 */
    font-size: clamp(1.1rem, 1.6vw, 1.5rem);
}

/* ===============================
   IMAGEN DE USUARIO
================================ */
.user-image {
    width: auto;
    height: auto;

    /* Escala progresiva */
    max-width: clamp(50px, 3.5vw, 70px);
    max-height: clamp(40%, 5vw, 60%);

    margin-inline: clamp(0.75rem, 1.5vw, 1rem);
    padding-block: clamp(0.5rem, 1vw, 0.75rem);
}