/* =========================================================
   FM Prodokchion — utilidades sobre Kadence
   Clases pensadas para usarse desde "Additional CSS Class"
   en bloques Kadence/Gutenberg. Paleta y tipografía globales
   se definen en el Customizer; aquí solo lo que Kadence no cubre.
   ========================================================= */

:root {
  --fm-negro: #0c0c0c;
  --fm-blanco: #f5f2ec;
  --fm-gris: #8a8578;
  --fm-linea: rgba(245, 242, 236, 0.14);
  --fm-coral: #ff5a36;
  --fm-teal: #1b8a96;
}

/* ---------- Tipografía display ---------- */
.fm-outline {
  color: transparent !important;
  -webkit-text-stroke: 1.5px var(--fm-blanco);
}
.fm-outline-negro {
  color: transparent !important;
  -webkit-text-stroke: 1.5px var(--fm-negro);
}

/* ---------- Marquee ---------- */
.fm-marquee {
  border-top: 1px solid var(--fm-linea);
  border-bottom: 1px solid var(--fm-linea);
  overflow: hidden;
  white-space: nowrap;
  padding: 16px 0;
}
.fm-marquee .fm-marquee-track {
  display: inline-flex;
  gap: 48px;
  will-change: transform;
}

/* ---------- Reveal (GSAP) ---------- */
/* Sin JS todo queda visible; GSAP anima desde estado oculto en runtime. */

/* ---------- Tarjetas de producción ---------- */
.fm-prod-card .kb-image,
.fm-prod-card img {
  transition: transform 0.8s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.fm-prod-card:hover img {
  transform: scale(1.05);
}
.fm-tag {
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid var(--fm-linea);
  color: var(--fm-gris);
  display: inline-block;
}
.fm-tag--activa {
  border-color: var(--fm-coral);
  color: var(--fm-coral);
}

/* ---------- Memoria (strip horizontal) ---------- */
.fm-memoria-strip {
  overflow: hidden;
}
.fm-memoria-track {
  display: flex;
  gap: 22px;
  will-change: transform;
  padding: 10px 0;
}
.fm-memoria-track > * {
  flex: 0 0 auto;
  width: min(58vw, 300px);
}
.fm-memoria-track img {
  filter: grayscale(85%);
  transition: filter 0.5s ease;
  width: 100%;
  height: 380px;
  object-fit: cover;
}
.fm-memoria-track img:hover {
  filter: grayscale(0%);
}

/* ---------- Selección de texto ---------- */
::selection {
  background: var(--fm-coral);
  color: var(--fm-negro);
}

/* ---------- Accesibilidad ---------- */
@media (prefers-reduced-motion: reduce) {
  .fm-prod-card img,
  .fm-memoria-track img {
    transition: none;
  }
}