/* =====================================================================
   COSTA DE LA LUZ · Estilos de CATEGORÍA  (css/categoria.css)
   ===================================================================== */

.cat-hero {
  padding: 8rem 0 3rem; text-align: center;
  background: linear-gradient(120deg, var(--navy) 0%, var(--primary) 100%); color: #fff;
}
.breadcrumb--light { justify-content: center; color: rgba(255,255,255,.7); }
.breadcrumb--light a { color: #fff; }
.breadcrumb--light span { color: rgba(255,255,255,.85); }
.breadcrumb--light i { color: rgba(255,255,255,.5); }

.cat-hero-icon {
  width: 84px; height: 84px; margin: 1.2rem auto 1.4rem; border-radius: 50%;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center;
}
.cat-hero-icon i { font-size: 2rem; color: var(--gold); }
.cat-hero h1 { color: #fff; font-size: clamp(2.1rem, 4.5vw, 3rem); margin-bottom: .9rem; }
.cat-hero p { color: rgba(255,255,255,.9); max-width: 620px; margin: 0 auto 1.4rem; font-size: 1.1rem; }
.cat-hero-count {
  display: inline-block; background: rgba(255,255,255,.16); color: #fff;
  padding: .4rem 1.1rem; border-radius: 999px; font-weight: 700; font-size: .9rem;
}

/* Navegación entre categorías */
.cat-nav { position: sticky; top: 64px; z-index: 500; background: rgba(255,255,255,.97); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); padding: 1rem 0; }
.cat-nav-row { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; }
.cat-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1rem; border-radius: 999px; font-weight: 600; font-size: .9rem;
  color: var(--ink-soft); background: var(--sand-soft); border: 1px solid var(--line); transition: all .2s var(--ease);
}
.cat-chip i { color: var(--teal); transition: color .2s var(--ease); }
.cat-chip:hover { color: var(--primary); border-color: var(--primary); }
.cat-chip.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.cat-chip.active i { color: #fff; }

.cat-content { padding: 3rem 0 4.5rem; background: var(--sand-soft); }

/* Categoría vacía */
.cat-empty { text-align: center; max-width: 480px; margin: 2rem auto; padding: 3rem 1.5rem; }
.cat-empty i { font-size: 2.6rem; color: var(--ink-faint); margin-bottom: 1.2rem; }
.cat-empty h2 { font-size: 1.6rem; margin-bottom: .7rem; }
.cat-empty p { margin-bottom: 1.6rem; }

@media (max-width: 768px) {
  .cat-nav { position: static; }
  .cat-nav-row { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
  .cat-chip { white-space: nowrap; }
}