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

body{

background:var(--bg);

font-family:'Poppins',sans-serif;

color:var(--text);

padding:40px 20px;

}

.page-container{

max-width:900px;

margin:auto;

}

.back-btn{

display:inline-block;

margin-bottom:40px;

text-decoration:none;

color:var(--red);

font-weight:600;

}

.about-header{

text-align:center;

margin-bottom:40px;

}

.about-photo{

width:180px;
height:180px;

object-fit:cover;

border-radius:50%;

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

box-shadow:
0 0 20px rgba(255,0,60,.3);

margin-bottom:20px;

}

.about-header h1{

font-size:3rem;

}

.about-header span{

color:var(--red);

}

.card{

background:var(--card);

padding:30px;

border-radius:25px;

border:1px solid rgba(255,255,255,.08);

line-height:1.8;

margin-bottom:40px;

}

.section-title{

font-size:2rem;

margin-bottom:25px;

}

.timeline{

display:flex;

flex-direction:column;

gap:20px;

margin-bottom:40px;

position: relative;

padding-left: 20px;

}

.timeline::before{

content:"";

position:absolute;

left:0;

top:0;

width:3px;

height:100%;

background:var(--red);

border-radius:10px;

}

.timeline-card{

background:var(--card);

padding:25px;

border-radius:20px;

border:1px solid rgba(255,255,255,.08);

transition: all .3s ease;

}

.timeline-card:hover{

transform:translateY(-5px);

border-color:var(--red);

box-shadow:
0 0 20px rgba(255,0,60,.15);

}


.tech-grid{

display:flex;

flex-wrap:wrap;

gap:15px;

margin-bottom:40px;

}

.tech-grid span{

background:var(--card);

padding:12px 18px;

border-radius:15px;

border:1px solid rgba(255,0,60,.2);

color:var(--gray);

font-weight:500;

cursor:pointer;

transition:all .3s ease;

}

.curiosity h2{

margin-bottom:15px;

color:var(--red);

}

.tech-grid span:hover{

background:var(--red);

color:white;

transform:translateY(-5px) scale(1.08);

box-shadow:
0 0 15px rgba(255,0,60,.4),
0 0 30px rgba(255,0,60,.2);

}

.tech-grid span:active{

background:var(--red);

color:white;

transform:scale(.95);

}

.about-photo{

transition:all .4s ease;

}

.about-photo:hover{

transform:scale(1.05);

box-shadow:
0 0 25px rgba(255,0,60,.5),
0 0 50px rgba(255,0,60,.2);

}

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

.title{

text-align:center;

font-size:3rem;

margin-bottom:10px;

}

.subtitle{

text-align:center;

color:var(--gray);

margin-bottom:50px;

}

.projects-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(350px,1fr));

gap:30px;

}

.project-card{

background:var(--card);

border-radius:25px;

overflow:hidden;

border:1px solid rgba(255,255,255,.08);

transition:.3s;

}

.project-card:hover{

transform:translateY(-8px);

border-color:var(--red);

box-shadow:
0 0 25px rgba(255,0,60,.2);

}

.project-card img{

width:100%;

height:220px;

object-fit:cover;

transition:.4s;

}

.project-card:hover img{

transform:scale(1.05);

}

.project-content{

padding:25px;

}

.project-content h3{

font-size:1.5rem;

margin-bottom:10px;

}

.project-content p{

color:var(--gray);

line-height:1.7;

margin-bottom:20px;

}

.techs{

display:flex;

flex-wrap:wrap;

gap:10px;

margin-bottom:20px;

}

.techs span{

background:rgba(255,0,60,.1);

color:var(--red);

padding:8px 14px;

border-radius:12px;

font-size:.9rem;

}

.btn{

display:inline-block;

padding:12px 18px;

background:var(--red);

color:white;

text-decoration:none;

border-radius:12px;

font-weight:600;

transition:.3s;

}

.btn:hover{

transform:translateY(-3px);

box-shadow:
0 0 20px rgba(255,0,60,.4);

}

/* CARROSSEL */

.carousel{

position:relative;

height:220px;

overflow:hidden;

}

.carousel-img{

position:absolute;

width:100%;
height:100%;

object-fit:cover;

opacity:0;

transition:opacity .8s ease;

}

.carousel-img.active{

opacity:1;

}

.project-buttons{

display:flex;

gap:12px;

margin-top:20px;

}

.secondary-btn{

background:transparent;

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

color:var(--red);

}

.secondary-btn:hover{

background:var(--red);

color:white;

}

.title i{

color:var(--red);

margin-right:12px;

text-shadow:
0 0 10px rgba(255,0,60,.5),
0 0 20px rgba(255,0,60,.3);

}

.title i{

color:var(--red);

margin-right:12px;

animation: glow 2s infinite alternate;

}

@keyframes glow{

from{

text-shadow:
0 0 5px rgba(255,0,60,.3);

}

to{

text-shadow:
0 0 15px rgba(255,0,60,.8),
0 0 30px rgba(255,0,60,.4);

}

}

/* ===================== */
/* SKILLS */
/* ===================== */

.skills-section{

margin-top:40px;

margin-bottom:50px;

}

.skill{

margin-bottom:25px;

}

.skill-info{

display:flex;

justify-content:space-between;

margin-bottom:10px;

font-weight:600;

}

.progress-bar{

height:12px;

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

border-radius:20px;

overflow:hidden;

}

.progress{

height:100%;

background:linear-gradient(
90deg,
#ff003c,
#ff4d6d
);

border-radius:20px;

}

.interest-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));

gap:20px;

margin-top:30px;

}

.interest-card{

background:var(--card);

padding:25px;

border-radius:20px;

border:1px solid rgba(255,255,255,.08);

text-align:center;

transition:.3s;

}

.interest-card:hover{

transform:translateY(-5px);

border-color:var(--red);

box-shadow:
0 0 20px rgba(255,0,60,.15);

}

.interest-card{

background:var(--card);

padding:30px;

border-radius:20px;

border:1px solid rgba(255,255,255,.08);

display:flex;

flex-direction:column;

align-items:center;

gap:15px;

text-align:center;

transition:.3s;

}

.interest-card i{

font-size:2rem;

color:var(--red);

transition:.3s;

}

.interest-card span{

font-weight:500;

}

.interest-card:hover{

transform:translateY(-5px);

border-color:var(--red);

box-shadow:
0 0 20px rgba(255,0,60,.15);

}

.interest-card:hover i{

transform:scale(1.2);

text-shadow:
0 0 15px rgba(255,0,60,.6);

}

.alice-scanner{

margin-top:80px;

text-align:center;

}

.scanner-text{

margin-bottom:20px;

color:var(--gray);

font-size:1.1rem;

}

#scanButton{

width:90px;
height:90px;

border:none;

border-radius:50%;

background:var(--red);

cursor:pointer;

font-size:2rem;

color:white;

transition:.4s;

animation:pulse 2s infinite;

}

#scanButton i{

transition:.4s;

}

#scanButton:hover{

transform:scale(1.1);

box-shadow:
0 0 20px rgba(255,0,60,.6),
0 0 50px rgba(255,0,60,.3);

}

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.08);

}

100%{

transform:scale(1);

}

}

.scanner-hidden{

display:none;

}

.scanner-active{

display:block;

margin-top:40px;

padding:35px;

background:var(--card);

border-radius:25px;

border:1px solid rgba(255,0,60,.2);

animation:scannerAppear .8s ease;

}

@keyframes scannerAppear{

from{

opacity:0;

transform:translateY(30px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.robot-icon{

font-size:4rem;

color:var(--red);

margin-bottom:20px;

}

.analysis{

margin-top:25px;

display:flex;

flex-direction:column;

gap:15px;

font-size:1.2rem;

}

.analysis span{

color:var(--red);

font-weight:700;

}

.robot-message{

margin-top:30px;

padding:20px;

border-radius:15px;

background:rgba(255,0,60,.08);

display:flex;

align-items:center;

justify-content:center;

gap:12px;

}

.robot-message i{

color:var(--red);

font-size:1.5rem;

}

.scanner-arrow{

font-size:1.8rem;

color:var(--red);

margin-bottom:20px;

animation:bounce 1.5s infinite;

}

@keyframes bounce{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(10px);

}

}

/* CERTIFICADOS */

.certificates-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));

gap:25px;

margin-top:40px;

}

.certificate-card{

background:var(--card);

padding:20px;

border-radius:25px;

border:1px solid rgba(255,255,255,.08);

transition:.3s;

text-align:center;

}

.certificate-card:hover{

transform:translateY(-8px);

border-color:var(--red);

box-shadow:
0 0 20px rgba(255,0,60,.15);

}

.certificate-image{

width:100%;

height:180px;

object-fit:cover;

border-radius:15px;

margin-bottom:15px;

}

.view-btn{

margin-top:15px;

padding:12px 20px;

border:none;

border-radius:12px;

background:var(--red);

color:white;

cursor:pointer;

font-weight:600;

transition:.3s;

}

.view-btn:hover{

transform:scale(1.05);

}

.modal{

display:none;

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,.9);

z-index:9999;

justify-content:center;

align-items:center;

}

.modal img{

max-width:90%;

max-height:90%;

border-radius:15px;

}

.close-modal{

position:absolute;

top:30px;

right:40px;

font-size:3rem;

color:white;

cursor:pointer;

}

.certificate-buttons{

display:flex;

gap:10px;

justify-content:center;

margin-top:15px;

}

.more-btn{

margin-top:15px;

padding:12px 20px;

border:none;

border-radius:12px;

background:transparent;

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

color:var(--red);

cursor:pointer;

font-weight:600;

transition:.3s;

}

.more-btn:hover{

background:var(--red);

color:white;

}

.certificate-info{

max-height:0;

overflow:hidden;

transition:.4s ease;

margin-top:0;

text-align:left;

color:var(--gray);

line-height:1.7;

}

.certificate-info.active{

max-height:300px;

margin-top:20px;

}

.contact-page {
    max-width: 800px;
    margin: auto;
    padding: 30px;

    border: 1px solid rgba(255, 60, 100, 0.15);
    border-radius: 35px;

    background: #050505;

    position: relative;
    overflow: hidden;
}

.contact-page::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at top,
            rgba(255, 0, 76, 0.05),
            transparent 60%
        );

    pointer-events: none;
}

.contact-header {
    text-align: center;
    margin-top: 20px;
}

.contact-header h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.contact-header span {
    color: #ff3d67;
}

.contact-header p {
    color: #bdbdbd;
    font-size: 1rem;
    line-height: 1.7;

    max-width: 600px;
    margin: auto;
}

.contact-section {
    margin-top: 50px;
    text-align: center;
}

.title-line {
    width: 60px;
    height: 3px;

    margin: 15px auto 30px;

    border-radius: 10px;
    background: #ff3d67;
}

.contact-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-card {
    display: flex;
    align-items: center;

    padding: 18px 22px;

    border-radius: 20px;

    border: 1px solid rgba(255, 61, 103, .25);

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

    text-decoration: none;

    transition: .3s ease;
}

.contact-card:hover {
    transform: translateY(-4px);

    border-color: #ff3d67;

    box-shadow:
        0 0 20px rgba(255, 61, 103, .12);
}

.contact-icon {
    width: 60px;
    height: 60px;

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

    border-radius: 15px;

    border: 1px solid rgba(255, 61, 103, .3);

    flex-shrink: 0;
}

.contact-icon i {
    font-size: 1.6rem;
    color: #ff3d67;
}

.contact-info {
    flex: 1;

    text-align: left;
    margin-left: 18px;
}

.contact-info h3 {
    font-size: 1.2rem;
    color: white;

    margin-bottom: 3px;
}

.contact-info p {
    color: #bdbdbd;
    font-size: .9rem;
}

.arrow {
    font-size: 1.5rem;
    color: #ff3d67;
}

.quote-box {
    margin-top: 40px;

    border: 1px solid rgba(255, 61, 103, .25);

    border-radius: 20px;

    padding: 20px;

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

    color: #d7d7d7;

    font-size: 1rem;
}

.quote-left,
.quote-right {
    font-size: 2rem;
    color: #ff3d67;
}

.contact-footer {
    margin-top: 40px;
    padding-top: 20px;

    text-align: center;

    border-top: 1px solid rgba(255,255,255,.05);

    color: #9d9d9d;

    font-size: .9rem;
}