/* ============================================================ CHESTER DEPORTES — Responsive Final v2 Capa definitiva de diseño responsive profesional Cargar en después de chester.css ============================================================ */ /* ── 1. FLUID TOKENS ──────────────────────────────────── */ :root { --logo-size-mobile: 52px; --logo-size-desktop: 80px; --text-xs: clamp(0.625rem, 0.5vw + 0.5rem, 0.75rem); --text-sm: clamp(0.75rem, 0.8vw + 0.5rem, 0.875rem); --text-base: clamp(0.875rem, 1vw + 0.5rem, 1rem); --text-lg: clamp(1rem, 1.5vw + 0.5rem, 1.25rem); --text-xl: clamp(1.25rem, 2vw + 0.5rem, 1.5rem); --text-2xl: clamp(1.5rem, 3vw + 0.5rem, 2rem); --text-3xl: clamp(2rem, 5vw + 0.5rem, 3rem); --radius-sm: clamp(6px, 0.8vw, 10px); --radius-md: clamp(10px, 1.2vw, 14px); --radius-lg: clamp(14px, 1.8vw, 18px); --space-xs: clamp(4px, 0.5vw, 8px); --space-sm: clamp(8px, 1vw, 12px); --space-md: clamp(12px, 1.5vw, 16px); --space-lg: clamp(16px, 2vw, 24px); --space-xl: clamp(20px, 3vw, 32px); --touch-target: clamp(44px, 5vw, 48px); } /* ── 2. SAFE AREAS ────────────────────────────────────── */ @supports (padding: env(safe-area-inset-bottom)) { body { padding-bottom: calc(74px + env(safe-area-inset-bottom)); } #cartdr { padding-bottom: env(safe-area-inset-bottom); } .adm-topbar { padding-left: calc(20px + env(safe-area-inset-left)); padding-right: calc(20px + env(safe-area-inset-right)); } } /* ── 3. GLOBAL TOUCH / OVERFLOW ───────────────────────── */ img, svg { max-width: 100%; height: auto; } html, body { overflow-x: hidden; } /* ── 3b. EMOJI FONT FALLBACK ────────────────────────────── */ body, .cbt, .pcard, .pcard-nm, .hero-h1, .hero-sub, .hero-eye, .pdv-ov, .mbb-btn, .mbb-ico, .mbb-lbl, .cart-fab, #toast, #wa-float { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', sans-serif; } /* ── 4. TOUCH TARGETS — mínimo 44x44 ──────────────────── */ button, a, .cbt, .ccls, #ckbtn, #btnIngresar, .szb, .pdv-sz-btn, .pdv-add, .pdv-close, .pdv-qbtn, .qbtn, .mcls, #addbtn, .asub, .gbtn-alt, .atab, .hero-dot, .lb-close, .lb-arrow, .footer-btn, .mob-abtn, .mob-cbtn, .adm-sb-item, .adm-sb-grp-hdr, .adm-btn, .adm-tab { min-width: var(--touch-target); min-height: var(--touch-target); } .cbt, .szb, .pdv-sz-btn { min-width: auto; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } .cqrow .cqb { min-width: 28px; min-height: 28px; } .guesttab { min-height: 44px; } .hero-dot { min-width: 20px; min-height: 4px; } /* Espaciado entre elementos clickeables */ .mob-row, #cats, .pdv-sz-grid, .pdv-qrow, .adm-sb-nav, .adm-nav, .stats-grid { gap: 8px; } /* ── 5. HEADER ─────────────────────────────────────────── */ .header-mobile { display: none; } .header-desktop { display: none; } #nav-menu { display: none; } /* Logo sizes */ .logo img { width: 44px; height: 44px; } /* Free shipping bar — hide long text on mobile */ .free-ship-text-long { display: inline; } @media (max-width: 768px) { .free-ship-text-long { display: none; } } /* ── 6. HERO ────────────────────────────────────────────── */ /* Hero responsive se maneja desde chester.css (más completo y sin !important) */ /* ── 7. PRODUCT GRID ───────────────────────────────────── */ @media (min-width: 1025px) { #pgrid { grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 1200px; } } @media (min-width: 769px) and (max-width: 1024px) { #pgrid { grid-template-columns: repeat(3, 1fr); gap: 12px; } } @media (min-width: 401px) and (max-width: 768px) { #pgrid { grid-template-columns: repeat(2, 1fr); gap: 8px; } } @media (max-width: 400px) { #pgrid { grid-template-columns: 1fr; gap: 8px; } } /* Card max-width */ .pcard { max-width: 100%; } /* ── 8. PRODUCT CARDS ───────────────────────────────────── */ .pcard-img { aspect-ratio: 1/1; height: auto; } /* Text truncate to 2 lines */ .pcard-nm { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } /* Price min size on mobile */ @media (max-width: 768px) { .pcard-pr { font-size: clamp(16px, 4vw, 20px) !important; } .pcard-arr { display: none; } } /* Buy button full-width on mobile card */ .pcard-add-btn { display: none; } @media (max-width: 768px) { .pcard-add-btn { display: flex; width: 100%; padding: 12px; justify-content: center; margin-top: 8px; border-radius: 10px; background: var(--ora); color: #fff; font-weight: 800; font-size: 14px; letter-spacing: 2px; border: none; cursor: pointer; min-height: 44px; align-items: center; } } /* ── 9. MODALS (cart, product, auth) ───────────────────── */ @media (max-width: 768px) { #cartdr { width: 100vw !important; max-width: 100vw !important; } #mbox { max-width: 90vw !important; max-height: 90vh; overflow-y: auto; } .pdv-ov { max-height: 90vh; overflow-y: auto; } #authov .awrap { max-width: 90vw; } .abox { max-width: 100%; max-height: 90vh; overflow-y: auto; } /* Close buttons 44x44 */ .ccls { width: 44px; height: 44px; font-size: 20px; } .mcls { width: 44px; height: 44px; font-size: 20px; } .acls { width: 44px; height: 44px; font-size: 20px; top: 8px; right: 8px; } .pdv-close { min-height: 44px; padding: 10px 18px; } /* Padding */ #mbody { padding: 20px; } .chdr { padding: 20px; } #clist { padding: 20px; } .cftr { padding: 20px; } .pdv-content { padding: 20px; } .atop { padding: 20px 20px 0; } .abody { padding: 0 20px 20px; } .guestbox { padding: 14px 20px; } } @media (min-width: 769px) { #mbody { padding: 30px; } .chdr { padding: 22px; } #clist { padding: 22px; } .cftr { padding: 22px; } .pdv-content { padding: 32px; } .atop { padding: 28px 28px 0; } .abody { padding: 0 28px 28px; } } /* ── 10. FOOTER ─────────────────────────────────────────── */ @media (max-width: 768px) { .footer-desktop { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); } } /* ── 11. TYPOGRAPHY ─────────────────────────────────────── */ body { font-size: 16px; line-height: 1.6; } .pcard-nm { line-height: 1.4; } /* hero-h1/hero-sub line-height defined in chester.css */ .pdv-ds { line-height: 1.7; } #mds { line-height: 1.6; } .guesthelp { line-height: 1.6; } /* Headings scale with clamp */ h1, h2, h3, h4, h5, h6 { line-height: 1.2; } /* ── 12. TABLES — horizontal scroll on mobile ──────────── */ .adm-tw { overflow-x: auto; -webkit-overflow-scrolling: touch; } .adm-t { min-width: 600px; } /* ── 13. LARGESCREEN (1200px+) ──────────────────────────── */ /* ── 14. TABLET (769-1024px) ────────────────────────────── */ @media (min-width: 769px) and (max-width: 1024px) { .hero-content { max-width: 600px; } } /* ── MOBILE BOTTOM NAV BAR ────────────────────────────────── */ .mob-bottom-bar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:200;background:var(--navbg,var(--bg));border-top:1px solid var(--bord);padding:4px 0 env(safe-area-inset-bottom,4px);justify-content:space-around;align-items:center;box-shadow:0 -2px 12px rgba(0,0,0,.08);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);overflow:visible} .mbb-btn{display:flex;flex-direction:column;align-items:center;gap:1px;background:none;border:none;cursor:pointer;padding:4px 8px;color:var(--txt3);transition:color .15s;position:relative;min-width:56px} .mbb-btn:active{color:var(--ora)} .mbb-btn.on{color:var(--ora)} .mbb-ico{font-size:20px;line-height:1.2} .mbb-lbl{font-size:9px;font-family:'DM Sans',sans-serif;white-space:nowrap} .mbb-badge{position:absolute;top:0;right:2px;background:var(--ora);color:#fff;font-size:9px;font-weight:700;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 5px;font-family:'DM Sans',sans-serif;pointer-events:none} /* ── BOTTOM NAV CART FAB (notched) ───────────────────────── */ .nav-item-cart{-webkit-tap-highlight-color:transparent} .nav-item-cart:active{color:var(--ora)} .nav-item-cart.on{color:var(--ora)} .nav-cart-circle{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,107,0,.1);transition:all .3s cubic-bezier(.34,1.56,.64,1);position:relative} .nav-cart-icon{font-size:22px;line-height:1.2;transition:transform .3s} .nav-cart-badge{position:absolute;top:-2px;right:-4px;background:#FF3B30;color:#fff;font-size:10px;font-weight:800;min-width:18px;height:18px;border-radius:9px;align-items:center;justify-content:center;padding:0 5px;display:none;border:2px solid var(--bg2);box-shadow:0 2px 8px rgba(255,59,48,.4);line-height:1;z-index:2;font-family:'DM Sans',sans-serif;pointer-events:none} .nav-item-cart.has-items .nav-cart-circle{width:56px;height:56px;background:linear-gradient(135deg,#FF6B00,#EF9F27);transform:translateY(-22px);box-shadow:0 4px 16px rgba(255,107,0,.5),0 0 0 4px var(--bg2),0 0 0 5px rgba(255,107,0,.2);animation:cart-pulse 2.5s ease-in-out infinite} .nav-item-cart.has-items .nav-cart-icon{font-size:28px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))} .nav-item-cart.has-items .mbb-lbl{color:var(--ora);font-weight:700} .nav-item-cart.has-items .nav-cart-badge{display:flex;animation:badge-bounce .5s cubic-bezier(.68,-0.55,.27,1.55);top:-28px;right:50%;transform:translateX(28px)} .nav-item-cart:active .nav-cart-circle{transform:scale(.92)} .nav-item-cart.has-items:active .nav-cart-circle{transform:translateY(-22px) scale(.94)} .nav-item-cart.added{animation:cart-shake .5s ease} @keyframes cart-pulse{0%,100%{box-shadow:0 4px 16px rgba(255,107,0,.5),0 0 0 4px var(--bg2),0 0 0 5px rgba(255,107,0,.2)}50%{box-shadow:0 6px 20px rgba(255,107,0,.7),0 0 0 4px var(--bg2),0 0 0 8px rgba(255,107,0,.15)}} @keyframes badge-bounce{0%{transform:translateX(28px) scale(0);opacity:0}50%{transform:translateX(28px) scale(1.3);opacity:1}100%{transform:translateX(28px) scale(1);opacity:1}} @keyframes cart-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px) rotate(-5deg)}75%{transform:translateX(3px) rotate(5deg)}} @media(max-width:380px){.nav-item-cart.has-items .nav-cart-circle{width:48px;height:48px;transform:translateY(-18px)}.nav-item-cart.has-items .nav-cart-icon{font-size:24px}.nav-item-cart.has-items .nav-cart-badge{top:-24px;transform:translateX(22px);font-size:9px;min-width:16px;height:16px;padding:1px 5px}} /* ── 15. MOBILE (max-width: 768px) ──────────────────────── */ @media (max-width: 768px) { /* Mobile: bottom nav bar estilo ML */ .mob-bottom-bar { display: flex; } body { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); } .wa-float { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); } .ig-float { display: none !important; } /* Footer logo más dominante */ .footer-brand .logo-img { width: 56px; height: 56px; } #footer-brand-name { font-size: 22px; letter-spacing: 3px; } /* Header: ocultar nav desktop, mostrar header mobile simplificado */ #nav { display: none !important; } .header-mobile { display: block; position: sticky; top: 0; z-index: 100; background: var(--bg2); padding: 12px 14px; box-shadow: 0 2px 12px rgba(0,0,0,0.2); border-bottom: 1px solid rgba(255,107,0,0.1); } .header-content { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 10px; width: 100%; } .header-logo-wrapper { width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,0.04); display: flex; align-items: center; justify-content: center; padding: 4px; cursor: pointer; transition: all 0.2s; } .header-logo-wrapper:active { background: rgba(255,107,0,0.15); transform: scale(0.95); } .header-logo-img { width: 100%; height: 100%; object-fit: contain; } .header-search-mobile { position: relative; width: 100%; } .header-search-mobile input { width: 100%; padding: 11px 14px; border-radius: 100px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,107,0,0.15); color: var(--txt1); font-size: 13px; font-family: inherit; transition: all 0.2s; box-sizing: border-box; } .header-search-mobile input:focus { outline: none; border-color: var(--ora); background: rgba(255,255,255,0.08); box-shadow: 0 0 0 3px rgba(255,107,0,0.15); } .header-search-mobile input::placeholder { color: rgba(255,255,255,0.4); font-size: 13px; } .theme-toggle { width: 44px; height: 44px; border-radius: 12px; background: var(--bg3); border: 1px solid var(--bord); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 22px; transition: all 0.2s; padding: 0; color: var(--txt1); } .theme-toggle:active { transform: scale(0.95); background: rgba(255,107,0,0.15); border-color: var(--ora); } .theme-icon { line-height: 1; display: block; } /* Catalog section header */ .catalogo-header-marker { padding: 10px 16px; display: flex; align-items: center; gap: 8px; } #seccion-catalogo { min-height: 1px; } /* Free shipping bar hide long text */ .free-ship-text-long { display: none; } /* Categorías: horizontal scroll */ #cats { overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; -webkit-overflow-scrolling: touch; } .cbt { flex-shrink: 0; } /* Hero — manejado en chester.css */ /* Grid */ #pgrid { gap: 8px; padding: 12px 10px 30px; } /* Product cards */ .pcard { border-radius: 12px; } .pcard-img { aspect-ratio: 1/1; height: auto; } .pcard-body { padding: 8px 10px; } .pcard-nm { font-size: 14px; -webkit-line-clamp: 2; } .pcard-pr { font-size: 16px !important; } .pcard-arr { display: none; } .pcard-row { flex-wrap: wrap; gap: 4px; } .pcard-cat { font-size: 8px; letter-spacing: 2px; } /* Badges */ .tbadge { font-size: 9px; padding: 3px 8px; letter-spacing: 2px; top: 6px; right: 6px; } .tbadge.agotado-left { font-size: 9px; padding: 3px 8px; top: 6px; left: 6px; } .b-low { font-size: 8px; padding: 2px 6px; bottom: 6px; left: 6px; } /* Modals */ #cartdr { width: 100vw !important; } #mbox { max-width: 90vw !important; max-height: 90vh; overflow-y: auto; } .ccls { width: 44px; height: 44px; font-size: 20px; } .mcls { width: 44px; height: 44px; font-size: 20px; } .acls { width: 44px; height: 44px; font-size: 20px; top: 8px; right: 8px; } #mbody { padding: 20px; } .chdr { padding: 20px; } #clist { padding: 20px; } .cftr { padding: 20px; } #ckbtn { padding: 14px; font-size: 15px; min-height: 48px; } /* Product detail */ .pdv-content { padding: 14px; } .pdv-close { padding: 10px 16px; font-size: 12px; margin-bottom: 10px; min-height: 44px; } .pdv-grid { gap: 12px; } .pdv-thumb { width: 50px; height: 50px; border-radius: 8px; font-size: 20px; } .pdv-main-wrap { border-radius: 12px; } .pdv-arrow { width: 34px; height: 34px; font-size: 20px; } #pdv-nm { font-size: 20px; } .pdv-prrow .pr-act { font-size: 26px; } .pdv-prrow .pr-old { font-size: 13px; } .pdv-sz-btn { padding: 8px 12px; font-size: 13px; min-width: 48px; min-height: 44px; } .pdv-add { padding: 14px; font-size: 15px; min-height: 48px; } .pdv-buy { padding: 10px; font-size: 13px; min-height: 40px; } .pdv-ship { padding: 12px; font-size: 12px; } /* Cart items */ .citem { padding: 12px; gap: 8px; } .citem-img { width: 48px; height: 48px; border-radius: 8px; font-size: 22px; } .citem-nm { font-size: 14px; } .citem-pr { font-size: 13px; } .cqb { width: 20px; height: 20px; font-size: 13px; } .cqv { font-size: 13px; min-width: 16px; } .ctval { font-size: 22px; } /* Auth modal */ .abox { border-radius: 18px; } .atop { padding: 20px 20px 0; } .abody { padding: 0 20px 20px; } .ainp { padding: 12px 14px; font-size: 14px; min-height: 44px; } .asub { padding: 14px; font-size: 15px; min-height: 48px; } /* Footer */ #site-footer { padding: 20px 14px; } .footer-inner { grid-template-columns: 1fr; text-align: center; gap: 16px; } .footer-btn { padding: 8px 14px; font-size: 12px; min-height: 44px; } .footer-btn svg { width: 16px; height: 16px; } .footer-links { justify-content: center; gap: 8px; } .footer-links a { min-height: 44px; } #footer-brand-name { font-size: 18px; } #footer-slogan { font-size: 12px; } /* Toast */ #toast { bottom: calc(90px + env(safe-area-inset-bottom, 0px)); max-width: 92vw; font-size: 14px; padding: 12px 18px; } /* Lightbox */ .lb-arrow { width: 38px; height: 38px; font-size: 22px; } .lb-close { width: 38px; height: 38px; font-size: 18px; top: 12px; right: 12px; } /* Post-compra */ #grc-card { padding: 28px 20px !important; } #grc-card h2 { font-size: 26px !important; } /* Landscape override */ @media (max-height: 480px) and (orientation: landscape) { #hero { height: 220px !important; } #nav { height: 52px; } } } /* ── 16. MOBILE CHICO (≤400px) ──────────────────────────── */ @media (max-width: 400px) { /* Header */ .logo img { max-width: 90px; height: auto; } .logo-ch { font-size: 18px; } #tbtn { width: 34px; height: 34px; font-size: 15px; } /* Grid 1 column */ #pgrid { grid-template-columns: 1fr; gap: 8px; padding: 10px 8px 24px; } /* Cards */ .pcard { border-radius: 10px; } .pcard-img { aspect-ratio: 1/1; height: auto; } .pcard-body { padding: 8px; } .pcard-nm { font-size: 14px; } .pcard-pr { font-size: 16px !important; } .pcard-cat { font-size: 7px; letter-spacing: 1.5px; } /* Hero */ #hero { height: 300px !important; } /* Categories */ .cbt { font-size: 11px; padding: 6px 10px; min-height: 38px; } /* Categorías: less gap */ #cats { gap: 4px; } .cbt { font-size: 10px; padding: 5px 9px; } /* Footer */ #site-footer { padding: 16px 10px; } .footer-inner { gap: 12px; } #footer-brand-name { font-size: 16px; } .footer-btn { padding: 6px 10px; font-size: 11px; } .footer-btn svg { width: 14px; height: 14px; } /* Modals */ #mbody { padding: 16px; } .chdr { padding: 16px; } #clist { padding: 16px; } .cftr { padding: 16px; } #ckbtn { padding: 12px; font-size: 14px; } /* Toast */ #toast { font-size: 13px; padding: 10px 14px; bottom: 80px; } /* Body */ body { padding-bottom: 70px; } } /* ── 17. MUY CHICO (≤360px) ─────────────────────────────── */ @media (max-width: 360px) { #pgrid { gap: 6px; padding: 8px 6px 20px; } .pcard-nm { font-size: 13px; } .pcard-pr { font-size: 15px !important; } #hero { height: 260px !important; } #nav { height: 50px; padding: 0 6px; } .logo-ch { font-size: 15px; } .logo img { max-width: 70px; } #tbtn { width: 30px; height: 30px; font-size: 13px; } .cbt { font-size: 9px; padding: 4px 7px; } #toast { font-size: 12px; padding: 8px 12px; bottom: 74px; } } /* ── 18. LANDSCAPE MOBILE ────────────────────────────────── */ @media (max-height: 480px) and (orientation: landscape) { #hero { height: clamp(200px, 55vh, 300px) !important; } #nav { height: 52px; } .logo-ch { font-size: 18px; } #pgrid { grid-template-columns: repeat(3, 1fr); gap: 8px; } #cats { overflow-x: auto; flex-wrap: nowrap; } } /* ── 19. PDV RESPONSIVE ─────────────────────────────────── */ @media (max-width: 900px) { .pdv-layout { grid-template-columns: 1fr !important; } .pdv-col-ticket > div { position: static !important; } .pdv-col-prods { order: 2; } .pdv-col-ticket { order: 1; } #pdv-grid { max-height: none !important; min-height: 250px !important; } } @media (max-width: 768px) { .pdv-card { aspect-ratio: auto; min-height: 70px; flex-direction: row; align-items: center; gap: 8px; padding: 6px 8px; } .pdv-card img { width: 40px; height: 40px; } #pdv-items { max-height: 180px !important; } #pdv-total { font-size: 22px !important; } #pdv-cliente-display { font-size: 12px !important; } } /* ── 20. HERO TRANSITION (touch) ─────────────────────────── */ @media (max-width: 768px) { .hero-track { transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } } /* ── 21. REDUCED MOTION ──────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .hero-track { transition: none; } .pcard { animation: none !important; opacity: 1 !important; } } /* ── 22. TABLETS LANDSCAPE (1024x768) ───────────────────── */ @media (width: 1024px) and (height: 768px) { #pgrid { grid-template-columns: repeat(3, 1fr); gap: 14px; } #hero { height: 400px; } } /* ── 23. RETINA ──────────────────────────────────────────── */ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .pcard-img img, .prod-th, .pdv-thumb img { image-rendering: auto; } } /* ── 24. DESKTOP HEADER ──────────────────────────────────── */ @media (min-width: 769px) { .header-mobile { display: none !important; } .header-desktop { display: block; position: sticky; top: 0; z-index: 100; background: var(--bg2); padding: 16px 24px; box-shadow: 0 2px 12px rgba(0,0,0,0.1); border-bottom: 1px solid rgba(255,107,0,0.1); } .header-content-desktop { display: flex; align-items: center; gap: 20px; max-width: 1400px; margin: 0 auto; } .header-logo-desktop { display: flex; align-items: center; gap: 14px; flex-shrink: 0; cursor: pointer; padding: 4px 0; transition: opacity .2s; } .header-logo-desktop:hover{opacity:.85} .header-logo-desktop-img { height: var(--logo-size-desktop, 80px); width: auto; object-fit: contain; max-width: 320px; } .header-logo-text-desktop{display:flex;flex-direction:column;line-height:1} .header-brand-desktop{font-family:'Barlow Condensed',sans-serif;font-size:26px;font-weight:900;background:linear-gradient(135deg,var(--ora),var(--ora2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:2px;line-height:1;white-space:nowrap} .header-subbrand-desktop{font-family:'Barlow Condensed',sans-serif;font-size:12px;font-weight:800;color:var(--txt3);letter-spacing:4px;line-height:1;margin-top:3px;display:block} .header-search-desktop { flex: 1; max-width: 600px; } .header-search-desktop input { width: 100%; padding: 12px 18px; border-radius: 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,107,0,0.2); color: var(--txt1); font-size: 14px; font-family: inherit; transition: border-color 0.2s, background 0.2s; } .header-search-desktop input:focus { outline: none; border-color: var(--ora); background: rgba(255,255,255,0.08); } .header-actions-desktop { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .header-actions-desktop .theme-toggle { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,107,0,0.2); cursor: pointer; font-size: 22px; display: flex; align-items: center; justify-content: center; transition: all 0.2s; padding: 0; } .header-actions-desktop .theme-toggle:hover { background: rgba(255,107,0,0.15); border-color: var(--ora); } .btn-cart-desktop { position: relative; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,107,0,0.2); cursor: pointer; font-size: 20px; display: flex; align-items: center; justify-content: center; } .btn-cart-desktop .cart-count { position: absolute; top: -4px; right: -4px; background: var(--ora); color: #fff; border-radius: 10px; padding: 2px 6px; font-size: 11px; font-weight: 700; min-width: 18px; line-height: 1.4; text-align: center; } /* trkbtn removed — tracking moved to dropdown + bottom nav */ } /* ── 25. PRINT ───────────────────────────────────────────── */ @media print { #nav, #site-footer, .footer-desktop, #cartov, #authov, #adminov, .hero-dots, #toast, #tbtn, #btnIngresar, #userInfoDesktop { display: none !important; } body { padding-bottom: 0; background: #fff !important; color: #000 !important; } #hero { height: auto !important; page-break-inside: avoid; } .pcard { break-inside: avoid; } .pcard:hover { transform: none; box-shadow: none; } } /* ── 26. MOBILE APP-LIKE REFINEMENTS ──────────────────────── */ /* ── 26a. CART FAB ─────────────────────────────────────────── */ .cart-fab { display: none; position: fixed; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); left: 16px; right: 16px; background: linear-gradient(135deg, var(--ora), #EF9F27); color: #fff; border: none; padding: 14px 20px; border-radius: 16px; align-items: center; gap: 12px; box-shadow: 0 8px 28px rgba(255, 107, 0, 0.45); font-weight: 700; z-index: 190; animation: cartFabUp 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; touch-action: manipulation; min-height: 56px; } .cart-fab:active { transform: scale(0.96); box-shadow: 0 4px 16px rgba(255, 107, 0, 0.35); } .cart-fab-icon { font-size: 24px; line-height: 1; } .cart-fab-info { flex: 1; text-align: left; display: flex; flex-direction: column; } .cart-fab-info .cart-count { font-size: 12px; opacity: 0.9; } .cart-fab-info .cart-total { font-size: 18px; font-weight: 800; } .cart-fab-arrow { font-size: 20px; opacity: 0.8; } @keyframes cartFabUp { from { transform: translateY(120%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes mbbBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } @media (min-width: 769px) { .cart-fab { display: none !important; } } /* ── 26b. BOTTOM NAV MEJORADO ──────────────────────────────── */ @media (max-width: 768px) { .mob-bottom-bar { padding: 4px 0 calc(6px + env(safe-area-inset-bottom, 0px)); background: var(--navbg, var(--bg)); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid rgba(255, 107, 0, 0.12); box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12); justify-content: space-around; } .mbb-btn { gap: 2px; padding: 6px 4px; min-width: 48px; border-radius: 12px; transition: color 0.15s, background 0.15s, transform 0.2s ease; touch-action: manipulation; } .mbb-btn:active { background: rgba(255, 107, 0, 0.1); transform: scale(0.9); } .mbb-btn.on .mbb-ico { animation: mbbBounce 0.4s ease; } .mbb-ico { font-size: 22px; } .mbb-lbl { font-size: 10px; font-weight: 600; letter-spacing: 0.3px; } .mbb-badge { top: -2px; right: 4px; font-size: 10px; min-width: 18px; height: 18px; border-radius: 9px; box-shadow: 0 2px 6px rgba(255, 107, 0, 0.4); } body { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); } .wa-float { bottom: calc(90px + env(safe-area-inset-bottom, 0px)); } #toast { bottom: calc(100px + env(safe-area-inset-bottom, 0px)); } .cart-fab { bottom: calc(82px + env(safe-area-inset-bottom, 0px)); } } /* ── 26c. HEADER STICKY MEJORADO ───────────────────────────── */ @media (max-width: 768px) { #nav { position: sticky; top: 0; z-index: 100; height: 60px; padding: 0 12px; background: var(--navbg, var(--bg)); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08); } .logo { padding: 4px 8px 4px 4px; border-radius: 10px; gap: 8px; } .logo img { width: 36px; height: 36px; border-radius: 8px; } .logo-ch { font-size: 20px; letter-spacing: 1px; } .logo-d { font-size: 9px; letter-spacing: 3px; } .logo-dl { height: 2px; } #header-slogan { display: none !important; } #srch { display: none; } #tbtn { display: none !important; } /* #trkbtn removed */ #btnIngresar { display: none !important; } #userInfoDesktop { display: none !important; } } @media (max-width: 380px) { .header-mobile { padding: 10px 12px; } .header-content { grid-template-columns: 40px 1fr 40px; gap: 8px; } .header-logo-wrapper, .theme-toggle { width: 40px; height: 40px; } .header-search-mobile input { padding: 9px 12px; font-size: 12px; } } @media (max-width: 320px) { .header-search-mobile input::placeholder { font-size: 11px; } } /* ── 26d. CATEGORÍAS RAPPI-STYLE ────────────────────────────── */ @media (max-width: 768px) { #cats { padding: 12px 16px 0; gap: 8px; overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-snap-type: x mandatory; } #cats::-webkit-scrollbar { display: none; } .cbt { flex-shrink: 0; scroll-snap-align: start; padding: 8px 16px; border-radius: 100px; font-size: 13px; font-weight: 700; letter-spacing: 0.5px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 107, 0, 0.15); color: var(--txt2); min-height: 40px; transition: all 0.2s; touch-action: manipulation; } .cbt.on { background: var(--ora); color: #fff; border-color: var(--ora); transform: scale(1.04); box-shadow: 0 4px 16px rgba(255, 107, 0, 0.35); } .cbt:active { transform: scale(0.95); } } @media (max-width: 400px) { #cats { padding: 10px 12px 0; gap: 6px; } .cbt { font-size: 11px; padding: 6px 12px; min-height: 36px; } } /* ── 26e. HERO COMPACT MOBILE ──────────────────────────────── */ @media (max-width: 768px) { #hero { height: 260px !important; border-radius: 0; margin: 0 -16px; } .hero-slide { padding: 0 24px; } .hero-content { padding: 20px 24px 40px; } .hero-h1 { font-size: 28px !important; line-height: 1.1; margin-bottom: 8px; } .hero-sub { font-size: 13px; line-height: 1.4; max-width: 100%; overflow: visible; white-space: normal; text-overflow: clip; } .hero-cta { padding: 10px 20px; font-size: 12px; letter-spacing: 2px; } .hero-dots { bottom: 12px; padding: 5px 10px; gap: 6px; } .hero-dot { width: 6px; height: 6px; } .hero-dot.on { width: 22px; } } @media (max-width: 400px) { #hero { height: 220px !important; } .hero-h1 { font-size: 20px !important; } .hero-sub { font-size: 11px; } .hero-content { padding: 12px 14px 32px; } .hero-eye { font-size: 8px; letter-spacing: 2px; padding: 3px 8px; } } @media (max-height: 480px) and (orientation: landscape) { #hero { height: 200px !important; } } /* ── 26f. PRODUCT CARDS MEJORADAS ──────────────────────────── */ @media (max-width: 768px) { #pgrid { gap: 10px; padding: 14px 16px 24px; } .pcard-link { text-decoration: none; color: inherit; } .pcard { border-radius: 14px; background: #1a1a1a; border: 1px solid rgba(255, 107, 0, 0.1); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; } [data-theme=light] .pcard { background: var(--bg2, var(--card)); border: 1px solid var(--bord); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); } .pcard .pcard-img { background: #0a0a0a; } .pcard .pcard-nm { color: #fff; font-weight: 700; } .pcard .pcard-ds { color: rgba(255, 255, 255, 0.6); font-size: 12px; } .pcard .pcard-pr { color: var(--ora); font-size: 20px; font-weight: 800; } .pcard .pcard-op { color: rgba(255, 255, 255, 0.4); font-size: 13px; text-decoration: line-through; margin-left: 6px; } [data-theme=light] .pcard .pcard-nm { color: var(--txt); } [data-theme=light] .pcard .pcard-ds { color: var(--txt2); } [data-theme=light] .pcard .pcard-op { color: var(--txt3); } .pcard:active { transform: scale(0.97); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06); } .pcard-img { aspect-ratio: 1/1; height: auto; } .pcard-body { padding: 10px 12px; } .pcard-cat { font-size: 9px; letter-spacing: 2px; margin-bottom: 4px; } .pcard-nm { font-size: 14px; font-weight: 600; line-height: 1.3; min-height: 36px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pcard-pr { font-size: 18px; font-weight: 800; } .pcard-op { font-size: 11px; } .pcard-row { gap: 6px; } .pcard-arr { display: none; } .pcard-stk-bar { height: 3px; } /* Badges position fix */ .pcard > div:first-child { top: 8px; left: 8px; gap: 3px; } .pcard > div:first-child > div { font-size: 9px; padding: 2px 8px; border-radius: 6px; } } @media (max-width: 400px) { #pgrid { gap: 8px; padding: 10px 10px 20px; } .pcard-body { padding: 8px 10px; } .pcard-nm { font-size: 13px; min-height: 32px; } .pcard-pr { font-size: 16px; } } @media (max-width: 360px) { #pgrid { gap: 6px; padding: 8px 8px 16px; } .pcard-nm { font-size: 12px; min-height: 28px; } .pcard-pr { font-size: 15px; } } /* ── 26f2. CARD TAGS & BADGES ────────────────────────────────── */ .card-tag { position: absolute; top: 8px; left: 8px; background: var(--ora); color: #fff; padding: 4px 10px; border-radius: 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; z-index: 3; line-height: 1.2; } .card-discount { position: absolute; top: 8px; right: 8px; background: #FF3B30; color: #fff; padding: 6px 8px; border-radius: 50%; font-size: 11px; font-weight: 800; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; z-index: 3; line-height: 1; } .card-stock-badge { color: #FFB300; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; } @media (max-width: 400px) { .card-tag { font-size: 9px; padding: 3px 8px; top: 6px; left: 6px; } .card-discount { width: 32px; height: 32px; font-size: 10px; top: 6px; right: 6px; } } /* ── 26g. PDV BOTTOM SHEET EN MOBILE ───────────────────────── */ @media (max-width: 768px) { .pdv-ov { display: none; align-items: flex-end; padding: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(2px); } .pdv-ov.on { display: flex; animation: none; } .pdv-ov.closing { display: flex; animation: none; } .pdv-ov.on .pdv-content { transform: translateY(0); opacity: 1; } .pdv-content { width: 100%; max-width: 100%; max-height: 92vh; border-radius: 24px 24px 0 0; padding: 0 16px 16px; background: var(--bg, var(--bg2)); box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.25); transform: translateY(100%); opacity: 0; transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease; overflow-y: auto; -webkit-overflow-scrolling: touch; position: relative; } /* Drag indicator */ .pdv-content::before { content: ''; display: block; width: 40px; height: 4px; background: rgba(255, 255, 255, 0.2); border-radius: 2px; margin: 12px auto 8px; flex-shrink: 0; } .pdv-close { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; font-size: 13px; font-weight: 600; border-radius: 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--txt2); margin: 4px 0 12px; min-height: 40px; cursor: pointer; transition: background 0.2s; } .pdv-close:active { background: rgba(255, 255, 255, 0.12); } .pdv-grid { gap: 12px; } .pdv-gallery { grid-template-columns: 1fr; grid-template-rows: auto 60px; gap: 8px; } .pdv-thumbs { flex-direction: row; overflow-x: auto; overflow-y: hidden; order: 2; grid-row: 2; gap: 6px; padding: 2px 0; max-height: none; } .pdv-thumb { width: 52px; height: 52px; border-radius: 10px; flex-shrink: 0; } .pdv-main-wrap { aspect-ratio: 1/1; border-radius: 14px; overflow: hidden; } .pdv-arrow { width: 34px; height: 34px; font-size: 20px; } .pdv-arrow-l { left: 8px; } .pdv-arrow-r { right: 8px; } #pdv-nm { font-size: 20px; line-height: 1.2; } .pdv-prrow .pr-act { font-size: 26px; } .pdv-prrow .pr-old { font-size: 13px; } .pdv-ds { font-size: 13px; line-height: 1.6; } .pdv-section { padding: 10px 0; } .pdv-lbl { font-size: 11px; letter-spacing: 1px; margin-bottom: 8px; color: var(--txt3); } .pdv-sz-grid { gap: 6px; } .pdv-sz-btn { padding: 10px 16px; font-size: 13px; min-width: 48px; min-height: 44px; border-radius: 10px; } .pdv-sticky { position: static; box-shadow: none; padding: 12px 0 0; border-top: 1px solid var(--bord); margin-top: 4px; } .pdv-add { padding: 16px; font-size: 16px; font-weight: 800; letter-spacing: 1.5px; border-radius: 14px; min-height: 52px; background: linear-gradient(135deg, var(--ora), #EF9F27); color: #fff; border: none; cursor: pointer; width: 100%; touch-action: manipulation; } .pdv-add:active { transform: scale(0.97); } .pdv-add.dis { opacity: 0.5; pointer-events: none; } .pdv-buy { padding: 12px; font-size: 14px; border-radius: 12px; min-height: 44px; } .pdv-trust { gap: 6px; flex-wrap: wrap; } .trust-item { font-size: 11px; padding: 6px 10px; } .pdv-ship { display: none; } #pdv-tags > div { font-size: 9px; padding: 3px 8px; border-radius: 6px; } /* Lightbox ajuste */ #img-lightbox { z-index: 220; } .lb-arrow { width: 36px; height: 36px; font-size: 20px; } } /* Landscape PDV */ @media (max-height: 500px) and (orientation: landscape) { .pdv-content { max-height: 85vh; } .pdv-grid { grid-template-columns: 1fr 1fr; gap: 12px; } .pdv-gallery { grid-template-columns: 80px 1fr; grid-template-rows: 1fr; } .pdv-thumbs { flex-direction: column; overflow-y: auto; } .pdv-thumb { width: 64px; height: 64px; } .pdv-sticky { position: static; } } /* ── 26h. TOUCH FEEDBACK ────────────────────────────────────── */ @media (max-width: 768px) { button, a, .clickable, [role="button"] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } button:active, .clickable:active, [role="button"]:active, .mbb-btn:active, .cbt:active, .pcard:active, .pdv-sz-btn:active:not(.out):not(.on), .footer-btn:active { transform: scale(0.96); opacity: 0.85; } /* No scale on active elements that shouldn't shrink */ .pcard-link:active .pcard { transform: scale(0.97); } #ckbtn:active, .asub:active { transform: scale(0.97); } } /* ── 26i. SKELETON MEJORADO ─────────────────────────────────── */ .skel-card { background: var(--bg2, var(--card)); border: 1px solid var(--bord); border-radius: 14px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } .skel-img { aspect-ratio: 1/1; height: auto; background: var(--inp); position: relative; overflow: hidden; } .skel-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.08) 50%, transparent 100%); animation: skelShimmer 1.5s ease-in-out infinite; } [data-theme=light] .skel-img::after { background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.04) 50%, transparent 100%); } .skel-body { padding: 12px; } .skel-line { height: 10px; border-radius: 4px; background: var(--inp); margin-bottom: 8px; position: relative; overflow: hidden; } .skel-line::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.08) 50%, transparent 100%); animation: skelShimmer 1.5s ease-in-out infinite; } [data-theme=light] .skel-line::after { background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.04) 50%, transparent 100%); } @keyframes skelShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ── 26j. SAFE AREAS MEJORADAS ─────────────────────────────── */ @supports (padding: env(safe-area-inset-top)) { body { padding-top: 0; padding-bottom: calc(80px + env(safe-area-inset-bottom)); } #nav { padding-top: calc(0px + env(safe-area-inset-top, 0px)); } .mob-bottom-bar { padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); } .cart-fab { bottom: calc(82px + env(safe-area-inset-bottom, 0px)); } #toast { bottom: calc(100px + env(safe-area-inset-bottom, 0px)); } .wa-float { bottom: calc(90px + env(safe-area-inset-bottom, 0px)); } .pdv-content { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } #cartdr { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); } } /* Admin mode: undo mobile padding */ body.admin-mode { padding-bottom: 0; } body.admin-mode .bottom-nav { display: none; } body.admin-mode .cart-fab { display: none !important; } body.admin-mode .mob-bottom-bar { display: none !important; } body.admin-mode .wa-float { bottom: 20px; } /* ── 26k. REDUCED MOTION OVERRIDE ──────────────────────────── */ @media (prefers-reduced-motion: reduce) { .cart-fab { animation: none; } .pdv-content { transition: none; transform: none; opacity: 1; } .skel-img::after, .skel-line::after { animation: none; } .pcard:active { transform: none; } button:active { transform: none; } } /* ── 25. TOUCH DEVICE HOVER OFF ──────────────────────────── */ @media (hover: none) and (pointer: coarse) { .pcard:hover { transform: none; box-shadow: none; } .cbt:hover { color: var(--txt2); border-color: var(--bord); } #tbtn:hover { transform: none; } #btnIngresar:hover { transform: none; } .pdv-sz-btn:hover:not(.out) { background: var(--inp); color: var(--txt2); border-color: var(--bord); } .footer-btn:hover { transform: none; } .adm-btn:hover { filter: none; } .asub:hover { filter: none; transform: none; } } /* ── 27. ML-STYLE DESKTOP HEADER TWEAKS ───────────────────── */ @media(min-width:769px){ .header-desktop{padding:12px 0;box-shadow:0 1px 8px rgba(0,0,0,.08)} .header-content-desktop{max-width:1280px;margin:0 auto;padding:0 24px} .header-logo-desktop-img{height:var(--logo-size-desktop,80px);max-width:320px} .header-search-desktop{flex:1;max-width:520px;margin:0 auto} .header-search-desktop input{padding:13px 20px;font-size:15px;border-radius:100px;background:var(--inp);border:1.5px solid var(--bord);color:var(--txt)} .header-search-desktop input:focus{outline:none;border-color:var(--ora);background:var(--bg2);box-shadow:0 0 0 3px rgba(255,107,0,.1)} .header-actions-desktop{gap:8px} .header-actions-desktop .theme-toggle{width:40px;height:40px;font-size:20px} .btn-cart-desktop{width:40px;height:40px;font-size:18px} .header-actions-desktop #btnIngresar{padding:8px 18px;font-size:12px;border-radius:100px;letter-spacing:1.5px;white-space:nowrap} .user-in .header-actions-desktop #btnIngresar{display:none} }