/* Ferns Moda · Home, sección «closing» (banner de colección + beneficios). Solo tokens --fm-*; sin hex. */

/* Banner de colección: foto de borde a borde, alta, esquinas rectas, título centrado en blanco */
html body .fm-closing { background: var(--fm-bg-alt); margin: 0; width: 100%; padding-block: calc(var(--fm-section-y) * 1.4); } /* mismo fondo que «El arte de combinar» */
html body .fm-collection {
  position: relative; display: grid; place-items: center; overflow: hidden; isolation: isolate;
  width: calc(100% - 2 * var(--fm-gutter)); max-width: calc(var(--fm-container) - 2 * var(--fm-gutter)); margin: 0 auto; min-height: 480px; aspect-ratio: 21 / 9; border-radius: var(--fm-radius-0); background: var(--fm-ink-900); /* alineado con las demás secciones */
}
html body .fm-collection > .fm-collection__media {
  position: absolute; left: 0; top: -35%; width: 100%; height: 170%; max-width: none;
  object-fit: cover; object-position: center 30%; opacity: 1; will-change: transform; z-index: -2;
}
html body .fm-collection::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, color-mix(in srgb, var(--fm-ink-900) 55%, transparent), color-mix(in srgb, var(--fm-ink-900) 10%, transparent) 55%, color-mix(in srgb, var(--fm-ink-900) 25%, transparent));
}
html body .fm-collection__copy { position: relative; display: grid; justify-items: center; gap: var(--fm-space-4); padding: var(--fm-space-8) var(--fm-gutter); text-align: center; color: var(--fm-white); }
html body .fm-collection__title { margin: 0; font-family: var(--fm-font-display); font-weight: var(--fm-fw-light); font-size: var(--fm-fs-hero); line-height: .98; text-transform: none; color: var(--fm-white); text-shadow: 0 2px 24px color-mix(in srgb, var(--fm-ink-900) 45%, transparent); }
html body .fm-collection__sub { margin: 0; font-size: var(--fm-fs-body-lg); color: var(--fm-white); text-shadow: 0 1px 14px color-mix(in srgb, var(--fm-ink-900) 45%, transparent); }
html body .fm-collection__copy .fm-btn { margin-top: var(--fm-space-2); }

/* Beneficios: 4 ítems con icono lineal, separados por líneas finas, fondo claro */
html body .fm-services { background: var(--fm-bg-alt); border-top: 0; padding-block: 0 calc(var(--fm-section-y) * 1.4); }
html body .fm-services__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: calc(100% - 2 * var(--fm-gutter)); max-width: calc(var(--fm-container) - 2 * var(--fm-gutter)); margin-inline: auto; } /* exactamente el ancho del banner de arriba */
html body .fm-services__item { display: flex; align-items: flex-start; gap: var(--fm-space-4); padding-inline: var(--fm-space-5); border-left: var(--fm-border-hair); color: var(--fm-text); }
html body .fm-services__item:first-child { border-left: 0; padding-left: 0; }
html body .fm-services__item svg { flex-shrink: 0; width: var(--fm-space-8); height: var(--fm-space-8); color: var(--fm-text); transition: color var(--fm-dur-base) var(--fm-ease-soft); }
html body .fm-services__item:hover svg { color: var(--fm-hover, var(--fm-sand-600)); }
html body .fm-services__item h3 { margin: 0; font-family: var(--fm-font-sans); font-size: var(--fm-fs-small); font-weight: var(--fm-fw-semibold); line-height: var(--fm-lh-normal); text-transform: none; }
html body .fm-services__item p { margin: var(--fm-space-2) 0 0; font-size: var(--fm-fs-small); color: var(--fm-text-muted); }

@media (max-width: 1023px) {
  html body .fm-services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fm-space-8) 0; }
  html body .fm-services__item:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (max-width: 899px) {
  html body .fm-collection { aspect-ratio: 4 / 5; min-height: 0; }
}
@media (max-width: 599px) {
  html body .fm-services__grid { grid-template-columns: 1fr; gap: var(--fm-space-6); }
  html body .fm-services__item { padding: 0 0 var(--fm-space-6); border-left: 0; border-bottom: var(--fm-border-hair); }
  html body .fm-services__item:last-child { border-bottom: 0; padding-bottom: 0; }
}

/* La base pinta h3 en azul marino: títulos de beneficios con la tinta del sistema */
html body .fm-services__item h3 { color: var(--fm-text); }

html body .fm-collection__title em { display: block; font-style: italic; font-weight: inherit; color: inherit; }

/* Reels de TikTok: carrusel infinito de borde a borde (sin margenes), cabe en una sola pantalla; se detiene solo con el cursor encima */
html body .fm-reels { background: var(--fm-bg-alt); padding-block: var(--fm-section-y); overflow: hidden; --fm-reel-h: calc(var(--fm-vh, 100svh) - var(--fm-header-h) - 2 * var(--fm-space-8)); }
.fm-reels__window { overflow: hidden; }
.fm-reels__track { display: flex; width: max-content; animation: fm-reels-travel 70s linear infinite; }
.fm-reels__track:hover, .fm-reels__track.is-paused { animation-play-state: paused; }
.fm-reels__group { display: flex; flex-shrink: 0; gap: var(--fm-space-4); padding-right: var(--fm-space-4); }
.fm-reels__item { position: relative; flex: 0 0 auto; height: var(--fm-reel-h); aspect-ratio: 9 / 16; background: var(--fm-ink-900); overflow: hidden; }
.fm-reels__item iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@keyframes fm-reels-travel { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .fm-reels__track { animation: none; } .fm-reels__window { overflow-x: auto; } }
@media (max-width: 899px) { html body .fm-reels { --fm-reel-h: 72vh; } }