/* Barra superior de cristal — la misma de dalecolor.art (cápsula flotante tipo Liquid Glass):
   casi transparente, desenfoque que deja ver lo de detrás, filo de luz, sombra suave.
   Se esconde al bajar y reaparece al subir. El tono se adapta a lo que pasa por debajo. */
:root{--gh-top:calc(env(safe-area-inset-top,0px) + 16px);--gh-h:64px;--gh-ease:cubic-bezier(.2,.7,.15,1)}
@media (min-width:1000px){:root{--gh-top:calc(env(safe-area-inset-top,0px) + 10px);--gh-h:68px}}

/* Hueco para la barra flotante */
body{padding-top:calc(var(--gh-top) + var(--gh-h) + 10px)}

header.top.glass-hdr{
 position:fixed;z-index:40;margin:0;height:auto;padding:0;border:0;display:block;
 top:var(--gh-top);left:max(10px,env(safe-area-inset-left,0px));right:max(10px,env(safe-area-inset-right,0px));
 border-radius:30px;color:#f6f6f2;
 --glass:rgba(38,40,39,.34);background:var(--glass);
 -webkit-backdrop-filter:blur(18px) saturate(1.9) brightness(1.06);backdrop-filter:blur(18px) saturate(1.9) brightness(1.06);
 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,.10),0 10px 30px rgba(0,0,0,.18),0 1px 2px rgba(0,0,0,.12);
 transition:background .45s,color .45s,box-shadow .45s,transform .45s var(--gh-ease)}
header.top.glass-hdr.over-light{--glass:rgba(255,255,255,.38);color:#202322;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(255,255,255,.35),inset 0 0 0 1px rgba(255,255,255,.45),0 10px 30px rgba(20,22,21,.12),0 1px 2px rgba(20,22,21,.08)}
/* Filo de luz: más brillante arriba a la izquierda, como el cristal de iOS */
header.top.glass-hdr::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1px;
 background:linear-gradient(135deg,rgba(255,255,255,.75),rgba(255,255,255,.12) 35%,rgba(255,255,255,.05) 60%,rgba(255,255,255,.35));
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
header.top.glass-hdr.hide{transform:translateY(calc(-100% - 24px - env(safe-area-inset-top,0px)))}
@media (max-width:999px){header.top.glass-hdr:not(.hide){transition:background .45s,color .45s,box-shadow .45s,transform .28s cubic-bezier(.2,.8,.2,1)}}

.glass-hdr .gh-row{height:var(--gh-h);display:flex;align-items:center;gap:28px;padding:0 10px 0 22px;max-width:none}
.glass-hdr .logo{color:inherit;background:none;border:0;cursor:pointer;margin-right:auto;font-size:26px;line-height:1}
.glass-hdr .logo span{color:#ff6d00}
.glass-hdr .logo i{color:inherit;opacity:.8}

/* Enlaces de escritorio: mono, mayúsculas, subrayado que entra desde la izquierda */
.glass-hdr .gh-nav{display:none;align-items:center;gap:30px;order:0;width:auto;height:auto;overflow:visible;justify-content:flex-start}
.glass-hdr .gh-nav button{all:unset;cursor:pointer;position:relative;padding:8px 0;font:400 13px/1 "DM Mono",ui-monospace,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;color:inherit}
.glass-hdr .gh-nav button::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--gh-ease)}
.glass-hdr .gh-nav button:hover::after,.glass-hdr .gh-nav button.active::after,.glass-hdr .gh-nav button:focus-visible::after{transform:scaleX(1);transform-origin:left}

/* Botón naranja (Iniciar sesión / Mi cuenta), como «Pide presupuesto» */
.glass-hdr .gh-cta{display:none;align-items:center;gap:10px;min-height:46px;padding:0 20px;border-radius:999px;border:0;cursor:pointer;
 background:#ff6d00;color:#141615;font:400 15px/1 "Questrial","Helvetica Neue",Arial,sans-serif;letter-spacing:.01em;white-space:nowrap;transition:background .3s var(--gh-ease)}
.glass-hdr .gh-cta:hover{background:#ff8a33}
.glass-hdr .gh-cta svg{transition:transform .35s var(--gh-ease)}
.glass-hdr .gh-cta:hover svg{transform:translate(2px,-2px)}

/* Botón de menú: dos trazos en círculo de cristal */
.glass-hdr .gh-burger{width:46px;height:46px;min-width:46px;padding:0;border-radius:50%;display:grid;place-content:center;gap:7px;cursor:pointer;
 color:inherit;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.45);transition:background .25s,border-color .25s}
.glass-hdr.over-light .gh-burger{background:rgba(255,255,255,.35);border-color:rgba(20,22,21,.18)}
.glass-hdr .gh-burger:hover{background:rgba(255,255,255,.2)}
.glass-hdr .gh-burger span{display:block;width:18px;height:1.5px;background:currentColor}
.glass-hdr :focus-visible{outline:2px solid #ff6d00;outline-offset:3px}

@media (min-width:1000px){.glass-hdr .gh-nav{display:flex}.glass-hdr .gh-cta{display:inline-flex}.glass-hdr .gh-row{padding:0 12px 0 28px}}
@media (max-width:360px){.glass-hdr .logo{font-size:22px}.glass-hdr .gh-row{padding-left:18px}}

/* El menú desplegado sale de la propia barra: misma altura de cabecera, X donde estaba el botón */
dialog#side-menu.glass-menu{inset:var(--gh-top) max(10px,env(safe-area-inset-right,0px)) auto max(10px,env(safe-area-inset-left,0px));
 max-height:calc(100dvh - var(--gh-top) - 10px - env(safe-area-inset-bottom,0px))}
.glass-menu .gm-head{height:var(--gh-h);flex-direction:row-reverse;justify-content:space-between}
@keyframes gm-down{from{clip-path:inset(0 0 calc(100% - var(--gh-h)) 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% - var(--gh-h)) 0 round 30px)}}
@media (min-width:760px){dialog#side-menu.glass-menu{left:auto;right:max(10px,env(safe-area-inset-right,0px))}}

@media (prefers-reduced-motion:reduce){header.top.glass-hdr{transition:none}}

/* Menús desplegables de escritorio (estructura de Book An Artist) */
.glass-hdr .gh-row{gap:22px}
.glass-hdr .gh-nav{gap:22px}
.glass-hdr .gh-drop-btn span{font-size:10px;margin-left:6px;display:inline-block;transition:transform .3s}
.glass-hdr .gh-drop-btn[aria-expanded=true] span{transform:rotate(180deg)}
.glass-hdr .gh-account{display:none;align-items:center;gap:8px;min-height:46px;padding:0 16px;border-radius:999px;cursor:pointer;color:inherit;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.45);font:400 15px/1 "Questrial","Helvetica Neue",Arial,sans-serif}
.glass-hdr.over-light .gh-account{background:rgba(255,255,255,.35);border-color:rgba(20,22,21,.18)}
.glass-hdr .gh-avatar{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#ff6d00;color:#141615;font-weight:700;font-size:13px}
.glass-hdr .gh-drop{position:absolute;top:calc(100% + 10px);left:0;right:0;border-radius:26px;padding:22px 26px 24px;color:#f6f6f2;
 background:rgba(38,40,39,.62);-webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 0 0 1px rgba(255,255,255,.12),0 20px 50px rgba(0,0,0,.25);animation:gh-drop .35s var(--gh-ease) both}
@keyframes gh-drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.glass-hdr .gh-drop-title{margin:0 0 12px;font:400 30px/1 "Anton","Arial Narrow",Impact,sans-serif;text-transform:uppercase;letter-spacing:.01em}
.glass-hdr .gh-drop ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 26px;max-width:620px}
.glass-hdr .gh-drop ul.cols{grid-template-columns:repeat(4,minmax(0,1fr));max-width:none}
.glass-hdr .gh-drop button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;gap:3px;width:100%;padding:10px 12px;border-radius:12px;font:400 16px/1.25 "Questrial","Helvetica Neue",Arial,sans-serif}
.glass-hdr .gh-drop button small{font:400 11px/1.2 "DM Mono",ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;opacity:.65}
.glass-hdr .gh-drop button:hover,.glass-hdr .gh-drop button:focus-visible{background:rgba(255,255,255,.10);color:#ff8a33}
.glass-hdr .gh-drop button.strong{color:#ff8a33}
@media (min-width:1000px){.glass-hdr .gh-account{display:inline-flex}}
@media (min-width:1000px) and (max-width:1250px){.glass-hdr .gh-nav{gap:16px}.glass-hdr .gh-nav button{font-size:12px}.glass-hdr .gh-acc-label{display:none}}
@media (min-width:1000px) and (max-width:1120px){.glass-hdr .gh-cta{padding:0 14px;font-size:14px}}
.glass-hdr [hidden]{display:none!important}
.glass-hdr .gh-drop{background:rgba(30,32,31,.9);-webkit-backdrop-filter:blur(28px) saturate(1.5);backdrop-filter:blur(28px) saturate(1.5)}