.carouseles {
            position: relative;
            width: 100%;
            height: 60vh;
            overflow: hidden;
        }

        .carouseles-images {
            position: relative;
            height: 100%;
        }

        .carouseles-images img {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 100%;
            transition: left 1s ease-in-out;
            z-index: 1;
        }

        .carouseles-images img.active {
            left: 0; /* Mueve la imagen activa al frente */
        }

        /* Estilo para los botones de navegación */
        .carouseles-buttons {
            position: absolute;
            top: 50%;
            width: 100%;
            display: flex;
            justify-content: space-between;
            transform: translateY(-50%);
            z-index: 3; /* Asegúrate de que los botones estén por encima de las imágenes */
        }

        .carouseles-buttons button {
            background: rgb(255 255 255 / 0%);
            border: none;
            cursor: pointer;
            padding: 10px;
            z-index: 3;
        }
        
        .carousel-button {
            background: rgba(0, 0, 0, 0.5);
            border: none;
            cursor: pointer;
            padding: 10px;
        }
        
        .nav-arrow {
            width: 30px; /* Ajusta según necesites */
            height: auto; /* Mantiene la proporción */
        }

        /* Overlay de contenido */
        .carouseles-overlay-container {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: flex-end;
            z-index: 2;
        }

        .carouseles-overlay {
            width: 80%; /* Aumentar el ancho para dispositivos más pequeños */
            max-width: 65%; /* Limitar el ancho máximo */
            background: rgba(0, 0, 0, 0.6);
            color: white;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 20px; /* Espaciado interno */
        }
        
        .carouseles-overlay h1 {
            margin: 0;
            font-family: 'Orelega One', serif;
            font-size: 6.5em; /* Tamaño grande para pantallas grandes */
            line-height: 1.2; /* Espacio entre líneas */
            color: #fdfdfd;
        }
        
        .carouseles-overlay p {
            margin: 0;
            font-family: 'Orelega One', serif;
            font-size: 2.5em; /* Tamaño grande para pantallas grandes */
            line-height: 1.2; /* Espacio entre líneas */
            color: #fdfdfd;
        }
        
        .carouseles-overlay .buttons {
            margin-top: 20px;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            gap: 10px; /* Alinear botones verticalmente */
        }
        
        .carouseles-overlay .buttons a {
            color: #fff6f6;
            background-color: #E05C4F;
            border: 2px solid #E05C4F;
            border-radius: 40px;
            padding: 10px 20px;
            margin: 5px 0; /* Margen vertical */
            text-decoration: none;
            cursor: pointer;
            font-size: 20px; /* Tamaño de la letra */
            font-family: 'Arial', sans-serif;
            font-weight: bold;
            transition: all 0.3s ease;
        }
        .carouseles-overlay .buttons a:hover {
            background-color: #f4f4f4; /* Color de fondo al pasar el ratón */
            border-color: #f4f4f4; /* Color del borde al pasar el ratón */
            transform: scale(1.1); /* Aumento de tamaño al pasar el ratón */
        }
        
        .carouseles-overlay .buttons a:active {
            background-color: #f4f4f4; /* Color de fondo al hacer clic */
            border-color: #f4f4f4; /* Color del borde al hacer clic */
        }

        /* Línea corta naranja */
        .orange-line {
            width: 10%;
            margin: 25px auto;
            border: 3px solid #E05C4F;
            border-radius: 10px;
        
        }

        /* Contenedor gris claro */
        .gray-container {
            width: 70%;
            margin: 0 auto;
            background: #ffffff;
            padding: 20px;
            border-radius: 10px;
            position: relative;
            overflow: hidden;
            box-shadow: -1px 6px 4px 5px rgb(0 0 0 / 8%);
        }

        /* Carrusel de convenios */
        .convenios-carousel {
            position: relative;
            overflow: hidden;
        }
        .convenios-carousel .slides {
            display: flex;
            transition: transform 0.5s ease-in-out;
            will-change: transform;
        }
        .convenios-carousel .slide {
            flex: 0 0 33.33%;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: stretch;
            padding: 10px;
            border: #ffffff;
            border-radius: 10px;
            box-shadow: 0 0 5px rgb(255 255 255);
            background: #fff;
            margin: 0;
        }

        .convenios-carousel .slide img {
            max-width: 100%;
            border-radius: 5px;
        }
        .convenios-carousel .slide p {
            text-align: left;
            margin: 10px 0 0;
        }
        .convenios-carousel .slide .title {
            font-size: 1.2em;
            font-weight: bold;
            margin-bottom: 5px;
        }
        .convenios-carousel .title {
            color: blue;
            font-size: 1.5em;
            margin-bottom: 10px;
            text-align: center;
        }
        .convenios-carousel .buttons {
            position: absolute;
            top: 50%;
            width: 100%;
            display: flex;
            justify-content: space-between;
            transform: translateY(-50%);
            z-index: 1;
        }
        .convenios-carousel .buttons button {
            background: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            padding: 10px;
            cursor: pointer;
            font-size: 1.5em;
        }

        /* Responsividad */
        @media (max-width: 768px) {
            .carouseles-overlay {
                max-width: 100%;
                padding: 20px;
            }
        
            .carouseles-overlay h1 {
                font-size: 4.5em; /* Tamaño más pequeño */
            }
        
            .carouseles-overlay p {
                font-size: 2em; /* Tamaño más pequeño */
            }
        
            .carouseles-overlay .buttons a {
                font-size: 13px;
                padding: 10px 15px;
            }
            .gray-container {
                width: 90%;
            }
            .convenios-carousel .slide {
                flex: 0 0 100%;
                border: 5px solid #ffffff;
            }
        }
.carouseles-image {
    display: none;
}

.carouseles-image.active {
    display: block;
}