/* =========================================================================
   CACIOLA CONSULTORIA - PAGES.CSS (VERSÃO OTIMIZADA)
   =========================================================================
   Arquivo: pages.css
   Descrição: Estilos específicos de cada página do site
   Projeto: caciola.com.br
   Resolução alvo: 1366x768 (sem scroll na página de contato)
   
   ÍNDICE:
   -------
   1. HOME - HERO SECTION
   2. HOME - HERO CARDS (lado direito)
   3. HOME - SEÇÃO DE SERVIÇOS
   4. PÁGINAS INTERNAS - PAGE INTRO
   5. PÁGINAS INTERNAS - LISTA DE SERVIÇOS
   6. CTA (chamada para ação)
   7. PÁGINA DE CONTATO
      7.1 Container principal
      7.2 Hero do contato
      7.3 Seção do formulário
      7.4 Layout em grid
      7.5 Card "Como funciona" (esquerda)
      7.6 Card do formulário (direita) - NOVO
      7.7 Estilos do formulário
      7.8 Overlay de sucesso
   ========================================================================= */


/* =========================================================================
   1. HOME - HERO SECTION
   =========================================================================
   Seção principal da página inicial com gradiente escuro.
   Contém título, subtítulo, botão CTA e indicadores de confiança.
   ========================================================================= */

/* Container principal do hero */
.hero {
  /* Gradiente de fundo: cinza-azulado médio para cinza claro */
  background: linear-gradient(
    180deg,                            /* Direção: de cima para baixo */
    #374151 0%,                        /* Topo: cinza-azul médio */
    #4b5563 100%                       /* Base: cinza mais claro */
  );
  position: relative;                  /* Contexto para pseudo-elementos */
  overflow: hidden;                    /* Esconde elementos que ultrapassam */
  padding: var(--space-2xl) 0;         /* 96px vertical */
  margin-top: -1px;                    /* Sobe 1px para cobrir a borda do header */
  padding-top: calc(var(--space-2xl) + 1px); /* Compensa o margin negativo */
}

/* Grid decorativo no fundo (linhas sutis) */
.hero::before {
 /* content: '';                         /* Pseudo-elemento vazio */ 
  position: absolute;                  /* Posição absoluta sobre o hero */
  inset: 0;                            /* Cobre toda a área do hero */
  /* Linhas horizontais e verticais semi-transparentes */
  background-image: 
    linear-gradient(rgba(59, 130, 246, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 130, 246, 0.03) 1px, transparent 1px);
  background-size: 60px 60px;          /* Células de 60x60 pixels */
  /* Fade radial para suavizar bordas */
  mask-image: radial-gradient(ellipse 80% 80% at 50% 0%, black 40%, transparent 100%);
}

/* Orbe de luz decorativa (canto superior direito) */
.hero::after {
  content: '';                         /* Pseudo-elemento vazio */
  position: absolute;                  /* Posição absoluta */
  top: -200px;                         /* Parcialmente fora da área visível */
  right: -100px;                       /* Parcialmente fora da área visível */
  width: 600px;                        /* Largura do orbe */
  height: 600px;                       /* Altura do orbe */
  /* Gradiente radial azul suave */
  background: radial-gradient(circle, rgba(var(--primary-rgb), 0.15) 0%, transparent 70%);
  pointer-events: none;                /* Não interfere em cliques */
}

/* Container interno do hero - acima dos decorativos */
.hero .container {
  position: relative;                  /* Contexto de posicionamento */
  z-index: 1;                          /* Fica acima dos ::before e ::after */
  display: flex;                       /* Flexbox horizontal */
  gap: var(--space-3xl);               /* 64px entre conteúdo e cards */
  align-items: center;                 /* Alinhamento vertical central */
}

/* Conteúdo textual do hero (lado esquerdo) */
.hero-content {
  flex: 1;                             /* Ocupa espaço disponível */
  max-width: 600px;                    /* Limita largura para legibilidade */
}

/* Título principal do hero */
.hero-content h1,
.hero h1 {
  color: var(--text-primary);          /* Cor branca */
  max-width: 800px;                    /* Limita largura */
  margin-bottom: var(--space-lg);      /* 24px abaixo */
}

/* Subtítulo/descrição do hero */
.hero-subtitle {
  font-size: 1.125rem;                 /* 18px */
  line-height: 1.7;                    /* Altura de linha confortável */
  color: var(--text-muted);            /* Cinza médio */
  max-width: 600px;                    /* Limita largura */
  margin-bottom: var(--space-xl);      /* 32px antes do CTA */
}

/* Container dos indicadores de confiança */
.hero-trust {
  display: flex;                       /* Flexbox horizontal */
  align-items: center;                 /* Alinhamento vertical */
  gap: var(--space-xl);                /* 32px entre itens */
  margin-top: var(--space-3xl);        /* 64px acima */
  padding-top: var(--space-xl);        /* 32px de padding interno */
  border-top: 1px solid var(--border-subtle); /* Linha separadora sutil */
}

/* Item individual de confiança (ícone + texto) */
.trust-item {
  display: flex;                       /* Flexbox horizontal */
  align-items: center;                 /* Alinhamento vertical */
  gap: var(--space-sm);                /* 8px entre ícone e texto */
  color: var(--text-muted);            /* Cor cinza */
  font-size: 0.875rem;                 /* 14px */
}

/* Ícone SVG dos itens de confiança */
.trust-item svg {
  width: 20px;                         /* Largura fixa */
  height: 20px;                        /* Altura fixa */
  color: var(--success);               /* Cor verde (sucesso) */
}


/* =========================================================================
   2. HOME - HERO CARDS (lado direito)
   =========================================================================
   Cards com imagens posicionados à direita do hero.
   Links para páginas de TI e Áudio.
   Escondidos em mobile (implementar em responsive.css).
   ========================================================================= */

/* Container dos hero cards */
.hero-cards {
  display: flex;                       /* Flexbox */
  flex-direction: column;              /* Empilha cards verticalmente */
  gap: var(--space-lg);                /* 24px entre cards */
  flex-shrink: 0;                      /* Não encolhe no flex */
  width: 400px;                        /* Largura fixa */
}

/* Card individual do hero */
.hero-card {
  position: relative;                  /* Contexto para overlay */
  border-radius: var(--radius-lg);     /* Bordas arredondadas (16px) */
  overflow: hidden;                    /* Esconde overflow da imagem */
  /* Sombra combinada: profundidade + borda sutil */
  box-shadow: 
    0 10px 40px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;           /* Transição suave */
  cursor: pointer;                     /* Indica que é clicável */
}

/* Estado hover do hero card */
.hero-card:hover {
  transform: translateY(-8px);         /* Levanta 8px */
  /* Sombra mais intensa no hover */
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(var(--primary-rgb), 0.3);
}

/* Link interno do hero card */
.hero-card a {
  display: block;                      /* Ocupa todo o card */
  position: relative;                  /* Contexto para conteúdo */
}

/* Imagem do hero card */
.hero-card img {
  width: 100%;                         /* Largura total */
  height: 259px;                       /* Altura fixa */
  object-fit: cover;                   /* Cobre área mantendo proporção */
  object-position: center;             /* Centraliza a imagem */
  display: block;                      /* Remove espaço fantasma */
}

/* Overlay gradiente sobre a imagem */
.hero-card::before {
  content: '';                         /* Pseudo-elemento vazio */
  position: absolute;                  /* Sobrepõe a imagem */
  inset: 0;                            /* Cobre todo o card */
  /* Gradiente: transparente no topo, escuro na base */
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.3) 50%,
    rgba(0, 0, 0, 0.8) 100%
  );
  pointer-events: none;                /* Não interfere em cliques */
  transition: opacity 0.3s ease;       /* Transição suave */
}

/* Overlay mais escuro no hover */
.hero-card:hover::before {
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.4) 50%,
    rgba(0, 0, 0, 0.9) 100%
  );
}

/* Conteúdo textual do hero card */
.hero-card-content {
  position: absolute;                  /* Sobrepõe a imagem */
  bottom: 0;                           /* Alinhado à base */
  left: 0;                             /* Alinhado à esquerda */
  right: 0;                            /* Estende até a direita */
  padding: var(--space-lg);            /* 24px de padding */
  z-index: 1;                          /* Acima da imagem e overlay */
}

/* Título do hero card */
.hero-card h3 {
  color: var(--text-primary);          /* Cor branca */
  font-size: 1.25rem;                  /* 20px */
  font-weight: 700;                    /* Negrito */
  margin-bottom: var(--space-xs);      /* 4px abaixo */
  transition: transform 0.3s ease;     /* Transição suave */
}

/* Título move para direita no hover */
.hero-card:hover h3 {
  transform: translateX(4px);          /* Move 4px para direita */
}

/* Descrição do hero card */
.hero-card p {
  color: var(--text-secondary);        /* Cinza claro */
  font-size: 0.875rem;                 /* 14px */
  line-height: 1.4;                    /* Altura de linha */
  margin: 0;                           /* Remove margens */
  opacity: 0.9;                        /* Levemente transparente */
}

/* Descrição mais visível no hover */
.hero-card:hover p {
  opacity: 1;                          /* Totalmente opaco */
  color: var(--text-primary);          /* Branco */
}

/* Badge/tag opcional (canto superior direito) */
.hero-card-badge {
  position: absolute;                  /* Posição absoluta */
  top: var(--space-md);                /* 16px do topo */
  right: var(--space-md);              /* 16px da direita */
  background: var(--primary);          /* Fundo azul */
  color: var(--text-primary);          /* Texto branco */
  padding: 4px 12px;                   /* Padding compacto */
  border-radius: var(--radius-full);   /* Formato "pill" */
  font-size: 0.75rem;                  /* 12px */
  font-weight: 600;                    /* Semi-negrito */
  z-index: 2;                          /* Acima de tudo */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); /* Sombra sutil */
}


/* =========================================================================
   3. HOME - SEÇÃO DE SERVIÇOS
   =========================================================================
   Grid com cards de serviços de TI e Áudio na home.
   ========================================================================= */

/* Container da seção de serviços */
.services {
  padding: var(--space-4xl) 0;         /* 96px vertical */
  background: var(--bg-light);         /* Fundo cinza claro */
}

/* Cabeçalho centralizado da seção */
.services-header {
  text-align: center;                  /* Texto centralizado */
  max-width: 700px;                    /* Limita largura */
  margin: 0 auto var(--space-3xl);     /* Centralizado, 64px abaixo */
}

/* Título do cabeçalho */
.services-header h2 {
  color: var(--text-dark);             /* Texto escuro */
  margin-bottom: var(--space-md);      /* 16px abaixo */
}

/* Descrição do cabeçalho */
.services-header p {
  color: var(--text-dark-secondary);   /* Cinza escuro */
}

/* Grid de cards de serviços */
.services-grid {
  display: grid;                       /* Layout em grid */
  grid-template-columns: repeat(2, 1fr); /* 2 colunas iguais */
  gap: var(--space-lg);                /* 24px entre cards */
}


/* =========================================================================
   4. PÁGINAS INTERNAS - PAGE INTRO
   =========================================================================
   Hero escuro das páginas internas (TI e Áudio).
   Contém título e descrição da página.
   ========================================================================= */

/* Container do page intro */
.page-intro {
  background: var(--bg-deep);          /* Fundo azul muito escuro */
  padding: var(--space-3xl) 0;         /* 64px vertical */
  position: relative;                  /* Contexto para decorativos */
  overflow: hidden;                    /* Esconde overflow */
}

/* Grid decorativo sutil */
.page-intro::before {
  content: '';                         /* Pseudo-elemento vazio */
  position: absolute;                  /* Posição absoluta */
  inset: 0;                            /* Cobre toda a área */
  /* Grid mais sutil que o hero da home */
  background-image: 
    linear-gradient(rgba(59, 130, 246, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59, 130, 246, 0.02) 1px, transparent 1px);
  background-size: 40px 40px;          /* Células menores (40x40) */
}

/* Card de conteúdo do page intro */
.page-intro-card {
  position: relative;                  /* Contexto de posicionamento */
  z-index: 1;                          /* Acima do grid decorativo */
}

/* Título do page intro */
.page-intro h1 {
  color: var(--text-primary);          /* Texto branco */
  margin-bottom: var(--space-lg);      /* 24px abaixo */
}

/* Parágrafos do page intro */
.page-intro-content p {
  color: var(--text-muted);            /* Cinza médio */
  font-size: 1.0625rem;                /* 17px */
  line-height: 1.7;                    /* Boa altura de linha */
  max-width: 700px;                    /* Limita largura */
  margin-bottom: var(--space-sm);      /* 8px entre parágrafos */
}

/* Último parágrafo sem margem inferior */
.page-intro-content p:last-child {
  margin-bottom: 0;                    /* Remove margem */
}


/* =========================================================================
   5. PÁGINAS INTERNAS - LISTA DE SERVIÇOS
   =========================================================================
   Lista detalhada de serviços específicos.
   ========================================================================= */

/* Container da lista de serviços */
.services-list {
  padding: var(--space-3xl) 0;         /* 64px vertical */
  background: var(--bg-light);         /* Fundo cinza claro */
}

/* Grid interno da lista */
.services-list .container {
  display: grid;                       /* Layout em grid */
  gap: var(--space-lg);                /* 24px entre itens */
}


/* =========================================================================
   6. CTA (CHAMADA PARA AÇÃO)
   =========================================================================
   Seção escura com título e botão de contato.
   Aparece no final das páginas.
   ========================================================================= */

/* Container do CTA */
.cta {
  background: var(--bg-surface);       /* Fundo cinza escuro */
  padding: var(--space-3xl) 0;         /* 64px vertical */
  text-align: center;                  /* Texto centralizado */
  position: relative;                  /* Contexto para efeitos */
}

/* Efeito de luz radial no fundo */
.cta::before {
  content: '';                         /* Pseudo-elemento vazio */
  position: absolute;                  /* Posição absoluta */
  inset: 0;                            /* Cobre toda a área */
  /* Gradiente radial azul sutil */
  background: radial-gradient(ellipse at center, rgba(var(--primary-rgb), 0.08) 0%, transparent 70%);
}

/* Container interno acima do efeito */
.cta .container {
  position: relative;                  /* Contexto de posicionamento */
  z-index: 1;                          /* Acima do ::before */
}

/* Título do CTA */
.cta h3 {
  color: var(--text-primary);          /* Texto branco */
  font-size: 1.5rem;                   /* 24px */
  margin-bottom: var(--space-lg);      /* 24px antes do botão */
}


/* =========================================================================
   7. PÁGINA DE CONTATO
   =========================================================================
   IMPORTANTE: Otimizada para caber em 1366x768 sem scroll.
   Layout em duas colunas: informações (esquerda) + formulário (direita).
   ========================================================================= */


/* -------------------------------------------------------------------------
   7.1 CONTAINER PRINCIPAL DA PÁGINA
   ------------------------------------------------------------------------- */

/* Main container da página de contato */
.contact-page {
  background: var(--bg-light);         /* Fundo cinza claro */
  display: flex;                       /* Flexbox vertical */
  flex-direction: column;              /* Empilha seções */
  min-height: calc(100vh - 250px);     /* Altura mínima (viewport menos header/footer) */
}


/* -------------------------------------------------------------------------
   7.2 HERO DO CONTATO (topo escuro)
   ------------------------------------------------------------------------- */

/* Container do hero */
.contact-hero {
  /* Gradiente escuro diagonal */
  background: linear-gradient(135deg, var(--bg-void) 0%, var(--bg-deep) 100%);
  padding: 6px 0;                      /* Padding mínimo (1366x768) */
  text-align: center;                  /* Texto centralizado */
  position: relative;                  /* Contexto para decorativos */
  overflow: hidden;                    /* Esconde overflow */
  flex-shrink: 0;                      /* Não encolhe no flex */
}

/* Efeitos de luz decorativos */
.contact-hero::before {
  content: '';                         /* Pseudo-elemento vazio */
  position: absolute;                  /* Posição absoluta */
  inset: 0;                            /* Cobre toda a área */
  /* Duas elipses de luz em posições diferentes */
  background-image: 
    radial-gradient(circle at 20% 80%, rgba(var(--primary-rgb), 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(var(--accent-rgb), 0.08) 0%, transparent 50%);
}

/* Container de conteúdo (acima dos efeitos) */
.contact-hero-content {
  position: relative;                  /* Contexto de posicionamento */
  z-index: 1;                          /* Acima do ::before */
}

/* Título do hero de contato */
.contact-hero-content h1 {
  color: var(--text-primary);          /* Texto branco */
  /* Tamanho responsivo: 17.6px a 24px */
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  margin-bottom: 4px;                  /* Pequeno espaço abaixo */
  max-width: 700px;                    /* Limita largura */
  margin-left: auto;                   /* Centraliza horizontalmente */
  margin-right: auto;                  /* Centraliza horizontalmente */
  line-height: 1.3;                    /* Altura de linha compacta */
  letter-spacing: 0.03em;              /* Espaçamento entre caracteres */
}

/* Subtítulo do hero de contato */
.contact-hero-content .hero-subtitle {
  color: var(--text-muted);            /* Cinza médio */
  font-size: 0.85rem;                  /* 13.6px */
  max-width: 500px;                    /* Limita largura */
  margin: 0 auto;                      /* Centraliza */
  letter-spacing: 0.02em;              /* Espaçamento entre caracteres */
}


/* -------------------------------------------------------------------------
   7.3 SEÇÃO DO FORMULÁRIO
   ------------------------------------------------------------------------- */

/* Container da seção do formulário */
.contact-form-section {
  padding: 4px 0;                      /* Padding mínimo (1366x768) */
  display: flex;                       /* Flexbox */
  align-items: center;                 /* Alinhamento vertical central */
  justify-content: center;             /* Alinhamento horizontal central */
  flex: 1;                             /* Ocupa espaço restante */
}

/* Container interno da seção */
.contact-form-section .container {
  width: 100%;                         /* Largura total */
}


/* -------------------------------------------------------------------------
   7.4 LAYOUT EM GRID (duas colunas)
   ------------------------------------------------------------------------- */

/* Grid principal: info + formulário */
.contact-layout {
  display: grid;                       /* Layout em grid */
  grid-template-columns: 340px 1fr;    /* Coluna fixa 340px + coluna flexível */
  gap: 16px;                           /* 16px entre colunas */
  max-width: 980px;                    /* Largura máxima */
  margin: 0 auto;                      /* Centralizado */
  align-items: stretch;                /* Colunas com mesma altura */
}


/* -------------------------------------------------------------------------
   7.5 CARD "COMO FUNCIONA" (esquerda)
   ------------------------------------------------------------------------- */

/* Card de informações - lado esquerdo */
.contact-info {
  background: var(--bg-white);         /* Fundo branco */
  border-radius: var(--radius-lg);     /* Bordas arredondadas (16px) */
  padding: 20px;                       /* Padding interno reduzido */
  border: 1px solid var(--border-light); /* Borda cinza clara */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* Sombra sutil */
  display: flex;                       /* Flexbox vertical */
  flex-direction: column;              /* Empilha conteúdo */
  /* Altura calculada: viewport - header(80px) - hero(~50px) - footer(~170px) - margens(80px) - padding da seção(8px) */
  height: calc(100vh - 388px);         /* Altura fixa baseada na viewport */
  min-height: 400px;                   /* Altura mínima para telas maiores */
  max-height: 520px;                   /* Altura máxima para não crescer demais */
  overflow: hidden;                    /* Garante que conteúdo não ultrapasse */
  margin-top: 40px;                    /* 40px antes do card */
  margin-bottom: 40px;                 /* 40px depois do card */
}

/* Título "Como funciona" */
.contact-info h2 {
  font-size: 1rem;                     /* 16px */
  font-weight: 700;                    /* Negrito */
  margin-bottom: 16px;                 /* 16px abaixo */
  padding-bottom: 12px;                /* 12px de padding */
  color: var(--text-dark);             /* Texto escuro */
  border-bottom: 1px solid var(--border-light-subtle); /* Linha separadora */
}

/* Item de informação (ícone + texto) */
.info-item {
  display: flex;                       /* Flexbox horizontal */
  gap: 8px;                            /* 8px entre ícone e texto */
  margin-bottom: 18px;                 /* 18px entre itens */
}

/* Último item de informação */
.info-item:last-of-type {
  margin-bottom: 18px;                 /* Mantém espaço */
}

/* Ícone do item (emoji) */
.info-icon {
  width: 30px;                         /* Largura fixa */
  height: 30px;                        /* Altura fixa */
  font-size: 0.875rem;                 /* 14px */
  border-radius: var(--radius-sm);     /* Bordas levemente arredondadas */
  background: var(--primary-subtle);   /* Fundo azul claro */
  display: flex;                       /* Flexbox para centralizar */
  align-items: center;                 /* Centraliza vertical */
  justify-content: center;             /* Centraliza horizontal */
  flex-shrink: 0;                      /* Não encolhe */
}

/* Título do item de informação */
.info-content h3 {
  font-size: 0.8125rem;                /* 13px */
  font-weight: 600;                    /* Semi-negrito */
  margin-bottom: 4px;                  /* 4px abaixo */
  color: var(--text-dark);             /* Texto escuro */
}

/* Descrição do item de informação */
.info-content p {
  font-size: 0.75rem;                  /* 12px */
  line-height: 1.6;                    /* Altura de linha confortável */
  margin: 0;                           /* Remove margens */
  color: var(--text-dark-secondary);   /* Cinza escuro */
}

/* Nota de rodapé do card */
.contact-note {
  padding: 14px;                       /* Padding interno */
  margin-top: auto;                    /* Empurra para o final */
  background: var(--bg-light);         /* Fundo cinza claro */
  border-radius: var(--radius-sm);     /* Bordas arredondadas */
  border-left: 3px solid var(--primary); /* Borda azul à esquerda */
}

/* Texto da nota */
.contact-note p {
  font-size: 0.6875rem;                /* 11px */
  line-height: 1.5;                    /* Altura de linha */
  color: var(--text-dark-secondary);   /* Cinza escuro */
  margin: 0;                           /* Remove margens */
}


/* -------------------------------------------------------------------------
   7.6 CARD DO FORMULÁRIO (direita) - NOVA CLASSE ESPECÍFICA
   ------------------------------------------------------------------------- */

/* 
 * Wrapper externo do formulário - lado direito
 * NOTA: Esta classe substitui o uso de .contact-info no card direito
 */
.contact-form-wrapper {
  background: var(--bg-white);         /* Fundo branco */
  border-radius: var(--radius-lg);     /* Bordas arredondadas (16px) */
  padding: 20px;                       /* Padding interno reduzido */
  /* Borda azul destacada (diferencia do card da esquerda) */
  border: 3px solid #3b82f6;
  /* Sombra dupla para destaque visual */
  box-shadow: 
    0 4px 20px rgba(59, 130, 246, 0.25),  /* Sombra azul */
    0 2px 10px rgba(0, 0, 0, 0.1);         /* Sombra neutra */
  display: flex;                       /* Flexbox vertical */
  flex-direction: column;              /* Empilha conteúdo */
  /* Altura calculada: viewport - header(80px) - hero(~50px) - footer(~170px) - margens(80px) - padding da seção(8px) */
  height: calc(100vh - 388px);         /* ALTURA IGUAL ao card da esquerda */
  min-height: 400px;                   /* Altura mínima para telas maiores */
  max-height: 520px;                   /* Altura máxima para não crescer demais */
  overflow: visible;                   /* Permite conteúdo visível (mensagens de erro) */
  transition: all 0.3s ease;           /* Transição suave para hover */
  margin-top: 40px;                    /* 40px antes do card */
  margin-bottom: 40px;                 /* 40px depois do card */
}

/* Estado hover do card do formulário */
.contact-form-wrapper:hover {
  border-color: #2563eb;               /* Azul mais escuro */
  /* Sombra mais intensa no hover */
  box-shadow: 
    0 6px 28px rgba(59, 130, 246, 0.3),
    0 4px 15px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);         /* Leve elevação */
}

/*
 * Card interno do formulário (container do form)
 * Esta classe é usada dentro de .contact-form-wrapper para estilização adicional
 */
.contact-form-card {
  flex: 1;                             /* Ocupa espaço disponível */
  display: flex;                       /* Flexbox vertical */
  flex-direction: column;              /* Empilha elementos */
}


/* -------------------------------------------------------------------------
   7.7 ESTILOS DO FORMULÁRIO
   ------------------------------------------------------------------------- */

/* Formulário moderno de contato */
.contact-form-modern {
  flex: 1;                             /* Ocupa espaço disponível */
  display: flex;                       /* Flexbox vertical */
  flex-direction: column;              /* Empilha campos */
}

/* Grupo de campo (label + input) */
.contact-form-modern .form-group,
.contact-form .form-group {
  margin-bottom: 12px;                 /* 12px entre grupos (compacto para 1366x768) */
}

/* Labels dos campos */
.contact-form-modern label,
.contact-form label {
  font-size: 0.875rem;                 /* 14px */
  font-weight: 600;                    /* Semi-negrito */
  margin-bottom: 6px;                  /* 6px antes do campo */
  color: var(--text-dark);             /* Texto escuro */
  display: flex;                       /* Flexbox para alinhamento */
  align-items: center;                 /* Alinha itens */
  gap: 4px;                            /* Espaço entre texto e asterisco */
}

/* Texto do label */
.label-text {
  color: var(--text-dark);             /* Texto escuro */
}

/* Asterisco de campo obrigatório */
.label-required {
  color: #ef4444;                      /* Vermelho */
  font-weight: 700;                    /* Negrito */
}

/* Campos de input e textarea */
.contact-form-modern input[type="text"],
.contact-form-modern input[type="email"],
.contact-form-modern input[type="number"],
.contact-form-modern textarea,
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="number"],
.contact-form textarea {
  font-size: 0.9375rem;                /* 15px */
  padding: 10px 12px;                  /* Padding interno reduzido */
  line-height: 1.4;                    /* Altura de linha */
  width: 100%;                         /* Largura total */
  color: var(--text-dark);             /* Texto escuro */
  background: var(--bg-white);         /* Fundo branco */
  border: 2px solid var(--border-light); /* Borda cinza */
  border-radius: var(--radius-sm);     /* Bordas levemente arredondadas */
  font-family: inherit;                /* Herda fonte */
  transition: border-color 0.2s ease, box-shadow 0.2s ease; /* Transições */
}

/* Placeholder dos campos */
.contact-form-modern input::placeholder,
.contact-form-modern textarea::placeholder,
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  font-size: 0.9375rem;                /* 15px */
  color: var(--text-subtle);           /* Cinza claro */
}

/* Estado de foco dos campos */
.contact-form-modern input:focus,
.contact-form-modern textarea:focus,
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--primary);        /* Borda azul */
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15); /* Halo azul */
  outline: none;                       /* Remove outline padrão */
}

/* Textarea específico */
.contact-form-modern textarea,
.contact-form textarea {
  min-height: 60px;                    /* Altura mínima bem reduzida para caber em 1366x768 */
  max-height: 100px;                   /* Altura máxima */
  line-height: 1.5;                    /* Altura de linha */
  resize: none;                        /* Desabilita redimensionamento para manter layout */
}

/* Dica abaixo do campo */
.form-hint {
  font-size: 0.8125rem;                /* 13px */
  line-height: 1.5;                    /* Altura de linha */
  margin-top: 6px;                     /* 6px acima */
  color: var(--text-dark-secondary);   /* Cinza escuro */
  display: block;                      /* Bloco */
}

/* Grupo do captcha */
.captcha-group {
  margin-bottom: 8px;                  /* 8px abaixo (compacto) */
}

/* Wrapper do captcha */
.captcha-wrapper {
  display: flex;                       /* Flexbox horizontal */
  align-items: center;                 /* Alinhamento vertical */
  gap: 12px;                           /* 12px entre elementos */
}

/* Pergunta do captcha */
.captcha-question {
  font-size: 0.9375rem;                /* 15px */
  font-weight: 600;                    /* Semi-negrito */
  color: var(--text-dark);             /* Texto escuro */
}

/* Campo de resposta do captcha */
.captcha-wrapper input[type="number"],
input#captcha {
  width: 130px !important;             /* Largura para 4 dígitos + spinners */
  min-width: 130px !important;         /* Garante largura mínima */
  height: 45px !important;             /* Altura fixa */
  text-align: center;                  /* Texto centralizado */
}

/* Área de retorno/feedback do formulário */
.form-retorno {
  margin-bottom: 0;                    /* Sem margem */
  margin-top: -4px;                    /* Margem negativa para compensar */
  padding: 8px 10px;                   /* Padding compacto */
  border-radius: var(--radius-sm);     /* Bordas arredondadas */
  font-size: 0.75rem;                  /* 12px - mais compacto */
  display: none;                       /* Oculto por padrão */
  line-height: 1.3;                    /* Linha compacta */
}

/* Retorno visível (quando há mensagem) */
.form-retorno:not(:empty) {
  display: block;                      /* Mostra quando tem conteúdo */
}

/* Retorno de sucesso */
.form-retorno.success {
  background: #dcfce7;                 /* Verde claro */
  color: #166534;                      /* Verde escuro */
  border: 1px solid #86efac;           /* Borda verde */
}

/* Retorno de erro */
.form-retorno.error {
  background: #fee2e2;                 /* Vermelho claro */
  color: #991b1b;                      /* Vermelho escuro */
  border: 1px solid #fca5a5;           /* Borda vermelha */
}

/* Botão de envio */
.contact-form-modern button[type="submit"],
.contact-form button[type="submit"] {
  margin-top: auto;                    /* Empurra para o final */
  padding: 12px 20px;                  /* Padding reduzido para caber */
  font-size: 0.9375rem;                /* 15px */
  font-weight: 600;                    /* Semi-negrito */
  display: flex;                       /* Flexbox para alinhamento */
  align-items: center;                 /* Alinha itens */
  justify-content: center;             /* Centraliza */
  gap: 8px;                            /* Espaço entre texto e ícone */
  flex-shrink: 0;                      /* Não encolhe */
}

/* Ícone do botão */
.btn-icon {
  font-size: 1.125rem;                 /* 18px */
  transition: transform 0.2s ease;     /* Transição suave */
}

/* Ícone move no hover */
.contact-form-modern button[type="submit"]:hover .btn-icon,
.contact-form button[type="submit"]:hover .btn-icon {
  transform: translateX(4px);          /* Move 4px para direita */
}

/* Campo honeypot (oculto para spam bots) */
.visually-hidden {
  position: absolute;                  /* Remove do fluxo */
  width: 1px;                          /* Mínimo */
  height: 1px;                         /* Mínimo */
  padding: 0;                          /* Sem padding */
  margin: -1px;                        /* Fora da tela */
  overflow: hidden;                    /* Esconde overflow */
  clip: rect(0, 0, 0, 0);              /* Recorta totalmente */
  white-space: nowrap;                 /* Não quebra linha */
  border: 0;                           /* Sem borda */
}


/* -------------------------------------------------------------------------
   7.8 OVERLAY DE SUCESSO
   ------------------------------------------------------------------------- */

/* Overlay escuro de fundo */
.success-overlay {
  position: fixed;                     /* Fixo na viewport */
  inset: 0;                            /* Cobre toda a tela */
  background: rgba(0, 0, 0, 0.7);      /* Preto semi-transparente */
  display: flex;                       /* Flexbox */
  align-items: center;                 /* Centraliza vertical */
  justify-content: center;             /* Centraliza horizontal */
  z-index: 1000;                       /* Acima de tudo */
  opacity: 0;                          /* Invisível por padrão */
  visibility: hidden;                  /* Não interativo */
  transition: opacity 0.3s ease, visibility 0.3s ease; /* Transições */
}

/* Overlay visível */
.success-overlay:not([hidden]) {
  opacity: 1;                          /* Totalmente visível */
  visibility: visible;                 /* Interativo */
}

/* Card de sucesso */
.success-card {
  background: var(--bg-white);         /* Fundo branco */
  border-radius: var(--radius-lg);     /* Bordas arredondadas */
  padding: 48px;                       /* Padding generoso */
  text-align: center;                  /* Texto centralizado */
  max-width: 450px;                    /* Largura máxima */
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); /* Sombra forte */
  transform: scale(0.9);               /* Levemente menor */
  transition: transform 0.3s ease;     /* Transição */
}

/* Card visível */
.success-overlay:not([hidden]) .success-card {
  transform: scale(1);                 /* Tamanho normal */
}

/* Ícone de sucesso */
.success-icon {
  width: 64px;                         /* Largura */
  height: 64px;                        /* Altura */
  margin: 0 auto 24px;                 /* Centralizado, 24px abaixo */
  background: #dcfce7;                 /* Verde claro */
  border-radius: 50%;                  /* Círculo */
  display: flex;                       /* Flexbox */
  align-items: center;                 /* Centraliza vertical */
  justify-content: center;             /* Centraliza horizontal */
  font-size: 2rem;                     /* 32px */
  color: #16a34a;                      /* Verde */
}

/* Título do card de sucesso */
.success-card h2 {
  font-size: 1.5rem;                   /* 24px */
  color: var(--text-dark);             /* Texto escuro */
  margin-bottom: 12px;                 /* 12px abaixo */
}

/* Descrição do card de sucesso */
.success-card p {
  font-size: 1rem;                     /* 16px */
  color: var(--text-dark-secondary);   /* Cinza escuro */
  margin-bottom: 8px;                  /* 8px abaixo */
  line-height: 1.6;                    /* Altura de linha */
}

/* Dica de ação */
.success-hint {
  font-size: 0.8125rem;                /* 13px */
  color: var(--text-subtle);           /* Cinza claro */
  display: block;                      /* Bloco */
  margin-top: 16px;                    /* 16px acima */
}


/* =========================================================================
   FIM DO ARQUIVO PAGES.CSS
   =========================================================================
   Versão: 2.0 (Otimizada)
   Última atualização: Janeiro 2026
   
   CHANGELOG:
   - Removidas duplicações de código
   - Criada classe .contact-form-card específica para o card direito
   - Equalização de altura entre cards da página de contato
   - Comentários linha a linha em português
   - Organização em seções numeradas
   - Remoção de !important desnecessários
   ========================================================================= */