:root{
  --ml-yellow:#FFE600;
  --ml-blue:#3483FA;
  --ml-green:#2ABF6F; /* nuevo verde */
  --accent-gradient: linear-gradient(90deg,var(--ml-blue),var(--ml-green));
  --primary:var(--ml-blue);
  --muted:#6c757d;
  --text:#0b1720;
  --card-radius:10px;
  --shadow:0 8px 30px rgba(15,23,42,0.06);
  --shadow-hover:0 14px 40px rgba(15,23,42,0.09);
  --bg:#f6f8fb;
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* navbar */
.ml-header{background:#fff;border-bottom:1px solid rgba(13,17,23,0.04)}
.brand-title{font-weight:800;color:var(--ml-blue);letter-spacing:.2px}

/* logo en header */
.brand-link{display:inline-flex;align-items:center}
.brand-logo{height:40px;display:block}

/* container */
.container-max{max-width:1200px;margin:0 auto;padding:18px}

/* hero */
.hero{background:#fff;border-radius:12px;padding:18px;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:space-between;gap:12px}
.hero h1{font-size:1.2rem;margin:0}
.hero .muted{color:var(--muted)}

/* section-card: estilo de tarjetas blancas tipo hero (útil para categorías, filtros, etc) */
.section-card{background:#fff;border-radius:12px;padding:16px;box-shadow:var(--shadow);}

/* layout */
.layout{display:grid;grid-template-columns:1fr;gap:18px;margin-top:16px}
@media(min-width:992px){ .layout{grid-template-columns:260px 1fr} }

/* sidebar */
.catalog-sidebar{background:#fff;border-radius:10px;padding:14px;box-shadow:var(--shadow);position:relative}
.catalog-sidebar h6{font-size:.95rem;margin-bottom:.6rem;font-weight:600}
.filters-scroll{max-height:420px;overflow:auto;padding-right:6px}

/* products grid */
.products{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(min-width:576px){ .products{grid-template-columns:repeat(3,1fr)} }
@media(min-width:1200px){ .products{grid-template-columns:repeat(4,1fr)} }

.card-product{border-radius:10px;overflow:hidden;border:none;background:#fff;box-shadow:0 10px 30px rgba(2,6,23,0.04);transition:transform .16s ease,box-shadow .16s ease}
.card-product:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover)}
.card-thumb{height:160px;display:flex;align-items:center;justify-content:center;background:#fff}
.card-thumb img{max-height:150px;max-width:100%;object-fit:contain}

.card-body{padding:12px}
.p-title{font-size:.95rem;font-weight:600;margin:0 0 6px 0;color:var(--text)}
.p-price{font-weight:800;color:var(--ml-green);font-size:1.05rem;margin-bottom:6px}
.p-desc{color:#57606a;font-size:.88rem;margin:0}

.btn-ml{background:var(--ml-yellow);color:#111;border:none;font-weight:700;border-radius:8px;padding:.4rem .6rem}
.btn-ml:hover{filter:brightness(.98)}

.pagination{margin-top:18px}

/* mobile filter button */
.mobile-filters-btn{position:fixed;right:16px;bottom:18px;border-radius:999px;z-index:1050}

/* --- categorías top: tarjetas --- */
.categories-grid .cat-card{
  display:block;
  text-decoration:none;
  color:inherit;
  border-radius:10px;
  padding:8px;
  background:linear-gradient(180deg,#ffffff, #fbfdff);
  border:1px solid rgba(11,23,32,0.04);
  box-shadow:var(--shadow);
  transition:transform .12s, box-shadow .12s;
  height:100%;
  align-items:center;
}
.categories-grid .cat-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-hover);}

/* thumb wrapper for better cropping */
.cat-thumb-wrap{height:100px; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:8px; background:linear-gradient(180deg, rgba(52,131,250,0.06), rgba(42,191,111,0.03));}
.cat-thumb{width:100%; height:100px; object-fit:cover; border-radius:6px;}

/* Naming */
.cat-name{font-weight:600; margin-top:8px; font-size:0.95rem}
.cat-count{color:var(--muted); font-size:.85rem}

/* pequeña etiqueta con gradiente (opcional) */
.cat-badge{
  display:inline-block;
  padding:.22rem .46rem;
  border-radius:999px;
  font-size:.78rem;
  color:#fff;
  background:var(--accent-gradient);
}

/* footer */
.site-footer{background:#fff;border-top:1px solid rgba(11,17,23,0.04);padding:28px 0;margin-top:30px;box-shadow:0 -6px 20px rgba(2,6,23,0.02)}
.footer-logo{height:34px}
.footer-brand-name{font-weight:700;color:var(--ml-blue)}
.site-footer h6{margin-bottom:.6rem}
.site-footer a{color:var(--text); text-decoration:none}
.site-footer a:hover{text-decoration:underline}

/* footer small responsiveness */
@media(max-width:576px){
  .cat-thumb{height:90px}
  .container-max{padding:12px}
}


/* ===== FOOTER PROFESIONAL ===== */

.footer-pro {
  background: #0b0f14;
  color: #f1f1f1;
  padding: 40px 20px 20px;
  margin-top: 40px;
  border-top: 4px solid #1a73e8;
  font-family: 'Inter', sans-serif;
}

.footer-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: auto;
}

.footer-logo {
  width: 160px;
  margin-bottom: 10px;
}

.footer-desc {
  font-size: 0.9rem;
  color: #bbbbbb;
  line-height: 1.4;
}

.footer-section h4 {
  font-size: 1rem;
  margin-bottom: 12px;
  color: #ffffff;
  font-weight: 600;
  border-left: 4px solid #1a73e8;
  padding-left: 8px;
}

.footer-section p,
.footer-section a {
  font-size: 0.9rem;
  color: #d9d9d9;
}

.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-links li {
  margin-bottom: 7px;
}

.footer-links a {
  color: #d9d9d9;
  text-decoration: none;
  transition: 0.3s;
}

.footer-links a:hover {
  color: #1a73e8;
}

/* WhatsApp links */
.wa-link {
  color: #25D366;
  font-weight: 600;
  text-decoration: none;
}

.wa-link:hover {
  text-decoration: underline;
}

/* Parte inferior */
.footer-bottom {
  text-align: center;
  margin-top: 25px;
  color: #aaaaaa;
  font-size: 0.8rem;
  padding-top: 10px;
  border-top: 1px solid #222;
}