/* 
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 cabecera .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 de la fuente */
    font-style: normal; /* establece el estilo normal de la fuente */
}


/* TITULO 1 CONTENEDOR CABECERA */

    .contenedor_cabecera {
        width: 100%; /* ocupa el ancho completo de la ventana */
        height: 25vh; /* establece la altura del contenedor */
        min-height: 15vh; /* establece una altura minima proporcional a la pantalla */
        display: flex; /* organiza los elementos mediante una estructura flexible */
        align-items: center; /* centra verticalmente los elementos secundarios */
        justify-content: space-between; /* distribuye el espacio disponible entre los elementos */
        position: relative; /* permite posicionar elementos absolutos dentro del contenedor */
        padding: 0 2.5vw; /* establece el espacio interno lateral del contenedor */
        box-sizing: border-box; /* incluye el relleno y los bordes dentro del tamaño total */
        background-color: #ffffff; /* establece el fondo en blanco */
    }


    .espaciador_cabecera {
        display: none; /* evita reservar espacio adicional en escritorio */
    }


    /* SUBTITULO 1 LLAMADOS MEDIANTE INCLUDE PARA INTEGRAR LA CABECERA */

        .contenedor_logo_cabecera {
            display: flex; /* organiza el contenido mediante una estructura flexible */
            align-items: center; /* centra verticalmente la imagen del logo */
            justify-content: flex-start; /* posiciona el contenido hacia el lado izquierdo */
            z-index: 2; /* establece la posicion de la capa sobre el fondo */
        }

        .contenedor_menu_cabecera {
            flex: 1; /* permite ocupar el espacio horizontal disponible */
            display: flex; /* organiza el contenido mediante una estructura flexible */
            align-items: center; /* centra verticalmente los elementos del menu */
            justify-content: flex-end; /* posiciona las opciones del menu hacia el lado derecho */
            padding-right: 5.5vw; /* establece el espacio interno derecho del menu */
            margin-top: 4vh; /* desplaza verticalmente el menu hacia abajo */
            z-index: 2; /* establece la posicion de la capa sobre otros componentes */
        }

        .contenedor_inicio_sesion_cabecera {
            position: absolute; /* permite posicionar el contenedor respecto al principal */
            top: 2.5vh; /* establece la distancia respecto al borde superior */
            right: 2.5vh; /* establece la distancia respecto al borde derecho */
            display: flex; /* organiza el contenido mediante una estructura flexible */
            align-items: center; /* centra verticalmente el boton */
            justify-content: flex-end; /* posiciona el boton hacia el extremo derecho */
            z-index: 5; /* establece la prioridad de capa del elemento */
        }


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

        .contenedor_cabecera {
            position: fixed; /* mantiene la cabecera visible durante el desplazamiento */
            top: 0; /* posiciona la cabecera en la parte superior */
            left: 0; /* alinea la cabecera al extremo izquierdo */
            height: clamp(100px, 12vw, 132px); /* controla la altura segun el ancho sin depender de la altura de la pantalla */
            min-height: 0; /* elimina la altura minima heredada */
            z-index: 9999; /* mantiene la cabecera sobre las demas secciones */
        }

        .espaciador_cabecera {
            display: block; /* conserva el espacio ocupado por la cabecera fija */
            height: clamp(100px, 12vw, 132px); /* reserva exactamente la misma altura que la cabecera */
        }


        /* SUBTITULO 1 LLAMADOS MEDIANTE INCLUDE PARA INTEGRAR LA CABECERA */

            .contenedor_menu_cabecera {
                position: relative; /* permite controlar la prioridad visual del menu */
                padding-right: 0; /* elimina el espacio reservado para el inicio de sesion externo */
                margin-top: 0; /* centra verticalmente el boton hamburguesa */
                z-index: 10000; /* mantiene el menu sobre el carrusel */
            }

            .contenedor_inicio_sesion_cabecera {
                display: none; /* oculta el inicio de sesion externo en tablets y dispositivos moviles */
            }

    }


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

        /* Sin media */

    }


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

        /* sin media */

    }
   

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

        /* Sin media */

    }


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

        /* Sin media */

    }


   

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