@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto:400,700&display=swap");

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

}

/* Inicio das variaveis do CSS de cores */
:root {
    --cor-primaria: #0B0F19;
    --cor-secao: #1E293B;
    --cor-texto: #f8fafc;
    --cor-destaque: rgb(56, 189, 248);
    --cor-detalhe: #334155;
}

/* fim das variaveis do CSS de cores */
/* Inicio do CSS da página */

/* Inicio Configurações iniciais*/
body {
    font-family: "Open Sans", sans-serif;
    background: var(--cor-primaria);
    color: var(--cor-texto);
    line-height: 1.5;
    font-size: 0.875rem;

}

a {
    text-decoration: none;
}

ul {
    list-style-type: none;
}

.container-nav {
    background: transparent;
    border-radius: 0.5rem;
    border-bottom: 1px solid rgba(56, 189, 248, 0.3);
    margin-bottom: 40px;

}

/* FIM Configurações iniciais*/

/* Inicio CSS navbar top*/
h1 {
    padding: 0.5rem 1rem;
    font-size: 1.5rem;
    transition: all 0.3s linear;
}

h1:hover {
    color: var(--cor-destaque);
}

.navegacao-cabecalho {
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;

}

.navegacao-botao {
    font-size: 1.5rem;
    color: #49a6e9;
    background: transparent;
    border-color: transparent;
    cursor: pointer;
    transition: all 0.3s linear;
}

.navegacao-botao:hover {
    color: var(--cor-texto);
    transform: rotate(90deg);

}

.nav-links {
    gap: 1.5rem;
}

.nav-links a {
    color: var(--cor-texto);
    font-size: 1rem;
    text-transform: capitalize;
    letter-spacing: 0.1rem;
    display: block;
    padding: 0.5rem 1rem;
    transition: all 0.3s linear;
}

.nav-links a:hover {

    background: var(--cor-detalhe);
    color: #49a6e9;
    padding-left: 1.5rem;
}


.nav-links {
    height: 0;
    overflow: hidden;
    transition: all 0.3s linear;

}

.mostrar-links {
    height: 10rem;

}


@media screen and (min-width:800px) {
    .container-nav {
        max-width: 1170px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem;

    }

    .navegacao-cabecalho {
        padding: 0;

    }

    .navegacao-botao {
        display: none;

    }

    .nav-links {
        height: auto;
        display: flex;
        align-items: center;
    }

    .nav-links a {
        padding: 0;
        margin: 0 0.5rem;

    }

    .nav-links a:hover {

        padding: 0;
        background: transparent;
    }

    /* O elemento só vira botão a partir de 800px de largura */
    .nav-links li:last-child a {
        padding: 8px 16px;
        background-color: var(--cor-destaque);
        color: var(--cor-texto);
        border-radius: 4px;
        margin-left: 0.5rem;
        /* Alinha o espaçamento com os outros itens */
        transition: opacity 0.3s linear;
    }

    /* Efeito de hover exclusivo para quando ele for um botão */
    .nav-links li:last-child a:hover {
        background-color: var(--cor-destaque);
        /* Mantém o fundo */
        opacity: 0.8;
        /* Dá um efeito visual de clique sutil */
        color: var(--cor-texto);
        /* Evita que o texto fique azul como os outros */
    }

}

/* Fim CSS navbar top*/

/* Inicio CSS seção hero parte principal */
section {
    margin-bottom: 40px;
}



.container-principal {
    max-width: 90vw;
    margin: 0 auto;
    font-family: "Roboto", sans-serif;
}

.secao-hero {
    place-items: center;
    margin-top: 30px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--cor-secao);
    position: relative;
    z-index: 2;
    /* Fica acima do vídeo e da imagem */

}



.hero-conteudo {
    border: 1px solid var(--cor-destaque);
    border-top-right-radius: 2rem;
    border-bottom-left-radius: 2rem;
    padding: 1.5rem 2rem;
    background: var(--cor-secao);
    box-shadow: 0 2px 10px var(--cor-primaria);
}

.hero-conteudo h2 {
    color: var(--cor-destaque);
    font-size: 1.5rem;
}

.hero-links {
    display: flex;
    background: transparent;
    padding: 0.5rem 1.5rem;
    margin-bottom: 30px;
    transition: all 0.3s linear;
    gap: 3rem;
    text-transform: capitalize;
}

.botao-hero {
    color: var(--cor-destaque);
    border: 1px solid;
    padding: 8px 16px;
    border-radius: 0.5rem;
    transition: all 0.3s linear;
    background: var(--cor-secao);
}

.botao-hero:hover {
    color: var(--cor-texto);
    background: var(--cor-destaque);
    transform: scale(1.05);
}


.hero-imagem {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 250px;
    /* tamanho máximo da imagem */
    height: auto;
    /* deixa a altura seguir a proporção */
    margin-top: 0;
}

.hero-imagem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* preenche sem distorcer */
    border-top-right-radius: 2rem;
    border-bottom-left-radius: 2rem;
    aspect-ratio: 1 / 1;
    image-rendering: auto;
    margin-top: 20px;

}


.secao-hero {
    position: relative;
    overflow: hidden;
    /* corta o vídeo nas bordas da seção */
    display: grid;
    grid-template-columns: 1fr 1fr;
    place-items: center;
    min-height: 20vh;
    margin-top: 40px;
    background: var(--cor-secao);
    /* fica como fallback atrás do vídeo */
}

.video-bg {
    position: absolute;
    inset: 0;
    /* top, right, bottom, left = 0 */
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.item-conteudo {
    position: relative;
    /* necessário para o z-index funcionar */
    z-index: 1;
}

.hero-icones {
    display: flex;
    font-size: 3rem;
    gap: 1rem;
    transform: translateY(-15px);
    /*Alinhamento dos icones com os botões */
}

.hero-icones a {
    text-decoration: none;
    color: var(--cor-texto);
    transition: all 0.3s linear;
}

.hero-icones a:hover {
    transform: scale(1.05);
    color: #cbd5e1;
}

.hero-icones a:active {
    color: var(--cor-destaque);
    transform: scale(0.98);
}

/* Fim CSS seção hero parte principal */

/* Inicio CSS seção Projetos */

.secao-projetos {
    display: block;
    background: var(--cor-secao);
}

/* Inicio Titulo da parte do projeto*/
.titulo-projetos {
    font-family: "Open Sans";
    letter-spacing: 1rem;
    padding: 1.5rem;
    font-size: 1.5rem;
    text-align: center;
    justify-content: center;
}

/* FIm Titulo da parte do projeto*/
.lista-projetos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* repete 3 vezes as colunas 1fr, para ficar na tela*/
    gap: 20px;
    /*vão entre as colunas*/
    text-align: center;
    justify-content: center;
    padding: 1rem;
}

.lista-projetos h3 {
    margin: 10px;
    color: var(--cor-destaque);
    font-family: "Roboto", sans-serif;
    padding-bottom: 1rem;
}

img {
    max-width: 100%;
    /* A imagem nunca ultrapassa a largura máxima do container pai */
    height: auto;
    display: block;
}

.card-projeto {
    width: 100%;
    border-radius: 0.5rem;
    background: var(--cor-primaria);
}

.card-projeto p {
    margin: 20px;
    text-align: left;
    padding: 10px;
    border-radius: 0.5rem;
    background: var(--cor-secao);

}

.card-projeto img {
    margin: 0 auto;
    width: 90%;
    max-width: 100%;
    height: 40vh;
    display: block;
    margin-bottom: 10px;
    border-radius: 0.5rem;

}


@media screen and (max-width:800px) {
    .lista-projetos {
        display: grid;

        grid-template-columns: 1fr;
    }
}

.card-projeto:hover {
    transform: scale(1.03);
    filter: brightness(1.45);
}


/* Fim seção Projetos */

/* Inicio seção sobre (sobre mim)*/
.secao-sobre {
    display: flex;
    background: var(--cor-primaria);
    text-align: center;
    border-radius: 0.5rem;
    border-top: 2px solid rgba(56, 189, 248, 0.3);
    border-bottom: 2px solid rgba(56, 189, 248, 0.3);
    gap: 100px;

}

.sobre {
    width: 50%;
    margin-top: 20px;

}

.sobre h3 {
    margin-bottom: 20px;
    font-size: 3rem;

}

.sobre p {
    border-radius: 0.5rem;
    background: var(--cor-secao);
    color: var(--cor-texto);
    font-size: 1rem;
    padding: 1rem;
    line-height: 2rem;
    max-width: 95%;
    min-width: 350px;
    margin: 0 auto;
    text-align: left;
    box-shadow: 0 1px 10px var(--cor-destaque);
}

@media screen and (max-width:800px) {
    .secao-sobre {
        display: block;
        width: 90vw;
        margin: 0 auto;
        font-size: 0.875rem;
    }

    .sobre {
        width: 90vw;
    }
}

/* fim seção sobre (sobre mim)*/

/* Inicio seção sobre (stacks)*/
/* Secção geral */
.secao-stacks {
    height: 35vh;
    width: 100%;
    text-align: center;
}



/* Título centralizado no topo */
.titulo-stacks {
    color: rgb(56, 189, 248);
    font-size: 3rem;
    margin-top: 25px;
    margin-bottom: 25px;
}

/* Contentor principal: FORÇA 3 COLUNAS */
.contentor-stacks {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
    max-width: 600px;
    /* Limite confortável para não espalhar em demasia */
    margin: 0 auto;
    /* Centraliza o bloco na página */
    gap: 20px;
}

/* Cada stack individual: FORÇA O ÍCONE EM CIMA E O TEXTO EM BAIXO */
.item-stack {
    display: flex;
    flex-direction: column;
    /* Coloca o texto por baixo do ícone */
    align-items: center;
    /* Centraliza horizontalmente */
    justify-content: center;
}

/* Estilo do ícone Font Awesome */
.item-stack {
    font-size: 3rem;
    color: #ffffff;
    margin-top: 5px;
    /* margin-bottom: 12px; */
    /* Afasta o texto do ícone */
}

/* Estilo do rótulo da tecnologia */
.item-stack p {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    transition: transform 0.2s ease, color 0.2s ease;
}

.item-stack:hover .stack-icon {
    transform: translateY(-4px);
    transform: scale(1.05);
    color: rgb(56, 189, 248);
    border-bottom: 1px solid rgba(56, 189, 258);
    border-radius: 1rem;
}

/* fim da seção stacks */

/* inicio da seção frameworks */
.tecnologias {
    font-size: 2rem;
    margin: 0 auto;
    padding: 0;
    margin-bottom: 40px;
}

.tecnologias h3 {
    font-size: 2rem;
    color: #ffffff;
    margin-bottom: 30px;
}

.frameworks {
    /* display: grid;
    grid-template-columns: repeat(4, 1fr); */
    display: flex;
    place-items: center;
    justify-content: center;
    align-items: flex-end;
    gap: 24px;
    flex-wrap: wrap;
    width: 100%;

    height: auto;


}

.item-fw {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 70px;
    font-size: 0.875rem;

}

.item-fw img {
    height: auto;
    width: 48px;
    height: 48px;
    object-fit: contain;
    display: block;
    padding: 10px;
    margin-bottom: 10px;
}

.item-fw span {
    display: block;
    text-align: center;
    white-space: nowrap;
    /* Impede quebras de linha indesejadas no nome */
}


.item-fw img:hover {
    transform: scale(1.1);
    color: var(--cor-destaque);
    border-bottom: 1px solid rgba(56, 189, 258);
    border-radius: 0.5rem;
}

/* fim da seção sobre& frameworks e tecnologias */

.status-msg {
  margin-top: 15px;
  font-size: 0.95rem;
  font-weight: 500;
  text-align: center;
}

.status-msg.sucesso {
  color: #38bdf8; /* Azul ciano de destaque */
}

.status-msg.erro {
  color: #f87171; /* Vermelho claro para alertar falha */
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* INICIO seção contato */
.secao-contato{
    display: block;
    border:1px solid;
    width: 90vw;
    height: auto;
    margin: 0 auto;
    background: var(--cor-secao);
    display: flex;
}

.texto-contato {
    margin: auto;
    text-align: center;
    width: 35vw;
}

.texto-contato h3{
    margin-top: 30px;
    font-size: 1.5rem;
    margin-bottom: 30px;
}

.texto-contato p {
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
}
/* Contentor da secção de contacto */
.secao-contato {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px;
  max-width: 960px;
  margin: 60px auto;
  padding: 32px 24px;
  box-sizing: border-box;
}

/* Lado esquerdo: Informação */
.contato-info {
  flex: 1;
}

.contato-titulo {
  font-size: 2.2rem;
  font-weight: 700;
  color: rgb(56, 189, 248); /* Azul ciano de destaque */
  margin: 0 0 16px 0;
}

.contato-subtitulo {
  font-size: 1.1rem;
  color: #cbd5e1;
  line-height: 1.6;
  margin: 0;
}

/* Lado direito: Formulário */
.contato-form {
  flex: 1.2;
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 70vw;
}

/* Cada bloco rótulo + campo */
.form-grupo {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-grupo label {
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: left;
}

/* Inputs e Textarea integrados ao tema escuro */
.form-grupo input,
.form-grupo textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid #334155;
  background-color: #0f172a; /* Fundo escuro azulado */
  color: #ffffff;
  font-size: 0.95rem;
  font-family: inherit;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Efeito de foco quando o utilizador clica para digitar */
.form-grupo input:focus,
.form-grupo textarea:focus {
  border-color: rgb(56, 189, 248);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
}

.form-grupo textarea {
  resize: vertical;
}

/* Botão de Envio */
.btn-enviar {
  align-self: flex-start;
  padding: 12px 28px;
  background-color: rgb(56, 189, 248);
  color: #0f172a;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.05s ease;
}

.btn-enviar:hover {
  background-color: rgb(14, 165, 233);
}

.btn-enviar:active {
  background-color: rgb(2, 132, 199);
  transform: scale(0.98);
}

/* Responsividade: para telas menores que 768px (celulares) empilha em 1 coluna */
@media (max-width: 768px) {
  .secao-contato {
    flex-direction: column;
    gap: 32px;
  }

  .btn-enviar {
    width: 100%;
  }
}

/* Container do rodapé */
.rodape {
  width: 100%;
  background-color: #0b1120; /* Fundo escuro sutilmente diferente da página */
  border-top: 1px solid #1e293b; /* Linha divisória sutil */
  padding: 30px 20px;
  box-sizing: border-box;
  text-align: center;
}

.rodape-conteudo {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Texto com o seu nome */
.rodape-texto {
  color: #94a3b8; /* Cinza claro suave */
  font-size: 0.95rem;
  margin: 0;
}

.rodape-texto strong {
  color: rgb(56, 189, 248); /* Destaque no seu nome em azul ciano */
  font-weight: 600;
}

.rodape-subtexto {
  color: #64748b; /* Cinza mais discreto */
  font-size: 0.85rem;
  margin: 0;
}

/* Links das redes sociais no rodapé */
.rodape-redes {
  display: flex;
  gap: 16px;
  margin-top: 8px;
}

.rodape-redes a {
  color: #94a3b8;
  font-size: 1.25rem;
  transition: color 0.2s ease, transform 0.2s ease;
  text-decoration: none;
}

.rodape-redes a:hover {
  color: rgb(56, 189, 248); /* Fica azul ciano ao passar o cursor */
  transform: translateY(-2px);
}

@media screen and (max-width: 768px) {  /* 1. O contentor do banner passa de linha para coluna vertical */
  .secao-hero { /* substitua pelo seletor do seu banner */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px 16px;
    height: auto; /* Permite que o banner cresça em altura para acolher todo o conteúdo */
  }

  /* 2. A fotografia fica no topo e totalmente visível */
  .hero-imagem, 
  .secao-hero img {
    order: 1; /* Força a foto a aparecer em primeiro */
    width: 140px;
    height: 140px;
    margin: 0 auto 20px auto;
  }

  /* 3. A caixa de texto de introdução fica no meio */
  .hero-conteudo {
    order: 2;
    width: 100%;
    max-width: 320px;
    margin-bottom: 20px;
  }

  /* 4. Contentor dos botões lado a lado ou empilhados */
  .item-conteudo {
    order: 3;
    display: flex;
    flex-direction: row;
    gap: 12px;
    justify-content: center;
    width: 100%;
    margin-bottom: 20px;
  }

  .hero-links a {
    font-size: 0.85rem;
    padding: 10px 14px;
    white-space: nowrap;
  }

  /* 5. Ícones de redes sociais centrados na base */
  .hero-icones{
    order: 4;
    position: static; /* Remove absolute se tiver sido utilizado */
    display: flex;
    justify-content: center;
    gap: 18px;
    width: 100%;
    margin-top: 10px;
  }
}