/* ==========================================================================
   BLOQUE 1: VARIABLES Y BASE
============================================================================= */

/*Variables de colores principales utilizadas en todo el sitio*/
:root {
  --azul-unam-dark: #05264D;
  --azul-unam-light: #1260b5;
  --gris-fondo: #F4F6F9;
  --texto-oscuro: #000000;
  --blanco: #FFFFFF;
  --gris-borde: #CBD5E1;
  --azul-titulo: #1883FF;
  --azul-claro: #75C3FF;
}

/*Configuración general de tamaño de elementos */
* { 
  box-sizing: border-box;
}

/*Configuración general del documento*/
body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--texto-oscuro);
  background-color: var(--gris-fondo);
  margin: 0;
  padding: 0;
  scroll-padding-top: 180px;
}

/* ==========================================================================
   2. BARRA SUPERIOR INSTITUCIONAL
   ========================================================================== */

/*Barra Superior fija que contiene los elementos institucionales, saludo, navegación y carrito*/
.top-nav-bar {
  background-color: var(--azul-unam-light, #1260B5);
  color: var(--blanco, #FFF);
  padding: 12px 30px;
  display: flex;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  justify-content: space-between;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* Contenedores de la barra superior */
.top-nav-left,
.top-nav-center,
.top-nav-right,
.social-links {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Logo dentro de la barra superior */
.top-logo {
  height: 40px;
  width: auto;
  filter: brightness(0) invert(1);
  transition: transform 0.3s ease;
}

/* Efecto de la elevación del logo al pasar el cursor */
a .top-logo:hover {
  transform: scale(1.1);
}

/* Saludo personalizado para el usuario */
.user-greeting {
  font-size: 0.9rem;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.18);
  padding: 6px 16px;
  border-radius: 20px;
  color: #FFF;
}

/* Texto auxiliar relacionado con la edición del nombre del usuario */
.edit-hint {
  font-size: 0.72rem;
  opacity: 0.85;
}

/* Icono individual de cada red social para que en el fondo se vea un circulo en cada red social */
.social-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #f0f2f4;
  background-color: transparent;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease, background-color 0.2s ease !important;
  will-change: transform;
}

/* ELEVACIÓN INDIVIDUAL AL PASAR EL CURSOR */
.social-icon:hover {
  transform: translateY(-3px) scale(1.1) !important;
}

/* COLORES ESPECÍFICOS POR RED SOCIAL EN HOVER */
/* Color y fondo del icono de Facebook al pasar el cursor */
.social-icon.facebook:hover {
  color: #1877f2 !important;
  background-color: #e7f1ff !important;
}

/* Color y fondo del icono de Instagram al pasar el cursor */
.social-icon.instagram:hover {
  color: #e44066 !important;
  background-color: #fce8ec !important;
}

/* Color y fondo del icono de X al pasar el cursor */
.social-icon.x:hover {
  color: #000000 !important;
  background-color: #f1f5f9 !important;
}

/* Color y fondo del icono de youtube al pasar el cursor */
.social-icon.youtube:hover {
  color: #ff0000 !important;
  background-color: #ffe6e6 !important;
}

/* Color y fondo del icono de gmail al pasar el cursor */
.social-icon.gmail:hover {
  color: #ea4335 !important;
  background-color: #fce8e6 !important;
}


/* ==========================================================================
   DESPLIEGUE RESPONSIVO DE REDES SOCIALES
   ========================================================================== */

/* Botón utilizado para abrir las redes sociales en pantallas pequeñas (oculto en pantallas grandes) */
.social-toggle-btn {
  display: none;
}

/* Comportamiento exclusivo para Celular (pantallas menores a 768px) */
@media screen and (max-width: 768px) {

  .social-dropdown-wrapper {
    position: relative;
  }

  /* Botón circular para móvil con avión de envio */
  .social-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.3);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
  }

  /* Menú flotante desplegable en celular */
  .social-links {
    display: none !important;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: #071d3ac2;
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    border-radius: 8px;
    padding: 10px 14px;
    gap: 14px;
    z-index: 3500;
  }

  /* Muestra el menú al presionar el botón */
  .social-dropdown-wrapper.active .social-links {
    display: flex !important;
    animation: fadeInDown 0.25s ease-out;
  }
}

/* ==========================================================================
   3. CARRITO DE LA BARRA SUPERIOR Y DROPDOWN
   ========================================================================== */

/* Contenedor que posiciona el widget del carrito y su menú desplegable */
.top-cart-widget-wrapper {
  position: relative;
  display: inline-block;
}

/* Botón principal del carrito mostrado en la barra superior */
.top-cart-widget {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: rgba(255, 255, 255, 0.3);
  padding: 6px 16px;
  border-radius: 20px;
  font-weight: bold;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.3);
  user-select: none;
}

/* Cambio visual del botón del carrito al pasar el cursor */
.top-cart-widget:hover {
  background-color: var(--azul-unam-dark, #05254d92);
  border-color: var(--azul-unam-dark, #05254d92);
}

/* Contador que muestra la cantidad de cursos en el carrito */
.cart-widget-badge {
  color: #FFF;
  font-size: 0.75rem;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 10px;
  transition: background-color 0.3s ease;
}

/* Estado del contador cuando el carrito está vacío */
.cart-widget-badge.badge-empty {
  background-color: #22C55E;
}

/* Menú desplegable que muestra una vista previa del carrito */
.cart-hover-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  width: 310px;
  background: #FFF;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.25s ease;
  z-index: 2500;
  padding: 12px;
}

/* Muestra el dropdown cuando el usuario pasa el cursor sobre el carrito */
.top-cart-widget-wrapper:hover .cart-hover-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(5px);
}

/* Encabezado del dropdown del carrito */
.dropdown-header {
  font-size: 0.8rem;
  font-weight: 700;
  color: #05264D;
  border-bottom: 1px solid #F1F5F9;
  padding-bottom: 8px;
  margin-bottom: 8px;
}

/* Botón que dirige desde el dropdown hacia la página completa del carrito */
.btn-dropdown-cart {
  display: block;
  text-align: center;
  background: #0A3A6B;
  color: #FFF;
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 8px;
  border-radius: 6px;
  margin-top: 8px;
  transition: background 0.2s ease;
}

/* Cambio de color del botón para ir al carrito */
.btn-dropdown-cart:hover {
  background: #05264D;
}

/* ==========================================================================
   4. OVERLAY Y MODAL DEL CARRITO
   ========================================================================== */

.cart-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  z-index: 2900;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.cart-overlay.active {
  opacity: 1;
  pointer-events: all;
}

/* Botón para cerrar el modal */
.cart-item-remove-btn-over_modal{
  background: #FFFFFF;
    color: #888080;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.2rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

/* Efecto de botón para cerrar el modal, cuando pasa el mouse */
.cart-item-remove-btn-over_modal:hover{
  background: #b10c0cef;
  color: #FFFFFF; 
}

/* Bote de basura */
.btn-trash-animated {
  background: #ffffff43;
  border: none;
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
  color: #c23b3b;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

/* Efecto visual del botón de eliminar al pasar el cursor */
.btn-trash-animated:hover {
  background-color: #fca5a500;
  color: #062543;
  transform: scale(1.08);
}

/* SVG utilizado para representar el bote de basura */
.trash-svg {
  overflow: visible;
}

/* Parte superior del bote de basura que se anima */
.trash-lid {
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: 4px 4px;
}

/* Movimiento de la tapa del bote al pasar el cursor */
.btn-trash-animated:hover .trash-lid {
  transform: rotate(-30deg) translateY(-2px);
}

/* ==========================================================================
   5. HEADER PRINCIPAL Y NAVEGACIÓN RESTRUCTURADA
   ========================================================================== */

header {
  background-color: var(--azul-unam-dark);
  border-bottom: 4px solid var(--azul-unam-light);
  padding: 15px 20px 0 20px;
  position: fixed;
  top: 50px; /* Alineado con la barra superior */
  left: 0;
  right: 0;
  z-index: 1000;
  color: var(--blanco);
}

/* Contenedor principal alineado a la izquierda para acomodar logos e información */
.header-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  padding-bottom: 12px;
}

/* Agrupación compacta de logos juntos a la izquierda */
.header-logos-combined {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Tamaño reducido y controlado para los logotipos */
.header-logo-img {
  height: 52px; /* Tamaño compacto */
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  transition: transform 0.2s ease;
}

.header-logo-img:hover {
  transform: scale(1.06);
}

/* Línea vertical divisoria entre logos y título */
.header-divider {
  width: 1px;
  height: 48px;
  background-color: rgba(255, 255, 255, 0.3);
  margin-left: 6px;
  margin-right: 4px;
}

/* Título principal alineado a la izquierda */
.header-title {
  text-align: left;
}

.header-title h1 {
  color: var(--azul-titulo);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  text-align: left;
  
}

.header-title p {
  color: var(--blanco);
  font-size: 0.95rem;
  line-height: 1.3;
  margin: 2px 0 0 0;
  text-align: left;
}

/* ==========================================================================
   NUEVA BARRA DE NAVEGACIÓN Y MENÚ DESPLEGABLE
   ========================================================================== */

.main-nav-bar {
  background-color: rgba(0, 0, 0, 0.15);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  justify-content: flex-start;
  max-width: 1200px;
  margin: 0 auto;
}

.main-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 8px;
  align-items: center;
}

.main-nav-item {
  position: relative;
}

.main-nav-link {
  color: var(--blanco);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.2s ease, color 0.2s ease;
  border-radius: 4px 4px 0 0;
}

.main-nav-link:hover, 
.main-nav-item:hover > .main-nav-link {
  background-color: var(--azul-unam-light);
  color: var(--blanco);
}

/* Submenú Desplegable (Dropdown) */
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--blanco);
  min-width: 210px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  border-radius: 0 0 8px 8px;
  padding: 6px 0;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.22s ease;
  z-index: 2000;
  border: 1px solid var(--gris-borde);
}

.main-nav-item:hover .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown li a {
  color: var(--texto-oscuro);
  padding: 9px 16px;
  text-decoration: none;
  display: block;
  font-size: 0.88rem;
  font-weight: 500;
  transition: background 0.2s ease, color 0.2s ease;
}

.nav-dropdown li a:hover {
  background-color: var(--gris-fondo);
  color: var(--azul-unam-light);
}

/* ==========================================================================
   6. CONTENEDOR PRINCIPAL Y HERO 
   ========================================================================== */


/* Contenedor principal de subpáginas (COMPRIMIDO) */
.ifc-page-container {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 145px !important;
}

/* Estilos para el título principal de la sección hero (Subpágina)*/
.hero-welcome-overlay {
  background: linear-gradient(135deg, rgba(5, 37, 77, 0.929), rgba(7, 57, 110, 0.85));
  padding: 45px 40px;
  display: flex;
  flex-direction: column;
  color: var(--blanco);
  align-items: flex-start;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 8px;
}

/* Estilos para los títulos secundarios (h2) dentro de la capa de bienvenida del hero */
.hero-welcome-overlay h2 {
  font-size: 2.1rem;
  margin: 8px 0 12px 0;
  color: var(--blanco);
  border: none;
  padding: 10px;
}

/* Estilos para los párrafos (p) dentro de la capa de bienvenida del hero */
.hero-welcome-overlay p {
  font-size: 1.05rem;
  max-width: 720px;
  line-height: 1.6;
  margin-bottom: 20px;
}

/* Estilo para etiquetas o categorías destacadas en forma de bloque */
.block-tag-category {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--blanco);
  letter-spacing: 1.5px;
  display: block;
  margin-bottom: 10px;
}

/*Estilo de titulo para subpáginas*/
.hero-main-title {
  font-size: 2.3rem;
  color: var(--blanco);
  margin: 0 0 10px 0;
  font-weight: 800;
}

/*Estilo de sutitulo para subpáginas*/
.subtitle {
  font-size: 1.1rem;
  color: var(--blanco);
  margin: 0 0 8px 0;
  font-weight: 800;
}

/*Estilo que se muestra debajo del subtitulo, para mostrar la modalidad del curso */
.badge-modalidad {
  display: inline-block;
  background-color: var(--azul-unam-light);
  color: var(--blanco);
  padding: 6px 16px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: bold;
  margin-top: 10px;
}


/* ==========================================================================
   7. TARJETAS DE CURSOS (ESTILO IMAGEN CON FOTO SUPERIOR)
   ========================================================================== */

/* Contenedor principal para la sección de cursos */
.courses-section-container {
  padding: 10px 40px 40px;
}

/* Estilos para los títulos de sección generales */
.section-title {
  color: var(--azul-unam-dark);
  font-size: 1.4rem;
  margin-bottom: 25px;
  padding-left: 10px;
  padding-block-end: 25px;
}

/* Contenedor de la retícula de cursos (soporta dos nombres de clase) */
.grid-cursos,
.courses-grid-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 30px;

}

/* Tarjeta individual de curso (soporta dos nombres de clase) */
.card-curso,
.course-card-item {
  background-color: var(--blanco);
  border-radius: 8px;
  border: 1px solid var(--gris-borde);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

/* Estado al pasar el cursor (hover) sobre las tarjetas de cursos */
.card-curso:hover,
.course-card-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(130, 130, 130, 0.3);
}

/* Contenedor de la imagen de la tarjeta */
.card-image-box {
  position: relative;
  height: 185px;
}

/* Estilos de la imagen dentro del contenedor */
.card-image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

/* Etiqueta distintiva (badge) sobre la imagen */
.card-badge-online {
  position: absolute;
  top: 12px;
  right: 12px;
  background-color: var(--azul-unam-dark);
  color: var(--blanco);
  font-size: 0.72rem;
  font-weight: bold;
  padding: 4px 10px;
  border-radius: 8px;
}

/* Estilos para el contenedor del cuerpo o información de la tarjeta */
.card-content,
.card-content-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
}

/* Títulos de las tarjetas */
.card-title,
.card-content-body h3 {
  color: var(--azul-unam-dark);
  margin: 0 0 10px 0;
  font-size: 1.2rem;
  border: none;
  padding-left: 10px;
  font-weight: 700;
}

/* Descripción o texto de la tarjeta */
.card-description,
.card-content-body p {
  color: #555;
  font-size: 0.92rem;
  line-height: 1.5;
  margin-bottom: 15px;
  flex-grow: 1;
}

/* Sección de metadatos o detalles rápidos (ej. duración, nivel, fecha) */
.card-info,
.card-info-pills {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  border-top: 1px solid #F1F5F9;
  padding-top: 12px;
  margin-bottom: 15px;
  color: var(--azul-unam-light);
  font-weight: bold;
}

/* Pie de la tarjeta reservado para botones */
.card-footer-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* ==========================================
  SECCIÓN DE RELOJ Y DINERO (CURSOS)
   ========================================== */

/* --- ELEMENTO PILL (Etiqueta interactiva general) --- */
.pill-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 480;
  font-size: 0.85rem;
  color: #040e3c;
  cursor: pointer;
}

/* Transición suave para el texto */
.pill-item span {
  transition: color 0.3s ease;
}

/* Cambio de color al pasar el mouse, para las horas */
.pill-item:has(.interactive-timer):hover span {
  color: var(--azul-unam-light);
}

/* Cambio de color al pasar el mouse, dinero*/
.pill-item:has(.interactive-money):hover span {
  color: #184830;
}

/* --- ÍCONO RELOJ (⏱️) --- */
.interactive-timer {
  position: relative;
  width: 20px;
  height: 24px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

/* Botón/Pulsador superior del cronómetro */
.timer-top {
  width: 8px;
  height: 3px;
  background: #3182CE;
  border-radius: 2px 2px 0 0;
  transition: transform 0.2s ease;
}

/* Cuerpo/Esfera circular del reloj */
.timer-body {
  width: 20px;
  height: 20px;
  border: 2.5px solid #3182CE;
  border-radius: 50%;
  position: relative;
  background: #EBF8FF;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Punto central donde se unen las manecillas */
.center-dot {
  width: 3px;
  height: 3px;
  background: #3182CE;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Estilo base para las manecillas */
.hand {
  position: absolute;
  bottom: 50%;
  left: calc(50% - 1px);
  width: 2px;
  background: #3182CE;
  border-radius: 2px;
  transform-origin: bottom center;
}

/* Manecilla de las horas (corta y lenta) */
.hand.hour {
  height: 4px;
  animation: spin 12s infinite linear;
}

/* Manecilla de las horas (corta y lenta) */
.hand.minute {
  height: 7px;
  animation: spin 2s infinite linear;
}

/* --- ÍCONO DINERO (💵) --- */
.interactive-money {
  perspective: 400px;
  display: inline-block;
  cursor: pointer;
}

/* Estructura del billete */
.bill {
  width: 32px;
  height: 18px;
  background: linear-gradient(135deg, #2F855A, #48BB78);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(47, 133, 90, 0.25);
  animation: floatBill 3s ease-in-out infinite;
}

/* Borde punteado interior del billete */
.bill-border {
  width: 86%;
  height: 76%;
  border: 1px dashed rgba(255, 255, 255, 0.6);
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Símbolo de moneda ($) */
.symbol {
  color: #FFFFFF;
  font-family: system-ui, sans-serif;
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
}

/* Destello / Brillo dinámico sobre el billete */
.shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: skewX(-20deg);
  animation: shineLoop 2.5s infinite ease-in-out;
}

/* --- KEYFRAMES --- */

/* Animación de rotación continua en 360 grados (usada para las manecillas del reloj) */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Animación para el destello / brillo que cruza el billete */
@keyframes shineLoop {
  0% {
    left: -100%;
  }

  35% {
    left: 200%;
  }

  100% {
    left: 200%;
  }
}

/* Animación de levitación suave (usada para dar un efecto flotante al billete) */
@keyframes floatBill {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-2px);
  }
}


/* Botón ver temario en Index (Dirrección a cada curso su Subpagina) */
.btn-ver-mas,
.btn-view-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--azul-unam, #05264D);
  background-color: #FFFFFF;
  border: 1.5px solid var(--azul-unam, #05264D);
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: all 0.25s ease;
}

/* Estado al pasar el cursor (hover) sobre el botón "Ver más" */
.btn-view-more:hover {
  background-color: var(--azul-unam, #05264D);
  color: #FFFFFF;
  border-color: var(--azul-unam, #05264D);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(5, 38, 77, 0.25);
}


/* ==========================================================================
   EJECUCIÓN DE ANIMACIONES (CLASES ACTIVAS - INDEX)
   ========================================================================== */

/* Miniatura o vista previa de la imagen del curso en modal*/
.cart-course-thumb {
  width: 70px !important;
  height: 40px !important;
  border-radius: 4px !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
}

/* ==========================================================================
   ELEVACIÓN INDIVIDUAL PARA CADA BOTÓN (SIN LEVANTAR EL PAREJA)
   ========================================================================== */

/* Ajuste general para evitar que la sombra del botón individual se corte */
.card-curso,
.course-card,
article,
section,
[class*="card"] {
  overflow: visible !important;
}

/* BOTE DE BASURA SVG INTERACTIVO */
.btn-trash-action {
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  padding: 6px !important;
  border-radius: 8px !important;
  color: #64748b !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.25s ease !important;
}

/* Botón interactivo de agregar al curso */
.btn-add-fancy {
  background: rgba(252, 252, 253, 0.971) !important;
  color: var(--azul-unam-dark) !important;
  border: 1.5px solid var(--azul-unam-dark) !important;
  padding: 6px 14px !important;
  border-radius: 6px !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Estado al pasar el cursor (hover) sobre el botón principal ("Añadir") */
.btn-add-fancy:hover {
  background: var(--azul-unam-dark) !important;
  color: #ffffff !important;
  border-color: var(--azul-unam-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25) !important;
}


/* ==========================================================================
   BOTÓN DELI-CARRIER COMPACTO (PARA TARJETAS DEL INDEX)
   ========================================================================== */

/* Botón de envío/acción estilo UNAM con transiciones y dimensiones fijas */
.btn-delivery-unam-index {
  position: relative;
  width: 125px;
  height: 38px;
  background-color: var(--azul-unam-dark, #05264D);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(5, 38, 77, 0.25);
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.35s ease,
    box-shadow 0.3s ease,
    transform 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
}

/* Estado al pasar el cursor (hover) sobre el botón */
.btn-delivery-unam-index:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(5, 38, 77, 0.35);
}

/* Estado o capa de éxito/confirmación dentro del botón */
.btn-content-success-index {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  opacity: 0;
  z-index: 3;
  transform: translateY(20px);
  color: #4ADE80;
  font-weight: 600;
  transition: opacity 0.3s ease, transform 0.3s ease;
  white-space: nowrap;
}

/* --- Escena de Animación de botón agregar (Oculta por defecto) --- */
.btn-animation-stage-index {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  opacity: 0 !important;
  pointer-events: none;
  z-index: 1;
  transition: opacity 0.2s ease;
}

/* Pista Punteada Ajustada del botón agregar */
.conveyor-track-index {
  position: absolute;
  bottom: 6px;
  left: 12px;
  right: 32px;
  height: 2px;
  background: repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.6),
      rgba(255, 255, 255, 0.6) 4px,
      transparent 4px,
      transparent 8px);
}

/* Caja  de boton agregar*/
.package-box-wrapper-index {
  position: absolute;
  left: 6px;
  bottom: 6px;
  z-index: 3;
  display: inline-block;
  transform-origin: bottom right;
}

/* Caja o contenedor de paquete en el índice */
.package-box-index {
  font-size: 0.95rem;
  display: block;
  line-height: 1;
}

/* Contenedor relativo para posicionar el ícono del carrito */
.cart-container-index {
  position: absolute;
  right: 10px;
  bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ícono del carrito */
.cart-icon-index {
  font-size: .7rem;
  display: block;
}

/* ==========================================================================
   EJECUCIÓN DE ANIMACIONES COMPACTAS
   ========================================================================== */

/* Estado de carga: Oculta el contenido por defecto del botón */
.btn-delivery-unam-index.is-loading .btn-content-default-index {
  opacity: 0 !important;
  transform: translateY(-20px);
}

/* Estado de carga: Muestra el escenario de animación */
.btn-delivery-unam-index.is-loading .btn-animation-stage-index {
  opacity: 1 !important;
}

/* Pista en movimiento para caja */
.btn-delivery-unam-index.is-loading .conveyor-track-index {
  animation: moveTrack 0.3s linear infinite;
}

/* Recorrido de la caja por la cinta */
.btn-delivery-unam-index.is-loading .package-box-wrapper-index {
  animation: deliverPackageCompact 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Animación compacta de entrega de paquete (simula un paquete deslizándose y cayendo dentro del carrito) */
@keyframes deliverPackageCompact {
  0% {
    left: 8px;
    transform: translateY(0) rotate(0deg) scale(1);
    opacity: 1;
  }

  60% {
    left: 85px;
    transform: translateY(0) rotate(-5deg) scale(1);
    opacity: 1;
  }

  78% {
    left: 98px;
    transform: translateY(3px) rotate(28deg) scale(0.9);
    opacity: 1;
  }

  100% {
    left: 104px;
    transform: translateY(12px) rotate(45deg) scale(0.1);
    opacity: 0;
  }
}

/* Transición del botón a su estado de éxito */
.btn-delivery-unam-index.is-added {
  width: 120px;
  background-color: #064E3B !important;
  border-color: #10B981;
}

/* Oculta las etapas previas (estado inicial y animación de carga) */
.btn-delivery-unam-index.is-added .btn-content-default-index,
.btn-delivery-unam-index.is-added .btn-animation-stage-index {
  opacity: 0 !important;
}

/* Muestra el mensaje/ícono de confirmación exitosa */
.btn-delivery-unam-index.is-added .btn-content-success-index {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   BOTÓN DELI-CARRIER PROFESIONAL (ESTILO UNAM) *** Para el hero de cada página *** 
   ========================================================================== */

/* Contenedor envolvente para el botón de compra/carrito */
.cart-btn-wrapper {
  margin-top: 20px;
  display: inline-block;
}
/* ==========================================================================
   BOTÓN PRINCIPAL DE LLAMADA A LA ACCIÓN (UNIFICADO SOLITON)
   ========================================================================== */
.btn-delivery-unam {
  position: relative;
  width: 290px;
  height: 56px;
  background-color: var(--azul-unam-dark, #05264D);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 24px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(5, 38, 77, 0.3);
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.4s ease,
    box-shadow 0.3s ease,
    transform 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  animation: heroFloat 3s ease-in-out infinite;
}

/* ==========================================================================
   ESTADOS DE ÉXITO Y HOVER REMOVE (SOLITON)
   ========================================================================== */

/* Capa de eliminación: oculta por defecto y centrada absolutamente */
.btn-content-hover-remove-soliton {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #FFFFFF !important;
  pointer-events: none;
}

/* Clases tipográficas específicas para icono y texto */
.btn-icon-soliton {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  display: inline-block;
}

.btn-text-soliton {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1;
}

/* 1. Estado Verde al estar agregado (.is-added) */
.btn-delivery-unam.is-added {
  background-color: #22C55E !important;
  box-shadow: 0 6px 18px rgba(34, 197, 94, 0.3);
}

.btn-delivery-unam.is-added .btn-content-success {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Alternancia de visibilidad en Hover */
.btn-delivery-unam.is-added:hover .btn-content-success {
  display: none !important;
}


/* Efecto de destello/brillo de luz deslizante en reposo */
.btn-delivery-unam::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.25),
      transparent);
  transform: skewX(-20deg);
  pointer-events: none;
  z-index: 4;
  animation: heroShine 3.5s infinite ease-in-out;
}

/* Oculta el destello cuando el botón entra en proceso o confirma la adición */
.btn-delivery-unam.is-loading::before,
.btn-delivery-unam.is-added::before {
  display: none;
}

/* Estado hover (al pasar el cursor) */
.btn-delivery-unam:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(5, 38, 77, 0.45);
}

/* --- ESTADOS Y CAPAS DE TEXTO --- */

/* Estilo base compartido para el texto inicial y de éxito */
.btn-content-default,
.btn-content-success {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease, transform 0.3s ease;
  white-space: nowrap;
}

/* Capa de texto de éxito (inicialmente oculta) */
.btn-content-success {
  position: absolute;
  opacity: 0;
  transform: translateY(25px);
  color: #4ADE80;
  font-weight: 800;
}

/* --- Escena de Animación --- */
.btn-animation-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* Pista Punteada Centrada */
.conveyor-track {
  position: absolute;
  bottom: 12px;
  left: 30px;
  right: 55px;
  height: 2px;
  background: repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.6),
      rgba(255, 255, 255, 0.6) 4px,
      transparent 4px,
      transparent 8px);
}

/* Wrapper posicionado para el paquete flotante/animado */
.package-box-wrapper {
  position: absolute;
  left: 20px;
  bottom: 12px;
  z-index: 3;
  display: inline-block;
  transform-origin: bottom right;
}

/* Ícono o gráfico del paquete/caja */
.package-box {
  font-size: 1.25rem;
  display: block;
  line-height: 1;
}

/* Contenedor del ícono del carrito de compras */
.cart-container {
  position: absolute;
  right: 22px;
  bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ícono del carrito de compras */
.cart-icon {
  font-size: 1.35rem;
  display: block;
}

/* ==========================================================================
   EJECUCIÓN DE ANIMACIONES (CLASES ACTIVAS)
   ========================================================================== */

/* Estado de carga: Oculta y desplaza el texto original hacia arriba */
.btn-delivery-unam.is-loading .btn-content-default {
  opacity: 0;
  transform: translateY(-25px);
}

/* Estado de carga: Muestra el escenario de la animación de entrega */
.btn-delivery-unam.is-loading .btn-animation-stage {
  opacity: 1;
}

/* Estado de carga: Activa la animación del riel/banda transportadora */
.btn-delivery-unam.is-loading .conveyor-track {
  animation: moveTrack 0.3s linear infinite;
}

/* Animación para el desplazamiento infinito del patrón del riel o banda transportadora */
@keyframes moveTrack {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 16px 0;
  }
}

/* Estado de carga: Activa el desplazamiento del paquete durante el proceso de compra */
.btn-delivery-unam.is-loading .package-box-wrapper {
  animation: deliverPackage 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Animación de trayectoria extendida del paquete hacia el carrito (Versión Hero/Detalle) */
@keyframes deliverPackage {
  0% {
    left: 25px;
    transform: translateY(0) rotate(0deg) scale(1);
    opacity: 1;
  }

  60% {
    left: 220px;
    transform: translateY(0) rotate(-5deg) scale(1);
    opacity: 1;
  }

  78% {
    left: 238px;
    transform: translateY(4px) rotate(28deg) scale(0.9);
    opacity: 1;
  }

  100% {
    left: 242px;
    transform: translateY(16px) rotate(45deg) scale(0.1);
    opacity: 0;
  }
}

/* Transición a estado de éxito y reducción de tamaño del botón */
.btn-delivery-unam.is-added {
  width: 220px;
  background-color: #064E3B !important;
  border-color: #10B981;
  animation: none;
}

/* Oculta los estados previos (texto inicial y escenario de la animación) */
.btn-delivery-unam.is-added .btn-content-default,
.btn-delivery-unam.is-added .btn-animation-stage {
  opacity: 0;
}

/* Revela y posiciona el mensaje de confirmación/éxito */
.btn-delivery-unam.is-added .btn-content-success {
  opacity: 1;
  transform: translateY(0);
}

/* --- KEYFRAMES DE BRILLO Y FLOTACIÓN --- */

/* Animación para el barrido de luz en el botón principal */
@keyframes heroShine {
  0% {
    left: -100%;
  }

  25% {
    left: 180%;
  }

  100% {
    left: 180%;
  }
}

/* Animación de flotación/levitación suave e infinita */
@keyframes heroFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px);
  }
}

/* CHECKMARK SVG ANIMADO (DIBUJO DE PALOMITA) */
.checkmark-svg {
  width: 18px;
  height: 18px;
  stroke: #4ADE80;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* Animación del trazado del vector */
.checkmark-path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
}

/* Activa el trazado animado del ícono al pasar al estado de éxito (.is-added) */
.btn-delivery-unam-index.is-added .checkmark-path,
.btn-delivery-unam.is-added .checkmark-path {
  animation: strokeDraw 0.4s cubic-bezier(0.65, 0, 0.45, 1) 0.1s forwards;
}

/* Animación que "dibuja" la línea del SVG revelando el trazo oculto */
@keyframes strokeDraw {
  to {
    stroke-dashoffset: 0;
  }
}


/* ==========================================================================
   8. VISTA DE DETALLE - DOS COLUMNAS Y PESTAÑAS (TABS) en las Subpáginas
   ========================================================================== */

   
/* Estructura principal en dos columnas */
.ifc-two-columns {
  display: flex;
  gap: 30px;
}

/* Columna de navegación (Lista de botones de pestaña) */
.tabs-nav {
  width: 280px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

/* Estilo base de los botones de pestaña */
.tab-btn {
  padding: 15px 20px;
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  cursor: pointer;
  border-left: 4px solid var(--azul-unam-light);
  font-weight: bold;
  color: var(--texto-oscuro);
  border-radius: 8px;
  font-size: 1rem;
  text-align: left;
  transition: all 0.2s ease;
}

/* Estado al pasar el cursor (hover) sobre una pestaña inactiva */
.tab-btn:hover {
  background: var(--azul-unam-dark);
  color: var(--blanco);
  transform: translateX(4px);
}

/* Estado de la pestaña activa/seleccionada */
.tab-btn.active {
  background: #1a5eaa;
  color: var(--blanco);
}

/* Panel contenedor para la exhibición del contenido */
.ifc-content-display {
  flex: 1;
  background-color: var(--blanco);
  border-radius: 8px;
  border-left: 4px var(--azul-unam-light) solid;
  padding: 40px;
  border: 1px solid var(--gris-borde);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
}

/* Estructura individual de los bloques de contenido */
.tab-content {
  display: none;
  animation: fadeIn 0.4s ease-in-out;
}

/* Muestra el bloque de contenido correspondiente a la pestaña seleccionada */
.tab-content.active {
  display: block;
}

/* Animación de desvanecimiento y entrada vertical del contenido */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

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

/* --- ENCABEZADOS Y LÍNEAS DE DECORACIÓN LATERAL (H2, H3) --- */

/* Estilo base para los títulos principales y secundarios */
h2,
h3 {
  color: var(--azul-unam-dark);
  margin-top: 0;
  padding-left: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Indicador gráfico/barra vertical decorativa a la izquierda del encabezado */
h2::before,
h3::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 50px;
  background-color: #5596dbe0;
  border-radius: 2px;
  transition: background-color 0.2s ease;
}

/* Estado al pasar el cursor (hover) sobre los encabezados */
h2:hover,
h3:hover {
  color: #0b70dcef;
}

/* Estado hover sincronizado en la barra decorativa */
h2:hover::before,
h3:hover::before {
  background-color: #0b70dcef;
}

/* ==========================================================================
   9. COMPONENTES INTERNOS (TABLAS Y FORMULARIOS) Y BOTÓN TEMARIO
   ========================================================================== */

/* Contenedor responsivo con desplazamiento horizontal */
.table-responsive {
  overflow-x: auto;
  margin: 20px 0;
}

/* Estilo base del elemento tabla */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--azul-unam-dark);
  border-radius: 8px;
  overflow: hidden;
}

/* Estilo general para celdas de encabezado y datos */
th,
td {
  padding: 14px;
  text-align: left;
  border-bottom: 1px solid var(--azul-unam-dark);
}

/* Encabezados de la tabla */
th {
  background-color: var(--azul-unam-dark);
  color: var(--blanco);
}

/* --- ESTILOS PARA CAMPOS DE FORMULARIO E INPUTS --- */

/* Regla combinada para entradas de texto, correos electrónicos y menús desplegables */
input[type="text"],
input[type="email"],
select {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--gris-borde);
  border-radius: 8px;
  box-sizing: border-box;
  background-color: #F8FAFC;
  font-size: 1rem;
}

/* Estilo normal del botón de Temario */
.btn-tem {
  background-color: var(--azul-unam-dark);
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 8px;
  color: #FFFFFF;
  border: 2px solid var(--azul-unam-light);
  font-size: 0.85rem;
  font-weight: bold;
  white-space: nowrap;
  display: inline-block;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

/* Estilo al pasar el cursor sobre los botones */
.btn-tem:hover {
  background-color: var(--azul-unam-light);
  color: #FFFFFF;
  border: 2px solid var(--azul-unam-dark);
  transform: translateY(-1px);
  box-shadow: 4px 6px rgba(5, 3, 61, 0.398) ease;
}

/* MODAL CENTER, PARA INDEX Y PARA SUBPAG */
.cart-modal-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -45%) scale(0.95);
  width: 90%;
  max-width: 520px;
  max-height: 85vh;
  background-color: var(--blanco);
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
  z-index: 3000;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s ease, opacity 0.3s ease;
  overflow: hidden;
}

/* Transición de apertura y centrado en pantalla */
.cart-modal-container.active {
  opacity: 1;
  pointer-events: all;
  transform: translate(-50%, -50%) scale(1);
}

/* Contenedor principal de la cabecera */
.cart-modal-header {
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #E2E8F0;
}

/* Agrupación del título e indicador de verificación */
.cart-modal-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Insignia circular de confirmación (Checkmark verde) */
.added-check-icon {
  background-color: #10B981;
  color: #FFFFFF;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: bold;
}

/* Texto del título dentro de la cabecera del modal */
.cart-modal-title h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--azul-unam-dark);
  font-weight: 700;
}

/* CUERPO DEL MODAL */
.cart-modal-body {
  padding: 20px;
  overflow-y: auto;
  flex-grow: 1;
}

.cart-added-item-box {
  margin-bottom: 15px;
}

/* --- SECCIÓN DE RECOMENDACIONES DENTRO DEL CARRITO --- */

/* Contenedor principal para productos/cursos sugeridos */
.cart-recommendations-section {
  border-top: 1px solid #E2E8F0;
  padding-top: 15px;
}

/* Subtítulo o encabezado de la sección de sugerencias */
.rec-title {
  font-size: 0.85rem;
  color: #475569;
  margin: 0 0 12px 0;
  font-weight: 600;
}

/* --- ENLACE CON ÍCONO DE INICIO (HEADER) --- */

/* Estilo base del enlace del ícono de inicio (sin subrayado) */
.home-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-decoration: none;
  padding: 6px;
  border-radius: 50%;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Estado al pasar el cursor (hover) */
.home-icon-link:hover {
  transform: translateY(-2px);
  opacity: 0.85;
}

/* Estilos base del botón */
.home-icon-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 6px 16px;
  font-weight: bold;
  color: #ffffff;
  cursor: pointer;
  user-select: none;
}

.home-icon-link:hover {
  background-color: var(--azul-unam-dark, #05254dac);
  /* Nuevo color al pasar el cursor */
  border: 1px solid var(--azul-unam-dark, #05254d92);
  /* Opcional: aclara el borde */
}

/* En pantallas pequeñas (menores a 768px) oculta el texto */
@media (max-width: 768px) {
  .home-icon-link .btn-text {
    display: none;
  }
}


/* ==========================================================================
   11. SECCIÓN INSTRUCTORES
   ========================================================================== */

.instructors-section {
  padding: 30px 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.section-title-wrapper {
  margin-bottom: 25px;
  padding-left: 12px;
}

.section-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #0d2e58;
  margin: 0;
}

/* REGLA REVISADA: FLEXBOX EN LUGAR DE GRID PARA PERMITIR CENTRADO EN ÚLTIMA FILA */
.instructors-section .instructors-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important; /* Centra las tarjetas excedentes en la última fila */
    gap: 25px !important;
    width: 100% !important;
}

.instructors-section .instructor-card {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 0 1 calc(33.333% - 25px) !important; /* 3 elementos por fila en pantallas anchas */
    min-width: 280px !important; /* Mantiene un tamaño cómodo antes de saltar de fila */
    max-width: 360px !important;
}

/* Tarjeta Base */
.instructor-card {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #d7dfe9;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.instructor-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  opacity: 0.8;
}

.instructor-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(18, 97, 181, 0.33);
  border-color: #040e3c;
}

/* EFECTO MONEDA 3D (FLIP) */
.coin-container {
  width: 80px;
  height: 80px;
  perspective: 1000px;
  margin-bottom: 16px;
}

.coin {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.instructor-card:hover .coin {
  transform: rotateY(180deg);
}

.coin-front,
.coin-back {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.coin-front {
  z-index: 2;
  transform: rotateY(0deg);
}

.avatar-svg {
  width: 40px;
  height: 40px;
  color: #ffffff;
}

.coin-back {
  transform: rotateY(180deg);
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 1px;
}

.coin-blue {
  background: linear-gradient(135deg, #1260B5, #0d3b70);
  box-shadow: 0 6px 16px rgba(18, 96, 181, 0.25);
}

.coin-gold {
  background: linear-gradient(135deg, #d97706, #b45309);
  box-shadow: 0 6px 16px rgba(217, 119, 6, 0.25);
}

.instructor-badge {
  display: inline-block;
  background-color: #f1f5f9;
  color: #1e3a8a;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.instructor-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 10px 0;
  line-height: 1.3;
}

.instructor-desc {
  font-size: 0.92rem;
  color: #64748b;
  line-height: 1.5;
  margin: 0;
}



/* ==========================================================================
   12. FOOTER MODERNO - IFC UNAM 
   ========================================================================== */

/* Estructura general del contenedor del pie de página */
.site-footer {
  background: var(--azul-unam-dark);
  color: #e2e8f0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  padding: 50px 0 40px 0;
  border-top: 3px solid var(--azul-unam-light);
}

/* Contenedor principal centrado con retícula de 4 columnas */
.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: 40px;
}

/* Columna Branding */
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-logo-ifc {
  max-width: 180px;
  height: auto;
  filter: brightness(0) invert(1);
  object-fit: contain;
}

.brand-description {
  font-size: 0.88rem;
  line-height: 1.5;
  color: #94a3b8;
  margin: 0;
}

.brand-description strong {
  color: #ffffff;
}

/* Títulos de sección */
.footer-title {
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 18px;
  position: relative;
  letter-spacing: 0.5px;
}

.footer-title::after {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  background: var(--azul-unam-light);
  margin-top: 6px;
  border-radius: 2px;
}

/* Menús de enlaces */
.footer-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-menu a {
  color: #cbd5e1;
  text-decoration: none;
  font-size: 0.88rem;
  transition: all 0.2s ease;
  display: inline-block;
}

.footer-menu a:hover {
  color: #ffffff;
  transform: translateX(4px);
}

/* Lista de Contacto */
.footer-contact {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.85rem;
  color: #cbd5e1;
  line-height: 1.4;
}

.footer-contact svg {
  flex-shrink: 0;
  color: var(--azul-unam-light);
  margin-top: 2px;
}

.footer-contact a {
  color: #cbd5e1;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-contact a:hover {
  color: #ffffff;
  text-decoration: underline;
}

.footer-about {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-about li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.85rem;
  color: #cbd5e1;
  line-height: 1.4;
}

.footer-about a {
  color: #cbd5e1;
  text-decoration: none;
  transition: color 0.2s ease;
}

/* Responsivo para móviles */
@media screen and (max-width: 900px) {
  .footer-container {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

@media screen and (max-width: 580px) {
  .footer-container {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* ==========================================================================
   13. RESPONSIVIDAD CONSOLIDADA Y ALINEACIÓN DE RETÍCULA
   ========================================================================== */

/* 1. RESET Y ESTRUCTURA GLOBAL DE PANTALLA ANCHA (DESKTOP / LAPTOP) */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Unificación de ancho máximo y centrado perfecto para todas las secciones */
.hero-welcome-card,
.courses-section-container,
.instructors-section,
.full-cart-container,
.main-wrapper,
.ifc-hero-block {
  width: 100%;
  max-width: 1200px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* --------------------------------------------------------------------------
   Reglas base del Hero de Curso (ifc-hero-block) en Pantalla Grande
   -------------------------------------------------------------------------- */
.ifc-hero-block {
  /* Capa de degrado azul sobre la imagen base */
  background-image:
    linear-gradient(135deg, rgba(5, 37, 77, 0.90), rgba(7, 57, 110, 0.85)),
    var(--bg-img, url('../Imagenes/IA-imagen.jpg'));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 16px;

  /* Márgenes superiores reducidos para comprimir espacio bajo el header */
  margin-top: 10px !important;
  margin-bottom: 25px !important;

  padding: 60px 50px !important;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  position: relative;
  clear: both;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Tipografía base del título del Hero en PC */
.ifc-hero-block .hero-main-title {
  font-size: 2.5rem;
  margin: 15px 0;
  font-weight: 800;
  line-height: 1.2;
}

/* Reglas base del Hero de Bienvenida en Pantalla Grande */
.hero-welcome-card {
  background-image: url('https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=1200&q=80');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 16px;
  margin-top: 10px !important;
  margin-bottom: 25px !important;
  margin-left: 40px;
  padding: 0 !important;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  position: relative;
  clear: both;
}

.hero-welcome-overlay {
  background: linear-gradient(135deg, rgba(5, 37, 77, 0.93), rgba(7, 57, 110, 0.85));
  padding: 45px 40px !important;
  display: flex;
  margin-top: 0 !important;
  flex-direction: column;
  color: #ffffff;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  border-radius: 8px;
}


/* --------------------------------------------------------------------------
   2. TABLETS Y PANTALLAS MEDIANAS (Hasta 900px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 900px) {

  .ifc-hero-block {
    margin-top: 15px !important;
    padding: 50px 40px !important;
  }

  .ifc-hero-block .hero-main-title {
    font-size: 2.1rem;
  }

  .header-title h1 {
    font-size: 1.8rem;
  }

  .header-title p {
    font-size: 1rem;
  }

  .unam-nav-bar ul {
    flex-direction: column;
  }

  .unam-nav-bar .nav-item {
    padding: 14px 20px;
    font-size: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .full-cart-grid {
    grid-template-columns: 1fr;
  }
}


/* --------------------------------------------------------------------------
   3. DISPOSITIVOS MÓVILES (Hasta 768px)
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {

  /* A. BARRA SUPERIOR FIJA */
  .top-nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    padding: 6px 6px;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .top-logo {
    height: 28px;
  }

  .top-nav-center {
    gap: 10px;
  }

  .user-greeting,
  .top-nav-link,
  .top-cart-widget {
    font-size: 0.75rem;
    padding: 4px 10px;
  }

  .edit-hint {
    display: none;
  }

  /* B. HEADER PRINCIPAL FIJO */
  header {
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    z-index: 1000;
    min-height: auto;
    padding: 10px 15px;
    border-bottom: 3px solid var(--azul-unam-light, #5596db);
    background-color: var(--azul-unam-dark, #05254d);
  }

  .header-container {
    padding: 5px 0;
    gap: 0.8rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .logos-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1rem;
  }

  .logo-placeholder img {
    width: 45px;
    height: auto;
  }

  .header-title h1 {
    font-size: 1rem;
  }

  .header-title p {
    font-size: 0.75rem;
  }

  /* C. AJUSTE DE ESPACIO EN BODY */
  body {
    padding-top: 105px !important;
  }

  /* D. SECCIONES Y CONTENEDORES EN MÓVIL */
  .hero-welcome-card {
    margin: 10px 16px !important;
    width: calc(100% - 32px) !important;
  }

  .hero-welcome-overlay {
    margin-top: 0 !important;
    padding: 25px 20px !important;
  }

  .hero-main-title,
  .hero-welcome-overlay h2 {
    font-size: 1.4rem;
  }

  .courses-section-container,
  .full-cart-container,
  .instructors-section,
  .ifc-content-display {
    padding: 20px 16px !important;
  }

  /* NUEVO: Ajustes para ifc-hero-block en Móvil */
  .ifc-hero-block {
    background-image:
      linear-gradient(135deg, rgba(5, 37, 77, 0.88), rgba(7, 57, 110, 0.82)),
      var(--bg-img, url('../Imagenes/IA-imagen.jpg')) !important;
    background-size: cover !important;
    background-position: center !important;

    margin-top: 10px !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
    width: calc(100% - 32px) !important;
    padding: 25px 18px !important;
    border-radius: 16px;
  }

  /* Ajustes para el título e información interna en Móvil */
  .ifc-hero-block .hero-main-title {
    font-size: 1.4rem !important;
    margin: 10px 0 !important;
    line-height: 1.25 !important;
  }

  /* CORRECCIÓN: Botones del Hero (Carrito / Modalidad) en Móvil */
  .ifc-hero-block button,
  .ifc-hero-block .btn,
  .ifc-hero-block [class*="btn"] {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 0.88rem !important;
    padding: 12px 15px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    white-space: normal !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  /* E. ESTRUCTURA DE COLUMNAS PARA MÓVIL */
  .ifc-main-header,
  .ifc-two-columns {
    flex-direction: column;
    align-items: flex-start;
  }

  .btn-regresar,
  .tabs-nav {
    width: 100%;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }
}

/* ==========================================================================
   EFECTO HOVER EN CARRITO CENTRAL Y DESPLEGABLE
   ========================================================================== */

#cart-items-container>div,
#cart-recommendations>div,
#dropdown-cart-items .dropdown-item-row {
  transition: background-color 0.25s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease !important;
  border-radius: 10px !important;
  padding: 8px 10px !important;
  cursor: pointer !important;
}

#cart-items-container>div:hover,
#cart-recommendations>div:hover {
  background-color: #f0f7ff !important;
  transform: translateX(4px) !important;
  box-shadow: 0 4px 12px rgba(18, 96, 181, 0.12) !important;
}

#dropdown-cart-items .dropdown-item-row:hover {
  background-color: #f0f7ff !important;
  transform: translateX(3px) !important;
  box-shadow: 0 2px 8px rgba(18, 96, 181, 0.1) !important;
}

#cart-items-container>div:hover h4,
#cart-recommendations>div:hover div,
#dropdown-cart-items .dropdown-item-row:hover div {
  color: #1260B5 !important;
}

#cart-items-container>div:hover img,
#dropdown-cart-items .dropdown-item-row:hover img {
  transform: scale(1.05) !important;
  transition: transform 0.2s ease !important;
}

/* ==========================================================================
   HEADER PRINCIPAL Y NAVEGACIÓN RESTRUCTURADA
   ========================================================================== */

/* 1. Header Fijo Azul Marino pegado a la parte superior */
header.integrated-header,
header {
  position: fixed !important;
  top: 0 !important; /* Pegado arriba al borde superior de la pantalla */
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 2500 !important; /* Sobre todo el contenido */
  background-color: var(--azul-unam-dark, #05264D) !important;
  border-bottom: 3px solid var(--azul-unam-light, #1260b5) !important;
  padding: 12px 30px 8px 30px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}

/* 2. Desplazamiento del contenido principal (COMPRIMIDO) */
.main-content-wrapper {
  margin-top: 140px !important;
  position: relative !important;
  z-index: 100 !important;
  min-height: calc(100vh - 105px - 280px);
}

/* 3. Ajuste de la tarjeta de bienvenida Hero */
.hero-welcome-card {
  margin-top: 10px !important;
  margin-bottom: 25px !important;
  position: relative !important;
  z-index: 101 !important;
  overflow: hidden !important;
}

.hero-welcome-overlay {
  margin-top: 0 !important; 
  padding: 45px 40px !important;
  background: linear-gradient(135deg, rgba(5, 37, 77, 0.93), rgba(7, 57, 110, 0.85)) !important;
}

/* 2. Fila superior flexible en todo el ancho */
.header-top-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important; /* Separa izquierda y derecha */
  width: 100% !important;
  margin: 0 auto !important;
}

/* 3. Agrupación de Logos y Título a la izquierda */
.header-left-group {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
}

.header-logos-combined {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.header-logo-img {
  height: 48px !important;
  width: auto !important;
  filter: brightness(0) invert(1) !important;
}

.header-divider {
  width: 1px !important;
  height: 42px !important;
  background-color: rgba(255, 255, 255, 0.3) !important;
  margin: 0 4px !important;
}

.header-title h1 {
  color: var(--blanco) !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
}

.header-title p {
  color: #94A3B8 !important;
  font-size: 0.88rem !important;
  margin: 0 !important;
}

/* 4. Agrupación de Redes Sociales y Carrito a la derecha */
.header-widgets-right {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  margin-left: auto !important; /* Forzado a la derecha */
}

/* 5. Menú de navegación inferior */
header.integrated-header .main-nav-bar {
  background: transparent !important;
  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
  margin-top: 12px !important;
  padding-top: 8px !important;
  display: flex !important;
  justify-content: center !important;
}

header.integrated-header .main-nav-list {
  display: flex !important;
  gap: 24px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

header.integrated-header .main-nav-link {
  color: #FFFFFF !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 0.92rem !important;
  padding: 6px 12px !important;
  border-radius: 4px !important;
}

header.integrated-header .main-nav-link:hover {
  background-color: var(--azul-unam-light, #1260b5) !important;
}

.site-footer {
  position: relative !important;
  z-index: 100 !important;
  margin-top: 50px !important;
}

/* ==========================================================================
   TARJETA PRINCIPAL Y MENÚ UNIFICADO CENTRADOS AL ANCHO DEL HERO (1200px)
   ========================================================================== */

/* Contenedor principal alineado exactamente al ancho del hero */
.unified-card-wrapper {
  display: flex !important;
  max-width: 1200px !important; /* Mismo ancho máximo que el bloque del título/Hero */
  width: 100% !important;
  margin-left: auto !important; /* Centrado automático */
  margin-right: auto !important; /* Centrado automático */
  margin-bottom: 40px !important;
  
  background-color: #ffffff !important;
  border-radius: 12px !important;
  border: 1px solid var(--gris-borde, #CBD5E1) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Ajuste adicional para el texto de notificación "Cursos seleccionados..." */
p[role="status"] {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Menú lateral integrado */
.integrated-sidebar {
  width: 250px !important;
  background-color: #F8FAFC !important;
  border-right: 1px solid #E2E8F0 !important;
  padding: 30px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  flex-shrink: 0 !important;
}

/* Botones del menú lateral dentro de la tarjeta */
.integrated-sidebar .tab-btn {
  width: 100% !important;
  padding: 12px 18px !important;
  background: transparent !important;
  border: none !important;
  border-left: 4px solid transparent !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  color: #475569 !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.integrated-sidebar .tab-btn:hover {
  background: #EDF2F7 !important;
  color: var(--azul-unam-dark, #05264D) !important;
  transform: translateX(0) !important;
}

.integrated-sidebar .tab-btn.active {
  background: #E2E8F0 !important;
  color: var(--azul-unam-dark, #05264D) !important;
  border-left-color: var(--azul-unam-light, #1260b5) !important;
  font-weight: 700 !important;
}

/* Área de contenido a la derecha de las pestañas */
.tabs-body-content {
  flex: 1 !important;
  padding: 40px !important;
}

/* Adaptación para pantallas pequeñas (móviles) */
@media screen and (max-width: 768px) {
  .unified-card-wrapper {
    flex-direction: column !important;
  }

  .integrated-sidebar {
    width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid #E2E8F0 !important;
    padding: 16px !important;
  }

  .tabs-body-content {
    padding: 24px 16px !important;
  }
}

.inicio-cursos {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 30px 24px 32px !important;
  min-width: 0;
}

.inicio-cursos .hero-welcome-card {
  width: 100% !important;
  margin: 10px 0 28px !important;
}

.inicio-cursos .courses-section-container {
  padding: 0 !important;
}

.inicio-cursos .section-title {
  margin: 0 0 24px;
  padding: 0;
}

.inicio-cursos .courses-grid-layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.inicio-cursos .course-card-item {
  min-width: 0;
  height: 100%;
}

.inicio-cursos .card-image-box {
  height: 200px;
  flex-shrink: 0;
  background: #eaf0f7;
}

.inicio-cursos .card-image-box > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.inicio-cursos .curso-imagen-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 30px;
}

.inicio-cursos .curso-imagen-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.inicio-cursos .card-content-body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 14px;
  padding: 22px;
  min-width: 0;
}

.inicio-cursos .card-content-body h3 {
  margin: 0;
  padding: 0;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.inicio-cursos .card-content-body p {
  margin: 0;
  overflow-wrap: anywhere;
}

.inicio-cursos .card-info-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: auto;
  padding-top: 8px;
}

.inicio-cursos .pill-item {
  min-width: 0;
}

.inicio-cursos .card-footer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

.inicio-cursos .card-footer-actions form {
  margin: 0;
}

.inicio-cursos .courses-grid-layout > p {
  grid-column: 1 / -1;
}

@media (max-width: 1050px) {
  .inicio-cursos .courses-grid-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .inicio-cursos {
    padding: 0 16px 24px;
  }

  .inicio-cursos .courses-grid-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .inicio-cursos .hero-welcome-overlay {
    padding: 28px 20px !important;
  }

  .inicio-cursos .card-content-body {
    padding: 18px;
  }
}

/* ==========================================================================
   ESTILOS ESPECÍFICOS PARA LA VISTA DE PREGUNTAS FRECUENTES (FAQ)
   ========================================================================== */

/* --- SECCIÓN HERO Y BUSCADOR --- */
.faq-hero-container {
    margin-bottom: 25px;
}

.faq-search-box {
    margin-top: 20px;
    position: relative;
    max-width: 600px;
    width: 100%;
}

/* Forzar estilos sobre el input general de formularios */
.faq-hero-container input[type="text"].faq-search-input,
.faq-search-input {
    width: 100% !important;
    padding: 14px 20px 14px 45px !important;
    border-radius: 30px !important;
    border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    font-size: 0.95rem !important;
    backdrop-filter: blur(6px) !important;
    transition: all 0.3s ease !important;
    box-shadow: none !important;
}

.faq-search-input::placeholder {
    color: rgba(255, 255, 255, 0.8) !important;
}

.faq-search-input:focus {
    outline: none !important;
    background-color: rgba(255, 255, 255, 0.25) !important;
    border-color: #ffffff !important;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.3) !important;
}

.faq-search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.85);
    pointer-events: none;
    z-index: 2;
}

/* --- ESTRUCTURA DEL ACORDEÓN --- */
.faq-accordion-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-item {
    border: 1px solid var(--gris-borde, #CBD5E1);
    border-radius: 8px;
    background-color: var(--blanco, #ffffff);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.faq-item:hover {
    border-color: var(--azul-unam-light, #1260b5);
    box-shadow: 0 4px 12px rgba(18, 96, 181, 0.08);
}

.faq-item.active {
    border-color: var(--azul-unam-light, #1260b5);
}

/* BOTÓN Y TÍTULO DE PREGUNTA */
.faq-question-btn {
    width: 100%;
    padding: 18px 20px;
    background: none;
    border: none;
    text-align: left;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--azul-unam-dark, #05264D);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    gap: 15px;
    transition: color 0.2s ease;
}

.faq-question-btn:hover {
    color: var(--azul-unam-light, #1260b5);
}

/* ÍCONO INDICADOR (FLECHA DESPLEGABLE) */
.faq-toggle-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--gris-fondo, #F4F6F9);
    color: var(--azul-unam-dark, #05264D);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-shrink: 0;
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.faq-item.active .faq-toggle-icon {
    transform: rotate(180deg);
    background-color: var(--azul-unam-light, #1260b5);
    color: #ffffff;
}

/* PANEL DE RESPUESTA */
.faq-answer-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0, 1, 0, 1), padding 0.35s ease;
    padding: 0 20px;
    color: var(--texto-oscuro, #0F172A);
    font-size: 0.95rem;
    line-height: 1.6;
}

.faq-item.active .faq-answer-panel {
    max-height: 1000px;
    padding: 0 20px 20px 20px;
    transition: max-height 0.5s ease-in-out, padding 0.2s ease;
}

/* ESTADO VACÍO CUANDO NO HAY RESULTADOS */
.faq-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #64748B;
    display: none;
}

.faq-empty-state svg {
    margin-bottom: 12px;
    color: #94A3B8;
}

/* CAJA DE SOPORTE Y CONTACTO */
.faq-contact-box {
    margin-top: 35px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-left: 4px solid var(--azul-unam-light, #1260b5);
    border-radius: 8px;
    padding: 24px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.faq-contact-info h3 {
    margin: 0 0 6px 0;
    font-size: 1.1rem;
    color: var(--azul-unam-dark, #05264D);
}

.faq-contact-info h3::before {
    display: none;
}

.faq-contact-info p {
    margin: 0;
    color: #475569;
    font-size: 0.9rem;
}

.integrated-sidebar .tab-btn.faq-tab-btn.active,
.integrated-sidebar .tab-btn.active,
.tab-btn.active,
.tab-btn {
    border-left: none !important;
}

.btn-delivery-unam-index.is-added:hover,
.btn-delivery-unam.is-added:hover {
    background-color: #064E3B !important; /* Mantiene el verde oscuro institucional */
    border-color: #10B981 !important;     /* Mantiene el borde verde */
    box-shadow: 0 4px 12px rgba(6, 78, 59, 0.25) !important;
    cursor: default !important;
}

.btn-delivery-unam-index.is-added:hover .btn-content-success-index,
.btn-delivery-unam.is-added:hover .btn-content-success {
    color: #4ADE80 !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Oculta de forma definitiva cualquier capa de eliminación que pudiera quedar */
.btn-content-hover-remove-index,
.btn-content-hover-remove-soliton {
    display: none !important;
}

/* 1. Ajuste del contenedor principal debajo del header fijo */
.main-content-wrapper {
    margin-top: 140px !important; 
    padding-top: 20px !important;
}

/* 2. Normalización de márgenes para contenedores de subpáginas */
.inicio-cursos,
.ifc-page-container,
.unified-card-wrapper,
.faq-hero-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 3. Ajuste de las tarjetas Hero */
.hero-welcome-card,
.faq-hero-container,
.ifc-hero-block {
    margin-top: 10px !important;
    margin-bottom: 25px !important;
}