/* CrossFit Lanzarote — hero, cinta cruzada, manifiesto, cifras y clases */

/* Hero ---------------------------------------------------------------- */
.hero {
  color: var(--bone); background: #000;
  position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: end;
  min-height: max(100svh, 640px); padding-top: calc(var(--header-h) + var(--topbar-h) + 32px);
}
.hero__media { position: absolute; inset: -6% 0 0; z-index: -3; will-change: transform; }
.hero__media picture, .hero__img { width: 100%; height: 100%; }
.hero__img { object-fit: cover; object-position: 62% 30%; }
.js .hero__img { animation: hero-in 2s var(--ease-out) both; }
.intro .hero__img { animation-delay: 1.5s; }
@keyframes hero-in { from { transform: scale(1.18); filter: brightness(0.2) contrast(1.4); } to { transform: scale(1); filter: none; } }
.hero__shade {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 30%),
    linear-gradient(0deg, #000 3%, rgba(0, 0, 0, 0.8) 42%, rgba(0, 0, 0, 0.25) 75%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0) 80%);
}
/* «LANZAROTE» gigante en contorno detrás del contenido; el JS lo desplaza con el scroll */
.hero__giant {
  position: absolute; left: 0; right: 0; top: 18%; z-index: -1; pointer-events: none; overflow: hidden;
}
.hero__giant span {
  display: block; white-space: nowrap; font-family: var(--display); font-weight: 900; text-transform: uppercase;
  font-size: 30vw; line-height: 0.8; color: transparent; -webkit-text-stroke: 2px rgba(255, 61, 85, 0.45);
  will-change: transform; transform: translateX(-4%);
}
.hero__content { padding-bottom: 0; }
.hero__eyebrow { color: var(--bone); }
.dot { width: 9px; height: 9px; background: var(--accent); flex: none; }
.js .dot { animation: blink 1.1s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }
.hero__title {
  font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: 0.82; letter-spacing: -0.01em;
  font-size: clamp(4.2rem, 13.2vw, 13.5rem); margin-bottom: clamp(20px, 2.6vw, 36px);
}
.hl { display: block; overflow: hidden; padding: 0.06em 0 0.02em; margin: -0.06em 0 -0.02em; }
.hl__in { display: block; }
.js .hl__in { animation: line-up 1.1s var(--ease-out) both; }
.js .hl:nth-child(2) .hl__in { animation-delay: 0.1s; }
.js .hl:nth-child(3) .hl__in { animation-delay: 0.2s; }
.intro .hl__in { animation-delay: 1.55s; }
.intro .hl:nth-child(2) .hl__in { animation-delay: 1.65s; }
.intro .hl:nth-child(3) .hl__in { animation-delay: 1.75s; }
@keyframes line-up { from { transform: translate3d(0, 105%, 0) skewY(6deg); } to { transform: none; } }
/* Rojo claro sobre negro: contraste > 6:1 (AA en cualquier tamaño) */
.hero__title em { color: var(--red-hot); position: relative; }
.hero__foot { display: grid; gap: 24px; align-items: end; margin-bottom: clamp(28px, 4vw, 48px); }
.hero__lead { max-width: 46ch; margin: 0; font-size: clamp(1.02rem, 0.9vw + 0.7rem, 1.25rem); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__rail {
  display: flex; justify-content: space-between; gap: 16px; padding-block: 16px 20px; border-top: 1px solid var(--hair);
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 700;
}
@media (min-width: 900px) { .hero__foot { grid-template-columns: 1fr auto; } }
@media (max-width: 699px) {
  .hero__img { object-position: 50% 20%; }
  .hero__rail span:nth-child(n + 3) { display: none; }
  .hero__ctas .btn { flex: 1 1 100%; }
  .hero__title { font-size: min(18.5vw, 7rem); }
  .hero__giant { top: 22%; }
  .hero__giant span { font-size: 42vw; }
}

/* Cinta cruzada (dos bandas inclinadas en movimiento) ------------------ */
.tape {
  --tape-h: clamp(46px, 5vw, 70px);
  position: relative; height: calc(var(--tape-h) * 2.6); overflow: hidden; background: var(--bone); contain: paint;
}
.tape__strip {
  position: absolute; left: -10%; width: 120%; top: 50%; height: var(--tape-h);
  display: flex; align-items: center; overflow: hidden; white-space: nowrap;
}
.tape__strip--front { z-index: 2; background: var(--red); color: var(--bone); transform: translateY(-50%) rotate(-3deg); box-shadow: 0 12px 30px rgba(10, 8, 7, 0.35); }
.tape__strip--back { background: var(--lava); color: var(--bone); transform: translateY(-50%) rotate(3deg); }
.tape__track { display: flex; align-items: center; flex: none; width: max-content; }
.tape__track span, .tape__track i {
  font-family: var(--display); font-weight: 900; text-transform: uppercase; font-style: normal;
  font-size: calc(var(--tape-h) * 0.62); line-height: 1; padding-inline: 0.35em;
}
.tape__track i { font-size: calc(var(--tape-h) * 0.4); opacity: 0.7; }
.js .tape__track { animation: marquee 26s linear infinite; }
.js .tape__strip--back .tape__track { animation-direction: reverse; animation-duration: 32s; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Manifiesto ---------------------------------------------------------- */
.manifesto__grid { display: grid; gap: clamp(48px, 6vw, 96px); }
.statement__text {
  font-size: clamp(1.55rem, 3.2vw, 3.1rem); line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; max-width: 26ch; margin-bottom: 0.9em;
}
.statement__text .w { transition: color 0.35s; }
.scrub-on .statement__text .w { color: rgba(10, 8, 7, 0.16); }
.scrub-on .statement__text .w.lit { color: var(--fg); }
.statement__punch {
  font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: 0.8; margin: 0 0 32px;
  font-size: clamp(5rem, 15vw, 14rem); letter-spacing: -0.02em;
}
.statement__punch em { color: transparent; -webkit-text-stroke: 2px var(--accent); }
.manifesto__aside { color: var(--muted); max-width: 40ch; }
.manifesto__media { position: relative; }
.manifesto__media figure img { width: 100%; height: 100%; object-fit: cover; }
.manifesto__media > figure:first-child { aspect-ratio: 4 / 5; }
.manifesto__detail { position: absolute; width: 42%; aspect-ratio: 2 / 3; right: -4%; bottom: -10%; border: 6px solid var(--bg); }
@media (min-width: 980px) {
  .manifesto__grid { grid-template-columns: 1.25fr 1fr; align-items: center; }
}
@media (max-width: 979px) {
  .manifesto__media { margin-right: 6%; margin-bottom: 10%; }
  .manifesto__detail { right: -6%; }
}

/* Cifras -------------------------------------------------------------- */
.numbers { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(88px, 11vw, 160px); border-block: 1px solid var(--hair); }
.numbers { background: var(--bg); }
.numbers__bg { position: absolute; inset: -12% 0; z-index: -2; opacity: 0.16; mix-blend-mode: multiply; }
.numbers__bg img { width: 100%; height: 100%; object-fit: cover; }
.numbers::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse at 85% 15%, rgba(192, 17, 43, 0.14), transparent 55%), linear-gradient(180deg, var(--bg), rgba(230, 224, 215, 0.2) 50%, var(--bg));
}
.stats { display: grid; gap: 0; border-top: 1px solid var(--hair-strong); }
.stat { display: grid; gap: 6px; padding: 28px 0; border-bottom: 1px solid var(--hair-strong); }
.stat__num {
  display: flex; align-items: flex-start; font-family: var(--display); font-weight: 900; line-height: 0.82;
  font-size: clamp(5.5rem, 12vw, 11rem); font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.stat__num small { font-size: 0.32em; color: var(--accent); margin: 0.08em 0.08em 0; }
.stat__label { color: var(--muted); max-width: 30ch; font-size: 0.98rem; }
@media (min-width: 700px) {
  .stats { grid-template-columns: repeat(2, 1fr); column-gap: 40px; }
}
@media (min-width: 1100px) {
  .stats { grid-template-columns: repeat(4, 1fr); }
  .stat { padding: 36px 24px 0 0; border-bottom: 0; border-right: 1px solid var(--hair); }
  .stat:last-child { border-right: 0; }
}

/* Clases: lista con imagen que sigue al cursor -------------------------- */
.classes { position: relative; }
.cls { border-top: 1px solid var(--hair-strong); }
.cls__row {
  position: relative; isolation: isolate; display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; align-items: baseline;
  padding: 22px 0; border-bottom: 1px solid var(--hair-strong); outline: none;
}
.cls__row::before {
  content: ""; position: absolute; inset: 0 calc(var(--gutter) * -1); z-index: -1; background: var(--red);
  clip-path: inset(0 100% 0 0); transition: clip-path 0.55s var(--ease-io);
}
.cls__num { font-family: var(--mono); font-weight: 700; font-size: 0.8rem; color: var(--accent); transition: color 0.3s; }
.cls__name {
  font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: 0.88;
  font-size: clamp(2.8rem, 7vw, 6.4rem); transition: transform 0.5s var(--ease-out);
}
.cls__badge {
  display: inline-block; vertical-align: top; margin-left: 0.2em; padding: 0.3em 0.5em;
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.1em; line-height: 1;
}
.cls__tag { margin: 8px 0 0; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); transition: color 0.3s; }
.cls__txt { grid-column: 2; margin: 0; color: var(--muted); max-width: 46ch; transition: color 0.3s; }
.cls__thumb { grid-column: 2; width: 100%; max-width: 420px; aspect-ratio: 16 / 10; object-fit: cover; margin-top: 12px; filter: grayscale(0.3); }
.cls__badge { background: var(--red); color: var(--bone); }
.cls__row:hover .cls__badge, .cls__row.is-active .cls__badge { background: var(--bone); color: var(--red); }
.cls__row:hover::before, .cls__row:focus-within::before, .cls__row.is-active::before { clip-path: inset(0 0 0 0); }
.cls__row:hover .cls__num, .cls__row.is-active .cls__num,
.cls__row:hover .cls__tag, .cls__row.is-active .cls__tag,
.cls__row:hover .cls__txt, .cls__row.is-active .cls__txt,
.cls__row:hover .cls__name, .cls__row.is-active .cls__name { color: var(--bone); }
.cls__row:focus-within .cls__name, .cls__row:focus-within .cls__txt, .cls__row:focus-within .cls__tag, .cls__row:focus-within .cls__num { color: var(--bone); }
.cls__row:hover .cls__name, .cls__row.is-active .cls__name { transform: translateX(14px); }
.cls__float { display: none; }
@media (min-width: 980px) {
  .cls__row { grid-template-columns: 60px 1.3fr 1fr; padding: 26px 0; align-items: center; }
  .cls__txt { grid-column: 3; }
  .cls__thumb { display: none; }
  .has-float .cls__float {
    display: block; position: fixed; left: 0; top: 0; z-index: 60; width: 340px; aspect-ratio: 4 / 3; pointer-events: none;
    overflow: hidden; opacity: 0; transform: translate3d(-999px, -999px, 0); transition: opacity 0.3s;
    clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%); border: 0;
  }
  .has-float .cls__float.is-on { opacity: 1; }
  .cls__float img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 0.6s var(--ease-out); }
  .cls__float.is-on img { transform: scale(1); }
}