/* ==========================================================
   Extracto Francés — catalogo.css
   Estilos propios de la página de catálogo independiente
   (catalogo.html). Usa las mismas variables de styles.css.
   ========================================================== */

.fcat-body { background: var(--ivory); }

/* ---------- Encabezado ---------- */
.fcat-hero { padding: 26px var(--gutter) 6px; text-align: center; }
.fcat-hero__title { margin-top: 8px; font-size: clamp(32px, 9vw, 48px); }
.fcat-hero__lead { margin: 10px auto 0; max-width: 42ch; font-size: 13.5px; color: var(--muted); }

/* ---------- Filtros ---------- */
.fcat-filters {
  background: rgba(251,248,243,.96);
  padding: 14px var(--gutter) 10px;
  border-bottom: 1px solid var(--line);
  margin-top: 8px;
  display: grid; gap: 10px;
}
.fchips { display: flex; flex-wrap: wrap; gap: 7px; }
.fchip {
  height: 34px; padding: 0 14px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .25s, color .25s, border-color .25s;
  white-space: nowrap;
}
.fchip.is-active { background: var(--ink); border-color: var(--ink); color: var(--ivory); }
.fchips--familia .fchip.is-active { background: var(--gold-deep); border-color: var(--gold-deep); }
.fchip--dot i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.fchip--dot[data-v="dulce"] i { background: #e8b64c; }
.fchip--dot[data-v="amaderada"] i { background: #8e6a2c; }
.fchip--dot[data-v="citrica"] i { background: #7fb3c9; }
.fchip--dot[data-v="floral"] i { background: #e2a0b0; }
.fchip--dot[data-v="ambar"] i { background: #c9793f; }

.fcat-row { display: grid; gap: 10px; }
.fselect { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; background: #fff; border: 1px solid var(--line); }
.fselect__label { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.fselect select { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; color: var(--ink); }
.fcat-search { margin-top: 0; }

.fcat-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fcat-clear { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 2px; }

/* ---------- Familia olfativa en la tarjeta (punto + nombre) ---------- */
.card__fam { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; }
.fdot-label { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; letter-spacing: .04em; color: var(--muted); white-space: nowrap; }
.fdot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.fdot--dulce { background: #e8b64c; }
.fdot--amaderada { background: #8e6a2c; }
.fdot--citrica { background: #7fb3c9; }
.fdot--floral { background: #e2a0b0; }
.fdot--ambar { background: #c9793f; }

/* ---------- Resultados ---------- */
.fcat-results { padding-top: 22px; }
.fcat-results .grid { padding: 0 var(--gutter); }

/* ---------- Footer simplificado ---------- */
.fcat-footer__back { max-width: 320px; margin: 16px auto 0; }

@media (min-width: 760px) {
  .fcat-row { grid-template-columns: 220px 1fr; }
  .fcat-filters { padding-left: calc((100vw - 720px) / 2); padding-right: calc((100vw - 720px) / 2); }
}
@media (min-width: 900px) {
  .fcat-results .grid { grid-template-columns: repeat(4, 1fr); max-width: 1280px; margin: 0 auto; }
}