* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  scroll-behavior: smooth;
}

:root {
  --cor-fundo: #0B1C2C;
  --cor-fundo-secundario: #132A40;

  --cor-destaque: #D4A851;
  --cor-destaque-hover: #E3B85A;

  --cor-texto: #FFFFFF;
  --cor-texto-secundario: #BFCAD3;
  --cor-texto-destaque: #D4A851;

  --cor-borda: #223A52;
  --cor-borda-dourada: #D4A851;

  --cor-card: #12263A;
  --cor-card-hover: #1B3550;

  --cor-link: #E0B656;
  --cor-link-hover: #FFD26A;
}

/* ======== ESTILO GERAL ======== */
body {
  background-color: var(--cor-fundo);
  color: var(--cor-texto);
}

/* ======== NAVBAR ESTILO JASPEN ======== */
header {
  background-color: #0b1626;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 80px;
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid var(--cor-borda);
}

/* ======== ESTILO DA NOVA LOGO JASPEN ======== */
/* O Contêiner da Logo (o link <a>) */
.logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    justify-content: center;
    padding-top: 5px; /* Pequeno ajuste para o espaço geral se necessário */
}

/* O Título Principal: "JASPEN" */
.logo-title {
    font-family: 'Cinzel', serif;
    font-size: 45px;
    font-weight: 400; 
    letter-spacing: 5px; 
    margin: 0;
    padding: 0;
    line-height: 1;

    /* ======= AZUL METÁLICO VIBRANTE (Ajustado) ======= */
    color: transparent; 
    
    /* Mais azul no gradiente e mais áreas de branco/reflexo */
    background: linear-gradient(to bottom, 
        #FFFFFF,      /* Reflexo Branco Forte (Topo) */
        #d1e5ff 10%,  /* Azul Claro */
        #6d859e 40%,  /* Azul Médio */
        #3b5266 50%,  /* Azul Escuro (Sombra/Profundidade) */
        #6d859e 60%, 
        #d1e5ff 90%
    );
    
    -webkit-background-clip: text; 
    background-clip: text; 

    /* Contorno para definir a forma */
    -webkit-text-stroke: 0.5px #1a324a; 

    /* Sombras para brilho e relevo */
    text-shadow:
        0 0 8px rgba(255, 255, 255, 0.4), /* Brilho forte ao redor */
        1px 1px 4px rgba(0, 0, 0, 0.7);   /* Sombra para profundidade */
}

/* O Divisor (a linha com o detalhe dourado) */
.logo-divider {
    display: block;
    width: 150px;             
    height: 1px;              
    background: linear-gradient(to right, transparent, rgba(224, 229, 234, 0.3) 10%, rgba(224, 229, 234, 0.3) 90%, transparent); /* Linha sutil com transparência nas pontas */
    margin: 10px 0 0;            /* Margem ajustada: cima, lados, baixo */
    position: relative;       
}

/* O detalhe dourado no meio do divisor */
.logo-divider::before,
.logo-divider::after {
    content: '';
    display: block;
    position: absolute;
    width: 24px; /* Aumentei um pouco o X */
    height: 4px; /* Deixei o X mais grosso */
    top: -2px; /* Ajustei a posição vertical do X */
    
    /* Gradiente Dourado (igual ao da imagem) */
    background: linear-gradient(to right, #f7d77b, #c79a3a, #f7d77b);
    
    /* Sombra do X para dar profundidade */
    box-shadow: 0 0 8px rgba(247, 215, 123, 0.6); 
}

.logo-divider::before {
    left: 50%;
    transform: translateX(-50%) rotate(45deg); 
}

.logo-divider::after {
    left: 50%;
    transform: translateX(-50%) rotate(-45deg); 
}
/* O Subtítulo: "Conexões Comerciais" */
.logo-subtitle {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;         
    font-size: 11px;          /* Levemente maior */
    letter-spacing: 2px;      /* Mais espaçamento */
    text-transform: uppercase;
    margin-top: 10px;         /* Mais espaço entre o X e o subtítulo */
    padding: 0;
    line-height: 1;

    /* Cor Dourada (usando gradiente para brilho) */
    background: linear-gradient(to right, var(--cor-destaque-hover), var(--cor-destaque), var(--cor-destaque-hover));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent; /* Essencial para o gradiente aparecer */
    
    /* Sombra para o brilho dourado */
    text-shadow: 0 0 5px rgba(212, 168, 81, 0.7); 
}


/* Menu */
.menu {
  display: flex;
  gap: 15px; /* Ajustei um pouco o espaçamento entre eles */
}

.menu li {
  list-style: none;
}

.menu li a {
  /* Estilo base do botão (inativos) */
  display: inline-block;
  text-decoration: none;
  color: var(--cor-texto); /* Branco */
  padding: 8px 18px;
  border-radius: 6px; /* Ajustado para o arredondamento suave da imagem */
  border: 1px solid rgba(255, 255, 255, 0.4); /* Borda sutil */
  font-weight: 500;
  font-size: 15px;
  transition: all 0.3s ease;
  background-color: var(--cor-fundo-secundario); /* Fundo escuro do botão */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4); /* Sombra escura para dar profundidade */
}

/* Efeito ao passar o mouse (Hover) */
.menu li a:hover {
  /* No hover, ganha o brilho sutil */
  color: var(--cor-destaque-hover);
  box-shadow: 0 0 10px rgba(212, 168, 81, 0.4); /* Brilho dourado suave */
  /* Mantém o fundo escuro, talvez com uma leve cor: */
  background-color: #1a334d; /* Levemente mais claro para dar a sensação de que está "aceso" */
}

/* Botão ativo (ex: Início) */
.menu li a.active {
  /* Destaque do botão ativo com GLOW (Brilho Esfumado) */
  color: var(--cor-texto); 
  background-color: var(--cor-fundo-secundario);
  
  /* CRUCIAL: O brilho externo (glow) é feito com box-shadow forte e espalhada */
  box-shadow: 
    0 0 0 1px var(--cor-destaque), /* Borda fina e nítida (1px) */
    0 0 15px rgba(212, 168, 81, 0.7); /* O GLOW (Brilho) Esfumado ao redor */
}


/* ======== BOTÕES ======== */
button, .btn {
  background-color: var(--cor-destaque);
  color: var(--cor-fundo);
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
}

button:hover, .btn:hover {
  background-color: var(--cor-destaque-hover);
  box-shadow: 0 0 12px rgba(212, 168, 81, 0.6);
}

/* ======== IMAGEM INÍCIO ======== */
.img-inicio {
  width: 220px;
  height: auto;
  border-radius: 6px;
  border: 3px solid var(--cor-destaque);
  box-shadow: 0 0 15px rgba(212, 168, 81, 0.3);
  object-fit: cover;
  transition: all 0.3s ease;
}

.img-inicio:hover {
  transform: scale(1.03);
  box-shadow: 0 0 25px rgba(212, 168, 81, 0.5);
}

/* ======== SEÇÕES ======== */
section {
  padding: 60px 80px;
}

h1, h2 {
  color: var(--cor-texto-destaque);
  margin-bottom: 20px;
}

p {
  color: var(--cor-texto-secundario);
  line-height: 1.7;
  max-width: 900px;
  margin-bottom: 15px;
}

.intro-container {
    display: flex; 
    align-items: flex-start; /* Alinha o conteúdo ao topo */
    gap: 60px; /* Espaçamento entre a foto e o texto */
    padding: 20px 0;
}

/* O Bloco de Texto à Direita da Foto */
.intro-texto {
    flex-grow: 1; /* Permite que o texto ocupe o espaço restante */
    max-width: 900px; 
    padding-top: 10px; /* Alinha o texto com o topo da imagem se necessário */
}

/* Estilo da Imagem (Ajustado) */
.img-inicio {
    /* Mantendo seus estilos existentes para borda e sombra */
    min-width: 280px; 
    height: auto;
    border-radius: 6px;
    border: 3px solid var(--cor-destaque);
    box-shadow: 0 0 15px rgba(212, 168, 81, 0.3);
    object-fit: cover;
}

/* Nome (Janaina Paola) */
.intro-texto h2 {
    color: var(--cor-texto); /* Branco */
    font-size: 32px;
    margin-bottom: 5px;
}

/* Especialidade (abaixo do nome) */
.intro-texto .especialidade {
    color: var(--cor-texto-secundario); /* Cinza claro */
    font-size: 16px;
    margin-bottom: 30px; /* Espaço para separar do título de destaque */
}

/* Título de Destaque (Conectando oportunidades...) */
.intro-texto .titulo-destaque {
    color: var(--cor-destaque); /* Dourado */
    font-size: 36px;
    line-height: 1.2;
    margin-bottom: 20px;
}

/* Parágrafo de Contexto (abaixo do título) */
.intro-texto .contexto-intro {
    color: var(--cor-texto-secundario);
    font-size: 16px;
    line-height: 1.6;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 14px 60px; /* Reduzido o padding lateral */
  gap: 40px; /* Diminui o espaço entre logo e menu */
}

/* ======== HERO (seção inicial) ======== */
.hero {
  display: flex;
  justify-content: flex-start; /* Alinha tudo à esquerda */
  align-items: center;
  background-color: var(--cor-fundo);
  padding: 80px 80px; /* Dá espaçamento lateral */
}

.hero-container {
  display: flex;
  align-items: center;
  gap: 40px; /* Espaço entre imagem, linha e texto */
  width: 100%;
  max-width: 1200px; /* Limita pra não ficar gigante em telas grandes */
}

/* Imagem de perfil */
.hero-img {
  width: 220px;
  height: auto;
  border-radius: 6px;
  border: 2px solid var(--cor-destaque);
  box-shadow: 0 0 10px rgba(212, 168, 81, 0.4);
}

/* Linhas divisórias verticais */
.vertical-line {
  width: 1.5px;
  height: 160px;
  background: linear-gradient(to bottom, transparent, var(--cor-texto-secundario), transparent);
  opacity: 0.4;
}

/* Bloco com nome e botão */
.hero-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.hero-info h2 {
  color: var(--cor-texto);
  font-size: 26px;
  margin-bottom: 4px;
}

.hero-info p {
  color: var(--cor-texto-secundario);
  font-size: 15px;
}

.hero-info a.btn {
  margin-top: 10px;
  background: transparent;
  border: 1px solid var(--cor-destaque);
  color: var(--cor-destaque);
  border-radius: 6px;
  padding: 8px 16px;
  cursor: pointer;
  transition: 0.3s;
}

.hero-info a.btn:hover {
  background-color: var(--cor-destaque);
  color: var(--cor-fundo);
}

/* Bloco com frase dourada */
.hero-text h3 {
  color: var(--cor-destaque);
  font-size: 26px;
  line-height: 1.3;
  margin-bottom: 10px;
}

.hero-text p {
  color: var(--cor-texto-secundario);
  max-width: 320px;
}

/*=====Sobre Mim=====*/
.duas-colunas {
    display: flex;
    justify-content: space-between;
    gap: 40px; /* Espaço entre as colunas */
}

.coluna-sobre, .coluna-servicos {
    /* Define a largura de cada coluna para que fiquem lado a lado */
    flex: 1; 
    min-width: 45%; 
}

/* Alinhamento da foto e do texto dentro da Coluna Sobre Mim */
.sobre-info-container {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    flex-direction: row-reverse;
}


.sobre-info-container p {
    flex-grow: 1;
    max-width: none; 
}


.img-sobre {
    
    width: 400px; 
    min-width: 400px;
    height: auto;
    border-radius: 6px;
    border: 3px solid var(--cor-destaque);
    box-shadow: 0 0 15px rgba(212, 168, 81, 0.3);
    object-fit: cover;
}


/* ======== ESTILO DOS CARDS DE SERVIÇOS ======== */
.servico-card {
    background-color: var(--cor-card);
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px; 
    border: 1px solid var(--cor-borda); 
    transition: all 0.3s ease;
}

.servico-card:hover {
    background-color: var(--cor-card-hover);
    border-color: var(--cor-destaque);
    box-shadow: 0 0 15px rgba(212, 168, 81, 0.2);
}

.servico-card h3 {
    color: var(--cor-destaque-hover); 
    font-size: 18px;
    margin-top: 0;
    margin-bottom: 5px;
}

.servico-card p {
    font-size: 14px;
    margin-bottom: 0;
}

.horizontal-line {
  width: 100%;
  height: 1.5px;
  background: linear-gradient(to right, transparent, var(--cor-texto-secundario), transparent);
  opacity: 0.4;
  margin: 40px 0;
}

/*=========SEÇÃO CASES e EFEITO SLIDE=========*/
.cases-slider-container {
     position: relative;
  max-width: 700px;
  margin: 0 auto;
  overflow: hidden;
  height: 280px; 
  display: flex;
  justify-content: center;
  align-items: center;
  border: #0c2238 1px solid;
  border-radius: 12px;
}


.case-card {
    
    width: 300px; 
    height: 533px; 
    
    
    background-color: var(--cor-card); 
    border: 1px solid var(--cor-borda); 
    border-radius: 12px;
    padding: 30px;
    
    
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.6); 
    
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.case-card h3 {
    color: var(--cor-destaque);
    font-size: 24px;
    margin-bottom: 15px;
}

.case-card p {
    color: var(--cor-texto-secundario);
    font-size: 16px;
    max-width: 90%; 
}
.case-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90%;
  transform: translate(-50%, -50%) translateX(100%);
  opacity: 0;
  transition: all 0.8s ease;
  background-color: #0c2238;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
}


.case-card.ativo {
  transform: translate(-50%, -50%) translateX(0);
  opacity: 1;
}


.case-card.saindo {
  transform: translate(-50%, -50%) translateX(-100%);
  opacity: 0;
}
.study {
    text-align: center;
    margin-bottom: 30px;
}

.title {
    text-align: center;
    margin-bottom: 30px;
}

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


.qd-empresa {
    
    width: 280px; 
    padding: 20px;
    
    
    background-color: var(--cor-card);
    border: 1px solid var(--cor-borda);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    text-align: center;
    transition: all 0.3s ease;
}

.qd-empresa:hover {
    background-color: var(--cor-card-hover);
    border-color: var(--cor-destaque);
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(212, 168, 81, 0.2);
}


.qd-empresa h1 {
    color: var(--cor-texto-secundario);
    font-size: 14px; 
    font-weight: 400;
    margin-bottom: 20px;
    min-height: 40px; 
    line-height: 1.4;
}


.imgs-empresa {
    width: 100%; 
    max-width: 180px; 
    height: auto;
    
    margin-top: 15px;
    border: none; 
    object-fit: contain; 
}

.sub {
    text-align: center;
    margin-bottom: 20px;
}
#contato {
  text-align: center;
  background-color: #0b1a26;
  color: #d9a855;
  padding: 50px 0;
}

.contato-icons {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 20px;
}

.contato-item {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #fff;
  background-color: #132433;
  padding: 10px 20px;
  border-radius: 12px;
  transition: 0.3s;
}

.contato-item:hover {
  background-color: #1b3145;
  transform: scale(1.05);
}

.contato-item img {
  width: 28px;
  height: 28px;
  filter: brightness(0) invert(1);
}

.contato-item span {
  font-size: 16px;
  color: #f5c670;
}

/*=======ACABOUUUUUUUUUUUUUUUUUUUUU==============*/