/* ============================================================
   hero.css — Hero Section: A Primeira Impressão do Site
   Aqui definimos o banner principal, que usa efeitos de sobreposição, 
   gradientes escuros e formulários flutuantes com Glassmorphism.
   ============================================================ */

/* ── 1. SEÇÃO HERO (FUNDO + OVERLAY) ── */
.hero {
  /* relative para que os elementos absolutos dentro dela saibam onde estão ancorados */
  position: relative;
  
  /* Garante que o banner ocupe pelo menos 100% da altura visível da tela do dispositivo */
  min-height: 100vh;
  
  /* Flexbox para centralizar todo o conteúdo (textos e formulário) verticalmente e horizontalmente */
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Espaçamento interno. O '100px' no topo garante que o navbar (menu) não cubra o conteúdo */
  padding: 100px 24px 60px;

  /* === MÚLTIPLAS CAMADAS DE BACKGROUND === 
     Aqui combinamos um gradiente e uma imagem fotográfica.
     O gradiente vai do escuro na esquerda (92% opacidade) para o transparente na direita (40%),
     criando um espaço perfeito e legível para ler o texto na esquerda, enquanto revela a foto na direita. */
  background-image:
    linear-gradient(
      to right,
      rgba(15, 15, 20, 0.92) 0%,
      rgba(15, 15, 20, 0.75) 45%,
      rgba(15, 15, 20, 0.40) 100%
    ),
    url('../imgs/banner.jpg');
    
  background-size: cover; /* Faz a imagem cobrir toda a área sem distorcer */
  background-position: center; /* Centraliza a imagem fotográfica */
  
  /* O attachment: fixed cria aquele efeito paralaxe falso, onde a foto fica parada enquanto a página rola */
  background-attachment: fixed;
  
  overflow: hidden; /* Corta qualquer elemento decorativo que vaze pra fora da seção */
}

/* Reflexo de luz sutil decorativo no topo da página (como se fosse um holofote azul fraco) */
.hero::before {
  content: '';
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 700px;
  border-radius: 50%;
  
  /* Gradiente radial: forte no meio e desaparece nas bordas */
  background: radial-gradient(circle, rgba(14, 107, 168, 0.18) 0%, transparent 70%);
  
  /* pointer-events: none é essencial para que essa "luz" não bloqueie cliques nos botões embaixo dela */
  pointer-events: none;
  z-index: 0;
}

/* ── 2. CONTAINER PRINCIPAL (GRID 2 COLUNAS) ── */
.hero__container {
  /* Fica acima do "holofote" (z-index 1 > z-index 0) */
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  
  /* No celular, os elementos ficam empilhados (coluna) */
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* No desktop, mudamos a chave de Flexbox para CSS Grid, criando 2 colunas perfeitamente divididas */
@media (min-width: 992px) {
  .hero__container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 1 fração para o texto, 1 fração para o formulário */
    gap: 60px;
    align-items: center; /* Alinha texto e formulário pelo eixo Y */
  }
}

/* ── 3. COLUNA ESQUERDA (COPY/TEXTOS) ── */
.hero__copy {
  display: flex;
  flex-direction: column;
  
  /* No mobile, tudo fica centralizado para parecer um bloco maciço */
  align-items: center;
  text-align: center;
  gap: 24px;
}

/* Badge / Pílula superior (ex: "Avaliados com 5 Estrelas") */
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 9999px; /* Arredonda totalmente as pontas */
  
  /* Glassmorphism leitoso (Frosted Glass) - garante contraste pras cores sem ser sólido */
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: var(--color-text-heading);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  font-size: 0.9rem;
  font-weight: 500;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.hero__badge:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  background: rgba(255, 255, 255, 0.85); /* Fica ligeiramente mais opaco ao interagir */
}

/* Título Principal (H1) */
.hero__title {
  /* clamp() é magia responsiva: a fonte nunca será menor que 2.2rem, 
     nunca maior que 3.6rem, e vai crescer fluidamente (5vw) no meio termo */
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 800;
  line-height: 1.1; /* Texto mais compacto */
  letter-spacing: -0.03em;
  color: #ffffff;
  margin: 0;
}

/* A palavra chave do título (Sacadas em SP) ganha a cor da marca */
.hero__title span {
  color: #0e6ba8;
}

/* Subtítulo descrevendo o serviço */
.hero__subtitle {
  font-size: clamp(1rem, 2vw, 1.15rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.75);
  max-width: 480px; /* Impede que o texto fique comprido e ruim de ler */
  margin: 0;
}

/* Lista de Qualidades (Chips) - Ex: Orçamento Grátis, Garantia */
.hero__qualities {
  display: flex;
  flex-wrap: wrap; /* Permite que os chips caiam para a linha de baixo se não couberem na tela */
  justify-content: center;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.hero__quality {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 9999px;
  
  /* Fundo de vidro ainda mais sutil que o badge principal */
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.85);
  
  font-size: 0.82rem;
  font-weight: 500;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.3s ease, border-color 0.3s ease;
}

.hero__quality:hover {
  background: rgba(255, 255, 255, 0.15); /* Fundo fica um pouco mais claro ao passar o mouse */
  border-color: rgba(255, 255, 255, 0.3);
}

/* Botão Principal de Chamada para Ação (CTA - Call To Action) */
.hero__cta {
  display: inline-flex;
  
  /* align-self define o alinhamento deste item específico dentro do Flexbox (.hero__copy).
     Por padrão (no mobile) nós centralizamos. */
  align-self: center;
  align-items: center;
  gap: 10px;
  padding: 16px 36px;
  border-radius: 9999px;
  background: #0e6ba8; /* Azul primário forte, sem transparência para chamar atenção total */
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  
  /* Sombra azul brilhante que ajuda a destacar o botão no fundo escuro */
  box-shadow: 0 8px 28px rgba(14, 107, 168, 0.45);
  
  /* Essa animação infinita de 'sacudida' chama a atenção do olhar humano quase que instantaneamente */
  animation: shakeAttention 4s infinite;
}

/* No desktop, o botão acompanha o alinhamento à esquerda dos textos */
@media (min-width: 992px) {
  .hero__cta {
    align-self: flex-start;
  }
}

/* A lógica da "sacudida" chamativa: o botão fica parado 80% do tempo (0 a 80%),
   e dá treme-treme super rápido nos 20% finais. Isso não enjoa o usuário. */
@keyframes shakeAttention {
  0%, 80% { transform: translateX(0); }
  82% { transform: translateX(-4px); }
  86% { transform: translateX(4px); }
  90% { transform: translateX(-4px); }
  94% { transform: translateX(4px); }
  98% { transform: translateX(-4px); }
  100% { transform: translateX(0); }
}

/* Interação de Hover do botão: sobe um pouquinho (efeito de levitação) e aumenta a sombra */
.hero__cta:hover {
  background: #0a5a91;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 36px rgba(14, 107, 168, 0.6);
}

/* Anima a setinha (SVG) para dar um empurrãozinho visual para a direita quando passamos o mouse */
.hero__cta svg {
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.hero__cta:hover svg {
  transform: translateX(3px);
}

/* Regras exclusivas de layout para a coluna esquerda quando estamos no Desktop */
@media (min-width: 992px) {
  .hero__copy {
    align-items: flex-start; /* Muda o empilhamento de centro para esquerda */
    text-align: left; /* Alinha todos os textos à esquerda */
  }
  .hero__qualities {
    justify-content: flex-start; /* Empilha as pílulas na esquerda */
  }
}

/* ── 4. COLUNA DIREITA (FORMULÁRIO GLASSMORPHISM) ── */
.hero__form-wrapper {
  /* Um fundo bem translúcido e ligeiramente mais escuro para contrastar com a foto */
  background: rgba(20, 20, 25, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  padding: 36px 32px;
  
  /* O blur() é a chave do Glassmorphism. Ele borra tudo que estiver atrás desse painel */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  text-align: left;
  
  /* Ao carregar a página, esse formulário entra deslizando da direita pra esquerda de forma majestosa */
  animation: fadeSlideLeft 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes fadeSlideLeft {
  0% { opacity: 0; transform: translateX(60px); }
  100% { opacity: 1; transform: translateX(0); }
}

.hero__form-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}

.hero__form-subtitle {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 28px;
  line-height: 1.5;
}

/* Form container */
.hero__form {
  display: flex;
  flex-direction: column;
  gap: 14px; /* Separa cada campo de input */
}

/* Grupo englobando Label e Input */
.hero__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Rótulos dos campos */
.hero__label {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Inputs e Textarea de vidro */
.hero__input,
.hero__textarea {
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  
  /* Campos quase transparentes */
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: #ffffff;
  font-size: 0.95rem;
  font-family: inherit; /* Puxa a mesma fonte do site (sem herdar fonte padrão de formulário do navegador) */
  outline: none; /* Tira aquela borda azul feia de acessibilidade padrão */
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
  resize: none; /* Impede que o usuário arraste o canto do textarea quebrando o layout */
}

/* Cor do texto de dica (placeholder) */
.hero__input::placeholder,
.hero__textarea::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

/* Quando o usuário clica/foca no campo, ele ilumina levemente a borda em tom de azul */
.hero__input:focus,
.hero__textarea:focus {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(14, 107, 168, 0.2);
}

.hero__textarea {
  min-height: 100px;
}

/* Botão de Envio do Formulário */
.hero__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 24px;
  margin-top: 6px;
  border-radius: 10px;
  background: #0e6ba8;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: 0.01em;
  border: none;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
  box-shadow: 0 6px 20px rgba(14, 107, 168, 0.4);
}

.hero__submit:hover {
  background: #0a5a91;
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(14, 107, 168, 0.55);
}

/* :active é o momento exato em que o botão foi 'apertado', ele afunda voltando a altura 0 */
.hero__submit:active {
  transform: translateY(0);
}