.cspc .wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 26px; }
.cspc .dia {
display: inline-block; width: 10px; height: 10px; flex: none;
background: var(--accent); transform: rotate(45deg); border-radius: 2px;
}
.cspc .btn {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-display); font-weight: 400; font-size: 19px; letter-spacing: 0.08em;
padding: 11px 22px 8px; border-radius: 10px; cursor: pointer;
background: var(--accent); color: #fff; border: 1px solid var(--accent);
transition: transform 0.15s, background 0.15s, box-shadow 0.15s;
white-space: nowrap;
}
.cspc .btn:hover { transform: translateY(-2px); background: var(--accent-deep); box-shadow: 0 10px 30px rgba(13,27,42,0.08); }
/* ===== NAV ===== */
.cspc .pnav { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background 0.25s, box-shadow 0.25s; }
.cspc .pnav.scrolled { background: rgba(244,245,242,0.9); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line); }
.cspc .pnav-inner { display: flex; align-items: center; gap: 30px; padding: 15px 0; }
.cspc .pnav-name { font-family: var(--font-display); font-size: 25px; letter-spacing: 0.06em; display: flex; align-items: center; gap: 11px; white-space: nowrap; }
.cspc .pnav-links { margin-left: auto; display: flex; gap: 24px; align-items: center; font-family: var(--font-display); font-size: 17px; letter-spacing: 0.08em; }
.cspc .pnav-links a:not(.btn) { opacity: 0.72; }
.cspc .pnav-links a:not(.btn):hover { opacity: 1; color: var(--accent); }
.cspc .pnav .btn { font-size: 18px; padding: 9px 18px 6px; }
.cspc .pnav-burger {
display: none; margin-left: auto; width: 44px; height: 44px; border: none; cursor: pointer;
background: transparent; padding: 10px; border-radius: 10px;
}
.cspc .pnav-burger span { display: block; height: 2.5px; background: var(--ink); border-radius: 2px; transition: transform 0.3s, opacity 0.2s; }
.cspc .pnav-burger span + span { margin-top: 5px; }
.cspc .pnav-burger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.cspc .pnav-burger.open span:nth-child(2) { opacity: 0; }
.cspc .pnav-burger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.cspc .pnav-mobile {
display: none; overflow: hidden; max-height: 0; transition: max-height 0.35s ease;
background: rgba(244,245,242,0.98); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line);
}
.cspc .pnav-mobile.open { max-height: 340px; }
.cspc .pnav-mobile nav { display: flex; flex-direction: column; padding: 8px 0 18px; }
.cspc .pnav-mobile a { font-family: var(--font-display); font-size: 22px; letter-spacing: 0.06em; padding: 12px 0; border-bottom: 1px solid var(--line); }
.cspc .pnav-mobile a.btn { border: 1px solid var(--accent); margin-top: 14px; justify-content: center; }
@media (max-width: 1080px) {
.cspc .pnav-links { display: none; }
.cspc .pnav-burger { display: block; }
.cspc .pnav-mobile { display: block; }
}
(function () { var pnav = document.getElementById("pnav"); var burger = document.getElementById("burger"); var mobileMenu = document.getElementById("mobileMenu");
// Sombra del nav al hacer scroll window.addEventListener("scroll", function () { pnav.classList.toggle("scrolled", window.scrollY > 24); }, { passive: true });
// Menú hamburguesa (móvil)
function closeMenu() {
burger.classList.remove("open");
mobileMenu.classList.remove("open");
burger.setAttribute("aria-expanded", "false");
}
burger.addEventListener("click", function () {
var isOpen = burger.classList.toggle("open");
mobileMenu.classList.toggle("open", isOpen);
burger.setAttribute("aria-expanded", isOpen ? "true" : "false");
});
mobileMenu.querySelectorAll("a").forEach(function (a) {
a.addEventListener("click", closeMenu);
});
})();