@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Fredoka:wght@600;700&family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@1,400;1,600&display=swap');

:root {
  --color-primary: #3b82f6;    /* Azul acolhedor */
  --color-secondary: #8b5cf6;  /* Roxo neurodiversidade */
  --color-dark: #030712;       /* Fundo quase preto */
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--color-dark);
  color: #f3f4f6;
  overflow-x: hidden;
}

/* Tipografia */
.font-display-serif {
  font-family: 'Playfair Display', serif;
  font-style: italic;
}

.font-display-bold {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: -0.02em;
}

/* Efeito de Retroiluminação Glow */
.radial-glow {
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(
    circle,
    rgba(59, 130, 246, 0.18) 0%,
    rgba(139, 92, 246, 0.12) 40%,
    transparent 70%
  );
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
}

/* Container de Perspectiva 3D do Carrossel */
.carousel-3d-viewport {
  perspective: 1200px;
  transform-style: preserve-3d;
  width: 100%;
  height: 420px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.carousel-3d-stage {
  transform-style: preserve-3d;
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Itens Individuais do Carrossel */
.carousel-item {
  position: absolute;
  width: 260px;
  height: 360px;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), 
              opacity 0.8s ease, 
              filter 0.8s ease;
  transform-style: preserve-3d;
  cursor: pointer;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transition: transform 0.5s ease;
}

.carousel-item:hover img {
  transform: scale(1.05);
}

/* Reflexo de Vidro (Glassmorphism overlay para cards laterais) */
.carousel-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(0, 0, 0, 0.4) 100%
  );
  pointer-events: none;
  transition: opacity 0.5s ease;
}

/* Sombras ativas e borda especial para o item central */
.carousel-item.active {
  border: 1px solid rgba(59, 130, 246, 0.4);
  box-shadow: 0 0 40px rgba(59, 130, 246, 0.25), 
              0 25px 50px -12px rgba(0, 0, 0, 0.7);
}

.carousel-item.active::after {
  opacity: 0.1; /* Menos reflexo no item principal para destacar mais a imagem */
}

/* Efeito de Reflexão Inferior (opcional, dá muito luxo) */
.carousel-item-reflection {
  position: absolute;
  bottom: -90px;
  width: 260px;
  height: 80px;
  opacity: 0.15;
  transform-style: preserve-3d;
  pointer-events: none;
  filter: blur(2px);
  transform: scaleY(-1);
  mask-image: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);
}

.carousel-item-reflection img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Botões de Navegação Customizados */
.nav-btn {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-btn:hover {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.4);
  color: #fff;
  transform: scale(1.05);
}

/* Botão Premium Book Now (Quero Participar) */
.btn-premium {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-premium:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 30px rgba(59, 130, 246, 0.35);
}

.btn-premium:hover .arrow-circle {
  transform: rotate(45deg);
  background-color: #fff;
  color: var(--color-primary);
}

.arrow-circle {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Container de Perspectiva 3D do Carrossel de Benefícios */
.benefits-carousel-viewport {
  perspective: 1200px;
  transform-style: preserve-3d;
  width: 100%;
  height: 370px;
  position: relative;
}

.benefits-carousel-stage {
  transform-style: preserve-3d;
  width: 100%;
  height: 100%;
  position: relative;
}

/* Itens Individuais do Carrossel de Benefícios */
.benefits-carousel-item {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -120px; /* Metade da largura de 240px */
  margin-top: -160px;  /* Metade da altura de 320px */
  width: 240px;
  height: 320px;
  border-radius: 24px;
  overflow: hidden;
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), 
              opacity 0.8s ease, 
              filter 0.8s ease,
              box-shadow 0.3s ease,
              border-color 0.3s ease;
  transform-style: preserve-3d;
  cursor: pointer;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Cores e estilos de borda nos estados inativos e ativos de cada card de benefícios */
.benefits-card-blue {
  border-top: 3px solid rgba(59, 130, 246, 0.7);
}
.benefits-card-blue:hover, .benefits-card-blue.active {
  border-color: rgba(59, 130, 246, 0.45);
  box-shadow: 0 0 25px rgba(59, 130, 246, 0.2), 0 15px 35px rgba(0, 0, 0, 0.5);
}

.benefits-card-purple {
  border-top: 3px solid rgba(168, 85, 247, 0.7);
}
.benefits-card-purple:hover, .benefits-card-purple.active {
  border-color: rgba(168, 85, 247, 0.45);
  box-shadow: 0 0 25px rgba(168, 85, 247, 0.2), 0 15px 35px rgba(0, 0, 0, 0.5);
}

.benefits-card-pink {
  border-top: 3px solid rgba(236, 72, 153, 0.7);
}
.benefits-card-pink:hover, .benefits-card-pink.active {
  border-color: rgba(236, 72, 153, 0.45);
  box-shadow: 0 0 25px rgba(236, 72, 153, 0.2), 0 15px 35px rgba(0, 0, 0, 0.5);
}

.benefits-card-green {
  border-top: 3px solid rgba(16, 185, 129, 0.7);
}
.benefits-card-green:hover, .benefits-card-green.active {
  border-color: rgba(16, 185, 129, 0.45);
  box-shadow: 0 0 25px rgba(16, 185, 129, 0.2), 0 15px 35px rgba(0, 0, 0, 0.5);
}


/* FAQ Accordion Horizontal & Vertical */
.faq-card {
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 768px) {
  /* No Desktop, cards inativos recolhem a largura e rotacionam o título */
  .faq-card:not(.active) {
    flex: 0.8;
  }
  
  .faq-card.active {
    flex: 3.5;
  }

  .faq-card:not(.active) .faq-answer {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    margin-top: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, max-height 0.3s ease, margin 0.3s ease;
  }

  .faq-card.active .faq-answer {
    opacity: 1;
    max-height: 180px;
    margin-top: 1rem;
    transition: opacity 0.5s ease 0.2s, max-height 0.5s ease 0.1s, margin 0.5s ease;
  }

  .faq-card:not(.active) .faq-question {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, max-height 0.3s ease;
  }
  
  .faq-card.active .faq-question {
    opacity: 1;
    max-height: 100px;
    transition: opacity 0.5s ease 0.1s, max-height 0.5s ease;
  }

  .faq-card:not(.active) .faq-icon svg {
    transform: rotate(-90deg);
  }

  .faq-card.active .faq-icon svg {
    transform: rotate(0deg);
  }

  /* Exibe o título vertical rotacionado nos cards colapsados no Desktop */
  .faq-card .faq-vertical-title {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
  }

  .faq-card:not(.active) .faq-vertical-title {
    opacity: 0.8;
    pointer-events: auto;
  }
}

@media (max-width: 767px) {
  /* No mobile, age como accordion vertical tradicional */
  .faq-card:not(.active) .faq-answer {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: 0;
    pointer-events: none;
    transition: all 0.3s ease-out;
  }

  .faq-card.active .faq-answer {
    max-height: 250px;
    opacity: 1;
    margin-top: 1rem;
    transition: all 0.3s ease-in;
  }

  .faq-card:not(.active) .faq-icon svg {
    transform: rotate(0deg);
  }

  .faq-card.active .faq-icon svg {
    transform: rotate(180deg);
  }
}

/* Brilhos e Cores Ativos do Arco-Íris do Autismo */
.faq-card.faq-red.active {
  border-color: rgba(239, 68, 68, 0.45);
  box-shadow: 0 0 25px rgba(239, 68, 68, 0.15), inset 0 0 12px rgba(239, 68, 68, 0.05);
}

.faq-card.faq-orange.active {
  border-color: rgba(249, 115, 22, 0.45);
  box-shadow: 0 0 25px rgba(249, 115, 22, 0.15), inset 0 0 12px rgba(249, 115, 22, 0.05);
}

.faq-card.faq-yellow.active {
  border-color: rgba(250, 204, 21, 0.45);
  box-shadow: 0 0 25px rgba(250, 204, 21, 0.15), inset 0 0 12px rgba(250, 204, 21, 0.05);
}

.faq-card.faq-green.active {
  border-color: rgba(16, 185, 129, 0.45);
  box-shadow: 0 0 25px rgba(16, 185, 129, 0.15), inset 0 0 12px rgba(16, 185, 129, 0.05);
}

.faq-card.faq-blue.active {
  border-color: rgba(56, 189, 248, 0.45);
  box-shadow: 0 0 25px rgba(56, 189, 248, 0.15), inset 0 0 12px rgba(56, 189, 248, 0.05);
}

.faq-card.faq-purple.active {
  border-color: rgba(168, 85, 247, 0.45);
  box-shadow: 0 0 25px rgba(168, 85, 247, 0.15), inset 0 0 12px rgba(168, 85, 247, 0.05);
}

/* Efeitos de Scroll Reveal de Alta Performance para Títulos */
.reveal-title {
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform, opacity;
}

.reveal-title.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Carrossel da Palestrante */
.speaker-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
}

.speaker-slide.active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.speaker-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.speaker-dot:hover {
  background-color: rgba(255, 255, 255, 0.7);
}

.speaker-dot.active {
  background-color: var(--color-primary); /* Azul combinando com a identidade */
  width: 24px; /* Formato pílula ativado */
  border-radius: 4px;
}

#speaker-prev-btn, #speaker-next-btn {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#speaker-prev-btn:hover, #speaker-next-btn:hover {
  background: rgba(59, 130, 246, 0.25);
  border-color: rgba(59, 130, 246, 0.5);
  color: #fff;
  transform: scale(1.1);
}