/* 
Sitio Web Creado por ITred Spa.
Direccion: Guido Reni #4190
Pedro Aguirre Cerda - Santiago - Chile
contacto@itred.cl o itred.spa@gmail.com
https://www.itred.cl
Creado, Programado y Diseñado por ITred Spa.
BPPJ 
*/


/* -------------------------------------------------------------------------------------------------------------
   ------------------------------------- INICIO ITred Spa paginador_carrusel .CSS ------------------------------
   ------------------------------------------------------------------------------------------------------------- */

/* TITULO 1 PAGINADOR CARRUSEL */

    .contenedor_paginador_carrusel {
        width: 100%; /* establece el ancho completo del contenedor */
        height: 100%; /* ocupa toda la altura del carrusel */
        position: relative; /* permite posicionar los controles dentro del contenedor */
        pointer-events: none; /* permite interactuar con los elementos situados debajo */
    }


    /* SUBTITULO 1 FLECHAS PAGINADOR */

        .flechas_paginador_carrusel {
            width: 100%; /* establece el ancho completo del contenedor de flechas */
            position: absolute; /* posiciona las flechas sobre el carrusel */
            top: 50%; /* posiciona las flechas en el centro vertical */
            left: 0; /* alinea el contenedor con el borde izquierdo */
            display: flex; /* organiza las flechas horizontalmente */
            justify-content: space-between; /* distribuye las flechas hacia ambos extremos */
            align-items: center; /* centra verticalmente las flechas */
            padding: 0 5vw; /* establece los espacios laterales de las flechas */
            box-sizing: border-box; /* incluye los espacios internos dentro de las dimensiones */
            transform: translateY(-50%); /* centra verticalmente el contenedor */
            pointer-events: none; /* permite interactuar con los elementos situados debajo */
        }

        .boton_flecha_carrusel {
            width: 55px; /* establece el ancho del boton */
            height: 55px; /* establece la altura del boton */
            display: flex; /* organiza el contenido mediante una estructura flexible */
            justify-content: center; /* centra horizontalmente el simbolo */
            align-items: center; /* centra verticalmente el simbolo */
            padding: 0; /* elimina los espacios internos predeterminados */
            background-color: #c997469c; /* establece el fondo dorado semitransparente */
            border: none; /* elimina el borde del boton */
            border-radius: 50%; /* establece la forma circular del boton */
            color: #ffffff; /* establece el color blanco del simbolo */
            font-size: 30px; /* establece el tamaño del simbolo */
            font-weight: 300; /* establece el grosor del simbolo */
            cursor: pointer; /* muestra el cursor de seleccion */
            pointer-events: auto; /* permite interactuar con el boton */
        }

        .boton_flecha_carrusel:hover {
            background-color: #c99746; /* establece el fondo dorado al posicionar el cursor */
        }

        .boton_anterior_carrusel {
            margin: 0; /* elimina el margen externo del boton anterior */
        }

        .boton_siguiente_carrusel {
            margin: 0; /* elimina el margen externo del boton siguiente */
        }


    /* SUBTITULO 2 INDICADORES PAGINADOR */

        .indicadores_paginador_carrusel {
            position: absolute; /* permite posicionar los indicadores sobre el carrusel */
            bottom: 18px; /* establece la distancia respecto al borde inferior */
            left: 50%; /* posiciona los indicadores en el centro horizontal */
            display: flex; /* organiza los indicadores horizontalmente */
            gap: 10px; /* establece la separacion entre los indicadores */
            transform: translateX(-50%); /* centra horizontalmente los indicadores */
            pointer-events: auto; /* permite interactuar con los indicadores */
        }

        .indicador_carrusel {
            width: 48px; /* establece el ancho de los indicadores */
            height: 4px; /* establece la altura de los indicadores */
            border-radius: 10px; /* redondea los extremos de los indicadores */
            cursor: pointer; /* muestra el cursor de seleccion */
        }

        .indicador_carrusel_activo {
            background-color: #ffffff; /* identifica la diapositiva activa */
        }

        .indicador_carrusel_inactivo {
            background-color: #c99746; /* identifica las diapositivas inactivas */
        }



/* Responsive */

    /* pantallas grandes (monitores Full HD+, iMac, monitores gaming QHD/4K) */
    @media (min-width: 1441px) {

        /* Sin media */

    }


    /* notebooks grandes (1600x900, 1920x1080) */
    @media (max-width: 1440px) {

        /* Sin media */

    }


    /* notebooks comunes (1366x768, MacBook Air/Pro) */
    @media (max-width: 1200px) {

        /* Sin media */

    }


    /* tablets horizontales / pantallas medianas (iPad Pro en horizontal, notebooks pequeños) */
    @media (max-width: 992px) {

        /* SUBTITULO 1 FLECHAS PAGINADOR */

            .flechas_paginador_carrusel {
                padding: 0 6.5vw 0 3vw; /* ajusta los espacios laterales de las flechas */
            }

            .boton_flecha_carrusel {
                width: 48px; /* reduce el ancho de las flechas */
                height: 48px; /* reduce la altura de las flechas */
                font-size: 26px; /* ajusta el tamaño del simbolo */
            }


        /* SUBTITULO 2 INDICADORES PAGINADOR */

            .indicadores_paginador_carrusel {
                gap: 8px; /* reduce la separacion entre indicadores */
            }

            .indicador_carrusel {
                width: 40px; /* reduce el ancho de los indicadores */
            }

    }


    /* tablets verticales (iPad clásico, tablets Android estándar) */
    @media (max-width: 768px) {

        /* SUBTITULO 1 FLECHAS PAGINADOR */

            .flechas_paginador_carrusel {
                padding: 0 9vw 0 3vw; /* reserva espacio lateral para los controles del sitio */
            }

            .boton_flecha_carrusel {
                width: 44px; /* establece el ancho de las flechas */
                height: 44px; /* establece la altura de las flechas */
                font-size: 24px; /* ajusta el tamaño del simbolo */
            }


        /* SUBTITULO 2 INDICADORES PAGINADOR */

            .indicadores_paginador_carrusel {
                bottom: 16px; /* ajusta la distancia respecto al borde inferior */
            }

            .indicador_carrusel {
                width: 36px; /* reduce el ancho de los indicadores */
            }

    }


    /* móviles extragrandes (pantallas compactas y dispositivos de gran tamaño) */
    @media (max-width: 576px) {

        /* SUBTITULO 1 FLECHAS PAGINADOR */

            .flechas_paginador_carrusel {
                padding: 0 50px 0 3vw; /* separa la flecha derecha de los botones de redes */
            }

            .boton_flecha_carrusel {
                width: 38px; /* adapta el ancho de las flechas a moviles */
                height: 38px; /* adapta la altura de las flechas a moviles */
                font-size: 22px; /* ajusta el tamaño del simbolo */
            }


        /* SUBTITULO 2 INDICADORES PAGINADOR */

            .indicadores_paginador_carrusel {
                bottom: 12px; /* acerca los indicadores al borde inferior */
                gap: 6px; /* reduce la separacion entre los indicadores */
            }

            .indicador_carrusel {
                width: 28px; /* reduce el ancho de los indicadores */
            }

    }


    /* móviles grandes (iPhone 11, iPhone Plus/Max, Android grandes) */
    @media (max-width: 414px) {

        /* Sin media */

    }


    /* móviles medianos (iPhone 12/13/14, Android gama media) */
    @media (max-width: 390px) {

        /* SUBTITULO 1 FLECHAS PAGINADOR */

            .flechas_paginador_carrusel {
                padding-right: 48px; /* mantiene la flecha derecha separada de las redes */
            }

            .boton_flecha_carrusel {
                width: 36px; /* reduce ligeramente el ancho de las flechas */
                height: 36px; /* reduce ligeramente la altura de las flechas */
            }


        /* SUBTITULO 2 INDICADORES PAGINADOR */

            .indicador_carrusel {
                width: 26px; /* reduce ligeramente el ancho de los indicadores */
            }

    }


    /* móviles pequeños (Android estándar, iPhone SE) */
    @media (max-width: 360px) {

        /* SUBTITULO 1 FLECHAS PAGINADOR */

            .flechas_paginador_carrusel {
                padding-left: 2vw; /* acerca la flecha izquierda al borde */
            }

            .boton_flecha_carrusel {
                width: 34px; /* establece el ancho de las flechas */
                height: 34px; /* establece la altura de las flechas */
                font-size: 20px; /* reduce el tamaño del simbolo */
            }


        /* SUBTITULO 2 INDICADORES PAGINADOR */

            .indicador_carrusel {
                width: 24px; /* adapta el ancho de los indicadores a pantallas pequeñas */
            }

    }
/* -------------------------------------------------------------------------------------------------------------
   -------------------------------------- FIN ITred Spa paginador_carrusel .CSS --------------------------------
   ------------------------------------------------------------------------------------------------------------- */


/* 
Sitio Web Creado por ITred Spa.
Direccion: Guido Reni #4190
Pedro Aguirre Cerda - Santiago - Chile
contacto@itred.cl o itred.spa@gmail.com
https://www.itred.cl
Creado, Programado y Diseñado por ITred Spa.
BPPJ 
*/