@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%;
    }
}