/* =========================================================================
   JERSEYPRO · Inicio
   ========================================================================= */

/* ---------- Portada: corte diagonal 26/27 | Retro ---------- */
.hero {
  position: relative;
  height: calc(100svh - var(--header-h) - var(--ribbon-h));
  min-height: 600px;
  max-height: 1100px;
  margin-top: 0;
  overflow: hidden;
  isolation: isolate;
}
.hero__panes { position: absolute; inset: 0; }
.hero__pane {
  position: absolute; inset: 0;
  display: block;
  background: var(--field-night);
  --cx: 30%;
  --cy: 50%;
}
.hero__pane--a { background: var(--field-night); }
.hero__pane--b {
  background: var(--field-pitch);
  --cx: 72%;
  clip-path: polygon(var(--d1, 58%) 0, 100% 0, 100% 100%, var(--d2, 44%) 100%);
  transition: clip-path 0.9s var(--ease-out);
}
.hero__pane > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__pane--a > img { object-position: 25% 30%; width: 62%; }
.hero__pane--b > img { object-position: 70% 30%; left: auto; right: 0; width: 62%; }
.hero__pane .closeup {
  position: absolute;
  height: 170%; width: auto; max-width: none;
  left: var(--cx); top: var(--cy);
  transform: translate(-50%, -47%) scale(var(--zoom, 1));
  transition: transform 1.4s var(--ease-out);
}
.hero__pane:hover .closeup { --zoom: 1.04; }
.hero__pane::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(8, 8, 7, 0.28); pointer-events: none; }
.hero__label {
  position: absolute; top: clamp(18px, 3vw, 36px); z-index: 2;
  display: grid; gap: 2px;
  padding: 12px 18px; border-radius: 16px;
  background: rgba(11, 11, 10, 0.78);
  font-size: 0.9375rem; color: var(--ink-2);
  transition: background-color 0.3s, color 0.3s;
}
.hero__label b { color: var(--ink); font-size: 1.0625rem; }
.hero__pane--a .hero__label { left: var(--gutter); }
.hero__pane--b .hero__label { right: var(--gutter); text-align: right; }
.hero__pane:hover .hero__label { background: var(--ink); color: #3a3934; }
.hero__pane:hover .hero__label b { color: var(--bg); }

.hero__copy {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  max-width: none;
  padding-bottom: clamp(24px, 4vw, 56px);
  pointer-events: none;
}
.hero__copy::before {
  content: ""; position: absolute; inset: -40% 0 0; z-index: -1;
  background: linear-gradient(to top, rgba(8, 8, 7, 0.92) 30%, rgba(8, 8, 7, 0));
}
.hero__copy a, .hero__copy button { pointer-events: auto; }
.hero__title { font-size: clamp(2.7rem, 0.6rem + 7.4vw, 10rem); line-height: 0.88; }
.hero__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px 40px; margin-top: clamp(16px, 2.4vw, 32px); }
.hero__row .lead { max-width: 34ch; }
.hero__ctas { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 760px) {
  .hero { height: auto; min-height: calc(100svh - var(--header-h) - var(--ribbon-h)); max-height: none; display: flex; flex-direction: column; }
  .hero__panes { position: relative; inset: auto; height: 46svh; min-height: 300px; flex: none; }
  .hero__pane { --cx: 28%; --cy: 50%; }
  .hero__pane--b { --cx: 74%; clip-path: polygon(var(--d1, 62%) 0, 100% 0, 100% 100%, var(--d2, 38%) 100%); }
  .hero__pane .closeup { height: 135%; }
  .hero__pane--a > img, .hero__pane--b > img { width: 100%; }
  .hero__label { top: auto; bottom: 16px; padding: 10px 14px; }
  .hero__copy { position: relative; padding-top: 20px; padding-bottom: 28px; }
  .hero__title { font-size: clamp(2.5rem, 11.4vw, 4rem); }
  .hero__row { margin-top: 14px; }
  .hero__copy::before { display: none; }
  .hero__ctas { width: 100%; }
  .hero__ctas .btn { flex: 1; }
}

/* ---------- Destacados ---------- */
.featured__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: clamp(28px, 4vw, 56px); }
.featured__tools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.rail-nav { display: flex; gap: 8px; }
.rail {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: clamp(250px, 23vw, 360px);
  gap: clamp(14px, 1.6vw, 24px);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  padding-inline: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  padding-bottom: 8px;
  scrollbar-width: none;
  cursor: grab;
}
.rail::-webkit-scrollbar { display: none; }
.rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.rail.is-dragging .card { pointer-events: none; }
.rail > * { scroll-snap-align: start; }
.rail .card { animation: railIn 0.7s var(--ease-out) both; animation-delay: calc(var(--n, 0) * 50ms); }
@keyframes railIn { from { opacity: 0; transform: translateX(40px); } }
.featured__foot { margin-top: 28px; }

/* ---------- Texto con jerseys encima ---------- */
.statement { position: relative; padding-block: clamp(100px, 14vw, 220px); overflow: hidden; background: var(--bone); color: var(--bone-ink); }
.statement__text {
  position: relative; z-index: 1;
  padding-inline: var(--gutter);
  font-size: clamp(2.6rem, 0.2rem + 9.6vw, 14rem);
  line-height: 0.86;
  text-align: center;
}
.statement__floats { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.float { position: absolute; width: clamp(160px, 22vw, 380px); filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.25)); will-change: transform; }
.float.f1 { left: 4%; top: 26%; }
.float.f2 { right: 3%; top: 8%; width: clamp(150px, 19vw, 320px); }
.float.f3 { left: 40%; top: 66%; width: clamp(130px, 15vw, 260px); }
.statement__foot { position: relative; z-index: 3; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px 32px; margin-top: clamp(40px, 6vw, 90px); text-align: center; }
.statement__foot .lead { color: var(--bone-ink); }
.statement .btn--light { --btn-bg: var(--bone-ink); --btn-ink: var(--bone); }
.statement .btn--light:hover { --btn-bg: #000; }
@media (max-width: 760px) {
  .float.f1 { left: -8%; top: 30%; }
  .float.f2 { right: -10%; top: 4%; }
  .float.f3 { left: 52%; top: 58%; }
}

/* ---------- Pasos con verbo fijo ---------- */
.steps { position: relative; }
.step {
  position: relative;
  min-height: 170svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  padding: 22svh var(--gutter) clamp(28px, 5vw, 64px);
  background: var(--bg);
}
.step[data-field="pitch"] { background: var(--field-pitch); }
.step[data-field="bg2"] { background: var(--bg-2); }
.step[data-field="night"] { background: var(--field-night); }
.step__bg { position: absolute; inset: 0; overflow: clip; background: transparent; pointer-events: none; }
.step__bg > img { position: sticky; top: 0; width: 100%; height: 100svh; object-fit: cover; }
.step__bg::after { content: ""; position: absolute; inset: 0; background: rgba(8, 8, 7, 0.5); }
.step__bg.is-missing::after { display: none; }
.step > .step__verb, .step > .step__card { position: relative; z-index: 1; }
.step > .step__verb { position: sticky; }
.step > .step__card { position: sticky; }
.step__verb {
  position: sticky; top: calc(50svh - 0.5em);
  align-self: start;
  text-align: center;
  font-size: clamp(3rem, 0.4rem + 15vw, 19rem);
  line-height: 0.8;
  color: var(--ink);
  pointer-events: none;
}
.step__card {
  position: sticky; bottom: clamp(20px, 4vw, 48px);
  z-index: 2;
  align-self: end;
  justify-self: start;
  width: min(440px, 100%);
  margin-top: 60svh;
  padding: 26px;
  border-radius: var(--radius);
  background: var(--bg-3);
  display: grid; gap: 14px;
}
.step:nth-child(even) .step__card { justify-self: end; }
.step__card p { color: var(--ink-2); }
.step__thumbs { display: flex; gap: 8px; }
.step__thumbs .tile { width: 33%; aspect-ratio: 1; border-radius: 12px; }
.step__sizes { pointer-events: none; }
.wa-bubble { background: #1f3b2c; color: #e9f3ec; border-radius: 16px 16px 16px 4px; padding: 14px 16px 10px; display: grid; gap: 10px; font-size: 0.9375rem; line-height: 1.4; }
.wa-bubble p { color: inherit !important; }
.wa-bubble span { justify-self: end; font-size: 12px; opacity: 0.6; }
.step .btn { justify-self: start; }

/* ---------- Semana de promos ---------- */
.week__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.week__copy { display: grid; gap: 22px; }
.week__now { font-size: 1.125rem; font-weight: 600; }
.week__now b { color: var(--volt); }
.week__days { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 8px; align-items: end; height: clamp(300px, 32vw, 440px); }
.week__days li {
  position: relative;
  height: var(--h, 62%);
  border-radius: 16px;
  background: var(--bg-3);
  display: flex; flex-direction: column; justify-content: space-between; align-items: center;
  padding: 14px 4px;
  text-align: center;
  transition: height 1s var(--ease-out), background-color 0.3s;
}
.week__days li span { font-size: 0.875rem; color: var(--ink-2); }
.week__days li b { font-variation-settings: "wdth" 150; font-weight: 800; font-size: clamp(0.8rem, 0.5rem + 0.8vw, 1.25rem); line-height: 1.05; padding-inline: 6px; }
.week__days li.is-thu { background: var(--volt); color: var(--volt-ink); }
.week__days li.is-thu span { color: var(--volt-ink); }
.week__days li.is-thu b { font-size: clamp(1.2rem, 0.6rem + 1.8vw, 2.6rem); }
.week__days li.is-today::before {
  content: "Hoy"; position: absolute; top: -34px; left: 50%; transform: translateX(-50%);
  padding: 3px 10px; border-radius: 999px; background: var(--ink); color: var(--bg);
  font-size: 13px; font-weight: 700;
}
.week__days:not(.is-in) li { height: 8%; }
@media (max-width: 860px) {
  .week__grid { grid-template-columns: minmax(0, 1fr); }
  .week__days li.is-thu b { font-size: 1.15rem; }
  .week__days li b { font-size: 0.8125rem; }
  .week__days { height: 280px; gap: 5px; margin-top: 30px; }
  .week__days li { border-radius: 12px; }
}

/* ---------- Versiones ---------- */
.versions__grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(24px, 3vw, 40px); }
.versions__head { grid-column: 1 / span 3; display: grid; gap: 20px; align-content: start; position: sticky; top: calc(var(--header-h) + 24px); }
.versions__head .h2 { font-size: clamp(2.4rem, 1rem + 3.6vw, 4.6rem); }
.versions__tiles { grid-column: 4 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.versions__tiles li.is-wide { grid-column: span 2; }
.versions__tiles a { display: grid; gap: 6px; }
.versions__tiles .tile { aspect-ratio: 4 / 5; }
.versions__tiles .is-wide .tile { aspect-ratio: auto; height: 100%; min-height: 0; }
.versions__tiles .is-wide a { grid-template-rows: 1fr auto auto; height: 100%; }
.versions__tiles .is-wide .slot__fallback img { width: 50%; inset: 8% auto 4% 2%; }
.versions__tiles .is-wide .slot__fallback img + img { left: auto; right: 2%; }
.versions__tiles b { font-size: 1.25rem; margin-top: 8px; }
.versions__tiles span:not(.tile) { color: var(--ink-2); font-size: 0.9375rem; }
@media (hover: hover) {
  .versions__tiles a:hover .slot__fallback img { transform: scale(1.06) rotate(-1.5deg); }
  .versions__tiles a:hover .tile--photo > img { transform: scale(1.05); }
}
@media (max-width: 1180px) {
  .versions__head, .versions__tiles { grid-column: 1 / -1; position: static; }
  .versions__head { max-width: 640px; }
}
@media (max-width: 760px) {
  .versions__tiles { grid-template-columns: 1fr 1fr; }
  .versions__tiles li.is-wide { grid-column: 1 / -1; }
  .versions__tiles .is-wide .tile { aspect-ratio: 8 / 5; }
}

/* ---------- Banda lifestyle ---------- */
.life { position: relative; height: 100svh; max-height: 1000px; min-height: 520px; background: var(--field-clay); display: block; }
.life > video { position: absolute; inset: 0; }
.life .life__still { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; left: 0; top: 0; transform: none; object-fit: cover; }
.life .closeup { position: absolute; height: 190%; width: auto; max-width: none; left: 66%; top: 50%; transform: translate(-50%, -46%); }
.life::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(8, 8, 7, 0.35); }
.life__copy { position: absolute; left: 0; right: 0; bottom: clamp(32px, 6vw, 80px); z-index: 2; }
.life__text { font-size: clamp(2.6rem, 0.8rem + 6vw, 8rem); line-height: 0.9; max-width: 11ch; }

/* ---------- Reseñas (inicio) ---------- */
.reviews-home__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: clamp(32px, 4vw, 56px); }
.rv-mini { display: flex; align-items: center; gap: 10px; font-size: 1.125rem; }
.rv-mini[hidden] { display: none; }
.rv-mini b { font-size: 1.6rem; font-weight: 800; }
.reviews-home__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.review-card:nth-child(3n + 2) { transform: translateY(40px); }
.reviews-empty { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: center; background: var(--bg-2); border-radius: var(--radius); padding: clamp(28px, 4vw, 56px); }
.reviews-empty p.h3 { max-width: 22ch; }
@media (max-width: 860px) {
  .reviews-home__list { grid-template-columns: 1fr; }
  .review-card:nth-child(3n + 2) { transform: none; }
  .reviews-empty { grid-template-columns: 1fr; }
}

/* ---------- Mayoreo (inicio) ---------- */
.team__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 6vw, 100px); align-items: center; }
.team__media { aspect-ratio: 5 / 4; border-radius: var(--radius); background: var(--field-olive); }
.team__fallback { display: none; }
.slot.is-missing .team__fallback { display: flex; align-items: center; justify-content: center; }
.team__fallback img { position: relative; width: 44%; left: auto; top: auto; transform: none; margin-inline: -7%; }
.team__fallback img:nth-child(2) { z-index: 1; width: 50%; }
.team__copy { display: grid; gap: 24px; justify-items: start; }
.team__copy .h2 { font-size: clamp(2.4rem, 1rem + 4vw, 5.4rem); }
.team__cats { display: flex; flex-wrap: wrap; gap: 8px; }
.team__cats li { padding: 10px 16px; border-radius: 999px; background: var(--bg-3); font-weight: 500; }
@media (max-width: 860px) { .team__grid { grid-template-columns: 1fr; } }

/* ---------- Cierre ---------- */
.closer { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); min-height: 90svh; background: var(--field-pitch); overflow: hidden; }
.closer__media { grid-column: 1 / span 8; position: relative; }
.closer__media img { position: absolute; width: 125%; max-width: none; left: -14%; bottom: -24%; }
.closer__copy { grid-column: 9 / span 4; align-self: center; display: grid; gap: 20px; justify-items: start; padding: 60px var(--gutter) 60px 0; position: relative; z-index: 2; }
.closer__copy .h2 { font-size: clamp(2.4rem, 1rem + 3.4vw, 4.6rem); }
.closer__price { font-size: 1.5rem; font-weight: 800; }
@media (max-width: 860px) {
  .closer { grid-template-columns: 1fr; min-height: 0; }
  .closer__copy { grid-column: 1; order: -1; padding: 80px var(--gutter) 0; }
  .closer__media { grid-column: 1; height: 62svh; }
  .closer__media img { width: 135%; left: -18%; bottom: -30%; }
}

/* ---------- Destacados (banner / carrusel) ---------- */
.feature { position: relative; height: min(84svh, 900px); min-height: 520px; overflow: hidden; background: var(--bg-2); isolation: isolate; }
.feature__track { position: absolute; inset: 0; }
.slide {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end;
  background: var(--slide-bg, var(--field-night));
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  transition: clip-path 1.1s var(--ease-in-out);
  visibility: hidden;
}
.slide.is-active { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); visibility: visible; z-index: 2; }
.slide.is-leaving { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); visibility: visible; z-index: 1; }
.slide__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 6s linear; }
.slide.is-active .slide__bg { transform: scale(1); }
.slide__bg + .slide__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 8, 7, 0.85) 0%, rgba(8, 8, 7, 0.4) 55%, rgba(8, 8, 7, 0.1) 100%); }
.slide__ghost {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-58%);
  font-variation-settings: "wdth" 150; font-weight: 800; text-transform: uppercase;
  font-size: clamp(5rem, 16vw, 19rem); line-height: 0.82; white-space: nowrap; text-align: center;
  color: rgba(255, 255, 255, 0.05); pointer-events: none;
}
.slide__product { position: absolute; right: 2%; bottom: -6%; height: 104%; width: 52%; object-fit: contain; transform: translateY(40px) rotate(3deg); opacity: 0; transition: transform 1.2s var(--ease-out) 0.25s, opacity 0.8s 0.25s; }
.slide.is-active .slide__product { transform: none; opacity: 1; }
.slide__copy { position: relative; z-index: 2; display: grid; gap: 18px; justify-items: start; padding: 0 var(--gutter) clamp(84px, 9vw, 120px); max-width: 780px; }
.slide__copy > * { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease-out), transform 0.9s var(--ease-out); }
.slide.is-active .slide__copy > * { opacity: 1; transform: none; }
.slide.is-active .slide__copy > :nth-child(2) { transition-delay: 0.35s; }
.slide.is-active .slide__copy > :nth-child(3) { transition-delay: 0.45s; }
.slide.is-active .slide__copy > :nth-child(4) { transition-delay: 0.55s; }
.slide.is-active .slide__copy > :nth-child(5) { transition-delay: 0.65s; }
.slide.is-active .slide__copy > :nth-child(1) { transition-delay: 0.25s; }
.slide__title { font-size: clamp(2.4rem, 0.6rem + 4.6vw, 6.2rem); line-height: 0.88; }
.slide__price { font-weight: 700; font-size: 1.125rem; }
.slide__price span { color: var(--ink-2); font-weight: 500; }
.slide__ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.feature__nav { position: absolute; left: 0; right: 0; bottom: clamp(20px, 3vw, 36px); z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.feature__dots { display: flex; gap: 6px; }
.feature__dots button { width: 44px; height: 24px; display: grid; align-items: center; }
.feature__dots button span { display: block; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.25); overflow: hidden; }
.feature__dots button span i { display: block; height: 100%; width: 0; background: var(--ink); }
.feature__dots button[aria-selected="true"] span i { animation: dotFill var(--slide-time, 6s) linear forwards; }
.feature.is-paused .feature__dots button[aria-selected="true"] span i { animation-play-state: paused; }
@keyframes dotFill { to { width: 100%; } }
.feature__arrows { display: flex; gap: 8px; }
.feature__arrows .icon-btn { background: rgba(11, 11, 10, 0.7); }
@media (max-width: 760px) {
  .feature { height: auto; min-height: 0; }
  .feature__track { position: relative; display: grid; }
  .slide { position: relative; grid-area: 1 / 1; grid-template-columns: 1fr; min-height: 78svh; align-items: end; }
  .slide__product { width: 92%; height: 58%; right: 4%; top: 4%; bottom: auto; }
  .slide__copy { padding-bottom: 84px; }
  .slide__bg + .slide__scrim { background: linear-gradient(0deg, rgba(8, 8, 7, 0.92) 25%, rgba(8, 8, 7, 0.2) 70%); }
}