/* =============================================
   SalvaOla — Diseño responsive
   ============================================= */

@media (max-width: 1024px) {
    .hero__inner {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }
    .hero__subtitle { margin: 0 auto 32px; }
    .hero__stats { justify-content: center; }
    .hero__actions { justify-content: center; }
    .hero__visual { order: -1; }
    .product-3d__stage { width: 320px; height: 320px; }

    .product-grid { grid-template-columns: 1fr; gap: 40px; }
    .steps {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .step-connector { display: none; }

    .benefits__layout { grid-template-columns: 1fr; gap: 40px; }
    .benefits__image-stack { height: 400px; }
    .benefits__floating-card { right: 0; }

    .specs__grid { grid-template-columns: repeat(2, 1fr); }
    .testimonials__slider { grid-template-columns: 1fr; }

    .cart-layout,
    .checkout-layout,
    .account-layout { grid-template-columns: 1fr; }

    .account-sidebar { position: static; }

    .footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    :root { --header-h: 64px; }

    .nav {
        position: fixed;
        top: var(--header-h);
        left: 0; right: 0;
        background: rgba(10, 10, 15, 0.98);
        backdrop-filter: blur(20px);
        padding: 24px;
        transform: translateY(-120%);
        opacity: 0;
        transition: transform 0.3s ease, opacity 0.3s ease;
        border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .nav.open {
        transform: translateY(0);
        opacity: 1;
    }
    .nav__list {
        flex-direction: column;
        gap: 0;
    }
    .nav__link {
        display: block;
        padding: 14px 0;
        font-size: 1rem;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }

    .nav-toggle { display: flex; }
    .nav-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
    .nav-toggle.active span:nth-child(2) { opacity: 0; }
    .nav-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

    .header__login-btn { display: none; }
    .header__user-btn { display: none; }
    .header__register-btn { display: inline-flex; padding: 8px 14px; font-size: 0.8rem; }
    .nav__auth-item { display: block; }

    .hero__title { font-size: 2.4rem; }
    .hero__stats { gap: 20px; }
    .hero__stat strong { font-size: 1.4rem; }
    .product-3d__stage { width: 260px; height: 260px; }

    .trust-bar__inner { gap: 20px; }
    .trust-bar__item { font-size: 0.8rem; }

    .product-section,
    .how-it-works,
    .benefits,
    .specs,
    .testimonials,
    .faq,
    .cta-final { padding: 80px 0; }

    .section-header { margin-bottom: 40px; }

    .specs__grid { grid-template-columns: 1fr; }

    .benefits__image-stack { height: 300px; }
    .benefits__img--back { height: 220px; }
    .benefits__img--front { height: 240px; }
    .benefits__floating-card {
        position: relative;
        bottom: auto; right: auto;
        margin-top: 20px;
        justify-content: center;
    }

    .form-row { grid-template-columns: 1fr; }

    .footer__inner { grid-template-columns: 1fr; gap: 32px; }

    .cta-final__amount { font-size: 2.2rem; }

    .cursor-glow { display: none; }
}

@media (max-width: 480px) {
    .container { padding: 0 16px; }
    .hero__actions { flex-direction: column; }
    .hero__actions .btn { width: 100%; }
    .product-gallery__thumbs { gap: 8px; }
    .product-gallery__thumb { width: 56px; height: 56px; }
    .auth-card { padding: 28px 20px; }
    .account-panel { padding: 24px 20px; }
    .thank-you__card { padding: 40px 24px; }
}