/* 
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 */
            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: 2.5rem; /* 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 */
            background-color: transparent;
            transition: transform 0.3s ease;
        }

        .boton_flecha_carrusel:hover{
            transform: scale(1.2); 
        }


        .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: #99813D; /* 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; /* evita solapar los controles del sitio */
            }

            .boton_flecha_carrusel {
                width: 48px; /* adapta el ancho de la flecha */
                height: 48px; /* adapta la altura de la flecha */
                font-size: 26px; /* ajusta el simbolo */
            }

        /* SUBTITULO 2 INDICADORES PAGINADOR */

            .indicadores_paginador_carrusel {
                gap: 8px; /* mantiene la separacion */
            }

            .indicador_carrusel {
                width: 40px; /* reduce 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 para redes */
            }

            .boton_flecha_carrusel {
                width: 44px; /* mantiene un control visible */
                height: 44px; /* conserva una superficie comoda */
                font-size: 24px; /* escala el simbolo */
            }

        /* SUBTITULO 2 INDICADORES PAGINADOR */

            .indicadores_paginador_carrusel {
                bottom: 16px; /* mantiene la distancia inferior */
            }

            .indicador_carrusel {
                width: 36px; /* adapta 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 40px 0 3vw; /* separa la flecha derecha de las redes */
            }

            .boton_flecha_carrusel {
                width: 38px; /* mantiene la interaccion tactil */
                height: 38px; /* conserva un tamaño compacto */
                font-size: 22px; /* adapta el simbolo */
            }

        /* SUBTITULO 2 INDICADORES PAGINADOR */

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

            .indicador_carrusel {
                width: 28px; /* evita ocupar demasiado ancho */
            }

    }


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

        /* SUBTITULO 1 FLECHAS PAGINADOR */

            .flechas_paginador_carrusel {
                padding: 0 48px 0 6px; /* ubica ambas flechas sobre la fotografia */
            }

            .boton_flecha_carrusel {
                width: 34px; /* flechas compactas para la fotografia horizontal */
                height: 34px; /* mantiene tamaño uniforme */
                font-size: 22px; /* mantiene el simbolo legible */
            }

        /* SUBTITULO 2 INDICADORES PAGINADOR */

            .indicadores_paginador_carrusel {
                bottom: 6px; /* fija los indicadores al borde inferior de la foto */
                gap: 6px; /* conserva la separacion */
            }

            .indicador_carrusel {
                width: 26px; /* adapta el ancho sin cubrir la imagen */
            }

    }


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

            .boton_flecha_carrusel {
                width: 34px; /* mantiene el control compacto */
                height: 34px; /* conserva su altura */
            }

        /* SUBTITULO 2 INDICADORES PAGINADOR */

            .indicador_carrusel {
                width: 25px; /* evita saturar la fotografia */
            }

    }


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

        /* SUBTITULO 1 FLECHAS PAGINADOR */

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

            .boton_flecha_carrusel {
                width: 32px; /* adapta el control */
                height: 32px; /* adapta su altura */
                font-size: 20px; /* reduce el simbolo */
            }

        /* SUBTITULO 2 INDICADORES PAGINADOR */

            .indicador_carrusel {
                width: 24px; /* adapta los indicadores */
            }

    }

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