/* Ferns Moda — Home (prototipo: briefing/design-system/demo-home.html). Solo se carga en la portada. Sin hex: todo con tokens --fm-*. */

html, body.home, body.home #main-container { background: var(--fm-bg) !important; } /* sin esto, el telón del anuncio y el fundido del hero dejan ver el body oscuro de la base */
.fm-home { display: block; background: var(--fm-bg); color: var(--fm-text); } /* el body de la base es oscuro: la Home es clara */
.fm-section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--fm-space-6); }
.fm-arrows { display: flex; gap: var(--fm-space-2); }
.fm-arrow { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: var(--fm-radius-pill); background: var(--fm-ink-100); color: var(--fm-text); cursor: pointer; transition: background var(--fm-dur-fast), color var(--fm-dur-fast); }
.fm-arrow:hover, .fm-arrow.is-active { background: var(--fm-ink-900); color: var(--fm-sand-100); }
.fm-home .fm-h2 { font-family: var(--fm-font-display); font-weight: var(--fm-fw-regular); font-size: calc(var(--fm-fs-h2) * .81); line-height: var(--fm-lh-snug); letter-spacing: var(--fm-ls-display); text-transform: uppercase; color: var(--fm-text); margin: 0; }
.fm-section--tight { padding-top: 0; }
/* Ritmo vertical entre secciones: las cuadrículas de producto respiran igual que el resto */
.fm-home section:has(> .fm-grid) { padding-block: var(--fm-section-y); }
.fm-home section[data-carousel] { padding-bottom: var(--fm-section-y); } /* mismo aire que entre catálogo y editorial */
.fm-section { padding-block: var(--fm-section-y); }

/* ---------- Scroll suave (Lenis): sin esto el scroll nativo "smooth" pelea con Lenis y se traba ---------- */
html.lenis, html.lenis body { height: auto; }
html.lenis, html.lenis * { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }

/* ---------- Preloader (video 0–3 s): la marca con las MISMAS letras del logo del header ---------- */
.fm-preloader { display: none; position: fixed; inset: 0; z-index: 10000; background: var(--fm-white); place-items: center; }
.fm-preload .fm-preloader { display: grid; }
.fm-preloader__logo { display: inline-block; color: var(--fm-text); font-size: 3.25rem; will-change: transform; }
/* Estado inicial ANTES de que cargue el JS: letras separadas e invisibles (evita el destello del logo junto) */
.fm-preload .fm-preloader__logo { opacity: 0; letter-spacing: .55em; margin-right: -.55em; color: var(--fm-ink-300); }
.fm-preload .fm-header .fm-logo { visibility: hidden; } /* el logo del header aparece cuando la palabra aterriza */

/* Estado inicial de las animaciones: solo si el JS de movimiento está activo */
.fm-motion [data-reveal] { opacity: 0; }

/* ---------- Hero (referencia: briefing/ecommerce-animado-version-referencia.mp4) ----------
   Capas, de atrás hacia adelante: fondo (degradado) · sombra difusa · título (con máscara) · modelos recortadas · texto de mayor.
   El título queda DETRÁS de las cabezas porque el recorte es transparente y va encima. Sin recorte: foto con multiply. */
.fm-hero {
  position: relative; isolation: isolate; height: max(520px, calc(var(--fm-vh, 100svh) - var(--fm-hero-top, calc(var(--fm-header-h) + var(--fm-announce-h))))); overflow: hidden; /* llena la pantalla: alto y posición medidos en fm-home.js */
  background: radial-gradient(ellipse 70% 80% at 50% 42%, var(--fm-hero-glow) 0%, var(--fm-hero-bg) 55%, var(--fm-hero-bg-edge) 100%);
}
/* Sombra de piso: mancha ancha y difusa bajo los pies, proyectada hacia la izquierda */
.fm-hero__shadow {
  position: absolute; z-index: 1; left: 26%; bottom: 1%; width: 44%; height: 12%; border-radius: 50%;
  background: var(--fm-hero-shadow-floor); filter: blur(28px); transform: skewX(-30deg); pointer-events: none;
}
.fm-hero__mask { position: absolute; z-index: 2; inset: 10% 0 auto; overflow: hidden; padding-block: .06em; } /* el título emerge desde abajo */
.fm-hero__title {
  margin: 0; text-align: center; white-space: nowrap;
  font-family: var(--fm-font-display); font-weight: var(--fm-fw-regular); font-size: clamp(2.6rem, 7.4vw, 8.5rem);
  line-height: 1; letter-spacing: .01em; text-transform: uppercase; color: var(--fm-ink-500);
}
.fm-hero__media { position: absolute; z-index: 3; left: 50%; bottom: 0; height: 100%; width: auto; max-width: none; transform: translateX(-50%); object-fit: contain; object-position: bottom center; mix-blend-mode: multiply; }
.fm-hero--cutout .fm-hero__media {
  bottom: 3%; height: 90%; mix-blend-mode: normal;
  /* sombra con la silueta de las modelos (cae hacia atrás-izquierda) + sombra de contacto corta */
  filter: drop-shadow(-28px 14px 22px var(--fm-hero-shadow)) drop-shadow(0 6px 6px var(--fm-hero-shadow));
}
.fm-hero__perk {
  position: absolute; z-index: 4; right: 1.5%; bottom: 7%; margin: 0; display: grid; grid-template-columns: auto auto; align-items: center; column-gap: var(--fm-space-3);
  font-family: var(--fm-font-sans); font-size: clamp(.78rem, .66rem + .3vw, 1rem); line-height: 1.35; letter-spacing: var(--fm-ls-label); font-weight: var(--fm-fw-medium, 500); text-transform: uppercase; color: var(--fm-ink-700);
}
.fm-hero__perk-n { font-family: var(--fm-font-display); font-size: 2.2em; font-weight: var(--fm-fw-regular); font-variant-numeric: lining-nums; line-height: 1; display: grid; place-items: center; width: 1.75em; aspect-ratio: 1; padding: 0; border: 1px solid currentColor; border-radius: 50%; } /* círculo perfecto, centrado con la 2.ª línea */
@media (max-width: 899px) {
  .fm-hero { height: auto; aspect-ratio: 4 / 5.4; }
  .fm-hero__mask { inset: 5% 0 auto; }
  .fm-hero__title { white-space: normal; font-size: clamp(2.4rem, 13vw, 4.4rem); line-height: .95; }
  .fm-hero__media { height: 92%; }
  .fm-hero--cutout .fm-hero__media { height: auto; width: 128%; bottom: 14%; }
  .fm-hero__shadow { left: 10%; bottom: 12%; width: 72%; height: 7%; filter: blur(18px); }
  .fm-hero--cutout .fm-hero__media { filter: drop-shadow(-14px 8px 12px var(--fm-hero-shadow)) drop-shadow(0 4px 4px var(--fm-hero-shadow)); }
  .fm-hero__perk { left: var(--fm-gutter); right: var(--fm-gutter); bottom: 3%; justify-content: center; font-size: .72rem; }
}

/* WhatsApp: no tapa el hero (aparece al salir de él) */
.sdg-wa-float { transition: opacity var(--fm-dur-base) var(--fm-ease-soft), transform var(--fm-dur-base) var(--fm-ease-out); }
.fm-hero-visible .sdg-wa-float { opacity: 0; transform: translateY(16px); pointer-events: none; }

/* ---------- Categorías (carrusel) ---------- */
.fm-cats { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * var(--fm-grid-gap)) / 5); gap: var(--fm-grid-gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.fm-cats::-webkit-scrollbar { display: none; }
@media (max-width: 899px) { .fm-cats { grid-auto-columns: 42%; } }
.fm-cat { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; scroll-snap-align: start; color: var(--fm-white); background: var(--fm-surface-media); }
.fm-cat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--fm-ink-900) 55%, transparent), transparent 55%); }
.fm-cat img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--fm-ease-out); }
.fm-cat:hover img { transform: scale(1.06); }
.fm-cat__title { position: absolute; z-index: 1; inset: auto 0 var(--fm-space-4); text-align: center; font-family: var(--fm-font-display); font-size: var(--fm-fs-h4); }
.fm-cat__cta { display: block; font-family: var(--fm-font-sans); font-size: var(--fm-fs-micro); letter-spacing: var(--fm-ls-wide); text-transform: uppercase; opacity: 0; transform: translateY(6px); transition: all var(--fm-dur-base) var(--fm-ease-out); }
.fm-cat:hover .fm-cat__cta, .fm-cat:focus-visible .fm-cat__cta { opacity: 1; transform: none; }

/* ---------- Card de producto ---------- */
.fm-grid { display: grid; gap: var(--fm-space-8) var(--fm-grid-gap); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .fm-grid { grid-template-columns: repeat(4, 1fr); } }
.fm-card { display: grid; gap: var(--fm-space-3); align-content: start; }
.fm-card__media { position: relative; display: block; aspect-ratio: var(--fm-card-ratio); background: var(--fm-surface-media); overflow: hidden; }
.fm-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity var(--fm-dur-base) var(--fm-ease-soft), transform var(--fm-dur-slow) var(--fm-ease-out); }
.fm-card__media img + img { opacity: 0; }
.fm-card:hover .fm-card__media img:first-child { opacity: 0; }
.fm-card:hover .fm-card__media img + img { opacity: 1; transform: scale(1.03); }
.fm-card__media img:only-of-type { opacity: 1 !important; }
.fm-card__quick { position: absolute; inset: auto var(--fm-space-2) var(--fm-space-2); z-index: 2; transform: translateY(calc(100% + var(--fm-space-2))); transition: transform var(--fm-dur-base) var(--fm-ease-out); }
.fm-card:hover .fm-card__quick, .fm-card__media:focus-visible .fm-card__quick { transform: none; }
@media (hover: none) { .fm-card__quick { display: none; } }
.fm-card__title { margin: 0; font-family: var(--fm-font-sans); color: var(--fm-text); }
.fm-card__title a { color: var(--fm-text); }
.fm-price { margin: 0; font-size: var(--fm-fs-label); font-weight: var(--fm-fw-semibold); letter-spacing: var(--fm-ls-label); }
.fm-price .was, .fm-price del { color: var(--fm-text-muted); font-weight: var(--fm-fw-regular); margin-left: var(--fm-space-2); }
.fm-price small { font-weight: var(--fm-fw-regular); text-transform: uppercase; }

/* ---------- Editorial split (dos columnas a sangre; el pin lo hace GSAP) ---------- */
.fm-split { display: grid; grid-template-columns: 1fr 1fr; }
.fm-split__panel { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--fm-surface-media); }
.fm-split__panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 899px) { .fm-split { grid-template-columns: 1fr 1fr; } .fm-split__panel { aspect-ratio: 3 / 5; } }

/* ---------- Franja Compra por mayor ---------- */
.fm-bulk { background: var(--fm-bg-alt); }
.fm-bulk__inner { display: grid; gap: var(--fm-space-4); justify-items: center; text-align: center; max-width: 52rem; }
.fm-bulk__eyebrow { margin: 0; color: var(--fm-text-muted); }
.fm-bulk__title { max-width: 22ch; }
.fm-bulk__text { margin: 0; max-width: 46ch; color: var(--fm-text-muted); }
.fm-bulk .fm-btn { margin-top: var(--fm-space-2); }

/* En pantallas anchas el bloque 3+ se acerca al conjunto sin pisar a las modelos */
@media (min-width: 1700px) { .fm-hero__perk { right: 9%; bottom: 8%; } }
@media (min-width: 1200px) and (max-width: 1699px) { .fm-hero__perk { right: 7%; } }