/* =========================================================
   CONECTA JOVEM — PERFIL
   Visual baseado no Dashboard
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

:root{
    --primary:#6C5CE7;
    --primary-dark:#5643D9;
    --secondary:#14B8A6;
    --blue:#3B82F6;
    --dark:#0F172A;
    --text:#334155;
    --gray:#64748B;
    --light:#F8FAFC;
    --white:#FFFFFF;
    --border:#E2E8F0;
    --success:#16A34A;
    --danger:#DC2626;

    --shadow:0 15px 40px rgba(15,23,42,.08);
    --shadow-hover:0 20px 40px rgba(15,23,42,.12);

    --radius:20px;
    --transition:.3s ease;
}

/* =========================================================
   RESET
   ========================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    min-height:100vh;
    font-family:'Inter',Arial,sans-serif;
    background:var(--light);
    color:var(--text);
    line-height:1.6;
    overflow-x:hidden;
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
    color:inherit;
}

button,
input,
select,
textarea{
    font:inherit;
}

button{
    border:0;
}

/* =========================================================
   TOPO
   ========================================================= */

.topo{
    width:100%;
    min-height:78px;

    padding:0 clamp(18px,5vw,72px);

    display:flex;
    align-items:center;
    justify-content:space-between;

    background:rgba(255,255,255,.96);

    border-bottom:1px solid var(--border);

    backdrop-filter:blur(12px);

    position:sticky;
    top:0;
    z-index:100;

    box-shadow:0 4px 18px rgba(15,23,42,.04);
}

/* =========================================================
   LOGO
   ========================================================= */

.logo{
    display:flex;
    align-items:center;
}

.logo img{
    width:155px;
    max-height:50px;
    object-fit:contain;
}

/* =========================================================
   BOTÃO VOLTAR
   ========================================================= */

.voltar{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:9px;

    padding:10px 15px;

    border-radius:11px;

    color:var(--primary);

    font-size:.9rem;
    font-weight:700;

    transition:var(--transition);
}

.voltar:hover{
    background:#F3F0FF;
    color:var(--primary-dark);
    transform:translateX(-2px);
}

/* =========================================================
   CONTAINER PRINCIPAL
   ========================================================= */

.perfil-container{
    width:min(1120px,94%);

    margin:40px auto 70px;
}

/* =========================================================
   MENSAGENS
   ========================================================= */

.mensagem{
    display:none;

    margin-bottom:18px;

    padding:14px 17px;

    border-radius:13px;

    font-size:.9rem;
    font-weight:600;
}

.mensagem.erro{
    display:block;

    background:#FEF2F2;
    color:#991B1B;

    border:1px solid #FECACA;
}

.mensagem.sucesso{
    display:block;

    background:#F0FDF4;
    color:#166534;

    border:1px solid #BBF7D0;
}

/* =========================================================
   CARD PRINCIPAL DO PERFIL
   ========================================================= */

.perfil-card{
    position:relative;
    overflow:hidden;

    padding:34px;

    text-align:center;

    background:var(--white);

    border:1px solid var(--border);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    transition:var(--transition);
}

.perfil-card:hover{
    box-shadow:var(--shadow-hover);
}

/* Barra superior roxa */

.perfil-card::before{
    content:"";

    position:absolute;

    top:0;
    left:0;
    right:0;

    height:6px;

    background:linear-gradient(
        90deg,
        var(--primary),
        var(--primary-dark),
        var(--secondary)
    );
}

/* =========================================================
   FOTO DE PERFIL
   ========================================================= */

.foto{
    width:142px;
    height:142px;

    padding:5px;

    margin:5px auto 18px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

    box-shadow:
        0 10px 25px rgba(108,92,231,.22);
}

.foto img{
    width:100%;
    height:100%;

    border-radius:50%;

    object-fit:cover;

    background:#E2E8F0;

    border:5px solid var(--white);
}

/* =========================================================
   NOME E DESCRIÇÃO
   ========================================================= */

.perfil-card h1{
    color:var(--dark);

    font-size:clamp(1.65rem,4vw,2.25rem);

    line-height:1.2;

    font-weight:800;
}

.perfil-card > p{
    max-width:700px;

    margin:8px auto 24px;

    color:var(--gray);

    overflow-wrap:anywhere;
}

/* =========================================================
   AÇÕES DO PERFIL
   ========================================================= */

.acoes-perfil{
    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    flex-wrap:wrap;
}

/* Botões */

.editar,
.sair,
.upload,
.ver-curriculo{
    min-height:44px;

    display:inline-flex;

    align-items:center;
    justify-content:center;

    gap:9px;

    padding:11px 18px;

    border-radius:11px;

    font-size:.88rem;

    font-weight:700;

    cursor:pointer;

    transition:var(--transition);
}

/* Editar */

.editar{
    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

    color:#fff;

    border:1px solid var(--primary);
}

.editar:hover{
    transform:translateY(-2px);

    box-shadow:
        0 8px 18px rgba(108,92,231,.25);
}

/* Upload */

.upload{
    background:#F3F0FF;

    color:var(--primary);

    border:1px solid #DDD6FE;
}

.upload:hover{
    background:var(--primary);

    color:#fff;

    transform:translateY(-2px);
}

/* Sair */

.sair{
    background:#fff;

    color:var(--danger);

    border:1px solid #FECACA;
}

.sair:hover{
    background:#DC2626;

    color:#fff;

    transform:translateY(-2px);
}

/* =========================================================
   INFORMAÇÕES
   ========================================================= */

.informacoes{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:20px;

    margin-top:24px;
}

/* =========================================================
   BLOCOS
   ========================================================= */

.bloco{
    min-width:0;

    padding:25px;

    background:var(--white);

    border:1px solid var(--border);

    border-radius:18px;

    box-shadow:
        0 8px 25px rgba(15,23,42,.05);

    transition:var(--transition);
}

.bloco:hover{
    transform:translateY(-2px);

    box-shadow:
        0 15px 30px rgba(15,23,42,.08);
}

/* Blocos que ocupam toda a largura */

.bloco:has(.tags),
.bloco:has(.redes-sociais),
.bloco:last-child{
    grid-column:1/-1;
}

/* =========================================================
   TÍTULOS DOS BLOCOS
   ========================================================= */

.bloco h2{
    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:18px;

    color:var(--dark);

    font-size:1.15rem;

    font-weight:800;
}

.bloco h2 i{
    width:34px;
    height:34px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:10px;

    background:#F3F0FF;

    color:var(--primary);

    font-size:15px;
}

/* =========================================================
   DADOS
   ========================================================= */

.dados{
    display:grid;

    gap:0;
}

.dados p{
    display:flex;

    align-items:flex-start;

    gap:12px;

    padding:13px 0;

    border-bottom:1px solid #F1F5F9;
}

.dados p:last-child{
    border-bottom:0;
}

.dados strong{
    min-width:92px;

    color:var(--dark);

    font-size:.88rem;
}

.dados span{
    min-width:0;

    color:var(--gray);

    font-size:.88rem;

    overflow-wrap:anywhere;
}

/* =========================================================
   CAMPOS
   ========================================================= */

.campo{
    padding:14px 0;

    border-bottom:1px solid #EEF2F7;
}

.campo:first-of-type{
    padding-top:0;
}

.campo:last-of-type{
    padding-bottom:0;

    border-bottom:0;
}

.campo h3{
    margin-bottom:5px;

    color:var(--dark);

    font-size:.88rem;

    font-weight:700;
}

.campo p,
.bloco>p{
    color:var(--gray);

    font-size:.88rem;

    white-space:pre-line;

    overflow-wrap:anywhere;
}

/* =========================================================
   DETALHES
   ========================================================= */

.detalhe{
    margin-top:12px;

    color:var(--gray);

    font-size:.88rem;

    white-space:pre-line;
}

/* =========================================================
   HABILIDADES
   ========================================================= */

.tags{
    display:flex;

    flex-wrap:wrap;

    gap:9px;
}

.tag-habilidade{
    padding:7px 12px;

    border-radius:30px;

    background:#EEF2FF;

    color:var(--primary);

    border:1px solid #DDD6FE;

    font-size:.82rem;

    font-weight:700;

    transition:var(--transition);
}

.tag-habilidade:hover{
    background:var(--primary);

    color:#fff;

    transform:translateY(-2px);
}

/* =========================================================
   SEM DADOS
   ========================================================= */

.sem-dados{
    color:#94A3B8;

    font-size:.88rem;

    font-style:italic;
}

/* =========================================================
   REDES SOCIAIS
   ========================================================= */

.redes-sociais{
    display:flex;

    flex-wrap:wrap;

    gap:10px;
}

.redes-sociais a{
    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 14px;

    border:1px solid var(--border);

    border-radius:11px;

    background:#fff;

    color:var(--gray);

    font-size:.85rem;

    font-weight:600;

    transition:var(--transition);
}

.redes-sociais a:hover{
    border-color:#C4B5FD;

    background:#F3F0FF;

    color:var(--primary);

    transform:translateY(-2px);
}

/* =========================================================
   CURRÍCULO
   ========================================================= */

.acoes-curriculo{
    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-top:20px;
}

.ver-curriculo{
    background:#fff;

    color:var(--primary);

    border:1px solid #C4B5FD;
}

.ver-curriculo:hover{
    background:var(--primary);

    color:#fff;

    transform:translateY(-2px);

    box-shadow:
        0 8px 18px rgba(108,92,231,.18);
}

/* =========================================================
   RESPONSIVIDADE — TABLET
   ========================================================= */

@media(max-width:900px){

    .perfil-container{
        width:min(94%,760px);
    }

    .informacoes{
        grid-template-columns:1fr;
    }

    .bloco:has(.tags),
    .bloco:has(.redes-sociais),
    .bloco:last-child{
        grid-column:auto;
    }

}

/* =========================================================
   RESPONSIVIDADE — CELULAR
   ========================================================= */

@media(max-width:700px){

    .topo{
        min-height:68px;

        padding:
            0 14px;
    }

    .logo img{
        width:135px;
    }

    .perfil-container{
        width:100%;

        padding:0 12px;

        margin:22px auto 40px;
    }

    .perfil-card{
        padding:28px 18px;

        border-radius:18px;
    }

    .foto{
        width:118px;
        height:118px;

        margin-bottom:15px;
    }

    .perfil-card h1{
        font-size:1.6rem;
    }

    .perfil-card > p{
        font-size:.88rem;
    }

    .acoes-perfil{
        flex-direction:column;

        width:100%;
    }

    .editar,
    .sair,
    .upload,
    .ver-curriculo{
        width:100%;
    }

    .informacoes{
        gap:14px;

        margin-top:14px;
    }

    .bloco{
        padding:20px;

        border-radius:16px;
    }

    .dados p{
        flex-direction:column;

        gap:2px;
    }

    .dados strong{
        min-width:0;
    }

    .redes-sociais{
        flex-direction:column;
    }

    .redes-sociais a{
        width:100%;

        justify-content:center;
    }

    .acoes-curriculo{
        flex-direction:column;
    }

    .acoes-curriculo .ver-curriculo{
        width:100%;
    }

    .voltar{
        padding:9px;
    }

    .voltar span{
        display:none;
    }

}

/* =========================================================
   CELULARES PEQUENOS
   ========================================================= */

@media(max-width:480px){

    .topo{
        padding:0 12px;
    }

    .logo img{
        width:125px;
    }

    .perfil-card{
        padding:24px 15px;
    }

    .foto{
        width:105px;
        height:105px;
    }

    .perfil-card h1{
        font-size:1.4rem;
    }

    .bloco{
        padding:17px;
    }

    .bloco h2{
        font-size:1.05rem;
    }

    .tag-habilidade{
        font-size:.78rem;
    }

}