*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
button{background:none;border:none;cursor:pointer;font:inherit}
:root{
  --white:#ffffff;--off-white:#f5f5f7;--black:#1d1d1f;--gray-mid:#6e6e73;--gray-light:#d2d2d7;
  --glass-bg:rgba(255,255,255,0.30);--glass-border:rgba(255,255,255,0.70);
  --font-display:'Bebas Neue',sans-serif;--font-body:'DM Sans',sans-serif;
  --ease-smooth:cubic-bezier(0.4,0,0.2,1);--ease-spring:cubic-bezier(0.34,1.56,0.64,1);--ease-out:cubic-bezier(0.0,0,0.2,1);
  --hero-img-offset-y:-15px;--stroke-top:42px;--stroke-x:-35%;


  --vt-dur: 0.30s;
}
html{scroll-behavior:smooth}
body{margin:0;background:var(--off-white);font-family:var(--font-body);color:var(--black);overflow-x:hidden;height:auto;scrollbar-gutter:stable}
body:not(.sheet-ready) .price,
body:not(.sheet-ready) .card-price,
body:not(.sheet-ready) .csl-price {
  visibility: hidden;
}
.background{position:fixed;inset:0;z-index:0;pointer-events:none}
.background svg{width:100%;height:100%}
.line{fill:none;stroke:#aaa;stroke-width:0.8;opacity:0.18}
.l1{animation:drift1 7s ease-in-out infinite}.l2{animation:drift2 9s ease-in-out infinite}.l3{animation:drift3 8s ease-in-out infinite}
.l4{animation:drift2 10s ease-in-out infinite reverse}.l5{animation:drift1 11s ease-in-out infinite}.l6{animation:drift3 7s ease-in-out infinite reverse}
.l7{animation:drift2 8s ease-in-out infinite}.l8{animation:drift1 9s ease-in-out infinite reverse}.l9{animation:drift3 10s ease-in-out infinite}
.l10{animation:drift2 7s ease-in-out infinite reverse}.l11{animation:drift1 8s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translateX(0)}50%{transform:translateX(22px)}}
@keyframes drift2{0%,100%{transform:translateX(0)}50%{transform:translateX(-28px)}}
@keyframes drift3{0%,100%{transform:translateX(0)}50%{transform:translateX(14px)}}
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:0 48px;height:64px;background:transparent;transition:background .4s var(--ease-smooth),backdrop-filter .4s,box-shadow .4s var(--ease-smooth)}
.nav.scrolled{background:rgba(245,245,247,.80);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 1px 0 rgba(0,0,0,.06)}
.nav.nav-on-dark{background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important}
.nav.nav-on-dark .nav-logo,.nav.nav-on-dark .nav-center a,.nav.nav-on-dark .nav-right .icon-btn{color:#fff!important;opacity:1!important}
.nav.nav-on-dark .icon{fill:#fff!important;opacity:1!important}
.nav-logo{position:absolute;left:48px;color:var(--black);display:flex;align-items:center;opacity:.85;transition:color .25s ease,opacity .25s ease}
.nav-center{display:flex;gap:44px}
.nav-center a{text-decoration:none;color:var(--black);font-size:14px;font-weight:500;letter-spacing:.01em;opacity:.75;transition:color .25s ease,opacity .25s ease}
.nav-center a:hover{opacity:1}
.nav-right{position:absolute;right:48px;display:flex;align-items:center;gap:8px}
.icon-btn{position:relative;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .2s}
.icon-btn:hover{background:rgba(0,0,0,.05)}
.icon{width:19px;height:19px;fill:var(--black);opacity:.75;transition:fill .25s ease,opacity .25s ease}
.cart-count{position:absolute;top:3px;right:3px;width:15px;height:15px;border-radius:50%;background:var(--black);color:var(--white);font-size:9px;font-weight:600;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(0);transition:all .3s var(--ease-spring)}
.cart-count.visible{opacity:1;transform:scale(1)}
.hero{position:relative;z-index:2;width:100%;height:100vh;display:flex;align-items:center;justify-content:center;overflow:clip;background:var(--off-white)}
.hero-lines{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-lines svg{width:100%;height:100%}
.bg-text-wrap{position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);z-index:1;pointer-events:none;user-select:none}
.bg-text-perspective{perspective:800px;position:relative;pointer-events:none}
.bg-text{display:block;font-family:var(--font-display);font-size:240px;font-weight:900;letter-spacing:-6px;line-height:.9;color:var(--black);opacity:1;white-space:nowrap;transform:rotateX(20deg) scaleY(1.4) scaleX(1.1);transform-origin:center bottom;transition:opacity .4s var(--ease-smooth)}
.bg-text-blue-wrap{position:absolute;top:0;left:0;pointer-events:none;clip-path:circle(0px at 50% 50%)}
.bg-text-blue{color:#0071e3;opacity:.55}
.bg-text-zoom{position:absolute;top:0;left:0;color:#0071e3;opacity:.75;transform:rotateX(20deg) scaleY(1.4) scaleX(1.1) scale(1.07);transform-origin:center bottom;pointer-events:none}
.product-stage{position:relative;z-index:5;display:flex;align-items:center;justify-content:center;perspective:900px}
.product-wrap{position:relative;width:400px;height:400px;display:flex;align-items:center;justify-content:center;transform:translate(var(--product-x,0px),var(--product-y,0px)) scale(var(--product-scale,1))}
.product-wrap::after{content:'';position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);width:55%;height:40px;background:radial-gradient(ellipse,rgba(0,0,0,.18) 0%,transparent 70%);filter:blur(8px);z-index:-1;transition:width .4s var(--ease-smooth),opacity .4s}
.product{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 30px 60px rgba(0,0,0,.18))}
.arrow-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.5);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.7);box-shadow:0 4px 16px rgba(0,0,0,.08);transition:all .25s var(--ease-smooth);opacity:.7}
.arrow-btn svg{width:20px;height:20px;fill:var(--black)}
.arrow-btn:hover{opacity:1;transform:translateY(-50%) scale(1.08);box-shadow:0 8px 24px rgba(0,0,0,.12)}
.arrow-prev{left:clamp(20px,5vw,80px)}.arrow-next{right:clamp(20px,5vw,80px)}
.price-block{position:absolute;left:80px;bottom:110px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;z-index:10}
.price-label{font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-mid)}
.price-mask{overflow:hidden;padding:4px 0 2px}
.price-inner{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.price{font-family:var(--font-display);font-size:42px;font-weight:700;letter-spacing:.01em;color:var(--black);line-height:1;display:block}
.liquid-btn{position:absolute;bottom:100px;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;padding:22px 72px;border-radius:999px;font-family:var(--font-body);font-size:16px;font-weight:500;color:var(--black);letter-spacing:.02em;overflow:hidden;cursor:pointer;outline:none;white-space:nowrap;background:rgba(255,255,255,.32);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);border:1px solid rgba(255,255,255,.80);box-shadow:inset 0 2px 4px rgba(255,255,255,.95),inset 0 -4px 10px rgba(255,255,255,.35),0 8px 32px rgba(0,0,0,.10);transition:transform .3s var(--ease-spring),box-shadow .3s var(--ease-smooth)}
.liquid-btn::before{content:'';position:absolute;top:0;left:0;right:0;height:50%;border-radius:999px 999px 0 0;background:linear-gradient(to bottom,rgba(255,255,255,.85),transparent);pointer-events:none}
.liquid-btn::after{content:'';position:absolute;top:0;left:-100%;width:55%;height:100%;background:linear-gradient(110deg,transparent,rgba(255,255,255,.85),transparent);transition:left .55s var(--ease-smooth);pointer-events:none}
.liquid-btn:hover::after{left:130%}
.liquid-btn:hover{transform:translateX(-50%) scale(1.04);box-shadow:inset 0 3px 6px rgba(255,255,255,1),inset 0 -6px 14px rgba(255,255,255,.4),0 14px 40px rgba(0,0,0,.14)}
.liquid-btn:active{transform:translateX(-50%) scale(.97)}
.btn-inner,.btn-success{display:flex;align-items:center;gap:9px;position:absolute;transition:all .4s var(--ease-spring)}
.btn-inner{transform:translateY(0);opacity:1}.btn-success{transform:translateY(20px);opacity:0}
.btn-success svg,.cart-icon{width:16px;height:16px;fill:var(--black)}
.liquid-btn.added .btn-inner{transform:translateY(-20px);opacity:0}
.liquid-btn.added .btn-success{transform:translateY(0);opacity:1}
.liquid-btn.added{background:rgba(255,255,255,.55)}
.dots{position:absolute;bottom:62px;left:50%;transform:translateX(-50%);display:flex;gap:7px;align-items:center;z-index:10}
.dot{width:6px;height:6px;border-radius:50%;background:var(--black);opacity:.2;transition:all .35s var(--ease-spring);cursor:pointer}
.dot.active{opacity:1;width:18px;border-radius:99px}
.cart-overlay{position:fixed;inset:0;background:rgba(0,0,0,.2);backdrop-filter:blur(4px);z-index:9998;opacity:0;pointer-events:none}
.cart-overlay.visible{pointer-events:all}
.cart-drawer{position:fixed;top:0;right:0;height:100%;width:min(400px,90vw);background:rgba(245,245,247,.92);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);border-left:1px solid rgba(255,255,255,.6);z-index:9999;display:flex;flex-direction:column;transform:translateX(100%);box-shadow:-20px 0 60px rgba(0,0,0,.1)}
.cart-header{display:flex;align-items:center;justify-content:space-between;padding:28px 28px 20px;border-bottom:1px solid rgba(0,0,0,.06)}
.cart-header h2{font-size:20px;font-weight:600;letter-spacing:-.01em}
.close-btn{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .2s}
.close-btn:hover{background:rgba(0,0,0,.06)}
.close-btn svg{width:18px;height:18px;fill:var(--black);opacity:.6}
.cart-items{flex:1;overflow-y:auto;padding:20px 28px}
.cart-empty{color:var(--gray-mid);font-size:14px;text-align:center;margin-top:60px}
.cart-item{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid rgba(0,0,0,.05);animation:slideInItem .35s var(--ease-spring)}
@keyframes slideInItem{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
.cart-item-img{width:56px;height:56px;object-fit:contain;background:rgba(255,255,255,.5);border-radius:12px;padding:6px}
.cart-item-info{flex:1}
.cart-item-name{font-size:13px;font-weight:500;margin-bottom:4px}
.cart-item-price{font-size:13px;color:var(--gray-mid)}
.cart-item-qty{display:flex;align-items:center;gap:10px;font-size:13px}
.qty-btn{width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.07);display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1;transition:background .2s}
.qty-btn:hover{background:rgba(0,0,0,.12)}
.cart-footer{padding:20px 28px 32px;border-top:1px solid rgba(0,0,0,.06)}
.cart-total{display:flex;justify-content:space-between;font-size:15px;font-weight:600;margin-bottom:16px}
.checkout-btn{width:100%;padding:16px;border-radius:14px;background:var(--black);color:var(--white);font-family:var(--font-body);font-size:15px;font-weight:500;letter-spacing:.01em;transition:transform .2s var(--ease-spring),background .2s;display:flex;align-items:center;justify-content:center}
.checkout-btn:hover{transform:scale(1.02)}
#checkoutBtn:hover{background:#25D366}
#mpBtn:hover{background:#009ee3}
.nav,.bg-text,.product,.arrow-btn{animation:fadeUp .8s var(--ease-out) both}
.nav{animation-delay:0s}.bg-text{animation-delay:.1s}.product{animation-delay:.2s}.arrow-btn{animation-delay:.45s}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.section-divider{width:100%;height:1px;background:linear-gradient(to right,transparent,rgba(0,0,0,.08),transparent)}
#productos{padding:120px 60px 100px;position:relative;z-index:1}
.productos-header{margin-bottom:64px}
.productos-titulo{font-family:var(--font-display);font-size:72px;letter-spacing:-1px;line-height:1;color:var(--black);margin-bottom:12px}
.productos-subtitulo{font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-mid)}
.productos-badge{display:inline-flex;align-items:center;gap:8px;margin-top:20px;padding:10px 20px;border-radius:999px;background:var(--black);color:var(--white);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.productos-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:#30D158;flex-shrink:0}
.productos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.product-card{background:rgba(255,255,255,.7);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.9);border-radius:20px;overflow:hidden;cursor:pointer;transition:transform .3s var(--ease-spring),box-shadow .3s var(--ease-smooth);box-shadow:0 2px 12px rgba(0,0,0,.06)}
.product-card:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 20px 48px rgba(0,0,0,.11)}
.product-card.animating .card-img-wrap img,.product-card.animating:hover .card-img-wrap img{transform:none!important;transition:none!important}
.product-card.animating{pointer-events:none!important}
.card-img-wrap{width:100%;aspect-ratio:1/1;background:rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;box-shadow:0 1px 0 rgba(255,255,255,.8) inset}
.card-img-wrap img{width:calc(var(--card-img-scale,.75)*100%);height:calc(var(--card-img-scale,.75)*100%);object-fit:contain;transition:transform .5s var(--ease-smooth)}
.product-card:hover .card-img-wrap img{transform:scale(1.08) translateY(-5px)}
.card-img-placeholder{width:48px;height:48px;opacity:.15}
.card-info{padding:20px 22px 22px;background:rgba(255,255,255,.25);position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.6)}
.card-name{font-size:15px;font-weight:600;color:var(--black);letter-spacing:-.01em;margin-bottom:6px;line-height:1.3}
.card-price{font-family:var(--font-display);font-size:26px;color:var(--black);letter-spacing:.01em;line-height:1;margin-bottom:16px}
.card-unit{font-family:var(--font-body);font-size:12px;font-weight:400;color:var(--gray-mid)}
.card-btn{width:100%;padding:12px;border-radius:12px;background:var(--black);color:var(--white);font-family:var(--font-body);font-size:13px;font-weight:500;letter-spacing:.02em;transition:background .2s,transform .2s var(--ease-spring);cursor:pointer}
.card-btn:hover{background:#333;transform:scale(1.02)}.card-btn:active{transform:scale(.98)}
.ppage-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);backdrop-filter:none;z-index:300;opacity:0;pointer-events:none}
.ppage-overlay.active{pointer-events:all}
.ppage{position:fixed;z-index:301;overflow:hidden;pointer-events:none;display:flex;flex-direction:row;background:#ffffff}
.ppage.active{pointer-events:all}
.ppage-aura{display:none}
.ppage-back{position:absolute;top:24px;left:28px;z-index:20;display:flex;align-items:center;gap:8px;font-family:var(--font-body);font-size:14px;font-weight:500;color:var(--black);opacity:.8;cursor:pointer;padding:8px 16px;border-radius:999px;background:rgba(255,255,255,.8);backdrop-filter:blur(12px);border:1px solid rgba(0,0,0,.08);transition:opacity .2s}
.ppage-back:hover{opacity:1}
.ppage-back svg{width:18px;height:18px;fill:var(--black)}
.ppage-img-panel{width:48%;flex-shrink:0;position:relative;display:flex;align-items:center;justify-content:center;background:url('images/fondo.webp') center/cover no-repeat;min-height:100vh;overflow:hidden}
.ppage-img-bg{display:none}.ppage-fade-edge{display:none}
.ppage-thumbs{position:absolute;left:20px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;z-index:5}
.ppage-thumb{width:56px;height:56px;border-radius:12px;background:rgba(255,255,255,.85);border:1.5px solid rgba(0,0,0,.08);box-shadow:0 4px 16px rgba(0,0,0,.10);overflow:hidden;cursor:pointer;transition:transform .2s var(--ease-spring),box-shadow .2s;display:flex;align-items:center;justify-content:center}
.ppage-thumb:hover{transform:scale(1.08);box-shadow:0 8px 24px rgba(0,0,0,.15)}
.ppage-thumb img{width:80%;height:80%;object-fit:contain}
.ppage-thumb--active{border:2px solid rgba(0,0,0,.12)!important;box-shadow:0 4px 16px rgba(0,0,0,.18)!important;transform:scale(1.06);opacity:1}
.ppage-img-next,.ppage-img-prev{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.85);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.9);box-shadow:0 4px 16px rgba(0,0,0,.10);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s var(--ease-spring),box-shadow .2s,opacity .2s;opacity:.8}
.ppage-img-next{right:20px}
.ppage-img-prev{left:20px}
.ppage-img-next:hover,.ppage-img-prev:hover{transform:translateY(-50%) scale(1.1);box-shadow:0 8px 24px rgba(0,0,0,.15);opacity:1}
.ppage-img-next.hidden,.ppage-img-prev.hidden{opacity:0;pointer-events:none}
.ppage-img-next svg,.ppage-img-prev svg{width:20px;height:20px;fill:var(--black)}
.ppage-img-dots{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:5}
.ppage-img-dot{width:5px;height:5px;border-radius:50%;background:var(--black);opacity:.2;transition:all .3s var(--ease-spring)}
.ppage-img-dot.active{opacity:1;width:16px;border-radius:99px}
.ppage-img-wrap{position:relative;z-index:2;width:62%;height:62%;display:flex;align-items:center;justify-content:center}
.ppage-img{width:100%;height:100%;object-fit:contain;filter:none;transition:transform .6s var(--ease-spring);transform:scale(var(--ppage-img-scale,1))}
.ppage-img:hover{transform:scale(calc(var(--ppage-img-scale,1)*1.04)) translateY(-6px)}
.ppage-img-wrap::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.55) 50%,transparent 80%);transform:translateX(-150%);animation:shimmerSweep 4s ease-in-out infinite;pointer-events:none;z-index:3;border-radius:4px}
@keyframes shimmerSweep{0%{transform:translateX(-150%)}40%{transform:translateX(150%)}100%{transform:translateX(150%)}}
.ppage-info{flex:1;display:flex;flex-direction:column;justify-content:center;gap:28px;padding:80px 56px 56px 52px;overflow-y:auto;background:#ffffff;position:relative;z-index:1;box-shadow:-5px 3px 54px rgba(0,0,0,.11)}
.ppage-name{font-size:clamp(28px,3vw,42px);font-weight:700;letter-spacing:-.025em;line-height:1.1;color:var(--black)}
.ppage-desc{font-size:15px;color:var(--gray-mid);line-height:1.7;max-width:440px}
.ppage-tier-label{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-mid);margin-bottom:10px}
.ppage-tier-selected{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-radius:14px;background:var(--black);color:var(--white);cursor:pointer;user-select:none;transition:transform .2s var(--ease-spring);position:relative;overflow:hidden}
.ppage-tier-selected:hover{transform:scale(1.01)}
.tier-lines{position:absolute;inset:0;pointer-events:none;opacity:.15;z-index:0}
.tier-lines svg{width:100%;height:100%}
.tl{fill:none;stroke:#fff;stroke-width:.8}
.tl1{animation:driftV1 6s ease-in-out infinite}.tl2{animation:driftV2 8s ease-in-out infinite}.tl3{animation:driftV1 7s ease-in-out infinite reverse}.tl4{animation:driftV2 9s ease-in-out infinite}.tl5{animation:driftV1 5s ease-in-out infinite reverse}
@keyframes driftV1{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
@keyframes driftV2{0%,100%{transform:translateX(0)}50%{transform:translateX(-6px)}}
.ppage-tier-selected-text,.ppage-tier-selected-price,.ppage-tier-chevron{position:relative;z-index:1}
.ppage-tier-selected-text{font-size:15px;font-weight:600}
.ppage-tier-selected-price{font-family:var(--font-display);font-size:22px;letter-spacing:.01em}
.ppage-tier-chevron{transition:transform .3s var(--ease-smooth)}
.ppage-tier-chevron svg{width:18px;height:18px;fill:var(--white)}
.ppage-tier-chevron.open{transform:rotate(180deg)}
.ppage-tiers-list{overflow:hidden;height:0;border-radius:0 0 14px 14px;border:1px solid rgba(0,0,0,.07);border-top:none;transition:height .4s var(--ease-smooth)}
.price-row{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:#fff;border-bottom:1px solid rgba(0,0,0,.05);cursor:pointer;transition:background .2s}
.price-row:last-child{border-bottom:none}
.price-row:hover{background:rgba(0,0,0,.03)}
.price-row.selected{background:rgba(0,0,0,.06);padding-left:20px;border-left:3px solid var(--black)}
.price-row-qty{font-size:14px;font-weight:500;color:var(--black);min-width:120px}
.price-row-amount{font-family:var(--font-display);font-size:20px;color:var(--black);flex:1;text-align:center}
.price-row-save{font-size:11px;font-weight:600;color:#30D158;min-width:50px;text-align:right}
.ppage-actions{display:flex;align-items:center;gap:10px;width:100%}
.ppage-total-row{display:flex;align-items:center;gap:16px;padding:14px 20px;border-radius:14px;background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.06);flex:1}
.ppage-total-label-sm{font-size:13px;font-weight:500;color:var(--gray-mid)}
.ppage-qty{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.8);border:1px solid rgba(0,0,0,.08);border-radius:999px;padding:8px 16px}
.ppage-qty-btn{width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.07);font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,transform .15s var(--ease-spring)}
.ppage-qty-btn:hover{background:rgba(0,0,0,.14);transform:scale(1.1)}
.ppage-qty-num{font-size:18px;font-weight:700;min-width:24px;text-align:center;font-variant-numeric:tabular-nums}
.ppage-total-amount{font-family:var(--font-display);font-size:32px;letter-spacing:.01em;color:var(--black);line-height:1}
.ppage-cart-btn{display:flex;align-items:center;justify-content:center;width:52px;height:52px;min-width:52px;border-radius:14px;background:var(--black);color:var(--white);cursor:pointer;border:none;flex-shrink:0;transition:background .25s ease,transform .2s var(--ease-spring)}
.ppage-cart-btn svg{width:18px;height:18px;fill:currentColor}
.ppage-cart-btn:hover{background:var(--white);color:var(--black);border:1.5px solid rgba(0,0,0,.12)}
.ppage-wa-btn,.ppage-mp-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;height:52px;border-radius:14px;background:var(--black);color:var(--white);font-family:var(--font-body);font-size:14px;font-weight:500;cursor:pointer;white-space:nowrap;border:none;transition:background .35s cubic-bezier(.16,1,.3,1),transform .2s var(--ease-spring),box-shadow .35s cubic-bezier(.16,1,.3,1)}
.ppage-wa-btn svg,.ppage-mp-btn svg{width:15px;height:15px;fill:var(--white);flex-shrink:0}
.ppage-wa-btn:hover{background:#25D366;box-shadow:0 8px 24px rgba(37,211,102,.35);transform:scale(1.02)}
.ppage-mp-btn:hover{background:#009ee3;box-shadow:0 8px 24px rgba(0,158,227,.35);transform:scale(1.02)}
.ppage-accordion{border-top:1px solid rgba(0,0,0,.07);margin-top:30px}
.ppage-accordion-header{display:flex;align-items:center;justify-content:space-between;padding:16px 0;cursor:pointer;user-select:none}
.ppage-accordion-title{font-size:15px;font-weight:600;color:var(--black)}
.ppage-accordion-chevron{transition:transform .3s var(--ease-smooth)}
.ppage-accordion-chevron svg{width:18px;height:18px;fill:var(--gray-mid)}
.ppage-accordion-chevron.open{transform:rotate(180deg)}
.ppage-accordion-body{overflow:hidden;height:0;transition:height .4s var(--ease-smooth)}
.ppage-accordion-inner{padding-bottom:16px}
.ppage-accordion-inner ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.ppage-accordion-inner li{font-size:14px;color:var(--gray-mid);display:flex;align-items:center;gap:8px}
.ppage-accordion-inner li::before{content:'•';color:var(--black);font-size:16px}
.ppage-accordion-inner p{font-size:14px;color:var(--gray-mid);line-height:1.6}
.porque-section{padding:120px 60px;position:relative;z-index:1;text-align:center}
.porque-header{margin-bottom:72px;display:flex;flex-direction:column;align-items:center}
.porque-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:1100px;margin:0 auto}
.porque-card{background:rgba(255,255,255,.7);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.9);border-radius:24px;padding:36px 28px 32px;box-shadow:0 2px 12px rgba(0,0,0,.06);transition:transform .3s var(--ease-spring),box-shadow .3s var(--ease-smooth);text-align:left}
.porque-card:hover{transform:translateY(-6px);box-shadow:0 20px 48px rgba(0,0,0,.10)}
.porque-icon{width:48px;height:48px;background:var(--black);border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:24px}
.porque-icon svg{width:22px;height:22px;fill:#fff}
.porque-title{font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--black);margin-bottom:10px}
.porque-desc{font-size:13px;color:var(--gray-mid);line-height:1.7}
.contacto-section{padding:120px 60px;position:relative;z-index:1;text-align:center}
.contacto-header{margin-bottom:72px;display:flex;flex-direction:column;align-items:center}
.contacto-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:32px;max-width:900px;margin:0 auto;text-align:left;align-items:center}
.contacto-info{display:flex;flex-direction:column;gap:24px}
.contacto-item{display:flex;align-items:center;gap:18px;background:rgba(255,255,255,.7);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.9);border-radius:18px;padding:20px 24px;box-shadow:0 2px 12px rgba(0,0,0,.05)}
.contacto-icon{width:44px;height:44px;flex-shrink:0;background:var(--black);border-radius:12px;display:flex;align-items:center;justify-content:center}
.contacto-icon svg{width:20px;height:20px;fill:#fff}
.contacto-label{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-mid);margin-bottom:4px}
.contacto-value{font-size:15px;font-weight:600;color:var(--black)}
.contacto-cta{background:var(--black);border-radius:28px;padding:52px 44px;display:flex;flex-direction:column;gap:28px;align-items:flex-start}
.contacto-cta-text{font-size:22px;line-height:1.55;color:rgba(255,255,255,.85);font-weight:400}
.contacto-wa-btn{display:inline-flex;align-items:center;gap:12px;padding:18px 32px;border-radius:14px;background:#25D366;color:#fff;font-family:var(--font-body);font-size:15px;font-weight:600;text-decoration:none;transition:background .2s,transform .2s var(--ease-spring)}
.contacto-wa-btn svg{width:20px;height:20px;fill:#fff}
.contacto-wa-btn:hover{background:#1ebe5d;transform:scale(1.02)}
.footer{position:relative;z-index:1;background:var(--black);padding:48px 60px}
.footer-inner{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:28px}
.footer-logo{display:flex;align-items:center;gap:10px;color:#fff;font-size:17px;font-weight:600;opacity:.9}
.footer-logo svg{fill:#fff;opacity:.9}
.footer-nav{display:flex;gap:36px;flex-wrap:wrap;justify-content:center}
.footer-nav a{color:rgba(255,255,255,.55);text-decoration:none;font-size:14px;font-weight:400;transition:color .2s}
.footer-nav a:hover{color:#fff}
.footer-copy{font-size:12px;color:rgba(255,255,255,.3);letter-spacing:.02em}
.xtape-wrap{position:relative;height:240px;z-index:10;overflow:visible;pointer-events:none}
.xtape{position:absolute;left:-20%;width:140%;background:var(--black);padding:18px 0;overflow:hidden}
.xtape-a{top:28%;transform:rotate(-4deg)}.xtape-b{top:28%;transform:rotate(4deg)}
.xtape-track{display:flex;gap:36px;width:max-content;white-space:nowrap;animation:xtL 30s linear infinite}
.xtape-rev{animation:xtR 34s linear infinite}
.xtape-track span{font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.9)}
.xtd{color:#0071e3!important}
@keyframes xtL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes xtR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.csl-section{position:relative;z-index:1;padding:80px 0 100px;background:var(--off-white);overflow:hidden;clip-path:inset(0);background-image:linear-gradient(rgba(0,0,0,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.05) 1px,transparent 1px);background-size:50px 50px}
.csl-title-wrap{position:relative;width:100%;display:flex;justify-content:center;margin:0 auto 60px}
.csl-title{font-family:var(--font-display);font-size:clamp(64px,8.5vw,120px);font-weight:900;letter-spacing:-3px;line-height:.9;text-align:center;color:var(--black);margin:0;text-transform:uppercase;position:relative}
.csl-stroke{position:absolute;top:92px;left:50%;transform:translate(-33%,-50%) rotate(0deg);width:520px;height:90px;pointer-events:none;z-index:2;overflow:visible}
.csl-swiper{width:100%;padding:40px 0 60px!important}
.csl-slide{position:relative;width:400px!important;height:480px;background:transparent;background-image:url('images/fondo 1.webp');background-size:400px 480px;background-position:center;border-radius:8px!important;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:20px;cursor:pointer;overflow:hidden;user-select:none}
.csl-corner{position:absolute;top:12px;right:12px;width:31px;height:31px}
.csl-tag{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;background:var(--black);color:rgba(255,255,255,.9);font-family:var(--font-body);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border-radius:6px;border:1px solid rgba(255,255,255,.15);position:absolute;top:16px;left:16px;z-index:5}
.csl-tag::before{content:'';width:8px;height:8px;border-radius:2px;background:#fff;flex-shrink:0}
.csl-img{width:100%;flex:1;display:flex;align-items:flex-end;justify-content:center;padding:8px 0;padding-top:40px;overflow:hidden;min-height:0;max-height:340px}
.csl-img img{max-width:85%;max-height:100%;object-fit:contain;transition:transform .4s var(--ease-smooth)}
.csl-name{font-family:var(--font-display);font-size:34px;font-weight:900;color:#fff;line-height:1.1;position:absolute;bottom:44px;left:30px}
.csl-price{font-family:var(--font-body);font-size:16px;font-weight:500;color:rgba(255,255,255,.55);position:absolute;bottom:20px;left:30px}
.csl-cta{display:none}
.csl-rect{position:absolute;color:#fff;font-size:18px;font-weight:600;bottom:0;right:0;width:200px;height:85px;background:#2d2d2d;border-radius:17px;border:none;transition:background .3s var(--ease-smooth)}
.csl-slide:hover .csl-rect{background:#0071e3;cursor:pointer}
.csl-slide:hover .csl-img img{transform:scale(1.06) translateY(-6px)}
.csl-arr-prev,.csl-arr-next{width:46px!important;height:46px!important;background:var(--black)!important;border-radius:50%;border:1px solid rgba(255,255,255,.12);display:flex!important;align-items:center;justify-content:center;transition:background .2s,transform .2s}
.csl-arr-prev:hover,.csl-arr-next:hover{background:#222!important;transform:scale(1.1)}
.csl-arr-prev::after,.csl-arr-next::after{font-size:16px!important;color:#fff!important;font-weight:700}
.csl-arr-prev{left:clamp(12px,3vw,48px)!important}.csl-arr-next{right:clamp(12px,3vw,48px)!important}
.csl-pagination{bottom:16px!important}
.csl-pagination .swiper-pagination-bullet{width:6px;height:6px;background:rgba(0,0,0,.20);opacity:1;transition:all .3s var(--ease-spring)}
.csl-pagination .swiper-pagination-bullet-active{width:20px;border-radius:99px;background:var(--black)}
.swiper-slide-shadow,.swiper-slide-shadow-left,.swiper-slide-shadow-right,.swiper-slide-shadow-top,.swiper-slide-shadow-bottom{display:none!important;opacity:0!important}


/* ══ AGOTADO: cartel diagonal sobre la foto, hover-zoom intacto ══ */
.out-of-stock{cursor:default}
.out-of-stock .csl-img{position:relative}
.out-of-stock .card-name,.out-of-stock .csl-name{color:var(--black)}
.out-of-stock .card-btn,.out-of-stock .csl-rect{
  pointer-events:none;background:#e01b1b!important;color:#fff!important;
  border-color:#e01b1b!important;box-shadow:none!important;background-image:none!important;
}
.oos-tag{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) rotate(-16deg);
  background:rgba(28,28,30,.92);color:#fff;
  font-family:'DM Sans',system-ui,sans-serif;font-weight:800;letter-spacing:.12em;
  font-size:15px;text-transform:uppercase;white-space:nowrap;
  padding:8px 22px;border-radius:9px;pointer-events:none;z-index:4;
  box-shadow:0 10px 24px rgba(0,0,0,.32);
}

   
   CAPA 1 — card-container:

   
   CAPA 2 — product-hero:

   
   El modal UI (info, botones) aparece con fade DESPUES
   de que el container termina de expandirse.
   ═══════════════════════════════════════════════════════ */


::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}

::view-transition-group(card-container){
  animation-duration:var(--vt-dur);
  animation-timing-function:cubic-bezier(.4,0,.2,1);
  z-index:9990;
}
::view-transition-old(card-container),::view-transition-new(card-container){
  animation:none;
  mix-blend-mode:normal;
  height:100%;
  width:100%;
}



:root.vt-closing-card::view-transition-group(card-container){
  overflow: clip;
  border-radius: 20px;
  background: #ffffff;     /* <-- la caja siempre blanca, nunca transparente */
  animation-duration: var(--vt-dur);
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 9990;
}


:root.vt-closing-card::view-transition-old(card-container){
  animation: vt-modal-compress var(--vt-dur) ease-in forwards;
  mix-blend-mode: normal;
  height: 100%;
  width: 100%;
}

:root.vt-closing-card::view-transition-new(card-container){
  animation: vt-card-appear var(--vt-dur) ease-out forwards;
  mix-blend-mode: normal;
  height: 100%;
  width: 100%;
}

@keyframes vt-modal-compress {
  0%   { opacity: 1; }
  30%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes vt-card-appear {
  0%   { opacity: 0; }
  80%  { opacity: 0; }
  100% { opacity: 1; }
}


::view-transition-group(product-hero){
  animation-duration: var(--vt-dur);
  animation-timing-function:cubic-bezier(0.25,0,0.25,1);
  z-index:9999;
}
::view-transition-old(product-hero){
  display:none;
}
::view-transition-new(product-hero){
  animation:none;
  mix-blend-mode:normal;
  height:100%;
  width:100%;
  object-fit:contain;
}

html,body{max-width:100%;overflow-x:hidden}
#ppage{display:none}
#ppage.active{display:flex}
.ppage-overlay{z-index:300!important}
#ppage{z-index:301!important}
.cart-overlay{z-index:9998!important}
.cart-drawer{z-index:9999!important}
#ppage,#ppage *{box-sizing:border-box}
html{overflow-x:clip;overscroll-behavior-x:none}
body{overflow-x:clip!important;overflow-y:visible!important;overscroll-behavior:auto!important}
.csl-section,#productos,.porque-section,.contacto-section,.footer{content-visibility:visible!important;contain-intrinsic-size:unset!important}
*{-webkit-tap-highlight-color:transparent!important;-webkit-touch-callout:none}
button:focus,a:focus,div:focus{outline:none!important}

@media(max-width:900px){
  .nav-center{display:none}.nav{padding:0 24px}
  .bg-text{font-size:100px!important;letter-spacing:-3px!important}
  .porque-grid{grid-template-columns:repeat(2,1fr)!important;gap:16px!important;max-width:100%!important}
  .hero{overflow:clip!important;min-height:unset!important;height:100dvh!important}
  .cart-drawer{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(245,245,247,.99)!important}
}
@media(max-width:768px){
  .l2,.l3,.l5,.l6,.l8,.l9,.l10{display:none}
  .nav{padding:0 20px;height:56px}.nav-right{gap:4px}
  .hero{height:100dvh;min-height:100dvh;padding:0;overflow:hidden}.bg-text-wrap{top:36%}
  .bg-text{font-size:var(--hero-text-size,clamp(90px,24vw,150px))!important;letter-spacing:-3px!important;transform:scaleY(1.15) scaleX(1.05)!important;transform-origin:center center!important}
  .product-wrap{width:270px!important;height:270px!important;transform:translate(0,var(--product-y,-15px)) scale(min(var(--product-scale,1),1.3))!important}
  .arrow-prev{left:10px!important}.arrow-next{right:10px!important}
  .arrow-btn{width:38px!important;height:38px!important}.arrow-btn svg{width:17px!important;height:17px!important}
  .price-block{left:20px!important;bottom:144px!important}.price{font-size:30px!important}.price-label{font-size:9px!important}
  .liquid-btn{position:absolute!important;bottom:82px!important;left:50%!important;transform:translateX(-50%)!important;padding:18px 72px!important;font-size:15px!important;white-space:nowrap!important;min-width:180px!important}
  .liquid-btn:hover{transform:translateX(-50%) scale(1.04)!important}.liquid-btn:active{transform:translateX(-50%) scale(.97)!important}
  .dots{bottom:46px!important}.xtape-wrap{height:180px}
  .csl-section{padding:56px 0 72px}.csl-title{font-size:clamp(52px,13vw,80px)!important;letter-spacing:-2px!important}.csl-title-wrap{margin-bottom:40px}
  .csl-stroke{display:block!important;width:min(290px,65vw)!important;height:62px!important;top:var(--stroke-top)!important;left:50%!important;transform:translate(var(--stroke-x),-50%)!important}
  .csl-name{font-size:clamp(26px,6.5vw,36px)!important;bottom:48px!important}
  #productos{padding:72px 16px}.productos-titulo{font-size:clamp(44px,11vw,64px)!important}.productos-header{margin-bottom:36px}
  .productos-grid{grid-template-columns:repeat(2,1fr)!important;gap:12px!important;padding:0!important}
  .card-info{padding:14px 14px 16px!important}.card-name{font-size:13px!important;line-height:1.25!important}
  .card-price{font-size:20px!important;margin-bottom:12px!important}.card-btn{padding:10px!important;font-size:12px!important}
  .porque-section{padding:72px 16px}.porque-grid{grid-template-columns:repeat(2,1fr)!important;gap:14px!important;max-width:100%!important}
  .porque-card{padding:24px 18px 20px!important}.porque-icon{margin-bottom:16px!important}
  .contacto-section{padding:72px 16px}.contacto-grid{grid-template-columns:1fr!important;max-width:100%!important;gap:20px!important}
  .contacto-cta{padding:32px 24px!important;border-radius:20px!important}.contacto-cta-text{font-size:17px!important}.contacto-wa-btn{padding:16px 24px!important}
  .footer{padding:36px 20px}.footer-nav{gap:18px}.cart-drawer{width:100%!important;max-width:100%!important}
  #ppage{position:fixed!important;inset:0!important;width:100vw!important;max-width:100vw!important;height:100dvh!important;margin:0!important;padding:0!important;overflow-x:hidden!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;flex-direction:column!important;border-radius:0!important;scrollbar-width:none}
  #ppage::-webkit-scrollbar{display:none}
  .ppage-img-panel{width:100%!important;max-width:100%!important;height:44dvh!important;min-height:44dvh!important;flex-shrink:0!important;overflow:hidden!important;position:relative!important}
  .ppage-img-wrap{width:60%!important;height:68%!important;margin-left:20px!important}
  .ppage-img-next{right:10px!important;width:32px!important;height:32px!important}.ppage-img-next svg{width:15px!important;height:15px!important}
  .ppage-img-prev{left:10px!important;width:32px!important;height:32px!important}.ppage-img-prev svg{width:15px!important;height:15px!important}
  .ppage-img-dots{bottom:10px!important}
  .ppage-back{top:12px!important;left:12px!important;padding:6px 12px!important;font-size:12px!important;z-index:30!important}.ppage-back svg{width:14px!important;height:14px!important}
  .ppage-thumbs{left:10px!important;top:50%!important;transform:translateY(-50%)!important;flex-direction:column!important;gap:6px!important;position:absolute!important;display:flex!important}
  .ppage-thumb{width:38px!important;height:38px!important;border-radius:8px!important}.ppage-thumb img{width:80%!important;height:80%!important}
  .ppage-info{flex:none!important;width:100%!important;max-width:100%!important;height:auto!important;max-height:none!important;overflow:visible!important;overflow-x:hidden!important;padding:20px 18px 40px!important;gap:14px!important;justify-content:flex-start!important;box-shadow:none!important;border-top:1px solid rgba(0,0,0,.08)!important}
  .ppage-name{font-size:clamp(20px,5vw,28px)!important;line-height:1.15!important}.ppage-desc{font-size:13px!important;max-width:100%!important;line-height:1.6!important}
  #ppageTierWrap{width:100%!important;max-width:100%!important}
  .ppage-tier-selected{padding:13px 14px!important;width:100%!important;overflow:visible!important}
  .ppage-tier-selected-text{font-size:13px!important}.ppage-tier-selected-price{font-size:18px!important}.ppage-tier-chevron svg{width:15px!important;height:15px!important}
  .ppage-tiers-list{overflow:hidden!important}.price-row-qty{min-width:0!important}
  .ppage-actions{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;gap:8px!important;width:100%!important;align-items:stretch!important}
  .ppage-total-row{flex:0 0 100%!important;width:100%!important;padding:11px 14px!important;gap:10px!important}.ppage-total-amount{font-size:22px!important}
  .ppage-cart-btn{width:50px!important;min-width:50px!important;height:50px!important;flex:none!important;border-radius:12px!important}.ppage-cart-btn svg{width:17px!important;height:17px!important}
  .ppage-wa-btn{flex:1!important;min-width:0!important;height:50px!important;font-size:13px!important}
  .ppage-mp-btn{flex:0 0 100%!important;width:100%!important;height:50px!important;font-size:13px!important}
  .ppage-accordion{margin-top:14px!important}.ppage-accordion-header{padding:13px 0!important}.ppage-accordion-title{font-size:14px!important}
  .bg-text-blue-wrap,.bg-text-blue,.bg-text-zoom{pointer-events:none!important;touch-action:none!important}
  .bg-text-zoom{display:none!important}.bg-text-blue{opacity:1!important;color:#0071e3!important}
}
@media(max-width:430px){
  .bg-text{font-size:clamp(78px,22vw,120px)!important}.product-wrap{width:240px!important;height:240px!important}
  .price{font-size:26px!important}.price-block{bottom:138px!important}
  .liquid-btn{padding:15px 72px!important;font-size:14px!important;bottom:76px!important}.dots{bottom:42px!important}
  .productos-grid{gap:10px!important}.card-info{padding:12px 12px 14px!important}.card-name{font-size:12px!important}
  .card-price{font-size:17px!important}.card-btn{padding:9px!important;font-size:11px!important}
  .porque-grid{grid-template-columns:1fr!important}
  .ppage-img-panel{height:38dvh!important;min-height:38dvh!important}.ppage-name{font-size:18px!important}
  .ppage-total-amount{font-size:19px!important}.ppage-info{padding:16px 14px 32px!important;gap:12px!important}
  .contacto-cta-text{font-size:15px!important}.csl-stroke{width:min(240px,58vw)!important}.csl-name{font-size:clamp(22px,5.5vw,30px)!important}
}

.checkout-modal{position:fixed;top:0;right:0;bottom:0;left:0;width:100vw;height:100dvh;z-index:10001;display:flex;justify-content:flex-end;overflow:hidden;background:rgba(0,0,0,.35);backdrop-filter:blur(4px)}
.checkout-panel{width:min(860px,100vw);height:100%;background:#fff;display:flex;flex-direction:column;box-shadow:-6px 0 32px rgba(0,0,0,.1)}
.checkout-header-bar{display:flex;align-items:center;justify-content:space-between;padding:18px 28px;border-bottom:1px solid rgba(0,0,0,.07);flex-shrink:0}
.checkout-header-bar h2{font-size:18px;font-weight:600;letter-spacing:-.01em}
.checkout-close{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s;background:rgba(0,0,0,.04)}
.checkout-close:hover{background:rgba(0,0,0,.1)}
.checkout-close svg{width:18px;height:18px;fill:var(--black);opacity:.6}
.checkout-body{display:grid;grid-template-columns:1fr 1fr;flex:1;overflow:hidden}
.checkout-form-col{display:flex;flex-direction:column;padding:20px 24px 16px;overflow-y:auto}
.checkout-summary-col{display:flex;flex-direction:column;padding:20px 24px 16px;overflow-y:auto;border-left:1px solid rgba(0,0,0,.07)}
.checkout-summary-col h3{font-size:15px;font-weight:600;margin-bottom:16px}
.checkout-items{display:flex;flex-direction:column;gap:8px;flex:1;overflow-y:auto;margin-bottom:12px}
.checkout-item{display:flex;align-items:center;gap:8px;background:var(--off-white);border-radius:10px;padding:8px 10px}
.checkout-item-img{width:40px;height:40px;object-fit:contain;flex-shrink:0;border-radius:6px;background:#fff}
.checkout-item-info{flex:1;min-width:0}
.checkout-item-name{font-size:12px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.checkout-item-unit-price{font-size:10px;color:var(--gray-mid);margin-top:1px}
.checkout-item-qty-wrap{display:flex;align-items:center;gap:4px;flex-shrink:0}
.checkout-qty-btn{width:24px;height:24px;border-radius:50%;border:1.5px solid rgba(0,0,0,.1);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px;font-weight:500;color:var(--black);transition:background .15s,border-color .15s;line-height:1}
.checkout-qty-btn:hover{background:var(--black);color:#fff;border-color:var(--black)}
.checkout-qty-num{font-size:13px;font-weight:600;min-width:16px;text-align:center}
.checkout-item-subtotal{font-size:13px;font-weight:600;font-family:var(--font-display);white-space:nowrap;min-width:60px;text-align:right}
.checkout-item-remove{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.3;transition:opacity .2s,background .2s;flex-shrink:0;font-size:15px;color:var(--black);line-height:1;background:none;border:none}
.checkout-item-remove:hover{opacity:1;background:rgba(255,59,48,.1);color:#ff3b30}
.checkout-total-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-top:2px solid var(--black);font-size:14px;font-weight:600;flex-shrink:0}
.checkout-total-amount{font-family:var(--font-display);font-size:24px}
.checkout-fields{display:flex;flex-direction:column;gap:0;flex:1}
.checkout-label{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-mid);margin-bottom:4px;margin-top:14px}
.checkout-label:first-child{margin-top:0}
.checkout-input{width:100%;padding:11px 14px;border-radius:10px;border:1.5px solid rgba(0,0,0,.08);font-size:14px;font-family:var(--font-body);background:var(--off-white);transition:border-color .2s,box-shadow .2s;box-sizing:border-box}
.checkout-input:focus{outline:none;border-color:var(--black);box-shadow:0 0 0 3px rgba(0,0,0,.06)}
.checkout-input.error{border-color:#ff3b30}
.checkout-input::placeholder{color:rgba(0,0,0,.25)}
.split-input{display:flex;gap:0;border-radius:10px;border:1.5px solid rgba(0,0,0,.08);background:var(--off-white);transition:border-color .2s,box-shadow .2s;flex-shrink:0}
.split-input:focus-within{border-color:var(--black);box-shadow:0 0 0 3px rgba(0,0,0,.06)}
.split-input .checkout-input{border:none;border-radius:0;background:transparent;padding:11px 10px}
.split-input .checkout-input:focus{box-shadow:none}
.split-input > :first-child{border-radius:10px 0 0 10px}
.split-input > :last-child{border-radius:0 10px 10px 0}
.split-prefix{display:flex;align-items:center;padding:0 10px 0 12px;font-size:15px;font-weight:600;color:var(--black);background:var(--off-white);border-right:1.5px solid rgba(0,0,0,.08);user-select:none}
.eds{position:relative;display:flex;align-items:center;background:var(--off-white);flex-shrink:0;min-width:120px;cursor:pointer;user-select:none}
.eds-trigger{display:flex;align-items:center;gap:4px;padding:11px 6px 11px 10px;width:100%;height:100%;border-left:1.5px solid rgba(0,0,0,.08)}
.eds-trigger span{font-size:13px;font-weight:500;color:var(--black);white-space:nowrap;flex:1}
.eds-chevron{width:16px;height:16px;fill:rgba(0,0,0,.3);transition:transform .25s cubic-bezier(.16,1,.3,1);flex-shrink:0}
.eds-chevron.open{transform:rotate(180deg)}
.eds-menu{position:absolute;top:calc(100% + 4px);left:0;right:0;min-width:140px;background:#fff;border-radius:10px;border:1px solid rgba(0,0,0,.07);box-shadow:0 8px 24px rgba(0,0,0,.1);overflow:hidden;opacity:0;transform:translateY(-6px);pointer-events:none;z-index:10}
.eds-menu.open{opacity:1;transform:translateY(0);pointer-events:all}
.eds-opt{padding:10px 14px;font-size:13px;font-weight:500;color:var(--black);transition:background .15s;cursor:pointer}
.eds-opt:hover{background:rgba(0,0,0,.04)}
.eds-opt.selected{color:#009ee3;font-weight:600}
.eds-opt:not(:last-child){border-bottom:1px solid rgba(0,0,0,.04)}
.split-right .checkout-input,.split-right.checkout-input{border-left:1.5px solid rgba(0,0,0,.08);border-radius:0}
.checkout-actions{padding-top:16px;flex-shrink:0}
.checkout-pay-btn{width:100%;padding:15px;border-radius:12px;background:#009ee3;color:#fff;font-family:var(--font-body);font-size:15px;font-weight:600;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;transition:background .2s,opacity .2s}
.checkout-pay-btn:hover:not(:disabled){background:#0089c7}
.checkout-pay-btn:disabled{opacity:.35;cursor:not-allowed}
.checkout-pay-btn.loading{pointer-events:none;opacity:.7}
.checkout-disclaimer{font-size:11px;color:var(--gray-mid);text-align:center;margin-top:10px;line-height:1.4}
.checkout-wa-fallback{margin-top:4px;text-align:center;font-size:12px;color:var(--gray-mid)}
.checkout-wa-fallback a{color:#25d366;text-decoration:underline;cursor:pointer}
.checkout-wa-fallback a:hover{opacity:.8}
@media(max-width:700px){
  .checkout-body{grid-template-columns:1fr;overflow-y:auto}
  .checkout-summary-col{padding:16px 18px;border-right:none;border-bottom:1px solid rgba(0,0,0,.06);max-height:55vh;order:-1}
  .checkout-form-col{padding:16px 18px 20px}
  .checkout-header-bar{padding:14px 18px}
  .checkout-items{max-height:30vh}
  .checkout-item-subtotal{min-width:60px;font-size:13px}
  .checkout-total-amount{font-size:22px}
}

/* ══ Variantes de color ══ */
.card-price-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:16px}
.card-price-row .card-price{margin-bottom:0!important}
.card-colors{display:flex;flex-wrap:wrap;gap:5px;margin-left:auto;justify-content:flex-end}
.card-color-dot{width:14px;height:14px;border-radius:50%;flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.card-color-dot img{width:100%;height:100%;object-fit:cover;border-radius:50%}

.ppage-colors{display:flex;flex-direction:column;gap:8px;margin:4px 0 2px}
.ppage-colors-label{font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;color:#6e6e73}
.ppage-colors-label span{color:#111;font-weight:600}
.ppage-colors-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.ppage-color-swatch{width:32px;height:32px;border-radius:50%;border:none;cursor:pointer;padding:0;outline:none;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.ppage-color-swatch img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.ppage-color-swatch:hover{transform:scale(1.06)}
.ppage-color-swatch.active{box-shadow:0 0 0 2px #fff,0 0 0 3px #b8b8bd}
.ppage-color-hint{display:none;font-size:12px;font-weight:600;color:#ff3b30;margin-top:2px}
.ppage-color-hint.show{display:block}
@keyframes shakeColor{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.ppage-colors-row.shake{animation:shakeColor .5s ease;border:1.5px solid #ff3b30;border-radius:12px;padding:6px;margin:-6px}
.cart-item-color{display:inline-block;background:rgba(0,0,0,.05);border-radius:6px;padding:1px 6px;font-size:10px;font-weight:600;color:#6e6e73;vertical-align:middle}

/* ══════════════════════════════════════════════════════════════════════════
   PIEZAS DE VENTA — barra de anuncio, banners, buscador, confianza, reseñas
   Mismo lenguaje visual: Bebas + DM Sans, blanco y negro, vidrio.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Hueco de imagen ─────────────────────────────────────────────────────── */
/* Se ve punteado mientras no haya imagen. Al poner la foto, desaparece solo. */
.slot{position:relative;width:100%;height:100%;border:1.5px dashed var(--gray-light);border-radius:14px;background:rgba(0,0,0,.015);display:flex;align-items:center;justify-content:center}
.slot::after{content:attr(data-medida) " px";font-family:var(--font-body);font-size:12px;letter-spacing:.06em;color:var(--gray-mid);opacity:.75}

/* ── Barra de anuncio ────────────────────────────────────────────────────── */
.topbar{position:relative;z-index:101;display:flex;align-items:center;justify-content:center;gap:12px;min-height:38px;padding:8px 44px 8px 20px;background:var(--black);color:#fff;overflow:hidden}
.topbar-text{font-size:13px;font-weight:400;letter-spacing:.01em;text-align:center;line-height:1.35}
.topbar-text strong{font-weight:600}
.topbar-link{color:#fff;text-decoration:underline;text-underline-offset:3px;margin-left:8px;font-weight:600;white-space:nowrap}
.topbar-close{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:#fff;font-size:22px;line-height:1;opacity:.6;transition:opacity .2s}
.topbar-close:hover{opacity:1}
/* la nav es fixed: al haber barra arriba, baja 38px */
body:has(#topbar) .nav{top:38px}

/* ── Banners del hero ────────────────────────────────────────────────────── */
.bnr-section{position:relative;z-index:2;max-width:1320px;margin:84px auto 0;padding:0 24px}
.bnr-swiper{position:relative;border-radius:18px;overflow:hidden}
.bnr-slide{aspect-ratio:3/1;background:var(--off-white)}
.bnr-media,.bnr-link{display:block;width:100%;height:100%}
.bnr-media img{width:100%;height:100%;object-fit:cover;display:block}
.bnr-arr{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:40px;height:40px;border-radius:50%;background:var(--glass-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--glass-border);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s var(--ease-smooth),transform .3s var(--ease-spring)}
.bnr-swiper:hover .bnr-arr{opacity:1}
.bnr-arr:hover{transform:translateY(-50%) scale(1.08)}
.bnr-arr svg{width:22px;height:22px;fill:var(--black)}
.bnr-arr-prev{left:14px}.bnr-arr-next{right:14px}

/* ── Buscador ────────────────────────────────────────────────────────────── */
.buscador-section{position:relative;z-index:2;max-width:640px;margin:28px auto 0;padding:0 24px}
.buscador{position:relative;display:flex;align-items:center;background:var(--white);border:1px solid var(--gray-light);border-radius:99px;padding:0 16px;height:52px;transition:border-color .25s var(--ease-smooth),box-shadow .25s var(--ease-smooth)}
.buscador:focus-within{border-color:var(--black);box-shadow:0 6px 24px rgba(0,0,0,.08)}
.buscador-lupa{width:20px;height:20px;fill:var(--gray-mid);flex-shrink:0}
.buscador-input{flex:1;border:none;outline:none;background:none;font-family:var(--font-body);font-size:15px;color:var(--black);padding:0 12px;min-width:0}
.buscador-input::-webkit-search-cancel-button{display:none}
.buscador-clear{font-size:22px;line-height:1;color:var(--gray-mid);padding:0 4px}
.buscador-clear:hover{color:var(--black)}
.buscador-vacio{margin-top:12px;text-align:center;font-size:14px;color:var(--gray-mid)}

/* ── Tira de confianza ───────────────────────────────────────────────────── */
.tira{position:relative;z-index:2;max-width:1320px;margin:32px auto 0;padding:20px 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tira-item{display:flex;align-items:center;gap:11px}
.tira-icono{flex-shrink:0;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(0,0,0,.04);color:var(--black)}
.tira-icono svg{width:18px;height:18px}
.tira-t{font-size:13px;font-weight:600;line-height:1.25}
.tira-s{font-size:12px;color:var(--gray-mid);line-height:1.3;margin-top:1px}

/* ── Categorías ──────────────────────────────────────────────────────────── */
.cat-section{position:relative;z-index:2;max-width:1320px;margin:0 auto;padding:72px 24px 0}
.cat-header{text-align:center;margin-bottom:28px}
.cat-subtitulo{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-mid)}
.cat-titulo-seccion{font-family:var(--font-display);font-size:clamp(38px,6vw,64px);letter-spacing:.02em;line-height:1;margin-top:6px}
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cat-card{position:relative;display:block;border-radius:16px;overflow:hidden;aspect-ratio:4/5;color:inherit;text-decoration:none;transition:transform .4s var(--ease-smooth),box-shadow .4s var(--ease-smooth)}
.cat-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.12)}
.cat-media{position:absolute;inset:0}
.cat-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease-smooth)}
.cat-card:hover .cat-media img{transform:scale(1.05)}
.cat-body{position:absolute;inset:auto 0 0 0;padding:20px;z-index:2}
.cat-card:has(img) .cat-body{background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,0));color:#fff;padding-top:60px}
.cat-chip{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:99px;background:var(--black);color:#fff}
.cat-card:has(img) .cat-chip{background:#fff;color:var(--black)}
.cat-titulo{font-family:var(--font-display);font-size:30px;letter-spacing:.02em;line-height:1;margin-top:9px}
.cat-sub{font-size:13px;opacity:.75;margin-top:3px}

/* ── Banner promocional ──────────────────────────────────────────────────── */
.promo-section{position:relative;z-index:2;max-width:1320px;margin:0 auto;padding:64px 24px 0}
.promo{aspect-ratio:4/1;border-radius:18px;overflow:hidden}
.promo-media,.promo-link{display:block;width:100%;height:100%}
.promo-media img{width:100%;height:100%;object-fit:cover;display:block}

/* ── Descuento, stock y estrellas en las tarjetas ────────────────────────── */
.dcto{display:inline-flex;align-items:center;gap:7px;margin-top:3px}
.dcto-chip{font-size:11px;font-weight:700;letter-spacing:.02em;padding:3px 7px;border-radius:6px;background:var(--black);color:#fff;line-height:1}
.dcto-antes{font-size:12px;color:var(--gray-mid);text-decoration:line-through}
.stars{display:inline-flex;gap:1px;line-height:1;vertical-align:middle}
.star{color:var(--gray-light)}
.star.on{color:#f5a623}
.stars.xs .star{font-size:11px}
.stars.sm .star{font-size:14px}
.stars.lg .star{font-size:20px}
.card-stars{display:inline-flex;align-items:center;gap:5px;margin-top:2px}
.card-stars-n{font-size:11px;color:var(--gray-mid)}

/* ── Valoraciones ────────────────────────────────────────────────────────── */
.reviews-section{position:relative;z-index:2;max-width:1320px;margin:0 auto;padding:80px 24px 0}
.reviews-header{text-align:center;margin-bottom:32px}
.reviews-subtitulo{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-mid)}
.reviews-titulo{font-family:var(--font-display);font-size:clamp(38px,6vw,64px);letter-spacing:.02em;line-height:1;margin-top:6px}
.rv-resumen{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center;max-width:620px;margin:0 auto 36px;padding:24px 28px;background:var(--white);border:1px solid var(--gray-light);border-radius:16px}
.rv-nota{text-align:center}
.rv-nota-num{display:block;font-family:var(--font-display);font-size:58px;line-height:.9;letter-spacing:.01em}
.rv-nota-total{font-size:12px;color:var(--gray-mid);margin-top:6px}
.rv-bars{display:flex;flex-direction:column;gap:6px}
.rv-bar-row{display:grid;grid-template-columns:26px 1fr 22px;align-items:center;gap:9px}
.rv-bar-label{font-size:11px;color:var(--gray-mid)}
.rv-bar{height:6px;border-radius:99px;background:rgba(0,0,0,.07);overflow:hidden}
.rv-bar-fill{display:block;height:100%;border-radius:99px;background:#f5a623;transition:width .6s var(--ease-smooth)}
.rv-bar-n{font-size:11px;color:var(--gray-mid);text-align:right}
.rv-card{break-inside:avoid;margin-bottom:16px;padding:18px 20px;background:var(--white);border:1px solid var(--gray-light);border-radius:14px}
.rv-head{display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:start}
.rv-avatar{width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.06);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;flex-shrink:0}
.rv-name{font-size:13px;font-weight:600;line-height:1.3}
.rv-cl{font-size:10px;color:var(--gray-mid);font-weight:400;letter-spacing:.04em}
.rv-ok{font-size:11px;color:#1d8a4e;font-weight:500;white-space:nowrap}
.rv-date{font-size:11px;color:var(--gray-mid);white-space:nowrap}
.rv-prod{font-size:11px;color:var(--gray-mid);margin-top:9px}
.rv-text{font-size:13.5px;line-height:1.55;margin-top:7px}

/* ── Medios de pago ──────────────────────────────────────────────────────── */
.pay-titulo{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-mid);margin-bottom:9px}
.pay-row{display:flex;flex-wrap:wrap;gap:7px}
.pay-pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;letter-spacing:.02em;padding:6px 11px;border-radius:7px;background:var(--white);border:1px solid var(--gray-light);color:var(--black)}
.pay-visa{font-family:var(--font-display);font-size:14px;letter-spacing:.08em;color:#1a1f71}
.pay-mc .mc-a,.pay-mc .mc-b{width:13px;height:13px;border-radius:50%;display:inline-block}
.pay-mc .mc-a{background:#eb001b}
.pay-mc .mc-b{background:#f79e1b;margin-left:-7px;mix-blend-mode:multiply}
.footer-pagos{margin-top:22px;display:flex;flex-direction:column;align-items:center;gap:0}
.footer-pagos .pay-row{justify-content:center}

/* ── Entrega ─────────────────────────────────────────────────────────────── */
.entrega{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:18px;padding-top:6px}
.entrega-linea{position:absolute;top:23px;left:16.6%;right:16.6%;height:1.5px;background:var(--gray-light);z-index:0}
.entrega-paso{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.entrega-icono{width:36px;height:36px;border-radius:50%;background:var(--black);color:#fff;display:flex;align-items:center;justify-content:center}
.entrega-icono svg{width:18px;height:18px}
.entrega-fecha{font-size:12px;font-weight:600;line-height:1.25}
.entrega-label{font-size:11px;color:var(--gray-mid)}

/* ── Añadidos de la ficha ────────────────────────────────────────────────── */
.ppage-meta{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:8px}
.ppage-stars{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--gray-mid);text-decoration:none}
.ppage-stars:hover{color:var(--black)}
.ppage-meta .dcto{margin-top:0}
.ppage-trust{margin-top:22px;padding-top:20px;border-top:1px solid var(--gray-light)}
.ppage-trust .pay-titulo{margin-top:20px}
.ppage-reviews{margin-top:24px;padding-top:20px;border-top:1px solid var(--gray-light)}
.ppage-rv-head{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.ppage-rv-n{font-size:13px;font-weight:600}
.ppage-rv-lista{display:flex;flex-direction:column;gap:11px}
.ppage-rv-lista .rv-card{margin-bottom:0}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media(max-width:900px){
  .tira{grid-template-columns:repeat(2,1fr);gap:16px}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .bnr-section{margin-top:76px;padding:0 16px}
  .buscador-section,.tira,.cat-section,.promo-section,.reviews-section{padding-left:16px;padding-right:16px}
  .cat-section{padding-top:56px}
  .promo-section{padding-top:48px}
  .reviews-section{padding-top:60px}
  .bnr-arr{opacity:1;width:34px;height:34px}
}
@media(max-width:700px){
  /* en móvil los banners y el promo pasan a cuadrado */
  .bnr-slide{aspect-ratio:1/1}
  .promo{aspect-ratio:1/1}
  .tira{grid-template-columns:1fr;gap:13px;padding-top:14px;padding-bottom:14px}
  .rv-resumen{grid-template-columns:1fr;gap:20px;text-align:center}
  .topbar-text{font-size:12px}
  .topbar-link{display:block;margin:3px 0 0}
}
@media(max-width:430px){
  .cat-grid{grid-template-columns:1fr;gap:12px}
  .cat-card{aspect-ratio:16/9}
  .buscador{height:48px}
  .entrega-fecha{font-size:11px}
  .entrega-icono{width:32px;height:32px}
  .entrega-linea{top:21px}
}

/* ── Menos movimiento ────────────────────────────────────────────────────── */
/* Si el sistema pide reducir animación, se apaga todo lo que se mueve solo. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .line{animation:none!important}
}

/* ══════════════════════════════════════════════════════════════════════════
   V2 — paleta celeste, cinta móvil, categorías puzzle y ficha corregida
   Estas reglas van al final: pisan a las de arriba sin borrarlas.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* El celeste es el acento. La mayoría del color vendrá de las imágenes,
     así que se usa con cuentagotas: cinta, foco, chips y enlaces. */
  --celeste:#38bdf8;
  --celeste-deep:#0284c7;   /* para texto sobre blanco: contraste suficiente */
  --celeste-soft:#e0f2fe;
}

/* ── Fuera lo que se movía de fondo ──────────────────────────────────────── */
.background,.hero-lines,.xtape-wrap{display:none!important}

/* ── Cinta de arriba ─────────────────────────────────────────────────────── */
.topbar{display:block;padding:0;min-height:0;background:var(--celeste);color:var(--black);overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent)}
.topbar-track{display:flex;align-items:center;width:max-content;white-space:nowrap;padding:9px 0;animation:cinta 34s linear infinite;will-change:transform}
/* La cinta nunca se frena, ni al pasar el ratón: parecía trabada. */
.topbar:hover .topbar-track{animation-play-state:running}
.cinta-item{font-size:13px;font-weight:600;letter-spacing:.01em;padding:0 18px}
.cinta-sep{font-size:10px;opacity:.5}
/* el contenido está duplicado exacto: al llegar al 50% el bucle no se nota */
@keyframes cinta{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── Acentos celestes, contados ──────────────────────────────────────────── */
.buscador:focus-within{border-color:var(--celeste-deep);box-shadow:0 6px 24px rgba(56,189,248,.22)}
.buscador-lupa{fill:var(--celeste-deep)}
.cat-chip{background:var(--celeste);color:var(--black)}
.cat-card:has(img) .cat-chip{background:var(--celeste);color:var(--black)}
.cat-subtitulo,.reviews-subtitulo,.productos-subtitulo{color:var(--celeste-deep)}
.tira-icono{background:var(--celeste-soft);color:var(--celeste-deep)}
.rv-bar-fill{background:var(--celeste)}
.footer-nav a:hover,.topbar-link{color:var(--celeste-deep)}

/* ── Categorías en puzzle ────────────────────────────────────────────────── */
/* 1ª grande (2×2), 2ª ancha (2×1), 3ª y 4ª chicas (1×1). */
.cat-grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:190px;gap:14px}
.cat-card{aspect-ratio:auto;height:100%}
.cat-grid .cat-card:nth-child(1){grid-column:span 2;grid-row:span 2}
.cat-grid .cat-card:nth-child(2){grid-column:span 2;grid-row:span 1}
.cat-grid .cat-card:nth-child(3){grid-column:span 1;grid-row:span 1}
.cat-grid .cat-card:nth-child(4){grid-column:span 1;grid-row:span 1}
.cat-grid .cat-card:nth-child(1) .cat-titulo{font-size:42px}
.cat-grid .cat-card:nth-child(n+3) .cat-titulo{font-size:30px}
.cat-grid .cat-card:nth-child(n+3) .cat-sub{display:none}
.cat-grid .cat-card:nth-child(n+3) .cat-body{padding:14px}

/* ── Ficha de producto ───────────────────────────────────────────────────── */
/* El bug del recorte: con justify-content:center y overflow, el navegador
   corta la parte de arriba cuando el contenido no cabe. Va desde el inicio. */
.ppage-info{justify-content:flex-start;padding:72px 48px 64px 48px;gap:22px;scroll-behavior:smooth}
.ppage-img-panel{position:sticky;top:0;align-self:flex-start;height:100vh;min-height:0}

/* ── Productos similares ─────────────────────────────────────────────────── */
.ppage-similares{margin-top:26px;padding-top:22px;border-top:1px solid var(--gray-light)}
.ppage-sim-titulo{font-family:var(--font-display);font-size:26px;letter-spacing:.02em;margin-bottom:14px}
.ppage-sim-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.sim-card{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 10px 14px;background:var(--white);border:1px solid var(--gray-light);border-radius:13px;text-align:center;transition:border-color .25s var(--ease-smooth),transform .25s var(--ease-smooth),box-shadow .25s var(--ease-smooth)}
.sim-card:hover{border-color:var(--celeste);transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.09)}
.sim-img{display:flex;align-items:center;justify-content:center;width:100%;height:82px}
.sim-img img{max-width:100%;max-height:100%;object-fit:contain}
.sim-name{font-size:12px;font-weight:500;line-height:1.3;color:var(--black)}
.sim-price{font-size:13px;font-weight:700;color:var(--celeste-deep)}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media(max-width:900px){
  .ppage-sim-row{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:768px){
  .cat-grid{display:flex;grid-auto-rows:auto;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:6px}
  .cat-grid::-webkit-scrollbar{display:none}
  .cat-grid .cat-card{flex:0 0 72%;max-width:300px;aspect-ratio:4/5;grid-column:auto;grid-row:auto;scroll-snap-align:start}
  .cat-grid .cat-card .cat-titulo,
  .cat-grid .cat-card:nth-child(1) .cat-titulo,
  .cat-grid .cat-card:nth-child(n+3) .cat-titulo{font-size:30px}
  .ppage-img-panel{position:relative;height:auto}
  .ppage-info{padding:56px 24px 48px}
}
@media(max-width:700px){
  .cinta-item{font-size:12px;padding:0 14px}
  .ppage-sim-row{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:430px){
  .cat-grid{grid-auto-rows:150px;gap:10px}
  .cat-grid .cat-card:nth-child(1) .cat-titulo{font-size:30px}
}

/* La cinta también se detiene si el sistema pide menos movimiento. */
@media(prefers-reduced-motion:reduce){
  .topbar-track{animation:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   V3 — velocidad de carga
   ══════════════════════════════════════════════════════════════════════════ */

/* El banner mide 1920 × 560, así que la caja reserva esa proporción exacta.
   Con la medida reservada la página no da el salto al cargar la imagen. */
.bnr-slide{aspect-ratio:24/7}
.bnr-media img{width:100%;height:100%;object-fit:cover;display:block}

/* Mientras Swiper no arranca, los 5 slides se apilarían uno al lado del otro.
   Se muestra solo el primero hasta que Swiper toma el control. */
.bnr-swiper:not(.swiper-initialized) .swiper-wrapper{display:block}
.bnr-swiper:not(.swiper-initialized) .bnr-slide:not(:first-child){display:none}
.bnr-swiper:not(.swiper-initialized) .bnr-arr,
.bnr-swiper:not(.swiper-initialized) ~ .bnr-pagination{opacity:0}

/* Altura mínima para la cinta y la tira: sin esto el contenido salta hacia
   abajo cuando el JS las rellena. */
.topbar{min-height:37px}
.tira{min-height:74px}

@media(max-width:700px){
  .bnr-slide{aspect-ratio:1/1}
  .tira{min-height:0}
}

/* ══════════════════════════════════════════════════════════════════════════
   V4 — banner de borde a borde
   ══════════════════════════════════════════════════════════════════════════ */

/* Estaba encerrado en una caja de 1320 px con 24 px de aire a los lados: en
   una pantalla de 1536 px sobraban 264 px de fondo gris y la imagen se veía
   chica. Ahora ocupa el ancho completo, como en SP Digital. */
.bnr-section{max-width:none;margin:64px 0 0;padding:0}
.bnr-swiper{border-radius:0}

/* Las flechas y los puntos se separan un poco más del borde de la pantalla. */
.bnr-arr-prev{left:24px}
.bnr-arr-next{right:24px}

/* En pantallas enormes se limita el ANCHO, no el alto: así el banner conserva
   su proporción 24/7 y la imagen nunca se recorta. Con max-height pasaría lo
   contrario — el contenedor dejaría de ser 24/7 y cover cortaría el diseño. */
.bnr-swiper{max-width:2200px;margin:0 auto}

@media(max-width:768px){
  .bnr-section{margin-top:58px;padding:0}
  .bnr-arr-prev{left:12px}
  .bnr-arr-next{right:12px}
}

/* ══════════════════════════════════════════════════════════════════════════
   V5 — cinta azul, nav estática y tamaño del banner
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --azul-cinta:#0053fc;   /* la cinta de arriba */
  --azul-nav:#0038aa;     /* la barra de navegación */

  /* ┌──────────────────────────────────────────────────────────────────┐
     │  TAMAÑO DEL BANNER — tocá estos dos números y nada más.          │
     │                                                                  │
     │  --bnr-lado : aire a cada lado. Más grande = banner más chico.   │
     │  --bnr-max  : ancho máximo. Más chico = banner más chico.        │
     │                                                                  │
     │  Para agrandarlo:  --bnr-lado:24px  --bnr-max:1800px             │
     │  Para achicarlo:   --bnr-lado:80px  --bnr-max:1200px             │
     └──────────────────────────────────────────────────────────────────┘ */
  --bnr-lado:48px;
  --bnr-max:1400px;
}

/* ── Cinta ───────────────────────────────────────────────────────────────── */
/* Sin la máscara de antes: era la que dejaba ese degradado blanco en las
   puntas y hacía parecer que la cinta se vaciaba en los bordes. */
.topbar{
  background:var(--azul-cinta);color:#fff;
  -webkit-mask-image:none;mask-image:none;
  min-height:44px;display:flex;align-items:center
}
.topbar-track{padding:0;align-items:center}
.cinta-item{
  font-size:13px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:#fff;padding:0 20px
}
.cinta-sep{color:#fff;opacity:.55;font-size:11px}

/* ── Nav estática ────────────────────────────────────────────────────────── */
/* Deja de flotar sobre el contenido: ocupa su lugar, como en SP Digital. */
.nav{
  position:relative;top:auto;left:auto;right:auto;
  background:var(--azul-nav);height:60px;
  box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none
}
/* el scroll ya no le cambia el aspecto */
.nav.scrolled,.nav.nav-on-dark{
  background:var(--azul-nav)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none!important
}
.nav-logo,.nav.nav-on-dark .nav-logo{color:#fff!important;opacity:1!important}
.nav-center a,.nav.nav-on-dark .nav-center a{color:#fff!important;opacity:.92}
.nav-center a:hover{opacity:1}
.nav-right .icon-btn,.nav.nav-on-dark .nav-right .icon-btn{color:#fff!important;opacity:1!important}
.nav .icon,.nav.nav-on-dark .icon{fill:#fff!important;opacity:1!important}
.cart-count{background:#fff;color:var(--azul-nav)}
/* la nav ya no es fija, así que nada tiene que correrse hacia abajo */
body:has(#topbar) .nav{top:auto}

/* ── Banner ──────────────────────────────────────────────────────────────── */
.bnr-section{margin:28px 0 0;padding:0 var(--bnr-lado)}
.bnr-swiper{max-width:var(--bnr-max);margin:0 auto;border-radius:16px}
.bnr-arr-prev{left:16px}
.bnr-arr-next{right:16px}

@media(max-width:768px){
  :root{--bnr-lado:16px}
  .nav{height:54px}
  .bnr-section{margin-top:18px}
  .cinta-item{font-size:11px;padding:0 14px;letter-spacing:.04em}
  .topbar{min-height:38px}
}

/* ══════════════════════════════════════════════════════════════════════════
   V6 — nav negra y banner más ancho
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --azul-nav:#0a0a0a;   /* la nav pasa a negro; la cinta sigue en #0053fc */
  --bnr-max:1700px;     /* antes 1400: el banner se estira a los costados */
}

/* Una línea tenue entre la nav negra y el fondo claro de la página. */
.nav{border-bottom:1px solid rgba(255,255,255,.08)}

/* Respaldo lento por si el JS no llega a calcular la duración exacta.
   La velocidad real la fija CINTA_VELOCIDAD en js/bn.js. */
.topbar-track{animation-duration:110s}

/* ══════════════════════════════════════════════════════════════════════════
   V7 — logo como separador y sin animación de entrada en la nav
   ══════════════════════════════════════════════════════════════════════════ */

/* El punto ✦ pasa a ser el logo. El archivo mide 58x58 px y acá se muestra
   a 18 px de alto. */
.cinta-sep{
  width:18px;height:18px;flex-shrink:0;
  object-fit:contain;display:inline-block;vertical-align:middle;opacity:1
}

/* La nav entraba con un fadeUp de 0.8 s en cada carga: se notaba en cada F5.
   Las otras reglas de esa línea apuntan al hero, que ya no existe. */
.nav{animation:none}

/* ══════════════════════════════════════════════════════════════════════════
   V8 — el logo de la marca reemplaza al de Apple
   ══════════════════════════════════════════════════════════════════════════ */

/* En la nav. El archivo mide 58x58 px y acá se muestra a 34. */
.nav-logo a{display:flex;align-items:center;line-height:0}
.nav-logo img{
  width:34px;height:34px;object-fit:contain;display:block;
  transition:transform .25s var(--ease-smooth)
}
.nav-logo a:hover img{transform:scale(1.06)}

/* En el pie, un poco más chico. */
.footer-logo img{width:26px;height:26px;object-fit:contain;display:block}

@media(max-width:768px){
  .nav-logo img{width:28px;height:28px}
}

/* ══════════════════════════════════════════════════════════════════════════
   V9 — la ficha deja de estar partida en dos columnas al bajar
   ══════════════════════════════════════════════════════════════════════════ */

/* Antes toda la ficha era una fila de dos columnas y el scroll ocurría dentro
   de la columna derecha. Al bajar, la imagen se terminaba y quedaba un vacío
   gris a la izquierda con todo el contenido apretado a la derecha.
   Ahora la página entera baja: arriba imagen + datos, y debajo las reseñas y
   los similares a lo ancho. */
.ppage{
  display:block;
  overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth
}

/* La parte de arriba conserva las dos columnas. */
.ppage-top{display:flex;flex-direction:row;align-items:stretch;min-height:100vh}

/* La imagen acompaña mientras se leen los datos y se detiene al llegar abajo. */
.ppage-img-panel{position:sticky;top:0;height:100vh;min-height:0;align-self:flex-start}

/* La columna de datos ya no tiene scroll propio: baja con la página. */
.ppage-info{
  overflow:visible;
  min-height:100vh;
  justify-content:flex-start;
  box-shadow:none
}

/* Reseñas y similares, a lo ancho y centrados. */
.ppage-bottom{
  max-width:1180px;margin:0 auto;
  padding:8px 48px 90px;
  background:#fff
}
.ppage-bottom .ppage-reviews,
.ppage-bottom .ppage-similares{margin-top:40px;padding-top:32px}
.ppage-bottom .ppage-reviews:first-child{margin-top:0;border-top:none;padding-top:0}

/* Con más ancho entran más columnas. */
.ppage-bottom .ppage-rv-lista{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px
}
.ppage-bottom .ppage-sim-row{grid-template-columns:repeat(6,1fr)}

/* El botón de volver acompaña el scroll en vez de perderse arriba. */
.ppage-back{position:fixed;top:20px;left:24px}

@media(max-width:1100px){
  .ppage-bottom .ppage-rv-lista{grid-template-columns:repeat(2,1fr)}
  .ppage-bottom .ppage-sim-row{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:768px){
  /* En móvil se apilan: imagen arriba, datos abajo. */
  .ppage-top{flex-direction:column;min-height:0}
  .ppage-img-panel{position:relative;width:100%;height:auto;min-height:62vh}
  .ppage-info{min-height:0;justify-content:flex-start}
  .ppage-bottom{padding:0 20px 70px}
  .ppage-bottom .ppage-rv-lista{grid-template-columns:1fr}
  .ppage-bottom .ppage-sim-row{grid-template-columns:repeat(2,1fr)}
}

/* ══════════════════════════════════════════════════════════════════════════
   V10 — encuadre de los banners
   ══════════════════════════════════════════════════════════════════════════ */

/* El contenedor es 24/7 (3.43). Una imagen menos ancha, como bannerdos.png
   (3.00), se recorta arriba y abajo por igual. Ahí el logo de la esquina
   superior perdía unos 25 px. Con top el recorte se lo lleva todo de abajo,
   que es donde solo hay fondo. */
.bnr-media img{object-position:center top}

/* ══════════════════════════════════════════════════════════════════════════
   V11 — el hueco muestra el nombre de archivo que espera
   ══════════════════════════════════════════════════════════════════════════ */
.slot{flex-direction:column;gap:8px}
.slot-archivo{
  font-family:var(--font-body);font-size:14px;font-weight:600;
  color:var(--black);background:rgba(0,0,0,.05);
  padding:4px 12px;border-radius:6px;letter-spacing:.01em
}

/* ══════════════════════════════════════════════════════════════════════════
   V12 — categorías con la estructura de la referencia
   ══════════════════════════════════════════════════════════════════════════ */

/* Dos altas a los lados y dos bajas apiladas al medio:
     ┌───┬───┬───┐
     │   │ 2 │   │
     │ 1 ├───┤ 4 │
     │   │ 3 │   │
     └───┴───┴───┘
   La fila de 254 px deja las altas en proporción 0.79 y las bajas en 1.63,
   que es lo que dan los archivos de 800×1000 y 800×500. */
.cat-grid{grid-template-columns:repeat(3,1fr);grid-auto-rows:254px;gap:16px}
.cat-card{aspect-ratio:auto;height:100%;border-radius:12px}
.cat-grid .cat-card:nth-child(1){grid-column:1;grid-row:1/span 2}
.cat-grid .cat-card:nth-child(2){grid-column:2;grid-row:1}
.cat-grid .cat-card:nth-child(3){grid-column:2;grid-row:2}
.cat-grid .cat-card:nth-child(4){grid-column:3;grid-row:1/span 2}

/* Fondo oscuro abajo para que el texto blanco se lea sobre cualquier foto. */
.cat-body{
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  padding:22px;color:#fff
}
.cat-card:has(img) .cat-body{
  background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,.35) 45%,transparent);
  padding-top:70px
}
/* Sin foto todavía, el texto va en negro sobre el hueco punteado. */
.cat-card:not(:has(img)) .cat-body{color:var(--black)}

.cat-texto{display:flex;flex-direction:column;gap:2px;min-width:0}
.cat-arriba{font-size:15px;font-weight:400;opacity:.9;line-height:1.2}
.cat-titulo{
  font-family:var(--font-display);letter-spacing:.02em;line-height:.95;
  font-size:34px;margin:0
}
.cat-grid .cat-card:nth-child(1) .cat-titulo,
.cat-grid .cat-card:nth-child(4) .cat-titulo{font-size:42px}

/* Recuadro del precio, como en la referencia. */
.cat-desde{
  flex-shrink:0;display:flex;flex-direction:column;line-height:1.05;
  background:var(--azul-cinta);color:#fff;
  padding:8px 14px;border-radius:8px;
  font-size:22px;font-weight:700;letter-spacing:.01em
}
.cat-desde-lbl{font-size:12px;font-weight:400;opacity:.9}

/* Las altas ponen el precio debajo del título, no al lado. */
.cat-grid .cat-card:nth-child(1) .cat-body,
.cat-grid .cat-card:nth-child(4) .cat-body{
  flex-direction:column;align-items:flex-start;gap:14px
}

@media(max-width:900px){
  .cat-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:210px}
  .cat-grid .cat-card:nth-child(1){grid-column:1;grid-row:1/span 2}
  .cat-grid .cat-card:nth-child(2){grid-column:2;grid-row:1}
  .cat-grid .cat-card:nth-child(3){grid-column:2;grid-row:2}
  .cat-grid .cat-card:nth-child(4){grid-column:1/span 2;grid-row:3}
  .cat-grid .cat-card:nth-child(4) .cat-body{flex-direction:row;align-items:flex-end}
  .cat-titulo{font-size:28px}
  .cat-grid .cat-card:nth-child(1) .cat-titulo,
  .cat-grid .cat-card:nth-child(4) .cat-titulo{font-size:34px}
}
@media(max-width:560px){
  .cat-grid{grid-template-columns:1fr;grid-auto-rows:auto}
  .cat-grid .cat-card:nth-child(n){grid-column:1;grid-row:auto;min-height:190px}
  .cat-grid .cat-card:nth-child(1),
  .cat-grid .cat-card:nth-child(4){min-height:260px}
  .cat-grid .cat-card .cat-body{flex-direction:row;align-items:flex-end}
  .cat-body{padding:16px}
  .cat-desde{font-size:19px;padding:7px 12px}
}

/* ══════════════════════════════════════════════════════════════════════════
   V13 — el buscador vive en la nav
   ══════════════════════════════════════════════════════════════════════════ */

/* La nav pasa a repartir: logo · menú · buscador · carrito. */
.nav{justify-content:space-between;gap:22px;height:66px;padding:0 32px}
.nav-logo{position:static;left:auto;flex-shrink:0}
.nav-center{flex-shrink:0}

/* El buscador ocupa el espacio que sobra, con un tope para que no se estire
   de más en pantallas anchas. */
.nav-buscador{flex:1;min-width:0;max-width:440px;margin-left:auto}
.nav-buscador .buscador{
  height:40px;padding:0 6px 0 14px;border-radius:8px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16)
}
.nav-buscador .buscador:focus-within{
  background:#fff;border-color:#fff;box-shadow:none
}
.nav-buscador .buscador-lupa{width:18px;height:18px;fill:rgba(255,255,255,.75)}
.nav-buscador .buscador:focus-within .buscador-lupa{fill:var(--azul-cinta)}
.nav-buscador .buscador-input{font-size:14px;color:#fff;padding:0 10px}
.nav-buscador .buscador-input::placeholder{color:rgba(255,255,255,.6)}
.nav-buscador .buscador:focus-within .buscador-input{color:var(--black)}
.nav-buscador .buscador:focus-within .buscador-input::placeholder{color:var(--gray-mid)}
.nav-buscador .buscador-clear{color:rgba(255,255,255,.7);font-size:19px}
.nav-buscador .buscador:focus-within .buscador-clear{color:var(--gray-mid)}

.nav-right{flex-shrink:0}

/* El aviso de "sin resultados" ahora va con la grilla. */
.buscador-vacio{margin-top:14px;font-size:14px;color:var(--gray-mid);text-align:center}

/* Sin la sección del buscador, los banners suben. */
.bnr-section{margin-top:22px}

@media(max-width:1100px){
  .nav{gap:16px;padding:0 20px}
  .nav-center{gap:26px}
  .nav-buscador{max-width:300px}
}
@media(max-width:860px){
  /* No caben las cuatro cosas en una línea: el buscador pasa a una segunda
     fila, a lo ancho. */
  .nav{flex-wrap:wrap;height:auto;padding:10px 16px 12px;row-gap:10px}
  .nav-logo{order:1}
  .nav-center{order:2;gap:20px;font-size:14px}
  .nav-right{order:3}
  .nav-buscador{order:4;flex-basis:100%;max-width:none;margin-left:0}
  .bnr-section{margin-top:14px}
}
@media(max-width:430px){
  .nav-center{gap:14px;font-size:13px}
  .nav-buscador .buscador-input{font-size:13px}
}

/* ════════════════════════════════════════════════════════════════════════════
   V14 — tarjeta comercial · fila de ofertas · panel de categorías
   ════════════════════════════════════════════════════════════════════════════ */

/* ── El bug del borde ────────────────────────────────────────────────────────
   Al pasar el ratón la tarjeta se mueve (transform) y la imagen de adentro
   crece. Chrome recorta la esquina redondeada en la GPU y por un instante se
   ve un pico blanco que después se corrige solo. La cura es recortar en la
   capa de la imagen, no en la tarjeta, y dejar las dos capas ya compuestas
   antes de que empiece la animación.                                        */
.cat-card{ transform:translateZ(0); backface-visibility:hidden; }
.cat-card:hover{ transform:translate3d(0,-4px,0); }
.cat-media{
  border-radius:inherit;
  overflow:hidden;
  transform:translateZ(0);
  backface-visibility:hidden;
  -webkit-mask-image:-webkit-radial-gradient(#fff,#000);
          mask-image:radial-gradient(#fff,#000);
}
.cat-media img{ backface-visibility:hidden; }
/* Categoría abierta: se marca para saber cuál se está mirando. */
.cat-card.activa{ outline:3px solid var(--celeste-deep); outline-offset:-3px; }

/* ── Tarjeta de producto comercial ──────────────────────────────────────────
   Sin botón "Ver más": la tarjeta entera abre la ficha. Queda el precio
   grande y el carrito al costado, que agrega una unidad sin abrir nada.     */
.card-info{ display:flex; flex-direction:column; gap:6px; }
.card-name{ margin-bottom:0; }
.card-foot{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:12px; margin-top:auto; padding-top:8px;
}
.card-precio-col{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.card-desde{
  font-size:11px; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gray-mid);
}
.card-price{ font-size:32px; margin-bottom:0; color:var(--celeste-deep); }
.card-unit{ font-size:11px; }
.card-cart{
  flex:0 0 auto; width:46px; height:46px; border-radius:14px;
  background:var(--black); color:var(--white);
  display:grid; place-items:center; cursor:pointer;
  transition:background .2s, transform .2s var(--ease-spring);
}
.card-cart svg{ width:20px; height:20px; fill:currentColor; }
.card-cart:hover{ background:var(--celeste-deep); transform:scale(1.07); }
.card-cart:active{ transform:scale(.94); }
.card-cart.ok{ background:#1f9d55; }
.card-sinstock{
  font-size:12px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:#9a9a9f; padding-bottom:6px;
}
.product-card .card-stars{ margin-top:0; }
.out-of-stock .card-price{ color:#9a9a9f; }

/* ── Fila de ofertas ────────────────────────────────────────────────────── */
.ofertas-section{ position:relative; z-index:2; max-width:1320px; margin:0 auto; padding:72px 24px 0; }
.ofertas-header{ margin-bottom:28px; }
.ofertas-titulo{
  font-family:var(--font-display); font-size:clamp(38px,6vw,64px);
  letter-spacing:.02em; line-height:1; margin-top:6px;
}
/* A la izquierda la imagen alta, a la derecha las 5 tarjetas en una línea. */
.ofertas-wrap{ display:grid; grid-template-columns:300px 1fr; gap:18px; align-items:stretch; }
.oferta-lateral{ position:relative; border-radius:18px; overflow:hidden; min-height:100%; }
.oferta-lateral .slot{ border-radius:18px; }
.oferta-link{ display:block; height:100%; }
.oferta-media{ display:block; width:100%; height:100%; }
.oferta-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.ofertas-row{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; }
.ofertas-row .card-price{ font-size:26px; }
.ofertas-row .card-cart{ width:40px; height:40px; border-radius:12px; }

@media(max-width:1100px){
  .ofertas-wrap{ grid-template-columns:260px 1fr; }
  .ofertas-row{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:900px){
  .ofertas-wrap{ grid-template-columns:1fr; }
  .oferta-lateral{ aspect-ratio:16/7; min-height:0; }
  .ofertas-row{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:768px){
  .ofertas-section{ padding-left:16px; padding-right:16px; }
  .ofertas-section{ padding-top:56px; }
  /* gana al bloque móvil viejo, que traía margen bajo el precio */
  .card-price{ font-size:24px!important; margin-bottom:0!important; }
  .ofertas-row .card-price{ font-size:22px!important; }
  .card-cart,.ofertas-row .card-cart{ width:38px; height:38px; border-radius:11px; }
}
@media(max-width:430px){
  .card-price{ font-size:21px!important; margin-bottom:0!important; }
  .card-desde{ font-size:10px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   V15 — tarjetas parejas · precio negro · sección de categoría a pantalla
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Simetría ───────────────────────────────────────────────────────────────
   Las tarjetas ya medían todas lo mismo, pero el contenido de adentro no:
   un nombre de dos líneas empujaba el precio hacia abajo y el "c/u" se caía
   de renglón. Ahora el nombre ocupa siempre dos líneas, el hueco de las
   estrellas está aunque no haya reseñas, y el pie queda pegado al fondo.   */
.product-card{ border-radius:12px; display:flex; flex-direction:column; }
.card-info{ flex:1 1 auto; display:flex; flex-direction:column; gap:5px; }
.card-name{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; min-height:2.6em;
}
.card-stars-wrap{ min-height:17px; display:flex; align-items:center; }
.card-foot{ margin-top:auto; align-items:center; }
.card-price{ color:var(--black); white-space:nowrap; }
.out-of-stock .card-price{ color:#9a9a9f; }
.card-cart{ border-radius:10px; }
.ofertas-row .card-cart{ border-radius:10px; }
.oferta-lateral,.oferta-lateral .slot{ border-radius:12px; }

/* ── Sección de categoría a pantalla completa ───────────────────────────────
   Se abre encima de la home, no debajo. Arriba solo el banner de la
   categoría; después sus productos y el resto del catálogo.                */
.cpage-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.35);
  z-index:250; opacity:0; pointer-events:none;
}
.cpage-overlay.active{ pointer-events:auto; }
.cpage{
  position:fixed; inset:0; z-index:251; background:var(--white);
  overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
}
.cpage-back{
  position:fixed; top:20px; left:24px; z-index:20;
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-body); font-size:14px; font-weight:500;
  color:var(--black); cursor:pointer; padding:9px 17px; border-radius:999px;
  background:rgba(255,255,255,.88); backdrop-filter:blur(12px);
  border:1px solid rgba(0,0,0,.08); transition:background .2s, color .2s;
}
.cpage-back svg{ width:16px; height:16px; fill:currentColor; }
.cpage-back:hover{ background:var(--black); color:var(--white); }
.cpage-banner{ width:100%; background:#f5f5f7; }
.cpage-banner[hidden]{ display:none; }
.cpage-banner-media{ display:block; width:100%; }
.cpage-banner-media img{ display:block; width:100%; height:auto; }
.cpage-banner .slot{
  height:auto; aspect-ratio:1920/558; border-radius:0;
  border-left:none; border-right:none;
}
.cpage-body{ max-width:1320px; margin:0 auto; padding:44px 24px 96px; }
.cpage-head{ margin-bottom:30px; }
.cpage-sub{
  font-size:13px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--celeste-deep);
}
.cpage-titulo{
  font-family:var(--font-display); font-size:clamp(38px,6vw,64px);
  letter-spacing:.02em; line-height:1; margin-top:6px;
}
.cpage-vacio{ font-size:15px; color:var(--gray-mid); padding:12px 0 24px; }
.cpage-mas{ margin-top:64px; border-top:1px solid var(--gray-light); padding-top:40px; }
.cpage-mas-titulo{
  font-family:var(--font-display); font-size:30px; letter-spacing:.02em;
  margin-bottom:20px; color:var(--gray-mid);
}

/* ── Similares: la misma tarjeta que en todo el resto ─────────────────────── */
.ppage-bottom .ppage-sim-row.productos-grid,
.ppage-sim-row.productos-grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px;
}
@media(min-width:1200px){
  .ppage-sim-row.productos-grid{ grid-template-columns:repeat(5,minmax(0,1fr)); }
}
@media(max-width:900px){
  .ppage-sim-row.productos-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:700px){
  .ppage-sim-row.productos-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media(max-width:768px){
  .cpage-body{ padding:32px 16px 80px; }
  .cpage-back{ top:12px; left:12px; padding:7px 13px; font-size:12px; }
  .cpage-banner .slot{ aspect-ratio:1080/810; }
}

/* ════════════════════════════════════════════════════════════════════════════
   V16 — nav: marca a la izquierda, buscador al medio, contacto y carrito
   ════════════════════════════════════════════════════════════════════════════ */
.nav{ justify-content:space-between; gap:24px; }
.nav-logo a{ gap:11px; text-decoration:none; }
.nav-marca{
  font-family:var(--font-display); font-size:23px; letter-spacing:.07em;
  text-transform:uppercase; line-height:1; white-space:nowrap;
  color:#fff; transition:opacity .25s ease;
}
.nav-logo a:hover .nav-marca{ opacity:.82; }

/* El buscador queda centrado de verdad: ocupa el hueco del medio y se
   estira por igual hacia los dos lados. */
.nav-buscador{ flex:1 1 auto; min-width:0; max-width:620px; margin:0 auto; }

.nav-right{ gap:6px; }
.nav-right .icon-btn{ width:38px; height:38px; }
.nav-right .icon-btn svg{ width:21px; height:21px; }
/* El de contacto va dibujado con trazo, no relleno, como el resto de iconos. */
.nav-right a.icon-btn svg{ fill:none; stroke:currentColor; }

@media(max-width:1100px){
  .nav-marca{ font-size:20px; }
  .nav-buscador{ max-width:420px; }
}
@media(max-width:860px){
  .nav-marca{ display:none; }   /* queda solo el logo, para no apretar la barra */
}
/* Acá ya no entran los tres en una línea: la barra baja a su propio renglón
   y la marca vuelve a verse, porque arriba queda lugar de sobra. */
@media(max-width:768px){
  .nav{ flex-wrap:wrap; height:auto; padding:10px 16px 12px; row-gap:10px; }
  .nav-logo{ order:1; }
  .nav-right{ order:2; }
  .nav-buscador{ order:3; flex-basis:100%; max-width:none; margin:0; }
  .nav-marca{ display:inline; font-size:19px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   V17 — botón flotante de WhatsApp
   ════════════════════════════════════════════════════════════════════════════ */
/* Va por encima de la sección de categoría (z-index 251) pero por debajo de
   la ficha de producto (301), que ya tiene su propio botón de WhatsApp. */
.wa-flotante{
  position:fixed; right:24px; bottom:24px; z-index:260;
  display:flex; align-items:center; gap:0;
  height:56px; padding:0 17px; border-radius:999px;
  background:#25D366; color:#fff; text-decoration:none;
  box-shadow:0 8px 24px rgba(37,211,102,.38), 0 2px 8px rgba(0,0,0,.14);
  transition:gap .3s var(--ease-smooth), padding .3s var(--ease-smooth),
             transform .25s var(--ease-spring), box-shadow .25s var(--ease-smooth);
}
.wa-flotante svg{ width:28px; height:28px; fill:currentColor; flex-shrink:0; }
/* El texto está pero mide cero: se despliega al pasar el ratón. Así no tapa
   la página y en móvil queda un botón redondo y limpio. */
.wa-flotante-txt{
  font-family:var(--font-body); font-size:15px; font-weight:600;
  white-space:nowrap; max-width:0; overflow:hidden;
  transition:max-width .3s var(--ease-smooth);
}
.wa-flotante:hover{
  gap:10px; padding-right:22px; transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(37,211,102,.45), 0 2px 8px rgba(0,0,0,.16);
}
.wa-flotante:hover .wa-flotante-txt{ max-width:140px; }
.wa-flotante:active{ transform:translateY(0) scale(.97); }

@media(max-width:768px){
  .wa-flotante{ right:16px; bottom:16px; height:50px; padding:0 14px; }
  .wa-flotante svg{ width:25px; height:25px; }
  /* En táctil no hay "pasar el ratón": queda siempre redondo. */
  .wa-flotante:hover{ gap:0; padding-right:14px; }
  .wa-flotante:hover .wa-flotante-txt{ max-width:0; }
}
@media (prefers-reduced-motion: reduce){
  .wa-flotante,.wa-flotante-txt{ transition:none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   V18 — sugerencias del buscador, colgando de la barra
   ════════════════════════════════════════════════════════════════════════════ */
/* La barra deja de recortar, para que la lista pueda salirse de ella. */
.nav-buscador .buscador{ overflow:visible; }
.buscador-sug{
  position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:120;
  background:var(--white); border:1px solid var(--gray-light);
  border-radius:14px; padding:6px; overflow:hidden;
  box-shadow:0 18px 44px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.06);
}
.buscador-sug[hidden]{ display:none; }
.bsc-fila{
  width:100%; display:flex; align-items:center; gap:12px;
  padding:9px 10px; border-radius:10px; cursor:pointer;
  background:none; text-align:left; transition:background .15s;
}
.bsc-fila:hover,.bsc-fila.activa{ background:rgba(0,0,0,.05); }
/* Miniatura igual a la del carrito. */
.bsc-img{
  flex:0 0 auto; width:46px; height:46px; border-radius:9px;
  background:#f5f5f7; display:grid; place-items:center; overflow:hidden;
}
.bsc-img img{ width:82%; height:82%; object-fit:contain; display:block; }
.bsc-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.bsc-nombre{
  font-family:var(--font-body); font-size:14px; font-weight:500;
  color:var(--black); line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.bsc-precio{
  font-family:var(--font-display); font-size:18px; line-height:1;
  color:var(--black); letter-spacing:.01em;
}
.bsc-precio small{
  font-family:var(--font-body); font-size:10px; font-weight:400;
  color:var(--gray-mid); letter-spacing:0;
}
.bsc-todos{
  width:100%; margin-top:4px; padding:11px; border-radius:10px;
  background:var(--black); color:var(--white); cursor:pointer;
  font-family:var(--font-body); font-size:13px; font-weight:500;
  transition:background .2s;
}
.bsc-todos:hover{ background:var(--celeste-deep); }
.bsc-vacio{
  padding:16px 12px; text-align:center;
  font-size:14px; color:var(--gray-mid);
}

@media(max-width:768px){
  .buscador-sug{ border-radius:12px; }
  .bsc-img{ width:42px; height:42px; }
  .bsc-nombre{ font-size:13px; }
  .bsc-precio{ font-size:16px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   V19 — la ficha termina como una página: reseñas en columnas y pie abajo
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Cabecera de las reseñas ──────────────────────────────────────────────── */
.ppage-bottom .ppage-rv-head{
  display:flex; align-items:center; gap:12px;
  margin-bottom:22px; padding-bottom:0;
}
.ppage-bottom .ppage-rv-head .stars.lg .star{ font-size:26px; }
.ppage-rv-n{
  font-family:var(--font-display); font-size:30px; line-height:1;
  letter-spacing:.01em; color:var(--black);
}
.ppage-rv-total{
  font-family:var(--font-body); font-size:14px; font-weight:500;
  color:var(--gray-mid);
}

/* ── Reseñas en columnas ──────────────────────────────────────────────────────
   Con `columns` en vez de `grid` las tarjetas se acomodan por altura y no
   quedan huecos: un comentario de dos palabras no fuerza a los de al lado a
   estirarse. Cada tarjeta ya trae `break-inside: avoid`, así que ninguna se
   parte entre dos columnas.                                                 */
.ppage-bottom .ppage-rv-lista{
  display:block;
  columns:3; column-gap:14px;
}
.ppage-bottom .ppage-rv-lista .rv-card{ margin:0 0 14px; }

/* ── El pie, a lo ancho de la ficha ───────────────────────────────────────── */
/* El relleno de abajo de .ppage-bottom era el aire del final de la ficha.
   Ahora ese aire lo da el pie, así que sobra: sin esto quedaba un hueco
   blanco de 90 px entre los similares y el pie. */
.ppage-bottom{ padding-bottom:56px; }
.ppage-footer .footer{ border-radius:0; }

@media(max-width:1100px){
  .ppage-bottom .ppage-rv-lista{ columns:2; }
}
@media(max-width:768px){
  .ppage-bottom{ padding-bottom:40px; }
  .ppage-bottom .ppage-rv-head{ margin-bottom:16px; }
  .ppage-bottom .ppage-rv-head .stars.lg .star{ font-size:22px; }
  .ppage-rv-n{ font-size:25px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   V20 — protección de las imágenes
   El JS está en js/pi.js, con el interruptor para elegir cuánto se bloquea.
   ════════════════════════════════════════════════════════════════════════════ */
img{
  /* Sin esto el navegador deja tirar la foto al escritorio y queda guardada.
     El JS ya niega el arrastre, pero esto lo corta antes de que arranque, así
     no se ve ni la sombra de la imagen siguiendo al puntero. */
  -webkit-user-drag:none;
     -khtml-user-drag:none;
        -moz-user-drag:none;
          -o-user-drag:none;
  user-drag:none;

  /* La pulsación larga en iOS abre el menú de "guardar imagen" sin pasar por
     el evento contextmenu. Esto es lo único que lo evita. */
  -webkit-touch-callout:none;

  /* Una imagen seleccionada se puede arrastrar junto con el texto. */
  -webkit-user-select:none;
     -moz-user-select:none;
      -ms-user-select:none;
          user-select:none;
}

/* Los medios de pago y los iconos son dibujos del código, no archivos: no hay
   nada que guardar, pero seleccionarlos por accidente se ve mal. */
svg{ -webkit-user-select:none; user-select:none; }

/* ════════════════════════════════════════════════════════════════════════════
   V21 — el hueco de las tarjetas de ofertas · menos radio
   ════════════════════════════════════════════════════════════════════════════ */

/* ── El hueco ────────────────────────────────────────────────────────────────
   La imagen lateral lleva width="620" height="860" en el HTML, así que el
   navegador le reserva esa proporción: a 300 px de ancho pedía 416 px de
   alto. Eso estiraba la fila entera y las cinco tarjetas se llenaban de aire
   para alcanzarla, con el hueco justo arriba del pie por el margin-top:auto.

   La cura es sacar la foto del flujo: en absoluto no aporta altura, así que
   la fila la miden las tarjetas y la imagen llena lo que salga.            */
.oferta-lateral{ min-height:0; align-self:stretch; }
.oferta-media{ position:absolute; inset:0; width:100%; height:100%; }
.oferta-media img{ width:100%; height:100%; object-fit:cover; }

/* Ahora la altura la manda la tarjeta, así que se aprovecha en lo que sirve:
   la foto del producto, más alta que ancha. Con esto la fila queda parecida
   al alto que tenía antes, pero lleno de producto en vez de aire, y la
   imagen lateral se recorta poco. */
.ofertas-row .card-img-wrap{ aspect-ratio:1/1.2; }

/* ── Menos radio ─────────────────────────────────────────────────────────── */
.product-card{ border-radius:8px; }
.card-cart,
.ofertas-row .card-cart{ border-radius:7px; }
.oferta-lateral,
.oferta-lateral .slot{ border-radius:8px; }
.cat-card{ border-radius:8px; }
.rv-card{ border-radius:8px; }
.sim-card{ border-radius:8px; }
.bsc-img{ border-radius:6px; }

@media(max-width:768px){
  .card-cart,.ofertas-row .card-cart{ border-radius:7px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   V22 — reseñas recortadas con degradado y botón "Ver más"
   El alto del recorte se elige en js/rv.js → RESENAS_ALTO_RECORTE
   ════════════════════════════════════════════════════════════════════════════ */
.ppage-rv-caja{ position:relative; }

/* Solo se recorta cuando js/rv.js midió que de verdad sobra contenido. Sin
   esta clase la caja no tiene límite, así que con pocas reseñas no aparece
   un degradado sobre el aire. */
.ppage-rv-caja.recortada{
  max-height:var(--rv-alto,380px);
  overflow:hidden;
}

/* El degradado tapa el corte. Va sobre la caja, no dentro de la lista, así
   las columnas no lo toman como una tarjeta más. */
.ppage-rv-caja.recortada::after{
  content:'';
  position:absolute; left:0; right:0; bottom:0; height:130px;
  background:linear-gradient(to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.75) 55%,
    #fff 100%);
  pointer-events:none;
}

/* Al desplegar, la caja crece sin tope. La transición de max-height no se
   puede animar a un valor desconocido, así que el cambio es directo: más
   vale instantáneo que un salto a medias. */
.ppage-rv-caja.abierta{ max-height:none; overflow:visible; }

.ppage-rv-mas{
  display:flex; align-items:center; justify-content:center; gap:7px;
  margin:-14px auto 0; position:relative; z-index:1;
  padding:12px 26px; border-radius:999px;
  border:1px solid var(--gray-light); background:var(--white);
  font-family:var(--font-body); font-size:14px; font-weight:500;
  color:var(--black); cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  transition:background .2s, color .2s, border-color .2s, transform .2s var(--ease-spring);
}
.ppage-rv-mas svg{ width:17px; height:17px; fill:currentColor; }
.ppage-rv-mas:hover{
  background:var(--black); border-color:var(--black); color:var(--white);
  transform:translateY(-1px);
}
.ppage-rv-mas:active{ transform:translateY(0); }
.ppage-rv-mas[hidden]{ display:none; }

@media(max-width:768px){
  .ppage-rv-mas{ width:100%; padding:13px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   V23 — la marca un poco más grande y el buscador al centro de verdad
   ════════════════════════════════════════════════════════════════════════════ */

/* El buscador quedaba corrido a la derecha, y no era el `margin:auto`: con
   `space-between`, ese auto lo centra en el espacio que SOBRA, no en la
   pantalla. Como el bloque del logo mide casi 200 px y el de los iconos
   menos de 90, el sobrante está desplazado y el buscador con él.

   La cura es darles el mismo ancho a los dos costados: con `flex:1 1 0`
   ambos crecen por igual, así que lo del medio cae en el centro exacto. */
.nav-logo{ flex:1 1 0; min-width:0; }
.nav-buscador{ flex:0 1 620px; margin:0; }

/* Y acá estaba el nudo: .nav-right seguía con `position:absolute` desde el
   diseño viejo, cuando la nav era un bloque centrado con los costados
   colgados a los bordes. Al logo se le sacó hace tiempo, a los iconos no.
   Un elemento absoluto no participa del reparto flex, así que la fila solo
   tenía logo y buscador: con `space-between` el buscador se iba al borde
   derecho por más `flex` que se le pusiera a los iconos. */
.nav-right{
  position:static; right:auto;
  flex:1 1 0; justify-content:flex-end;
}

.nav-marca{ font-size:26px; }

@media(max-width:1100px){
  .nav-marca{ font-size:23px; }
  .nav-buscador{ flex:0 1 440px; }
}
@media(max-width:768px){
  /* Acá el buscador ya baja a su propio renglón: los costados vuelven a
     medir lo que necesitan, si no los iconos quedarían muy separados. */
  .nav-logo,.nav-right{ flex:0 0 auto; }
  .nav-buscador{ flex:1 1 100%; }
  .nav-marca{ font-size:21px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   V24 — botón de Instagram en el pie
   ════════════════════════════════════════════════════════════════════════════ */
.footer-redes{ display:flex; justify-content:center; gap:12px; }
.footer-red{
  display:inline-flex; align-items:center; gap:9px;
  padding:10px 20px 10px 16px; border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.85); text-decoration:none;
  font-family:var(--font-body); font-size:14px; font-weight:500;
  transition:background .25s var(--ease-smooth), color .25s,
             border-color .25s, transform .25s var(--ease-spring);
}
/* Glifo de Instagram en viewBox 0 0 24 24, con aire propio. */
.footer-red svg{ width:22px; height:22px; fill:currentColor; flex:none; }
/* El degradado es el de la marca de Instagram. */
.footer-red:hover{
  background:linear-gradient(45deg,#f09433,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888);
  border-color:transparent; color:#fff;
  transform:translateY(-2px);
}
.footer-red:active{ transform:translateY(0); }

@media(max-width:560px){
  .footer-red{ padding:10px 18px 10px 15px; font-size:13px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   V25 — segunda fila de productos, donde estaba el banner promo
   ════════════════════════════════════════════════════════════════════════════ */
.mas-section{ position:relative; z-index:2; max-width:1320px; margin:0 auto; padding:72px 24px 0; }
.mas-header{ margin-bottom:28px; }
.mas-titulo{
  font-family:var(--font-display); font-size:clamp(38px,6vw,64px);
  letter-spacing:.02em; line-height:1;
}
/* Seis a lo ancho: sin la imagen al costado entran todas en una línea. */
.mas-row{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px; }
.mas-row .card-price{ font-size:24px; }
.mas-row .card-cart{ width:38px; height:38px; }
/* Con la fila más angosta, la foto vuelve a ser cuadrada: estirada a 1/1.2
   como en ofertas, la tarjeta quedaría demasiado alta y flaca. */
.mas-row .card-img-wrap{ aspect-ratio:1/1; }

@media(max-width:1100px){
  .mas-row{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .mas-row .card-price{ font-size:26px; }
}
@media(max-width:768px){
  .mas-section{ padding:56px 16px 0; }
  .mas-row{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ════════════════════════════════════════════════════════════════════════════
   V26 — carrusel automático de valoraciones · pie en la sección de categoría
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Carrusel de valoraciones ────────────────────────────────────────────────
   Va solo, como la cinta de arriba: una fila que se desliza sin que nadie la
   maneje.

   Queda dentro del ancho de la sección, no a lo ancho de la pantalla: para
   eso haría falta `width:100vw`, y 100vw incluye la barra de desplazamiento,
   así que en cualquier página con scroll vertical aparecería una barra
   horizontal de más. No vale la pena por unos píxeles a cada lado.        */
.rv-carrusel{
  position:relative;
  overflow:hidden;
  /* Se desvanecen en los extremos, así el corte no se ve duro. */
  -webkit-mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 3%,#000 97%,transparent);
}
.rv-pista{
  display:flex; align-items:flex-start; gap:16px;
  width:max-content; padding:4px 8px;
  animation:cinta 120s linear infinite;
  will-change:transform;
}
/* Dentro del carrusel la tarjeta necesita un ancho fijo: sin él, cada una
   mediría según su texto y el recorrido saldría irregular. */
.rv-carrusel .rv-card{
  flex:0 0 340px; width:340px; margin:0;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
}
/* El aviso de "no quiero movimiento" del sistema manda: la fila se queda
   quieta y se puede recorrer a mano. */
@media (prefers-reduced-motion: reduce){
  .rv-pista{ animation:none; }
  .rv-carrusel{ overflow-x:auto; }
}


/* ── El pie de la sección de categoría ───────────────────────────────────── */
.cpage-footer .footer{ border-radius:0; }
/* El relleno de abajo del cuerpo era el aire del final; ahora lo da el pie. */
.cpage-body{ padding-bottom:56px; }

@media(max-width:768px){
  .rv-carrusel .rv-card{ flex:0 0 280px; width:280px; }
  .rv-pista{ gap:12px; }
  .cpage-body{ padding-bottom:40px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   V27 — las tarjetas del carrusel, todas del mismo tamaño
   ════════════════════════════════════════════════════════════════════════════ */

/* Antes cada una medía según su texto: al lado de "Suenan excelente." caía
   una de cuatro renglones y la fila quedaba dispareja.

   Ahora la altura la manda la más alta y todas la copian, con dos límites
   para que ninguna se dispare: el nombre del producto en un renglón y el
   comentario en tres. Lo que sobra se corta con puntos suspensivos. */
.rv-pista{ align-items:stretch; }

.rv-carrusel .rv-card{
  display:flex; flex-direction:column;
  padding:16px 18px;
}

/* El nombre del producto puede ser largo ("Cargador Lightning Completo") y
   sumaría un renglón de más en unas tarjetas sí y en otras no. */
.rv-carrusel .rv-prod{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.rv-carrusel .rv-text{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
  /* Reserva los tres renglones aunque el texto sea "👍👍", así el bloque de
     abajo no se mueve de tarjeta en tarjeta. */
  min-height:calc(3 * 1.55em);
}

@media(max-width:768px){
  .rv-carrusel .rv-card{ padding:14px 16px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   V28 — colores agotados y el color comprado en las reseñas
   ════════════════════════════════════════════════════════════════════════════ */

.ppage-color-swatch.agotado{ position:relative; }

/* Los colores sin stock van juntos en una cajita gris. Al elegir uno aparece
   la etiqueta "Sin stock" al lado. Conservan su color real. */
.ppage-colors-oos{
  display:inline-flex; align-items:center; gap:9px;
  background:#ececef; border-radius:16px; padding:6px 10px;
}
.ppage-colors-oos .oos-swatches{display:inline-flex; gap:10px}
.ppage-colors-oos .oos-cap{
  display:inline; font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:#6e6e73;
}
.color-agotado-txt{
  font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:#c0392b; margin-left:6px;
}

/* El color que compró quien dejó la reseña. */
.rv-color{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:7px; font-size:11px; color:var(--gray-mid);
}
.rv-color-mini{
  width:13px; height:13px; border-radius:50%; flex:none;
  object-fit:cover; border:1px solid rgba(0,0,0,.12);
}

/* ════════════════════════════════════════════════════════════════════════════
   V29 — filas de productos como carrusel horizontal
   ════════════════════════════════════════════════════════════════════════════ */

.carru{ position:relative; min-width:0; }

/* La pista es un contenedor con desplazamiento propio. Antes era una rejilla
   que envolvía en dos líneas; ahora las tarjetas van una al lado de la otra y
   se recorren con las flechas o arrastrando en el teléfono. */
.carru-pista{
  display:flex !important;
  gap:14px;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x proximity;
  scroll-behavior:smooth;
  /* Sin este relleno la sombra de la tarjeta al pasar el ratón queda cortada
     por el borde del contenedor. */
  padding:4px 2px 10px;
  scrollbar-width:none;
  -ms-overflow-style:none;
  overscroll-behavior-x:contain;
}
.carru-pista::-webkit-scrollbar{ display:none; }
.carru-pista > .product-card{ scroll-snap-align:start; }

/* El ancho de la tarjeta ya no lo reparte una rejilla: se fija acá. */
.ofertas-row.carru-pista > .product-card{ flex:0 0 190px; }
.mas-row.carru-pista     > .product-card{ flex:0 0 200px; }

.carru-arr{
  position:absolute; top:44%; transform:translateY(-50%);
  z-index:4; width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:var(--white); border:1px solid var(--gray-light);
  box-shadow:0 4px 16px rgba(0,0,0,.14);
  transition:background .2s, color .2s, transform .2s var(--ease-spring);
}
.carru-arr svg{ width:22px; height:22px; fill:currentColor; }
.carru-arr:hover{ background:var(--black); color:var(--white); transform:translateY(-50%) scale(1.07); }
.carru-arr[hidden]{ display:none; }
.carru-prev{ left:-14px; }
.carru-next{ right:-14px; }

@media(max-width:1100px){
  .ofertas-row.carru-pista > .product-card{ flex:0 0 185px; }
  .mas-row.carru-pista     > .product-card{ flex:0 0 195px; }
}

/* En el teléfono la imagen lateral va arriba y las dos filas quedan
   horizontales, con la tarjeta siguiente asomando para que se note que hay
   más. Las flechas se esconden: ahí se arrastra con el dedo. */
@media(max-width:900px){
  .ofertas-row.carru-pista > .product-card,
  .mas-row.carru-pista     > .product-card{ flex:0 0 min(46vw,215px); }
  .carru-arr{ display:none; }
  .carru-pista{ gap:12px; scroll-padding-left:16px; }
}
@media(max-width:768px){
  /* Se sale del margen de la sección para que la fila llegue hasta el borde
     de la pantalla, como en cualquier tienda en el teléfono. */
  .carru-pista{
    margin-left:-16px; margin-right:-16px;
    padding-left:16px; padding-right:16px;
  }
  /* Dos tarjetas y media a la vista: con una y media, cada producto ocupaba
     casi toda la pantalla y había que arrastrar mucho para ver la fila. */
  .ofertas-row.carru-pista > .product-card,
  .mas-row.carru-pista     > .product-card{ flex:0 0 min(43vw,185px); }
  .carru-pista .card-info{ padding:11px 12px 13px !important; }
  .carru-pista .card-name{ font-size:12.5px !important; }
  .mas-row.carru-pista .card-price,
  .ofertas-row.carru-pista .card-price{ font-size:19px !important; }
  .carru-pista .card-desde{ font-size:9px; }
  .carru-pista .card-cart{ width:33px !important; height:33px !important; }
  .carru-pista .card-cart svg{ width:16px; height:16px; }
  .carru-pista .card-foot{ gap:7px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   V30 — la tira de confianza pasa a carrusel automático en el teléfono
   ════════════════════════════════════════════════════════════════════════════ */

/* En escritorio la pista es transparente: la rejilla de cuatro columnas sigue
   siendo la de .tira, así que los cuatro elementos se reparten igual que
   antes. La segunda mitad duplicada se esconde para no repetirlos. */
.tira-pista{ display:contents; }
.tira-pista > .tira-item:nth-child(n+5){ display:none; }

@media(max-width:768px){
  /* Acá se convierte en una sola fila que se desliza sola, como la cinta de
     arriba. Se sale del margen para que llegue al borde de la pantalla. */
  .tira{
    display:block !important;
    overflow:hidden;
    padding:14px 0;
    margin-left:0; margin-right:0;
    -webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);
            mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);
  }
  .tira-pista{
    display:flex;
    width:max-content;
    gap:26px;
    padding-left:16px;
    animation:cinta 34s linear infinite;
    will-change:transform;
  }
  /* Con la copia visible el bucle no muestra el salto al reiniciar. */
  .tira-pista > .tira-item:nth-child(n+5){ display:flex; }
  .tira-item{ flex:0 0 auto; }
  .tira-t{ font-size:12.5px; white-space:nowrap; }
  .tira-s{ font-size:11px; white-space:nowrap; }
  .tira-icono{ width:31px; height:31px; }
  .tira-icono svg{ width:17px; height:17px; }
}

/* Si el sistema pide menos movimiento, la fila se queda quieta y se puede
   recorrer a mano. */
@media (prefers-reduced-motion: reduce){
  .tira-pista{ animation:none !important; }
  .tira{ overflow-x:auto !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   V31 — el banner de categoría respeta el margen de los productos
   ════════════════════════════════════════════════════════════════════════════ */

/* Iba de borde a borde de la pantalla y quedaba desalineado con las tarjetas
   de abajo. Ahora usa el mismo ancho y el mismo margen que .cpage-body, así
   el banner y la primera columna de productos arrancan en la misma línea. */
.cpage-banner{
  max-width:1320px;
  margin:28px auto 0;
  padding:0 24px;
  background:transparent;
}
.cpage-banner-media{ border-radius:12px; overflow:hidden; }
.cpage-banner .slot{
  border-radius:12px;
  border:1.5px dashed var(--gray-light);
}

/* El cuerpo ya no necesita tanto aire arriba: lo separa el banner. */
.cpage-body{ padding-top:30px; }

/* El botón de volver quedaba sobre el banner cuando este llegaba al borde.
   Ahora que hay margen, se corre para no taparlo. */
.cpage-back{ top:16px; left:16px; }

@media(max-width:768px){
  /* El margen de arriba deja lugar al botón de volver, que está fijo en esa
     esquina y sin esto quedaría encima del banner. */
  .cpage-banner{ padding:0 16px; margin-top:58px; }
  .cpage-body{ padding-top:24px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   V32 — la nav pierde el fondo negro
   ════════════════════════════════════════════════════════════════════════════ */

/* Sin fondo propio: se ve el de la página. La nav sigue ocupando su lugar
   antes del banner, no flota encima. */
.nav,
.nav.scrolled,
.nav.nav-on-dark{
  /* Fondo del MISMO color que la página, no transparente. Se ve igual, pero
     al ser opaco el banner no puede asomar por debajo: la animación de la nav
     deja un transform que arma su propio contexto de apilado, y ahí el
     z-index entre nav y banner no siempre gana. Un fondo sólido lo zanja. */
  background:var(--off-white) !important;
  backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  box-shadow:none !important;
  border-bottom:none !important;
  height:64px;
  position:relative; z-index:60;
}

/* El logo es blanco puro, así que sobre fondo claro desaparece. Se invierte:
   al ser de un solo color, queda negro limpio sin halos ni bordes raros. */
.nav-logo img{ filter:invert(1); }

.nav-logo,
.nav.nav-on-dark .nav-logo{ color:var(--black) !important; opacity:1 !important; }
.nav-marca{ color:var(--black); }

.nav-right .icon-btn,
.nav.nav-on-dark .nav-right .icon-btn{ color:var(--black) !important; opacity:1 !important; }
.nav .icon,
.nav.nav-on-dark .icon{ fill:var(--black) !important; opacity:1 !important; }
.nav-right a.icon-btn svg{ fill:none !important; stroke:var(--black); opacity:1; stroke-width:2; }
.nav-right .icon-btn:hover{ background:rgba(0,0,0,.055); }
.cart-count{ background:var(--black); color:#fff; }

/* Buscador: blanco sobre el gris de la página, para que se lea que es un
   campo donde escribir. Al enfocarlo el borde se pone negro. */
.nav-buscador .buscador{
  background:var(--white);
  border:1px solid var(--gray-light);
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.nav-buscador .buscador:focus-within{
  border-color:var(--black);
  box-shadow:0 0 0 3px rgba(0,0,0,.07);
}
.nav-buscador .buscador-lupa{ fill:var(--gray-mid); }
.nav-buscador .buscador:focus-within .buscador-lupa{ fill:var(--black); }
.nav-buscador .buscador-input{ color:var(--black); }
.nav-buscador .buscador-input::placeholder{ color:var(--gray-mid); }
.nav-buscador .buscador-clear{ color:var(--gray-mid); }

/* La nav estaba en position:static, donde z-index no hace nada. El banner,
   en cambio, es relative con z-index 2: se pintaba por encima de la nav y al
   desplazarse en el teléfono se comía el borde del buscador. Con relative y
   una capa más alta, la nav siempre queda arriba. */
.nav{
  position:relative;
  z-index:60;
}

@media(max-width:768px){
  .nav{ height:auto; }
}

/* ── Menos espacio entre la nav y el banner ─────────────────────────────── */
.bnr-section{ margin-top:14px; }
@media(max-width:768px){ .bnr-section{ margin-top:10px; } }

/* ════════════════════════════════════════════════════════════════════════════
   V33 — el banner deja de pisar la nav al desplazar en el teléfono
   ════════════════════════════════════════════════════════════════════════════ */

/* Cinta, nav y banner son tres bloques, uno debajo del otro, y así se quedan.
   El lío venía de los efectos que los promovían a capas de la tarjeta
   gráfica: cuando el navegador recompone esas capas al desplazar, una puede
   pintarse sobre otra aunque en el papel esté debajo. La cura es que no haya
   capas de más en esta parte de la página, no apilar más parches encima. */
.nav{
  position:relative;
  z-index:60;
}
.bnr-section{ z-index:1; }

/* La cinta llevaba un desvanecido en los bordes hecho con mask-image. Ese
   efecto obliga a la tarjeta gráfica a componer la cinta aparte, y al estar
   pegada a la nav arrastraba a sus vecinos. Se cambia por un degradado
   encima, que se ve igual y no crea ninguna capa. */
.topbar{
  -webkit-mask-image:none !important;
          mask-image:none !important;
}
.topbar::before,
.topbar::after{
  content:''; position:absolute; top:0; bottom:0; width:6%;
  z-index:1; pointer-events:none;
}
.topbar::before{ left:0;  background:linear-gradient(to right,var(--celeste),transparent); }
.topbar::after { right:0; background:linear-gradient(to left, var(--celeste),transparent); }

/* Los mensajes van por encima del degradado. Sin position propia la pista no
   entra en el orden de apilado y el degradado le pasaba por delante, tapando
   las letras que entraban y salían. */
.topbar-track{ position:relative; z-index:2; }

/* La cinta se anima sin parar. Con will-change queda pegada a la tarjeta
   gráfica todo el tiempo, y esa capa permanente al lado de la nav es lo que
   desordenaba el pintado al desplazar en el teléfono. La animación anda
   igual de fluida sin él: son cuatro textos moviéndose en línea recta. */
.topbar-track{ will-change:auto; }

/* El carrusel del banner queda recortado dentro de su caja, sin pintar
   afuera. Es lo único que hace falta de este lado. */
.bnr-swiper{ overflow:hidden; }

/* ════════════════════════════════════════════════════════════════════════════
   V34 — los puntos del carrusel, debajo del banner
   ════════════════════════════════════════════════════════════════════════════ */

/* Estaban flotando sobre la imagen: en blanco se perdían contra un banner
   claro y en oscuro contra uno oscuro. Fuera del banner el fondo es siempre
   el mismo gris, así que el gris oscuro se lee en todos los casos. */
.bnr-pagination{
  position:static;
  margin-top:14px;
  display:flex; justify-content:center; gap:8px;
}
.bnr-pagination .swiper-pagination-bullet{
  width:8px; height:8px; border-radius:99px;
  background:var(--gray-light);
  opacity:1;
  transition:width .3s var(--ease-smooth), background .3s;
}
.bnr-pagination .swiper-pagination-bullet-active{
  width:24px;
  background:var(--gray-mid);
}
/* El hueco punteado ya no necesita su propio color: el de arriba sirve. */
.bnr-swiper:has(.slot) ~ .bnr-pagination .swiper-pagination-bullet{ background:var(--gray-light); }
.bnr-swiper:has(.slot) ~ .bnr-pagination .swiper-pagination-bullet-active{ background:var(--gray-mid); }

@media(max-width:768px){
  .bnr-pagination{ margin-top:11px; }
}

#mt-cover{
  position:fixed; inset:0; z-index:2147483647;
  display:flex; align-items:center; justify-content:center;
  background:#fff; padding:28px; text-align:center;
}
#mt-cover .mt-box{max-width:520px}
#mt-cover .mt-logo{
  font-family:'Anton',sans-serif,system-ui; font-size:26px; letter-spacing:2px;
  color:#111; margin-bottom:18px;
}
#mt-cover .mt-msg{
  font-family:system-ui,-apple-system,sans-serif; font-size:19px; line-height:1.5;
  color:#1d1d1f; white-space:pre-wrap;
}

/* ── Personas viendo este producto (ficha) ─────────────────── */
.ppage-viewers{
  display:inline-flex; align-items:center; gap:7px;
  width:fit-content; max-width:100%; align-self:flex-start;
  margin:12px 0 2px; padding:5px 11px;
  background:rgba(52,199,89,.10); border:1px solid rgba(52,199,89,.28);
  border-radius:999px; font-size:12px; color:var(--black); letter-spacing:.2px;
}
.ppage-viewers[hidden]{display:none}
.ppage-viewers .pv-txt b{font-weight:800}
.ppage-viewers .pv-dot{
  width:9px; height:9px; border-radius:50%; background:#34c759; flex:none;
  box-shadow:0 0 0 0 rgba(52,199,89,.5); animation:pvPulse 1.6s infinite;
}
@keyframes pvPulse{
  0%{box-shadow:0 0 0 0 rgba(52,199,89,.5)}
  70%{box-shadow:0 0 0 7px rgba(52,199,89,0)}
  100%{box-shadow:0 0 0 0 rgba(52,199,89,0)}
}
.ppage-viewers.pv-bump .pv-txt b{animation:pvBump .5s ease}
@keyframes pvBump{0%{transform:scale(1)}40%{transform:scale(1.3);color:#1a9e44}100%{transform:scale(1)}}
40%{transform:scale(1.35);color:#e0245e}100%{transform:scale(1)}}

.rv-card-foto{padding:0;overflow:hidden;cursor:pointer;display:block;border:none;background:transparent;box-shadow:none;width:210px;max-width:100%}
.rv-foto-main{position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;background:transparent;border-radius:14px}
.rv-foto-main img{width:100%;height:100%;object-fit:cover;display:block;border-radius:14px;transition:transform .35s ease}
.rv-card-foto:hover .rv-foto-main img{transform:scale(1.04)}
.rv-foto-grad{position:absolute;left:0;right:0;bottom:0;height:46%;border-radius:0 0 14px 14px;background:linear-gradient(to top,rgba(255,255,255,.97) 0%,rgba(255,255,255,.78) 40%,rgba(255,255,255,0) 100%);pointer-events:none}
.rv-foto-info{position:absolute;left:14px;right:14px;bottom:12px;color:var(--ink,#1d1d1f)}
.rv-foto-name{font-weight:700;font-size:14px;display:flex;align-items:center;gap:5px;margin-bottom:3px}
.rv-foto-info .stars{font-size:12px}
.rv-foto-coment{font-size:13px;line-height:1.4;margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rv-ok-ico{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:#1d9bf0;color:#fff;font-size:10px;flex:none}
.rv-foto-n{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.6);color:#fff;font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px}

#rvModal{position:fixed;inset:0;z-index:4000;display:none}
#rvModal.abierto{display:block}
.rvm-overlay{position:absolute;inset:0;background:rgba(0,0,0,.72)}
.rvm-box{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(680px,92vw);max-height:88vh;overflow:auto;background:#fff;border-radius:18px;padding:18px}
.rvm-cont{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:flex-start;gap:0}
.rvm-x{position:absolute;top:10px;right:14px;z-index:2;background:rgba(0,0,0,.5);color:#fff;border:none;width:32px;height:32px;border-radius:50%;font-size:20px;cursor:pointer;line-height:1}
.rvm-fotos{flex:none;width:240px;display:flex;flex-direction:column;gap:8px}
.rvm-fotos img{width:240px;height:240px;object-fit:cover;border-radius:12px;display:block}
.rvm-info{flex:1;padding:6px 8px 6px 22px;min-width:0}
.rvm-name{font-weight:700;font-size:18px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.rvm-date{display:block;color:var(--gray-mid,#6e6e73);font-size:13px;margin:8px 0}
.rvm-text{font-size:16px;line-height:1.55;margin-top:10px}
.rvm-tipo{margin-top:14px;font-size:14px;color:var(--gray-mid,#6e6e73)}
.rvm-tipo b{color:var(--ink,#1d1d1f)}
@media(max-width:620px){
  .rvm-box{padding:14px}
  .rvm-cont{flex-direction:row;align-items:center;gap:0}
  .rvm-fotos{flex:none;width:135px;flex-direction:column}
  .rvm-fotos img{width:135px;height:170px}
  .rvm-info{flex:1;min-width:0;padding:2px 2px 2px 14px}
  .rvm-name{font-size:15px}
  .rvm-date{font-size:12px;margin:6px 0}
  .rvm-text{font-size:14px;line-height:1.5;margin-top:8px}
  .rvm-tipo{margin-top:10px;font-size:13px}
}

.catnav{max-width:1180px;margin:22px auto 0;padding:0 20px;display:flex;justify-content:center;gap:40px}
.catnav-item{display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;color:var(--ink,#1d1d1f);flex:none;transition:color .2s ease;animation:catnavColor 6s ease-in-out infinite}
.catnav-ico{display:flex;align-items:center;justify-content:center;transition:transform .25s var(--ease-spring,cubic-bezier(.34,1.56,.64,1));animation:catnavScale 6s ease-in-out infinite}
.catnav-ico svg{width:38px;height:38px}
.catnav-ico svg path,.catnav-ico svg rect{stroke-dasharray:1;stroke-dashoffset:1;animation:catnavDraw 1.3s var(--ease-smooth,cubic-bezier(.4,0,.2,1)) forwards}
.catnav-item:nth-child(2) .catnav-ico svg *{animation-delay:.18s}
.catnav-item:nth-child(3) .catnav-ico svg *{animation-delay:.36s}
.catnav-item:nth-child(4) .catnav-ico svg *{animation-delay:.54s}
.catnav-item:nth-child(2),.catnav-item:nth-child(2) .catnav-ico{animation-delay:1.5s}
.catnav-item:nth-child(3),.catnav-item:nth-child(3) .catnav-ico{animation-delay:3s}
.catnav-item:nth-child(4),.catnav-item:nth-child(4) .catnav-ico{animation-delay:4.5s}
@keyframes catnavDraw{to{stroke-dashoffset:0}}
@keyframes catnavColor{0%,22%,100%{color:var(--ink,#1d1d1f)}8%,16%{color:#0071e3}}
@keyframes catnavScale{0%,22%,100%{transform:scale(1)}8%,16%{transform:scale(1.18)}}
.catnav:hover .catnav-item,.catnav:hover .catnav-ico{animation:none}
.catnav:hover .catnav-item{color:var(--ink,#1d1d1f)}
.catnav:hover .catnav-ico{transform:scale(1)}
.catnav:hover .catnav-item:hover{color:#0071e3}
.catnav:hover .catnav-item:hover .catnav-ico{transform:scale(1.18)}
.catnav-txt{font-size:13px;font-weight:600;letter-spacing:.2px}
@media(max-width:768px){
  .catnav{justify-content:center;gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:8px 20px 6px}
  .catnav::-webkit-scrollbar{display:none}
  .catnav-item{scroll-snap-align:center}
  .catnav-ico svg{width:34px;height:34px}
}

.rv-carrusel .rv-card-foto,
.ppage-rv-lista .rv-card-foto,
.rv-pista .rv-card-foto,
.rv-card.rv-card-foto{
  border:none;background:transparent;box-shadow:none;padding:0;border-radius:14px;
}

.rv-carrusel .rv-card-foto{flex:0 0 210px;width:210px}
@media(max-width:768px){.rv-carrusel .rv-card-foto{flex:0 0 180px;width:180px}}

.ppage-rv-lista .rv-card-foto{width:210px;max-width:210px;align-self:flex-start}
.ppage-rv-caja .rv-card-foto{width:210px;max-width:210px}
.ppage-bottom .ppage-rv-lista .rv-card-foto{max-width:100%}

.rv-pista{align-items:flex-start}
.rv-carrusel .rv-card-foto{align-self:flex-start}
@media(max-width:560px){
  .rv-carrusel .rv-card-foto{flex:0 0 160px;width:160px}
  .rv-carrusel .rv-card{flex:0 0 240px;width:240px}
}

.ppage-bottom .ppage-rv-lista,
.ppage-rv-caja .ppage-rv-lista{
  display:block;columns:220px;column-gap:12px;
}
.ppage-rv-lista .rv-card,
.ppage-rv-lista .rv-card-foto{break-inside:avoid;width:100%;max-width:100%;margin:0 0 12px}
.ppage-rv-lista .rv-foto-main{aspect-ratio:4/5}
@media(max-width:768px){
  .ppage-bottom .ppage-rv-lista,
  .ppage-rv-caja .ppage-rv-lista{columns:2;column-gap:10px}
  .ppage-rv-lista .rv-card,
  .ppage-rv-lista .rv-card-foto{margin:0 0 10px}
  .ppage-rv-lista .rv-card{padding:12px 13px}
  .ppage-rv-lista .rv-text{font-size:13.5px;line-height:1.45}
  .ppage-rv-lista .rv-name{font-size:13px}
  .ppage-rv-lista .rv-head{grid-template-columns:auto 1fr;gap:8px}
  .ppage-rv-lista .rv-who{min-width:0}
  .ppage-rv-lista .rv-date{grid-column:2;grid-row:2;margin-top:3px;font-size:11px}
}

.rvf-top{display:flex;justify-content:flex-end;margin-bottom:14px}
.ppage-rv-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.ppage-rv-bar .ppage-rv-head{margin-bottom:0}
.rvf-abrir{background:#fff;color:var(--ink,#1d1d1f);border:1px solid var(--gray-light,#d8d8dd);border-radius:12px;padding:10px 20px;font:inherit;font-weight:600;cursor:pointer;flex:none}
@media(max-width:560px){
  .ppage-rv-bar{flex-wrap:nowrap;gap:12px}
  .ppage-rv-bar .ppage-rv-head{flex:1 1 auto;min-width:0;flex-wrap:wrap;gap:4px 8px}
  .ppage-rv-bar .rvf-abrir{flex:none;padding:9px 15px;font-size:14px;white-space:nowrap}
}
.rvf-abrir:hover{background:#fafafa;border-color:#000}
.rvf-msg{font-size:13px;color:#e0245e;font-weight:600;margin-top:8px}
.ppage-rv-vacio{color:var(--gray-mid,#6e6e73);font-size:15px;padding:6px 0}

#rvfModal{position:fixed;inset:0;z-index:4200;display:none}
#rvfModal.abierto,#rvfModal.cerrando{display:block}
.rvfm-ov{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;animation:rvfmFade .25s var(--ease-out,cubic-bezier(0,0,.2,1)) forwards}
.rvfm-box{position:absolute;top:50%;left:50%;width:min(560px,94vw);min-height:420px;max-height:90vh;background:#fff;border-radius:20px;display:flex;flex-direction:column;overflow:hidden;transform:translate(-50%,-50%) scale(.9);opacity:0;animation:rvfmPop .4s var(--ease-spring,cubic-bezier(.34,1.56,.64,1)) forwards}
#rvfModal.cerrando .rvfm-ov{animation:rvfmFadeOut .22s var(--ease-smooth,cubic-bezier(.4,0,.2,1)) forwards}
#rvfModal.cerrando .rvfm-box{animation:rvfmPopOut .24s var(--ease-smooth,cubic-bezier(.4,0,.2,1)) forwards}
@keyframes rvfmFade{to{opacity:1}}
@keyframes rvfmFadeOut{from{opacity:1}to{opacity:0}}
@keyframes rvfmPop{from{transform:translate(-50%,-46%) scale(.9);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}
@keyframes rvfmPopOut{from{transform:translate(-50%,-50%) scale(1);opacity:1}to{transform:translate(-50%,-44%) scale(.92);opacity:0}}
.rvfm-x{position:absolute;top:14px;left:16px;z-index:2;background:none;border:none;font-size:26px;line-height:1;cursor:pointer;color:var(--ink,#1d1d1f)}
.rvfm-cont{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px 28px 20px}
.wz-step{display:flex;flex-direction:column;align-items:center;width:100%;animation:wzStepIn .42s var(--ease-smooth,cubic-bezier(.4,0,.2,1)) both}
@keyframes wzStepIn{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:translateX(0)}}
.wz-t{font-size:24px;font-weight:700;margin-bottom:6px}
.wz-sub{color:var(--gray-mid,#6e6e73);margin-bottom:18px}
.wz-stars{display:flex;gap:10px;margin-top:18px}
.wz-star{background:none;border:none;cursor:pointer;font-size:46px;line-height:1;padding:0;color:#fff;-webkit-text-stroke:2px #f5a623;transform-origin:center bottom}
.wz-star.on{color:#f5a623}
.wz-star.pop{animation:wzStarPop .5s cubic-bezier(.2,1.6,.4,1) both}
@keyframes wzStarPop{0%{transform:scale(.5)}35%{transform:scale(1.45)}60%{transform:scale(.9)}80%{transform:scale(1.12)}100%{transform:scale(1)}}
.wz-stars-lbl{display:flex;justify-content:space-between;width:280px;max-width:100%;margin-top:10px;font-size:13px;color:var(--gray-mid,#6e6e73)}
.wz-text,.wz-input{width:100%;max-width:420px;font:inherit;font-size:15px;padding:13px 15px;border:1px solid var(--gray-light,#d8d8dd);border-radius:12px;outline:none}
.wz-text:focus,.wz-input:focus{border-color:#000}
.wz-text{resize:vertical;line-height:1.5}
.wz-nombre-row{display:flex;gap:12px;width:100%;max-width:420px}
.wz-campo{flex:1;display:flex;flex-direction:column;text-align:left}
.wz-lbl{margin:0 0 6px;font-weight:600;font-size:14px}
.wz-foto{display:block;width:240px;height:200px;border:2px dashed var(--gray-light,#d8d8dd);border-radius:16px;cursor:pointer;color:var(--gray-mid,#6e6e73);font-size:15px;overflow:hidden;transition:border-color .15s,background .15s}
.wz-foto:hover{border-color:#000;color:#000;background:#fafafa}
.wz-foto>span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:100%;height:100%;text-align:center;padding:16px}
.wz-foto.con-foto{border-style:solid}
.wz-foto.con-foto>span{padding:0;gap:0}
.wz-foto-ico{display:flex;color:var(--ink,#1d1d1f);margin-bottom:4px}
.wz-foto-tit{font-weight:600;color:var(--ink,#1d1d1f);line-height:1.3}
.wz-foto-sub{font-size:12.5px;color:var(--gray-mid,#6e6e73);line-height:1.3}
.wz-foto img{width:100%;height:100%;object-fit:cover}
.wz-ok{display:flex;flex-direction:column;align-items:center;gap:6px}
.wz-ok-check{width:84px;height:84px;margin-bottom:12px;transform-origin:center;animation:wzOkPop .45s var(--ease-spring,cubic-bezier(.34,1.56,.64,1)) both}
.wz-ok-circ{fill:#eafaf0;stroke:#1a9e44;stroke-width:2;stroke-dasharray:151;stroke-dashoffset:151;animation:wzOkDraw .55s .1s var(--ease-out,cubic-bezier(0,0,.2,1)) forwards}
.wz-ok-tick{fill:none;stroke:#1a9e44;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:36;stroke-dashoffset:36;animation:wzOkDraw .4s .5s var(--ease-out,cubic-bezier(0,0,.2,1)) forwards}
.wz-ok .wz-t{animation:wzOkText .4s .55s both}
.wz-ok .wz-sub{animation:wzOkText .4s .68s both}
@keyframes wzOkPop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@keyframes wzOkDraw{to{stroke-dashoffset:0}}
@keyframes wzOkText{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.rvfm-foot{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-top:1px solid var(--gray-light,#eee);gap:10px}
.wz-foot-l,.wz-foot-r{flex:1;display:flex}
.wz-foot-r{justify-content:flex-end}
.wz-dots{display:flex;gap:7px}
.wz-dot{width:28px;height:5px;border-radius:3px;background:#e5e5e7}
.wz-dot.on{background:var(--black,#111)}
.wz-volver{display:inline-flex;align-items:center;gap:5px;background:none;border:none;font:inherit;font-weight:600;cursor:pointer;color:var(--ink,#1d1d1f)}
.wz-volver svg{display:block}
.wz-next,.wz-done{background:var(--black,#111);color:#fff;border:none;border-radius:999px;padding:11px 26px;font:inherit;font-weight:700;cursor:pointer}
.wz-skip{background:none;border:none;font:inherit;font-weight:600;cursor:pointer;color:var(--gray-mid,#6e6e73)}
.wz-next:disabled,.wz-done:disabled{opacity:.4;cursor:not-allowed}
@media(max-width:560px){.rvfm-box{width:96vw;min-height:380px}.wz-star{font-size:40px}.wz-nombre-row{flex-direction:column;gap:14px}.wz-foto{width:100%;max-width:280px}}

.product-card.temu-card{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;border:1px solid #ececec;border-radius:14px;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.product-card.temu-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.12)}
.temu-card .card-img-wrap{width:100%;aspect-ratio:1/1;background:#f6f6f6;border-radius:14px 14px 0 0;box-shadow:none}
.temu-card .card-img-wrap img{width:100%!important;height:100%!important;object-fit:cover;transition:transform .5s var(--ease-smooth)}
.product-card.temu-card:hover .card-img-wrap img{transform:scale(1.05)}
.temu-card .card-info{padding:10px 12px 14px;background:#fff;border-top:none;text-align:left}
.temu-card .card-name{display:block;min-height:0;font-size:13px;font-weight:500;color:#333;line-height:1.35;margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:unset}
.temu-card .card-info{gap:0}
.temu-card .card-foot{display:flex;align-items:baseline;gap:8px;margin:0}
.temu-card .card-precio-col{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.temu-card .card-price{font-family:var(--font-body),system-ui,sans-serif;font-weight:700;font-size:19px;color:#111;letter-spacing:0;line-height:1;margin:0}
.temu-card .dcto{display:inline-flex;align-items:center;gap:6px}
.temu-card .dcto-antes{font-size:12px;color:#9a9a9f;text-decoration:line-through}
.temu-card .dcto-chip{font-size:11px;font-weight:700;color:#ff5000;background:#ffe9dd;border:1px solid #ffd3bd;border-radius:4px;padding:1px 5px}
.temu-card .card-stars-wrap{margin-top:7px;min-height:16px}
.temu-card .card-stars{display:inline-flex;align-items:center;gap:5px}
.temu-card .card-stars .stars .star{color:#e0e0e0}
.temu-card .card-stars .stars .star.on{color:#ff8a00}
.temu-card .card-stars-n{font-size:11px;color:#8a8a8f}
.temu-card .card-stars-nuevo .card-stars-n{color:#ff5000;font-weight:600}
.productos-grid{grid-template-columns:repeat(5,1fr);gap:12px}
@media(max-width:1200px){.productos-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:900px){.productos-grid{grid-template-columns:repeat(3,1fr)}}

:root{
  --celeste:#c9a227;
  --celeste-deep:#8a6d12;
  --celeste-soft:#f6edcf;
  --azul-cinta:#c9a227;
  --azul-nav:#0a0a0a;
}
.topbar,.topbar-track,.topbar *{color:#1a1a1a}
.nav-marca{color:#d4af37;letter-spacing:.02em}
.nav .icon-btn{color:#d4af37}
.cat-subtitulo,.reviews-subtitulo,.productos-subtitulo{color:var(--celeste-deep)}
.stars .star.on{color:#d4af37}
.temu-card .card-stars .stars .star.on{color:#d4af37}
.temu-card .dcto-chip{color:#d4af37;background:#161616;border-color:#161616}
.temu-card .card-stars-nuevo .card-stars-n{color:#8a6d12}
.csl-rect{background:#0a0a0a;color:#d4af37}
.bnr-arr:hover,.carru-arr:hover{background:#0a0a0a;color:#d4af37}
.nav-buscador .buscador:focus-within .buscador-lupa{fill:#8a6d12}
.footer{background:#0a0a0a;color:#f1e8cf}
.footer-logo span{color:#d4af37}
.footer-nav a:hover{color:#d4af37}

.grid-section{max-width:1400px;margin:0 auto;padding:8px 24px 48px}
.grid-head{margin:20px 0 16px}
.grid-titulo{font-family:var(--font-display),sans-serif;font-size:32px;color:var(--black);letter-spacing:.01em}
@media(max-width:560px){.grid-section{padding:6px 14px 36px}.grid-titulo{font-size:26px}}

.nav-logo{opacity:1}
.nav-logo-img{width:auto!important;height:42px!important;object-fit:contain;display:block}
.nav-logo a:hover .nav-logo-img{transform:scale(1.04)}
@media(max-width:560px){.nav-logo-img{height:34px!important}}
:root{--azul-cinta:#0a0a0a}
.topbar,.topbar-track,.topbar *{color:#e9d9a8}

.footer-logo-img{height:46px;width:auto;object-fit:contain;display:block}
.footer-logo img.footer-logo-img{height:72px!important;width:auto!important}
@media(max-width:560px){.footer-logo img.footer-logo-img{height:56px!important}}
.wa-flotante{background:linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5)!important;box-shadow:0 8px 24px rgba(214,41,118,.4),0 2px 8px rgba(0,0,0,.14)!important}
.wa-flotante:hover{box-shadow:0 12px 30px rgba(214,41,118,.5),0 2px 8px rgba(0,0,0,.16)!important}

.nav{height:76px!important}
.nav-logo-img{height:58px!important;width:auto!important;filter:none!important;image-rendering:auto}
@media(max-width:560px){.nav{height:60px!important}.nav-logo-img{height:42px!important}}

.nav,.nav.scrolled,.nav.nav-on-dark{background:#0a0a0a!important;border-bottom:none!important;box-shadow:none!important}
.nav-logo img,.nav-logo .nav-logo-img{filter:none!important}
.nav-logo-img{height:58px!important;width:auto!important}
.nav-right .icon-btn,.nav .icon,.nav.nav-on-dark .icon{color:#e9d9a8!important}
.nav-right a.icon-btn svg{fill:none!important;stroke:#e9d9a8!important}
.ppage{
  inset:0!important;margin:0!important;
  width:100vw!important;max-width:100vw!important;height:100dvh!important;
  border-radius:0!important;overflow-y:auto!important;overflow-x:hidden!important;
  box-shadow:none!important;background:#fff!important
}
.ppage-top{display:grid!important;grid-template-columns:1.34fr 1fr!important;height:100dvh!important;min-height:0!important;align-items:stretch!important}

.ppage-back{z-index:30!important}

.ppage-img-panel{
  position:static!important;width:auto!important;height:100%!important;min-height:0!important;
  background:#fff!important;padding:clamp(40px,6.5vh,86px) 28px 28px!important;overflow:hidden!important;
  display:flex!important;flex-direction:column!important;gap:14px!important;align-items:stretch!important;justify-content:flex-start!important
}
.ppage-img-wrap{
  order:1;flex:0 1 auto!important;width:100%!important;height:auto!important;
  aspect-ratio:4/3!important;max-height:calc(100% - 98px)!important;min-height:0!important;margin:0!important;
  background:transparent!important;padding:0!important;overflow:visible!important;
  display:flex!important;align-items:center!important;justify-content:center!important
}
.ppage-img{
  width:auto!important;height:auto!important;max-width:100%!important;max-height:100%!important;
  object-fit:contain!important;transform:none!important;border-radius:14px!important
}
.ppage-img:hover{transform:scale(1.02)!important}
.ppage-img-wrap::after{display:none!important}
.ppage-img-next,.ppage-img-prev,.ppage-img-dots{display:none!important}

.ppage-thumbs:empty{display:none!important}
.ppage-thumbs{
  order:2;position:static!important;transform:none!important;
  display:flex!important;flex-direction:row!important;gap:10px!important;
  flex:0 0 auto;justify-content:center!important
}
.ppage-thumb{
  width:84px!important;height:84px!important;flex:0 0 84px;
  background:#f4f4f6!important;border:1.5px solid rgba(0,0,0,.10)!important;
  box-shadow:none!important;border-radius:10px!important;opacity:1!important;
  transition:border-color .18s,transform .18s
}
.ppage-thumb:hover{box-shadow:none!important;transform:translateY(-2px)!important;border-color:rgba(0,0,0,.26)!important}
.ppage-thumb img{width:100%!important;height:100%!important;object-fit:cover!important}
.ppage-thumb--active{
  opacity:1!important;border:2px solid var(--celeste)!important;outline:none!important;
  box-shadow:0 0 0 3px rgba(201,162,39,.16)!important;transform:none!important
}

.ppage-info{
  padding:clamp(40px,6.5vh,86px) 48px 48px!important;gap:0!important;overflow-y:auto!important;
  min-height:0!important;height:100%!important;
  justify-content:flex-start!important;
  border-left:1px solid #eeeef1!important;box-shadow:none!important
}
.ppage-info>*{flex:0 0 auto}
.ppage-breadcrumb{display:flex!important;align-items:center;gap:6px;margin:0 0 10px!important;font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.ppage-breadcrumb a{color:var(--celeste-deep);text-decoration:none;transition:color .15s}
.ppage-breadcrumb a:hover{color:var(--celeste);text-decoration:underline}
.ppage-name{font-size:clamp(24px,2.2vw,32px)!important;line-height:1.18!important;margin:0!important}
.ppage-meta{margin-top:0!important}
.ppage-meta:empty{display:none!important}
@media(max-width:560px){.nav-logo-img{height:40px!important}.ppage-thumbs{position:static!important;transform:none!important;flex-direction:row!important;gap:8px!important}.ppage-thumb{width:58px!important;height:58px!important;flex:0 0 58px}}

.ppage-trust{margin:0!important;padding:0!important;border-top:none!important}
.ppage-trust:empty{display:none!important}

.ppage-viewers{margin:12px 0 0!important}
.ppage-desc{margin:12px 0 0!important;font-size:14.5px!important;line-height:1.65!important;max-width:none!important}

#ppageTierWrap{margin-top:22px!important;padding-top:20px!important;border-top:1px solid #ededf1!important}
.ppage-tier-label{font-size:11.5px!important;font-weight:700!important;letter-spacing:.1em!important;text-transform:uppercase!important;color:#9195a0!important;margin:0 0 4px!important}
.ppage-tier-selected{background:transparent!important;border:none!important;box-shadow:none!important;padding:0!important;display:block!important;cursor:default!important;transform:none!important}
.ppage-tier-selected:hover{transform:none!important}
.ppage-tier-selected .tier-lines,.ppage-tier-chevron,.ppage-tiers-list,.ppage-tier-selected-text{display:none!important}
.ppage-tier-selected-price{font-family:var(--font-display,inherit)!important;font-size:38px!important;font-weight:800!important;color:#141417!important;line-height:1.05!important;letter-spacing:-.01em!important}
.ppage-total-row,#ppageActionsWrap{display:none!important}

#ppageAccordions{margin-top:22px!important;padding-top:20px!important;border-top:1px solid #ededf1!important}
.ppage-accordion{border:none!important;background:transparent!important;margin:0!important}
.ppage-accordion-header{pointer-events:none!important;padding:0!important;border:none!important}
.ppage-accordion-chevron{display:none!important}
.ppage-accordion-title{font-size:18px!important;font-weight:800!important;color:#141417!important}
.ppage-accordion-body{height:auto!important;overflow:visible!important}
.ppage-accordion-inner{padding:0!important}
.ppage-accordion-inner ul{margin:10px 0 0!important;padding:0!important;display:flex!important;flex-direction:column!important;gap:9px!important;list-style:none!important}
.ppage-accordion-inner li{margin:0!important;color:#3c3c42!important;font-size:14.5px!important;display:flex!important;align-items:flex-start!important;gap:10px!important}
.ppage-accordion-inner li::before{content:''!important;flex:0 0 5px;width:5px;height:5px;border-radius:50%;background:var(--celeste)!important;margin-top:8px}

@media(max-width:900px){
  .ppage{width:100vw!important;max-width:100vw!important;height:100dvh!important;border-radius:0!important}
  .ppage-top{grid-template-columns:1fr!important;grid-template-rows:auto auto!important;height:auto!important;min-height:0!important}
  .ppage-img-panel{height:auto!important;min-height:0!important;padding:58px 16px 16px!important;justify-content:flex-start!important}
  .ppage-img-wrap{aspect-ratio:4/3!important;height:auto!important;flex:0 1 auto!important;max-height:46dvh!important}
  .ppage-thumb{width:62px!important;height:62px!important;flex:0 0 62px}
  .ppage-thumbs{flex-wrap:wrap!important}
  .ppage-info{
    border-left:none!important;border-top:1px solid #eeeef1!important;
    padding:24px 20px 36px!important;height:auto!important;min-height:0!important;
    overflow:visible!important;justify-content:flex-start!important
  }
  .ppage-name{font-size:clamp(21px,5.2vw,28px)!important}
  .ppage-tier-selected-price{font-size:32px!important}
}

.paginacion{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;margin:36px auto 10px;padding:0 16px}
.pag-btn{min-width:40px;height:40px;padding:0 12px;border-radius:10px;border:1.5px solid rgba(0,0,0,.12);background:#fff;color:#1a1a1a;font-weight:700;font-size:15px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s,color .15s}
.pag-btn:hover:not(:disabled){border-color:var(--celeste);color:var(--celeste-deep)}
.pag-btn.active{background:var(--celeste);border-color:var(--celeste);color:#1a1a1a}
.pag-btn:disabled{opacity:.4;cursor:default}
.pag-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* Hueco entre la primera y la última página cuando hay muchas. */
.pag-puntos{min-width:22px;text-align:center;color:var(--gray-mid);font-weight:700;font-size:15px;user-select:none}

.nav{display:grid!important;grid-template-columns:1fr auto 1fr!important;align-items:center!important;gap:16px!important;padding:10px 26px!important}
.nav-left{display:flex!important;justify-content:flex-start!important;align-items:center!important}
.nav-logo{display:flex!important;justify-content:center!important;align-items:center!important}
.nav .nav-right{display:flex!important;justify-content:flex-end!important;align-items:center!important;gap:12px!important}
.nav .nav-right .nav-buscador{flex:0 1 340px!important;max-width:340px!important;width:100%!important;margin:0!important}
.nav-logo-img{height:68px!important;width:auto!important}
.nav-login{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1.5px solid rgba(233,217,168,.45);color:#e9d9a8;font-weight:700;font-size:14px;cursor:pointer;padding:9px 16px;border-radius:999px;text-decoration:none;white-space:nowrap;transition:background .18s,border-color .18s}
.nav-login:hover{background:rgba(233,217,168,.12);border-color:#e9d9a8}
.nav-login svg{width:18px;height:18px}
.nav-cats{position:relative}
.nav-cats-btn{display:inline-flex;align-items:center;gap:8px;background:transparent;border:none;color:#e9d9a8;font-weight:700;font-size:15px;cursor:pointer;padding:8px 10px;border-radius:10px;transition:background .18s}
.nav-cats-btn:hover{background:rgba(233,217,168,.1)}
.nav-cats-ico,.nav-cats-chev{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nav-cats-chev{width:16px;height:16px;transition:transform .2s}
.nav-cats.open .nav-cats-chev{transform:rotate(180deg)}
.mega-x{display:none}
.nav-cats-menu{position:absolute;top:calc(100% + 10px);left:0;background:#fff;border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.26);padding:0;z-index:60;overflow:hidden}
.nav-cats-menu[hidden]{display:none}
.mega{display:grid;grid-template-columns:260px 1fr;width:min(92vw,900px);max-height:min(76vh,620px)}
.mega-list{list-style:none;margin:0;padding:10px;background:#faf7ef;overflow-y:auto;border-right:1px solid rgba(0,0,0,.06)}
.mega-item{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;background:transparent;border:none;cursor:pointer;padding:12px 14px;border-radius:10px;color:#1a1a1a;font-weight:600;font-size:15px;text-align:left;transition:background .15s,color .15s}
.mega-item svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.45}
.mega-item:hover,.mega-item.active{background:#fff;color:var(--celeste-deep);box-shadow:0 2px 10px rgba(0,0,0,.06)}
.mega-panel{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:22px;overflow-y:auto;align-content:start}
.mega-tile{display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;color:#1a1a1a}
.mega-tile-img{width:84px;height:84px;border-radius:50%;overflow:hidden;background:#f2eddf;display:flex;align-items:center;justify-content:center;transition:transform .18s,box-shadow .18s}
.mega-tile-img img{width:100%;height:100%;object-fit:cover}
.mega-tile:hover .mega-tile-img{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.14)}
.mega-tile-name{font-size:13px;font-weight:600;text-align:center;line-height:1.25}
.mega-tile:hover .mega-tile-name{color:var(--celeste-deep)}
.mega-tile--all .mega-tile-img{border:2px solid var(--celeste)}
@media(max-width:860px){.nav{grid-template-columns:auto 1fr auto!important;padding:8px 14px!important}.nav-cats-btn span,.nav-login span{display:none}.nav-login{padding:9px!important}.nav .nav-right .nav-buscador{flex:1 1 auto!important;max-width:none!important}.mega{grid-template-columns:150px 1fr;width:min(94vw,640px)}.mega-panel{grid-template-columns:repeat(3,1fr);gap:10px;padding:14px}.mega-tile-img{width:64px;height:64px}}
@media(max-width:560px){.nav-cats-menu{left:0;right:0;position:fixed;top:64px}.mega{width:100vw;grid-template-columns:130px 1fr}.mega-panel{grid-template-columns:repeat(2,1fr)}}

/* ===========================================================================
   V59 — Cuenta y ventas en la barra, panel lateral del vendedor
   ======================================================================== */
.nav-ventas-btn{display:inline-flex;align-items:center;gap:8px;margin-left:10px;background:transparent;border:1.5px solid rgba(233,217,168,.45);color:#e9d9a8;font-family:inherit;font-weight:700;font-size:14px;cursor:pointer;padding:9px 16px;border-radius:999px;white-space:nowrap;transition:background .18s,border-color .18s}
.nav-ventas-btn:hover{background:rgba(233,217,168,.12);border-color:#e9d9a8}
.nav-ventas-btn svg{width:18px;height:18px}

.nav-cuenta{position:relative}
.nav-cuenta-btn{display:inline-flex;align-items:center;gap:10px;background:transparent;border:1.5px solid rgba(233,217,168,.45);color:#e9d9a8;cursor:pointer;padding:6px 14px 6px 6px;border-radius:999px;font-family:inherit;transition:background .18s,border-color .18s}
.nav-cuenta-btn:hover{background:rgba(233,217,168,.12);border-color:#e9d9a8}
.nav-cuenta-ini{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#e9d9a8;color:#111;font-weight:700;font-size:14px;flex:none}
.nav-cuenta-txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15}
.nav-cuenta-txt b{font-size:13.5px;font-weight:700}
.nav-cuenta-txt small{font-size:11px;opacity:.65;font-weight:500}
.nav-cuenta-menu{position:absolute;top:calc(100% + 10px);right:0;min-width:220px;background:#fff;border:1px solid var(--gray-light);border-radius:14px;box-shadow:0 18px 44px rgba(0,0,0,.18);padding:6px;z-index:200}
.nav-cuenta-menu a,.nav-cuenta-menu button{display:block;width:100%;text-align:left;background:none;border:0;padding:11px 14px;border-radius:10px;font:inherit;font-size:14px;color:var(--black);cursor:pointer;text-decoration:none}
.nav-cuenta-menu a:hover,.nav-cuenta-menu button:hover{background:var(--off-white)}

.ppage-vendido{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:18px;padding:16px 22px;border:0;border-radius:14px;background:#111;color:#e9d9a8;font-family:inherit;font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:background .18s,transform .18s var(--ease-spring)}
.ppage-vendido:hover{background:#000;transform:translateY(-1px)}
.ppage-vendido[hidden]{display:none}
.ppage-vendido svg{width:19px;height:19px}

.venta-ov{position:fixed;inset:0;z-index:10000;background:rgba(17,17,17,0);transition:background .3s var(--ease-smooth)}
.venta-ov.abierto{background:rgba(17,17,17,.45)}
.venta-panel{position:absolute;top:0;right:0;height:100%;width:min(520px,100vw);display:flex;flex-direction:column;background:#fff;box-shadow:-24px 0 70px rgba(0,0,0,.26);transform:translateX(100%);transition:transform .34s var(--ease-smooth)}
.venta-ov.abierto .venta-panel{transform:translateX(0)}
.venta-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:24px 26px 20px;background:#111;color:#fff;flex:none}
.venta-head h2{margin:2px 0 0;font-family:var(--font-display);font-size:30px;letter-spacing:.03em;font-weight:400}
.venta-kicker{margin:0;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#e9d9a8}
.venta-x{background:rgba(255,255,255,.1);border:0;color:#fff;width:36px;height:36px;border-radius:50%;cursor:pointer;display:grid;place-items:center;flex:none}
.venta-x:hover{background:rgba(255,255,255,.2)}
.venta-x svg{width:18px;height:18px}
.venta-body{padding:22px 26px 26px;overflow-y:auto;flex:1}

.venta-prod{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid var(--gray-light);border-radius:14px;background:var(--off-white);margin-bottom:20px}
.venta-prod img{width:64px;height:64px;object-fit:contain;border-radius:10px;background:#fff;flex:none}
.venta-prod b{display:block;font-size:15.5px;line-height:1.3}
.venta-prod small{display:block;margin-top:4px;font-size:13px;color:var(--gray-mid)}

.venta-sec{margin:24px 0 12px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gray-mid);font-weight:700}
.venta-g2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.venta-f{display:flex;flex-direction:column;gap:6px}
/* `hidden` solo trae `display:none` de fábrica, y cualquier `display`
   declarado le gana. Sin esto, un campo escondido desde el código seguía
   a la vista: así quedaba la sucursal pidiéndose a un vendedor. */
.venta-f[hidden],.venta-g2[hidden],.venta-prod[hidden]{display:none}
.venta-f.venta-ancho{grid-column:1/-1}
.venta-f>span{font-size:12.5px;font-weight:600;color:var(--gray-mid)}
.venta-f>span .req{margin-left:6px;font-size:10px;font-style:normal;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#c0392b}
.venta-f input,.venta-f textarea{font:inherit;font-size:14.5px;padding:12px 14px;border:1.5px solid var(--gray-light);border-radius:12px;background:#fff;color:var(--black);width:100%;box-sizing:border-box}

/* El +56 va pegado al campo, no se escribe */
.tel-campo{display:flex;align-items:stretch;border:1.5px solid var(--gray-light);border-radius:12px;background:#fff;overflow:hidden}
.tel-campo:focus-within{border-color:#111}
.tel-pais{display:flex;align-items:center;padding:0 12px;flex:none;font-size:14.5px;font-weight:600;color:var(--gray-mid);background:var(--off-white);border-right:1.5px solid var(--gray-light)}
.venta-f .tel-campo input{flex:1;min-width:0;border:0;border-radius:0;outline:none}
.venta-f input:focus,.venta-f textarea:focus{outline:none;border-color:#111}
.venta-f textarea{resize:vertical}

.vsel{position:relative}
.vsel-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;font:inherit;font-size:14.5px;text-align:left;padding:12px 14px;border:1.5px solid var(--gray-light);border-radius:12px;background:#fff;color:var(--black);cursor:pointer;transition:border-color .16s}
.vsel-btn:hover{border-color:var(--gray-mid)}
.vsel.abierto .vsel-btn{border-color:#111}
.vsel-btn svg{width:18px;height:18px;color:var(--gray-mid);flex:none;transition:transform .2s var(--ease-smooth)}
.vsel.abierto .vsel-btn svg{transform:rotate(180deg)}
.vsel-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vsel-ico{width:17px;height:17px;flex:none;color:var(--gray-mid)}
.vsel-txt.vacio{color:var(--gray-mid)}
.vsel-lista{position:absolute;top:calc(100% + 6px);left:0;right:0;max-height:260px;overflow-y:auto;list-style:none;margin:0;padding:6px;background:#fff;border:1px solid var(--gray-light);border-radius:14px;box-shadow:0 20px 48px rgba(0,0,0,.18);z-index:40}
.vsel-lista li[hidden]{display:none}
.vsel-lista li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px;border-radius:10px;font-size:14.5px;cursor:pointer}
.vsel-lista li:hover{background:var(--off-white)}
.vsel-lista li.elegida{background:#111;color:#e9d9a8}
.vsel-lista li small{font-size:12.5px;color:var(--gray-mid);white-space:nowrap}
.vsel-lista li.elegida small{color:rgba(233,217,168,.75)}

.venta-pie{border-top:1px solid var(--gray-light);padding:18px 26px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;flex:none;background:#fff}
.venta-total{display:flex;flex-direction:column;line-height:1.2;margin-right:auto}
.venta-total span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-mid);font-weight:700}
.venta-total b{font-size:26px;font-weight:700}
.venta-btn{font:inherit;font-size:14px;font-weight:700;padding:14px 26px;border-radius:999px;border:0;background:#111;color:#e9d9a8;cursor:pointer}
.venta-btn:hover{background:#000}
.venta-btn:disabled{opacity:.6;cursor:default}
.venta-msg{flex-basis:100%;margin:0;font-size:13px;color:var(--gray-mid)}
.venta-msg.err{color:#c0392b}

/* Cuántas unidades quedan, debajo del campo de cantidad */
.venta-stock{display:block;margin-top:6px;font-size:12px;font-weight:400;color:var(--gray-mid);line-height:1.3}
.venta-stock.poco{color:#b8860b}
.venta-stock.sin{color:#c0392b}

.venta-vacio{margin:0;color:var(--gray-mid);font-size:14px;line-height:1.6}

/* Historial a pantalla completa */
.venta-ov.venta-full .venta-panel{width:100vw;box-shadow:none}
.venta-ov.venta-full .venta-head{padding:26px max(26px,calc((100vw - 1460px)/2)) 22px}
.venta-ov.venta-full .venta-head h2{font-size:38px}
.venta-ov.venta-full .venta-body{padding:28px 26px 60px;background:var(--off-white)}
.venta-wrap{max-width:1460px;margin:0 auto}
.venta-tarjetas{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
.vt{background:#fff;border:1px solid var(--gray-light);border-radius:14px;padding:16px 18px}
.vt span{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray-mid);font-weight:700}
.vt b{display:block;margin-top:6px;font-size:24px;font-weight:700}
.vt.destacada{background:#111;border-color:#111}
.vt.destacada span{color:rgba(233,217,168,.8)}
.vt.destacada b{color:#e9d9a8}

.venta-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.venta-lista li{display:flex;align-items:center;gap:18px;padding:16px;background:#fff;border:1px solid var(--gray-light);border-radius:16px}
.venta-lista li img{width:84px;height:84px;object-fit:contain;border-radius:12px;background:var(--off-white);flex:none}
.vl-info{flex:1;min-width:0}
.vl-info b{display:block;font-size:15.5px;line-height:1.3}
.vl-info small{display:block;font-size:12.5px;color:var(--gray-mid);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vl-cuenta{flex:none;width:230px;border-left:1px solid var(--gray-light);padding-left:18px}
.vl-linea{display:flex;align-items:baseline;justify-content:space-between;gap:14px;font-size:13px;color:var(--gray-mid);padding:3px 0}
.vl-linea b{font-size:14px;font-weight:600;color:var(--black);white-space:nowrap}
.vl-linea span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vl-final{margin-top:6px;padding-top:8px;border-top:1px solid var(--gray-light)}
.vl-final span{font-weight:700;color:var(--black);text-transform:uppercase;font-size:11px;letter-spacing:.12em}
.vl-final b{font-size:19px;font-weight:700}

@media(max-width:700px){
  .venta-g2{grid-template-columns:1fr}
  .venta-panel{width:100vw}
  .nav-cuenta-txt{display:none}
  .nav-cuenta-btn{padding:6px}
  .nav-ventas-btn span{display:none}
  .nav-ventas-btn{padding:9px;margin-left:6px}
  .nav{gap:8px!important;padding:8px 12px!important}
  .nav-logo{min-width:92px;display:flex;justify-content:center}
  .nav-logo-img{height:30px!important;max-width:92px;object-fit:contain}
  .nav-right{min-width:0}
  .nav .nav-right .nav-buscador{min-width:0}
  .venta-lista li{flex-wrap:wrap;gap:12px}
  .venta-lista li img{width:56px;height:56px}
  .vl-cuenta{width:100%;border-left:0;border-top:1px solid var(--gray-light);padding-left:0;padding-top:10px}
  .venta-tarjetas{grid-template-columns:repeat(2,1fr)}
  .venta-ov.venta-full .venta-head h2{font-size:30px}
}

/* ===========================================================================
   V61 — Interruptor del modo edición (el resto vive en css/edicion.css)
   ======================================================================== */
.ed-toggle{display:inline-flex;align-items:center;gap:8px;margin-right:10px;background:transparent;border:1.5px solid rgba(233,217,168,.45);color:#e9d9a8;font-family:inherit;font-weight:700;font-size:14px;cursor:pointer;padding:9px 16px;border-radius:999px;white-space:nowrap;transition:background .18s,border-color .18s,color .18s}
.ed-toggle:hover{background:rgba(233,217,168,.12);border-color:#e9d9a8}
.ed-toggle.on{background:#e9d9a8;border-color:#e9d9a8;color:#111}
.ed-toggle svg{width:17px;height:17px}
@media(max-width:860px){.ed-toggle span{display:none}.ed-toggle{padding:9px;margin-right:6px}}

.nav-vendedores-btn{display:inline-flex;align-items:center;gap:8px;margin-left:10px;background:transparent;border:1.5px solid rgba(233,217,168,.45);color:#e9d9a8;font-family:inherit;font-weight:700;font-size:14px;cursor:pointer;padding:9px 16px;border-radius:999px;white-space:nowrap;transition:background .18s,border-color .18s}
.nav-vendedores-btn:hover{background:rgba(233,217,168,.12);border-color:#e9d9a8}
.nav-vendedores-btn svg{width:18px;height:18px}

.ev-tabs{display:flex;align-items:flex-end;gap:8px;max-width:1460px;margin:0 auto 22px;flex-wrap:wrap}
.ev-tab{flex:none;font:inherit;font-size:14px;font-weight:600;padding:10px 20px;border-radius:999px;border:1.5px solid var(--gray-light);background:#fff;color:var(--black);cursor:pointer}
.ev-tab:hover{border-color:var(--gray-mid)}
.ev-tab.activa{background:#111;border-color:#111;color:#e9d9a8}

.ev-vendedor{background:#fff;border:1px solid var(--gray-light);border-radius:16px;padding:16px;margin-bottom:12px}
.ev-head{display:flex;align-items:center;gap:14px;width:100%;background:none;border:0;padding:0 0 14px;font:inherit;text-align:left;cursor:pointer}
.ev-ini{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#111;color:#e9d9a8;font-weight:700;font-size:18px;flex:none}
.ev-txt{flex:1;min-width:0}
.ev-txt b{display:block;font-size:17px;font-weight:700}
.ev-txt small{display:block;font-size:13px;color:var(--gray-mid);margin-top:2px}
.ev-ver{font-size:13px;font-weight:600;color:var(--gray-mid);white-space:nowrap}
.ev-head:hover .ev-ver{color:var(--black)}

.ev-nuevo,.ev-persona{background:#fff;border:1px solid var(--gray-light);border-radius:16px;padding:18px;margin-bottom:12px}
.ev-acc{display:flex;align-items:center;gap:10px;margin-top:14px}
.ev-apagado{font-size:12.5px;color:#c0392b;font-weight:600}
.ev-comunas{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:10px}
.ev-comuna{display:grid;grid-template-columns:1fr 110px auto auto;align-items:center;gap:8px;background:#fff;padding:10px 12px;border:1px solid var(--gray-light);border-radius:12px}
.ev-comuna.apagada{opacity:.55}
.ev-comuna input{width:100%;font:inherit;font-size:14px;padding:9px 11px;border:1.5px solid var(--gray-light);border-radius:10px;min-width:0}
.ev-comuna input[type=text]{font-weight:600;border-color:transparent;background:var(--off-white)}
.ev-comuna input[type=text]:focus{outline:none;border-color:#111;background:#fff}
.ev-comuna .ec-ojo{padding:7px}
.ev-comuna .ec-borrar{width:30px;height:30px}
.ev-pie-comunas{display:flex;align-items:center;gap:14px;margin-top:20px;flex-wrap:wrap}
/* La fila de "comuna nueva" se salia del panel: el campo de texto crecia
   sin limite y empujaba al boton fuera del borde. */
.ev-nueva-comuna{display:flex;align-items:center;gap:10px;margin-top:16px;flex-wrap:wrap}
.ev-nueva-comuna input[type=text]{flex:1 1 220px;min-width:0;font:inherit;font-size:14px;padding:11px 13px;border:1.5px solid var(--gray-light);border-radius:11px}
.ev-nueva-comuna input[type=number]{flex:0 0 120px;font:inherit;font-size:14px;padding:11px 13px;border:1.5px solid var(--gray-light);border-radius:11px}
.ev-nueva-comuna .ed-btn{flex:none}
.ed-dest{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--gray-mid);white-space:nowrap;cursor:pointer}
@media(max-width:700px){
  .nav-vendedores-btn span{display:none}
  .nav-vendedores-btn{padding:9px;margin-left:6px}
  .ev-comunas{grid-template-columns:1fr}
}

/* Vendedores en grilla de tres: en una sola columna la lista se hacia larguisima */
.ev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start}
.ev-grid .ev-vendedor{margin-bottom:0;min-width:0}
.ev-grid .ev-head{gap:11px;padding-bottom:12px}
.ev-grid .ev-ini{width:38px;height:38px;font-size:16px}
.ev-grid .ev-txt b{font-size:15.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev-grid .ev-txt small{font-size:12.5px}
.ev-grid .ev-ver{font-size:12px}
.ev-grid .venta-lista{gap:8px}
.ev-grid .venta-lista li{flex-wrap:wrap;gap:10px;padding:11px}
.ev-grid .venta-lista li img{width:46px;height:46px}
.ev-grid .vl-info b{font-size:13.5px}
.ev-grid .vl-info small{font-size:11.5px}
.ev-grid .vl-cuenta{width:100%;border-left:0;border-top:1px solid var(--gray-light);padding-left:0;padding-top:9px}
.ev-grid .vl-linea{font-size:12px;padding:2px 0}
.ev-grid .vl-linea b{font-size:12.5px}
.ev-grid .vl-final b{font-size:16px}
@media(max-width:1100px){.ev-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.ev-grid{grid-template-columns:1fr}}

/* La barra del admin lleva cuatro botones mas que la del cliente. El logo
   esta centrado en una columna 1fr que se puede colapsar a cero, y entonces
   la imagen se desbordaba encima de los botones. */
.nav-logo{min-width:96px;display:flex;justify-content:center}
.nav-logo-img{max-width:100%;object-fit:contain}
.nav-left,.nav-right{min-width:0}
@media(max-width:1200px){
  .nav-cats-btn span,.nav-ventas-btn span,.nav-vendedores-btn span,.ed-toggle span{display:none}
  .nav-cats-btn,.nav-ventas-btn,.nav-vendedores-btn,.ed-toggle{padding:9px}
  .nav-cats-chev{display:none}
}

/* Equipo: una tarjeta por persona, solo el nombre y el lapiz */
.ev-ficha{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--gray-light);border-radius:16px;padding:14px 16px;min-width:0}
.ev-ficha.apagada{opacity:.55}
.ev-ficha .ev-txt{flex:1;min-width:0}
.ev-ficha .ev-txt b{display:block;font-size:15px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev-ficha .ev-txt small{display:block;font-size:12.5px;color:var(--gray-mid);margin-top:2px}
.ev-lapiz{flex:none;width:38px;height:38px;display:grid;place-items:center;border:1.5px solid var(--gray-light);border-radius:50%;background:#fff;color:var(--black);cursor:pointer;transition:background .16s,border-color .16s,color .16s}
.ev-lapiz:hover{background:#111;border-color:#111;color:#e9d9a8}
.ev-lapiz svg{width:16px;height:16px}
.ev-nota{display:block;margin-top:5px;font-size:12px;color:var(--gray-mid);font-weight:400}

.venta-btn.peligro{background:#c0392b;color:#fff}
.venta-btn.peligro:hover{background:#a93226}
.venta-btn.borrar{background:transparent;color:#c0392b;border:1.5px solid rgba(192,57,43,.4)}
.venta-btn.borrar:hover{background:rgba(192,57,43,.08);border-color:#c0392b}
.venta-pie .venta-btn.borrar{margin-right:auto}
/* La nota de cada opcion cede espacio antes que el nombre */
.vsel-lista li>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.vsel-lista li small{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis}

/* El buscador baja a su propia fila en pantallas chicas */
.nav-bus-movil{display:none}
@media(max-width:860px){
  /* En chico la barra pasa a flex: la grilla heredada de tres columnas
     descolocaba el logo cuando aparecia la fila del buscador. Y el alto lo
     manda el contenido, antes era fijo y la segunda fila se salia encima
     del banner. */
  .nav{display:flex!important;flex-wrap:wrap;align-items:center;height:auto!important;padding:8px 12px!important;gap:8px!important}
  .nav-left{order:1;flex:none}
  .nav-logo{order:2;flex:1 1 auto;display:flex;justify-content:center;min-width:0}
  .nav-right{order:3;flex:none;display:flex;align-items:center;gap:8px}
  .nav-bus-movil{display:block;order:4;flex-basis:100%;width:100%;margin-top:0}
  .nav-bus-movil .nav-buscador{width:100%;max-width:none!important;flex:none!important}
  .nav-bus-movil .buscador{width:100%;max-width:none}
  .nav{align-items:center}
  .nav-logo{min-width:0}
  .nav-logo-img{height:46px!important;max-width:none!important}
}

/* ===========================================================================
   V68 — Menú de categorías a pantalla completa en el teléfono
   En chico el desplegable quedaba flotando, cortado y sin lugar para los
   nombres. Ahora entra como un cajón desde la izquierda, con la lista de
   categorías y sus subcategorías debajo.
   ======================================================================== */
@media(max-width:860px){
  .nav-cats-menu{
    position:fixed!important;inset:0!important;top:0!important;left:0!important;right:auto!important;
    width:min(88vw,380px);height:100dvh;border-radius:0!important;
    box-shadow:24px 0 60px rgba(0,0,0,.3);z-index:11000;
    transform:translateX(-100%);transition:transform .3s var(--ease-smooth);
    display:flex;flex-direction:column;
  }
  .nav-cats.open .nav-cats-menu{transform:translateX(0)}
  .nav-cats-menu[hidden]{display:flex!important;pointer-events:none}
  .nav-cats.open .nav-cats-menu{pointer-events:auto}

  /* El boton flotante de Instagram quedaba por encima del cajon */
  /* Con el texto al lado, el icono de menu se encimaba en pantallas chicas */
  .nav-cats-btn span{display:none}
  .nav-cats-chev{display:none}
  .nav-cats-btn{padding:9px;gap:0}

  .mega-x{
    display:grid;place-items:center;position:absolute;top:18px;right:16px;z-index:2;
    width:36px;height:36px;border:0;border-radius:50%;
    background:rgba(255,255,255,.12);color:#e9d9a8;cursor:pointer;
  }
  .mega-x svg{width:18px;height:18px}
  .nav-cats-menu::before{
    content:'Categorías';display:block;flex:none;
    background:#111;color:#e9d9a8;font-family:var(--font-display);
    font-size:26px;letter-spacing:.04em;padding:20px 22px 16px;
  }
  /* El cajón es hijo de la barra, así que la barra sube por encima del velo
     y adentro se apaga todo menos el cajón. Antes el ícono de categorías y
     el de la cuenta flotaban sobre el velo. */
  body.cats-abierto .nav{z-index:11000!important;background:transparent!important;box-shadow:none!important}
  /* Reglas viejas fuerzan opacity con !important sobre el logo, así que acá
     hace falta !important para apagarlo. */
  body.cats-abierto .nav-logo,
  body.cats-abierto .nav-right,
  body.cats-abierto .nav-bus-movil,
  body.cats-abierto .nav-cats-btn{opacity:0!important;pointer-events:none;transition:opacity .2s}
  body.cats-abierto .wa-flotante{opacity:0;pointer-events:none;transition:opacity .2s}

  .mega{display:flex!important;flex-direction:column;width:100%;max-height:none;flex:1;overflow-y:auto}
  .mega-list{display:flex;flex-direction:column;width:100%;border-right:0;background:#fff;padding:8px 0}
  .mega-item{width:100%;font-size:16px;padding:15px 22px}
  .mega-item svg{transition:transform .2s var(--ease-smooth)}
  .mega-item.active svg{transform:rotate(90deg)}
  /* En chico las subcategorías se abren debajo de su categoría, no en un
     panel al final. El panel de la derecha es solo de escritorio. */
  .mega-panel{display:none!important}
  .mega-subs{
    display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
    padding:6px 18px 18px;background:var(--off-white);
    height:0;overflow:hidden;
    transition:height .34s cubic-bezier(.4,0,.2,1);
  }
  .mega-subs[hidden]{display:none}
  /* Las fotos entran escalonadas, apenas detrás del panel */
  .mega-subs .mega-tile{opacity:0;transform:translateY(10px) scale(.94)}
  .mega-subs.abierto .mega-tile{
    opacity:1;transform:none;
    transition:opacity .3s ease var(--d,0ms), transform .34s cubic-bezier(.34,1.3,.64,1) var(--d,0ms);
  }
  .mega-item{transition:background .18s,color .18s}
  .mega-item.active{background:var(--off-white)}
  @media(prefers-reduced-motion:reduce){
    .mega-subs{transition:none}
    .mega-subs .mega-tile{opacity:1;transform:none;transition:none}
  }
  .mega-tile-img{width:58px;height:58px}
  .mega-tile-name{font-size:11.5px}
}
@media(max-width:560px){
  .nav-cats-menu{width:min(92vw,340px)}
  .mega-subs{grid-template-columns:repeat(2,1fr)}
}

/* El velo del cajón de categorías vive en el body, no en la barra */
@media(min-width:861px){.mega-subs{display:none}}
.nav-cats-velo{display:none}
@media(max-width:860px){
  .nav-cats-velo{display:block;position:fixed;inset:0;background:rgba(17,17,17,.5);z-index:10990}
  .nav-cats-velo[hidden]{display:none}
}

/* En la tarjeta, "Agotado" va donde iría el precio: a un producto sin stock
   no tiene sentido mostrarle el valor. La foto queda a color. */
/* La etiqueta ocupa todo el ancho de la tarjeta, con la palabra al centro:
   suelta a la izquierda quedaba descolgada. */
.temu-card.out-of-stock .card-foot{display:block}
.temu-card.out-of-stock .card-precio-col{display:block;width:100%}
.card-precio-col .oos-tag{
  position:static;transform:none;box-shadow:none;
  display:flex;align-items:center;justify-content:center;
  width:100%;box-sizing:border-box;
  background:#e01b1b;color:#fff;
  font-family:var(--font-body);
  font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:11px 14px;border-radius:10px;margin:0;
  -webkit-font-smoothing:antialiased;
}
/* En el carrusel, la etiqueta también reemplaza al precio */
.csl-slide .oos-tag{
  position:static;transform:none;box-shadow:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:#e01b1b;color:#fff;
  font-family:var(--font-body);
  font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:9px 20px;border-radius:10px;margin:0;
  -webkit-font-smoothing:antialiased;
}
.out-of-stock .card-img-wrap img,
.out-of-stock .csl-img img{filter:none!important}
/* El nombre no se apaga: el "Agotado" rojo ya lo dice */
.out-of-stock .card-name{color:var(--black)}

/* El precio y el despacho los fija el administrador: el vendedor los ve
   pero no los escribe. */
.venta-fijo{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:0;font-size:14.5px;font-weight:600;
  padding:12px 14px;border:1.5px solid var(--gray-light);border-radius:12px;
  background:var(--off-white);color:var(--black);
}
.venta-fijo svg{width:15px;height:15px;color:var(--gray-mid);flex:none}

/* Arranca oculto para que no parpadee antes de que el JS sepa si hay banner */
.bnr-section[hidden]{display:none}

/* ===========================================================================
   V94 — Ventas: resumen con íconos, calendario y detalle del día
   ======================================================================== */
.ev-resumen{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px}
.vt2{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--gray-light);border-radius:18px;padding:20px 22px}
.vt2>.vt2-ico{flex:none;width:30px;height:30px;display:grid;place-items:center;color:#8a6508;font-size:0}
.vt2>.vt2-ico svg{display:block;width:30px;height:30px}
.vt2>div{min-width:0}
.vt2 span{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-mid)}
.vt2 b{display:block;margin-top:6px;font-size:29px;font-weight:700;line-height:1.05}
.vt2.destacada{background:#111;border-color:#111}
.vt2.destacada span{color:#e9d9a8}
.vt2.destacada b{color:#fff}
.vt2.destacada>.vt2-ico{color:#e9d9a8}

.ev-columnas{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:20px;align-items:start}

/* Calendario */
.ev-cal{background:#fff;border:1px solid var(--gray-light);border-radius:18px;padding:24px}
.ev-cal-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.ev-cal-top h3{margin:0;font-size:23px;font-weight:700;text-transform:capitalize}
.ev-cal-nav{display:flex;align-items:center;gap:6px}
.ev-flecha{width:36px;height:36px;flex:none;display:grid;place-items:center;border:1.5px solid var(--gray-light);border-radius:11px;background:#fff;color:var(--black);cursor:pointer;transition:background .16s,border-color .16s,color .16s}
.ev-flecha:hover{border-color:#111;background:#111;color:#e9d9a8}
.ev-flecha svg{width:15px;height:15px}
.ev-hoy{font:inherit;font-size:13px;font-weight:600;padding:9px 16px;border:1.5px solid var(--gray-light);border-radius:11px;background:#fff;color:var(--black);cursor:pointer}
.ev-hoy:hover{border-color:#111}
.ev-cal-cab{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;margin-bottom:7px}
.ev-cal-cab span{text-align:center;font-size:10.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--gray-mid)}
.ev-cal-grilla{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}
.ev-dia{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-height:84px;padding:10px;border:1.5px solid transparent;border-radius:13px;background:var(--off-white);font:inherit;text-align:left;cursor:pointer}
.ev-dia.fuera{background:none;cursor:default}
.ev-dia.fuera .ev-dia-n{color:#c8c8cd}
.ev-dia-n{font-size:14px;font-weight:600;color:var(--gray-mid)}
.ev-dia:hover:not(.fuera){background:#fff;border-color:var(--gray-light)}
.ev-dia.con{background:#fff;border-color:var(--gray-light)}
.ev-dia.con .ev-dia-n{color:var(--black);font-weight:700}
.ev-dia.con:hover{border-color:#111}
.ev-dia.hoy .ev-dia-n{color:#8a6508}
.ev-dia.elegido{background:#fdf3dc;border-color:#e0b84a}
.ev-dia-c{font-size:11.5px;color:var(--gray-mid);font-weight:600;margin-top:3px}
.ev-dia-p{font-size:12px;color:var(--black);font-weight:700}
.ev-dia-pend{position:absolute;top:10px;right:10px;width:8px;height:8px;border-radius:50%;background:#e0a21a}
.ev-leyenda{display:flex;flex-wrap:wrap;gap:16px;margin-top:16px;padding-top:14px;border-top:1px solid var(--gray-light)}
.ev-leyenda span{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--gray-mid)}
.ev-leyenda i{width:15px;height:15px;border-radius:5px;flex:none}
.lg-pend{background:#e0a21a;border-radius:50%!important;width:10px!important;height:10px!important}
.lg-con{background:#fff;border:1.5px solid var(--gray-light)}
.lg-sel{background:#fdf3dc;border:1.5px solid #e0b84a}
.lg-sin{background:var(--off-white)}

/* Detalle del día */
.ev-detalle{background:#fff;border:1px solid var(--gray-light);border-radius:18px;overflow:hidden}
.ev-det-cab{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:20px 22px;background:#111;color:#fff}
.ev-det-cab h3{margin:0;font-family:var(--font-display);font-size:26px;font-weight:400;letter-spacing:.03em;text-transform:uppercase}
.ev-det-cab small{display:block;margin-top:3px;font-size:13px;color:rgba(255,255,255,.65)}
.ev-chip-pend{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:#e9d9a8;border:1.5px solid rgba(233,217,168,.45);border-radius:999px;padding:8px 15px}
.ev-chip-pend i{width:8px;height:8px;border-radius:50%;background:#e0a21a}
.ev-det-cuerpo{padding:20px}
.ev-det-vacio{display:grid;place-items:center;gap:10px;padding:46px 20px;color:var(--gray-mid)}
.ev-det-vacio svg{width:34px;height:34px;opacity:.5}
.ev-det-vacio p{margin:0;font-size:14px}

.ev-venta{border:1px solid var(--gray-light);border-radius:15px;padding:16px;margin-bottom:12px;background:#fff;cursor:pointer;transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s cubic-bezier(.22,1,.36,1)}
.ev-venta:hover{transform:scale(1.015);box-shadow:0 10px 28px -8px rgba(0,0,0,.16)}
.ev-venta:active{transform:scale(1.004);transition-duration:.1s}
.ev-venta .ev-resolver{cursor:default}
@media(prefers-reduced-motion:reduce){
  .ev-venta,.ev-venta:hover,.ev-venta:active{transition:none;transform:none}
}
.ev-venta.pendiente{border-color:#e8cf92;background:#fffdf7}
.ev-venta.denegado{opacity:.6}
.ev-venta-top{display:flex;align-items:flex-start;gap:14px}
.ev-venta-top img{width:64px;height:64px;object-fit:contain;border-radius:11px;background:var(--off-white);flex:none}
.ev-venta-datos{flex:1;min-width:0}
.ev-venta-datos b{display:block;font-size:15.5px;line-height:1.3}
.ev-venta-datos small{display:block;font-size:12.5px;color:var(--gray-mid);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev-sello{flex:none;display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;border-radius:999px;white-space:nowrap}
.ev-sello.pendiente{background:#fdf0d2;color:#8a6508}
.ev-sello.aceptado{background:rgba(52,199,89,.14);color:#1e7a3a}
.ev-sello.denegado{background:rgba(192,57,43,.12);color:#c0392b}

.ev-cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:14px}
/* El vendedor ve tres cifras: la ganancia del negocio no es asunto suyo. */
.ev-cifras.tres{grid-template-columns:repeat(3,1fr)}
.ev-cifras.dos{grid-template-columns:repeat(2,1fr)}
.ev-cifras>div{border:1px solid var(--gray-light);border-radius:11px;padding:10px 12px;min-width:0}
.ev-cifras span{display:block;font-size:10.5px;color:var(--gray-mid);font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.ev-cifras b{display:block;margin-top:4px;font-size:15.5px;font-weight:700;white-space:nowrap}
.ev-cifras .gana b{color:#1e9e4a}
.ev-cifras .pagar{background:var(--off-white)}

.ev-resolver{display:flex;gap:10px;margin-top:14px}
.ev-ok,.ev-no,.ev-rever{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-size:13.5px;font-weight:700;padding:12px 16px;border-radius:12px;cursor:pointer;border:1.5px solid transparent}
.ev-ok svg,.ev-no svg,.ev-rever svg{width:17px;height:17px}
.ev-pie{display:flex;flex-direction:column;gap:10px;width:100%}
.ev-borrar{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;font:inherit;font-size:13px;font-weight:600;padding:11px 16px;border-radius:12px;border:1.5px solid transparent;background:none;color:var(--gray-mid);cursor:pointer;transition:color .16s,background .16s}
.ev-borrar svg{width:16px;height:16px}
.ev-equipo-cab{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:26px 0 14px}
.ev-buscador{display:flex;align-items:center;gap:9px;min-width:340px;padding:10px 14px;border:1.5px solid var(--gray-light);border-radius:12px;background:#fff;transition:border-color .16s}
.ev-buscador:focus-within{border-color:#111}
.ev-buscador svg{width:17px;height:17px;flex:none;color:var(--gray-mid)}
.ev-buscador input{flex:1;min-width:0;border:0;outline:none;font:inherit;font-size:14px;color:var(--black);background:none}
.ev-buscador input::-webkit-search-cancel-button{cursor:pointer}
@media(max-width:620px){.ev-buscador{min-width:0;flex:1 1 100%}}

.ev-zona-roja{margin-top:24px;padding:16px;border:1px solid rgba(192,57,43,.25);border-radius:14px;background:rgba(192,57,43,.04)}
.ev-zona-roja>b{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#c0392b}
.ev-zona-roja p{margin:7px 0 0;font-size:13px;line-height:1.55;color:var(--gray-mid)}
.ev-zona-roja p b{color:var(--black)}
.ev-zona-roja .ev-borrar{width:auto;margin-top:12px;padding-left:0}
.ed-conf-caja .ev-ini{flex:none;width:52px;height:52px;display:grid;place-items:center;border-radius:50%;background:#111;color:#e9d9a8;font-weight:700;font-size:20px}


/* Todo teléfono de la web es un botón de WhatsApp */
.wa-chip{display:inline-flex;align-items:center;gap:6px;font:inherit;color:inherit;text-decoration:none;vertical-align:middle}
.wa-chip svg{width:1.25em;height:1.25em;flex:none;color:#25d366}
.wa-chip:hover span{text-decoration:underline}

.ev-borrar:hover{background:rgba(192,57,43,.07);color:#c0392b}
.ev-rever{background:#fff;color:var(--gray-mid);border-color:var(--gray-light);font-weight:600}
.ev-rever:hover{background:var(--off-white);color:#111;border-color:#c9c9c9}
.ev-previo{margin-top:16px;padding:12px 14px;border-radius:12px;background:rgba(192,57,43,.06);border:1px solid rgba(192,57,43,.2)}
.ev-datos{display:grid;gap:1px;background:var(--gray-light);border:1px solid var(--gray-light);border-radius:12px;overflow:hidden}
.ev-datos-l{display:grid;grid-template-columns:minmax(0,1fr) 46%;background:#fff}
.ev-datos-l span{align-self:center;padding:10px 14px;font-size:12.5px;color:var(--gray-mid)}
.ev-datos-l b{display:flex;align-items:center;justify-content:flex-end;padding:10px 14px;border-left:1px solid var(--gray-light);font-size:14px;font-weight:600;text-align:right;word-break:break-word}
.ev-datos-l.verde b{color:#1e7a3a}
.ev-datos-l.total{background:var(--off-white)}
.ev-datos-l.total span{padding-top:13px;padding-bottom:13px;font-size:11px;font-weight:700;color:var(--black);text-transform:uppercase;letter-spacing:.1em}
.ev-datos-l.total b{padding-top:13px;padding-bottom:13px;font-size:19px;font-weight:700;color:#1e7a3a}
.ev-resumen-pedido .ev-sello{margin-left:auto;align-self:flex-start}
.ev-previo span{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#c0392b}
.ev-previo p{margin:5px 0 0;font-size:13px;line-height:1.5;color:#444}
.ev-ok{background:#111;color:#e9d9a8}
.ev-ok:hover{background:#000}
.ev-no{background:#fff;color:#c0392b;border-color:rgba(192,57,43,.45)}
.ev-no:hover{background:rgba(192,57,43,.06);border-color:#c0392b}
.ev-motivo{margin:12px 0 0;font-size:12.5px;color:var(--gray-mid);font-style:italic}

.ev-pie-mes{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px}
.ev-pie-mes label{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--gray-mid)}
.ev-pie-mes select{font:inherit;font-size:14px;font-weight:600;color:var(--black);padding:9px 12px;border:1.5px solid var(--gray-light);border-radius:11px;background:#fff;text-transform:capitalize}
.ev-aviso-pend{font-size:13px;font-weight:700;color:#8a6508;background:#fdf0d2;padding:8px 14px;border-radius:999px}

@media(max-width:1250px){
  .ev-resumen{grid-template-columns:repeat(2,1fr)}
  .ev-columnas{grid-template-columns:1fr}
}
@media(max-width:700px){
  .ev-resumen{grid-template-columns:1fr;gap:10px}
  .vt2{padding:13px 15px}
  .vt2 b{font-size:23px}
  .ev-cal{padding:13px}
  .ev-cal-grilla,.ev-cal-cab{gap:4px}
  /* Sin el monto ni el conteo, el día elegido se marca con el número */
  .ev-dia{min-height:52px;padding:6px;align-items:center;justify-content:center}
  .ev-dia-p,.ev-dia-c{display:none}
  .ev-dia.elegido .ev-dia-n{background:#111;color:#e9d9a8;border-radius:50%;width:26px;height:26px;display:grid;place-items:center}
  .ev-dia-pend{top:5px;right:5px;width:7px;height:7px}
  .ev-cifras{grid-template-columns:repeat(2,1fr)}
  .ev-resolver{flex-direction:column}
  .ev-pie-mes label{flex:1 1 100%}
  .ev-pie-mes select{width:100%}
  .ev-venta-top{flex-wrap:wrap}
}

/* Aviso de cambios sin guardar, en el pie de los paneles */
.ed-aviso{margin-right:auto;font-size:13px;color:var(--gray-mid)}
.ed-aviso.err{color:#c0392b}

/* Resumen del pedido al aceptar o denegar la comisión */
.ev-resumen-pedido{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid var(--gray-light);border-radius:14px;background:var(--off-white)}
.ev-resumen-pedido img{width:62px;height:62px;object-fit:contain;border-radius:10px;background:#fff;flex:none}
.ev-resumen-pedido b{display:block;font-size:15px;line-height:1.3}
.ev-resumen-pedido small{display:block;margin-top:3px;font-size:12.5px;color:var(--gray-mid)}
.vl-linea.vl-pagar b{color:#1e7a3a}

/* Historial del vendedor: el estado de cada pedido suyo */
.ev-venta.pendiente .ev-sello{margin-top:8px}
.venta-lista li.ev-venta{display:flex}
.venta-lista .ev-sello{display:inline-block;margin-top:8px}
.ev-motivo{display:block;margin-top:7px;font-size:12px;color:var(--gray-mid);font-style:italic}

/* Filtros en la misma fila que las pestañas, pegados a la derecha */
.ev-filtros{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-left:auto}
.ev-filtros:empty{display:none}
.ev-filtro{display:flex;flex-direction:column;gap:5px;min-width:200px}
.ev-filtro>span{font-size:12px;font-weight:600;color:var(--gray-mid)}
.ev-filtro .vsel-btn{background:#fff;padding-top:9px;padding-bottom:9px}
.ev-filtros .ev-aviso-pend{margin-bottom:5px}
@media(max-width:1100px){
  .ev-filtros{margin-left:0;flex:1 1 100%;margin-top:4px}
}
@media(max-width:700px){
  .ev-filtro{flex:1 1 100%;min-width:0}
}

/* La caja del desplegable, que ahora puede traer buscador */
.vsel-caja{position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid var(--gray-light);border-radius:14px;box-shadow:0 20px 48px rgba(0,0,0,.18);overflow:hidden;z-index:40}
.vsel-caja[hidden]{display:none}
.vsel-caja .vsel-lista{position:static;border:0;border-radius:0;box-shadow:none;max-height:240px}
.vsel-busca{display:flex;align-items:center;gap:8px;padding:10px 13px;border-bottom:1px solid var(--gray-light);color:var(--gray-mid)}
.vsel-busca svg{width:16px;height:16px;flex:none}
.vsel-busca input{flex:1;min-width:0;border:0;outline:none;font:inherit;font-size:14px;color:var(--black);background:none}
.vsel-nada{display:block;padding:14px 13px;font-size:13.5px;color:var(--gray-mid);text-align:center}
.vsel-nada[hidden]{display:none}

/* ============================================================================
   Venta local · el mostrador de la sucursal
   ========================================================================== */

/* El botón de la barra */
.nav-local-btn{display:inline-flex;align-items:center;gap:8px;margin-left:10px;background:transparent;border:1.5px solid rgba(233,217,168,.45);color:#e9d9a8;font-family:inherit;font-weight:700;font-size:14px;cursor:pointer;padding:9px 16px;border-radius:999px;white-space:nowrap;transition:background .18s,border-color .18s}
.nav-local-btn:hover{background:rgba(233,217,168,.12);border-color:#e9d9a8}
.nav-local-btn svg{width:18px;height:18px}

/* Un <b> dentro de un <small> es un dato resaltado, no un título: sin esto
   hereda el tamaño grande de .ev-venta-datos b y se come la línea entera */
.ev-venta-datos small b{display:inline;font-size:inherit;line-height:inherit;font-weight:700;color:var(--black)}

/* De qué tipo fue la venta: en el mostrador o a domicilio */
.ev-retiro{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.ev-retiro svg{width:15px;height:15px;flex:none}
.ev-retiro.local{color:#1e7a3a;font-weight:600}
.vt2-parte{display:block;margin-top:5px;font-size:11.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--gray-mid)}
.vt2.destacada .vt2-parte{color:rgba(233,217,168,.7)}

/* Cuatro cuentas: las dos comisiones por separado y el total que se paga */
.ev-resumen.cuatro{grid-template-columns:repeat(4,1fr)}
.ev-resumen.cuatro .vt2{padding:17px 18px;gap:13px}
.ev-resumen.cuatro .vt2 b{font-size:25px}
.ev-resumen.cuatro>.vt2>.vt2-ico,.ev-resumen.cuatro>.vt2>.vt2-ico svg{width:26px;height:26px}
@media(max-width:1180px){.ev-resumen.cuatro{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.ev-resumen.cuatro{grid-template-columns:1fr}}

/* La planilla de pagos del administrador: lo que le transfiere a cada uno */
.ev-pagos{max-width:1460px;margin:22px auto 0;background:#fff;border:1px solid var(--gray-light);border-radius:18px;padding:20px 22px}
.ev-pagos-cab{margin-bottom:14px}
.ev-pagos-cab h3{margin:0;font-size:15px;font-weight:700}
.ev-pagos-cab small{display:block;margin-top:4px;font-size:12.5px;color:var(--gray-mid)}
.ev-pagos-tabla{border:1px solid var(--gray-light);border-radius:12px;overflow:hidden}
.ev-pagos-f{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;align-items:center;gap:12px;padding:11px 14px;font-size:14px}
.ev-pagos-f+.ev-pagos-f{border-top:1px solid var(--gray-light)}
.ev-pagos-f>span:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}
.ev-pagos-f.cab{background:var(--off-white);font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--gray-mid)}
.ev-pagos-n{min-width:0;font-weight:600}
.ev-pagos-n small{display:block;margin-top:2px;font-size:11.5px;font-weight:500;color:var(--gray-mid)}
.ev-pagos-t{font-weight:700}
.ev-pagos-f.suma{background:var(--off-white);font-weight:700}
.ev-pagos-f.suma>span:first-child{font-size:13px;color:var(--gray-mid);text-transform:uppercase;letter-spacing:.05em}
@media(max-width:620px){
  .ev-pagos{padding:16px}
  .ev-pagos-f{grid-template-columns:1fr auto;gap:6px 12px}
  .ev-pagos-f.cab{display:none}
  .ev-pagos-f>span:not(:first-child){text-align:right}
  .ev-pagos-f>span:nth-child(2)::before{content:'Local '}
  .ev-pagos-f>span:nth-child(3)::before{content:'Delivery '}
  .ev-pagos-f>span:nth-child(4)::before{content:'Total '}
  .ev-pagos-f>span:not(:first-child)::before{font-size:11px;color:var(--gray-mid);font-weight:600}
}

/* Las líneas de un ticket con varios productos */
.ev-ticket-lineas{margin-top:12px;border:1px solid var(--gray-light);border-radius:11px;overflow:hidden}
.ev-ticket-l{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px;font-size:13.5px}
.ev-ticket-l+.ev-ticket-l{border-top:1px solid var(--gray-light)}
.ev-ticket-l span{min-width:0;color:var(--gray-mid)}
.ev-ticket-l b{flex:none;font-weight:700}

.ev-nueva-local{display:inline-flex;align-items:center;gap:7px;margin-left:auto}
.ev-nueva-local svg{width:16px;height:16px}

/* ── El panel: catálogo a la izquierda, el pedido a la derecha ──────────── */
.el-columnas{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;max-width:1460px;margin:0 auto;align-items:start}
@media(max-width:980px){.el-columnas{grid-template-columns:1fr}}

.el-catalogo,.el-ticket{background:#fff;border:1px solid var(--gray-light);border-radius:16px;padding:16px}
.el-catalogo h3,.el-ticket h3{margin:0 0 12px;font-size:15px;font-weight:700}
.el-cat-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.el-cat-top h3{margin:0}
.el-buscador{min-width:260px;flex:1 1 260px}

.el-grilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:9px;max-height:62vh;overflow-y:auto;padding-right:4px}
@media(max-width:560px){.el-grilla{grid-template-columns:1fr;max-height:none}}

.el-prod{position:relative;display:flex;align-items:center;gap:11px;text-align:left;font:inherit;padding:9px;border:1.5px solid var(--gray-light);border-radius:12px;background:#fff;color:var(--black);cursor:pointer;transition:border-color .16s,background .16s}
.el-prod:hover:not(.agotado){border-color:#111;background:var(--off-white)}
.el-prod img{width:46px;height:46px;object-fit:contain;border-radius:9px;background:var(--off-white);flex:none}
.el-prod-txt{min-width:0;flex:1}
.el-prod-txt b{display:block;font-size:13.5px;line-height:1.3;font-weight:600}
.el-prod-txt small{display:block;margin-top:3px;font-size:12px;color:var(--gray-mid)}
.el-prod-n{display:grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#111;color:#e9d9a8;font-size:12px;font-weight:700;flex:none}
.el-prod.agotado{opacity:.5;cursor:not-allowed}
.el-prod-ago{position:absolute;top:7px;right:7px;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#c0392b}

/* ── El pedido que se está armando ─────────────────────────────────────── */
.el-vacio{padding:26px 16px}
.el-lineas{display:grid;gap:8px}
.el-linea{display:grid;grid-template-columns:auto 1fr auto auto auto;align-items:center;gap:10px;padding:9px;border:1px solid var(--gray-light);border-radius:12px}
.el-linea img{width:42px;height:42px;object-fit:contain;border-radius:9px;background:var(--off-white)}
.el-linea-txt{min-width:0}
.el-linea-txt b{display:block;font-size:13.5px;line-height:1.3;font-weight:600}
.el-linea-txt small{display:block;margin-top:2px;font-size:12px;color:var(--gray-mid)}
.el-linea-sub{font-size:14px;font-weight:700;white-space:nowrap}
.el-linea-x{display:grid;place-items:center;width:26px;height:26px;border:0;border-radius:8px;background:none;color:var(--gray-mid);cursor:pointer}
.el-linea-x:hover{background:var(--off-white);color:#c0392b}
.el-linea-x svg{width:14px;height:14px}

.el-cant{display:flex;align-items:center;gap:2px;background:var(--off-white);border-radius:9px;padding:3px}
.el-cant button{width:26px;height:26px;border:0;border-radius:7px;background:none;font:inherit;font-size:16px;font-weight:700;line-height:1;color:var(--black);cursor:pointer}
.el-cant button:hover{background:#fff}
.el-cant b{min-width:22px;text-align:center;font-size:14px;font-weight:700}

.el-datos{display:grid;gap:12px;margin-top:18px;padding-top:18px;border-top:1px solid var(--gray-light)}

.el-pie{margin-top:18px}
.el-cuentas{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:14px}
@media(max-width:560px){.el-cuentas{grid-template-columns:1fr}}
.el-cuentas>div{border:1px solid var(--gray-light);border-radius:11px;padding:10px 12px;min-width:0}
.el-cuentas span{display:block;font-size:10.5px;color:var(--gray-mid);font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.el-cuentas b{display:block;margin-top:4px;font-size:16px;font-weight:700;white-space:nowrap}
.el-cuentas .el-cobrar{background:var(--off-white)}
.el-cuentas .el-comision b{color:#1e9e4a}
.el-pie .venta-btn{width:100%}

/* ── El historial del mostrador ────────────────────────────────────────── */
.el-ticket-card{cursor:default}
.el-ticket-card:hover{transform:none;box-shadow:none}
.el-ticket-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.el-ticket-top small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--gray-mid)}
.el-ticket-top b{display:block;margin-top:2px;font-size:16px;font-weight:700}
.el-ticket-hora{font-size:13px;color:var(--gray-mid);flex:none}
.el-ticket-lineas{border:1px solid var(--gray-light);border-radius:11px;overflow:hidden}
.el-ticket-l{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px;font-size:13.5px}
.el-ticket-l+.el-ticket-l{border-top:1px solid var(--gray-light)}
.el-ticket-l span{min-width:0;color:var(--gray-mid)}
.el-ticket-l b{flex:none;font-weight:700}
.el-ticket-pie{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px}
.el-ticket-pie small{font-size:12.5px;color:var(--gray-mid)}
.el-ticket-pie .ev-borrar{margin:0}

/* ── Sucursales, en la pestaña Despacho ────────────────────────────────── */
.ev-sucursales-bloque{margin-bottom:34px;padding-bottom:30px;border-bottom:1px solid var(--gray-light)}
.ev-sucursales{display:grid;gap:10px}
.ev-sucursal{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#fff;padding:12px 14px;border:1px solid var(--gray-light);border-radius:12px}
.ev-sucursal.apagada{opacity:.55}
.ev-sucursal-campos{display:grid;grid-template-columns:1.2fr 1.4fr 1fr 1fr;gap:8px;flex:1 1 420px;min-width:0}
.ev-sucursal-campos input{width:100%;min-width:0;font:inherit;font-size:14px;padding:9px 11px;border:1.5px solid transparent;border-radius:10px;background:var(--off-white)}
.ev-sucursal-campos input:first-child{font-weight:600}
.ev-sucursal-campos input:focus{outline:none;border-color:#111;background:#fff}
.ev-sucursal-acc{display:flex;align-items:center;gap:8px;flex:none}
.ev-sucursal-gente{font-size:12.5px;color:var(--gray-mid);white-space:nowrap;margin-right:4px}
.ev-sucursal-gente.nueva{color:#b8860b;font-weight:600}
.ev-sucursal .ec-ojo{padding:7px}
.ev-sucursal .ec-borrar{width:30px;height:30px}
@media(max-width:860px){
  .ev-sucursal-campos{grid-template-columns:1fr 1fr}
  .ev-sucursal-acc{width:100%;justify-content:flex-end}
}

/* La ficha de borrado usa el mismo círculo que las personas, con icono */
.ev-ini svg{width:22px;height:22px}

/* ============================================================================
   Pagos al vendedor · lo que se le debe y lo que ya se transfirió
   ========================================================================== */

.ev-acciones{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap}
.ev-acciones .ed-btn{display:inline-flex;align-items:center;gap:7px;flex:none}
.ev-acciones .ed-btn svg{width:16px;height:16px}
.ed-btn.ghost{background:transparent;border:1.5px solid var(--gray-light);color:var(--gray-mid)}
.ed-btn.ghost:hover{border-color:#111;color:var(--black)}
.ev-opcional{font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--gray-mid)}

/* La fila de cada vendedor: se toca para abrir su ficha de pago */
.ev-pagos-f{grid-template-columns:2fr 1fr 1fr 1.1fr 1.3fr}
.ev-pagos-f.fila{width:100%;font:inherit;font-size:14px;background:none;border:0;border-top:1px solid var(--gray-light);text-align:left;cursor:pointer;transition:background .14s}
.ev-pagos-f.fila:hover{background:var(--off-white)}
.ev-pagos-f.fila.pagado{background:rgba(52,199,89,.06)}
.ev-pagos-f.fila.pagado:hover{background:rgba(52,199,89,.12)}
.ev-pagos-f.fila.saldo{background:rgba(224,162,26,.08)}
.ev-pagos-f.fila.saldo:hover{background:rgba(224,162,26,.16)}
.ev-pagos-f>span:last-child{text-align:right}

.ev-chip{display:inline-block;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:5px 11px;border-radius:999px;white-space:nowrap}
.ev-chip.pagado{background:rgba(52,199,89,.16);color:#1e7a3a}
.ev-chip.saldo{background:#fdf0d2;color:#8a6508}
.ev-chip.porpagar{background:var(--off-white);color:var(--gray-mid)}

/* El botón de copiar, pegado al dato que hay que tipear en el banco */
.ev-datos-l b{display:inline-flex;align-items:center;gap:8px}
.ev-copiar{display:grid;place-items:center;width:26px;height:26px;flex:none;border:1px solid var(--gray-light);border-radius:8px;background:#fff;color:var(--gray-mid);cursor:pointer}
.ev-copiar:hover{border-color:#111;color:var(--black)}
.ev-copiar svg{width:14px;height:14px}

.ev-previo.listo{border-color:rgba(52,199,89,.35);background:rgba(52,199,89,.07)}
.ev-previo.listo span{color:#1e7a3a}
.ev-previo.alerta{border-color:#e8cf92;background:#fffdf7}
.ev-previo.alerta span{color:#8a6508}
.ev-pago-nota{margin-top:8px;font-style:italic}

@media(max-width:760px){
  .ev-acciones{width:100%;margin-left:0}
  .ev-pagos-f{grid-template-columns:1fr auto}
  .ev-pagos-f>span:last-child{grid-column:1 / -1;text-align:left;margin-top:6px}
}

/* ── Ventana centrada ──────────────────────────────────────────────────────
   Para gestos cortos sobre una lista, como marcar un pago. El cajón lateral
   es de alto completo y tapa lo que estabas leyendo; esto flota encima y
   deja ver la lista alrededor. */
.venta-ov.venta-centro{display:flex;align-items:center;justify-content:center;padding:18px}
.venta-ov.venta-centro .venta-panel{
  position:relative;top:auto;right:auto;margin:auto;
  width:min(560px,100%);height:auto;max-height:min(86vh,780px);
  border-radius:20px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.32);
  transform:translateY(18px) scale(.97);opacity:0;
  transition:transform .3s var(--ease-spring),opacity .22s var(--ease-smooth);
}
.venta-ov.venta-centro.abierto .venta-panel{transform:none;opacity:1}
.venta-ov.venta-centro .venta-head{padding:20px 24px 17px}
.venta-ov.venta-centro .venta-head h2{font-size:25px}
.venta-ov.venta-centro .venta-body{padding:20px 24px 22px}
.venta-ov.venta-centro .venta-pie{padding:15px 24px}
.venta-ov.venta-centro .venta-pie .venta-btn{width:100%}
@media(max-width:560px){
  .venta-ov.venta-centro{padding:10px}
  .venta-ov.venta-centro .venta-panel{max-height:94vh}
}

/* La cuenta, resumida en la ficha del equipo: confirma de una mirada que
   quedó guardada, sin mostrar el número entero */
.ev-cuenta-chip{color:var(--gray-mid)}

/* El pie de la ventana centrada lleva dos botones: el informe a un costado
   y el de pagar ocupando lo que queda */
.venta-ov.venta-centro .venta-pie{gap:10px}
.venta-ov.venta-centro .venta-pie .ed-btn{flex:none;display:inline-flex;align-items:center;gap:7px}
.venta-ov.venta-centro .venta-pie .ed-btn svg{width:16px;height:16px}
.venta-ov.venta-centro .venta-pie .venta-btn{width:auto;flex:1}

/* El buscador de Pagos: la lista queda completa y se filtra aquí, sin que
   el filtro de Ventas tenga nada que ver */
.ev-busca-pagos{min-width:240px}
@media(max-width:620px){.ev-busca-pagos{min-width:0;width:100%}}