/* ============================================================
   HorizontalCarousel — carrusel horizontal editorial
   Portado de React a vanilla para WofferLab. Clases .hcar prefijadas.
   Fondo transparente: se apoya en el sistema de color global del sitio.
   ============================================================ */

.hcar{
  --hcar-text:var(--ink-dim);
  --hcar-text-strong:var(--ink);
  --hcar-accent:var(--accent);
  --hcar-gap:1.25rem;
  --hcar-spacer:26vh;
  --hcar-radius:var(--radius);

  position:relative;
  color:var(--hcar-text);
  overflow:hidden;
}
.hcar *,.hcar *::before,.hcar *::after{box-sizing:border-box}

/* con JS en escritorio: la sección ocupa el viewport y se fija */
.hcar--enhanced{height:100vh;height:100dvh}

.hcar__pin{width:100%}
.hcar--enhanced .hcar__pin{height:100%;overflow:hidden}

/* --- track: la fila de columnas --- */
.hcar__track{
  display:flex;flex-direction:column;
  gap:clamp(3rem,8vw,6rem);
  padding:clamp(120px,15vh,170px) clamp(1.25rem,5vw,4rem) 4rem;
}
.hcar--enhanced .hcar__track{
  flex-direction:row;align-items:stretch;gap:0;
  width:max-content;height:100%;
  /* la fila arranca desplazada a la derecha */
  padding:13vh var(--hcar-gap) 2.5rem 72vw;
  will-change:transform;
}

/* --- columna (1 o 2 piezas apiladas) --- */
.hcar__col{display:flex;flex-direction:column;gap:var(--hcar-gap);flex:none}
.hcar--enhanced .hcar__col{height:100%;align-items:flex-start;justify-content:flex-start;gap:0}

/* --- hueco entre columnas (solo escritorio) --- */
.hcar__spacer{display:none}
.hcar--enhanced .hcar__spacer{display:block;flex:none;width:var(--hcar-spacer)}
.hcar--enhanced .hcar__spacer.is-half{width:calc(var(--hcar-spacer) * .5)}

/* --- pieza --- */
.hcar__item{position:relative;flex:none;max-width:var(--hcar-maxw,none)}
.hcar--enhanced .hcar__item{
  margin-top:var(--hcar-mt,0);
  margin-bottom:var(--hcar-mb,0);
  left:var(--hcar-left,0);
}
.hcar__item-layout{display:flex;flex-direction:column;gap:14px}

/* --- epígrafe con barrido --- */
.hcar__eyebrow{position:relative;display:inline-block;align-self:flex-start}
.hcar__eyebrow-text{
  display:block;font-family:var(--font-m);
  font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--hcar-text);
}
.hcar__eyebrow-bar{
  position:absolute;inset:0;background:var(--hcar-accent);
  transform:scaleX(0);transform-origin:right center;
}

/* --- tarjeta de caso clickeable (la clase comparte elemento con
   .hcar__item-layout, así el layout no cambia respecto al original) --- */
.hcar__link{
  color:inherit;text-decoration:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.hcar__link:focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:6px}
.hcar__link:hover .hcar__eyebrow-text,
.hcar__link:focus-visible .hcar__eyebrow-text{color:var(--hcar-text-strong)}

/* --- marco de imagen --- */
.hcar__frame{
  position:relative;display:flex;justify-content:flex-end;align-items:center;
  overflow:clip;border-radius:var(--hcar-radius);
  background:rgba(20,23,29,.10);
  width:100%;aspect-ratio:var(--hcar-ar,1);
  border:1px solid var(--line);
  transition:border-color .3s ease, box-shadow .3s ease;
}
.hcar__link:hover .hcar__frame,
.hcar__link:focus-visible .hcar__frame{
  border-color:var(--hcar-accent);
  box-shadow:0 14px 44px -16px rgba(106,153,221,.55);
}

/* --- indicador "Ver caso" --- */
.hcar__cta{
  position:absolute;left:0;bottom:0;z-index:2;
  display:inline-flex;align-items:center;gap:.5em;
  margin:12px;padding:7px 13px;border-radius:999px;
  font-family:var(--font-m);font-size:11px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
  color:#fff;background:rgba(13,16,22,.72);
  border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transform:translateY(8px);
  transition:opacity .3s ease, transform .3s ease;
  pointer-events:none;
}
.hcar__cta .ar{transition:transform .3s ease}
.hcar__link:hover .hcar__cta,
.hcar__link:focus-visible .hcar__cta{opacity:1;transform:translateY(0)}
.hcar__link:hover .hcar__cta .ar{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){
  .hcar__frame,.hcar__cta,.hcar__cta .ar{transition:none}
}
.hcar--enhanced .hcar__frame{width:var(--hcar-w);height:var(--hcar-h);aspect-ratio:auto}
/* la imagen es mayor que el marco: deja margen para el parallax */
.hcar__img{
  flex:none;width:calc(100% + 4rem);height:calc(100% + 4rem);
  max-width:none;object-fit:cover;display:block;pointer-events:none;
}

/* --- cita --- */
.hcar__item.is-quote .hcar__item-layout{gap:1.4rem}
.hcar__quote{
  margin:0;font-family:var(--font-d);font-weight:700;
  font-size:clamp(1.5rem,2vw,2.2rem);line-height:1.1;letter-spacing:-.02em;
  color:var(--hcar-text-strong);
}
.hcar__quote em{font-style:normal;color:var(--hcar-accent)}
.hcar__quote-by{
  font-family:var(--font-m);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--hcar-text);
}

/* --- columna de entrada (título de la sección) --- */
.hcar__intro{
  display:flex;flex-direction:column;justify-content:center;gap:18px;
  width:52vh;max-width:86vw;
}
.hcar--enhanced .hcar__intro{height:100%}
.hcar__intro .display{font-size:clamp(1.8rem,3vw,2.9rem);line-height:1.04;color:var(--hcar-text-strong)}
.hcar__intro-note{
  font-family:var(--font-m);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);
}

/* --- galería vertical en móvil / sin JS --- */
.hcar:not(.hcar--enhanced) .hcar__item{width:100%;max-width:min(30rem,100%);margin-inline:auto}
.hcar:not(.hcar--enhanced) .hcar__frame{width:100%;height:auto;aspect-ratio:var(--hcar-ar,4/3)}
.hcar:not(.hcar--enhanced) .hcar__quote{text-align:center}

/* ============================================================
   MÓVIL + TABLET (≤920px) — carrusel swipe horizontal nativo (scroll-snap).
   Con Lenis desactivado en móvil el scroll es nativo y el gesto
   "desliza →" es real y fluido. El carrusel desktop (.hcar--enhanced,
   ≥921px con JS, donde el sitio activa Lenis/cámara fija) no se toca.
   ============================================================ */
@media (max-width:920px){
  .hcar__track{
    flex-direction:row;flex-wrap:nowrap;align-items:stretch;
    gap:16px;
    padding:clamp(72px,11vh,108px) 16px 24px;
    overflow-x:auto;overflow-y:visible;
    scroll-snap-type:x mandatory;scroll-padding-left:16px;
    -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
    scrollbar-width:none;
  }
  .hcar__track::-webkit-scrollbar{display:none}
  .hcar__col{flex:0 0 auto;width:min(80vw,330px);scroll-snap-align:center;justify-content:flex-start}
  .hcar__intro{width:min(80vw,330px);max-width:none;justify-content:center;gap:14px}
  .hcar__spacer{display:none}
  /* anula la galería vertical centrada de arriba */
  .hcar:not(.hcar--enhanced) .hcar__item{width:100%;max-width:none;margin-inline:0}
  .hcar:not(.hcar--enhanced) .hcar__frame{width:100%;height:auto;aspect-ratio:var(--hcar-ar,4/3)}
  .hcar:not(.hcar--enhanced) .hcar__quote{text-align:left}
  /* imagen encajada al marco (sin desborde de parallax en móvil) */
  .hcar__img{width:100%;height:100%}
  /* sin hover en táctil: el indicador "Ver caso" se muestra siempre */
  .hcar__cta{opacity:1;transform:none;margin:10px;font-size:10px;padding:6px 11px}
}