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


/* TITULO 1 CONTENEDOR MENU CABECERA */

    .menu_cabecera {
        display: flex; /* dispone los elementos en horizontal */
        align-items: center; /* centra verticalmente los botones y separadores */
        justify-content: flex-end; /* alinea todo el contenido hacia la derecha */
        font-family: 'Raleway', sans-serif; /* aplica la tipografia Raleway */
        font-size: 13.5pt; /* establece el tamaño del texto corporativo */
        font-weight: 700; /* establece el grosor de las opciones */
        letter-spacing: 0.05em; /* establece el espaciado entre letras */
        white-space: nowrap; /* evita saltos de linea */
    }

    .panel_menu_cabecera {
        display: flex; /* organiza horizontalmente las opciones en escritorio */
        align-items: center; /* centra verticalmente las opciones */
        justify-content: flex-end; /* posiciona las opciones hacia el lado derecho */
    }

    .logo_panel_menu_cabecera {
        display: none; /* mantiene oculto el logo en escritorio */
    }

    .logo_panel_menu_cabecera_img {
        width: 10rem; /* establece el ancho del logo */
        height: auto; /* mantiene la proporcion original del logo */
        display: block; /* permite controlar correctamente la imagen */
    }

    /* SUBTITULO 1 BOTON INICIO */

        .opcion_inicio_menu_cabecera {
            background: transparent !important; /* quita el fondo gris por defecto */
            background-color: transparent !important; /* refuerza la transparencia total */
            border: none !important; /* quita el borde nativo del boton */
            outline: none !important; /* elimina la linea de seleccion azul o negra */
            box-shadow: none !important; /* elimina las sombras por defecto */
            --webkit-appearance: none !important; /* quita los estilos nativos en Chrome y Safari */
            --moz-appearance: none !important; /* quita los estilos nativos en Firefox */
            font-family: inherit; /* hereda la tipografia Raleway */
            font-size: inherit; /* hereda el tamaño del texto */
            font-weight: 600; /* establece el grosor de la fuente */
            letter-spacing: inherit; /* hereda el espaciado entre letras */
            color: #c59341; /* establece el color dorado corporativo */
            cursor: pointer; /* establece el cursor de seleccion */
            position: relative; /* permite posicionar el subrayado respecto al boton */
            padding: 0 0.2vw; /* establece el espacio interno horizontal */
            margin: 0; /* elimina los margenes externos */
            display: inline-block; /* establece la visualizacion en linea del boton */
        }

        .opcion_inicio_menu_cabecera::after {
            content: ''; /* genera el elemento grafico del subrayado */
            position: absolute; /* posiciona el subrayado respecto al boton */
            left: 50%; /* establece el punto inicial en el centro */
            bottom: -0.7vh; /* establece la posicion debajo del texto */
            width: 0; /* mantiene el subrayado oculto inicialmente */
            height: 1.35pt; /* establece el grosor de la linea */
            background-color: #c59341; /* establece el color dorado */
            transition: width 0.3s ease, left 0.3s ease; /* establece una transicion suave */
            transform: translateX(-50%); /* centra el subrayado respecto al boton */
        }

        .opcion_inicio_menu_cabecera:hover::after {
            width: 100%; /* expande el subrayado hasta ocupar el ancho del boton */
        }

        .separador_inicio_menu_cabecera {
            margin: 0 0.8vw; /* establece la distancia entre el boton y el separador */
            color: #c59341; /* establece el color dorado */
            font-weight: 400; /* establece el grosor de la barra */
            user-select: none; /* impide seleccionar el separador */
        }


    /* SUBTITULO 2 BOTON SOBRE NOSOTROS */

        .opcion_sobre_nosotros_menu_cabecera {
            background: transparent !important; /* quita el fondo gris por defecto */
            background-color: transparent !important; /* refuerza la transparencia total */
            border: none !important; /* quita el borde nativo del boton */
            outline: none !important; /* elimina la linea de seleccion azul o negra */
            box-shadow: none !important; /* elimina las sombras por defecto */
            --webkit-appearance: none !important; /* quita los estilos nativos en Chrome y Safari */
            --moz-appearance: none !important; /* quita los estilos nativos en Firefox */
            font-family: inherit; /* hereda la tipografia Raleway */
            font-size: inherit; /* hereda el tamaño del texto */
            font-weight: 600; /* establece el grosor de la fuente */
            letter-spacing: inherit; /* hereda el espaciado entre letras */
            color: #c59341; /* establece el color dorado corporativo */
            cursor: pointer; /* establece el cursor de seleccion */
            position: relative; /* permite posicionar el subrayado respecto al boton */
            padding: 0 0.2vw; /* establece el espacio interno horizontal */
            margin: 0; /* elimina los margenes externos */
            display: inline-block; /* establece la visualizacion en linea del boton */
        }

        .opcion_sobre_nosotros_menu_cabecera::after {
            content: ''; /* genera el elemento grafico del subrayado */
            position: absolute; /* posiciona el subrayado respecto al boton */
            left: 50%; /* establece el punto inicial en el centro */
            bottom: -0.7vh; /* establece la posicion debajo del texto */
            width: 0; /* mantiene el subrayado oculto inicialmente */
            height: 1.35pt; /* establece el grosor de la linea */
            background-color: #c59341; /* establece el color dorado */
            transition: width 0.3s ease, left 0.3s ease; /* establece una transicion suave */
            transform: translateX(-50%); /* centra el subrayado respecto al boton */
        }

        .opcion_sobre_nosotros_menu_cabecera:hover::after {
            width: 100%; /* expande el subrayado hasta ocupar el ancho del boton */
        }

        .separador_sobre_nosotros_menu_cabecera {
            margin: 0 0.8vw; /* establece la distancia entre el boton y el separador */
            color: #c59341; /* establece el color dorado */
            font-weight: 400; /* establece el grosor de la barra */
            user-select: none; /* impide seleccionar el separador */
        }


    /* SUBTITULO 3 BOTON SERVICIOS */

        .opcion_servicios_menu_cabecera {
            background: transparent !important; /* quita el fondo gris por defecto */
            background-color: transparent !important; /* refuerza la transparencia total */
            border: none !important; /* quita el borde nativo del boton */
            outline: none !important; /* elimina la linea de seleccion azul o negra */
            box-shadow: none !important; /* elimina las sombras por defecto */
            --webkit-appearance: none !important; /* quita los estilos nativos en Chrome y Safari */
            --moz-appearance: none !important; /* quita los estilos nativos en Firefox */
            font-family: inherit; /* hereda la tipografia Raleway */
            font-size: inherit; /* hereda el tamaño del texto */
            font-weight: 600; /* establece el grosor de la fuente */
            letter-spacing: inherit; /* hereda el espaciado entre letras */
            color: #c59341; /* establece el color dorado corporativo */
            cursor: pointer; /* establece el cursor de seleccion */
            position: relative; /* permite posicionar el subrayado respecto al boton */
            padding: 0 0.2vw; /* establece el espacio interno horizontal */
            margin: 0; /* elimina los margenes externos */
            display: inline-block; /* establece la visualizacion en linea del boton */
        }

        .opcion_servicios_menu_cabecera::after {
            content: ''; /* genera el elemento grafico del subrayado */
            position: absolute; /* posiciona el subrayado respecto al boton */
            left: 50%; /* establece el punto inicial en el centro */
            bottom: -0.7vh; /* establece la posicion debajo del texto */
            width: 0; /* mantiene el subrayado oculto inicialmente */
            height: 1.35pt; /* establece el grosor de la linea */
            background-color: #c59341; /* establece el color dorado */
            transition: width 0.3s ease, left 0.3s ease; /* establece una transicion suave */
            transform: translateX(-50%); /* centra el subrayado respecto al boton */
        }

        .opcion_servicios_menu_cabecera:hover::after {
            width: 100%; /* expande el subrayado hasta ocupar el ancho del boton */
        }

        .separador_servicios_menu_cabecera {
            margin: 0 0.8vw; /* establece la distancia entre el boton y el separador */
            color: #c59341; /* establece el color dorado */
            font-weight: 400; /* establece el grosor de la barra */
            user-select: none; /* impide seleccionar el separador */
        }


    /* SUBTITULO 4 BOTON EXPERIENCIA */

        .opcion_experiencia_menu_cabecera {
            background: transparent !important; /* quita el fondo gris por defecto */
            background-color: transparent !important; /* refuerza la transparencia total */
            border: none !important; /* quita el borde nativo del boton */
            outline: none !important; /* elimina la linea de seleccion azul o negra */
            box-shadow: none !important; /* elimina las sombras por defecto */
            --webkit-appearance: none !important; /* quita los estilos nativos en Chrome y Safari */
            --moz-appearance: none !important; /* quita los estilos nativos en Firefox */
            font-family: inherit; /* hereda la tipografia Raleway */
            font-size: inherit; /* hereda el tamaño del texto */
            font-weight: 600; /* establece el grosor de la fuente */
            letter-spacing: inherit; /* hereda el espaciado entre letras */
            color: #c59341; /* establece el color dorado corporativo */
            cursor: pointer; /* establece el cursor de seleccion */
            position: relative; /* permite posicionar el subrayado respecto al boton */
            padding: 0 0.2vw; /* establece el espacio interno horizontal */
            margin: 0; /* elimina los margenes externos */
            display: inline-block; /* establece la visualizacion en linea del boton */
        }

        .opcion_experiencia_menu_cabecera::after {
            content: ''; /* genera el elemento grafico del subrayado */
            position: absolute; /* posiciona el subrayado respecto al boton */
            left: 50%; /* establece el punto inicial en el centro */
            bottom: -0.7vh; /* establece la posicion debajo del texto */
            width: 0; /* mantiene el subrayado oculto inicialmente */
            height: 1.35pt; /* establece el grosor de la linea */
            background-color: #c59341; /* establece el color dorado */
            transition: width 0.3s ease, left 0.3s ease; /* establece una transicion suave */
            transform: translateX(-50%); /* centra el subrayado respecto al boton */
        }

        .opcion_experiencia_menu_cabecera:hover::after {
            width: 100%; /* expande el subrayado hasta ocupar el ancho del boton */
        }

        .separador_experiencia_menu_cabecera {
            margin: 0 0.8vw; /* establece la distancia entre el boton y el separador */
            color: #c59341; /* establece el color dorado */
            font-weight: 400; /* establece el grosor de la barra */
            user-select: none; /* impide seleccionar el separador */
        }


    /* SUBTITULO 5 BOTON CONTACTO */

        .opcion_contacto_menu_cabecera {
            background: transparent !important; /* quita el fondo gris por defecto */
            background-color: transparent !important; /* refuerza la transparencia total */
            border: none !important; /* quita el borde nativo del boton */
            outline: none !important; /* elimina la linea de seleccion azul o negra */
            box-shadow: none !important; /* elimina las sombras por defecto */
            --webkit-appearance: none !important; /* quita los estilos nativos en Chrome y Safari */
            --moz-appearance: none !important; /* quita los estilos nativos en Firefox */
            font-family: inherit; /* hereda la tipografia Raleway */
            font-size: inherit; /* hereda el tamaño del texto */
            font-weight: 600; /* establece el grosor de la fuente */
            letter-spacing: inherit; /* establece el espaciado entre letras */
            color: #c59341; /* establece el color dorado corporativo */
            cursor: pointer; /* establece el cursor de seleccion */
            position: relative; /* permite posicionar el subrayado respecto al boton */
            padding: 0 0.2vw; /* establece el espacio interno horizontal */
            margin: 0; /* elimina los margenes externos */
            display: inline-block; /* establece la visualizacion en linea del boton */
        }

        .opcion_contacto_menu_cabecera::after {
            content: ''; /* genera el elemento grafico del subrayado */
            position: absolute; /* posiciona el subrayado respecto al boton */
            left: 50%; /* establece el punto inicial en el centro */
            bottom: -0.7vh; /* establece la posicion debajo del texto */
            width: 0; /* mantiene el subrayado oculto inicialmente */
            height: 1.35pt; /* establece el grosor de la linea */
            background-color: #c59341; /* establece el color dorado */
            transition: width 0.3s ease, left 0.3s ease; /* establece una transicion suave */
            transform: translateX(-50%); /* centra el subrayado respecto al boton */
        }

        /* permite expandir el subrayado al pasar el cursor sobre el boton contacto */
        .opcion_contacto_menu_cabecera:hover::after {
            width: 100%; /* expande el subrayado hasta ocupar el ancho del boton */
        }


    /* SUBTITULO 6 BOTON INICIO SESION RESPONSIVE */

        .opcion_inicio_sesion_responsive_menu_cabecera {
            display: none; /* mantiene oculto el boton en escritorio */
            width: 100%; /* permite ocupar el ancho disponible dentro del panel */
            padding: 1vh 1vw; /* establece el espacio interno del boton */
            margin-top: 1vh; /* separa el boton de las opciones anteriores */
            background: linear-gradient(135deg, #cb9847, #b8862e); /* establece el fondo degradado dorado */
            border: none; /* elimina el borde predeterminado */
            border-radius: 0.5rem; /* establece la curvatura de las esquinas */
            color: #ffffff; /* establece el color blanco del texto */
            font-family: inherit; /* hereda la tipografia del menu */
            font-size: inherit; /* hereda el tamaño del texto */
            font-weight: 700; /* establece el grosor del texto */
            letter-spacing: inherit; /* hereda el espaciado entre letras */
            cursor: pointer; /* muestra el cursor de seleccion */
        }

        .opcion_inicio_sesion_responsive_menu_cabecera:hover {
            background: linear-gradient(135deg, #b8862e, #a37324); /* modifica el degradado durante el estado hover */
        }


    /* SUBTITULO 7 BOTON CERRAR MENU LATERAL */

        .boton_cerrar_menu_lateral {
            display: none; /* mantiene oculto el boton en pantallas grandes */
            position: absolute; /* permite ubicar el boton dentro del panel lateral */
            top: 2vh; /* establece la distancia respecto al borde superior */
            right: 1.5rem; /* establece la distancia respecto al borde derecho */
            padding: 0; /* elimina el espacio interno predeterminado */
            background-color: transparent; /* elimina el fondo del boton */
            border: none; /* elimina el borde predeterminado */
            color: #c59341; /* establece el color dorado corporativo */
            font-family: Arial, sans-serif; /* establece una tipografia simple para la equis */
            font-size: 2.3rem; /* establece el tamaño de la equis */
            font-weight: 300; /* establece un grosor ligero */
            line-height: 1; /* mantiene compacta la altura del boton */
            cursor: pointer; /* muestra el cursor de seleccion */
            z-index: 10002; /* mantiene el boton sobre el contenido del panel */
        }


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

        .panel_menu_cabecera {
            width: min(19rem, 85vw); /* adapta el ancho del panel al espacio disponible */
            height: 100vh; /* mantiene una altura compatible con los navegadores */
            height: 100dvh; /* utiliza la altura visible del dispositivo en navegadores compatibles */
            position: fixed; /* mantiene el menu fijo respecto a la pantalla */
            top: 0; /* posiciona el panel desde el borde superior */
            left: 0; /* posiciona el panel desde el borde izquierdo */
            display: flex; /* organiza internamente las opciones */
            flex-direction: column; /* organiza las opciones verticalmente */
            align-items: flex-start; /* posiciona las opciones hacia el lado izquierdo */
            justify-content: flex-start; /* posiciona el contenido desde la parte superior */
            gap: 1rem; /* mantiene una separacion estable entre las opciones */
            padding: 6rem 2rem 2rem 2rem; /* establece espacios internos independientes de la altura de la pantalla */
            box-sizing: border-box; /* incluye el relleno dentro del tamaño total */
            background-color: #ffffff; /* establece el fondo blanco del menu lateral */
            box-shadow: 0.5vw 0 1.5vw rgba(0, 0, 0, 0.15); /* agrega profundidad al panel */
            overflow-y: auto; /* permite desplazarse si las opciones superan la altura disponible */
            transform: translateX(-100%); /* mantiene el panel oculto fuera de la pantalla */
            transition: transform 0.3s ease; /* establece una apertura suave */
            z-index: 10000; /* posiciona el panel sobre el resto del contenido */
        }

        .logo_panel_menu_cabecera {
            display: flex; /* muestra el contenedor del logo dentro del menu lateral */
            width: 100%; /* establece el ancho completo del contenedor */
            min-height: 70px; /* reserva el espacio necesario para mostrar el logo */
            flex-shrink: 0; /* evita que el contenedor del logo se comprima */
            justify-content: center; /* centra horizontalmente el logo */
            align-items: center; /* centra verticalmente el logo */
            margin-bottom: 1rem; /* establece la separacion entre el logo y las opciones del menu */
        }

        .logo_panel_menu_cabecera_img {
            display: block; /* asegura que la imagen se muestre como un bloque */
            width: 10rem; /* establece el ancho del logo */
            max-width: 100%; /* evita que la imagen sobrepase su contenedor */
            height: auto; /* mantiene las proporciones originales del logo */
            object-fit: contain; /* muestra el logo completo sin recortarlo */
        }

        .menu_cabecera {
            position: static; /* permite que el panel lateral se posicione respecto a la ventana */
        }

        .panel_menu_cabecera {
            width: 19rem; /* establece el ancho del menu lateral */
            height: 100vh; /* ocupa toda la altura visible */
            position: fixed; /* mantiene el menu fijo respecto a la pantalla */
            top: 0; /* posiciona el panel desde el borde superior */
            left: 0; /* posiciona el panel desde el borde izquierdo */
            display: flex; /* organiza internamente las opciones */
            flex-direction: column; /* organiza las opciones verticalmente */
            align-items: flex-start; /* posiciona las opciones hacia el lado izquierdo */
            justify-content: flex-start; /* posiciona el contenido desde la parte superior */
            gap: 2vh; /* establece la separacion entre las opciones */
            padding: 18vh 2.5rem 3vh 2.5rem; /* establece el espacio interno del panel */
            box-sizing: border-box; /* incluye el relleno dentro del tamaño total */
            background-color: #ffffff; /* establece el fondo blanco del menu lateral */
            box-shadow: 0.5vw 0 1.5vw rgba(0, 0, 0, 0.15); /* agrega profundidad al panel */
            transform: translateX(-100%); /* mantiene el panel oculto fuera de la pantalla */
            transition: transform 0.3s ease; /* establece una apertura suave */
            z-index: 10000; /* posiciona el panel sobre el carrusel y el resto del contenido */
        }

        .panel_menu_cabecera.menu_abierto {
            transform: translateX(0); /* muestra el panel lateral dentro de la pantalla */
        }


        /* SUBTITULO 1 BOTON INICIO */

            .opcion_inicio_menu_cabecera {
                width: 100%; /* permite ocupar todo el ancho disponible */
                padding: 0.5rem 0; /* establece una separacion vertical estable para la opcion */
                text-align: left; /* alinea el texto hacia el lado izquierdo */
            }

            .separador_inicio_menu_cabecera {
                display: none; /* oculta el separador dentro del menu lateral */
            }


        /* SUBTITULO 2 BOTON SOBRE NOSOTROS */

            .opcion_sobre_nosotros_menu_cabecera {
                width: 100%; /* permite ocupar todo el ancho disponible */
                padding: 0.5rem 0; /* establece una separacion vertical estable para la opcion */
                text-align: left; /* alinea el texto hacia el lado izquierdo */
            }

            .separador_sobre_nosotros_menu_cabecera {
                display: none; /* oculta el separador dentro del menu lateral */
            }


        /* SUBTITULO 3 BOTON SERVICIOS */

            .opcion_servicios_menu_cabecera {
                width: 100%; /* permite ocupar todo el ancho disponible */
                padding: 0.5rem 0; /* establece una separacion vertical estable para la opcion */
                text-align: left; /* alinea el texto hacia el lado izquierdo */
            }

            .separador_servicios_menu_cabecera {
                display: none; /* oculta el separador dentro del menu lateral */
            }


        /* SUBTITULO 4 BOTON EXPERIENCIA */

            .opcion_experiencia_menu_cabecera {
                width: 100%; /* permite ocupar todo el ancho disponible */
                padding: 0.5rem 0; /* establece una separacion vertical estable para la opcion */
                text-align: left; /* alinea el texto hacia el lado izquierdo */
            }

            .separador_experiencia_menu_cabecera {
                display: none; /* oculta el separador dentro del menu lateral */
            }


        /* SUBTITULO 5 BOTON CONTACTO */

            .opcion_contacto_menu_cabecera {
                width: 100%; /* permite ocupar todo el ancho disponible */
                padding: 0.5rem 0; /* establece una separacion vertical estable para la opcion */
                text-align: left; /* alinea el texto hacia el lado izquierdo */
            }


        /* SUBTITULO 6 BOTON INICIO SESION RESPONSIVE */

            .opcion_inicio_sesion_responsive_menu_cabecera {
                display: block; /* muestra el inicio de sesion dentro del menu lateral */
                width: 100%; /* ocupa todo el ancho disponible */
                margin-top: 1rem; /* establece una separacion estable respecto a las opciones anteriores */
            }

        /* SUBTITULO 7 BOTON CERRAR MENU LATERAL */

            .boton_cerrar_menu_lateral {
                display: block; /* muestra el boton cerrar dentro del menu lateral */
            }

    }


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

        .panel_menu_cabecera {
            min-width: 15rem; /* reduce el ancho minimo del panel */
        }

    }


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

        .panel_menu_cabecera {
            min-width: 13rem; /* reduce el ancho minimo para dispositivos moviles */
        }

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

        .panel_menu_cabecera {
            min-width: 12rem; /* reduce el ancho minimo para dispositivos pequeños */
        }

    }


/* TITULO 2 BOTON MENU HAMBURGUESA */

    .boton_menu_hamburguesa {
        display: none; /* mantiene oculto el boton hamburguesa en pantallas grandes */
        flex-direction: column; /* organiza verticalmente las lineas del boton */
        justify-content: center; /* centra verticalmente las lineas */
        align-items: center; /* centra horizontalmente las lineas */
        gap: 0.4rem; /* establece la separacion entre las lineas */
        padding: 0.7rem; /* establece el espacio interno del boton */
        background-color: transparent; /* elimina el fondo predeterminado del boton */
        border: none; /* elimina el borde predeterminado */
        cursor: pointer; /* muestra el cursor de seleccion */
    }

    .linea_menu_hamburguesa {
        width: 1.8rem; /* establece el ancho de cada linea */
        height: 0.15rem; /* establece el grosor de cada linea */
        background-color: #c59341; /* establece el color dorado corporativo */
    }

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

        .boton_menu_hamburguesa {
            display: flex; /* muestra el boton hamburguesa desde tablets hacia abajo */
        }

    }

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