/* 1. Estilos Globais e Reset */
        *, *::before, *::after {
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f9fafb;
            color: #1f2937;
            margin: 0;
            line-height: 1.6;
        }

        /* 2. Layout Principal */
        .container {
            width: 100%;
            max-width: 64rem; /* 1024px */
            margin-left: auto;
            margin-right: auto;
            padding: 1rem;
        }

        @media (min-width: 640px) {
            .container {
                padding: 1.5rem;
            }
        }
        @media (min-width: 1024px) {
            .container {
                padding: 2rem;
            }
        }

        /* 3. Cabeçalho do Perfil */
        .profile-header {
            text-align: center;
            margin-top: 3rem;
            margin-bottom: 2rem;
        }

        .profile-picture {
            height: 10rem; /* 128px */
            width: 10rem; /* 128px */
            border-radius: 9999px;
            margin-left: auto;
            margin-right: auto;
            margin-bottom: 1rem;
            object-fit: cover;
            object-position: top;
            border: 4px solid white;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
        }

        .profile-name {
            font-size: 2.25rem; /* 36px */
            font-weight: 700;
            color: #527d76;
            margin: 0;
        }

        .profile-title {
            font-size: 1.125rem; /* 18px */
            color: #4b5563;
            margin-top: 0.25rem;
        }

        /* 4. Seção de Conteúdo e Cards */
        .content-section {
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }

        .card {
            background-color: #ffffff;
            padding: 2rem;
            border-radius: 0.75rem; /* 12px */
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
            transition: box-shadow 0.3s ease;
        }

        .card:hover {
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
        }

        .card-header {
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
        }

        .card-icon {
            height: 2rem; /* 32px */
            width: 2rem; /* 32px */
            color: #527d76;
            margin-right: 0.75rem; /* 12px */
        }
        
        .card-title {
            font-size: 1.5rem; /* 24px */
            font-weight: 700;
            color: #527d76;
            margin: 0;
        }

        .card-body {
            color: #4b5563;
            line-height: 1.625;
            margin-bottom: 0rem;
        }

        .card-button {
            display: inline-block;
            color: #2563eb;
            font-weight: 600;
            padding: 0.5rem 1rem;
            border: 1px solid #bfdbfe;
            border-radius: 9999px;
            text-decoration: none;
            transition: background-color 0.3s, border-color 0.3s;
        }

        .card-button:hover {
            background-color: #eff6ff;
            border-color: #93c5fd;
        }

        /* 5. Seção de Citação */
        .quote-section {
            margin-top: 4rem;
            text-align: center;
        }

        .quote-content {
            max-width: 48rem; /* 768px */
            margin-left: auto;
            margin-right: auto;
        }

        .quote-text {
            font-size: 1.25rem; /* 20px */
            font-style: italic;
            color: #374151;
            margin: 0;
        }

        .quote-author {
            margin-top: 1rem;
            font-size: 1rem;
            font-weight: 600;
            color: #1f2937;
        }

        /* 6. Rodapé */
        .page-footer {
            text-align: center;
            padding: 1.5rem;
            margin-top: 2rem;
            border-top: 1px solid #e5e7eb;
        }

        .footer-text {
            color: #6b7280;
            margin: 0;
        }