img.course-image {
    width: 467px;
    height: 310px;
    object-fit: cover; /* Esto asegura que la imagen se ajuste al tamaño sin distorsionarse */
}

.flex-container {
    display: flex;
    align-items: flex-start; /* Alinea los elementos al principio del contenedor */
    justify-content: space-between;
}


/* Estilos generales para escritorio */
.content {
    width: 33.33%;
    padding-right: 10px;
}

.lottie-container {
    width: 53.33%;
    padding-left: 10px;
    margin-top: 20px; /* Ajusta este valor según sea necesario */
}

.title-text-img img {
    max-width: 100%;
    height: auto;
}

.try-it {
    text-align: center;
    margin-top: -100px;
}

/* Estilos específicos para dispositivos móviles */
@media (max-width: 768px) {
    .content {
        width: 100%; /* El contenido ocupa toda la pantalla en dispositivos móviles */
        padding-right: 0; /* Elimina el relleno a la derecha en dispositivos móviles */
        margin-bottom: 20px; /* Añade un margen inferior para separar del Lottie */
    }

    .lottie-container {
        width: 100%; /* El contenedor de Lottie ocupa toda la pantalla */
        padding-left: 0; /* Elimina el relleno a la izquierda en dispositivos móviles */
        margin-top: 20px; /* Ajusta el margen superior para que el Lottie esté debajo del texto */
    }

    .try-it {
        margin-top: 20px; /* Ajusta el margen superior para que el botón esté más abajo */
    }
}

.menu__item {
    background-color: #2E8B57;
    color: white;
    margin-right: 0.5rem;
    transition: background-color 0.3s, border-color 0.3s;
    padding: 1rem 2rem;
    font-size: 1.2rem;
    border: 2px solid #2E8B57;
}
.menu__item:hover {
    background-color: #3CB371;
    border-color: #3CB371;
}
.menu__item:nth-child(2) {
    background-color: #20B2AA;
    border-color: #20B2AA;
}
.menu__item:nth-child(2):hover {
    background-color: #66CDAA;
    border-color: #66CDAA;
}
.menu__item:nth-child(3) {
    background-color: #008080;
    border-color: #008080;
}
.menu__item:nth-child(3):hover {
    background-color: #48D1CC;
    border-color: #48D1CC;
}
.menu__item:nth-child(4) {
    background-color: #5F9EA0;
    border-color: #5F9EA0;
}
.menu__item:nth-child(4):hover {
    background-color: #7FFFD4;
    border-color: #7FFFD4;
}
.menu__item:nth-child(5) {
    background-color: #4682B4;
    border-color: #4682B4;
}
.menu__item:nth-child(5):hover {
    background-color: #B0E0E6;
    border-color: #B0E0E6;
}

@media (max-width: 600px) {
    .menu__item {
        padding: 0.5rem 1rem;
        font-size: 1rem;
    }
}
.title-text.left p {
    font-size: 1.2rem; /* Ajusta el tamaño de fuente según tus necesidades */
}

@media (max-width: 767.98px) {
    .has-drawer-opened .mdk-header-layout__content {
        z-index:1
    }
}

/* Contenedor de los botones */
.menu-2 {
    display: flex;
    flex-wrap: wrap; /* Permite que los botones se acomoden en múltiples filas */
    justify-content: flex-start; /* Alinea los botones hacia la izquierda */
    padding-left: 0; /* Elimina cualquier padding del lado izquierdo */
    margin-left: 0; /* Elimina cualquier margen del lado izquierdo */
}

/* Estilos generales para los botones */
.menu__item {
    color: white;
    padding: 1rem;
    font-size: 1.2rem;
    text-align: center;
    background-color: #2E8B57;
    border: 2px solid #2E8B57;
    width: 100%; /* Por defecto, ocupan todo el ancho en pantallas pequeñas */
    margin-bottom: 10px;
    transition: background-color 0.3s, border-color 0.3s;
}

/* Hover effects */
.menu__item:hover {
    background-color: #3CB371;
    border-color: #3CB371;
}

/* Específicos para cada botón */
.contenido {
    background-color: #2E8B57;
    border-color: #2E8B57;
}

.presencial {
    background-color: #20B2AA;
    border-color: #20B2AA;
}

.semi-presencial {
    background-color: #008080;
    border-color: #008080;
}

.online {
    background-color: #5F9EA0;
    border-color: #5F9EA0;
}

/* Modo pantallas grandes */
@media (min-width: 769px) {
    .menu__item {
        width: 24%; /* Los botones ocuparán el 24% del ancho en pantallas grandes */
        margin-right: 1%; /* Espacio entre botones */
    }
    .menu__item:last-child {
        margin-right: 0; /* Eliminamos el margen del último botón para alinear bien */
    }
}

/* =========================================================
   PREMIUM COURSE CARDS - ZOOM ELEGANTE
========================================================= */

.col-sm-6 .card.card-sm.card--elevated,
.col-md-4 .card.card-sm.card--elevated,
.col-xl-3 .card.card-sm.card--elevated {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    background: #ffffff;
    transition:
        transform 0.38s cubic-bezier(.2, .8, .2, 1),
        box-shadow 0.38s cubic-bezier(.2, .8, .2, 1),
        border-color 0.38s ease;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.10);
    border: 1px solid rgba(15, 23, 42, 0.06);
    will-change: transform;
}

/* Zoom de la card completa */
.col-sm-6 .card.card-sm.card--elevated:hover,
.col-md-4 .card.card-sm.card--elevated:hover,
.col-xl-3 .card.card-sm.card--elevated:hover {
    transform: translateY(-10px) scale(1.035);
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.22);
    border-color: rgba(37, 99, 235, 0.22);
    z-index: 10;
}

/* Imagen con zoom interno */
.card.card-sm.card--elevated .js-image {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 18px 18px 0 0;
}

.card.card-sm.card--elevated .course-image {
    width: 100%;
    height: 190px;
    object-fit: cover;
    display: block;
    transform: scale(1);
    transition:
        transform 0.55s cubic-bezier(.2, .8, .2, 1),
        filter 0.55s ease;
    will-change: transform;
}

.card.card-sm.card--elevated:hover .course-image {
    transform: scale(1.13);
    filter: brightness(0.86) saturate(1.18) contrast(1.08);
}

/* Overlay premium */
.card.card-sm.card--elevated .overlay__content {
    background: linear-gradient(
        135deg,
        rgba(15, 23, 42, 0.68),
        rgba(37, 99, 235, 0.42),
        rgba(16, 185, 129, 0.30)
    );
    opacity: 0;
    transition: opacity 0.35s ease;
}

.card.card-sm.card--elevated:hover .overlay__content {
    opacity: 1;
}

/* Acción "Ver Programa" */
.card.card-sm.card--elevated .overlay__action {
    transform: translateY(12px);
    opacity: 0;
    transition:
        transform 0.35s cubic-bezier(.2, .8, .2, 1),
        opacity 0.35s ease;
}

.card.card-sm.card--elevated:hover .overlay__action {
    transform: translateY(0);
    opacity: 1;
}

.card.card-sm.card--elevated .overlay__action .material-icons {
    font-size: 34px;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.28));
}

.card.card-sm.card--elevated .overlay__action .card-title {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.2px;
    text-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

/* Brillo diagonal elegante */
.card.card-sm.card--elevated::before {
    content: "";
    position: absolute;
    top: -120%;
    left: -80%;
    width: 70%;
    height: 260%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, 0.32),
        transparent
    );
    transform: rotate(22deg);
    opacity: 0;
    pointer-events: none;
    transition: all 0.75s ease;
    z-index: 3;
}

.card.card-sm.card--elevated:hover::before {
    left: 130%;
    opacity: 1;
}

/* Cuerpo de la card */
.card.card-sm.card--elevated .card-body {
    transition: background 0.35s ease;
}

.card.card-sm.card--elevated:hover .card-body {
    background: linear-gradient(180deg, #1E90FF 0%, #f8fbff 100%);
}

/* Título */
.card.card-sm.card--elevated .card-title {
    color: #0f172a;
    font-weight: 800;
    transition: color 0.28s ease;
}

.card.card-sm.card--elevated:hover .card-title {
    color: #2563eb;
    text-decoration: none;
}

/* Estrellas */
.card.card-sm.card--elevated .rating__item .material-icons {
    color: #f59e0b;
    transition: transform 0.25s ease, color 0.25s ease;
}

.card.card-sm.card--elevated:hover .rating__item .material-icons {
    transform: scale(1.08);
    color: #fbbf24;
}

/* Accesibilidad: también funciona con teclado */
.card.card-sm.card--elevated:focus-within {
    transform: translateY(-10px) scale(1.035);
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.22);
}

/* Mobile: efecto más suave */
@media (max-width: 768px) {
    .card.card-sm.card--elevated:hover {
        transform: translateY(-5px) scale(1.015);
    }

    .card.card-sm.card--elevated .course-image {
        height: 170px;
    }
}