/* ============================================================
   Estilos compartidos por las paginas de catalogo: indice de
   categorias, listado de una categoria y buscador.

   Vienen de la pagina de spray original. Cuando esa pagina se
   retiro, se quitaron las reglas de su ventana emergente, que
   ya no se usa en ninguna parte.
   ============================================================ */
.breadcrumb{padding:24px 0 4px;color:var(--muted);font-size:.88rem;font-weight:600}
  .breadcrumb a{color:var(--muted)} .breadcrumb a:hover{color:var(--ink)}
  .breadcrumb .sep{margin:0 .5rem;opacity:.5}
  .cathero{padding:10px 0 6px}
  .cathero h1{font-size:clamp(2.1rem,4.4vw,3.2rem);font-weight:900}
  .cathero p{color:var(--muted);max-width:62ch;margin-top:.8rem;font-size:1.06rem}
  .filters{display:flex;gap:.6rem;flex-wrap:wrap;margin:26px 0 6px}
  .filters span{background:#fff;border:1px solid var(--line);padding:.5rem 1rem;border-radius:999px;font-weight:700;font-size:.84rem;color:var(--ink-soft);cursor:pointer;transition:.2s}
  .filters span.on,.filters span:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
  .prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;padding:26px 0 40px}
  .prod{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:.28s;display:flex;flex-direction:column;cursor:pointer}
  .prod:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:transparent}
  .prod:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
  .prod .img{height:185px;display:grid;place-items:center;position:relative;overflow:hidden}
  .prod .img .can{transition:.35s}
  /* La foto llena el cuadro de la tarjeta dejando un margen: una chica se
     agranda y una grande se achica, sin recortarse ni deformarse. */
  .prod .img .prod-foto{position:absolute;top:16px;left:16px;width:calc(100% - 32px);height:calc(100% - 32px);object-fit:contain;transition:transform .35s}
  .prod:hover .img .prod-foto{transform:scale(1.05)}
  .prod .img .badge,.prod .img .dots{z-index:1}
  .prod:hover .img .can{transform:scale(1.07) rotate(-3deg)}
  .prod .img .dots{position:absolute;bottom:12px;left:12px;display:flex;gap:5px}
  .prod .img .dots i{width:15px;height:15px;border-radius:50%;border:2px solid rgba(255,255,255,.85)}
  /* Con foto: cuadro blanco con una linea que lo separa del texto */
  .prod .img-blanca{border-bottom:1px solid var(--line)}
  .prod .img.img-blanca .badge{background:var(--ink);color:#fff}
  .prod .badge{position:absolute;top:12px;right:12px;background:rgba(255,255,255,.92);color:var(--ink);font-weight:800;font-size:.66rem;letter-spacing:.05em;padding:.3rem .6rem;border-radius:999px;text-transform:uppercase}
  .prod .body{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
  .prod .tag{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
  .prod h3{font-size:1.06rem;margin:.35rem 0 .3rem;color:var(--ink)}
  .prod p{color:var(--muted);font-size:.86rem;flex:1}
  .prod .vp{margin-top:.9rem;font-weight:700;font-size:.86rem;color:var(--ink);display:inline-flex;align-items:center;gap:.35rem;transition:.2s}
  .prod:hover .vp{gap:.6rem}
  .modal .pd-txt .tag{font-weight:700;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}
  .modal .feat .ck{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;flex-shrink:0;margin-top:1px}@media(max-width:940px){.prod-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.prod-grid{grid-template-columns:1fr}}