/* Quantum Hardstore · ficha de producto (CATALOGO/cat-*.html)
   Un solo archivo para todas las fichas del rediseño: cambiar acá cambia todas.
   La ficha se muestra dentro de la columna de descripción de la tienda: 638 px en
   escritorio, ~313 px en celular, y sólo 320 / 260 px visibles antes del "Ver más". */
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:transparent}
body{font-family:Montserrat,Arial,sans-serif;font-weight:500;color:#1C1C1C;font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
.qd{padding:2px 0 8px}

/* 1 · Datos clave: bloque negro */
.qd-key{background:#1C1C1C;border-radius:12px;padding:6px 16px;color:#F5F5F5}
.qd-key--outlet{border-radius:12px 12px 0 0}
.qd-key div{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:10px 0;border-bottom:1px solid #3a3a3a;line-height:1.25}
.qd-key div:last-child{border-bottom:0}
.qd-key span{flex:none;font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#D3D3D3}
.qd-key b{font-size:15px;font-weight:800;text-align:right;overflow-wrap:anywhere}
.qd-key div:first-child b{color:#FF4FA5}

/* 2 · Aviso de depósito. Escritorio: tres pasos. Celular: pie pegado al bloque negro */
.qd-pasos{margin:12px 0 0;display:grid;grid-template-columns:1fr 1fr 1fr;counter-reset:n}
.qd-pasos div{position:relative;padding:0 10px 0 34px;counter-increment:n;line-height:1.3}
.qd-pasos div::before{content:counter(n);position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;background:#1C1C1C;color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.qd-pasos div:nth-child(2)::before{background:#FF007F}
.qd-pasos b{display:block;font-size:13px;font-weight:800}
.qd-pasos span{display:block;font-size:11.5px;color:#5E5E5E}
.qd-pie{display:none;align-items:center;gap:10px;background:#F5F5F5;border:1px solid #D3D3D3;border-top:0;border-radius:0 0 12px 12px;padding:9px 14px;font-size:12px;line-height:1.35}
.qd-pie--fijo{display:flex}
.qd-pie svg{flex:none;width:20px;height:20px;fill:none;stroke:#FF007F;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.qd-pie b{font-weight:800}

/* 3 · Ficha técnica: tabla de dos columnas */
.qd-h{margin:22px 0 6px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.qd-h::before{content:"";width:8px;height:8px;background:#FF007F;border-radius:2px;flex:none}
.qd-t{width:100%;border-collapse:collapse}
.qd-t th,.qd-t td{text-align:left;vertical-align:top;padding:9px 0;border-bottom:1px solid #E6E6E6;font-size:13.5px}
.qd-t th{width:38%;font-weight:600;color:#5E5E5E;padding-right:12px}
.qd-t td{font-weight:600;color:#1C1C1C;overflow-wrap:anywhere}

.qd-note{margin:14px 0 0;font-size:11.5px;color:#6b6b6b;line-height:1.5}

@media (max-width:480px){
  .qd-key{padding:4px 14px;border-radius:12px 12px 0 0}
  .qd-key div{padding:8px 0}
  .qd-key b{font-size:14px}
  .qd-pasos{display:none}
  .qd-pie{display:flex}
  .qd-t th{width:42%}
  .qd-t th,.qd-t td{font-size:13px}
}