/* Cabecera y menú (diseño VEGA-WEB-CONCEPT, 21-10-2026). La usan la home (con home.css) y el resto
 * de páginas (con web.css). En la home aparece al bajar, cuando el logo de la portada llega a ella;
 * en las demás páginas se ve siempre (body.inner). Botones con su estilo propio (.top .btn) para no
 * mezclarse con los de web.css. */
:root{--hdr-ease:cubic-bezier(.05,.7,.1,1)}
.top .btn,.menu-ov .btn,.hero .corners .btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;border:1px solid var(--crema);border-radius:999px;padding:16px 28px;font-size:13px;letter-spacing:.8px;color:var(--tinta);position:relative;overflow:hidden;isolation:isolate;transition:color .35s,border-color .35s,transform .2s;white-space:nowrap;background:none;font-family:inherit;cursor:none}
.top .btn::before,.menu-ov .btn::before,.hero .corners .btn::before{content:"";position:absolute;inset:0;background:var(--champ);border-radius:inherit;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--hdr-ease);z-index:-1}
.top .btn:hover,.menu-ov .btn:hover,.hero .corners .btn:hover{color:var(--marino);border-color:var(--champ)}
.top .btn:hover::before,.menu-ov .btn:hover::before,.hero .corners .btn:hover::before{transform:scaleX(1);transform-origin:left}
.top .btn:active,.menu-ov .btn:active,.hero .corners .btn:active{transform:scale(.97)}
.top .btn.coral,.menu-ov .btn.coral,.hero .corners .btn.coral{background:var(--cobre);border-color:var(--cobre);color:var(--marino)}
.top .btn.coral::before,.menu-ov .btn.coral::before,.hero .corners .btn.coral::before{background:var(--tinta)}
.top .btn.sm,.menu-ov .btn.sm,.hero .corners .btn.sm{padding:11px 18px;font-size:12px}
.top .btn.peach,.menu-ov .btn.peach,.hero .corners .btn.peach{background:var(--champ);border-color:var(--champ);color:var(--marino)}
.top .btn.peach::before,.menu-ov .btn.peach::before,.hero .corners .btn.peach::before{background:var(--tinta)}
.top .btn svg,.menu-ov .btn svg,.hero .corners .btn svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.6;fill:none}
.top{position:fixed;inset:0 0 auto 0;z-index:100;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;padding:12px var(--gut);background:var(--marino);border-bottom:1px solid var(--linea);transform:translateY(-100%);transition:transform .5s var(--hdr-ease);height:84px}
body.hdr .top{transform:none}
.top .brand{width:80px;height:52px;display:block;justify-self:start;grid-column:1}
.top nav{grid-column:2;padding-left:28px}
.top .r{grid-column:3}
@media (max-width:1000px){.top{grid-template-columns:1fr auto 1fr}.top .brand{grid-column:2;justify-self:center}.top .r{grid-column:3}}
.top .brand img{height:52px;width:auto;opacity:0}
body.docked .top .brand img{opacity:1}
.top nav{display:flex;justify-content:flex-start;gap:clamp(20px,3vw,48px)}
.top nav a{font-size:11.5px;letter-spacing:2.6px;text-transform:uppercase;color:var(--crema);padding:10px 4px;position:relative;transition:color .25s}
.top nav a::after{content:"";position:absolute;left:4px;right:4px;bottom:6px;height:1px;background:var(--champ);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--hdr-ease)}
.top nav a:hover,.top nav a.on{color:var(--champ)}
.top nav a:hover::after,.top nav a.on::after{transform:scaleX(1);transform-origin:left}
.top .r{display:flex;align-items:center;gap:12px;justify-self:end}
.top .r{align-items:flex-start}
.top .casa{display:flex;flex-direction:column;align-items:center;gap:3px}
.top .casa small{font-size:8.5px;letter-spacing:1.4px;text-transform:uppercase;color:var(--acero);white-space:nowrap;line-height:1;height:9px}
.top .casa .btn.sm{padding:10px 18px}
.top .mbtn{display:none}
@media (max-width:1000px){.top nav{display:none}.top .mbtn{display:inline-flex;background:none;border:0;color:var(--crema);font:inherit;align-items:center;cursor:none;padding:10px 0 10px 10px;justify-self:end}.top .mbtn span{display:none}.top .mbtn b{display:flex;flex-direction:column;gap:5px;width:22px}.top .mbtn b i{height:1px;background:var(--crema);display:block}.top .casa{display:none}}
.menu-ov{position:fixed;inset:0;z-index:90;background:var(--ocean);clip-path:circle(0 at calc(100% - 40px) 40px);transition:clip-path .8s var(--hdr-ease);display:flex;flex-direction:column;justify-content:flex-start;padding:max(14vh,90px) var(--gut) 0;gap:30px}
body.menu .menu-ov{clip-path:circle(150% at calc(100% - 40px) 40px)}
.menu-ov ol{list-style:none;margin:0;padding:0}.menu-ov li a{display:block;font-size:clamp(34px,9vw,72px);line-height:1.1;color:var(--tinta);padding:4px 0}
.menu-ov .x{position:absolute;top:22px;right:var(--gut);background:none;border:0;color:var(--tinta);font-size:28px;cursor:none}
.menu-ov .mnw{flex:1;display:flex;align-items:center;justify-content:center;min-height:120px}.menu-ov .mn{width:92px;opacity:.95}
/* resto de páginas: cabecera fija desde el principio, logo visible y cursor normal */
body.inner{padding-top:84px}
body.inner .top{transform:none}
body.inner .top .brand img{opacity:1}
body.inner .top .btn,body.inner .menu-ov .btn,body.inner .top .mbtn,body.inner .menu-ov .x{cursor:pointer}
.top .btn{font-family:Optima,'Optima Nova',Candara,'Segoe UI',sans-serif;font-weight:400;text-transform:none}
.top .brand img{display:block}
/* «Members Portal»: todavía no está listo; al pulsar sale un aviso sin mover nada */
.soon-tip{position:fixed;z-index:400;pointer-events:none;background:#EBDBCA;color:#161E36;font:500 12px/1.3 Optima,'Optima Nova',Candara,'Segoe UI',sans-serif;letter-spacing:.06em;padding:9px 14px;border-radius:999px;box-shadow:0 10px 30px -10px rgba(0,0,0,.6);opacity:0;transform:translate(-50%,6px);transition:opacity .25s,transform .25s;white-space:nowrap}
.soon-tip.on{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.top,.menu-ov,.soon-tip{transition:none}}
/* con el menú abierto la cabecera queda encima: el botón de menú se convierte en aspa y lo cierra */
.top .mbtn b i{transition:transform .35s var(--hdr-ease)}
body.menu .top .mbtn b i:first-child{transform:translateY(3px) rotate(45deg)}
body.menu .top .mbtn b i:last-child{transform:translateY(-3px) rotate(-45deg)}
body.menu .top{transform:none;background:transparent;border-bottom-color:transparent}
body.menu .top .brand img{opacity:1}
