/* Audio G.R. — Catálogo: cabecera de página, filtros, rejilla y estado vacío */

/* ---------- Migas de pan ---------- */
.migas ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font-size: 14px; color: var(--tenue); }
.migas li { display: inline-flex; align-items: center; }
.migas li + li::before { content: "/"; margin: 0 10px; color: var(--borde); }
.migas a { color: var(--parrafo); padding-block: 6px; transition: color var(--t-rapida) var(--ease); }
.migas a:hover { color: var(--azul); text-decoration: underline; text-underline-offset: 4px; }
.migas [aria-current="page"] { color: var(--texto); font-weight: 500; }
.migas--claras ol { color: rgba(255,255,255,.6); }
.migas--claras li + li::before { color: rgba(255,255,255,.3); }
.migas--claras a { color: rgba(255,255,255,.75); }
.migas--claras a:hover { color: #fff; }
.migas--claras [aria-current="page"] { color: #fff; }

/* ---------- Cabecera de página (marino) ---------- */
.cabecera { position: relative; isolation: isolate; overflow: hidden; color: #fff;
  background: var(--fondo-cabecera); }
.cabecera__fondo { position: absolute; inset: 0; z-index: -2; }
.cabecera__fondo img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.cabecera--foto::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--velo-cabecera); }
@media (max-width: 767px) { .cabecera--foto::before { background: var(--velo-cabecera-movil); } }
.cabecera__contenido { display: grid; gap: 14px; padding-block: 48px 44px; }
@media (min-width: 1024px) { .cabecera__contenido { padding-block: 72px 64px; } }
.cabecera h1 { color: #fff; font-size: 36px; line-height: 1.1; letter-spacing: -0.03em; }
@media (min-width: 1024px) { .cabecera h1 { font-size: 56px; } }
.cabecera__intro { color: var(--sobre-oscuro); max-width: 56ch; font-size: 17px; }
.cabecera__conteo { font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6);
  display: inline-flex; align-items: center; gap: 10px; }
.cabecera__conteo::before { content: ""; width: 24px; height: 2px; background: var(--rojo); }
.cabecera__botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.cabecera--404 .cabecera__contenido { padding-block: 72px; }
@media (min-width: 1024px) { .cabecera--404 .cabecera__contenido { padding-block: 112px; } }

/* ---------- Filtros ---------- */
.catalogo { padding-top: 32px; }
@media (min-width: 1024px) { .catalogo { padding-top: 40px; } }
.filtros { display: grid; gap: 16px; margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--borde-suave); }
@media (min-width: 1024px) { .filtros { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; margin-bottom: 40px; } }
.filtros__chips ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
  margin-inline: calc(var(--margen) * -1); padding-inline: var(--margen); }
.filtros__chips ul::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) { .filtros__chips ul { margin: 0; padding: 0; flex-wrap: wrap; } }
@media (min-width: 1200px) { .filtros__chips ul { flex-wrap: nowrap; } }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--r-chip); white-space: nowrap;
  border: 1px solid var(--borde); background: var(--superficie); color: var(--texto); font-size: 14px; font-weight: 500;
  transition: background-color var(--t-rapida) var(--ease), border-color var(--t-rapida) var(--ease), color var(--t-rapida) var(--ease); }
.chip:hover { border-color: var(--azul); color: var(--azul); }
.chip[aria-current="page"] { background: var(--marino); border-color: var(--marino); color: #fff; }
.chip span { font-family: var(--f-mono); font-size: 11px; opacity: .6; }

.filtros__controles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; min-width: 0; }
.filtros > * { min-width: 0; }
.campo { min-width: 0; }
.campo--buscar { grid-column: 1 / -1; }
@media (min-width: 640px) { .filtros__controles { grid-template-columns: minmax(200px, 1fr) max-content max-content; } .campo--buscar { grid-column: auto; } }
@media (min-width: 1024px) { .filtros__controles { grid-template-columns: 220px max-content max-content; } }
.campo { position: relative; display: block; }
.campo input, .campo select {
  width: 100%; height: 44px; border: 1px solid var(--borde); border-radius: var(--r-btn); background: var(--superficie); color: var(--texto);
  font: inherit; font-size: 15px; transition: border-color var(--t-rapida) var(--ease), box-shadow var(--t-rapida) var(--ease);
}
.campo input { padding: 0 14px 0 42px; }
.campo input::placeholder { color: var(--tenue); opacity: 1; }
.campo input::-webkit-search-cancel-button { cursor: pointer; }
.campo > svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--tenue); pointer-events: none; }
.campo select { appearance: none; -webkit-appearance: none; padding: 0 40px 0 14px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6577' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
.campo input:hover, .campo select:hover { border-color: var(--borde-fuerte); }
.campo input:focus, .campo select:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(var(--azul-rgb), .24); }

/* ---------- Rejilla de productos ---------- */
.catalogo__rejilla { display: grid; gap: 20px; }
@media (min-width: 640px) { .catalogo__rejilla { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .catalogo__rejilla { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
@media (min-width: 1280px) { .catalogo__rejilla { grid-template-columns: repeat(4, 1fr); } }
.catalogo__rejilla[hidden], .tarjeta[hidden] { display: none; }
.caracteristicas { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.caracteristicas li { font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: var(--r-chip); background: var(--superficie-hundida); color: var(--parrafo); }

/* ---------- Estado vacío ---------- */
.vacio { display: grid; justify-items: center; gap: 12px; text-align: center; padding: 56px 24px; border: 1px dashed var(--borde); border-radius: var(--r-card); background: var(--superficie); }
.vacio[hidden] { display: none; }
.vacio__icono { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--azul-tenue); color: var(--azul); margin-bottom: 4px; }
.vacio__icono svg { width: 26px; height: 26px; }
.vacio h2 { font-size: 22px; line-height: 1.3; }
.vacio p { max-width: 46ch; color: var(--tenue); }
.vacio__acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }

/* ---------- Lista de categorías (404) ---------- */
.lista-categorias { list-style: none; margin: 16px 0 32px; padding: 0; display: grid; gap: 12px; }
@media (min-width: 768px) { .lista-categorias { grid-template-columns: repeat(3, 1fr); } }
.lista-categorias a { display: grid; gap: 4px; padding: 22px 24px; border: 1px solid var(--borde-suave); border-radius: var(--r-card); background: var(--superficie);
  transition: box-shadow var(--t-media) var(--ease), transform var(--t-media) var(--ease); }
.lista-categorias a:hover { box-shadow: var(--sombra-2); transform: translateY(-2px); }
.lista-categorias strong { color: var(--texto); font-size: 19px; }
.lista-categorias span { color: var(--tenue); font-size: 15px; }
.ayuda-404 { color: var(--parrafo); }