/*
====================================================================
  SEÇÃO INÍCIO - CSS DESKTOP BASE
  
  ⚠️  IMPORTANTE: Este arquivo contém APENAS os estilos BASE da seção início!
  
  As bordas, margens e espaçamentos base estão definidos em:
  sites/public/componentes/container/container.css
  
  Este arquivo deve ser importado APÓS o arquivo de bordas.
  
  ESTILOS: Este arquivo contém apenas estilos específicos da seção início.
  As bordas e layout são controlados pelo sistema de bordas reutilizável.
  
  MEDIA QUERIES: As media queries estão no arquivo 01_inicio_desktop_media.css
  
  Autor: #@HD
  Data de criação: 14/08/2025
  Última atualização: 14/08/2025
====================================================================
*/

/* ====================================================================
   ESTILOS COMPARTILHADOS - CONTEÚDO
   ==================================================================== */

.inicio_desktop_content {
  display: flex;
  flex-direction: column;
  gap: var(--espacamento_160px);
  text-align: center;
  padding: 1rem;
}

.inicio_desktop_content h1 {
  font-weight: 700;
  color: var(--text-color);
  margin: 0;
  line-height: 1.2;
  text-align: left; /* Alinhar à esquerda */
  padding: 0; /* Remover padding */
}

.inicio_desktop_content h3 {
  font-weight: 700;
  color: var(--text-color);
  margin: 0;
  line-height: 1.2;
  text-align: left; /* Alinhar à esquerda */
  padding: 0; /* Remover padding */
}

.inicio_desktop_change_text {
  display: flex;
  flex-direction: column;
  gap: var(--espacamento_160px);
}

.inicio_desktop_change_text h3 {
  font-weight: 700;
  color: var(--hover-color);
  margin: 0;
  line-height: 1.2;
}

.inicio_desktop_change_text h3 .word {
  color: var(--hover-color);
  font-weight: 700;
}

/* ====================================================================
   ESTILOS COMPARTILHADOS - PARÁGRAFOS
   ==================================================================== */

/* Estilos dos parágrafos */
.inicio_desktop_paragrafo_01,
.inicio_desktop_paragrafo_02 {
  font-size: 1.2rem; /* Aumentar tamanho da fonte */
  color: var(--text-color); /* Mesma cor da formacao_desktop_resumo_descricao */
  line-height: 1.6; /* Melhorar espaçamento entre linhas */
  margin: 0 0 1.5rem 0; /* Adicionar espaçamento inferior */
  text-align: left;
  padding: 0; /* Remover padding para alinhar com títulos */
  width: 100%;
  box-sizing: border-box;
  font-weight: 400; /* Garantir peso da fonte */
}

/* Regras locais para parágrafos da seção início */
.inicio_paragrafo_01,
.inicio_paragrafo_02 {
  font-size: 1.2rem; /* Aumentar tamanho da fonte */
  color: var(--text-color); /* Mesma cor da formacao_desktop_resumo_descricao */
  line-height: 1.6; /* Melhorar espaçamento entre linhas */
  text-align: left;
  margin-bottom: 1.5rem; /* Aumentar espaçamento entre parágrafos */
  opacity: 0.9;
}

/* ====================================================================
   TÍTULOS DA SEÇÃO INÍCIO - ALINHAMENTO À ESQUERDA SEM ESPAÇAMENTO
   ==================================================================== */

/* Alinhar títulos da seção início à esquerda */
.inicio_desktop_content .section-title,
.inicio_desktop_content .section-subtitle {
  text-align: left;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0;
  margin: 0;
}

/* Alinhar h1 e h3 dentro dos títulos à esquerda */
.inicio_desktop_content .section-title h1,
.inicio_desktop_content .section-subtitle h3 {
  text-align: left;
  align-self: flex-start;
  justify-self: flex-start;
  padding: 0;
  margin: 0;
}

/* Alinhar container de conteúdo à esquerda */
.inicio_desktop_content {
  text-align: left;
  padding: 0;
}

/* Destaque para palavras importantes - negrito e cor mais clara */
.inicio_desktop .inicio_desktop_destaque_texto {
  font-weight: bold ;
  color: #e0e0e0 ; /* Cinza mais claro que o texto normal */
}

/* ====================================================================
   ESTILOS COMPARTILHADOS - CONTATO
   ==================================================================== */

.inicio_desktop_email_info,
.inicio_desktop_lattes_info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  /* margin: 0.5rem 0; */
  width: 100%;
}

.inicio_desktop_email_info h5,
.inicio_desktop_lattes_info h5 {
  color: var(--text-color);
  font-weight: 600;
  font-size: 1rem;
  margin: 0;
}

.inicio_desktop_email_info a,
.inicio_desktop_lattes_info a {
  color: var(--hover-color);
  text-decoration: none;
  transition: color 0.3s ease;
}

.inicio_desktop_email_info a:hover,
.inicio_desktop_lattes_info a:hover {
  color: var(--text-color);
}

.inicio_desktop_email_info span,
.inicio_desktop_lattes_info span {
  color: var(--hover-color);
  font-weight: 500;
}

/* ====================================================================
   ESTILOS COMPARTILHADOS - IMAGEM
   ==================================================================== */

/* Regras movidas para a seção específica da imagem da coluna direita */

.inicio_desktop_liquid_shape {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  aspect-ratio: 1;
}

.inicio_desktop_liquid_shape svg {
  width: 100%;
  height: 100%;
  background: transparent;
}

.inicio_desktop_liquid_shape path {
  filter: drop-shadow(0 0 20px #12f7ff);
  transition: all 0.3s ease;
}

.inicio_desktop_liquid_shape:nth-child(2) {
  filter: blur(50px);
  opacity: 0.7;
}

.inicio_desktop_liquid_shape:nth-child(3) path {
  filter: brightness(1.2) drop-shadow(0 0 30px #12f7ff);
  animation: none;
}

/* Garantir que o terceiro shape (com imagem) tenha z-index maior */
.inicio_desktop_liquid_shape:nth-child(3) {
  z-index: 3;
}

/* ====================================================================
   ESTILOS COMPARTILHADOS - SOCIAL ICONS
   ==================================================================== */

.inicio_desktop_social_icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0;
}

.inicio_desktop_social_links {
  display: flex;
  gap: 1rem;
  justify-content: center;
  align-items: center;
}

.inicio_desktop_social_links a {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, filter 0.3s ease;
  border-radius: 8px;
  padding: 0.5rem;
  /* Borda igual aos botões de idioma */
  border: 1px solid var(--hover-color);
  outline: 2px solid var(--bg-color);
  box-shadow: var(--neon-box-shadow);
  background: var(--bg-color);
}

.inicio_desktop_social_links a:hover {
  transform: translateY(-2px) scale(1.1);
  filter: brightness(1.2);
  box-shadow: 0 0 20px var(--hover-color);
  border-color: var(--hover-color);
}

.inicio_desktop_social_links img {
  transition: filter 0.3s ease;
  border-radius: 4px;
}

.inicio_desktop_social_links a:hover img {
  filter: drop-shadow(0 4px 8px rgba(18, 247, 255, 0.3));
}

/* ====================================================================
   ESTILOS ESPECÍFICOS DA SEÇÃO INÍCIO - APENAS ESTILOS BASE
   ==================================================================== */
/* 
   NOTA: Os estilos das bordas foram movidos para o sistema de bordas reutilizável.
   Este arquivo agora contém apenas estilos específicos da seção início.
   As media queries estão no arquivo 01_inicio_desktop_media.css
*/

/* ---------------------------------------------------------------- */
/* ------------------- CONTEÚDO DA COLUNA ESQUERDA ------------------- */
/* ---------------------------------------------------------------- */

.inicio_desktop_content {
  display: flex;
  flex-direction: column;
  gap: var(--espacamento_320px);
  width: 100%;
  text-align: left; /* Alinhamento à esquerda para desktop */
}

.inicio_desktop_content h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-color);
  margin: 0;
  line-height: 1.2;
  text-align: left; /* Alinhamento à esquerda para desktop */
}

.inicio_desktop_content h3 {
  font-size: 2rem; /* Reduzido de 2.8rem para 2rem */
  font-weight: 700;
  color: var(--text-color);
  margin: 0;
  line-height: 1.2;
  text-align: left; /* Alinhamento à esquerda para desktop */
}

.inicio_desktop_change_text {
  display: flex;
  flex-direction: column;
  gap: var(--espacamento_160px);
}

.inicio_desktop_change_text h3 {
  font-size: 2rem; /* Reduzido de 2.8rem para 2rem */
  font-weight: 700;
  color: var(--hover-color);
  margin: 0;
  line-height: 1.2;
}

.inicio_desktop_change_text h3 .word {
  color: var(--hover-color);
  font-weight: 700;
  font-size: 2rem; /* Reduzido de 2.8rem para 2rem */
}

/* ---------------------------------------------------------------- */
/* ------------------- PARÁGRAFOS ------------------- */
/* ---------------------------------------------------------------- */

/* Parágrafos - regra duplicada removida, usando a regra com maior especificidade acima */

/* Remover espaçamento entre parágrafos */
.inicio .inicio_desktop_paragrafo_01 + .inicio .inicio_desktop_paragrafo_02 {
  margin-top: 0;
}

/* Remover espaçamento entre parágrafos e informações de contato */
.inicio .inicio_desktop_paragrafo_02 + .SECTION_DESKTOP_ROW_THIRD {
  margin-top: 0;
}

/* Destaque para palavras importantes - negrito e cor mais clara */
.inicio_desktop .inicio_desktop_destaque_texto {
  font-weight: bold;
  color: #e0e0e0; /* Cinza mais claro que o texto normal */
}


/* ---------------------------------------------------------------- */
/* ------------------- EMAIL E LATTES ------------------- */
/* ---------------------------------------------------------------- */

.inicio_desktop_email_info {
  display: flex;
  align-items: center;
  gap: 1.5rem; /* Reduzido de 2rem para 1rem - espaçamento equilibrado */
  margin: var(--espacamento_40px) 0;
}

.inicio_desktop_lattes_info {
  display: flex;
  align-items: center;
  gap: 1.2rem; /* Reduzido de 2rem para 1rem - espaçamento equilibrado */
  margin: var(--espacamento_40px) 0;
}

.inicio_desktop_email_info h5,
.inicio_desktop_lattes_info h5 {
  color: var(--text-color);
  font-weight: 600;
  font-size: 1rem;
  margin: 0;
}

.inicio_desktop_email_info a,
.inicio_desktop_lattes_info a {
  color: var(--hover-color);
  text-decoration: none;
  transition: color 0.3s ease;
}

.inicio_desktop_email_info a:hover,
.inicio_desktop_lattes_info a:hover {
  color: var(--text-color);
}

.inicio_desktop_email_info span,
.inicio_desktop_lattes_info span {
  color: var(--hover-color);
  font-weight: 500;
}

/* ---------------------------------------------------------------- */
/* ------------------- IMAGEM DA COLUNA DIREITA ------------------- */
/* ---------------------------------------------------------------- */

.inicio_desktop_image {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 220px;
  /* Fazer a imagem ficar quadrada */
  aspect-ratio: 1;
  max-width: 450px;
  /* Centralizar na linha */
  margin: 0 auto;
  /* Borda igual aos botões de idioma */
  border: 1px solid var(--hover-color);
  outline: 2px solid var(--bg-color);
  box-shadow: var(--neon-box-shadow);
  background: var(--bg-color);
  border-radius: 5px;
  transition: box-shadow 0.3s, border 0.3s, outline 0.3s;
}

/* Efeito hover para a imagem */
.inicio_desktop_image:hover {
  box-shadow: 0 0 20px var(--hover-color);
  border-color: var(--hover-color);
}

.inicio_desktop_liquid_shape {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  aspect-ratio: 1;
  max-width: 450px;
  max-height: 450px;
}

.inicio_desktop_liquid_shape svg {
  width: 100%;
  height: 100%;
  background: transparent;
  max-width: 450px;
  max-height: 450px;
}

.inicio_desktop_liquid_shape path {
  filter: drop-shadow(0 0 20px #12f7ff);
  transition: all 0.3s ease;
}

.inicio_desktop_liquid_shape:nth-child(2) {
  filter: blur(50px);
  opacity: 0.7;
}

.inicio_desktop_liquid_shape:nth-child(3) path {
  filter: brightness(1.2) drop-shadow(0 0 30px #12f7ff);
  animation: none;
}

/* Garantir que o terceiro shape (com imagem) tenha z-index maior */
.inicio_desktop_liquid_shape:nth-child(3) {
  z-index: 3;
}

/* ---------------------------------------------------------------- */
/* ------------------- SOCIAL ICONS ------------------- */
/* ---------------------------------------------------------------- */

/* Mostrar social da imagem no desktop */
.inicio_desktop_image .inicio_desktop_social_icons { 
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  justify-content: center;
  /* Centralizar horizontalmente */
  text-align: center;
}

/* Estilos para os ícones sociais na segunda linha */
.inicio_desktop .inicio_desktop_social_icons {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  justify-content: center;
  text-align: center;
  padding: 0.5rem; /* Padding reduzido para aproximar da imagem */
}



.inicio_desktop_social_icons {
  display: flex;
  flex-direction: column;
  gap: 15px;
  /* margin-top: 2.5rem; */
}

.inicio_desktop_social_icons h5 {
  color: var(--text-color);
  font-weight: 600;
  font-size: 1rem;
}

/* Ocultar o texto "Social:" no desktop */
.inicio_desktop_image .inicio_desktop_social_icons h5 {
  display: none;
}

.inicio_desktop_social_links {
  display: flex;
  gap: 20px;
  justify-content: center;
}

/* Regras removidas - usando .inicio_desktop_social_links a em vez de .inicio_desktop_social_icons a */

/* Social mobile - oculto no desktop */
.inicio_desktop_social_icons_mobile {
  display: none;
}



/* ====================================================================
   ANIMAÇÕES DE TRANSIÇÃO DE PALAVRAS - NOME
   ==================================================================== */

/* Container das palavras que fazem transição */
.inicio_desktop_change_text {
  position: relative;
  display: inline-block;
}

/* Estilo das palavras */
.inicio_desktop_change_text .word {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  color: var(--hover-color);
  font-weight: 700;
  transition: opacity 0.3s ease;
  white-space: nowrap;
}

/* Primeira palavra visível */
.inicio_desktop_change_text .word:first-child {
  opacity: 1 !important;
  position: relative;
}

/* Garantir que a primeira palavra seja visível */
.inicio_desktop_change_text .word {
  opacity: 0;
}

.inicio_desktop_change_text .word:first-child {
  opacity: 1 !important;
}

/* Todas as outras palavras ocultas por padrão */
.inicio_desktop_change_text .word:not(:first-child) {
  opacity: 0;
  position: absolute;
}

/* Estilo das letras individuais */
.inicio_desktop_change_text .word .letter {
  display: inline-block;
  opacity: 1;
  transform: translateY(0);
  transition: all 0.3s ease;
}

/* Letra saindo */
.inicio_desktop_change_text .word .letter.out {
  opacity: 0;
  transform: translateY(-20px);
}

/* Letra atrás (preparando para entrar) */
.inicio_desktop_change_text .word .letter.behind {
  opacity: 0;
  transform: translateY(20px);
}

/* Letra entrando */
.inicio_desktop_change_text .word .letter.in {
  opacity: 1;
  transform: translateY(0);
}

/* Efeito hover nas palavras */
.inicio_desktop_change_text .word:hover {
  color: var(--hover-color);
  text-shadow: 0 0 10px var(--hover-color);
}