/* ============================================
   Maq Studio Catálogo v2.0.0
   (sin filtros — plugin separado)
   ============================================ */

:root {
  --maqc-black:   #0d0d0d;
  --maqc-bg:      #F8F8F8;
  --maqc-font-d:  'Inter', sans-serif;
  --maqc-font-b:  'DM Sans', sans-serif;
  --maqc-side:    clamp(1.5rem, 5vw, 4rem);
}

.maqstudio-catalogo {
  font-family: var(--maqc-font-b);
  font-size: 14px;
  line-height: 1.6;
  color: var(--maqc-black);
  background: var(--maqc-bg) !important;
  overflow-x: hidden;
  position: relative;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}
.maqstudio-catalogo *, .maqstudio-catalogo *::before, .maqstudio-catalogo *::after { box-sizing: border-box; }
.maqstudio-catalogo p, .maqstudio-catalogo h2, .maqstudio-catalogo h3 { margin: 0; padding: 0; }

/* ── GRID ── */
.maq-catalogo-grid-wrapper {
  padding: 2rem var(--maqc-side) 7rem;
  background: var(--maqc-bg);
}

.maq-catalogo-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 2.4rem 2rem;
  align-items: start;
}

.maq-producto-card {
  position: relative; cursor: pointer;
  opacity: 0; transform: translateY(14px);
  animation: maqCardIn .4s cubic-bezier(.25,.46,.45,.94) forwards;
  transition: transform .35s cubic-bezier(.25,.46,.45,.94), box-shadow .35s ease;
  width: 90%;
  margin: 0 auto;
  will-change: transform;
}
.maq-producto-card:hover { transform: translateY(-5px) !important; }
.maq-producto-card:hover .maq-producto-imagen { border-color: rgba(60,60,60,.32); box-shadow: 0 8px 24px rgba(0,0,0,.1); }
@keyframes maqCardIn {
  0%   { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}

.maq-producto-imagen {
  position: relative; aspect-ratio: 1/1; overflow: hidden;
  background: #e4e4e4 !important; border-radius: 12px; margin-bottom: .8rem;
  border: 1px solid rgba(60,60,60,.18);
  box-sizing: border-box;
}
.maq-producto-imagen img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .6s cubic-bezier(.25,.46,.45,.94); display: block; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; }
.maq-producto-card:hover .maq-producto-imagen img { transform: scale(1.04); }

.maq-producto-img-placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem; }
.maq-producto-img-placeholder svg { width: 40px; height: 40px; stroke: rgba(0,0,0,.18); fill: none; stroke-width: 1; }
.maq-producto-img-placeholder span { font-size: 11px !important; letter-spacing: .12em; text-transform: uppercase; color: rgba(0,0,0,.28) !important; }

.maq-producto-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.18); opacity: 0; transition: opacity .3s; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 1.2rem; gap: .5rem; border-radius: 12px; }
.maq-producto-card:hover .maq-producto-overlay { opacity: 1; }

.maq-overlay-qty { display: flex; align-items: center; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.5); border-radius: 50px; padding: 0 4px; }
.maq-overlay-qty button { all: unset !important; width: 34px !important; height: 34px !important; color: #fff !important; font-size: 14px !important; cursor: pointer !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.maq-overlay-qty button:hover { background: rgba(255,255,255,.25) !important; }
.maq-overlay-qty input { width: 36px !important; background: transparent !important; border: none !important; color: #fff !important; text-align: center !important; font-size: 14px !important; font-weight: 700 !important; -moz-appearance: textfield; outline: none !important; box-shadow: none !important; }
.maq-overlay-qty input::-webkit-outer-spin-button, .maq-overlay-qty input::-webkit-inner-spin-button { -webkit-appearance: none; }

.maq-overlay-agregar { display: inline-flex !important; align-items: center; gap: .5rem; padding: .65rem 1.4rem; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background: rgba(255,255,255,.85) !important; border: 1px solid rgba(255,255,255,.5) !important; color: #0d0d0d !important; font-family: var(--maqc-font-b) !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: .04em; text-transform: uppercase; border-radius: 50px !important; cursor: pointer !important; white-space: nowrap; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.maq-overlay-agregar:hover { background: #fff !important; }
.maq-overlay-agregar.added { background: #22c55e !important; color: #fff !important; }
.maq-overlay-agregar svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.5; }

.maq-producto-categoria { font-size: 14px !important; letter-spacing: .05em !important; text-transform: uppercase !important; color: rgba(0,0,0,.45) !important; margin-bottom: .25rem !important; }
.maq-producto-nombre    { font-size: 14px !important; font-weight: 600 !important; color: #0d0d0d !important; line-height: 1.3 !important; margin-bottom: .2rem !important; }
.maq-producto-cod       { font-size: 13px !important; color: rgba(0,0,0,.38) !important; }

.maq-sin-resultados { display: none; grid-column: 1/-1; text-align: center; padding: 5rem 0; }
.maq-sin-resultados.visible { display: block; }
.maq-sin-resultados p { font-family: var(--maqc-font-d) !important; font-size: 1.4rem !important; font-weight: 300 !important; color: rgba(0,0,0,.4) !important; }

/* ── MODAL ── */
.maq-modal-overlay { position: fixed !important; inset: 0 !important; background: rgba(0,0,0,.45) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 999999 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 2rem; opacity: 0; pointer-events: none; transition: opacity .3s; }
.maq-modal-overlay.open { opacity: 1 !important; pointer-events: all !important; }
.maq-modal { background: #fff !important; border-radius: 20px; max-width: 1075px; width: 100%; max-height: 90vh; overflow: hidden; position: relative; display: grid !important; grid-template-columns: 1fr 1fr !important; box-shadow: 0 20px 70px rgba(0,0,0,.2); transform: translateY(18px); transition: transform .3s; }
.maq-modal-overlay.open .maq-modal { transform: translateY(0) !important; }
.maq-modal-close { position: absolute !important; top: 1rem !important; right: 1rem !important; width: 34px !important; height: 34px !important; background: rgba(0,0,0,.07) !important; border: none !important; border-radius: 50% !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 10 !important; }
.maq-modal-close:hover { background: rgba(0,0,0,.13) !important; }
.maq-modal-close svg { width: 12px; height: 12px; stroke: #000; fill: none; stroke-width: 2; }
.maq-modal-imagen-wrap { position: relative; overflow: hidden; background: #f0f0f0; }
.maq-modal-imagen { aspect-ratio: 1/1; background: #ebebeb; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.maq-modal-imagen img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: opacity .3s ease; image-rendering: -webkit-optimize-contrast; }
.maq-modal-img-prev, .maq-modal-img-next { position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; width: 36px; height: 36px; background: rgba(255,255,255,.8); border: 1px solid rgba(0,0,0,.08); border-radius: 50%; cursor: pointer; display: none; align-items: center; justify-content: center; z-index: 5; }
.maq-modal-img-prev { left: .7rem; }
.maq-modal-img-next { right: .7rem; }
.maq-modal-img-prev svg, .maq-modal-img-next svg { width: 16px; height: 16px; stroke: #000; fill: none; stroke-width: 2; }
.maq-modal-img-dots { display: flex; justify-content: center; gap: .45rem; padding: .7rem 0 .5rem; background: #fff; }
.maq-modal-img-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(0,0,0,.15); border: 2px solid rgba(0,0,0,.25); cursor: pointer; padding: 0; transition: all .2s; }
.maq-modal-img-dot.active { background: #000; border-color: #000; transform: scale(1.25); }
.maq-modal-body { padding: 3rem 2.5rem 2.5rem; display: flex; flex-direction: column; justify-content: center; overflow-y: auto; }
.maq-modal-eyebrow { font-size: 16px !important; letter-spacing: .12em; text-transform: uppercase; color: #999 !important; margin-bottom: .6rem !important; }
.maq-modal-nombre  { font-family: var(--maqc-font-d) !important; font-size: clamp(1.9rem,3.2vw,2.8rem) !important; font-weight: 300 !important; color: #000 !important; margin-bottom: .3rem !important; line-height: 1.1 !important; }
.maq-modal-cod     { font-size: 16px !important; color: #aaa !important; margin-bottom: 1.2rem !important; }
.maq-modal-desc    { font-size: 16px !important; color: #555 !important; line-height: 1.75 !important; margin-bottom: 1.5rem !important; padding-bottom: 1.5rem !important; border-bottom: 1px solid rgba(0,0,0,.08) !important; }
.maq-modal-pedido { display: flex; flex-direction: column; gap: .85rem; }
.maq-modal-qty { display: flex; align-items: center; background: rgba(0,0,0,.04); border: 1px solid rgba(0,0,0,.09); border-radius: 50px; padding: 0 4px; width: fit-content; }
.maq-modal-qty button { all: unset !important; width: 42px !important; height: 42px !important; cursor: pointer !important; font-size: 20px !important; color: #000 !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; font-family: var(--maqc-font-b) !important; }
.maq-modal-qty button:hover { background: rgba(0,0,0,.07) !important; }
.maq-modal-qty input { all: unset !important; width: 50px !important; height: 42px !important; text-align: center !important; font-size: 18px !important; font-weight: 600 !important; color: #000 !important; font-family: var(--maqc-font-b) !important; }
.maq-btn-agregar { all: unset !important; width: 100% !important; padding: 1rem 1.5rem !important; background: #0d0d0d !important; border-radius: 12px !important; color: #fff !important; font-family: var(--maqc-font-b) !important; font-size: 16px !important; font-weight: 600 !important; letter-spacing: .06em; text-transform: uppercase; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: .5rem; transition: background .2s; box-sizing: border-box !important; }
.maq-btn-agregar:hover { background: #222 !important; }
.maq-btn-agregar svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.maq-btn-agregar.added { background: #22c55e !important; }

/* ── FAB ── */
.maq-carrito-fab { position: fixed !important; bottom: 2rem !important; right: 2rem !important; z-index: 99990 !important; display: flex !important; align-items: center; gap: .72rem; padding: 1.1rem 2.35rem 1.1rem 1.7rem !important; background: rgba(13,13,13,.88) !important; color: #fff !important; border: 1.5px solid rgba(255,255,255,.15) !important; border-radius: 50px !important; cursor: pointer !important; box-shadow: 0 8px 32px rgba(0,0,0,.3); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); font-family: var(--maqc-font-b) !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; transition: transform .3s, background .3s; }
.maq-carrito-fab:hover { transform: translateY(-3px) !important; background: #000 !important; }
.maq-carrito-fab svg { width: 23px !important; height: 23px !important; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; }
.maq-carrito-fab > span:first-of-type { color: #fff !important; font-size: 15px !important; font-weight: 700 !important; }
.maq-carrito-badge { display: none; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 6px; background: #22c55e !important; border-radius: 50px; font-size: 13px !important; font-weight: 700 !important; color: #fff !important; }

/* ── PANEL OVERLAY ── */
.maq-pedido-overlay { position: fixed !important; inset: 0 !important; background: rgba(0,0,0,.35) !important; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 99991 !important; opacity: 0; pointer-events: none; transition: opacity .4s; }
.maq-pedido-overlay.open { opacity: 1 !important; pointer-events: all !important; }

/* ── PANEL ── */
.maq-pedido-panel { position: fixed !important; top: var(--maqc-panel-top, 5.5rem) !important; right: -460px !important; bottom: 1rem !important; width: 440px !important; max-width: calc(100vw - 2rem) !important; background: rgba(255,255,255,.98) !important; border: 1px solid rgba(0,0,0,.06) !important; border-radius: 18px !important; z-index: 99992 !important; display: flex !important; flex-direction: column; box-shadow: -4px 0 50px rgba(0,0,0,.15); transition: right .4s cubic-bezier(.4,0,.2,1) !important; overflow: hidden !important; }
.maq-pedido-panel.open { right: 1rem !important; }
/* Ajustar top del panel desde CSS del tema si es necesario */
:root { --maqc-panel-top: 5.5rem; }
.maq-pedido-header { padding: 1.4rem 1.5rem 1.1rem; border-bottom: 1px solid rgba(0,0,0,.06); display: flex; align-items: center; justify-content: space-between; }
.maq-pedido-titulo { font-family: var(--maqc-font-d) !important; font-size: 1.5rem !important; font-weight: 300 !important; color: #000 !important; }
.maq-pedido-cerrar { all: unset !important; width: 32px !important; height: 32px !important; background: rgba(0,0,0,.06) !important; border-radius: 50% !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.maq-pedido-cerrar:hover { background: rgba(0,0,0,.12) !important; }
.maq-pedido-cerrar svg { width: 11px; height: 11px; stroke: #000; fill: none; stroke-width: 2; }
.maq-pedido-items { flex: 1; overflow-y: auto; padding: .8rem 1.5rem; }
.maq-pedido-vacio { text-align: center; padding: 2.5rem 1rem; }
.maq-pedido-vacio svg { width: 48px; height: 48px; stroke: #ccc; fill: none; stroke-width: 1; margin: 0 auto .8rem; display: block; }
.maq-pedido-vacio p { font-size: 14px !important; line-height: 1.65 !important; color: #aaa !important; }
.maq-pedido-item { display: grid !important; grid-template-columns: 1fr auto !important; gap: .7rem; align-items: center; padding: .85rem 0; border-bottom: 1px solid rgba(0,0,0,.05); }
.maq-pedido-item:last-of-type { border-bottom: none; }
.maq-pedido-item-nombre { font-family: var(--maqc-font-d) !important; font-size: 14px !important; font-weight: 500 !important; color: #000 !important; margin-bottom: .15rem !important; line-height: 1.2 !important; }
.maq-pedido-item-cod { font-size: 13px !important; color: #aaa !important; text-transform: uppercase; }
.maq-pedido-item-right { display: flex; align-items: center; gap: .5rem; }
.maq-pedido-item-qty { display: flex; align-items: center; background: rgba(0,0,0,.04); border: 1px solid rgba(0,0,0,.08); border-radius: 50px; padding: 0 2px; }
.maq-pedido-item-qty button { all: unset !important; width: 26px !important; height: 26px !important; cursor: pointer !important; font-size: .95rem !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; color: #000 !important; }
.maq-pedido-item-qty button:hover { background: rgba(0,0,0,.08) !important; }
.maq-pedido-item-qty span { width: 28px; text-align: center; font-size: 14px !important; font-weight: 600 !important; color: #000 !important; }
.maq-pedido-item-eliminar { all: unset !important; cursor: pointer !important; width: 24px !important; height: 24px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: .7rem !important; color: #bbb !important; }
.maq-pedido-item-eliminar:hover { background: rgba(239,68,68,.1) !important; color: #ef4444 !important; }
.maq-pedido-form { padding: 1rem 1.5rem .8rem; border-top: 1px solid rgba(0,0,0,.06); background: rgba(0,0,0,.015); }
.maq-pedido-form-titulo { font-size: 13px !important; font-weight: 700 !important; letter-spacing: .12em; text-transform: uppercase; color: #666 !important; margin-bottom: .8rem !important; }
.maq-pedido-form-grid { display: flex; flex-direction: column; gap: .5rem; }
.maq-pedido-form-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: .5rem; }
.maq-pedido-field { display: flex; flex-direction: column; gap: .2rem; }
.maq-pedido-field label { font-size: 13px !important; font-weight: 600 !important; letter-spacing: .06em; text-transform: uppercase; color: #666 !important; }
.maq-pedido-field input { all: unset !important; width: 100% !important; box-sizing: border-box !important; padding: .55rem .75rem !important; border: 1px solid rgba(0,0,0,.12) !important; border-radius: 8px !important; background: rgba(255,255,255,.9) !important; font-size: 14px !important; color: #000 !important; transition: border-color .2s; }
.maq-pedido-field input::placeholder { color: rgba(0,0,0,.3); font-size: 13px; }
.maq-pedido-field input:focus { border-color: rgba(0,0,0,.35) !important; background: #fff !important; }
.maq-pedido-footer { padding: 1.1rem 1.5rem; border-top: 1px solid rgba(0,0,0,.06); display: flex; flex-direction: column; gap: .6rem; }
.maq-pedido-resumen { font-size: 14px !important; color: #666 !important; text-align: center; }
.maq-btn-enviar-pedido { all: unset !important; width: 100% !important; box-sizing: border-box !important; padding: .95rem !important; background: #25d366 !important; border-radius: 12px !important; font-family: var(--maqc-font-b) !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: .05em; text-transform: uppercase; color: #fff !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: .6rem; transition: background .2s; }
.maq-btn-enviar-pedido:hover { background: #16a34a !important; }
.maq-btn-enviar-pedido:disabled { background: rgba(0,0,0,.07) !important; color: #aaa !important; cursor: not-allowed !important; }
.maq-btn-enviar-pedido svg { width: 16px; height: 16px; fill: #fff; flex-shrink: 0; }
.maq-btn-limpiar { all: unset !important; width: 100% !important; box-sizing: border-box !important; padding: .55rem !important; background: transparent !important; border: 1px solid rgba(0,0,0,.1) !important; border-radius: 8px !important; font-size: 14px !important; color: #aaa !important; cursor: pointer !important; text-align: center !important; transition: border-color .2s, color .2s; }
.maq-btn-limpiar:hover { border-color: #ef4444 !important; color: #ef4444 !important; }

/* ── Responsive ── */
@media (max-width: 1100px) { .maq-catalogo-grid { grid-template-columns: repeat(3,1fr) !important; } }
@media (max-width: 768px) {
  .maq-catalogo-grid-wrapper { padding: 1.5rem 1.2rem 5rem !important; }
  .maq-catalogo-grid { grid-template-columns: repeat(2,1fr) !important; gap: 1.8rem 1.2rem !important; }
  .maq-modal { grid-template-columns: 1fr !important; max-height: 92vh; border-radius: 14px; overflow-y: auto; }
  .maq-modal-body { padding: 1.4rem !important; }
  .maq-pedido-panel { width: 100% !important; right: -100% !important; }
  .maq-carrito-fab { bottom: 1.2rem !important; right: 1.2rem !important; padding: .9rem 1.5rem !important; font-size: 14px !important; }
}
@media (max-width: 480px) { .maq-catalogo-grid { grid-template-columns: repeat(2,1fr) !important; gap: .7rem !important; } }