/* ============================================================================
   DF GALLERY APEX - "Museo Oscuro" + "Cursor Magnetico" + "Lightbox Cinematografico"
   ----------------------------------------------------------------------------
   Leyes absolutas respetadas:
   - ZERO-CROP: jamas object-fit: cover sobre imagenes del portafolio.
   - LCP < 1.5s: solo transform/opacity (GPU-composited). Cero layout thrash.
   - Zero-Plugin: CSS puro, sin dependencias externas.
   - Dark-Tech: #0A0A0A / #00FF00 / glassmorphism.
   ============================================================================ */

:root {
  --df-apex-bg: #0A0A0A;
  --df-apex-surface: #111111;
  --df-apex-accent: #00FF00;
  --df-apex-text: #F5F5F5;
  --df-apex-muted: rgba(245, 245, 245, 0.64);
  --df-apex-border: rgba(0, 255, 0, 0.12);
  --df-apex-border-hover: rgba(0, 255, 0, 0.38);
  --df-apex-radius: 18px;
  --df-apex-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* ── Opción A "Cascada de Cristal" — Staggered Reveal (LCP-safe) ── */
  --df-reveal-ease: cubic-bezier(0.19, 1, 0.22, 1); /* Expo Out — arranque rápido, freno de pluma */
  --df-reveal-duration: 380ms;
  --df-reveal-y: 14px;
  --df-reveal-scale: 0.985;
}

/* ============================================================================
   0. ERRADICACIÓN ZERO-CROP (corrige la violación de Bricks: object-fit: cover)
   ============================================================================ */
#df-portfolio-grid .brxe-image img,
#df-portfolio-grid .brxe-lmbdry img,
#df-portfolio-grid img {
  object-fit: contain !important;
  object-position: center !important;
}

/* ============================================================================
   1. MUSEO OSCURO — Vitrinas de galería de arte
   ============================================================================ */
#df-portfolio-grid {
  column-gap: 22px;
}

#df-portfolio-grid .df-apex-card {
  position: relative;
  margin-bottom: 22px;
  border-radius: var(--df-apex-radius);
  border: 1px solid var(--df-apex-border);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(0, 255, 0, 0.045), transparent 60%),
    linear-gradient(160deg, #141414 0%, var(--df-apex-bg) 100%);
  overflow: hidden;
  break-inside: avoid;
  /* Entrada cinética escalonada — "Cascada de Cristal" (Opción A, activada por JS con .df-apex-in) */
  opacity: 0;
  transform: translateY(var(--df-reveal-y)) scale(var(--df-reveal-scale));
  transition:
    border-color 0.45s var(--df-apex-ease),
    box-shadow 0.45s var(--df-apex-ease);
}

/* BLINDAJE anti-cascarón (Síntoma de Líneas Horizontales, 2026): si Bricks imprime
   un `.df-apex-card` AUXILIAR vacío (data-brx-loop-start) o cualquier clon llega
   sin contenido, al no tener min-height colapsa a una línea verde de 1px de borde
   apilada en la columna. Un cascarón JAMÁS se muestra. LEY 2 intacta. */
#df-portfolio-grid .df-apex-card:empty { display: none !important; }

#df-portfolio-grid .df-apex-in {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    opacity var(--df-reveal-duration) var(--df-reveal-ease),
    transform var(--df-reveal-duration) var(--df-reveal-ease),
    border-color 0.45s var(--df-apex-ease),
    box-shadow 0.45s var(--df-apex-ease);
}

/* Aura ambiental de vitrina: gradiente nativo cero-GPU (cero blur para proteger memoria móvil) */
#df-portfolio-grid .df-apex-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, rgba(0, 255, 0, 0.03), transparent 70%);
  opacity: 0.8;
  z-index: 0;
  pointer-events: none;
}

#df-portfolio-grid .df-apex-card:hover {
  border-color: var(--df-apex-border-hover);
  box-shadow:
    0 0 0 1px rgba(0, 255, 0, 0.10),
    0 24px 60px rgba(0, 0, 0, 0.55),
    0 0 42px rgba(0, 255, 0, 0.07);
}

/* El enlace llena la tarjeta SIN padding: la imagen toca los bordes suavemente.
   display:block elimina el gap inline que generaba las líneas oscuras inferiores. */
#df-portfolio-grid .df-apex-card a {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  line-height: 0; /* erradica el espacio fantasma del baseline inline */
  font-size: 0;
}

#df-portfolio-grid .df-apex-card img {
  position: relative;
  z-index: 1;
  display: block; /* sin gap inline: cero líneas oscuras debajo del cuadro */
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  border-radius: var(--df-apex-radius); /* toca los bordes con la misma curva de la vitrina */
  transition: opacity 0.35s var(--df-apex-ease);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;

  /* ── LEY 2 · ZERO-CROP ABSOLUTO (2026-09-23) ──────────────────────────────────
     Bricks compila en post-5724.min.css una regla con `object-fit` en `cover`
     (`.brxe-gzypcz .brxe-lmbdry.brxe-image img`) que mutila la tapa y la base del
     producto. Se aniquila por ESPECIFICIDAD + `!important` en TODO el viewport de
     la tarjeta (`display:block` ⇒ el <img> llena el ancho y respira alto
     automático: contain = cero recorte del producto en la vitrina). */
  object-fit: contain !important;
  object-position: center center !important;

  /* Carga suave por opacidad: cero consumo de VRAM */
  opacity: 0;
}

#df-portfolio-grid .df-apex-card img.is-loaded {
  opacity: 1;
}

/* Videos embebidos en tarjetas: mismo tratamiento, sin solapes ni huecos */
#df-portfolio-grid .df-apex-card video,
#df-portfolio-grid .df-apex-card .df-bento-video-wrapper,
#df-portfolio-grid .df-apex-card .df-bento-video {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  line-height: 0;
  border-radius: var(--df-apex-radius);
}

#df-portfolio-grid .df-apex-card .df-bento-video-wrapper {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

/* Si imagen y video coexisten en la misma tarjeta, la imagen actúa de poster
   y nunca se apilan generando doble altura: el wrapper de video la cubre. */
#df-portfolio-grid .df-apex-card .df-bento-video-wrapper + img {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: contain;
  z-index: 0;
}

#df-portfolio-grid .df-apex-card:hover img.is-loaded {
  transform: scale(1.015) translateZ(0);
  filter: brightness(1.06);
}

/* ── Pulso de Cristal (Skeleton Shimmer) ── */
@keyframes dfShimmerPulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

#df-portfolio-grid .df-apex-card.df-is-loading {
  background: linear-gradient(90deg, #0A0A0A 25%, rgba(0, 255, 0, 0.05) 50%, #0A0A0A 75%);
  background-size: 200% 100%;
  animation: dfShimmerPulse 2s infinite linear;
}

/* Brillo especular que sigue al cursor (custom props --mx/--my inyectadas por JS) */
#df-portfolio-grid .df-apex-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: radial-gradient(
    320px circle at var(--mx, 50%) var(--my, 50%),
    rgba(0, 255, 0, 0.08),
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.4s var(--df-apex-ease);
  pointer-events: none;
}

#df-portfolio-grid .df-apex-card:hover::after {
  opacity: 1;
}

/* Overlay glassmorphism con metadatos B2B */
#df-portfolio-grid .df-seo-terms {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: 0;
}

/*  Dark-Tech Custom Dropdowns  */
.df-custom-dropdown,
.df-gallery-search__input {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.03);
  color: var(--df-apex-text);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 999px;
  transition:
    color 0.35s var(--df-apex-ease),
    border-color 0.35s var(--df-apex-ease),
    background 0.35s var(--df-apex-ease),
    box-shadow 0.35s var(--df-apex-ease);
}

.df-gallery-search__input {
  padding: 0.6rem 1.1rem;
  min-width: 260px;
}

.df-custom-dropdown {
  position: relative;
  min-width: 200px;
  user-select: none;
}

.df-dropdown-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1.1rem;
  cursor: pointer;
  outline: none;
  border-radius: 999px;
}

.df-chevron {
  margin-left: 0.5rem;
  opacity: 0.5;
  transition: transform 0.3s var(--df-apex-ease);
}

.df-dropdown-trigger[aria-expanded="true"] .df-chevron {
  transform: rotate(180deg);
}

.df-custom-dropdown:hover,
.df-gallery-search__input:hover {
  border-color: var(--df-apex-border-hover);
}

.df-dropdown-trigger:focus-visible,
.df-gallery-search__input:focus {
  outline: none;
  border-color: var(--df-apex-accent);
  box-shadow: 0 0 0 3px rgba(0, 255, 0, 0.14);
}

/* Dropdown Menu (The Panel) */
.df-dropdown-menu,
.df-dropdown-panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  width: 100%;
  min-width: 220px;
  margin: 0;
  padding: 0.5rem;
  list-style: none;
  background: rgba(10, 10, 10, 0.98);
  border: 1px solid var(--df-apex-border);
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
  z-index: 100;
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity 0.3s var(--df-apex-ease), transform 0.3s var(--df-apex-ease);
}

.df-dropdown-menu:not([hidden]),
.df-dropdown-panel:not([hidden]) {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.df-dropdown-item {
  padding: 0.5rem 0.8rem;
  margin-bottom: 2px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--df-apex-muted);
  transition: background 0.2s, color 0.2s;
  outline: none;
}

.df-dropdown-item:last-child {
  margin-bottom: 0;
}

.df-dropdown-item:hover,
.df-dropdown-item:focus-visible {
  background: rgba(0, 255, 0, 0.05);
  color: var(--df-apex-text);
}

.df-dropdown-item.active {
  background: rgba(0, 255, 0, 0.1);
  color: var(--df-apex-accent);
  font-weight: 600;
}

.df-gallery-search__input::placeholder {
  color: var(--df-apex-muted);
}

@media (max-width: 480px) {
  .df-custom-dropdown,
  .df-gallery-search__input {
    width: 100%;
    min-width: 0;
  }
}


/*  FAB Navigation Buttons (fixed bottom-left)  */
.df-nav-fab {
  position: fixed;
  bottom: 2rem;
  left: 1.5rem;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: center;
  pointer-events: none;
}

.df-nav-fab__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--df-apex-text);
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px) scale(0.9);
  pointer-events: none;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  transition:
    opacity 0.4s var(--df-apex-ease),
    transform 0.4s var(--df-apex-ease),
    background 0.3s,
    color 0.3s,
    border-color 0.3s,
    box-shadow 0.3s;
  will-change: transform, opacity;
}

.df-nav-fab__btn svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.5;
  transition: stroke 0.3s;
}

.df-nav-fab.is-visible .df-nav-fab__btn {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: auto !important;
}

/* Staggered animation for FAB buttons */
.df-nav-fab.is-visible .df-nav-fab__btn:nth-child(1) { transition-delay: 0s; }
.df-nav-fab.is-visible .df-nav-fab__btn:nth-child(2) { transition-delay: 0.1s; }
.df-nav-fab.is-visible .df-nav-fab__btn:nth-child(3) { transition-delay: 0.2s; }

.df-nav-fab__btn:hover {
  background: rgba(10, 10, 10, 0.95);
  border-color: var(--df-apex-accent);
  color: var(--df-apex-accent);
  box-shadow: 0 0 15px rgba(0, 255, 0, 0.3);
}

.df-fab-cta {
  border-color: rgba(0, 255, 0, 0.3);
  color: var(--df-apex-accent);
  background: rgba(10, 10, 10, 0.9);
}

.df-nav-fab__btn[title]:hover::after {
  content: attr(title);
  position: absolute;
  left: calc(100% + 0.6rem);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background: rgba(10,10,10,0.95);
  border: 1px solid rgba(0,255,0,0.20);
  color: var(--df-apex-text);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  pointer-events: none;
}

@media (max-width: 480px) {
  .df-nav-fab {
    bottom: 1.2rem;
    left: 0.8rem;
  }

  .df-nav-fab__btn {
    width: 44px;
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .df-nav-fab__btn {
    transition: opacity 0.2s, background 0.2s !important;
    transform: none !important;
  }
}

#df-portfolio-grid .df-apex-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 1rem 1.15rem;
  background: rgba(10, 10, 10, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s var(--df-apex-ease), transform 0.45s var(--df-apex-ease);
  pointer-events: none;
}

#df-portfolio-grid .df-apex-card:hover .df-apex-meta,
#df-portfolio-grid .df-apex-card:focus-within .df-apex-meta {
  opacity: 1;
  transform: translateY(0);
}

.df-apex-meta__client {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--df-apex-accent);
}

.df-apex-meta__title {
  display: block;
  margin-top: 0.2rem;
  font-size: 16px;
  font-weight: 500;
  color: var(--df-apex-text);
  letter-spacing: -0.01em;
}

/* ============================================================================
   2. MENÚ DE FILTROS — Dark-Tech pills + Industria + Búsqueda de texto
   ============================================================================ */
.df-gallery-controls {
  max-width: 1200px;
  margin-inline: auto;
  padding: 1.5rem 1rem 0.5rem;
  
  /* Comportamiento Sticky Blindado */
  position: sticky;
  top: 81px; /* 81px es el alto exacto del Header Global B2B */
  z-index: 100;
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  margin-bottom: 2rem;
}

/* Offset para la barra de admin de WordPress (Prevención de colisión) */
.admin-bar .df-gallery-controls {
  top: 113px; /* 81px (Header) + 32px (WP Admin) */
}
@media (max-width: 782px) {
  .admin-bar .df-gallery-controls {
    top: 127px; /* 81px (Header) + 46px (WP Admin Mobile) */
  }
}

/* Compensación del anclaje de scroll (Scroll Anchor Blindness) */
#df-portfolio-grid {
  scroll-margin-top: 180px;
}

/* Estado Vacío (Empty State UI) */
.df-empty-state {
  display: none; /* Oculto por defecto, renderizado por PHP */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6rem 2rem;
  text-align: center;
  background: radial-gradient(circle at center, rgba(0, 255, 0, 0.03) 0%, rgba(10, 10, 10, 0.8) 100%);
  border: 1px solid rgba(0, 255, 0, 0.1);
  border-radius: var(--df-apex-radius);
  margin: 2rem 1rem 4rem 1rem;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
}
.df-empty-state::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 0, 0.3), transparent);
}
.df-empty-state.is-active {
  display: flex;
  animation: df-empty-fade-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes df-empty-fade-in {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.df-empty-state__icon {
  color: var(--df-apex-accent);
  margin-bottom: 1.5rem;
  opacity: 0.8;
  filter: drop-shadow(0 0 12px rgba(0, 255, 0, 0.4));
  transform: scale(1.2);
}
.df-empty-state__title {
  color: #FFFFFF;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 0.75rem 0;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}
.df-empty-state__text {
  color: rgba(255, 255, 255, 0.7);
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  max-width: 480px;
  line-height: 1.6;
  margin: 0 0 2rem 0;
}
.df-empty-state__btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #FFF;
  padding: 0.875rem 2rem;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 500;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
}
.df-empty-state__btn:hover {
  background: rgba(0, 255, 0, 0.1);
  border-color: var(--df-apex-accent);
  color: var(--df-apex-accent);
  box-shadow: 0 0 20px rgba(0, 255, 0, 0.2);
}

.df-gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  padding: 0 0 1.25rem;
  margin: 0;
  max-width: 100%;
}

.df-gallery-filters__btn {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.03);
  color: var(--df-apex-muted);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.55rem 1.2rem;
  border-radius: 999px;
  cursor: pointer;
  transition:
    color 0.35s var(--df-apex-ease),
    border-color 0.35s var(--df-apex-ease),
    background 0.35s var(--df-apex-ease),
    box-shadow 0.35s var(--df-apex-ease);
}

.df-gallery-filters__btn--ai {
  border-color: rgba(0, 255, 0, 0.25);
  color: #a3ffa3;
}

.df-gallery-filters__btn:hover {
  color: var(--df-apex-text);
  border-color: var(--df-apex-border-hover);
}

.df-gallery-filters__btn[aria-pressed="true"] {
  color: #0A0A0A;
  background: var(--df-apex-accent);
  border-color: var(--df-apex-accent);
  box-shadow: 0 0 24px rgba(0, 255, 0, 0.28);
}

/* Fila secundaria: industria (select) + búsqueda (input) */
.df-gallery-controls__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  align-items: center;
  padding-bottom: 1.5rem;
}

.df-gallery-industry__select,
.df-gallery-search__input {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.03);
  color: var(--df-apex-text);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  transition:
    color 0.35s var(--df-apex-ease),
    border-color 0.35s var(--df-apex-ease),
    background 0.35s var(--df-apex-ease),
    box-shadow 0.35s var(--df-apex-ease);
}

.df-gallery-industry__select {
  cursor: pointer;
  min-width: 200px;
}

.df-gallery-search__input {
  min-width: 260px;
}

.df-gallery-search__input::placeholder {
  color: var(--df-apex-muted);
}

.df-gallery-industry__select:hover,
.df-gallery-search__input:hover {
  border-color: var(--df-apex-border-hover);
}

.df-gallery-industry__select:focus,
.df-gallery-search__input:focus {
  outline: none;
  border-color: var(--df-apex-accent);
  box-shadow: 0 0 0 3px rgba(0, 255, 0, 0.14);
}

.df-gallery-industry__select option {
  background: var(--df-apex-surface);
  color: var(--df-apex-text);
}

@media (max-width: 480px) {
  .df-gallery-industry__select,
  .df-gallery-search__input {
    width: 100%;
    min-width: 0;
  }
}

/* Filtrado instantáneo: ocultación robusta e inmediata */
.df-apex-card.df-apex-filtered-out,
#df-portfolio-grid .df-apex-filtered-out,
.df-apex-filtered-out {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  transform: scale(0.96) !important;
  transition: opacity 0.3s var(--df-apex-ease), transform 0.3s var(--df-apex-ease);
}

/* ============================================================================
   3. LIGHTBOX CINEMATOGRàFICO
   ============================================================================ */
.df-cine-lb {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  touch-action: none;
  overscroll-behavior: none;
  transition: opacity 0.4s var(--df-apex-ease), visibility 0.4s;
}

.df-cine-lb.is-open {
  opacity: 1;
  visibility: visible;
}

.df-cine-lb__backdrop {
  position: absolute;
  inset: 0;
  /* Fondo sólido sin blur para evitar el crash (Aw, Snap / ERR_FAILED) de WebKit en iOS */
  background: #040404;
  touch-action: none;
}

.df-cine-lb__stage {
  position: relative;
  z-index: 1;
  width: min(92vw, 1600px);
  height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  overflow: hidden; /* Mantiene la imagen ampliada confinada al visor */
}

.df-cine-lb__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* ZERO-CROP también en el lightbox */
  opacity: 0;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  pointer-events: none;
  -webkit-user-drag: none;
  touch-action: none;
  will-change: transform, opacity;
  transform-origin: center center;
}

.df-cine-lb__img.is-loaded {
  opacity: 1;
}

/* Visor 360° diferido (iframe Matterport/Kuula o Pannellum) */
.df-cine-lb__pano {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 12px;
  background: #000;
}

.df-cine-lb__caption {
  position: absolute;
  bottom: 6rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 1.3rem;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

.df-cine-lb__counter {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--df-apex-accent);
  font-variant-numeric: tabular-nums;
}

.df-cine-lb__alt {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.05em;
  color: var(--df-apex-muted);
  max-width: 46ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Miniaturas (Smart Thumbnails) ── */
.df-cine-lb__thumbnails-wrap {
  position: absolute;
  bottom: 1rem;
  left: 0;
  width: 100%;
  padding: 0 2rem;
  z-index: 10;
  display: flex;
  justify-content: center;
}

.df-cine-lb__thumbnails {
  display: flex;
  gap: 0.5rem;
  max-width: min(90vw, 800px);
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 0.5rem;
  /* Ocultar barra de scroll nativa */
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.df-cine-lb__thumbnails::-webkit-scrollbar {
  display: none;
}

.df-cine-lb__thumb-item {
  position: relative;
  flex: 0 0 auto;
  width: 60px;
  height: 40px;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  /* LEY 2 (Zero-Crop) + LEY 4 (contraste): la miniatura inactiva ya NO se apaga
     al 40% —sobre el fondo #040404 los productos blancos parecían tela gris— ni
     recorta el encuadre. Borde tenue para que el marco se lea sin ensuciar el
     blanco comercial. */
  opacity: 0.65;
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition: opacity 0.3s var(--df-apex-ease), transform 0.3s var(--df-apex-ease), box-shadow 0.3s var(--df-apex-ease), border-color 0.3s var(--df-apex-ease);
  background: rgba(255, 255, 255, 0.05);
}

.df-cine-lb__thumb-item img {
  width: 100%;
  height: 100%;
  /* LEY 2 — Zero-Crop absoluto también en miniaturas: el encuadre fotográfico
     del producto es intocable. `contain` con fondo neutro, nunca `cover`. */
  object-fit: contain !important;
  display: block;
}

.df-cine-lb__thumb-item:hover {
  opacity: 0.9;
  border-color: rgba(255, 255, 255, 0.3);
}

.df-cine-lb__thumb-item.is-active {
  opacity: 1;
  transform: scale(1.1);
  border-color: var(--df-apex-accent);
  box-shadow: 0 0 0 2px var(--df-apex-accent);
}

.df-thumb-media {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(30, 30, 30, 0.8);
}


.df-cine-lb__btn {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--df-apex-border-hover);
  background: rgba(10, 10, 10, 0.95);
  color: var(--df-apex-accent);
  font-size: 20px;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, transform 0.3s var(--df-apex-ease);
}

.df-cine-lb__btn:hover {
  background: var(--df-apex-accent);


  color: #0A0A0A;
  transform: scale(1.08);
}

/* ============================================================================
   PINTADO INSTANTÁNEO DEL FILTRO (LEY 5)
   El filtro se resuelve con el índice que ya está en RAM (0 peticiones de red).
   Solo se pinta el CONTADOR: el avance es automático por scroll (el centinela de
   infinite-scroll.js revela la siguiente tanda al asomar en pantalla).
   ============================================================================ */
.df-gallery-paint-status {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 14px 0 26px;
}
.df-gallery-paint-count {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--df-apex-text-muted, #8a8a8a);
}

.df-cine-lb__close { top: 1.6rem; right: 1.6rem; }
.df-cine-lb__prev { left: 1.6rem; top: 50%; margin-top: -26px; }
.df-cine-lb__next { right: 1.6rem; top: 50%; margin-top: -26px; }

/* ============================================================================
   ACCESIBILIDAD — Respeta reduced-motion (señal de lujo B2B)
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  #df-portfolio-grid .df-apex-card,
  #df-portfolio-grid .df-apex-in,
  .df-cine-lb,
  .df-cine-lb__img {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

@media (max-width: 767px) {
  .df-cine-lb__prev { left: 0.5rem; }
  .df-cine-lb__next { right: 0.5rem; }
  .df-cine-lb__alt { display: none; }
  .df-hover-video { display: none; }
}

/* ============================================================================
   5. HOVER VIDEO FACADE (Netflix-style)
   ============================================================================ */
.df-hover-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 2; /* Sobre la imagen (z-index:1), bajo los metadatos (z-index:3) */
  opacity: 0;
  pointer-events: none; /* Evita flicker de mouseenter/mouseleave y permite el click */
  border-radius: var(--df-apex-radius);
  transition: opacity 0.6s var(--df-apex-ease);
}
.df-hover-video.is-playing {
  opacity: 1;
}

/* ============================================================================
   6. FORMAT BADGES (Video & 360° visual indicators for mobile)
   ============================================================================ */
.df-apex-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 4;
  background: rgba(10, 10, 10, 0.95);
  color: #fff;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 0.4rem 0.8rem;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  text-transform: uppercase;
  opacity: 0.9;
  transition: opacity 0.3s ease;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.df-apex-badge svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}
.df-apex-card:hover .df-apex-badge:not(.df-apex-badge--ai) {
  opacity: 0; /* Oculta el badge de formato al hacer hover (el emblema IA permanece) */
}

/* ── 6.b EMBLEMA IA & CGI (esquina superior izquierda · Dark-Tech) ── */
.df-apex-badge--ai {
  position: absolute;
  top: 14px;
  left: 14px;
  right: auto;
  bottom: auto;
  transform: none !important;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: rgba(10, 10, 10, 0.92);
  border: 1px solid rgba(0, 255, 0, 0.45);
  border-radius: 999px;
  color: #00FF00;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), 0 0 12px rgba(0, 255, 0, 0.18);
  opacity: 0.95;
  transition: opacity 0.3s ease, border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.df-apex-badge--ai svg {
  width: 9px;
  height: 11px;
  display: inline-block;
  vertical-align: -1px;
  flex-shrink: 0;
  fill: currentColor;
}
.df-apex-card:hover .df-apex-badge--ai {
  opacity: 1 !important;
  border-color: #00FF00;
  background: rgba(0, 255, 0, 0.15);
  box-shadow: 0 0 20px rgba(0, 255, 0, 0.32);
}

@media (max-width: 480px) {
  .df-apex-badge--ai {
    top: 10px;
    left: 10px;
    font-size: 11px;
    padding: 3px 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .df-apex-badge--ai {
    transition: none !important;
  }
}



/* ============================================================================
   7. RESPONSIVE / MOBILE TWEAKS
   ============================================================================ */
@media (max-width: 767px) {
  /* Escala la insignia en celulares para visibilidad ultra-rápida (no el emblema IA) */
  .df-apex-badge:not(.df-apex-badge--ai) {
    font-size: 12px;
    padding: 0.5rem 1rem;
    top: 0.75rem;
    right: 0.75rem;
  }
  .df-apex-badge:not(.df-apex-badge--ai) svg {
    width: 14px;
    height: 14px;
  }
}