/* ============================================================
   ARQUITETURA CSS RESPONSIVA UNIVERSAL (2026)
   ============================================================ */

:root {
  /* Escala de tipografia fluida: Base 16px, escala conforme viewport */
  --base-font-size: clamp(0.9375rem, 0.7vw + 0.5rem, 1.25rem);
  
  /* Espaçamentos adaptativos */
  --spacing-xs: clamp(0.5rem, 1vw, 0.75rem);
  --spacing-sm: clamp(0.75rem, 1.5vw, 1rem);
  --spacing-md: clamp(1rem, 2vw, 1.5rem);
  --spacing-lg: clamp(1.5rem, 3vw, 2.5rem);
  --spacing-xl: clamp(2rem, 4vw, 3.5rem);
  
  /* Largura máxima do conteúdo */
  --max-content-width: clamp(480px, 90vw, 520px);
  
  /* Gap do grid adaptativo */
  --grid-gap: clamp(1rem, 2.5vw, 1.5rem);
  
  /* Tamanhos de fonte adaptativos */
  --font-size-xs: clamp(0.75rem, 1vw, 0.85rem);
  --font-size-sm: clamp(0.85rem, 1.2vw, 0.95rem);
  --font-size-base: clamp(0.9rem, 1.3vw, 1rem);
  --font-size-lg: clamp(1.1rem, 1.8vw, 1.3rem);
  --font-size-xl: clamp(1.4rem, 2.5vw, 1.7rem);
  --font-size-2xl: clamp(1.8rem, 3vw, 2.4rem);
  
  /* Bordas adaptativas */
  --border-radius-sm: clamp(10px, 1.5vw, 12px);
  --border-radius-md: clamp(15px, 2vw, 20px);
  --border-radius-lg: clamp(18px, 2.5vw, 25px);
  
  /* Espessura de borda adaptativa */
  --border-width: clamp(2px, 0.3vw, 4px);
}

/* ============================================================
   ESTILOS DO HERO E FORMULÁRIO DE LEADS
   ============================================================ */

/* Hero Section */
.hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
  padding: 3rem 0 2rem;
  text-align: center;
}

.hero-left {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 800px;
  margin: 0 auto;
}

.hero-right {
  display: flex;
  justify-content: flex-end;
}

/* Logo principal do topo */
.hero-logo {
  width: 192px;
  height: 192px;
  margin-bottom: 0.5rem;
  object-fit: contain;
}

.hero-eyebrow {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4B5563;
}

.hero-title {
  font-size: 2.4rem;
  line-height: 1.15;
  font-weight: 800;
  color: #111827;
}

.hero-title span {
  color: #1D4ED8;
}

.hero-subtitle {
  font-size: 1.05rem;
  color: #4B5563;
  max-width: 32rem;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  background: #ECFEF3;
  color: #166534;
  font-size: 0.85rem;
  font-weight: 600;
}

.hero-badge i {
  color: #16A34A;
}

.hero-list {
  margin-top: 0.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem 1.5rem;
  font-size: 0.95rem;
  color: #374151;
}

.hero-list li {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.hero-list i {
  color: #22C55E;
  font-size: 0.95rem;
}

.hero-whatsapp-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.3rem;
  border-radius: 999px;
  background: #22C55E;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  margin-bottom: 0.5rem;
  box-shadow: 0 8px 20px rgba(34, 197, 94, 0.4);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.hero-whatsapp-top i {
  font-size: 1.1rem;
}

.hero-whatsapp-top:hover {
  background: #16A34A;
  transform: translateY(-1px);
  box-shadow: 0 10px 25px rgba(34, 197, 94, 0.5);
}

.hero-note {
  font-size: 0.8rem;
  color: #6B7280;
  margin-top: 0.25rem;
}

/* ============================================================
   FORMULÁRIO DE LEADS - CARD PRINCIPAL
   ============================================================ */

/* ============================================================
   FORMULÁRIO DE LEADS - CARD PRINCIPAL (RESPONSIVO)
   ============================================================ */

/* Estilo principal do card do formulário - máxima especificidade e responsividade */
.lead-form-card,
.modal-form-card.lead-form-card,
div.lead-form-card.modal-form-card,
.form-modal-container .lead-form-card,
.form-modal-container .modal-form-card {
  width: 100% !important;
  max-width: var(--max-content-width) !important;
  min-width: clamp(300px, 85vw, 480px) !important;
  background: #ffffff !important;
  border-radius: var(--border-radius-md) !important;
  box-shadow: 0 clamp(15px, 2vw, 20px) clamp(40px, 5vw, 50px) rgba(15, 23, 42, 0.2) !important;
  padding: var(--spacing-xl) var(--spacing-lg) var(--spacing-lg) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--spacing-md) !important;
  position: relative !important;
  /* Borda visível e adaptativa em todos os lados */
  border: var(--border-width) solid #6B7280 !important;
  border-top: var(--border-width) solid #6B7280 !important;
  border-right: var(--border-width) solid #6B7280 !important;
  border-bottom: var(--border-width) solid #6B7280 !important;
  border-left: var(--border-width) solid #6B7280 !important;
  overflow: visible !important;
  min-height: auto !important;
  box-sizing: border-box !important;
}

/* Botão de fechar do modal - responsivo e garantindo visibilidade */
.lead-form-card .form-modal-close,
.form-modal-close {
  position: absolute !important;
  top: clamp(10px, 1.5vw, 15px) !important;
  right: clamp(10px, 1.5vw, 15px) !important;
  background: #ffffff !important;
  border: clamp(2px, 0.4vw, 3px) solid #DC2626 !important;
  width: clamp(36px, 5vw, 44px) !important;
  height: clamp(36px, 5vw, 44px) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 10001 !important;
  color: #DC2626 !important;
  font-size: clamp(18px, 2.5vw, 24px) !important;
  font-weight: bold !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 clamp(3px, 0.5vw, 4px) clamp(12px, 2vw, 16px) rgba(220, 38, 38, 0.4) !important;
  line-height: 1 !important;
}

.lead-form-card .form-modal-close:hover,
.form-modal-close:hover {
  background: #FEE2E2 !important;
  color: #991B1B !important;
  transform: scale(1.15) !important;
  box-shadow: 0 6px 16px rgba(220, 38, 38, 0.4) !important;
  border-color: #991B1B !important;
}

/* Header do formulário - responsivo e máxima especificidade */
.lead-form-header,
.lead-form-card .lead-form-header,
.modal-form-card .lead-form-header,
div.lead-form-card .lead-form-header {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--spacing-sm) !important;
  margin-bottom: var(--spacing-md) !important;
  margin-top: 0 !important;
  padding-top: var(--spacing-sm) !important;
  padding-right: clamp(2.5rem, 4vw, 3rem) !important;
  padding-left: 0 !important;
  padding-bottom: 0 !important;
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.lead-form-header > div {
  width: 100%;
  flex: 1;
  box-sizing: border-box;
}

/* Título do formulário - responsivo e máxima especificidade */
.lead-form-header h2,
.lead-form-card .lead-form-header h2,
.modal-form-card .lead-form-header h2,
div.lead-form-card .lead-form-header h2,
.form-modal-container .lead-form-header h2 {
  font-size: var(--font-size-xl) !important;
  line-height: clamp(1.3, 0.1vw + 1.2, 1.4) !important;
  margin: 0 0 var(--spacing-sm) 0 !important;
  color: #0F172A !important;
  font-weight: 900 !important;
  letter-spacing: clamp(-0.02em, -0.01vw, -0.01em);
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  text-align: left !important;
  padding: 0 !important;
  text-shadow: none !important;
  background: transparent !important;
}

.lead-form-header > div span {
  font-size: var(--font-size-sm) !important;
  color: #4B5563;
  display: block;
  margin-top: var(--spacing-sm);
  line-height: clamp(1.5, 0.1vw + 1.4, 1.6);
  width: 100%;
  text-align: left;
}

.lead-form-tag {
  display: none;
}

/* ============================================================
   FORMULÁRIO DE LEADS - ESTRUTURA
   ============================================================ */

.lead-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.form-group label {
  font-size: var(--font-size-xs) !important;
  font-weight: 600;
  color: #4B5563;
}

.form-group label span {
  color: #DC2626;
}

.form-control,
.form-select {
  border-radius: var(--border-radius-sm);
  border: clamp(1px, 0.2vw, 1.5px) solid #D1D5DB;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-base) !important;
  outline: none;
  transition: all 0.2s ease;
  font-family: inherit;
  background-color: #ffffff;
  color: #111827;
}

.form-control::placeholder {
  color: #9CA3AF;
}

.form-control:focus,
.form-select:focus {
  border-color: #1D4ED8;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  background-color: #ffffff;
}

.form-helper {
  font-size: var(--font-size-xs) !important;
  color: #9CA3AF;
  margin-top: clamp(-0.3rem, -0.1vw, -0.2rem);
}

/* ============================================================
   BOTÃO DE SUBMIT
   ============================================================ */

.btn-submit {
  margin-top: var(--spacing-xs);
  width: 100%;
  border: none;
  border-radius: var(--border-radius-sm);
  background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
  color: #ffffff;
  font-weight: 700;
  font-size: var(--font-size-base) !important;
  padding: var(--spacing-md) var(--spacing-lg);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  box-shadow: 0 clamp(6px, 1vw, 8px) clamp(15px, 2.5vw, 20px) rgba(34, 197, 94, 0.4);
  text-transform: uppercase;
  letter-spacing: clamp(0.03em, 0.02vw, 0.05em);
  transition: all 0.3s ease;
}

.btn-submit i {
  font-size: clamp(1rem, 1.5vw, 1.1rem);
}

.btn-submit:hover {
  background: linear-gradient(135deg, #16A34A 0%, #15803D 100%);
  transform: translateY(clamp(-1px, -0.2vw, -2px));
  box-shadow: 0 clamp(10px, 1.5vw, 12px) clamp(25px, 3vw, 30px) rgba(34, 197, 94, 0.5);
}

.btn-submit:active {
  transform: translateY(0);
}

/* ============================================================
   BREAKPOINTS ESPECÍFICOS PARA RESPONSIVIDADE
   ============================================================ */

/* Ajuste para resolução 1024x768 (Tablets e notebooks pequenos) */
@media (max-width: 1024px) and (min-height: 768px) {
  :root {
    --max-content-width: clamp(400px, 85vw, 480px);
    --spacing-xl: clamp(2rem, 3vw, 2.5rem);
    --spacing-lg: clamp(1.2rem, 2vw, 1.8rem);
  }
  
  .lead-form-card,
  .modal-form-card.lead-form-card {
    padding: clamp(2.5rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2rem) !important;
    max-width: clamp(400px, 90vw, 480px) !important;
  }
  
  .lead-form-header h2 {
    font-size: clamp(1.4rem, 2.5vw, 1.6rem) !important;
  }
  
  .form-modal-container {
    padding: clamp(15px, 2vw, 20px) !important;
  }
}

/* Ajuste para resolução 1920x1080 (Full HD - Padrão) */
@media (min-width: 1920px) and (max-width: 1920px) {
  :root {
    --max-content-width: 520px;
    --spacing-xl: 3.5rem;
    --spacing-lg: 2.2rem;
  }
  
  .lead-form-card,
  .modal-form-card.lead-form-card {
    max-width: 520px !important;
    padding: 3.5rem 2.2rem 2rem !important;
  }
  
  .lead-form-header h2 {
    font-size: 1.7rem !important;
  }
}

/* Ajuste para resoluções menores que 1024px (Mobile e tablets pequenos) */
@media (max-width: 1023px) {
  .lead-form-card,
  .modal-form-card.lead-form-card {
    max-width: 95vw !important;
    min-width: 320px !important;
    padding: clamp(2rem, 4vw, 2.5rem) clamp(1.2rem, 3vw, 1.8rem) clamp(1.2rem, 3vw, 1.8rem) !important;
  }
  
  .lead-form-header {
    padding-right: clamp(2rem, 4vw, 2.5rem) !important;
  }
  
  .form-modal-close {
    width: clamp(32px, 5vw, 40px) !important;
    height: clamp(32px, 5vw, 40px) !important;
    font-size: clamp(16px, 2.5vw, 20px) !important;
  }
}

/* Ajuste para resoluções maiores que 1920px (QHD, 4K) */
@media (min-width: 2560px) {
  .lead-form-card,
  .modal-form-card.lead-form-card {
    max-width: 600px !important;
    padding: 4rem 2.5rem 2.5rem !important;
  }
  
  .lead-form-header h2 {
    font-size: 2rem !important;
  }
  
  .form-control,
  .form-select {
    font-size: 1rem !important;
    padding: 1rem 1.2rem;
  }
}

/* Ajuste para telas 16:10 (1920x1200, 2880x1800) */
@media (min-aspect-ratio: 16/10) {
  .lead-form-card,
  .modal-form-card.lead-form-card {
    max-height: 90vh;
    overflow-y: auto;
  }
}