/* Configurações de cores */
/* :root { // Movido para baixo para consolidar
  --main-color: #00eeff;
  --text-color: #ffffff;
  --bg-color-01: #1f242d;
  --bg-color-02: #323946;
  --color-00: #0000001a;

  /* Extra colors 
  --color-01: #999999;
  --color-02: #009539;
  --color-03: #7950f2;
  --color-04: #c00000;
  --color-05: #232323; 
}*/

/* Estilo do ícone olá (hero) */
.wave {
  display: inline-block;
  transform-origin: 70% 70%; /* Define o ponto de rotação da mão */
  animation: wave-animation 2s infinite; /* Animação infinita */
}

@keyframes wave-animation {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(14deg);
  }
  20% {
    transform: rotate(-8deg);
  }
  30% {
    transform: rotate(14deg);
  }
  40% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(10deg);
  }
  60% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/* Imports the Poppins font from Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Poppins: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");

/* Definindo variáveis para cores */
:root {
  /* Cores principais do tema */
  --main-color: #00eeff;
  --main-color-rgb: 0, 238, 255; /* Adicionado para uso em rgba() */
  --text-color: #ffffff;
  --bg-color-01: #1f242d;
  --bg-color-02: #323946;
  --color-00: #0000001a; /* Usado para sombras ou fundos sutis */

  /* Cores extras para status, alertas, etc. */
  --color-01: #999999; /* Cinza para texto secundário ou bordas */
  --color-02: #009539; /* Verde para sucesso/validação */
  --color-03: #7950f2; /* Roxo, pode ser usado para destaque */
  --color-04: #c00000; /* Vermelho para erros/alertas */
  --color-05: #232323; /* Cinza escuro, alternativo ao bg-color-01 */

  --background-light: #ffffff;
  --background-dark: #121212;
  --text-light: #000000;
  --text-dark: #ffffff;
}

@keyframes blink-cursor {
  from {
    border-right-color: white;
  }
  to {
    border-right-color: transparent;
  }
}

/* Estilo para o typing effect */
#typing-effect {
  font-family: "Poppins", monospace; /* Monospace é bom para efeito de digitação */
  font-size: 33px; /* Ajuste conforme necessário */
  color: var(--main-color);
  padding: 15px; /* Espaçamento interno */
  white-space: nowrap; /* Impede que o texto quebre linha */
  overflow: hidden; /* Esconde o texto que excede a largura */
  border-right: 2px solid var(--text-color); /* Cursor piscante, cor ajustada */
  width: fit-content; /* Ajusta a largura ao conteúdo */
  animation: blink-cursor 0.75s steps(1) infinite; /* Animação do cursor */
  /* 'steps(1)' faz o cursor aparecer e desaparecer abruptamente */
}

/* Estilos adicionais */
.container {
  text-align: center;
  margin-top: 50px;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

/*Configurações padrão do navegador*/
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  text-decoration: none;
  border: none;
  outline: none;
  scroll-behavior: smooth;
}

html {
  font-family: "Poppins", sans-serif;
  font-size: 16px; /* Base font size */
  overflow-x: hidden; /* Prevenir scroll horizontal no nível do HTML */
}

body {
  background-color: var(--bg-color-01);
  color: var(--text-color);
  line-height: 1.6; /* Bom para legibilidade */
  margin: 0;
  overflow-x: hidden; /* Adicionado para evitar barras de rolagem horizontais indesejadas */
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1.1rem 6%; /* Adicionado padding lateral percentual para responsividade */
  background-color: var(--bg-color-01);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000; /* Garante que o header fique acima do menu responsivo */
  transform: translateZ(0); /* Ajuda a resolver problemas de empilhamento com elementos transformados */
}

.logo {
  font-size: 1.7rem;
  color: var(--text-color);
  font-weight: 600;
  cursor: default;
}
/* .nav-responsive (bloco antigo) foi movido/substituído pela versão mais recente */

.nav a,
.nav-responsive a {
  font-size: 1.2rem;
  color: var(--text-color);
  padding: 0.5rem 1rem;
  transition: 0.4s;
}

.nav a:hover,
.nav-responsive a:hover {
      /* background-color: var(--main-color); */
      /* color: var(--bg-color-01); */
  color: var(--main-color);
}

.flag-spacing {
  cursor: pointer;
  margin-left: 1px;
  margin-right: 1px;
}

section {
  min-height: 100vh;
  padding: 6rem 6% 2rem; /* Usando padding lateral percentual */
}

span {
  color: var(--main-color);
}

/* Efeito partículas */
#particles-js {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* z-index: -1; /* Fica atrás dos outros elementos */
}
/* /Efeito partículas */
.home,
.about {
  display: flex;
  flex-direction: row; /* Mantido, mas será column em telas menores */
  justify-content: space-evenly;
  align-items: center;
  gap: 2rem; /* Adiciona um espaço entre o conteúdo e a imagem */
}

.home-img,
.about-img {
  position: relative; /* Para potenciais pseudo-elementos ou overlays */
  padding: 0.75rem; /* Espaço entre a borda externa e a imagem */
  border-radius: 1.25rem; /* Cantos arredondados para o contêiner */
  background-color: var(--bg-color-02); /* Fundo para a área de padding, destaca a moldura */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15),
              0 0 0 2px transparent; /* Sombra e borda de transição (para o hover) */
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), /* Transição mais elástica e um pouco mais longa */
              box-shadow 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  /* As definições de borda específicas (direita/esquerda/inferior) vêm depois */
  /* Garante que o container da imagem não encolha demais */
  flex-shrink: 0;
  overflow: hidden; /* Essencial para o efeito de brilho na imagem e parallax de fundo */
}

.home-img { /* Mantém a borda original, mas agora aplicada a um contêiner com padding */
  border-right: solid 0.6rem var(--main-color);
  border-bottom: solid 0.6rem var(--main-color);
  border-image: linear-gradient(135deg, transparent 50%, var(--main-color)) 1;
}

.about-img { /* Mantém a borda original */
  border-left: solid 0.6rem var(--main-color);
  border-bottom: solid 0.6rem var(--main-color);
  border-image: linear-gradient(225deg, transparent 50%, var(--main-color)) 1;
}

/* Camada de fundo parallax sutil para o contêiner da imagem */
.home-img::before,
.about-img::before {
  content: '';
  position: absolute;
  top: -10%; left: -10%; /* Começa um pouco fora para permitir movimento */
  width: 120%;
  height: 120%;
  background-image: linear-gradient(45deg, color-mix(in srgb, var(--main-color) 5%, transparent) 0%, color-mix(in srgb, var(--bg-color-01) 80%, black) 100%);
  opacity: 0.3; /* Sutil */
  z-index: 0; /* Atrás da imagem */
  transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.5s ease-out;
  border-radius: inherit; /* Herda o border-radius do pai */
}

.home-img:hover::before,
.about-img:hover::before {
  transform: translateX(5px) translateY(5px) scale(1.05); /* Movimento sutil e oposto ao hover principal */
  opacity: 0.45;
}

.home-img img,
.about-img img {
  display: block; /* Remove espaço extra abaixo da imagem */
  position: relative; /* Para o efeito de brilho e para ficar acima do ::before do pai */
  z-index: 1;
  width: 100%; /* Faz a imagem preencher o contêiner (considerando o padding do pai) */
  height: auto; /* Mantém a proporção da imagem. */
  /* Se você quiser que as imagens tenham uma altura consistente e preencham o espaço verticalmente,
     você precisaria definir uma altura para .home-img/.about-img ou usar align-items: stretch
     no flex pai (.home, .about) e então usar:
     height: 100%; object-fit: cover;
     Por agora, height: auto é mais seguro para manter a proporção original da imagem. */
  border-radius: 0.85rem; /* Cantos arredondados para a imagem */
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.5s ease-in-out;
  /* box-shadow: 0 4px 15px rgba(0,0,0,0.1); Sombra sutil na própria imagem - substituído por filter */
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.18)); /* Sombra projetada sutil para dar profundidade inicial */
  overflow: hidden; /* Necessário para o efeito de brilho na imagem */
}

/* Efeito de brilho (glint/shine) na imagem */
.home-img img::after, /* Usando ::after para a imagem, pois o contêiner já usa ::before */
.about-img img::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%; /* Começa totalmente à esquerda, fora da imagem */
  width: 70%; /* Largura do brilho */
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.25) 50%, /* Intensidade do brilho */
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg); /* Inclina o brilho */
  transition: left 0.7s cubic-bezier(0.25, 0.8, 0.25, 1);
  z-index: 2; /* Acima da imagem, mas abaixo de outros conteúdos do .portfolio-layer se houver */
}

.home-img:hover,
.about-img:hover {
  transform: translateY(-12px) scale(1.05) rotate(1.8deg); /* Interação um pouco mais pronunciada */
  box-shadow: 0 25px 55px color-mix(in srgb, var(--main-color) 22%, transparent), /* Sombra principal mais difusa */
              0 0 0 4px var(--main-color), /* Contorno de destaque */
              0 0 20px color-mix(in srgb, var(--main-color) 35%, transparent) inset; /* Brilho interno mais forte */
}

.home-img:hover img::after,
.about-img:hover img::after {
  left: 120%; /* Move o brilho para a direita, varrendo a imagem */
  transition-delay: 0.1s; /* Pequeno delay para o brilho começar após o hover */
}

.home-img:hover img,
.about-img:hover img {
  transform: scale(1.04) rotate(-0.8deg); /* Interação da imagem um pouco mais pronunciada */
  filter: brightness(1.1) drop-shadow(0 5px 12px rgba(0,0,0,0.28)); /* Brilho e sombra mais intensos */
}

.about {
  background-color: var(--bg-color-02);
}

.home-content {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.home-content,
.about-content {
  width: 45%;
}

.home-content h1,
.about-content h1 {
  font-weight: 700;
  line-height: 1.3;
}

.home-content h3,
.about-content h3 {
  font-weight: 700;
  font-size: 1.6rem;
}

.home-content p,
.about-content p {
  margin-top: 1.2rem;
  text-align: justify;
  font-size: 1.25rem;
}

h1 {
  font-size: 100px;
  color: #fff;
  position: relative;
  text-transform: uppercase;
  letter-spacing: 5px;
}

/* Glitch Effect */
.glitch {
  position: relative;
  font-size: 80px;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 5px #00eeff, 0 0 10px #00eeff, 0 0 20px #ff00ff;
  animation: glitch-animation 2s infinite;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  color: #00eeff;
  background: #000;
  overflow: hidden;
}

.glitch::before {
  left: 2px;
  text-shadow: -2px 0 #ff00ff;
  clip: rect(0, 900px, 45px, 0);
  animation: glitch-animation 3s infinite linear;
}

.glitch::after {
  left: -2px;
  text-shadow: -2px 0 #ff00ff;
  clip: rect(0, 900px, 55px, 0);
  animation: glitch-animation 3s infinite linear reverse;
}

/* Keyframes for Glitch Animation */
@keyframes glitch-animation {
  0% {
    clip: rect(0, 900px, 45px, 0);
    transform: translate(0);
  }
  10% {
    clip: rect(10px, 900px, 85px, 0);
    transform: translate(-10px, -10px);
  }
  20% {
    clip: rect(20px, 900px, 65px, 0);
    transform: translate(10px, 10px);
  }
  30% {
    clip: rect(30px, 900px, 25px, 0);
    transform: translate(-10px, 0);
  }
  40% {
    clip: rect(40px, 900px, 75px, 0);
    transform: translate(10px, -10px);
  }
  50% {
    clip: rect(50px, 900px, 35px, 0);
    transform: translate(-10px, 10px);
  }
  60% {
    clip: rect(60px, 900px, 55px, 0);
    transform: translate(10px, 0);
  }
  70% {
    clip: rect(70px, 900px, 65px, 0);
    transform: translate(-10px, -10px);
  }
  80% {
    clip: rect(80px, 900px, 85px, 0);
    transform: translate(0, 10px);
  }
  90% {
    clip: rect(90px, 900px, 45px, 0);
    transform: translate(10px, -10px);
  }
  100% {
    clip: rect(0, 900px, 45px, 0);
    transform: translate(0);
  }
}

/* Estilos unificados para títulos de seção */
.services h2,
.portfolio h2,
.contact h2,
.about h3 {
  color: var(--text-color); /* Cor base do texto do H2 */
  font-weight: 700; /* Torna o título mais forte */
  text-align: center;
  text-transform: uppercase; /* Transforma o texto em maiúsculas */
  letter-spacing: 1px; /* Adiciona um leve espaçamento entre as letras */
  padding-bottom: 0.75rem; /* Espaço abaixo do texto para a linha decorativa */
  margin-bottom: 3rem; /* Aumenta o espaço após o título e a linha */
  position: relative; /* Necessário para o posicionamento do pseudo-elemento ::after */
  font-size: 2rem; /* Movido para cá para garantir que se aplique a todos */
}

/* Linha decorativa abaixo dos títulos H2 das seções */
.services h2::after,
.portfolio h2::after,
.contact h2::after,
.about h3::after { /* Incluído no agrupamento */
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0; /* Posiciona a linha na parte inferior do padding-bottom do h2 */
  transform: translateX(-50%); /* Centraliza a linha */
  width: 100px; /* Largura da linha decorativa */
  height: 4px; /* Espessura da linha decorativa */
  background-color: var(
    --main-color
  ); /* Cor da linha, usando sua cor principal */
  border-radius: 2px; /* Bordas levemente arredondadas para a linha */
}

/* Fim dos estilos unificados para títulos de seção */

.services-container {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  text-align: center;
}

.services-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 25rem;
  margin-left: 1rem;
  text-align: center;
}

.services-box .texto-paragrafo {
  text-align: justify;
}

.services-container .services-box {
  padding: 2rem 1rem 2.5rem;
  border-radius: 1.2rem;
  text-align: center;
  border: solid 0.15rem var(--bg-color-01);
  background-color: var(--bg-color-02);
  transition: 0.5s ease;
}

.services-container .services-box:hover {
  border-color: var(--main-color);
  transform: scale(1.03);
}

.services-box i {
  font-size: 4.3rem;
  color: var(--main-color);
}

.services-box h3 {
  font-size: 1.5rem;
}

.services-box p {
  margin: 0.5rem;
  letter-spacing: 0.1rem;
  /* N linhas */
  display: -webkit-box;
  -webkit-line-clamp: 4; /* Quantidade de linhas */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.portfolio {
  background-color: var(--bg-color-02);
}

.portfolio-container {
  display: grid;
  gap: 1.2rem;
}

.portfolio-box {
  position: relative;
  border-radius: 0.6rem;
  box-shadow: 0 0 0.6rem var(--bg-color-01);
  overflow: hidden;
  display: flex;
}

.portfolio-box img {
  width: 100%;
  height: 100%; /* Garante que a imagem preencha a altura do box se necessário */
  object-fit: cover; /* Faz a imagem cobrir o espaço sem distorcer */
  object-position: center; /* Centraliza a imagem */
  transition: 0.5s ease;
}

.portfolio-box:hover img {
  /* Corrigido: o hover deve ser no box para afetar a img */
  transform: scale(1.05); /* Leve aumento no hover */
}

.portfolio-box .portfolio-layer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    rgba(0, 0, 0, 0.2),
    rgba(0, 14, 23, 0.8)
  ); /* Fundo mais escuro para legibilidade */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 1.5rem; /* Reduzido globalmente para dar mais espaço ao conteúdo */
  opacity: 0; /* Começa invisível, para um fade-in mais suave */
  transform: translateY(20px); /* Começa um pouco abaixo, para um efeito de subida suave */
  transition: 0.5s ease;
  color: var(--text-color);
  box-sizing: border-box; /* Garante que o padding não aumente o tamanho total */
  overflow-y: auto; /* Permite scroll vertical se o conteúdo for muito grande */
}
.portfolio-box:hover .portfolio-layer {
  opacity: 1;
  transform: translateY(0); /* Sobe para a posição final */
}
.portfolio-layer h4 {
  /* Corrigido de h3 para h4 para corresponder ao HTML */
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  word-break: break-word; /* Permite quebrar palavras longas */
  overflow-wrap: break-word; /* Alternativa/complemento para word-break */
          color: var(--text-color);
}

.portfolio-layer p {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  line-height: 1.5;
  text-align: justify; /* Justifica o texto do parágrafo */
          color: var(--text-color);
  max-width: 95%; /* Garante que o parágrafo não ocupe toda a largura, melhorando a leitura */

  /* Ajustes para evitar que o texto ultrapasse a div */
  /* Limita a altura e adiciona barra de rolagem se necessário */
  /* Ajuste o max-height com base no seu layout para que o conteúdo se encaixe */
  max-height: 120px; /* Valor de exemplo, ajuste conforme necessário */
  overflow-y: auto;

  /* Adiciona um espaçamento abaixo do parágrafo */
  margin-bottom: 10px;

  /* Garante que o texto ocupe a largura disponível */
  width: 100%;

  /* Garante que o texto quebre linhas */
  white-space: normal;
  word-wrap: break-word; /* Ou overflow-wrap: break-word; */
}

/* Estilo para a barra de rolagem no Chrome/Edge/Safari */
.portfolio-layer p::-webkit-scrollbar {
    width: 6px;
}
.portfolio-layer p::-webkit-scrollbar-thumb {
    background-color: var(--main-color);
    border-radius: 3px;
}
.portfolio-layer p::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1); /* Fundo claro */
    border-radius: 10px;
}
/* Regras de quebra de palavra já estavam aqui, mantidas */
/*  word-break: break-word;  Removido - já definido acima */
/*  overflow-wrap: break-word; Removido - já definido acima */
/* Estilos para as Tags de Tecnologia */
.project-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.project-tags span {
  background-color: rgba(255, 255, 255, 0.15);
  color: var(--text-color);
  padding: 0.3rem 0.7rem; /* Ligeiramente menor */
  border-radius: 0.3rem;
  font-size: 1.1rem;
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Estilos para os Links/Botões do Projeto */
.project-links {
  display: flex;
  gap: 10px; /* Espaço entre os botões */
  align-items: center;
  flex-wrap: wrap; /* Permite que os botões quebrem para a próxima linha */
  justify-content: center; /* Centraliza os botões quando quebram a linha */
  margin-top: 1rem; /* Espaço acima dos botões */
  width: 100%; /* Garante que o flex container ocupe a largura */
}

/* Estilo base para os botões DENTRO do portfolio-layer */
/* Usando .portfolio-layer .btn-project para especificidade e evitar conflito com .btn global */
.portfolio-layer .btn-project {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 15px; /* Ajuste o padding */
  background-color: var(--bg-color-02); /* Fundo escuro (cinza ardósia) para o estado padrão */
  color: var(--text-color); /* Texto branco para alto contraste no fundo escuro */
  border-radius: 25px; /* Bordas mais arredondadas */
  font-size: 0.9rem; /* Tamanho da fonte */
  font-weight: 500;
  text-decoration: none;
  border: 2px solid transparent; /* Para manter o layout ao adicionar borda no hover */
  transition: all 0.3s ease;
  min-width: 110px; /* Largura mínima para consistência */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  /* position: relative;  Removido - não parece necessário aqui */
  /* overflow: hidden; Removido - não parece necessário aqui */
}

.portfolio-layer .btn-project i {
  margin-right: 6px; /* Espaço entre o ícone e o texto */
  font-size: 1.1rem; /* Tamanho do ícone */
}

.portfolio-layer .btn-project:hover {
  background-color: transparent; /* Fundo transparente, mostrando o fundo escuro do card */
  color: var(--main-color); /* Texto ciano, bem visível no fundo escuro */
  border-color: var(--main-color); /* Adiciona borda no hover */
  transform: translateY(-2px); /* Efeito sutil de elevação */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

/* Estilo específico para o botão de Deploy, se quiser diferenciar */
.portfolio-layer .btn-project.btn-deploy {
    background-color: #007bff; /* Azul como exemplo, pode ser outra cor do seu tema */
    color: var(--text-color); /* Usando var(--text-color) que é #ffffff, para garantir texto branco */
}

.portfolio-layer .btn-project.btn-deploy:hover {
    background-color: #0056b3; /* Azul mais escuro no hover */
    border-color: #0056b3; /* Borda correspondente */
    color: var(--text-color); /* Mantém o texto branco */
}
/* .btn-project:active {  Estilo antigo
  outline: 2px solid var(--main-color);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bg-color-01) 70%, transparent),
    0 4px 12px color-mix(in srgb, var(--main-color) 40%, transparent); /* Consistent glow with hover 
}*/

.portfolio-layer .btn-project:focus-visible { Estilo antigo
  font-size: 1.8rem;
  margin-right: 0.5rem;
  transition: transform 0.3s ease; /* Add transition for the icon */
}

/* Form */

/* Estilos para o formulário de contato na seção .contact */
.contact form {
  max-width: 45rem; /* Aumentado para uma sensação mais espaçosa, aprox. 720px */
  margin: 1.5rem auto;
  text-align: left;
  padding: 2.5rem 3rem; /* Padding interno mais generoso */
  background-color: var(--bg-color-02);
  border-radius: 1.2rem; /* Bordas mais suaves */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), 0 1px 5px rgba(0,0,0,0.08); /* Sombra mais suave e difundida */
}

.contact form .input-group {
  margin-bottom: 1.2rem; /* Espaçamento ajustado entre os grupos de input */
  position: relative;
}

.contact form .input-box {
  /* Adicionado para posicionar o ícone de validação */
  position: relative;
}

.contact form .input-box input,
.contact form .input-box textarea {
  width: 100%;
  padding: 1rem 1.3rem; /* Padding interno dos campos mais confortável */
  font-size: 1rem; /* Tamanho da fonte padrão e legível */
  color: var(--text-color);
  background-color: var(--bg-color-01); /* Fundo escuro para os campos */
  border-radius: 0.6rem; /* Bordas dos campos mais suaves */
  border: 2px solid transparent;
  transition: border-color 0.3s ease, box-shadow 0.3s ease,
    background-color 0.3s ease;
  resize: none; /* Impede que o textarea seja redimensionado pelo usuário */
}

.contact form .input-box input:focus,
.contact form .input-box textarea:focus {
  outline: none;
  border-color: var(--main-color); /* Borda ciano no foco */
  background-color: color-mix(in srgb, var(--bg-color-01) 90%, black);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--main-color) 25%, transparent); /* Sombra externa no foco mais pronunciada */
}

.contact form .input-box input::placeholder,
.contact form .input-box textarea::placeholder {
  color: color-mix(in srgb, var(--text-color) 50%, transparent); /* Placeholder ainda mais sutil */
  opacity: 1;
}

/* Estilos para mensagens de validação (controladas por JS) */
.contact form .form-message {
  display: block;
  font-size: 0.75rem;
  padding-left: 0.2rem; 
  font-weight: 500;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease-out, max-height 0.3s ease-out,
    margin-top 0.3s ease-out;
}

.contact form .form-message.error-message {
  color: var(--color-04); /* Vermelho para mensagens de erro */
}

.contact form .form-message.visible {
  /* Classe a ser adicionada via JS para mostrar a mensagem */
  opacity: 1;
  max-height: 3em; /* Altura suficiente para 1-2 linhas de mensagem */
  margin-top: 0.3rem; /* Espaço quando visível */
}

/* Estilos para campos com erro (classe adicionada por JS) */
.contact form .input-box input.error-field,
.contact form .input-box textarea.error-field {
  border-color: var(--color-04);
  background-color: color-mix(in srgb, var(--color-04) 10%, var(--bg-color-01)); /* Fundo levemente avermelhado mais perceptível */
}

.contact form .input-box input.error-field:focus,
.contact form .input-box textarea.error-field:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-04) 25%, transparent);
}

/* Estilos para campos válidos (opcional, classe adicionada por JS) */
.contact form .input-box input.valid-field,
.contact form .input-box textarea.valid-field {
  border-color: var(--color-02); /* Verde para campos válidos */
}

.contact form .input-box input.valid-field:focus,
.contact form .input-box textarea.valid-field:focus {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-02) 25%, transparent); /* Sombra externa verde no foco mais pronunciada */
}

/* Ocultar o campo honeypot via CSS */
.contact form .honeypot-field {
  display: none !important;
}

/* Estilos para Ícones de Validação */
.contact form .input-box .validation-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.1rem; /* Ícone de validação um pouco maior */
  display: none;
  pointer-events: none;
}

/* Mostrar e estilizar ícone quando o input é válido */
.contact form .input-box input.valid-field + .validation-icon,
.contact form .input-box textarea.valid-field + .validation-icon {
  display: inline-block;
  color: var(--color-02); /* Verde */
}
.contact form .input-box input.valid-field + .validation-icon::before,
.contact form .input-box textarea.valid-field + .validation-icon::before {
  content: "\f00c"; /* Ícone de check - FontAwesome */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

/* Mostrar e estilizar ícone quando o input é inválido */
.contact form .input-box input.error-field + .validation-icon,
.contact form .input-box textarea.error-field + .validation-icon {
  display: inline-block;
  color: var(--color-04); /* Vermelho */
}
.contact form .input-box input.error-field + .validation-icon::before,
.contact form .input-box textarea.error-field + .validation-icon::before {
  content: "\f00d"; /* Ícone de X/times - FontAwesome */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

.contact form .input-box input.valid-field,
.contact form .input-box input.error-field,
.contact form .input-box textarea.valid-field,
.contact form .input-box textarea.error-field {
  padding-right: 35px; /* Espaço para o ícone dentro do campo */
}

/* Botão de submissão do formulário */
.contact form .btn[type="submit"] {
  width: 100%;
  padding: 1rem 2rem; /* Padding do botão significativamente aumentado para destaque */
  font-size: 1.1rem; /* Tamanho da fonte do botão aumentado */
  font-weight: 700;
  margin-top: 1.5rem; /* Mais espaço acima do botão */
  /* text-transform: uppercase; */ /* Removido uppercase para um visual mais suave, opcional */
  letter-spacing: 0.08em; /* Espaçamento entre letras sutilmente aumentado */
  border-radius: 0.6rem; /* Para consistência com os inputs */
}

.contact form .btn[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--main-color) 35%, transparent); /* Sombra no hover mais pronunciada */
}

/* Estado de carregamento para o botão (controlado por JS) */
.contact form .btn[type="submit"].loading {
  cursor: wait;
  background-color: color-mix(
    in srgb,
    var(--main-color) 70%,
    var(--bg-color-02)
  );
  color: color-mix(in srgb, var(--bg-color-02) 70%, var(--main-color));
}

.contact form .btn[type="submit"].loading::after {
  content: "...";
  display: inline-block;
  animation: loading-dots 1.4s infinite steps(4, end);
  margin-left: 0.7em;
  font-size: 1.2em;
  line-height: 0;
}

@keyframes loading-dots {
  0%,
  20% {
    content: ".";
  }
  40% {
    content: "..";
  }
  60% {
    content: "...";
  }
  80%,
  100% {
    content: "....";
  }
}

/* Mensagem de status da submissão do formulário (controlada por JS) */
.contact form .form-submission-status-message {
  padding: 1rem;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  border-radius: 0.5rem;
  text-align: center;
  font-weight: 600;
  font-size: 0.95rem; /* Tamanho da fonte da mensagem de status ligeiramente aumentado */
  border-width: 2px;
  border-style: solid;
  display: none; /* Escondido por padrão, JS controla a visibilidade */
}

.contact form .form-submission-status-message.success {
  background-color: color-mix(in srgb, var(--color-02) 10%, transparent);
  color: var(--color-02);
  border-color: var(--color-02);
  display: block; /* Torna visível quando a classe .success é adicionada */
}

.contact form .form-submission-status-message.error {
  background-color: color-mix(in srgb, var(--color-04) 10%, transparent);
  color: var(--color-04);
  border-color: var(--color-04);
  display: block; /* Torna visível quando a classe .error é adicionada */
}
/* Fim do Form */

/* Rodapé Animação de Fade In no Footer */
.footer {
  background-color: var(--bg-color-02);
  color: var(--text-color); /* Mantido text-color, ajuste se preferir --main-color */
  text-align: center;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 15px 10px; /* Padding interno base para o conteúdo do footer */
  box-sizing: border-box; /* Garante que o padding não aumente as dimensões totais */
  opacity: 0; /* Começa invisível, aparece com o scroll */
  transition: opacity 1s ease-in-out; /* Efeito de transição */
  z-index: 998;
}

/* Quando o footer aparecer, ele terá opacidade 1 */
body.scrolled .footer {
  opacity: 1;
}

/* Animação do Coração Pulsante no Footer */
.heartbeat {
  display: inline-block; /* Necessário para transform funcionar corretamente */
  animation: heartbeat-animation 1.5s infinite ease-in-out;
  color: #ff4757; /* Cor vermelha para o coração, ajuste se desejar */
  font-size: 1.2em; /* Um pouco maior para destaque, ajuste conforme necessário */
  position: relative; /* Para melhor controle de posicionamento se necessário */
  top: 0.1em; /* Pequeno ajuste vertical para alinhar melhor com o texto */
}

@keyframes heartbeat-animation {
  0%, 100% { /* Estado inicial e final, coração no tamanho normal */
    transform: scale(1);
  }
  14% { /* Pico da primeira "batida", coração aumenta mais */
    transform: scale(1.3);
  }
  28% { /* Coração volta ao normal após a primeira batida */
    transform: scale(1);
  }
  42% { /* Pico da segunda "batida", um pouco menor que a primeira */
    transform: scale(1.15);
  }
  70% { /* Coração volta ao normal, preparando para o ciclo reiniciar */
    transform: scale(1);
  }
}

/* Ajuste opcional para o texto do footer se necessário */
.footer p {
  /* O font-size base será definido nas media queries. Removido 1.5rem daqui. */
  line-height: 1.6; /* Garante uma boa legibilidade entre as linhas */
}

/* Botão Voltar ao Topo - Estilos Base */
.back-to-top {
  position: fixed;
  background-color: var(--main-color);
  color: var(--bg-color-01); /* Cor do ícone */
  border-radius: 50%;
  display: flex; /* Para centralizar o ícone */
  align-items: center;
  justify-content: center;
  bottom: 20px; /* Posição base, será ajustada para ficar acima do Tawk.to se necessário */
  right: 20px;  /* Posição base */
  cursor: pointer;
  z-index: 1000; /* Acima do footer e tawk.to, mas abaixo do menu hamburguer (1001) */
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px); /* Começa um pouco abaixo para efeito de subida */
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.3s ease-in-out, box-shadow 0.3s ease, background-color 0.3s ease;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); /* Sombra sutil */
}

.back-to-top:hover {
  background-color: color-mix(in srgb, var(--main-color) 85%, black); /* Escurece um pouco no hover */
  box-shadow: 0 5px 15px rgba(var(--main-color-rgb), 0.35); /* Sombra mais pronunciada no hover */
  transform: translateY(-3px) scale(1.05); /* Leve elevação e aumento no hover */
}

.back-to-top:active {
  transform: translateY(0px) scale(1); /* Efeito de pressionar */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

body.scrolled .back-to-top {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Botão currículo */
.btn-cv {
  display: grid;
  align-items: center;
  justify-content: center;
  gap: 10px;
  pointer-events: auto;
}

.btn i {
  margin-right: 8px; /* Espaço entre o ícone e o texto */
  font-size: 1.3rem; /* Tamanho do ícone */
  align-items: center; /* Alinha o ícone verticalmente */
  justify-content: center; /* Alinha o ícone horizontalmente */
}

/* Cor dos links */
a {
  color: var(--main-color);
}

/* Botão */
.btn {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  background-color: var(--main-color);
  border-radius: 2rem;
  color: var(--bg-color-02);
  font-weight: 600;
  letter-spacing: 0.1rem;
  transition: 0.3s ease;
  margin-top: 1.2rem;
}

.btn:hover {
  box-shadow: 0 0 0.3rem var(--main-color);
  background-color: inherit;
  color: var(--main-color);
  cursor: pointer;
}

/* Garante que o texto dentro do span do .btn seja visível por padrão */
.btn span {
  color: inherit; /* Herda a cor do elemento .btn pai */
}

/* Estilos para o painel do menu responsivo (quando ativo) */
.nav-responsive {
  display: none; /* Escondido por padrão. JS alterna para display: flex com a classe .active */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--bg-color-02);
  z-index: 999; /* Abaixo do header (1000) e do ícone do menu (1001) */

  /* Layout principal: bandeiras à esquerda, links à direita */
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  padding-top: 4rem; /* Espaço para o header. Ajuste conforme a altura do seu header. */
  padding-bottom: 3rem;
  padding-left: 5%; /* Espaçamento lateral */
  padding-right: 5%;
  box-sizing: border-box;
  overflow-y: auto; /* Permite rolagem se o conteúdo for extenso */
  /* Adicione transições se desejar animação de entrada/saída */
  /* Ex: opacity: 0; transform: translateX(100%); transition: opacity 0.3s, transform 0.3s; */
}

.nav-responsive.active { /* Classe adicionada via JavaScript para mostrar o menu */
  display: flex;
  /* Ex: opacity: 1; transform: translateX(0); */
}

/* Botão menu hamburguer */
.menu-hamburguer {
  /* O display (block/none) é controlado pelas media queries abaixo */
  cursor: pointer;
  position: absolute; /* Posicionamento absoluto em relação ao 'header' */
  top: 1.1rem;  /* Posiciona o centro vertical do ícone alinhado com o padding-top do header */
  right: 6%;  /* Alinha com o padding lateral do header. Ajuste para valor fixo se preferir. */
  transform: translateY(-50%); /* Centraliza o ícone verticalmente em relação ao novo 'top: 1.1rem' */
  z-index: 1001; /* Acima do header e do painel .nav-responsive */
}

.bar1,
.bar2,
.bar3 {
  width: 2rem;
  height: 0.3rem;
  background-color: var(--text-color);
  margin: 0.4rem 0;
  transition: 0.3s ease;
}

.change .bar1 {
  transform: translate(0, 0.65rem) rotate(-45deg);
}

.change .bar2 {
  opacity: 0;
}

.change .bar3 {
  transform: translate(0, -0.65rem) rotate(45deg);
}

/* Media queries */

/* Extra small (xs): Smartphone (portrait) */
@media (min-width: 0px) {
  .menu-hamburguer {
    display: block;
  }

  .nav {
    display: none;
  }
  h1 {
    font-size: 1.4rem;
  }

  #introduction-name {
    font-size: 1.2rem;
  }

  #typing-effect {
    font-size: 1.4rem;
  }

  section {
    padding: 6rem 2.5rem;
  }

  .home,
  .about {
    flex-direction: column;
    gap: 1.2rem;
  }
  body { /* Ajuste para telas XS */
    /* Footer height ~50px + Tawk.to height ~60px + space ~10px = ~120px */
    padding-bottom: 120px;
  }

  .btn-cv {
    display: column; /* Deveria ser flex ou grid, mas mantendo para consistência com o original se for intencional */
    align-items: center;
    justify-content: center;
    gap: 5px;
    /* pointer-events: auto; */ /* Removido daqui, já está no .btn-cv global */
  }

  .home-img,
  .about-img {
    width: 80%;
    max-width: 80%;
  }
  .home-content,
  .about-content {
    width: 100%;
  }

  .home-content div {
    text-align: center;
  }

  .home-content h1,
  .about-content h1 {
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.3;
  }

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

  .services-box {
    width: 100%;
  }

  .footer {
    padding: 10px 10px; /* Padding interno do footer */
  }
  .footer p {
    font-size: 0.8rem;
  }
  .back-to-top {
    /* Se Tawk.to estiver no canto inferior direito (~60-70px de altura) */
    bottom: 85px; /* (Altura Tawk.to + 15px de espaço) */
    right: 15px;
    width: 40px;
    height: 40px;
    font-size: 18px;
  }

  /* Ajustes específicos para o conteúdo do portfolio em telas pequenas */
  .portfolio-box .portfolio-layer {
    padding: 1rem; /* Padding reduzido para telas pequenas */
  }

  .portfolio-layer h4 {
    font-size: 1.4rem; /* Fonte menor para o título */
    margin-bottom: 0.6rem;
  }

  .portfolio-layer p {
    max-height: 80px;
    font-size: 0.95rem;
    margin-bottom: 0.8rem;
    line-height: 1.4;
  }

  .project-tags {
    gap: 0.3rem;
    margin-bottom: 1rem;
  }

  .project-tags span {
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
  }

  .project-links {
    gap: 0.5rem;
  }

  .btn-project { /* Dentro de .portfolio-layer */
    font-size: 0.9rem;
    padding: 0.5rem 0.8rem;
  }
  .btn-project i {
    font-size: 1.1rem;
    margin-right: 0.3rem;
  }
}

/* Extra small (sm): Smartphone (landscape) */
@media (min-width: 576px) {
  .home-img,
  .about-img {
    width: 65%;
    max-width: 65%;
  }

  body { /* Ajuste para telas SM */
    /* Footer height ~55px + Tawk.to height ~60px + space ~10px = ~125px */
    padding-bottom: 125px;
  }
  h1 {
    font-size: 2rem;
  }

  #introduction-name {
    font-size: 1.5rem;
  }

  #typing-effect {
    font-size: 2rem;
  }

  .services-box {
    width: 70%;
  }

  .btn-cv {
    display: column; /* Deveria ser flex ou grid */
    align-items: center;
    justify-content: center;
    gap: 5px;
  }

  .footer {
    padding: 12px 15px; /* Padding interno do footer */
  }
  .footer p {
    font-size: 0.9rem;
  }
  .back-to-top {
    bottom: 90px; /* (Altura Tawk.to + 20px de espaço) */
    right: 20px;
    width: 45px;
    height: 45px;
    font-size: 20px;
  }
}

/* Medium (md): Tablet */
@media (min-width: 768px) {
  .menu-hamburguer {
    display: none;
  }

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

  .nav-responsive {
    display: none;
  }

  body { /* Ajuste para telas MD */
    /* Footer height ~60px + Tawk.to height ~60px + space ~15px = ~135px */
    padding-bottom: 135px;
  }
  h1 {
    font-size: 2.4rem;
  }

  #introduction-name {
    font-size: 1.5rem;
  }

  #typing-effect {
    font-size: 2.4rem;
  }

  .btn-cv {
    display: column; /* Deveria ser flex ou grid */
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  .home,
  .about {
    flex-direction: row;
    justify-content: space-evenly;
  }

  .home-img,
  .about-img {
    max-width: 35%;
  }

  .home-content,
  .about-content {
    width: 50%;
  }

  .services-box {
    width: 60%;
    margin-bottom: 2rem;
  }

  .portfolio-container {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
  }

  .footer {
    padding: 15px 20px; /* Padding interno do footer */
  }
  .footer p {
    font-size: 1rem;
  }
  .back-to-top {
    bottom: 90px; /* (Altura Tawk.to + 20px de espaço) */
    right: 20px;
    width: 50px;
    height: 50px;
    font-size: 24px;
  }

  .contact form .input-box input {
    width: 100%;
  }
}

/* Large (lg): Notebook */
@media (min-width: 992px) {
  .services-container {
    flex-direction: row;
    gap: 1.2rem;
    align-items: center;
    justify-content: space-around;
  }

  .btn-cv {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  body { /* Ajuste para telas LG */
    /* Footer height ~65px + Tawk.to height ~60px + space ~15px = ~140px */
    padding-bottom: 140px;
  }
  h1 {
    font-size: 2.8rem;
  }

  #introduction-name {
    font-size: 1.8rem;
  }

  #typing-effect {
    font-size: 2.8rem;
  }

  .footer {
    padding: 18px 25px; /* Padding interno do footer */
  }
  .footer p {
    font-size: 1.1rem;
  }
  .back-to-top {
    /* (Altura Tawk.to + 25px de espaço) */
    bottom: 95px;
    right: 25px;
  }
}

/* Extra large (xl): Desktop */
@media (min-width: 1200px) {
  .home-img,
  .about-img {
    max-width: 25%;
  }

  body { /* Ajuste para telas XL */
    /* Footer height ~70px + Tawk.to height ~60px + space ~20px = ~150px */
    padding-bottom: 150px;
  }
  .home-content h1 {
    font-size: 2.7rem;
  }

  .home-content h3 {
    font-size: 2rem;
  }

  .portfolio-container {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
  }

  .btn-cv {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }

  h1 {
    font-size: 3.2rem;
  }

  #introduction-name {
    font-size: 2.5rem;
  }

  #typing-effect {
    font-size: 3.2rem;
  }

  .footer {
    padding: 20px 30px; /* Padding interno do footer */
  }
  .footer p {
    font-size: 1.2rem;
  }
  .back-to-top {
    /* (Altura Tawk.to + 25px de espaço) */
    bottom: 95px;
    right: 30px;
  }
}
/* /Media queries */

/* ==========================================================================
   Portfolio Swiper Carousel Styles (Revisado)
   ========================================================================== */

.portfolio {
  /* Se a seção portfolio tiver padding, o swiper pode precisar de margens negativas
       para ocupar a largura total, ou o padding deve ser aplicado dentro do swiper.
       Por simplicidade, vamos assumir que a seção .portfolio não tem padding horizontal
       que restrinja o .portfolio-swiper. */
}

.portfolio-swiper {
  width: 100%;
  max-width: 1600px; /* Limita a largura máxima em telas muito grandes */
  margin-left: auto; /* Centraliza o carrossel se max-width for atingido */
  margin-right: auto; /* Centraliza o carrossel se max-width for atingido */
  padding-top: 20px; /* Espaço acima do carrossel, abaixo do título da seção */
  padding-bottom: 70px; /* Aumentado para dar mais espaço para paginação/navegação */
  position: relative; /* Necessário para o posicionamento absoluto dos botões de navegação */
  overflow: hidden; /* Adicionado para garantir que nada "vaze" de forma inesperada */
}

.portfolio-swiper .swiper-wrapper {
  /* Swiper cuida do display: flex e alinhamento aqui */
}

.portfolio-swiper .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: stretch; /* Faz os portfolio-box terem a mesma altura */
  box-sizing: border-box;
  height: auto; /* Permite que a altura do slide seja determinada pelo conteúdo */
  /* O padding entre slides é melhor controlado pelo parâmetro 'spaceBetween' do Swiper */
  transition: transform 0.4s ease-out, opacity 0.4s ease-out; /* Suaviza transições de slide */
  /* Para o efeito coverflow, o Swiper pode aplicar transformações.
     Podemos adicionar um filtro para os slides não ativos para destacá-los menos. */
}

/* O .portfolio-box dentro do slide */
.portfolio-swiper .portfolio-box {
  width: 100%; /* Ocupa toda a largura do slide */
  max-width: 400px; /* Limita a largura de cada card em telas maiores, ajuste conforme necessário */
  margin-left: auto; /* Centraliza o card se max-width for menor que a largura do slide */
  margin-right: auto;
  height: 100%; /* Estica para preencher a altura do slide (devido ao align-items: stretch no slide) */
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out; /* Transições suaves para o box */
  /* Seus estilos existentes de .portfolio-box (border-radius, box-shadow, overflow: hidden para efeitos internos) devem ser mantidos.
       O overflow:hidden aqui é para o conteúdo DENTRO do portfolio-box, não para o slide em si. */
}

/* Estilo para slides não ativos no modo Coverflow para dar mais foco ao slide ativo */
.portfolio-swiper .swiper-slide:not(.swiper-slide-active) {
  opacity: 0.7; /* Reduz a opacidade dos slides não ativos */
  /* filter: blur(1px); */ /* Opcional: adiciona um leve desfoque */
}

.portfolio-swiper .swiper-slide-active .portfolio-box {
  /* Opcional: Se quiser dar um destaque extra ao box do slide ativo */
  /* box-shadow: 0 5px 25px rgba(0, 238, 255, 0.2); */ /* Sombra com a cor principal */
}

/* Garante que a imagem dentro do portfolio-box se comporte bem */
.portfolio-swiper .portfolio-box .portfolio-image {
  /* Seus estilos existentes para .portfolio-image devem funcionar, ex: */
  /* width: 100%; */
  /* height: 250px; */ /* Altura fixa para a imagem */
  /* object-fit: cover; */
}

/* Estilos para os botões de navegação do Swiper */
.portfolio-swiper .swiper-button-next,
.portfolio-swiper .swiper-button-prev {
  color: var(--main-color); /* Cor principal do seu tema */
  width: calc(
    var(--swiper-navigation-size) / 44 * 30
  ); /* Ajuste o tamanho se necessário */
  height: calc(var(--swiper-navigation-size) / 44 * 30);
  top: 50%; /* Centraliza verticalmente */
  transform: translateY(-50%); /* Ajuste fino da centralização vertical */
  /* Adiciona um fundo sutil para melhor visibilidade sobre imagens variadas */
  background-color: rgba(30, 30, 30, 0.3);
  border-radius: 50%;
  transition: background-color 0.3s ease, transform 0.2s ease, opacity 0.3s ease, box-shadow 0.3s ease;
  z-index: 10; /* Garante que fiquem sobre os slides */
}

.portfolio-swiper .swiper-button-next::after,
.portfolio-swiper .swiper-button-prev::after {
  font-size: 1rem; /* Tamanho das setas (menor para caber no círculo) */
  font-weight: bold;
}

/* Efeitos de Hover apenas para dispositivos com mouse */
@media (hover: hover) and (pointer: fine) {
  .portfolio-swiper .swiper-button-next:hover,
  .portfolio-swiper .swiper-button-prev:hover {
    background-color: rgba(0, 0, 0, 0.6); /* Escurece um pouco mais o fundo */
    transform: translateY(-50%) scale(1.08); /* Leve aumento e mantém o centro vertical */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); /* Adiciona uma sombra sutil */
  }
}

/* Feedback para toque (estado ativo) */
.portfolio-swiper .swiper-button-next:active,
.portfolio-swiper .swiper-button-prev:active {
  background-color: rgba(0, 0, 0, 0.5);
  transform: translateY(-50%) scale(0.95); /* Leve encolhimento para feedback de clique */
}

/* Posicionamento dos botões */
.portfolio-swiper .swiper-button-prev {
  left: 10px;
}
.portfolio-swiper .swiper-button-next {
  right: 10px;
}

/* Estilos para a paginação do Swiper */
.portfolio-swiper .swiper-pagination {
  bottom: 20px; /* Posição da paginação, um pouco mais para cima */
  z-index: 10; /* Sobre os slides */
}

.portfolio-swiper .swiper-pagination-bullet {
  background-color: var(--text-color);
  opacity: 0.6;
  width: 10px;
  height: 10px;
  margin: 0 5px !important; /* Espaçamento entre os bullets */
  transition: background-color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

.portfolio-swiper .swiper-pagination-bullet-active {
  background-color: var(--main-color);
  opacity: 1;
  transform: scale(1.2); /* Destaca o bullet ativo */
}

/* Hover para bullets da paginação (apenas em dispositivos com mouse) */
@media (hover: hover) and (pointer: fine) {
  .portfolio-swiper .swiper-pagination-bullet:not(.swiper-pagination-bullet-active):hover {
    background-color: var(--main-color);
    opacity: 0.8;
  }
}

/* Ajustes para telas menores */
@media (max-width: 767px) {
  .portfolio-swiper .portfolio-box {
    max-width: 90%; /* Permite que o card ocupe mais da largura do slide */
    /* Para coverflow, pode ser necessário ajustar isso ou deixar o Swiper controlar mais a largura */
  }
  /* Ajustes específicos para o coverflow em telas menores, se necessário */
  /* Ex: .portfolio-swiper .swiper-slide { width: 80% !important; } // Forçar largura se 'auto' não funcionar bem */

  .portfolio-swiper .swiper-button-next,
  .portfolio-swiper .swiper-button-prev {
    /* Opcional: Ocultar botões em telas muito pequenas se a navegação por swipe for suficiente */
    /* display: none; */
    width: calc(var(--swiper-navigation-size) / 44 * 26);
    height: calc(var(--swiper-navigation-size) / 44 * 26);
  }
  .portfolio-swiper .swiper-button-next::after,
  .portfolio-swiper .swiper-button-prev::after {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .portfolio-swiper {
    padding-bottom: 60px;
  }
  .portfolio-swiper .swiper-slide:not(.swiper-slide-active) {
    opacity: 0.6; /* Ainda menos opacidade para slides não ativos em telas pequenas */
    /* filter: blur(0.5px); */
  }
  .portfolio-swiper .swiper-button-next,
  .portfolio-swiper .swiper-button-prev {
    /* display: none; */ /* Comentado para que os botões apareçam em telas pequenas */
    width: calc(
      var(--swiper-navigation-size) / 44 * 24
    ); /* Slightly larger for better tap */
    height: calc(var(--swiper-navigation-size) / 44 * 24);
  }
  .portfolio-swiper .swiper-button-next::after,
  .portfolio-swiper .swiper-button-prev::after {
    font-size: 0.8rem; /* Ícone da seta menor */
  }
}

/* Contêiner para os links de navegação DENTRO do .nav-responsive ativo */
.nav-responsive-items {
  display: flex;
  flex-direction: column; /* Empilha os links verticalmente */
  align-items: flex-end; /* Alinha os textos dos links à direita, dentro deste bloco */
  /* width: auto; /* A largura será determinada pelo conteúdo e pelo flex pai .nav-responsive */
  box-sizing: border-box; /* Garante que o padding não aumente a largura total */
}

/* Estilo para cada link DENTRO do .nav-responsive-items */
.nav-responsive-items a {
  padding: 10px 0; /* Espaçamento vertical */
  font-size: 1.2rem; /* Tamanho da fonte */
  text-decoration: none;
  color: var(--text-color); /* Cor do texto dos links */
  white-space: nowrap; /* Evita quebra de linha em links longos */
  margin-bottom: 10px; /* Espaçamento entre os links */
  text-align: right; /* Força o alinhamento do texto do link à direita */
  transition: color 0.3s ease; /* Transição para o hover */
}
.nav-responsive-items a:hover {
  color: var(--main-color); /* Cor no hover, igual à navegação desktop */
}
.nav-responsive-items a:last-child {
  margin-bottom: 0; /* Remove a margem do último link */
}

/* Contêiner para as bandeiras de tradução DENTRO do .nav-responsive ativo */
.nav-responsive-flags {
  display: flex;
  flex-direction: row; /* Alinha as bandeiras lado a lado */
  justify-content: center; /* Centraliza as bandeiras verticalmente dentro deste bloco */
  align-items: center;
  flex-shrink: 0; /* Impede que o bloco de bandeiras encolha */
  gap: 1rem; /* Espaçamento entre as bandeiras */
}

/* Estilo para cada imagem de bandeira DENTRO do .nav-responsive-flags */
.nav-responsive-flags img {
  /* margin: 8px 5px; /* Removido, pois 'gap' no contêiner pai cuida do espaçamento */
  cursor: pointer;
  width: 35px; /* Tamanho das bandeiras */
  height: auto; /* Mantém a proporção */
  border-radius: 4px; /* Bordas levemente arredondadas */
  transition: transform 0.25s ease-out, box-shadow 0.25s ease-out, opacity 0.25s ease-out;
}
.nav-responsive-flags img:hover {
  transform: scale(1.15) translateY(-2px); /* Leve elevação e aumento */
  opacity: 0.85; /* Suaviza um pouco a cor no hover */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adiciona uma sombra sutil */
}

/* Se você tiver uma classe como .flag-spacing, pode ajustar ou remover
   as margens dela se .nav-responsive-flags img já cuidar disso. */

   /* Estilos para Links de Redes Sociais */
.social-media {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem; /* Espaçamento ligeiramente aumentado */
    margin-top: 3rem; /* Aumentado o espaço acima */
    margin-bottom: 2rem; /* Adicionado espaço abaixo, antes do botão CV */
    pointer-events: auto; /* ESSENCIAL: Permite cliques nos links dentro de .home-content */
}

.social-icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px; /* Tamanho ligeiramente aumentado */
    height: 48px; /* Tamanho ligeiramente aumentado */
    border-radius: 50%;
    color: #ffffff; /* Cor do ícone */
    text-decoration: none;
    font-size: 24px; /* Tamanho do ícone aumentado */
    position: relative; /* Necessário para pseudo-elementos ::before e ::after */
    transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275), /* Efeito de "pulo" elástico */
                box-shadow 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Transição mais suave para a sombra */
    box-shadow:
        /* Efeito de espessura 3D sutil - borda inferior escura derivada do fundo */
        0 2px 0px color-mix(in srgb, var(--bg-color-01) 65%, black),
        /* Sombra principal projetada mais suave */
        0 4px 8px rgba(0, 0, 0, 0.15);
    /* overflow: hidden; Removido para não cortar brilhos/tooltips externos */
}

/* Efeito de borda neon dinâmica no hover usando ::before */
.social-icon-link::before {
    content: '';
    position: absolute;
    /* Ligeiramente maior que o ícone para a borda aparecer ao redor */
    top: -3px; left: -3px; right: -3px; bottom: -3px;
    border-radius: 50%;
    border: 2px solid transparent; /* Borda inicialmente transparente */
    opacity: 0;
    transform: scale(0.8); /* Começa menor */
    transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                opacity 0.35s ease-out,
                border-color 0.35s ease-out;
    z-index: 0; /* Atrás do conteúdo do link (ícone), mas acima do fundo do link */
    pointer-events: none; /* Não interfere com os eventos do mouse no link */
}

.social-icon-link:hover,
.social-icon-link:focus-visible { /* Adicionado estado de foco para acessibilidade */
    transform: translateY(-5px) scale(1.12); /* Interação de hover levemente mais sutil */
    box-shadow:
        /* Espessura 3D mais pronunciada e contrastante no hover */
        0 3px 0px color-mix(in srgb, var(--bg-color-01) 55%, black),
        /* Sombra projetada mais forte e distante devido à elevação */
        0 8px 18px rgba(0, 0, 0, 0.25);
    outline: none; /* Remove outline padrão no foco, pois temos o box-shadow */
}

.social-icon-link:hover::before,
.social-icon-link:focus-visible::before {
    transform: scale(1); /* Borda expande para o tamanho normal */
    opacity: 0.8; /* Borda neon se torna visível */
    border-color: var(--main-color); /* Cor principal do site para o brilho neon */
}

/* Tooltip personalizada usando ::after */
.social-icon-link::after {
    content: attr(aria-label); /* Pega o texto do atributo aria-label */
    position: absolute;
    bottom: 130%; /* Posiciona a tooltip acima do ícone */
    left: 50%;
    transform: translateX(-50%) translateY(5px); /* Começa um pouco para baixo e centralizada */
    background-color: var(--bg-color-02); /* Fundo da tooltip */
    color: var(--text-color); /* Texto da tooltip */
    padding: 7px 14px; /* Espaçamento interno da tooltip */
    border-radius: 6px; /* Bordas arredondadas */
    font-size: 0.9rem; /* Tamanho da fonte da tooltip */
    font-weight: 500;
    white-space: nowrap; /* Impede que o texto da tooltip quebre linha */
    opacity: 0;
    visibility: hidden;
    /* Transição suave com delay para não aparecer/sumir abruptamente */
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility 0s 0.3s;
    z-index: 20; /* Garante que a tooltip fique sobre outros elementos */
    box-shadow: 0 3px 10px rgba(0,0,0,0.25);
    pointer-events: none; /* Não interfere com os eventos do mouse no link */
}

.social-icon-link:hover::after,
.social-icon-link:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-8px); /* Move a tooltip para cima */
    transition-delay: 0.1s, 0.1s, 0s; /* Pequeno delay para a tooltip aparecer */
}

.social-icon-link i {
    line-height: 1;
    position: relative; /* Para garantir que o ícone fique sobre o ::before */
    z-index: 1;
    /* Atualiza a transição para incluir transform e text-shadow com duração e easing consistentes */
    transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                text-shadow 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.social-icon-link:hover i,
.social-icon-link:focus-visible i {
    /* Ajusta o transform para um efeito 3D mais pronunciado */
    transform: perspective(200px) scale(1.15) translateZ(15px) rotateY(-10deg);
    /* Adiciona text-shadow para o efeito de rastro/sombra 3D no ícone */
    text-shadow: 
        /* Camadas para profundidade */
        0 1px 0px rgba(0,0,0,0.1), /* Sombra sutil logo abaixo */
        1px 1px 0px rgba(0,0,0,0.08),
        2px 2px 0px rgba(0,0,0,0.06),
        3px 3px 0px rgba(0,0,0,0.04),
        4px 4px 0px rgba(0,0,0,0.02),
        /* Brilho sutil com a cor principal para destacar */
        0 0 8px rgba(var(--main-color-rgb), 0.3),
        /* Sombra projetada mais escura para contraste */
        2px 4px 5px rgba(0,0,0,0.2);
}

/* Cores de fundo específicas de cada rede social */
.social-icon-link.github {
    background-color: #24292e;
}
.social-icon-link.github:hover,
.social-icon-link.github:focus-visible {
    background-color: #3a4047; /* Levemente mais claro no hover */
}

.social-icon-link.facebook {
    background-color: #1877F2;
}
.social-icon-link.facebook:hover,
.social-icon-link.facebook:focus-visible {
    background-color: #136ad5; /* Levemente mais escuro no hover */
}

.social-icon-link.instagram {
    background: #f09433; 
    background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 
    background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
    background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
}
/* Para o Instagram, o hover no background é mais complexo com gradiente.
   O efeito de borda neon e sombra já fornecerão um bom feedback visual. */

.social-icon-link.linkedin {
    background-color: #0A66C2;
}
.social-icon-link.linkedin:hover,
.social-icon-link.linkedin:focus-visible {
    background-color: #095bb1; /* Levemente mais escuro no hover */
}

.social-icon-link.xtwitter {
    background-color: #000000;
}
.social-icon-link.xtwitter:hover,
.social-icon-link.xtwitter:focus-visible {
    background-color: #1e1e1e; /* Levemente mais claro no hover */
}

/* Garante que o ícone FontAwesome (X) seja renderizado corretamente */
.social-icon-link .fab.fa-x-twitter {
    font-family: "Font Awesome 6 Brands", "FontAwesome", sans-serif; /* Adicionado FontAwesome como fallback genérico */
    font-weight: 400; /* Brands são geralmente 400 ou 'normal' */
}

/* ==========================================================================
   Botão Flutuante do WhatsApp
   ========================================================================== */

/* Botão Voltar ao Topo */
/* .back-to-top já foi definido e ajustado nas media queries anteriores.
   As regras aqui são para garantir que os ajustes de posicionamento coordenado
   com o rodapé sejam aplicados corretamente. */


/* styles.css ou seu arquivo CSS principal */

.nav .language-switcher-container {
    margin-left: 1.5rem; /* Aumenta o espaço entre o último link e as bandeiras */
}

.language-switcher-container {
    display: flex; /* Alinha os botões de idioma lado a lado */
    align-items: center; /* Centraliza verticalmente, se necessário */
}

.language-switcher {
    background-color: transparent; /* Fundo transparente por padrão */
    border: 2px solid transparent; /* Borda base, transparente */
    padding: 4px; /* Espaço entre a borda e a imagem da bandeira */
    margin: 0 7px; /* Espaçamento horizontal entre os botões de bandeira */
    cursor: pointer;
    border-radius: 50%; /* Torna o botão perfeitamente circular */
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1); /* Transição suave e elástica */
    line-height: 0; /* Remove espaço extra se a imagem não preencher o botão */
    display: inline-flex; /* Para melhor controle do conteúdo interno */
    align-items: center;
    justify-content: center;
    width: 42px; /* Largura do círculo do botão */
    height: 42px; /* Altura do círculo do botão */
    overflow: hidden; /* Garante que a imagem não ultrapasse o círculo */
    position: relative; /* Essencial para o posicionamento dos pseudo-elementos */
}

/* Pseudo-elemento para o efeito de preenchimento radial no hover */
.language-switcher::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background-color: color-mix(in srgb, var(--main-color) 25%, transparent); /* Cor do preenchimento */
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), height 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 0; /* Atrás da imagem */
}

.language-switcher:hover::before,
.language-switcher:focus-visible::before {
    width: 120%; /* Um pouco maior que o botão para cobrir totalmente */
    height: 120%;
}

.language-switcher img {
    display: block; /* Garante que a imagem se comporte como bloco */
    position: relative; /* Para garantir que a imagem fique acima do ::before */
    z-index: 1;
    width: 30px;  /* Largura da imagem da bandeira, menor que o botão */
    height: 22px; /* Altura da imagem da bandeira */
    border-radius: 4px; /* Arredondamento um pouco maior na própria imagem */
    object-fit: cover; /* Garante que a imagem cubra o espaço designado sem distorcer */
    transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.language-switcher:hover,
.language-switcher:focus-visible { /* :focus-visible para melhor acessibilidade no foco por teclado */
    border-color: var(--main-color); /* A borda ainda aparece sobre o ::before */
    background-color: color-mix(in srgb, var(--main-color) 10%, transparent); /* Fundo sutil com a cor principal */
    transform: scale(1.18) translateY(-3px); /* Efeito de "flutuar" e aumentar mais pronunciado */
    box-shadow: 0 6px 18px color-mix(in srgb, var(--main-color) 30%, transparent),
                0 0 0 3px color-mix(in srgb, var(--main-color) 20%, transparent); /* Sombra e brilho externo */
    outline: none;
}

.language-switcher:hover img,
.language-switcher:focus-visible img {
    transform: scale(1.05); /* Leve zoom na imagem da bandeira no hover do botão */
}

/* Estilo para o botão de idioma ativo */
.language-switcher.active-lang {
    border-color: var(--main-color);
    border-width: 3px; /* Borda um pouco mais grossa para o ativo */
    /* A sombra base será controlada pela animação */
    transform: scale(1.1); /* Leve aumento para o botão ativo, menor que o hover */
    opacity: 1; /* Garante opacidade total para o ativo */
    filter: grayscale(0%); /* Remove qualquer filtro de grayscale */
    animation: active-flag-pulse 2.5s infinite ease-in-out;
}

@keyframes active-flag-pulse {
    0% {
        box-shadow: 0 0 12px color-mix(in srgb, var(--main-color) 40%, transparent),
                    0 0 0 0px color-mix(in srgb, var(--main-color) 20%, transparent);
    }
    50% {
        box-shadow: 0 0 20px color-mix(in srgb, var(--main-color) 65%, transparent),
                    0 0 0 4px color-mix(in srgb, var(--main-color) 10%, transparent);
    }
    100% {
        box-shadow: 0 0 12px color-mix(in srgb, var(--main-color) 40%, transparent),
                    0 0 0 0px color-mix(in srgb, var(--main-color) 20%, transparent);
    }
}

/* Brilho sutil na imagem da bandeira ativa */
.language-switcher.active-lang img {
    filter: drop-shadow(0 0 3px var(--main-color));
}

/* Tooltip customizada */
.language-switcher::after {
    content: attr(title); /* Pega o texto do atributo title do botão */
    position: absolute;
    bottom: 125%; /* Posiciona acima do botão */
    left: 50%;
    transform: translateX(-50%) translateY(5px); /* Começa um pouco para baixo */
    background-color: var(--bg-color-02);
    color: var(--text-color);
    padding: 6px 12px;
    border-radius: 5px;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out, visibility 0s 0.25s;
    z-index: 10; /* Acima de outros elementos */
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.language-switcher:hover::after,
.language-switcher:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-5px); /* Move para a posição final */
    transition-delay: 0.1s, 0.1s, 0s; /* Pequeno delay para aparecer */
}

/* Opcional: Diminuir um pouco a opacidade das bandeiras inativas */
.language-switcher:not(.active-lang) {
    opacity: 0.6; /* Torna os inativos um pouco mais sutis */
    filter: grayscale(40%); /* Adiciona um leve tom de cinza aos inativos */
}

.language-switcher:not(.active-lang):hover {
    opacity: 1; /* Opacidade total no hover, mesmo se inativo */
    filter: grayscale(0%); /* Remove o filtro de cinza no hover */
}

/* Para o menu responsivo, se precisar de ajustes específicos */
.nav-responsive-flags .language-switcher {
    /* Os estilos globais de .language-switcher já se aplicam.
       Ajuste o tamanho ou margens aqui se necessário para o mobile. */
    width: 38px; height: 38px; /* Exemplo de tamanho um pouco menor para mobile */
    /* margin: 0 5px; */ /* Espaçamento ligeiramente menor no mobile */
}

.nav-responsive-flags .language-switcher img {
    width: 26px; height: 19px; /* Imagem menor para botões menores no mobile */
}

/* Animação de flutuação aprimorada para imagens */
@keyframes enhancedFloatAnimation {
  0%, 100% {
    transform: translateY(0) scale(1);
    filter: drop-shadow(0 6px 4px rgba(0, 0, 0, 0.15)); /* Sombra quando a imagem está "mais baixa" */
  }
  50% {
    transform: translateY(-20px) scale(1.03); /* Move mais para cima e aumenta levemente o tamanho */
    filter: drop-shadow(0 22px 10px rgba(0, 0, 0, 0.2)); /* Sombra mais pronunciada e afastada quando "mais alta" */
  }
}

.floating-image {
  /* Aplica a animação aprimorada */
  animation: enhancedFloatAnimation 3.5s ease-in-out infinite;
  /* Estado inicial da sombra para evitar 'pulos' visuais no carregamento */
  filter: drop-shadow(0 6px 4px rgba(0, 0, 0, 0.15));
  /* Garante que a imagem fique sobre outros elementos se necessário durante a animação */
  position: relative;
  z-index: 1;
}

/* Em /css/style.css */

/* Testimonials Section - REFINADO */
.testimonials {
    padding: 80px 5% 100px; /* Aumentar padding vertical, manter responsivo lateral */
    background-color: var(--bg-color-01); /* Fundo consistente com outras seções escuras */
    text-align: center;
    position: relative;
    /* overflow: hidden;  Comentado ou removido para permitir que o efeito parallax não seja cortado */
    perspective: 1500px; /* Adiciona perspectiva para o efeito parallax na seção inteira */
}

.testimonials h2 {
    margin-bottom: 4.5rem; /* Mais espaço abaixo do título */
    font-size: 2.6rem; /* Ajuste fino no tamanho do título */
    color: var(--text-color);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
}

.testimonials h2 span {
    color: var(--main-color);
}

/* Linha decorativa abaixo do título da seção de depoimentos (se não estiver global) */
.testimonials h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -15px; /* Ajustar posição da linha */
    transform: translateX(-50%);
    width: 120px; /* Linha um pouco maior */
    height: 5px;  /* Linha mais espessa */
    background-color: var(--main-color);
    border-radius: 3px;
}


.testimonial-swiper {
    width: 100%;
    padding-top: 20px;
    padding-bottom: 50px; /* Reduzido, pois não há mais setas ocupando espaço vertical */
    transform-style: preserve-3d; /* Necessário para transformações 3D no contêiner do Swiper */
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); /* Transição suave para o reset do parallax */
    overflow: hidden; /* Adicionado para conter os slides e evitar overflow que causa barras de rolagem */
}

.testimonial-swiper .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: stretch;
    height: auto; 
    box-sizing: border-box;
    perspective: 1200px; /* Adiciona perspectiva para o efeito 3D no card */
    padding: 10px 0; /* Adiciona um pouco de padding vertical para o efeito 3D não cortar */
}

.testimonial-box {
    transform-style: preserve-3d; /* Necessário para transformações 3D */
    background: #2c333f; /* Um pouco mais claro que o bg-color-02 para leve destaque */
    border-radius: 15px; /* Bordas mais arredondadas */
    padding: 30px 35px; /* Mais padding interno */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15), /* Sombra base mais suave */
                0 0 0 1px rgba(255, 255, 255, 0.05); /* Borda interna sutil para definição */
    text-align: left;
    width: 100%;
    max-width: 500px; /* Aumentar um pouco a largura máxima do card */
    margin: 0 10px; /* Margem lateral entre os cards, ajuste se usar spaceBetween alto */
    display: flex;
    flex-direction: column;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
                box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    min-height: 280px; /* Altura mínima para consistência, ajuste conforme o conteúdo */
}

.testimonial-header {
    display: flex;
    align-items: center; /* Alinha avatar e ícone de citação verticalmente */
    margin-bottom: 20px; /* Espaço abaixo do cabeçalho do depoimento */
}

.testimonial-avatar {
    width: 70px; /* Tamanho do avatar */
    height: 70px;
    border-radius: 50%; /* Avatar circular */
    object-fit: cover; /* Garante que a imagem cubra o espaço sem distorcer */
    margin-right: 20px; /* Espaço entre o avatar e o ícone de citação */
    border: 3px solid var(--main-color); /* Borda com a cor principal */
    box-shadow: 0 0 10px rgba(var(--main-color-rgb), 0.3);
}

/* Ajusta a margem do ícone de citação, já que o avatar está antes dele */
.testimonial-header .testimonial-quote-icon {
    margin-bottom: 0; /* Remove a margem inferior original, pois está no flex */
}
.testimonial-box:hover {
    transform: translateY(-10px) scale(1.03) rotateY(8deg) rotateX(2deg); /* Efeito 3D no hover */
    box-shadow: 0 12px 35px rgba(var(--main-color-rgb), 0.25), /* Sombra principal mais pronunciada com a cor do tema */
                0 0 0 2px var(--main-color); /* Borda de destaque no hover */
}

.testimonial-quote-icon {
    font-size: 2.5rem; /* Ícone de citação maior */
    color: var(--main-color);
    /* margin-bottom: 20px;  Movido para .testimonial-header */
    opacity: 0.8;
}

.swiper-slide:not(.swiper-slide-active) .testimonial-box {
    /* Opcional: Reduzir um pouco a opacidade dos cards não ativos se quiser mais foco no ativo */
    /* opacity: 0.75; */
}

.testimonial-text {
    font-size: 1.05rem; /* Ligeiramente maior para melhor leitura */
    line-height: 1.75;
    color: #e0e0e0; /* Cor do texto um pouco mais clara */
    margin-bottom: 25px;
    font-style: italic;
    flex-grow: 1; /* Faz o texto ocupar o espaço disponível */
}
.testimonial-footer {
    margin-top: auto; /* Empurra o rodapé (autor e cargo) para baixo */
    padding-top: 15px; /* Espaço acima do nome do autor */
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Linha sutil acima do autor */
}

.testimonial-author {
    font-size: 1.15rem;
    font-weight: 700; /* Mais destaque para o autor */
    color: #fff;
    margin-bottom: 7px;
    /* margin-top: auto; Movido para .testimonial-footer */
}

.testimonial-role {
    font-size: 0.95rem;
    color: #b0b0b0; /* Cor do cargo um pouco mais clara */
    font-weight: 500;
}

/* Animação de entrada para os elementos do card quando o slide se torna ativo */
.testimonial-box .testimonial-quote-icon,
.testimonial-box .testimonial-text,
.testimonial-box .testimonial-author,
.testimonial-box .testimonial-header /* Animando o header como um bloco */ {
    opacity: 0;
    transform: translateY(25px); /* Começam um pouco abaixo */
    transition-property: opacity, transform;
    transition-duration: 0.55s; /* Duração da animação de entrada */
    transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1); /* Easing suave */
}
/* Animação para o cabeçalho (avatar + ícone) */
.swiper-slide-active .testimonial-box .testimonial-header {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.25s; /* Delay para o ícone */
}
/* Os delays dos outros elementos podem precisar de ajuste se o header animar como um todo */
.swiper-slide-active .testimonial-box .testimonial-text {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.4s; /* Delay para o texto */
}
.swiper-slide-active .testimonial-box .testimonial-author {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.55s; /* Delay para o autor */
}
.swiper-slide-active .testimonial-box .testimonial-role {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.65s; /* Delay para o cargo */
}

/* Ajuste para a animação de entrada do rodapé */
.swiper-slide-active .testimonial-box .testimonial-footer {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.55s; /* Ajuste o delay conforme necessário, deve ser após o texto */
}

/* Esconder Setas de Navegação */
.testimonial-swiper .swiper-button-next,
.testimonial-swiper .swiper-button-prev {
    display: none !important;
}

/* Estilização da Paginação (Bullets) do Swiper de Testemunhos */
.testimonial-swiper .swiper-pagination-bullet {
    background-color: rgba(255, 255, 255, 0.4); /* Cor base mais sutil */
    opacity: 1; /* Opacidade total, a cor controla a visibilidade */
    width: 10px;
    height: 10px;
    margin: 0 6px !important; /* Ajustar espaçamento */
    transition: background-color 0.3s ease, transform 0.3s ease, width 0.3s ease;
    border-radius: 50%; /* Garante que sejam circulares */
}

.testimonial-swiper .swiper-pagination-bullet-active {
    background-color: var(--main-color);
    transform: scale(1.3);
    width: 12px; /* Bullet ativo um pouco maior */
}

/* Hover para bullets da paginação (apenas em dispositivos com mouse) */
@media (hover: hover) and (pointer: fine) {
    .testimonial-swiper .swiper-pagination-bullet:not(.swiper-pagination-bullet-active):hover {
        background-color: rgba(255, 255, 255, 0.7);
        transform: scale(1.1);
    }
}

/* Ajustes para telas menores */
@media (max-width: 768px) {
    .testimonials {
        padding: 60px 5% 80px;
    }
    .testimonials h2 {
        font-size: 2.2rem;
        margin-bottom: 3.5rem;
    }
    .testimonials h2::after {
        width: 100px;
        height: 4px;
        bottom: -10px;
    }
    .testimonial-box {
        padding: 25px 20px;
        max-width: 90%; /* Permite que o card ocupe mais espaço */
        min-height: auto; /* Altura mínima automática em telas menores */
    }
    .testimonial-text {
        font-size: 1rem;
    }
    .testimonial-author {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .testimonial-text {
        font-size: 0.95rem;
        line-height: 1.65;
    }
    .testimonial-author {
        font-size: 1rem;
    }
    .testimonial-role {
        font-size: 0.85rem;
    }
    .testimonial-swiper .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
        margin: 0 4px !important;
    }
    .testimonial-swiper .swiper-pagination-bullet-active {
        width: 10px;
    }
}