/* CSS para el Hero Interactivo basado en GSAP */
.hero-interactive {
  position: relative;
  width: 100%;
  min-height: 100vh; /* Full height */
  background: var(--color-white);
  overflow: hidden;
  --card-base-width: 20vw;
  --column-gap: 5vw;
  --row-gap: 5vw;
  --ease-premium: cubic-bezier(0.25, 1, 0.5, 1);
}

.hero-interactive__viewport {
  width: 100%;
  height: 100vh;
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-interactive__viewport.panel-is-open {
  cursor: pointer;
}

.hero-interactive__viewport:active {
  cursor: grabbing;
}

#hi-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(5, 1fr);
  grid-auto-flow: dense;
  gap: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  transform-origin: center center;
  will-change: transform;
}

.hi-span-1x1 { grid-column: span 1; grid-row: span 1; }
.hi-span-2x2 { grid-column: span 2; grid-row: span 2; }
.hi-span-2x1 { grid-column: span 2; grid-row: span 1; }
.hi-span-1x2 { grid-column: span 1; grid-row: span 2; }

.hi-product-card-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 0.6s var(--ease-premium);
}

/* Efecto staggered: desplazamos columnas pares hacia abajo */
.hi-product-card-wrapper:nth-child(8n + 2),
.hi-product-card-wrapper:nth-child(8n + 4),
.hi-product-card-wrapper:nth-child(8n + 6),
.hi-product-card-wrapper:nth-child(8n + 8) {
  transform: translateY(35%);
}

.hi-product-inner {
  width: 100%;
  height: 100%;
  background: white;
  position: relative;
  overflow: hidden;
  border-radius: 0; /* Bordes rectos para un grid raso */
  /* border: 0.5px solid rgba(0,0,0,0.05); Opcional: añade línea de división como el boceto */
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.6s var(--ease-premium), opacity 0.4s ease;
  will-change: transform, opacity;
  opacity: 0;
  visibility: hidden;
}

.hi-product-inner:hover {
  transform: scale(1.06);
  z-index: 10;
  box-shadow: none;
}

.hi-product-inner img {
  max-width: 85%;
  max-height: 85%;
  width: auto;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  /* El transform combina el efecto parallax (variables) con el efecto hover (scale) */
  transform: translate(var(--hi-px, 0), var(--hi-py, 0)) scale(var(--hi-scale, 1));
  transition: transform 0.3s ease-out; /* Suavidad para el parallax */
}

.hi-product-inner:hover img {
  --hi-scale: 1.15;
}

.hi-cursor-tooltip {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  background: #000;
  color: #fff;
  padding: 8px 16px;
  border-radius: 30px;
  font-family: var(--font-base, sans-serif);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  z-index: 99999;
  opacity: 0;
  will-change: transform, opacity;
  display: flex;
  align-items: center;
  gap: 6px;
}

.hi-cursor-tooltip span.tooltip-plus {
  font-weight: 700;
  font-size: 16px;
  margin-right: 4px;
}

/* Panel lateral */
#hi-side-panel {
  position: fixed;
  top: 0;
  left: -50vw;
  width: 50vw;
  min-width: 450px;
  height: 100%;
  background: var(--color-white);
  z-index: 9999;
  box-shadow: 10px 0 40px rgba(0,0,0,0.08);
  padding: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.hi-panel-top, .hi-panel-bottom {
  height: 50%;
  width: 100%;
  padding: 60px 80px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.hi-panel-top {
  justify-content: center;
  position: relative;
}

.hi-panel-bottom {
  background: var(--color-white);
  justify-content: flex-start;
  gap: 30px;
}

.hi-close-panel {
  position: absolute;
  top: 50%;
  right: -25px;
  transform: translateY(-50%) scale(0);
  width: 50px;
  height: 50px;
  background: white;
  border-radius: 50%;
  box-shadow: 2px 0 10px rgba(0,0,0,0.1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  transition: background-color 0.3s ease;
}

.hi-close-panel:hover {
  background-color: #f8f8f8;
}

.hi-close-svg {
  width: 20px;
  height: 20px;
  stroke: var(--color-dark);
  transition: transform 0.6s var(--ease-premium);
}

.hi-close-panel:hover .hi-close-svg {
  /* Eliminado a favor de rotar el contenedor completo */
}

.hi-panel-header-group {
  margin-bottom: 20px;
}

#hi-panel-coll {
  font: var(--ts-indices);
  color: var(--color-muted);
  text-transform: uppercase;
  margin-bottom: 8px;
  display: block;
}

#hi-panel-title {
  font: var(--ts-h3);
  color: var(--color-dark);
  margin: 0;
  text-transform: uppercase;
}

.hi-char-wrapper { display: inline-block; overflow: hidden; vertical-align: bottom; }
.hi-char-inner { display: inline-block; transform: translateY(100%); will-change: transform; }

.hi-anim-blob { will-change: transform, opacity; }

.hi-panel-img-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100%;
}

.hi-panel-img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  background: transparent;
  transform-origin: center center;
}

#hi-panel-desc {
  font: var(--ts-p);
  color: var(--color-dark);
  margin: 0;
}

@media screen and (max-width:1700px) {
  .hi-panel-top { padding: 40px 50px; }
  .hi-panel-bottom { padding: 0px 50px 40px; }
  #hi-panel-title { font-size: 2.8rem; }
  
  #hi-panel-desc {
    font-size: clamp(15px, 1vw + 14px, 18px);
  }

  .hi-specs-grid {
    padding-top: 10px;
    padding-bottom: 10px;
    gap: 12px;
  }
}

@media screen and (max-width: 900px) {
  #hi-side-panel {
    width: 100vw;
    left: -100vw;
    min-width: 100vw;
    overflow-y: auto;
  }
  .hi-panel-top, .hi-panel-bottom {
    height: auto;
    min-height: 50vh;
    padding: 60px 30px 30px 30px;
  }
  #hi-panel-title {
    font-size: 2.2rem;
  }
  .hi-close-panel {
    right: 20px;
    top: 20px;
    transform: scale(0); /* JS lo maneja */
  }
}

.hi-specs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 10px;
  padding-bottom: 24px;
  border-top: 1px solid var(--color-border-light);
  padding-top: 24px;
}

.hi-spec-item strong {
  display: block;
  font: var(--ts-indices);
  font-size: 0.75rem; 
  color: var(--color-dark);
  margin-bottom: 6px;
  text-transform: uppercase;
}

.hi-spec-item span {
  font: var(--ts-p);
  font-size: 1rem;
  color: var(--color-muted);
}
.hi-btn-pos {
  margin-top: auto;
  align-self: flex-end;
}

.flip-img-clone {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10010;
  pointer-events: none;
  object-fit: contain;
  will-change: transform, width, height;
}


/* UI Controls in Hero */
.hi-controls {
  position: absolute;
  bottom: 40px;
  right: 40px;
  display: flex;
  gap: 10px;
  pointer-events: auto;
  z-index: 9999;
}

.hi-btn {
  background: white;
  border: 1px solid var(--color-dark);
  padding: 10px 20px;
  cursor: pointer;
  transition: all 0.4s var(--ease-premium);
  border-radius: 4px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-dark);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.03);
}

.hi-btn:hover {
  background: var(--color-dark);
  color: white;
}

.hi-btn-refresh-icon {
  width: 14px;
  height: 14px;
  fill: currentColor;
  transition: transform 0.8s var(--ease-premium);
}

.hi-btn:hover .hi-btn-refresh-icon {
  transform: rotate(-180deg);
}

@media (max-width: 767px) {
  .hero-interactive {
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
    background: var(--color-white);
  }

  .hero-interactive__viewport {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    overflow: hidden;
  }

  #hi-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: repeat(7, 1fr) !important;
    gap: 0;
    padding: 0;
    width: 100% !important;
    height: 100vh !important;
    transform: none !important;
    pointer-events: none;
  }

  .hi-product-card-wrapper {
    aspect-ratio: auto;
    height: 100% !important;
    transform: none !important;
  }

  /* Ocultamos los productos extra si hiciera falta en móvil, aunque ya son 19 fijos */
  .hi-product-card-wrapper:nth-child(n+22) {
    display: none !important;
  }

  .hi-product-inner {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto;
  }

  .hi-product-info, .hi-controls {
    display: none !important;
  }

  .hi-span-1x1, .hi-span-2x2, .hi-span-2x1, .hi-span-1x2 {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }
}