/* categoria.css — listado de familia/categoría. Contrato: ../../CONTRATO-DISENO.md */

/* fureone.css solo pone overflow-x:hidden en <body>, no en <html>; en celular eso deja
   arrastrar la página horizontalmente unos px de más por las filas con scroll propio
   (.chips aquí, .shelf/.brands en la portada). Mitigación local: ver reporte de esta
   entrega — candidato a mover a fureone.css para que beneficie a todas las páginas. */
html{overflow-x:hidden}

.cathead{padding:44px 0 8px}
.cathead h1{font-size:clamp(28px,4vw,44px);letter-spacing:-.02em;line-height:1.08}
.cathead .lead{color:var(--fu-muted);margin-top:12px;max-width:44em;font-size:16px}

/* chips de subcategorías (o de familias, en "Recién llegados") */
.chips{border-bottom:1px solid var(--fu-line);margin-top:20px}
.chips .wrap{display:flex;gap:8px;overflow-x:auto;padding:14px var(--fu-gutter);scrollbar-width:none}
.chips .wrap::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:999px;border:1px solid var(--fu-line-2);color:var(--fu-muted);font-size:13.5px;white-space:nowrap;transition:border-color .2s ease,background .2s ease,color .2s ease}
.chip:hover{background:var(--fu-surface-2);color:var(--fu-text)}
.chip[aria-current="page"]{background:var(--fu-cta-bg);color:var(--fu-cta-text);border-color:var(--fu-cta-bg)}

/* barra: filtrar (celular) · contador · orden */
section.block.cat-body{padding-top:24px}   /* con la especificidad de section.block, o gana su relleno de 96 px (auditoría 02 #3) */
.catbar{display:flex;align-items:center;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.filter-btn{display:none}
.count{color:var(--fu-muted);font-size:13.5px}
.sortwrap{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--fu-muted)}
.sortwrap select{height:38px;border-radius:999px;border:1px solid var(--fu-line-2);background:var(--fu-surface);color:var(--fu-text);padding:0 14px;font:inherit;font-size:13.5px;cursor:pointer}

/* columna de filtros + resultados */
.catlayout{display:grid;grid-template-columns:236px 1fr;gap:32px;align-items:start}

.filters{position:sticky;top:88px}
.filters-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.filters-head h2{font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--fu-faint);font-weight:600}
#filter-close{display:none}
.fgroup{padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--fu-line)}
.fgroup:last-of-type{border-bottom:0}
.fgroup h3{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--fu-faint);margin-bottom:14px;font-weight:600}
.fchecks{display:grid;gap:10px}
.fchecks label{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--fu-text);cursor:pointer}
.fchecks input{width:16px;height:16px;accent-color:var(--fu-cta-bg)}
.fchecks .n{margin-left:auto;color:var(--fu-faint);font-size:12.5px}
.filters-foot{display:none;gap:10px;margin-top:4px}   /* en escritorio el filtro aplica al instante: los botones sobraban (auditoría 02 #14) */
.filters-foot .btn{flex:1;justify-content:center;height:44px;padding:0 12px;font-size:13.5px}

.catresults{min-width:0}
/* «Ver más»: de a 24 tarjetas */
.cat-mas{display:flex;margin:28px auto 0;justify-content:center;min-width:220px;height:46px}

/* estado vacío (estructural o por filtros) */
.empty{border:1px dashed var(--fu-line-2);border-radius:var(--fu-radius);padding:clamp(40px,6vw,72px) 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.empty .ico{width:34px;height:34px;color:var(--fu-faint)}
.empty h2{font-size:22px;letter-spacing:-.01em}
.empty p{color:var(--fu-muted);max-width:34em}
.empty .btn{margin-top:8px}

@media (max-width:1060px){
  .filter-btn{display:inline-flex}
  .catlayout{grid-template-columns:1fr}
  .filters{position:fixed;top:0;right:0;bottom:0;width:min(88vw,380px);background:var(--fu-bg);z-index:40;transform:translateX(102%);transition:transform .25s ease;overflow-y:auto;padding:18px 18px 24px;visibility:hidden;border-left:1px solid var(--fu-line)}
  .filters.open{transform:none;visibility:visible}
  .filters-head h2{font-size:15px;color:var(--fu-text)}
  #filter-close{display:grid}
  .filters-foot{display:flex;margin-top:20px}
}
@media (max-width:760px){
  .sortwrap{margin-left:0}
  .catbar{gap:12px}
}