/* ==========================================================================
   FASE 2 — GRID DE PORTAFOLIO BEHANCE
   Grid CSS real | gap: 40px | hover scale 1.05 0.5s | overlay negro sutil
   ========================================================================== */

/* ─── 1. GRID PRINCIPAL ──────────────────────────────────────────────────── */
.portfolio-masonry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px; /* Fase 2: gap exacto de 40px */
  width: 100%;
}

@media (max-width: 1023px) {
  .portfolio-masonry-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
}

@media (max-width: 599px) {
  .portfolio-masonry-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ─── 2. TARJETA — BEHANCE CLEAN CARD ───────────────────────────────────── */
/* Botón de reproducción centrado sobre la preview de YouTube */
.dp-play-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 8;
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0D0D0D;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.35s ease;
}

.masonry-item:hover .dp-play-badge {
  transform: translate(-50%, -50%) scale(1.12);
  background: #00D2FF;
}

.masonry-item--short .dp-play-badge {
  width: 48px;
  height: 48px;
}

.masonry-item {
  position: relative;
  border-radius: 4px;      /* Behance: redondeo mínimo */
  overflow: hidden;
  background-color: #111111;
  cursor: pointer;
  /* Resuelve la superposición de Tailwind: anula clases conflictivas */
  border: none !important;
  /* Elevación sutil al hover via transform */
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.masonry-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 56px -12px rgba(0, 0, 0, 0.75);
}

/* ─── 3. IMAGEN — SCALE 1.05 EN 0.5s ───────────────────────────────────── */
.masonry-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* ÚNICO transition en CSS — anula Tailwind duration-500 */
  transition: transform 0.5s ease !important;
}

.masonry-item:hover .masonry-img {
  transform: scale(1.05) !important;
}

/* ─── 4. OVERLAY NEGRO SUTIL ────────────────────────────────────────────── */
/* Negro puro de base transparente a 0.75 opacity — sin tinte de color */
.masonry-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.82) 0%,
    rgba(0, 0, 0, 0.40) 40%,
    rgba(0, 0, 0, 0.0)  70%
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem 1.75rem;
  gap: 0.4rem;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 2;
  pointer-events: none;
}

.masonry-item:hover .masonry-overlay {
  opacity: 1;
}

/* ─── 5. TEXTOS DEL OVERLAY ─────────────────────────────────────────────── */
.masonry-category-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.55);
  transform: translateY(6px);
  opacity: 0;
  transition: transform 0.4s ease 0.05s, opacity 0.4s ease 0.05s;
}

.masonry-item:hover .masonry-category-label {
  transform: translateY(0);
  opacity: 1;
}

.masonry-project-title {
  font-family: var(--font-title, 'Space Grotesk', system-ui, sans-serif);
  font-size: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: -0.03em;
  line-height: 1.2;
  transform: translateY(8px);
  opacity: 0;
  transition: transform 0.4s ease 0.08s, opacity 0.4s ease 0.08s;
}

.masonry-item:hover .masonry-project-title {
  transform: translateY(0);
  opacity: 1;
}

/* Badge técnico: se mantiene sutil, sin cyan llamativo */
.cinematic-meta-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.65);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  max-width: fit-content;
  transform: translateY(6px);
  opacity: 0;
  transition: transform 0.4s ease 0.12s, opacity 0.4s ease 0.12s;
}

.masonry-item:hover .cinematic-meta-badge {
  transform: translateY(0);
  opacity: 1;
}

.cinematic-meta-badge span { opacity: 0.85; }

/* ─── 6. PILLS DE FILTRO — FASE 2 BEHANCE ──────────────────────────────── */
/* Regla maestra única — sin duplicados */
.portfolio-filter-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.1rem;
  border-radius: 9999px;
  background-color: transparent;
  border: 1px solid #333333;
  color: #888888;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s ease,
              border-color 0.2s ease,
              background-color 0.2s ease;
  user-select: none;
  -webkit-user-select: none;
  -webkit-font-smoothing: antialiased;
}

.portfolio-filter-pill:hover {
  color: #FFFFFF;
  border-color: #555555;
}

/* Activo: inversión exacta — fondo blanco, texto negro */
.portfolio-filter-pill.active {
  background-color: #FFFFFF !important;
  color: #000000 !important;
  border-color: #FFFFFF !important;
  font-weight: 600;
}



/* ==========================================================================
   3. VISTA INMERSIVA DE CASO DE ESTUDIO (Case Study View)
   ========================================================================== */
.case-study-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  min-height: clamp(16rem, 20vw, 36rem);
  border-radius: var(--fluid-radius-lg);
  overflow: hidden;
  background: #07090E;
}

.case-study-hero img,
.case-study-hero video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-study-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--fluid-space-md);
  padding: var(--fluid-space-md);
  border-radius: var(--fluid-radius-md);
  background: rgba(19, 24, 36, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.case-study-stream {
  display: flex;
  flex-direction: column;
  gap: var(--fluid-space-lg);
  width: 100%;
}

.case-study-stream img {
  width: 100%;
  height: auto;
  border-radius: var(--fluid-radius-md);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* ==========================================================================
   4. THUMBNAIL DE VIDEO EN MOVIMIENTO (Hover Video Preview)
   ========================================================================== */
.masonry-video-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 1;
}

.masonry-item:hover .masonry-video-preview {
  opacity: 1;
}

/* Indicador de Video en Tarjeta */
.card-video-indicator {
  position: absolute;
  top: clamp(0.6rem, 0.4rem + 0.4vw, 1.25rem);
  left: clamp(0.6rem, 0.4rem + 0.4vw, 1.25rem);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  border-radius: 9999px;
  background: rgba(7, 9, 14, 0.75);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ==========================================================================
   5. COMPARADOR INTERACTIVO ANTES / DESPUÉS (Color Grading Slider)
   ========================================================================== */
.color-grade-comparator-block {
  width: 100%;
  border-radius: var(--fluid-radius-lg);
  overflow: hidden;
}

.before-after-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--fluid-radius-md);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  cursor: ew-resize;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.9);
  background: #000;
}

.before-after-slider .ba-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.before-after-slider .ba-after {
  z-index: 1;
}

.before-after-slider .ba-resize {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
  z-index: 2;
  border-right: 2px solid #00D2FF;
}

.before-after-slider .ba-resize .ba-before {
  width: 100%;
  height: 100%;
  max-width: none;
}

/* Etiquetas Flotantes */
.ba-label {
  position: absolute;
  bottom: 1.25rem;
  z-index: 4;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  background: rgba(7, 9, 14, 0.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #FFFFFF;
  font-family: var(--font-title);
  font-size: var(--fluid-text-2xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
}

.ba-label-before {
  left: 1.25rem;
  color: var(--color-metallic);
}

.ba-label-after {
  right: 1.25rem;
  color: var(--color-cyan);
  border-color: rgba(0, 210, 255, 0.5);
}

/* Tirador / Handle Central */
.ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 44px;
  margin-left: -22px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.ba-handle-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #00D2FF;
  box-shadow: 0 0 10px rgba(0, 210, 255, 0.8);
}

.ba-handle-btn {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #00D2FF;
  border: 2px solid #FFFFFF;
  box-shadow: 0 0 20px rgba(0, 210, 255, 0.9), 0 4px 10px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ew-resize;
  pointer-events: auto;
  transition: transform 0.15s ease;
}

.before-after-slider:hover .ba-handle-btn {
  transform: scale(1.1);
}

/* ==========================================================================
   5. FILTROS DE PORTAFOLIO — BEHANCE SPEC
   Pills ultra-minimalistas: borde gris fino, fondo transparente, tracking amplio.
   Hover / Activo: texto blanco puro, borde blanco. SIN relleno sólido.
   ========================================================================== */
.portfolio-filter-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1.25rem;
  border-radius: 9999px;
  background-color: transparent;
  border: 1px solid #333333; /* Behance: borde gris muy oscuro */
  color: #888888; /* Behance: gris tenue inactivo */
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em; /* Behance: spacing amplio */
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease;
  user-select: none;
  -webkit-user-select: none;
}

.portfolio-filter-pill:hover {
  color: #FFFFFF;
  border-color: #666666;
}

.portfolio-filter-pill.active {
  color: #FFFFFF !important;
  border-color: #FFFFFF !important;
  font-weight: 600;
}