@import url("https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

:root{
 --fonte-principal: 'Raleway', sans-serif;

/* BACKGROUNDS */

--bg-principal: #030417;
--bg-navbar: rgba(15, 23, 42, 0.8);
--bg-card: #0F172A;


/* ROXOS */

--roxo-principal: #6D4AEB;
--roxo-secundario: #8E7CF4;
--roxo-escuro: #2517BE;


/* AZUIS */

--azul-principal: #58A4E3;
--azul-claro: #6B85ED;


/* GRADIENTES */

--gradiente-nome: linear-gradient(90deg, #58A4E3, #8E7CF4);
--gradiente-titulo: linear-gradient(180deg, #6B85ED, #6D4AEB);
--gradiente-botao: linear-gradient(90deg,#6D4AEB,#58A4E3);


/* TEXTO */

--texto-principal: #FFFFFF;
--texto-secundario: #CFCFF5;


/* EFEITOS */

--shadow-glow: 0 0 15px rgba(110,100,255,0.4);

}

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

body, html{   
    color: var(--preto);   
    margin: 0;
    padding: 0; 
    font-family: var(--fonte-principal);
    display: flex;
    flex-direction: column;
    min-height: 100vh;  
    scroll-behavior: smooth; 
    background: #030417;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background-attachment: fixed; 
    background-repeat: no-repeat;
    transition: background-image 0.5s; 
    scroll-behavior: smooth;
}


header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 10%;
    position:relative;
}

h1 {
  color:var(--bege-claro);
  display: inline-block;
  font-size: 2.4rem;
  text-align: center;
  font-family: var(--fonte-principal); 
}

/* CABEÇALHO/NAVBVAR */

.cabecalho{
    position: fixed;
    top:0;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 10%;
    backdrop-filter: blur(10px);
    background: var(--bg-navbar);
    z-index:1000;
}

.logo{
    font-size:1.6rem;
    font-weight:600;
    color:var(--azul-principal);
}

.logo img{
  height: 45px;
  width: 100%;
}

.nav-direita{
    display:flex;
    align-items:center;
    gap:35px;
}

.menu{
    display:flex;
    gap:40px;
}

.menu a{
    position:relative;
    text-decoration:none;
    color:var(--texto-principal);
    font-weight:500;
    transition:0.3s;
}

.menu a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-6px;
    width:0;
    height:2px;
    background: var(--gradiente-nome);
    transition:0.3s;
}

.menu a:hover::after{
    width:100%;
}

.menu a.active::after{
    width:100%;
}

.menu-toggle{
    display:none;
    font-size:1.8rem;
    color:white;
    cursor:pointer;
}

.btn-contato{
    background: var(--gradiente-botao);
    color:white;
    padding:10px 20px;
    border-radius:8px;
    text-decoration:none;
    font-weight:600;
    transition:0.3s;
}

.btn-contato:hover{
    transform:translateY(-3px);
    box-shadow: var(--shadow-glow);
}

 /* HOME */

.home{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;
    padding: 100px 10%;
    width: 100%;
    min-height: 100vh;
}

.descricao-home{
  display: flex;
  flex-direction: column;
  color: #fff;
  padding: 30px;
}

.conteudo-texto {
    max-width: 600px;
    text-align: left;
}

h1{
  font-size: 2.5rem;
  font-weight: 300;
  color: var(--texto-principal);
}

/* Gradiente do Nome */
.titulo-gradiente {
  display: block; /* Faz o nome ir para a linha de baixo se necessário */
    font-style: italic;
    font-weight: bold;
    background: linear-gradient(90deg, #58A4E3, #8E7CF4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Título "Desenvolvedora Web" */
.web {
    font-weight: 800;
    font-size: 1.5rem;
    margin-bottom: 10px;
    background: linear-gradient(180deg, #6B85ED, #6D4AEB);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.foto-container{
  width:280px;
  height: 280px;
  border-radius: 50%;
  padding: 10px 18px 8px 0px;
  background: #03064289;
  display: flex;
  justify-content: center;
  align-items: center;
}

.descricao{
    color: #cfcff5;
    font-size: 1.1rem;
    line-height: 1.6;
}

.info-container{
    max-width: 500px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}


/* Estilização dos botões */
.botoes-redes{
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 10px;
}

.btn-projetos{
    background: linear-gradient(90deg,#6D4AEB,#58A4E3);
    color: white;
    padding: 12px 28px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s;
}

.btn-projetos:hover{
    transform: translateY(-3px);
    box-shadow: 0 0 15px rgba(110,100,255,0.4);
}

/* Imagem */
.foto-container img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.links-container{
    display:flex;
    align-items:center;
    gap:25px;
    margin-top:15px;
}

.links-container i{
    font-size:2.2rem;
    color:#6D4AEB;
    transition:0.3s;
}

.links-container i:hover{
    color:#58A4E3;
    transform:translateY(-4px) scale(1.1);
}

/* TITULO PADRAO */

.titulo-secao{
    text-align: center;
    font-size: 2.4rem;
    color: white;
    margin-bottom: 70px;
    position: relative;
}

.titulo-secao span{
    background: linear-gradient(90deg,#58A4E3,#8E7CF4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.titulo-secao::after{
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  margin: 12px auto 0;
  background: linear-gradient(90deg,#58A4E3,#8E7CF4);
  border-radius: 5px;
}

/* SOBRE MIM */

.sobre{
    padding:120px 10%;
    text-align:center;
}



.sobre-container{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 80px;
    margin-top: 60px;
}

.sobre-ilustracao{
    display:flex;
    justify-content:center;
    align-items:center;
    height:350px;
    border-radius:20px;
    border:2px solid rgba(140,120,255,0.3);
}

.sobre-cards{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.card-sobre{
    background: linear-gradient(135deg,#17035e76 50%, #0b1c5e5b 0% );
    padding:25px 30px;
    border-radius:18px;
    color:#e7e9ff;
    opacity:0;
    transform:translateY(40px);
    transition: all 0.7s ease;
}

.card-sobre:hover{
    transform: translateY(-6px);
    box-shadow:0 10px 30px rgba(80,61,150,0.4);
}

.card-sobre h3{
  text-align: left;
    color:#ffffff;
    margin-bottom:10px;
}

.card-sobre p{
    color:#cfcff5;
    line-height:1.6;
}

.card-sobre:hover{
    transform:translateY(-8px);
    box-shadow:0 0 20px rgba(110,100,255,0.4);
}

.card-sobre.show{
    opacity:1;
    transform:translateY(0);
}

.card-sobre.show:hover  {
    opacity:1;
    transform:translateY(0);
    transform:translateY(-8px);
    box-shadow:0 0 20px rgba(110,100,255,0.4);
}

.sobre-ilustracao {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.carousel-wrap {
  position: relative;
  width: 220px;
  height: 300px;
  border-radius: 16px;
  overflow: hidden;
  background: #eee;
}

.carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.7s ease;
}

.carousel-slide.active {
  opacity: 1;
}

.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Botões de navegação */
.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.25);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 20px;
  color: #fff;
  cursor: pointer;
  line-height: 1;
  transition: background 0.2s;
  z-index: 10;
}

.nav-btn:hover {
  background: rgba(255, 255, 255, 0.45);
}

#prev { left: 8px; }
#next { right: 8px; }

/* Dots indicadores */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #bbb;
  cursor: pointer;
  transition: background 0.3s, width 0.3s;
}

.dot.active {
  background: #333;
  width: 18px;
  border-radius: 3px;
}

/* CONHECIMENTOS */
.card-conhecimento.front h3 span{
    color: var(--azul-principal);
}

.card-conhecimento.back h3 span{
    color: var(--roxo-principal);
}

.card-conhecimento.banco h3 span{
    color: var(--azul-claro);
}

.card-conhecimento.gestao h3 span{
    color: var(--roxo-secundario);
}

.card-conhecimento.ferramentas h3 span{
    color: var(--roxo-escuro);
}

.conhecimentos{
    padding:120px 10%;
    text-align:center;
}

.container-conhecimentos{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:30px;
}

.card-conhecimento{
    border:1.5px solid rgba(120,100,255,0.6);
    border-radius:20px;
    padding:30px;
    background:#060B26;     
    transition:0.3s;
}

.card-center{
    grid-column: 2 / 3;
    justify-content: center;
    align-items: center;
}

.card-conhecimento:hover{
    transform:translateY(-6px);
    box-shadow:0 0 25px rgba(120,100,255,0.3);
}

.card-conhecimento h3{
    color:white;
    margin-bottom:20px;
}

.card-conhecimento h3 span{
    color:#6D4AEB;
}

.tags{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    justify-content:center;
}

.tags span{
    border:1px solid rgba(255,255,255,0.3);
    padding:6px 14px;
    border-radius:20px;
    font-size:0.9rem;
    color:#e4e6ff;
    transition:0.3s;
}

.tags span:hover{
    background: linear-gradient(90deg,#6D4AEB,#58A4E3);
    border:none;
    transform:scale(1.05);
}

/* PROJETOS */

.carrossel-container{
    position:relative;
    display:flex;
    align-items:center;
    justify-content: center;
    max-width:1100px;
    margin:0 auto;
}


.viewport{
    overflow:hidden;
    width: 100%;
     
}

.carrossel{
    overflow:hidden;
    width:100%;
}

.carousel-wrap {
  width: 280px;
  height: 340px;
  border-radius: 20px;
  box-shadow: 0 0 30px rgba(109, 74, 235, 0.4); /* glow roxo igual ao restante do site */
}

.sobre-ilustracao {
  border: none; /* remover a borda quadrada de fora, o glow no carousel já basta */
}

.container-projetos{
    display:flex;
    gap:20px;
    transition: transform 0.5s;
}

.projetos{
    padding: 10px ;
    text-align:center;
}

.card-projeto{
    background:#050A30;
    border:1px solid rgba(100,100,255,0.4);
    border-radius:20px;
    padding:25px;
    text-align:left;
    /* min-width:300px; */
    flex: 0 0 calc((130% - 40px) / 3);
    height: auto;
    flex-shrink:0;
    /* transition:0.3s; */
}

.topo-card{
    height:120px; 
    border-radius:15px;
    overflow:hidden;
    margin-bottom:20px;
}

.topo-card img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.card-projeto:hover{
    /* transform:translateY(-8px); */
    box-shadow:0 0 25px rgba(120,100,255,0.3);
    z-index: 1000;
}

.card-projeto h3{
    color:white;
    margin-bottom:10px;
}

.card-projeto p{
    color:#cfcff5;
    font-size:0.95rem;
    line-height:1.5;
}

.tecnologias{
    margin-top:20px;
    padding:10px;
    border:1px solid rgba(120,100,255,0.4);
    border-radius:10px;
    color: #fff;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.links-projeto{
    display:flex;
    flex-direction: column;
    gap:10px;
    margin:10px 0;
}

.btn-demo{
    background:var(--azul-claro);
    color:#fff;
    margin-top:20px;
    padding: 14px;
    border-radius:18px;
    text-decoration:none;
    font-size:14px;
    transition:0.3s;
    text-align: center;
}

.btn-demo:hover{
    background:var(--roxo-secundario);
}

.btn-github{
    display:block;
    margin-top:20px;
    background:#ccc;
    text-align:center;
    padding:10px;
    border-radius:20px;
    color:#333;
    font-size:1.3rem;
    transition:0.3s;
}

.btn-github:hover{
    background:#6D4AEB;
    color:white;
}

.btn-prev, .btn-next{
    background: var(--bg-principal);
    border:none;
    color: var(--bg-principal);
    font-size:1.5rem;
    padding:10px;
    cursor:pointer;
    border-radius:60%;
    /* position:absolute; */
    z-index:10;
}

/* .btn-prev{ left:-50px; }
.btn-next{ right:-50px; }

.btn-prev, .btn-next {
  color: white;
  background: rgba(109, 74, 235, 0.3);
  border: 1px solid rgba(120,100,255,0.4);
}
.btn-prev:hover, .btn-next:hover {
  background: var(--roxo-principal);
} */

.icons i{
    margin:10px;
    font-size:1.5rem;    
}

i {
    color: var(--azul-principal);
}

.icons i{
    font-size:1.5rem;
    margin-right:10px;
    transition:0.3s;
}

.icons i:hover{
    transform:scale(1.2);
}


/* SOFT SKILLS */

.soft-skills{
    padding:120px 10%;
    text-align:center;
}

.container-soft{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
    margin-top:40px;
}

.container-soft{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
    margin-top:40px;
}

.card-soft{
    background:#050A30;
    border:1px solid rgba(120,100,255,0.4);
    border-radius:18px;

    padding:25px;
    text-align:left;

    transition:0.3s;
}

.card-soft:hover{
    transform:translateY(-6px);
    box-shadow:0 0 20px rgba(120,100,255,0.3);
}

.card-soft:nth-child(1) .icone i{
    color:#00A3FF;
}

.card-soft:nth-child(2) .icone i{
    color:#6D4AEB;
}

.card-soft:nth-child(3) .icone i{
    color:#A855F7;
}

.card-soft:nth-child(4) .icone i{
    color:#3B82F6;
}

.card-soft h3{
    color:white;
    margin-bottom:10px;
}

.card-soft p{
    color:#cfcff5;
    font-size:0.9rem;
    line-height:1.5;
}


.icone{
    font-size:1.6rem;
    margin-bottom:15px;
}

/* JORNADA */
.timeline{
    padding:120px 10%;
    text-align:center;
}

.timeline-container{
    position:relative;
    max-width:800px;
    margin:50px auto;
}

.timeline-container::before{
    content:"";
    position:absolute;
    left:50%;
    top:0;
    width:3px;
    height:100%;
    background:linear-gradient(to bottom, #6a5cff, #00c6ff);
    transform:translateX(-50%);
}

.timeline-item{
    position:relative;
    width:50%;
    padding:20px;
}

.timeline-item:nth-child(odd){
    left:0;
    text-align:right;
}

.timeline-item:nth-child(even){
    left:50%;
    text-align:left;
}

.dot{
    position:absolute;
    top:20px;

    width:15px;
    height:15px;

    background:#6D4AEB;
    border-radius:50%;

    box-shadow:0 0 10px #6D4AEB;
}

.dot { background: rgba(255,255,255,0.3); }
.dot.active { background: var(--roxo-principal); width: 18px; }

.timeline-item:nth-child(odd) .dot{
    right:-8px;
}

.timeline-item:nth-child(even) .dot{
    left:-8px;
}

.content{
    background:#050A30;
    border:1px solid rgba(120,100,255,0.4);
    padding:20px;
    border-radius:15px;
}

.content h3{
    color: var(--roxo-principal);
}

.content p {
    color: #fff;
}


/* CONTATO */

.contato{
    padding:120px 10%;
    text-align:center;
}

.container-contato{
    display:flex;
    justify-content:center;
    gap:60px;
    margin-top:50px;
    flex-wrap:wrap;
}

.info-contato{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.card-contato{
    display:flex;
    align-items:center;
    gap:15px;

    background:#050A30;
    border:1px solid rgba(120,100,255,0.4);

    padding:15px 20px;
    border-radius:15px;

    transition:0.3s;
}

.card-contato:hover{
    transform:translateY(-5px);
    box-shadow:0 0 20px rgba(120,100,255,0.3);
}

.card-contato i{
    font-size:1.4rem;
    color:#6D4AEB;
}

.card-contato h4{
    color:white;
    margin-bottom:5px;
}

.card-contato p{
    color:#cfcff5;
    font-size:0.9rem;
}

.form-contato{
    background:#050A30;
    border:1px solid rgba(120,100,255,0.4);
    border-radius:20px;

    padding:30px;
    width:320px;
}

.form-contato h3{
    color:white;
    margin-bottom:20px;
}

.form-contato form{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.form-contato label{
    color:#cfcff5;
    font-size:0.85rem;
    text-align:left;
}


.form-contato input,
.form-contato textarea{
    background:#0B0F4A;
    border:none;
    border-radius:10px;

    padding:10px;
    color:white;

    outline:none;
}

.form-contato textarea{
    height:100px;
    resize:none;
}

.form-contato button{
    margin-top:10px;
    padding:10px;

    border:none;
    border-radius:20px;

    background:#6D4AEB;
    color:white;

    cursor:pointer;
    transition:0.3s;
}

.form-contato button:hover{
    background:#5a3ed1;
}

.cursor{
    animation:piscando 1s infinite;
}

@keyframes piscando{
    0%,50%,100%{opacity:1;}
    25%,75%{opacity:0;}
}

/* FOOTER  */
.footer{
    background:#03071f;
    padding:60px 10% 20px;
    border-top:1px solid rgba(120,100,255,0.2);
}

.container-footer{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:40px;
}

.container-footer{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:40px;
}

.footer-left h2{
    color:#6D4AEB;
    margin-bottom:10px;
}

.footer-left p{
    color:#cfcff5;
    max-width:300px;
    font-size:0.9rem;
}

.footer-links h3{
    color:white;
    margin-bottom:15px;
}

.footer-links ul{
    list-style:none;
    padding:0;
}

.footer-links li{
    margin-bottom:8px;
}

.footer-links a{
    text-decoration:none;
    color:#cfcff5;
    font-size:0.9rem;
    transition:0.3s;
}

.footer-links a:hover{
    color:#6D4AEB;
}

.footer-social h3{
    color:white;
    margin-bottom:15px;
}

.icons-social{
    display:flex;
    gap:15px;
}

.icons-social a{
    width:40px;
    height:40px;

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

    border-radius:50%;
    background:#050A30;

    color:white;
    font-size:1.2rem;

    transition:0.3s;
}

.icons-social a:hover{
    background:#6D4AEB;
    transform:translateY(-4px);
    box-shadow:0 0 15px rgba(120,100,255,0.5);
}

.footer-bottom{
    text-align:center;
    margin-top:40px;
    border-top:1px solid rgba(120,100,255,0.2);
    padding-top:15px;
}

.footer-bottom p{
    color:#aaa;
    font-size:0.8rem;
}


@media (max-width: 900px){

    .container-conhecimentos{
        grid-template-columns:1fr;
    }

    .card-center{
        grid-column:auto;
    }

    .container-projetos{
        grid-template-columns:1fr;
    }

}

@media (max-width:1024px){


    .menu{
    position:absolute;
    top:80px;
    right:20px;
    background:#050A30;
    border:1px solid rgba(120,100,255,0.4);
    border-radius:15px;
    padding:20px;
    flex-direction:column;
    gap:15px;
    width:200px;
    display:none; 
    }

    .menu.active{
        display:flex; 
    }

    .menu-toggle{
        display:block;
    }


    .home{
        gap:40px;
        padding:120px 5%;
        min-height: 50vh;
    }

    .sobre{
        padding:120px 5%;
    }

    .sobre-container{
        gap:40px;
    }

@media (max-width:1024px){

.projetos{
    padding:100px 5%;
}

/* container dos cards */
.container-projetos{
    grid-template-columns:repeat(2, 1fr);
    gap:25px;
}

/* cards mais equilibrados */
.card-projeto{
    padding:20px;
}

/* texto mais confortável */
.card-projeto p{
    font-size:0.9rem;
}

/* tecnologias mais organizadas */
.tecnologias{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
}

/* botão github mais bonito */
.btn-github{
    padding:12px;
    border-radius:15px;
}

}
    

}


@media (max-width:768px) {

    .btn-contato{
        display:none; /* opcional */
    }

    /* HOME */

    .home{
        flex-direction:column;
        text-align:center;
        gap:40px;
    }

    .info-container{
        align-items:center;
    }

    .conteudo-texto{
        text-align:center;
    }

    .foto-container{
        width:220px;
        height:220px;
    }

    /* TEXTO */

    h1{
        font-size:2rem;
    }

        
    .titulo-secao{
        font-size:2rem;
    }

    .foto-container{
        width:180px;
        height:180px;
    }

    .card-sobre{
        padding:20px;
    }

    .web{
        font-size:1.2rem;
    }

    /* BOTÕES */

    .botoes-redes{
        flex-direction:column;
        gap:15px;
    }

    .links-container{
        justify-content:center;
    }

    /* SOBRE */

    .sobre-container{
        grid-template-columns:1fr;
        text-align:center;
    }

    .sobre-ilustracao{
        height:250px;
    }

    .sobre-cards{
        align-items:center;
    }

    .card-sobre{
        max-width:90%;
    }
    .container-contato{
        flex-direction:column;
        align-items:center;
    }

    .form-contato{
        width:100%;
        max-width:350px;
    }

    .container-footer{
    flex-direction:column;
    align-items:center;
    text-align:center;
    }

    .footer-left p{
        max-width:100%;
    }

    .timeline-container::before{
    left:10px;
}

.timeline-item{
    width:100%;
    left:0 !important;
    text-align:left;
    padding-left:30px;
}

.dot{
    left:0 !important;
}

}


@media (max-width:1000px){
    .container-soft{
        grid-template-columns:repeat(2,1fr);
    }
}

@media (max-width:600px){
    .container-soft{
        grid-template-columns:1fr;
    }
}