/* =============================================================================
   catalogo.css — CAPA 3 de 3: LAYOUT DE LA PÁGINA "CATÁLOGO"
   Solo secciones de esta página. Carga después de base.css y shop.css.
   -----------------------------------------------------------------------------
   INVARIANTE: aquí no se redefine ningún componente de base.css ni de shop.css.
   Se comprueba con:
     grep -nE '^\.(btn|nav|topbar|iconbtn|tools|logo|sucrow|sacts|pcard|chip-f|
                    ann|foot|scrim|cart|cmdk|news|cofstrip|prods|toast|sk|stock|
                    branchsel|wafab|empty|reveal|band-|sr-only|skip|eyebrow|
                    sec-head|linkmore|imgwrap|ic|wrap|hero)\b' catalogo.css
   Debe devolver cero líneas.
   ============================================================================= */

/* ===========================================================================
   HERO BAJO — copiado de home.css §HERO y adaptado a cabecera de página interior.
   El scrim de 3 capas se conserva TAL CUAL (corrección de legibilidad medida,
   ver comentario original en home.css); solo cambia min-height y se retira el
   bloque de "proof" que no aplica a una cabecera de listado.
   =========================================================================== */
.hero{ position:relative; isolation:isolate; min-height:clamp(300px,38svh,420px); display:flex; align-items:flex-end; overflow:clip; }
.hero .bg{ position:absolute; inset:0; z-index:0; background:var(--navy-deep); }
.hero .bg img{ width:100%; height:100%; object-fit:cover; object-position:50% 38%; filter:brightness(.82) saturate(.92) contrast(1.02); }
.hero .hero-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(96deg, rgba(11,23,54,.84) 0%, rgba(11,23,54,.74) 30%, rgba(11,23,54,.38) 52%, rgba(11,23,54,0) 74%),
    linear-gradient(to top, rgba(11,23,54,.55) 0%, rgba(11,23,54,.18) 28%, rgba(11,23,54,0) 52%),
    linear-gradient(0deg, rgba(11,23,54,.22), rgba(11,23,54,.22));
}
.hero .wrap{ position:relative; z-index:2; }
.hero .inner{ color:#fff; padding:var(--s7) 0 var(--s6); max-width:min(620px,60%); }
.crumb{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:12.5px; font-weight:600; color:#DDE4F2; margin-bottom:14px;
}
.crumb a{ color:#fff; opacity:.86; }
.crumb a:hover{ opacity:1; text-decoration:underline; }
.crumb .sep{ opacity:.6; }
.crumb .here{ color:#fff; }
.hero h1{
  font-size:clamp(30px,4vw,46px); font-weight:800; margin:0;
  letter-spacing:-.02em; line-height:1.05; color:#fff;
  text-shadow:0 1px 2px rgba(11,23,54,.5), 0 10px 40px rgba(11,23,54,.35);
}
.hero .hsub{
  font-size:var(--fs-md); margin-top:10px; max-width:52ch; color:#E9EDF7;
  text-shadow:0 1px 2px rgba(11,23,54,.4);
}
@media(max-width:820px){
  .hero{ min-height:0; display:block; background:var(--navy-900); overflow:visible; }
  .hero .bg{ position:relative; height:220px; min-height:200px; }
  .hero .hero-scrim{
    top:0; bottom:auto; height:220px; min-height:200px;
    background:linear-gradient(to top, var(--navy-900) 0%, rgba(11,23,54,.62) 46%, rgba(11,23,54,.24) 100%);
  }
  .hero .inner{ max-width:none; padding:var(--s5) 0 var(--s6); }
}
@media(forced-colors:active){
  .hero .bg{ display:none; }
  .hero .hero-scrim{ background:Canvas; }
}

/* ===========================================================================
   CUERPO DEL CATÁLOGO — aside de filtros + rejilla
   =========================================================================== */
.catwrap{ padding:var(--s7) 0 var(--s9); }

.chipsbar{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:var(--s5); }
.chipsbar:empty{ display:none; }
.chipsbar .chip-f svg{ width:13px; height:13px; margin-left:2px; }
.chipsbar .clearall{
  font-family:var(--font-display); font-weight:600; font-size:12.5px;
  color:var(--ink-muted); text-decoration:underline; cursor:pointer;
  border:none; background:none; padding:0 6px; min-height:44px;
}
.chipsbar .clearall:hover{ color:var(--ink); }

.toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin-bottom:var(--s5); padding-bottom:var(--s4);
  border-bottom:1px solid var(--line);
}
.toolbar .rescount{ font-size:13.5px; color:var(--ink-muted); }
.toolbar .rescount b{ color:var(--ink); font-family:var(--font-display); }
.toolbar-right{ display:flex; align-items:center; gap:10px; }
.sortbox{ display:inline-flex; align-items:center; gap:8px; }
.sortbox label{ font-size:12.5px; color:var(--ink-muted); white-space:nowrap; }
.sortsel{
  font:inherit; font-size:var(--fs-sm); font-family:var(--font-display); font-weight:600;
  min-height:40px; padding:0 30px 0 12px; cursor:pointer;
  color:var(--ink); background:var(--surface); border:1px solid var(--line-strong);
  border-radius:var(--radius-sm); appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat;
}
.sortsel:hover{ border-color:var(--accent); }
.facet-toggle{ display:none; align-items:center; gap:8px; }
.facet-toggle .fcnt{
  min-width:18px; height:18px; padding:0 4px; background:var(--accent); color:#fff;
  border-radius:var(--radius-pill); font-size:10px; font-weight:700; display:grid; place-items:center;
}

.catshell{ display:grid; grid-template-columns:264px 1fr; gap:var(--s7); align-items:start; }

/* ---------- FACETAS ---------- */
.facets{
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius);
  padding:var(--s5); position:sticky; top:calc(var(--header-h) + 16px);
  max-height:calc(100svh - var(--header-h) - 32px); overflow:auto;
}
.facets-head{ display:none; align-items:center; justify-content:space-between; margin-bottom:var(--s4); }
.facets-head strong{ font-family:var(--font-display); font-size:var(--fs-md); }
.facet-group{ padding:16px 0; border-bottom:1px solid var(--line); }
.facet-group:first-child{ padding-top:0; }
.facet-group:last-child{ border-bottom:none; padding-bottom:0; }
.facet-group h3{
  font-family:var(--font-display); font-size:11.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:12px;
}
.facet-list{ display:flex; flex-direction:column; gap:2px; max-height:230px; overflow:auto; margin:0 -4px; }
.facet-opt{
  display:flex; align-items:center; gap:10px; padding:7px 4px; cursor:pointer;
  font-size:13.5px; border-radius:8px; min-height:44px;
}
.facet-opt:hover{ background:var(--sunken); }
.facet-opt input{ width:17px; height:17px; accent-color:var(--accent); flex:none; cursor:pointer; }
.facet-opt .fname{ flex:1; color:var(--ink); line-height:1.25; }
.facet-opt .fcount{ color:var(--ink-muted); font-size:12px; font-variant-numeric:tabular-nums; }
.facet-opt.zero{ opacity:.42; }
.facet-opt.zero input{ cursor:not-allowed; }

.pricebox .prow{ display:flex; gap:10px; align-items:center; }
.pricebox .pfield{ flex:1; display:flex; flex-direction:column; gap:4px; }
.pricebox .pfield span{ font-size:11px; color:var(--ink-muted); }
.pricebox input[type="number"]{
  width:100%; font:inherit; font-size:13.5px; padding:9px 10px;
  border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--ink);
}
.pricebox input[type="number"]:focus{ border-color:var(--accent); }
.pricebox .psep{ color:var(--ink-muted); margin-top:16px; }
.pricebox .pcount{ margin-top:10px; font-size:12px; color:var(--ink-muted); }

/* ---------- GRID DE RESULTADOS ---------- */
.sk-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s5); }
@media(max-width:900px){ .sk-grid{ grid-template-columns:1fr 1fr; } }

.pager{ display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:var(--s7); }
.pager .pinfo{ font-size:12.5px; color:var(--ink-muted); }

/* ---------- MÓVIL: panel de filtros deslizante ---------- */
.fscrim{
  position:fixed; inset:0; z-index:64; background:rgba(8,14,28,.5);
  opacity:0; pointer-events:none; transition:opacity .3s;
}
.fscrim.on{ opacity:1; pointer-events:auto; }

@media(max-width:900px){
  .catshell{ grid-template-columns:1fr; }
  .facet-toggle{ display:inline-flex; }
  .facets{
    position:fixed; top:0; right:0; bottom:0; width:min(360px,88vw);
    max-height:none; border-radius:0; z-index:65;
    transform:translateX(100%); transition:transform .3s cubic-bezier(.2,.8,.2,1);
    box-shadow:var(--shadow-lg); display:flex; flex-direction:column;
  }
  .facets.open{ transform:none; }
  .facets-head{ display:flex; flex:none; }
  .facet-group{ flex:none; }
  .facets-scroll{ flex:1; overflow:auto; }
  .facets-foot{ flex:none; padding-top:var(--s4); border-top:1px solid var(--line); margin-top:var(--s3); }
}
@media(min-width:901px){ .facets-foot{ display:none; } }