/*
 * 02-nav.css - Nav flotante: contenedor, marca, enlaces, CTA y su media query.
 * Origen: index.html, <style> #1 (lineas 17-28). Contenido identico al original.
 */
.nav{
 position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:40;width:min(1180px,calc(100% - 28px));
 display:flex;align-items:center;justify-content:space-between;padding:11px 14px 11px 18px;
 border:1px solid rgba(255,255,255,.11);background:rgba(7,9,12,.48);backdrop-filter:blur(22px) saturate(140%);
 -webkit-backdrop-filter:blur(22px) saturate(140%);border-radius:999px;box-shadow:0 12px 50px rgba(0,0,0,.28)
}
.brand{display:flex;align-items:center;gap:10px;letter-spacing:.18em;text-transform:uppercase;font-family:Cinzel,serif;font-size:12px}
/* El logo es un lockup (monograma + wordmark + tagline). En el nav se encuadra
   solo el monograma (torre+SP), que ocupa x 202-297 / y 120-333 del PNG 500x500. */
.brand-mark{--mh:26px;--s:calc(var(--mh)/214);position:relative;display:block;flex:none;overflow:hidden;width:calc(96*var(--s));height:var(--mh)}
.brand-mark img{position:absolute;max-width:none;width:calc(500*var(--s));height:calc(500*var(--s));left:calc(-202*var(--s));top:calc(-120*var(--s))}
.navlinks{display:flex;gap:28px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#c9c5bc}
.navlinks a{transition:.25s ease}.navlinks a:hover{color:var(--gold2)}
.navcta{border:1px solid rgba(221,171,65,.55);background:rgba(217,168,59,.08);padding:10px 15px;border-radius:999px;color:var(--gold2);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
@media(max-width:760px){.navlinks{display:none}.navcta{font-size:9px}.nav{top:10px}}