/* --- DESIGN SYSTEM --- */
        :root {
            --bg-body: #0f172a;
            --bg-card: #1e293b;
            --bg-input: #334155;
            --text-main: #f8fafc;
            --text-muted: #94a3b8;
            --primary: #3b82f6;
            --primary-hover: #2563eb;
            --accent: #10b981; 
            --border: #334155;
            --container: 1200px;
            --radius: 8px;
            --transition: 0.3s ease;
        }/* --- DESIGN SYSTEM --- */
        :root {
            --bg-body: #0f172a;
            --bg-card: #1e293b;
            --bg-input: #334155;
            --text-main: #f8fafc;
            --text-muted: #94a3b8;
            --primary: #3b82f6;
            --primary-hover: #2563eb;
            --accent: #10b981; 
            --border: #334155;
            --container: 1200px;
            --radius: 8px;
            --transition: 0.3s ease;
        }

        [data-theme="light"] {
            --bg-body: #f1f5f9;
            --bg-card: #ffffff;
            --bg-input: #e2e8f0;
            --text-main: #0f172a;
            --text-muted: #64748b;
            --primary: #2563eb;
            --border: #cbd5e1;
        }

        /* --- RESET & BASE --- */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        
        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--bg-body);
            color: var(--text-main);
            line-height: 1.6;
            transition: background-color var(--transition), color var(--transition);
        }

        a { text-decoration: none; color: inherit; transition: var(--transition); }
        ul { list-style: none; }
        .code-font { font-family: 'Fira Code', monospace; }

        .container {
            max-width: var(--container);
            margin: 0 auto;
            padding: 0 20px;
        }

        /* --- HEADER --- */
        header {
            position: fixed;
            top: 0;
            width: 100%;
            background: rgba(15, 23, 42, 0.9);
            backdrop-filter: blur(10px);
            z-index: 1000;
            border-bottom: 1px solid var(--border);
            padding: 1rem 0;
        }
        
        [data-theme="light"] header { background: rgba(255, 255, 255, 0.9); }

        .nav-container { display: flex; justify-content: space-between; align-items: center; }
        .logo { font-size: 1.5rem; font-weight: 700; color: var(--primary); }
        .logo span { color: var(--text-main); }
        nav ul { display: flex; gap: 2rem; align-items: center; }
        @media (max-width: 768px) { nav ul { display: none; } }
        
        .btn-theme {
            background: none; 
            border: none; /* Removed border for a cleaner icon look */
            color: var(--text-main); 
            padding: 5px; 
            border-radius: 50%; 
            cursor: pointer; 
            font-size: 1.2rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* --- THEME ICON TOGGLE CSS --- */
        /* Hide the sun in dark mode (default) */
        .sun-icon { display: none; }
        /* Show the moon in dark mode (default) */
        .moon-icon { display: block; }

        /* In light mode, hide the moon and show the sun */
        [data-theme="light"] .moon-icon { display: none; }
        [data-theme="light"] .sun-icon { display: block; }


        /* --- HERO --- */
        .hero { padding: 160px 0 100px; text-align: center; }
        .hero h2 { font-size: 1rem; color: var(--primary); margin-bottom: 1rem; }
        .hero h1 { font-size: 3.5rem; line-height: 1.1; margin-bottom: 1.5rem; font-weight: 800; }
        .hero p { max-width: 700px; margin: 0 auto 2rem; color: var(--text-muted); font-size: 1.25rem; }

        .btn { display: inline-block; padding: 12px 24px; border-radius: var(--radius); font-weight: 600; cursor: pointer; border: none; }
        .btn-primary { background-color: var(--primary); color: white; }
        .btn-primary:hover { background-color: var(--primary-hover); transform: translateY(-2px); }
        .btn-outline { border: 1px solid var(--border); color: var(--text-main); margin-left: 10px; }
        .btn-outline:hover { border-color: var(--primary); color: var(--primary); }

        /* --- ABOUT --- */
        .about-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 4rem; align-items: center; padding: 80px 0; }
        
        /* CORREÇÃO DE TAMANHO + MOLDURA */
        .profile-img {
            width: 100%;
            max-width: 320px;  /* Controlador de tamanho */
            height: auto;
            border-radius: var(--radius);
            overflow: hidden;
            border: 1px solid var(--border);
            margin: 0 auto; /* Centraliza se for menor que a coluna */
            display: block;
            line-height: 0;
            font-size: 0;
        }

        .profile-img img {
            width: 100%;
            height: auto;
            display: block;
        }

        blockquote { border-left: 4px solid var(--primary); padding-left: 1rem; margin: 1.5rem 0; font-style: italic; color: var(--text-muted); }

        /* --- SKILLS --- */
        .skills-section { padding: 80px 0; background-color: var(--bg-card); }
        .skills-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }
        .skill-item { margin-bottom: 1.5rem; }
        .skill-header { display: flex; justify-content: space-between; margin-bottom: 0.5rem; font-weight: 600; font-size: 0.9rem; }
        .progress-bar { width: 100%; height: 8px; background-color: var(--bg-body); border-radius: 4px; overflow: hidden; }
        .progress-fill { height: 100%; background-color: var(--primary); border-radius: 4px; }

        /* --- PROJETOS (GRID SCROLL) --- */
        .section-title { margin-bottom: 3rem; }
        .section-title h2 { font-size: 2.5rem; margin-bottom: 0.5rem; }
        
        .scroll-grid {
            display: flex; gap: 20px; overflow-x: auto; padding-bottom: 20px;
            scroll-snap-type: x mandatory; scroll-behavior: smooth;
            scrollbar-width: none; -ms-overflow-style: none; 
        }
        .scroll-grid::-webkit-scrollbar { display: none; }
        
        .project-card {
            min-width: 350px; max-width: 350px;
            background-color: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 20px;
            scroll-snap-align: start;
            display: flex; flex-direction: column;
            flex-shrink: 0;
        }

        .project-thumb {
            width: 100%; height: 180px;
            background-color: var(--bg-body);
            border-radius: 4px; margin-bottom: 15px;
            overflow: hidden;
        }
        .project-thumb img { width: 100%; height: 100%; object-fit: cover; }

        .project-header { display: flex; justify-content: space-between; align-items: start; margin-bottom: 0.5rem; }
        .project-year { font-size: 0.8rem; color: var(--text-muted); }
        .project-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 1rem 0; }
        .tag { font-size: 0.75rem; background: var(--bg-body); padding: 4px 8px; border-radius: 4px; color: var(--primary); border: 1px solid var(--border); }

        /* --- SERVIÇOS & CONTACT --- */
        .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 2rem; }
        .service-card { background: var(--bg-card); padding: 2rem; border-radius: var(--radius); border: 1px solid var(--border); text-align: center; transition: var(--transition); }
        .service-card:hover { border-color: var(--primary); transform: translateY(-5px); }
        .price { font-size: 1.5rem; font-weight: 700; color: var(--text-main); margin: 1rem 0; display: block; }
        .service-type { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--primary); font-weight: bold; }

        .contact-section { padding: 100px 0; }
        .contact-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; }
        .form-group { margin-bottom: 1rem; }
        .form-group label { display: block; margin-bottom: 0.5rem; font-size: 0.9rem; }
        .form-group input, .form-group textarea { width: 100%; padding: 12px; background: var(--bg-input); border: 1px solid var(--border); color: var(--text-main); border-radius: var(--radius); outline: none; }

        footer { padding: 2rem 0; text-align: center; border-top: 1px solid var(--border); font-size: 0.9rem; color: var(--text-muted); }

        @media (max-width: 768px) {
            .hero h1 { font-size: 2.5rem; }
            .about-grid, .contact-wrapper { grid-template-columns: 1fr; }
            .profile-img { order: -1; }
        }

        [data-theme="light"] {
            --bg-body: #f1f5f9;
            --bg-card: #ffffff;
            --bg-input: #e2e8f0;
            --text-main: #0f172a;
            --text-muted: #64748b;
            --primary: #2563eb;
            --border: #cbd5e1;
        }

        /* --- RESET & BASE --- */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        
        body {
            font-family: 'Inter', sans-serif;
            background-color: var(--bg-body);
            color: var(--text-main);
            line-height: 1.6;
            transition: background-color var(--transition), color var(--transition);
        }

        a { text-decoration: none; color: inherit; transition: var(--transition); }
        ul { list-style: none; }
        .code-font { font-family: 'Fira Code', monospace; }

        .container {
            max-width: var(--container);
            margin: 0 auto;
            padding: 0 20px;
        }

        /* --- HEADER --- */
        header {
            position: fixed;
            top: 0;
            width: 100%;
            background: rgba(15, 23, 42, 0.9);
            backdrop-filter: blur(10px);
            z-index: 1000;
            border-bottom: 1px solid var(--border);
            padding: 1rem 0;
        }
        
        [data-theme="light"] header { background: rgba(255, 255, 255, 0.9); }

        .nav-container { display: flex; justify-content: space-between; align-items: center; }
        .logo { font-size: 1.5rem; font-weight: 700; color: var(--primary); }
        .logo span { color: var(--text-main); }
        nav ul { display: flex; gap: 2rem; align-items: center; }
        @media (max-width: 768px) { nav ul { display: none; } }
        
        .btn-theme {
            background: none; border: 1px solid var(--border);
            color: var(--text-main); padding: 5px 10px; border-radius: 4px;
            cursor: pointer; font-size: 0.8rem;
        }

        /* --- HERO --- */
        .hero { padding: 160px 0 100px; text-align: center; }
        .hero h2 { font-size: 1rem; color: var(--primary); margin-bottom: 1rem; }
        .hero h1 { font-size: 3.5rem; line-height: 1.1; margin-bottom: 1.5rem; font-weight: 800; }
        .hero p { max-width: 700px; margin: 0 auto 2rem; color: var(--text-muted); font-size: 1.25rem; }

        .btn { display: inline-block; padding: 12px 24px; border-radius: var(--radius); font-weight: 600; cursor: pointer; border: none; }
        .btn-primary { background-color: var(--primary); color: white; }
        .btn-primary:hover { background-color: var(--primary-hover); transform: translateY(-2px); }
        .btn-outline { border: 1px solid var(--border); color: var(--text-main); margin-left: 10px; }
        .btn-outline:hover { border-color: var(--primary); color: var(--primary); }

        /* --- ABOUT --- */
        .about-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 4rem; align-items: center; padding: 80px 0; }
        
        .profile-img {
            width: 100%; height: 400px;
            border-radius: var(--radius); overflow: hidden;
            border: 1px solid var(--border);
        }
        .profile-img img { width: 100%; height: 100%; object-fit: cover; }

        blockquote { border-left: 4px solid var(--primary); padding-left: 1rem; margin: 1.5rem 0; font-style: italic; color: var(--text-muted); }

        /* --- SKILLS --- */
        .skills-section { padding: 80px 0; background-color: var(--bg-card); }
        .skills-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }
        .skill-item { margin-bottom: 1.5rem; }
        .skill-header { display: flex; justify-content: space-between; margin-bottom: 0.5rem; font-weight: 600; font-size: 0.9rem; }
        .progress-bar { width: 100%; height: 8px; background-color: var(--bg-body); border-radius: 4px; overflow: hidden; }
        .progress-fill { height: 100%; background-color: var(--primary); border-radius: 4px; }

        /* --- PROJETOS (GRID SCROLL) --- */
        .section-title { margin-bottom: 3rem; }
        .section-title h2 { font-size: 2.5rem; margin-bottom: 0.5rem; }
        
        .scroll-grid {
            display: flex; gap: 20px; overflow-x: auto; padding-bottom: 20px;
            scroll-snap-type: x mandatory; scroll-behavior: smooth;
            /* Esconde barra de rolagem mas mantém funcionalidade */
            scrollbar-width: none; 
            -ms-overflow-style: none; 
        }
        .scroll-grid::-webkit-scrollbar { display: none; }
        
        .project-card {
            min-width: 350px; max-width: 350px; /* Tamanho fixo */
            background-color: var(--bg-card);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 20px;
            scroll-snap-align: start;
            display: flex; flex-direction: column;
            flex-shrink: 0; /* Impede encolhimento */
        }

        .project-thumb {
            width: 100%; height: 180px;
            background-color: var(--bg-body);
            border-radius: 4px; margin-bottom: 15px;
            overflow: hidden;
        }
        .project-thumb img { width: 100%; height: 100%; object-fit: cover; }

        .project-header { display: flex; justify-content: space-between; align-items: start; margin-bottom: 0.5rem; }
        .project-year { font-size: 0.8rem; color: var(--text-muted); }
        .project-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 1rem 0; }
        .tag { font-size: 0.75rem; background: var(--bg-body); padding: 4px 8px; border-radius: 4px; color: var(--primary); border: 1px solid var(--border); }

        /* --- SERVICES & CONTACT --- */
        .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 2rem; }
        .service-card { background: var(--bg-card); padding: 2rem; border-radius: var(--radius); border: 1px solid var(--border); text-align: center; transition: var(--transition); }
        .service-card:hover { border-color: var(--primary); transform: translateY(-5px); }
        .price { font-size: 1.5rem; font-weight: 700; color: var(--text-main); margin: 1rem 0; display: block; }
        .service-type { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--primary); font-weight: bold; }

        .contact-section { padding: 100px 0; }
        .contact-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; }
        .form-group { margin-bottom: 1rem; }
        .form-group label { display: block; margin-bottom: 0.5rem; font-size: 0.9rem; }
        .form-group input, .form-group textarea { width: 100%; padding: 12px; background: var(--bg-input); border: 1px solid var(--border); color: var(--text-main); border-radius: var(--radius); outline: none; }

        footer { padding: 2rem 0; text-align: center; border-top: 1px solid var(--border); font-size: 0.9rem; color: var(--text-muted); }

        @media (max-width: 768px) {
            .hero h1 { font-size: 2.5rem; }
            .about-grid, .contact-wrapper { grid-template-columns: 1fr; }
            .profile-img { height: 300px; order: -1; }
        }


		/* --- ABOUT --- */
    .about-grid {
        display: grid;
        grid-template-columns: 1fr 1.5fr;
        gap: 4rem;
        align-items: center;
        padding: 80px 0;
    }

   
    /* --- CORREÇÃO DE TAMANHO + MOLDURA --- */
    .profile-img {
        width: 100%;
        
        /* AQUI ESTÁ O CONTROLE DE TAMANHO */
        max-width: 320px;  /* Você pode alterar este valor (ex: 280px ou 350px) */
        
        height: auto;
        border-radius: var(--radius);
        overflow: hidden;
        border: 1px solid var(--border);
        
        /* Centraliza a imagem na coluna se ela for menor que o espaço disponível */
        margin: 0 auto; 
        
        /* Zera espaços fantasmas */
        display: block;
        line-height: 0;
        font-size: 0;
    }

    .profile-img img {
        width: 100%;
        height: auto;
        display: block;
    }
        /* TÉCNICA PARA REMOVER ESPAÇOS FANTASMAS: */
        display: block; /* Define o container como bloco */
        line-height: 0; /* Zera a altura de linha para evitar espaço extra abaixo da imagem */
        font-size: 0;   /* Zera o tamanho da fonte pelo mesmo motivo */
    }

    .profile-img img {
        width: 100%;
        height: auto;
        
        /* Essencial: faz a imagem se comportar como um bloco sólido,
           preenchendo todo o espaço horizontal sem deixar margens de texto. */
        display: block; 
    }

    blockquote {
        border-left: 4px solid var(--primary);
        padding-left: 1rem;
        margin: 1.5rem 0;
        font-style: italic;
        color: var(--text-muted);
    }

    /* ... restante do CSS ... */

    /* Mantenha a correção no mobile também */
    @media (max-width: 768px) {
        .hero h1 { font-size: 2.5rem; }
        .about-grid, .contact-wrapper { grid-template-columns: 1fr; }
        .profile-img { 
            height: auto; /* Garante altura automática no mobile */
            order: -1; 
        }
    }