/* Product showcase — estilo Apple: bento, profundidad, UI real de la app */

.product-showcase {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .product-showcase { max-width: none; margin: 0; }
}

.product-showcase__ambient {
  position: absolute;
  inset: -15% -10%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 55% 45% at 30% 25%, rgba(34, 197, 94, 0.22), transparent 65%),
    radial-gradient(ellipse 50% 40% at 75% 65%, rgba(212, 175, 55, 0.18), transparent 60%),
    radial-gradient(ellipse 40% 35% at 50% 90%, rgba(59, 130, 246, 0.12), transparent 55%);
  filter: blur(2px);
}

.product-bento {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas:
    "hero hero"
    "radar lib"
    "steps live";
}
@media (min-width: 640px) {
  .product-bento {
    gap: 1rem;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "hero hero hero hero hero hero hero radar radar radar radar radar"
      "hero hero hero hero hero hero hero lib lib lib steps steps"
      "hero hero hero hero hero hero hero live live live live live";
  }
}

.product-panel {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(22, 22, 24, 0.98) 0%, rgba(8, 8, 10, 0.99) 100%);
  border: 1px solid rgba(212, 175, 55, 0.14);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 24px 48px -16px rgba(0, 0, 0, 0.75),
    0 0 40px -8px rgba(212, 175, 55, 0.08);
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.45s ease;
}
.product-panel:hover {
  transform: translateY(-3px) scale(1.008);
  box-shadow:
    0 0 0 1px rgba(212, 175, 55, 0.2) inset,
    0 32px 64px -20px rgba(0, 0, 0, 0.8),
    0 0 56px -4px rgba(34, 197, 94, 0.12);
}

.product-panel--hero { grid-area: hero; min-height: 280px; }
.product-panel--radar { grid-area: radar; }
.product-panel--lib { grid-area: lib; }
.product-panel--steps { grid-area: steps; }
.product-panel--live { grid-area: live; }

.product-panel__chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px 0;
  opacity: 0.55;
}
.product-panel__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}
.product-panel__dot--gold { background: rgba(212, 175, 55, 0.65); }

.product-panel__img-wrap {
  padding: 0.5rem 0.75rem 0.75rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 0;
}
.product-panel--hero .product-panel__img-wrap {
  padding: 0.25rem 1rem 1rem;
  min-height: 240px;
}
@media (min-width: 640px) {
  .product-panel--hero .product-panel__img-wrap { min-height: 340px; }
}

.product-panel img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  object-fit: contain;
  object-position: bottom center;
}
.product-panel--hero img {
  max-width: 300px;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
}
@media (min-width: 640px) {
  .product-panel--hero img { max-width: 340px; }
}

.product-panel__caption {
  position: absolute;
  left: 14px;
  bottom: 12px;
  right: 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  pointer-events: none;
}
.product-panel__tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(212, 175, 55, 0.95);
}
.product-panel__title {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  font-family: "Inter Tight", Inter, system-ui, sans-serif;
  letter-spacing: -0.02em;
}

/* Galería ancha (sección completa) */
.product-gallery {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .product-gallery {
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto auto;
    gap: 1.25rem;
  }
  .product-gallery__a { grid-column: span 7; }
  .product-gallery__b { grid-column: span 5; }
  .product-gallery__c { grid-column: span 4; }
  .product-gallery__d { grid-column: span 4; }
  .product-gallery__e { grid-column: span 4; }
}

.product-gallery .product-panel { min-height: 200px; }
.product-gallery .product-panel__img-wrap { min-height: 180px; }

/* Strip horizontal (problema / CTA) */
.product-strip {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.5rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.product-strip::-webkit-scrollbar { display: none; }
.product-strip .product-panel {
  flex: 0 0 min(78vw, 280px);
  scroll-snap-align: center;
}

/* Reemplazo manifesto: showcase en lugar de foto stock */
.manifesto-showcase {
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(145deg, rgba(12, 12, 14, 0.95), rgba(6, 6, 8, 0.98));
  padding: 1.25rem;
}

.flagship-card .product-panel {
  margin-top: 1rem;
  border-radius: 16px;
}
.flagship-card .product-panel__img-wrap {
  padding: 0.5rem;
  min-height: 200px;
}
.feature-shot.product-panel {
  border: none;
  background: transparent;
  box-shadow: none;
}
.feature-shot.product-panel:hover {
  transform: none;
}
.feature-shot.product-panel .product-panel__img-wrap {
  padding: 0;
}