/* =========================================================
   Recomendados · variante «abanico» (?r=abanico)
   Seis copias en papel crema abiertas en abanico alrededor de un
   eje muy por debajo; el pie (número, nombre y precio) se encaja
   debajo, en el hueco del arco. En <1024 el abanico es una rueda
   que se gira con el dedo. recs-abanico.js pone la geometría.
   Todo va bajo html[data-recs="abanico"]: las otras variantes no se ven afectadas.
   ========================================================= */
html[data-recs="abanico"] .recs__head { margin-bottom: clamp(24px, 2.8vw, 44px); }
html[data-recs="abanico"] .recs .more { margin-top: clamp(40px, 4vw, 60px); }

html[data-recs="abanico"] .ab {
  --cw: clamp(200px, 19vw, 300px);                    /* ancho de cada copia */
  --ch: calc(var(--cw) * 1.25);                       /* 4:5 */
  --bd: clamp(7px, calc(var(--cw) * .034), 11px);     /* margen de papel */
  position: relative; isolation: isolate;
}
/* Luz de lámpara sobre la mesa: casi nada, pero asienta las copias y deja leer sus sombras.
   Va en .ab y no en la rueda, que recorta (en móvil es un carrusel) */
html[data-recs="abanico"] .ab::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: calc(var(--t, 0px) + var(--ch) * .62);
  width: calc(var(--cw) * 4.6); max-width: 100vw; height: calc(var(--ch) * 2.1);
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(245, 244, 235, .075), rgba(245, 244, 235, .03) 55%, rgba(245, 244, 235, 0));
  opacity: 0;
  transition: opacity var(--morph) var(--ease-glide);
}
html[data-recs="abanico"] .ab__wheel,
html[data-recs="abanico"] .ab__track,
html[data-recs="abanico"] .ab__sticky { position: relative; }
html[data-recs="abanico"] .ab__snap { display: none; }

/* El abanico: las copias se colocan respecto a él (el li no tiene caja propia) */
html[data-recs="abanico"] .ab__fan { position: relative; height: calc(var(--ch) * 1.5); isolation: isolate; }
html[data-recs="abanico"] .ab__item { display: block; }

html[data-recs="abanico"] .ab__card {
  position: absolute; left: 50%; top: var(--t, calc(var(--ch) * .1)); z-index: 1;
  display: block; width: var(--cw); height: var(--ch); margin-left: calc(var(--cw) / -2);
  border-radius: 2px;
  /* Sombra fina de papel, la de los dos modos (sobre crema es la única) */
  box-shadow: 0 1px 1px rgba(11, 11, 10, .14), 0 4px 12px -5px rgba(11, 11, 10, .22);
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none; user-select: none;
}
/* La copia de debajo solo se ve mientras su enlace sube delante (fundido sin saltos) */
html[data-recs="abanico"] .ab__under { pointer-events: none; visibility: hidden; }
html[data-recs="abanico"] .ab__item.is-front .ab__under { visibility: visible; }
html[data-recs="abanico"] .ab__link:focus-visible { outline-offset: 6px; } /* el color, el del anillo global (sigue al modo) */
/* La copia sacada guarda su sitio de antes bajo el puntero: no parpadea al subir ni al enderezarse */
html[data-recs="abanico"] .ab__link.is-on::after {
  content: ""; position: absolute; left: -7%; right: -7%; top: 0;
  bottom: calc(-1 * var(--pull, 0px) - var(--ch) * .1);
}

/* Sombras de noche: la del montón y la larga de la copia que se saca de la mano. Plenas solo
   con html[data-mode="dark"]; sobre crema se apagan por opacidad, con el tiempo de la página */
html[data-recs="abanico"] .ab__shade {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow:
    0 1px 1px rgba(0, 0, 0, .32),
    0 8px 16px -6px rgba(0, 0, 0, .45),
    0 28px 52px -22px rgba(0, 0, 0, .7);
  opacity: 0;
  transition: opacity var(--morph) var(--ease-glide);
}
html[data-recs="abanico"][data-mode="dark"] .ab::before,
html[data-recs="abanico"][data-mode="dark"] .ab__shade { opacity: 1; }
html[data-recs="abanico"].mode-now .ab::before,
html[data-recs="abanico"].mode-now .ab__shade { transition: none; }
html[data-recs="abanico"] .ab__lift {
  position: absolute; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none;
  box-shadow: 0 40px 80px -24px rgba(0, 0, 0, .85), 0 16px 30px -12px rgba(0, 0, 0, .5);
}
/* …y la de papel de la copia sacada, que vale en los dos modos */
html[data-recs="abanico"] .ab__lift--soft {
  box-shadow: 0 22px 40px -18px rgba(11, 11, 10, .3), 0 8px 16px -8px rgba(11, 11, 10, .18);
}

/* La copia: foto sobre papel crema, con su margen fino */
html[data-recs="abanico"] .ab__print {
  position: absolute; inset: 0; overflow: hidden; border-radius: inherit;
  padding: var(--bd);
  background: linear-gradient(158deg, #FAF9F2 0%, var(--paper) 38%, #E6E3D4 100%);
}
html[data-recs="abanico"] .ab__photo {
  position: relative; display: block; height: 100%; overflow: hidden;
  background: var(--night-3);
}
html[data-recs="abanico"] .ab__photo img { width: 100%; height: 100%; object-fit: cover; }
html[data-recs="abanico"] .ab__photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(11, 11, 10, .08);
}
/* El velo de las que no se señalan es el fondo de la página: de noche se apagan, sobre crema se desvanecen */
html[data-recs="abanico"] .ab__veil {
  position: absolute; inset: 0; background: var(--bg); opacity: 0; pointer-events: none;
}

/* ---------- Pie: número, nombre y precio, centrados bajo el abanico ---------- */
html[data-recs="abanico"] .ab__cap {
  position: relative; z-index: 2;
  display: grid; justify-items: center;
  text-align: center; pointer-events: none;
}
html[data-recs="abanico"] .ab__line {
  grid-area: 1 / 1;
  display: flex; flex-direction: column; align-items: center;
  max-width: 100%;
}
html[data-recs="abanico"] .ab__num {
  margin-bottom: 14px; padding-left: .26em;
  font-size: .66rem; font-weight: 500; line-height: 1; letter-spacing: .26em;
  color: var(--gold);
}
html[data-recs="abanico"] .ab__name {
  font-family: var(--display); font-weight: var(--dw);
  font-size: calc(clamp(1.6rem, 1rem + 1.2vw, 2.4rem) * var(--ds));
  line-height: 1.1; letter-spacing: var(--dt);
  color: var(--fg);
  text-wrap: balance;
}
html[data-recs="abanico"] .ab__price {
  margin-top: 14px; padding-left: .22em;
  font-size: .7rem; font-weight: 500; line-height: 1.4; letter-spacing: .22em;
  color: var(--fg-2);
}

/* El pie cambia con un fundido lento y las palabras suben una a una */
html[data-recs="abanico"] .ab__num,
html[data-recs="abanico"] .ab__w,
html[data-recs="abanico"] .ab__price {
  display: inline-block; opacity: 0; transform: translate3d(0, .75rem, 0);
  transition: opacity .4s var(--ease-out), transform .7s var(--ease-out);
}
html[data-recs="abanico"] .ab__line.is-out .ab__num,
html[data-recs="abanico"] .ab__line.is-out .ab__w,
html[data-recs="abanico"] .ab__line.is-out .ab__price { transform: translate3d(0, -.45rem, 0); }
html[data-recs="abanico"] .ab__line.is-on .ab__num,
html[data-recs="abanico"] .ab__line.is-on .ab__w,
html[data-recs="abanico"] .ab__line.is-on .ab__price {
  opacity: 1; transform: none;
  transition: opacity 1.2s var(--ease-out), transform 1.7s var(--ease-out);
}
html[data-recs="abanico"] .ab__line.is-on .ab__num { transition-delay: .18s; }
html[data-recs="abanico"] .ab__line.is-on .ab__w { transition-delay: calc(.26s + var(--k) * 75ms); }
html[data-recs="abanico"] .ab__line.is-on .ab__price { transition-delay: .55s; }
html[data-recs="abanico"] .ab__line.is-reset * { transition: none !important; }

/* ---------- Móvil y tableta: la rueda (carrusel nativo con snap) ---------- */
@media (max-width: 1023px) {
  html[data-recs="abanico"] .ab {
    --cw: min(68vw, 400px);
    margin-inline: calc(-1 * var(--pad));
  }
  html[data-recs="abanico"] .ab__wheel {
    overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  html[data-recs="abanico"] .ab__wheel::-webkit-scrollbar { display: none; }
  html[data-recs="abanico"] .ab__track { display: flex; }
  html[data-recs="abanico"] .ab__sticky { position: sticky; left: 0; flex: none; }
  html[data-recs="abanico"] .ab__snap {
    display: block; position: absolute; top: 0; width: 1px; height: 1px;
    scroll-snap-align: start;
  }
  html[data-recs="abanico"] .ab__cap { padding-inline: var(--pad); }
}
@media (max-width: 767px) {
  html[data-recs="abanico"] .ab__name { max-width: 13em; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-recs="abanico"] .ab__num,
  html[data-recs="abanico"] .ab__w,
  html[data-recs="abanico"] .ab__price { transform: none !important; }
}