/* ============================================================
   RESPONSIVE.CSS - CERASUS PROJECTS
   Breakpoints:
   1280px+  → Desktop grande
   1024px – 1279px → Desktop / laptop
   768px  – 1023px → Tablet
   480px  – 767px  → Móvil
   360px  – 479px  → Móvil pequeño
   < 360px          → Muy pequeño (mínimo soporte)
   ============================================================ */

/* ── DESKTOP GRANDE (1280px+) ── */
@media (min-width:1280px) and (hover:hover) {
    .product-card:hover { transform:translateY(-5px); box-shadow:var(--sombra-md); }
    .product-card { box-shadow:var(--sombra-sm); transition:all var(--transicion-base); }
}

/* ── DESKTOP MEDIO (1024px – 1199px): ajustes finos ── */
@media (max-width:1199px) {
    .product-grid { grid-template-columns:repeat(4,1fr); gap:var(--espacio-md); }
    .subcategories { gap:var(--espacio-xl); }
}

/* ══════════════════════════════════════════════════════════
   TABLET  (max-width: 1023px)
   ══════════════════════════════════════════════════════════ */
@media (max-width:1023px) {

    /* ── Header ── */
    .logo-text { display:none; }
    .search-bar { margin:0 var(--espacio-md); }

    /* ── Navegación ── */
    .main-nav {
        gap:var(--espacio-md);
        overflow-x:auto;
        justify-content:flex-start;
        padding:0 var(--espacio-md);
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
    }
    .main-nav::-webkit-scrollbar { display:none; }
    .main-nav a { font-size:var(--texto-xs); white-space:nowrap; }

    /* ── Subcategorías ── */
    .subcategories {
        gap:var(--espacio-lg);
        justify-content:flex-start;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
        padding:var(--espacio-md) var(--espacio-lg);
        scrollbar-width:none;
        margin-bottom:var(--espacio-xl);
    }
    .subcategories::-webkit-scrollbar { display:none; }
    .subcat-item { flex-shrink:0; }
    .subcat-img { width:72px; height:72px; }
    .subcat-name { font-size:var(--texto-xs); }

    /* ── Grid de productos ── */
    .product-grid { grid-template-columns:repeat(3,1fr); gap:var(--espacio-md); }

    /* ── Detalle de producto ── */
    .product-detail { grid-template-columns:1fr; gap:var(--espacio-xl); padding:var(--espacio-lg); }
    .gallery { position:static; }

    /* ── Carrito ── */
    .cart-layout { grid-template-columns:1fr; }
    .cart-summary { position:static; margin-top:var(--espacio-xl); }

    /* ── Checkout ── */
    .checkout-layout { grid-template-columns:1fr; }

    /* ── Perfil ── */
    .profile-page { grid-template-columns:1fr; gap:var(--espacio-lg); padding:var(--espacio-xl) var(--espacio-lg); }
    .profile-menu {
        position:static;
        display:flex;
        flex-direction:row;
        flex-wrap:nowrap;
        padding:0;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
        border-radius:var(--radio-md) var(--radio-md) 0 0;
        border-bottom:var(--borde-fino);
    }
    .profile-menu::-webkit-scrollbar { display:none; }
    .profile-menu h3 { display:none; }
    .profile-menu-item {
        white-space:nowrap;
        flex-shrink:0;
        border-radius:0;
        padding:var(--espacio-md) var(--espacio-lg);
        font-size:var(--texto-xs);
    }
    .logout-btn {
        white-space:nowrap;
        flex-shrink:0;
        border-top:none;
        border-left:var(--borde-fino);
        padding:var(--espacio-md) var(--espacio-lg);
        margin-top:0;
        font-size:var(--texto-xs);
    }
    .favorites-grid { grid-template-columns:repeat(2,1fr); }

    /* ── Filtros ── */
    .filters-panel.active { grid-template-columns:repeat(2,1fr); }

    /* ── Footer ── */
    .footer-content { grid-template-columns:repeat(2,1fr); gap:var(--espacio-xl); }
}

/* ══════════════════════════════════════════════════════════
   MÓVIL  (max-width: 767px)
   ══════════════════════════════════════════════════════════ */
@media (max-width:767px) {

    /* ── Header ── */
    .header-top {
        flex-wrap:wrap;
        gap:var(--espacio-sm);
        padding:var(--espacio-sm) var(--espacio-md);
        height:auto;
    }
    .logo { order:1; }
    .header-icons { order:2; gap:var(--espacio-sm); }
    .search-bar {
        order:3;
        width:100%;
        max-width:100%;
        margin:0;
    }
    .search-bar input { font-size:16px; } /* evita zoom automático en iOS */

    /* ── Navegación ── */
    .main-nav {
        justify-content:flex-start;
        overflow-x:auto;
        gap:var(--espacio-sm);
        padding:0 var(--espacio-md);
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
        height:44px;
    }
    .main-nav::-webkit-scrollbar { display:none; }
    .main-nav a { white-space:nowrap; padding:10px var(--espacio-sm); font-size:var(--texto-xs); }

    /* ── Hero ── */
    .hero { height:220px; margin-bottom:var(--espacio-xl); }
    .hero-overlay h1 { font-size:var(--texto-xl); letter-spacing:1px; }
    .hero-overlay p { font-size:var(--texto-sm); margin-bottom:var(--espacio-lg); }
    .cta-btn { padding:12px 28px; font-size:var(--texto-xs); letter-spacing:1.5px; }

    /* ── Subcategorías ── */
    .subcategories {
        justify-content:flex-start;
        overflow-x:auto;
        padding:var(--espacio-md);
        gap:var(--espacio-lg);
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
        margin-bottom:var(--espacio-lg);
    }
    .subcategories::-webkit-scrollbar { display:none; }
    .subcat-item { flex-shrink:0; }
    .subcat-img { width:64px; height:64px; }
    .subcat-name { font-size:var(--texto-xs); }

    /* ── Secciones ── */
    .section { padding:0 var(--espacio-md); }
    .section-title { font-size:var(--texto-lg); margin-bottom:var(--espacio-lg); }
    .breadcrumb { padding:var(--espacio-sm) var(--espacio-md); font-size:var(--texto-xs); }

    /* ── Grid de productos ── */
    .product-grid { grid-template-columns:repeat(2,1fr); gap:var(--espacio-sm); }
    .card-brand { font-size:var(--texto-xs); }
    .card-name { font-size:var(--texto-sm); line-height:1.3; }
    .card-info { padding:6px 0; }
    .fav-btn { width:32px; height:32px; top:8px; right:8px; }
    .fav-btn svg { width:15px; height:15px; }

    /* ── Barra de filtros ── */
    .filter-bar { flex-wrap:wrap; gap:var(--espacio-sm); }
    .filter-btn, .sort-select { font-size:var(--texto-xs); padding:7px 12px; }
    .filters-panel.active { grid-template-columns:1fr; }

    /* ── Detalle de producto ── */
    .product-detail { grid-template-columns:1fr; gap:var(--espacio-lg); padding:var(--espacio-md); }
    .gallery { grid-template-columns:1fr; }
    .gallery-thumbs {
        flex-direction:row;
        overflow-x:auto;
        order:2;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
        gap:var(--espacio-sm);
        padding-bottom:4px;
    }
    .gallery-thumbs::-webkit-scrollbar { display:none; }
    .thumb { width:58px; height:72px; flex-shrink:0; }
    .gallery-main { order:1; }
    .detail-brand { font-size:var(--texto-sm); }
    .detail-name { font-size:var(--texto-md); }
    .detail-prices { flex-wrap:wrap; gap:var(--espacio-sm); margin-bottom:var(--espacio-md); }
    .color-circles { flex-wrap:wrap; gap:var(--espacio-sm); }
    .size-options { flex-wrap:wrap; gap:var(--espacio-sm); }
    .size-btn { width:44px; height:44px; font-size:var(--texto-xs); }
    .btn-primary { padding:14px; font-size:var(--texto-sm); letter-spacing:1.5px; }
    .btn-whatsapp { padding:13px; font-size:var(--texto-sm); }
    .related-products { padding:var(--espacio-xl) var(--espacio-md); }
    .related-products h2 { font-size:var(--texto-lg); }

    /* ── Carrito ── */
    .cart-page { padding:var(--espacio-lg) var(--espacio-md); }
    .cart-page h1 { font-size:var(--texto-xl); margin-bottom:var(--espacio-lg); }
    .cart-item { grid-template-columns:80px 1fr; gap:var(--espacio-md); }
    .cart-item-img { width:80px; height:123px; }
    .cart-item-actions {
        grid-column:1 / -1;
        text-align:left;
        display:flex;
        justify-content:space-between;
        align-items:center;
    }
    .cart-summary { padding:var(--espacio-lg); }
    .cart-checkout-btn { padding:14px; font-size:var(--texto-sm); letter-spacing:1.5px; }

    /* ── Checkout ── */
    .checkout-page { padding:var(--espacio-lg) var(--espacio-md); }
    .steps-indicator { gap:var(--espacio-lg); }
    .step span { display:none; }
    .form-row { grid-template-columns:1fr; }
    .checkout-form { padding:var(--espacio-lg); }
    .login-invite { flex-direction:column; gap:var(--espacio-sm); text-align:center; }

    /* ── Perfil ── */
    .profile-page { padding:0; gap:0; }
    .profile-content { padding:var(--espacio-lg) var(--espacio-md); }
    .profile-content h2 { font-size:var(--texto-lg); }
    .info-card { padding:var(--espacio-lg); }
    .info-row { flex-direction:column; gap:4px; padding:var(--espacio-sm) 0; }
    .favorites-grid { grid-template-columns:repeat(2,1fr); gap:var(--espacio-sm); }
    .fav-btn-cart, .fav-btn-wa { padding:9px 6px; font-size:9px; letter-spacing:0.8px; }

    /* ── Auth / Login ── */
    .auth-page { margin:var(--espacio-xl) auto; padding:0 var(--espacio-md); }
    .auth-card { padding:var(--espacio-xl) var(--espacio-lg); }
    .auth-card h1 { font-size:var(--texto-lg); }

    /* ── Footer ── */
    .footer-content { grid-template-columns:1fr; gap:var(--espacio-lg); padding:var(--espacio-2xl) var(--espacio-lg); }

    /* ── Modal ── */
    .modal-box { width:92%; padding:var(--espacio-xl); }

    /* ── Notificaciones: abajo en móvil ── */
    .notification {
        top:auto;
        bottom:16px;
        right:var(--espacio-md);
        left:var(--espacio-md);
        max-width:calc(100% - var(--espacio-2xl));
        text-align:center;
    }
}

/* ══════════════════════════════════════════════════════════
   MÓVIL PEQUEÑO  (max-width: 639px)
   ══════════════════════════════════════════════════════════ */
@media (max-width:639px) {

    /* ── Header ── */
    .logo img { height:42px; max-width:150px; }
    .icon-link span { display:none; }

    /* ── Hero ── */
    .hero { height:180px; }
    .hero-overlay h1 { font-size:var(--texto-lg); }
    .hero-overlay p { display:none; }
    .cta-btn { padding:10px 22px; }

    /* ── Subcategorías ── */
    .subcat-img { width:58px; height:58px; }

    /* ── Grid de productos ── */
    .product-grid { grid-template-columns:repeat(2,1fr); gap:6px; }
    .card-brand { font-size:var(--texto-xs); }
    .card-name { font-size:var(--texto-sm); }
    .card-prices { flex-direction:column; gap:2px; align-items:flex-start; }
    .card-info { padding:var(--espacio-xs) 0; text-align:left; }
    .price-original, .price-discount, .price-savings { text-align:left; }

    /* ── Perfil ── */
    .profile-menu-item { padding:var(--espacio-sm) var(--espacio-md); font-size:var(--texto-xs); }
    .favorites-grid { grid-template-columns:1fr; }
    .fav-card-actions { flex-direction:row; }
    .fav-btn-cart, .fav-btn-wa { flex:1; padding:11px 8px; font-size:var(--texto-xs); letter-spacing:0.5px; }

    /* ── Detalle de producto ── */
    .product-detail { padding:var(--espacio-sm); }
    .size-btn { width:42px; height:42px; }

    /* ── Modal ── */
    .modal-box { width:95%; padding:var(--espacio-lg); }
    .modal-buttons { flex-direction:column; gap:var(--espacio-sm); }

    /* ── Secciones ── */
    .section { padding:0 var(--espacio-sm); }
    .section-title { font-size:var(--texto-md); }
}

/* ══════════════════════════════════════════════════════════
   MÓVIL MUY PEQUEÑO  (max-width: 374px)
   ══════════════════════════════════════════════════════════ */
@media (max-width:374px) {
    .product-grid { grid-template-columns:repeat(2,1fr); gap:4px; }
    .logo img { height:36px; max-width:120px; }
    .fav-btn-cart, .fav-btn-wa { padding:8px 4px; font-size:9px; letter-spacing:0; }
    .size-btn { width:38px; height:38px; font-size:9px; }
    .auth-card { padding:var(--espacio-lg); }
    .subcat-img { width:50px; height:50px; }
    .hero { height:150px; }
    .hero-overlay h1 { font-size:var(--texto-md); }
    .steps-indicator { gap:var(--espacio-sm); }
}