/* ============================================================ PRISMA — responsividade-perfil.css Responsividade exclusiva do body da página perfil.html. Não contém header → coberto por menu-mobile.css Não contém footer → coberto por footer-mobile.css Importar no do perfil.html, após menu-mobile.css e footer-mobile.css: ATENÇÃO: o bloco @media (max-width: 900px) que existia em perfil.css continha apenas regras de footer — todas já cobertas por footer-mobile.css. Remova-o de perfil.css. ============================================================ */ /* ────────────────────────────────────────────────────────── BREAKPOINT PRINCIPAL — ≤ 1024px (tablet e mobile) ────────────────────────────────────────────────────────── */ @media (max-width: 1024px) { /* === HERO DA PÁGINA === */ /* Remove a altura fixa — o conteúdo define a altura */ .hero { height: auto; margin-top: 32px; padding: 28px 24px; } .hero h1 { font-size: 28px; } .hero p { font-size: 14px; max-width: 100%; } /* === SEÇÃO DE PERFIL === */ /* Reduz o negative margin e o padding-bottom excessivo */ .profile-section { margin-top: -30px; padding: 0 18px 100px; } /* Card ocupa largura total dentro do padding da seção */ .profile-card { width: 100%; padding: 28px 24px; margin-top: 28px; } /* === INFO DO USUÁRIO === */ /* Barra de progresso principal: remove largura fixa */ .progress-bar-main { width: 100%; max-width: 300px; } /* === GRID DE CURSOS === */ /* 4 colunas → 2 colunas em tablet */ .cursos { grid-template-columns: repeat(2, 1fr); gap: 16px; } } /* ────────────────────────────────────────────────────────── MOBILE PEQUENO — ≤ 640px ────────────────────────────────────────────────────────── */ @media (max-width: 640px) { /* === HERO DA PÁGINA === */ .hero { margin-top: 20px; padding: 22px 18px; } .hero h1 { font-size: 22px; } /* === SEÇÃO DE PERFIL === */ .profile-section { margin-top: -40px; padding: 0 14px 60px; } .profile-card { padding: 22px 16px; margin-top: 20px; } /* === INFO DO USUÁRIO === */ /* Avatar + detalhes empilham verticalmente em mobile */ .user-info { flex-direction: column; align-items: flex-start; gap: 16px; } .avatar { margin-right: 0; } /* Barra de progresso principal: ocupa largura total em mobile */ .progress-bar-main { width: 100%; max-width: 100%; } .titulo-progresso { font-size: 16px; margin: 28px 0 20px; } /* === GRID DE CURSOS === */ /* 2 colunas → 1 coluna em mobile */ .cursos { grid-template-columns: 1fr; gap: 12px; } /* Remove o nowrap — o texto pode quebrar linha normalmente */ .curso-card p { white-space: normal; } }