/* KFRAME Club banner inside the agency landing (2026-09-26). Links to club.kframe.ar. */
.club-banner {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(64px, 8vw, 110px) 0;
  background: var(--navy, #0b0b1c);
  color: #ffffff;
}

.club-banner__inner {
  width: min(var(--max, 1200px), 100% - 40px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.club-banner__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font: 700 0.78rem/1 var(--font-body, "Roboto", sans-serif);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.club-banner__kicker span {
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--pink, #ff2a6f);
  color: #ffffff;
  letter-spacing: 0.08em;
}

.club-banner h2 {
  margin: 18px 0 0;
  font: 700 clamp(2.2rem, 4.6vw, 3.8rem)/1.02 var(--font-display, "Poppins", sans-serif);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.club-banner h2 em {
  font-style: normal;
  color: var(--pink, #ff2a6f);
}

.club-banner__text {
  margin: 18px 0 0;
  max-width: 34rem;
  font: 400 1.08rem/1.6 var(--font-body, "Roboto", sans-serif);
  color: rgba(255, 255, 255, 0.78);
}

.club-banner__points {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
  font: 500 0.98rem/1.4 var(--font-body, "Roboto", sans-serif);
}

.club-banner__points li {
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.club-banner__points li::before {
  content: "✓";
  color: var(--pink, #ff2a6f);
  font-weight: 700;
}

.club-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.club-banner__cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 22px;
  border-radius: 12px;
  font: 700 0.9rem/1 var(--font-body, "Roboto", sans-serif);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.2s ease, color 0.28s ease;
}

.club-banner__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s ease;
}

.club-banner__cta:hover,
.club-banner__cta:focus-visible {
  transform: translateY(-1px);
}

.club-banner__cta:hover::before,
.club-banner__cta:focus-visible::before {
  transform: scaleX(1);
}

.club-banner__cta:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}

.club-banner__cta--primary {
  background: var(--pink, #ff2a6f);
  color: #ffffff;
}

.club-banner__cta--primary::before {
  background: #ffffff;
}

.club-banner__cta--primary:hover,
.club-banner__cta--primary:focus-visible {
  color: var(--ink, #0f0f1a);
}

.club-banner__cta--ghost {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9);
  color: #ffffff;
}

.club-banner__cta--ghost::before {
  background: #ffffff;
}

.club-banner__cta--ghost:hover,
.club-banner__cta--ghost:focus-visible {
  color: var(--ink, #0f0f1a);
}

/* The cards: three business designs fanned out, KFRAME's card floating in front. */
.club-banner__art {
  position: relative;
  aspect-ratio: 5 / 4;
}

.club-banner__art img {
  position: absolute;
  height: auto;
}

.club-banner__fan {
  width: 34%;
  top: 6%;
  border-radius: 14px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.club-banner__fan--1 { left: 8%; transform: rotate(-10deg); }
.club-banner__fan--2 { left: 33%; top: 0; z-index: 1; }
.club-banner__fan--3 { left: 58%; transform: rotate(10deg); }

.club-banner__art:hover .club-banner__fan--1 { transform: translateX(-10px) rotate(-13deg); }
.club-banner__art:hover .club-banner__fan--3 { transform: translateX(10px) rotate(13deg); }

/*
 * The floating card sits lower than the fan so the three business designs stay readable
 * behind it, and keeps a slight tilt of its own — the old artwork had the angle baked into
 * the render, the new one is a flat, face-on card, so the tilt lives here now.
 *
 * Three transforms have to stay on separate elements or they would overwrite each other:
 * the float animation drives the wrapper, the tilt and the hover flip share the inner
 * element, and each face carries its own rotation. The wrapper must not take a `filter`
 * either — a filter on an ancestor flattens the 3D context and the flip stops working — so
 * the drop shadow sits on the faces.
 */
.club-banner__float {
  position: absolute;
  z-index: 2;
  width: 64%;
  left: 18%;
  /* Percentages here resolve against the art box, and that box is 5/4 beside the copy but
     16/9 once stacked — the same number drops the card much further on desktop. Hence the
     two values: beside the copy there is no crowding to fix, stacked there is. */
  bottom: -2%;
  perspective: 1400px;
  animation: club-banner-float 6s ease-in-out infinite;
}

.club-banner__flip {
  position: relative;
  transform: rotate(-7deg);
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Hovering the art spreads the fan; the KFRAME card answers by turning to its back. */
.club-banner__art:hover .club-banner__flip,
.club-banner__art:focus-within .club-banner__flip {
  transform: rotate(-7deg) rotateY(180deg);
}

.club-banner__art .club-banner__face {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
  backface-visibility: hidden;
  filter: drop-shadow(0 30px 34px rgba(0, 0, 0, 0.55));
}

.club-banner__art .club-banner__face--back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
}

@keyframes club-banner-float {
  50% { transform: translateY(-12px) rotate(-1.5deg); }
}

@media (max-width: 860px) {
  .club-banner__inner { grid-template-columns: minmax(0, 1fr); }
  /* Stacked, the art spans the full column, and the 5/4 box it keeps beside the copy turns
     into ~299px of mostly empty navy on a 414px screen — the card fan is a wide composition,
     so it sat small in the middle of it. 16/9 lets the cards fill the frame and gives the
     section back ~89px, which is what pushed the CTAs so far past the fold. */
  /* The floating card hangs past the bottom of this box by design; stacked, the copy starts
     right underneath, so without this it lands on the "Nuevo" badge. */
  .club-banner__art { order: -1; max-width: 520px; width: 100%; margin-inline: auto; aspect-ratio: 16 / 9; margin-bottom: 28px; }
  /* Stacked the fan sits tighter, so the card drops further to keep the three designs readable. */
  .club-banner__float { bottom: -9%; }
}

@media (max-width: 480px) {
  .club-banner__cta { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .club-banner__float { animation: none; }
  /* The tilt stays — it is a position, not motion — but the card does not turn over. */
  .club-banner__flip { transition: none; }
  .club-banner__art:hover .club-banner__flip,
  .club-banner__art:focus-within .club-banner__flip { transform: rotate(-7deg); }
  .club-banner__fan, .club-banner__cta, .club-banner__cta::before { transition: none; }
}