/* ══════════════════════════════════════════════════════════════
   ALTA RUTA 4x4 STORE — CATEGORÍA AGRUPADA (16-sep-2026)
   ──────────────────────────────────────────────────────────────
   Antes, "Piezas sueltas" de Suspensión era una pared de 110 tarjetas
   iguales (mismo amortiguador negro, 24 por página, sin decir qué era
   cada cosa). Ahora la categoría se lee como la lee el taller y como la
   ordena ironman4x4.com: primero POR TIPO DE PIEZA (amortiguadores,
   espirales, muelles, trapecios, bocinas) y, dentro de amortiguadores,
   POR LÍNEA con su escalera (Nitro Gas → Foam Cell → Foam Cell Pro →
   IM2.5). Logos de marca en cada bloque. Usa las variables del sistema,
   así que funciona en claro y en oscuro.
   ══════════════════════════════════════════════════════════════ */

/* La columna del catálogo es un hijo de grid con min-width:auto: la franja de tiles
   (flex sin salto en móvil) la ensanchaba más que la pantalla y cortaba todo. */
.cat-layout>div{min-width:0}
.tipos-grid,.escalera,.grupo{min-width:0;max-width:100%}
.tipo,.linea-t{font:inherit;color:inherit;width:100%}

/* ── Barra: contador + conmutador Agrupado / Lista ── */
.vista-sw{display:inline-flex;border:1px solid var(--linea);border-radius:var(--r);overflow:hidden}
.vista-sw button{padding:7px 12px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gris);background:transparent;transition:.15s;display:inline-flex;align-items:center;gap:6px}
.vista-sw button:hover{color:var(--hueso)}
.vista-sw button.on{background:var(--ambar);color:#000}
.barra-res .cuenta small{color:var(--gris-2);font-size:12px;margin-left:6px}

/* ── Franja "¿Qué pieza buscas?" — un tile por tipo, con foto real ── */
.tipos{margin:0 0 30px}
.tipos-hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.tipos-hd h3{font-size:17px}
.tipos-hd p{font-size:12.5px;color:var(--gris)}
.tipos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.tipo{display:flex;flex-direction:column;background:var(--carbon-2);border:1px solid var(--linea);border-radius:var(--r);
  overflow:hidden;text-align:left;transition:.2s var(--ease,ease);position:relative;cursor:pointer}
.tipo:hover{border-color:var(--ambar);transform:translateY(-3px);box-shadow:0 12px 28px rgba(20,16,10,.10)}
.tipo-img{aspect-ratio:5/4;background:#F5F3EF center/cover no-repeat;border-bottom:1px solid var(--linea);position:relative;display:grid;place-items:center}
.tipo-img .emo{font-size:34px;opacity:.35}
.tipo-img::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(14,14,16,.10),transparent 45%);pointer-events:none}
.tipo-txt{padding:10px 12px 12px;display:flex;flex-direction:column;gap:3px}
.tipo-txt b{font-size:13px;line-height:1.2;color:var(--hueso);font-weight:700}
.tipo-txt span{font-size:11px;color:var(--gris-2);letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.tipo-txt i{font-style:normal;font-size:11.5px;color:var(--ambar);font-weight:600;margin-top:2px}

/* ── Sección por tipo de pieza ── */
.grupo{margin:0 0 42px;scroll-margin-top:150px}
.grupo-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding-bottom:14px;margin-bottom:18px;border-bottom:2px solid var(--hueso)}
.grupo-hd .kicker{display:block;margin-bottom:6px}
.grupo-hd h3{font-size:clamp(21px,2.4vw,28px);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.grupo-hd h3 .n{font-family:var(--cuerpo);font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--gris);
  background:var(--carbon-3);border:1px solid var(--linea);padding:3px 9px;border-radius:99px;text-transform:none}
.grupo-hd p{color:var(--gris);font-size:13.5px;margin-top:6px;max-width:680px;line-height:1.5}
.grupo-acc{display:flex;align-items:center;gap:12px;flex-shrink:0}
.grupo-acc .mlogo{flex:0 0 auto}
.ver-mas{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border:1px solid var(--linea);border-radius:var(--r);
  font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--hueso);background:var(--carbon-2);
  transition:.15s;white-space:nowrap}
.ver-mas:hover{border-color:var(--ambar);color:var(--ambar)}
.ver-mas.ver-lg{padding:11px 18px}

/* Chips de vehículo dentro de espirales / muelles (solo informativos) */
.grupo-vehs{display:flex;gap:6px;flex-wrap:wrap;margin:-6px 0 16px}
.grupo-vehs span{font-size:11px;font-weight:600;letter-spacing:.05em;color:var(--gris);background:var(--carbon-3);
  border:1px solid var(--linea);padding:4px 10px;border-radius:99px}
.grupo-vehs span b{color:var(--hueso);margin-left:4px}

/* Pie de grupo cuando hay más de lo mostrado */
.grupo-pie{display:flex;justify-content:center;margin-top:18px}

/* ── Escalera de líneas Ironman (amortiguadores) ── */
.escalera{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:26px}
.linea-t{position:relative;display:flex;flex-direction:column;gap:8px;padding:16px 16px 14px;background:var(--carbon-2);
  border:1px solid var(--linea);border-radius:var(--r);border-top:4px solid var(--l-color,var(--ambar));text-align:left;
  transition:.2s;cursor:pointer;overflow:hidden}
.linea-t:hover{transform:translateY(-3px);border-color:var(--l-color,var(--ambar));box-shadow:0 12px 28px rgba(20,16,10,.10)}
.linea-t.on{background:var(--k-sel,rgba(194,116,10,.08));border-color:var(--l-color,var(--ambar));box-shadow:inset 0 0 0 1px var(--l-color,var(--ambar))}
.linea-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.linea-niv{font-family:var(--tit);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--l-color,var(--ambar))}
.linea-niv i{display:inline-flex;gap:3px;margin-left:6px;vertical-align:middle}
.linea-niv i b{width:7px;height:7px;border-radius:2px;background:var(--linea);display:block}
.linea-niv i b.on{background:var(--l-color,var(--ambar))}
.linea-t h4{font-family:var(--tit);font-size:22px;line-height:1;letter-spacing:.02em;text-transform:uppercase;color:var(--hueso)}
.linea-t h4 small{display:block;font-family:var(--cuerpo);font-size:11px;letter-spacing:.1em;color:var(--gris);font-weight:600;margin-top:5px}
.linea-t p{font-size:12.5px;color:var(--gris);line-height:1.45;flex:1}
.linea-pie{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;padding-top:10px;border-top:1px solid var(--linea)}
.linea-pie span{font-size:11px;color:var(--gris-2);letter-spacing:.06em;text-transform:uppercase;font-weight:600;display:block}
.linea-pie b{font-family:var(--tit);font-size:19px;color:var(--hueso);line-height:1}
.linea-pie em{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--l-color,var(--ambar))}
.linea-t .mlogo{position:absolute;top:12px;right:12px;opacity:.9}

/* Subsección por línea */
.sublinea{margin:0 0 26px}
.sublinea-hd{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.sublinea-hd .dot{width:12px;height:12px;border-radius:3px;background:var(--l-color,var(--ambar));flex-shrink:0}
.sublinea-hd h4{font-family:var(--tit);font-size:16px;letter-spacing:.05em;text-transform:uppercase}
.sublinea-hd .n{font-size:12px;color:var(--gris)}
.sublinea-hd .ver-mas{margin-left:auto;padding:6px 11px;font-size:10.5px}

/* Tarjeta de producto dentro de un grupo: etiqueta de línea en la foto */
.pimg .plinea{position:absolute;bottom:9px;right:9px;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:3px 7px;border-radius:2px;background:rgba(14,14,16,.86);color:#F5F3EF;border-left:3px solid var(--l-color,var(--ambar))}

/* Caja "¿No sabes cuál?" */
.grupo-ayuda{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:14px 16px;margin:0 0 22px;
  background:var(--carbon-3);border:1px dashed var(--linea);border-radius:var(--r);font-size:13px;color:var(--gris)}
.grupo-ayuda b{color:var(--hueso)}
.grupo-ayuda .btn{margin-left:auto}

/* ── Responsive ── */
@media(max-width:1080px){
  .tipos-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .escalera{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .tipos-grid{display:flex;overflow-x:auto;gap:10px;padding-bottom:6px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .tipos{overflow:hidden;margin-left:-16px;margin-right:-16px;padding:0 16px}
  .tipo{flex:0 0 150px;scroll-snap-align:start}
  .escalera{grid-template-columns:1fr}
  .grupo-hd{border-bottom-width:1px}
  .grupo-acc{width:100%;justify-content:space-between}
  .vista-sw{margin-left:0}
  .ver-mas.ver-lg{white-space:normal;text-align:center;max-width:100%;line-height:1.35}
}