/* 
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 carrusel .CSS ----------------------------------------
   ------------------------------------------------------------------------------------------------------------- */


/* IMPORTACION DE FUENTE RALEWAY */

@font-face {
    font-family: 'Raleway'; /* establece el nombre de la fuente que podrá utilizar el sitio */
    src: url('/fuentes/fuentes_google/fuente_raleway.ttf') format('truetype'); /* establece la ruta del archivo de fuente y su formato */
    font-weight: 100 900; /* permite utilizar los diferentes grosores disponibles de la fuente */
    font-style: normal; /* establece el estilo normal de la fuente */
}


/* TITULO 1 CONTENEDOR CARRUSEL */

    .carrusel {
        width: 100%; /* establece el ancho completo del carrusel */
        height: min(75vh, 55vw, 820px); /* controla la altura segun las dimensiones de la pantalla */
        min-height: 480px; /* mantiene una altura suficiente para mostrar el contenido */
        position: relative; /* permite posicionar los elementos internos respecto al carrusel */
        overflow: hidden; /* evita que los elementos sobresalgan del carrusel */
        background-color: #ffffff; /* establece el fondo blanco del carrusel */
    }


    /* SUBTITULO 1 LLAMADOS MEDIANTE INCLUDE PARA INTEGRAR EL CARRUSEL */

        .carrusel_imagen {
            width: 100%; /* establece el ancho completo del contenedor de imagenes */
            height: 100%; /* ocupa toda la altura del carrusel */
            position: absolute; /* posiciona las imagenes respecto al carrusel */
            top: 0; /* alinea el contenedor con el borde superior */
            left: 0; /* alinea el contenedor con el borde izquierdo */
        }

        .carrusel_texto {
            width: 760px; /* establece el ancho disponible para los textos */
            max-width: 76%; /* evita que el contenido supere el espacio disponible */
            position: absolute; /* permite posicionar el texto sobre las imagenes */
            top: 50%; /* posiciona el contenedor en el centro vertical */
            left: min(12vw, 180px); /* establece una distancia lateral adaptable y limitada */
            transform: translateY(-50%); /* centra verticalmente el contenedor */
            z-index: 10; /* mantiene los textos sobre las imagenes */
        }

        .carrusel_paginador {
            width: 100%; /* establece el ancho completo del contenedor */
            height: 100%; /* ocupa toda la altura del carrusel */
            position: absolute; /* permite posicionar los controles sobre el carrusel */
            top: 0; /* alinea el contenedor con el borde superior */
            left: 0; /* alinea el contenedor con el borde izquierdo */
            z-index: 20; /* mantiene los controles sobre las imagenes */
            pointer-events: none; /* permite interactuar con los elementos situados debajo */
        }



/* 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 LLAMADOS MEDIANTE INCLUDE PARA INTEGRAR EL CARRUSEL */

            .carrusel_texto {
                width: 72%; /* adapta el ancho del contenedor de texto */
                max-width: none; /* elimina la limitacion utilizada en computador */
                left: 10%; /* separa el contenido de la flecha izquierda */
            }

    }


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

        /* SUBTITULO 1 LLAMADOS MEDIANTE INCLUDE PARA INTEGRAR EL CARRUSEL */

            .carrusel_texto {
                width: 78%; /* aprovecha el espacio disponible para los textos */
                left: 11%; /* centra horizontalmente el contenedor */
            }

    }


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

        .carrusel {
            height: 75svh; /* adapta la altura al espacio visible del dispositivo movil */
            min-height: 540px; /* conserva espacio suficiente para los textos */
            max-height: 720px; /* evita un crecimiento excesivo en pantallas altas */
        }

        /* SUBTITULO 1 LLAMADOS MEDIANTE INCLUDE PARA INTEGRAR EL CARRUSEL */

            .carrusel_texto {
                width: 72%; /* establece el ancho del contenido para dispositivos moviles */
                left: 14%; /* centra el contenido dejando espacio para las flechas */
            }

    }


    /* 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 LLAMADOS MEDIANTE INCLUDE PARA INTEGRAR EL CARRUSEL */

            .carrusel_texto {
                width: 70%; /* ajusta el ancho del contenido a pantallas medianas */
                left: 15%; /* mantiene centrado el contenido */
            }

    }


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

        /* SUBTITULO 1 LLAMADOS MEDIANTE INCLUDE PARA INTEGRAR EL CARRUSEL */

            .carrusel_texto {
                width: 68%; /* adapta el ancho del contenido a pantallas pequeñas */
                left: 16%; /* mantiene el mismo espacio a ambos lados */
            }

    }
   

/* -------------------------------------------------------------------------------------------------------------
   -------------------------------------- FIN ITred Spa 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 
*/