/* MIGRACIÓN: ajustes de header */
.navbar-brand .site-name{ display:none; }
.navbar-brand.brand-tight{ margin-left:-18px; }
.navbar-brand .brand-logo{ height:72px; }
@media (max-width:576px){
  .navbar-brand .brand-logo{ height:62px; }
}

/* MIGRACIÓN: franja roja de beneficios */
.mm-benefits-band{
  background:#cc2427; /* rojo Metal Motor */
}
.mm-benefits-band .mm-benefit{
  position:relative;
}

/* ====== HERO/CARRUSEL ====== */
.mm-hero .carousel-item{
  height: 74vh;           /* más alto en desktop */
  min-height: 420px;
}
.mm-hero .carousel-item img{
  width:100%;
  height:100%;
  object-fit: cover;      /* llena sin deformar */
  object-position: center;
}
/* overlay suave para dar contraste si hay caption */
.mm-hero .mm-hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.15));
  pointer-events:none;
}
/* móviles: un poco más alto que antes */
@media (max-width:576px){
  .mm-hero {
    height: 15vh;
    min-height: 160px;

  }    
  .mm-hero .carousel-item{
    height: 18vh;
    min-height: 140px;
  }
}

/* divisores verticales entre columnas en md+ */
@media (min-width: 768px){
  .mm-benefits-band .mm-benefit + .mm-benefit{
    border-left:1px solid #ffffff;          /* fallback */
    border-left:1px solid rgba(255,255,255,.6);
  }
}
/* tipografía y respiración */
.mm-benefits-band h3{ letter-spacing:.2px; }
.mm-benefits-band p{ opacity:.95; }

/* ====== MOBILE TUNING: banda roja ====== */
@media (max-width: 576px){
  .mm-benefits-band {
    padding-top: .2rem ;
    padding-bottom: .2rem ;
    min-height: 110px;
  }    
  .mm-benefits-band .mm-benefit{
    padding-top: 1.0rem !important;
    padding-bottom: 0.42rem !important;
  }
  .mm-benefits-band h3{
    font-size: 0.9rem;      /* ~18px */
    margin-bottom: .05rem;
  }
  .mm-benefits-band p{
    font-size: .76rem;        /* un poco más chico */
    line-height: 1.35;
    opacity: .72;
    padding-top: .02rem ;
    padding-bottom: .02rem ;    
  }
}



/* ====== SECCIONES GENÉRICAS ====== */
.mm-section{ padding:4rem 0; }
.mm-section--light{ background:#fff; }
.mm-section--grey{ background:#f7f7f8; }
@media (max-width:576px){ .mm-section{ padding:2.25rem 0; } }

/* ====== LA EMPRESA ====== */
.mm-company h2{ font-weight:700; margin-bottom:.75rem; }
.mm-company .lead{ font-size:1.1rem; color:#61626a; }


@media (max-width:576px){
  .mm-prose{font-size:0.05rem;line-height:0.75}
  .mm-prose p{margin:.5rem 0 1rem}
  .mm-prose ul,.mm-prose ol{padding-left:0.25rem;margin:.25rem 0 1rem} 
}

/* CONTACT upgrades */
.mm-contact .contact-card{
  background:#fff; border-radius:1rem;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  padding:1rem 1.25rem;
}
.mm-contact .map-wrap{ border-radius:1rem; overflow:hidden; box-shadow:0 10px 24px rgba(0,0,0,.06); }
.mm-contact .form-control{ border-radius:.6rem; border:1px solid #d7d7dc; }
.mm-contact .form-control:focus{ border-color:#c82024; box-shadow:0 0 0 .2rem rgba(200,32,36,.15); }
@media (max-width:576px){
  .mm-contact .contact-card{ padding:.85rem 1rem; }
  .mm-contact h2{ font-size:1.15rem; }
}

/* ====== FOOTER ====== */
.mm-footer{ background:#111316; color:#c9c9cf; }
.mm-footer a{ color:#c9c9cf; text-decoration:none; }
.mm-footer a:hover{ color:#fff; text-decoration:underline; }
.mm-footer .mm-logo-white{ height:42px; filter:brightness(0) invert(1); }
.mm-footer .copyright{
  border-top:1px solid rgba(255,255,255,.08);
  margin-top:1.25rem; padding-top:1rem; color:#9ea0a6; font-size:.92rem;
}

/* ====== (Fix) fallback del divisor RGBA que te marcaba warning ====== */
@media (min-width:768px){
  .mm-benefits-band .mm-benefit + .mm-benefit{
    border-left:1px solid #ffffff;               /* fallback */
    border-left:1px solid rgba(255,255,255,.6);  /* principal */
  }
}


/* ============================================
   PRODUCTOS – Versión mobile (≤ 576px)
   Convierte la tabla en "cards", hace sticky el botón Ver mi pedido,
   compacta controles y mejora legibilidad.
   ============================================ */
@media (max-width: 575.98px){

  /* Titulado + respiros */
  #prod-root header .display-6{ font-size:1.6rem; }

  /* Controles superiores más compactos */
  .mm-controls{ gap:.5rem; }
  .mm-controls .form-control,
  .mm-controls .form-select{ height:38px; }
  .mm-controls .small.text-muted{ display:none; } /* oculta “resultados — scroll…” en mobile */

  /* Botón “Ver mi pedido / presupuesto” flotante */
  .mm-sticky-order{
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 1040;
    border-radius: 9999px;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
  }

  /* Tabla -> Cards */
  table.mm-products{ border-collapse:separate; border-spacing:0 .85rem; }
  table.mm-products thead{ display:none; }

  table.mm-products tbody tr{
    display:block;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius: .9rem;
    overflow:hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
  }

  table.mm-products tbody td{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:.75rem;
    padding:.7rem .95rem !important;
    border:0 !important;
    line-height:1.25;
  }

  /* Labels de cada “campo” (según orden actual: Código, Descripción, Marca, Precio, Acciones) */
  table.mm-products tbody td:nth-child(1)::before{ content:"Código"; font-weight:600; color:#6b7280; }
  table.mm-products tbody td:nth-child(2)::before{ content:"Descripción"; font-weight:600; color:#6b7280; }
  table.mm-products tbody td:nth-child(3)::before{ content:"Marca"; font-weight:600; color:#6b7280; }
  table.mm-products tbody td:nth-child(4)::before{ content:"Precio"; font-weight:600; color:#6b7280; }
  table.mm-products tbody td:nth-child(5)::before{ content:"Acciones"; font-weight:600; color:#6b7280; }

  /* Contenidos: alineaciones y jerarquías */
  table.mm-products tbody td:nth-child(1),
  table.mm-products tbody td:nth-child(3),
  table.mm-products tbody td:nth-child(4){
    text-align:right;
  }

  table.mm-products tbody td:nth-child(2){
    flex-wrap:wrap;
    text-align:right;
  }

  /* Precio: resaltá la línea con utilidad y escondé costo si marcan “Ocultar costo” */
  #prod-root.hide-cost .mm-price-cost{ display:none; }
  .mm-price-util{ color:#b91c1c; font-weight:700; }

  /* Semáforo alineado */
  .mm-dot{ margin-right:.35rem; }

  /* Acciones en una columna vertical, botón full-width */
  table.mm-products tbody td:nth-child(5) form{
    width:100%;
    justify-content:flex-end;
  }
  table.mm-products tbody td:nth-child(5) .mm-qty-inp{
    max-width:88px;
  }
  table.mm-products tbody td:nth-child(5) .btn{
    width:42%;
    min-width:120px;
  }

  /* Badge de cantidad al agregar (ya lo trae el HTML) */
  .mm-qty-wrap{ position:relative; display:inline-block; }
  .mm-qty-badge{
    position:absolute; right:-6px; top:-8px;
    background:#dc3545; color:#fff; font-weight:600;
    border-radius:9999px; font-size:.72rem; line-height:1;
    padding:.16rem .42rem; min-width:1.05rem; text-align:center;
    display:none;
  }

  /* Fila “seleccionada” luego de agregar */
  tr.mm-row-selected{ background:#fff4f4; }

  /* Detalle largo (el + / −) más respirado */
  .mm-desc-long{ margin-top:.35rem; }
}

/* Un poco más de aire en 576–768px también */
@media (min-width:576px) and (max-width: 768.98px){
  table.mm-products tbody tr{ border-radius:.75rem; }
  table.mm-products tbody td{ padding:.6rem .9rem !important; }
}



/* =========================================================
   MI PEDIDO – versión mobile (≤ 576px)
   Convierte la tabla en “cards”, ordena inputs y hace sticky
   el botón “Efectuar la compra”.
   ========================================================= */
@media (max-width: 575.98px){

  /* Botón principal flotante */
  .mm-sticky-checkout{
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 1040;
    border-radius: 9999px;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
  }

  /* Tabla -> cards */
  table.mm-cart{ border-collapse:separate; border-spacing:0 .85rem; }
  table.mm-cart thead{ display:none; }

  table.mm-cart tbody tr{
    display:block;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius: .9rem;
    overflow:hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
  }

  table.mm-cart tbody td,
  table.mm-cart tbody th{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:.75rem;
    padding:.7rem .95rem !important;
    border:0 !important;
    line-height:1.25;
  }

  /* Labels por columna:
     1 Código | 2 Detalle | 3 Marca | 4 % Utilidad ítem
     5 Precio | 6 Cantidad | 7 Subtotal | 8 Acciones  */
  table.mm-cart tbody td:nth-child(1)::before{ content:"Código"; font-weight:600; color:#6b7280; }
  table.mm-cart tbody td:nth-child(2)::before{ content:"Detalle"; font-weight:600; color:#6b7280; }
  table.mm-cart tbody td:nth-child(3)::before{ content:"Marca"; font-weight:600; color:#6b7280; }
  table.mm-cart tbody td:nth-child(4)::before{ content:"% Utilidad"; font-weight:600; color:#6b7280; }
  table.mm-cart tbody td:nth-child(5)::before{ content:"Precio"; font-weight:600; color:#6b7280; }
  table.mm-cart tbody td:nth-child(6)::before{ content:"Cantidad"; font-weight:600; color:#6b7280; }
  table.mm-cart tbody td:nth-child(7)::before{ content:"Subtotal"; font-weight:600; color:#6b7280; }
  table.mm-cart tbody td:nth-child(8)::before{ content:"Acciones"; font-weight:600; color:#6b7280; }

  /* Alineaciones */
  table.mm-cart tbody td:nth-child(1),
  table.mm-cart tbody td:nth-child(3),
  table.mm-cart tbody td:nth-child(5),
  table.mm-cart tbody td:nth-child(7){
    text-align:right;
  }
  table.mm-cart tbody td:nth-child(2){ text-align:right; max-width:62vw; }

  /* Inputs/Forms más tocables */
  table.mm-cart tbody td form{ width:100%; justify-content:flex-end; flex-wrap:wrap; gap:.5rem; }
  table.mm-cart input[type="number"]{ max-width:96px; }
  table.mm-cart .btn.btn-sm{ min-width:90px; }

  /* Total en el tfoot como card */
  table.mm-cart tfoot tr{
    display:block;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:.9rem;
    box-shadow:0 2px 8px rgba(0,0,0,.04);
    margin-top:.85rem;
  }
  table.mm-cart tfoot th{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:.9rem 1rem !important;
    border:0 !important;
  }
  table.mm-cart tfoot th:first-child::before{ content:"TOTAL"; font-weight:700; color:#111827; }
  table.mm-cart tfoot .mm-price small{ display:block; line-height:1.1; }
  table.mm-cart tfoot .mm-price .util{ color:#b91c1c; font-weight:700; }
}

/* Un poco más de aire en 576–768px también */
@media (min-width:576px) and (max-width: 768.98px){
  table.mm-cart tbody tr{ border-radius:.75rem; }
  table.mm-cart tbody td{ padding:.6rem .9rem !important; }
}