/* ============================================================================
 * ficha-graficos.css — la capa GRÁFICA de la UI del cliente (ficha + catálogo).
 *
 * Por qué existe (Edu, jul 2026): *"déjalo bonito, lógico, gráfico, NO QUITES
 * FUNCIONES, organízalas… NO QUITES RECURSOS GRÁFICOS"*. Esta hoja **no quita
 * nada**: ordena, jerarquiza y convierte texto plano en gráfico.
 *
 * REGLAS DE ESTA HOJA
 * 1. Prefijo propio `fx-` en TODO lo nuevo. `main.css` (287 KB, lleno de
 *    !important, frágil) NO se toca.
 * 2. Cuando hay que reformar algo que ya existe, el JS le AÑADE una clase con
 *    prefijo (`.product-trust.fx-trust`, `.sbl-criteria.fx-crit`) y se estiliza
 *    esa combinación — nunca la clase ajena a secas. Así, si otro agente toca
 *    esa clase, nuestro cambio sigue siendo rastreable a un solo archivo.
 * 3. Todo movimiento respeta `prefers-reduced-motion` (bloque al final).
 * 4. El CELULAR primero: nada se desborda a 390 px; lo ancho scrollea DENTRO
 *    contenedor, nunca el body.
 *
 * Los colores DICEN algo, no decoran:
 *   verde  #1E8E5A → respaldado / incluido / cumple
 *   ámbar  #B8901E → atención / leer antes / premium-upgrade
 *   marino #001450 → marca y acción
 *   teal   #00876e → rótulo de sección (mismo de /es/verificar/)
 * ==========================================================================*/

:root {
  --fx-ok: #1E8E5A;
  --fx-ok-bg: #EAF6EF;
  --fx-warn: #B8901E;
  --fx-warn-bg: #FBF3E2;
  --fx-navy: #001450;
  --fx-teal: #00876e;
  --fx-gold: #C9A24B;
  --fx-line: #E0DDD3;
  --fx-ink: #1B2536;
  --fx-ink-soft: #5A6573;
  --fx-paper: #FCFBF7;
}

/* ══════════════════════════════════════════════════════════════════════════
   0 · PIEZAS COMUNES
   ═════════════════════════════════════════════════════════════════════════*/

.fx-ey {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--fx-teal);
  margin: 0 0 8px;
  display: block;
}

/* Revelado al scroll — el JS pone .is-in cuando entra en pantalla. */
.fx-rev { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.fx-rev.is-in { opacity: 1; transform: none; }

/* ══════════════════════════════════════════════════════════════════════════
   1 · FICHA · HOJA DE DECISIÓN (lo primero que se ve: ¿para qué me sirve?)
   Va DENTRO del hero, arriba del nombre del compuesto. Punto 4 (dashboard),
   6 (jerarquías) y 16 (capas) de DISENO_ANTES_DE_CONSTRUIR.
   ═════════════════════════════════════════════════════════════════════════*/

.fx-goal {
  margin: 0 0 16px;
  padding: 0 0 15px;
  border-bottom: 1px solid var(--fx-line);
  position: relative;
  z-index: 1;          /* la foto de la galería se sale un poco de su caja en
                          celular; el titular del beneficio no se pinta debajo */
}
/* En celular la banda es lo primero después de la foto: un respiro para que el
   frasco (que desborda su caja unos píxeles) no se le monte encima. */
@media (max-width: 880px) { .fx-goal { margin-top: 26px; } }

.fx-goal-h {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(21px, 4.6vw, 27px);
  font-weight: 500;
  line-height: 1.2;
  color: var(--fx-navy);
  margin: 0 0 11px;
  letter-spacing: -.2px;
}

.fx-goal-h b { font-weight: 600; color: var(--cat-color, var(--fx-navy)); }

/* Variante para los kits (stack/blend con caja): ahí el subtítulo de la BD YA
   es la indicación —"Energía mitocondrial"— así que no se repite el titular;
   solo van los datos que deciden. */
.fx-goal.fx-goal-solo { border-bottom: none; padding-bottom: 0; margin-bottom: 14px; }

.fx-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }

.fx-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--fx-ink);
  background: #fff;
  border: 1px solid var(--fx-line);
  border-radius: 999px;
  padding: 6px 12px 6px 9px;
  max-width: 100%;
}

.fx-chip-dot {
  flex: 0 0 auto;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--cat-color, var(--fx-teal));
}

/* Semáforo de evidencia: el color DICE el nivel, no decora. */
.fx-chip.lvl-h { border-color: #BFE3CE; background: var(--fx-ok-bg); }
.fx-chip.lvl-h .fx-chip-dot { background: var(--fx-ok); }
.fx-chip.lvl-m { border-color: #EBD9AE; background: var(--fx-warn-bg); }
.fx-chip.lvl-m .fx-chip-dot { background: var(--fx-warn); }

/* Es un <a href="#beneficios"> desde 2026-08-12 (antes un <button> con
   scroll suave que el celular cancelaba y no llevaba a ningún lado). Se le
   quita el subrayado de enlace para que se vea igual que antes. */
.fx-goal-more {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 10px 0 0;
  background: none; border: none; padding: 0;
  font-family: 'Montserrat', sans-serif; font-size: 12.5px; font-weight: 700;
  color: var(--blue-accent, #2864A0); cursor: pointer;
  text-decoration: none;
}
.fx-goal-more:hover { text-decoration: underline; }
/* El destino se detiene DEBAJO de la cabecera fija, no tapado por ella. */
#beneficios { scroll-margin-top: 84px; }

/* ── Los 4 datos que deciden, sin un clic: presentación · frecuencia ·
      duración · vía. Salen del protocolo YA resuelto por la BD. ───────────*/
.fx-facts {
  display: grid;
  /* DOS COLUMNAS SIEMPRE, y no `auto-fit` (2026-08-15).
     Con `auto-fit` cabían tres columnas y los cuatro datos quedaban 3 + 1: la
     segunda fila dejaba dos celdas vacías y por ellas asomaba el fondo gris del
     contenedor —el truco con el que se dibujan las líneas de 1px—, que se veía
     como un bloque con sombra al lado de «Cómo se aplica». Lo señaló Edu.
     Con dos columnas los cuatro datos cierran 2×2 exacto, sin huecos.
     `grid-auto-rows: 1fr` iguala el alto de las filas: todas las tarjetas
     miden lo mismo, incluida la de la presentación. */
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 1px;
  background: var(--fx-line);
  border: 1px solid var(--fx-line);
  border-radius: 12px;
  overflow: hidden;
  margin: 14px 0 0;
}

.fx-fact { background: #fff; padding: 11px 12px 10px; min-width: 0; }
/* Número IMPAR de datos (los kits traen 3): el último ocupa la fila entera en
   vez de dejar el hueco gris al lado. La regla vivía dentro del media query de
   celular, así que en pantallas grandes el hueco seguía apareciendo. */
.fx-facts > .fx-fact:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 480px) {
  .fx-fact { padding: 8px 10px 7px; }
  .fx-fact-v { font-size: 12.5px; }
}
/* En escritorio viven bajo la foto (la columna izquierda va sobrada de alto):
   el .product-img es un flex centrado, así que hay que pedir el ancho entero,
   igual que hace product-engine.js con las specs. */
.fx-facts.fx-facts-col { width: 100%; margin: 22px 0 0; }
.fx-fact-k {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase;
  color: #8A8478; font-weight: 700; margin: 0 0 3px;
  display: flex; align-items: center; gap: 5px;
}
.fx-fact-k svg { width: 12px; height: 12px; flex: 0 0 auto; color: var(--cat-color, var(--fx-teal)); }
.fx-fact-v {
  font-family: 'Montserrat', sans-serif;
  font-size: 13.5px; font-weight: 700; line-height: 1.3; color: var(--fx-navy);
  overflow-wrap: break-word;
}

/* ── EL ORDEN DEL HERO EN CELULAR ────────────────────────────────────────
 * `main.css` ya ordena esta columna con flex `order` (presentaciones = 1,
 * specs = 2). Aquí se termina el orden que pide la decisión, y NADA se
 * esconde: solo cambia el turno.
 *
 *   1 · para qué te sirve (beneficio)     ← la puerta del cliente
 *   2 · nombre y compuesto
 *   3 · elige tu presentación + comprar   ← "¿cuánto?"
 *   4 · qué viene en el kit               ← "¿y qué me llega por eso?"
 *   5 · specs técnicas (pureza, MW, AA)   ← detalle fino
 *
 * La tarjeta del kit bajaba el botón de comprar 463 px en el celular; ahora
 * va inmediatamente DEBAJO del botón, donde responde a la pregunta que sigue.
 * En escritorio no se toca: ahí hay dos columnas y cabe todo sin turnos.
 * ---------------------------------------------------------------------- */
@media (max-width: 880px) {
  .product-hero .product-info .sbl-kit { order: 2; }
  .product-hero .product-info .product-stats { order: 3; }
}

/* ══════════════════════════════════════════════════════════════════════════
   2 · FICHA · ÍNDICE DE SECCIONES (sticky)
   Doce secciones y 12.000 px: sin índice no se navega. Punto 5 y 16.
   ═════════════════════════════════════════════════════════════════════════*/

.fx-nav {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--fx-line);
  margin: 0 0 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.fx-nav.is-on { opacity: 1; pointer-events: auto; }

.fx-nav-in {
  max-width: var(--container, 1240px);
  margin: 0 auto;
  padding: 0 var(--gutter, 28px);
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.fx-nav-in::-webkit-scrollbar { display: none; }

.fx-nav-a {
  flex: 0 0 auto;
  scroll-snap-align: start;
  font-family: 'Montserrat', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fx-ink-soft);
  text-decoration: none;
  padding: 13px 11px 11px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.fx-nav-a:hover { color: var(--fx-navy); }
.fx-nav-a.is-here { color: var(--fx-navy); border-bottom-color: var(--cat-color, var(--fx-navy)); }

/* ══════════════════════════════════════════════════════════════════════════
   3 · FICHA · BARRA DE COMPRA FIJA (celular)
   El botón real está a 1.095 px y no vuelve. Esto lo trae de vuelta a UN
   toque desde cualquier punto del scroll. No duplica lógica: pulsa el botón
   verdadero (un solo escritor del carrito).
   ═════════════════════════════════════════════════════════════════════════*/

.fx-buy {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1150;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--fx-line);
  box-shadow: 0 -6px 22px rgba(8, 18, 52, .10);
  transform: translateY(105%);
  transition: transform .28s cubic-bezier(.22, 1, .36, 1);
}
.fx-buy.is-on { transform: none; }

.fx-buy-l { flex: 1 1 auto; min-width: 0; }
.fx-buy-n {
  font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700;
  color: var(--fx-ink); text-transform: uppercase; letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fx-buy-p {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 22px; font-weight: 600; color: var(--fx-navy); line-height: 1.1;
}
.fx-buy-p span { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; color: #8A8478; }

.fx-buy-b {
  flex: 0 0 auto;
  border: none; border-radius: 10px;
  background: var(--fx-navy); color: #fff;
  font-family: 'Montserrat', sans-serif; font-size: 14.5px; font-weight: 800;
  padding: 13px 18px; cursor: pointer; letter-spacing: .2px;
}
.fx-buy-b:hover { filter: brightness(1.18); }
.fx-buy-b.is-done { background: var(--fx-ok); }

/* El lanzador del asesor vive abajo a la derecha: se sube para no chocar. */
body.fx-buy-on .sbl-adv-launch { bottom: 84px !important; }

@media (min-width: 881px) { .fx-buy { display: none; } }

/* ══════════════════════════════════════════════════════════════════════════
   4 · FICHA · SELLOS DE CONFIANZA en rejilla (antes: 4 filas escalonadas)
   No se quita ningún sello: se alinean. Punto 3 y 14.
   ═════════════════════════════════════════════════════════════════════════*/

@media (max-width: 880px) {
  .product-trust.fx-trust {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 7px !important;
    justify-content: stretch !important;
    align-items: stretch;
  }
  .product-trust.fx-trust > * {
    display: flex !important;
    align-items: center;
    gap: 5px;
    margin: 0 !important;
    font-size: 11.5px !important;
    line-height: 1.35;
    text-align: left;
  }
  /* El sello RUO manda: ocupa la fila entera y lleva el ámbar de "leer". */
  .product-trust.fx-trust > .product-ruo { grid-column: 1 / -1; }
}

/* ══════════════════════════════════════════════════════════════════════════
   5 · FICHA · CÓMO LLEGA A TUS MANOS — flujo de 3 pasos numerados
   Mismo lenguaje visual del flujo aprobado en /es/verificar/.
   ═════════════════════════════════════════════════════════════════════════*/

.fx-flow {
  background: #fff;
  border: 1px solid var(--fx-line);
  border-radius: 14px;
  padding: 20px 20px 16px;
  margin: 18px 0 0;
}
.fx-flow-row { display: flex; gap: 6px; align-items: stretch; }
.fx-flow-step { flex: 1; min-width: 0; text-align: center; padding: 4px 6px; }
.fx-flow-ico {
  width: 48px; height: 48px; margin: 0 auto 10px;
  border-radius: 14px; background: #F3F6FB; border: 1px solid #DDE4F0;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: visible;
}
.fx-flow-ico svg { width: 25px; height: 25px; color: #0B1F4E; }
.fx-flow-n {
  position: absolute; top: -8px; right: -8px;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--fx-navy); border: 2px solid #fff; box-sizing: content-box;
  color: #fff; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.fx-flow-t { font-family: 'Montserrat', sans-serif; font-size: 12.5px; font-weight: 700; color: var(--fx-navy); margin: 0 0 3px; }
.fx-flow-p { font-size: 11.5px; line-height: 1.5; color: var(--fx-ink-soft); margin: 0; }
.fx-flow-sep { flex: 0 0 auto; display: flex; align-items: center; color: var(--fx-gold); font-size: 17px; padding-top: 12px; }

@media (max-width: 600px) {
  .fx-flow-row { flex-direction: column; gap: 13px; }
  .fx-flow-step { display: flex; text-align: left; gap: 13px; align-items: flex-start; padding: 0; }
  .fx-flow-ico { flex: 0 0 auto; margin: 0; }
  .fx-flow-n { left: -8px; right: auto; }
  .fx-flow-sep { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   6 · FICHA · PROTOCOLO con íconos y color (antes: 8 filas de texto plano)
   El DATO no se toca — se le añade un ícono y un color al rótulo. Punto 2.
   ═════════════════════════════════════════════════════════════════════════*/

.protocol-grid.fx-proto .prot-label {
  display: flex !important;
  align-items: center;
  gap: 7px;
}
.protocol-grid.fx-proto .prot-label > svg {
  flex: 0 0 auto; width: 15px; height: 15px;
  color: var(--cat-color, var(--fx-teal));
}
.protocol-grid.fx-proto .protocol-row.fx-p-alert .prot-value { color: #7A5B12; }
.protocol-grid.fx-proto .protocol-row.fx-p-alert .prot-label > svg { color: var(--fx-warn); }

/* Barra de progreso del ciclo: semanas ON / OFF vistas, no leídas. */
.fx-cycle { margin: 14px 0 0; }
.fx-cycle-bar {
  display: flex; height: 10px; border-radius: 999px; overflow: hidden;
  background: #EFEDE5; border: 1px solid var(--fx-line);
}
.fx-cycle-on { background: linear-gradient(90deg, var(--fx-ok), #37A874); }
.fx-cycle-off { background: repeating-linear-gradient(45deg, #E6E2D6, #E6E2D6 4px, #F3F1E9 4px, #F3F1E9 8px); }
.fx-cycle-lbl {
  display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 7px 0 0;
  font-family: 'Montserrat', sans-serif; font-size: 11.5px; color: var(--fx-ink-soft);
}
.fx-cycle-lbl i { font-style: normal; display: inline-flex; align-items: center; gap: 5px; }
.fx-cycle-lbl i::before { content: ''; width: 9px; height: 9px; border-radius: 3px; }
.fx-cycle-lbl i.on::before { background: var(--fx-ok); }
.fx-cycle-lbl i.off::before { background: #D8D3C4; }

/* ══════════════════════════════════════════════════════════════════════════
   7 · FICHA · BANDA 1→5 "cómo escoger dónde comprar" — carrusel con imán
   Los 5 criterios se quedan. Antes cortaba a media palabra; ahora cada
   tarjeta encaja sola y hay puntos que dicen cuántas faltan.
   ═════════════════════════════════════════════════════════════════════════*/

.sbl-criteria.fx-crit {
  scroll-snap-type: x mandatory;
  scroll-padding-left: 4px;
  gap: 4px;
}
.sbl-criteria.fx-crit > .sbl-cri-item { scroll-snap-align: start; }

@media (max-width: 700px) {
  .sbl-criteria.fx-crit { gap: 10px; }
  .sbl-criteria.fx-crit > .sbl-cri-item {
    flex: 0 0 78% !important;
    min-width: 0 !important;
    background: #fff;
    border: 1px solid var(--fx-line);
    border-radius: 12px;
    padding: 14px 15px !important;
  }
  /* Las flechas entre tarjetas sobran cuando cada tarjeta tiene borde: se
     esconden SOLO en celular (siguen en el DOM y vuelven en escritorio). */
  .sbl-criteria.fx-crit > div:not(.sbl-cri-item) { display: none !important; }
}

.fx-dots { display: flex; gap: 6px; justify-content: center; margin: 10px 0 0; }
.fx-dot { width: 6px; height: 6px; border-radius: 50%; background: #D8D3C4; transition: background .2s, width .2s; }
.fx-dot.is-on { background: var(--fx-navy); width: 18px; }
@media (min-width: 701px) { .fx-dots { display: none; } }

/* ══════════════════════════════════════════════════════════════════════════
   8 · FICHA · FICHA TÉCNICA legible y con scroll propio (nunca el body)
   ═════════════════════════════════════════════════════════════════════════*/

.fx-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.fx-scroll > table { min-width: 320px; }
.spec-table.fx-spec tr:nth-child(even) td { background: var(--fx-paper); }
.spec-table.fx-spec td { font-size: 13px; }

/* ══════════════════════════════════════════════════════════════════════════
   9 · CATÁLOGO · ¿QUÉ QUIERES LOGRAR? — la puerta del cliente
   Los objetivos y su pertenencia salen de la BD (quiz_options +
   product_objective), la misma verdad del recomendador y de la app.
   ═════════════════════════════════════════════════════════════════════════*/

.fx-cat-goals { background: #fff; border-bottom: 1px solid var(--fx-line); padding: 26px 0 22px; }
/* Si el JS no llega a pintarla, no deja una banda vacía con una raya. */
.fx-cat-goals:empty { display: none; }
.fx-cat-goals-in { max-width: var(--container, 1240px); margin: 0 auto; padding: 0 var(--gutter, 28px); }
.fx-cat-h {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(23px, 5vw, 32px); font-weight: 500; color: var(--fx-navy);
  margin: 0 0 4px; line-height: 1.15;
}
.fx-cat-sub { font-size: 13.5px; line-height: 1.55; color: var(--fx-ink-soft); margin: 0 0 16px; max-width: 620px; }

.fx-gbar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 9px;
  margin: 0 0 4px;
}
/* En celular, DOS columnas: 16 objetivos en una sola columna eran 780 px antes
   de ver el primer producto. Ninguno se quita — se ordenan. */
@media (max-width: 560px) {
  .fx-gbar { grid-template-columns: 1fr 1fr; gap: 7px; }
  .fx-gbtn { padding: 8px 9px; gap: 8px; }
  .fx-gbtn-ico { width: 28px; height: 28px; border-radius: 8px; }
  .fx-gbtn-t strong { font-size: 11.5px; }
  .fx-gbtn-t em { font-size: 9px; }
}

.fx-gbtn {
  display: flex; align-items: center; gap: 10px;
  text-align: left;
  background: #fff; border: 1px solid var(--fx-line); border-radius: 12px;
  padding: 10px 12px; cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  transition: border-color .18s, box-shadow .18s, transform .18s;
  min-width: 0;
}
.fx-gbtn:hover { border-color: var(--fx-gc, var(--fx-navy)); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(8, 18, 52, .07); }
.fx-gbtn.is-on {
  border-color: var(--fx-gc, var(--fx-navy));
  box-shadow: inset 0 0 0 1px var(--fx-gc, var(--fx-navy));
  background: #FCFBF7;
}
.fx-gbtn-ico {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
  background: var(--fx-gc-bg, #F3F6FB);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.fx-gbtn-ico img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fx-gbtn-ico svg { width: 18px; height: 18px; color: var(--fx-gc, var(--fx-navy)); }
.fx-gbtn-t { min-width: 0; }
.fx-gbtn-t strong {
  display: block; font-size: 12.5px; font-weight: 700; line-height: 1.3;
  color: var(--fx-ink);
}
.fx-gbtn-t em {
  display: block; font-style: normal; font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
  color: #8A8478; margin-top: 2px;
}

/* Barra de herramientas: buscador + contador + vista */
.fx-tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 16px 0 0;
}
.fx-search { position: relative; flex: 1 1 220px; min-width: 0; }
.fx-search svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: #8A8478; pointer-events: none;
}
.fx-search input {
  width: 100%; box-sizing: border-box;
  font-family: 'Montserrat', sans-serif; font-size: 14px; color: var(--fx-ink);
  padding: 11px 14px 11px 34px;
  border: 1px solid var(--fx-line); border-radius: 999px; background: #fff;
}
.fx-search input:focus { outline: none; border-color: var(--blue-accent, #2864A0); }

.fx-count {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--fx-ink-soft); font-weight: 700;
  white-space: nowrap;
}
.fx-count b { color: var(--fx-navy); }

.fx-view { display: flex; gap: 0; border: 1px solid var(--fx-line); border-radius: 999px; overflow: hidden; background: #fff; }
.fx-view button {
  background: none; border: none; cursor: pointer;
  font-family: 'Montserrat', sans-serif; font-size: 11.5px; font-weight: 700;
  color: var(--fx-ink-soft); padding: 9px 13px; display: inline-flex; align-items: center; gap: 6px;
}
.fx-view button svg { width: 13px; height: 13px; }
.fx-view button.is-on { background: var(--fx-navy); color: #fff; }

.fx-clear {
  background: none; border: 1px solid var(--fx-line); border-radius: 999px;
  font-family: 'Montserrat', sans-serif; font-size: 11.5px; font-weight: 700;
  color: var(--fx-ink-soft); padding: 9px 14px; cursor: pointer; white-space: nowrap;
}
.fx-clear:hover { border-color: var(--fx-navy); color: var(--fx-navy); }

.fx-empty {
  grid-column: 1 / -1;
  text-align: center; padding: 40px 20px;
  border: 1px dashed var(--fx-line); border-radius: 14px; background: #fff;
}
.fx-empty p { font-size: 14px; color: var(--fx-ink-soft); margin: 0 0 14px; }

/* El rótulo "o filtra por categoría técnica" sobre los filtros de siempre */
.fx-catlbl {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 1.6px;
  text-transform: uppercase; color: #8A8478; font-weight: 700;
  margin: 0 0 9px;
}

/* La fila de filtros de siempre: sitio para que el asesor no tape el último
   chip (el lanzador flotante vive abajo a la derecha). */
.prod-filter-bar.fx-fbar { padding-right: 172px; }

/* CELULAR (Edu, 2026-08-08, con captura): la barra pegajosa con 10 chips en
   varias filas + el colchón del asesor se comían media pantalla y los
   productos quedaban fuera de vista. En chico: UNA línea deslizable de chips
   (el patrón de toda tienda móvil), sin pegajosidad y sin colchón — el
   asesor ya no tapa nada porque la fila se desliza. */
@media (max-width: 880px) {
  .prod-filter-section { position: static; padding: 10px 0 12px !important; }
  .prod-filter-bar.fx-fbar {
    padding-right: 0; padding-bottom: 0;
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; gap: 7px;
  }
  .prod-filter-bar.fx-fbar::-webkit-scrollbar { display: none; }
  .prod-filter-bar.fx-fbar .filter-btn {
    flex: 0 0 auto; font-size: 12px; padding: 7px 13px; white-space: nowrap;
  }
  .prod-filter-bar.fx-fbar .filter-label { flex: 0 0 auto; }
  .fx-catlbl { margin-bottom: 6px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   10 · CATÁLOGO · VISTA COMPACTA (2 por fila en celular)
   35 productos × 1 tarjeta por pantalla = 29 pantallas. En dos columnas son
   la mitad, y NO se pierde nada: la foto de beneficio, el frasco, el nombre,
   el "para qué", los datos y el precio siguen ahí. El conmutador devuelve la
   tarjeta grande a un toque.
   ═════════════════════════════════════════════════════════════════════════*/

@media (max-width: 480px) {
  .prod-catalog-grid.fx-grid-2 { grid-template-columns: 1fr 1fr; gap: 11px; }
  .prod-catalog-grid.fx-grid-2 .prod-rich-card {
    min-height: 0 !important;
    grid-template-rows: auto 108px auto auto auto auto !important;
    padding: 12px 12px 14px !important;
  }
  /* La píldora PURE/BLEND/STACK es un ::after pegado arriba a la derecha; en dos
     columnas el rótulo de categoría se le metía debajo. Se le deja su sitio. */
  .prod-catalog-grid.fx-grid-2 .prc-top { margin-bottom: 8px !important; padding-right: 48px; }
  .prod-catalog-grid.fx-grid-2 .prc-badge {
    font-size: 8.5px !important; letter-spacing: .08em !important;
    white-space: normal; line-height: 1.35;
  }
  .prod-catalog-grid.fx-grid-2 .prod-rich-card::after { top: 8px !important; right: 8px !important; }
  .prod-catalog-grid.fx-grid-2 .prc-num { display: none; }
  .prod-catalog-grid.fx-grid-2 .prod-rich-card h3 { font-size: 14.5px !important; margin: 2px 0 4px !important; }
  .prod-catalog-grid.fx-grid-2 .prc-desc {
    font-size: 11px !important; line-height: 1.45; min-height: 0;
    margin: 0 0 8px !important;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .prod-catalog-grid.fx-grid-2 .prc-stats { padding: 7px 8px !important; margin: 0 0 9px !important; }
  .prod-catalog-grid.fx-grid-2 .prc-stats .pst-num { font-size: 11px !important; }
  .prod-catalog-grid.fx-grid-2 .prc-stats .pst-lbl { font-size: 8px !important; }
  .prod-catalog-grid.fx-grid-2 .prc-foot { padding-top: 9px !important; flex-wrap: wrap; gap: 4px; }
  .prod-catalog-grid.fx-grid-2 .prc-size { font-size: 11px !important; }
  .prod-catalog-grid.fx-grid-2 .prc-cta { font-size: 10px !important; }
  .prod-catalog-grid.fx-grid-2 .prc-media .cbp-vial { height: 30px; top: 6px; left: 6px; }
  .prod-catalog-grid.fx-grid-2 .cbp-vial-count { top: 6px; left: 38px; font-size: 9px; }
  /* La cinta de "por qué encaja" no cabe en dos columnas: se guarda. */
  .prod-catalog-grid.fx-grid-2 .fx-why { display: none; }
}

/* "Por qué encaja" — aparece en la tarjeta cuando hay un objetivo elegido.
   Es el puente entre la puerta (objetivo) y el producto (medio). */
.fx-why {
  display: flex; align-items: center; gap: 6px;
  font-family: 'Montserrat', sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: .02em; color: var(--fx-ok);
  background: var(--fx-ok-bg); border-radius: 8px;
  padding: 5px 9px; margin: 0 0 9px;
  line-height: 1.35;
}
.fx-why.rank-2 { color: #7A5B12; background: var(--fx-warn-bg); }
.fx-why svg { width: 11px; height: 11px; flex: 0 0 auto; }

/* ══════════════════════════════════════════════════════════════════════════
   11 · CATÁLOGO · TABLA COMPARATIVA con columna fija
   La tabla se queda entera; solo deja de perderse la columna del producto
   cuando se arrastra a lo ancho. Punto 9.
   ═════════════════════════════════════════════════════════════════════════*/

.prod-compare-table-wrap.fx-cmp { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.prod-compare-table.fx-cmp-t td:first-child,
.prod-compare-table.fx-cmp-t th:first-child {
  position: sticky; left: 0; z-index: 2;
  background: #fff;
  box-shadow: 1px 0 0 var(--fx-line);
}
.prod-compare-table.fx-cmp-t thead th:first-child { z-index: 3; background: #F5F3EC; }
.prod-compare-table.fx-cmp-t .cmp-group td:first-child { background: #faf7f0; }
@media (max-width: 700px) {
  .prod-compare-table.fx-cmp-t td:first-child,
  .prod-compare-table.fx-cmp-t th:first-child { min-width: 118px; max-width: 138px; }
}

/* Aviso de respaldo: cuando los precios de la pantalla NO vienen de la BD, se
   DICE (regla dura: PROHIBIDO EL RESPALDO SILENCIOSO). */
.fx-fallback {
  display: flex; align-items: flex-start; gap: 9px;
  background: var(--fx-warn-bg); border: 1px solid #ECD9A8; border-radius: 10px;
  padding: 11px 14px; margin: 0 0 16px;
  font-size: 12.5px; line-height: 1.5; color: #7A5B12;
}
.fx-fallback b { font-weight: 700; }

/* ══════════════════════════════════════════════════════════════════════════
   12 · MOVIMIENTO REDUCIDO — se respeta siempre, sin excepciones
   ═════════════════════════════════════════════════════════════════════════*/

@media (prefers-reduced-motion: reduce) {
  .fx-rev { opacity: 1 !important; transform: none !important; transition: none !important; }
  .fx-buy { transition: none; }
  .fx-nav { transition: none; }
  .fx-gbtn { transition: none; }
  .fx-gbtn:hover { transform: none; }
  .fx-dot { transition: none; }
  .fx-cat-anim { animation: none !important; }
}