/* ============================================================
   RESPONSIVE — navegación móvil + ajustes finos
   ============================================================ */

/* Burger button (hidden on desktop) */
.nav-burger {
    display: none;
    width: 42px; height: 42px;
    border: 1px solid var(--hairline-strong);
    background: transparent; border-radius: 50%;
    cursor: pointer; padding: 0;
    align-items: center; justify-content: center;
    color: var(--on-light);
}
.nav-burger span { position: relative; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.3s var(--ease), opacity 0.2s; }
.nav-burger span::before, .nav-burger span::after { content: ''; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.3s var(--ease); }
.nav-burger span::before { top: -6px; }
.nav-burger span::after { top: 6px; }
body.menu-open .nav-burger span { background: transparent; }
body.menu-open .nav-burger span::before { transform: translateY(6px) rotate(45deg); }
body.menu-open .nav-burger span::after { transform: translateY(-6px) rotate(-45deg); }

/* Mobile drawer */
.nav-drawer {
    position: fixed; inset: 0; z-index: 1090;
    background: color-mix(in srgb, var(--ink) 96%, transparent);
    backdrop-filter: blur(10px);
    display: flex; flex-direction: column; justify-content: center; gap: 0.4rem;
    padding: clamp(1.5rem, 8vw, 4rem);
    transform: translateY(-100%);
    transition: transform 0.55s var(--cinema);
    color: var(--on-dark);
}
body.menu-open .nav-drawer { transform: translateY(0); }
.nav-drawer a {
    font-family: var(--f-display); font-size: clamp(2rem, 9vw, 3.2rem);
    color: var(--on-dark); text-decoration: none; letter-spacing: -0.03em; line-height: 1.15;
    display: flex; align-items: baseline; gap: 1rem; padding: 0.3rem 0;
    opacity: 0; transform: translateY(18px); transition: opacity 0.4s var(--ease), transform 0.5s var(--cinema), color 0.2s;
}
.nav-drawer a .ix { font-family: var(--f-mono); font-size: 0.7rem; color: var(--accent-lt); letter-spacing: 0.16em; }
.nav-drawer a:hover, .nav-drawer a:focus { color: var(--accent-lt); }
body.menu-open .nav-drawer a { opacity: 1; transform: none; }
body.menu-open .nav-drawer a:nth-child(1) { transition-delay: 0.10s; }
body.menu-open .nav-drawer a:nth-child(2) { transition-delay: 0.16s; }
body.menu-open .nav-drawer a:nth-child(3) { transition-delay: 0.22s; }
body.menu-open .nav-drawer a:nth-child(4) { transition-delay: 0.28s; }
body.menu-open .nav-drawer a:nth-child(5) { transition-delay: 0.34s; }
body.menu-open .nav-drawer a:nth-child(6) { transition-delay: 0.40s; }
.nav-drawer-foot { margin-top: 2rem; display: flex; gap: 1rem; align-items: center; opacity: 0; transition: opacity 0.5s ease 0.46s; }
body.menu-open .nav-drawer-foot { opacity: 1; }
.nav-drawer-foot a { font-family: var(--f-mono); font-size: 0.8rem; color: var(--on-dark-mut); }

@media (max-width: 860px) {
    .nav-links { display: none; }
    .nav .nav-cta { display: none; }
    .nav-burger { display: inline-flex; }
    .nav-burger { color: var(--on-light); }
}
@media (min-width: 861px) { .nav-drawer { display: none; } }

/* When menu open, lock scroll */
body.menu-open { overflow: hidden; }

/* ── Fine responsive polish ──────────────────────────── */
@media (max-width: 600px) {
    :root { --pad-section: 4.5rem; --gutter: 1rem; }
    .wrap { padding-inline: 1.2rem; }
    .hero-title { letter-spacing: -0.04em; }
    .sec-head .title { font-size: clamp(2rem, 9vw, 2.8rem); }
    .stats .wrap { grid-template-columns: 1fr 1fr; }
    .guardian-grid { grid-template-columns: 1fr 1fr; }
    .btn { padding: 0.85rem 1.4rem; font-size: 0.88rem; }
    /* ensure tap targets ≥ 44px */
    .nav-cta, .icon-btn, .btn { min-height: 44px; }
    .hero-role { font-size: 0.68rem; }
    .price-amount .num { font-size: 2.2rem; }
}
@media (max-width: 380px) {
    .guardian-grid { grid-template-columns: 1fr; }
    .stats .wrap { grid-template-columns: 1fr; }
}