.CRAI-styles {
    width: 100%;
}

.carousel-desktop {
    width: 100%;
    height: auto;
    display: block;
}

.ocultar-movil {
    display: block;
}

/* Ejemplo: ocultar en móviles */
@media (max-width: 768px) {
    .ocultar-movil {
        display: none;
    }
}

/* ===============================
   INDICADORES DEL CARRUSEL
   Solo líneas, sin puntos
================================ */

.carousel-indicators {
    bottom: 12px;
}

.carousel-indicators li {
    width: 40px;
    height: 4px;
    margin: 0 6px;

    background-color: #ffffff;
    opacity: 0.4;

    border-radius: 0;
    /* elimina forma de punto */
    border: none;
}

.carousel-indicators .active {
    opacity: 1;
}

/* ===============================
   CONTROLES DEL CARRUSEL
   Flechas más gruesas y visibles
================================ */

.carousel-control-prev,
.carousel-control-next {
    width: 6%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 3rem;
    height: 3rem;

    background-size: 100% 100%;
    transform: scale(1.3);
    /* hace la flecha más robusta */
}

/* Opcional: fondo sutil para mejor contraste */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4));
}

/* =================================
   Eliminar puntos (markers) reales
================================= */

.carousel-indicators {
    list-style: none;
    padding-left: 0;
}

.carousel-indicators li {
    list-style: none;
}

.carousel-indicators li::marker {
    content: none;
}

/* ===============================
   Ajuste de altura para iframe
================================ */

html,
body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* Asegura que el carrusel no agregue espacio extra */
.CRAI-styles,
.ocultar-movil,
.carousel {
    margin: 0;
    padding: 0;
}