/* ============================================================
   PELTIER GROUP — experience.css
   Capa experiencial: scroll suave, tipo cinética, showcase
   horizontal pinneado, cursor reactivo, botones magnéticos.
   ============================================================ */

/* Lenis smooth scroll */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ------------------------------------------------------------
   KINETIC TYPE — word-by-word reveal
------------------------------------------------------------ */
.kw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .04em; }
.kw > span {
  display: inline-block;
  transform: translateY(115%);
  transition: transform .85s var(--ease-out);
  will-change: transform;
}
.reveal.in .kw > span,
.kinetic.in .kw > span { transform: translateY(0); }
.kw > span.em { color: var(--accent); }
.kw > span.muted { color: var(--text-3); }
.kw > span.out { color: color-mix(in srgb, var(--accent-ink) 42%, var(--accent)); }
@media (prefers-reduced-motion: reduce){ .kw > span { transform: none !important; } }

/* ------------------------------------------------------------
   CURSOR — reactive "VER" disc over case media
------------------------------------------------------------ */
.cursor-ver {
  position: fixed; top: 0; left: 0; z-index: 240;
  width: 92px; height: 92px; margin: -46px 0 0 -46px;
  border-radius: 50%; background: var(--accent); color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600;
  transform: scale(0); opacity: 0;
  transition: transform .28s var(--ease-out), opacity .2s var(--ease);
  pointer-events: none; will-change: transform;
}
.cursor-ver.show { transform: scale(1); opacity: 1; }
@media (pointer: coarse){ .cursor-ver { display: none; } }
@media (max-width: 1024px){ .cursor-ver { display: none !important; } }

/* magnetic buttons sit a touch smoother */
.btn { will-change: transform; }

/* ------------------------------------------------------------
   HORIZONTAL PINNED SHOWCASE — "Destacados"
------------------------------------------------------------ */
.hshow { position: relative; background: var(--bg-3); border-top: 1px solid var(--line-2); padding: clamp(72px, 9vw, 130px) 0; overflow: hidden; }
.hshow-sticky { position: relative; }
.hshow-bar {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  padding: 0 var(--gutter) clamp(28px, 4vw, 48px);
}
.hshow-bar .kicker { color: var(--accent); }
.hshow-nav { display: flex; align-items: center; gap: 22px; }
.hshow-count { font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); display: flex; align-items: center; gap: 14px; }
.hint-touch { display: none; }
@media (pointer: coarse){ .hint-desktop { display: none; } .hint-touch { display: inline; } }
.hshow-prog { width: 110px; height: 2px; background: var(--line); position: relative; overflow: hidden; }
.hshow-prog span { position: absolute; inset: 0; width: 100%; background: var(--accent); transform: scaleX(.05); transform-origin: left; transition: transform .12s linear; }
.hshow-arrows { display: flex; gap: 8px; }
.hshow-arrow { width: 50px; height: 50px; border: 1.5px solid rgba(244,241,234,.28); color: var(--text); display: flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1; transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), opacity .2s var(--ease); }
.hshow-arrow:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.hshow-arrow[disabled] { opacity: .28; pointer-events: none; }

.hshow-track {
  display: flex; gap: clamp(16px, 2vw, 30px); align-items: stretch;
  padding: 0 var(--gutter);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; cursor: grab;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.hshow-track::-webkit-scrollbar { display: none; }
.hshow-track.dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }
.hshow-track.dragging .hpanel { pointer-events: none; }

.hpanel { position: relative; flex: 0 0 auto; width: min(72vw, 620px); height: min(60svh, 500px); overflow: hidden; background: var(--bg-2); isolation: isolate; scroll-snap-align: start; }
.hpanel-bg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; transform: scale(1.05); transition: transform 1s var(--ease-out); }
.hpanel:hover .hpanel-bg { transform: scale(1.1); }
.hpanel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(7,7,7,.9) 4%, rgba(7,7,7,.25) 55%, transparent 100%); }
/* gold curtain reveal */
.hpanel-curtain { position: absolute; inset: 0; z-index: 4; background: var(--accent); transform: scaleX(1); transform-origin: right; transition: transform .8s var(--ease-out); }
.hshow.in .hpanel-curtain { transform: scaleX(0); }
.hshow.in .hpanel:nth-child(2) .hpanel-curtain { transition-delay: .08s; }
.hshow.in .hpanel:nth-child(3) .hpanel-curtain { transition-delay: .16s; }
.hshow.in .hpanel:nth-child(4) .hpanel-curtain { transition-delay: .24s; }
.hshow.in .hpanel:nth-child(5) .hpanel-curtain { transition-delay: .32s; }
.hshow.in .hpanel:nth-child(6) .hpanel-curtain { transition-delay: .40s; }

.hpanel-content { position: absolute; inset: auto 0 0 0; z-index: 2; padding: clamp(28px, 4vw, 52px); }
.hpanel-meta { font-family: var(--f-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.hpanel-meta .sep { width: 18px; height: 1px; background: var(--accent); }
.hpanel-title { font-family: var(--f-display); font-weight: 700; font-size: clamp(28px, 3.2vw, 56px); line-height: .9; letter-spacing: -0.03em; color: var(--text); text-wrap: balance; max-width: 16ch; }
body[data-display="Anton"] .hpanel-title { letter-spacing: .015em; font-weight: 400; line-height: 1; }
.hpanel-sub { color: var(--text); opacity: .82; font-size: clamp(14px, 1.1vw, 16px); margin-top: 14px; max-width: 46ch; line-height: 1.5; }
.hpanel-idx { position: absolute; top: clamp(20px,2.5vw,30px); left: clamp(20px,2.5vw,30px); z-index: 2; font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; color: var(--text); opacity: .7; }
.hpanel-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text); border-bottom: 1.5px solid var(--accent); padding-bottom: 6px; }
.hpanel-cta .arr { color: var(--accent); transition: transform .25s var(--ease); }
.hpanel:hover .hpanel-cta .arr { transform: translateX(5px); }

@media (max-width: 720px){
  .hpanel { width: 84vw; height: 56svh; }
  .hshow-arrows { display: none; }
  .hshow-bar { flex-direction: column; align-items: flex-start; gap: 14px; }
}