/* Yū Glass Menu — estilo Apple con vidrio esmerilado */
.ygm{
  --ygm-text:#1D1D1F;
  --ygm-muted:rgba(29,29,31,.72);
  --ygm-ink:#0E1A36;
  --ygm-line:rgba(0,0,0,.08);
  --ygm-glass:rgba(255,255,255,.72);
  --ygm-glass-strong:rgba(255,255,255,.9);
  --ygm-grad:linear-gradient(90deg,#FF5B4F,#D346A6,#7C3AED);
  --ygm-r:6px;
  --ygm-h:56px;
  --ygm-ease-out:cubic-bezier(0.23,1,0.32,1);
  --ygm-ease-in-out:cubic-bezier(0.77,0,0.175,1);
  --ygm-ease-drawer:cubic-bezier(0.32,0.72,0,1);

  position:sticky;top:0;z-index:9990;
  font-family:inherit;font-size:14px;line-height:1;letter-spacing:-.01em;color:var(--ygm-text);
  border-bottom:1px solid transparent;
  transition:border-color 200ms ease;
}
/* El vidrio va en un pseudo-elemento: backdrop-filter en el propio header
   convertiría al header en contenedor de los elementos fixed (rompe el menú móvil). */
.ygm::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--ygm-glass);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  transition:background-color 200ms ease;
}
.ygm *,.ygm *::before,.ygm *::after{box-sizing:border-box}
.ygm a{text-decoration:none;color:inherit}
.ygm ul{list-style:none;margin:0;padding:0}
.ygm button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ygm :focus-visible{outline:2px solid #7C3AED;outline-offset:2px;border-radius:4px}
.ygm.is-stuck{border-bottom-color:var(--ygm-line)}

.admin-bar .ygm{top:32px}
@media (max-width:782px){.admin-bar .ygm{top:46px}}
@media (max-width:600px){.admin-bar .ygm{top:0}}

.ygm-bar{
  display:flex;align-items:center;gap:24px;
  max-width:var(--ygm-max,1180px);height:var(--ygm-h);margin:0 auto;padding:0 clamp(16px,4vw,40px);
}

/* Logo */
.ygm-logo{display:flex;align-items:center;flex:none;transition:opacity 200ms ease}
.ygm-logo img{display:block;height:var(--ygm-logo-h,34px);width:auto;max-width:180px;object-fit:contain}
.ygm-logo span{font-weight:700;font-size:17px}

/* Navegación de escritorio */
.ygm-nav{flex:1;display:flex;justify-content:center;min-width:0}
.ygm-list{display:flex;align-items:center;gap:2px}
.ygm-item{position:relative;display:flex;align-items:center}
.ygm-link{
  position:relative;display:flex;align-items:center;height:var(--ygm-h);padding:0 12px;
  color:var(--ygm-muted);font-weight:400;white-space:nowrap;
  transition:color 200ms ease;
}
.ygm-item.is-current>.ygm-link{color:var(--ygm-text);font-weight:500}
.ygm-item.is-current>.ygm-link::after{
  content:"";position:absolute;left:12px;right:12px;bottom:12px;height:2px;border-radius:1px;background:var(--ygm-grad);
}
.ygm-caret{display:grid;place-items:center;width:20px;height:28px;margin-left:-8px;color:var(--ygm-muted);transition:color 200ms ease}
.ygm-caret svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform 200ms var(--ygm-ease-out)}
.ygm-item.is-open>.ygm-caret svg{transform:rotate(180deg)}

@media (hover:hover) and (pointer:fine){
  .ygm-link:hover,.ygm-caret:hover,.ygm-item.is-open>.ygm-link{color:var(--ygm-text)}
  .ygm-logo:hover{opacity:.8}
}

/* Desplegable: sale de su ítem, no del centro de la pantalla */
.ygm-drop{
  position:absolute;top:calc(100% - 6px);left:50%;
  min-width:260px;padding:8px;
  background:var(--ygm-glass-strong);
  -webkit-backdrop-filter:saturate(180%) blur(24px);
  backdrop-filter:saturate(180%) blur(24px);
  border:1px solid var(--ygm-line);border-radius:var(--ygm-r);
  box-shadow:0 12px 32px -12px rgba(0,0,0,.18),0 2px 6px -2px rgba(0,0,0,.06);
  transform-origin:top center;
  opacity:0;transform:translateX(-50%) translateY(-4px) scale(.97);
  pointer-events:none;
  transition:opacity 180ms var(--ygm-ease-out),transform 180ms var(--ygm-ease-out);
}
.ygm-drop[hidden]{display:block}               /* el JS controla visibilidad con clases */
.ygm-item.is-open>.ygm-drop{opacity:1;transform:translateX(-50%) translateY(0) scale(1);pointer-events:auto}
/* Puente invisible para que el hover no se corte entre el ítem y el panel */
.ygm-drop::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.ygm-sublink{display:block;padding:10px 12px;border-radius:4px;transition:background-color 150ms ease}
.ygm-sublink span{display:block;font-size:14px;font-weight:500;color:var(--ygm-text);line-height:1.3}
.ygm-sublink small{display:block;margin-top:3px;font-size:12px;line-height:1.35;color:var(--ygm-muted);font-weight:400}
.ygm-sub .is-current>.ygm-sublink span{color:#7C3AED}
@media (hover:hover) and (pointer:fine){.ygm-sublink:hover{background:rgba(0,0,0,.04)}}

/* Acciones */
.ygm-actions{display:flex;align-items:center;gap:16px;flex:none}
.ygm-textlink{color:var(--ygm-muted);transition:color 200ms ease;white-space:nowrap}
@media (hover:hover) and (pointer:fine){.ygm-textlink:hover{color:var(--ygm-text)}}
.ygm-btn{
  display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 18px;border-radius:var(--ygm-r);
  font-size:14px;font-weight:500;white-space:nowrap;
  transition:transform 160ms var(--ygm-ease-out),background-color 200ms ease,color 200ms ease,border-color 200ms ease;
}
.ygm-btn:active{transform:scale(.97)}
.ygm-btn--sm{height:32px;padding:0 14px;font-size:13px}
.ygm-btn--solid{background:var(--ygm-ink);color:#fff!important}
.ygm-btn--ghost{border:1px solid rgba(0,0,0,.15);color:var(--ygm-text)}
@media (hover:hover) and (pointer:fine){
  .ygm-btn--solid:hover{background:#1B2A52}
  .ygm-btn--ghost:hover{border-color:rgba(0,0,0,.35)}
}
.ygm-mobile-actions{display:none}

/* Botón hamburguesa (dos líneas que se cruzan, como en Apple) */
.ygm-burger{display:none;position:relative;width:40px;height:40px;margin-right:-10px}
.ygm-burger i{position:absolute;left:12px;width:16px;height:1.5px;border-radius:1px;background:var(--ygm-text);transition:transform 300ms var(--ygm-ease-in-out)}
.ygm-burger i:first-child{top:16px}
.ygm-burger i:last-child{top:22px}
.ygm[data-state="open"] .ygm-burger i:first-child{transform:translateY(3px) rotate(45deg)}
.ygm[data-state="open"] .ygm-burger i:last-child{transform:translateY(-3px) rotate(-45deg)}

/* =========================================================
   Móvil: hoja de vidrio a pantalla completa
   ========================================================= */
@media (max-width:900px){
  .ygm-burger{display:block}
  .ygm-textlink,.ygm-actions .ygm-btn{display:none}
  .ygm-bar{gap:12px}
  .ygm-logo{margin-right:auto}

  .ygm-nav{
    position:fixed;left:0;right:0;top:var(--ygm-top,56px);bottom:0;
    display:flex;flex-direction:column;justify-content:space-between;
    padding:12px clamp(20px,6vw,40px) calc(24px + env(safe-area-inset-bottom));
    background:var(--ygm-glass-strong);
    -webkit-backdrop-filter:saturate(180%) blur(24px);
    backdrop-filter:saturate(180%) blur(24px);
    overflow-y:auto;overscroll-behavior:contain;
    visibility:hidden;opacity:0;
    transition:opacity 250ms var(--ygm-ease-out),visibility 0s linear 250ms;
  }
  .ygm[data-state="open"] .ygm-nav{visibility:visible;opacity:1;transition:opacity 250ms var(--ygm-ease-out),visibility 0s}

  .ygm-list{flex-direction:column;align-items:stretch;gap:0}
  .ygm-item{flex-wrap:wrap;border-bottom:1px solid var(--ygm-line)}
  .ygm-link{flex:1;height:auto;padding:18px 0;font-size:24px;font-weight:600;letter-spacing:-.03em;color:var(--ygm-text)}
  .ygm-item.is-current>.ygm-link::after{left:0;right:auto;width:24px;bottom:10px}
  .ygm-item.is-current>.ygm-link{font-weight:600}
  .ygm-sub .ygm-item{border-bottom:0}
  .ygm-caret{width:44px;height:44px;margin:0;color:var(--ygm-text)}
  .ygm-caret svg{width:14px;height:14px}

  /* Submenú en acordeón */
  .ygm-drop,.ygm-item.is-open>.ygm-drop{
    position:static;flex-basis:100%;min-width:0;padding:0;border:0;box-shadow:none;background:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    opacity:1;transform:none;pointer-events:auto;
    display:grid;grid-template-rows:0fr;transition:grid-template-rows 250ms var(--ygm-ease-out);
  }
  .ygm-item.is-open>.ygm-drop{grid-template-rows:1fr}
  .ygm-drop::before{display:none}
  .ygm-sub{overflow:hidden;min-height:0}
  .ygm-sub li:last-child{padding-bottom:12px}
  .ygm-sublink{padding:10px 0}
  .ygm-sublink span{font-size:17px}

  /* Entrada escalonada de los ítems al abrir */
  .ygm-list>.ygm-item,.ygm-mobile-actions{opacity:0;transform:translateY(-8px)}
  .ygm[data-state="open"] .ygm-list>.ygm-item,
  .ygm[data-state="open"] .ygm-mobile-actions{
    opacity:1;transform:none;
    transition:opacity 300ms var(--ygm-ease-out),transform 300ms var(--ygm-ease-out);
    transition-delay:calc(var(--i,0) * 40ms + 60ms);
  }

  .ygm-mobile-actions{display:grid;gap:10px;margin-top:32px}
  .ygm-mobile-actions .ygm-btn{height:48px;font-size:16px}

  .ygm[data-state="open"]{border-bottom-color:var(--ygm-line)}
  .ygm[data-state="open"]::before{background:var(--ygm-glass-strong)}
  html.ygm-lock,html.ygm-lock body{overflow:hidden}
}

@media (prefers-reduced-motion:reduce){
  .ygm *,.ygm{transition-duration:0ms!important;transition-delay:0ms!important}
  .ygm-nav{transition:opacity 150ms ease!important}
}