/* Reset do Navegador */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    text-decoration: none;
    outline: none;

}

:root {
    /* Paleta de Cores - Purple */
    --purple-100: #e9dcfa;
    --purple-500: #6b36c8;

    /* Paleta de Cores - Rose/Dark */
    --rose-50: #f5e6ee;
    --rose-100: #e8c2d4;
    --rose-200: #d4919e;
    /* textos secundários suaves */
    --rose-300: #c47a95;
    /* destaques, spans */
    --rose-400: #a85478;
    /* botão outline hover */
    --rose-500: #8b2252;
    /* botão primário */
    --rose-600: #6e1a3f;
    /* botão primário hover */
    --rose-700: #52122e;
    /* bordas escuras */
    --rose-800: #2e0a1a;
    /* fundos de cards */
    --rose-900: #1c0612;
    /* fundo alternativo */
    --rose-950: #110a1a;
    /* fundo principal */

    /* Paleta Omni - para textos e destaques */
    --omni-green: #67e480;
    --omni-yellow: #e7de79;
    --omni-pink: #FF79C6;
    --omni-cyan: #78D1E1;
    --omni-orange: #E89E64;
    --omni-fg: #E1E1E6;
    /* texto principal */
    --omni-comment: #5A4B81;
    /* texto secundário suave */

    /* Cores Neutras */
    --gray-200: #2a1f2e;
    --gray-400: #6e6973;
    --black: #110a1a;
    --white: #ede8f5;


    /* Cores de Estado */
    --error: #ff4d6d;

    /* Sombras */
    --shadow-sm: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.3);
    --shadow-md: 0 0.25rem 0.75rem rgba(139, 34, 82, 0.4);
    --shadow-lg: 0 0.5rem 1.5rem rgba(139, 34, 82, 0.3);

    /* Botões Foscos */
    --btn-primary-bg: rgba(172, 23, 88, 0.59);
    --btn-primary-hover: rgba(172, 23, 88, 0.8);

    /* Bordas com Gradiente */
    --border-gradient: linear-gradient(90deg, var(--rose-700), var(--purple-500), var(--rose-700));

    /* Grade do Fundo */
    --bg-grid: linear-gradient(rgba(180, 80, 120, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(180, 80, 120, 0.07) 1px, transparent 1px);
    --bg-grid-size: 48px 48px;

    /* Efeitos de Iluminação */
    --glow-top: radial-gradient(ellipse at 50% 0%, rgba(160, 50, 90, 0.07) 0%, transparent 70%);

    /* Fundos Semitransparentes */
    --bg-header: rgba(17, 10, 26, 0.85);
    /* header com transparência */
    --bg-card: rgba(46, 10, 26, 0.5);
    /* cards/seções sobre o fundo */

    /* Efeito de Vidro - usar como: backdrop-filter: blur(8px) */
    --blur-glass: blur(8px);

    /* Espaçamentos */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 4rem;

    /* Tamanhos de Fonte */
    --text-sm: 0.75rem;
    --text-base: 1rem;
    --text-lg: 1.25rem;
    --text-xl: 1.5rem;
    --text-2xl: 2rem;
    --text-3xl: 2.5rem;

    /* Border Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    --radius-xl: 2rem;
    --radius-full: 50%;

    /* Animação Padrão */
    --transition-default: all 0.3s ease;
}

/* Configurações Básicas */

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
    background-color: var(--rose-950);
    background-image: var(--bg-grid);
    background-size: var(--bg-grid-size);
    line-height: 1.6;
    color: var(--white);
    overflow-x: hidden;
}


main {
    flex: 1;
}

/* Seções - Base Comum */

.section-container {
    max-width: 70rem;
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-md);
    scroll-margin-top: 6rem;
}

/* Botões */

.buttons-container {
    display: flex;
    gap: var(--spacing-sm);
}

.botao,
.botao-outline {
    display: inline-block;
    padding: 0.75rem 1rem;
    border: 0.10rem solid transparent;
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: var(--transition-default);
    backdrop-filter: var(--blur-glass);
}

.botao {
    background-color: var(--btn-primary-bg);
    color: var(--white);
    border-color: transparent;
}

.botao:hover {
    background-color: var(--btn-primary-hover);
    border-color: var(--rose-300);
    box-shadow: var(--shadow-md);
    transform: translateY(-0.15rem);
}

.botao-outline {
    border-color: var(--rose-500);
    background-color: transparent;
    color: var(--rose-100);
}

.botao-outline:hover {
    background-color: rgba(139, 34, 82, 0.2);
    border-color: var(--rose-300);
    color: var(--white);
    box-shadow: 0 0 12px rgba(255, 121, 198, 0.25);
    transform: translateY(-0.15rem);
}

/* Botões pequenos - Card Projetos */

.botao.botao-sm,
.botao-outline.botao-sm {
    min-width: 6rem;
    padding: 0.25rem var(--spacing-sm);
    border-width: 0.125rem;
    border-radius: 0.25rem;
    font-size: var(--text-sm);
}

/* Seção Header - Cabeçalho e Menu */
header {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    height: 5rem;
    background-color: var(--bg-header);
    backdrop-filter: var(--blur-glass);
    border-bottom: 0.15rem solid transparent;
    border-image: var(--border-gradient) 1;
    transition: all 0.3s ease;
}

header.sem-borda {
    border-bottom: none;
    border-image: none;
    box-shadow: 0 0 20px rgba(139, 34, 82, 0.3);
}

header a {
    font-weight: 600;
    color: var(--white);
    transition: color 0.3s ease;
}

header a:hover {
    color: var(--purple-100);
}

#titulo {
    font-size: var(--text-2xl);
    font-weight: 700;
}

.menu-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 70rem;
    height: 100%;
    margin: 0 auto;
    padding: 0 var(--spacing-md);

}

.menu-list {
    display: flex;
    gap: var(--spacing-lg);
    list-style: none;
}

.menu-list a {
    padding: var(--spacing-xs);
}

/* Seção Hero */

.hero-container {
    display: flex;
    align-items: center;
    padding-top: 10rem;
    gap: var(--spacing-2xl);
    min-height: calc(100vh - 5rem);
}

.hero-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--spacing-md);
}

.hero-content span {
    font-weight: 600;
}

.hero-greeting {
    font-weight: 700;
    color: var(--omni-pink);
}

.hero-role {
    color: var(--omni-cyan);
    white-space: nowrap;
}

.hero-content h1 {
    font-size: var(--text-3xl);
    font-weight: 700;
    line-height: 1.3;
    color: var(--white);
}

.hero-content p,
.about-content p,
.contact-info p {
    font-size: var(--text-lg);
    color: var(--omni-fg);
}

.hero-image {
    display: flex;
    flex: 1;
    justify-content: center;
}

.hero-image img {
    width: 100%;
    max-width: 100%;
    border-radius: var(--radius-xl);
}

/* Animação Flutuante */
@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-1.25rem);
    }
}

/* Usa Animação */
.float-animation {
    animation: none;
    transition: transform 0.4s ease;

}

.float-animation:hover {
    transform: translateY(-0.3rem);
}


/* Seção About */

#about {
    position: relative;
}


.about-container {
    position: relative;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--spacing-2xl);
    row-gap: var(--spacing-md);
    background-color: transparent;
    margin: var(--spacing-2xl) auto;
    background-image: none;
    border-radius: var(--radius-lg);
    border: none;
}

.about-left {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
}

.about-left-buttons {
    margin-top: var(--spacing-md);
}

.about-content pre {
    margin: 0;
    background: transparent;
    padding: 1.5rem;
    border-radius: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--omni-fg);
}

.about-container h2 {
    width: 100%;
    text-align: center;
    margin-bottom: var(--spacing-md);
    font-size: var(--text-2xl);
    font-weight: 600;
    color: var(--omni-pink);
}

/* Estilização do código dentro da Seção About */

/* Syntax Highlighting - Seção About */
.keyword {
    color: #FF79C6;
}

.variable {
    color: #F8F8F2;
}

.property {
    color: #8BE9FD;
}

.string {
    color: #F1FA8C;
}

.code-container::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 1rem;
    pointer-events: none;
    box-shadow: inset 0 0 20px rgba(107, 54, 200, 0.04);
}

.code-container {
    position: relative;
    max-width: 100%;
    background: rgba(20, 12, 35, 0.15);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow:
        0 0 10px rgba(139, 34, 82, 0.08),
        0 0 40px rgba(196, 132, 154, 0.04);

    padding: 1px;
    background-clip: padding-box;
    backdrop-filter: blur(8px);
}

.code-container::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 1rem;
    padding: 1px;
    background: linear-gradient(135deg,
            rgba(255, 121, 198, 0.9) 0%,
            rgba(255, 121, 198, 0.4) 15%,
            rgba(196, 132, 154, 0.15) 40%,
            rgba(107, 54, 200, 0.08) 70%,
            transparent 100%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}


.code-container pre {
    background: transparent;
    padding: 2rem 2rem 2rem 1.75rem;
    font-size: 1.15rem;
    line-height: 2rem;
    white-space: pre;
    overflow-x: auto;
    box-shadow: none;
}

.code-container pre,
.code-container code,
.code-container pre span {
    font-size: inherit;
    line-height: inherit;
}

.code-header {
    height: 2.5rem;
    background: rgba(20, 12, 35, 0.6);
    display: flex;
    align-items: center;
    padding-left: 1rem;
    gap: 0.4rem;
    border-bottom: 2px solid rgba(255, 121, 198, 0.2);
    box-shadow: 0 1px 8px rgba(255, 121, 198, 0.12);
}

.dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
}

.dot-1 {
    background-color: #e07090;
    box-shadow: 0 0 6px rgba(224, 112, 144, 0.6);
}

.dot-2 {
    background-color: #c47a95;
    box-shadow: 0 0 6px rgba(196, 122, 149, 0.4);
}

.dot-3 {
    background-color: #a85478;
    box-shadow: 0 0 6px rgba(168, 84, 120, 0.3);
}


.about-image {
    flex: 0 0 auto;
    width: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
}

.about-image img {
    width: 100%;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-lg);
    max-width: 14rem;
}

.projects-container h2,
.contact-info h2 {
    margin-bottom: var(--spacing-md);
    font-size: var(--text-2xl);
    font-weight: 600;
    color: var(--omni-pink);
}


.about-content p {
    margin-bottom: var(--spacing-sm);
    text-align: justify;
}

.about-buttons-data {
    display: none;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.about-buttons-data .botao {
    margin-right: auto;
}

.data-container {
    display: flex;
    gap: var(--spacing-lg);
    margin-top: 0;
}

.data-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.data-number {
    font-size: var(--text-xl);
    font-weight: 700;
    text-align: center;
    color: var(--omni-cyan);
}

.data-label {
    font-size: var(--text-base);
    text-align: center;
    color: var(--omni-fg);
}

/* Projects */

#projects {
    position: relative;
}

.projects-container {
    scroll-margin-top: 3rem;
    margin: var(--spacing-2xl) auto;
    text-align: center;
}

.projects-swiper {
    position: relative;
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-xl) var(--spacing-xl);
    overflow: hidden;
}

/* Card Projetos */

.project-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: var(--radius-lg);
    background: rgba(20, 12, 35, 0.4);
    backdrop-filter: none;
    overflow: hidden;
    transition: var(--transition-default);
    position: relative;
    isolation: isolate;
}

.project-card::before {
    content: '';
    position: absolute;
    inset: -0.1rem;
    border-radius: var(--radius-lg);
    background: linear-gradient(90deg,
            rgba(139, 34, 82, 0.15),
            rgba(107, 54, 200, 0.15));
    z-index: -1;
}

.project-card:hover {
    transform: translateY(-0.25rem);
    box-shadow:
        0 10px 30px rgba(139, 34, 82, 0.25),
        0 0 20px rgba(255, 121, 198, 0.08);
}

.project-image {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 6rem;
    background-color: rgba(20, 12, 35, 0.3);
    border-bottom: 1px solid rgba(196, 132, 154, 0.12);
}

.project-image::after {
    content: none;
    position: absolute;
    width: 70%;
    height: 70%;
    background: radial-gradient(circle,
            rgba(255, 121, 198, 0.15) 0%,
            transparent 70%);
    filter: blur(20px);
    z-index: 0;
}


.project-image img {
    padding: 0.3rem;
    position: relative;
    z-index: 1;
    width: 70%;
    height: 70%;
    max-width: 4rem;
    max-height: 4rem;
    object-fit: contain;
    opacity: 0.9;
    transition: var(--transition-default);
    filter: brightness(0) saturate(100%) invert(63%) sepia(45%) saturate(800%) hue-rotate(280deg) brightness(105%);
}

.social-icon img {
    width: 100%;
    object-fit: contain;
    transition: filter 0.3s ease;
    filter: brightness(0) saturate(100%) invert(63%) sepia(45%) saturate(800%) hue-rotate(280deg) brightness(90%);
}

.project-card:hover .project-image img {
    transform: scale(1.08);
    opacity: 1;
}

.project-content {
    display: flex;
    flex: 1;
    gap: 0.5rem;
    flex-direction: column;
    padding: var(--spacing-md);
    letter-spacing: 0.03rem;
    text-align: center;
}

.project-content h3 {
    margin-bottom: 0.75rem;
    font-weight: 700;
    color: var(--white);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.8rem;
    line-height: 1.4;
}

.project-content p {
    flex: 1;
    margin-bottom: var(--spacing-sm);
    font-size: var(--text-base);
    color: var(--omni-fg);
}

.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    align-items: flex-start;
    align-content: flex-start;
    min-height: 3.5rem;
}

.tag {
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 600;
    background: transparent;
    border: 1px solid rgba(168, 84, 120, 0.25);
    color: var(--rose-300);
}

.project-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    margin-top: auto;
}

/* Configuração do Swiper */
.swiper-wrapper {
    align-items: stretch;
}

.swiper-slide {
    display: flex;
    height: auto;
}

/* Botões do Swiper (navegação) */
.swiper-button-next,
.swiper-button-prev {
    opacity: 0.6;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: rgba(17, 10, 26, 0.7);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(139, 34, 82, 0.4);
    transition: var(--transition-default);
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--omni-pink);
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    opacity: 1;
    background: rgba(139, 34, 82, 0.25);
    border-color: var(--rose-300);
    box-shadow: 0 0 8px rgba(255, 121, 198, 0.18);
    transform: scale(1.08);
}

/* Indicadores de paginação */

.swiper-pagination-bullet {
    margin-top: 1rem;
    width: 0.6rem;
    height: 0.6rem;
    background-color: rgba(255, 255, 255, 0.3);
    opacity: 1;
    transition: var(--transition-default);
    transform: scale(0.9);
}

.swiper-pagination-bullet-active {
    width: var(--spacing-md);
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg,
            var(--omni-pink),
            var(--rose-400));
    box-shadow: 0 0 8px rgba(255, 121, 198, 0.4);
    transform: scale(1);
}

/* Seção de Contato */

.contact-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-2xl);

}

/* Redes Sociais */
.contact-info h2 {
    margin-bottom: var(--spacing-md);
}

.contact-info p {
    margin-bottom: var(--spacing-lg);
}

.social-container {
    display: flex;
    justify-content: center;
    gap: var(--spacing-xl);
}

.social-icon {
    position: relative;
    isolation: isolate;
    width: 5rem;
    height: 5rem;
    padding: 0.75rem;
    border-radius: var(--radius-md);
    background-color: rgba(17, 10, 26, 0.95);
    transition: var(--transition-default);
}

.social-icon img {
    width: 100%;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(72%) sepia(40%) saturate(600%) hue-rotate(285deg) brightness(110%);
    transition: filter 0.3s ease;
}

.social-icon img:hover {
    filter: brightness(0) saturate(100%) invert(42%) sepia(93%) saturate(1352%) hue-rotate(243deg) brightness(79%) contrast(91%);
}

/* Formulário de Contato */
form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

form button {
    margin-top: var(--spacing-sm);
}

form label {
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--white);
}

form input,
form textarea {
    width: 100%;
    padding: 0.5rem var(--spacing-sm);
    border: 0.10rem solid var(--rose-700);
    border-radius: var(--radius-md);
    background-color: rgba(17, 10, 26, 0.95);
    color: var(--white);
    font-family: inherit;
    font-size: var(--text-base);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

form input::placeholder,
form textarea::placeholder {
    color: var(--omni-pink);
    opacity: 0.75;
}

form input:focus,
form textarea:focus {
    border-color: var(--rose-300);
    box-shadow: 0 0 6px rgba(255, 121, 198, 0.18);
}


form textarea {
    min-height: 5rem;
    resize: none;
}

form span {
    margin-top: -0.75rem;
    font-size: var(--text-sm);
    color: var(--error);
}

/* Footer */
footer {
    position: relative;
    padding: 2.5rem;
    background-color: var(--bg-header);
    backdrop-filter: var(--blur-glass);
    font-weight: 600;
    text-align: center;
    color: var(--white);
}

footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0.15rem;
    background: var(--border-gradient);
}


.footer-credit {
    font-weight: 700;
    color: var(--omni-pink);
}

/* Footer */
.success-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: calc(100vh - 12.5rem);
    padding: var(--spacing-xl) var(--spacing-md);
}

.success-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    max-width: 37.5rem;
    text-align: center;
}

.success-content h1 {
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--omni-pink);
}

.success-content p {
    font-size: var(--text-lg);
    color: var(--omni-fg);
    opacity: 0.8;

}

.success-image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 7.5rem;
    height: 7.5rem;
    border-radius: var(--radius-full);
    background: rgba(46, 10, 26, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(139, 34, 82, 0.4);
}

@keyframes checkFadeScale {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    70% {
        transform: scale(1.1);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.success-image img {
    width: 6rem;
    height: 6rem;
    filter: brightness(0) saturate(100%) invert(63%) sepia(45%) saturate(800%) hue-rotate(280deg) brightness(105%);
    opacity: 0;
    transform: scale(0.5);
    animation: checkFadeScale 0.6s ease-out 0.2s forwards;
}

.success-image::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;

    background: radial-gradient(circle,
            rgba(255, 121, 198, 0.15) 0%,
            transparent 70%);
    filter: blur(20px);
    z-index: -1;
}


/* Responsividade - Tablet */
@media screen and (max-width: 1024px) {

    /* Layout */
    .section-container {
        padding: var(--spacing-lg) var(--spacing-md);
    }

    /* Tipografia */
    .section-container h1 {
        font-size: var(--text-3xl);
    }

    .section-container h2 {
        font-size: var(--text-2xl);
    }

    .section-container p {
        font-size: var(--text-base);
    }

    .section-container span {
        font-size: var(--text-lg);
    }

    .success-content h1 {
        font-size: var(--text-3xl);
    }

    .success-content h2 {
        font-size: var(--text-lg);
    }

    /* Header */
    #titulo {
        font-size: var(--text-xl);
    }


    /* Header - Oculta menu em telas pequenas */
    @media (max-width: 768px) {
        .menu-list {
            display: none;
        }
    }

    /* Hero */
    .hero-container {
        flex-direction: column-reverse;
        gap: var(--spacing-lg);
        min-height: 60vh;
        text-align: center;
    }

    .hero-content,
    .hero-image {
        width: 70%;
    }

    .hero-image img {
        object-fit: cover;
    }

    .buttons-container {
        justify-content: center;
        width: 100%;
    }

    .hero-container .botao,
    .hero-container .botao-outline {
        padding: 0.75rem 1.5rem;
        font-size: var(--text-base);
        white-space: nowrap;
    }

    /* About */
    .about-container {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        column-gap: 6rem;
        row-gap: var(--spacing-md);
        margin: var(--spacing-2xl) auto;
    }

    .about-left {
        flex: 0 0 17.5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-md);
        margin-top: var(--spacing-sm);
    }

    .about-image {
        width: 100%;
        margin-left: 0;
    }

    .about-image img {
        max-width: 16rem;
        width: 100%;
    }

    .about-content {
        flex: 1;
        width: 100%;
    }

    .about-buttons-data {
        flex-direction: column;
        gap: var(--spacing-md);
        align-items: stretch;
    }

    .about-buttons-data .botao {
        margin-right: 0;
    }

    .data-container {
        justify-content: center;
        width: 100%;
    }

    .code-container pre {
        font-size: 0.65rem;
        line-height: 1.3rem;
        white-space: pre-wrap;
        overflow-x: auto;
        padding: 0.75rem;
        text-align: left;
    }

    /* Projects */
    .projects-container {
        margin: var(--spacing-lg) auto 0;
    }

    .projects-swiper {
        margin: 0;
        padding: var(--spacing-sm) var(--spacing-lg) 2.5rem;
    }

    .project-card {
        width: 100%;
        height: 30rem;
        min-height: 30rem;
        max-height: 30rem;
        max-width: 100%;
        background: rgba(15, 10, 25, 0.5);
    }

    .project-content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
    }

    .project-content p {
        flex: 1;
        overflow: hidden;
    }

    .project-tags {
        min-height: 2.5rem;
        align-items: flex-start;
    }

    .swiper-wrapper {
        align-items: stretch;
    }

    .swiper-slide {
        display: flex;
        justify-content: center;
        align-items: stretch;
        height: auto;
    }

    .swiper-button-next,
    .swiper-button-prev {
        display: none;
    }

    /* Contact */
    .contact-container {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        width: 90%;
        margin: 0 auto;
    }

    /* Success Page */
    .success-container {
        padding: var(--spacing-xl) var(--spacing-md);
        min-height: calc(100vh - 10rem);
    }

    .success-content {
        gap: var(--spacing-lg);
        max-width: 35rem;
    }

    .success-image {
        width: 6rem;
        height: 6rem;
    }

    .success-image img {
        width: 5rem;
        height: 5rem;
    }

}

/* Responsividade - Celular */

@media screen and (max-width: 480px) {

    /* Layout */
    .section-container {
        padding: var(--spacing-md) var(--spacing-sm);
    }

    /* Tipografia Mobile */
    .section-container h1 {
        font-size: var(--text-xl);
    }

    .section-container h2 {
        font-size: var(--text-lg);
    }

    .section-container p {
        font-size: var(--text-base);
    }

    .hero-content span {
        font-size: var(--text-xl);
    }

    /* Header */
    #titulo {
        font-size: var(--text-xl);
    }

    header {
        width: 100%;
        left: 0;
        right: 0;
    }

    .menu-content {
        width: 100%;
        padding: 0 var(--spacing-sm);
        justify-content: center;
    }

    .menu-list {
        display: none;
    }

    /* Hero */

    .hero-container {
        flex-direction: column-reverse;
        gap: var(--spacing-xs);
        min-height: 60vh;
    }

    .hero-content {
        gap: var(--spacing-xs);
        width: 100%;
    }

    .hero-content span {
        font-size: var(--text-xl);
    }

    .buttons-container {
        flex-direction: column;
        gap: 0.75rem;
        width: 100%;
    }

    .buttons-container .botao,
    .buttons-container .botao-outline {
        padding: 0.75rem 1rem;
        font-size: var(--text-base);
        white-space: nowrap;
    }

    .hero-image {
        justify-content: center;
        width: 100%;
    }

    .hero-image img {
        max-width: 20rem;
    }

    /* About */

    .about-container {
        text-align: left;
    }

    .about-left {
        width: 100%;
        align-items: center;
        margin-top: var(--spacing-md);
    }

    .about-left .buttons-container {
        flex-direction: column;
        width: 100%;
    }

    .about-left .botao,
    .about-left .botao-outline {
        width: 100%;
        text-align: center;
    }

    .about-image {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: var(--spacing-md);
    }

    .about-image img {
        max-width: 13rem;
    }

    .about-content {
        width: 100%;
    }

    .about-buttons-data {
        flex-direction: column;
        gap: var(--spacing-md);
        align-items: stretch;
    }

    .about-buttons-data .botao,
    .about-buttons-data .botao-outline {
        width: 100%;
        padding: 0.75rem var(--spacing-lg);
        font-size: var(--text-base);
        text-align: center;
    }

    .data-container {
        justify-content: center;
        width: 100%;
    }

    .data-number {
        font-size: var(--text-lg);
    }

    .data-label {
        font-size: var(--text-sm);
    }

    /* Terminal const profile */

    .code-container {
        max-width: 100%;
        width: 100%;
        margin: 0;
    }

    .code-container pre {
        font-size: 0.80rem;
        line-height: 1.3rem;
        white-space: pre-wrap;
        overflow-wrap: break-word;
        overflow-x: hidden;
        padding: 0.5rem 0.75rem;
    }

    .code-header {
        height: 1.2rem;
        padding-left: 0.5rem;
    }

    .dot {
        width: 0.4rem;
        height: 0.4rem;
    }

    /* Projects */

    .projects-container {
        margin: var(--spacing-lg) auto 0;
    }

    .projects-swiper {
        position: relative;
        margin: 0;
        padding-bottom: 3.5rem;
        overflow: visible;
    }

    .project-card {
        width: 100%;
        height: auto;
        min-height: 24rem;
        max-width: 20rem;
    }

    .project-image {
        height: 10rem;
    }

    .project-content {
        padding: var(--spacing-sm);
    }

    .project-content h3 {
        font-size: 1.25rem;
    }

    .project-content p {
        font-size: 1rem;
    }

    .tag {
        padding: 0.15rem 0.4rem;
        font-size: 0.7rem;
        font-weight: 400;        
    }

    /* Contatos */
    .contact-container {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        width: 100%;
        margin: 0 auto;
    }

    .contact-info {
        width: 100%;
    }

    .contact-info p {
        margin-bottom: var(--spacing-md);
    }

    .social-container {
        flex-wrap: wrap;
        gap: var(--spacing-lg);
        margin-bottom: var(--spacing-xs);
    }

    .social-icon {
        width: 4rem;
        height: 4rem;
    }

    /* Formulário */
    form {
        gap: var(--spacing-xs);
        width: 100%;
    }

    form label {
        font-size: 0.90rem;
    }

    form input,
    form textarea {
        padding: 0.75rem;
        font-size: var(--text-base);
    }

    form button {
        padding: 0.75rem var(--spacing-md);
        font-size: var(--text-base);
    }

    /* Footer */
    footer {
        padding: var(--spacing-md) var(--spacing-sm);
        font-size: var(--text-sm);
    }

    /* Success Page */
    .success-container {
        padding: var(--spacing-lg) var(--spacing-sm);
        min-height: calc(100vh - 8rem);
    }

    .success-container h1 {
        font-size: var(--text-xl);
    }

    .success-container p {
        font-size: var(--text-base);
    }

    .success-content {
        gap: var(--spacing-md);
        max-width: 100%;
        padding: 0 var(--spacing-sm);
    }

    .success-image {
        width: 5rem;
        height: 5rem;
    }

    .success-content .botao {
        width: 100%;
        max-width: 20rem;
        padding: 0.75rem var(--spacing-lg);
    }

}