/* 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;
        }

        /* Dots: dash 24x4, tap/hover area 24x24 */
        .embla__dot {
            width: 24px;
            height: 24px;
            background: transparent;
            border: none;
            cursor: pointer;
            padding: 0;
            margin: 0;
            position: relative;
            transition: opacity 0.2s ease;
        }

        .embla__dot::after {
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            width: 24px;
            height: 4px;
            transform: translate(-50%, -50%);
            background-color: #ccc;
            border-radius: 2px;
            transition: background-color 0.2s ease, opacity 0.2s ease;
        }

        .embla__dot:hover::after,
        .embla__dot:focus-visible::after {
            opacity: 0.85;
        }

        .embla__dot:hover,
        .embla__dot:focus-visible {
            background: rgba(155, 249, 206, 0.22);
            border-radius: 3px;
        }

        .embla__dot--selected::after {
            background-color: #127749;
            opacity: 1;
        }