/* =========================================================
   ÍNDICE
   1. Variáveis (cores)
   2. Base (body, títulos, textos)
   3. Topo (.comeco)
   4. Navegação
   5. Apresentação (título grande)
   6. Círculos girando
   7. Fita (texto andando)
   8. Sobre mim
   9. Habilidades (título + cards)
   10. Projetos
   11. Contato (formulário)
   12. Rodapé
   13. Cursor
   14. Responsivo (tablet e celular)
   ========================================================= */


/* =========================================================
   1. VARIÁVEIS (CORES)
   ========================================================= */
:root {
    ---branco: #fff4fb;
    ---roxo: #0b011f;
    ---ciano: #85ddf4;
    ---rosa: #fc7aae;
}


/* =========================================================
   2. BASE
   ========================================================= */

/* scroll suave ao clicar nos links da nav */
html {
    scroll-behavior: smooth;
}

/* cor do texto quando é selecionado com o mouse */
::selection {
    background-color: var(---ciano);
    color: var(---roxo);
}

body {
    margin: 0;
    background-color: var(---branco);
    color: var(---roxo);
    font-family: Arial, Helvetica, sans-serif;
}

h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 40px;
    margin: 5px 0;
}

h2 {
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-weight: 500;
    font-size: 40px;
    margin: 5px 0;
}

h3 {
    font-weight: 600;
    font-size: 15px;
    text-transform: uppercase;
}

p {
    color: var(---roxo);
}

/* nenhuma imagem passa da largura do espaço dela */
img {
    max-width: 100%;
}

hr {
    background-color: #0b011f79;
    border: none;
    height: 1px;
}

/* espaçamento padrão de todas as seções */
section {
    padding: 90px;
}

/* etiqueta */
.nome-secao, #sobre, #numero, #ano {
    margin: 0 0 50px 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}



/* =========================================================
   3. TOPO
   ========================================================= */
.comeco {
    background-image: url(img/cloud1.png);
    background-size: cover;
    height: 93vh;
    margin: 0;
    padding: 0;
    position: relative;   /* referência para posicionar os círculos */
    overflow: hidden;     /* esconde a parte dos círculos que sai da tela */
}
.comeco hr {
    background-color: #fff4fb94;
}

/* nav e título ficam na frente dos círculos */
.comeco > nav,
.comeco > hr,
.comeco > .apresentacao {
    position: relative;
    z-index: 1;
}


/* =========================================================
   4. NAVEGAÇÃO
   ========================================================= */
nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-top: 10px;
    font-size: 14px;
    font-weight: 450;
    letter-spacing: 2px;
}

/* logo */
nav h2 {
    color: var(---rosa);
    letter-spacing: -1px;
    font-size: 25px;
}

/* lista de links */
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-evenly;
    width: auto;
}

nav ul li {
    display: block;
    text-align: center;
    padding: 10px 14px;
    text-decoration: none;
}

nav a {
    text-decoration: none;
}

nav a:hover {
    color: var(---rosa);
}


/* =========================================================
   5. APRESENTAÇÃO
   clamp(mínimo, ideal, máximo): o tamanho acompanha a largura da tela
   ========================================================= */
.apresentacao h1 {
    font-size: clamp(52px, 10vw, 130px);
    margin: 100px 0 0 0;
    letter-spacing: -0.05em;
}

/* "CRIATIVIDADE." ocupa ~8.5x o tamanho da letra:
   (largura da tela - espaços laterais) / 8.5 = maior tamanho que cabe */
.apresentacao h2 {
    font-size: min(130px, calc((100vw - 380px) / 8.5));
    margin: 0 90px;
    font-style: italic;
    color: var(---rosa);
}


/* =========================================================
   6. CÍRCULOS GIRANDO
   ========================================================= */

/* círculo grande (parado) no canto superior direito */
.circulo {
    position: absolute;
    top: -150px;
    right: -150px;
    width: 500px;
    height: 500px;
    border: 1px solid var(---branco);
    border-radius: 50%;
    pointer-events: none;   /* não atrapalha cliques */
}

/* círculo pequeno (gira) dentro do grande */
.circulo2 {
    position: absolute;
    bottom: 60px;
    left: 60px;
    width: 200px;
    height: 200px;
    border: 1px solid var(---branco);
    border-radius: 50%;
    animation: girar 15s linear infinite;
}

/* bolinha na borda: é ela que mostra o giro */
.circulo2::before {
    content: "";
    position: absolute;
    top: 22px;
    left: 22px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(---rosa);
}

@keyframes girar {
    to { transform: rotate(360deg); }
}


/* =========================================================
   7. FITA
   o texto está duplicado no HTML: o trilho anda até -50%
   e recomeça, sem "pulo" visível
   ========================================================= */
.fita {
    overflow: hidden;
    white-space: nowrap;
    border: 1px solid var(---roxo);
    background-color: var(---rosa);
}

.fita-trilho {
    display: flex;
    width: max-content;
    animation: fita-andando 30s linear infinite;
}

.fita-trilho p {
    margin: 0 2px 0 0;
    padding: 12px 0;
    padding-right: 0.1em;
    letter-spacing: 3px;
    font-size: 14px;
}

@keyframes fita-andando {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}


/* =========================================================
   8. SOBRE MIM
   ========================================================= */
.sobre-mim h1 {
    font-size: 20px;
}

.sobre-mim h2 {
    font-size: 50px;
    font-style: italic;
}

/* texto à esquerda, foto à direita */
.colunas2 {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.colunas2 .side {
    flex: 1;
    min-width: 0;
}

/* botões GitHub / LinkedIn / Currículo */
.sobre-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
}

.sobre-links a {
    padding: 10px 18px;
    border: 1px solid var(---roxo);
    border-radius: 999px;
    color: var(---roxo);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.sobre-links a:hover {
    background-color: var(---roxo);
    color: var(---branco);
}

.colunas2 img {
    border: 1px solid var(---roxo);
    background-color: var(---ciano);
    margin: -70px 0 0 90px;
    width: 400px;
    max-width: 100%;
    height: auto;
}


/* =========================================================
   9. HABILIDADES
   ========================================================= */
.habilidades {
    background-image: url(img/halftone_cloud.png);
    background-size: cover;
    margin: 0;
    border: 1px solid var(---roxo);
}

/* --- título + texto ao lado --- */
.titulo-skills {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    margin-bottom: 70px;
}

.titulo-skills h1 {
    font-size: clamp(40px, 6vw, 90px);
    line-height: 0.95;
    letter-spacing: -4px;
}

.titulo-skills p {
    flex: 0 1 370px;   /* até 370px, mas pode encolher */
    font-family: Georgia, 'Times New Roman', Times, serif;
    max-width: 370px;
    line-height: 1.6;
}

/* --- grid de 12 colunas: cada card ocupa uma largura diferente --- */
.cards {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
}

.card:nth-child(1) { grid-column: span 4; }
.card:nth-child(2) { grid-column: span 5; }
.card:nth-child(3) { grid-column: span 3; }
.card:nth-child(4) { grid-column: span 3; }
.card:nth-child(5) { grid-column: span 5; }
.card:nth-child(6) { grid-column: span 4; }

/* --- card --- */
.card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;   /* número em cima, título embaixo */
    min-height: 225px;
    padding: 28px;
    border: 1px solid var(---roxo);
    background-color: var(---branco);
    color: var(---roxo);
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

/* número + sinal de "+" */
.card-topo {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    font-size: 12px;
    letter-spacing: 2px;
}

.card-mais {
    font-size: 40px;
    font-weight: 300;
    line-height: 0.6;
    transition: transform 0.3s ease;
}

.card h3 {
    font-size: clamp(22px, 2.2vw, 30px);
    text-transform: none;
    letter-spacing: -1px;
    line-height: 1.1;
    margin: 0 0 10px 0;
}

.card p {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: inherit;
    opacity: 0.75;
}

/* --- cores de destaque --- */
.card-rosa  { background-color: var(---rosa); }
.card-ciano { background-color: var(---ciano); }
.card-roxo  { background-color: var(---roxo); color: var(---branco); }

/* --- hover: o card sobe, ganha sombra e o + vira x --- */
.card:hover {
    transform: translateY(-8px);
    box-shadow: 6px 6px 0 var(---roxo);
}

.card:hover .card-mais {
    transform: rotate(45deg);
}

/* cards claros ficam roxos no hover */
.card:not(.card-rosa):not(.card-ciano):not(.card-roxo):hover {
    background-color: var(---roxo);
    color: var(---branco);
}

.card-roxo:hover {
    box-shadow: 6px 6px 0 var(---rosa);
}

/* =========================================================
   10. PROJETOS
   ========================================================= */
/* linha em cima da lista (a de baixo de cada projeto vem do .projeto) */
.projetos-lista {
    border-top: 1px solid var(---roxo);
}

/* cada projeto: número | imagem | informações */
.projeto {
    display: grid;
    /* imagem com 35% da largura (em vez de 400px fixos) para sobrar espaço ao texto */
    grid-template-columns: 60px 35% minmax(0, 1fr);
    gap: 40px;
    padding: 40px 0;
    border-bottom: 1px solid var(---roxo);
    color: var(---roxo);
    text-decoration: none;
}

.projeto-numero {
    font-size: 12px;
    letter-spacing: 2px;
}

/* --- imagem --- */
.projeto-img {
    width: 90%;
    object-fit: cover;   /* preenche o espaço sem distorcer */
    border: 1px solid var(---roxo);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* --- informações --- */
.projeto-info {
    display: flex;
    flex-direction: column;
}

/* categoria à esquerda, ano à direita */
.projeto-meta {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.projeto h2 {
    margin: auto 0 16px;   /* auto em cima empurra título e texto para baixo */
    padding-top: 40px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: clamp(32px, 4vw, 64px);
    letter-spacing: -0.04em;
    line-height: 1;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
}

.tags span {
    padding: 6px 10px;
    font-size: 11px;
    letter-spacing: 1px;
    background-color: var(---ciano);
    border: 1px solid var(---roxo);
}

/* descrição à esquerda, seta à direita */
.projeto-rodape {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 30px;
}

.projeto-rodape p {
    font-family: Georgia, 'Times New Roman', Times, serif;
    margin: 0;
    max-width: 520px;
    line-height: 1.6;
}

.projeto-seta {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: 1px solid var(---roxo);
    border-radius: 50%;
    font-size: 20px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* --- hover: imagem igual aos cards e seta ganha fundo --- */
.projeto:hover .projeto-img {
    transform: translateY(-8px);
    box-shadow: 6px 6px 0 var(---rosa);
}

.projeto:hover .projeto-seta {
    background-color: var(---roxo);
    color: var(---branco);
}

/* =========================================================
   11. CONTATO
   ========================================================= */
.contato {
    background-color: var(---ciano);
    padding-bottom: 40px;
}

/* título à esquerda, formulário à direita */
.contato-conteudo {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px;
    margin-bottom: 90px;
}

.contato-titulo h1 {
    font-size: clamp(44px, 7vw, 90px);
    line-height: 0.95;
    letter-spacing: -0.05em;
}

.contato-titulo h2 {
    font-size: clamp(40px, 7vw, 90px);
    line-height: 1;
    font-style: italic;
    letter-spacing: -0.04em;
}

/* --- formulário --- */
.form-contato {
    display: flex;
    flex-direction: column;
    gap: 22px;
    width: 100%;
    max-width: 420px;
}

.form-contato label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* campos só com a linha de baixo */
.form-contato input,
.form-contato textarea {
    padding: 10px 0;
    border: none;
    border-bottom: 1px solid var(---roxo);
    background: transparent;
    color: var(---roxo);
    font-family: inherit;
    font-size: 16px;
    resize: vertical;
}

.form-contato input:focus,
.form-contato textarea:focus {
    outline: none;
    border-bottom-width: 2px;
}

/* campo anti-spam: robôs preenchem, pessoas não veem */
.form-contato .form-escondido {
    display: none;
}

/* botão redondo */
.form-contato button {
    align-self: flex-end;
    width: 100px;
    height: 100px;
    border: 1px solid var(---roxo);
    border-radius: 50%;
    background-color: var(---roxo);
    color: var(---branco);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.form-contato button:hover {
    background-color: var(---rosa);
    color: var(---roxo);
    transform: scale(1.05);
}

/* mensagem e botão lado a lado */
#side {
    display: flex;
    align-items: flex-end;   /* botão alinhado com a base do campo */
    gap: 20px;
}

/* o campo de mensagem ocupa todo o espaço que sobra */
#side label {
    flex: 1;
}

/* =========================================================
   12. RODAPÉ
   ========================================================= */
.rodape {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    padding-top: 30px;
    border-top: 1px solid var(---roxo);
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.rodape a {
    color: var(---roxo);
    text-decoration: none;
    overflow-wrap: anywhere;   /* o e-mail quebra linha em telas bem pequenas */
}

.rodape a:hover {
    color: var(---rosa);
    font-weight: 700;
}

.rodape-links {
    display: flex;
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.rodape p {
    margin: 0;
}

/* =========================================================
   13. CURSOR (círculo que segue o mouse — ver script.js)
   ========================================================= */
.cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 35px;
    height: 35px;
    margin: -15px 0 0 -15px;   /* metade do tamanho: centraliza na ponta do mouse */
    border: 1px solid var(---branco);
    border-radius: 50%;
    pointer-events: none;      /* não atrapalha cliques */
    z-index: 9999;
    opacity: 0;
    transition: width 0.3s ease, height 0.3s ease, margin 0.3s ease,
                background-color 0.3s ease, opacity 0.3s ease;
}

/* aparece quando o mouse se mexe */
.cursor-visivel {
    opacity: 1;
}

/* em cima de links, botões e cards: cresce e ganha fundo rosa transparente */
.cursor-grande {
    width: 70px;
    height: 70px;
    margin: -35px 0 0 -35px;
    background-color: color-mix(in srgb, var(---rosa) 40%, transparent);
}

/* =========================================================
   14. RESPONSIVO
   ========================================================= */

/* ---------- TABLET (até 1024px) ---------- */
@media (max-width: 1024px) {
    /* base */
    section { padding: 70px 40px; }

    /* topo */
    .comeco { padding: 0; }
    .apresentacao { padding: 0 40px; }
    .apresentacao h2 {
        margin: 0 0 0 40px;
        font-size: calc((100vw - 120px) / 8.5);
    }

    /* sobre mim */
    .colunas2 img { margin: 0 0 0 40px; width: 320px; }

    /* títulos de habilidades e projetos: texto embaixo do título */
    .titulo-skills {
        flex-direction: column;
        gap: 16px;
        margin-bottom: 50px;
    }

    .titulo-skills h1 { font-size: 64px; }
    .titulo-skills p { flex: none; max-width: 520px; }

    /* habilidades: 2 cards por linha */
    .card:nth-child(n) { grid-column: span 6; }
    .card h3 { font-size: 26px; }

    /* projetos: imagem menor */
    .projeto {
        grid-template-columns: 40px 280px minmax(0, 1fr);
        gap: 24px;
    }

    /* contato: título em cima, formulário embaixo */
    .contato-conteudo {
        flex-direction: column;
        gap: 40px;
        margin-bottom: 60px;
    }

    .form-contato { max-width: 560px; }
}

/* ---------- CELULAR (até 768px) ---------- */
@media (max-width: 768px) {
    /* base */
    section { padding: 60px 20px; }
    .nome-secao { margin-bottom: 30px; }

    /* nav: logo e contato em cima, links embaixo */
    nav {
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 10px 20px 0;
        letter-spacing: 1px;
        font-size: 12px;
    }

    nav ul {
        order: 3;
        width: 100%;
        justify-content: space-between;
    }

    nav ul li { padding: 10px 0; }

    /* topo */
    .comeco {
        height: auto;
        min-height: 520px;
        padding: 0 0 60px;
    }

    .apresentacao { padding: 0 20px; }
    .apresentacao h1 { margin-top: 150px; }
    .apresentacao h2 {
        margin: 0 0 0 20px;
        font-size: calc((100vw - 60px) / 8.5);
    }

    /* círculos menores */
    .circulo {
        width: 300px;
        height: 300px;
        top: -90px;
        right: -110px;
    }

    .circulo2 {
        width: 120px;
        height: 120px;
        bottom: 35px;
        left: 35px;
    }

    .circulo2::before {
        top: 12px;
        left: 12px;
        width: 10px;
        height: 10px;
    }

    /* sobre mim: texto em cima, foto embaixo */
    .colunas2 {
        flex-direction: column;
        align-items: stretch;
        gap: 30px;
    }

    .sobre-mim h2 { font-size: 36px; }

    .colunas2 img {
        margin: 0;
        width: 100%;
        max-width: 400px;
        align-self: center;
    }

    /* habilidades: 1 card por linha */
    .titulo-skills { margin-bottom: 40px; }

    /* "SELECIONADOS." precisa caber em telas de 320px */
    .titulo-skills h1 {
        font-size: min(48px, calc((100vw - 40px) / 8.5));
        letter-spacing: -2px;
    }

    .card:nth-child(n) { grid-column: span 12; }

    .card {
        min-height: 110px;
        padding: 22px;
    }

    .card h3 { font-size: 26px; }

    /* projetos: número, imagem e texto um embaixo do outro */
    .projeto {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 30px 0;
    }

    .projeto-img { width: 100%; }

    .projeto h2 { padding-top: 10px; }

    .projeto-seta {
        width: 46px;
        height: 46px;
    }

    /* contato: formulário na largura toda */
    .form-contato { max-width: none; }

    .form-contato button {
        width: 90px;
        height: 90px;
    }

    /* rodapé: um item embaixo do outro */
    .rodape {
        flex-direction: column;
        align-items: flex-start;
    }

    .rodape-links { gap: 20px; }
}

/* ---------- TELAS DE TOQUE ---------- */
/* sem mouse, o hover não fica "preso" depois do toque */
@media (hover: none) {
    .card:hover { transform: none; box-shadow: none; }
    .projeto:hover .projeto-img { transform: none; box-shadow: none; }
}