*, *::before, *::after { box-sizing: border-box; }
    body { font-family: 'Nunito', sans-serif; margin: 0; }

    /* ── TOPBAR ── */
    .topbar {
      background: #2C3E9E;
      overflow: hidden;
      position: relative;
    }
    /* linha de brilho deslizando */
    .topbar::after {
      content: '';
      position: absolute;
      top: 0; left: -100%;
      width: 60%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
      animation: topbarShine 5s linear infinite;
    }
    @keyframes topbarShine {
      0%   { left: -60%; }
      100% { left: 140%; }
    }

    /* Ícones de redes sociais — escala + brilho */
    .social-icon {
      width: 28px; height: 28px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      color: rgba(255,255,255,0.6);
      font-size: 13px;
      transition: color 0.2s, background 0.2s, transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
      position: relative;
      z-index: 1;
    }
    .social-icon:hover {
      color: #FFD43B;
      background: rgba(255,255,255,0.1);
      transform: scale(1.25) translateY(-1px);
    }

    /* Info (endereço / telefone) */
    .topbar-info {
      font-family: 'Nunito', sans-serif;
      font-size: 11.5px;
      color: rgba(255,255,255,0.55);
      display: flex; align-items: center; gap: 6px;
      transition: color 0.2s;
    }
    .topbar-info:hover { color: rgba(255,255,255,0.9); }
    .topbar-info i { color: #FFD43B; font-size: 11px; }

    /* ── NAVBAR ── */
    #mainNav {
      background: #fff;
      border-bottom: 1.5px solid #f0f0f0;
      position: sticky;
      top: 0; z-index: 30;
      transition: box-shadow 0.4s, border-color 0.4s;
    }
    #mainNav.scrolled {
      box-shadow: 0 6px 32px rgba(44,62,158,0.10);
      border-color: transparent;
    }

    .nav-inner {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 20px;
      height: 76px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    /* Logo — leve float */
    .nav-logo img {
      height: 62px;
      width: auto;
      object-fit: contain;
      transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), filter 0.3s;
    }
    .nav-logo:hover img {
      transform: scale(1.06) rotate(-2deg);
    }

    /* ── NAV LINKS ── */
    .nav-links {
      display: flex;
      align-items: center;
      gap: 4px;
      list-style: none;
      margin: 0; padding: 0;
    }

    .nav-link {
      font-family: 'Fredoka', sans-serif;
      font-weight: 600;
      font-size: 16px;
      color: #2C3E9E;
      padding: 8px 18px;
      border-radius: 999px;
      text-decoration: none;
      position: relative;
      overflow: hidden;
      transition: color 0.2s;
    }

    /* fundo que cresce do centro */
    .nav-link::before {
      content: '';
      position: absolute;
      inset: 0;
      background: #3B4FCC12;
      border-radius: 999px;
      transform: scale(0);
      transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
    }
    .nav-link:hover::before,
    .nav-link.active::before { transform: scale(1); }

    /* underline amarelo animado */
    .nav-link::after {
      content: '';
      position: absolute;
      bottom: 6px;
      left: 50%;
      transform: translateX(-50%) scaleX(0);
      width: 60%;
      height: 2.5px;
      background: #FFD43B;
      border-radius: 99px;
      transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
    }
    .nav-link:hover::after,
    .nav-link.active::after { transform: translateX(-50%) scaleX(1); }

    .nav-link:hover { color: #3B4FCC; }

    /* ── BOTÃO MATRICULE-SE ── */
    .btn-matricula {
      font-family: 'Fredoka', sans-serif;
      font-weight: 700;
      font-size: 15px;
      color: #2C3E9E;
      background: #FFD43B;
      border: none;
      border-radius: 999px;
      padding: 10px 28px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s;
      box-shadow: 0 4px 14px rgba(255,212,59,0.35);
    }

    /* ripple de brilho interno */
    .btn-matricula::before {
      content: '';
      position: absolute;
      top: -50%; left: -75%;
      width: 50%; height: 200%;
      background: rgba(255,255,255,0.35);
      transform: skewX(-20deg);
      transition: left 0.5s ease;
    }
    .btn-matricula:hover::before { left: 130%; }

    /* pulso externo */
    .btn-matricula::after {
      content: '';
      position: absolute;
      inset: -2px;
      border-radius: 999px;
      border: 2px solid rgba(255,212,59,0.5);
      animation: ringPulse 2.2s ease-out infinite;
    }
    @keyframes ringPulse {
      0%   { transform: scale(1);   opacity: 0.7; }
      70%  { transform: scale(1.12); opacity: 0; }
      100% { transform: scale(1.12); opacity: 0; }
    }

    .btn-matricula:hover {
      transform: translateY(-3px) scale(1.04);
      box-shadow: 0 10px 28px rgba(255,212,59,0.45);
    }
    .btn-matricula:active {
      transform: scale(0.97);
      box-shadow: 0 2px 8px rgba(255,212,59,0.3);
    }

    /* ── HAMBURGUER ── */
    .hamburger {
      width: 40px; height: 40px;
      border-radius: 12px;
      background: transparent;
      border: none;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 5px;
      transition: background 0.2s;
      padding: 8px;
    }
    .hamburger:hover { background: #3B4FCC12; }

    .hamburger span {
      display: block;
      height: 2.5px;
      background: #2C3E9E;
      border-radius: 99px;
      transition: width 0.3s ease, transform 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.3s;
    }
    .hamburger span:nth-child(1) { width: 22px; }
    .hamburger span:nth-child(2) { width: 16px; }
    .hamburger span:nth-child(3) { width: 22px; }

    /* Anima para X quando aberto */
    .hamburger.open span:nth-child(1) {
      transform: translateY(7.5px) rotate(45deg);
      width: 22px;
    }
    .hamburger.open span:nth-child(2) {
      opacity: 0; transform: scaleX(0);
    }
    .hamburger.open span:nth-child(3) {
      transform: translateY(-7.5px) rotate(-45deg);
      width: 22px;
    }

    /* ── DRAWER MOBILE ── */
    #drawerOverlay {
      position: fixed; inset: 0;
      background: rgba(20,30,90,0.45);
      backdrop-filter: blur(3px);
      z-index: 998;
      opacity: 0; pointer-events: none;
      transition: opacity 0.35s;
    }
    #drawerOverlay.active { opacity: 1; pointer-events: all; }

    #mobileDrawer {
      position: fixed;
      top: 0; right: -100%;
      width: min(320px, 88vw);
      height: 100dvh;
      background: linear-gradient(155deg, #2C3E9E 0%, #3B4FCC 55%, #2C3E9E 100%);
      z-index: 999;
      display: flex; flex-direction: column;
      padding: 28px 22px 32px;
      overflow-y: auto;
      transition: right 0.4s cubic-bezier(0.4,0,0.2,1);
    }
    #mobileDrawer.open { right: 0; }

    /* Links mobile com entrada em cascata */
    .mob-link {
      font-family: 'Fredoka', sans-serif;
      font-weight: 600;
      font-size: 18px;
      color: rgba(255,255,255,0.8);
      padding: 13px 16px;
      border-radius: 14px;
      text-decoration: none;
      display: flex; align-items: center; gap: 14px;
      position: relative;
      overflow: hidden;
      transition: color 0.2s, background 0.2s, transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
      opacity: 0;
      transform: translateX(30px);
    }
    #mobileDrawer.open .mob-link {
      animation: slideInLink 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards;
    }
    #mobileDrawer.open .mob-link:nth-child(1) { animation-delay: 0.08s; }
    #mobileDrawer.open .mob-link:nth-child(2) { animation-delay: 0.14s; }
    #mobileDrawer.open .mob-link:nth-child(3) { animation-delay: 0.20s; }
    #mobileDrawer.open .mob-link:nth-child(4) { animation-delay: 0.26s; }

    @keyframes slideInLink {
      to { opacity: 1; transform: translateX(0); }
    }

    .mob-link::before {
      content: '';
      position: absolute; inset: 0;
      background: rgba(255,255,255,0.1);
      border-radius: 14px;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.25s ease;
    }
    .mob-link:hover::before { transform: scaleX(1); }
    .mob-link:hover { color: #FFD43B; transform: translateX(4px); }

    .mob-link i {
      width: 20px; text-align: center;
      font-size: 14px; color: #FFD43B;
      flex-shrink: 0;
    }

    /* Linha divisória animada */
    .drawer-divider {
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
      margin: 20px 0;
      opacity: 0;
      transition: opacity 0.4s 0.3s;
    }
    #mobileDrawer.open .drawer-divider { opacity: 1; }

    /* Botões de ação mobile */
    .mob-action {
      font-family: 'Fredoka', sans-serif;
      font-weight: 700;
      font-size: 16px;
      border-radius: 16px;
      padding: 14px;
      text-align: center;
      text-decoration: none;
      display: block;
      transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.25s, filter 0.2s;
      opacity: 0;
    }
    #mobileDrawer.open .mob-action { animation: slideInLink 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards; }
    #mobileDrawer.open .mob-action:nth-child(1) { animation-delay: 0.32s; }

    .mob-action:hover {
      transform: translateY(-3px) scale(1.02);
      filter: brightness(1.08);
    }
    .mob-action:active { transform: scale(0.97); }

    /* Ícones sociais mobile */
    .mob-social {
      width: 42px; height: 42px;
      border-radius: 50%;
      background: rgba(255,255,255,0.1);
      display: flex; align-items: center; justify-content: center;
      color: rgba(255,255,255,0.7);
      font-size: 15px;
      transition: background 0.2s, color 0.2s, transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
      opacity: 0;
    }
    #mobileDrawer.open .mob-social { animation: slideInLink 0.4s cubic-bezier(0.34,1.56,0.64,1) forwards; }
    #mobileDrawer.open .mob-social:nth-child(1) { animation-delay: 0.38s; }
    #mobileDrawer.open .mob-social:nth-child(2) { animation-delay: 0.42s; }
    #mobileDrawer.open .mob-social:nth-child(3) { animation-delay: 0.46s; }
    #mobileDrawer.open .mob-social:nth-child(4) { animation-delay: 0.50s; }

    .mob-social:hover {
      background: rgba(255,255,255,0.2);
      color: #FFD43B;
      transform: scale(1.2) translateY(-2px);
    }

    /* Esconder no mobile */
    @media (max-width: 1023px) {
      .nav-links, .btn-matricula-wrap { display: none !important; }
    }
    @media (min-width: 1024px) {
      .hamburger { display: none !important; }
    }


/* BANNER */
#bannerSection {
  width: 100%;
  overflow: hidden;
  line-height: 0;
}

#bannerTrack {
  display: flex;
}

.banner-slide {
  min-width: 100%;
  flex-shrink: 0;
}

.banner-slide img {
  width: 100%;
  height: clamp(180px, 55vw, 900px);
  object-fit: cover;
  object-position: center;
  display: block;
}


/* SOBRE */
#sobre {
  background: #2C3E9E;
  padding: clamp(48px, 8vw, 96px) 20px;
}

#sobreInner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
  flex-wrap: wrap;
}

#sobreTexto {
  flex: 1 1 320px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#sobreTag {
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #FFD43B;
}

#sobreTitulo {
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
  margin: 0;
}

#sobreDesc {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(14px, 1.5vw, 16px);
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.75;
  margin: 0;
}

#sobreBtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: #FFD43B;
  color: #2C3E9E;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 15px;
  border-radius: 999px;
  text-decoration: none;
  width: fit-content;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s;
  box-shadow: 0 4px 16px rgba(255, 212, 59, 0.3);
}

#sobreBtn:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 10px 28px rgba(255, 212, 59, 0.45);
}

/* Cards de destaque */
#sobreDestaques {
  flex: 1 1 260px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.sobre-card {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: background 0.25s, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sobre-card:hover {
  background: rgba(255, 255, 255, 0.13);
  transform: translateY(-4px);
}

.sobre-card strong {
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  color: #FFD43B;
  line-height: 1;
}

.sobre-card span {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

/* SEGMENTOS */
#segmentos {
  background: #ffffff;
  padding: clamp(48px, 8vw, 96px) 20px;
}

#segmentosInner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

#segmentosHeader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.seg-tag {
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #3B4FCC;
}

#segmentosTitulo {
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(26px, 3.5vw, 38px);
  font-weight: 700;
  color: #2C3E9E;
  margin: 0;
}

/* Grid principal */
#segmentosGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

@media (max-width: 768px) {
  #segmentosGrid {
    grid-template-columns: 1fr;
  }
}

/* Card principal */
.seg-card {
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid #f0f0f0;
  box-shadow: 0 4px 20px rgba(44, 62, 158, 0.07);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
  background: #fff;
}

.seg-principal {
  border: 2px solid #3B4FCC;
  box-shadow: 0 8px 32px rgba(44, 62, 158, 0.15);
}

.seg-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(44, 62, 158, 0.13);
}

.seg-img-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.seg-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.4s ease;
}

.seg-card:hover .seg-img-wrap img {
  transform: scale(1.05);
}

.seg-overlay {
  position: absolute;
  inset: 0;
  background: rgba(44, 62, 158, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.seg-card:hover .seg-overlay {
  opacity: 1;
}

.seg-btn {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #2C3E9E;
  background: #FFD43B;
  padding: 10px 26px;
  border-radius: 999px;
  text-decoration: none;
  transform: translateY(10px);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.seg-card:hover .seg-btn {
  transform: translateY(0);
}

/* Badge "principal" */
.seg-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: #FFD43B;
  color: #2C3E9E;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
  padding: 4px 14px;
  border-radius: 999px;
  text-transform: uppercase;
}

.seg-info {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.seg-idade {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: #3B4FCC;
  padding: 3px 12px;
  border-radius: 999px;
  width: fit-content;
}

.seg-info h3 {
  font-family: 'Fredoka', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #2C3E9E;
  margin: 0;
}

.seg-info p {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  color: #666;
  line-height: 1.65;
  margin: 0;
}

/* Coluna de extras */
#segExtras {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#segExtrasLabel {
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #aaa;
  margin: 0;
}

#segExtrasPills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.seg-extra-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 16px;
  border-radius: 16px;
  border: 1.5px solid #eef0fb;
  background: #f8f9ff;
  transition: background 0.25s, border-color 0.25s, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: default;
}

.seg-extra-card:hover {
  background: #3B4FCC;
  border-color: #3B4FCC;
  transform: translateY(-3px);
}

.seg-extra-card i {
  font-size: 16px;
  color: #3B4FCC;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  transition: color 0.25s;
}

.seg-extra-card:hover i {
  color: #FFD43B;
}

.seg-extra-card span {
  font-family: 'Fredoka', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #2C3E9E;
  transition: color 0.25s;
}

.seg-extra-card:hover span {
  color: #fff;
}

/* SEGMENTOS */
#segmentos {
  background: #ffffff;
  padding: clamp(48px, 8vw, 96px) 20px;
}

#segmentosInner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

#segmentosHeader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.seg-tag {
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #3B4FCC;
}

#segmentosTitulo {
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(26px, 3.5vw, 38px);
  font-weight: 700;
  color: #2C3E9E;
  margin: 0;
}

/* Grid principal */
#segmentosGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

@media (max-width: 768px) {
  #segmentosGrid {
    grid-template-columns: 1fr;
  }
}

/* Card principal */
.seg-card {
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid #f0f0f0;
  box-shadow: 0 4px 20px rgba(44, 62, 158, 0.07);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
  background: #fff;
}

.seg-principal {
  border: 2px solid #3B4FCC;
  box-shadow: 0 8px 32px rgba(44, 62, 158, 0.15);
}

.seg-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(44, 62, 158, 0.13);
}

.seg-img-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.seg-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.4s ease;
}

.seg-card:hover .seg-img-wrap img {
  transform: scale(1.05);
}

.seg-overlay {
  position: absolute;
  inset: 0;
  background: rgba(44, 62, 158, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.seg-card:hover .seg-overlay {
  opacity: 1;
}

.seg-btn {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #2C3E9E;
  background: #FFD43B;
  padding: 10px 26px;
  border-radius: 999px;
  text-decoration: none;
  transform: translateY(10px);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.seg-card:hover .seg-btn {
  transform: translateY(0);
}

/* Badge "principal" */
.seg-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: #FFD43B;
  color: #2C3E9E;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
  padding: 4px 14px;
  border-radius: 999px;
  text-transform: uppercase;
}

.seg-info {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.seg-idade {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: #3B4FCC;
  padding: 3px 12px;
  border-radius: 999px;
  width: fit-content;
}

.seg-info h3 {
  font-family: 'Fredoka', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #2C3E9E;
  margin: 0;
}

.seg-info p {
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  color: #666;
  line-height: 1.65;
  margin: 0;
}

/* Coluna de extras */
#segExtras {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#segExtrasLabel {
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #aaa;
  margin: 0;
}

#segExtrasPills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.seg-extra-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 16px;
  border-radius: 16px;
  border: 1.5px solid #eef0fb;
  background: #f8f9ff;
  transition: background 0.25s, border-color 0.25s, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: default;
}

.seg-extra-card:hover {
  background: #3B4FCC;
  border-color: #3B4FCC;
  transform: translateY(-3px);
}

.seg-extra-card i {
  font-size: 16px;
  color: #3B4FCC;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  transition: color 0.25s;
}

.seg-extra-card:hover i {
  color: #FFD43B;
}

.seg-extra-card span {
  font-family: 'Fredoka', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #2C3E9E;
  transition: color 0.25s;
}

.seg-extra-card:hover span {
  color: #fff;
}


/* QUIZ */
#quizSection {
  background: #f4f6ff;
  padding: clamp(48px, 8vw, 96px) 20px;
}

#quizInner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

@media (max-width: 768px) {
  #quizInner { grid-template-columns: 1fr; }
}

/* Texto lateral */
#quizTexto {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#quizTitulo {
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(28px, 3.5vw, 40px);
  font-weight: 700;
  color: #2C3E9E;
  margin: 0;
  line-height: 1.2;
}

#quizDesc {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(14px, 1.5vw, 16px);
  color: #555;
  line-height: 1.75;
  margin: 0;
}

/* Card */
#quizCard {
  background: #fff;
  border-radius: 24px;
  padding: 32px 28px;
  box-shadow: 0 8px 40px rgba(44, 62, 158, 0.10);
  border: 1.5px solid #eef0fb;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Barra de progresso */
#quizProgress {
  width: 100%;
  height: 6px;
  background: #eef0fb;
  border-radius: 99px;
  overflow: hidden;
}

#quizProgressBar {
  height: 100%;
  background: linear-gradient(90deg, #3B4FCC, #FFD43B);
  border-radius: 99px;
  width: 10%;
  transition: width 0.4s ease;
}

/* Pergunta */
#quiz-qs {
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 600;
  color: #2C3E9E;
  margin: 0;
  line-height: 1.4;
  min-height: 56px;
}

/* Opções */
#quiz-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#quiz-options button {
  font-family: 'Nunito', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #2C3E9E;
  background: #f4f6ff;
  border: 1.5px solid #dde1f7;
  border-radius: 12px;
  padding: 12px 16px;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#quiz-options button:hover:not(:disabled) {
  background: #eef0fb;
  border-color: #3B4FCC;
  transform: translateX(4px);
}

#quiz-options button.correta {
  background: #e6f9f0;
  border-color: #34c97a;
  color: #1a7a4a;
}

#quiz-options button.errada {
  background: #fdecea;
  border-color: #e05252;
  color: #b83030;
}

/* Feedback */
#quiz-feedback {
  font-family: 'Fredoka', sans-serif;
  font-size: 16px;
  font-weight: 600;
  min-height: 24px;
  color: #2C3E9E;
}

/* Botão próxima */
#quiz-next {
  display: none;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #2C3E9E;
  background: #FFD43B;
  border: none;
  border-radius: 999px;
  padding: 11px 28px;
  cursor: pointer;
  width: fit-content;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s;
  box-shadow: 0 4px 14px rgba(255, 212, 59, 0.35);
}

#quiz-next:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 10px 24px rgba(255, 212, 59, 0.45);
}

/* Resultado final */
#quiz-result {
  font-family: 'Fredoka', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #2C3E9E;
  text-align: center;
  min-height: 32px;
}

/* PARCEIROS */
#parceiros {
  background: #FBC23B;
  padding: clamp(48px, 8vw, 80px) 20px;
}

#parceirosInner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

#parceirosHeader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

#parceirosTitulo {
  font-family: 'Fredoka', sans-serif;
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  color: #2C3E9E;
  margin: 0;
}

#parceirosGrid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  align-items: center;
}

@media (max-width: 900px) {
  #parceirosGrid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 500px) {
  #parceirosGrid { grid-template-columns: repeat(2, 1fr); }
}

.parceiro-card {
  background: #fff;
  border-radius: 16px;
  padding: 20px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s;
  box-shadow: 0 2px 10px rgba(44, 62, 158, 0.08);
}

.parceiro-card:hover {
  transform: translateY(-5px) scale(1.04);
  box-shadow: 0 12px 28px rgba(44, 62, 158, 0.15);
}

.parceiro-card img {
  width: 100%;
  max-height: 60px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter 0.3s, opacity 0.3s;
}

.parceiro-card:hover img {
  filter: grayscale(0);
  opacity: 1;
}


/* FOOTER */
#footer {
  background: #243168;
  padding: 40px 20px;
}

#footerInner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

#footerLogo {
  height: 64px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.9;
  transition: opacity 0.2s;
}

#footerLogo:hover { opacity: 1; }

#footerLinks {
  display: flex;
  align-items: center;
  gap: 12px;
}

#footerLinks a {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 0.2s;
}

#footerLinks a:hover { color: #FFD43B; }

#footerDot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
}

#footerCopy {
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.3);
  margin: 0;
}



/*onda para baixo azul claro*/
.shapedividers_com-5683{
overflow:hidden;
position:relative;
}
.shapedividers_com-5683::before{ 
content:'';
font-family:'shape divider from ShapeDividers.com';
position: absolute;
z-index: 3;
pointer-events: none;
background-repeat: no-repeat;
bottom: -0.1vw;
left: -0.1vw;
right: -0.1vw;
top: -0.1vw; 
background-size: 100% 90px;
background-position: 50% 0%;  background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.28 2.17" preserveAspectRatio="none"><path d="M0 1c3.17.8 7.29-.38 10.04-.55 2.75-.17 9.25 1.47 12.67 1.3 3.43-.17 4.65-.84 7.05-.87 2.4-.02 5.52.88 5.52.88V0H0z" fill="%235372ff"/></svg>'); 
}

@media (min-width:2100px){
.shapedividers_com-5683::before{
background-size: 100% calc(2vw + 90px);
}
}
 

/*onda para cima azul claro*/


.shapedividers_com-6556{
overflow:hidden;
position:relative;
}
.shapedividers_com-6556::before{ 
content:'';
font-family:'shape divider from ShapeDividers.com';
position: absolute;
z-index: 3;
pointer-events: none;
background-repeat: no-repeat;
bottom: -0.1vw;
left: -0.1vw;
right: -0.1vw;
top: -0.1vw; 
background-size: 100% 90px;
background-position: 50% 100%;  background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.28 2.17" preserveAspectRatio="none"><path d="M35.28 1.16c-3.17-.8-7.3.4-10.04.56-2.76.17-9.25-1.47-12.68-1.3-3.42.16-4.64.84-7.04.86C3.12 1.31 0 .4 0 .4v1.77h35.28z" fill="%235372ff"/></svg>'); 
}

@media (min-width:2100px){
.shapedividers_com-6556::before{
background-size: 100% calc(2vw + 90px);
}
}
 

/*onda pra cima azul escuro*/

.shapedividers_com-3027{
overflow:hidden;
position:relative;
}
.shapedividers_com-3027::before{ 
content:'';
font-family:'shape divider from ShapeDividers.com';
position: absolute;
z-index: 3;
pointer-events: none;
background-repeat: no-repeat;
bottom: -0.1vw;
left: -0.1vw;
right: -0.1vw;
top: -0.1vw; 
background-size: 100% 90px;
background-position: 50% 0%;  background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.28 2.17" preserveAspectRatio="none"><path d="M0 1c3.17.8 7.29-.38 10.04-.55 2.75-.17 9.25 1.47 12.67 1.3 3.43-.17 4.65-.84 7.05-.87 2.4-.02 5.52.88 5.52.88V0H0z" fill="%232c3e9e"/></svg>'); 
}

@media (min-width:2100px){
.shapedividers_com-3027::before{
background-size: 100% calc(2vw + 90px);
}
}
 

/* ════════════════════════════════════════
   TRILHA ATÉ AS ESTRELAS — animations
════════════════════════════════════════ */

/* Fundo estrelado gerado via radial-gradient */
.stars-bg {
  background-image:
    radial-gradient(1.5px 1.5px at 10%  15%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1px   1px   at 25%  60%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(2px   2px   at 38%  25%, rgba(255,212,59,0.6)  0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 52%  80%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px   1px   at 65%  10%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(2px   2px   at 75%  45%, rgba(255,212,59,0.5)  0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 85%  70%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1px   1px   at 92%  30%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px   1px   at 5%   85%, rgba(255,212,59,0.4)  0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 48%  48%, rgba(255,255,255,0.3) 0%, transparent 100%),
    radial-gradient(1px   1px   at 18%  40%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(2px   2px   at 70%  88%, rgba(255,212,59,0.3)  0%, transparent 100%);
  animation: starsFloat 12s ease-in-out infinite alternate;
}

@keyframes starsFloat {
  from { transform: translateY(0); }
  to   { transform: translateY(-10px); }
}

/* Linha da trilha com gradiente animado */
.trail-line {
  background: linear-gradient(
    to bottom,
    #FFD43B 0%,
    #3B4FCC 30%,
    #FFD43B 60%,
    #3B4FCC 80%,
    #FFD43B 100%
  );
  background-size: 100% 200%;
  animation: trailFlow 4s linear infinite;
  opacity: 0.4;
}

@keyframes trailFlow {
  from { background-position: 0 0; }
  to   { background-position: 0 100%; }
}

/* Conector pulsante entre steps */
.trail-pulse {
  animation: connectorPulse 2s ease-in-out infinite;
}

@keyframes connectorPulse {
  0%, 100% { opacity: 0.4; transform: scaleX(1); }
  50%       { opacity: 1;   transform: scaleX(1.8); }
}

/* Foguete do destino final */
.rocket-float {
  animation: rocketFloat 2.5s ease-in-out infinite;
}

@keyframes rocketFloat {
  0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 0 50px rgba(255,212,59,0.8); }
  50%       { transform: translateY(-10px) scale(1.04); box-shadow: 0 0 80px rgba(255,212,59,1); }
}

/* Brilho de chegada */
.arrival-glow {
  animation: glowPulse 3s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50%       { opacity: 0.8; transform: scale(1.1); }
}

/* Estrelas piscando ao redor do destino */
.star-twinkle {
  animation: starTwinkle 1.8s ease-in-out infinite alternate;
}

@keyframes starTwinkle {
  from { opacity: 0.2; transform: scale(0.7); }
  to   { opacity: 1;   transform: scale(1.3); }
}