/* ════════════════════════════════════════════════════════════════════════
   FlexiFactory — sección destacada del home.
   Reutiliza los tokens de style.css (--amber, --paper, --surface, --ink…),
   la tipografía y la tarjeta .product-card existente. Sin colores nuevos.
   ──────────────────────────────────────────────────────────────────────── */

.flexi-section {
  padding: 48px 0 40px;
  background:
    radial-gradient(120% 130% at 100% 0%, color-mix(in srgb, var(--amber) 8%, transparent), transparent 55%),
    var(--surface-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* Encabezado */
.flexi-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 26px;
}
.flexi-header-content { max-width: 680px; }
.flexi-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--amber-2);
  background: var(--amber-soft);
  border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent);
  padding: 5px 12px; border-radius: var(--radius-pill);
  margin-bottom: 14px;
}
.flexi-title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.05;
  letter-spacing: -.01em; color: var(--ink);
}
.flexi-title .hl {
  background: linear-gradient(90deg, var(--amber), var(--pine));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.flexi-subtitle { color: var(--ink-2); font-size: 1.02rem; margin-top: 10px; }

.flexi-actions { display: flex; align-items: center; gap: 10px; }

/* Carrusel horizontal de tarjetas (reutiliza .product-card) */
.flexi-carousel-wrap { position: relative; }
.flexi-carousel {
  display: flex; gap: 22px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 6px 2px 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.flexi-carousel::-webkit-scrollbar { height: 8px; }
.flexi-carousel::-webkit-scrollbar-track { background: transparent; }
.flexi-carousel::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }

.flexi-carousel > .product-card {
  flex: 0 0 240px;
  width: 240px;
  scroll-snap-align: start;
}

/* Flechas de navegación */
.flexi-nav-btn {
  position: absolute; top: 42%; transform: translateY(-50%);
  z-index: 5; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); box-shadow: var(--shadow);
  cursor: pointer; transition: var(--transition);
}
.flexi-nav-btn:hover { background: var(--amber); color: #fff; border-color: var(--amber); }
.flexi-nav-btn:disabled { opacity: 0; pointer-events: none; }
.flexi-prev { left: -10px; }
.flexi-next { right: -10px; }
@media (max-width: 768px) {
  .flexi-prev { left: 2px; }
  .flexi-next { right: 2px; }
}

/* Insignia de "video disponible" en la tarjeta */
.product-image .flexi-video-badge {
  position: absolute; top: 10px; left: 10px; z-index: 4;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .68rem; font-weight: 700; font-family: var(--font-mono);
  color: #fff; background: color-mix(in srgb, var(--ink) 78%, transparent);
  padding: 3px 8px; border-radius: var(--radius-pill);
  backdrop-filter: blur(3px);
}

/* Estados */
.flexi-empty, .flexi-loading {
  color: var(--ink-3); font-size: .95rem; padding: 20px 2px;
}
.flexi-card-skeleton {
  flex: 0 0 240px; width: 240px; height: 340px; border-radius: var(--radius);
  background: linear-gradient(100deg, var(--paper-2) 30%, var(--surface-2) 50%, var(--paper-2) 70%);
  background-size: 200% 100%; animation: tp-shimmer 1.3s linear infinite;
}

/* Video dentro del carrusel de la vista rápida (quickview).
   Igual que el visor de "Lo más destacado": el video llena TODO el recuadro
   (object-fit: cover), sin franjas negras arriba/abajo. */
.qv-slide--video {
  padding: 0;
  background: #0d0d12;
  overflow: hidden;
}
.qv-slide video.qv-main-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  background: #0d0d12; border-radius: 0;
}