/*
======================================================
 PORTFOLIO PROFISSIONAL
 Renato Silveira de Moura

 Arquivo principal de estilos
======================================================
*/


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


* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    font-family: 'Inter', Arial, sans-serif;

    background: #ffffff;

    color: #333333;

    line-height: 1.6;

}



/* Remove padrões */

ul {

    list-style: none;

}


a {

    text-decoration: none;

    color: inherit;

}



img {

    max-width: 100%;

    display: block;

}



button,
input,
textarea,
select {

    font-family: inherit;

}





/* =====================================================
                VARIÁVEIS DO TEMA
===================================================== */


:root {


    --primary:

    #0A66C2;



    --primary-dark:

    #004182;



    --secondary:

    #34495E;



    --dark:

    #1F2937;



    --gray:

    #6B7280;



    --light:

    #F5F7FA;



    --white:

    #FFFFFF;



    --border:

    #E5E7EB;



    --success:

    #16A34A;



    --shadow:

    0 10px 30px rgba(0,0,0,0.08);



    --radius:

    16px;



}





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


.container {


    width: 100%;


    max-width: 1200px;


    margin: 0 auto;


    padding-left: 25px;


    padding-right: 25px;


}





/* =====================================================
                    SEÇÕES
===================================================== */


section {


    padding: 90px 0;


}




.section-title {


    text-align: center;


    max-width: 750px;


    margin: 0 auto 60px;


}




.section-title span {


    display: inline-block;


    color: var(--primary);


    font-weight: 700;


    font-size: 14px;


    text-transform: uppercase;


    letter-spacing: 2px;


    margin-bottom: 15px;


}





.section-title h2 {


    font-size: 42px;


    color: var(--dark);


    line-height: 1.2;


    margin-bottom: 20px;


}




.section-title p {


    color: var(--gray);


    font-size: 18px;


}





/* =====================================================
                    HEADER
===================================================== */


header {


    position: fixed;


    top: 0;


    left: 0;


    width: 100%;


    z-index: 999;


    background:

    rgba(255,255,255,0.95);


    backdrop-filter:

    blur(10px);


    border-bottom:

    1px solid var(--border);


}





header .container {


    height: 80px;


    display: flex;


    align-items: center;


    justify-content: space-between;


}





.logo {


    font-size: 28px;


    font-weight: 900;


    color: var(--primary);


}





.logo span {


    border: 3px solid var(--primary);


    padding: 5px 12px;


    border-radius: 10px;


}





/* =====================================================
                    MENU
===================================================== */


#navbar ul {


    display: flex;


    gap: 35px;


}





#navbar a {


    font-weight: 600;


    color: var(--secondary);


    transition:

    .3s;


}





#navbar a:hover {


    color: var(--primary);


}






/* =====================================================
                HEADER BUTTONS
===================================================== */


.header-buttons {


    display: flex;


    align-items: center;


    gap: 15px;


}



.header-buttons button {


    width: 42px;


    height: 42px;


    border-radius: 50%;


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


    background: var(--white);


    cursor:pointer;


    color: var(--secondary);


    transition:.3s;


}




.header-buttons button:hover {


    background:

    var(--primary);


    color:

    var(--white);


}

/* =====================================================
                    BOTÕES
===================================================== */


.btn {


    display: inline-flex;


    align-items: center;


    justify-content: center;


    gap: 10px;


    padding: 14px 30px;


    border-radius: 10px;


    font-weight: 600;


    cursor: pointer;


    transition: all .3s ease;


    border: 2px solid transparent;


    font-size: 15px;


}




.btn-primary {


    background:

    var(--primary);


    color:

    var(--white);


}



.btn-primary:hover {


    background:

    var(--primary-dark);


    transform:

    translateY(-3px);


}





.btn-secondary {


    background:

    transparent;


    color:

    var(--primary);


    border-color:

    var(--primary);


}



.btn-secondary:hover {


    background:

    var(--primary);


    color:

    var(--white);


}





/* =====================================================
                    HERO
===================================================== */


.hero {


    min-height:

    100vh;


    display:

    flex;


    align-items:

    center;


    padding-top:

    120px;


    position:

    relative;


    overflow:

    hidden;


}




.hero-grid {


    display:

    grid;


    grid-template-columns:

    420px 1fr;


    gap:

    80px;


    align-items:

    center;


}






/* FOTO PERFIL */


.hero-photo {


    text-align:

    center;


}



.photo-border {


    width:

    340px;


    height:

    340px;


    margin:

    auto;


    padding:

    10px;


    border-radius:

    50%;


    background:

    linear-gradient(

    135deg,

    var(--primary),

    #7cb8ff

    );


}



.photo-border img {


    width:

    100%;


    height:

    100%;


    object-fit:

    cover;


    border-radius:

    50%;


    border:

    8px solid white;


}





.online-badge {


    display:

    inline-flex;


    align-items:

    center;


    gap:

    8px;


    margin-top:

    25px;


    padding:

    10px 18px;


    border-radius:

    30px;


    background:

    #ecfdf5;


    color:

    var(--success);


    font-size:

    14px;


    font-weight:

    600;


}





.online-badge i {


    font-size:

    10px;


}







/* CONTEÚDO HERO */


.hero-badge {


    display:

    inline-flex;


    align-items:

    center;


    gap:

    10px;


    padding:

    8px 18px;


    background:

    #eaf3ff;


    color:

    var(--primary);


    border-radius:

    30px;


    font-weight:

    600;


    margin-bottom:

    25px;


}






.hero-content h1 {


    font-size:

    64px;


    line-height:

    1.1;


    color:

    var(--dark);


    margin-bottom:

    15px;


}



.hero-content h1 span {


    color:

    var(--primary);


}




.hero-content h2 {


    font-size:

    28px;


    font-weight:

    600;


    color:

    var(--secondary);


    margin-bottom:

    25px;


}





.hero-description {


    font-size:

    18px;


    color:

    var(--gray);


    max-width:

    650px;


    margin-bottom:

    35px;


}







/* =====================================================
                HERO ESTATÍSTICAS
===================================================== */


.hero-highlights {


    display:

    grid;


    grid-template-columns:

    repeat(4,1fr);


    gap:

    20px;


    margin-bottom:

    35px;


}



.hero-highlights div {


    display:

    flex;


    flex-direction:

    column;


    gap:

    5px;


}



.hero-highlights i {


    color:

    var(--primary);


    font-size:

    22px;


}



.hero-highlights strong {


    font-size:

    28px;


    color:

    var(--dark);


}



.hero-highlights span {


    font-size:

    14px;


    color:

    var(--gray);


}






.hero-buttons {


    display:

    flex;


    flex-wrap:

    wrap;


    gap:

    15px;


    margin-bottom:

    30px;


}






.social-links {


    display:

    flex;


    gap:

    15px;


}



.social-links a {


    width:

    45px;


    height:

    45px;


    border-radius:

    50%;


    display:

    flex;


    align-items:

    center;


    justify-content:

    center;


    background:

    var(--light);


    color:

    var(--primary);


    transition:

    .3s;


}




.social-links a:hover {


    background:

    var(--primary);


    color:

    var(--white);


}

/* =====================================================
                SERVIÇOS
===================================================== */


.services {


    background:

    var(--light);


}




.services-grid {


    display:

    grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:

    30px;


}




.service-card {


    background:

    var(--white);


    padding:

    35px;


    border-radius:

    var(--radius);


    box-shadow:

    var(--shadow);


    transition:

    .3s;


}




.service-card:hover {


    transform:

    translateY(-8px);


}





.service-card i {


    font-size:

    35px;


    color:

    var(--primary);


    margin-bottom:

    20px;


}




.service-card h3 {


    color:

    var(--dark);


    margin-bottom:

    15px;


    font-size:

    22px;


}



.service-card p {


    color:

    var(--gray);


}







/* =====================================================
                ESTATÍSTICAS
===================================================== */


.statistics {


    background:

    var(--primary);


}



.stats-grid {


    display:

    grid;


    grid-template-columns:

    repeat(4,1fr);


    gap:

    30px;


}



.stat-card {


    text-align:

    center;


    color:

    var(--white);


}



.stat-card h2 {


    font-size:

    48px;


    margin-bottom:

    10px;


}



.stat-card span {


    font-size:

    17px;


}






/* =====================================================
                TECNOLOGIAS
===================================================== */


.tech-grid {


    display:

    grid;


    grid-template-columns:

    repeat(6,1fr);


    gap:

    25px;


}



.tech-card {


    background:

    var(--white);


    border:

    1px solid var(--border);


    padding:

    25px;


    border-radius:

    14px;


    text-align:

    center;


    transition:

    .3s;


}




.tech-card:hover {


    box-shadow:

    var(--shadow);


    transform:

    translateY(-5px);


}




.tech-card img {


    width:

    55px;


    height:

    55px;


    margin:

    auto auto 15px;


}



.tech-card span {


    font-weight:

    600;


    color:

    var(--secondary);


}





/* =====================================================
                    CTA
===================================================== */


.cta-box {


    background:

    linear-gradient(

    135deg,

    var(--primary),

    var(--primary-dark)

    );


    padding:

    60px;


    border-radius:

    25px;


    text-align:

    center;


    color:

    white;


}



.cta-box h2 {


    font-size:

    36px;


    margin-bottom:

    15px;


}



.cta-box p {


    font-size:

    18px;


    margin-bottom:

    30px;


}



.cta-box .btn-secondary {


    border-color:

    white;


    color:

    white;


}



.cta-box .btn-secondary:hover {


    background:

    white;


    color:

    var(--primary);


}

/* =====================================================
                TIMELINE EXPERIÊNCIA
===================================================== */


.experience {

    background: var(--light);

}



.timeline {


    position: relative;


    max-width: 900px;


    margin: auto;


}




.timeline::before {


    content:"";


    position:absolute;


    left:20px;


    top:0;


    bottom:0;


    width:3px;


    background:

    var(--primary);


}





.timeline-item {


    position:relative;


    padding-left:70px;


    margin-bottom:60px;


}





.timeline-dot {


    position:absolute;


    left:7px;


    top:5px;


    width:30px;


    height:30px;


    border-radius:50%;


    background:

    var(--primary);


    border:

    6px solid white;


    box-shadow:

    var(--shadow);


}





.timeline-content {


    background:

    var(--white);


    padding:35px;


    border-radius:

    var(--radius);


    box-shadow:

    var(--shadow);


}




.timeline-date {


    display:inline-block;


    background:

    #eaf3ff;


    color:

    var(--primary);


    padding:

    6px 15px;


    border-radius:

    20px;


    font-size:

    14px;


    font-weight:

    700;


    margin-bottom:

    15px;


}





.timeline-content h3 {


    font-size:

    26px;


    color:

    var(--dark);


}



.timeline-content h4 {


    color:

    var(--primary);


    margin-bottom:

    15px;


}





.timeline-content p {


    color:

    var(--gray);


    margin-bottom:

    15px;


}





.experience-list {


    margin:

    20px 0;


}



.experience-list li {


    margin-bottom:

    10px;


    color:

    var(--secondary);


}



.experience-list li::before {


    content:"✓";


    color:

    var(--success);


    font-weight:

    bold;


    margin-right:

    10px;


}





.timeline-tags,


.resume-tags,


.technology-tags {


    display:

    flex;


    flex-wrap:

    wrap;


    gap:

    10px;


}





.timeline-tags span,


.resume-tags span,


.technology-tags span {


    background:

    #eaf3ff;


    color:

    var(--primary);


    padding:

    7px 15px;


    border-radius:

    30px;


    font-size:

    13px;


    font-weight:

    600;


}







/* =====================================================
                PROJETOS
===================================================== */


.projects-page {


    background: var(--light);


}





.project-filter {


    display:

    flex;


    justify-content:

    center;


    flex-wrap:

    wrap;


    gap:

    15px;


    margin-bottom:

    50px;


}





.filter-btn {


    padding:

    10px 25px;


    border-radius:

    30px;


    border:

    1px solid var(--border);


    background:

    white;


    cursor:

    pointer;


    font-weight:

    600;


    color:

    var(--secondary);


    transition:

    .3s;


}



.filter-btn:hover,


.filter-btn.active {


    background:

    var(--primary);


    color:

    white;


}






.projects-grid {


    display:

    grid;


    grid-template-columns:

    repeat(2,1fr);


    gap:

    35px;


}





.project-card {


    background:

    white;


    border-radius:

    var(--radius);


    overflow:

    hidden;


    box-shadow:

    var(--shadow);


    transition:

    .3s;


}





.project-card:hover {


    transform:

    translateY(-8px);


}





.project-image {


    height:

    260px;


    overflow:

    hidden;


}




.project-image img {


    width:

    100%;


    height:

    100%;


    object-fit:

    cover;


}






.project-content {


    padding:

    30px;


}





.project-category {


    color:

    var(--primary);


    font-weight:

    700;


    font-size:

    14px;


}





.project-content h3 {


    font-size:

    25px;


    margin:

    15px 0;


    color:

    var(--dark);


}





.project-content p {


    color:

    var(--gray);


    margin-bottom:

    20px;


}





.project-info {


    display:

    flex;


    justify-content:

    space-between;


    margin-bottom:

    20px;


    color:

    var(--gray);


    font-size:

    14px;


}





.project-stack {


    display:

    flex;


    flex-wrap:

    wrap;


    gap:

    10px;


    margin-bottom:

    25px;


}





.project-stack span {


    background:

    var(--light);


    padding:

    6px 12px;


    border-radius:

    20px;


    font-size:

    13px;


    font-weight:

    600;


}





.project-button {


    color:

    var(--primary);


    font-weight:

    700;


    display:

    inline-flex;


    align-items:

    center;


    gap:

    10px;


}

/* =====================================================
                DETALHE DO PROJETO
===================================================== */


.project-detail-header {


    padding-top:

    150px;


    background:

    var(--light);


}




.project-detail-title {


    max-width:

    850px;


}





.project-detail-title span {


    color:

    var(--primary);


    font-weight:

    700;


}





.project-detail-title h1 {


    font-size:

    52px;


    margin:

    20px 0;


}





.project-cover img {


    width:

    100%;


    border-radius:

    20px;


    box-shadow:

    var(--shadow);


}





.project-two-columns {


    display:

    grid;


    grid-template-columns:

    repeat(2,1fr);


    gap:

    50px;


}





.project-two-columns h2 {


    margin-bottom:

    20px;


    color:

    var(--dark);


}





.project-two-columns p {


    color:

    var(--gray);


}





.results-grid {


    display:

    grid;


    grid-template-columns:

    repeat(4,1fr);


    gap:

    25px;


}





.result-card {


    background:

    white;


    padding:

    30px;


    border-radius:

    15px;


    box-shadow:

    var(--shadow);


}





.result-card i {


    color:

    var(--success);


    font-size:

    25px;


    margin-bottom:

    15px;


}





.gallery-grid {


    display:

    grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:

    20px;


}




.gallery-grid img {


    border-radius:

    15px;


}

/* =====================================================
                TECNOLOGIAS
===================================================== */


.technology-page {

    background: var(--light);

}

.about-page {

    background: var(--light);

}


.technology-category {


    margin-bottom:

    70px;


}



.category-header {


    display:

    flex;


    align-items:

    center;


    gap:

    20px;


    margin-bottom:

    35px;


}





.category-header i {


    width:

    60px;


    height:

    60px;


    border-radius:

    15px;


    background:

    #eaf3ff;


    display:

    flex;


    align-items:

    center;


    justify-content:

    center;


    font-size:

    28px;


    color:

    var(--primary);


}





.category-header h3 {


    font-size:

    30px;


    color:

    var(--dark);


}





.category-header p {


    color:

    var(--gray);


}





.technology-grid {


    display:

    grid;


    grid-template-columns:

    repeat(4,1fr);


    gap:

    25px;


}





.technology-item {


    background:

    white;


    border:

    1px solid var(--border);


    border-radius:

    18px;


    padding:

    30px;


    text-align:

    center;


    transition:

    .3s;


}





.technology-item:hover {


    box-shadow:

    var(--shadow);


    transform:

    translateY(-5px);


}





.technology-item img {


    width:

    70px;


    height:

    70px;


    object-fit:

    contain;


    margin:

    0 auto 20px;


}





.technology-item h4 {


    font-size:

    22px;


    color:

    var(--dark);


}





.technology-item span {


    display:

    block;


    color:

    var(--primary);


    font-weight:

    700;


    margin:

    8px 0;


}





.technology-item p {


    color:

    var(--gray);


    font-size:

    14px;


}







/* =====================================================
                    ARTIGOS
===================================================== */


.articles-page {


    background:

    var(--light);


}




.articles-grid {


    display:

    grid;


    grid-template-columns:

    repeat(2,1fr);


    gap:

    35px;


}





.article-card {


    background:

    white;


    border-radius:

    var(--radius);


    overflow:

    hidden;


    box-shadow:

    var(--shadow);


}





.article-header {


    height:

    10px;


    background:

    var(--primary);


}





.article-content {


    padding:

    35px;


}





.article-category {


    color:

    var(--primary);


    font-weight:

    700;


    font-size:

    14px;


}





.article-meta {


    display:

    flex;


    gap:

    20px;


    margin:

    15px 0;


    color:

    var(--gray);


    font-size:

    14px;


}





.article-content h3 {


    font-size:

    25px;


    color:

    var(--dark);


    margin-bottom:

    15px;


}





.article-content p {


    color:

    var(--gray);


}





.article-tags {


    display:

    flex;


    gap:

    10px;


    flex-wrap:

    wrap;


    margin:

    25px 0;


}





.article-tags span {


    background:

    var(--light);


    padding:

    6px 15px;


    border-radius:

    20px;


    font-size:

    13px;


}





.article-link {


    color:

    var(--primary);


    font-weight:

    700;


}

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


.resume-page {


    background:

    var(--light);


}



.resume-header {


    display:

    flex;


    align-items:

    center;


    gap:

    40px;


    background:

    white;


    padding:

    40px;


    border-radius:

    20px;


    box-shadow:

    var(--shadow);


    margin-bottom:

    50px;


}





.resume-photo img {


    width:

    160px;


    height:

    160px;


    border-radius:

    50%;


    object-fit:

    cover;


}





.resume-title h1 {


    font-size:

    38px;


    color:

    var(--dark);


}





.resume-title h2 {


    color:

    var(--primary);


    margin:

    10px 0;


}





.resume-section {


    background:

    white;


    padding:

    35px;


    border-radius:

    18px;


    margin-bottom:

    30px;


    box-shadow:

    var(--shadow);


}





.resume-section-title {


    display:

    flex;


    align-items:

    center;


    gap:

    15px;


    margin-bottom:

    25px;


}





.resume-section-title i {


    color:

    var(--primary);


    font-size:

    25px;


}





.resume-section-title h2 {


    color:

    var(--dark);


}





.resume-item {


    display:

    grid;


    grid-template-columns:

    150px 1fr;


    gap:

    30px;


    margin-bottom:

    30px;


}





.resume-date {


    font-weight:

    700;


    color:

    var(--primary);


}





.certification-list div {


    padding:

    12px 0;


    color:

    var(--secondary);


}





.certification-list i {


    color:

    var(--success);


    margin-right:

    10px;


}





.competence-grid {


    display:

    grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:

    20px;


}





.competence-grid div {


    background:

    var(--light);


    padding:

    20px;


    border-radius:

    12px;


    text-align:

    center;


    font-weight:

    600;


}

/* =====================================================
                    CONTATO
===================================================== */


.contact-page {


    background:

    var(--light);


}



.contact-grid {


    display:

    grid;


    grid-template-columns:

    1fr 1fr;


    gap:

    50px;


}





.contact-card {


    display:

    flex;


    align-items:

    center;


    gap:

    20px;


    padding:

    25px;


    background:

    var(--light);


    border-radius:

    15px;


    margin-bottom:

    20px;


}





.contact-icon {


    width:

    55px;


    height:

    55px;


    border-radius:

    50%;


    background:

    var(--primary);


    color:

    white;


    display:

    flex;


    justify-content:

    center;


    align-items:

    center;


}




.contact-form {


    background:

    white;


    padding:

    35px;


    border-radius:

    20px;


    box-shadow:

    var(--shadow);


}



.form-group {


    margin-bottom:

    20px;


}



.form-group label {


    display:

    block;


    margin-bottom:

    8px;


    font-weight:

    600;


}



.form-group input,

.form-group textarea,

.form-group select {


    width:

    100%;


    padding:

    14px;


    border:

    1px solid var(--border);


    border-radius:

    10px;


}





.availability {


    display:

    flex;


    gap:

    15px;


    background:

    #ecfdf5;


    padding:

    25px;


    border-radius:

    15px;


    color:

    #166527;


}






/* =====================================================
                    FOOTER
===================================================== */


footer {


    background:

    #111827;


    color:

    white;


    padding:

    50px 0 25px;


}



.footer-content {


    display:

    flex;


    justify-content:

    space-between;


    align-items:

    center;


}





.footer-social {


    display:

    flex;


    gap:

    15px;


}



.footer-social a {


    width:

    40px;


    height:

    40px;


    border-radius:

    50%;


    background:

    rgba(255,255,255,.1);


    display:

    flex;


    align-items:

    center;


    justify-content:

    center;


}





.copyright {


    text-align:

    center;


    margin-top:

    25px;


    color:

    #9ca3af;


}

header.scrolled {


    box-shadow:

    0 5px 25px rgba(0,0,0,.08);


}

.form-error {


    display:block;


    color:#dc2626;


    margin-top:6px;


    font-size:13px;


}



input.error,


textarea.error {


    border-color:#dc2626;


}




.success-message {


    background:#ecfdf5;


    color:#166534;


    padding:15px;


    border-radius:10px;


    margin-bottom:20px;


    display:flex;


    gap:10px;


    align-items:center;


}