/* ======================= CONFIGURAÇÕES GLOBAIS E VARIÁVEIS ======================= */
:root {
  --primary-color: #0091a3; /* Azul Petróleo Suave */
  --dark-blue: #082d7a; /* Azul escuro, botões */
  --light-gray: #bfc4c9; /* Cinza claro para textos secundários */
  --white-ice: #f5f7fa; /* Branco Gelo para textos */
  --gray-spacial: #1c1c1e; /* Cinza espacial */
  --deep-black: #0a0a0a; /* Preto Profundo */
  --font-family: "SF Pro Display", sans-serif;
}

/* --- DEFINIÇÃO DA FONTE SF PRO DISPLAY --- */

/* Para o peso UltraLight (ultra fino) */
@font-face {
  font-family: "SF Pro Display";
  src: url("fonts/SFProDisplay-Ultralight.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
  font-display: swap; /* ADICIONADO AQUI */
}

/* Para o peso Light (fino) */
@font-face {
  font-family: "SF Pro Display";
  src: url("fonts/SFProDisplay-Light.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap; /* ADICIONADO AQUI */
}

/* Para o peso Regular (normal) */
@font-face {
  font-family: "SF Pro Display";
  src: url("fonts/SFPRODISPLAYREGULAR.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* ADICIONADO AQUI */
}

/* Para o peso Bold (negrito) */
@font-face {
  font-family: "SF Pro Display";
  src: url("fonts/SFPRODISPLAYBOLD.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap; /* ADICIONADO AQUI */
}

/* Para o peso Medium */
@font-face {
  font-family: "SF Pro Display";
  src: url("fonts/SFPRODISPLAYMEDIUM.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap; /* ADICIONADO AQUI */
}

/* Para o estilo Black Italic */
@font-face {
  font-family: "SF Pro Display";
  src: url("fonts/SFPRODISPLAYBLACKITALIC.otf") format("opentype");
  font-weight: 900;
  font-style: italic;
  font-display: swap; /* ADICIONADO AQUI */
}

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

body {
  font-family: var(--font-family);
  background-color: var(--primary-color);
  color: var(--white);
  text-align: center;
}

a {
  text-decoration: none;
  color: inherit;
}

/* ======================= ESTILOS DAS SEÇÕES COMUNS ======================= */
.section-title {
  font-size: 2.5rem; /* 40px */
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--white-ice);
}

.section-subtitle {
  font-size: 1.125rem; /* 18px */
  color: var(--white-ice);
  margin-bottom: 3rem;
  font-weight: 400;
}

/* ======================= SEÇÃO HERO ======================= */
.hero {
  position: relative; /* Essencial para o posicionamento do vídeo e do overlay */
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  overflow: hidden; /* Garante que nada saia dos limites da seção */
  /* mask-image: linear-gradient(to bottom, black 90%, transparent 100%); */
  /* box-shadow: 10px 20px 50px 10px rgba(0,0,0,0.7); */
}

/* Criamos um "overlay" escuro para garantir a legibilidade do texto sobre o vídeo */
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(2, 9, 26, 0.7);
  z-index: 1; /* Fica acima do vídeo, mas abaixo do conteúdo */
}

/* Agora, o vídeo */
.hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centraliza o vídeo perfeitamente */
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  object-fit: cover; /* Equivalente ao 'background-size: cover' para vídeos */
  z-index: 0; /* Fica no fundo de tudo */
}

.hero-title {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 1.5rem;
  color: var(--white-ice);
}

/* E finalmente, o conteúdo precisa de um z-index maior para ficar na frente */
.hero-content {
  position: relative; /* ou 'absolute' se precisar de mais controle */
  z-index: 2;
  text-align: center; /* Garantir o alinhamento central */
}

.hero-subtitle {
  font-size: 1.1rem;
  font-weight: 200;
  letter-spacing: 2px;
  margin-bottom: 4rem;
  color: var(--white-ice);
}

.hero-content img {
  width: 300px;
  height: auto;
}

.cta-button {
  background-color: var(--dark-blue);
  color: var(--white-ice);
  padding: 1rem 2.5rem;
  font-size: 1.2rem;
  border-radius: 50px;
  font-weight: 400;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cta-button:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(255, 255, 255, 0.75);
}

/* ======================= SEÇÃO DE FUNCIONALIDADES ======================= */
.features-section {
  padding: 6rem 2rem;
  /* Adicionei o alinhamento de texto aqui para os títulos principais */
  text-align: center;
}

.features-grid {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  max-width: 1100px;
  margin: 4rem auto 0; /* Adicionei uma margem no topo para separar do subtítulo */
}

.feature-item {
  flex-basis: 250px;
  text-align: center; /* Garante que o h3 e o p fiquem centralizados */
}

.feature-item i {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 65px;
  height: 65px;
  background-color: var(--white-ice);
  border-radius: 50%;
  font-size: 2rem;
  color: var(--primary-color);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 10px rgba(0, 98, 143, 0.9); /* Sombra suave padrão */

  /* A MÁGICA DA TRANSIÇÃO SUAVE! */
  /* Anima todas as propriedades (transform, box-shadow, etc.) em 0.3s */
  transition: all 0.3s ease;
}

.feature-item:hover i {
  background-color: var(
    --primary-color
  ); /* Muda o fundo do círculo para a cor primária */
  color: white; /* Muda o ícone para branco para ter contraste */

  /* BORDA LUMINOSA com box-shadow */
  /* Formato: [offset-x] [offset-y] [blur] [spread] [color] */
  /* Usamos um azul com transparência para criar o brilho */
  box-shadow: 0 0 20px 5px rgba(28, 111, 255, 0.5); /* Substitua pela sua var(--primary-color) em rgba */

  /* EFEITO DE CRESCIMENTO */
  transform: scale(1.1); /* Aumenta o tamanho do ícone em 10% */
}

.feature-item h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  color: var(--white-ice);
  font-weight: 600;
}

.feature-item p {
  color: var(--light-gray);
  font-size: 0.9rem;
  font-weight: 200;
  font-style: normal;
}

/* ======================= SEÇÃO DE EXPERIÊNCIA ======================= */
.experience-section {
  padding: 6rem 2rem;
  background-color: var(--white-ice);
  /* mask-image: linear-gradient(to top, black 95%, transparent 100%); */
}

.experience-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4rem;
  max-width: 1100px;
  margin: 0 auto;
  flex-wrap: wrap; /* Permite quebrar em telas menores */
}

.experience-text {
  flex: 1; /* Ocupa o espaço disponível */
  min-width: 300px; /* Largura mínima antes de quebrar */
  text-align: left;
}

.experience-text h2 {
  color: var(--deep-black);
}

.experience-text .highlight {
  color: var(--primary-color);
}

.experience-text p {
  margin-bottom: 2rem;
  color: var(--gray-spacial);
  line-height: 1.6;
  font-weight: 200;
}

.experience-text ul {
  list-style: none;
  padding: 0;
}

.experience-text li strong {
  margin-left: 10px;
  color: var(--primary-color);
}

.experience-text ul li {
  margin-bottom: 1rem;
  position: relative;
  font-style: normal;
  font-weight: 200;
}

.experience-text li i {
  color: var(--primary-color);
}

.experience-video {
  flex: 1;
  min-width: 300px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.experience-video::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(2, 9, 26, 0.5);
  border-radius: 10px;
  pointer-events: none;
}

.experience-video video {
  max-width: 100%;
  height: auto;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.75);
  border-radius: 10px;
  display: block;
}

/* ======================= SEÇÃO FORMULÁRIO ======================= */

/* Container principal da seção */
.form-section {
  padding: 80px 20px; /* Espaçamento interno (80px em cima/baixo, 20px nas laterais) */
  text-align: center; /* Centraliza todo o texto da seção */
  background-color: #f4f7f6; /* Um cinza bem claro para diferenciar do fundo branco */
}

.form-section .section-title {
  color: var(--primary-color);
}

.form-section .section-subtitle {
  color: var(--primary-color);
}

/* Container que envolve o formulário */
.form-container {
  max-width: 500px; /* Largura máxima para o formulário não ficar muito largo em telas grandes */
  margin: 40px auto 0; /* Centraliza o container na horizontal e adiciona uma margem no topo */
}

/* Estilização do formulário em si */
#cadastro-form {
  display: flex; /* Ativa o layout flexível */
  flex-direction: column; /* Coloca os itens um abaixo do outro */
  gap: 15px; /* Cria um espaço de 15px entre cada item do formulário (inputs e botão) */
}

/* Estilização dos campos de texto e email */
.form-container input[type="text"],
.form-container input[type="email"],
.form-container input[type="tel"] {
  width: 100%; /* Faz o campo ocupar 100% da largura do container */
  padding: 15px; /* Espaçamento interno para o texto não ficar colado nas bordas */
  border: 1px solid #ccc; /* Borda sutil */
  border-radius: 8px; /* Bordas arredondadas */
  font-size: 16px; /* Tamanho da fonte legível */
  font-family: "SF Pro Display", sans-serif; /* Mesma família de fonte do site */
  box-sizing: border-box; /* Garante que o padding não aumente a largura total do elemento */
  transition: border-color 0.3s, box-shadow 0.3s; /* Transição suave para o efeito de foco */
}

/* Efeito visual quando o usuário clica no campo */
.form-container input[type="text"]:focus,
.form-container input[type="email"]:focus,
.form-container input[type="tel"]:focus {
  border-color: #007bff; /* Muda a cor da borda para um azul chamativo */
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.25); /* Adiciona uma sombra sutil */
  outline: none; /* Remove a borda padrão do navegador */
}

/* Estilização do texto de exemplo (placeholder) */
.form-container input::placeholder {
  color: #999; /* Cor mais clara para o texto de placeholder */
}

/* Ajuste para o botão dentro do formulário */
.form-container .cta-button {
  width: 100%; /* Faz o botão ocupar toda a largura */
  padding: 15px; /* Aumenta o espaçamento interno para combinar com os inputs */
  font-size: 18px; /* Deixa a fonte do botão um pouco maior */
  font-weight: 400; /* Deixa o texto em negrito */
  cursor: pointer; /* Muda o cursor para uma "mãozinha" ao passar o mouse */
  border: transparent;
}

.form-container .cta-button:hover {
  filter: brightness(90%);
  transform: translateY(-2px);
}

/* Classe para esconder labels visualmente, mas mantê-las para leitores de tela */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ======================= SEÇÃO EM BREVE ======================= */
.coming-soon-section {
  position: relative; /* ESSENCIAL: Cria o contexto para o posicionamento do vídeo */
  height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* Garante que o vídeo não "vaze" para fora da seção */

  /* Removemos o background-image pois o vídeo será o novo fundo */
}

/* NOVO: Estilos para o vídeo de fundo */
.coming-soon-section .background-video {
  position: absolute; /* Tira o vídeo do fluxo normal da página */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Garante que o vídeo cubra tudo sem distorcer, similar ao background-size: cover */
  z-index: -1; /* Envia o vídeo para a camada de trás */
}

/* Garante que o conteúdo fique por cima do vídeo */
.coming-soon-content {
  position: relative; /* Coloca o conteúdo no contexto de camadas */
  text-align: center; /* Centraliza o texto e os pontos */
  z-index: 1; /* Garante que fique na frente (opcional, mas boa prática) */
  color: white; /* Garante que o texto seja legível sobre o vídeo */
}

.coming-soon-content h2 {
  font-size: 5rem;
  color: var(--primary-color);

  text-shadow: 0 0 7px rgba(0, 209, 255, 0.8), 0 0 20px rgba(0, 209, 255, 0.6),
    0 0 42px rgba(0, 209, 255, 0.4);
  font-weight: 100;
  font-style: normal;
}

.text-glow-animated {
  color: #00d1ff;
  font-weight: 300;

  /* Adicionamos a animação aqui */
  animation: glow-pulse 0.5s infinite alternate;
}

.coming-soon-content p {
  color: var(--primary-color);

  text-shadow: 0 0 7px rgba(0, 209, 255, 0.8), 0 0 20px rgba(0, 209, 255, 0.6),
    0 0 42px rgba(0, 209, 255, 0.4);
  font-weight: 200;
}

/* Adicionando uma sobreposição escura para melhorar a legibilidade do texto */
.coming-soon-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(
    2,
    9,
    26,
    0.9
  ); /* Sobreposição escura, ajuste a opacidade aqui */
  z-index: 0;
}

/* Definição da animação com @keyframes */
@keyframes glow-pulse {
  /* Estado inicial da animação (brilho mais contido) */
  from {
    text-shadow: 0 0 5px rgba(0, 209, 255, 0.7), 0 0 10px rgba(0, 209, 255, 0.5),
      0 0 20px rgba(0, 209, 255, 0.3);
  }

  /* Estado final da animação (brilho mais intenso e espalhado) */
  to {
    text-shadow: 0 0 10px rgba(0, 209, 255, 0.9),
      0 0 25px rgba(0, 209, 255, 0.7), 0 0 50px rgba(0, 209, 255, 0.5);
  }
}

.footer {
  position: absolute;
  bottom: 20px; /* 20px de distância da borda inferior para um respiro */
  left: 0; /* Alinha no canto esquerdo */
  width: 100%; /* Faz ocupar toda a largura da seção */
  text-align: center; /* Centraliza o texto do copyright */
  color: var(--light-gray);
  font-size: 0.9rem;
  z-index: 1; /* Garante que ele fique acima da sobreposição escura */
}

/* ======================= RODAPÉ ======================= */

/* ======================= AJUSTES PARA TELAS MENORES (RESPONSIVIDADE) ======================= */
@media (max-width: 768px) {
  .section-title {
    font-size: 2rem;
  }

  .hero-title {
    font-size: 3rem;
  }

  .experience-content {
    flex-direction: column; /* Coloca texto e imagem um embaixo do outro */
    text-align: center;
  }

  .experience-text {
    text-align: left; /* Mantém o alinhamento do texto da lista */
  }
}