/* ==========================================================
   MUNDO PUFF - CATÁLOGO BRANDEADO
   1. VARIABLES: colores, letras y tamaños principales
   ========================================================== */
.mpc-catalog{
  --mpc-accent:#079447;
  --mpc-dark:#034d2e;
  --mpc-black:#101514;
  --mpc-text:#121817;
  --mpc-muted:#66706d;
  --mpc-line:#e1e7e4;
  --mpc-soft:#f5f8f6;
  --mpc-radius:12px;
  --mpc-font:Arial,Helvetica,sans-serif;
  position:relative;
  width:100%;
  color:var(--mpc-text);
  font-family:var(--mpc-font);
  font-size:16px;
  line-height:1.45;
  background:#fff;
}
.mpc-catalog *{box-sizing:border-box}
.mpc-catalog button,.mpc-catalog input,.mpc-catalog select,.mpc-catalog textarea{font:inherit}
.mpc-catalog button,.mpc-catalog a{-webkit-tap-highlight-color:transparent}
.mpc-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mpc-shell{width:min(1360px,calc(100% - 40px));margin:0 auto;padding-bottom:96px}
.mpc-eyebrow{margin:0 0 5px;color:var(--mpc-accent);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}

/* ==========================================================
   2. PORTADA: título, subtítulo y beneficios
   ========================================================== */
.mpc-hero{overflow:hidden;color:#fff;background:linear-gradient(112deg,var(--mpc-dark),#026136 62%,#00522f)}
.mpc-hero__inner{width:min(1360px,calc(100% - 40px));min-height:250px;margin:auto;padding:38px 0;display:grid;grid-template-columns:minmax(420px,1.05fr) 1fr;align-items:center;gap:64px}
.mpc-hero__copy h1{max-width:650px;margin:0 0 8px;color:#fff;font-size:clamp(34px,3.2vw,54px);font-weight:700;line-height:1.02;letter-spacing:-.035em}
.mpc-hero__copy p{margin:0 0 20px;color:rgba(255,255,255,.9);font-size:clamp(18px,1.5vw,24px);font-weight:400}
.mpc-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.mpc-benefits>div{display:flex;align-items:center;gap:12px;color:#fff}
.mpc-benefits .dashicons{width:35px;height:35px;font-size:35px;color:#fff}
.mpc-benefits b{font-size:14px;line-height:1.3;font-weight:600}

/* ==========================================================
   3. BOTONES: color, borde, tamaño y negrita
   ========================================================== */
.mpc-btn{min-height:42px;padding:10px 16px;border:1px solid var(--mpc-accent);border-radius:8px;display:inline-flex;align-items:center;justify-content:center;gap:7px;color:#fff!important;background:var(--mpc-accent);font-size:14px;font-weight:600;line-height:1.2;text-decoration:none!important;cursor:pointer;transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease}
.mpc-btn:hover{color:#fff!important;background:#087d40;border-color:#087d40;transform:translateY(-1px);box-shadow:0 7px 18px rgba(4,93,49,.14)}
.mpc-btn:focus-visible,.mpc-category:focus-visible,.mpc-quote-fab:focus-visible,.mpc-drawer-close:focus-visible{outline:3px solid rgba(24,196,101,.35);outline-offset:2px}
.mpc-btn--hero{padding:11px 21px;background:#16bd63;border-color:#16bd63}
.mpc-btn--hero .dashicons{font-size:18px;width:18px;height:18px}
.mpc-btn--outline{color:var(--mpc-text)!important;background:#fff;border-color:#8ba59a}
.mpc-btn--outline:hover{color:var(--mpc-dark)!important;background:#f2faf5;border-color:var(--mpc-accent);box-shadow:none}

/* ==========================================================
   4. CATEGORÍAS DE WOOCOMMERCE
   ========================================================== */
.mpc-categories{margin:12px 0 26px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;scroll-margin-top:18px}
.mpc-category{min-height:102px;padding:12px 18px;border:1px solid var(--mpc-line);border-radius:var(--mpc-radius);display:grid;grid-template-columns:88px 1fr 20px;align-items:center;gap:14px;text-align:left;color:var(--mpc-text);background:#fafcfb;cursor:pointer;transition:border-color .18s ease,background .18s ease,transform .18s ease}
.mpc-category:nth-child(n+5){display:none}
.mpc-category:hover,.mpc-category.is-active{border-color:#b4d7c4;background:#eef9f3;transform:translateY(-1px)}
.mpc-category img{width:88px;height:76px;object-fit:contain;mix-blend-mode:multiply}
.mpc-category>span:first-of-type{font-size:17px;font-weight:700;line-height:1.18}
.mpc-category .dashicons{font-size:20px}

/* ==========================================================
   5. ENCABEZADO, BUSCADOR Y FILTROS
   ========================================================== */
.mpc-catalog-head{margin:0 0 12px;display:flex;align-items:end;justify-content:space-between;gap:30px}
.mpc-catalog-head h2{margin:0;font-size:34px;line-height:1.1;letter-spacing:-.025em}
.mpc-catalog-head>p{max-width:540px;margin:0 0 4px;color:var(--mpc-muted);font-size:14px;text-align:right}
.mpc-toolbar{display:grid;grid-template-columns:minmax(270px,1.6fr) repeat(4,minmax(150px,.7fr));gap:10px}
.mpc-toolbar select,.mpc-search{height:46px;border:1px solid #d7dfdb;border-radius:9px;background:#fff}
.mpc-toolbar select{width:100%;padding:0 36px 0 13px;color:#28312e;cursor:pointer}
.mpc-search{padding:0 14px;display:flex;align-items:center;gap:9px}
.mpc-search .dashicons{color:#7b8582}
.mpc-search input{width:100%;height:100%;padding:0;border:0!important;outline:0!important;color:var(--mpc-text);background:transparent!important;box-shadow:none!important}
.mpc-search input::placeholder{color:#8b9491}
.mpc-toolbar select:focus,.mpc-search:focus-within{outline:0;border-color:var(--mpc-accent);box-shadow:0 0 0 3px rgba(7,148,71,.1)}
.mpc-results-meta{min-height:31px;padding:10px 2px 4px;color:var(--mpc-muted);font-size:13px;text-align:right}

/* ==========================================================
   6. TARJETAS DE PRODUCTO: imagen, letras y cuadrícula
   ========================================================== */
.mpc-products{min-height:360px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.mpc-product-card{min-width:0;overflow:hidden;border:1px solid var(--mpc-line);border-radius:var(--mpc-radius);display:flex;flex-direction:column;background:#fff;box-shadow:0 4px 18px rgba(20,40,31,.035);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.mpc-product-card:hover{border-color:#c9d8d1;transform:translateY(-2px);box-shadow:0 9px 25px rgba(20,40,31,.08)}
.mpc-product-image{aspect-ratio:1.12/1;overflow:hidden;display:block;background:#f8faf9}
.mpc-product-image img{width:100%;height:100%;display:block;object-fit:contain;transition:transform .3s ease}
.mpc-product-card:hover .mpc-product-image img{transform:scale(1.025)}
.mpc-product-body{padding:13px 15px 15px;display:flex;flex:1;flex-direction:column;align-items:flex-start}
.mpc-badge{margin-bottom:7px;padding:3px 8px;border-radius:5px;color:#08713a;background:#d6f7e3;font-size:11px;font-weight:700}
.mpc-product-body h3{margin:0 0 5px;font-size:18px;font-weight:700;line-height:1.18}
.mpc-product-body h3 a{color:var(--mpc-text)!important;text-decoration:none!important}
.mpc-product-body p{min-height:40px;margin:0 0 14px;color:var(--mpc-muted);font-size:13px;line-height:1.4}
.mpc-price{width:100%;margin:-2px 0 12px;display:flex;align-items:baseline;gap:4px;flex-wrap:wrap;color:#36413d;font-size:12px}
.mpc-price strong{color:var(--mpc-dark);font-size:19px;font-weight:700;line-height:1}
.mpc-price small{color:var(--mpc-muted);font-size:10px}
.mpc-card-actions{width:100%;margin-top:auto;display:grid;grid-template-columns:.85fr 1.2fr;gap:8px}
.mpc-card-actions .mpc-btn{width:100%;padding:9px 10px;font-size:12.5px}
.mpc-loading,.mpc-empty{grid-column:1/-1;min-height:330px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;color:var(--mpc-muted);text-align:center}
.mpc-loading span{width:32px;height:32px;border:3px solid #dbe8e0;border-top-color:var(--mpc-accent);border-radius:50%;animation:mpc-spin .7s linear infinite}
.mpc-empty .dashicons{width:38px;height:38px;font-size:38px;color:#9cabA5}
.mpc-empty h3,.mpc-empty p{margin:0}
@keyframes mpc-spin{to{transform:rotate(360deg)}}

/* ==========================================================
   7. PAGINACIÓN
   ========================================================== */
.mpc-pagination{margin-top:24px;display:flex;justify-content:center;gap:7px}
.mpc-pagination button{width:40px;height:40px;border:1px solid var(--mpc-line);border-radius:7px;color:var(--mpc-text);background:#fff;cursor:pointer}
.mpc-pagination button:hover,.mpc-pagination button.is-current{color:#fff;background:var(--mpc-accent);border-color:var(--mpc-accent)}

/* ==========================================================
   8. BOTÓN FLOTANTE Y MENSAJES
   ========================================================== */
.mpc-quote-fab{position:fixed;right:24px;bottom:24px;z-index:9992;min-height:56px;padding:10px 18px;border:0;border-radius:999px;display:flex;align-items:center;gap:10px;color:#fff;background:var(--mpc-accent);box-shadow:0 10px 35px rgba(0,72,36,.3);cursor:pointer}
.mpc-quote-fab .dashicons{width:26px;height:26px;font-size:26px}
.mpc-quote-fab span:not(.dashicons){font-size:15px;font-weight:700}
.mpc-quote-fab b{min-width:25px;height:25px;padding:0 7px;border-radius:999px;display:grid;place-items:center;color:var(--mpc-dark);background:#fff;font-size:12px}
.mpc-toast{position:fixed;left:50%;bottom:30px;z-index:10002;padding:11px 18px;border-radius:8px;color:#fff;background:#18211e;box-shadow:0 8px 30px rgba(0,0,0,.2);opacity:0;pointer-events:none;transform:translate(-50%,14px);transition:.22s ease}
.mpc-toast.is-visible{opacity:1;transform:translate(-50%,0)}

/* ==========================================================
   9. PANEL DE COTIZACIÓN Y FORMULARIO
   ========================================================== */
.mpc-overlay{position:fixed;inset:0;z-index:9997;background:rgba(8,14,12,.58);backdrop-filter:blur(2px)}
.mpc-drawer{position:fixed;top:0;right:0;bottom:0;z-index:9998;width:min(560px,100%);padding:22px;overflow-y:auto;color:var(--mpc-text);background:#fff;box-shadow:-20px 0 55px rgba(0,0,0,.2);visibility:hidden;transform:translateX(102%);transition:transform .28s ease,visibility .28s}
.mpc-drawer.is-open{visibility:visible;transform:translateX(0)}
.mpc-drawer>header{position:sticky;top:-22px;z-index:2;margin:-22px -22px 18px;padding:22px;border-bottom:1px solid var(--mpc-line);display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.97)}
.mpc-drawer h2{margin:0;font-size:28px;line-height:1.1}
.mpc-drawer-close{width:42px;height:42px;border:1px solid var(--mpc-line);border-radius:50%;display:grid;place-items:center;background:#fff;cursor:pointer}
.mpc-drawer-close .dashicons{width:25px;height:25px;font-size:25px}
.mpc-quote-items{display:grid;gap:9px}
.mpc-quote-empty{padding:38px 15px;border:1px dashed #cad7d1;border-radius:10px;color:var(--mpc-muted);text-align:center}
.mpc-quote-item{padding:9px;border:1px solid var(--mpc-line);border-radius:10px;display:grid;grid-template-columns:70px 1fr auto;align-items:center;gap:11px}
.mpc-quote-item img{width:70px;height:70px;border-radius:7px;object-fit:contain;background:var(--mpc-soft)}
.mpc-quote-item h4{margin:0 0 7px;font-size:14px;line-height:1.2}
.mpc-qty{display:flex;align-items:center;gap:5px}
.mpc-qty button,.mpc-remove{border:1px solid var(--mpc-line);background:#fff;cursor:pointer}
.mpc-qty button{width:28px;height:28px;border-radius:6px}
.mpc-qty input{width:48px;height:28px;padding:0 4px;border:1px solid var(--mpc-line);border-radius:5px;text-align:center}
.mpc-remove{width:34px;height:34px;border-radius:50%;color:#9b2831}
.mpc-quote-form{margin-top:24px;padding-top:20px;border-top:1px solid var(--mpc-line)}
.mpc-quote-form h3{margin:0 0 13px;font-size:19px}
.mpc-quote-form>label,.mpc-form-grid label{display:grid;gap:5px;margin-bottom:11px;color:#39413f;font-size:13px;font-weight:600}
.mpc-quote-form small{color:var(--mpc-muted);font-weight:400}
.mpc-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 11px}
.mpc-quote-form input,.mpc-quote-form textarea{width:100%;padding:10px 11px;border:1px solid #d7dfdb;border-radius:7px;color:var(--mpc-text);background:#fff;outline:0}
.mpc-quote-form input:focus,.mpc-quote-form textarea:focus{border-color:var(--mpc-accent);box-shadow:0 0 0 3px rgba(7,148,71,.1)}
.mpc-form-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.mpc-form-status{min-height:20px;margin:10px 0 0;color:var(--mpc-muted);font-size:13px;text-align:center}
.mpc-hp{position:absolute!important;left:-9999px!important}
body.mpc-no-scroll{overflow:hidden}

/* ==========================================================
   10. TABLET
   ========================================================== */
@media (max-width:1100px){
  .mpc-hero__inner{grid-template-columns:1fr;gap:28px}
  .mpc-benefits{max-width:700px}
  .mpc-categories{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mpc-category:nth-child(n+5){display:grid}
  .mpc-toolbar{grid-template-columns:2fr repeat(2,1fr)}
  .mpc-toolbar>*:nth-child(n+4){display:none}
  .mpc-products{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ==========================================================
   11. MÓVIL: prioridad para teléfonos
   ========================================================== */
@media (max-width:767px){
  .mpc-shell,.mpc-hero__inner{width:min(100% - 24px,620px)}
  .mpc-shell{padding-bottom:92px}
  .mpc-hero__inner{min-height:0;padding:27px 0;gap:22px}
  .mpc-hero__copy h1{font-size:33px;line-height:1.04}
  .mpc-hero__copy p{font-size:17px;line-height:1.35}
  .mpc-benefits{grid-template-columns:repeat(3,1fr);gap:8px}
  .mpc-benefits>div{align-items:flex-start;gap:6px}
  .mpc-benefits .dashicons{width:24px;height:24px;font-size:24px}
  .mpc-benefits b{font-size:10.5px}
  .mpc-categories{margin:10px -12px 23px;padding:0 12px;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}
  .mpc-categories::-webkit-scrollbar{display:none}
  .mpc-category,.mpc-category:nth-child(n+5){min-width:205px;min-height:82px;padding:9px 12px;grid-template-columns:62px 1fr 18px;gap:9px;scroll-snap-align:start}
  .mpc-category img{width:62px;height:58px}
  .mpc-category>span:first-of-type{font-size:14px}
  .mpc-catalog-head{align-items:flex-start;flex-direction:column;gap:7px}
  .mpc-catalog-head h2{font-size:28px}
  .mpc-catalog-head>p{text-align:left;font-size:13px}
  .mpc-toolbar{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .mpc-toolbar .mpc-search{grid-column:1/-1}
  .mpc-toolbar>*:nth-child(n+4){display:none}
  .mpc-toolbar select,.mpc-search{height:44px;font-size:13px}
  .mpc-results-meta{text-align:left}
  .mpc-products{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .mpc-product-image{aspect-ratio:1/1}
  .mpc-product-body{padding:9px}
  .mpc-badge{font-size:9px}
  .mpc-product-body h3{font-size:14px}
  .mpc-product-body p{display:none}
  .mpc-price{margin:7px 0 5px;font-size:10px;gap:3px}
  .mpc-price strong{font-size:15px}
  .mpc-price small{font-size:8.5px}
  .mpc-card-actions{grid-template-columns:1fr;margin-top:9px}
  .mpc-card-actions .mpc-btn{min-height:36px;padding:7px;font-size:11px}
  .mpc-card-actions .mpc-btn--outline{display:none}
  .mpc-quote-fab{right:12px;bottom:12px;min-height:50px;padding:8px 13px}
  .mpc-quote-fab span:not(.dashicons){font-size:13px}
  .mpc-drawer{padding:16px}
  .mpc-drawer>header{top:-16px;margin:-16px -16px 16px;padding:16px}
  .mpc-form-grid,.mpc-form-actions{grid-template-columns:1fr}
}

@media (max-width:380px){
  .mpc-hero__copy h1{font-size:29px}
  .mpc-benefits b{font-size:9.5px}
  .mpc-product-body h3{font-size:13px}
}

@media (prefers-reduced-motion:reduce){
  .mpc-catalog *{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}
}