/* ================================================
   MABS STORE — CSS Principal
   ================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Raleway:wght@200;300;400;500;600&display=swap');

:root {
  --c-black:   #0d0b09;
  --c-dark:    #1a1510;
  --c-charcoal:#2e2820;
  --c-muted:   #7a6e62;
  --c-warm:    #b5a898;
  --c-silk:    #f0e6d6;
  --c-cream:   #faf6f0;
  --c-white:   #ffffff;
  --c-gold:    #c8a84b;
  --c-gold-lt: #e2c97e;
  --c-gold-dk: #9a7c2e;
  --c-gold-bg: #f7f0e0;
  --border:    1px solid rgba(200,168,75,0.18);
  --border-dk: 1px solid rgba(200,168,75,0.35);
  --nav-h:     68px;
  --ease:      cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Raleway',sans-serif;background:var(--c-cream);color:var(--c-dark);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}

/* TYPOGRAPHY */
.t-display{font-family:'Cormorant',serif;font-weight:300;line-height:1.0}
.t-display-italic{font-family:'Cormorant',serif;font-style:italic;font-weight:300;line-height:1.0}
.t-heading{font-family:'Cormorant',serif;font-weight:400;line-height:1.1}
.t-overline{font-family:'Raleway',sans-serif;font-size:.62rem;font-weight:500;letter-spacing:.38em;text-transform:uppercase;color:var(--c-gold);display:block}
.t-body{font-family:'Raleway',sans-serif;font-weight:300;font-size:.875rem;line-height:1.9;color:var(--c-muted)}
em{font-family:'Cormorant',serif;font-style:italic;color:var(--c-gold)}

/* LAYOUT */
.container{max-width:1240px;margin:0 auto;padding:0 3rem}
.container--narrow{max-width:880px;margin:0 auto;padding:0 3rem}
.container--wide{max-width:1440px;margin:0 auto;padding:0 3rem}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:.6rem;font-family:'Raleway',sans-serif;font-size:.68rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase;text-decoration:none;border:none;cursor:pointer;transition:all .28s var(--ease);white-space:nowrap}
.btn--primary{background:var(--c-dark);color:var(--c-cream);padding:.9rem 2.2rem}
.btn--primary:hover{background:var(--c-gold);color:#fff}
.btn--gold{background:var(--c-gold);color:#fff;padding:.9rem 2.2rem}
.btn--gold:hover{background:var(--c-dark)}
.btn--outline{background:transparent;color:var(--c-dark);padding:.85rem 2.2rem;border:1px solid var(--c-dark)}
.btn--outline:hover{background:var(--c-dark);color:var(--c-cream)}
.btn--ghost{background:transparent;color:var(--c-gold);padding:0;font-size:.65rem;letter-spacing:.25em}
.btn--ghost:hover{color:var(--c-dark)}
.btn--ghost::after{content:' →'}
.btn--light{background:transparent;color:var(--c-cream);padding:.85rem 2.2rem;border:1px solid rgba(255,255,255,.35)}
.btn--light:hover{background:var(--c-cream);color:var(--c-dark)}
.btn--full{width:100%;justify-content:center}
.btn--lg{padding:1.1rem 2.5rem;font-size:.72rem}

/* BADGES */
.badge{display:inline-block;font-size:.58rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;padding:.28rem .75rem}
.badge--gold{background:var(--c-gold);color:#fff}
.badge--dark{background:var(--c-dark);color:var(--c-gold)}
.badge--outline{border:1px solid var(--c-gold);color:var(--c-gold)}
.badge--new{background:#2e1e00;color:var(--c-gold-lt)}

/* DIVIDER */
.divider{border:none;border-top:var(--border);margin:0}
.gold-line{display:block;width:36px;height:1px;background:var(--c-gold);margin-bottom:1.5rem}

/* SECTIONS */
.section{padding:6rem 0}
.section--sm{padding:4rem 0}
.section--lg{padding:8rem 0}
.section--dark{background:var(--c-dark)}
.section--black{background:var(--c-black)}
.section--silk{background:var(--c-silk)}
.section--gold-bg{background:var(--c-gold-bg)}
.section-header{margin-bottom:3.5rem}
.section-title{font-family:'Cormorant',serif;font-size:clamp(2rem,3.5vw,3rem);font-weight:300;line-height:1.1;color:var(--c-dark)}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:500;height:var(--nav-h);display:flex;align-items:center;background:rgba(250,246,240,.94);backdrop-filter:blur(20px) saturate(180%);border-bottom:var(--border);transition:box-shadow .3s}
.nav.scrolled{box-shadow:0 4px 24px rgba(0,0,0,.06)}
.nav__inner{width:100%;max-width:1440px;margin:0 auto;padding:0 3rem;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem}
.nav__logo{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.nav__logo-mark{width:36px;height:36px;border-radius:50%;background:var(--c-gold);display:flex;align-items:center;justify-content:center;font-family:'Cormorant',serif;font-weight:600;font-size:.82rem;color:#fff;flex-shrink:0}
.nav__logo-name{font-size:.65rem;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--c-dark)}
.nav__links{display:flex;list-style:none;gap:0;justify-content:center}
.nav__links a{display:block;padding:0 .9rem;font-size:.66rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:var(--c-muted);transition:color .2s;position:relative}
.nav__links a::after{content:'';position:absolute;bottom:-1px;left:.9rem;right:.9rem;height:1px;background:var(--c-gold);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav__links a:hover,.nav__links a.is-active{color:var(--c-dark)}
.nav__links a:hover::after,.nav__links a.is-active::after{transform:scaleX(1)}
.nav__actions{display:flex;align-items:center;justify-content:flex-end;gap:1rem}
.nav__cart{position:relative;font-size:1.2rem;text-decoration:none;display:flex;align-items:center}
.cart-count{position:absolute;top:-6px;right:-8px;background:var(--c-gold);color:#fff;font-size:.55rem;font-weight:600;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;line-height:1}
.nav__cta{font-size:.62rem!important;padding:.55rem 1.2rem!important}

/* DROPDOWN */
.nav__dropdown{position:relative}
.nav__submenu{display:none;position:absolute;top:100%;left:0;background:var(--c-cream);border:var(--border);border-top:2px solid var(--c-gold);list-style:none;min-width:200px;z-index:100;box-shadow:0 8px 32px rgba(0,0,0,.08)}
.nav__dropdown:hover .nav__submenu{display:block}
.nav__submenu a{display:block;padding:.7rem 1.2rem;font-size:.72rem;color:var(--c-dark);text-decoration:none;border-bottom:var(--border);transition:background .2s}
.nav__submenu a:hover{background:var(--c-gold-bg)}
.nav__submenu li:last-child a{border-bottom:none}

/* HAMBURGER */
.nav__ham{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.nav__ham span{display:block;width:20px;height:1px;background:var(--c-dark);transition:all .3s}
.nav__drawer{display:none;flex-direction:column;position:fixed;top:var(--nav-h);left:0;right:0;background:var(--c-cream);z-index:490;border-bottom:var(--border);padding:1.5rem 2rem 2rem;gap:0;max-height:calc(100vh - var(--nav-h));overflow-y:auto}
.nav__drawer.is-open{display:flex}
.nav__drawer a{text-decoration:none;color:var(--c-dark);font-size:.85rem;letter-spacing:.1em;padding:.8rem 0;border-bottom:var(--border);font-weight:400}
.nav__drawer .btn--gold{margin-top:1rem;justify-content:center}

/* TICKER */
.ticker{background:var(--c-dark);overflow:hidden;padding:.7rem 0;border-top:var(--border-dk);border-bottom:var(--border-dk)}
.ticker__track{display:flex;width:max-content;animation:ticker-move 28s linear infinite}
.ticker__item{display:flex;align-items:center;gap:2.5rem;padding-right:2.5rem}
.ticker__item span{font-size:.6rem;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:rgba(200,168,75,.7);white-space:nowrap}
.ticker__item i{color:var(--c-gold);font-style:normal;font-size:.4rem;opacity:.6}

/* PAGE HERO */
.page-hero{padding:calc(var(--nav-h) + 5rem) 0 5rem;border-bottom:var(--border)}
.page-hero__inner{max-width:1240px;margin:0 auto;padding:0 3rem}
.page-hero__title{font-family:'Cormorant',serif;font-size:clamp(3rem,6vw,5.5rem);font-weight:300;line-height:1.0;color:var(--c-dark)}
.page-hero__title em{font-style:italic;color:var(--c-gold)}
.page-hero__sub{font-size:.9rem;font-weight:300;color:var(--c-muted);line-height:1.8;max-width:480px;margin-top:1.2rem}

/* BREADCRUMB */
.breadcrumb{padding:.8rem 0;border-bottom:var(--border);background:var(--c-silk)}
.breadcrumb .container{font-size:.72rem;color:var(--c-muted)}
.breadcrumb a{color:var(--c-muted);text-decoration:none}
.breadcrumb a:hover{color:var(--c-gold)}
.breadcrumb span{margin:0 .5rem}

/* PRODUCT CARDS */
.products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1px;background:rgba(200,168,75,.1)}
.product-card{background:var(--c-cream);display:flex;flex-direction:column;text-decoration:none;transition:background .25s,transform .3s var(--ease)}
.product-card:hover{background:var(--c-gold-bg);transform:translateY(-2px)}
.product-card__img{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--c-silk)}
.product-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.product-card:hover .product-card__img img{transform:scale(1.04)}
.product-card__img .badge{position:absolute;top:.8rem;left:.8rem}
.product-card__body{padding:1.2rem 1.4rem;flex:1;display:flex;flex-direction:column;gap:.4rem;border-top:var(--border)}
.product-card__cat{font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--c-gold)}
.product-card__name{font-family:'Cormorant',serif;font-size:1.15rem;font-weight:400;color:var(--c-dark);line-height:1.2}
.product-card__desc{font-size:.78rem;color:var(--c-muted);line-height:1.7;flex:1}
.product-card__action{margin-top:.8rem;padding-top:.8rem;border-top:var(--border);display:flex;justify-content:space-between;align-items:center}
.product-card__precio{font-size:.88rem;font-weight:500;color:var(--c-dark)}
.product-card__order{font-size:.62rem;letter-spacing:.2em;color:var(--c-gold);font-weight:500}
.product-card:hover .product-card__order{color:var(--c-dark)}

/* FOOTER */
.footer{background:var(--c-black);border-top:var(--border-dk)}
.footer__main{max-width:1440px;margin:0 auto;padding:5rem 3rem 4rem;display:grid;grid-template-columns:2.5fr 1fr 1fr 1fr;gap:3rem}
.footer__brand-name{font-family:'Cormorant',serif;font-size:2rem;font-weight:300;color:var(--c-gold);margin-bottom:1rem;letter-spacing:.05em}
.footer__brand-desc{font-size:.8rem;font-weight:300;color:rgba(200,168,75,.4);line-height:1.85;max-width:280px}
.footer__col h5{font-size:.58rem;font-weight:600;letter-spacing:.38em;text-transform:uppercase;color:var(--c-gold);margin-bottom:1.4rem;padding-bottom:.8rem;border-bottom:1px solid rgba(200,168,75,.15)}
.footer__col a,.footer__col p{display:block;text-decoration:none;font-size:.78rem;font-weight:300;color:rgba(200,168,75,.35);line-height:1;padding:.5rem 0;border-bottom:1px solid rgba(200,168,75,.07);transition:color .2s}
.footer__col a:hover{color:var(--c-gold)}
.footer__bottom{border-top:1px solid rgba(200,168,75,.1);padding:1.4rem 3rem;max-width:1440px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}
.footer__copy{font-size:.6rem;font-weight:400;letter-spacing:.18em;text-transform:uppercase;color:rgba(200,168,75,.2)}

/* WA FLOAT */
.wa-float{position:fixed;bottom:2rem;right:2rem;z-index:600;width:52px;height:52px;border-radius:50%;background:#25d366;color:#fff;text-decoration:none;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 24px rgba(37,211,102,.35);transition:transform .3s var(--ease),box-shadow .3s;animation:wa-pulse 3s ease-in-out infinite}
.wa-float:hover{transform:scale(1.1) translateY(-2px);box-shadow:0 10px 32px rgba(37,211,102,.5)}

/* CART TOAST */
.cart-toast{position:fixed;bottom:5rem;right:2rem;z-index:700;background:var(--c-dark);color:var(--c-cream);padding:.9rem 1.5rem;font-size:.75rem;letter-spacing:.08em;transform:translateY(10px);opacity:0;transition:all .35s var(--ease);pointer-events:none}
.cart-toast.is-visible{opacity:1;transform:translateY(0);pointer-events:auto}
.cart-toast a{color:var(--c-gold);text-decoration:none}

/* REVEAL ANIMATION */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
.reveal.is-visible{opacity:1;transform:translateY(0)}
.reveal--delay-1{transition-delay:.1s}
.reveal--delay-2{transition-delay:.2s}
.reveal--delay-3{transition-delay:.3s}
.reveal--delay-4{transition-delay:.4s}

/* PAGINATION */
.paginacion{display:flex;gap:.4rem;justify-content:center;margin-top:3rem}
.pag-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;font-size:.78rem;text-decoration:none;color:var(--c-muted);border:var(--border);transition:all .2s}
.pag-btn:hover,.pag-btn.is-active{background:var(--c-gold);color:#fff;border-color:var(--c-gold)}

/* ANIMATIONS */
@keyframes ticker-move{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes wa-pulse{0%,100%{box-shadow:0 6px 24px rgba(37,211,102,.35)}50%{box-shadow:0 6px 36px rgba(37,211,102,.6)}}
@keyframes fade-up{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin-slow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* RESPONSIVE */
@media(max-width:1024px){
  .container,.container--narrow,.container--wide,.nav__inner,.page-hero__inner{padding-left:2rem;padding-right:2rem}
  .footer__main{grid-template-columns:1fr 1fr;gap:2.5rem}
}
@media(max-width:768px){
  :root{--nav-h:60px}
  .container,.container--narrow,.container--wide,.nav__inner,.page-hero__inner,.footer__main,.footer__bottom{padding-left:1.4rem;padding-right:1.4rem}
  .nav__links,.nav__actions .btn--gold.nav__cta{display:none}
  .nav__ham{display:flex}
  .nav__inner{grid-template-columns:auto 1fr auto}
  .section{padding:4rem 0}
  .page-hero{padding:calc(var(--nav-h) + 3rem) 0 3rem}
  .footer__main{grid-template-columns:1fr;gap:2rem;padding:3rem 1.4rem 2rem}
  .footer__bottom{flex-direction:column;gap:.5rem;text-align:center}
  .products-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){
  .products-grid{grid-template-columns:1fr}
}