/* Instlamos la fuente "Host Grotesk" */
@import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:ital,wght@0,300..800;1,300..800&display=swap');
body {
        font-family: "Host Grotesk", sans-serif;
    }

.iu-navbar { position: sticky; z-index: 10; background: #fff; padding: .8rem 1.5rem; box-shadow: #facc1580 0 3px, #facc1566 0 6px, #facc154d 0px 9px; }
.iu-navbar-inner { display:flex; justify-content:space-between; align-items:center; max-width:1280px; margin:auto; position:relative; }

/* Logo */
.iu-logo img { height:50px; }

/* Links centrados */
.iu-nav-container { flex:1; display:flex; justify-content:center; position:relative; }
.iu-nav-links { list-style:none; display:flex; gap:1.2rem; align-items:center; position:relative; padding:0; margin:0; }
.iu-nav-links li { position:relative; }
.iu-nav-links a { text-decoration:none; color:#000; font-size:1rem; padding:.3rem .5rem; transition: color .2s ease; }

/* Efecto hover con barrita (namespaced) */
.iu-nav-links a::after {
  content:"";
  position:absolute; left:0; bottom:-4px; width:100%; height:2px; background:#000;
  transform:scaleX(0); transform-origin:right; transition:transform .25s ease;
}
.iu-nav-links a:hover, .iu-nav-links a:focus-visible { color:#facc15; }
.iu-nav-links a:hover::after, .iu-nav-links a:focus-visible::after { transform:scaleX(1); transform-origin:left; }

/* Dropdown "Más" */
.iu-dropdown { position:relative; }
.iu-dropdown-menu {
  display:none; position:absolute; top:100%; background:rgba(250,204,21,.5); border-radius:5px; min-width:150px; padding:.5rem 0; z-index:10;
}
.iu-dropdown-menu li { display:block; }
.iu-dropdown-menu a { display:block; padding:.5rem 1rem; }
.iu-dropdown.open .iu-dropdown-menu { display:block; }

/* Responsive pequeño (ajusta breakpoint si quieres) */
@media (max-width: 380px) {
  .iu-nav-links { 
  display: flex;
      flex-direction: column;
      /* background: #facc1580; */
      position: relative;
      top: 0px;
      right: 0px;
      width: 200px;
      border-radius: 8px;
      padding: 1rem;
    }
    
  /* Si quieres que pase a columna: descomentar y ajustar */
  /* .iu-nav-links { flex-direction:column; width:200px; } */
}