/* --------- GERAL --------- */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 20px;
    background: linear-gradient(to right, #001f3f, #003566, #003566, #001f3f);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    min-height: 100vh;
    gap: 30px;
}


.header-profile {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 900px;
    padding: 30px;
    text-align: center;
    color: #ffffff;
}

.profile-photo {
    width: 150px;
    height: 150px;
    border-radius: 8%;
    object-fit: cover;
    border: 3px solid #a8cde6;
    margin-bottom: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.header-profile h1 {
    font-size: 2.5em;
    color: #e6f2ff;
    margin-bottom: 5px;
}

.title-role {
    font-size: 1.3em;
    color: #cce0ff;
    margin-bottom: 15px;
}

.contact-info {
    font-size: 1em;
    color: #b3d9ff;
    margin-bottom: 20px;
    line-height: 1.5;
}

/* --------- LINKS SOCIAIS --------- */
.social-links {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.social-links a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    font-size: 1em;
    transition: color 0.3s ease;
}

.social-links a:hover {
    color: #e0f2ff;
    text-decoration: underline;
}

.social-links img {
    width: 20px;
    height: 20px;
}

/* --------- BOTÃO DE CV (opcional) --------- */
.cv-button {
    display: inline-block;
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    margin-top: 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.cv-button:hover {
    background-color: #0056b3;
}

/* --------- DESCRIÇÃO PESSOAL (opcional) --------- */
.personal-description {
    font-size: 1.1em;
    color: #b3d9ff;
    margin-top: 20px;
    line-height: 1.6;
}

/* --------- CONTAINER GERAL --------- */
.container {
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    width: 90%;
    max-width: 900px;
    overflow: hidden;
    color: #333;
    margin: 0 auto; /* CENTRALIZA */
}


/* --------- ACORDEÃO (SEÇÕES) --------- */
.accordion-item {
    border-bottom: 1px solid #e0e0e0;
}

.accordion-item:last-child {
    border-bottom: none;
}

.accordion-button {
    background-color: #fdfdfd;
    color: #000152;
    cursor: pointer;
    padding: 15px 25px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 1.1em;
    font-weight: 500;
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.accordion-button:hover {
    background-color: #f7f7f7;
    color: #007bff;
}

.accordion-button::after {
    content: '\002B';
    font-size: 1.5em;
    color: #000152;
    transition: transform 0.3s ease;
}

.accordion-button.active::after {
    content: '\2212';
    transform: rotate(0deg);
}

.accordion-content {
    padding: 0 25px;
    background-color: white;
    max-height: 0; /* Começa fechado */
    overflow: hidden;
    transition: max-height 0.3s ease-out; /* Transição suave para abrir/fechar */
}

.accordion-content.active {
    max-height: 800px; /* Um valor grande o suficiente para o conteúdo. Ajuste conforme necessário. */
    padding-top: 20px; /* Adiciona padding quando aberto */
    padding-bottom: 20px; /* Adiciona padding quando aberto */
}

.accordion-content h2 {
    color: #0056b3;
    margin-top: 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

/* --------- FORMAÇÃO ACADÊMICA --------- */
.mfa {
    color: #001f3f;
}

.mfa h3 {
    margin-top: 0;
    margin-bottom: 5px;
    color: #003566;
}

.mfa h4 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #005792;
    display: flex;
    align-items: center;
    gap: 10px;
}

.mfa2 img {
    width: 50px;
    height: auto;
    display: block;
}

.mfa ul {
    list-style-type: none;
    padding: 0;
}

.mfa li {
    background-color: #f9f9f9;
    margin-bottom: 8px;
    padding: 10px 15px;
    border-radius: 5px;
    border: 1px solid #eee;
}

/* --------- SKILLS --------- */
.skills-grid {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    justify-content: center;
}

.soft-skills,
.hard-skills {
    flex: 1; /* Faz com que as colunas ocupem o espaço disponível igualmente */
    min-width: 280px; /* Garante que não fiquem muito estreitas */
    background-color: #f0f8ff; /* Fundo mais claro para as caixas de skill */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    color: #001f3f; /* Cor do texto dentro das caixas */
}

.soft-skills h3,
.hard-skills h3 {
    color: #0056b3;
    margin-top: 0;
    margin-bottom: 15px;
    text-align: center;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 10px;
}

.soft-skills ul {
    list-style-type: disc; /* Bolinhas para soft skills */
    padding-left: 20px;
}

.soft-skills li {
    margin-bottom: 8px;
    font-size: 1.05em;
}

/* Removido ul/li direto de .hard-skills, agora usamos .hard-skills-grid */
.hard-skills {
    flex: 1;
    min-width: 280px;
    background-color: #f0f8ff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    color: #001f3f;
}

/* NOVO: Estilos para o grid de Hard Skills */
.hard-skills-grid {
    display: flex;
    flex-wrap: wrap; /* Permite que os itens quebrem para a próxima linha */
    justify-content: center; /* Centraliza os itens horizontalmente */
    gap: 15px; /* Espaço entre os itens (horizontal e vertical) */
    padding: 10px; /* Opcional: Adiciona um pouco de padding interno */
}


.skill-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 5px; /* Reduza o padding se quiser mais próximos */
    border-radius: 5px;
    transition: transform 0.2s ease;
    width: 80px; /* Exemplo: se 3 itens por linha, 100% / 3 = 33.33%, mas com gap precisa de ajuste */
    flex-shrink: 0; /* Impede que os itens encolham */
}

.skill-item:hover {
    transform: translateY(-4px);
}

.skill-item img {
    width: 40px; /* Reduz o tamanho do ícone */
    height: 40px; /* Garante que a altura seja a mesma que a largura para ícones quadrados */
    object-fit: contain;
    margin-bottom: 5px; /* Reduz o espaçamento abaixo do ícone */
}

.skill-item p {
    font-size: 0.85em; /* Reduz a fonte do texto do skill-item */
    margin-top: 0;
}

/* --------- EXPERIÊNCIAS --------- */
.experience-item p {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.experience-item p img {
    width: 50px;
    height: auto;
    margin-right: 5px;
    vertical-align: middle;
}

ul, li {
    text-align: left;
}



/* --------- CERTIFICAÇÕES --------- */
.certification-item {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #e0e0e0; /* Linha tracejada para separar, similar ao experience-item */
}

.certification-item:last-child {
    border-bottom: none; /* Remove a borda do último item */
}

.certification-item h3 {
    margin-top: 0;
    margin-bottom: 5px;
    color: #003566; /* Cor similar aos títulos de experiência */
}

.certification-item p {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    color: #555; /* Cor de texto para detalhes */
}

.certification-item p img {
    width: 30px; /* Tamanho do logo da instituição */
    height: auto;
    margin-right: 10px;
    vertical-align: middle;
}

.credential-link {
    display: inline-block;
    background-color: #007bff; /* Cor do botão similar ao CV */
    color: white;
    padding: 8px 15px;
    margin-top: 10px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.credential-link:hover {
    background-color: #0056b3; /* Cor do botão ao passar o mouse */
}


/* Media Queries para dispositivos menores (ex: celulares) */
@media (max-width: 768px) {
    /* Ajustes para o cabeçalho e foto de perfil */
    .header-profile {
        padding: 20px; /* Reduz o preenchimento do cabeçalho */
        width: 95%; /* Aumenta um pouco a largura para ocupar mais espaço em telas pequenas */
    }

    .profile-photo {
        width: 100px; /* Diminui o tamanho da foto de perfil */
        height: 100px;
        border-width: 2px; /* Diminui a borda da foto */
    }

    .header-profile h1 {
        font-size: 1.8em; /* Reduz o tamanho da fonte do seu nome */
    }

    .title-role {
        font-size: 1em; /* Reduz o tamanho da fonte do cargo */
    }

    .contact-info {
        font-size: 0.9em; /* Reduz o tamanho da fonte das informações de contato */
        line-height: 1.3;
    }

    .contact-info p {
        margin-bottom: 5px; /* Reduz o espaçamento entre as linhas de contato */
    }

    /* Ajustes para os links sociais */
    .social-links {
        gap: 15px; /* Reduz o espaçamento entre os ícones sociais */
    }

    .social-links a {
        font-size: 0.9em; /* Reduz o tamanho da fonte dos links sociais */
    }

    .social-links img {
        width: 18px; /* Diminui o tamanho dos ícones sociais */
        height: 18px;
    }

    /* Ajustes para o contêiner principal */
    .container {
        width: 95%; /* Ocupa mais largura em telas pequenas */
        padding: 0; /* Remove padding extra no container para mobile */
    }

    /* Ajustes para os botões do acordeão */
    .accordion-button {
        padding: 12px 20px; /* Reduz o preenchimento do botão */
        font-size: 1em; /* Reduz o tamanho da fonte do botão */
    }

    .accordion-button::after {
        font-size: 1.2em; /* Diminui o tamanho do ícone de +/- */
    }

    /* Ajustes para o conteúdo do acordeão */
    .accordion-content {
        padding: 0 20px; /* Reduz o preenchimento lateral do conteúdo */
    }

    .accordion-content h2 {
        font-size: 1.3em; /* Reduz o tamanho dos títulos de seção */
        margin-bottom: 15px;
        padding-bottom: 8px;
    }

    .personal-description {
        font-size: 0.95em; /* Ajusta a fonte da descrição pessoal */
    }

    /* Ajustes para as seções de habilidades e formação */
    .skills-grid {
        flex-direction: column; /* Coloca as soft e hard skills em coluna */
        gap: 20px; /* Reduz o espaçamento entre elas */
    }

    .soft-skills,
    .hard-skills {
        min-width: unset; /* Remove a largura mínima para flexibilidade */
        padding: 15px; /* Reduz o preenchimento interno */
    }

    .soft-skills h3,
    .hard-skills h3 {
        font-size: 1.1em; /* Reduz o tamanho dos títulos de soft/hard skills */
        margin-bottom: 10px;
        padding-bottom: 5px;
    }

    .soft-skills li {
        font-size: 0.95em; /* Reduz o tamanho da fonte das listas de habilidades */
    }

    /* Ajustes de Hard Skills dentro da Media Query */
    .hard-skills-grid { /* Ajusta o grid para telas menores */
        gap: 10px; /* Reduz ainda mais o gap em telas muito pequenas */
    }
    .skill-item {
        width: 70px; /* Ajusta a largura do item para caber mais em telas pequenas */
    }
    .skill-item img {
        width: 35px; /* Ajusta o tamanho do ícone em telas pequenas */
        height: 35px;
    }
    .skill-item p {
        font-size: 0.8em; /* Diminui a fonte do texto abaixo dos ícones de hard skills para telas menores */
    }


    /* Ajustes para a seção de formação acadêmica */
    .mfa h3 {
        font-size: 1.1em; /* Reduz a fonte do título do curso */
    }

    .mfa h4 {
        font-size: 0.9em; /* Reduz a fonte do nome da instituição */
    }

    .mfa2 img {
        width: 35px; /* Diminui o tamanho da logo da instituição de ensino */
    }

    /* Ajustes para as experiências profissionais */
    .experience-item h3 {
        font-size: 1.1em; /* Reduz a fonte do título da experiência */
    }

    .experience-item p {
        font-size: 0.9em; /* Reduz a fonte dos detalhes da experiência */
        margin-bottom: 3px;
    }

    .experience-item p img {
        width: 30px; /* Diminui o tamanho das logos das empresas/ícones */
    }

    .experience-item ul {
        padding-left: 15px; /* Ajusta o padding da lista */
    }

    .experience-item li {
        font-size: 0.9em; /* Reduz a fonte dos itens da lista de atividades */
    }

    /* Ajustes para certificações */
    .certification-item h3 {
        font-size: 1.1em;
    }
    .certification-item p {
        font-size: 0.9em;
    }
    .certification-item p img {
        width: 25px; /* Diminui logos das certificações */
    }
    .credential-link {
        font-size: 0.9em;
    }
}

/* Opcional: Media Query para telas ainda menores (ex: smartphones muito pequenos) */
@media (max-width: 480px) {
    body {
        padding: 12px;
    }

    .header-profile {
        padding: 10px;
    }

    .profile-photo {
        width: 105px;
        height: 105px;
    }

    .header-profile h1 {
        font-size: 1.5em;
    }

    .title-role {
        font-size: 0.9em;
    }

    .contact-info {
        font-size: 0.8em;
    }

    .accordion-button {
        font-size: 0.9em;
        padding: 10px 15px;
    }

    .accordion-content h2 {
        font-size: 1.1em;
    }

    .personal-description,
    .soft-skills li,
    .experience-item p,
    .experience-item li,
    .certification-item p {
        font-size: 0.85em;
    }

    /* Ajustes adicionais para hard-skills-grid em telas muito pequenas */
    .hard-skills-grid {
        gap: 8px;
    }
    .skill-item {
        width: 65px; /* Permite mais itens por linha ou um layout mais compacto */
    }
    .skill-item img {
        width: 30px;
        height: 30px;
    }
    .skill-item p {
        font-size: 0.75em;
    }
}

.eu {
    font-family: times;
    color: #407192;
}