/* =========================================================================
   Motor Carta · Cabecera + chips
   68px de marca + 56px de categorías (≈15% de un celular).
   Al bajar, la marca se compacta a 52px y las categorías quedan fijas.
   ========================================================================= */

.cab {
  position: fixed;
  inset: 0 0 auto;
  z-index: 30;
  padding-top: var(--seguro-arriba);
  background: rgb(var(--c-fondo-rgb) / 0.94);
  -webkit-backdrop-filter: saturate(1.2) blur(14px);
  backdrop-filter: saturate(1.2) blur(14px);
  transition: box-shadow var(--t) var(--ease);
}
.cab.is-compacta { box-shadow: 0 1px 0 var(--linea), 0 10px 24px -22px rgb(var(--c-texto-rgb) / 0.5); }

.cab__fila {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: var(--ancho);
  height: var(--cab-fila);
  margin: 0 auto;
  padding: 0 var(--gutter);
  transition: height var(--t) var(--ease);
}
.cab.is-compacta .cab__fila { height: var(--cab-fila-compacta); }

.cab__marca {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  border-radius: 12px;
}
.cab__marca.is-oculta { display: none; }

.cab__logo {
  width: 40px;
  height: 40px;
  flex: none;
  transition: width var(--t) var(--ease), height var(--t) var(--ease);
}
.cab.is-compacta .cab__logo { width: 32px; height: 32px; }

.cab__textos { display: grid; min-width: 0; }
.cab__nombre {
  font-family: var(--f-titulos);
  font-size: 1.5rem;
  font-weight: 500;
  font-variation-settings: "opsz" 72;
  line-height: 1.05;
  letter-spacing: -0.012em;
  white-space: nowrap;
  transition: font-size var(--t) var(--ease);
}
.cab.is-compacta .cab__nombre { font-size: 1.25rem; }
.cab--discreta .cab__nombre,
.cab--discreta.is-compacta .cab__nombre {
  font-family: var(--f-ui);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.cab__claim {
  max-height: 1.4em;
  margin-top: 3px;
  overflow: hidden;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--c-texto-2);
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: max-height var(--t) var(--ease), opacity var(--t) var(--ease), margin var(--t) var(--ease);
}
.cab.is-compacta .cab__claim { max-height: 0; margin-top: 0; opacity: 0; }

.cab__titulo-vista {
  font-family: var(--f-titulos);
  font-size: 1.6rem;
  font-weight: 500;
  font-variation-settings: "opsz" 72;
  letter-spacing: -0.012em;
}

/* ---------- Chips ---------- */
.chips { max-width: var(--ancho); margin: 0 auto; }
.cab.sin-chips .chips { display: none; }

.chips__lista {
  display: flex;
  gap: 8px;
  height: var(--cab-chips);
  padding: 4px var(--gutter) 12px;
  overflow-x: auto;
  scroll-padding-inline: var(--gutter);
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.chips__lista::-webkit-scrollbar { display: none; }

.chip {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--c-superficie);
  box-shadow: inset 0 0 0 1px var(--linea);
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--c-texto);
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.chip[aria-pressed="true"] {
  background: var(--c-marca);
  color: var(--c-superficie);
  box-shadow: none;
}
.chip:active { transform: scale(0.97); }

@media (min-width: 960px) {
  .cab__fila, .chips__lista { padding-inline: 32px; }
}