/* Menú desplegable de cristal — copiado del menú de la web del estudio (dalecolor.art)
   y adaptado a las secciones de la plataforma. Cápsula ahumada que crece desde arriba,
   desenfoca lo que hay detrás y presenta los enlaces en escalera. */
@font-face{font-family:"Anton";src:url('assets/fonts/Anton-Regular.woff') format('woff');font-weight:400;font-display:swap}
@font-face{font-family:"DM Mono";src:url('assets/fonts/DMMono-Regular.woff') format('woff');font-weight:400;font-display:swap}
@font-face{font-family:"Questrial";src:url('assets/fonts/Questrial-Regular.woff') format('woff');font-weight:400;font-display:swap}

:root{--gm-on-dark:#f6f6f2;--gm-on-dark-2:rgba(246,246,242,.62);--gm-accent:#ff6d00;--gm-accent-2:#ff8a33;--gm-ink:#141615;
 --gm-ease:cubic-bezier(.2,.7,.15,1);--gm-curtain:cubic-bezier(.76,0,.24,1);
 --gm-display:"Anton","Arial Narrow",Impact,sans-serif;--gm-mono:"DM Mono",ui-monospace,Menlo,monospace;--gm-sans:"Questrial","Helvetica Neue",Arial,sans-serif}

html.gm-open{overflow:hidden}

dialog#side-menu.glass-menu{
 position:fixed;margin:0;box-sizing:border-box;
 inset:calc(env(safe-area-inset-top,0px) + 12px) max(10px,env(safe-area-inset-right,0px)) auto max(10px,env(safe-area-inset-left,0px));
 width:auto;height:auto;max-width:none;
 max-height:calc(100dvh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
 padding:0 max(22px,4vw) 24px;border:0;border-radius:30px;overflow-y:auto;overscroll-behavior:contain;
 color:var(--gm-on-dark);font-family:var(--gm-sans);
 background:rgba(38,40,39,.5);
 -webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -1px 0 rgba(255,255,255,.10),inset 0 0 0 1px rgba(255,255,255,.12),0 20px 50px rgba(0,0,0,.28);
 animation:gm-down .6s var(--gm-curtain) both}
dialog#side-menu.glass-menu::backdrop{background:rgba(20,22,21,.28);-webkit-backdrop-filter:none;backdrop-filter:none;animation:gm-veil .4s ease both}
dialog#side-menu.glass-menu.closing{animation:gm-up .45s var(--gm-curtain) both}
dialog#side-menu.glass-menu.closing::backdrop{animation:gm-veil-out .45s ease both}
dialog#side-menu.glass-menu.closing *{animation:none!important}
@keyframes gm-down{from{clip-path:inset(0 0 calc(100% - 66px) 0 round 30px)}to{clip-path:inset(0 0 0 0 round 30px)}}
@keyframes gm-up{from{clip-path:inset(0 0 0 0 round 30px)}to{clip-path:inset(0 0 calc(100% - 66px) 0 round 30px)}}
@keyframes gm-veil{from{opacity:0}to{opacity:1}}
@keyframes gm-veil-out{from{opacity:1}to{opacity:0}}
@keyframes gm-item{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

/* Cabecera del panel: cerrar (dos trazos en X) + logotipo en claro */
.glass-menu .gm-head{display:flex;align-items:center;gap:12px;height:66px;margin:0 calc(-1 * max(22px,4vw) + 12px) 14px;position:sticky;top:0;z-index:1}
.glass-menu .gm-close{width:46px;height:46px;min-width:46px;padding:0;border-radius:50%;display:grid;place-content:center;gap:7px;cursor:pointer;
 color:var(--gm-on-dark);background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.45);transition:background .25s}
.glass-menu .gm-close:hover{background:rgba(255,255,255,.2)}
.glass-menu .gm-close span{display:block;width:18px;height:1.5px;background:currentColor}
.glass-menu .gm-close span:first-child{transform:translateY(4.25px) rotate(45deg)}
.glass-menu .gm-close span:last-child{transform:translateY(-4.25px) rotate(-45deg)}
.glass-menu .gm-logo{color:var(--gm-on-dark);font-size:24px}
.glass-menu .gm-logo span{color:var(--gm-accent)}

.glass-menu nav{display:flex;flex-direction:column;gap:0}
.glass-menu ul{list-style:none;margin:0;padding:0}
.glass-menu button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent}
.glass-menu .gm-mono{font:400 13px/1.4 var(--gm-mono);letter-spacing:.06em;text-transform:uppercase;margin:0 0 6px;color:var(--gm-on-dark-2)}
.glass-menu .gm-mono+.gm-big{margin-bottom:18px}

/* Enlaces grandes en Anton, mayúsculas */
.glass-menu .gm-big button{display:inline-block;font:400 clamp(32px,8.8vw,51.2px)/1.02 var(--gm-display);text-transform:uppercase;letter-spacing:.012em;padding:6px 0;
 transition:color .3s,transform .45s var(--gm-ease)}
.glass-menu .gm-big.gm-small button{font-size:clamp(25px,6.6vw,38px)}
.glass-menu .gm-big button:hover,.glass-menu .gm-big button:focus-visible,.glass-menu .gm-big button.is-hover{color:var(--gm-accent);transform:translateX(12px)}
.glass-menu .gm-big button[aria-current=page]{color:var(--gm-accent)}

/* Fila de enlaces secundarios en mono */
.glass-menu .gm-row{display:flex;flex-wrap:wrap;gap:10px clamp(14px,4vw,24px);margin-top:4px;padding-top:18px;border-top:1px solid rgba(246,246,242,.18)}
.glass-menu .gm-row button{font:400 clamp(12px,3.4vw,15px)/1 var(--gm-mono);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;transition:color .2s}
.glass-menu .gm-row button:hover,.glass-menu .gm-row button:focus-visible,.glass-menu .gm-row button.is-hover,.glass-menu .gm-row button[aria-current=page]{color:var(--gm-accent)}

/* Botón naranja y pie */
.glass-menu .gm-cta{display:flex;width:100%;align-items:center;justify-content:center;gap:10px;min-height:54px;margin-top:24px;padding:0 26px;border-radius:999px;
 background:var(--gm-accent);color:var(--gm-ink);font:400 16px/1 var(--gm-sans);letter-spacing:.01em;text-align:center;transition:background .3s var(--gm-ease)}
.glass-menu .gm-cta:hover,.glass-menu .gm-cta.is-hover{background:var(--gm-accent-2)}
.glass-menu .gm-cta svg{transition:transform .35s var(--gm-ease)}
.glass-menu .gm-cta:hover svg{transform:translate(2px,-2px)}
.glass-menu .gm-foot{font:400 13px/1.4 var(--gm-mono);letter-spacing:.06em;text-transform:uppercase;margin:18px 0 0;color:var(--gm-on-dark-2)}
.glass-menu .gm-foot a{color:inherit;text-decoration:none}
.glass-menu .gm-foot a:hover,.glass-menu .gm-foot a.is-hover{color:var(--gm-on-dark)}
.glass-menu :focus-visible{outline:2px solid var(--gm-accent);outline-offset:3px}

/* Escalera de entrada */
.glass-menu .gm-head,.glass-menu .gm-mono,.glass-menu .gm-big li,.glass-menu .gm-row,.glass-menu .gm-cta,.glass-menu .gm-foot{animation:gm-item .7s var(--gm-ease) both}
.glass-menu .gm-head{animation-delay:.1s}
.glass-menu [data-step]{animation-delay:calc(.18s + var(--step,0) * .06s)}

/* En ordenador la cápsula no ocupa todo el ancho: sale desde el botón del menú */
@media (min-width:760px){dialog#side-menu.glass-menu{right:auto;width:min(460px,calc(100vw - 20px));padding:0 30px 28px}.glass-menu .gm-head{margin:0 -18px 14px}}

@media (prefers-reduced-motion:reduce){
 dialog#side-menu.glass-menu,dialog#side-menu.glass-menu::backdrop,.glass-menu *{animation:none!important;transition:none!important}}

/* Secciones desplegables (como el menú de Book An Artist, con la estética del estudio) */
.glass-menu .gm-big>li>button{font-size:clamp(28px,7.4vw,46px)}
.glass-menu .gm-toggle{display:flex!important;width:100%;align-items:center;justify-content:space-between;gap:14px}
.glass-menu .gm-toggle[aria-expanded=true]{color:var(--gm-accent)}
.glass-menu .gm-plus{position:relative;width:18px;height:18px;flex:none}
.glass-menu .gm-plus::before,.glass-menu .gm-plus::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:currentColor;transition:transform .35s var(--gm-ease)}
.glass-menu .gm-plus::after{transform:rotate(90deg)}
.glass-menu .gm-toggle[aria-expanded=true] .gm-plus::after{transform:rotate(0)}
.glass-menu .gm-big .gm-subs{list-style:none;margin:4px 0 14px;padding:4px 0 4px 14px;border-left:1px solid rgba(246,246,242,.22);display:grid;gap:0;animation:gm-item .45s var(--gm-ease) both}
.glass-menu .gm-big .gm-subs.two{grid-template-columns:1fr 1fr;column-gap:16px}
.glass-menu .gm-big .gm-subs li{animation:none}
.glass-menu .gm-big .gm-subs button{display:grid;gap:2px;font:400 17px/1.25 var(--gm-sans);text-transform:none;letter-spacing:0;padding:9px 0;transform:none;width:100%}
.glass-menu .gm-big .gm-subs button small{font:400 11px/1.2 var(--gm-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--gm-on-dark-2)}
.glass-menu .gm-big .gm-subs button.strong{color:var(--gm-accent)}
.glass-menu .gm-big .gm-subs button:hover,.glass-menu .gm-big .gm-subs button.is-hover{color:var(--gm-accent);transform:translateX(4px)}
.glass-menu .gm-cta-2{background:transparent;color:var(--gm-on-dark);border:1px solid rgba(246,246,242,.5);margin-top:10px}
.glass-menu .gm-cta-2:hover{background:rgba(255,255,255,.1)}
.glass-menu .gm-logo{background:none;border:0;cursor:pointer;font-family:inherit}
@media (max-width:380px){.glass-menu .gm-big .gm-subs.two{grid-template-columns:1fr}}
.glass-menu .gm-big .gm-subs[hidden]{display:none}
.glass-menu .gm-big .gm-toggle:hover,.glass-menu .gm-big .gm-toggle.is-hover{transform:none}