*{box-sizing:border-box}html,body{margin:0;padding:0}
:root{--bg:#0d1117;--text:#e5e7eb;--muted:#94a3b8;--brand:#ffffff;--accent:#6366f1;--accent-2:#10b981;--border:#243044;--panel:#1b2430;--panel-alt:#222f3b;--danger:#ef4444;--topbar-h:72px;--z-topbar:100;--z-fab:200;--z-drawer-backdrop:1100;--z-drawer-panel:1110}
body{font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;color:var(--text);background:var(--bg)}
.container{max-width:1050px;margin:0 auto;padding:0 16px}

/* Container sin padding para admin (full width) */
body:has(.admin-products-grid) .container.content,
body:has(.admin-header) .container.content{padding:0;max-width:100%}
.row{display:flex;gap:16px;box-sizing:border-box}.between{justify-content:space-between}.center{align-items:center}.wrap{flex-wrap:wrap}

.site{display:flex;flex-direction:column;min-height:100vh}
.content{flex:1 1 auto}


.topbar{background:#111827;color:#fff;padding:12px 0;box-shadow:0 1px 0 rgba(31,41,55,.8);position:sticky;top:0;z-index:var(--z-topbar)}
.brand{display:flex;flex-direction:row;align-items:center;gap:10px;color:#fff;text-decoration:none}
.brand-logo{background:#f1f5f9;padding:4px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.06),0 2px 4px -2px rgba(0,0,0,.55);display:block;width:56px;height:56px;object-fit:contain}
.brand-text{display:flex;flex-direction:column;gap:2px;line-height:1}
.brand-title{font-weight:700;font-size:20px}
.brand-sub{font-size:13px;opacity:.8}
.header-search{display:flex;align-items:center}
.header-search input[type=text]:focus{outline:2px solid var(--accent);outline-offset:1px}
.mainnav{display:flex;gap:18px;align-items:center}
.mainnav a{color:#fff;text-decoration:none;font-size:15px;opacity:.92;padding:8px 14px;border-radius:8px;transition:all .2s;font-weight:500}
.mainnav a:hover{opacity:1;background:rgba(99,102,241,.15)}
.mainnav .whatsapp{background:#25D366;color:#111827;border-radius:8px;padding:8px 14px;font-weight:600;display:none}


/* Hero Badge */
.hero-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:linear-gradient(135deg,#1e3a8a,#1d4ed8);border:1px solid #2563eb;border-radius:999px;font-size:13px;font-weight:600;color:#93c5fd;margin-bottom:16px;box-shadow:0 2px 8px rgba(29,78,216,.3);animation:fadeInUp .5s ease}

.hero{display:grid;grid-template-columns:1fr;gap:16px;align-items:center;margin:20px 0;flex-direction:column}
.hero-copy h1{font-size:32px;margin:0 0 8px;animation:fadeInUp .6s ease .1s backwards}
.hero-copy p{color:#c7d2fe;margin:0 0 12px}
.hero-lead{animation:fadeInUp .6s ease .2s backwards}
.hero-actions{display:flex;gap:10px;margin:12px 0 8px;animation:fadeInUp .6s ease .3s backwards;flex-wrap:wrap}
.btn-hero,.btn-hero-secondary{display:inline-flex !important;align-items:center;justify-content:center;gap:8px;padding:14px 24px !important;font-size:15px;box-shadow:0 4px 14px rgba(0,0,0,.3);transition:all .2s}
.btn-hero{position:relative;overflow:hidden;padding:16px 32px !important;font-size:17px;font-weight:700;background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%);border:2px solid #818cf8;box-shadow:0 6px 24px rgba(99,102,241,.4),0 0 0 0 rgba(99,102,241,.6);animation:pulseGlow 2s ease-in-out infinite}
.btn-hero::before{content:'';position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;background:rgba(255,255,255,.4);transform:translate(-50%,-50%);transition:width .6s,height .6s}
.btn-hero:hover::before{width:300px;height:300px}
.btn-hero svg,.btn-hero-secondary svg{transition:transform .2s;flex-shrink:0;position:relative;z-index:1}
.btn-hero span,.btn-hero-secondary span{display:inline-block;position:relative;z-index:1}
.btn-hero:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 8px 32px rgba(99,102,241,.6),0 0 0 4px rgba(99,102,241,.2);animation:none}
.btn-hero:hover svg{transform:scale(1.15) rotate(8deg)}
.btn-hero-secondary:hover svg{transform:rotate(15deg)}
@keyframes pulseGlow{0%,100%{box-shadow:0 6px 24px rgba(99,102,241,.4),0 0 0 0 rgba(99,102,241,.6)}50%{box-shadow:0 6px 32px rgba(99,102,241,.6),0 0 0 8px rgba(99,102,241,.3)}}

/* Hero Features */
.hero-features{display:flex;flex-wrap:wrap;gap:16px;margin-top:20px;animation:fadeInUp .6s ease .4s backwards}
.hero-feature{display:flex;align-items:center;gap:8px;font-size:13px;color:#cbd5e1;padding:8px 12px;background:rgba(30,41,59,.5);border:1px solid rgba(51,65,85,.6);border-radius:12px;transition:all .2s}
.hero-feature svg{color:#10b981;flex-shrink:0}
.hero-feature:hover{background:rgba(30,41,59,.8);border-color:rgba(51,65,85,.9);transform:translateY(-2px)}

.btn-primary,.btn-secondary{display:inline-block;padding:12px 16px;border-radius:10px;text-decoration:none;border:1px solid var(--border);font-weight:600;transition:background .18s,filter .18s;min-height:44px;box-sizing:border-box}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-primary:hover{filter:brightness(.92)}
.btn-secondary{background:var(--panel);color:var(--text);border-color:var(--border)}
.btn-secondary:hover{background:var(--panel-alt)}
.btn-secondary.small{padding:8px 12px;font-size:13px;min-height:40px}
.hero-hours{font-size:14px;color:var(--muted);margin-top:6px;animation:fadeInUp .6s ease .5s backwards}

/* Stats Section */
.stats-section{margin:48px 0;padding:32px 0;background:linear-gradient(145deg,#0f1822,#0b121a);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:1050px;margin:0 auto;padding:0 16px}
.stat-item{text-align:center;padding:20px 14px;background:linear-gradient(145deg,#13202b,#101923);border:1px solid var(--border);border-radius:18px;transition:transform .3s,box-shadow .3s;animation:scaleIn .5s ease backwards}
.stat-item:nth-child(1){animation-delay:.1s}
.stat-item:nth-child(2){animation-delay:.2s}
.stat-item:nth-child(3){animation-delay:.3s}
.stat-item:nth-child(4){animation-delay:.4s}
.stat-item:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.4)}
.stat-icon{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;background:linear-gradient(135deg,#6366f1,#4f46e5);border-radius:50%;margin:0 auto 16px;box-shadow:0 4px 12px rgba(99,102,241,.35)}
.stat-icon svg{color:#fff}
.stat-value{font-size:32px;font-weight:800;margin:0 0 6px;background:linear-gradient(135deg,#fff,#a5b4fc);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat-label{font-size:13px;color:var(--muted);font-weight:500;letter-spacing:.3px}
@keyframes scaleIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
.hero-media .img-placeholder{background:#1e293b;border:1px dashed #334155;height:190px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#64748b}


.hero-lead{font-size:18px;font-weight:400;line-height:1.5;color:var(--muted);max-width:560px;margin:0 0 14px;font-optical-sizing:auto}
@media (max-width:720px){.hero-lead{font-size:16px}}
@media (max-width:420px){.hero-lead{font-size:15px;line-height:1.45}}


.filters{margin:10px 0 18px}
.filters-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
/* Ocultar fila antigua de filtros si quedara en el DOM */
.filters-row{display:none!important}
.result-count{color:#cbd5e1;margin:4px 0 8px;font-size:13px}
.active-chips{margin:8px 0 12px;display:flex;flex-wrap:wrap;gap:8px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.field input,.field select{background:#12202c;color:var(--text);border:1px solid var(--border);padding:9px 10px;border-radius:10px;min-width:200px}
.field input:focus,.field select:focus{outline:2px solid var(--accent);outline-offset:1px}
.btn-primary:focus-visible,.btn-secondary:focus-visible,.page-btn:focus-visible,.nav-toggle:focus-visible,.drawer .drawer-close:focus-visible,.share-btn:focus-visible,.icon-btn:focus-visible,a:focus-visible{outline:2px solid #f59e0b;outline-offset:2px}
.field.grow{flex:1}
.toggle-group{display:flex;gap:8px}
.toggle{display:flex;align-items:center;border:1px solid var(--border);border-radius:999px;padding:6px 12px;cursor:pointer;user-select:none;background:#12202c;color:var(--muted);transition:background .18s,color .18s;min-height:44px}
.toggle input{display:none}.toggle span{font-size:13px}
.toggle.active{background:var(--accent);color:#fff;border-color:var(--accent)}
@media (min-width:600px){.toggle{padding:4px 8px;min-height:auto}}
.link-reset{margin-left:8px;color:#cbd5e1;text-decoration:underline;text-underline-offset:2px}
.link{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.link:hover{filter:brightness(1.05)}


/* Featured Products Section */
.featured-section{margin:56px 0}
.section-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:24px;flex-wrap:wrap;gap:16px}
.section-header-content{flex:1}
.section-title{font-size:28px;font-weight:800;margin:0 0 6px;letter-spacing:-.5px}
.section-subtitle{font-size:15px;color:var(--muted);margin:0}
.section-link{display:inline-flex;align-items:center;gap:6px;color:var(--accent);text-decoration:none;font-weight:600;font-size:14px;padding:8px 16px;background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.2);border-radius:12px;transition:all .2s}
.section-link svg{transition:transform .2s}
.section-link:hover{background:rgba(99,102,241,.15);border-color:rgba(99,102,241,.3);transform:translateY(-1px)}
.section-link:hover svg{transform:translateX(3px)}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.cards--products{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.cards--products .btn-secondary.small{padding:8px 12px;font-size:13px}
.cards--featured{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}

.card{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--panel);display:flex;flex-direction:column;box-shadow:0 2px 4px -2px rgba(0,0,0,.4)}
.card--featured{border-radius:18px;transition:transform .3s,box-shadow .3s;animation:fadeInUp .5s ease backwards}
.card--featured:nth-child(1){animation-delay:.1s}
.card--featured:nth-child(2){animation-delay:.2s}
.card--featured:nth-child(3){animation-delay:.3s}
.card--featured:nth-child(4){animation-delay:.4s}
.card--featured:nth-child(5){animation-delay:.5s}
.card--featured:nth-child(6){animation-delay:.6s}
.card--featured:hover{transform:translateY(-6px);box-shadow:0 12px 32px rgba(0,0,0,.5)}

.card-link{text-decoration:none;color:inherit;display:flex;flex-direction:column;height:100%}
.card-media--featured{position:relative;overflow:hidden}
.card-media--featured img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform .4s ease}
.card--featured:hover .card-media--featured img{transform:scale(1.08)}
.card-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.8),transparent 50%);display:flex;align-items:flex-end;justify-content:center;padding:16px;opacity:0;transition:opacity .3s}
.card--featured:hover .card-overlay{opacity:1}
.card-overlay-text{color:#fff;font-size:13px;font-weight:600;background:rgba(99,102,241,.9);padding:8px 16px;border-radius:999px;transform:translateY(8px);transition:transform .3s}
.card--featured:hover .card-overlay-text{transform:translateY(0)}

.card-body--featured{padding:16px;flex:1}
.card-category-badge{display:inline-block;padding:4px 10px;background:rgba(99,102,241,.15);border:1px solid rgba(99,102,241,.3);color:#a5b4fc;font-size:11px;font-weight:600;border-radius:6px;margin-bottom:10px;letter-spacing:.5px}
.card-title--featured{font-size:16px;margin:0 0 12px;line-height:1.4}
.card-title--featured:hover{color:var(--accent)}
.card-price-row{display:flex;justify-content:space-between;align-items:center}
.card-price{font-size:20px;font-weight:800;color:#fff}
.card-ready-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;background:#064e3b;color:#34d399;font-size:11px;font-weight:600;border-radius:6px;border:1px solid #065f46}
.card-media{position:relative;background:#0f1822;min-height:150px;display:flex;align-items:center;justify-content:center}
.card-media img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.placeholder{color:#64748b}
.badges{position:absolute;top:8px;left:8px;display:flex;gap:6px}
.badge{font-size:11px;padding:4px 8px;border-radius:999px;background:#1e293b;color:#cbd5e1;border:1px solid #334155}
.badge.green{background:#064e3b;color:#34d399;border:1px solid #065f46}
.badge.gray{background:#1e293b;color:#94a3b8;border:1px solid #334155}
.card-body{padding:12px}
.card-body{display:flex;flex-direction:column}
.card-title{margin:0 0 4px;font-size:16px}
.card-title a{color:var(--text);text-decoration:none}
.card-title a:hover{text-decoration:underline}
.card-meta{font-size:12px;color:#cbd5e1;margin-bottom:6px}
.price-row{display:flex;align-items:center;gap:6px;margin:6px 0 10px}
.price{font-weight:800}
.actions{display:flex;gap:8px;margin-top:auto}


.product-view{display:grid;grid-template-columns:.9fr 1.1fr;gap:24px}
.pv-img{background:#0f1822;border:1px solid var(--border);border-radius:14px;height:340px;display:flex;align-items:center;justify-content:center;color:#64748b}
.pv-title{margin:0 0 6px}
.pv-price{font-size:22px;font-weight:800;margin-bottom:8px}
.pv-desc{color:var(--muted);margin-bottom:12px}
.pv-form{display:grid;gap:10px;max-width:320px}
.pv-form select{border:1px solid var(--border);border-radius:10px;padding:8px;background:#12202c;color:var(--text)}


.pagination{display:flex;gap:10px;align-items:center;justify-content:center;margin:18px 0}
.page-btn{border:1px solid var(--border);padding:8px 10px;border-radius:10px;text-decoration:none;color:var(--text);background:#12202c}
.page-btn:hover{background:var(--panel-alt)}


.footer{margin-top:24px;background:#111827;border-top:1px solid #1f2937;padding:18px 0}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.f-title{font-weight:700;margin-bottom:6px}
.f-list{margin:0;padding-left:16px;color:var(--muted)}
.copyright{text-align:center;margin-top:12px;font-size:12px;color:var(--muted)}


.hero-carousel{position:relative;overflow:hidden;border-radius:14px;border:1px solid var(--border);background:#0b121a;height:300px} 
.hero-carousel .hc-slide-link{position:absolute;inset:0;display:block;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .5s ease}
.hero-carousel .hc-slide-link.active{opacity:1;pointer-events:auto}
.hero-carousel .hc-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.03);transition:opacity .5s ease,transform .8s ease}
.hero-carousel .hc-slide.active{opacity:1;transform:scale(1)}
.hc-dots{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:flex;gap:8px}
.hc-dots .dot{width:9px;height:9px;border-radius:999px;border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.25);cursor:pointer}
.hc-dots .dot.active{background:#fff}
@media (min-width:900px){.hero{grid-template-columns:1.2fr .8fr;gap:24px;margin:28px 0;flex-direction:row}.mega{font-size:32px}.hero-carousel{height:300px}}
@media (max-width:900px){.hero-carousel{height:220px}}



/* Breadcrumbs */
.breadcrumbs{display:flex;align-items:center;gap:8px;padding:12px 0;font-size:13px;color:var(--muted);flex-wrap:wrap}
.breadcrumbs a{color:var(--muted);text-decoration:none;transition:color .2s}
.breadcrumbs a:hover{color:var(--text)}
.bc-sep{color:#475569;user-select:none}
.bc-current{color:var(--text);font-weight:500}

.product-detail{display:grid;grid-template-columns:minmax(300px,40vw) 1fr;gap:40px;margin-top:8px;align-items:start}
@media (max-width:900px){.product-detail{grid-template-columns:1fr}}
.pd-media{background:#0f1822;border:1px solid var(--border);border-radius:18px;padding:12px;display:flex;align-items:center;justify-content:center;width:100%;min-height:auto;align-self:start;position:sticky;top:calc(var(--topbar-h) + 10px)}
@media (max-width:900px){.pd-media{position:static}}

/* Product badges */
.pd-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.pd-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.4px;background:#1e293b;color:#cbd5e1;border:1px solid #334155;box-shadow:0 2px 4px rgba(0,0,0,.15)}
.pd-badge.eco{background:#14532d;color:#86efac;border-color:#166534}
.pd-badge.custom{background:#581c87;color:#c084fc;border-color:#6b21a8}

/* Product title */
.pd-title{font-size:28px;font-weight:800;line-height:1.3;margin:0 0 12px;color:#fff;letter-spacing:-.3px}

.pd-price-box{background:linear-gradient(135deg,#1a2332,#141d28);border:1px solid #2c3e50;border-radius:16px;padding:16px 20px;margin:12px 0 16px;box-shadow:0 4px 12px rgba(0,0,0,.3)}
.pd-price{font-size:32px;font-weight:800;margin:0;background:linear-gradient(135deg,#fff,#a5b4fc);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.2}
.pd-price-note{font-size:12px;color:var(--muted);margin-top:4px;font-weight:500}

/* Trust signals */
.trust-signals{display:grid;gap:10px;margin:16px 0;padding:16px;background:linear-gradient(145deg,#13202b,#101923);border:1px solid var(--border);border-radius:14px}
.trust-item{display:flex;align-items:center;gap:10px;font-size:13px;color:#e2e8f0}
.trust-item svg{color:#10b981;flex-shrink:0}

/* Product section title */
.pd-section-title{font-size:16px;font-weight:700;letter-spacing:.3px;margin:0 0 12px;color:#fff}

/* Product details */
.pd-details{background:linear-gradient(145deg,#13202b,#101923);border:1px solid var(--border);border-radius:14px;padding:18px;margin:16px 0}
.pd-desc{margin:0 0 16px;line-height:1.7;color:#cbd5e1;font-size:14px}

/* Specs */
.pd-specs{display:flex;flex-direction:column;gap:14px}
.spec-item{display:flex;align-items:flex-start;gap:12px}
.spec-item svg{color:#6366f1;flex-shrink:0;margin-top:2px}
.spec-label{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:600;margin-bottom:3px}
.spec-value{font-size:14px;color:#e2e8f0;font-weight:500}

.pd-carousel{position:relative;display:flex;flex-direction:column;gap:10px;width:100%}

.pd-slides{position:relative;width:100%;height:clamp(220px,40vw,520px);max-height:70vh}
.pd-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#0b121a;border-radius:14px;opacity:0;transition:opacity .45s ease;padding:4px;pointer-events:none}
.pd-slide.active{opacity:1}
.pd-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(15,24,34,.55);border:1px solid var(--border);color:#fff;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;cursor:pointer;backdrop-filter:blur(3px);transition:background .2s;z-index:5}
.pd-nav:hover{background:rgba(99,102,241,.8)}
.pd-nav.prev{left:10px}
.pd-nav.next{right:10px}
.pd-thumbs{display:flex;gap:8px;overflow-x:auto;padding:4px 2px}
.pd-thumb{border:2px solid transparent;padding:0;border-radius:10px;cursor:pointer;background:none;flex:0 0 auto}
.pd-thumb img{width:60px;height:60px;object-fit:cover;border-radius:10px;display:block}
.pd-thumb.active{border-color:var(--accent)}
@media (min-width:900px){.pd-thumb img{width:64px;height:64px;border-radius:8px}}
@media (max-width:600px){.pd-thumb img{width:56px;height:56px}.product-detail{gap:24px}}

@media (min-width:1600px){.product-detail{grid-template-columns:640px 1fr}}


/* Nota informativa en detalle de producto */
.pd-note{margin:16px 0;padding:14px 16px;border:1px solid #2a3b4f;background:linear-gradient(145deg,#0f1c2a,#0d1723);border-radius:14px;font-size:13px;color:#e2e8f0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);display:flex;align-items:flex-start;gap:12px}
.pd-note svg{color:#fbbf24;flex-shrink:0;margin-top:1px}
.pd-note div{flex:1}
.pd-note a{color:#25D366;text-decoration:underline;text-underline-offset:2px}
.pd-note strong{color:#cbd5e1}

@media (max-width:520px){
  .product-detail{gap:24px}
  .pd-slides{height:auto;aspect-ratio:1/1;max-height:80vh}
  .pd-slide{position:absolute}
  .pd-thumb img{width:50px;height:50px}
}
@media (orientation:landscape) and (max-height:500px){
  .pd-slides{height:clamp(180px,55vh,420px)}
}


.color-picker{display:flex;flex-direction:column;gap:10px;margin:0 0 18px;padding:18px;background:linear-gradient(145deg,#13202b,#101923);border:1px solid var(--border);border-radius:14px}
.color-picker .pd-section-title{margin-bottom:8px}
.cp-label{font-size:13px;font-weight:600;letter-spacing:.5px;color:var(--muted);margin-bottom:4px}
.cp-swatches{display:flex;flex-wrap:wrap;gap:8px}
.swatch{width:40px;height:40px;border-radius:12px;border:2px solid transparent;background:var(--c,#334155);cursor:pointer;position:relative;transition:transform .15s,border-color .15s,box-shadow .15s;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px rgba(0,0,0,.2)}
.swatch:hover{transform:scale(1.08);box-shadow:0 4px 8px rgba(0,0,0,.3)}
.swatch:focus{outline:2px solid var(--accent);outline-offset:2px}
.swatch.active{border-color:var(--accent);box-shadow:0 0 0 3px rgba(99,102,241,.4);transform:scale(1.05)}
.swatch-other{background:linear-gradient(135deg,#1e293b,#0f1822);border:2px dashed #475569 !important;display:flex;align-items:center;justify-content:center;font-weight:700;color:#94a3b8}
.swatch-other::after{content:"+";font-size:20px;line-height:1}

/* Custom color input */
.custom-color-row{margin-top:8px}
#customColorInput{background:#12202c;border:1px solid var(--border);color:var(--text);padding:10px 14px;border-radius:12px;font-size:14px;width:100%;max-width:280px;transition:border-color .2s,box-shadow .2s}
#customColorInput:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(99,102,241,.25)}
#customColorInput::placeholder{color:#64748b}

@media (min-width:600px){.swatch{width:34px;height:34px;border-radius:10px}.swatch-other::after{font-size:16px}}
@media (max-width:520px){.swatch{width:32px;height:32px;border-radius:10px}.cp-swatches{gap:5px}.swatch-other::after{font-size:14px}#customColorInput{font-size:13px;padding:9px 12px}}



.cart-table{width:100%;border-collapse:collapse;margin:8px 0 20px;font-size:14px;background:var(--panel);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.cart-table thead th{background:#12202c;padding:10px 12px;font-size:11px;letter-spacing:.6px;text-transform:uppercase;font-weight:600;color:var(--muted)}
.cart-table td{padding:10px 12px;vertical-align:middle}
.cart-prod{display:flex;align-items:center;gap:12px;min-width:180px}
.cart-prod img.thumb{width:72px;height:72px;object-fit:cover;display:block;border-radius:12px;border:1px solid var(--border);background:#0f1822}
@media (max-width:600px){.cart-prod img.thumb{width:56px;height:56px;border-radius:10px}}
.color-dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--border);box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.qty-form{display:inline-flex;align-items:center;gap:6px;background:#12202c;padding:4px 8px;border-radius:999px}
.qbtn{background:var(--panel-alt);border:1px solid var(--border);color:var(--text);width:32px;height:32px;border-radius:50%;cursor:pointer;font-weight:600;display:flex;align-items:center;justify-content:center;padding:0;min-width:32px}
.qbtn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.qval{min-width:28px;text-align:center;font-weight:600}
@media (min-width:600px){.qbtn{width:26px;height:26px}.qval{min-width:22px}}
.cart-summary{display:flex;flex-direction:column;gap:14px;margin:10px 0 30px;max-width:420px}
.cart-summary .total{font-size:15px;color:var(--muted)}
.checkout-form{display:flex;flex-direction:column;gap:18px;background:linear-gradient(140deg,#17212c,#141b24 55%);border:1px solid var(--border);padding:20px 22px 24px;border-radius:22px;position:relative;box-shadow:0 4px 18px -6px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.02)}
.form-group{display:flex;flex-direction:column;gap:6px}
.form-label{font-size:13px;font-weight:600;letter-spacing:.6px;color:var(--muted);text-transform:none}
.form-input{background:#0f1924;border:1px solid #223140;color:var(--text);padding:11px 13px;border-radius:14px;font-size:14px;transition:border-color .18s,background .18s,box-shadow .18s}
.form-input:focus{outline:none;border-color:var(--accent);background:#142334;box-shadow:0 0 0 2px rgba(99,102,241,.35)}
.form-input::placeholder{color:#5d7389}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px}
.shipping-box{border:1px solid #223140;border-radius:20px;padding:16px 18px 18px;margin-top:2px;display:flex;flex-direction:column;gap:16px;background:linear-gradient(155deg,#1d2834,#16202b 60%);position:relative;box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)}
.shipping-box legend{font-size:11px;letter-spacing:.7px;text-transform:uppercase;color:var(--muted);padding:0 8px;font-weight:600}
.shipping-options{display:flex;flex-direction:column;gap:10px}
.radio-option{display:flex;align-items:flex-start;gap:8px;font-size:14px;cursor:pointer;line-height:1.25;color:var(--text);background:#12202c;padding:10px 12px;border-radius:14px;border:1px solid #1f2c39;transition:background .18s,border-color .18s}
.radio-option:hover{background:#172a3a}
.radio-option input{accent-color:var(--accent);margin-top:2px}
.radio-option span small{font-size:11px;color:var(--muted);font-weight:500;margin-left:4px}
.province-group{display:none;flex-direction:column;gap:10px;animation:fadeSlide .28s ease}
.cost-row,.grand-row{display:flex;justify-content:space-between;align-items:center}
.cost-row{font-size:13px;color:var(--muted)}
.grand-row{font-size:15px;font-weight:600;margin-top:4px}
.grand-val{font-weight:700;color:#fff}
.pay-btn{margin-top:4px;font-size:15px;padding:14px 18px;border-radius:16px;box-shadow:0 6px 24px -6px rgba(99,102,241,.55);font-weight:600}
.pay-btn:hover{filter:brightness(.93);box-shadow:0 8px 28px -6px rgba(99,102,241,.65)}
.pay-btn:active{transform:translateY(1px)}
@media (max-width:640px){
  .checkout-form{padding:18px 16px 22px;border-radius:18px}
  .pay-btn{font-size:14px;padding:12px 16px}
  .radio-option{padding:9px 10px}
}
@keyframes fadeSlide{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}



.nav-toggle{background:#12202c;color:#fff;border:1px solid var(--border);padding:8px 12px;border-radius:10px;font-size:18px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .18s}
.nav-toggle:hover{background:var(--panel-alt)}
.nav-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .25s;z-index:90}
.mainnav{z-index:99}
/* Búsqueda con autocompletado */
.search-wrapper{position:relative;width:100%}
.search-results{position:absolute;top:100%;left:0;right:0;background:#0f172a;border:1px solid #223140;border-radius:12px;margin-top:4px;max-height:400px;overflow-y:auto;z-index:1000;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.search-result-item{min-height:64px}

/* Búsqueda mobile en página de productos */
.products-search-mobile{margin:12px 0 8px}
@media (min-width:821px){.products-search-mobile{display:none}}

@media (max-width:820px){
  .header-search{display:none}
  .mainnav{position:fixed;top:0;right:0;height:100vh;width:280px;flex-direction:column;align-items:stretch;padding:80px 16px 24px;gap:8px;background:#0f172a;border-left:1px solid #1e293b;transform:translateX(100%);transition:transform .28s cubic-bezier(.4,.0,.2,1);box-shadow:-4px 0 24px rgba(0,0,0,.4)}
  body.nav-open .mainnav{transform:translateX(0)}
  body.nav-open .nav-backdrop{opacity:1;pointer-events:auto}
  .mainnav a{font-size:16px;width:100%;padding:14px 16px;background:#12202c;border:1px solid #1e293b;border-radius:12px;display:flex;align-items:center;gap:12px;font-weight:600;opacity:1}
  .mainnav a:hover{background:#1b2a38;border-color:#2563eb}
}
@media (min-width:821px){
  .nav-toggle{display:none}
  .nav-backdrop{display:none}
}
@media (max-width:1000px){
  .header-search{max-width:200px}
}
@media (max-width:900px){
  .header-search{max-width:150px}
}


.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-responsive .cart-table{min-width:720px}
@media (max-width:640px){
  .cart-header h1{font-size:20px}
  .hero-copy h1{font-size:26px}
  .brand-title{font-size:18px}
  .brand-sub{font-size:12px}
}

@media (max-width:480px){
  :root{--topbar-h:64px}
  .mainnav{width:78%}
  .btn-primary,.btn-secondary{padding:9px 12px}
  .cards{gap:10px}
}

/* Mobile actions sticky */
.mobile-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0 8px;position:sticky;top:var(--topbar, var(--topbar-h));z-index:80;background:rgba(17,24,39,.7);backdrop-filter:blur(8px);padding:8px 0;transition:opacity .25s,visibility .25s}
.mobile-actions .btn-filter,.mobile-actions .btn-sort{height:48px;border-radius:12px;font-weight:600;background:#12202c;color:#fff;border:1px solid var(--border);padding:10px 12px;cursor:pointer}
.mobile-actions .btn-filter[aria-expanded=true],.mobile-actions .btn-sort[aria-expanded=true]{background:#1b2a38}
@media (max-width: 380px){.mobile-actions{grid-template-columns:1fr}}
body.nav-open .mobile-actions{opacity:0;visibility:hidden;pointer-events:none}
.cart-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media (min-width:900px){.cart-grid{grid-template-columns:1fr 440px}}
.cart-form-sticky{position:static}
@media (min-width:900px){.cart-form-sticky{position:sticky;top:20px}}

/* Drawer overlay + panel full-height */
.drawer{position:fixed;inset:0;z-index:var(--z-drawer-backdrop);background:rgba(2,6,23,.60);backdrop-filter:blur(2px);pointer-events:none;opacity:0;transition:opacity .25s}
.drawer[hidden]{display:none}
body.drawer-open .drawer{pointer-events:auto;opacity:1}
.drawer-panel{position:absolute;right:0;top:0;height:100dvh;width:min(92vw,480px);z-index:var(--z-drawer-panel);background:#0f172a;border-left:1px solid #1e293b;border-radius:16px 0 0 16px;display:grid;grid-template-rows:auto 1fr auto;padding:max(12px, env(safe-area-inset-top)) 16px 16px 16px;overflow:hidden}
.drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.drawer-foot{display:flex;align-items:center;gap:12px;margin-top:8px}
.drawer-foot .btn-primary{flex:1;height:44px}
.drawer-foot .link-reset{margin-left:auto;white-space:nowrap}
.drawer .drawer-close{background:#12202c;border:1px solid var(--border);color:var(--text);width:40px;height:40px;border-radius:10px;cursor:pointer;font-size:18px}
.drawer-body{display:grid;gap:14px;overflow:auto;padding:6px 0}
.drawer .field input,.drawer .field select{height:44px}

/* Sheet bottom */
.sheet{position:fixed;left:0;right:0;bottom:0;background:#0f172a;border-top-left-radius:18px;border-top-right-radius:18px;border:1px solid #1e293b;padding:12px;z-index:120;pointer-events:none;opacity:0;transition:opacity .25s;max-height:80vh;overflow-y:auto}
.sheet[hidden]{display:none}
.sheet:not([hidden]){pointer-events:auto;opacity:1}
.sheet-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px}
.sheet-head h2{margin:0;font-size:18px;font-weight:600}
.sheet-close{background:#12202c;border:1px solid var(--border);color:var(--text);width:40px;height:40px;border-radius:10px;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;padding:0}
.sort-list{display:grid;gap:8px;list-style:none;margin:8px 0 0;padding:0}
.sort-list li{border-bottom:1px solid #223140}
.sort-list button{width:100%;min-height:44px;border-radius:10px;text-align:left;padding:10px 12px;background:none;border:0;color:var(--text);font:inherit;cursor:pointer}
.sort-list button:hover{background:#1b2a38}
/* Filter sheet actions - limitar ancho en desktop */
#filterSheet .field input,#filterSheet .field select{max-width:100%}
#filterSheet form > div:last-child{max-width:100%}
@media (min-width:821px){
  .sheet{max-width:520px;left:50%;margin-left:-260px;padding:20px 24px}
  #filterSheet form > div:last-child{display:flex;justify-content:center;max-width:400px;margin-left:auto;margin-right:auto}
  #filterSheet form > div:last-child .btn-primary{flex:0 1 auto;min-width:140px;max-width:200px}
}

/* Cards responsive cols */
@media (max-width:767.98px){
  .filters-row{display:none}
  .cards{grid-template-columns:1fr;gap:14px}
}
@media (min-width:480px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:768px){
  .cards{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Aspect ratio 1:1 */
.ar-1-1{aspect-ratio:1/1;overflow:hidden;border-radius:18px;background:#0f172a}
.card-img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}

/* Full width CTA */
.btn-full{width:100%}



@media (min-width:720px){
  .hero{margin:28px 0;gap:24px}
  .hero-copy h1{font-size:32px;line-height:1.2}
  .hero-copy p{font-size:16px}
}
@media (max-width:720px){
  .hero{margin:22px 0;gap:18px}
  .hero-copy h1{font-size:28px;line-height:1.15}
  .hero-copy p{font-size:15px}
}
@media (max-width:560px){
  .hero{margin:18px 0;gap:14px}
  .hero-copy h1{font-size:24px}
  .hero-actions{display:flex;flex-direction:column;gap:10px;width:100%}
  .btn-hero,.btn-hero-secondary{display:inline-flex !important;width:100%;justify-content:center !important;align-items:center !important;padding:14px 20px !important;font-size:15px}
  .btn-hero svg,.btn-hero-secondary svg{width:18px;height:18px;flex-shrink:0}
  .btn-hero span,.btn-hero-secondary span{display:inline-block;text-align:center}
  .btn-primary,.btn-secondary{padding:12px 16px;font-size:14px;width:100%}
  .stat-value{font-size:22px}
  .stat-label{font-size:12px}
  .hero-features{justify-content:center}
  @media (min-width:560px){.btn-primary,.btn-secondary{padding:9px 12px}}
}
@media (max-width:480px){
  .stats-grid{gap:14px;padding:0 12px}
  .stat-item{padding:18px 10px;border-radius:14px}
  .stat-icon svg{width:20px;height:20px}
  .stat-value{font-size:20px}
  .stat-label{font-size:11px;line-height:1.3}
  .cta-actions{gap:12px}
  .cta-actions .btn-primary,.cta-actions .btn-secondary{width:100%}
}
@media (max-width:400px){
  .hero-copy h1{font-size:21px}
  .hero-copy p{font-size:14px;line-height:1.4}
  .hero-lead{font-size:14px;line-height:1.4}
  .brand-sub{display:none}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .cards--products{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card{border-radius:12px}
  .card-title{font-size:13px}
  .card-cat{font-size:10px}
  .card-price{font-size:16px}
  .nav-link{font-size:14px}
  .btn-add-cart svg,.btn-view-cart svg{width:18px;height:18px}
}
@media (max-width:340px){
  .cards{gap:10px}
  .card-body{padding:10px}
  .card-title{font-size:15px}
  .price-row{margin:4px 0 8px}
  .btn-primary,.btn-secondary{font-size:13px;padding:8px 11px}
}

/* Micro-animaciones para producto */
.pd-badges,.pd-price-box,.trust-signals,.pd-details,.pd-share,.color-picker,.pd-note{animation:fadeInUp .4s ease backwards}
.pd-badges{animation-delay:.05s}
.pd-price-box{animation-delay:.1s}
.trust-signals{animation-delay:.15s}
.pd-share{animation-delay:.2s}
.pd-details{animation-delay:.25s}
.color-picker{animation-delay:.3s}
.pd-note{animation-delay:.35s}
.pd-actions{animation:fadeInUp .4s ease .4s backwards}

@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* Animación para carrusel de imágenes */
.pd-carousel{animation:fadeIn .5s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* Hover mejorado para swatches */
.swatch{position:relative;overflow:hidden}
.swatch::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at center,rgba(255,255,255,.2),transparent 70%);opacity:0;transition:opacity .3s}
.swatch:hover::before{opacity:1}

/* Mejorar interactividad de botones compartir */
.share-btn{position:relative;overflow:hidden}
.share-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.15),transparent 60%);opacity:0;transform:translateX(-100%);transition:transform .4s,opacity .4s}
.share-btn:hover::before{opacity:1;transform:translateX(100%)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition:none!important;scroll-behavior:auto!important}
  .hero-carousel .hc-slide,.pd-slide{transition:none!important;transform:none!important}
  .pd-nav,.nav-toggle{transition:none!important}
  .pd-badges,.pd-price-box,.trust-signals,.pd-details,.pd-share,.color-picker,.pd-note,.pd-actions,.pd-carousel{animation:none!important}
  .swatch::before,.share-btn::before,.btn-add-cart svg,.btn-view-cart svg{transition:none!important;transform:none!important}
  .hero-badge,.hero-copy h1,.hero-lead,.hero-actions,.hero-hours,.hero-features{animation:none!important}
  .stat-item,.card--featured,.cta-icon{animation:none!important}
}

@media (max-width:480px){
  .pv-img{height:300px}
}

body.nav-open{overflow:hidden}
body.drawer-open{overflow:hidden}


.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:20px;z-index:110;opacity:0;pointer-events:none;transition:opacity .22s ease}
.modal-backdrop.show{opacity:1;pointer-events:auto}
.modal-backdrop[hidden]{display:none}
.modal{background:linear-gradient(150deg,#1a2430,#141c25 60%);border:1px solid var(--border);border-radius:22px;padding:26px 26px 30px;max-width:560px;width:100%;position:relative;box-shadow:0 10px 40px -8px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.04);opacity:0;transform:translateY(18px) scale(.94);transition:opacity .25s ease,transform .32s cubic-bezier(.4,0,.2,1)}
.modal.show{opacity:1;transform:translateY(0) scale(1)}
.modal-title{margin:0 0 14px;font-size:24px;font-weight:700;letter-spacing:.5px}
.modal-close{position:absolute;top:10px;right:10px;background:#12202c;border:1px solid var(--border);color:var(--text);width:36px;height:36px;border-radius:12px;cursor:pointer;font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;font-weight:600;transition:background .18s,border-color .18s}
.modal-close:hover{background:var(--panel-alt)}
.modal-steps{margin:0 0 16px;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--muted)}
.modal-steps li strong{color:#fff;font-weight:600}
.modal-note{font-size:13px;color:var(--muted);margin:0 0 18px}
.modal-actions{text-align:right}
@media (max-width:560px){
  .modal{padding:22px 20px 26px;border-radius:20px}
  .modal-title{font-size:20px}
  .modal-close{width:32px;height:32px;font-size:18px}
  .modal-steps{font-size:13px}
}



.wa-float{
  position:fixed;
  right:calc(clamp(12px,3vw,20px) + env(safe-area-inset-right,0px));
  bottom:calc(clamp(12px,3vw,20px) + env(safe-area-inset-bottom,0px));
  width:clamp(56px,10vw,72px);
  height:clamp(56px,10vw,72px);
  border-radius:50%;
  background:#ffffff;
  color:#25D366; 
  border:2px solid #25D366;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 28px rgba(0,0,0,.38),0 0 0 1px rgba(0,0,0,.12);
  z-index:120;
  transition:transform .15s ease,filter .15s ease;
  animation:wa-pop .6s cubic-bezier(.2,.8,.2,1) .15s both;
}
.wa-float svg{width:62%;height:62%;display:block}
.wa-float:hover{filter:brightness(.96);transform:translateY(-1px) scale(1.02)}
.wa-float:active{transform:translateY(0) scale(.99)}
.wa-float:focus{outline:3px solid rgba(255,255,255,.6);outline-offset:2px}

.wa-float::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:rgba(37,211,102,.32);
  animation:wa-pulse 1.2s ease-out .5s 2;
  pointer-events:none
}
@keyframes wa-pop{0%{opacity:0;transform:translateY(10px) scale(.6)}60%{opacity:1;transform:translateY(0) scale(1.06)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes wa-pulse{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.75);opacity:0}}

@media (prefers-reduced-motion: reduce){
  .wa-float{animation:none}
  .wa-float::after{animation:none}
}

/* New FAB WhatsApp simplified class */
.fab-whatsapp{position:fixed;right:16px;bottom:16px;width:56px;height:56px;border-radius:999px;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(37,211,102,.4);z-index:120;border:2px solid #fff;transition:transform .2s,box-shadow .2s}
.fab-whatsapp:hover{transform:scale(1.1);box-shadow:0 12px 32px rgba(37,211,102,.6)}

/* Ocultar FAB cuando drawer abierto */
body.drawer-open .fab-whatsapp{display:none}


/* CTA Section */
.cta-section{margin:64px 0;padding:48px 24px;background:linear-gradient(135deg,#1e3a8a,#1e40af);border:1px solid #2563eb;border-radius:24px;text-align:center;position:relative;overflow:hidden;box-shadow:0 12px 32px rgba(30,58,138,.4)}
.cta-section::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 50%,rgba(147,197,253,.1),transparent 70%);pointer-events:none}
.cta-content{position:relative;z-index:1;max-width:640px;margin:0 auto}
.cta-icon{display:inline-flex;align-items:center;justify-content:center;width:80px;height:80px;background:rgba(255,255,255,.15);border:2px solid rgba(255,255,255,.25);border-radius:50%;margin:0 auto 24px;animation:float 3s ease-in-out infinite}
.cta-icon svg{color:#fff}
.cta-title{font-size:32px;font-weight:800;margin:0 0 12px;color:#fff;line-height:1.2}
.cta-text{font-size:16px;color:#bfdbfe;margin:0 0 28px;line-height:1.6}
.cta-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.cta-actions .btn-primary{background:#fff;color:#1e3a8a;border-color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.2)}
.cta-actions .btn-primary:hover{background:#f1f5f9;transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.3)}
.cta-actions .btn-secondary{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:#fff}
.cta-actions .btn-secondary:hover{background:rgba(255,255,255,.15)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

@media (min-width:901px){
  .stats-grid{grid-template-columns:repeat(4,1fr);gap:24px}
  .stat-item{padding:24px 16px}
}
@media (max-width:900px){
  .cards--home,.cards--featured{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
  .stat-icon{width:48px;height:48px;margin-bottom:12px}
  .stat-icon svg{width:20px;height:20px}
  .stat-value{font-size:28px}
  .cta-section{padding:40px 20px;margin:48px 0}
  .cta-icon{width:64px;height:64px}
  .cta-icon svg{width:40px;height:40px}
  .cta-title{font-size:26px}
}
@media (max-width:640px){
  .cards--home,.cards--featured{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .cards--home .card-body{padding:10px}
  .cards--home .card-title{font-size:15px}
  .cards--home .btn-secondary.small{padding:5px 9px;font-size:12px}
  .section-header{flex-direction:column;align-items:flex-start;gap:12px}
  .section-title{font-size:24px}
  .hero-badge{font-size:12px;padding:5px 12px}
  .hero-features{gap:10px;flex-wrap:wrap}
  .hero-feature{padding:6px 10px;font-size:12px}
  .hero-feature svg{width:16px;height:16px}
  .cta-section{padding:32px 16px;margin:40px 0;border-radius:20px}
  .cta-title{font-size:22px}
  .cta-text{font-size:14px}
}
@media (max-width:420px){
  .cards--home,.cards--featured{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .cards--home .card-title,.card-title--featured{font-size:14px}
  .card-category-badge{font-size:10px;padding:3px 8px}
  .card-price{font-size:18px}
}


.admin-shell{--admin-padding:clamp(16px,2vw,26px);display:flex;flex-direction:column;gap:24px;margin-top:12px}
.admin-header{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.admin-title{margin:0;font-size:26px;font-weight:700;letter-spacing:.5px;background:linear-gradient(90deg,#fff,#9ca3af);-webkit-background-clip:text;background-clip:text;color:transparent}
.admin-nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.admin-nav a{position:relative;padding:10px 14px;border-radius:12px;border:1px solid #223140;text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.4px;background:#14202c;color:#e2e8f0;display:inline-flex;align-items:center;gap:6px;transition:.18s}
.admin-nav a.active,.admin-nav a:hover{background:linear-gradient(145deg,#1f2e3b,#18232e);border-color:#2c3e4f;box-shadow:0 2px 10px -4px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.04)}
.admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:26px}
.admin-card{background:linear-gradient(155deg,#18232e,#131c25 55%);border:1px solid #223140;border-radius:24px;padding:22px 22px 26px;position:relative;box-shadow:0 6px 22px -8px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.03)}
.admin-card h2,.admin-card h3{margin:0 0 14px;font-size:18px;letter-spacing:.5px}


.form-card{display:flex;flex-direction:column;gap:14px}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-card label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;letter-spacing:.6px;color:var(--muted);text-transform:uppercase}
.form-card input[type=text],.form-card input[type=number],.form-card input[type=password],.form-card select,.form-card textarea{background:#0f1924;border:1px solid #223140;color:#f1f5f9;font:inherit;padding:11px 14px;border-radius:14px;font-size:14px;resize:vertical;min-height:46px;line-height:1.3;transition:border-color .18s,background .18s,box-shadow .18s}
.form-card textarea{min-height:110px}
.form-card input:focus,.form-card select:focus,.form-card textarea:focus{outline:none;border-color:var(--accent);background:#142334;box-shadow:0 0 0 2px rgba(99,102,241,.35)}
.form-card input[readonly]{opacity:.75;filter:grayscale(.4)}
.inline-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:2px}
.btn-danger{background:linear-gradient(135deg,#b91c1c,#dc2626);color:#fff;border:1px solid #ef4444;box-shadow:0 4px 14px -4px rgba(220,38,38,.55)}
.btn-danger:hover{filter:brightness(.92)}
.badge-soft{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.5px;background:#1e293b;color:#93c5fd;border:1px solid #334155}


.btn-primary{position:relative;overflow:hidden}
.btn-primary::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.25),transparent 40%,rgba(255,255,255,.15));opacity:0;transition:opacity .3s}
.btn-primary:hover::before{opacity:.55}


.table{width:100%;border-collapse:separate;border-spacing:0 8px}
.table thead th{font-size:11px;letter-spacing:.7px;text-transform:uppercase;font-weight:600;color:var(--muted);text-align:left;padding:6px 10px 4px}
.table tbody tr{background:linear-gradient(145deg,#16212c,#141c25);box-shadow:0 2px 6px -2px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.03);transition:transform .15s,box-shadow .15s}
.table tbody tr:hover{transform:translateY(-2px);box-shadow:0 4px 14px -4px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.05)}
.table tbody td{padding:12px 14px;font-size:13px;border-top:1px solid rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.04);}
.table tbody tr td:first-child{border-left:1px solid rgba(255,255,255,.04);border-top-left-radius:14px;border-bottom-left-radius:14px}
.table tbody tr td:last-child{border-right:1px solid rgba(255,255,255,.04);border-top-right-radius:14px;border-bottom-right-radius:14px}
.table-actions{display:flex;gap:6px}
.icon-btn{background:#12202c;border:1px solid #1f2d3a;color:#e2e8f0;padding:6px 10px;font-size:12px;border-radius:10px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:.18s}
.icon-btn:hover{background:#1d2d3b}
.icon-btn.danger{color:#fecaca;border-color:#7f1d1d;background:#3f0f13}
.icon-btn.danger:hover{background:#5a1218}


.badge-status{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:4px 10px;border-radius:999px;letter-spacing:.5px;border:1px solid transparent}
.badge-status.pay{background:#1e3a8a;color:#93c5fd;border-color:#1d4ed8}
.badge-status.ok{background:#064e3b;color:#34d399;border-color:#065f46}
.badge-status.cancel{background:#4c0519;color:#fda4af;border-color:#881337}
.badge-status.pending{background:#78350f;color:#fde68a;border-color:#b45309}


.search-row{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.search-row .search{flex:1;min-width:200px}
.search input{width:100%;background:#0f1924;border:1px solid #223140;color:#fff;padding:11px 14px;border-radius:14px;font:inherit;font-size:14px}
.search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(99,102,241,.35)}


.dropzone{position:relative;border:2px dashed #334155;border-radius:18px;padding:28px 22px;text-align:center;display:flex;flex-direction:column;gap:10px;cursor:pointer;background:linear-gradient(160deg,#13202b,#101a23 60%);color:#94a3b8;font-size:14px;transition:border-color .2s,background .2s,box-shadow .2s}
.dropzone:hover{border-color:var(--accent);background:#162636;box-shadow:0 4px 20px -6px rgba(99,102,241,.35)}
.dropzone.drag{border-color:var(--accent);background:#1d2f40}
.dropzone input{display:none}
.dropzone.small{border-radius:16px}
.dropzone.small .dz-hint{font-size:12px}

.preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px;margin-top:6px}
.preview-grid img{width:100%;height:70px;object-fit:cover;border-radius:10px;border:1px solid #223140;background:#0f1822}


.text-muted{color:var(--muted);font-size:12px}
.sep{height:1px;background:linear-gradient(90deg,transparent,#223140,transparent);margin:4px 0 8px}
.badge-pill{background:#12202c;border:1px solid #223140;padding:4px 8px;border-radius:999px;font-size:11px;letter-spacing:.5px}

@media (max-width:880px){
  .admin-grid{grid-template-columns:1fr}
  .admin-title{font-size:22px}
}
@media (max-width:520px){
  .admin-nav a{padding:8px 11px;font-size:12px}
  .admin-card{padding:20px 16px 24px;border-radius:20px}
  .form-row-2{grid-template-columns:1fr}
}


.mode-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.6px;padding:6px 10px;border-radius:999px;background:#1e293b;color:#cbd5e1;border:1px solid #334155;text-transform:uppercase}
.mode-badge.create{background:#1e3a8a;color:#bfdbfe;border-color:#1d4ed8}
.mode-badge.edit{background:#78350f;color:#fde68a;border-color:#b45309}


.dz-preview{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.pd-share{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin:16px 0;padding:14px 16px;border:1px solid var(--border);background:linear-gradient(145deg,#13202b,#101923);border-radius:14px;font-size:13px}
.pd-share-row{display:flex;flex-wrap:wrap;gap:8px}
.pd-share-label{font-weight:700;letter-spacing:.6px;color:#cbd5e1;text-transform:uppercase;font-size:11px}
.share-btn{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:12px;font-weight:600;padding:8px 12px;border-radius:12px;border:1px solid #223140;background:#12202c;color:#e2e8f0;cursor:pointer;line-height:1;transition:.18s;min-height:36px}
.share-btn svg{width:18px;height:18px;display:block}
.share-btn:hover{background:#1b2a38}
.share-btn:active{transform:translateY(1px)}
.share-btn:focus{outline:2px solid var(--accent);outline-offset:2px}
.sb-whatsapp{background:#25D366;color:#042c16;border-color:#1fad53}
.sb-whatsapp:hover{filter:brightness(.92)}
.sb-instagram{background:linear-gradient(135deg,#f09433,#e6683c 35%,#dc2743 55%,#cc2366 75%,#bc1888);color:#fff;border-color:#dc2743}
.sb-instagram:hover{filter:brightness(.93)}
.sb-x{background:#0f172a;color:#e5e7eb;border-color:#2b3647}
.sb-x:hover{background:#121e2c}
.sb-threads{background:#fff;color:#000;border-color:#e5e7eb}
.sb-threads:hover{filter:brightness(.95)}
.sb-copy{background:#273548;color:#e5e7eb;border-color:#304055}
.sb-copy:hover{background:#30455d}
/* Product actions (buttons) */
.pd-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px;position:relative}
.btn-add-cart,.btn-view-cart{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;transition:all .2s}
.btn-add-cart svg,.btn-view-cart svg{transition:transform .2s}
.btn-add-cart:hover svg{transform:scale(1.1) rotate(-5deg)}
.btn-view-cart:hover svg{transform:scale(1.08)}
.btn-add-cart{flex:1;min-width:200px;box-shadow:0 6px 20px rgba(99,102,241,.35)}
.btn-add-cart:hover{box-shadow:0 8px 28px rgba(99,102,241,.45);transform:translateY(-1px)}
.btn-add-cart:active{transform:translateY(0)}
.added-msg{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:#10b981;color:#fff;padding:8px 16px;border-radius:999px;font-size:13px;font-weight:600;white-space:nowrap;box-shadow:0 4px 12px rgba(16,185,129,.4);animation:slideUp .3s ease}
.added-msg.error{background:#ef4444}
@keyframes slideUp{from{opacity:0;transform:translateX(-50%) translateY(10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* Mobile sticky CTA */
.pd-mobile-sticky{position:fixed;bottom:0;left:0;right:0;background:rgba(17,24,39,.95);backdrop-filter:blur(12px);border-top:1px solid var(--border);padding:12px 16px;z-index:90;box-shadow:0 -4px 20px rgba(0,0,0,.3);animation:slideUpSticky .3s ease}
.sticky-content{display:flex;align-items:center;gap:12px;max-width:1050px;margin:0 auto}
.sticky-info{flex:1;min-width:0}
.sticky-price{font-size:20px;font-weight:800;color:#fff;line-height:1}
.sticky-name{font-size:12px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.btn-sticky{padding:10px 20px !important;font-size:14px !important;min-height:auto !important;gap:6px}
@keyframes slideUpSticky{from{transform:translateY(100%)}to{transform:translateY(0)}}
@media (min-width:768px){.pd-mobile-sticky{display:none !important}}

.share-msg{font-size:12px;font-weight:600;color:var(--accent);margin-left:4px;opacity:0;transform:translateY(-3px);transition:.3s}
.share-msg.show{opacity:1;transform:translateY(0)}
/* Tablets */
@media (min-width:768px) and (max-width:900px){
  .product-detail{gap:32px}
  .pd-price{font-size:30px}
  .trust-signals{grid-template-columns:1fr}
}

@media (max-width:767px){
  .breadcrumbs{padding:8px 0;font-size:12px;gap:6px}
  .product-detail{gap:20px;margin-top:4px}
  .pd-title{font-size:22px}
}

@media (max-width:520px){
  .pd-share{padding:12px 14px;border-radius:12px;gap:8px}
  .pd-share-row{gap:6px}
  .share-btn{padding:7px 10px;font-size:11px}
  .share-btn span{display:none}
  .share-btn svg{width:20px;height:20px}
  .pd-share-label{margin-bottom:2px}
  .breadcrumbs{font-size:11px;gap:4px;padding:6px 0}
  .pd-badges{gap:6px;margin-bottom:10px}
  .pd-badge{font-size:11px;padding:5px 10px}
  .pd-title{font-size:20px;margin-bottom:10px}
  .pd-price{font-size:26px}
  .pd-price-box{padding:14px 16px;margin:10px 0 12px}
  .trust-signals{gap:8px;padding:12px;margin:12px 0}
  .trust-item{font-size:12px;gap:8px}
  .trust-item svg{width:18px;height:18px}
  .pd-details{padding:14px;margin:12px 0}
  .pd-section-title{font-size:15px;margin-bottom:10px}
  .spec-value{font-size:13px}
  .pd-note{padding:12px;gap:10px;font-size:12px}
  .pd-note svg{width:16px;height:16px}
  .color-picker{padding:14px;margin-bottom:14px}
  .btn-add-cart{min-width:auto;flex:1;font-size:14px}
  .btn-view-cart{min-width:auto;padding:10px 14px}
  .btn-view-cart span{display:none}
  .pd-actions{gap:8px;margin-top:16px}
}

/* Focus visible mejorado para accesibilidad */
.swatch:focus-visible,.share-btn:focus-visible{outline:3px solid #fbbf24;outline-offset:3px;z-index:1}
.pd-nav:focus-visible,.pd-thumb:focus-visible{outline:3px solid #fbbf24;outline-offset:2px}

/* Animaciones para Toast notifications */
@keyframes slideInRight{from{opacity:0;transform:translateX(100px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideOutRight{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100px)}}

/* ============================================
   CART MOBILE OPTIMIZADO - UX/UI MEJORADO
   ============================================ */

/* Cart Container */
.cart-container{max-width:100%;margin:0 auto;padding:0 0 120px;min-height:100vh;background:var(--bg)}

/* Cart Empty State */
.cart-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;min-height:60vh}
.cart-empty-icon{font-size:80px;margin-bottom:20px;animation:float 3s ease-in-out infinite}
.cart-empty-title{margin:0 0 12px;font-size:28px;font-weight:700;color:var(--text)}
.cart-empty-text{margin:0 0 32px;color:var(--muted);font-size:16px;max-width:400px}
.cart-empty-cta{display:inline-flex;align-items:center;gap:10px;padding:16px 32px;font-size:16px;font-weight:700;text-decoration:none}

/* Progress Bar Minimalista */
.cart-progress{display:flex;align-items:center;justify-content:center;padding:16px 20px;gap:8px}
.cart-progress-dot{width:10px;height:10px;border-radius:50%;background:var(--border);transition:all 0.3s}
.cart-progress-dot.active{width:12px;height:12px;background:linear-gradient(135deg,#6366f1,#8b5cf6);box-shadow:0 2px 8px rgba(99,102,241,0.4)}
.cart-progress-line{width:40px;height:2px;background:var(--border)}
@media (max-width:480px){
  .cart-progress{padding:12px 20px;gap:6px}
  .cart-progress-dot{width:8px;height:8px}
  .cart-progress-dot.active{width:10px;height:10px}
  .cart-progress-line{width:30px}
}

/* Header Mobile */
.cart-header-mobile{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--panel);border-bottom:1px solid var(--border);position:sticky;top:72px;z-index:90;backdrop-filter:blur(10px)}
.cart-back-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;background:var(--bg);border:1px solid var(--border);color:var(--text);transition:all 0.2s;text-decoration:none}
.cart-back-btn:hover{background:var(--panel-alt);transform:translateX(-2px)}
.cart-header-info{flex:1;padding:0 12px}
.cart-header-info h1{margin:0;font-size:18px;font-weight:700;color:var(--text)}
.cart-items-count{font-size:13px;color:var(--muted)}
.cart-header-spacer{width:40px}
@media (min-width:768px){
  .cart-header-mobile{top:var(--topbar-h);padding:16px 24px}
  .cart-header-info h1{font-size:24px}
}

/* FOMO Badge */
.cart-fomo-badge{display:flex;align-items:center;gap:8px;padding:12px 16px;margin:12px 16px;background:linear-gradient(135deg,rgba(239,68,68,0.1),rgba(220,38,38,0.1));border:1px solid rgba(239,68,68,0.3);border-radius:12px;font-size:13px;color:#fca5a5;animation:pulseGlow 2s ease-in-out infinite}
.cart-fomo-badge svg{flex-shrink:0;color:#ef4444}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 0 rgba(239,68,68,0.2)}50%{box-shadow:0 0 20px rgba(239,68,68,0.3)}}

/* Product Cards */
.cart-products{display:flex;flex-direction:column;gap:12px;padding:0 16px 16px}
.cart-product-card{position:relative;display:flex;flex-direction:column;gap:12px;padding:16px;background:var(--panel);border:1px solid var(--border);border-radius:16px;transition:all 0.3s}
.cart-product-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#6366f1,#8b5cf6);opacity:0;transition:opacity 0.3s}
.cart-product-card:hover::before{opacity:1}

/* Main section: imagen + info (horizontal) */
.cart-product-main{display:flex;gap:12px;align-items:flex-start}
.cart-product-image{width:80px;height:80px;flex-shrink:0;border-radius:12px;overflow:hidden;background:var(--bg);display:flex;align-items:center;justify-content:center}
.cart-product-image img{width:100%;height:100%;object-fit:cover}
.cart-product-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px;font-weight:600}
.cart-product-info{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.cart-product-name{margin:0;font-size:15px;font-weight:600;color:var(--text);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cart-product-color{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.cart-product-color .color-dot{width:16px;height:16px;border-radius:50%;border:2px solid var(--border);flex-shrink:0}
.cart-product-price{font-size:18px;font-weight:700;color:var(--primary)}

/* Actions section: qty + remove (horizontal abajo) */
.cart-product-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:12px;border-top:1px solid var(--border)}
.cart-qty-form{display:flex;align-items:center;gap:6px;background:var(--bg);padding:4px;border-radius:10px;border:1px solid var(--border)}
.cart-qty-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:none;border-radius:8px;background:var(--panel);color:var(--text);cursor:pointer;transition:all 0.2s;flex-shrink:0}
.cart-qty-btn:hover{background:var(--primary);color:white}
.cart-qty-btn:active{transform:scale(0.95)}
.cart-qty-value{min-width:28px;text-align:center;font-weight:700;font-size:15px;user-select:none}
.cart-remove-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(239,68,68,0.3);border-radius:10px;background:rgba(239,68,68,0.1);color:#ef4444;cursor:pointer;transition:all 0.2s}
.cart-remove-btn:hover{background:#ef4444;color:white}
.cart-remove-btn:active{transform:scale(0.95)}

/* Checkout Form - Acordeón */
.cart-checkout-form{display:flex;flex-direction:column;gap:12px;padding:0 16px 16px}
.checkout-section{background:var(--panel);border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:all 0.3s}
.checkout-section-header{width:100%;display:flex;align-items:center;gap:12px;padding:16px;background:var(--panel);border:none;cursor:pointer;transition:all 0.2s;text-align:left}
.checkout-section-header:hover{background:var(--panel-alt)}
.checkout-section-header.active{background:var(--bg)}
.checkout-section-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:var(--bg);color:var(--primary);flex-shrink:0;transition:all 0.3s}
.checkout-section-header.active .checkout-section-icon{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:white;box-shadow:0 4px 12px rgba(99,102,241,0.3)}
.checkout-section-title{flex:1;display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600;color:var(--text)}
.checkout-section-number{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--primary);color:white;font-size:12px;font-weight:700}
.checkout-section-arrow{flex-shrink:0;color:var(--muted);transition:transform 0.3s}
.checkout-section-header.active .checkout-section-arrow{transform:rotate(180deg)}
.checkout-section-content{max-height:0;overflow:hidden;transition:max-height 0.4s ease,padding 0.4s ease;padding:0 16px}
.checkout-section-content.active{max-height:1000px;padding:0 16px 16px}
.checkout-input{width:100%;padding:14px;margin-bottom:12px;border-radius:10px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:14px;transition:all 0.2s;font-family:inherit}
.checkout-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(99,102,241,0.1)}
.checkout-input:last-child{margin-bottom:0}
.checkout-conditional-fields{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.checkout-radio-option{position:relative;display:flex;align-items:center;gap:12px;padding:14px;margin-bottom:10px;border:2px solid var(--border);border-radius:12px;cursor:pointer;transition:all 0.2s}
.checkout-radio-option:last-of-type{margin-bottom:0}
.checkout-radio-option input[type="radio"]{position:absolute;opacity:0}
.checkout-radio-option:has(input:checked){border-color:var(--primary);background:rgba(99,102,241,0.05)}
.checkout-radio-content{display:flex;align-items:center;gap:12px;flex:1}
.checkout-radio-icon{font-size:24px;flex-shrink:0}
.checkout-radio-info{flex:1}
.checkout-radio-title{font-weight:600;color:var(--text);margin-bottom:2px}
.checkout-radio-subtitle{font-size:13px;color:var(--muted)}
.checkout-radio-option:has(input:checked) .checkout-radio-subtitle{color:var(--primary)}
.checkout-radio-check{width:24px;height:24px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;color:transparent;font-weight:700;transition:all 0.2s;flex-shrink:0}
.checkout-radio-option:has(input:checked) .checkout-radio-check{border-color:var(--primary);background:var(--primary);color:white}
.checkout-radio-discount{overflow:visible}
.checkout-discount-badge{position:absolute;top:-8px;right:12px;background:linear-gradient(135deg,#10b981,#059669);color:white;padding:4px 10px;border-radius:12px;font-size:11px;font-weight:700;box-shadow:0 2px 8px rgba(16,185,129,0.4);z-index:1;animation:pulse 2s infinite}

/* Cart Summary Desktop */
.cart-summary-desktop{display:none;background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:24px;position:sticky;top:100px}
.cart-summary-header{font-size:18px;font-weight:700;margin-bottom:16px;color:var(--text)}
.cart-summary-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;font-size:14px;color:var(--muted)}
.cart-summary-row .summary-value{color:var(--text);font-weight:600}
.cart-summary-discount{color:#10b981}
.cart-summary-discount .summary-value{color:#10b981}
.cart-summary-total{display:flex;justify-content:space-between;align-items:center;padding:16px 0;margin:12px 0 20px;border-top:2px solid var(--border);font-size:18px;font-weight:700}
.cart-summary-total .summary-value{font-size:28px;color:var(--primary)}
.cart-summary-cta{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:16px;margin-bottom:20px;border:none;border-radius:12px;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:white;font-size:16px;font-weight:700;cursor:pointer;box-shadow:0 4px 16px rgba(99,102,241,0.4);transition:all 0.3s}
.cart-summary-cta:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(99,102,241,0.5)}
.cart-summary-cta:active{transform:translateY(0)}
.cart-trust-badges{display:flex;flex-direction:column;gap:12px;padding-top:16px;border-top:1px solid var(--border)}
.cart-trust-badge{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.cart-trust-badge svg{color:#10b981;flex-shrink:0}

/* Sticky Bottom Bar Mobile */
.cart-sticky-bottom{position:fixed;bottom:0;left:0;right:0;background:var(--panel);border-top:2px solid var(--border);box-shadow:0 -4px 24px rgba(0,0,0,0.4);z-index:100;backdrop-filter:blur(10px);transition:all 0.3s}
.cart-sticky-bottom.expanded{bottom:0}
.cart-sticky-toggle{width:100%;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:transparent;border:none;cursor:pointer;transition:background 0.2s}
.cart-sticky-toggle:active{background:rgba(99,102,241,0.05)}
.cart-sticky-summary{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.cart-sticky-label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;font-weight:600}
.cart-sticky-total{font-size:24px;font-weight:700;color:#ffffff}
.cart-sticky-arrow{color:var(--muted);transition:transform 0.3s}
.cart-sticky-bottom.expanded .cart-sticky-arrow{transform:rotate(180deg)}
.cart-sticky-expanded{max-height:0;overflow:hidden;transition:max-height 0.3s ease,padding 0.3s ease}
.cart-sticky-bottom.expanded .cart-sticky-expanded{max-height:200px;padding:0 16px 12px}
.cart-sticky-breakdown{display:flex;flex-direction:column;gap:8px;padding:12px 0;border-top:1px solid var(--border)}
.cart-sticky-row{display:flex;justify-content:space-between;font-size:14px;color:var(--muted)}
.cart-sticky-row span:last-child{color:var(--text);font-weight:600}
.cart-sticky-discount{color:#10b981}
.cart-sticky-discount span{color:#10b981;font-weight:700}
.cart-sticky-cta{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;padding:16px;margin:0 16px 16px;border:none;border-radius:12px;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:white;font-size:17px;font-weight:700;cursor:pointer;box-shadow:0 4px 16px rgba(99,102,241,0.4);transition:all 0.3s;animation:ctaPulse 2s ease-in-out infinite}
.cart-sticky-cta:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(99,102,241,0.5)}
.cart-sticky-cta:active{transform:translateY(0);box-shadow:0 4px 16px rgba(99,102,241,0.4)}
@keyframes ctaPulse{0%,100%{box-shadow:0 4px 16px rgba(99,102,241,0.4)}50%{box-shadow:0 4px 24px rgba(99,102,241,0.6)}}

/* Responsive Adjustments */
@media (min-width:768px){
  .cart-container{padding:20px 24px 40px;max-width:1200px}
  .cart-fomo-badge{margin:16px 0}
  .cart-products{gap:16px;padding:0}
  .cart-product-card{padding:20px}
  .cart-product-main{gap:16px}
  .cart-product-image{width:100px;height:100px}
  .cart-product-name{font-size:16px}
  .cart-product-price{font-size:20px}
  .cart-product-actions{padding-top:16px}
  .cart-qty-btn{width:36px;height:36px}
  .cart-checkout-form{padding:0}
  .cart-sticky-bottom{display:none}
  .cart-summary-desktop{display:block}
}

@media (max-width:480px){
  .cart-product-image{width:70px;height:70px}
  .cart-product-name{font-size:14px}
  .cart-product-price{font-size:16px}
  .cart-qty-btn{width:30px;height:30px}
  .cart-qty-value{font-size:14px;min-width:24px}
  .cart-remove-btn{width:32px;height:32px}
  .checkout-section-header{padding:12px}
  .checkout-section-icon{width:36px;height:36px}
  .checkout-section-title{font-size:15px}
}

@media (min-width:1024px){
  .cart-container{display:grid;grid-template-columns:1fr 420px;gap:32px;align-items:start;padding:20px 24px 40px}
  .cart-progress{grid-column:1/-1;grid-row:1}
  .cart-header-mobile{grid-column:1/-1;grid-row:2}
  .cart-fomo-badge{grid-column:1/-1;grid-row:3}
  .cart-products{grid-column:1;grid-row:4}
  .cart-checkout-form{grid-column:1;grid-row:5}
  .cart-summary-desktop{grid-column:2;grid-row:4/span 2;align-self:start}
}

/* Animaciones adicionales */
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.cart-qty-btn.shake{animation:shake 0.3s ease}
@keyframes added{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1)}}
.cart-product-card.added{animation:added 0.4s ease}

/* Animaciones para modales */
@keyframes slideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.7}}

/* ============================================
   BOTÓN MAYORISTA Y MODAL
   ============================================ */

/* Botón Mayorista en Header */
.btn-mayorista{display:inline-flex;background:linear-gradient(135deg,#f59e0b,#d97706);color:white !important;border:none;padding:8px 16px;border-radius:8px;font-weight:600;cursor:pointer;font-size:14px;transition:all 0.2s;box-shadow:0 2px 8px rgba(245,158,11,0.3);pointer-events:auto;position:relative;z-index:1;text-decoration:none;align-items:center;opacity:1 !important}
@media (max-width:820px){.btn-mayorista{width:100%;padding:14px 16px;font-size:16px;border-radius:12px;display:flex;align-items:center;justify-content:flex-start}}
.btn-mayorista:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(245,158,11,0.5);background:linear-gradient(135deg,#d97706,#b45309) !important}
.btn-mayorista:active{transform:translateY(0);box-shadow:0 2px 8px rgba(245,158,11,0.3)}
.btn-mayorista:focus{outline:2px solid rgba(245,158,11,0.5);outline-offset:2px}
.mainnav button{pointer-events:auto}

/* Modal Mayorista Backdrop */
.mayorista-backdrop{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.75);z-index:10000;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px)}

/* Modal Mayorista Container */
.mayorista-modal{background:var(--panel);border-radius:24px;border:1px solid var(--border);max-width:560px;width:100%;padding:0;box-shadow:0 24px 80px rgba(0,0,0,0.6);animation:slideUp 0.3s ease-out}

/* Modal Header */
.mayorista-modal-header{background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%);padding:32px;border-radius:24px 24px 0 0;text-align:center;position:relative}
.mayorista-close-btn{position:absolute;top:12px;right:12px;background:rgba(255,255,255,0.2);border:none;color:white;width:32px;height:32px;border-radius:50%;font-size:20px;cursor:pointer;transition:all 0.2s}
.mayorista-close-btn:hover{background:rgba(255,255,255,0.3);transform:rotate(90deg)}
.mayorista-close-btn:active{background:rgba(255,255,255,0.4)}
.mayorista-modal-icon{font-size:64px;margin-bottom:12px}
.mayorista-modal-title{margin:0;font-size:28px;font-weight:700;color:white;text-shadow:0 2px 4px rgba(0,0,0,0.2)}

/* Modal Content */
.mayorista-modal-content{padding:32px}
.mayorista-modal-intro{margin:0 0 20px;font-size:16px;line-height:1.6;color:var(--text)}
.mayorista-intro-highlight{color:var(--primary)}

/* Benefits Section */
.mayorista-benefits{background:var(--bg);border-radius:16px;padding:20px;margin-bottom:24px;border:1px solid var(--border)}
.mayorista-benefits-title{margin:0 0 12px;font-size:18px;font-weight:600;color:var(--text)}
.mayorista-benefits-list{margin:0;padding:0 0 0 20px;font-size:14px;color:var(--muted);line-height:2}

/* WhatsApp CTA */
.mayorista-cta{display:flex;align-items:center;justify-content:center;gap:10px;background:linear-gradient(135deg,#10b981,#059669);color:white;text-decoration:none;padding:16px 24px;border-radius:12px;font-weight:700;font-size:16px;box-shadow:0 4px 16px rgba(16,185,129,0.4);transition:all 0.3s}
.mayorista-cta:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(16,185,129,0.5)}
.mayorista-cta:active{transform:translateY(0);box-shadow:0 4px 16px rgba(16,185,129,0.4)}

/* Footer */
.mayorista-modal-footer{margin:16px 0 0;text-align:center;font-size:12px;color:var(--muted)}

/* ============================================
   ADMIN PRODUCTS OPTIMIZADO
   ============================================ */

/* Admin Header */
.admin-header{margin-bottom:24px;padding:0}
.admin-header h1{margin:0 0 12px;font-size:28px;font-weight:700}
.admin-nav{display:flex;flex-wrap:wrap;gap:12px;padding:12px 0;border-bottom:2px solid var(--border)}
.admin-nav a{padding:8px 16px;border-radius:8px;text-decoration:none;color:var(--text);font-weight:500;transition:all 0.2s;font-size:14px}
.admin-nav a:hover{background:var(--panel-alt)}
.admin-nav a.active{background:var(--primary);color:white}
.admin-nav-logout{color:#ef4444 !important}
.admin-nav-logout:hover{background:rgba(239,68,68,0.1) !important}

/* Admin Grid Layout - Alineado con Header */
.admin-products-grid{display:grid;grid-template-columns:1fr;gap:24px;align-items:start;width:100%;max-width:100%;box-sizing:border-box;padding:0 16px}
.admin-card{max-width:100%;overflow:hidden;box-sizing:border-box}
.admin-form-panel{padding:20px;background:var(--panel);border-radius:16px;border:1px solid var(--border);width:100%;max-width:100%;box-sizing:border-box}

@media (min-width:1200px){
  .admin-products-grid{grid-template-columns:380px 1fr;gap:32px;padding:0 16px}
}

@media (min-width:1400px){
  .admin-products-grid{grid-template-columns:400px 1fr;gap:40px;padding:0 16px}
}

@media (max-width:1199px){
  .admin-form-panel{max-width:600px;margin:0 auto}
}

/* Admin Header alineado */
.admin-header{padding:0 16px}

/* Admin Table Wrapper */
.admin-table-wrapper{overflow-x:auto;background:var(--panel);border-radius:12px;border:1px solid var(--border)}

/* Admin Products Table */
.admin-products-table{width:100%;font-size:13px}
.admin-products-table th{background:#0b1520;padding:12px 10px;font-size:11px;letter-spacing:0.8px;text-transform:uppercase;font-weight:600;color:var(--muted);white-space:nowrap;position:sticky;top:0;z-index:1}
.admin-products-table td{padding:12px 10px;vertical-align:middle;border-top:1px solid var(--border)}
.admin-product-row{transition:background 0.2s}
.admin-product-row:hover{background:var(--panel-alt)}
.admin-product-name{max-width:200px}

/* Responsive Helpers */
.hide-mobile{display:none}
.hide-small{display:none}
.show-mobile{display:none !important}

@media (min-width:768px){
  .hide-small{display:table-cell}
  .admin-products-table{font-size:13px}
  .admin-products-table th{padding:12px}
  .admin-products-table td{padding:12px}
}

@media (min-width:1024px){
  .hide-mobile{display:table-cell}
  .show-mobile{display:none !important}
  .admin-products-table{font-size:14px}
}

/* Table Actions */
.table-actions{display:flex;gap:6px;justify-content:flex-end}
.icon-btn{padding:6px 10px;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--text);cursor:pointer;transition:all 0.2s;font-size:16px}
.icon-btn:hover{background:var(--primary);color:white;transform:translateY(-2px)}
.icon-btn.danger:hover{background:#ef4444}

/* Admin Form Optimizado */
.admin-form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px;width:100%;max-width:100%;box-sizing:border-box}
.admin-form-col{display:flex;flex-direction:column;gap:4px;font-size:10px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;min-width:0;overflow:hidden}
.admin-form-col input{width:100%;min-width:0;padding:10px 6px;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:13px;box-sizing:border-box}

@media (min-width:480px){
  .admin-form-row{grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
  .admin-form-col{font-size:11px}
  .admin-form-col input{padding:10px 8px}
}
.admin-checkbox-label{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text);cursor:pointer;padding:8px 0}
.admin-checkbox-label input[type="checkbox"]{width:18px;height:18px;cursor:pointer;flex-shrink:0}

/* Form Card Optimizado */
.form-card{display:flex;flex-direction:column;gap:14px;max-width:100%;width:100%}
.form-card label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;width:100%}
.form-card input[type="text"],
.form-card input[type="number"],
.form-card input[type="email"],
.form-card textarea{width:100%;max-width:100%;padding:10px;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:14px;box-sizing:border-box}
.form-card textarea{resize:vertical;min-height:60px;font-family:inherit}

/* Buttons Row */
.inline-btns{display:flex;gap:8px;flex-wrap:wrap}
.inline-btns button{flex:1;min-width:80px}