/* ==========================================================================
   hc-v2-hero.css — Hero con "muro de productos": las 12 marcas con foto real.
   Se carga después de styles.css y hc-taste.css.
   Escritorio: 3 columnas que se deslizan en sentido contrario (pausa al pasar
   el mouse o al enfocar con teclado). Celular: tira horizontal con swipe.
   Con "reducir movimiento": grilla estática de 3x4 con las 12 marcas.
   ========================================================================== */
.hero-v2 .hero-inner { align-items: center; padding-top: 56px; padding-bottom: 64px; }
.hero-v2 h1 { font-size: clamp(36px, 4.2vw, 54px); line-height: 1.04; margin: 20px 0 18px; }
.hero-v2 p.lead { font-size: 18px; max-width: 30em; margin-bottom: 30px; }
.hero-v2::before { opacity: .5; }

/* ---------- Muro ---------- */
.hero-wall {
  --tile-l: 200px; --tile-s: 148px; --gap: 12px;
  position: relative;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap);
  height: 504px; width: 100%; max-width: 580px; justify-self: end; min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.wall-col { min-width: 0; overflow: hidden; }
.wall-track { display: flex; flex-direction: column; will-change: transform; }
.wall-set { display: flex; flex-direction: column; gap: var(--gap); padding-bottom: var(--gap); }

.wall-tile {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: flex; flex-direction: column; overflow: hidden; flex: none;
  background: #fff; color: var(--navy-900);
  border-radius: var(--radius-md);
  box-shadow: 0 14px 30px -18px rgba(3, 10, 22, .6);
  font-family: var(--font-sans);
  transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.wall-tile.l { height: var(--tile-l); }
.wall-tile.s { height: var(--tile-s); }
.wt-img { position: relative; flex: 1; min-height: 0; padding: 12px 12px 4px; }
.wt-img img {
  width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply;
  transition: transform 320ms var(--ease-out);
}
.wt-cap { padding: 2px 14px 13px; display: flex; flex-direction: column; gap: 3px; }
.wt-cap strong {
  display: flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.1;
}
.wt-cap strong::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }
.wt-cap span { font-size: 12px; line-height: 1.25; color: var(--gray-500); }

@media (hover: hover) {
  .wall-tile:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -20px rgba(3, 10, 22, .75); }
  .wall-tile:hover .wt-img img { transform: scale(1.06); }
  .hero-wall:hover .wall-track { animation-play-state: paused; }
}
.wall-tile:active { transform: scale(.98); }
.wall-tile:focus-visible { outline: 2px solid var(--amber-400); outline-offset: 2px; }
.hero-wall:focus-within .wall-track { animation-play-state: paused; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes wall-up   { to { transform: translateY(-50%); } }
  @keyframes wall-fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .hero-wall { animation: wall-fade 700ms var(--ease-out) both; }
  .wall-track { animation: wall-up 96s linear infinite; }
  .wall-col:nth-child(2) .wall-track { animation-duration: 120s; animation-direction: reverse; }
  .wall-col:nth-child(3) .wall-track { animation-duration: 108s; animation-delay: -36s; }
}

/* Sin movimiento: una sola copia, grilla de 3x4 con todas las marcas */
@media (prefers-reduced-motion: reduce) {
  .hero-wall { --tile-l: 118px; --tile-s: 118px; height: auto; -webkit-mask-image: none; mask-image: none; }
  .wall-set.dup { display: none; }
  .wall-set { padding-bottom: 0; }
  .wall-tile.vb { display: none; }

  .wt-cap span { display: none; }
}

/* ---------- Celular: tira horizontal con swipe, prioridad de marcas ---------- */
@media (max-width: 900px) {
  .hero-v2 .hero-inner { padding: 56px 24px 48px; gap: 32px; }
  .hero-wall {
    display: flex; gap: 10px; height: auto; max-width: none; justify-self: stretch;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity;
    margin: 0 -24px; padding: 4px 24px 10px; width: auto; scroll-padding-inline: 24px;
    -webkit-mask-image: none; mask-image: none; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .hero-wall::-webkit-scrollbar { display: none; }
  .wall-col, .wall-track, .wall-set { display: contents; }
  .wall-set.dup { display: none; }
  .wall-track { animation: none !important; }
  .wall-tile { order: var(--o); flex: none; width: 148px; height: 196px; scroll-snap-align: start; }
  .wall-tile.l, .wall-tile.s { height: 196px; }
  .wt-cap span { display: block; }
  .hero-v2 .hero-stage { display: none; }
}