/* 
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('/rmc_web_nueva/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 */

    /* contiene las opciones principales de navegacion de la 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 */
    }


    /* SUBTITULO 1 BOTON INICIO */

        /* establece los estilos del boton de 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 */
        }

        /* establece el subrayado interactivo del boton de inicio */
        .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 */
        }

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

        /* establece la apariencia del separador ubicado despues del boton inicio */
        .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 */

        /* establece los estilos del 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 */
        }

        /* establece el subrayado interactivo del boton sobre nosotros */
        .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 */
        }

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

        /* establece la apariencia del separador ubicado despues del boton sobre nosotros */
        .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 */

        /* establece los estilos del 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 */
        }

        /* establece el subrayado interactivo del boton servicios */
        .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 */
        }

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

        /* establece la apariencia del separador ubicado despues del boton servicios */
        .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 */

        /* establece los estilos del 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 */
        }

        /* establece el subrayado interactivo del boton experiencia */
        .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 */
        }

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

        /* establece la apariencia del separador ubicado despues del boton experiencia */
        .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 */

        /* establece los estilos del 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 */
        }

        /* establece el subrayado interactivo del boton contacto */
        .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 */
        }

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