/* ==========================================================================
   ExpandedCards — a rail of slivers, one of them open. Hover, tap or tab a
   sliver and it widens while its neighbours slide aside. No dependencies.

   Every card's box is permanently the open width. Opening one changes two
   things only: `--vis`, which drives the `clip-path` that hides the overhang,
   and `--x`, which drives the `translateX` that places it. Custom properties
   do not transition on their own — the properties reading them do, which is
   the whole trick. Nothing here reflows, and the caption is laid out once at
   the open width so its text never rewraps mid-move.

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

.exp {
  --exp-bg: #000000;
  --exp-dim: linear-gradient(180deg, rgba(3, 5, 10, 0.58) 0%, rgba(3, 5, 10, 0.72) 100%);
  --exp-scrim: linear-gradient(180deg, rgba(4, 6, 12, 0) 34%, rgba(4, 6, 12, 0.58) 68%, rgba(4, 6, 12, 0.9) 100%);
  --exp-title: #ffffff;
  --exp-body-color: rgba(255, 255, 255, 0.86);
  --exp-number: #ffffff;
  --exp-number-dim: rgba(255, 255, 255, 0.72);
  --exp-icon-color: rgba(255, 255, 255, 0.92);

  --exp-ratio: 1.4925;
  --exp-card-w: 53.6cqw;
  --exp-pad: 2.4cqw;
  --exp-icon-size: 2.8cqw;
  --exp-corner: 2.4cqw;
  --exp-nudge: 0.9cqw;

  --exp-speed: 0.72s;
  --exp-ease: ease;
  --exp-zoom: 1.12;
  --exp-parallax: 0.4;
  --exp-caption-delay: 0.22s;

  /* Type is sized off the rail, but bounded: a full-bleed rail would
     otherwise carry 30px captions. */
  --exp-num-size: clamp(11px, 2.2cqw, 16px);
  --exp-body-size: clamp(12px, 2.45cqw, 17px);
  --exp-title-size: clamp(11px, 2.35cqw, 16px);

  /* Children read their lengths from here, so the rail keeps its proportions
     at any width without a media query. */
  container-type: inline-size;
  width: 100%;
  background: var(--exp-bg);
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-tap-highlight-color: transparent;
}

.exp-rail {
  position: relative;
  width: 100%;
  aspect-ratio: var(--exp-ratio);
}

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

.exp-card {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  /* Always the open width. `clip-path` decides how much of it you get. */
  width: var(--exp-card-w);

  transform: translate3d(var(--x), 0, 0);
  /* Clipping, not overflow: this also clips hit-testing, so the hidden
     overhang of an open card cannot sit on a neighbour and steal its hover. */
  clip-path: inset(0 calc(var(--exp-card-w) - var(--vis)) 0 0 round var(--exp-corner));

  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  contain: layout paint style;
  will-change: transform, clip-path;

  transition-property: transform, clip-path;
  transition-duration: var(--exp-speed);
  transition-timing-function: var(--exp-ease);
}

.exp-card:focus-visible {
  outline: 2px solid var(--exp-number);
  outline-offset: -4px;
}

/* --- artwork -------------------------------------------------------------- */

.exp-media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Two moves in one transform, both driven by `--vis`, both free:
     the sliver holds a slice from nearer the middle of the picture and slides
     the rest into place as it opens, and it sits zoomed in until it does. */
  transform:
    translateX(calc((var(--vis) - var(--exp-card-w)) * var(--exp-parallax) * 0.5))
    scale(var(--exp-media-zoom, var(--exp-zoom)));
  transform-origin: 50% 50%;
  will-change: transform;

  transition: transform var(--exp-speed) var(--exp-ease);
}

.exp-card.is-open .exp-media {
  --exp-media-zoom: 1;
}

/* Legibility gradient under the caption. It has nothing to hold up while the
   card is shut, but a trace of it keeps the footer mark off the bare image. */
.exp-scrim,
.exp-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: opacity var(--exp-speed) var(--exp-ease);
}

.exp-scrim {
  background: var(--exp-scrim);
  opacity: 0.4;
}

.exp-card.is-open .exp-scrim {
  opacity: 1;
}

/* The veil is what holds a shut card back. */
.exp-veil {
  background: var(--exp-dim);
  opacity: 1;
}

.exp-card.is-open .exp-veil {
  opacity: 0;
}

/* --- type ---------------------------------------------------------------- */

/* Shut, a card is barely wider than the mark inside it, so anything sitting
   at the left padding reads as off-centre. `--exp-nudge` is the difference
   between that padding and a centred position; the number and the icon are
   near enough the same width to share it. */
.exp-num,
.exp-mark {
  transform: translateX(var(--exp-nudge));
  transition: transform var(--exp-speed) var(--exp-ease);
}

.exp-card.is-open .exp-num,
.exp-card.is-open .exp-mark {
  transform: translateX(0);
}

.exp-num {
  position: absolute;
  top: var(--exp-pad);
  left: var(--exp-pad);
  font-size: var(--exp-num-size);
  font-weight: 600;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--exp-number-dim);
  transition-property: transform, color;
  transition-duration: var(--exp-speed);
  transition-timing-function: var(--exp-ease);
}

.exp-card.is-open .exp-num {
  color: var(--exp-number);
}

.exp-caption {
  position: absolute;
  left: var(--exp-pad);
  right: var(--exp-pad);
  bottom: var(--exp-pad);
  display: flex;
  flex-direction: column;
  gap: calc(var(--exp-pad) * 0.95);
  /* The caption is measured at the open width and stays there. Rewrapping
     text halfway through the reveal is what gives these away. */
  pointer-events: none;
}

.exp-body,
.exp-title {
  opacity: 0;
  /* Out fast, in slow: a shut card should drop its text immediately, an
     opening one should let the type arrive after the room is made. */
  transition-property: opacity, transform;
  transition-duration: calc(var(--exp-speed) * 0.26);
  transition-timing-function: ease;
  transition-delay: 0s;
}

.exp-card.is-open .exp-body,
.exp-card.is-open .exp-title {
  opacity: 1;
  transform: none;
  transition-duration: calc(var(--exp-speed) * 0.72);
  transition-timing-function: var(--exp-ease);
  transition-delay: var(--exp-caption-delay);
}

.exp-body {
  font-size: var(--exp-body-size);
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--exp-body-color);
  transform: translateY(24%);
}

.exp-foot {
  display: flex;
  align-items: center;
  gap: calc(var(--exp-pad) * 0.62);
}

.exp-mark {
  flex: 0 0 auto;
  width: var(--exp-icon-size);
  height: var(--exp-icon-size);
  color: var(--exp-icon-color);
}

.exp-mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

.exp-title {
  font-size: var(--exp-title-size);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--exp-title);
  white-space: nowrap;
  transform: translateX(-14%);
}

/* The mark arrives first and the name follows it in. */
.exp-card.is-open .exp-title {
  transition-delay: calc(var(--exp-caption-delay) * 1.45);
}

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

@media (prefers-reduced-motion: reduce) {
  .exp {
    --exp-speed: 0.001s;
    --exp-caption-delay: 0s;
    --exp-zoom: 1;
    --exp-parallax: 0;
  }
}

/* --- agregado para Marca --------------------------------------------------
   Solo tipografía: el título en Pirulen, como las bandas del sitio. Ningún
   largo ni ninguna transición cambia. */
.exp--marca .exp-title {
  font-family: 'Pirulen Tesla', Inter, sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
}