:root {
      --ancho-enlace: 7rem;
      --alto-enlace: 3.5rem;
      --alto-item: -4rem;
      --padding-menu-item: 0.5rem;

      --color-menu-gradiente-1:rgba(201, 158, 221, 0.9);
      --color-menu-gradiente-2:rgba(221, 193, 219, 0.9);
      --color-menu-gradiente-3:rgba(218, 187, 226, 0.9);
      --color-menu-gradiente-4:rgba(225, 184, 235, 0.9);
      --color-menu-gradiente-5:rgba(213, 166, 224, 0.9);
      
      --fondo-menu:linear-gradient(0deg, var(--color-menu-gradiente-1), var(--color-menu-gradiente-2) 15%, var(--color-menu-gradiente-2) 85%, var(--color-menu-gradiente-1));
      --fondo-menu-item:linear-gradient(0deg, var(--color-menu-gradiente-1), var(--color-menu-gradiente-2) 5%, var(--color-menu-gradiente-3) 95%, var(--color-menu-gradiente-1));
      --fondo-menu-item-hover: rgba(109, 34, 116, 0.9);
      --fondo-menu-item-secundario:linear-gradient(0deg, var(--color-menu-gradiente-1), var(--color-menu-gradiente-5) 15%, var(--color-menu-gradiente-4) 85%, var(--color-menu-gradiente-1));
      --fondo-menu-item-secundario-hover: rgba(109, 34, 116, 0.9);

    }

@media only screen and (max-width: 400px) {
    :root {
      --nav-ancho-buscador: 100%;
    }
  }
  
  @media only screen and (min-width: 401px) and (max-width: 700px) {
    :root {
      --nav-ancho-buscador: 100%;
    }
  }
  
  @media only screen and (min-width: 701px) and (max-width: 1200px) {
    :root {
      --nav-ancho-buscador: 30%;
    }
  }
  
  @media only screen and (min-width: 1201px) {
    :root {
      --nav-ancho-buscador: 31%;
    }
  }
  
  .seccion_navegador {
    width: 100%;
    padding: var(--nav-padding);
    margin: 0.3rem 0px 0px 0px;
    display: flex;
    flex-wrap:wrap;
    align-items: center;
    justify-content: center;
    background: var(--fondo-menu);
  }
  
  .menu_fila {
    background: rgba(148, 56, 140, 0.356);
    color: #ebb4df;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap:nowrap;
    flex-direction: column;
  }
  .menu_fila>ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .menu_item{
    min-height: var(--alto-enlace);
    max-height: var(--alto-enlace);
    min-width: var(--ancho-enlace);
    max-width: var(--ancho-enlace);
    background: var(--fondo-menu-item);
    position: absolute;
    float: left;
    list-style: none;
    margin: 0;
    padding: var(--padding-menu-item);
    border-left: 1px solid #333;
    border-right: 1px solid #333;
    z-index: 1;
  }
  .menu_item:nth-child(1){
    display: block !important;
    position: static !important;
  }
  .menu_item:hover {
    background: var(--fondo-menu-item-hover);
  }
  .menu_item_secundario:hover{
    background: var(--fondo-menu-item-secundario-hover);
  }
  .menu_item_secundario>a,
  .menu_item>a{
    min-height: var(--alto-enlace);
    max-height: var(--alto-enlace);
    min-width: var(--ancho-enlace);
    max-width: var(--ancho-enlace);
    color: rgb(31, 3, 36);
    font: normal 1.1rem Helvetica, sans-serif;
    padding: 0.1rem;
    margin: 0;
    display: flex;
    text-align:center;
    align-items:center;
    justify-content: center;
    align-items: center;
    text-decoration: none;
  }
  .menu_item_secundario>a:hover,
  .menu_item>a:hover{
    color: rgba(238, 205, 235, 0.9);
    font-size: 1.12rem;
  }
  .menu_item_secundario{
    visibility: visible !important;
    position: relative !important;
    min-height: var(--alto-enlace);
    max-height: var(--alto-enlace);
    min-width: var(--ancho-enlace);
    max-width: var(--ancho-enlace);
    background: var(--fondo-menu-item-secundario);
    color: rgb(31, 3, 36);
    float: left;
    margin: 0;
    padding: var(--padding-menu-item);
    border-left: 1px solid #333;
    border-right: 1px solid #333;
    display: flex;
    text-align:center;
    align-items:center;
    justify-content: center;
    align-items: center;
    text-decoration: none;
  }