/* ============================================================
   Paleta y tipografía — inspirado en Coursera (azul + blanco)
   ============================================================ */
:root {
  --color-primary: #10B981;
  --color-primary-dark: #059669;
  --color-primary-soft: #ecfdf5;
  --color-accent: #6366F1;
  --color-accent-soft: #eef2ff;
  --color-text: #1E293B;
  --color-text-muted: #64748b;
  --color-bg-soft: #F1F5F9;
  --color-border: #e2e8f0;
  --color-navbar-bg: #0F172A;
  --shadow-hover: 0 20px 40px rgba(15, 23, 42, 0.10);
  --radius-card: 16px;
  --radius-btn: 12px;
  --mc-navy-900:#0B1F3A;
  --mc-navy-800:#0F2C59;
  --mc-navy-700:#17407D;
  --mc-teal-600:#0F9D77;
  --mc-teal-100:#DFF3EC;
  --mc-coral-500:#D85A30;
  --mc-bg-alt:#F6F7F9;
  --mc-ink:#14213D;
  --mc-muted:#5C6B85;
  --mc-line:#E7E9EF;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: #FFFFFF;
  background-image:
    radial-gradient(ellipse at 0% 0%, rgba(16, 185, 129, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 100%, rgba(99, 102, 241, 0.05) 0%, transparent 50%);
  background-attachment: fixed;
  color: var(--color-text);
}

/* ---------- Navbar blanco, fijo ---------- */
.navbar-mc {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.navbar-mc__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.25rem;
  height: 60px;
}
.navbar-mc__left {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}
.navbar-mc__brand {
  font-weight: 800;
  font-size: 1rem;
  color: var(--color-navbar-bg) !important;
  text-decoration: none;
  white-space: nowrap;
  margin-right: 0.5rem;
}
.navbar-mc__link {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--color-text) !important;
  text-decoration: none;
  padding: 0.4rem 0.7rem;
  border-radius: 6px;
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}
.navbar-mc__link:hover {
  background: var(--color-bg-soft);
  color: var(--color-navbar-bg) !important;
}
.navbar-mc__caret {
  font-size: 0.7rem;
  opacity: 0.6;
}
.navbar-mc__search {
  flex: 1;
  display: flex;
  align-items: center;
  max-width: 520px;
  margin: 0 auto;
  position: relative;
}
.navbar-mc__search-input {
  width: 100%;
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  padding: 0.45rem 3rem 0.45rem 1.1rem;
  font-size: 0.88rem;
  outline: none;
  transition: border-color 0.15s;
}
.navbar-mc__search-input:focus {
  border-color: var(--color-primary);
}
.navbar-mc__search-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.navbar-mc__search-btn:hover {
  background: var(--color-navbar-bg);
}
.navbar-mc__right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.navbar-mc__icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text);
}
.navbar-mc__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-navbar-bg);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.navbar-mc__btn-register {
  background: var(--color-primary);
  color: #fff !important;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.4rem 1rem;
  text-decoration: none;
  white-space: nowrap;
}
.navbar-mc__btn-register:hover {
  background: var(--color-navbar-bg);
}
.navbar-mc__dropdown-wrap {
  position: relative;
}
.navbar-mc__mega {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  min-width: 600px;
  z-index: 999;
}
.navbar-mc__mega.is-open {
  display: block;
}
.mega-cols {
  display: flex;
  gap: 0;
  padding: 1.25rem 1.5rem;
}
.mega-col {
  flex: 1;
  padding: 0 1rem;
  border-right: 1px solid var(--color-border);
}
.mega-col:first-child { padding-left: 0; }
.mega-col:last-child { border-right: none; padding-right: 0; }
.mega-col__title {
  display: block;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--color-navbar-bg) !important;
  text-decoration: none;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.mega-col__course {
  display: block;
  font-size: 0.82rem;
  color: var(--color-text) !important;
  text-decoration: none;
  padding: 0.2rem 0;
  line-height: 1.4;
}
.mega-col__course:hover {
  color: var(--color-primary) !important;
}
.mega-footer {
  border-top: 1px solid var(--color-border);
  padding: 0.75rem 1.5rem;
}
.mega-footer__link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-primary) !important;
  text-decoration: none;
}
.navbar-mc__dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  min-width: 260px;
  z-index: 999;
  overflow: hidden;
}
.navbar-mc__dropdown.is-open {
  display: block;
}
.dropdown-mc__header {
  padding: 1rem 1.25rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
}
.dropdown-mc__name {
  display: block;
  font-weight: 700;
  font-size: 0.92rem;
}
.dropdown-mc__email {
  display: block;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}
.dropdown-mc__item {
  display: block;
  padding: 0.6rem 1.25rem;
  font-size: 0.88rem;
  color: var(--color-text) !important;
  text-decoration: none;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
}
.dropdown-mc__item:hover {
  background: var(--color-bg-soft);
  color: var(--color-primary) !important;
}
.dropdown-mc__item--logout {
  color: #dc3545 !important;
}
.dropdown-mc__item--logout:hover {
  background: #fff5f5;
  color: #dc3545 !important;
}
.dropdown-mc__divider {
  height: 1px;
  background: var(--color-border);
  margin: 0.25rem 0;
}
.dropdown-mc__banner {
  display: block;
  margin: 0.5rem 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--color-primary-soft);
  border-radius: 8px;
  text-decoration: none;
  color: var(--color-navbar-bg) !important;
}
.dropdown-mc__banner strong {
  display: block;
  font-size: 0.85rem;
  margin-bottom: 0.2rem;
}
.dropdown-mc__banner span {
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

/* ---------- Botones estilo "pill" ---------- */
.btn-aula-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-btn);
  font-weight: 600;
  padding: 0.6rem 1.4rem;
  transition: all 0.3s ease-in-out;
}
.btn-aula-primary:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(16, 185, 129, 0.25);
}
.btn-aula-outline {
  border: 1.5px solid var(--color-border);
  color: var(--color-text);
  border-radius: var(--radius-btn);
  font-weight: 600;
  background: transparent;
  padding: 0.6rem 1.4rem;
  transition: all 0.3s ease-in-out;
}
.btn-aula-outline:hover {
  background: var(--color-bg-soft);
  border-color: var(--color-text);
  color: var(--color-text);
}
.btn-aula-navbar {
  background: #fff;
  color: var(--color-navbar-bg);
  border-radius: 999px;
  font-weight: 700;
  padding: 0.45rem 1.1rem;
}
.btn-aula-navbar:hover {
  background: var(--color-primary-soft);
  color: var(--color-navbar-bg);
}

/* ---------- Banner principal (deslizamiento horizontal, varios a la vez) ---------- */
.hero-scroll-wrap {
  position: relative;
}
.hero-scroll {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.hero-scroll::-webkit-scrollbar {
  display: none;
}
.hero-slide {
  flex: 0 0 calc(58% - 0.5rem);
  scroll-snap-align: start;
  display: block;
  min-height: 280px;
  border-radius: 16px;
  overflow: hidden;
  background-color: var(--color-navbar-bg);
  position: relative;
}
.hero-slide__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.35s ease;
}
.hero-slide:hover .hero-slide__bg {
  transform: scale(1.06);
}
.hero-scroll__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
}
.hero-scroll__arrow:hover {
  background: rgba(0, 0, 0, 0.55);
}
.hero-scroll__arrow--prev {
  left: 0.75rem;
}
.hero-scroll__arrow--next {
  right: 0.75rem;
}
.hero-dots {
  display: flex;
  justify-content: flex-start;
  gap: 0.4rem;
  margin-top: 0.75rem;
}
.hero-dot-indicator {
  width: 28px;
  height: 6px;
  border-radius: 3px;
  background: var(--color-border);
  transition: background 0.2s;
}
.hero-dot-indicator.active {
  background: var(--color-primary);
}
@media (max-width: 768px) {
  .hero-slide {
    flex-basis: 92%;
    min-height: 0;
    overflow: hidden;
  }
  .hero-slide__bg {
    position: relative;
    display: block;
    width: 100%;
    padding-top: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #fff;
    border-radius: 16px;
  }
}

/* ---------- Secciones de cursos por categoría ---------- */
.category-section {
  margin-bottom: 2.5rem;
}
.category-section__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 1rem;
}
.category-section__title {
  font-weight: 700;
  font-size: 1.25rem;
}
.category-section__link {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.9rem;
}
.category-section__link:hover {
  text-decoration: underline;
}

/* ---------- Tarjeta de curso ---------- */
.course-card {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
  text-decoration: none;
  color: var(--color-text);
  display: block;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.course-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-6px);
  color: var(--color-text);
}
.course-card__thumb {
  height: 110px;
  background: var(--color-bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
}
.course-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.course-card__body {
  padding: 0.9rem 1rem;
}
.course-card__tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  margin-bottom: 0.45rem;
}
.course-card__title {
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.3;
  margin-bottom: 0.3rem;
}
.course-card__meta {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}
.course-card__price {
  font-weight: 700;
  margin-top: 0.4rem;
}

/* ---------- Bloques "Más populares / por categoría" (estilo Coursera) ---------- */
.popular-block {
  background: var(--color-primary-soft);
  border-radius: 16px;
  padding: 1.25rem 1.25rem 0.5rem;
  height: 100%;
}
.popular-block__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 0.75rem;
}
.popular-block__header a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 700;
}
.popular-item {
  display: flex;
  align-items: stretch;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 0.75rem;
  text-decoration: none;
  color: var(--color-text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.popular-item:last-child {
  margin-bottom: 0;
}
.popular-item:hover {
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
  color: var(--color-text);
}
.popular-item__thumb {
  width: 90px;
  min-height: 84px;
  flex-shrink: 0;
  background: var(--color-bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
}
.popular-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.popular-item__body {
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.popular-item__title {
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.25;
}
.popular-item__meta {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 0.2rem;
}
.popular-block__more {
  display: block;
  text-align: center;
  margin-top: 0.5rem;
  padding: 0.75rem 0;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.popular-block__more:hover {
  text-decoration: underline;
}
/* ---------- Sección de cursos en vivo (fondo oscuro elegante) ---------- */
.live-section {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(120deg, #0F172A 0%, #1e293b 100%);
}
.live-section__intro {
  flex: 0 0 260px;
  padding: 2rem 1.75rem;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.live-section__intro h3 {
  font-weight: 800;
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
}
.live-section__intro p {
  font-size: 0.9rem;
  opacity: 0.92;
  margin: 0;
}
.live-section__carousel {
  flex: 1;
  padding: 1.75rem 1.75rem 1.75rem 0.5rem;
}
@media (max-width: 768px) {
  .live-section {
    flex-direction: column;
  }
  .live-section__intro {
    flex: none;
    padding-bottom: 0.5rem;
  }
  .live-section__carousel {
    padding: 0.5rem 1rem 1.5rem;
  }
}
/* ---------- Banner de clase en vivo ---------- */
.live-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e0234e;
  vertical-align: middle;
}
.live-banner {
  display: block;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.04);
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
  text-decoration: none;
  color: var(--color-text);
  box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.live-banner:hover {
  box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.12);
  transform: translateY(-5px);
  color: var(--color-text);
}
.live-banner__thumb {
  position: relative;
  height: 140px;
  background: var(--color-bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.6rem;
}
.live-banner__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.live-banner__badge {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  background: #e0234e;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.25rem 0.55rem;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  letter-spacing: 0.03em;
}
.live-banner__badge .live-dot {
  background: #fff;
}
.live-banner__body {
  padding: 1.1rem 1.25rem;
}
.live-banner__body h4 {
  font-weight: 800;
  font-size: 1.05rem;
  margin-bottom: 0.35rem;
}
.live-banner__fecha {
  font-weight: 600;
  color: var(--color-primary);
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
}

/* ---------- Footer (pie de página, en todas las páginas) ---------- */
.footer-aula {
  background: var(--color-navbar-bg);
  color: rgba(255, 255, 255, 0.85);
}
.footer-aula h5,
.footer-aula h6 {
  color: #fff;
}
.footer-aula__brand {
  font-weight: 800;
}
.footer-aula__links {
  margin: 0;
}
.footer-aula__links li {
  margin-bottom: 0.4rem;
}
.footer-aula__links a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-size: 0.9rem;
}
.footer-aula__links a:hover {
  color: #fff;
  text-decoration: underline;
}

/* ---------- Tarjeta de "Mis cursos" (imagen grande + insignia) ---------- */
.my-course-card {
  display: block;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.04);
  border-radius: 12px;
  overflow: hidden;
  height: 100%;
  text-decoration: none;
  color: var(--color-text);
  box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.my-course-card:hover {
  box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.12);
  transform: translateY(-5px);
  color: var(--color-text);
}
.my-course-card__thumb {
  position: relative;
  height: 160px;
  background: var(--color-bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.8rem;
}
.my-course-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.my-course-card__badge {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  background: #fff;
  color: var(--color-text);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.my-course-card__body {
  padding: 0.9rem 1rem;
}
.my-course-card__provider {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: 0.35rem;
}
.my-course-card__provider-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}
.my-course-card__title {
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.3;
  margin-bottom: 0.3rem;
}
.my-course-card__link {
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.8rem;
  margin: 0.2rem 0;
}
.my-course-card__meta {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: 0.3rem;
}
/* ---------- Página de detalle de un curso EN VIVO ---------- */
.live-hero {
  position: relative;
  min-height: 440px;
  overflow: hidden;
  background-color: var(--color-navbar-bg);
  background-size: cover;
  background-position: center;
  border-radius: 0;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  margin-top: -1.5rem;
}
.live-hero__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 2rem 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.05));
  color: #fff;
}
.live-hero__overlay h1 {
  font-weight: 800;
  font-size: 2.75rem;
  margin: 0.5rem 0 0.25rem;
}
.live-hero__overlay p {
  margin: 0;
  opacity: 0.9;
}
.live-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #fff;
  color: var(--color-text);
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
}

.live-facts {
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  margin-top: -1.25rem;
  position: relative;
  z-index: 2;
  margin-left: 0.75rem;
  margin-right: 0.75rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}
.live-facts__item {
  flex: 1 1 220px;
  padding: 1.5rem 1.75rem;
  border-right: 1px solid var(--color-border);
}
.live-facts__item:last-child {
  border-right: none;
}
.live-facts__item strong {
  display: block;
  font-size: 1.05rem;
  margin-bottom: 0.3rem;
}
.live-facts__item span {
  font-size: 1rem;
  color: var(--color-text-muted);
}

.session-row {
  display: flex;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-border);
}
.session-row:last-child {
  border-bottom: none;
}
.session-row__date {
  width: 84px;
  flex-shrink: 0;
  text-align: center;
}
.session-row__date strong {
  display: block;
  font-size: 0.9rem;
}
.session-row__date span {
  font-size: 0.78rem;
  color: var(--color-text-muted);
}
.session-row__body h6 {
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.session-row__links a:not(.btn) {
  margin-right: 1rem;
  font-size: 0.85rem;
  color: var(--color-primary);
  text-decoration: none;
}
.session-row__links a:hover {
  text-decoration: underline;
}

.next-session-card {
  background: var(--color-primary-soft);
  border-radius: 12px;
  padding: 1.25rem;
}
.next-session-card h6 {
  font-weight: 700;
  margin-bottom: 0.6rem;
}
.next-session-card__date {
  font-weight: 700;
  margin-bottom: 0.1rem;
}
.next-session-card__time {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
}
.next-session-card__topic {
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}

/* Caja lateral informativa genérica (usada en el rediseño de cursos
   grabados, mismo estilo visual que .next-session-card). */
.info-box {
  background: var(--color-primary-soft);
  border-radius: 12px;
  padding: 1.25rem;
}
.info-box h6 {
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.info-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.info-box li {
  padding: 0.4rem 0;
  font-size: 0.9rem;
}
/* ---------- Página de detalle de curso GRABADO (estilo Udemy) ---------- */
.purchase-card {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.purchase-card__image {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}
.purchase-card__image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-soft);
  font-size: 3rem;
}
.purchase-card__body {
  padding: 1.25rem;
}
.purchase-option--subscription {
  background: var(--color-primary-soft);
  border-radius: 10px;
  padding: 0.9rem 1rem;
}

.curso-incluye li {
  padding: 0.35rem 0;
}

.accordion-button:not(.collapsed) {
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
}
.accordion-button:focus {
  box-shadow: none;
  border-color: var(--color-border);
}
.course-hero {
  background: var(--color-navbar-bg);
  border-radius: 16px;
  margin-bottom: 1.5rem;
  overflow: hidden;
}
.course-hero__text-col {
  padding: 2.25rem 1.5rem 2.25rem 2.5rem;
}
.course-hero__card-col {
  padding: 1.5rem 1.5rem 1.5rem 0.5rem;
}
.course-hero__title {
  color: #fff;
  font-weight: 800;
  font-size: 1.8rem;
  max-width: 720px;
  margin-bottom: 0.5rem;
}
.course-hero__subtitle {
  color: #fff;
  font-size: 1.05rem;
  opacity: 0.92;
  max-width: 720px;
  margin-bottom: 0.85rem;
}
.course-hero__meta {
  color: #fff;
  font-size: 0.85rem;
  opacity: 0.75;
  margin-bottom: 0.25rem;
}
.course-hero__meta strong {
  opacity: 1;
}

.course-section-title {
  font-weight: 700;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--color-border);
  margin-bottom: 1rem;
}

.curso-incluye .col-md-6 {
  padding: 0.55rem 0;
  font-size: 0.95rem;
}
/* ---------- Páginas de Login y Registro ---------- */
.auth-page {
  min-height: 100vh;
  background-color: #122742;
  background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1.5px),
    radial-gradient(circle at 15% 10%, #1c3a5e 0%, #0c1b30 60%);
  background-size: 22px 22px, 100% 100%;
  background-repeat: repeat, no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}
.auth-wrapper {
  width: 100%;
  max-width: 460px;
}
.auth-messages {
  margin-bottom: 1rem;
}
.auth-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  padding: 2rem;
}
.auth-logo {
  display: flex;
  margin: 0 auto 1.5rem;
  background: #111;
  border-radius: 10px;
  overflow: hidden;
  width: fit-content;
}
.auth-logo img {
  display: block;
  max-height: 64px;
}
.auth-subtitle {
  text-align: center;
  color: var(--color-text-muted);
  margin-bottom: 1.5rem;
}
.auth-promo {
  background: var(--color-primary-soft);
  color: var(--color-primary-dark);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  font-size: 0.9rem;
  text-align: center;
  margin-bottom: 1.25rem;
}
.auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.8rem;
  margin: 1.25rem 0;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--color-border);
}
.auth-divider::before {
  margin-right: 0.75rem;
}
.auth-divider::after {
  margin-left: 0.75rem;
}
.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  border: 1px solid var(--color-border);
  background: #fff;
  border-radius: 8px;
  padding: 0.55rem 1rem;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
}
.btn-google:hover {
  background: var(--color-bg-soft);
  color: var(--color-text);
}
.auth-footer-note {
  text-align: center;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-top: 1rem;
}
.auth-switch {
  text-align: center;
  font-size: 0.9rem;
  margin-top: 0.75rem;
}
.auth-forgot-link {
  font-size: 0.85rem;
  color: var(--color-primary);
  text-decoration: none;
}
.auth-forgot-link:hover {
  text-decoration: underline;
}
.nav-tabs {
  border-bottom: 1px solid var(--color-border);
  gap: 1.5rem;
}
.nav-tabs .nav-link {
  border: none;
  background: none;
  color: var(--color-text-muted);
  font-weight: 600;
  padding: 0.5rem 0;
}
.nav-tabs .nav-link:hover {
  border: none;
  color: var(--color-text);
}
.nav-tabs .nav-link.active {
  color: var(--color-primary);
  border: none;
  border-bottom: 2px solid var(--color-primary);
  background: none;
}
.session-accordion__date {
  flex-shrink: 0;
  width: 160px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}
.session-accordion__title {
  font-weight: 600;
}
.modulo-sesiones__titulo {
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.session-materiales {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.4rem 1.5rem;
  margin-top: 0.75rem;
}
.session-materiales a {
  font-size: 0.85rem;
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.session-materiales a:hover {
  text-decoration: underline;
}
/* ---------- Banda de estadísticas ---------- */
.stats-band {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: var(--color-navbar-bg);
  border-radius: 16px;
  padding: 5rem 1rem;
  gap: 1rem;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.stats-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 20% 50%, rgba(0,86,210,0.4) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 50%, rgba(0,150,150,0.3) 0%, transparent 60%);
  pointer-events: none;
}
.stats-band__item {
  text-align: center;
  flex: 1;
  min-width: 140px;
  position: relative;
  z-index: 1;
}
.stats-band__number {
  display: block;
  font-size: 2.8rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.stats-band__label {
  display: block;
  font-size: 0.88rem;
  color: rgba(255,255,255,0.65);
  margin-top: 0.4rem;
}

/* ---------- ¿Por qué nosotros? ---------- */
.why-section__title {
  font-weight: 800;
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  text-align: center;
}
.why-section__subtitle {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  margin-bottom: 2rem;
}
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
}
.why-card {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.04);
  border-radius: 16px;
  padding: 1.75rem 1.5rem;
  box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.why-card:hover {
  box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.12);
  transform: translateY(-5px);
}
.why-card__icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 0.5rem;
}
.why-card h4 {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.25rem;
  color: var(--color-navbar-bg);
}
.why-card p {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.6;
}

/* ---------- Banner de suscripción ---------- */
.sub-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  background: linear-gradient(135deg, #00224d 0%, #0056d2 50%, #0891b2 100%);
  border-radius: 20px;
  padding: 2.5rem 3rem;
  color: #fff;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.sub-banner::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  pointer-events: none;
}
.sub-banner::after {
  content: "";
  position: absolute;
  bottom: -60px;
  right: 100px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  pointer-events: none;
}
.sub-banner__text {
  position: relative;
  z-index: 1;
}
.sub-banner__text h3 {
  font-weight: 800;
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
  line-height: 1.3;
}
.sub-banner__text p {
  font-size: 0.9rem;
  opacity: 0.88;
  margin: 0;
  max-width: 520px;
}
.sub-banner__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.sub-banner__price {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
}
.sub-banner__price small {
  font-size: 1rem;
  font-weight: 500;
  opacity: 0.8;
}
.sub-banner .btn-aula-primary {
  background: #fff;
  color: var(--color-navbar-bg);
  border-color: #fff;
  white-space: nowrap;
  padding: 0.6rem 1.5rem;
  font-size: 0.95rem;
}
.sub-banner .btn-aula-primary:hover {
  background: var(--color-primary-soft);
  border-color: var(--color-primary-soft);
}
/* ---------- Especialidades ---------- */
.specialties-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
}
.specialty-card {
  display: block;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.75rem 1.5rem;
  text-decoration: none;
  color: var(--color-text);
  transition: box-shadow 0.2s, border-color 0.2s;
}
.specialty-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  border-color: var(--color-primary);
  color: var(--color-text);
}
.specialty-card__icon {
  font-size: 2.2rem;
  display: block;
  margin-bottom: 0.75rem;
}
.specialty-card h4 {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.4rem;
  color: var(--color-navbar-bg);
}
.specialty-card p {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.5;
}

/* ---------- FAQ ---------- */
.faq-item {
  border: 1px solid var(--color-border) !important;
  border-radius: 10px !important;
  margin-bottom: 0.5rem;
  overflow: hidden;
}
.faq-btn {
  font-weight: 600;
  font-size: 0.95rem;
  background: #fff !important;
  color: var(--color-text) !important;
  box-shadow: none !important;
}
.faq-btn:not(.collapsed) {
  color: var(--color-primary) !important;
}
.faq-body {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}
/* ---------- Saludo personalizado ---------- */
.welcome-banner {
  background: var(--color-primary-soft);
  border-radius: 10px;
  padding: 0.75rem 1.25rem;
  font-size: 1rem;
  color: var(--color-navbar-bg);
}
.welcome-banner strong {
  font-weight: 700;
}
/* ---------- Navbar responsive (celular) ---------- */
@media (max-width: 768px) {
  .navbar-mc__inner {
    flex-wrap: wrap;
    height: auto;
    padding: 0.5rem 1rem;
    gap: 0.5rem;
  }
  .navbar-mc__left {
    flex: 1;
    gap: 0;
  }
  .navbar-mc__left .navbar-mc__link,
  .navbar-mc__left .navbar-mc__dropdown-wrap:not(:first-child) {
    display: none;
  }
  .navbar-mc__search {
    order: 3;
    flex: 0 0 100%;
    max-width: 100%;
    margin: 0;
    padding-bottom: 0.5rem;
  }
  .navbar-mc__right {
    flex-shrink: 0;
  }
  .navbar-mc__btn-register {
    font-size: 0.78rem;
    padding: 0.35rem 0.75rem;
  }
  .navbar-mc__mega {
    min-width: 280px;
    left: -60px;
  }
}
/* ---------- Panel del alumno ---------- */
.alumno-hero {
  background: linear-gradient(120deg, var(--color-navbar-bg) 0%, #0056d2 100%);
  border-radius: 16px;
  padding: 2rem 2.5rem;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.alumno-hero__greeting h2 {
  font-weight: 800;
  font-size: 1.6rem;
  margin-bottom: 0.25rem;
}
.alumno-hero__greeting p {
  opacity: 0.88;
  font-size: 0.95rem;
  margin: 0;
}
.alumno-hero__stats {
  display: flex;
  gap: 2rem;
  flex-shrink: 0;
}
.alumno-stat {
  text-align: center;
}
.alumno-stat__number {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
}
.alumno-stat__label {
  display: block;
  font-size: 0.78rem;
  opacity: 0.8;
  margin-top: 0.2rem;
}
.alumno-suscripcion {
  background: rgba(255,255,255,0.15);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  margin-top: 0.75rem;
  display: inline-block;
}
.alumno-course-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow 0.2s;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.alumno-course-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}
.alumno-course-card__img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  background: var(--color-primary-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
}
.alumno-course-card__img img {
  width: 100%;
  height: 140px;
  object-fit: cover;
}
.alumno-course-card__body {
  padding: 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.alumno-course-card__title {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
  flex: 1;
  line-height: 1.4;
}
.alumno-course-card__badge {
  font-size: 0.72rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: 600;
  margin-bottom: 0.75rem;
  display: inline-block;
}
.alumno-empty {
  text-align: center;
  padding: 3rem 1rem;
}
.alumno-empty__icon {
  font-size: 4rem;
  margin-bottom: 1rem;
  display: block;
}
.alumno-empty h4 {
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.alumno-empty p {
  color: var(--color-text-muted);
  max-width: 380px;
  margin: 0 auto 1.5rem;
}
.alumno-quicklinks {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2.5rem;
}
.alumno-quicklink {
  flex: 1;
  min-width: 160px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.25rem;
  text-align: center;
  text-decoration: none;
  color: var(--color-text);
  transition: box-shadow 0.2s, border-color 0.2s;
}
.alumno-quicklink:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.alumno-quicklink__icon {
  font-size: 1.75rem;
  display: block;
  margin-bottom: 0.4rem;
}
.alumno-quicklink span:last-child {
  font-size: 0.85rem;
  font-weight: 600;
}
/* ---------- Página de perfil / Mi cuenta ---------- */
.perfil-wrap {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 2rem;
  align-items: start;
}
@media (max-width: 768px) {
  .perfil-wrap {
    grid-template-columns: 1fr;
  }
}
.perfil-sidebar {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 2rem 1.5rem;
  text-align: center;
  position: sticky;
  top: 80px;
}
.perfil-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--color-navbar-bg);
  color: #fff;
  font-size: 2rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}
.perfil-sidebar__name {
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 0.25rem;
}
.perfil-sidebar__email {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}
.perfil-sidebar__role {
  display: inline-block;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.75rem;
  border-radius: 999px;
  margin-bottom: 0.5rem;
}
.perfil-sidebar__since {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-bottom: 1rem;
}
.perfil-sub-badge {
  background: #ecfdf5;
  color: #065f46;
  border-radius: 10px;
  padding: 0.6rem 0.75rem;
  font-size: 0.82rem;
  font-weight: 600;
  margin-top: 1rem;
}
.perfil-sub-badge small {
  display: block;
  font-weight: 400;
  opacity: 0.75;
  margin-top: 0.1rem;
}
.perfil-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 1.75rem;
  margin-bottom: 1.5rem;
}
.perfil-card__title {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 1.25rem;
  color: var(--color-navbar-bg);
}
.perfil-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.perfil-field--full {
  grid-column: 1 / -1;
}
@media (max-width: 576px) {
  .perfil-grid {
    grid-template-columns: 1fr;
  }
}
.perfil-cursos {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.perfil-curso {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--color-text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.perfil-curso:hover {
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  color: var(--color-text);
}
.perfil-curso__thumb {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-primary-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}
.perfil-curso__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.perfil-curso__info {
  flex: 1;
}
.perfil-curso__title {
  display: block;
  font-weight: 600;
  font-size: 0.88rem;
  line-height: 1.3;
}
.perfil-curso__type {
  display: block;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 0.15rem;
}
.perfil-curso__arrow {
  color: var(--color-text-muted);
  font-size: 1rem;
}
/* ---------- Página de certificados ---------- */
.certs-hero {
  background: linear-gradient(120deg, #065f46 0%, #059669 100%);
  border-radius: 16px;
  padding: 2rem 2.5rem;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.certs-hero__text h2 {
  font-weight: 800;
  font-size: 1.6rem;
  margin-bottom: 0.25rem;
}
.certs-hero__text p {
  opacity: 0.9;
  margin: 0;
  font-size: 0.95rem;
}
.certs-hero__badge {
  text-align: center;
  background: rgba(255,255,255,0.15);
  border-radius: 12px;
  padding: 1rem 1.5rem;
  flex-shrink: 0;
}
.certs-hero__number {
  display: block;
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
}
.certs-hero__label {
  display: block;
  font-size: 0.82rem;
  opacity: 0.85;
  margin-top: 0.2rem;
}
.cert-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s;
}
.cert-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.10);
}
.cert-card__cover {
  position: relative;
  height: 150px;
  background: var(--color-primary-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cert-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cert-card__cover-icon {
  font-size: 4rem;
}
.cert-card__ribbon {
  position: absolute;
  top: 12px;
  right: -20px;
  background: #059669;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.25rem 1.5rem;
  transform: rotate(35deg);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.cert-card__body {
  padding: 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.cert-card__title {
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.4;
  margin: 0;
}
.cert-card__date {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin: 0;
}
.cert-card__verify {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  margin: 0.25rem 0;
}
.cert-card__verify-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}
.cert-card__verify-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #065f46;
}
.cert-card__verify-code {
  display: block;
  font-size: 0.7rem;
  color: #6b7280;
  font-family: monospace;
}
.cert-card__actions {
  display: flex;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.5rem;
}
.cert-card__actions .btn {
  flex: 1;
  font-size: 0.78rem;
}
.certs-empty {
  text-align: center;
  padding: 4rem 1rem;
}
.certs-empty__icon {
  font-size: 5rem;
  display: block;
  margin-bottom: 1rem;
}
.certs-empty h3 {
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
}
.certs-empty p {
  color: var(--color-text-muted);
  max-width: 420px;
  margin: 0 auto 1.5rem;
  font-size: 0.92rem;
  line-height: 1.6;
}
/* ---------- Página de suscripción ---------- */
.sub-page-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  background: linear-gradient(120deg, var(--color-navbar-bg) 0%, #0056d2 100%);
  border-radius: 16px;
  padding: 2.5rem 3rem;
  color: #fff;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.sub-page-hero__badge {
  display: inline-block;
  background: rgba(255,255,255,0.15);
  border-radius: 999px;
  padding: 0.25rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
}
.sub-page-hero__text h1 {
  font-weight: 800;
  font-size: 1.6rem;
  max-width: 520px;
  margin-bottom: 0.75rem;
  line-height: 1.3;
}
.sub-page-hero__text p {
  opacity: 0.88;
  font-size: 0.92rem;
  max-width: 480px;
  margin: 0;
}
.sub-page-hero__price {
  text-align: center;
  flex-shrink: 0;
  background: rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 1.5rem 2rem;
}
.sub-page-hero__amount {
  display: block;
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
}
.sub-page-hero__period {
  font-size: 1.1rem;
  opacity: 0.8;
}
.sub-page-hero__note {
  font-size: 0.75rem;
  opacity: 0.7;
  margin-top: 0.5rem;
  margin-bottom: 0;
}
.sub-active-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.sub-active-card__icon { font-size: 2rem; flex-shrink: 0; }
.sub-active-card__info { flex: 1; }
.sub-active-card__info strong { display: block; font-weight: 700; color: #065f46; margin-bottom: 0.2rem; }
.sub-active-card__info span { font-size: 0.88rem; color: #374151; }
.sub-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 3rem;
}
@media (max-width: 640px) { .sub-compare { grid-template-columns: 1fr; } }
.sub-plan {
  background: #fff;
  border: 1.5px solid var(--color-border);
  border-radius: 16px;
  padding: 2rem;
  position: relative;
}
.sub-plan--featured {
  border-color: var(--color-primary);
  box-shadow: 0 4px 24px rgba(0, 86, 210, 0.12);
}
.sub-plan__ribbon {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.2rem 1rem;
  border-radius: 999px;
  white-space: nowrap;
}
.sub-plan__title { font-weight: 700; font-size: 1.1rem; margin-bottom: 0.5rem; }
.sub-plan__price { font-size: 1.5rem; font-weight: 800; color: var(--color-navbar-bg); margin-bottom: 1.25rem; }
.sub-plan__price small { font-size: 0.9rem; font-weight: 500; color: var(--color-text-muted); }
.sub-plan--basic .sub-plan__price { font-size: 1rem; font-weight: 500; color: var(--color-text-muted); }
.sub-plan__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.sub-plan__item { font-size: 0.88rem; padding-left: 1.4rem; position: relative; }
.sub-plan__item--yes::before { content: "✅"; position: absolute; left: 0; font-size: 0.75rem; }
.sub-plan__item--no::before { content: "✗"; position: absolute; left: 0; color: #9ca3af; }
.sub-plan__item--no { color: var(--color-text-muted); }
.sub-courses-section { margin-bottom: 2rem; }
.sub-courses-section__title { font-weight: 700; font-size: 1.2rem; margin-bottom: 1.25rem; }
.sub-course-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--color-text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.sub-course-card:hover { border-color: var(--color-primary); box-shadow: 0 2px 8px rgba(0,0,0,0.06); color: var(--color-text); }
.sub-course-card__thumb {
  width: 48px; height: 48px; border-radius: 8px; overflow: hidden;
  background: var(--color-primary-soft); display: flex; align-items: center;
  justify-content: center; font-size: 1.4rem; flex-shrink: 0;
}
.sub-course-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.sub-course-card__info { flex: 1; }
.sub-course-card__title { display: block; font-weight: 600; font-size: 0.82rem; line-height: 1.3; }
.sub-course-card__cat { display: block; font-size: 0.72rem; color: var(--color-text-muted); margin-top: 0.1rem; }
.sub-course-card__check { font-size: 0.9rem; flex-shrink: 0; }
/* ---------- Notificaciones ---------- */
.navbar-mc__icon-btn {
  position: relative;
}
.notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ef4444;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.notif-panel {
  min-width: 320px;
  right: 0;
  max-height: 420px;
  overflow-y: auto;
}
.notif-mark-all {
  background: none;
  border: none;
  font-size: 0.72rem;
  color: var(--color-primary);
  cursor: pointer;
  padding: 0;
}
.notif-mark-all:hover {
  text-decoration: underline;
}
.notif-item {
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.notif-item--nueva {
  background: #f0f7ff;
}
.notif-item__msg {
  font-size: 0.85rem;
  line-height: 1.4;
}
.notif-item__fecha {
  font-size: 0.72rem;
  color: var(--color-text-muted);
}
.notif-item__link {
  font-size: 0.75rem;
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
}
.notif-item__link:hover {
  text-decoration: underline;
}
/* ---------- Catálogo de cursos ---------- */
.catalog-hero {
  background: linear-gradient(120deg, var(--color-navbar-bg) 0%, #0056d2 100%);
  border-radius: 16px;
  padding: 2rem 2.5rem;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.catalog-hero__text h1 {
  font-weight: 800;
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
}
.catalog-hero__text p {
  opacity: 0.88;
  font-size: 0.9rem;
  margin: 0;
  max-width: 420px;
}
.catalog-hero__search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.catalog-hero__search-input {
  border: none;
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  font-size: 0.88rem;
  width: 240px;
  outline: none;
}
.catalog-hero__search-btn {
  background: rgba(255,255,255,0.2);
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.catalog-hero__search-btn:hover { background: rgba(255,255,255,0.35); }
.catalog-wrap {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 2rem;
  align-items: start;
}
@media (max-width: 768px) { .catalog-wrap { grid-template-columns: 1fr; } }
.catalog-sidebar {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 1.25rem;
  position: sticky;
  top: 75px;
}
.catalog-sidebar__title {
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}
.catalog-filter {
  display: block;
  padding: 0.45rem 0.75rem;
  border-radius: 8px;
  font-size: 0.88rem;
  text-decoration: none;
  color: var(--color-text);
  transition: background 0.15s;
  margin-bottom: 0.2rem;
}
.catalog-filter:hover { background: var(--color-bg-soft); color: var(--color-text); }
.catalog-filter--active {
  background: var(--color-primary);
  color: #fff !important;
  font-weight: 600;
}
.catalog-filter--active:hover { background: var(--color-navbar-bg); }
.catalog-results { font-size: 0.9rem; color: var(--color-text-muted); margin-bottom: 1rem; }
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.25rem;
}
.catalog-empty { text-align: center; padding: 3rem 1rem; }
.catalog-empty__icon { font-size: 3.5rem; display: block; margin-bottom: 1rem; }
.catalog-empty h4 { font-weight: 700; margin-bottom: 0.5rem; }
.catalog-empty p { color: var(--color-text-muted); max-width: 360px; margin: 0 auto 1.5rem; font-size: 0.9rem; }

/* ---------- Tarjeta de curso v2 ---------- */
.course-card-v2 {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.04);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: var(--color-text);
  box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.course-card-v2:hover {
  box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.12);
  transform: translateY(-5px);
  color: var(--color-text);
}
.course-card-v2__thumb {
  position: relative;
  height: 148px;
  background: var(--color-primary-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.course-card-v2__thumb img { width: 100%; height: 100%; object-fit: cover; }
.course-card-v2__icon { font-size: 3rem; }
.course-card-v2__badges {
  position: absolute;
  bottom: 8px;
  left: 8px;
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.course-badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
}
.course-badge--live { background: #fee2e2; color: #991b1b; }
.course-badge--recorded { background: #e0e7ff; color: #3730a3; }
.course-badge--sub { background: #d1fae5; color: #065f46; }
.course-card-v2__body {
  padding: 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.course-card-v2__cat {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}
.course-card-v2__title {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
  margin: 0;
  flex: 1;
  color: var(--color-navbar-bg);
}
.course-card-v2__desc {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.4;
}
.course-card-v2__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
}
.course-card-v2__level { font-size: 0.72rem; color: var(--color-text-muted); }
.course-card-v2__price { font-weight: 700; font-size: 0.82rem; color: var(--color-navbar-bg); }
/* ---------- Secciones del home con encabezado ---------- */
.home-section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}
.home-section__title {
  font-weight: 800;
  font-size: 1.3rem;
  margin: 0;
}
.home-section__link {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  flex-shrink: 0;
}
.home-section__link:hover {
  text-decoration: underline;
}

/* ---------- Especialidades con color por tarjeta ---------- */
.specialties-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
}
.specialty-card {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  padding: 2rem 1.5rem;
  text-decoration: none;
  color: #334155;
  background: #fff;
  border: 1px solid var(--color-border);
  transition: transform 0.2s, box-shadow 0.2s;
  min-height: 200px;
}
.specialty-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  color: #334155;
  border-color: var(--color-primary);
}
.specialty-card:nth-child(1) .specialty-card__icon { color: #3b82f6; }
.specialty-card:nth-child(2) .specialty-card__icon { color: #10b981; }
.specialty-card:nth-child(3) .specialty-card__icon { color: #a855f7; }
.specialty-card:nth-child(4) .specialty-card__icon { color: #f59e0b; }
.specialty-card__icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: 1rem;
}
.specialty-card h4 {
  font-weight: 800;
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
  color: var(--color-navbar-bg);
}
.specialty-card p {
  font-size: 0.83rem;
  color: #64748b;
  margin: 0;
  line-height: 1.5;
}

/* ---------- Banda hero de texto ---------- */
.home-hero-text {
  background: var(--color-navbar-bg);
  border-radius: 16px;
  padding: 1.75rem 2.5rem;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.home-hero-text__main h2 {
  font-weight: 800;
  font-size: 1.5rem;
  margin-bottom: 0.4rem;
  line-height: 1.3;
}
.home-hero-text__main p {
  opacity: 0.82;
  font-size: 0.92rem;
  margin: 0;
  max-width: 500px;
}
.home-hero-text__action { flex-shrink: 0; }

/* ---------- Separadores de sección ---------- */
.section-light {
  background: #f8fafc;
  border-radius: 20px;
  padding: 5rem 2rem;
  margin-bottom: 3rem;
}
.section-dark {
  background: var(--color-navbar-bg);
  border-radius: 20px;
  padding: 5rem 2rem;
  margin-bottom: 3rem;
  color: #fff;
}
.section-dark .why-card {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
}
.section-dark .why-card:hover {
  background: rgba(255,255,255,0.14);
}
.section-dark .why-card h4 { color: #fff; }
.section-dark .why-card p { color: rgba(255,255,255,0.72); }
/* ---------- Bloque de cierre ---------- */
.home-closing {
  background: var(--color-navbar-bg);
  border-radius: 20px;
  padding: 5rem 2rem;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.home-closing::before {
  content: "";
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: rgba(0,86,210,0.25);
  pointer-events: none;
}
.home-closing__title {
  font-weight: 800;
  font-size: 2rem;
  margin-bottom: 0.75rem;
  position: relative;
  z-index: 1;
}
.home-closing__subtitle {
  font-size: 1rem;
  opacity: 0.82;
  max-width: 480px;
  margin: 0 auto 2rem;
  position: relative;
  z-index: 1;
}
.home-closing__btn {
  background: #fff;
  color: var(--color-navbar-bg);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.85rem 2rem;
  border-radius: 8px;
  text-decoration: none;
  position: relative;
  z-index: 1;
  display: inline-block;
  transition: background 0.2s, transform 0.2s;
}
.home-closing__btn:hover {
  background: var(--color-primary-soft);
  color: var(--color-navbar-bg);
  transform: translateY(-2px);
}
/* ---------- Desactivar elevación 3D en táctil (según especificación) ---------- */
@media (max-width: 1024px) {
  .course-card,
  .live-banner,
  .my-course-card,
  .specialty-card,
  .popular-item {
    transition: opacity 0.3s ease;
  }
  .course-card:hover,
  .live-banner:hover,
  .my-course-card:hover,
  .specialty-card:hover,
  .popular-item:hover {
    transform: none !important;
    box-shadow: none !important;
    opacity: 0.85;
  }
}
/* ---------- Badge "próxima sesión en vivo" en Mis Cursos ---------- */
.my-course-card__badge--live {
  background: var(--color-navbar-bg);
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}
.live-dot--blink {
  animation: live-pulse 1.4s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}
/* ---------- Rutas de Especialización (línea de tiempo) ---------- */
.rutas-header {
  text-align: center;
  margin-bottom: 3rem;
}
.rutas-timeline {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
}
.ruta-step {
  position: relative;
  flex: 1;
  text-align: center;
  padding: 0 0.5rem;
}
.ruta-step__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  position: relative;
  z-index: 2;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ruta-step:hover .ruta-step__icon {
  transform: translateY(-6px);
  box-shadow: var(--shadow-hover);
}
.ruta-step__connector {
  position: absolute;
  top: 32px;
  left: 50%;
  width: 100%;
  height: 3px;
  background: var(--color-primary-soft);
  z-index: 1;
}
.ruta-step--last .ruta-step__connector {
  display: none;
}
.ruta-step h4 {
  font-weight: 800;
  font-size: 1rem;
  color: var(--color-navbar-bg);
  margin-bottom: 0.4rem;
}
.ruta-step p {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.4;
}
.rutas-cta {
  text-align: center;
  margin-top: 2.5rem;
}
@media (max-width: 1024px) {
  .ruta-step:hover .ruta-step__icon {
    transform: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  }
}
@media (max-width: 768px) {
  .rutas-timeline {
    flex-direction: column;
    align-items: flex-start;
    gap: 2.5rem;
    max-width: 360px;
    margin: 0 auto;
  }
  .ruta-step {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    text-align: left;
    width: 100%;
    padding: 0;
  }
  .ruta-step__icon {
    margin: 0;
    flex-shrink: 0;
  }
  .ruta-step__connector {
    top: 64px;
    left: 32px;
    width: 3px;
    height: calc(100% + 1.5rem);
  }
}
/* ---------- Certificado con QR (mockup visual 3D + LinkedIn) ---------- */
.cert-section {
  display: flex;
  align-items: center;
  gap: 3rem;
  background: var(--color-bg-soft);
  border-radius: 20px;
  padding: 80px 3rem;
  flex-wrap: wrap;
}
.cert-section__text {
  flex: 1 1 400px;
}
.cert-section__eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  margin-bottom: 1rem;
  letter-spacing: 0.02em;
}
.cert-section__text h2 {
  font-weight: 800;
  font-size: 1.75rem;
  color: var(--color-navbar-bg);
  line-height: 1.3;
  margin-bottom: 1rem;
}
.cert-section__text p {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1.25rem;
  max-width: 480px;
}
.cert-section__list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}
.cert-section__list li {
  font-size: 0.9rem;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

/* Verificador (visual) */
.cert-verify {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
  max-width: 480px;
}
.cert-verify__label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 0.6rem;
}
.cert-verify__form {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.cert-verify__input {
  flex: 1 1 200px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-btn);
  padding: 0.6rem 0.9rem;
  font-size: 0.88rem;
  outline: none;
  transition: border-color 0.3s ease-in-out;
  min-height: 44px;
}
.cert-verify__input:focus {
  border-color: var(--color-primary);
}
.cert-verify__btn {
  flex-shrink: 0;
}
.cert-verify__msg {
  font-size: 0.82rem;
  margin: 0.6rem 0 0;
  color: var(--color-accent);
  min-height: 1.1em;
}

/* Mockup 3D + LinkedIn */
.cert-section__mockup {
  flex: 1 1 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  perspective: 1200px;
}
.cert-device {
  background: var(--color-navbar-bg);
  border-radius: var(--radius-card);
  padding: 1.25rem;
  box-shadow: var(--shadow-hover);
  max-width: 380px;
  width: 100%;
  transform: rotateY(-8deg) rotateX(3deg);
  transition: transform 0.4s ease-in-out;
}
.cert-device:hover {
  transform: rotateY(0deg) rotateX(0deg);
}
.cert-diploma {
  background: #fff;
  border-radius: 12px;
  padding: 2rem 1.75rem;
  text-align: center;
  border: 2px solid var(--color-primary-soft);
}
.cert-diploma__seal {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-navbar-bg);
  color: #fff;
  font-weight: 800;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}
.cert-diploma__title {
  font-weight: 800;
  font-size: 1rem;
  color: var(--color-navbar-bg);
  margin-bottom: 1.25rem;
}
.cert-diploma__line {
  height: 8px;
  background: var(--color-bg-soft);
  border-radius: 4px;
  margin: 0 auto 0.6rem;
  width: 80%;
}
.cert-diploma__line--short {
  width: 55%;
  margin-bottom: 1.5rem;
}
.cert-diploma__qr {
  display: flex;
  justify-content: center;
}
.cert-qr {
  width: 84px;
  height: 84px;
  background:
    repeating-linear-gradient(0deg, var(--color-navbar-bg) 0 8px, transparent 8px 16px),
    repeating-linear-gradient(90deg, var(--color-navbar-bg) 0 8px, transparent 8px 16px);
  background-blend-mode: multiply;
  border: 6px solid #fff;
  outline: 1px solid var(--color-border);
  border-radius: 6px;
}

.cert-linkedin {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  max-width: 380px;
  width: 100%;
  overflow: hidden;
}
.cert-linkedin__header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-muted);
}
.cert-linkedin__logo {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  background: #0A66C2;
  color: #fff;
  font-weight: 800;
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cert-linkedin__body {
  padding: 1rem 1.1rem;
}
.cert-linkedin__body strong {
  display: block;
  font-size: 0.85rem;
  color: var(--color-text);
  margin-bottom: 0.3rem;
}
.cert-linkedin__body p {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin: 0;
}
.cert-linkedin__btn {
  display: block;
  width: 100%;
  border: none;
  background: #0A66C2;
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.75rem;
  cursor: pointer;
  transition: background 0.3s ease-in-out;
}
.cert-linkedin__btn:hover { background: #084d94; }

@media (max-width: 1024px) {
  .cert-device { transform: none; }
}
@media (max-width: 768px) {
  .cert-section {
    flex-direction: column;
    padding: 2.5rem 1.5rem;
    text-align: center;
  }
  .cert-section__list,
  .cert-verify { text-align: left; }
}
/* ---------- Zonas de toque mínimas 48x48px (W3C/Lighthouse) — solo móvil/tablet ---------- */
@media (max-width: 1024px) {
  .navbar-mc__icon-btn,
  .navbar-mc__avatar {
    width: 48px;
    height: 48px;
  }
  .navbar-mc__search-btn {
    width: 48px;
    height: 48px;
    right: 2px;
  }
  .hero-scroll__arrow {
    width: 48px;
    height: 48px;
  }
}
/* ---------- Hero Split-Screen (solo invitados) ---------- */
.hero-split {
  display: flex;
  align-items: center;
  gap: 3rem;
  padding: 80px 2.5rem;
  flex-wrap: wrap;
  background-color: #F8FAFC;
  border-radius: 24px;
}
.hero-split__left { flex: 1 1 420px; }
.hero-split__right { flex: 1 1 380px; display: flex; justify-content: flex-end; }
.hero-split__eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  padding: 0.4rem 1rem;
  border-radius: 999px;
  margin-bottom: 1.5rem;
}
.hero-split__title {
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--color-navbar-bg);
  margin-bottom: 1.25rem;
}
.hero-split__gradient {
  background: linear-gradient(90deg, var(--color-accent), var(--color-primary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-split__subtitle {
  font-size: 1.05rem;
  color: var(--color-text-muted);
  max-width: 480px;
  margin-bottom: 1.75rem;
  line-height: 1.6;
}
.hero-split__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  font-size: 0.88rem;
  color: var(--color-text-muted);
  margin-bottom: 2.25rem;
}
.hero-split__stats-divider { opacity: 0.4; }
.hero-split__cta { display: flex; gap: 1rem; flex-wrap: wrap; }

/* Mockup del reproductor (código, no imagen) */
.hero-mockup {
  width: 100%;
  max-width: 460px;
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-hover);
  border: 1px solid var(--color-border);
  overflow: hidden;
}
.hero-mockup__topbar {
  display: flex;
  gap: 0.4rem;
  padding: 0.75rem 1rem;
  background: var(--color-bg-soft);
}
.hero-mockup__topbar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-border);
}
.hero-mockup__video {
  height: 200px;
  background: linear-gradient(135deg, var(--color-navbar-bg), #1e293b);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-mockup__play {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  backdrop-filter: blur(4px);
}
.hero-mockup__progress { padding: 0.9rem 1rem 0; }
.hero-mockup__progress-bar {
  height: 6px;
  border-radius: 999px;
  background: var(--color-bg-soft);
  position: relative;
  overflow: hidden;
}
.hero-mockup__progress-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 62%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
  border-radius: 999px;
}
.hero-mockup__sidebar {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.hero-mockup__lesson {
  font-size: 0.82rem;
  padding: 0.6rem 0.8rem;
  border-radius: 8px;
  background: var(--color-bg-soft);
  color: var(--color-text-muted);
}
.hero-mockup__lesson--done {
  color: var(--color-primary);
  background: var(--color-primary-soft);
}
.hero-mockup__lesson--active {
  color: var(--color-accent);
  background: var(--color-accent-soft);
  font-weight: 600;
}
@media (max-width: 768px) {
  .hero-split { padding: 2rem 1.25rem; gap: 2rem; }
  .hero-split__title { font-size: 2rem; }
  .hero-split__right { justify-content: center; }
}
/* ---------- Filtros (tabs) de categoría ---------- */
.course-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2.75rem;
}
.course-filter {
  border: 1.5px solid var(--color-border);
  background: #fff;
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  min-height: 44px;
}
.course-filter:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.course-filter--active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}
.course-filter--active:hover { color: #fff; }

/* ---------- Grilla de cursos + tarjeta v2 (hover CTA) ---------- */
.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.5rem;
}
.course-card-v2 {
  border-radius: var(--radius-card);
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.course-card-v2__instructor {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin: 0;
}
.course-card-v2__cta {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-primary);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.course-card-v2:hover .course-card-v2__cta {
  opacity: 1;
  transform: translateY(0);
}
.course-card-v2--oculto {
  opacity: 0;
  transform: scale(0.96);
  pointer-events: none;
  position: absolute;
  visibility: hidden;
}
@media (max-width: 1024px) {
  .course-card-v2__cta { opacity: 1; transform: none; }
}
/* ---------- Contador regresivo (cursos en vivo) ---------- */
.live-countdown {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.75rem;
}
.live-countdown__unit {
  background: var(--color-navbar-bg);
  color: #fff;
  border-radius: 10px;
  padding: 0.4rem 0.7rem;
  text-align: center;
  min-width: 52px;
}
.live-countdown__unit span {
  display: block;
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.1;
}
.live-countdown__unit small {
  display: block;
  font-size: 0.62rem;
  opacity: 0.75;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.live-countdown--live .live-countdown__unit {
  background: var(--color-accent);
  animation: live-pulse 1.4s ease-in-out infinite;
}
/* ---------- Scroll animations (fade-up) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal--visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Scroll horizontal táctil (tarjetas de cursos, solo móvil) ---------- */
@media (max-width: 768px) {
  .course-grid {
    display: flex;
    overflow-x: auto;
    gap: 1rem;
    grid-template-columns: none;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
  }
  .course-grid::-webkit-scrollbar { display: none; }
  .course-grid .course-card-v2 {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
}
/* ---------- Padding generoso en desktop (secciones principales) ---------- */
@media (min-width: 1024px) {
  .section-light,
  .section-dark,
  .home-closing,
  .cert-section,
  .hero-split {
    padding-top: 120px;
    padding-bottom: 120px;
  }
}
/* ============================================================
   Bloque nuevo — rediseño de Home (agregar al final de site.css)
   No modifica ninguna regla existente, solo agrega clases nuevas.
   ============================================================ */

/* ---------- Marquee de categorías (hero) ---------- */
.hero-marquee {
  margin-top: 1.75rem;
  overflow: hidden;
  border-top: 1px solid var(--color-border);
  padding-top: 1rem;
  max-width: 480px;
}
.hero-marquee__track {
  display: flex;
  gap: 0.6rem;
  white-space: nowrap;
  width: max-content;
  animation: mc-marquee-scroll 18s linear infinite;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
}
.hero-marquee__dot { opacity: 0.4; }
@keyframes mc-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
#heroExploreBtn { display: inline-flex; will-change: transform; transition: transform 0.05s linear; }

/* ---------- Módulo de cursos en vivo ---------- */
.live-module {
  background: #fff1f3;
  border-radius: 24px;
  padding: 2.5rem;
}
.live-module__head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.live-module__label { color: #e11d48; font-weight: 800; font-size: 0.8rem; letter-spacing: 0.4px; }
.live-module__title { font-size: 1.5rem; font-weight: 800; margin: 6px 0 6px; }
.live-module__subtitle { color: var(--color-text-muted); max-width: 560px; margin-bottom: 1.5rem; }

/* ---------- Subtítulo dentro del header de sección (selector) ---------- */
.home-section__subtitle-text {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin: 4px 0 0;
}

/* ---------- Explora por tema (bento) ---------- */
.cat-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 150px;
  gap: 1rem;
  max-width: 1000px;
  margin: 0 auto;
}
.cat-tile {
  border-radius: 18px;
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--color-bg-soft);
  transition: transform 0.2s ease;
}
.cat-tile:hover { transform: translateY(-4px); }
.cat-tile--big { grid-column: span 2; grid-row: span 2; background: var(--color-primary-soft); }
.cat-tile--wide { grid-column: span 2; background: var(--color-accent-soft); }
.cat-tile__icon { font-size: 1.6rem; margin-bottom: 0.5rem; }
.cat-tile h4 { font-weight: 800; font-size: 1rem; margin-bottom: 0.3rem; color: var(--color-navbar-bg); }
.cat-tile p { font-size: 0.82rem; color: var(--color-text-muted); margin: 0; }

@media (max-width: 768px) {
  .cat-bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; }
  .cat-tile--big, .cat-tile--wide { grid-column: span 2; }
}

/* ---------- Suscripción vs curso individual ---------- */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 800px;
  margin: 0 auto;
}
.plan-card {
  border: 1.5px solid var(--color-border);
  border-radius: 18px;
  padding: 1.75rem;
  background: #fff;
  position: relative;
}
.plan-card--featured { border-color: var(--color-primary); background: var(--color-primary-soft); }
.plan-card__tag {
  position: absolute; top: -13px; left: 1.5rem;
  background: var(--color-primary); color: #04342c;
  font-size: 0.75rem; font-weight: 800; padding: 4px 12px; border-radius: 999px;
}
.plan-card h4 { font-size: 1.15rem; font-weight: 800; }
.plan-price { font-size: 1.7rem; font-weight: 800; margin: 0.8rem 0 0.2rem; color: var(--color-navbar-bg); }
.plan-price span { font-size: 0.85rem; color: var(--color-text-muted); font-weight: 600; }
.plan-card ul { list-style: none; padding: 0; margin: 1rem 0; }
.plan-card li { padding: 0.4rem 0; font-size: 0.9rem; }
.plan-card__note { font-size: 0.78rem; color: var(--color-text-muted); margin-bottom: 1rem; }

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

/* ---------- Asesoría por WhatsApp ---------- */
.wa-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.75rem;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1rem;
}
.wa-section__chat {
  background: #e5ddd5;
  border-radius: 18px;
  padding: 1.1rem;
  max-width: 380px;
}
.wa-section__avatar { display: flex; align-items: center; gap: 10px; margin-bottom: 0.9rem; }
.wa-section__circle {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--color-primary-dark); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem;
}
.wa-section__status { font-size: 0.75rem; color: #075e54; }
.wa-bubble {
  background: #fff; border-radius: 12px; padding: 0.6rem 0.85rem;
  margin-bottom: 0.6rem; font-size: 0.88rem; max-width: 82%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.12);
}
.wa-bubble--me { background: #d9fdd3; margin-left: auto; }
.wa-section__copy h2 { font-size: 1.6rem; font-weight: 800; }
.wa-section__copy p { color: var(--color-text-muted); margin: 0.8rem 0 1.2rem; }

@media (max-width: 768px) {
  .wa-section { grid-template-columns: 1fr; }
}
/* ============================================================
   BLOQUE NUEVO DE HOME — version final
   IMPORTANTE: si ya habias pegado un bloque nuevo la vez anterior
   (el que empezaba con "Bloque nuevo -- rediseno de Home"), BORRALO
   por completo y pega este en su lugar. Este ya lo incluye todo.
   ============================================================ */

/* ---------- HERO oscuro ---------- */
.hero-split--dark {
  background: radial-gradient(900px 500px at 10% 0%, #10b98130, transparent 60%),
              radial-gradient(700px 500px at 100% 10%, #6366f130, transparent 55%),
              #08111f;
  color: #fff;
  border-radius: 24px;
  padding: 3.5rem;
}
.hero-split--dark .hero-split__eyebrow {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  color: #a7f3d0;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
}
.hero-split--dark .hero-split__title { color: #fff; }
.hero-split--dark .hero-split__subtitle { color: #cbd5e1; }
.hero-split--dark .hero-split__stats--dark span { color: #94a3b8; }
.btn-aula-outline--dark { color: #fff; border-color: rgba(255,255,255,0.3); }
.btn-aula-outline--dark:hover { background: rgba(255,255,255,0.08); }
.hero-mockup--dark { background: #0b1524; border: 1px solid rgba(255,255,255,0.1); }
#heroExploreBtn { display: inline-flex; will-change: transform; transition: transform 0.05s linear; }

/* ---------- Marquee de categorias ---------- */
.hero-marquee {
  margin-top: 1.75rem;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.14);
  padding-top: 1rem;
  max-width: 480px;
}
.hero-marquee__track {
  display: flex;
  gap: 0.6rem;
  white-space: nowrap;
  width: max-content;
  animation: mc-marquee-scroll 18s linear infinite;
  font-size: 0.85rem;
  font-weight: 600;
  color: #94a3b8;
}
.hero-marquee__dot { opacity: 0.4; }
@keyframes mc-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Modulo de cursos en vivo: destacado + lista ---------- */
.live-module {
  background: #fff1f3;
  border-radius: 24px;
  padding: 2.5rem;
}
.live-module__head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.live-module__label { color: #e11d48; font-weight: 800; font-size: 0.8rem; letter-spacing: 0.4px; }
.live-module__title { font-size: 1.5rem; font-weight: 800; margin: 6px 0 6px; }
.live-module__subtitle { color: var(--color-text-muted); max-width: 560px; margin-bottom: 1.5rem; }
.live-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.5rem; }
.live-card {
  background: #fff; border-radius: 16px; padding: 1.4rem;
  border: 1px solid #fecdd3; display: block; text-decoration: none; color: var(--color-text);
}
.live-card__badge { color: #e11d48; font-weight: 800; font-size: 0.75rem; letter-spacing: 0.4px; }
.live-card h4 { font-size: 1.2rem; margin: 0.6rem 0 0.4rem; font-weight: 800; }
.live-card p { color: var(--color-text-muted); font-size: 0.9rem; margin: 0 0 0.9rem; }
.live-card__meta { display: flex; gap: 1.2rem; font-size: 0.85rem; flex-wrap: wrap; }
.live-card__meta b { display: block; font-size: 0.75rem; color: var(--color-text-muted); font-weight: 600; }
.live-side { background: #fff; border-radius: 16px; border: 1px solid #fecdd3; padding: 1.4rem; }
.live-side h5 { font-size: 0.85rem; color: var(--color-text-muted); font-weight: 700; margin-bottom: 0.9rem; }
.live-side-item {
  display: flex; justify-content: space-between; font-size: 0.85rem; padding: 0.5rem 0;
  border-bottom: 1px dashed #fecdd3; text-decoration: none; color: var(--color-text);
}
.live-side-item:last-child { border-bottom: none; }

@media (max-width: 860px) { .live-grid { grid-template-columns: 1fr; } }

/* ---------- Subtitulo dentro del header de seccion ---------- */
.home-section__subtitle-text { color: var(--color-text-muted); font-size: 0.9rem; margin: 4px 0 0; }
.empty-state-mc { padding: 2rem; text-align: center; color: var(--color-text-muted); background: var(--color-bg-soft); border-radius: 16px; }

/* ---------- Explora por tema (bento, colores vivos) ---------- */
.cat-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 150px; gap: 1rem; max-width: 1000px; margin: 0 auto; }
.cat-tile {
  border-radius: 18px; padding: 1.4rem; display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(135deg, var(--color-navbar-bg), #1e293b); color: #fff; transition: transform 0.2s ease;
}
.cat-tile:hover { transform: translateY(-4px); }
.cat-tile--big { grid-column: span 2; grid-row: span 2; background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary)); }
.cat-tile--wide { grid-column: span 2; background: linear-gradient(135deg, var(--color-accent), #4338ca); }
.cat-tile:nth-child(3) { background: linear-gradient(135deg, #0f172a, var(--color-accent)); }
.cat-tile__icon { font-size: 1.6rem; margin-bottom: 0.5rem; }
.cat-tile h4 { font-weight: 800; font-size: 1rem; margin-bottom: 0.3rem; color: #fff; }
.cat-tile p { font-size: 0.82rem; color: rgba(255,255,255,0.82); margin: 0; }
@media (max-width: 768px) { .cat-bento { grid-template-columns: repeat(2, 1fr); } .cat-tile--big, .cat-tile--wide { grid-column: span 2; } }

/* ---------- Certificado (visual, sin verificacion en linea) ---------- */
.cert-section { background: var(--color-navbar-bg); color: #fff; padding: 3.5rem; border-radius: 24px; }
.cert-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.cert-copy h2 { font-size: 1.8rem; font-weight: 800; }
.cert-copy p { color: #cbd5e1; }
.cert-copy ul { list-style: none; padding: 0; margin: 1.2rem 0; }
.cert-copy li { padding: 0.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.1); color: #e2e8f0; font-size: 0.9rem; }
.cert-card { background: #fff; color: var(--color-text); border-radius: 18px; padding: 1.6rem; box-shadow: 0 30px 70px -20px rgba(0,0,0,0.5); }
.cert-card__top { display: flex; justify-content: space-between; align-items: flex-start; }
.cert-card__eyebrow { font-size: 0.75rem; color: var(--color-text-muted); }
.cert-card__seal {
  width: 56px; height: 56px; border-radius: 50%; background: var(--color-primary); color: #04342c;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.75rem;
  text-align: center; border: 3px solid rgba(4,52,44,0.2);
}
.cert-card__name { font-size: 1.3rem; font-weight: 800; margin: 1rem 0 0.3rem; }
.cert-card__meta { font-size: 0.8rem; color: var(--color-text-muted); }
@media (max-width: 860px) { .cert-grid { grid-template-columns: 1fr; } }

/* ---------- Suscripcion vs curso individual ---------- */
.plan-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; max-width: 800px; margin: 0 auto; }
.plan-card { border: 1.5px solid var(--color-border); border-radius: 18px; padding: 1.75rem; background: #fff; position: relative; }
.plan-card--featured { border-color: var(--color-primary); background: var(--color-primary-soft); }
.plan-card__tag { position: absolute; top: -13px; left: 1.5rem; background: var(--color-primary); color: #04342c; font-size: 0.75rem; font-weight: 800; padding: 4px 12px; border-radius: 999px; }
.plan-card h4 { font-size: 1.15rem; font-weight: 800; }
.plan-price { font-size: 1.7rem; font-weight: 800; margin: 0.8rem 0 0.2rem; color: var(--color-navbar-bg); }
.plan-price span { font-size: 0.85rem; color: var(--color-text-muted); font-weight: 600; }
.plan-card ul { list-style: none; padding: 0; margin: 1rem 0; }
.plan-card li { padding: 0.4rem 0; font-size: 0.9rem; }
.plan-card__note { font-size: 0.78rem; color: var(--color-text-muted); margin-bottom: 1rem; }
@media (max-width: 768px) { .plan-grid { grid-template-columns: 1fr; } }

/* ---------- Asesoria por WhatsApp ---------- */
.wa-section {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2.75rem; align-items: center;
  max-width: 1000px; margin: 0 auto; padding: 2.5rem 1.5rem; background: var(--color-bg-soft); border-radius: 24px;
}
.wa-section__chat { background: #e5ddd5; border-radius: 18px; padding: 1.1rem; max-width: 380px; }
.wa-section__avatar { display: flex; align-items: center; gap: 10px; margin-bottom: 0.9rem; }
.wa-section__circle { width: 38px; height: 38px; border-radius: 50%; background: var(--color-primary-dark); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; }
.wa-section__status { font-size: 0.75rem; color: #075e54; }
.wa-bubble { background: #fff; border-radius: 12px; padding: 0.6rem 0.85rem; margin-bottom: 0.6rem; font-size: 0.88rem; max-width: 82%; box-shadow: 0 1px 2px rgba(0,0,0,0.12); }
.wa-bubble--me { background: #d9fdd3; margin-left: auto; }
.wa-section__copy h2 { font-size: 1.6rem; font-weight: 800; }
.wa-section__copy p { color: var(--color-text-muted); margin: 0.8rem 0 1.2rem; }
@media (max-width: 768px) { .wa-section { grid-template-columns: 1fr; } }

/* ---------- FAQ rediseñada ---------- */
.faq-mc { max-width: 720px; margin: 0 auto; }
.faq-mc__item { border-bottom: 1px solid var(--color-border); }
.faq-mc__btn {
  width: 100%; text-align: left; background: none; border: none; padding: 1.1rem 0;
  font-size: 1rem; font-weight: 700; color: var(--color-text); display: flex; justify-content: space-between; align-items: center; cursor: pointer;
}
.faq-mc__icon { color: var(--color-primary-dark); font-size: 1.2rem; }
.faq-mc__body { padding: 0 0 1.2rem; color: var(--color-text-muted); font-size: 0.92rem; }
/* ============================================================
   BLOQUE NUEVO DE HOME -- version 3 (reemplaza cualquier bloque anterior)
   Borra el bloque que pegaste antes por completo y pega este.
   ============================================================ */

/* ---------- Tipografia para titulos (look corporativo/financiero) ---------- */
/* Requiere agregar este link en base.html, dentro de <head>, junto a la fuente
   Plus Jakarta Sans que ya tienes (te explico exactamente donde en el mensaje) */
.hero-split__title, .live-module__title, .why-section__title,
.cert-copy h2, .wa-section__copy h2, .home-closing__title,
.welcome-banner h2, .cat-tile h4, .live-card h4 {
  font-family: 'Source Serif 4', 'Plus Jakarta Sans', serif;
  font-weight: 600;
}

/* ---------- HERO oscuro ---------- */
.hero-split--dark {
  background: radial-gradient(900px 500px at 10% 0%, #10b98130, transparent 60%),
              radial-gradient(700px 500px at 100% 10%, #6366f130, transparent 55%),
              #08111f;
  color: #fff;
  border-radius: 24px;
  padding: 3.5rem;
}
.hero-split--dark .hero-split__eyebrow {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  color: #a7f3d0;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
}
.hero-split--dark .hero-split__title { color: #fff; }
.hero-split--dark .hero-split__subtitle { color: #cbd5e1; }
.hero-split--dark .hero-split__stats--dark span { color: #94a3b8; }

/* boton outline oscuro -- corregido para que el texto nunca se pierda en hover */
.hero-split--dark .btn-aula-outline--dark {
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.35);
}
.hero-split--dark .btn-aula-outline--dark:hover {
  color: var(--color-navbar-bg);
  background: #fff;
  border-color: #fff;
}
.hero-mockup--dark { background: #0b1524; border: 1px solid rgba(255,255,255,0.1); }
#heroExploreBtn { display: inline-flex; will-change: transform; transition: transform 0.05s linear; }

/* ---------- Marquee de categorias ---------- */
.hero-marquee { margin-top: 1.75rem; overflow: hidden; border-top: 1px solid rgba(255,255,255,0.14); padding-top: 1rem; max-width: 480px; }
.hero-marquee__track { display: flex; gap: 0.6rem; white-space: nowrap; width: max-content; animation: mc-marquee-scroll 18s linear infinite; font-size: 0.85rem; font-weight: 600; color: #94a3b8; }
.hero-marquee__dot { opacity: 0.4; }
@keyframes mc-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Banner de bienvenida (usuario logueado) ---------- */
.welcome-banner {
  background: linear-gradient(135deg, var(--color-navbar-bg), #1e293b);
  color: #fff;
  border-radius: 24px;
  padding: 2.2rem 2.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.welcome-banner__eyebrow { display: block; color: #6ee7b7; font-weight: 700; font-size: 0.8rem; margin-bottom: 0.4rem; }
.welcome-banner h2 { font-size: 1.5rem; color: #fff; margin: 0 0 0.4rem; }
.welcome-banner p { color: #cbd5e1; margin: 0; font-size: 0.92rem; }

/* ---------- Modulo de cursos en vivo ---------- */
.live-module { background: #fff1f3; border-radius: 24px; padding: 2.5rem; }
.live-module__head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.live-module__label { color: #e11d48; font-weight: 800; font-size: 0.8rem; letter-spacing: 0.4px; }
.live-module__title { font-size: 1.5rem; margin: 6px 0 6px; }
.live-module__subtitle { color: var(--color-text-muted); max-width: 560px; margin-bottom: 1.5rem; }
.live-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.5rem; }
.live-card { background: #fff; border-radius: 16px; padding: 1.4rem; border: 1px solid #fecdd3; display: block; text-decoration: none; color: var(--color-text); }
.live-card__badge { color: #e11d48; font-weight: 800; font-size: 0.75rem; letter-spacing: 0.4px; }
.live-card h4 { font-size: 1.2rem; margin: 0.6rem 0 0.4rem; }
.live-card p { color: var(--color-text-muted); font-size: 0.9rem; margin: 0 0 0.9rem; }
.live-card__meta { display: flex; gap: 1.2rem; font-size: 0.85rem; flex-wrap: wrap; }
.live-card__meta b { display: block; font-size: 0.75rem; color: var(--color-text-muted); font-weight: 600; }
.live-side { background: #fff; border-radius: 16px; border: 1px solid #fecdd3; padding: 1.4rem; }
.live-side h5 { font-size: 0.85rem; color: var(--color-text-muted); font-weight: 700; margin-bottom: 0.9rem; }
.live-side-item { display: flex; justify-content: space-between; font-size: 0.85rem; padding: 0.5rem 0; border-bottom: 1px dashed #fecdd3; text-decoration: none; color: var(--color-text); }
.live-side-item:last-child { border-bottom: none; }
.live-dot--green { background: var(--color-primary); }
@media (max-width: 860px) { .live-grid { grid-template-columns: 1fr; } }

/* ---------- Cursos grabados ---------- */
.home-section__subtitle-text { color: var(--color-text-muted); font-size: 0.9rem; margin: 4px 0 0; }
.recorded-tag { display: flex; align-items: center; gap: 8px; margin: 1.2rem 0 1rem; }
.recorded-tag__label { color: var(--color-primary-dark); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.4px; }
.empty-state-mc { padding: 2rem; text-align: center; color: var(--color-text-muted); background: var(--color-bg-soft); border-radius: 16px; }

/* ---------- Explora por tema (bento) ---------- */
.cat-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 150px; gap: 1rem; max-width: 1000px; margin: 0 auto; }
.cat-tile { border-radius: 18px; padding: 1.4rem; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(135deg, var(--color-navbar-bg), #1e293b); color: #fff; transition: transform 0.2s ease; }
.cat-tile:hover { transform: translateY(-4px); }
.cat-tile--big { grid-column: span 2; grid-row: span 2; background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary)); }
.cat-tile--wide { grid-column: span 2; background: linear-gradient(135deg, var(--color-accent), #4338ca); }
.cat-tile:nth-child(3) { background: linear-gradient(135deg, #0f172a, var(--color-accent)); }
.cat-tile__icon { font-size: 1.6rem; margin-bottom: 0.5rem; }
.cat-tile h4 { font-size: 1rem; margin-bottom: 0.3rem; color: #fff; }
.cat-tile p { font-size: 0.82rem; color: rgba(255,255,255,0.82); margin: 0; }
@media (max-width: 768px) { .cat-bento { grid-template-columns: repeat(2, 1fr); } .cat-tile--big, .cat-tile--wide { grid-column: span 2; } }

/* ---------- Certificado, con mas detalle visual ---------- */
.cert-section { background: var(--color-navbar-bg); color: #fff; padding: 3.5rem; border-radius: 24px; }
.cert-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.cert-copy h2 { font-size: 1.8rem; }
.cert-copy p { color: #cbd5e1; }
.cert-copy ul { list-style: none; padding: 0; margin: 1.2rem 0; }
.cert-copy li { padding: 0.5rem 0; border-bottom: 1px solid rgba(255,255,255,0.1); color: #e2e8f0; font-size: 0.9rem; }
.cert-card {
  position: relative; overflow: hidden;
  background: #fdfcf8; color: var(--color-text); border-radius: 18px; padding: 1.8rem;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,0.5);
  border: 1px solid #e5e0d0;
}
.cert-card__ribbon {
  position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
}
.cert-card__top { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 0.5rem; }
.cert-card__eyebrow { font-size: 0.72rem; letter-spacing: 0.06em; color: var(--color-text-muted); }
.cert-card__seal {
  width: 56px; height: 56px; border-radius: 50%; background: var(--color-primary); color: #04342c;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.75rem;
  text-align: center; border: 3px solid rgba(4,52,44,0.2);
}
.cert-card__name { font-size: 1.3rem; font-weight: 700; margin: 1.1rem 0 0.2rem; font-family: 'Source Serif 4', serif; }
.cert-card__course { font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 1.3rem; }
.cert-card__foot { display: flex; justify-content: space-between; align-items: flex-end; border-top: 1px dashed #d8d2bd; padding-top: 1rem; }
.cert-card__qr { width: 46px; height: 46px; background: repeating-linear-gradient(45deg, #0f172a 0 4px, #fdfcf8 4px 8px); border-radius: 4px; }
.cert-card__sign { text-align: center; }
.cert-card__sign-line { width: 110px; border-top: 1px solid var(--color-text); margin-bottom: 4px; }
.cert-card__sign span { font-size: 0.7rem; color: var(--color-text-muted); }
@media (max-width: 860px) { .cert-grid { grid-template-columns: 1fr; } }

/* ---------- Suscripcion vs individual ---------- */
.plan-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; max-width: 800px; margin: 0 auto; }
.plan-card { border: 1.5px solid var(--color-border); border-radius: 18px; padding: 1.75rem; background: #fff; position: relative; }
.plan-card--featured { border-color: var(--color-primary); background: var(--color-primary-soft); }
.plan-card__tag { position: absolute; top: -13px; left: 1.5rem; background: var(--color-primary); color: #04342c; font-size: 0.75rem; font-weight: 800; padding: 4px 12px; border-radius: 999px; }
.plan-card h4 { font-size: 1.15rem; font-weight: 800; }
.plan-price { font-size: 1.7rem; font-weight: 800; margin: 0.8rem 0 0.2rem; color: var(--color-navbar-bg); }
.plan-price span { font-size: 0.85rem; color: var(--color-text-muted); font-weight: 600; }
.plan-card ul { list-style: none; padding: 0; margin: 1rem 0; }
.plan-card li { padding: 0.4rem 0; font-size: 0.9rem; }
.plan-card__note { font-size: 0.78rem; color: var(--color-text-muted); margin-bottom: 1rem; }
@media (max-width: 768px) { .plan-grid { grid-template-columns: 1fr; } }

/* ---------- WhatsApp ---------- */
.wa-section { display: grid; grid-template-columns: 1fr 1fr; gap: 2.75rem; align-items: center; max-width: 1000px; margin: 0 auto; padding: 2.5rem 1.5rem; background: var(--color-bg-soft); border-radius: 24px; }
.wa-section__chat { background: #e5ddd5; border-radius: 18px; padding: 1.1rem; max-width: 380px; }
.wa-section__avatar { display: flex; align-items: center; gap: 10px; margin-bottom: 0.9rem; }
.wa-section__circle { width: 38px; height: 38px; border-radius: 50%; background: var(--color-primary-dark); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; }
.wa-section__status { font-size: 0.75rem; color: #075e54; }
.wa-bubble { background: #fff; border-radius: 12px; padding: 0.6rem 0.85rem; margin-bottom: 0.6rem; font-size: 0.88rem; max-width: 82%; box-shadow: 0 1px 2px rgba(0,0,0,0.12); }
.wa-bubble--me { background: #d9fdd3; margin-left: auto; }
.wa-section__copy h2 { font-size: 1.6rem; }
.wa-section__copy p { color: var(--color-text-muted); margin: 0.8rem 0 1.2rem; }
@media (max-width: 768px) { .wa-section { grid-template-columns: 1fr; } }

/* ---------- Por que elegirnos: tarjetas nuevas ---------- */
.why-tile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; max-width: 1100px; margin: 0 auto; }
.why-tile {
  background: #fff; border: 1.5px solid var(--color-border); border-radius: 16px; padding: 1.5rem;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.why-tile:hover { transform: translateY(-5px); border-color: var(--color-primary); box-shadow: 0 14px 30px -12px rgba(16,185,129,0.35); }
.why-tile__icon {
  display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px;
  border-radius: 12px; background: var(--color-primary-soft); font-size: 1.2rem; margin-bottom: 0.9rem;
}
.why-tile h4 { font-size: 1rem; font-weight: 800; margin-bottom: 0.4rem; }
.why-tile p { font-size: 0.85rem; color: var(--color-text-muted); margin: 0; }
@media (max-width: 860px) { .why-tile-grid { grid-template-columns: repeat(2, 1fr); } }

/* ==================================================================
   Sistema de diseño 2026 (rediseño) — componentes compartidos entre
   home.html, catalog.html y las próximas páginas rediseñadas.
   ================================================================== */
.mc-section { padding: 64px 0; }
.mc-section--alt { background: var(--mc-bg-alt); border-radius: 28px; padding: 56px 40px; }
.mc-section__head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 32px; flex-wrap: wrap; gap: 16px; }
.mc-section__eyebrow { font-size: 13px; font-weight: 700; color: var(--mc-teal-600); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }
.mc-section__title { font-size: 26px; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.mc-section__link { font-size: 14px; font-weight: 600; color: var(--mc-navy-800); }

.mc-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.mc-chip { background: #fff; border: 1px solid var(--mc-line); padding: 9px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--mc-ink); cursor: pointer; display: inline-block; }
.mc-chip--active { background: var(--mc-navy-800); color: #fff; border-color: var(--mc-navy-800); }

.mc-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.mc-card { background: #fff; border: 1px solid var(--mc-line); border-radius: 16px; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; display:block; color:var(--mc-ink); }
.mc-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(15,44,89,.08); }
.mc-card__top { height: 108px; position: relative; display: flex; align-items: flex-end; padding: 14px; background-size: cover; background-position: center; }
.mc-card__top--fallback1 { background: linear-gradient(135deg,#12A17B,#0B7A5C); }
.mc-card__top--fallback2 { background: linear-gradient(135deg,#E0693C,#B94A24); }
.mc-card__top--fallback3 { background: linear-gradient(135deg,#17407D,#0B1F3A); }
.mc-card__badge { background: rgba(255,255,255,.2); color: #fff; font-size: 11.5px; font-weight: 600; padding: 5px 10px; border-radius: 999px; }
.mc-card__body { padding: 18px 18px 20px; }
.mc-card__title { font-size: 15.5px; font-weight: 700; margin: 0 0 6px; line-height: 1.3; }
.mc-card__meta { font-size: 13px; color: var(--mc-muted); display:flex; align-items:center; gap:6px; }
.mc-card__price { font-size: 14.5px; font-weight: 700; color: var(--mc-navy-800); margin-top: 8px; }

.mc-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--mc-line); border: 1px solid var(--mc-line); border-radius: 16px; overflow: hidden; }
.mc-stat { background: #fff; padding: 24px 22px; }
.mc-stat__num { font-family:'Source Serif 4',serif; font-size: 28px; font-weight: 700; color: var(--mc-navy-800); }
.mc-stat__label { font-size: 13px; color: var(--mc-muted); margin-top: 4px; }

.mc-cta-band { background: var(--mc-coral-500); border-radius: 24px; padding: 52px 44px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px; }
.mc-cta-band h3 { color: #fff; font-size: 24px; margin: 0 0 6px; font-weight: 700; font-family:'Source Serif 4',serif; }
.mc-cta-band p { color: #FBE0D4; margin: 0; font-size: 15px; }

.mc-faq-item { border-bottom: 1px solid var(--mc-line); padding: 18px 0; cursor: pointer; }
.mc-faq-q { font-size: 15px; font-weight: 600; display: flex; justify-content: space-between; }
.mc-faq-a { font-size: 14px; color: var(--mc-muted); line-height: 1.6; margin-top: 10px; display: none; }
.mc-faq-item.mc-open .mc-faq-a { display: block; }

.mc-empty { text-align:center; padding: 60px 20px; }
.mc-empty__icon { font-size: 40px; display:block; margin-bottom: 14px; }
.mc-empty h4 { font-size: 18px; margin-bottom: 8px; }
.mc-empty p { color: var(--mc-muted); font-size: 14px; margin-bottom: 20px; }

.mc-reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.mc-reveal.mc-in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    .mc-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}
@media (max-width: 900px) {
    .mc-grid { grid-template-columns: repeat(2,1fr); }
    .mc-stats { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 560px) {
    .mc-grid, .mc-stats { grid-template-columns: 1fr; }
    .mc-section--alt { padding: 36px 22px; }
    .mc-cta-band { flex-direction: column; align-items: flex-start; padding: 32px 24px; }
}

/* ==================================================================
   Detalle de curso (grabado y en vivo) — clases compartidas.
   ================================================================== */
.mc-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.08); color: var(--mc-teal-100); font-size: 12.5px; font-weight: 600; padding: 7px 14px; border-radius: 999px; margin-bottom: 22px; }
.mc-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mc-teal-600); }

.mc-course-hero { background: linear-gradient(160deg, var(--mc-navy-900), var(--mc-navy-700)); background-size: cover; background-position: center; border-radius: 24px; padding: 56px 40px; margin-top: 8px; color: #fff; }
.mc-course-hero__inner { max-width: 720px; }
.mc-course-hero h1 { font-family:'Source Serif 4',serif; font-size: 32px; font-weight: 700; margin: 6px 0 12px; }
.mc-course-hero__sub { color: #C6D2E8; font-size: 15px; margin: 0 0 18px; }
.mc-course-hero__meta { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13.5px; color: #B9C6E0; }
.mc-course-hero__meta i { margin-right: 5px; }

.mc-course-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; margin-top: 32px; align-items: start; }

.mc-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--mc-line); margin-bottom: 24px; flex-wrap: wrap; }
.mc-tab { background: none; border: none; padding: 10px 16px; font-size: 14px; font-weight: 600; color: var(--mc-muted); cursor: pointer; font-family: inherit; border-bottom: 2px solid transparent; }
.mc-tab--active { color: var(--mc-navy-800); border-bottom-color: var(--mc-navy-800); }
.mc-tab-panel { display: none; }
.mc-tab-panel--active { display: block; }

.mc-accordion-item { border: 1px solid var(--mc-line); border-radius: 12px; margin-bottom: 10px; overflow: hidden; }
.mc-accordion-head { width: 100%; text-align: left; background: var(--mc-bg-alt); border: none; padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-family: inherit; }
.mc-accordion-head span:first-child { font-weight: 600; font-size: 14.5px; }
.mc-accordion-meta { font-size: 12.5px; color: var(--mc-muted); }
.mc-accordion-body { display: none; }
.mc-accordion-body--open { display: block; }
.mc-lesson-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-top: 1px solid var(--mc-line); font-size: 13.5px; }
.mc-lesson-time { color: var(--mc-muted); font-size: 12.5px; }
.mc-lesson-note { color: var(--mc-muted); font-size: 12px; }
.mc-badge-preview { background: var(--mc-teal-100); color: var(--mc-teal-600); font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; margin-left: 6px; }

.mc-locked-note { background: #FEF3E8; color: #B94A24; padding: 12px 16px; border-radius: 10px; font-size: 13.5px; }

.mc-side-card { background: #fff; border: 1px solid var(--mc-line); border-radius: 16px; padding: 22px; margin-bottom: 16px; }
.mc-side-price { font-family:'Source Serif 4',serif; font-size: 26px; font-weight: 700; color: var(--mc-navy-800); margin-bottom: 14px; }
.mc-access-badge { background: var(--mc-teal-100); color: var(--mc-teal-600); padding: 10px 14px; border-radius: 10px; font-size: 13.5px; font-weight: 600; }
.mc-side-subnote { background: var(--mc-bg-alt); border-radius: 10px; padding: 12px; margin-top: 12px; }

.mc-side-includes { background: var(--mc-bg-alt); border-radius: 16px; padding: 20px; }
.mc-side-includes h6 { font-size: 14px; font-weight: 700; margin-bottom: 12px; }
.mc-side-includes ul { list-style: none; padding: 0; margin: 0; }
.mc-side-includes li { padding: 6px 0; font-size: 13.5px; color: var(--mc-ink); }

.mc-pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mc-coral-500); animation: mcpulselive 1.6s infinite; }

@keyframes mcpulselive { 0%{box-shadow:0 0 0 0 rgba(216,90,48,.6);} 70%{box-shadow:0 0 0 7px rgba(216,90,48,0);} 100%{box-shadow:0 0 0 0 rgba(216,90,48,0);} }
.mc-badge-locked { background: #EDEBE3; color: var(--mc-muted); font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; margin-left: 8px; }

@media (max-width: 900px) {
    .mc-course-layout { grid-template-columns: 1fr; }
    .mc-course-hero { padding: 40px 26px; }
}
@media (max-width: 560px) {
    .mc-course-hero h1 { font-size: 24px; }
    .mc-tabs { overflow-x: auto; flex-wrap: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
    .mc-pulse-dot { animation: none !important; }
}

/* ==================================================================
   Páginas de autenticación (login, registro, etc.)
   ================================================================== */
.mc-auth-wrap { display: flex; min-height: 100vh; }
.mc-auth-side {
    width: 45%; background: linear-gradient(160deg, var(--mc-navy-900) 0%, var(--mc-navy-800) 55%, var(--mc-navy-700) 100%);
    display: flex; flex-direction: column; justify-content: center; padding: 60px 56px; color: #fff;
}
.mc-auth-side__logo img { height: 56px; margin-bottom: 40px; filter: brightness(0) invert(1); }
.mc-auth-side h2 { font-family:'Source Serif 4',serif; font-size: 30px; font-weight: 700; line-height: 1.25; margin: 0 0 16px; max-width: 380px; }
.mc-auth-side p { color: #B9C6E0; font-size: 15px; line-height: 1.6; max-width: 340px; margin: 0 0 32px; }
.mc-auth-mini-ledger { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 20px 22px; max-width: 320px; }
.mc-auth-mini-ledger div { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 13.5px; color: #C6D2E8; }
.mc-auth-mini-ledger div:last-child { border-bottom: none; }
.mc-auth-mini-ledger strong { color: #fff; }

.mc-auth-content { flex: 1; display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: #fff; }
.mc-auth-card { width: 100%; max-width: 380px; }
.mc-auth-logo-mobile { display: none; text-align: center; margin-bottom: 24px; }
.mc-auth-logo-mobile img { height: 32px; }

.mc-auth-title { font-family:'Source Serif 4',serif; font-size: 24px; font-weight: 700; margin: 0 0 6px; text-align: center; }
.mc-auth-subtitle { color: var(--mc-muted); font-size: 14px; margin: 0 0 28px; text-align: center; }

.mc-form-group { margin-bottom: 16px; }
.mc-form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--mc-ink); margin-bottom: 6px; }

.mc-auth-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: var(--mc-muted); font-size: 12.5px; }
.mc-auth-divider::before, .mc-auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--mc-line); }

.mc-btn-google {
    display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 11px;
    border: 1px solid var(--mc-line); border-radius: 8px; background: #fff; font-size: 14px; font-weight: 600;
    color: var(--mc-ink); text-decoration: none;
}
.mc-btn-google:hover { background: var(--mc-bg-alt); }

.mc-auth-footer-note { text-align: center; font-size: 12px; color: var(--mc-muted); margin-top: 22px; line-height: 1.6; }
.mc-auth-footer-note a { color: var(--mc-navy-800); font-weight: 600; }
.mc-auth-switch { text-align: center; font-size: 14px; margin-top: 18px; }
.mc-auth-switch a { color: var(--mc-navy-800); font-weight: 700; }
.mc-auth-forgot-link { display: block; text-align: right; font-size: 13px; color: var(--mc-navy-800); font-weight: 600; margin-bottom: 18px; }

.mc-alert { padding: 12px 16px; border-radius: 10px; font-size: 13.5px; margin-bottom: 16px; }
.mc-alert-danger { background: #FCE9E4; color: #B94A24; }
.mc-alert-success { background: var(--mc-teal-100); color: var(--mc-teal-600); }
.mc-alert-info { background: #E9F0FA; color: var(--mc-navy-800); }
.mc-alert-warning { background: #FEF3E0; color: #8A5A00; }

@media (max-width: 900px) {
    .mc-auth-side { display: none; }
    .mc-auth-content { width: 100%; }
    .mc-auth-logo-mobile { display: block; }
}

/* ============================================================
   Panel de profesor — vista de curso individual
   ============================================================ */

.mc-back-link { display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600; color:var(--mc-navy-800); margin-bottom:14px; }
.mc-back-link:hover { color:var(--mc-navy-700); }

.mc-dash-header { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap; margin-bottom:24px; }
.mc-dash-title { font-family:'Source Serif 4',serif; font-size:26px; font-weight:700; color:var(--mc-ink); margin:0 0 6px; }

.mc-course-image-row { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:24px; }
.mc-course-image-thumb {
    width:220px; height:124px; object-fit:cover; border-radius:14px;
    border:1px solid var(--mc-line); box-shadow:0 4px 14px rgba(15,44,89,.08);
}
.mc-course-image-thumb--empty {
    display:flex; align-items:center; justify-content:center;
    background:var(--mc-bg-alt); color:var(--mc-muted); font-size:13px;
}

.mc-chips { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px; }

.mc-module-card {
    background:#fff; border:1px solid var(--mc-line); border-radius:16px;
    overflow:hidden; box-shadow:0 1px 3px rgba(15,44,89,.04);
}
.mc-module-card__head {
    display:flex; justify-content:space-between; align-items:center; gap:12px;
    padding:16px 18px; flex-wrap:wrap; background:#fff;
}
.mc-module-card__toggle {
    background:none; border:none; text-align:left; padding:0; font-family:inherit;
    color:var(--mc-ink); font-size:14.5px; cursor:pointer; flex:1; min-width:200px;
}
.mc-module-card__body { padding:0 18px 18px; background:var(--mc-bg-alt); }

.mc-lesson-card {
    background:#fff; border:1px solid var(--mc-line); border-radius:12px;
    margin-top:14px; overflow:hidden;
}
.mc-lesson-card__head {
    display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:12px 14px;
}
.mc-lesson-card__toggle {
    background:none; border:none; text-align:left; padding:0; font-family:inherit;
    color:var(--mc-ink); font-size:14px; cursor:pointer;
}

.mc-tag {
    display:inline-block; font-size:11.5px; font-weight:700; padding:4px 10px;
    border-radius:999px; background:var(--mc-bg-alt); color:var(--mc-muted);
}
.mc-tag--live { background:var(--mc-teal-100); color:var(--mc-teal-600); }
.mc-tag--sync { background:#E9F0FA; color:var(--mc-navy-800); }

.mc-inline-form {
    background:var(--mc-bg-alt); border-radius:12px; padding:14px; margin:0 0 4px;
}

@media (max-width: 700px) {
    .mc-course-image-thumb, .mc-course-image-thumb--empty { width:100%; height:180px; }
    .mc-dash-header { flex-direction:column; }
}