.topheader {
    background-color: var(--text-color-inverse);
    /*agrega sombra al elemento navbar, box-shadow: sombra eje X,  sombra eje Y, difuminado, color;*/
    box-shadow: 0 4px 5px var(--navbar-shallow-color);
    /*fijo para que este siempre arriba visible*/
    position: fixed;
    /*con esto me aseguro que no haga movimientos raros al fijar*/
    left: 0;
    top: 0;
    width: 100%;
}

.topnav {
    /* alinea horizontalmente elementos */
    display: flex;
    /*justifica espacios entre elementos -beetween-*/
    justify-content: space-between;
    padding: 10px;
    /*aqui estoy definiendo el ancho maximo de la barra de navegacion*/
    max-width: 1100px;
    /*centramos*/
    margin: 0 auto;
}

.topnav img {
    padding: 0px 15px 0 0;
}

/*Logo*/

.link-logo {
    display:flex;
    align-items: center;
    font-size: 30px;
    font-weight: 400;
    color: var(--text-color);
}

.menu ul{
    display:flex;
    /*quita los puntos a los elemeontos <li>*/
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu li {
    padding: 0 15px;
}

.menu a {
    color: var(--text-color);
    font-size: 15px;
    font-weight: 500;
    line-height: 50px;
    text-transform: uppercase;
    /*este position esta relacionado con el ::pseudo elemento*/
    position: relative;
}

/*agregamos una linea por debajo del menu, esto es un ::pseudo elemento*/
.menu a::after {
    /*sin content no se visualiza nada, comenzar con letras para trabajarlo*/
    content: "";
    background-color: var(--underline-menu-color);
    position: absolute;
    left: 0;
    /*con esto ubicamos la linea con mayor precision*/
    top: calc(100% + 4px);
    width: 100%;
    height: 2px;
    /*la opacidad en cero (0), porque se hace visible con la clase de abajo .menu a.selected::after*/
    opacity: 0;
    transition: 0.2s;
}

/*la clase .menu a::after de arriba se aplica si esta selected, con la siguiente clase*/
.menu a.selected::after,
.menu a:hover::after {
    opacity: 0.8;
}

/*le hacemos un :hover (onmouse) a las letras*/
.menu a:hover {
    color: var(--underline-menu-color);
}

.open-menu,
.close-menu {
    display: none;
}

.contacto-encabezado {
    text-align: center;
    font-size: 15px;
    margin: 10px auto;
    max-width:350px;
    line-height: 25px;
}

.contacto-encabezado a{
    color: var(--primary-color);
}

.contacto-encabezado a:hover {
    color: var(--underline-menu-color);
}

.telefonos img {
    vertical-align: middle;
}


/***************************************/
/*              RESPONSIVE             */
/***************************************/
/*-------------MEDIA Query-------------*/
/*-------------------------------------*/

@media (max-width: 767px) {

/*Menu*/
.topheader {
    max-height: 120px;
}

.topnav {
    max-height: 120px;
    margin: 0;
    padding: 0;
}

.link-logo img {
    max-height: 110px;
    padding: 0px 25px 0 25px;
}

.link-logo {
    font-size: 17px;
    max-height: 120px;
}

.contacto-encabezado {
    max-height: 150px;
}

.menu ul{
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    align-items: center;
    background-color: var(--text-color-inverse);
    height: 100%;
    /*la siguiente propiedad dice que en el caso de no entrar en el navegador o dispositivo agregar scroll (o deslizamiento)*/
    overflow: auto;
    /*podemos manejar la transparencia de las cosas*/
    opacity: 0;
    /*como estamos ocultando el elemento solo con opacidad, le decimos que no muestre ningun evento al pasar el puntero arriba de los links del menu y que tampoco se pueda hacer click, esta evento/accion anulada sera definida en javascrip*/
    pointer-events: none;
    /*transicion suave entre cierre y apertura de menu*/
    transition: opacity 0.3s;
}

.menu li {
    padding: 0;
}

.menu a {
    color: var(--text-color);
    line-height: 60px;
}

.open-menu,
.close-menu {
    display: block;
    /*sacamos los estilos por defecto a los botones*/
    border: none;
    background: none;
    /*cambia el estilo-icono de cursor-puntero*/
    cursor: pointer;
}

.open-menu {
    position: fixed;
    border-radius: 50px;
    background-color: rgb(255, 208, 0);
    max-width: 45px;
    max-height: 45px;
    right: 15px;
    top: 17px;
    transition: 0.5s;
}

.open-menu-hide {
    opacity: 0;
}

.open-menu-img {
    filter: invert(85%);
    width: 40px;
    height: 43px;
}

.close-menu {
    /*como alineamos en block, separamos este elemento, alineandolo al final (izq)*/
    align-self: flex-end;
    padding: 10px 0 0 0 ;
}

/*clase que se aplica si es que el menu esta abierto o cerrado, acompañado de una declaracion javascrip*/
.menu-opened ul{
    color: var(--underline-menu-color);
    opacity: 1;
    pointer-events: all;
}

/*con esto le digo que no me aparezca un recuadro al hacer click en los elementos*/
.open-menu:focus:not(:focus-visible),
.close-menu:focus:not(:focus-visible) {
    outline: none;
}

/*::pseudo elementos menu mobile*/

.menu a::after {
    content: none;
}

.menu a.selected {
    color: var(--text-color);
}

.contacto-encabezado{
    opacity: 0;
}



}