/* Xplore Academy - Página específica */

/* Remove underline de todos os botões e links do Xplore Academy */
.page-xplore-academy .btn-primary-xplore,
.page-xplore-academy .btn-secondary-xplore,
.page-xplore-academy .btn-curso-cta,
.page-xplore-academy .btn-highlight-cta,
.page-xplore-academy .hero-cta-xplore a,
.page-xplore-academy .card-xplore a {
  text-decoration: none !important;
}

.page-xplore-academy .btn-primary-xplore:hover,
.page-xplore-academy .btn-secondary-xplore:hover,
.page-xplore-academy .btn-curso-cta:hover,
.page-xplore-academy .btn-highlight-cta:hover,
.page-xplore-academy .hero-cta-xplore a:hover,
.page-xplore-academy .card-xplore a:hover {
  text-decoration: none !important;
}

/* Hero Section */
.page-xplore-academy .hero-xplore {
  background: var(--background-page);
  color: var(--text-primary);
  padding: 40px 20px;
  text-align: center;
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-xplore-academy .hero-content-xplore {
  max-width: 1000px;
  margin: 0 auto;
}

.page-xplore-academy .hero-title-xplore {
  font-size: 3.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.page-xplore-academy .hero-subtitle-xplore {
  color: var(--text-link-hover);
  display: block;
  margin-top: 0.5rem;
}

.page-xplore-academy .hero-description-xplore {
  font-size: 1.2rem;
  margin: 2rem 0;
  line-height: 1.6;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.page-xplore-academy .hero-cta-xplore {
  margin-top: 2rem;
}

.page-xplore-academy .btn-primary-xplore {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: 1.05rem;
  text-decoration: none !important;
  transition: all 0.2s ease;
  border: none;
  position: relative;
  overflow: hidden;
  margin: 0 10px 10px 0;
  /* FB2: standardized on the sitewide primary button (solid cyan, dark
     text, was cyan fill with white text). */
  background: var(--primary-cyan);
  color: var(--neutral-black);
}

.page-xplore-academy .btn-primary-xplore:hover {
  transform: translateY(-1px);
  background: var(--academy-btn-hover-bg);
  text-decoration: none !important;
  color: var(--neutral-black);
}

.page-xplore-academy .btn-secondary-xplore {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: 1.05rem;
  text-decoration: none !important;
  transition: all 0.2s ease;
  border: 1px solid var(--action-primary);
  position: relative;
  overflow: hidden;
  margin: 0 10px 10px 0;
  background: transparent;
  color: var(--action-primary);
}

.page-xplore-academy .btn-secondary-xplore:hover {
  background: var(--action-primary);
  color: var(--pure-white);
  transform: translateY(-1px);
  text-decoration: none !important;
}

.page-xplore-academy .section-xplore {
  padding-top: 80px;
  padding-bottom: 90px;
  position: relative;
  z-index: 1;
  border-top: none !important; /* garante que não haja linha divisória */
}

.page-xplore-academy .section-dark-xplore {
  background: var(--background-elevated);
  color: var(--text-primary);
}

.page-xplore-academy .section-darker-xplore {
  background: var(--background-surface);
  color: var(--text-primary);
}

/* Value Proposition Section */
.page-xplore-academy .section-value-proposition {
  background: var(--background-page);
  color: var(--text-primary);
  padding-top: 80px;
  padding-bottom: 80px;
  /* Ancora e recorta a rede viva: nada se move atras das secoes seguintes. */
  position: relative;
  overflow: hidden;
}

/* A rede bibliometrica do hero. Todo o comedimento vive na pintura (alphas
   baixos, fade antes do rodape da secao); aqui ela so ganha lugar: o hero
   inteiro, atras do conteudo, intocavel. */
.page-xplore-academy .academy-net {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.page-xplore-academy .section-value-proposition .container-xplore {
  position: relative;
}

.page-xplore-academy .value-content {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
  padding: 0 20px;
}

.page-xplore-academy .value-title {
  font-size: clamp(3rem, 5vw, 4.5rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 1.5rem;
  /* Flat (no gradients): --academy-heading-gradient is already a flat
     color (token-layer flattening); this just drops the now-vestigial
     clip trick in favor of a plain color. AA verified >= 4.5:1 against
     --academy-hero-bg in both themes (7.06:1 dark, 4.91:1 light). */
  color: var(--action-primary);
  text-shadow: 0 4px 8px var(--tint-cyan-30);
  letter-spacing: -0.02em;
}

.page-xplore-academy .value-subtitle {
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  line-height: 1.5;
  color: var(--text-secondary);
  margin-bottom: 4rem;
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.9;
}

.page-xplore-academy .value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.page-xplore-academy a.value-card {
  text-decoration: none;
  color: inherit;
  display: block;
  cursor: pointer;
}

.page-xplore-academy .value-card {
  background: var(--surface-tint-4);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  padding: 2rem 1.5rem;
  text-align: center;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.6s ease forwards;
}

.page-xplore-academy .value-card:nth-child(1) { animation-delay: 0.1s; }
.page-xplore-academy .value-card:nth-child(2) { animation-delay: 0.2s; }
.page-xplore-academy .value-card:nth-child(3) { animation-delay: 0.3s; }
.page-xplore-academy .value-card:nth-child(4) { animation-delay: 0.4s; }

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

.page-xplore-academy .value-card:hover {
  background: var(--background-interactive);
  border-color: var(--tint-cyan-30);
  transform: translateY(-5px);
  box-shadow: 0 10px 40px var(--tint-cyan-10);
}

.page-xplore-academy .value-icon {
  margin-bottom: 1.5rem;
  text-align: center;
}

.page-xplore-academy .value-icon .fas,
.page-xplore-academy .value-icon .fa,
.page-xplore-academy .value-icon .fa-icon-svg {
  font-size: 2.5rem;
  color: var(--text-link);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  background: var(--tint-cyan-10);
  border-radius: 20px;
  border: 2px solid var(--tint-cyan-20);
  transition: all 0.3s ease;
  width: 80px;
  height: 80px;
  backdrop-filter: blur(5px);
}

.page-xplore-academy .value-card:hover .value-icon .fas,
.page-xplore-academy .value-card:hover .value-icon .fa,
.page-xplore-academy .value-card:hover .value-icon .fa-icon-svg {
  background: var(--tint-cyan-20);
  border-color: var(--tint-cyan-40);
  transform: scale(1.05);
}

.page-xplore-academy .icon-emoji {
  font-size: 3.5rem;
  line-height: 1;
  display: inline-block;
  padding: 1rem;
  background: var(--tint-cyan-10);
  border-radius: 20px;
  border: 2px solid var(--tint-cyan-20);
  transition: all 0.3s ease;
  text-shadow: 0 2px 4px var(--surface-tint-30-c);
  position: relative;
  margin: 0 auto;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(5px);
}

.page-xplore-academy .icon-emoji:hover {
  background: var(--tint-cyan-20);
  border-color: var(--tint-cyan-40);
  transform: scale(1.05);
  box-shadow: 0 4px 15px var(--tint-cyan-20);
}

.page-xplore-academy .value-card-title {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 1rem;
  line-height: 1.3;
}

.page-xplore-academy .value-card-text {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.page-xplore-academy .value-cta {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border-default);
}

.page-xplore-academy .value-cta-text {
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
}

.page-xplore-academy .value-cta-text strong {
  color: var(--academy-text-accent-green);
  font-weight: 600;
}

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

.page-xplore-academy .section-title-xplore {
  font-size: 2.8rem;
  text-align: center;
  padding-top: 3rem;
  margin-bottom: 5rem;
  font-weight: bold;
  position: relative;
  z-index: 1;
}

.page-xplore-academy .grid-xplore {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
  align-items: stretch;
}

.page-xplore-academy #planos .benefits-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.page-xplore-academy #planos .benefit-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 0.55rem;
  transform: none;
}

.page-xplore-academy #planos .benefit-icon {
  color: var(--text-link);
  font-size: 0.75rem;
  min-width: 24px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tint-cyan-10);
  border-radius: 50%;
  border: 1px solid var(--tint-cyan-20);
  flex-shrink: 0;
}

.page-xplore-academy #planos .benefit-item:hover {
  background: transparent;
  transform: none;
}

.page-xplore-academy #planos .benefit-text {
  display: inline;
  padding-left: 0;
}

.page-xplore-academy #planos .alternative-suggestion {
  background: transparent;
  border-left: 0;
  padding: 0;
}

.page-xplore-academy #planos .urgency-text {
  animation: none;
  letter-spacing: 0;
  font-weight: 500;
}

@media (min-width: 992px) {
  .page-xplore-academy #planos .container-xplore {
    max-width: 1380px;
  }

  .page-xplore-academy #planos .grid-xplore {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(5, auto);
    gap: 0 2rem;
  }

  .page-xplore-academy #planos .card-xplore {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 5;
    align-content: start;
    row-gap: 0;
  }

  .page-xplore-academy #planos .card-xplore > .card-title-xplore {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .page-xplore-academy #planos .card-xplore > .card-description-xplore {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
  }

  .page-xplore-academy #planos .card-xplore > .pricing-container {
    margin: 0.75rem 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .page-xplore-academy #planos .card-xplore > .benefits-section {
    margin: 1rem 0;
  }

  .page-xplore-academy #planos .card-xplore > .cta-container,
  .page-xplore-academy #planos .card-xplore > .cta-container-featured {
    margin-top: 0;
    padding-top: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
}

.page-xplore-academy .card-xplore {
  background: var(--surface-tint-4);
  padding: 1.5rem;
  border-radius: 8px;
  text-align: center;
  transition: all 0.2s ease;
  border: 1px solid var(--border-default);
  position: relative;
  z-index: 1; /* Reduzido para evitar conflitos */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
  isolation: isolate; /* Cria contexto de empilhamento local */
}

.page-xplore-academy .card-xplore:hover {
  transform: translateY(-2px);
  border-color: var(--tint-cyan-20);
}

.page-xplore-academy .card-title-xplore {
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
  font-weight: 600;
}

.page-xplore-academy .card-description-xplore {
  line-height: 1.6;
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

.page-xplore-academy .price-xplore {
  font-size: 1.8rem;
  color: var(--text-link);
  font-weight: 600;
  margin: 0.75rem 0;
}

/* Card em destaque */
.page-xplore-academy .card-featured {
  border: 1px solid var(--action-primary) !important;
  background: var(--tint-cyan-10) !important;
  position: relative;
}

.page-xplore-academy .card-featured:hover {
  transform: translateY(-2px);
  border-color: var(--action-primary);
}

.page-xplore-academy .featured-badge {
  position: absolute;
  top: -10px;
  right: 16px;
  /* Flat (no gradients): neither original stop cleared 4.5:1 with this
     badge's white text (2.53:1 / 4.23:1). --academy-badge-cyan-fill
     preserves dark exactly (2.53:1, pre-existing gap, "preserve dark
     exactly" per the --trick-hint-bg precedent) and fixes light
     (5.27:1). */
  background: var(--text-link);
  color: var(--pure-white);
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  z-index: 10;
  white-space: nowrap;
  box-shadow: 0 4px 12px var(--tint-cyan-40);
  border: 2px solid var(--surface-tint-20-c);
  text-shadow: 0 1px 2px var(--surface-tint-30-c);
  transition: all 0.3s ease;
}

.page-xplore-academy .featured-badge:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px var(--tint-cyan-50);
}

.page-xplore-academy .badge-icon {
  margin-right: 6px;
  font-size: 0.9rem;
  text-shadow: 0 1px 2px var(--surface-tint-40-c);
}

.page-xplore-academy .savings-badge {
  position: absolute;
  top: -10px;
  left: 16px;
  /* Flat (no gradients): first stop kept; AA verified >= 4.5:1 with the
     navy text both themes (13.35:1). */
  background: var(--primary-green);
  color: var(--primary-blue);
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  z-index: 9;
  white-space: nowrap;
  box-shadow: 0 4px 12px var(--tint-green-40);
  border: 2px solid var(--surface-tint-20-c);
  text-shadow: 0 1px 2px var(--surface-tint-20-b);
  transition: all 0.3s ease;
}

.page-xplore-academy .savings-badge:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px var(--tint-green-50);
}

.page-xplore-academy .plan-type-badge {
  position: absolute;
  top: -8px;
  right: 16px;
  background: var(--surface-tint-20-c);
  color: var(--pure-white);
  padding: 6px 14px;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 500;
  z-index: 8;
  border: 1px solid var(--academy-legacy-indicator-bg);
  backdrop-filter: blur(5px);
  text-shadow: 0 1px 2px var(--surface-tint-30-c);
  transition: all 0.3s ease;
}

.page-xplore-academy .plan-type-badge:hover {
  background: var(--surface-tint-20);
  border-color: var(--academy-legacy-plan-badge-border-hover);
  transform: scale(1.05);
}

/* Removido - animação desnecessária para design minimalista */

/* Pricing Containers */
.page-xplore-academy .pricing-container {
  margin: 0.75rem 0;
  padding: 0.75rem;
  border-radius: 6px;
  background: var(--tint-cyan-4);
  border: 1px solid var(--tint-cyan-10);
}

.page-xplore-academy .price-highlight {
  text-align: center;
}

.page-xplore-academy .price-xplore-annual {
  font-size: 2.2rem;
  color: var(--text-link);
  font-weight: 600;
  line-height: 1;
  margin-bottom: 0.375rem;
}

.page-xplore-academy .price-period {
  font-size: 1rem;
  font-weight: 500;
}

.page-xplore-academy .price-subtitle {
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.page-xplore-academy .price-comparison {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-subtle);
}

.page-xplore-academy .price-original {
  display: block;
  color: var(--text-muted);
  text-decoration: line-through;
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
}

.page-xplore-academy .price-economy {
  display: block;
  color: var(--text-link-hover);
  font-weight: 500;
  font-size: 0.9rem;
}

.page-xplore-academy .price-total-year {
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-top: 0.5rem;
  font-style: italic;
}

/* Seções de benefícios */
.page-xplore-academy .benefits-section,
.page-xplore-academy .course-topics {
  text-align: left;
  margin: 1rem 0;
}

.page-xplore-academy .benefits-title,
.page-xplore-academy .topics-title {
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  font-weight: 500;
  font-size: 1rem;
}

.page-xplore-academy .benefits-list,
.page-xplore-academy .topics-list {
  list-style: none;
  padding: 0;
}

.page-xplore-academy .benefit-item,
.page-xplore-academy .topic-item {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  line-height: 1.5;
  padding: 0.125rem 0;
}

.page-xplore-academy .benefit-icon,
.page-xplore-academy .topic-icon {
  flex-shrink: 0;
  color: var(--text-link);
  font-weight: 600;
  line-height: 1;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tint-cyan-10);
  border-radius: 50%;
  border: 1px solid var(--tint-cyan-20);
  transition: all 0.2s ease;
}

.page-xplore-academy .benefit-icon .fas,
.page-xplore-academy .benefit-icon .fa {
  font-size: 0.65rem;
}

.page-xplore-academy .benefit-text,
.page-xplore-academy .topic-text {
  color: var(--text-secondary);
  flex: 1;
  font-size: 0.9rem;
  padding-left: 1rem;
}

/* Substitui conteúdo incorreto por ícone com pseudo-elemento */
.page-xplore-academy .topic-icon::before {
  font-size: 1rem;
  color: var(--text-link);
  font-weight: 600;
  line-height: 1;
  display: block;
  text-shadow: 0 1px 2px var(--surface-tint-30-c);
}

.page-xplore-academy .topic-icon::before {
  content: "\2022"; /* bullet point para tópicos */
  font-size: 1.1rem;
}

.page-xplore-academy .benefit-item:hover .benefit-icon,
.page-xplore-academy .topic-item:hover .topic-icon {
  background: var(--tint-cyan-20);
  border-color: var(--tint-cyan-40);
  transform: scale(1.1);
  color: var(--pure-white);
}

/* SEÇÃO DE CURSOS MELHORADA */

/* Subtitle para seções */
.page-xplore-academy .section-subtitle {
  display: block;
  font-size: 1.2rem;
  font-weight: normal;
  color: var(--text-muted);
  margin-top: 0.5rem;
  line-height: 1.4;
}

/* Grid específico para cursos - cards mais largos */
.page-xplore-academy .grid-cursos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 2.5rem;
  margin-top: 3rem;
}

/* Cards de curso redesenhados */
.page-xplore-academy .card-curso {
  /* Flat (no gradients): first stop kept. */
  background: var(--border-default);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.4s ease;
  border: 1px solid var(--border-default);
  position: relative;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 25px var(--surface-tint-20-b);
}

.page-xplore-academy .card-curso:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px var(--tint-cyan-20);
  border-color: var(--tint-cyan-30);
}

/* Header do card */
.page-xplore-academy .card-header-curso {
  padding: 2rem 2rem 1rem 2rem;
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  /* Flat (no gradients): first stop kept. */
  background: var(--tint-cyan-10);
  border-bottom: 1px solid var(--border-default);
}

.page-xplore-academy .curso-icon {
  width: 70px;
  height: 70px;
  /* Flat (no gradients): first stop kept; AA verified >= 4.5:1 with the
     navy icon glyph both themes (6.96:1). */
  background: var(--primary-cyan);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 20px var(--tint-cyan-40);
  border: 2px solid var(--surface-tint-20-c);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.page-xplore-academy .curso-icon::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  /* Flat (no gradients): a fade-in/fade-out sheen has no flat
     equivalent, so this decorative rotated overlay is now solid. */
  background: var(--border-default);
  transform: rotate(45deg);
  transition: all 0.3s ease;
}

.page-xplore-academy .curso-icon i {
  font-size: 1.8rem;
  color: var(--primary-blue);
  font-weight: bold;
  text-shadow: 0 1px 2px var(--surface-tint-20-b);
  position: relative;
  z-index: 2;
}

.page-xplore-academy .card-curso:hover .curso-icon {
  transform: scale(1.05) rotate(5deg);
  box-shadow: 0 8px 25px var(--tint-cyan-50);
}

.page-xplore-academy .card-curso:hover .curso-icon::before {
  transform: rotate(45deg) translateX(100%);
}

.page-xplore-academy .card-title-container {
  flex: 1;
}

.page-xplore-academy .card-title-curso {
  font-size: 1.4rem;
  color: var(--text-secondary);
  font-weight: bold;
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

/* Body do card */
.page-xplore-academy .card-body-curso {
  padding: 1.5rem 2rem;
}

.page-xplore-academy .card-description-curso {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
}

/* Tópicos melhorados */
.page-xplore-academy .course-topics-enhanced {
  margin: 1.5rem 0;
}

.page-xplore-academy .topics-title-enhanced {
  color: var(--text-link-hover);
  margin-bottom: 1rem;
  font-weight: bold;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.page-xplore-academy .topics-title-enhanced i {
  color: var(--text-link);
}

.page-xplore-academy .topics-list-enhanced {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0.75rem;
}

.page-xplore-academy .topic-item-enhanced {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--tint-cyan-10);
  border-radius: 8px;
  border-left: 3px solid var(--text-link-hover);
  transition: all 0.3s ease;
}

.page-xplore-academy .topic-item-enhanced:hover {
  background: var(--tint-cyan-10);
  transform: translateX(5px);
}

.page-xplore-academy .topic-check {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  /* Flat (no gradients): first stop kept; AA verified >= 4.5:1 with the
     navy text both themes (13.35:1). */
  background: var(--primary-green);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-blue);
  font-weight: bold;
  font-size: 0.9rem;
  margin-top: 0.1rem;
  border: 2px solid var(--tint-green-30-b);
  box-shadow: 0 2px 8px var(--tint-green-18);
  transition: all 0.3s ease;
  text-shadow: 0 1px 2px var(--surface-tint-30-c);
}

.page-xplore-academy .topic-item-enhanced:hover .topic-check {
  transform: scale(1.1);
  box-shadow: 0 4px 12px var(--tint-green-40);
  border-color: var(--tint-green-50);
}

.page-xplore-academy .topic-text-enhanced {
  color: var(--border-default);
  flex: 1;
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Footer do card */
.page-xplore-academy .card-footer-curso {
  padding: 1.5rem 2rem 2rem 2rem;
  border-top: 1px solid var(--border-default);
}

.page-xplore-academy .btn-curso-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 1.5rem;
  /* Flat (no gradients): first stop kept; AA verified >= 4.5:1 with the
     navy text both themes (6.96:1). */
  background: var(--primary-cyan);
  color: var(--primary-blue);
  text-decoration: none;
  border-radius: 12px;
  font-weight: bold;
  font-size: 1rem;
  transition: all 0.3s ease;
  margin-bottom: 1rem;
  box-shadow: 0 4px 15px var(--tint-cyan-30);
}

.page-xplore-academy .btn-curso-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px var(--tint-cyan-40);
  /* Flat (no gradients): first stop kept; AA verified >= 4.5:1 with the
     white text both themes (12.61:1). */
  background: var(--academy-legacy-navy-hover-start);
  text-decoration: none;
  color: var(--pure-white);
}

.page-xplore-academy .btn-curso-cta:hover .btn-text,
.page-xplore-academy .btn-curso-cta:hover .btn-arrow {
  color: var(--pure-white);
}

.page-xplore-academy .btn-curso-cta:focus {
  text-decoration: none;
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.page-xplore-academy .btn-text {
  flex: 1;
}

.page-xplore-academy .btn-arrow {
  font-size: 1.2rem;
  font-weight: bold;
  transition: transform 0.3s ease;
}

.page-xplore-academy .btn-curso-cta:hover .btn-arrow {
  transform: translateX(5px);
}

.page-xplore-academy .curso-benefits {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.page-xplore-academy .benefit-badge {
  background: var(--tint-green-10-b);
  color: var(--text-link-hover);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
  border: 1px solid var(--tint-green-30-b);
  transition: all 0.3s ease;
  text-shadow: 0 1px 2px var(--surface-tint-20-b);
  backdrop-filter: blur(5px);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.page-xplore-academy .benefit-badge:hover {
  background: var(--tint-green-18);
  border-color: var(--tint-green-40);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--tint-green-18);
  color: var(--pure-white);
}

/* CTA Section no final dos cursos */
.page-xplore-academy .cursos-cta-section {
  margin-top: 4rem;
  text-align: center;
}

.page-xplore-academy .cursos-highlight {
  /* Flat (no gradients): first stop kept. */
  background: var(--tint-cyan-10);
  border: 2px solid var(--tint-cyan-20);
  border-radius: 12px;
  padding: 3rem 2rem;
  max-width: 600px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.page-xplore-academy .cursos-highlight::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  /* Flat (no gradients): a radial fade-to-transparent has no flat
     equivalent, so this decorative rotating glow is now solid (the
     rotation is now a visual no-op on the uniform fill, kept as-is). */
  background: var(--tint-cyan-10);
  animation: rotate 20s linear infinite;
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.page-xplore-academy .highlight-title {
  font-size: 1.8rem;
  color: var(--text-link);
  margin-bottom: 1rem;
  font-weight: bold;
  position: relative;
  z-index: 2;
}

.page-xplore-academy .highlight-description {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 2rem;
  position: relative;
  z-index: 2;
}

.page-xplore-academy .btn-highlight-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  /* Flat (no gradients): neither original stop cleared 4.5:1 with this
     button's white text (2.84:1 / 2.27:1). --academy-legacy-orange-fill
     preserves dark exactly (2.84:1, pre-existing gap, dead code) and
     fixes light (5.18:1). */
  background: var(--academy-legacy-orange-fill);
  color: var(--pure-white);
  text-decoration: none;
  border-radius: 8px;
  font-weight: bold;
  font-size: 1rem;
  transition: all 0.3s ease;
  position: relative;
  z-index: 2;
  box-shadow: var(--academy-legacy-orange-shadow);
}

.page-xplore-academy .btn-highlight-cta:hover {
  transform: translateY(-3px);
  box-shadow: var(--academy-legacy-orange-shadow-hover);
}

.page-xplore-academy .cta-button {
  margin-top: auto;
  padding-top: 1rem;
  width: 100%;
  text-align: center;
}

/* Tornar o botão mensal tão largo quanto a área de benefícios */
.page-xplore-academy .cta-container .cta-button {
  display: flex;              /* sobrescreve inline-flex do .btn-secondary-xplore */
  justify-content: center;    /* centraliza o texto dentro do botão */
  align-items: center;        /* mantém a altura/alinhamento vertical */
  width: 100%;                /* ocupa toda a largura do card */
  box-sizing: border-box;     /* inclui borda no cálculo de largura */
  margin: 0 0 10px 0;         /* remove margem lateral que encurta o botão */
}

/* CTA Containers e Buttons */
.page-xplore-academy .cta-container-featured,
.page-xplore-academy .cta-container {
  margin-top: auto;
  padding-top: 1rem;
}

.page-xplore-academy .cta-button-featured {
  /* FB2: standardized on the sitewide primary button (solid cyan, dark
     text, was cyan fill with white text). */
  background: var(--primary-cyan) !important;
  color: var(--neutral-black) !important;
  padding: 16px 40px !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  font-size: 1.1rem !important;
  border: none !important;
  position: relative !important;
  overflow: hidden !important;
  transform: none !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  box-shadow: 0 4px 20px var(--tint-cyan-40) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}

.page-xplore-academy .cta-button-featured:hover {
  background: var(--academy-btn-hover-bg) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 30px var(--tint-cyan-50) !important;
}

/* Destaque do desconto abaixo do botão */
.page-xplore-academy .discount-highlight {
  color: var(--academy-legacy-mint) !important;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  margin: 0.75rem 0 0.5rem;
  text-shadow: var(--academy-legacy-mint-shadow);
  letter-spacing: 0.02em;
}

.page-xplore-academy .cta-text {
  font-size: 1.05rem;
  font-weight: 600;
}

.page-xplore-academy .cta-subtext {
  font-size: 0.85rem;
  opacity: 0.9;
  font-weight: normal;
}

/* Removido - animação desnecessária para design minimalista */

.page-xplore-academy .trust-indicators {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  gap: 0.75rem;
}

.page-xplore-academy .trust-item {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-align: center;
  flex: 1;
}

.page-xplore-academy .alternative-suggestion {
  margin-top: 0.5rem;
  text-align: center;
  padding: 0.375rem;
  background: var(--surface-tint-4);
  border-radius: 4px;
  border-left: 2px solid var(--action-primary);
}

.page-xplore-academy .alternative-suggestion small {
  color: var(--text-secondary);
  font-size: 0.75rem;
}

/* CTA Final */
.page-xplore-academy .cta-final-section {
  background: var(--background-page);
  text-align: center;
  padding: 4rem 2rem;
}

.page-xplore-academy .cta-final-title {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
  color: var(--text-link-hover);
}

.page-xplore-academy .cta-final-description {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  color: var(--text-secondary);
}

/* Ícone opcional nos cards (metodologias) */
.page-xplore-academy .card-icon {
  font-size: 2.5rem;
  color: var(--text-link-hover);
  margin-bottom: 1rem;
  text-align: center;
  padding: 0.75rem;
  background: var(--tint-green-10-b);
  border-radius: 50%;
  border: 2px solid var(--tint-green-18);
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem auto;
  transition: all 0.3s ease;
  text-shadow: 0 2px 4px var(--surface-tint-40-c);
  backdrop-filter: blur(5px);
}

.page-xplore-academy .card-icon:hover {
  background: var(--tint-green-10-b);
  border-color: var(--tint-green-40);
  transform: scale(1.08);
  color: var(--pure-white);
  box-shadow: 0 4px 15px var(--tint-green-30-b);
}

/* Back to top */
.page-xplore-academy .back-to-top-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background: var(--action-primary);
  color: var(--pure-white);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 1000;
  opacity: 0;
  transition: all 0.3s;
}

.page-xplore-academy .back-to-top-btn.visible {
  opacity: 1;
}

.page-xplore-academy .back-to-top-btn:hover {
  background: var(--action-primary-hover);
}

/* Screen reader */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 8px 16px;
  margin: 0;
  overflow: visible;
  clip: auto;
  background: var(--action-primary);
  color: var(--pure-white);
  text-decoration: none;
  border-radius: 4px;
  z-index: 9999;
}

/* Responsive */
@media (max-width: 768px) {
  .page-xplore-academy .hero-title-xplore {
    font-size: 2.5rem;
  }
  
  .page-xplore-academy .hero-xplore {
    min-height: 40vh;
    padding: 30px 15px;
  }
  
  .page-xplore-academy .section-title-xplore {
    font-size: 2.2rem;
  }
  
  .page-xplore-academy .grid-xplore {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .page-xplore-academy .hero-cta-xplore {
    text-align: center;
  }

  /* ============================================
     PLANOS - MOBILE OTIMIZADO  
     ============================================ */
  .page-xplore-academy #planos {
    padding: 60px 15px;
  }
  
  .page-xplore-academy #planos .container-xplore {
    padding: 0;
  }
  
  .page-xplore-academy #planos .grid-xplore {
    gap: 2rem;
    padding: 0 5px;
  }
  
  .page-xplore-academy #planos .card-xplore {
    padding: 1.5rem 1.25rem;
    margin: 0;
  }
  
  .page-xplore-academy #planos .card-title-xplore {
    font-size: 1.3rem;
  }
  
  .page-xplore-academy #planos .card-description-xplore {
    font-size: 0.9rem;
    line-height: 1.5;
  }
  
  .page-xplore-academy #planos .pricing-container {
    padding: 1rem;
  }
  
  .page-xplore-academy #planos .price-xplore-annual,
  .page-xplore-academy #planos .price-xplore {
    font-size: 2rem;
  }
  
  .page-xplore-academy #planos .benefits-list {
    padding-left: 0;
  }
  
  .page-xplore-academy #planos .benefit-item {
    padding: 0.5rem 0;
    font-size: 0.9rem;
  }
  
  /* Botões de assinatura - mobile */
  .page-xplore-academy #planos .cta-button-featured,
  .page-xplore-academy #planos .btn-primary-xplore,
  .page-xplore-academy #planos .btn-secondary-xplore {
    width: 100% !important;
    min-height: 56px;
    font-size: 1.1rem !important;
    padding: 16px 20px !important;
    margin-bottom: 0.5rem;
    box-sizing: border-box;
  }
  
  .page-xplore-academy #planos .cta-container-featured,
  .page-xplore-academy #planos .cta-container {
    padding-top: 1rem;
  }
  
  .page-xplore-academy #planos .trust-indicators {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
  }
  
  .page-xplore-academy #planos .trust-item {
    font-size: 0.8rem;
  }
  
  .page-xplore-academy #planos .alternative-suggestion {
    margin-top: 0.75rem;
  }
  
  /* Badges em mobile */
  .page-xplore-academy #planos .featured-badge {
    font-size: 0.75rem;
    padding: 6px 14px;
    top: -8px;
    right: 50%;
    transform: translateX(50%);
  }
  
  .page-xplore-academy #planos .plan-type-badge {
    font-size: 0.7rem;
    top: -8px;
    right: 50%;
    transform: translateX(50%);
  }

  /* Value Proposition Responsive */
  .page-xplore-academy .section-value-proposition {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .page-xplore-academy .value-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .page-xplore-academy .value-card {
    padding: 1.5rem 1rem;
  }

  .page-xplore-academy .value-title {
    font-size: 2.2rem;
    margin-bottom: 1rem;
  }

  .page-xplore-academy .value-subtitle {
    font-size: 1rem;
    margin-bottom: 2.5rem;
  }

  .page-xplore-academy .value-cta-text {
    font-size: 1.1rem;
  }
  
  .page-xplore-academy .btn-primary-xplore,
  .page-xplore-academy .btn-secondary-xplore {
    display: block;
    margin: 10px auto;
    max-width: 280px;
  }
  
  /* Ajuste dos ícones em mobile */
  .page-xplore-academy .benefit-item,
  .page-xplore-academy .topic-item {
    gap: 0.75rem;
  }
  
  .page-xplore-academy .benefit-icon,
  .page-xplore-academy .topic-icon {
    width: 1.8rem;
    height: 1.8rem;
    margin-top: 0.25rem;
  }
  
  /* Emojis responsivos */
  .page-xplore-academy .icon-emoji {
    width: 70px;
    height: 70px;
    font-size: 2.8rem;
    padding: 0.8rem;
  }
  
  .page-xplore-academy .card-icon {
    width: 60px;
    height: 60px;
    font-size: 2rem;
    padding: 0.6rem;
  }
  
  .page-xplore-academy .curso-icon {
    width: 60px;
    height: 60px;
    border-radius: 15px;
  }
  
  .page-xplore-academy .curso-icon i {
    font-size: 1.5rem;
  }
  
  .page-xplore-academy .topic-check {
    width: 20px;
    height: 20px;
    font-size: 0.8rem;
  }
  
  /* Ajustes dos novos elementos em mobile */
  .page-xplore-academy .card-featured {
    transform: none;
  }
  
  .page-xplore-academy .card-featured:hover {
    transform: translateY(-5px);
  }
  
  .page-xplore-academy .featured-badge {
    font-size: 0.7rem;
    padding: 6px 12px;
    right: 12px;
    top: -8px;
    border-radius: 16px;
  }
  
  .page-xplore-academy .savings-badge {
    font-size: 0.7rem;
    padding: 6px 12px;
    left: 12px;
    top: -8px;
    border-radius: 16px;
  }
  
  .page-xplore-academy .plan-type-badge {
    font-size: 0.65rem;
    padding: 5px 10px;
    right: 12px;
    border-radius: 12px;
  }
  
  .page-xplore-academy .benefit-badge {
    font-size: 0.75rem;
    padding: 0.4rem 0.8rem;
    border-radius: 16px;
  }
  
  .page-xplore-academy .price-xplore-annual {
    font-size: 2.5rem;
  }
  
  .page-xplore-academy .price-period {
    font-size: 1rem;
  }
  
  .page-xplore-academy .trust-indicators {
    flex-direction: column;
    gap: 0.375rem;
  }
  
  .page-xplore-academy .trust-item {
    font-size: 0.75rem;
  }
  
  .page-xplore-academy .cta-button-featured {
    padding: 1rem 1.5rem !important;
  }
  
  .page-xplore-academy .cta-text {
    font-size: 1rem;
  }
  
  .page-xplore-academy .cta-subtext {
    font-size: 0.8rem;
  }
  
  /* Responsividade para seção de cursos */
  .page-xplore-academy .grid-cursos {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .page-xplore-academy .card-header-curso {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
    padding: 1.5rem;
  }
  
  .page-xplore-academy .curso-icon {
    width: 50px;
    height: 50px;
    align-self: center;
  }
  
  .page-xplore-academy .topics-list-enhanced {
    grid-template-columns: 1fr;
  }
  
  .page-xplore-academy .card-body-curso,
  .page-xplore-academy .card-footer-curso {
    padding: 1.5rem;
  }
  
  .page-xplore-academy .curso-benefits {
    justify-content: center;
  }
  
  .page-xplore-academy .cursos-highlight {
    padding: 2rem 1.5rem;
    margin: 0 1rem;
  }
  
  .page-xplore-academy .highlight-title {
    font-size: 1.5rem;
  }
}

/* Carousel arrows */
.page-xplore-academy .courses-scroll-container {
  position: relative;
}

.page-xplore-academy .scroll-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--surface-tint-50-b);
  color: var(--pure-white);
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 10;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
  pointer-events: auto; /* Garante que as setas sejam clicáveis */
}

.page-xplore-academy .scroll-arrow:hover {
  background-color: var(--academy-shadow-black-80);
}

.page-xplore-academy .scroll-arrow.left {
  left: 10px;
}

.page-xplore-academy .scroll-arrow.right {
  right: 10px;
}

/* Floating Elements - Efeitos decorativos */
.page-xplore-academy .floating-element {
  position: absolute;
  opacity: 0.1;
  animation: floatGentle 8s ease-in-out infinite;
}

.page-xplore-academy .floating-element:nth-child(odd) {
  animation-delay: -4s;
}

@keyframes floatGentle {
  0%, 100% { 
    transform: translateY(0) rotate(0deg); 
  }
  33% { 
    transform: translateY(-30px) rotate(120deg); 
  }
  66% { 
    transform: translateY(20px) rotate(240deg); 
  }
}

/* Progress Indicator */
.page-xplore-academy .progress-indicator {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  /* Flat (no gradients): first stop kept (decorative, no text). */
  background: var(--primary-cyan);
  z-index: 1000;
  transition: width 0.1s ease-out;
}

/* Parallax Container */
.page-xplore-academy .parallax-container {
  position: relative;
  overflow: hidden;
}

.page-xplore-academy .parallax-bg {
  position: absolute;
  top: -20%;
  left: -20%;
  width: 140%;
  height: 140%;
  /* Flat (no gradients): uniform tint instead of the former radial
     fade-to-transparent (decorative, no text). */
  background: var(--tint-cyan-10);
  animation: parallaxMove 20s linear infinite;
}

@keyframes parallaxMove {
  0% { transform: translateX(-20px) translateY(-20px); }
  25% { transform: translateX(20px) translateY(-20px); }
  50% { transform: translateX(20px) translateY(20px); }
  75% { transform: translateX(-20px) translateY(20px); }
  100% { transform: translateX(-20px) translateY(-20px); }
}

/* Oculta o indicador de progresso nesta página */
.page-xplore-academy .progress-indicator { display: none !important; }

/* Responsive Design */
@media (max-width: 1024px) {
  .page-xplore-academy .hero-title-xplore {
    font-size: 3rem;
  }
  
  .page-xplore-academy .section-title-xplore {
    font-size: 2.5rem;
  }
}

/* Tablet portrait: planos em coluna única para alinhar botões corretamente */
@media (min-width: 769px) and (max-width: 991px) {
  .page-xplore-academy #planos .grid-xplore {
    grid-template-columns: 1fr;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
    gap: 2rem;
  }
}

@media (max-width: 768px) {
  .page-xplore-academy .hero-xplore {
    min-height: 50vh;
    padding: 30px 15px;
  }
  
  .page-xplore-academy .hero-title-xplore {
    font-size: 2.5rem;
  }
  
  .page-xplore-academy .hero-description-xplore {
    font-size: 1.1rem;
  }
  
  .page-xplore-academy .section-title-xplore {
    font-size: 2.2rem;
  }
  
  .page-xplore-academy .grid-xplore {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .page-xplore-academy .hero-cta-xplore {
    text-align: center;
  }
  
  .page-xplore-academy .btn-primary-xplore,
  .page-xplore-academy .btn-secondary-xplore {
    display: block;
    margin: 10px auto;
    max-width: 280px;
    justify-content: center;
  }
  
  .page-xplore-academy .card-xplore {
    padding: 1.25rem;
  }
  
  .page-xplore-academy .section-xplore {
    padding: 80px 15px 60px;
  }
}

@media (max-width: 480px) {
  .page-xplore-academy .hero-title-xplore {
    font-size: 2rem;
  }
  
  .page-xplore-academy .btn-primary-xplore,
  .page-xplore-academy .btn-secondary-xplore {
    font-size: 1rem;
    padding: 0.75rem 1.5rem;
  }
}

/* Acessibilidade */
@media (prefers-reduced-motion: reduce) {
  .page-xplore-academy .hero-xplore::before,
  .page-xplore-academy .card-xplore,
  .page-xplore-academy .floating-element,
  .page-xplore-academy .parallax-bg {
    animation: none;
  }
  
  .page-xplore-academy .btn-primary-xplore:hover,
  .page-xplore-academy .btn-secondary-xplore:hover,
  .page-xplore-academy .card-xplore:hover {
    transform: none;
  }
}

/* Estados de foco para acessibilidade */
.page-xplore-academy .btn-primary-xplore:focus,
.page-xplore-academy .btn-secondary-xplore:focus {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* ============================================================================
   FIX: RESPONSIVIDADE TOUCH - BOTÕES DE ASSINATURA EM MOBILE/TABLET
   ============================================================================
   Em dispositivos touch, o hover "gruda" e causa transforms que interferem
   com o clique nos botões. Esta seção desabilita esses efeitos em touch.
   ============================================================================ */

/* Dispositivos touch (celulares/tablets) - desabilita hover transforms */
@media (hover: none), (pointer: coarse) {
  /* Remove transform de hover nos cards para evitar interferir nos cliques */
  .page-xplore-academy .card-xplore:hover,
  .page-xplore-academy .card-featured:hover {
    transform: none !important;
  }
  
  /* Remove transform de hover nos botões para clique imediato */
  .page-xplore-academy .btn-primary-xplore:hover,
  .page-xplore-academy .btn-secondary-xplore:hover,
  .page-xplore-academy .cta-button-featured:hover,
  .page-xplore-academy .cta-button:hover,
  .page-xplore-academy .btn-curso-cta:hover,
  .page-xplore-academy .btn-highlight-cta:hover {
    transform: none !important;
  }
  
  /* Melhora área de toque dos botões de assinatura */
  .page-xplore-academy .cta-button-featured,
  .page-xplore-academy .cta-button,
  .page-xplore-academy .btn-primary-xplore,
  .page-xplore-academy .btn-secondary-xplore {
    min-height: 56px !important;
    padding: 18px 24px !important;
    -webkit-tap-highlight-color: var(--tint-cyan-40);
    touch-action: manipulation;
    cursor: pointer !important;
  }
  
  /* Remove hover effects visuais que podem confundir no toque */
  .page-xplore-academy .value-card:hover,
  .page-xplore-academy .benefit-item:hover,
  .page-xplore-academy .topic-item:hover,
  .page-xplore-academy .tool-card:hover,
  .page-xplore-academy .course-scroll-card:hover {
    transform: none !important;
  }
  
  /* Garante que badges não interferem com cliques */
  .page-xplore-academy .featured-badge,
  .page-xplore-academy .savings-badge,
  .page-xplore-academy .plan-type-badge {
    pointer-events: none;
  }
  
  /* Cards de planos com melhor espaçamento em mobile */
  .page-xplore-academy .card-xplore {
    padding: 1.25rem;
    margin-bottom: 1.5rem;
    overflow: visible !important;
  }
  
  /* Efeito de feedback visual ao tocar (sem transform) */
  .page-xplore-academy .cta-button-featured:active,
  .page-xplore-academy .cta-button:active,
  .page-xplore-academy .btn-primary-xplore:active,
  .page-xplore-academy .btn-secondary-xplore:active {
    opacity: 0.85;
    box-shadow: 0 2px 10px var(--tint-cyan-40);
    background: var(--academy-btn-hover-bg) !important;
  }
  
  /* Carousel com scroll nativo em touch - MELHORADO */
  .page-xplore-academy .courses-scroll-container {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
  }
  
  .page-xplore-academy .courses-scroll-track {
    cursor: default;
    touch-action: pan-x;
  }
  
  .page-xplore-academy .course-scroll-card {
    flex: 0 0 88vw !important;
    max-width: 340px;
    scroll-snap-align: center;
    transform: none !important;
    padding: 20px !important;
  }
  
  /* Melhor layout para cards em mobile */
  .page-xplore-academy .course-header {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 12px !important;
  }
  
  .page-xplore-academy .course-info {
    text-align: center !important;
  }
  
  .page-xplore-academy .course-title {
    font-size: 16px !important;
    line-height: 1.3 !important;
  }
  
  .page-xplore-academy .course-subtitle {
    font-size: 10px !important;
    padding: 3px 10px !important;
  }
  
  .page-xplore-academy .icon-wrapper {
    width: 48px !important;
    height: 48px !important;
  }
  
  .page-xplore-academy .icon-wrapper i {
    font-size: 20px !important;
  }
  
  /* Módulos mais compactos em mobile */
  .page-xplore-academy .course-modules {
    gap: 8px !important;
  }
  
  .page-xplore-academy .module-item {
    padding: 10px 12px !important;
    gap: 10px !important;
  }
  
  .page-xplore-academy .module-number {
    width: 24px !important;
    height: 24px !important;
    font-size: 10px !important;
  }
  
  .page-xplore-academy .module-name {
    font-size: 12px !important;
  }
}

/* Hover transforms apenas em dispositivos com mouse preciso */
@media (hover: hover) and (pointer: fine) {
  .page-xplore-academy .card-xplore:hover {
    transform: translateY(-2px);
  }
  
  .page-xplore-academy .card-featured:hover {
    transform: translateY(-2px);
  }
}

/* Garante que botões de assinatura ficam sempre clicáveis acima dos cards */
.page-xplore-academy .cta-container,
.page-xplore-academy .cta-container-featured {
  position: relative;
  z-index: 100;
  isolation: isolate;
}

.page-xplore-academy .cta-button-featured,
.page-xplore-academy .cta-button,
.page-xplore-academy .btn-primary-xplore.cta-button-featured,
.page-xplore-academy .btn-secondary-xplore.cta-button,
.page-xplore-academy .alternative-link {
  position: relative;
  z-index: 10;
  cursor: pointer !important;
}

/* Botões sempre clicáveis - fallback */
.page-xplore-academy a.cta-button-featured,
.page-xplore-academy a.cta-button,
.page-xplore-academy a.btn-primary-xplore,
.page-xplore-academy a.btn-secondary-xplore {
  pointer-events: auto !important;
  user-select: none;
  -webkit-user-select: none;
}

/* FIX CRÍTICO: Spans internos dos botões NÃO devem capturar eventos de toque
   Em dispositivos touch, o toque nos spans filhos não propaga para o <a> pai.
   Com pointer-events: none, o toque passa diretamente para o link. */
.page-xplore-academy .cta-button-featured span,
.page-xplore-academy .cta-button-featured .cta-text,
.page-xplore-academy .cta-button-featured .cta-subtext,
.page-xplore-academy .cta-button span,
.page-xplore-academy .btn-primary-xplore span,
.page-xplore-academy .btn-secondary-xplore span {
  pointer-events: none !important;
}

/* FIX: Melhor touch target em mobile */
@media (max-width: 768px) {
  .page-xplore-academy .cta-button-featured,
  .page-xplore-academy .cta-button,
  .page-xplore-academy a.btn-primary-xplore,
  .page-xplore-academy a.btn-secondary-xplore {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    min-height: 56px !important;
    padding: 18px 24px !important;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: var(--tint-cyan-40);
  }
  
  /* Cards não devem ter overflow hidden que corte o touch */
  .page-xplore-academy .card-xplore,
  .page-xplore-academy .card-featured {
    overflow: visible !important;
  }
}

/* Destaque de números para melhor contraste */
.page-xplore-academy .destaque-numero {
  color: var(--text-link-hover) !important;
  font-weight: 700 !important;
}

/* Ripple Effect */
.page-xplore-academy .ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: var(--academy-legacy-ripple);
  transform: scale(0);
  animation: ripple 0.6s linear;
  pointer-events: none;
}

@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* Performance - Hardware acceleration */
.page-xplore-academy .hero-xplore,
.page-xplore-academy .card-xplore,
.page-xplore-academy .btn-primary-xplore,
.page-xplore-academy .btn-secondary-xplore {
  will-change: transform;
}


/* ==========================================
   SEÇÃO DE CURSOS - SCROLL INFINITO HORIZONTAL APRIMORADO
   ========================================== */

.page-xplore-academy .section-courses-scroll {
  background: var(--background-page);
  padding: 80px 0;
  color: var(--text-primary);
  overflow: visible; /* Permite scroll do container filho */
  overflow-y: hidden; /* Esconde overflow vertical */
  position: relative;
}

.page-xplore-academy .section-courses-scroll::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%23475569" stroke-width="0.3" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
  pointer-events: none;
}

.page-xplore-academy .courses-header {
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
  z-index: 2;
}

.page-xplore-academy .courses-title {
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 700;
  margin-bottom: 1.5rem;
  line-height: 1.1;
  /* Flat (no gradients): see .value-title above for the AA figures. */
  color: var(--action-primary);
  letter-spacing: -0.02em;
}

.page-xplore-academy .courses-subtitle {
  font-size: 1.2rem;
  color: var(--text-secondary);
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.6;
  font-weight: 400;
}

/* Wrapper Principal do Carrossel */
.page-xplore-academy .courses-carousel-wrapper {
  position: relative;
  margin: 0 auto;
  max-width: 1400px;
  padding: 0 80px;
}

/* Container do Scroll */
.page-xplore-academy .courses-scroll-container {
  position: relative;
  overflow-x: auto;
  margin-bottom: 2rem;
  z-index: 10;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding: 20px 0;
  /* Melhorias para touch scroll */
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
}

.page-xplore-academy .courses-scroll-container::-webkit-scrollbar {
  display: none;
}

.page-xplore-academy .courses-scroll-track {
  display: flex;
  gap: 2rem;
  transition: none; /* Remove transição para scroll mais responsivo */
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  will-change: scroll-position;
  width: max-content;
  touch-action: pan-x; /* Permite deslizar horizontalmente com toque */
}

.page-xplore-academy .courses-scroll-track:active {
  cursor: grabbing;
}

/* Cards dos Cursos Melhorados */
.page-xplore-academy .course-scroll-card {
  flex: 0 0 380px;
  /* Flat (no gradients): first stop kept. */
  background: var(--academy-legacy-scrollcard-sheen);
  border-radius: 16px;
  padding: 24px;
  border: 1px solid var(--academy-legacy-course-card-border-2);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  backdrop-filter: blur(10px);
  box-shadow: 
    0 4px 20px var(--tint-cyan-10),
    0 1px 3px var(--academy-shadow-black-10);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: block;
  cursor: pointer;
}

.page-xplore-academy .course-scroll-card:hover,
.page-xplore-academy .course-scroll-card:focus {
  transform: translateY(-8px);
  box-shadow: 
    0 12px 40px var(--tint-cyan-20),
    0 4px 12px var(--surface-tint-20-b);
  border-color: var(--tint-cyan-30);
  text-decoration: none;
  color: inherit;
}

.page-xplore-academy .course-scroll-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  /* Flat (no gradients): first stop kept (decorative reveal bar, no
     text). */
  background: var(--primary-cyan);
  transform: scaleX(0);
  transition: transform 0.4s ease;
}

.page-xplore-academy .course-scroll-card:hover::before {
  transform: scaleX(1);
}

/* Header do Curso */
.page-xplore-academy .course-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}

.page-xplore-academy .course-icon {
  flex-shrink: 0;
}

.page-xplore-academy .icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  /* Flat (no gradients): see .featured-badge above for the AA figures
     (--academy-badge-cyan-fill). */
  background: var(--text-link);
  border-radius: 12px;
  color: var(--pure-white);
  box-shadow: 0 4px 12px var(--tint-cyan-30);
  transition: all 0.3s ease;
}

.page-xplore-academy .course-scroll-card:hover .icon-wrapper {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 6px 20px var(--tint-cyan-40);
}

.page-xplore-academy .icon-wrapper i {
  font-size: 24px;
}

.page-xplore-academy .course-info {
  flex: 1;
  min-width: 0;
}

.page-xplore-academy .course-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--academy-legacy-slate-text);
  line-height: 1.3;
  margin: 0 0 8px 0;
}

.page-xplore-academy .course-subtitle {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-link);
  background: var(--tint-cyan-10);
  padding: 4px 12px;
  border-radius: 8px;
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Módulos dos Cursos */
.page-xplore-academy .course-modules {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.page-xplore-academy .module-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: var(--academy-legacy-module-item-bg);
  border-radius: 10px;
  border: 1px solid var(--academy-legacy-course-card-border);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.page-xplore-academy .module-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  /* Flat (no gradients): first stop kept (decorative reveal bar, no
     text). */
  background: var(--primary-cyan);
  transform: scaleY(0);
  transition: transform 0.3s ease;
}

.page-xplore-academy .module-item:hover {
  background: var(--tint-cyan-10);
  border-color: var(--tint-cyan-20);
  transform: translateX(4px);
}

.page-xplore-academy .module-item:hover::before {
  transform: scaleY(1);
}

.page-xplore-academy .module-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  /* Flat (no gradients): see .featured-badge above for the AA figures
     (--academy-badge-cyan-fill). */
  background: var(--text-link);
  color: var(--pure-white);
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px var(--tint-cyan-30);
}

.page-xplore-academy .module-name {
  color: var(--academy-legacy-slate-divider);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  flex: 1;
}

/* Setas de Navegação Melhoradas */
.page-xplore-academy .carousel-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  /* Flat (no gradients): see .featured-badge above for the AA figures
     (--academy-badge-cyan-fill). */
  background: var(--text-link);
  border: 3px solid var(--pure-white);
  border-radius: 50%;
  color: var(--pure-white);
  font-size: 18px;
  cursor: pointer;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: 
    0 8px 25px var(--tint-cyan-30),
    0 3px 10px var(--surface-tint-20-b);
  user-select: none;
  outline: none;
}

.page-xplore-academy .carousel-nav-btn:hover:not(:disabled) {
  background: var(--academy-legacy-carousel-hover-bg);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 
    0 12px 35px var(--tint-cyan-40),
    0 6px 15px var(--surface-tint-30-c);
}

.page-xplore-academy .carousel-nav-btn:active:not(:disabled) {
  transform: translateY(-50%) scale(0.95);
}

.page-xplore-academy .carousel-nav-btn.left-btn {
  left: 15px;
}

.page-xplore-academy .carousel-nav-btn.right-btn {
  right: 15px;
}

.page-xplore-academy .carousel-nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: var(--academy-legacy-carousel-disabled-bg);
  box-shadow: 0 4px 15px var(--academy-shadow-black-10);
  transform: translateY(-50%) scale(0.9);
}

/* Estados de foco para acessibilidade */
.page-xplore-academy .carousel-nav-btn:focus {
  outline: 3px solid var(--text-link-hover);
  outline-offset: 4px;
}

.page-xplore-academy .carousel-nav-btn:focus-visible {
  outline: 3px solid var(--text-link-hover);
  outline-offset: 4px;
}

/* Responsividade do Carrossel */
@media (max-width: 1200px) {
  .page-xplore-academy .courses-carousel-wrapper {
    padding: 0 70px;
  }
  
  .page-xplore-academy .course-scroll-card {
    flex: 0 0 360px;
  }
  
  .page-xplore-academy .carousel-nav-btn.left-btn {
    left: 10px;
  }
  
  .page-xplore-academy .carousel-nav-btn.right-btn {
    right: 10px;
  }
}

/* Tablet: Ajustes de layout mas mantém botões */
@media (max-width: 768px) {
  .page-xplore-academy .courses-carousel-wrapper {
    padding: 0 60px; /* Espaço para botões menores */
    position: relative;
  }
  
  .page-xplore-academy .course-scroll-card {
    flex: 0 0 85vw;
    max-width: 380px;
    padding: 20px;
  }
  
  .page-xplore-academy .course-title {
    font-size: 18px;
  }
  
  /* Botões menores em tablet */
  .page-xplore-academy .carousel-nav-btn {
    width: 44px;
    height: 44px;
    font-size: 14px;
  }
  
  .page-xplore-academy .carousel-nav-btn.left-btn {
    left: 8px;
  }
  
  .page-xplore-academy .carousel-nav-btn.right-btn {
    right: 8px;
  }
  
  /* Scroll container */
  .page-xplore-academy .courses-scroll-container {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    padding: 10px 0;
  }
  
  .page-xplore-academy .courses-scroll-track {
    gap: 20px;
    padding: 0 4px;
  }
}

/* Mobile pequeno: Esconde botões, usa scroll nativo */
@media (max-width: 600px) {
  .page-xplore-academy .courses-carousel-wrapper {
    padding: 0 16px;
  }
  
  /* Esconde setas apenas em phones - usa scroll nativo */
  .page-xplore-academy .carousel-nav-btn,
  .page-xplore-academy .scroll-btn {
    display: none !important;
  }
  
  .page-xplore-academy .course-scroll-card {
    flex: 0 0 88vw;
    max-width: 340px;
  }
  
  /* Scroll nativo suave - deixa o browser controlar */
  .page-xplore-academy .courses-scroll-container {
    scroll-behavior: smooth;
    cursor: default; /* Remove cursor grab em touch */
  }
  
  .page-xplore-academy .courses-scroll-track {
    gap: 16px;
  }
}

/* Celular pequeno */
@media (max-width: 480px) {
  .page-xplore-academy .courses-carousel-wrapper {
    padding: 0 12px;
  }
  
  .page-xplore-academy .course-scroll-card {
    flex: 0 0 92vw;
    max-width: 320px;
    padding: 16px;
  }
  
  .page-xplore-academy .course-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    margin-bottom: 16px;
  }
  
  .page-xplore-academy .course-info {
    text-align: center;
  }
  
  .page-xplore-academy .icon-wrapper {
    width: 48px;
    height: 48px;
  }
  
  .page-xplore-academy .icon-wrapper i {
    font-size: 20px;
  }
  
  .page-xplore-academy .course-title {
    font-size: 16px;
    line-height: 1.3;
  }
  
  .page-xplore-academy .course-subtitle {
    font-size: 10px;
    padding: 3px 10px;
  }
  
  /* Módulos compactos */
  .page-xplore-academy .course-modules {
    gap: 6px;
  }
  
  .page-xplore-academy .module-item {
    padding: 8px 10px;
    gap: 8px;
  }
  
  .page-xplore-academy .module-number {
    width: 22px;
    height: 22px;
    font-size: 10px;
  }
  
  .page-xplore-academy .module-name {
    font-size: 11px;
  }
}

/* Indicadores de progresso */
.page-xplore-academy .carousel-indicators {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 2rem;
  position: relative;
  z-index: 15;
}

.page-xplore-academy .carousel-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--academy-legacy-indicator-bg);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border: 2px solid transparent;
}

.page-xplore-academy .carousel-indicator.active {
  background: var(--action-primary);
  transform: scale(1.3);
  box-shadow: 0 0 15px var(--tint-cyan-60);
  border-color: var(--academy-legacy-stat-sheen);
}

.page-xplore-academy .carousel-indicator:hover:not(.active) {
  background: var(--academy-legacy-ripple);
  transform: scale(1.1);
  border-color: var(--academy-legacy-indicator-bg);
}

/* Efeito de arrastar aprimorado */
.page-xplore-academy .drag-hint {
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--academy-legacy-stat-sheen);
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 10;
  pointer-events: none;
  background: var(--surface-tint-30-c);
  padding: 8px 16px;
  border-radius: 20px;
  backdrop-filter: blur(10px);
  font-weight: 500;
}

.page-xplore-academy .courses-scroll-track:hover + .drag-hint {
  opacity: 1;
}

/* Animações e efeitos adicionais */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

/* Melhorias de acessibilidade */
@media (prefers-reduced-motion: reduce) {
  .page-xplore-academy .course-scroll-card,
  .page-xplore-academy .carousel-nav-btn,
  .page-xplore-academy .carousel-indicator,
  .page-xplore-academy .courses-scroll-track {
    transition: none !important;
    animation: none !important;
  }
  
  .page-xplore-academy .courses-scroll-track {
    scroll-behavior: auto !important;
  }
}

/* Estados de foco melhorados para acessibilidade */
.page-xplore-academy .course-scroll-card:focus {
  outline: 3px solid var(--text-link-hover);
  outline-offset: 2px;
  transform: translateY(-4px);
}

.page-xplore-academy .carousel-indicator:focus {
  outline: 2px solid var(--text-link-hover);
  outline-offset: 3px;
}

/* Tooltip para setas de navegação */
.page-xplore-academy .carousel-nav-btn::after {
  content: attr(aria-label);
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--academy-legacy-tooltip-bg);
  color: var(--pure-white);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 100;
  box-shadow: 0 4px 12px var(--surface-tint-30-c);
}

.page-xplore-academy .carousel-nav-btn:hover::after {
  opacity: 1;
}

/* Cards dos Cursos - Design Minimalista */
.page-xplore-academy .course-scroll-card {
  flex: 0 0 480px;
  background: var(--pure-white);
  border: 1px solid var(--academy-legacy-course-card-border-3);
  border-radius: 20px;
  padding: 28px;
  margin: 10px 0;
  text-decoration: none;
  color: inherit;
  display: block;
  cursor: pointer;
  position: relative;
  box-shadow: 
    0 8px 32px var(--surface-tint-4-b),
    0 2px 8px var(--surface-tint-4-b);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  overflow: hidden;
}

.page-xplore-academy .course-scroll-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  /* Flat (no gradients): first stop kept (decorative reveal bar, no
     text). */
  background: var(--primary-cyan);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.page-xplore-academy .course-scroll-card:hover,
.page-xplore-academy .course-scroll-card:focus {
  transform: translateY(-8px);
  box-shadow: 
    0 20px 40px var(--tint-cyan-12),
    0 8px 16px var(--surface-tint-4-b);
  border-color: var(--tint-cyan-20);
  text-decoration: none;
  color: inherit;
}

.page-xplore-academy .course-scroll-card:hover::before {
  opacity: 1;
}

/* Header do Curso */
.page-xplore-academy .course-header {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--surface-solid-f5f7fa);
}

.page-xplore-academy .course-icon {
  flex-shrink: 0;
}

.page-xplore-academy .icon-wrapper {
  width: 64px;
  height: 64px;
  /* Flat (no gradients): see .featured-badge above for the AA figures
     (--academy-badge-cyan-fill). */
  background: var(--text-link);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px var(--tint-cyan-30);
  transition: transform 0.3s ease;
}

.page-xplore-academy .course-scroll-card:hover .icon-wrapper {
  transform: scale(1.1) rotate(5deg);
}

.page-xplore-academy .icon-wrapper i {
  font-size: 28px;
  color: var(--pure-white);
}

.page-xplore-academy .course-info {
  flex: 1;
  min-width: 0;
}

.page-xplore-academy .course-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--academy-legacy-slate-text);
  line-height: 1.3;
  margin: 0 0 8px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.page-xplore-academy .course-description {
  font-size: 0.875rem;
  color: var(--neutral-gray-500);
  line-height: 1.5;
  margin: 0;
}

.page-xplore-academy .course-subtitle {
  display: inline-block;
  /* Flat (no gradients): see .featured-badge above for the AA figures
     (--academy-badge-cyan-fill). */
  background: var(--text-link);
  color: var(--pure-white);
  font-size: 10px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
}

/* Módulos */
.page-xplore-academy .course-modules {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.page-xplore-academy .module-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: var(--academy-legacy-module-item-bg);
  border-radius: 12px;
  border: 1px solid var(--academy-legacy-course-card-border);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.page-xplore-academy .module-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  /* Flat (no gradients): first stop kept (decorative reveal bar, no
     text). */
  background: var(--primary-cyan);
  transform: scaleY(0);
  transition: transform 0.3s ease;
}

.page-xplore-academy .module-item:hover {
  background: var(--tint-cyan-10);
  border-color: var(--tint-cyan-20);
  transform: translateX(4px);
}

.page-xplore-academy .module-item:hover::before {
  transform: scaleY(1);
}

.page-xplore-academy .module-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  /* Flat (no gradients): see .featured-badge above for the AA figures
     (--academy-badge-cyan-fill). */
  background: var(--text-link);
  color: var(--pure-white);
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px var(--tint-cyan-30);
}

.page-xplore-academy .module-name {
  color: var(--academy-legacy-slate-divider);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  flex: 1;
}

/* Estatísticas do Curso */
.page-xplore-academy .course-stats {
  display: flex;
  gap: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--surface-solid-f5f7fa);
  flex-wrap: nowrap;
  align-items: center;
  min-height: 44px;
  justify-content: flex-start;
}

.page-xplore-academy .stat-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  font-size: 0.75rem;
  color: var(--academy-legacy-slate-text);
  font-weight: 700;
  background: var(--pure-white);
  padding: 8px 12px;
  border-radius: 18px;
  border: 1px solid var(--academy-legacy-slate-border-2);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  height: 36px;
  min-height: 36px;
  flex: 0 1 auto;
  min-width: 0;
  box-shadow: 
    0 3px 6px var(--academy-shadow-black-10),
    0 1px 3px var(--surface-tint-4-b);
  position: relative;
  overflow: hidden;
}

.page-xplore-academy .stat-item:hover {
  background: var(--academy-legacy-card-light-hover-bg);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 
    0 6px 12px var(--surface-tint-20-b),
    0 2px 4px var(--academy-shadow-black-10);
  border-color: var(--text-muted);
}

.page-xplore-academy .stat-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  /* Flat (no gradients): a fade-in/fade-out sweep has no flat
     equivalent, so this decorative hover sheen is now solid. */
  background: var(--academy-legacy-stat-sheen);
  transition: left 0.6s ease;
}

.page-xplore-academy .stat-item:hover::before {
  left: 100%;
}

.page-xplore-academy .stat-icon {
  font-size: 12px;
  flex-shrink: 0;
  font-weight: normal;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--gen-adaptive-other-15);
  color: var(--palette-solid-1d4ed8);
  transition: all 0.3s ease;
  line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  text-align: center;
}

/* Cores e fundos específicos para diferentes tipos de badges */
.page-xplore-academy .stat-item:nth-child(1) {
  border-color: var(--academy-legacy-blue-tint-30);
  /* Flat (no gradients): first stop kept. */
  background: var(--gen-adaptive-other-5);
}

.page-xplore-academy .stat-item:nth-child(1) .stat-icon {
  /* Flat (no gradients): first stop kept. */
  background: var(--gen-adaptive-other-15);
  color: var(--palette-solid-1d4ed8); /* Azul mais escuro para módulos/aulas */
  box-shadow: 0 2px 6px var(--academy-legacy-blue-tint-30);
}

.page-xplore-academy .stat-item:nth-child(2) {
  border-color: var(--academy-legacy-green-tint-30);
  /* Flat (no gradients): first stop kept. */
  background: var(--tint-green-5);
}

.page-xplore-academy .stat-item:nth-child(2) .stat-icon {
  /* Flat (no gradients): first stop kept. */
  background: var(--tint-green-15-b);
  color: var(--palette-emerald-700); /* Verde mais escuro para metodologia/projetos */
  box-shadow: 0 2px 6px var(--academy-legacy-green-tint-30);
}

.page-xplore-academy .stat-item:nth-child(3) {
  border-color: var(--tint-red-30);
  /* Flat (no gradients): first stop kept. */
  background: var(--tint-red-10);
}

.page-xplore-academy .stat-item:nth-child(3) .stat-icon {
  /* Flat (no gradients): first stop kept. */
  background: var(--academy-legacy-red-tint-20);
  color: var(--palette-red-600); /* Vermelho mais escuro para IA/Ética */
  box-shadow: 0 2px 6px var(--tint-red-30);
}

/* Efeitos hover específicos para cada tipo */
.page-xplore-academy .stat-item:nth-child(1):hover {
  border-color: var(--academy-legacy-blue-tint-50);
  /* Flat (no gradients): first stop kept. */
  background: var(--gen-adaptive-other-5);
  box-shadow: 
    0 6px 12px var(--gen-adaptive-other-15),
    0 2px 4px var(--gen-adaptive-other-15);
}

.page-xplore-academy .stat-item:nth-child(2):hover {
  border-color: var(--academy-legacy-green-tint-50);
  /* Flat (no gradients): first stop kept. */
  background: var(--tint-green-5);
  box-shadow: 
    0 6px 12px var(--tint-green-15-b),
    0 2px 4px var(--tint-green-15-b);
}

.page-xplore-academy .stat-item:nth-child(3):hover {
  border-color: var(--tint-red-50);
  /* Flat (no gradients): first stop kept. */
  background: var(--tint-red-10);
  box-shadow: 
    0 6px 12px var(--academy-legacy-red-tint-20),
    0 2px 4px var(--tint-red-20);
}

.page-xplore-academy .stat-item:hover .stat-icon {
  transform: scale(1.1);
  box-shadow: 0 3px 10px var(--surface-tint-20-b);
}

.page-xplore-academy .stat-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--academy-legacy-slate-text);
  font-size: 0.75rem;
  line-height: 1;
  flex: 1;
  min-width: 0;
}

/* CTA da Seção */
.page-xplore-academy .courses-cta {
  text-align: center;
  padding-top: 30px;
  border-top: 1px solid var(--academy-legacy-slate-divider);
  position: relative;
  z-index: 2;
}

.page-xplore-academy .courses-cta-text {
  font-size: 1.3rem;
  color: var(--text-secondary);
  margin-bottom: 20px;
  line-height: 1.5;
  font-weight: 500;
}

.page-xplore-academy .courses-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 40px;
  /* FB2: standardized on the sitewide primary button (solid cyan, dark
     text, was cyan fill with white text). */
  background: var(--primary-cyan);
  color: var(--neutral-black);
  text-decoration: none;
  border-radius: 10px;
  font-size: 1.05rem;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px var(--tint-cyan-30);
  border: none;
}

.page-xplore-academy .courses-cta-button:hover {
  background: var(--academy-btn-hover-bg);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px var(--tint-cyan-50);
  color: var(--neutral-black);
  text-decoration: none;
}

/* ==========================================
   RESPONSIVIDADE - CURSOS SCROLL
   ========================================== */

/* Tablets e dispositivos médios */
@media (max-width: 1024px) {
  .page-xplore-academy .section-courses-scroll {
    padding: 50px 0;
  }

  .page-xplore-academy .courses-title {
    font-size: 2.8rem;
  }

  .page-xplore-academy .courses-subtitle {
    font-size: 1.2rem;
  }

  .page-xplore-academy .courses-scroll-container {
    padding: 0 15px;
  }

  .page-xplore-academy .courses-scroll-container::before,
  .page-xplore-academy .courses-scroll-container::after {
    width: 80px;
  }

  .page-xplore-academy .courses-scroll-track {
    gap: 32px;
  }

  .page-xplore-academy .course-scroll-card {
    flex: 0 0 420px;
    padding: 20px;
  }

  .page-xplore-academy .course-header {
    gap: 14px;
    margin-bottom: 18px;
    padding-bottom: 14px;
  }

  .page-xplore-academy .course-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
  }

  .page-xplore-academy .icon-wrapper {
    font-size: 20px;
  }

  .page-xplore-academy .course-title {
    font-size: 1.25rem;
  }

  .page-xplore-academy .course-subtitle {
    font-size: 0.85rem;
  }

  .page-xplore-academy .course-stats {
    gap: 5px;
    justify-content: space-between;
  }

  .page-xplore-academy .stat-item {
    height: 36px;
    min-height: 36px;
    font-size: 0.7rem;
    padding: 6px 10px;
    gap: 6px;
    flex: 1;
    max-width: calc(33.333% - 4px);
  }

  .page-xplore-academy .stat-icon {
    font-size: 11px;
    width: 18px;
    height: 18px;
    border-radius: 9px;
  }

  .page-xplore-academy .stat-text {
    font-size: 0.7rem;
  }
}

/* Smartphones */
@media (max-width: 768px) {
  .page-xplore-academy .section-courses-scroll {
    padding: 40px 0;
  }

  .page-xplore-academy .courses-header {
    margin-bottom: 30px;
  }

  .page-xplore-academy .courses-title {
    font-size: 2.4rem;
  }

  .page-xplore-academy .courses-subtitle {
    font-size: 1.1rem;
  }

  .page-xplore-academy .courses-scroll-container {
    padding: 0 10px;
  }

  .page-xplore-academy .courses-scroll-container::before,
  .page-xplore-academy .courses-scroll-container::after {
    width: 60px;
  }

  .page-xplore-academy .courses-scroll-track {
    gap: 24px;
  }

  .page-xplore-academy .course-scroll-card {
    flex: 0 0 340px;
    padding: 18px;
  }

  .page-xplore-academy .course-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
  }

  .page-xplore-academy .course-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }

  .page-xplore-academy .icon-wrapper {
    font-size: 18px;
  }

  .page-xplore-academy .course-title {
    font-size: 1.2rem;
    text-align: center;
  }

  .page-xplore-academy .course-subtitle {
    font-size: 0.8rem;
  }

  .page-xplore-academy .module-item {
    padding: 5px 0;
  }

  .page-xplore-academy .module-number {
    width: 26px;
    height: 26px;
    font-size: 0.7rem;
  }

  .page-xplore-academy .module-name {
    font-size: 0.82rem;
  }

  .page-xplore-academy .course-stats {
    gap: 4px;
    justify-content: flex-start;
    padding-top: 12px;
    flex-wrap: wrap;
  }

  .page-xplore-academy .stat-item {
    font-size: 0.68rem;
    padding: 6px 9px;
    height: 32px;
    min-height: 32px;
    border-radius: 18px;
    gap: 6px;
    flex: 0 1 calc(50% - 2px);
    min-width: calc(50% - 2px);
    max-width: calc(50% - 2px);
  }

  .page-xplore-academy .stat-item:nth-child(3) {
    flex: 0 1 100%;
    min-width: 100%;
    max-width: 100%;
    margin-top: 4px;
  }

  .page-xplore-academy .stat-icon {
    font-size: 10px;
    width: 16px;
    height: 16px;
    border-radius: 8px;
  }

  .page-xplore-academy .stat-text {
    font-size: 0.68rem;
  }

  .page-xplore-academy .courses-cta {
    padding-top: 20px;
  }

  .page-xplore-academy .courses-cta-text {
    font-size: 1.1rem;
    margin-bottom: 16px;
  }

  .page-xplore-academy .courses-cta-button {
    padding: 16px 32px;
    font-size: 1rem;
  }
}

/* Dispositivos muito pequenos */
@media (max-width: 480px) {
  .page-xplore-academy .section-courses-scroll {
    padding: 60px 0;
  }

  .page-xplore-academy .courses-title {
    font-size: 2rem;
  }

  .page-xplore-academy .courses-subtitle {
    font-size: 1rem;
    padding: 0 20px;
  }

  .page-xplore-academy .courses-carousel-wrapper {
    padding: 0 10px;
  }

  /* Sombras laterais removidas - mobile */
  /* .courses-carousel-wrapper::before,
  .courses-carousel-wrapper::after {
    width: 60px;
  }

  .courses-carousel-wrapper::before {
    left: 10px;
  }

  .courses-carousel-wrapper::after {
    right: 10px;
  } */

  .page-xplore-academy .course-scroll-card {
    flex: 0 0 280px;
    padding: 16px;
    margin: 5px 0;
  }

  .page-xplore-academy .course-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  .page-xplore-academy .icon-wrapper {
    font-size: 16px;
  }

  .page-xplore-academy .course-title {
    font-size: 1.1rem;
    line-height: 1.3;
  }

  .page-xplore-academy .course-subtitle {
    font-size: 0.8rem;
  }

  .page-xplore-academy .module-item {
    padding: 8px 0;
  }

  .page-xplore-academy .module-number {
    width: 20px;
    height: 20px;
    font-size: 0.7rem;
  }

  .page-xplore-academy .module-name {
    font-size: 0.8rem;
  }

  .page-xplore-academy .course-stats {
    gap: 3px;
    flex-direction: column;
    align-items: stretch;
    padding-top: 10px;
  }

  .page-xplore-academy .stat-item {
    font-size: 0.68rem;
    padding: 6px 10px;
    height: 30px;
    min-height: 30px;
    border-radius: 16px;
    gap: 6px;
    flex: none;
    max-width: 100%;
    width: 100%;
  }

  .page-xplore-academy .stat-icon {
    font-size: 10px;
    width: 16px;
    height: 16px;
    border-radius: 8px;
  }

  .page-xplore-academy .carousel-indicators {
    margin-top: 1.5rem;
    gap: 8px;
  }

  .page-xplore-academy .carousel-indicator {
    width: 10px;
    height: 10px;
  }

  .page-xplore-academy .drag-hint {
    font-size: 0.75rem;
    padding: 6px 12px;
    bottom: -20px;
  }

  .page-xplore-academy .courses-cta {
    padding-top: 1.5rem;
  }

  .page-xplore-academy .courses-cta-text {
    font-size: 1rem;
    margin-bottom: 1rem;
    padding: 0 20px;
  }

  .page-xplore-academy .courses-cta-button {
    padding: 14px 28px;
    font-size: 0.95rem;
  }
}

  .page-xplore-academy .stat-icon {
    font-size: 9px;
    width: 16px;
    height: 16px;
    border-radius: 8px;
  }

  .page-xplore-academy .stat-text {
    font-size: 0.68rem;
  }

  .page-xplore-academy .courses-cta-button {
    padding: 14px 28px;
    font-size: 0.95rem;
  }


/* ===============================
   SCROLL INFINITO - CARDS CLONADOS
   =============================== */

/* Estilos para cards clonados no scroll infinito */
.page-xplore-academy .course-scroll-card.cloned {
  pointer-events: none; /* Evita interação com cards clonados */
  user-select: none;
}

/* Manter a animação visual mas sem interação */
.page-xplore-academy .course-scroll-card.cloned:hover {
  transform: none;
  box-shadow: 0 4px 20px var(--tint-cyan-20);
}

/* Acessibilidade - esconder dos leitores de tela */
.page-xplore-academy .course-scroll-card.cloned[aria-hidden="true"] {
  visibility: visible; /* Mantém visível para o layout */
}

/* Otimização para performance do scroll infinito */
.page-xplore-academy .courses-scroll-container {
  will-change: scroll-position;
}

.page-xplore-academy .courses-scroll-track {
  will-change: transform;
}

/* Suavização adicional para transições de scroll infinito */
.page-xplore-academy .courses-scroll-container[style*="scroll-behavior: auto"] {
  scroll-behavior: auto !important;
}

.page-xplore-academy .courses-scroll-container[style*="scroll-behavior: smooth"] {
  scroll-behavior: smooth !important;
}

/* ===============================
   SEÇÃO DE FERRAMENTAS
   =============================== */

.page-xplore-academy .section-tools {
  background: var(--background-elevated);
  color: var(--text-primary);
  position: relative;
  overflow: hidden;
}

.page-xplore-academy .section-tools::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* Flat (no gradients): the two corner glows are now a single flat
     tint. A radial fade-to-transparent has no flat equivalent, so the
     ambient wash is uniform instead of cornered. */
  background: var(--tint-cyan-10);
  pointer-events: none;
}

.page-xplore-academy .tools-header {
  text-align: center;
  margin-bottom: 4rem;
  position: relative;
  z-index: 2;
}

.page-xplore-academy .tools-title {
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 800;
  /* Flat (no gradients): solid brand color instead of the former
     clipped-text fade. Same AA figures as .value-title above (--text-link
     resolves to the same value as --academy-heading-gradient). */
  color: var(--text-link);
  margin-bottom: 1rem;
  line-height: 1.2;
}

.page-xplore-academy .tools-subtitle {
  font-size: clamp(1.1rem, 2vw, 1.25rem);
  /* Was the raw --neutral-gray-300 primitive (theme-invariant): reads fine
     on dark's navy page but is near-invisible on the light page, since it
     never adapts. --text-secondary is the same value in dark (zero visual
     change there) and the correct darker gray in light. */
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

.page-xplore-academy .tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));
  gap: 2rem;
  margin-bottom: 4rem;
  position: relative;
  z-index: 2;
}

.page-xplore-academy .tool-card {
  background: var(--surface-tint-80-b);
  backdrop-filter: blur(10px);
  border: 1px solid var(--tint-cyan-20);
  border-radius: 16px;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block;
}

.page-xplore-academy .tool-card:hover,
.page-xplore-academy .tool-card:focus {
  transform: translateY(-8px);
  border-color: var(--tint-cyan-40);
  box-shadow: 0 20px 40px var(--tint-cyan-20);
  text-decoration: none;
  color: inherit;
}

.page-xplore-academy .tool-card:hover::before {
  opacity: 1;
}

.page-xplore-academy .tool-card--premium {
  border-color: var(--tint-green-30-b);
}

.page-xplore-academy .tool-card--premium:hover,
.page-xplore-academy .tool-card--premium:focus {
  border-color: var(--tint-green-50);
  box-shadow: 0 20px 40px var(--tint-green-18);
  text-decoration: none;
  color: inherit;
}

.page-xplore-academy .tool-card--free {
  border-color: var(--tint-green-30);
}

.page-xplore-academy .tool-card--free:hover,
.page-xplore-academy .tool-card--free:focus {
  border-color: var(--tint-green-45);
  box-shadow: 0 20px 40px var(--tint-green-22);
  text-decoration: none;
  color: inherit;
}

.page-xplore-academy .tool-status {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 3;
}

.page-xplore-academy .tool-status--premium {
  /* Flat (no gradients): first stop kept; AA verified >= 4.5:1 with the
     black text both themes (15.92:1). */
  background: var(--primary-green);
  color: var(--neutral-black);
  box-shadow: 0 2px 8px var(--tint-green-20-b);
  padding: 4px 10px;
  font-size: 10px;
  letter-spacing: 0.2px;
  font-weight: 600;
}

.page-xplore-academy .tool-status--free {
  /* Flat (no gradients): first stop kept, preserving the exact
     pre-existing dark contrast (3.77:1, "preserve dark exactly", see
     the --academy-on-emerald-text token comment); light already passes
     via --text-primary text (4.67:1). */
  background: var(--palette-emerald-600);
  color: var(--text-primary);
  box-shadow: 0 2px 8px var(--tint-green-25-b);
  padding: 4px 10px;
  font-size: 10px;
  letter-spacing: 0.2px;
  font-weight: 600;
}

.page-xplore-academy .tool-visual {
  margin-bottom: 1.5rem;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-tint-30-c);
  position: relative;
}

.page-xplore-academy .tool-gif {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.page-xplore-academy .tool-card:hover .tool-gif {
  transform: scale(1.05);
}

.page-xplore-academy .tool-content {
  position: relative;
  z-index: 2;
}

.page-xplore-academy .tool-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.page-xplore-academy .tool-description {
  /* Was the raw --neutral-gray-300 primitive (theme-invariant): reads fine
     on dark's navy page but is near-invisible on the light page, since it
     never adapts. --text-secondary is the same value in dark (zero visual
     change there) and the correct darker gray in light. */
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.page-xplore-academy .tool-features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.page-xplore-academy .feature-tag {
  background: var(--tint-cyan-20);
  color: var(--primary-cyan);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid var(--tint-cyan-30);
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.page-xplore-academy .feature-tag .fas,
.page-xplore-academy .feature-tag .fa {
  font-size: 0.8rem;
}

.page-xplore-academy .tool-card--premium .feature-tag {
  background: var(--tint-green-10-b);
  color: var(--primary-green);
  border-color: var(--tint-green-30-b);
}

.page-xplore-academy .tool-card--free .feature-tag {
  background: var(--tint-green-10-c);
  color: var(--feedback-success);
  border-color: var(--tint-green-30);
}

.page-xplore-academy .tool-card:hover .feature-tag {
  transform: translateY(-2px);
}

.page-xplore-academy .tools-cta {
  text-align: center;
  position: relative;
  z-index: 2;
}

.page-xplore-academy .tools-cta-content {
  max-width: 600px;
  margin: 0 auto;
  padding: 2.5rem;
  /* Proper elevated card: the old --surface-tint-40-c wash (15% navy in
     light) composited into a muddy gray slab on the light page. */
  background: var(--background-elevated);
  border-radius: 20px;
  border: 1px solid var(--tint-cyan-20);
  box-shadow: var(--shadow-elevation-2);
}

.page-xplore-academy .tools-cta-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 1rem;
  line-height: 1.3;
}

.page-xplore-academy .tools-cta-text {
  /* Was the raw --neutral-gray-300 primitive (theme-invariant): reads fine
     on dark's navy page but is near-invisible on the light page, since it
     never adapts. --text-secondary is the same value in dark (zero visual
     change there) and the correct darker gray in light. */
  color: var(--text-secondary);
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.page-xplore-academy .tools-cta-button {
  display: inline-block;
  /* FB2: standardized on the sitewide primary button (solid cyan, dark
     text, was cyan fill with white text). */
  background: var(--primary-cyan);
  color: var(--neutral-black);
  padding: 16px 40px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 1.05rem;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px var(--tint-cyan-30);
}

.page-xplore-academy .tools-cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px var(--tint-cyan-50);
  text-decoration: none;
  color: var(--neutral-black);
  background: var(--academy-btn-hover-bg);
}

/* Responsividade */
@media (max-width: 768px) {
  .page-xplore-academy .tools-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .page-xplore-academy .tool-card {
    padding: 1.25rem;
  }
  
  .page-xplore-academy .tool-gif {
    height: 180px;
  }
  
  .page-xplore-academy .tools-cta-content {
    padding: 2rem 1.5rem;
  }
  
  .page-xplore-academy .tools-cta-button {
    padding: 0.875rem 2rem;
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .page-xplore-academy .section-tools {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  
  .page-xplore-academy .tools-header {
    margin-bottom: 3rem;
  }
  
  .page-xplore-academy .tool-status {
    top: 0.75rem;
    right: 0.75rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
  }
  
  .page-xplore-academy .tool-gif {
    height: 160px;
  }
  
  .page-xplore-academy .feature-tag {
    padding: 0.375rem 0.75rem;
    font-size: 0.8rem;
  }
}

/* Banner de idioma dos cursos */
.page-xplore-academy .courses-language-banner {
  margin-top: 2.5rem;
  padding: 1rem 1.5rem;
  /* Flat (no gradients): first stop kept. */
  background: var(--tint-cyan-10);
  border: 2px solid var(--tint-cyan-30);
  border-radius: 12px;
  text-align: center;
}

.page-xplore-academy .language-banner-content {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.page-xplore-academy .language-banner-content i {
  font-size: 1.4rem;
  color: var(--academy-text-accent-green);
}

@media (max-width: 768px) {
  .page-xplore-academy .courses-language-banner {
    margin-top: 2rem;
    padding: 0.875rem 1.25rem;
  }
  
  .page-xplore-academy .language-banner-content {
    font-size: 1rem;
    gap: 0.5rem;
  }
  
  .page-xplore-academy .language-banner-content i {
    font-size: 1.2rem;
  }
}

/* ===============================
   FAIXA DE CONFIANÇA (TRUST STRIP)
   =============================== */

.page-xplore-academy .section-trust-strip {
  background: var(--background-page);
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-bottom: 1px solid var(--tint-cyan-20);
}

.page-xplore-academy .trust-strip {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  padding: 1.25rem 1rem;
  flex-wrap: wrap;
}

.page-xplore-academy .trust-strip-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

.page-xplore-academy .trust-strip-icon {
  font-size: 1.25rem;
  line-height: 1;
  color: var(--text-link);
}

/* ============================================
   CREDITS PROMO BANNER
   ============================================ */
.page-xplore-academy .credits-promo-banner {
  background: var(--surface-solid-059669);
  padding: 2.5rem 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.page-xplore-academy .credits-promo-banner::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  /* Flat (no gradients): uniform tint instead of the former radial
     fade-to-transparent (decorative, no text; the shimmer animation
     below is now a visual no-op, kept as harmless). */
  background: var(--border-default);
  animation: bannerShimmer 6s ease-in-out infinite;
}

@keyframes bannerShimmer {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(30%, 20%); }
}

.page-xplore-academy .credits-promo-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
}

.page-xplore-academy .credits-promo-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface-tint-15);
  backdrop-filter: blur(8px);
  border: 1px solid var(--surface-tint-20);
  border-radius: 50px;
  padding: 0.5rem 1.25rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--pure-white);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}

.page-xplore-academy .credits-promo-badge i {
  font-size: 1rem;
  color: var(--palette-amber-400);
}

.page-xplore-academy .credits-promo-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--pure-white);
  margin: 0 0 0.5rem;
  line-height: 1.2;
}

.page-xplore-academy .credits-promo-title .credits-number {
  color: var(--palette-amber-400);
  font-size: 2.4rem;
}

.page-xplore-academy .credits-promo-subtitle {
  font-size: 1.1rem;
  color: var(--overlay-white-90);
  margin: 0 0 1.5rem;
  line-height: 1.5;
}

.page-xplore-academy .credits-promo-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--palette-amber-400);
  color: var(--neutral-gray-900);
  font-size: 1.1rem;
  font-weight: 700;
  padding: 0.95rem 2rem;
  border-radius: 12px;
  text-decoration: none !important;
  transition: all 0.25s ease;
  box-shadow: var(--academy-legacy-credits-amber-shadow);
  animation: ctaPulse 2.5s ease-in-out infinite;
}

.page-xplore-academy .credits-promo-cta:hover {
  background: var(--warning);
  transform: translateY(-2px) scale(1.03);
  box-shadow: var(--academy-legacy-credits-amber-shadow-hover);
  text-decoration: none !important;
  color: var(--neutral-gray-900);
}

@keyframes ctaPulse {
  0%, 100% { box-shadow: var(--academy-legacy-credits-amber-shadow); }
  50% { box-shadow: var(--academy-legacy-credits-pulse-shadow); }
}

.page-xplore-academy .credits-promo-microcopy {
  font-size: 0.85rem;
  color: var(--overlay-white-70);
  margin-top: 0.75rem;
}

.page-xplore-academy .credits-promo-microcopy i {
  margin-right: 0.25rem;
}

@media (max-width: 768px) {
  .page-xplore-academy .credits-promo-banner {
    padding: 2rem 1rem;
  }
  .page-xplore-academy .credits-promo-title {
    font-size: 1.5rem;
  }
  .page-xplore-academy .credits-promo-title .credits-number {
    font-size: 1.8rem;
  }
  .page-xplore-academy .credits-promo-cta {
    font-size: 1rem;
    padding: 0.85rem 1.5rem;
  }
}

@media (max-width: 480px) {
  .page-xplore-academy .credits-promo-banner {
    padding: 1.5rem 0.75rem;
  }
  .page-xplore-academy .credits-promo-title {
    font-size: 1.25rem;
  }
  .page-xplore-academy .credits-promo-title .credits-number {
    font-size: 1.5rem;
  }
  .page-xplore-academy .credits-promo-subtitle {
    font-size: 0.9rem;
  }
  .page-xplore-academy .credits-promo-cta {
    width: 100%;
    font-size: 0.95rem;
    padding: 0.85rem 1rem;
  }
}

/* ============================================
   FREE PLAN CARD (Pricing Section)
   ============================================ */
.page-xplore-academy .card-xplore.card-free {
  border: 2px solid var(--palette-emerald-600);
  background: var(--background-surface);
  position: relative;
}

.page-xplore-academy .card-free .free-badge {
  position: absolute;
  top: -1px;
  right: -1px;
  /* Flat (no gradients): first stop kept, preserving the exact
     pre-existing dark contrast (3.77:1, see .tool-status--free above). */
  background: var(--palette-emerald-600);
  color: var(--text-primary);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.4rem 1rem;
  border-radius: 0 8px 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.page-xplore-academy .card-free .price-free {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--feedback-success);
  margin: 0.5rem 0 0.25rem;
}

.page-xplore-academy .card-free .price-free-subtitle {
  font-size: 0.95rem;
  color: var(--palette-amber-400);
  font-weight: 600;
}

.page-xplore-academy .card-free .benefit-icon {
  color: var(--feedback-success);
}

/* Signup CTA: the sitewide primary-button recipe (FB1: solid cyan, dark
   text, neon-green hover, same as the login auth-submit). The previous
   dark-emerald fill with near-black text read muddy and, worse, was
   visually QUIETER than the cyan secondary next to it, inverting the
   CTA hierarchy on the page's main conversion action. */
.page-xplore-academy .btn-free-signup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.875rem 1.5rem;
  background: var(--primary-cyan);
  color: var(--neutral-black);
  font-size: 1.05rem;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  text-decoration: none !important;
  transition: all 0.25s ease;
  cursor: pointer;
  min-height: 52px;
  box-shadow: 0 4px 20px var(--tint-cyan-30);
}

.page-xplore-academy .btn-free-signup:hover {
  background: var(--academy-btn-hover-bg);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px var(--tint-green-30);
  text-decoration: none !important;
  color: var(--neutral-black);
}

/* ============================================
   HERO CTA - Free signup primary button
   ============================================ */
/* Only sizing here: fill/text/hover come from .btn-primary-xplore, which
   already carries the sitewide primary recipe. (The old emerald+dark-text
   override was the "weird background / black font" the user flagged.) */
.page-xplore-academy .btn-primary-xplore.btn-hero-free {
  font-size: 1.1rem;
  padding: 1rem 1.75rem;
}

/* ============================================
   TOOLS CTA - Free signup variant
   ============================================ */
.page-xplore-academy .tools-cta-free-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  margin-top: 1.25rem;
}

.page-xplore-academy .tools-cta-free-row .btn-free-signup {
  width: auto;
  padding: 0.875rem 2rem;
}

.page-xplore-academy .tools-cta-secondary-link {
  color: var(--surface-solid-94a3b8);
  text-decoration: underline;
  font-size: 0.95rem;
  transition: color 0.2s;
}

.page-xplore-academy .tools-cta-secondary-link:hover {
  color: var(--text-link);
}

/* ============================================
   FAQ CTA - Dual CTA
   ============================================ */
.page-xplore-academy .faq-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
}

/* The pair must render at the same size: the outline button used to keep
   its larger standalone padding (16px/40px) and no height floor, so the
   SECONDARY rendered bigger than the primary. Fixed height + zero block
   padding (both are flex, so the label centers) makes them pixel-equal
   regardless of the outline's 1px border. */
.page-xplore-academy .faq-cta-buttons .btn-free-signup,
.page-xplore-academy .faq-cta-buttons .faq-cta-button {
  width: auto;
  height: 52px;
  min-height: 0;
  padding: 0 2rem;
  box-sizing: border-box;
}

.page-xplore-academy .faq-cta-buttons .faq-cta-button {
  margin-top: 0;
}

/* Same risk-reducing proof line the hero uses, repeated under the final
   CTA pair. */
.page-xplore-academy .faq-cta .hero-microcopy {
  margin-top: 1rem;
}

@media (max-width: 640px) {
  .page-xplore-academy .tools-cta-free-row,
  .page-xplore-academy .faq-cta-buttons {
    flex-direction: column;
    align-items: stretch;
  }
  .page-xplore-academy .tools-cta-free-row .btn-free-signup,
  .page-xplore-academy .faq-cta-buttons .btn-free-signup {
    width: 100%;
  }
}

.page-xplore-academy .trust-strip-icon .fas,
.page-xplore-academy .trust-strip-icon .fa {
  font-size: 1.1rem;
}

.page-xplore-academy .trust-strip-text {
  color: var(--text-secondary);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

@media (max-width: 768px) {
  .page-xplore-academy .trust-strip {
    gap: 1.5rem;
    padding: 1rem 0.75rem;
  }

  .page-xplore-academy .trust-strip-item {
    flex: 0 0 calc(50% - 0.75rem);
    justify-content: center;
  }

  .page-xplore-academy .trust-strip-text {
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  .page-xplore-academy .trust-strip {
    gap: 1rem;
  }

  .page-xplore-academy .trust-strip-item {
    flex: 0 0 calc(50% - 0.5rem);
  }

  .page-xplore-academy .trust-strip-text {
    font-size: 0.8rem;
  }
}

/* ===============================
   URGENCY TEXT (Plano Anual)
   =============================== */

/* ===============================
   PACOTES DISPONÍVEIS SECTION
   =============================== */
.page-xplore-academy .pacotes-header {
  text-align: center;
  margin-bottom: 24px;
}

.page-xplore-academy .pacotes-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tint-cyan-70);
  margin-bottom: 12px;
}

.page-xplore-academy .pacotes-titulo {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 10px;
  letter-spacing: -0.5px;
  line-height: 1.1;
}

.page-xplore-academy .pacotes-subtitulo {
  font-size: 1rem;
  color: var(--surface-tint-55-b);
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.4;
}

/* ---- Grid ---- */
.page-xplore-academy .pacotes-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr 1fr;
  gap: 18px;
  align-items: stretch;
  max-width: 1080px;
  margin: 0 auto;
}

/* ---- Base Card ---- */
.page-xplore-academy .pacote-card {
  position: relative;
  background: var(--action-primary-text);
  border: 1px solid var(--border-default);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  padding: 24px 18px 20px;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  overflow: visible;
}

.page-xplore-academy .pacote-card:hover {
  transform: translateY(-3px);
  border-color: var(--tint-cyan-30);
  box-shadow: var(--academy-pacote-card-shadow-hover);
}

/* ---- Featured Card (Pro) ---- */
.page-xplore-academy .pacote-card--featured {
  background: var(--surface-solid-102a26);
  border-color: var(--academy-pacote-featured-border);
  box-shadow: var(--academy-pacote-featured-shadow);
  padding: 28px 22px 22px;
}

.page-xplore-academy .pacote-card--featured:hover {
  transform: translateY(-3px);
  border-color: var(--academy-pacote-featured-border-hover);
  box-shadow: var(--academy-pacote-featured-shadow-hover);
}

/* Glow superior desativado: badge + gradient já dão destaque suficiente */
.page-xplore-academy .pacote-card__glow {
  display: none;
}

/* ---- Badge ---- */
.page-xplore-academy .pacote-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 2;
}

.page-xplore-academy .pacote-badge--popular {
  /* Flat (no gradients): first stop kept; AA verified >= 4.5:1 with this
     badge's text both themes (8.65:1). */
  background: var(--palette-solid-34d399);
  color: var(--palette-solid-04231c);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 100px;
  box-shadow: var(--academy-plan-pro-badge-shadow);
}

/* ---- Head ---- */
.page-xplore-academy .pacote-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  text-align: left;
  margin-bottom: 16px;
}

.page-xplore-academy .pacote-card:not(.pacote-card--featured) .pacote-card__head {
  padding: 0;
}

.page-xplore-academy .pacote-card__icon {
  width: 38px;
  height: 38px;
  margin: 0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
}

/* Classes modifier por plano: cor + background do ícone */
.page-xplore-academy .pacote-card__icon--starter { background: var(--tint-cyan-bright-15);   color: var(--palette-solid-06b6d4); }
.page-xplore-academy .pacote-card__icon--pro     { background: var(--academy-plan-pro-icon-bg);  color: var(--success); }
.page-xplore-academy .pacote-card__icon--expert  { background: var(--accent-purple-15);  color: var(--palette-solid-a855f7); }

.page-xplore-academy .pacote-card__name {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 2px 0;
  letter-spacing: 0;
  line-height: 1;
}

.page-xplore-academy .pacote-card__tag {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--surface-tint-55-b);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
}

/* ---- Billing Toggle ---- */
.page-xplore-academy .pacote-billing-toggle {
  display: flex;
  margin: 0 24px 20px;
  background: var(--surface-tint-4);
  border-radius: 10px;
  border: 1px solid var(--border-default);
  overflow: hidden;
  position: relative;
  z-index: 5;
}

.page-xplore-academy .pacote-toggle__btn {
  flex: 1;
  padding: 8px 6px;
  border: none;
  background: none;
  color: var(--surface-tint-40-d);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: var(--tint-amber-30);
}

.page-xplore-academy .pacote-toggle__btn--active {
  background: var(--academy-legacy-marquee-track-bg);
  color: var(--surface-solid-f59e0b);
}

.page-xplore-academy .pacote-toggle__save {
  font-size: 0.6rem;
  font-weight: 700;
  padding: 1px 5px;
  background: var(--surface-solid-f59e0b);
  color: var(--primary-dark);
  border-radius: 4px;
  line-height: 1.4;
}

/* ---- Pricing Block ---- */
.page-xplore-academy .pacote-card__pricing {
  padding: 0;
  text-align: left;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--border-default);
}

.page-xplore-academy .pacote-card:not(.pacote-card--featured) .pacote-card__pricing {
  padding-bottom: 16px;
}

.page-xplore-academy .pacote-card__price {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 3px;
  margin-bottom: 6px;
}

.page-xplore-academy .pacote-card__currency {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--surface-tint-55-b);
  align-self: flex-start;
  margin-top: 6px;
}

.page-xplore-academy .pacote-card__amount {
  font-size: 2.3rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: -0.02em;
}

.page-xplore-academy .pacote-card--featured .pacote-card__amount {
  font-size: 2.55rem;
  font-weight: 900;
  /* Flat (no gradients): --academy-pacote-amount-gradient is already a
     flat color (token-layer flattening); this just drops the now-
     vestigial clip trick. AA verified >= 4.5:1 against
     --academy-pacote-featured-bg in both themes (11.85:1 dark, 6.71:1
     light). */
  color: var(--academy-pacote-amount-gradient);
}

.page-xplore-academy .pacote-card__period {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--surface-tint-50-d);
}

.page-xplore-academy .pacote-card__billing-note {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--surface-tint-50-d);
  background: none;
  padding: 0;
  margin: 0;
  line-height: 1.3;
}

.page-xplore-academy .pacote-card__billing-note--placeholder {
  visibility: hidden;
}

/* ---- Description ---- */
.page-xplore-academy .pacote-card__description {
  padding: 0 24px;
  font-size: 0.82rem;
  color: var(--surface-tint-40-d);
  line-height: 1.55;
  text-align: center;
  margin-bottom: 16px;
}

/* ---- CTA ---- */
.page-xplore-academy .pacote-card__cta-area {
  padding: 0;
  margin-top: auto;
}

.page-xplore-academy .pacote-card:not(.pacote-card--featured) .pacote-card__cta-area {
  padding: 0;
}

.page-xplore-academy .pacote-card__cta {
  display: block;
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.85rem;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  margin-bottom: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

/* Starter: outline cyan */
.page-xplore-academy .pacote-card__cta--starter {
  background: var(--accent-cyan-8);
  border: 1px solid var(--accent-cyan-bright-50);
  color: var(--surface-solid-22d3ee);
}
.page-xplore-academy .pacote-card__cta--starter:hover {
  background: var(--accent-cyan-bright-18);
  border-color: var(--accent-cyan-bright-80);
  color: var(--academy-plan-starter-cta-text-hover);
  transform: translateY(-2px);
}

/* Pro: gradient verde (destaque) */
.page-xplore-academy .pacote-card__cta--pro {
  background: var(--success);
  color: var(--text-primary);
  border: none;
  box-shadow: var(--academy-plan-pro-cta-shadow);
}
.page-xplore-academy .pacote-card__cta--pro:hover {
  transform: translateY(-2px);
  box-shadow: var(--academy-plan-pro-cta-shadow-hover);
  filter: brightness(1.06);
  color: var(--text-primary);
}

/* Expert: outline purple */
.page-xplore-academy .pacote-card__cta--expert {
  background: var(--accent-purple-8);
  border: 1px solid var(--accent-purple-50);
  color: var(--surface-solid-c084fc);
}
.page-xplore-academy .pacote-card__cta--expert:hover {
  background: var(--accent-purple-15);
  border-color: var(--accent-purple-80);
  color: var(--surface-solid-d8b4fe);
  transform: translateY(-2px);
}

/* Trust signals: linha unica abaixo do grid de cards */
.page-xplore-academy .planos-trust {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 28px auto 0;
  flex-wrap: wrap;
}

.page-xplore-academy .planos-trust span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--surface-tint-55-b);
  white-space: nowrap;
}

.page-xplore-academy .planos-trust i {
  font-size: 0.78rem;
  opacity: 0.9;
}

.page-xplore-academy .planos-trust i.fa-shield-alt { color: var(--academy-emerald-tint-85); }
.page-xplore-academy .planos-trust i.fa-ban        { color: var(--surface-tint-40-d); }

.page-xplore-academy .planos-trust__sep {
  color: var(--academy-ink-25);
  font-weight: 700;
}

/* ===============================
   MARQUEE BANNER
   =============================== */
.page-xplore-academy .discount-marquee-wrapper {
  margin-top: 60px;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  background: var(--action-primary);
  color: var(--background-surface);
  padding: 8px 0;
  position: relative;
  display: flex;
  white-space: nowrap;
}

.page-xplore-academy .discount-marquee {
  display: flex;
  width: max-content;
  animation: marquee-scroll 50s linear infinite;
}

.page-xplore-academy .discount-marquee:hover {
  animation-play-state: paused;
}

.page-xplore-academy .discount-marquee span {
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0 40px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.page-xplore-academy .discount-marquee span strong {
  font-weight: 800;
}

.page-xplore-academy .coupon-highlight {
  background: var(--primary-dark);
  color: var(--pure-white);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.9rem;
  letter-spacing: 1px;
}

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---- Pacotes Responsive ---- */
@media (max-width: 1024px) {
  .page-xplore-academy .pacotes-grid {
    grid-template-columns: 1fr 1.05fr 1fr;
    gap: 14px;
  }
  .page-xplore-academy .pacote-card { padding: 20px 14px 18px; }
  .page-xplore-academy .pacote-card--featured { padding: 24px 16px 20px; }
}

@media (max-width: 768px) {
  .page-xplore-academy .pacotes-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 480px;
  }
  /* Pro vai pro topo em mobile */
  .page-xplore-academy .pacote-card--featured { order: -1; }
  .page-xplore-academy .pacote-card__amount { font-size: 2rem; }
  .page-xplore-academy .pacotes-titulo { font-size: 1.7rem; }
  .page-xplore-academy .pacotes-eyebrow { font-size: 0.65rem; }
}

/* ===============================
   INSTITUCIONAL SECTION
   =============================== */
.page-xplore-academy .institucional-wrapper {
  max-width: 960px;
  margin: 0 auto;
}

.page-xplore-academy .institucional-card {
  position: relative;
  background: var(--surface-tint-4);
  border: 1px solid var(--border-default);
  border-radius: 16px;
  padding: 40px 48px;
  overflow: visible;
}

.page-xplore-academy .institucional-badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 18px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  border-radius: 20px;
  white-space: nowrap;
  z-index: 2;
  background: var(--action-primary);
  color: var(--background-surface);
}

.page-xplore-academy .institucional-content {
  display: flex;
  align-items: center;
  gap: 48px;
}

.page-xplore-academy .institucional-info {
  flex: 1;
}

.page-xplore-academy .institucional-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.page-xplore-academy .institucional-description {
  font-size: 0.9rem;
  color: var(--surface-tint-55-b);
  line-height: 1.6;
  margin-bottom: 20px;
}

.page-xplore-academy .institucional-benefits {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.page-xplore-academy .institucional-benefits li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--surface-tint-70-d);
  line-height: 1.5;
}

.page-xplore-academy .institucional-benefits li i {
  color: var(--action-primary);
  font-size: 0.8rem;
  flex-shrink: 0;
  width: 18px;
  text-align: center;
}

.page-xplore-academy .institucional-cta {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.page-xplore-academy .institucional-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border: 1.5px solid var(--action-primary);
  border-radius: 10px;
  color: var(--action-primary);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.page-xplore-academy .institucional-btn:hover {
  background: var(--tint-cyan-10);
  transform: translateY(-2px);
  box-shadow: var(--academy-institucional-btn-shadow-hover);
  color: var(--action-primary);
}

.page-xplore-academy .institucional-email {
  font-size: 0.78rem;
  color: var(--surface-tint-40-d);
}

@media (max-width: 768px) {
  .page-xplore-academy .institucional-card {
    padding: 32px 24px;
  }
  .page-xplore-academy .institucional-content {
    flex-direction: column;
    gap: 24px;
    text-align: center;
  }
  .page-xplore-academy .institucional-benefits li {
    justify-content: center;
  }
  .page-xplore-academy .institucional-title {
    font-size: 1.2rem;
  }
}

.page-xplore-academy .urgency-text {
  color: var(--palette-amber-400);
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  text-align: center;
  letter-spacing: 0.02em;
  animation: urgencyPulse 3s ease-in-out infinite;
}

@keyframes urgencyPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

@media (prefers-reduced-motion: reduce) {
  .page-xplore-academy .urgency-text {
    animation: none;
  }
}

/* ===============================
   ALTERNATIVE SUGGESTION (Improved)
   =============================== */

.page-xplore-academy .alternative-link {
  color: var(--text-link);
  text-decoration: none;
  transition: color 0.2s ease;
  display: inline-block;
}

.page-xplore-academy .alternative-link small {
  color: var(--text-link);
  font-size: 0.8rem;
  font-weight: 500;
}

.page-xplore-academy .alternative-link:hover {
  color: var(--text-link-hover);
  text-decoration: none;
}

.page-xplore-academy .alternative-link:hover small {
  color: var(--text-link-hover);
}

/* ===============================
   FAQ SECTION
   =============================== */

.page-xplore-academy .section-faq {
  background: var(--background-page);
  color: var(--text-primary);
  padding-top: 80px;
  padding-bottom: 80px;
}

.page-xplore-academy .faq-header {
  text-align: center;
  margin-bottom: 3rem;
}

.page-xplore-academy .faq-title {
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 700;
  /* Flat (no gradients): see .value-title above for the AA figures. */
  color: var(--action-primary);
  margin-bottom: 0.75rem;
  line-height: 1.2;
}

.page-xplore-academy .faq-subtitle {
  font-size: 1.15rem;
  color: var(--text-secondary);
  font-weight: 400;
}

.page-xplore-academy .faq-list {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.page-xplore-academy .faq-item {
  background: var(--surface-tint-4);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.page-xplore-academy .faq-item[open] {
  border-color: var(--tint-cyan-30);
  background: var(--tint-cyan-10);
}

.page-xplore-academy .faq-question {
  padding: 1.25rem 1.5rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: color 0.2s ease;
  user-select: none;
}

.page-xplore-academy .faq-question::-webkit-details-marker {
  display: none;
}

.page-xplore-academy .faq-question::after {
  content: '+';
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--text-link);
  flex-shrink: 0;
  margin-left: 1rem;
  transition: transform 0.3s ease;
  line-height: 1;
}

.page-xplore-academy .faq-item[open] .faq-question::after {
  content: '\2212';
  transform: rotate(0deg);
}

.page-xplore-academy .faq-question:hover {
  color: var(--text-link);
}

.page-xplore-academy .faq-answer {
  padding: 0 1.5rem 1.25rem;
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.7;
  margin: 0;
}

.page-xplore-academy .faq-cta {
  text-align: center;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border-default);
}

.page-xplore-academy .faq-cta-text {
  color: var(--text-secondary);
  font-size: 1.1rem;
  margin-bottom: 1rem;
  font-weight: 500;
}

/* Secondary action next to the primary signup CTA: outline ghost (same
   recipe as the hero's .btn-secondary-xplore). It was ALSO solid cyan,
   which made the secondary louder than the primary beside it - two solid
   buttons compete, one obvious action converts. */
.page-xplore-academy .faq-cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 40px;
  background: transparent;
  border: 1px solid var(--action-primary);
  color: var(--action-primary);
  text-decoration: none;
  border-radius: 10px;
  font-size: 1.05rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

.page-xplore-academy .faq-cta-button:hover {
  background: var(--action-primary);
  transform: translateY(-2px);
  color: var(--pure-white);
  text-decoration: none;
}

@media (max-width: 768px) {
  .page-xplore-academy .section-faq {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .page-xplore-academy .faq-question {
    padding: 1rem 1.25rem;
    font-size: 0.95rem;
  }

  .page-xplore-academy .faq-answer {
    padding: 0 1.25rem 1rem;
    font-size: 0.95rem;
  }

  .page-xplore-academy .faq-cta-button {
    padding: 14px 32px;
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .page-xplore-academy .faq-question {
    padding: 0.875rem 1rem;
    font-size: 0.9rem;
  }

  .page-xplore-academy .faq-answer {
    padding: 0 1rem 0.875rem;
    font-size: 0.9rem;
  }
}

/* ===============================
   HERO CTA GROUP + MICROCOPY
   =============================== */

.page-xplore-academy .hero-cta-group {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.page-xplore-academy .hero-microcopy {
  font-size: 0.9rem;
  color: var(--surface-solid-94a3b8);
  margin: 0;
  font-weight: 400;
  letter-spacing: 0.01em;
}

@media (max-width: 480px) {
  .page-xplore-academy .hero-cta-group {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }

  .page-xplore-academy .hero-microcopy {
    font-size: 0.8rem;
  }
}

/* ===============================
   PARA QUEM É (AUDIENCE SECTION)
   =============================== */

.page-xplore-academy .section-audience {
  background: var(--background-elevated);
  color: var(--text-primary);
  padding-top: 80px;
  padding-bottom: 80px;
  position: relative;
  overflow: hidden;
}

.page-xplore-academy .audience-header {
  text-align: center;
  margin-bottom: 3.5rem;
}

.page-xplore-academy .audience-title {
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 700;
  /* Flat (no gradients): see .value-title above for the AA figures. */
  color: var(--action-primary);
  margin-bottom: 0;
  line-height: 1.2;
}

.page-xplore-academy .audience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}

@media (max-width: 991px) {
  .page-xplore-academy .audience-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.page-xplore-academy a.audience-card {
  text-decoration: none;
  color: inherit;
  display: block;
  cursor: pointer;
}

.page-xplore-academy .audience-card {
  background: var(--surface-tint-4);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  padding: 2rem 1.5rem;
  text-align: center;
  transition: all 0.3s ease;
}

.page-xplore-academy .audience-card:hover {
  background: var(--background-interactive);
  border-color: var(--tint-cyan-30);
  transform: translateY(-4px);
}

.page-xplore-academy .audience-icon {
  margin-bottom: 1.25rem;
  text-align: center;
}

.page-xplore-academy .audience-icon .fas,
.page-xplore-academy .audience-icon .fa {
  font-size: 2.2rem;
  color: var(--text-link);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: var(--tint-cyan-10);
  border-radius: 16px;
  border: 2px solid var(--tint-cyan-20);
  width: 70px;
  height: 70px;
  box-sizing: border-box;
}

.page-xplore-academy .audience-card-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.page-xplore-academy .audience-card-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}

@media (max-width: 768px) {
  .page-xplore-academy .section-audience {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .page-xplore-academy .audience-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* ===============================
   SOCIAL PROOF / CREDIBILIDADE
   =============================== */

/* --- Platform Metrics Bar --- */
.page-xplore-academy .platform-metrics-bar {
  background: var(--background-surface);
  border-bottom: 1px solid var(--tint-cyan-20);
  border-top: 1px solid var(--tint-cyan-20);
  padding: 2rem 0;
}

.page-xplore-academy .metrics-grid {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  justify-content: center;
  margin: 0 auto;
  max-width: 1100px;
}

.page-xplore-academy .metric-item {
  align-items: center;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  padding: 0.5rem 1rem;
  text-align: center;
}

.page-xplore-academy .metric-number {
  /* Flat (no gradients): see .value-title above for the AA figures. */
  color: var(--action-primary);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.page-xplore-academy .metric-label {
  color: var(--surface-solid-94a3b8);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.page-xplore-academy .metric-divider {
  align-self: stretch;
  /* Flat (no gradients): a fade-in/fade-out line has no flat
     equivalent, so this decorative divider (no text) is now solid. */
  background: var(--tint-cyan-30);
  flex-shrink: 0;
  width: 1px;
}

@media (max-width: 900px) {
  .page-xplore-academy .metrics-grid {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .page-xplore-academy .metric-item {
    flex: 1 1 40%;
  }
  .page-xplore-academy .metric-divider {
    display: none;
  }
}

@media (max-width: 480px) {
  .page-xplore-academy .platform-metrics-bar {
    padding: 1.25rem 0;
  }
  .page-xplore-academy .metrics-grid {
    flex-direction: column;
    gap: 0.75rem;
  }
  .page-xplore-academy .metric-item {
    flex: none;
    padding: 0.3rem 0;
  }
}

.page-xplore-academy .section-social-proof {
  background: var(--background-page);
  color: var(--text-primary);
  padding-top: 80px;
  padding-bottom: 80px;
}

.page-xplore-academy .proof-header {
  text-align: center;
  margin-bottom: 3rem;
}

.page-xplore-academy .proof-title {
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 700;
  /* Flat (no gradients): see .value-title above for the AA figures. */
  color: var(--action-primary);
  margin-bottom: 1rem;
  line-height: 1.2;
}

.page-xplore-academy .proof-subtitle {
  font-size: 1.1rem;
  color: var(--text-secondary);
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.6;
}

.page-xplore-academy .proof-visual {
  margin-bottom: 2rem;
}

.page-xplore-academy .proof-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
}

/* IMAGE PLACEHOLDER (black box) */
.page-xplore-academy .image-placeholder {
  background: var(--academy-legacy-placeholder-bg);
  border-radius: 12px;
  padding: 4rem 2rem;
  text-align: center;
  font-style: italic;
  border: 1px dashed var(--academy-legacy-placeholder-border);
}

.page-xplore-academy .image-placeholder p {
  margin: 0;
  color: var(--academy-legacy-placeholder-text);
  font-size: 0.95rem;
}

@media (max-width: 768px) {
  .page-xplore-academy .section-social-proof {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .page-xplore-academy .proof-grid {
    grid-template-columns: 1fr;
  }

  .page-xplore-academy .image-placeholder {
    padding: 3rem 1.5rem;
  }
}

/* Touch devices - audience and social proof */
@media (hover: none), (pointer: coarse) {
  .page-xplore-academy .audience-card:hover {
    transform: none !important;
  }
}
/* ============================================================
   Seção Ferramentas: layout compacto agrupado por plano
   ============================================================ */

.page-xplore-academy .tools-plan-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 32px;
}

.page-xplore-academy .tools-plan-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.page-xplore-academy .tools-plan-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 100px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Per-plan identity, matching the pricing cards below and the sitewide
   plan palette: Starter = cyan, Pro = green, Expert = purple. (This
   section used to run gray/cyan/green, one hue off across the board.) */
.page-xplore-academy .tools-plan-badge--starter {
  background: var(--tint-cyan-12);
  color: var(--text-link);
  border: 1px solid var(--tint-cyan-20);
}

.page-xplore-academy .tools-plan-badge--pro {
  background: var(--tint-green-6);
  color: var(--text-link-hover);
  border: 1px solid var(--tint-green-18);
}

.page-xplore-academy .tools-plan-badge--expert {
  background: var(--accent-purple-8);
  color: var(--academy-plan-expert-text);
  border: 1px solid var(--accent-purple-15);
}

.page-xplore-academy .tools-plan-divider {
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}

.page-xplore-academy .tools-plan-divider--starter {
  background: var(--tint-cyan-12);
}

.page-xplore-academy .tools-plan-divider--pro {
  background: var(--tint-green-10-b);
}

.page-xplore-academy .tools-plan-divider--expert {
  background: var(--accent-purple-15);
}

.page-xplore-academy .tools-plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.page-xplore-academy .tool-card-compact {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  padding: 24px 16px;
  background: var(--surface-tint-4);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  min-height: 110px;
}

.page-xplore-academy .tool-card-compact--starter {
  background: var(--tint-cyan-4);
  border-color: var(--tint-cyan-20);
}

.page-xplore-academy .tool-card-compact--pro {
  background: var(--tint-green-3);
  border-color: var(--tint-green-10-b);
}

.page-xplore-academy .tool-card-compact--expert {
  background: var(--academy-plan-expert-tint-bg);
  border-color: var(--accent-purple-15);
}

.page-xplore-academy .tool-card-compact__icon {
  font-size: 22px;
  flex-shrink: 0;
}

/* Icons carry each plan's accent too (they inherited a uniform link
   cyan before, regardless of plan). */
.page-xplore-academy .tool-card-compact--starter .tool-card-compact__icon {
  color: var(--text-link);
}

.page-xplore-academy .tool-card-compact--pro .tool-card-compact__icon {
  color: var(--text-link-hover);
}

.page-xplore-academy .tool-card-compact--expert .tool-card-compact__icon {
  color: var(--academy-plan-expert-text);
}

.page-xplore-academy .tool-card-compact__name {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.3;
}

.page-xplore-academy .tool-card-compact__sub {
  color: var(--academy-slate-ink);
  font-size: 11px;
  margin-top: 3px;
}

.page-xplore-academy .tool-card-compact__qualifier {
  opacity: .65;
  font-weight: 400;
}

/* ============================================================
   Toggle mensal/anual: planos de assinatura
   ============================================================ */

.page-xplore-academy .plan-toggle {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
  gap: 4px;
  margin: 0 auto 32px;
  background: var(--background-interactive);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  padding: 5px;
  width: fit-content;
  isolation: isolate;
}

.page-xplore-academy .plan-toggle__btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 26px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--surface-solid-b7c4d6);
  background: transparent;
  border: none;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.page-xplore-academy .plan-toggle__btn > * {
  pointer-events: none;
}

.page-xplore-academy .plan-toggle__btn:hover:not(.plan-toggle__btn--active) {
  background: var(--border-subtle);
  color: var(--text-primary);
}

.page-xplore-academy .plan-toggle__btn:active:not(.plan-toggle__btn--active) {
  background: var(--border-default);
}

.page-xplore-academy .plan-toggle__btn--active {
  background: var(--action-primary);
  color: var(--pure-white);
  box-shadow: 0 2px 14px var(--tint-cyan-40);
}

.page-xplore-academy .plan-toggle__save {
  font-size: 10px;
  font-weight: 800;
  background: var(--pure-white);
  color: var(--palette-emerald-700);
  padding: 3px 8px;
  border-radius: 5px;
  letter-spacing: 0.04em;
  line-height: 1;
  transition: background 0.18s ease, color 0.18s ease;
}

.page-xplore-academy .plan-toggle__btn--active .plan-toggle__save {
  background: var(--palette-solid-04231c);
  color: var(--palette-solid-34d399);
}

/* ============================================================
   Lista de features nos cards de plano
   ============================================================ */

.page-xplore-academy .plan-features-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.page-xplore-academy .plan-features-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--surface-tint-78-b);
  line-height: 1.4;
}

.page-xplore-academy .plan-features-list li i {
  margin-top: 3px;
  font-size: 0.7rem;
  flex-shrink: 0;
  margin-right: 0 !important;
  /* INLINE-STYLE-SWEEP-2: --plan-color is set inline on the ancestor
     .pacote-card from plan.color (a per-instance data value: the plan's
     own brand hue, currently #06b6d4/#10b981/#a855f7, exact matches for
     --academy-plan-starter/-pro/-expert, but sourced dynamically from
     Python so kept as a custom property rather than assumed). */
  color: var(--plan-color, var(--action-primary));
}

/* ============================================================
   Responsivo: mobile 1 coluna
   ============================================================ */

@media (max-width: 640px) {
  .page-xplore-academy .tools-plan-grid {
    grid-template-columns: 1fr 1fr;
  }
}