/* Configuração do Tailwind CSS */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Reset e Base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  font-family: 'Sora', sans-serif;
  background: #f8f5f0;
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  max-width: 100vw;
}

/* Cores Customizadas - Classes CSS */
.bg-azul-primario {
  background-color: #2b3a52;
}
.bg-dourado-destaque {
  background-color: #b8860b;
}
.bg-cinza-grafite {
  background-color: #4a5568;
}
.bg-creme-neutro {
  background-color: #f8f5f0;
}
.bg-texto-escuro {
  background-color: #1a202c;
}
.bg-texto-medio {
  background-color: #6b7280;
}

.text-azul-primario {
  color: #2b3a52;
}
.text-dourado-destaque {
  color: #b8860b;
}
.text-cinza-grafite {
  color: #4a5568;
}
.text-creme-neutro {
  color: #f8f5f0;
}
.text-texto-escuro {
  color: #1a202c;
}
.text-texto-medio {
  color: #6b7280;
}

.border-azul-primario {
  border-color: #2b3a52;
}
.border-dourado-destaque {
  border-color: #b8860b;
}
.border-cinza-grafite {
  border-color: #4a5568;
}

.hover\:text-dourado-destaque:hover {
  color: #b8860b;
}
.hover\:bg-dourado-destaque:hover {
  background-color: #b8860b;
}
.hover\:border-dourado-destaque:hover {
  border-color: #b8860b;
}

/* GRADIENTES ESPECIAIS */
.gradiente-azul-navy {
  background: linear-gradient(135deg, #2b3a52 0%, #1a202c 100%);
}

.gradiente-dourado-premium {
  background: linear-gradient(135deg, #b8860b 0%, #daa520 50%, #b8860b 100%);
}

.gradiente-azul-dourado {
  background: linear-gradient(135deg, #2b3a52 0%, #3d4a5c 50%, #b8860b 100%);
}

.gradiente-radial-elegante {
  background: radial-gradient(
    circle at center,
    #f8f5f0 0%,
    #e8dfd3 50%,
    #d4af37 100%
  );
}

.gradiente-creme-suave {
  background: linear-gradient(180deg, #f8f5f0 0%, #f0ebe3 100%);
}

/* Famílias de Fonte */
.font-sora {
  font-family: 'Sora', sans-serif;
}
.font-raleway {
  font-family: 'Raleway', sans-serif;
}
.font-roboto {
  font-family: 'Roboto', sans-serif;
}

/* Classes de Tipografia Legadas - Convertidas para Sora */
.titulo-hero {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 1.45rem; /* 28px - Reduzido para mobile */
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* Responsivo para tablets e desktop */
@media (min-width: 768px) {
  .titulo-hero {
    font-size: 2.5rem; /* 40px para tablet */
  }
}

@media (min-width: 1024px) {
  .titulo-hero {
    font-size: 3rem; /* 48px para desktop - valor original */
  }
}

.titulo-secao {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 2rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.subtitulo {
  font-family: 'Sora', sans-serif;
  font-weight: 500;

  line-height: 1.4;
  letter-spacing: 0;
}

.texto-corpo {
  font-family: 'Sora', sans-serif;
  font-weight: 400;

  line-height: 1.6;
  letter-spacing: 0.01em;
}

.texto-destaque {
  font-family: 'Sora', sans-serif;
  font-weight: 400;
}

.botao-primario {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
}

.botao-secundario {
  font-family: 'Sora', sans-serif;
}

.texto-pequeno {
  font-family: 'Sora', sans-serif;
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

/* COMPONENTES CUSTOMIZADOS */
.cartao-premium {
  box-shadow: 0 8px 32px rgba(43, 58, 82, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.15);
  transition: all 0.3s ease;
}

.cartao-premium:hover {
  box-shadow: 0 12px 40px rgba(43, 58, 82, 0.12);
  transform: translateY(-2px);
}

.botao-cta-principal {
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
  transition: all 0.3s ease;
}

.botao-cta-principal:hover {
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
  transform: translateY(-1px);
}

.secao-destaque {
  background: linear-gradient(135deg, #f8f5f0 0%, #f0ebe3 100%);
}

.divider-dourado {
  background: linear-gradient(
    90deg,
    transparent 0%,
    #d4af37 50%,
    transparent 100%
  );
  height: 2px;
}

/* Texto Gradiente */
.texto-gradiente {
  background: linear-gradient(135deg, #d4af37, #f4e19c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* GRADIENTES DOURADOS PARA TEXTO */
.texto-gradiente-dourado-destaque {
  background: linear-gradient(135deg, #3d2201 0%, #8b6914 57%, #2f1a04 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.texto-gradiente-dourado-escuro {
  background: linear-gradient(135deg, #8b5a0b 0%, #d4af37 57%, #7a4a09 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.texto-gradiente-dourado-titulo {
  background: linear-gradient(135deg, #2f1a04 0%, #8b6914 45%, #3d2201 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.texto-gradiente-dourado-subtitulo {
  background: linear-gradient(135deg, #3d2201 0%, #6b5b0f 70%, #4a2e06 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Padrão Hero */
.padrao-hero {
  background-image: radial-gradient(
      circle at 25% 25%,
      rgba(212, 175, 55, 0.1) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 75% 75%,
      rgba(43, 58, 82, 0.1) 0%,
      transparent 50%
    );
}

/* Gradientes de Fundo */
.gradiente-azul {
  background: linear-gradient(135deg, #2b3a52, #1a202c);
}

.gradiente-ouro {
  background: linear-gradient(135deg, #d4af37, #f4e19c);
}

/* Animações */
.animacao-flutuante {
  animation: floating 3s ease-in-out infinite;
}

.animacao-surgir {
  animation: fadeInUp 0.8s ease-out;
}

/* Divisória Decorativa */
.divisoria-decorativa {
  position: relative;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    #b8860b 25%,
    #d4af37 50%,
    #b8860b 75%,
    transparent 100%
  );
  opacity: 0.8;
  border-radius: 2px;
}

.divisoria-circulo {
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, #d4af37 0%, #b8860b 100%);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(184, 134, 11, 0.3);
  animation: pulse-gold 2s infinite;
}

@keyframes pulse-gold {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(184, 134, 11, 0.3);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(184, 134, 11, 0.5);
  }
}

/* Keyframes */
@keyframes floating {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

@keyframes pulse-border {
  0%,
  100% {
    border-color: #d4af37;
  }
  50% {
    border-color: #f4e19c;
  }
}

/* Animações de delay para o botão CTA */
.animation-delay-200 {
  animation-delay: 200ms;
}

.animation-delay-300 {
  animation-delay: 300ms;
}

.animation-delay-500 {
  animation-delay: 500ms;
}

/* Estilos específicos para mobile na seção FAQ */
@media (max-width: 767px) {
  /* Melhorias de espaçamento e legibilidade para mobile */
  .faq-question {
    min-height: 60px;
    align-items: flex-start;
  }

  .faq-question span {
    line-height: 1.4;
    word-wrap: break-word;
  }

  .faq-answer {
    line-height: 1.6;
  }

  /* Melhor contraste e legibilidade */
  .faq-question:hover {
    background-color: #f3f4f6;
  }

  /* Ícone mais visível no mobile */
  .faq-question i {
    font-size: 14px;
    margin-top: 2px;
  }

  /* Melhor espaçamento entre itens */
  #faq .space-y-2 > div {
    margin-bottom: 8px;
  }

  /* Texto mais legível nas respostas */
  #faq .faq-answer p {
    font-size: 14px;
    line-height: 1.5;
  }
}

/* Correção de cor para texto "Kit de Fluência em Leitura" na sessão Hero */
.hero-subtitle {
  color: #ffffff;
}
@media (min-width: 1024px) {
  .hero-subtitle {
    color: #2b3a52 !important; /* azul primário */
  }
}