/* =========================================================
   ISABLACK ENSINA — TEMA DE CURSOS
   Dark Teal × Canary Yellow × Branco
   Design profissional com tipografia técnica e gradiente metálico
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Azeret+Mono:wght@200;300;400;500;600&display=swap');

/* ===========================================================
   VARIÁVEIS DO SISTEMA DE CORES
   =========================================================== */
body.page-ensina-isablack {
  --ec-teal:          #0D4753;       /* DARK TEAL — base do fundo */
  --ec-teal-dark:     #082E38;       /* Teal mais escuro — sombras e fundos */
  --ec-teal-mid:      #0F5562;       /* Teal médio — variação de gradiente */
  --ec-teal-light:    #135D6C;       /* Teal mais claro — destaque sutil */
  --ec-yellow:        #F5FF66;       /* CANARY YELLOW — cor de chamada e destaque */
  --ec-yellow-dim:    rgba(245, 255, 102, 0.75); /* Yellow suavizado */
  --ec-white:         #FFFFFF;       /* Branco puro — para textos e superfícies */
  --ec-white-80:      rgba(255, 255, 255, 0.80);
  --ec-white-55:      rgba(255, 255, 255, 0.55);
  --ec-white-30:      rgba(255, 255, 255, 0.30);
  --ec-white-10:      rgba(255, 255, 255, 0.08);

  /* GRADIENTE METÁLICO DE FUNDO — efeito acetinado profissional */
  --ec-gradient-bg:
    radial-gradient(ellipse at 15% 10%, rgba(19, 93, 108, 0.9) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 90%, rgba(8, 46, 56, 1) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(15, 85, 98, 0.4) 0%, transparent 70%),
    linear-gradient(155deg,
      #0A3540 0%,
      #0D4753 25%,
      #0F5562 50%,
      #0D4753 72%,
      #082E38 100%
    );

  background: var(--ec-gradient-bg) !important;
  min-height: 100vh !important;
  color: var(--ec-white) !important;
}

/* ===========================================================
   TIPOGRAFIA — AZERET MONO EXTRALIGHT (200)
   letter-spacing: -0.075em | line-height: 1.25
   =========================================================== */
body.page-ensina-isablack,
body.page-ensina-isablack h1,
body.page-ensina-isablack h2,
body.page-ensina-isablack h3,
body.page-ensina-isablack h4,
body.page-ensina-isablack h5,
body.page-ensina-isablack h6,
body.page-ensina-isablack p,
body.page-ensina-isablack a,
body.page-ensina-isablack span,
body.page-ensina-isablack li,
body.page-ensina-isablack ul,
body.page-ensina-isablack ol,
body.page-ensina-isablack button,
body.page-ensina-isablack input,
body.page-ensina-isablack label,
body.page-ensina-isablack div,
body.page-ensina-isablack article,
body.page-ensina-isablack section,
body.page-ensina-isablack nav,
body.page-ensina-isablack footer,
body.page-ensina-isablack header,
body.page-ensina-isablack strong,
body.page-ensina-isablack small,
body.page-ensina-isablack time,
body.page-ensina-isablack * {
  font-family: 'Azeret Mono', monospace !important;
  font-weight: 200 !important;
  letter-spacing: -0.05em !important;
  line-height: 1.25 !important;
}

/* Exceções: elementos que precisam de peso maior para leitura */
body.page-ensina-isablack h1,
body.page-ensina-isablack h2,
body.page-ensina-isablack h3 {
  font-weight: 300 !important;
  letter-spacing: -0.06em !important;
}

body.page-ensina-isablack strong,
body.page-ensina-isablack .udemy-badge-bestseller,
body.page-ensina-isablack .catalog-tag,
body.page-ensina-isablack .btn-udemy-buy,
body.page-ensina-isablack .btn-student-area,
body.page-ensina-isablack .filter-btn.active {
  font-weight: 400 !important;
}

/* ===========================================================
   LOADER — Vinheta de carregamento
   =========================================================== */
body.page-ensina-isablack .loader {
  background: var(--ec-gradient-bg) !important;
}

/* Logo no loader colorida de amarelo */
body.page-ensina-isablack .logoensina2-loader-img {
  filter: brightness(0) saturate(100%) invert(96%) sepia(70%) saturate(1000%) hue-rotate(14deg) brightness(104%) contrast(98%) !important;
}

body.page-ensina-isablack .loader-bar {
  background: rgba(245, 255, 102, 0.15) !important;
}

body.page-ensina-isablack .loader-bar::after {
  background: linear-gradient(90deg,
    rgba(245, 255, 102, 0.5),
    #F5FF66,
    rgba(245, 255, 102, 0.5)
  ) !important;
}

/* ===========================================================
   NAVEGAÇÃO
   =========================================================== */
body.page-ensina-isablack .ensina-nav-bar {
  background: rgba(8, 44, 52, 0.90) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(245, 255, 102, 0.18) !important;
  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.4) !important;
}

/* Logo no nav colorida de amarelo */
body.page-ensina-isablack .logoensina1-nav-img {
  filter: brightness(0) saturate(100%) invert(96%) sepia(70%) saturate(1000%) hue-rotate(14deg) brightness(104%) contrast(98%) !important;
}

body.page-ensina-isablack .ensina-nav-link {
  color: var(--ec-white-80) !important;
  transition: color 0.25s ease !important;
}

body.page-ensina-isablack .ensina-nav-link:hover,
body.page-ensina-isablack .ensina-nav-link.active {
  color: var(--ec-yellow) !important;
}

body.page-ensina-isablack .btn-student-area {
  background: var(--ec-yellow) !important;
  color: var(--ec-teal-dark) !important;
  border: none !important;
  box-shadow: 0 2px 14px rgba(245, 255, 102, 0.35) !important;
  transition: all 0.25s ease !important;
}

body.page-ensina-isablack .btn-student-area:hover {
  background: var(--ec-white) !important;
  color: var(--ec-teal-dark) !important;
  box-shadow: 0 4px 20px rgba(245, 255, 102, 0.5) !important;
}

body.page-ensina-isablack .nav-toggle span {
  background: var(--ec-yellow) !important;
}

/* Menu Mobile Drawer */
body.page-ensina-isablack .nav-mobile {
  background: var(--ec-teal-dark) !important;
  border-left: 1px solid rgba(245, 255, 102, 0.15) !important;
}

body.page-ensina-isablack .nav-mobile-close-btn {
  color: var(--ec-white-80) !important;
  border: 1px solid var(--ec-white-30) !important;
}

body.page-ensina-isablack .nav-mobile-close-btn:hover {
  color: var(--ec-yellow) !important;
  border-color: rgba(245, 255, 102, 0.4) !important;
}

body.page-ensina-isablack .nav-mobile-link {
  color: var(--ec-white-80) !important;
  border-bottom: 1px solid var(--ec-white-10) !important;
  transition: all 0.2s ease !important;
}

body.page-ensina-isablack .nav-mobile-link:hover,
body.page-ensina-isablack .nav-mobile-link.active {
  color: var(--ec-yellow) !important;
  background: rgba(245, 255, 102, 0.05) !important;
}

body.page-ensina-isablack .nav-link-num {
  color: var(--ec-yellow) !important;
  opacity: 0.7;
}

body.page-ensina-isablack .nav-mobile-student-btn {
  background: var(--ec-yellow) !important;
  color: var(--ec-teal-dark) !important;
}

/* ===========================================================
   HERO SECTION — IMAGEM TELA CHEIA ABAIXO DO MENU
   =========================================================== */
body.page-ensina-isablack .ensina-hero-section {
  position: relative !important;
  width: 100% !important;
  /* Altura = 100vh menos a altura do nav (aprox. 72px) */
  height: calc(100vh - 72px) !important;
  margin-top: 72px !important;        /* empurra para baixo do menu fixo */
  overflow: hidden !important;
  background: var(--ec-teal-dark) !important;
  border-bottom: 1px solid rgba(245, 255, 102, 0.12) !important;
}

/* Wrapper da imagem — ocupa todo o hero */
body.page-ensina-isablack .ensina-hero-bg-wrapper {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Imagem de fundo — cobre tudo, centralizada */
body.page-ensina-isablack .ensina-hero-bg-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  filter: none !important;             /* sem filtro amarelo sobre a foto */
}

/* Overlay removido — imagem aparece limpa */
body.page-ensina-isablack .ensina-hero-overlay {
  display: none !important;
}

/* Conteúdo centralizado sobre a imagem */
body.page-ensina-isablack .ensina-hero-centered-content {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  padding-bottom: 48px !important;
  z-index: 2 !important;
}

body.page-ensina-isablack .btn-hero-minimal {
  background: transparent !important;
  color: var(--ec-yellow) !important;
  border: 1.5px solid rgba(245, 255, 102, 0.5) !important;
  transition: all 0.25s ease !important;
}

body.page-ensina-isablack .btn-hero-minimal:hover {
  background: var(--ec-yellow) !important;
  color: var(--ec-teal-dark) !important;
  border-color: var(--ec-yellow) !important;
  box-shadow: 0 4px 20px rgba(245, 255, 102, 0.4) !important;
}

/* ===========================================================
   SEÇÃO DE CATÁLOGO / CURSOS
   =========================================================== */
body.page-ensina-isablack .ensina-catalog-section {
  background: transparent !important;
}

body.page-ensina-isablack .catalog-tag {
  color: var(--ec-yellow) !important;
  opacity: 0.85;
  letter-spacing: 0.04em !important;
}

body.page-ensina-isablack .catalog-title {
  color: var(--ec-white) !important;
}

/* ===========================================================
   FILTROS DE CATEGORIA
   =========================================================== */
body.page-ensina-isablack .filter-btn {
  background: var(--ec-white-10) !important;
  color: var(--ec-white-55) !important;
  border: 1px solid var(--ec-white-30) !important;
  transition: all 0.22s ease !important;
}

body.page-ensina-isablack .filter-btn:hover {
  background: rgba(245, 255, 102, 0.10) !important;
  color: var(--ec-yellow) !important;
  border-color: rgba(245, 255, 102, 0.4) !important;
}

body.page-ensina-isablack .filter-btn.active {
  background: var(--ec-yellow) !important;
  color: var(--ec-teal-dark) !important;
  border-color: var(--ec-yellow) !important;
  box-shadow: 0 2px 14px rgba(245, 255, 102, 0.35) !important;
}

/* ===========================================================
   CARDS DE CURSO (estilo Udemy)
   =========================================================== */
body.page-ensina-isablack .udemy-course-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
  color: var(--ec-teal-dark) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
  overflow: hidden !important;
}

body.page-ensina-isablack .udemy-course-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45) !important;
}

/* Corpo do card — textos escuros sobre fundo branco */
body.page-ensina-isablack .udemy-card-body {
  background: #FFFFFF !important;
}

body.page-ensina-isablack .udemy-instructor-tag {
  color: var(--ec-teal) !important;
  opacity: 0.75;
}

body.page-ensina-isablack .udemy-course-title {
  color: var(--ec-teal-dark) !important;
}

body.page-ensina-isablack .udemy-rating-num {
  color: var(--ec-teal) !important;
}

body.page-ensina-isablack .udemy-stars {
  color: #DAA520 !important; /* Dourado para as estrelas */
}

body.page-ensina-isablack .udemy-students-count {
  color: rgba(13, 71, 83, 0.6) !important;
}

body.page-ensina-isablack .udemy-features-list li {
  color: rgba(13, 71, 83, 0.85) !important;
}

body.page-ensina-isablack .check-icon {
  color: var(--ec-teal) !important;
}

/* Área de preço no card */
body.page-ensina-isablack .udemy-price-container {
  background: rgba(13, 71, 83, 0.05) !important;
  border-top: 1px solid rgba(13, 71, 83, 0.1) !important;
}

body.page-ensina-isablack .udemy-price-main {
  color: var(--ec-teal-dark) !important;
}

body.page-ensina-isablack .udemy-price-old {
  color: rgba(13, 71, 83, 0.45) !important;
}

body.page-ensina-isablack .udemy-discount-tag {
  background: var(--ec-yellow) !important;
  color: var(--ec-teal-dark) !important;
}

/* Botão principal do card — compra */
body.page-ensina-isablack .btn-udemy-buy {
  background: var(--ec-teal) !important;
  color: var(--ec-yellow) !important;
  border: none !important;
  box-shadow: 0 3px 14px rgba(13, 71, 83, 0.35) !important;
  transition: all 0.22s ease !important;
}

body.page-ensina-isablack .btn-udemy-buy:hover {
  background: var(--ec-teal-dark) !important;
  color: var(--ec-yellow) !important;
  box-shadow: 0 5px 22px rgba(13, 71, 83, 0.5) !important;
  transform: translateY(-1px) !important;
}

/* Botão secundário do card — ver ementa */
body.page-ensina-isablack .btn-udemy-details,
body.page-ensina-isablack .btn-saiba-mais {
  background: transparent !important;
  color: var(--ec-teal) !important;
  border: 1px solid rgba(13, 71, 83, 0.3) !important;
  transition: all 0.22s ease !important;
}

body.page-ensina-isablack .btn-udemy-details:hover,
body.page-ensina-isablack .btn-saiba-mais:hover {
  background: var(--ec-teal) !important;
  color: var(--ec-yellow) !important;
  border-color: var(--ec-teal) !important;
}

/* Badges sobre a imagem do card */
body.page-ensina-isablack .udemy-badge-bestseller {
  background: var(--ec-yellow) !important;
  color: var(--ec-teal-dark) !important;
}

body.page-ensina-isablack .udemy-badge-hours {
  background: rgba(8, 46, 56, 0.85) !important;
  color: var(--ec-white) !important;
  backdrop-filter: blur(6px) !important;
}

/* ===========================================================
   RODAPÉ
   =========================================================== */
body.page-ensina-isablack footer {
  background: rgba(6, 32, 38, 0.95) !important;
  color: var(--ec-white-55) !important;
  border-top: 1px solid rgba(245, 255, 102, 0.15) !important;
}

body.page-ensina-isablack footer a {
  color: var(--ec-yellow-dim) !important;
  transition: color 0.22s ease, opacity 0.22s ease !important;
}

body.page-ensina-isablack footer a:hover {
  color: var(--ec-yellow) !important;
  opacity: 1 !important;
}

/* ===========================================================
   OVERRIDE DE TEXTOS NAS SEÇÕES CLARAS (Timeline, Testimonials, FAQ)
   =========================================================== */
body.page-ensina-isablack .ensina-timeline-section .catalog-tag,
body.page-ensina-isablack .ensina-testimonials-section .catalog-tag,
body.page-ensina-isablack .ensina-faq-section .catalog-tag {
  color: var(--ec-teal) !important;
  opacity: 0.95 !important;
}

body.page-ensina-isablack .ensina-timeline-section .catalog-title,
body.page-ensina-isablack .ensina-testimonials-section .catalog-title,
body.page-ensina-isablack .ensina-faq-section .catalog-title {
  color: var(--ec-teal) !important;
}