/* =========================================================
   Recomendados · variante «soportales» (?r=soportales)
   Todo va bajo html[data-recs="soportales"]: las otras variantes no se ven afectadas.
   Seis arcos de medio punto en fila, como los soportales de una plaza: cada
   hueco se abre a una casa y la foto, más grande que el hueco, queda detrás
   del muro. En reposo se ve desde la sombra; al señalar un arco, se sale a la luz.
   Por debajo de 1024 px, carrusel nativo con imán: el arco que llega se ilumina.
   ========================================================= */
html[data-recs="soportales"] .sp {
  --sp-gap: clamp(14px, 1.4vw, 24px);
  --sp-tone: .28;   /* la sombra apaga un poco el color; la luz lo devuelve */
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr));
  column-gap: var(--sp-gap);
}
html[data-recs="soportales"] .sp__link { display: block; outline: none; }

/* ---------- El hueco: medio punto sobre jambas rectas ---------- */
html[data-recs="soportales"] .sp__arch {
  position: relative; display: block;
  aspect-ratio: 20 / 37;
  border-radius: 999px 999px 0 0;
  overflow: hidden; isolation: isolate;
  transition: opacity 1.6s var(--ease-out);
}
/* Para abrirlo desde el suelo, un segundo arco sube por dentro y su contenido baja lo mismo */
html[data-recs="soportales"] .sp__open,
html[data-recs="soportales"] .sp__in,
html[data-recs="soportales"] .sp__shade,
html[data-recs="soportales"] .sp__in::after { position: absolute; inset: 0; }
html[data-recs="soportales"] .sp__open { overflow: hidden; border-radius: inherit; }
html[data-recs="soportales"] .sp__in { background: var(--night-2); }   /* mientras llega la foto */
/* La foto sobra por los cuatro lados: es el paisaje que hay detrás del muro
   (--zt y --zb, desde el JS, acercan una franja vertical de la foto) */
html[data-recs="soportales"] .sp__depth { position: absolute; inset: var(--zt, -8.5%) -7% var(--zb, -8.5%); will-change: transform; }
html[data-recs="soportales"] .sp__img { width: 100%; height: 100%; object-fit: cover; opacity: 0; }
html[data-recs="soportales"] .sp__img.is-ok { opacity: 1; }
/* El grosor del muro: penumbra bajo la rosca del arco, en las jambas y en el umbral */
html[data-recs="soportales"] .sp__shade {
  pointer-events: none;
  background: rgba(18, 9, 9, .07);
  box-shadow:
    inset 0 30px 36px -20px rgba(18, 9, 9, .62),
    inset 16px 0 24px -16px rgba(18, 9, 9, .4),
    inset -16px 0 24px -16px rgba(18, 9, 9, .4),
    inset 0 -70px 60px -46px rgba(18, 9, 9, .42);
  transition: opacity 2.4s var(--ease-out);
}
/* A la sombra los colores se apagan un poco */
html[data-recs="soportales"] .sp__in::after {
  content: ""; pointer-events: none;
  background: #808080; mix-blend-mode: saturation;
  opacity: var(--sp-tone);
  transition: opacity 2.4s var(--ease-out);
}

/* ---------- El pie: número, nombre y precio, centrados bajo el arco ---------- */
html[data-recs="soportales"] .sp__cap {
  display: grid; justify-items: center;
  margin-top: clamp(18px, 1.7vw, 28px);
  text-align: center;
}
html[data-recs="soportales"] .sp__num {
  padding-left: .26em;
  font-family: var(--text); font-size: .62rem; font-weight: 500; line-height: 1;
  letter-spacing: .26em; color: var(--gold);
  font-variant-numeric: lining-nums;
}
html[data-recs="soportales"] .sp__name {
  max-width: 7.4em; min-height: 2.28em; margin-top: 12px;
  font-family: var(--display); font-weight: var(--dw);
  font-size: calc(clamp(.98rem, 1.42vw, 1.4rem) * var(--ds));
  line-height: 1.14; letter-spacing: var(--dt);
  text-wrap: balance;
  opacity: .88;
}
html[data-recs="soportales"] .sp__price {
  margin-top: 10px; padding-left: .16em;
  font-family: var(--text); font-size: .7rem; font-weight: 500; line-height: 1.4;
  letter-spacing: .16em; color: var(--fg-2, var(--cream-2));
  font-variant-numeric: lining-nums;
}
html[data-recs="soportales"] :is(.sp__num, .sp__name, .sp__price) { transition: opacity 1.4s var(--ease-out); }

/* ---------- Señalado (puntero o teclado) o, en móvil, el arco que llega: se sale a la luz ---------- */
html[data-recs="soportales"] .sp__item.is-hot .sp__img,
html[data-recs="soportales"] .sp__link:focus-visible .sp__img { transform: scale(1.05); }
html[data-recs="soportales"] :is(.sp__item.is-hot, .sp__item.is-lit, .sp__link:focus-visible) .sp__shade { opacity: .4; }
html[data-recs="soportales"] :is(.sp__item.is-hot, .sp__item.is-lit, .sp__link:focus-visible) .sp__in::after { opacity: 0; }
html[data-recs="soportales"] :is(.sp__item.is-hot, .sp__link:focus-visible) .sp__name { opacity: 1; }
/* Los demás arcos se quedan a la sombra */
html[data-recs="soportales"] .sp.has-hot .sp__item:not(.is-hot) .sp__arch,
html[data-recs="soportales"] .sp:has(.sp__link:focus-visible) .sp__link:not(:focus-visible) .sp__arch { opacity: .6; }
html[data-recs="soportales"] .sp.has-hot .sp__item:not(.is-hot) :is(.sp__num, .sp__name, .sp__price),
html[data-recs="soportales"] .sp:has(.sp__link:focus-visible) .sp__link:not(:focus-visible) :is(.sp__num, .sp__name, .sp__price) { opacity: .4; }
/* Foco visible: el contorno sigue el arco */
html[data-recs="soportales"] .sp__link:focus-visible .sp__arch { outline: 2px solid var(--fg, var(--paper)); outline-offset: 5px; }

/* ---------- Entrada (una vez): cada arco se abre desde el suelo ---------- */
html[data-recs="soportales"] .sp__open {
  transform: translate3d(0, 101%, 0);
  transition: transform 1.9s var(--ease-glide) var(--d);
}
html[data-recs="soportales"] .sp__in {
  transform: translate3d(0, -101%, 0);
  transition: transform 1.9s var(--ease-glide) var(--d);
}
html[data-recs="soportales"] .sp__img {
  scale: 1.16;
  transition: transform 2.4s var(--ease-out), scale 2.8s var(--ease-out) var(--d), opacity 1.2s var(--ease-out);
}
html[data-recs="soportales"] .sp__cap {
  opacity: 0; translate: 0 14px;
  transition: opacity 1.6s var(--ease-out) calc(var(--d) + .7s), translate 2s var(--ease-out) calc(var(--d) + .7s);
}
html[data-recs="soportales"] .sp.is-in .sp__open,
html[data-recs="soportales"] .sp.is-in .sp__in { transform: none; }
html[data-recs="soportales"] .sp.is-in .sp__img { scale: 1; }
html[data-recs="soportales"] .sp.is-in .sp__cap { opacity: 1; translate: none; }

/* Táctil con la arcada en fila: nada puede sacarla a la luz, así que va a todo color */
@media (hover: none) and (min-width: 1024px) {
  html[data-recs="soportales"] .sp { --sp-tone: 0; }
}

/* ---------- Tableta y móvil: carrusel nativo de arcos ---------- */
@media (max-width: 1023px) {
  html[data-recs="soportales"] .sp {
    --sp-gap: var(--pad);   /* el arco anterior acaba justo en el borde de la pantalla */
    display: flex;
    /* A sangre, con el primer arco alineado con el texto (8 px arriba y abajo para el foco) */
    margin: -8px calc(-1 * var(--pad));
    padding: 8px var(--pad);
    overflow-x: auto; overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--pad);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  html[data-recs="soportales"] .sp::-webkit-scrollbar { display: none; }
  html[data-recs="soportales"] .sp__item {
    flex: none; width: clamp(220px, 64vw, 300px);
    scroll-snap-align: start;
  }
  html[data-recs="soportales"] .sp__arch { aspect-ratio: 4 / 7; }
  /* Más foto a los lados: al deslizar se corre por detrás del arco */
  html[data-recs="soportales"] .sp__depth { inset: var(--zt, -8.5%) -17% var(--zb, -8.5%); }
  html[data-recs="soportales"] .sp__name { font-size: calc(1.28rem * var(--ds)); }
}

/* ---------- Movimiento reducido: arcos quietos ---------- */
@media (prefers-reduced-motion: reduce) {
  html[data-recs="soportales"] .sp__open,
  html[data-recs="soportales"] .sp__in { transform: none; transition: none; }
  html[data-recs="soportales"] .sp__img { scale: none; transform: none; transition: opacity .5s; }
  html[data-recs="soportales"] .sp__item.is-hot .sp__img,
  html[data-recs="soportales"] .sp__link:focus-visible .sp__img { transform: none; }
  html[data-recs="soportales"] .sp__cap { opacity: 1; translate: none; transition: none; }
  html[data-recs="soportales"] .sp__arch,
  html[data-recs="soportales"] .sp__shade,
  html[data-recs="soportales"] .sp__in::after,
  html[data-recs="soportales"] :is(.sp__num, .sp__name, .sp__price) { transition-duration: .5s; }
}