/* Zoom al jersey (sección de ficha de producto). Mismo motor y estilos que la home. */
:root { --line: var(--linea); --radius: 8px; --ink: var(--petroleo); --ink-soft: #3E646E; --fs-label: .6875rem; --fs-display: clamp(2.5rem, 6.4vw, 5.75rem); --gutter: 20px; --sheet: 32px; }
@media (min-width: 760px) { :root { --gutter: 40px; } }
.single-product { --hh: 81px; }
@media (max-width: 759px) { .single-product { --hh: 98px; } }
.acc { color: var(--lima); }
/* 6. Zoom al jersey · Serie Headwind ----------------------------------------
   El jersey (recorte con fondo transparente) queda fijo sobre una retícula
   técnica y la cámara se acerca a cuatro zonas. Un visor muestra el
   acercamiento, un mapa marca dónde estás y una línea une la zona con su
   beneficio. */
.zoom { display: none; }
.zoom, .zoom-static { background: var(--white); color: var(--ink); }
.is-pin .zoom { display: block; height: 560svh; }
/* "Headwind" subrayado con un trazo lima, como marcatextos */
.ztitle .acc, .zs-title .acc { color: inherit; background: linear-gradient(var(--lima), var(--lima)) no-repeat 0 86% / 100% .28em; }
.zoom-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; --zt: 2.25rem; --st-top: calc(var(--hh) + var(--zt) + 28px); --st-bot: 236px; --st-mid: calc((var(--st-top) + 100svh - var(--st-bot)) / 2); }
.ztitle { position: absolute; left: var(--gutter); top: calc(var(--hh) + 10px); z-index: 4; font-weight: 700; font-size: var(--zt); line-height: 1; letter-spacing: -.035em; }
.stage { position: absolute; left: var(--gutter); right: var(--gutter); top: var(--st-top); bottom: var(--st-bot); overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(45,85,96,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(45,85,96,.12) 1px, transparent 1px); background-size: 48px 48px; background-position: center; }
.cam { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; will-change: transform; }
.cam img { width: 100%; height: 100%; object-fit: contain; }

/* visor */
.hud { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hud-zoom { position: absolute; left: 16px; top: 14px; display: flex; align-items: baseline; gap: 10px; font-size: var(--fs-label); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.hud-zoom b { padding: 1px 9px; border-radius: 999px; background: var(--lima); font-size: .875rem; font-weight: 500; letter-spacing: 0; color: var(--petroleo); text-align: center; font-variant-numeric: tabular-nums; min-width: 3.4ch; }
.vf { position: absolute; inset: 14%; opacity: 0; transform: scale(1.06); transition: opacity 450ms var(--ease-out), transform 650ms var(--ease-out); }
.zoom.is-zoomed .vf { opacity: 1; transform: none; }
.vf i { position: absolute; width: 26px; height: 26px; border: 0 solid var(--petroleo); }
.vf i:nth-child(1) { left: 0; top: 0; border-width: 1.5px 0 0 1.5px; }
.vf i:nth-child(2) { right: 0; top: 0; border-width: 1.5px 1.5px 0 0; }
.vf i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 1.5px 1.5px; }
.vf i:nth-child(4) { right: 0; bottom: 0; border-width: 0 1.5px 1.5px 0; }
.hot { position: absolute; z-index: 5; left: 50%; top: var(--st-mid); width: 0; height: 0; pointer-events: none; }
.ring { position: absolute; left: -15px; top: -15px; width: 30px; height: 30px; border: 1.5px solid var(--petroleo); border-radius: 50%; background: rgba(219,255,0,.75); opacity: 0; transform: scale(.4); transition: opacity 300ms ease, transform 500ms var(--ease-out); }
.ring::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: var(--petroleo); }
.ring::before { content: ""; position: absolute; inset: -1.5px; border: 1.5px solid var(--petroleo); border-radius: 50%; opacity: 0; }
.zoom.is-zoomed .ring { opacity: 1; transform: none; }
.zoom.is-zoomed .ring::before { animation: ping 2400ms var(--ease-out) 600ms infinite; }
@keyframes ping { 0% { opacity: .5; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(2.3); } }
.leader { position: absolute; left: 15px; top: -.5px; height: 1px; width: var(--leader, 200px); background: var(--petroleo); transform: scaleX(0); transform-origin: left; display: none; }
.leader::after { content: ""; position: absolute; right: -3px; top: -2.5px; width: 8px; height: 8px; margin-top: -1px; border-radius: 50%; background: var(--lima); box-shadow: 0 0 0 1.5px var(--petroleo); }
.zoom.is-zoomed .leader.on { transform: none; transition: transform 700ms var(--ease-out) 200ms; }
.mm { position: absolute; left: 14px; bottom: 14px; width: 72px; padding: 6px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,.95); }
.mm-in { position: relative; aspect-ratio: 932 / 986; }
.mm-in img { width: 100%; height: 100%; opacity: .7; }
.mm-rect { position: absolute; border: 1.5px solid var(--petroleo); border-radius: 2px; background: rgba(219,255,0,.4); }

/* ficha con el beneficio de cada zona */
.ficha { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 16px; height: 204px; display: flex; flex-direction: column; padding: 20px 22px 14px; background: var(--white); border: 1px solid var(--petroleo); border-radius: var(--radius); }
.caps { position: relative; flex: 1; }
.cap { position: absolute; inset: 0; visibility: hidden; opacity: 0; transition: opacity 250ms ease, visibility 0s linear 250ms; }
.cap.on { visibility: visible; opacity: 1; transition: opacity 250ms ease; }
.cap h3 { font-size: clamp(1.5rem, 5.6vw, 1.75rem); font-weight: 700; line-height: 1.08; letter-spacing: -.025em; }
.cap .lead { display: block; margin-top: 10px; font-size: 1.0625rem; font-weight: 500; line-height: 1.35; color: var(--ink); }
.cap .lead > .mk { background: linear-gradient(var(--lima), var(--lima)) no-repeat 0 88% / 0% .42em; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size 0s; }
.cap.on .lead > .mk { background-size: 100% .42em; transition: background-size 900ms var(--ease-out) 380ms; }
.cap .sub { display: none; margin-top: 10px; color: var(--ink-soft); line-height: 1.5; }
.cap .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.cap .w > span { display: inline-block; transform: translateY(105%); transition: transform 700ms var(--ease-out); transition-delay: calc(var(--k, 0) * 35ms + 80ms); }
.cap.on .w > span { transform: none; }
.dots { display: flex; gap: 4px; margin: 0 -6px; }
.dots button { position: relative; width: 40px; height: 28px; }
.dots button::before { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: var(--line); transition: background-color 300ms ease; }
.dots button.on::before { background: var(--petroleo); }
@media (hover: hover) and (pointer: fine) { .dots button:hover::before { background: var(--petroleo-500); } .dots button.on:hover::before { background: var(--petroleo); } }

@media (min-width: 760px) {
  .zoom-pin { --zt: clamp(2.75rem, 5.2vw, 4.75rem); --st-top: calc(var(--hh) + var(--zt) + 30px); --st-bot: 24px; --st-mid: calc((var(--st-top) + 100svh - var(--st-bot)) / 2); }
  .stage { right: auto; width: calc(64% - var(--gutter)); }
  .hot { left: calc(var(--gutter) + (64% - var(--gutter)) / 2); }
  .ficha { left: auto; right: var(--gutter); bottom: auto; top: var(--st-mid); transform: translateY(-50%); width: calc(36% - 2 * var(--gutter)); height: auto; min-height: 330px; padding: 30px 30px 18px; }
  .cap h3 { font-size: var(--fs-title); }
  .cap .lead { margin-top: 14px; font-size: var(--fs-lead); }
  .cap .sub { display: block; }
  .leader { display: block; }
  .mm { width: 104px; left: 16px; bottom: 16px; }
}

/* sin movimiento: cuatro tarjetas fijas */
.zoom-static { padding: 96px 0; }
.is-pin .zoom-static { display: none; }
.zs-title { font-size: var(--fs-display); font-weight: 700; line-height: 1; letter-spacing: -.035em; }
.zs-grid { display: grid; gap: 20px; margin-top: 40px; }
.zs-card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--white); }
.zs-crop { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-bottom: 1px solid var(--line); background: var(--white); }
.zs-crop img { position: absolute; max-width: none; width: calc(var(--zs) * 100%); left: calc(50% - var(--ox) * var(--zs) * 100%); top: calc(50% - var(--oy) * var(--zs) * 141.1%); }
.zs-card div { padding: 20px 22px 24px; }
.zs-card h3 { font-size: 1.375rem; line-height: 1.15; letter-spacing: -.02em; }
.zs-card p { margin-top: 6px; font-weight: 500; }
@media (min-width: 760px) { .zs-grid { grid-template-columns: repeat(2, 1fr); } .zoom-static { padding: 140px 0; } }