/*  body {
            font-family: Arial, sans-serif;
            background-color: #da1313;
            display: flex;
            flex-direction: column; 
            justify-content: flex-start;
            align-items: center; 
            min-height: 100vh;
            margin: 0;
            height: 100%;
            
        overflow-x: hidden;
            padding: 0;
        } */

        

        .card_tss-container {
            display: grid;
            gap: 10px; /* Espaciado entre elementos */
            width: 90%; /* Asegura que el contenedor no ocupe el 100% del ancho */
            max-width: 1200px; /* Define un ancho máximo */
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Ajusta las columnas automáticamente */
            margin: 30px auto; /* Centrado horizontal y margen superior */
            padding: 0 15px; /* Espacio interno de 15px a los lados */
            justify-content: center; /* Centra los elementos en el contenedor */
            align-items: center; /* Centra verticalmente los elementos */
        }


        .card_ts {
            position: relative;
            background: linear-gradient(120deg, #ffffff, #f7f7f7); /* Fondo inicial */
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1), 
                        0 6px 20px rgba(0, 0, 0, 0.1); /* Sombras en capas */
            transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.5s ease; /* Agregando transición para fondo */
            width: 100%;
            max-width: 400px;
            height: 350px;
        }
        @media (max-width: 768px) {
            .card_ts {
                height: 350px; /* Ajusta la altura según necesidad */
                max-width: 110%; /* Opcional: Permitir que la tarjeta ocupe todo el ancho */
                max-width: 400px;
            }
            
        }
        .card_ts:hover {
            transform: translateY(-5px); /* Levantamiento */
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15), 
                        0 12px 24px rgba(0, 0, 0, 0.2); /* Sombras más fuertes */
            background: linear-gradient(45deg, #ff9a9e, #fad0c4, #fbc2eb, #a1c4fd, #c2e9fb, #d4fc79, #96e6a1); /* Gradiente holográfico */
            background-size: 300% 300%; /* Permite animación del gradiente */
            animation: holographicMove 3s infinite; /* Animación del gradiente */
        }

        @keyframes holographicMove {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }


        .card_ts-header1 {
            position: relative;
            background-color: #333;
            color: #fff;
        }

        .instructor-img {
            width: 100%;
            height: 170px;
            object-fit: cover;
            opacity: 0.8;
        }

        .live-tag {
            position: absolute;
            top: 8px;
            left: 8px;
            background-color: red;
            color: white;
            padding: 4px 8px;
            font-size: 12px;
            border-radius: 4px;
        }
        .live-tagP {
            position: absolute;
            top: 35px;
            left: 8px;
            background-color: rgb(25, 165, 221);
            color: white;
            padding: 4px 8px;
            font-size: 12px;
            border-radius: 4px;
        }

        .card_ts-body {
            padding: 10px;
            line-height: 1.5; /* Controla el espacio entre líneas */
            margin: 0; /* Evita márgenes heredados */
        }

        .card_ts-body p,
        .card_ts-body h2 {
            margin: 0 0 8px; /* Define un margen uniforme */
            line-height: 1.4; /* Ajusta según tu diseño */
        }
        .card_ts-body p,
        .card_ts-body h2 {
            margin-bottom: 0 !important; /* Sobrescribe márgenes de Bootstrap */
            padding: 0;
        }
        .course-category, .course-role {
            color: #800080;
            font-size: 14px;
        }
        .course-title {
            font-size: 18px;
            margin: 8px 0;
            color: #800080;
            font-weight: bold;
        }
        .course-description {
            font-size: 12px;
            color: #666;
            margin-bottom: 8px;
        }
        .course-info {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: #666;
            margin-bottom: 8px; /* Reduced margin */
        }
        

        .card_ts-footer {
            position: absolute;
            bottom: 0;
            width: 100%;
            padding: 8px; /* Reduced padding */
            background-color: #800080;
            color: #fff;
            box-sizing: border-box;
        }

        .buy-button {
            width: 100%;
            padding: 8px 0;
            color: #fff;
            font-size: 14px;
            font-weight: bold;
            background-color: #800080;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .buy-button:hover {
            background-color: #6a006a;
        }

        @media (max-width: 768px) {
            .card_tss-container {
                grid-template-columns: 1fr ; /* Dos columnas de igual tamaño */
                justify-items: center; /* Centra cada tarjeta dentro de su celda */
            }
            .course-category, .course-role {
                font-size: 12px; /* Reduce el tamaño de texto para móviles */
            }

            .course-title {
                font-size: 18px; /* Reduce el tamaño de texto del título */
            }
            .price {
                font-size: 22px;
            }
        }


            /* Full-width container for banners */
        /* .full-width-container {
            margin: 0;
            margin-top: 0; 
            padding: 0;
            display: flex;
            flex-direction: column;
            gap: 20px;
            background-color: #e6120b;
            position: relative;
            width: 100vw;
            top: 0;
        } */

        /* Banner styling */