/* MN Metal Service — estilos de las mejoras (noviembre 2026). Se carga después de styles.css. */

/* Teléfonos tocables */
.mx-tel{color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.mx-tel:hover{text-decoration-color:currentColor}

/* Abierto / Cerrado */
.mx-open{display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;padding:6px 12px;border-radius:999px;font-size:.8rem;font-weight:700;border:1px solid var(--line);background:var(--bg-2);color:var(--ink-2)}
.mx-open i{width:8px;height:8px;border-radius:50%;background:var(--ink-3);flex:none}
.mx-open.is-open{color:#7ee2a3;border-color:rgba(34,163,90,.45)}
.mx-open.is-open i{background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:chatPulse 2.2s infinite}
.mx-open.is-closed{color:#f0a58a;border-color:rgba(224,90,34,.4)}
.mx-open.is-closed i{background:#e05a22}
.mx-open-sm{font-size:.74rem;padding:5px 10px;margin:6px 0 10px}
.hero-copy .mx-open{margin-top:18px}

/* Cómo llegar */
.mx-directions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.mx-directions-label{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);font-size:.86rem;font-weight:600;margin-right:4px}
.mx-directions-label svg{width:16px;height:16px}

/* Tarjetas de producto/servicio */
.product-footer{flex-wrap:wrap;row-gap:10px}
.product-price-note{color:#d9541c!important;font-weight:700;font-size:.76rem!important}
.mx-card-actions{display:flex;gap:8px;margin-left:auto}
.mx-wa-quote{background:var(--whatsapp);color:#fff;border-color:transparent}
.mx-wa-quote:hover{filter:brightness(1.08)}
.mx-wa-quote svg{width:15px;height:15px}

/* Buscador y filtros de productos */
#mxProdTools{margin-bottom:22px}
.mx-search{position:relative;max-width:520px;margin-bottom:14px}
.mx-search svg{position:absolute;left:14px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--ink-3);pointer-events:none}
.mx-search input{width:100%;font-family:var(--body);font-size:.95rem;padding:13px 16px 13px 42px;border-radius:var(--radius);border:1px solid var(--line);background:var(--bg-2);color:var(--ink);outline:none}
.mx-search input:focus{border-color:var(--silver-b)}
.mx-filters{margin-bottom:0}
.product-card[hidden]{display:none}
.mx-empty{text-align:center;padding:30px 20px;border:1px dashed var(--line);border-radius:var(--radius-lg);color:var(--ink-2)}
.mx-empty p{margin:0 0 14px}
.btn-whatsapp svg,.mx-empty svg{width:16px;height:16px}

/* Inicio: botones del hero */
.hero-actions .btn-whatsapp svg{width:18px;height:18px}
.mx-hero-sub{margin-top:14px;font-size:.88rem;color:var(--ink-2)}
.mx-hero-sub a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* Inicio: franja de promoción */
.mx-promo{background:linear-gradient(90deg,#b83a0a,#e05a22);color:#fff}
.mx-promo[hidden]{display:none}
.mx-promo-inner{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;padding:10px 0;text-align:center;font-weight:700;font-size:.92rem}
.mx-promo .btn-whatsapp{background:#fff;color:#14532d}

/* Inicio: productos destacados (carrusel deslizable) */
.mx-row-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.mx-row-head h2{margin:0}
.mx-row-head a{font-weight:700;font-size:.88rem;white-space:nowrap}
.mx-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(210px,1fr);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:thin}
.mx-strip a{scroll-snap-align:start;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;transition:.2s}
.mx-strip a:hover{border-color:var(--silver-b);transform:translateY(-2px)}
.mx-strip img{aspect-ratio:4/3;width:100%;object-fit:cover}
.mx-strip span{display:block;padding:12px 14px;font-weight:700;font-size:.92rem}
.mx-strip small{display:block;padding:0 14px 14px;color:var(--ink-2);font-size:.78rem;margin-top:-6px}

/* Inicio: nuestro trabajo (fotos reales) */
.mx-works{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:200px 200px;gap:14px}
.mx-works figure{position:relative;margin:0;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);background:var(--bg-2)}
.mx-works figure:first-child{grid-row:span 2}
.mx-works img{width:100%;height:100%;object-fit:cover;transition:.4s}
.mx-works figure:hover img{transform:scale(1.04)}
.mx-works figcaption{position:absolute;left:0;right:0;bottom:0;padding:30px 14px 12px;background:linear-gradient(to top,rgba(0,0,0,.82),transparent);font-weight:700;font-size:.88rem;color:#fff}

/* Inicio: cómo cotizar (3 pasos) */
.mx-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:mxstep}
.mx-step{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px}
.mx-step b{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:linear-gradient(155deg,#e05a22,#b83a0a);color:#fff;font-size:.9rem;margin-bottom:10px}
.mx-step h3{margin:0 0 6px;font-size:1.02rem}
.mx-step p{margin:0;color:var(--ink-2);font-size:.9rem}

/* Barra fija en celular */
.mx-bar{display:none}
@media(max-width:767px){
  .mx-bar{position:fixed;left:0;right:0;bottom:0;z-index:190;display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:rgba(12,14,16,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line)}
  .mx-bar-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:8px 4px;border-radius:12px;font-size:.74rem;font-weight:700;color:var(--ink);background:var(--bg-2);border:1px solid var(--line)}
  .mx-bar-btn svg{width:20px;height:20px}
  .mx-bar-wa{background:var(--whatsapp);border-color:transparent;color:#fff}
  .mx-bar-quote{background:linear-gradient(155deg,#e05a22,#b83a0a);border-color:transparent;color:#fff}
  body.mx-has-bar{padding-bottom:76px}
  body.mx-has-bar .wa-float{display:none}
  body.mx-has-bar .chat-float{bottom:88px;width:52px;height:52px}
  body.mx-has-bar .chat-panel{bottom:150px}
  body.mx-has-bar .cart-panel{bottom:84px}
  .mx-works{grid-template-columns:1fr 1fr;grid-template-rows:180px 130px 130px}
  .mx-works figure:first-child{grid-column:span 2;grid-row:auto}
  .mx-steps{grid-template-columns:1fr}
  .mx-card-actions{margin-left:0;width:100%}
  .mx-card-actions .btn{flex:1}
  .hero-actions .btn{flex:1 1 auto}
}
@media print{.mx-bar,.mx-promo,.mx-directions,.mx-open{display:none!important}}