/* ========================================
   UX OPTIMIZATIONS CSS - v2.0
   Contraste, Tamanho de Elementos e Mobile-First
   ======================================== */

/* ========== VARIÁVEIS ATUALIZADAS ========== */
:root {
  /* Cores com melhor contraste */
  --color-text-dark: #1a1a1a;
  --color-text-darker: #000000;
  
  /* Contraste melhorado para footer */
  --color-footer-text: #ffffff;
  --color-footer-text-secondary: #e8e8e8;
}

/* ========== HERO SECTION - MELHOR CONTRASTE ========== */
.hero-overlay {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.75)) !important;
}

.hero-title {
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
  font-weight: 700;
}

.hero-description {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
  color: rgba(255, 255, 255, 1) !important;
}

.hero-subtitle {
  color: rgba(255, 255, 255, 1) !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
}

/* ========== BOTÕES - TAMANHO OTIMIZADO ========== */

/* Desktop */
.btn {
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.btn-large {
  padding: 1.25rem 2.5rem;
  font-size: var(--text-lg);
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Mobile - Botões menores e mais compactos */
@media (max-width: 640px) {
  .btn {
    padding: 0.75rem 1.25rem;
    font-size: var(--text-sm);
    min-height: 44px;
    gap: var(--spacing-xs);
  }
  
  .btn-large {
    padding: 0.875rem 1.5rem;
    font-size: var(--text-base);
    min-height: 44px;
  }
  
  .btn-icon {
    width: 16px;
    height: 16px;
  }
  
  /* Garantir que o texto do botão quebra corretamente */
  .hero-cta .btn {
    line-height: 1.3;
  }
}

/* Tablet */
@media (min-width: 641px) and (max-width: 1023px) {
  .btn-large {
    padding: 1rem 2rem;
    font-size: var(--text-base);
  }
}

/* ========== FORMULÁRIO - MELHOR CONTRASTE E UX ========== */

/* Opções de radio/checkbox */
.form-option-text {
  color: var(--color-text-dark) !important;
  font-size: var(--text-lg);
  font-weight: 500;
}

.form-checkbox-text {
  color: var(--color-text-dark) !important;
  font-size: var(--text-base);
  font-weight: 500;
}

.form-option:hover .form-option-text,
.form-checkbox:hover .form-checkbox-text {
  color: var(--color-text-darker) !important;
}

/* Melhorar hit area em mobile */
@media (max-width: 640px) {
  .form-option {
    padding: var(--spacing-md) var(--spacing-lg);
    min-height: 48px;
    display: flex;
    align-items: center;
  }
  
  .form-checkbox {
    padding: var(--spacing-md) var(--spacing-lg);
    min-height: 48px;
    display: flex;
    align-items: center;
  }
  
  .form-checkbox input[type="checkbox"] {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
  }
  
  .form-option-text {
    font-size: var(--text-base);
  }
  
  .form-checkbox-text {
    font-size: var(--text-sm);
  }
}

/* Labels com melhor contraste */
.form-label {
  color: var(--color-text-dark) !important;
  font-weight: 600;
  font-size: var(--text-sm);
}

/* Inputs com melhor contraste */
.form-input {
  color: var(--color-text-dark) !important;
  background-color: var(--color-white) !important;
  border: 2px solid #e0e0e0 !important;
}

.form-input::placeholder {
  color: #999999 !important;
}

.form-input:focus {
  border-color: var(--color-primary) !important;
  background-color: var(--color-white) !important;
}

/* Título do formulário */
.form-step-title {
  color: var(--color-text-dark) !important;
  font-weight: 700;
  line-height: 1.3;
}

.form-step-intro {
  color: var(--color-text-light) !important;
}

/* ========== FOOTER - MELHOR CONTRASTE ========== */
.footer {
  background-color: #1a1a1a;
}

.footer-content {
  color: var(--color-footer-text-secondary);
}

.footer-logo {
  color: var(--color-primary) !important;
}

.footer-tagline {
  color: var(--color-footer-text-secondary) !important;
}

.footer-info p,
.footer-contact p {
  color: var(--color-footer-text-secondary) !important;
}

.footer-bottom {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* ========== SEÇÕES GERAIS - CONTRASTE ========== */

.section-title {
  color: var(--color-text-dark) !important;
  font-weight: 700;
}

.section-text {
  color: var(--color-text-light) !important;
}

.section-text-large {
  color: var(--color-text-dark) !important;
}

/* ========== CARDS - MELHOR LEGIBILIDADE ========== */

.symptom-title {
  color: var(--color-text-dark) !important;
  font-weight: 600;
}

.method-title {
  color: var(--color-text-dark) !important;
  font-weight: 700;
}

.method-description {
  color: var(--color-text-light) !important;
}

/* ========== AUTORIDADE SECTION ========== */

.authority-quote {
  color: var(--color-text-dark) !important;
  border-left-color: var(--color-primary) !important;
}

.authority-name {
  color: var(--color-text-dark) !important;
}

.authority-credentials {
  color: var(--color-text-light) !important;
}

/* ========== BANNER DE URGÊNCIA - RESPONSIVO ========== */

@media (max-width: 640px) {
  .urgency-content {
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
  }
  
  .urgency-icon {
    font-size: var(--text-lg);
  }
  
  .urgency-text {
    font-size: var(--text-xs);
    font-weight: 600;
  }
  
  .urgency-timer {
    font-size: var(--text-sm);
    width: 100%;
    text-align: center;
  }
}

/* ========== ESPAÇAMENTO EM MOBILE ========== */

@media (max-width: 640px) {
  .section {
    padding: var(--spacing-xl) 0;
  }
  
  .section-title {
    margin-bottom: var(--spacing-lg);
    font-size: clamp(1.5rem, 4vw, 2rem);
  }
  
  .section-text {
    font-size: var(--text-base);
    margin-bottom: var(--spacing-lg);
  }
  
  .form-progressive {
    padding: var(--spacing-lg);
  }
  
  .form-step-title {
    font-size: var(--text-lg);
    margin-bottom: var(--spacing-lg);
  }
}

/* ========== NAVEGAÇÃO - MELHOR CONTRASTE ========== */

.nav-link {
  color: var(--color-text-dark) !important;
  font-weight: 700;
}

.nav-link:hover {
  color: var(--color-primary) !important;
}

/* ========== FAQ - CONTRASTE ========== */

.faq-question {
  color: var(--color-text-dark) !important;
  font-weight: 600;
}

.faq-answer p {
  color: var(--color-text-light) !important;
}

/* ========== CTA FINAL ========== */

.cta-final-title {
  color: var(--color-white) !important;
  font-weight: 700;
}

.cta-final-text {
  color: rgba(255, 255, 255, 1) !important;
}

/* ========== TESTEMUNHOS ========== */

.section-subtitle {
  color: var(--color-text-light) !important;
}

/* ========== PROVA SOCIAL ========== */

.social-proof-text {
  color: var(--color-text-dark) !important;
}

.social-proof-text strong {
  color: var(--color-text-darker) !important;
  font-weight: 700;
}

/* ========== ACESSIBILIDADE - HIT AREAS ========== */

/* Garantir mínimo 44x44px para todos os botões */
.btn {
  min-width: 44px;
  min-height: 44px;
}

/* Melhorar espaçamento de links */
a {
  padding: 0.25rem;
}

/* ========== TIPOGRAFIA EM MOBILE ========== */

@media (max-width: 640px) {
  h1 {
    font-size: clamp(1.75rem, 5vw, 2.5rem);
  }
  
  h2 {
    font-size: clamp(1.5rem, 4vw, 2rem);
  }
  
  h3 {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
  }
  
  p {
    line-height: 1.7;
  }
}

/* ========== AJUSTES PARA SUPER MOBILE (< 360px) ========== */

@media (max-width: 360px) {
  .btn {
    padding: 0.625rem 1rem;
    font-size: var(--text-xs);
  }
  
  .btn-large {
    padding: 0.75rem 1.25rem;
    font-size: var(--text-sm);
  }
  
  .form-option {
    padding: var(--spacing-sm) var(--spacing-md);
  }
  
  .form-checkbox {
    padding: var(--spacing-sm) var(--spacing-md);
  }
  
  .urgency-timer {
    font-size: var(--text-xs);
  }
}

/* ========== MELHORIAS DE CONVERSÃO ========== */

/* Destacar CTAs primários */
.btn-primary {
  box-shadow: 0 4px 15px rgba(var(--color-primary-rgb), 0.4) !important;
  transition: all 0.3s ease !important;
}

.btn-primary:hover {
  box-shadow: 0 8px 25px rgba(var(--color-primary-rgb), 0.5) !important;
  transform: translateY(-2px) !important;
}

.btn-primary:active {
  transform: translateY(0) !important;
}

/* Melhorar feedback visual de formulário */
.form-option:focus-within,
.form-checkbox:focus-within {
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}

/* ========== PRINT STYLES ========== */

@media print {
  .urgency-banner,
  .header,
  .footer {
    display: none;
  }
}