/* 1. Ocultamos todo el texto dentro de los botones de navegación */
.owl-nav button.owl-prev,
.owl-nav button.owl-next {
    font-size: 0 !important; /* Elimina el texto 'next' y '>' */
    color: transparent !important; /* Por si acaso queda rastro de color */
    border: none !important; /* Elimina ese subrayado que se ve en la foto */
    outline: none !important;
    text-decoration: none !important;
}

/* 2. Hacemos que SOLO el icono de FontAwesome sea visible */
.owl-nav button i {
    font-size: 24px !important; /* Tamaño de la flecha real */
    color: #ffffff !important; /* Color de la flecha */
    display: block !important;
    visibility: visible !important;
}

/* 3. Estilizamos el botón para que se vea profesional (Opcional) */
.owl-nav button {
    background: rgba(0, 0, 0, 0.4) !important; /* Fondo circular oscuro */
    width: 50px;
    height: 50px;
    border-radius: 50% !important;
    transition: background 0.3s ease;
}

    .owl-nav button:hover {
        background: rgba(0, 0, 0, 0.8) !important;
    }

/* Borra flechas o textos creados por la plantilla (pseudo-elementos) */
.owl-prev::before,
.owl-prev::after,
.owl-next::before,
.owl-next::after {
    display: none !important;
    content: "" !important;
}

.owl-item .parallax-container {
    height: 600px !important; /* Ajusta este valor (ej. 500px o 650px) según tu diseño */
    min-height: 600px !important;
    max-height: 600px !important;
    display: flex !important;
    align-items: center; /* Centra el contenido verticalmente */
    overflow: hidden;
}

/* 2. Normalizar el comportamiento de la imagen */
.owl-item .material-parallax img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* La clave: recorta la imagen para llenar el espacio sin deformarla */
    object-position: center !important;
    min-width: 100% !important;
    min-height: 100% !important;
}

/* 3. Asegurar que el contenido de texto no altere el tamaño */
.parallax-content {
    width: 100%;
    z-index: 1;
}

.owl-dots {
    margin-top: 20px !important;
}

.banner-title {
    color: #ffc107; /* Amarillo dorado */
    font-size: 38px; /* Ajusta según el diseño */
    font-weight: bold;
    text-shadow: 2px 2px 5px #000000; /* Sombra negra suave */
}

.banner-subtitle {
    color: #D3D3D3; /* Gris claro */
    font-size: 20px; /* Ajusta según el diseño */
    font-weight: normal;
    text-shadow: 1px 1px 3px #000000; /* Sombra negra más ligera */
}

.banner-description {
    color: #FFFFFF; /* Blanco puro */
    font-size: 16px; /* Ajusta según el diseño */
    line-height: 1.5;
    text-shadow: 1px 1px 2px #000000; /* Sombra negra para mejor contraste */
}

.banner-button {
    /* background-color: #FFD700; /* Amarillo dorado */ */ font-size: 18px; /* Ajusta según el diseño */
    font-weight: bold;
    border: none; /* Sin bordes */

    cursor: pointer;
    text-transform: uppercase; /* Texto en mayúsculas */
}

    .banner-button:hover {
        box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.7); /* Sombra más pronunciada */
    }

@@media (max-width: 520px) {
    .section-custom-1 .material-parallax img {
        display: none;
        position: absolute;
        left: 60%;
        bottom: -6%;
        opacity: .3;
    }
}

@media (max-width: 768px) {
    /* Seleccionamos la imagen dentro del banner */
    .parallax-container-mobile .material-parallax img {
        /* Ejemplo: 50% horizontal (centrado) y 20% vertical (sube la imagen) */
        object-position: 50% 10% !important;
        /* Forzamos que cubra todo el ancho del celular */
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* Ajuste del contenedor para que no sea tan alto en mobile */
    .parallax-container-mobile {
        height: 400px !important;
        min-height: 400px !important;
    }
}

/* ============================================================
   REGLAS DE ORO PARA EL CARRUSEL (TODOS LOS DISPOSITIVOS)
   ============================================================ */

/* 1. Reset general para evitar que los botones rompan el diseño */
.home-banner-carousel .owl-nav button {
    font-size: 0 !important;
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.home-banner-carousel .owl-nav span {
    display: none !important; /* Elimina texto residual 'next/prev' */
}

/* 2. Estabilización de imágenes */
.home-banner-carousel .material-parallax img {
    width: 100% !important;
    height: 115% !important; /* Un poco más alta para que el parallax tenga margen de movimiento */
    object-fit: cover !important;
    object-position: center center !important;
    max-width: none !important;
}

/* ============================================================
   RESPONSIVE: ALTURAS POR DISPOSITIVO
   ============================================================ */

/* ESCRITORIO GRANDE (Monitores de 1200px en adelante) */
@media (min-width: 1200px) {
    .home-banner-carousel .parallax-container {
        height: 650px !important;
        min-height:650px !important;
    }
}

/* ESCRITORIO NORMAL / LAPTOPS (992px a 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .home-banner-carousel .parallax-container {
        height: 480px !important;
        min-height: 480px !important;
    }
}

/* TABLETS (768px a 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .home-banner-carousel .parallax-container {
        height: 750px !important;
        min-height: 750px !important;
    }

    .banner-title {
        font-size: 2.5rem;
    }
    /* Ajusta el tamaño de fuente si es muy grande */
}

/* MÓVILES (Menos de 767px) */
@media (max-width: 767px) {
    .home-banner-carousel .parallax-container {
        height: 650px !important;
        min-height: 650px !important;
    }

    /* En móvil, el banner azul de cuotas suele verse mejor centrado */
    .home-banner-carousel .material-parallax img {
        object-position: center center !important;
        height: 100% !important; /* Menos parallax en móvil para evitar saltos */
    }

    /* Ocultamos descripciones muy largas para que no se amontonen */
    .banner-description {
        display: none;
    }
}