/* =========================================================
   MJ WORKSPORT — Estilos Extranet (Tienda + Cotizador)
   Flat design — fondo blanco, menú negro, acentos dorados
   ========================================================= */

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

:root{
  --mj-black:#111111;
  --mj-black-soft:#1c1c1c;
  --mj-gold:#c9a227;
  --mj-gold-light:#e0bf4f;
  --mj-white:#ffffff;
  --mj-off:#f6f5f1;
  --mj-off2:#efede6;
  --mj-text:#1a1a1a;
  --mj-gray:#6b6b6b;
  --mj-card:#ffffff;
  --mj-border:#e4e1d8;
  --radius:6px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--mj-white);
  color:var(--mj-text);
  font-family:'Poppins',sans-serif;
  font-size:16px;
  line-height:1.55;
}
h1,h2,h3,h4,.brand,.section-title{
  font-family:'Poppins',sans-serif;
  font-weight:700;
  letter-spacing:.2px;
  color:var(--mj-text);
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
ul{list-style:none;margin:0;padding:0;}
.container{max-width:1200px;margin:0 auto;padding:0 20px;}

/* ---------- Topbar (negro) ---------- */
.topbar{
  background:var(--mj-black);
  color:var(--mj-gold);
  font-weight:700;
  font-size:.78rem;
  text-align:center;
  padding:7px 10px;
  letter-spacing:.5px;
}

/* ---------- Header / Menú (se mantiene negro) ---------- */
.site-header{
  background:var(--mj-black);
  border-bottom:3px solid var(--mj-gold);
  position:sticky;top:0;z-index:100;
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;gap:20px;
}
.brand{display:flex;align-items:center;gap:10px;font-size:1.3rem;color:var(--mj-white);}
.brand-logo{
  height:42px;width:auto;border-radius:4px;object-fit:contain;
  background:#fff;padding:3px 6px;
}
.brand-text-logo{
  height:44px;padding:0 14px;border-radius:4px;
  background:var(--mj-gold);color:var(--mj-black);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:1rem;
}
.brand span.accent{color:var(--mj-gold);}

.main-nav{display:flex;gap:24px;align-items:center;}
.main-nav a{
  font-weight:600;font-size:.92rem;
  color:#c9c9c9;transition:.15s;
}
.main-nav a:hover, .main-nav a.active{color:var(--mj-gold);}

.header-actions{display:flex;align-items:center;gap:14px;}
.icon-btn{
  position:relative;color:var(--mj-white);font-size:1.25rem;
  width:42px;height:42px;display:flex;align-items:center;justify-content:center;
  border:1px solid #333;border-radius:50%;transition:.15s;
}
.icon-btn:hover{border-color:var(--mj-gold);color:var(--mj-gold);}
.cart-badge{
  position:absolute;top:-6px;right:-6px;background:var(--mj-gold);color:#000;
  font-size:.68rem;font-weight:700;border-radius:50%;
  width:19px;height:19px;display:flex;align-items:center;justify-content:center;
}
.gold-btn{
  border:2px solid var(--mj-gold);color:var(--mj-gold);
  padding:9px 18px;border-radius:var(--radius);font-size:.8rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;transition:.15s;background:transparent;
}
.gold-btn:hover{background:var(--mj-gold);color:#000;}
.intranet-btn{
  border:1px solid #333;color:#c9c9c9;
  padding:8px 16px;border-radius:var(--radius);font-size:.78rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.5px;transition:.15s;
}
.intranet-btn:hover{background:var(--mj-gold);color:#000;border-color:var(--mj-gold);}
.nav-intranet{margin-left:6px;}
@media (min-width: 861px){ .nav-intranet{margin-left:20px;} }

.burger{display:none;font-size:1.6rem;color:var(--mj-white);background:none;border:none;cursor:pointer;}

/* ---------- Hero (fondo blanco/off-white) ---------- */
.hero{
  position:relative;
  background:var(--mj-off);
  padding:70px 20px 80px;
  text-align:center;
  border-bottom:1px solid var(--mj-border);
}
.hero-logo{max-width:200px;width:auto;height:auto;margin:0 auto 24px;background:#fff;padding:12px 18px;border-radius:8px;border:1px solid var(--mj-border);}
.hero-badge{
  display:inline-block;color:var(--mj-black);background:var(--mj-gold);
  padding:6px 18px;border-radius:30px;font-size:.75rem;font-weight:700;
  text-transform:uppercase;letter-spacing:1px;margin-bottom:20px;
}
.hero h1{font-size:clamp(2rem,5vw,3.3rem);margin:0 0 16px;color:var(--mj-black);line-height:1.18;}
.hero h1 .accent{color:var(--mj-gold);}
.hero p{color:var(--mj-gray);font-size:1.12rem;max-width:640px;margin:0 auto 30px;}
.btn{
  display:inline-block;padding:14px 32px;border-radius:var(--radius);font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;font-size:.85rem;transition:.15s;cursor:pointer;border:none;
}
.btn-primary{background:var(--mj-gold);color:#000;}
.btn-primary:hover{background:var(--mj-gold-light);}
.btn-outline{border:2px solid var(--mj-black);color:var(--mj-black);background:transparent;}
.btn-outline:hover{border-color:var(--mj-gold);color:var(--mj-gold);}

/* ---------- Section titles ---------- */
.section{padding:56px 0;}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:28px;flex-wrap:wrap;gap:10px;}
.section-title{font-size:1.9rem;color:var(--mj-black);margin:0;}
.section-title .accent{color:var(--mj-gold);}
.section-sub{color:var(--mj-gray);margin-top:4px;}
.see-all{color:var(--mj-gold);font-weight:700;text-transform:uppercase;font-size:.82rem;letter-spacing:.5px;}

/* ---------- Category chips ---------- */
.cat-scroll{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;}
.cat-chip{
  flex:0 0 auto;padding:10px 20px;border-radius:var(--radius);border:1px solid var(--mj-border);
  color:var(--mj-gray);font-weight:600;white-space:nowrap;transition:.15s;background:var(--mj-white);
}
.cat-chip:hover, .cat-chip.active{background:var(--mj-gold);color:#000;border-color:var(--mj-gold);}

/* ---------- Product grid (tarjetas blancas, flat) ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(230px,1fr));gap:20px;}
.card{
  background:var(--mj-card);border:1px solid var(--mj-border);border-radius:var(--radius);
  overflow:hidden;transition:.15s;position:relative;
}
.card:hover{border-color:var(--mj-gold);box-shadow:0 4px 14px rgba(0,0,0,.06);}
.card-img{aspect-ratio:1/1;background:var(--mj-off);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.card-img img{width:100%;height:100%;object-fit:cover;}
.card-body{padding:16px;}
.card-tag{
  position:absolute;top:12px;left:12px;background:var(--mj-gold);color:#000;
  font-size:.68rem;font-weight:700;padding:4px 10px;border-radius:var(--radius);text-transform:uppercase;z-index:2;
}
.card-cat{color:var(--mj-gold);font-size:.72rem;text-transform:uppercase;letter-spacing:.5px;font-weight:600;}
.card-name{font-weight:700;margin:4px 0 8px;font-size:1.02rem;color:var(--mj-black);}
.price-regular{font-weight:700;color:var(--mj-black);font-size:1.08rem;}
.price-old{text-decoration:line-through;color:var(--mj-gray);margin-right:8px;font-size:.88rem;}
.price-sale{font-weight:700;color:var(--mj-gold);font-size:1.08rem;}
.card-actions{display:flex;justify-content:space-between;align-items:center;margin-top:12px;}
.add-btn{
  background:var(--mj-gold);color:#000;border:none;border-radius:50%;
  width:36px;height:36px;font-size:1.15rem;font-weight:700;cursor:pointer;transition:.15s;
}
.add-btn:hover{background:var(--mj-gold-light);}

/* ---------- Features strip (off-white) ---------- */
.features{background:var(--mj-off2);border-top:1px solid var(--mj-border);border-bottom:1px solid var(--mj-border);}
.features .container{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;padding:34px 20px;}
.feature-item{display:flex;gap:14px;align-items:center;}
.feature-icon{font-size:1.5rem;color:var(--mj-gold);}
.feature-item strong{display:block;color:var(--mj-black);}
.feature-item span{color:var(--mj-gray);font-size:.85rem;}

/* ---------- Cotizador (Quote request) ---------- */
.quote-hero{background:var(--mj-off);border-bottom:1px solid var(--mj-border);padding:50px 20px;text-align:center;}
.quote-hero h1{font-size:2.2rem;margin:0 0 10px;color:var(--mj-black);}
.quote-hero p{color:var(--mj-gray);max-width:600px;margin:0 auto;}
.quote-form-wrap{max-width:820px;margin:0 auto;padding:50px 20px;}
.quote-section-title{
  color:var(--mj-gold);text-transform:uppercase;font-size:.85rem;font-weight:700;
  letter-spacing:1px;margin:34px 0 16px;border-bottom:1px solid var(--mj-border);padding-bottom:10px;
}
.quote-section-title:first-child{margin-top:0;}
.size-rows{display:flex;flex-direction:column;gap:10px;}
.size-row{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:10px;align-items:center;}
.size-row select, .size-row input{margin:0;}
.remove-row-btn{
  background:none;border:1px solid #c65;color:#c65;border-radius:var(--radius);
  width:38px;height:38px;font-size:1.1rem;cursor:pointer;
}
.add-row-btn{
  border:1px dashed var(--mj-gold);color:var(--mj-gold);background:none;
  padding:10px 18px;border-radius:var(--radius);font-weight:700;font-size:.85rem;cursor:pointer;margin-top:6px;
}
.file-drop{
  border:2px dashed var(--mj-border);border-radius:var(--radius);padding:20px;text-align:center;color:var(--mj-gray);
}

/* ---------- Product detail ---------- */
.product-detail{display:grid;grid-template-columns:1fr 1fr;gap:50px;padding:50px 0;}
.gallery-main{border-radius:var(--radius);overflow:hidden;background:var(--mj-off);border:1px solid var(--mj-border);aspect-ratio:1/1;}
.gallery-thumbs{display:flex;gap:10px;margin-top:12px;}
.gallery-thumbs img{width:70px;height:70px;object-fit:cover;border-radius:var(--radius);border:1px solid var(--mj-border);cursor:pointer;}
.pd-cat{color:var(--mj-gold);text-transform:uppercase;font-weight:700;font-size:.8rem;letter-spacing:.5px;}
.pd-title{font-size:2.1rem;margin:8px 0;color:var(--mj-black);}
.pd-price{font-size:1.7rem;margin:14px 0;}
.pd-desc{color:var(--mj-gray);margin-bottom:20px;line-height:1.7;}
.size-label{font-weight:700;text-transform:uppercase;font-size:.82rem;margin-bottom:8px;display:block;color:var(--mj-black);}
.size-options{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px;}
.size-opt{
  border:1px solid var(--mj-border);padding:10px 16px;border-radius:var(--radius);cursor:pointer;font-weight:700;transition:.15s;background:var(--mj-white);
}
.size-opt:hover, .size-opt.selected{border-color:var(--mj-gold);color:var(--mj-gold);}
.qty-row{display:flex;align-items:center;gap:16px;margin-bottom:24px;}
.qty-box{display:flex;align-items:center;border:1px solid var(--mj-border);border-radius:var(--radius);}
.qty-box button{background:none;border:none;color:var(--mj-black);width:36px;height:36px;font-size:1.1rem;cursor:pointer;}
.qty-box input{width:40px;text-align:center;background:none;border:none;color:var(--mj-black);font-size:1rem;}
.pd-tags{margin-top:20px;display:flex;gap:8px;flex-wrap:wrap;}
.tag-chip{border:1px solid var(--mj-border);color:var(--mj-gray);padding:4px 12px;border-radius:var(--radius);font-size:.78rem;}

/* ---------- Cart / Checkout ---------- */
.cart-table{width:100%;border-collapse:collapse;margin-bottom:30px;}
.cart-table th{text-align:left;color:var(--mj-gray);text-transform:uppercase;font-size:.72rem;border-bottom:1px solid var(--mj-border);padding:10px;}
.cart-table td{padding:14px 10px;border-bottom:1px solid var(--mj-border);vertical-align:middle;}
.cart-item-info{display:flex;align-items:center;gap:14px;}
.cart-item-info img{width:60px;height:60px;object-fit:cover;border-radius:var(--radius);}
.remove-link{color:#c65;font-size:.8rem;font-weight:700;text-transform:uppercase;}
.cart-summary{background:var(--mj-off);border:1px solid var(--mj-border);border-radius:var(--radius);padding:24px;max-width:420px;margin-left:auto;}
.summary-row{display:flex;justify-content:space-between;padding:8px 0;color:var(--mj-gray);}
.summary-row.discount{color:#3a8f4c;}
.summary-row.total{color:var(--mj-black);font-weight:700;font-size:1.25rem;border-top:1px solid var(--mj-border);margin-top:10px;padding-top:16px;}

.checkout-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;padding:50px 0;align-items:start;}
.form-group{margin-bottom:16px;}
.form-group label{display:block;margin-bottom:6px;font-weight:700;font-size:.82rem;text-transform:uppercase;color:var(--mj-gray);}
.form-control{
  width:100%;padding:12px 14px;border-radius:var(--radius);border:1px solid var(--mj-border);
  background:var(--mj-white);color:var(--mj-text);font-family:inherit;font-size:1rem;
}
.form-control:focus{outline:none;border-color:var(--mj-gold);}
.coupon-row{display:flex;gap:10px;}
.coupon-row .form-control{flex:1;}
.coupon-applied{
  display:flex;justify-content:space-between;align-items:center;background:rgba(58,143,76,.08);
  border:1px solid #3a8f4c;color:#276b38;border-radius:var(--radius);padding:10px 14px;font-weight:600;font-size:.9rem;
}
.coupon-applied a{color:#c65;font-weight:700;font-size:.8rem;text-transform:uppercase;}
.payment-options{display:flex;flex-direction:column;gap:12px;margin:20px 0;}
.payment-opt{
  border:1px solid var(--mj-border);border-radius:var(--radius);padding:16px;display:flex;gap:12px;align-items:flex-start;cursor:pointer;background:var(--mj-white);
}
.payment-opt input{margin-top:4px;}
.payment-opt.selected{border-color:var(--mj-gold);background:rgba(201,162,39,.06);}
.bank-details{background:var(--mj-off);border:1px dashed var(--mj-border);border-radius:var(--radius);padding:16px;margin-top:14px;font-size:.9rem;}
.bank-details div{padding:3px 0;}

/* ---------- WhatsApp float button ---------- */
.wa-float{
  position:fixed;bottom:24px;right:24px;background:#25D366;color:#fff;
  width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  z-index:200;transition:.15s;box-shadow:0 4px 14px rgba(0,0,0,.25);
}
.wa-float:hover{transform:scale(1.06);}

/* ---------- Footer (negro, hace de "cierre" junto al header) ---------- */
.site-footer{background:var(--mj-black);border-top:3px solid var(--mj-gold);padding:50px 0 20px;margin-top:60px;color:#d8d8d8;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px;margin-bottom:30px;}
.footer-grid h4{color:var(--mj-white);margin-bottom:14px;}
.footer-grid a, .footer-grid p{color:#b3b3b3;font-size:.92rem;line-height:2;}
.footer-grid a:hover{color:var(--mj-gold);}
.footer-bottom{border-top:1px solid #333;padding-top:18px;color:#8a8a8a;font-size:.8rem;text-align:center;}
.social-row{display:flex;gap:12px;margin-top:10px;}
.social-row a{
  width:36px;height:36px;border:1px solid #3a3a3a;border-radius:50%;color:#d8d8d8;
  display:flex;align-items:center;justify-content:center;
}
.social-row a:hover{border-color:var(--mj-gold);color:var(--mj-gold);}

/* ---------- Alerts ---------- */
.alert{padding:14px 18px;border-radius:var(--radius);margin-bottom:20px;font-weight:600;}
.alert-success{background:rgba(58,143,76,.08);border:1px solid #3a8f4c;color:#276b38;}
.alert-error{background:rgba(214,60,60,.06);border:1px solid #d63c3c;color:#a12b2b;}

.empty-state{text-align:center;padding:80px 20px;color:var(--mj-gray);}
.empty-state .btn{margin-top:16px;}

/* ---------- Breadcrumb ---------- */
.breadcrumb{color:var(--mj-gray);font-size:.85rem;padding:20px 0 0;}
.breadcrumb a:hover{color:var(--mj-gold);}

/* ---------- Responsive ---------- */
@media (max-width: 860px){
  .main-nav{position:fixed;top:0;right:-100%;height:100vh;width:72%;background:#000;flex-direction:column;
    padding:100px 30px;transition:.3s;border-left:1px solid #333;}
  .main-nav.open{right:0;}
  .burger{display:block;}
  .product-detail{grid-template-columns:1fr;}
  .checkout-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .size-row{grid-template-columns:1fr 1fr;}
}