/* =========================================================================
   CACIOLA CONSULTORIA - COMPONENTS.CSS
   =========================================================================
   Arquivo: components.css
   Conteúdo: Botões, cards, formulários, overlay de sucesso
   Projeto: caciola.com.br
   
   ÍNDICE DESTE ARQUIVO:
   1. BOTÕES
   2. CARDS DE SERVIÇO (home)
   3. ITENS DE SERVIÇO (páginas internas)
   4. FORMULÁRIOS
   5. CAPTCHA
   6. MENSAGENS DE RETORNO
   7. OVERLAY DE SUCESSO
   8. ANIMAÇÕES
   9. UTILITÁRIOS
   ========================================================================= */


/* =========================================================================
   1. BOTÕES
   ========================================================================= */

/* Botão primário - azul com gradiente */
.btn-primary {
  display: inline-flex;             /* Flexbox inline para ícone + texto */
  align-items: center;              /* Centraliza verticalmente */
  justify-content: center;          /* Centraliza horizontalmente */
  gap: var(--space-sm);             /* 8px entre texto e ícone */
  padding: 14px 28px;               /* Padding interno */
  font-size: 0.9375rem;             /* 15px */
  font-weight: 600;                 /* Semi-bold */
  color: var(--bg-void);            /* Texto escuro (contraste com azul) */
  background: linear-gradient(135deg, var(--primary-light), var(--primary)); /* Gradiente azul */
  border-radius: var(--radius-md);  /* Bordas arredondadas */
  transition: all var(--duration-normal) var(--ease-out); /* Transição suave */
  box-shadow: 
    0 4px 14px rgba(var(--primary-rgb), 0.35),  /* Sombra azul externa */
    inset 0 1px 0 rgba(255, 255, 255, 0.2);     /* Brilho interno no topo */
  position: relative;               /* Para pseudo-elemento */
  overflow: hidden;                 /* Esconde pseudo-elemento que vaza */
}

/* Botão primário - overlay de brilho (invisível por padrão) */
.btn-primary::before {
  content: '';                      /* Pseudo-elemento */
  position: absolute;               /* Cobre todo o botão */
  inset: 0;                         /* top/right/bottom/left = 0 */
  background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.1)); /* Brilho leve */
  opacity: 0;                       /* Invisível */
  transition: opacity var(--duration-fast); /* Transição rápida */
}

/* Botão primário - hover */
.btn-primary:hover {
  transform: translateY(-2px);      /* Sobe 2px */
  box-shadow: 
    0 8px 24px rgba(var(--primary-rgb), 0.4),  /* Sombra maior */
    inset 0 1px 0 rgba(255, 255, 255, 0.2);    /* Mantém brilho interno */
}

/* Botão primário - mostra brilho no hover */
.btn-primary:hover::before {
  opacity: 1;                       /* Visível */
}

/* Botão grande - usado no hero e CTA */
.btn-large {
  padding: 18px 36px;               /* Padding maior */
  font-size: 1rem;                  /* 16px */
}

/* Botão largura total - usado no formulário de contato */
.btn-full {
  width: 100%;                      /* Ocupa toda largura disponível */
}

/* Ícone do botão (seta →) */
.btn-icon {
  font-size: 1.25rem;               /* 20px */
  transition: transform var(--duration-fast) var(--ease-out); /* Animação */
}

/* Ícone move para direita no hover */
.btn-primary:hover .btn-icon {
  transform: translateX(4px);       /* Move 4px para direita */
}

/* Botão secundário - outline (NÃO USADO ATUALMENTE, mas disponível) */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 14px 28px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);       /* Texto branco */
  background: transparent;          /* Sem fundo */
  border: 1px solid var(--border-default); /* Borda branca sutil */
  border-radius: var(--radius-md);
  transition: all var(--duration-normal) var(--ease-out);
}

/* Botão secundário - hover */
.btn-secondary:hover {
  background: var(--bg-elevated);   /* Fundo cinza escuro */
  border-color: var(--border-hover); /* Borda mais visível */
}

/* Link de texto com seta - usado nos cards "Saiba mais" */
.text-link {
  color: var(--primary);            /* Azul */
  font-weight: 600;                 /* Semi-bold */
  position: relative;
  display: inline-flex;             /* Para alinhar seta */
  align-items: center;
  gap: 6px;                         /* Espaço antes da seta */
}

/* Seta após o link */
.text-link::after {
  content: '→';                     /* Seta */
  transition: transform var(--duration-fast) var(--ease-out); /* Animação */
}

/* Seta move no hover */
.text-link:hover::after {
  transform: translateX(4px);       /* Move 4px para direita */
}


/* =========================================================================
   2. CARDS DE SERVIÇO (home)
   =========================================================================
   Cards brancos na página inicial com ícone, título, texto e link
   ========================================================================= */

/* Card de serviço - container */
.service-card {
  background: var(--bg-white);      /* Fundo branco */
  border-radius: var(--radius-xl);  /* Bordas bem arredondadas (24px) */
  padding: var(--space-xl);         /* 32px de padding */
  border: 1px solid var(--border-light); /* Borda cinza clara */
  transition: all var(--duration-normal) var(--ease-out); /* Transição suave */
  position: relative;               /* Para linha animada */
  overflow: hidden;                 /* Esconde linha que vaza */
}

/* Card - linha gradiente no topo (escondida por padrão) */
.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;                      /* 3px de altura */
  background: linear-gradient(90deg, var(--primary), var(--accent)); /* Azul → Ciano */
  transform: scaleX(0);             /* Escondida (escala 0) */
  transform-origin: left;           /* Anima da esquerda */
  transition: transform var(--duration-normal) var(--ease-out);
}

/* Card - hover */
.service-card:hover {
  transform: translateY(-4px);      /* Sobe 4px */
  box-shadow: var(--shadow-lg);     /* Sombra grande */
  border-color: transparent;        /* Remove borda visível */
}

/* Card - mostra linha no hover */
.service-card:hover::before {
  transform: scaleX(1);             /* Linha aparece (escala 1) */
}

/* Card - ícone (emoji) */
.service-card-icon {
  width: 56px;                      /* 56px de largura */
  height: 56px;                     /* 56px de altura */
  border-radius: var(--radius-lg);  /* Bordas arredondadas */
  background: var(--primary-subtle); /* Fundo azul bem claro */
  display: flex;                    /* Flexbox para centralizar */
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-lg);   /* 24px abaixo */
  font-size: 1.75rem;               /* 28px para emoji */
}

/* Card - título */
.service-card h2 {
  color: var(--text-dark);          /* Texto preto */
  margin-bottom: var(--space-md);   /* 16px abaixo */
  font-size: 1.375rem;              /* 22px */
}

/* Card - texto descritivo */
.service-card p {
  color: var(--text-dark-secondary); /* Cinza escuro */
  font-size: 0.9375rem;             /* 15px */
  line-height: 1.7;                 /* Altura de linha confortável */
  margin-bottom: var(--space-lg);   /* 24px abaixo */
}

/* Card - link "Saiba mais" */
.service-card .text-link {
  font-size: 0.9375rem;             /* 15px */
}


/* =========================================================================
   3. ITENS DE SERVIÇO (páginas internas TI e Áudio)
   =========================================================================
   Cards mais simples listando os serviços específicos
   ========================================================================= */

/* Item de serviço - container */
.service-item {
  background: var(--bg-white);      /* Fundo branco */
  border-radius: var(--radius-lg);  /* Bordas arredondadas (16px) */
  padding: var(--space-xl);         /* 32px de padding */
  border: 1px solid var(--border-light); /* Borda cinza clara */
  transition: all var(--duration-normal) var(--ease-out);
}

/* Item - hover */
.service-item:hover {
  border-color: var(--primary);     /* Borda azul */
  box-shadow: 0 0 0 1px var(--primary); /* Segunda borda azul (efeito duplo) */
}

/* Item - título com bullet */
.service-item h2 {
  color: var(--text-dark);          /* Texto preto */
  font-size: 1.25rem;               /* 20px */
  margin-bottom: var(--space-sm);   /* 8px abaixo */
  display: flex;                    /* Flexbox para bullet + texto */
  align-items: center;
  gap: var(--space-sm);             /* 8px entre bullet e texto */
}

/* Item - bullet azul antes do título */
.service-item h2::before {
  content: '';                      /* Pseudo-elemento */
  width: 8px;                       /* 8px de largura */
  height: 8px;                      /* 8px de altura */
  background: var(--primary);       /* Azul */
  border-radius: var(--radius-full); /* Círculo perfeito */
  flex-shrink: 0;                   /* Não encolhe */
}

/* Item - texto descritivo */
.service-item p {
  color: var(--text-dark-secondary); /* Cinza escuro */
  font-size: 0.9375rem;             /* 15px */
  line-height: 1.7;
  margin: 0;                        /* Remove margem padrão */
  padding-left: calc(8px + var(--space-sm)); /* Alinha com o título (bullet + gap) */
}


/* =========================================================================
   4. FORMULÁRIOS
   =========================================================================
   Estilos para inputs, textareas e labels
   ========================================================================= */

/* Grupo de campo (label + input) */
.form-group {
  margin-bottom: 10px;              /* 10px entre campos */
}

/* Label */
label {
  display: block;                   /* Block para ficar acima do input */
  font-size: 0.75rem;               /* 12px */
  font-weight: 600;                 /* Semi-bold */
  color: var(--text-dark);          /* Preto */
  margin-bottom: 3px;               /* 3px acima do input */
}

/* Asterisco vermelho (campo obrigatório) */
.label-required {
  color: var(--error);              /* Vermelho */
  margin-left: 2px;                 /* Pequeno espaço após o texto */
}

/* Campos de texto, email, número e textarea */
input[type="text"],
input[type="email"],
input[type="number"],
textarea {
  width: 100%;                      /* Largura total */
  padding: 8px 10px;                /* Padding interno */
  font-size: 0.8125rem;             /* 13px */
  font-family: inherit;             /* Mesma fonte do site */
  color: var(--text-dark);          /* Texto preto */
  background: var(--bg-white);      /* Fundo branco */
  border: 2px solid var(--border-light); /* Borda cinza */
  border-radius: var(--radius-sm);  /* Bordas levemente arredondadas */
  transition: all var(--duration-fast) var(--ease-out);
  outline: none;                    /* Remove outline padrão do navegador */
}

/* Placeholder dos campos */
input::placeholder,
textarea::placeholder {
  color: var(--text-subtle);        /* Cinza claro */
}

/* Campo em foco */
input:focus,
textarea:focus {
  border-color: var(--primary);     /* Borda azul */
  box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1); /* Glow azul suave */
}

/* Textarea específico */
textarea {
  min-height: 70px;                 /* Altura mínima */
  resize: vertical;                 /* Só redimensiona verticalmente */
  line-height: 1.4;                 /* Altura de linha */
}

/* Dica abaixo do campo */
.form-hint {
  display: block;                   /* Block para nova linha */
  font-size: 0.65rem;               /* 10.4px - bem pequeno */
  color: var(--text-dark-secondary); /* Cinza */
  margin-top: 2px;                  /* Pequeno espaço acima */
}


/* =========================================================================
   5. CAPTCHA
   =========================================================================
   Campo de verificação matemática simples
   ========================================================================= */

/* Container do captcha */
.captcha-group {
  background: var(--bg-light);      /* Fundo cinza claro */
  border-radius: var(--radius-sm);  /* Bordas arredondadas */
  padding: 8px 10px;                /* Padding interno */
  border: 2px solid var(--border-light); /* Borda cinza */
}

/* Wrapper interno (pergunta + input) */
.captcha-wrapper {
  display: flex;                    /* Flexbox horizontal */
  align-items: center;              /* Centraliza verticalmente */
  gap: 10px;                        /* Espaço entre pergunta e input */
  margin-top: 3px;                  /* Pequeno espaço após label */
}

/* Texto da pergunta "Quanto é X + Y?" */
.captcha-question {
  font-size: 0.75rem;               /* 12px */
  color: var(--text-dark);          /* Preto */
  font-weight: 500;                 /* Peso médio */
}

/* Números em destaque na pergunta */
.captcha-question strong {
  color: var(--primary);            /* Azul */
  font-size: 0.9rem;                /* Um pouco maior */
  font-family: 'JetBrains Mono', monospace; /* Fonte monospace */
}

/* Input do captcha */
.captcha-wrapper input {
  max-width: 80px;                  /* Largura limitada */
  text-align: center;               /* Texto centralizado */
  font-size: 0.875rem;              /* 14px */
  font-weight: 600;                 /* Semi-bold */
  font-family: 'JetBrains Mono', monospace; /* Fonte monospace */
  padding: 6px 8px;                 /* Padding menor */
}


/* =========================================================================
   6. MENSAGENS DE RETORNO
   =========================================================================
   Mensagens de erro, sucesso e info após submit do formulário
   ========================================================================= */

/* Container das mensagens (escondido por padrão) */
#retorno,
.form-retorno {
  margin-top: 8px;                  /* Espaço acima */
  padding: 8px 10px;                /* Padding interno */
  border-radius: var(--radius-sm);  /* Bordas arredondadas */
  font-size: 0.75rem;               /* 12px */
  line-height: 1.4;
  display: none;                    /* Escondido por padrão */
}

/* Mostra quando tem conteúdo */
.form-retorno:not(:empty),
#retorno:not(:empty) {
  display: block;                   /* Visível quando tem texto */
}

/* Mensagem de erro */
.form-error {
  background: var(--error-bg);      /* Fundo vermelho claro */
  border: 1px solid rgba(239, 68, 68, 0.3); /* Borda vermelha */
  color: var(--error);              /* Texto vermelho */
  display: block;                   /* Força visibilidade */
}

/* Mensagem de sucesso */
.form-success {
  background: var(--success-bg);    /* Fundo verde claro */
  border: 1px solid rgba(16, 185, 129, 0.3); /* Borda verde */
  color: var(--success);            /* Texto verde */
  display: block;
}

/* Mensagem informativa (verificação em andamento) */
.form-info {
  background: var(--primary-subtle); /* Fundo azul claro */
  border: 1px solid rgba(var(--primary-rgb), 0.3); /* Borda azul */
  color: var(--primary);            /* Texto azul */
  display: block;
}

/* Botão dentro do formulário de contato - menor */
.contact-form-modern .btn-primary {
  margin-top: 10px;                 /* Espaço acima */
  padding: 10px 20px;               /* Padding menor que o padrão */
  font-size: 0.8125rem;             /* 13px */
}


/* =========================================================================
   7. OVERLAY DE SUCESSO
   =========================================================================
   Modal que aparece após envio bem-sucedido do formulário
   ========================================================================= */

/* Overlay - fundo escuro que cobre toda tela */
.success-overlay {
  position: fixed;                  /* Fixo na viewport */
  inset: 0;                         /* Cobre tudo (top/right/bottom/left = 0) */
  background: rgba(3, 7, 18, 0.9);  /* Preto 90% opaco */
  backdrop-filter: blur(12px);      /* Desfoca conteúdo atrás */
  display: flex;                    /* Flexbox para centralizar card */
  align-items: center;
  justify-content: center;
  z-index: 9999;                    /* Acima de absolutamente tudo */
  animation: fadeIn 0.3s var(--ease-out); /* Animação de entrada */
}

/* Overlay escondido quando tem atributo hidden */
.success-overlay[hidden] {
  display: none;
}

/* Card de sucesso - conteúdo do modal */
.success-card {
  background: var(--bg-white);      /* Fundo branco */
  padding: var(--space-3xl);        /* 64px de padding */
  border-radius: var(--radius-xl);  /* Bordas bem arredondadas */
  box-shadow: var(--shadow-xl);     /* Sombra grande */
  text-align: center;               /* Texto centralizado */
  max-width: 480px;                 /* Largura máxima */
  animation: slideUp 0.4s var(--ease-out); /* Animação de entrada */
}

/* Ícone de check verde */
.success-icon {
  width: 72px;                      /* 72px de largura */
  height: 72px;                     /* 72px de altura */
  background: linear-gradient(135deg, var(--success), #059669); /* Gradiente verde */
  border-radius: var(--radius-full); /* Círculo perfeito */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;                  /* 32px para ícone ✓ */
  color: var(--bg-white);           /* Ícone branco */
  margin: 0 auto var(--space-lg);   /* Centralizado com espaço abaixo */
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3); /* Sombra verde */
}

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

/* Texto do card de sucesso */
.success-card p {
  color: var(--text-dark-secondary);
  font-size: 1rem;                  /* 16px */
  margin-bottom: var(--space-lg);   /* 24px abaixo */
}

/* Dica de como fechar */
.success-hint {
  font-size: 0.8125rem;             /* 13px */
  color: var(--text-subtle);        /* Cinza discreto */
}


/* =========================================================================
   8. ANIMAÇÕES
   ========================================================================= */

/* Fade in - aparece gradualmente */
@keyframes fadeIn {
  from { opacity: 0; }              /* Começa invisível */
  to { opacity: 1; }                /* Termina visível */
}

/* Slide up - sobe de baixo */
@keyframes slideUp {
  from {
    opacity: 0;                     /* Começa invisível */
    transform: translateY(20px);    /* Começa 20px abaixo */
  }
  to {
    opacity: 1;                     /* Termina visível */
    transform: translateY(0);       /* Termina na posição normal */
  }
}

/* Pulse - pisca (NÃO USADO, mas disponível) */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Classe para aplicar animação de entrada */
.animate-in {
  animation: slideUp 0.6s var(--ease-out) forwards;
  opacity: 0;                       /* Começa invisível */
}

/* Delays escalonados para múltiplos elementos */
.animate-in:nth-child(1) { animation-delay: 0.1s; }
.animate-in:nth-child(2) { animation-delay: 0.2s; }
.animate-in:nth-child(3) { animation-delay: 0.3s; }
.animate-in:nth-child(4) { animation-delay: 0.4s; }


/* =========================================================================
   9. UTILITÁRIOS
   ========================================================================= */

/* Esconde visualmente mas mantém acessível para leitores de tela */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Texto com gradiente azul-ciano (usado no hero "TI e Áudio") */
.text-gradient {
  background: linear-gradient(135deg, var(--primary-light), var(--accent));
  -webkit-background-clip: text;    /* Clip para texto (Chrome/Safari) */
  -webkit-text-fill-color: transparent; /* Texto transparente mostra gradiente */
  background-clip: text;            /* Padrão */
}


/* =========================================
   AUDIO - DIFERENCIAIS PROFISSIONAIS
========================================= */

.audio-differentials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}

.audio-diff-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-align: center;
  backdrop-filter: blur(6px);
}

.audio-diff-card h3 {
  color: var(--text-primary);
  font-size: 1.1rem;
  margin-bottom: var(--space-sm);
}

.audio-diff-card p {
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0;
}

/* Mobile */
@media (max-width: 768px) {
  .audio-differentials {
    grid-template-columns: 1fr;
  }
}

/* =========================================
   TI - DIFERENCIAIS PROFISSIONAIS
========================================= */

.ti-differentials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}

.ti-diff-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-align: center;
  backdrop-filter: blur(6px);
}

.ti-diff-card h3 {
  color: var(--text-primary);
  font-size: 1.1rem;
  margin-bottom: var(--space-sm);
}

.ti-diff-card p {
  color: var(--text-muted);
  font-size: 0.875rem;
  line-height: 1.5;
  margin: 0;
}

/* Mobile */
@media (max-width: 768px) {
  .ti-differentials {
    grid-template-columns: 1fr;
  }
}


/* =========================================================================
   FIM DO ARQUIVO COMPONENTS.CSS
   ========================================================================= */

/* =========================================================================
   BADGES DE EXPERIÊNCIA - 23 ANOS
   =========================================================================
   Badge destacado no hero e páginas internas
   ========================================================================= */

/* Badge no hero (home) */
.hero-badge {
  display: inline-flex;           /* Flexbox inline */
  align-items: center;            /* Alinha verticalmente */
  gap: 8px;                       /* Espaço entre ícone e texto */
  background: rgba(var(--primary-rgb), 0.15); /* Azul translúcido */
  border: 1px solid rgba(var(--primary-rgb), 0.3); /* Borda azul */
  padding: 8px 16px;              /* Padding interno */
  border-radius: var(--radius-full); /* Pill shape */
  font-size: 0.875rem;            /* 14px */
  font-weight: 600;               /* Semi-negrito */
  color: var(--primary-light);    /* Azul claro */
  margin-bottom: var(--space-lg); /* 24px abaixo */
  animation: fadeInUp 0.6s ease-out; /* Animação de entrada */
}

/* Ícone da estrela no badge do hero */
.hero-badge svg {
  width: 16px;
  height: 16px;
  stroke: var(--primary-light);
  flex-shrink: 0;
}

/* Badge nas páginas internas (TI e Áudio) */
.experience-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.15), rgba(var(--accent-rgb), 0.1));
  border: 1px solid rgba(var(--primary-rgb), 0.3);
  padding: 10px 20px;
  border-radius: var(--radius-full);
  font-size: 0.9375rem;           /* 15px */
  font-weight: 600;
  color: var(--primary);
  margin-bottom: var(--space-xl); /* 32px abaixo */
  box-shadow: 0 2px 12px rgba(var(--primary-rgb), 0.15);
}

/* Ícone da estrela no badge de página interna */
.experience-badge svg {
  width: 20px;
  height: 20px;
  stroke: var(--primary);
  fill: none;
  flex-shrink: 0;
}

/* Footer - linha de experiência */
.footer-experience {
  display: block;                 /* Em nova linha */
  margin-top: 8px;                /* Espaço acima */
  font-size: 0.8125rem;           /* 13px - um pouco menor */
  color: var(--text-subtle);      /* Cinza mais discreto */
  font-weight: 500;
}

/* Animação fadeInUp para o badge */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================================================
   FIM DOS BADGES DE EXPERIÊNCIA
   ========================================================================= */