.elementor-366 .elementor-element.elementor-element-80b0cab{--swiper-slides-to-display:1;--swiper-slides-gap:10px;--arrow-prev-left-align:0%;--arrow-prev-translate-x:0px;--arrow-prev-left-position:0px;--arrow-prev-top-align:50%;--arrow-prev-translate-y:-50%;--arrow-prev-top-position:0px;--arrow-next-right-align:0%;--arrow-next-translate-x:0%;--arrow-next-right-position:0px;--arrow-next-top-align:50%;--arrow-next-translate-y:-50%;--arrow-next-top-position:0px;--arrow-size:30px;--swiper-pagination-size:15px;--dots-horizontal-position:0px;--dots-horizontal-transform:0%;--dots-horizontal-offset:20px;--dots-vertical-position:100%;--dots-vertical-transform:-100%;--dots-vertical-offset:25px;}@media(max-width:1366px){.elementor-366 .elementor-element.elementor-element-80b0cab{--swiper-slides-to-display:1;}}@media(max-width:1024px){.elementor-366 .elementor-element.elementor-element-80b0cab{--swiper-slides-to-display:1;}}@media(max-width:767px){.elementor-366 .elementor-element.elementor-element-80b0cab{--swiper-slides-to-display:1;}}/* Start custom CSS for loop-carousel, class: .elementor-element-80b0cab *//* Asegura que todos los puntos compartan la misma línea de eje central al estirarse */
.elementor-366 .elementor-element.elementor-element-80b0cab .swiper-pagination-bullets.swiper-pagination-horizontal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0px; /* Espaciado entre los puntos */
}

/* 1. PUNTOS INACTIVOS (Círculos blancos con borde negro) */
.elementor-366 .elementor-element.elementor-element-80b0cab .swiper-pagination-bullet {
    width: 11px !important;
    height: 11px !important;
    background-color: #ffffff !important;
    border: 1.5px solid #000000 !important;
    opacity: 1 !important; /* Mata la opacidad grisácea nativa de Elementor */
    border-radius: 50% !important;
    box-sizing: border-box;
    /* Transición suave para el efecto de estirado */
    transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.3s ease, border-color 0.3s ease !important;
}

/* 2. PUNTO ACTIVADO (Píldora estirada negra) */
.elementor-366 .elementor-element.elementor-element-80b0cab .swiper-pagination-bullet.swiper-pagination-bullet-active {
    width: 40px !important; /* Controla qué tan largo se estira */
    background-color: #000000 !important;
    border-color: #000000 !important;
    border-radius: 999px !important; /* Mantiene los bordes perfectamente redondeados tipo píldora */
}


/* 1. Configuración de tu contenedor destino */
#flechas-casos-blog {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important; /* Espaciado entre flechas */
    align-items: center !important;
    justify-content: flex-start !important;
    margin-top: 24px; /* Ajustalo a ojo según tu diseño */
}

/* 2. Reseteo estructural obligatorio de las flechas de Elementor */
#flechas-casos-blog .elementor-swiper-button {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    margin: 0 !important;
    transition: all 0.2s ease-in-out !important;
}

/* Tamaño de los vectores de las flechas */
#flechas-casos-blog .elementor-swiper-button svg {
    width: 16px !important;
    height: 16px !important;
}

/* 3. Estilo de FLECHA IZQUIERDA (Blanca con borde negro) */
#flechas-casos-blog .elementor-swiper-button-prev {
    background-color: #ffffff !important;
    border: 1.5px solid #000000 !important;
}
#flechas-casos-blog .elementor-swiper-button-prev svg {
    fill: #000000 !important;
}

/* 4. Estilo de FLECHA DERECHA (Negra entera) */
#flechas-casos-blog .elementor-swiper-button-next {
    background-color: #000000 !important;
    border: 1.5px solid #000000 !important;
}
#flechas-casos-blog .elementor-swiper-button-next svg {
    fill: #ffffff !important;
}

/* Hover opcional para dar feedback */
#flechas-casos-blog .elementor-swiper-button:hover {
    transform: scale(1.05) !important;
}
/* Parche de seguridad: oculta cualquier flecha duplicada que use el formato chevron antiguo */
#flechas-casos-blog .elementor-swiper-button:has(svg.e-eicon-chevron-left),
#flechas-casos-blog .elementor-swiper-button:has(svg.e-eicon-chevron-right) {
    display: none !important;
}/* End custom CSS */
/* Start custom CSS */.respuesta-negrita strong{
    font-weight: bold;
}
#proyectos-card strong{
    font-size: clamp(0.875rem, 0.75rem + 0.5vw, 1.125rem);
}/* End custom CSS */