/* --- Ocultamos los elementos responsivos --- */
.toggle, [id^=drop] {display: none;}
/* ------------------------------------------- */
/* ----- Dando un ancho al contenedor nav -----*/
nav{
    width: 80%;
    margin: 0;
    padding: 0;
}
/* ------------------------------------------- */
/* Después de poner un "float:left" a "ul li" (añadimos un clear despues del contenedor) */
nav:after {
    content: "";
    display: table;
    clear: both;
}
/* ------------------------------------------- */
/* Quitamos padding, margin and "list-style" de los "ul", y agregamos "position:relative" */
nav ul {
    float: right; /* Coloca a la darecha la lista principal del menu */
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative; /* Lo alínea con el logo */
}
/* ------------------------------------------- */
/* Posicionando los items de navegación inline */
nav ul li {
    margin: 0px;
    display: inline-block;
    float: left;
    background: none;
}
/* ------------------------------------------- */
/* --------- Estilizando los enlaces --------- */
nav a {
  display: block;
  padding: 12px 10px;
  color: var(--negro);
  font-size:16px;
  text-decoration:none;
  line-height: 16px;
}
nav>ul>li>ul>li a{ /* Aplicamos estilo a los enlaces de segundo nivel */
  color: #ccc;
  background: #1B1B1B;
}
nav>ul>li>a:hover{ /* Aplicamos estilo a los enlaces de primer nivel en "hover" */
  color: var(--rojo);
  background: #fff;
}
nav ul li ul li:hover { /* Aplicamos estilo a los enlaces de segundo nivel en "hover" */
  color: #fff;
}
/* ------------------------------------------- */
/* -- Fondo y color del hover de los links --- */
nav a:hover {
  color: var(--rojo);
  background: var(--gris); /* Revisar esta línea*/
}
/* ------------------------------------------- */
/* Ocultamos los Dropdowns por Default y les damos su posición absoluta */
nav ul ul {
    display: none;
    position: absolute;
    top: 40px;/*Es el alto de los submenus*/
}
/* ------------------------------------------- */
/* ----- Muestra los Dropdowns en Hover ------ */
nav ul li:hover > ul{
    display:inherit;
}
/* Primer nivel del Dropdown */
nav ul ul li{
    width: auto;
    float:none;
    display:list-item;
    position: relative;
}

/* Media Queries
--------------------------------------------- */
@media all and (max-width: 768px) {
    /* Hide the navigation menu by default */
    /* Also hide the  */
    .toggle + a, .menu{
        display: none;
    }
    nav{
        width: 100%;
    }
    /* Stylinf the toggle label */
    .toggle, nav ul li a{
        width: 100%;
        display: block;
        background: var(--negro);
        padding: 15px 20px;
        margin: 0;
        color: #FFF;
        font-size:17px;
        text-decoration:none;
        border:none;
    }

    .toggle_P{
      width: auto;
      /* padding: 5px; */
      margin-top: -10px;
      margin-left: 80%;
      font-size: 25px;
      background: none;
      color: var(--rojo);
    }
    nav>label, .menu{
        position: relative;
        top: -10px;
    }
    .toggle:hover, nav ul li a:hover{
        background: var(--gris);
        color: var(--rojo);
        cursor: pointer;
    }
    /* Display Dropdown when clicked on Parent Lable */
    [id^=drop]:checked + ul{
        display: block;
    }
    /* Change menu item's width to 100% */
    nav ul li{
        display: block;
        width: 100%;
    }
    nav ul li a{
        line-height: 10px;
        margin: 0;
        padding: 26px 20px;
    }
    nav ul ul li a{
        line-height: 10px;
        margin: 0;
        padding: 26px 40px;
    }
    nav a:hover{
        background: #8bcce8;
    }
    nav ul ul a{
        padding: 14px 20px;
        color: #FFF;
        font-size: 17px;
    }
    nav ul li ul li .toggle, nav ul ul a{
        background: #000;
        line-height: 25px;
    }
    /* Hide Dropdowns by Default */
    nav ul ul{
        float: none;
        position:static;
        color: #fff;
        line-height: 16px;
        /* has to be the same number as the "line-height" of "nav a" */
    }
    /* Hide menus on hover */
    nav ul ul li:hover > ul, nav ul li:hover > ul{
        display: none;
    }
    /* Fisrt Tier Dropdown */
    nav ul ul li{
        display: block;
        width: 100%;
    }
    nav ul ul ul li{
        position: static;
        /* has to be the same number as the "width" of "nav ul ul li" */
    }
}

/* Móviles en vertical
------------------------------------------------------------------------ */
@media all and (max-width: 480px){
    /* Hide the navigation menu by default */
    /* Also hide the  */
    .toggle + a, .menu{
        display: none;
    }

    /* Stylinf the toggle label */
    .toggle, nav ul li a{
        padding: 5px 20px;
        width: 100%;
    }
    .toggle_P{
      width: auto;
      /* padding: 5px; */
      margin-top: 0;
      margin-left: 80%;
      font-size: 25px;
      background: none;
      color: var(--rojo);
    }
    nav>label, .menu{
        position: relative;
        top: -50px;
    }
    nav ul li a{
        line-height: 6px;
        padding: 20px 20px;
    }
    nav ul ul li a{
        padding: 16px 40px;
    }

}