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

    /* contiene los controles principales de navegacion del carrusel */
    .contenedor_paginador_carrusel {
        width: 100%; /* establece el ancho completo del contenedor */
        height: 100%; /* establece la altura completa del contenedor */
        position: relative; /* permite posicionar los elementos internos de forma absoluta */
        pointer-events: none; /* permite que los eventos atraviesen el contenedor */
    }


    /* SUBTITULO 1 FLECHAS PAGINADOR */

        /* contiene y distribuye las flechas laterales del carrusel */
        .flechas_paginador_carrusel {
            width: 100%; /* establece el ancho completo de las flechas */
            position: absolute; /* permite posicionar las flechas respecto al contenedor */
            top: 50%; /* posiciona las flechas en la mitad vertical */
            left: 0; /* alinea las flechas con el extremo izquierdo */
            display: flex; /* organiza las flechas mediante una estructura flexible */
            justify-content: space-between; /* separa las flechas hacia los extremos */
            align-items: center; /* centra las flechas verticalmente */
            padding: 0 25px; /* establece el espacio horizontal interno */
            box-sizing: border-box; /* incluye el padding dentro de las dimensiones */
            transform: translateY(-50%); /* centra verticalmente el bloque de flechas */
            pointer-events: none; /* permite que los eventos atraviesen el contenedor */
        }

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

        /* modifica las flechas del carrusel al posicionar el cursor sobre ellas */
        .boton_flecha_carrusel:hover {
            background-color: #c99746; /* establece el color de fondo al pasar el cursor */
        }

        /* identifica el boton utilizado para retroceder en el carrusel */
        .boton_anterior_carrusel {
            margin: 0; /* elimina el margen externo del boton */
        }

        /* identifica el boton utilizado para avanzar en el carrusel */
        .boton_siguiente_carrusel {
            margin: 0; /* elimina el margen externo del boton */
        }


    /* SUBTITULO 2 INDICADORES PAGINADOR */

        /* contiene y centra los indicadores inferiores del carrusel */
        .indicadores_paginador_carrusel {
            position: absolute; /* permite posicionar los indicadores respecto al contenedor */
            bottom: 18px; /* establece la distancia inferior de los indicadores */
            left: 50%; /* posiciona los indicadores en el centro horizontal */
            display: flex; /* organiza los indicadores mediante una estructura flexible */
            gap: 10px; /* establece la separacion entre indicadores */
            transform: translateX(-50%); /* centra horizontalmente el bloque de indicadores */
            pointer-events: auto; /* permite interactuar con los indicadores */
        }

        /* establece el tamaño y comportamiento de cada indicador */
        .indicador_carrusel {
            width: 48px; /* establece el ancho de cada indicador */
            height: 4px; /* establece la altura de cada indicador */
            border-radius: 10px; /* redondea los extremos del indicador */
            cursor: pointer; /* muestra el cursor de seleccion */
        }

        /* identifica visualmente la diapositiva mostrada actualmente */
        .indicador_carrusel_activo {
            background-color: #ffffff; /* establece el color del indicador activo */
        }

        /* identifica visualmente las diapositivas que no se encuentran activas */
        .indicador_carrusel_inactivo {
            background-color: #c99746; /* establece el color de los indicadores inactivos */
        }

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