/* Estilos para Embla Carousel */
        .embla {
            position: relative;
            max-width: 100%;
            margin: 0 auto;
            padding: 2rem 0;
        }
        
        .embla__viewport {
            overflow: hidden;
            width: 100%;
        }
        
        .embla__container {
            display: flex;
            user-select: none;
            -webkit-touch-callout: none;
            -khtml-user-select: none;
            -webkit-tap-highlight-color: transparent;
        }
        
        .embla__slide {
            min-width: 100%;
            position: relative;
        }
        
        .embla__slide img {
            display: block;
            height: auto;
            width: 100%;
            object-fit: cover;
        }
        
        .embla__buttons {
            display: flex;
            justify-content: space-between;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 10px;
            right: 10px;
            z-index: 1;
        }
        
        .embla__button {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgba(255, 255, 255, 0.7);
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .embla__button:hover {
            background-color: rgba(255, 255, 255, 0.9);
        }
        
        .embla__button svg {
            width: 24px;
            height: 24px;
        }
        
        .embla__dots {
            display: flex;
            justify-content: center;
            gap: 4px; /* Reducir el espacio entre indicadores */
            position: relative;
            margin-top: 20px;
            margin-bottom: 10px;
        }

        .embla__dot {
            width: 20px; /* Más ancho para crear el efecto de barra */
            height: 5px; /* Altura reducida para parecer una barra */
            border-radius: 10px; /* Sin bordes redondeados */
            background-color: #ccc; /* Color gris claro para los no seleccionados */
            border: none;
            cursor: pointer;
            padding: 0;
            margin: 0;
            transition: all 0.3s ease;
        }

        .embla__dot--selected {
            background-color: #127749; /* Color verde Rolex */
            height: 5px; /* Ligeramente más alto cuando está seleccionado */
            width: 50px;
        }