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

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  overflow-x: hidden;
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* =========================
   Fontes
========================= */
@font-face {
  font-family: 'Serp and Molot';
  /* este CSS está em assets/css/style.css → por isso ../fonts */
  src: url('../fonts/SerpAndMolot.woff2') format('woff2'),
       url('../fonts/SerpAndMolot.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* =========================
   Tipografia padronizada
   Headings: Playfair
   Texto/UI: Montserrat
========================= */
h1, h2, h3, .section-title, .benefit-title, .cta-title {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  line-height: 1.2;
}

.section-title { font-size: 2.5rem; margin-bottom: 2rem; color: #1a237e; }
.section-title.center { text-align: center; }
.section-title.white { color: #fff; }

/* Subtítulos/descrições e UI */
.hero-subtitle,
.about-description,
.target-intro,
.benefit-description,
.testimonial-text,
.cta-description,
.cta-detail,
.nav-link,
.btn,
.footer-social a,
.faq-question,
.faq-answer {
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* =========================
   Botões
========================= */
.btn {
  display: inline-block;
  padding: 15px 30px;
  text-decoration: none;
  border-radius: 50px;
  font-weight: 600;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
  font-size: 1rem;
}

.btn-primary {
  background: linear-gradient(135deg, #ffd700, #ffb300);
  color: #1a237e;
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255,215,0,0.4); }
.btn-large { padding: 20px 40px; font-size: 1.2rem; }

/* =========================
   Header / Navegação
========================= */
.header {
  position: fixed; top: 0; width: 100%;
  background: rgba(26, 35, 126, 0.95);
  backdrop-filter: blur(10px);
  z-index: 1000; transition: all 0.3s ease;
}

.nav-container { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; }

/* — manteremos Playfair aqui, mas vamos sobrescrever embaixo com Serp and Molot + animação */
.nav-logo h2 { color: #ffd700; font-size: 1.5rem; font-family: 'Playfair Display', serif; font-weight: 700; }

.nav-menu { display: flex; gap: 2rem; align-items: center; }

.nav-link {
  color: #fff; text-decoration: none; font-weight: 600; letter-spacing: .02em;
  transition: color 0.3s ease;
}
.nav-link:hover { color: #ffd700; }

.cta-nav {
  background: #ffd700; color: #1a237e !important;
  padding: 10px 20px; border-radius: 25px; font-weight: 700;
}
.cta-nav:hover { background: #ffb300; }

.nav-toggle { display: none; flex-direction: column; cursor: pointer; }
.nav-toggle span { width: 25px; height: 3px; background: #fff; margin: 3px 0; transition: 0.3s; }

/* =========================
   Hero
========================= */
.hero {
  height: 100vh;
  background: url('../img/hero_background.png') center/cover no-repeat;
  position: relative; display: flex; align-items: center; justify-content: center;
  text-align: center; color: #fff;
}

.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(26,35,126,.8), rgba(74,20,140,.6));
}

.hero-content { position: relative; z-index: 2; max-width: 800px; padding: 0 2rem; }

.hero-title {
  font-size: 3.5rem; margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0,0,0,.5);
}

.hero-subtitle {
  font-size: 1.5rem; margin-bottom: 1rem; color: #ffd700; font-weight: 600;
}

.hero-description { font-size: 1.2rem; margin-bottom: 2rem; opacity: .9; }
.hero-cta { font-size: 1.1rem; padding: 18px 35px; }

.hero-scroll { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); text-align: center; color: #fff; opacity: .8; }
.scroll-arrow {
  width: 20px; height: 20px; border-right: 2px solid #ffd700; border-bottom: 2px solid #ffd700;
  transform: rotate(45deg); margin: 10px auto; animation: bounce 2s infinite;
}
@keyframes bounce {
  0%,20%,50%,80%,100% { transform: translateY(0) rotate(45deg); }
  40% { transform: translateY(-10px) rotate(45deg); }
  60% { transform: translateY(-5px) rotate(45deg); }
}

/* =========================
   Sobre
========================= */
.about { padding: 100px 0; background: #fff; }
.about-content { display: grid; grid-template-columns: 2fr 1fr; gap: 4rem; align-items: center; }
.about-description { font-size: 1.1rem; margin-bottom: 1.5rem; text-align: justify; }
.about-image { text-align: center; }
.about-icon { width: 200px; height: 200px; object-fit: contain; }

/* =========================
   Benefícios
========================= */
.benefits { padding: 100px 0; background: #f5f5f5; }
.benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-top: 3rem; }

.benefit-card {
  background: #fff; padding: 2rem; border-radius: 15px; text-align: center;
  box-shadow: 0 5px 15px rgba(0,0,0,.1);
  transition: transform .3s ease, box-shadow .3s ease;
}
.benefit-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,.15); }

.benefit-icon { width: 80px; height: 80px; margin-bottom: 1rem; object-fit: contain; }
.benefit-title { font-size: 1.3rem; margin-bottom: 1rem; color: #1a237e; }
.benefit-description { color: #666; line-height: 1.6; }

/* =========================
   Para Quem
========================= */
.target { padding: 100px 0; background: #fff; }
.target-intro { font-size: 1.2rem; margin-bottom: 2rem; color: #666; }

.target-list { display: grid; gap: 1.5rem; margin-top: 2rem; }
.target-item {
  display: flex; align-items: flex-start; gap: 1rem; padding: 1.5rem;
  background: #f8f9fa; border-radius: 10px; border-left: 4px solid #ffd700;
}
.target-icon { font-size: 1.5rem; min-width: 30px; }
.target-item p { font-size: 1.1rem; color: #555; }

/* =========================
   Depoimentos
========================= */
.testimonials { padding: 100px 0; background: linear-gradient(135deg, #1a237e, #4a148c); }
.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-top: 3rem; }

.testimonial-card {
  background: rgba(255,255,255,.1); padding: 2rem; border-radius: 15px;
  backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.2);
}
.testimonial-quote { font-size: 3rem; color: #ffd700; font-family: 'Playfair Display', serif; line-height: 1; margin-bottom: 1rem; }
.testimonial-text { color: #fff; font-size: 1.1rem; margin-bottom: 1.5rem; font-style: italic; }
.testimonial-author strong { color: #ffd700; display: block; margin-bottom: .5rem; }
.testimonial-author span { color: #ccc; font-size: .9rem; }

/* =========================
   CTA Final
========================= */
.final-cta {
  padding: 100px 0; background: linear-gradient(135deg, #4a148c, #1a237e);
  text-align: center; color: #fff;
}
.cta-title { font-size: 3rem; margin-bottom: 1.5rem; color: #fff; }
.cta-description {
  font-size: 1.2rem; margin-bottom: 2rem; opacity: .9; max-width: 800px; margin-left: auto; margin-right: auto;
}
.cta-details {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem; margin: 2rem 0; max-width: 800px; margin-left: auto; margin-right: auto;
}
.cta-detail { background: rgba(255,255,255,.1); padding: 1rem; border-radius: 10px; backdrop-filter: blur(10px); }
.cta-detail strong { color: #ffd700; }

/* =========================
   FAQ (details/summary)
========================= */
.faq { padding: 80px 0; background: #fff; }
.faq-list { max-width: 900px; margin: 2rem auto 0; }
.faq-item { border: 1px solid #eee; border-radius: 10px; padding: 1rem 1.2rem; margin-bottom: 1rem; }
.faq-question {
  cursor: pointer; font-weight: 600; color: #1a237e; list-style: none; outline: none;
}
.faq-item[open] .faq-question { color: #4a148c; }
.faq-answer { margin-top: .6rem; color: #555; }

/* =========================
   Footer Minimalista
========================= */
.footer {
  background-color: #111;
  padding: 30px 20px;
  text-align: center;
}

.footer-logo {
  /* será sobrescrito para Serp and Molot + animação mais abaixo */
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: #f0c54d;
  margin-bottom: 12px;
}

.footer-social a {
  color: #ccc;
  text-decoration: none;
  margin: 0 12px;
  font-size: 0.95rem;
  transition: color 0.3s ease;
}
.footer-social a:hover { color: #f0c54d; }

.footer-copy {
  color: #777;
  font-size: 0.85rem;
  margin-top: 15px;
}

/* =========================
   Portal Luminoso Etéreo (Sobre)
========================= */
.portal-scene { position: relative; width: 280px; height: 280px; margin: 0 auto; }
.portal-layer {
  position: absolute; inset: 0; border-radius: 50%;
  transform-origin: center; filter: blur(12px); opacity: 0.4;
}
.layer-back {
  background: radial-gradient(circle at 50% 50%,
              rgba(106,0,255,0.75) 0%,
              rgba(74,20,140,0.1) 60%,
              transparent 90%);
  animation: morphShape 10s ease-in-out infinite alternate;
}
.layer-mid {
  background: radial-gradient(circle at center,
              rgba(255,215,0,0.60) 0%,
              rgba(255,179,0,0.08) 50%,
              transparent 85%);
  transform: scale(0.8);
  animation: morphShape 8s ease-in-out infinite alternate-reverse;
  opacity: 0.3;
}
.layer-front {
  background: radial-gradient(circle at center,
              rgba(255,215,0,0.73) 0%,
              rgba(255,215,0,0.12) 40%,
              transparent 80%);
  transform: scale(0.6);
  animation: corePulse 4s ease-in-out infinite;
  opacity: 0.35;
}

.particles { position: absolute; inset: 0; overflow: hidden; }
.particles span {
  position: absolute; width: 3px; height: 3px;
  background: radial-gradient(circle,#ffd700 0%,transparent 70%);
  border-radius: 50%; opacity: 0.5; filter: blur(1px);
  animation: floatUp 7s linear infinite;
}
.particles span:nth-child(1){ left:10%; animation-delay:0s; }
.particles span:nth-child(2){ left:30%; animation-delay:1s; }
.particles span:nth-child(3){ left:50%; animation-delay:2s; }
.particles span:nth-child(4){ left:70%; animation-delay:1.5s; }
.particles span:nth-child(5){ left:90%; animation-delay:3s; }
.particles span:nth-child(6){ left:20%; animation-delay:2.5s; }
.particles span:nth-child(7){ left:40%; animation-delay:4s; }
.particles span:nth-child(8){ left:60%; animation-delay:3.5s; }
.particles span:nth-child(9){ left:80%; animation-delay:5s; }
.particles span:nth-child(10){ left:15%; animation-delay:5.5s; }

/* Keyframes portal */
@keyframes morphShape {
  0% { border-radius: 48% 52% 45% 55% / 55% 50% 52% 48%; transform: scale(1); }
  50%{ border-radius: 60% 40% 58% 42% / 42% 58% 40% 60%; transform: scale(1.05); }
  100%{ border-radius: 50% 50% 48% 52% / 52% 48% 50% 50%; transform: scale(0.97); }
}
@keyframes corePulse {
  0%,100% { transform: scale(0.6); opacity: 0.35; }
  50%     { transform: scale(0.7); opacity: 0.45; }
}
@keyframes floatUp {
  0% { bottom: -10px; opacity: 0; }
  20%{ opacity: .5; }
  100%{ bottom: 100%; opacity: 0; }
}

/* =========================
   Animações gerais
========================= */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
.benefit-card, .testimonial-card, .target-item { animation: fadeInUp .6s ease-out; }

/* =========================
   Responsivo
========================= */
@media (max-width: 768px) {
  .nav-menu {
    position: fixed; top: 70px; left: -100%; width: 100%; height: calc(100vh - 70px);
    background: rgba(26,35,126,.95); flex-direction: column; justify-content: flex-start;
    padding-top: 2rem; transition: left .3s ease;
  }
  .nav-menu.active { left: 0; }
  .nav-toggle { display: flex; }

  .hero-title { font-size: 2.5rem; }
  .hero-subtitle { font-size: 1.2rem; }
  .hero-description { font-size: 1rem; }

  .section-title { font-size: 2rem; }

  .about-content { grid-template-columns: 1fr; text-align: center; }
  .about-icon { width: 150px; height: 150px; }

  .benefits-grid, .testimonials-grid { grid-template-columns: 1fr; }

  .cta-title { font-size: 2rem; }
  .cta-details { grid-template-columns: 1fr; }

  /* portal mais leve no mobile */
  .portal-scene { width: 200px; height: 200px; }
  .particles span { display: none; }
}

/* =========================
   LOGO ENERGIZADO (Opção 1 – Glow Pulsante)
========================= */
@keyframes glowPulse {
  0% {
    text-shadow:
      0 0 6px rgba(255, 215, 0, 0.6),
      0 0 12px rgba(255, 215, 0, 0.4),
      2px 2px 4px rgba(0, 0, 0, 0.5);
  }
  50% {
    text-shadow:
      0 0 12px rgba(255, 215, 0, 0.8),
      0 0 18px rgba(255, 215, 0, 0.6),
      2px 2px 6px rgba(0, 0, 0, 0.6);
  }
  100% {
    text-shadow:
      0 0 6px rgba(255, 215, 0, 0.6),
      0 0 12px rgba(255, 215, 0, 0.4),
      2px 2px 4px rgba(0, 0, 0, 0.5);
  }
}

/* aplica Serp and Molot + glow nos pontos pedidos */
.header .nav-logo h2,
.footer .footer-logo {
  font-family: 'Serp and Molot', sans-serif !important;
  font-weight: normal;
  letter-spacing: 1.5px;
  color: #ffd700;
  animation: glowPulse 2.5s ease-in-out infinite;
}

/* acessibilidade: reduzir movimento */
@media (prefers-reduced-motion: reduce){
  .header .nav-logo h2,
  .footer .footer-logo {
    animation: none !important;
    text-shadow:
      0 0 6px rgba(255, 215, 0, 0.6),
      0 0 12px rgba(255, 215, 0, 0.4),
      2px 2px 4px rgba(0, 0, 0, 0.5);
  }
}





/* === Programação Presencial (estilo cartaz) === */
.schedule-pro { padding: 90px 0; background: #fff; }
.schedule-pro .section-title { margin-bottom: 1.25rem; }

/* Tabs */
.schedule-tabs{
  display:flex; gap:8px; justify-content:center; align-items:center;
  background:#f6f6fb; padding:6px; border-radius:999px; border:1px solid #eee; margin:0 auto 18px;
}
.tab-btn{
  appearance:none; border:0; padding:10px 16px; border-radius:999px; cursor:pointer;
  font-weight:700; color:#1a237e; background:transparent; transition:all .25s ease;
}
.tab-btn.active{
  background: linear-gradient(135deg, #ffd700, #ffb300);
  color:#1a237e; box-shadow:0 6px 18px rgba(255,215,0,.25);
}

.tab-panel{ display:none; }
.tab-panel.show{ display:block; }

/* Card */
.schedule-card{
  background: #fff;
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  border: 1px solid #eee;
}

/* Head estilo “tabela” */
.schedule-head{
  display:grid; grid-template-columns: 160px 1fr;
  background: linear-gradient(135deg, #1a237e, #4a148c);
  color:#fff; font-family:'Playfair Display', serif; font-weight:700;
}
.schedule-head .head-col{ padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.2); }

/* Lista de linhas (mais flexível e responsiva que table) */
.schedule-list{ list-style:none; }
.schedule-list li{
  display:grid; grid-template-columns: 160px 1fr;
  gap:0; padding:12px 16px; border-bottom:1px solid #f0f0f0;
}
.schedule-list li:nth-child(odd){ background:#fafafa; }
.schedule-list .time{ font-weight:700; color:#1a237e; }
.schedule-list .desc{ color:#444; }

/* Barra de informações */
.schedule-info{
  display:grid; grid-template-columns: 1fr 1fr auto; gap:12px;
  margin-top:16px; align-items:center;
  background: linear-gradient(135deg, #1a237e, #4a148c);
  color:#fff; padding:14px 16px; border-radius:12px;
}
.schedule-info .info-item strong{ color:#ffd700; }
.schedule-info .info-qr img{ width:72px; height:72px; object-fit:contain; }

/* Responsivo */
@media (max-width: 860px){
  .schedule-head{ display:none; }
  .schedule-list li{ grid-template-columns: 1fr; }
  .schedule-list .time{ margin-bottom:4px; }
  .schedule-info{ grid-template-columns: 1fr; text-align:center; }
  .schedule-info .info-qr{ justify-self:center; }
}


/* Pulsar dourado */
.pulse-glow {
  animation: pulseGlow 2.5s infinite ease-in-out;
  text-shadow:
      0 0 4px rgba(255,215,0,.7),
      0 0 10px rgba(255,215,0,.5),
      0 0 18px rgba(255,215,0,.4);
}

@keyframes pulseGlow {
  0%,100% {
    text-shadow:
      0 0 4px rgba(255,215,0,.7),
      0 0 10px rgba(255,215,0,.5),
      0 0 18px rgba(255,215,0,.4);
    transform: scale(1);
  }
  50% {
    text-shadow:
      0 0 6px rgba(255,215,0,.9),
      0 0 14px rgba(255,215,0,.7),
      0 0 24px rgba(255,215,0,.6);
    transform: scale(1.04);
  }
}