/*
 * ALPHA FITNESS — MOBILE
 * Bloques extraídos del HTML monolítico (sweep final 2026-06-03).
 * Total: 3 bloques.
 */


/* ────── safe areas + mobile fixes (era HTML líneas 4100-4495) ────── */
:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* MOBILE HEADER + DRAWER + BOTTOM NAV (only visible on mobile) */
.m-header, .m-bottom-nav, .m-drawer, .m-drawer-backdrop, .m-search-overlay{ display:none; }

/* Animación sutil de transición al navegar por swipe (gestos mobile) */
@keyframes swipeInLeft  { from{ transform:translateX(26px);  opacity:.55; } to{ transform:translateX(0); opacity:1; } }
@keyframes swipeInRight { from{ transform:translateX(-26px); opacity:.55; } to{ transform:translateX(0); opacity:1; } }
.swipe-in-left  { animation:swipeInLeft  .3s cubic-bezier(.22,.61,.36,1); }
.swipe-in-right { animation:swipeInRight .3s cubic-bezier(.22,.61,.36,1); }
@media (prefers-reduced-motion: reduce){
  .swipe-in-left, .swipe-in-right{ animation:none; }
}

@media (min-width: 821px){
  .m-header, .m-bottom-nav, .m-drawer, .m-drawer-backdrop, .m-search-overlay, #mInlineContent, #mDrawer, #mDrawerBackdrop, #mSearchOverlay, #mHeader, #mBottomNav{
    display:none !important;
  }
}

@media (max-width: 820px){
  html, body{ overflow-x:hidden; -webkit-tap-highlight-color:transparent; }
  /* touch-action:manipulation en TODA la app mobile: elimina el delay de tap y el
     double-tap-zoom de iOS (los botones responden AL INSTANTE). El scroll y el
     pinch-zoom del navegador siguen funcionando normal. */
  html{ touch-action: manipulation; }
  body{ padding-bottom:calc(70px + var(--safe-bottom)); }

  /* HIDE DESKTOP HEADER */
  body > header{ display:none !important; }

  /* MOBILE HEADER (sticky top) */
  .m-header{
    display:flex; align-items:center; justify-content:space-between;
    position:sticky; top:0; z-index:9500;
    background:#000; border-bottom:1px solid #1f1f1f;
    padding:calc(10px + var(--safe-top)) 14px 10px;
    height:calc(56px + var(--safe-top));
    box-shadow:0 2px 12px rgba(0,0,0,0.5);
  }
  .m-header-btn{
    width:42px; height:42px; display:flex; align-items:center; justify-content:center;
    background:transparent; border:none; color:#fff; cursor:pointer;
    border-radius:50%; transition:background .2s; position:relative;
    font-size:20px;
  }
  .m-header-btn:active{ background:#1a1a1a; }
  .m-logo{
    color:#39ff14; font-weight:900; font-size:18px; letter-spacing:2px;
    cursor:pointer; flex:1; text-align:center;
    text-shadow:0 0 8px rgba(57,255,20,0.3);
  }
  .m-cart-badge{
    position:absolute; top:4px; right:4px;
    background:#39ff14; color:#000; border-radius:999px;
    min-width:18px; height:18px; padding:0 5px;
    font-size:10px; font-weight:800;
    display:flex; align-items:center; justify-content:center;
    border:2px solid #000;
  }

  /* DRAWER (left slide-in) */
  .m-drawer-backdrop{
    display:block; position:fixed; inset:0;
    background:rgba(0,0,0,0.7); backdrop-filter:blur(4px);
    z-index:9700; opacity:0; pointer-events:none;
    transition:opacity .3s;
  }
  .m-drawer-backdrop.open{ opacity:1; pointer-events:auto; }
  .m-drawer{
    display:flex; flex-direction:column;
    position:fixed; top:0; left:0; bottom:0;
    width:85%; max-width:340px;
    background:linear-gradient(180deg,#0a0a0a 0%, #000 100%);
    border-right:1px solid #39ff14;
    z-index:9800; transform:translateX(-100%);
    transition:transform .35s cubic-bezier(.2,.9,.3,1);
    overflow-y:auto; padding-top:var(--safe-top);
    padding-bottom:var(--safe-bottom);
  }
  .m-drawer.open{ transform:translateX(0); }
  .m-drawer-head{
    padding:24px 22px; border-bottom:1px solid #1f1f1f;
    display:flex; align-items:center; gap:14px;
  }
  .m-drawer-avatar{
    width:50px; height:50px; border-radius:50%;
    background:rgba(57,255,20,0.12); border:2px solid #39ff14;
    display:flex; align-items:center; justify-content:center;
    color:#39ff14; font-size:20px;
  }
  .m-drawer-user .greet{ color:#888; font-size:12px; }
  .m-drawer-user .name{ color:#fff; font-weight:700; font-size:16px; margin-top:2px; }
  .m-drawer-section{ padding:14px 0; border-bottom:1px solid #1a1a1a; }
  .m-drawer-section h5{
    color:#666; font-size:11px; letter-spacing:2px; font-weight:700;
    text-transform:uppercase; padding:0 22px 8px;
  }
  .m-drawer-item{
    display:flex; align-items:center; gap:14px; padding:14px 22px;
    color:#fff; font-size:15px; font-weight:500; cursor:pointer;
    transition:background .2s, color .2s;
    border:none; background:transparent; width:100%; text-align:left;
    font-family:inherit;
  }
  .m-drawer-item:active{ background:rgba(57,255,20,0.08); }
  .m-drawer-item i{ color:#39ff14; width:22px; text-align:center; font-size:16px; }
  .m-drawer-item .badge{
    margin-left:auto; background:#39ff14; color:#000;
    border-radius:999px; padding:2px 8px; font-size:11px; font-weight:800;
  }
  .m-drawer-close{
    position:absolute; top:calc(14px + var(--safe-top)); right:14px;
    width:38px; height:38px; min-width:38px; min-height:38px; box-sizing:border-box;
    background:rgba(255,255,255,0.05);
    border:1px solid #2a2a2a; border-radius:50%; color:#888;
    cursor:pointer; font-size:18px;
  }
  .m-drawer-logo{
    color:#39ff14; font-weight:900; font-size:22px; letter-spacing:3px;
    text-align:center; padding:22px 0; border-bottom:1px solid #1f1f1f;
    text-shadow:0 0 10px rgba(57,255,20,0.4);
  }

  /* SEARCH OVERLAY */
  .m-search-overlay{
    display:flex; position:fixed; inset:0; z-index:9750;
    background:#000; flex-direction:column; padding-top:var(--safe-top);
    transform:translateY(-100%); transition:transform .3s;
  }
  .m-search-overlay.open{ transform:translateY(0); }
  .m-search-bar{
    display:flex; align-items:center; gap:10px; padding:14px;
    border-bottom:1px solid #1f1f1f;
  }
  .m-search-bar input{
    flex:1; background:#111; border:1px solid #2a2a2a; border-radius:30px;
    padding:12px 18px; color:#fff; font-size:15px; outline:none;
  }
  .m-search-bar input:focus{ border-color:#39ff14; }
  .m-search-bar button{
    background:transparent; border:none; color:#39ff14;
    font-weight:700; cursor:pointer; padding:6px 10px;
  }

  /* BOTTOM NAV (fixed). Fondo SÓLIDO sin backdrop-filter: con rgba(0,0,0,0.97) el
     blur(20px) era invisible pero iOS lo recomputaba en CADA frame de scroll
     (elemento fixed siempre en pantalla) → jank permanente en toda la app. */
  .m-bottom-nav{
    display:flex; position:fixed; left:0; right:0; bottom:0;
    z-index:9600; background:#000;
    border-top:1px solid #1f1f1f;
    padding-bottom:var(--safe-bottom);
    box-shadow:0 -4px 20px rgba(0,0,0,0.5);
  }
  .m-nav-item{
    flex:1; display:flex; flex-direction:column; align-items:center;
    justify-content:center; padding:10px 4px;
    background:transparent; border:none; cursor:pointer;
    color:#777; font-size:10px; font-weight:600; letter-spacing:0.5px;
    text-transform:uppercase; gap:3px;
    position:relative; min-height:60px;
    font-family:inherit;
  }
  .m-nav-item i{ font-size:20px; transition:transform .2s; }
  .m-nav-item:active i{ transform:scale(0.85); }
  .m-nav-item.active{ color:#39ff14; }
  .m-nav-item.active i{ filter:drop-shadow(0 0 8px rgba(57,255,20,0.6)); }
  .m-nav-item.center{ position:relative; }
  .m-nav-item.center i{
    background:linear-gradient(45deg,#39ff14,#2ecc00); color:#000;
    width:44px; height:44px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 4px 16px rgba(57,255,20,0.5);
    margin-top:-12px; font-size:18px;
  }
  .m-nav-badge{
    position:absolute; top:4px; right:18%;
    background:#39ff14; color:#000; border-radius:999px;
    min-width:18px; height:18px; padding:0 5px;
    font-size:10px; font-weight:800;
    display:flex; align-items:center; justify-content:center;
    border:2px solid #000;
  }

  /* HERO COMPACTO TIPO APP */
  .hero{
    height:auto !important; min-height:0 !important;
    padding:24px 16px 26px !important;
    border-radius:0 0 24px 24px;
    background:linear-gradient(180deg,#0a0a0a 0%, #050505 100%) !important;
  }
  .hero::before{ display:none !important; }
  .hero h1{ font-size:1.6rem !important; letter-spacing:3px !important; margin-bottom:6px !important; }
  .hero .subtitle{ font-size:0.7rem !important; letter-spacing:3px !important; margin-bottom:14px !important; opacity:0.7 !important; }
  .hero .btn{ font-size:13px !important; padding:0 24px !important; line-height:42px !important; height:42px !important; }

  /* MOBILE SEARCH BAR (under header) */
  .m-search-pill{
    display:flex; padding:12px 14px 4px;
    background:#000;
  }
  .m-search-pill input{
    width:100%; padding:13px 18px; border-radius:30px;
    background:#1a1a1a; border:1px solid #2a2a2a; color:#fff;
    font-size:14px; outline:none;
  }
  .m-search-pill input:focus{ border-color:#39ff14; }
  .m-search-pill .ic{
    position:absolute; right:30px; color:#39ff14; pointer-events:none;
    align-self:center; margin-top:0;
  }

  /* CATEGORY CHIPS (horizontal scroll) */
  .m-chips{
    display:flex; gap:10px; overflow-x:auto; overflow-y:hidden;
    padding:14px 14px 4px; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .m-chips::-webkit-scrollbar{ display:none; }
  .m-chips .chip{
    flex-shrink:0; padding:9px 18px; border-radius:30px;
    background:#1a1a1a; border:1px solid #2a2a2a; color:#ccc;
    font-size:13px; font-weight:600; cursor:pointer;
    white-space:nowrap; transition:all .2s;
  }
  .m-chips .chip:active{ transform:scale(0.96); }
  .m-chips .chip.active{
    background:rgba(57,255,20,0.15); border-color:#39ff14; color:#39ff14;
  }

  /* QUICK FEATURE ICONS ROW */
  .m-features{
    display:grid; grid-template-columns:repeat(4,1fr); gap:6px;
    padding:18px 14px 10px;
  }
  .m-feature{
    display:flex; flex-direction:column; align-items:center; gap:8px;
    text-align:center; cursor:pointer;
  }
  .m-feature .ic-wrap{
    width:56px; height:56px; border-radius:50%;
    background:#0f0f0f; border:1px solid #2a2a2a;
    display:flex; align-items:center; justify-content:center;
    color:#39ff14; font-size:20px; font-weight:800;
    transition:transform .2s;
  }
  .m-feature:active .ic-wrap{ transform:scale(0.94); }
  .m-feature .ic-wrap .pct{ font-size:13px; font-weight:900; }
  .m-feature .ic-wrap .pct small{ font-size:8px; vertical-align:top; }
  .m-feature span{ font-size:11px; color:#bbb; line-height:1.3; }

  /* Título de marca en mobile: centrado y limpio, con su subrayado verde
     (se quitó el pseudo "Ver todo →" que se fusionaba con la línea y se rompía) */
  .brand-section h2{
    text-align:center !important; padding:0 16px !important;
    font-size:1.4rem !important; margin-bottom:14px !important;
  }

  /* BRAND CARDS GRID */
  .brands-grid{ grid-template-columns:repeat(2,1fr) !important; gap:14px !important; padding:0 14px !important; }
  .brands-nav{ padding:30px 0 !important; }
  .brands-nav h2{ font-size:1.6rem !important; padding:0 14px; }
  .brand-card{ padding:1.5rem 0.6rem !important; }
  .brand-card i{ font-size:2.4rem !important; }
  .brand-card h3{ font-size:1rem !important; }

  /* BRAND SECTION */
  .brand-section{ padding:30px 0 !important; }
  .brand-section h2{ font-size:1.6rem !important; padding:0 14px !important; text-align:center; margin-bottom:18px !important; }

  /* PRODUCT CARDS GRID */
  .products-grid, .brand-section .track{
    display:grid !important;
    grid-template-columns:repeat(2,1fr) !important;
    gap:12px !important;
    padding:0 12px !important;
    overflow:visible !important;
    transform:none !important;
  }
  .brand-section .product-card,
  .product-card{
    min-width:0 !important; width:auto !important;
    padding:10px !important;
  }
  .product-image{ min-height:auto !important; padding:12px !important; }
  .product-image img{ max-width:130px !important; max-height:130px !important; }
  .product-info h3{ font-size:13px !important; line-height:1.3 !important; }
  .product-info p{ font-size:11px !important; line-height:1.4 !important;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .product-info .price{ font-size:16px !important; }
  .product-info .btn, .product-info a.btn{
    padding:0 !important; line-height:36px !important; font-size:12px !important;
    width:100% !important; text-align:center !important;
    letter-spacing:0.5px !important;
  }

  /* HIDE the carousel arrows + side scrollers */
  .brand-section .arrow, .brand-section .btn-volver, .carousel .arrow{ display:none !important; }

  /* PRODUCT DETAIL PAGE — apila las 3 zonas: imagen → compra → beneficios */
  .ap-hero{ grid-template-columns:1fr !important; gap:18px !important; margin-top:14px !important; padding:0 14px !important; }
  .ap-stage{ order:1; min-height:340px !important; padding:30px 18px 22px !important; border-radius:18px !important; }
  .ap-stage-img img{ max-width:230px !important; }
  .ap-buy-panel{ order:2; position:static !important; padding:22px 18px !important; }
  .ap-benefits{ order:3; padding-top:4px !important; }
  .ap-benefits-title{ font-size:22px !important; text-align:center; margin-bottom:18px !important; }
  .ap-product-name{ font-size:25px !important; }
  .ap-thumbs{ gap:8px; }
  .ap-thumb{ border-radius:8px; padding:6px; }
  .ap-gallery{ min-height:300px !important; padding:24px !important; }
  .ap-gallery img{ max-width:240px !important; }
  .ap-info h1{ font-size:24px !important; }
  .ap-banner, .ap-promo, .ap-nutricional, .ap-benefits-grid, .ap-reviews-wrap{
    grid-template-columns:1fr !important;
  }
  .ap-section{ padding:0 14px !important; margin:36px auto !important; }
  .ap-section h2{ font-size:22px !important; }
  .ap-trust-row{ grid-template-columns:repeat(2,1fr) !important; gap:10px !important; padding:0 14px !important; margin:30px auto !important; }
  .ap-trust{ padding:14px !important; }
  .ap-trust i{ font-size:18px !important; }
  .ap-trust .t-title{ font-size:12px !important; }
  .ap-trust .t-sub{ font-size:11px !important; }
  .ap-back{ margin:14px 0 0 14px !important; }
  .ap-breadcrumb{ padding:14px 14px 0 !important; font-size:12px !important; }
  .ap-related-grid{ grid-template-columns:repeat(2,1fr) !important; gap:10px !important; }
  .ap-related-card{ padding:12px !important; }
  .ap-related-img{ min-height:120px !important; padding:8px !important; }
  .ap-related-img img{ max-width:90px !important; max-height:100px !important; }
  .ap-related-card h4{ font-size:12px !important; }
  .ap-related-card .price{ font-size:15px !important; }
  .ap-banner h3, .ap-promo h3{ font-size:22px !important; }
  .ap-banner .ap-banner-text, .ap-promo .ap-promo-text{ padding:28px 22px !important; }
  .ap-banner .ap-banner-img, .ap-promo .ap-promo-img{ padding:28px !important; }
  .ap-bundle-row{ flex-direction:column; gap:14px !important; }
  .ap-bundle-plus{ transform:rotate(90deg); }
  .ap-bundle{ padding:22px !important; }
  .ap-tabs{ padding:8px 10px !important; }
  .ap-tabs-left{ display:none !important; }
  .ap-tabs-right{ width:100%; justify-content:space-between !important; gap:10px !important; }
  .ap-tabs-right .price{ font-size:15px !important; }
  .ap-tabs-right button{ padding:10px 18px !important; font-size:12px !important; }
  #product-page{ padding-bottom:140px !important; }

  /* CART PAGE */
  .cart-grid{ grid-template-columns:1fr !important; gap:18px !important; }
  .cart-head h1{ font-size:28px !important; }
  .cart-items-head{ display:none !important; }
  .cart-item{ grid-template-columns:1fr !important; gap:10px !important; padding:14px !important; }
  .ci-subtotal{ text-align:left !important; }
  .ci-qty{ margin-left:0 !important; }
  .cs-grid{ grid-template-columns:1fr !important; }
  .cart-summary{ position:static !important; padding:22px !important; }
  #cart-page{ padding:18px 14px 30px !important; }

  /* FAVORITES PAGE */
  .fp-grid{ grid-template-columns:repeat(2,1fr) !important; gap:10px !important; }
  .fp-head h1{ font-size:28px !important; }
  .fp-summary{ flex-direction:column; align-items:stretch !important; padding:18px !important; }
  .fp-summary-left{ flex-direction:row; }
  .fp-actions{ width:100%; }
  .fp-actions button{ flex:1; padding:11px 8px !important; font-size:11px !important; }
  .fp-card-img{ min-height:140px !important; padding:14px !important; }
  .fp-card-img img{ max-width:110px !important; max-height:110px !important; }
  .fp-card-body{ padding:12px !important; }
  .fp-card-body h3{ font-size:13px !important; }
  .fp-card-body .desc{ display:none !important; }
  .fp-card-body .price{ font-size:18px !important; }
  .fp-add-cart{ padding:9px !important; font-size:11px !important; }
  .fp-view{ padding:7px !important; font-size:10px !important; }
  #favorites-page{ padding:18px 14px 30px !important; }

  /* HEART ON CARDS - smaller */
  .fav-heart{ width:32px !important; height:32px !important; font-size:13px !important; }

  /* LOGIN MODAL — alinear arriba + scroll interno: con el teclado abierto el
     viewport se achica y el form de registro (alto) se cortaba (X y campos de
     arriba quedaban fuera, sin poder scrollear). */
  .contact-modal{ padding:calc(16px + var(--safe-top)) 14px 14px !important; align-items:flex-start !important; }
  .contact-content{
    width:100% !important; max-width:none !important; padding:24px 18px !important;
    max-height:90vh !important; overflow-y:auto !important; -webkit-overflow-scrolling:touch;
  }

  /* TOAST adjustments */
  #cart-toast, #fav-toast{ right:10px !important; left:10px !important; max-width:none !important; top:calc(68px + var(--safe-top)) !important; }

  /* AUTH MODAL */
  #auth-required-modal > div{ max-width:none !important; padding:30px 22px !important; }

  /* HIDE pageLoader on mobile if it covers important controls */
  #pageLoader h1{ font-size:2rem !important; letter-spacing:6px !important; }

  /* CART ICON in product page bottom bar adjustment */
  .ap-tabs{ left:0 !important; right:0 !important; bottom:calc(60px + var(--safe-bottom)) !important; }

  /* CONTAINER FIX - kill horizontal overflow on tracks */
  .brand-section, .brand-section > *{ max-width:100vw; }
}

/* Even smaller screens — force single col on tiny */
@media (max-width: 380px){
  .brands-grid{ grid-template-columns:1fr !important; }
  .ap-related-grid{ grid-template-columns:1fr !important; }
  .fp-grid{ grid-template-columns:1fr !important; }
  .products-grid, .brand-section .track{ grid-template-columns:1fr !important; }
  .product-image img{ max-width:180px !important; max-height:180px !important; }
}

/* ────── media query 820px (era HTML líneas 4654-4829) ────── */
@media (max-width: 820px){
  #mInlineContent{ display:block !important; background:#000; }

  /* Ocultar hero antiguo en mobile, lo reemplaza el carrusel de banners */
  .hero{ display:none !important; }

  /* Tabs underline tipo ML */
  .m-tabs{
    display:flex; gap:22px; overflow-x:auto; overflow-y:hidden;
    padding:14px 16px 0; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; border-bottom:1px solid #1a1a1a;
  }
  .m-tabs::-webkit-scrollbar{ display:none; }
  .m-tab{
    flex-shrink:0; padding:6px 0 12px; color:#888;
    font-size:14px; font-weight:600; cursor:pointer;
    white-space:nowrap; position:relative; transition:color .2s;
  }
  .m-tab.active{ color:#fff; font-weight:800; }
  .m-tab.active::after{
    content:''; position:absolute; left:0; right:0; bottom:0;
    height:3px; background:#39ff14; border-radius:3px;
    box-shadow:0 0 8px rgba(57,255,20,0.6);
  }

  /* Carrusel de banners chicos */
  .m-banner-scroll{
    display:flex; gap:12px; overflow-x:auto; overflow-y:hidden;
    padding:16px; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory; scrollbar-width:none;
  }
  .m-banner-scroll::-webkit-scrollbar{ display:none; }
  .m-banner{
    flex-shrink:0; width:88%; max-width:340px; height:155px;
    border-radius:16px; padding:18px 20px; position:relative;
    overflow:hidden; scroll-snap-align:start; cursor:pointer;
    display:flex; align-items:center;
    box-shadow:0 4px 16px rgba(0,0,0,0.5);
  }
  .m-banner-text{ position:relative; z-index:2; }
  .m-banner-tag{
    display:inline-block; background:#000; color:#39ff14;
    padding:3px 10px; border-radius:4px; font-size:10px;
    font-weight:800; letter-spacing:2px; margin-bottom:8px;
  }
  .m-banner h3{
    color:#000; font-family:'Raleway',sans-serif;
    font-size:24px; font-weight:900; line-height:1.05; margin-bottom:8px;
  }
  .m-banner-pct{
    display:inline-block; background:#000; color:#39ff14;
    padding:5px 12px; border-radius:20px; font-size:11px;
    font-weight:600; margin-bottom:8px;
  }
  .m-banner-pct strong{ font-weight:900; }
  .m-banner-cta{ display:block; color:#000; font-size:11px; font-weight:600; opacity:0.85; }
  .m-banner-glow{
    position:absolute; right:-20px; top:-20px; width:140px; height:140px;
    background:radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 60%);
    border-radius:50%;
  }

  /* Envío gratis bar */
  .m-ship-bar{
    display:flex; align-items:center; gap:10px;
    margin:0 16px 14px; padding:12px 16px;
    background:#0f0f0f; border:1px solid #1f1f1f;
    border-radius:12px; color:#bbb; font-size:13px;
  }
  .m-ship-bar i{ color:#39ff14; font-size:18px; }
  .m-ship-bar strong{ color:#39ff14; font-weight:800; }

  /* Categorías circulares grandes (estilo ML) */
  .m-cat-scroll{
    display:flex; gap:16px; overflow-x:auto; overflow-y:hidden;
    padding:6px 16px 18px; -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .m-cat-scroll::-webkit-scrollbar{ display:none; }
  .m-cat{
    flex-shrink:0; width:64px; cursor:pointer; text-align:center;
    transition:transform .2s;
  }
  .m-cat:active{ transform:scale(0.95); }
  .m-cat-ic{
    width:60px; height:60px; border-radius:18px;
    display:flex; align-items:center; justify-content:center;
    color:#000; font-size:24px; margin-bottom:6px;
    box-shadow:0 4px 12px rgba(0,0,0,0.4);
  }
  .m-cat-ic.bg-yellow{ background:linear-gradient(135deg,#fff300,#ffc107); }
  .m-cat-ic.bg-blue{ background:linear-gradient(135deg,#4ea8ff,#1a73e8); color:#fff; }
  .m-cat-ic.bg-purple{ background:linear-gradient(135deg,#a855f7,#6d28d9); color:#fff; }
  .m-cat-ic.bg-red{ background:linear-gradient(135deg,#ef4444,#b91c1c); color:#fff; }
  .m-cat-ic.bg-green{ background:linear-gradient(135deg,#39ff14,#2ecc00); }
  .m-cat-ic.bg-orange{ background:linear-gradient(135deg,#fb923c,#ea580c); color:#fff; }
  .m-cat-ic.bg-pink{ background:linear-gradient(135deg,#ec4899,#be185d); color:#fff; }
  .m-cat-ic.bg-cyan{ background:linear-gradient(135deg,#22d3ee,#0e7490); color:#fff; }
  .m-cat span{ font-size:11px; color:#ccc; line-height:1.2; display:block; }

  /* Promo card */
  .m-promo-card{
    display:flex; margin:0 16px 18px;
    background:linear-gradient(135deg,#39ff14 0%, #2ecc00 100%);
    border-radius:16px; overflow:hidden; cursor:pointer;
    height:120px; box-shadow:0 4px 16px rgba(57,255,20,0.25);
  }
  .m-promo-text{
    flex:1; padding:18px 20px; display:flex; flex-direction:column;
    justify-content:center;
  }
  .m-promo-tag{
    color:#000; font-size:11px; letter-spacing:2px;
    font-weight:800; opacity:0.7; margin-bottom:6px;
  }
  .m-promo-card h3{
    color:#000; font-family:'Raleway',sans-serif;
    font-size:22px; font-weight:900; line-height:1.05; margin-bottom:8px;
  }
  .m-promo-cta{ color:#000; font-size:11px; font-weight:700; opacity:0.85; }
  .m-promo-img{
    width:130px; background:rgba(0,0,0,0.85);
    display:flex; align-items:center; justify-content:center;
    color:#39ff14; font-size:50px;
    filter:drop-shadow(0 0 20px rgba(57,255,20,0.5));
  }

  /* Features pequeños — más compactos */
  .m-features{
    padding:6px 14px 18px !important; gap:8px !important;
  }
  .m-feature .ic-wrap{
    width:48px !important; height:48px !important; font-size:16px !important;
  }
  .m-feature .ic-wrap .pct{ font-size:12px !important; }
  .m-feature span{ font-size:10px !important; }

  /* Producto sections — horizontal scroll estilo ML */
  .brand-section .track{
    display:flex !important; grid-template-columns:none !important;
    overflow-x:auto !important; overflow-y:hidden !important;
    padding:0 16px !important; gap:10px !important;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity; scrollbar-width:none;
  }
  .brand-section .track::-webkit-scrollbar{ display:none; }
  .brand-section .product-card{
    flex-shrink:0 !important; width:160px !important; min-width:160px !important;
    scroll-snap-align:start;
    background:#0f0f0f !important; border-radius:12px !important;
  }
  .product-image{
    background:radial-gradient(ellipse at center, #1a1a1a 0%, #0a0a0a 70%, #050505 100%) !important;
    border:1px solid #1a1a1a !important;
    border-radius:10px !important; margin:0 0 10px !important;
    position:relative;
  }
  .product-image::before{
    content:''; position:absolute; inset:0;
    background:radial-gradient(circle at center, rgba(57,255,20,0.06) 0%, transparent 65%);
    pointer-events:none; border-radius:10px;
  }
  .product-image img{ max-width:120px !important; max-height:120px !important; position:relative; z-index:1; }
  .product-info{ padding:0 10px 12px !important; }
  .product-info h3{ font-size:13px !important; min-height:34px; }
  .product-info p{ display:none !important; }
  .product-info .price{ font-size:18px !important; margin:4px 0 8px !important; }
  .product-info .btn, .product-info a.btn{
    line-height:30px !important; font-size:11px !important;
    border-radius:6px !important;
  }
  .fav-heart{ top:6px !important; right:6px !important; width:28px !important; height:28px !important; font-size:11px !important; }

}

/* ────── iOS fixes media query (era HTML líneas 6974-7329) ────── */
/* ===== FIX iOS: inputs ≥16px para evitar auto-zoom ===== */
@media (max-width:820px){
  /* Incluye input SIN atributo type (input:not([type])): el selector por tipo
     explícito NO matchea un <input> pelado, y ahí iOS igual hace auto-zoom. */
  input:not([type]),
  input[type=text], input[type=email], input[type=password],
  input[type=tel], input[type=number], input[type=url], input[type=search],
  input[type=date], input[type=datetime-local], input[type=time],
  textarea, select{
    font-size:16px !important;
  }

  /* Hero mobile reducido */
  .hero{
    min-height:54vh !important;
    height:auto !important;
    padding:26px 18px 38px !important;
  }
  .hero h1{
    font-size:2.6rem !important;
    line-height:1.05 !important;
  }
  .hero .subtitle{
    font-size:0.75rem !important;
    letter-spacing:2px !important;
    margin-bottom:24px !important;
  }
  .hero-actions{ gap:8px !important; }
  .hero-cta-primary, .hero-cta-secondary{
    height:48px !important; font-size:12px !important;
    padding:0 22px !important;
  }

  /* Tap targets mínimos 44x44 */
  .fav-heart{ width:40px !important; height:40px !important; font-size:14px !important; }
  .ci-remove, .ci-qty button{ min-width:44px; min-height:44px; }
  .adm-close, .im-close, .ap-back, .cv-back, .fp-back, .cart-back, .co-back{
    min-width:44px; min-height:44px;
  }
  .ap-thumb, .product-info .btn, .cv-card .cv-btn{ min-height:44px; }

  /* Toast NO debe taparse con bottom-nav */
  #cart-toast, #fav-toast{
    top:auto !important; bottom:calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    right:10px !important; left:10px !important;
    max-width:none !important;
    transform:translateY(120px) !important;
    transition:transform .35s cubic-bezier(.2,.9,.3,1.4) !important;
  }
  #cart-toast[style*="translateX(0"], #fav-toast[style*="translateX(0"]{
    transform:translateY(0) !important;
  }
}

/* ===== Cart counter pulse animation ===== */
@keyframes cartPulse{
  0%, 100%{ transform:scale(1); }
  30%{ transform:scale(1.5); }
}
.cart-bump{
  animation:cartPulse .5s cubic-bezier(.36,.07,.19,.97);
}

/* ===== Pull to refresh ===== */
#ptrIndicator{
  position:fixed; top:0; left:50%;
  transform:translate(-50%, -80px);
  width:50px; height:50px; border-radius:50%;
  background:#0a0a0a; border:2px solid #39ff14;
  display:flex; align-items:center; justify-content:center;
  z-index:99996; pointer-events:none;
  box-shadow:0 4px 18px rgba(57,255,20,0.4);
  transition:transform .25s ease;
}
#ptrIndicator.show{ transform:translate(-50%, calc(20px + env(safe-area-inset-top, 0px))); }
#ptrIndicator i{
  color:#39ff14; font-size:20px;
  transition:transform .15s linear;
}
#ptrIndicator.refreshing i{ animation:ptrSpin .8s linear infinite; }
@keyframes ptrSpin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

/* ===== Offline banner (z-index BAJO así no tapa modales) ===== */
#offlineBanner{
  position:fixed; top:0; left:0; right:0;
  background:linear-gradient(90deg,#ff4444 0%, #d32f2f 100%);
  color:#fff; padding:10px 16px;
  font-family:'Raleway',sans-serif;
  font-size:13px; font-weight:700; letter-spacing:0.5px;
  text-align:center;
  z-index:9990;
  transform:translateY(-100%);
  /* OJO: la sombra roja va SOLO en .show. Oculto con translateY(-100%), el borde
     inferior del banner queda EXACTO en y=0 y su box-shadow (+4px, blur 18px) se
     derramaba hacia abajo → un degradé rojo permanente en el top del viewport
     (el "resplandor rojo al scrollear" que reportó el titular). visibility:hidden
     además elimina cualquier paint mientras está retraído. */
  box-shadow:none;
  visibility:hidden;
  transition:transform .35s cubic-bezier(.2,.9,.3,1.4), visibility 0s linear .35s;
}
#offlineBanner.show{
  transform:translateY(0);
  visibility:visible;
  box-shadow:0 4px 18px rgba(255,68,68,0.4);
  transition:transform .35s cubic-bezier(.2,.9,.3,1.4), visibility 0s;
}
#offlineBanner i{ margin-right:8px; }

/* Cuando el banner offline está visible, dar espacio extra a modales arriba */
body.is-offline #adminDash.open,
body.is-offline #adminModal.open,
body.is-offline #infoModal.open{
  padding-top:60px !important;
}

/* Asegurar que los modales admin/info tengan z-index suficientemente alto */
#adminDash{ z-index:100000 !important; }
#adminModal{ z-index:100001 !important; }
#infoModal{ z-index:100001 !important; }

/* ===== PWA Install Prompt ===== */
#installPrompt{
  display:none; position:fixed; bottom:calc(80px + env(safe-area-inset-bottom, 0px)); left:14px; right:14px;
  z-index:99995;
  background:linear-gradient(135deg,#0a0a0a 0%, #1a1a1a 100%);
  border:1.5px solid #39ff14; border-radius:14px;
  padding:16px;
  box-shadow:0 12px 35px rgba(0,0,0,0.7), 0 0 22px rgba(57,255,20,0.18);
  transform:translateY(180%);
  transition:transform .4s cubic-bezier(.2,.9,.3,1.4);
}
#installPrompt.show{ display:block; transform:translateY(0); }
.ip-row{ display:flex; align-items:center; gap:14px; }
.ip-icon{
  width:48px; height:48px; border-radius:14px; flex-shrink:0;
  background:linear-gradient(135deg,#39ff14,#2ecc00); color:#000;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:24px;
  box-shadow:0 4px 12px rgba(57,255,20,0.3);
}
.ip-text{ flex:1; min-width:0; }
.ip-text .t{ color:#fff; font-weight:800; font-size:14px; }
.ip-text .s{ color:#aaa; font-size:12px; margin-top:2px; line-height:1.3; }
.ip-close{
  background:transparent; border:none; color:#666;
  font-size:18px; cursor:pointer;
  width:36px; height:36px; min-width:36px; min-height:36px; box-sizing:border-box; border-radius:50%;
}
.ip-actions{ display:flex; gap:10px; margin-top:14px; }
.ip-btn{
  flex:1; padding:10px; border-radius:8px; cursor:pointer;
  font-family:inherit; font-weight:800; font-size:12px;
  letter-spacing:1px; text-transform:uppercase;
}
.ip-btn-primary{
  background:linear-gradient(45deg,#39ff14,#2ecc00); color:#000; border:none;
}
.ip-btn-secondary{
  background:transparent; color:#888; border:1px solid #2a2a2a;
}
@media (min-width:821px){ #installPrompt{ display:none !important; } }

/* ===== Bottom Sheet (filtros) ===== */
#bottomSheet{
  display:none; position:fixed; inset:0; z-index:99994;
  background:rgba(0,0,0,0.6); backdrop-filter:blur(6px);
}
#bottomSheet.open{ display:block; }
.bs-panel{
  position:absolute; bottom:0; left:0; right:0;
  background:#0a0a0a; border-top:1.5px solid #39ff14;
  border-radius:20px 20px 0 0;
  padding:14px 18px calc(20px + env(safe-area-inset-bottom, 0px));
  transform:translateY(100%);
  transition:transform .35s cubic-bezier(.2,.9,.3,1.4);
  max-height:80vh; overflow-y:auto;
  box-shadow:0 -8px 30px rgba(0,0,0,0.7);
}
#bottomSheet.open .bs-panel{ transform:translateY(0); }
.bs-handle{
  width:50px; height:4px; background:#2a2a2a; border-radius:2px;
  margin:0 auto 14px;
}
.bs-head{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid #1f1f1f;
}
.bs-head h3{
  font-family:'Cormorant Garamond',serif;
  color:#fff; font-size:22px; letter-spacing:1px;
}
.bs-head h3 span{ color:#39ff14; }
.bs-close{
  background:#1a1a1a; border:none; color:#aaa;
  width:36px; height:36px; min-width:36px; min-height:36px; box-sizing:border-box; border-radius:50%;
  font-size:16px; cursor:pointer;
}
.bs-section{ margin-bottom:18px; }
.bs-section-title{
  color:#888; font-size:11px; letter-spacing:2px;
  text-transform:uppercase; font-weight:800;
  margin-bottom:10px;
}
.bs-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.bs-chip{
  padding:10px 18px; background:#0f0f0f; border:1.5px solid #2a2a2a;
  color:#bbb; border-radius:30px; cursor:pointer;
  font-size:13px; font-weight:600;
  font-family:inherit;
}
.bs-chip.active{
  background:rgba(57,255,20,0.15); border-color:#39ff14; color:#39ff14;
}
.bs-apply{
  width:100%; background:linear-gradient(45deg,#39ff14,#2ecc00); color:#000;
  border:none; padding:15px; border-radius:10px; cursor:pointer;
  font-family:inherit; font-weight:800; font-size:14px;
  letter-spacing:2px; text-transform:uppercase;
  margin-top:8px;
}

/* ===== Mobile: filter trigger button visible only on mobile ===== */
.cv-mobile-filter-btn{
  display:none; width:100%; padding:14px;
  background:#0f0f0f; border:1px solid #2a2a2a; border-radius:12px;
  color:#fff; font-family:inherit; font-weight:700;
  font-size:13px; letter-spacing:1px; text-transform:uppercase;
  cursor:pointer; margin-bottom:18px;
  display:none; align-items:center; justify-content:center; gap:10px;
}
.cv-mobile-filter-btn i{ color:#39ff14; }
@media (max-width:820px){
  .cv-mobile-filter-btn{ display:flex !important; }
  .cv-toolbar{ display:none !important; }
}

/* ===== Live search suggestions ===== */
/* ── Sugerencias de búsqueda en vivo (rediseño 2026-07-05) ──
   Minimalista y oscuro: borde sutil (no neón pleno), filas redondeadas con
   hover neutro, imágenes sobre "pozo" oscuro (antes fondo #fff disruptivo), y
   un solo acento verde = el precio (mismo lenguaje que las cards). */
.search-suggestions{
  position:absolute; top:calc(100% + 8px); left:0; right:0;
  background:#0c0c0c; border:1px solid #1f1f1f; border-radius:14px;
  z-index:9999; max-height:400px; overflow-y:auto; overflow-x:hidden;
  box-shadow:0 20px 48px rgba(0,0,0,0.6);
  display:none; padding:6px;
}
.search-suggestions.show{ display:block; }
.ss-item{
  display:flex; align-items:center; gap:12px;
  padding:10px 12px; cursor:pointer;
  border-radius:10px;
  transition:background .16s ease;
}
.ss-item:hover{ background:rgba(255,255,255,0.045); }
.ss-img{
  width:44px; height:44px; border-radius:10px;
  background:radial-gradient(ellipse at center,#171717 0%,#0d0d0d 78%);
  border:1px solid #1e1e1e;
  display:flex; align-items:center; justify-content:center; padding:5px;
  flex-shrink:0; overflow:hidden;
}
.ss-img img{ max-width:100%; max-height:100%; object-fit:contain; }
.ss-info{ flex:1; min-width:0; }
.ss-info .n{ color:#f2f2f2; font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ss-info .b{ color:#7d7d7d; font-size:10.5px; font-weight:600; letter-spacing:1px; text-transform:uppercase; margin-top:2px; }
.ss-price{ color:#39ff14; font-weight:800; font-size:14px; flex-shrink:0; letter-spacing:-0.3px; }
.ss-section{
  padding:9px 12px 6px;
  color:#5f5f5f; font-size:9.5px; letter-spacing:2px;
  font-weight:700; text-transform:uppercase;
  background:transparent;
}
.ss-empty{
  padding:26px 20px; text-align:center; color:#777;
  font-size:13px;
}
.ss-empty i{ color:#333; margin-right:6px; }

/* ===== Fixed back button mobile (cuando producto está abierto) ===== */
.m-back-fixed{
  display:none; position:fixed;
  top:calc(10px + env(safe-area-inset-top, 0px)); left:14px;
  z-index:9510; width:42px; height:42px; border-radius:50%;
  background:rgba(0,0,0,0.75); border:1.5px solid #39ff14;
  color:#39ff14; cursor:pointer; font-size:16px;
  box-shadow:0 4px 14px rgba(0,0,0,0.6);
  backdrop-filter:blur(6px);
  align-items:center; justify-content:center;
}
@media (max-width:820px){
  .m-back-fixed.show{ display:flex; }
}

/* ===== Mobile share button on product detail ===== */
.ap-share-btn{
  display:none; position:fixed;
  top:calc(10px + env(safe-area-inset-top, 0px)); right:14px;
  z-index:9510; width:42px; height:42px; border-radius:50%;
  background:rgba(0,0,0,0.75); border:1.5px solid #39ff14;
  color:#39ff14; cursor:pointer; font-size:14px;
  box-shadow:0 4px 14px rgba(0,0,0,0.6);
  backdrop-filter:blur(6px);
  align-items:center; justify-content:center;
}
@media (max-width:820px){
  .ap-share-btn.show{ display:flex; }
}

/* Desktop share button inside product info */
.ap-share-inline{
  display:none; background:transparent; border:1px solid #2a2a2a;
  color:#bbb; padding:8px 14px; border-radius:8px;
  cursor:pointer; font-family:inherit; font-weight:600;
  font-size:12px; letter-spacing:1px; text-transform:uppercase;
  align-items:center; gap:6px;
  margin-left:10px;
}
.ap-share-inline:hover{ border-color:#39ff14; color:#39ff14; }
@media (min-width:821px){
  .ap-share-inline{ display:inline-flex; }
}

/* ===== Skeleton para home (brand sections iniciales) ===== */
.brand-section .product-card.sk-mode{ pointer-events:none; }
.brand-section .product-card.sk-mode > *{ visibility:hidden; }
.brand-section .product-card.sk-mode::before{
  content:''; position:absolute; inset:10px;
  border-radius:10px;
  background:linear-gradient(90deg,#1a1a1a 0%,#222 50%,#1a1a1a 100%);
  background-size:200% 100%;
  animation:skShimmer 1.4s ease-in-out infinite;
}

/* ===== Swipe-to-delete cart item ===== */
.cart-item{ position:relative; overflow:hidden; transition:transform .3s; }
.cart-item.swiping{ transition:none; }
.cart-item-swipe-action{
  position:absolute; top:0; right:0; bottom:0;
  width:90px; background:#ff4444;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:20px;
  border-radius:0 10px 10px 0;
  opacity:0; transition:opacity .2s;
}
.cart-item.swipe-active .cart-item-swipe-action{ opacity:1; }

/* ===== Slide page transitions ===== */
.page-slide-enter{
  animation:pageSlideIn .3s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes pageSlideIn{
  from{ transform:translateX(28px); opacity:0; }
  to{ transform:translateX(0); opacity:1; }
}

/* ===== Back to top button ===== */
#backToTop{
  display:none; position:fixed; bottom:calc(80px + env(safe-area-inset-bottom, 0px)); right:14px;
  z-index:9986; width:46px; height:46px; border-radius:50%;
  background:rgba(57,255,20,0.95); color:#000;
  border:none; cursor:pointer; font-size:18px;
  box-shadow:0 6px 18px rgba(57,255,20,0.4);
  align-items:center; justify-content:center;
  transition:opacity .25s, transform .25s;
  opacity:0;
}
#backToTop.show{ display:flex; opacity:1; }
#backToTop:active{ transform:scale(0.9); }
@media (min-width:821px){ #backToTop{ bottom:24px; right:24px; } }