@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
    --bg:#f5f7fb;
    --surface:#ffffff;
    --surface-2:#eef3fb;
    --text:#101828;
    --muted:#667085;
    --brand:#1f5db8;
    --brand-2:#0e3f89;
    --dark:#0d1526;
    --line:#e4e8ef;
    --success:#0f9f6e;
    --radius:22px;
    --shadow:0 18px 60px rgba(15,23,42,.10);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    font-family:Inter,system-ui,sans-serif;
    color:var(--text);
    background:var(--bg);
}
button,input,textarea{font:inherit}
button{cursor:pointer}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.no-scroll{overflow:hidden}

.topbar{
    height:36px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 clamp(18px,4vw,64px);
    background:var(--dark);
    color:#fff;
    font-size:12px;
}
.topbar a{opacity:.8}
.topbar a:hover{opacity:1}

.site-header{
    position:sticky;
    top:0;
    z-index:80;
    min-height:78px;
    display:grid;
    grid-template-columns:220px minmax(260px,680px) 160px;
    align-items:center;
    gap:28px;
    padding:14px clamp(18px,4vw,64px);
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(0,0,0,.05);
}
.brand{
    display:flex;
    align-items:center;
    gap:7px;
    font-size:18px;
    font-weight:900;
    letter-spacing:-.8px;
}
.brand-mark{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:52px;
    height:36px;
    padding:0 10px;
    color:#fff;
    background:linear-gradient(135deg,var(--brand),var(--brand-2));
    border-radius:10px;
}
.search-wrap{position:relative;display:flex}
.search-wrap input{
    width:100%;
    height:50px;
    border:1px solid var(--line);
    border-radius:15px;
    background:#f8fafc;
    padding:0 58px 0 18px;
    outline:none;
    transition:.2s ease;
}
.search-wrap input:focus{
    background:#fff;
    border-color:#8ab1e9;
    box-shadow:0 0 0 4px rgba(31,93,184,.10);
}
.search-wrap>button{
    position:absolute;
    right:7px;
    top:7px;
    width:36px;
    height:36px;
    border:0;
    border-radius:11px;
    background:var(--brand);
    color:#fff;
    font-size:22px;
}
.search-results{
    position:absolute;
    top:58px;
    left:0;
    right:0;
    display:none;
    padding:10px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    box-shadow:var(--shadow);
    z-index:120;
}
.search-results.open{display:block}
.search-item{
    width:100%;
    display:grid;
    grid-template-columns:50px 1fr auto;
    gap:12px;
    align-items:center;
    border:0;
    background:transparent;
    text-align:left;
    padding:9px;
    border-radius:12px;
}
.search-item:hover{background:#f3f6fb}
.search-item img{width:50px;height:50px;object-fit:contain;background:#f6f8fb;border-radius:10px}
.search-item span{display:flex;flex-direction:column;gap:3px}
.search-item small{color:var(--muted);font-size:10px;text-transform:uppercase}
.search-item strong{font-size:13px}
.search-item b{font-size:13px;color:var(--brand)}
.search-empty{padding:16px;font-size:13px;color:var(--muted)}

.header-actions{
    display:flex;
    justify-content:flex-end;
    gap:10px;
}
.icon-btn{
    height:46px;
    min-width:46px;
    padding:0 12px;
    border:1px solid var(--line);
    background:#fff;
    border-radius:14px;
}
.cart-trigger span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:20px;
    height:20px;
    margin-left:4px;
    padding:0 5px;
    background:var(--brand);
    color:#fff;
    border-radius:50px;
    font-size:10px;
    font-weight:700;
}

.category-nav{
    display:flex;
    gap:6px;
    overflow-x:auto;
    scrollbar-width:none;
    padding:8px clamp(18px,4vw,64px) 12px;
    background:#fff;
    border-bottom:1px solid var(--line);
}
.category-nav::-webkit-scrollbar{display:none}
.category-nav-link{
    border:0;
    white-space:nowrap;
    padding:10px 13px;
    background:transparent;
    color:#344054;
    border-radius:10px;
    font-size:12px;
    font-weight:700;
}
.category-nav-link:hover{background:#eef4ff;color:var(--brand)}

.hero{
    position:relative;
    min-height:560px;
    overflow:hidden;
    background:#101828;
}
.hero-slide{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    opacity:0;
    transform:scale(1.025);
    background-size:cover;
    background-position:center;
    transition:opacity .8s ease,transform 1.2s ease;
}
.hero-slide.active{opacity:1;transform:scale(1)}
.hero-fallback{
    background:
        radial-gradient(circle at 75% 30%,rgba(68,139,235,.35),transparent 25%),
        linear-gradient(120deg,#09101e,#183862);
}
.hero-content{
    width:min(720px,90%);
    margin-left:clamp(22px,7vw,110px);
    color:#fff;
}
.eyebrow,.kicker{
    display:block;
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:2px;
}
.eyebrow{color:#9fc6ff}
.hero h1{
    max-width:760px;
    margin:14px 0;
    font-size:clamp(42px,6vw,86px);
    line-height:.95;
    letter-spacing:-4px;
}
.hero p{
    max-width:580px;
    margin:0 0 28px;
    color:rgba(255,255,255,.76);
    font-size:17px;
    line-height:1.65;
}
.hero-dots{
    position:absolute;
    left:clamp(22px,7vw,110px);
    bottom:36px;
    display:flex;
    gap:8px;
    z-index:5;
}
.hero-dots button{
    width:26px;height:5px;
    border:0;border-radius:20px;
    background:rgba(255,255,255,.3);
    transition:.25s ease;
}
.hero-dots button.active{width:52px;background:#fff}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:46px;
    padding:0 20px;
    border:0;
    border-radius:13px;
    font-weight:800;
    transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 12px 32px rgba(31,93,184,.25)}
.btn-dark{background:var(--dark);color:#fff}
.btn-light{background:#fff;color:var(--dark)}
.btn-outline-light{border:1px solid rgba(255,255,255,.45);color:#fff;background:transparent}
.btn-block{width:100%}

.section{
    padding:72px clamp(18px,4vw,64px);
    opacity:0;
    transform:translateY(24px);
    transition:.7s ease;
}
.section.in-view,.wholesale-banner.in-view{opacity:1;transform:none}
.section-head{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:20px;
    margin-bottom:28px;
}
.section-head h2{
    margin:7px 0 0;
    font-size:clamp(28px,4vw,46px);
    letter-spacing:-2px;
}
.kicker{color:var(--brand)}

.category-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:14px;
}
.category-card{
    min-height:150px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    align-items:flex-start;
    border:1px solid var(--line);
    border-radius:18px;
    padding:18px;
    background:#fff;
    text-align:left;
    transition:.25s ease;
}
.category-card:hover{
    transform:translateY(-5px);
    border-color:#b8cff1;
    box-shadow:0 14px 30px rgba(15,23,42,.08);
}
.category-icon{
    width:42px;height:42px;
    display:flex;align-items:center;justify-content:center;
    border-radius:12px;
    background:#edf4ff;
    color:var(--brand);
    font-size:18px;
}
.category-card span{font-weight:800;line-height:1.25}
.category-card small{color:var(--muted)}

.offers-section{background:#edf2f8}
.carousel-controls{display:flex;gap:8px}
.carousel-controls button{
    width:44px;height:44px;border:1px solid var(--line);background:#fff;border-radius:13px;font-size:18px
}

.product-carousel{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(230px,280px);
    gap:16px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
}
.product-carousel::-webkit-scrollbar{display:none}
.product-card{
    scroll-snap-align:start;
    overflow:hidden;
    background:#fff;
    border:1px solid var(--line);
    border-radius:20px;
    transition:.25s ease;
}
.product-card:hover{
    transform:translateY(-5px);
    box-shadow:0 18px 45px rgba(15,23,42,.10);
}
.product-image-wrap{
    position:relative;
    aspect-ratio:1/1;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(180deg,#f8fafc,#edf1f6);
    overflow:hidden;
}
.product-image-wrap img{
    width:85%;
    height:85%;
    object-fit:contain;
    transition:transform .4s ease;
}
.product-card:hover .product-image-wrap img{transform:scale(1.06)}
.discount-badge,.wholesale-badge{
    position:absolute;
    top:13px;
    z-index:2;
    padding:7px 10px;
    border-radius:20px;
    color:#fff;
    font-size:10px;
    font-weight:800;
}
.discount-badge{left:13px;background:#d92d20}
.wholesale-badge{right:13px;background:var(--brand)}
.product-body{padding:17px}
.product-body>small{
    display:block;
    margin-bottom:7px;
    color:var(--muted);
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.8px;
}
.product-body h3{
    min-height:42px;
    margin:0 0 12px;
    font-size:14px;
    line-height:1.45;
}
.price-row{display:flex;align-items:baseline;gap:8px;margin-bottom:7px}
.price-row strong{font-size:21px;letter-spacing:-1px}
.price-row del{color:#98a2b3;font-size:12px}
.wholesale-price{
    min-height:30px;
    margin:0 0 12px;
    color:var(--success);
    font-size:11px;
    font-weight:700;
}
.product-body .btn{width:100%;margin-top:4px}

.products-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    min-height:180px;
}
.products-grid.loading{opacity:.45;pointer-events:none}
.link-btn{
    border:0;background:transparent;color:var(--brand);font-weight:800
}
.empty-state{
    grid-column:1/-1;
    padding:50px;
    text-align:center;
    background:#fff;
    border:1px dashed #ccd3df;
    border-radius:20px;
    color:var(--muted);
}

.wholesale-banner{
    margin:10px clamp(18px,4vw,64px);
    padding:50px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:36px;
    border-radius:26px;
    color:#fff;
    background:
        radial-gradient(circle at 80% 20%,rgba(255,255,255,.12),transparent 20%),
        linear-gradient(130deg,#0b1325,#19477f);
    opacity:0;
    transform:translateY(24px);
    transition:.7s ease;
}
.wholesale-banner h2{
    margin:8px 0 12px;
    font-size:clamp(30px,4vw,52px);
    letter-spacing:-2px;
}
.wholesale-banner p{max-width:700px;color:rgba(255,255,255,.72);line-height:1.65}
.wholesale-actions{display:flex;gap:10px;flex-wrap:wrap}

.cart-drawer{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    z-index:200;
    width:min(440px,100%);
    padding:24px;
    background:#fff;
    transform:translateX(100%);
    transition:.32s cubic-bezier(.2,.75,.2,1);
    box-shadow:-30px 0 80px rgba(0,0,0,.16);
}
.cart-drawer.open{transform:none}
.drawer-overlay{
    position:fixed;
    inset:0;
    z-index:190;
    background:rgba(2,6,23,.55);
    opacity:0;
    pointer-events:none;
    transition:.25s;
}
.drawer-overlay.open{opacity:1;pointer-events:auto}
.cart-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:22px;
}
.cart-head small{color:var(--muted)}
.cart-head h3{margin:2px 0 0;font-size:28px}
.cart-head button{
    width:42px;height:42px;border:0;border-radius:12px;background:#f2f4f7;font-size:24px
}
.cart-item{
    display:grid;
    grid-template-columns:78px 1fr;
    gap:14px;
    padding:14px 0;
    border-bottom:1px solid var(--line);
}
.cart-item img{
    width:78px;height:78px;object-fit:contain;background:#f6f7f9;border-radius:13px
}
.cart-item-info{display:flex;flex-direction:column;gap:5px}
.cart-item-info strong{font-size:13px}
.cart-item-info small{color:var(--brand);font-weight:800}
.qty-controls{display:flex;align-items:center;gap:7px;margin-top:5px}
.qty-controls button{
    min-width:28px;height:28px;border:1px solid var(--line);background:#fff;border-radius:8px
}
.qty-controls .remove-btn{
    margin-left:auto;border:0;color:#b42318;background:transparent;font-size:11px
}
.cart-total{
    display:flex;justify-content:space-between;align-items:center;padding:22px 0;font-size:18px
}
.cart-total strong{font-size:24px}
.cart-empty{text-align:center;padding:80px 20px;color:var(--muted)}
.cart-empty>div{font-size:44px}
.cart-empty h4{color:var(--text);font-size:20px;margin-bottom:8px}

.toast{
    position:fixed;
    left:50%;
    bottom:28px;
    z-index:500;
    transform:translate(-50%,20px);
    padding:13px 18px;
    border-radius:50px;
    background:var(--dark);
    color:#fff;
    opacity:0;
    pointer-events:none;
    transition:.25s;
    font-size:13px;
    box-shadow:var(--shadow);
}
.toast.show{opacity:1;transform:translate(-50%,0)}

footer{
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:30px;
    padding:58px clamp(18px,4vw,64px);
    background:var(--dark);
    color:#fff;
}
footer div{display:flex;flex-direction:column;gap:10px}
footer p,footer a{color:#98a2b3;font-size:13px}

.checkout-page{background:#eef2f7}
.checkout-header{
    height:80px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 clamp(18px,4vw,64px);
    background:#fff;
    border-bottom:1px solid var(--line);
}
.checkout-shell{
    width:min(1180px,calc(100% - 32px));
    margin:40px auto;
    display:grid;
    grid-template-columns:1.5fr .7fr;
    gap:24px;
}
.checkout-form-card,.order-summary{
    background:#fff;
    border:1px solid var(--line);
    border-radius:24px;
    padding:28px;
}
.checkout-form-card h1{font-size:36px;letter-spacing:-1.5px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.form-grid label{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:700}
.form-grid .full{grid-column:1/-1}
.form-grid input,.form-grid textarea{
    width:100%;
    border:1px solid var(--line);
    border-radius:12px;
    padding:13px;
    outline:none;
}
.checkout-note{
    margin:20px 0;
    padding:14px;
    border-radius:12px;
    background:#fff8e6;
    color:#7a5411;
    font-size:12px;
    line-height:1.5;
}
.order-summary h2{margin-top:0}
.summary-item,.summary-total{
    display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line);font-size:13px
}
.summary-total{font-size:18px;border:0;padding-top:22px}

@media (max-width:1100px){
    .site-header{grid-template-columns:190px 1fr auto}
    .category-grid{grid-template-columns:repeat(4,1fr)}
    .products-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
    .topbar{display:none}
    .site-header{
        position:sticky;
        grid-template-columns:1fr auto;
        gap:10px;
        padding:12px 14px;
    }
    .brand{font-size:15px}
    .brand-mark{min-width:44px;height:32px}
    .search-wrap{grid-column:1/-1;grid-row:2}
    .header-actions{grid-column:2;grid-row:1}
    .category-nav{padding:7px 12px 10px}
    .hero{min-height:520px}
    .hero-content{margin-left:22px}
    .hero h1{font-size:48px;letter-spacing:-2.5px}
    .hero p{font-size:14px}
    .hero-dots{left:22px}
    .section{padding:50px 14px}
    .section-head{align-items:center}
    .section-head h2{font-size:31px}
    .category-grid{grid-template-columns:repeat(2,1fr)}
    .category-card{min-height:135px}
    .product-carousel{grid-auto-columns:74vw}
    .products-grid{grid-template-columns:repeat(2,1fr);gap:10px}
    .product-body{padding:13px}
    .product-body h3{font-size:12px}
    .price-row{flex-direction:column;gap:2px}
    .price-row strong{font-size:17px}
    .wholesale-banner{
        margin:0 14px;
        padding:30px 22px;
        flex-direction:column;
        align-items:flex-start;
    }
    footer{grid-template-columns:1fr;padding:45px 20px}
    .checkout-shell{grid-template-columns:1fr}
    .form-grid{grid-template-columns:1fr}
    .form-grid .full{grid-column:auto}
}


/* ================================
   MODO DETALLE / MAYORISTA
================================ */
.site-header{
    grid-template-columns:190px auto minmax(260px,680px) 150px;
}

.purchase-mode{
    display:flex;
    align-items:center;
    padding:4px;
    background:#eef2f7;
    border:1px solid var(--line);
    border-radius:14px;
    gap:3px;
}

.mode-btn{
    height:40px;
    padding:0 14px;
    border:0;
    background:transparent;
    border-radius:10px;
    color:#667085;
    font-size:12px;
    font-weight:800;
    transition:.2s ease;
}

.mode-btn.active{
    background:#fff;
    color:var(--brand);
    box-shadow:0 4px 14px rgba(15,23,42,.08);
}

.mode-btn[data-mode="mayorista"].active{
    background:var(--brand);
    color:#fff;
}

body.modo-mayorista .product-card{
    border-color:#b9d2f3;
}

body.modo-mayorista .wholesale-badge{
    background:#0f9f6e;
}

.dual-price-box{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
    padding:9px;
    margin:4px 0 10px;
    border-radius:11px;
    background:#f5f7fa;
}

.dual-price-box div{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.dual-price-box span{
    font-size:9px;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.5px;
}

.dual-price-box strong{
    font-size:12px;
}

body.modo-mayorista .dual-price-box div:last-child{
    background:#e8f6f0;
    margin:-4px;
    padding:4px 6px;
    border-radius:8px;
}

.mode-transition{
    animation:modePulse .35s ease;
}

@keyframes modePulse{
    0%{opacity:.55;transform:scale(.99)}
    100%{opacity:1;transform:scale(1)}
}

@media (max-width:1100px){
    .site-header{
        grid-template-columns:180px auto 1fr auto;
    }
}

@media (max-width:760px){
    .site-header{
        grid-template-columns:1fr auto;
    }
    .purchase-mode{
        grid-column:1/-1;
        grid-row:3;
        width:100%;
    }
    .mode-btn{
        flex:1;
    }
    .search-wrap{
        grid-row:2;
    }
}


/* =========================================================
   LUG PROMARKET V3 — BRANDING OFICIAL
   Paleta inspirada en el logo oficial
========================================================= */
:root{
    --brand:#0058a8;
    --brand-2:#003f7f;
    --brand-cyan:#15c7eb;
    --brand-yellow:#ffd21f;
    --brand-red:#ff2b2b;
    --dark:#071426;
    --bg:#f5f8fc;
    --surface:#ffffff;
    --surface-2:#edf4fb;
    --line:#dce7f1;
}

body{
    background:
        radial-gradient(circle at 15% 0%, rgba(21,199,235,.08), transparent 24%),
        linear-gradient(180deg,#f9fbfe 0,#f4f7fb 50%,#f7f9fc 100%);
}

.topbar{
    background:linear-gradient(90deg,#002d62,#0058a8 55%,#0aa8d2);
    border-bottom:1px solid rgba(255,255,255,.12);
}

.site-header{
    background:rgba(255,255,255,.94);
    box-shadow:0 8px 30px rgba(0,55,110,.05);
}

.brand-logo{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    min-width:150px;
}

.brand-logo img{
    width:118px;
    height:64px;
    object-fit:contain;
    filter:drop-shadow(0 8px 15px rgba(0,61,125,.12));
    transition:transform .25s ease, filter .25s ease;
}

.brand-logo:hover img{
    transform:translateY(-2px) rotate(-1deg);
    filter:drop-shadow(0 12px 22px rgba(0,61,125,.2));
}

.search-wrap input:focus{
    border-color:var(--brand-cyan);
    box-shadow:0 0 0 4px rgba(21,199,235,.13);
}

.search-wrap>button{
    background:linear-gradient(135deg,var(--brand),var(--brand-cyan));
    box-shadow:0 8px 20px rgba(0,88,168,.24);
}

.purchase-mode{
    background:#edf4fb;
    border-color:#d1e2f3;
}

.mode-btn.active{
    color:var(--brand);
}

.mode-btn[data-mode="mayorista"].active{
    color:#07203c;
    background:linear-gradient(135deg,var(--brand-yellow),#ffea76);
    box-shadow:0 8px 22px rgba(255,210,31,.28);
}

body.modo-mayorista{
    --brand:#0b77bd;
}

.hero{
    min-height:585px;
    background:
        radial-gradient(circle at 78% 30%,rgba(21,199,235,.2),transparent 18%),
        linear-gradient(135deg,#03152a 0%,#004f9f 60%,#0aa6d2 100%);
}

.hero::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        linear-gradient(115deg,rgba(0,0,0,.25),transparent 55%),
        repeating-linear-gradient(120deg,transparent 0 90px,rgba(255,255,255,.018) 90px 92px);
    z-index:1;
}

.hero-slide{
    z-index:2;
}

.hero-content{
    position:relative;
    z-index:4;
}

.hero h1{
    text-shadow:0 12px 40px rgba(0,0,0,.22);
}

.eyebrow{
    color:var(--brand-yellow);
}

.hero-brand-orbit{
    position:absolute;
    z-index:3;
    right:clamp(-70px,3vw,40px);
    top:50%;
    width:clamp(300px,36vw,580px);
    transform:translateY(-50%) rotate(-7deg);
    opacity:.17;
    pointer-events:none;
    filter:drop-shadow(0 35px 45px rgba(0,0,0,.25));
    animation:lugFloat 6s ease-in-out infinite;
}

.hero-brand-orbit img{
    width:100%;
    height:auto;
}

@keyframes lugFloat{
    0%,100%{transform:translateY(-50%) rotate(-7deg)}
    50%{transform:translateY(calc(-50% - 14px)) rotate(-4deg)}
}

.btn-primary{
    background:linear-gradient(135deg,var(--brand-yellow),#ffb91b);
    color:#09203d;
    box-shadow:0 14px 34px rgba(255,199,31,.24);
}

.btn-primary:hover{
    box-shadow:0 18px 40px rgba(255,199,31,.33);
}

.btn-dark{
    background:linear-gradient(135deg,#071426,#0a3f72);
}

.category-icon{
    background:linear-gradient(135deg,#e9f5ff,#e7fbff);
    color:var(--brand);
    border:1px solid #d6ecfb;
}

.category-card{
    overflow:hidden;
    position:relative;
}

.category-card::after{
    content:"";
    position:absolute;
    width:80px;
    height:80px;
    right:-28px;
    bottom:-28px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(21,199,235,.16),transparent 65%);
    transition:.3s ease;
}

.category-card:hover::after{
    transform:scale(1.6);
}

.discount-badge{
    background:linear-gradient(135deg,var(--brand-red),#ff6464);
}

.wholesale-badge{
    color:#10213b;
    background:linear-gradient(135deg,var(--brand-yellow),#ffe66b);
}

.wholesale-banner{
    position:relative;
    overflow:hidden;
    grid-template-columns:170px 1fr auto;
    background:
        radial-gradient(circle at 88% 16%,rgba(255,210,31,.22),transparent 18%),
        radial-gradient(circle at 6% 100%,rgba(21,199,235,.24),transparent 28%),
        linear-gradient(125deg,#003f7f,#005fb5 55%,#0ea8cf);
    box-shadow:0 30px 80px rgba(0,76,145,.18);
}

.wholesale-brand{
    width:150px;
    height:150px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:8px;
    border-radius:30px;
    background:rgba(255,255,255,.96);
    box-shadow:0 18px 45px rgba(0,0,0,.16);
    transform:rotate(-5deg);
}

.wholesale-brand img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.wholesale-copy{
    min-width:0;
}

.wholesale-banner .kicker{
    color:var(--brand-yellow);
}

.dual-price-box{
    background:linear-gradient(135deg,#f5f9fd,#edf7fb);
    border:1px solid #dfebf4;
}

body.modo-mayorista .dual-price-box div:last-child{
    background:linear-gradient(135deg,#fff7c7,#ffebb0);
    color:#5d4600;
}

.product-card:hover{
    border-color:#b8dbf2;
    box-shadow:0 24px 52px rgba(0,76,145,.12);
}

footer{
    background:
        radial-gradient(circle at 5% 20%,rgba(21,199,235,.13),transparent 25%),
        linear-gradient(135deg,#041120,#082946);
}

.footer-brand img{
    width:130px;
    height:auto;
    object-fit:contain;
    background:#fff;
    border-radius:18px;
    padding:8px;
    margin-bottom:8px;
}

.checkout-header .brand-logo img{
    width:102px;
    height:60px;
}

@media (max-width:1100px){
    .wholesale-banner{
        grid-template-columns:130px 1fr;
    }
    .wholesale-actions{
        grid-column:2;
    }
    .wholesale-brand{
        width:120px;
        height:120px;
    }
}

@media (max-width:760px){
    .brand-logo img{
        width:92px;
        height:48px;
    }
    .hero{
        min-height:540px;
    }
    .hero-brand-orbit{
        width:390px;
        right:-190px;
        top:60%;
        opacity:.1;
    }
    .wholesale-banner{
        display:flex;
        flex-direction:column;
        align-items:flex-start;
    }
    .wholesale-brand{
        width:100px;
        height:100px;
    }
}


/* =========================================================
   V4 — UBICACIÓN Y LOCAL LUG PROMARKET
========================================================= */
.store-section{
    padding-top:80px;
    padding-bottom:85px;
    background:
        radial-gradient(circle at 85% 12%,rgba(21,199,235,.10),transparent 22%),
        linear-gradient(180deg,#ffffff,#f4f8fc);
}

.store-head{
    align-items:flex-start;
}

.store-head p{
    max-width:680px;
    margin:12px 0 0;
    color:var(--muted);
    line-height:1.65;
}

.store-layout{
    display:grid;
    grid-template-columns:minmax(0,1.6fr) minmax(320px,.75fr);
    gap:22px;
    align-items:stretch;
}

.store-gallery{
    display:grid;
    grid-template-columns:1.12fr .88fr;
    gap:14px;
    min-height:520px;
}

.store-photo{
    margin:0;
    overflow:hidden;
    border-radius:26px;
    background:#e9eef5;
    border:1px solid var(--line);
    box-shadow:0 22px 55px rgba(5,57,110,.10);
}

.store-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .65s cubic-bezier(.2,.75,.2,1);
}

.store-photo:hover img{
    transform:scale(1.045);
}

.store-photo-main{
    transform:translateY(18px);
}

.store-info-card{
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:34px;
    border-radius:28px;
    color:#fff;
    background:
        radial-gradient(circle at 88% 8%,rgba(255,210,31,.18),transparent 21%),
        radial-gradient(circle at 0 100%,rgba(21,199,235,.24),transparent 27%),
        linear-gradient(145deg,#06172d,#004b91 65%,#078bb8);
    box-shadow:0 26px 70px rgba(0,63,127,.18);
}

.store-info-card::after{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    right:-90px;
    bottom:-90px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.12);
    box-shadow:
        0 0 0 26px rgba(255,255,255,.025),
        0 0 0 52px rgba(255,255,255,.018);
}

.store-logo-box{
    position:relative;
    z-index:2;
    width:106px;
    height:106px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:20px;
    padding:7px;
    border-radius:24px;
    background:#fff;
    box-shadow:0 15px 35px rgba(0,0,0,.18);
    transform:rotate(-4deg);
}

.store-logo-box img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.store-label{
    position:relative;
    z-index:2;
    color:var(--brand-yellow);
    font-size:11px;
    text-transform:uppercase;
    font-weight:900;
    letter-spacing:1.8px;
}

.store-info-card h3{
    position:relative;
    z-index:2;
    margin:7px 0 25px;
    font-size:36px;
    letter-spacing:-1.7px;
}

.store-data{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    gap:14px;
}

.store-data-row{
    display:grid;
    grid-template-columns:44px 1fr;
    gap:12px;
    align-items:start;
    padding:14px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:15px;
    background:rgba(255,255,255,.07);
    backdrop-filter:blur(8px);
}

.store-data-icon{
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:11px;
    color:#082548;
    background:linear-gradient(135deg,var(--brand-yellow),#fff0a0);
    font-size:19px;
    font-weight:900;
}

.store-data-row div{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.store-data-row small{
    color:rgba(255,255,255,.6);
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.8px;
}

.store-data-row strong{
    color:#fff;
    font-size:13px;
    line-height:1.45;
}

.store-actions{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:20px;
}

.store-note{
    position:relative;
    z-index:2;
    margin:16px 0 0;
    color:rgba(255,255,255,.65);
    font-size:11px;
    line-height:1.5;
}

@media (max-width:980px){
    .store-layout{
        grid-template-columns:1fr;
    }

    .store-gallery{
        min-height:420px;
    }

    .store-info-card{
        min-height:auto;
    }
}

@media (max-width:650px){
    .store-section{
        padding-top:52px;
        padding-bottom:55px;
    }

    .store-gallery{
        grid-template-columns:1fr;
        min-height:0;
    }

    .store-photo{
        height:280px;
        border-radius:20px;
    }

    .store-photo-main{
        transform:none;
    }

    .store-info-card{
        padding:24px 19px;
        border-radius:22px;
    }

    .store-info-card h3{
        font-size:30px;
    }

    .store-actions{
        grid-template-columns:1fr;
    }
}


/* =========================================================
   V5 — DOS IDENTIDADES VISUALES + MAPA + WHATSAPP
========================================================= */

/* DETALLE */
body{
    --brand:#1769c2;
    --brand-2:#0a4e9e;
    --brand-cyan:#2fc9f4;
    --accent:#ffd21f;
    --page-bg:#f7f9fc;
    --surface:#ffffff;
    --text:#101828;
    --muted:#667085;
    --line:#dce6f0;
    --card-bg:#ffffff;
    --hero-a:#08264a;
    --hero-b:#1769c2;
    --hero-c:#2fc9f4;
    transition:
        background .45s ease,
        color .45s ease;
}

/* MAYORISTA */
body.modo-mayorista{
    --brand:#f5b400;
    --brand-2:#d88d00;
    --brand-cyan:#ffdf5e;
    --accent:#0054a6;
    --page-bg:#fff8e1;
    --surface:#fffdf7;
    --text:#1f1c13;
    --muted:#746a50;
    --line:#ead9a5;
    --card-bg:#fffdf7;
    --hero-a:#4c3400;
    --hero-b:#a96f00;
    --hero-c:#f5b400;
    background:
        radial-gradient(circle at 20% 0%,rgba(245,180,0,.13),transparent 28%),
        linear-gradient(180deg,#fffdf6 0,#fff8e6 45%,#fffdf8 100%);
}

body.modo-mayorista .topbar{
    background:linear-gradient(90deg,#3a2800,#9d6900 55%,#f5b400);
}

body.modo-mayorista .site-header{
    background:rgba(255,253,247,.95);
    box-shadow:0 8px 28px rgba(109,75,0,.08);
}

body.modo-mayorista .category-nav{
    background:#fff9e8;
    border-color:#ead9a5;
}

body.modo-mayorista .category-nav-link:hover{
    background:#fff1bd;
    color:#875b00;
}

body.modo-mayorista .hero{
    background:
        radial-gradient(circle at 78% 30%,rgba(255,223,94,.18),transparent 18%),
        linear-gradient(135deg,var(--hero-a) 0%,var(--hero-b) 58%,var(--hero-c) 100%);
}

body.modo-mayorista .hero::before{
    content:"MAYORISTA";
    position:absolute;
    z-index:3;
    right:4vw;
    bottom:32px;
    color:rgba(255,255,255,.08);
    font-size:clamp(60px,11vw,170px);
    font-weight:900;
    letter-spacing:-7px;
    pointer-events:none;
}

body.modo-mayorista .eyebrow{
    color:#fff1aa;
}

body.modo-mayorista .btn-primary{
    background:linear-gradient(135deg,#ffe57a,#f5b400);
    color:#3c2b00;
    box-shadow:0 14px 34px rgba(245,180,0,.25);
}

body.modo-mayorista .btn-dark{
    background:linear-gradient(135deg,#2e250c,#69500a);
}

body.modo-mayorista .section{
    color:#1f1c13;
}

body.modo-mayorista .category-card,
body.modo-mayorista .product-card{
    background:#fffdf7;
    border-color:#ead9a5;
}

body.modo-mayorista .category-card:hover,
body.modo-mayorista .product-card:hover{
    border-color:#e5bd43;
    box-shadow:0 22px 45px rgba(145,99,0,.11);
}

body.modo-mayorista .category-icon{
    background:linear-gradient(135deg,#fff7cf,#ffe79a);
    color:#8a5d00;
    border-color:#f0d06f;
}

body.modo-mayorista .product-image-wrap{
    background:linear-gradient(180deg,#fffdf7,#fff4d3);
}

body.modo-mayorista .offers-section{
    background:#fff2c9;
}

body.modo-mayorista .wholesale-banner{
    background:
        radial-gradient(circle at 88% 16%,rgba(255,255,255,.16),transparent 18%),
        radial-gradient(circle at 6% 100%,rgba(0,84,166,.22),transparent 28%),
        linear-gradient(125deg,#5e4000,#a86d00 58%,#f5b400);
}

body.modo-mayorista footer{
    background:
        radial-gradient(circle at 8% 12%,rgba(245,180,0,.12),transparent 24%),
        linear-gradient(135deg,#2f2308,#614200);
}

/* selector */
.purchase-mode-wrap{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.purchase-mode-label{
    padding-left:4px;
    font-size:9px;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.9px;
    font-weight:800;
}

.purchase-mode{
    transition:.35s ease;
}

.mode-btn{
    min-width:82px;
}

.mode-btn[data-mode="detalle"].active{
    background:linear-gradient(135deg,#0f63bd,#2fc9f4);
    color:#fff;
}

body.modo-mayorista .mode-btn[data-mode="detalle"].active{
    background:#fff;
    color:#6d6248;
}

body.modo-mayorista .mode-btn[data-mode="mayorista"].active{
    background:linear-gradient(135deg,#ffe16b,#f5b400);
    color:#3f2d00;
}

/* mapa */
.store-map-layout{
    display:grid;
    grid-template-columns:minmax(0,1.45fr) minmax(330px,.75fr);
    gap:22px;
    align-items:stretch;
}

.map-shell{
    position:relative;
    min-height:520px;
    overflow:hidden;
    border-radius:28px;
    border:1px solid var(--line);
    background:#e9eef5;
    box-shadow:0 22px 55px rgba(5,57,110,.10);
}

.map-shell iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

body.modo-mayorista .store-section{
    background:
        radial-gradient(circle at 85% 12%,rgba(245,180,0,.12),transparent 22%),
        linear-gradient(180deg,#fffdf9,#fff6dc);
}

body.modo-mayorista .store-info-card{
    background:
        radial-gradient(circle at 88% 8%,rgba(255,255,255,.16),transparent 21%),
        radial-gradient(circle at 0 100%,rgba(0,84,166,.20),transparent 27%),
        linear-gradient(145deg,#3f2b00,#986500 65%,#d99b00);
}

/* WhatsApp */
.whatsapp-float{
    position:fixed;
    right:22px;
    bottom:22px;
    z-index:450;
    display:flex;
    align-items:center;
    gap:10px;
    min-height:54px;
    padding:0 17px 0 12px;
    border-radius:999px;
    background:#25d366;
    color:#fff;
    box-shadow:0 18px 42px rgba(37,211,102,.34);
    font-size:13px;
    font-weight:900;
    transition:.22s ease;
}

.whatsapp-float:hover{
    transform:translateY(-3px) scale(1.02);
    box-shadow:0 22px 48px rgba(37,211,102,.42);
}

.whatsapp-icon{
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(255,255,255,.2);
    font-size:19px;
}

body.modo-mayorista .whatsapp-float{
    box-shadow:
        0 18px 42px rgba(37,211,102,.30),
        0 0 0 4px rgba(245,180,0,.16);
}

/* transiciones */
.site-header,
.category-nav,
.hero,
.category-card,
.product-card,
.offers-section,
.wholesale-banner,
.store-section,
.store-info-card,
footer,
.btn{
    transition:
        background .45s ease,
        color .45s ease,
        border-color .45s ease,
        box-shadow .45s ease,
        transform .25s ease;
}

@media (max-width:1100px){
    .site-header{
        grid-template-columns:180px auto 1fr auto;
    }

    .store-map-layout{
        grid-template-columns:1fr;
    }

    .map-shell{
        min-height:440px;
    }
}

@media (max-width:760px){
    .purchase-mode-wrap{
        grid-column:1/-1;
        grid-row:3;
    }

    .purchase-mode-label{
        text-align:center;
    }

    .store-map-layout{
        grid-template-columns:1fr;
    }

    .map-shell{
        min-height:360px;
        border-radius:20px;
    }

    .whatsapp-float{
        right:14px;
        bottom:14px;
        min-height:52px;
        padding-right:14px;
    }

    .whatsapp-label{
        display:none;
    }

    .whatsapp-icon{
        width:32px;
        height:32px;
    }
}

/* =========================================================
   V6 - MAPA PRINCIPAL / FOOTER NUEVO / WHATSAPP OFICIAL
========================================================= */

/* Elimina cualquier texto decorativo gigante detrás del slider */
.hero::before,
body.modo-mayorista .hero::before{
    content:none !important;
    display:none !important;
}

.hero-brand-orbit{
    display:none !important;
}

/* Ubicación */
.store-section{
    padding-top:82px;
    padding-bottom:82px;
}

.store-head p{
    max-width:720px;
    color:var(--muted);
    line-height:1.65;
    margin-top:12px;
}

.location-layout{
    display:grid;
    grid-template-columns:minmax(0,1.65fr) minmax(330px,.72fr);
    gap:22px;
    align-items:stretch;
}

.location-map{
    min-height:540px;
    overflow:hidden;
    border-radius:28px;
    border:1px solid var(--line);
    background:#e9eef5;
    box-shadow:0 24px 65px rgba(0,64,125,.12);
}

.location-map iframe{
    width:100%;
    height:100%;
    min-height:540px;
    border:0;
    display:block;
}

.location-card{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:34px;
    border-radius:28px;
    color:#fff;
    background:
        radial-gradient(circle at 90% 8%,rgba(255,210,31,.18),transparent 20%),
        linear-gradient(145deg,#06182e,#004d94 62%,#0ba6d0);
    box-shadow:0 24px 65px rgba(0,64,125,.18);
}

body.modo-mayorista .location-card{
    background:
        radial-gradient(circle at 90% 8%,rgba(255,255,255,.16),transparent 20%),
        linear-gradient(145deg,#4b3300,#a06a00 62%,#e6a900);
}

.location-brand{
    width:94px;
    height:94px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    border-radius:22px;
    padding:7px;
    margin-bottom:20px;
    box-shadow:0 14px 34px rgba(0,0,0,.18);
}

.location-brand img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.location-eyebrow{
    color:var(--brand-yellow,#ffd21f);
    font-size:10px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:1.8px;
}

.location-card h3{
    margin:7px 0 24px;
    font-size:38px;
    letter-spacing:-1.8px;
}

.location-detail{
    display:grid;
    grid-template-columns:46px 1fr;
    gap:12px;
    align-items:start;
    margin-bottom:12px;
    padding:14px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:15px;
    background:rgba(255,255,255,.07);
}

.location-icon{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    color:#072343;
    background:linear-gradient(135deg,#ffe66c,#ffd21f);
    font-weight:900;
}

.location-detail div:last-child{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.location-detail small{
    color:rgba(255,255,255,.62);
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.8px;
}

.location-detail strong{
    color:#fff;
    font-size:13px;
    line-height:1.5;
}

.location-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:10px;
}

/* WhatsApp real */
.whatsapp-float{
    position:fixed;
    right:20px;
    bottom:20px;
    z-index:500;
    min-height:58px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 18px 8px 9px;
    border-radius:999px;
    background:#ffffff;
    color:#0b8f42;
    font-size:13px;
    font-weight:900;
    box-shadow:0 16px 45px rgba(0,0,0,.18);
    border:1px solid rgba(0,0,0,.05);
    transition:.22s ease;
}

.whatsapp-float:hover{
    transform:translateY(-4px) scale(1.02);
    box-shadow:0 22px 50px rgba(0,0,0,.22);
}

.whatsapp-float img{
    width:42px;
    height:42px;
    object-fit:contain;
}

/* Footer premium */
.site-footer{
    position:relative;
    overflow:hidden;
    display:block;
    padding:0;
    color:#fff;
    background:
        radial-gradient(circle at 8% 0%,rgba(47,201,244,.16),transparent 25%),
        radial-gradient(circle at 95% 100%,rgba(255,210,31,.10),transparent 28%),
        linear-gradient(135deg,#03101f,#072d50 55%,#034f85);
}

body.modo-mayorista .site-footer{
    background:
        radial-gradient(circle at 8% 0%,rgba(255,210,31,.16),transparent 25%),
        radial-gradient(circle at 95% 100%,rgba(255,255,255,.08),transparent 28%),
        linear-gradient(135deg,#281d04,#5a3b00 55%,#936100);
}

.footer-top{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1.15fr;
    gap:44px;
    padding:62px clamp(20px,5vw,76px) 44px;
}

.footer-main-brand img{
    width:132px;
    max-height:100px;
    object-fit:contain;
    padding:8px;
    border-radius:20px;
    background:#fff;
    margin-bottom:17px;
}

.footer-main-brand p{
    max-width:430px;
    margin:0;
    color:rgba(255,255,255,.68);
    line-height:1.7;
    font-size:13px;
}

.footer-contact-pills{
    display:flex;
    gap:9px;
    flex-wrap:wrap;
    margin-top:20px;
}

.footer-contact-pills a{
    padding:9px 13px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.07);
    color:#fff;
    font-size:11px;
    font-weight:800;
}

.footer-column{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:11px;
}

.footer-column>span{
    margin-bottom:7px;
    color:#fff;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:1px;
}

.footer-column a,
.footer-column p{
    color:rgba(255,255,255,.62);
    font-size:12px;
    line-height:1.6;
    transition:.18s ease;
}

.footer-column a:hover{
    color:#fff;
    transform:translateX(3px);
}

.footer-visit p{
    margin:0;
}

.footer-map-link{
    color:#ffe36d !important;
    font-weight:800;
}

.footer-bottom{
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:18px clamp(20px,5vw,76px);
    border-top:1px solid rgba(255,255,255,.10);
    color:rgba(255,255,255,.48);
    font-size:10px;
}

@media (max-width:980px){
    .location-layout{
        grid-template-columns:1fr;
    }
    .location-map,
    .location-map iframe{
        min-height:430px;
    }
    .footer-top{
        grid-template-columns:1.5fr 1fr 1fr;
    }
    .footer-visit{
        grid-column:1/-1;
    }
}

@media (max-width:650px){
    .store-section{
        padding-top:54px;
        padding-bottom:54px;
    }
    .location-map,
    .location-map iframe{
        min-height:350px;
        border-radius:20px;
    }
    .location-card{
        padding:23px 18px;
        border-radius:22px;
    }
    .location-card h3{
        font-size:31px;
    }
    .location-actions{
        grid-template-columns:1fr;
    }
    .whatsapp-float{
        right:13px;
        bottom:13px;
        width:58px;
        height:58px;
        padding:8px;
        justify-content:center;
    }
    .whatsapp-float span{
        display:none;
    }
    .whatsapp-float img{
        width:42px;
        height:42px;
    }
    .footer-top{
        grid-template-columns:1fr 1fr;
        gap:30px 20px;
        padding:48px 20px 34px;
    }
    .footer-main-brand{
        grid-column:1/-1;
    }
    .footer-visit{
        grid-column:1/-1;
    }
    .footer-bottom{
        flex-direction:column;
        padding:18px 20px;
    }
}


/* =========================================================
   V7 — WHATSAPP SOLO LOGO + SLIDER LIMPIO
========================================================= */

/* Eliminar definitivamente el texto MAYORISTA decorativo del fondo */
.hero::before,
body.modo-mayorista .hero::before{
    content:none !important;
    display:none !important;
}

/* Mantener el logo flotante decorativo del hero */
.hero-brand-orbit{
    display:block !important;
}

/* WhatsApp flotante: solamente el logo */
.whatsapp-float{
    width:62px !important;
    height:62px !important;
    min-width:62px !important;
    min-height:62px !important;
    padding:10px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:50% !important;
    background:#ffffff !important;
    box-shadow:
        0 16px 42px rgba(37,211,102,.32),
        0 0 0 3px rgba(37,211,102,.12) !important;
}

.whatsapp-float img{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
}

.whatsapp-float span{
    display:none !important;
}

.whatsapp-float:hover{
    transform:translateY(-4px) scale(1.06) !important;
    box-shadow:
        0 20px 48px rgba(37,211,102,.42),
        0 0 0 5px rgba(37,211,102,.12) !important;
}

body.modo-mayorista .whatsapp-float{
    background:#fff !important;
    box-shadow:
        0 16px 42px rgba(37,211,102,.30),
        0 0 0 4px rgba(245,180,0,.14) !important;
}

@media (max-width:760px){
    .whatsapp-float{
        width:56px !important;
        height:56px !important;
        min-width:56px !important;
        min-height:56px !important;
        right:14px !important;
        bottom:14px !important;
        padding:9px !important;
    }
}


/* =========================================================
   V8 — LOGO DEFINITIVO + WHATSAPP CTA ANIMADO
========================================================= */

.brand-logo img{
    width:132px !important;
    height:68px !important;
    object-fit:contain !important;
    filter:drop-shadow(0 8px 15px rgba(0,50,130,.16));
}

.hero-brand-orbit{
    display:block !important;
    opacity:.14 !important;
}

.hero-brand-orbit img{
    object-fit:contain;
    filter:drop-shadow(0 28px 40px rgba(0,0,0,.20));
}

.footer-brand img{
    width:145px !important;
    max-height:150px;
    object-fit:contain !important;
}

.store-logo-box{
    width:118px !important;
    height:118px !important;
    padding:9px !important;
}

.store-logo-box img,
.checkout-header .brand-logo img{
    object-fit:contain !important;
}

.checkout-header .brand-logo img{
    width:118px !important;
    height:64px !important;
}

/* Mantener slider limpio: sin texto MAYORISTA de fondo */
.hero::before,
body.modo-mayorista .hero::before{
    content:none !important;
    display:none !important;
}

/* WhatsApp flotante solo logo + llamada a la acción mediante animación */
.whatsapp-float{
    position:fixed;
    right:22px;
    bottom:22px;
    z-index:500;
    width:66px !important;
    height:66px !important;
    min-width:66px !important;
    min-height:66px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:11px !important;
    border-radius:50% !important;
    background:#fff !important;
    box-shadow:
        0 18px 44px rgba(37,211,102,.34),
        0 0 0 4px rgba(37,211,102,.10) !important;
    overflow:visible !important;
    isolation:isolate;
    animation:waFloat 3.2s ease-in-out infinite;
}

.whatsapp-float img{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    position:relative;
    z-index:3;
    transition:transform .2s ease;
}

.whatsapp-pulse{
    position:absolute;
    inset:-7px;
    border-radius:50%;
    border:2px solid rgba(37,211,102,.58);
    z-index:1;
    animation:waPulse 2s ease-out infinite;
}

.whatsapp-float::before{
    content:"";
    position:absolute;
    inset:4px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(37,211,102,.18),transparent 66%);
    z-index:0;
    animation:waGlow 2.4s ease-in-out infinite;
}

.whatsapp-float::after{
    content:"¿Necesitas ayuda?";
    position:absolute;
    right:76px;
    top:50%;
    transform:translateY(-50%) translateX(8px);
    white-space:nowrap;
    padding:9px 13px;
    border-radius:12px;
    background:#101828;
    color:#fff;
    font-size:12px;
    font-weight:800;
    opacity:0;
    pointer-events:none;
    transition:.22s ease;
    box-shadow:0 10px 28px rgba(0,0,0,.16);
}

.whatsapp-float:hover::after{
    opacity:1;
    transform:translateY(-50%) translateX(0);
}

.whatsapp-float:hover{
    animation-play-state:paused;
    transform:translateY(-4px) scale(1.05) !important;
    box-shadow:
        0 22px 54px rgba(37,211,102,.44),
        0 0 0 6px rgba(37,211,102,.12) !important;
}

.whatsapp-float:hover img{
    transform:scale(1.08) rotate(-4deg);
}

@keyframes waPulse{
    0%{transform:scale(.86);opacity:.85}
    75%,100%{transform:scale(1.34);opacity:0}
}

@keyframes waGlow{
    0%,100%{opacity:.55;transform:scale(.96)}
    50%{opacity:1;transform:scale(1.08)}
}

@keyframes waFloat{
    0%,100%{transform:translateY(0)}
    45%{transform:translateY(-4px)}
    55%{transform:translateY(-4px) rotate(-2deg)}
    65%{transform:translateY(0) rotate(0)}
}

body.modo-mayorista .whatsapp-float{
    background:#fff !important;
    box-shadow:
        0 18px 44px rgba(37,211,102,.30),
        0 0 0 4px rgba(245,180,0,.15) !important;
}

@media (max-width:760px){
    .brand-logo img{
        width:105px !important;
        height:55px !important;
    }

    .whatsapp-float{
        right:14px;
        bottom:14px;
        width:58px !important;
        height:58px !important;
        min-width:58px !important;
        min-height:58px !important;
        padding:9px !important;
    }

    .whatsapp-float::after{
        display:none;
    }

    .whatsapp-pulse{
        inset:-6px;
    }
}

@media (prefers-reduced-motion: reduce){
    .whatsapp-float,
    .whatsapp-pulse,
    .whatsapp-float::before{
        animation:none !important;
    }
}


/* =========================================================
   V10 — SLIDER PRINCIPAL CON FOTO REAL DEL LOCAL
========================================================= */

.hero-slide{
    background-size: cover !important;
    background-position: center center !important;
}

.hero-slide-featured{
    background-position: center center !important;
}

.hero-content{
    max-width: 760px;
}

.hero-cta-group{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:26px;
}

.btn-secondary-hero{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:46px;
    padding:0 20px;
    border-radius:13px;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.26);
    color:#fff;
    font-weight:800;
    backdrop-filter: blur(10px);
    transition:transform .18s ease, background .18s ease, border-color .18s ease;
}

.btn-secondary-hero:hover{
    transform:translateY(-2px);
    background:rgba(255,255,255,.16);
    border-color:rgba(255,255,255,.40);
}

body.modo-mayorista .btn-secondary-hero{
    background:rgba(40,24,0,.20);
    border-color:rgba(255,245,180,.35);
    color:#fff9d8;
}

.hero-slide::before{
    content:"";
    position:absolute;
    inset:0;
    background: radial-gradient(circle at 80% 20%, rgba(255,255,255,.10), transparent 18%);
    pointer-events:none;
}

@media (max-width:860px){
    .hero-slide-featured{
        background-position: 58% center !important;
    }

    .hero-cta-group{
        gap:10px;
    }

    .btn-secondary-hero{
        width:100%;
    }
}

@media (max-width:640px){
    .hero-slide-featured{
        background-position: 60% center !important;
    }

    .hero-content{
        width:min(92%, 92%) !important;
    }

    .hero-content h1{
        max-width: 100%;
    }
}


/* =========================================================
   V10.1 — FIX SLIDER PRINCIPAL
   La foto ahora es un <img> real, no un background-image.
========================================================= */

.hero-slide-featured{
    position:absolute;
    inset:0;
    overflow:hidden;
    background:#071426 !important;
}

.hero-bg-image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    z-index:0;
    display:block;
}

.hero-photo-overlay{
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:
        linear-gradient(
            90deg,
            rgba(4,15,35,.86) 0%,
            rgba(4,15,35,.68) 30%,
            rgba(4,15,35,.32) 58%,
            rgba(4,15,35,.10) 100%
        );
}

.hero-slide-featured .hero-content{
    position:relative;
    z-index:4;
}

.hero-slide-featured::before,
.hero-slide-featured::after{
    pointer-events:none;
}

@media (max-width:860px){
    .hero-bg-image{
        object-position:58% center;
    }

    .hero-photo-overlay{
        background:
            linear-gradient(
                90deg,
                rgba(4,15,35,.88) 0%,
                rgba(4,15,35,.70) 55%,
                rgba(4,15,35,.30) 100%
            );
    }
}

@media (max-width:640px){
    .hero-bg-image{
        object-position:62% center;
    }

    .hero-photo-overlay{
        background:
            linear-gradient(
                180deg,
                rgba(4,15,35,.36) 0%,
                rgba(4,15,35,.74) 52%,
                rgba(4,15,35,.92) 100%
            );
    }

    .hero-slide-featured .hero-content{
        align-self:flex-end;
        padding-bottom:84px;
    }
}


/* =========================================================
   V10.2 — SLIDER LIMPIO SOLO FOTO
   Se elimina logo flotante, textos, botones y mensajes del slider.
========================================================= */

.hero.hero-clean{
    position:relative;
    min-height:560px !important;
    height:clamp(420px, 58vw, 720px);
    overflow:hidden;
    background:#071426 !important;
}

.hero-clean .hero-brand-orbit,
.hero-clean .hero-content,
.hero-clean .hero-dots{
    display:none !important;
}

.hero-slide-photo-only{
    position:absolute !important;
    inset:0 !important;
    overflow:hidden;
    background:#071426 !important;
}

.hero-slide-photo-only::before,
.hero-slide-photo-only::after{
    content:none !important;
    display:none !important;
}

.hero-slide-photo-only .hero-bg-image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    display:block;
}

@media (max-width:860px){
    .hero.hero-clean{
        min-height:420px !important;
        height:58vw;
    }

    .hero-slide-photo-only .hero-bg-image{
        object-position:58% center;
    }
}

@media (max-width:640px){
    .hero.hero-clean{
        min-height:300px !important;
        height:68vw;
    }

    .hero-slide-photo-only .hero-bg-image{
        object-position:60% center;
    }
}


/* =========================================================
   V10.3 — HERO 100% LIMPIO
   SOLO FOTO. SIN LOGOS, TEXTOS, OVERLAYS NI BANNERS.
========================================================= */

.hero.hero-photo-only{
    position:relative !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    display:block !important;
    overflow:hidden !important;
    padding:0 !important;
    margin:0 !important;
    background:#fff !important;
}

/* Desactivar cualquier decoración heredada del hero */
.hero.hero-photo-only::before,
.hero.hero-photo-only::after{
    content:none !important;
    display:none !important;
    background:none !important;
}

.hero-photo-only .hero-brand-orbit,
.hero-photo-only .hero-content,
.hero-photo-only .hero-dots,
.hero-photo-only .hero-slide,
.hero-photo-only .hero-photo-overlay,
.hero-photo-only .eyebrow,
.hero-photo-only h1,
.hero-photo-only p,
.hero-photo-only .btn{
    display:none !important;
}

.hero-only-image{
    position:relative !important;
    inset:auto !important;
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-width:100% !important;
    object-fit:contain !important;
    object-position:center center !important;
    opacity:1 !important;
    visibility:visible !important;
    transform:none !important;
    filter:none !important;
    z-index:1 !important;
}

/* Muy importante: neutraliza el texto decorativo MAYORISTA viejo */
body.modo-mayorista .hero.hero-photo-only::before,
body.modo-mayorista .hero.hero-photo-only::after{
    content:none !important;
    display:none !important;
}

/* En celular se mantiene la foto completa, sin recortes raros */
@media (max-width:760px){
    .hero.hero-photo-only{
        min-height:0 !important;
        height:auto !important;
    }

    .hero-only-image{
        width:100% !important;
        height:auto !important;
        object-fit:contain !important;
        object-position:center !important;
    }
}


/* =========================================================
   V10.4 — FOTO FIJA + TEXTOS ROTATIVOS ENCIMA
   Sin logo gigante ni texto decorativo de fondo.
========================================================= */

.hero.hero-overlay-slider{
    position:relative !important;
    min-height:590px !important;
    height:clamp(520px, 48vw, 720px) !important;
    overflow:hidden !important;
    background:#071426 !important;
}

/* Foto fija de fondo */
.hero-static-image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center center;
    z-index:0;
}

/* Solo una capa para dar lectura al texto */
.hero-readable-overlay{
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:
        linear-gradient(
            90deg,
            rgba(4,15,35,.79) 0%,
            rgba(4,15,35,.58) 34%,
            rgba(4,15,35,.20) 62%,
            rgba(4,15,35,.04) 100%
        );
}

/* Neutralizar cualquier fondo decorativo viejo */
.hero-overlay-slider::before,
.hero-overlay-slider::after,
body.modo-mayorista .hero-overlay-slider::before,
body.modo-mayorista .hero-overlay-slider::after{
    content:none !important;
    display:none !important;
}

.hero-overlay-slider .hero-brand-orbit{
    display:none !important;
}

/* Slides: solo contienen el texto */
.hero-overlay-slider .hero-slide{
    position:absolute !important;
    inset:0 !important;
    z-index:2 !important;
    display:flex !important;
    align-items:center !important;
    background:none !important;
    background-image:none !important;
    opacity:0;
    pointer-events:none;
    transform:translateY(14px);
    transition:opacity .65s ease, transform .65s ease;
}

.hero-overlay-slider .hero-slide.active{
    opacity:1 !important;
    pointer-events:auto;
    transform:translateY(0);
}

.hero-overlay-slider .hero-slide::before,
.hero-overlay-slider .hero-slide::after{
    content:none !important;
    display:none !important;
}

.hero-overlay-slider .hero-content{
    position:relative;
    z-index:3;
    width:min(720px, 88%);
    margin-left:clamp(22px,7vw,110px);
    color:#fff;
}

.hero-overlay-slider .hero-content h1{
    margin:14px 0;
    max-width:720px;
    font-size:clamp(46px,6vw,82px) !important;
    line-height:.98;
    letter-spacing:-3px !important;
    color:#fff;
    text-shadow:0 14px 36px rgba(0,0,0,.22);
}

.hero-overlay-slider .hero-content p{
    max-width:590px;
    margin:0 0 26px;
    font-size:17px;
    line-height:1.7;
    color:rgba(255,255,255,.82);
}

.hero-overlay-slider .eyebrow{
    color:#ffd21f;
}

.hero-overlay-slider .hero-dots{
    display:flex !important;
    position:absolute;
    left:clamp(22px,7vw,110px);
    bottom:34px;
    z-index:6;
}

/* Asegurar que nunca aparezca "VENTA MAYORISTA" decorativo */
body.modo-mayorista .hero-overlay-slider{
    --brand:#f5b400;
}

body.modo-mayorista .hero-overlay-slider .hero-readable-overlay{
    background:
        linear-gradient(
            90deg,
            rgba(38,27,2,.75) 0%,
            rgba(60,42,3,.50) 34%,
            rgba(60,42,3,.15) 62%,
            rgba(60,42,3,.02) 100%
        );
}

@media (max-width:860px){
    .hero.hero-overlay-slider{
        min-height:520px !important;
        height:620px !important;
    }

    .hero-static-image{
        object-position:58% center;
    }

    .hero-readable-overlay{
        background:
            linear-gradient(
                90deg,
                rgba(4,15,35,.86) 0%,
                rgba(4,15,35,.62) 58%,
                rgba(4,15,35,.20) 100%
            );
    }
}

@media (max-width:640px){
    .hero.hero-overlay-slider{
        min-height:540px !important;
        height:540px !important;
    }

    .hero-static-image{
        object-position:60% center;
    }

    .hero-readable-overlay{
        background:
            linear-gradient(
                180deg,
                rgba(4,15,35,.22) 0%,
                rgba(4,15,35,.58) 42%,
                rgba(4,15,35,.91) 100%
            );
    }

    .hero-overlay-slider .hero-slide{
        align-items:flex-end !important;
    }

    .hero-overlay-slider .hero-content{
        width:calc(100% - 28px);
        margin:0 14px;
        padding-bottom:78px;
    }

    .hero-overlay-slider .hero-content h1{
        font-size:42px !important;
        letter-spacing:-2px !important;
    }

    .hero-overlay-slider .hero-content p{
        font-size:14px;
    }

    .hero-overlay-slider .hero-dots{
        left:14px;
        bottom:24px;
    }

    .hero-cta-group{
        flex-direction:column;
    }

    .hero-cta-group .btn,
    .hero-cta-group .btn-secondary-hero{
        width:100%;
    }
}


/* =========================================================
   V11 — STOCK DESDE CONTASIMP
========================================================= */

.stock-status{
    min-height:28px;
    display:flex;
    align-items:center;
    gap:7px;
    margin:8px 0 10px;
    font-size:11px;
    font-weight:800;
}

.stock-status.in-stock{
    color:#0b8f62;
}

.stock-status.out-stock{
    color:#b42318;
}

.stock-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#12b76a;
    box-shadow:0 0 0 4px rgba(18,183,106,.10);
}

.product-card .add-cart:disabled{
    cursor:not-allowed;
    opacity:.48;
    transform:none !important;
    box-shadow:none !important;
}

.qty-controls button:disabled{
    opacity:.35;
    cursor:not-allowed;
}


/* =========================================================
   V11.7 — COMPRA SIMPLE / ONE PAGE
========================================================= */

body.simple-shop{
    background:#f5f7fa !important;
    color:#10233d;
}

body.simple-shop .topbar,
body.simple-shop .site-header,
body.simple-shop .category-nav,
body.simple-shop .hero,
body.simple-shop .offers-section,
body.simple-shop .wholesale-banner,
body.simple-shop .store-section,
body.simple-shop .site-footer{
    display:none !important;
}

.simple-topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    min-height:36px;
    padding:7px clamp(14px,4vw,54px);
    background:#07182b;
    color:#dbe7f4;
    font-size:12px;
}

.simple-topbar a{
    color:#fff;
    font-weight:800;
}

.simple-header{
    position:sticky;
    top:0;
    z-index:100;
    display:grid;
    grid-template-columns:auto minmax(240px,1fr) auto auto;
    align-items:center;
    gap:14px;
    padding:12px clamp(14px,4vw,54px);
    background:rgba(255,255,255,.96);
    border-bottom:1px solid #e4eaf1;
    backdrop-filter:blur(14px);
}

.simple-logo{
    width:82px;
    height:58px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.simple-logo img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.simple-search{
    position:relative;
    min-width:0;
}

.simple-search input{
    width:100%;
    height:50px;
    padding:0 48px;
    border:2px solid #dce5ef;
    border-radius:16px;
    background:#fff;
    color:#10233d;
    font-size:15px;
    outline:none;
    transition:.18s ease;
}

.simple-search input:focus{
    border-color:#1673c8;
    box-shadow:0 0 0 4px rgba(22,115,200,.10);
}

.search-icon{
    position:absolute;
    left:17px;
    top:50%;
    transform:translateY(-50%);
    color:#66788d;
    font-size:22px;
}

#clearSearch{
    position:absolute;
    right:9px;
    top:50%;
    transform:translateY(-50%);
    width:34px;
    height:34px;
    border:0;
    border-radius:10px;
    background:#edf2f7;
    color:#40546c;
    font-size:20px;
    cursor:pointer;
}

.simple-mode{
    display:flex;
    padding:4px;
    background:#eef3f8;
    border-radius:14px;
}

.simple-mode .mode-btn{
    min-height:42px;
    padding:0 15px;
    border:0;
    border-radius:11px;
    background:transparent;
    color:#526477;
    font-weight:800;
    cursor:pointer;
}

.simple-mode .mode-btn.active{
    background:#075aa9;
    color:#fff;
    box-shadow:0 7px 18px rgba(7,90,169,.20);
}

body.modo-mayorista .simple-mode .mode-btn.active{
    background:#d89b00;
    color:#271b00;
}

.simple-cart{
    min-height:48px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:0 15px;
    border:0;
    border-radius:14px;
    background:#10233d;
    color:#fff;
    font-weight:900;
    cursor:pointer;
}

.simple-cart b{
    min-width:24px;
    height:24px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:#fff;
    color:#10233d;
    font-size:11px;
}

.simple-main{
    width:min(1500px,calc(100% - 28px));
    margin:0 auto;
}

.simple-intro{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    margin:22px 0 14px;
    padding:25px 28px;
    border:1px solid #e0e7ef;
    border-radius:22px;
    background:#fff;
}

.simple-intro h1{
    margin:5px 0 6px;
    font-size:clamp(27px,3vw,42px);
    line-height:1.05;
    letter-spacing:-1.5px;
}

.simple-intro p{
    margin:0;
    color:#65758a;
}

.simple-whatsapp{
    flex-shrink:0;
    display:inline-flex;
    min-height:46px;
    align-items:center;
    justify-content:center;
    padding:0 18px;
    border-radius:13px;
    background:#18b966;
    color:#fff;
    font-weight:900;
}

.simple-categories{
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding:8px 0 14px;
    scrollbar-width:none;
}

.simple-categories::-webkit-scrollbar{
    display:none;
}

.category-chip{
    flex:0 0 auto;
    min-height:42px;
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:0 14px;
    border:1px solid #dce5ef;
    border-radius:999px;
    background:#fff;
    color:#324861;
    font-weight:800;
    cursor:pointer;
}

.category-chip span{
    min-width:23px;
    height:23px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:#eff4f9;
    color:#708096;
    font-size:10px;
}

.category-chip.active{
    border-color:#075aa9;
    background:#075aa9;
    color:#fff;
}

.category-chip.active span{
    background:rgba(255,255,255,.18);
    color:#fff;
}

body.modo-mayorista .category-chip.active{
    border-color:#d89b00;
    background:#d89b00;
    color:#2c1d00;
}

.simple-products{
    padding:18px 0 34px;
}

.simple-products-head{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:20px;
    margin-bottom:16px;
}

.simple-products-head h2{
    margin:0 0 3px;
    font-size:25px;
    letter-spacing:-.8px;
}

.simple-products-head p{
    margin:0;
    color:#718096;
    font-size:13px;
}

.reset-filters{
    min-height:40px;
    padding:0 14px;
    border:1px solid #d9e2ec;
    border-radius:11px;
    background:#fff;
    color:#31506e;
    font-weight:800;
    cursor:pointer;
}

.simple-grid.products-grid{
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:14px !important;
}

.shop-card{
    min-width:0;
    display:flex;
    flex-direction:column;
    border:1px solid #e0e7ef !important;
    border-radius:18px !important;
    background:#fff !important;
    box-shadow:none !important;
    overflow:hidden;
    transition:.16s ease;
}

.shop-card:hover{
    transform:translateY(-2px);
    border-color:#bed2e5 !important;
    box-shadow:0 9px 26px rgba(16,35,61,.08) !important;
}

.shop-image{
    position:relative;
    aspect-ratio:1/1;
    padding:16px !important;
    background:#fff !important;
}

.shop-image img{
    width:100%;
    height:100%;
    object-fit:contain !important;
    transition:transform .18s ease;
}

.shop-card:hover .shop-image img{
    transform:scale(1.025);
}

.shop-card .wholesale-badge{
    top:10px !important;
    right:10px !important;
    left:auto !important;
    padding:5px 8px !important;
    font-size:9px !important;
    background:#fff4cb !important;
    color:#805c00 !important;
    border:1px solid #efd884;
    box-shadow:none !important;
}

.shop-body{
    flex:1;
    display:flex;
    flex-direction:column;
    padding:14px !important;
    border-top:1px solid #f0f3f7;
}

.shop-category{
    color:#7a899b !important;
    font-size:10px !important;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.45px;
}

.shop-body h3{
    min-height:42px !important;
    margin:5px 0 3px !important;
    font-size:14px !important;
    line-height:1.4 !important;
    letter-spacing:-.2px;
}

.shop-sku{
    color:#99a5b2;
    font-size:10px;
}

.shop-price-row{
    display:flex;
    align-items:baseline;
    gap:7px;
    margin:12px 0 8px;
}

.shop-price-row .price-value{
    color:#10233d;
    font-size:22px !important;
    font-weight:950;
}

body.modo-mayorista .shop-price-row .price-value{
    color:#9a6700;
}

.price-old{
    color:#98a3af;
    font-size:11px;
}

.quantity-details{
    margin:0 0 12px;
}

.quantity-details summary{
    list-style:none;
    cursor:pointer;
    color:#075aa9;
    font-size:11px;
    font-weight:850;
}

.quantity-details summary::-webkit-details-marker{
    display:none;
}

.quantity-details summary::after{
    content:" +";
}

.quantity-details[open] summary::after{
    content:" −";
}

.quantity-details .quantity-price-list{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    margin-top:8px;
}

.quantity-details .quantity-price-chip{
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:5px 7px;
    border:1px solid #dbe6f1;
    border-radius:9px;
    background:#f7faff;
    color:#35506e;
    font-size:9px;
    font-weight:750;
}

.simple-wholesale-price{
    margin-bottom:10px;
    color:#6b7788;
    font-size:10px;
}

.simple-wholesale-price strong{
    color:#976600;
}

.shop-add{
    width:100%;
    min-height:43px !important;
    margin-top:auto;
    border-radius:11px !important;
    font-size:12px !important;
    font-weight:900 !important;
}

body.modo-mayorista .shop-add{
    background:#d89b00 !important;
    color:#241800 !important;
}

.products-grid.loading{
    opacity:.5;
    pointer-events:none;
}

.simple-empty{
    grid-column:1/-1;
    min-height:220px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    background:#fff;
    border:1px dashed #cfd9e5;
    border-radius:18px;
    color:#748397;
}

.simple-empty strong{
    color:#30465f;
}

.simple-store{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
    margin:8px 0 36px;
    padding:24px 26px;
    border-radius:20px;
    background:#10233d;
    color:#fff;
}

.simple-store h2{
    margin:5px 0;
    font-size:22px;
}

.simple-store p{
    margin:0;
    color:#c7d3df;
}

.simple-store-actions{
    display:flex;
    gap:9px;
    flex-wrap:wrap;
}

.simple-store-actions a{
    min-height:42px;
    display:inline-flex;
    align-items:center;
    padding:0 14px;
    border-radius:11px;
    background:#fff;
    color:#10233d;
    font-size:12px;
    font-weight:900;
}

.simple-footer{
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:18px clamp(14px,4vw,54px);
    background:#fff;
    border-top:1px solid #e4eaf1;
    color:#68798d;
    font-size:12px;
}

.simple-footer strong{
    color:#10233d;
}

.simple-whatsapp-float{
    width:54px !important;
    height:54px !important;
    right:16px !important;
    bottom:16px !important;
    padding:9px !important;
    background:#fff !important;
    border-radius:50% !important;
}

.simple-whatsapp-float::before,
.simple-whatsapp-float::after,
.simple-whatsapp-float .whatsapp-pulse{
    display:none !important;
}

@media(max-width:1200px){
    .simple-grid.products-grid{
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    }
}

@media(max-width:900px){
    .simple-header{
        grid-template-columns:auto 1fr auto;
    }

    .simple-mode{
        grid-column:1/-1;
        justify-self:start;
    }

    .simple-grid.products-grid{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    }
}

@media(max-width:680px){
    .simple-topbar{
        display:none;
    }

    .simple-header{
        grid-template-columns:auto 1fr auto;
        gap:8px;
        padding:8px 10px 10px;
    }

    .simple-logo{
        width:54px;
        height:44px;
    }

    .simple-search input{
        height:44px;
        padding-left:39px;
        font-size:13px;
    }

    .search-icon{
        left:13px;
        font-size:18px;
    }

    .simple-cart{
        min-width:45px;
        width:45px;
        height:44px;
        padding:0;
        font-size:0;
    }

    .simple-cart > span{
        font-size:18px;
    }

    .simple-cart b{
        position:absolute;
        margin:-29px 0 0 29px;
    }

    .simple-mode{
        width:100%;
        grid-column:1/-1;
        display:grid;
        grid-template-columns:1fr 1fr;
    }

    .simple-intro{
        margin-top:12px;
        padding:18px;
        align-items:flex-start;
        flex-direction:column;
    }

    .simple-intro h1{
        font-size:28px;
    }

    .simple-whatsapp{
        min-height:40px;
        padding:0 13px;
        font-size:11px;
    }

    .simple-main{
        width:calc(100% - 20px);
    }

    .simple-categories{
        margin-inline:-2px;
    }

    .simple-grid.products-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:9px !important;
    }

    .shop-image{
        padding:10px !important;
    }

    .shop-body{
        padding:10px !important;
    }

    .shop-body h3{
        min-height:39px !important;
        font-size:12px !important;
    }

    .shop-price-row .price-value{
        font-size:18px !important;
    }

    .quantity-details summary{
        font-size:10px;
    }

    .shop-add{
        min-height:39px !important;
        padding:0 8px !important;
        font-size:10px !important;
    }

    .simple-products-head{
        align-items:flex-start;
    }

    .simple-products-head h2{
        font-size:21px;
    }

    .simple-store{
        align-items:flex-start;
        flex-direction:column;
        padding:19px;
    }

    .simple-footer{
        flex-direction:column;
        gap:4px;
    }
}


/* =========================================================
   V11.9 — PREMIUM + COMPRA DIRECTA
========================================================= */

.premium-shop-main{
    width:min(1500px,calc(100% - 28px));
    margin:0 auto;
}

/* Hero */
.premium-shop-hero{
    position:relative !important;
    width:100%;
    height:clamp(520px,46vw,680px);
    min-height:520px !important;
    overflow:hidden;
    background:#071426 !important;
}

.premium-shop-hero .hero-static-image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    z-index:0;
}

.premium-shop-hero .hero-readable-overlay{
    position:absolute;
    inset:0;
    z-index:1;
    background:linear-gradient(90deg,rgba(3,15,34,.84),rgba(3,15,34,.58) 36%,rgba(3,15,34,.14) 72%,rgba(3,15,34,.02));
}

.premium-shop-hero::before,
.premium-shop-hero::after{
    content:none !important;
    display:none !important;
}

.premium-shop-hero .hero-slide{
    position:absolute !important;
    inset:0;
    z-index:2;
    display:flex !important;
    align-items:center;
    background:none !important;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(14px);
    transition:.55s ease;
}

.premium-shop-hero .hero-slide.active{
    opacity:1 !important;
    visibility:visible;
    pointer-events:auto;
    transform:none;
}

.premium-shop-hero .hero-slide::before,
.premium-shop-hero .hero-slide::after{
    content:none !important;
    display:none !important;
}

.premium-shop-hero .hero-content{
    width:min(760px,86%);
    margin-left:clamp(22px,7vw,110px);
    position:relative;
    z-index:3;
}

.premium-shop-hero .eyebrow{
    color:#ffd21f;
    font-size:11px;
    font-weight:950;
    letter-spacing:1.1px;
}

.premium-shop-hero .hero-content h1{
    max-width:720px;
    margin:12px 0 14px;
    font-size:clamp(46px,5.8vw,78px) !important;
    line-height:.98;
    letter-spacing:-3px !important;
    color:#fff;
}

.premium-shop-hero .hero-content p{
    max-width:590px;
    margin:0 0 24px;
    color:rgba(255,255,255,.84);
    font-size:16px;
    line-height:1.7;
}

.premium-shop-hero .hero-cta-group{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.premium-shop-hero .btn-secondary-hero{
    min-height:46px;
    display:inline-flex;
    align-items:center;
    padding:0 18px;
    border:1px solid rgba(255,255,255,.28);
    border-radius:12px;
    background:rgba(255,255,255,.10);
    color:#fff;
    font-weight:850;
    backdrop-filter:blur(8px);
}

.premium-shop-hero .hero-dots{
    position:absolute;
    z-index:5;
    left:clamp(22px,7vw,110px);
    bottom:28px;
    display:flex !important;
    gap:8px;
}

.premium-shop-hero .hero-dot{
    width:28px;
    height:5px;
    border:0;
    border-radius:999px;
    background:rgba(255,255,255,.35);
    transition:.2s ease;
    cursor:pointer;
}

.premium-shop-hero .hero-dot.active{
    width:46px;
    background:#fff;
}

/* Generic section */
.premium-section{
    margin-top:34px;
}

.premium-section-head{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:18px;
    margin-bottom:15px;
}

.premium-section-head h2{
    margin:5px 0 0;
    color:#10233d;
    font-size:clamp(23px,2.5vw,34px);
    letter-spacing:-1.1px;
}

.section-count,
.section-link{
    color:#718096;
    font-size:12px;
    font-weight:800;
}

.section-link{
    color:#075aa9;
}

/* Benefits */
.shop-benefits{
    width:calc(100% - 10px) !important;
    margin:-32px auto 16px !important;
    position:relative;
    z-index:10;
}

.shop-benefits .benefit-item{
    min-height:88px;
    padding:15px;
}

/* Categories */
.category-section-home{
    margin-top:28px;
}

.premium-category-row{
    padding:0 0 4px;
}

/* Offer scroll */
.offer-scroll{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(230px,1fr);
    gap:12px;
    overflow-x:auto;
    padding:2px 2px 10px;
    scroll-snap-type:x proximity;
    scrollbar-width:thin;
}

.mini-product-card{
    scroll-snap-align:start;
    display:grid;
    grid-template-columns:105px 1fr;
    min-height:150px;
    border:1px solid #e1e8f0;
    border-radius:18px;
    overflow:hidden;
    background:#fff;
}

.mini-product-image{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:10px;
    background:#fff;
}

.mini-product-image img{
    width:100%;
    height:100%;
    max-height:130px;
    object-fit:contain;
}

.mini-product-info{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:12px 12px 12px 0;
}

.mini-product-info small{
    color:#8a98a8;
    font-size:9px;
    font-weight:850;
    text-transform:uppercase;
}

.mini-product-info > strong{
    margin:4px 0 8px;
    color:#10233d;
    font-size:12px;
    line-height:1.35;
}

.mini-price{
    display:flex;
    align-items:baseline;
    gap:6px;
    margin-bottom:9px;
}

.mini-price b{
    color:#075aa9;
    font-size:17px;
}

.mini-price del{
    color:#9aa5b1;
    font-size:10px;
}

.mini-add{
    align-self:flex-start;
    min-height:34px;
    padding:0 11px;
    border:0;
    border-radius:9px;
    background:#10233d;
    color:#fff;
    font-size:10px;
    font-weight:900;
    cursor:pointer;
}

/* Wholesale visual banner */
.feature-banner-home{
    display:grid;
    grid-template-columns:1.25fr .75fr;
    min-height:310px;
    overflow:hidden;
    border-radius:24px;
    background:linear-gradient(135deg,#091b32,#0d4a8f);
    color:#fff;
}

.feature-banner-copy{
    padding:35px;
}

.feature-banner-copy h2{
    max-width:650px;
    margin:7px 0 12px;
    font-size:clamp(29px,3.4vw,46px);
    line-height:1.05;
    letter-spacing:-1.7px;
}

.feature-banner-copy p{
    max-width:570px;
    color:#c7d7e7;
    line-height:1.7;
}

.feature-pills{
    display:flex;
    gap:7px;
    flex-wrap:wrap;
    margin:18px 0;
}

.feature-pills span{
    padding:7px 10px;
    border:1px solid rgba(255,255,255,.14);
    border-radius:999px;
    background:rgba(255,255,255,.07);
    color:#fff;
    font-size:10px;
    font-weight:850;
}

.feature-banner-side{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    padding:25px;
    background:
        radial-gradient(circle at 60% 40%,rgba(255,211,31,.22),transparent 30%),
        linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
    font-size:clamp(22px,3vw,42px);
}

.feature-banner-side strong:last-child{
    color:#ffd21f;
}

/* Featured */
.featured-strip{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
}

.featured-item{
    display:grid;
    grid-template-columns:82px 1fr;
    align-items:center;
    gap:10px;
    min-height:105px;
    padding:10px;
    border:1px solid #e1e8f0;
    border-radius:16px;
    background:#fff;
}

.featured-item img{
    width:82px;
    height:82px;
    object-fit:contain;
}

.featured-item small{
    display:block;
    color:#8492a3;
    font-size:9px;
    font-weight:800;
    text-transform:uppercase;
}

.featured-item strong{
    display:block;
    margin:4px 0;
    color:#10233d;
    font-size:11px;
    line-height:1.3;
}

.featured-item b{
    color:#075aa9;
    font-size:14px;
}

/* Location */
.simple-location{
    margin-bottom:38px;
}

.simple-location .location-layout{
    display:grid !important;
    grid-template-columns:minmax(0,1.45fr) minmax(320px,.75fr) !important;
    gap:16px !important;
}

.simple-location .location-map{
    min-height:430px;
    overflow:hidden;
    border:1px solid #dde6ef;
    border-radius:22px !important;
}

.simple-location .location-map iframe{
    width:100%;
    height:100%;
    min-height:430px;
    border:0;
    display:block;
}

.simple-location .location-card{
    min-height:430px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:28px !important;
    border-radius:22px !important;
    background:linear-gradient(145deg,#09213e,#0e4a8c) !important;
    color:#fff;
    box-shadow:none !important;
}

.simple-location .location-brand{
    width:86px;
    height:86px;
    padding:7px;
    border-radius:18px;
    background:#fff;
    margin-bottom:13px;
}

.simple-location .location-brand img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.simple-location .location-card h3{
    margin:6px 0 16px;
    font-size:30px;
    color:#fff;
}

.simple-location .location-eyebrow{
    color:#72d6ff;
    font-size:10px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.8px;
}

.simple-location .location-detail{
    display:flex;
    gap:11px;
    padding:13px 0;
    border-top:1px solid rgba(255,255,255,.11);
}

.simple-location .location-icon{
    width:38px;
    height:38px;
    flex:0 0 38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:rgba(255,255,255,.09);
}

.simple-location .location-detail small{
    display:block;
    color:#9eb7cf;
    font-size:9px;
    text-transform:uppercase;
    font-weight:900;
}

.simple-location .location-detail strong,
.simple-location .location-detail a{
    color:#fff;
}

.simple-location .location-actions{
    display:flex;
    gap:8px;
    margin-top:18px;
    flex-wrap:wrap;
}

.simple-location .location-actions .btn{
    flex:1;
}

/* Final CTA */
.final-cta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:35px;
    padding:26px;
    border:1px solid #dce6ef;
    border-radius:21px;
    background:#fff;
}

.final-cta h2{
    margin:4px 0;
    font-size:27px;
    letter-spacing:-1px;
}

.final-cta p{
    margin:0;
    color:#718096;
}

/* Premium footer */
.premium-shop-footer{
    background:#08192d;
    color:#b9c8d7;
    padding:34px clamp(18px,4vw,55px) 18px;
}

.premium-footer-grid{
    width:min(1500px,100%);
    margin:0 auto;
    display:grid;
    grid-template-columns:1.5fr 1fr 1fr 1fr;
    gap:28px;
}

.premium-footer-brand img{
    width:120px;
    max-height:90px;
    object-fit:contain;
    padding:8px;
    border-radius:16px;
    background:#fff;
}

.premium-footer-brand p{
    max-width:420px;
    line-height:1.7;
}

.premium-footer-grid > div:not(.premium-footer-brand){
    display:flex;
    flex-direction:column;
    gap:8px;
}

.premium-footer-grid strong{
    color:#fff;
    margin-bottom:4px;
}

.premium-footer-grid a,
.premium-footer-grid span{
    color:#b9c8d7;
    font-size:12px;
}

.premium-footer-bottom{
    width:min(1500px,100%);
    margin:28px auto 0;
    padding-top:15px;
    border-top:1px solid rgba(255,255,255,.09);
    display:flex;
    justify-content:space-between;
    gap:14px;
    font-size:11px;
}

/* Mode theme */
body.modo-mayorista .feature-banner-home{
    background:linear-gradient(135deg,#3a2904,#9b6a00);
}

body.modo-mayorista .premium-shop-hero .hero-readable-overlay{
    background:linear-gradient(90deg,rgba(38,27,2,.80),rgba(50,35,3,.55) 36%,rgba(50,35,3,.13) 72%,rgba(50,35,3,.02));
}

/* Responsive */
@media(max-width:1100px){
    .featured-strip{
        grid-template-columns:repeat(2,1fr);
    }

    .simple-location .location-layout{
        grid-template-columns:1fr !important;
    }

    .feature-banner-home{
        grid-template-columns:1fr;
    }

    .feature-banner-side{
        min-height:130px;
    }

    .premium-footer-grid{
        grid-template-columns:1.4fr 1fr 1fr;
    }
}

@media(max-width:700px){
    .premium-shop-hero{
        min-height:490px !important;
        height:490px;
    }

    .premium-shop-hero .hero-static-image{
        object-position:60% center;
    }

    .premium-shop-hero .hero-readable-overlay{
        background:linear-gradient(180deg,rgba(3,15,34,.15),rgba(3,15,34,.50) 45%,rgba(3,15,34,.92));
    }

    .premium-shop-hero .hero-slide{
        align-items:flex-end !important;
    }

    .premium-shop-hero .hero-content{
        width:calc(100% - 28px);
        margin:0 14px;
        padding-bottom:68px;
    }

    .premium-shop-hero .hero-content h1{
        font-size:38px !important;
        letter-spacing:-2px !important;
    }

    .premium-shop-hero .hero-content p{
        font-size:13px;
    }

    .premium-shop-hero .hero-dots{
        left:14px;
        bottom:20px;
    }

    .shop-benefits{
        margin:10px auto !important;
        grid-template-columns:repeat(2,1fr) !important;
    }

    .premium-section{
        margin-top:24px;
    }

    .premium-section-head{
        align-items:flex-start;
        flex-direction:column;
        gap:4px;
    }

    .offer-scroll{
        grid-auto-columns:82%;
    }

    .featured-strip{
        grid-template-columns:1fr;
    }

    .feature-banner-copy{
        padding:22px;
    }

    .feature-banner-side{
        font-size:26px;
    }

    .final-cta{
        align-items:flex-start;
        flex-direction:column;
    }

    .premium-footer-grid{
        grid-template-columns:1fr 1fr;
    }

    .premium-footer-brand{
        grid-column:1/-1;
    }

    .premium-footer-bottom{
        flex-direction:column;
    }
}


/* =========================================================
   V11.10 — FIX SLIDER + UBICACIÓN
   Corrige reglas heredadas de V11.7 que ocultaban ambas secciones.
========================================================= */

/* Recuperar slider premium */
body.simple-shop .hero.premium-shop-hero{
    display:block !important;
    position:relative !important;
    width:100% !important;
    min-height:520px !important;
    height:clamp(520px,46vw,680px) !important;
    overflow:hidden !important;
    background:#071426 !important;
}

/* Recuperar ubicación / mapa */
body.simple-shop .store-section.simple-location{
    display:block !important;
}

/* Asegurar que los slides puedan rotar */
body.simple-shop .premium-shop-hero .hero-slide{
    display:flex !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translateY(14px) !important;
}

body.simple-shop .premium-shop-hero .hero-slide.active{
    display:flex !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translateY(0) !important;
}

/* La foto siempre debe quedar visible */
body.simple-shop .premium-shop-hero .hero-static-image{
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
}

/* Puntos del slider */
body.simple-shop .premium-shop-hero .hero-dots{
    display:flex !important;
}

/* Mapa visible */
body.simple-shop .simple-location .location-layout{
    display:grid !important;
}

body.simple-shop .simple-location .location-map,
body.simple-shop .simple-location .location-card{
    display:block !important;
}

body.simple-shop .simple-location .location-map iframe{
    display:block !important;
    width:100% !important;
    min-height:430px !important;
}

/* En modo mayorista tampoco ocultar hero/ubicación */
body.simple-shop.modo-mayorista .hero.premium-shop-hero,
body.simple-shop.modo-mayorista .store-section.simple-location{
    display:block !important;
}

@media(max-width:1100px){
    body.simple-shop .simple-location .location-layout{
        grid-template-columns:1fr !important;
    }
}

@media(max-width:700px){
    body.simple-shop .hero.premium-shop-hero{
        min-height:490px !important;
        height:490px !important;
    }

    body.simple-shop .simple-location .location-map iframe{
        min-height:320px !important;
    }
}


/* =========================================================
   V11.11 — BENEFICIOS PREMIUM
========================================================= */

body.simple-shop .shop-benefits{
    width:min(1450px, calc(100% - 28px)) !important;
    margin:-34px auto 22px !important;
    position:relative !important;
    z-index:20 !important;

    display:grid !important;
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
    gap:12px !important;

    padding:0 !important;
    background:transparent !important;
}

body.simple-shop .shop-benefits .benefit-item{
    min-width:0 !important;
    min-height:96px !important;

    display:flex !important;
    align-items:center !important;
    gap:13px !important;

    padding:16px !important;
    margin:0 !important;

    border:1px solid #dfe7ef !important;
    border-radius:18px !important;
    background:rgba(255,255,255,.97) !important;

    box-shadow:
        0 16px 38px rgba(13, 37, 63, .10) !important;

    color:#10233d !important;
    overflow:hidden !important;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease !important;
}

body.simple-shop .shop-benefits .benefit-item:hover{
    transform:translateY(-3px) !important;
    border-color:#bfd3e7 !important;
    box-shadow:
        0 20px 44px rgba(13, 37, 63, .14) !important;
}

body.simple-shop .shop-benefits .benefit-icon{
    width:48px !important;
    height:48px !important;
    flex:0 0 48px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    margin:0 !important;
    padding:0 !important;

    border-radius:15px !important;
    background:
        linear-gradient(
            145deg,
            #eef7ff,
            #dceeff
        ) !important;

    color:#075aa9 !important;
    font-size:22px !important;
    line-height:1 !important;

    box-shadow:
        inset 0 0 0 1px rgba(7,90,169,.08) !important;
}

body.simple-shop .shop-benefits .benefit-item > div:last-child{
    min-width:0 !important;
    display:flex !important;
    flex-direction:column !important;
    gap:3px !important;
}

body.simple-shop .shop-benefits .benefit-item strong{
    display:block !important;
    margin:0 !important;
    color:#10233d !important;

    font-size:13px !important;
    font-weight:900 !important;
    line-height:1.25 !important;
}

body.simple-shop .shop-benefits .benefit-item small{
    display:block !important;
    margin:0 !important;

    color:#708195 !important;
    font-size:10px !important;
    font-weight:600 !important;
    line-height:1.35 !important;
}

/* Mayorista */
body.simple-shop.modo-mayorista .shop-benefits .benefit-icon{
    background:
        linear-gradient(
            145deg,
            #fff9e7,
            #ffedb5
        ) !important;

    color:#8c6200 !important;

    box-shadow:
        inset 0 0 0 1px rgba(190,130,0,.12) !important;
}

/* Tablet */
@media(max-width:980px){
    body.simple-shop .shop-benefits{
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
        margin:12px auto 18px !important;
    }
}

/* Mobile */
@media(max-width:560px){
    body.simple-shop .shop-benefits{
        width:calc(100% - 20px) !important;
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
        gap:8px !important;
        margin:10px auto 15px !important;
    }

    body.simple-shop .shop-benefits .benefit-item{
        min-height:92px !important;
        align-items:flex-start !important;
        flex-direction:column !important;
        gap:8px !important;
        padding:12px !important;
        border-radius:15px !important;
    }

    body.simple-shop .shop-benefits .benefit-icon{
        width:38px !important;
        height:38px !important;
        flex-basis:38px !important;
        border-radius:11px !important;
        font-size:18px !important;
    }

    body.simple-shop .shop-benefits .benefit-item strong{
        font-size:11px !important;
    }

    body.simple-shop .shop-benefits .benefit-item small{
        font-size:9px !important;
    }
}


/* =========================================================
   V11.12 — SLIDER REAL + OFERTAS + CATEGORÍAS PREMIUM
========================================================= */

/* Hero: cada slide tiene su propia foto */
body.simple-shop .premium-shop-hero{
    display:block !important;
    position:relative !important;
    overflow:hidden !important;
    background:#071426 !important;
}

body.simple-shop .premium-shop-hero .hero-static-image{
    display:none !important;
}

body.simple-shop .premium-shop-hero .hero-slide{
    position:absolute !important;
    inset:0 !important;
    display:flex !important;
    align-items:center !important;
    overflow:hidden !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:scale(1.015) !important;
    transition:
        opacity .75s ease,
        visibility .75s ease,
        transform 1.3s ease !important;
}

body.simple-shop .premium-shop-hero .hero-slide.active{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:scale(1) !important;
}

.hero-slide-image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
    z-index:0;
    transform:scale(1.025);
    transition:transform 7s ease;
}

.hero-slide.active .hero-slide-image{
    transform:scale(1);
}

.premium-shop-hero .hero-readable-overlay{
    position:absolute;
    inset:0;
    z-index:1;
    background:
        linear-gradient(
            90deg,
            rgba(3,15,34,.88) 0%,
            rgba(3,15,34,.62) 36%,
            rgba(3,15,34,.18) 72%,
            rgba(3,15,34,.03) 100%
        ) !important;
}

.premium-shop-hero .hero-overlay-blue{
    background:
        linear-gradient(
            90deg,
            rgba(4,34,74,.88) 0%,
            rgba(4,50,100,.60) 38%,
            rgba(4,50,100,.18) 72%,
            rgba(4,50,100,.02) 100%
        ) !important;
}

.premium-shop-hero .hero-overlay-dark{
    background:
        linear-gradient(
            90deg,
            rgba(13,20,30,.86) 0%,
            rgba(13,20,30,.58) 38%,
            rgba(13,20,30,.16) 72%,
            rgba(13,20,30,.02) 100%
        ) !important;
}

.premium-shop-hero .hero-content{
    position:relative !important;
    z-index:3 !important;
}

.hero-arrow{
    position:absolute;
    top:50%;
    z-index:8;
    width:46px;
    height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    border:1px solid rgba(255,255,255,.22);
    border-radius:50%;
    background:rgba(5,20,39,.34);
    color:#fff;
    font-size:31px;
    line-height:1;
    cursor:pointer;
    backdrop-filter:blur(8px);
    transform:translateY(-50%);
    transition:.2s ease;
}

.hero-arrow:hover{
    background:rgba(5,20,39,.64);
    transform:translateY(-50%) scale(1.05);
}

.hero-prev{left:18px}
.hero-next{right:18px}

/* Categories */
.premium-category-row{
    display:flex !important;
    align-items:center;
    gap:9px !important;
    overflow-x:auto;
    padding:3px 2px 12px !important;
}

.premium-category-row .category-chip{
    min-height:48px !important;
    display:inline-flex !important;
    align-items:center;
    gap:8px;
    padding:0 13px !important;
    border:1px solid #d9e4ef !important;
    background:#fff !important;
    box-shadow:0 5px 16px rgba(15,43,72,.045);
    color:#213b58 !important;
}

.premium-category-row .category-chip:hover{
    border-color:#a9c9e7 !important;
    transform:translateY(-1px);
}

.premium-category-row .category-chip.active{
    border-color:#075aa9 !important;
    background:linear-gradient(135deg,#075aa9,#1675c8) !important;
    color:#fff !important;
    box-shadow:0 8px 20px rgba(7,90,169,.20);
}

.category-chip-icon{
    width:28px;
    height:28px;
    flex:0 0 28px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    background:#edf5fd;
    font-size:14px;
}

.category-chip.active .category-chip-icon{
    background:rgba(255,255,255,.15);
}

.category-chip-name{
    white-space:nowrap;
}

.category-chip-count{
    min-width:23px;
    height:23px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:#eef3f8;
    color:#76869a;
    font-size:10px;
}

.category-chip.active .category-chip-count{
    background:rgba(255,255,255,.16);
    color:#fff;
}

/* Offers carousel */
.offers-home{
    position:relative;
}

.offers-heading{
    align-items:center !important;
}

.section-description{
    margin:5px 0 0;
    color:#76869a;
    font-size:12px;
}

.offer-controls{
    display:flex;
    align-items:center;
    gap:8px;
}

.offer-arrow{
    width:40px;
    height:40px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0;
    border:1px solid #d6e1eb;
    border-radius:12px;
    background:#fff;
    color:#183654;
    font-size:25px;
    cursor:pointer;
    transition:.18s ease;
}

.offer-arrow:hover{
    transform:translateY(-1px);
    border-color:#9dbbd7;
    box-shadow:0 6px 16px rgba(15,43,72,.08);
}

.offer-carousel{
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-behavior:smooth;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    padding:3px 1px 12px;
}

.offer-carousel::-webkit-scrollbar{
    display:none;
}

.offer-track{
    display:flex;
    gap:14px;
    width:max-content;
}

.offer-card{
    width:clamp(250px,22vw,315px);
    flex:0 0 auto;
    overflow:hidden;
    scroll-snap-align:start;
    border:1px solid #dee7f0;
    border-radius:20px;
    background:#fff;
    box-shadow:0 8px 24px rgba(14,40,68,.06);
    transition:.18s ease;
}

.offer-card:hover{
    transform:translateY(-3px);
    border-color:#bfd1e2;
    box-shadow:0 14px 32px rgba(14,40,68,.10);
}

.offer-card-image{
    position:relative;
    height:205px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px;
    background:linear-gradient(180deg,#fff,#f8fafc);
}

.offer-card-image img{
    width:100%;
    height:100%;
    object-fit:contain;
    transition:transform .2s ease;
}

.offer-card:hover .offer-card-image img{
    transform:scale(1.03);
}

.offer-discount{
    position:absolute;
    top:12px;
    left:12px;
    z-index:2;
    padding:7px 9px;
    border-radius:10px;
    background:#e43131;
    color:#fff;
    font-size:11px;
    font-weight:950;
    box-shadow:0 6px 14px rgba(228,49,49,.20);
}

.offer-card-body{
    padding:15px;
    border-top:1px solid #eef2f6;
}

.offer-card-body small{
    color:#8391a1;
    font-size:9px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.45px;
}

.offer-card-body h3{
    min-height:40px;
    margin:5px 0 10px;
    color:#10233d;
    font-size:13px;
    line-height:1.45;
}

.offer-price{
    display:flex;
    align-items:baseline;
    gap:8px;
    margin-bottom:12px;
}

.offer-price strong{
    color:#075aa9;
    font-size:23px;
    font-weight:950;
}

.offer-price del{
    color:#a0aab5;
    font-size:11px;
}

.offer-add{
    width:100%;
    min-height:42px !important;
    font-size:11px !important;
    font-weight:900 !important;
}

.offer-dots{
    display:flex;
    justify-content:center;
    gap:6px;
    padding-top:4px;
}

.offer-dot{
    width:8px;
    height:8px;
    padding:0;
    border:0;
    border-radius:50%;
    background:#c7d3df;
    cursor:pointer;
    transition:.2s ease;
}

.offer-dot.active{
    width:25px;
    border-radius:999px;
    background:#075aa9;
}

/* Mayorista */
body.modo-mayorista .premium-category-row .category-chip.active{
    border-color:#d89b00 !important;
    background:linear-gradient(135deg,#d89b00,#f1bd31) !important;
    color:#2d1f00 !important;
}

body.modo-mayorista .offer-price strong{
    color:#946300;
}

body.modo-mayorista .offer-dot.active{
    background:#d89b00;
}

/* Responsive */
@media(max-width:800px){
    .hero-arrow{
        width:40px;
        height:40px;
        font-size:26px;
    }

    .hero-prev{left:10px}
    .hero-next{right:10px}

    .offers-heading{
        align-items:flex-start !important;
    }

    .offer-controls .section-link{
        display:none;
    }

    .offer-card{
        width:min(78vw,290px);
    }
}

@media(max-width:560px){
    .hero-slide-image{
        object-position:58% center;
    }

    .hero-arrow{
        top:auto;
        bottom:18px;
        transform:none;
        width:36px;
        height:36px;
    }

    .hero-arrow:hover{
        transform:scale(1.03);
    }

    .hero-prev{left:auto;right:58px}
    .hero-next{right:14px}

    .premium-category-row .category-chip{
        min-height:44px !important;
        padding:0 11px !important;
    }

    .category-chip-icon{
        width:25px;
        height:25px;
        flex-basis:25px;
    }

    .offer-card{
        width:82vw;
    }

    .offer-card-image{
        height:190px;
    }
}


/* =========================================================
   V11.13 — BUSCADOR
========================================================= */

.simple-search input::-webkit-search-cancel-button{
    display:none;
}

.simple-search input::placeholder{
    color:#8b99aa;
}

#productsGrid{
    transition:opacity .16s ease;
}

#productsGrid.loading{
    opacity:.42 !important;
    pointer-events:none;
}

#productsGrid[aria-busy="true"]{
    min-height:180px;
}

@media(max-width:680px){
    .simple-search input{
        font-size:16px !important;
    }
}


/* =========================================================
   V11.14 — BÚSQUEDA INSTANTÁNEA
========================================================= */

.simple-search input{
    transition:
        border-color .12s ease,
        box-shadow .12s ease,
        background .12s ease;
}

#productsGrid.loading{
    opacity:.34 !important;
    transition:opacity .08s ease !important;
}