/* [ZSPORT-tienda-v2] La vitrina nueva sobre la de siempre (la arma
   tienda-v2.js). Va despues de vitrina.css y usa sus variables; no pisa
   ninguna regla de ella. */

/* --- Calibraciones por marca: baldosas agrupadas --- */
#marcas .marcas-bajada{ color:var(--ceniza); margin:6px 0 0; font-size:14px }
.baldosas-grupo{ margin-top:22px }
.baldosas-tit{
  font:600 12px/1.2 var(--mono); letter-spacing:.08em; text-transform:uppercase;
  color:var(--ceniza); margin:0 0 10px;
}
.baldosas-grilla{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px }
.baldosa{
  display:flex; flex-direction:column; gap:3px; padding:14px;
  background:var(--panel); border:1px solid var(--borde); border-top:3px solid var(--dato);
  border-radius:var(--radio); color:var(--hueso); text-decoration:none;
  transition:border-color .2s, transform .2s;
}
.baldosa:hover, .baldosa:focus-visible{ border-color:var(--dato); transform:translateY(-2px) }
.baldosa:focus-visible{ outline:2px solid var(--dato); outline-offset:2px }
.baldosa-logo{
  display:grid; place-items:center; height:56px; margin-bottom:8px;
  background:var(--grafito); border-radius:var(--radio-chico); transition:background .25s;
}
.baldosa-logo img{ grid-area:1/1; max-width:74%; max-height:32px; transition:opacity .25s }
.baldosa-logo .logo-color{ opacity:0 }
.baldosa:hover .baldosa-logo, .baldosa:focus-visible .baldosa-logo{ background:#ECEEF2 }
.baldosa:hover .logo-claro, .baldosa:focus-visible .logo-claro{ opacity:0 }
.baldosa:hover .logo-color, .baldosa:focus-visible .logo-color{ opacity:1 }
/* Mismo tamano optico: las palabras anchas mas bajas, los emblemas redondos mas altos. */
.e-skoda img, .e-lamborghini img{ max-height:19px }
.e-volkswagen img, .e-bmw img, .e-mercedes img{ max-height:36px }
.e-audi img{ max-height:24px }
.e-ford img{ max-height:28px }
.baldosa-sigla{ font:700 15px var(--display); color:var(--hueso) }
.baldosa-nombre{ font:600 15px var(--texto) }
.baldosa-cifra{ font:600 19px var(--mono); color:var(--dato) }
.baldosa-rotulo{ font:400 12px var(--mono); color:var(--ceniza) }

/* --- Sellos: original de fabrica (celeste) y reprogramacion (naranja) --- */
.sello{
  display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
  font:600 10.5px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase;
  padding:5px 8px; border-radius:4px; margin-bottom:8px;
}
.sello-orig{ color:var(--dato); background:rgba(125,211,252,.12); border:1px solid rgba(125,211,252,.35) }
.sello-orig::before{ content:""; width:7px; height:7px; background:var(--dato) }
#catalogo article.ficha{ box-shadow:inset 3px 0 0 var(--dato) }
#catalogo .ficha-repro{ box-shadow:inset 3px 0 0 var(--redline) }

/* --- Herramientas: la mas pedida, destacada --- */
.tarjeta-herr.herr-destacada{
  border-color:rgba(255,90,31,.55);
  box-shadow:0 0 0 1px rgba(255,90,31,.25), 0 14px 32px -20px rgba(255,90,31,.7);
}
.herr-mas-pedida{
  align-self:flex-start; margin-bottom:8px; padding:5px 8px; border-radius:4px;
  font:700 10.5px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase;
  color:#1a0800; background:var(--redline);
}
@media (min-width:900px){ .grilla-herr .herr-destacada{ grid-column:span 2 } }

/* [ZSPORT-tienda-v2-arreglos] revision del 2026-10-14 */
/* La tarjeta de herramienta no se pasa del ancho (a 375 media 360 en 331): la
   columna no crece por el contenido y el pie (precio + boton) baja de linea. */
.grilla-herr{ grid-template-columns:repeat(auto-fill, minmax(min(280px, 100%), 1fr)) }
.herr-pie{ flex-wrap:wrap }
@media (max-width:560px){ .grilla-herr{ grid-template-columns:minmax(0, 1fr) } }
/* Lectura completa (PCMFlash): sello lila, no celeste como el original. */
.sello-orig.sello-lectura{ color:#C4B5FD; background:rgba(196,181,253,.12); border-color:rgba(196,181,253,.4) }
.sello-orig.sello-lectura::before{ background:#C4B5FD }
#catalogo article.ficha[data-lectura]{ box-shadow:inset 3px 0 0 #C4B5FD }
/* El boton de las lecturas se encimaba 3 px sobre las ultimas baldosas. */
#marcas .baldosas + .marcas-bajada{ margin-top:22px }
#marcas .marcas-bajada .btn-arma{ display:inline-flex }
/* Al bajar al resultado, el titulo del catalogo no queda abajo de la barra fija. */
#catalogo{ scroll-margin-top:76px }

/* --- Telefono --- */
@media (max-width:760px){
  .baldosas-grilla{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px }
  .baldosa{ padding:12px; min-height:44px }
  .baldosa-cifra{ font-size:17px }
}