/* ===========================================================
   DGM Instituto Audiovisual — Custom Styles (built on Bootstrap 5)
   =========================================================== */

:root {
  --dgm-purple: #6C28F0;
  --dgm-purple-light: #9B6CF6;
  --dgm-purple-soft: #EFE6FE;
  --dgm-dark-bg: #0D0A1A;
  --dgm-dark-bg-2: #14102A;
  --dgm-navy: #171233;
  --dgm-text-muted: #8B87A3;
  --dgm-white: #FFFFFF;
  --dgm-font-display: 'Poppins', sans-serif;
  --dgm-font-body: 'Inter', sans-serif;
}

body {
  font-family: var(--dgm-font-body);
  color: #1B1730;
  background-color: #FFFFFF;
}

h1, h2, h3, h4, h5, h6,
.dgm-logo-text {
  font-family: var(--dgm-font-display);
}

a { text-decoration: none; }

/* ===================== NAVBAR ===================== */
.dgm-navbar {
  background-color: var(--dgm-dark-bg);
  padding: 1rem 0;
}

.dgm-logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #fff;
}
.dgm-logo img {
    height: 38px;
    width: auto;
    display: block;
}
.dgm-logo i {
  font-size: 1.6rem;
  color: var(--dgm-purple-light);
}

.dgm-logo-text {
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1;
  color: #fff;
}

.dgm-logo-text small {
  display: block;
  font-size: 0.55rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--dgm-text-muted);
  line-height: 1.1;
}

.dgm-nav-links .nav-link {
  color: #E4E1F0;
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.5rem 1rem;
}

.dgm-nav-links .nav-link:hover {
  color: var(--dgm-purple-light);
}

.dgm-dropdown {
  background-color: var(--dgm-navy);
  border: 1px solid rgba(255,255,255,0.08);
}

.dgm-dropdown .dropdown-item {
  color: #E4E1F0;
}

.dgm-dropdown .dropdown-item:hover {
  background-color: var(--dgm-purple);
  color: #fff;
}

.btn-icon {
  color: #E4E1F0;
  border: none;
  background: transparent;
  font-size: 1.1rem;
}

.dgm-btn-outline-pill {
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  border-radius: 50px;
  padding: 0.5rem 1.3rem;
  font-size: 0.9rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

.dgm-btn-outline-pill:hover {
  background-color: rgba(255,255,255,0.08);
  color: #fff;
}

/* ===================== HERO ===================== */
.dgm-hero {
  position: relative;
  background: linear-gradient(120deg, #0D0A1A 0%, #1A1035 55%, #2B1257 100%);
  padding: 4.5rem 0 6rem;
  overflow: hidden;
}

.dgm-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Degradé oscuro sobre la imagen — sin esto, si subes una foto clara
   o muy cargada, el texto del hero (a la izquierda) queda ilegible. */
.dgm-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    #0D0A1A 0%,
    rgba(13, 10, 26, 0.78) 35%,
    rgba(13, 10, 26, 0.35) 65%,
    rgba(13, 10, 26, 0.1) 100%
  );
  z-index: 1;
}

.dgm-hero-photo {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 75% 30%, rgba(108,40,240,0.55), transparent 55%),
    linear-gradient(200deg, #241645 0%, #100b22 70%);
  opacity: 0.9;
}

.dgm-hero-content { position: relative; z-index: 2; }

.dgm-hero-title {
  color: #fff;
  font-weight: 700;
  font-size: 3rem;
  line-height: 1.15;
  margin-bottom: 1.3rem;
}

.dgm-purple { color: var(--dgm-purple-light); }

.dgm-hero-subtitle {
  color: #C7C3DA;
  font-size: 1.05rem;
  max-width: 480px;
  margin-bottom: 2.3rem;
}

.dgm-feature-icons {
  max-width: 560px;
  margin-bottom: 0.5rem;
}

.dgm-feature-icons .feature-icon {
  font-size: 1.6rem;
  color: var(--dgm-purple-light);
  display: block;
  margin-bottom: 0.6rem;
}

.dgm-feature-icons p {
  color: #E4E1F0;
  font-size: 0.85rem;
  line-height: 1.35;
  margin-bottom: 0;
}

.dgm-btn-primary-pill {
  background-color: var(--dgm-purple);
  color: #fff;
  border-radius: 50px;
  padding: 0.85rem 1.7rem;
  font-weight: 600;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  border: none;
}

.dgm-btn-primary-pill:hover {
  background-color: #5a1fd0;
  color: #fff;
}

.dgm-btn-ghost-pill {
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  border-radius: 50px;
  padding: 0.85rem 1.7rem;
  font-weight: 600;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.dgm-btn-ghost-pill:hover {
  background-color: rgba(255,255,255,0.08);
  color: #fff;
}

/* Upcoming card */
.dgm-upcoming-card {
  position: relative;
  z-index: 2;
  background-color: #fff;
  border-radius: 18px;
  padding: 1.6rem;
  box-shadow: 0 25px 60px rgba(0,0,0,0.35);
}

.dgm-upcoming-eyebrow {
  color: var(--dgm-purple);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
}

.dgm-upcoming-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid #EDEBF5;
  color: #1B1730;
}

.dgm-upcoming-item:hover { color: var(--dgm-purple); }

.dgm-upcoming-item > i { margin-left: auto; color: #B5B0CC; }

.dgm-date-box {
  background-color: var(--dgm-purple-soft);
  color: var(--dgm-purple);
  border-radius: 10px;
  min-width: 56px;
  text-align: center;
  padding: 0.4rem 0;
  line-height: 1.1;
}

.dgm-date-box .day {
  display: block;
  font-weight: 700;
  font-size: 1.15rem;
}

.dgm-date-box .month {
  display: block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.dgm-upcoming-text p { font-size: 0.92rem; }

.dgm-upcoming-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--dgm-purple);
  font-weight: 600;
  font-size: 0.92rem;
  margin-top: 1rem;
}

/* ===================== STATS SECTION ===================== */
.dgm-stats-section {
  background-color: #fff;
  margin-top: -3.5rem;
  position: relative;
  z-index: 3;
  padding-bottom: 4rem;
}

.dgm-stats-card {
  background-color: #F7F6FC;
  border-radius: 18px;
  padding: 2.5rem 2rem;
  box-shadow: 0 15px 45px rgba(20, 10, 50, 0.06);
}

.dgm-stat {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.dgm-stat i {
  font-size: 1.6rem;
  color: var(--dgm-purple);
}

.dgm-stat h3 {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 0.1rem;
}

.dgm-stat p {
  font-size: 0.85rem;
  color: var(--dgm-text-muted);
  margin-bottom: 0;
}

/* ===================== SECTION TITLES ===================== */
.dgm-section-title {
  font-weight: 700;
  font-size: 1.7rem;
}

.dgm-link-arrow {
  color: var(--dgm-purple);
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
}

.dgm-link-arrow:hover { color: #5a1fd0; }

/* ===================== AREAS SECTION ===================== */
.dgm-areas-section { padding: 2rem 0 5rem; }

.dgm-area-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: var(--dgm-purple-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

.dgm-area-icon i {
  font-size: 1.6rem;
  color: var(--dgm-purple);
}

.dgm-area-item p {
  font-size: 0.9rem;
  font-weight: 600;
  color: #1B1730;
  max-width: 160px;
  margin: 0 auto;
}
.dgm-area-item a { 
  color: inherit; text-decoration: none; 
}
.dgm-area-item a:hover .dgm-area-icon { 
  background-color: var(--dgm-purple); 
}
.dgm-area-item a:hover .dgm-area-icon i { 
  color: #fff; 
}
.dgm-area-item a:hover p { 
  color: var(--dgm-purple); 
}

/* ===================== ALUMNI SECTION ===================== */

.dgm-alumni-section {
  background-color: var(--dgm-dark-bg);
  padding: 4.5rem 0;
}

/* Contenedor de cada alumno */
.dgm-alumni-section .col-6,
.dgm-alumni-section .col-lg-3 {
  display: flex;
  flex-direction: column;
}

/* Tarjeta principal */
.dgm-alumni-card {
  position: relative;
  display: block;
  width: 100%;
  height: 360px;
  min-height: 360px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  box-sizing: border-box;

  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;

  cursor: pointer;
}

/* Cuando la tarjeta es un button */
button.dgm-alumni-card {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  text-align: inherit;
  color: inherit;
}

/* Hover */
.dgm-alumni-card:hover {
  transform: translateY(-3px);
  transition: transform 0.25s ease;
}

/* Gradientes de respaldo */
.dgm-photo-1 {
  background-image: linear-gradient(160deg, #3a2b5c, #17101f);
}

.dgm-photo-2 {
  background-image: linear-gradient(160deg, #4a3568, #1a1226);
}

.dgm-photo-3 {
  background-image: linear-gradient(160deg, #2f2452, #14101f);
}

.dgm-photo-4 {
  background-image: linear-gradient(160deg, #503a72, #1a1226);
}


/* Botón de reproducción */
.dgm-play-btn,
.dgm-alumni-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 56px;
  height: 56px;

  border-radius: 50%;
  background-color: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.5);

  color: #fff;
  font-size: 1.3rem;

  display: flex;
  align-items: center;
  justify-content: center;

  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
}

/* Cuando NO hay video cargado, el ícono se renderiza como <span>
   puramente decorativo (sin data-bs-toggle) — ahí sí bloqueamos el
   puntero para que no dé la impresión de ser clickeable. */
span.dgm-play-btn {
  pointer-events: none;
  cursor: default;
}

/* Información debajo de la imagen */
.dgm-alumni-info {
  padding-top: 0.75rem;
}

.dgm-alumni-info strong {
  display: block;
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.25;
}

.dgm-alumni-info span {
  color: #B5B0CC;
  font-size: 0.8rem;
}


/* Caption, si posteriormente se utiliza dentro de la imagen */
.dgm-alumni-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  background: linear-gradient(
    0deg,
    rgba(0,0,0,0.85),
    transparent
  );

  padding: 1.5rem 1rem 1rem;
  text-align: left;
}

.dgm-alumni-caption .name {
  color: #fff;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  margin-bottom: 0.15rem;
}

.dgm-alumni-caption .role {
  color: #B5B0CC;
  font-size: 0.78rem;
  margin-bottom: 0;
}


/* Logos */
.dgm-logos-row {
  opacity: 0.85;
}

.dgm-logos-row img {
  display: block;
  max-width: 140px;
  max-height: 50px;
  width: auto;
  height: auto;
  margin: 0 auto;

  filter: brightness(0) invert(1);
  opacity: 0.85;
}

.dgm-logo-text-brand {
  color: #E4E1F0;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
}
.dgm-company-logo {
  display: block;
  max-height: 32px !important;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  opacity: 0.85;
}

/* ===================== RESPONSIVE ===================== */

@media (max-width: 991.98px) {
  .dgm-alumni-card {
    height: 320px;
    min-height: 320px;
  }
}

@media (max-width: 575.98px) {
  .dgm-alumni-card {
    height: 300px;
    min-height: 300px;
  }

  .dgm-alumni-info strong {
    font-size: 0.88rem;
  }
}
/* ===================== PROGRAMS SECTION ===================== */
.dgm-programs-section { padding: 4.5rem 0 5rem; }

.dgm-program-card {
  background-color: #fff;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #EFEDF7;
  height: 100%;
}

.dgm-program-thumb {
  aspect-ratio: 4 / 3;
  position: relative;
  display: flex;
  align-items: flex-start;
  padding: 0.9rem;
}

.dgm-thumb-1 { background: linear-gradient(150deg, #1c1533, #3d2a63); }
.dgm-thumb-2 { background: linear-gradient(150deg, #241040, #6C28F0); }
.dgm-thumb-3 { background: linear-gradient(150deg, #14101f, #322450); }
.dgm-thumb-4 { background: linear-gradient(150deg, #1a1226, #46306e); }

.dgm-badge-diplomado {
  background-color: var(--dgm-purple);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.4rem 0.8rem;
  border-radius: 50px;
}

.dgm-badge-curso {
  background-color: #fff;
  color: #1B1730;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.4rem 0.8rem;
  border-radius: 50px;
}

.dgm-program-body { padding: 1.1rem 1.2rem 1.4rem; }

.dgm-program-body h5 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
  min-height: 2.6rem;
}

.dgm-program-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.78rem;
  color: var(--dgm-text-muted);
}

.dgm-program-meta i { margin-right: 0.3rem; color: var(--dgm-purple); }

/* ===================== CTA BANNER ===================== */
.dgm-cta-banner {
  background: linear-gradient(90deg, var(--dgm-purple), #8a4bf5);
  border-radius: 18px;
  padding: 2rem 2.5rem;
  color: #fff;
}

.dgm-cta-icon {
  font-size: 2rem;
  background-color: rgba(255,255,255,0.15);
  padding: 0.9rem;
  border-radius: 50%;
}

.dgm-cta-banner h4 { font-weight: 700; }
.dgm-cta-banner p { color: #EDE6FE; font-size: 0.9rem; }

.dgm-btn-white-pill {
  background-color: #fff;
  color: var(--dgm-purple);
  border-radius: 50px;
  padding: 0.8rem 1.6rem;
  font-weight: 600;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

.dgm-btn-white-pill:hover { background-color: #f1eafe; color: var(--dgm-purple); }

/* ===================== FOOTER ===================== */
.dgm-footer {
  background-color: var(--dgm-dark-bg);
  color: #B5B0CC;
  padding: 4rem 0 1.5rem;
}

.dgm-footer h6 {
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 1.1rem;
}

.dgm-footer-desc {
  font-size: 0.85rem;
  color: #8B87A3;
  max-width: 280px;
}

.dgm-footer-links li { margin-bottom: 0.7rem; }
.dgm-footer-links a {
  color: #B5B0CC;
  font-size: 0.88rem;
}
.dgm-footer-links a:hover { color: var(--dgm-purple-light); }

.dgm-social-icons a {
  color: #B5B0CC;
  font-size: 1.1rem;
}
.dgm-social-icons a:hover { color: var(--dgm-purple-light); }

.dgm-newsletter-form .form-control {
  background-color: #1A1430;
  border: 1px solid #2C2650;
  color: #fff;
  border-radius: 50px 0 0 50px;
  font-size: 0.85rem;
  padding: 0.6rem 1.2rem;
}

.dgm-newsletter-form .form-control::placeholder { color: #8B87A3; }
.dgm-newsletter-form .form-control:focus { box-shadow: none; border-color: var(--dgm-purple); }

.dgm-newsletter-form .btn {
  background-color: var(--dgm-purple);
  color: #fff;
  border-radius: 0 50px 50px 0;
  padding: 0.6rem 1rem;
}

.dgm-footer-divider {
  border-color: #241d3f;
  margin: 2.5rem 0 1.5rem;
}

.dgm-footer-bottom {
  font-size: 0.82rem;
  color: #8B87A3;
}

.dgm-footer-bottom a {
  color: #8B87A3;
}

.dgm-footer-bottom a:hover { color: var(--dgm-purple-light); }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 991.98px) {
  .dgm-hero-title { font-size: 2.2rem; }
  .dgm-hero-bg { display: none; }
  .dgm-nav-links { text-align: center; margin-top: 1rem; }
  .dgm-nav-actions { justify-content: center; margin-top: 1rem; }
  .dgm-cta-banner { flex-direction: column; text-align: center; }
}

@media (max-width: 575.98px) {
  .dgm-hero-title { font-size: 1.8rem; }
  .dgm-stats-card { text-align: center; }
  .dgm-stat { justify-content: center; }
}

/* ===========================================================
   DIPLOMADOS LISTING PAGE
   =========================================================== */

.dgm-dark-page {
  background-color: var(--dgm-dark-bg);
}

/* Breadcrumb */
.dgm-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
}

.dgm-breadcrumb a {
  color: #B5B0CC;
}

.dgm-breadcrumb a:hover { color: var(--dgm-purple-light); }

.dgm-breadcrumb i { font-size: 0.7rem; color: #6C6690; }

.dgm-breadcrumb span { color: var(--dgm-purple-light); font-weight: 600; }

/* Diplomas hero */
.dgm-diplomas-hero {
  position: relative;
  padding: 2rem 0 3.5rem;
  overflow: hidden;
  min-height: 560px;
  display: flex;
  align-items: center;
}

.dgm-diplomas-hero-photo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #0D0A1A 30%, rgba(13,10,26,0.55) 60%, rgba(13,10,26,0.15) 100%),
    radial-gradient(circle at 82% 40%, rgba(108,40,240,0.5), transparent 55%),
    linear-gradient(200deg, #241645 0%, #0D0A1A 75%);
}
/* Opacidad para la foto de fondo del hero en páginas de contenido
   genérico (Quiénes Somos, etc.) — el degradé de fondo ya existe en
   .dgm-diplomas-hero-photo, esto solo atenúa la imagen para que el
   texto siga siendo legible encima. */
.dgm-diplomas-hero-photo {
  opacity: 0.35;
}

.dgm-diplomas-hero-content { position: relative; z-index: 2; }

.dgm-hero-title-sm { font-size: 2.6rem; }

.dgm-feature-icons-inline {
  color: #E4E1F0;
  font-size: 0.85rem;
}

.dgm-feature-icons-inline span { line-height: 1.25; }

.feature-icon-sm {
  font-size: 1.3rem;
  color: var(--dgm-purple-light);
}

.dgm-avatar-stack {
  display: flex;
}

.dgm-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--dgm-dark-bg);
  background: linear-gradient(135deg, #6C28F0, #3d2a63);
  margin-left: -10px;
  display: inline-block;
}

.dgm-avatar-stack .dgm-avatar:first-child { margin-left: 0; }

.dgm-avatars-text {
  color: #C7C3DA;
  font-size: 0.8rem;
  line-height: 1.3;
}

/* Filter pills */
.dgm-filters-section {
  padding-bottom: 2.5rem;
  border-bottom: 1px solid #201a3a;
}

.dgm-filter-pills {
  scrollbar-width: thin;
}

.dgm-filter-pill {
  background-color: var(--dgm-dark-bg-2);
  border: 1px solid #2C2650;
  color: #C7C3DA;
  border-radius: 50px;
  padding: 0.65rem 1.3rem;
  font-size: 0.88rem;
  font-weight: 500;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.dgm-filter-pill i { font-size: 0.95rem; }

.dgm-filter-pill.active {
  background-color: rgba(108,40,240,0.12);
  border-color: var(--dgm-purple);
  color: #fff;
}

.dgm-filter-pill:hover { border-color: var(--dgm-purple-light); color: #fff; }

/* Diplomas grid section */
.dgm-diplomas-grid-section { padding: 3.5rem 0 4.5rem; }

.dgm-diplomas-count {
  color: var(--dgm-text-muted);
  font-size: 0.88rem;
  margin-bottom: 0;
}

.dgm-sort-btn {
  background-color: var(--dgm-dark-bg-2);
  border: 1px solid #2C2650;
  color: #E4E1F0;
  border-radius: 50px;
  padding: 0.55rem 1.2rem;
  font-size: 0.85rem;
}

.dgm-sort-btn:hover { color: #fff; border-color: var(--dgm-purple-light); }

/* Diploma card */
.dgm-diploma-card {
  background-color: var(--dgm-dark-bg-2);
  border: 1px solid #201a3a;
  border-radius: 16px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.dgm-diploma-card:hover {
  border-color: var(--dgm-purple);
  transform: translateY(-3px);
}

.dgm-diploma-thumb {
  aspect-ratio: 4 / 3;
  position: relative;
  padding: 0.9rem;
}

.dgm-dip-thumb-1 { background: linear-gradient(150deg, #241645, #6b3a1f); }
.dgm-dip-thumb-2 { background: linear-gradient(150deg, #171233, #3a2b5c); }
.dgm-dip-thumb-3 { background: linear-gradient(150deg, #1c1533, #5a2f8f); }
.dgm-dip-thumb-4 { background: linear-gradient(150deg, #2b1a12, #6e4321); }
.dgm-dip-thumb-5 { background: linear-gradient(150deg, #14101f, #402a63); }
.dgm-dip-thumb-6 { background: linear-gradient(150deg, #1a1226, #3d2a63); }
.dgm-dip-thumb-7 { background: linear-gradient(150deg, #171233, #4b2f7a); }
.dgm-dip-thumb-8 { background: linear-gradient(150deg, #1c1030, #6C28F0); }

.dgm-diploma-body {
  padding: 1.2rem 1.3rem 1.4rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.dgm-diploma-body h5 {
  color: #fff;
  font-size: 1.02rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
}

.dgm-diploma-body p {
  color: #9C97B8;
  font-size: 0.83rem;
  line-height: 1.5;
  margin-bottom: 1rem;
  flex: 1;
}

.dgm-diploma-meta {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: #9C97B8;
  padding-top: 0.9rem;
  border-top: 1px solid #241d3f;
  margin-bottom: 0.9rem;
}

.dgm-diploma-meta i { margin-right: 0.4rem; color: var(--dgm-purple-light); }

.dgm-diploma-link {
  color: var(--dgm-purple-light);
  font-weight: 600;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.dgm-diploma-link:hover { color: #fff; }

.dgm-btn-outline-purple-pill {
  border: 1px solid var(--dgm-purple);
  color: var(--dgm-purple-light);
  border-radius: 50px;
  padding: 0.75rem 1.6rem;
  font-weight: 600;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.dgm-btn-outline-purple-pill:hover {
  background-color: rgba(108,40,240,0.12);
  color: #fff;
}

/* Benefits banner */
.dgm-benefits-section { padding-bottom: 3rem; }

.dgm-benefits-card {
  background-color: var(--dgm-dark-bg-2);
  border: 1px solid #201a3a;
  border-radius: 20px;
  overflow: hidden;
}

.dgm-benefits-list { padding: 2.5rem; }

.benefit-icon {
  font-size: 1.6rem;
  color: var(--dgm-purple-light);
  display: block;
  margin-bottom: 0.9rem;
}

.dgm-benefits-list h6 {
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.4rem;
}

.dgm-benefits-list p {
  color: #9C97B8;
  font-size: 0.8rem;
  line-height: 1.4;
  margin-bottom: 0;
}

.dgm-benefits-photo {
  position: relative;
  height: 100%;
  min-height: 260px;
  background: linear-gradient(160deg, #3a2352, #14101f);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* CTA outline variant */
.dgm-cta-banner-outline {
  background: var(--dgm-dark-bg-2);
  border: 1px solid var(--dgm-purple);
}

.dgm-cta-banner-outline p { color: #9C97B8; }
.dgm-cta-banner-outline h4 { color: #fff; }

.dgm-cta-banner-outline .dgm-cta-icon {
  background-color: rgba(108,40,240,0.15);
  color: var(--dgm-purple-light);
}

/* Responsive tweaks */
@media (max-width: 991.98px) {
  .dgm-diplomas-hero-photo { opacity: 0.5; }
  .dgm-hero-title-sm { font-size: 2rem; }
  .dgm-benefits-photo { min-height: 200px; }
}

@media (max-width: 575.98px) {
  .dgm-hero-title-sm { font-size: 1.7rem; }
  .dgm-cta-banner-outline { flex-direction: column; text-align: center; }
}


/* ===========================================================
   CHAT WIDGET — Asistente DGM (usado en index.html y diplomados.html)
   =========================================================== */

/* Botón flotante */
.dgm-chat-fab {
  position: fixed;
  bottom: 1.8rem;
  right: 1.8rem;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: var(--dgm-purple);
  color: #fff;
  border: none;
  font-size: 1.5rem;
  box-shadow: 0 10px 30px rgba(108,40,240,0.5);
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
}

.dgm-chat-fab:hover { transform: scale(1.06); }

.dgm-chat-fab-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background-color: #FF4D6D;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--dgm-dark-bg);
}

/* Panel del chat */
.dgm-chat-widget {
  position: fixed;
  bottom: 6rem;
  right: 1.8rem;
  width: 380px;
  max-width: calc(100vw - 2rem);
  height: 560px;
  max-height: calc(100vh - 8rem);
  background-color: var(--dgm-dark-bg-2);
  border: 1px solid #241d3f;
  border-radius: 20px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.45);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 1049;
}

.dgm-chat-widget.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.dgm-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.2rem;
  background: linear-gradient(90deg, var(--dgm-purple), #4a1bb0);
  flex-shrink: 0;
}

.dgm-chat-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.1rem;
}

.dgm-chat-title {
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  margin: 0;
}

.dgm-chat-subtitle {
  color: #E4DBFB;
  font-size: 0.75rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.dgm-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #3DDC84;
  display: inline-block;
}

.dgm-chat-close {
  background: transparent;
  border: none;
  color: #fff;
  opacity: 0.85;
  font-size: 1rem;
}

.dgm-chat-close:hover { opacity: 1; }

/* Cuerpo de mensajes */
.dgm-chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  background-color: var(--dgm-dark-bg);
}

.dgm-msg {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  max-width: 88%;
}

.dgm-msg-bot { align-self: flex-start; }
.dgm-msg-user { align-self: flex-end; flex-direction: row-reverse; }

.dgm-msg-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: rgba(108,40,240,0.25);
  color: var(--dgm-purple-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  flex-shrink: 0;
}

.dgm-msg-bubble {
  background-color: var(--dgm-dark-bg-2);
  border: 1px solid #241d3f;
  color: #E4E1F0;
  border-radius: 14px 14px 14px 4px;
  padding: 0.7rem 0.95rem;
  font-size: 0.85rem;
  line-height: 1.5;
}

.dgm-msg-user .dgm-msg-bubble {
  background-color: var(--dgm-purple);
  border-color: var(--dgm-purple);
  color: #fff;
  border-radius: 14px 14px 4px 14px;
}

/* Indicador de "escribiendo" */
.dgm-typing { display: flex; align-items: center; gap: 4px; padding: 0.85rem 1rem; }
.dgm-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #9C97B8;
  display: inline-block;
  animation: dgmTypingBounce 1.2s infinite ease-in-out;
}
.dgm-typing span:nth-child(2) { animation-delay: 0.15s; }
.dgm-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes dgmTypingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* Tarjetas de programas recomendados */
.dgm-program-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.7rem;
}

.dgm-program-chip {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  background-color: var(--dgm-dark-bg);
  border: 1px solid #2C2650;
  border-radius: 10px;
  padding: 0.6rem 0.8rem;
  color: #E4E1F0;
}

.dgm-program-chip:hover { border-color: var(--dgm-purple); color: #fff; }

.dgm-program-chip-type {
  color: var(--dgm-purple-light);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.dgm-program-chip-name { font-size: 0.83rem; font-weight: 600; }

.dgm-program-chip-meta {
  color: #9C97B8;
  font-size: 0.72rem;
}

.dgm-program-chip-meta i { margin-right: 0.3rem; }

/* Acciones en línea (WhatsApp / correo) */
.dgm-inline-actions { margin-top: 0.7rem; }

.dgm-chip-action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--dgm-purple);
  color: #fff;
  border-radius: 50px;
  padding: 0.55rem 1rem;
  font-size: 0.82rem;
  font-weight: 600;
}

.dgm-chip-action:hover { background-color: #5a1fd0; color: #fff; }

/* Formulario de contacto embebido */
.dgm-lead-form {
  margin-top: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.dgm-lead-form input,
.dgm-lead-form select {
  background-color: var(--dgm-dark-bg);
  border: 1px solid #2C2650;
  color: #fff;
  border-radius: 8px;
  padding: 0.55rem 0.8rem;
  font-size: 0.82rem;
}

.dgm-lead-form input::placeholder { color: #7A7596; }
.dgm-lead-form input:focus,
.dgm-lead-form select:focus { outline: none; border-color: var(--dgm-purple); }

.dgm-lead-form button {
  background-color: var(--dgm-purple);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 0.6rem 1rem;
  font-size: 0.83rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.dgm-lead-form button:hover { background-color: #5a1fd0; }

.dgm-form-success {
  color: #3DDC84;
  font-size: 0.83rem;
  margin: 0.4rem 0 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Respuestas rápidas */
.dgm-chat-quickreplies {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.8rem 1.1rem;
  border-top: 1px solid #241d3f;
  background-color: var(--dgm-dark-bg-2);
  flex-shrink: 0;
}

.dgm-qr-btn {
  background-color: var(--dgm-dark-bg);
  border: 1px solid #2C2650;
  color: #E4E1F0;
  border-radius: 50px;
  padding: 0.45rem 0.85rem;
  font-size: 0.76rem;
  font-weight: 500;
  white-space: nowrap;
}

.dgm-qr-btn:hover { border-color: var(--dgm-purple-light); color: #fff; }

/* Campo de entrada */
.dgm-chat-input-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.1rem;
  border-top: 1px solid #241d3f;
  background-color: var(--dgm-dark-bg-2);
  flex-shrink: 0;
}

.dgm-chat-input-row input {
  flex: 1;
  background-color: var(--dgm-dark-bg);
  border: 1px solid #2C2650;
  color: #fff;
  border-radius: 50px;
  padding: 0.6rem 1.1rem;
  font-size: 0.85rem;
}

.dgm-chat-input-row input::placeholder { color: #7A7596; }
.dgm-chat-input-row input:focus { outline: none; border-color: var(--dgm-purple); }

.dgm-chat-send {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--dgm-purple);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dgm-chat-send:hover { background-color: #5a1fd0; }

/* Responsive */
@media (max-width: 480px) {
  .dgm-chat-widget {
    right: 1rem;
    bottom: 5.6rem;
    width: calc(100vw - 2rem);
    height: calc(100vh - 7.5rem);
  }
  .dgm-chat-fab { right: 1.2rem; bottom: 1.2rem; }
}
/* Blindaje: el theme padre "dgm" probablemente trae una regla genérica
   para el tag <header> que le gana en especificidad a la nuestra.
   Subimos especificidad calificando por body.dgm-dark-page y forzamos
   position/tamaño explícitos. */
body.dgm-dark-page .dgm-diplomas-hero {
  position: relative !important;
  min-height: 560px !important;
  overflow: hidden !important;
}

body.dgm-dark-page .dgm-diplomas-hero-photo {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
/* Blindaje global: el theme padre "dgm" define .container con
   background blanco y z-index:-10 (style.css línea 15), pensado para
   su propio layout "boxed". Bootstrap nunca toca esas dos propiedades,
   así que se filtraban igual sin importar el orden de carga del CSS.
   Lo neutralizamos solo dentro de nuestras plantillas (no afecta el
   resto del sitio, que puede seguir dependiendo de ese estilo). */
body.dgm-page .container {
  background: transparent !important;
  z-index: auto !important;
  overflow: visible !important;
}

/* El padre también fuerza img{width:100%} de forma global — puede
   deformar íconos o imágenes de tamaño fijo dentro de nuestros
   componentes. Lo neutralizamos preventivamente. */
body.dgm-page img {
  width: auto;
  max-width: 100%;
}
/* DOCENTES */
.dgm-docente-card {
  background-color: var(--dgm-dark-bg-2);
  border: 1px solid #201a3a;
  border-radius: 16px;
  padding: 2rem 1.5rem;
  text-align: center;
  height: 100%;
}

img.dgm-docente-photo {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 1.2rem;
  display: block;
  border: 3px solid var(--dgm-purple);
}

.dgm-docente-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--dgm-purple-soft);
  color: var(--dgm-purple);
  font-size: 2.2rem;
}

.dgm-docente-name {
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}

.dgm-docente-area {
  color: var(--dgm-purple-light);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.8rem;
}

.dgm-docente-bio {
  color: #9C97B8;
  font-size: 0.85rem;
  line-height: 1.5;
  margin-bottom: 0;
}
/* Paginación — bloque dedicado con especificidad máxima */
body.dgm-page .dgm-pagination ul.page-numbers {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0.5rem !important;
  list-style: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  float: none !important;
}

body.dgm-page .dgm-pagination ul.page-numbers li {
  display: inline-flex !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  width: auto !important;
}

body.dgm-page .dgm-pagination ul.page-numbers li .page-numbers {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 40px !important;
  height: 40px !important;
  padding: 0 0.75rem !important;
  border-radius: 50px !important;
  background-color: var(--dgm-dark-bg-2) !important;
  border: 1px solid #2C2650 !important;
  color: #E4E1F0 !important;
  font-size: 0.9rem !important;
  text-decoration: none !important;
  float: none !important;
}

body.dgm-page .dgm-pagination ul.page-numbers li a.page-numbers:hover {
  border-color: var(--dgm-purple-light) !important;
  color: #fff !important;
}

body.dgm-page .dgm-pagination ul.page-numbers li .page-numbers.current {
  background-color: var(--dgm-purple) !important;
  border-color: var(--dgm-purple) !important;
  color: #fff !important;
  font-weight: 600 !important;
}

body.dgm-page .dgm-pagination ul.page-numbers li .page-numbers.dots {
  background-color: transparent !important;
  border: none !important;
  color: #9C97B8 !important;
}
/* ===================== HERO CARRUSEL — ALTO FIJO ===================== */
/* Indicadores del carrusel del hero */
.dgm-hero-indicators {
  position: absolute;
  bottom: 5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 0.5rem;
}
.dgm-hero-indicators button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background-color: rgba(255,255,255,0.35);
  padding: 0;
}
.dgm-hero-indicators button.active {
  background-color: var(--dgm-purple-light);
}

.dgm-hero-carousel {
  height: 680px;
  padding: 0;
  overflow: hidden;
  position: relative;
}

.dgm-hero-carousel #dgmHeroCarousel,
.dgm-hero-carousel .carousel-inner,
.dgm-hero-carousel .carousel-item {
  height: 100%;
}

/* En modo "fade" (el que usamos), Bootstrap ya posiciona los slides
   entrante/saliente en absolute — forzamos que ocupen el 100% del
   alto fijo del carrusel, sin importar cuánto contenido tengan. */
.dgm-hero-carousel .carousel-item {
  display: flex;
  align-items: center;
}

.dgm-hero-carousel .carousel-item > .dgm-hero-bg {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
}

.dgm-hero-carousel .dgm-hero-photo {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  /* Si no se pasó imagen, mantiene el degradé de fondo ya definido */
}

.dgm-hero-carousel .container.position-relative {
  height: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.dgm-hero-carousel .row.align-items-center {
  width: 100%;
  max-height: 100%;
}

/* Si el contenido de un slide puntual (ej. con calendario + textos
   largos) no entra en el alto fijo, se recorta con scroll interno
   en vez de romper el layout general del hero. */
.dgm-hero-content,
.dgm-upcoming-card {
  max-height: calc(680px - 6rem);
  overflow-y: auto;
}

@media (max-width: 991.98px) {
  .dgm-hero-carousel { height: 780px; }
  .dgm-hero-content,
  .dgm-upcoming-card { max-height: calc(780px - 4rem); }
}

@media (max-width: 575.98px) {
  .dgm-hero-carousel { height: 920px; }
  .dgm-hero-content,
  .dgm-upcoming-card { max-height: calc(920px - 3rem); }
}

/* ===================== HERO CARRUSEL — MOBILE (imagen arriba, texto abajo) ===================== */
@media (max-width: 767.98px) {
  
    /* Alto fijo solo aplica en desktop/tablet — en mobile el alto
       depende del contenido apilado, no se fuerza. */
    .dgm-hero-carousel {
      height: auto !important;
    }
  
    /* La imagen deja de ser una capa de fondo superpuesta y pasa a
       ser un bloque normal, arriba del contenido. */
    .dgm-hero-carousel .carousel-item {
      display: block;
      position: relative;
    }
  
    .dgm-hero-carousel .carousel-item > .dgm-hero-bg {
      position: static;
      width: 100%;
      height: 220px;
    }
  
    .dgm-hero-carousel .dgm-hero-photo {
      width: 100%;
      height: 100%;
    }
  
    /* El degradé oscuro solo tenía sentido para que el texto se leyera
       ENCIMA de la foto — en mobile el texto ya no va encima, así que
       lo quitamos para que la imagen se vea nítida. */
    .dgm-hero-carousel .dgm-hero-bg::after {
      display: none;
    }
  
    /* El bloque de texto pasa a flujo normal, debajo de la imagen. */
    .dgm-hero-carousel .container.position-relative {
      position: static;
      height: auto;
      overflow: visible;
      padding-top: 2rem;
      padding-bottom: 2rem;
    }
  
    .dgm-hero-carousel .row.align-items-center {
      max-height: none;
    }
  
    /* Ya no hace falta el scroll interno que armamos para el alto fijo
       de escritorio — en mobile el contenido simplemente crece. */
    .dgm-hero-content,
    .dgm-upcoming-card {
      max-height: none;
      overflow-y: visible;
    }
  
    /* Los indicadores (puntitos) bajan también al flujo normal, debajo
       de todo, en vez de flotar sobre la imagen. */
    .dgm-hero-indicators {
    position: static;
    transform: none;
    justify-content: center;
    margin-top: 1.5rem;
  }
}

.dgm-hero-indicators.carousel-indicators {
    position: absolute;
    bottom: 5rem;
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    z-index: 3;
    display: flex;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  
  .dgm-hero-indicators.carousel-indicators button {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background-color: rgba(255,255,255,0.35);
    padding: 0;
    margin: 0;
    text-indent: 0;
    opacity: 1;
    transition: background-color 0.2s ease;
  }
  
  .dgm-hero-indicators.carousel-indicators button.active {
    background-color: var(--dgm-purple-light);
  }
  .badge.dgm-badge-curso {
    background-color: #fff !important;
    color: #1B1730 !important;
  }
  .badge.dgm-badge-diplomado {
    background-color: var(--dgm-purple) !important;
    color: #fff !important;
  }