/* =============================================================
   RESPONSIVE.CSS — Mobile First
   Breakpoints: sm=640 md=768 lg=1024 xl=1280
   ============================================================= */

/* ─── TABLET (max-width: 1024px) ─────────────────────────────── */
@media (max-width: 1024px) {
    .cd-hero__inner { grid-template-columns: 1fr; gap: var(--cd-space-lg); }
    .cd-hero__visual { display: none; }
    .cd-hero { padding: var(--cd-space-xl) 0; }
    .cd-hero__title { font-size: var(--cd-text-4xl); }

    .cd-stages__grid { grid-template-columns: repeat(3, 1fr); gap: var(--cd-space-md); }
    .cd-stage-card--featured { transform: none; }

    .cd-products-grid { grid-template-columns: repeat(2, 1fr); }
    .cd-posts-grid    { grid-template-columns: repeat(2, 1fr); }

    .cd-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--cd-space-lg); }

    .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; }

    .woocommerce div.product { grid-template-columns: 1fr 1fr; }

    .woocommerce-account .woocommerce { grid-template-columns: 200px 1fr; gap: var(--cd-space-lg); }

    .cd-grid-sidebar { grid-template-columns: 1fr; }
    .cd-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .cd-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ─── MOBILE (max-width: 768px) ──────────────────────────────── */
@media (max-width: 768px) {
    :root {
        --cd-space-xl: 3rem;
        --cd-space-2xl: 4rem;
    }

    .cd-container { padding-inline: var(--cd-space-md); }

    /* Header */
    .cd-nav {
        position: fixed;
        top: 72px; left: 0; right: 0; bottom: 0;
        background: rgba(255,255,255,0.98);
        backdrop-filter: blur(12px);
        flex-direction: column;
        justify-content: flex-start;
        padding: var(--cd-space-lg);
        transform: translateX(100%);
        transition: transform var(--cd-transition);
        z-index: 999;
        overflow-y: auto;
    }
    .cd-nav.is-open { transform: translateX(0); }
    .cd-nav__list { flex-direction: column; width: 100%; gap: var(--cd-space-xs); }
    .cd-nav__list li a {
        padding: 0.875rem var(--cd-space-md);
        font-size: var(--cd-text-base);
        border-radius: var(--cd-radius-sm);
        border-left: 3px solid transparent;
    }
    .cd-nav__list li a:hover { border-left-color: var(--cd-primary); }
    .cd-header__hamburger { display: flex; }
    .cd-header__actions .cd-btn--primary { display: none; }

    /* Hero */
    .cd-hero__title { font-size: var(--cd-text-3xl); }
    .cd-hero__actions { flex-direction: column; }
    .cd-hero__actions .cd-btn { width: 100%; justify-content: center; }
    .cd-hero__trust { gap: var(--cd-space-md); font-size: var(--cd-text-xs); }

    /* Stages */
    .cd-stages__grid { grid-template-columns: 1fr; }
    .cd-stage-card--featured { transform: none; }

    /* Grids */
    .cd-products-grid { grid-template-columns: 1fr; }
    .cd-posts-grid    { grid-template-columns: 1fr; }
    .cd-grid-2, .cd-grid-3, .cd-grid-4 { grid-template-columns: 1fr; }

    /* CTA Banner */
    .cd-cta-banner__inner { flex-direction: column; text-align: center; }
    .cd-cta-banner__title { font-size: var(--cd-text-2xl); }

    /* Footer */
    .cd-footer__grid { grid-template-columns: 1fr; gap: var(--cd-space-lg); }
    .cd-footer__legal { flex-direction: column; text-align: center; }
    .cd-footer__legal-nav { justify-content: center; flex-wrap: wrap; }

    /* WooCommerce */
    .woocommerce ul.products { grid-template-columns: 1fr !important; }

    .woocommerce div.product {
        grid-template-columns: 1fr;
        padding: var(--cd-space-md);
    }
    .woocommerce div.product .woocommerce-product-gallery { grid-column: 1; grid-row: 1; }
    .woocommerce div.product .summary { grid-column: 1; grid-row: 2; }
    .woocommerce div.product .summary .product_title { font-size: var(--cd-text-2xl); }

    /* Carrito */
    .woocommerce-cart-form__contents thead { display: none; }
    .woocommerce-cart-form__contents tr { display: block; padding: var(--cd-space-md) 0; border-bottom: 1px solid var(--cd-border-light); }
    .woocommerce-cart-form__contents td { display: block; border: none; padding: var(--cd-space-xs) 0; }
    .woocommerce-cart-form__contents td::before {
        content: attr(data-title) ": ";
        font-weight: 700;
        color: var(--cd-text);
        font-size: var(--cd-text-sm);
    }

    /* Mi cuenta */
    .woocommerce-account .woocommerce { grid-template-columns: 1fr; }
    .woocommerce-MyAccount-navigation { margin-bottom: var(--cd-space-md); }
    .woocommerce-MyAccount-navigation ul { display: flex; flex-wrap: wrap; gap: 0; }
    .woocommerce-MyAccount-navigation ul li { flex: 1 1 auto; min-width: 50%; }
    .woocommerce-MyAccount-navigation ul li a { border-bottom: 1px solid var(--cd-border-light); border-left: none; border-bottom-width: 3px; }
    .woocommerce-MyAccount-navigation ul li a:hover,
    .woocommerce-MyAccount-navigation ul li.is-active a { border-left-color: transparent; border-bottom-color: var(--cd-primary); }

    /* Sección header */
    .cd-section__title { font-size: var(--cd-text-2xl); }
}

/* ─── MOBILE PEQUEÑO (max-width: 480px) ──────────────────────── */
@media (max-width: 480px) {
    .cd-hero__title { font-size: var(--cd-text-2xl); }
    .cd-btn--lg { padding: 0.875rem 1.5rem; font-size: var(--cd-text-base); }
}
