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

body{
  margin:0;
  font-family:'Montserrat', sans-serif;
  line-height:1.4;
  overflow-x:hidden;
}

/* título */
.portfolio-title{
  font-family:'Montserrat', serif;
  font-size:9em;
  margin:0;
  line-height:1;
  display: inline-block;
  animation: leve-pulo 2s infinite alternate ease-in-out;
}

@keyframes leve-pulo {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-4px); } /* pulinho suave */
  100% { transform: translateY(0); }
}

.port-text{
  color:#f5498b;
  text-transform:uppercase;
  letter-spacing:-5px;
}

.folio-text{
  font-family:'Times New Roman', serif;
  color:#FFB6C1;
  font-weight:normal;
  font-style:italic;
}

/* header */
.main-header{
  background-color:#FFFFFF;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  position:relative;
  overflow:hidden;
}

.header-content{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  z-index:10;
  max-height:80vh;
}

.header-info{
  position:absolute;
  bottom:30px;
  left:50%;
  transform:translateX(-50%);
  width:100%;
  display:flex;
  justify-content:space-between;
  padding:0 40px;
  box-sizing:border-box;
  color: #333333;
  font-size:1.2em;
  z-index:100;
  opacity:0;
  transform:translateX(-50%) translateY(24px);
  transition:opacity .6s ease, transform .6s ease;
}

/* brilhos */
.brilhos-container-anchor{
  position:relative;
  width:100%;
  height:0;
  z-index:10;
}

.brilho-decorativo{
  position:absolute;
  width:60px;
  height:auto;
  z-index:15;
  opacity:.8;
  animation:pulsoBrilho 2s infinite alternate ease-in-out;
}

.brilho-top-left{
  top:50px;
  left:-60px;
  animation-delay:.2s;
}

.brilho-bottom-right{
  top:35px;
  right:-35px;
  animation-delay:.5s;
}

@keyframes pulsoBrilho{
  0%{transform:scale(1);opacity:.8}
  50%{transform:scale(1.05);opacity:1}
  100%{transform:scale(1);opacity:.8}
}

/* aura do mouse */
.mouse-aura{
  position:absolute;
  width:1000px;
  height:1000px;
  border-radius:50%;
  background:radial-gradient(circle at center, rgba(255,0,102,0.192) 0%, rgba(255,255,255,0) 60%);
  filter:blur(80px);
  top:0;
  left:0;
  opacity:0;
  pointer-events:none;
  transition:opacity .5s ease, transform .12s linear;
  z-index:5;
}

/* responsividade */
@media (max-width:768px){
  .portfolio-title{
    font-size:7em;
    letter-spacing:-3px;
  }
  .port-text{display:block;text-align:center}
  .folio-text{display:block;text-align:center;margin-top:-10px}
  .header-info{
    flex-direction:row;
    justify-content:space-between;
    position:absolute;
    bottom:30px;
    left:50%;
    transform:translateX(-50%);
    width:100%;
    padding:0 10px;
    font-size:.8em;
    z-index:15;
  }
  .brilho-decorativo{width:35px;opacity:.5}
  .brilho-top-left{top:30px;left:-30px}
  .brilho-bottom-right{top:150px;right:0}
  .mouse-aura{width:600px;height:600px;filter:blur(50px)}
}

@media (min-width:769px) and (max-width:900px){
  .brilho-decorativo{width:50px;opacity:.7}
  .brilho-top-left{top:50px;left:-50px}
  .brilho-bottom-right{top:50px;right:-25px}
}

/* frase de impacto + triângulo */
.frase-impacto{
  background-color:#f5498b;
  color:#ffccd2;
  padding:60px 20px;
  text-align:center;
  font-family:'Times New Roman', serif;
  font-size:2.5em;
  font-weight:bold;
  font-style:italic;
}

.frase-impacto p{max-width:800px;margin:0 auto}

.triangle{
  position:relative;
  background:#f5498b;
  height:1vh;
}

.triangle::after{
  content:'';
  position:absolute;
  bottom:0;
  width:0;
  height:0;
  border-style:solid;
  border-width:45px 45px 0 45px;
  border-color:#f5498b transparent transparent transparent;
  left:50%;
  transform:translateX(-50%) translateY(100%);
}

/* sobre mim */
.sobre-mim{
  background-color:#FCAC39;
  padding:60px 0 20px 0;
}

.container-sobre-mim{
  display:flex;
  align-items:flex-start;
  max-width:1200px;
  margin:0 auto;
  gap:40px;
  padding:0px 20px;
}

.foto-perfil{
  transform:translateY(-80px);
  max-width:550px;
  height:550px;
  flex-shrink:0;
  position:relative;
  margin-top: 40px;
}

.foto-perfil img{width:100%;transform:translateY(-80px)}

.fatos-imagens-container{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  pointer-events:none;
}

.fato-imagem{
  position:absolute;
  width:180px !important;
  height:auto;
  opacity:0;
  transition:opacity .8s ease-out, transform .8s ease-out;
}

#fato-img-1{top:-30px;left:-100px;transform:rotate(-12deg) scale(.9)}
#fato-img-2{top:150px;left:-150px;transform:rotate(5deg) scale(1)}
#fato-img-3{top:300px;left:-140px;transform:rotate(-5deg) scale(.95)}
#fato-img-4{bottom:50px;left:-100px;transform:rotate(10deg) scale(.95)}

/* estado inicial para fatos (JS adiciona/remove) */
.hidden{opacity:0;transform:translateY(20px) rotate(0deg)}
.visible{opacity:1;transition:opacity .6s ease}

/* caixas de texto */
.texto-com-fundo{
  color:#333333;
  padding:20px 25px;
  border-radius:15px;
  margin-top:15px;
  margin-bottom:25px;
  line-height:1.4;
  font-weight:500;
  background-color:rgba(255,255,255,.2);
  border-style:solid;
  border-color:rgba(255,255,255,.4);
}

.texto-legivel-bg p{margin:0}

.texto-sobre-mim{
  width:50%;
  font-size:1.1em;
  text-align:left;
  padding-top:50px;
}

.texto-sobre-mim h1{
  font-size:3em;
  margin-bottom:5px;
  color:#ffffff;
}

@media (max-width:900px){
  .container-sobre-mim{flex-direction:column;align-items:center;gap:10px}
  .foto-perfil{width:90%;max-width:500px;transform:none;margin:0 auto;order:2;height:auto;display:flex;flex-direction:column;align-items:center;gap:15px}
  .foto-perfil img{width:100%;transform:none;order:2}
  .fatos-imagens-container{order:1;display:flex;flex-wrap:wrap;justify-content:center;gap:15px;position:static;width:100%;max-width:255px;margin:0 auto;height:auto}
  .fatos-mobile-bottom{order:3;display:flex !important;width:100%;max-width:255px;margin:15px auto 0 auto;justify-content:center;gap:15px}
  .texto-sobre-mim{width:90%;max-width:600px;padding-top:20px;order:4;text-align:center}
  .fato-imagem{position:static;width:120px !important;max-width:120px;height:auto;transform:none !important;opacity:1;margin:0}
  .texto-bg-transparente{text-align:left}
  .social-links{text-align:center;display:flex;justify-content:center;margin-top:25px}
}

/* garante que o container móvel esteja escondido no desktop */
.fatos-mobile-bottom{display:none}

.social-links{display:flex;justify-content:center;gap:20px}
.social-links a{color:#FFFFFF;text-decoration:none;font-weight:bold;transition:color .3s ease;margin-bottom:20px}
.social-links a:hover{color:#FF1493}

/* habilidades / carrossel */
.habilidades-carrossel{
  background-color:#f59151;
  color:#FFFFFF;
  padding:80px 20px;
  text-align:center;
  position:relative;
}

.habilidades-carrossel h2{font-size:2.5em;margin-bottom:30px;color:#FFFFFF}

.container-carrossel{max-width:900px;margin:0 auto;position:relative}

.caixa-habilidades{
  background-color:#FFFFFF;
  color:#333333;
  padding:30px;
  border-radius:20px;
  box-shadow:0 5px 20px rgba(0,0,0,.1);
  position:relative;
  overflow:hidden;
}

.carrossel-wrapper{display:flex;transition:transform .5s ease-in-out}
.carrossel-slide{flex:0 0 100%;box-sizing:border-box;padding:10px;text-align:center}

/* botões do carrossel */
.carrossel-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background-color:rgba(255,255,255,.2);
  color:rgb(236,28,173);
  border:none;
  cursor:pointer;
  padding:10px 15px;
  font-size:1.5em;
  border-radius:50%;
  z-index:2;
  transition:background-color .3s;
}

.carrossel-btn:hover{background-color:rgba(255,255,255,.5)}
.prev-btn{left:10px}
.next-btn{right:10px}

/* títulos e textos do slide */
.slide-titulo-principal{font-size:1.8em;color:#f5498b;margin-bottom:5px}
.slide-subtitulo{font-size:1.2em;font-weight:bold;color:#FF7F50;margin-bottom:20px}
.slide-descricao{font-size:1em;line-height:1.6;max-width:600px;margin:0 auto}

/* ícones */
.stacks-icones{display:flex;justify-content:center;gap:15px;margin-top:25px}
.stacks-icones img{width:45px;height:45px;transition:transform .3s ease}
.stacks-icones img:hover{transform:translateY(-5px)}

@media (max-width:768px){
    /* Ajusta a seção e o container para evitar que o carrossel encoste nas laterais */
    .habilidades-carrossel {
        padding: 40px 0; /* Um pouco menos de padding vertical para economizar espaço */
    }
    .container-carrossel {
        padding: 0 10px; /* Pouco padding nas laterais para que a caixa branca possa se estender mais */
    }
    
    /* CONTEÚDO DO SLIDE: CAIXA BRANCA */
    .caixa-habilidades {
        /* Aumenta o padding interno para dar mais "ar" ao texto. 
           O padding-bottom é maior para dar espaço aos botões. */
        padding: 30px 25px 40px 25px; 
    }

    /* TITULOS E DESCRICOES DENTRO DO SLIDE */
    .slide-titulo-principal{
        font-size: 1.3em; /* Reduz um pouco mais o título principal */
        margin-bottom: 8px; /* Ajusta a margem para evitar aperto */
    }
    .slide-subtitulo{
        font-size: 1em; /* Tamanho padrão */
    }
    .slide-descricao{
        font-size: 0.9em; /* Reduz levemente o texto de descrição para caber */
    }
    
    /* ÍCONES DAS STACKS */
    .stacks-icones {
        justify-content: center; 
        gap: 8px; /* Reduz ainda mais o espaço entre ícones para economizar horizontal */
        margin-top: 15px; /* Ajusta margem superior */
    }
    .stacks-icones img{
        width: 32px; /* Reduz o tamanho dos ícones */
        height: 32px;
    }

    /* BOTÕES DE NAVEGAÇÃO */
    .carrossel-btn{
        top:auto;
        bottom: 20px; /* Move para a parte inferior da caixa branca, com um bom espaço */
        transform:none; 
        /* Aumenta a área de toque e visibilidade */
        padding: 10px 16px; 
        font-size: 1.5em; 
        background-color: rgba(255, 255, 255, 0.7); /* Mais sólido para se destacar */
    }
    
    .prev-btn{
        left: 30px; /* Posição à esquerda, dentro da caixa */
        /* Para o ícone do GitHub e CodePen */
        color:#f5498b; 
    }
    .next-btn{
        right: 30px; /* Posição à direita, dentro da caixa */
        color:#f5498b;
    }
}

/* efeito papel rasgado (PNG) */
.habilidades-carrossel::after{
  content:"";
  position:absolute;
  bottom:-90px;
  left:0;
  width:100%;
  height:100px;
  background:url("img/smallrip.png") bottom;
  background-size:cover;
  background-repeat:no-repeat top center;
  z-index:1;
}

/* projetos galeria */
.projetos-galeria{padding:120px 20px;background: transparent;text-align:center}
.projetos-galeria h2{font-size:2.5em;color:#f5498b;margin-bottom:10px}
.subtitulo-projetos{max-width:800px;margin:0 auto 50px;color:#555;font-size:1.2em}
.galeria-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}

/* item galeria */
.item-galeria{position:relative;overflow:hidden;display:block;text-decoration:none;cursor:pointer}
.item-galeria img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease-in-out}
.item-galeria:hover img{transform:scale(1.05)}
.hover-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.7);color:#FFFFFF;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;opacity:0;transition:opacity .3s ease-in-out}
.item-galeria:hover .hover-overlay{opacity:1}
.hover-overlay h3{margin:0;font-size:1.5em;font-weight:bold}
.hover-overlay p{margin:10px 0 0;font-size:1em}

@media (max-width:768px){
  .galeria-grid{grid-template-columns:1fr;gap:20px}
}

.ver-mais-btn-container{text-align:center;margin-bottom:70px}
.btn-ver-mais{display:inline-flex;align-items:center;background:linear-gradient(135deg,#FF7F50,#f5498b);gap:8px;color:#FFFFFF;padding:15px 30px;border-radius:50px;text-decoration:none;font-weight:bold;font-size:1.1em;transition:transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;}
.btn-ver-mais .github-icon{width:30px;height:30px;fill:#FFFFFF}
.btn-ver-mais:hover{transform:translateY(-4px);box-shadow:0 8px 16px rgba(0,0,0,0.15),0 0 5px rgba(245,73,139,.2)}

/* contato */
.contato{
  background:linear-gradient(135deg,#FF7F50,#f5498b);
  color:#FFFFFF;
  padding:80px 20px;
  text-align:center;
}
.contato h2{font-size:2.5em;margin-bottom:20px;opacity:0;transform:translateY(20px);transition:opacity .8s ease, transform .8s ease}
.contato p{max-width:600px;margin:0 auto 40px}
.btn-contato{display:inline-block;background-color:#FFFFFF;color:#FF7F50;padding:15px 30px;border-radius:50px;text-decoration:none;font-weight:bold;transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);}
.btn-contato:hover{transform:translateY(-3px);box-shadow:0 4px 10px rgba(255,255,255,.8),0 0 30px rgba(255,255,255,.5)}

/* rodapé */
.main-footer{background-color:#333333;color:#999999;text-align:center;padding:20px}
.main-footer p{margin:0}

/* ===== classes utilitárias para animações (use nos elementos HTML) ===== */
.fade-in{opacity:0;transform:translateY(20px);transition:opacity .8s ease-out, transform .8s ease-out}
.fade-in.visible{opacity:1;transform:translateY(0)}

.slide-left{opacity:0;transform:translateX(-60px);transition:opacity .9s ease-out, transform .9s ease-out}
.slide-left.visible{opacity:1;transform:translateX(0)}

.slide-right{opacity:0;transform:translateX(60px);transition:opacity .9s ease-out, transform .9s ease-out}
.slide-right.visible{opacity:1;transform:translateX(0)}

.fade-up{opacity:0;transform:translateY(30px);transition:opacity 1s ease-out, transform 1s ease-out}
.fade-up.visible{opacity:1;transform:translateY(0)}

.header-info.visible{opacity:1;transform:translateX(-50%) translateY(0)}

/* dica de acessibilidade visual para foco no botão */
.btn-contato:focus{outline:3px solid rgba(255,255,255,.3);outline-offset:4px}

/* ==========================================================================
   BOTÃO VOLTAR AO TOPO (CORRIGIDO: Redondo e Transparente com Sombra)
   ========================================================================== */
#backToTopBtn {
    /* Posição Fixa na tela */
    position: fixed; 
    bottom: 30px; 
    right: 30px; 
    
    /* GARANTE A FORMA REDONDA */
    width: 50px; /* Largura fixa */
    height: 50px; /* Altura fixa */
    
    /* Estilização Transparente */
    background-color: rgba(255, 255, 255, 0.4); /* Fundo branco e transparente */
    color: #ffffff; /* Cor do ícone rosa */
    border: none;
    cursor: pointer;
    
    /* Centraliza o ícone */
    display: flex;
    justify-content: center;
    align-items: center;
    
    border-radius: 50%; /* Faz o botão ser circular */
    font-size: 1.5em;
    
    /* Sombra e Efeito Flutuante */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Sombra mais suave */
    
    /* Oculta por padrão e transição */
    opacity: 0; 
    visibility: hidden; 
    transition: all 0.3s ease; /* Transição para todos os efeitos */
    z-index: 1000; 
}

/* Estado visível (adicionado via JavaScript) */
#backToTopBtn.show {
    opacity: 1;
    visibility: visible;
}

/* Ajuste no Hover/Focus */
#backToTopBtn:hover,
#backToTopBtn:focus {
    /* Aumenta a opacidade e a sombra no hover */
    background-color: #f5498b; 
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px); /* Efeito sutil de "pulo" */
    outline: none;
}

/* Responsividade: Ajuste no mobile */
@media (max-width: 768px) {
    #backToTopBtn {
        bottom: 10px;
        right: 20px;
        width: 40px; /* Reduz o tamanho no mobile */
        height: 40px;
        font-size: 1.2em;
    }
}

/* ==========================================================================
   INDICADOR DE SCROLL (Seta Chevron Final)
   ========================================================================== */
.scroll-indicator {
    position: absolute;
    bottom: 50px; 
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    
    /* Animação que faz o pulso para o visual flutuante */
    animation: simple-bounce 1.5s infinite; 
}

/* Animação: Faz o indicador inteiro pular suavemente */
@keyframes simple-bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0) translateX(-50%);
    }
    40% {
        transform: translateY(-8px) translateX(-50%); 
    }
    60% {
        transform: translateY(-4px) translateX(-50%); 
    }
}

/* Container da Seta */
.chevron-arrow {
    display: block;
    width: 25px; /* Largura do ícone */
    height: 30px; /* Altura do ícone */
    position: relative;
}

/* Desenha a Seta Principal (o V) usando o pseudoelemento :after */
.chevron-arrow:after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    
    /* Define a forma e a cor */
    width: 15px; 
    height: 15px; 
    border-bottom: 3px solid var(--color-pink-vibrant); 
    border-right: 3px solid var(--color-pink-vibrant); 
    
    /* Gira e centraliza para formar o V */
    transform: translateX(-50%) rotate(45deg);
    
    /* Animação de descida */
    animation: arrow-down 1.5s infinite;
}

/* Adiciona a SEGUNDA seta para o efeito de cascata (Duplicação Visual) */
.chevron-arrow:before {
    content: '';
    position: absolute;
    top: 5px; /* Posicionada logo abaixo da primeira */
    left: 50%;
    
    width: 15px; 
    height: 15px; 
    border-bottom: 3px solid #f5498b; 
    border-right: 3px solid #f5498b; 
    
    transform: translateX(-50%) rotate(45deg);
    
    /* Aplica a mesma animação com um atraso */
    animation: arrow-down 1.5s infinite 0.2s; /* 0.2s de atraso */
}

/* Animação: Faz a seta descer e reaparecer */
@keyframes arrow-down {
    0% {
        opacity: 0;
        transform: translate(-50%, -10px) rotate(45deg); /* Começa 10px acima */
    }
    50% {
        opacity: 1;
        transform: translate(-50%, 0) rotate(45deg); /* Aparece na posição normal */
    }
    100% {
        opacity: 0;
        transform: translate(-50%, 10px) rotate(45deg); /* Desce 10px e some */
    }
}


/* Responsividade (Ajusta a posição no mobile) */
@media (max-width: 768px) {
    .scroll-indicator {
        bottom: 20px; 
    }
    .chevron-arrow {
        width: 15px;
        height: 25px;
    }
    .chevron-arrow:after,
    .chevron-arrow:before {
        width: 12px;
        height: 12px;
        border-bottom: 2px solid #f5498b; 
        border-right: 2px solid #f5498b; 
    }
}