:root{
  --mm-primary:#3a3972;
  --mm-secondary:#e69130;
  --mm-text:#111827;
  --mm-muted:#6b7280;
  --mm-bg:#ffffff;
  --mm-surface:#f8fafc;
  --mm-border:rgba(17,24,39,.12);
  --mm-radius:16px;
}

/* ===== Toolbar ===== */
.mm-toolbar{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--mm-border);margin-bottom:12px}
.mm-toolbar__right{display:flex;gap:10px;align-items:center}
.mm-open-drawer{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--mm-border);border-radius:10px;background:#fff;text-decoration:none;font-weight:600;color:var(--mm-primary)}
.mm-open-drawer__icon{font-size:18px;line-height:1}
.mm-sort select{padding:10px 12px;border:1px solid var(--mm-border);border-radius:10px;background:#fff}
.mm-count{color:#707784;font-weight:600}

/* ===== Grid ===== */
.mm-grid{--mm-cols:4;display:grid;gap:18px;grid-template-columns:repeat(var(--mm-cols),minmax(0,1fr))}
@media (max-width:980px){.mm-grid{gap:16px}}
@media (max-width:767px){.mm-grid{gap:12px}}

/* ===== Card ===== */
.mm-card{background:#fff;border:1px solid var(--mm-border);border-radius:var(--mm-radius);overflow:hidden;box-shadow:0 4px 18px rgba(0,0,0,.06);display:flex;flex-direction:column}
.mm-card__media{position:relative;display:block;overflow:hidden;aspect-ratio:4/3;background:#f3f4f6}
.mm-carousel,.mm-carousel__track,.mm-carousel__slide{height:100%}
.mm-carousel__track{display:flex;overflow:hidden;scroll-snap-type:x mandatory;align-items:stretch}
.mm-carousel__slide{flex:0 0 100%;scroll-snap-align:center;display:flex}
.mm-card__img{width:100%;height:100%;object-fit:cover;object-position:center center;display:block;image-rendering:auto}

/* ===== Modern Carousel Nav (glass) ===== */
.mm-carousel__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:40px;height:40px;border:0;border-radius:9999px!important;
  display:grid;place-items:center;
  background:rgba(17,24,39,.58);color:#fff;
  box-shadow:0 8px 22px rgba(17,24,39,.18);
  backdrop-filter:saturate(140%) blur(6px);
  cursor:pointer;
  font-size:22px;line-height:1;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, opacity .18s ease;
}
.mm-carousel__nav.is-prev{left:10px}
.mm-carousel__nav.is-next{right:10px}
@media (hover:hover){
  .mm-card__media .mm-carousel__nav{opacity:0;pointer-events:none}
  .mm-card__media:hover .mm-carousel__nav{opacity:1;pointer-events:auto}
  .mm-carousel__nav:hover{transform:translateY(-50%) scale(1.04);box-shadow:0 10px 28px rgba(17,24,39,.22);background:rgba(17,24,39,.72)}
}
.mm-carousel__nav:focus{outline:none}
.mm-carousel__nav:focus-visible{outline:2px solid rgba(58,57,114,.5);outline-offset:2px}

/* ===== Dots modernizados ===== */
.mm-dots{
  position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
  display:flex;gap:8px;padding:6px 10px;border-radius:14px;
  background:rgba(255,255,255,.65);
  backdrop-filter:blur(5px);
  box-shadow:0 3px 10px rgba(17,24,39,.12)
}
.mm-dot{width:7px;height:7px;border-radius:999px;background:rgba(17,24,39,.28);cursor:pointer;transition:transform .18s ease,background .18s ease,opacity .18s ease;opacity:.9}
.mm-dot.is-active{background:var(--mm-primary);transform:scale(1.45);opacity:1}
@media (prefers-reduced-motion:reduce){.mm-dot,.mm-carousel__nav{transition:none}}

/* ===== Body ===== */
.mm-card__body{padding:14px;display:flex;flex-direction:column;gap:10px}
.mm-card__title{margin:0}
.mm-card__title a{color:var(--mm-primary);font-weight:700;text-decoration:none;font-size:clamp(1rem,.98rem + .25vw,1.15rem);line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mm-card__title a:hover{text-decoration:underline}

/* ===== Ratings (proyectos clientes) ===== */
.mm-rating{display:flex;align-items:center;gap:6px;margin-top:-2px;margin-bottom:2px}
.mm-stars{position:relative;display:inline-block;line-height:1}
.mm-stars__bg,.mm-stars__fg{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  font-size:14px;letter-spacing:2px;
}
.mm-stars__bg{color:#e5e7eb}
.mm-stars__fg{position:absolute;inset:0 auto 0 0;overflow:hidden;white-space:nowrap;color:#f59e0b}
.mm-rating__count{color:var(--mm-muted);font-size:12px;font-weight:600}

/* ===== Price & CTA ===== */
.mm-card__price{color:#e69130;font-weight:400;display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;font-size:clamp(.98rem,.96rem + .18vw,1.06rem);line-height:1.2;letter-spacing:.005em}
.mm-card__price .woocommerce-Price-amount{color:#e69130;font-weight:400}
.mm-card__unit{color:var(--mm-primary);font-weight:500}
.mm-card__vat{color:#e69130;font-weight:400;font-size:.95em}
.mm-card__btn{display:inline-block;text-align:center;padding:10px 12px;border-radius:10px;background:var(--mm-primary);color:#fff;text-decoration:none;font-weight:800;transition:transform .12s ease,box-shadow .12s ease,filter .12s ease}
@media (hover:hover){.mm-card__btn:hover{filter:brightness(1.05);box-shadow:0 6px 18px rgba(58,57,114,.25);transform:translateY(-1px)}}

/* ===== Drawer ===== */
.mm-drawer{position:fixed;inset:0;z-index:9999;pointer-events:none}
.mm-drawer__overlay{position:absolute;inset:0;background:rgba(0,0,0,.45);opacity:0;transition:opacity .2s}
.mm-drawer__panel{position:absolute;top:0;right:-480px;width:480px;max-width:100%;height:100%;background:#fff;box-shadow:-10px 0 30px rgba(0,0,0,.2);padding:18px;overflow:auto;transition:right .25s}
.mm-drawer.is-open{pointer-events:auto}
.mm-drawer.is-open .mm-drawer__overlay{opacity:1}
.mm-drawer.is-open .mm-drawer__panel{right:0}
.mm-no-scroll{overflow:hidden}
.mm-fh{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.mm-fh__title{margin:0;font-size:20px;font-weight:800;flex:1;color:var(--mm-primary)}
.mm-fh__counter{color:var(--mm-muted)}
.mm-icon-btn{border:1px solid var(--mm-border);background:#fff;width:36px;height:36px;border-radius:10px;display:inline-grid;place-items:center;cursor:pointer}
.mm-chipbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.mm-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--mm-border);border-radius:999px;background:#fff;font-weight:600}
.mm-chip i{font-style:normal;opacity:.65;margin-left:2px}
.mm-accordion{border-top:1px solid var(--mm-border)}
.mm-accordion:first-of-type{border-top:0}
.mm-accordion__head{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:14px 2px;background:transparent;border:0;cursor:pointer;font-weight:800;text-align:left;color:var(--mm-primary);font-size:1.1em}
.mm-accordion__chev{transform:rotate(90deg);transition:transform .2s}
.mm-accordion.is-open .mm-accordion__chev{transform:rotate(-90deg)}
.mm-accordion__body{display:none;padding:0 2px 12px}
.mm-accordion.is-open .mm-accordion__body{display:block}
.mm-input,.mm-select{width:100%;padding:10px 12px;border:1px solid var(--mm-border);border-radius:10px;background:#fff}
.mm-field{display:flex;flex-direction:column;gap:6px}
.mm-field--inline{flex-direction:row;align-items:center}
.mm-field__label{color:var(--mm-muted);min-width:84px}
.mm-options{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:8px}
.mm-opt{position:relative;display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--mm-border);border-radius:12px;background:#fff;cursor:pointer;user-select:none}
.mm-opt__chk{position:absolute;opacity:0;pointer-events:none}
.mm-opt__box{width:18px;height:18px;border:2px solid var(--mm-primary);border-radius:4px;display:inline-block}
.mm-opt__chk:checked + .mm-opt__box{background:var(--mm-primary);box-shadow:inset 0 0 0 3px #fff}
.mm-opt__label{flex:1;line-height:1.2}
.mm-opt__count{opacity:.65;font-size:12px}
.mm-opt--hidden{display:none!important}
.mm-price{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mm-actions{position:sticky;bottom:0;background:#fff;padding:12px 0;display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--mm-border);margin-top:12px}
.mm-link{color:var(--mm-muted);text-decoration:none;font-weight:600}
.mm-btn{appearance:none;border:0;padding:12px 16px;border-radius:12px;font-weight:800;cursor:pointer}
.mm-btn--primary{background:var(--mm-primary);color:#fff}

/* ===== Pagination (desktop base) ===== */
.mm-pagination{
  display:flex;
  gap:10px;
  justify-content:center;
  margin-top:16px;
  scroll-behavior:smooth; /* para el auto-scroll del JS */
}
.mm-pagination .mm-page{
  min-width:38px;
  height:38px;
  padding:0 10px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:#fff;
  color:var(--mm-text);
  border:1px solid var(--mm-border);
  text-decoration:none;
  box-shadow:0 2px 8px rgba(17,24,39,.06);
  transition:transform .1s ease,box-shadow .1s ease,color .1s ease,border-color .1s ease,background .1s ease;
}
.mm-pagination .mm-page:hover{
  border-color:var(--mm-primary);
  color:var(--mm-primary);
  box-shadow:0 3px 10px rgba(58,57,114,.12);
}
.mm-pagination .mm-page.current{
  background:var(--mm-primary);
  color:#fff;
  border-color:var(--mm-primary);
  box-shadow:0 6px 16px rgba(58,57,114,.25);
}
.mm-pagination .disabled{opacity:.5;pointer-events:none}
.mm-pagination .mm-page:focus{outline:none}
.mm-pagination .mm-page:focus-visible{outline:2px solid rgba(58,57,114,.35);outline-offset:2px}

/* ===== Pagination — mobile mejorada ===== */
@media (max-width:767px){
  .mm-pagination{
    justify-content:flex-start;
    gap:8px;
    margin-top:14px;
    padding:8px 12px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    scroll-padding-inline:12px;
    /* colchón para que no la tape el bubble de chat/CTA */
    padding-bottom:max(8px, env(safe-area-inset-bottom));
    margin-bottom:72px;
  }
  .mm-pagination::-webkit-scrollbar{display:none}
  .mm-pagination .mm-page{
    flex:0 0 auto;
    scroll-snap-align:center;
    min-width:44px;
    height:44px;
    border-radius:14px;
    font-size:16px;
    padding:0 14px;
  }
}

/* ===== Responsive refinements ===== */
@media (max-width:767px){
  .mm-toolbar{flex-direction:column;align-items:stretch;gap:10px}
  .mm-count{text-align:center;width:100%;order:1}
  .mm-toolbar__right{width:100%;justify-content:center;order:2}
  .mm-open-drawer{flex-grow:1;justify-content:center}
  .mm-sort{flex-grow:1}
  .mm-sort select{width:100%}
  .mm-sort > span{display:none}
}