/* Variáveis CSS para cores */
      :root {
        --color-bg-light: #f9fafb; 
        --color-text-dark: #374151; 
        --color-text-medium: #4b5563; 
        --color-text-light: #6b7280; 
        --color-indigo-main: #4f46e5; 
        --color-indigo-dark: #4338ca; 
        --color-indigo-light: #e0e7ff; 
        --color-indigo-lighter: #eef2ff; 
        --color-blue-light: #dbeafe; 
        --color-blue-dark: #1d4ed8; 
        --color-white: #ffffff;
        --color-gray-lighter: #f3f4f6; 
        --color-gray-light: #e5e7eb; 
        --color-border-indigo: #a5b4fc; 
      }

      body {
        font-family: 'Inter', sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        margin: 0;
        padding: 0;
        background-color: var(--color-bg-light);
        color: var(--color-text-dark);
        line-height: 1.5;
      }

      .container {
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 1rem; 
        padding-right: 1rem; 
      }

      
      section {
        padding-top: 4rem; 
        padding-bottom: 4rem; 
      }

      .header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 50;
        background-color: rgba(255, 255, 255, 0.8);
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); 
        backdrop-filter: blur(8px);
      }

      .header nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 1rem; 
        padding-bottom: 1rem; 
      }

      .header .logo {
        font-size: 1.25rem; 
        font-weight: 700; 
        color: var(--color-indigo-main);
        padding: 0.5rem; 
        border-radius: 0.375rem; 
        transition: background-color 0.3s ease;
      }

      .header .logo:hover {
        background-color: var(--color-indigo-lighter);
      }

      .header .nav-desktop {
        display: none; /* hidden md:flex */
        gap: 1.5rem; /* space-x-6 */
      }

      .header .nav-desktop a {
        color: var(--color-text-light);
        font-weight: 500; /* font-medium */
        transition: color 0.3s ease, background-color 0.3s ease;
        padding: 0.5rem; /* p-2 */
        border-radius: 0.375rem; /* rounded-md */
      }

      .header .nav-desktop a:hover {
        color: var(--color-indigo-main);
        background-color: var(--color-gray-lighter);
      }

      .header .mobile-menu-button {
        display: block; /* md:hidden */
        padding: 0.5rem; /* p-2 */
        border-radius: 0.375rem; /* rounded-md */
        color: var(--color-text-light);
        transition: background-color 0.3s ease;
        border: none;
        background: none;
        cursor: pointer;
      }

      .header .mobile-menu-button:hover {
        background-color: var(--color-gray-lighter);
      }

      .header .mobile-menu {
        display: none; /* hidden md:hidden */
        background-color: var(--color-white);
        padding-top: 1rem; /* py-4 */
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06); /* shadow-md */
      }

      .header .mobile-menu.open {
        display: block;
      }

      .header .mobile-menu div {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem; /* space-y-4 */
      }

      .header .mobile-menu a {
        color: var(--color-text-medium);
        font-weight: 500; /* font-medium */
        transition: color 0.3s ease, background-color 0.3s ease;
        width: 100%;
        text-align: center;
        padding-top: 0.5rem; /* py-2 */
        padding-bottom: 0.5rem; /* py-2 */
        border-radius: 0.375rem; /* rounded-md */
      }

      .header .mobile-menu a:hover {
        color: var(--color-indigo-main);
        background-color: var(--color-bg-light);
      }

      /* Main content padding for fixed header */
      main {
        padding-top: 5rem; /* pt-20 */
      }

      /* Seção Hero/Início */
      .hero-section {
        padding-top: 6rem; /* py-24 */
        padding-bottom: 6rem; /* py-24 */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        min-height: calc(100vh - 80px); /* h-screen-minus-header */
      }

      .hero-section h1 {
        font-size: 2.25rem; /* text-4xl */
        font-weight: 800; /* font-extrabold */
        color: var(--color-text-dark);
        line-height: 1.25; /* leading-tight */
        margin-bottom: 1rem; /* mb-4 */
        animation: fadeInUp 0.6s ease-out forwards;
      }

      .hero-section h1 span {
        color: var(--color-indigo-main);
      }

      .hero-section p {
        font-size: 1.125rem; /* text-lg */
        color: var(--color-text-light);
        max-width: 42rem; /* max-w-2xl */
        margin-bottom: 2rem; /* mb-8 */
        animation: fadeInUp 0.6s ease-out forwards;
        animation-delay: 0.1s;
      }

      .hero-section .buttons {
        display: flex;
        gap: 1rem; /* space-x-4 */
        animation: fadeInUp 0.6s ease-out forwards;
        animation-delay: 0.2s;
      }

      .button-primary, .button-secondary {
        padding: 0.75rem 1.5rem; /* px-6 py-3 */
        font-weight: 600; /* font-semibold */
        border-radius: 0.375rem; /* rounded-md */
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06); /* shadow-lg */
        transition: background-color 0.3s ease, transform 0.3s ease, border-color 0.3s ease, color 0.3s ease;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

      .button-primary {
        background-color: var(--color-indigo-main);
        color: var(--color-white);
      }

      .button-primary:hover {
        background-color: var(--color-indigo-dark);
        transform: scale(1.05);
      }

      .button-secondary {
        border: 1px solid var(--color-indigo-main);
        color: var(--color-indigo-main);
        background-color: transparent;
      }

      .button-secondary:hover {
        background-color: var(--color-indigo-lighter);
        transform: scale(1.05);
      }

      /* Seção Sobre Mim */
      .about-section {
        background-color: var(--color-white);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06); /* shadow-lg */
        border-radius: 0.5rem; /* rounded-lg */
        margin-bottom: 4rem; /* mb-16 */
      }

      .about-section h2 {
        font-size: 2rem; /* text-3xl */
        font-weight: 700; /* font-bold */
        color: var(--color-text-dark);
        margin-bottom: 2rem; /* mb-8 */
        text-align: center;
      }

      .about-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem; /* gap-8 */
      }

      .about-content img {
        width: 12rem; /* w-48 */
        height: 12rem; /* h-48 */
        border-radius: 9999px; /* rounded-full */
        object-fit: cover;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06); /* shadow-md */
        border: 4px solid var(--color-border-indigo);
      }

      .about-text {
        text-align: center;
        flex-grow: 1;
      }

      .about-text p {
        color: var(--color-text-medium);
        line-height: 1.625; /* leading-relaxed */
        margin-bottom: 1rem; /* mb-4 */
      }

      .about-text h3 {
        font-size: 1.25rem; /* text-xl */
        font-weight: 600; /* font-semibold */
        color: var(--color-text-dark);
        margin-bottom: 1rem; /* mb-4 */
      }

      .skills-list {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem; /* gap-3 */
        justify-content: center;
      }

      .skills-list span {
        background-color: var(--color-indigo-lighter);
        color: var(--color-indigo-dark);
        padding: 0.25rem 0.75rem; /* px-3 py-1 */
        border-radius: 9999px; /* rounded-full */
        font-size: 0.875rem; /* text-sm */
        font-weight: 500; /* font-medium */
      }

      /* Seção Projetos */
      .projects-section h2 {
        font-size: 2rem; /* text-3xl */
        font-weight: 700; /* font-bold */
        color: var(--color-text-dark);
        margin-bottom: 3rem; /* mb-12 */
        text-align: center;
      }

      .projects-grid {
        display: grid;
        grid-template-columns: 1fr; /* grid-cols-1 */
        gap: 2rem; /* gap-8 */
      }

      .project-card {
        background-color: var(--color-white);
        border-radius: 0.5rem; /* rounded-lg */
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06); /* shadow-lg */
        overflow: hidden;
        transform: scale(1);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
      }

      .project-card:hover {
        transform: scale(1.05);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
      }

      .project-card img {
        width: 100%;
        height: 12rem; /* h-48 */
        object-fit: cover;
      }

      .project-card .content {
        padding: 1.5rem; /* p-6 */
      }

      .project-card h3 {
        font-size: 1.25rem; /* text-xl */
        font-weight: 600; /* font-semibold */
        color: var(--color-text-dark);
        margin-bottom: 0.5rem; /* mb-2 */
      }

      .project-card p {
        color: var(--color-text-light);
        font-size: 0.875rem; /* text-sm */
        margin-bottom: 1rem; /* mb-4 */
      }

      .project-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem; /* gap-2 */
        margin-bottom: 1rem; /* mb-4 */
      }

      .project-tags span {
        background-color: var(--color-gray-lighter);
        color: var(--color-text-medium);
        padding: 0.125rem 0.5rem; /* px-2 py-0.5 */
        border-radius: 9999px; /* rounded-full */
        font-size: 0.75rem; /* text-xs */
      }

      .project-links {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 1rem; /* mt-4 */
      }

      .project-links a {
        display: flex;
        align-items: center;
        color: var(--color-indigo-main);
        transition: color 0.3s ease;
        font-size: 0.875rem; /* text-sm */
        font-weight: 500; /* font-medium */
        text-decoration: none;
      }

      .project-links a:hover {
        color: var(--color-indigo-dark);
      }

      .project-links svg {
        margin-left: 0.25rem; /* ml-1 */
      }

      /* Seção Contato */
      .contact-section {
        background-color: var(--color-white);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06); /* shadow-lg */
        border-radius: 0.5rem; /* rounded-lg */
        margin-bottom: 4rem; /* mb-16 */
        text-align: center;
      }

      .contact-section h2 {
        font-size: 2rem; /* text-3xl */
        font-weight: 700; /* font-bold */
        color: var(--color-text-dark);
        margin-bottom: 2rem; /* mb-8 */
      }

      .contact-section p {
        text-align: center;
        color: var(--color-text-medium);
        max-width: 42rem; /* max-w-xl */
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 2rem; /* mb-8 */
      }

      .contact-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem; /* gap-6 */
      }

      .contact-email-button {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem; /* gap-2 */
        padding: 0.75rem 1.5rem; /* px-6 py-3 */
        background-color: var(--color-indigo-main);
        color: var(--color-white);
        font-weight: 600; /* font-semibold */
        border-radius: 0.375rem; /* rounded-md */
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06); /* shadow-lg */
        transition: background-color 0.3s ease, transform 0.3s ease;
        text-decoration: none;
      }

      .contact-email-button:hover {
        background-color: var(--color-indigo-dark);
        transform: scale(1.05);
      }

      .social-links {
        display: flex;
        gap: 1rem; /* space-x-4 */
      }

      .social-links a {
        padding: 0.75rem; /* p-3 */
        border-radius: 9999px; /* rounded-full */
        transition: background-color 0.3s ease, transform 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .social-links .github-link {
        background-color: var(--color-gray-lighter);
        color: var(--color-text-medium);
      }

      .social-links .github-link:hover {
        background-color: var(--color-gray-light);
        transform: scale(1.1);
      }

      .social-links .linkedin-link {
        background-color: var(--color-blue-light);
        color: var(--color-blue-dark);
      }

      .social-links .linkedin-link:hover {
        background-color: #bfdbfe; /* blue-200 */
        transform: scale(1.1);
      }

      /* Rodapé */
      .footer {
        background-color: #1f2937; /* gray-800 */
        color: #d1d5db; /* gray-300 */
        padding-top: 2rem; /* py-8 */
        padding-bottom: 2rem; /* py-8 */
        text-align: center;
      }

      .footer p {
        margin: 0;
      }

      .footer .small-text {
        font-size: 0.875rem; /* text-sm */
        margin-top: 0.5rem; /* mt-2 */
      }

      /* Mídias Queries para Responsividade */
      @media (min-width: 768px) { /* md: breakpoint */
        .header .nav-desktop {
          display: flex;
        }
        .header .mobile-menu-button {
          display: none;
        }
        .about-content {
          flex-direction: row;
          align-items: flex-start;
        }
        .about-text {
          text-align: left;
        }
        .skills-list {
          justify-content: flex-start;
        }
        .projects-grid {
          grid-template-columns: repeat(2, 1fr); /* md:grid-cols-2 */
        }
      }

      @media (min-width: 1024px) { /* lg: breakpoint */
        .projects-grid {
          grid-template-columns: repeat(3, 1fr); /* lg:grid-cols-3 */
        }
      }

      /* Animações */
      @keyframes fadeInUp {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }