.search-container {
    position: relative;
  }
  
  #search-input {
    position: absolute;
    right: 14vw;
    width: 0;
    height: 2.5rem;
    padding: 0;
    opacity: 0;
    border: 2px solid #0c01fc;
    border-radius: 25px;
    outline: none;
    font-size: 1rem;
    transition: width 0.3s ease-in-out, opacity 0.3s ease-in-out, padding 0.3s;
  }
  
  #search-input.active {
    width: 200px;
    opacity: 1;
    padding: 1.5rem;
    color: #0c01fc;
  }
  
  #page{
    position: fixed;
    z-index: 25;
    right: 3vw;
    color: rgb(255, 255, 255);
    height: 0vh;
  }
  
  ul {
    list-style: none;
  }
  a {
    text-decoration: none;
    vertical-align: middle;
    color: inherit;
  }
  .site {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
  }
  
  .container{
    width: 100%;
    padding: 0 2em;
  }
  .navHud{
    position: relative;
    display: flex;
    justify-content: flex-end;
    max-width: 480px;
    width: 100%;
    height: 0vh;
  }
  
  .container-select-dip{
    height: 68vh;
    overflow-y: scroll;
  
  }
  
  .scrolling{
    scrollbar-width: auto;
    -ms-overflow-style: auto;
  
  }
  
  nav .link{
    width: 4vw;
    height: 9vh;
   display: flex;
   align-items: center;
   justify-content: center;
   position: absolute;
   top: 43vh;
   margin-top: -20px;
   right: -6vw;
   cursor: pointer;
   z-index: 99;
  }
  
  nav .link::before{
    content:'';
    position: absolute;
    width: inherit;
    height: inherit;
    background-image: linear-gradient(to left, #0c01fc 25%, #0c01fc);
    border-radius: 50% 0 0 50%;
    transform:  scale(3);
    z-index: -2;
    animation: latido 2s infinite; /* Aplica la animación */
  }
  
  @keyframes latido {
    0% {
      transform: scale(1); /* Tamaño normal */
    }
    50% {
      transform: scale(1.4); /* Aumenta el tamaño al 150% */
    }
    100% {
      transform: scale(1); /* Vuelve al tamaño original */
    }
  }
  
  nav .link::after{
    content:'';
    position: absolute;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    background-color: black;
    border-radius: 50% 0 0 50%;
    transform:  scale(3);
    z-index: -1;
    opacity: 0.5;
    transition: opacity 0.3s;
    animation: latido 2s infinite; 
  }
  nav .link:hover::after{
    opacity: 0.9;
  }
  nav .link .close,
  nav input:checked ~ label .menu{
    display: none;
  }
  
  nav input:checked ~ label .close{
    display: block;
  }
  
  nav ul.submenu{
    position: absolute;
    top: 5vh;
    right: 4em;
    width: 350px;
    height: 500px;
    transform:rotate(90deg) ;
    visibility: hidden;
    transition: visibility 0.1s;
  }
  nav > input:checked ~ ul li{
    transform: rotate(calc((-180deg/8) * var(--item))) translateX(0);
    opacity: 1;
  }
  nav >input:checked ~ ul{
    visibility: inherit;
  }
  
  nav ul.submenu li{
    --item: 1;
    position: absolute;
    width: 26vh;
    height: 5vh;
    transform: rotate(calc((-180deg/8) * var(--item))) translateX(157px);
    transform-origin: right center;
    display: flex;
    align-items: center;
    opacity:0 ;
    transition: transform 0.7s, opacity 0.2s;
  }
  nav ul li:nth-child(2){
    --item: 2;
  }
  nav ul li:nth-child(3){
    --item: 3;
  }
  nav ul li:nth-child(4){
    --item: 4;
  }
  nav ul li:nth-child(5){
    --item: 5;
  }
  nav ul li:nth-child(6){
    --item: 6;
  }
  nav ul li:nth-child(7){
    --item: 7;
  }
  nav ul li a{
    position: relative;
    display: flex;
    align-items: center;
    color: white;
  }
  
  nav ul li a i{
    font-size: 20px;
    width: 7vh;
    height: 7vh;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0c01fc;
    color: white;
    border: 2px solid transparent;
    transition: border .3s, background-color .3s;
  }
  nav ul li a:hover i{
    background-color: transparent ;
    border-color: black;
  }
  
  nav ul li a span{
    position: absolute;
    right: calc(100% + 1em);
    text-align: right;
    font-size: 3vh;
    padding: 5px 10px;
    border-radius: 25px;
    background-image: linear-gradient(to right, transparent 25%, black);
    z-index: -1;
    transition: color .3s;
    transform: translateX(50px);
    opacity:0px ;
    transition: color .3s, transform .3s .4s, opacity .2s .4s;
  }
  nav > input:checked ~ ul li a span{
    transform: translateX(0);
    opacity: 1;
  }
  
  nav ul li a span::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    border-radius: 25px;
    background-image: linear-gradient(to left, rgba(180, 48, 48, 0) 25%, #0c01fc 100%);
    z-index: -1;
    transition: background-color 0.3s, background-image 0.3s;
  }
  
  nav ul li a:hover span::before {
    background-image: none;  /* Eliminamos el gradiente */
    background-color: #0c01fc; /* Aplicamos el color sólido */
  }
  
  
  nav ul li a:hover span{
    color:white;
  }
  
  nav ul li:nth-child(1) a i{
    transform: rotate (292deg);
  }
  
  nav ul li:nth-child(2) a i{
    transform: rotate (315deg);
  }
  
  nav ul li:nth-child(3) a i{
    transform: rotate (337deg);
  }
  
  nav ul li:nth-child(5) a i{
    transform: rotate (22deg);
  }
  
  nav ul li:nth-child(6) a i{
    transform: rotate (45deg);
  }
  
  nav ul li:nth-child(7) a i{
    transform: rotate (67deg);
  }
  .container-search-input{
    top: -1vh;
    position: absolute;
    left: 13vw;
  
  }
  
  .map-glow {
    box-shadow: 0 0 30px 10px white;
  }