/* ==========================================================================
   SpotlightCarousel — photographs in white frames, butted together in a rail,
   the middle one opened out to carry a caption and a call to action. Drag,
   swipe, scroll, click a card or a dot. No dependencies.

   The cards overlap, shingled inwards from both ends, and the focused one
   rises out of the stack.

   A card loses focus in two ways at once: it scales down, and it crops
   narrower. That is what turns the near-square focused frame back into a
   portrait sliver, and no single scale can do it. Both come off `--t`, the
   one number that says how focused a card is — 1 for the middle card, 0 for
   anything more than one place away, and anything in between while a finger
   is dragging the rail.

   Port sin React de la plantilla Spotlight Carousel de Scrolltide (sep-2026)
   para el sitio Marca. El CSS es el original; lo agregado está al final.
   ========================================================================== */

.sc {
  --sc-bg: #f3f4f6;
  --sc-frame-color: #ffffff;
  --sc-veil: rgba(243, 244, 246, 0.34);
  --sc-scrim: linear-gradient(180deg, rgba(10, 8, 12, 0) 30%, rgba(10, 8, 12, 0.34) 62%, rgba(10, 8, 12, 0.62) 100%);
  --sc-title: #ffffff;
  --sc-subtitle: rgba(255, 255, 255, 0.88);
  --sc-pill: #ffffff;
  --sc-pill-text: #16181d;
  --sc-shadow-color: rgba(24, 28, 40, 0.24);
  --sc-dot: rgba(24, 28, 40, 0.22);
  --sc-dot-active: #22252d;

  --sc-card-w: 29cqw;
  --sc-card-h: 29.87cqw;
  --sc-frame: 0.93cqw;
  --sc-radius: 2.38cqw;
  --sc-lift: 5cqw;
  --sc-pop: 1.4cqw;
  --sc-fade-w: 10cqw;
  --sc-dim: 1;

  --sc-speed: 0.72s;
  --sc-ease: ease;

  /* Type is sized off the rail but bounded, so a full-bleed carousel does not
     end up with a 40px caption. */
  --sc-title-size: clamp(15px, 2.1cqw, 28px);
  --sc-sub-size: clamp(10px, 1.15cqw, 15px);
  --sc-pill-size: clamp(10px, 1.12cqw, 15px);

  /* Children read every length from here, so the rail keeps its proportions
     at any width without a media query. */
  container-type: inline-size;
  position: relative;
  width: 100%;
  background: var(--sc-bg);
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  cursor: grab;
  /* Vertical scrolling still belongs to the page. */
  touch-action: pan-y;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.sc:active {
  cursor: grabbing;
}

.sc:focus-visible {
  outline: 2px solid var(--sc-dot-active);
  outline-offset: 4px;
}

/* The rail runs past both edges and dissolves rather than stopping at a hard
   line. `transparent` is safe here where it would not be in a visible
   gradient: both stops are black, so only the alpha moves and there is no grey
   bloom to interpolate through. */
.sc-viewport {
  position: relative;
  overflow: hidden;
  /* Room for the shadow to fall without the mask cropping it. */
  padding: var(--sc-lift) 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--sc-fade-w), #000 calc(100% - var(--sc-fade-w)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--sc-fade-w), #000 calc(100% - var(--sc-fade-w)), transparent 100%);
}

.sc-stage {
  position: relative;
  height: var(--sc-card-h);
}

/* --- the card ------------------------------------------------------------ */

.sc-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--sc-w, var(--sc-card-w));
  height: var(--sc-h, var(--sc-card-h));
  /* `translate(-50%, -50%)` is measured against the card's own animating box,
     so it stays centred on its mark for free as the card grows. The last
     translate is the pop: the focused card rises off the rail, and because it
     rides on `--sc-t` it lifts on the way in rather than snapping up. */
  transform:
    translate(-50%, -50%)
    translateX(var(--sc-dx, 0px))
    translateY(calc(var(--sc-pop) * var(--sc-t, 0) * -1));

  box-sizing: border-box;
  /* The frame shrinks with the card, so it reads as one object moving away
     rather than a photo behind a fixed-width mount. */
  /* Softened rather than linear: at a straight `* --s` the side mounts
     thinned out to the point of vanishing against the backdrop. */
  padding: calc(var(--sc-frame) * (0.66 + 0.34 * var(--sc-s, 1)));
  border-radius: calc(var(--sc-radius) * var(--sc-s, 1));
  background: var(--sc-frame-color);
  cursor: pointer;
  /* Layout only — `contain: paint` would clip the shadow off. */
  contain: layout style;
  will-change: width, height, transform;

  transition-property: width, height, transform, padding, border-radius;
  transition-duration: var(--sc-speed);
  transition-timing-function: var(--sc-ease);
}

/* The shadow lives on its own layer so its weight can be animated with a
   plain opacity — cheap — while the card underneath resizes.
   Weighted by `t` squared, not `t`: the cards overlap, so a shadow on a card
   that is only half focused would fall straight onto the face of the one
   under it. Squaring keeps effectively all of it on the focused card. */
.sc-plate {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 1.7cqw 3.4cqw -0.6cqw var(--sc-shadow-color);
  opacity: calc(var(--sc-t, 0) * var(--sc-t, 0));
  pointer-events: none;
  transition: opacity var(--sc-speed) var(--sc-ease);
}

/* Fills the card's content box, so the frame is simply the card's padding and
   nothing has to be positioned against it. */
.sc-window {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: calc((var(--sc-radius) - var(--sc-frame) * 0.7) * var(--sc-s, 1));
  transition: border-radius var(--sc-speed) var(--sc-ease);
}

.sc-media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  /* The card changes shape as it takes focus, so `cover` re-crops: the
     photograph opens out sideways instead of being stretched. */
  object-fit: cover;
}

.sc-scrim,
.sc-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: opacity var(--sc-speed) var(--sc-ease);
}

/* Only the focused card carries type, so only it needs the gradient holding
   that type up. */
.sc-scrim {
  background: var(--sc-scrim);
  opacity: var(--sc-t, 0);
}

/* What pushes the rest of the rail back. */
.sc-veil {
  background: var(--sc-veil);
  opacity: calc((1 - var(--sc-t, 0)) * var(--sc-dim));
}

/* --- caption -------------------------------------------------------------- */

/* Measured against the rail, never against the card. The card's width is
   halfway through an animation most of the time, and a caption that read its
   width from the card would rewrap on every frame of it. */
.sc-caption {
  position: absolute;
  left: 50%;
  bottom: 9%;
  width: calc(var(--sc-card-w) * 0.78);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7cqw;
  text-align: center;
  pointer-events: none;
  /* Held back until the card is most of the way open, then brought up. */
  opacity: clamp(0, calc((var(--sc-t, 0) - 0.58) * 2.6), 1);
  transition: opacity var(--sc-speed) var(--sc-ease);
}

.sc-title {
  font-size: var(--sc-title-size);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--sc-title);
}

.sc-sub {
  font-size: var(--sc-sub-size);
  font-weight: 600;
  line-height: 1.45;
  color: var(--sc-subtitle);
  text-wrap: balance;
}

.sc-pill {
  margin-top: 0.8cqw;
  padding: 0.85cqw 2.2cqw;
  border-radius: 999px;
  background: var(--sc-pill);
  color: var(--sc-pill-text);
  font-size: var(--sc-pill-size);
  font-weight: 600;
  line-height: 1.6;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.2s ease;
}

/* The caption is inert while the card is on its way in; only the focused
   card's pill is a target. */
.sc-card.is-focused .sc-pill {
  pointer-events: auto;
}

.sc-card.is-focused .sc-pill:hover {
  transform: scale(1.045);
}

/* --- dots ---------------------------------------------------------------- */

.sc-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9cqw;
  padding-top: 2.6cqw;
}

.sc-dot {
  width: clamp(5px, 0.62cqw, 9px);
  height: clamp(5px, 0.62cqw, 9px);
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--sc-dot);
  cursor: pointer;
  transition: width var(--sc-speed) var(--sc-ease), background-color 0.24s ease;
}

.sc-dot.is-on {
  width: clamp(20px, 2.4cqw, 34px);
  background: var(--sc-dot-active);
}

.sc-dot:focus-visible {
  outline: 2px solid var(--sc-dot-active);
  outline-offset: 3px;
}

/* --- dragging ------------------------------------------------------------ */

/* While a finger is down the rail is written frame by frame from JS, so the
   transitions have to get out of the way or every frame would chase the last
   one. */
.sc--dragging .sc-card,
.sc--dragging .sc-plate,
.sc--dragging .sc-window,
.sc--dragging .sc-scrim,
.sc--dragging .sc-veil,
.sc--dragging .sc-caption {
  transition: none;
}

/* --- reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .sc {
    --sc-speed: 0.001s;
  }

  .sc-pill {
    transition: none;
  }
}

/* --- agregado para Marca --------------------------------------------------
   El botón del sitio abre el video en el visor de marca.js, así que la
   píldora puede ser un <button>: se le quitan los estilos del navegador. */
button.sc-pill {
  border: 0;
  font-family: inherit;
  cursor: pointer;
}