/* Catálogo en mobile. Va después del <style> de catalogo.html: las reglas mobile de site.css quedaban anuladas por ese bloque. */
@media (max-width: 768px) {
  html, body { overflow-x: clip; }

  .nav { height: 56px; }
  .nav-inner { padding: 0 14px; gap: 10px; }

  .stage-section { padding-top: 56px; }
  .filter-bar { top: 56px; padding: 10px 16px; }
  .combos-section { padding: 14px 16px; gap: 10px; }
  .combo-btn { padding: 8px 12px; }
  .brand-nav-wrap { padding: 14px 16px 0; }
  /* todas las marcas a la vista: en dos filas en vez de una fila con scroll oculto */
  .brand-nav-wrap { flex-wrap: wrap; overflow: visible; row-gap: 8px; }
  .brand-pill { padding: 9px 16px; }

  .grid-header { padding: 20px 16px 10px; gap: 10px; }
  .grid-title { font-size: 20px; letter-spacing: -.4px; }

  /* 2 columnas de tarjetas */
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 4px 16px 36px; }
  .product-grid.grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prod-card { border-radius: 18px; }
  .prod-card:hover { transform: none; }
  .card-img-wrap { height: 150px; }
  .card-img { height: 128px; }
  .card-overlay { display: none; }
  .card-badge { top: 8px; left: 8px; font-size: 8.5px; padding: 3px 8px; }
  .card-body { padding: 12px 12px 14px; }
  .card-brand-tag { margin-bottom: 8px; }
  .card-meta-row { flex-wrap: wrap; row-gap: 2px; margin-bottom: 8px; }
  .card-name { font-size: 15px; line-height: 1.2; }
  .card-meta-row:has(.card-name) { flex-direction: column; align-items: flex-start; gap: 3px; }
  .card-desc { font-size: 12px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .card-footer { flex-direction: column; align-items: stretch; gap: 10px; }
  .card-price { font-size: 18px; }
  .card-price-note { font-size: 10px; }
  .card-cta { width: 100%; padding: 11px 12px; font-size: 12px; }
  .card-cta:hover { transform: none; }

  /* modal como hoja que sube desde abajo */
  .modal-overlay { align-items: flex-end; }
  .modal-box { width: 100%; max-width: 100%; max-height: 92vh; grid-template-columns: 1fr; border-radius: 24px 24px 0 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .modal-img-pane { min-height: 210px; }
  .modal-prod-img { width: 170px; height: 170px; }
  .modal-content { padding: 22px 18px 28px; max-height: none; overflow: visible; }
  .modal-name { font-size: 24px; letter-spacing: -.8px; }
  .modal-price-box { padding: 12px 14px; gap: 12px; flex-wrap: wrap; }
  .modal-price { font-size: 26px; }

  .trust-footer { grid-template-columns: 1fr 1fr; padding: 24px 16px 96px; gap: 18px 14px; }
  .wa-float { right: 16px; bottom: 20px; width: 52px; height: 52px; }
}

@media (max-width: 340px) {
  .product-grid, .product-grid.grid-two { grid-template-columns: minmax(0, 1fr); }
}

/* Mecanismo de acción desplegable en el modal (todas las pantallas) */
.mech-drop{margin-top:14px;border:1.5px solid #bfdbfe;border-radius:12px;background:#f8fbff;overflow:hidden}
.mech-drop summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:12px 14px;font-size:14px;font-weight:800;color:#1d4ed8;user-select:none}
.mech-drop summary::-webkit-details-marker{display:none}
.mech-drop-ico{display:inline-flex;width:30px;height:30px;border-radius:9px;background:#dbeafe;align-items:center;justify-content:center;flex-shrink:0}
.mech-drop-arrow{margin-left:auto;transition:transform .25s ease;font-size:14px}
.mech-drop[open] .mech-drop-arrow{transform:rotate(180deg)}
.mech-drop-body{padding:4px 16px 16px;border-top:1px solid #dbeafe}
.mech-drop-name{font-size:17px;font-weight:900;color:#0f172a;margin-top:12px}
.mech-drop-sub{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#0369a1;margin-top:2px}
.modal-science .mech-drop-desc{font-size:14px;line-height:1.6;color:#334155;margin:10px 0 12px}
.btn-modal-buy{text-decoration:none!important;display:block;text-align:center}
.mech-drop-steps{margin:0;padding:0;list-style:none;counter-reset:ms;display:grid;gap:10px}
.mech-drop-steps li{counter-increment:ms;display:grid;grid-template-columns:28px 1fr;gap:10px;font-size:13.5px;line-height:1.5;color:#475569}
.mech-drop-steps li::before{content:counter(ms);width:28px;height:28px;border-radius:50%;background:#1d4ed8;color:#fff;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}
.mech-drop-steps strong{display:block;color:#0f172a;font-size:14px}
.mech-drop-src{font-size:11.5px;font-style:italic;color:#64748b;margin-top:12px}
.mech-drop-src:empty{display:none}

/* Opiniones del modal: capturas reales de clientes (todas las pantallas) */
.op-intro{font-size:13px;color:#475569;line-height:1.6;margin:0 0 10px}
.op-link{display:inline-block;margin:0 0 12px;font-size:14px;font-weight:700;color:#1a4fb6}
.op-sub{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#64748b;margin:14px 0 8px}
.op-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.op-shot{margin:0;background:#0f172a;border-radius:12px;padding:6px}
.op-shot img{display:block;width:100%;height:auto;max-height:340px;object-fit:cover;object-position:top;border-radius:8px}
.op-cta{display:block;margin-top:14px;text-align:center;padding:12px;border-radius:12px;border:1.5px solid #25D366;color:#15803d;font-weight:800;font-size:13px;text-decoration:none}
.op-cta:hover{background:#f0fdf4}