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

        .carrusel {
            height: 420px; /* mantiene altura suficiente para el recuadro superpuesto */
            min-height: 0; /* elimina el minimo de escritorio */
        }

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

            .carrusel_texto {
                width: min(40vw, 390px); /* limita el ancho del texto a la izquierda */
                max-width: none; /* elimina el ancho maximo del escritorio */
                left: 5vw; /* separa el cuadro del borde y de la flecha */
            }

    }


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

        .carrusel {
            height: 410px; /* permite mostrar la descripcion sin cortarla */
        }

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

            .carrusel_texto {
                width: min(44vw, 340px); /* recuadro estrecho sobre la zona izquierda */
                left: 5vw; /* deja libre el centro de la fotografia */
            }

    }


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

    .carrusel {
        display: grid; /* organiza la fotografia arriba y el texto abajo */
        grid-template-columns: minmax(0, 1fr); /* utiliza todo el ancho disponible */
        grid-template-rows: auto auto; /* adapta la altura de ambas partes */
        width: 100%; /* ocupa el ancho completo */
        height: auto; /* adapta la altura al contenido */
        min-height: 0; /* elimina la altura minima */
        max-height: none; /* permite crecer segun el contenido */
        overflow: hidden; /* evita desbordamientos */
        background-color: #182B3A; /* establece el fondo azul tinta */
    }

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

        .carrusel_imagen {
            position: relative; /* incorpora la imagen al flujo normal */
            top: auto; /* elimina la posicion anterior */
            left: auto; /* elimina la posicion anterior */
            grid-row: 1; /* coloca la imagen en la primera fila */
            grid-column: 1; /* ocupa toda la columna */
            width: 100%; /* ocupa el ancho completo */
            height: auto; /* adapta su altura */
            aspect-ratio: 1430 / 572; /* conserva la proporcion original */
            min-width: 0; /* evita desbordamientos */
        }

        .carrusel_texto {
            position: relative; /* coloca el texto debajo de la fotografia */
            top: auto; /* elimina el centrado vertical */
            bottom: auto; /* elimina el posicionamiento inferior */
            left: auto; /* elimina el desplazamiento lateral */
            grid-row: 2; /* coloca el texto en la segunda fila */
            grid-column: 1; /* ocupa toda la columna */
            width: 100%; /* iguala el ancho de la imagen */
            max-width: 100%; /* evita superar el contenedor */
            min-width: 0; /* permite adaptar el contenido */
            padding: 0; /* elimina espacios externos */
            transform: none; /* elimina el centrado de escritorio */
            box-sizing: border-box; /* incluye los bordes en el ancho */
        }

        .carrusel_paginador {
            position: absolute; /* mantiene los controles sobre la fotografia */
            top: 0; /* comienza al inicio de la imagen */
            left: 0; /* alinea los controles */
            width: 100%; /* ocupa todo el ancho */
            height: auto; /* adapta la altura */
            aspect-ratio: 1430 / 572; /* mantiene controles sobre la imagen */
        }

}


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

        .carrusel {
            display: grid; /* organiza la foto arriba y el texto abajo */
            grid-template-columns: minmax(0, 1fr); /* utiliza el ancho completo */
            grid-template-rows: auto auto; /* deja que ambas partes ajusten su altura */
            width: 100%; /* mantiene el ancho del sitio */
            height: auto; /* elimina la altura fija para no aplastar el texto */
            min-height: 0; /* elimina el minimo anterior */
            max-height: none; /* permite crecer con cada descripcion */
            overflow: hidden; /* evita desbordamientos horizontales */
            background-color: #182B3A; /* fondo azul tinta bajo el texto */
        }

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

            .carrusel_imagen {
                position: relative; /* incorpora la fotografia al flujo de la grilla */
                top: auto; /* elimina posicion vertical de escritorio */
                left: auto; /* elimina posicion horizontal de escritorio */
                grid-row: 1; /* coloca la imagen arriba */
                grid-column: 1; /* conserva el ancho completo */
                width: 100%; /* ocupa el ancho del carrusel */
                height: auto; /* permite conservar la proporcion */
                aspect-ratio: 1430 / 572; /* muestra completa la foto panoramica */
                min-width: 0; /* evita desbordamientos del grid */
            }

            .carrusel_texto {
                position: relative; /* coloca el texto debajo, sin superponerlo */
                top: auto; /* elimina el centrado vertical */
                bottom: auto; /* evita anclarlo sobre la foto */
                left: auto; /* elimina desplazamientos laterales */
                grid-row: 2; /* coloca el recuadro debajo de la imagen */
                grid-column: 1; /* alinea imagen y recuadro */
                width: 100%; /* ocupa el mismo ancho que la fotografia */
                max-width: 100%; /* impide desbordar */
                min-width: 0; /* deja adaptar el texto */
                padding: 0; /* evita que la tarjeta pierda el ancho total */
                transform: none; /* elimina el translateY de escritorio */
                box-sizing: border-box; /* incluye cualquier borde futuro */
            }

            .carrusel_paginador {
                position: absolute; /* mantiene los controles sobre la fotografia */
                top: 0; /* empieza en la zona de la imagen */
                left: 0; /* alinea los controles a la izquierda */
                width: 100%; /* ocupa solo el ancho del carrusel */
                height: auto; /* evita que incluya el texto inferior */
                aspect-ratio: 1430 / 572; /* deja las flechas centradas en la fotografia */
            }

    }


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

        /* Sin media */

    }


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

        /* Sin media */

    }

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