/* Menú: Proyectos con el Portafolio como subpágina (escritorio: desplegable; móvil: botón que despliega) */
.nav-drop{position:relative;display:flex}
.nav-caret{position:relative;z-index:1;margin-left:-4px;font-size:9px;opacity:.65;transition:transform .25s ease}
.nav-sub{position:absolute;top:calc(100% + 12px);left:50%;z-index:60;min-width:236px;padding:6px;display:grid;gap:2px;border:1px solid #e5d8f3;border-radius:18px;background:#fff;box-shadow:0 22px 60px rgba(54,25,110,.18);opacity:0;visibility:hidden;transform:translate(-50%,-6px);transition:opacity .2s ease,transform .2s ease,visibility .2s}
.nav-sub::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.nav-drop:hover .nav-sub,.nav-drop:focus-within .nav-sub{opacity:1;visibility:visible;transform:translate(-50%,0)}
.nav-drop:hover .nav-caret,.nav-drop:focus-within .nav-caret{transform:rotate(180deg)}
.desktop-nav .nav-sub a{justify-content:center;color:#2b1546;isolation:isolate}
/* El fondo del hover va siempre detrás del texto, aunque el cambio de idioma lo deje sin <span> */
.desktop-nav .nav-sub a::before{z-index:-1}
.desktop-nav .nav-sub a:hover,.desktop-nav .nav-sub a:focus-visible{color:#4d1c95}
.desktop-nav .nav-sub a::after{content:"↗";position:relative;z-index:1;font-size:11px;color:#743cf0}

.mobile-menu .mobile-drop{border-bottom:1px solid rgba(255,255,255,.09)}
.mobile-menu .mobile-drop-toggle{display:grid;grid-template-columns:34px minmax(0,1fr) 34px;align-items:center;gap:10px;width:100%;padding:16px 14px;border:0;border-radius:14px;background:none;color:#fff;font:inherit;text-align:center;cursor:pointer}
.mobile-menu .mobile-drop-toggle:hover{background:rgba(112,71,235,.18)}
.mobile-menu .mobile-drop-toggle .ui-strong{transition:transform .25s ease}
.mobile-menu .mobile-drop.is-open .mobile-drop-toggle .ui-strong{transform:rotate(180deg)}
.mobile-menu .mobile-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.mobile-menu .mobile-drop.is-open .mobile-sub{grid-template-rows:1fr}
.mobile-menu .mobile-sub>div{overflow:hidden;display:grid;gap:6px;padding:0 10px}
.mobile-menu .mobile-drop.is-open .mobile-sub>div{padding-bottom:10px}
.mobile-menu .mobile-sub a{padding:12px 14px;border:0;border-radius:12px;background:rgba(116,60,240,.16)}
.mobile-menu .mobile-sub a span:not(.ui-strong){font-size:15px}

/* Instagram como icono en el menú (TikTok sigue en el pie) */
.desktop-nav a.nav-ig{width:38px;flex:0 0 38px;padding:0;justify-content:center;margin-left:2px;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 22%,transparent)}
.desktop-nav a.nav-ig::before{background:radial-gradient(circle at 30% 110%,#fdf497 0%,#fd5949 42%,#d6249f 62%,#5b3cf0 100%)}
.desktop-nav a.nav-ig svg{position:relative;z-index:1;transition:transform .3s ease}
.desktop-nav a.nav-ig:hover,.desktop-nav a.nav-ig:focus-visible{color:#fff;box-shadow:0 8px 22px rgba(214,36,159,.32)}
.desktop-nav a.nav-ig:hover svg,.desktop-nav a.nav-ig:focus-visible svg{transform:rotate(-8deg) scale(1.1)}
.mobile-menu a.mobile-ig small{display:flex;align-items:center;justify-content:center}
.mobile-menu a.mobile-ig small svg{width:20px;height:20px}