/* =========================
   BASE / RESET LOCAL
   ========================= */
#navbar{ z-index: 9999; } /* por encima del contenido */

/* =========================
   LINKS — Shimmer elegante
   CAMBIO: asegurar visibilidad en extendido y compacto
   ========================= */
#desktopNav .nav-link,
#mobileMenu .nav-link{
  position: relative;
  display: inline-block;          /* CAMBIO: espacio para subrayado */
  color: #fff;
  font-weight: 500;
  line-height: 1.5rem;
  transition: color .2s ease;
  padding-bottom: 6px;            /* CAMBIO: deja espacio al ::after */
  text-decoration: none;
}

#desktopNav .nav-link:hover,
#mobileMenu .nav-link:hover{
  color:#d1d5db;
}

#desktopNav .nav-link::after,
#mobileMenu .nav-link::after{
  content:"";
  position:absolute; left:0; bottom:0;  /* CAMBIO: visible en extendido */
  width:100%; height:2px;
  background: linear-gradient(90deg,
              rgba(255,255,255,0),
              rgba(255,255,255,1),
              rgba(255,255,255,0));
  transform: translateX(-100%);
  opacity:0;
  transition: opacity .25s ease, transform .35s ease;
  will-change: transform, opacity;
  filter: drop-shadow(0 0 4px rgba(0,0,0,.35)); /* CAMBIO: contraste */
}

#desktopNav .nav-link:hover::after,
#desktopNav .nav-link.is-active::after,
#mobileMenu .nav-link:hover::after,
#mobileMenu .nav-link.is-active::after{
  opacity:1;
  transform: translateX(0);
}

/* En modo compacto, baja un poco la línea (más dramático) */
#navbar.nav-compact #desktopNav .nav-link::after{
  bottom:-6px;
  filter:none; /* el fondo ya es más oscuro */
}

/* =========================
   PÍLDORA — Glass & base
   (sin cambios funcionales)
   ========================= */
#navPill{
  position: relative; /* ancla menú móvil absoluto */
  background: rgba(0,0,0,0.35);          /* CAMBIO: antes 0.12 -> más legible */
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1.5px solid rgba(255,255,255,0.25);
  box-shadow: 0 8px 32px rgba(0,0,0,.45);
  transition: all .35s ease;
  max-width: 100%;
}

/* =========================
   ESTADO COMPACTO (scroll)
   ========================= */
#navbar.nav-compact #navPill{
  border-color: rgba(255,255,255,0.22);
  background-color: rgba(10,10,10,.65);  /* CAMBIO: antes .55 -> más contraste */
  box-shadow: 0 8px 32px rgba(0,0,0,.55); /* CAMBIO: sombra un poco más fuerte */
  /* opcional compresión sutil:
  max-width: 90%;
  margin-left:auto; margin-right:auto;
  */
}

/* reduce padding/escala logo en compacto (respetando utilidades Tailwind) */
#navbar.nav-compact #navPill .px-5.py-3.md\:py-4{
  padding-top: .5rem;
  padding-bottom: .5rem;
}
#navbar.nav-compact #navPill .w-14.h-14{ width:44px; height:44px; }
#navbar.nav-compact #navPill img{ width:36px; height:36px; }

/* =========================
   MENÚ MÓVIL — colapsable
   CAMBIO: z-index -1 cerrado, alto 0; z-index alto solo abierto
   ========================= */
#mobileMenu{
  position: absolute;               /* anclado al pill */
  top: calc(100% + 8px);            /* CAMBIO: antes 100% - 10px -> baja para que no se asome */
  left: 1rem;
  right: 1rem;
  overflow: hidden;
  max-height: 0;                    /* cerrado */
  opacity: 0;                       /* CAMBIO: oculto visual */
  pointer-events: none;             /* CAMBIO: no clics cerrado */
  transform: translateY(-6px) scaleY(.98); /* CAMBIO: anima entrada */
  transform-origin: top;            /* CAMBIO */
  transition: max-height .3s ease, opacity .2s ease, transform .2s ease; /* CAMBIO */
  z-index: -1;                      /* CAMBIO: no superpone cuando está cerrado */
}

#mobileMenu.is-open{
  max-height: 480px;                /* abierto */
  opacity: 1;                       /* CAMBIO */
  pointer-events: auto;             /* CAMBIO */
  transform: translateY(0) scaleY(1); /* CAMBIO */
  z-index: 1000;                    /* CAMBIO: ahora sí al frente */
}

/* Estética del panel móvil */
#mobileMenu nav{
  border: 0;                        /* CAMBIO: sin borde cerrado (no “asoma”) */
  padding: 0;                       /* CAMBIO: sin padding cerrado */
  border-radius: 1rem;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* CAMBIO: solo abierto mostramos borde y padding del panel */
#mobileMenu.is-open nav{
  border: 1px solid rgba(255,255,255,.10);
  padding: .5rem .75rem;
}

/* =========================
   ACCESIBILIDAD
   ========================= */
#desktopNav .nav-link:focus-visible,
#mobileMenu .nav-link:focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px rgba(255,255,255,.35);
  border-radius: 8px;
}

/* =========================
   FALLBACK — si Tailwind no carga
   CAMBIO: mostramos el nav de escritorio con CSS estándar
   ========================= */
/* =========================
   PÍLDORA — Glass & base
   ========================= */
#navPill{
  position: relative;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1.5px solid rgba(255,255,255,0.25);
  box-shadow: 0 8px 32px rgba(0,0,0,.45);
  transition: all .35s ease, max-width .35s ease, margin .35s ease; /* ← suave */
  max-width: 100%;
  margin-left: 0;                    /* ← base */
  margin-right: 0;
}

/* =========================
   ESTADO COMPACTO (scroll)
   ========================= */
#navbar.nav-compact #navPill{
  border-color: rgba(255,255,255,0.22);
  background-color: rgba(10,10,10,.65);
  box-shadow: 0 8px 32px rgba(0,0,0,.55);
  /* ← activa la compresión del ancho con centrado */
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
}

/* reduce padding/escala logo en compacto (respetando utilidades Tailwind) */
#navbar.nav-compact #navPill .px-5.py-3.md\:py-4{
  padding-top: .5rem;
  padding-bottom: .5rem;
}
#navbar.nav-compact #navPill .w-14.h-14{ width:44px; height:44px; }
#navbar.nav-compact #navPill img{ width:36px; height:36px; }

/* =========================
   MENÚ MÓVIL — colapsable
   ========================= */
#mobileMenu{
  position: absolute;
  top: calc(100% + 8px);
  left: 1rem;
  right: 1rem;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px) scaleY(.98);
  transform-origin: top;
  transition: max-height .3s ease, opacity .2s ease, transform .2s ease;
  z-index: -1;
}
#mobileMenu.is-open{
  max-height: 480px;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scaleY(1);
  z-index: 1000;
}
#mobileMenu nav{
  border: 0;
  padding: 0;
  border-radius: 1rem;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
#mobileMenu.is-open nav{
  border: 1px solid rgba(255,255,255,.10);
  padding: .5rem .75rem;
}

/* =========================
   LINKS — (igual que ya tenías)
   ========================= */
#desktopNav .nav-link,
#mobileMenu .nav-link{
  position: relative;
  display: inline-block;
  color: #fff;
  font-weight: 500;
  line-height: 1.5rem;
  transition: color .2s ease;
  padding-bottom: 6px;
  text-decoration: none;
}
#desktopNav .nav-link:hover,
#mobileMenu .nav-link:hover{ color:#d1d5db; }
#desktopNav .nav-link::after,
#mobileMenu .nav-link::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,1), rgba(255,255,255,0));
  transform: translateX(-100%); opacity:0;
  transition: opacity .25s ease, transform .35s ease; will-change: transform, opacity;
  filter: drop-shadow(0 0 4px rgba(0,0,0,.35));
}
#desktopNav .nav-link:hover::after,
#desktopNav .nav-link.is-active::after,
#mobileMenu .nav-link:hover::after,
#mobileMenu .nav-link.is-active::after{ opacity:1; transform: translateX(0); }
#navbar.nav-compact #desktopNav .nav-link::after{ bottom:-6px; filter:none; }

/* =========================
   ACCESIBILIDAD
   ========================= */
#desktopNav .nav-link:focus-visible,
#mobileMenu .nav-link:focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px rgba(255,255,255,.35);
  border-radius: 8px;
}

/* =========================
   BREAKPOINT PERSONALIZADO 800px
   (móvil por defecto; escritorio >800)
   ========================= */
#desktopNav{ display: none !important; }     /* móvil base */
#navToggle { display: inline-flex !important; }

@media (min-width: 880px){
  #desktopNav{ display: flex !important; }   /* escritorio */
  #navToggle { display: none !important; }
}