@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

#ifm-header{ 
  position:fixed;       /* 👈 cambio: antes relative */
  top:0; left:0; right:0;
  z-index:1000; 
  font-family:'Outfit',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; 
}
#ifm-header *{ box-sizing:border-box; }

/* Paleta y glass */
#ifm-header{ 
  --deep:#0a1220; --text:#eef6ff; --muted:#cdd9e8; 
  --aqua:#06b6d4; --gold:#d4af37; 
}

/* Barra */
#ifm-header .navbar{
  position:fixed;   /* 👈 cambio: antes sticky */
  top:0; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 22px;
  backdrop-filter:saturate(130%) blur(6px);
  background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,0));
}

/* Marca */
#ifm-header .brand{
  font-family:'Playfair Display',serif; font-weight:700; text-decoration:none; 
  font-size:1.15rem; letter-spacing:.4px;
  background:linear-gradient(120deg,var(--aqua),var(--gold));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  display:inline-flex; align-items:center; gap:10px;
  color:#d4af37;
}

/* Logo GIF */
#ifm-header .brand-logo{
  height:28px;
  width:auto;
  display:block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

/* Texto dorado animado */
#ifm-header .brand-text{
  font-family:'Playfair Display',serif;
  font-weight:800;
  letter-spacing:.04em;
  background:linear-gradient(180deg,
    #f4d79b 0%,
    #e0b96c 35%,
    #c8994d 58%,
    #a9752c 78%,
    #f2ce79 100%
  );
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 2px 10px rgba(0,0,0,.25);
  line-height:1;
  font-size:1.15rem;
  background-size:200% 200%;
  animation:goldShift 8s ease-in-out infinite;
}
@keyframes goldShift {
  0%,100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* === Menú principal === */
#ifm-header .menu{
  list-style:none; display:flex; align-items:center; gap:26px; margin:0; padding:0;
}

/* Enlaces principales: estilo Inter tipo kicker */
#ifm-header .menu > li > a{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  text-transform:uppercase;
  letter-spacing:.28em;
  font-weight:400;
  font-size:.82rem;
  line-height:1;
  color:#eaf2f9;
  text-decoration:none;
  opacity:.92;
  transition:.25s;
  display:inline-block;
  padding:.35rem .4rem;
  border-radius:8px;
}
#ifm-header .menu > li > a:hover{ 
  opacity:1; 
  background:rgba(255,255,255,.07); 
}

/* Dropdowns */
#ifm-header .has-dd{ position:relative; }
#ifm-header .has-dd > .dd{
  position:absolute; top:100%; left:0; min-width:220px; padding:8px;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.18); border-radius:12px;
  backdrop-filter:blur(10px) saturate(120%);
  display:none; z-index:1000;
  box-shadow:0 18px 36px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06);
}
#ifm-header .has-dd:hover > .dd{ display:block; }

/* 🔹 Submenú sin puntos y con misma tipografía */
#ifm-header .dd ul{ 
  list-style:none; 
  margin:0; 
  padding:0; 
}
#ifm-header .dd li::marker, 
#ifm-header .dd li::before { 
  content:none !important; 
}

#ifm-header .dd a{
  display:block;
  padding:.55rem .9rem;
  white-space:nowrap;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  text-transform:uppercase;
  letter-spacing:.22em;
  font-weight:400;
  font-size:.75rem;
  color:#eaf2f9;
  text-decoration:none;
  opacity:.92;
  transition:.2s;
  border-radius:8px;
}
#ifm-header .dd a:hover{ 
  opacity:1; 
  background:rgba(255,255,255,.08);
}

/* Submenú lateral */
#ifm-header .dd .has-sub{ position:relative; }
#ifm-header .dd .has-sub > .sub{
  position:absolute; top:0; left:100%; margin-left:12px; min-width:210px; padding:8px;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.18); border-radius:12px;
  backdrop-filter:blur(10px) saturate(120%);
  display:none; z-index:1001; opacity:0; transform:translateX(6px);
  transition:opacity .18s ease, transform .18s ease;
}
#ifm-header .dd .has-sub:hover > .sub{ display:block; opacity:1; transform:translateX(0); }
#ifm-header .dd .has-sub > a::after{ content:'▸'; float:right; opacity:.7; margin-left:6px; font-size:.8rem; }

/* EcoFish logo */
#ifm-header .eco{ margin-left:10px; }
#ifm-header .ecofish-link img{
  height:30px; width:auto; display:block; 
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.35)); 
  transition:filter .2s, transform .2s; 
  transform:translateY(1px);
}
#ifm-header .ecofish-link:hover img{
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.45)) brightness(1.06);
  transform:translateY(0);
}

/* Botón idioma y burger */
#ifm-header .lang-toggle{
  padding:.45rem .9rem; border-radius:20px; 
  border:1px solid rgba(255,255,255,.22); 
  background:rgba(0,0,0,.35); color:var(--text); 
  cursor:pointer; font-size:.9rem;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  text-transform:uppercase;
  letter-spacing:.15em;
}
#ifm-header .burger{
  width:42px; height:42px; display:none; 
  align-items:center; justify-content:center; gap:4px; 
  border-radius:10px; background:rgba(0,0,0,.35); 
  border:1px solid rgba(255,255,255,.22); color:var(--text); cursor:pointer;
}
#ifm-header .burger span{ display:block; width:18px; height:2px; background:#fff; }

/* === Responsive === */
@media (max-width: 900px){
  #ifm-header .burger{ display:inline-flex; }

  #ifm-header .menu{
    position:fixed; top:62px; left:10px; right:10px; 
    display:none; flex-direction:column; align-items:stretch; 
    gap:8px; padding:10px; border-radius:14px; 
    background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.18);
    backdrop-filter:blur(10px) saturate(120%);
  }
  #ifm-header.open .menu{ display:flex; }

  #ifm-header .has-dd > .dd{
    position:static; display:none; margin-top:4px; box-shadow:none;
  }
  #ifm-header .has-dd > a[aria-expanded="true"] + .dd{ display:block; }

  #ifm-header .dd .has-sub > .sub{
    position:static; margin-left:0; transform:none; opacity:1; display:none;
  }
  #ifm-header .dd .has-sub > a[aria-expanded="true"] + .sub{ display:block; }
}

/* Hover sutil del logo */
#ifm-header .brand:hover .brand-text{ filter:brightness(1.05); }

/* Responsive: logo más pequeño */
@media (max-width: 480px){
  #ifm-header .brand-logo{ height:24px; }
}

/* === FIX FINAL para submenús anidados === */
#ifm-header .dd .has-sub {
  position: relative;
}

/* Submenú lateral correctamente alineado */
#ifm-header .dd .has-sub > .sub {
  position: absolute;
  top: 0;
  left: calc(100% - 1px); /* se solapan 1px para evitar separación visible */
  min-width: 210px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  backdrop-filter: blur(10px) saturate(120%);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.35),
              inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  display: none;
  opacity: 0;
  z-index: 9999; /* más alto que el panel padre */
  transform: translateX(0);
  transition: opacity 0.2s ease-in-out;
}

/* Mantener visible cuando se pasa por encima */
#ifm-header .dd .has-sub:hover > .sub,
#ifm-header .dd .has-sub:focus-within > .sub {
  display: block;
  opacity: 1;
}

/* Área invisible entre paneles (corredor de hover) */
#ifm-header .dd .has-sub::after {
  content: "";
  position: absolute;
  top: 0;
  right: -10px;
  width: 12px;
  height: 100%;
  background: transparent;
}

/* Estética de los enlaces internos */
#ifm-header .dd .has-sub > .sub a {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 400;
  font-size: 0.75rem;
  color: #eaf2f9;
  text-decoration: none;
  opacity: 0.92;
  transition: 0.2s;
  border-radius: 8px;
  display: block;
  padding: 0.55rem 0.9rem;
}

#ifm-header .dd .has-sub > .sub a:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.08);
}

/* Evita solapamiento con el dropdown superior */
#ifm-header .has-dd > .dd {
  z-index: 9998;
}

/* Modo móvil (mantiene comportamiento por toggle) */
@media (max-width: 900px) {
  #ifm-header .dd .has-sub > .sub {
    position: static;
    margin-left: 0;
    transform: none;
    opacity: 1;
    display: none;
  }
  #ifm-header .dd .has-sub > a[aria-expanded="true"] + .sub {
    display: block;
  }
}