/**
 * FreshCart UI System — Sistema de diseño para catálogo tienda
 * Colores, tipografía, componentes y layout según PLAN_DESARROLLO.md
 */

/* ========== 1. Variables (tokens) — Paleta empresa ========== */
:root {
  /* Colores empresa: AZUL #0064A2, ROJO #E42320, AMARILLO #FFDF01, AZUL CLARO #E0F7FF */
  --brand-primary: #0064A2;
  --brand-primary-hover: #005080;
  --brand-secondary-bg: #E0F7FF;
  --promo-yellow-badge: #FFDF01;
  --sale-red: #E42320;
  --link-blue: #0064A2;
  --neutral-divider: #E2E6E9;
  --text-primary: #343538;
  --text-secondary: #72767E;
  --text-inverse: #ffffff;
  --bg-page: #ffffff;
  --bg-card: #ffffff;

  /* Espaciado (escala 4px) */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-section: 64px;

  /* Bordes */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 9999px;

  /* Sombras — suaves, “friendly” */
  --shadow-level-1: 0 2px 8px rgba(0, 100, 162, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-level-2: 0 8px 24px rgba(0, 100, 162, 0.08), 0 2px 6px rgba(0, 0, 0, 0.06);
  --shadow-level-3: 0 12px 40px rgba(0, 100, 162, 0.1), 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-header: 0 2px 16px rgba(0, 100, 162, 0.06);

  /* Tipografía — Poppins (Friendly, Clean, ExtraBold headings) */
  --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-h1: 32px;
  --font-size-h2: 24px;
  --font-size-h3: 20px;
  --font-size-body: 16px;
  --font-size-body-sm: 14px;
  --font-size-caption: 12px;
  --font-size-price-large: 18px;
  --font-size-price-small: 14px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;

  /* Layout */
  --container-max: 1280px;
  --grid-columns: 12;
  --grid-gutter: 24px;
  --sidebar-width: 240px;
  --header-height: 64px;
  --z-header: 100;
  --z-dropdown: 200;
  --z-modal: 300;
  --z-modal-backdrop: 299;

  /* Transiciones */
  --ease-entrance: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 100ms;
  --duration-normal: 300ms;
}

/* ========== 2. Base & tipografía ========== */
body {
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-normal);
  color: var(--text-primary);
  background: transparent;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

body.fc-layout {
  background: var(--falling-pattern-bg);
}

h1, .fc-h1 {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-tight);
  color: var(--text-primary);
  margin: 0 0 var(--space-md);
  letter-spacing: -0.02em;
}

h2, .fc-h2 {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-tight);
  color: var(--text-primary);
  margin: 0 0 var(--space-sm);
  letter-spacing: -0.01em;
}

h3, .fc-h3 {
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  margin: 0 0 var(--space-xs);
}

.fc-body-sm {
  font-size: var(--font-size-body-sm);
  color: var(--text-secondary);
}

.fc-caption {
  font-size: var(--font-size-caption);
  color: var(--text-secondary);
}

.fc-price-large {
  font-size: var(--font-size-price-large);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.fc-price-small {
  font-size: var(--font-size-price-small);
  color: var(--text-secondary);
}

a {
  color: var(--link-blue);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ========== 3. Layout ========== */
.fc-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}

.fc-layout {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.fc-main {
  flex: 1;
  display: flex;
  gap: var(--grid-gutter);
  padding: var(--space-lg) 0 var(--space-section);
}

.fc-sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
}

.fc-content {
  flex: 1;
  min-width: 0;
  position: relative;
}

.fc-content > .fc-h2 {
  margin-bottom: var(--space-md);
}

/* Grid de productos: 2 móvil, 4 tablet, 6 desktop */
.fc-product-grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
  .fc-product-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1024px) {
  .fc-product-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* ========== 4. Header (sticky) ========== */
.fc-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-height);
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--neutral-divider);
  box-shadow: var(--shadow-header);
  display: flex;
  align-items: center;
  padding: 0 var(--space-lg);
  gap: var(--space-lg);
}

.fc-header .fc-logo {
  display: flex;
  align-items: center;
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  white-space: nowrap;
}

.fc-header .fc-logo-img {
  max-height: 40px;
  width: auto;
  object-fit: contain;
}

.fc-header .fc-search-wrap {
  flex: 1;
  max-width: 480px;
  margin: 0 auto;
}

/* ========== 5. Search bar ========== */
.fc-search {
  width: 100%;
  height: 48px;
  padding: 0 var(--space-md) 0 44px;
  font-size: var(--font-size-body-sm);
  color: var(--text-primary);
  background: var(--brand-secondary-bg);
  border: none;
  border-radius: var(--radius-xl);
  outline: none;
  box-sizing: border-box;
}

.fc-search::placeholder {
  color: var(--text-secondary);
}

.fc-search-wrap {
  position: relative;
}

.fc-search-wrap .fc-icon-search {
  position: absolute;
  left: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--text-secondary);
  pointer-events: none;
}

.fc-search-label {
  display: none;
}

/* Suggestive search overlay (typewriter): solo visible cuando input vacío y sin foco */
.fc-suggestive-overlay {
  position: absolute;
  left: 44px;
  right: var(--space-md);
  top: 0;
  bottom: 0;
  display: none;
  align-items: center;
  pointer-events: none;
  overflow: hidden;
  white-space: nowrap;
}
.fc-search-wrap.fc-suggestive-visible .fc-suggestive-overlay {
  display: flex;
}
.fc-suggestive-inner {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  transition: width 0.5s linear;
}
.fc-suggestive-inner.is-typing,
.fc-suggestive-inner.is-paused {
  transition-duration: 1.2s;
}
.fc-suggestive-inner.is-deleting {
  transition-duration: 0.3s;
}
.fc-suggestive-text {
  font-size: var(--font-size-body-sm);
  color: var(--text-secondary);
  user-select: none;
  flex-shrink: 0;
}
/* Móvil: mismo efecto que PC pero más compacto para una sola línea */
@media (max-width: 767px) {
  .fc-header .fc-search-wrap .fc-suggestive-overlay {
    left: 36px;
    right: var(--space-sm);
  }
  .fc-header .fc-search-wrap .fc-suggestive-overlay .fc-suggestive-text {
    font-size: var(--font-size-caption);
  }
  .fc-header .fc-search-wrap.fc-suggestive-visible .fc-search-label {
    display: none;
  }
  /* Colapsado con typewriter = mismo aspecto que PC pero más pequeño */
  .fc-header .fc-search-wrap:not(.is-expanded).fc-suggestive-visible {
    background: var(--brand-secondary-bg);
    border-radius: var(--radius-lg);
    border: none;
    box-shadow: none;
    padding: 0 var(--space-sm);
    min-width: 0;
    max-width: 120px;
    height: 38px;
    justify-content: flex-start;
  }
  .fc-header .fc-search-wrap:not(.is-expanded).fc-suggestive-visible .fc-icon-search.fc-search-lupa {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    width: 16px;
    height: 16px;
  }
  .fc-header .fc-search-wrap:not(.is-expanded).fc-suggestive-visible .fc-suggestive-overlay {
    left: 32px;
    right: var(--space-sm);
  }
}

/* ========== 6. Botones ========== */
.fc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 10px 24px;
  font-family: var(--font-family);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-entrance),
              background-color var(--duration-fast),
              color var(--duration-fast);
}

.fc-btn:active {
  transform: scale(0.98);
}

.fc-btn-primary {
  background: var(--brand-primary);
  color: var(--text-inverse);
  box-shadow: var(--shadow-level-1);
}

.fc-btn-primary:hover {
  background: var(--brand-primary-hover);
  box-shadow: 0 4px 14px rgba(0, 100, 162, 0.25);
}

.fc-btn-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.fc-btn-icon svg,
.fc-btn-icon .fc-btn-icon-svg {
  display: block;
}

.fc-btn-secondary {
  background: var(--brand-secondary-bg);
  color: var(--text-primary);
}

.fc-btn-secondary:hover {
  background: var(--neutral-divider);
}

/* ========== 7. Product card ========== */
.fc-product-card {
  background: rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-xl);
  overflow: hidden;
  padding: var(--space-md);
  box-shadow: var(--shadow-level-1);
  transition: box-shadow var(--duration-normal) var(--ease-entrance),
              transform var(--duration-normal) var(--ease-entrance);
}

.fc-product-card:hover {
  box-shadow: var(--shadow-level-2);
  transform: translateY(-4px);
}

.fc-product-card .fc-card-image-wrap {
  position: relative;
  aspect-ratio: 1;
  background: var(--brand-secondary-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-sm);
}

.fc-product-card .fc-card-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.fc-product-card .fc-card-title {
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  margin: 0 0 var(--space-xxs);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fc-product-card .fc-card-meta {
  font-size: var(--font-size-caption);
  color: var(--text-secondary);
  margin-bottom: var(--space-xs);
}

.fc-product-card .fc-card-price {
  margin-bottom: var(--space-sm);
}

.fc-product-card .fc-card-price-old {
  font-size: var(--font-size-caption);
  color: var(--sale-red);
  text-decoration: line-through;
  margin-right: var(--space-xs);
}

.fc-product-card .fc-card-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

.fc-product-card .fc-card-actions .fc-btn,
.fc-product-card .fc-card-actions a.fc-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
}

.fc-product-card .fc-btn-contactar {
  width: 100%;
  box-sizing: border-box;
}

/* ========== 8. Filter chips (estilo animado: seleccionado = oscuro, no seleccionado = claro) ========== */
.fc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.fc-chip {
  --chip-padding: 4px;
  --chip-radius: 24px;
  --chip-hue: 203;
  --chip-highlight-30: hsla(var(--chip-hue), 100%, 70%, 0.3);

  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--brand-primary);
  background: var(--brand-secondary-bg);
  border: 1px solid var(--neutral-divider);
  border-radius: var(--chip-radius);
  cursor: pointer;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.8),
    0 1px 2px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.4s, border-color 0.4s, background-color 0.4s, color 0.4s;
}

.fc-chip::before {
  content: "";
  position: absolute;
  top: calc(0px - var(--chip-padding));
  left: calc(0px - var(--chip-padding));
  width: calc(100% + var(--chip-padding) * 2);
  height: calc(100% + var(--chip-padding) * 2);
  border-radius: calc(var(--chip-radius) + var(--chip-padding));
  pointer-events: none;
  z-index: -1;
  transition: box-shadow 0.4s;
  box-shadow:
    0 -4px 8px -4px transparent inset,
    1px 1px 1px rgba(255, 255, 255, 0.5),
    -1px -1px 1px rgba(0, 0, 0, 0.04);
}

.fc-chip:hover {
  border-color: hsla(var(--chip-hue), 100%, 80%, 0.4);
  background: rgba(0, 100, 162, 0.08);
}
.fc-chip:hover::before {
  box-shadow:
    0 -4px 8px -4px var(--chip-highlight-30) inset,
    1px 1px 1px rgba(255, 255, 255, 0.6),
    -1px -1px 1px rgba(0, 0, 0, 0.04);
}

/* Chip seleccionado: color oscuro (como botón primario animado) */
.fc-chip.is-active {
  color: var(--text-inverse);
  background: var(--brand-primary);
  border-color: hsla(var(--chip-hue), 100%, 80%, 0.2);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.2),
    inset 0 2px 2px rgba(255, 255, 255, 0.15),
    0 -1px 1px rgba(0, 0, 0, 0.02),
    0 -2px 2px rgba(0, 0, 0, 0.03);
}
.fc-chip.is-active::before {
  box-shadow:
    0 -8px 8px -6px transparent inset,
    0 -16px 16px -8px transparent inset,
    1px 1px 1px rgba(255, 255, 255, 0.13),
    2px 2px 2px rgba(255, 255, 255, 0.08),
    -1px -1px 1px rgba(0, 0, 0, 0.13),
    -2px -2px 2px rgba(0, 0, 0, 0.06);
}
.fc-chip.is-active:hover {
  border-color: hsla(var(--chip-hue), 100%, 80%, 0.4);
}
.fc-chip.is-active:hover::before {
  box-shadow:
    0 -8px 8px -6px rgba(255, 255, 255, 0.06) inset,
    0 -16px 16px -8px var(--chip-highlight-30) inset,
    1px 1px 1px rgba(255, 255, 255, 0.13),
    2px 2px 2px rgba(255, 255, 255, 0.08),
    -1px -1px 1px rgba(0, 0, 0, 0.13),
    -2px -2px 2px rgba(0, 0, 0, 0.06);
}

.fc-chip:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.fc-chip-with-icon {
  gap: 8px;
}

.fc-chip-icon {
  flex-shrink: 0;
  vertical-align: middle;
}

/* Icono en chip seleccionado: blanco */
.fc-chip.is-active .fc-chip-icon {
  color: var(--text-inverse);
}
.fc-chip.is-active .fc-chip-icon stroke,
.fc-chip.is-active .fc-chip-icon path {
  stroke: currentColor;
}

/* Móvil: chips más pequeños para que quepan en dos líneas */
@media (max-width: 767px) {
  .fc-chips {
    gap: 6px;
    margin-bottom: var(--space-sm);
  }
  .fc-chip {
    padding: 6px 12px;
    font-size: var(--font-size-caption);
    line-height: 1.2;
  }
  .fc-chip-with-icon .fc-chip-icon {
    width: 14px;
    height: 14px;
  }
}

/* ========== 9. Badge (oferta/descuento) ========== */
.fc-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  background: var(--promo-yellow-badge);
  border-radius: var(--radius-sm);
}

/* ========== 10. Sidebar / filtros ========== */
.fc-sidebar {
  background: var(--bg-page);
}

/* En escritorio: sidebar sin fondo para que se vea el fondo de página */
@media (min-width: 768px) {
  .fc-sidebar {
    background: transparent;
  }
}

.fc-sidebar .fc-filter-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
}

.fc-sidebar .fc-filter-trigger,
.fc-sidebar .fc-anim-btn {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
}

.fc-filter-group.fc-price-group {
  margin-bottom: 0;
}

.fc-filter-group {
  margin-bottom: var(--space-lg);
}

/* Modal de lista (Categoría / Marca) */
.fc-filter-modal .fc-modal-close {
  top: var(--space-sm);
  right: var(--space-sm);
}

.fc-filter-modal-title,
.fc-filter-modal #filterModalTitle {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin: var(--space-md) 0 var(--space-sm);
  padding-right: 36px;
}

.fc-filter-modal-icon {
  flex-shrink: 0;
}

.fc-sidebar .fc-filter-btn-icon,
.fc-drawer .fc-filter-btn-icon {
  display: inline-flex;
  align-items: center;
  margin-right: 6px;
  flex-shrink: 0;
  vertical-align: middle;
}

.fc-filter-modal-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 70vh;
  overflow-y: auto;
}

.fc-filter-modal-list li {
  margin: 0;
  border-bottom: 1px solid var(--neutral-divider);
}

.fc-filter-modal-list li:last-child {
  border-bottom: none;
}

.fc-filter-modal-list button {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-md) var(--space-sm);
  font-size: var(--font-size-body-sm);
  color: var(--text-primary);
  background: none;
  border: none;
  cursor: pointer;
  transition: background var(--duration-fast);
}

.fc-filter-modal-list button:hover {
  background: var(--brand-secondary-bg);
}

.fc-filter-modal-list button.is-selected {
  background: var(--brand-secondary-bg);
  color: var(--brand-primary);
  font-weight: var(--font-weight-medium);
}

/* PC: modales de filtro (Categoría / Marca) más anchos para mejor visibilidad */
@media (min-width: 768px) {
  .fc-filter-modal {
    min-width: 380px;
    width: 420px;
    max-width: 90vw;
    padding: var(--space-lg) var(--space-xl);
  }
  .fc-filter-modal-list button {
    padding: var(--space-md) var(--space-md);
  }
}

.fc-filter-group .fc-filter-title {
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--space-sm);
}

.fc-filter-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.fc-filter-list li {
  margin-bottom: var(--space-xs);
}

.fc-filter-list a,
.fc-filter-list button {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-xs) 0;
  font-size: var(--font-size-body-sm);
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.fc-filter-list a:hover,
.fc-filter-list button:hover {
  color: var(--text-primary);
}

.fc-filter-list .is-active {
  color: var(--brand-primary);
  font-weight: var(--font-weight-medium);
}

/* ========== Animated Filter Button (estilo AnimatedGenerateButton portado a CSS puro) ========== */
.fc-anim-btn-wrap {
  position: relative;
  display: inline-block;
  width: 100%;
}

.fc-anim-btn {
  --anim-padding: 4px;
  --anim-radius: 24px;
  --anim-transition: 0.4s;
  --highlight-hue: 203;
  --highlight: hsl(var(--highlight-hue), 100%, 70%);
  --highlight-50: hsla(var(--highlight-hue), 100%, 70%, 0.5);
  --highlight-30: hsla(var(--highlight-hue), 100%, 70%, 0.3);
  --highlight-20: hsla(var(--highlight-hue), 100%, 70%, 0.2);
  --highlight-80: hsla(var(--highlight-hue), 100%, 70%, 0.8);

  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  user-select: none;
  width: 100%;
  padding: 10px 22px;
  border-radius: var(--anim-radius);
  font-family: var(--font-family);
  font-size: var(--font-size-body-sm);
  font-weight: 500;
  line-height: 1.2;
  color: var(--text-inverse);
  background: var(--brand-primary);
  border: 1px solid hsla(var(--highlight-hue), 100%, 80%, 0.2);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.2),
    inset 0 2px 2px rgba(255, 255, 255, 0.15),
    inset 0 4px 4px rgba(255, 255, 255, 0.1),
    0 -1px 1px rgba(0, 0, 0, 0.02),
    0 -2px 2px rgba(0, 0, 0, 0.03),
    0 -4px 4px rgba(0, 0, 0, 0.05);
  transition: box-shadow var(--anim-transition), border-color var(--anim-transition), background-color var(--anim-transition);
  outline: none;
  text-align: left;
}

.fc-anim-btn::before {
  content: "";
  position: absolute;
  top: calc(0px - var(--anim-padding));
  left: calc(0px - var(--anim-padding));
  width: calc(100% + var(--anim-padding) * 2);
  height: calc(100% + var(--anim-padding) * 2);
  border-radius: calc(var(--anim-radius) + var(--anim-padding));
  pointer-events: none;
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.04));
  z-index: -1;
  transition: box-shadow var(--anim-transition), filter var(--anim-transition);
  box-shadow:
    0 -8px 8px -6px transparent inset,
    0 -16px 16px -8px transparent inset,
    1px 1px 1px rgba(255, 255, 255, 0.13),
    2px 2px 2px rgba(255, 255, 255, 0.08),
    -1px -1px 1px rgba(0, 0, 0, 0.13),
    -2px -2px 2px rgba(0, 0, 0, 0.06);
}

.fc-anim-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: linear-gradient(0deg, #fff, var(--highlight), var(--highlight-50) 8%, transparent);
  background-position: 0 0;
  opacity: 0;
  transition: opacity var(--anim-transition), filter var(--anim-transition);
}

.fc-anim-btn-svg {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-right: 10px;
  fill: rgba(255, 255, 255, 0.9);
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.6));
  animation: fc-anim-flicker 2s linear infinite;
  animation-delay: 0.5s;
  transition: fill var(--anim-transition), filter var(--anim-transition);
}

.fc-anim-txt-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 6.4em;
}

/* Filtros CATEGORÍA/MARCA: dos líneas (etiqueta + valor), fuente más pequeña */
.fc-anim-btn .fc-anim-txt-wrapper {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  font-size: 12px;
  min-width: 0;
}

.fc-anim-txt-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  opacity: 0.92;
  line-height: 1.2;
}

.fc-anim-btn .fc-anim-txt-value,
.fc-anim-btn .fc-anim-txt.fc-anim-txt-value {
  display: block;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  word-break: break-word;
  min-width: 0;
}

.fc-anim-txt {
  position: relative;
  display: inline;
}

.fc-anim-letter {
  display: inline-block;
  color: rgba(255, 255, 255, 0.53);
  animation: fc-anim-letter-glow 2s ease-in-out infinite;
  transition: color var(--anim-transition), text-shadow var(--anim-transition), opacity var(--anim-transition);
}

@keyframes fc-anim-letter-glow {
  50% {
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.5);
    color: #fff;
  }
}

@keyframes fc-anim-flicker {
  50% {
    opacity: 0.35;
  }
}

/* Letter stagger (hasta 20 caracteres) */
.fc-anim-txt .fc-anim-letter:nth-child(1) { animation-delay: 0s; }
.fc-anim-txt .fc-anim-letter:nth-child(2) { animation-delay: 0.08s; }
.fc-anim-txt .fc-anim-letter:nth-child(3) { animation-delay: 0.16s; }
.fc-anim-txt .fc-anim-letter:nth-child(4) { animation-delay: 0.24s; }
.fc-anim-txt .fc-anim-letter:nth-child(5) { animation-delay: 0.32s; }
.fc-anim-txt .fc-anim-letter:nth-child(6) { animation-delay: 0.4s; }
.fc-anim-txt .fc-anim-letter:nth-child(7) { animation-delay: 0.48s; }
.fc-anim-txt .fc-anim-letter:nth-child(8) { animation-delay: 0.56s; }
.fc-anim-txt .fc-anim-letter:nth-child(9) { animation-delay: 0.64s; }
.fc-anim-txt .fc-anim-letter:nth-child(10) { animation-delay: 0.72s; }
.fc-anim-txt .fc-anim-letter:nth-child(11) { animation-delay: 0.8s; }
.fc-anim-txt .fc-anim-letter:nth-child(12) { animation-delay: 0.88s; }
.fc-anim-txt .fc-anim-letter:nth-child(13) { animation-delay: 0.96s; }
.fc-anim-txt .fc-anim-letter:nth-child(14) { animation-delay: 1.04s; }
.fc-anim-txt .fc-anim-letter:nth-child(15) { animation-delay: 1.12s; }
.fc-anim-txt .fc-anim-letter:nth-child(16) { animation-delay: 1.2s; }
.fc-anim-txt .fc-anim-letter:nth-child(17) { animation-delay: 1.28s; }
.fc-anim-txt .fc-anim-letter:nth-child(18) { animation-delay: 1.36s; }
.fc-anim-txt .fc-anim-letter:nth-child(19) { animation-delay: 1.44s; }
.fc-anim-txt .fc-anim-letter:nth-child(20) { animation-delay: 1.52s; }

/* Hover */
.fc-anim-btn:hover {
  border-color: hsla(var(--highlight-hue), 100%, 80%, 0.4);
}
.fc-anim-btn:hover::before {
  box-shadow:
    0 -8px 8px -6px rgba(255, 255, 255, 0.06) inset,
    0 -16px 16px -8px var(--highlight-30) inset,
    1px 1px 1px rgba(255, 255, 255, 0.13),
    2px 2px 2px rgba(255, 255, 255, 0.08),
    -1px -1px 1px rgba(0, 0, 0, 0.13),
    -2px -2px 2px rgba(0, 0, 0, 0.06);
}
.fc-anim-btn:hover::after {
  opacity: 1;
  -webkit-mask-image: linear-gradient(0deg, #fff, transparent);
  mask-image: linear-gradient(0deg, #fff, transparent);
}
.fc-anim-btn:hover .fc-anim-btn-svg {
  fill: #fff;
  filter: drop-shadow(0 0 3px var(--highlight)) drop-shadow(0 -4px 6px rgba(0, 0, 0, 0.35));
  animation: none;
}

/* Focus */
.fc-anim-btn:focus-visible {
  outline: 2px solid var(--highlight);
  outline-offset: 2px;
}
.fc-anim-btn:focus-visible::before {
  box-shadow:
    0 -8px 12px -6px rgba(255, 255, 255, 0.2) inset,
    0 -16px 16px -8px var(--highlight-20) inset,
    1px 1px 1px rgba(255, 255, 255, 0.2),
    2px 2px 2px rgba(255, 255, 255, 0.08),
    -1px -1px 1px rgba(0, 0, 0, 0.13),
    -2px -2px 2px rgba(0, 0, 0, 0.06);
}
.fc-anim-btn:focus-visible::after {
  opacity: 0.6;
  -webkit-mask-image: linear-gradient(0deg, #fff, transparent);
  mask-image: linear-gradient(0deg, #fff, transparent);
}

/* Active */
.fc-anim-btn:active {
  border-color: hsla(var(--highlight-hue), 100%, 80%, 0.7);
  background-color: hsla(var(--highlight-hue), 50%, 25%, 0.6);
}
.fc-anim-btn:active::before {
  box-shadow:
    0 -8px 12px -6px rgba(255, 255, 255, 0.06) inset,
    0 -16px 16px -8px var(--highlight-80) inset,
    1px 1px 1px rgba(255, 255, 255, 0.25),
    2px 2px 2px rgba(255, 255, 255, 0.13),
    -1px -1px 1px rgba(0, 0, 0, 0.13),
    -2px -2px 2px rgba(0, 0, 0, 0.06);
}
.fc-anim-btn:active::after {
  opacity: 1;
  -webkit-mask-image: linear-gradient(0deg, #fff, transparent);
  mask-image: linear-gradient(0deg, #fff, transparent);
  filter: brightness(2);
}
.fc-anim-btn:active .fc-anim-letter {
  text-shadow: 0 0 1px var(--highlight-80);
  animation: none;
}

.fc-anim-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ========== Variante simple (Contactar, Aplicar filtros): mismo estilo, texto plano ========== */
.fc-anim-btn-simple {
  --anim-padding: 4px;
  --anim-radius: 24px;
  --anim-transition: 0.4s;
  --highlight-hue: 203;
  --highlight: hsl(var(--highlight-hue), 100%, 70%);
  --highlight-50: hsla(var(--highlight-hue), 100%, 70%, 0.5);
  --highlight-30: hsla(var(--highlight-hue), 100%, 70%, 0.3);
  --highlight-20: hsla(var(--highlight-hue), 100%, 70%, 0.2);
  --highlight-80: hsla(var(--highlight-hue), 100%, 70%, 0.8);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: var(--anim-radius);
  font-family: var(--font-family);
  font-size: var(--font-size-body-sm);
  font-weight: 500;
  line-height: 1.2;
  color: var(--text-inverse);
  background: var(--brand-primary);
  border: 1px solid hsla(var(--highlight-hue), 100%, 80%, 0.2);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.2),
    inset 0 2px 2px rgba(255, 255, 255, 0.15),
    0 -1px 1px rgba(0, 0, 0, 0.02),
    0 -2px 2px rgba(0, 0, 0, 0.03);
  transition: box-shadow var(--anim-transition), border-color var(--anim-transition), background-color var(--anim-transition);
  text-decoration: none;
  outline: none;
  cursor: pointer;
}

.fc-anim-btn-simple::before {
  content: "";
  position: absolute;
  top: calc(0px - var(--anim-padding));
  left: calc(0px - var(--anim-padding));
  width: calc(100% + var(--anim-padding) * 2);
  height: calc(100% + var(--anim-padding) * 2);
  border-radius: calc(var(--anim-radius) + var(--anim-padding));
  pointer-events: none;
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.04));
  z-index: -1;
  transition: box-shadow var(--anim-transition);
  box-shadow:
    0 -8px 8px -6px transparent inset,
    0 -16px 16px -8px transparent inset,
    1px 1px 1px rgba(255, 255, 255, 0.13),
    2px 2px 2px rgba(255, 255, 255, 0.08),
    -1px -1px 1px rgba(0, 0, 0, 0.13),
    -2px -2px 2px rgba(0, 0, 0, 0.06);
}

.fc-anim-btn-simple::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: linear-gradient(0deg, #fff, var(--highlight), var(--highlight-50) 8%, transparent);
  opacity: 0;
  transition: opacity var(--anim-transition);
}

.fc-anim-btn-simple:hover {
  border-color: hsla(var(--highlight-hue), 100%, 80%, 0.4);
}
.fc-anim-btn-simple:hover::before {
  box-shadow:
    0 -8px 8px -6px rgba(255, 255, 255, 0.06) inset,
    0 -16px 16px -8px var(--highlight-30) inset,
    1px 1px 1px rgba(255, 255, 255, 0.13),
    2px 2px 2px rgba(255, 255, 255, 0.08),
    -1px -1px 1px rgba(0, 0, 0, 0.13),
    -2px -2px 2px rgba(0, 0, 0, 0.06);
}
.fc-anim-btn-simple:hover::after {
  opacity: 1;
  -webkit-mask-image: linear-gradient(0deg, #fff, transparent);
  mask-image: linear-gradient(0deg, #fff, transparent);
}

.fc-anim-btn-simple:focus-visible {
  outline: 2px solid var(--highlight);
  outline-offset: 2px;
}
.fc-anim-btn-simple:active {
  border-color: hsla(var(--highlight-hue), 100%, 80%, 0.7);
  background-color: hsla(var(--highlight-hue), 50%, 25%, 0.6);
}
.fc-anim-btn-simple:active::after {
  opacity: 1;
  filter: brightness(2);
}

/* Contactar en tarjetas: texto más pequeño para leer mejor y ver el icono */
.fc-product-card .fc-anim-btn-simple.fc-btn-contactar,
.fc-product-card a.fc-anim-btn-simple.fc-btn-contactar {
  font-size: 12px;
  padding: 8px 14px;
}
.fc-product-card .fc-anim-btn-simple.fc-btn-contactar .fc-btn-icon svg,
.fc-product-card a.fc-anim-btn-simple.fc-btn-contactar .fc-btn-icon svg {
  width: 16px;
  height: 16px;
}

/* Ver detalle en tarjetas: misma letra y padding que Contactar */
.fc-product-card .fc-anim-btn-light,
.fc-product-card button.fc-anim-btn-light {
  font-size: 12px;
  padding: 8px 14px;
}

/* ========== Variante clara (Ver detalle) ========== */
.fc-anim-btn-light {
  --anim-padding: 4px;
  --anim-radius: 24px;
  --anim-transition: 0.4s;
  --highlight-hue: 203;
  --highlight-20: hsla(var(--highlight-hue), 100%, 70%, 0.2);
  --highlight-30: hsla(var(--highlight-hue), 100%, 70%, 0.3);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: var(--anim-radius);
  font-family: var(--font-family);
  font-size: var(--font-size-body-sm);
  font-weight: 500;
  line-height: 1.2;
  color: var(--brand-primary);
  background: var(--brand-secondary-bg);
  border: 1px solid var(--neutral-divider);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.8),
    0 1px 2px rgba(0, 0, 0, 0.04);
  transition: box-shadow var(--anim-transition), border-color var(--anim-transition), background-color var(--anim-transition);
  text-decoration: none;
  outline: none;
  cursor: pointer;
}

.fc-anim-btn-light::before {
  content: "";
  position: absolute;
  top: calc(0px - var(--anim-padding));
  left: calc(0px - var(--anim-padding));
  width: calc(100% + var(--anim-padding) * 2);
  height: calc(100% + var(--anim-padding) * 2);
  border-radius: calc(var(--anim-radius) + var(--anim-padding));
  pointer-events: none;
  z-index: -1;
  transition: box-shadow var(--anim-transition);
  box-shadow:
    0 -4px 8px -4px transparent inset,
    1px 1px 1px rgba(255, 255, 255, 0.5),
    -1px -1px 1px rgba(0, 0, 0, 0.04);
}

.fc-anim-btn-light:hover {
  border-color: hsla(var(--highlight-hue), 100%, 80%, 0.4);
  background: rgba(0, 100, 162, 0.08);
}
.fc-anim-btn-light:hover::before {
  box-shadow:
    0 -4px 8px -4px var(--highlight-30) inset,
    1px 1px 1px rgba(255, 255, 255, 0.6),
    -1px -1px 1px rgba(0, 0, 0, 0.04);
}

.fc-anim-btn-light:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}
.fc-anim-btn-light:active {
  background: var(--neutral-divider);
}

.fc-price-range {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
}

.fc-price-range-sep {
  flex-shrink: 0;
  color: var(--text-secondary);
  font-weight: var(--font-weight-medium);
}

/* Input precio: estilo SmartAssist / originui Input con colores tienda */
.fc-price-input {
  flex: 1;
  min-width: 0;
  height: 40px;
  width: 100%;
  padding: 10px 14px;
  font-family: var(--font-family);
  font-size: var(--font-size-body-sm);
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--neutral-divider);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: border-color var(--duration-normal), box-shadow var(--duration-normal);
  outline: none;
}

.fc-price-input::placeholder {
  color: var(--text-secondary);
  opacity: 0.8;
}

.fc-price-input:hover {
  border-color: var(--text-secondary);
}

.fc-price-input:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(0, 100, 162, 0.15);
}

.fc-price-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

@media (min-width: 768px) {
  .fc-sidebar .fc-price-input {
    background: rgba(255, 255, 255, 0.6);
  }
}

/* ========== 11. Ordenación ========== */
.fc-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.fc-sort-select {
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-size-body-sm);
  color: var(--text-primary);
  background: var(--bg-page);
  border: 1px solid var(--neutral-divider);
  border-radius: var(--radius-md);
  cursor: pointer;
}

/* ========== Ordenar: dropdown (estilo dropdown-01 con colores tienda) ========== */
.fc-sort-dropdown-wrap {
  position: relative;
}

.fc-sort-dropdown {
  position: relative;
  min-width: 200px;
}

.fc-sort-dropdown-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 14px 20px;
  font-family: var(--font-family);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  background: var(--bg-page);
  border: 2px solid var(--brand-primary);
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
  text-align: left;
}

.fc-sort-dropdown-btn:hover {
  background: var(--brand-secondary-bg);
  color: var(--brand-primary);
}

.fc-sort-dropdown-chevron {
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.fc-sort-dropdown.is-open .fc-sort-dropdown-chevron {
  transform: rotate(180deg);
}

.fc-sort-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: var(--z-dropdown);
  background: var(--bg-page);
  border: 2px solid var(--brand-primary);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-level-3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.fc-sort-dropdown.is-open .fc-sort-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.fc-sort-dropdown-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 20px;
  font-family: var(--font-family);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--neutral-divider);
  cursor: pointer;
  text-align: left;
  transition: background-color 0.2s, color 0.2s;
}

.fc-sort-dropdown-option:last-child {
  border-bottom: none;
}

.fc-sort-dropdown-option:hover {
  background: var(--brand-secondary-bg);
  color: var(--brand-primary);
}

.fc-sort-dropdown-option.is-selected {
  background: var(--brand-secondary-bg);
  color: var(--brand-primary);
  font-weight: var(--font-weight-semibold);
}

.fc-sort-dropdown-option.is-selected::after {
  content: "";
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-left: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230064A2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* ========== 12. Modal ========== */
.fc-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal-backdrop);
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-normal) var(--ease-entrance),
              visibility var(--duration-normal);
}

.fc-modal-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

.fc-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: var(--z-modal);
  transform: translate(-50%, -50%) scale(0.95);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--duration-normal) var(--ease-entrance),
              opacity var(--duration-normal),
              visibility var(--duration-normal);
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
  background: var(--bg-page);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-level-3);
  padding: var(--space-lg);
}

.fc-modal-backdrop.is-open + .fc-modal,
.fc-modal.is-open {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  visibility: visible;
}

.fc-modal-close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  z-index: 10;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  background: var(--brand-secondary-bg);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  color: var(--text-secondary);
}

.fc-modal-close:hover {
  background: var(--neutral-divider);
  color: var(--text-primary);
}

.fc-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 600px) {
  .fc-modal-grid {
    grid-template-columns: 1fr;
  }
}

/* Móvil: modal de detalle; X encima de la foto con espacio */
@media (max-width: 767px) {
  .fc-modal {
    max-width: 75vw;
    width: 75vw;
    padding-top: 52px;
  }
  .fc-modal .fc-modal-close {
    z-index: 100;
    top: 8px;
    right: 8px;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    color: var(--text-primary);
    font-size: 22px;
  }
  .fc-modal .fc-modal-close:hover {
    background: #fff;
  }
}

/* ========== 13. Drawer (móvil) ========== */
.fc-drawer {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-dropdown);
  width: 280px;
  max-width: 85vw;
  height: 100vh;
  background: var(--bg-page);
  box-shadow: var(--shadow-level-3);
  transform: translateX(-100%);
  transition: transform var(--duration-normal) var(--ease-entrance);
  overflow-y: auto;
}

.fc-drawer.is-open {
  transform: translateX(0);
}

.fc-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-dropdown) - 1);
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-normal), visibility var(--duration-normal);
}

.fc-drawer-backdrop.is-open {
  opacity: 1;
  visibility: visible;
}

@media (min-width: 768px) {
  .fc-drawer-toggle {
    display: none;
  }
}

@media (max-width: 767px) {
  .fc-sidebar:not(.fc-drawer) {
    display: none;
  }

  .fc-header {
    flex-wrap: nowrap;
    gap: 6px;
    padding: 6px 12px;
    min-height: auto;
    height: auto;
  }

  /* Contactar: solo icono, más compacto para una línea */
  .fc-header .fc-btn-contactar {
    order: 10;
    padding: 8px;
    min-width: 40px;
    height: 38px;
  }
  .fc-header .fc-logo-img {
    max-height: 36px;
  }
  .fc-header .fc-drawer-toggle {
    padding: 8px;
    min-width: 40px;
    height: 38px;
  }
  .fc-header .fc-btn-contactar .fc-btn-text {
    display: none;
  }

  /* Búsqueda: más compacta para mantener una sola línea (filtros, logo, búsqueda, contactar) */
  .fc-header .fc-search-wrap {
    order: 3;
    flex: 0 1 auto;
    width: auto;
    min-width: 40px;
    max-width: 140px;
    height: 38px;
    margin: 0;
    padding: 0 10px;
    gap: 6px;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--neutral-divider);
    border-radius: var(--radius-pill);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: flex 0.25s ease, width 0.25s ease, background 0.2s, border-color 0.2s;
  }
  .fc-header .fc-search-wrap:hover {
    background: var(--brand-secondary-bg);
    border-color: hsla(203, 100%, 80%, 0.4);
  }
  .fc-header .fc-search-wrap .fc-icon-search.fc-search-lupa {
    position: static;
    transform: none;
    flex-shrink: 0;
    color: var(--brand-primary);
    pointer-events: none;
  }
  .fc-header .fc-search-wrap .fc-search-label {
    display: inline;
    font-size: var(--font-size-caption);
    font-weight: 500;
    color: var(--brand-primary);
    white-space: nowrap;
  }
  .fc-header .fc-search-wrap.is-expanded {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    height: 48px;
    padding: 0;
    justify-content: flex-start;
    background: var(--brand-secondary-bg);
    border-radius: var(--radius-xl);
  }
  .fc-header .fc-search-wrap.is-expanded .fc-search-label {
    display: none;
  }
  .fc-header .fc-search-wrap.is-expanded .fc-icon-search.fc-search-lupa {
    position: absolute;
    left: var(--space-md);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
  }
  .fc-header .fc-search-wrap .fc-search {
    width: 0;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    opacity: 0;
    border: none;
    background: transparent;
    transition: width 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
  }
  .fc-header .fc-search-wrap.is-expanded .fc-search {
    width: 100%;
    min-width: 120px;
    padding-left: 44px;
    padding-right: var(--space-md);
    opacity: 1;
  }

  .fc-main {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ========== 14. Paginación (estilo botones producto: oscuro Anterior/Siguiente/actual, claro resto) ========== */
.fc-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}

.fc-pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--space-md);
  font-family: var(--font-family);
  font-size: var(--font-size-body-sm);
  font-weight: var(--font-weight-medium);
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
  text-decoration: none;
  box-sizing: border-box;
}

/* Anterior, Siguiente y página actual: azul oscuro (como botón Contactar) */
.fc-pagination-dark {
  background: var(--brand-primary);
  color: var(--text-inverse);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.fc-pagination-dark:hover:not(:disabled) {
  background: var(--brand-primary-hover);
  box-shadow: 0 2px 8px rgba(0, 100, 162, 0.25);
}

.fc-pagination-dark:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

/* Otras páginas: azul claro (como Ver detalle) */
.fc-pagination-light {
  background: var(--brand-secondary-bg);
  color: var(--brand-primary);
  border: 1px solid var(--neutral-divider);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.fc-pagination-light:hover {
  background: rgba(0, 100, 162, 0.12);
  border-color: hsla(203, 100%, 80%, 0.4);
}

.fc-pagination-light:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.fc-pagination-ellipsis {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-xs);
  font-size: var(--font-size-body-sm);
  color: var(--text-secondary);
  user-select: none;
}

/* Flechas con CSS (evita recorte en móvil) */
.fc-pagination-arrow {
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  vertical-align: middle;
}
.fc-pagination-arrow-prev {
  border-width: 5px 7px 5px 0;
  border-color: transparent currentColor transparent transparent;
}
.fc-pagination-arrow-next {
  border-width: 5px 0 5px 7px;
  border-color: transparent transparent transparent currentColor;
}

/* Móvil: wrap en varias líneas si hace falta, sin barra de desplazamiento */
@media (max-width: 767px) {
  .fc-pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: var(--space-xl);
    padding: 4px 8px;
    overflow: visible;
  }
  .fc-pagination-btn {
    flex-shrink: 0;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    font-size: var(--font-size-caption);
    overflow: visible;
  }
  .fc-pagination-prev,
  .fc-pagination-next {
    padding: 0 10px;
    min-width: 44px;
    flex-shrink: 0;
  }
  .fc-pagination-ellipsis {
    flex-shrink: 0;
    padding: 0 2px;
  }
}

/* ========== 15. Utilidades ========== */
.fc-focus-ring:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.fc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ========== Falling Pattern (fondo animado) — tonos empresa ========== */
:root {
  --falling-pattern-color: rgba(0, 100, 162, 0.35);
  --falling-pattern-bg: #E8F8FF;
  --falling-pattern-duration: 150s;
  --falling-pattern-blur: 0.25em;
}

.fc-falling-pattern-wrap {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.fc-app-content {
  position: relative;
  z-index: 1;
  min-height: 100vh;
}

.fc-falling-pattern {
  position: absolute;
  inset: -2px;
  z-index: 0;
  /* Fondo base: azul claro empresa + gradiente suave azul */
  background-color: var(--falling-pattern-bg);
  background-image:
    linear-gradient(180deg, rgba(0, 100, 162, 0.06) 0%, transparent 40%, rgba(0, 100, 162, 0.04) 100%),
    radial-gradient(4px 100px at 0px 235px, var(--falling-pattern-color), transparent),
    radial-gradient(4px 100px at 300px 235px, var(--falling-pattern-color), transparent),
    radial-gradient(1.5px 1.5px at 150px 117.5px, var(--falling-pattern-color) 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 252px, var(--falling-pattern-color), transparent),
    radial-gradient(4px 100px at 300px 252px, var(--falling-pattern-color), transparent),
    radial-gradient(1.5px 1.5px at 150px 126px, var(--falling-pattern-color) 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 150px, var(--falling-pattern-color), transparent),
    radial-gradient(4px 100px at 300px 150px, var(--falling-pattern-color), transparent),
    radial-gradient(1.5px 1.5px at 150px 75px, var(--falling-pattern-color) 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 253px, var(--falling-pattern-color), transparent),
    radial-gradient(4px 100px at 300px 253px, var(--falling-pattern-color), transparent),
    radial-gradient(1.5px 1.5px at 150px 126.5px, var(--falling-pattern-color) 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 204px, var(--falling-pattern-color), transparent),
    radial-gradient(4px 100px at 300px 204px, var(--falling-pattern-color), transparent),
    radial-gradient(1.5px 1.5px at 150px 102px, var(--falling-pattern-color) 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 134px, var(--falling-pattern-color), transparent),
    radial-gradient(4px 100px at 300px 134px, var(--falling-pattern-color), transparent),
    radial-gradient(1.5px 1.5px at 150px 67px, var(--falling-pattern-color) 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 179px, var(--falling-pattern-color), transparent),
    radial-gradient(4px 100px at 300px 179px, var(--falling-pattern-color), transparent),
    radial-gradient(1.5px 1.5px at 150px 89.5px, var(--falling-pattern-color) 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 299px, var(--falling-pattern-color), transparent),
    radial-gradient(4px 100px at 300px 299px, var(--falling-pattern-color), transparent),
    radial-gradient(1.5px 1.5px at 150px 149.5px, var(--falling-pattern-color) 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 215px, var(--falling-pattern-color), transparent),
    radial-gradient(4px 100px at 300px 215px, var(--falling-pattern-color), transparent),
    radial-gradient(1.5px 1.5px at 150px 107.5px, var(--falling-pattern-color) 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 281px, var(--falling-pattern-color), transparent),
    radial-gradient(4px 100px at 300px 281px, var(--falling-pattern-color), transparent),
    radial-gradient(1.5px 1.5px at 150px 140.5px, var(--falling-pattern-color) 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 158px, var(--falling-pattern-color), transparent),
    radial-gradient(4px 100px at 300px 158px, var(--falling-pattern-color), transparent),
    radial-gradient(1.5px 1.5px at 150px 79px, var(--falling-pattern-color) 100%, transparent 150%),
    radial-gradient(4px 100px at 0px 210px, var(--falling-pattern-color), transparent),
    radial-gradient(4px 100px at 300px 210px, var(--falling-pattern-color), transparent),
    radial-gradient(1.5px 1.5px at 150px 105px, var(--falling-pattern-color) 100%, transparent 150%);
  background-size:
    100% 100%,
    300px 235px, 300px 235px, 300px 235px,
    300px 252px, 300px 252px, 300px 252px,
    300px 150px, 300px 150px, 300px 150px,
    300px 253px, 300px 253px, 300px 253px,
    300px 204px, 300px 204px, 300px 204px,
    300px 134px, 300px 134px, 300px 134px,
    300px 179px, 300px 179px, 300px 179px,
    300px 299px, 300px 299px, 300px 299px,
    300px 215px, 300px 215px, 300px 215px,
    300px 281px, 300px 281px, 300px 281px,
    300px 158px, 300px 158px, 300px 158px,
    300px 210px, 300px 210px, 300px 210px;
  background-position:
    0 0,
    0px 220px, 3px 220px, 151.5px 337.5px, 25px 24px, 28px 24px, 176.5px 150px, 50px 16px, 53px 16px, 201.5px 91px, 75px 224px, 78px 224px, 226.5px 230.5px, 100px 19px, 103px 19px, 251.5px 121px, 125px 120px, 128px 120px, 276.5px 187px, 150px 31px, 153px 31px, 301.5px 120.5px, 175px 235px, 178px 235px, 326.5px 384.5px, 200px 121px, 203px 121px, 351.5px 228.5px, 225px 224px, 228px 224px, 376.5px 364.5px, 250px 26px, 253px 26px, 401.5px 105px, 275px 75px, 278px 75px, 426.5px 180px;
  background-repeat: no-repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat;
  animation: fc-falling-pattern-anim var(--falling-pattern-duration) linear infinite;
}

@keyframes fc-falling-pattern-anim {
  0% {
    background-position:
      0 0,
      0px 220px, 3px 220px, 151.5px 337.5px, 25px 24px, 28px 24px, 176.5px 150px, 50px 16px, 53px 16px, 201.5px 91px, 75px 224px, 78px 224px, 226.5px 230.5px, 100px 19px, 103px 19px, 251.5px 121px, 125px 120px, 128px 120px, 276.5px 187px, 150px 31px, 153px 31px, 301.5px 120.5px, 175px 235px, 178px 235px, 326.5px 384.5px, 200px 121px, 203px 121px, 351.5px 228.5px, 225px 224px, 228px 224px, 376.5px 364.5px, 250px 26px, 253px 26px, 401.5px 105px, 275px 75px, 278px 75px, 426.5px 180px;
  }
  100% {
    background-position:
      0 0,
      0px 6800px, 3px 6800px, 151.5px 6917.5px, 25px 13632px, 28px 13632px, 176.5px 13758px, 50px 5416px, 53px 5416px, 201.5px 5491px, 75px 17175px, 78px 17175px, 226.5px 17301.5px, 100px 5119px, 103px 5119px, 251.5px 5221px, 125px 8428px, 128px 8428px, 276.5px 8495px, 150px 9876px, 153px 9876px, 301.5px 9965.5px, 175px 13391px, 178px 13391px, 326.5px 13540.5px, 200px 14741px, 203px 14741px, 351.5px 14848.5px, 225px 18770px, 228px 18770px, 376.5px 18910.5px, 250px 5082px, 253px 5082px, 401.5px 5161px, 275px 6375px, 278px 6375px, 426.5px 6480px;
  }
}

.fc-falling-pattern-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  backdrop-filter: blur(var(--falling-pattern-blur));
  -webkit-backdrop-filter: blur(var(--falling-pattern-blur));
  background-image: radial-gradient(circle at 50% 50%, transparent 0, transparent 2px, rgba(255,255,255,0.25) 2px);
  background-size: 8px 8px;
}